/* =========================================================
   BNKZ – Ergänzungen zu components.css
   Nur was im Design als Inline-Style stand (CSP verbietet
   style="") oder für die übrigen Werkzeuge dazukam.
   Keine neuen Farben: alles aus tokens.css.
   ========================================================= */

/* Sprunglink */
.skip{position:absolute;left:-9999px;top:8px;z-index:10;padding:12px 16px;border-radius:var(--r-m);background:var(--acc);color:var(--on-acc)!important;font:700 15px var(--mono)}
.skip:focus{left:8px}

/* Hilfsklassen (ersetzen Inline-Styles aus den Entwürfen) */
.info{font:13px var(--mono);color:var(--muted)}
.stack.g10{gap:10px}
.stack.g18{gap:18px}
.stack.g24{gap:24px}
.mb6{margin-bottom:6px}
.w128{width:128px}
.h52{height:52px}
.ex{margin:0;font-size:15px;color:var(--muted)}
.pt40{padding-top:40px}
.p404{margin:0;font-size:17px;max-width:52ch;color:var(--muted)}
.tool-hd p.sub.stand{font:13px var(--mono)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h2[id],section[id]{scroll-margin-top:16px}

/* Startseite: Geister-Kachel nur Desktop */
.tile.ghost{display:none}
@media (min-width:900px){.tile.ghost{display:grid}}
.kbd{display:none}
@media (min-width:900px){.kbd{display:inline-flex}.search .inp{padding-right:52px}}

/* Dateiliste: Pfeile nur Desktop, Griff sperrt Scrollen beim Ziehen */
.fi .grip{touch-action:none}
.fi .acts .mv{display:none}
@media (min-width:900px){.fi .acts .mv{display:inline-flex}}
.fl.dim .grip,.fl.dim .mini{pointer-events:none}
a.mini{text-decoration:none}
.mini.dl{color:var(--acc-ink)}

/* Dropzone als reine Drop-Fläche */
.dz input[type=file]{display:none}

/* Textfeld mehrzeilig */
textarea.inp{height:auto;min-height:220px;padding:14px 16px;line-height:1.55;resize:vertical;font:16px/1.55 var(--sans)}
textarea.inp.mono{font-family:var(--mono);font-size:15px}
@media (min-width:900px){textarea.inp{min-height:300px}}

/* Kennzahlen (Text-Werkzeug) */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stat{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.stat b{display:block;font:800 22px/1.2 var(--mono);color:var(--acc-ink)}
/* Siebenstellige Zahlen (ab einer Million Zeichen) passten nicht in die 140 px breite
   Kachel und wurden mitten in der Ziffernfolge abgeschnitten. */
.stat b{overflow-wrap:anywhere}
@media (min-width:900px){.stat{padding:12px 8px}.stat b{font-size:20px}}
.stat span{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (min-width:600px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.stats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.chips.sm .chip{min-height:44px;padding:0 14px;font-size:14px}

/* QR-Ausgabe: immer dunkel auf weiß, damit jeder Scanner ihn liest */
.qr-box{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:var(--r-m);background:#fff;min-height:240px}
.qr-box svg{display:block;width:100%;max-width:320px;height:auto}
.qr-box.empty{background:var(--surface-2);color:var(--muted);font:600 14px var(--mono);text-align:center}

/* Bild-Vorschau in Listen */
.thumb{flex:none;width:44px;height:44px;border-radius:var(--r-s);object-fit:cover;background:var(--surface-2);border:1px solid var(--line)}
.fi .fs .good{color:var(--acc-ink)}
.fi .fs .warn{color:var(--danger)}
.fi.pad{padding-left:12px}

/* Auswahl-Zeile mit Label links */
.opt-row{display:flex;flex-direction:column;gap:8px}
.ctl .opt-row+.opt-row{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

/* Knopf-Inhalt (Icon + Text), wenn er für „Kopiert!" getauscht wird */
.btn-in{display:inline-flex;align-items:center;gap:10px}
/* Links, die wie deaktivierte Knöpfe aussehen (Download noch nicht bereit) */
a.btn[aria-disabled="true"]{background:var(--surface-2);color:var(--muted)!important;border-color:var(--line);cursor:not-allowed;pointer-events:none}
.btn-row.col{flex-direction:column}
.btn-row.col .btn{width:100%}
.big-num.sm{font-size:24px}

/* Formular-Raster */
.two{display:grid;gap:18px}
@media (min-width:600px){.two{grid-template-columns:repeat(2,minmax(0,1fr))}.two.z{grid-template-columns:140px minmax(0,1fr)}}
textarea.inp.ta-s{min-height:120px}
.inp.mono{font-family:var(--mono)}
.sw-row.solo{border-top:0}
.calc>.result{align-self:start}
@media (min-width:900px){.calc>.result{position:sticky;top:24px}}

/* Inhaltsverzeichnis bleibt am Desktop stehen */
@media (min-width:900px){.toc-nav{position:sticky;top:24px}}
.prose a{text-underline-offset:3px}
.prose .note{margin-bottom:8px}

/* Anker-Links im Header nur am Desktop (laut Design) */
.hdr-nav{display:none}
@media (min-width:900px){.hdr-nav{display:flex}}
/* Die Seite, auf der man gerade ist, ist in der Kopfzeile markiert */
.hdr-nav a.is-hier{color:var(--acc-ink)}

/* Spam-Falle im Wunsch-Formular: für Menschen unsichtbar, Bots füllen sie aus */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- PDF-Modul ---------- */
.mt24{margin-top:24px}
.btn-sm{min-height:44px;padding:0 14px;font-size:14px}
.fic{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-s);background:var(--surface-2);color:var(--muted)}
.fi.dim,.pg-grid.dim{opacity:.5;pointer-events:none}
.meta-row .v{font:600 15px/1.4 var(--sans);text-align:right;word-break:break-word;max-width:70%}
.pos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:240px}
.pos-grid .chip{padding:0;font-size:18px}
.prev{display:flex;align-items:center;justify-content:center;min-height:260px;padding:12px;border-radius:var(--r-m);background:var(--surface-2)}
.prev-cv{display:block;max-width:100%;max-height:520px;width:auto;height:auto;border-radius:2px;box-shadow:0 2px 14px rgba(0,0,0,.3)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.bar-acts{display:flex;flex-wrap:wrap;gap:8px}
/* Seiten-Raster */
.pg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.pg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.pg-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
.pg-grid.over{outline:2px dashed var(--acc-ink);outline-offset:6px;border-radius:var(--r-m)}
.pg{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden;transition:border-color .15s}
.pg:hover{border-color:var(--line-strong)}
.pg.drag{border-color:var(--acc-ink);box-shadow:0 14px 30px rgba(0,0,0,.35);transform:rotate(-1deg)}
.pg-view{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:10px;background:var(--surface-2);overflow:hidden}
.pg-cv{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35);transition:transform .15s}
.pg-cv.side{max-width:100%;max-height:100%}
.pg-ph{font:600 14px var(--mono);color:var(--muted)}
.pg-ft{display:flex;align-items:center;gap:2px;padding:2px 4px;border-top:1px solid var(--line)}
.pg-ft .grip{flex:none;width:36px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-s);background:transparent;color:var(--muted);cursor:grab;touch-action:none}
.pg.drag .grip{color:var(--acc-ink);cursor:grabbing}
.pg-no{flex:1;min-width:0;font:700 13px var(--mono);color:var(--acc-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-acts{display:flex;flex:none}
.pg-acts .mini{width:40px}

/* großer Aktionsknopf am Desktop nicht über die ganze Breite ziehen */
@media (min-width:900px){.stack>.btn-lg{align-self:flex-start}}

/* ---------- Suche auf der Startseite ---------- */
/* In beiden Hinweiskaesten steht der Suchbegriff woertlich. Ein eingefuegter Wert ohne
   Leerzeichen (Pruefsumme, Kennung) darf den Kasten nicht sprengen. */
#none-t,#missing-t{overflow-wrap:anywhere}
.claim.first{margin-top:0}
mark{padding:0 2px;border-radius:3px;background:var(--acc-soft);color:inherit;box-shadow:inset 0 -2px 0 var(--acc-ink)}
.tile.hit .nm{font-size:18px}
.tile.hit .sn{grid-column:1;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);font:12px/1.5 var(--mono);color:var(--muted)}
.results+.note,.note+.note{margin-top:12px}
#missing{border-color:var(--acc-ink)}
@media (min-width:900px){
  .tiles.results{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles.results .tile{min-height:0}
  .tiles.results .tile .nm{margin-top:10px;font-size:20px}
}
.opt-row[id]{scroll-margin-top:24px}
.opt-row:target .lbl{color:var(--acc-ink)}
#missing{margin-bottom:12px}

/* .sec setzt das seitliche Polster von .wrap auf 0: am Handy klebte der Abschnitt am Rand */
.wrap.sec{padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- PDF → Bilder (/pdf/in-bilder/) ---------- */
/* Seiten-Vorschau in der Ergebnisliste: ganze Seite zeigen (nicht anschneiden), Papier weiß wie bei .pg-cv */
.thumb.p2i-thumb{object-fit:contain;background:#fff;border-color:var(--line-strong)}
.p2i-list .fi{min-height:72px}

/* ---------- Bild zuschneiden & drehen (/bilder/zuschneiden/) ---------- */
/* Vorschau am Handy zuerst, am Desktop rechts neben den Einstellungen (breitere Bildspalte) */
/* Beide Spalten muessen schmaler werden duerfen als ihr Inhalt: ein langer Dateiname ohne
   Umbruch (.fi .fn) und die per Skript in Pixeln gesetzte Vorschaubreite (stage.style.width)
   waeren sonst das Mindestmass der Spalte. Ohne das zieht ein langer Name die Spalte auf,
   und beim Verkleinern des Fensters bleibt die Vorschauspalte hart auf ihrer alten Breite
   stehen, weil die Rasterfelder min-width:auto behalten - die Seite wird dann breiter als
   der Bildschirm und repariert sich nicht von selbst. */
.crop-calc>*{min-width:0}
.crop-calc>.result{order:-1}
@media (min-width:900px){.crop-calc{grid-template-columns:300px minmax(0,1fr)}.crop-calc>.result{order:0}}
.crop-res .hint{margin:0}
/* Fläche: Polster 22px, damit die 44px-Griffe am Bildrand nicht abgeschnitten werden */
.crop-area{display:flex;align-items:center;justify-content:center;min-height:200px;padding:22px;border-radius:var(--r-m);background:var(--surface-2)}
.crop-stage{position:relative;max-width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.crop-stage.drag{cursor:grabbing}
.crop-cv{display:block;width:100%;height:100%;border-radius:2px}
/* Rahmen: Position/Größe setzt das Skript in Prozent */
.crop-frame{position:absolute;box-sizing:border-box;border:2px solid var(--acc);cursor:move;outline-offset:4px}
.crop-frame::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:linear-gradient(var(--line-strong) 1px,transparent 1px),linear-gradient(90deg,var(--line-strong) 1px,transparent 1px);background-size:100% 33.34%,33.34% 100%}
/* Griffe: 44px Touch-Fläche, sichtbar nur der Punkt bzw. Balken in der Mitte */
.crop-h{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.crop-h::after{content:"";display:block;background:var(--acc);border:2px solid var(--bg);border-radius:var(--r-pill);box-sizing:border-box}
.crop-h[data-h=nw],.crop-h[data-h=ne],.crop-h[data-h=se],.crop-h[data-h=sw]{width:44px}
.crop-h[data-h=nw]::after,.crop-h[data-h=ne]::after,.crop-h[data-h=se]::after,.crop-h[data-h=sw]::after{width:16px;height:16px;border-radius:50%}
.crop-h[data-h=n]::after,.crop-h[data-h=s]::after{width:26px;height:10px}
.crop-h[data-h=e]::after,.crop-h[data-h=w]::after{width:10px;height:26px}
.crop-h[data-h=nw]{left:0;top:0;cursor:nwse-resize}
.crop-h[data-h=ne]{left:100%;top:0;cursor:nesw-resize}
.crop-h[data-h=se]{left:100%;top:100%;cursor:nwse-resize}
.crop-h[data-h=sw]{left:0;top:100%;cursor:nesw-resize}
.crop-h[data-h=n]{left:50%;top:0;cursor:ns-resize}
.crop-h[data-h=s]{left:50%;top:100%;cursor:ns-resize}
.crop-h[data-h=e]{left:100%;top:50%;cursor:ew-resize}
.crop-h[data-h=w]{left:0;top:50%;cursor:ew-resize}
.crop-h:hover::after{background:var(--acc-hover)}

/* ---------- Zufall (/zufall/) und Temperatur-Knopf im Einheitenrechner (Präfix .zf-) ---------- */
/* Segment mit vier Knöpfen: schmaler, damit es in 375 px passt; im Notfall umbrechen statt überlaufen */
.seg.wide.zf-seg4{flex-wrap:wrap}
.seg.wide.zf-seg4 button{padding:0 6px;font-size:13px}
.zf-short{display:none}
@media (max-width:599.98px){.zf-full{display:none}.zf-short{display:inline}}
/* Ergebnis: Namen nicht mitten im Wort brechen, Listen mehrzeilig */
.zf-out{word-break:normal;overflow-wrap:anywhere;white-space:pre-wrap}
.zf-out.zf-big{font-size:36px;line-height:1.2}
.zf-out.zf-list{font-size:17px;line-height:1.6}
.zf-sum{margin:0;font:700 15px var(--mono);color:var(--muted)}
.zf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.zf-hint{margin-top:10px}
.zf-ta{margin-top:10px;min-height:160px}
.zf-grp{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:8px;align-items:center}
.zf-grp .btn{width:100%}
@media (min-width:900px){.zf-out.zf-big{font-size:48px}.zf-out.zf-list{font-size:19px}}

/* ---------- Texte vergleichen (/text/vergleichen/) ---------- */
.diff-in{display:grid;gap:16px}
@media (min-width:900px){.diff-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
textarea.inp.diff-ta{min-height:180px;font-size:14px}
@media (min-width:900px){textarea.inp.diff-ta{min-height:260px}}
.diff-res{padding:0;gap:0;overflow:hidden}
.diff-res .res-hd{padding:14px 18px;border-bottom:1px solid var(--line)}
.diff-note{margin:12px 12px 0;border-radius:var(--r-m)}
.diff-list{list-style:none;margin:0;padding:0;max-height:70vh;overflow:auto;font:13px/1.55 var(--mono)}
.diff-row{display:grid;grid-template-columns:auto auto 1.2em minmax(0,1fr);gap:0 8px;align-items:start;padding:2px 12px 2px 8px;border-top:1px solid var(--line)}
.diff-row:first-child,.diff-fold:first-child{border-top:0}
.diff-no{color:var(--muted);text-align:right;min-width:2.5ch;user-select:none}
.diff-sign{font-weight:800;text-align:center;user-select:none}
.diff-txt{white-space:pre-wrap;overflow-wrap:anywhere}
.diff-row.del{background:var(--danger-bg);color:var(--danger)}
.diff-row.add{background:var(--acc-soft);color:var(--acc-ink)}
.diff-row.del .diff-no,.diff-row.add .diff-no{color:inherit;opacity:.75}
mark.diff-w{padding:0 1px;border-radius:2px;background:transparent;color:inherit;font-weight:800;box-shadow:inset 0 -2px 0 currentColor}
.diff-fold{border-top:1px solid var(--line)}
.diff-fold-btn{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:0;background:var(--surface-2);color:var(--muted);font:600 13px var(--mono);cursor:pointer}
.diff-fold-btn:hover{color:var(--text)}

/* ---------- Lorem Ipsum (/text/lorem/) ---------- */
textarea.inp.lorem-out{min-height:260px;font-size:15px}
@media (min-width:900px){textarea.inp.lorem-out{min-height:380px}}

/* Querverweis auf verwandte Werkzeuge (unter dem Werkzeug, über der Datenschutz-Zeile) */
/* Bei drei Verweisen passt die Zeile auf 375 px nicht mehr: umbrechen statt über den Rand laufen. */
.more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font:13px var(--mono);color:var(--muted)}
.more svg{flex:none;color:var(--acc-ink)}
.more a{text-underline-offset:3px}

/* ---------- PDF unterschreiben (/pdf/unterschreiben/) ---------- */
/* Die Zeichenfläche ist immer weißes Papier, auch im dunklen Modus: man unterschreibt auf Weiß. */
.sig-pad{position:relative;border:1px dashed var(--line-strong);border-radius:var(--r-m);background:#fff;overflow:hidden}
.sig-pad canvas{display:block;touch-action:none;cursor:crosshair}
.sig-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 12px;text-align:center;pointer-events:none;font:500 14px var(--sans);color:#8A8F88}
.sig-line{position:absolute;left:8%;right:8%;bottom:22%;border-bottom:1px solid rgba(0,0,0,.18)}
.sig-frame{cursor:move;background:rgba(0,0,0,.03)}
.sig-frame::before{display:none}
.sig-img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pg-of{align-self:center;padding:0 4px;font:600 13px var(--mono);color:var(--muted)}
/* Die Unterschrift ist oft nur ein schmaler Streifen: kleinere Punkte, damit man sie noch sieht.
   Die Fläche zum Anfassen bleibt so groß wie überall. */
.sig-frame .crop-h::after{width:11px;height:11px}

/* --- bilder-hintergrund --- */
/* ---------- Hintergrund entfernen (/bilder/hintergrund/) ---------- */
/* Die Zeichenflaeche benutzt .prev-cv. Das Karomuster zeichnet hintergrund.js selbst in den
   Canvas (feste Grautoene, damit man Durchsichtigkeit in jedem Farbschema erkennt) - ein
   CSS-Muster darunter waere ohnehin verdeckt. Darum faellt die alte Regel .bgr-cv weg.
   Farbwaehler neben den Chips: gleiche Hoehe wie .chips.sm .chip (44 px Touchflaeche).
   Die Regel muss spezifischer sein als .chips.sm .chip (pages.css:69), sonst gewinnt dort
   padding:0 14px und quetscht das Farbfeld im Inneren auf rund 24 px zusammen. */
.chips.sm .chip.bgr-color{flex:none;width:52px;min-height:44px;height:44px;padding:3px;border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface);cursor:pointer}
.bgr-color::-webkit-color-swatch-wrapper{padding:0}
.bgr-color::-webkit-color-swatch{border:0;border-radius:var(--r-s)}
.bgr-color::-moz-color-swatch{border:0;border-radius:var(--r-s)}

/* --- bilder-passfoto --- */
/* ---------- Passfoto & Bewerbungsfoto (/bilder/passfoto/) ---------- */
/* Statt des Drittel-Rasters zeigen hier eigene Bänder, wo Augen und Kinn liegen sollen. */
.pf-frame::before{display:none}
/* Zielband für die Augen: 50–60 % der Bildhöhe von unten sind 40–50 % von oben */
.pf-eye{position:absolute;left:0;right:0;top:40%;height:10%;pointer-events:none;background:var(--acc-soft);border-top:1px dashed var(--acc);border-bottom:1px dashed var(--acc)}
/* Zielband fürs Kinn (Kopfhöhe 32–36 mm) – Lage und Höhe setzt das Skript */
.pf-band{position:absolute;left:0;right:0;pointer-events:none;background:var(--acc-soft);border-top:1px dashed var(--acc);border-bottom:1px dashed var(--acc)}
/* Hilfslinien: die Linie selbst nimmt keine Klicks an, angefasst wird das Schild (44 px hoch) */
.pf-guide{position:absolute;left:0;right:0;height:0;pointer-events:none}
.pf-guide::before{content:"";position:absolute;left:0;right:0;top:-1px;border-top:2px solid var(--acc);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.pf-guide.eye::before{border-top-style:dashed}
.pf-tag{position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--acc);border-radius:var(--r-pill);background:var(--bg);color:var(--text);font:700 12px var(--mono);white-space:nowrap;cursor:ns-resize;touch-action:none;pointer-events:auto}
.pf-tag.r{left:auto;right:0}
.pf-tag:hover{background:var(--surface-2)}
/* Messwerte: im Bereich = Akzentfarbe, außerhalb = Warnfarbe. Der Satz darunter sagt dasselbe in Worten. */
.pf-ok{color:var(--acc-ink)}
.pf-bad{color:var(--danger)}
/* Bogen-Vorschau: ohne Mindesthöhe, das Papier bringt seine eigene mit */
.pf-sheet{min-height:0}

/* --- pdf-formular --- */
/* ---------- PDF-Formular ausfüllen (/pdf/formular/) ---------- */
/* Optionsfelder und Listen aus der PDF: anklickbare Felder, jedes mindestens 44 px hoch */
.pdff-opts{display:flex;flex-wrap:wrap;gap:8px}
.pdff-opt{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;font:600 15px var(--mono);cursor:pointer}
.pdff-opt:hover{background:var(--surface-2)}
.pdff-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--acc);cursor:pointer}
.pdff-opt.on{background:var(--acc-soft);border-color:var(--acc-ink)}
.pdff-opt.off{opacity:.55;cursor:not-allowed}
.pdff-opt.off input{cursor:not-allowed}
.pdff-opt:focus-within{outline:3px solid var(--acc-ink);outline-offset:2px}
.pdff-clear{align-self:flex-start}
/* Feldnamen aus der PDF sind lang und technisch: umbrechen statt überlaufen */
.pdff-name,.pdff-why{overflow-wrap:anywhere}
.pdff-why{color:var(--text)}

/* --- pdf-schwaerzen --- */
/* ---------- PDF schwärzen (/pdf/schwaerzen/) ---------- */
/* Auf der Seite wird aufgezogen, nicht verschoben: Fadenkreuz statt Greifhand. */
.crop-stage.rd-stage{cursor:crosshair}
.crop-stage.rd-stage.rd-move{cursor:move}
/* Liste der Markierungen: bei vielen Stellen lieber scrollen, als die Spalte endlos wachsen lassen */
.rd-list{max-height:40vh;overflow:auto}
.rd-list .fi.sel{border-color:var(--acc-ink);background:var(--acc-soft)}
.rd-show{color:var(--acc-ink)}

/* --- qr-barcode --- */
/* ---------- Barcode erzeugen (/qr/barcode/) ---------- */
/* Ausgabe immer dunkel auf weiß: nur so liest ein Scanner den Code.
   Schmale Codes bleiben in Originalgröße, breite werden auf die Kastenbreite heruntergerechnet.
   Die Dateien zum Herunterladen behalten in jedem Fall ihre eingestellten Pixel. */
.bc-box{display:flex;align-items:center;justify-content:center;padding:16px 12px;border-radius:var(--r-m);background:#fff;min-height:200px}
.bc-box svg{display:block;max-width:100%;height:auto}
.bc-box.empty{background:var(--surface-2);color:var(--muted);font:600 14px var(--mono);text-align:center}
/* Passen Überschrift und Maßangabe nicht nebeneinander, rutscht die Maßangabe ganz nach unten
   (statt dass eines von beiden mitten im Wort bricht) */
.bc-hd{flex-wrap:wrap;gap:2px 12px}
.bc-hd .lbl,.bc-hd .info{white-space:nowrap}
/* Vorschau am Handy über den Einstellungen, am Desktop rechts daneben */
.bc-calc>.result{order:-1}
@media (min-width:900px){.bc-calc>.result{order:0}}

/* --- rechner-iban --- */
/* ---------- IBAN prüfen (/rechner/iban/) ---------- */
/* IBAN-Feld: Mono, damit die Vierergruppen gleich breit stehen. 16px, sonst zoomt iOS beim Tippen. */
.inp.ib-in{font:700 16px var(--mono);letter-spacing:.03em;text-transform:uppercase;height:56px}
.inp.ib-in::placeholder{text-transform:none;letter-spacing:0}
/* Ergebniszeile mit der IBAN: 27 Zeichen passen neben der Beschriftung nicht auf 375 px,
   deshalb steht die IBAN am Handy unter ihrer Beschriftung und in voller Breite. */
.res-row .v.ib-val{font:800 17px/1.35 var(--mono);letter-spacing:.02em;word-break:break-all;overflow-wrap:anywhere}
@media (max-width:599.98px){.res-row.ib-main{flex-direction:column;align-items:flex-start;gap:6px}.res-row .v.ib-val{text-align:left}}
/* Statuskästchen: drei Symbole übereinander, sichtbar ist immer genau eines */
.ib-st .ni span{display:flex}
@media (min-width:900px){
  .inp.ib-in{font-size:18px}
  .res-row .v.ib-val{font-size:20px}
  /* Hinweis unter beide Spalten, nicht nur unter die linke */
  .calc>.note.ib-wide{grid-column:1 / -1}
}

/* --- rechner-zinsen --- */
/* ---------- Rechner: Zinsen (/rechner/#zinsen) ---------- */
/* Hinweis und Tabelle laufen am Desktop über beide Spalten des .calc-Rasters */
.zi-wide{grid-column:1/-1}
/* Ergebniszeile mit Text statt Betrag (z. B. „30 Jahren und 7 Monaten") */
.res-row .v.zi-txt{font:700 16px var(--mono)}
/* Tilgungsplan: eingeklappt, damit die lange Tabelle die Seite nicht überschwemmt.
   min-width:0 ist Pflicht – ohne das zieht die breite Tabelle die Rasterspalte
   auseinander, statt im Kasten zu scrollen (am Handy lief die Seite sonst 101 px über). */
.zi-tbl{grid-column:1/-1;min-width:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.zi-tbl summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px;font:700 15px var(--mono);cursor:pointer;border-radius:var(--r-l)}
.zi-tbl summary::-webkit-details-marker{display:none}
.zi-tbl summary svg{flex:none;color:var(--muted);transition:transform var(--t-fast)}
.zi-tbl[open] summary svg{transform:rotate(180deg)}
/* lange oder breite Tabellen scrollen im Kasten, statt die Seite zu sprengen */
.zi-scroll{max-height:60vh;overflow:auto;border-top:1px solid var(--line)}
.zi-t{width:100%;border-collapse:separate;border-spacing:0;font:13px var(--mono);white-space:nowrap}
.zi-t th,.zi-t td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line)}
.zi-t thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--muted);font-weight:700}
.zi-t thead th:first-child,.zi-t tbody th,.zi-t tfoot th{text-align:left}
.zi-t tbody th{font-weight:700;color:var(--muted)}
.zi-t tbody tr:hover th,.zi-t tbody tr:hover td{background:var(--surface-2)}
.zi-t tfoot th,.zi-t tfoot td{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line-strong);border-bottom:0;font-weight:800}
@media (min-width:900px){.zi-t{font-size:14px}}

/* --- rechner-datum --- */
/* Datumsfeld und „Heute" nebeneinander, auf schmalen Geräten untereinander. */
.dt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dt-d{flex:1 1 180px;min-width:0}
.dt-now{flex:none}
.dt-sm{font-size:15px}
.dt-s4{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:600px){.dt-s4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dt-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.dt-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--r-s);background:var(--surface-2);font:500 14px var(--sans)}
.dt-list li b{font:700 13px var(--mono);color:var(--acc-ink);white-space:nowrap}
.dt-none{margin:8px 0 0;color:var(--muted)}

/* --- pdf-stempel --- */
.stmp-thumb{width:64px;height:64px;object-fit:contain;border-radius:var(--r-s);background:var(--surface-2)}
.stmp-pos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:220px}
.stmp-pos button{min-height:44px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);color:var(--muted);font:600 12px var(--mono);cursor:pointer}
.stmp-pos button:hover{color:var(--text);border-color:var(--line-strong)}
.stmp-pos button[aria-pressed=true]{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-ink)}

