@font-face{
  font-family:"Inter";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/inter-normal-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:italic;font-weight:400 500;font-display:swap;
  src:url("fonts/inter-italic-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --bg:#ffffff;
  --bg-2:#f6f6f7;
  --bg-3:#eeeef0;
  --line:rgba(18,18,24,.08);
  --line-strong:rgba(18,18,24,.16);
  --fg:#14141a;
  --fg-2:#54545c;
  --fg-3:#6c6c76;
  --accent:#3b6ff5;
  --accent-ink:#1e40af;
  --accent-dim:rgba(59,111,245,.13);
  --max:1180px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fh-extra:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-weight:300;line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
section{position:relative}
.rule{height:1px;background:var(--line);border:0}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em;line-height:1.07}
h1{font-size:clamp(3rem,9vw,7rem);font-weight:600}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:600}
h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;font-weight:500}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--fg-2);max-width:62ch;line-height:1.62}
.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}
em,.it{font-family:var(--sans);font-style:italic}
.amber{color:var(--accent-ink)}
.chflag{display:inline-block;width:13px;height:13px;vertical-align:-1px;margin:0 1px;flex:none}
/* UK/FR-Flaggen im Sprachumschalter, gleiche Bauart wie .chflag oben:
   Inline-SVG statt Emoji, damit sie ueberall gleich aussehen statt sich auf
   die Emoji-Schriftart des Betriebssystems zu verlassen. */
.ukflag,.frflag{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin:0 1px;flex:none;border-radius:1px}

/* ---------- Nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
header.solid{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav{max-width:var(--max);margin:0 auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{font-family:var(--sans);font-weight:600;font-size:1.42rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.55rem}
.brand-mark{width:24px;height:24px;object-fit:contain;flex:none}
.nav-links{display:flex;gap:2rem;align-items:center;font-size:.83rem;letter-spacing:.02em;color:var(--fg-2);font-weight:400}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.btn{
  display:inline-block;padding:.72rem 1.35rem;border:1px solid var(--line-strong);
  border-radius:2px;font-size:.83rem;font-weight:500;letter-spacing:.03em;
  transition:background .25s,color .25s,border-color .25s;white-space:nowrap;
}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-solid:hover{background:#2c56d1;border-color:#2c56d1;color:#fff}
@media(max-width:880px){.nav-links{display:none}}

/* ---------- Sprachumschalter ----------
   Bewusst NICHT als versteckte Auswahl mit gespeicherter Praeferenz: die
   Datenschutzerklaerung sichert zu, dass die Seite keine Cookies und kein
   Local/Session Storage nutzt. Eine gemerkte Sprachwahl wuerde genau das
   brechen. Stattdessen einfache <a>-Links auf die Geschwisterseite in der
   jeweils anderen Sprache - kein Zustand, kein Skript noetig. Bleibt auch
   auf Mobil sichtbar (anders als .nav-links), weil die Sprachwahl dort
   genauso wichtig ist. */
.lang-switch{display:flex;gap:.5rem;align-items:center;font-size:.78rem;letter-spacing:.03em;color:var(--fg-3);flex:none}
.lang-switch a{transition:color .2s}
.lang-switch a:hover{color:var(--fg)}
.lang-switch .aktiv{color:var(--fg);font-weight:600;pointer-events:none}
.lang-switch .lang-sep{color:var(--line-strong)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:9rem 0 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg .glow{
  position:absolute;left:50%;top:-20%;transform:translateX(-50%);
  width:min(1200px,140vw);height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,111,245,.15) 0%,rgba(59,111,245,.04) 38%,transparent 66%);
  filter:blur(20px);
}
.hero-bg .grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:110px 110px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 0%,transparent 78%);
  opacity:.55;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:1.6rem 0 0}
.hero h1 .l2{display:block;color:var(--fg-3);position:relative;overflow:hidden;height:1.2em}

/* Wortwechsel unter Zeile 1: "Momente. Plot. Subtext." blenden nacheinander
   auf und wieder ab, das vierte Wort "Die ganze Story." bleibt danach stehen.
   Laeuft nur EINMAL (kein iteration-count:infinite mehr) - wiederholt sich
   also nur bei einem Reload, nicht in einer Schleife. animation-fill-mode:
   forwards haelt jedes Wort nach seinem Durchlauf im 100%-Zustand, sonst
   wuerde es am Ende auf die Basis-opacity:0 zurueckspringen. Zwei Varianten
   zum A/B-Test - aktiv ist die, deren Klasse (l2-slide / l2-blur) im HTML
   auf dem .l2-Span steht. */
.l2 .cycle-word{
  position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
  animation-duration:6s;animation-iteration-count:1;animation-timing-function:ease-in-out;
  animation-fill-mode:forwards;
}
.l2 .cycle-word:nth-child(1){animation-delay:0s}
.l2 .cycle-word:nth-child(2){animation-delay:2s}
.l2 .cycle-word:nth-child(3){animation-delay:4s}
.l2 .cycle-word:nth-child(4){animation-delay:6s}

