/* Flourishing Society · fs.css
   Übernommen aus FS_Mockup_1_Startseite_v2.html (Anleitung 4.4, Schritt 1: beim ersten
   Mockup vollständig). Entfernt: eingebettete Schrift (jetzt /assets/fonts/), Hinweisbalken.
   Am Ende: Ergänzungen, die Inline-Stile der Mockups ersetzen, plus Coming-Soon-Bauteile. */
@font-face{
  font-family:'Newsreader Variable';
  src:url("/assets/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
:root{
  /* Flächen und Tinte — Werte aus src/index.css */
  --paper:#fbfbfa; --panel:#ffffff; --paper-deep:#f2f2f0;
  --hairline:#e8e8e5; --hairline-strong:#d5d5d1;
  --ink:#23231f; --ink-soft:#5a5956; --ink-faint:#73726f;
  /* Jasmin — nur Zustände, nur Fläche */
  --mark-1:#fcf7ed; --mark-2:#fcf1de; --mark-3:#fdeac6; --mark-4:#fee1a4;
  /* Datenfarben */
  --pol-pos:#a15200; --pol-neg:#1467c2;
  --c-assumption:#966ab5; --c-narrative:#bd6062; --c-construct:#439458;
  --c-effect:#918112; --c-neutral:#6b6b64;
  /* Ergänzung Website */
  --ground:#23231f; --paper-soft:#a8a7a3;
  /* Stimmen */
  --serif:'Newsreader Variable', Newsreader, Georgia, 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  /* Skala, Website-Vergrößerung */
  --t-hero:clamp(36px,5.2vw,48px); --t-display:32px; --t-title:23px;
  --t-lead:18px; --t-body:16px; --t-ui:14px; --t-meta:12.5px; --t-micro:10px;
  --t-figure:40px;
  --lh-tight:1.2; --lh-normal:1.45; --lh-read:1.65;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --s8:96px; --s9:128px;
  /* Kopfhoehe: Modulwert, nicht handgepasst */
  --kopf:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:var(--t-body); line-height:var(--lh-read);
  font-optical-sizing:auto; font-variant-numeric:tabular-nums;
  text-rendering:optimizeLegibility;hyphens:auto;-webkit-hyphens:auto;
}
/* Raster, Modul 24: Spur 6 · Rinne 1 · Inhalt 43 = 50 Module = 1200 px.
   Text darin 27 Module = 648.  27:43 = 0,628, also 5:8 auf ein halbes Prozent genau. */
.wrap{max-width:calc(1200px + 2*var(--s6));margin:0 auto;padding:0 var(--s6)}
.grid{display:grid;grid-template-columns:144px minmax(0,1fr);gap:var(--s5)}
.rail{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-faint);
  line-height:var(--lh-normal);padding-top:6px;text-align:right}
.rail .stick{position:sticky;top:var(--kopf)}
.col > *{max-width:648px}
.col > .wide{max-width:none}
.split{display:grid;grid-template-columns:minmax(0,648fr) minmax(0,328fr);gap:var(--s7)}
p{max-width:100%}
::selection{background:var(--mark-2);color:var(--ink)}
a,.btn-1,.btn-2,.item,.link,.lnk{transition:background-color 150ms ease-out,
  border-color 150ms ease-out,opacity 150ms ease-out}

/* Apparat: Mono, gemischte Schreibung, keine Sperrung */
.meta{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-faint);line-height:var(--lh-normal)}

