/* AI Værk — motion.css: Touch-Targets, Reveal-System, Choreografien, Hover-Leben. 5/5 */

/* ── Touch-Targets: Trefferflächen auf min. 44px anheben ──
   Padding + negative Margin vergroessert die Flaeche, ohne das
   Layout zu verschieben. Coarse-Pointer = Touch-Geraete. */
.feld-link,
.faq-link,
.article-back a,
.contact-direct-chips .direct-chip {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
}
.brand { padding: 8px 10px; margin: -8px -10px; }
.footer-legal a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
@media (pointer: coarse), (max-width: 900px) {
  .fcol a { display: inline-block; padding: 9px 0; }
  .fcol li { margin-top: 2px; }
  .letter-quick button { padding: 11px 15px 12px; }
  .nav-more-menu a { padding: 12px 12px; }
}
@media (max-width: 900px) {
  /* Klebende Nummern-Rail der Loesungen: volle Daumen-Flaeche */
  .sol-rail a { padding: 11px 12px; }
}
.work-caption a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }

/* ── Reveal-System ──────────────────────────────────────
   ACHTUNG, Shorthand-Falle: Reveal-Regeln mit hoeherer Spezifitaet
   ERSETZEN die komplette transition-Liste eines Elements. Wer einem
   Element in einem Reveal-Container einen Hover gibt, MUSS die
   Hover-Properties (translate/filter/transform/box-shadow/...) mit
   0s-Delay in dieselbe Liste aufnehmen — und den Hover im Browser
   mit Ein-/Ausstiegs-Messung verifizieren.
   Sehr dezent: 12px, 0.55s, nur beim ersten Sichtbarwerden.
   Nutzung: data-reveal auf ein Element; optional --reveal-delay
   (Stagger) und data-reveal="group" auf Container, dessen direkte
   Kinder automatisch gestaffelt einlaufen. */
html.js [data-reveal],
html.js [data-reveal="group"] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
html.js .is-revealed[data-reveal],
html.js [data-reveal="group"].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Startseite: Die Praxiswerkstatt kommt als zusammenhaengende Karte ins
   Bild. Text und Foto setzen nur einen kurzen Nachakzent, damit der Block
   nicht wie zwei konkurrierende Animationen wirkt. */
html.js .home-event[data-reveal="event"] {
  opacity: 0;
  transform: translateY(18px) scale(0.992);
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
}
html.js .home-event[data-reveal="event"] .home-event-body {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.52s var(--ease) 0.04s, translate 0.52s var(--ease) 0.04s;
}
html.js .home-event[data-reveal="event"] .home-event-visual {
  opacity: 0;
  transition: opacity 0.52s var(--ease) 0.04s;
}
html.js .home-event[data-reveal="event"] .home-event-visual img {
  scale: 1.025;
  transition: scale 0.76s var(--ease) 0.04s;
}
html.js .home-event.is-revealed[data-reveal="event"],
html.js .home-event.is-revealed[data-reveal="event"] .home-event-body,
html.js .home-event.is-revealed[data-reveal="event"] .home-event-visual {
  opacity: 1;
}
html.js .home-event.is-revealed[data-reveal="event"] { transform: none; }
html.js .home-event.is-revealed[data-reveal="event"] .home-event-body { translate: 0 0; }
html.js .home-event.is-revealed[data-reveal="event"] .home-event-visual img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .home-event[data-reveal="event"],
  html.js .home-event[data-reveal="event"] .home-event-body,
  html.js .home-event[data-reveal="event"] .home-event-visual,
  html.js .home-event[data-reveal="event"] .home-event-visual img {
    opacity: 1;
    transform: none;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
}
/* Wissensfluss-Choreografie: die Grafik baut sich in Leserichtung
   auf — Dokumente, Linien zeichnen sich, Engine glimmt, Frage,
   Antwort. Alle Schritte laufen ueber transition-delay am selben
   .is-revealed-Zustand. */
html.js .flow[data-reveal] { opacity: 1; transform: none; }
html.js .flow[data-reveal] .doc-tile {
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 0.5s var(--ease) var(--flow-dt, 0s),
    translate 0.5s var(--ease) var(--flow-dt, 0s),
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease);
}
html.js .flow[data-reveal] .doc-tile.d2 { --flow-dt: 0.15s; }
html.js .flow[data-reveal] .doc-tile.d3 { --flow-dt: 0.3s; }
html.js .flow[data-reveal] .flow-merge path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s var(--ease);
}
html.js .flow[data-reveal] .flow-merge path:nth-child(1) { transition-delay: 0.5s; }
html.js .flow[data-reveal] .flow-merge path:nth-child(2) { transition-delay: 0.62s; }
html.js .flow[data-reveal] .flow-merge path:nth-child(3) { transition-delay: 0.74s; }
html.js .flow[data-reveal] .engine {
  opacity: 0;
  scale: 0.97;
  transition: opacity 0.55s var(--ease), scale 0.55s var(--ease);
  transition-delay: 1.05s;
}
html.js .flow[data-reveal] .engine .field { opacity: 0; }
html.js .flow[data-reveal] .flow-out path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.55s var(--ease) 1.55s;
}
html.js .flow[data-reveal] .q-bubble,
html.js .flow[data-reveal] .a-card {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
}
html.js .flow[data-reveal] .q-bubble { transition-delay: 1.85s; }
html.js .flow[data-reveal] .a-card { transition-delay: 2.1s; }
html.js .flow[data-reveal] .a-card .cite {
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}
html.js .flow[data-reveal] .a-card .cite:nth-child(1) { transition-delay: 2.4s; }
html.js .flow[data-reveal] .a-card .cite:nth-child(2) { transition-delay: 2.5s; }
html.js .flow[data-reveal] .a-card .cite:nth-child(3) { transition-delay: 2.6s; }

html.js .flow.is-revealed .doc-tile,
html.js .flow.is-revealed .q-bubble,
html.js .flow.is-revealed .a-card,
html.js .flow.is-revealed .a-card .cite { opacity: 1; translate: 0 0; }
html.js .flow.is-revealed .flow-merge path,
html.js .flow.is-revealed .flow-out path { stroke-dashoffset: 0; }
html.js .flow.is-revealed .engine { opacity: 1; scale: 1; }
/* Das Sparkle-Feld glimmt kurz heller auf, wenn die Engine ankommt. */
html.js .flow.is-revealed .engine .field {
  opacity: 1;
  animation: field-glint 1.3s var(--ease) 1.25s backwards;
}
/* Hover auf einer Quell-Karte: sie hebt sich leicht aus dem Stapel.
   Der Lift laeuft ueber transform (Rotation bleibt), die Choreografie
   nutzt translate — kein Konflikt. */
.doc-tile { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
/* Sanftes Anheben und Absetzen — bewusst klein und langsam.
   Laeuft ueber transform (Rotation + Lift), waehrend die Reveal-
   Choreografie translate nutzt: keine geteilte Property. */
.doc-tile.d1:hover { transform: rotate(-2.4deg) translateY(-6px); }
.doc-tile.d2:hover { transform: rotate(1.6deg) translateY(-6px); }
.doc-tile.d3:hover { transform: rotate(-1.5deg) translateY(-6px); }
/* Vor Ende der Aufbau-Choreografie reagieren die Karten nicht. */
html.js .flow[data-reveal]:not(.is-settled) .doc-tile { pointer-events: none; }
.doc-tile:hover { box-shadow: var(--shadow-card), 0 10px 22px rgba(33, 30, 26, 0.07); }

/* Beim Hover ueber die ganze Grafik funkeln die Sparkles in der
   Engine: drei Gruppen pulsieren versetzt. Die Transition auf
   opacity faengt das Ende der Animation weich ab. */
/* Twinkle-Layer: identische Sparkles, funkeln nach dem Settle
   permanent — aber unsichtbar. Der Hover blendet nur die Layer-
   Opacity, dadurch endet das Funkeln beim Verlassen genauso weich
   wie es beginnt, egal wo im Zyklus. */
.engine .field-twinkle {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  animation: none;
}
html.js .flow[data-reveal] .engine .field-twinkle { transition: opacity 0.6s var(--ease); }
html.js .flow.is-revealed .engine .field-twinkle { opacity: 0; animation: none; }
html.js .flow.is-settled:hover .engine .field-twinkle path {
  animation: spark-twinkle var(--tw-dur, 2.6s) ease-in-out var(--tw-delay, 0s) infinite;
}
html.js .flow.is-settled:hover .engine .field-twinkle { opacity: 0.85; }
.engine .field-twinkle path:nth-child(3n) { --tw-dur: 2.2s; --tw-delay: 0s; }
.engine .field-twinkle path:nth-child(3n + 1) { --tw-dur: 3.1s; --tw-delay: 0.7s; }
.engine .field-twinkle path:nth-child(3n + 2) { --tw-dur: 2.7s; --tw-delay: 1.4s; }
@keyframes spark-twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .flow.is-settled .engine .field-twinkle path { animation: none; }
  .engine .field-twinkle { display: none; }
  .doc-tile, .doc-tile.d1:hover, .doc-tile.d2:hover, .doc-tile.d3:hover { transition: none; }
}

