/* =====================================================================
   CuriaDesk — Gestaltung

   Zurueckhaltend und ruhig. Eine Kanzleioberflaeche soll nicht auffallen,
   sondern lesbar sein: viel Weissraum, wenige Farben, klare Hierarchie.
   Die einzige kraeftige Farbe traegt der Beleg — er ist das, worauf es
   ankommt.

   -------------------------------------------------------------------
   Die Farbwerte sind gerechnet und nicht gewaehlt.

   Jedes Thema entsteht aus drei Angaben — Helligkeit, Farbton und Chroma
   seiner Arbeitsflaeche — und einer Liste von Kontrastzielen: „die dritte
   Textstufe haelt 4,7:1 auf der gesenkten Flaeche", „die Haarlinie haelt
   1,4:1", „ein Bedienelement haelt 3:1". Gesucht wird dann die Helligkeit,
   die das erfuellt.

   Der Grund dafuer steht in der Messung, die dem vorausging: die
   handgewaehlten Vorgaenger sind alle an derselben Stelle durchgefallen —
   Linien bei 1,25:1, wo 3:1 gefordert ist, und die dritte Textstufe bei
   3,0:1, wo 4,5:1 gefordert ist. Nicht eines von zwoelf, sondern zwoelf von
   zwoelf. Genau daran lag der Eindruck, die Oberflaeche sei „ausgewaschen":
   ein Rahmen bei 1,25:1 ist auf einem Buerobildschirm bei Tageslicht nicht
   vorhanden.

   Wer eine Farbe von Hand aendert, nimmt ihr diese Zusicherung — und
   ThemenTests.Jedes_Thema_haelt_die_Kontraste_die_es_verspricht schlaegt
   dann fehl. Der Rechenweg steht in tools/farben; die Werte hier sind
   sein Ergebnis.
   ===================================================================== */

:root {
    --tinte:           #28241c;                           /* Fliesstext */
    --tinte-leise:     #524d46;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #6c6760;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #fffefc;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #f9f6f2;                           /* der Seitengrund */
    --papier-kalt:     #efebe5;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #cdc8c1;                           /* die ruhige Haarlinie */
    --linie-stark:     #97928b;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #193252;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #4b6990;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #e4eefb;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #b7c7da;                           /* Schrift auf der Seitenleiste */

    --beleg:           #016f9d;                           /* Verweise und Belege */
    --beleg-blass:     #dbf1fe;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #81631b;
    --warnung:         #8e5e00;
    --warnung-blass:   #fbead4;
    --fehler:          #b63e3c;
    --fehler-blass:    #fee6e4;
    --gut:             #317544;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(40, 36, 28, .04), 0 3px 8px rgba(40, 36, 28, .06), 0 10px 28px -6px rgba(40, 36, 28, .08);
    --schatten-hoch:   0 2px 4px rgba(40, 36, 28, .06), 0 12px 28px -4px rgba(40, 36, 28, .09), 0 32px 64px -12px rgba(40, 36, 28, .12);

    --marke:           var(--marine-hell);
    --marke-blass:     var(--marine-blass);

    /* ---- Form ---------------------------------------------------------
       Gestaffelt nach Rang und nicht eine Rundung fuer alles: je groesser und
       ruhiger eine Flaeche, desto weicher ihre Ecke. Ein Knopf mit derselben
       Rundung wie der Dialog, in dem er steht, sieht aufgeblasen aus; ein Dialog
       mit der Ecke eines Knopfes sieht aus wie eine Kiste. */
    --radius-gross: 20px;                                 /* Dialog, Anmeldekarte, Klappen */
    --radius:       14px;                                 /* Karten, Kacheln, Fragefeld */
    --radius-klein: 9px;                                  /* Knoepfe, Felder, Meldungen */

    /* Die kleine Rundung an Zeilen, die sich anfassen lassen — Baumzeilen,
       Baumknoepfe, Ordnergriffe. Sie stand an drei Dutzend Stellen als
       var(--rundung), war aber nie erklaert; ohne die Angabe fielen genau diese
       Ecken eckig aus, und zwar nur dort. */
    --rundung:      7px;

    /* ---- Tiefe ---------------------------------------------------------
       Die Kante eines Blattes traegt der Schatten, nicht mehr die Linie. Die
       Haarlinie bleibt, wird an Karten aber zur Haelfte durchsichtig — sie
       fasst die Flaeche noch, zieht aber keinen Strich mehr um sie.

       --glanz ist das Licht, das von oben auf eine erhabene Flaeche faellt,
       --mulde die Vertiefung eines Feldes, in das man schreibt. Beides zusammen
       ergibt die Tiefe, ohne dass irgendwo ein Verlauf als Zierde liegt.

       Keine Farbwerte: alles leitet sich aus den Themenfarben ab und haelt
       deshalb in jedem Thema, ohne dass der Generator davon wissen muss.
       Die dunklen Themen setzen --glanz und --mulde weiter unten neu. */
    --linie-weich:  color-mix(in srgb, var(--linie) 50%, transparent);
    --glanz:        inset 0 1px 0 rgba(255, 255, 255, .7);
    --mulde:        inset 0 1px 2px color-mix(in srgb, var(--tinte) 9%, transparent);
    --ring:         0 0 0 3px color-mix(in srgb, var(--beleg) 20%, transparent);

    --serif:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --grotesk: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:   ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* ---- Bewegung -----------------------------------------------------
       Drei Zeiten und eine Kurve, damit die Anwendung einen Takt hat statt
       zwanzig. Kurz gehalten: eine Kanzleianwendung wird den ganzen Tag
       bedient, und was beim ersten Mal geschmeidig wirkt, ist beim
       fuenfhundertsten im Weg. Alles ueber einer Viertelsekunde faellt als
       Warten auf.

       Die Kurve startet zuegig und laeuft weich aus — so wirkt eine Bewegung
       entschieden und nicht traege. Kein Ueberschwingen: was zurueckfedert,
       zieht den Blick auf sich, und hier soll der Blick beim Inhalt bleiben. */
    --takt-kurz:  110ms;
    --takt:       170ms;
    --takt-ruhig: 260ms;
    --kurve: cubic-bezier(.2, .6, .3, 1);
}








/* Wer Bewegung abbestellt hat, bekommt keine. Nicht abgeschwaecht, sondern aus:
   die Einstellung setzen Menschen, denen davon schlecht wird oder die einer
   Bewegung nicht folgen koennen. Ein Rest davon waere kein Entgegenkommen.

   Ueber die Tokens und zusaetzlich mit der Brechstange: die Tokens decken alles
   ab, was diese Datei selbst setzt, die zweite Regel auch das, was ein Bauteil
   nebenbei mitbringt. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --takt-kurz:  1ms;
        --takt:       1ms;
        --takt-ruhig: 1ms;
    }

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

* { box-sizing: border-box; }

/* Nur fuer das Vorleseprogramm: sichtbar ist es nicht, vorhanden schon. Nicht
   display:none — das nimmt es auch dem Vorleseprogramm. */
.visuell-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Der Seitenwechsel: ein kurzes Anblenden. Kein Schieben, kein Wischen — der
   Inhalt wechselt, der Rahmen bleibt, und genau das soll es sagen. Nur die
   Deckung und keine Verschiebung: die Seiten darin sind teils bildschirmhoch,
   und ein Versatz liesse fuer den Augenblick eine Bildlaufleiste erscheinen. */
.buehne-inhalt { animation: seite-an var(--takt) var(--kurve); }

@keyframes seite-an {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------- Bewegung

   Eine Sprache fuer die ganze Anwendung, gebaut aus den drei Takten oben und
   einer Kurve. Sie soll sich weich anfuehlen und dabei nie warten lassen: was
   auf eine Handlung antwortet, ist nach gut einer Zehntelsekunde da.

   Drei Arten, nicht mehr:

   1. Zustandswechsel — Ueberfahren, Fokus, Auswahl. Farben, Raender und Schatten
      gleiten im kurzen Takt. Die Regel steht in :where() und hat damit kein
      Gewicht: jedes Bauteil, das seine eigene Bewegung mitbringt, behaelt sie.

   2. Ankommen — was neu im Dokument erscheint: Ergebnisse nach dem Laden,
      Zeilen nach einem Filter, ein aufgeklapptes Fach, der Inhalt eines
      Dialogs. Ein Anblenden mit drei Pixeln Anheben im mittleren Takt. Es
      laeuft, weil Blazor das Element einfuegt, und nur dann — ein Element, das
      stehen bleibt und nur neue Werte bekommt, blendet nicht jedes Mal neu auf.

   3. Auftauchen — Dialoge und ihr Vorhang: der Grund blendet ab, der Dialog
      hebt sich ein wenig hervor.

   Wer im System weniger Bewegung eingestellt hat, bekommt ueber die Takte und
   die Regel weiter oben keine davon. */

:where(a, button, input, select, textarea, summary, [role="tab"], [role="menuitem"]) {
    transition-property: color, background-color, border-color, box-shadow, opacity, text-decoration-color;
    transition-duration: var(--takt-kurz);
    transition-timing-function: var(--kurve);
}

@keyframes ankommen {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

@keyframes einblenden {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Nur rueckwaerts gefuellt: vor dem Start steht das Element unsichtbar bereit,
   nach dem Ende traegt es nichts mehr von der Animation. Haelte es den
   Endzustand fest, blockierte es jede spaetere Bewegung desselben Elements beim
   Ueberfahren — und eine bleibende Transformation machte es zum Bezugsrahmen fuer
   fest positionierte Kinder, etwa die Vorschau in der Gespraechsliste. */
:where(
    table.liste tbody tr,
    .kachel,
    .karte,
    .leerhinweis,
    .ueberblick,
    .beistand-koerper,
    .vorgangsfeld,
    .feldhilfe,
    .beurteilung,
    .korrekturliste,
    .mailkarte-adressen,
    .gespraechsliste > li,
    .merkliste > li,
    .variantenblatt,
    .modusinhalt > *,
    .dialog-koerper,
    .kopf-klapp-hersteller
) {
    animation: ankommen var(--takt) var(--kurve) backwards;
}

/* Ein Gespraech, das aufgeschlagen wird, blendet als Ganzes auf. Der Zug, der
   gerade entsteht, hat seine eigene Bewegung (zug-frisch) und bekommt diese nicht
   zusaetzlich. */
.zug:not(.zug-frisch) { animation: einblenden var(--takt) var(--kurve) backwards; }

/* Die Ladeflaeche selbst kommt leise, damit ein kurzer Ladevorgang nicht als
   Aufblitzen grauer Balken erscheint: was in unter einer Zehntelsekunde fertig
   ist, sieht man so gar nicht erst. */
.ladeflaeche { animation: einblenden var(--takt-ruhig) var(--kurve) backwards; animation-delay: 80ms; }

/* Fuer Inhalte, die bei einem Wechsel als Ganzes neu kommen und kein eigenes
   Kaestchen haben sollen: Blazor erzeugt den Behaelter mit neuem Schluessel
   neu, seine Kinder blenden auf. */
.modusinhalt { display: contents; }

/* Dialoge: der Vorhang blendet ab, der Dialog taucht auf. */
.vorhang { animation: einblenden var(--takt-kurz) var(--kurve) backwards; }

.vorhang > .dialog { animation: auftauchen var(--takt) var(--kurve) backwards; }

@keyframes auftauchen {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- Ladeflaechen */

/* Balken in der Form dessen, was gleich dasteht. Der Schimmer laeuft langsam:
   ein schnelles Blinken zieht den Blick an und suggeriert Eile, wo nur gewartet
   wird. */
.ladeflaeche { display: flex; flex-direction: column; gap: .55rem; padding: .25rem 0; }

.ladebalken {
    height: .85rem;
    border-radius: var(--radius-klein);
    background: linear-gradient(
        90deg,
        var(--papier-kalt) 0%,
        var(--linie) 40%,
        var(--papier-kalt) 80%);
    background-size: 300% 100%;
    animation: ladeschimmer 1.6s ease-in-out infinite;
}

/* Die Balken laufen leicht versetzt — gleichzeitig sehen sie aus wie ein Balken
   mit Streifen, versetzt wie eine Flaeche, an der gearbeitet wird. */
.ladebalken:nth-child(3n) { animation-delay: .15s; }
.ladebalken:nth-child(3n + 1) { animation-delay: .3s; }

@keyframes ladeschimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* Ohne Bewegung bleibt eine ruhige Flaeche stehen. Sie sagt dasselbe, nur
   leiser: hier kommt gleich etwas. */
@media (prefers-reduced-motion: reduce) {
    .ladebalken { background: var(--papier-kalt); animation: none; }
}

html, body {
    height: 100%;
    margin: 0;
}

/* Fast alle Groessen stehen in rem und haengen damit hier. 15 statt der 16 des
   Browsers macht die ganze Oberflaeche einen Tick dichter, ohne dass jede
   Regel einzeln nachgezogen werden muss. */
html { font-size: 15px; }

body {
    font-family: var(--grotesk);
    font-size: 14px;
    line-height: 1.6;
    color: var(--tinte);
    background: var(--papier-warm);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--hausschrift);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .6rem;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--beleg); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 .85rem; }

.leise  { color: var(--tinte-leise); }
.still  { color: var(--tinte-still); font-size: .85rem; }

/* ------------------------------------------------------------- Grundlagen */

/* Ein Fokusring fuer alles, was sich bedienen laesst.
   Vorher trugen ihn fuenf einzelne Bauteile, der Rest gar keinen — in einer
   Anwendung, in der jemand den ganzen Tag mit der Tastatur zwischen Feldern und
   Listen wechselt, ist das kein Schoenheitsfehler, sondern der Verlust der
   Ortsangabe. :focus-visible und nicht :focus: wer mit der Maus klickt, hat den
   Ring nicht noetig und empfaende ihn als Fehler. */
:focus-visible {
    outline: 2px solid var(--beleg);
    outline-offset: 2px;
}

/* Auf der dunklen Kopfleiste geht der Belegton unter. */
.kopfleiste :focus-visible,
.anmeldeseite :focus-visible { outline-color: rgba(255, 255, 255, .75); }

/* Markierter Text im Hausbelegton statt im Blau des Browsers. */
::selection { background: var(--beleg-blass); color: var(--tinte); }

/* Schmale, gedeckte Bildlaufleisten: eine Akte mit zweitausend Zeilen hat
   staendig eine im Bild, und die Voreinstellung des Systems passt zu keinem der
   Themen. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--linie-stark) transparent;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Das ist eine Einstellung des
   Betriebssystems und keine Vorliebe, ueber die diese Anwendung zu befinden
   haette — fuer manche Menschen loesen bewegte Flaechen Uebelkeit aus. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- Rahmen */

/* Die Navigation liegt oben und nicht an der Seite: eine Aktentabelle mit acht
   Spalten und eine Fundstelle neben der Antwort brauchen Breite, und davon hat
   ein Bildschirm weniger als von der Hoehe. Waagerecht kostet dieselbe
   Navigation eine Zeile — senkrecht kostete sie ein Sechstel der Flaeche. */
.rahmen {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
}

/* ------------------------------------------------------------------ Dialog */

.vorhang {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;

    /* Dunkel, aber nicht schwarz: der Hintergrund soll zuruecktreten und nicht
       verschwinden — man arbeitet weiter an derselben Oberflaeche. Die leichte
       Unschaerfe nimmt ihm die Kanten, erkennbar bleibt er trotzdem. */
    background: rgba(26, 35, 50, .38);
    backdrop-filter: blur(3px);
}

.dialog {
    display: flex;
    flex-direction: column;
    width: min(60rem, 100%);
    max-height: 100%;
    background: var(--papier);
    border: 1px solid var(--linie-weich);
    border-radius: var(--radius-gross);
    box-shadow: var(--glanz), var(--schatten-hoch);
    overflow: hidden;
}

.dialog-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--linie);
    flex: 0 0 auto;
}

.dialog-kopf h2 { margin: 0; }

.dialog-schliessen {
    padding: .15rem .45rem;
    background: none;
    border: none;
    color: var(--tinte-still);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-klein);
}

.dialog-schliessen:hover { background: var(--papier-kalt); color: var(--tinte); }

.dialog-leiste {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--linie);
    background: var(--papier-warm);
    flex: 0 0 auto;
}

.dialog-leiste .feld { flex: 1; }
.dialog-leiste .still { white-space: nowrap; }

/* Der Koerper scrollt, Kopf und Fuss bleiben stehen: bei zweihundert Mandanten
   soll das Suchfeld nicht mit nach oben verschwinden. */
.dialog-koerper {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 1.25rem;
}

.dialog-koerper table.liste { margin: 0; }

.dialog-koerper table.liste thead th {
    position: sticky;
    top: 0;
    background: var(--papier);
    z-index: 1;
}

.dialog-koerper table.liste tbody tr { cursor: pointer; }
.dialog-koerper table.liste tbody tr:hover { background: var(--papier-kalt); }
.dialog-koerper table.liste tbody tr.gewaehlt:hover { background: var(--marine-blass); }

.nummernspalte { font-family: var(--mono); font-size: .85em; }

/* Der Name traegt die Zeile, die Nummer steht darunter und bestaetigt ihn. */
.mandantenname {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.mandantennummer {
    display: block;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--tinte-still);
    margin-top: .1rem;
}

/* ==========================================================================
   Mandantenstammdaten — das Blatt zum Mandanten
   ========================================================================== */

/* Das Zeichen neben dem Namen, in Liste und Wechseldialog. Ein Verweis, der wie
   eine Tabellenzeile aussieht: die Farbe kommt von der Zeile, nicht vom Link —
   eine blaue Unterstreichung in jeder Zeile machte die Liste unruhig. */
.mandantenzeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
}

.mandantenzeile:hover .mandantenname { text-decoration: underline; }

.mandantenzeile-text { min-width: 0; }

/* Das Logo bekommt einen Rahmen, das Kuerzel nicht: ein Zeichen auf weissem Grund
   verschwaemme sonst mit der Zeile, waehrend die Kuerzelscheibe ihre eigene Farbe
   traegt. `contain` und nicht `cover` — ein beschnittenes Firmenzeichen ist
   schlimmer als ein kleines. */
.mandantenzeichen-bild {
    flex: 0 0 auto;
    object-fit: contain;
    border: 1px solid var(--linie);
    border-radius: var(--rc-radius-sm, 4px);
    background: #fff;
    padding: 2px;
}

.mandantenzeichen-gross { flex: 0 0 auto; }

/* Die Postleitzahl braucht keine zwoelf Zeichen Platz. Ohne diese Ausnahme stand
   sie so breit wie der Ort daneben und sah nach einem Feld aus, in das mehr
   gehoert. */
.raster-feld.schmal { flex: 0 1 7rem; }

/* --- Die Vorschlaege --- */

.vorschlagsliste {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-bottom: 1.4rem;
}

/* Der linke Streifen kennzeichnet den Vorschlag als etwas, das noch nicht gilt.
   Dieselbe Rolle wie die Farbe an einer Warnung, nur leiser: hier ist nichts
   schiefgegangen, es ist nur noch nicht entschieden. */
.vorschlag {
    border: 1px solid var(--linie);
    border-left: 3px solid var(--marine-hell);
    border-radius: var(--rc-radius-md, 6px);
    background: var(--papier-warm);
    padding: .7rem .9rem;
}

.vorschlag-kopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

.vorschlag-wert { font-size: 1rem; }

.vorschlag-beleg {
    margin: .35rem 0 .6rem;
    font-size: .8rem;
    line-height: 1.5;
}

/* Der Belegtext steht unter der Fundstelle und nicht daneben: er ist ein Zitat und
   kann lang sein, und ein Zitat, das die Zeile sprengt, schiebt den Verweis aus
   dem Blick. */
.vorschlag-beleg .still { display: block; margin-top: .15rem; }

.vorschlag-knoepfe {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Die Lesefassung fuer Zugaenge ohne Aenderungsrecht. Zwei Spalten: die
   Beschriftung schmal, der Wert nimmt den Rest. */
.stammdatenschau {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: .35rem .9rem;
    margin: 0 0 1rem;
}

.stammdatenschau dt {
    color: var(--tinte-still);
    font-size: .82rem;
}

.stammdatenschau dd { margin: 0; }

/* --- Die Mandantenliste ---

   Sieben Spalten, und trotzdem soll eine Zeile in einem Blick lesbar sein. Das
   traegt die Typografie und nicht der Rahmen: der Hauptwert einer Zelle in der
   Schriftgroesse der Tabelle, der Zusatz eine Stufe kleiner und stiller
   darunter. Wer die Spalte „Sitz" ueberfliegt, liest dann die Orte und stolpert
   nicht ueber die Laender. */
.mandantenliste td { vertical-align: top; padding-top: .5rem; padding-bottom: .5rem; }

.mandantenliste .mandantenzeile { align-items: flex-start; }

/* Die Zeile ist anklickbar und markiert sich. Markiert heisst: die Funktionsleiste
   wirkt auf sie. Der Ton ist derselbe wie beim gewaehlten Mandanten, nur mit einer
   Kante links — gewaehlt ist eine Arbeitsstelle, markiert eine Absicht. */
.mandantenliste tbody tr { cursor: pointer; }

.mandantenliste tbody tr.markiert {
    background: var(--marine-blass);
    box-shadow: inset 3px 0 0 var(--marine-hell);
}

.mandantenliste tbody tr.markiert.zeile-still { opacity: 1; }

.spalte-wahl { width: 2.2rem; text-align: center; }

.mandantenliste td.spalte-wahl { padding-top: .75rem; }

.wahlkasten {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--hausschrift);
    cursor: pointer;
}

/* Ein Spaltenkopf, der sortiert: sieht aus wie ein Kopf und nicht wie ein Knopf. */
.sortierkopf {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.sortierkopf-pfeil {
    font-size: .8em;
    color: var(--tinte-still);
    opacity: .55;
    transition: opacity var(--takt-kurz) var(--kurve);
}

.sortierkopf:hover .sortierkopf-pfeil,
.sortierkopf.aktiv .sortierkopf-pfeil { opacity: 1; }

.sortierkopf.aktiv { color: var(--hausschrift); }

.sortierkopf:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: 2px; border-radius: 3px; }

/* --- Die Funktionsleiste ueber einer Liste ---

   Wie die Leiste eines Dateiexplorers: links das Anlegen, daneben was auf die
   Markierung wirkt, rechts wie viel markiert ist. Eine Flaeche aus einem Guss,
   die Knoepfe darauf ohne eigenen Rahmen, bis man sie beruehrt. */
.appleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .2rem 0 .7rem;
    padding: .35rem .45rem;
    background: var(--papier);
    border: 1px solid color-mix(in srgb, var(--linie) 55%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.appleiste-knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
}

.appleiste .knopf-blank.appleiste-knopf { border-color: transparent; }

.appleiste .knopf-blank.appleiste-knopf:hover:not(:disabled) { background: var(--marine-blass); }

.appleiste-knopf:disabled { opacity: .45; }

.appleiste-gefahr:hover:not(:disabled) { background: var(--fehler-blass) !important; color: var(--fehler); }

.appleiste-trenner {
    width: 1px;
    height: 1.4rem;
    margin: 0 .25rem;
    background: var(--linie);
    opacity: .6;
}

.appleiste-stand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    font-size: .8rem;
    color: var(--tinte-leise);
}

.appleiste-frage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
}

.appleiste-frage > span:first-child { flex: 1 1 24rem; }

.appleiste-frage-knoepfe { display: inline-flex; gap: .4rem; }

.listenfuss-groesse { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Ansprechpartner auf dem Stammdatenblatt ---

   Eine Tabelle zum Ausfuellen: vier Felder je Zeile, der Name am breitesten. Unter
   zwei Spalten Breite rutschen sie untereinander, je Person ein kleiner Block. */
.personentabelle {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .2rem;
}

.personenzeile {
    display: grid;
    grid-template-columns: minmax(9rem, 1.3fr) minmax(7rem, 1fr) minmax(10rem, 1.4fr) minmax(7rem, .8fr) 2rem;
    gap: .35rem;
    align-items: center;
}

.personenzeile .feld { padding: .35rem .55rem; font-size: .86rem; }

.personenkopf {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinte-still);
    padding: 0 .1rem;
}

.personenzeile-weg { justify-self: center; color: var(--tinte-still); }

.personenzeile-weg:hover { color: var(--fehler); }

@media (max-width: 760px) {
    .personenzeile { grid-template-columns: 1fr 1fr 2rem; }
    .personenkopf { display: none; }
}

.personenliste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .88rem;
}

.personenliste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }

.zellenwert { display: block; }

.zellenzusatz {
    display: block;
    margin-top: .1rem;
    font-size: .76rem;
    color: var(--tinte-still);
}

/* Eine Luecke ist kein Fehler, nur eine leere Stelle: sie steht als Strich da,
   still, und faellt damit weder auf noch aus. Eine wirklich leere Zelle liest
   sich dagegen wie eine Tabelle, die nicht fertig geladen hat. */
.luecke { color: var(--tinte-still); }

/* Die Knopfspalte bleibt rechts und bricht nicht um: zwei Knoepfe untereinander
   machen die Zeile doppelt hoch, und das fuer die Spalte, die am wenigsten
   gelesen wird. */
.spalte-knoepfe { width: 1%; white-space: nowrap; text-align: right; }

.zeilenknoepfe {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

/* ==========================================================================
   Das Stammdatenblatt eines Mandanten
   ========================================================================== */

.rueckweg { margin: 0 0 .6rem; font-size: .82rem; }

.rueckweg a { color: var(--tinte-leise); text-decoration: none; }

.rueckweg a:hover { color: var(--hausschrift); text-decoration: underline; }

/* Der Kopf traegt drei Dinge nebeneinander: das Zeichen, den Namen und den
   Stand der Pflege. Der Stand steht rechts, weil er die Antwort auf „ist hier
   noch etwas zu tun?" ist — und die will man sehen, bevor man liest. */
.blattkopf {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--linie);
}

.blattkopf-text { min-width: 0; flex: 1 1 auto; }

.blattkopf h1 { margin: 0; }

.blattkopf-zeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--tinte-leise);
}

.blattkopf-punkt { color: var(--linie-stark); }

.blattstand {
    flex: 0 0 11rem;
    text-align: right;
}

.blattstand-zahl {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--hausschrift);
}

/* Der Nenner leiser als der Zaehler: acht ist eine feste Zahl und aendert sich
   nie, gelesen wird die davor. */
.blattstand-von { font-size: .95rem; color: var(--tinte-still); }

.blattstand-wort {
    display: block;
    font-size: .74rem;
    color: var(--tinte-still);
    margin-bottom: .35rem;
}

.blattstand .balken { width: 100%; }

.blattstand-marke {
    margin-top: .45rem;
    text-decoration: none;
}

/* Zwei Bahnen: links das Blatt, rechts, was zum Mandanten gehoert, aber kein
   Textfeld ist — sein Zeichen und der Lesegang durch die Akten.

   Flex und kein Raster, obwohl es nach Raster aussieht. Die rechte Bahn steht
   nur dem Berufstraeger offen; bei einem Zugang ohne Aenderungsrecht faellt sie
   ganz weg, und ein Raster mit zwei festen Spalten liesse die Haelfte der Seite
   leer. So nimmt das Blatt die Breite, die uebrig ist. Beim Umbruch stehen sie
   untereinander — eine Randspalte von zwoelf Zeichen Breite ist keine. */
.blattbahnen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.blattbahn-haupt { flex: 3 1 28rem; }

.blattbahn-rand  { flex: 1 1 18rem; }

/* Auf schmalem Schirm untereinander. Der Stand verschwindet nicht, sondern
   rueckt unter den Namen und richtet sich nach links aus — er ist die Antwort
   auf „ist hier noch etwas zu tun?", und die faellt nicht weg, nur weil das
   Fenster schmaler wird. */
@media (max-width: 62rem) {
    .blattkopf { flex-wrap: wrap; }

    .blattstand {
        flex: 1 1 100%;
        text-align: left;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .blattstand-zahl, .blattstand-wort { display: inline; margin: 0; }

    .blattstand .balken { flex: 1 1 8rem; width: auto; }

    .blattstand-marke { margin-top: 0; }
}

.blattbahn-haupt, .blattbahn-rand { min-width: 0; }

.blattbahn-haupt .karte:last-child,
.blattbahn-rand .karte:last-child { margin-bottom: 0; }

/* Der Kopf einer Karte: Ueberschrift links, Beiwerk rechts. Die Ueberschrift
   verliert hier ihren Aussenabstand — in einer Karte sitzt sie am oberen Rand
   und braucht keinen zweiten. */
.kartenkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .9rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--linie);
}

.kartenkopf h2 { margin: 0; font-size: 1.05rem; }

.kartentext { margin: .7rem 0 0; }

.kartentext:first-of-type { margin-top: 0; }

/* Der Fuss traegt die Handlung der Karte. Eine Linie darueber, weil er das Ende
   markiert — ohne sie klebte der Knopf am letzten Eingabefeld und sah aus, als
   gehoerte er dazu. */
.kartenfuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linie);
}

/* --- Die Maske ---

   Drei Gruppen statt acht Feldern in einer Reihe. Wer eine Anschrift eintraegt,
   soll nicht zwischen Steuernummer und E-Mail nach dem Ort suchen. Ein echtes
   <fieldset> und kein <div>: das Vorleseprogramm nennt dann die Gruppe mit,
   wenn es in das erste Feld springt. */
.feldgruppe {
    border: none;
    margin: 0 0 1.3rem;
    padding: 0;
    min-width: 0;
}

.feldgruppe:last-of-type { margin-bottom: 0; }

.feldgruppe legend {
    padding: 0;
    margin-bottom: .55rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tinte-still);
}

/* Ein Feld, das mehr Text traegt als die anderen — Strasse, Handelsregister,
   Geschaeftsfuehrung. Ohne diese Ausnahme stand die Strasse so breit wie die
   Postleitzahl daneben. */
.raster-feld.breit { flex: 2 1 20rem; }

.feld-hinweis {
    display: block;
    margin-top: .25rem;
    font-size: .76rem;
    color: var(--tinte-still);
    line-height: 1.45;
}

/* Die Vorschlagskarte traegt den Ton der offenen Entscheidung schon am Rahmen —
   sie ist das einzige auf dieser Seite, was jemand ansehen muss. */
.karte-vorschlaege { border-color: #eadfba; }

/* Was schon dasteht, neben dem Vorschlag: ein uebernommener Wert ueberschreibt
   es, und wer entscheidet, muss beides nebeneinander sehen. */
.vorschlag-bisher {
    font-size: .78rem;
    color: var(--tinte-still);
}

.dialog-fuss {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--linie);
    background: var(--papier-warm);
    flex: 0 0 auto;
}

.dialog-fuss .still { flex: 1; }

/* Ein zweiter Fuss mitten im Koerper: die Entscheidung „raus damit" gehoert
   unmittelbar unter den Text, den sie betrifft, und nicht unter den Dialog. */
.dialog-fuss-innen {
    margin: 1rem 0;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    flex-wrap: wrap;
}

/* Ein Schreiben liest sich als Schreiben und nicht als Formularfeld: Serifen,
   ruhige Zeilen, feste Hoehe statt springendem Kasten. */
.schreibfeld {
    font-family: var(--serif, Georgia, serif);
    font-size: .95rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 20rem;
}

@media (max-width: 720px) {
    .vorhang { padding: 0; }
    .dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* ----------------------------------------------------------------- Buehne */

.buehne {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--papier-warm);
}

.buehne-kopf {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.75rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie-weich);
    box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--tinte) 35%, transparent);
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.buehne-kopf h1 { margin: 0; font-size: 1.15rem; }

.buehne-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.75rem;
}

.buehne-inhalt.ohne-polster { padding: 0; }

.bahn { max-width: 62rem; margin: 0 auto; }

/* Fuer Seiten, die eine Tabelle mit vielen Spalten tragen. 62rem ist auf
   Lesetext hin gewaehlt; eine Liste mit acht Spalten bricht darin um, und
   umgebrochene Namen sind schwerer zu ueberfliegen als eine breite Bahn. */
.bahn-breit { max-width: 80rem; }

/* Der Pruefhinweis steht auf jeder Seite und laesst sich nicht wegklicken. */
/* Der Pruefhinweis unter dem Fragefeld: eine Zeile in der Farbe des Kleingedruckten,
   kein Warnband. Er soll gelesen werden koennen, wenn jemand hinsieht, und nicht
   jeden Tag um Aufmerksamkeit rufen — ein Band, das immer schreit, wird ueberhoert. */
.pruefhinweis-zeile { margin-top: .6rem; }

.pruefhinweis-knopf {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .74rem;
    color: var(--tinte-still);
    cursor: pointer;
    text-align: left;
}

.pruefhinweis-knopf:hover { color: var(--tinte); text-decoration: underline; }

.pruefhinweis-voll {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--linie);
    font-size: .74rem;
    line-height: 1.55;
    color: var(--tinte-still);
    max-width: 46rem;
}

/* ------------------------------------------------------------------- Chat */

/* Der Beistand links, der Verlauf rechts. Die Gespraechsliste ist das
   Verzeichnis zu dem, was daneben steht, und ein Verzeichnis steht vor dem Text:
   der Blick faengt links an und soll dort finden, wohin er will, bevor er zu
   lesen beginnt. Die Reihenfolge steht auch so im Markup — eine Anordnung, die
   nur das Auge kennt, waere fuer die Tabulatortaste die alte. */
.gespraech {
    display: grid;
    grid-template-columns: 300px 2.6rem 1fr;
    height: 100%;
    overflow: hidden;
}

/* Eingeklappt bleibt der Streifen stehen — nur die Spalte davor faellt weg.

   Die Spalte verschwindet mit dem Element und wird nicht auf null gesetzt. Das ist
   der Unterschied, an dem es lag: „display: none" nimmt das Element aus dem Raster,
   und die verbleibenden ruecken selbsttaetig eine Spalte vor. Bei einer Nullspalte
   an erster Stelle landete damit der Streifen genau dort — unsichtbar, mitsamt dem
   Knopf, der die Spalte zurueckholt. Wer einklappte, kam nicht mehr zurueck.

   Zwei Spalten fuer zwei Elemente also. Wer hier eine Spalte hinzufuegt, muss auch
   ein Element hinzufuegen — oder die Elemente ihre Spalte ausdruecklich nennen
   lassen. */
.gespraech-schmal { grid-template-columns: 2.6rem 1fr; }
.gespraech-schmal .beistand { display: none; }

/* Mit offener Fundstelle kommt eine vierte Spalte hinzu: das Blatt steht rechts
   neben dem Gespraech. Vorher nahm es die Spalte des Beistands ein — und damit
   verschwand mit jedem angeklickten Beleg die Gespraechsliste. Ein Verzeichnis
   verschwindet aber nicht, weil man etwas aufschlaegt.

   Die Mitte bekommt eine Untergrenze: unter etwa zwanzig Zeichenbreiten waere
   der Antworttext ein Wortband, und dann waere nebeneinander vergleichen
   sinnlos. minmax() statt 1fr auch deshalb, weil eine lange Zeile im Verlauf
   eine 1fr-Spalte sonst breiter schiebt, als das Raster erlaubt.

   Die Blattbreite als min()-Ausdruck und nicht als feste Zahl: auf einem
   4K-Schirm waeren 38 % mehr Blattbreite, als eine Seite ueberhaupt braucht. */
.gespraech-fundstelle { grid-template-columns: 300px 2.6rem minmax(20rem, 1fr) min(38vw, 640px); }

/* Eingeklappt faellt die Gespraechsliste weg — dann darf das Blatt breiter. Auch
   hier drei Spalten fuer drei Elemente und keine Nullspalte davor. */
.gespraech-schmal.gespraech-fundstelle { grid-template-columns: 2.6rem minmax(20rem, 1fr) min(44vw, 760px); }

/* Die Spalte, in der das Blatt liegt: Kopf und Fuss stehen fest, das Blatt
   scrollt dazwischen. Sie kommt von rechts herein — von dort, wo der angeklickte
   Beleg im Text steht, und nicht aus dem Nichts.

   min-width: 0, weil ein breites Bild oder eine lange Zeile darin die Spalte
   sonst ueber ihre Rasterbreite hinausdehnt und das Gespraech daneben
   zusammenschiebt. Dasselbe gilt fuer die Mitte. */
.schauspalte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--papier);
    border-left: 1px solid var(--linie);
    animation: schau-auf var(--takt) var(--kurve);
}

@keyframes schau-auf {
    from { opacity: 0; transform: translateX(10px); }
}

/* Der Streifen traegt das Einklappzeichen und, wenn eingeklappt, die Zeichen der
   drei Abschnitte. Sie sagen weiterhin, was dort liegt; ein Klick holt die
   Spalte zurueck. Sie ganz verschwinden zu lassen hiesse, den Weg zurueck zu
   verstecken. */
.beistand-streifen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .55rem 0;
    background: var(--papier);
    border-left: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
}

.streifen-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    color: var(--tinte-still);
    cursor: pointer;
}

.streifen-knopf:hover { background: var(--papier-kalt); color: var(--hausschrift); }

.streifen-knopf:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: -2px;
}

/* Ohne eigene Trennlinie: der Streifen links davon traegt schon auf beiden
   Seiten eine, und eine dritte daneben waere ein Doppelstrich. */
.gespraech-spalte {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;

    /* Die Hoehe des Eingabebereichs. verlauf.js haelt sie aktuell; der Wert hier
       gilt nur, bis das zum ersten Mal geschehen ist. */
    --eingabehoehe: 10rem;

    /* Wie weit vor dem Eingabebereich der Verlauf auszublenden beginnt. */
    --ausblendung: 3rem;
}

/* Der Verlauf laeuft unter dem Eingabebereich durch und blendet davor weich aus.

   Eine Maske und keine Farbflaeche darueber: sie macht den Verlauf selbst
   durchsichtig, gleich welcher Grund dahinter liegt — Papier, ein Thema mit
   eigenem Ton, der dunkle Modus. Ein Verlauf von Weiss nach Durchsichtig saehe auf
   jedem anderen Grund nach einem Fleck aus.

   Ausgeblendet ist er, bevor der Inhalt des Eingabebereichs beginnt: Frage und
   Fragefeld ueberlappen nie. Der Abstand unten haelt die letzte Antwort beim
   Rollen ans Ende vollstaendig ueber der Ausblendung. */
.verlauf {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem calc(var(--eingabehoehe) + var(--ausblendung) - 1rem);

    --maske: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--eingabehoehe) - var(--ausblendung)),
        transparent calc(100% - var(--eingabehoehe) + .4rem));

    -webkit-mask-image: var(--maske);
    mask-image: var(--maske);
}

/* ------------------------------------------------- Dateien hineinziehen

   Die Ablagezone legt sich ueber die Chatspalte, sobald Dateien hereingezogen
   werden — ziehen.js setzt dafuer die Klasse ablage-offen an der Spalte. Sie soll
   sofort da sein und einladend wirken: der Verlauf darunter wird unscharf und tritt
   zurueck, in der Mitte schwebt ein Blatt mit Andock-Ringen, und die beiden Ziele
   tragen einen umlaufenden gestrichelten Rand, wie man ihn von einer Ablage kennt.

   Ueber einem Ziel hebt sich die Karte und nimmt die Farbe der Belege an; beim
   Loslassen bestaetigt ein kurzer Impuls die Wahl, dann geht die Zone. */

.ablagezone {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--papier-warm) 80%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.gespraech-spalte.ablage-offen > .ablagezone {
    display: flex;
    animation: einblenden var(--takt) var(--kurve) backwards;
}

.ablagezone.abgelegt {
    opacity: 0;
    transition: opacity .28s var(--kurve) .12s;
}

.ablagezone-inhalt {
    width: min(36rem, 100%);
    text-align: center;
    animation: auftauchen var(--takt-ruhig) var(--kurve) backwards;
}

/* Das Blatt mit den Ringen: es schwebt, die Ringe laufen nach aussen — „hier wird
   angedockt". */
.ablagezone-symbol {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.6rem;
    height: 4.6rem;
    margin: 0 auto .9rem;
}

.ablagezone-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--beleg) 45%, transparent);
    animation: ablage-ring 1.8s cubic-bezier(.2, .6, .35, 1) infinite;
}

.ablagezone-ring + .ablagezone-ring { animation-delay: .9s; }

@keyframes ablage-ring {
    from { transform: scale(.62); opacity: .8; }
    to   { transform: scale(1.55); opacity: 0; }
}

.ablagezone-blatt {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 50%;
    background: var(--papier);
    color: var(--beleg);
    box-shadow: var(--glanz), var(--schatten-hoch), 0 0 0 1px color-mix(in srgb, var(--beleg) 25%, transparent);
    animation: ablage-schweben 1.6s ease-in-out infinite;
}

@keyframes ablage-schweben {
    0%, 100% { transform: translateY(1px); }
    50%      { transform: translateY(-4px); }
}

.ablagezone-titel {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--hausschrift);
}

.ablagezone-text {
    margin: .15rem 0 1rem;
    font-size: .84rem;
    color: var(--tinte-leise);
}

.ablagezone-ziele {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

@media (max-width: 720px) {
    .ablagezone-ziele { grid-template-columns: 1fr; }
}

/* Ein Ziel: Karte mit laufendem Strichrand. Der Rand sind vier gestrichelte
   Linien im Hintergrund, deren Lage wandert — so umlaeuft er die Karte, ohne dass
   ein einziges Element bewegt wird. */
.ablageziel {
    --strich: color-mix(in srgb, var(--marine-hell) 60%, transparent);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.1rem 1rem 1rem;
    border-radius: var(--radius);
    background-color: var(--papier);
    background-image:
        linear-gradient(90deg, var(--strich) 50%, transparent 50%),
        linear-gradient(90deg, var(--strich) 50%, transparent 50%),
        linear-gradient(0deg, var(--strich) 50%, transparent 50%),
        linear-gradient(0deg, var(--strich) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    box-shadow: var(--schatten);
    animation: ablage-ameisen .9s linear infinite;
    transition:
        transform var(--takt) var(--kurve),
        box-shadow var(--takt) var(--kurve),
        background-color var(--takt) var(--kurve);
}

@keyframes ablage-ameisen {
    to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}

/* Das Eingabeelement liegt unsichtbar ueber der ganzen Karte: dort wird
   losgelassen. Alles andere in der Karte laesst den Zeiger durch. */
.ablageziel-eingabe {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: copy;
}

.ablageziel > :not(.ablageziel-eingabe) { pointer-events: none; }

.ablageziel-zeichen {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .2rem;
    border-radius: 50%;
    background: var(--marine-blass);
    color: var(--hausschrift);
    transition:
        transform var(--takt) var(--kurve),
        background-color var(--takt) var(--kurve),
        color var(--takt) var(--kurve);
}

.ablageziel-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--hausschrift);
}

.ablageziel-text {
    font-size: .76rem;
    line-height: 1.4;
    color: var(--tinte-leise);
}

/* Ueber dem Ziel: der Strichrand wird ein fester Rand in der Farbe der Belege, die
   Karte hebt sich, das Zeichen fuellt sich. */
.ablageziel.ueber {
    --strich: var(--beleg);

    animation: none;
    background-image: none;
    background-color: var(--beleg-blass);
    transform: translateY(-3px);
    box-shadow:
        0 0 0 2px var(--beleg),
        0 10px 24px -8px color-mix(in srgb, var(--beleg) 45%, transparent);
}

.ablageziel.ueber .ablageziel-zeichen {
    background: var(--beleg);
    color: #fff;
    transform: scale(1.08);
}

/* Losgelassen: ein Impuls nach aussen, der die Wahl bestaetigt. */
.ablageziel.angenommen { animation: ablage-angenommen .42s var(--kurve); }

@keyframes ablage-angenommen {
    0%   { box-shadow: 0 0 0 2px var(--beleg), 0 0 0 0 color-mix(in srgb, var(--beleg) 45%, transparent); }
    100% { box-shadow: 0 0 0 2px var(--beleg), 0 0 0 16px transparent; }
}

/* Die Bahn folgt dem Fenster, statt bei 48rem stehenzubleiben. Eine Auskunft mit
   Aufzaehlung, Tabelle und Fundstellen braucht Platz; auf einem breiten Schirm
   ihn nicht zu nutzen heisst, den Anwender scrollen zu lassen, obwohl daneben
   alles frei ist. Die Obergrenze bleibt, weil ueber etwa neunzig Zeichen je
   Zeile das Auge den Zeilenanfang verliert — deshalb 82rem und nicht 100%. */
.verlauf-bahn { max-width: min(82rem, 100%); margin: 0 auto; }

.zug { margin-bottom: 1.4rem; }

/* Was beim Abschicken geschieht: die Frage kommt von unten herein — von dort, wo
   das Fragefeld steht —, und die Antwortblase blendet einen Wimpernschlag spaeter
   nach. Zwei kurze Bewegungen in einer Richtung, damit der Blick dem Zug folgt,
   statt ihn nachher irgendwo im Verlauf zu suchen.

   Nur an einem frischen Zug: ein aufgeschlagenes Gespraech aus der Ablage soll
   ruhig dastehen und nicht dutzendweise hereinfliegen. Die Bewegung laeuft
   ausserdem genau einmal — beim Anlegen des Elements —, denn ein Zug, der bei
   jedem Zuwachs des Antworttexts neu hereinfliegen wuerde, waere unlesbar. */
.zug-frisch .zug-zeile-frage { animation: frage-herein var(--takt-ruhig) var(--kurve); }

.zug-frisch .zug-zeile-antwort {
    animation: antwort-herein var(--takt-ruhig) var(--kurve) both;
    animation-delay: 90ms;
}

@keyframes frage-herein {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes antwort-herein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Wechselrede: die Frage links beim Anwender, die Antwort rechts bei Curi. Das
   Zeichen daneben ist der Absender — auf einem langen Verlauf erkennt man daran
   ohne Lesen, wer spricht. */
.zug-zeile {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.zug-zeile-frage { justify-content: flex-start; margin-bottom: .8rem; }

/* Der Zeitpunkt ordnet ein und mehr nicht. Er steht deshalb klein, blass und am
   unteren Rand der Frage — sichtbar, wenn man ihn sucht, und sonst nicht. */
.zug-zeit {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: .2rem;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-still);
    white-space: nowrap;
}

/* Umgekehrte Richtung: das Zeichen sitzt rechts, die Blase links davon, und das
   Ganze wird an den rechten Rand geschoben. */
.zug-zeile-antwort { flex-direction: row-reverse; justify-content: flex-start; }

.zug-absender {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-top: .15rem;
    border-radius: 50%;
    background: var(--marine-blass);
    color: var(--hausschrift);
}

/* Curi bekommt die Hausfarbe, der Anwender das blasse Feld — zwei Absender, zwei
   Gewichte. */
.zug-absender-curi { background: var(--marine); color: #fff; }

.zug-frage {
    background: var(--marine-blass);
    border-radius: var(--radius);
    padding: .7rem 1rem;
    color: var(--hausschrift);
    font-weight: 500;

    /* Fragen sind kurz. Sie ueber die ganze Bahn zu ziehen liesse sie wie eine
       Ueberschrift aussehen, und das sind sie nicht. */
    max-width: 46rem;
}

.zug-antwort {
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    box-shadow: var(--schatten);

    /* Rechtsbuendig heisst nicht schmal: die Blase nimmt fast die ganze Bahn.
       min-width-0 ist noetig, damit lange Tabellen und Codebloecke sie nicht
       ueber den Rand hinaus dehnen. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 2.5rem);
}

/* Solange nicht geprueft, sieht man es der Antwort an. */
.zug-antwort.vorlaeufig {
    border-style: dashed;
    border-color: #d9b755;
    background: #fffdf6;
    box-shadow: none;
}

/* Ausgeliefert, aber ohne Fundstelle aus der Akte (E1) — ein durchgezogener
   Rahmen statt des gestrichelten „vorlaeufig", denn die Antwort ist fertig
   geprueft; sie traegt nur keinen Beleg. */
.zug-antwort.unbelegt { border-color: #d9b755; background: #fffdf6; }

.zug-hinweis-unbelegt {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .8rem;
    padding: .55rem .7rem;
    background: var(--warnung-blass);
    border: 1px solid #eadfba;
    border-radius: var(--radius-klein);
    color: var(--warnung);
    font-size: .85rem;
}

.zug-hinweis-unbelegt svg { flex: 0 0 auto; margin-top: .1rem; }

.zug-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--linie);
}

/* Der Antworttext kommt als Markdown und wird zu Markup. Die Regeln hier halten
   ihn im Ton der uebrigen Oberflaeche: eine Antwort soll wie ein Aktenvermerk
   aussehen und nicht wie eine Netzseite. */

.zug-text > *:first-child { margin-top: 0; }
.zug-text > *:last-child  { margin-bottom: 0; }

.zug-text p { margin: 0 0 .8rem; }

.zug-text h1,
.zug-text h2,
.zug-text h3,
.zug-text h4 {
    font-family: var(--serif);
    color: var(--hausschrift);
    margin: 1.2rem 0 .5rem;
    line-height: 1.3;
}

/* Ueberschriften in einer Chatantwort duerfen nicht mit der Seitenueberschrift
   konkurrieren — sie gliedern einen Absatz, sie eroeffnen keine Seite. */
.zug-text h1 { font-size: 1.12rem; }
.zug-text h2 { font-size: 1.05rem; }
.zug-text h3,
.zug-text h4 { font-size: .98rem; }

.zug-text ul,
.zug-text ol { margin: 0 0 .8rem; padding-left: 1.35rem; }

.zug-text li { margin-bottom: .3rem; }
.zug-text li > ul,
.zug-text li > ol { margin: .3rem 0 0; }

.zug-text li::marker { color: var(--tinte-still); }

.zug-text strong { font-weight: 650; color: var(--hausschrift); }

.zug-text blockquote {
    margin: .8rem 0;
    padding: .1rem 0 .1rem .95rem;
    border-left: 3px solid var(--linie-stark);
    color: var(--tinte-leise);
}

.zug-text code {
    font-family: var(--mono);
    font-size: .87em;
    padding: .1rem .3rem;
    background: var(--papier-kalt);
    border-radius: 3px;
}

.zug-text pre {
    margin: .8rem 0;
    padding: .7rem .85rem;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    overflow-x: auto;
}

.zug-text pre code { padding: 0; background: none; }

/* Betraege und Gegenueberstellungen. Waagerechte Linien reichen; Kaestchen um
   jede Zelle machen aus einer Aufstellung ein Formular. */
.zug-text table {
    width: 100%;
    margin: .85rem 0;
    border-collapse: collapse;
    font-size: .92em;
}

.zug-text th,
.zug-text td {
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--linie);
    text-align: left;
    vertical-align: top;
}

.zug-text thead th {
    color: var(--tinte-leise);
    font-weight: 600;
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--linie-stark);
}

.zug-text hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--linie);
}

/* Die Tabelle darf die Spalte nicht sprengen. */
.zug-text { overflow-wrap: break-word; }

.zug-fuss {
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--linie);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.werkzeuglauf {
    font-size: .82rem;
    color: var(--tinte-leise);
    margin-bottom: .7rem;
}

.werkzeuglauf div { display: flex; align-items: center; gap: .4rem; }

.widerruf {
    margin-top: .7rem;
    padding: .5rem .7rem;
    background: var(--fehler-blass);
    border-radius: var(--radius-klein);
    color: var(--fehler);
    font-size: .82rem;
}

/* Eine Selbstkorrektur, nach der es sofort weiterging: sie bleibt sichtbar, denn
   die Kette einer Antwort verschweigt nichts — aber sie ist kein Fehler und darf
   nicht wie einer aussehen. Der Warnton hier hatte den Anwender jedes Mal
   glauben lassen, die Antwort daneben sei kaputt. */
.widerruf-still {
    background: transparent;
    border-left: 2px solid var(--linie-stark);
    border-radius: 0;
    color: var(--tinte-still);
    padding: .2rem .7rem;
    font-style: italic;
}

/* Belege und die Kennzeichnung allgemeinen Rechtswissens */

a.beleg {
    display: inline-block;
    padding: .05rem .4rem;
    margin: 0 .1rem;
    background: var(--beleg-blass);
    color: var(--beleg);
    border-radius: 4px;
    font-size: .78em;
    font-weight: 600;
    font-family: var(--mono);
    vertical-align: baseline;
}

a.beleg:hover { background: #d3e6f2; text-decoration: none; }

.allgemein-marke {
    display: inline-block;
    padding: .05rem .45rem;
    margin: 0 .15rem;
    background: var(--papier-kalt);
    color: var(--tinte-leise);
    border: 1px solid var(--linie-stark);
    border-radius: 4px;
    font-size: .74em;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Dasselbe Format, andere Farbe: der Leser soll auf einen Blick sehen, dass
   hier gerechnet und nicht zitiert wurde. */
.fibu-marke {
    display: inline-block;
    padding: .05rem .45rem;
    margin: 0 .15rem;
    background: var(--marine-blass);
    color: var(--hausschrift);
    border: 1px solid var(--linie-stark);
    border-radius: 4px;
    font-size: .74em;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Ein Paragraph, den wir selbst erkannt und gegen eine feste Tabelle aufgeloest
   haben. Er fuehrt als einziges Element dieser Oberflaeche nach draussen — und
   sagt das auch, mit dem kleinen Pfeil. */
a.gesetzesverweis {
    color: var(--marine-hell);
    border-bottom: 1px dotted var(--linie-stark);
}

a.gesetzesverweis:hover {
    text-decoration: none;
    border-bottom-color: var(--marine-hell);
}

a.gesetzesverweis::after {
    content: "↗";
    font-size: .75em;
    margin-left: .12em;
    color: var(--tinte-still);
    vertical-align: super;
}

/* Ein Verweis, den das Modell gesetzt hat. Er bleibt lesbar, aber nicht
   anklickbar — siehe Antwortmarkup. */
.fremdverweis {
    border-bottom: 1px dotted var(--linie-stark);
    cursor: help;
}

.fremdverweis-ziel {
    font-family: var(--mono);
    font-size: .8em;
    color: var(--tinte-still);
    word-break: break-all;
}

.quellen {
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--linie);
    font-size: .88rem;
}

.quellen-titel {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinte-still);
    margin-bottom: .4rem;
}

.quellen ol { margin: 0; padding: 0; list-style: none; counter-reset: quelle; }

/* Eine Quelle ist zum Anklicken da. Ohne Unterstreichung und Symbol sah sie aus
   wie ein Dateiname im Fliesstext — man sah ihr nicht an, dass dahinter die
   Seite in der Akte liegt. */
.quellen li {
    counter-increment: quelle;
    margin-bottom: .15rem;
}

.quellen li a {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-color: var(--linie-stark);
}

.quellen li a::before {
    content: counter(quelle) ".";
    font-family: var(--mono);
    font-size: .8em;
    color: var(--tinte-still);
    text-decoration: none;
}

.quellen li a:hover { text-decoration-color: var(--beleg); }

.quellen-seite {
    font-family: var(--mono);
    font-size: .78em;
    padding: .02rem .3rem;
    margin-left: .3rem;
    background: var(--papier-kalt);
    border-radius: 3px;
    color: var(--tinte-leise);
}

/* Eingabe */

/* Der Eingabebereich schwebt ueber dem unteren Rand des Verlaufs — ohne eigene
   Flaeche und ohne Trennlinie. Das Fragefeld traegt seinen Bogen selbst.

   Der Bereich laesst Klicks und das Mausrad durch, nur seine Bahn nimmt sie an:
   wer neben dem Feld rollt oder an den Rollbalken greift, meint den Verlauf. */
.eingabe {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: .5rem 1.75rem 1rem;
    background: none;
    pointer-events: none;
}

.eingabe-bahn { max-width: 48rem; margin: 0 auto; pointer-events: auto; }

.eingabe textarea {
    width: 100%;
    padding: .75rem .9rem;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--tinte);
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    resize: vertical;
}

.eingabe textarea:focus {
    outline: none;
    border-color: var(--marine-hell);
    box-shadow: var(--ring);
}

.eingabe-leiste {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .65rem;
}

/* --------------------------------------------------------- Rechte Spalte */

/* Zwei Faecher, je zur Haelfte, jedes mit eigenem Lauf.

   Die Spalte selbst scrollt nicht mehr. Sie tat es vorher, und damit musste man
   an den Gespraechen vorbeiscrollen, um ans Gedaechtnis zu kommen — und beim
   Zurueckscrollen suchte man die Stelle wieder. Zwei Faecher mit eigenem Lauf
   halten beide gleichzeitig im Blick. */
.beistand {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--papier);
    border: none;
    padding: 0;
}

/* --- Die Fundstelle neben der Antwort --- */

/* Sie nimmt die ganze Spalte: Kopf und Fuss stehen fest, das Blatt scrollt
   dazwischen. Wer eine Fundstelle prueft, blaettert darin — und soll dabei nicht
   den Knopf verlieren, mit dem er sie wieder schliesst. */
.fundstellenspalte {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.fundstellenkopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--linie);
    background: var(--papier-kalt);
}

.fundstellenname {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hausschrift);
}

/* Der Dateiname wird gekuerzt und nicht umgebrochen: eine zweizeilige Kopfzeile
   verschoebe bei jedem Wechsel das Blatt darunter. */
.fundstellenname > span:last-child,
.fundstellenname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fundstellenname svg { flex: 0 0 auto; }

.fundstellenwerkzeuge { display: inline-flex; gap: .2rem; flex: 0 0 auto; }

.fundstellenkoerper {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .7rem;
    background: var(--papier-kalt);
}

/* In der schmalen Spalte gilt die Satzspiegelbreite nicht: dort ist die Spalte
   der Satzspiegel. */
.fundstellenkoerper .schau,
.fundstellenkoerper .blatt { width: 100%; }

.fundstellenkoerper .blatt { padding: 1.25rem 1.1rem 1rem; }

.fundstellenfuss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .45rem .7rem;
    border-top: 1px solid var(--linie);
}

/* Eine Vorschrift in der Seitenspalte — aufgeschlagen aus dem Antworttext.

   Sie liegt im selben Rahmen wie eine Fundstelle aus der Akte und soll trotzdem
   nicht so aussehen: das eine ist ein Blatt aus dieser Akte, das andere allgemeines
   Recht. Deshalb Papier statt Blattrahmen und die Serifenschrift des Satzspiegels. */
/* Luft ueber dem Sprungziel: ohne sie klebt die angesprungene Vorschrift am oberen
   Rand der Spalte, und der Paragraph darueber — ihr Zusammenhang — ist weg. */
.vorschriftschau { scroll-margin-top: 1rem; }

/* Die belegte Stelle im Ausschnitt. Dieselbe Auszeichnung wie im Vollbild, damit
   dasselbe auch gleich aussieht. */
.vorschriftschau-stelle {
    border-left: 3px solid var(--beleg);
    background: var(--beleg-blass);
}

@media (prefers-reduced-motion: no-preference) {
    .vorschriftschau-stelle { animation: stelle-auf 1.4s var(--kurve); }
}

.vorschriftschau {
    padding: .9rem 1rem 1rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
}

.vorschriftschau-kopf {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .55rem;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.vorschriftschau-norm { font-weight: 600; }

.vorschriftschau-titel {
    margin: 0 0 .6rem;
    font-family: var(--serif);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
}

.vorschriftschau-paragraph { margin-right: .4rem; }

/* Der Wortlaut traegt eigene Umbrueche — Absaetze, Nummern, Buchstaben. pre-wrap
   haelt sie und bricht lange Zeilen trotzdem um. Dieselbe Regel wie auf der
   Vorschriftseite; ein Gesetzestext ohne seine Gliederung ist unlesbar. */
.vorschriftschau-text {
    white-space: pre-wrap;
    font-family: var(--serif);
    font-size: .88rem;
    line-height: 1.6;
}

.vorschriftschau-stand {
    margin: .8rem 0 0;
    padding-top: .55rem;
    border-top: 1px solid var(--linie);
    font-size: .68rem;
    color: #8a8a8a;
}

/* Kein Wortlaut im Bestand: eine Auskunft und keine Fehlermeldung. */
.vorschriftschau-leer {
    padding: 1rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    font-size: .84rem;
    line-height: 1.5;
}

.vorschriftschau-leer p { margin: 0 0 .5rem; }
.vorschriftschau-leer p:last-child { margin-bottom: 0; }

/* Halbe Hoehe, solange beide offen sind. Klappt eines zu, schrumpft es auf seinen
   Titel und das andere nimmt den Rest — deshalb flex und keine festen 50%. */
.beistand-block {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

/* Das Gedaechtnis hebt sich ab: kuehleres Papier und eine deutliche Trennlinie.
   Zwei Faecher in derselben Farbe wirken wie eine lange Liste, und dann sucht man
   die Grenze zwischen ihnen. */
.beistand-gedaechtnis {
    background: var(--papier-kalt);
    border-top: 2px solid var(--linie-stark);
}

/* Der Koerper scrollt, der Titel bleibt stehen. Ohne das waere der Titel beim
   Scrollen fort, und man wuesste nicht mehr, in welchem Fach man liest. */
.beistand-koerper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1rem;
}

/* Der Titel ist der Griff zum Zuklappen. Als <button> und nicht als <div> mit
   Klickzuweisung: nur so erreicht ihn die Tabulatortaste, und nur so weiss ein
   Vorleseprogramm, dass er etwas auf- und zumacht. */
/* Der Titel bleibt stehen, waehrend der Koerper darunter laeuft. */
.beistand-titel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: .7rem;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tinte-still);
    margin: 0;
    padding: .85rem 1.25rem .5rem;
    border: none;
    border-bottom: 1px solid var(--linie);
    background: none;
    cursor: pointer;
    text-align: left;
}

.beistand-titel:hover { color: var(--tinte); }

.beistand-titel-rechts {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Der Winkel zeigt nach unten, solange offen ist, und legt sich beim Zuklappen
   auf die Seite — dieselbe Sprache wie in jedem Dateibaum. */
.beistand-titel svg:last-child { transition: transform .15s ease; }

.beistand-block.zugeklappt .beistand-titel svg:last-child { transform: rotate(-90deg); }

/* Zugeklappt schrumpft das Fach auf seinen Titel — das andere nimmt den Rest. */
.beistand-block.zugeklappt { flex: 0 0 auto; }

/* Das Zeichen sitzt vor der Beschriftung und traegt deren Farbe: es soll
   einordnen, nicht auffallen. */
.beistand-titel > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ablage-feld {
    /* Ein <label> ist von Haus aus inline. Ohne diese Zeile greift das Polster
       nur seitlich, der gestrichelte Rahmen legt sich ueber die Nachbarn und die
       ganze Spalte sitzt schief. */
    display: block;
    border: 1.5px dashed var(--linie-stark);
    border-radius: var(--radius);
    padding: 1.1rem .8rem;
    text-align: center;
    color: var(--tinte-leise);
    font-size: .85rem;
    background: var(--papier-kalt);
    cursor: pointer;
    position: relative;
}

.ablage-feld:hover { border-color: var(--marine-hell); background: var(--marine-blass); }

.ablage-feld input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ablage-feld strong { display: block; color: var(--hausschrift); font-weight: 600; }

.dokumentliste, .merkliste { list-style: none; margin: 0; padding: 0; font-size: .85rem; }

.dokumentliste li {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--linie);
}

.dokumentliste li:last-child { border-bottom: none; }

.dokumentname {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merkliste li {
    padding: .5rem .6rem;
    margin-bottom: .4rem;
    background: var(--papier-kalt);
    border-left: 2px solid var(--linie-stark);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    font-size: .84rem;
    line-height: 1.45;
}

.merkliste li.geprueft { border-left-color: var(--gut); background: var(--gut-blass); }

/* Ein Merkposten ist erst eine Behauptung und dann Wissen. Welches von beidem,
   soll man sehen, bevor man den Satz liest — nicht erst am Knopf darunter. */
.merk-stand {
    display: block;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tinte-still);
    margin-bottom: .2rem;
}

.merkliste li.geprueft .merk-stand { color: var(--gut); }

.merk-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .3rem;
}

/* --------------------------------------------------------------- Bausteine */

.marke-etikett {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.7;
    white-space: nowrap;
}

.etikett-gut     { background: var(--gut-blass);     color: var(--gut); }
.etikett-warnung { background: var(--warnung-blass); color: var(--warnung); }
.etikett-fehler  { background: var(--fehler-blass);  color: var(--fehler); }
.etikett-still   { background: var(--papier-kalt);   color: var(--tinte-leise); }
.etikett-beleg   { background: var(--beleg-blass);   color: var(--beleg); }

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .95rem;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: var(--tinte);

    /* Erhaben und nicht flach: ein Hauch Verlauf nach unten, das Licht auf der
       Oberkante und ein enger Schatten darunter. Zusammen liest sich der Knopf
       als etwas, das man druecken kann — ohne dass er lauter wird. Der Rand
       bleibt bei --linie-stark: er ist die Grenze eines Bedienelements und
       haelt 3:1. */
    background: linear-gradient(180deg,
        var(--papier),
        color-mix(in srgb, var(--papier) 70%, var(--papier-kalt)));
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    box-shadow:
        var(--glanz),
        0 1px 2px color-mix(in srgb, var(--tinte) 10%, transparent);
    cursor: pointer;
    transition:
        background var(--takt-kurz) var(--kurve),
        border-color var(--takt-kurz) var(--kurve),
        box-shadow var(--takt-kurz) var(--kurve),
        transform var(--takt-kurz) var(--kurve),
        opacity var(--takt-kurz) var(--kurve);
}

.knopf:hover:not(:disabled) {
    background: var(--papier);
    border-color: var(--tinte-still);
    box-shadow:
        var(--glanz),
        0 2px 6px -1px color-mix(in srgb, var(--tinte) 16%, transparent);
}

/* Ein Knopf gibt beim Druecken nach — ein Pixel, nicht mehr. Das ist die
   Rueckmeldung, die zwischen Klick und Antwort steht: der Anwender weiss
   sofort, dass er getroffen hat, auch wenn die Antwort eine Sekunde braucht.
   Dabei wird aus dem Licht auf der Kante eine Mulde: der Knopf ist jetzt unten. */
.knopf:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: var(--mulde);
}

.knopf:disabled { opacity: .5; cursor: not-allowed; }

.knopf-haupt {
    color: #fff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--marine-hell) 45%, var(--marine)),
        var(--marine));
    border-color: var(--hausschrift);

    /* Der Schatten traegt die Hausfarbe: ein grauer unter einem blauen Knopf
       sieht aus, als laege er im Staub. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 1px 2px color-mix(in srgb, var(--marine) 30%, transparent),
        0 4px 12px -3px color-mix(in srgb, var(--marine) 45%, transparent);
}

.knopf-haupt:hover:not(:disabled) {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--marine-hell) 80%, var(--marine)),
        var(--marine-hell));
    border-color: var(--marine-hell);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 2px 4px color-mix(in srgb, var(--marine) 30%, transparent),
        0 8px 18px -4px color-mix(in srgb, var(--marine) 50%, transparent);
}

.knopf-haupt:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }

.knopf-klein { padding: .2rem .5rem; font-size: .78rem; }

.knopf-blank {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--tinte-leise);
    padding: .2rem .4rem;
}

/* Der blanke Knopf bleibt flach, auch unter dem Zeiger: er steht in Zeilen und
   Leisten zu Dutzenden, und dort waere jeder Schatten einer zu viel. */
.knopf-blank:hover:not(:disabled) { background: var(--papier-kalt); color: var(--tinte); box-shadow: none; }
.knopf-blank:active:not(:disabled) { box-shadow: none; }

.knopf-breit { display: block; width: 100%; text-align: center; }

.knopf-warnung {
    color: var(--fehler);
    border-color: var(--fehler);
    background: linear-gradient(180deg,
        var(--papier),
        color-mix(in srgb, var(--papier) 85%, var(--fehler-blass)));
}

.knopf-warnung:hover:not(:disabled) { background: var(--fehler-blass); }

/* ------------------------------------------------------- Gespraechsliste */

/* --- Suche und Einordnung der Gespraeche --- */

.gespraechssuche {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .7rem;
}

.gespraechssuche .feld { flex: 1 1 auto; min-width: 0; }

.gespraechsfilter { width: 100%; margin-top: .35rem; }

.suchhinweis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: .4rem;
    font-size: .78rem;
}

/* Die Einordnung: ein ruhiges Etikett. Ein gestrichelter Rand heisst „von Curi
   vorgeschlagen, von niemandem geprueft" — dieselbe Sprache wie beim noch nicht
   festgeschriebenen Antworttext. */
.einordnung {
    display: inline-flex;
    align-items: center;
    margin-top: .3rem;
    padding: .1rem .4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    background: var(--marine-blass);
    color: var(--hausschrift);
    font-size: .7rem;
    white-space: nowrap;
}

.einordnung-vorschlag {
    background: var(--warnung-blass);
    border: 1px dashed #d9b755;
    color: var(--warnung);
}

/* Das Etikett ist die freie Ebene — es gehoert der Kanzlei, nicht Curi. Deshalb
   die neutrale Flaeche und kein Hinweis auf einen Vorschlag. */
.etikett {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .4rem;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    background: var(--papier);
    color: var(--tinte-leise);
    font-size: .7rem;
    white-space: nowrap;
}

.etikett-loesbar button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-size: .75rem;
    line-height: 1;
    opacity: .5;
    cursor: pointer;
}

.etikett-loesbar button:hover { opacity: 1; color: var(--fehler); }

/* Die Vorgangsleiste sitzt ueber dem Verlauf und beschreibt das offene Gespraech.
   Zugeklappt ist sie eine Zeile; sie soll den Verlauf nicht verdraengen.

   Ein Flexkasten mit Umbruch: links der Griff, rechts das Zusammenfassen, und das
   aufgeklappte Feld darunter ueber die volle Breite. Vorher war die Leiste ein
   Block — der Griff nahm sie ganz ein, und der Knopf fiel darunter auf eine eigene
   Zeile, wo sein `margin-left: auto` nichts bewirkte. Genau das machte die
   Funktion unauffindbar. */
.vorgangsleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding-right: 1.25rem;
    border-bottom: 1px solid var(--linie);
    background: var(--papier);
}

.vorgangsgriff {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 12rem;
    min-width: 0;
    padding: .5rem 1.25rem;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.vorgangsgriff:hover { background: var(--papier-kalt); }
.vorgangsgriff .einordnung { margin-top: 0; }
.vorgangsgriff > .zeichen { margin-left: auto; color: var(--tinte-still); }

.vorgangsfeld {
    flex: 1 1 100%;
    padding: .2rem 1.25rem .8rem;
    border-top: 1px solid var(--linie);
}

.vorgangszeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.vorgangszeile .feld-titel { margin: 0; min-width: 6rem; }
.vorgangszeile .feld-schmal { min-width: 11rem; }

.gespraechsliste {
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
}

.gespraechsliste li {
    position: relative;
    border-bottom: 1px solid var(--linie);
}

.gespraechsliste li:last-child { border-bottom: none; }

/* Das offene Gespraech traegt einen Balken und nur einen Hauch Flaeche: eine
   kraeftig gefaerbte Zeile in einer schmalen Spalte zoege mehr Aufmerksamkeit auf
   sich, als ihr zusteht. Der Hauch haelt die Zeile zusammen, seit sie aus zwei
   Ebenen besteht — der Balken allein stand neben dem Titel und nicht neben der
   Zeile. */
.gespraechsliste li.offen { border-left: 3px solid var(--beleg); }
.gespraechsliste li.offen .gespraechszeile {
    padding-left: .1rem;
    background: color-mix(in srgb, var(--beleg) 6%, transparent);
}

/* Eine Zeile, zwei Ebenen: oben Titel und Zeit, darunter Einordnung, Umfang und
   Ordner. Davor eine schmale Spalte fuer die Sichtbarkeit — ein Zeichen statt
   einer Marke. Vorher standen Marken fuer Sichtbarkeit, Einordnung und Ordner
   bunt gemischt in einer Reihe, und keine las sich vor der anderen. */
.gespraechszeile {
    display: grid;
    grid-template-columns: .9rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .3rem;
    row-gap: .12rem;
    align-items: baseline;
    width: 100%;
    padding: .42rem .35rem .45rem 0;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.gespraechszeile:hover:not(:disabled) { background: var(--papier-kalt); }
.gespraechszeile:disabled { cursor: default; opacity: .6; }

.gespraechssicht {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    display: inline-flex;
    justify-content: center;
    color: var(--tinte-still);
    opacity: .7;
}

.gespraechssicht-kanzlei { color: var(--beleg); opacity: 1; }

.gespraechszeile-kopf {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}

/* Eine Zeile: die Liste ist zum Wiederfinden da, nicht zum Lesen. Den ganzen
   Wortlaut zeigt die Vorschau. */
.gespraechstitel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
    color: var(--tinte);
}

.gespraechsliste li.offen .gespraechstitel { font-weight: 600; color: var(--hausschrift); }

.gespraechszeit {
    flex: 0 0 auto;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-still);
}

.gespraechsmeta {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .7rem;
    color: var(--tinte-still);
}

.gespraechsmeta-links {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Die Einordnung als Punkt mit Wort, nicht als Kaestchen. Voll: bestaetigt.
   Ein Ring: Curis Vorschlag, noch von niemandem geprueft. */
.gespraechskategorie {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tinte-leise);
}

.gespraechskategorie::before,
.gespraechskategorie-punkt {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--beleg);
}

.gespraechskategorie-vorschlag::before,
.gespraechskategorie-punkt.gespraechskategorie-vorschlag {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--warnung);
}

.gespraechszahl { flex: 0 0 auto; }

/* Der Ordner rechtsbuendig und fuer sich: er sagt, wo das Gespraech liegt, und
   nicht, worum es geht. */
.gespraechsordner {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    margin-left: auto;
    color: var(--tinte-still);
}

.gespraechsordner > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gespraechsordner .zeichen { flex: 0 0 auto; }

/* Der Papierkorb tritt an die Stelle der Zeit, sobald die Zeile beruehrt wird. */
.gespraechsverwerfen {
    position: absolute;
    top: .32rem;
    right: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
    color: var(--tinte-still);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.gespraechsverwerfen:hover:not(:disabled) { background: var(--fehler-blass); color: var(--fehler); }

.gespraechsliste li:hover .gespraechsverwerfen,
.gespraechsverwerfen:focus-visible { opacity: 1; }

.gespraechsliste li:hover .gespraechszeit { visibility: hidden; }

.gespraechsverwerfen:disabled { cursor: default; }

.gespraechsloeschung {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 0 .2rem .6rem 1.2rem;
}

/* --- Die Vorschau beim Ueberfahren ---

   Fest positioniert, damit die Spalte sie nicht abschneidet; verlauf.js setzt
   top und left beim Ueberfahren. Sichtbar wird sie erst nach einer kleinen
   Weile und verschwindet sofort: wer die Liste nur hinabfaehrt, soll nicht bei
   jeder Zeile ein Fenster aufgehen sehen. */
.gespraechsvorschau {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 21rem;
    max-width: calc(100vw - 2rem);
    padding: .75rem .85rem .65rem;
    background: var(--papier);
    border: 1px solid var(--linie-weich, var(--linie));
    border-radius: var(--radius);
    box-shadow: var(--glanz), var(--schatten-hoch);
    font-size: .8rem;
    line-height: 1.45;
    color: var(--tinte);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}

.gespraechsliste li:hover .gespraechsvorschau {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .16s ease .45s, transform .16s ease .45s, visibility 0s linear .45s;
}

/* Waehrend gezogen wird, bleibt sie zu — sie laege ueber dem Ordnerbaum. */
.gespraechsliste li.gespraech-gezogen .gespraechsvorschau { display: none; }

.gespraechsvorschau-titel {
    font-weight: 600;
    color: var(--hausschrift);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gespraechsvorschau-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    margin-top: .4rem;
    font-size: .72rem;
    color: var(--tinte-leise);
}

.gespraechsvorschau-meta > span { display: inline-flex; align-items: center; gap: .3rem; }

.gespraechsvorschau-abschnitt {
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px solid var(--linie);
}

.gespraechsvorschau-marke {
    display: block;
    margin-bottom: .1rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--tinte-still);
}

.gespraechsvorschau-abschnitt p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gespraechsvorschau-antwort { -webkit-line-clamp: 5 !important; color: var(--tinte-leise); }

.gespraechsvorschau-etiketten {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .5rem;
}

.gespraechsvorschau-fuss {
    margin-top: .55rem;
    font-size: .68rem;
    color: var(--tinte-still);
}

@media (prefers-reduced-motion: reduce) {
    .gespraechsvorschau,
    .gespraechsliste li:hover .gespraechsvorschau { transform: none; }
}

.feld {
    width: 100%;
    padding: .45rem .65rem;
    font-family: inherit;
    font-size: .9rem;
    color: var(--tinte);
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);

    /* Das Gegenstueck zum Knopf: der Knopf steht heraus, das Feld liegt ein
       wenig tiefer. So sieht man ohne Beschriftung, wo man drueckt und wo man
       schreibt. */
    box-shadow: var(--mulde);
}

.feld {
    transition: border-color .12s ease, box-shadow .12s ease;
}

.feld:focus {
    outline: none;
    border-color: var(--marine-hell);
    box-shadow: var(--mulde), var(--ring);
}

/* Wer per Tastatur hierher kommt, sucht das Feld — fuer ihn deutlicher als fuer
   den, der es gerade angeklickt hat und ohnehin weiss, wo es steht. */
.feld:focus-visible {
    border-color: var(--beleg);
    box-shadow: var(--mulde), 0 0 0 3px var(--beleg-blass);
}

.feld-titel {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--tinte-leise);
    margin-bottom: .25rem;
}

.karte {
    background: var(--papier);

    /* Die Kante traegt der Schatten, die Linie fasst nur noch. */
    border: 1px solid var(--linie-weich);
    border-radius: var(--radius);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--glanz), var(--schatten);
    margin-bottom: 1.25rem;
}

/* Eine Meldung erscheint dort, wo eben noch nichts war. Ohne Uebergang steht
   sie ploetzlich da und der Text darunter springt — mit dem kurzen Aufblenden
   sieht man, dass sie neu ist, und die Stelle bleibt ruhig.

   Von oben herein und nicht von unten: sie gehoert zu dem, was darueber
   geschehen ist. */
.meldung {
    padding: .75rem 1rem;
    border-radius: var(--radius-klein);
    font-size: .88rem;
    margin-bottom: 1rem;
    animation: meldung-auf var(--takt) var(--kurve);
}

@keyframes meldung-auf {
    from { opacity: 0; transform: translateY(-.3rem); }
    to   { opacity: 1; transform: none; }
}

/* Die Raender aus dem eigenen Ton gemischt statt fest: die festen Werte waren
   fuer das helle Marine gewaehlt und standen in den dunklen Themen als helle
   Striche um eine dunkle Flaeche. */
.meldung-gut     { background: var(--gut-blass);     color: var(--gut);     border: 1px solid color-mix(in srgb, var(--gut) 22%, transparent); }
.meldung-warnung { background: var(--warnung-blass); color: var(--warnung); border: 1px solid color-mix(in srgb, var(--warnung) 22%, transparent); }
.meldung-fehler  { background: var(--fehler-blass);  color: var(--fehler);  border: 1px solid color-mix(in srgb, var(--fehler) 22%, transparent); }
.meldung-still   { background: var(--papier-kalt);   color: var(--tinte-leise); border: 1px solid var(--linie-weich); }

table.liste {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    background: var(--papier);
}

/* Kein gesperrter Versalsatz mehr im Kopf: er stand ueber jeder Tabelle und
   las sich wie ein Stempel. Halbfett in normaler Schreibung ordnet genauso,
   nur leiser. */
table.liste th {
    text-align: left;
    font-size: .78rem;
    letter-spacing: .01em;
    color: var(--tinte-still);
    font-weight: 600;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--linie-stark);
}

/* Die Zeilentrenner eine Spur leiser als die Haarlinie: sie wiederholen sich
   dutzendfach untereinander und addieren sich im Auge zu einem Raster. Die
   Zeile unter dem Zeiger traegt die Fuehrung, der Strich nur die Ordnung. */
table.liste td {
    padding: .55rem .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--linie) 65%, transparent);
    vertical-align: middle;
}

table.liste tr:last-child td { border-bottom: none; }
table.liste tr.gewaehlt { background: var(--marine-blass); }

/* Die Zeile unter dem Zeiger hebt sich ab. Bei sieben Spalten verliert man
   sonst auf halbem Weg die Zeile — man liest den Zustand der einen und den
   Dateinamen der naechsten. */
table.liste tbody tr { transition: background .1s ease; }
table.liste tbody tr:hover { background: var(--papier-kalt); }

/* Die Warnzeile behaelt ihren Ton, wird beim Schweben aber eine Spur tiefer:
   uebernaehme sie die neutrale Flaeche, ginge die Warnung genau dann verloren,
   wenn jemand hinsieht. */
table.liste tbody tr.zeile-warnung:hover {
    background: color-mix(in srgb, var(--warnung-blass) 88%, var(--warnung));
}
.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.kacheln { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.25rem; }

.kachel {
    flex: 1 1 9rem;
    padding: .95rem 1.1rem;
    background: var(--papier);
    border: 1px solid var(--linie-weich);
    border-radius: var(--radius);
    box-shadow: var(--glanz), var(--schatten);
    font-size: .8rem;
    color: var(--tinte-leise);
}

.kachel-zahl {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--hausschrift);
    line-height: 1.2;
}

.kachel-warnung { border-color: color-mix(in srgb, var(--warnung) 22%, transparent); background: var(--warnung-blass); }

.balken {
    height: 6px;
    background: var(--papier-kalt);
    border-radius: 999px;
    box-shadow: var(--mulde);
    overflow: hidden;
}

.balken-fuellung { height: 100%; border-radius: inherit; background: var(--marine-hell); transition: width .2s; }

/* ------------------------------------------------------------- Anmeldung */

/* Die Anmeldung ist das erste, was jemand von der Anwendung sieht. Sie soll
   nach Kanzlei aussehen und nicht nach Anmeldemaske.

   Grund und Muster stammen aus dem Launch-Reel von CuriaDesk: ein Marine, das
   zur Mitte hin aufhellt, und darueber ein Raster aus goldenen Punkten. Wer das
   Reel gesehen hat, erkennt die Seite wieder. Gebaut aus Verlaeufen und nicht
   als Bilddatei — die Anlage laedt nichts nach, und ein Muster aus
   Rechenvorschriften bleibt in jeder Aufloesung scharf. */
.anmeldeseite {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    background: radial-gradient(120% 80% at 50% 30%, #1e3a60 0%, #122239 60%, #0b1626 100%);
    color: rgba(223, 230, 239, .8);
}

/* Das Punktraster: goldene Punkte in festem Abstand, zum Rand hin auslaufend.
   So schwach, dass es den Grund belebt und nicht mit der Karte um den Blick
   wetteifert. */
.anmeldeseite::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(196, 162, 101, .18) 1.3px, transparent 1.6px);
    background-size: 30px 30px;
    background-position: center;
    -webkit-mask-image: radial-gradient(130% 90% at 50% 40%, #000 30%, transparent 85%);
    mask-image: radial-gradient(130% 90% at 50% 40%, #000 30%, transparent 85%);
}

.anmeldebuehne {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3rem, 7vw, 7rem);
    padding: 3rem 1.5rem 2rem;
}

.anmeldekarte {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem 2.25rem 2.25rem;
    background: var(--papier);
    border-radius: var(--radius-gross);

    /* Eine feine goldene Kante oben: dieselbe Haarlinie, die die Wortmarke
       traegt. Mehr Zierde vertraegt ein Kanzleibogen nicht. */
    border-top: 3px solid var(--rc-gold-600, #C4A265);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2);
}

.anmeldekarte h1 { margin-bottom: .3rem; }

.anmeldekarte .marke-zusatz { color: var(--tinte-still); margin-bottom: 1.5rem; display: block; }

.anmelde-marke {
    display: block;
    width: 100%;
    max-width: 15rem;
    margin: 0 auto 1.75rem;
}

/* Das Motiv neben der Karte, wie die erste Szene des Reels: Logo, darunter der
   goldene Rahmen mit drei Zeilen in der Hausschrift, die letzte kursiv in Gold.
   Erst ab einer Breite, auf der Motiv und Karte nebeneinander Luft haben —
   darunter faellt es weg, und die Karte traegt das Logo wieder selbst. */
.anmeldemotiv { display: none; }

@media (min-width: 64rem) {
    .anmeldemotiv {
        display: flex;
        flex-direction: column;
        gap: 2.25rem;
        max-width: 30rem;
    }

    .anmeldeseite .anmelde-marke { display: none; }
}

.anmeldemotiv-marke { width: 22rem; height: auto; }

.anmeldemotiv-rahmen {
    padding: 2.4rem 2.8rem;
    border: 2px solid #c4a265;
    font-family: var(--serif);
    font-size: 2.7rem;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: #fff;
}

.anmeldemotiv-rahmen p { margin: 0; }
.anmeldemotiv-rahmen em { color: #c4a265; }

.anmeldemotiv-zusatz {
    margin: 0;
    font-size: .95rem;
    letter-spacing: .04em;
    color: rgba(223, 230, 239, .72);
}

/* Der Hersteller steht am Fuss der Seite, ueber die volle Breite und durch eine
   Linie abgesetzt — nicht frei schwebend unter einer Karte, deren Hoehe von
   Seite zu Seite wechselt. */
.anmeldefuss {
    /* Ueber dem Muster, nicht darunter — sonst liegt das Gitter auf der Schrift. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .72rem;
    color: rgba(223, 230, 239, .45);
    text-align: center;
}

.anmeldefuss img { height: 1rem; width: auto; opacity: .6; }

@media (max-width: 480px) {
    .anmeldekarte { padding: 1.75rem 1.35rem 1.5rem; }
    .anmeldefuss span { font-size: .68rem; }
}

/* ------------------------------------------------ Anmeldung: der Auftritt */

/* Die Seite baut sich in der Reihenfolge auf, in der ein Kanzleibogen
   entsteht: erst das Papier mit seiner Faserung, dann die Praegung, dann der
   Bogen selbst, dann der Goldstrich am Kopf, zuletzt die Zeilen. Nichts
   fliegt herein, nichts federt nach, nichts wiederholt sich. Eine
   Anmeldemaske, die huepft, sieht aus wie eine Werbeseite — und wer sie
   zweimal am Tag sieht, wird von jeder Bewegung eingeholt, die laenger
   dauert als der Blick.

   Zwei Regeln liegen allen Angaben hier zugrunde:

   Der Ruhezustand ist der Endzustand. Jede Animation nennt nur ihr `from`;
   das `to` nimmt der Browser aus dem, was ohnehin gilt. Faellt die Bewegung
   aus — abgeschaltet, abgebrochen, alte Maschine —, steht die Seite fertig
   da und nicht halb.

   Die Staffelung rechnet mit `--takt-kurz`. Damit greift die
   Bewegungsabbestellung am Kopf dieser Datei auch hier: dort wird der Takt
   auf 1ms gesetzt, und aus der Reihe wird ein gemeinsamer Augenblick. Eine
   in Millisekunden ausgeschriebene Verzoegerung koennte das nicht — sie
   ueberlebte das Abbestellen und liesse die Felder Zehntelsekunden
   spaeter erscheinen, ohne dass etwas zu sehen waere. */

/* Das Papier: das Punktraster kommt zuerst und am langsamsten. Es ist so
   schwach, dass sein Erscheinen niemandem auffaellt — spuerbar ist nur, dass
   der Grund nicht schon fertig dalag. */
.anmeldeseite::before { animation: anmelde-faserung 1.4s var(--kurve); }

@keyframes anmelde-faserung {
    from { opacity: 0; }
}

/* Das Motiv: der Rahmen zieht auf, dann folgen die drei Zeilen nacheinander —
   dieselbe Reihenfolge wie im Reel, nur ruhiger. Wie bei der Karte nennt jede
   Animation nur ihr `from`, und die Staffelung rechnet mit `--takt-kurz`, damit
   das Abbestellen von Bewegung auch hier greift. */
.anmeldemotiv-marke { animation: anmelde-zeile .6s var(--kurve) both; }
.anmeldemotiv-rahmen { animation: anmelde-rahmen 1s var(--kurve) both; animation-delay: calc(1 * var(--takt-kurz)); }
.anmeldemotiv-rahmen p { animation: anmelde-zeile .5s var(--kurve) both; }
.anmeldemotiv-rahmen p:nth-child(1) { animation-delay: calc(3 * var(--takt-kurz)); }
.anmeldemotiv-rahmen p:nth-child(2) { animation-delay: calc(5 * var(--takt-kurz)); }
.anmeldemotiv-rahmen p:nth-child(3) { animation-delay: calc(7 * var(--takt-kurz)); }
.anmeldemotiv-zusatz { animation: anmelde-zeile .5s var(--kurve) both; animation-delay: calc(9 * var(--takt-kurz)); }

@keyframes anmelde-rahmen {
    from { border-color: transparent; clip-path: inset(0 100% 0 0); }
}

/* Der Bogen: eine halbe Zeile von unten. Nach oben waere es ein Aufklappen,
   von der Seite ein Einschieben — von unten liest es sich als Auflegen. */
.anmeldekarte { animation: anmelde-karte .44s var(--kurve); }

@keyframes anmelde-karte {
    from { opacity: 0; transform: translateY(.55rem); }
}

/* Der Goldstrich am Kopf der Karte zieht aus der Mitte auf, wie ein Strich
   mit dem Lineal. Er liegt als eigene Flaeche ueber der Oberkante, weil eine
   Rahmenlinie sich nicht aufziehen laesst; die Kante selbst wird dafuer
   durchsichtig gestellt und bleibt als Platzhalter stehen, damit die Karte
   ihre Hoehe behaelt.

   Beschnitten und nicht gestaucht: `scaleX` wuerde die gerundeten Enden mit
   in die Breite ziehen, `clip-path` schiebt nur die Kanten auseinander. */
.anmeldekarte { border-top-color: transparent; }

.anmeldekarte::before {
    content: "";
    position: absolute;
    top: -3px;

    /* Zwischen den Rundungen und nicht ueber die volle Breite: auf einer weichen
       Ecke liefe ein gerader Strich in einer Sichel aus. So liegt er wie ein
       Siegelband auf dem Bogen. */
    left: var(--radius-gross);
    right: var(--radius-gross);
    height: 3px;
    background: var(--rc-gold-600, #C4A265);
    border-radius: 0 0 3px 3px;
    clip-path: inset(0);
    animation: anmelde-siegelstrich .8s var(--kurve) .18s;
}

@keyframes anmelde-siegelstrich {
    from { clip-path: inset(0 50% 0 50%); }
}

/* Die Zeilen: Marke, Titel, Hinweis, dann die Felder und der Knopf, jeweils
   eine halbe Taktlaenge nach dem Vorigen. Das Formular selbst bleibt
   unbewegt — waere es beteiligt, lief seine Deckung mit der seiner Kinder
   zusammen, und die Felder erschienen zweimal verzoegert.

   Die Meldung ist ausgenommen: sie bringt ihre eigene Bewegung mit, und sie
   steht nicht beim Aufbau der Seite, sondern nach einem Fehlschlag. */
.anmeldekarte > *:not(.meldung):not(form),
.anmeldekarte form > *:not(.meldung) {
    animation: anmelde-zeile .42s var(--kurve) both;
    animation-delay: calc(var(--stufe, 0) * .5 * var(--takt-kurz));
}

@keyframes anmelde-zeile {
    from { opacity: 0; transform: translateY(.35rem); }
}

/* Die Stufen stehen als Zahl und nicht als Zeit: die Zeit steckt im Takt,
   und der laesst sich an einer Stelle aendern. Was ab der vierten Zeile
   kommt, teilt sich eine Stufe — die Ersteinrichtung hat fuenf Felder, und
   niemand soll auf das letzte warten. */
.anmeldekarte > *:nth-child(1) { --stufe: 0; }
.anmeldekarte > *:nth-child(2) { --stufe: 1; }
.anmeldekarte > *:nth-child(3) { --stufe: 2; }
.anmeldekarte > *:nth-child(n + 4) { --stufe: 3; }

.anmeldekarte form > *:nth-child(1) { --stufe: 3; }
.anmeldekarte form > *:nth-child(2) { --stufe: 4; }
.anmeldekarte form > *:nth-child(3) { --stufe: 5; }
.anmeldekarte form > *:nth-child(n + 4) { --stufe: 6; }

/* Der Knopf, waehrend geprueft wird.

   Hinter dem Klick liegt kein Ereignis, sondern ein Seitenwechsel: der
   Katalog wird befragt, eine Kanzleidatenbank geoeffnet, ein Kennwort
   gerechnet. Das dauert lang genug, dass ein unveraenderter Knopf aussieht
   wie einer, der nicht ausgeloest hat.

   Ein Streifen am unteren Rand und kein Kreisel: er sagt „laeuft" und nicht
   „gleich fertig" — wie lange es dauert, weiss an dieser Stelle niemand.
   Das Setzen der Klasse besorgt wwwroot/anmeldung.js. */
.knopf-wartet {
    position: relative;
    cursor: progress;
    overflow: hidden;
}

.knopf-wartet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--rc-gold-600, #C4A265) 50%,
        transparent 100%);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    animation: knopf-warten 1.15s linear infinite;
}

@keyframes knopf-warten {
    from { background-position: -50% 0; }
    to   { background-position: 150% 0; }
}

/* Ohne Bewegung ein ruhiger Strich statt eines laufenden: dass etwas
   geschieht, muss auch dann zu sehen sein. */
@media (prefers-reduced-motion: reduce) {
    .knopf-wartet::after {
        background: var(--rc-gold-600, #C4A265);
        animation: none;
    }
}

/* Ein gesperrter Knopf wird sonst blass — hier soll er stehen bleiben, wie
   er war. Blass und mit laufendem Streifen sieht aus wie ein Fehler. */
.knopf-wartet:disabled { opacity: 1; }

.eingabegruppe { margin-bottom: 1rem; }

/* --- Unter dem Kennwort: „Angemeldet bleiben" und „Kennwort vergessen?" ---

   Eine Zeile, links der Haken, rechts der Verweis — so steht es auf jeder
   Anmeldeseite, und dort sucht man es. Die Farbe setzen beide selbst: die
   Anmeldeseite vererbt ihr helles Grau fuer den dunklen Grund, und auf der
   weissen Karte waere das kaum zu lesen. */
.anmeldeoptionen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: -.25rem 0 1.25rem;
    font-size: .82rem;
}

.anmelden-merken {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--tinte-leise);
    cursor: pointer;
}

.anmelden-merken input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--marine);
    cursor: pointer;
}

.kennwort-vergessen {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--beleg);
    cursor: pointer;
}

.kennwort-vergessen:hover { text-decoration: underline; }

/* Hier gilt wieder der gewoehnliche Fokusring: der helle der Anmeldeseite ist
   fuer den dunklen Grund gedacht, auf Weiss verschwaende er. */
.anmeldeoptionen :focus-visible,
.hinweisdialog :focus-visible { outline-color: var(--beleg); }

/* --- Ein kurzer Hinweis im eigenen Fenster ---

   Ein natives <dialog>: der Vorhang ist sein ::backdrop, Escape schliesst es
   von selbst. Dieselbe goldene Kante wie die Anmeldekarte, damit es als Teil
   von ihr erkennbar bleibt. */
.hinweisdialog {
    width: min(24rem, calc(100% - 2rem));
    padding: 1.75rem 1.75rem 1.5rem;
    border: none;
    border-top: 3px solid var(--rc-gold-600, #C4A265);
    border-radius: var(--radius-gross);
    background: var(--papier);
    color: var(--tinte);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2);
}

/* Ohne Weichzeichner: hinter einem <dialog> spiegelt er die Kanten der Karte
   als Geisterbilder in den Rand. Abdunkeln genuegt, um sie zuruecktreten zu
   lassen. */
.hinweisdialog::backdrop { background: rgba(8, 15, 27, .6); }

.hinweisdialog[open] { animation: anmelde-karte .3s var(--kurve); }

.hinweisdialog h2 { margin: 0 0 .5rem; }
.hinweisdialog p { margin: 0 0 1.5rem; color: var(--tinte-leise); }

.hinweisdialog form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

/* Ein Passwortfeld mit dem Auge-Knopf zum Anzeigen/Verbergen. */
.kennwortfeld { position: relative; }
.kennwortfeld .feld { padding-right: 2.4rem; }

.kennwort-auge {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    color: var(--tinte-still);
    cursor: pointer;
}

.kennwort-auge:hover { background: var(--papier-kalt); color: var(--hausschrift); }

.kennwort-auge .auge-aus { display: none; }
.kennwort-auge.kennwort-sichtbar .auge-an { display: none; }
.kennwort-auge.kennwort-sichtbar .auge-aus { display: inline-flex; }

.kette { margin-top: 1.25rem; }
.kettenschritt { margin-bottom: 1.1rem; }

.kettentitel {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinte-still);
    margin-bottom: .3rem;
}

code.roh {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--tinte-leise);
    background: var(--papier-kalt);
    padding: .35rem .5rem;
    border-radius: 4px;
}

.dateiliste {
    max-height: 18rem;
    overflow-y: auto;
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--tinte-leise);
    background: var(--papier-kalt);
    border-radius: var(--radius-klein);
    padding: .6rem .8rem;
    margin: 0;
    list-style: none;
}

.leerhinweis {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--tinte-still);
    font-size: .9rem;
}

.leerhinweis-gross {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--tinte-leise);
    margin-bottom: .4rem;
}

.punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.punkt-laeuft { background: var(--messing); animation: pulsieren 1.1s ease-in-out infinite; }
.punkt-fertig { background: var(--gut); }
.punkt-fehler { background: var(--fehler); }

@keyframes pulsieren { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.tippt::after {
    content: "▊";
    animation: blinken 1s step-end infinite;
    color: var(--tinte-still);
}

@keyframes blinken { 50% { opacity: 0; } }

@media (max-width: 1100px) {
}

@media (max-width: 760px) {
    .kopf-nav { display: none; }
    .kopfleiste { gap: .3rem; padding: 0 .5rem; }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: .8rem 1.25rem;
    background: var(--fehler-blass);
    color: var(--fehler);
    border-top: 1px solid #f0cccc;
    font-size: .88rem;
}

/* Einfaches Raster fuer die Verwaltungsseiten. */
.raster { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.raster-feld { flex: 1 1 12rem; min-width: 0; }

.seite { padding: 1.75rem; height: 100%; overflow-y: auto; }
.seite > .bahn > h1:first-child { margin-bottom: .3rem; }

.dokumentkopf { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.seitenblaetterung { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; }

hr { border: none; border-top: 1px solid var(--linie); margin: 1.75rem 0; }

/* =====================================================================
   Die Themen

   Vierzehn Wertesaetze — sieben helle, sieben dunkle. Sie tauschen Farben und
   nichts weiter: keine Abstaende, keine Schriftgroessen, keine Anordnung. Damit
   kann ein Thema die Oberflaeche nicht kaputtmachen.

   Was sie voneinander unterscheidet, ist die Arbeitsflaeche selbst und nicht
   mehr bloss die Seitenleiste. Die Vorgaenger lagen alle zwischen #f8f8f8 und
   #fdf8f0 — ein Unterschied von einem Prozent, den niemand sieht; unterschieden
   hat sie ein schmaler Streifen am linken Rand. Jetzt reicht die helle Reihe von
   reinweiss bis Kraftpapier und die dunkle von fast schwarz bis Mittelgrau, und
   jedes Thema hat einen eigenen Akzent statt siebenmal dasselbe Blau.

   Marine steht in :root und hat deshalb keinen eigenen Block — es ist das
   Standardthema und gilt, solange kein data-thema gesetzt ist.
   ===================================================================== */

/* Kontrast — hell. Reinweiß, tiefschwarze Schrift, kräftige Linien und ein sattes Blau im Verweis. Für schlechtes Licht, müde Augen und alle, denen jedes andere Thema zu weich ist.

   Flaeche L=1.000 C=0.000 H=250, Leiste L=0.175 H=250, Beleg H=248.
   Fliesstext 16.0:1 auf der gesenkten Flaeche. */
html[data-thema="kontrast"] {
    --tinte:           #121212;                           /* Fliesstext */
    --tinte-leise:     #3e3e3e;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #585858;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #ffffff;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #fafafa;                           /* der Seitengrund */
    --papier-kalt:     #ededed;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #9a9a9a;                           /* die ruhige Haarlinie */
    --linie-stark:     #757575;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #0d1115;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #54595f;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #ebedef;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #b5b8ba;                           /* Schrift auf der Seitenleiste */

    --beleg:           #005693;                           /* Verweise und Belege */
    --beleg-blass:     #e0effe;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #725401;
    --warnung:         #795000;
    --warnung-blass:   #fbead4;
    --fehler:          #a22c2d;
    --fehler-blass:    #fee6e4;
    --gut:             #1f6535;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(18, 18, 18, .04), 0 3px 8px rgba(18, 18, 18, .06), 0 10px 28px -6px rgba(18, 18, 18, .08);
    --schatten-hoch:   0 2px 4px rgba(18, 18, 18, .06), 0 12px 28px -4px rgba(18, 18, 18, .09), 0 32px 64px -12px rgba(18, 18, 18, .12);
}

/* Notariat — hell. Dunkles Flaschengrün auf Elfenbein — die klassischste der Varianten, und die einzige, in der auch der Beleg grün ist.

   Flaeche L=0.992 C=0.015 H=98, Leiste L=0.295 H=155, Beleg H=152.
   Fliesstext 13.1:1 auf der gesenkten Flaeche. */
html[data-thema="notariat"] {
    --tinte:           #25210e;                           /* Fliesstext */
    --tinte-leise:     #504c3a;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #696655;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #fffdf1;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #f6f3e8;                           /* der Seitengrund */
    --papier-kalt:     #ebe8d9;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #c9c5b4;                           /* die ruhige Haarlinie */
    --linie-stark:     #969280;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #0e351f;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #436e53;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #e3f1e7;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #b1c6b7;                           /* Schrift auf der Seitenleiste */

    --beleg:           #257342;                           /* Verweise und Belege */
    --beleg-blass:     #dcf4e1;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #7f6118;
    --warnung:         #8b5c00;
    --warnung-blass:   #fbead4;
    --fehler:          #b33c3a;
    --fehler-blass:    #fee6e4;
    --gut:             #2e7241;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(37, 33, 14, .04), 0 3px 8px rgba(37, 33, 14, .06), 0 10px 28px -6px rgba(37, 33, 14, .08);
    --schatten-hoch:   0 2px 4px rgba(37, 33, 14, .06), 0 12px 28px -4px rgba(37, 33, 14, .09), 0 32px 64px -12px rgba(37, 33, 14, .12);
}

/* Sandstein — hell. Kraftpapier auf Holz: deutlich getöntes warmes Papier, Braun in der Leiste, Messing im Verweis. Das wärmste der hellen Themen.

   Flaeche L=0.982 C=0.024 H=70, Leiste L=0.325 H=60, Beleg H=50.
   Fliesstext 13.0:1 auf der gesenkten Flaeche. */
html[data-thema="sandstein"] {
    --tinte:           #2b1600;                           /* Fliesstext */
    --tinte-leise:     #59432b;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #725d47;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #fff8f1;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #f9ebdd;                           /* der Seitengrund */
    --papier-kalt:     #efddca;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #cfbba5;                           /* die ruhige Haarlinie */
    --linie-stark:     #a28c74;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #4a2c12;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #7d593c;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #f7eae1;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #d7c4b5;                           /* Schrift auf der Seitenleiste */

    --beleg:           #9c4907;                           /* Verweise und Belege */
    --beleg-blass:     #fee8dc;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #7a5c10;
    --warnung:         #845700;
    --warnung-blass:   #fbead4;
    --fehler:          #ad3735;
    --fehler-blass:    #fee6e4;
    --gut:             #286d3c;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(43, 22, 0, .04), 0 3px 8px rgba(43, 22, 0, .06), 0 10px 28px -6px rgba(43, 22, 0, .08);
    --schatten-hoch:   0 2px 4px rgba(43, 22, 0, .06), 0 12px 28px -4px rgba(43, 22, 0, .09), 0 32px 64px -12px rgba(43, 22, 0, .12);
}

/* Bordeaux — hell. Gedecktes Weinrot auf gebrochenem Papier. Kräftig im ersten Eindruck, ruhig im Textbereich.

   Flaeche L=0.994 C=0.011 H=12, Leiste L=0.295 H=18, Beleg H=18.
   Fliesstext 13.0:1 auf der gesenkten Flaeche. */
html[data-thema="bordeaux"] {
    --tinte:           #2d1e20;                           /* Fliesstext */
    --tinte-leise:     #59484a;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #726264;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #fffcfc;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #fcf2f2;                           /* der Seitengrund */
    --papier-kalt:     #f3e5e6;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #d2c2c4;                           /* die ruhige Haarlinie */
    --linie-stark:     #9f8e90;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #50141b;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #9a5054;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #ffe6e6;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #d8b2b2;                           /* Schrift auf der Seitenleiste */

    --beleg:           #b13d49;                           /* Verweise und Belege */
    --beleg-blass:     #fee6e6;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #7f6118;
    --warnung:         #8b5c00;
    --warnung-blass:   #fbead4;
    --fehler:          #b43c3a;
    --fehler-blass:    #fee6e4;
    --gut:             #2f7341;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(45, 30, 32, .04), 0 3px 8px rgba(45, 30, 32, .06), 0 10px 28px -6px rgba(45, 30, 32, .08);
    --schatten-hoch:   0 2px 4px rgba(45, 30, 32, .06), 0 12px 28px -4px rgba(45, 30, 32, .09), 0 32px 64px -12px rgba(45, 30, 32, .12);
}

/* Schiefer — hell. Graphit und Grau, ganz ohne Farbton. Für alle, die außer dem Beleg keine Farbe in der Akte wollen.

   Flaeche L=0.996 C=0.000 H=250, Leiste L=0.285 H=250, Beleg H=240.
   Fliesstext 13.1:1 auf der gesenkten Flaeche. */
html[data-thema="schiefer"] {
    --tinte:           #202020;                           /* Fliesstext */
    --tinte-leise:     #4a4a4a;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #646464;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #fefefe;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #f2f2f2;                           /* der Seitengrund */
    --papier-kalt:     #e6e6e6;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #c3c3c3;                           /* die ruhige Haarlinie */
    --linie-stark:     #929292;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #272b2e;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #61656a;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #ebedef;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #babdbf;                           /* Schrift auf der Seitenleiste */

    --beleg:           #206a97;                           /* Verweise und Belege */
    --beleg-blass:     #ddf0fe;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #7e6017;
    --warnung:         #8a5b00;
    --warnung-blass:   #fbead4;
    --fehler:          #b23b3a;
    --fehler-blass:    #fee6e4;
    --gut:             #2d7140;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(32, 32, 32, .04), 0 3px 8px rgba(32, 32, 32, .06), 0 10px 28px -6px rgba(32, 32, 32, .08);
    --schatten-hoch:   0 2px 4px rgba(32, 32, 32, .06), 0 12px 28px -4px rgba(32, 32, 32, .09), 0 32px 64px -12px rgba(32, 32, 32, .12);
}

/* Bernstein — hell. Warmes Amber auf hellem Papier, der kräftigste Akzent aller hellen Themen. Für alle, die Farbe in der Akte wollen.

   Flaeche L=0.990 C=0.017 H=66, Leiste L=0.360 H=56, Beleg H=46.
   Fliesstext 13.1:1 auf der gesenkten Flaeche. */
html[data-thema="bernstein"] {
    --tinte:           #2b1b0b;                           /* Fliesstext */
    --tinte-leise:     #574737;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #706151;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #fefbf8;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #f9efe5;                           /* der Seitengrund */
    --papier-kalt:     #f0e2d5;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #cfbfb1;                           /* die ruhige Haarlinie */
    --linie-stark:     #9f8e7f;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #602d00;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #99500a;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #fee8d9;
    --hausschrift:     var(--marine);                     /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #f2ccb2;                           /* Schrift auf der Seitenleiste */

    --beleg:           #a84500;                           /* Verweise und Belege */
    --beleg-blass:     #ffe7dc;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #7d5f15;
    --warnung:         #885a00;
    --warnung-blass:   #fbead4;
    --fehler:          #b03a38;
    --fehler-blass:    #fee6e4;
    --gut:             #2c703f;
    --gut-blass:       #dff3e2;

    --schatten:        0 1px 1px rgba(43, 27, 11, .04), 0 3px 8px rgba(43, 27, 11, .06), 0 10px 28px -6px rgba(43, 27, 11, .08);
    --schatten-hoch:   0 2px 4px rgba(43, 27, 11, .06), 0 12px 28px -4px rgba(43, 27, 11, .09), 0 32px 64px -12px rgba(43, 27, 11, .12);
}

/* Tiefdruck — dunkel. Fast schwarze Arbeitsfläche, helle Schrift, kräftige Linien — das dunkle Gegenstück zu Kontrast. Die Leiste setzt sich hier nach oben ab und nicht nach unten: unterhalb dieser Fläche ist kein Platz mehr für sie.

   Flaeche L=0.185 C=0.004 H=250, Leiste L=0.285 H=250, Beleg H=230.
   Fliesstext 16.0:1 auf der gesenkten Flaeche. */
html[data-thema="tiefdruck"] {
    --tinte:           #fefefe;                           /* Fliesstext */
    --tinte-leise:     #bec2c6;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #9b9fa2;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #111314;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #070809;                           /* der Seitengrund */
    --papier-kalt:     #1f2124;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #595c60;                           /* die ruhige Haarlinie */
    --linie-stark:     #7b7f82;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #272a2e;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #9a9fa3;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #1f2022;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #d0d2d4;                           /* Schrift auf der Seitenleiste */

    --beleg:           #40b0de;                           /* Verweise und Belege */
    --beleg-blass:     #09242f;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #b99a55;
    --warnung:         #c99545;
    --warnung-blass:   #2a1e0d;
    --fehler:          #f67871;
    --fehler-blass:    #331715;
    --gut:             #69ae78;
    --gut-blass:       #152518;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* Abend — dunkel. Dunkles Blauschwarz für späte Stunden. Gedämpft statt hart — der Text bleibt der hellste Punkt der Oberfläche.

   Flaeche L=0.262 C=0.022 H=252, Leiste L=0.118 H=256, Beleg H=238.
   Fliesstext 12.8:1 auf der gesenkten Flaeche. */
html[data-thema="abend"] {
    --tinte:           #ffffff;                           /* Fliesstext */
    --tinte-leise:     #abc2db;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #8b9fb5;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #1d252f;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #121a24;                           /* der Seitengrund */
    --papier-kalt:     #273341;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #3a4a5b;                           /* die ruhige Haarlinie */
    --linie-stark:     #5e7185;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #010511;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #8e9eb3;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #303439;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #979ea7;                           /* Schrift auf der Seitenleiste */

    --beleg:           #5ba5d2;                           /* Verweise und Belege */
    --beleg-blass:     #243642;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #b99a55;
    --warnung:         #c99545;
    --warnung-blass:   #3e311f;
    --fehler:          #f47770;
    --fehler-blass:    #482a27;
    --gut:             #6aaf79;
    --gut-blass:       #28382b;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* Nachtgrün — dunkel. Das Notariat nach Feierabend: tiefes Flaschengrün statt Elfenbein, mit demselben ruhigen Grün im Beleg.

   Flaeche L=0.260 C=0.024 H=155, Leiste L=0.112 H=158, Beleg H=155.
   Fliesstext 12.7:1 auf der gesenkten Flaeche. */
html[data-thema="nachtgruen"] {
    --tinte:           #ffffff;                           /* Fliesstext */
    --tinte-leise:     #a7c9b2;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #88a591;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #1b281f;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #101c14;                           /* der Seitengrund */
    --papier-kalt:     #24372b;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #374e3e;                           /* die ruhige Haarlinie */
    --linie-stark:     #5a7663;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #000702;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #89a493;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #2e3531;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #94a098;                           /* Schrift auf der Seitenleiste */

    --beleg:           #67ac80;                           /* Verweise und Belege */
    --beleg-blass:     #26382c;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #b99a55;
    --warnung:         #c99444;
    --warnung-blass:   #3d301f;
    --fehler:          #f57870;
    --fehler-blass:    #482927;
    --gut:             #69ae78;
    --gut-blass:       #27382a;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* Graphit — dunkel. Mittlere Grautöne ohne jeden Farbstich. Für helle Räume, in denen tiefes Dunkel wie ein Loch im Bildschirm wirkt.

   Flaeche L=0.315 C=0.000 H=250, Leiste L=0.180 H=250, Beleg H=240.
   Fliesstext 10.4:1 auf der gesenkten Flaeche. */
html[data-thema="graphit"] {
    --tinte:           #ffffff;                           /* Fliesstext */
    --tinte-leise:     #d5d5d5;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #afafaf;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #313131;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #242424;                           /* der Seitengrund */
    --papier-kalt:     #404040;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #565656;                           /* die ruhige Haarlinie */
    --linie-stark:     #7b7b7b;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #121212;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #afafaf;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #414141;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #a4a4a4;                           /* Schrift auf der Seitenleiste */

    --beleg:           #7bb6df;                           /* Verweise und Belege */
    --beleg-blass:     #34434e;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #ccac67;
    --warnung:         #dca758;
    --warnung-blass:   #4c3f2c;
    --fehler:          #ff8f87;
    --fehler-blass:    #573734;
    --gut:             #7bc18a;
    --gut-blass:       #354638;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* Leinen — dunkel. Gedecktes Taupe statt Grau, mit Sandgold im Verweis — die warme Seite der dunklen Themen. Für alle, die den Bildschirm nicht kälter haben wollen als die Papierakte daneben.

   Flaeche L=0.348 C=0.018 H=66, Leiste L=0.218 H=60, Beleg H=74.
   Fliesstext 9.1:1 auf der gesenkten Flaeche. */
html[data-thema="leinen"] {
    --tinte:           #ffffff;                           /* Fliesstext */
    --tinte-leise:     #f3dec9;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #cab7a5;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #413830;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #332b23;                           /* der Seitengrund */
    --papier-kalt:     #52463b;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #6a5c4d;                           /* die ruhige Haarlinie */
    --linie-stark:     #928170;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #221810;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #c7b8ac;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #4d4946;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #b0a9a3;                           /* Schrift auf der Seitenleiste */

    --beleg:           #e0b375;                           /* Verweise und Belege */
    --beleg-blass:     #544838;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #d9b974;
    --warnung:         #e9b264;
    --warnung-blass:   #554735;
    --fehler:          #fea29b;
    --fehler-blass:    #61403d;
    --gut:             #88ce96;
    --gut-blass:       #3e4f41;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* Zinn — dunkel. Kühles Stahlgrau, eine Stufe heller als Graphit. Wer beide Extreme zu hart findet, ist hier richtig.

   Flaeche L=0.368 C=0.011 H=248, Leiste L=0.238 H=250, Beleg H=242.
   Fliesstext 8.4:1 auf der gesenkten Flaeche. */
html[data-thema="zinn"] {
    --tinte:           #ffffff;                           /* Fliesstext */
    --tinte-leise:     #dfecf8;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #b7c3ce;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #3b4045;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #2e3237;                           /* der Seitengrund */
    --papier-kalt:     #474e55;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #5b646d;                           /* die ruhige Haarlinie */
    --linie-stark:     #818c96;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #182027;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #b8c3ce;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #4d4f52;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #abb0b5;                           /* Schrift auf der Seitenleiste */

    --beleg:           #92c8f0;                           /* Verweise und Belege */
    --beleg-blass:     #43515c;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #e1c07b;
    --warnung:         #f2bb6c;
    --warnung-blass:   #5b4d3a;
    --fehler:          #ffaea6;
    --fehler-blass:    #674542;
    --gut:             #90d69e;
    --gut-blass:       #435446;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* Nebel — dunkel. Das hellste der dunklen Themen — heller als jedes Dunkel, dunkler als jedes Papier. Für Räume, in denen Dunkel wie ein Loch wirkt und Hell blendet.

   Flaeche L=0.405 C=0.009 H=245, Leiste L=0.278 H=245, Beleg H=235.
   Fliesstext 7.3:1 auf der gesenkten Flaeche. */
html[data-thema="nebel"] {
    --tinte:           #ffffff;                           /* Fliesstext */
    --tinte-leise:     #f6faff;                           /* Beschriftungen, Nebensaetze */
    --tinte-still:     #c7d0d9;                           /* die dritte Stufe: Zellenzusatz, Achsen, Fusszeilen */

    --papier:          #454a4e;                           /* Karten, Tabellen, Felder */
    --papier-warm:     #373c40;                           /* der Seitengrund */
    --papier-kalt:     #50575c;                           /* gesenkte Flaechen: Tabellenkopf, Filterzeile, Fuss */

    --linie:           #666d74;                           /* die ruhige Haarlinie */
    --linie-stark:     #8e98a0;                           /* Bedienelemente: Feldrand, Achsen, Kopflinien */

    --marine:          #22292f;                           /* die Seitenleiste — der erste Eindruck */
    --marine-hell:     #c7d0d9;                           /* die Hausfarbe, wo sie als Schrift oder Marke steht */
    --marine-blass:    #575a5c;
    --hausschrift:     var(--tinte);                      /* Ueberschriften und Kennzahlen */
    --leistenschrift:  #b5babd;                           /* Schrift auf der Seitenleiste */

    --beleg:           #a0d6f6;                           /* Verweise und Belege */
    --beleg-blass:     #4d5c65;
    --textmarker:      #ffe29a;                           /* liegt mit multiply auf dem Blatt, darum in jedem Thema warm */

    --messing:         #f1d08a;
    --warnung:         #ffcb81;
    --warnung-blass:   #655744;
    --fehler:          #fec3bd;
    --fehler-blass:    #714f4c;
    --gut:             #a0e6ae;
    --gut-blass:       #4d5f50;

    --schatten:        0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22), 0 10px 28px -6px rgba(0, 0, 0, .20);
    --schatten-hoch:   0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -4px rgba(0, 0, 0, .30), 0 32px 64px -12px rgba(0, 0, 0, .28);
}

/* --- Was fuer jedes dunkle Thema gilt ---

   Diese Regeln hingen frueher an data-thema="abend". Damit haette jedes weitere
   dunkle Thema dieselben Fehler geerbt — helle Flaechen mitten im dunklen Bild —,
   bis jemand sie einzeln nachzieht. Jetzt haengen sie an data-dunkel, das die
   Themenliste selbst setzt.

   Die Werte kommen aus den Themenvariablen und nicht mehr aus festen Farben:
   jedes dunkle Thema bringt seinen eigenen Warnton mit, und der passt besser als
   ein Olivton, der einmal fuer „Abend" gewaehlt wurde. */

/* Die Kopfleiste traegt hier keine Hausfarbe mehr, sondern ist die dunkelste
   Flaeche. Volle Helligkeit waere darauf hart; ihre Schrift zieht deshalb an. */
/* Auf sehr dunkler Leiste ist volle Helligkeit hart, deshalb die Daempfung. Sie
   steht als Themenwert und nicht fest: die hellen unter den dunklen Themen
   tragen eine Leiste im mittleren Ton, und dort nimmt dasselbe Daempfen dem Text
   den Kontrast, statt ihn angenehm zu machen. */
html[data-dunkel] .zug-antwort.vorlaeufig,
html[data-dunkel] .zug-antwort.unbelegt {
    background: var(--warnung-blass);
    border-color: var(--warnung);
}

html[data-dunkel] .zug-hinweis-unbelegt {
    background: var(--warnung-blass);
    border-color: var(--warnung);
}

html[data-dunkel] a.beleg:hover { background: var(--beleg-blass); }

/* Im Dunkeln faellt kaum Licht auf eine Kante — ein weisser Strich stuende dort
   als Linie und nicht als Glanz. Die Mulde dagegen braucht mehr, weil ein
   Schatten auf dunklem Grund sonst verschwindet. */
html[data-dunkel] {
    --glanz: inset 0 1px 0 rgba(255, 255, 255, .06);
    --mulde: inset 0 1px 3px rgba(0, 0, 0, .35);
}

/* Der Hauptknopf traegt im Dunkeln --marke mit --papier darauf, wie der
   Vorgangsknopf. Mit --marine waere er die dunkelste Flaeche auf dunklem
   Grund, und unter dem Zeiger stand weisse Schrift auf dem hellen
   --marine-hell — bei 1,6 bis 2,7:1, also nicht lesbar. --marke ist gegen die
   Flaeche gerechnet; aufgehellt wird zur Tinte hin, das hebt den Kontrast. */
html[data-dunkel] .knopf-haupt {
    color: var(--papier);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--marke) 88%, var(--tinte)),
        var(--marke));
    border-color: var(--marke);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 1px 2px rgba(0, 0, 0, .35),
        0 4px 12px -3px rgba(0, 0, 0, .45);
}

html[data-dunkel] .knopf-haupt:hover:not(:disabled) {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--marke) 72%, var(--tinte)),
        color-mix(in srgb, var(--marke) 88%, var(--tinte)));
    border-color: color-mix(in srgb, var(--marke) 80%, var(--tinte));
}

/* --------------------------------------------------------------- Kontrast

   Ein Regler um das Thema herum, in Stufen von -5 bis +5; App.razor setzt die
   Stufe als --kontrast am <html>-Element, die Einstellungsseite waehrend des
   Ziehens. Null ist das Thema, wie es gerechnet ist.

   Weicher nimmt nur Linien und Raender zurueck — zum Papier hin, je Stufe ein
   Zehntel. Die Schrift bleibt: ihre Kontraste sind Mindestwerte und kein
   Geschmack. Kraeftiger zieht Linien und die beiden leisen Textstufen zur Tinte
   hin; der Fliesstext steht ohnehin schon am oberen Ende.

   Die Ableitung steht am <body> und nicht am <html>: eine Variable, die sich auf
   sich selbst bezieht, ist ungueltig. Am <html> wird deshalb der Themenwert unter
   einem zweiten Namen festgehalten, und erst eine Ebene tiefer entsteht daraus der
   angepasste. Alles, was am <html> aus diesen Werten abgeleitet war, muss dort neu
   abgeleitet werden — --linie-weich. */
html {
    --linie-thema:       var(--linie);
    --linie-stark-thema: var(--linie-stark);
    --tinte-leise-thema: var(--tinte-leise);
    --tinte-still-thema: var(--tinte-still);
}

body {
    --kontrast-weicher:    calc(max(0, var(--kontrast, 0) * -1) * 10%);
    --kontrast-kraeftiger: calc(max(0, var(--kontrast, 0)) * 10%);

    --linie: color-mix(in oklab,
        color-mix(in oklab, var(--linie-thema), var(--papier) var(--kontrast-weicher)),
        var(--tinte) var(--kontrast-kraeftiger));
    --linie-stark: color-mix(in oklab,
        color-mix(in oklab, var(--linie-stark-thema), var(--papier) var(--kontrast-weicher)),
        var(--tinte) var(--kontrast-kraeftiger));
    --tinte-leise: color-mix(in oklab, var(--tinte-leise-thema), var(--tinte) var(--kontrast-kraeftiger));
    --tinte-still: color-mix(in oklab, var(--tinte-still-thema), var(--tinte) var(--kontrast-kraeftiger));

    --linie-weich: color-mix(in srgb, var(--linie) 50%, transparent);
}

/* ------------------------------------------------------- Themenauswahl

   Alle vierzehn auf einen Blick, ohne zu scrollen: sieben helle in einer Reihe,
   sieben dunkle in der naechsten. Die Beschreibung steht deshalb nicht mehr in
   jeder Karte, sondern einmal darunter, fuer das gewaehlte Thema — und als
   Hinweis beim Darueberfahren. */

.darstellung { margin: .9rem 0 2rem; }

.kontrastregler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: 1.1rem;
}

.kontrastregler .feld-titel { margin: 0 .35rem 0 0; }

.kontrastregler input[type=range] {
    flex: 0 1 16rem;
    accent-color: var(--marine-hell);
}

.kontrastregler output {
    min-width: 4.5rem;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-leise);
}

.kontrast-zurueck {
    padding: .1rem .2rem;
    font: inherit;
    font-size: .82rem;
    color: var(--beleg);
    background: none;
    border: 0;
    cursor: pointer;
}

.kontrast-zurueck:hover { text-decoration: underline; }
.kontrast-zurueck[hidden] { display: none; }

.themengruppe {
    min-width: 0;
    margin: 0 0 .75rem;
    padding: 0;
    border: 0;
}

.themengruppe legend {
    padding: 0;
    margin-bottom: .35rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinte-still);
}

.themenwahl {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .6rem;
}

@media (max-width: 62rem) {
    .themenwahl { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

.themenkarte {
    display: block;
    position: relative;
    padding: .4rem .4rem .45rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve), box-shadow var(--takt-kurz) var(--kurve);
}

.themenkarte:hover { border-color: var(--linie-stark); }

.themenkarte:has(input:checked) {
    border-color: var(--marine-hell);
    box-shadow: 0 0 0 2px var(--marine-blass);
}

.themenkarte:has(input:focus-visible) {
    outline: 2px solid var(--beleg);
    outline-offset: 2px;
}

/* Der Auswahlknopf bleibt bedienbar — mit Pfeiltasten und fuer Hilfsmittel —,
   ist aber nicht zu sehen: die Karte selbst ist die Schaltflaeche, und ihr Rand
   zeigt, was gewaehlt ist. */
.themenkarte input[type=radio] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.themenname {
    display: block;
    margin: .35rem .1rem 0;
    font-size: .84rem;
    font-weight: 600;
    color: var(--hausschrift);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.themenbeschreibung {
    min-height: 2.8em;
    margin: .2rem 0 0;
    font-size: .88rem;
    color: var(--tinte-leise);
}

.themenbeschreibung strong { color: var(--hausschrift); }

/* Eine kleine Nachbildung der Oberflaeche: Leiste, Flaeche, zwei Zeilen und
   ein Beleg. Das sagt mehr als drei Farbtupfer nebeneinander. */
.themenprobe {
    display: flex;
    height: 2.6rem;
    border: 1px solid var(--linie);
    border-radius: calc(var(--radius-klein) - 3px);
    overflow: hidden;
}

.themenprobe-leiste { width: 28%; }

.themenprobe-flaeche {
    flex: 1;
    padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.themenprobe-zeile {
    height: .35rem;
    width: 80%;
    border-radius: 2px;
    background: rgba(0, 0, 0, .16);
}

.themenprobe-zeile.kurz { width: 55%; }

.themenprobe-marke {
    height: .45rem;
    width: 1.6rem;
    border-radius: 2px;
    margin-top: .1rem;
}

/* --------------------------------------------------------- Aktenbibliothek */

/* Die Jahresaufstellung kann breiter werden als die Bahn. Sie darf scrollen,
   die Seite nicht. */
.tabellenrahmen { overflow-x: auto; margin-bottom: 1.25rem; }

.raster-tabelle td:first-child, .raster-tabelle th:first-child { white-space: nowrap; }

/* Eine Luecke ist kein Fehler, nur eine leere Stelle. Sie soll auffallen, ohne
   wie ein Mangel auszusehen — deshalb ein Punkt und kein rotes Feld. */
.raster-tabelle .luecke { color: var(--tinte-still); background: var(--papier-kalt); }

table.liste tr.zeile-warnung { background: var(--warnung-blass); }
table.liste tr.zeile-warnung td { color: var(--warnung); }
table.liste tr.zeile-warnung td:first-child { color: var(--tinte); }

/* Schalter fuer die Eingabetaste, unter dem Fragefeld — ein Icon-Knopf statt
   Kaestchen mit Beschriftung, die Erklaerung steht nur noch im Titel-Tooltip. */
.tastenschalter.aktiv { background: var(--marine-blass); color: var(--hausschrift); }
.tastenschalter.aktiv:hover:not(:disabled) { background: var(--marine-blass); color: var(--hausschrift); }

/* Der Umfangsschalter traegt dieselbe Sprache wie der Tastenschalter: beides sind
   Einstellungen dieses einen Menschen, und sie sollen als ein Paar erkennbar sein. */


/* Wohin der Upload geht — die Frage stellt sich sonst bei jedem Ablegen neu. */
.ablage-ziel { margin-bottom: .6rem; }

/* Eine Zeile mit Kaestchen und Erklaerung, etwa in den Einstellungen. */
.wahlzeile {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
}

.wahlzeile input { margin-top: .3rem; }
.wahlzeile strong { display: block; color: var(--hausschrift); }
.wahlzeile .still { display: block; margin-top: .15rem; }

/* Zeichen dienen der Einordnung, nicht der Aussage: sie stehen immer neben
   ihrer Beschriftung und treten hinter sie zurueck. */
.zeichen { flex: 0 0 auto; opacity: .72; }

/* --------------------------------------------------------- Tiefe Suche */

/* Der Knopf in der Gespraechsspalte. Er steht ueber dem Filterfeld und traegt Text,
   weil „Lupe allein" hier zweimal dasselbe waere — daneben steht schon eine. */
.tiefensuche-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin-bottom: .45rem;
}

/* Der Dialog selbst ist schmaler als der Mandantendialog und hoeher: eine
   Trefferliste liest man untereinander, und ein Auszug braucht Zeilenlaenge, nicht
   Flaeche. */
.tiefensuche {
    width: min(46rem, 100%);
    height: min(38rem, 100%);
}

/* Das Suchfeld traegt den Dialog: es ist gross, randlos und das erste, was den Fokus
   hat. Wer suchen will, tippt — und soll nicht erst ein Feld finden muessen. */
.tiefensuche-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--linie);
}

.tiefensuche-lupe { display: inline-flex; color: var(--tinte-still); }

.tiefensuche-feld {
    flex: 1 1 auto;
    min-width: 0;
    padding: .2rem 0;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--tinte);
    background: none;
    border: none;
}

.tiefensuche-feld:focus { outline: none; }

.tiefensuche-band {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .85rem;
    background: var(--papier-kalt);
    border-bottom: 1px solid var(--linie);
}

.tiefensuche-band .feld-schmal { width: auto; }

.tiefensuche-umfang {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    margin-left: auto;
    text-align: right;
}

.tiefensuche-liste {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .85rem;
}

/* Der Hinweis wechselt hier mit jedem Tastendruck — „noch ein Buchstabe",
   „wird gesucht", „nichts gefunden". Mit der Ankommen-Bewegung flackerte er
   beim Tippen; im Suchfeld steht er deshalb einfach da. */
.tiefensuche-liste .leerhinweis { animation: none; }

.tiefensuche-fuss {
    flex: 0 0 auto;
    padding: .5rem .85rem;
    border-top: 1px solid var(--linie);
    background: var(--papier-kalt);
}

/* Eine Karte je Gespraech, darin die Stellen. Gruppiert und nicht als flache Liste:
   dasselbe Gespraech traegt oft drei Treffer, und dreimal derselbe Titel liest sich
   wie drei Gespraeche. */
.fundkarte {
    margin-bottom: .8rem;
    padding: .6rem .7rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}

.fundkarte:last-child { margin-bottom: 0; }

.fundkarte-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .45rem;
}

.fundkarte-titel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 600;
    color: var(--hausschrift);
}

.fundkarte-kopf .still { margin-left: auto; white-space: nowrap; }

/* Eine Stelle ist ein Knopf, weil sie hinfuehrt. Zwei Zeilen hoch und dann
   abgeschnitten: der Auszug soll die Stelle erkennbar machen und nicht den Verlauf
   ersetzen. */
.trefferstelle {
    display: block;
    width: 100%;
    margin-bottom: .3rem;
    padding: .45rem .55rem;
    text-align: left;
    background: var(--papier-kalt);
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    color: var(--tinte-leise);
    font: inherit;
    font-size: .85rem;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve),
                background var(--takt-kurz) var(--kurve);
}

.trefferstelle:hover { border-color: var(--marine-hell); background: var(--marine-blass); }

.trefferstelle:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: 1px;
}

.trefferstelle-wer {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-right: .45rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinte-still);
    vertical-align: 1px;
}

.trefferstelle-curi { color: var(--beleg); }

.trefferstelle-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Das gesuchte Wort. Ein Textmarker und keine Farbe auf der Schrift: der Satz soll
   lesbar bleiben, die Stelle darin auffallen. */
.trefferstelle mark {
    padding: 0 .1em;
    background: var(--textmarker);
    color: var(--tinte);
    border-radius: 2px;
}

.fundkarte-mehr {
    padding: .2rem 0 0;
    background: none;
    border: none;
    color: var(--beleg);
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fundkarte-mehr:hover { color: var(--hausschrift); text-decoration-style: solid; }

/* Der Zug, den die Suche aufgeschlagen hat. Er bleibt markiert, solange das
   Gespraech offen ist: wer aus einer Trefferliste kommt, soll die Stelle nach dem
   ersten Scrollen wiederfinden. Ein Strich am Rand und ein Hauch Farbe an der
   Frage — nicht mehr, denn der Zug ist nicht wichtiger als die uebrigen, nur
   gesucht. */
.zug-gefunden { position: relative; }

.zug-gefunden::before {
    content: "";
    position: absolute;
    left: -.85rem;
    top: 0;
    bottom: .9rem;
    width: 3px;
    border-radius: 2px;
    background: var(--textmarker);
}

.zug-gefunden .zug-frage {
    box-shadow: 0 0 0 1px var(--marke-blass);
    animation: gefunden-an var(--takt-ruhig) var(--kurve);
}

@keyframes gefunden-an {
    from { box-shadow: 0 0 0 4px var(--textmarker); }
    to   { box-shadow: 0 0 0 1px var(--marke-blass); }
}

/* Das gesuchte Wort in der Nachricht selbst — derselbe Textmarker wie im Auszug
   der Trefferliste, damit man wiedererkennt, wonach man gesucht hat. verlauf.js
   setzt die Marken beim Sprung aus der Suche.

   Beim Erscheinen leuchtet er einmal auf: ein Ring, der sich zusammenzieht, zieht
   den Blick an die Stelle, nachdem das Rollen zum Stehen gekommen ist. Danach steht
   er still. Mit der naechsten Frage ist der Zug nicht mehr der gefundene, und der
   Marker verblasst — die Marke selbst bleibt als unsichtbare Huelle im Text. */
.suchmarke {
    padding: 0 .1em;
    border-radius: 2px;
    background: var(--textmarker);
    color: var(--tinte);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: suchmarke-auf .9s var(--kurve) .25s backwards;
    transition: background-color var(--takt-ruhig) var(--kurve), box-shadow var(--takt-ruhig) var(--kurve);
}

@keyframes suchmarke-auf {
    0%   { background: transparent; box-shadow: 0 0 0 0 transparent; }
    35%  { background: var(--textmarker); box-shadow: 0 0 0 5px color-mix(in srgb, var(--textmarker) 70%, transparent); }
    100% { background: var(--textmarker); box-shadow: 0 0 0 0 transparent; }
}

.zug:not(.zug-gefunden) .suchmarke {
    padding: 0;
    background: transparent;
    color: inherit;
    animation: none;
}

/* ------------------------------------------- Der laufende Vorgang in der Leiste */

/* Eine Frage laeuft an der Verbindung und nicht an der Seite. Damit kann der
   Anwender weiterarbeiten — und muss dann auch sehen, dass etwas laeuft, wo immer er
   gerade ist. Der Melder ist deshalb Teil der Kopfleiste und keiner Seite.

   Er ist ein Knopf und sieht wie einer aus: ein Klick fuehrt zur Frage. Eine Anzeige,
   die nur meldet, aber nicht hinfuehrt, waere an dieser Stelle eine Sackgasse. */
.kopf-lauf {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 17rem;
    margin-right: .4rem;
    padding: .3rem .6rem;
    overflow: hidden;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--tinte);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve),
                background var(--takt-kurz) var(--kurve);
    animation: melder-auf var(--takt) var(--kurve);
}

@keyframes melder-auf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.kopf-lauf:hover { border-color: var(--marine-hell); background: var(--marine-blass); }

.kopf-lauf:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: 1px;
}

.kopf-lauf-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
}

.kopf-lauf-lage {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 500;
    color: var(--hausschrift);
}

/* Mandant und verstrichene Zeit: die Zeit mit gleich breiten Ziffern, damit der
   Melder nicht bei jedem Sekundenschritt seine Breite aendert. */
.kopf-lauf-zeile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-still);
}

/* Der Stand als Strich am unteren Rand des Melders. Er kommt aus den Stufen des
   Laufs — also aus Geschehenem — und nicht aus einer geschaetzten Restzeit. */
.kopf-lauf-laeuft::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--laufstand, 5%);
    height: 2px;
    background: var(--beleg);
    transition: width var(--takt-ruhig) var(--kurve);
}

/* Fertig: der einzige Zustand, in dem der Melder etwas verlangt. Er traegt deshalb
   die Farbe des Belegs auf blasser Flaeche und einen ruhigen Puls — sichtbar, ohne zu
   blinken wie eine Warnung. */
.kopf-lauf-fertig {
    background: var(--beleg-blass);
    border-color: #bcd9e8;
    animation: melder-auf var(--takt) var(--kurve), melder-fertig 2.4s ease-in-out 3;
}

@keyframes melder-fertig {
    0%, 100% { box-shadow: 0 0 0 0 rgba(11, 95, 138, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(11, 95, 138, .12); }
}

.kopf-lauf-fehler {
    background: var(--fehler-blass);
    border-color: #e6c3c3;
}

.kopf-lauf-fehler .kopf-lauf-lage { color: var(--fehler); }

/* Auf schmalen Schirmen bleibt das Zeichen und der Stand; die zwei Zeilen Text
   fallen weg, bevor sie die Navigation daneben zerdruecken. */
@media (max-width: 900px) {
    .kopf-lauf { max-width: none; padding: .3rem .45rem; }
    .kopf-lauf-text { display: none; }
}

/* Der Weg zu einem Lauf, der in einem anderen Gespraech steht. Ein Satz mit einem
   Knopf darin und keine Schaltflaeche: er erklaert die Sperre am Fragefeld und ist
   nicht die Handlung, um die es auf dieser Seite geht. */
.zumlauf {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--beleg);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.zumlauf:hover { color: var(--hausschrift); text-decoration-style: solid; }


@media (max-width: 1100px) {
    .gespraech, .gespraech-schmal { grid-template-columns: 1fr; }
    .beistand, .beistand-streifen { display: none; }

    /* Fuer zwei Spalten ist hier kein Platz: die aufgeschlagene Fundstelle nimmt
       die Seite, das Gespraech kommt zurueck, sobald sie geschlossen wird. Vorher
       lag sie in der ausgeblendeten Beistandsspalte — ein Klick auf einen Beleg
       tat auf diesen Schirmen also sichtbar nichts. */
    .gespraech-fundstelle,
    .gespraech-schmal.gespraech-fundstelle { grid-template-columns: 1fr; }
    .gespraech-fundstelle .gespraech-spalte { display: none; }
    .schauspalte { border-left: none; }
}

/* ------------------------------------------------------------- Einstieg */

/* Das leere Gespraech ist die erste Seite, die ein Anwender am Morgen sieht.
   Sie soll sagen, an wessen Akte er sitzt, was darin liegt und womit sich
   anfangen laesst — in dieser Reihenfolge und in dieser Gewichtung. */
.einstieg { padding: 1.3rem 0 .5rem; }

.einstieg-kopf {
    text-align: center;
    margin-bottom: 1.15rem;
}

/* Das Logo bekommt Hoehe statt eines Quadrats: ein Firmenzeichen ist meist
   breiter als hoch, und in ein Quadrat gezwungen faellt es klein aus. Weisser
   Grund, weil ein Logo fuer weisses Papier gezeichnet ist — im Abendthema
   verschwaende es sonst. Ohne Rand: der Schatten traegt die Flaeche allein. */
.einstieg-logo {
    display: inline-block;
    padding: .5rem .85rem;
    margin-bottom: .6rem;
    background: #fff;
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
}

.einstieg-logo img {
    display: block;
    max-height: 3.4rem;
    max-width: min(16rem, 60vw);
    width: auto;
}

.einstieg-marke { margin-bottom: .6rem; }

.einstieg-name {
    margin: 0;
    font-size: 1.35rem;
}

.einstieg-kennzahlen {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .25rem 0 0;
    font-size: .8rem;
    color: var(--tinte-leise);
}

.einstieg-punkt { color: var(--linie-stark); }

/* Der erklaerende Satz bleibt schmal. Ueber die volle Breite eines
   Beratungsfensters gelesen, verliert man in der zweiten Zeile den Anfang. */
.einstieg-satz {
    max-width: 40rem;
    margin: .55rem auto 0;
    color: var(--tinte-leise);
    font-size: .86rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------- Vorschlaege */

/* Eine Flaeche, aus einem Guss: die drei Gruppen und die Rechtsprechung liegen
   darauf ohne eigenen Rahmen. Vorher war jede Gruppe eine Karte mit Kante und
   Schatten, jede Frage darin ein weiteres Kaestchen — vier Kaesten mit Kaesten
   darin lasen sich wie ein Formular. Getrennt wird jetzt durch Luft. */
.einstieg-flaeche {
    padding: 1rem 1.1rem 1.05rem;
    background: var(--papier);
    border: 1px solid color-mix(in srgb, var(--linie) 35%, transparent);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
}

/* Drei Spalten nebeneinander: was zuletzt kam, woran zuletzt gearbeitet wurde,
   und das Gesetz. Sie stehen gleichrangig — welche davon traegt, weiss nur
   der, der davorsitzt. */
.vorschlaege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .4rem 1.2rem;
}

.vorschlagskarte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vorschlagskarte-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .55rem;
    margin-bottom: .35rem;
}

/* Das Zeichen auf eigener Flaeche: es benennt die Herkunft der Gruppe und ist
   damit eine Marke und keine Zierde — auf blossem Papier las es sich wie ein
   verirrtes Aufzaehlungszeichen. Rund, wie alles auf dieser Flaeche. */
.vorschlagskarte-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.vorschlagskarte-titel {
    min-width: 0;
    font-family: var(--serif);
    font-size: .93rem;
    font-weight: 600;
    color: var(--hausschrift);
    line-height: 1.3;
}

.vorschlagskarte-liste {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.vorschlagskarte-leer {
    margin: 0;
    padding: .4rem .55rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--tinte-still);
}

/* Eine Frage ist eine Zeile auf der Flaeche und kein Kaestchen. Erst unter dem
   Zeiger bekommt sie Grund — dann weich getoent, nicht umrandet. */
.vorschlag {
    display: block;
    width: 100%;
    padding: .42rem .55rem;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--radius-klein);
    color: var(--tinte);
    font: inherit;
    font-size: .84rem;
    line-height: 1.38;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve),
                color var(--takt-kurz) var(--kurve);
}

.vorschlag-frage { display: block; }

/* Die Einordnung unter der Frage: Art, Jahr, Umfang — oder wie lang das
   Gespraech war. Klein und still, denn gelesen wird die Frage; das Beiwerk
   entscheidet nur, welche von dreien. */
.vorschlag-beiwerk {
    display: block;
    margin-top: .08rem;
    font-size: .7rem;
    color: var(--tinte-still);
}

.vorschlag:hover {
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.vorschlag:hover .vorschlag-beiwerk { color: var(--tinte-leise); }

.vorschlag:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: 1px;
}

.vorschlagsfuss { margin-top: .8rem; text-align: center; font-size: .78rem; }

/* ---------------------------------------------------------- Rechtsprechung */

/* Die Marke fuer das Gewicht einer Entscheidung. Drei Stufen, drei Toene: das
   amtlich veroeffentlichte BFH-Urteil satt, die NV-Entscheidung gedeckt, das
   Finanzgericht still. Gelesen wird die Stufe, bevor der Titel gelesen ist. */
.urteilsgewicht {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1.5;
}

.urteilsgewicht-v   { background: var(--hausschrift); color: var(--papier); }
.urteilsgewicht-bfh { background: var(--marine-blass); color: var(--hausschrift); }
.urteilsgewicht-nv  { background: var(--marine-blass); color: var(--hausschrift); box-shadow: inset 0 0 0 1px var(--marine-hell); }
.urteilsgewicht-fg  { background: var(--papier-kalt); color: var(--tinte-leise); box-shadow: inset 0 0 0 1px var(--linie); }

/* Das Band im Einstieg der Beratung: auf derselben Flaeche wie die Vorschlaege,
   abgesetzt nur durch eine Haarlinie, die zu den Seiten hin ausblendet — eine
   harte Kante quer ueber die Flaeche haette sie wieder in zwei Kaesten geteilt. */
.urteilsband {
    position: relative;
    margin-top: .85rem;
    padding-top: .85rem;
    animation: urteilsband-auf var(--takt-ruhig) var(--kurve);
}

.urteilsband::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--linie) 50%, transparent);
    opacity: .7;
}

@keyframes urteilsband-auf {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.urteilsband-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .55rem;
    margin-bottom: .35rem;
}

.urteilsband-kopf .vorschlagskarte-titel { flex: 1 1 auto; }

.urteilsband-alle {
    font-size: .76rem;
    color: var(--tinte-still);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--takt-kurz) var(--kurve);
}

.urteilsband-alle:hover { color: var(--hausschrift); text-decoration: underline; }

.urteilsband-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .1rem 1.2rem;
}

/* Wie eine Frage: eine Zeile auf der Flaeche, Grund erst unter dem Zeiger. */
.urteilskarte {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .45rem .55rem .5rem;
    border-radius: var(--radius-klein);
    transition: background var(--takt-kurz) var(--kurve);
}

.urteilskarte:hover { background: var(--marine-blass); }

.urteilskarte-kopf {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    font-size: .72rem;
}

.urteilskarte-az {
    font-weight: 600;
    color: var(--hausschrift);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.urteilskarte-tag {
    margin-left: auto;
    color: var(--tinte-still);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Zwei Zeilen Thema, dann Schluss: die Zeile soll sagen, worum es geht, nicht
   den Leitsatz ersetzen. Der ganze Titel steht im Hinweis. */
.urteilskarte-titel {
    margin: 0;
    flex: 1 1 auto;
    font-size: .83rem;
    line-height: 1.4;
    color: var(--tinte);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.urteilskarte-aktionen {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.urteilskarte-knopf {
    padding: .16rem .6rem;
    border: none;
    border-radius: 999px;
    background: var(--marine-blass);
    color: var(--hausschrift);
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve),
                color var(--takt-kurz) var(--kurve);
}

/* Auf getoentem Grund verschwaende der getoente Knopf; er hebt sich dann hell ab. */
.urteilskarte:hover .urteilskarte-knopf { background: var(--papier); }

.urteilskarte .urteilskarte-knopf:hover {
    background: var(--hausschrift);
    color: var(--papier);
}

.urteilskarte-knopf:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: 1px;
}

.urteilskarte-lesen {
    font-size: .72rem;
    color: var(--tinte-still);
    text-decoration: none;
}

.urteilskarte-lesen:hover { color: var(--hausschrift); text-decoration: underline; }

/* Rechtsquellenseite: die zuletzt veroeffentlichten Entscheidungen als Liste. */
.urteilsliste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.urteilszeile {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-klein);
    color: inherit;
    text-decoration: none;
    transition: background var(--takt-kurz) var(--kurve);
}

.urteilszeile:hover { background: var(--marine-blass); }

.urteilszeile .urteilsgewicht { margin-top: .12rem; }

.urteilszeile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .86rem;
    line-height: 1.4;
}

.urteilszeile-text strong { color: var(--hausschrift); font-weight: 600; }

.urteilszeile-text .leise {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.urteilsgerichte { margin: .5rem 0 1.5rem; }

.urteilsgerichte > summary {
    cursor: pointer;
    font-size: .86rem;
    color: var(--tinte-leise);
    margin-bottom: .5rem;
}

/* Urteilsansicht: Gewicht und Kopfdaten ueber dem Text. */
.urteilskopf {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: -.2rem 0 .8rem;
}

.urteilskopf .urteilsgewicht { font-size: .74rem; padding: .15rem .55rem; }

.urteilskopf-gewicht { font-size: .86rem; color: var(--tinte-leise); }

.urteilsdaten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem 1.1rem;
    margin: 0 0 1.2rem;
    padding: .8rem 1rem;
    background: var(--papier-kalt);
    border-radius: var(--radius-klein);
    font-size: .84rem;
}

.urteilsdaten dt { color: var(--tinte-still); }

.urteilsdaten dd { margin: 0; color: var(--tinte); overflow-wrap: anywhere; }

.urteilsteil {
    margin: 1.6rem 0 .6rem;
    padding-bottom: .3rem;
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--hausschrift);
    border-bottom: 1px solid var(--linie);
}

.urteilsteil:first-child { margin-top: .2rem; }

/* ---------------------------------------------------------- Folgefragen */

/* Unter einer geprueften Antwort: was sich daraus weiter fragen laesst. Innerhalb
   der Antwortblase und durch eine gestrichelte Linie abgesetzt — es gehoert zu
   dieser Antwort, ist aber nicht Teil von ihr und traegt keine Belege.

   Untereinander und nicht als Kacheln nebeneinander: eine Frage ist ein Satz, und
   Saetze liest man in Zeilen. */
.folgefragen {
    margin-top: 1.1rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--linie-stark);
    animation: folgefragen-auf var(--takt-ruhig) var(--kurve);
}

@keyframes folgefragen-auf {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.folgefragen-titel {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinte-still);
}

/* Solange gesucht wird, steht hier eine Zeile mit denselben Punkten wie in der
   Denkspur. Ein Platz, der leer bleibt und dann etwas dazuschiebt, laesst den
   Text darunter springen; so ist der Platz von Anfang an belegt. */
.folgefragen-laedt {
    display: flex;
    align-items: center;
    gap: .1rem;
    font-size: .84rem;
}

/* Der Knopf traegt das Sendezeichen des Fragefelds: er schickt unmittelbar ab,
   und das soll man ihm ansehen, bevor man ihn drueckt. Das Zeichen steht rechts
   und tritt zurueck, bis der Zeiger darauf liegt. */
.folgefrage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    width: 100%;
    margin-bottom: .4rem;
    padding: .6rem .75rem;
    text-align: left;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    color: var(--tinte);
    font: inherit;
    font-size: .87rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve),
                background var(--takt-kurz) var(--kurve),
                transform var(--takt-kurz) var(--kurve);
}

.folgefrage .zeichen { opacity: .4; transition: opacity var(--takt-kurz) var(--kurve); }

.folgefrage:hover {
    border-color: var(--marine-hell);
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.folgefrage:hover .zeichen { opacity: .9; }

/* Ein kurzes Nachgeben unter dem Finger — die einzige Rueckmeldung, die ein Knopf
   braucht, der sofort etwas ausloest. */
.folgefrage:active { transform: translateY(1px); }

.folgefrage:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: 1px;
}

.folgefrage-text { min-width: 0; }

.folgefragen-fuss { margin: .55rem 0 0; }

/* Die belegte Stelle. Ein Rand statt einer Flaeche: der Text soll lesbar
   bleiben, die Markierung ihn nicht einfaerben. */
/* ------------------------------------------------- Akteneinsicht als Blatt */

/* Der Schreibtisch, auf dem das Blatt liegt. Er ist immer etwas dunkler als das
   Blatt — daher sieht man ueberhaupt, dass da ein Blatt liegt. */
.blattbuehne {
    padding: 1.5rem 0 2rem;
    background: var(--papier-kalt);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
}

/* Das Blatt selbst: weiss, mit Schatten, in der Breite eines Satzspiegels und
   nicht in der des Fensters. Ueber etwa 90 Zeichen je Zeile verliert das Auge
   den Zeilenanfang — genau deshalb ist Papier so breit, wie es ist. */
.blatt {
    width: min(48rem, 100%);
    background: #fff;
    color: #1e1e1e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .10);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 3.25rem 3.75rem 2.25rem;
}

.blatt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .6rem;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    font-size: .72rem;
    color: #6b6b6b;
    letter-spacing: .02em;
}

.blatt-datei { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.blatt-seite { white-space: nowrap; }

/* Der Satz: Serifen, ruhige Zeilen, gebrochene Silben. Der ausgelesene Text
   traegt seine eigenen Umbrueche — pre-wrap haelt sie und bricht trotzdem lange
   Zeilen um. */
.blatt-satz {
    font-family: var(--serif);
    font-size: .95rem;
    line-height: 1.75;
    white-space: pre-wrap;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Abschnitte fliessen ineinander wie Absaetze. Ihre Grenzen sind fuer die Suche
   da und nicht fuer das Auge. */
.blatt-satz .textstelle { margin: 0 0 1.05em; }

.blatt-satz .textstelle:last-child { margin-bottom: 0; }

/* Die belegte Stelle bekommt einen Textmarker und keinen Kasten: so markiert
   man in einer Akte, und so bleibt der Text ein Text. Der Streifen am Rand
   findet die Stelle wieder, wenn die Seite lang ist. */
.blatt-satz .belegte-stelle {
    background: linear-gradient(transparent 6%, var(--beleg-blass) 6%, var(--beleg-blass) 94%, transparent 94%);
    box-shadow: -1.15rem 0 0 -.95rem var(--beleg);
    border-radius: 2px;
}

.blatt-fuss {
    margin-top: 2.25rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
    font-size: .7rem;
    color: #8a8a8a;
}

@media (max-width: 720px) {
    .blattbuehne { padding: .75rem 0 1rem; }
    .blatt { padding: 1.5rem 1.25rem 1.25rem; }
}

/* --- Die Seitenschau: das Blatt selbst --- */

.schau { width: min(48rem, 100%); margin: 0; }

.schau-laedt { text-align: center; padding: 2rem 0; }

/* Der Rahmen kennt sein Seitenverhaeltnis, bevor das Bild da ist — sonst springt
   der Inhalt beim Laden nach unten weg. Die Markierungen liegen darin absolut,
   in Anteilen der Kantenlaengen; damit sitzen sie in jeder Groesse richtig. */
.blattrahmen {
    position: relative;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .10);
    border: 1px solid rgba(0, 0, 0, .08);
    overflow: hidden;
}

.blattrahmen img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Solange das Blatt unterwegs ist, steht der Rahmen schon in seiner endgueltigen
   Groesse da und traegt eine ruhige Flaeche. Ohne sie saehe man den weissen Kasten
   und wuesste nicht, ob da noch etwas kommt. */
.blattrahmen-laedt { background: var(--papier-kalt); }

.blattlader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--tinte-still);
    font-size: .8rem;
}

/* Die Rueckmeldung, waehrend Akte und Seite gelesen werden — noch bevor es ein
   Blatt gibt, dessen Groesse man kennt. */
.fundstellenlader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: var(--tinte-still);
    font-size: .82rem;
}

/* Ein Textmarker, wie man ihn auf Papier benutzt: Gelb, deckend genug, um die
   Zeile zu finden, durchscheinend genug, um sie zu lesen.

   multiply ist hier der ganze Trick — die Farbe wird mit dem Blatt multipliziert,
   nicht darauf gelegt. Weisses Papier nimmt das Gelb an, schwarze Schrift bleibt
   schwarz. Ein deckendes Rechteck waere die eine Markierung, die genau das
   verbirgt, was sie zeigen soll; und das blasse Blau von vorher war auf einer
   Textzeile schlicht nicht zu erkennen.

   Kein outline mehr: der Rahmen lag auf der ersten und letzten Zeile eines
   Absatzes wie ein Kasten und hat den Textmarker als Kasten aussehen lassen. Wo
   die Markierung anfaengt und aufhoert, sagt die Farbe deutlich genug. */
.fundstelle {
    position: absolute;
    background: var(--textmarker);
    mix-blend-mode: multiply;
    border-radius: 1px;
    pointer-events: none;
}

.schau-fuss {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .6rem;
    font-size: .72rem;
    color: var(--tinte-still);
}

.schau-belegt { color: var(--beleg); font-weight: 600; }

/* --- Die Seitenschau: Wiedergabe statt Abbild --- */

.wiedergabe-hinweis {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .9rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-klein);
    background: var(--warnung-blass);
    color: var(--warnung);
    font-size: .78rem;
    line-height: 1.5;
}

.wiedergabe-hinweis svg { flex: 0 0 auto; margin-top: .15rem; }

/* Innerhalb des Blattes gilt pre-wrap fuer den Fliesstext. Tabelle und
   Nachrichtenkopf sind dagegen gesetzte Elemente und muessen sich davon
   ausdruecklich befreien — sonst traegt jede Zelle die Umbrueche der Quellzeile. */
.wiedergabe-titel {
    font-family: var(--serif);
    font-size: 1.02rem;
    margin: 1.4em 0 .6em;
    white-space: normal;
}

.wiedergabe-titel:first-child { margin-top: 0; }

.wiedergabe-tabelle {
    overflow-x: auto;
    margin: .5em 0 1em;
    white-space: normal;
}

.wiedergabe-tabelle table { font-family: var(--grotesk); font-size: .78rem; }

.wiedergabe-tabelle td, .wiedergabe-tabelle th { white-space: nowrap; }

.wiedergabe-nachricht {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15em .8em;
    margin: 0 0 1.2em;
    font-family: var(--grotesk);
    font-size: .82rem;
    white-space: normal;
}

.wiedergabe-nachricht dt { color: var(--tinte-still); }
.wiedergabe-nachricht dd { margin: 0; }

/* ------------------------------------------------------- Eingabe (neu) */

/* Feld und Werkzeuge in einem Rahmen: das Ganze soll wie ein Bogen wirken, auf
   dem man schreibt, nicht wie ein Formular mit Schaltflaechen daneben. */
.eingabefeld {
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-gross);
    box-shadow: var(--glanz), var(--schatten);
    overflow: hidden;
    transition: border-color var(--takt) var(--kurve), box-shadow var(--takt) var(--kurve);
}

/* Beim Schreiben hebt sich der Bogen ein wenig an: der Ort der Arbeit ist die
   hoechste Flaeche auf dem Tisch. */
.eingabefeld:focus-within {
    border-color: var(--marine-hell);
    box-shadow: var(--glanz), var(--schatten-hoch), var(--ring);
}

/* Solange das Anlagenmenue offen ist, gibt der Rahmen den Blick frei.

   Das Menue klappt nach oben aus dem Feld heraus — und wurde an dessen Oberkante
   abgeschnitten. Von aussen sah es aus, als laege der Verlauf darueber; es war aber
   kein z-index-Streit, sondern ein Zuschnitt: bei „overflow: hidden" hilft kein
   z-index, das Kind endet an der Kante.

   Deshalb die Ausnahme und nicht das Weglassen: das Abschneiden hat einen Zweck. Der
   Lichtstrich beim Arbeiten laeuft ueber die obere Kante und soll in den runden Ecken
   bleiben. Beides zugleich tritt nie ein — waehrend gearbeitet wird, ist der
   Anhaengeknopf gesperrt, das Menue also zu. */
.eingabefeld-offen { overflow: visible; }

/* Solange gearbeitet wird, laeuft ein schmaler Lichtstrich ueber die obere Kante
   des Fragefelds. Er sagt dasselbe wie die gestrichelte Linie — gesperrt, es
   laeuft —, nur sieht man ihn auch dann, wenn der Verlauf weiter oben steht und
   die Denkspur ausserhalb des Bildes liegt.

   Am Fragefeld und nicht als Balken quer ueber die Seite: der Ort, an dem der
   Anwender gerade war, ist der Ort, an dem die Rueckmeldung stehen muss. Der
   Rahmen schneidet ihn ab (overflow: hidden am Feld), er bleibt also in den
   runden Ecken. */
.eingabefeld.laeuft { position: relative; border-style: dashed; }

.eingabefeld.laeuft::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--beleg), transparent);
    background-size: 38% 100%;
    background-repeat: no-repeat;
    animation: eingabestrich 1.7s linear infinite;
}

@keyframes eingabestrich {
    from { background-position: -38% 0; }
    to   { background-position: 138% 0; }
}

/* Ohne Bewegung eine ruhige Kante in derselben Farbe: die Aussage bleibt. */
@media (prefers-reduced-motion: reduce) {
    .eingabefeld.laeuft::before { background: var(--beleg-blass); animation: none; }
}

.eingabefeld textarea {
    display: block;
    width: 100%;
    padding: .7rem .85rem .3rem;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--tinte);
    background: none;
    border: none;
    resize: vertical;
    min-height: 3.2rem;
}

.eingabefeld textarea:focus { outline: none; }

.eingabefeld-fuss {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .45rem .45rem;
}

/* ------------------------------------------------------------ Einsprechen

   Drei Signale, die zusammen sagen: es wird zugehoert. Der Knopf wird rot und
   sendet Ringe aus wie ein Aufnahmelicht; das Feld leuchtet sacht im selben Ton;
   und zwischen Text und Fuss erscheint eine Zeile mit Uhr und Pegel, der dem
   eigenen Sprechen folgt. Der Pegel ist das, was Vertrauen schafft — man sieht,
   dass die Stimme ankommt, bevor der erste Text erscheint. */

.sprachknopf { position: relative; }

.sprachknopf.hoert,
.sprachknopf.hoert:hover:not(:disabled) {
    background: var(--fehler);
    color: #fff;
}

/* Zwei Ringe im Versatz: einer allein wirkt wie ein Blinken, zwei wie ein Puls. */
.sprachknopf.hoert::before,
.sprachknopf.hoert::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--fehler);
    animation: sprachring 1.6s cubic-bezier(.2, .6, .35, 1) infinite;
    pointer-events: none;
}

.sprachknopf.hoert::after { animation-delay: .8s; }

@keyframes sprachring {
    from { transform: scale(1); opacity: .55; }
    to   { transform: scale(1.9); opacity: 0; }
}

.sprachknopf.schreibt { color: var(--beleg); }

/* Das Feld atmet im Ton der Aufnahme, solange zugehoert wird. */
.eingabefeld.hoert {
    /* Frei, damit die Ringe des Knopfes nicht am Rand des Feldes abbrechen. */
    overflow: visible;
    border-color: color-mix(in srgb, var(--fehler) 55%, var(--linie-stark));
    animation: sprachatem 2.4s ease-in-out infinite;
}

@keyframes sprachatem {
    0%, 100% { box-shadow: var(--glanz), var(--schatten), 0 0 0 0 color-mix(in srgb, var(--fehler) 0%, transparent); }
    50%      { box-shadow: var(--glanz), var(--schatten-hoch), 0 0 0 4px color-mix(in srgb, var(--fehler) 14%, transparent); }
}

/* Die Pegelzeile: unsichtbar, bis die Aufnahme beginnt. */
.sprachpegel {
    display: none;
    align-items: center;
    gap: .55rem;
    margin: 0 .55rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fehler) 7%, var(--papier));
    font-size: .76rem;
    color: var(--tinte-leise);
    --pegel: 0;
}

.eingabefeld.hoert .sprachpegel,
.eingabefeld.schreibt .sprachpegel {
    display: flex;
    animation: sprachpegel-auf var(--takt-kurz, .15s) ease-out;
}

@keyframes sprachpegel-auf {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

/* Der Aufnahmepunkt: rot, mit einem Hof, der mit der Lautstaerke waechst. */
.sprachpegel-punkt {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--fehler);
    box-shadow: 0 0 0 calc(var(--pegel) * 7px) color-mix(in srgb, var(--fehler) 28%, transparent);
    transition: box-shadow 80ms linear;
}

.sprachpegel-zeit {
    flex: 0 0 auto;
    min-width: 2.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tinte);
}

.sprachpegel-balkenreihe {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 1.1rem;
}

/* Die Balken zeichnet sprache.js ueber transform — die guenstigste Eigenschaft, die
   ein Browser sechzig Mal in der Sekunde aendern kann. */
.sprachpegel-balken {
    display: block;
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to top, var(--fehler), color-mix(in srgb, var(--fehler) 55%, var(--beleg)));
    transform: scaleY(.14);
    transform-origin: center;
    transition: transform 70ms linear;
}

.sprachpegel-text { flex: 1 1 auto; color: var(--tinte-still); }

.sprachpegel-verwerfen {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tinte-still);
    cursor: pointer;
}

.sprachpegel-verwerfen:hover { background: var(--fehler-blass); color: var(--fehler); }

/* Nach dem Stoppen: der Punkt wird blau, die Balken laufen als Welle — Curi
   schreibt die letzte Fassung, die Stimme ist nicht mehr gefragt. */
.eingabefeld.schreibt .sprachpegel { background: var(--beleg-blass); }

.eingabefeld.schreibt .sprachpegel-punkt { background: var(--beleg); box-shadow: none; }

.eingabefeld.schreibt .sprachpegel-balken {
    background: var(--beleg);
    animation: sprachwelle 1s ease-in-out infinite;
}

.eingabefeld.schreibt .sprachpegel-balken:nth-child(2) { animation-delay: .1s; }
.eingabefeld.schreibt .sprachpegel-balken:nth-child(3) { animation-delay: .2s; }
.eingabefeld.schreibt .sprachpegel-balken:nth-child(4) { animation-delay: .3s; }
.eingabefeld.schreibt .sprachpegel-balken:nth-child(5) { animation-delay: .4s; }
.eingabefeld.schreibt .sprachpegel-balken:nth-child(6) { animation-delay: .5s; }
.eingabefeld.schreibt .sprachpegel-balken:nth-child(7) { animation-delay: .6s; }

.eingabefeld.schreibt .sprachpegel-verwerfen { visibility: hidden; }

@keyframes sprachwelle {
    0%, 100% { transform: scaleY(.18); }
    50%      { transform: scaleY(.8); }
}

.sprachmeldung {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .45rem 0 0;
    font-size: .78rem;
    color: var(--fehler);
}

@media (prefers-reduced-motion: reduce) {
    .sprachknopf.hoert::before,
    .sprachknopf.hoert::after,
    .eingabefeld.hoert,
    .eingabefeld.schreibt .sprachpegel-balken { animation: none; }

    .sprachpegel-balken,
    .sprachpegel-punkt { transition: none; }
}

/* --- Die Leiste unter dem Fragefeld ---

   Zwei Gruppen. Links, was das Gespraech betrifft und was man der Frage mitgibt:
   Privat oder Kanzlei, dann Anhang, Erwaehnung und Kurzhilfe. Rechts, was zum
   Abschicken gehoert: die Eingabetaste, das Mikrofon und der Pfeil. Der
   Zwischenraum entsteht am Tastenschalter, dem ersten der rechten Gruppe.

   Die Knoepfe sind rund und federn beim Druecken ein wenig nach — eine Leiste aus
   eckigen Flaechen sah aus wie eine Werkzeugleiste aus einem Formular, und hier wird
   gesprochen und gefragt. */
.eingabefeld-fuss { gap: .2rem; padding: .35rem .5rem .5rem; }

.eingabefeld-fuss .feldknopf {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve),
        border-color var(--takt-kurz) var(--kurve), box-shadow var(--takt-kurz) var(--kurve),
        transform var(--takt-kurz) var(--kurve);
}

.eingabefeld-fuss .feldknopf:active:not(:disabled) { transform: scale(.92); }

/* Privat oder Kanzlei als Marke mit Rand: sie ist eine Angabe, die man lesen soll,
   und kein Werkzeug wie die Zeichen daneben. Geteilt traegt sie die Farbe der Belege. */
.eingabefeld-fuss .sichtbarkeitsschalter {
    width: auto;
    height: 1.85rem;
    padding: 0 .75rem 0 .6rem;
    gap: .35rem;
    border: 1px solid var(--linie-stark);
    background: var(--papier);
    color: var(--tinte-leise);
    font-size: .76rem;
    font-weight: 500;
}

.eingabefeld-fuss .sichtbarkeitsschalter:hover:not(:disabled) { border-color: var(--marine-hell); }

.eingabefeld-fuss .sichtbarkeitsschalter.aktiv {
    border-color: color-mix(in srgb, var(--beleg) 35%, transparent);
}

/* Der feine Strich zwischen der Marke und den Werkzeugen. */
.feldtrenner {
    flex: 0 0 auto;
    width: 1px;
    height: 1.15rem;
    margin: 0 .35rem;
    background: var(--linie-stark);
}

.eingabefeld-fuss .tastenschalter { margin-left: auto; }

/* Das Mikrofon neben dem Pfeil, mit Rand: es ist der zweite Weg, eine Frage zu
   stellen, und steht deshalb sichtbar neben dem ersten. */
.eingabefeld-fuss .sprachknopf { border: 1px solid var(--linie-stark); color: var(--tinte-leise); }
.eingabefeld-fuss .sprachknopf:hover:not(:disabled) { border-color: var(--marine-hell); }
.eingabefeld-fuss .sprachknopf.hoert { border-color: var(--fehler); color: #fff; }
.eingabefeld-fuss .sprachknopf.schreibt { color: var(--beleg); }

/* Der Pfeil: groesser, gefuellt und mit einem Schatten in seiner eigenen Farbe —
   er ist das Ziel der ganzen Zeile. */
.eingabefeld-fuss .feldknopf-senden,
.eingabefeld-fuss .feldknopf-abbruch {
    width: 2.25rem;
    height: 2.25rem;
    margin-left: .2rem;
}

.eingabefeld-fuss .feldknopf-senden {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px color-mix(in srgb, var(--marine) 30%, transparent);
}

.eingabefeld-fuss .feldknopf-senden:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 5px 12px color-mix(in srgb, var(--marine) 38%, transparent);
}

.eingabefeld-fuss .feldknopf-senden:disabled { box-shadow: none; }

.eingabefeld-fuss .feldknopf-abbruch { border: 1px solid color-mix(in srgb, var(--fehler) 35%, transparent); }

.feldknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    color: var(--tinte-still);
    cursor: pointer;
}

.feldknopf:hover:not(:disabled) { background: var(--papier-kalt); color: var(--hausschrift); }
.feldknopf:disabled { opacity: .4; cursor: default; }

.feldknopf:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: -2px;
}

/* Der Sendeknopf ist der einzige gefuellte in dieser Zeile — er ist das Ziel. */
.feldknopf-senden {
    background: var(--marine);
    color: #fff;
}

.feldknopf-senden:hover:not(:disabled) { background: var(--marine-hell); color: #fff; }
.feldknopf-senden:disabled { background: var(--linie-stark); color: var(--papier); opacity: 1; }

.feldknopf-abbruch { color: var(--fehler); }
.feldknopf-abbruch:hover { background: var(--fehler-blass); color: var(--fehler); }

.feldhilfe {
    margin-top: .5rem;
    padding: .7rem .85rem;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--tinte-leise);
}

.feldhilfe div { margin-bottom: .2rem; }
.feldhilfe strong { color: var(--hausschrift); font-family: var(--mono); }
.feldhilfe .still { margin-top: .4rem; }

/* Die Vorschlagsliste zu „@". */
.erwaehnungsliste {
    margin-bottom: .4rem;
    padding: .3rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    max-height: 13rem;
    overflow-y: auto;
}

.erwaehnung {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    width: 100%;
    padding: .35rem .5rem;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    color: var(--tinte);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.erwaehnung:hover { background: var(--marine-blass); color: var(--hausschrift); }

/* Der mit der Tastatur gewaehlte Eintrag. Ist keiner gewaehlt, gilt der erste — so
   zeigt die Liste schon beim Oeffnen, was die Eingabetaste nehmen wuerde. Kraeftiger
   als das Ueberfahren mit der Maus, damit beides zugleich nicht verwechselt wird. */
.erwaehnung.erwaehnung-aktiv,
.erwaehnungsliste:not(:has(.erwaehnung-aktiv)) .erwaehnung:first-child {
    background: var(--marine-blass);
    color: var(--hausschrift);
    box-shadow: inset 3px 0 0 var(--marine);
}

.erwaehnung-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------ Denkspur */

.denkspur {
    margin-bottom: .8rem;
    padding: .7rem .85rem;
    background: var(--papier-kalt);
    border-radius: var(--radius-klein);
    font-size: .84rem;
    color: var(--tinte-leise);
}

.denkspur-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .5rem;
}

.denkspur-lage {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    color: var(--hausschrift);
    font-weight: 500;
}

/* Drei Punkte, die der Reihe nach aufgehen. Der Lagebericht daneben wechselt nur
   bei einem Ereignis und steht zwischen zwei Suchlaeufen auch eine Minute still —
   dann sagen die Punkte, dass gearbeitet wird. Sie behaupten nichts ueber den
   Fortschritt; das tun die Stufen darunter.

   Klein, blass und langsam: eine Kanzleioberflaeche wird den ganzen Tag bedient,
   und ein hektisches Blinken neben jedem Austausch waere am Nachmittag unertraeglich. */
.denkpunkte {
    display: inline-flex;
    align-items: center;
    gap: .17rem;
    margin-right: .45rem;
}

.denkpunkte > span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--beleg);
    animation: denkpunkt 1.3s ease-in-out infinite;
}

.denkpunkte > span:nth-child(2) { animation-delay: .18s; }
.denkpunkte > span:nth-child(3) { animation-delay: .36s; }

@keyframes denkpunkt {
    0%, 100% { opacity: .22; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
}

/* Ohne Bewegung stehen drei ruhige Punkte da. Sie sagen dasselbe, nur leiser. */
@media (prefers-reduced-motion: reduce) {
    .denkpunkte > span { animation: none; opacity: .55; }
}

/* Fünf Stufen statt eines Balkens mit Prozentzahl: die Prozentzahl waere
   geraten, die Stufen sind geschehen. Die laufende schimmert — das ist die
   einzige Stelle, an der die Oberflaeche etwas verspricht, das sie halten
   kann: dass gerade gearbeitet wird. */
.stufen {
    display: flex;
    gap: .2rem;
    margin-bottom: .6rem;
}

.stufe {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--linie-stark);
}

.stufe.erreicht { background: var(--beleg); }

.stufe.laeuft {
    background: linear-gradient(
        90deg,
        var(--linie-stark) 0%,
        var(--beleg) 50%,
        var(--linie-stark) 100%);
    background-size: 300% 100%;
    animation: stufe-schimmer 1.4s ease-in-out infinite;
}

@keyframes stufe-schimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stufe.laeuft { animation: none; background: var(--beleg-blass); }
}

.denkschritt {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .15rem;
}

/* Wonach gesucht wird. In Anfuehrungszeichen und in der Schrift des Hauses: es ist
   ein Zitat aus dem Aufruf des Modells und keine Aussage der Anwendung. */
.denkschritt-gegenstand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tinte-still);
    font-style: italic;
}

.denkschritt-gegenstand::before { content: "»"; }
.denkschritt-gegenstand::after  { content: "«"; }

/* --- Die Vorschau auf den Gedankengang ---

   Zwei Zeilen, oben ausblendend: der Text laeuft von unten nach — wie ein Band, auf
   dem gerade geschrieben wird. Die Maske ist der ganze Trick daran; ohne sie waere es
   ein abgeschnittener Absatz, mit ihr ein Ausschnitt aus etwas Laufendem.

   Bewusst klein, kursiv und blass: es ist kein Text, auf den sich jemand stuetzen
   darf. Er traegt keine Belege und verschwindet mit der geprueften Antwort. Wer ihn
   mitlesen will, kann; wer nicht, ueberliest ihn. */
.denkschau {
    position: relative;
    max-height: 2.9em;
    margin: .5rem 0 .1rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0, #000 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60%);
}

.denkschau-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--tinte-leise);
}

/* Das Zeichen am Ende: hier wird gerade geschrieben. Dasselbe wie am vorlaeufigen
   Antworttext, damit beides als dieselbe Aussage gelesen wird. */
.denkschau-text::after {
    content: "▊";
    margin-left: .1rem;
    color: var(--tinte-still);
    animation: blinken 1s step-end infinite;
}

.ueberlegung { margin-top: .55rem; }

.ueberlegung summary {
    cursor: pointer;
    color: var(--tinte-leise);
    font-size: .8rem;
}

.ueberlegung summary:hover { color: var(--hausschrift); }

.ueberlegung p { margin: .4rem 0 .3rem; }

/* Der Gedankengang traegt keine Belege. Er sieht deshalb aus wie eine Notiz und
   nicht wie eine Antwort. */
.ueberlegung-text {
    padding: .5rem .65rem;
    background: var(--papier);
    border-left: 3px solid var(--linie-stark);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    font-size: .84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--tinte-leise);
    max-height: 14rem;
    overflow-y: auto;
}

/* ------------------------------------------------ Kopf der Antwortkarte */

/* Die Herkunft ist die wichtigste Angabe an einer Antwort — sie sagt, worauf
   man sich stuetzen kann. Sie steht deshalb links und traegt ein Zeichen; die
   Ausfertigungen sitzen rechts, wo man sie sucht, aber nicht zuerst sieht. */
.zug-herkunft {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .5rem .18rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
}

.herkunft-belegt    { background: var(--gut-blass);     color: var(--gut); }
.herkunft-allgemein { background: var(--papier-kalt);   color: var(--tinte-leise); }

/* Eine gerechnete Auswertung ist etwas Drittes: nicht aus der Akte belegt, aber
   auch nicht bloss Fachwissen. Sie bekommt deshalb ihre eigene Farbe und nicht
   die des allgemeinen Rechts. */
.herkunft-fibu      { background: var(--marine-blass);  color: var(--hausschrift); }
.herkunft-fehler    { background: var(--fehler-blass);  color: var(--fehler); }
.herkunft-offen     { background: var(--warnung-blass); color: var(--warnung); }

/* Ohne Beleg, aber ausgeliefert (E1): eine Warnung, kein Fehler — der Text steht ja da. */
.herkunft-warnung   { background: var(--warnung-blass); color: var(--warnung); }

.zug-werkzeuge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Jeder Knopf traegt sein Wort.

   Vorher standen hier vier nackte Zeichen in Knopfgroesse — Blatt, Buchstabe,
   Umschlag, Feder. Welches davon Word und welches PDF war, wusste man erst, wenn man
   mit der Maus darauf stehen blieb; und wer die Maus nicht benutzt, gar nicht. Ein
   Werkzeug, das man erraten muss, wird nicht benutzt.

   Als Verweise gebaut, damit der Browser den Download selbst uebernimmt — die Farbe
   der Verweise waere hier trotzdem falsch. */
.antwortknopf {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    color: var(--tinte-leise);
    font: inherit;
    font-size: .76rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve),
                background var(--takt-kurz) var(--kurve),
                color var(--takt-kurz) var(--kurve);
}

.antwortknopf:hover {
    border-color: var(--marine-hell);
    background: var(--marine-blass);
    color: var(--hausschrift);
    text-decoration: none;
}

.antwortknopf:focus-visible {
    outline: 2px solid var(--marine-hell);
    outline-offset: 1px;
}

.antwortknopf:disabled { opacity: .55; cursor: default; }

/* Offene Kurzfassung: der Knopf zeigt, dass sie unten steht — ein zweiter Klick
   nimmt sie weg. */
.antwortknopf.aktiv {
    border-color: var(--marine-hell);
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.antwortknopf .zeichen { flex: 0 0 auto; }

/* Auf schmalen Schirmen weichen die Worte und die Zeichen bleiben: vier Knoepfe mit
   Beschriftung brauchen mehr Platz, als eine Antwortkarte dort hat. */
@media (max-width: 700px) {
    .antwortknopf span { display: none; }
    .antwortknopf { padding: .3rem .4rem; }
}

/* --- Die Kurzfassung einer Antwort ---

   Unter der ausfuehrlichen und deutlich als eigener Block: sie ist eine zweite
   Ansicht derselben Auskunft und keine zweite Auskunft. Der abgesetzte Grund und die
   Linie links sagen das, ohne es zu schreiben. */
/* Oben im Kasten, vor der ausfuehrlichen Antwort: wer kuerzt, will das Ergebnis
   zuerst sehen. Der Abstand liegt deshalb unten — zur Antwort hin. */
.kurzfassung {
    margin-bottom: .9rem;
    padding: .7rem .85rem;
    background: var(--papier-kalt);
    border-left: 3px solid var(--marine-hell);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

.kurzfassung-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .45rem;
}

.kurzfassung-titel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.kurzfassung-text { font-size: .89rem; line-height: 1.55; }

.kurzfassung-text p:first-child { margin-top: 0; }
.kurzfassung-text p:last-child { margin-bottom: 0; }

.kurzfassung-laeuft {
    display: flex;
    align-items: center;
    gap: .45rem;
}

/* Das Logo der Kanzlei in der Leiste und in der Vorschau. */
.marke-logo {
    display: block;
    max-width: 100%;
    max-height: 2.6rem;
    margin-bottom: .5rem;

    /* Ein Logo in Volltonfarbe auf dunklem Grund verschwindet oder schreit. Ein
       heller Grund haelt es lesbar, ohne es zu veraendern. */
    padding: .25rem .4rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 4px;
}

/* Weiss und nicht --papier: die Vorschau soll zeigen, wie das Logo auf einer
   Ausfertigung aussieht, und die ist weiss. Uebernaehme sie die Themenfarbe,
   verschwaende ein dunkles Logo im dunklen Thema — der Anwender saehe einen
   leeren Kasten und hielte das Logo fuer verloren. Dasselbe Problem hat die
   Seitenleiste, und dort ist es genauso geloest. */
/* Der karierte Grund darunter zeigt, ob das Logo durchsichtig ist — das
   entscheidet, wie es auf dem Blatt wirkt. */
.logovorschau {
    display: inline-block;
    padding: .6rem .8rem;
    background-color: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    margin-bottom: .5rem;

    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, .045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, .045) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .045) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, .045) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.logovorschau img { display: block; max-width: 14rem; max-height: 5rem; }

/* Ein Feld, das nur zeigt und nichts entgegennimmt. */
.feld-fest {
    background: var(--papier-kalt);
    color: var(--tinte-leise);
    cursor: default;
}

/* Der Verweis einer frischen Einladung. Er steht genau einmal da. */
.einladungsverweis {
    margin: .6rem 0 .5rem;
    padding: .55rem .7rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    font-family: var(--mono);
    font-size: .82rem;
    word-break: break-all;
    user-select: all;
}

/* ------------------------------------------------ Aktenbibliothek */

/* Die Seite fuellt den Bildschirm. Kopf und Zufuhr stehen fest, die Tabelle
   nimmt den Rest und scrollt in sich — bei zweitausend Dokumenten ist das der
   Unterschied zwischen Uebersicht und Endlosband. */
.aktenseite {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 1.25rem 1.75rem 0;
}

/* Im Kopf stehen nur noch die Kacheln — Ueberschrift und Erklaerung sind
   gestrichen. Sie sagten, was die Leiste darueber schon sagt, und kosteten drei
   Zeilen, die der Bestandsliste fehlten. */
.aktenseite-kopf {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.aktenseite-kopf .kacheln { flex: 1 1 auto; margin-bottom: .75rem; }

/* Der Koerper der Seite: die Tabelle nimmt den Platz, die Zufuhr steht daneben.
   Zugeklappt bleibt von ihr ein schmaler Streifen — wie der Beistand in der
   Beratung, und aus demselben Grund: der Weg zurueck darf nicht verschwinden. */
.aktenseite-haupt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding-bottom: 1rem;
}

/* Die Bahn zwischen Kopf und Fuss: normalerweise nur der Bestand, mit offener
   Unterlage zwei Spalten nebeneinander. Beide scrollen fuer sich — die Liste
   soll beim Blaettern im Dokument nicht mitwandern. */
.aktenseite-bahn {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 1rem;
}

.aktenseite-geteilt .aktenseite-haupt { flex: 1 1 55%; }

/* Die Vorschau bekommt die knappere Haelfte: die Tabelle traegt mehr Spalten, als
   ein Blatt Breite braucht. Nach oben begrenzt, weil eine Seite ueber 760 Pixel
   nicht besser lesbar wird — nur der Bestand daneben schmaler. */
.aktenvorschau {
    flex: 1 1 45%;
    min-width: 22rem;
    max-width: 46rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--papier);
    overflow: hidden;
}

.aktenseite-mitte { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

.aktenseite-meldung { flex: 0 0 auto; margin: .5rem 0 0; }

.kacheln-schmal .kachel { padding: .5rem .8rem; font-size: .74rem; }
.kacheln-schmal .kachel-zahl { font-size: 1.15rem; }

/* --- Schubfach --- */

/* Ein Blatt, das von rechts hereinfaehrt und sich ueber die Seite legt: fuer
   alles, was man gelegentlich tut, waehrend staendig eine Liste im Blick bleiben
   soll — Unterlagen zufuehren, einen Zugang anlegen. Als feste Spalte kostete
   jedes davon Platz, den die Liste braucht. */
.schubfach {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(30rem, 94vw);
    background: var(--papier);
    border-left: 1px solid var(--linie-stark);
    box-shadow: var(--schatten-hoch);
    overflow-y: auto;

    /* Geschlossen draussen und unsichtbar. Die Sichtbarkeit schaltet erst nach
       der Bewegung um — sonst waere das Blatt schon fort, bevor es hinausgefahren
       ist. Unsichtbar heisst zugleich: nicht in der Tabreihenfolge. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}

.schubfach.offen {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
}

/* Der Schatten ueber der Seite: er sagt, dass dahinter gerade nichts zu
   bedienen ist, und schliesst bei einem Klick. */
.schubfach-schatten {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(12, 22, 38, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.schubfach-schatten.offen {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility 0s;
}

.schubfach-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .7rem 1rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinte-still);
}

.schubfach-kopf > span:first-child { display: inline-flex; align-items: center; gap: .45rem; }

.schubfach-knopf { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }

@media (prefers-reduced-motion: reduce) {
    .schubfach,
    .schubfach-schatten { transition: none; }
}

.zufuhr-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.5rem;
    padding: 0 1rem 1.25rem;
    border-top: 1px solid var(--linie);
}

.zufuhr-feld h3 { margin: 1rem 0 .5rem; font-size: .95rem; }
.zufuhr-feld p { margin: .5rem 0; }
.zufuhr-feld .meldung { margin-top: .6rem; }

.zufuhr-bericht { padding: 0 1rem 1.25rem; border-top: 1px solid var(--linie); }
.zufuhr-bericht h3 { margin: 1rem 0 .6rem; font-size: .95rem; }
.zufuhr-bericht h4 { margin: 1rem 0 .35rem; font-size: .82rem; }

/* Der Ablauf als nummerierte Schritte: er ist ein Ablauf, und wer wissen will,
   warum eine Unterlage nicht auffindbar ist, sucht darin die Stufe, an der sie
   haengengeblieben ist. */
.ablaufliste {
    margin: .5rem 0;
    padding-left: 1.15rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--tinte-still);
}

.ablaufliste li { margin-bottom: .35rem; }
.ablaufliste strong { color: var(--tinte); }


.ordnerliste { list-style: none; margin: .7rem 0 0; padding: 0; font-size: .8rem; }

.ordnerliste li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--linie);
}

.ordnerliste li:last-child { border-bottom: none; }

.ordnerpfad {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 .3rem; }

/* --- Arten als Reiter --- */

.artenreihe {
    flex: 0 0 auto;
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding: 1rem 0 0;
    margin-bottom: -1px;
}

.artenreiter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 1px solid var(--linie);
    border-bottom-color: transparent;
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    background: var(--papier-kalt);
    font-family: inherit;
    font-size: .8rem;
    color: var(--tinte-still);
    white-space: nowrap;
    cursor: pointer;
}

.artenreiter:hover { color: var(--tinte); }

.artenreiter.aktiv {
    background: var(--papier);
    color: var(--tinte);
    font-weight: 500;
    border-bottom-color: var(--papier);
}

.artenzahl {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--tinte-still);
}

/* --- Filterleiste --- */

/* Sitzt unmittelbar auf der Tabelle, die sie eingrenzt: die gemeinsame Kante
   sagt, dass beides zusammengehoert, ohne dass es jemand dazuschreiben muss. */
.filterleiste {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .75rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}

/* In der Aktenbibliothek stoesst links der Ordnerbaum an — dort bleibt die
   Ecke eckig, damit keine Luecke in der gemeinsamen Kante entsteht. */
.filterleiste-buendig { border-top-left-radius: 0; }

.filterleiste .feld { width: auto; min-width: 9rem; padding: .3rem .5rem; font-size: .82rem; }
.filterleiste .feld:first-child { flex: 1 1 14rem; }
.filterleiste .still { margin-left: auto; }

/* --- Die Tabelle selbst --- */

.aktentabelle {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-top: none;
}

.aktentabelle table.liste { margin: 0; }

/* Enger als die uebrigen Listen der Anwendung, und nur hier: dies ist ein
   Dateifenster, und dort will man viele Zeilen auf einmal sehen. Die Werte
   stehen bewusst auf .aktentabelle eingegrenzt — dieselbe Tabellenklasse traegt
   auch Benutzer, Mandanten und das Protokoll, die ruhig bleiben sollen. */
.aktentabelle table.liste { font-size: .84rem; }
.aktentabelle table.liste th { padding: .35rem .6rem; }
.aktentabelle table.liste td { padding: .3rem .6rem; }

/* Die Zeile ist jetzt einzeilig; die Etiketten duerfen sie nicht umbrechen. */
.aktentabelle .dateizeile { flex-wrap: nowrap; min-width: 0; }
.aktentabelle .dateizeile > a,
.aktentabelle .dateizeile > span:not(.dateizeichen):not(.marke-etikett) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aktentabelle .marke-etikett { flex: 0 0 auto; }

/* Der Kopf bleibt stehen. Ohne ihn ist eine gescrollte Tabelle eine Zahlenwueste. */
.aktentabelle thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--papier-kalt);
    box-shadow: inset 0 -1px 0 var(--linie);
}

.dateizeile { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* Das Zeichen zur Dateiart, wie im Dateifenster: es faengt den Blick, ohne die
   Zeile zu dominieren. Ein nicht nutzbares Dokument bekommt es blass — es liegt
   in der Akte, aber der Assistent kommt nicht daran. */
.dateizeichen {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--beleg);
}

.dateizeichen-still { color: var(--tinte-still); }

.dateipfad {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--tinte-still);
    margin-top: .12rem;
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dateipfad svg { flex: 0 0 auto; opacity: .7; }

.ruecknahme { display: inline-flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }

/* Mehrere Zeilenknoepfe nebeneinander, z. B. Kennwort setzen und Loeschen. */
.zeilenaktionen { display: inline-flex; gap: .3rem; align-items: center; justify-content: flex-end; }

/* Das Passwortfeld einer Tabellenzeile darf nicht die volle Breite haben. */
.ruecknahme .kennwortfeld { width: 11rem; }

/* --- Einordnung in der Bestandstabelle --- */

/* Die Spalte traegt Etikett und Knoepfe. Die Knoepfe erscheinen erst beim
   Ueberfahren der Zeile: staendig sichtbar waeren es zwei zusaetzliche Elemente
   je Zeile, und bei fuenfzig Zeilen ist die Tabelle dann nur noch Knopfleiste.
   Ein ungeprueftes Etikett behaelt seine Knoepfe — dort ist die Handlung der
   Zweck der Zeile. */
.artzelle { white-space: nowrap; }

.artzelle .einordnung-zelle { margin-top: 0; }

.artzelle .knopf-klein {
    margin-left: .25rem;
    opacity: .55;
    transition: opacity .12s ease;
}

.liste tr:hover .artzelle .knopf-klein,
.liste tr:focus-within .artzelle .knopf-klein,
.artzelle .einordnung-vorschlag ~ .knopf-klein { opacity: 1; }

/* --- Die Pflegespalte ------------------------------------------------------

   Umbenennen, verschieben, entfernen — als Zeichen und nicht als Woerter. „umbenennen
   verschieben entfernen" war eine halbe Zeile Text in jeder von fuenfzig Zeilen, mehr
   Schrift als die Unterlage selbst; beim Ueberfliegen liest man sie fuenfzigmal nicht
   und sucht die Datei dahinter. Was sie tun, steht im Titel und in aria-label — das
   Zeichen genuegt, sobald man es einmal gesehen hat. */
.pflegezelle { white-space: nowrap; text-align: right; }

.pflegeknoepfe { display: inline-flex; gap: .1rem; }

/* Gedaempft, aber da.

   Sie waren einmal unsichtbar und kamen erst beim Darauffahren — die Ueberlegung
   war, dass drei Zeichen neben jeder von fuenfzig Zeilen die Spalte zur
   Werkzeugleiste machen. Das stimmte, und der Preis war hoeher: wer nicht wusste,
   dass dort etwas ist, fand es nie. Eine Schaltflaeche, die man durch Darauffahren
   entdecken muss, ist fuer den taeglichen Gebrauch keine.

   Also gedaempft statt fort, und einen Schritt groesser: bei halber Deckung
   verschwimmen drei Zeichen zu einem grauen Fleck am Rand, sie draengen sich nicht
   auf — und die Zeile, auf der der Zeiger steht, zeigt sie voll. */
.pflegeknoepfe .feldknopf {
    opacity: .5;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}

.liste tr:hover .pflegeknoepfe .feldknopf,
.liste tr:focus-within .pflegeknoepfe .feldknopf { opacity: 1; }

.feldknopf-klein { width: 1.6rem; height: 1.6rem; }

/* Die Knoepfe in einer Listenzeile: gross genug, um sie zu treffen, ohne die
   Zeilenhoehe zu bestimmen. Zweiundzwanzig Pixel Ziel bei sechzehn Pixel Zeichen —
   darunter wird das Treffen mit der Maus zur Uebung und mit dem Finger unmoeglich. */
.feldknopf-zeile { width: 2.1rem; height: 2.1rem; }

/* Beim Darauffahren auf die Zeile bekommen sie einen Umriss: erst dadurch sehen sie
   aus wie etwas, das man drueckt, und nicht wie ein Zeichen, das etwas anzeigt. */
.liste tr:hover .pflegeknoepfe .feldknopf-zeile,
.liste tr:focus-within .pflegeknoepfe .feldknopf-zeile {
    box-shadow: inset 0 0 0 1px var(--linie);
}

.pflegeknoepfe .feldknopf-zeile:hover:not(:disabled) {
    box-shadow: inset 0 0 0 1px var(--linie-stark);
}

/* Die Warnfarbe erst beim Darauffahren auf diesen einen Knopf. Staendig rot waere die
   Liste eine Reihe von Warnungen — gewarnt wird vor der Handlung und nicht vor der
   Zeile. */
.feldknopf-warnung:hover:not(:disabled) { background: var(--fehler-blass); color: var(--fehler); }

/* Der Editor bleibt in der Zeile.

   Er trug einmal vier Bedienteile nebeneinander — Auswahl, Freitext, uebernehmen,
   abbrechen — und durfte umbrechen, wenn die Spalte zu schmal wurde. Genau das tat
   er: die Zeile wurde doppelt so hoch, die Liste sprang beim Oeffnen auseinander,
   und die Zeilen darunter wanderten unter dem Zeiger weg.

   Jetzt sind es zwei: ein Auswahlfeld, das sofort gilt, und ein Knopf zum
   Schliessen. <b>Kein Umbruch mehr</b> — was nicht hineinpasst, macht das Feld
   schmaler, nicht die Zeile hoeher. */
.einordnungsfeld {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
}

.einordnungsfeld .feld-schmal {
    min-width: 0;
    width: 100%;
    max-width: 14rem;
}

/* Das Auswahlfeld traegt die Hoehe der Zeile und nicht die eines Formulars. */
.einordnungswahl { padding-top: .18rem; padding-bottom: .18rem; }

.einordnungsfeld .knopf-klein { opacity: 1; margin-left: 0; }

.einordnungsfeld .feldknopf { opacity: 1; flex: 0 0 auto; }

/* Der Hinweis ueber der Tabelle: Text links, Handlungen rechts. */
.einordnungshinweis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.einordnungshinweis-knoepfe { display: inline-flex; gap: .4rem; flex: 0 0 auto; }

/* --- Blaetterung --- */

.aktenseite-fuss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .55rem .75rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-top: none;
    border-radius: 0 0 var(--radius-klein) var(--radius-klein);
    margin-bottom: 1.25rem;
}

/* Im Explorer ohne Abstand nach unten: der Fuss ist die letzte Zeile der Spalte,
   und ein Rand darunter liesse den Baum daneben tiefer enden als die Liste. */
.aktenexplorer-inhalt .aktenseite-fuss { margin-bottom: 0; }

.blaetterung { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; }

.feld-schmal { width: auto; padding: .25rem .45rem; font-size: .78rem; }

@media (max-width: 900px) {
    .aktenseite { padding: 1rem 1rem 0; }
    .dateipfad { max-width: 16rem; }

    /* Untereinander statt nebeneinander: unter 900 Pixeln bleibt fuer zwei Spalten
       weder von der Tabelle noch vom Blatt genug uebrig. Die Vorschau nimmt dann
       den unteren Teil und behaelt ihre eigene Bildlaufleiste. */
    .aktenseite-bahn { flex-direction: column; }

    .aktenseite-geteilt .aktenseite-haupt { flex: 1 1 50%; }

    .aktenvorschau { flex: 1 1 50%; min-width: 0; max-width: none; }
}

/* Ein Hinweis ohne Warnfarbe: er sagt etwas Wichtiges, aber nichts Bedrohliches. */
.meldung-hinweis {
    background: var(--marine-blass);
    color: var(--tinte);
    border: 1px solid var(--linie);
}

/* ------------------------------------------------------- Gedaechtnis */

/* Der erklaerende Teil traegt einen ruhigen Rahmen: er ist zum Lesen da und
   nicht zum Ueberfliegen. */
.erklaerung {
    margin: 1.25rem 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--marine-hell);
    border-radius: 0 var(--radius) var(--radius) 0;
    max-width: 48rem;
}

.erklaerung h2 { margin-top: 0; font-size: 1.05rem; }
.erklaerung h3 { margin: 1.1rem 0 .4rem; font-size: .92rem; }
.erklaerung p { margin: .5rem 0; font-size: .88rem; line-height: 1.65; }
.erklaerung ul { margin: .5rem 0; padding-left: 1.15rem; font-size: .88rem; line-height: 1.6; }
.erklaerung li { margin-bottom: .45rem; }

/* --- Das Gedaechtnis als Tafel --------------------------------------------

   Vorher stand jeder Merkposten als Kaestchen mit Kopf, Satz, Herkunftsstrang und
   Knopfleiste. Das war bei fuenf Merkposten schoen und bei fuenfzig ein Band, durch
   das man scrollt: zwei Behauptungen nebeneinander zu vergleichen war unmoeglich,
   und genau darum geht es beim Pruefen. Jetzt eine Zeile je Merkposten. */

.merktafel-kopf {
    display: flex;
    align-items: baseline;
    gap: .75rem 1.25rem;
    flex-wrap: wrap;
    margin: 1.6rem 0 .6rem;
}

.merktafel-kopf h2 { margin: 0; }

.merktafel-hinweis { flex: 1 1 20rem; margin: 0; font-size: .82rem; }

/* Die Stapelknoepfe ganz rechts: sie gelten fuer die Tabelle darunter und nicht
   fuer eine einzelne Zeile — an derselben Stelle, an der auch der Fuss einer
   Liste seine Knoepfe hat. */
.merktafel-knoepfe {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.merktafel { table-layout: fixed; }

/* Der Satz bekommt die Breite: er ist der Inhalt, alles andere Auskunft darueber.
   Feste Spaltenbreiten, damit die Zeilen bei wechselnden Dateinamen nicht
   springen — eine Tabelle, deren Spalten je Seite anders liegen, liest sich wie
   eine neue. */
.merktafel th:nth-child(1), .merktafel td:nth-child(1) { width: 6.5rem; }
.merktafel th:nth-child(3), .merktafel td:nth-child(3) { width: 12rem; }
.merktafel th:nth-child(4), .merktafel td:nth-child(4) { width: 15rem; }
.merktafel th:nth-child(5), .merktafel td:nth-child(5) { width: 6.5rem; }
.merktafel th:nth-child(6), .merktafel td:nth-child(6) { width: 9.5rem; }

.merktafel td { vertical-align: top; }

.merktafel-text { line-height: 1.5; }

/* Herkunft und Belege sind Beiwerk und duerfen die Zeile nicht in die Hoehe
   treiben. Ein Gespraechstitel kann beliebig lang sein — was nicht passt, steht
   im Titel des Elements. */
.merktafel-herkunft,
.merktafel-belege {
    font-size: .8rem;
    color: var(--tinte-still);
}

.merktafel-quelle {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merktafel-belege .beleg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beleg-fort { color: var(--tinte-still); text-decoration: line-through; }

/* Wie in der Aktenbibliothek: die Knoepfe zeigen sich beim Darauffahren. Bei
   einem ungeprueften Vorschlag bleiben sie stehen — dort ist die Entscheidung der
   Zweck der Zeile, und ein Knopf, den man erst suchen muss, wird nicht gedrueckt. */
.merktafel-pflege { white-space: nowrap; text-align: right; }

.merktafel-pflege .knopf-klein {
    opacity: 0;
    transition: opacity .12s ease;
}

.liste tr:hover .merktafel-pflege .knopf-klein,
.liste tr:focus-within .merktafel-pflege .knopf-klein { opacity: 1; }

.traglast { font-family: var(--mono); }

/* Eine Tabelle, die sich lohnt zu scrollen statt die Seite zu verlaengern. */
.tabellenrahmen-hoch { max-height: 34rem; overflow-y: auto; }

.tabellenrahmen-hoch thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--papier-kalt);
    box-shadow: inset 0 -1px 0 var(--linie);
}

/* Die aufgeklappten Buchungen sitzen in einer Zelle der Kontentabelle: so bleibt
   der Zusammenhang zum Konto sichtbar, statt in einen Dialog zu wandern. */
.buchungszelle { background: var(--papier-kalt); padding: .6rem .8rem !important; }

.liste-eng { font-size: .78rem; margin: 0; }
.liste-eng td, .liste-eng th { padding: .22rem .4rem; }

/* ------------------------------------------------------ Rechtsquellen */

/* Eine Vorschrift auf dem Blatt: Ueberschrift, Wortlaut, Pruefsumme. Getrennt
   durch eine Linie, weil mehrere Paragraphen hintereinander sonst zu einem
   Textblock verschmelzen, in dem niemand die Grenze findet. */
.vorschrift {
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .1);

    /* Luft ueber dem Sprungziel: ohne sie klebt der angesprungene Paragraph am
       oberen Rand, und der Satz darueber — sein Zusammenhang — ist weg. */
    scroll-margin-top: 5rem;
}

/* Die belegte Stelle. Der Balken links und der waermere Grund heben sie heraus, ohne
   den Wortlaut zu veraendern — eine Einfaerbung des Textes selbst saehe aus wie eine
   Auszeichnung des Gesetzgebers. */
.vorschrift-stelle {
    position: relative;
    margin-left: -1rem;
    padding-left: calc(1rem - 3px);
    border-left: 3px solid var(--beleg);
    background: var(--beleg-blass);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

/* Beim Ankommen kurz aufleuchten: das Auge findet die Stelle dann, ohne zu suchen.
   Danach bleibt die ruhige Auszeichnung — ein Blinken, das nicht endet, waere im Weg. */
@media (prefers-reduced-motion: no-preference) {
    .vorschrift-stelle { animation: stelle-auf 1.4s var(--kurve); }

    @keyframes stelle-auf {
        0% { background: var(--beleg); }
        100% { background: var(--beleg-blass); }
    }
}

/* Der Hinweis auf das, was vor und nach dem Ausschnitt liegt. */
.satz-mehr {
    margin: .5rem 0;
    font-size: .78rem;
    color: var(--tinte-still);
    text-align: center;
}
.vorschrift:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.vorschrift-kopf {
    margin: 0 0 .5rem;
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
}

.vorschrift-titel { display: block; font-weight: 400; font-size: .92rem; color: #4a4a4a; }

.vorschrift-fuss { margin: .6rem 0 0; font-size: .68rem; color: #8a8a8a; }
.vorschrift-fuss code { font-size: .95em; }

/* Der Wortlaut einer Vorschrift traegt eigene Umbrueche — Absaetze, Nummern.
   pre-wrap haelt sie und bricht trotzdem lange Zeilen um. */
.blatt-satz .vorschrift .textstelle { white-space: pre-wrap; margin: 0; }

/* Aus dem Gesetz belegt: eine eigene Farbe. Ein Beleg ist es, aber keiner aus der
   Akte dieses Mandanten — und der Unterschied ist der Kern dieser Anwendung. */
.herkunft-recht { background: var(--gut-blass); color: var(--gut); }

/* Der erklaerende Block als aufklappbares Feld.
   
   Die Regeln greifen nur, wenn .erklaerung ein <details> ist. Dieselbe Klasse
   traegt auf der Rechtsquellenseite noch einen festen Kasten; ihn hier
   mitzuveraendern hiesse, eine Seite umzubauen, von der gar nicht die Rede war. */
details.erklaerung {
    padding: 0;
    overflow: hidden;
}

/* Das Dreieck des Browsers weicht dem eigenen Winkel: es sitzt je nach Browser
   anders und laesst sich nicht ausrichten. */
details.erklaerung > summary { list-style: none; }
details.erklaerung > summary::-webkit-details-marker { display: none; }
details.erklaerung > summary::marker { content: ""; }

.erklaerung-griff {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.25rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--tinte);
    cursor: pointer;
}

.erklaerung-griff:hover { background: var(--papier-kalt); }

/* Der Winkel steht am rechten Rand und dreht sich beim Aufklappen — dieselbe
   Sprache wie in der rechten Spalte der Beratung. */
.erklaerung-griff > span { flex: 1; }
.erklaerung-griff svg:last-child { transition: transform .15s ease; transform: rotate(-90deg); }
details.erklaerung[open] .erklaerung-griff svg:last-child { transform: none; }

details.erklaerung[open] .erklaerung-griff { border-bottom: 1px solid var(--linie); }

.erklaerung-inhalt { padding: .35rem 1.5rem 1.25rem; }
.erklaerung-inhalt > :first-child { margin-top: .7rem; }

/* ------------------------------------------- Anlage am Fragefeld */

/* Ein <label> um ein verstecktes Dateifeld: ein <InputFile> laesst sich nicht als
   Knopf gestalten, ein <label> schon — und es bleibt mit der Tastatur erreichbar,
   weil das Feld darin nur unsichtbar ist und nicht entfernt. */
.anlageknopf { position: relative; overflow: hidden; cursor: pointer; }

.anlageknopf input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.anlageknopf.laeuft { opacity: .5; pointer-events: none; }

/* Was aus dem Hochladen wird, steht ueber dem Fragefeld — dort, wo der Anwender
   gerade hinsieht. */
.ablagelauf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    color: var(--tinte-still);
}

.ablagelauf-punkt {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--marine);
    animation: ablagepuls 1s ease-in-out infinite;
}

@keyframes ablagepuls {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1); }
}

.ablagemeldung {
    position: relative;
    margin-bottom: .5rem;
    padding-right: 2rem;
    font-size: .82rem;
}

.ablagemeldung a { margin-left: .35rem; }

/* Eine Meldung ueber dem Fragefeld muss fortgehen koennen: sie sitzt im Weg, und
   sie ist erledigt, sobald man sie gelesen hat. */
.ablagemeldung-zu {
    position: absolute;
    top: .3rem;
    right: .45rem;
    padding: 0 .25rem;
    border: none;
    background: none;
    color: inherit;
    opacity: .55;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}

.ablagemeldung-zu:hover { opacity: 1; }

/* ============================================================
   Benutzerverwaltung
   ============================================================ */

/* Ueberschrift links, die eine Handlung rechts: der Knopf, der ein Schubfach
   oeffnet, gehoert an den Rand und nicht in den Lesefluss. */
.seitenkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.seitenkopf > div { flex: 1 1 24rem; min-width: 0; }
.seitenkopf > .knopf { flex: 0 0 auto; margin-top: .35rem; }

/* --- Das Bild zu einem Zugang --- */

.benutzerbild {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;

    /* Ein Foto bringt eigene Kanten mit; der Ring haelt sie zusammen und
       traegt zugleich die Initialenflaeche, damit beides gleich gross wirkt. */
    box-shadow: 0 0 0 1px var(--linie-stark) inset;
}

.benutzerbild-initialen {
    background: var(--bildton, var(--marine));
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

/* --- Die Tabelle --- */

.benutzertabelle { width: 100%; }

.benutzertabelle .spalte-bild { width: 2.75rem; padding-right: 0; }
.benutzertabelle td { vertical-align: middle; }

/* Name und Anmeldename stehen uebereinander: der Anmeldename wird gebraucht,
   wenn jemand anruft und sich nicht anmelden kann — aber er verdient keine
   eigene Spalte neben dem Namen, den man sucht.

   Beide ohne Umbruch: ein dreiteiliger Name auf drei Zeilen macht die Zeile
   dreimal so hoch und laesst sich schlechter ueberfliegen als eine breitere
   Spalte. Was nicht passt, wird abgeschnitten — der volle Wert steht im
   Titel und in der Suche. */
.benutzername {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    white-space: nowrap;
}

.benutzername > span:first-child { overflow: hidden; text-overflow: ellipsis; }

.benutzerkennung {
    display: block;
    font-size: .76rem;
    font-family: var(--mono, monospace);
    color: var(--tinte-still);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.benutzermail {
    font-size: .84rem;
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.benutzerzeit { font-size: .82rem; color: var(--tinte-leise); white-space: nowrap; }

.benutzertabelle .feld-schmal { min-width: 8.5rem; font-size: .82rem; padding: .25rem .4rem; }

/* Ein geloeschter Zugang bleibt stehen, tritt aber zurueck — seine Zeilen
   sollen die aktiven nicht ueberdecken. */
.zeile-still { opacity: .58; }
.zeile-still:hover { opacity: 1; }

/* --- Bild hinterlegen --- */

.bildzeile > td { background: var(--papier-kalt); }

.bildwahl {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .35rem 0;
}

.bildwahl > div { flex: 0 1 26rem; min-width: 0; margin-right: auto; }
.bildwahl p { margin: .3rem 0 0; font-size: .78rem; }
.bildwahl input[type="file"] { font-size: .8rem; }

/* --- Fuss unter der Tabelle --- */

.listenfuss {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .55rem .25rem;
    font-size: .82rem;
}

/* --- Inhalt eines Schubfachs --- */

.schubfach-inhalt { padding: 1rem; }
.schubfach-inhalt .raster-feld { margin-bottom: .85rem; }
.schubfach-inhalt > .still { margin-top: 1rem; font-size: .8rem; }
.schubfach-abschluss { width: 100%; margin-top: .35rem; }

/* Die Ladeflaeche der Aktenbibliothek steht in der Mitte einer breiten Seite
   und soll nicht als schmale Saeule dort haengen. */
.ladeflaeche-breit { width: min(48rem, 100%); }

/* ============================================================== Kopfleiste */

/* Sie traegt die Hausfarbe wie zuvor die Seitenleiste — das Haus bleibt am
   oberen Rand erkennbar, und der Inhalt darunter steht auf hellem Grund. Eine
   Zeile hoch: alles darin ist auf diese Hoehe hin gebaut, damit die Leiste nicht
   waechst, sobald ein Mandantenname lang wird. */
.kopfleiste {
    /* Das Gold des Signets. Fest und nicht aus dem Thema: es ist die Farbe der
       Marke und liegt auf jeder der dunklen Leisten gut — auf Marine, Weinrot,
       Tannengruen wie auf Graphit. */
    --leistengold: #c4a265;
    --leistengold-hell: #e5d6bb;

    display: flex;
    align-items: center;
    gap: .4rem;
    height: 3rem;
    padding: 0 .8rem;

    /* Wie ein Aktendeckel: oben die volle Hausfarbe mit einem feinen Lichtstrich
       auf der Kante, nach unten eine Spur dunkler, und ein weicher Schatten auf
       die Seite statt einer harten Grenze.

       Abgedunkelt und nicht aufgehellt: die Leistenschrift ist auf 7,5:1 gegen
       --marine gerechnet. Ein hellerer Verlauf hatte sie oben auf 5,9:1
       gedrueckt; ein dunklerer kann den Kontrast nur heben. */
    background:
        radial-gradient(120% 140% at 0% 0%,
            color-mix(in srgb, var(--marine) 88%, #fff) 0%,
            transparent 55%),
        linear-gradient(180deg,
            var(--marine),
            color-mix(in srgb, var(--marine) 82%, #000));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 6px 18px -8px color-mix(in srgb, var(--marine) 80%, transparent);

    /* Aus dem Thema und nicht fest: ein kalter Grauton sieht auf dem Braun von
       Sandstein und dem Weinrot von Bordeaux schmutzig aus. Jedes Thema bringt
       seine eigene Leistenschrift mit, gerechnet auf 7,5:1 gegen die eigene
       Leiste. */
    color: var(--leistenschrift);
    position: relative;
    z-index: 20;
}

/* Der Goldschnitt: eine Haarlinie in Gold an der Unterkante, zu den Enden hin
   auslaufend — wie die vergoldete Schnittkante eines gebundenen Bandes. Sie trennt
   Leiste und Seite ohne harte Grenze und ist die eine Stelle, an der die Leiste
   die Marke zeigt, statt sie nur zu tragen. */
.kopfleiste::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--leistengold) 70%, transparent) 18%,
        var(--leistengold) 50%,
        color-mix(in srgb, var(--leistengold) 70%, transparent) 82%,
        transparent);
    opacity: .75;
    pointer-events: none;
}

/* Das Punktraster aus dem Launch-Reel, hier nur als Hauch: goldene Punkte, die
   von links nach rechts verlaufen und hinter dem Mandanten auslaufen. Es liegt
   unter allem, was sich bedienen laesst, und nimmt keine Klicks an. */
.kopfleiste::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--leistengold) 30%, transparent) 1px, transparent 1.3px);
    background-size: 14px 14px;
    background-position: 4px 3px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 38%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 38%);
}

.kopf-luecke { flex: 1 1 auto; }

/* --- Marke --- */

.kopf-marke {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 2.05rem;
    padding: 0 .45rem;
    border-radius: var(--radius-klein);
    color: rgba(255, 255, 255, .9);
}

.kopf-marke:hover { text-decoration: none; background: rgba(255, 255, 255, .08); }

.kopf-logo { max-height: 1.65rem; width: auto; }

/* Die Produktmarke, solange die Kanzlei kein eigenes Logo hinterlegt hat: das
   goldene Signet und daneben die Wortmarke. Die Wortmarke steht etwas kleiner als
   das Signet und auf dessen optischer Mitte — sonst wirkt das Paar wie zwei
   Bilder, die zufaellig nebeneinander liegen. */
.kopf-produktmarke {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Das Signet ist ein offener Rahmen und keine Plakette mehr: ohne Rundung und
   ohne Schatten, sonst saesse ein Kasten um den Rahmen. */
.kopf-signet {
    height: 1.65rem;
    width: auto;
}

.kopf-wortmarke {
    height: 1.05rem;
    width: auto;
}

/* --- Der Mandant --- */

/* Er steht vorn und traegt Marke, Namen und Nummer. Der Name wird gekuerzt und
   bricht nicht um: eine zweizeilige Kopfleiste verschoebe bei jedem Wechsel die
   ganze Seite darunter. */
/* Der Abstand zum Logo ist gewollt gross und traegt einen feinen Strich: links
   davon steht, wessen Haus das ist, rechts davon, an wessen Akte gearbeitet
   wird. Zwei verschiedene Aussagen — dicht nebeneinander lasen sie sich wie
   eine. */
.kopf-mandant {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 17rem;
    height: 2.05rem;
    margin-left: 1.1rem;
    padding: 0 .5rem;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition:
        background var(--takt-kurz) var(--kurve),
        border-color var(--takt-kurz) var(--kurve);
}

.kopf-mandant::before {
    content: "";
    position: absolute;
    left: -.55rem;
    width: 1px;
    height: 1.4rem;
    background: rgba(255, 255, 255, .16);
}

.kopf-mandant { position: relative; }

.kopf-mandant:hover:not(:disabled) {
    background: rgba(0, 0, 0, .34);
    border-color: rgba(255, 255, 255, .24);
}

.kopf-mandant:disabled { cursor: default; opacity: .7; }

.kopf-mandant .zeichen { flex: 0 0 auto; opacity: .6; }

.kopf-mandant-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
}

.kopf-mandant-name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
    font-weight: 600;
    color: #fff;
}

.kopf-mandant-nummer {
    font-family: var(--mono);
    font-size: .68rem;
    color: rgba(223, 230, 239, .65);
}

.kopf-mandant-leer .kopf-mandant-name { color: #f0c674; font-weight: 500; }

/* Die Marke des Mandanten: zwei Buchstaben auf einem Ton, der zu ihm gehoert.
   Eine zweite, schnellere Auskunft darueber, an wessen Akte man sitzt — Farbe
   erkennt man vor Schrift. */
.mandantenmarke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background: var(--markenton);
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
}

.kopf-mandant-leer .mandantenmarke {
    background: none;
    border: 1px dashed rgba(240, 198, 116, .7);
    color: #f0c674;
}

/* --- Die Punkte --- */

/* Die Arbeitsbereiche liegen in einer eingelassenen Spur. Vorher standen sie lose
   in der Leiste und lasen sich wie eine Reihe einzelner Links; in der Spur sind
   sie erkennbar eine Gruppe — die Orte, zwischen denen man den Tag ueber wechselt.
   Verwaltung und Zugang stehen bewusst ausserhalb: sie sind keine Arbeitsorte. */
.kopf-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin-left: .7rem;
    padding: 3px;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

.kopf-punkt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 1.95rem;
    padding: 0 .7rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--leistenschrift);
    font: inherit;
    font-size: .84rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.kopf-punkt .zeichen { opacity: .7; transition: opacity var(--takt-kurz) var(--kurve); }

.kopf-punkt:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.kopf-punkt:hover .zeichen { opacity: 1; }

/* Ein Bereich, der noch nicht abgenommen ist. Gold auf der dunklen Leiste und
   klein: er soll auffallen, aber nicht lauter sein als der Name daneben. Auf
   schmalen Fenstern faellt er mit den uebrigen Beschriftungen weg. */
.kopf-entwicklung {
    padding: 0 .4rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    color: var(--leistengold-hell);
    font-size: .64rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .02em;
}

/* Der aufgeschlagene Bereich: eine leicht erhabene Flaeche in der Spur, das
   Zeichen in hellem Gold und darunter eine kurze goldene Marke.

   Die Marke sitzt im Knopf und nicht an der Unterkante der Leiste. Dort stand
   frueher ein Strich, der an der Fuge zur Seite klebte und aussah, als sei dem
   Knopf etwas abgebrochen; in der Spur gehoert sie sichtbar zu ihm. */
.kopf-nav .kopf-punkt.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .25);
    color: #fff;
    font-weight: 600;
}

.kopf-nav .kopf-punkt.active .zeichen { opacity: 1; color: var(--leistengold-hell); }

.kopf-nav .kopf-punkt.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 1.1rem;
    height: 2px;
    margin-left: -.55rem;
    border-radius: 2px;
    background: var(--leistengold);
}

.kopf-punkt:focus-visible,
.kopf-haupt:focus-visible,
.kopf-zugang:focus-visible,
.kopf-mandant:focus-visible {
    outline: 2px solid var(--leistengold);
    outline-offset: 1px;
}

/* --- Der Assistent --- */

/* Die Beratung ist der erste Ort in der Spur und der, fuer den die Anwendung da
   ist. Sie traegt deshalb immer die volle Schrift und ein goldenes Zeichen.

   Aufgeschlagen wird sie zur goldenen Plakette — der einzige gefuellte Knopf der
   Leiste. Vorher stand hier eine Kachel im Belegton der Verweise: ein Blau, das
   mit der Marke nichts zu tun hatte und neben dem Gold des Signets fremd wirkte. */
.kopf-haupt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 1.95rem;
    padding: 0 .8rem;
    border-radius: 7px;
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    transition:
        background var(--takt-kurz) var(--kurve),
        box-shadow var(--takt-kurz) var(--kurve),
        transform var(--takt-kurz) var(--kurve);
}

.kopf-haupt .zeichen { color: var(--leistengold); }

.kopf-haupt:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }

.kopf-haupt:active { transform: translateY(1px); }

.kopf-haupt.active {
    background: linear-gradient(180deg, #e9dcc2, #c9aa70);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 3px rgba(0, 0, 0, .35);
    color: #122339;
}

.kopf-haupt.active .zeichen { color: #122339; }

.kopf-haupt.active:hover { background: linear-gradient(180deg, #efe4cf, #cfb27a); }

/* --- Die Klappmenues --- */

.kopf-menue { position: relative; flex: 0 0 auto; }

.kopf-punkt-menue.offen, .kopf-zugang.offen { background: rgba(255, 255, 255, .14); color: #fff; }

.kopf-punkt-menue .zeichen:last-child { opacity: .6; }

/* Der Zugang steht hinter einem feinen Strich fuer sich: rechts davon ist man
   selbst, links davon die Arbeit. Das Bild traegt einen goldenen Ring — dieselbe
   Farbe wie das Signet am anderen Ende der Leiste, die damit eingefasst ist. */
.kopf-zugang {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 2.05rem;
    margin-left: .55rem;
    padding: 0 .35rem 0 .3rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: #dfe6ef;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve);
}

.kopf-zugang::before {
    content: "";
    position: absolute;
    left: -.5rem;
    top: 50%;
    width: 1px;
    height: 1.4rem;
    margin-top: -.7rem;
    background: rgba(255, 255, 255, .12);
}

.kopf-zugang .benutzerbild {
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--leistengold) 70%, transparent);
}

.kopf-zugang:hover { background: rgba(255, 255, 255, .08); }

.kopf-zugang:hover .benutzerbild { box-shadow: 0 0 0 1.5px var(--leistengold); }

.kopf-zugang .zeichen { opacity: .6; }

/* Die Klappe faellt aus der Leiste heraus auf hellen Grund: sie gehoert zum
   Inhalt darunter und nicht mehr zur Leiste, und dort liest sich eine Liste auf
   Papier besser als auf Marine. */
.kopf-klapp {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    z-index: 45;
    min-width: 13rem;
    padding: .35rem;
    background: var(--papier);
    border: 1px solid var(--linie-weich);
    border-radius: var(--radius);
    box-shadow: var(--glanz), var(--schatten-hoch);
    animation: klapp-auf var(--takt-kurz) var(--kurve);
}

.kopf-klapp-rechts { left: auto; right: 0; }

@keyframes klapp-auf {
    from { opacity: 0; transform: translateY(-.25rem); }
    to   { opacity: 1; transform: none; }
}

.kopf-klapp-punkt {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .55rem;
    border: none;
    border-radius: var(--radius-klein);
    background: none;
    color: var(--tinte);
    font: inherit;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve);
}

.kopf-klapp-punkt:hover { background: var(--papier-kalt); text-decoration: none; }
.kopf-klapp-punkt.active { background: var(--marine-blass); color: var(--hausschrift); font-weight: 600; }

.kopf-klapp-punkt .zeichen { flex: 0 0 auto; opacity: .7; }

/* Ein Eintrag fuer den Betrieb: die Marke steht am rechten Rand, klein und still,
   damit der Name vorne bleibt und man beim Ueberfliegen trotzdem sieht, wofuer er ist. */
.kopf-klapp-marke {
    margin-left: auto;
    padding: 0 .45rem;
    border: 1px solid var(--linie-stark);
    border-radius: 999px;
    color: var(--tinte-leise);
    font-size: .64rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .02em;
    white-space: nowrap;
}

.kopf-klapp-titel {
    padding: .5rem .55rem .25rem;
    margin-top: .25rem;
    border-top: 1px solid var(--linie);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tinte-still);
}

.kopf-klapp-kopf {
    display: flex;
    flex-direction: column;
    padding: .4rem .55rem .55rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--linie);
}

.kopf-klapp-name { font-size: .88rem; font-weight: 600; color: var(--hausschrift); }

.kopf-klapp-rolle {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinte-still);
}

.kopf-klapp-form { margin: 0; }

.kopf-klapp-abmelden { color: var(--fehler); }
.kopf-klapp-abmelden:hover { background: var(--fehler-blass); }

/* Hersteller, Copyright und Version am Fuss des Zugangsmenues.

   Leise, wie ein Impressum: Zeichen in halber Deckung, kleinste Schrift. Nur die
   Version ist anklickbar — dahinter stehen die Neuerungen, und das ist die eine
   Auskunft hier, die man tatsaechlich sucht. */
.kopf-klapp-hersteller {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .6rem .55rem .35rem;
    margin-top: .25rem;
    border-top: 1px solid var(--linie);
}

.kopf-klapp-hersteller img {
    height: .9rem;
    width: auto;
    margin-bottom: .15rem;
    opacity: .6;
}

.kopf-klapp-copyright {
    font-size: .68rem;
    color: var(--tinte-still);
}

.kopf-klapp-version {
    padding: 0;
    border: none;
    background: none;
    color: var(--beleg);
    font: inherit;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.kopf-klapp-version:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Neuerungen */

/* Schmaler als der Mandantendialog: hier wird gelesen und nicht verglichen, und
   Fliesstext ueber sechzig Rem Breite liest sich schlecht. */
.dialog-schmal { width: min(42rem, 100%); }

/* --- Demobetrieb ---

   In der Kopfleiste steht, wie viele Anfragen noch bleiben: gold umrandet wie die
   Marke „In Entwicklung", damit sie zur Leiste gehoert und nicht wie ein Fehler
   aussieht. Wird es knapp, faerbt sie sich warm; ist die Testphase um, wird sie ein
   Knopf, der den Dialog wieder oeffnet. */
.kopf-demo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 1.85rem;
    margin-right: .5rem;
    padding: 0 .7rem 0 .3rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--leistenschrift);
    font: inherit;
    font-size: .78rem;
    white-space: nowrap;
}

.kopf-demo-marke {
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--leistengold-hell);
    color: var(--marine);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.6;
}

.kopf-demo-knapp { border-color: rgba(255, 196, 120, .55); color: #ffd9a6; }

.kopf-demo-ende {
    padding-left: .6rem;
    border-color: rgba(255, 150, 140, .55);
    color: #ffd0cb;
    cursor: pointer;
}

.kopf-demo-ende:hover { background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 1180px) {
    .kopf-demo > span:not(.kopf-demo-marke) { display: none; }
    .kopf-demo { padding-right: .3rem; }
}

/* Der Dialog nach der Testphase: derselbe Kopf wie der Willkommensgruss — Anfang und
   Ende der Demo sehen gleich aus —, darunter der Kontakt als Karte mit Verweisen.

   Die Schrift bleibt in Tinte und Hausfarbe. Verweise tragen sonst das Blau der
   Belege, und das sah hier aus wie ein Link in einem Formular und nicht wie der
   Mensch, an den man sich wenden soll. */
.testlaufzeit { overflow: hidden; }

.testlaufzeit-koerper p { margin: 0 0 1rem; line-height: 1.65; color: var(--tinte); }

.testlaufzeit-frage { margin-top: 1.25rem !important; color: var(--hausschrift) !important; }

.testlaufzeit-kontakt {
    display: grid;
    gap: .3rem;
    margin: .25rem 0 .5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--papier-warm);
}

.testlaufzeit-name,
.testlaufzeit-zeile {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-klein);
    color: var(--tinte);
}

.testlaufzeit-name {
    padding-bottom: .65rem;
    margin-bottom: .15rem;
    border-bottom: 1px solid var(--linie-weich);
    border-radius: 0;
    color: var(--hausschrift);
    font-weight: 600;
}

a.testlaufzeit-zeile,
a.testlaufzeit-zeile:visited { color: var(--tinte); text-decoration: none; }

a.testlaufzeit-zeile:hover { background: var(--papier); color: var(--hausschrift); text-decoration: none; }

.testlaufzeit-zeile .zeichen, .testlaufzeit-name .zeichen { flex: 0 0 auto; color: var(--tinte-still); }

.testlaufzeit .dialog-fuss { gap: .7rem; padding: 1rem 1.5rem; }

.testlaufzeit .dialog-fuss a.knopf,
.testlaufzeit .dialog-fuss a.knopf:hover { text-decoration: none; }

.testlaufzeit .dialog-fuss a.knopf-haupt,
.testlaufzeit .dialog-fuss a.knopf-haupt:visited { color: #fff; }

/* --- Plattform ---

   Oben die Lage in Zahlen, darunter die Reiter. Die Kacheln sind Knoepfe: wer sieht,
   dass zwei Demos beendet sind, will genau diese zwei sehen, und ein Klick bringt ihn
   hin. Die gewaehlte traegt unten eine Linie in der Hausfarbe — wie der Reiter, der
   zu ihr gehoert. */
button.kachel {
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve), transform var(--takt-kurz) var(--kurve),
        box-shadow var(--takt-kurz) var(--kurve);
}

button.kachel:hover { border-color: var(--marine-hell); transform: translateY(-1px); }

.kachel-gewaehlt {
    border-color: var(--marine);
    box-shadow: var(--glanz), var(--schatten), inset 0 -3px 0 var(--marine);
}

.plattform-kachel-zusatz {
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--tinte-still);
}

/* Die Reiter tragen ihr Zeichen und eine stille Zahl. */
.reiter .zeichen { opacity: .75; }
.reiter-aktiv .zeichen { opacity: 1; }

.reiter-zahl-still { background: var(--papier-kalt); color: var(--tinte-leise); font-weight: 600; }
.reiter-aktiv .reiter-zahl-still { background: var(--marine-blass); color: var(--hausschrift); }

/* Ein Formular, das hinter einem Knopf stand, als eigene Flaeche in der Karte: es
   ist eine Handlung, die man anfaengt und abschliesst, und nicht Teil der Liste. */
.plattform-formular {
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem 1.05rem;
    background: var(--papier-warm);
    border: 1px solid var(--linie-weich);
    border-radius: var(--radius);
}

.plattform-formular-titel { margin-bottom: .7rem; font-weight: 600; color: var(--hausschrift); }

.plattform-formularfuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
    margin-top: .9rem;
}

.plattform-formularfuss .still { flex: 1 1 22rem; font-size: .8rem; }

.plattform-fussknopf { margin-left: auto; }

/* Wo es nichts gibt, sagt die Karte das in ihrer Mitte — mit einem Zeichen, damit
   die leere Flaeche nicht wie ein Ladefehler aussieht. */
.plattform-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: 2rem 1rem;
    color: var(--tinte-still);
    font-size: .88rem;
    text-align: center;
}

.plattform-leer .zeichen { opacity: .55; }

.plattform-zweitzeile { display: block; font-size: .78rem; }

/* Der Einladungsverweis: gruen umrandet wie eine gelungene Meldung, mit einem Knopf
   zum Kopieren — er wird nur einmal ausgegeben. */
.plattform-verweis {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--gut) 25%, transparent);
    border-radius: var(--radius);
    background: var(--gut-blass);
}

.plattform-verweis-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    color: var(--gut);
}

.plattform-verweis-kopf span { color: var(--tinte-leise); }

.plattform-verweis-zeile { display: flex; align-items: center; gap: .5rem; }

.plattform-verweis-zeile .einladungsverweis { display: block; flex: 1; margin: 0; }

.plattform-verweis .still { font-size: .78rem; }

/* Was fuer jeden neuen Demozugang gilt, am Fuss der Liste. */
.plattform-eckdaten {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    margin-top: .6rem;
    padding-top: .8rem;
    border-top: 1px solid var(--linie);
    color: var(--tinte-leise);
    font-size: .78rem;
}

.plattform-eckdaten span { display: inline-flex; align-items: center; gap: .35rem; }

.demoliste-balken-knapp > span { background: var(--warnung); }

.demoliste .zeilenaktionen { justify-content: flex-end; }

/* Die Demozugaenge in der Plattformverwaltung. */
.demoliste-wer { display: block; font-size: .78rem; }

.demoliste-zahl { font-variant-numeric: tabular-nums; }

.demoliste-balken {
    display: block;
    width: 6rem;
    height: 4px;
    margin-top: .25rem;
    border-radius: 999px;
    background: var(--papier-kalt);
    overflow: hidden;
}

.demoliste-balken > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--marine);
}

/* --- Willkommen ---

   Der erste Eindruck: ein Kopf in den Farben der Leiste mit dem goldenen Siegel, darunter
   drei kurze Absaetze und zwei Knoepfe. Kein Formular und keine Liste — wer sich zum
   ersten Mal anmeldet, soll lesen, was ihn erwartet, und mit einem Klick anfangen. */
.willkommen { overflow: hidden; }

.willkommen-kopf {
    position: relative;
    padding: 1.6rem 1.5rem 1.3rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .10), transparent 55%),
        linear-gradient(160deg, var(--marine), var(--marine-hell));
    color: #fff;
}

.willkommen-signet {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .75rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.willkommen-kopf h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

/* Gold mit festem Rueckfall: die Goldtoene der Leiste sind nur in der Kopfleiste
   erklaert, und ausserhalb davon fiel die Unterzeile sonst auf eine geerbte Farbe. */
.willkommen-kopf p {
    margin: .35rem 0 0;
    color: var(--leistengold-hell, #e5d6bb);
    font-size: .88rem;
}

/* Der Koerper eines Dialogs hat sonst nur seitlichen Abstand — hier klebte der erste
   Absatz am Kopf und der letzte an der Fussleiste. */
.willkommen-koerper,
.testlaufzeit-koerper { padding: 1.35rem 1.5rem .75rem; }

.willkommen-koerper p { margin: 0 0 .8rem; line-height: 1.6; }

.willkommen-hinweis {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .6rem .75rem;
    border-radius: var(--radius-klein);
    background: var(--marine-blass);
    color: var(--hausschrift);
    font-size: .86rem;
}

.willkommen-hinweis .zeichen { flex: 0 0 auto; margin-top: .2rem; }

.willkommen-spaeter { font-size: .82rem; }

/* Der Knopf, wie er unten rechts steht — damit man ihn dort wiedererkennt. */
.willkommen-howto {
    display: inline-flex;
    align-items: center;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--marine);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.neuerungen-kopf {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.neuerungen-koerper { padding-bottom: .5rem; }

.neuerungen-stand {
    padding: 1rem 0 .4rem;
    border-bottom: 1px solid var(--linie);
}

.neuerungen-stand:last-child { border-bottom: none; }

.neuerungen-standkopf {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .4rem;
}

.neuerungen-version {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hausschrift);
}

/* Der Abschnitt kommt als Markdown. „Neu" und „Geändert" gliedern ihn, sie
   eroeffnen nichts — deshalb klein und in Versalien wie die Menuetitel. */
.neuerungen-text h3 {
    margin: .8rem 0 .3rem;
    font-family: var(--grotesk);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tinte-still);
}

.neuerungen-text ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.neuerungen-text li { margin-bottom: .45rem; }
.neuerungen-text p { margin: 0 0 .5rem; }
.neuerungen-text strong { color: var(--hausschrift); }

/* Die Links fuehren in die Anwendung. Sie stehen als kleine Sprungmarke hinter dem
   Satz und nicht als unterstrichener Fliesstext — man soll sie finden, ohne dass
   sie den Satz zerreissen. */
.neuerungen-text a {
    display: inline-block;
    margin-left: .15rem;
    padding: 0 .35rem;
    border-radius: var(--radius-klein);
    background: var(--beleg-blass);
    color: var(--beleg);
    font-size: .8em;
    white-space: nowrap;
}

.neuerungen-text a::after { content: " →"; }
.neuerungen-text a:hover { text-decoration: none; filter: brightness(.95); }

/* Die unsichtbare Flaeche, die den Klick daneben abfaengt.

   Ihre Ebene liegt UNTER der Kopfleiste, und das ist der ganze Punkt. Die
   Kopfleiste traegt selbst eine Ebene und bildet damit einen Stapelkontext: was
   in ihr steht — auch die aufgeklappte Liste — bleibt darin gefangen, ganz
   gleich, welche Zahl es traegt. Eine Fangflaeche mit einer hoeheren Zahl legt
   sich deshalb nicht nur ueber den Inhalt, sondern ueber die Leiste mitsamt der
   Liste, die sie eigentlich stehen lassen soll. Dann schluckt sie jeden Klick,
   und die Navigation ist tot, obwohl alles richtig aussieht.

   Unterhalb der Leiste deckt sie genau das ab, was sie soll: alles ausserhalb. */
.kopf-schatten { position: fixed; inset: 0; z-index: 15; }

/* Schmale Fenster: die Beschriftungen der Punkte fallen weg, die Zeichen
   bleiben. Zuerst die Woerter, dann der Mandantentext — in dieser Reihenfolge,
   weil ein Zeichen ohne Wort noch zu erraten ist, ein Mandant ohne Namen nicht. */
@media (max-width: 1180px) {
    .kopf-punkt span, .kopf-haupt span { display: none; }
    .kopf-punkt, .kopf-haupt { padding: 0 .6rem; }
    .kopf-nav .kopf-punkt.active::after { bottom: 1px; }
}

@media (max-width: 820px) {
    .kopf-mandant-text { display: none; }
    .kopf-mandant { max-width: none; padding: 0 .4rem; }
    .kopf-wortmarke { display: none; }
}

/* ==========================================================================
   Aktensync — das Kontrollzentrum der Aktenfreigabe
   ========================================================================== */

/* Die Kopfzeile beantwortet vier Fragen auf einen Blick: laeuft die
   Ueberwachung, tut sie gerade etwas, wann war der letzte Durchgang, wann
   kommt der naechste. Sie steht ueber den Reitern, weil sie fuer jeden von
   ihnen gilt. */
.syncstand {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--gut);
    border-radius: 4px;
}

.syncstand-warnung { border-left-color: var(--fehler); }

.syncstand-feld {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 8rem;
}

.syncstand-feld .feld-titel { margin: 0; }

.syncstand-feld .leise { font-size: .82rem; }

/* Schiebt den Knopf ans Ende der Zeile, ohne dass die Felder davor sich
   dehnen — sie sollen so breit bleiben, wie ihr Inhalt es verlangt. */
.syncstand-tat {
    margin-left: auto;
    align-self: center;
    min-width: 0;
}

/* --- Reiter ---

   Kein Unterstrich als Kennzeichnung: der stand einmal in der Kopfleiste und
   hat dort nicht gefallen. Stattdessen traegt der aktive Reiter die Flaeche
   des Blattes darunter und wird damit Teil davon. */
.reiterleiste {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--linie);
}

.reiter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: var(--tinte-leise);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.reiter:hover { background: var(--papier-kalt); color: var(--hausschrift); }

.reiter-aktiv,
.reiter-aktiv:hover {
    background: var(--papier);
    border-color: var(--linie);
    color: var(--hausschrift);

    /* Deckt die Linie der Leiste ab: der Reiter geht in das Blatt ueber,
       statt davor zu schweben. */
    margin-bottom: -1px;
    padding-bottom: calc(.45rem + 1px);
}

/* Die Zahl der liegengebliebenen Dateien am Reiter. Sie steht dort, damit
   niemand den Reiter oeffnen muss, um zu erfahren, dass nichts anliegt. */
.reiter-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    border-radius: .7rem;
    background: var(--fehler-blass);
    color: var(--fehler);
    font-size: .75rem;
    font-weight: 650;
}

/* --- Probelauf und aufgeklappte Posten --- */

.probelauf {
    padding: .9rem 1rem;
    background: var(--papier-kalt);
    border-left: 3px solid var(--beleg);
    border-radius: 0 4px 4px 0;
}

.probelauf h3 { margin: 0 0 .3rem; font-size: 1rem; }

.probelauf > p:last-of-type { margin-bottom: .6rem; }

.knapp { margin: .4rem 0 0; padding-left: 1.2rem; }

.knapp li { margin: .1rem 0; }

.nichtumbrechen { white-space: nowrap; }

/* --- Aktenbibliothek als Dateifenster -------------------------------------

   Zwei Spalten: die Gliederung links, der Inhalt rechts. Vorher stand die
   Gliederung als Reiterreihe darueber — bei acht Arten uebersichtlich, bei
   dreissig eine Bandwurmzeile, die umbrach und die Tabelle nach unten schob. */

/* Das Gitter nimmt die Hoehe, die zwischen Kopf und Seitenrand uebrig ist, und
   gibt sie beiden Spalten gleich: der Baum ist genau so hoch wie das Fenster
   daneben. Vorher stand er „sticky" mit einer Hoehe aus dem Sichtfeld gerechnet —
   das ergab je nach Kopfhoehe einen Streifen zu viel oder zu wenig, und bei
   offener Vorschau endete er auf halber Hoehe der Liste. */
.aktenexplorer {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid var(--linie);
}

.aktenexplorer-baum {
    /* Eigener Lauf: der Baum wird laenger als seine Spalte, und wer unten in der
       Dateiliste steht, soll oben im Baum weiterklicken koennen, ohne
       zurueckzuscrollen. min-height gehoert dazu — ohne sie waechst die Zelle mit
       dem Inhalt, statt ihn zu scrollen. */
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .4rem 1rem;
    border-right: 1px solid var(--linie);
    background: var(--papier-kalt);
}

/* minmax(0, …) oben und min-width hier: ohne beides sprengt eine breite Tabelle
   das Gitter, statt in ihrem eigenen Lauf zu bleiben. Eine Spalte, weil Filter,
   Tabelle und Blaetterung uebereinander stehen und die Tabelle in der Mitte den
   Rest nehmen soll — sie tragt ihre Bildlaufleiste selbst. */
.aktenexplorer-inhalt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.aktenbaum { display: flex; flex-direction: column; gap: .05rem; }

.baumkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    margin: .85rem .35rem .25rem;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.baumkopf-schmal { margin-top: .5rem; }

.baumzeile {
    /* Der Einzug kommt aus der Tiefe des Knotens. Ueber eine eigene Klasse je
       Ebene waeren es sechs Klassen fuer sechs Ebenen — und bei der siebten
       faengt jemand von vorn an. */
    --baumtiefe: 0;

    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .3rem .45rem .3rem calc(.45rem + (var(--baumtiefe) * .8rem));
    border: none;
    border-radius: var(--rundung);
    background: none;
    font: inherit;
    font-size: .8rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.baumzeile:hover { background: rgba(0, 0, 0, .05); }

.baumzeile.aktiv {
    background: var(--marke-blass);
    color: var(--marke);
    font-weight: 600;
}

.baumzeile-wurzel { margin-bottom: .2rem; font-weight: 600; }

/* Der Name weicht, nicht die Zahl: welcher Ordner es ist, sagt schon der Einzug
   samt Kurzinfo — wie viel darin liegt, steht nur hier. */
.baumname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.baumzahl {
    flex: 0 0 auto;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: #8a8a8a;
}

.baumzeile.aktiv .baumzahl { color: var(--marke); }

/* Die Pflegeknoepfe erscheinen erst, wenn die Maus darauf liegt. Staendig
   sichtbar waeren sie zwei Zeichen neben jedem Ordnernamen, und die Spalte
   liest sich dann wie eine Werkzeugleiste und nicht wie eine Gliederung. */
.baumzeile-reihe {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.baumzeile-reihe .baumzeile { padding-left: calc(.45rem + (var(--baumtiefe) * .8rem)); }

.baumwerkzeuge {
    display: flex;
    gap: .1rem;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity .12s ease;
}

.baumzeile-reihe:hover .baumwerkzeuge,
.baumwerkzeuge:focus-within { opacity: 1; }

.baumknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: none;
    border-radius: var(--rundung);
    background: none;
    color: #7a7a7a;
    cursor: pointer;
}

.baumknopf:hover { background: rgba(0, 0, 0, .08); color: inherit; }

/* Der Papierkorb am leeren Ordner. Die Warnfarbe erst beim Darauffahren — dieselbe
   Ueberlegung wie in der Dateiliste: staendig rot waere der Baum eine Reihe von
   Warnungen, und gewarnt wird vor der Handlung und nicht vor dem Ordner. */
.baumknopf-warnung:hover { background: var(--fehler-blass); color: var(--fehler); }

/* --- Ziehen und ablegen ---------------------------------------------------

   Eine Unterlage laesst sich in einen Ordner ziehen — aus der Dateiliste oder aus
   den losen Dateien im Baum; die Datei wird dann auf der Freigabe wirklich dorthin
   verschoben. Weil dabei etwas auf dem Laufwerk der Kanzlei bewegt wird, darf kein
   Schritt davon geraten sein. Vier Zeichen sagen es:

     1. der Griff — was sich anfassen laesst, zeigt es am Zeiger;
     2. das Unterwegs — was am Zeiger haengt, verblasst an seinem alten Platz;
     3. die moeglichen Ziele — solange etwas unterwegs ist, geben sie sich zu erkennen;
     4. das getroffene Ziel — kraeftig, und mit dem Wort „hierher" anstelle der Zahl.

   Und danach das fuenfte: der Ordner leuchtet kurz auf. Die gezogene Zeile ist aus
   der Liste verschwunden, und ohne dieses Zeichen bliebe offen, wohin. */

.aktentabelle tr[draggable="true"],
.baumdatei[draggable="true"] { cursor: grab; }

/* Was unterwegs ist, bleibt sichtbar und verblasst nur. Ganz auszublenden hiesse,
   die Liste unter der Hand zusammenrutschen zu lassen — und damit das Ziel zu
   verschieben, waehrend die Hand darauf zielt. */
.aktentabelle tr.zeile-gezogen,
.baumdatei-gezogen { opacity: .4; }

/* --- Die losen Dateien im Baum ---

   Der Mandantenordner hat keine Zeile mehr; was unmittelbar darin liegt, steht
   stattdessen hier. Etwas heller als die Ordner: es sind Dateien und keine
   Gliederung, und die Gliederung ist das, worin man sich orientiert. */
.baumdatei { color: var(--tinte-still); }

.baumdatei .zeichen { color: var(--tinte-leise); flex: 0 0 auto; }

.baumdatei:hover { color: inherit; }

.baumzeile-mehr {
    font-size: .74rem;
    font-style: italic;
    color: var(--tinte-leise);
}

/* Der Hinweis im Kopf, solange etwas unterwegs ist: die Ueberschrift „Ablage" ist
   selbst ein Ziel — dort landet, was aus einem Ordner heraussoll. Ohne diesen Satz
   waere sie ein Ziel, das niemand findet. */
.baumhinweis {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--marke);
}

/* --- Die Ziele ---

   Solange nichts unterwegs ist, sieht der Baum aus wie zuvor. Erst mit der Klasse
   „zieht" am Rahmen treten die Ziele hervor — und zwar alle zugleich, damit die Hand
   weiss, wo sie hinkann, bevor sie es ausprobiert. */
.baumziel-moeglich,
.baumkopf-ablage {
    border-radius: var(--rundung);
    transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.zieht .baumziel-moeglich {
    background: rgba(0, 0, 0, .022);
    box-shadow: inset 0 0 0 1px var(--linie-stark);
}

/* Ein Ordner, der gerade selbst am Zeiger haengt, ist kein Ziel fuer sich selbst.
   Er tritt zurueck wie eine gezogene Datei. */
.baumordner-gezogen { opacity: .4; }

/* Das getroffene Ziel. Kraeftiger als die Auswahl, weil es etwas anderes sagt: nicht
   „hier sind Sie", sondern „hier landet es". Der Versatz nach rechts ist der Rest der
   Auskunft — die Zeile weicht dem Zeiger aus wie eine Schublade, die aufgeht.

   Die ganze Zeile nimmt die Hausfarbe an und nicht nur einen Umriss. Der Aktenbaum
   hatte einmal die blasse Fassung: heller Grund, feine Kante. Sie war korrekt und
   ging zwischen zwanzig Ordnerzeilen unter — man musste die Kante suchen, um zu
   sehen, wo etwas landet. Der Gespraechsbaum in der Beratung hatte laengst die
   farbige, und sie ist auf einen Blick zu lesen. Jetzt haben beide dieselbe: derselbe
   Griff, dieselbe Antwort. */
.baumziel {
    background: var(--marke);
    box-shadow: none;
    transform: translateX(2px);
}

.baumziel .baumzeile,
.baumziel .baumzeile .zeichen,
.baumziel .ordnergriff { color: var(--papier); }

.baumziel .baumzeile { background: none; font-weight: 600; }

.baumkopf-ablage.baumziel { background: var(--marke); color: var(--papier); }

/* Die Marke sitzt auf der farbigen Zeile und muss sich davon abheben — also
   umgekehrt: helles Feld, dunkle Schrift. */
.baumziel .baumziel-marke {
    background: var(--papier);
    color: var(--marke);
}

/* „hierher" steht an der Stelle, an der sonst die Zahl steht, und kommt von rechts
   herein. Die Zahl waere in diesem Moment die falsche Auskunft: gefragt ist nicht,
   wie viel darin liegt, sondern was beim Loslassen geschieht. */
.baumziel-marke {
    flex: 0 0 auto;
    padding: .05rem .3rem;
    border-radius: var(--rundung);
    background: var(--marke);
    color: var(--papier);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: zielmarke .16s ease-out both;
}

@keyframes zielmarke {
    from { opacity: 0; transform: translateX(.35rem); }
    to   { opacity: 1; transform: none; }
}

/* --- Angekommen ---

   Ein einmaliges Aufleuchten am Ziel, nachdem die Datei dort liegt. Kurz und ohne
   Bewegung des Umrisses: es soll den Blick holen und nicht die Zeile verschieben.
   Der Schluessel der Zeile im Markup enthaelt dieses Aufleuchten, damit es auch beim
   zweiten Ablegen in denselben Ordner noch einmal laeuft. */
/* Der Farbwechsel beim Ablegen beginnt dort, wo das getroffene Ziel aufhoerte —
   volle Hausfarbe —, haelt einen Moment und laeuft aus. Damit ist der Uebergang vom
   „hier landet es" zum „hier liegt es" eine Bewegung und nicht zweimal dasselbe
   Aufblitzen. Dieselbe Animation wie im Gespraechsbaum: es ist derselbe Vorgang. */
.baumziel-frisch { animation: ordnerangekommen 1.1s var(--kurve) both; }

.baumziel-frisch .baumzeile,
.baumziel-frisch .baumzeile .zeichen,
.baumziel-frisch .ordnergriff { animation: ordnerangekommen-schrift 1.1s var(--kurve) both; }

/* Wer Bewegung abgestellt hat, bekommt dieselbe Auskunft ohne sie. Farbe und Umriss
   bleiben — sie sind die Auskunft; die Bewegung war nur ihre Betonung. */
@media (prefers-reduced-motion: reduce) {
    .baumziel-moeglich,
    .baumkopf-ablage { transition: none; }

    .baumziel { transform: none; }

    .baumziel-marke { animation: none; }

    .baumziel-frisch,
    .ordnerziel-frisch { animation: ordnerangekommen 1.1s step-end both; }

    .baumziel-frisch .baumzeile,
    .baumziel-frisch .baumzeile .zeichen,
    .baumziel-frisch .ordnergriff,
    .ordnerziel-frisch .baumzeile,
    .ordnerziel-frisch .baumzeile .zeichen,
    .ordnerziel-frisch .ordnergriff { animation: ordnerangekommen-schrift 1.1s step-end both; }
}

/* --------------------------------------------- Der Gespraechsordnerbaum

   Dieselbe Sprache wie der Aktenbaum und mit denselben Klassen: baumzeile,
   baumzahl, baumziel. Zwei verschiedene Arten, in dieser Anwendung etwas
   einzusortieren, waeren eine zu viel — und die zweite waere die, an die
   niemand denkt.

   Was hier anders ist, ist der Platz: dreihundert Pixel statt fuenfzehn
   Zentimeter. Deshalb enger gesetzt, mit einem Klappgriff statt eines
   Einzugs allein, und mit einer Hoehengrenze — der Baum darf die Liste
   darunter nicht verdraengen, denn sie ist, wofuer man herkommt. */
/* Oben stehen bleibt er nicht selbst, sondern mit dem ganzen Kopf des Fachs
   (.gespraechskopf) — Knopf und Baum kleben gemeinsam, sonst schoebe sich der
   eine unter den anderen. */
.ordnerbaum {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    max-height: 40vh;
    overflow-y: auto;
    margin: .5rem 0 .3rem;
    padding: .3rem .25rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
    box-shadow: 0 2px 6px -4px rgba(26, 35, 50, .35);
}

.ordnerbaum .baumzeile { font-size: .76rem; }
.ordnerbaum .baumkopf { margin: .5rem .3rem .2rem; }
.ordnerbaum .baumzeile-wurzel { margin-bottom: .1rem; }

/* --- Der Einzug ---

   Er sitzt an der ganzen Zeile und nicht am Text darin. Vorher trug ihn die
   innere Schaltflaeche: der Ordnername ruecke ein, der Klappgriff davor blieb auf
   der Flucht — und damit sah die Gliederung aus wie eine Liste mit unruhigem
   Flattersatz. Jetzt wandert die Zeile als Ganzes nach rechts, Griff voran, so
   wie in einem Dateifenster.

   Zugleich die Trefferflaeche: eine Ordnerzeile ist ein Ziel, auf das man mit der
   Maus wirft, und ein Ziel von zwanzig Pixeln Hoehe trifft man daneben. Das
   Polster gehoert deshalb an die Reihe und nicht an die Schaltflaeche — es zaehlt
   mit zur Flaeche, die den Wurf annimmt. */
.ordnerbaum .baumzeile-reihe {
    position: relative;
    padding: .12rem .1rem .12rem calc(.1rem + var(--baumtiefe, 0) * 1rem);
    border-radius: var(--rundung);
}

/* Der Einzug steht schon an der Reihe — die Schaltflaeche darf ihn nicht ein
   zweites Mal auftragen, sonst waechst er quadratisch mit der Tiefe. */
.ordnerbaum .baumzeile-reihe .baumzeile { padding-left: .35rem; }

/* Die Fuehrungslinie zum Ordner darueber. Ohne sie ist bei drei Ebenen nicht mehr
   zu sehen, welcher Ordner zu welchem gehoert — der Abstand allein sagt „weiter
   rechts", aber nicht „darunter". */
.ordnerzweig-tief::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(.1rem + (var(--baumtiefe, 1) - 1) * 1rem + .45rem);
    width: 1px;
    background: var(--linie);
}

/* Auf der gefuellten Zielzeile hat sie nichts zu suchen: sie laege als Strich
   auf der Hausfarbe und sagte dort nichts mehr, was die Faerbung nicht schon
   sagt. */
.ordnerzweig-tief.baumziel::before,
.ordnerzweig-tief.ordnerziel-frisch::before { display: none; }

/* Der Klappgriff sitzt vor dem Ordnerzeichen und dreht sich beim Zuklappen zur
   Seite — dieselbe Sprache wie in jedem Dateibaum. Ein leerer Platzhalter steht
   an Ordnern ohne Inhalt, damit die Namen darunter auf einer Flucht bleiben. */
.ordnergriff {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
    padding: 0;
    border: none;
    border-radius: var(--rundung);
    background: none;
    color: var(--tinte-leise);
    cursor: pointer;
    transition: transform .15s ease;
}

.ordnergriff:hover { color: var(--tinte); background: rgba(0, 0, 0, .06); }

.ordnergriff.zu { transform: rotate(-90deg); }

.ordnergriff-leer { cursor: default; }
.ordnergriff-leer:hover { background: none; }

.ordnerbaum-leer {
    margin: .3rem .35rem .45rem;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--tinte-leise);
}

/* Das Ziel fuer den Weg nach oben. Es erscheint nur, waehrend ein Ordner
   unterwegs ist: staendig sichtbar waere es eine Zeile, die nichts tut, und der
   Baum hat die Zeile nicht uebrig. */
.ordnerbaum-oben {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .1rem .2rem .25rem;
    padding: .3rem .45rem;
    border: 1px dashed var(--linie-stark);
    border-radius: var(--rundung);
    font-size: .68rem;
    letter-spacing: .02em;
    color: var(--tinte-still);
}

.ordnerbaum-lose { margin-top: .25rem; border-top: 1px solid var(--linie); }

/* --- Angekommen ---

   Der Farbwechsel beim Ablegen. Er beginnt dort, wo das getroffene Ziel aufhoerte
   — volle Hausfarbe —, haelt einen Moment und laeuft dann aus. So ist der
   Uebergang vom „hier landet es" zum „hier liegt es" eine einzige Bewegung und
   nicht zweimal dasselbe Aufblitzen. Das gezogene Gespraech ist in diesem Moment
   aus der Liste verschwunden; ohne dieses Zeichen bliebe offen, wohin. */
.ordnerziel-frisch { animation: ordnerangekommen 1.1s var(--kurve) both; }

.ordnerziel-frisch .baumzeile,
.ordnerziel-frisch .baumzeile .zeichen,
.ordnerziel-frisch .ordnergriff { animation: ordnerangekommen-schrift 1.1s var(--kurve) both; }

@keyframes ordnerangekommen {
    0%   { background: var(--marke); transform: translateX(2px); }
    45%  { background: var(--marke); transform: none; }
    100% { background: transparent; transform: none; }
}

@keyframes ordnerangekommen-schrift {
    0%   { color: var(--papier); font-weight: 600; }
    45%  { color: var(--papier); font-weight: 600; }
    100% { color: inherit; font-weight: inherit; }
}

/* Was unterwegs ist, bleibt sichtbar und verblasst nur. Ganz auszublenden
   hiesse, die Liste unter der Hand zusammenrutschen zu lassen — und damit das
   Ziel zu verschieben, waehrend die Hand darauf zielt. */
.gespraechsliste li.gespraech-gezogen { opacity: .4; }
.gespraechsliste li[draggable="true"] { cursor: grab; }

/* Wo ein Gespraech liegt, steht leise an seiner Zeile — und nur, wenn die Liste
   quer ueber alle Ordner geht. Im geoeffneten Ordner stuende an jeder Zeile
   dasselbe Wort. */

/* Geteilte Gespraeche. Die Marke steht in der Farbe der Belege und nicht in der
   Hausfarbe der Einordnung: sie sagt nichts darueber, worum es geht, sondern wer
   mitliest — eine andere Art Auskunft, also ein anderer Ton. */
.geteilt-marke {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    margin-top: .3rem;
    padding: .1rem .4rem;
    overflow: hidden;
    border-radius: var(--radius-klein);
    background: var(--beleg-blass);
    color: var(--beleg);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geteilt-marke .zeichen { flex: 0 0 auto; }

/* In der Vorgangsleiste neben dem Griff, mit etwas Luft zum Zusammenfassen. */
.geteilt-marke-leiste {
    flex: 0 1 auto;
    margin: 0 .75rem 0 0;
    font-size: .74rem;
}

/* Das private Gespraech eines Kollegen, das der Berufstraeger zur Aufsicht sieht:
   neutral, weil es keine Einladung zum Mitschreiben ist. */
.geteilt-marke-privat {
    background: var(--papier-kalt);
    color: var(--tinte-leise);
}

/* Der Schalter am Fragefeld traegt Zeichen und Wort: „Privat" oder „Kanzlei" ist
   eine Entscheidung, die man lesen koennen soll, und ein Schloss allein sagt sie
   nicht eindeutig. */
.sichtbarkeitsschalter {
    width: auto;
    gap: .3rem;
    padding: 0 .5rem;
    font-size: .74rem;
    font-family: inherit;
}

.sichtbarkeitsschalter.aktiv,
.sichtbarkeitsschalter.aktiv:hover:not(:disabled) {
    background: var(--beleg-blass);
    color: var(--beleg);
}

.sichtbarkeitsschalter:disabled { opacity: .75; }

/* Wo mehrere fragen, steht der Name vor der Uhrzeit — dieselbe stille Schrift,
   damit er einordnet und nicht mit der Frage konkurriert. */
.zug-verfasser {
    margin-right: .35rem;
    font-weight: 600;
    color: var(--tinte-leise);
}

/* Bild oder Initialen statt des allgemeinen Zeichens. Der Kreis kommt aus dem
   Benutzerbild selbst; der Absender gibt nur den Platz. */
.zug-absender-person {
    background: none;
    overflow: hidden;
}

.zug-absender-person .benutzerbild { border-radius: 50%; }

/* Der Papierkorb am Ordner faerbt sich erst beim Zeigen. Staendig rot waere er
   eine Warnung an einer Zeile, an der nichts zu warnen ist. */
.baumknopf-warnung:hover { background: var(--fehler-blass); color: var(--fehler); }

/* Das Eingabefeld in der schmalen Spalte: untereinander statt nebeneinander —
   in dreihundert Pixeln waeren Beschriftung, Feld und zwei Knoepfe in einer
   Zeile jeweils vier Zeichen breit. */
.ordnerfeld-schmal {
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 .5rem;
    padding: .5rem;
    font-size: .74rem;
}

.ordnerfeld-schmal > span:first-child { flex: 1 0 100%; }
.ordnerfeld-schmal .feld { flex: 1 0 100%; }

.ordnermeldung { margin: 0 0 .5rem; font-size: .74rem; }

/* Der Knopf, mit dem die Spalte anfaengt. Er traegt die Hausfarbe und die volle
   Breite: „von vorn beginnen" ist die haeufigste Handlung hier und die einzige,
   die man sucht, bevor man etwas anderes gefunden hat. Als blanker Knopf stand er
   zwischen Titel und Suchfeld und sah aus wie deren Beschriftung. */
/* Der Kopf des Fachs — Knopf, Ordnerbaum, Ordnerfeld — klebt als Ganzes oben,
   waehrend die Liste darunter durchlaeuft. Er traegt den Grund des Fachs, damit
   nichts durchscheint, und blendet nach unten weich aus — eine harte Kante saehe
   aus, als sei die Liste abgeschnitten. Die negativen Raender ziehen ihn ueber das
   Polster des Fachs, sonst liefe die Liste links und rechts daneben sichtbar
   weiter. */
.gespraechskopf {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -1.25rem;
    padding: .85rem 1.25rem .55rem;
    background: var(--papier);
}

.gespraechskopf::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .6rem;
    background: linear-gradient(to bottom, var(--papier), transparent);
    pointer-events: none;
}

.neues-gespraech {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: .5rem .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--schatten);
}

.neues-gespraech .zeichen { flex: 0 0 auto; }

.neues-gespraech:hover:not(:disabled) { box-shadow: var(--schatten-hoch); }

/* Das Feld fuer einen neuen oder umbenannten Ordner. Ueber der Liste und nicht
   im Baum: dort waere es drei Zeichen breit. */
.ordnerfeld {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--linie);
    background: var(--papier-kalt);
}

/* Umbenennen mitten in der Zeile. Das Feld nimmt die Breite der Zelle, damit ein
   langer Dateiname hineinpasst — er ist der Vorschlag, den man aendert. */
.namensfeld {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.namensfeld .feld { flex: 1 1 14rem; min-width: 10rem; }

/* Unter tausend Pixeln liegt der Baum ueber der Liste statt daneben. Zwei
   Spalten auf einem schmalen Fenster hiessen: fuenf Zeichen Ordnername neben
   fuenf Zeichen Dateiname. */
@media (max-width: 1000px) {
    /* Zwei Reihen statt zwei Spalten: der Baum nimmt oben, was er braucht — bis zu
       sechzehn Zeilen —, die Liste darunter den Rest. Beide behalten ihren eigenen
       Lauf, damit die Seite als Ganzes weiter feststeht. */
    .aktenexplorer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .aktenexplorer-baum {
        max-height: 16rem;
        border-right: none;
        border-bottom: 1px solid var(--linie);
    }
}


/* ===================================================================== */
/* E-Mail-Assistent                                                      */
/* ===================================================================== */

/* Zwei Spalten: links, was hereinkam und wie geantwortet werden soll, rechts die
   Entwuerfe. Die Trennung ist die Arbeitsteilung — links wird eingestellt, rechts
   gelesen und weitergegeben. Beide Spalten haben ihren eigenen Lauf, damit das
   Einstellen nicht die Entwuerfe verschiebt und umgekehrt.

   <b>Der Zuschnitt eines Mailprogramms.</b> Dort ist die Seite, auf der ausgewaehlt
   und eingestellt wird, leicht getoent, und das Blatt, auf dem die Nachricht steht,
   ist weiss. Genau umgekehrt war es hier: die Eingabe stand auf Weiss und die
   Entwuerfe auf getoentem Grund — die Seite las sich als Formular mit Ausgabe
   daneben und nicht als Mail neben ihrer Antwort. */
.postfach {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    height: 100%;
    overflow: hidden;
}

.postfach-eingang,
.postfach-entwuerfe {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    padding: 1.25rem;
}

.postfach-eingang {
    gap: .9rem;
    border-right: 1px solid var(--linie);
    background: var(--papier-warm);
}

.postfach-entwuerfe { gap: .75rem; background: var(--papier); }

/* --- Die Nachrichtenkarte ---

   Kopf und Koerper, wie eine Nachricht in einem Mailprogramm: eine Zeile mit
   Zeichen und Titel, darunter der Text ohne eigenen Rahmen. Der Rahmen liegt um
   beides — dadurch gehoert der Text sichtbar zu seiner Ueberschrift, statt als
   grauer Kasten darunter zu stehen. */
.mailkarte {
    display: flex;
    flex-direction: column;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    overflow: hidden;
    transition: border-color var(--takt-kurz) var(--kurve),
                box-shadow var(--takt-kurz) var(--kurve);
}

/* Beim Schreiben tritt die Karte hervor — dieselbe Auskunft, die ein Feld mit
   seinem Fokusrahmen gibt, nur fuer die ganze Nachricht. */
.mailkarte:focus-within {
    border-color: var(--marine-hell);
    box-shadow: var(--ring);
}

.mailkarte-kopf {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    background: var(--papier-kalt);
    border-bottom: 1px solid var(--linie);
}

/* Der Kreis mit dem Zeichen steht dort, wo ein Mailprogramm das Bild des Absenders
   zeigt. Er nennt keinen Absender — den kennt diese Anwendung nicht —, sondern die
   Art der Nachricht: eingegangen oder selbst verfasst. */
.mailkarte-bild {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--marine);
    color: #fff;
}

.mailkarte-bild-still { background: var(--papier); color: var(--tinte-still); box-shadow: inset 0 0 0 1px var(--linie-stark); }

.mailkarte-zeilen { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.mailkarte-titel { font-size: .84rem; font-weight: 600; color: var(--hausschrift); cursor: text; }

.mailkarte-still { font-size: .72rem; color: var(--tinte-still); }

/* Der Koerper traegt keinen eigenen Rahmen: er ist der Inhalt der Karte und nicht
   ein Feld darin. Die Laufweite ist die einer Mail — keine engere Zeile, keine
   Serifen, nichts, was den Text zu einem Zitat machte. */
.mailkarte-koerper {
    width: 100%;
    min-height: 9rem;
    padding: .7rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--tinte);
    resize: vertical;
}

.mailkarte-koerper:focus { outline: none; }

.mailkarte-koerper-kurz { min-height: 4.5rem; }

.postfach-beurteilen {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.postfach-beurteilen .still { display: inline-flex; align-items: center; gap: .3rem; }

/* Was Curi aus der eingegangenen Mail liest. Blass gerahmt und nicht als Meldung:
   es ist eine Lesehilfe und keine Warnung. */
.beurteilung {
    padding: .7rem .8rem;
    background: var(--marine-blass);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}

.beurteilung-titel {
    margin-bottom: .35rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinte-still);
}

.beurteilung-titel:not(:first-child) { margin-top: .7rem; }

.beurteilung-liste { margin: 0; padding-left: 1.1rem; font-size: .87rem; }

.beurteilung-liste li { margin-bottom: .25rem; }

.beurteilung-hinweise { color: var(--warnung); }

.beurteilung-uebernehmen {
    margin-left: .4rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--beleg);
    font: inherit;
    font-size: .76rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.beurteilung-uebernehmen:hover { color: var(--hausschrift); text-decoration-style: solid; }

.beurteilung p.still { margin: .5rem 0 0; }

/* --- Der Ton --- */

/* Neun Schaltflaechen, die umbrechen duerfen. Sie sind die Entscheidung dieser Seite
   und stehen deshalb offen da statt in einer Auswahlliste. */
/* --- Das Stellwerk: wie geschrieben werden soll ---

   Ein Panel und nicht drei. Vorher stand der Ton in einem eigenen Feld und die vier
   Feineinstellungen in einem zweiten Block darunter — als waeren es verschiedene
   Dinge. Es ist aber eine Entscheidung mit fuenf Stellschrauben. */

.stellwerk {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .7rem .8rem .8rem;
    background: var(--papier-kalt);
    border: 1px solid color-mix(in srgb, var(--linie) 55%, transparent);
    border-radius: var(--radius);
}

.stellwerk-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

/* Der gewaehlte Ton im Kopf: in einer Reihe aus neun Knoepfen sucht das Auge ihn
   sonst jedes Mal neu. */
.stellwerk-stand {
    font-size: .78rem;
    font-weight: 600;

    /* Nicht --marine: das ist im dunklen Thema die Flaeche der Leiste und als
       Schrift darauf unsichtbar. */
    color: var(--hausschrift);
}

/* Die vier Kleinen nebeneinander. Untereinander nahmen sie vier Zeilen fuer acht
   Knoepfe — und der Ton darueber verlor dadurch seinen Zusammenhang mit ihnen. */
.stellwerk-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .55rem .7rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--linie);
}

.stellwerk-stueck { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.stellwerk-marke {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.wahlreihe { display: flex; flex-wrap: wrap; gap: .25rem; }

.wahlknopf {
    padding: .25rem .55rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    color: var(--tinte-leise);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.wahlknopf-zahl { min-width: 1.9rem; text-align: center; font-variant-numeric: tabular-nums; }

.wahlknopf:hover { border-color: var(--marine-hell); color: var(--tinte); }

.wahlknopf.aktiv {
    background: var(--marke-blass);
    border-color: var(--marine-hell);
    color: var(--hausschrift);
    font-weight: 500;
}

.wahlknopf:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: 1px; }

/* Das kompakte Stellwerk: fuenf Stellschrauben in einer Zeile. Jede ist ein
   kleines Feld mit ihrer Marke oben und dem, was gilt, darunter — wie ein
   Eintrag auf einem Formblatt, nur dass ein Klick ihn aendert. */
.stellwerk-kompakt { gap: .5rem; padding: .65rem .75rem .7rem; }

.stellzeile {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.stellwahl {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    flex: 1 1 7.5rem;
    min-width: 0;
    padding: .3rem .6rem .35rem;
    background: var(--papier);
    border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent);
    border-radius: var(--radius-klein);
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve),
                box-shadow var(--takt-kurz) var(--kurve);
}

.stellwahl:hover { border-color: var(--marine-hell); }

.stellwahl:focus-within {
    border-color: var(--marine-hell);
    box-shadow: 0 0 0 3px var(--marine-blass);
}

.stellwahl-ton { flex: 2 1 11rem; }

.stellwahl-schalter { flex: 0 0 auto; cursor: default; }

.stellwahl-marke {
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--tinte-still);
}

/* Die Liste selbst ohne eigenes Kleid: das Feld drumherum ist der Rahmen, und
   der Pfeil rechts sagt, dass sich hier etwas aufklappen laesst. */
.stellwahl select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0 1.2rem 0 0;
    border: none;
    background: transparent;
    color: var(--tinte);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    outline: none;
    text-overflow: ellipsis;
}

.stellwahl select option { background: var(--papier); color: var(--tinte); }

.stellwahl:not(.stellwahl-schalter)::after {
    content: "";
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    width: .36rem;
    height: .36rem;
    border-right: 1.5px solid var(--tinte-still);
    border-bottom: 1.5px solid var(--tinte-still);
    transform: rotate(45deg);
    pointer-events: none;
    transition: border-color var(--takt-kurz) var(--kurve);
}

.stellwahl:hover::after { border-color: var(--hausschrift); }

/* Sie oder Du: zwei Moeglichkeiten, beide sichtbar, die gewaehlte hell
   herausgehoben — wie ein Schiebeschalter. */
.umschalter {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    margin-top: .05rem;
    padding: 2px;
    background: var(--papier-kalt);
    border-radius: 999px;
}

.umschalter button {
    padding: 0 .65rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--tinte-leise);
    font: inherit;
    font-size: .8rem;
    line-height: 1.45;
    cursor: pointer;
}

.umschalter button:hover { color: var(--tinte); }

.umschalter button.aktiv {
    background: var(--papier);
    color: var(--hausschrift);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(40, 36, 28, .12);
}

.umschalter button:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: 1px; }

.postfach-abschicken {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding-top: .2rem;
}

.postfach-abschicken .knopf { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Das Adressbuch im Schreibassistenten ---

   Die Ansprechpartner aller Mandanten, mit einem Klick in An, Cc oder Bcc. Je
   Person drei kleine Knoepfe statt eines Menues: wer schreibt, weiss, in welches
   Feld jemand gehoert, und soll es nicht erst aufklappen muessen. */
.adressbuch {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .55rem .7rem .65rem;
}

.adressbuch-rechts {
    margin: .2rem 0 .4rem;
    background: var(--papier-kalt);
    border-radius: var(--radius-klein);
}

.adressbuch-suche { padding: .35rem .6rem; font-size: .84rem; }

.adressbuch-leer { margin: .2rem 0; font-size: .8rem; }

.adressbuch-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    max-height: 16rem;
    overflow-y: auto;
}

.adressbuch-eintrag {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .32rem .45rem;
    border-radius: var(--radius-klein);
    transition: background var(--takt-kurz) var(--kurve);
}

.adressbuch-eintrag:hover { background: var(--marine-blass); }

/* Die Leute des gewaehlten Mandanten stehen oben und tragen einen Strich. */
.adressbuch-eigen { box-shadow: inset 2px 0 0 var(--marine-hell); }

.adressbuch-person { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.adressbuch-name {
    font-size: .85rem;
    color: var(--tinte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adressbuch-zusatz {
    font-size: .72rem;
    color: var(--tinte-still);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adressbuch-ziele { display: inline-flex; gap: 2px; flex: 0 0 auto; }

.adressbuch-ziel {
    min-width: 2.2rem;
    padding: .08rem .4rem;
    border: none;
    border-radius: 999px;
    background: var(--papier-kalt);
    color: var(--tinte-leise);
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.adressbuch-eintrag:hover .adressbuch-ziel { background: var(--papier); }

.adressbuch-ziel:hover { color: var(--hausschrift); }

.adressbuch-ziel.aktiv,
.adressbuch-eintrag:hover .adressbuch-ziel.aktiv {
    background: var(--hausschrift);
    color: var(--papier);
}

.adressbuch-ziel:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: 1px; }

.adressbuch-umschalter {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--tinte-still);
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    white-space: nowrap;
}

.adressbuch-umschalter:hover,
.adressbuch-umschalter.aktiv { background: var(--marine-blass); color: var(--hausschrift); }

/* Die gewaehlten Empfaenger links bei der neuen Mail: als Marken, je mit Feld. */
.empfaengerchips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .55rem .7rem 0;
}

.empfaengerchip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .1rem .2rem .1rem .25rem;
    border-radius: 999px;
    background: var(--marine-blass);
    color: var(--hausschrift);
    font-size: .8rem;
}

.empfaengerchip-feld {
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--papier);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.empfaengerchip-weg {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--tinte-still);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}

.empfaengerchip-weg:hover { background: var(--papier); color: var(--fehler); }

/* --- Die drei Wege: antworten, neu schreiben, korrigieren ---

   Eine Spur mit drei Reitern, dieselbe Form wie die Arbeitsbereiche in der
   Kopfleiste — nur auf Papier statt auf Marine. Der gewaehlte Weg ist das Blatt,
   das obenauf liegt. */
.moduswahl {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: 10px;
}

.moduswahl-knopf {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 2rem;
    padding: 0 .6rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--tinte-leise);
    font: inherit;
    font-size: .84rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.moduswahl-knopf .zeichen { opacity: .7; }

.moduswahl-knopf:hover:not(:disabled) { background: var(--papier); color: var(--tinte); }

.moduswahl-knopf.aktiv {
    background: var(--papier);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 1px var(--linie);
    color: var(--hausschrift);
    font-weight: 600;
}

.moduswahl-knopf.aktiv .zeichen { opacity: 1; }

.moduswahl-knopf:disabled { cursor: default; }

.moduswahl-knopf:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: 1px; }

/* Was aus den Kopfzeilen der eingefuegten Mail gelesen wurde — eine stille Zeile
   unter dem Text, im Ton der Belege: eine Auskunft, keine Warnung. */
.mailkarte-adressen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .45rem .7rem;
    border-top: 1px solid var(--linie);
    background: var(--beleg-blass);
    color: var(--beleg);
    font-size: .78rem;
}

.mailkarte-adressen .still { margin-left: auto; font-size: .72rem; }

/* Die Anlaesse einer neuen Mail: kleine Knoepfe ueber dem Feld, wie die
   Feilvorschlaege rechts — dieselbe Geste, ein Klick setzt Text. */
.anlasswahl {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .55rem .7rem 0;
}

.anlassknopf {
    padding: .2rem .55rem;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--tinte-leise);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
}

.anlassknopf:hover {
    border-color: var(--marine-hell);
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.postfach-hinweis { margin: -.2rem 0 0; font-size: .76rem; }

/* Die zwei Stufen der Korrektur als Karten mit Satz: der Unterschied zwischen
   ihnen ist eine Zusage — was bleibt und was nicht —, und die steht dabei. */
.korrekturstufen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}

.korrekturstufe {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .55rem .65rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    color: var(--tinte);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--takt-kurz) var(--kurve), box-shadow var(--takt-kurz) var(--kurve);
}

.korrekturstufe:hover { border-color: var(--marine-hell); }

.korrekturstufe.aktiv {
    border-color: var(--marine);
    box-shadow: 0 0 0 1px var(--marine);
}

.korrekturstufe-name { font-size: .84rem; font-weight: 600; color: var(--hausschrift); }

.korrekturstufe-text { font-size: .74rem; line-height: 1.45; color: var(--tinte-leise); }

@media (max-width: 720px) {
    .korrekturstufen { grid-template-columns: 1fr; }
}

/* An, Cc, Bcc: dieselbe Linienzeile wie der Betreff, nur leiser gesetzt — die
   Adressen ordnen die Mail ein, der Betreff traegt sie. */
.entwurfszeile-adresse { align-items: center; }

.entwurfszeile-adresse .entwurfszeile-marke { width: 2.4rem; }

.entwurfsadresse {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .86rem;
    color: var(--tinte);
}

.entwurfsadresse:focus { outline: none; }

.entwurfsadresse::placeholder { color: var(--tinte-still); }

.entwurfszeile-adresse:focus-within { border-bottom-color: var(--marine-hell); }

.entwurfszeile-warnung {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--warnung);
}

/* Was die Korrektur geaendert hat, unter dem Text. */
.korrekturliste {
    margin-top: .5rem;
    padding: .6rem .75rem;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    font-size: .8rem;
    color: var(--tinte-leise);
}

.korrekturliste-titel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: var(--hausschrift);
}

.korrekturliste ul { margin: .35rem 0 0; padding-left: 1.2rem; }

.korrekturliste li { margin-bottom: .15rem; }

/* --- Rechts: die Entwuerfe --- */

.entwurfskopf {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.entwurfskopf-titel {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--hausschrift);
}

.entwurfskopf-zeit { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Der Balken waehrend des Schreibens. Er zeigt keinen Fortschritt in Prozent — den
   kennt niemand —, sondern dass die Leitung steht. Ein Licht, das durchlaeuft. */
.schreibbalken {
    flex: 0 0 auto;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--beleg), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: schreiblauf 1.5s linear infinite;
}

@keyframes schreiblauf {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .schreibbalken { background: var(--beleg-blass); animation: none; }
}

/* --- Die Varianten als Reiter ---

   Vorher standen sie als Karten untereinander, und darunter kam auf Knopfdruck eine
   Feilbank. Bei drei Varianten scrollte man, um die zweite zu lesen, und beim Feilen
   wieder, weil die Bank unter allen dreien lag. Reiter zeigen eine Variante an der
   Stelle, an der die vorige stand. */

.varianten {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.variantenreiter {
    display: flex;
    gap: .2rem;
    overflow-x: auto;

    /* Die Reiter sitzen auf der Linie, die das Blatt oben abschliesst — daher das
       negative Zusammenrutschen: der aktive Reiter deckt sie an seiner Stelle. */
    margin-bottom: -1px;
    padding: 0 .1rem;
}

.variantenreiter-knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 15rem;
    padding: .4rem .7rem;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-bottom-color: var(--linie);
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    color: var(--tinte-leise);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve),
                color var(--takt-kurz) var(--kurve);
}

.variantenreiter-knopf:hover { color: var(--tinte); }

/* Der aktive Reiter ist mit dem Blatt verbunden: seine untere Kante fehlt. Das ist
   der ganze Trick an Reitern — ohne ihn sind es Knoepfe ueber einem Kasten. */
.variantenreiter-knopf.aktiv {
    background: var(--papier);
    border-bottom-color: var(--papier);
    color: var(--tinte);
    font-weight: 600;
}

.variantenreiter-marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--linie);
    border-radius: 999px;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.variantenreiter-knopf.aktiv .variantenreiter-marke {
    background: var(--marine);
    color: #fff;
}

/* Der Betreff auf dem Reiter unterscheidet die Varianten — die Nummer tut es nicht.
   Lang darf er trotzdem nicht werden, sonst schiebt er die Nachbarn hinaus. */
.variantenreiter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variantenblatt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 0;
    padding: .9rem 1.1rem 1rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: 0 var(--radius-klein) var(--radius-klein) var(--radius-klein);

    /* Ein flacher Schatten unter dem Blatt: es liegt auf der Flaeche und ist nicht
       ein Feld darin. Mehr vertraegt ein Kanzleibogen nicht. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* --- Das Verfassen-Fenster ---

   Betreff und Text trugen einmal je einen grauen Kasten. Zwei Kaesten untereinander
   sehen aus wie ein Formular, und was hier entsteht, ist eine Mail: also eine
   Betreffzeile mit ihrer Beschriftung links und einer Linie darunter, dann der Text
   auf freier Flaeche. Dieselbe Ordnung wie in jedem Mailprogramm — und man sieht
   auf einen Blick, was der Empfaenger zuerst liest. */
.entwurfszeile {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .1rem 0 .35rem;
    border-bottom: 1px solid var(--linie);
}

.entwurfszeile-marke {
    flex: 0 0 auto;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinte-still);
}

.entwurfsbetreff {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hausschrift);
}

.entwurfsbetreff:focus { outline: none; }

.entwurfsbetreff::placeholder { font-weight: 400; color: var(--tinte-leise); }

/* Der Text nimmt, was da ist. Eine feste Hoehe hiesse: entweder ein Feld mit
   Leerraum darunter oder eines, in dem eine Mail von zwanzig Zeilen im Ausschnitt
   liegt. Ohne Rahmen — der Rahmen ist das Blatt. */
.entwurfskoerper {
    flex: 1 1 auto;
    width: 100%;
    min-height: 12rem;
    padding: .1rem 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .91rem;
    line-height: 1.6;
    color: var(--tinte);
    resize: vertical;
}

.entwurfskoerper:focus { outline: none; }

.feilzeile { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.feilzeile .feld { flex: 1 1 14rem; min-width: 8rem; }

.feilzeile .still { display: inline-flex; align-items: center; gap: .3rem; }

/* Steht am Ende der Werkzeugzeile und nicht im Kopf: dort waere es eine Warnung
   ueber etwas, das noch nicht geschehen ist. */
.variantenhinweis { margin-left: auto; font-size: .72rem; }

/* --- Der laufende Text und die Werkzeuge --- */

/* Solange eine Variante geschrieben wird, steht sie als Text da und nicht in einem
   Feld: was der Strom hereinbringt, wuerde jeden Tastendruck ueberschreiben. */
.entwurfstext {
    white-space: pre-wrap;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--tinte);
}

/* Die Fussleiste des Verfassen-Fensters. Eine durchgezogene Linie und kein
   gestrichelter Rest: sie schliesst das Blatt ab, wie die Sendeleiste ein
   Mailfenster. */
.entwurfswerkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .5rem -1.1rem -1rem;
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--linie);
    background: var(--papier-kalt);
    border-radius: 0 0 var(--radius-klein) var(--radius-klein);
}

.entwurfswerkzeuge .knopf { display: inline-flex; align-items: center; gap: .3rem; }

/* Vorschlaege statt eines leeren Anweisungsfeldes: was man an einer Mail aendern
   will, ist fast immer eines von sechs Dingen. */
.feilvorschlaege { display: flex; flex-wrap: wrap; gap: .3rem; }

.feilvorschlag {
    padding: .22rem .5rem;
    background: var(--papier-kalt);
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--tinte-leise);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.feilvorschlag:hover:not(:disabled) {
    border-color: var(--marine-hell);
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.feilvorschlag:disabled { opacity: .5; cursor: default; }


.postfach-fuss { flex: 0 0 auto; padding-top: .3rem; }

/* --- Die Ablage links ---

   Dieselbe Spalte wie die Gespraechsliste der Beratung und mit ihren Klassen. Was
   hier steht, ist nur das, was es dort nicht gibt: die Reiter fuer die drei Arten,
   die Marke an der Zeile und der Stand im Kopf rechts. */
.postfachrahmen > .postfach { min-width: 0; }

/* Ein einziges Fach: der Titel ist hier Beschriftung und kein Griff zum Zuklappen. */
.beistand-titel-still { cursor: default; }
.beistand-titel-still:hover { color: var(--tinte-still); }

.schreibablage .beistand-block { flex: 1 1 auto; }

/* Zwei mal zwei und nicht vier in einer Reihe: in dreihundert Pixeln waere
   „Korrekturen" mit seiner Zahl sonst abgeschnitten. */
.ablagearten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    margin: .2rem 0 .55rem;
}

.ablageart {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .32rem .5rem;
    font: inherit;
    font-size: .74rem;
    color: var(--tinte-leise);
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), border-color var(--takt-kurz) var(--kurve);
}

.ablageart > span:not(.ablageart-zahl) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.ablageart .zeichen { flex: 0 0 auto; }

.ablageart:hover { background: var(--papier-kalt); color: var(--tinte); }

.ablageart.aktiv {
    color: var(--hausschrift);
    background: var(--marine-blass);
    border-color: color-mix(in srgb, var(--marine) 35%, transparent);
    font-weight: 600;
}

.ablageart:focus-visible { outline: 2px solid var(--beleg); outline-offset: 1px; }

.ablageart-zahl {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-still);
    font-weight: 400;
}

.schreibablage .gespraechsfilter { margin-bottom: .45rem; }

.ablage-leer { margin-top: .6rem; }

/* Die Art an der Zeile: ein Punkt mit Wort, wie die Einordnung in der Beratung —
   drei Farben fuer drei Wege, damit man sie beim Hinabfahren auseinanderhaelt. */
.ablagemarke {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    color: var(--tinte-leise);
}

.ablagemarke::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--beleg);
}

.ablagemarke-neu::before { background: var(--marine); }
.ablagemarke-korrektur::before { background: var(--warnung); }

.schreibablage .gespraechszahl {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Stand rechts im Kopf: Zeit, Ablage und Freigabe in einer Zeile. */
.entwurfskopf { align-items: center; }

.entwurfskopf-ablage {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-left: auto;
    min-width: 0;
}

.entwurfskopf-ablage .entwurfskopf-zeit { margin-left: 0; }

.entwurfskopf-stand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .74rem;
}

/* Auf einem schmalen Fenster untereinander: zwei Spalten hiessen hier zwei
   Textfelder von je zwanzig Zeichen Breite. */
@media (max-width: 1100px) {
    .postfach {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        overflow-y: auto;
    }

    .postfach-eingang { border-right: none; border-bottom: 1px solid var(--linie); }

    .postfach-eingang,
    .postfach-entwuerfe { overflow: visible; }
}


/* ===================================================================== */
/* Anlagen eines Gespraechs                                              */
/* ===================================================================== */

/* Eine Datei kann zweierlei sein, und der Unterschied entscheidet ueber den
   Aktenbestand einer Kanzlei: Unterlage des Mandanten oder Blatt im Gespraech. Die
   Oberflaeche fragt danach genau einmal — beim Anhaengen — und zeigt danach
   durchgehend, welches von beidem gewaehlt wurde. */

.anlagenwahl { position: relative; display: inline-flex; }

/* Das Menue oeffnet nach oben: der Anhaengeknopf sitzt am Fuss des Fragefelds, und
   nach unten waere die Liste halb hinter dem Fensterrand. */
.anlagenmenue {
    position: absolute;
    bottom: calc(100% + .35rem);
    left: 0;
    z-index: 30;
    width: 22rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: .3rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    animation: klapp-auf var(--takt) var(--kurve);
}

/* Jeder Punkt traegt seinen Satz. Zwei Woerter — „Akte" und „Gespraech" — sagen dem,
   der es einmal erklaert bekommen hat, alles; allen anderen sagen sie nichts, und die
   falsche Wahl faellt erst in einem Jahr auf, wenn im Bestand Entwuerfe liegen. */
.anlagenmenue-punkt {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .55rem .6rem;
    border-radius: var(--radius-klein);
    cursor: pointer;
    color: var(--tinte);
}

.anlagenmenue-punkt:hover { background: var(--papier-kalt); }

.anlagenmenue-punkt:focus-within {
    background: var(--papier-kalt);
    box-shadow: inset 0 0 0 2px var(--marine-hell);
}

/* Das Dateifeld selbst bleibt unsichtbar — anklickbar ist die Beschriftung. */
.anlagenmenue-punkt input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.anlagenmenue-punkt .zeichen { flex: 0 0 auto; margin-top: .1rem; color: var(--tinte-still); }

.anlagenmenue-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.anlagenmenue-titel { font-size: .88rem; font-weight: 600; }

.anlagenmenue-still { font-size: .75rem; line-height: 1.4; color: var(--tinte-still); }

/* --- Was am Gespraech haengt --- */

/* Ueber dem Fragefeld und nicht in der rechten Spalte: es ist Teil der Frage. Wer
   eine Datei angehaengt hat, fragt zu ihr — und soll beim Tippen sehen, was der
   Assistent vor sich hat. */
.anlagenleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .4rem;
}

.anlagenspan {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 18rem;
    padding: .2rem .35rem .2rem .45rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rundung);
    font-size: .78rem;
}

.anlagenspan .zeichen { flex: 0 0 auto; color: var(--tinte-still); }

.anlagenspan-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anlagenspan-fort {
    flex: 0 0 auto;
    padding: 0 .15rem;
    border: none;
    background: none;
    color: var(--tinte-leise);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}

.anlagenspan-fort:hover:not(:disabled) { color: var(--fehler); }
.anlagenspan-fort:disabled { opacity: .4; cursor: default; }

/* Der Satz am Ende der Reihe steht dort, wo er beim Lesen zuletzt ankommt — nach den
   Dateien, ueber die er etwas sagt. */
.anlagenleiste-hinweis { font-size: .72rem; }

/* --- Der Wortlaut einer Anlage --- */

.anlagenblatt {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}

/* Die Seitenmarke gliedert, ohne ein Blatt vorzutaeuschen: eine Anlage wird als Text
   gezeigt und nicht als Faksimile, und eine gezeichnete Seitenkante waere ein
   Versprechen auf ein Original, das hier niemand sieht. */
.anlagenseitenmarke {
    margin: 1.4rem 0 .6rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--linie);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinte-still);
}

.anlagenseitenmarke:first-child { margin-top: 0; }

.anlagenstueck {
    margin-bottom: .9rem;
    white-space: pre-wrap;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--tinte);
}

/* Die zitierte Stelle. Ein Balken am Rand und kein Farbfeld ueber dem Text: der
   Wortlaut soll lesbar bleiben — gesucht wird die Stelle, gelesen wird der Satz. */
.anlagenstueck-stelle {
    padding: .5rem .8rem;
    margin-left: -.9rem;
    border-left: 3px solid var(--marke);
    background: var(--marke-blass);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    scroll-margin-top: 4rem;
}

/* --- Anhänge am Fragefeld -------------------------------------------------

   Als Karten und nicht als Textschnipsel: ein Anhang ist eine Sache, die man ansieht,
   nicht ein Wort in einer Zeile. Die Karte traegt, was man von einer Datei wissen will
   — Art, Name, Umfang — und die ganze Karte ist der Knopf, der sie aufschlaegt. Ein
   kleines Lupenzeichen daneben waere ein Ziel von zwoelf Pixeln fuer etwas, das man
   haeufig tut. */

.anlagenkarte {
    display: inline-flex;
    align-items: stretch;
    max-width: 20rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    overflow: hidden;
    transition: border-color var(--takt-kurz) var(--kurve),
                box-shadow var(--takt-kurz) var(--kurve);
}

.anlagenkarte:hover { border-color: var(--marine-hell); }

/* Offen in der Seitenspalte: die Karte zeigt, welche Datei dort liegt. */
.anlagenkarte.aktiv {
    border-color: var(--marine-hell);
    box-shadow: 0 0 0 2px var(--marine-blass);
}

.anlagenkarte-griff {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .4rem .5rem;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.anlagenkarte-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--papier-kalt);
    border-radius: var(--radius-klein);
    color: var(--tinte-still);
}

.anlagenkarte.aktiv .anlagenkarte-zeichen {
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.anlagenkarte-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

/* Der Name weicht, nicht das Mass: welche Datei es ist, sagt der Anfang des Namens —
   wie gross sie ist, steht nur in der zweiten Zeile. */
.anlagenkarte-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
}

.anlagenkarte-mass {
    font-size: .68rem;
    color: var(--tinte-still);
    white-space: nowrap;
}

/* Das Fortnehmen sitzt abgesetzt am Rand der Karte, mit eigener Trennlinie: es ist
   die eine Handlung, die man nicht versehentlich treffen darf. */
.anlagenkarte-fort {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.8rem;
    padding: 0;
    background: none;
    border: none;
    border-left: 1px solid var(--linie);
    color: var(--tinte-still);
    cursor: pointer;
}

.anlagenkarte-fort:hover:not(:disabled) {
    background: var(--warnung-blass, rgba(180, 60, 40, .08));
    color: var(--warnung, #b43c28);
}

.anlagenkarte-fort:disabled { opacity: .4; cursor: default; }

/* --- Der Überblick über ein Gespräch -------------------------------------

   Ein Gespraech in einer Kanzlei wird lang: zwanzig Fragen zu einem Bescheid, drei
   Rueckfragen zu einer Frist, dazwischen ein Abstecher zum Vorjahr. Der Ueberblick
   steht deshalb ueber dem Verlauf — wer nach zwei Wochen zurueckkommt, soll ihn vor
   dem ersten Austausch sehen und nicht nach dem letzten. */

.ueberblick {
    margin: 0 auto .9rem;
    max-width: 48rem;
    padding: .85rem 1rem 1rem;
    background: var(--papier);
    border: 1px solid var(--linie-stark);
    border-left: 3px solid var(--marine-hell);
    border-radius: var(--radius-klein);
}

.ueberblick-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--linie);
}

.ueberblick-titel {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    font-weight: 600;
}

.ueberblick-teil { margin-bottom: .7rem; }
.ueberblick-teil:last-of-type { margin-bottom: 0; }

.ueberblick-marke {
    display: block;
    margin-bottom: .2rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.ueberblick-satz {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
}

.ueberblick-liste {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .86rem;
    line-height: 1.5;
}

.ueberblick-liste li { margin-bottom: .2rem; }

/* Das Ergebnis traegt einen kraeftigeren Punkt: es ist die Zeile, nach der jemand den
   Ueberblick geoeffnet hat. */
.ueberblick-liste-ergebnis li::marker { color: var(--marine-hell); }

.ueberblick-fuss {
    margin: .8rem 0 0;
    padding-top: .5rem;
    border-top: 1px dashed var(--linie);
    font-size: .7rem;
}

/* Der Knopf zum Zusammenfassen, rechts in der Vorgangsleiste.

   In der Hausfarbe und nicht in Grau. Er war vorher so leise gehalten wie die
   Einordnung daneben — dabei ist er das einzige Angebot in dieser Zeile, das etwas
   tut, und bei einem Gespraech ueber zwanzig Austausche das nuetzlichste der
   ganzen Seite. Die Einordnung beschreibt den Vorgang, das Zusammenfassen macht
   ihn wieder lesbar; die beiden gleich laut zu zeigen, hiess das Wichtigere
   verstecken. */
.vorgangsknopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    margin-left: auto;
    padding: .35rem .8rem;
    background: var(--marine-blass);
    border: 1px solid var(--marine-hell);
    border-radius: var(--radius-klein);
    color: var(--hausschrift);
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve),
                border-color var(--takt-kurz) var(--kurve),
                color var(--takt-kurz) var(--kurve);
}

.vorgangsknopf:hover:not(:disabled) {
    /* --marke und nicht --marine: jenes ist gegen die Flaeche gerechnet, dieses
       ist in den dunklen Themen selbst eine dunkle Flaeche — mit --papier darauf
       waere der Knopf dunkel auf dunkel. */
    background: var(--marke);
    border-color: var(--marke);
    color: var(--papier);
}

/* Steht die Zusammenfassung offen, ist der Knopf ein Schalter, der zurueckfuehrt.
   Gefuellt, weil er dann den Zustand anzeigt und nicht nur ein Angebot ist. */
.vorgangsknopf.aktiv {
    background: var(--marke);
    border-color: var(--marke);
    color: var(--papier);
}

.vorgangsknopf.aktiv:hover:not(:disabled) {
    background: var(--marine-hell);
    border-color: var(--marine-hell);
}

.vorgangsknopf:disabled { cursor: default; }

/* Auf schmalem Schirm rueckt der Knopf unter den Griff und nimmt die Breite —
   dort ist er dann eine eigene Zeile und nicht ein Rest neben den Etiketten. */
@media (max-width: 48rem) {
    .vorgangsleiste { padding-right: 0; }

    .vorgangsknopf {
        flex: 1 1 100%;
        justify-content: center;
        margin: 0 1.25rem .6rem;
    }
}

/* ==========================================================================
   Buchungen & Bilanz — der Arbeitsplatz an der Buchhaltung
   ========================================================================== */

/* Die Werkzeuge im Kopf einer Karte: Suchfeld, Schalter, Knopf. Sie sitzen
   rechts neben der Ueberschrift, weil sie zu dieser Liste gehoeren und nicht
   zur Seite — eine Suchleiste ueber allem suchte im Falschen. */
.kartenkopf-werkzeug {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.kartenkopf-werkzeug .feld-schmal { min-width: 14rem; }

.wahlfeld {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--tinte-leise);
    white-space: nowrap;
    cursor: pointer;
}

/* --- Das Verlaufsdiagramm ---

   Eine Linie, gezeichnet im Markup. Die Farben kommen aus den Themenwerten und
   nicht aus dem SVG: ein fest eingetragenes Blau waere im Abendthema die einzige
   Stelle, die nicht mitwandert. */
.diagramm { display: flex; flex-direction: column; gap: .6rem; }

.diagrammleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.diagrammfuss { margin-left: auto; }

/* Die Kennzahlwahl als zusammenhaengende Gruppe und nicht als drei Knoepfe: sie
   sind eine Entscheidung und keine drei. */
.diagrammwahl {
    display: inline-flex;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    overflow: hidden;
    background: var(--papier);
}

.diagrammknopf {
    padding: .3rem .7rem;
    border: none;
    border-right: 1px solid var(--linie);
    background: transparent;
    color: var(--tinte-leise);
    font: inherit;
    font-size: .8rem;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.diagrammknopf:last-child { border-right: none; }

.diagrammknopf:hover { background: var(--papier-kalt); color: var(--hausschrift); }

.diagrammknopf-aktiv,
.diagrammknopf-aktiv:hover {
    background: var(--marke-blass);
    color: var(--hausschrift);
}

/* Der Behaelter ist der Bezug fuer den Zettel — ohne ihn haengt der am Fenster
   und wanderte beim Scrollen weg. */
.diagrammbild { position: relative; }

.diagrammbild svg { display: block; width: 100%; height: auto; }

.diagramm-achse { stroke: var(--linie-stark); stroke-width: 1; }

.diagramm-raster { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 2 4; }

.diagramm-marke {
    fill: var(--tinte-still);
    font-family: var(--grotesk);
    font-size: 11px;
    text-anchor: end;
}

.diagramm-monat {
    fill: var(--tinte-leise);
    font-family: var(--grotesk);
    font-size: 11px;
    text-anchor: middle;
}

.diagramm-jahr {
    fill: var(--tinte-still);
    font-family: var(--grotesk);
    font-size: 10px;
    text-anchor: middle;
}

/* Die Flaeche traegt keine eigene Auskunft; sie macht die Linie lesbar, wo sie
   flach laeuft. Deshalb sehr blass — sonst wird aus dem Verlauf ein Gebirge. */
.diagramm-flaeche { fill: var(--marine-hell); opacity: .1; stroke: none; }

.diagramm-linie {
    fill: none;
    stroke: var(--marine-hell);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Das Vorjahr gestrichelt und blass: es ist der Hintergrund, gegen den gelesen
   wird, und nicht die Auskunft. Die Strichelung unterscheidet es zusaetzlich zur
   Farbe — bei Farbenblindheit bleibt sie das einzige Merkmal. */
.diagramm-linie-vorjahr {
    stroke: var(--tinte-still);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: .75;
}

.diagramm-punkt {
    fill: var(--papier);
    stroke: var(--marine-hell);
    stroke-width: 2;
}

.diagramm-punkt-aktiv { fill: var(--marine-hell); }

/* Das Lot unter dem Zeiger. Es sagt, welche Spalte gemeint ist — ohne es trifft
   der Blick zwischen zwei Monaten nicht sicher denselben wie der Zettel. */
.diagramm-lot { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 3 3; }

.diagramm-feld { fill: transparent; cursor: crosshair; }

.diagramm-feld-aktiv { fill: var(--papier-kalt); opacity: .7; }

/* Der Zettel steht ueber dem Bild und weicht dem Zeiger aus: in der rechten
   Haelfte klappt er nach links, sonst liefe er aus dem Fenster. */
.diagrammzettel {
    position: absolute;
    top: .4rem;
    transform: translateX(.6rem);
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 12rem;
    padding: .5rem .65rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--papier);
    box-shadow: var(--schatten-hoch);
    font-size: .78rem;
    pointer-events: none;
    z-index: 2;
}

.diagrammzettel-links { transform: translateX(calc(-100% - .6rem)); }

.diagrammzettel strong {
    margin-bottom: .2rem;
    color: var(--hausschrift);
    font-size: .82rem;
}

.diagrammzettel span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}

.diagrammzettel i {
    color: var(--tinte-still);
    font-style: normal;
}

.diagrammlegende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: .55rem;
    border-top: 1px solid var(--linie);
    font-size: .76rem;
    color: var(--tinte-still);
}

.diagrammschluessel { display: inline-flex; align-items: center; gap: .35rem; }

.diagrammprobe {
    display: inline-block;
    width: 1.1rem;
    height: 0;
    border-top-width: 2px;
    border-top-style: solid;
}

/* Die Reihen. Erloes gruen, Aufwand rot — dieselbe Zuordnung wie in den
   Betragsspalten der Buchungsliste, damit ein Blick genuegt und man die Legende
   nur einmal lesen muss. Das Vorjahr gestrichelt und blass: es ist der
   Hintergrund, gegen den gelesen wird, und nicht die Auskunft. Die Strichelung
   unterscheidet es zusaetzlich zur Farbe — bei Farbenblindheit bleibt sie das
   einzige Merkmal. */
.diagramm-linie.reihe-eins    { stroke: var(--marine-hell); }
.diagramm-linie.reihe-erloes  { stroke: var(--gut); }
.diagramm-linie.reihe-aufwand { stroke: var(--fehler); }

.diagramm-linie.reihe-vorjahr {
    stroke: var(--tinte-still);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: .75;
}

.diagramm-punkt.reihe-eins    { stroke: var(--marine-hell); }
.diagramm-punkt.reihe-erloes  { stroke: var(--gut); }
.diagramm-punkt.reihe-aufwand { stroke: var(--fehler); }

.diagramm-punkt-aktiv.reihe-eins    { fill: var(--marine-hell); }
.diagramm-punkt-aktiv.reihe-erloes  { fill: var(--gut); }
.diagramm-punkt-aktiv.reihe-aufwand { fill: var(--fehler); }

.diagrammprobe.reihe-eins    { border-top-color: var(--marine-hell); }
.diagrammprobe.reihe-erloes  { border-top-color: var(--gut); }
.diagrammprobe.reihe-aufwand { border-top-color: var(--fehler); }

.diagrammprobe.reihe-vorjahr {
    border-top-style: dashed;
    border-top-color: var(--tinte-still);
}

/* Im Zettel tragen die beiden Ergebniszeilen ihre Farbe: sie sind der Grund,
   warum man ueberhaupt darauf gefahren ist. */
.diagrammzettel .zettel-gut b,
.diagrammzettel .zettel-gut    { color: var(--gut); }
.diagrammzettel .zettel-fehler { color: var(--fehler); }

/* Flacher fuer die Uebersicht — dort ist das Bild eine von sechs Auskuenften
   und nicht die Seite. */
.diagramm-kompakt .diagrammleiste { font-size: .78rem; }

/* --- Die Prüfhinweise ---

   Die Liste, die ein Buchhalter vor dem Abschluss durchgeht. Jeder Punkt sagt,
   was er gefunden hat und was zu tun waere; ein Befund ohne Rat ist eine
   Beunruhigung und keine Hilfe. */
.pruefliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: .8rem;
}

.pruefpunkt {
    padding: .75rem .9rem;
    border: 1px solid var(--linie);
    border-left: 3px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    background: var(--papier-warm);
}

/* Drei Stufen am linken Streifen. Alles rot zu faerben, was nicht glatt ist,
   macht die Liste unbrauchbar — dann sieht niemand mehr hin. */
.pruefpunkt-hinweis { border-left-color: var(--linie-stark); }
.pruefpunkt-warnung { border-left-color: var(--warnung); background: var(--warnung-blass); }
.pruefpunkt-ernst   { border-left-color: var(--fehler);  background: var(--fehler-blass); }

.pruefpunkt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.pruefpunkt-kopf strong { color: var(--hausschrift); font-size: .92rem; }

.pruefpunkt-befund { margin: 0 0 .3rem; font-size: .84rem; line-height: 1.5; }

.pruefpunkt-rat {
    margin: 0 0 .5rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--tinte-leise);
}

.pruefpunkt .knopf { background: var(--papier); }

/* --- Die Buchungsliste --- */

/* Der Buchungstext ist das laengste Feld einer Zeile und das am wenigsten
   genaue. Er darf umbrechen, aber nicht die Tabelle sprengen. */
.buchungstext {
    max-width: 22rem;
    font-size: .84rem;
    line-height: 1.4;
}

/* Der Weg von der Buchung zu ihrem Scan. Als Verweis mit Zeichen und nicht als
   Knopf: er fuehrt woandershin und tut nichts. */
.belegverweis {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    white-space: nowrap;
}

.belegverweis .zeichen { color: var(--tinte-still); }

.belegverweis:hover .zeichen { color: var(--beleg); }


/* =====================================================================
   Buchungen und Bilanz

   Ein Fenster und nichts darueber. Vorher stand die halbe Auskunft als Bahn
   ueber den Reitern — Kacheln, Verlaufsbild, Pruefhinweise —, und die
   Buchungsliste begann darunter, also unterhalb des Falzes. Wer sie durchging,
   scrollte genau die Kennzahlen weg, die er dabei brauchte.

   Jetzt fuehrt jeder Weg durch die Reiterreihe, und das offene Blatt bekommt
   den Bildschirm. Der Aufbau ist derselbe wie in der Aktenbibliothek: Kopf
   fest, Blatt dazwischen, und was scrollt, scrollt in sich.
   ===================================================================== */
.buchungsseite {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 1rem 1.5rem 1.25rem;
}

.buchungskopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    flex: 0 0 auto;
}

/* Die Reiterleiste traegt hier keinen Abstand nach unten: das Blatt schliesst
   unmittelbar an sie an, und der aktive Reiter geht in seine Flaeche ueber. */
.buchungskopf .reiterleiste { margin-bottom: 0; flex: 1 1 auto; }

.buchungskopf-rand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .35rem;
    font-size: .78rem;
}

/* Das Blatt: ein Behaelter mit Rand, an dem die Reiter haengen. Es nimmt den
   restlichen Platz, und was darin scrollt, scrollt in sich — nie die Seite. */
.buchungsblatt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--linie);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    background: var(--papier);
    overflow: hidden;
}

/* Ein Blatt, das als Ganzes scrollt — Uebersicht, Verlauf, Belege. Sie sind
   Text und Bild und keine Tabelle; ein festgehaltener Kopf brachte dort
   nichts. */
.blattlauf {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
}

.blattlauf > .kacheln { margin-bottom: 1.25rem; }

.blattlauf > .kartenkopf { margin-bottom: .6rem; }

.blattlauf > h3 { margin: 1.25rem 0 .4rem; }

.blattlauf > h3:first-child { margin-top: 0; }

/* Die Mitte fuer alles, was kein Blatt fuellt: Ladeflaeche, Leerhinweis,
   Meldung. Zentriert, weil ein Hinweis am oberen Rand eines leeren Fensters
   aussieht, als fehlte darunter etwas. */
.blattmitte {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.blattmitte > * { max-width: 44rem; }

/* Die Filterzeile eines Tabellenblattes. Sie steht fest, damit die Eingrenzung
   beim Blaettern sichtbar bleibt — ein Filter, den man weggescrollt hat, ist
   ein Filter, den man vergisst. */
.blattfilter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--linie);
    background: var(--papier-kalt);
}

.blattfilter .feld { flex: 1 1 16rem; min-width: 10rem; }

.blattfilter .feld-schmal { flex: 0 0 auto; min-width: 0; }

.blattfilter > .still { margin-left: auto; text-align: right; }

/* Der Filter, den man nicht selbst gesetzt hat — die Kontonummer, mit der man
   aus der Kontenliste hierherkam. Er muss sichtbar sein: eine Liste, die
   stillschweigend nur ein Konto zeigt, sieht wie ein leerer Bestand aus. */
.filtermarke {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .3rem .2rem .55rem;
    border: 1px solid var(--linie-stark);
    border-radius: 1rem;
    background: var(--marke-blass);
    color: var(--hausschrift);
    font-size: .78rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

.filtermarke-weg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tinte-leise);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.filtermarke-weg:hover { background: var(--papier); color: var(--fehler); }

/* Der Tabellenkoerper. Er nimmt die Hoehe, die das Fenster ihm laesst, und
   scrollt in sich — bei fuenfhundert Zeilen ist das der Unterschied zwischen
   einer Tabelle und einem Endlosband. Waagerecht scrollt er ebenso: sieben
   Spalten passen nicht auf jeden Bildschirm, und die Seite darunter darf davon
   nicht wandern. */
.blatttabelle {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.blatttabelle table.liste { margin: 0; font-size: .84rem; }

.blatttabelle table.liste th { padding: .35rem .65rem; }

.blatttabelle table.liste td { padding: .32rem .65rem; }

/* Der Kopf bleibt stehen. Ohne ihn ist eine gescrollte Zahlentabelle eine
   Wueste — man weiss nach der dritten Bildschirmhoehe nicht mehr, welche
   Spalte was war. */
.blatttabelle thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--papier-kalt);
    box-shadow: inset 0 -1px 0 var(--linie);
}

/* Die Summenzeile bleibt am unteren Rand stehen: sie ist die Probe, und eine
   Probe, zu der man erst tausend Zeilen scrollen muss, macht niemand. */
.blatttabelle tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: .4rem .65rem;
    background: var(--papier-kalt);
    box-shadow: inset 0 1px 0 var(--linie-stark);
    color: var(--hausschrift);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.blatttabelle tfoot th:first-child { text-align: left; font-weight: 600; }

/* Die Blaetterung am Fuss des Blattes. Sie steht fest — sonst muesste man zum
   Weiterblaettern erst ans Ende der Seite scrollen, die man gerade liest. */
.blattfuss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--linie);
    background: var(--papier-kalt);
    font-size: .78rem;
}

/* Die Kontonummer als Knopf: sie fuehrt in die Buchungen dieses Kontos. Eine
   Kontenzeile, die man nicht aufschlagen kann, ist eine Zahl ohne Herkunft. */
.kontoverweis {
    padding: 0;
    border: none;
    background: none;
    color: var(--beleg);
    font-family: var(--mono);
    font-size: .82rem;
    cursor: pointer;
}

.kontoverweis:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .buchungsseite { padding: .75rem .75rem 1rem; }

    .buchungskopf-rand .still { display: none; }

    .blattfilter > .still { margin-left: 0; text-align: left; }
}


/* =====================================================================
   Kennzahlen, Belegbild und Betragsfarben

   Was hier hinzukommt, hat einen gemeinsamen Grund: eine Zahl allein ist noch
   keine Auskunft. „6.789.639,64" wurde als Umsatz gelesen und war das
   Bewegungsvolumen; „100 %" wurde als vollstaendige Belegablage gelesen und
   hiess, dass gar kein Beleg erwartet wird. Beide Male fehlte nicht die Zahl,
   sondern ihr Zusammenhang — und der laesst sich zeigen.
   ===================================================================== */

/* --- Die drei Zahlen, um die es geht ---

   Gross, mit Farbe und ueber allem anderen: Erloes, Aufwand, Ergebnis. Sie
   beantworten die Frage, mit der man auf diese Seite kommt, und alles darunter
   erklaert sie nur. */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .8rem;
    margin-bottom: 1.1rem;
}

.kennzahl {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--linie);
    border-left: 3px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    background: var(--papier);
}

.kennzahl-name {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinte-still);
}

.kennzahl-wert {
    font-family: var(--serif);
    font-size: 1.75rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--hausschrift);
}

.kennzahl-fuss { font-size: .74rem; color: var(--tinte-leise); }

/* Die Farbe sitzt am Rand und in der Zahl, nicht auf der Flaeche: drei
   flaechig gefaerbte Kacheln nebeneinander waeren ein Ampelbrett, und darauf
   sieht man keine Zahl mehr. */
.kennzahl-gut    { border-left-color: var(--gut); }
.kennzahl-fehler { border-left-color: var(--fehler); }
.kennzahl-stark  { border-left-color: var(--marine-hell); }

.kennzahl-gut .kennzahl-wert    { color: var(--gut); }
.kennzahl-fehler .kennzahl-wert { color: var(--fehler); }

/* --- Das Gitter der Uebersicht --- */

.uebersichtsgitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .8rem;
    margin: 1.25rem 0;
}

.uebersichtsfeld {
    display: flex;
    flex-direction: column;
    padding: .8rem .9rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--papier);
    min-width: 0;
}

.uebersichtsfeld .kartenkopf { margin-bottom: .5rem; }

.uebersichtsfeld h3 { margin: 0; font-size: .92rem; }

.uebersichtsfeld table.liste { margin: 0; }

.uebersichtsfeld table.liste td {
    padding: .22rem .3rem;
    font-variant-numeric: tabular-nums;
}

/* --- Der Belegring ---

   Drei Zustaende und nicht zwei: „Beleg liegt vor", „Beleg fehlt" und „zu
   dieser Buchung gehoert keiner". Der dritte macht bei den meisten Mandanten
   die Mehrheit aus, und ein Balken, der von hundert Prozent erzaehlt, laesst
   offen, hundert Prozent von was. */
.belegring {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.belegring svg { flex: 0 0 auto; width: 11rem; height: 11rem; }

/* Der Ring wird gedreht, damit der erste Bogen oben beginnt. Ohne das faengt
   er rechts an, und eine Verteilung, die bei drei Uhr beginnt, liest niemand. */
.belegring circle {
    fill: none;
    stroke-width: 16;
    transform: rotate(-90deg);
    transform-origin: center;
}

.belegring-spur { stroke: var(--papier-kalt); }

.belegring-bogen { transition: stroke-dasharray var(--takt-ruhig) var(--kurve); }

.bogen-gut   { stroke: var(--gut); }
.bogen-fehlt { stroke: var(--warnung); }
.bogen-still { stroke: var(--linie-stark); }

.belegring-zahl {
    fill: var(--hausschrift);
    font-family: var(--serif);
    font-size: 30px;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}

.belegring-fuss {
    fill: var(--tinte-still);
    font-family: var(--grotesk);
    font-size: 11px;
    text-anchor: middle;
}

.belegring-legende {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .8rem;
    min-width: 0;
}

.belegring-schluessel {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}

.belegring-schluessel b {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--hausschrift);
}

/* Ein Anteil, den es nicht gibt, bleibt in der Legende stehen und wird blass.
   Ihn wegzulassen aenderte die Zeilenzahl je Mandant, und dann sucht man beim
   Vergleich zweier Akten erst die Zeile. */
.belegring-leer { opacity: .45; }

.belegring-name { color: var(--tinte-leise); }

.belegring-probe {
    flex: 0 0 auto;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
}

.belegring-probe.bogen-gut   { background: var(--gut); }
.belegring-probe.bogen-fehlt { background: var(--warnung); }
.belegring-probe.bogen-still { background: var(--linie-stark); }

.belegkopf {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.belegkopf-text { flex: 1 1 22rem; min-width: 0; }

.belegkopf-text .kartentext { margin-top: 0; }

/* --- Die Deckung je Monat ---

   Die eine Ansicht, die sagt, *welcher* Ordner fehlt: eine Belegluecke ist
   fast immer ein ganzer Monat, den niemand gescannt hat. */
.belegmonate {
    display: flex;
    align-items: flex-end;
    gap: .3rem;
    flex-wrap: wrap;
    margin: .5rem 0 .75rem;
}

.belegmonat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    flex: 1 1 2.5rem;
    max-width: 4rem;
    min-width: 2.1rem;
}

.belegmonat-saeule {
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: flex-end;
    border-radius: 3px;
    background: var(--papier-kalt);
    overflow: hidden;
}

.belegmonat-fuellung {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--gut);
    transition: height var(--takt-ruhig) var(--kurve);
}

.belegmonat-voll   .belegmonat-fuellung { background: var(--gut); }
.belegmonat-fast   .belegmonat-fuellung { background: var(--messing); }
.belegmonat-luecke .belegmonat-fuellung { background: var(--fehler); }
.belegmonat-leer   .belegmonat-fuellung { background: var(--linie-stark); }

.belegmonat-quote {
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinte-leise);
}

.belegmonat-name { font-size: .68rem; color: var(--tinte-still); }

/* Die Zahl der fehlenden Belege dieses Monats — das eigentliche Arbeitsmass.
   Der Anteil sagt, wie schlimm es ist, die Zahl, wie viel zu tun ist. */
.belegmonat-fehlt {
    padding: 0 .3rem;
    border-radius: .6rem;
    background: var(--warnung-blass);
    color: var(--warnung);
    font-size: .68rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* --- Die Belegtafel ---

   Als Bildkacheln und nicht als Dateinamenliste: ein DATEV-Belegbild heisst
   nach seiner Kennung, also nach sechsunddreissig Zeichen ohne Bedeutung. Wer
   entscheiden soll, ob ein Beleg fehl am Platz ist, muss ihn sehen. */
.belegtafel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .7rem;
    margin: .5rem 0 1rem;
}

.belegkarte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--papier);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--takt-kurz) var(--kurve),
                box-shadow var(--takt-kurz) var(--kurve);
}

.belegkarte:hover {
    border-color: var(--marke);
    box-shadow: var(--schatten);
    text-decoration: none;
}

/* Fest hoch und oben ausgerichtet: ein Beleg wird am Kopf erkannt — Absender,
   Datum, Betreff —, und ein Bild, das die ganze Seite einpasst, macht genau
   diesen Teil unlesbar. */
.belegkarte-bild {
    display: block;
    height: 10rem;
    background: var(--papier-kalt);
    border-bottom: 1px solid var(--linie);
    overflow: hidden;
}

.belegkarte-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.belegkarte-fuss {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .4rem .5rem;
    font-size: .72rem;
}

/* Die Kennung bricht nicht um, sondern wird beschnitten: sie ist ohnehin nicht
   zu lesen, und drei Zeilen davon verschoben jede Kachel unterschiedlich weit. */
.belegkarte-name {
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--tinte-leise);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Betragsfarben ---

   Soll rot, Haben gruen. Nicht als Wertung — ein Sollbetrag ist nichts
   Schlechtes —, sondern damit die Richtung ohne Lesen erkennbar ist: in einer
   Liste aus fuenfzig Zahlen sucht man die Seite und nicht den Betrag. Die
   Spalte allein genuegte, solange die Tabelle nicht waagerecht scrollt; sobald
   sie es tut, ist die Ueberschrift weg und die Farbe das einzige Merkmal, das
   bleibt. */
.betrag-soll,
.betrag-haben {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.betrag-soll  { color: var(--fehler); }
.betrag-haben { color: var(--gut); }

.blatttabelle tfoot th.betrag-soll  { color: var(--fehler); }
.blatttabelle tfoot th.betrag-haben { color: var(--gut); }

@media (max-width: 900px) {
    .kennzahl-wert { font-size: 1.4rem; }

    .belegkopf { gap: 1rem; }

    .belegring svg { width: 8.5rem; height: 8.5rem; }
}

/* =========================================================== Rundgang

   Der gefuehrte Rundgang durch die Beratung (rundgang.js). Ein Schleier ueber der
   Seite, darin ein Lichtkegel auf der erklaerten Stelle; ein Zeiger, der hingleitet
   und vormacht; eine Karte mit dem Text. Alles ueber der Seite und ueber jedem
   Schubfach — waehrend des Rundgangs gibt es nichts anderes zu bedienen. */

/* --- Der Knopf unten rechts --- */

.rundgang-anker {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
}

/* Auf Schreibassistent und Aktenbibliothek reicht die Fusszeile bis in die Ecke, in
   der der Knopf steht — dort sitzen die Wahl „je Seite" und der Hinweis zur KI. Sie
   ruecken um seine Breite ein, statt unter ihm zu verschwinden. */
body:has(.rundgang-anker) .aktenseite-fuss,
body:has(.rundgang-anker) .postfach-fuss { padding-right: 4rem; }

/* Rund und klein, bis man ihn beruehrt: dann gleitet das Wort heraus. Ein Knopf,
   der immer „How-to" ruft, waere nach dem dritten Tag Laerm. */
.rundgang-knopf {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 .8rem;
    border: none;
    border-radius: 999px;
    background: var(--marine);
    color: #fff;
    box-shadow: var(--schatten-hoch);
    font: inherit;
    cursor: pointer;
    transition: gap var(--takt-ruhig) var(--kurve),
                padding var(--takt-ruhig) var(--kurve),
                transform var(--takt-kurz) var(--kurve);
}

.rundgang-knopf-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.rundgang-knopf-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: 0;
    transition: max-width var(--takt-ruhig) var(--kurve), opacity var(--takt-ruhig) var(--kurve);
}

.rundgang-knopf:hover,
.rundgang-knopf:focus-visible,
.rundgang-knopf.offen {
    gap: .45rem;
    padding-right: 1.05rem;
}

.rundgang-knopf:hover .rundgang-knopf-text,
.rundgang-knopf:focus-visible .rundgang-knopf-text,
.rundgang-knopf.offen .rundgang-knopf-text {
    max-width: 6rem;
    opacity: 1;
}

.rundgang-knopf:hover { transform: translateY(-1px); }

.rundgang-knopf:focus-visible { outline: 3px solid var(--marine-hell); outline-offset: 2px; }

/* Noch nie geoeffnet: ein Ring, der sich sacht vom Knopf loest. */
.rundgang-knopf-neu::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: rundgang-ruf 2.4s var(--kurve) infinite;
    pointer-events: none;
}

@keyframes rundgang-ruf {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marine) 45%, transparent); }
    70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--marine) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marine) 0%, transparent); }
}

/* Waehrend des Rundgangs tritt der Knopf zurueck — er stuende sonst hell im Schleier. */
body:has(.rundgang) .rundgang-anker { opacity: 0; pointer-events: none; }

/* --- Das Menue mit den Kapiteln --- */

.rundgang-menue-schatten { position: fixed; inset: 0; z-index: 0; }

.rundgang-menue {
    position: relative;
    z-index: 1;
    width: min(21.5rem, calc(100vw - 2.5rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: .5rem;
    background: var(--papier);
    border: 1px solid color-mix(in srgb, var(--linie) 45%, transparent);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
    transform-origin: bottom right;
    animation: rundgang-menue-auf var(--takt-ruhig) var(--kurve);
}

@keyframes rundgang-menue-auf {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.rundgang-menue-kopf {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .65rem .65rem;
}

.rundgang-menue-kopf strong { font-family: var(--serif); font-size: 1rem; color: var(--hausschrift); }

.rundgang-menue-kopf .still { font-size: .78rem; }

.rundgang-menue-ganz,
.rundgang-menue-kapitel {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .65rem;
    border: none;
    border-radius: var(--radius-klein);
    background: transparent;
    color: var(--tinte);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve);
}

.rundgang-menue-ganz { background: var(--marine-blass); margin-bottom: .2rem; }

.rundgang-menue-ganz > span:last-child { display: flex; flex-direction: column; }

.rundgang-menue-ganz strong { font-size: .9rem; color: var(--hausschrift); }

.rundgang-menue-ganz .still,
.rundgang-menue-kapitel .still { font-size: .74rem; }

.rundgang-menue-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding-left: 2px;
    border-radius: 999px;
    background: var(--marine);
    color: #fff;
    font-size: .72rem;
}

.rundgang-menue-ganz:hover { background: color-mix(in srgb, var(--marine-blass) 70%, var(--marine-hell)); }

.rundgang-menue-kapitel:hover { background: var(--marine-blass); }

.rundgang-menue-ganz:focus-visible,
.rundgang-menue-kapitel:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: -2px; }

.rundgang-menue-titel {
    padding: .65rem .65rem .25rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinte-still);
}

.rundgang-menue-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--marine-blass);
    color: var(--hausschrift);
}

.rundgang-menue-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.rundgang-menue-name { font-size: .87rem; font-weight: 500; }

.rundgang-menue-zahl {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--papier-kalt);
    color: var(--tinte-leise);
    font-size: .7rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --- Der Rundgang selbst --- */

.rundgang {
    position: fixed;
    inset: 0;
    z-index: 4000;
    opacity: 0;
    transition: opacity var(--takt-ruhig) var(--kurve);
}

.rundgang.offen { opacity: 1; }

.rundgang.schliesst { opacity: 0; pointer-events: none; }

/* Haelt die Seite still: Klicks gehen waehrend des Rundgangs nicht durch. */
.rundgang-fang { position: fixed; inset: 0; cursor: default; }

/* Der Lichtkegel: ein Rechteck mit einem riesigen Schatten, der alles ausser ihm
   abdunkelt. Er gleitet von Stelle zu Stelle, und um ihn pulsiert ein Ring. */
.rundgang-licht {
    position: fixed;
    pointer-events: none;
    box-shadow: 0 0 0 200vmax rgba(12, 16, 28, .56);
    outline: 2px solid rgba(255, 255, 255, .85);
    transition: left .5s var(--kurve), top .5s var(--kurve),
                width .5s var(--kurve), height .5s var(--kurve),
                border-radius .5s var(--kurve), outline-color .3s;
}

.rundgang-licht::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    animation: rundgang-ring 2s ease-out infinite;
}

.rundgang-licht.leer { outline-color: transparent; }

.rundgang-licht.leer::after { animation: none; }

@keyframes rundgang-ring {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
    80%  { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Die Karte: eine Erklaerung neben der Stelle, nie ueber ihr. */
.rundgang-karte {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    width: min(23rem, calc(100vw - 24px));
    padding: 1rem 1.1rem .85rem;
    background: var(--papier);
    color: var(--tinte);
    border-radius: var(--radius-gross);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .5s var(--kurve);
    outline: none;
}

.rundgang-karte.mittig { width: min(27rem, calc(100vw - 24px)); }

.rundgang-karte.neu > :not(.rundgang-zu) { animation: rundgang-text-auf .35s var(--kurve) both; }

@keyframes rundgang-text-auf {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.rundgang-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    padding-right: 1.6rem;
}

.rundgang-kapitel {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--marine-blass);
    color: var(--hausschrift);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.rundgang-zahl { font-size: .72rem; color: var(--tinte-still); font-variant-numeric: tabular-nums; }

.rundgang-titel {
    margin: .1rem 0 .35rem;
    font-family: var(--serif);
    font-size: 1.08rem;
    color: var(--hausschrift);
}

.rundgang-text { margin: 0; font-size: .87rem; line-height: 1.55; }

.rundgang-text strong { color: var(--hausschrift); }

.rundgang-karte kbd {
    display: inline-block;
    min-width: 1.3em;
    padding: 0 .35em;
    border: 1px solid var(--linie);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--papier-kalt);
    font-family: inherit;
    font-size: .78em;
    line-height: 1.5;
    text-align: center;
}

.rundgang-fehlt {
    margin: .6rem 0 0;
    padding: .45rem .6rem;
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
    color: var(--tinte-leise);
    font-size: .8rem;
    line-height: 1.45;
}

.rundgang-fehlt::before { content: "ⓘ  "; color: var(--hausschrift); }

.rundgang-fortschritt {
    height: 3px;
    margin: .85rem 0 .7rem;
    border-radius: 999px;
    background: var(--papier-kalt);
    overflow: hidden;
}

.rundgang-fortschritt > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--marine);
    transition: width .5s var(--kurve);
}

.rundgang-fuss { display: flex; align-items: center; gap: .5rem; }

.rundgang-tasten { margin: 0 auto; font-size: .78rem; color: var(--tinte-still); }

.rundgang-zurueck,
.rundgang-weiter {
    padding: .38rem .85rem;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}

.rundgang-zurueck { background: transparent; color: var(--tinte-leise); }

.rundgang-zurueck:hover:not(:disabled) { background: var(--papier-kalt); color: var(--tinte); }

.rundgang-zurueck:disabled { opacity: .35; cursor: default; }

.rundgang-weiter { background: var(--marine); color: #fff; }

.rundgang-weiter:hover { background: color-mix(in srgb, var(--marine) 85%, #000); }

.rundgang-zurueck:focus-visible,
.rundgang-weiter:focus-visible,
.rundgang-zu:focus-visible { outline: 2px solid var(--marine-hell); outline-offset: 2px; }

.rundgang-zu {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--tinte-still);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.rundgang-zu:hover { background: var(--papier-kalt); color: var(--tinte); }

/* Der Zeiger: ein Pfeil, der gleitet. Die Spitze sitzt auf dem Punkt. Druecken,
   Schweben und Ziehen spielen am Bild darin, damit das Gleiten des Rahmens
   ungestoert bleibt. */
.rundgang-zeiger {
    position: fixed;
    left: -4px;
    top: -2px;
    z-index: 3;
    pointer-events: none;
    transition: transform .8s cubic-bezier(.22, .9, .3, 1), opacity .3s;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

.rundgang-zeiger.sofort { transition: none; }

.rundgang-zeiger.versteckt { opacity: 0; }

.rundgang-zeiger svg { display: block; transform-origin: 4px 2px; transition: transform .15s var(--kurve); }

.rundgang-zeiger.drueckt svg { transform: scale(.8); }

.rundgang-zeiger.zieht svg { transform: scale(.92) rotate(-6deg); }

.rundgang-zeiger.schwebt svg { animation: rundgang-schweben 2.4s ease-in-out; }

@keyframes rundgang-schweben {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(5px, -3px); }
    50%      { transform: translate(0, -6px); }
    75%      { transform: translate(-5px, -3px); }
}

/* Die Welle eines Klicks. */
.rundgang-welle {
    position: fixed;
    z-index: 2;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--marine-hell) 40%, transparent);
    pointer-events: none;
    animation: rundgang-welle .8s ease-out forwards;
}

@keyframes rundgang-welle {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(5.5); opacity: 0; }
}

/* Was der Zeiger „tippt": ueber dem Feld und nicht darin. */
.rundgang-schrift {
    position: fixed;
    z-index: 2;
    color: var(--tinte);
    white-space: pre-wrap;
    pointer-events: none;
    transition: opacity .35s;
}

.rundgang-schrift::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--hausschrift);
    animation: rundgang-strich 1s steps(1) infinite;
}

.rundgang-schrift.weg { opacity: 0; }

.rundgang-ohne-platzhalter::placeholder { color: transparent; }

@keyframes rundgang-strich {
    50% { opacity: 0; }
}

/* Die Datei, die herangezogen wird. */
.rundgang-datei {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem .3rem .45rem;
    border-radius: var(--radius-klein);
    background: var(--papier);
    color: var(--tinte);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .4);
    font-size: .8rem;
    white-space: nowrap;
    pointer-events: none;
    transition: transform .95s cubic-bezier(.3, .7, .25, 1), opacity .4s, scale .4s;
}

.rundgang-datei.sofort { transition: none; }

.rundgang-datei.faellt { opacity: 0; scale: .4; }

.rundgang-datei-zeichen { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .rundgang,
    .rundgang-licht,
    .rundgang-karte,
    .rundgang-zeiger,
    .rundgang-zeiger svg,
    .rundgang-fortschritt > span,
    .rundgang-knopf,
    .rundgang-knopf-text { transition: none; }

    .rundgang-licht::after,
    .rundgang-knopf-neu::after,
    .rundgang-karte.neu > *,
    .rundgang-menue { animation: none; }
}

@media print {
    .rundgang-anker,
    .rundgang { display: none !important; }
}

/* =========================================================== DATEV-Abgleich

   Das Schubfach der Aktenbibliothek (Datevabgleich.razor): oben der Stand, darunter
   was man hochladen kann, dann das Ablegen mit der Vorschau je Datei. Geschrieben
   fuer jemanden, der es einmal im Monat benutzt — jede Datei sagt in Marken, was sie
   aendern wuerde, bevor sie es tut. */

.datevknopf { display: inline-flex; align-items: center; gap: .45rem; }

/* Zwei Knoepfe mit schubfach-knopf teilen sich sonst den freien Platz: der zweite
   ruckt nach rechts aussen, der erste bleibt in der Mitte stehen. */
.datevfach ~ .schubfach-knopf { margin-left: .4rem; }

.datevknopf-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }

.datevknopf-stand { font-size: .68rem; font-weight: 400; color: var(--tinte-still); }

.schubfach-breit { width: min(38rem, 96vw); }

.datevfach-inhalt { display: flex; flex-direction: column; gap: 1.1rem; }

.datevteil h3 {
    margin: 0 0 .55rem;
    font-family: var(--serif);
    font-size: .98rem;
    color: var(--hausschrift);
}

.datev-leer {
    margin: 0;
    padding: .7rem .85rem;
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
    color: var(--tinte-leise);
    font-size: .86rem;
    line-height: 1.5;
}

.datev-hinweis { margin: .6rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--tinte-leise); }

.datev-hinweis strong { color: var(--hausschrift); }

.datev-fuss { margin: .5rem 0 0; font-size: .78rem; }

.datev-fuss a { color: var(--hausschrift); }

/* --- Stand: Kacheln und Monatsleiste --- */

.datevkacheln {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
}

.datevkachel {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
    font-size: .72rem;
    color: var(--tinte-still);
}

.datevkachel-zahl {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hausschrift);
    font-variant-numeric: tabular-nums;
}

.datevkachel-zahl small { font-size: .7rem; font-weight: 500; color: var(--warnung, #a15c00); }

.datevkachel-warnung { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warnung, #a15c00) 45%, transparent); }

/* Zwoelf Saeulen, eine je Monat. Ein leerer Monat steht als blasse rote Saeule in
   voller Hoehe da: er soll auffallen, nicht verschwinden. */
.datevmonate {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
    height: 4.2rem;
    margin-top: .7rem;
    align-items: end;
}

.datevmonat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    height: 100%;
    min-width: 0;
}

.datevmonat-saeule {
    width: 100%;
    max-width: 1.6rem;
    border-radius: 4px 4px 2px 2px;
    background: color-mix(in srgb, var(--marine) 70%, var(--marine-hell));
    transition: height var(--takt-ruhig) var(--kurve);
}

.datevmonat-leer .datevmonat-saeule {
    background: color-mix(in srgb, var(--fehler) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fehler) 45%, transparent);
}

.datevmonat-name {
    font-size: .62rem;
    color: var(--tinte-still);
    white-space: nowrap;
}

.datevmonat-leer .datevmonat-name { color: var(--fehler); font-weight: 600; }

.datevnummern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin-top: .7rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-klein);
    background: var(--marine-blass);
    color: var(--tinte-leise);
    font-size: .78rem;
    line-height: 1.45;
}

.datevnummern > span:first-of-type { flex: 1 1 16rem; }

.datevnummern strong { color: var(--hausschrift); }

.datevnummern-frage { display: inline-flex; gap: .3rem; }

/* --- Was man hochladen kann --- */

.datevarten { display: flex; flex-direction: column; gap: .35rem; }

.datevart {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
}

.datevart-zeichen { font-size: 1.25rem; line-height: 1.2; }

.datevart > div { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--tinte-leise); line-height: 1.45; }

.datevart strong { font-size: .86rem; color: var(--hausschrift); }

/* --- Ablegen und Vorschau je Datei --- */

.datevablage { padding: 1.5rem .8rem; }

.datevablage.laeuft { border-color: var(--marine-hell); background: var(--marine-blass); }

.datevdateien {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.datevdatei {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .6rem;
    border: 1px solid color-mix(in srgb, var(--linie) 60%, transparent);
    border-radius: var(--radius-klein);
    background: var(--papier);
    animation: rundgang-text-auf .3s var(--kurve) both;
}

.datevdatei-still { opacity: .72; }

.datevdatei-fehler { border-color: color-mix(in srgb, var(--fehler) 45%, transparent); background: var(--fehler-blass); }

.datevdatei-fertig { border-color: color-mix(in srgb, var(--gut, #2e7d4f) 40%, transparent); }

.datevdatei-zeichen { font-size: 1.3rem; line-height: 1.2; }

.datevdatei-text { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; min-width: 0; }

.datevdatei-art { font-size: .86rem; font-weight: 600; color: var(--hausschrift); }

.datevdatei-name {
    font-size: .72rem;
    color: var(--tinte-still);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datevdatei-delta { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .1rem; }

.datevchip {
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.datevchip-neu { background: color-mix(in srgb, var(--gut, #2e7d4f) 14%, transparent); color: var(--gut, #2e7d4f); }

.datevchip-weg { background: color-mix(in srgb, var(--warnung, #a15c00) 14%, transparent); color: var(--warnung, #a15c00); }

.datevchip-still { background: var(--papier-kalt); color: var(--tinte-leise); font-weight: 500; }

.datevdatei-meldung { font-size: .76rem; line-height: 1.45; color: var(--tinte-leise); }

.datevdatei-meldung-fehler { color: var(--fehler); }

.datevdatei-meldung-gut { color: var(--gut, #2e7d4f); font-weight: 500; }

.datevaktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    margin-top: .7rem;
}

.datevaktion .still { font-size: .76rem; }

/* --- Anleitung --- */

.datevanleitung {
    border-radius: var(--radius-klein);
    background: var(--papier-kalt);
    padding: .1rem .75rem;
    margin-bottom: .4rem;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--tinte-leise);
}

.datevanleitung summary {
    cursor: pointer;
    padding: .45rem 0;
    font-weight: 600;
    color: var(--hausschrift);
}

.datevanleitung ol,
.datevanleitung ul { margin: 0 0 .5rem; padding-left: 1.2rem; }

.datevanleitung li { margin-bottom: .25rem; }

.datevanleitung strong { color: var(--tinte); }

@media (max-width: 560px) {
    .datevkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}