/* --- pdf-formular --- */
.pdff-pg{display:block;margin:18px 0 6px}

/* --- farben --- */
.fb-top{display:grid;gap:6px}
.fb-in{display:flex;gap:8px;align-items:center}
.fb-in .inp{flex:1 1 auto;min-width:0}
.fb-pick{flex:none;width:52px;height:52px;padding:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);cursor:pointer}
.fb-swatch{display:flex;align-items:center;gap:10px;margin-top:10px}
.fb-swatch i{display:block;width:44px;height:44px;border-radius:var(--r-s);border:1px solid var(--line)}
.fb-swatch b{font:700 15px var(--mono)}
.fb-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.fb-row:first-child{border-top:0}
/* „CMYK (Näherung)" passt nicht in 60 px: feste Mindestbreite fürs Raster, darf aber wachsen und umbrechen */
.fb-k{flex:0 0 auto;min-width:60px;max-width:40%;font:700 12px var(--mono);color:var(--muted);letter-spacing:.06em;overflow-wrap:anywhere}
.fb-v{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font:500 15px var(--mono)}
.fb-note{margin:10px 0 0;color:var(--muted);font-size:14px}
.fb-swapbtn{align-self:center}
.fb-ratio{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:var(--r-m);background:var(--surface-2);text-align:center}
.fb-ratio b{font:800 32px var(--mono);color:var(--acc-ink);line-height:1.1}
.fb-ratio span{font-size:13px;color:var(--muted)}
.fb-grades{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.fb-grade{display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--r-s);background:var(--surface-2)}
.fb-gi{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);font:800 12px var(--mono);background:var(--danger-bg);color:var(--danger)}
.fb-grade.ok .fb-gi{background:var(--acc-soft);color:var(--acc-ink)}
.fb-gt{flex:1 1 auto;min-width:0;font:600 13px var(--sans)}
.fb-gs{font:700 12px var(--mono);color:var(--muted)}
.fb-demo{margin-top:12px;padding:16px;border-radius:var(--r-m);border:1px solid var(--line)}
.fb-d24{font-size:24px;font-weight:700;margin:0 0 6px}
.fb-d19{font-size:19px;font-weight:700;margin:0 0 6px}
.fb-d16{font-size:16px;margin:0}
.fb-tiles{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
@media (min-width:600px){.fb-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fb-tile{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);cursor:pointer;text-align:left}
.fb-tile:hover{border-color:var(--line-strong)}
.fb-tile i{display:block;height:44px}
.fb-tt{display:flex;flex-direction:column;gap:1px;padding:8px 10px}
.fb-tl{font:600 11px var(--mono);color:var(--muted);letter-spacing:.06em}
.fb-tv{font:700 13px var(--mono);color:var(--text)}
.fb-name{font:500 14px var(--sans);color:var(--muted)}

/* --- pdf-beschneiden --- */
/* ---------- Ränder beschneiden (/pdf/beschneiden/) ---------- */
/* Was wegfällt, wird abgedunkelt: vier Flächen rund um den Rahmen, die Maße setzt das Skript in Prozent. */
.cb-shade{position:absolute;background:rgba(0,0,0,.5);pointer-events:none}
/* dünne dunkle Kante, damit der helle Rahmen auch vor der abgedunkelten Fläche sichtbar bleibt */
.cb-frame{box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cb-frame::before{display:none}
.cb-cuts{margin:0;font:600 13px var(--mono);color:var(--muted)}

/* --- pdf-passwort --- */
/* /pdf/passwort/ – Passwortfeld mit Knopf zum Anzeigen */
.ppw-row{display:flex;align-items:center;gap:8px}
.ppw-row .inp{flex:1;min-width:0}
.ppw-eye[aria-pressed="true"]{color:var(--acc-ink);background:var(--surface-2)}

/* --- pdf-teilen --- */
/* /pdf/teilen/: Zeile unter den Einstellungen, die vorher sagt, was herauskommt.
   Muss nach .hint stehen (pages.css laedt nach components.css) – ans Ende von pages.css. */
.pt-sum{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--text)}
/* Zitiert die Eingabe woertlich (lib/page-ranges.js); ein langes Wort ohne Komma und
   ohne Bindestrich muss umbrechen duerfen, sonst laeuft es bei 375 px aus dem Kasten
   und schiebt die Seite nach rechts. */
.pt-sum{overflow-wrap:anywhere}
.pt-sum:empty{display:none}

/* --- pdf-vergleichen --- */
/* PDFs vergleichen (/pdf/vergleichen/): zwei Ablagen nebeneinander, Ergebnis nach Seiten gegliedert */
.pdfv-two{display:grid;gap:16px}
/* Ein langer Dateiname ohne Umbruch (.fi .fn) zaehlt sonst beim Mindestmass der Spalte voll
   mit; das Kuerzen mit ... greift erst danach. Ohne min-width:0 zieht der Name die Spalte auf
   und die Seite wird bei 375 px breiter als der Bildschirm. */
.pdfv-side{display:flex;flex-direction:column;gap:10px;min-width:0}
/* Niedrigere Ablageflaeche als bei den anderen PDF-Werkzeugen. NICHT .dz.mini nehmen:
   .mini ist der 44-px-Symbolknopf und quetschte die Flaeche auf 44 px Breite zusammen. */
.pdfv-side .dz{flex:1}
.dz.pdfv-dz{min-height:220px}
.pdfv-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line)}
.pdfv-jump .bar-acts{margin-left:auto}
.pdfv-page{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface-2);font:700 13px var(--mono)}
.pdfv-page:first-child{border-top:0}
.pdfv-old{font:400 12px var(--mono);color:var(--muted)}
.pdfv-list .diff-row:focus-visible,.pdfv-page:focus-visible{outline-offset:-3px}
@media (min-width:900px){
  .pdfv-two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .pdfv-side .dz{min-height:260px}
}

