/* Bewerbify – Marketing-Komponenten (Laufbaender, FAQ).
   Animiert nur transform/opacity (FAQ-Hoehe ueber grid-template-rows, nur nach Klick).
   Gehoert zu /assets/site/marketing.js. */

/* ---------------------------------------------------------------
   1. Endlos-Laufband (Vorlagen, Vorlagen-Galerie, Staedte)
   Aufbau: .mk-marquee > .mk-marquee__track > .mk-marquee__group (n x)
   marketing.js klont Gruppen, bis die Breite fuer jeden Viewport
   reicht, und setzt --mk-shift (= Breite einer Gruppe) und --mk-duration.
   --------------------------------------------------------------- */
.mk-marquee {
  display: block;
  overflow: hidden;
  position: relative;
}

.mk-marquee__track {
  display: flex;
  width: max-content;
  height: 100%;
}

.mk-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
}

.mk-marquee.is-ready .mk-marquee__track {
  animation: mk-marquee var(--mk-duration, 60s) linear infinite;
  will-change: transform;
}

.mk-marquee.is-paused .mk-marquee__track {
  animation-play-state: paused;
}

@media (hover: hover) {
  .mk-marquee--templates:hover .mk-marquee__track,
  .mk-marquee--gallery:hover .mk-marquee__track {
    animation-play-state: paused;
  }
}

.mk-marquee--gallery:focus-within .mk-marquee__track {
  animation-play-state: paused;
}

@keyframes mk-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--mk-shift, -50%), 0, 0); }
}

/* Vorlagen-Laufband (Startseite, Ratgeber-Seiten) */
.mk-marquee--templates .mk-marquee__group {
  height: 650px;
}

.mk-marquee--templates .image-10 {
  display: block;
  height: auto;
}

/* Vorlagen-Galerie mit Badges (Generator, Vorlagen-Seiten) */
.mk-marquee--gallery {
  display: block;
  overflow: hidden;
}

.mk-marquee--gallery .mk-marquee__group {
  gap: 30px;
  padding-right: 30px; /* = gap, damit die Nahtstelle denselben Abstand hat */
  height: 100%;
}

.mk-marquee--gallery .link-block-7 {
  display: block;
  flex: none;
  width: auto;
}

/* Karte so breit wie ihr Bild: Badge (position:absolute; right) klebt an der Karte */
.mk-marquee--gallery .div-block-669 {
  display: block;
  flex: none;
  width: auto;
  transition: transform .2s ease-in-out;
}

.mk-marquee--gallery .image-26 {
  display: block;
  width: auto;
  height: 500px;
  aspect-ratio: 210 / 297; /* A4 – Breite steht schon vor dem Laden fest */
  object-fit: cover;
}

@media (hover: hover) {
  .mk-marquee--gallery .div-block-669:hover {
    transform: scale(1.05);
  }
}