/* Links: Unterstrich, kein Farbwechsel */
a{color:inherit;text-decoration:none}
.lnk{border-bottom:1px solid var(--hairline-strong);padding-bottom:2px}
.lnk:hover{border-bottom-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- Kopf ---------- */
header{background:var(--paper);position:sticky;top:0;z-index:10}
.navbar{display:flex;align-items:baseline;gap:var(--s7);padding:var(--s5) 0;flex-wrap:wrap}
.logo{font-size:var(--t-title);line-height:1;white-space:nowrap;font-weight:400}
nav{display:flex;gap:var(--s5);flex-wrap:wrap;margin-left:auto;align-items:baseline;
  font-family:var(--sans);font-size:var(--t-ui)}
nav a{padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover{border-bottom-color:var(--hairline-strong)}
nav a.now{border-bottom-color:var(--ink)}
.btn-2{border:1px solid var(--hairline-strong);padding:7px 14px;border-bottom-width:1px}
.btn-2:hover{background:var(--mark-1);border-color:var(--hairline-strong)}

/* ---------- Kernaussage ---------- */
.hero{padding:var(--s8) 0 0}
h1{font-family:var(--serif);font-weight:250;font-size:var(--t-hero);
  line-height:1.1;letter-spacing:-.012em;margin:0;
  hyphens:manual;-webkit-hyphens:manual}
/* Textmarker: ungleiche Enden, rechts ueberschiessend */
h1 mark{background:var(--mark-3);color:var(--ink);
  padding:.02em .22em .06em .10em;display:inline-block;transform:rotate(-.7deg)}
.lede{font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft);margin:var(--s5) 0 0}

/* ---------- Abschnitte: Raum statt Linie ---------- */
section{margin-top:var(--s8)}
/* Der Beispielsatz soll die erste Bildschirmhoehe noch anschneiden. */
.hero + section{margin-top:var(--s7)}
h2{font-family:var(--serif);font-weight:400;font-size:var(--t-display);
  line-height:var(--lh-tight);letter-spacing:-.008em;margin:0 0 var(--s2);
  hyphens:manual;-webkit-hyphens:manual}
.sub{color:var(--ink-soft);margin:0 0 var(--s6);font-size:var(--t-lead)}
.kicker{display:block;margin-bottom:var(--s2)}
/* Blockueberschrift innerhalb eines Abschnitts. Newsreader, nicht Mono. */
.blockhead{font-family:var(--serif);font-weight:400;font-size:var(--t-title);
  line-height:var(--lh-tight);letter-spacing:-.004em;margin:0 0 var(--s2);
  hyphens:manual;-webkit-hyphens:manual}
.blocksub{color:var(--ink-soft);margin:0 0 var(--s5);max-width:648px}

/* ---------- Kaskade: Bauteil aus dem Explorer, Werkzeuggrößen ---------- */
/* Jasmin-Feld laeuft von der rechten Spurkante bis zur Inhaltskante.
   Beide Kanten existieren ohnehin, es entsteht keine neue Breite.
   Der Text darin bleibt auf der Textkante bei 648. */
.quote{background:var(--paper-deep);padding:var(--s5);font-size:var(--t-lead);line-height:1.7;
  margin-left:calc(-1*var(--s5))}
/* Textmarker, zweite Rolle: die kodierte Passage. Gleiche Bauform wie in h1 --
   ungleiche Innenabstaende, rechts ueberschiessend, 0,7 Grad. */
.quote mark{background:var(--mark-3);color:var(--ink);
  padding:.02em .22em .06em .10em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
/* Innenmass 1008 = 648 Text + 48 Rinne + 312 Apparat */
.quote .in{display:grid;grid-template-columns:minmax(0,648fr) minmax(0,312fr);
  gap:var(--s7);align-items:start}
.quote .in > p{margin:0}
.quote .app{font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-normal);
  color:var(--ink-soft);padding-top:5px}
.quote .app b{font-weight:400;display:block;margin-bottom:var(--s3)}
.quote .src{display:block;font-family:var(--mono);font-size:11px;
  color:var(--ink-soft);margin-top:var(--s3);font-style:normal}

.chain{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;
  gap:var(--s2);margin-top:var(--s6);align-items:stretch}
.chain .ar{display:flex;align-items:center;justify-content:center;
  color:var(--hairline-strong);font-size:var(--t-body)}
.chain:hover .link{opacity:.4}
.chain .link:hover{opacity:1}
.link{background:var(--panel);border:1px solid var(--hairline);padding:var(--s4) var(--s4) var(--s5)}
.badge{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:var(--ink);margin-bottom:var(--s3)}
.badge .id{color:var(--ink-faint)}
.link h3{font-family:var(--serif);font-weight:400;font-size:var(--t-body);
  line-height:1.35;margin:0}
.link p{font-size:var(--t-ui);line-height:var(--lh-normal);color:var(--ink-soft);margin:var(--s3) 0 0}

/* Typmarken: Form kodiert den Typ, Farbe sitzt in der Form */
.gl{width:9px;height:9px;flex:none}
.gl.circle{border-radius:50%;background:var(--c-assumption)}
.gl.square{background:var(--c-narrative)}
.gl.diamond{background:var(--c-construct);transform:rotate(45deg);width:8px;height:8px}
.gl.tri{width:0;height:0;background:none;border-left:5px solid transparent;
  border-right:5px solid transparent;border-bottom:9px solid var(--c-effect)}

/* Messbalken: Konstruktionsmaße */
.es{margin-top:var(--s4)}
.es .track{position:relative;height:10px;background:var(--paper-deep);width:146px;margin-top:9px}
.es .zero{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--hairline-strong)}
.es .fill{position:absolute;top:0;bottom:0;background:var(--pol-neg)}
/* Whisker liegt auf dem Balken. Kappen ueberragen ihn oben und unten um 3 px,
   damit sie sichtbar bleiben, wo sie auf der Fuellung liegen. */
.es .whisk{position:absolute;top:-3px;height:16px;
  border-left:1px solid var(--pol-neg);border-right:1px solid var(--pol-neg)}
.es .whisk::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--pol-neg)}
.es .row{display:flex;align-items:center;gap:var(--s3);margin-top:9px;
  font-family:var(--mono);font-size:11px}
.es .ci{color:var(--ink-faint)}
.dots{display:flex;gap:2px}
.dots i{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);display:block}
.dots i.off{background:var(--hairline-strong)}

