/* ═══════════════════════════════════════════════════════════════════
   components.css — Vanilla-Ports moderner React-Library-Patterns
   (React Bits / Kokonut UI / Magic UI). Jedes FEATURE ist ein in sich
   geschlossener Block: Block löschen (+ zugehöriger Block in
   js/components.js) = Feature restlos entfernt.
   ═══════════════════════════════════════════════════════════════════ */

/* FEATURE 1: SPOTLIGHT-HOVER (Kokonut/Magic-UI-Stil) — System-Karten.
   JS setzt --mx/--my per mousemove; der Glow liegt auf ::after.
   Nur für echte Zeiger-Geräte, aus bei reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-spotlight] { position: relative; }
  [data-spotlight]::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0;
    transition: opacity .35s var(--ease);
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
      rgba(201, 162, 74, .10), transparent 65%);
  }
  [data-spotlight]:hover::after { opacity: 1; }
  [data-spotlight]:hover { border-color: rgba(201, 162, 74, .45); }
}

/* FEATURE 2: TILT-HOVER (React-Bits-Stil) — Portal-Karten + Beweis-Blöcke.
   JS setzt den perspective/rotate-Transform inline; die kurze
   transform-Transition hier macht die Neigung träge und das
   Zurückgleiten beim Verlassen weich. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-tilt] {
    transition: transform .2s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease);
    will-change: transform;
  }
}

/* FEATURE 3: AUFKLAPP-KARTEN (Kokonut-Stil) — FAQ als Karten.
   Optik: details-Elemente werden Karten mit Gold-Schimmer beim Hover.
   Die Höhen-Animation macht js/components.js (WAAPI auf dem details-
   Element — kein Struktur-Umbau nötig); die native Chromium-Transition
   aus sections.css wird hier deaktiviert, damit nichts doppelt animiert. */
#faq .faq { border-top: none; display: flex; flex-direction: column; gap: .8rem; }
#faq .faq__i {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  border-bottom: 1px solid var(--line); /* sections.css-Reset bleibt konsistent */
  padding: 0 1.6rem; box-shadow: var(--shadow-card);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease);
}
#faq .faq__i:hover { border-color: var(--gold-line); box-shadow: var(--shadow-card), 0 0 40px rgba(201, 162, 74, .07); }
#faq .faq__i summary { padding: 1.3rem 0; }
#faq .faq__i p { padding-bottom: 1.4rem; }
#faq .faq__i::details-content { transition: none; opacity: 1; block-size: auto; }

/* FEATURE 4: SPOTLIGHT-CARDS V2 (Kokonut SpotlightCards, Gold-Port) —
   System-Karten: Akzent-Tönung, Shimmer-Sweep, Akzent-Grundlinie,
   Fokus dimmt Geschwister. Entfernen: diesen Block löschen. */
