/* ==========================================================================
   HERMYON — Bewegungsschicht (Neugestaltung 30.09.2026)

   Liegt ueber style.css und aendert dessen Bausteine nicht: alles Neue traegt das
   Praefix `ki-` oder `orb`. Die alten Seiten (Scriba, Silvia, Wissen ...) sehen
   damit aus wie vorher, bekommen aber die seitenweiten Teile unten:
   Uebergang zwischen Seiten und den Lesefortschritt am Kopf.

   Was bleibt von den Konstruktionsregeln (Schaden vom 02.08.2026):
   - Text nie ueber der hellen Zone eines Bildes: Kugel und Schrift teilen sich
     Spalten, sie ueberlagern sich nie.
   - Abstaende haengen an der Breite, Zeilenlaengen in min(NNch, 100%).
   - Die Navigation bleibt auf dem Telefon erreichbar.
   Neu geregelt (DESIGN.md, "Bewegung"):
   - Bewegung darf Text ein- und ausblenden und die Kugel veraendern, aber nie einen
     Textblock waehrend des Lesens verschieben.
   - Alles Bewegte hat einen ruhigen Zustand: prefers-reduced-motion schaltet ab.
   ========================================================================== */

/* ---------- Seitenweit: Uebergang und Lesefortschritt ---------- */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Haarlinie am oberen Rand, waechst mit dem Scrollen. Nur Browser mit
   scrollgebundenen Animationen sehen sie; fuer alle anderen fehlt sie einfach. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 60;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: ki-fortschritt linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes ki-fortschritt { to { transform: scaleX(1); } }
}

/* ---------- Die Kugel ---------- */

.orb { position: relative; width: 100%; aspect-ratio: 1; }

.orb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 76%);
  transition: opacity 0.9s var(--ease);
}

.orb__flaeche {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.orb--live .orb__flaeche { opacity: 1; }
.orb--live img { opacity: 0; }

/* ---------- Hero ---------- */

.ki-hero {
  position: relative;
  padding-block: clamp(1.6rem, 4vh, 3.4rem) clamp(2.4rem, 5vh, 4.4rem);
  overflow: hidden;
}

/* Ein Schein hinter der Kugel, der sich dem Zeiger nicht anbiedert: fest, ruhig. */
.ki-hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(90vw, 1100px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, oklch(0.731 0.115 85 / 0.075), transparent 62%);
  pointer-events: none;
}

.ki-hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4.4rem);
  /* Nur der Hero darf sich an der Hoehe orientieren (DESIGN.md, Layout). */
  min-height: min(calc(100svh - 8rem), 820px);
}

.ki-hero__eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.2rem, 2.6vh, 2.2rem);
}
.ki-hero__eyebrow::after {
  content: ''; flex: 1; max-width: 9rem; height: 1px;
  background: linear-gradient(to right, var(--gold-hair), transparent);
}

.ki-h1 {
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: clamp(1.1rem, 2.4vh, 1.8rem);
}
.ki-h1 em { font-style: italic; font-weight: 500; color: var(--gold); }
.ki-zeile { display: block; }

/* Die Zeilen kommen einzeln herein. Es bewegt sich nur das einzelne Wort, waehrend
   es erscheint; der Block selbst steht vom ersten Bild an fest. */
.ki-wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  animation: ki-wort 1s var(--ease) calc(var(--i, 0) * 95ms + 160ms) forwards;
}
@keyframes ki-wort { to { opacity: 1; transform: none; } }

.ki-hero__text {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: min(30ch, 100%);
  margin-bottom: clamp(1.6rem, 3.4vh, 2.6rem);
  opacity: 0;
  animation: ki-ein 1s var(--ease) 0.75s forwards;
}
.ki-hero__copy .hero__do,
.ki-hero__copy .proof { opacity: 0; animation: ki-ein 1s var(--ease) 0.95s forwards; }
@keyframes ki-ein { to { opacity: 1; } }

.ki-hero__orb {
  position: relative;
  justify-self: center;
  width: min(100%, 600px);
  margin: 0;
  display: grid;
  gap: clamp(1rem, 2.4vh, 1.6rem);
}
.orb--hero { width: min(100%, 54svh); margin-inline: auto; animation: ki-orb-ein 1.8s var(--ease) 0.15s both; }
@keyframes ki-orb-ein { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: none; } }

.ki-hero__orb figcaption {
  font-size: var(--t-xs);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-align: center;
}