.verdict{margin:var(--s6) 0 0;font-size:var(--t-lead);line-height:1.55}

/* ---------- Kreislauf ---------- */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.field{border-top:1px solid var(--hairline-strong);padding:var(--s4) 0 0}
.field h3{font-family:var(--serif);font-weight:400;font-size:var(--t-title);
  line-height:var(--lh-tight);margin:0 0 var(--s3)}
.field p{font-size:var(--t-body);line-height:var(--lh-read);margin:0 0 var(--s4);color:var(--ink-soft)}
.loop-note{margin-top:var(--s5);color:var(--ink-soft)}

/* ---------- Zahlen ---------- */
.band{background:var(--paper-deep);padding:var(--s7) 0}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.fig .n{font-size:var(--t-figure);line-height:1;letter-spacing:-.02em;font-weight:300}
.fig p{font-size:var(--t-ui);line-height:var(--lh-normal);color:var(--ink-soft);margin:var(--s3) 0 0}
.share{margin-top:var(--s3)}
.share .t{position:relative;height:8px;background:#e2e1dd}
.share .f{position:absolute;top:0;bottom:0;left:0;background:var(--ink)}
.share .c{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  display:block;margin-top:6px}
.partners{margin-top:var(--s7);display:flex;gap:var(--s5);flex-wrap:wrap;
  align-items:baseline;font-size:var(--t-body);color:var(--ink-soft)}

/* ---------- Briefings ---------- */
.items{margin-top:var(--s2)}
.item{display:grid;grid-template-columns:150px 1fr auto;gap:var(--s5);
  padding:var(--s5) var(--s3);border-bottom:1px solid var(--hairline);align-items:baseline}
.item:first-child{border-top:1px solid var(--hairline)}
.item:hover{background:var(--mark-1)}
.item h3{font-family:var(--serif);font-weight:400;font-size:var(--t-title);
  line-height:1.3;margin:0 0 var(--s2)}
.item p{font-size:var(--t-body);color:var(--ink-soft);margin:0;line-height:var(--lh-normal)}
.chip{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  border:1px solid var(--hairline-strong);padding:2px 7px}

/* ---------- Abschluss auf dunkler Fläche ---------- */
.close{margin-top:var(--s9);background:var(--ground);color:var(--paper-soft);
  padding:var(--s8) 0 var(--s7)}
.close h2{color:var(--paper)}
.close p{color:var(--paper-soft)}
.cgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s7);align-items:start}
.btn-1{display:inline-block;margin-top:var(--s4);background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-ui);padding:12px 22px}
.btn-1:hover{background:var(--paper-soft)}
.close .lnk{border-bottom-color:#4a4945;color:var(--paper)}
.close .lnk:hover{border-bottom-color:var(--paper)}
.close :focus-visible{outline-color:var(--paper)}
.close ol{margin:0;padding-left:18px;color:var(--paper-soft);font-size:var(--t-body);line-height:var(--lh-read)}
.close li{margin-bottom:var(--s2)}
.close .kicker{color:var(--paper-soft)}
.close .rail{color:var(--paper-soft)}
.rights{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid #3a3a35;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--paper-soft)}

@media (max-width:1000px){
  .grid{grid-template-columns:1fr;gap:var(--s4)}
  .rail{text-align:left}
  .rail .stick{position:static}
  .col > *{max-width:none}
  .split,.quote .in,.gegen .in{grid-template-columns:1fr;gap:var(--s4)}
  :root{--t-display:26px;--t-title:20px;--t-lead:17px}
  .chain,.loop,.figs,.cgrid{grid-template-columns:1fr}
  .gegen .zeilen{grid-template-columns:minmax(0,1fr) 146px;gap:var(--s2) var(--s4)}
  .gegen .zeilen > *{padding:3px 0}
  .chain .ar{display:none}
  .item{grid-template-columns:1fr;gap:var(--s2)}
  .hero{padding-top:var(--s7)}
  h1{font-weight:300}
  section{margin-top:var(--s7)}
  nav{gap:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Handlungsaufruf: Inhalt, auf Papier, im Raster ---------- */
.cta{background:var(--paper-deep);padding:var(--s8) 0;margin-top:var(--s9)}
.cta h2{color:var(--ink);margin-top:0}
.cta p{color:var(--ink-soft)}
.cta .kicker{color:var(--ink-faint)}
.cta ol,.cta ul{margin:0;padding-left:18px;font-size:var(--t-body);
  line-height:var(--lh-read);color:var(--ink-soft)}
.cta li{margin-bottom:var(--s2)}
.cta .btn-1{display:inline-block;margin-top:var(--s4);background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:var(--t-ui);padding:12px 22px}
.cta .btn-1:hover{background:var(--ink-soft)}
.cta .lnk{border-bottom-color:var(--hairline-strong);color:var(--ink)}
.cta .lnk:hover{border-bottom-color:var(--ink)}

/* ---------- Fussbereich: Bedienung, dunkel, mit Uebersicht ---------- */
.foot{background:var(--ground);color:var(--paper-soft);padding:var(--s7) 0 var(--s5);font-size:var(--t-body)}
.foot .rail{color:var(--paper-soft)}
.foot .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.foot b{font-weight:400;color:var(--paper);display:block;margin-bottom:var(--s3);
  font-family:var(--mono);font-size:var(--t-meta)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:6px}
.foot a:hover{color:var(--paper)}
.foot .lnk{border-bottom-color:#4a4945}
.foot :focus-visible{outline-color:var(--paper)}
.foot .rights{max-width:none;margin-top:var(--s7);padding-top:var(--s4);
  border-top:1px solid #3a3a35;font-family:var(--mono);font-size:var(--t-micro);color:var(--paper-soft)}
/* --- Messbalken, global gueltig ---------------------------------
   Das Bauteil wird als <span> erzeugt und muss deshalb ein eigenes
   Anzeigeverhalten mitbringen. Konstruktionsmass 146 px. */
.track{position:relative;display:inline-block;vertical-align:middle;
  width:146px;height:10px;background:var(--paper-deep)}
.track .zero{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:var(--hairline-strong)}
.track .fill{position:absolute;top:0;bottom:0}
.track .fill.neg{background:var(--pol-neg)}
.track .fill.pos{background:var(--pol-pos)}
.track .whisk{position:absolute;top:-3px;height:16px}
.track .whisk.neg{border-left:1px solid var(--pol-neg);border-right:1px solid var(--pol-neg)}
.track .whisk.pos{border-left:1px solid var(--pol-pos);border-right:1px solid var(--pol-pos)}
.track .whisk.neg::before,.track .whisk.pos::before{content:"";position:absolute;
  left:0;right:0;top:50%;height:1px}
.track .whisk.neg::before{background:var(--pol-neg)}
.track .whisk.pos::before{background:var(--pol-pos)}

/* Kennungen im Fliesstext: Mono ist kleiner gebaut als Newsreader, deshalb .82em,
   damit die Grauwerte zusammenpassen. Unterstrich wie bei jedem Link. */
.idref,.idcode{font-family:var(--mono);font-size:.82em;letter-spacing:0;
  color:var(--ink-faint);background:none;padding:0}
.idref{border:none;border-bottom:1px solid var(--hairline-strong);cursor:pointer;
  line-height:inherit}
.idref:hover{background:var(--mark-1);border-bottom-color:var(--ink);color:var(--ink)}
.idcode{border:none}
.idpop{position:fixed;z-index:60;width:360px;max-width:calc(100vw - 16px);
  background:var(--panel);border:1px solid var(--hairline-strong);padding:var(--s4);
  box-shadow:none}
.idpop .badge{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:var(--ink);margin-bottom:var(--s2)}
.idpop .badge .id{color:var(--ink-faint)}
.idpop .ttl{font-size:var(--t-lead);line-height:1.3;margin-bottom:var(--s2)}
.idpop p{font-size:var(--t-ui);line-height:var(--lh-normal);color:var(--ink-soft);margin:0 0 var(--s3)}
.idpop .kanten{border-top:1px solid var(--hairline);padding-top:var(--s3);margin-top:var(--s3);
  display:grid;grid-template-columns:minmax(0,1fr) 146px max-content;
  gap:0 var(--s3);align-items:center;font-size:var(--t-ui)}
.idpop .kanten > *{padding:4px 0}
.idpop .fuss{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hairline);
  color:var(--ink-faint)}
.mono{font-family:var(--mono)}

/* --- Beispielwechsler ------------------------------------------- */
#bsp-wahl{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
#bsp-wahl .fc{font-family:var(--mono);font-size:var(--t-meta);background:none;
  border:1px solid var(--hairline-strong);padding:5px 12px;cursor:pointer;color:var(--ink-soft)}
#bsp-wahl .fc:hover{background:var(--mark-1)}
#bsp-wahl .fc.on{background:var(--mark-3);border-color:var(--mark-4);color:#6b5a2e}
.link.leer{background:var(--paper-deep);border-style:solid;border-color:var(--hairline)}
.link.leer h3{color:var(--ink-soft)}
.es .track-w{margin-top:9px}

/* --- Mini-Explorer ---------------------------------------------- */
.mini-filter{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  padding-bottom:var(--s4);border-bottom:1px solid var(--hairline)}
.mini-filter button{font-family:var(--mono);font-size:var(--t-meta);background:none;
  border:1px solid var(--hairline-strong);padding:5px 11px;cursor:pointer;color:var(--ink-soft)}
.mini-filter button:hover{background:var(--mark-1)}
.mini-filter button.on{background:var(--mark-2);border-color:var(--mark-4);color:#6b5a2e}
.mini-suche{margin-left:auto;font-family:var(--mono);font-size:var(--t-meta);
  border:none;border-bottom:1px solid var(--hairline-strong);background:none;
  padding:5px 0;min-width:230px;color:var(--ink)}
.mini-suche:focus{outline:none;border-bottom-color:var(--ink)}
.mini-kopf{display:flex;align-items:baseline;justify-content:space-between;
  padding:var(--s3) 0 var(--s2)}
.mini-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.mini-liste{max-height:520px;overflow-y:auto;border-top:1px solid var(--hairline)}
.mz{display:block;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--hairline);padding:var(--s3) var(--s3) var(--s4);cursor:pointer;
  font:inherit;color:var(--ink)}
.mz:hover{background:var(--mark-1)}
.mz.on{background:var(--mark-2)}
.mz .badge{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:var(--ink);margin-bottom:5px}
.mz .badge .id{color:var(--ink-faint)}
.mz .t{display:block;font-size:var(--t-body);line-height:1.35;margin-bottom:5px}
.mz .n{display:block;font-size:11px;color:var(--ink-faint)}
.mini-detail{background:var(--panel);border:1px solid var(--hairline);
  padding:var(--s5);align-self:start}
.mini-detail h3{font-size:var(--t-title);margin:var(--s2) 0 var(--s3)}
.mini-detail .def{font-size:var(--t-body);color:var(--ink-soft);line-height:var(--lh-read);margin:0 0 var(--s4)}
.mini-detail .facts{font-size:var(--t-meta);color:var(--ink-faint);
  padding-bottom:var(--s4);border-bottom:1px solid var(--hairline)}
.mini-detail .badge{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:var(--ink)}
.mini-detail .badge .id{color:var(--ink-faint)}
.mini-detail .cap{display:block;color:var(--ink-faint);font-size:var(--t-meta);
  margin:var(--s4) 0 var(--s2)}
.hinweis{padding:var(--s4) var(--s3);color:var(--ink-faint);font-size:11px}

@media (max-width:1000px){
  .mini-body{grid-template-columns:1fr}
  .mini-suche{margin-left:0;min-width:0;width:100%}
}

/* --- Gegenprobe: zweiter Takt der Szene ------------------------- */
.gegen{margin-top:var(--s8)}
/* Der Vorschlagssatz bekommt dieselbe Typografie wie der gefundene Satz,
   aber kein Feld. Gefundenes Material steht in einer Flaeche, ein Vorschlag
   nicht -- das Fehlen des Behaelters ist die Unterscheidung. */
.gegen .vorschlag{font-size:var(--t-lead);line-height:1.7;max-width:648px;margin:0 0 var(--s3)}
.gegen .vorschlag mark{background:var(--mark-3);color:var(--ink);
  padding:.02em .22em .06em .10em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
/* Innenmass wie im Zitatfeld: 648 Text + 48 Rinne + 312 Apparat.
   Damit liest sich der Vorschlag als dieselbe Konstruktion wie der
   gefundene Satz -- nur ohne Flaeche. */
.gegen .in{display:grid;grid-template-columns:minmax(0,648fr) minmax(0,312fr);
  gap:var(--s7);align-items:start;margin-bottom:var(--s6)}
.gegen .in > *{margin:0}
.gegen .app{font-family:var(--mono);font-size:var(--t-meta);
  line-height:var(--lh-normal);color:var(--ink-soft);padding-top:5px}
.gegen .app b{font-weight:400;color:var(--ink);display:block;margin-bottom:var(--s3)}
.gegen .app .src{display:block;margin-top:var(--s3);color:var(--ink-faint)}
.gegen .kopf{margin:0 0 var(--s3)}
.gegen .zeilen{display:grid;
  grid-template-columns:minmax(0,1fr) 146px max-content max-content;
  gap:0 var(--s4);align-items:center;font-size:var(--t-body)}
.gegen .zeilen > *{padding:7px 0}
.gegen .zeilen .mono{font-family:var(--mono);font-size:11px}
.gegen .n{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* --- Einwand ---------------------------------------------------- */
.mass{border-left:2px solid var(--ink);padding-left:var(--s4);margin:0 0 var(--s6)}
.offen{margin-top:var(--s7);border-top:1px solid var(--hairline-strong);padding-top:var(--s5)}
.offen h3{font-family:var(--serif);font-weight:400;font-size:var(--t-title);
  line-height:var(--lh-tight);margin:0 0 var(--s3)}

/* Auf getoenter Flaeche steigt die Haarlinie eine Stufe hoeher.
   #e8e8e5 auf #f2f2f0 ergibt 1,10 und ist praktisch unsichtbar; #d5d5d1 ergibt 1,31,
   also denselben Abstand wie die normale Haarlinie auf Papier. Kein neuer Farbwert:
   der Token verweist innerhalb des Bandes auf die vorhandene kraeftige Linie. */
.band{--hairline:var(--hairline-strong)}

/* =====================================================================
   Ergänzungen für die statische Website
   ===================================================================== */

/* Ersatz für Inline-Stile aus den Mockups (sonst greift die CSP nicht) */
.hero{margin-top:0}
.sub--eng{margin-bottom:var(--s5)}
.cta-direkt{margin-top:var(--s5);font-size:var(--t-body)}
.cta p.cta-direkt{color:var(--ink-soft)}

/* Kopf: Abschnittsname in Mono neben der Wortmarke, Aufruf rechts */
.logo a{border:none}
.kopf-abschnitt{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-faint)}
.kopf-aktion{margin-left:auto;font-family:var(--sans);font-size:var(--t-ui)}

/* Sprunglink */
.skip{position:absolute;left:var(--s4);top:-100px;z-index:20;background:var(--panel);
  padding:var(--s2) var(--s3);font-family:var(--sans);font-size:var(--t-ui)}
.skip:focus{top:var(--s4)}

/* Stand-Hinweis unter der Kernaussage */
.stand{margin:var(--s5) 0 0}

/* Beispielkette ohne Skript */
.quote-flach{margin:0}
.loop--oben{margin-top:var(--s5)}
.gl{display:inline-block}
.link .badge .idcode{font-size:11px}

/* Beleg-Karte: Anteilsbalken (Spur --paper-deep, Füllung --ink, keine Polaritätsfarbe).
   Bereiche: Füllung bis zur Untergrenze, Spanne bis zur Obergrenze in --ink-faint. */
.bel{margin-top:var(--s4)}
.bel-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:var(--s3)}
.bel-zeile .mono{color:var(--ink)}
.anteil{position:relative;display:block;height:8px;background:var(--paper-deep);margin-top:6px}
.anteil i{position:absolute;top:0;bottom:0;display:block}
.anteil-f{left:0;background:var(--ink)}
.anteil-r{background:var(--ink-faint)}
.anteil-f--66{width:66%}  .anteil-r--66-80{left:66%;width:14%}
.anteil-f--37{width:37%}  .anteil-r--37-43{left:37%;width:6%}

/* Über uns: Porträts 3:4, auf --panel, natürliche Farbe, keine Tonung */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.p figure{margin:0}
.p .ph{aspect-ratio:3/4;background:var(--panel);border:1px solid var(--hairline);
  display:block;overflow:hidden}
.p .ph img{width:100%;height:100%;object-fit:cover;display:block}
.p figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:6px}
.p h3{font-family:var(--serif);font-weight:400;font-size:var(--t-lead);
  line-height:var(--lh-tight);margin:var(--s3) 0 var(--s1)}
.p .rolle{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-bottom:var(--s3)}
.p p{font-size:var(--t-ui);line-height:var(--lh-normal);color:var(--ink-soft);margin:0}

/* Liste: Name, eine Zeile, Art */
.liste{border-top:1px solid var(--hairline);margin-top:var(--s5)}
.lz{display:grid;grid-template-columns:220px 1fr 200px;gap:var(--s5);
  padding:var(--s4) var(--s3);border-bottom:1px solid var(--hairline);align-items:baseline}
.lz .nm{font-size:var(--t-lead)}
.lz p{font-size:var(--t-body);color:var(--ink-soft);margin:0;line-height:var(--lh-normal)}
.lz .af{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

@media (max-width:1000px){
  .people{grid-template-columns:1fr 1fr}
  .lz{grid-template-columns:1fr;gap:var(--s2)}
}

/* Fußbereich */
.foot .rights{line-height:var(--lh-normal)}

/* Unterseiten: eine Stufe tiefer, Seitenüberschrift auf --t-display */
.seite{padding:var(--s8) 0 var(--s8)}
.seite h1{font-weight:400;font-size:var(--t-display);line-height:var(--lh-tight);
  letter-spacing:-.008em;margin:0 0 var(--s5)}
.seite h2{font-size:var(--t-title);margin:var(--s7) 0 var(--s3)}
.seite p{color:var(--ink)}
.seite .hinweis-text{color:var(--ink-soft)}
.angaben{margin:0}
.angaben dt{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-faint);line-height:var(--lh-normal)}
.angaben dd{margin:0 0 var(--s4)}
.seite a{border-bottom:1px solid var(--hairline-strong);padding-bottom:2px}
.seite a:hover{border-bottom-color:var(--ink)}

.offen .hinweis-text{color:var(--ink-soft);margin:0}

/* Schmale Ansicht: Fußbereich im Mockup ohne Regel, lief bei 390 px seitlich über */
@media (max-width:1000px){
  .foot .cols4{grid-template-columns:minmax(0,1fr)}
  .foot .rights{overflow-wrap:anywhere}
}

/* .navbar setzte padding kurz und hob damit den Seitenabstand von .wrap auf:
   Wortmarke stand am Bildschirmrand (schmal) bzw. 32 px vor der Spur (breit). */
header .navbar{padding:var(--s5) var(--s6)}
@media (max-width:1000px){
  header .navbar{gap:var(--s3);flex-wrap:nowrap;padding:var(--s4) var(--s6)}
  header .logo{font-size:var(--t-lead)}
  header .btn-2{white-space:nowrap;padding:7px 10px}
}

/* Logo: Kopf Jasmin/Ink auf Papier, Fuß Jasmin/Off-White auf dunklem Grund.
   Seitenverhältnis der horizontalen Fassung 12785 : 5781. */
header .navbar{align-items:center;padding-top:var(--s4);padding-bottom:var(--s4)}
/* Kopfhöhe mit Logo: 16 + 64 + 16 = 96 px (schmal 16 + 52 + 16 = 84 px).
   Klebende Randspur-Beschriftung und Sprungziele liegen eine Rinne darunter,
   sonst schieben sie sich unter die Kopfzeile. */
:root{--kopf:120px}
/* Haarlinie als Kante: Text, der unter die klebende Kopfzeile läuft, wirkt sonst abgeschnitten. */
header{border-bottom:1px solid var(--hairline)}
html{scroll-padding-top:var(--kopf)}
header .logo{display:block;border:none;line-height:0}
header .logo img{display:block;height:64px;width:auto}
.foot-logo{display:block;height:72px;width:auto;margin-bottom:var(--s6)}
@media (max-width:1000px){
  header .logo img{height:52px}
  .foot-logo{height:56px}
}

/* =====================================================================
   Mono-Budget: Mono nur für Kennungen, Messwerte, Quellen und Beschriftungen.
   Sätze für Menschen stehen in Newsreader.
   ===================================================================== */
.p figcaption{font-family:var(--serif);font-size:var(--t-ui);line-height:var(--lh-normal);color:var(--ink-faint)}
.foot .rights{font-family:var(--serif);font-size:var(--t-ui);line-height:var(--lh-normal)}

/* Stand der Website: Kernaussage dieser Seite, über der Überschrift */
:root{--jasmin:#ffd97d}
.status{display:flex;align-items:center;gap:var(--s4);margin:0 0 var(--s6);
  font-size:var(--t-title);line-height:var(--lh-tight);color:var(--ink)}
.status-punkt{position:relative;flex:none;width:12px;height:12px;border-radius:50%;
  background:var(--jasmin);box-shadow:inset 0 0 0 1px rgba(35,35,31,.08)}
.status-punkt::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 var(--jasmin);opacity:0}

/* =====================================================================
   Bewegung: nur wo sie etwas bedeutet (Auftritt, Hervorheben, Reihenfolge,
   Messung, laufender Stand). Endzustand ist immer der Grundzustand, damit bei
   reduzierter Bewegung (animation:none) alles vollständig sichtbar bleibt.
   ===================================================================== */
h1 mark{background:linear-gradient(var(--mark-3),var(--mark-3)) no-repeat 0 0 / 100% 100%}

@media (prefers-reduced-motion:no-preference){
  /* Auftritt: Stand, Überschrift, Lead nacheinander */
  .hero .status,.hero h1,.hero .lede{animation:fs-auftritt 640ms cubic-bezier(.2,.6,.2,1) both}
  .hero h1{animation-delay:90ms}
  .hero .lede{animation-delay:220ms}
  @keyframes fs-auftritt{from{opacity:0;transform:translateY(6px)}}

  /* Der Textmarker zieht sich einmal von links ein */
  h1 mark{animation:fs-marker 720ms cubic-bezier(.3,.7,.2,1) 720ms both}
  @keyframes fs-marker{from{background-size:0% 100%}}

  /* Der Stand-Punkt atmet: einziges dauerhaftes Signal, weil die Arbeit läuft */
  .status-punkt::after{animation:fs-atem 2.8s ease-out 1.2s infinite}
  @keyframes fs-atem{0%{opacity:.9;box-shadow:0 0 0 0 var(--jasmin)}
    100%{opacity:0;box-shadow:0 0 0 12px var(--jasmin)}}
}

/* Kette: Glieder erscheinen in ihrer Reihenfolge, danach wachsen die Balken.
   Nur mit fs.js (Klasse .bewegt), sonst steht alles. */
.bewegt [data-zeigen] > .link,.bewegt [data-zeigen] > .ar{opacity:0;transform:translateY(8px);
  transition:opacity 480ms ease-out,transform 480ms cubic-bezier(.2,.6,.2,1),background-color 150ms ease-out}
.bewegt [data-zeigen].sichtbar > .link,.bewegt [data-zeigen].sichtbar > .ar{opacity:1;transform:none}
.bewegt [data-zeigen] > :nth-child(2){transition-delay:110ms}
.bewegt [data-zeigen] > :nth-child(3){transition-delay:220ms}
.bewegt [data-zeigen] > :nth-child(4){transition-delay:330ms}
.bewegt [data-zeigen] > :nth-child(5){transition-delay:440ms}
.bewegt [data-zeigen] > :nth-child(6){transition-delay:550ms}
.bewegt [data-zeigen] > :nth-child(7){transition-delay:660ms}
.bewegt [data-zeigen] .anteil i{transform:scaleX(0);transform-origin:left center;
  transition:transform 700ms cubic-bezier(.2,.6,.2,1) 900ms}
.bewegt [data-zeigen] .anteil-r{transition-delay:1350ms}
.bewegt [data-zeigen].sichtbar .anteil i{transform:none}
@media print{.bewegt [data-zeigen] *{opacity:1!important;transform:none!important}}

/* =====================================================================
   Stand wandert in die Kopfzeile: sobald der Hinweis unter der Kopfzeile
   verschwindet, erscheint er dort (Klasse .status-oben, gesetzt von fs.js).
   Ohne Skript bleibt er nur im Auftritt stehen. Schmal: kein Platz, entfällt.
   ===================================================================== */
.kopf-status{margin-left:auto;display:flex;align-items:center;gap:var(--s3);
  font-size:var(--t-body);line-height:1;color:var(--ink-soft);white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity 360ms ease-out,transform 420ms cubic-bezier(.2,.6,.2,1),visibility 0s linear 420ms}
.kopf-status + .kopf-aktion{margin-left:var(--s6)}
.status-oben .kopf-status{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.kopf-status .status-punkt{width:8px;height:8px}
@media (max-width:1000px){ .kopf-status{display:none} .kopf-status + .kopf-aktion{margin-left:auto} }

/* =====================================================================
   Erkundung Licht (weicht von „keine Verläufe“ ab). Vier dezente Fassungen,
   keine berührt das Logo. Aktiv mit "licht": "rechts" | "horizont" | "marker"
   | "abgang" in src/_data/site.json; leer = aus.
   ===================================================================== */
body[class*="licht-"]{overflow-x:clip}

/* Rechts: Schein in der leeren rechten Hälfte des Auftritts, unter der Kopfzeile */
.licht-rechts .hero{position:relative}
.licht-rechts .hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * var(--s9));bottom:calc(-1 * var(--s8));
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:radial-gradient(ellipse 48% 62% at 88% 38%,
    rgba(253,226,170,.46) 0%,rgba(253,234,198,.2) 45%,rgba(251,251,250,0) 75%)}

/* Horizont: warmes Licht steigt von der Unterkante des Auftritts auf */
.licht-horizont .hero{position:relative}
.licht-horizont .hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:calc(-1 * var(--s8));left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:radial-gradient(ellipse 80% 58% at 40% 100%,
    rgba(253,226,170,.5) 0%,rgba(253,234,198,.22) 42%,rgba(251,251,250,0) 72%)}

/* Marker: ein Hof um „Mögliche.“, der sich nach dem Einziehen öffnet */
.licht-marker h1 mark{box-shadow:0 0 36px 8px rgba(253,226,170,.55)}
@media (prefers-reduced-motion:no-preference){
  .licht-marker h1 mark{animation:fs-marker 720ms cubic-bezier(.3,.7,.2,1) 720ms both,
    fs-hof 1400ms ease-out 1300ms both}
  @keyframes fs-hof{from{box-shadow:0 0 0 0 rgba(253,226,170,0)}}
}

/* Abgang: Licht im Kontaktband, die Seite endet im Warmen */
.licht-abgang .cta{background:
  radial-gradient(ellipse 60% 90% at 85% 100%,rgba(253,226,170,.55) 0%,rgba(253,234,198,.22) 45%,rgba(242,242,240,0) 75%),
  var(--paper-deep)}

/* =====================================================================
   Beispielwechsler: Textlinks in Newsreader, aktiver Zustand mit
   Jasmin-Unterstrich. Ohne Skript stehen alle Beispiele untereinander.
   ===================================================================== */
.bsp-wahl{display:none;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);
  margin:0 0 var(--s5)}
