/* ==========================================================================
   STAHL FÜHRUNG — globales Design-System („System"-Variante)
   Blueprint / Engineering-Präzision · nüchtern-technisch, aber warm.
   Fonts self-hosted via @fontsource (Import im BaseLayout).
   ========================================================================== */

:root{
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --text:      #12263C;
  --text-dim:  rgba(10,30,54,.78);
  --text-faint:rgba(10,30,54,.55);
  --accent:    #2E7C9C;
  --accent-rgb:46,124,156;
  --beige:     #8C8657;
  /* Nur fuer Schalter im Zustand „an". Bewusst ein gedecktes Gruen: das Blau
     ist die Akzentfarbe der Marke, ein Signalgruen daneben wuerde schreien. */
  --schalter-an: #3F8E62;
  /* Milchglas. EINE Definition fuer alle Flaechen, die ueber dem Partikelnetz
     liegen (Briefing-Box, Schlagzeile, Einordnung). Wer die Lesbarkeit
     nachjustieren will, aendert es hier und nirgends sonst. */
  --glas-flaeche: rgba(255,255,255,.72);
  --glas-blur:    3px;
  /* Polster der randlosen Flaechen, und zugleich der NEGATIVE Aussenabstand.
     Es muss deutlich kleiner bleiben als das Seitenpolster von `.wrap`
     (min. 1.25rem = 20px), sonst schiebt die Flaeche aus dem Inhaltsrahmen.
     Gemessen am 2026-08-21 bei 375px: Polster 12px, Rest bis zum Bildschirm
     8px — mit 1rem waeren es nur 4px, und das liest sich als Versehen.
     Auf 1280px: 24px Polster, 16px Rest. */
  --glas-polster: clamp(.75rem, 2vw, 1.5rem);
  --beige-rgb: 140,134,87;
  --hairline:  1px solid rgba(10,30,54,.12);
  --shadow-card: 0 10px 32px rgba(10,30,54,.08), 0 2px 8px rgba(10,30,54,.05);
  --shadow-lift: 0 18px 48px rgba(10,30,54,.13), 0 4px 12px rgba(10,30,54,.06);

  --font-head: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --max-w:     1080px;

  /* Abstands-Skala (fluid) */
  --s-1: clamp(.5rem, 1vw, .75rem);
  --s-2: clamp(1rem, 2vw, 1.5rem);
  --s-3: clamp(1.75rem, 3.5vw, 2.75rem);
  --s-4: clamp(3rem, 6vw, 5rem);
  --s-5: clamp(4.5rem, 10vw, 8rem);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:64px}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(var(--accent-rgb),.3);color:var(--text)}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}

/* Sichtbarer Fokus (Tastatur) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--surface);color:var(--text);
  padding:.6rem 1rem;border:var(--hairline);border-radius:0 0 6px 0;
  font-family:var(--font-mono);font-size:.8rem;
}
.skip-link:focus{left:0}

/* Mono-Label (Kicker, Kapitelnummern, Meta) */
.mono-label{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* Wiederverwendbarer Seiten-Header (Unterseiten) */
.page-head{padding-top:calc(64px + var(--s-4));padding-bottom:var(--s-3)}
.page-head h1{
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(2rem, 1.4rem + 3vw, 3.2rem);
  line-height:1.1;letter-spacing:-.015em;margin-top:var(--s-1);
}
.page-head .lead{margin-top:var(--s-2);color:var(--text-dim);max-width:60ch;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem)}
.section{padding-block:var(--s-4)}
.prose{max-width:70ch}
.prose h2{font-family:var(--font-head);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);
  margin:var(--s-3) 0 var(--s-1);letter-spacing:-.01em}
.prose h3{font-family:var(--font-head);font-weight:600;font-size:1.2rem;margin:var(--s-2) 0 .4rem}
.prose p{color:var(--text-dim);margin-bottom:1rem}
.prose ul,.prose ol{color:var(--text-dim);margin:0 0 1rem 1.2rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.4)}
.prose strong{color:var(--text)}
/* Der Datenschutz nennt den Namen des Sitzungs-Cookies. Ohne diese Regel steht
   dort die Browser-Standardschrift mitten im Fliesstext. */
.prose code{font-family:var(--font-mono);font-size:.88em;background:rgba(10,30,54,.06);
  padding:.1em .35em;border-radius:4px}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  border-bottom:1px solid transparent;
  background:transparent;
  transition:background .35s ease, border-color .35s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom:var(--hairline);
  backdrop-filter:blur(8px);
}
.header-grid{
  max-width:var(--max-w);
  margin-inline:auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
  height:64px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}
.header-nav{
  display:flex;
  gap:clamp(1rem,2.5vw,2rem);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.header-nav.nav-right{justify-content:flex-end}
.header-nav a{
  color:var(--text-dim);
  padding:.35rem 0;
  border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.header-nav a:hover,.header-nav a[aria-current="page"]{color:var(--accent);border-bottom-color:rgba(var(--accent-rgb),.5)}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  white-space:nowrap;
}
.brand-badge{
  width:40px;height:40px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid rgba(var(--accent-rgb),.45);
}
.brand-badge img{width:100%;height:100%;object-fit:cover;object-position:center top}

.nav-toggle{
  display:none;
  background:none;
  border:var(--hairline);
  border-radius:4px;
  width:40px;height:40px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  justify-self:end;
}
.nav-toggle span{
  display:block;
  width:16px;height:1.5px;
  background:var(--accent);
  position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;height:1.5px;
  background:var(--accent);
}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}