/* Das Beispielgespraech. Feste Hoehe: Tippen darf nichts darunter verschieben. */
.ki-dialog {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  /* Gemessen am 30.09.2026 mit den laengsten Texten: bei 1000 px Breite wuchs die Box
     mit 12,6rem um 6 px. 13.6rem haelt von 900 bis 1440 px. */
  min-height: 13.6rem;
}
.ki-dialog__kopf {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  max-width: none;
}
.ki-dialog__wer { color: var(--gold); }
.ki-dialog__punkt {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none;
  /* Vier Atemzuege, dann Ruhe: Es soll nicht dauernd neben dem Text pulsieren. */
  animation: ki-atem 2.6s ease-in-out 4;
}
@keyframes ki-atem { 50% { opacity: 0.3; transform: scale(0.7); } }

.ki-dialog__zeile {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  margin-top: 0.9rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: none;
}
.ki-dialog__rolle {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 0.3em;
}
.ki-dialog__frage { color: var(--ink-2); }
.ki-dialog__antwort { color: var(--ink); }
.ki-dialog .tippt::after {
  content: ''; display: inline-block;
  width: 0.5ch; height: 1.05em; margin-left: 2px;
  background: var(--gold); vertical-align: -0.16em;
  animation: ki-blink 0.9s steps(1) infinite;
}
@keyframes ki-blink { 50% { opacity: 0; } }

/* ---------- Haltung: der grosse Satz, die Woerter gehen nach und nach an ---------- */

.ki-haltung { background: var(--bg-lift); padding-block: calc(var(--sec-y) * 1.15); }

.ki-haltung__satz {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.3rem + 6.4vw, 7.8rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: min(13ch, 100%);
  margin-bottom: clamp(2.2rem, 5vw, 4.6rem);
  text-wrap: balance;
}
.ki-haltung__satz span { font-style: italic; font-weight: 500; color: var(--gold); }

.ki-haltung__text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 4vw, 4rem);
  font-size: var(--t-lg);
  line-height: 1.6;
}
.ki-haltung__text p { color: var(--ink-2); max-width: min(40ch, 100%); }
.ki-haltung__text .w { color: var(--ink-3); transition: color 0.7s var(--ease); }
.ki-haltung__text .w.an { color: var(--ink); }

/* ---------- Ablauf: die klebende Buehne ---------- */

.ki-ablauf { padding-bottom: 0; }

.ki-szene__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
}
.ki-szene__kugel { justify-self: center; width: min(100%, 560px); }
.ki-szene__stand { display: none; }

.ki-schritt { padding-block: clamp(1.4rem, 3vw, 2.2rem); border-top: 1px solid var(--line-soft); }
.ki-schritt:last-child { border-bottom: 1px solid var(--line-soft); }
.ki-schritt__nr {
  display: block;
  font-family: var(--serif); font-size: var(--t-md); color: var(--gold);
  font-variant-numeric: tabular-nums; margin-bottom: 0.6rem;
}
.ki-schritt h3 { font-size: var(--t-2xl); line-height: 1.04; margin-bottom: 1rem; }
.ki-schritt p { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.55; max-width: min(34ch, 100%); }

.ki-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.4rem 0 0; list-style: none; }
.ki-chips li {
  border: 1px solid var(--line);
  padding: 0.3em 0.95em;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Mit Skript: Die Buehne klebt, waehrend drei Bildschirmhoehen durchlaufen. */
.ki-szene--live { height: calc(100svh * 3.1); }
.ki-szene--live .ki-szene__buehne {
  position: sticky;
  top: 4.6rem;
  height: calc(100svh - 4.6rem);
  display: flex; align-items: center;
}
.ki-szene--live .ki-szene__in { width: 100%; }
.ki-szene--live .ki-szene__kugel { width: min(100%, 600px, 72svh); }
.ki-szene--live .ki-szene__texte { align-self: center; }
.ki-szene--live .ki-szene__schritte { display: grid; grid-template-areas: 's'; }
.ki-szene--live .ki-schritt {
  grid-area: s; border: 0; padding-block: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.ki-szene--live .ki-schritt.ist { opacity: 1; pointer-events: auto; }

.ki-szene--live .ki-szene__stand {
  display: flex; gap: 0.7rem; padding: 0; margin: 0 0 clamp(1.4rem, 3vw, 2.4rem); list-style: none;
}
.ki-szene__stand li {
  width: 2.6rem; height: 2px; background: var(--line);
  transition: background-color 0.5s var(--ease);
}
.ki-szene__stand li.ist { background: var(--gold); }

.ki-szene--live .ki-chips li { transition: border-color .6s var(--ease), color .6s var(--ease); }
.ki-szene--live .ki-schritt.ist .ki-chips li { border-color: var(--gold-hair); color: var(--ink); }

/* ---------- Cautela: Emblem und Kette ---------- */

.ki-emblem { position: relative; display: block; aspect-ratio: 1; }
.ki-emblem img,
.ki-emblem video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 80%);
}
.ki-emblem video { opacity: 0; transition: opacity 0.7s var(--ease); }
.ki-emblem.spielt video { opacity: 1; }
.ki-emblem--gross { width: min(100%, 380px); margin: 0 auto clamp(0.6rem, 2vw, 1.6rem); }
.ki-emblem--klein { width: clamp(104px, 12vw, 168px); }

