/* 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;
}
/* 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; }
.ie-tech-chips span { transition: translate 0.45s var(--ease), filter 0.45s var(--ease); }
.ie-tech-chips span:hover { translate: 0 -3px; filter: saturate(1.35) brightness(1.02); }

@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; }
.eng-chip { transition: translate 0.45s var(--ease), filter 0.45s var(--ease); }
.eng-chip:hover { translate: 0 -3px; filter: saturate(1.35) brightness(1.02); }

@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: kleiner Einzel-Lift mit Saettigungs-Pop. */
.letter-quick button { transition: 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:hover { translate: 0 -3px; filter: saturate(1.35) brightness(1.02); }

/* 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; }
}

/* 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); }

/* Branchen-Chips (prog-chip): gleicher demurer Lift wie alle Pills. */
.prog-chip { transition: translate 0.45s var(--ease), filter 0.45s var(--ease); }
.prog-chip:hover { translate: 0 -3px; filter: saturate(1.35) brightness(1.02); }

/* 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; }
}