@media (hover: hover) and (pointer: fine) {
  .sys__card { position: relative; overflow: hidden;
    transition: transform .25s var(--easeOut), opacity .3s var(--ease), border-color .3s var(--ease); }
  /* Statische Akzent-Tönung oben links */
  .sys__card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at 18% 14%, color-mix(in srgb, var(--card-accent, #C9A24A) 9%, transparent), transparent 62%);
  }
  /* Shimmer-Sweep beim Hover */
  .sys__card .sys__media::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 55%;
    transform: translateX(-130%) skewX(-12deg);
    background: linear-gradient(90deg, transparent, rgba(244,239,232,.06), transparent);
    transition: transform .7s var(--easeOut); pointer-events: none;
  }
  .sys__card:hover .sys__media::after { transform: translateX(300%) skewX(-12deg); }
  .sys__media { position: relative; }
  /* Akzent-Grundlinie wächst beim Hover */
  .sys__card::after { z-index: 2; }
  .sys__card .sys__no { color: var(--card-accent, var(--gold)); position: relative; z-index: 1; }
  .sys__card > *:not(.sys__media) { position: relative; z-index: 1; }
  .sys__underline { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 3;
    background: linear-gradient(90deg, var(--card-accent, #C9A24A) , transparent);
    transition: width .5s var(--easeOut); border-radius: 999px; }
  .sys__card:hover .sys__underline { width: 100%; }
  /* Fokus dimmt Geschwister (reines CSS via :has) */
  .sys:has(.sys__card:hover) .sys__card:not(:hover) { opacity: .45; transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .sys__card, .sys__card .sys__media::after, .sys__underline { transition: none; animation: none; }
}

/* FEATURE 5: GROSSE MOMENTE (ScrollText-Idee) — Problem-Sektion:
   drei große Text-Momente, der aktive leuchtet, die anderen dimmen.
   Entfernen: diesen Block + FEATURE-5-Block in components.js. */
.moments { display: flex; flex-direction: column; gap: clamp(3rem, 8vh, 5.5rem); padding: 2rem 0 1rem; max-width: 56rem; }
.moment { opacity: .28; transform: translateY(10px); filter: saturate(.6);
  transition: opacity .6s var(--ease), transform .6s var(--easeOut), filter .6s var(--ease); }
.moment.is-live { opacity: 1; transform: none; filter: none; }
.moment__time { font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--gold); letter-spacing: .18em; margin-bottom: .6rem; }
.moment__p { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.18; color: var(--ink); max-width: 52rem; }
.moment__p .em { font-size: .82em; }
.moment__inst { color: var(--ink-4); margin-top: .8rem; font-size: .62rem; letter-spacing: .16em; }
@media (prefers-reduced-motion: reduce) { .moment { opacity: 1; transform: none; filter: none; transition: none; } }

/* FEATURE 6: GALAXIE — Final-CTA-Hintergrund: goldene Partikel-Spirale in
   flacher Kippung, rotiert langsam, die Maus neigt die Ebene minimal.
   Entfernen: diesen Block + FEATURE-6-Block in components.js + das canvas. */
.final { position: relative; overflow: hidden; }
/* Partikel-Wortmarke (js/wordmark.js): ein Band unter der CTA, im Fluss, feste Hoehe
   gegen Layout-Sprung. Reduced Motion bleibt an: das Wort steht dann still. */
.final__word { display: block; width: min(100%, 64rem); height: clamp(160px, 22vw, 320px); margin: clamp(2.5rem, 6vh, 4.5rem) auto 0; touch-action: pan-y; }
.final__inner { position: relative; z-index: 1; }

/* FEATURE 7: HORIZONTALE STATIONEN — "Der Weg" scrollt
   horizontal durch große Karten, dann vertikal weiter.
   Entfernen: Block hier + FEATURE-7-Block in components.js + Sektion #weg zurückbauen. */
.wayh { position: relative; height: 340vh; background: var(--raised); }
.wayh__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.wayh__track { display: flex; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; flex: 1;
  padding: 2rem var(--pad) 3rem; will-change: transform; }
.wayh__card { flex: 0 0 auto; width: min(44rem, 74vw); min-height: 24rem;
  background: #141210; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(2rem, 4vw, 3.4rem); position: relative; overflow: hidden;
  box-shadow: var(--shadow-deep); display: flex; flex-direction: column; justify-content: center; }
.wayh__card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--wa) 10%, transparent), transparent 60%); }
.wayh__no { color: var(--wa); letter-spacing: .2em; margin-bottom: 1rem; }
.wayh__t { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--ink); }
.wayh__p { color: var(--ink-2); margin-top: 1.1rem; max-width: 34rem; font-size: 1.05rem; }
.wayh__tag { color: var(--ink-4); margin-top: 1.6rem; font-size: .62rem; letter-spacing: .18em; }
.wayh__line { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--wa), transparent 70%); opacity: .8; }
.wayh__card--cta { align-items: flex-start; background: #17130d; border-color: var(--gold-line); }
@media (max-width: 880px) {
  .wayh { height: auto; background: var(--raised); }
  .wayh__pin { position: static; height: auto; }
  .wayh__track { flex-direction: column; align-items: stretch; transform: none !important; }
  .wayh__card { width: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wayh { height: auto; } .wayh__pin { position: static; height: auto; }
  .wayh__track { flex-wrap: wrap; transform: none !important; }
}

/* FEATURE 4b: Karten default dunkler, Akzent erst beim Hover voll */
.sys__card { background: #131110; }
.sys__card::before { opacity: .5; transition: opacity .4s var(--ease); }
.sys__card:hover::before { opacity: 1; }

/* FEATURE 8: FAQ mittig */
#faq .sec__head, #faq .faq { max-width: 46rem; margin-inline: auto; }
#faq .sec__head { text-align: center; }
#faq .sec__head .sec__sub { margin-inline: auto; }

/* FEATURE 9: Momente-Parallax — Bühnenbild wandert sanft mit */
.sec--stage .stagebg img { will-change: transform; transform: translateY(var(--par, 0px)) scale(1.06); }

/* FEATURE 10: PARTNER-SEKTION — nur Logos, kein Erklaertext (08-12).
   Logos laufen einheitlich in Silber und nehmen am Cursor ihre Farbe an. */
.partner { text-align: center; position: relative; }
.partner__marks { display: flex; align-items: center; justify-content: center;
  gap: clamp(2.4rem, 7vw, 5.5rem); margin-top: 1.4rem; flex-wrap: wrap; }
.partner__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.partner__logo { height: clamp(2.4rem, 4.4vw, 3.6rem); width: auto;
  filter: grayscale(1) opacity(.72); transition: filter .4s var(--ease, ease); }
.partner__item:hover .partner__logo { filter: none; }
.partner__cap { color: var(--ink-4); font-size: .58rem; letter-spacing: .18em; }

/* FEATURE 11: Beweis-Karten versetzt (Rhythmus statt gleicher Reihe) */
@media (min-width: 900px) {
  .proof { align-items: start; }
  .proof__b:nth-child(2) { margin-top: 3.2rem; }
  .proof__b:nth-child(3) { margin-top: 6.4rem; }
}

/* FEATURE 7b: Stationen größer + Riesen-Zahl + Verbindungs-Punkte wandern */
.wayh { height: 380vh; }
.wayh__card { width: min(52rem, 80vw); min-height: 28rem; }
.wayh__track { gap: 0; }
.wayh__big { position: absolute; right: -1rem; bottom: -3.4rem; z-index: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(11rem, 20vw, 17rem);
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--wa) 34%, transparent);
  pointer-events: none; user-select: none; }
.wayh__card > *:not(.wayh__big):not(.wayh__line) { position: relative; z-index: 1; }
.wayh__link { flex: 0 0 auto; width: clamp(4rem, 7vw, 7rem); display: flex;
  align-items: center; justify-content: center; gap: .9rem; position: relative; }
.wayh__link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--gold-line); }
.wayh__link b { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep);
  position: relative; animation: waylink 1.8s var(--ease) infinite; }
