/* Caprilytics Insights — Bibliotheks- und Beitragsgestaltung.
   Quelle: Design-Hand-off M. Knechtel vom 12.08.2026 (vier Standalone-Seiten in
   der Design-Sandbox). Übernommen ohne gestalterische Eingriffe; entfernt wurden
   nur die Sandbox-Behelfe — eingebettete Webfonts (die Site lädt sie über
   fonts.css), die Entwurfs-Fahne und der Platzhalter-Seitenfuss (hier steht der
   echte Fuss von caprilytics.com).

   Die kurzen Namen unten sind Monis Arbeitsnamen. Sie zeigen auf die Tokens aus
   tokens.css, damit es nur eine Farbquelle gibt — Ausnahme --glow, siehe dort. */
:root {
  --paper:      var(--color-paper);
  --paper-alt:  var(--color-paper-alt);
  --ink:        var(--color-ink);
  --ink-soft:   var(--color-ink-soft);
  --stone:      var(--color-stone);
  --stone-light:var(--color-stone-light);
  --stone-mid:  var(--color-stone-mid);
  --stone-deep: var(--color-stone-deep);
  --rule:       var(--color-rule);
  --rule-soft:  var(--color-rule-soft);
  /* Graustufen für Ausgegrautes (geplante Kacheln) — zweite dokumentierte
     Ausnahme neben --glow: der Brandguide führt kein neutrales Grau, alle
     Stein-Töne sind warmer Sand und lesen sich nicht als «disabled». Die drei
     Werte sind nicht frei gewählt, sondern die entsättigten Marken-Töne
     --stone-mid, --stone-deep und --stone. Sie tragen nur Kontur und Schrift:
     eine graue Fläche verbietet sich, weil die Themenfeld-Zeichnungen daneben
     das graue Feld schon besetzen (--tf-bg reicht von #BEC9CE bis #D5D7D7) und
     die Kammer sonst zur durchgehenden Betonfläche zuläuft. */
  --grau-linie: #A2A2A2;
  --grau-text:  #5F5F5F;
  --grau-meta:  #6E6E6E;
  /* Akzent #C8501E — nicht neu: dasselbe Lärchen-Rot trug schon das abgelöste
     doc-Design (dort --doc-larch). Der Brandguide führt daneben
     --color-alpine-glow #DA291C; welches der beiden in den Aufzählungszeichen
     steht, ist Punkt 1.3 aus Monis Notiz vom 12.08.2026 und offen. */
  --glow: #C8501E;
  --rot:  var(--color-alpine-glow);
  --display: var(--font-display);
  --body:    var(--font-body);
  --mono:    var(--font-mono);
  --wide: 1460px;
  /* Leseraster des Beitrags: Textspalte 660 + Rinne 56 + Randspalte 240,
     dazu 2×28 Seitenpolster. Alles, was zum Lesefluss gehört (Titelzone,
     Vorspann, Satzblöcke, Grafik, Tabelle, Holzband, Weiterlesen, Autorzeile,
     Newsletter), hängt an diesem Mass. Am --wide-Raster hängt nur noch das
     Chrome um den Beitrag herum (Masthead, Leiste, Einordnungsband samt der
     Themenfeld-Tafel des Auftakts) und die Übersichtsseite. */
  --lesen: 1012px;
  --tr: .18em;
  /* Höhe des klebenden Seitenkopfs (Masthead 57 + Leiste 43). Darunter
     klebt der Reihen-Kopf, darunter erst die Bildspalte — die drei Werte
     stapeln sich, deshalb stehen sie hier und nicht je Regel.
     100 und nicht 99: die eigene Rechnung im Satz darüber ergibt 100, gemessen
     sind es ebenfalls 100 — mit 99 lag die oberste Zeile eines Sprungziels
     einen Pixel unter der Kante. Unter 1024px gilt der Wert weiter unten,
     dort trägt der Masthead den Kopf allein. */
  --chrome: 100px;
  --rkopf: 109px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1,"liga" 1;overflow-x:hidden}
a{color:inherit}
/* ---------- Kopf ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.mh-in{max-width:var(--wide);margin:0 auto;padding:18px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.mh-in .wm{height:20px;width:auto;display:block;color:var(--ink)}
.mh-marke{display:flex;align-items:flex-end;gap:14px;text-decoration:none}
.mh-marke .kicker{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:var(--tr);color:var(--stone-deep);padding-bottom:2px}
/* Schalter der Bibliotheks-Leiste. Stand seit dem Hand-off (12.08.2026) im
   Stylesheet, gebaut wurde er erst am 29.08.2026 — bis dahin brach die Leiste
   auf Schmalformat zweizeilig um und sperrte ihre eigenen Dropdowns ein.
   Am Schreibtisch gibt es ihn nicht, dort steht die Leiste ausgeschrieben. */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;
  padding:12px 0;margin-left:auto;min-height:44px;min-width:44px;align-items:flex-end;justify-content:center}
.burger span{display:block;width:26px;height:2px;background:var(--ink);
  transition:transform .18s ease,opacity .14s ease}
@media (max-width:1023px){.burger{display:flex}}
/* display:flex oben schlägt die Preflight-Regel [hidden]{display:none} —
   gleiche Spezifität, und insights.css lädt nach output.css. Ohne diese Zeile
   stünde der Schalter auch ohne Javascript da und täte nichts. Dieselbe Falle
   wie bei .bildlupe-knopf und dialog.bildlupe weiter unten. */
.burger[hidden]{display:none}
.burger:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
/* Offen wird der Schalter zum Kreuz: die mittlere Linie weicht, die äusseren
   drehen sich auf der Stelle. Ohne das Umschlagen sähe die Leiste aus, als
   liesse sie sich nicht wieder schliessen. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.burger span{transition:none}}
.leiste{border-bottom:1px solid var(--ink);background:var(--paper);position:sticky;top:57px;z-index:55}
.leiste-in{max-width:var(--wide);margin:0 auto;display:flex;align-items:stretch;justify-content:space-between}
.leiste-l,.leiste-r{display:flex;align-items:stretch}
.leiste a,.leiste .zelle,.leiste summary{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink);text-decoration:none;padding:12px 20px;display:flex;align-items:center;
  gap:7px;white-space:nowrap}
/* Enger nur im knappen Band direkt oberhalb des Umbruchs.
   ---------------------------------------------------------------------------
   Die ausgeschriebene Leiste baut auf diesem Rechner 1009px. Bei einem 1024px
   breiten Fenster ist das genau dann zu viel, wenn das System eine klassische
   Scrollbar zeichnet (Windows, Linux): Chrome wertet `@media (min-width:1024px)`
   gegen die Viewport-Breite INKLUSIVE Scrollbar aus, `clientWidth` misst OHNE
   sie — es greift also das Schreibtisch-Layout, waehrend nur rund 1009px
   Inhaltsbreite da sind. Dazu baut dieselbe Leiste unter Linux-Schriftmetrik
   breiter: in der CI 1035px, gemessen als 26px Seitenueberlauf (Pipeline 7843,
   #1800). Auf macOS bleibt das unsichtbar, weil die Scrollbar dort ein Overlay
   ist und keine Breite wegnimmt.

   Die Grenze zu verschieben waere der naheliegende Griff und der falsche: sie
   liegt bewusst auf Tailwinds `lg`, damit Bibliothek und Nav der Hauptsite an
   derselben Breite umschalten (siehe der Block weiter unten). Stattdessen
   nimmt die Leiste im Band zwischen Umbruch und 1199px sieben mal 12px
   Polsterung zurueck, also 84px — genug fuer die 26px Ueberlauf und eine
   Reserve fuer andere Schriftstapel. Ab 1200px steht wieder die weite Fassung.

   Nur die Zellen der ZEILE, nicht die der Dropdown-Panels: deren 18px sind
   eine Listenmetrik und haben mit der Zeilenbreite nichts zu tun. */
@media (min-width:1024px) and (max-width:1199px){
  .leiste-l>a,.leiste-l>.zelle,.leiste-l>details>summary,
  .leiste-r>a,.leiste-r>.zelle,.leiste-r>details>summary{
    padding-left:14px;padding-right:14px}
}
.leiste .sep{width:1px;background:var(--rule)}
.leiste a:hover{color:var(--glow)}
.leiste .zelle{color:var(--stone-deep)}
.leiste .zurueck{color:var(--glow)}
.leiste .invers{background:var(--ink);color:var(--paper)}
.leiste .invers:hover{background:var(--glow)}
details.dd{position:relative}
details.dd>summary{cursor:pointer;list-style:none}
details.dd>summary::-webkit-details-marker{display:none}
/* Chevron als Rahmen-Quadrat statt Glyphe (⌄): die Glyphe sitzt in der Mono-Schrift
   unter der optischen Mitte, das Pseudo-Element zentriert der Flex-Container. */