/* Variante A: von unten reingleiten */
.l2-slide .cycle-word{animation-name:l2-slide-cycle}
@keyframes l2-slide-cycle{
  0%{opacity:0;transform:translateY(70%)}
  6%{opacity:1;transform:translateY(0)}
  28%{opacity:1;transform:translateY(0)}
  34%{opacity:0;transform:translateY(-70%)}
  100%{opacity:0;transform:translateY(-70%)}
}
/* Letztes Wort: einblenden, aber NICHT wieder ausblenden - es soll stehenbleiben */
.l2-slide .cycle-word.cycle-final{animation-name:l2-slide-final}
@keyframes l2-slide-final{
  0%{opacity:0;transform:translateY(70%)}
  6%{opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}

/* Variante B: aus der Unschaerfe scharf werden */
.l2-blur .cycle-word{animation-name:l2-blur-cycle}
@keyframes l2-blur-cycle{
  0%{opacity:0;filter:blur(16px)}
  8%{opacity:1;filter:blur(0)}
  28%{opacity:1;filter:blur(0)}
  34%{opacity:0;filter:blur(16px)}
  100%{opacity:0;filter:blur(16px)}
}
.l2-blur .cycle-word.cycle-final{animation-name:l2-blur-final}
@keyframes l2-blur-final{
  0%{opacity:0;filter:blur(16px)}
  8%{opacity:1;filter:blur(0)}
  100%{opacity:1;filter:blur(0)}
}

@media(prefers-reduced-motion:reduce){
  .l2 .cycle-word{animation:none;opacity:0}
  .l2 .cycle-word:last-child{opacity:1}
}
.hero .lead{margin-top:1.9rem;font-size:clamp(1.1rem,1.75vw,1.42rem);color:var(--fg-2)}
.hero-cta{display:flex;gap:.9rem;margin-top:2.6rem;flex-wrap:wrap}
.hero-meta{
  margin-top:4.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;gap:3.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--fg-3);letter-spacing:.02em;
}
.hero-meta b{display:block;color:var(--fg);font-weight:600;font-family:var(--sans);font-size:1.5rem;letter-spacing:-.01em;margin-bottom:.15rem}
/* ---------- Kapitel-Rastpunkte (scroll-snap) ----------
   proximity, nicht mandatory: der Browser rastet NUR ein, wenn die Bewegung
   ohnehin in der Naehe eines Kapitelanfangs auslaeuft. Wer durchscrollt, wird
   nie gebremst - die Override-Anforderung erfuellt der Standard selbst.
   scroll-margin-top haelt die 92px der fixierten Navigation frei; das richtet
   zugleich die Anker-Links aus der Navigation korrekt aus. */
@media(prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  .snap{scroll-snap-align:start;scroll-margin-top:92px}
  /* Innerhalb der Pipeline-Strecke darf nichts rasten - sonst kaempft das
     Snapping gegen das horizontale Durchscrollen der Beispiele. */
  #pipeline-track{scroll-snap-align:none}
  /* #kontakt (.cta.snap) ist das letzte Rastziel im Dokument. Der Footer
     danach ist kurz (~150px) und war selbst KEIN Rastziel - "proximity"
     wertete ein Loslassen im Footer trotzdem als "nah genug an #kontakt"
     und zog zurueck nach oben, sodass Impressum/Datenschutz nie klickbar
     wurden. Fix: der Footer wird sein eigenes Rastziel, dadurch rastet die
     Bewegung AUF ihn ein, statt von ihm weg. */
  footer{scroll-snap-align:end}
}

/* ---------- Halt an Schluesselkapiteln ----------
   Dieselbe Technik wie die Pipeline: hohe Box, darin ein 100vh-Fenster per
   sticky. Kein preventDefault, nichts wird abgefangen - gescrollt wird normal
   weiter, der Inhalt bleibt nur laenger stehen und baut sich dabei auf.
   Hoehe und Schwellen setzt das Skript (data-hold-step = vh je Schritt).
   .hold-live setzt es nur, wenn die Strecke aktiv ist; ohne JS oder bei
   reduzierter Bewegung bleibt alles ein normaler, vollstaendig sichtbarer
   Abschnitt - deshalb ist der Grundzustand von .hold-step sichtbar. */
.hold-view{position:relative}
.hold.hold-live .hold-view{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:92px;   /* fixierte Navigation */
}
.hold.hold-live .hold-step{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}
.hold.hold-live .hold-step.shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .hold.hold-live .hold-step{opacity:1;transform:none;transition:none}
}

/* ---------- Bruecke Hero -> Beispiele ----------
   Eigenes Band mit getoentem Grund: die Argumentation steht damit sichtbar
   zwischen Hero und Beispielen und wird als Scharnier gelesen, nicht als
   Nachsatz. Praemisse klein/grau, Schluss gross - die Rangfolge ergibt sich
   aus der Typografie, nicht aus einem <br>. */
/* Gestapelte Sticky-Sektionen (siehe Kommentar im HTML): die Bruecke klebt
   oben, die Beispiel-Sektion schiebt von unten darueber. Die Hoehe der Bruecke
   ist der Ueberlappungsweg - 80svh, damit von Anfang an der naechste Abschnitt
   unten hereinragt und nie eine leere Flaeche entsteht.
   .stack begrenzt die Klebrigkeit: sie endet, wenn die Beispiel-Sektion vorbei
   ist, sonst blieben die Saetze hinter spaeteren Abschnitten haengen. */