.wayh__link b:nth-child(2) { animation-delay: .3s; }
.wayh__link b:nth-child(3) { animation-delay: .6s; }
@keyframes waylink {
  0%, 100% { background: var(--gold-deep); box-shadow: none; transform: scale(1); }
  30% { background: var(--gold-bright); box-shadow: 0 0 12px rgba(231,194,109,.8); transform: scale(1.35); }
}
@media (max-width: 880px) { .wayh__link { display: none; } .wayh__track { gap: 1.5rem; } .wayh__big { font-size: 9rem; bottom: -2rem; } }
@media (prefers-reduced-motion: reduce) { .wayh__link b { animation: none; } }

/* FEATURE 12: 50-50-SCROLL (Beweis) — links scrollen die Beweise durch,
   rechts bleibt das Medium sticky und wechselt. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split__steps { display: flex; flex-direction: column; }
.split__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  gap: 1rem; opacity: .3; transition: opacity .5s var(--ease); }
.split__step.is-on { opacity: 1; }
.split__stick { position: sticky; top: calc(50vh - 14rem); }
.split__media { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--gold-line); box-shadow: var(--shadow-deep); }
.split__media img,
.split__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform .8s var(--easeOut); }
.split__media img.is-on,
.split__media video.is-on { opacity: 1; transform: none; }
.split__cap { color: var(--ink-4); font-size: .58rem; letter-spacing: .16em; margin-top: .8rem; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split__stick { position: static; order: -1; }
  .split__step { min-height: 0; padding: 1.4rem 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .split__step { opacity: 1; } }

/* FEATURE 13: BENTO-GRID (Kokonut-UI-Stil) — Portale als 2/3+1/3-Raster.
   Reihe 1: [Websites breit][Eigentum], Reihe 2: [Terminal][Workspace breit].
   Rahmen-/Knoten-Motive werden aus .portal--web/.portal--ws wiederverwendet. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.bento__card {
  position: relative; display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
  min-width: 0; max-width: 100%;
  text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 2.1rem 2rem; box-shadow: var(--shadow-card);
  transition: transform .45s var(--easeOut), border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.bento__card:hover { transform: translateY(-5px); border-color: var(--gold-line);
  box-shadow: var(--shadow-deep), 0 0 70px rgba(201, 162, 74, .09); }
.bento--wide { grid-column: span 2; }
.bento__no { color: var(--gold); }
.bento__p { color: var(--ink-2); flex: 1; }
.bento__hint, .bento__mods { color: var(--ink-4); font-size: .6rem; }
.bento__card .link { align-self: flex-start; }
.bento__media { margin: .4rem 0 .6rem; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.bento__media img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  object-position: top; transition: transform .6s var(--easeOut); }
.bento__card:hover .bento__media img { transform: scale(1.03); }
/* Terminal-Karte: dunkles Mono-Fenster, JS tippt die Zeilen (FEATURE 13 in components.js) */
.bento__term { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .65rem;
  min-height: 9rem; background: #131110; border: 1px solid var(--line); border-radius: 10px;
  padding: 1.2rem 1.3rem; }