/* Dauerhaftes Leben auf Hover: Lichtpunkte wandern die Linien
   entlang zur Engine, das Sparkle-Feld hellt leicht auf. */
.flow .wf-dot { opacity: 0; transition: opacity 0.5s var(--ease); }
html.js .flow.is-settled:hover .wf-dot { opacity: 1; }
html.js .flow.is-revealed .engine .field { transition: filter 0.6s var(--ease); }
/* Der Twinkle-Layer blendet ueber Opacity — diese Regel muss die
   filter-only-Transition darueber schlagen. */
html.js .flow.is-revealed .engine svg.field-twinkle { transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
html.js .flow.is-settled:hover .engine .field { filter: brightness(1.45); }
@media (prefers-reduced-motion: reduce) {
  .flow .wf-dot { display: none; }
}

@keyframes field-glint {
  0% { opacity: 0; filter: brightness(1); }
  45% { opacity: 1; filter: brightness(1.9); }
  100% { opacity: 1; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .flow[data-reveal] .doc-tile,
  html.js .flow[data-reveal] .engine,
  html.js .flow[data-reveal] .engine .field,
  html.js .flow[data-reveal] .q-bubble,
  html.js .flow[data-reveal] .a-card,
  html.js .flow[data-reveal] .a-card .cite { opacity: 1; translate: 0 0; scale: 1; transition: none; animation: none; }
  html.js .flow[data-reveal] .flow-merge path,
  html.js .flow[data-reveal] .flow-out path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* Arbeitsweise: Duo zuerst, Pole antworten. Portraits faden
   nacheinander ein und ruecken dabei zusammen, das Statement folgt.
   Die Pol-Spalten bauen sich zeitversetzt gegeneinander auf. */
html.js .work-intro[data-reveal] { opacity: 1; transform: none; }
html.js .work-intro[data-reveal] .work-duo img {
  opacity: 0;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease) 0s;
}
html.js .work-intro[data-reveal] .work-duo img:last-child { transition: opacity 0.55s var(--ease) 0.18s, transform 0.55s var(--ease) 0s; }
html.js .work-intro[data-reveal] .work-intro-text {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) 0.45s, translate 0.55s var(--ease) 0.45s;
}
html.js .work-intro.is-revealed .work-duo img { opacity: 1; }
html.js .work-intro.is-revealed .work-intro-text { opacity: 1; translate: 0 0; }

html.js .poles[data-reveal] { opacity: 1; transform: none; }
html.js .poles[data-reveal] .pole-word,
html.js .poles[data-reveal] .pole-item {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease) var(--pole-dt, 0s), translate 0.5s var(--ease) var(--pole-dt, 0s);
}
html.js .poles[data-reveal] .pole:nth-child(1) .pole-word { --pole-dt: 0s; }
html.js .poles[data-reveal] .pole:nth-child(1) .pole-item:nth-of-type(1) { --pole-dt: 0.14s; }
html.js .poles[data-reveal] .pole:nth-child(1) .pole-item:nth-of-type(2) { --pole-dt: 0.28s; }
html.js .poles[data-reveal] .pole:nth-child(2) .pole-word { --pole-dt: 0.5s; }
html.js .poles[data-reveal] .pole:nth-child(2) .pole-item:nth-of-type(1) { --pole-dt: 0.64s; }
html.js .poles[data-reveal] .pole:nth-child(2) .pole-item:nth-of-type(2) { --pole-dt: 0.78s; }
html.js .poles.is-revealed .pole-word,
html.js .poles.is-revealed .pole-item { opacity: 1; translate: 0 0; }
/* Das Rueckgrat waechst von oben. */
html.js .poles[data-reveal]::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease) 0.2s;
}
html.js .poles.is-revealed::before { transform: scaleY(1); }

/* Hover: die Portraits neigen sich zueinander; das Pol-Wort toent
   ins Gletscherblau, wenn man seine Spalte hovert. */
.work-duo img { transition: transform 0.55s var(--ease); }
.work-duo:hover img:first-child { transform: rotate(-4deg) translate(2px, -2px); }
.work-duo:hover img:last-child { transform: rotate(3.4deg) translate(-2px, -1px); }

@media (prefers-reduced-motion: reduce) {
  html.js .work-intro[data-reveal] .work-duo img,
  html.js .work-intro[data-reveal] .work-intro-text,
  html.js .poles[data-reveal] .pole-word,
  html.js .poles[data-reveal] .pole-item { opacity: 1; translate: 0 0; transition: none; }
  html.js .poles[data-reveal]::before { transform: none; transition: none; }
  .work-duo img { transition: none; }
}

/* Fallstudien-Teaser: der Weg erzaehlt sich von oben nach unten —
   Text zuerst, dann die drei Stationen nacheinander, die dunkle
   CherryGate-Kachel landet zuletzt und ihre Aurora glimmt nach. */
html.js .case-teaser[data-reveal] { opacity: 1; transform: none; }
html.js .case-teaser[data-reveal] > div:first-child {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
}
html.js .case-teaser[data-reveal] .ref-stop {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.55s var(--ease) var(--case-dt, 0s),
    translate 0.55s var(--ease) var(--case-dt, 0s),
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease);
}
html.js .case-teaser[data-reveal] .ref-stop-1 { --case-dt: 0.25s; }
html.js .case-teaser[data-reveal] .ref-stop-2 { --case-dt: 0.45s; }
html.js .case-teaser[data-reveal] .ref-stop-3 { --case-dt: 0.68s; }
html.js .case-teaser[data-reveal] .ref-stop-3::after {
  opacity: 0;
  transition: opacity 1s var(--ease) 1.15s;
}
html.js .case-teaser.is-revealed > div:first-child,
html.js .case-teaser.is-revealed .ref-stop { opacity: 1; translate: 0 0; }
html.js .case-teaser.is-revealed .ref-stop-3::after { opacity: 1; }

/* Hover: sanftes Anheben und Absetzen wie bei den Quell-Karten
   der Wissens-Section — 6px, langsam, in beide Richtungen weich. */
.ref-stop {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.ref-stop:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(33, 30, 26, 0.09);
}
.ref-stop-3:hover {
  transform: rotate(-0.4deg) translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 40px rgba(33, 30, 26, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  html.js .case-teaser[data-reveal] > div:first-child,
  html.js .case-teaser[data-reveal] .ref-stop { opacity: 1; translate: 0 0; transition: none; }
  html.js .case-teaser[data-reveal] .ref-stop-3::after { opacity: 1; transition: none; }
  .ref-stop { transition: none; }
}

/* CTA-Band: Gruppen-Stagger; der Button behaelt seine Hover-
   Transitions (die Gruppen-Regel wuerde die Liste sonst ersetzen). */
html.js .cta-band[data-reveal] > .btn {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease) var(--reveal-delay, 0s),
    background-color 0.35s var(--ease);
}

/* Loesungen: Text-Beat, dann baut sich die Signature-Grafik in
   Schritten auf. Reveal laeuft ueber opacity/scale, der Hover-Lift
   ueber translate — getrennte Properties, bestehende Rotationen
   der Grafik-Bloecke bleiben unberuehrt. */
html.js .sol-item[data-reveal] { opacity: 1; transform: none; }
html.js .sol-item[data-reveal] .sol-head,
html.js .sol-item[data-reveal] .sol-text {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--sol-dt, 0s), translate 0.55s var(--ease) var(--sol-dt, 0s);
}
html.js .sol-item[data-reveal] .sol-text { --sol-dt: 0.12s; }
html.js .sol-item[data-reveal] .sol-gfx .lgfx > * {
  opacity: 0;
  scale: 0.985;
  transition:
    opacity 0.5s var(--ease) var(--sol-dt, 0.35s),
    scale 0.5s var(--ease) var(--sol-dt, 0.35s),
    translate 0.55s var(--ease);
}
html.js .sol-item[data-reveal] .sol-gfx .lgfx > *:nth-child(2) { --sol-dt: 0.55s; }
html.js .sol-item[data-reveal] .sol-gfx .lgfx > *:nth-child(3) { --sol-dt: 0.75s; }
html.js .sol-item[data-reveal] .sol-gfx .lgfx > *:nth-child(4) { --sol-dt: 0.95s; }
html.js .sol-item[data-reveal] .sol-gfx .lgfx > *:nth-child(5) { --sol-dt: 1.15s; }
html.js .sol-item.is-revealed .sol-head,
html.js .sol-item.is-revealed .sol-text { opacity: 1; translate: 0 0; }
html.js .sol-item.is-revealed .sol-gfx .lgfx > * { opacity: 1; scale: 1; }