/* ==========================================================================
   MOBILE-NAV — Vollflächen-Overlay
   ========================================================================== */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:120;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  padding:clamp(1.25rem,4vw,2.5rem);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav-top{
  display:flex;
  justify-content:flex-end;
  height:64px;
  align-items:center;
}
.mobile-nav-close{
  background:none;border:var(--hairline);border-radius:4px;
  width:40px;height:40px;color:var(--accent);
  font-size:1.4rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-top:var(--s-3);
}
.mobile-nav-links a{
  font-family:var(--font-head);
  font-weight:500;
  font-size:1.7rem;
  letter-spacing:-.01em;
  color:var(--text);
  padding:.7rem 0;
  border-bottom:var(--hairline);
  transition:color .2s ease;
}
.mobile-nav-links a:hover,.mobile-nav-links a[aria-current="page"]{color:var(--accent)}
.mobile-nav-links a.is-agent{
  color:var(--accent);
  display:flex;align-items:center;gap:.6rem;
  border-bottom:none;margin-top:var(--s-2);
  font-size:1.3rem;
}
.mobile-nav-links a.is-agent .m-badge{
  width:34px;height:34px;border-radius:50%;background:#E8ECF1;
  border:1px solid rgba(var(--accent-rgb),.35);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.mobile-nav-links a.is-agent .m-badge img{height:22px;width:auto;object-fit:contain}
.mobile-nav-links a.is-agent small{
  display:block;font-family:var(--font-mono);font-size:.7rem;
  color:var(--text-dim);text-transform:none;letter-spacing:.02em;font-weight:400;
}
body.nav-locked{overflow:hidden}

@media (max-width:768px){
  .header-grid{grid-template-columns:40px 1fr 40px;gap:.5rem}
  .header-nav{display:none}
  /* Brand explizit in die Mittelspalte, sonst rutscht sie in die 40px-Randspalte
     und „STAHL" wird abgeschnitten. */
  .brand{grid-column:2;justify-self:center;font-size:.8rem;letter-spacing:.12em;gap:.45rem}
  .brand-badge{width:30px;height:30px}
  .nav-toggle{display:flex;grid-column:3}
}
@media (min-width:769px){
  .mobile-nav{display:none}
}

/* ==========================================================================
   CTA-BUTTON
   Ein Ort fuer den Pillen-Button mit Schildi-Zeichen. Stand bis 2026-08-20 nur
   im Scoped-Style von `projekte/[slug].astro` und wurde beim zweiten Verwender
   (Kopf der Startseite) hierher gezogen: ein Fakt, ein Ort.
   ========================================================================== */
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:var(--s-2);
  padding:.8rem 1.5rem;
  border:1px solid rgba(var(--accent-rgb),.45);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  transition:background .3s, border-color .3s;
}
button.cta-btn{background:none;cursor:pointer}
.cta-btn:hover{background:rgba(var(--accent-rgb),.14);border-color:var(--accent)}
.cta-btn .badge{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:26px;height:26px;margin-left:-.4rem;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:50%;
  background:#e8ecf1;
}
.cta-btn .badge img{height:16px;width:auto;object-fit:contain}

/* Leises Nebenziel neben dem Hauptbutton. */
.cta-btn-leise{border-color:rgba(10,30,54,.16);color:var(--text-dim)}
.cta-btn-leise:hover{
  background:rgba(var(--accent-rgb),.07);
  border-color:rgba(var(--accent-rgb),.45);
  color:var(--text);
}
.cta-reihe{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(.75rem,2vw,1.5rem)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:var(--hairline);
}
/* Der Canvas sitzt im Emblem, nicht mehr hinter dem ganzen Kopf. Das
   Seitenverhaeltnis ist das der Kapitel-Diagramme (4:3), damit der Block als
   Bild derselben Familie gelesen wird.
   ⚠️ Die Pixelmasse setzt `site.js` (mal `devicePixelRatio`) — hier steht nur
   die Darstellungsgroesse. Beides zu setzen waere ein Widerspruch. */