.stack{position:relative}
.bridge{
  position:sticky;top:0;z-index:0;
  /* Inhalt sitzt oben, nicht mittig: so bleibt er laenger frei, waehrend die
     Beispiel-Sektion ihn von unten zudeckt. */
  min-height:80svh;display:flex;align-items:flex-start;
  background:var(--bg-2);text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:calc(92px + 5vh) 0 3rem;
}
/* Muss deckend sein und ueber der Bruecke liegen, sonst scheint sie durch.
   Der Schatten an der Oberkante macht das Uebereinanderschieben lesbar - ohne
   ihn sieht die Schnittkante mitten im Text wie ein Darstellungsfehler aus. */
.bridge + .sec{
  position:relative;z-index:1;background:var(--bg);
  box-shadow:0 -16px 36px rgba(18,18,24,.13);
}
/* Die beiden Saetze stehen gemeinsam im Bild. Der Abstand zwischen ihnen ist
   Rangfolge, nicht Gegensatz: die Praemisse ist nur rund ein Drittel kleiner
   (vorher 18px gegen 46px - da wirkte sie wie eine Bildunterschrift). */
.bridge-premise{
  max-width:46ch;margin:0 auto;color:var(--fg-2);
  font-size:clamp(1.2rem,1.95vw,1.62rem);line-height:1.5;font-weight:400;
}
.bridge-claim{
  max-width:32ch;margin:1.5rem auto 0;color:var(--fg);
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(1.6rem,2.85vw,2.35rem);
}
/* Chevron als Wegweiser in die Beispiele - dasselbe Motiv wie der Pipeline-Pfeil */
.bridge-cue{
  width:30px;height:17px;margin:2.3rem auto 0;background:var(--accent);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
/* Die Beispiel-Sektion rueckt naeher heran - sonst stossen 5rem Hero-Rand und
   7.5rem Sektions-Rand aufeinander (das war die 222px-Luecke). */
.bridge + .sec{padding-top:5rem}
@media(max-width:900px){
  /* Ohne Stapel-Effekt braucht es weder Ueberlappungshoehe noch Kantenschatten */
  .bridge{min-height:auto;position:static;padding:3.6rem 0 3rem}
  .bridge + .sec{background:none;box-shadow:none}
  .bridge-cue{margin-top:1.8rem}
}

/* ---------- Typing-Demo ---------- */
.typing-sec{padding:5rem 0 6rem}
.typing-line{
  font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  color:var(--fg);font-size:clamp(2.1rem,5.6vw,5.2rem);
}
.typing-cursor{display:inline-block;color:var(--accent);font-weight:300;animation:typing-blink .9s step-end infinite}
@keyframes typing-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typing-cursor{animation:none}}

/* ---------- Positioning strip ---------- */
.strip{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5.5rem 0}
.strip-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}
.contrast{border-left:2px solid var(--line);padding-left:1.6rem}
.contrast.on{border-left-color:var(--accent)}
.contrast h3{margin-bottom:.7rem}
.contrast p{color:var(--fg-2);font-size:1rem}
.contrast .tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.9rem;display:block}
@media(max-width:820px){.strip-grid{grid-template-columns:1fr;gap:2.6rem}}

/* ---------- Section shell ---------- */
.sec{padding:7.5rem 0}
.sec-head{max-width:74ch;margin-bottom:3.8rem}
.sec-head h2{margin:1.4rem 0 1.4rem}
.sec-intro{max-width:58ch}

/* ---------- Fiction-Titel: bleibt beim Scrollen oben (echtes sticky) ----------
   Steht als eigenes Element vor dem Absatz und dem pipeline-track (siehe
   Kommentar im HTML) - .pinned setzt JS nur auf Desktop/ohne reduzierte
   Bewegung. Deckender Hintergrund + z-index: der Absatz darunter verschwindet
   dadurch einfach unter der Titelzeile, ganz ohne eigene Scroll-Strecke oder
   Fade-Logik - kein Leerlauf, weil nichts extra Scroll-Weg braucht. */
.fiction-title{max-width:74ch;margin:1.4rem 0 1.4rem;position:relative}
.fiction-title.pinned{
  position:sticky;top:92px;z-index:3;background:var(--bg);
  padding-bottom:.6rem;margin-bottom:.8rem;
}

/* ---------- Pipeline ---------- */
.pipeline{display:grid;gap:0;border-top:1px solid var(--line)}
/* Zwei Spalten: Text | Frage. Eine Rollen-Spalte gibt es nicht mehr - die
   Station steht im Pfeil (Desktop) bzw. ergibt sich aus der Reihenfolge. */