details.dd>summary::after{content:"";width:5px;height:5px;flex:none;
  border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
details.dd[open]>summary{color:var(--glow)}
.dd-panel{position:absolute;left:0;top:100%;min-width:320px;background:var(--paper);
  border:1px solid var(--ink);border-top:0;z-index:70;box-shadow:0 12px 30px rgba(26,24,21,.07)}
.dd-panel a{padding:9px 18px;border-bottom:1px solid var(--rule-soft);letter-spacing:.06em;
  text-transform:none;font-size:11px;justify-content:space-between}
.dd-panel a:last-child{border-bottom:0}
.dd-panel a b{font-weight:500;color:var(--stone-deep)}
/* Die Themenfeld-Zeichnungen stehen als Datei (assets/images/insights/themenfeld/),
   nicht inline wie im Hand-off — sie kommen mehrfach je Seite vor und wiegen als
   Datei einmal statt achtmal. Darum überall svg UND img im Selektor. */
/* ---------- Aufmacher ---------- */
.aufmacher{max-width:var(--wide);margin:38px auto 0;padding:0 28px}
.auf-rahmen{border:1px solid var(--ink);background:var(--paper);display:grid;
  grid-template-columns:1.12fr 1fr;grid-template-areas:"bild satz" "fuss fuss"}
.auf-bild{grid-area:bild;border-right:1px solid var(--ink);display:block;min-height:460px}
.tafel{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  height:100%;background:var(--paper)}
.tz{position:relative;margin:0;background:var(--tf-bg,var(--paper-alt));overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:13% 11% 15%;
  border-right:1px solid rgba(26,24,21,.14);border-bottom:1px solid rgba(26,24,21,.14)}
.tz:nth-child(4n){border-right:0}
.tz:nth-last-child(-n+4){border-bottom:0}
.tz > svg,.tz > img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.tz-nr{position:absolute;top:9px;left:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--stone-deep)}
.tz-name{position:absolute;bottom:9px;left:11px;right:11px;font-family:var(--mono);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Begehbare Felder: sobald in einer Kammer etwas online steht, ist ihre
   Zeichnung der Weg dorthin. Die Vorschau legt sich als Blatt darüber statt
   daneben — .tz hat overflow:hidden, ein Tooltip ausserhalb wäre abgeschnitten.
   Nur an Zeigergeräten: auf dem Touchscreen bliebe der Hover kleben und würde
   den Tipp auf den Link verschlucken. */
a.tz{text-decoration:none;cursor:pointer}
a.tz:hover{background-image:linear-gradient(0deg,rgba(26,24,21,.05),rgba(26,24,21,.05))}
.tz-vorschau{position:absolute;inset:0;z-index:2;overflow:hidden;
  /* Leicht durchscheinend: der Ton der Kammer bleibt darunter erkennbar.
     Wo backdrop-filter fehlt, deckt der etwas dichtere Fallback. */
  background:rgba(244,241,234,.8);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:13px 13px 11px;display:none;flex-direction:column;gap:7px;text-align:left;
  opacity:0;transition:opacity .16s ease}
.tzv-kopf{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tzv-claim{font-family:var(--display);font-size:14px;line-height:1.2;color:var(--ink)}
.tzv-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;
  min-height:0;overflow:hidden}
.tzv-liste li{display:flex;gap:6px;font-size:11.5px;line-height:1.25;color:var(--ink)}
.tzv-liste li b{font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:.08em;
  color:var(--stone-deep);flex:0 0 auto;padding-top:2px}
.tzv-liste li.geplant span{color:var(--stone-deep)}
.tzv-liste li.rest{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--stone-deep)}
.tzv-fuss{margin-top:auto;padding-top:8px;border-top:1px solid var(--rule);font-family:var(--mono);
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-deep);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;white-space:nowrap}
.tzv-fuss b{font-weight:400;font-size:11px;letter-spacing:0;color:var(--glow);transition:transform .16s ease}
a.tz:hover .tzv-fuss b{transform:translateX(2px)}
@supports not ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))){
  .tz-vorschau{background:rgba(244,241,234,.9)}
}
/* Nummer und Name der Kachel weichen, solange die Vorschau liegt — durch das
   durchscheinende Blatt stünden sie sonst doppelt. */
.tz-nr,.tz-name{transition:opacity .16s ease}
@media (hover:hover){
  .tz-vorschau{display:flex}
  .tz:hover .tz-vorschau,a.tz:focus-visible .tz-vorschau{opacity:1}
  .tz:hover .tz-nr,.tz:hover .tz-name{opacity:0}
}
a.tz:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
a.tz:focus-visible .tz-vorschau{display:flex;opacity:1}
a.tz:focus-visible .tz-nr,a.tz:focus-visible .tz-name{opacity:0}
.auf-satz{grid-area:satz;padding:32px 34px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.auf-eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--glow);margin-bottom:20px}
.auf-titel{font-family:var(--display);font-weight:600;font-size:clamp(38px,5.4vw,68px);line-height:1.02;
  letter-spacing:-.015em;text-wrap:balance}
.auf-autor{font-size:14px;color:var(--ink-soft);margin-top:22px}
.auf-autor b{font-weight:600}
.auf-deck{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-soft)}
.auf-mehr{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--glow);
  text-decoration:none;display:inline-block;border-bottom:1px solid var(--glow);padding-bottom:3px;margin-top:18px}
.auf-fuss{grid-area:fuss;display:grid;grid-template-columns:auto auto 1fr;border-top:1px solid var(--ink)}
.auf-fuss span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  padding:11px 18px;color:var(--ink)}
.auf-fuss span+span{border-left:1px solid var(--ink);color:var(--stone-deep)}
.bildcap{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--stone);line-height:1.7;
  padding-top:11px}
/* ---------- Filter ---------- */
.filter{max-width:var(--wide);margin:52px auto 0;padding:0 28px;border-bottom:1px solid var(--ink);
  scroll-margin-top:var(--chrome);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 26px}
.filter .titel{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--stone-deep);padding:0 0 12px}
.filter .strich{width:1px;height:15px;background:var(--rule);align-self:center;margin-bottom:10px}
/* Die Chips liegen im Sog des klebenden Kopfs: wer per Sprungziel oder
   scrollIntoView hier landet, hätte sie sonst unter Masthead und Leiste. */
.chip{scroll-margin-top:calc(var(--chrome) + 12px);
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:none;
  border:0;border-bottom:2px solid transparent;cursor:pointer;color:var(--ink-soft);padding:0 0 10px}
.chip[aria-pressed="true"]{color:var(--glow);border-bottom-color:var(--glow)}
.chip:hover{color:var(--ink)}
/* ---------- Reihe ---------- */
.reihe{max-width:var(--wide);margin:0 auto;padding:42px 28px 0;scroll-margin-top:var(--chrome)}
/* Zwischen den Reihen trennt das Holzband (margin:64px); die letzte Reihe
   stiesse ohne das hier direkt an den Seitenfuss. 76px wie .schluss. */
.reihe:last-of-type{padding-bottom:76px}
/* Der Reihen-Kopf klebt unter dem Seitenkopf, solange die Reihe im Bild ist —
   sonst weiss man nach ein paar Kammern nicht mehr, in welcher Reihe man liest.
   Vom Abstand nach oben trägt der Kopf nur die 16px, die er im geklebten
   Zustand als Luft zur Leiste braucht; die restlichen 42px liegen an der
   Sektion — sonst klebte der Kopf mit 58px Leerraum über sich. */
.r-kopf{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:26px;
  padding:16px 0 18px;border-bottom:1px solid var(--ink);
  position:sticky;top:var(--chrome);z-index:40;background:var(--paper)}
.r-b{font-family:var(--display);font-weight:600;font-size:clamp(52px,7vw,92px);line-height:.8;
  color:var(--ink);letter-spacing:-.03em}
.r-name{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.05;margin:0}
.r-unter{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--stone-deep);margin-top:9px}
.r-stand{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--stone-deep);text-align:right;white-space:nowrap}
.r-stand b{color:var(--glow);font-weight:500}
.r-koerper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.85fr);gap:0}
.r-koerper.rechts{grid-template-columns:minmax(0,2.85fr) minmax(0,1fr)}
.r-bild{padding:26px 26px 26px 0;border-right:1px solid var(--rule)}
.r-koerper.rechts .r-bild{order:2;padding:26px 0 26px 26px;border-right:0;border-left:1px solid var(--rule)}
.r-inhalt{padding:0 0 0 26px}
.r-koerper.rechts .r-inhalt{order:1;padding:0 26px 0 0}
.halt{position:sticky;top:calc(var(--chrome) + var(--rkopf) + 24px)}
/* ---------- Themenfeld ---------- */
.tfband{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:20px;
  padding:32px 0 14px;border-bottom:1px solid var(--rule)}
.tfband .nr{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--stone-deep);white-space:nowrap}
.tfband h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.15}
.tfband h3 small{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--ink-soft);
  margin-top:4px;letter-spacing:0}
.tfband .stand{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);white-space:nowrap}
/* ---------- Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px 0 4px}
.kachel{border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;
  text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
a.kachel:hover{transform:translateY(-2px);box-shadow:6px 6px 0 var(--stone-light)}
.kachel.breit{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"a b" "c c"}
.kachel.breit .k1{grid-area:a;border-bottom:0;border-right:1px solid var(--ink);padding:30px 26px 24px}
.kachel.breit .k1 h4{font-size:29px}
.kachel.breit .k2{grid-area:b;border-bottom:0;padding:30px 26px 24px}
.kachel.breit .k3{grid-area:c;border-top:1px solid var(--ink)}
.k1{padding:26px 22px 18px;border-bottom:1px solid var(--ink)}
.k1 .neu{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--glow);border:1px solid var(--glow);padding:2px 7px;display:inline-block;margin-bottom:12px}
.k1 h4{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.14;letter-spacing:-.008em;
  text-wrap:balance}
.k1 .autor{font-size:13px;color:var(--ink-soft);margin-top:10px}
.k1 .autor b{font-weight:600;color:var(--ink)}
.k2{padding:18px 22px 16px;border-bottom:1px solid var(--ink);flex:1;display:flex;flex-direction:column;
  justify-content:space-between;gap:20px}
.k2 p{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.k2 .mehr{align-self:flex-end;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--glow)}
.k2 .mehr.geplant{color:var(--stone)}
.k1 .vorb{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep);border:1px solid var(--rule);padding:2px 7px;display:inline-block;margin-bottom:12px}
.k3{display:grid;grid-template-columns:auto 1fr}
.k3 span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;padding:10px 14px}
.k3 span+span{border-left:1px solid var(--ink);color:var(--stone);text-align:right}
/* Geplante Kapitel stehen im Raster wie erschienene, sind aber nicht begehbar.
   Graue Schrift hinter einer gestrichelten Aussenkontur nimmt sie zurück; die
   Innenlinien bleiben durchgezogen, damit die Kachel nicht zerfällt. Das Papier
   bleibt stehen — siehe --grau-linie oben, warum keine Fläche. Der Haken ist
   das data-status, das kachel() ohnehin schon schreibt. */