#hero-canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:6rem;
  padding-bottom:5.5rem;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:var(--s-2);
}
.hero-kicker::before{
  content:"";
  width:28px;height:1px;
  background:var(--accent);
}
.hero h1{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(2.3rem, 1.4rem + 4.8vw, 4.4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin-bottom:var(--s-3);
}

/* Unter der Schlagzeile zwei Spalten: Einordnung und Briefing. Aufteilung und
   Rinne bewusst dieselben wie bei den Kapiteln weiter unten (`.chapter`), damit
   der Kopf im gleichen Raster sitzt wie der Rest der Seite. */
/* ---- Milchglas ohne Rand -------------------------------------------------
   Fuer Text ueber dem Partikelnetz. Das Netz zeichnet feine Linien, die durch
   Buchstaben liefen und das Lesen unruhig machten (Befund Thomas, 2026-08-21).

   Kein Rand: Die Flaeche soll die Schrift traegerlos abheben, nicht als Kasten
   auftreten. Deshalb auch das Polster plus der gleich grosse NEGATIVE
   Aussenabstand — die Flaeche greift ueber den Text hinaus, waehrend die
   Schrift selbst genau am Inhaltsrahmen ausgerichtet bleibt. Ohne diesen Trick
   stuende die Schlagzeile eingerueckt, waehrend die Kapitel darunter am Rahmen
   kleben.

   `backdrop-filter` ist nicht ueberall verfuegbar. Der Rueckfall ist die
   halbdurchsichtige Flaeche allein; sie traegt den Zweck (Lesbarkeit) schon zum
   guten Teil, nur weniger weich. Deshalb bewusst kein `@supports`-Zweig mit
   Ersatzgestaltung. */
.glas{
  background:var(--glas-flaeche);
  backdrop-filter:blur(var(--glas-blur));
  border-radius:12px;
  padding:var(--glas-polster);
  margin-inline:calc(-1 * var(--glas-polster));
}
/* Das letzte Element bringt seinen eigenen Abstand mit. Innen ist der unnoetig
   und liesse die Flaeche unten leer auslaufen. */
.glas > :last-child{margin-bottom:0}
/* Der Abstand zum Zweispalter darunter kam bisher vom unteren Rand der H1. Den
   nimmt die Regel oben weg, also traegt ihn jetzt die Flaeche selbst. */
.hero-titel{margin-bottom:var(--s-3)}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.hero-sub{
  max-width:56ch;
  color:var(--text-dim);
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  margin-bottom:var(--s-3);
}

/* Briefing-Karte. Flache Haarlinie ohne Schatten (Design-System): die Karte
   liegt im Inhalt, sie schwebt nicht. */
/* ---- Emblem im Kopf der Startseite --------------------------------------
   Steht dort, wo bis 2026-08-21 die Briefing-Box war. Das Briefing ist ueber
   die schwebende Leiste dauerhaft erreichbar, und im Kopf verweisen die Texte
   darauf (Entscheidung Thomas) — ein zweiter Kasten dafuer war entbehrlich.

   `.glas` liefert Flaeche, Polster und den negativen Aussenabstand (siehe
   dort). Hier kommt nur die Stapelung dazu: das Netz als Grund, der Schriftzug
   darueber. */
.hero-emblem{display:grid}
/* Beide Kinder in DIESELBE Rasterzelle: der Partikelblock und der Schriftzug
   darueber. Das ist der Grund fuer das Raster — kein `position:absolute`.
   Absolut gesetzt waere der Canvas aus dem Fluss, und die Flaeche haette keine
   Hoehe mehr; ausserdem holt sich ein Canvas (wie jedes ersetzte Element) seine
   Hoehe aus dem Seitenverhaeltnis, nicht aus `inset`. Im Raster bestimmt der
   Block die Hoehe und alles passt von selbst. */
.hero-emblem > *{grid-area:1 / 1}
.hero-emblem .emblem-schrift{place-self:center}
/* Die Knoten liegen im Markup NACH den Verbindungen und deshalb darueber. Mit
   Fuellfarbe verdecken sie die Linienenden — das ersetzt das muehsame Kuerzen
   jeder einzelnen Linie auf den Knotenrand. */
.hero-emblem .knoten{fill:var(--surface)}

/* Der Schriftzug. Zwei Zeilen, und das ist kein Geschmack: „AI", „AGENTIC" und
   „HUMAN" sind unterschiedlich breit. Stuenden sie in derselben Zeile wie
   „Leadership", sprang das feste Wort bei jedem Wechsel zur Seite. */
.emblem-schrift{
  position:relative;
  text-align:center;
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
  margin:0;
}
.emblem-fest{
  display:block;
  margin-top:.15em;
  font-size:clamp(1.15rem, .9rem + 1.1vw, 1.7rem);
  color:var(--text);
}

/* Das Fenster fuer EINE Zeile. `overflow:hidden` macht daraus den Schlitz, in
   dem die Spur senkrecht durchlaeuft.
   ⚠️ Die Hoehe (1em) MUSS zur Schrittweite der Keyframes passen, sonst steht
   zwischen zwei Woertern ein Streifen des naechsten. */
.wechsler{
  display:block;
  height:1em;
  overflow:hidden;
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  color:var(--accent);
}
.wechsler-spur{
  display:block;
  animation:wortwechsel 10.5s infinite;
}
.wechsler-spur > span{display:block;height:1em}
/* Das erste Wort steht am Ende ein zweites Mal. Dadurch endet die Bewegung auf
   demselben Bild, mit dem sie beginnt — der Sprung zurueck auf Position 0 ist
   deshalb unsichtbar. Ohne diese Dopplung ruckelt jeder Durchlauf. */
@keyframes wortwechsel{
  0%,  27%  {transform:translateY(0)}
  33%, 60%  {transform:translateY(-1em)}
  66%, 93%  {transform:translateY(-2em)}
  100%      {transform:translateY(-3em)}
}

/* ⚠️ Unter `prefers-reduced-motion` schaltet das Design ALLE Animationen ab
   (`*{animation:none !important}`, Abschnitt REDUCED MOTION weiter unten). Ohne
   diese Regel bliebe die Spur auf Position 0 stehen, und der Schlitz zeigte nur
   noch „AI" — „AGENTIC" und „HUMAN" waeren fuer diese Leser verloren. Deshalb
   wird der Schlitz hier geoeffnet: die drei Woerter stehen dann untereinander,
   die Dopplung entfaellt. */
@media (prefers-reduced-motion: reduce){
  .wechsler{height:auto;overflow:visible;font-size:clamp(1.4rem,1rem + 1.4vw,2rem)}
  .wechsler-spur{transform:none}
  .wechsler-spur .dopplung{display:none}
}
.hero-scrollhint{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--text-faint);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.hero-scrollhint .dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* ==========================================================================
   STORY — Kapitel
   ========================================================================== */
.story{
  /* sehr subtiles Punktraster */
  background-image:radial-gradient(rgba(var(--accent-rgb),.05) 1px, transparent 1px);
  background-size:28px 28px;
  padding-block:var(--s-4) 0;
}
.story-intro{
  padding-block:var(--s-4) var(--s-2);
}
.story-intro .mono-label{color:var(--text-faint)}

.chapter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  padding-block:var(--s-4);
}
.chapter + .chapter{border-top:var(--hairline)}
.chapter:nth-of-type(even) .chapter-text{order:2}
.chapter:nth-of-type(even) .chapter-figure{order:1}

.chapter-label{
  display:block;
  margin-bottom:var(--s-1);
}
.chapter h2{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.55rem, 1.2rem + 1.8vw, 2.3rem);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:var(--s-2);
}
.chapter p{
  color:var(--text-dim);
  max-width:52ch;
}

/* Karte fuer Bilder: Haarlinie, deckende Flaeche, Schatten. Traegt die
   Story-Grafiken UND den Partikelblock im Kopf (Vorgabe Thomas, 2026-08-21:
   „mit den Schatten abgehoben und duennem Rand wie bei den story-Grafiken").
   Eine Definition, zwei Nutzer — sonst driften Rand und Schatten auseinander. */
.chapter-figure,
.hero-emblem{
  border:1px solid rgba(10,30,54,.06);
  background:var(--surface);
  border-radius:10px;
  box-shadow:var(--shadow-card);
  padding:clamp(1rem, 2.5vw, 1.75rem);
}
/* Ausnahme fuer das Emblem: kleineres Polster. Grund: Die SVGs der Story tragen
   in ihrer viewBox schon eigenen Weissraum, der Canvas nicht. Bei gleichem
   Polster wirkte der Wuerfel deshalb kleiner als die Diagramme daneben.
   ⚠️ Diese Regel MUSS hinter der gemeinsamen stehen — gleiche Spezifitaet,
   also entscheidet die Reihenfolge. Andersherum bleibt sie wirkungslos
   (passiert am 2026-08-21). Rand, Radius, Schatten und Flaeche bleiben gleich. */
.hero-emblem{padding:clamp(.6rem, 1.4vw, 1.1rem)}
.chapter-figure svg{
  width:100%;
  height:auto;
  display:block;
}