/* Die Kette als Zeitachse ueber die volle Breite: sechs Stationen, eine Linie, die sich
   beim Erscheinen von Station zu Station in Gold zieht. */
.ki-kette-zeile { padding-top: clamp(2.6rem, 5vw, 4.4rem); }
.ki-kette {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0; margin: 0; list-style: none;
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
}
.ki-kette li {
  position: relative;
  padding: 1.3rem 0.6rem 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.ki-kette li::before {
  content: ''; position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink-3);
}
.ki-kette li::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
}
.is-in .ki-kette li::after { animation: ki-linie 0.55s var(--ease) both; animation-delay: calc(var(--n, 0) * 260ms + 250ms); }
.is-in .ki-kette li::before { animation: ki-punkt 0.4s var(--ease) both; animation-delay: calc(var(--n, 0) * 260ms + 250ms); }
.ki-kette li:nth-child(1) { --n: 0; } .ki-kette li:nth-child(2) { --n: 1; }
.ki-kette li:nth-child(3) { --n: 2; } .ki-kette li:nth-child(4) { --n: 3; }
.ki-kette li:nth-child(5) { --n: 4; } .ki-kette li:nth-child(6) { --n: 5; }
@keyframes ki-linie { to { transform: scaleX(1); } }
@keyframes ki-punkt { to { background: var(--gold); box-shadow: none; } }
.ki-kette li:last-child { color: var(--gold); }
.ki-kette li:last-child::after { right: auto; width: 1.4rem; }
@media (max-width: 760px) {
  .ki-kette { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.8rem; }
  .ki-kette li { overflow-wrap: anywhere; }
}
/* Englisch: "Classification" ist breiter als eine Drittelspalte auf 320 px (gemessen,
   die Seite lief um 5 px ueber). Auf ganz schmalen Geraeten zwei Spalten. */
@media (max-width: 420px) {
  .ki-kette { grid-template-columns: repeat(2, minmax(0, 1fr)); letter-spacing: 0.1em; }
}

/* ---------- Agenten-Register mit Emblemen ---------- */

.ki-register .eintrag {
  grid-template-columns: 3.2rem clamp(104px, 12vw, 168px) minmax(0, 1.05fr) minmax(0, 1fr) auto;
  padding-block: clamp(0.9rem, 2vw, 1.4rem);
}
.ki-register .ki-emblem { transition: transform 0.6s var(--ease); }
.ki-register .eintrag:hover .ki-emblem,
.ki-register .eintrag:focus-visible .ki-emblem { transform: scale(1.08); }

@media (max-width: 860px) {
  .ki-register .eintrag { grid-template-columns: 104px minmax(0, 1fr); gap: 0.5rem 1rem; align-items: center; }
  .ki-register .eintrag__nr { display: none; }
  .ki-register .ki-emblem { grid-row: 1 / span 2; }
  .ki-register .eintrag__claim, .ki-register .eintrag .stand { grid-column: 1 / -1; }
}

/* ---------- Produktseiten: Emblem ueber den Eckdaten ---------- */

.ki-pkopf-rechts { display: grid; gap: clamp(0.8rem, 2vw, 1.6rem); align-content: start; }
.ki-pkopf-rechts .ki-emblem--gross { width: min(100%, 420px); margin: 0; }
@media (max-width: 900px) { .ki-pkopf-rechts .ki-emblem--gross { width: min(70%, 260px); } }

/* ---------- Scriba: der Film ---------- */

