/*
 * Rompe Pages-Motion — Feinschliff für die Unterseiten-Choreografie
 * (Leistungen, Branchen, Über uns, Referenzen, Kontakt, Berater, FAQ).
 *
 * Lädt via Dependency NACH motion.css (Handle 'rompe-motion') und
 * überschreibt den generischen Klassen-Vertrag NUR dort, wo Bestands-
 * Interaktionen sonst brechen würden (Konzeptwand, Logo-Grid, Hover).
 *
 * Motion-Spec-Regeln gelten auch hier:
 * 1. Versteckende Startzustände ausschließlich unter html.motion-ok.
 * 2. Reduced Motion → keine Bewegung, nur schnelle Opacity (Block unten).
 * 3. Nur transform / opacity / clip-path werden animiert.
 */

/* Gemeinsamer Fade — das implizite to{} ist der Kaskadenwert des Elements:
   jedes Element endet exakt bei seiner regulären Opacity (z. B. .55 bei
   den Kundenlogos, .97 bei Konzeptkarte 5). */
@keyframes rompe-pages-fade{from{opacity:0}}

/* =============================================
   SICHERHEITSNETZ — main.css versteckt .card & Co.
   ohne motion-ok-Gate (Altbestand). Ohne JS bzw.
   ohne Motion sind sie hier garantiert sichtbar.
   ============================================= */
html:not(.motion-ok) :is(.card,.decision-card,.path-card){opacity:1;transform:none}

/* =============================================
   HERO — H1 trägt .rv-lines UND [data-chor]:
   Der Container fadet nur (Chor-Delay), die Bewegung
   machen die Zeilen-Masken — kein doppelter Versatz.
   ============================================= */
html.motion-ok .hero-chor [data-chor].rv-lines{transform:none}

/* =============================================
   HERO-PARALLAX — .hero-bg.prlx bekommt vertikale
   Überdeckung, damit ±5 % translateY keine Kanten
   freilegt; im rAF-Fallback kein transition-Nachziehen
   (die Hover-Shift-Transition aus main.css würde die
   Scroll-Updates sonst verschleppen).
   ============================================= */
html.motion-ok .hero .hero-bg.prlx{inset:-7% 0;transition:none}

/* =============================================
   REVEAL + HOVER — nach dem Reveal laufen die
   Hover-Transitions des Altbestands (Background/
   Border, main.css .card & Co.) wieder mit; der
   generische .is-in-Vertrag würde sie verdrängen.
   ============================================= */
html.motion-ok :is(.card,.system-layer,.team-card).rv.is-in{
  transition:opacity var(--dur-m) var(--ease-soft),transform var(--dur-m) var(--ease-expo),background .3s ease,border-color .3s ease;
  transition-delay:var(--rv-delay,0s),var(--rv-delay,0s),0s,0s;
}

/* =============================================
   LEISTUNGEN: KONZEPTWAND — die Karten tragen eigene
   3D-Transforms + Transition (main.css) und die
   is-muted/is-active-Logik aus main.js. Der generische
   .rv-Vertrag (translateY → none) würde beides zerstören.
   Deshalb: Reveal als reine Opacity-Animation mit
   Gruppen-Stagger; die Wand-Transforms werden 1:1
   gespiegelt.
   ACHTUNG: Bei Änderungen an .concept-card--1…5 in
   main.css diese Spiegelwerte mitziehen!
   ============================================= */
html.motion-ok .concept-wall .concept-card.rv{
  /* Spiegel der Karten-Transition aus main.css (.concept-card) */
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,filter .35s ease,opacity .35s ease;
}
html.motion-ok .concept-wall .concept-card.rv:not(.is-in){opacity:0}
html.motion-ok .concept-wall .concept-card.rv.is-in{
  animation:rompe-pages-fade var(--dur-m) var(--ease-soft) backwards;
  animation-delay:var(--rv-delay,0s);
}
/* is-muted/is-active-Opacity nach dem Reveal wieder freigeben */
html.motion-ok .concept-wall .concept-card.rv.is-muted{opacity:.78;filter:saturate(.82) contrast(.98)}
html.motion-ok .concept-wall .concept-card.rv.is-muted:hover{opacity:1}
/* Spiegel der Wand-Transforms (Quelle: main.css .concept-card--1…5) */
html.motion-ok .concept-wall .concept-card--1.rv{transform:translate3d(calc(var(--wall-x) * -.38),calc(var(--wall-y) * -.3),40px) rotate(-3deg)}
html.motion-ok .concept-wall .concept-card--2.rv{transform:translate3d(calc(var(--wall-x) * .42),calc(var(--wall-y) * -.24),70px) rotate(3deg)}
html.motion-ok .concept-wall .concept-card--3.rv{transform:translate3d(calc(var(--wall-x) * -.22),calc(var(--wall-y) * .34),95px) rotate(2deg)}
html.motion-ok .concept-wall .concept-card--4.rv{transform:translate3d(calc(var(--wall-x) * .34),calc(var(--wall-y) * .3),120px) rotate(-2deg)}
html.motion-ok .concept-wall .concept-card--5.rv{transform:translate3d(calc(var(--wall-x) * .12),calc(var(--wall-y) * .08),130px) rotate(-1deg);opacity:.97}