/* SVG-Line-Art: Grundstil + Zeichnen beim Einscrollen */
.diagram{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Zeichen-Animation nur mit JS (siehe Hinweis bei .reveal) — ohne JS sind die Diagramme
   samt Beschriftung sofort vollständig da. */
html.js .diagram .d{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.2,1);
  transition-delay:calc(var(--i, 0) * .16s);
}
/* MUSS `html.js` tragen: sonst ist der Gate-Selektor oben spezifischer und der Endzustand
   greift nie — die Diagramme bleiben ungezeichnet, obwohl das JS `.drawn` setzt. */
html.js .diagram.drawn .d{stroke-dashoffset:0}
.diagram .soft{stroke:rgba(var(--accent-rgb),.35);stroke-width:1}
.diagram .beige{stroke:var(--beige)}
.diagram .fine{stroke-width:1}
.diagram .dash{
  stroke-dasharray:.02 .015;
  stroke-dashoffset:0;
  transition:opacity .8s ease;
  transition-delay:calc(var(--i, 0) * .16s);
}
html.js .diagram .dash{opacity:0}
html.js .diagram.drawn .dash{opacity:1}
.diagram .lbl{
  fill:rgba(10,30,54,.75);
  stroke:none;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  transition:opacity .6s ease;
  transition-delay:1.1s;
}
.diagram .lbl-dot{
  fill:var(--accent);
  stroke:none;
  transition:opacity .6s ease;
  transition-delay:1s;
}
html.js .diagram .lbl,
html.js .diagram .lbl-dot{opacity:0}
html.js .diagram.drawn .lbl,
html.js .diagram.drawn .lbl-dot{opacity:1}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .hero-emblem{max-width:26rem}
  .chapter{grid-template-columns:1fr;gap:var(--s-3)}
  .chapter:nth-of-type(even) .chapter-text{order:1}
  .chapter:nth-of-type(even) .chapter-figure{order:2}
}

/* ==========================================================================
   DER BRUCH + MISSION
   ========================================================================== */
.bruch{
  border-top:var(--hairline);
  border-bottom:var(--hairline);
  background:#F5F7FA;
  padding-block:var(--s-5);
  text-align:left;
}
.bruch-line{
  width:100%;
  height:1px;
  background:var(--accent);
  transform-origin:left center;
  transition:transform 1.4s cubic-bezier(.45,0,.2,1);
  margin-bottom:var(--s-3);
}
/* Eingeklappt nur mit JS (siehe Hinweis bei .reveal) — ohne JS ist die Linie sofort da. */
html.js .bruch-line{transform:scaleX(0)}
.bruch.active .bruch-line{transform:scaleX(1)}
.bruch p.bruch-text{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(1.55rem, 1rem + 3vw, 2.9rem);
  line-height:1.25;
  letter-spacing:-.01em;
  max-width:26ch;
}
.bruch p.bruch-text em{
  font-style:normal;
  color:var(--accent);
}
.mission{
  margin-top:var(--s-3);
  display:flex;
  align-items:baseline;
  gap:1rem;
  flex-wrap:wrap;
}
.mission p{
  color:var(--text-dim);
  max-width:60ch;
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
}
.mission p strong{color:var(--text);font-weight:600}

/* ==========================================================================
   WEGWEISER / TILE-GRID (auch für Rubrik-Listen wiederverwendet)
   ========================================================================== */
.wegweiser{padding-block:var(--s-5)}
.wegweiser-head{margin-bottom:var(--s-3)}
.wegweiser-head h2{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.55rem, 1.2rem + 1.8vw, 2.3rem);
  margin-top:var(--s-1);
}
.tile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1rem, 2vw, 1.5rem);
}
.tile{
  position:relative;
  display:block;
  border:1px solid rgba(10,30,54,.06);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow-card);
  padding:clamp(1.5rem, 3vw, 2.25rem);
  padding-top:clamp(2.5rem, 4vw, 3.25rem);
  transition:border-color .3s ease, transform .3s ease;
}
.tile:hover{
  border-color:rgba(var(--accent-rgb),.4);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
}
.tile-index{
  position:absolute;
  top:1rem;right:1.15rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--text-faint);
  transition:color .3s ease;
}
.tile:hover .tile-index{color:var(--accent)}
.tile h3{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.25rem;
  margin-bottom:.5rem;
}
.tile p{color:var(--text-dim);font-size:.95rem}
.tile-arrow{
  display:inline-block;
  margin-top:1.1rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--accent);
  opacity:.6;
  transition:opacity .3s ease, transform .3s ease;
}
.tile:hover .tile-arrow{opacity:1;transform:translateX(4px)}

