/* =====================================================================
   Webglanz · Bewegungs-System (uebernommen aus aland-pro/sanye-pro)
   Deklarativ über Attribute, damit Seiten nur Attribute setzen müssen:

     [data-wipe]          Wisch-Blende: eine Fläche rollt beim Einscrollen
                          von oben über den Abschnitt (--wp 0..1 via JS)
     [data-pin]           Sticky-Pin mit horizontalem Durchlauf
     [data-swipe]         Karussell mit Scroll-Snap, Pfeilen, Fortschritt
     [data-swipe-mobile]  dasselbe, aber nur unter 760px
     [data-accordion]     FAQ-Akkordeon
     .marquee             Endlos-Laufband

   Grundregeln:
   - Ohne JS und bei prefers-reduced-motion ist alles sichtbar und bedienbar.
     Die Ruhezustände sind hier die Vorgabewerte, JS schaltet nur zu.
   - Animiert werden ausschließlich transform und opacity.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Wisch-Blende
   --wp läuft von 0 (Abschnitt betritt den Viewport) bis 1.
   Ohne JS bleibt --wp bei 1 — die Fläche ist dann einfach da.
   --------------------------------------------------------------- */
[data-wipe]{position:relative;isolation:isolate}
[data-wipe]::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--wipe-color,var(--wipe-color, var(--flaecheAbgesetzt)));
  transform:scaleY(var(--wp,1));transform-origin:top center;
}
/* Vorderkante: Oxblood-Linie, zieht mit der Fläche mit */
[data-wipe]::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:-1;
  background:var(--aktion);
  transform:scaleX(var(--wp,1));transform-origin:left center;
}
/* Abschnitte mit eigener Flächenfarbe geben sie an die Blende ab */
.cta-band[data-wipe],.wipe-own-bg[data-wipe]{background:transparent}

/* ---------------------------------------------------------------
   2. Sticky-Pin mit horizontalem Durchlauf
   Vorgabe (mobil, reduced-motion, ohne JS): normaler Wisch-Container.
   Erst .is-pinned (setzt JS) macht daraus die gepinnte Sektion.
   --------------------------------------------------------------- */
.pin{
  position:relative;padding:64px 0;
  /* Kartenanfang bündig mit dem .wrap-Raster, auch im Vollbreit-Track */
  --pin-gut:max(24px,calc((100vw - var(--raster-max)) / 2));
}
.pin-head{margin-bottom:32px}
.pin-head p{margin-top:12px}

.pin-track{
  display:flex;gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:2px var(--pin-gut,24px) 6px;
}
.pin-track::-webkit-scrollbar{display:none}
.pin-track>*{flex:0 0 min(82vw,340px);scroll-snap-align:center}

.pin.is-pinned{padding:0}
.pin.is-pinned .pin-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:34px;
}
.pin.is-pinned .pin-track{
  width:max-content;overflow:visible;
  scroll-snap-type:none;
  padding:2px var(--pin-gut,24px);
  will-change:transform;
}
.pin.is-pinned .pin-track>*{flex:0 0 clamp(320px,30vw,440px)}
/* Im Flex-Spalten-Kontext greift das margin:0 auto von .wrap gegen die
   Breite des überlangen Tracks. Deshalb hier bewusst voll aufziehen und
   über dieselbe Rinne wie die Karten ausrichten. */
.pin.is-pinned .pin-head{
  width:100%;max-width:none;margin:0;
  padding:0 var(--pin-gut,24px);
}

/* Fortschrittsbalken der gepinnten Sektion */
.pin-prog{
  height:2px;background:var(--linie);position:relative;overflow:hidden;
  margin:0 var(--pin-gut,24px);
}
.pin-prog i{position:absolute;inset:0;background:var(--aktion);transform:scaleX(0);transform-origin:left}
.pin:not(.is-pinned) .pin-prog{display:none}

/* ---------------------------------------------------------------
   3. Swipe-Karussell
   Das Scrollen macht der Browser. JS liefert nur Pfeile und Fortschritt
   und blendet die Bedienleiste aus, wenn nichts zu scrollen ist.
   --------------------------------------------------------------- */
[data-swipe]{
  display:flex;gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:2px 24px 4px;margin:0 -24px;
}
[data-swipe]::-webkit-scrollbar{display:none}
[data-swipe]>*{flex:0 0 min(82vw,330px);scroll-snap-align:start}

@media (max-width:760px){
  [data-swipe-mobile]{
    display:flex;gap:16px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:2px 24px 4px;margin:0 -24px;
    border:0;background:none;
  }
  [data-swipe-mobile]::-webkit-scrollbar{display:none}
  [data-swipe-mobile]>*{flex:0 0 82vw;scroll-snap-align:start}
}

.swipe-nav{display:flex;align-items:center;gap:14px;margin-top:24px}
.swipe-nav[hidden]{display:none}
.swipe-btn{
  flex:none;width:46px;height:46px;border:1px solid var(--linie);border-radius:3px;
  background:var(--wipe-color, var(--flaecheAbgesetzt));color:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;line-height:1;
  transition:border-color .35s var(--ease),color .35s var(--ease),
             background .35s var(--ease),opacity .35s var(--ease);
}
.swipe-btn:hover:not([disabled]){border-color:var(--aktion);color:var(--aktion);background:var(--flaeche)}
.swipe-btn[disabled]{opacity:.3;cursor:default}
.swipe-prog{flex:1;height:2px;background:var(--linie);position:relative;overflow:hidden}
.swipe-prog i{
  position:absolute;inset:0;background:var(--aktion);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s linear;
}