.bento__line { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--ink-2); min-height: 1.2em; overflow-wrap: anywhere; }
.bento__line.is-typing::after { content: ''; display: inline-block; width: .55em; height: .95em;
  margin-left: .18em; vertical-align: -.12em; background: var(--gold);
  animation: bentoCaret 1s steps(2, start) infinite; }
@keyframes bentoCaret { 50% { opacity: 0; } }
@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; }
  .bento--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bento__card:hover { transform: none; }
  .bento__line.is-typing::after { display: none; animation: none; }
}

/* ══ DER TAG — die helle Zone ═════════════════════════════════════════════
   Genau eine Sektion der Startseite ist hell. Nicht als Abwechslung, sondern
   weil ein dunkler Korridor ohne Fenster ermuedet.

   Der Wechsel ist der Punkt. Ein Verlaufsband an der Kante war falsch — das
   bleibt eine Kante, nur eine weiche. Hier kippt der ganze Bildschirm auf
   einmal: Grund, Schrift, Linien, Leiste ueber knapp eine Sekunde von Nacht auf
   Papier, und am Ende zurueck. Umgeschaltet wird erst, wenn die Sektion den
   Bildschirm ALLEIN hat (core.js), deshalb ist an ihren Raendern nichts zu
   ueberblenden: dort ist beides schwarz. Es braucht dafuer auch keine leeren
   Eroeffnungs- und Ausklang-Bildschirme mehr — die Sektion faengt oben mit einer
   normalen Ueberschrift an.

   Farbwerte = [data-dawn="1"] aus hubnight.css. Beide Seiten haben denselben Tag. */
.tag { --page: var(--base); --ink-faint: rgba(244, 239, 232, .22);
  position: relative; z-index: 1; background-color: var(--page); color: var(--ink-2);
  padding: clamp(6rem, 14vh, 10rem) 0 0;
}
.tag.is-day {
  --page:      #F2ECDF;
  --ink:       #1D1A14;
  --ink-2:     rgba(29, 26, 20, .74);
  --ink-3:     rgba(29, 26, 20, .54);
  --ink-4:     rgba(29, 26, 20, .4);
  --ink-faint: rgba(29, 26, 20, .2);
  --gold:      #9A621C;
  --gold-bright: #8A5314;
  --gold-line: rgba(154, 98, 28, .34);
  --gold-soft: rgba(154, 98, 28, .1);
  --line:      rgba(29, 26, 20, .14);
  --line-2:    rgba(29, 26, 20, .22);
  --card:      #FAF6EC;
  --shadow-deep: 0 1px 2px rgba(48, 38, 20, .1), 0 34px 80px rgba(48, 38, 20, .22);
}

/* Custom Properties animieren nicht — die Eigenschaften, die sie benutzen, schon.
   Deshalb liegt die Transition auf allem in der Sektion, nicht auf den Tokens.
   `opacity` steht mit in der Liste, weil diese Regel sonst die Ein-/Ausblendung
   der Beweis-Schritte ueberschreiben wuerde. */
.tag, .tag *, .tag *::before, .tag *::after {
  transition:
    background-color .95s var(--ease),
    color .95s var(--ease),
    border-color .95s var(--ease),
    box-shadow .95s var(--ease),
    opacity .5s var(--ease);
}
.split--tag .split__media img,
.split--tag .split__media video {
  transition: opacity .6s var(--ease), transform .8s var(--easeOut);
}
@media (prefers-reduced-motion: reduce) {
  .tag, .tag *, .tag *::before, .tag *::after { transition: none; }
}
.sn { transition: color .95s var(--ease), opacity .35s var(--ease); }
html[data-tag-zone="1"] .sn { color: #1D1A14; }

/* Kopf: eine normale Ueberschrift, kein eigener Bildschirm. */
.tag__head { max-width: var(--maxw); margin: 0 auto clamp(3rem, 8vh, 6rem); padding: 0 var(--pad); }
.tag__head .sec__sub { max-width: 42rem; }

/* ── Links der Text, rechts das Fenster ──────────────────────────────────
   Raster und Masse sind aus terminal-industries.com ausgelesen, nicht geschaetzt:
   12 Spalten, Rand links UND rechts, Text auf 1–5, Spalte 6 bleibt leer, Fenster
   auf 7–12. Die leere Spalte ist der Grund, warum es dort nicht gequetscht
   aussieht — der Abstand ist Teil des Rasters, kein Padding. */
.split--tag {
  --gm: min(3.646vw, 93px);   /* Seitenrand   */
  --gg: min(1.042vw, 27px);   /* Spaltenlücke */
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gg); margin: 0 var(--gm); align-items: start;
}
.split--tag .split__steps { grid-column: 1 / span 5; position: relative; padding: 0; }
.split--tag .split__stick { grid-column: 7 / span 6; }