.stage{
  display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;
  padding:2.5rem 0;border-bottom:1px solid var(--line);align-items:start;
  transition:background .3s;
}
.stage:hover{background:rgba(18,18,24,.025)}
.stage h3{font-size:1.42rem}
.stage .desc{color:var(--fg-2);font-size:.97rem;padding-top:.2rem}
.stage .quote{
  font-family:var(--sans);font-style:italic;font-weight:400;font-size:1.06rem;color:var(--fg);
  border-left:1px solid var(--line-strong);padding-left:1.1rem;line-height:1.45;
}
.stage .media{border:1px solid var(--line);overflow:hidden;line-height:0;position:relative}
.stage .media video{width:100%;display:block}
.stage .media video[data-full]{cursor:pointer}
.stage .media:has(video[data-full])::after{
  content:"";position:absolute;top:.7rem;right:.7rem;width:30px;height:30px;
  border-radius:5px;background:rgba(10,10,12,.6) no-repeat center/15px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v4M15 3h4a2 2 0 0 1 2 2v4M9 21H5a2 2 0 0 1-2-2v-4M15 21h4a2 2 0 0 0 2-2v-4"/></svg>');
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.stage .media:hover::after{opacity:1}

/* Video-Lightbox: generisches Overlay fuer jedes video[data-full] */
#video-lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(10,10,12,.94);
  display:flex;align-items:center;justify-content:center;padding:6vh 6vw;
  opacity:0;visibility:hidden;transition:opacity .25s;
}
#video-lightbox.open{opacity:1;visibility:visible}
#video-lightbox video,#video-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#video-lightbox img{display:none}
.lightbox-close{
  position:absolute;top:1.6rem;right:1.8rem;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
.badge{
  display:inline-block;margin-top:.85rem;font-family:var(--sans);font-style:normal;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-dim);padding:.3rem .6rem;border-radius:2px;
}
/* Enter-Taste im "Drehplan stecken"-Panel: laeuft ueber den Badge-Mechanismus,
   sieht aber wie eine gedrueckte Taste aus und poppt beim Erscheinen kurz. */