/* Hover-Lift nur auf den echten Karten-Elementen der Grafiken:
   Dokument-Karten, Mail/Erledigt-Karten, Strays. Bubbles und
   Antwort-Bloecke bleiben ruhig. */
.sol-gfx .lgw-doc,
.sol-gfx .lga-card,
.sol-gfx .lgi-stray {
  transition: translate 0.5s var(--ease);
}
.sol-gfx .lgw-doc:hover,
.sol-gfx .lga-card:hover,
.sol-gfx .lgi-stray:hover { translate: 0 -6px; }

/* Dunkle Kacheln (Agent, Rechenzentrum): Aurora-Leben auf eigenem
   Layer — laeuft permanent unsichtbar, Hover blendet nur ein/aus. */
.lgfx .lga-agent::before,
.lgfx .lgi-dc::before {
  content: "";
  position: absolute;
  inset: -35% -10%;
  z-index: -1;
  background:
    radial-gradient(45% 80% at 18% 100%, rgba(116, 194, 222, 0.28), transparent 68%),
    radial-gradient(40% 72% at 58% 105%, rgba(124, 205, 178, 0.22), transparent 66%),
    radial-gradient(36% 68% at 92% 100%, rgba(214, 120, 189, 0.2), transparent 68%),
    #191713;
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  animation: btn-aurora 6.5s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.lgfx .lga-agent:hover::before,
.lgfx .lgi-dc:hover::before { opacity: 1; animation-play-state: running; }

/* Rail: Ring-Puls am Punkt, Nummer toent — der Puls-Keyframe endet
   selbst transparent, das Gate faded nur die Layer-Opacity. */
.sol-rail .sol-dot { position: relative; }
.sol-rail .sol-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  animation: sol-ring 1.8s ease-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.sol-rail a:hover .sol-dot::after { opacity: 1; animation-play-state: running; }
.sol-rail .sol-num { transition: color 0.4s var(--ease); }
.sol-rail a:hover .sol-num { color: var(--accent); }
@keyframes sol-ring {
  0% { box-shadow: 0 0 0 0 rgba(46, 90, 120, 0.35); }
  75%, 100% { box-shadow: 0 0 0 7px rgba(46, 90, 120, 0); }
}

/* Fundament: Knoten landen, Linien zeichnen sich zum Sockel,
   der Rahmen-Hinweis kommt zuletzt. */
html.js .fund-grid[data-reveal] { opacity: 1; transform: none; }
html.js .fund-grid[data-reveal] .fund-node,
html.js .fund-grid[data-reveal] .fund-slab,
html.js .fund-grid[data-reveal] .fund-frame-label,
html.js .fund-grid[data-reveal] .fund-ds {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--fund-dt, 0s), translate 0.55s var(--ease) var(--fund-dt, 0s);
}
html.js .fund-grid[data-reveal] .fund-node:nth-child(2) { --fund-dt: 0.15s; }
html.js .fund-grid[data-reveal] .fund-node:nth-child(3) { --fund-dt: 0.3s; }
html.js .fund-grid[data-reveal] .fund-slab { --fund-dt: 0.85s; }
html.js .fund-grid[data-reveal] .fund-frame-label { --fund-dt: 1.15s; }
html.js .fund-grid[data-reveal] .fund-ds { --fund-dt: 0.3s; }
/* Die Linien sind gepunktet — statt dashoffset (wuerde die
   Punktierung zerstoeren) zeichnet ein Clip sie von oben nach
   unten Richtung Sockel. */
html.js .fund-grid[data-reveal] .fund-lines {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease) 0.5s;
}
html.js .fund-grid.is-revealed .fund-node,
html.js .fund-grid.is-revealed .fund-slab,
html.js .fund-grid.is-revealed .fund-frame-label,
html.js .fund-grid.is-revealed .fund-ds { opacity: 1; translate: 0 0; }
html.js .fund-grid.is-revealed .fund-lines { clip-path: inset(0 0 -2% 0); }

@media (prefers-reduced-motion: reduce) {
  html.js .sol-item[data-reveal] .sol-head,
  html.js .sol-item[data-reveal] .sol-text,
  html.js .fund-grid[data-reveal] .fund-node,
  html.js .fund-grid[data-reveal] .fund-slab,
  html.js .fund-grid[data-reveal] .fund-frame-label,
  html.js .fund-grid[data-reveal] .fund-ds { opacity: 1; translate: 0 0; transition: none; }
  html.js .sol-item[data-reveal] .sol-gfx .lgfx > * { opacity: 1; scale: 1; transition: none; }
  html.js .fund-grid[data-reveal] .fund-lines { clip-path: none; transition: none; }
  .lgfx .lga-agent::before, .lgfx .lgi-dc::before { animation: none; }
  .sol-rail .sol-dot::after { animation: none; }
  .sol-gfx .lgw-doc, .sol-gfx .lga-card, .sol-gfx .lgi-stray { transition: none; }
}

/* Workshops: Wandel-Grafik erzaehlt vorher -> nachher als
   Sequenz. Reveal ueber opacity/scale (Rotationen bleiben),
   innere Elemente je Seite gestaffelt. */
html.js .wk-wandel[data-reveal] { opacity: 1; transform: none; }
html.js .wk-wandel[data-reveal] .wk-who,
html.js .wk-wandel[data-reveal] .wk-bubble,
html.js .wk-wandel[data-reveal] .wk-stray,
html.js .wk-wandel[data-reveal] .wk-mutter,
html.js .wk-wandel[data-reveal] .wk-card,
html.js .wk-wandel[data-reveal] .wk-status,
html.js .wk-wandel[data-reveal] .wk-tag {
  opacity: 0;
  scale: 0.985;
  transition: opacity 0.5s var(--ease) var(--ww-dt, 0s), scale 0.5s var(--ease) var(--ww-dt, 0s);
}
html.js .wk-wandel[data-reveal] .wk-side-vorher .wk-tag { --ww-dt: 0s; }
html.js .wk-wandel[data-reveal] .wk-side-vorher .wk-who { --ww-dt: 0.12s; }
html.js .wk-wandel[data-reveal] .wk-side-vorher .wk-bubble { --ww-dt: 0.24s; }
html.js .wk-wandel[data-reveal] .wk-side-vorher .wk-stray { --ww-dt: 0.42s; }
html.js .wk-wandel[data-reveal] .wk-side-vorher .wk-mutter { --ww-dt: 0.58s; }
html.js .wk-wandel[data-reveal] .wk-side-nachher .wk-tag { --ww-dt: 0.95s; }
html.js .wk-wandel[data-reveal] .wk-side-nachher .wk-who { --ww-dt: 1.05s; }
html.js .wk-wandel[data-reveal] .wk-side-nachher .wk-card { --ww-dt: 1.18s; }
html.js .wk-wandel[data-reveal] .wk-side-nachher .wk-status { --ww-dt: 1.55s; }
html.js .wk-wandel.is-revealed .wk-who,
html.js .wk-wandel.is-revealed .wk-bubble,
html.js .wk-wandel.is-revealed .wk-stray,
html.js .wk-wandel.is-revealed .wk-mutter,
html.js .wk-wandel.is-revealed .wk-card,
html.js .wk-wandel.is-revealed .wk-status,
html.js .wk-wandel.is-revealed .wk-tag { opacity: 1; scale: 1; }

/* Formate-Treppe: Stufen steigen treppauf nacheinander, Nummern
   faden nach. Hover-Lift ueber transform (Rotation dreht leicht
   weiter), Reveal ueber opacity/translate mit eigener Liste. */
html.js .wk-steps[data-reveal] { opacity: 1; transform: none; }
html.js .wk-steps[data-reveal] .wk-step {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.55s var(--ease) var(--wk-dt, 0s),
    translate 0.55s var(--ease) var(--wk-dt, 0s),
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease);
}
html.js .wk-steps[data-reveal] .wk-step:nth-child(2) { --wk-dt: 0.18s; }
html.js .wk-steps[data-reveal] .wk-step:nth-child(3) { --wk-dt: 0.36s; }
html.js .wk-steps[data-reveal] .wk-step:nth-child(4) { --wk-dt: 0.54s; }
html.js .wk-steps[data-reveal] .wk-step-num {
  opacity: 0;
  transition: opacity 0.45s var(--ease) calc(var(--wk-dt, 0s) + 0.4s);
}
html.js .wk-steps[data-reveal] .wk-step-result,
html.js .wk-steps[data-reveal] .wk-step-note {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.45s var(--ease) var(--wkr-dt, 1s), translate 0.45s var(--ease) var(--wkr-dt, 1s);
}
html.js .wk-steps[data-reveal] .wk-step-result:nth-child(2) { --wkr-dt: 1.12s; }
html.js .wk-steps[data-reveal] .wk-step-result:nth-child(3) { --wkr-dt: 1.24s; }
html.js .wk-steps[data-reveal] .wk-step-note { --wkr-dt: 1.4s; }
html.js .wk-steps.is-revealed .wk-step { opacity: 1; translate: 0 0; }
html.js .wk-steps.is-revealed .wk-step-num { opacity: 1; }
html.js .wk-steps.is-revealed .wk-step-result,
html.js .wk-steps.is-revealed .wk-step-note { opacity: 1; translate: 0 0; }