/* Der Textblock sitzt nicht am linken Rand, sondern eine Spalte weiter innen —
   dadurch hat er auf beiden Seiten Luft und liest sich als eigener Block, nicht
   als angeklebte Spalte. Die Ziffer steht in der Spalte, die dabei frei wird. */
.split--tag .split__step {
  position: relative; min-height: 100vh; gap: 0; opacity: 1;
  justify-content: center;
  padding-left: calc((100% - 4 * var(--gg)) / 5 + var(--gg));
}
.step__no {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-style: normal; font-size: .62rem;
  letter-spacing: .18em; color: var(--ink-faint);
}
/* Ueberschrift und Text sind ein Absatz und deshalb gleich gross — die Zeile
   darueber ist nur fett. Terminal macht es genauso; das ist der Grund, warum
   dort nichts wie eine Bildunterschrift wirkt.
   Groesse ebenfalls uebernommen: min(2.4vw, …) statt clamp gegen rem, damit der
   Satz auf grossen Schirmen wirklich mitwaechst. */
.step__p {
  font-size: max(1.15rem, min(2.4vw, 3.4rem)); line-height: 1.2;
  letter-spacing: -0.015em; max-width: 21ch; color: var(--ink-faint);
}
.step__p strong { font-weight: 600; }
.step__p b { font-weight: inherit; color: var(--ink-faint); }
.step__p b.is-read { color: var(--ink); }
.step__p b.is-edge { color: var(--gold); }
.step__p strong b { font-weight: 600; }

/* Die Fortschrittsleiste. Terminals Fassung ist waagerecht und nur mobil sichtbar;
   senkrecht neben dem Text steht sie da, wo man beim Lesen ohnehin hinsieht.

   Sie KLEBT und ist kurz. Ueber die ganze Spalte gezogen waere sie ein 300vh
   langer Strich quer durch die Seite und der Daumen ein ganzer Bildschirm hoch —
   dann liest sie sich als Trennlinie, nicht als Anzeige. */
.steps__rail {
  /* Absolut, damit sie NICHT im Flex-Fluss der Spalte steht — sonst waere sie
     ein Element ueber dem ersten Beweis und wuerde ihn nach unten schieben.
     Sie steht direkt links vom Textblock, wie eine Leiste zu diesem Text. */
  position: absolute; top: 0; bottom: 0; width: 2px;
  left: calc((100% - 4 * var(--gg)) / 5 + var(--gg) - 1.9rem);
  pointer-events: none;
}
.steps__track {
  position: sticky; top: calc(50vh - 5.5rem); display: block;
  height: 11rem; width: 100%;
  background: var(--line-2); border-radius: 999px;
}
.steps__track b {
  position: absolute; left: 0; right: 0; height: calc(100% / 3);
  background: var(--gold); border-radius: 999px;
  transform: translateY(0);
  transition: transform .45s var(--easeOut);
}

/* Das Fenster steht INNERHALB des Rasters — nicht randlos. Die 35 px oben und
   unten sind Terminals Werte (top: 2.1875rem, height: 100svh - 4.375rem). */
.split--tag .split__stick { top: 35px; height: calc(100svh - 70px); padding: 0; }
.split--tag .split__media {
  position: relative; height: 100%; width: 100%; aspect-ratio: auto; max-height: none;
  border: 0; border-radius: 10px; background-color: #14110C; overflow: hidden;
}
.split--tag .split__media img,
.split--tag .split__media video { object-fit: cover; object-position: 50% 50%; }

/* Abschluss: ein Satz und der eine Weg nach draussen. Auch das ist eine normale
   Zeile in der Sektion, kein eigener Bildschirm — deshalb liegen die Links aus
   den Beweisen jetzt hier gebuendelt. */
.tag__foot {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 11vh, 8rem) var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
}
.tag__close {
  font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.18; color: var(--ink); flex: 1 1 24rem; max-width: 34ch;
}