/* --- pdf-text --- */
/* --- pdf-text --- */
/* ---------- Text in PDF einfügen (/pdf/text/) ---------- */
/* Auf der Seite wird ein Textfeld gesetzt, nicht verschoben: Fadenkreuz statt Greifhand. */
.crop-stage.tx-stage{cursor:crosshair}
.crop-stage.tx-stage.tx-move{cursor:move}
/* Der Kasten zeigt nur seine Grenzen – der Text steht schon auf der Zeichenfläche darunter. */
.tx-frame{background:var(--acc-soft)}
.tx-frame::before{display:none}
/* Gezogen wird nur die Breite, die Höhe gehört dem Text: Griffe an den Seiten, keine an den Ecken.
   Die Fläche zum Anfassen bleibt 44 px hoch, auch wenn der Kasten nur eine Zeile hoch ist. */
.tx-frame .crop-h[data-h=w],.tx-frame .crop-h[data-h=e]{height:100%;min-height:44px}
/* Liste der Textfelder: bei vielen Feldern lieber scrollen, als die Spalte endlos wachsen lassen. */
/* .tx-list ist ein senkrechter Flex-Kasten (.fl in components.css) mit fester Hoechsthoehe.
   Ohne flex:none schrumpft der Kasten ab etwa fuenf Eintraegen die einzelnen Zeilen auf ihre
   min-height, obwohl ein zweizeiliger Name plus Groessenangabe mehr Platz braucht - der Text
   einer Zeile liegt dann auf der naechsten. */