.js .bsp-wahl{display:flex}
.bsp-wahl [role=tab]{font:inherit;font-family:var(--serif);font-size:var(--t-lead);
  color:var(--ink-soft);background:none;border:0;padding:0 0 3px;cursor:pointer;
  border-bottom:2px solid transparent;transition:color 150ms ease-out,border-color 200ms ease-out}
.bsp-wahl [role=tab]:hover{color:var(--ink);border-bottom-color:var(--hairline-strong)}
.bsp-wahl [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--jasmin)}
.bsp-hinweis{margin-left:auto}
.js .bsp-gruppe:not(.bereit) > .bsp:not(:first-child){display:none}
.bsp[hidden]{display:none}
html:not(.js) .bsp + .bsp{margin-top:var(--s8)}
@media (max-width:1000px){ .bsp-hinweis{margin-left:0;flex-basis:100%} }

/* Messbalken CC0002: r = −0,22, KI −0,32 … −0,11, Achse ±0,7 (wie balken() im Mockup) */
.track .fill.cc0002{left:34.2857%;width:15.7143%}
.track .whisk.cc0002{left:27.1429%;width:15%}
/* Die Beispiele liegen eine Ebene tiefer als .col: dieselben zwei Breiten weiterreichen */
.bsp > *{max-width:648px}
.bsp > .wide{max-width:none}
@media (max-width:1000px){ .bsp > *{max-width:none} }