@media (max-width: 880px) {
  /* Flex statt Grid: als Flex-Element kann das Fenster oben kleben bleiben und
     an den Texten vorbeiwandern — im einspaltigen Grid waere jede Zeile ihr
     eigener Bereich, das Bild waere nach dem ersten Beweis weggescrollt und man
     saehe die anderen zwei nie. */
  /* `align-items: start` von oben zuruecknehmen: in der Spaltenrichtung ist das
     die Querachse, das Fenster schrumpft damit auf Breite 0 (seine Bilder liegen
     absolut, es hat also keine eigene Breite). */
  .split--tag { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
  .split--tag .split__stick {
    order: -1; position: sticky; top: 0; height: 34svh; z-index: 2;
    margin-bottom: 1.5rem; padding: 0;
  }
  .split--tag .split__media { aspect-ratio: auto; height: 100%; border-radius: 0; }
  .split--tag .split__steps { padding: 0 var(--pad); }
  /* Der Text sitzt am UNTEREN Ende seines Blocks, also unterhalb des klebenden
     Fensters. Mittig zentriert lag die Ueberschrift dahinter und war nie zu
     lesen — man sah immer nur den halben Absatz. */
  .split--tag .split__step {
    min-height: 60svh; justify-content: flex-end; padding: 0 0 2.5rem;
  }
  .step__no { position: static; transform: none; display: block; margin-bottom: .6rem; }
  .step__p { max-width: none; font-size: 1.2rem; }
  /* Kein fester Lesepunkt auf dem Handy — die Leiste haette dort keinen Bezug
     und liefe quer durch den Satz. */
  .steps__rail { display: none; }
  .tag__foot { flex-direction: column; align-items: flex-start; }
}

/* FEATURE 5b/12b: Momente im 50-50-Split + strafferer Split-Einstieg */
.split--tight .split__step { min-height: 46vh; }
/* Nur die Problem-Sektion startet oben bündig — im Beweis-Split würde der
   verkürzte erste Schritt das Trigger-Band verfehlen (Bild bliebe schwarz). */
.split--tight .split__step:first-child { min-height: 34vh; justify-content: flex-start; padding-top: 1rem; }
/* Auslauf, damit der LETZTE Beweis noch mittig steht, bevor sticky endet. */
#beweis .split__steps { padding-bottom: 20vh; }
.split--tight .moment__p { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.split--tight .split__media { aspect-ratio: 16 / 10; }

/* FEATURE 7c: Mini-Leiter + Trennlinie in den Stations-Karten */
.wayh__meter { display: flex; gap: .45rem; margin-bottom: 1.1rem; }
.wayh__meter b { width: 2rem; height: 3px; border-radius: 999px; background: var(--line-2); }
.wayh__meter b.on { background: var(--wa); box-shadow: 0 0 8px color-mix(in srgb, var(--wa) 60%, transparent); }
.wayh__sep { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0 0; width: 4.5rem; }

/* FEATURE 7d: Stations-Schiene — gerade Achse, vier Haltepunkte, Fortschritts-
   Füllung. (Vorher eine freie Wellenlinie; die las sich als Darstellungsfehler.) */
.wayh__rail { position: absolute; left: var(--pad); right: var(--pad); bottom: 3.4rem;
  height: 2px; background: var(--line-2); pointer-events: none; z-index: 1; }
.wayh__rail-fill { position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 12px rgba(201, 162, 74, .5); }
.wayh__stop { position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 999px; background: var(--raised);
  border: 1.5px solid var(--line-2); transition: border-color .35s var(--ease),
    background .35s var(--ease), box-shadow .35s var(--ease); }
.wayh__stop b { position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: .58rem;
  letter-spacing: .18em; color: var(--ink-4); font-weight: 400; transition: color .35s var(--ease); }
.wayh__stop.is-on { background: var(--gold); border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(231, 194, 109, .7); }
.wayh__stop.is-on b { color: var(--gold-bright); }
@media (max-width: 760px) { .wayh__rail { display: none; } }


/* ══════════ DER WEG — zwei Fassungen zur Abnahme ══════════
   Das Problem der verworfenen Fassung: ein Bild wanderte hinter Karten in
   dieselbe Richtung. Zwei Raster, zwei Tempi, ein Flimmern. Beide Fassungen hier
   loesen das, indem es nur noch EINE bewegte Ebene gibt. */

.wayh__head { position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: clamp(4rem, 9vh, 6rem) var(--pad) 0; max-width: var(--maxw); margin-inline: auto;
  pointer-events: none; }

/* ── 1 · DIE RÄUME ────────────────────────────────────────────────────────
   Vier volle Bildschirme, je zur Haelfte Wort und zur Haelfte Bild. Nichts
   liegt hinter etwas anderem: der Streifen wandert, sonst nichts. */
/* ── DIE WERKBANK ─────────────────────────────────────────────────────
   Ein Bild, vier Stellen darauf, ein Streifen. Bild und Text wandern zusammen,
   weil sie im selben Element sitzen — deshalb kann nichts gegeneinander laufen. */
.wayh--bank { height: 560vh; }
/* Kein Rand um die Bank. Die geerbte Polsterung liess links einen schwarzen
   Streifen stehen, solange der Streifen noch nicht gewandert war — das sah aus
   wie ein angeschnittenes Bild, nicht wie eine Werkbank, die aus dem Bild laeuft. */
/* `min-height: 0` ist hier kein Feinschliff, sondern der Grund, warum die Tafeln
   ueberhaupt sitzen: ein Flex-Element weigert sich per Voreinstellung, kleiner
   als sein Inhalt zu werden. Das Bild ist hoeher als das Fenster, also wuchs die
   Spur mit — auf einem 700 px hohen Fenster auf 893 px. `bottom` der Tafel misst
   gegen diese Spur, nicht gegen den Bildschirm, und lag damit 155 px darunter. */
.wayh--bank .wayh__track { gap: 0; align-items: stretch; position: relative;
  padding: 0; min-height: 0; }
/* Der Streifen muss so breit sein wie das Bild, nicht wie die Buehne. Sonst
   rechnet `left: 33%` gegen 1440 px statt gegen 4752 — und alle vier Tafeln
   landen im ersten Bildschirm, waehrend der Rest der Bank leer bleibt. */
.bank__strip { position: relative; width: max-content; }
.bank__img { display: block; height: 132%; width: auto; max-width: none;
  position: relative; top: 50%; transform: translateY(-50%); }
/* Jede Station bekommt ihre eigene dunkle Tafel. Ohne die liegt der Satz mal auf
   Holz, mal im Lampenlicht — und ist einmal von dreimal lesbar. Die Tafel liegt
   im selben Streifen wie das Bild und wandert deshalb exakt mit. */
/* Die Tafeln stehen 25 % der Bildbreite auseinander — das ist weniger als ein
   Fenster breit ist, also waeren immer zwei gleichzeitig zu sehen, eine davon
   angeschnitten. Deshalb ist nur die mittigste sichtbar (`is-on` setzt
   components.js); die anderen warten unsichtbar an ihrer Stelle auf der Bank. */
.bank__stop {
  position: absolute; left: var(--at); transform: translateX(calc(-50% + var(--shift, 0px)));
  bottom: clamp(4rem, 12%, 8rem); width: min(41rem, 40vw);
  padding: clamp(2.1rem, 2.5vw, 3.1rem);
  background: rgba(11, 10, 9, .84); backdrop-filter: blur(9px);
  border: 1px solid rgba(244, 239, 232, .11); border-radius: 18px;
  opacity: 0; transition: opacity .55s var(--ease);
}
/* Auf flachen Fenstern (Laptop mit Dock und Leiste) reichte die Tafel oben aus
   dem Bild. Sie rueckt naeher an den unteren Rand und wird enger gesetzt, statt
   abgeschnitten zu werden. */
@media (max-height: 820px) {
  .bank__stop { bottom: 2.4rem; padding: 1.7rem 1.9rem; width: min(36rem, 42vw); }
  .bank__t { font-size: clamp(1.45rem, 2.1vw, 2rem); }
  .bank__p { font-size: clamp(.94rem, .95vw, 1.05rem); margin-top: .7rem; }
  .bank__tag { margin-top: 1rem; }
}
.bank__stop.is-on { opacity: 1; }
.bank__no { color: var(--gold); letter-spacing: .2em; margin-bottom: 1rem;
  font-size: clamp(.66rem, .7vw, .82rem); }
.bank__t { font-family: var(--display); font-size: clamp(1.75rem, 2.6vw, 2.6rem);
  line-height: 1.12; color: var(--ink); }
.bank__p { color: var(--ink-2); margin-top: .95rem;
  font-size: clamp(1rem, 1.05vw, 1.22rem); line-height: 1.6; }
.bank__tag { color: var(--ink-4); margin-top: 1.4rem;
  font-size: clamp(.62rem, .66vw, .76rem); letter-spacing: .18em; }

@media (max-width: 980px) {
  .wayh--bank .wayh__track { flex-direction: column; }
  .bank__img { display: none; }
  /* Untereinander gestapelt gibt es kein "mittig" — hier sind alle vier da.
     components.js setzt unter 980 px kein `is-on`, also muss das CSS zurueck. */
  .bank__stop { position: static; width: auto; padding: 2rem 0;
    opacity: 1; background: none; backdrop-filter: none; border: 0; }
}

/* ══ WER DAS BAUT ═════════════════════════════════════════════════════════
   Ersatz fuer das alte Bento. Zwei Dinge, die am alten Raster nicht stimmten und hier anders sind:
   Erstens tragen die Karten, die irgendwohin fuehren, einen KNOPF und nicht eine
   Textzeile mit Pfeil — man sah dem Link nicht an, dass er einer ist. Zweitens
   sagt jede Karte in ihrer Zeile, wovon sie handelt; vorher stand „Ihr Eigentum"
   neben „Websites" und gehoerte in Wahrheit zum Workspace. */
.wer__grid {
  display: grid; gap: clamp(.9rem, 1.2vw, 1.3rem);
  grid-template-columns: repeat(4, 1fr);
}
.wer__card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  box-shadow: var(--shadow-card); position: relative;
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: inherit;
}
.wer__no { color: var(--gold); letter-spacing: .18em; }
.wer__p { color: var(--ink-2); font-size: .98rem; line-height: 1.6; }
.wer__fakt {
  font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.15; color: var(--ink);
}
.wer__btn { align-self: flex-start; margin-top: auto; }
.wer--fakt { grid-column: span 1; }

/* Karten, die irgendwohin fuehren, heben sich beim Hover — die Fakten-Karten
   nicht, weil sie nirgendwo hinfuehren. Der Unterschied ist der Hinweis. */
a.wer__card { transition: border-color .3s var(--ease), transform .3s var(--easeOut); }
a.wer__card:hover { border-color: var(--gold-line); transform: translateY(-4px); }

/* Foto liegt in der Personenkarte. */
.wer--v1 .wer--person { grid-column: span 2; grid-row: span 2; }
.wer--v1 .wer--start { grid-column: span 2; }
/* Reihe 1: Person(2) + Start(2). Reihe 2: Person laeuft weiter(2) + zwei Fakten.
   Reihe 3 haette sonst nur zwei Einer-Karten und rechts ein Loch — die letzten
   beiden nehmen deshalb je zwei Spalten. */
.wer--v1 > :nth-last-child(-n+2) { grid-column: span 2; }
.wer__foto {
  margin: calc(-1 * clamp(1.6rem, 2.2vw, 2.4rem)) calc(-1 * clamp(1.6rem, 2.2vw, 2.4rem)) .6rem;
  border-radius: 16px 16px 0 0; overflow: hidden; aspect-ratio: 16 / 10;
}
.wer__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }

@media (max-width: 980px) {
  .wer__grid { grid-template-columns: repeat(2, 1fr); }
  .wer--v1 .wer--person, .wer--v1 .wer--start { grid-column: span 2; }
  .wer--v1 .wer--person { grid-row: auto; }
}
@media (max-width: 620px) {
  .wer__grid { grid-template-columns: 1fr; }
  .wer__card { grid-column: span 1 !important; }
}

/* ══ DER ZEIGER ═══════════════════════════════════════════════════════════
   Zwei Teile mit verschiedenen Aufgaben. Beim Fahren ist es ein goldener Punkt
   — derselbe Faden, mit dem der Preloader die Seite oeffnet. Ueber allem
   Klickbaren schnappen vier Ecken auf dessen Kanten zu und lassen wieder los.
   Roboter, ohne einen Roboter zu zeichnen.

   Der Punkt laeuft dem echten Zeiger bewusst leicht hinterher (Lerp in
   components.js). Ohne Verzoegerung ist er nur ein anders aussehender Cursor;
   mit Verzoegerung wirkt er wie etwas, das folgt.

   Aus bleibt er auf Touch, bei reduzierter Bewegung und wenn kein Zeigegeraet
   mit Feinsteuerung da ist — dann bleibt der Systemzeiger unangetastet. */