.kachel[data-status="geplant"]{border-style:dashed;border-color:var(--grau-linie)}
.kachel[data-status="geplant"] .k1,
.kachel[data-status="geplant"] .k2{border-bottom-color:var(--grau-linie)}
.kachel[data-status="geplant"] .k3 span+span{border-left-color:var(--grau-linie)}
.kachel[data-status="geplant"] .k1 .vorb{border-color:var(--grau-linie)}
.kachel[data-status="geplant"] .k1 h4,
.kachel[data-status="geplant"] .k1 .vorb,
.kachel[data-status="geplant"] .k2 p,
.kachel[data-status="geplant"] .k3 span{color:var(--grau-text)}
.kachel[data-status="geplant"] .k1 .autor,
.kachel[data-status="geplant"] .k1 .autor b{color:var(--grau-text);font-weight:400}
/* Nachrangig, aber auf dem Papier noch 4.7:1 — die Meta-Zeile der erschienenen
   Kachel liegt mit --stone tiefer. */
.kachel[data-status="geplant"] .k2 .mehr.geplant,
.kachel[data-status="geplant"] .k3 span+span{color:var(--grau-meta)}
/* ---------- Zeichnung als Kachel ---------- */
.illu{border:1px solid var(--ink);display:flex;flex-direction:column;overflow:hidden;
  background:var(--tf-bg,var(--paper-alt))}
.illu-bild{flex:1;min-height:250px;display:flex;align-items:center;justify-content:center;padding:26px 30px}
.illu-bild > svg,.illu-bild > img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.illu-fuss{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--ink);background:var(--paper)}
.illu-fuss span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  padding:10px 14px}
.illu-fuss span+span{border-left:1px solid var(--ink);color:var(--stone);text-align:right}
/* ---------- Vorschau ---------- */
.vorschau{border:1px solid var(--rule);margin:22px 0 4px;background:var(--paper-alt)}
.v-kopf{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--stone-deep);padding:11px 16px;border-bottom:1px solid var(--rule)}
.v-zeile{display:grid;grid-template-columns:96px 1fr auto;align-items:baseline;gap:16px;padding:15px 16px;
  border-bottom:1px dashed var(--rule-soft);text-decoration:none}
.v-zeile:last-child{border-bottom:0}
.v-nr{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.v-t{font-size:14px;line-height:1.45;color:var(--stone-deep)}
.v-t b{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;
  color:var(--ink);margin-bottom:4px}
.v-d{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
  white-space:nowrap;text-align:right;line-height:1.9}
.ph-termin{font-style:normal;color:var(--glow);border-bottom:1px dashed var(--glow);padding-bottom:1px}
/* ---------- Reihenbild ---------- */
.rb{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--rule);background:var(--paper-alt)}
.rb img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block;
  filter:contrast(1.02)}
.rb-kz{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;padding-right:5%}
.rb-kz span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--body);font-weight:400;
  font-size:8.5px;letter-spacing:.14em;white-space:nowrap}
.rb-kz.creme span{color:#F4F1EA;opacity:.96;text-shadow:0 0 4px rgba(26,24,21,.75),0 0 1px rgba(26,24,21,.9)}
.rb-kz.ink span{color:#1A1815;opacity:.8}
.rb-marke{position:absolute;left:0;bottom:0;background:var(--paper);border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink);padding:7px 11px}
/* ---------- Holzband ---------- */
/* Die Holzstruktur liegt nicht mehr im Fuss. Im Einbau trägt caprilytics.com dort
   seinen eigenen, bewegten Seitenfuss – die Struktur wäre doppelt und ohne Aufgabe.
   Sie steht jetzt im Seitenlauf und unterbricht die lange Strecke aus Haarlinie,
   Schrift und Paper. Aufbau wie § 04 Differenziatoren: Struktur auf Stone,
   Text in Paper, keine Abdunklung. */
.holzband{background-color:var(--stone);background-image:url('../images/insights/struktur_jahresringe.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  margin:64px 0}
.hb-in{max-width:var(--wide);margin:0 auto;padding:54px 28px 46px}
.hb-eyebrow{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--paper);opacity:.7;margin-bottom:20px}
.hb-satz{font-family:var(--display);font-weight:600;font-size:clamp(27px,3.4vw,42px);line-height:1.14;
  color:var(--paper);max-width:19ch;text-wrap:balance;letter-spacing:-.01em}
.hb-satz+p{font-size:15px;line-height:1.66;color:var(--paper);opacity:.86;max-width:48ch;margin-top:20px}
.hb-quelle{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--paper);opacity:.66;margin-top:22px}
/* Leitsatz-Fassung: Satz links, Erläuterung rechts, dazwischen die Haarlinie.
   Sonst steht der Text in der linken Hälfte und die rechte bleibt leer. */
.hb-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.hb-zwei .hb-satz{max-width:15ch;padding-right:44px}
.hb-zwei .hb-rechts{padding-left:44px;border-left:1px solid hsla(42,31%,94%,.3);align-self:stretch}
.hb-zwei .hb-rechts p{font-size:15px;line-height:1.66;color:var(--paper);opacity:.86;max-width:44ch}
.hb-zwei .hb-eyebrow{grid-column:1/-1}
.hb-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:38px;
  border-top:1px solid hsla(42,31%,94%,.3)}
.hb-drei > div{padding:22px 26px 2px 0}
.hb-drei > div + div{border-left:1px solid hsla(42,31%,94%,.3);padding-left:26px}
.hb-drei .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);opacity:.64;display:block;margin-bottom:11px}
.hb-drei .hb-titel{font-family:var(--display);font-weight:600;font-size:19px;color:var(--paper);margin-bottom:8px}
.hb-drei p{font-size:13.5px;line-height:1.6;color:var(--paper);opacity:.86}
.hb-zeile{margin-top:34px;padding-top:15px;border-top:1px solid hsla(42,31%,94%,.3);
  display:flex;flex-wrap:wrap;gap:6px 32px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--paper);opacity:.8}
.holzband .ph-termin{color:var(--paper);border-bottom-color:hsla(42,31%,94%,.55)}
/* ---------- Beitragsseite ---------- */
/* ---------- Einordnung ---------- */
/* Wegweiser auf jeder Beitragsseite: dasselbe Reihenbild und dieselbe
   Themenfeld-Zeichnung wie auf der Übersicht. Der Leser sieht in einem Blick,
   in welchem Tor und in welcher Kammer er steht. */
.einordnung{max-width:var(--wide);margin:34px auto 0;padding:0 28px}
.eo{border:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr auto}
.eo-feld{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:18px 24px}
.eo-feld+.eo-feld,.eo-hier{border-left:1px solid var(--rule)}
.eo-bild{width:86px;flex:0 0 86px;border:1px solid var(--rule);overflow:hidden;line-height:0}
.eo-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.eo-illu{width:86px;aspect-ratio:4/5;border:1px solid var(--rule);background:var(--tf-bg);
  display:flex;align-items:center;justify-content:center;padding:9px 11px}
.eo-illu > svg,.eo-illu > img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.eo-txt .n{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep);display:block;margin-bottom:7px}
.eo-txt .eo-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.14;color:var(--ink)}
.eo-txt p{font-size:12.5px;line-height:1.45;color:var(--ink-soft);margin-top:5px}
/* Bild unter 200 px und Bedienelement im eigenen Auftritt: Pflichtzeile
   unmittelbar daneben, nach KI-Kennzeichnung v1.1 Abschnitt 4.1. */
.eo-txt .kz{font-family:var(--body);font-size:9.5px;line-height:1.4;color:var(--stone);margin-top:9px}
.eo-hier{padding:18px 24px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  min-width:150px}
.eo-hier .n{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep)}
.eo-hier .nr{font-family:var(--display);font-weight:600;font-size:21px;color:var(--glow);line-height:1}
.eo-hier .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--stone-deep)}
.eo-hier a{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow);padding-bottom:2px;
  align-self:start;margin-top:4px}
@media (max-width:880px){
  .eo{grid-template-columns:1fr}
  .eo-feld+.eo-feld,.eo-hier{border-left:0;border-top:1px solid var(--rule)}
}
.kstreifen{border-bottom:1px solid var(--ink);background:var(--paper)}
.kstreifen-in{max-width:var(--wide);margin:0 auto;padding:11px 28px;display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--stone-deep)}
.kstreifen-in .jetzt{color:var(--ink)}
/* Rück- und Vorwärtsweg als Paar am rechten Rand. Das margin sitzt an der
   Gruppe, nicht am Vorwärtslink — sonst schöbe der Rückweg ihn aus der Zeile. */
.kstreifen-nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.kstreifen-in .weiter,.kstreifen-in .zurueck-k{color:var(--glow);text-decoration:none}
.kstreifen-in .weiter:hover,.kstreifen-in .zurueck-k:hover{border-bottom:1px solid var(--glow)}
.kstreifen-in .kommt{color:var(--stone-deep)}
.titelzone{max-width:var(--lesen);margin:0 auto;padding:76px 28px 46px;text-align:center}
.titelzone .eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--glow);margin-bottom:24px}
.titelzone h1{font-family:var(--display);font-weight:600;font-size:clamp(40px,6.6vw,78px);line-height:1.02;
  letter-spacing:-.018em;text-wrap:balance}
.titelzone .deck{font-size:clamp(18px,2vw,23px);line-height:1.48;color:var(--ink-soft);max-width:48ch;
  margin:26px auto 0;text-wrap:balance}