@media (max-width:680px){
  .tile-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{padding-block:var(--s-5);padding-top:0}
.faq-head{margin-bottom:var(--s-3)}
.faq-head h2{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.55rem, 1.2rem + 1.8vw, 2.3rem);
  margin-top:var(--s-1);
}
.faq-list{
  border-top:var(--hairline);
  max-width:820px;
}
.faq-item{
  border-bottom:var(--hairline);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.2rem .25rem;
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(1.02rem, .95rem + .4vw, 1.18rem);
  color:var(--text);
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item .faq-sign{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:1.1rem;
  line-height:1.3;
  color:var(--accent);
  transition:transform .3s ease;
}
.faq-item[open] .faq-sign{transform:rotate(45deg)}
.faq-item .faq-body{
  padding:0 .25rem 1.4rem 2rem;
  color:var(--text-dim);
  font-size:.97rem;
  max-width:70ch;
}
.faq-item .faq-body p + p{margin-top:.7rem}
.faq-item .faq-body a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.4)}
/* Inline-Links in Story-Kapiteln */
.chapter p a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.4)}
@media (max-width:680px){
  .faq-item .faq-body{padding-left:.25rem}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  border-top:var(--hairline);
  padding-block:var(--s-3);
  /* Platz für den Floating-Button — verdeckt nie Inhalt */
  padding-bottom:calc(var(--s-3) + 5.5rem);
}
.footer-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.75rem;
  align-items:center;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--text-faint);
}
.footer-row a{
  color:var(--text-dim);
  border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.footer-row a:hover{color:var(--accent);border-bottom-color:rgba(var(--accent-rgb),.5)}

/* ==========================================================================
   FLOATING BUTTON — Agent Area
   ========================================================================== */
/* --------------------------------------------------------------------------
   SCHWEBENDE LEISTE — zwei Ziele mit dem Schildi-Zeichen als Scharnier.
   Links "Bibo fragen" in Schriftgroesse, rechts der Briefing als
   Nebenziel. Schatten ist hier erlaubt: die Leiste schwebt ueber dem Inhalt
   (dokumentierte Ausnahme im Design-System).
   -------------------------------------------------------------------------- */
.agent-leiste{
  position:fixed;
  bottom:1.4rem;
  left:50%;
  transform:translateX(-50%);
  z-index:90;
  /* Feste, gleiche Breite je Haelfte. Inhaltsbemessene Spalten (`auto auto auto`)
     liessen die Leiste unsymmetrisch aussehen, weil das kleiner gesetzte
     "Briefing abonnieren" trotzdem breiter baute als "Bibo fragen".
     13rem = 208px: die laengere Beschriftung misst gerendert 153px, bleibt also
     mit den Polstern im Mass. Wer eine Beschriftung verlaengert, prueft dieses
     Mass mit nach.
     Mobil steht hier `1fr auto 1fr`: dort spannt die Leiste zwischen beiden
     Raendern, ein festes Mass wuerde sie sprengen. */
  display:grid;
  grid-template-columns:13rem auto 13rem;
  align-items:stretch;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:999px;
  /* Gefuellt im Grau, das vorher nur hinter dem Zeichen lag. Als weisse Pille
     setzte sich die Leiste auf mobil nicht vom weissen Seitengrund ab (Befund
     Thomas, 2026-08-20). Das Zeichen kehrt das Verhaeltnis um und wird der
     weisse Kreis. */
  background:rgba(232,236,241,.94);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  max-width:calc(100vw - 2rem);
}

.agent-leiste .al-teil{
  border:0;
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
  color:var(--text);
  /* Gemeinsame Grundlage: gleiche Polster, zentriert. Die Hierarchie macht die
     Schrift, nicht das Raster. */
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(.95rem,.85rem + .4vw,1.15rem);
  letter-spacing:-.01em;
  /* Die feste Spaltenbreite setzt den Abstand, das Polster nur den Mindestrand. */
  padding:.7rem .75rem;
  text-align:center;
  min-width:0;
  transition:background .25s ease, color .25s ease;
}
.agent-leiste .al-teil:hover{background:rgba(var(--accent-rgb),.14)}
.agent-leiste .al-teil:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-3px;
  border-radius:999px;
}

/* Nebenziel: das Briefing. Kleiner und in Kapitaelchen, damit das Hauptziel
   "Bibo fragen" hervortritt. Traegt den Akzent. */
.agent-leiste .al-rechts{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}

/* Das Zeichen in der Mitte: dekorativ, kein Klickziel. Die Haarlinien links und
   rechts trennen die beiden Ziele sichtbar, damit niemand daneben klickt. */
/* Weisses Feld ueber die volle Hoehe der Leiste. Als Kreis (kurz am 2026-08-20)
   sass das Zeichen frei in der Mitte und trennte die beiden Ziele schwaecher;
   das durchgehende Feld ist der bessere Trenner. Es streckt sich mit dem Grid,
   deshalb KEIN `align-self` und keine feste Hoehe. Haarlinien braucht es nicht:
   Weiss auf Grau trennt selbst. */
.agent-leiste .al-zeichen{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:0 .75rem;
  background:#fff;
}
.agent-leiste .al-zeichen img{height:26px;width:auto;object-fit:contain}

/* Mobil: die Leiste haengt an BEIDEN Raendern, statt zentriert zu sein und mit
   `max-width` ueber ihren eigenen Rand hinauszulaufen. Genau das hat sie vorher
   rechts abgeschnitten: die Kinder liefen aus der Box und `overflow:hidden` hat
   sie gekappt. */
@media (max-width:560px){
  .agent-leiste{
    bottom:.9rem;
    left:.75rem;right:.75rem;
    transform:none;
    max-width:none;
    grid-template-columns:1fr auto 1fr;
  }
  .agent-leiste .al-teil{font-size:.8rem;padding:.6rem .5rem}
  .agent-leiste .al-rechts{font-size:.64rem;letter-spacing:.06em}
  .agent-leiste .al-zeichen{padding:0 .5rem}
  .agent-leiste .al-zeichen img{height:22px;width:auto}
}
@media (max-width:360px){
  .agent-leiste .al-teil{font-size:.72rem;padding:.6rem .35rem}
  .agent-leiste .al-rechts{font-size:.58rem;letter-spacing:.04em}
}
.agent-area:hover{
  background:rgba(var(--accent-rgb),.14);
  border-color:var(--accent);
}
.agent-area:hover .aa-sub{color:var(--text)}
@media (max-width:560px){
  .agent-area .aa-sep,
  .agent-area .aa-sub{display:none}
}

/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */
/* WICHTIG — sichtbar ist der Default, ausgeblendet wird NUR mit JavaScript.
   Das Gate `html.js` setzt ein Inline-Skript im <head> des BaseLayout. Vorher stand hier
   `.reveal{opacity:0}` ohne Bedingung: dann liegt der komplette Textinhalt (auf der
   Startseite ~1500 Wörter Story) für JS-lose Clients, Reader-Modi und den rendernden
   Googlebot auf opacity:0. Diese Reihenfolge nie umdrehen. */
html.js .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
html.js .reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* Selektoren mit `html.js` gespiegelt, damit sie das JS-Gate oben überstimmen. */
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .diagram .d{stroke-dashoffset:0;transition:none}
  html.js .diagram .dash,html.js .diagram .lbl,html.js .diagram .lbl-dot{opacity:1;transition:none}
  html.js .bruch-line{transform:scaleX(1);transition:none}
  .tile,.tile:hover{transform:none}
  .mobile-nav{transition:none}
  *{transition-duration:.01ms !important;animation:none !important}
}

/* ==========================================================================
   BIBO — überlagerndes Chatfenster (aus dem Banner unten)
   Design folgt dem hellen Theme: Haarlinien, kein 3D. Schatten nur am Fenster
   selbst, weil es wie der Floating-Button über dem Inhalt schwebt.
   ========================================================================== */