/* Stufen-Hover: sanfter Lift, Rotation dreht einen Hauch weiter. */
.wk-step { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.wk-step:nth-child(1):hover { transform: rotate(-1deg) translateY(-6px); }
.wk-step:nth-child(2):hover { transform: rotate(0.9deg) translateY(-6px); }
.wk-step:nth-child(3):hover { transform: rotate(-0.7deg) translateY(-6px); }
.wk-step:nth-child(4):hover { transform: rotate(1deg) translateY(-6px); }
/* Dunkle Stufe: Aurora-Leben auf Opacity-gegatetem Zweitlayer
   (::after ist der statische Eck-Wash). */
.wk-step-dark::before {
  content: "";
  position: absolute;
  inset: -35% -10%;
  z-index: 0;
  background:
    radial-gradient(45% 80% at 18% 100%, rgba(116, 194, 222, 0.24), transparent 68%),
    radial-gradient(40% 72% at 58% 105%, rgba(124, 205, 178, 0.2), transparent 66%),
    radial-gradient(36% 68% at 92% 100%, rgba(214, 120, 189, 0.18), transparent 68%);
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  animation: btn-aurora 6.5s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.wk-step-dark:hover::before { opacity: 1; animation-play-state: running; }
.wk-step-dark > * { position: relative; z-index: 1; }

/* Manifest: Sparkle dreht auf Hover 90 Grad wie im Nav-Brand. */
.wk-manifest-spark { transition: transform 0.5s var(--ease); }
.wk-manifest:hover .wk-manifest-spark { transform: rotate(90deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  html.js .wk-wandel[data-reveal] .wk-who,
  html.js .wk-wandel[data-reveal] .wk-bubble,
  html.js .wk-wandel[data-reveal] .wk-stray,
  html.js .wk-wandel[data-reveal] .wk-mutter,
  html.js .wk-wandel[data-reveal] .wk-card,
  html.js .wk-wandel[data-reveal] .wk-status,
  html.js .wk-wandel[data-reveal] .wk-tag { opacity: 1; scale: 1; transition: none; }
  html.js .wk-steps[data-reveal] .wk-step,
  html.js .wk-steps[data-reveal] .wk-step-num,
  html.js .wk-steps[data-reveal] .wk-step-result,
  html.js .wk-steps[data-reveal] .wk-step-note { opacity: 1; translate: 0 0; transition: none; }
  .wk-step, .wk-manifest-spark { transition: none; }
  .wk-step-dark::before { animation: none; }
}

/* Entwicklung: Siegel-Dokument setzt sich, das Siegel stempelt
   zuletzt. Timeline-Segmente wachsen von links, Chips tanzen ein. */
html.js .ie-seal[data-reveal] { opacity: 1; transform: none; }
html.js .ie-seal[data-reveal] .ie-seal-text {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
}
html.js .ie-seal[data-reveal] .ie-doc {
  opacity: 0;
  scale: 0.985;
  transition: opacity 0.55s var(--ease) 0.3s, scale 0.55s var(--ease) 0.3s;
}
html.js .ie-seal[data-reveal] .ie-doc-rows li {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.45s var(--ease) var(--ies-dt, 0.6s), translate 0.45s var(--ease) var(--ies-dt, 0.6s);
}
html.js .ie-seal[data-reveal] .ie-doc-rows li:nth-child(2) { --ies-dt: 0.72s; }
html.js .ie-seal[data-reveal] .ie-doc-rows li:nth-child(3) { --ies-dt: 0.84s; }
html.js .ie-seal[data-reveal] .ie-doc-rows li:nth-child(4) { --ies-dt: 0.96s; }
html.js .ie-seal[data-reveal] .ie-doc-seal {
  opacity: 0;
  scale: 1.35;
  rotate: -6deg;
  transition: opacity 0.3s var(--ease) 1.3s, scale 0.45s var(--ease) 1.3s, rotate 0.45s var(--ease) 1.3s;
}
html.js .ie-seal[data-reveal] .ie-doc-foot {
  opacity: 0;
  transition: opacity 0.5s var(--ease) 1.6s;
}
html.js .ie-seal.is-revealed .ie-seal-text { opacity: 1; translate: 0 0; }
html.js .ie-seal.is-revealed .ie-doc { opacity: 1; scale: 1; }
html.js .ie-seal.is-revealed .ie-doc-rows li { opacity: 1; translate: 0 0; }
html.js .ie-seal.is-revealed .ie-doc-seal { opacity: 1; scale: 1; rotate: 0deg; }
html.js .ie-seal.is-revealed .ie-doc-foot { opacity: 1; }

/* Timeline: Segmente wachsen nacheinander von links, Inhalte
   der Spalten folgen, der Auslauf-Hinweis zuletzt. */
html.js .ie-tl[data-reveal] { opacity: 1; transform: none; }
html.js .ie-tl[data-reveal] .ie-tl-seg {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease) var(--iet-dt, 0s);
}
html.js .ie-tl[data-reveal] .ie-tl-col:nth-child(3) .ie-tl-seg { --iet-dt: 0.18s; }
html.js .ie-tl[data-reveal] .ie-tl-col:nth-child(4) .ie-tl-seg { --iet-dt: 0.36s; }
html.js .ie-tl[data-reveal] .ie-tl-col:nth-child(5) .ie-tl-seg { --iet-dt: 0.54s; }
html.js .ie-tl[data-reveal] .ie-tl-num,
html.js .ie-tl[data-reveal] .ie-tl-col h3,
html.js .ie-tl[data-reveal] .ie-tl-col p {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.5s var(--ease) calc(var(--iet-dt, 0s) + 0.25s), translate 0.5s var(--ease) calc(var(--iet-dt, 0s) + 0.25s);
}
html.js .ie-tl[data-reveal] .ie-tl-col:nth-child(3) { --iet-dt: 0.18s; }
html.js .ie-tl[data-reveal] .ie-tl-col:nth-child(4) { --iet-dt: 0.36s; }
html.js .ie-tl[data-reveal] .ie-tl-col:nth-child(5) { --iet-dt: 0.54s; }
html.js .ie-tl[data-reveal] .ie-tl-beyond {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 1.15s;
}
html.js .ie-tl.is-revealed .ie-tl-seg { transform: scaleX(1); }
html.js .ie-tl.is-revealed .ie-tl-num,
html.js .ie-tl.is-revealed .ie-tl-col h3,
html.js .ie-tl.is-revealed .ie-tl-col p { opacity: 1; translate: 0 0; }
html.js .ie-tl.is-revealed .ie-tl-beyond { opacity: 1; }

/* Technik: Text zuerst, Chips tanzen gestaffelt ein (opacity/
   scale, die Rotationen bleiben). Hover: kleiner Einzel-Lift. */
html.js .ie-tech[data-reveal] { opacity: 1; transform: none; }
html.js .ie-tech[data-reveal] .ie-tech-text {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
}
html.js .ie-tech[data-reveal] .ie-tech-chips span {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity 0.45s var(--ease) calc(0.3s + var(--chip-i, 0) * 0.08s),
    scale 0.45s var(--ease) calc(0.3s + var(--chip-i, 0) * 0.08s),
    translate 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.ie-tech-chips span:nth-child(1) { --chip-i: 0; }
.ie-tech-chips span:nth-child(2) { --chip-i: 1; }
.ie-tech-chips span:nth-child(3) { --chip-i: 2; }
.ie-tech-chips span:nth-child(4) { --chip-i: 3; }
.ie-tech-chips span:nth-child(5) { --chip-i: 4; }
.ie-tech-chips span:nth-child(6) { --chip-i: 5; }
.ie-tech-chips span:nth-child(7) { --chip-i: 6; }
html.js .ie-tech.is-revealed .ie-tech-text { opacity: 1; translate: 0 0; }
html.js .ie-tech.is-revealed .ie-tech-chips span { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .ie-seal[data-reveal] .ie-seal-text,
  html.js .ie-seal[data-reveal] .ie-doc,
  html.js .ie-seal[data-reveal] .ie-doc-rows li,
  html.js .ie-seal[data-reveal] .ie-doc-seal,
  html.js .ie-seal[data-reveal] .ie-doc-foot,
  html.js .ie-tl[data-reveal] .ie-tl-num,
  html.js .ie-tl[data-reveal] .ie-tl-col h3,
  html.js .ie-tl[data-reveal] .ie-tl-col p,
  html.js .ie-tl[data-reveal] .ie-tl-beyond,
  html.js .ie-tech[data-reveal] .ie-tech-text,
  html.js .ie-tech[data-reveal] .ie-tech-chips span {
    opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; transition: none;
  }
  html.js .ie-tl[data-reveal] .ie-tl-seg { transform: none; transition: none; }
  html.js .ie-bento[data-reveal] .ie-bento-item::before { opacity: 1; translate: 0 0; transition: none; }
  .ie-bento-item, .ie-tech-chips span { transition: none; }
}

/* Fallstudie: Ergebnis-Zeilen laufen nacheinander ein, der
   Textmarker zieht danach von links ueber den Kernbegriff. */
html.js .case-results[data-reveal] { opacity: 1; transform: none; }
html.js .case-results[data-reveal] .case-chap,
html.js .case-results[data-reveal] h2 {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
}
html.js .case-results[data-reveal] .result-line {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--res-dt, 0.2s), translate 0.55s var(--ease) var(--res-dt, 0.2s);
}
html.js .case-results[data-reveal] .result-line:nth-child(2) { --res-dt: 0.38s; }
html.js .case-results[data-reveal] .result-line:nth-child(3) { --res-dt: 0.56s; }
html.js .case-results[data-reveal] .result-line:nth-child(4) { --res-dt: 0.74s; }
html.js .case-results[data-reveal] .result-line strong {
  background-size: 0% 100%;
  transition: background-size 0.6s var(--ease) calc(var(--res-dt, 0.2s) + 0.45s);
}
html.js .case-results.is-revealed .case-chap,
html.js .case-results.is-revealed h2,
html.js .case-results.is-revealed .result-line { opacity: 1; translate: 0 0; }
html.js .case-results.is-revealed .result-line strong { background-size: 100% 100%; }

/* Loesungs-Landkarte: Gruppen nacheinander, Chips tanzen je
   Gruppe gestaffelt ein. Hover: Einzelchip-Lift. */
html.js .case-cols[data-reveal] { opacity: 1; transform: none; }
html.js .case-cols[data-reveal] .case-narrative {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
}
html.js .case-cols[data-reveal] .eng-group {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--map-dt, 0.25s), translate 0.55s var(--ease) var(--map-dt, 0.25s);
}
html.js .case-cols[data-reveal] .eng-group:nth-child(2) { --map-dt: 0.45s; }
html.js .case-cols[data-reveal] .eng-group:nth-child(3) { --map-dt: 0.65s; }
html.js .case-cols[data-reveal] .eng-group:nth-child(4) { --map-dt: 0.85s; }
html.js .case-cols[data-reveal] .eng-chip {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity 0.4s var(--ease) calc(var(--map-dt, 0.25s) + 0.15s + var(--chip-i, 0) * 0.07s),
    scale 0.4s var(--ease) calc(var(--map-dt, 0.25s) + 0.15s + var(--chip-i, 0) * 0.07s),
    translate 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.eng-chips .eng-chip:nth-child(1) { --chip-i: 0; }
.eng-chips .eng-chip:nth-child(2) { --chip-i: 1; }
.eng-chips .eng-chip:nth-child(3) { --chip-i: 2; }
.eng-chips .eng-chip:nth-child(4) { --chip-i: 3; }
.eng-chips .eng-chip:nth-child(5) { --chip-i: 4; }
.eng-chips .eng-chip:nth-child(6) { --chip-i: 5; }
.eng-chips .eng-chip:nth-child(7) { --chip-i: 6; }
.eng-chips .eng-chip:nth-child(8) { --chip-i: 7; }
/* Fallstudien-Uebersicht: gleiche Chip-Choreografie im Teaser. */
html.js .case-teaser[data-reveal] .eng-chips .eng-chip {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity 0.4s var(--ease) calc(0.35s + var(--chip-i, 0) * 0.07s),
    scale 0.4s var(--ease) calc(0.35s + var(--chip-i, 0) * 0.07s),
    translate 0.45s var(--ease),
    filter 0.45s var(--ease);
}
html.js .case-teaser.is-revealed .eng-chips .eng-chip { opacity: 1; scale: 1; }
html.js .case-cols.is-revealed .case-narrative,
html.js .case-cols.is-revealed .eng-group { opacity: 1; translate: 0 0; }
html.js .case-cols.is-revealed .eng-chip { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .case-results[data-reveal] .case-chap,
  html.js .case-results[data-reveal] h2,
  html.js .case-results[data-reveal] .result-line,
  html.js .case-cols[data-reveal] .case-narrative,
  html.js .case-cols[data-reveal] .eng-group,
  html.js .case-cols[data-reveal] .eng-chip { opacity: 1; translate: 0 0; scale: 1; transition: none; }
  html.js .case-results[data-reveal] .result-line strong { background-size: 100% 100%; transition: none; }
  .eng-chip { transition: none; }
}

/* Artikel-Kopf: Zurueck-Link, Cover, Titel als kurze Sequenz.
   Das Cover entwickelt sich wie die Listen-Thumbnails. Der Kopf
   liegt beim Laden im Viewport — die Sequenz startet sofort. */
html.js .article-head[data-reveal] { opacity: 1; transform: none; }
html.js .article-head[data-reveal] .article-back,
html.js .article-head[data-reveal] .article-title {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--ah-dt, 0s), translate 0.55s var(--ease) var(--ah-dt, 0s);
}
html.js .article-head[data-reveal] .article-title { --ah-dt: 0.3s; }
html.js .article-head[data-reveal] .article-cover {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.12s;
}
html.js .article-head[data-reveal] .article-cover img {
  scale: 1.05;
  filter: saturate(0.6);
  transition: scale 0.9s var(--ease) 0.25s, filter 0.9s var(--ease) 0.25s;
}
html.js .article-head.is-revealed .article-back,
html.js .article-head.is-revealed .article-title { opacity: 1; translate: 0 0; }
html.js .article-head.is-revealed .article-cover { opacity: 1; }
html.js .article-head.is-revealed .article-cover img { scale: 1; filter: saturate(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .article-head[data-reveal] .article-back,
  html.js .article-head[data-reveal] .article-title,
  html.js .article-head[data-reveal] .article-cover { opacity: 1; translate: 0 0; transition: none; }
  html.js .article-head[data-reveal] .article-cover img { scale: 1; filter: none; transition: none; }
}

/* Ueber uns: Steckbrief-Karten mit Portrait-Entwicklung und
   Versteht-Nachbeat. */
html.js .ua-founders[data-reveal] { opacity: 1; transform: none; }
html.js .ua-founders[data-reveal] .ua-founder {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.55s var(--ease) var(--uaf-dt, 0s), translate 0.55s var(--ease) var(--uaf-dt, 0s);
}
html.js .ua-founders[data-reveal] .ua-founder:nth-child(2) { --uaf-dt: 0.2s; }
html.js .ua-founders[data-reveal] .ua-portrait {
  scale: 1.05;
  filter: saturate(0.6);
  transition: scale 0.9s var(--ease) calc(var(--uaf-dt, 0s) + 0.25s), filter 0.9s var(--ease) calc(var(--uaf-dt, 0s) + 0.25s);
}
html.js .ua-kennt[data-reveal] .ua-kennt-row {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.45s var(--ease) calc(var(--uak-i, 0) * 0.12s), translate 0.45s var(--ease) calc(var(--uak-i, 0) * 0.12s);
}
.ua-kennt-row:nth-of-type(1) { --uak-i: 0; }
.ua-kennt-row:nth-of-type(2) { --uak-i: 1; }
.ua-kennt-row:nth-of-type(3) { --uak-i: 2; }
html.js .ua-founders.is-revealed .ua-founder { opacity: 1; translate: 0 0; }
html.js .ua-founders.is-revealed .ua-portrait { scale: 1; filter: saturate(1); }
html.js .ua-kennt.is-revealed .ua-kennt-row { opacity: 1; translate: 0 0; }

/* Wortgeruest: die Wand wird von unten gebaut — Fundament-Reihe
   zuerst, jeder Stein setzt sich von oben ab. */
html.js .ua-wall[data-reveal] .ua-brick {
  opacity: 0;
  translate: 0 -10px;
  transition:
    opacity 0.45s var(--ease) calc(var(--row-dt, 0s) + var(--brick-i, 0) * 0.09s),
    translate 0.45s var(--ease) calc(var(--row-dt, 0s) + var(--brick-i, 0) * 0.09s),
    filter 0.75s var(--ease) 0.15s,
    scale 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
html.js .ua-wall[data-reveal] .ua-wall-row:nth-child(4) { --row-dt: 0s; }
html.js .ua-wall[data-reveal] .ua-wall-row:nth-child(3) { --row-dt: 0.35s; }
html.js .ua-wall[data-reveal] .ua-wall-row:nth-child(2) { --row-dt: 0.7s; }
html.js .ua-wall[data-reveal] .ua-wall-row:nth-child(1) { --row-dt: 1.05s; }
.ua-wall-row .ua-brick:nth-child(1) { --brick-i: 0; }
.ua-wall-row .ua-brick:nth-child(2) { --brick-i: 1; }
.ua-wall-row .ua-brick:nth-child(3) { --brick-i: 2; }
html.js .ua-wall.is-revealed .ua-brick { opacity: 1; translate: 0 0; }
/* Hover: der Stein tritt vor, die Wand tritt zurueck. Dimmen
   laeuft ueber filter, der Reveal ueber opacity — getrennt. */
/* Entdimmen langsam (0.75s + Anlauf), Eindimmen zackiger — so
   flasht die Wand nicht, wenn der Cursor zwischen Steinen wandert. */
.ua-brick { transition: filter 0.75s var(--ease) 0.15s, scale 0.45s var(--ease), box-shadow 0.45s var(--ease); }
html.js .ua-wall.is-revealed:has(.ua-brick:hover) .ua-brick:not(:hover),
html.js .ua-wall.is-revealed .ua-brick:hover {
  transition: filter 0.4s var(--ease), scale 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* Dimmen erst, wenn wirklich ein Stein fokussiert ist — nicht
   schon beim Hovern der Luecken dazwischen. */
html.js .ua-wall.is-revealed:has(.ua-brick:hover) .ua-brick:not(:hover) { filter: opacity(0.45) saturate(0.7); }
html.js .ua-wall.is-revealed .ua-brick:hover {
  filter: none;
  scale: 1.06;
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.12);
}

/* Politik: die Hin-Platte zuerst, die Zurueck-Platte antwortet. */
html.js .ua-politik[data-reveal] { opacity: 1; transform: none; }
html.js .ua-politik[data-reveal] .ua-pol {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.55s var(--ease) var(--pol-dt, 0s), translate 0.55s var(--ease) var(--pol-dt, 0s);
}
html.js .ua-politik[data-reveal] .ua-pol:nth-child(2) { --pol-dt: 0.25s; }
html.js .ua-politik.is-revealed .ua-pol { opacity: 1; translate: 0 0; }

/* Routen: die Reise baut sich Station fuer Station auf, die
   Linien wachsen dazwischen. */
html.js .ua-routes[data-reveal] { opacity: 1; transform: none; }
html.js .ua-routes[data-reveal] .ua-route > * {
  opacity: 0;
  transition: opacity 0.4s var(--ease) calc(var(--rt-dt, 0s) + var(--st-i, 0) * 0.14s);
}
html.js .ua-routes[data-reveal] .ua-route .ua-route-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.4s var(--ease) calc(var(--rt-dt, 0s) + var(--st-i, 0) * 0.14s), transform 0.4s var(--ease) calc(var(--rt-dt, 0s) + var(--st-i, 0) * 0.14s);
}
html.js .ua-routes[data-reveal] .ua-route:nth-child(2) { --rt-dt: 0.55s; }
.ua-route > *:nth-child(1) { --st-i: 0; }
.ua-route > *:nth-child(2) { --st-i: 1; }
.ua-route > *:nth-child(3) { --st-i: 2; }
.ua-route > *:nth-child(4) { --st-i: 3; }
.ua-route > *:nth-child(5) { --st-i: 4; }
.ua-route > *:nth-child(6) { --st-i: 5; }
.ua-route > *:nth-child(7) { --st-i: 6; }
.ua-route > *:nth-child(8) { --st-i: 7; }
html.js .ua-routes.is-revealed .ua-route > * { opacity: 1; transform: none; }
html.js .ua-routes.is-revealed .ua-route .ua-route-line { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.js .ua-founders[data-reveal] .ua-founder,
  html.js .ua-kennt[data-reveal] .ua-kennt-row,
  html.js .ua-wall[data-reveal] .ua-brick,
  html.js .ua-politik[data-reveal] .ua-pol,
  html.js .ua-routes[data-reveal] .ua-route > * { opacity: 1; translate: 0 0; transform: none; transition: none; }
  html.js .ua-founders[data-reveal] .ua-portrait { scale: 1; filter: none; transition: none; }
  html.js .ua-wall.is-revealed:has(.ua-brick:hover) .ua-brick:not(:hover) { filter: none; }
  .ua-brick { transition: none; }
}

/* FAQ: jede Kategorie beobachtet sich selbst — Titel zuerst,
   die Fragen kaskadieren kurz gestaffelt nach. */
html.js .faq-cat[data-reveal] { opacity: 1; transform: none; }
html.js .faq-cat[data-reveal] h2 {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
}
html.js .faq-cat[data-reveal] .faq-list {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease) 0.1s, translate 0.5s var(--ease) 0.1s;
}
html.js .faq-cat[data-reveal] .faq-item {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.45s var(--ease) calc(0.3s + var(--faq-i, 0) * 0.08s), translate 0.45s var(--ease) calc(0.3s + var(--faq-i, 0) * 0.08s);
}
.faq-list .faq-item:nth-child(1) { --faq-i: 0; }
.faq-list .faq-item:nth-child(2) { --faq-i: 1; }
.faq-list .faq-item:nth-child(3) { --faq-i: 2; }
.faq-list .faq-item:nth-child(4) { --faq-i: 3; }
.faq-list .faq-item:nth-child(5) { --faq-i: 4; }
.faq-list .faq-item:nth-child(6) { --faq-i: 5; }
.faq-list .faq-item:nth-child(7) { --faq-i: 6; }
.faq-list .faq-item:nth-child(8) { --faq-i: 7; }
html.js .faq-cat.is-revealed h2 { opacity: 1; translate: 0 0; }
html.js .faq-cat.is-revealed .faq-list { opacity: 1; translate: 0 0; }
html.js .faq-cat.is-revealed .faq-item { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .faq-cat[data-reveal] h2,
  html.js .faq-cat[data-reveal] .faq-list,
  html.js .faq-cat[data-reveal] .faq-item { opacity: 1; translate: 0 0; transition: none; }
}

/* Klickbarer Abschluss einer Intro-Zeile. */
.intro-link {
  color: var(--accent);
  font-weight: 520;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 90, 120, 0.35);
  transition: border-color 0.35s var(--ease);
}
.intro-link:hover { border-color: var(--accent); }