.tx-list{max-height:40vh;overflow:auto}
.tx-list>li{flex:none}
.tx-list .fi.sel{border-color:var(--acc-ink);background:var(--acc-soft)}
/* Der Vorschautext muss umbrechen dürfen. Eine Zeile ohne Umbruch zwingt sonst die ganze
   Einstellungsspalte breiter als ein Handy-Display und die Seite wackelt seitlich (gemessen). */
.tx-list .fn{white-space:normal;overflow-wrap:anywhere}
.tx-list .fs{overflow-wrap:anywhere}
.tx-show{color:var(--acc-ink)}

/* --- rechner-arbeitszeit --- */
/* --- rechner-arbeitszeit --- */
/* ---------- Arbeitszeit (/rechner/arbeitszeit/) ---------- */
/* Wochenraster: am Handy zwei Zeilen je Tag (Kürzel und Ergebnis oben, die drei Felder darunter),
   ab 600 px eine Zeile. Die Kopfzeile nutzt dasselbe Raster, damit die Spalten übereinanderstehen.
   Jede Zelle bekommt ihren Platz ausdrücklich: die automatische Platzierung springt hinter dem
   Ergebnis (letzte Spalte) nicht mehr zurück und schöbe die Felder sonst in die nächste Zeile. */
.az-week{display:flex;flex-direction:column}
.az-head,.az-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:center}
.az-head{padding-bottom:6px}
.az-head .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.az-head .az-hk{display:none}
.az-row{padding:10px 0;border-top:1px solid var(--line)}
.az-row .az-day{grid-column:1/3;grid-row:1;font:700 14px var(--mono);color:var(--text)}
.az-row .az-out{grid-column:3;grid-row:1;text-align:right;font:800 18px var(--mono);color:var(--acc-ink);white-space:nowrap}
.az-row .az-out.leer{color:var(--muted);font-weight:600}
.az-row .az-out.bad{color:var(--danger)}
.az-row .az-in{grid-row:2}
.az-row [data-f=kommen]{grid-column:1}
.az-row [data-f=gehen]{grid-column:2}
.az-row [data-f=pause]{grid-column:3}
/* 16 px Schrift, sonst zoomt iOS beim Tippen; mittig, damit 8:00 und 16:30 ruhig untereinanderstehen */
.az-row .inp.num.sm{min-width:0;padding:0 8px;font-size:16px;text-align:center}
.az-row .az-msg{grid-column:1/-1;grid-row:3;margin:0}
/* Ergebniszeile mit Text statt Zahl („5 · im Schnitt 8:00 h") */
.res-row .v.az-sm{font:700 15px var(--mono)}
/* Liste der unlesbaren Zeilen im Fehlerkasten */
.az-errs{margin:4px 0 0;padding-left:18px;font-size:14px;line-height:1.5}
.az-errs li+li{margin-top:4px}
textarea.inp.az-ta{min-height:200px}
@media (min-width:600px){
  .az-head,.az-row{grid-template-columns:44px repeat(3,minmax(0,1fr)) 96px}
  .az-head .az-hk{display:block}
  .az-head .az-hr{text-align:right}
  .az-row .az-day{grid-column:1}
  .az-row .az-in{grid-row:1}
  .az-row [data-f=kommen]{grid-column:2}
  .az-row [data-f=gehen]{grid-column:3}
  .az-row [data-f=pause]{grid-column:4}
  .az-row .az-out{grid-column:5}
  .az-row .az-msg{grid-column:2/-1;grid-row:2}
}

/* --- rechner-preis --- */
/* --- rechner-preis --- */
/* ---------- Preis & Marge (/rechner/preis/) ---------- */
/* Die vier verbundenen Felder (Aufschlag, Marge, VK netto, VK brutto) stehen in einem Kasten unter ihrer Überschrift */
.ctl .pm-linked{margin-top:14px}
/* Rabattfeld mit dem Umschalter % / € daneben; die Knöpfe sind 44 px groß */
.pm-grp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.pm-grp .seg button{min-height:44px;min-width:44px;padding:0 12px}
/* Angebot: am Handy der Preis in voller Breite, darunter Menge und Einheit nebeneinander; ab 600 px alle drei in einer Reihe */
.pm-angebot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.pm-angebot .pm-span{grid-column:1/-1}
@media (min-width:600px){.pm-angebot{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}.pm-angebot .pm-span{grid-column:auto}}
/* Auswahlfeld so hoch wie die Zahlenfelder daneben */
.pm-angebot .sel .inp{height:60px}
/* Mengenfeld hat kein Einheitenzeichen im Feld: ohne den Platz dafür passt „1000" auch in die schmale Spalte */
.inp.num.pm-menge{padding-right:16px}
/* Hinweise, die am Desktop unter beide Spalten des Rasters gehören */
.pm-wide{grid-column:1/-1}

/* --- text-csv --- */
/* ---------- Tabelle (CSV) ansehen und säubern (/text/csv/) ---------- */
/* Ablagefläche niedriger als bei PDF (nicht .dz.mini: die Klasse .mini ist der 44-px-Knopf und würde die Fläche zusammenquetschen) */
.dz.csv-dz{min-height:220px}
/* Eingabefeld: kein Zeilenumbruch, damit Tab-getrennte Spalten untereinander stehen; am Handy niedriger als das Standard-Textfeld */
textarea.inp.csv-ta{min-height:160px;font-size:14px;white-space:pre;overflow-wrap:normal;overflow-x:auto}
@media (min-width:900px){textarea.inp.csv-ta{min-height:220px}}
/* Info rechts in der Kopfzeile eines Kastens darf umbrechen, statt aus dem Kasten zu laufen */
.csv-info{text-align:right;overflow-wrap:anywhere}
.csv-opt{margin-top:12px}
.csv-sw{margin-top:8px}
.csv-sws{margin-top:4px}
/* Spaltenliste: Häkchen 22 px in einer 44 px hohen Zeile, Name klickbar, Pfeile auch am Handy sichtbar */
.csv-cols-p{margin:0 0 4px}
.csv-collist{margin-top:12px}
.csv-col{min-height:56px}
.csv-chk{flex:none;width:22px;height:22px;margin:0 6px 0 4px;accent-color:var(--acc);cursor:pointer}
.csv-col-l{display:flex;flex-direction:column;justify-content:center;min-height:44px;cursor:pointer}
.csv-col-l .fn{white-space:normal;overflow-wrap:anywhere}
.csv-col.csv-off{opacity:.55}
.csv-col.csv-off .fn{text-decoration:line-through}
.csv-colreset{margin-top:12px}
/* Tabelle: scrollt im eigenen Kasten (waagerecht und senkrecht), Kopf bleibt oben, Kennzahlen kleben unten */
.csv-res{padding:0;gap:0;overflow:hidden}
.csv-hd{padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:4px 12px}
.csv-scroll{max-height:60vh;overflow:auto;overscroll-behavior:contain}
.csv-t{border-collapse:separate;border-spacing:0;min-width:100%;font:13px/1.4 var(--mono);white-space:nowrap}
/* Lange Zellen kürzt nicht das CSS: max-width gilt in Tabellenzellen nicht. Das macht cutText() in tools/csv.js, auf genau CUT_CHARS Zeichen. */
.csv-t th,.csv-t td{height:44px;padding:0 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.csv-t thead th{position:sticky;top:0;z-index:2;padding:0;background:var(--surface-2)}
.csv-t td.n,.csv-t th.n{text-align:right}
.csv-t th.n .csv-sort{justify-content:flex-end}
.csv-t tbody tr:hover td{background:var(--surface-2)}
/* leere Zelle: Strich als Platzhalter, für Vorleseprogramme stumm */
.csv-t td.csv-empty::before{content:"–" / "";color:var(--line-strong)}
.csv-t td.csv-more{white-space:normal;color:var(--muted);font-size:12px}
/* Sortierknopf füllt die Kopfzelle (44 px hoch), Pfeil deutlich nur bei aktiver Sortierung */
.csv-sort{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--muted);font:700 13px var(--mono);text-align:left;cursor:pointer;white-space:nowrap}
.csv-sort:hover{color:var(--text)}
.csv-sort svg{flex:none;opacity:.35}
.csv-t th[aria-sort] .csv-sort{color:var(--acc-ink)}
.csv-t th[aria-sort] .csv-sort svg{opacity:1}
.csv-t tfoot th,.csv-t tfoot td{position:sticky;z-index:1;background:var(--surface);font-weight:800;border-top:1px solid var(--line-strong);border-bottom:0}
.csv-t tfoot tr:first-child th,.csv-t tfoot tr:first-child td{bottom:44px}
.csv-t tfoot tr:last-child th,.csv-t tfoot tr:last-child td{bottom:0;border-top-color:var(--line)}
.csv-t tfoot th{color:var(--muted)}
.csv-t tfoot th.n{color:var(--text)}
/* Schalter „Lange Zellen ganz zeigen": umbrechen statt in einer Zeile stehen zu lassen. overflow-wrap:anywhere, damit auch ein
   einzelnes langes Wort bricht und die Tabelle ohne Querscrollen in den Kasten passt. Der Fuß bleibt einzeilig und 44 px hoch,
   sonst stimmt das bottom:44px der ersten Kennzahlenzeile nicht mehr. */
