@import url("schriften-xaIdNl_.css");

/*
 * Privea - Grundgestaltung.
 *
 * Palette und Schriften folgen dem Markenentwurf vom 09.09.2026
 * (docs/logo-briefing.md und das Design-Projekt "Privea Marke").
 *
 * Eine Regel daraus ist bindend: Das Foliierungsrot ist fuer Blattzahl,
 * Fehlblatt und die Bildmarke reserviert. Nie fuer Bedienelemente - sonst
 * verliert der Stempel seine Bedeutung.
 */

:root {
    /* Schrift und Bildmarkenflaechen. Ein Hauch warm, damit es nicht
       technisch wirkt. */
    --aktentinte: #191b1e;

    /* Bedienelemente. Dunkler und weniger gesaettigt als das fruehere
       #2f4f9e: 7,9:1 auf Weiss, damit Links auch bei 11 px tragen. */
    --registraturblau: #22355f;

    /* Nur Blattzahl, Fehlblatt, Bildmarke. */
    --foliierungsrot: #a4231d;

    /* Arbeitsflaeche grau, das Blatt selbst weiss - der Inhalt ist das Helle. */
    --aktenpapier: #fbfbfa;
    --blatt: #fff;

    /* Rahmen, Trennlinien, Deckelflaechen. Nie als Textfarbe. */
    --deckelkarton: #cfcdc7;
    --linie: #e2e0da;
    --linie-hell: #ececea;

    --text-leise: #6f6c66;
    --text-gedaempft: #4a4741;

    --schrift-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-serif: "Source Serif 4", Georgia, serif;
    --schrift-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

body { font-family: var(--schrift-sans); margin: 0; color: var(--aktentinte);
    background: var(--aktenpapier); font-size: 14px; }

/* Fliesstext in der Antiqua: Erklaerungen und Hinweise lesen sich laenger,
   Bedienung bleibt in der Grotesk. */
p.hinweis, .verarbeitung p, dl.angaben dd, ul.fassungen { font-family: var(--schrift-serif); }

/* Kennungen, Blattzahlen, technische Angaben. */
.dauer, .mini-nr, code { font-family: var(--schrift-mono); }

a { color: var(--registraturblau); }
/* Der Seitencontainer. Die Aufschrift einer Anmerkung heisst "aufschrift"
   und nicht "inhalt": Sie trug frueher dieselbe Klasse und bekam damit
   1,5 rem Innenabstand und 60 rem Hoechstbreite - in einem Stempel von
   200 pt Breite. */
main, .inhalt { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
/* Kopfleiste: Bildmarke und Wort, getrennt durch den halben Abstand der
   Markenhoehe - so gibt es der Entwurf vor. */
nav.kopf { background: var(--blatt); border-bottom: 1px solid var(--linie);
    padding: .55rem 1.1rem; display: flex; gap: 1.1rem; align-items: center; height: 52px;
    box-sizing: border-box; }
nav.kopf a.marke { display: inline-flex; align-items: center; gap: 11px;
    text-decoration: none; color: var(--aktentinte); }
nav.kopf a.marke span { font-weight: 500; font-size: 15px; letter-spacing: -.005em; }
.marke-zeichen { display: block; flex: none; }
nav.kopf .rechts { margin-left: auto; font-size: .9rem; color: #555; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; margin-top: 2rem; }
.pfad { font-size: .9rem; color: var(--text-gedaempft); margin-top: -.5rem; }
.hinweis { color: var(--text-gedaempft); font-size: .9rem; }
.fehler { color: var(--foliierungsrot); }
.erfolg { color: #1d6b3f; }
table.table { border-collapse: collapse; width: 100%; background: #fff; }
table.table th, table.table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linie-hell); }
dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .95rem; }
dl.angaben dt { color: var(--text-gedaempft); }
dl.angaben dd { margin: 0; }
.seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.seiten figure { margin: 0; background: #fff; border: 1px solid var(--linie); padding: .5rem; }
.seiten img { width: 100%; height: auto; display: block; }
.blatt { position: relative; }
.anm { position: absolute; box-sizing: border-box; overflow: hidden; font-size: .55rem; line-height: 1.25; }
/* Eine Textmarkierung besteht aus mehreren Vierecken - für jede
   Zeile eines. Der umschließende Kasten ist nur Trefferfläche
   und bleibt selbst unsichtbar. */
.anm-highlight { background: none; }
/* Deckkraft aus dem Renderer (--marker-deckkraft an der Ebene): dieselbe wie
   im Export. Sie stand hier auf voll, im PDF auf 0,4 - in der Ansicht deckte
   die Markierung damit den Text, im PDF nicht, und niemandem fiel auf, welche
   von beiden recht hat. */
.anm-highlight .quad { position: absolute; background: var(--anm-farbe, #ffe95c);
    opacity: var(--marker-deckkraft, .4); mix-blend-mode: multiply; }

.anm-note { background: var(--anm-farbe, #fff3a8); border: 1px solid rgba(0,0,0,.18);
    padding: .25rem .3rem; color: var(--anm-schrift, #3a3320);
    box-shadow: 1px 1px 3px rgba(0,0,0,.18); }

/* Der Stempel: eckiger Rahmen mit Gebrauchsspuren. Die
   Unregelmäßigkeiten kommen aus einem Seed an der Anmerkung,
   damit derselbe Stempel immer gleich aussieht - in der Ansicht
   wie im Export. */
/* Der Rückfall ist derselbe Wert wie im Export - Altbestand ohne
   gespeicherte Farbe sah in Ansicht und Ausgabe sonst verschieden aus. */
.anm-stamp { background: none; color: var(--anm-farbe, #a4231d);
    border: 2.5px solid currentColor; padding: .3rem .4rem;
    /* Die Aufschrift steht so da, wie sie geschrieben wurde. Ein
       text-transform: uppercase stand hier und war gleich doppelt falsch:
       Es verfälschte die Eingabe - aus "Beglaubigte Abschrift" wurde
       "BEGLAUBIGTE ABSCHRIFT" -, und es stand nur im CSS. Der Export
       schreibt den Text unverändert, also zeigten Ansicht und PDF
       Verschiedenes. Wer Versalien will, schreibt sie. */
    font-weight: 600; letter-spacing: .02em;
    opacity: .84; transform: rotate(var(--anm-drehung, -1.5deg));
    /* Als Spalte, nicht mit absolut gesetzter Fusszeile: Sonst laeuft eine
       Anweisung in die Unterschrift hinein, sobald die Aufschrift zwei
       Zeilen braucht. So schiebt sich alles von oben nach unten, und die
       Zeile "wer, wann" bleibt unten. */
    display: flex; flex-direction: column; }
.anm-stamp span { display: block; line-height: 1.15; }
/* Die Zeile unter dem Stempel: wer, wann. Sie sitzt am Fuss des Kastens,
   abgesetzt durch einen Strich - wie eine Unterschriftenzeile. */
.anm-stamp .unterschrift { margin-top: auto; flex: none;
    padding-top: .2rem; border-top: .5px solid currentColor;
    font-weight: 400; font-size: .8em; text-transform: none; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Läsionen: helle Streifen und Fehlstellen im Rahmen, als wäre der
   Stempel ungleichmäßig abgerollt.

   Sie sitzen ausschließlich im Rahmen, nie in der Aufschrift: Ein Abdruck
   verschleißt an der Kante, die Schrift bleibt lesbar - alles andere wäre
   ein Fleck auf dem Blatt und kein Stempel. Dafür sorgt die Maske: Zwei
   Ebenen, von denen die innere ausgenommen wird, lassen nur den Ring
   zwischen Außen- und Innenkante stehen. Der transparente Rahmen gibt
   dessen Breite vor - 2,5 px Strich plus 3 px Überstand.

   Fällt die Maske aus (sehr alte Browser), liegen die Streifen wieder über
   der ganzen Fläche. Das ist die frühere Darstellung, kein Bruch. */
.anm-stamp::after { content: ''; position: absolute; inset: -3px; pointer-events: none;
    box-sizing: border-box; border: 5.5px solid transparent;
    /* Keile aus der Mitte treffen alle vier Kanten - anders als Streifen
       ueber die Flaeche, von denen im schmalen Ring fast nichts uebrig
       bliebe. Jeder Keil ist eine Stelle, an der der Stempel nicht
       durchgedrueckt hat. */
    background:
        conic-gradient(from 8deg,
            #fff0 0 4deg, #fffe 4deg 7deg, #fff0 7deg 63deg,
            #fffc 63deg 67deg, #fff0 67deg 138deg,
            #ffff 138deg 141deg, #fff0 141deg 203deg,
            #fffd 203deg 208deg, #fff0 208deg 284deg,
            #fffe 284deg 287deg, #fff0 287deg 360deg),
        linear-gradient(101deg, #fff0 34%, #fffa 36%, #fff0 38%);
    /* Nach der Kurzform, nicht davor: "background:" setzt den Ursprung sonst
       wieder auf die padding-box - und die schneidet die Maske gerade weg. */
    background-origin: border-box;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude; }

/* Werkzeuge: Schalter ohne Rahmen und ohne Radius - der Entwurf gibt rechte
   Winkel vor. Der aktive Zustand ist eine volle Flaeche, keine Toenung: Damit
   ist er ohne Vergleichsschalter erkennbar, als einziger dunkler Block in
   einer hellen Zeile. */
.werkzeugsatz { display: flex; gap: 2px; align-items: center; }
button.wz { display: inline-flex; align-items: center; gap: 7px; margin: 0;
    padding: 4px 9px; font: inherit; font-size: 12px; background: none;
    border: 0; color: var(--aktentinte); cursor: pointer; }
button.wz svg { display: block; flex: none; }
button.wz:hover { background: #f2f2ef; }
button.wz.aktiv { background: var(--registraturblau); color: var(--aktenpapier); }
button.wz.still { color: var(--text-leise); }
button.wz.still.aktiv { background: none; color: var(--text-leise); }

.farbwahl { margin: 0 0 0 6px; display: flex; }
.farbwahl input[type=color] { width: 1.5rem; height: 1.5rem; padding: 0;
    border: 1px solid var(--linie); background: none; cursor: pointer; }

/* Die Textebene: unsichtbar, aber auswaehlbar. Sie nimmt nur dann
   Mausereignisse an, wenn der Marker gewaehlt ist - sonst kaeme man beim
   Aufziehen von Zettel und Stempel nicht an das Blatt heran. */
.text-ebene { position: absolute; inset: 0; overflow: hidden;
    line-height: 1; text-size-adjust: none; forced-color-adjust: none;
    transform-origin: 0 0; pointer-events: none; user-select: none; }
.text-ebene span, .text-ebene br { color: transparent; position: absolute;
    white-space: pre; transform-origin: 0 0; }
.text-waehlbar .text-ebene { pointer-events: auto; user-select: text; cursor: text; }
.text-waehlbar .anm-ebene { pointer-events: none; }
.text-ebene ::selection { background: rgba(34, 53, 95, .28); }

/* Ohne Textebene - etwa bei einem Scan ohne Texterkennung - ist Hervorheben
   sinnlos; der Schalter sagt es. */
.ohne-text button.wz[data-werkzeug=highlight] { opacity: .45; }

.anm-entwurf { position: absolute; border: 1px dashed var(--registraturblau);
    background: rgba(47,79,158,.12); pointer-events: none; }

/* Das Kontextmenü. Über einer Anmerkung führt es an sie heran, über dem
   Blatt bietet es die Werkzeuge dort an, wo die Hand gerade ist. */
.kontextmenue { position: absolute; z-index: 40; min-width: 11rem;
    background: #fff; border: 1px solid #c9c9c4; box-shadow: 0 3px 12px rgba(0,0,0,.18);
    padding: .2rem; }
.kontextmenue[hidden] { display: none; }
.kontextmenue button { display: flex; align-items: center; gap: .5rem; width: 100%;
    margin: 0; padding: .35rem .5rem; font: inherit; font-size: .82rem; text-align: left;
    background: none; border: 0; color: var(--aktentinte); cursor: pointer; }
.kontextmenue button:hover { background: var(--registraturblau); color: var(--aktenpapier); }
.kontextmenue button.still { color: var(--text-leise); }
.kontextmenue button svg { flex: none; }
.kontextmenue > div + div { border-top: 1px solid var(--linie); margin-top: .2rem;
    padding-top: .2rem; }
.kontextmenue [hidden] { display: none; }
.menue-hinweis { margin: 0; padding: .4rem .5rem; font-size: .76rem;
    line-height: 1.35; color: var(--text-leise); font-family: var(--schrift-serif); }

/* Die Vorschau ist das Ergebnis, nicht dessen Andeutung: dieselben Klassen,
   dieselbe Geometrie. Dass sie noch nicht festgeschrieben ist, sagt der
   Rahmen darum - er liegt außerhalb und fälscht den Stempel nicht. */
.anm.vorschau { pointer-events: none; }

/* Der Griffrahmen liegt über der Vorschau und dreht nicht mit: Der Stempel
   sitzt schief darin wie ein Abdruck, der Rahmen zeigt den Bereich, den man
   aufgezogen hat. Mitgedrehte Griffe lägen neben der Stelle, an der die Maus
   rechnet. */
.vorschau-rahmen { position: absolute; box-sizing: border-box; pointer-events: none;
    outline: 1px dashed var(--registraturblau); outline-offset: 4px; z-index: 25; }
.vorschau-rahmen .griff { position: absolute; margin: 0; padding: 0;
    width: 14px; height: 14px; box-sizing: border-box;
    background: var(--blatt); border: 1.5px solid var(--registraturblau);
    border-radius: 50%; pointer-events: auto; touch-action: none; }
.vorschau-rahmen .griff:hover, .vorschau-rahmen .griff:focus-visible {
    background: var(--registraturblau); }
.vorschau-rahmen .griff[data-ecke=nw] { left: -11px; top: -11px; cursor: nwse-resize; }
.vorschau-rahmen .griff[data-ecke=ne] { right: -11px; top: -11px; cursor: nesw-resize; }
.vorschau-rahmen .griff[data-ecke=sw] { left: -11px; bottom: -11px; cursor: nesw-resize; }
.vorschau-rahmen .griff[data-ecke=se] { right: -11px; bottom: -11px; cursor: nwse-resize; }

/* Die Palette des Stempels. Keine freie Farbwahl: Ein Aktenbestandteil soll
   aussehen wie einer. */
.stempelfarben { margin: .45rem 0 0; padding: .35rem .45rem .4rem; border: 1px solid var(--linie);
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.stempelfarben legend { padding: 0 .25rem; font-size: .72rem; color: var(--text-leise); }
.stempelfarben[hidden] { display: none; }
label.stempelfarbe { display: inline-flex; align-items: center; gap: .28rem; margin: 0;
    font-size: .72rem; color: var(--text-gedaempft); cursor: pointer; }
label.stempelfarbe input { position: absolute; opacity: 0; pointer-events: none; }
label.stempelfarbe span[aria-hidden] { width: .85rem; height: .85rem; background: var(--wahl);
    outline: 1px solid var(--linie); outline-offset: 1px; }
/* Die getroffene Wahl trägt einen Ring, keine Tönung - so ist sie auch
   erkennbar, wenn nur eine Farbe im Blick ist. */
label.stempelfarbe input:checked + span[aria-hidden] { outline: 2px solid var(--aktentinte);
    outline-offset: 2px; }
label.stempelfarbe input:focus-visible + span[aria-hidden] { outline: 2px solid var(--registraturblau);
    outline-offset: 3px; }
label.stempelfarbe input:checked ~ .wort { color: var(--aktentinte); font-weight: 600; }

/* Eingabe an Ort und Stelle statt im Dialog. */
.anm-eingabe { position: absolute; z-index: 30; width: 17rem;
    background: #fff; border: 1px solid #c9c9c4; box-shadow: 0 3px 12px rgba(0,0,0,.18);
    padding: .5rem; font-size: .8rem; }
.anm-eingabe strong { display: block; margin-bottom: .3rem; }
.anm-eingabe textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .25rem; }
.anm-eingabe .anweisung { display: flex; gap: .3rem; margin-top: .3rem; }
.anm-eingabe .anweisung input[type=text] { flex: 1; min-width: 0; padding: .2rem; }
.anm-eingabe .warnung { margin: .5rem 0 0; padding: .4rem .5rem; font-size: .75rem;
    line-height: 1.35; background: #fdf6f5; border-left: 3px solid var(--foliierungsrot);
    color: var(--text-gedaempft); }
.anm-eingabe .warnung strong { display: inline; color: var(--aktentinte); }
.anm-eingabe .warnung label { display: flex; gap: .3rem; align-items: center;
    margin-top: .3rem; font-size: .72rem; color: var(--text-leise); }
.anm-eingabe .warnung[hidden] { display: none; }
/* Zweite Stufe: Die Frage steht in derselben Karte neben dem Stempel. Kein
   Fenster des Browsers, das sich womöglich über das legt, wonach es fragt. */
.anm-eingabe .warnung.gefragt { background: #fbeceb; border-left-width: 5px; }
.anm-eingabe .warnung .frage { display: block; margin-top: .35rem; font-weight: 600;
    color: var(--aktentinte); }
.anm-eingabe .warnung .frage[hidden] { display: none; }
.anm-eingabe button.warnend { background: var(--foliierungsrot); border-color: var(--foliierungsrot);
    color: #fff; }

/* Was nur der Urheber sieht, ist als solches erkennbar - sonst weiss niemand,
   ob eine Anmerkung geteilt ist oder nicht. */
/* Der Schalter zum Entfernen hatte keine eigene Regel und erbte die
   allgemeine button-Regel - 44 x 33 px, im Fluss, also unter einer 16 px
   hohen Markierung und von deren overflow:hidden abgeschnitten. Jetzt sitzt
   er in der Ecke und erscheint erst beim Darüberfahren. Bei sehr kleinen
   Markierungen bleibt er trotzdem knapp: Der verlässliche Weg ist der
   Rechtsklick. */
.anm-weg { position: absolute; right: 0; top: 0; z-index: 2;
    width: 15px; height: 15px; min-width: 0; margin: 0; padding: 0;
    display: none; place-items: center; line-height: 1; font-size: 12px;
    background: var(--blatt); color: var(--text-gedaempft);
    border: 1px solid var(--deckelkarton); cursor: pointer; }
.anm:hover .anm-weg { display: grid; }
.anm-weg:hover { background: var(--foliierungsrot); border-color: var(--foliierungsrot);
    color: #fff; }
/* Eine Markierung ist oft niedriger als der Schalter - er darf sie dann
   überragen, statt in ihr zu verschwinden. */
.anm-highlight { overflow: visible; }
.anm-highlight .anm-weg { top: 50%; right: -17px; transform: translateY(-50%); }

.anm[data-eigen] { border-style: dashed; }
.sichtwahl { margin: 0 0 0 4px; }
.sichtwahl select { font: inherit; font-size: 11px; padding: 1px 2px; }

.anm-eingabe .knoepfe { display: flex; gap: .4rem; margin-top: .45rem; }
.anm-eingabe button { margin: 0; padding: .25rem .7rem; font-size: .78rem; }
.anm-eingabe button.still { background: none; border: 1px solid #d8d8d4; }
/* Aktenansicht - moeglichst grosse Arbeitsflaeche */
body:has(.ansicht) .inhalt { max-width: none; padding: .75rem; }
/* Fixiert: Wer blättert, soll die Zeile nicht erst
   zurücksuchen müssen. Hierhin wandern später auch die
   Werkzeuge zum Anmerken, Hervorheben und Stempeln. */
.ansicht-kopf { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--linie); padding: .4rem .8rem; margin-bottom: .6rem;
    position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.zurueck-zur-akte { font-weight: 600; }
.ansicht-kopf .marke { font-size: .7rem; background: #eef2ee; color: #3d5c46;
    border: 1px solid #cfe0d4; padding: .05rem .35rem; }
nav.blaettern { display: flex; gap: .6rem; align-items: baseline; margin-left: auto; }
nav.blaettern a, nav.blaettern .aus { font-size: 1.1rem; text-decoration: none; }
nav.blaettern .aus { color: #ccc; }
nav.blaettern .von { color: var(--text-leise); font-size: .8rem; }
form.springen { display: flex; gap: .3rem; align-items: center; }
form.springen input[type=text] { min-width: 0; padding: .15rem .3rem; }
form.springen button { margin: 0; padding: .15rem .5rem; font-size: .8rem; }

.ansicht-koerper { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; align-items: start; }
aside.leiste { display: grid; gap: .35rem; max-height: calc(100vh - 8rem);
    overflow-y: auto; padding-right: .2rem; }
a.mini { display: block; border: 1px solid var(--linie); background: #fff; padding: .15rem; text-decoration: none; }
a.mini img { width: 100%; height: auto; display: block; }
a.mini.aktuell { border-color: var(--registraturblau); box-shadow: 0 0 0 2px #d6ddf1; }
a.mini.entnommen { background: #fdf6f6; border-color: #e2c9c9; }
.mini-fehl { display: block; padding: 1.6rem .2rem; text-align: center; font-size: .6rem; color: #7a3b3b; }
.mini-nr { display: block; text-align: center; font-size: .65rem; color: var(--text-gedaempft); }

main.buehne { background: #fff; border: 1px solid var(--linie); padding: .6rem; }
.werkzeuge { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
    font-size: .78rem; padding: .4rem .5rem; margin-bottom: .5rem;
    background: var(--aktenpapier); border-bottom: 1px solid var(--linie-hell);
    position: sticky; top: 2.6rem; z-index: 15; }
.schalter { display: flex; gap: .25rem; align-items: center; margin: 0; }
.werkzeuge .herkunft { color: var(--text-gedaempft); margin: 0; }
.werkzeuge .zoom { display: flex; gap: .3rem; align-items: center; margin-left: auto; }
.werkzeuge .zoom button { margin: 0; padding: .1rem .5rem; }
.werkzeuge .anlegen { display: flex; gap: .3rem; align-items: center; }
.werkzeuge input[type=text] { min-width: 0; padding: .15rem .3rem; }
.werkzeuge .hilfe { color: var(--text-leise); }

/* Die Ebene liegt genau ueber der Leinwand; beide werden vom
   Betrachter auf die Viewport-Groesse gesetzt. */
.blattflaeche { position: relative; display: inline-block; max-width: 100%; }
.blattflaeche canvas { display: block; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.anm-ebene { position: absolute; inset: 0; cursor: crosshair; }

/* Die Blattzahl wie im Export: rechts oben, rot umrandet.
   Ob deckend, sagt die Mandanteneinstellung. */
.blattstempel { position: absolute; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border: 2.6px solid var(--foliierungsrot); background: #fff;
    color: var(--aktentinte); font-weight: 700; font-family: var(--schrift-mono); line-height: 1;
    pointer-events: none; }
.blattstempel[data-durchsichtig] { background: transparent; }
/* Muss sein, weil display:flex oben die Browserregel für
   [hidden] schlägt: Ein Autorenstil ist immer stärker als das
   User-Agent-Stylesheet. Ohne diese Zeile bewirkt das
   Ausblenden nichts - der Schalter feuert, der Stempel bleibt.
   Gilt für jedes Element mit explizitem display, das per
   hidden verschwinden soll. */
.blattstempel[hidden] { display: none; }
/* Das Suchfeld in der Kopfleiste und auf der Findenseite. */
.kopf-finden { margin-left: auto; margin-right: 1rem; }
.kopf-finden input { font: inherit; font-size: .82rem; padding: .2rem .45rem; width: 11rem;
    border: 1px solid var(--linie); background: var(--aktenpapier); }
.kopf-finden input:focus { border-color: var(--registraturblau); background: #fff; }
nav.kopf .rechts { margin-left: 0; }

form.finden-form { display: flex; gap: .4rem; margin: 0 0 .8rem; }
form.finden-form input { font: inherit; flex: 1 1 20rem; max-width: 32rem;
    padding: .45rem .6rem; border: 1px solid var(--deckelkarton); }
form.finden-form button { margin: 0; padding: .45rem 1.1rem; }

/* Mein Konto: Auswahl mit Erklärung, nicht nur mit Etikett. Wer zwischen
   drei Stufen wählt, von denen eine Mandantennamen unverschlüsselt versendet,
   soll das lesen können, ohne nachzufragen. */
ul.stufen { list-style: none; margin: .8rem 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
ul.stufen label { display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: .1rem .5rem; align-items: baseline; margin: 0;
    background: var(--blatt); border: 1px solid var(--linie); padding: .6rem .8rem;
    cursor: pointer; }
ul.stufen label:hover { border-color: var(--deckelkarton); }
ul.stufen label:has(input:checked) { border-color: var(--registraturblau); }
ul.stufen .stufe-name { font-weight: 600; }
ul.stufen small { grid-column: 2; font-size: .82rem; color: var(--text-leise);
    font-family: var(--schrift-serif); }
form.konto-form h2 { margin: 1.8rem 0 .4rem; font-size: 1.05rem; }

/* --- Der Schreibtisch ----------------------------------------------------
   Kein Dashboard mit Kennzahlen, sondern was zu tun ist. Der Arbeitsvorrat
   nimmt die breite Spalte, Termine und letzte Akten stehen daneben - in
   dieser Reihenfolge, weil Wiedervorlagen etwas verlangen und die anderen
   beiden nur zeigen. */
.schreibtisch { display: grid; gap: 1rem; align-items: start;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
/* Die rechte Spalte in einem eigenen Behälter: Als zwei Gitterzellen würde
   die untere auf die Höhe des Arbeitsvorrats gestreckt, und dazwischen
   klaffte eine Lücke. */
.nebenspalte { display: grid; gap: 1rem; align-content: start; }
section.feld { background: var(--blatt); border: 1px solid var(--linie); padding: .9rem 1rem 1.1rem; }
section.feld h2 { margin: 0 0 .7rem; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
section.feld h3 { margin: 1.1rem 0 .4rem; font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); }
section.feld h3:first-of-type { margin-top: .2rem; }
section.feld h3 small { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Liegengeblieben ist das eine, was hier auffallen darf - deshalb das
   Foliierungsrot, das sonst Bedienelementen verwehrt ist: Es ist keines. */
section.feld h3.warnend { color: var(--foliierungsrot); }
.zahl-marke { font-family: var(--schrift-mono); font-size: .75rem; font-weight: 600;
    background: var(--registraturblau); color: var(--aktenpapier);
    padding: .05rem .4rem; }
p.ruhig { margin: .2rem 0; font-size: .88rem; color: var(--text-leise);
    font-family: var(--schrift-serif); }
p.ruhig.fremd { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--linie-hell); }
details.spaeter { margin-top: 1rem; }
details.spaeter summary { font-size: .8rem; color: var(--text-leise); cursor: pointer; }

/* Eine Zeile im Arbeitsvorrat: wann, was, und was man damit tun kann. */
.wv-zeile { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    gap: .1rem .7rem; align-items: baseline;
    padding: .5rem .2rem; border-bottom: 1px solid var(--linie-hell); }
.wv-zeile:last-child { border-bottom: 0; }
.wv-wann { font-family: var(--schrift-mono); font-size: .82rem; color: var(--text-gedaempft); }
.wv-zeile.dringend .wv-wann { color: var(--foliierungsrot); font-weight: 600; }
.wv-was a { font-weight: 600; text-decoration: none; }
.wv-was a:hover { text-decoration: underline; }
.wv-was small { display: block; font-size: .76rem; color: var(--text-leise); }
.wv-fremd { color: var(--foliierungsrot); }
.wv-tun { display: flex; gap: .3rem; align-items: center; }
.wv-tun form { display: flex; gap: .2rem; align-items: center; margin: 0; }
.wv-tun button { margin: 0; padding: .2rem .55rem; font-size: .76rem; }
.wv-tun button.still { background: none; border: 1px solid var(--deckelkarton);
    color: var(--text-gedaempft); }
.wv-tun input[type=date] { font: inherit; font-size: .74rem; padding: .1rem .2rem;
    border: 1px solid var(--deckelkarton); }
/* Das Verschieben-Formular tritt erst hervor, wenn man es braucht: Zwei
   Schalter in jeder Zeile wären Lärm. */
.wv-verschieben { opacity: .4; }
.wv-zeile:hover .wv-verschieben, .wv-verschieben:focus-within { opacity: 1; }

ul.terminliste, ul.aktenliste { list-style: none; margin: 0; padding: 0; }
ul.terminliste li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: .6rem; padding: .45rem .1rem; border-bottom: 1px solid var(--linie-hell); }
ul.terminliste li:last-child, ul.aktenliste li:last-child { border-bottom: 0; }
.wann strong { font-family: var(--schrift-mono); font-size: .9rem; }
.wann small { display: block; font-size: .72rem; color: var(--text-leise); }
.was a { font-weight: 600; text-decoration: none; }
.was small { display: block; font-size: .76rem; color: var(--text-leise); }
ul.aktenliste li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    padding: .4rem .1rem; border-bottom: 1px solid var(--linie-hell); }
ul.aktenliste a { font-weight: 600; text-decoration: none; }
ul.aktenliste small { margin-left: auto; font-family: var(--schrift-mono);
    font-size: .74rem; color: var(--text-leise); }

/* Das Hauptmenü in der Kopfleiste. Die Stelle, an der man ist, trägt einen
   Strich - keine Farbe: Die Kopfleiste soll ruhig bleiben. */
.hauptmenue { display: flex; gap: 1.1rem; margin-left: 1.4rem; font-size: .9rem; }
.hauptmenue a { text-decoration: none; color: var(--aktentinte);
    padding: .15rem 0; border-bottom: 2px solid transparent; }
.hauptmenue a:hover { border-bottom-color: var(--deckelkarton); }
.hauptmenue a.hier { border-bottom-color: var(--registraturblau); font-weight: 600; }
nav.kopf .wer { color: var(--text-leise); font-size: .82rem; margin-right: .6rem; }

@media (max-width: 52rem) {
    .schreibtisch { grid-template-columns: minmax(0, 1fr); }
    .schreibtisch .vorrat { grid-row: auto; }
}

/* Termine und Wiedervorlagen an der Akte - dieselben Bausteine wie auf dem
   Schreibtisch, damit eine Zeile überall gleich aussieht und gleich bedient
   wird. */
.akte-termine { display: grid; gap: 1rem; margin-top: 1.6rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.akte-termine form { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
    margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linie); }
.akte-termine form input, .akte-termine form select { font: inherit; font-size: .8rem;
    padding: .2rem .3rem; border: 1px solid var(--deckelkarton); min-width: 0; }
.akte-termine form input[type=text] { flex: 1 1 8rem; }
.akte-termine form button { margin: 0; padding: .25rem .7rem; font-size: .8rem; }
.akte-termine .wv-tun form { margin: 0; padding: 0; border: 0; }
.akte-termine label.mit-wv { display: inline-flex; align-items: center; gap: .25rem;
    margin: 0; font-size: .78rem; color: var(--text-gedaempft); }
ul.terminliste li.abgesagt { opacity: .55; }
ul.terminliste li.abgesagt .wann strong { text-decoration: line-through; }
.was .warnend { color: var(--foliierungsrot); }
/* Der Satz, der das Versprechen begrenzt. Er steht in der Oberfläche und
   nicht im Kleingedruckten: Wer glaubt, die Software passe auf seine Fristen
   auf, hört auf, selbst aufzupassen. */
p.hinweis-frist { margin-top: .9rem; padding-top: .6rem;
    border-top: 1px solid var(--linie-hell); font-size: .8rem; }

@media (max-width: 52rem) {
    .akte-termine { grid-template-columns: minmax(0, 1fr); }
}

/* --- Die Aktenliste ------------------------------------------------------
   Eine Registratur, keine Datenbanktabelle: Der Reiter links ist der
   Aktendeckel, an dem man die Akte im Regal erkennt, und was zählt - Titel,
   Aktenzeichen, Blattzahl - steht in einer Zeile. Sortiert nach der letzten
   Änderung, weil man an der Akte weiterarbeitet, die zuletzt offen war. */
.listenkopf { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.listenkopf h1 { margin: 0; }
.listenkopf .knopf { margin-left: auto; }

a.knopf { display: inline-block; padding: .4rem .9rem; background: var(--registraturblau);
    color: var(--aktenpapier); text-decoration: none; font-size: .85rem; }
a.knopf:hover { background: var(--aktentinte); }

ul.akten { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
li.akte { display: grid; align-items: center; gap: .3rem 1rem;
    grid-template-columns: minmax(0, 1fr) auto 5.5rem auto;
    /* Gleiche Höhe, ob mit Aktenzeichen oder ohne: Sonst springt die Liste,
       und ein Regal springt nicht. */
    min-height: 3.9rem; box-sizing: border-box;
    padding: .6rem .5rem .6rem .9rem; border-bottom: 1px solid var(--linie);
    background: var(--blatt); position: relative; }
li.akte:hover { background: #f7f7f5; }

/* Der Reiter. Foliierte Akten tragen ihn in Foliierungsrot - dort ist die
   Blattfolge festgeschrieben, und das ist dieselbe Aussage wie die
   gestempelte Blattzahl. Sonst der Deckelkarton. */
li.akte::before { content: ''; position: absolute; left: 0; top: .55rem; bottom: .55rem;
    width: 3px; background: var(--deckelkarton); }
li.akte.ist-foliiert::before { background: var(--foliierungsrot); }

/* Titel oben, Aktenzeichen darunter - immer, nicht nur bei langen Titeln.
   Sonst stehen die Zeilen mal ein-, mal zweizeilig da und die Liste wirkt
   unruhig. So liest sie sich wie eine Reihe Aktendeckel. */
a.akte-name { display: block; text-decoration: none; color: var(--aktentinte); min-width: 0; }
a.akte-name .titel { display: block; font-weight: 600; font-size: 1.02rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.akte-name:hover .titel { text-decoration: underline; }
li.akte .aktenzeichen { display: block; margin-top: .1rem; font-size: .78rem;
    font-weight: 400; color: var(--text-leise); }

li.akte .kennzahlen { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    font-size: .8rem; color: var(--text-gedaempft); }
li.akte .zahl strong { font-family: var(--schrift-mono); font-weight: 600; }
li.akte .zahl.leise, li.akte a.leise { color: var(--text-leise); }
li.akte .geaendert { font-size: .78rem; color: var(--text-leise);
    font-family: var(--schrift-mono); text-align: right; }
li.akte .wege { display: flex; gap: .7rem; font-size: .82rem; }

/* Marken sind Zustände, keine Schalter - deshalb ohne Farbe der Bedienung. */
li.akte .marke { font-size: .7rem; background: #eef2ee; color: #3d5c46;
    border: 1px solid #cfe0d4; padding: .05rem .35rem; }
li.akte .marke.fehl { background: #fdf6f6; color: #7a3b3b; border-color: #e2c9c9; }

.leer { background: var(--blatt); border: 1px solid var(--linie);
    padding: 2.5rem 1.5rem; text-align: center; color: var(--text-gedaempft); }
.leer p { margin: 0 0 .5rem; }

/* Schmale Fenster: Die Zeile bricht um, statt die Kennzahlen zu quetschen. */
@media (max-width: 40rem) {
    li.akte { grid-template-columns: minmax(0, 1fr) auto; }
    li.akte .kennzahlen { grid-column: 1 / -1; }
    li.akte .geaendert { text-align: left; }
}

/* Das gefuehrte Aktenzeichen steht in der Kennungsschrift; frueher
   gefuehrte daneben, kleiner und mit ihrer Art. */
.aktenzeichen { font-family: var(--schrift-mono); font-size: .95em; }
.aktenzeichen.gefuehrt { font-weight: 600; }
.az-art { font-size: .8em; color: var(--text-leise); }

p.herkunft { font-size: .8rem; color: var(--text-gedaempft); margin: 0 0 .6rem; }
.fehlblatt.gross { min-height: 22rem; padding: 3rem 2rem; }

.verarbeitung { background: #f6f6f4; border: 1px solid var(--linie); padding: .8rem 1rem; }
.verarbeitung p { margin: 0 0 .3rem; font-size: .9rem; }
.dauer { color: var(--text-leise); font-size: .85em; }
td.nebensache a { color: #999; font-size: .8rem; }

ul.fassungen { font-size: .9rem; line-height: 1.6; padding-left: 1.1rem; }
ul.fassungen li { margin-bottom: .4rem; }
.anm em { display: block; font-style: normal; opacity: .8; font-size: .5rem; margin-top: .15rem; }
.seiten figcaption { font-size: .85rem; color: var(--text-gedaempft); padding-top: .4rem; }
.seiten figure.entnommen { background: #fdf6f6; border-color: #e2c9c9; }
.fehlblatt { padding: 1.5rem .75rem; color: #7a3b3b; font-size: .85rem; min-height: 12rem; }
.fehlblatt p { margin: .4rem 0 0; }
form.entnahme { margin-top: .4rem; display: flex; gap: .3rem; }
form.entnahme input[type=text] { flex: 1; min-width: 0; padding: .2rem; font-size: .8rem; }
form.entnahme button { margin: 0; padding: .2rem .5rem; font-size: .8rem; }
form label { display: block; margin-top: .75rem; font-size: .9rem; }
form input[type=text], form input[type=email], form input[type=password] { padding: .4rem; min-width: 20rem; }
button { margin-top: 1rem; padding: .45rem 1rem; cursor: pointer; }
.anmeldung { max-width: 22rem; margin: 4rem auto; }
.anmeldung-marke { display: flex; align-items: center; gap: 16px; margin-bottom: 1.8rem; }
.anmeldung-marke span { font-weight: 500; font-size: 34px; letter-spacing: -.015em; }