/* Kontakt: der Brief laeuft wie beim Schreiben ein — Anrede,
   Anlass-Chips, Textfeld, Absender, Senden. */
html.js .contact-form[data-reveal] { opacity: 1; transform: none; }
html.js .contact-form[data-reveal] .letter-hello,
html.js .contact-form[data-reveal] .letter-body,
html.js .contact-form[data-reveal] .letter-sender,
html.js .contact-form[data-reveal] .form-foot {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease) var(--lt-dt, 0s), translate 0.5s var(--ease) var(--lt-dt, 0s);
}
html.js .contact-form[data-reveal] .letter-body { --lt-dt: 0.55s; }
html.js .contact-form[data-reveal] .letter-sender { --lt-dt: 0.72s; }
html.js .contact-form[data-reveal] .form-foot { --lt-dt: 0.88s; }
html.js .contact-form[data-reveal] .letter-quick button {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity 0.4s var(--ease) calc(0.15s + var(--chip-i, 0) * 0.07s),
    scale 0.4s var(--ease) calc(0.15s + var(--chip-i, 0) * 0.07s),
    translate 0.45s var(--ease),
    filter 0.45s var(--ease),
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.letter-quick button:nth-child(1) { --chip-i: 0; }
.letter-quick button:nth-child(2) { --chip-i: 1; }
.letter-quick button:nth-child(3) { --chip-i: 2; }
.letter-quick button:nth-child(4) { --chip-i: 3; }
.letter-quick button:nth-child(5) { --chip-i: 4; }
html.js .contact-form.is-revealed .letter-hello,
html.js .contact-form.is-revealed .letter-body,
html.js .contact-form.is-revealed .letter-sender,
html.js .contact-form.is-revealed .form-foot { opacity: 1; translate: 0 0; }
html.js .contact-form.is-revealed .letter-quick button { opacity: 1; scale: 1; }
/* Anlass-Chips: zusaetzlich zu Lift und Saettigung faerbt sich der Chip. */
.letter-quick button { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease); }