.byline{max-width:var(--lesen);margin:34px auto 0;padding:0 28px;display:flex;justify-content:center}
.byline-in{display:flex;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);flex-wrap:wrap}
.byline-in span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  padding:11px 18px;color:var(--stone-deep);display:flex;align-items:center}
.byline-in .mit-bild{padding-left:10px}
.byline-in .autor-mini{width:26px;height:26px;margin-right:10px}
.byline-in span:first-child{color:var(--ink)}
.byline-in span+span{border-left:1px solid var(--rule)}
/* Volle Breite, weil die Tafel hier den Platz des Einordnungsbands einnimmt:
   sie trennt Kopf und Text, statt im Lesefluss zu stehen. Ihre Kacheln rechnen
   ausserdem mit dem breiten Mass — schmaler passen die vier Kapitelzeilen der
   Vorschau (tafelVorschau, platz: 4) nicht mehr in eine Kachel. */
.bleedbild{max-width:var(--wide);margin:52px auto 0;padding:0 28px}
.bleedbild .rahmen{border:1px solid var(--ink)}
.tafel-band{overflow:hidden}
.tafel-band .tafel{aspect-ratio:1200/520}
/* Nacharbeit 29.08.2026 · Unter 620px bricht die Tafel auf zwei Spalten mal
   vier Zeilen um und ihre Kacheln stehen dann im Quadrat (.tz unten). Das
   Seitenverhältnis von oben zwang den Rahmen trotzdem auf 520/1200 — der
   Inhalt war doppelt so hoch wie sein Kasten, und overflow:hidden schnitt die
   Kacheln 07 und 08 samt aller Kachelnamen weg. Hier bestimmt das Raster
   seine Höhe selbst. */
@media (max-width:620px){.tafel-band .tafel{aspect-ratio:auto}}
/* Im Beitrag ist die Tafel doppelt so gross wie im Aufmacher — die Vorschau
   darf dort mitwachsen. */
.tafel-band .tz-vorschau{padding:20px 20px 17px;gap:9px}
.tafel-band .tzv-claim{font-size:17px}
.tafel-band .tzv-liste li{font-size:13px}
.satz{max-width:var(--lesen);margin:0 auto;padding:66px 28px 20px;display:grid;
  grid-template-columns:minmax(0,660px) minmax(0,240px);gap:56px;justify-content:center}
/* Der Satz ist zweigeteilt, dazwischen liegt das Holzband mit dem Leitsatz.
   Die Randspalte läuft weiter, sie beginnt im zweiten Teil neu zu kleben. */
.satz.teil-a{padding-bottom:0}
.satz.teil-b{padding-top:0}
.satz.teil-b .rand{padding-top:0}
.spalte h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,34px);line-height:1.14;
  margin-bottom:22px;text-wrap:balance}
.spalte .marke{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--glow);padding-bottom:11px;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.spalte section{margin-bottom:56px}
.spalte p{margin-bottom:20px}
.spalte .tw{margin:34px 0}
.spalte p strong{font-weight:600}
.spalte .anriss{font-size:19.5px;line-height:1.55;color:var(--ink)}
.spalte .anriss::first-letter{font-family:var(--display);font-weight:600;font-size:3.5em;line-height:.82;
  float:left;margin:7px 11px 0 0}
/* Aufzählungszeichen: Schweizer Kreuz, Armverhältnis 6:20 nach Flaggennorm.
   Zurückgenommen in Stone, im Duktus des Halbgeviert-Aufzählungszeichens
   (.list-em-dash) auf caprilytics.com. Auf Alpine Glow oder Schweiz-Rot
   umstellbar – Schweiz-Rot wäre eine Systemänderung und braucht M. Bättig. */
/* Nummerierte Folgen (Ablauf-Schritte im Markdown) tragen ihre Zahl statt des
   Kreuzes — die Reihenfolge ist dort die Aussage. Gleiche Zeilenführung wie .kreuz. */
.spalte ol{list-style:none;counter-reset:schritt}
.spalte ol li{position:relative;padding-left:32px;margin-bottom:18px;counter-increment:schritt}
.spalte ol li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--glow)}
.kreuz{position:relative;list-style:none}
.kreuz li{position:relative;padding-left:24px;margin-bottom:18px}
.kreuz li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  background:var(--glow);
  clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
/* Markus' „Merksatz": mal vor dem ersten Abschnitt (Einordnung in die Serie,
   Rechtshinweis), mal mitten im Text (die Lehre des Kapitels). Abgesetzt, aber
   im Satz — Glow-Kante wie der Hinweis der Newsletter-Box, Kopfzeile in der
   Mono-Grammatik der Randnotizen. */
.merksatz{margin:32px 0;padding:19px 24px;background:var(--paper-alt);
  border-left:2px solid var(--glow)}
.merksatz .kopf{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--stone-deep);margin-bottom:10px}
.merksatz p{font-size:16.5px;line-height:1.55;color:var(--ink);margin:0}
.merksatz p strong{font-weight:600}
/* Der Serien-Merksatz besteht halb aus Verweisen — sie müssen als solche
   lesbar sein. Glow trägt die Linie, nicht die Schrift (Nacharbeit 12.08.). */
.merksatz a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--glow);
  padding-bottom:1px}
.merksatz a:hover{color:var(--glow)}
.spalte .fortlauf{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--glow)}
.spalte a.weiterlink{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow);padding-bottom:3px}
.zitat{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,29px);line-height:1.24;
  border-left:3px solid var(--glow);padding-left:24px;margin:40px 0}
.rand{padding-top:6px}
/* Nur einspaltig sichtbar, siehe Media Query weiter unten. */
.rand-marke{display:none;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--stone-deep);padding-bottom:14px}
.rand .note{border-top:1px solid var(--ink);padding:12px 0 22px;margin-bottom:26px}
.rand .note .kopf{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep);margin-bottom:8px}
.rand .note p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0}
.rand .note .quelle{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);margin-top:9px;display:block}
.rand .note.zahl p{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.15;color:var(--ink)}
.rand .note.offen{border-top-color:var(--glow)}
.rand .note.offen p{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--glow);line-height:1.6}
.weiterlesen{max-width:var(--lesen);margin:0 auto;padding:0 28px 70px;display:grid;
  grid-template-columns:minmax(0,660px) minmax(0,240px);gap:56px;justify-content:center}
.naechst{border:1px solid var(--ink)}
.naechst .kopf{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr);
  color:var(--stone-deep);padding:14px 22px;border-bottom:1px solid var(--ink)}
.naechst .inhalt{padding:26px 22px}
.naechst h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.naechst a{display:inline-flex;gap:9px;margin-top:22px;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--glow);text-decoration:none;
  border-bottom:1px solid var(--glow);padding-bottom:3px}
.naechst .soon{display:inline-block;margin-top:22px}
.zurueckbox{border-top:1px solid var(--ink);padding-top:14px}
.zurueckbox .kopf{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep);margin-bottom:9px}
.zurueckbox p{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.zurueckbox p b{font-weight:600;color:var(--ink)}
.zurueckbox .wege{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.zurueckbox a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow);padding-bottom:3px}
.autorzeile{max-width:var(--lesen);margin:0 auto;padding:0 28px 70px}
.autorzeile .box{border-top:1px solid var(--ink);padding-top:26px;display:flex;gap:32px;
  align-items:center;flex-wrap:wrap}
/* Autorenbild Markus Bättig · einfarbig, Grundfassung Ink auf Paper */
.autorzeile .portrait{width:208px;height:260px;border:1px solid var(--rule);object-fit:cover;display:block}
.autorzeile .marke-autor{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:var(--tr);color:var(--stone-deep);margin-bottom:12px}
.autor-mini{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--rule);
  display:inline-block;vertical-align:middle;margin-right:9px}
.rand .autor-rand{border-top-color:var(--ink)}
.rand .rund{width:170px;max-width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:1px solid var(--rule);margin:0 0 14px}
/* Ausschnitt ist bereits quadratisch beschnitten (740 x 740 aus dem Original,
   Kopf mittig, Schulteransatz sichtbar) – deshalb hier kein Nachschieben mehr. */
.rand .rund img{width:100%;height:100%;object-fit:cover;margin:0;display:block}
.rand .wer{font-size:13px;line-height:1.45;color:var(--ink-soft)}
.rand .wer b{color:var(--ink);font-weight:600}
/* Kreis kann die Zeile am Bildrand nicht tragen – Hinweis steht unmittelbar daneben,
   nach KI-Kennzeichnung v1.1 Abschnitt 4.1, Regel für beschnittene Formen */
.rand .rund-kz{font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--ink);
  margin-top:12px;padding-top:9px;border-top:1px solid var(--rule-soft);line-height:1.4}
.rand .rund-kz span{display:block;font-weight:400;font-size:9.5px;color:var(--stone);margin-top:2px}
.autorzeile .who{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.15}
.autorzeile .rolle{font-size:14.5px;color:var(--ink-soft);margin-top:4px}
.autorzeile .kontakt{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--stone-deep);margin-top:14px}
.autorzeile .kontakt a{color:var(--glow);text-decoration:none}
/* Deepfake-Regel, Modul Abschnitt 2: reale Person generativ dargestellt.
   Der Hinweis steht prominent, nicht am Bildrand. */
.autorzeile .portraet-rahmen{position:relative;line-height:0;flex:0 0 auto;margin:0}
.autorzeile .portraet-kz{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;
  padding-right:5%}
.autorzeile .portraet-kz span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--body);
  font-weight:400;font-size:7px;letter-spacing:.1em;color:var(--ink);opacity:.75;white-space:nowrap}