.badge.enter-key{
  text-transform:none;letter-spacing:.02em;font-size:.72rem;font-weight:600;
  color:var(--bg);background:var(--fg);border-radius:5px;padding:.28rem .62rem;
  box-shadow:0 2px 0 rgba(18,18,24,.35);animation:key-pop .3s ease-out;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
/* .pressed setzt das Skript beim Wechsel in Schritt 2 - die Taste gibt nach,
   danach startet der Clip. */
.badge.enter-key.pressed{
  transform:translateY(2px);box-shadow:0 0 0 rgba(18,18,24,.35);
  background:var(--accent);animation:none;
}
@keyframes key-pop{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* "Export Drehplan?" - erscheint in der Bildunterschrift, sobald der Clip durch ist */
.export-hint{
  display:inline-block;margin-left:.5rem;padding:.15rem .5rem;border-radius:3px;
  background:var(--accent-dim);color:var(--accent-ink);letter-spacing:.06em;
  opacity:0;transform:translateY(3px);transition:opacity .4s ease,transform .4s ease;
}
.export-hint.show{opacity:1;transform:translateY(0)}
/* Ohne Zwei-Schritt-Mechanik (Mobil) gibt es nichts zu "druecken" */
@media(max-width:900px){.badge.enter-key{display:none}}
@media(max-width:900px){
  .stage{grid-template-columns:1fr;gap:1rem;padding:2.1rem 0}
  .stage .quote{padding-left:.95rem}
}

/* ---------- Pipeline horizontal (nur wenn JS .horizontal setzt) ----------
   Die Strecke ist hoch (ein Slot je Panel); darin bleibt ein 100vh-Fenster
   per sticky stehen, waehrend die Panels seitlich durchgeschoben werden.
   Ohne .horizontal greift nichts hiervon - dann gilt die vertikale Liste. */
.pipeline-track.horizontal{position:relative}
.pipeline-track.horizontal .pipeline-viewport{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  /* 92px Nav + --fh-extra (Hoehe der gepinnten Titelzeile, von JS gemessen)
     + 1.5rem Abstand + --pa-h (Hoehe des Pfeils samt Stationsnamen, ebenfalls
     von JS gemessen). Der Pfeil liegt absolut, belegt also selbst keinen
     Platz - ohne diese Reserve schiebt sich hohes Panel-Inhalt unter ihn. */
  padding-top:calc(92px + var(--fh-extra, 0px) + 1.5rem + var(--pa-h, 0px));
}
.pipeline-track.horizontal .pipeline{
  display:flex;border-top:0;gap:0;
  transition:transform .55s cubic-bezier(.4,.05,.2,1);will-change:transform;
}
.pipeline-track.horizontal .stage{
  flex:0 0 100%;min-width:100%;
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  padding:0 0 4rem;border-bottom:0;
}
.pipeline-track.horizontal .stage:hover{background:none}
.pipeline-track.horizontal .stage h3{font-size:clamp(1.5rem,2.4vw,2.1rem);max-width:24ch}
.pipeline-track.horizontal .stage .desc{font-size:1.02rem;max-width:52ch;padding-top:0}
.pipeline-track.horizontal .stage .quote{
  border-left:0;padding-left:0;margin-top:.6rem;
  font-size:clamp(1.5rem,3.2vw,2.9rem);font-weight:600;font-style:normal;
  letter-spacing:-.02em;line-height:1.16;max-width:38ch;min-height:2.4em;
}
.pipeline-track.horizontal .stage .quote .badge{vertical-align:middle}
.pipeline-track.horizontal .stage .quote::after{
  content:"|";color:var(--accent);font-weight:300;margin-left:.06em;
  animation:typing-blink .9s step-end infinite;
}
.pipeline-track.horizontal .stage.done .quote::after{opacity:.25;animation:none}
.pipeline-track.horizontal .stage .media{max-width:min(560px,52vw)}

/* --- Panel mit zweitem Schritt: Frage schrumpft, Antwort erscheint daneben ---
   Das Bild ist fast quadratisch (1502x1526). Deshalb ist im zweiten Schritt
   die zweispaltige Anordnung wichtig: der Text steht daneben statt darueber,
   dadurch bleibt dem Bild fast die volle Panelhoehe (~700px statt ~590px). */
.answer{display:none;margin:0}
/* In Phase 1 muss die Antwort 0 Hoehe belegen - mit blossem opacity:0 bliebe
   sie im Layout, das Panel wuerde zu hoch und der Kopf rutschte hinter die Nav.
   max-height:0 + overflow:hidden nimmt sie aus der Hoehe und laesst sich
   trotzdem animieren (display waere nicht animierbar). */
.pipeline-track.horizontal .stage.has-answer .answer{
  display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(14px);
  transition:max-height .5s ease,opacity .45s ease,transform .45s ease;
}
.pipeline-track.horizontal .stage.has-answer.phase2 .answer{max-height:100vh}
/* Zwei Leerzeilen (1fr) oben und unten fangen die Resthoehe des hohen Bildes
   ab - sonst verteilt das Grid sie auf die Textzeilen und zieht sie auseinander. */
.pipeline-track.horizontal .stage.has-answer.phase2{
  display:grid;grid-template-columns:minmax(230px,.72fr) 1.28fr;
  grid-template-rows:1fr min-content min-content 1fr;
  gap:.9rem 2.6rem;align-items:start;
}
.pipeline-track.horizontal .stage.has-answer.phase2 .stage-text{grid-column:1;grid-row:2}
.pipeline-track.horizontal .stage.has-answer.phase2 .quote{grid-column:1;grid-row:3}
.pipeline-track.horizontal .stage.has-answer.phase2 .answer{
  grid-column:2;grid-row:1 / span 4;
  opacity:1;transform:none;justify-self:end;align-self:center;
}
/* im zweiten Schritt tritt der Text zurueck, damit das Bild Platz bekommt */
.pipeline-track.horizontal .stage.has-answer.phase2 .quote{
  font-size:clamp(1rem,1.25vw,1.18rem);font-weight:500;line-height:1.4;
  color:var(--fg-2);min-height:0;max-width:34ch;
  transition:font-size .4s ease,color .4s ease;
}
.pipeline-track.horizontal .stage.has-answer.phase2 .quote::after{display:none}
.pipeline-track.horizontal .stage.has-answer.phase2 .desc{
  opacity:0;max-height:0;overflow:hidden;margin:0;
  transition:opacity .3s ease,max-height .4s ease;
}
.pipeline-track.horizontal .stage.has-answer.phase2 h3{
  font-size:clamp(1.25rem,1.7vw,1.6rem);transition:font-size .4s ease;
}
.answer img,.answer video{
  /* Nur der Platz unter Nav + gepinnter Titelzeile + Pfeil steht zur
     Verfuegung - sonst laeuft das hohe Bild oben unter den Pfeil und unten
     aus dem Fenster heraus. 7rem = Panel-Unterkante plus Luft. */
  max-height:min(660px, calc(100vh - 92px - var(--fh-extra, 0px) - var(--pa-h, 0px) - 7rem));
  max-width:100%;width:auto;height:auto;
  display:block;border:1px solid var(--line);cursor:pointer;
}
.answer video{width:100%}
.answer figcaption{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);margin-top:.7rem;
}
/* Zwei Antwort-Varianten nebeneinander (Post-Production: zwei Teaser).
   Doppelte Klasse ist noetig: die display:block-Regel fuer .answer weiter oben
   ist gleich spezifisch und haette das Grid sonst ueberschrieben - die Bilder
   standen dadurch untereinander und liefen aus dem Fenster. */
.pipeline-track.horizontal .stage.has-answer .answer.answer-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;
}
.answer-pair img{
  max-height:calc(100vh - 92px - var(--fh-extra, 0px) - var(--pa-h, 0px) - 11rem);
  width:100%;
}
.answer-pair figcaption{
  font-size:.66rem;letter-spacing:.08em;margin-top:.55rem;
  text-transform:none;color:var(--fg-2);
}
/* ---------- Antworten auf Mobil ----------
   Mobil gibt es die Pipeline nicht, die Panels stehen als Liste untereinander.
   Hier stand vorher nur `.answer:has(video){display:block}` - sichtbar war
   also allein der Drehplan-Clip, und bei drei von vier Panels sah man die
   Frage und nichts darauf. Gemessen auf 390px: 3 von 4 Antworten waren
   display:none. Das traf die meistgenutzte Geraeteklasse und nahm der Seite
   ihr staerkstes Argument.

   Jetzt erscheint jede Antwort unter ihrer Frage, ueber die volle Breite.
   Die Hoehenrechnung des Desktops (Fensterhoehe minus Nav minus gepinnte
   Titelzeile minus Pfeil) muss dabei WEG: auf Mobil gibt es weder gepinnte
   Zeile noch Pfeil, und `100vh` wuerde das Bild grundlos beschneiden. */