/* Gruender-Duo im Kopf: Portraits entwickeln sich nacheinander. */
html.js .founder-duo[data-reveal] { opacity: 1; transform: none; }
html.js .founder-duo[data-reveal] .founder-photo img,
html.js .founder-duo[data-reveal] img {
  opacity: 0;
  scale: 1.05;
  filter: saturate(0.6);
  transition: opacity 0.55s var(--ease) var(--fp-dt, 0s), scale 0.9s var(--ease) var(--fp-dt, 0s), filter 0.9s var(--ease) var(--fp-dt, 0s);
}
html.js .founder-duo[data-reveal] .founder-photo-2 img { --fp-dt: 0.18s; }
html.js .founder-duo.is-revealed .founder-photo img,
html.js .founder-duo.is-revealed img { opacity: 1; scale: 1; filter: saturate(1); }

/* Direkt-Chips: kommen als Nachbeat, sanfter Lift auf Hover. */
html.js .contact-direct[data-reveal] { opacity: 1; transform: none; }
html.js .contact-direct[data-reveal] .contact-direct-lead {
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.1s;
}
html.js .contact-direct[data-reveal] .direct-chip {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.5s var(--ease) var(--dc-dt, 0.25s),
    translate 0.5s var(--ease) var(--dc-dt, 0.25s),
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
html.js .contact-direct[data-reveal] .direct-chip:nth-child(2) { --dc-dt: 0.4s; }
html.js .contact-direct.is-revealed .contact-direct-lead { opacity: 1; }
html.js .contact-direct.is-revealed .direct-chip { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html.js .contact-form[data-reveal] .letter-hello,
  html.js .contact-form[data-reveal] .letter-body,
  html.js .contact-form[data-reveal] .letter-sender,
  html.js .contact-form[data-reveal] .form-foot,
  html.js .contact-form[data-reveal] .letter-quick button,
  html.js .founder-duo[data-reveal] img,
  html.js .contact-direct[data-reveal] .contact-direct-lead,
  html.js .contact-direct[data-reveal] .direct-chip {
    opacity: 1; translate: 0 0; scale: 1; filter: none; transition: none;
  }
  .letter-quick button { transition: none; }
}

/* DiZwei-Event: Termin-Karten mit Lift, Anmeldung als kleine
   Brief-Sequenz (Kopf, Termin-Optionen, Felder, Senden). */
.ev-date { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.ev-date:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(33, 30, 26, 0.1); }
html.js .ev-facts[data-reveal] > * {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease),
    translate 0.55s var(--ease) var(--reveal-delay, 0s);
}
html.js .ev-facts[data-reveal] > * { opacity: 0; translate: 0 12px; transform: none; }
html.js .ev-facts.is-revealed > * { opacity: 1; translate: 0 0; }