/* Staedte-Laufband */
.mk-marquee--cities {
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.mk-marquee--cities .mk-marquee__group {
  height: 50px;
}

.mk-marquee--cities .div-block-680 {
  flex: none;
  white-space: nowrap;
}

@media screen and (max-width: 479px) {
  .mk-marquee--templates .mk-marquee__group {
    height: 100%;
  }

  /* feste Breite statt 100 %: Gruppenbreite steht vor dem Bild-Laden fest */
  .mk-marquee--templates .image-10 {
    width: 220px;
  }

  .mk-marquee--gallery .mk-marquee__group {
    gap: 21px;
    padding-right: 21px;
  }

  .mk-marquee--gallery .image-26 {
    height: 320px;
  }

  .mk-marquee--cities {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }

  .mk-marquee--cities .mk-marquee__group {
    height: 40px;
  }
}

/* Ohne JS bzw. mit reduzierter Bewegung: stehende, wischbare Reihe */
html:not(.w-mod-js) .mk-marquee {
  overflow-x: auto;
}

html:not(.w-mod-js) .mk-marquee__group[aria-hidden="true"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mk-marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .mk-marquee .mk-marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .mk-marquee .mk-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .mk-marquee .mk-marquee__group > * {
    scroll-snap-align: center;
  }

  .mk-marquee--gallery .div-block-669 {
    transition: none;
  }

  /* Staedte: alle Pillen umbrechend und zentriert statt Laufband */
  .mk-marquee--cities {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .mk-marquee--cities .mk-marquee__track {
    width: 100%;
  }

  .mk-marquee--cities .mk-marquee__group {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    height: auto;
  }
}

/* ---------------------------------------------------------------
   2. FAQ-Akkordeon (.dropdown-faq-2)
   marketing.js ersetzt das Webflow-Dropdown durch h3 > button
   mit aria-expanded/aria-controls und ein Region-Panel.
   --------------------------------------------------------------- */
.dropdown-faq-2 {
  --mk-faq-pad-x: 24px;
  --mk-faq-icon: 32px;
  display: block;
  position: relative;
  z-index: auto;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 16px;
  box-shadow: none;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease;
}

@media (hover: hover) {
  .dropdown-faq-2:hover {
    border-color: #d3dbee;
  }
}

.dropdown-faq-2.is-open {
  border-color: #c7d2fe;
}

.dropdown-faq-2 .dropdown-toggle-2-faq-2,
.dropdown-faq-2 .dropdown-toggle-2-faq-2.w--open {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 20px calc(var(--mk-faq-pad-x) * 2 + var(--mk-faq-icon)) 20px var(--mk-faq-pad-x);
  border-radius: 15px;
  box-shadow: none;
  white-space: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dropdown-faq-2 .w-icon-dropdown-toggle {
  display: none;
}

.dropdown-faq-2 .heading-6-faq-2 {
  width: auto;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  white-space: normal;
  font-size: 17px;
  line-height: 26px;
}

.mk-faq__btn {
  -webkit-appearance: none;
          appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* ganze Zeile ist Klickflaeche */
.mk-faq__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mk-faq__btn:focus {
  outline: none;
}

.mk-faq__btn:focus-visible::after {
  outline: 2px solid #3d69ff;
  outline-offset: -2px;
  border-radius: 15px;
}

.mk-faq__icon {
  position: absolute;
  top: 50%;
  right: var(--mk-faq-pad-x);
  width: var(--mk-faq-icon);
  height: var(--mk-faq-icon);
  margin-top: calc(var(--mk-faq-icon) / -2);
  border-radius: 50%;
  background-color: #eef2ff;
  pointer-events: none;
  transition: background-color .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}

.mk-faq__icon::before,
.mk-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background-color: #3d69ff;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
}

.mk-faq__icon::after {
  transform: rotate(90deg);
}

.dropdown-faq-2.is-open .mk-faq__icon {
  background-color: #3d69ff;
  transform: rotate(180deg);
}

.dropdown-faq-2.is-open .mk-faq__icon::before,
.dropdown-faq-2.is-open .mk-faq__icon::after {
  background-color: #fff;
}

.dropdown-faq-2.is-open .mk-faq__icon::after {
  transform: rotate(0deg);
}

/* Panel: weiche Hoehe ueber 0fr -> 1fr, Inhalt blendet mit opacity/transform */
.dropdown-faq-2:not(.mk-faq) .dropdown-list {
  display: none;
}

.dropdown-faq-2 .dropdown-list,
.dropdown-faq-2 .dropdown-list.w--open {
  display: grid;
  grid-template-rows: 0fr;
  position: static;
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 0;
  background: none;
  font-size: inherit;
  transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1);
}

.dropdown-faq-2.is-open .dropdown-list {
  grid-template-rows: 1fr;
}

.mk-faq__inner {
  min-height: 0;
  overflow: hidden;
}

.dropdown-faq-2 .dropdown-link {
  display: block;
  position: static;
  width: auto;
  margin: 0 var(--mk-faq-pad-x);
  padding: 16px calc(var(--mk-faq-pad-x) + var(--mk-faq-icon)) 22px 0;
  border-top: 1px solid #eef1f6;
  color: #5f6470;
  font-size: 17px;
  line-height: 27px;
  white-space: pre-wrap;
  text-decoration: none;
  box-shadow: none;
  cursor: text;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity .2s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}

.dropdown-faq-2.is-open .dropdown-link {
  opacity: 1;
  transform: none;
  transition-delay: .05s;
}

@media screen and (max-width: 479px) {
  .dropdown-faq-2 {
    --mk-faq-pad-x: 16px;
    --mk-faq-icon: 28px;
    width: 100%;
    border-radius: 14px;
  }

  .dropdown-faq-2 .dropdown-toggle-2-faq-2,
  .dropdown-faq-2 .dropdown-toggle-2-faq-2.w--open {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 13px;
  }

  .dropdown-faq-2 .heading-6-faq-2 {
    font-size: 14px;
    line-height: 21px;
  }

  .dropdown-faq-2 .dropdown-link {
    padding: 12px 0 18px;
    font-size: 14px;
    line-height: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-faq-2,
  .dropdown-faq-2 .dropdown-list,
  .dropdown-faq-2 .dropdown-link,
  .mk-faq__icon,
  .mk-faq__icon::before,
  .mk-faq__icon::after {
    transition: none !important;
  }
}