/* =============================================
   LEISTUNGEN: VEREDELUNGS-KARTEN — nach dem
   Clip-Reveal (.rv-img) die Hover-Transition
   (Lift + Farbwechsel, main.css) wiederherstellen.
   ============================================= */
html.motion-ok .finishing-card.rv-img.is-in{
  transition:clip-path var(--dur-l) var(--ease-expo),background .3s ease,border-color .3s ease,transform .3s ease;
  transition-delay:var(--rv-delay,0s),0s,0s,0s;
}

/* =============================================
   REFERENZEN: KUNDENLOGO-GRID — Logos behalten ihre
   Ruhe-Optik (grayscale, opacity .55, Hover hellt auf);
   Reveal als reiner Opacity-Fade mit Gruppen-Stagger,
   ohne die Blend-/Filter-Regie aus dem Template zu stören.
   ============================================= */
html.motion-ok .logo-strip img.rv{opacity:.55;transform:none;transition:filter .25s ease,opacity .25s ease}
html.motion-ok .logo-strip img.rv:hover{opacity:1}
html.motion-ok .logo-strip img.rv:not(.is-in){opacity:0}
html.motion-ok .logo-strip img.rv.is-in{animation:rompe-pages-fade var(--dur-m) var(--ease-soft) backwards;animation-delay:var(--rv-delay,0s)}

/* =============================================
   REDUCED MOTION — greift auch, wenn der User die
   Einstellung NACH dem Laden umschaltet (motion-ok
   ist dann bereits gesetzt): keine Fades, sofort
   sichtbare Endzustände, Parallax-Überdeckung weg.
   ============================================= */
@media (prefers-reduced-motion:reduce){
  html.motion-ok .concept-wall .concept-card.rv:not(.is-in){opacity:1}
  html.motion-ok .concept-wall .concept-card.rv.is-in{animation:none}
  html.motion-ok .logo-strip img.rv:not(.is-in){opacity:.55}
  html.motion-ok .logo-strip img.rv.is-in{animation:none}
  html.motion-ok .hero .hero-bg.prlx{inset:0}
  html.motion-ok .finishing-card.rv-img.is-in{transition:none}
  html.motion-ok :is(.card,.system-layer,.team-card).rv.is-in{transition:opacity .2s ease;transition-delay:0s}
}

/* Finishing 07/2026: Branchen-Karten */
/* =============================================
   BRANCHEN: EDITORIAL-BILDKARTEN — 3:2-Bild oben
   (Clip-Reveal via .rv-img, erbt --rv-delay der
   Karte aus dem Gruppen-Stagger), darunter Nummer,
   Titel, Text und Tags. Der Hover-Zoom nutzt bewusst
   die eigenständige scale-Property, damit er nicht
   mit der transform-Reveal-Transition aus motion.css
   (scale 1.12 → 1 mit Stagger-Delay) kollidiert.
   ============================================= */
.industry-card{padding:0;overflow:hidden}
.industry-card__media{margin:0;aspect-ratio:3/2;overflow:hidden;background:#e9e6e0}
.industry-card__media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 14%;
  scale:1;
  transition:scale .7s var(--ease-expo);
}
.industry-card:hover .industry-card__media img{scale:1.04}
/* motion.css setzt auf .rv-img.is-in img die transition-Shorthand neu (nur
   transform, mit Stagger-Delay) — hier die scale-Transition mitführen,
   Delay nur für den Reveal-Anteil. */