/* `hidden` muss gewinnen: die Klassen unten setzen display:flex und würden das
   Attribut sonst überstimmen — das Fenster stünde dauerhaft offen. */
[hidden]{display:none !important}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Der Banner ist jetzt ein <button> — Browser-Eigenheiten glattziehen. */
button.agent-area{line-height:1.2;font:inherit;font-family:var(--font-mono);
  font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}

.bibo-huelle{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  padding:1rem 1rem 1.4rem;
  background:rgba(10,30,54,.34);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease;
}
.bibo-huelle.is-sichtbar{opacity:1}

/* BEWUSST KEIN `overflow:hidden` auf body, wenn das Fenster offen ist.
   Das hat die Seitenanimationen zerstört: ohne Scrollleiste ändert sich die
   Viewport-Breite, das feuert `resize`, und der Handler in site.js setzt dort
   `canvas.width` neu — was die Zeichenfläche leert und das Partikelfeld
   zurücksetzt. Beim Öffnen und beim Schließen. Dazu sprang das Layout um die
   Breite der Leiste.
   Statt Scroll-Sperre reicht `overscroll-behavior` am Gesprächsverlauf: es
   verhindert, dass sich das Scrollen aus dem Chat auf die Seite fortsetzt. */

.bibo-fenster{
  width:100%;max-width:640px;
  /* `dvh`, nicht `vh`: auf Mobilgeraeten ist `100vh` die Hoehe OHNE die
     eingeblendete Adressleiste und damit groesser als das Sichtbare. Ein
     unten ausgerichtetes Fenster schiebt seinen Kopf dann nach oben aus dem
     Bild — samt Schliessknopf. */
  max-height:min(76dvh,720px);
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid rgba(var(--accent-rgb),.30);
  border-radius:18px;
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  transform:translateY(12px);
  transition:transform .22s ease;
}
.bibo-huelle.is-sichtbar .bibo-fenster{transform:translateY(0)}

/* ---------- Kopf ---------- */
.bibo-kopf{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;
  border-bottom:var(--hairline);
  flex-shrink:0;
  /* Bleibt oben stehen, auch wenn der Inhalt darunter scrollt. Der
     Schliessknopf darf nie wegscrollen. */
  position:sticky;top:0;z-index:2;
  background:var(--surface);
}
.bibo-marke{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0}
/* Das Zeichen ist 2304x1856, also BREITER als hoch. Quadratische Masse
   (bis 2026-08-20 `width:28;height:28` ohne `object-fit`) stauchen es
   horizontal. Deshalb ueberall nur die Hoehe setzen. */
.bibo-marke img{flex-shrink:0;height:28px;width:auto}
.bibo-marke strong{
  display:block;font-family:var(--font-head);font-size:1rem;
  font-weight:600;color:var(--text);line-height:1.2;
}
.bibo-marke small{
  display:block;font-size:.74rem;color:var(--text-faint);line-height:1.3;
}

.bibo-werkzeuge{border:0;padding:0;margin:0;display:flex;gap:0;flex-shrink:0}
.bibo-werkzeuge label{cursor:pointer}
.bibo-werkzeuge input{position:absolute;opacity:0;pointer-events:none}
.bibo-werkzeuge span{
  display:block;
  padding:.3rem .6rem;
  border:1px solid rgba(10,30,54,.16);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--text-faint);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.bibo-werkzeuge label:first-child span{border-radius:999px 0 0 999px;border-right:0}