@media(max-width:900px){
  .answer{display:block;margin-top:1.2rem}
  .answer img,.answer video{
    width:100%;max-width:100%;max-height:none;
  }
  .answer-pair{display:grid;grid-template-columns:1fr;gap:1.4rem}
  .answer-pair img{max-height:none}
  .answer figcaption{font-size:.68rem;margin-top:.55rem}
}

/* ---------- Lightbox auf Mobil ----------
   Die Lightbox rechnet das Bild sonst auf die FENSTERHOEHE (`max-height:100%`
   plus 6vh/6vw Rand). Bei einer 2000x1419-Aufnahme bleiben davon auf einem
   390px-Telefon 344px Breite - kein Gewinn gegenueber der Vorschau daneben.
   Hier deshalb: auf die BREITE einpassen und in der Hoehe scrollen lassen.

   Warum nicht gleich natuerliche Groesse? Ausprobiert: 2000px auf 390px sind
   5,1-fache Bildschirmbreite. Dann ist jede Textzeile rechts abgeschnitten und
   man wischt fuer jede Zeile einmal quer - die schlechteste Leseform, die es
   gibt. Besser ist ein orientierter Start: man sieht die ganze Antwort und
   zoomt selbst mit zwei Fingern hinein (das viewport-meta erlaubt es, es steht
   kein user-scalable=no darin).

   Wirklich lesbar werden die Textaufnahmen auf einem Telefon erst mit eigens
   zugeschnittenen Mobil-Bildern - das Beschneiden per CSS bringt nichts, weil
   der Abbildungsmassstab an der Anzeigebreite haengt, nicht am Bildausschnitt.
   Siehe NOTES.md 15.

   Der Schliessknopf muss `fixed` werden, sonst scrollt er mit dem Bild davon. */
@media(max-width:900px){
  #video-lightbox{
    padding:0;overflow:auto;-webkit-overflow-scrolling:touch;
    align-items:flex-start;justify-content:center;
  }
  #video-lightbox img{
    width:100vw;max-width:100vw;height:auto;max-height:none;box-shadow:none;
  }
  /* Videos bleiben eingepasst und zentriert - da gibt es nichts zu lesen. */
  #video-lightbox video{max-width:100vw;max-height:100vh;margin:auto}
  .lightbox-close{position:fixed;top:.7rem;right:.7rem;z-index:1}
}

/* Maus oder Finger: dasselbe Element, andere Ansprache. */
.nur-touch{display:none}
@media(max-width:900px){
  .nur-maus{display:none}
  .nur-touch{display:inline}
}

/* Wiederholung der H2 ueber der Pipeline (siehe Kommentar im HTML): dieselbe
   Ueberschrift, klein, angeheftet, aria-hidden - kein eigener Scroll-Weg,
   erscheint einfach sobald die (bereits bestehende) sticky Pipeline-Ansicht
   greift. Ersetzt einen fruehreren Versuch mit eigener Fade-Scroll-Strecke,
   die immer einen spuerbaren Leerlauf vor der Pipeline erzeugt hat. */
.pipeline-heading{
  display:none;position:absolute;left:0;right:0;top:92px;
  font-family:var(--sans);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;
  color:var(--fg);
}
.pipeline-track.horizontal .pipeline-heading{display:block}
@media(max-width:900px){.pipeline-heading{display:none !important}}

/* ---------- Pipeline-Pfeil: waechst mit jeder Station ----------
   Fester Pfad aus 8 zusammenhaengenden Blockpfeil-Segmenten (per clip-path,
   mit negativem margin-left ineinandergesteckt - die Spitze des einen liegt
   exakt in der Kerbe des naechsten, dadurch wirkt es wie EIN Pfeilstrahl statt
   8 einzelne Pfeile). Gefuellt wird kumulativ (0..aktuelles Panel), nicht nur
   die aktuelle Station wie bei den Punkten - der Pfeil soll sichtbar durch
   den gesamten bisher gezeigten Prozess "gewachsen" sein.
   top rutscht etwas tiefer als frueher, um Platz fuer .pipeline-heading
   direkt darueber zu lassen. */
.pipeline-arrow{display:none;position:absolute;left:0;right:0;top:calc(92px + var(--fh-extra, 0px) + 1.5rem)}
.pipeline-track.horizontal .pipeline-arrow{display:block}
.pa-track{display:flex}
/* Der Stationsname sitzt IM Segment. Das linke Padding faengt die Kerbe auf,
   damit die Schrift nicht in die Einbuchtung des Vorgaengers laeuft. */