html.motion-ok .industry-card .rv-img.is-in img{
  transition:transform var(--dur-l) var(--ease-expo),scale .7s var(--ease-expo);
  transition-delay:var(--rv-delay,0s),0s;
}
.industry-card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:1.9rem 2rem 2.3rem}
.industry-card__body .card-icon{margin-bottom:1.1rem}
@media (prefers-reduced-motion:reduce){
  .industry-card__media img{transition:none}
  .industry-card:hover .industry-card__media img{scale:none}
  html.motion-ok .industry-card .rv-img.is-in img{transition:none}
}

/* Finishing 07/2026: Leistungen Konzeptwand entzerrt */
/* =============================================
   LEISTUNGEN: KONZEPTWAND — ENTZERRTE FÄCHERUNG.
   Die Original-Fächerung (main.css .concept-card--1…5)
   überlappte so stark, dass Kartentexte mitten im Wort
   abgeschnitten wurden. Neue Regie: gestaffelte Collage,
   bei der Überlappungen NUR auf Bildflächen fallen —
   jeder Kartentext bleibt vollständig lesbar. Z-Reihen-
   folge von oben nach unten absteigend (obere Karte
   liegt über dem BILD der nächst tieferen), Hover/
   is-active (z-index:8, main.css) gewinnt weiterhin.
   Mobile ≤760px: Stapel-Layout aus main.css bleibt
   unberührt (transform:none !important dort).
   ============================================= */
@media (min-width:761px){
  /* transform-style:flat statt preserve-3d — unter preserve-3d
     sortiert der Browser die Karten nach ECHTER translateZ-Tiefe,
     z-index (inkl. is-active/hover z-index:8 aus main.css) war
     dadurch wirkungslos. Flat: Perspektiv-Skalierung bleibt,
     Stapelreihenfolge folgt wieder dem z-index. */
  .concept-wall{min-height:1240px;transform-style:flat}
  .concept-card--1{left:0;top:0;bottom:auto;right:auto;z-index:6;transform:translate3d(calc(var(--wall-x) * -.38),calc(var(--wall-y) * -.3),130px) rotate(-2deg)}
  .concept-card--2{right:0;top:90px;bottom:auto;left:auto;z-index:5;transform:translate3d(calc(var(--wall-x) * .42),calc(var(--wall-y) * -.24),110px) rotate(1.8deg)}
  .concept-card--3{left:4%;top:310px;bottom:auto;right:auto;z-index:4;transform:translate3d(calc(var(--wall-x) * -.22),calc(var(--wall-y) * .34),90px) rotate(1.4deg)}
  .concept-card--4{right:2%;top:430px;bottom:auto;left:auto;z-index:3;transform:translate3d(calc(var(--wall-x) * .34),calc(var(--wall-y) * .3),70px) rotate(-1.8deg)}
  .concept-card--5{left:31%;top:705px;bottom:auto;right:auto;z-index:2;transform:translate3d(calc(var(--wall-x) * .12),calc(var(--wall-y) * .08),50px) rotate(-1deg)}
}
/* Spiegel der neuen Wand-Transforms für den motion-ok-Reveal
   (überschreibt die alten Spiegelwerte weiter oben; Werte
   identisch zu den Basiswerten direkt hierüber halten!) */
html.motion-ok .concept-wall .concept-card--1.rv{transform:translate3d(calc(var(--wall-x) * -.38),calc(var(--wall-y) * -.3),130px) rotate(-2deg)}
html.motion-ok .concept-wall .concept-card--2.rv{transform:translate3d(calc(var(--wall-x) * .42),calc(var(--wall-y) * -.24),110px) rotate(1.8deg)}
html.motion-ok .concept-wall .concept-card--3.rv{transform:translate3d(calc(var(--wall-x) * -.22),calc(var(--wall-y) * .34),90px) rotate(1.4deg)}
html.motion-ok .concept-wall .concept-card--4.rv{transform:translate3d(calc(var(--wall-x) * .34),calc(var(--wall-y) * .3),70px) rotate(-1.8deg)}
html.motion-ok .concept-wall .concept-card--5.rv{transform:translate3d(calc(var(--wall-x) * .12),calc(var(--wall-y) * .08),50px) rotate(-1deg)}

/* Finishing 07/2026: Design-Lab-Stepper — mehrzeilige Labels (Schritt 05)
   linksbündig am Nummern-Kreis ausrichten statt zentriert zu flattern. */
.concept-lab__step { text-align: left; justify-content: flex-start; }