.autorzeile .portraet-kz .ph-termin{border-bottom-color:var(--ink);color:var(--ink)}
/* ---------- Reaktion ---------- */
@media (max-width:1180px){
  .r-koerper,.r-koerper.rechts{grid-template-columns:1fr}
  .r-bild,.r-koerper.rechts .r-bild{order:2;border:0;padding:26px 0 0}
  .r-inhalt,.r-koerper.rechts .r-inhalt{order:1;padding:0}
  .halt{position:static}
  /* Einspaltig ist der Kopf ohnehin nah am Inhalt, und unter 1024px liegt die
     Leiste hinter dem Schalter — --chrome stimmte dann nicht mehr. */
  .r-kopf{position:static}
}
@media (max-width:1180px){
  .auf-bild{min-height:400px}
  .tz{padding:12% 10% 14%}
}
/* ---- Leiste als Panel unter dem Schalter (Nacharbeit 29.08.2026) ----

   Vorher brach die Leiste bei 880px in zwei Zeilen um, jede mit
   overflow-x:auto. Das war gleich dreifach kaputt: der Scroll-Container
   beschnitt die absolut liegenden Dropdown-Panels (die einzige Navigation der
   Bibliothek war nicht bedienbar), «Zur Website» endete rechts ausserhalb des
   Bildes, und der Kopf wuchs auf 139px statt der 99px, mit denen --chrome
   rechnet — jedes Sprungziel landete darunter.

   Die Grenze liegt bei 1023px und nicht mehr bei 880px, weil die
   ausgeschriebene Leiste gemessene 1010px braucht: zwischen 881 und 1009 lief
   sie über den rechten Rand hinaus, mit bis zu 129px Seitenüberlauf. Der
   Umbruch bei 880 war dafür schlicht zu spät angesetzt (Befund vom
   29.08.2026, im Stand davor identisch messbar). 1023 statt 1010, damit die
   Bibliothek an derselben Breite umschaltet wie die Nav der Hauptsite —
   deren Schalter hängt an Tailwinds `lg`, also unter 1024px.

   Jetzt: eine Zeile je Eintrag, volle Breite, 48px hoch. Der Schalter im
   Masthead klappt sie auf und zu.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .leiste-in{flex-direction:column;align-items:stretch}
  .leiste-l,.leiste-r{flex-direction:column;align-items:stretch}
  /* Die senkrechten Trenner der Zeile ergeben untereinander keinen Sinn —
     hier trennt die Linie unter jedem Eintrag. */
  .leiste .sep{display:none}
  .leiste a,.leiste .zelle,.leiste summary{padding:0 18px;min-height:48px;
    border-bottom:1px solid var(--rule-soft);white-space:normal}
  .leiste-r a:last-child{border-bottom:0}
  /* Der Rückweg steht zuoberst und trägt die Farbe, die ihn als Rückweg
     ausweist; die Trennlinie darunter ist kräftiger, weil danach die
     Bibliotheks-Ordnung beginnt. */
  .leiste .zurueck{border-bottom-color:var(--ink)}
  .leiste .invers{justify-content:center}
  /* Das Dropdown liegt im Panel im Fluss statt darüber: absolut positioniert
     wäre es wieder das alte Problem, nur eine Ebene tiefer. Eingerückt, damit
     man sieht, dass die Zeilen zur Kammer darüber gehören. Diese Regel löst
     die Nacharbeit vom 12.08.2026 ab, die das Panel unter 900px auf 320px
     deckelte — im Fluss nimmt es die volle Breite der Leiste. */
  details.dd>summary::after{margin-left:auto;transition:transform .18s ease}
  details.dd[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
  .dd-panel{position:static;width:auto;min-width:0;border:0;box-shadow:none;
    background:var(--paper-alt)}
  .dd-panel a{padding-left:34px;min-height:44px;border-bottom:1px solid var(--rule-soft)}
  .dd-panel a:last-child{border-bottom:1px solid var(--rule-soft)}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  details.dd>summary::after{transition:none}
}

@media (max-width:880px){
  .auf-rahmen{grid-template-columns:1fr;grid-template-areas:"bild" "satz" "fuss"}
  .auf-bild{border-right:0;border-bottom:1px solid var(--ink);min-height:0;aspect-ratio:16/9}
  .tz-name{font-size:8px}
  .kacheln{grid-template-columns:1fr}
  .kachel.breit{grid-template-columns:1fr;grid-template-areas:"a" "b" "c"}
  .kachel.breit .k1{border-right:0;border-bottom:1px solid var(--ink)}
  .kachel.breit .k2{border-bottom:1px solid var(--ink)}
  .kachel.breit .k3{border-top:0}
  .hb-drei{grid-template-columns:1fr}
  .hb-drei > div{padding:20px 0 2px}
  .hb-drei > div + div{border-left:0;border-top:1px solid hsla(42,31%,94%,.3);padding-left:0}
  .hb-zwei{grid-template-columns:1fr}
  .hb-zwei .hb-satz{max-width:100%;padding-right:0}
  .hb-zwei .hb-rechts{padding:22px 0 0;margin-top:22px;border-left:0;
    border-top:1px solid hsla(42,31%,94%,.3)}
  .n-in{grid-template-columns:1fr}
  .n-in>*{border-left:0!important;border-top:1px solid var(--rule)}
  .n-in .l{border-top:0}
}
@media (max-width:620px){
  .auf-bild{aspect-ratio:auto;min-height:0}
  .tafel{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
  .tz{aspect-ratio:1/1;padding:14% 12% 16%}
  .tz:nth-child(4n){border-right:1px solid rgba(26,24,21,.14)}
  .tz:nth-child(2n){border-right:0}
  .tz:nth-last-child(-n+4){border-bottom:1px solid rgba(26,24,21,.14)}
  .tz:nth-last-child(-n+2){border-bottom:0}
  .mh-in,.aufmacher,.filter,.reihe,.titelzone,.byline,.bleedbild,.satz,.weiterlesen,.autorzeile,.hb-in{padding-left:18px;padding-right:18px}
  .r-kopf{grid-template-columns:auto 1fr;gap:18px}
  .r-stand{grid-column:1/-1;text-align:left}
  .tfband{grid-template-columns:1fr;gap:8px}
  .v-zeile{grid-template-columns:1fr;gap:5px}
  .auf-fuss{grid-template-columns:1fr}
  .auf-fuss span+span{border-left:0;border-top:1px solid var(--rule)}
}
/* ---------- Vorspann ohne Initial ---------- */
.vorspann{max-width:var(--lesen);margin:0 auto;padding:52px 28px 0;display:grid;
  grid-template-columns:minmax(0,660px) minmax(0,240px);gap:56px;justify-content:center}
.vorspann .anriss{font-family:var(--body);font-size:20.5px;line-height:1.5;color:var(--ink)}
.kurz{border-top:1px solid var(--ink);margin-top:34px;padding-top:16px}
.kurz .kopf{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep);margin-bottom:18px}
.kurz ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.kurz li{position:relative;padding:0 22px 0 24px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.kurz li+li{border-left:1px solid var(--rule);padding-left:46px}
.kurz li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--glow);
  clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.kurz li+li::before{left:22px}
.note.beleg .kopf{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--stone-deep);margin-bottom:11px}
.note.beleg p{font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.04em;
  color:var(--stone-deep);margin:0}
/* ---------- Diagramme ---------- */
.diagramm{max-width:var(--lesen);margin:46px auto 0;padding:0 28px}
.diagramm .rahmen{border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.diagramm .rahmen svg{display:block;width:100%;height:auto}
/* ---------- Ergebnistabelle ---------- */
/* Die Tabelle ist der Beweis dieses Beitrags. Sie steht auf der Satzbreite,
   Zahlen in JetBrains Mono, tabellarische Ziffern, eigene Zeile in Alpine Glow. */
.tabellenblock{max-width:var(--lesen);margin:56px auto 0;padding:0 28px}
.tabellenblock .marke{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:var(--tr);color:var(--glow);padding-bottom:11px;margin-bottom:18px;
  border-bottom:1px solid var(--rule)}
.tabellenblock h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,34px);
  line-height:1.14;margin-bottom:26px;max-width:22ch}
.mtab{width:100%;border-collapse:collapse;font-size:14px}
.mtab thead th{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--stone-deep);text-align:left;padding:0 14px 11px 0;border-bottom:1px solid var(--ink);
  font-weight:400;vertical-align:bottom}
.mtab td{padding:13px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.mtab td:first-child{padding-left:0}
.mtab td:last-child{padding-right:0}
.mtab thead th:first-child{padding-left:0}
.mtab thead th:last-child{padding-right:0}
.mtab .z{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--ink);text-align:right;white-space:nowrap}
.mtab thead th.r{text-align:right}
.mtab .name{font-weight:600;color:var(--ink)}
.mtab .anb{color:var(--stone-deep);font-size:13px}
.mtab tr.wahl td{background:hsla(19,77%,45%,.06);border-bottom-color:var(--glow)}
.mtab tr.wahl .name,.mtab tr.wahl .z{color:var(--glow)}
.mtab tr.wahl .marke{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--paper);background:var(--glow);padding:3px 7px 2px;
  margin-left:10px;white-space:nowrap;vertical-align:2px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Fussnoten der Ergebnistabelle: sie gehören zur Tabelle und laufen auf deren
   Breite — untereinander, nicht in Spalten. */
.tabfuss{font-size:12.5px;line-height:1.65;color:var(--ink-soft);margin-top:18px}
.tabfuss sup{color:var(--glow)}
.tabfuss+.tabfuss{margin-top:13px}
/* ---------- Verweise ---------- */
.teile{list-style:none;border-top:1px solid var(--rule);margin-top:6px}
.teile li{border-bottom:1px solid var(--rule)}
.teile a{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:13px 0;
  text-decoration:none;color:var(--ink)}