.csv-t.csv-wrapped{white-space:normal}
.csv-t.csv-wrapped tbody td{padding:8px 12px;overflow-wrap:anywhere}
.csv-t.csv-wrapped .csv-sort{white-space:normal;padding-top:8px;padding-bottom:8px;overflow-wrap:anywhere}
.csv-t.csv-wrapped tfoot th,.csv-t.csv-wrapped tfoot td{white-space:nowrap}
.csv-stats{margin:12px 18px 16px}
/* Ausgabe */
.csv-seg{margin-top:12px}
.csv-opts{margin-top:16px}
.csv-fmt-hint,.csv-note{margin-top:12px}
.csv-prev-f{margin-top:16px}
textarea.inp.csv-prev{min-height:140px;font-size:13px;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.csv-btns{margin-top:16px}

/* --- text-csv --- */
/* ---------- Tabelle (CSV) ansehen und säubern (/text/csv/) ---------- */
/* Ablagefläche niedriger als bei PDF (nicht .dz.mini: die Klasse .mini ist der 44-px-Knopf und würde die Fläche zusammenquetschen) */
.dz.csv-dz{min-height:220px}
/* Eingabefeld: kein Zeilenumbruch, damit Tab-getrennte Spalten untereinander stehen; am Handy niedriger als das Standard-Textfeld */
textarea.inp.csv-ta{min-height:160px;font-size:14px;white-space:pre;overflow-wrap:normal;overflow-x:auto}
@media (min-width:900px){textarea.inp.csv-ta{min-height:220px}}
/* Info rechts in der Kopfzeile eines Kastens darf umbrechen, statt aus dem Kasten zu laufen */
.csv-info{text-align:right;overflow-wrap:anywhere}
.csv-opt{margin-top:12px}
.csv-sw{margin-top:8px}
.csv-sws{margin-top:4px}
/* Spaltenliste: Häkchen 22 px in einer 44 px hohen Zeile, Name klickbar, Pfeile auch am Handy sichtbar */
.csv-cols-p{margin:0 0 4px}
.csv-collist{margin-top:12px}
.csv-col{min-height:56px}
.csv-chk{flex:none;width:22px;height:22px;margin:0 6px 0 4px;accent-color:var(--acc);cursor:pointer}
.csv-col-l{display:flex;flex-direction:column;justify-content:center;min-height:44px;cursor:pointer}
.csv-col-l .fn{white-space:normal;overflow-wrap:anywhere}
.csv-col.csv-off{opacity:.55}
.csv-col.csv-off .fn{text-decoration:line-through}
.csv-colreset{margin-top:12px}
/* Tabelle: scrollt im eigenen Kasten (waagerecht und senkrecht), Kopf bleibt oben, Kennzahlen kleben unten */
.csv-res{padding:0;gap:0;overflow:hidden}
.csv-hd{padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:4px 12px}
.csv-scroll{max-height:60vh;overflow:auto;overscroll-behavior:contain}
.csv-t{border-collapse:separate;border-spacing:0;min-width:100%;font:13px/1.4 var(--mono);white-space:nowrap}
.csv-t th,.csv-t td{height:44px;padding:0 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line);max-width:36ch;overflow:hidden;text-overflow:ellipsis}
.csv-t thead th{position:sticky;top:0;z-index:2;padding:0;background:var(--surface-2)}
.csv-t td.n,.csv-t th.n{text-align:right}
.csv-t th.n .csv-sort{justify-content:flex-end}
.csv-t tbody tr:hover td{background:var(--surface-2)}
/* leere Zelle: Strich als Platzhalter, für Vorleseprogramme stumm */
.csv-t td.csv-empty::before{content:"–" / "";color:var(--line-strong)}
.csv-t td.csv-more{white-space:normal;color:var(--muted);font-size:12px}
/* Sortierknopf füllt die Kopfzelle (44 px hoch), Pfeil deutlich nur bei aktiver Sortierung */
.csv-sort{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--muted);font:700 13px var(--mono);text-align:left;cursor:pointer;white-space:nowrap}
.csv-sort:hover{color:var(--text)}
.csv-sort svg{flex:none;opacity:.35}
.csv-t th[aria-sort] .csv-sort{color:var(--acc-ink)}
.csv-t th[aria-sort] .csv-sort svg{opacity:1}
.csv-t tfoot th,.csv-t tfoot td{position:sticky;z-index:1;background:var(--surface);font-weight:800;border-top:1px solid var(--line-strong);border-bottom:0}
.csv-t tfoot tr:first-child th,.csv-t tfoot tr:first-child td{bottom:44px}
.csv-t tfoot tr:last-child th,.csv-t tfoot tr:last-child td{bottom:0;border-top-color:var(--line)}
.csv-t tfoot th{color:var(--muted)}
.csv-t tfoot th.n{color:var(--text)}
.csv-stats{margin:12px 18px 16px}
/* Ausgabe */
.csv-seg{margin-top:12px}
.csv-opts{margin-top:16px}
.csv-fmt-hint,.csv-note{margin-top:12px}
.csv-prev-f{margin-top:16px}
textarea.inp.csv-prev{min-height:140px;font-size:13px;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.csv-btns{margin-top:16px}

/* --- text-pruefsumme --- */
/* --- text-pruefsumme --- */
/* ---------- Prüfsumme berechnen (/text/pruefsumme/) ---------- */
/* Textfeld darf kleiner sein als beim Zählen: hier zählt die Liste darunter */
textarea.inp.ps-ta{min-height:150px;font-size:14px}
@media (min-width:900px){textarea.inp.ps-ta{min-height:190px}}
.ps-dz{min-height:220px}
@media (min-width:900px){.ps-dz{min-height:240px}}
/* Zwei Dateien nebeneinander (ab 600 px), darunter untereinander; kleinere Ablagefelder */
.ps-two{display:grid;gap:16px}
@media (min-width:600px){.ps-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dz.ps-dz2{min-height:200px;padding:24px 16px}
.dz.ps-dz2 h3{font-size:17px}
/* Ergebnisliste: Name oben, Wert darunter (bricht an jeder Stelle, 128 Zeichen passen sonst nirgends), Kopieren rechts */
.ps-res{gap:16px}
/* Kopfzeile: lange Dateinamen dürfen umbrechen statt die Zeile zu sprengen */
.ps-res .res-hd{flex-wrap:wrap;gap:2px 12px}
.ps-res .res-hd .info{min-width:0;overflow-wrap:anywhere;text-align:right}
.ps-grp{display:flex;flex-direction:column;gap:8px}
.ps-grp-t{margin:0;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ps-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ps-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"k c" "v c";gap:2px 8px;align-items:center;padding:10px 6px 10px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);transition:border-color .15s,background .15s}
.ps-k{grid-area:k;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ps-v{grid-area:v;font:600 13px/1.5 var(--mono);color:var(--text);word-break:break-all;overflow-wrap:anywhere;user-select:all}
.ps-row .mini{grid-area:c}
/* Vergleich: die passende Zeile leuchtet grün, die abweichende rot */
.ps-row.hit{border-color:var(--acc-ink);background:var(--acc-soft)}
.ps-row.hit .ps-k{color:var(--acc-ink)}
.ps-row.miss{border-color:var(--danger);background:var(--danger-bg)}
.ps-row.miss .ps-k,.ps-row.miss .ps-v{color:var(--danger)}
/* Abbrechen-Knopf im Fortschrittskasten nicht über die ganze Breite */
.run .ps-cancel{align-self:flex-start}
/* Statuskästchen: drei Symbole übereinander, sichtbar ist genau eines (wie bei der IBAN) */
.ps-st .ni span{display:flex}
@media (min-width:900px){.ps-v{font-size:14px}}

/* --- etiketten-adressen --- */
/* --- etiketten-adressen --- */
/* ---------- Adressetiketten (/etiketten/adressen/) ---------- */
/* Adressfeld: am Handy etwas niedriger als ein normales Textfeld, am Desktop 260 px */
textarea.inp.ea-ta{min-height:200px}
@media (min-width:900px){textarea.inp.ea-ta{min-height:260px}}
/* Eigene Maße: immer zwei Spalten (am Desktop ist die linke Spalte nur rund 400 px breit, vier Felder
   nebeneinander schneiden dort „42,3" ab); Beschriftung klein über dem Feld, „mm" als Suffix */
.ea-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ea-grid .field{gap:4px}
.ea-grid .inp.num.sm{padding-right:38px}
.ea-grid .inp-wrap .suf{right:10px;font-size:13px}
.ea-skip{max-width:140px}
/* Vorschau: die A4-Seite kommt als Bild aus pdf.js; leerer Zustand als kurzer Text */
.ea-prev{min-height:300px}
.ea-prev .prev-cv{max-height:460px}
.ea-empty{margin:0;color:var(--muted);font:600 14px var(--mono);text-align:center}
/* Überschrift und Zählung nebeneinander, bei Platznot untereinander statt mitten im Wort gebrochen */
.ea-hd{flex-wrap:wrap;gap:2px 12px}
/* Spalten-Chips: Spaltennamen können lang sein, deshalb umbrechen statt abschneiden */
.ea-felder .chip{font-size:13px;max-width:100%;overflow-wrap:anywhere}
/* Der Druckhinweis unter dem Download: der fette Teil in Textfarbe, damit er auffällt */
.ea-res .hint b{color:var(--text)}

/* --- text-json --- */
/* --- text-json --- */
/* ---------- JSON formatieren und prüfen (/text/json/) ---------- */
/* Ein- und Ausgabe: Mono, etwas kleiner, Tabs zwei Zeichen breit */
textarea.inp.js-ta{min-height:200px;font-size:14px;line-height:1.5;tab-size:2}
@media (min-width:900px){textarea.inp.js-ta{min-height:280px}}
/* Das Feld nimmt Dateien per Ziehen an. Die unsichtbare Kopie darunter misst nur, wie weit unten
   die Fehlerstelle liegt (json.js: scrollZu); Höhe 0, damit sie die Seite nicht verlängert. */
.js-field{position:relative}
.js-field.js-over textarea{border-color:var(--acc-ink);background:var(--acc-soft)}
.js-mirror{position:absolute;left:0;top:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
/* Statuskästchen: drei Symbole übereinander, sichtbar ist genau eines (wie bei IBAN).
   Die Textspalte darf schrumpfen, sonst schiebt ein langer Ausschnitt die Seite auseinander. */
.js-st .ni span{display:flex}
.js-stb{flex:1;min-width:0}
/* Die betroffene Zeile aus dem Text, Fehlerstelle hervorgehoben; am Zeilenende als schmaler Block */
.js-line{margin:10px 0 0;padding:8px 10px;border-radius:var(--r-s);background:var(--surface);font:13px/1.5 var(--mono);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.js-line mark{padding:0 1px;border-radius:2px;background:var(--danger);color:var(--bg);box-shadow:none}
.js-line mark.js-caret{padding:0 3px}
.js-act{margin:0}
/* Fünf Knöpfe passen am Desktop nicht in eine Zeile: umbrechen statt überlaufen */
.btn-row.js-btns{flex-wrap:wrap}
/* Struktur-Übersicht: Beschriftung, Kacheln, Zusatzzeile */
.js-struct{display:flex;flex-direction:column;gap:8px}

/* --- bilder-bogen --- */
/* --- bilder-bogen --- */
/* ---------- Fotos auf ein Blatt (/bilder/bogen/) ---------- */
/* Vorschaubild in der Liste: das ganze Bild zeigen statt anzuschneiden – auf dem Bogen steht es ja auch ganz. */
.bo-thumb{object-fit:contain}
/* Bildunterschrift direkt in der Zeile: volle Breite, 44 px hoch, 16 px Schrift (kleiner zoomt iOS beim Tippen). */
.inp.bo-cap{height:44px;margin-top:6px;padding:0 10px;font-size:16px}
/* Das Blatt bringt seine eigene Höhe mit, deshalb hier keine Mindesthöhe wie sonst bei .prev. */
.bo-sheet{min-height:0}
/* Weißes Papier auf hellem Grund: eine dünne Linie zeigt, wo das Blatt aufhört. */
.bo-cv{border:1px solid var(--line)}
/* Blätterleiste: Zurück, Zählung, Vor – die Zählung mittig dazwischen, auch auf 375 px. */
.bo-nav{flex-wrap:nowrap;gap:8px}
.bo-nav .info{flex:1 1 auto;min-width:0;text-align:center}
/* Vier Querverweise passen auf 375 px nicht in eine Zeile: umbrechen statt überlaufen
   (gemessen: ohne das ragt die Zeile bei 375 px um 95 px über den Rand). */

/* --- bilder-farben --- */
/* --- bilder-farben --- */
/* ---------- Farben aus einem Bild (/bilder/farben/) ---------- */
/* Die Vorschau ist hier kein Rahmen zum Ziehen, sondern eine Pipette: Fadenkreuz statt Greifhand. */
.crop-stage.bf-stage{cursor:crosshair;outline-offset:3px}
/* Fadenkreuz: Ring mit Punkt. Die Farbe setzt das Skript auf Weiß oder Schwarz, je nachdem
   worauf es gerade liegt; der dunkle Schatten hält es auch auf unruhigem Bild sichtbar. */
.bf-cross{position:absolute;display:block;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.45);color:#fff;pointer-events:none}
.bf-cross[hidden]{display:none}
.bf-cross::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:currentColor}
/* Ergebnis der Pipette, direkt unter dem Bild */
.bf-pip{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.bf-pip-sw{flex:none;width:44px;height:44px;border-radius:var(--r-s);border:1px solid var(--line-strong);background-color:transparent}
/* Durchsichtige Stelle: Karomuster statt einer erfundenen Farbe */
.bf-pip-sw.leer{background-image:linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%),linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%);background-size:14px 14px;background-position:0 0,7px 7px}
.bf-pip-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.bf-pip-v{font:800 17px var(--mono);overflow-wrap:anywhere}
/* Band über der Liste: die Anteile nebeneinander, der schraffierte Rest ist alles, was nicht in der Liste steht */
.bf-strip{display:flex;height:22px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.bf-strip i{display:block;min-width:3px}
.bf-strip .bf-rest{background-color:var(--surface-2);background-image:repeating-linear-gradient(45deg,var(--line-strong),var(--line-strong) 1px,transparent 1px,transparent 6px)}
/* Eine Karte je Farbe */
.bf-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bf-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
/* Die Fläche zeigt weiße und schwarze Schrift nebeneinander – so sieht man die Zahl daneben auch */
.bf-sw{display:flex;align-items:center;justify-content:center;gap:24px;min-height:76px;padding:10px;border-bottom:1px solid var(--line)}
.bf-aa{font:800 20px var(--mono)}
.bf-aa.w{color:#fff}
.bf-aa.s{color:#000}
.bf-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.bf-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bf-pct{font:800 22px var(--mono);color:var(--acc-ink)}
.bf-rank{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bf-val{display:flex;align-items:center;gap:8px}
.bf-v{flex:1 1 auto;min-width:0;font:700 16px var(--mono);overflow-wrap:anywhere}
.bf-v2{flex:1 1 auto;min-width:0;font:500 14px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.bf-tags{display:flex;flex-wrap:wrap;gap:6px}
.bf-tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);font:600 12px var(--mono)}
.bf-tag.ok{background:var(--acc-soft);color:var(--acc-ink)}
.bf-tag.halb{color:var(--text)}
.bf-tag.no{background:var(--danger-bg);color:var(--danger)}
.bf-read{font:14px/1.5 var(--sans);color:var(--text)}
/* Alle Farben als Text: was im Kasten steht, landet genau so in der Zwischenablage */
.bf-seg{margin-top:10px}
.bf-code{margin:10px 0;padding:12px 14px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2);color:var(--text);font:13px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.bf-all{width:100%}
@media (min-width:600px){.bf-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- bilder-symbole --- */
/* --- bilder-symbole --- */
/* Steuerung links, Vorschau rechts – auf dem Handy zuerst die Vorschau. */
.sym-calc>.result{order:-1}
@media (min-width:900px){.sym-calc>.result{order:0}}
/* Karomuster hinter den Vorschaubildern: zeigt, was am Symbol durchsichtig ist. */
.sym-karo{background-color:var(--surface);background-image:linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%),linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.sym-big{display:block;width:100%;max-width:192px;height:auto;border-radius:2px}
/* Die kleinen Bilder bekommen bewusst KEINE Größe aus dem CSS: sie stehen in ihren echten Pixeln da. */
.sym-px{display:block;border-radius:1px;background-size:8px 8px;background-position:0 0,4px 4px}
.sym-real{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
.sym-real>div{display:flex;flex-direction:column;align-items:center;gap:8px}
.sym-real span{font:12px var(--mono);color:var(--muted)}
.sym-th{object-fit:contain;background-size:12px 12px;background-position:0 0,6px 6px}
/* Nachgebauter Browser-Reiter: zeigt das 16er-Symbol dort, wo es später wirklich steht. */
.sym-tab{display:flex;align-items:center;gap:10px;width:100%;max-width:260px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-top:2px solid var(--acc-ink);border-radius:var(--r-s) var(--r-s) 0 0;background:var(--surface-2)}
.sym-tabic{flex:none}
.sym-tab b{flex:1 1 auto;min-width:0;font:500 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sym-x{flex:none;color:var(--muted);font:14px var(--mono)}
.sym-code{max-height:260px;overflow:auto;font-size:13px;line-height:1.6;overflow-wrap:anywhere}

/* --- bilder-verbessern --- */
/* --- bilder-verbessern --- */
/* ---------- Foto verbessern (/bilder/verbessern/) ---------- */
/* Vorschaufläche wie beim Zuschneiden, nur ohne den Platz für die Griffe am Bildrand. */
.bv-area{padding:12px;min-height:180px}
/* Überschrift und Maßangabe: die Angabe wird beim Drehen lang („1467 × 1100 px · aus 1600 × 1200
   beschnitten"), dann lieber umbrechen als aneinanderkleben. */
.bv-hd{flex-wrap:wrap;gap:2px 12px}
/* Zahl neben dem Regler: fester Platz, sonst springt die Zeile beim Ziehen (−100 ist breiter als 0). */
.bv-val{min-width:4.5ch;text-align:right}
/* Regler, die gerade nichts bewirken (Sättigung bei Graustufen, Graustufen bei Schwarzweiß):
   sichtbar, aber gedimmt. Wirklich abgeschaltet werden sie im Skript. */
.bv-off{opacity:.55}

/* --- etiketten-codes --- */
/* --- etiketten-codes --- */
/* ---------- Code-Etiketten (/etiketten/codes/) ---------- */
/* Vorschau am Handy über den Einstellungen, am Desktop rechts daneben (wie beim Barcode) */
.ce-calc>.result{order:-1}
@media (min-width:900px){.ce-calc>.result{order:0}}
/* A4-Vorschau hochkant: nicht höher als der Bildschirm, damit man den Knopf darunter noch sieht */
.ce-prev{min-height:200px}
.ce-prev .prev-cv{max-height:70vh}
/* Eigenes Raster: acht Maßfelder, am Handy zwei je Zeile, ab 600 px vier */
.ce-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.ce-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ce-grid .inp.num.sm{padding-right:38px}
.ce-grid .inp-wrap .suf{right:10px;font-size:13px}
.ce-grid .field{gap:4px}
/* Beispiel unter der Vorlage: erste und letzte Nummer, in der Signalfarbe */
.ce-ex{margin:0;font:600 13px var(--mono);color:var(--acc-ink);overflow-wrap:anywhere;min-height:1.3em}
/* Liste der Einträge, die nicht gehen */
.ce-bad{margin:8px 0 0;padding-left:18px;font:13px/1.6 var(--mono)}
.ce-bad li{overflow-wrap:anywhere}
/* Textfeld für die Liste: ein Eintrag je Zeile */
textarea.inp.ce-ta{min-height:180px;font-size:15px}

/* --- rechner-einheiten --- */
/* --- rechner-einheiten --- */
/* ---------- Rechner: Einheiten (/rechner/#einheiten), Präfix .eh- ---------- */
/* Schalter „Windows: 1.024 / Hersteller: 1.000" für die Datenmenge: beide Beschriftungen müssen
   bei 375 px einzeilig in die zwei Knöpfe passen (im Browser nachgemessen: 129,5 px Text bei 145 px Platz).
   Spezifität .seg.wide.eh-seg ist nötig, weil .seg.wide button in components.css 14 px und 14 px Polster setzt. */
.seg.wide.eh-seg button{padding:0 8px;font-size:13px}

/* --- text-kodieren --- */
/* --- text-kodieren --- */
/* ---------- Kodieren und dekodieren (/text/kodieren/) ---------- */
/* Ein- und Ausgabefeld sind kürzer als das Standard-Textfeld: je Reiter stehen zwei, am Handy untereinander */
textarea.inp.kd-ta{min-height:150px;font-size:15px}
textarea.inp.kd-out{min-height:150px;font-size:14px;overflow-wrap:anywhere}
@media (min-width:900px){textarea.inp.kd-ta,textarea.inp.kd-out{min-height:220px}}
/* Drei Knöpfe unter dem Base64-Ergebnis (Kopieren, Speichern mit Dateityp, Tauschen): passen sie nicht in eine
   Zeile, rutscht „Speichern" in eine eigene Zeile und wird dort breit. Ohne das lief die Seite am Handy 50 px über. */
.row-btns.kd-btns{flex-wrap:wrap}
.kd-btns .kd-dl{flex:1 1 auto}
/* Hinweis unter dem Ergebnis: etwas schmaler als ein Warnkasten */
.kd-note{padding:12px 14px;font-size:14px}
/* Vorschau einer dekodierten Bilddatei: in Originalgröße (align-self, sonst zieht der Flex-Kasten sie auf volle Breite),
   höchstens 260 px hoch; das Karo zeigt, was durchsichtig ist */
.kd-prev{display:block;align-self:flex-start;max-width:100%;max-height:260px;width:auto;height:auto;padding:8px;border-radius:var(--r-m);background-color:var(--surface-2);background-image:linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%),linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
/* Gewählte Datei statt Textfeld: Symbol, Name (darf umbrechen), darunter Größe und Typ, rechts der Entfernen-Knopf */
.outfile.kd-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center}
.kd-file-ic{grid-row:1/span 2;display:flex;color:var(--acc-ink)}
.kd-file-n{grid-column:2;min-width:0;overflow-wrap:anywhere}
.outfile.kd-file .kd-file-s{grid-column:2;margin-left:0;font-weight:400;font-size:13px}
.kd-file .mini{grid-column:3;grid-row:1/span 2}
/* Schalterzeile direkt unter einer Auswahl-Zeile im selben Kasten */
.ctl .kd-sw-solo{margin-top:14px;border-top:1px solid var(--line)}
/* Abschnitt „Adresse zerlegen" unter dem URL-Reiter */
.kd-sec{padding-top:8px}
.kd-h2{margin:0 0 4px;font:800 19px/1.3 var(--mono)}
.kd-rows{display:flex;flex-direction:column}
.kd-rows:empty{display:none}
.kd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.kd-row:first-child{border-top:0}
.kd-k{grid-column:1;font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kd-v{grid-column:1;min-width:0;font:500 14px/1.45 var(--mono);overflow-wrap:anywhere}
.kd-row .kd-cp{grid-column:2;grid-row:1/span 2}
.kd-params{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kd-param{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2)}
.kd-param.track{border-style:dashed}
.kd-pk{grid-column:1;font:700 13px var(--mono);color:var(--acc-ink);overflow-wrap:anywhere}
.kd-pv{grid-column:1;min-width:0;font:14px/1.45 var(--sans);overflow-wrap:anywhere;white-space:pre-wrap}
.kd-param .kd-cp{grid-column:2;grid-row:1/span 2}
.kd-tag{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font:600 10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);vertical-align:middle;white-space:nowrap}
/* Kopieren-Knopf in den Zeilen: nur ein Symbol, aber 44 px Fläche */
.kd-cp{min-width:44px;padding:0 12px}

/* --- text-zeichen --- */
/* ---------- Zeichensalat (/text/zeichen/) ---------- */
/* In "Vorher/Nachher" und in der Roentgenansicht steht fremder Text: eine Mail, eine CSV-Zeile,
   ein Export. Der enthaelt oft lange Stuecke ohne Leerzeichen. Ohne Umbruch an beliebiger Stelle
   laeuft er aus dem Kasten und ueber den Bildschirmrand. pre-wrap haelt die Zeilen des Textes;
   max-height plus overflow machen daraus den scrollbaren Bereich, als der die Kaesten mit
   tabindex="0" und aria-label ohnehin gedacht sind. */
.zs-pane{max-width:100%;max-height:40vh;overflow:auto;overscroll-behavior:contain;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg);font:13px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}

/* --- bereichsnav --- */
/* Knopfreihe direkt unter der Ueberschrift: zeigt die Geschwister-Werkzeuge sofort, statt sie als
   Kacheln ans Seitenende zu verbannen. Die aktuelle Seite ist hervorgehoben.
   Immer EINE Zeile, die sich seitlich schieben laesst. Bei 18 PDF-Werkzeugen waeren es sonst vier
   Zeilen Knoepfe ueber dem eigentlichen Werkzeug - das schiebt die Arbeit nach unten. */
.bnav{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin:-2px calc(var(--gutter) * -1) 22px;padding:2px var(--gutter) 8px;
  border-bottom:1px solid var(--line)}
.bnav::-webkit-scrollbar{display:none}
.bnav-a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  font:600 14px/1 var(--mono);color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.bnav-a:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-2)}
/* Die Seite, auf der man gerade ist: gefuellt, damit man sich in der Reihe wiederfindet */
.bnav-a.is-hier{border-color:var(--acc-ink);background:var(--acc-soft);color:var(--acc-ink)}
.bnav-a.is-hier:hover{background:var(--acc-soft)}
/* Auf breiten Seiten steht die Reihe im Textmass, nicht am Fensterrand */
@media (min-width:900px){.bnav{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}
/* Weicher Rand, solange es in diese Richtung weitergeht. Die Klassen setzt ui.js. */
.bnav.kann-links{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30px);mask-image:linear-gradient(to right,transparent 0,#000 30px)}
.bnav.kann-rechts{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 30px);mask-image:linear-gradient(to left,transparent 0,#000 30px)}
.bnav.kann-links.kann-rechts{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}

/* --- warum --- */
/* ---------- Warum ich BNKZ gebaut habe (/warum/) ---------- */
/* Manifest statt Werkzeug: ganzseitige Abschnitte, große Typo, ein Akzent.
   Deshalb kein .wrap/.tool, sondern eigene Bahnen mit eigener Innenbreite. */
.wa{display:block}
/* Feine Leselinie am oberen Rand: waechst mit dem Scrollen. Kann der Browser die
   Scroll-Zeitachse nicht, bleibt sie bei scaleX(0) und damit unsichtbar. */
.wa::before{content:"";position:fixed;left:0;top:0;z-index:5;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){
  .wa::before{animation:wa-bar linear both;animation-timeline:scroll(root block)}
  @keyframes wa-bar{to{transform:scaleX(1)}}
}
.wa-in{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Kopf ---------- */
/* overflow:hidden hält den versetzten Rahmen hinter dem Bild und den Lichtschein
   innerhalb der Bahn – sonst ließe sich die Seite seitlich schieben. */
.wa-hero{position:relative;overflow:hidden;padding:0 0 clamp(44px,7vw,92px);border-bottom:1px solid var(--line)}
.wa-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 52% at 20% 12%,var(--acc-soft),transparent 72%)}
/* Feines Raster wie auf einem Millimeterpapier, das nach außen ausblendet */
.wa-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 72px),repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(68% 62% at 26% 8%,#000,transparent 76%);
  mask-image:radial-gradient(68% 62% at 26% 8%,#000,transparent 76%)}
.wa-hero>.wa-in{position:relative;z-index:1}

.wa-hero-g{display:grid;gap:clamp(26px,4vw,48px);align-items:center;padding-top:clamp(12px,3vw,28px)}
@media (min-width:860px){.wa-hero-g{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)}}
.wa-tit{margin:10px 0 0;font:800 clamp(2.3rem,7vw,4.5rem)/1.02 var(--mono);letter-spacing:-.035em;color:var(--text);text-wrap:balance}
.wa-acc{color:var(--acc-ink)}
.wa-lead{margin:clamp(18px,3vw,28px) 0 0;font:700 clamp(1.2rem,2.4vw,1.7rem)/1.3 var(--sans);color:var(--text)}
.wa-sub{margin:14px 0 0;max-width:52ch;font-size:17px;line-height:1.7;color:var(--muted)}
/* Leitsatz mit Namen darunter, an der Stelle, an der sonst nur der Name stuende */
.wa-motto{margin:clamp(24px,4vw,34px) 0 0;padding-left:18px;border-left:2px solid var(--acc)}
.wa-motto blockquote{margin:0}
.wa-motto p{margin:0;max-width:26ch;font:600 clamp(1.05rem,2vw,1.35rem)/1.4 var(--sans);font-style:italic;color:var(--text)}
.wa-motto figcaption{margin-top:10px;font:700 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.wa-fig{position:relative;margin:0;justify-self:center;width:100%;max-width:420px}
/* Versetzter Rahmen: gibt dem Bild Tiefe, ohne es zu verändern */
.wa-fig::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--acc-ink);border-radius:var(--r-l);opacity:.5}
.wa-img{position:relative;display:block;width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface-2)}

/* ---------- Abschnitte ---------- */
.wa-sec{padding:clamp(52px,8vw,104px) 0}
.wa-sec+.wa-sec{padding-top:0}
.wa-lbl{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wa-lbl b{color:var(--acc-ink)}
.wa-lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.wa-h2{margin:0 0 18px;max-width:20ch;font:800 clamp(1.55rem,3.6vw,2.6rem)/1.12 var(--mono);letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.wa-p{margin:0 0 16px;max-width:62ch;font-size:17px;line-height:1.75;color:var(--muted)}

/* ---------- Gegenüberstellung ---------- */
.wa-vs{display:grid;gap:14px;margin:30px 0 0}
@media (min-width:760px){.wa-vs{grid-template-columns:1fr 1fr;gap:20px;align-items:start}}
.wa-vs-c{padding:22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.wa-vs-b{border-color:var(--acc-ink);background:linear-gradient(180deg,var(--acc-soft),transparent 65%),var(--surface)}
.wa-vs-h{margin:0 0 16px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wa-vs-b .wa-vs-h{color:var(--acc-ink)}
.wa-vs ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.wa-vs li{display:flex;gap:10px;align-items:flex-start;font:600 16px/1.45 var(--sans)}
.wa-vs li svg{flex:none;margin-top:3px}
.wa-vs-a li{color:var(--muted)}
.wa-vs-a li svg{color:var(--danger)}
.wa-vs-a li span{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--danger)}
.wa-vs-b li{color:var(--text)}
.wa-vs-b li svg{color:var(--acc-ink)}

/* ---------- Bahn mit einem einzigen Satz ---------- */
.wa-band{padding:clamp(46px,8vw,96px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.wa-band-t{margin:0;font:800 clamp(1.9rem,6.2vw,3.9rem)/1.06 var(--mono);letter-spacing:-.035em;color:var(--text);text-wrap:balance}
.wa-band-s{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--muted)}
/* Hohle Schrift: gleiche Größe, nur Kontur – der Satz kippt damit sichtbar um */
.wa-hollow{color:var(--acc-ink)}
@supports (-webkit-text-stroke:1px currentColor){.wa-hollow{color:transparent;-webkit-text-stroke:1.5px var(--acc-ink)}}
.wa-band-2{background:var(--bg)}

/* ---------- Die vier Ohne ---------- */
.wa-cards{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:640px){.wa-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.wa-card{position:relative;padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden;transition:border-color var(--t-fast),transform var(--t-fast)}
.wa-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.wa-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.wa-card b{display:block;max-width:24ch;font:800 clamp(1.1rem,2.2vw,1.4rem)/1.25 var(--mono);letter-spacing:-.02em;color:var(--text)}
.wa-card span{display:block;margin-top:10px;max-width:42ch;font-size:15px;line-height:1.6;color:var(--muted)}
/* Geisterzahl als Schmuck – bewusst zweistellig, damit sie nie mit Text verwechselt wird */
.wa-card i{position:absolute;right:12px;top:2px;z-index:0;font:800 46px/1 var(--mono);font-style:normal;color:var(--acc-soft);pointer-events:none}
/* Der Text liegt ueber der Geisterzahl, sonst laeuft sie bei langen Titeln hinein. */
.wa-card b,.wa-card span{position:relative;z-index:1}

/* ---------- Gleichung ---------- */
.wa-eq{display:grid;gap:12px;margin:32px 0 0;padding:22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.wa-eq-r{display:grid;gap:2px;justify-items:center;text-align:center;padding:12px 0}
.wa-eq-r+.wa-eq-r{border-top:1px solid var(--line)}
@media (min-width:640px){
  .wa-eq-r{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
  .wa-eq-r span:first-child{justify-self:end;text-align:right}
  .wa-eq-r span:last-child{justify-self:start;text-align:left}
}
.wa-eq-r span{font:700 clamp(1rem,2vw,1.3rem)/1.35 var(--sans);color:var(--text)}
.wa-eq-r b{font:800 clamp(1.4rem,3vw,2rem)/1 var(--mono);color:var(--acc-ink)}

/* ---------- Zitat-Bahn ---------- */
.wa-quote{padding:clamp(46px,8vw,96px) 0;background:var(--acc);color:var(--on-acc)}
.wa-quote-l{margin:0 0 16px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.wa-quote-b{margin:0}
.wa-quote-b p{margin:0;max-width:26ch;font:800 clamp(1.45rem,4.2vw,2.7rem)/1.14 var(--mono);letter-spacing:-.03em;color:var(--on-acc);text-wrap:balance}
@media (min-width:760px){.wa-quote-b p{max-width:30ch}}

/* ---------- Schluss ---------- */
.wa-fin{margin:clamp(34px,6vw,60px) 0 0;padding:clamp(22px,4vw,32px);border:1px solid var(--line-strong);border-radius:var(--r-l);background:var(--bg)}
.wa-fin p{display:flex;align-items:baseline;gap:12px;margin:0;font:800 clamp(1.1rem,3.4vw,2rem)/1.3 var(--mono);letter-spacing:-.025em;color:var(--text)}
.wa-fin p::before{content:">";flex:none;color:var(--acc-ink)}
.wa-fin p+p{margin-top:10px}
.wa-fin .wa-fin-s{margin-top:20px;font:400 16px/1.6 var(--sans);letter-spacing:0;color:var(--muted)}
.wa-fin .wa-fin-s::before{content:none}
.wa-cta{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.wa-note{margin:22px 0 0}
.wa-ende{padding-bottom:clamp(56px,9vw,112px)}

/* Zweites Foto, tiefer im Text: ein Werkstattbild, kein Portrait. Volle Textbreite statt
   der schmalen Bildspalte oben, damit es wie ein Einschub wirkt und nicht wie ein zweites
   Titelbild konkurriert. */
.wa-foto-sec{padding-top:0;padding-bottom:clamp(36px,6vw,64px)}
.wa-foto{margin:0 auto;max-width:880px}
.wa-foto-img{display:block;width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface-2)}
/* Terminal-Zweizeiler statt einer normalen Bildunterschrift: passt zum Rest der Seite
   ($ whoami ist der einzige Befehl auf der Seite, der etwas ueber die Person sagt). */
.wa-foto-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:16px 2px 0;font:600 14px/1.4 var(--mono);color:var(--text)}
.wa-foto-cmd{color:var(--acc-ink)}
.wa-foto-cmd::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);vertical-align:middle}
/* Zweites Foto ohne Unterschrift, etwas schmaler: die Quelle ist nur 712 px breit. */
.wa-foto-schmal{max-width:700px}

/* ---------- Auftauchen beim Scrollen ---------- */
/* Nur, wenn der Browser es ohne Skript kann und niemand weniger Bewegung wünscht.
   Der Startwert ist .01 statt 0, damit die Abschnitte auch für Mess- und Lesewerkzeuge
   sichtbar bleiben, falls die Zeitachse nicht greift. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .wa-rise{animation:wa-rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes wa-rise{from{opacity:.01;transform:translateY(28px)}to{opacity:1;transform:none}}
  }
}

/* Verweis aus einem Startseiten-Abschnitt auf die ausfuehrliche Seite */
.sec-mehr{margin-top:20px}

/* --- sicher --- */
/* ---------- Warum das hier sicher ist (/sicher/) ---------- */
/* Erklärseite, kein Werkzeug: ganzseitige Abschnitte wie auf /warum/, eigene Innenbreite. */
.si{display:block}
.si-in{width:100%;max-width:1100px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Kopf ---------- */
.si-hero{position:relative;overflow:hidden;padding:0 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.si-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(56% 52% at 78% 6%,var(--acc-soft),transparent 70%)}
.si-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 72px),repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(66% 60% at 74% 4%,#000,transparent 76%);
  mask-image:radial-gradient(66% 60% at 74% 4%,#000,transparent 76%)}
.si-hero>.si-in{position:relative;z-index:1}
.si-hero-t{padding-top:clamp(12px,3vw,26px)}
.si-tit{margin:10px 0 0;max-width:16ch;font:800 clamp(2.2rem,6.4vw,4.1rem)/1.04 var(--mono);letter-spacing:-.035em;color:var(--text);text-wrap:balance}
.si-acc{color:var(--acc-ink)}
.si-lead{margin:clamp(16px,3vw,26px) 0 0;max-width:34ch;font:700 clamp(1.15rem,2.3vw,1.6rem)/1.32 var(--sans);color:var(--text)}
.si-sub{margin:14px 0 0;max-width:62ch;font-size:17px;line-height:1.7;color:var(--muted)}

/* Drei große Nullen */
.si-zahlen{list-style:none;display:grid;gap:12px;margin:clamp(28px,4vw,44px) 0 0;padding:0}
@media (min-width:640px){.si-zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.si-zahlen li{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.si-zahlen b{flex:none;font:800 clamp(2.4rem,5vw,3.2rem)/1 var(--mono);letter-spacing:-.05em;color:var(--acc-ink)}
.si-zahlen span{font:600 15px/1.35 var(--sans);color:var(--text)}

/* ---------- Abschnitte ---------- */
.si-sec{padding:clamp(48px,7vw,92px) 0}
.si-sec+.si-sec{padding-top:0}
.si-lbl{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.si-lbl b{color:var(--acc-ink)}
.si-lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.si-h2{margin:0 0 18px;max-width:20ch;font:800 clamp(1.5rem,3.4vw,2.4rem)/1.14 var(--mono);letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.si-p{margin:0 0 16px;max-width:64ch;font-size:17px;line-height:1.75;color:var(--muted)}
.si-sec .note{margin-top:24px}
.si-ende{padding-bottom:clamp(56px,8vw,104px)}

/* ---------- Schaubild: wo die Datei bleibt ---------- */
.si-dia{display:grid;gap:14px;margin:30px 0 0;align-items:center}
@media (min-width:860px){.si-dia{grid-template-columns:minmax(0,1fr) auto minmax(0,.85fr);gap:22px}}
.si-box{padding:20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.si-box-ich{border-color:var(--acc-ink);background:linear-gradient(180deg,var(--acc-soft),transparent 70%),var(--surface)}
.si-box-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:800 15px/1.2 var(--mono);letter-spacing:.02em;color:var(--text)}
.si-box-ich .si-box-h svg{color:var(--acc-ink)}
.si-box-p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.si-tab{padding:16px;border:1px dashed var(--line-strong);border-radius:var(--r-m);background:var(--bg)}
.si-tab-h{margin:0 0 12px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.si-tab ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.si-tab li{display:flex;gap:9px;align-items:flex-start;font:600 15px/1.4 var(--sans);color:var(--text)}
.si-tab li svg{flex:none;margin-top:3px;color:var(--acc-ink)}

/* Die beiden Wege zwischen den Kästen */
.si-weg{display:grid;gap:10px;justify-items:stretch}
@media (min-width:860px){.si-weg{width:210px}}
.si-pfeil{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2)}
.si-pfeil svg{flex:none;margin-top:2px}
.si-pfeil span{font:600 13px/1.35 var(--sans);color:var(--text)}
.si-pfeil b{display:block;margin-top:3px;font:400 12px/1.35 var(--mono);color:var(--muted)}
.si-ja svg{color:var(--acc-ink)}
.si-nein{border-color:var(--danger);background:var(--danger-bg)}
.si-nein svg{color:var(--danger)}
.si-nein span{color:var(--danger)}
.si-nein b{color:var(--danger);opacity:.85}
/* Auf schmalen Bildschirmen zeigt der Ladepfeil nach oben, nicht nach links */
@media (max-width:859px){.si-ja svg{transform:rotate(90deg)}}

/* ---------- Die Regeln der Content-Security-Policy ---------- */
.si-regeln{list-style:none;margin:28px 0 24px;padding:0;display:grid;gap:10px}
.si-regeln li{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
@media (min-width:760px){.si-regeln li{grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:baseline}}
.si-regeln code{font:700 14px/1.4 var(--mono);color:var(--acc-ink);overflow-wrap:anywhere}
.si-regeln span{font-size:15px;line-height:1.6;color:var(--muted)}

/* ---------- Bahn mit einem Satz ---------- */
.si-band{padding:clamp(42px,7vw,88px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.si-band-t{margin:0;font:800 clamp(1.5rem,4.4vw,2.9rem)/1.12 var(--mono);letter-spacing:-.03em;color:var(--text);text-wrap:balance}

/* ---------- Was der Zählimpuls sendet ---------- */
.si-paket{margin:26px 0 22px;padding:22px;border:1px solid var(--line-strong);border-radius:var(--r-l);background:var(--surface)}
.si-paket-h{margin:0 0 16px;font:800 15px/1.3 var(--mono);color:var(--text)}
.si-paket ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.si-paket li{display:grid;gap:4px}
@media (min-width:600px){.si-paket li{grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:baseline}}
.si-paket code{font:800 14px/1.4 var(--mono);color:var(--acc-ink)}
.si-paket span{font-size:15px;line-height:1.6;color:var(--muted)}
.si-paket-f{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font:700 15px/1.5 var(--sans);color:var(--text)}

/* ---------- Vier Schritte ---------- */
.si-schritte{list-style:none;counter-reset:si;margin:28px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.si-schritte{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.si-schritte li{counter-increment:si;position:relative;padding:20px 20px 20px 62px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.si-schritte li::before{content:counter(si,decimal-leading-zero);position:absolute;left:20px;top:18px;
  font:800 20px/1 var(--mono);color:var(--acc-ink)}
.si-schritte b{display:block;font:800 16px/1.3 var(--mono);color:var(--text)}
.si-schritte span{display:block;margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.si-cta{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}

/* ---------- Auftauchen beim Scrollen ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .si-rise{animation:si-rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes si-rise{from{opacity:.01;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
}