html.js .ev-signup[data-reveal] { opacity: 1; transform: none; }
html.js .ev-signup[data-reveal] .ev-signup-head,
html.js .ev-signup[data-reveal] .ev-fields,
html.js .ev-signup[data-reveal] .ev-form .btn-dark,
html.js .ev-signup[data-reveal] .form-privacy {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease) var(--ev-dt, 0s), translate 0.5s var(--ease) var(--ev-dt, 0s);
}
html.js .ev-signup[data-reveal] .ev-fields { --ev-dt: 0.5s; }
html.js .ev-signup[data-reveal] .ev-form .btn-dark { --ev-dt: 0.65s; }
html.js .ev-signup[data-reveal] .form-privacy { --ev-dt: 0.75s; }
html.js .ev-signup[data-reveal] .ev-opt {
  opacity: 0;
  scale: 0.94;
  transition:
    opacity 0.4s var(--ease) calc(0.18s + var(--chip-i, 0) * 0.09s),
    scale 0.4s var(--ease) calc(0.18s + var(--chip-i, 0) * 0.09s);
}
.ev-termine .ev-opt:nth-child(2) { --chip-i: 0; }
.ev-termine .ev-opt:nth-child(3) { --chip-i: 1; }
.ev-termine .ev-opt:nth-child(4) { --chip-i: 2; }
html.js .ev-signup.is-revealed .ev-signup-head,
html.js .ev-signup.is-revealed .ev-fields,
html.js .ev-signup.is-revealed .ev-form .btn-dark,
html.js .ev-signup.is-revealed .form-privacy { opacity: 1; translate: 0 0; }
html.js .ev-signup.is-revealed .ev-opt { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .ev-facts[data-reveal] > *,
  html.js .ev-signup[data-reveal] .ev-signup-head,
  html.js .ev-signup[data-reveal] .ev-fields,
  html.js .ev-signup[data-reveal] .ev-form .btn-dark,
  html.js .ev-signup[data-reveal] .form-privacy,
  html.js .ev-signup[data-reveal] .ev-opt { opacity: 1; translate: 0 0; scale: 1; transition: none; }
  .ev-date { transition: none; }
}

/* Regionale Landingpage: Termin-Zeilen. Ruhiger Zeilen-Hover statt
   Karten-Lift — die Zeile hellt auf, der Pfeil geht einen Schritt
   weiter. Shorthand-Falle: die Gruppen-Reveal-Regel ersetzt die
   transition-Liste, deshalb stehen die Hover-Properties hier mit
   0s-Delay in derselben Liste. */
html.js .termin-list[data-reveal="group"] > * {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease) var(--reveal-delay, 0s),
    background-color 0.35s var(--ease) 0s,
    box-shadow 0.35s var(--ease) 0s;
}
.termin-line { transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.termin-line:hover,
.termin-line:focus-visible {
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 26px rgba(33, 30, 26, 0.06);
}
.termin-go svg { transition: translate 0.35s var(--ease); }
.termin-line:hover .termin-go svg,
.termin-line:focus-visible .termin-go svg { translate: 3px 0; }

@media (prefers-reduced-motion: reduce) {
  .termin-line,
  .termin-go svg { transition: none; }
  .termin-line:hover .termin-go svg,
  .termin-line:focus-visible .termin-go svg { translate: 0 0; }
}

/* Programmatische Seiten: Editorial-Splits — Titel links zuerst,
   Inhalt rechts antwortet; Chips tanzen, Platten-Liste folgt. */
html.js .prog-split[data-reveal] { opacity: 1; transform: none; }
html.js .prog-split[data-reveal] > h2,
html.js .prog-split[data-reveal] .prog-split-body,
html.js .prog-split[data-reveal] .prog-plate {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--ps-dt, 0s), translate 0.55s var(--ease) var(--ps-dt, 0s);
}
html.js .prog-split[data-reveal] .prog-split-body,
html.js .prog-split[data-reveal] .prog-plate { --ps-dt: 0.18s; }
html.js .prog-split[data-reveal] .prog-chip {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity 0.4s var(--ease) calc(0.45s + var(--chip-i, 0) * 0.07s),
    scale 0.4s var(--ease) calc(0.45s + var(--chip-i, 0) * 0.07s),
    translate 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.prog-chips .prog-chip:nth-child(1) { --chip-i: 0; }
.prog-chips .prog-chip:nth-child(2) { --chip-i: 1; }
.prog-chips .prog-chip:nth-child(3) { --chip-i: 2; }
.prog-chips .prog-chip:nth-child(4) { --chip-i: 3; }
.prog-chips .prog-chip:nth-child(5) { --chip-i: 4; }
html.js .prog-split.is-revealed > h2,
html.js .prog-split.is-revealed .prog-split-body,
html.js .prog-split.is-revealed .prog-plate { opacity: 1; translate: 0 0; }
html.js .prog-split.is-revealed .prog-chip { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .prog-split[data-reveal] > h2,
  html.js .prog-split[data-reveal] .prog-split-body,
  html.js .prog-split[data-reveal] .prog-plate,
  html.js .prog-split[data-reveal] .prog-chip { opacity: 1; translate: 0 0; scale: 1; transition: none; }
}

.ua-site { margin: 4px 0 10px; align-self: start; }
/* Chips als direkte Reveal-Gruppen-Kinder (Staedte-Pills):
   volle Transition-Liste, sonst schaltet der Hover hart. */
html.js [data-reveal="group"] > .eng-chip {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease) var(--reveal-delay, 0s),
    translate 0.45s var(--ease),
    filter 0.45s var(--ease);
}

/* Staedte-Pills: Luft zwischen Section-Kopf und Chip-Reihe. */
.sec-head + .eng-chips { margin-top: clamp(22px, 3vw, 34px); }


/* Stadt-Seiten: Kennzahlen-Reihe. */
.city-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 72px);
}
.city-stat b {
  display: block;
  font-family: var(--font-brand);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.city-stat i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--stone);
}

/* Regional-Landing: Vor-Ort-Karte des Ansprechpartners. */
.region-partner {
  display: grid;
  grid-template-rows: none;
  grid-row: auto;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
  max-width: 860px;
}
.region-partner .ua-portrait { width: clamp(110px, 14vw, 150px); height: auto; }
.region-partner h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; }
.region-partner .ua-role { display: block; margin-top: 4px; }
.region-partner .ua-bio { margin-top: 12px; max-width: 56ch; }
.region-partner-chips { margin-top: 16px; }
@media (max-width: 640px) {
  .region-partner { grid-template-columns: 1fr; }
  .region-partner .ua-portrait { width: 110px; }
}

/* Region-Seiten: Kopf-Sequenz beim Laden — Kicker, Headline,
   Intro, CTAs nacheinander; das Glow-Wort zuendet zuletzt. */