.teile a:hover{color:var(--glow)}
.teile .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--stone-deep);white-space:nowrap}
.teile .t{font-size:15px;line-height:1.4}
/* Das Leseraster klappt auf eine Spalte, sobald --lesen (1012px) nicht mehr
   ins Bild passt — nicht schon bei 1180, sonst liefe der Fliesstext im Band
   dazwischen einspaltig über die ganze Breite. */
@media (max-width:1012px){
  .satz,.weiterlesen,.vorspann{grid-template-columns:minmax(0,1fr)}
  .rand{border-top:1px solid var(--ink);padding-top:26px}
  /* Einspaltig folgen die Notizkarten auf einen langen Satzblock und
     hätten dort keine Ansage mehr — neben dem Text sagte die Spalte
     selbst, was sie sind. Die Zeile ersetzt diesen Hinweis.
     Die Karten gehören zum Block, nicht zu einem einzelnen Absatz:
     es sind Begriffe, Kennzahlen und Querverweise, jede mit eigener
     Überschrift und Quelle. Darum eine Ansage für die Gruppe und
     keine Einsortierung zwischen die Absätze. */
  .rand-marke{display:block}
  .rand .note:first-of-type{border-top:0;padding-top:0}
  .kurz ul{grid-template-columns:1fr}
  .kurz li,.kurz li+li{border-left:0;padding:0 0 0 24px;margin-bottom:13px}
  .kurz li+li::before{left:0}
}
@media (max-width:620px){
  .diagramm,.tabellenblock,.vorspann{padding-left:18px;padding-right:18px}
}
/* Nacharbeit 12.08.2026 · Tabelle auf Schmalformat scrollbar statt Seitenüberlauf */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){.tw table{min-width:640px}}
/* Nacharbeit 29.08.2026 · Die Ergebnistabelle blendete auf Schmalformat zwei
   Spalten per display:none aus (ab 880 «Routing», ab 620 «Qualität»). Damit
   standen auf dem Telefon nur noch Modell und Anbieter im Bild — unter einer
   Überschrift, die «die Zahlen» verspricht, und ohne Weg zu den Werten: die
   ausgeblendeten Spalten waren auch beim Wischen nicht zu erreichen. Die
   Regeln sind ersatzlos weg; sichtbar bleibt die Tabelle über den Schwenk in
   .tw, den es seit dem 12.08. ohnehin gibt.

   Damit der Schwenk lesbar ist, klebt die Modellspalte am linken Rand — ohne
   sie wüsste man nach zwei Wischern nicht mehr, wessen Zahlen man liest. Sie
   braucht einen deckenden Grund, sonst scheinen die durchziehenden Zellen
   hindurch; die Wahl-Zeile bekommt ihren Farbstich als Verlaufsschicht über
   Papier statt als halbdurchsichtige Fläche, damit sie gleich aussieht wie
   die übrigen Zellen der Zeile. */
@media (max-width:900px){
  .tw .mtab thead th:first-child,
  .tw .mtab td:first-child{position:sticky;left:0;z-index:1;background:var(--paper);
    /* Kante nach rechts: sie trennt die klebende Spalte vom Schwenk und ist
       zugleich der Hinweis, dass rechts noch etwas liegt. */
    box-shadow:6px 0 7px -6px rgba(26,24,21,.22)}
  .tw .mtab tr.wahl td:first-child{
    background:linear-gradient(hsla(19,77%,45%,.06),hsla(19,77%,45%,.06)),var(--paper)}
}
/* Wischhinweis über der Tabelle. Steht im Markup (insights-render.js) und
   zeigt sich nur, wo die Tabelle wirklich breiter ist als ihr Rahmen. */
.tw-hinweis{display:none}
@media(max-width:900px){
  .tw-hinweis{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
    letter-spacing:.12em;color:var(--stone-deep);padding-bottom:9px}
}
.tw:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
/* Die Nacharbeit vom 12.08.2026 deckelte das Dropdown unter 900px auf 320px,
   damit es nicht aus dem Bild lief. Sie ist am 29.08.2026 entfallen: unter
   1024px steht das Panel im Fluss der aufgeklappten Leiste (siehe
   Leiste-als-Panel weiter oben) und nimmt deren volle Breite, darüber gibt es
   kein Schmalformat mehr. Stehen geblieben hätte sie geschadet — sie kommt
   später in der Datei und hätte das Fluss-Panel nach Quellreihenfolge wieder
   auf zwei Drittel der Breite zurückgeschnitten. */

/* ---------- Auf- und Zuklappen der Leiste (Nacharbeit 29.08.2026) ----------

   Die Klasse `hat-schalter` setzt app.js — und zwar im selben Zug, in dem es
   den Schalter im Masthead einblendet. Damit gibt es keinen Zustand, in dem
   die Leiste zugeklappt ist, ohne dass ein Knopf sie öffnen könnte: ohne
   Javascript bleibt sie schlicht offen stehen, gestapelt und vollständig
   bedienbar. Sie ist der einzige Weg durch die Bibliothek und darf nicht
   hinter einem toten Knopf verschwinden.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .leiste.hat-schalter:not(.offen) .leiste-in{display:none}
  /* Zugeklappt bliebe sonst die eigene Unterkante als zweite Linie direkt
     unter der des Mastheads stehen. */
  .leiste.hat-schalter:not(.offen){border-bottom:0}
  /* Offen klebt das Panel unter dem Masthead und trägt seinen eigenen
     Scroll: aufgeklappt ist es rund 400px hoch, im Querformat eines Telefons
     mehr als der ganze Bildschirm. Ohne die eigene Höhe käme man an die
     unteren Zeilen nicht heran. */
  .leiste.hat-schalter.offen .leiste-in{max-height:calc(100dvh - var(--chrome-kopf));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}

/* Der Masthead ist auf Schmalformat der ganze klebende Kopf — die Leiste
   darunter ist zugeklappt 0 hoch. `--chrome` trägt genau diese Höhe: an ihr
   hängen die Sprungziele (.filter, .reihe, .chip haben scroll-margin-top),
   und die zielt der Masthead selbst an (?reihe=A#reihe-A, ?zg=tech#raster).
   Mit den 99px der Schreibtisch-Fassung landete jedes davon unter dem Kopf.
   58 = 57px Masthead plus 1px Luft (zugeklappt trägt die Leiste keine
   eigene Unterkante mehr); --chrome-kopf hält denselben Wert für die
   Panel-Höhe oben bereit. */
@media (max-width:1023px){
  :root{--chrome:58px;--chrome-kopf:58px;--rkopf:58px}
}
/* Der Kicker neben der Wortmarke brach unter 360px auf zwei Zeilen um und
   schob den Masthead von 57 auf 71px — womit --chrome wieder nicht stimmte.
   Er kürzt jetzt lieber ab. */
@media (max-width:1023px){
  /* Das Polster der Schreibtisch-Fassung (18px oben und unten) trieb den
     Masthead mit dem 44px hohen Schalter darin auf 81px — ein Siebtel des
     Telefonbildschirms, klebend. 6px halten die Leiste bei 57px und lassen
     dem Schalter seine 44px Trefferfläche. */
  .mh-in{padding:6px 18px;gap:14px}
  .mh-marke{min-width:0;flex:1 1 auto}
  .mh-marke .kicker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* Nacharbeit 12.08.2026 · Diagramme skalieren mit, statt das Bild zu sprengen */
.bleedbild .rahmen svg,.diagramm .rahmen svg{display:block;width:100%;height:auto;max-width:100%}

/* ---------- Nacharbeit 29.08.2026 · Diagramme auf dem Telefon ----------

   «Skaliert mit» reicht nicht: die Zeichnungen sind 960 Nutzereinheiten breit
   und ihre Beschriftungen 9,5 davon. In einem 337px-Rahmen ist das Faktor
   0,35 — die Punktbeschriftungen landen bei 3,3px und sind nicht zu lesen.

   Schwenken wie die Tabelle hilft hier nicht: das Streudiagramm in A-01 lebt
   davon, dass man Treffsicherheit und Preis nebeneinander sieht. Durch einen
   375px-Schlitz geschoben ist die Zeichnung lesbar und die Aussage weg.

   Darum die Lupe: ein Tipp aufs Bild öffnet es formatfüllend (app.js,
   dialog.bildlupe), dort lässt es sich aufziehen.

   Eine Bildunterschrift stand hier bis zum 06.09.2026 daneben. Wieder
   entfernt: den Befund trägt der Fliesstext selbst, dort genauer als die
   Unterschrift ihn wiedergab (siehe DIAGRAMME in insights-taxonomie.js).
   -------------------------------------------------------------------------- */

/* Der Knopf steht unter dem Rahmen, nicht darauf: als Auflage verdeckte er
   Bildinhalt — in B-01 den fünften Schritt der Schleife —, und eine Ecke, die
   in jeder Zeichnung frei bleibt, gibt es nicht. Er trägt nur am Touchgerät
   eine sichtbare Marke; am Schreibtisch ist das Bild ohnehin gross genug.
   Steht `hidden` im Markup und wird von app.js eingeblendet; ohne Javascript
   gibt es ihn nicht. */
.bildlupe-knopf{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  padding:0 15px;cursor:pointer;min-height:44px}
.bildlupe-knopf::before{content:"";width:11px;height:11px;flex:none;
  border:1.2px solid currentColor;border-radius:50%;
  box-shadow:0 0 0 0 currentColor;position:relative}
.bildlupe-knopf:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bildlupe-knopf:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
/* display:inline-flex oben schlägt die Preflight-Regel [hidden]{display:none} —
   gleiche Spezifität, und insights.css lädt nach output.css. Ohne diese
   Zeile stünde der Knopf auch ohne Javascript da und täte nichts. */
.bildlupe-knopf[hidden]{display:none}
@media (min-width:901px){.bildlupe-knopf{display:none}}

/* Formatfüllende Fassung. Der Rahmen scrollt in beiden Richtungen, das SVG
   steht darin in seiner eigenen Breite (min-width) statt auf Bildschirmmass —
   erst dadurch werden die Beschriftungen gross genug. Wer die Übersicht will,
   zieht mit zwei Fingern auf; touch-action lässt das zu. */
dialog.bildlupe{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;
  border:0;background:var(--paper);color:var(--ink);overflow:hidden;
  /* Spaltenfluss statt gerechneter Bühnenhöhe: der Kopf trägt den Titel der
     Zeichnung und wird je nach Länge ein- bis dreizeilig — ein festes
     calc(100dvh - 71px) schob den Fussbereich aus dem Bild. */
  flex-direction:column}
/* display:flex oben schlägt die Browser-Regel dialog:not([open]){display:none} —
   Autor-CSS gewinnt gegen das UA-Stylesheet unabhängig von der Spezifität.
   Ohne diese Zeile stünde der Dialog dauerhaft offen. Dieselbe Falle wie bei
   .bildlupe-knopf[hidden] weiter oben. */
dialog.bildlupe[open]{display:flex}
dialog.bildlupe:not([open]){display:none}
dialog.bildlupe::backdrop{background:rgba(26,24,21,.55)}
.bildlupe-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 18px;background:var(--paper);border-bottom:1px solid var(--ink)}
.bildlupe-kopf p{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--stone-deep);margin:0;min-width:0;
  /* Lange aria-Labels auf zwei Zeilen kürzen, sonst drückt der Titel den
     Schliessen-Knopf aus dem Bild. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bildlupe-zu{flex:none;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);padding:0 16px;cursor:pointer;
  min-height:44px;min-width:44px;white-space:nowrap}
.bildlupe-zu:hover{background:var(--glow);border-color:var(--glow)}
.bildlupe-buehne{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;padding:18px}
/* 1100px sind kein runder Zufall: die Beschriftungen der Zeichnungen messen
   9,5 Nutzereinheiten bei 960 Einheiten Bildbreite. Erst ab Faktor 1,16 –
   also rund 1100px – liegen sie über 11px und damit im lesbaren Bereich.
   Wer mehr will, zieht mit zwei Fingern auf. */