.pa-seg{
  flex:1 1 0;min-width:0;height:52px;background:var(--line);cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  margin-left:-16px;transition:background .35s ease,opacity .2s ease;
  display:flex;align-items:center;justify-content:center;padding:0 .5rem 0 1.4rem;
}
.pa-seg:first-child{
  margin-left:0;padding-left:.6rem;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.pa-seg.on{background:var(--accent)}
.pa-seg:hover{opacity:.85}
.pa-cap{
  /* Seit nur noch 7 Stationen ist je Segment mehr Platz - Schrift entsprechend
     groesser. Bei Aenderung der Stationszahl auf Abschneiden pruefen. */
  font-size:clamp(.6rem,.84vw,.78rem);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .3s ease;
}
.pa-seg.on .pa-cap{color:#fff}
@media(max-width:900px){.pipeline-arrow{display:none !important}}

.pipeline-progress{
  display:none;position:absolute;left:0;bottom:2.2rem;
  align-items:center;gap:1rem;
}
.pipeline-track.horizontal .pipeline-progress{display:flex}
.pp-count{font-size:.72rem;letter-spacing:.16em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.pp-dots{display:flex;gap:.45rem}
.pp-dots span{
  width:22px;height:2px;background:var(--line-strong);border-radius:2px;
  transition:background .3s;
}
.pp-dots span.on{background:var(--accent)}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--bg);padding:2.4rem 2rem;transition:background .3s}
.card:hover{background:var(--bg-3)}
.card .num{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--accent-ink);margin-bottom:1.4rem;display:block}
.card h3{font-size:1.3rem;margin-bottom:.8rem}
.card p{color:var(--fg-2);font-size:.95rem}
.card .soon{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);border:1px solid var(--line);padding:.25rem .55rem;border-radius:2px;display:inline-block;margin-bottom:1.1rem}

/* ---------- Non-fiction ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:3rem}}
.claimbox{border:1px solid var(--line);background:var(--bg-2);padding:2.2rem}
.claimrow{display:flex;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:flex-start;font-size:.94rem}
.claimrow:last-child{border-bottom:0;padding-bottom:0}
.claimrow:first-child{padding-top:0}
.mark{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.1em;padding:.28rem .5rem;border-radius:2px;flex:none;margin-top:.1rem}
.m-ok{background:rgba(22,140,72,.13);color:#0f7a3c}
.m-no{background:rgba(214,58,58,.13);color:#b02a2a}
.m-hm{background:var(--accent-dim);color:var(--accent-ink)}
.claimrow span.txt{color:var(--fg-2)}
.claimrow .src{display:block;color:var(--fg-3);font-size:.8rem;margin-top:.25rem}

/* ---------- Proof ---------- */
.proof{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6.5rem 0}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.8rem}
.logo{
  background:var(--bg-2);aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  color:var(--fg-3);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:1rem;
}
.logo.ph{background:repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 9px,rgba(18,18,24,.035) 9px,rgba(18,18,24,.035) 18px)}
.logo-note{font-size:.78rem;color:var(--fg-3);margin-top:1.1rem}
.pull{
  font-family:var(--sans);font-weight:500;font-style:italic;font-size:clamp(1.55rem,3.4vw,2.5rem);line-height:1.28;
  max-width:26ch;margin:0 auto;text-align:center;
}
.pull-attr{text-align:center;color:var(--fg-3);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-top:1.8rem}

/* ---------- Team / roles / clients / press ---------- */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;margin-top:2.4rem}
.role{display:block;border:1px solid var(--line);padding:1.5rem;transition:border-color .25s,background .25s}
.role:hover{border-color:var(--line-strong);background:var(--bg-2)}
.role h4{font-family:var(--sans);font-size:.98rem;font-weight:500;margin-bottom:.35rem}
.role p{font-size:.84rem;color:var(--fg-3)}
.role.client{padding:1.9rem 1.7rem}
.role.client h4{font-size:1.4rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.55rem}
.role.client p{font-size:.92rem;color:var(--fg-2)}
/* Kundenlogos: ueber die Hoehe begrenzt, damit unterschiedliche
   Seitenverhaeltnisse (Serienwerft 5.3:1, ndF 2.2:1) optisch gleich wirken */
.client-logo{max-width:100%;max-height:66px;width:auto;height:auto;display:block}

.role.founder{display:flex;flex-direction:column;align-items:flex-start}
.founder-photo{width:75px;height:75px;border-radius:50%;object-fit:cover;margin-bottom:.9rem}
.founder-photo.bw{filter:grayscale(1)}
.role.founder h4{font-size:1.05rem}
.role.founder p{margin-bottom:.5rem}
.founder-linkedin{font-size:.78rem;font-weight:500;color:var(--accent-ink)}
.founder-linkedin:hover{text-decoration:underline}

/* Kunden-Karussell: zyklisch nach links scrollend, zwei identische Sets im
   Track fuer einen nahtlosen Loop bei translateX(-50%). */
.client-marquee{
  overflow:hidden;margin-top:2.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.client-track{display:flex;gap:1.6rem;width:max-content;animation:client-scroll 30s linear infinite}
.client-marquee:hover .client-track{animation-play-state:paused}
.client-track .role.client{flex:0 0 380px}
@keyframes client-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.client-track{animation:none}}