html.js .page-head[data-reveal] { opacity: 1; transform: none; }
html.js .page-head[data-reveal] .prog-kicker,
html.js .page-head[data-reveal] h1,
html.js .page-head[data-reveal] .intro,
html.js .page-head[data-reveal] .hero-cta {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease) var(--ph-dt, 0s), translate 0.55s var(--ease) var(--ph-dt, 0s);
}
html.js .page-head[data-reveal] h1 { --ph-dt: 0.08s; }
html.js .page-head[data-reveal] .intro { --ph-dt: 0.24s; }
html.js .page-head[data-reveal] .hero-cta { --ph-dt: 0.38s; }
html.js .page-head[data-reveal] .glow-word::before,
html.js .page-head[data-reveal] .glow-word::after {
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.75s;
}
html.js .page-head.is-revealed .prog-kicker,
html.js .page-head.is-revealed h1,
html.js .page-head.is-revealed .intro,
html.js .page-head.is-revealed .hero-cta { opacity: 1; translate: 0 0; }
html.js .page-head.is-revealed .glow-word::before,
html.js .page-head.is-revealed .glow-word::after { opacity: 1; }

/* Vor-Ort-Karte: Portrait entwickelt sich, die drei Chips folgen
   gestaffelt (Hover-Properties delay-frei in der Liste). */
html.js .region-partner[data-reveal] .ua-portrait {
  scale: 1.05;
  filter: saturate(0.6);
  transition: scale 0.9s var(--ease) 0.25s, filter 0.9s var(--ease) 0.25s;
}
html.js .region-partner[data-reveal] .direct-chip {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.5s var(--ease) calc(0.4s + var(--chip-i, 0) * 0.12s),
    translate 0.5s var(--ease) calc(0.4s + var(--chip-i, 0) * 0.12s),
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.region-partner-chips .direct-chip:nth-child(1) { --chip-i: 0; }
.region-partner-chips .direct-chip:nth-child(2) { --chip-i: 1; }
.region-partner-chips .direct-chip:nth-child(3) { --chip-i: 2; }
html.js .region-partner.is-revealed .ua-portrait { scale: 1; filter: saturate(1); }
html.js .region-partner.is-revealed .direct-chip { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html.js .page-head[data-reveal] .prog-kicker,
  html.js .page-head[data-reveal] h1,
  html.js .page-head[data-reveal] .intro,
  html.js .page-head[data-reveal] .hero-cta,
  html.js .region-partner[data-reveal] .direct-chip { opacity: 1; translate: 0 0; transition: none; }
  html.js .page-head[data-reveal] .glow-word::before,
  html.js .page-head[data-reveal] .glow-word::after { opacity: 1; transition: none; }
  html.js .region-partner[data-reveal] .ua-portrait { scale: 1; filter: none; transition: none; }
}

/* Ergebnis-Triade: nach dem Spalten-Reveal zieht das Icon nach —
   es waechst kurz auf und die Kachel toent sich erst dann ein. */
html.js .triad[data-reveal] .t-icon {
  scale: 0.6;
  background-color: var(--paper-deep);
  transition: scale 0.5s var(--ease), background-color 0.5s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.3s);
}
html.js .triad[data-reveal].is-revealed .t-icon {
  scale: 1;
  background-color: var(--t-icon-tone);
}
.triad-item:nth-child(1) { --t-icon-tone: var(--mint); }
.triad-item:nth-child(2) { --t-icon-tone: var(--peach); }
.triad-item:nth-child(3) { --t-icon-tone: var(--sky); }
@media (prefers-reduced-motion: reduce) {
  html.js .triad[data-reveal] .t-icon { scale: 1; background-color: var(--t-icon-tone); transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal="group"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Hero-Choreografie ──────────────────────────────────
   Woerter treten gestaffelt ein, das Glow-Wort zuendet zuletzt,
   die Leiter-Badges landen nacheinander auf dem Pfad. */
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  to { opacity: 1; }
}
@keyframes badge-land {
  to { opacity: 1; scale: 1; }
}
html.js .hero h1 .hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: hero-in 0.6s var(--ease) forwards;
  animation-delay: calc(0.05s + var(--w, 0) * 0.07s);
}
html.js .hero .glow-word::before,
html.js .hero .glow-word::after {
  opacity: 0;
  animation: hero-fade 0.9s var(--ease) 0.95s forwards;
}
html.js .hero-sub,
html.js .hero-cta {
  opacity: 0;
  transform: translateY(12px);
  animation: hero-in 0.6s var(--ease) forwards;
}
html.js .hero-sub { animation-delay: 0.4s; }
html.js .hero-cta { animation-delay: 0.55s; }
html.js .range-strip .path {
  opacity: 0;
  animation: hero-fade 0.8s var(--ease) 0.6s forwards;
}
html.js .range-badge {
  opacity: 0;
  scale: 0.94;
  animation: badge-land 0.5s cubic-bezier(0.34, 1.3, 0.45, 1) forwards;
  animation-delay: calc(0.8s + var(--bi, 0) * 0.12s);
}
html.js .range-note {
  opacity: 0;
  animation: hero-fade 0.7s var(--ease) 1.55s forwards;
}
html.js .hero-badge-field .hero-badge-static {
  opacity: 0;
  animation: hero-fade 0.8s var(--ease) forwards;
}
html.js .badge-static-1 { animation-delay: 1.05s; }
html.js .badge-static-2 { animation-delay: 1.25s; }
html.js .badge-static-3 { animation-delay: 1.45s; }
html.js .badge-static-4 { animation-delay: 1.65s; }
html.js .range-list,
html.js .hero-trail-mobile {
  opacity: 0;
  animation: hero-fade 0.7s var(--ease) 0.7s forwards;
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero h1 .hw,
  html.js .hero .glow-word::before,
  html.js .hero .glow-word::after,
  html.js .hero-sub,
  html.js .hero-cta,
  html.js .range-strip .path,
  html.js .range-badge,
  html.js .range-note,
  html.js .hero-badge-field .hero-badge-static,
  html.js .range-list,
  html.js .hero-trail-mobile {
    opacity: 1;
    transform: none;
    scale: 1;
    animation: none;
  }
}

/* ── Brand-Hover: Aurora-Flare + Puls + Sparkle-Dreh ────
   Der Puls laeuft dauerhaft auf einem unsichtbaren Glow-Layer;
   Hover blendet nur die Opacity — Ein- und Ausstieg bleiben weich. */
.brand { position: relative; isolation: isolate; }
.brand::after {
  content: "";
  position: absolute;
  inset: -2px -10px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(46% 72% at 30% 52%, rgba(116, 194, 222, 0.42), transparent 70%),
    radial-gradient(40% 66% at 74% 48%, rgba(214, 120, 189, 0.34), transparent 70%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  animation: brand-drift 4.5s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}
/* Minimal, aber lebendig: das Licht wandert langsam hin und her
   und verschiebt dabei leicht den Farbton. */
@keyframes brand-drift {
  0%, 100% { translate: -5% 0; scale: 1; filter: blur(8px) hue-rotate(0deg); }
  50% { translate: 5% 0; scale: 1.05; filter: blur(8px) hue-rotate(28deg); }
}
.brand:hover::after,
.brand:focus-visible::after { opacity: 0.65; animation-play-state: running; }
.brand svg {
  transition: transform 0.5s var(--ease);
}
.brand:hover svg,
.brand:focus-visible svg {
  transform: translateY(-0.5px) rotate(90deg) scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .brand::after { animation: none; }
  .brand svg { transition: none; }
}

/* ── Weiche Seitenwechsel (progressive enhancement) ────── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Pills: EIN Verhalten, eine Regel ──────────────────────────────────
   Dieselbe Bewegung stand hier viermal wortgleich: bei .ie-tech-chips,
   .eng-chip, .letter-quick button und .prog-chip. Ueber der vierten
   Kopie stand sogar „gleicher demurer Lift wie alle Pills" — es war also
   bekannt, dass es geteiltes Verhalten ist, und wurde trotzdem erneut
   abgeschrieben.

   Genau daran sind die Pills auf der Veranstaltungsseite (.ev-audience)
   vorbeigelaufen: sie sind eine eigene, fuenfte Umsetzung und haben die
   Kopie nie bekommen. Deshalb steht das Verhalten jetzt an einer Stelle.
   Neue Pills gehoeren in diese Liste, nicht in eine neue Regel.

   .ev-audience span traegt pro Ton ein transform: rotate() fuer die
   leichte Schieflage. Der Lift nutzt die eigenstaendige
   translate-Eigenschaft und ueberschreibt sie darum nicht. */
.ie-tech-chips span,
.eng-chip,
.letter-quick button,
.prog-chip,
.ev-audience span {
  transition: translate 0.45s var(--ease), filter 0.45s var(--ease);
}
.ie-tech-chips span:hover,
.eng-chip:hover,
.letter-quick button:hover,
.prog-chip:hover,
.ev-audience span:hover {
  translate: 0 -3px;
  filter: saturate(1.35) brightness(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .ie-tech-chips span,
  .eng-chip,
  .letter-quick button,
  .prog-chip,
  .ev-audience span { transition: none; }
  .ie-tech-chips span:hover,
  .eng-chip:hover,
  .letter-quick button:hover,
  .prog-chip:hover,
  .ev-audience span:hover { translate: none; }
}