.bibo-werkzeuge label:last-child span{border-radius:0 999px 999px 0}
.bibo-werkzeuge input:checked + span{
  background:rgba(var(--accent-rgb),.10);
  border-color:rgba(var(--accent-rgb),.45);
  color:var(--accent);
}
.bibo-werkzeuge input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.bibo-schliessen{
  flex-shrink:0;width:32px;height:32px;
  border:1px solid rgba(10,30,54,.14);border-radius:50%;
  background:transparent;color:var(--text-dim);
  font-size:1.15rem;line-height:1;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.bibo-schliessen:hover{background:rgba(10,30,54,.05);color:var(--text)}

/* ---------- Anmeldung ---------- */
/* `overflow-y` statt Beschneiden: das Fenster hat `overflow:hidden`, ein langes
   Formular waere sonst unten abgeschnitten und der Absendeknopf unerreichbar.
   `overscroll-behavior:contain` haelt das Scrollen im Blatt. */
.bibo-login{
  padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;
  overflow-y:auto;overscroll-behavior:contain;
}
.bibo-login-text{
  margin:0;font-size:.88rem;line-height:1.6;color:var(--text-dim);
}
/* Bewusst per :not() statt einer Liste von Typen: eine Aufzaehlung
   (text, password) hat beim Hinzufuegen des E-Mail-Feldes genau dieses vergessen,
   und es fiel auf die Browser-Vorgabe zurueck. So kann kein Feldtyp mehr durchfallen. */
.bibo-login input:not([type=checkbox]){
  padding:.7rem .9rem;
  border:1px solid rgba(10,30,54,.18);border-radius:10px;
  font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:#FBFCFD;
}
.bibo-login input:not([type=checkbox]):focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.bibo-login button,.bibo-eingabezeile button{
  padding:.7rem 1.1rem;
  border:1px solid var(--accent);border-radius:10px;
  background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:opacity .2s ease;
}
.bibo-login button:hover,.bibo-eingabezeile button:hover{opacity:.88}
.bibo-login button:disabled,.bibo-eingabezeile button:disabled{opacity:.5;cursor:default}

/* ---------- Gespräch ---------- */
.bibo-gespraech{flex:1;min-height:0;overflow:hidden;display:flex}
.bibo-log{
  flex:1;overflow-y:auto;
  overscroll-behavior:contain;   /* Scrollen läuft nicht auf die Seite über */
  padding:1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:.9rem;
}
.bibo-blase{max-width:88%;font-size:.93rem;line-height:1.62}
.bibo-blase p{margin:0 0 .55rem}
.bibo-blase p:last-child{margin-bottom:0}

.bibo-blase.is-mensch{
  align-self:flex-end;
  padding:.6rem .9rem;
  border-radius:14px 14px 4px 14px;
  background:rgba(var(--accent-rgb),.09);
  border:1px solid rgba(var(--accent-rgb),.22);
  color:var(--text);
}
.bibo-blase.is-bibo{
  align-self:flex-start;
  padding-left:.85rem;
  border-left:2px solid rgba(var(--accent-rgb),.45);
  color:var(--text-dim);
}
.bibo-blase.is-fehler{border-left-color:#B4553F;color:#8C3F2C}

.bibo-tippt{
  font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;color:var(--text-faint);
}
.bibo-tippt::after{content:' …';animation:bibo-punkte 1.4s ease-in-out infinite}
@keyframes bibo-punkte{0%,100%{opacity:.35}50%{opacity:1}}

.bibo-meta{
  display:block;margin-top:.5rem;
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.06em;color:var(--text-faint);
}

/* ---------- Eingabe ---------- */
.bibo-eingabezeile{
  display:flex;gap:.6rem;align-items:flex-end;
  padding:.85rem 1rem;
  border-top:var(--hairline);
  flex-shrink:0;
}
.bibo-eingabezeile textarea{
  flex:1;resize:none;
  padding:.65rem .85rem;
  border:1px solid rgba(10,30,54,.18);border-radius:10px;
  font-family:var(--font-body);font-size:.94rem;line-height:1.5;
  color:var(--text);background:#FBFCFD;
  max-height:140px;
}

/* WAEHREND DES COOLDOWNS ist das Eingabefeld selbst der Balken (Idee Thomas,
   2026-08-20). Der Rest-Anteil steht als `--rest` (0..1) am Element und wird von
   `bibo.js` per Zeitgeber gesetzt — NICHT per CSS-Transition: unter
   `prefers-reduced-motion` schaltet das Design alle Transitions ab
   (`*{transition-duration:.01ms !important}`), und ein eingefrorener
   Fortschrittsbalken waere schlimmer als keiner.
   `background-size` statt eines zweiten Elements: ein Overlay ueber dem Feld
   wuerde das Tippen blockieren, und genau das soll waehrend der Wartezeit
   moeglich bleiben. Der harte Farbstopp macht aus dem Verlauf eine Kante. */
.bibo-eingabezeile textarea.is-cooldown{
  background-image:linear-gradient(
    to right,
    rgba(var(--accent-rgb),.16) 0,
    rgba(var(--accent-rgb),.16) 100%);
  background-repeat:no-repeat;
  background-size:calc(var(--rest, 1) * 100%) 100%;
  border-color:rgba(var(--accent-rgb),.35);
}
/* Der Platzhalter traegt waehrenddessen das Wort. Er verschwindet von selbst,
   sobald jemand die naechste Frage tippt — die Farbflaeche bleibt. */
.bibo-eingabezeile textarea.is-cooldown::placeholder{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.bibo-eingabezeile textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

.bibo-hinweis{
  margin:0;padding:0 1rem;
  font-size:.8rem;color:var(--text-faint);
}
.bibo-hinweis:empty{display:none}
.bibo-hinweis.is-fehler{color:#8C3F2C;padding-bottom:.6rem}

/* ---------- Fuß ---------- */
.bibo-fuss{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  padding:.6rem 1rem .7rem;
  border-top:var(--hairline);
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);
  flex-shrink:0;
}
/* Der Fuss traegt links einen zweizeiligen Block. `align-items:center` wuerde
   die Zeile rechts an dessen Mitte haengen; `flex-start` haelt beide oben. */
.bibo-fuss{align-items:flex-start}
.bibo-fuss a,.bibo-fuss-knopf{color:var(--accent);text-decoration:none}
.bibo-fuss-rechts{flex-shrink:0;padding-top:.15rem}

/* ---- Schalter „Fragen spenden" -------------------------------------------
   Die Beschriftung ist bewusst NICHT in Versalien wie der Rest des Fusses: sie
   ist ein Satz an den Leser, keine Rubrik. Deshalb hier zurueckgesetzt. */
.bibo-spende{
  display:flex;align-items:flex-start;gap:.5rem;
  cursor:pointer;min-width:0;
  text-transform:none;letter-spacing:0;
  font-family:var(--font-body);
}
.bibo-spende-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.bibo-spende-aufruf{font-size:.78rem;color:var(--text-dim);line-height:1.25}
.bibo-spende-frist{font-size:.7rem;color:var(--text-faint);line-height:1.25}

/* Das echte Feld bleibt bedienbar und fokussierbar, nur unsichtbar. KEIN
   `display:none` und kein `visibility:hidden` — beides nimmt ihm den Fokus und
   damit die Tastaturbedienung. */
.bibo-spende input{
  position:absolute;width:1px;height:1px;
  opacity:0;margin:0;pointer-events:none;
}
.bibo-schalter-wippe{
  position:relative;flex-shrink:0;
  width:2.1rem;height:1.15rem;margin-top:.1rem;
  border-radius:999px;
  background:rgba(10,30,54,.22);          /* aus: grau */
  transition:background-color .18s ease;
}
.bibo-schalter-wippe::after{
  content:'';position:absolute;top:2px;left:2px;
  width:calc(1.15rem - 4px);height:calc(1.15rem - 4px);
  border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(10,30,54,.35);
  transition:transform .18s ease;
}
.bibo-spende input:checked + .bibo-schalter-wippe{
  background:var(--schalter-an);           /* an: gruen */
}
.bibo-spende input:checked + .bibo-schalter-wippe::after{
  transform:translateX(calc(2.1rem - 1.15rem));
}
/* Der Fokus muss sichtbar sein, obwohl das Feld es nicht ist — sonst weiss
   niemand, der mit der Tastatur navigiert, wo er gerade steht. */
.bibo-spende input:focus-visible + .bibo-schalter-wippe{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* Die Wippe bewegt sich auch unter `prefers-reduced-motion` — sie ist die
   Rueckmeldung des Schalters, keine Zierde. Das globale Abschalten aller
   Transitions wuerde den Zustandswechsel sonst schlagartig machen; das ist
   hier in Ordnung, deshalb keine Sonderregel. */
.bibo-fuss a:hover,.bibo-fuss-knopf:hover{text-decoration:underline}
/* Der Weg ins Archiv oeffnet ein Fenster, ist also ein Knopf. Er soll aber wie
   der Link auf der anderen Seite aussehen. */
.bibo-fuss-knopf{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
}

/* Mobil ein Blatt von unten, KEIN Vollbild (Befund Thomas, 2026-08-20).
   Vollbild mit `height:100vh` hatte zwei Fehler zugleich: der Kopf mit dem
   Schliessknopf lag ausserhalb des Sichtbaren (siehe `dvh` oben), und es gab
   keinen freien Rand mehr, auf den man tippen kann — obwohl genau das schliesst
   (`brief.js`, `bibo.js`: Klick auf die Huelle und Escape). Wer den Knopf nicht
   fand, kam nicht zurueck.
   88dvh lassen oben einen Streifen der Seite stehen. Der zeigt, dass etwas
   darueber liegt, und ist die Flaeche zum Schliessen. */
@media (max-width:640px){
  .bibo-huelle{padding:0}
  .bibo-fenster{
    max-width:none;
    max-height:88dvh;
    border-radius:18px 18px 0 0;
    border-bottom:0;
  }
  .bibo-marke small{display:none}
  .bibo-blase{max-width:94%}
}

/* --------------------------------------------------------------------------
   WERKSTATTBRIEF — Ergänzungen im Bibo-Fenster-Stil
   -------------------------------------------------------------------------- */

/* Verweis im Fließtext, der ein Fenster öffnet. Sieht wie ein Link aus, ist aber
   ein Button — ein <a> ohne Ziel wäre für Tastatur und Screenreader falsch. */
.bibo-login button.bibo-textlink,
.bibo-textlink{
  border:0;
  border-radius:0;
  padding:0;
  background:none;
  font:inherit;
  letter-spacing:inherit;
  text-transform:none;
  color:var(--accent);
  cursor:pointer;
  border-bottom:1px solid rgba(var(--accent-rgb),.45);
}
.bibo-login button.bibo-textlink:hover,
.bibo-textlink:hover{
  border-bottom-color:var(--accent);
  background:none;
  opacity:1;
}

.bibo-zustimmung{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.82rem;line-height:1.5;color:var(--text-dim);
  cursor:pointer;
}
.bibo-zustimmung input{
  flex-shrink:0;margin-top:.2rem;
  width:16px;height:16px;
  accent-color:var(--accent);
}
.bibo-zustimmung a{
  color:var(--accent);
  border-bottom:1px solid rgba(var(--accent-rgb),.45);
}

.bibo-hinweis.is-erfolg{
  color:var(--accent);
  padding-bottom:.6rem;
  font-size:.88rem;line-height:1.6;
}

/* ============================================================== QUELLEN
   Quellenangabe unter Bibos Antwort, Vertiefungs-Hinweis und das Fenster,
   in dem ein Dokument gelesen wird. Flache Haarlinien, keine Schatten —
   dieselbe Sprache wie die Kacheln. */

.bibo-quellen{
  display:flex;flex-direction:column;gap:.35rem;
  margin-top:.9rem;padding-top:.7rem;
  border-top:var(--hairline);
}
.bibo-quellen-kopf{
  font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);
}
.bibo-quelle{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:.88rem}
.bibo-quelle small{color:var(--text-faint);font-size:.76rem;font-family:var(--font-mono)}

/* Der Vertiefungs-Hinweis ist bewusst ruhig gehalten: eine Fußnote, kein
   Werbebanner. Bibo, der in jeder zweiten Antwort verkauft, verliert die
   Glaubwürdigkeit, die ihn überhaupt lesenswert macht. */
.bibo-vertiefung{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  margin-top:.7rem;padding:.7rem .85rem;
  border:var(--hairline);border-left:2px solid rgba(var(--accent-rgb),.5);
  border-radius:6px;
  font-size:.88rem;color:var(--text-dim);
}
.bibo-vertiefung a{color:var(--accent);text-decoration:none;white-space:nowrap}
.bibo-vertiefung a:hover{text-decoration:underline}

/* Liegt über dem Bibo-Fenster, deshalb eine Stufe höher. Verstecken macht
   [hidden]{display:none !important}, siehe oben — die Hülle selbst hat nur
   opacity:0 und würde sonst als unsichtbare Klickfläche stehen bleiben. */
.quelle-huelle{z-index:210}
.quelle-huelle .bibo-marke small{display:block;color:var(--text-faint);font-size:.76rem}

.quelle-text{
  overflow-y:auto;padding:var(--s-2) var(--s-2) 0;
  color:var(--text-dim);line-height:1.7;
}
.quelle-text h2,.quelle-text h3,.quelle-text h4{
  font-family:var(--font-head);color:var(--text);
  margin:1.4rem 0 .5rem;line-height:1.25;
}
.quelle-text h2{font-size:1.15rem}
.quelle-text h3{font-size:1.02rem}
.quelle-text h4{font-size:.95rem}
.quelle-text p{margin:0 0 .85rem}
.quelle-text ul{margin:0 0 .95rem;padding-left:1.1rem}
.quelle-text li{margin-bottom:.35rem}
.quelle-text a{color:var(--accent)}
.quelle-text code{
  font-family:var(--font-mono);font-size:.85em;
  background:rgba(var(--accent-rgb),.08);padding:.1em .35em;border-radius:3px;
}

/* ================================================== VIDEO (Zwei-Klick)
   Die Vorschau holt nichts von außen, auch kein Thumbnail von YouTube.
   Erst der Klick lädt das Video über youtube-nocookie.com (scripts/video.js). */

.video{
  margin:var(--s-2) 0;border:var(--hairline);border-radius:8px;overflow:hidden;
  background:rgba(var(--accent-rgb),.04);
}
.video-start{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  width:100%;aspect-ratio:16/9;
  border:0;background:none;cursor:pointer;color:var(--text);
  font-family:var(--font-body);padding:var(--s-2);
}
.video-start:hover .video-knopf{background:var(--accent);color:#fff}
.video-titel{font-family:var(--font-head);font-weight:600;font-size:1.02rem;text-align:center}
.video-knopf{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.5);color:var(--accent);
  font-size:1.1rem;line-height:1;transition:background .2s,color .2s;
}
.video-laden{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint);
}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.video figcaption{
  padding:.55rem .8rem;border-top:var(--hairline);
  font-size:.76rem;color:var(--text-faint);font-family:var(--font-mono);
}