.bildlupe-buehne svg{display:block;width:auto;height:auto;min-width:1100px;max-width:none}
@media (prefers-reduced-motion:no-preference){
  dialog.bildlupe[open]{animation:bildlupe-auf .18s ease}
}
@keyframes bildlupe-auf{from{opacity:0}to{opacity:1}}
/* ---- Nacharbeit 12.08.2026 · Befunde optischer Durchgang + KI-Kennzeichnung 2.0 ---- */
/* Kleinschrift von Stone auf Ink-Soft: Stone gilt erst ab 14 px */
.bildcap,.illu-fuss span+span,.rand .note .quelle,.eo-txt .kz,.tabfuss{color:var(--ink-soft)}
.kstreifen-in .zelle{color:var(--ink-soft)}
/* KI-Kennzeichnung nach Fassung 2.0 · Zeichen und Wortlaut als Zeile am Bild */
.kzz{display:flex;align-items:center;gap:8px;margin-top:9px;
  font-family:var(--body);font-size:12px;line-height:1;color:var(--ink)}
.kzz img{width:24px;height:24px;display:block}
.eo-txt .kzz{margin-top:7px;font-size:11px}
.eo-txt .kzz img{width:20px;height:20px}
.autorzeile .kzz{margin-top:10px}
.autorbild{display:flex;flex-direction:column;align-items:flex-start}
/* Alpine Glow nur noch als Marke in der Tabellenzeile, Werte in Ink */
.wahl .name,.mtab tr.wahl .z{color:var(--ink)}
.wahl .name{font-weight:600}
/* Alpine Glow nicht als Fliesstext */
.spalte p a.weiterlink.satzlink{color:var(--ink);border-bottom:0}
.spalte p a.weiterlink.satzlink b{color:var(--glow);border-bottom:1px solid var(--glow);
  padding-bottom:2px;font-weight:400}
/* ---- Nacharbeit 12.08.2026 · KI-Kennzeichnung am Rundbild hochkant rechts ---- */
.rund-blk{display:flex;align-items:flex-end;gap:11px;margin:0 0 14px}
.rund-blk .rund{margin:0;flex:0 0 auto}
.kzz-hoch{display:flex;flex-direction:column;align-items:center;gap:9px;
  margin:0 0 6px;font-family:var(--body);font-size:11px;line-height:1;color:var(--ink)}
.kzz-hoch span{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.04em}
.kzz-hoch img{width:24px;height:24px;display:block;margin:0}
/* ---- Nacharbeit 12.08.2026 · Holzband auf die Bauweise des Auftakts ---- */
.band-gross .hb-in{max-width:var(--lesen);padding:82px 28px 74px}
.band-gross .hb-satz{font-size:clamp(34px,4.4vw,54px);max-width:none}
.band-gross .hb-rechts{border-left:0}
.band-gross .hb-rechts p{font-size:16px;line-height:1.7;max-width:46ch;opacity:.92}
.band-gross .hb-quelle{max-width:46ch;margin-top:20px;padding-top:16px;
  border-top:1px solid hsla(42,31%,94%,.32)}
/* Gesetzte Umbrueche in der Bandzeile · auf Schmalformat frei umbrechen */
@media(max-width:900px){.hb-satz br{display:none}}
/* ---- Nacharbeit 12.08.2026 · kein Aufmacherbild, Grafik in der Satzspalte ---- */
/* Beitragsseiten beginnen nach dem Zuordnungsband direkt mit Text – kein Bildplatz. */
.spaltenbild{margin:30px 0 6px}
.spaltenbild .rahmen{border:1px solid var(--rule);background:var(--paper-alt)}
.spaltenbild svg{display:block;width:100%;height:auto}
.spaltenbild .bildcap{padding-top:10px}
/* ---- Nacharbeit 12.08.2026 · Kontaktzeile wie im Auftakt ---- */
.autorzeile .kontakt{font-size:14.5px;letter-spacing:.02em}
.autorzeile .kontakt-link{display:block;margin-top:10px;font-size:14.5px;
  letter-spacing:.02em;font-weight:400}

/* ---------- Weitergeben (#1207) ----------
   Mono-Zeile wie die Wege im Weiterlesen-Kasten, direkt unter dem Kontakt-Weg.
   Der Kopier-Knopf trägt kein eigenes Aussehen — er soll wie die Links daneben
   lesen, nicht wie ein Formular-Element. */
.teilen{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--rule)}
.teilen .marke-teilen{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--stone-deep);width:100%}
.teilen a,.teilen button{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--glow);text-decoration:none;background:none;border:0;
  padding:0;cursor:pointer;transition:opacity .15s}
.teilen a:hover,.teilen button:hover,.teilen a:focus-visible,.teilen button:focus-visible{opacity:.65}
.teilen button[data-kopiert]{color:var(--stone-deep);cursor:default}

/* ---------- Auftakt · Zitat neben dem Gründerbild ---------- */
.autor-zitat{margin:16px 0 0;padding:0 0 0 14px;border-left:2px solid var(--rule)}
.autor-zitat p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.autor-zitat .quelle{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone-deep);margin-top:8px}

/* ---------- Abschluss: Newsletter ---------- */
/* Nicht Teil des Hand-offs — der Block gab es schon und er ist angebunden
   (Infomaniak-Signup über den /nl/-Proxy). Übernommen aus dem abgelösten
   doc-Design, auf die Masse dieser Seiten gebracht. */
.schluss{max-width:var(--lesen);margin:0 auto;padding:0 28px 76px}
.news{margin:0;padding:26px 28px;background:var(--paper-alt);border:1px solid var(--rule)}
.news .h{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:6px}
.news .lead-s{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 14px;max-width:560px}
.news-form{display:flex;flex-wrap:wrap;gap:10px}
.news-form input{flex:1;min-width:220px;font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--stone-mid);padding:11px 14px}
.news-form input:focus{outline:none;border-color:var(--glow)}
.news-form button{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--glow);border:1px solid var(--glow);padding:11px 22px;cursor:pointer}
.news-form button:hover{background:var(--ink);border-color:var(--ink)}
.news-form .nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.news-fine{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--stone);
  text-transform:uppercase;margin-top:12px}
.news-note{font-size:15px;line-height:1.5;color:var(--ink);margin:14px 0 0;padding:12px 16px;
  background:var(--paper);border-left:2px solid var(--glow);max-width:560px}
@media (max-width:620px){
  .schluss{padding:0 18px 56px}
  .news-form{flex-direction:column}
  .news-form input{min-width:0}
  .news-form button{width:100%}
}

/* ==========================================================================
   Druck (#1209)

   Die Kapitel sind Whitepaper-artig — Tabellen, Diagramme, Belegzeilen, als
   «Für Tech-Evaluatoren» ausgezeichnet. Genau solche Texte werden ausgedruckt
   oder als PDF abgelegt. Ohne diese Regeln kämen Masthead, Filterleiste,
   Randspalte, Newsletter-Box und der Seitenfuss der Site mit aufs Papier, und
   Tabellen brächen mitten entzwei.

   Grundgedanke: übrig bleibt das Dokument — Kapitelstreifen (er trägt Kennung,
   Stellung und Datum), Titel, Vorspann, Text, Abbildungen, Tabellen, Autor.
   Alles, was zum Weiterklicken da ist, fällt weg.
   ========================================================================== */