.ki-film { padding-top: 0; }
.ki-film__rahmen { margin: 0; }
.ki-film__rahmen video {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: oklch(0.12 0.004 85);
  border: 1px solid var(--line);
}
.ki-film__rahmen figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-xs); line-height: 1.7; letter-spacing: 0.04em;
  color: var(--ink-3); max-width: min(72ch, 100%);
}

/* ---------- Stimme: die Probe ---------- */

.ki-stimme__buehne { display: grid; gap: clamp(1rem, 2.4vw, 2rem); justify-items: center; }
.orb--stimme { width: min(100%, 520px); }
.ki-welle { width: 100%; height: clamp(64px, 9vw, 96px); }
.ki-welle i { transform-origin: 50% 50%; animation: ki-welle 2.8s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -130ms); }
@keyframes ki-welle { 50% { transform: scaleY(0.38); } }
.ki-welle.live i { animation: none; opacity: 0.8; }

.ki-probe { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ki-probe__hinweis { margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-3); max-width: min(46ch, 100%); }
.ki-probe__knopf.an { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- Abschluss ---------- */

.ki-schluss { position: relative; overflow: hidden; }
.ki-schluss::before {
  content: ''; position: absolute; inset: auto -10% -40% auto;
  width: min(80vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, oklch(0.731 0.115 85 / 0.10), transparent 66%);
  pointer-events: none;
}
.ki-schluss .wrap { position: relative; }

/* ---------- Schmale Schirme ---------- */

@media (max-width: 900px) {
  .ki-hero__in { grid-template-columns: 1fr; min-height: 0; }
  /* Auf dem Telefon zeigt sich die Kugel zuerst, klein; das Gespraech folgt dem Text. */
  .ki-hero__orb { display: contents; }
  .ki-hero__in { gap: 1.2rem; }
  .orb--hero { order: -1; width: min(64vw, 34svh, 300px); }
  .ki-hero__copy { order: 0; }
  .ki-dialog { order: 1; }
  .ki-hero__orb figcaption { order: 2; }
  .ki-dialog { min-height: 14.2rem; }
  .ki-haltung__text { grid-template-columns: 1fr; }

  .ki-szene__in { grid-template-columns: 1fr; gap: 1.2rem; }
  .ki-szene--live { height: calc(100svh * 3.4); }
  .ki-szene--live .ki-szene__buehne { align-items: flex-start; padding-top: 0.6rem; }
  .ki-szene--live .ki-szene__in { align-content: start; }
  .ki-szene--live .ki-szene__kugel { width: min(100%, 40svh, 360px); }
  .ki-schritt h3 { font-size: var(--t-xl); }
  .ki-schritt p { font-size: var(--t-md); }
  .ki-szene--live .ki-szene__stand { margin-bottom: 1rem; }
}

/* Ganz schmale Telefone (360 px und darunter): die Kopfzeile des Gespraechs bricht um,
   gemessen 259 px statt 227 px bei den laengsten englischen Texten. */
@media (max-width: 380px) {
  .ki-dialog { min-height: 17rem; }
}

/* ---------- Niedrige Fenster (Telefon im Querformat) ----------
   Kugel und Schritttext passen dort nicht zugleich in die Hoehe der klebenden Buehne
   (gemessen bei 667 x 375: Text endet bei 493 px). Dann steht der Ablauf als Liste. */
@media (max-height: 520px) {
  .ki-szene--live { height: auto; }
  .ki-szene--live .ki-szene__buehne { position: static; height: auto; display: block; }
  .ki-szene--live .ki-szene__texte { align-self: auto; }
  .ki-szene--live .ki-szene__schritte { display: block; }
  .ki-szene--live .ki-schritt {
    opacity: 1; pointer-events: auto;
    border-top: 1px solid var(--line-soft); padding-block: clamp(1.4rem, 3vw, 2.2rem);
  }
  .ki-szene--live .ki-szene__stand { display: none; }
  .ki-szene--live .ki-szene__kugel { width: min(100%, 240px); }
}

/* ---------- Wenig Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .ki-wort, .ki-hero__text, .ki-hero__copy .hero__do, .ki-hero__copy .proof, .orb--hero {
    animation: none; opacity: 1; transform: none;
  }
  .ki-dialog__punkt, .ki-welle i, .ki-dialog .tippt::after { animation: none; }
  .is-in .ki-kette li::after { animation: none; transform: scaleX(1); }
  .is-in .ki-kette li::before { animation: none; background: var(--gold); box-shadow: none; }
  .ki-register .eintrag:hover .ki-emblem,
  .ki-register .eintrag:focus-visible .ki-emblem { transform: none; }
}