/* Secuvise-Design: Bausteine. Setzt tokens.css voraus. Klassennamen deutsch.
   Reihenfolge: Kopfleiste, Seite, Knoepfe, Karten, Etiketten, Filter, Listen,
   Detail, Tabellen, Text, Verweise, Leerzustand, Kennzahlen, Dialog, Formular,
   Zeileneditor, Wahl, Suchliste, Suchwahl, Segmente, Ablage, Banner,
   Fehlerkarte, Tipp, Meldung, Editor, Schienen und Panels, Randspur,
   Fliesstext, Tablet, Handy. */

/* ---------------------------------------------------------------- Kopfleiste */
.kopfleiste{position:sticky;top:0;z-index:40;background:rgba(251,252,253,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.kopfleiste-innen{max-width:var(--seitenbreite);margin:0 auto;padding:0 20px;
  height:var(--kopfhoehe);display:flex;align-items:center;gap:16px}
.marke{display:flex;align-items:center;flex-shrink:0}
.marke-wort{height:20px;width:auto;display:block}
.marke-zeichen{height:24px;width:auto;display:none}
nav.reiter{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.reiter::-webkit-scrollbar{display:none}
nav.reiter a{padding:6px 11px;border-radius:var(--r-knopf);color:var(--gedaempft);
  font-weight:500;white-space:nowrap}
nav.reiter a:hover{background:var(--stahl-hell);color:var(--tinte)}
nav.reiter a.an{background:var(--stahl-hell);color:var(--stahl);font-weight:600}
.kopfleiste-rechts{margin-left:auto;display:flex;align-items:center;gap:8px}
.suche{position:relative}
.suche input{width:200px;padding:7px 11px 7px 30px;border:1px solid var(--linie);
  border-radius:var(--r-knopf);background:var(--karte)}
.suche svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--gedaempft)}
@media(max-width:820px){
  .suche input{width:130px}
  .marke-wort{display:none} .marke-zeichen{display:block}
}

/* --------------------------------------------------------------------- Seite */
.seite{max-width:var(--seitenbreite);margin:0 auto;padding:22px 20px 80px}
.seitenkopf{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.seitenkopf > :first-child{flex:1 1 320px;min-width:0}
.seitenkopf h1{font-size:21px;font-weight:650;letter-spacing:-.02em}
.seitenkopf p{color:var(--gedaempft);margin-top:2px}
.seitenkopf .aktionen{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap}

/* ------------------------------------------------------------------- Knoepfe */
.knopf{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-knopf);
  font-weight:550;white-space:nowrap;transition:background .12s,color .12s;position:relative}
.knopf-primaer{background:var(--stahl);color:var(--stahl-text)}
.knopf-primaer:hover{background:#2e4560}
.knopf-sekundaer{background:var(--karte);border:1px solid var(--linie);box-shadow:var(--schatten-karte)}
.knopf-sekundaer:hover{background:var(--stahl-hell)}
.knopf-leise{color:var(--gedaempft)}
.knopf-leise:hover{background:var(--stahl-hell);color:var(--tinte)}
.knopf-gefahr{background:var(--rot);color:#fff}
.knopf-gefahr:hover{background:#cf3f24}
.knopf-dezent{background:var(--stahl-hell);color:var(--stahl)}
.knopf-symbol{padding:6px;border-radius:var(--r-knopf)}
.knopf-klein{padding:5px 10px;font-size:13px}
.knopf-gross{padding:9px 17px}
.knopf[disabled]{opacity:.5;pointer-events:none}
/* Laeuft: der Text weicht dem Kreisel, der Knopf behaelt seine Breite */
.knopf.laedt{color:transparent}
.knopf.laedt:after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:dreh .7s linear infinite;color:var(--stahl-text)}
.knopf-sekundaer.laedt:after,.knopf-leise.laedt:after{color:var(--gedaempft)}
@keyframes dreh{to{transform:rotate(360deg)}}

.kreisel{width:18px;height:18px;border:2px solid var(--linie);border-top-color:var(--stahl);
  border-radius:50%;animation:dreh .7s linear infinite}
.kreisel-mitte{display:grid;place-items:center;padding:60px}

/* -------------------------------------------------------------------- Karten */
/* clip statt hidden: hidden macht die Karte zum Scrollkasten, und darin
   klebt nichts mehr (sticky-Leisten beim Bearbeiten am Abschnitt) */
.karte{background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte);overflow:clip}
.karte + .karte{margin-top:14px}
.karteninhalt{padding:16px 18px}
.getrennt > * + *{border-top:1px solid var(--linie)}

/* ----------------------------------------------------------------- Etiketten
   Immer mit Text: die Farbe unterstuetzt, sie traegt die Aussage nicht. */
.etikett{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.etikett-neutral{background:#EDEFF2;color:#4B5563}
.etikett-akzent{background:var(--stahl-hell);color:var(--stahl)}
.etikett-ok{background:var(--gruen-hell);color:var(--gruen-text)}
.etikett-achtung{background:var(--rot-hell);color:var(--rot-text)}
.etikett-still{background:transparent;color:var(--gedaempft);border:1px solid var(--linie)}
.kennung{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:.01em}
/* Kennungsspalte einer Liste: gleich breit, solange die Kennung passt. Eine
   lange darf die Zeile nicht auseinanderziehen -- sie bricht notfalls um. */
.kennungsspalte{flex:0 0 auto;min-width:120px;max-width:210px;justify-content:center;
  text-align:center;white-space:normal;overflow-wrap:anywhere}

.gedaempft{color:var(--gedaempft)}
.klein{font-size:13px}
.winzig{font-size:12px}
/* Mehrere Angaben in einer Zeile (Datum, Person, Zaehler): Abstand statt
   Trennzeichen; jede Angabe ist fuer sich verstaendlich */
.angaben > * + *{margin-left:12px}
.ziffern{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------- Filter */
.filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:5px 11px;border-radius:999px;border:1px solid var(--linie);background:var(--karte);
  font-size:13px;font-weight:500;color:var(--gedaempft)}
.chip:hover{background:var(--stahl-hell)}
.chip.an{background:var(--stahl);border-color:var(--stahl);color:var(--stahl-text)}
.filter .trenner{width:1px;height:20px;background:var(--linie);margin:0 2px}
.chip .chip-zahl{margin-left:6px;font-weight:700;color:var(--gedaempft)}
.chip.an .chip-zahl{color:inherit;opacity:.85}

/* -------------------------------------------------------------------- Listen */
.zeile{display:flex;align-items:center;gap:14px;padding:13px 18px;transition:background .1s}
a.zeile:hover,.zeile.klick:hover{background:#F5F7F9;cursor:pointer}
.zeile .inhalt{display:flex;flex-direction:column;min-width:0;flex:1}
.zeile .titel{font-weight:550;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.zeile .unter{color:var(--gedaempft);font-size:13px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* In Dialogen darf der Untertitel umbrechen, dort ist er die Erklaerung */
.schleier .zeile .unter{white-space:normal}
.zeile .rechts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.zeile .pfeil{opacity:0;color:var(--gedaempft)}
.zeile:hover .pfeil{opacity:1}
.gruppentitel{display:flex;align-items:center;gap:9px;padding:16px 2px 8px;
  font-size:11px;font-weight:700;color:var(--gedaempft);text-transform:uppercase;letter-spacing:.06em}
.gruppentitel .zahl{background:#E4E7EA;color:#4B5563;border-radius:999px;
  padding:1px 7px;font-size:11px;letter-spacing:0}

/* -------------------------------------------------------------------- Detail
   Gliederung links, Abschnitte als Karten rechts */
.detail{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
.gliederung{position:sticky;top:calc(var(--kopfhoehe) + 20px)}
.gliederung a{display:block;padding:5px 10px;border-radius:var(--r-klein);color:var(--gedaempft);font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gliederung a:hover{background:var(--stahl-hell);color:var(--tinte)}
.gliederung a.an{background:var(--stahl-hell);color:var(--stahl);font-weight:600}
.gliederung .gruppe{padding:10px 10px 4px;font-size:11px;font-weight:700;color:var(--gedaempft);
  text-transform:uppercase;letter-spacing:.06em}

.abschnitt{scroll-margin-top:calc(var(--kopfhoehe) + 18px)}
.abschnittskopf{display:flex;align-items:center;gap:10px;padding:14px 18px 0}
/* Beim Bearbeiten am Abschnitt bleiben Titel, Speichern und Abbrechen oben
   stehen; die Editorleiste klebt darunter */
.abschnitt.im-editor > .abschnittskopf{position:sticky;top:var(--kopfhoehe);z-index:6;
  background:var(--karte);padding-bottom:10px;min-height:64px;box-sizing:border-box}
.abschnitt.im-editor .editor-leiste{top:calc(var(--kopfhoehe) + 64px)}
.abschnittskopf h2{font-size:15px;font-weight:650;letter-spacing:-.01em}
.abschnittskopf .nr{display:grid;place-items:center;width:21px;height:21px;border-radius:var(--r-klein);
  background:var(--stahl-hell);color:var(--stahl);font-size:11px;font-weight:700;flex-shrink:0}
/* Bearbeiten erscheint erst beim Zeigen auf die Karte (auf Tablets immer) */
.abschnittskopf .bearbeiten{margin-left:auto;opacity:0}
.karte:hover .abschnittskopf .bearbeiten,.abschnittskopf .bearbeiten:focus-visible{opacity:1}

.block{padding:12px 18px 16px}
.block + .block{padding-top:0}
.feldtitel{font-size:13px;font-weight:650;color:var(--tinte);letter-spacing:-.005em;
  margin-bottom:5px}
.feldtext{max-width:78ch}
.feldtext + .feldtitel{margin-top:14px}

/* ------------------------------------------------------------------ Tabellen */
table.raster{width:100%;border-collapse:collapse;font-size:13px}
table.raster th{text-align:left;font-size:11px;font-weight:700;color:var(--gedaempft);
  text-transform:uppercase;letter-spacing:.05em;padding:0 10px 6px 0;white-space:nowrap}
table.raster td{padding:7px 10px 7px 0;border-top:1px solid var(--linie);vertical-align:top}
table.raster td.nr{color:var(--gedaempft);font-variant-numeric:tabular-nums;width:26px}
.tabellenrahmen{overflow-x:auto}

/* Sortieren: der Kopf ist der Schalter. Der Pfeil steht nur an der Spalte, nach
   der gerade geordnet ist. Ein Pfeil an jeder Spalte waere Rauschen. */
table.raster thead th:not(.klappzelle){cursor:pointer;user-select:none}
table.raster thead th:not(.klappzelle):hover{color:var(--tinte)}
table.raster thead th.sortiert{color:var(--tinte)}
table.raster thead th.sortiert:after{content:" ▲";font-size:9px}
table.raster thead th.sortiert.ab:after{content:" ▼"}

/* Tabellenfilter: ein Feld ueber der Tabelle, Teilstring ueber alle Spalten.
   Die Zeile ohne Treffer sagt, dass der Filter greift, nicht die Daten fehlen. */
.tabellenfilter{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tabellenfilter .eingabe{max-width:320px}
.tabellenfilter .zahl{color:var(--gedaempft);font-size:13px;font-variant-numeric:tabular-nums}
table.raster tr.filter-leer td{color:var(--gedaempft);font-style:italic}

/* Zeilen, die mehr zeigen, wenn man sie anklickt. Zugeklappt bleibt die
   Tabelle eine Uebersicht. */
tr.klapp{cursor:pointer}
tr.klapp:hover td,tr.klapp:focus-visible td{background:var(--stahl-hell)}
td.klappzelle{width:24px;color:var(--gedaempft);line-height:0;text-align:right}
tr.klapp.offen td.klappzelle svg{transform:rotate(180deg)}
tr.klapp.offen td{background:var(--stahl-hell)}
tr.klappinhalt td{background:var(--stahl-hell);padding:2px 10px 12px 0}
.klappteil{margin-top:9px;max-width:78ch}
.klappteil .feldtext{margin-top:2px}

/* ---------------------------------------------------------------------- Text */
ul.punkte{list-style:none;max-width:78ch}
ul.punkte li{position:relative;padding-left:17px;margin-top:5px}
ul.punkte li:before{content:"";position:absolute;left:4px;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--gedaempft)}
/* Nummerierte Liste: die Reihenfolge ist die Aussage, also bleibt sie sichtbar */
ol.nummern{max-width:78ch;padding-left:24px;list-style:decimal}
ol.nummern li{margin-top:5px;padding-left:2px}
ol.nummern li::marker{color:var(--gedaempft);font-weight:650;font-variant-numeric:tabular-nums}
.absaetze p{max-width:78ch}
.absaetze > * + *{margin-top:10px}
.lesetext h3{font-size:14px;font-weight:650;margin-top:16px}
.lesetext strong{font-weight:650}
.lesetext code{background:#EDEFF2;border-radius:var(--r-klein);padding:1px 5px;font-size:12.5px}
.lesetext ul.punkte ul.punkte{margin:4px 0 2px 18px}
.lesetext img,.absaetze img{max-width:100%;height:auto;border-radius:var(--r-kasten);
  box-shadow:var(--schatten-karte);display:block;margin:4px 0}
hr.trennlinie{border:none;border-top:1px solid var(--linie);margin:16px 0}
p.begriff{margin-top:12px;margin-bottom:2px}

/* ------------------------------------------------------------------- Verweis
   Chip auf ein Objekt. "offen" = Ziel fehlt noch: Punkt UND Farbe, nie nur Farbe */
.verweis{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--stahl-hell);color:var(--stahl);
  border:1px solid transparent;white-space:nowrap;font-family:inherit;line-height:1.5}
.verweis:hover{border-color:var(--stahl)}
.verweis.offen{background:var(--rot-hell);color:var(--rot-text)}
.verweis .punkt{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.65}
.verweis .stelle{margin-left:5px;font-weight:500;opacity:.8}
.verweise{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- Leerzustand */
.leer{padding:44px 24px;text-align:center}
.leer .symbol{width:42px;height:42px;border-radius:var(--r-knopf);background:var(--stahl-hell);
  color:var(--stahl);display:grid;place-items:center;margin:0 auto 12px}
.leer h3{font-weight:600;margin-bottom:4px}
.leer p{color:var(--gedaempft);max-width:40ch;margin:0 auto 14px}

/* ---------------------------------------------------------------- Kennzahlen */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.kennzahl{background:var(--karte);border-radius:var(--r-kasten);box-shadow:var(--schatten-karte);padding:13px 15px;display:block}
a.kennzahl:hover{background:var(--stahl-hell)}
.kennzahl .zahl{font-size:22px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kennzahl .beschriftung{color:var(--gedaempft);font-size:13px;margin-top:1px}
.kennzahl.warn .zahl{color:var(--rot)}

/* -------------------------------------------------------------------- Dialog */
.schleier{position:fixed;inset:0;z-index:60;background:rgba(21,24,29,.28);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.dialog{background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-schwebend);
  width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column}
/* Zeileneditoren brauchen Platz: mehrere Textspalten nebeneinander */
.dialog.breit{width:min(var(--seitenbreite),100%)}
.dialog header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linie)}
.dialog header h2{font-size:16px;font-weight:650}
.dialog .inhalt{padding:18px 20px;overflow-y:auto}
.dialog footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;
  border-top:1px solid var(--linie);align-items:center}
@media(max-width:700px){
  /* Handy: der Dialog wird zum Blatt von unten */
  .schleier{align-items:flex-end;padding:0}
  .dialog{width:100%;max-height:92vh;border-radius:var(--r-karte) var(--r-karte) 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
  .detail{grid-template-columns:1fr}
  .gliederung{display:none}
  .seitenkopf .aktionen{margin-left:0;width:100%}
  /* Tabellen ab vier Spalten quetschen sich nicht in die Handybreite,
     sondern scrollen in ihrem .tabellenrahmen */
  .tabellenrahmen > table.raster:has(thead th:nth-child(4)){min-width:640px}
}

/* ------------------------------------------------------------------ Formular */
.feld{margin-bottom:14px}
.feld label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.feld .hinweis{font-size:12px;color:var(--gedaempft);margin-top:4px}
.eingabe{width:100%;padding:8px 11px;border:1px solid var(--linie);border-radius:var(--r-knopf);background:#fff}
.eingabe:focus{border-color:var(--stahl)}
textarea.eingabe{min-height:76px;resize:vertical;line-height:1.55}
/* Mitwachsende Felder starten einzeilig; die Hoehe setzt kit.js */
textarea.eingabe.wachsend:not(.editor-text){min-height:0;resize:none;overflow:hidden}
textarea.eingabe.gross{min-height:340px;font-size:13px;font-family:var(--schrift-mono)}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.zweispaltig{grid-template-columns:1fr}}
.haken{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.haken input{width:15px;height:15px;accent-color:var(--stahl)}

/* -------------------------------------------------------------- Zeileneditor
   Tabelle aus Eingabefeldern, Zeilen hinzufuegen, loeschen, ziehen */
table.zeileneditor{width:100%;border-collapse:collapse;font-size:13px}
table.zeileneditor th{text-align:left;font-size:11px;font-weight:700;color:var(--gedaempft);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:5px;white-space:nowrap}
table.zeileneditor td{padding:3px 3px 3px 0;vertical-align:top}
/* Griff zum Umsortieren. Er sitzt aussen, damit er in keiner Zeile mit einem
   Feld um den Platz streitet, und wird erst beim Zeigen deutlich. */
table.zeileneditor td.griffzelle{width:26px;padding-top:9px}
.griff{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-klein);
  color:var(--linie);cursor:grab}
table.zeileneditor tbody tr:hover .griff{color:var(--gedaempft)}
.griff:hover{background:var(--stahl-hell);color:var(--stahl)}
.griff:active{cursor:grabbing}
table.zeileneditor tbody tr.zieht{opacity:.45}
table.zeileneditor .eingabe{padding:6px 9px}
/* Lange Spalten sind Textfelder: was drinsteht, ist ohne Scrollen zu lesen. */
table.zeileneditor textarea.eingabe{resize:vertical;min-height:62px;line-height:1.45}
.zeile-weg{color:var(--gedaempft);padding:6px;border-radius:var(--r-klein)}
.zeile-weg:hover{color:var(--rot);background:var(--rot-hell)}
.zeile-neu{margin-top:8px}

/* ---------------------------------------------------------------------- Wahl
   Mehrfachauswahl aus Chips. Angehakt und nicht angehakt muessen sich auf den
   ersten Blick unterscheiden -- sonst liest man den grauen Chip als "steht
   drin" und nicht als "waehlbar". */
.wahl{display:flex;flex-wrap:wrap;gap:4px;padding:5px;border:1px solid var(--linie);
  border-radius:var(--r-knopf);background:#fff;min-height:34px}
.wahl button{padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;
  background:none;color:var(--gedaempft);border:1px dashed var(--linie)}
.wahl button:hover{border-style:solid;border-color:var(--stahl);color:var(--stahl)}
.wahl button.an{background:var(--stahl);color:var(--stahl-text);border:1px solid var(--stahl)}
.wahl button.an:hover{background:var(--rot);border-color:var(--rot);color:#fff}
.wahl:empty:before{content:"keine";color:var(--gedaempft);font-size:12px;padding:3px 6px}

/* ----------------------------------------------------------------- Suchliste
   Tippen filtert, klicken waehlt */
.suchliste .treffer{max-height:236px;overflow-y:auto;margin-top:6px;background:#fff;
  border:1px solid var(--linie);border-radius:var(--r-knopf)}
.suchliste .treffer button{display:flex;width:100%;gap:10px;align-items:baseline;
  justify-content:space-between;padding:6px 10px;font-size:13px;text-align:left;
  border-bottom:1px solid var(--linie)}
.suchliste .treffer button:last-child{border-bottom:none}
.suchliste .treffer button:hover{background:#F5F7F9}
.suchliste .treffer button.an{background:var(--stahl);color:var(--stahl-text)}
.suchliste .treffer .gruppe{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gedaempft);white-space:nowrap}
.suchliste .treffer button.an .gruppe{color:inherit;opacity:.75}

/* ------------------------------------------------------------------ Suchwahl
   In der Tabellenzelle: der Knopf zeigt den gewaehlten Namen, das Panel
   darunter sucht. Es haengt am <body>, damit es die Tabelle mit ihrem
   waagerechten Rollbalken nicht abschneidet. */
.suchwahl .suchwahl-knopf{display:block;text-align:left;font-size:13px;line-height:1.35;
  white-space:normal;background:#fff;cursor:pointer}
.suchwahl .suchwahl-knopf:hover{border-color:var(--stahl)}
.suchwahl .suchwahl-knopf.leer{color:var(--gedaempft)}
.suchwahl-panel{position:fixed;z-index:80;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-knopf);box-shadow:0 12px 32px rgba(16,24,40,.16);padding:8px}
.suchwahl-panel .treffer{max-height:250px;overflow-y:auto;margin-top:6px}
.suchwahl-panel .treffer button{display:flex;width:100%;gap:10px;align-items:baseline;
  justify-content:space-between;padding:6px 8px;font-size:13px;text-align:left;
  border-radius:var(--r-klein)}
.suchwahl-panel .treffer button:hover{background:#F5F7F9}
.suchwahl-panel .treffer button.an{background:var(--stahl);color:var(--stahl-text)}
.suchwahl-panel .treffer button.loeschen{color:var(--gedaempft);font-style:italic}
.suchwahl-panel .treffer .gruppe{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gedaempft);white-space:nowrap}
.suchwahl-panel .treffer button.an .gruppe{color:inherit;opacity:.75}
.suchwahl-panel .neu{display:block;width:100%;margin-top:4px;padding:6px 8px;font-size:13px;
  text-align:left;border-radius:var(--r-klein);border:1px dashed var(--linie);color:var(--stahl);
  font-weight:600}
.suchwahl-panel .hinweis{margin-top:6px;font-size:12px;color:var(--gedaempft)}

/* ------------------------------------------------------------------ Segmente */
.segmente{display:flex;gap:4px;background:#EDEFF2;padding:3px;border-radius:var(--r-knopf);margin-bottom:14px}
.segmente button{flex:1;padding:6px 10px;border-radius:var(--r-klein);font-size:13px;font-weight:550;color:var(--gedaempft)}
.segmente button.an{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten-karte)}

/* -------------------------------------------------------------------- Ablage */
.ablage{border:1.5px dashed var(--linie);border-radius:var(--r-kasten);padding:26px;text-align:center;
  color:var(--gedaempft);background:#F7F9FA;cursor:pointer}
.ablage.ueber{border-color:var(--stahl);background:var(--stahl-hell)}
.ablage strong{color:var(--tinte)}
/* Eine abgelegte Datei, die der Inhalt ist (nicht eine Beilage): grosses
   Symbol, Name, Groesse, rechts Herunterladen / Ersetzen / Entfernen */
.dateizeile{display:flex;align-items:center;gap:16px}
.dateizeile .dateisymbol{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;background:#EEF2F6;color:var(--stahl);flex-shrink:0}
.dateizeile .inhalt{display:flex;flex-direction:column;min-width:0;flex:1}
.dateizeile .titel{font-weight:600;font-size:15px;word-break:break-all}
.dateizeile .unter{color:var(--gedaempft);font-size:13px;margin-top:2px}
.dateizeile .rechts{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* -------------------------------------------------------------------- Banner */
.banner{background:var(--stahl-hell);color:var(--stahl);padding:9px 14px;border-radius:var(--r-kasten);
  font-size:13px;display:flex;gap:8px;align-items:center;margin-bottom:14px}
.banner.warn{background:var(--rot-hell);color:var(--rot)}
.banner svg{flex-shrink:0}

/* --------------------------------------------------------------- Fehlerkarte
   Ein Ladefehler bleibt stehen, bis er behoben ist, und bietet den Versuch an.
   Die Meldung (unten) ist fuer Rueckmeldungen, nicht fuer Fehler beim Laden. */
.fehlerkarte{border-left:3px solid var(--rot);padding:14px 18px;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.fehlerkarte .inhalt{flex:1 1 240px;min-width:0}
.fehlerkarte h3{font-size:14px;font-weight:650}
.fehlerkarte p{color:var(--gedaempft);font-size:13px;margin-top:2px}

/* ---------------------------------------------------------------------- Tipp
   Erklaerung beim Zeigen ([data-tipp]); auf Tablets beim Tippen */
.tipp{position:fixed;z-index:70;background:var(--tinte);color:#fff;font-size:12.5px;
  line-height:1.5;padding:9px 12px;border-radius:var(--r-knopf);box-shadow:var(--schatten-schwebend);
  pointer-events:none;opacity:0;transition:opacity .12s;max-height:40vh;overflow:hidden;
  width:max-content;max-width:min(360px,calc(100vw - 24px))}
.tipp.an{opacity:1}

/* ------------------------------------------------------------------- Meldung
   Kurze Rueckmeldung nach einer Aktion, verschwindet von selbst */
.meldung{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--tinte);color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;
  box-shadow:var(--schatten-schwebend);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:calc(100vw - 32px);text-align:center}
.meldung.an{opacity:1;transform:translateX(-50%) translateY(-4px)}
.meldung.fehler{background:var(--rot)}

/* -------------------------------------------------------------------- Editor
   Markdown mit Werkzeugleiste und Vorschau. Der Text bleibt die Quelle; die
   Leiste schreibt nur die Zeichen, die man sonst selbst tippen wuerde. */
.editor{border:1px solid var(--linie);border-radius:var(--r-kasten);background:#fff;overflow:clip}
.editor.ueber{border-color:var(--stahl);box-shadow:0 0 0 3px var(--stahl-hell)}
/* Die Leiste bleibt beim Scrollen unter der Kopfleiste stehen: bei langen
   Kapiteln ist sie sonst weg, wenn man sie braucht */
.editor-leiste{display:flex;align-items:center;gap:2px;padding:5px 7px;
  border-bottom:1px solid var(--linie);background:#F7F9FA;flex-wrap:wrap;
  position:sticky;top:var(--kopfhoehe);z-index:5}
.editor-knopf{min-width:28px;height:28px;padding:0 7px;border-radius:var(--r-klein);color:var(--gedaempft);
  font-size:13px;font-weight:650;display:inline-grid;place-items:center}
.editor-knopf:hover{background:var(--stahl-hell);color:var(--stahl)}
.editor-knopf.an{background:var(--stahl);color:var(--stahl-text)}
.editor-trenner{width:1px;height:18px;background:var(--linie);margin:0 5px}
.editor-flaeche{display:block}
.editor.vorschau-an .editor-flaeche{display:grid;grid-template-columns:1fr 1fr}
.editor-text{border:0;border-radius:0;min-height:120px;max-height:60vh;
  font-family:var(--schrift-mono);font-size:13px;line-height:1.6;resize:vertical}
.editor-text:focus,.editor-text:focus-visible{box-shadow:none}
.editor.vorschau-an .editor-text{border-right:1px solid var(--linie)}
.editor-vorschau{padding:12px 14px;overflow:auto;max-height:60vh;background:var(--karte);position:relative}
.editor-vorschau > * + *{margin-top:10px}
/* Vorschau und Cursor gekoppelt: der Block des Cursors ist hervorgehoben,
   jeder Block ist klickbar und springt zu seiner Zeile */
.editor-vorschau > [data-zeile]{cursor:pointer;border-radius:var(--r-klein)}
.editor-vorschau > [data-zeile]:hover{box-shadow:0 0 0 4px #F1F4F6;background:#F1F4F6}
.editor-vorschau > .editor-aktuell,.editor-vorschau > .editor-aktuell:hover{
  box-shadow:0 0 0 4px var(--stahl-hell);background:var(--stahl-hell)}
@media(max-width:760px){ .editor.vorschau-an .editor-flaeche{grid-template-columns:1fr} }

/* ------------------------------------------------------- Schienen und Panels
   Seiten mit Kontext links und rechts: eine schmale Schiene am Rand oeffnet
   ein schwebendes Panel; angepinnt wird es zur festen Leiste. */
.schiene{position:fixed;top:45%;transform:translateY(-50%);z-index:35;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 7px;background:var(--karte);border:1px solid var(--linie);
  box-shadow:var(--schatten-karte);color:var(--gedaempft);transition:color .12s,background .12s}
.schiene:hover,.schiene[aria-expanded="true"]{background:var(--stahl-hell);
  color:var(--stahl)}
.schiene.links{left:0;border-left:none;border-radius:0 var(--r-knopf) var(--r-knopf) 0}
.schiene.rechts{right:0;border-right:none;border-radius:var(--r-knopf) 0 0 var(--r-knopf)}
.schiene .schiene-text{writing-mode:vertical-rl;font-size:12px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase}
.schiene.links .schiene-text{transform:rotate(180deg)}
.schiene .schiene-zahl{font-size:11px;font-weight:700;background:var(--stahl);
  color:var(--stahl-text);border-radius:999px;padding:1px 6px;
  font-variant-numeric:tabular-nums}

/* Schwebendes Panel: liegt ueber der Seite, angedockt an seiner Kante */
.panel{position:fixed;top:calc(var(--kopfhoehe) + 10px);bottom:10px;z-index:34;width:320px;
  max-width:calc(100vw - 56px);overflow-y:auto;background:var(--karte);
  border:1px solid var(--linie);box-shadow:var(--schatten-schwebend);
  padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.panel.links{left:0;border-left:none;border-radius:0 var(--r-karte) var(--r-karte) 0}
.panel.rechts{right:0;border-right:none;border-radius:var(--r-karte) 0 0 var(--r-karte)}

/* Angepinnt: dieselbe Leiste, nur ohne Schatten und dauerhaft.
   Beide docken buendig an den Fensterrand, von Kopfleiste bis unten. */
.panel-fest{position:fixed;top:var(--kopfhoehe);bottom:0;z-index:30;width:330px;
  overflow-y:auto;background:var(--karte);padding:14px;
  display:flex;flex-direction:column;gap:12px}
.panel-fest.links{left:0;border-right:1px solid var(--linie)}
.panel-fest.rechts{right:0;border-left:1px solid var(--linie)}

/* Fixhoehe + Flex heisst: Kinder wuerden schrumpfen und Text abschneiden,
   statt zu scrollen. Nicht schrumpfen -- scrollen. */
.panel > *,.panel-fest > *{flex-shrink:0}
.panel .karte,.panel-fest .karte{box-shadow:none;border:1px solid var(--linie)}
.panelkopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Zeile in einer Panelkarte: Text links, Aktion rechts */
.panelzeile{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:4px 0;min-width:0}
.panelzeile .verweis{white-space:normal;text-align:left;line-height:1.35;padding:2px 8px}
.panelzeile > :first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Gliederung im Panel */
.panel .gliederungszeile,.panel-fest .gliederungszeile{display:flex;gap:7px;padding:3px 6px;
  border-radius:var(--r-klein);font-size:12.5px;line-height:1.35;color:var(--gedaempft)}
.panel .gliederungszeile:hover,.panel-fest .gliederungszeile:hover{background:var(--stahl-hell);color:var(--tinte)}
.panel .gliederungsnr,.panel-fest .gliederungsnr{flex:0 0 auto;font-variant-numeric:tabular-nums;
  font-weight:650;color:var(--stahl);min-width:20px}
.panel .gliederungszeile.e3,.panel-fest .gliederungszeile.e3{padding-left:20px}
.panel .gliederungszeile.e4,.panel-fest .gliederungszeile.e4{padding-left:34px;font-size:12px}

/* Die Seite mit Panels nutzt die volle Fensterbreite; angepinnte Leisten
   verschieben nur den Innenbereich. Text und Randspur sind gedeckelt und
   im verbleibenden Raum zentriert -- keine toten Raender. */
.seite:has(.vollbreit){max-width:none;padding-left:26px;padding-right:26px}
.vollbreit.pin-links{padding-left:326px}
.vollbreit.pin-rechts{padding-right:326px}
.innen{max-width:1290px;margin:0 auto;container-type:inline-size}
/* Ab 1700px sind die Randzonen fuer die Leisten IMMER reserviert: das Panel
   liegt neben dem Text statt darueber, und Anpinnen aendert nur die Optik der
   Leiste -- der Text steht, nichts verschiebt sich. Darunter (1440er Laptop)
   blieben dem Text sonst nur 720px; dort schwebt das Panel ueber dem Text,
   und erst Anpinnen schiebt ihn. */
@media(min-width:1700px){
  .innen{max-width:min(1290px, 100vw - 720px)}
  .vollbreit.pin-links{padding-left:0}
  .vollbreit.pin-rechts{padding-right:0}
}

/* ------------------------------------------------------------------ Randspur
   Neben jedem Abschnitt eine schmale Spur fuer Marken und Notizen */
.spalte{min-width:0}
.abschnittsreihe{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;
  align-items:start}
.abschnittsreihe + .abschnittsreihe{margin-top:14px}
.abschnittsreihe .abschnittsinhalt > .karte{margin:0}
.abschnittsrand{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:6px}
/* Wird der Innenbereich schmal (Tablet hochkant, beide Leisten angepinnt),
   rueckt die Randspur unter ihren Abschnitt -- als EINE schlanke Zeile statt
   als Stapel: Zaehler und Hinzufuegen-Knoepfe nebeneinander, nur aufgeklappte
   Listen, Karten und das Formular nehmen die volle Breite. */
@container (max-width: 900px){
  .abschnittsreihe{grid-template-columns:minmax(0,1fr);gap:8px}
  .abschnittsrand{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;
    padding:0}
  .abschnittsrand > div,.abschnittsrand .randnotiz{flex-basis:100%}
}
/* Marke in der Randspur: Zaehler, erledigte Notizen, Hinzufuegen */
.randmarke{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:4px 10px;border-radius:999px;background:var(--stahl-hell);
  color:var(--stahl);font-size:12.5px;font-weight:600;transition:background .12s}
.randmarke:hover{background:#dde5ee}
.randmarke.leer{background:transparent;border:1px dashed var(--linie);
  color:var(--gedaempft);font-weight:500}
.randmarke.leer:hover{background:var(--stahl-hell);color:var(--stahl)}
.randliste{display:flex;flex-direction:column;gap:6px;align-items:stretch;
  padding:4px 0 2px 10px;border-left:2px solid var(--stahl-hell)}
/* Notiz in der Randspur, wie ein Kommentar am PDF */
.randnotiz{background:var(--karte);border:1px solid var(--linie);
  border-left:3px solid var(--stahl);border-radius:var(--r-knopf);padding:8px 10px;
  font-size:13px}
.randnotiz.erledigt{opacity:.75;border-left-color:var(--gruen)}
.notiztext p{margin:2px 0 4px}
.notizaktion{display:flex;gap:2px;align-items:center;margin-top:2px}
.notizformular{display:flex;flex-direction:column;gap:6px;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--r-knopf);padding:8px 10px}
.notizformular .notizaktion{justify-content:flex-end;gap:6px}
/* Markierte Stelle im Text (js/anker.js); ihre Notiz steht in der Randspur.
   Zitat in der Notiz, "verwaist" wenn die Stelle nicht mehr im Text steht */
mark.markierung{background:#DFE6EE;color:inherit;
  border-bottom:1.5px solid var(--stahl);border-radius:2px;cursor:pointer;
  padding:0 1px;margin:0 -1px}
mark.markierung mark.markierung{border-bottom-width:3px}
mark.markierung:hover,mark.markierung.an{background:#D5DEE9}
/* Schwebende Leiste an einer Textauswahl: alles, was an einer Stelle
   haengen kann (Notiz, Quelle), nebeneinander -- nicht ein Knopf je Fall */
.auswahlleiste{position:fixed;z-index:60;display:flex;gap:4px}
.auswahlleiste .knopf{box-shadow:0 4px 14px rgba(20,32,48,.22)}
/* Der Marker einer Quelle hinter dem Satz, der sie umsetzt (anker.einfuegen);
   der Verweis dazu steht in der Randspur, beide zeigen aufeinander (.an) */
.quellmarker{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;
  background:var(--stahl-hell);color:var(--stahl);font-size:11.5px;font-weight:700;
  line-height:1.5;font-variant-numeric:tabular-nums;vertical-align:baseline;
  white-space:nowrap;cursor:pointer;transition:background .12s}
.quellmarker:hover,.quellmarker.an,.verweis.an{background:#dde5ee}
/* Quelle, deren Satz nicht mehr im Text steht: das Wort, nicht nur die Farbe */
.verweis.verwaist{border-color:var(--rot);color:var(--rot-text)}
.verweis.verwaist::after{content:"Stelle geändert";margin-left:6px;font-weight:500}
.notizzitat{margin:2px 0 4px;padding:1px 0 1px 8px;border-left:2px solid var(--stahl);
  font-size:12px;font-style:italic;color:var(--gedaempft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notizformular .notizzitat{margin:0}
.randnotiz.verwaist{border-left-color:var(--rot)}
.randnotiz.verwaist .notizzitat{border-left-color:var(--rot);text-decoration:line-through}
.randnotiz.an{box-shadow:0 0 0 2px var(--stahl-hell),0 0 0 3px var(--stahl)}

/* ---------------------------------------------------------------- Fliesstext
   Hilfeseiten, Anleitungen: laengere Texte mit Ueberschriften und Code */
.fliesstext{font-size:14px;line-height:1.65;max-width:820px}
.fliesstext h2{font-size:15.5px;margin:22px 0 6px}
.fliesstext h2:first-child{margin-top:0}
.fliesstext p{margin:8px 0}
.fliesstext ul{margin:8px 0 8px 20px}
.fliesstext li{margin:4px 0}
.fliesstext code{background:#EDEFF2;border-radius:var(--r-klein);padding:1px 5px;font-size:12.5px}
.fliesstext .codeblock{background:#F3F5F8;border:1px solid var(--linie);border-radius:var(--r-knopf);
  padding:11px 14px;overflow-x:auto;margin:10px 0}
.fliesstext .codeblock code{background:none;padding:0;font-size:12.5px;line-height:1.6;
  white-space:pre}
.fliesstext .hinweisbox{border-left:3px solid var(--stahl);background:var(--stahl-hell);
  border-radius:var(--r-knopf);padding:8px 12px;margin:10px 0}
.fliesstext a{color:var(--stahl);font-weight:550}

/* -------------------------------------------------------------------- Tablet
   Panels haengen mit top+bottom am Fenster; die Safari-Leisten braucht
   niemand einzurechnen. */
@media (pointer: coarse) {
  /* Tippziele: alles Wichtige mindestens ~40px hoch */
  .knopf{padding:9px 15px}
  .knopf-klein{padding:7px 12px}
  .knopf-symbol{padding:9px}
  nav.reiter a{padding:9px 13px}
  .zeile{padding:15px 18px}
  .randmarke{padding:7px 12px}
  .schiene{padding:18px 10px}
  .notizaktion .knopf{padding:7px 12px}
  /* Hover gibt es nicht: was beim Zeigen erschiene, ist immer sichtbar */
  .zeile .pfeil{opacity:1}
  .abschnittskopf .bearbeiten{opacity:1}
}

/* --------------------------------------------------------------------- Handy
   Steht am Ende, weil es die Schienen- und Kopfregeln oben ueberschreibt */
@media(max-width:600px){
  .zeile .titel,.zeile .unter{white-space:normal}
  .abschnittskopf{flex-wrap:wrap}
  /* Schienen unten als Pillen statt seitlich ueber dem Text */
  .schiene{top:auto;bottom:14px;transform:none;flex-direction:row;padding:8px 14px;
    border:1px solid var(--linie) !important;border-radius:999px !important;
    box-shadow:var(--schatten-schwebend)}
  .schiene.links{left:12px} .schiene.rechts{right:12px}
  .schiene .schiene-text,.schiene.links .schiene-text{writing-mode:horizontal-tb;transform:none}
  .seite:has(.vollbreit){padding-left:12px;padding-right:12px}
  /* Kopfleiste zweizeilig: Zeichen, Suche und Knoepfe oben, die Reiter
     darunter in voller Breite -- kein Reiter wird zum abgeschnittenen
     Buchstaben */
  .kopfleiste-innen{flex-wrap:wrap;height:auto;padding:8px 12px 6px;row-gap:4px;gap:10px}
  nav.reiter{order:3;flex-basis:100%;justify-content:space-between}
  nav.reiter a{padding:6px 8px;font-size:14px}
  .kopfleiste-rechts{flex:1;min-width:0}
  .suche{flex:1;min-width:0} .suche input{width:100%}
  .panel{top:96px}
}