@media print {
  @page { margin: 18mm 16mm; }

  html, body { background: #fff; color: #000; }
  body { font-size: 10.5pt; line-height: 1.45; }

  /* Scroll-Reveal aushebeln. app.js blendet Blöcke erst beim Scrollen ein;
     wer die Seite öffnet und sofort druckt, bekam sonst leere Seiten — alles
     unterhalb des ersten Viewports stand noch auf opacity:0. Fällt bei einem
     axe- oder Sichtbarkeits-Test nicht auf (opacity zählt dort als sichtbar),
     nur im echten Druck. */
  .reveal, .reveal.is-revealed, [class*="reveal"] {
    opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Chrome und alle Wege zum Weiterklicken. */
  .masthead, .leiste, .kstreifen-nav, .weiterlesen, .schluss,
  body.insights > footer, .lang-toggle, .lang-menu { display: none !important; }

  /* Der Kapitelstreifen bleibt — er ist die Kopfzeile des Dokuments. */
  .kstreifen { border-bottom: 1px solid #000; margin-bottom: 8mm; }
  .kstreifen-in { display: block; font-size: 8pt; }
  .kstreifen-in span + span::before { content: " · "; }

  /* Die Blockfolge wird eine Spalte; Randnotizen rücken hinter ihren Satz. */
  .satz, .eo, .box, .hb-zwei { display: block !important; }
  .spalte, .rand { max-width: none; width: auto; }
  .rand { margin-top: 6mm; padding-left: 6mm; border-left: 1pt solid #999;
    break-before: avoid; }
  .rand .note { border-top: 0; padding: 0 0 3mm; margin: 0 0 3mm; }
  /* position:sticky klebt im Druck an der Viewport-Höhe und beschneidet die
     Notiz auf die alte Spaltenbreite — im Fluss stimmt beides wieder. */
  .halt { position: static !important; top: auto !important; }

  /* Deko, die im Druck nur Platz kostet. */
  .eo-bild, .eo-illu, .autorbild, .kzz, .kzz-hoch { display: none; }

  /* Farbflächen tragen im Druck nicht — Struktur über Linien. */
  .holzband, .band-gross { background: none !important; color: #000 !important;
    border-top: 1pt solid #000; border-bottom: 1pt solid #000; padding: 4mm 0; }
  .holzband *, .hb-satz, .hb-eyebrow, .hb-quelle { color: #000 !important; }

  .merksatz { background: none !important; border-left: 1pt solid #000;
    padding: 0 0 0 4mm; margin: 4mm 0; }
  .merksatz p { font-size: 10.5pt; }

  /* Nichts mitten entzweibrechen. */
  .mtab, .diagramm, .tabellenblock, .note, .holzband, .merksatz, figure, tr {
    break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, .marke, .kopf { break-after: avoid; page-break-after: avoid; }
  .tabfuss { break-before: avoid; }

  img, svg { max-width: 100%; height: auto; }
  .mtab { font-size: 8.5pt; }
  .tw { overflow: visible; }

  /* Ausgehende Links ausschreiben — auf Papier ist ein Link sonst eine
     Sackgasse. Interne Verweise nicht: der relative Pfad hilft niemandem. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt;
    word-break: break-all; }

  /* Die Teilen-Zeile wird zur Quellenangabe: data-url trägt die Adresse
     ohnehin, also braucht es dafür kein eigenes Element im Markup. */
  .teilen { border-top: 1pt solid #000; margin-top: 6mm; padding-top: 3mm;
    font-size: 8pt; display: block; }
  .teilen a, .teilen button, .teilen .marke-teilen { display: none; }
  .teilen::after { content: "Quelle: " attr(data-url); }
}
/* Nacharbeit 27.08.2026 · Vollbreit-Blöcke tragen ihren Abstand nur oben; der
   folgende Satzblock (teil-b, padding-top:0) klebte an ihrer Unterkante. */
.diagramm+.satz.teil-b,.tabellenblock+.satz.teil-b,
.bleedbild+.satz.teil-b{padding-top:46px}

/* ==========================================================================
   Lesbarkeit und Bedienbarkeit auf dem Telefon (Etappe 3, 06.09.2026)

   Zwei getrennte Fragen, darum zwei getrennte Bedingungen:

   - Wie GROSS die Schrift sein muss, hängt an der Fensterbreite: auf einem
     schmalen Bild steht weniger Text pro Zeile, und die Mono-Kleinschrift der
     Gestaltung fällt unter die Grenze, ab der man sie noch entziffert.
   - Wie GROSS ein Bedienelement sein muss, hängt am Zeigegerät, nicht an der
     Breite. Ein 900px schmales Fenster am Schreibtisch braucht keine 44px,
     ein 1024px breites Tablet schon. Dafür gibt es `pointer:coarse`.

   Die Werte am Schreibtisch bleiben unangetastet — das hier ist ein Boden für
   Schmalformat, keine Neugestaltung.
   ========================================================================== */

/* ---------- Schriftboden ----------
   Monis Mono-Kleinschrift trägt Kennungen, Stände und Quellen. Am Schreibtisch
   ist das eine bewusste Grössenstufe; auf dem Telefon lagen die Werte bei 8
   bis 10.5px und waren nicht mehr zu lesen.

   Die Auswahl hängt an `body.insights`, nicht an der blossen Klasse: viele der
   Originalregeln stehen als Nachfahren-Paare (`.teilen .marke-teilen`,
   `.eo-txt .n`) und gewinnen sonst nach Spezifität, obwohl sie hier früher in
   der Datei stehen. Ein Präfix für alle ist ehrlicher als zehn geratene
   Einzelketten — und es hält, wenn sich das Markup darüber verschiebt.

   Zwei Stufen: Etiketten und Kennungen auf 11px, ganze Sätze auf 12px. */
@media (max-width:620px){
  body.insights .tz-nr,body.insights .tz-name,
  body.insights .r-stand,body.insights .rb-marke,
  body.insights .eo-txt .kz,body.insights .eo-txt .n,
  body.insights .eo-hier .n,body.insights .eo-hier .m,body.insights .eo-hier a,
  body.insights .kstreifen-in,body.insights .kstreifen-in .jetzt,
  body.insights .kstreifen-in .weiter,body.insights .kstreifen-in .zurueck-k,
  body.insights .byline-in span,body.insights .auf-fuss span,
  body.insights .hb-eyebrow,body.insights .hb-quelle,
  body.insights .hb-drei .n,body.insights .hb-zeile span,
  body.insights .kurz .kopf,body.insights .note.beleg .kopf,
  body.insights .rand .note .kopf,body.insights .rand .note .quelle,
  body.insights .rand-marke,
  body.insights .naechst .kopf,body.insights .zurueckbox .kopf,
  body.insights .autorzeile .kopf,
  body.insights .marke-autor,body.insights .teilen .marke-teilen,
  body.insights .teile .k,
  body.insights .tzv-kopf,body.insights .tzv-fuss,
  body.insights .tzv-liste li b,body.insights .tzv-liste li.rest,
  body.insights .mtab thead th,body.insights .mtab tr.wahl .marke,
  body.insights .news-fine,body.insights .news-form button,
  body.insights .tw-hinweis,body.insights .bildlupe-knopf,
  body.insights .bildlupe-kopf p,body.insights .bildlupe-zu,
  body.insights .filter .titel,body.insights .chip,
  body.insights .tfband .nr,body.insights .tfband .stand,
  body.insights .r-kopf .nr,body.insights .r-kopf .stand,body.insights .r-unter,
  body.insights .kachel .k3 span,body.insights .vorb,
  body.insights .kachel .termin,body.insights .kachel .kz,
  body.insights .illu-fuss span,body.insights .bildcap{font-size:11px}
  /* Der Trennstrich zwischen Reihen- und Zielgruppen-Wahl trennt zwei Gruppen
     in EINER Zeile. Sobald die Chips umbrechen, steht er irgendwo im Weissraum
     und trennt nichts mehr — dann lieber weg. Rein dekorativ, kein Verlust. */
  body.insights .filter .strich{display:none}
  /* Ganze Sätze, keine Etiketten — die dürfen etwas grösser. */
  body.insights .note.beleg p,body.insights .note.beleg p strong{font-size:12px}
  /* Gesperrte Versalien brauchen bei 11px weniger Sperrung, sonst bricht die
     Zeile dort um, wo vorher keine Umbruchstelle nötig war. */
  body.insights .tz-name{letter-spacing:.08em}
  body.insights .kstreifen-in,body.insights .byline-in span,
  body.insights .auf-fuss span{letter-spacing:.08em}
}

/* ---------- Trefferflächen ----------
   44px nach iOS-HIG (WCAG 2.2 AA verlangt 24px, das ist die Untergrenze, nicht
   das Ziel). Betroffen sind die freistehenden Bedienelemente. Links MITTEN IM
   FLIESSTEXT bleiben, wie sie sind — für die nimmt WCAG 2.2 ausdrücklich aus,
   und sie aufzublasen zerrisse den Satz (`.tabfuss em a`, `ul.kreuz li a`). */
@media (pointer:coarse){
  .chip{min-height:44px;padding:0 0 10px;display:inline-flex;align-items:flex-end}
  .kstreifen-nav a{min-height:44px;display:inline-flex;align-items:center}
  .eo-hier a{min-height:44px;display:inline-flex;align-items:center;margin-top:0}
  .naechst .inhalt > a,.zurueckbox .wege a{min-height:44px;display:inline-flex;align-items:center}
  .autorzeile .kontakt-link{min-height:44px;display:flex;align-items:center}
  .teilen a,.teilen button{min-height:44px;display:inline-flex;align-items:center}
  .auf-mehr{min-height:44px;display:inline-flex;align-items:center}
  /* Eingabe und Knopf des Abos: der Knopf lag bei 40px, das Feld folgt ihm,
     damit die Zeile nicht ungleich hoch wird. */
  .news-form input,.news-form button{min-height:44px}
}