/* ---------- CTA / footer ---------- */
.cta{padding:8.5rem 0;text-align:center;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;left:50%;bottom:-45%;transform:translateX(-50%);
  width:min(1000px,130vw);height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,111,245,.11) 0%,transparent 65%);pointer-events:none;
}
.cta .wrap{position:relative}
.cta h2{margin-bottom:1.5rem}
.cta .lead{margin:0 auto}
footer{border-top:1px solid var(--line);padding:2.6rem 0;font-size:.8rem;color:var(--fg-3)}
.foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot a:hover{color:var(--fg)}
.foot nav{display:flex;gap:1.5rem}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
.legal{padding:9.5rem 0 6rem}
.legal h1{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:2.2rem}
.legal-block{max-width:70ch;margin-bottom:2.6rem}
.legal-block h2{font-size:1.25rem;font-weight:600;margin-bottom:.4rem;letter-spacing:-.01em}
.legal-block h3{font-size:1rem;font-weight:600;margin:1.1rem 0 .3rem;letter-spacing:0}
.legal-block p{color:var(--fg-2);margin-bottom:.7rem;line-height:1.62}
.legal-block ul{color:var(--fg-2);margin:.3rem 0 .8rem 1.2rem;line-height:1.62}
.legal-block a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--line-strong)}
.legal-block a:hover{text-decoration-color:currentColor}
.legal-divider{height:1px;background:var(--line);margin:2.6rem 0;border:0}
.legal-intro{color:var(--fg-2);max-width:70ch;margin-bottom:2.8rem;line-height:1.62}
.legal-block dl{color:var(--fg-2);line-height:1.62;margin:.2rem 0 .9rem;display:grid;grid-template-columns:15rem 1fr;gap:.15rem 1.2rem}
.legal-block dt{color:var(--fg-3);font-size:.9rem;letter-spacing:.01em}
.legal-block dd{margin:0}
@media(max-width:620px){
  .legal-block dl{grid-template-columns:1fr;gap:0}
  .legal-block dt{margin-top:.7rem}
}
.legal-stand{color:var(--fg-3);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2rem}
/* Sprachumschalter auf den Rechtsseiten - beide Fassungen stehen auf EINER
   Seite untereinander, die Links springen nur zum jeweiligen Anker. */
.legal-lang{display:flex;gap:.6rem;margin-bottom:2.4rem;font-size:.85rem}
.legal-lang a{color:var(--fg-2);border:1px solid var(--line);padding:.35rem .8rem;text-decoration:none}
.legal-lang a:hover{border-color:var(--line-strong);color:var(--fg)}

/* Noch zu ergaenzende Angabe. Bewusst mit Text-Praefix statt nur einer Farbe -
   Farbe allein waere fuer rot-gruen-blinde Augen kein Signal. */
.legal-todo{display:inline-block;outline:2px dotted var(--accent);outline-offset:3px;padding:0 .2rem;color:var(--fg);font-weight:600}
.legal-todo::before{content:"noch zu ergänzen — ";font-weight:700;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}

/* ---------- Kontaktformular ---------- */
.kontaktform{max-width:46rem;margin:3.4rem auto 0;text-align:left}
.kontaktform-intro{text-align:center;color:var(--fg-2);margin-bottom:1.8rem}
.kf-zeile{margin-bottom:1.1rem}
.kf-zeile label{display:block;font-size:.82rem;font-weight:600;color:var(--fg-2);letter-spacing:.02em;margin-bottom:.4rem}
.kf-opt{font-weight:400;color:var(--fg-3);letter-spacing:0}
.kf-zeile input,.kf-zeile textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--fg);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:0;
  padding:.7rem .85rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.kf-zeile textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.kf-zeile input:focus,.kf-zeile textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);
}
/* Honeypot: aus dem Bild genommen, ohne display:none - manche Bots ignorieren
   ausgeblendete Felder gerade deshalb. */
.kf-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontaktform-hinweis{font-size:.82rem;color:var(--fg-3);line-height:1.55;margin:1.2rem 0 0;max-width:52ch}
.kontaktform-hinweis a{color:var(--accent-ink);text-decoration:underline}
.kf-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.6rem}
.kf-aktion button[disabled]{opacity:.55;cursor:default}
/* Status: Wortmarke statt Farbsignal - rot/gruen allein waere fuer
   rot-gruen-blinde Augen keine Information (siehe NOTES.md 3). */
.kf-status{font-size:.88rem;line-height:1.5;color:var(--fg-2);margin:0}
.kf-status.ok,.kf-status.fehler{font-weight:600;color:var(--fg)}
.kf-status.ok::before{content:"✓ ";color:var(--accent-ink)}
.kf-status.fehler::before{content:"! ";color:var(--accent-ink);font-weight:700}

/* ---------- Externe Embeds: Zwei-Klick-Loesung ---------- */
.embed-consent{border:1px solid var(--line);background:var(--bg-2);padding:1.5rem;max-width:504px;margin-top:1.6rem}
.embed-consent.loaded{padding:1rem;background:none}
.embed-consent-title{font-weight:600;color:var(--fg);margin-bottom:.5rem}
.embed-consent p{color:var(--fg-2);font-size:.9rem;line-height:1.6;margin-bottom:.9rem}
.embed-consent a{color:var(--accent-ink);text-decoration:underline}
.embed-consent-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}