.cur { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
html.cur-on, html.cur-on * { cursor: none; }
/* Ausnahme: wo Text markiert oder getippt wird, bleibt der Systemzeiger. Ein
   fehlender Textcursor kostet mehr, als der Effekt dort einbringt. */
html.cur-on input, html.cur-on textarea, html.cur-on [contenteditable] { cursor: auto; }

.cur__dot { position: fixed; left: 0; top: 0; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(231, 194, 109, .65);
  opacity: 0; transition: opacity .25s var(--ease), width .2s var(--easeOut),
    height .2s var(--easeOut), margin .2s var(--easeOut), background .2s var(--ease); }
.cur.is-on .cur__dot { opacity: 1; }
/* Ueber einem Ziel tritt der Punkt zurueck — die Ecken uebernehmen. */
.cur.is-lock .cur__dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--gold); }

.cur__box { position: fixed; left: 0; top: 0; opacity: 0;
  transition: opacity .18s var(--ease), left .22s var(--easeOut),
    top .22s var(--easeOut), width .22s var(--easeOut), height .22s var(--easeOut); }
.cur.is-lock .cur__box { opacity: 1; }
.cur__box i { position: absolute; width: 9px; height: 9px; border: 1px solid var(--gold-bright); }
.cur__box i:nth-child(1) { left: -3px;  top: -3px;    border-right: 0; border-bottom: 0; }
.cur__box i:nth-child(2) { right: -3px; top: -3px;    border-left: 0;  border-bottom: 0; }
.cur__box i:nth-child(3) { left: -3px;  bottom: -3px; border-right: 0; border-top: 0; }
.cur__box i:nth-child(4) { right: -3px; bottom: -3px; border-left: 0;  border-top: 0; }