/* ---------------------------------------------------------------
   4. FAQ-Akkordeon
   Ohne JS stehen alle Antworten offen (grid-template-rows:1fr).
   .js-acc setzt JS erst, wenn es die Steuerung übernommen hat.
   --------------------------------------------------------------- */
.faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  width:100%;padding:22px 0;background:none;border:0;text-align:left;cursor:pointer;
  color:var(--text);font-family:var(--schrift-ueberschrift);font-weight:600;line-height:1.3;
  font-size:clamp(1.1rem,1.8vw,1.35rem);
}
.faq-q:hover{color:var(--aktion)}
.faq-q .ico{
  flex:none;position:relative;width:20px;height:20px;margin-top:4px;
  transition:transform .45s var(--ease);
}
.faq-q .ico::before,.faq-q .ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--aktion);
  transform:translate(-50%,-50%);
}
.faq-q .ico::before{width:16px;height:2px}
.faq-q .ico::after{width:2px;height:16px;transition:transform .45s var(--ease)}
.faq-item.open .faq-q .ico{transform:rotate(180deg)}
.faq-item.open .faq-q .ico::after{transform:translate(-50%,-50%) scaleY(0)}

.faq-a{margin:0;display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{color:var(--textSchwach);max-width:64ch;padding-bottom:24px}
[data-accordion].js-acc .faq-a{grid-template-rows:0fr}
[data-accordion].js-acc .faq-item.open .faq-a{grid-template-rows:1fr}

/* ---------------------------------------------------------------
   5. Endlos-Laufband (Trust-Band)
   Zwei identische Gruppen, die zweite aria-hidden — die Animation
   schiebt exakt um eine Gruppenbreite (50%) und läuft dadurch nahtlos.
   --------------------------------------------------------------- */
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--wipe-color, var(--flaecheAbgesetzt)),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--wipe-color, var(--flaecheAbgesetzt)),transparent)}
.marquee-track{display:flex;width:max-content;animation:mq-run 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes mq-run{to{transform:translate3d(-50%,0,0)}}
.marquee-group{display:flex;align-items:center}

/* ---------------------------------------------------------------
   6. Scroll-Hinweis im Hero
   --------------------------------------------------------------- */
.scroll-cue{
  position:absolute;left:50%;bottom:22px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--textSchwach);font-size:.88rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;
  transform:translateX(-50%);
  transition:opacity .5s var(--ease);
}
.scroll-cue:hover{color:var(--text)}
.scroll-cue .line{
  display:block;width:1px;height:38px;background:linear-gradient(var(--aktion),transparent);
  animation:cue-drop 2.4s var(--ease) infinite;
}
@keyframes cue-drop{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
.scroll-cue.gone{opacity:0;pointer-events:none}
@media (max-width:820px){.scroll-cue{display:none}}

/* ---------------------------------------------------------------
   7. Ruhige Variante
   Alles, was sich bewegen würde, steht still — aber nichts verschwindet.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-wipe]::before{transform:none}
  [data-wipe]::after{transform:none}
  .pin.is-pinned{padding:64px 0}
  .pin.is-pinned .pin-sticky{position:static;height:auto;display:block}
  .pin.is-pinned .pin-track{
    width:auto;overflow-x:auto;transform:none !important;will-change:auto;
    padding:2px var(--pin-gut,24px) 6px;
  }
  .pin.is-pinned .pin-head{margin-bottom:32px}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap}
  .marquee::before,.marquee::after{display:none}
  .scroll-cue .line{animation:none;transform:scaleY(1)}
  .faq-a,.faq-q .ico,.faq-q .ico::after,.swipe-prog i{transition:none}
}


/* ---------------------------------------------------------------
   8. Auftritt beim Einscrollen
   Ergaenzt die scroll-gekoppelten Effekte um eine einmalige Einblendung.
   Bewusst ueber IntersectionObserver statt ueber die rAF-Schleife: Der
   Auftritt passiert einmal und muss nicht bei jedem Bild neu gerechnet
   werden. Nur opacity, transform und filter - kein Layout, kein CLS.
   Ohne JS bleibt alles sichtbar, die Klasse wird erst von motion.js gesetzt.
   --------------------------------------------------------------- */
.js-auftritt [data-auftritt] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform, filter;
}
[data-auftritt].da {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

/* Bilder wachsen beim Ueberfahren leicht - die Fassung bleibt stehen. */
.bildfassung { overflow: hidden; border-radius: var(--rundung); }
.bildfassung img { transition: transform .6s var(--ease); display: block; }
@media (hover: hover) { .bildfassung:hover img { transform: scale(1.04); } }

/* Spuerbare Rueckmeldung beim Antippen. */
.aktion { transition: transform .18s var(--ease), filter .18s var(--ease); }
.aktion:active { transform: translate3d(0, 1px, 0) scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .js-auftritt [data-auftritt] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .bildfassung img { transition: none; }
}