/* ==========================================================================
   Mitarbeiterbereich – Fehlmann Wasseraufbereitung AG

   Farben, Abstaende und Breakpoints sind 1:1 aus dem Stylesheet der
   oeffentlichen Website uebernommen (fehlmann-wasser.ch), damit beide
   Auftritte zusammenpassen.

   Wie dort: keine Webfonts, keine Icon-Bibliothek, kein Framework. Icons sind
   eigene SVG-Dateien. Das haelt die Content-Security-Policy streng und
   vermeidet Nachladen von fremden Servern – gut fuer Datenschutz und
   Ladezeit.
   ========================================================================== */

:root {
    /* --- Uebernommen von der Hauptsite ---------------------------------- */
    --bg:        #1b223a;
    --fg:        #ffffff;
    --accent:    #9ac6d8;
    --nav-open:  rgba(27, 34, 58, .6);
    --nav-hot:   rgba(27, 34, 58, .9);
    --maxw:      1200px;
    --gutter:    15px;

    /* Umschaltbreite Mobil -> Desktop, gleicher Wert wie auf der Hauptsite.
       Unterhalb: Menue-Taste und Schublade. Darueber: Bereichsleiste.

       CSS erlaubt var() in Media Queries NICHT – die Zahl steht deshalb
       notgedrungen auch in den @media-Riegeln weiter unten. Das ist kein
       Versehen, sondern die einzige Moeglichkeit. app.js liest den Wert von
       hier und kennt ihn nicht selbst. */
    --bp-wide:   800px;

    /* --- Mobilmenue, Werte der Hauptsite -------------------------------- */

    /* Kantenlaenge der Menue-Taste. */
    --nav-btn:    50px;

    /* Linker Textrand der Menuelinks in der Schublade. */
    --nav-indent: 20px;

    /* Dauer der Schubladenanimation. Verschiebung, Sichtbarkeit und die
       Abdunklung dahinter muessen denselben Wert tragen – laufen sie
       auseinander, blitzt beim Schliessen das Feld oder der Schleier nach. */
    --nav-speed:  .25s;

    /* Gedaempftes Weiss auf dunklem Grund. Traegt zweierlei, das gleich
       aussehen SOLL: die Trennlinien in der Menueschublade und den Text der
       Fusszeile – genau wie auf der Hauptsite, wo beides aus derselben Farbe
       kommt.

       BRAUCHT EINEN EIGENEN NAMEN: Dort heisst dieser Ton --muted, bei uns
       ist --muted bereits dunkler Text auf hellem Grund. */
    --gedaempft:  rgba(255, 255, 255, .3);

    /* Der aktuelle Eintrag in der Schublade. */
    --nav-jetzt:  rgba(255, 255, 255, .9);

    /* Der Schleier hinter der Schublade. BEWUSST NEUTRAL SCHWARZ und nicht
       aus --bg abgeleitet: Er soll die Seite dimmen, nicht einfaerben. */
    --nav-schleier: rgba(0, 0, 0, .5);
    --nav-w:     200px;

    /* --- Ergaenzt fuer die Anwendung ------------------------------------ */
    --page:      #f6f7f9;
    --surface:   #ffffff;
    --text:      #1b223a;
    --muted:     #4a5568;
    --line:      #e3e6ea;

    /* Fuer BEDIENELEMENTE, nicht fuer Trennlinien: --line ist so hell, dass ein
       Knopfrand daraus auf weissem Grund kaum sichtbar waere (rund 1,2:1).
       Fuer etwas, das man anklicken koennen soll, gelten 3:1 als Untergrenze –
       diese Farbe erreicht 3,6:1. */
    --line-stark: #7d879b;

    --ok:        #1f7a3f;
    --ok-bg:     #e8f5ec;
    --warn:      #8a5a00;
    --warn-bg:   #fdf3e0;
    --error:     #a12626;
    --error-bg:  #fdeaea;

    --radius:    4px;
    --schatten:  0 1px 2px rgba(27, 34, 58, .10);

    /* --- Aussparungen des Geraets ---------------------------------------

       Auf dem iPhone laeuft der Mitarbeiterbereich im App-Modus unter der
       Statusleiste hindurch – der Rahmen setzt dafuer
       "apple-mobile-web-app-status-bar-style: black-translucent". Ohne
       Beruecksichtigung der Aussparungen geriete das Logo hinter Uhrzeit und
       Batterieanzeige, und die Fusszeile kollidierte mit dem Home-Indikator.

       Die env()-Werte liefert der Browser nur, wenn in der Viewport-Angabe
       "viewport-fit=cover" steht (siehe templates/layout.php). Auf allen
       uebrigen Geraeten sind sie 0, die Darstellung bleibt also unveraendert.

       Der Umweg ueber eigene Variablen hat einen Grund: Der Geraetemodus der
       Entwicklerwerkzeuge stellt Aussparungen NICHT nach, env() bleibt dort 0.
       Zum Pruefen lassen sich die beiden Werte am <html>-Element von Hand
       setzen (--sicher-oben: 59px, --sicher-unten: 34px) – das entspricht
       einem iPhone mit Dynamic Island. Mit env() direkt an jeder Regel waere
       das nicht moeglich. */
    --sicher-oben:  env(safe-area-inset-top, 0px);
    --sicher-unten: env(safe-area-inset-bottom, 0px);
}

/* --- Basis --------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Der Grund der Seite ist dunkelblau, nicht hell.

   Hell ist allein der Arbeitsstreifen zwischen Navigation und Fusszeile
   (".main", weiter unten). Das ist der Unterschied zu vorher, als der helle
   Ton am Koerper hing: Reichte der Inhalt nicht bis zum unteren Bildschirm-
   rand, blieb unter der dunklen Fusszeile ein weisser Rest stehen. Jetzt
   endet die Seite in derselben Farbe, in der sie beginnt. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

a { color: var(--bg); text-decoration: underline; }
a:hover,
a:focus { color: var(--accent); }

img { max-width: 100%; height: auto; border: 0; }

/* Sichtbarer Fokus. Im alten Auftritt war er unterdrueckt – hier bewusst
   wiederhergestellt, sonst ist die Anwendung mit der Tastatur unbedienbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--bg);
    color: var(--fg);
    padding: 10px 16px;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* --- Typografie ---------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: bold;
    line-height: 1.25;
    color: var(--bg);
}
h1 { font-size: 24px; }
h2 { font-size: 16px; margin-top: 1.8em; }
h3 { font-size: 15px; margin-top: 1.5em; }
h4 { font-size: 15px; }

/* Einleitungssatz unter der Hauptueberschrift.
   Bewusst KEINE Ueberschrift, sondern ein Absatz: Ein <h2> an dieser Stelle
   zwaenge die folgenden Abschnitte auf <h3>, und die Gliederung uebersprang
   eine Stufe – Screenreader kuendigen so eine Struktur als fehlerhaft an.
   Ein Untertitel ist ein Absatz, der wie eine Ueberschrift aussieht – nicht
   umgekehrt. */
.untertitel {
    font-size: 18px;
    color: var(--muted);
    margin-bottom: 1.2em;
}

p { margin: 0 0 1em; }

code {
    background: #eef1f6;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .92em;
}

.hinweis { color: var(--muted); font-size: 13px; }

.content ul { padding-left: 20px; }
.content li { margin-bottom: .35em; }

/* --- Layout -------------------------------------------------------------- */

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Der helle Arbeitsstreifen. Er traegt den hellen Ton, damit unter der
   Fusszeile nichts Helles uebrig bleibt – siehe Kommentar bei "body". */
.main {
    background: var(--page);
    padding: 24px 0 48px;
}

.content {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 20px var(--gutter);
}

/* --- Kopfzeile ----------------------------------------------------------- */

.site-header {
    background: var(--bg);
    color: var(--fg);
    /* Platz fuer die Statusleiste, unter der der Inhalt hindurchlaeuft. Der
       dunkle Hintergrund reicht dadurch bis an den oberen Rand – das ist der
       gewuenschte Eindruck –, der Inhalt beginnt aber darunter. */
    padding-top: var(--sicher-oben);
}
.site-header .container {
    display: flex;
    /* KEIN Umbruch – und das ist wichtig genug fuer eine eigene Begruendung.
       Mit "wrap" rutschte die Menue-Taste unterhalb von rund 380 px in eine
       zweite Zeile und stand dort LINKS unter dem Logo, waehrend "Abmelden"
       darueber blieb. Dieser Punkt war kein gewaehlter Wert, sondern ergab
       sich zufaellig aus den Breiten der Elemente; auf einem schmalen Telefon
       sah die Kopfzeile deshalb voellig anders aus als erwartet.

       Wird es enger als Logo plus Taste, laeuft die Zeile jetzt lieber ueber
       den Rand hinaus und man scrollt waagrecht – so haelt es auch die
       Firmenwebsite. Ein Logo, das seine Groesse behaelt, ist mehr wert als
       eine Zeile, die sich unvorhersehbar umbaut. */
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gutter);
    /* Keine eigenen Abstaende oben und unten: Sie kommen wie auf der
       Firmenwebsite vom Logo selbst. */
}

/* Masse der Firmenwebsite, auf allen Seiten gleich. Die Bilddatei liegt in
   400x276 vor und wird auf 203x140 gezeigt – fast die doppelte Aufloesung
   fuer Bildschirme mit hoher Punktdichte.

   Neben dem Logo steht nichts weiter: Der Slogan der Firmenwebsite waere hier
   eine Werbezeile fuer Leute, die bereits im Haus sind. */
.logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
    margin: 20px 0 30px;
}
.logo img { width: 203px; height: 140px; }

/* Sprachwahl oben rechts, in der Schreibweise der Firmenwebsite: die aktive
   Sprache in Weiss, die andere in der Akzentfarbe – reiner Text, ohne
   Hinterlegung und ohne gefuellte Marke.

   Dass die aktive Sprache allein an der Farbe zu erkennen ist, traegt hier:
   Es sind zwei Eintraege, und wer liest, sieht in welcher Sprache. Fuer
   Screenreader steht das aria-current im Rahmen, unabhaengig von der Farbe.

   align-self haelt die Wahl am oberen Rand – daneben steht ein 140 px hohes
   Logo, mittig ausgerichtet saehe sie verloren aus. */
.langswitch {
    display: flex;
    align-self: flex-start;
    margin-top: 14px;
    margin-left: auto;
    font-size: .8em;
}
.langswitch a {
    display: block;
    padding: 5px;
    color: var(--accent);
    text-decoration: none;
}
.langswitch a:hover,
.langswitch a:focus { color: var(--fg); }
.langswitch [aria-current="true"] { color: var(--fg); }

/* Abmelden sitzt an genau derselben Stelle wie die Sprachwahl und sieht gleich
   aus. Beide zugleich gibt es nie – die Sprachwahl erscheint nur abgemeldet,
   dieser Link nur angemeldet.

   UNTERHALB VON 800 px AUSGEBLENDET, dort steht es im Menue (siehe
   layout.php). Sonst teilten sich Logo, Abmelden und die Menue-Taste eine
   Zeile, die auf einem Telefon nicht dafuer reicht. Der Weg hinaus bleibt an
   genau einem Ort – nur eben je nach Bildschirmbreite an einem anderen. */
.abmelden {
    display: none;
    align-self: flex-start;
    margin-top: 14px;
    margin-left: auto;
    padding: 5px;
    color: var(--accent);
    font-size: .8em;
    text-decoration: none;
}
.abmelden:hover,
.abmelden:focus { color: var(--fg); }

/* --- Fusszeile ----------------------------------------------------------- */

/* Masse und Farbe der Hauptsite. Der Text stand frueher in --accent und
   leuchtete damit kraeftiger als die Ueberschriften darueber – eine Fusszeile
   soll aber zuruecktreten. --gedaempft ist derselbe Ton, den dort auch die
   Trennlinien tragen.

   OHNE den Strich der Hauptsite: Dort ist die ganze Seite dunkelblau, und der
   Strich trennt die Fusszeile vom Inhalt. Bei uns liegt darueber der helle
   Arbeitsstreifen – die Farbkante trennt bereits, ein Strich waere ein zweiter
   Trenner an derselben Stelle. Aus demselben Grund kein margin-top. */
.site-footer {
    background: var(--bg);
    color: var(--gedaempft);
    font-size: .875em;
    padding: 20px 0 25px;
    /* Sonst liegt der Text unter dem Home-Indikator des iPhone. */
    padding-bottom: calc(25px + var(--sicher-unten));
}
.site-footer p { margin: 0; }

/* ==========================================================================
   Navigation
   ========================================================================== */

/* Auf schmalen Geraeten: Off-Canvas ueber eine CSS-Checkbox. Kein JavaScript
   noetig – wie auf der Hauptsite. */

/* Versteckt, aber NICHT ausgeblendet.
   Sie traegt den Zustand des Menues und ist zugleich das, was die Tastatur
   bedient: Das <label> daneben laesst sich nicht fokussieren, ein Label ist
   kein Bedienelement. Mit hidden waere die Box display:none und das Menue
   ueber die Tastatur weder zu oeffnen noch zu schliessen.

   Sichtbar wird der Fokus ueber die Regel weiter unten, die den Rahmen an die
   Taste weiterreicht. */
.navtoggle-input { position: absolute; opacity: 0; pointer-events: none; }

/* Ganz aussen rechts, auf gleicher Hoehe wie die Sprachwahl.
   Das "auto" gehoert hierher: Unterhalb von 800 px ist die Taste das einzige
   Bedienelement der Kopfzeile – "Abmelden" ist dort ausgeblendet –, und ohne
   das "auto" saesse sie unmittelbar neben dem Logo statt am rechten Rand. */
.navtoggle {
    margin-left: auto;
    align-self: flex-start;
    margin-top: 14px;
    /* UEBER dem Menue, sonst ist das Schliesskreuz nur Zierde.
       Das Off-Canvas ist 260 px breit und faehrt von rechts ein; auf einem
       Telefon liegt es damit genau ueber der Taste. Bis hierher zeigte die
       Taste zwar das Kreuz, ein Tipp darauf traf aber das Menue dahinter und
       bewirkte nichts – schliessen ging nur ueber den Hintergrund daneben.
       60 liegt ueber dem Off-Canvas (50) und dessen Hintergrund (40). */
    position: relative;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Masse der Hauptsite. Eckig, nicht abgerundet – dort ist die Taste ein
       Quadrat in der Ecke. */
    width: var(--nav-btn);
    height: var(--nav-btn);
    color: var(--fg);
    cursor: pointer;
}
.navtoggle:hover { background: var(--nav-hot); }

/* Gefuellte Balken statt Striche, wie auf der Hauptsite: Bei 22 Pixeln
   Kantenlaenge traegt eine Flaeche besser als eine 2 Pixel dicke Linie. Die
   Pfade sind von dort uebernommen. */
.navtoggle svg { width: 22px; height: 22px; fill: currentColor; }

.navtoggle .icon-close { display: none; }

.navtoggle-input:checked ~ .site-header .navtoggle .icon-close,
.navtoggle-input:checked ~ .site-header .navtoggle .label-close { display: inline-flex; }
.navtoggle-input:checked ~ .site-header .navtoggle .icon-open { display: none; }

.navtoggle-input:focus-visible ~ .site-header .navtoggle {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.mainnav { display: none; }

.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: var(--nav-schleier);
    opacity: 0;
    visibility: hidden;
    z-index: 40;
    /* Nicht nur Kosmetik: Safari auf iOS liefert Klicks auf grosse leere
       Flaechen unzuverlaessig aus, solange sie nicht als anklickbar
       gekennzeichnet sind. Uebernommen von der Hauptsite. */
    cursor: pointer;
}
.offcanvas {
    position: fixed;
    top: 0; right: 0;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: var(--bg);
    z-index: 50;
    transform: translateX(100%);
    overflow-y: auto;
    /* NICHT NUR VERSCHIEBEN, sondern auch aus der Tabulatorreihenfolge
       nehmen. Ohne das bleiben die Menuelinks bei geschlossener Schublade
       anspringbar, obwohl sie ausserhalb des Bildschirms liegen – der Fokus
       wandert dann sichtbar ins Nichts. visibility schaltet schrittweise:
       beim Oeffnen sofort sichtbar, beim Schliessen erst nach Ablauf der
       Animation. Die bleibt dadurch vollstaendig zu sehen. */
    visibility: hidden;
    /* Beginnt unterhalb der Statusleiste, sonst liegt der erste Menueeintrag
       im App-Modus hinter der Uhrzeit. */
    padding-top: calc(64px + var(--sicher-oben));
    padding-bottom: var(--sicher-unten);
}
.offcanvas,
.offcanvas-backdrop {
    transition:
        transform  var(--nav-speed) ease,
        opacity    var(--nav-speed) ease,
        visibility var(--nav-speed);
}

.navtoggle-input:checked ~ .offcanvas {
    transform: translateX(0);
    visibility: visible;
}
.navtoggle-input:checked ~ .offcanvas-backdrop { opacity: 1; visibility: visible; }

.offcanvas-nav { list-style: none; margin: 0; padding: 0; }

/* Masse und Farben der Hauptsite. Die Trennlinie sitzt OBEN und ist ein
   heller Strich: Sie lag frueher unten und trug --nav-hot – fast derselbe Ton
   wie der Grund der Schublade, damit praktisch unsichtbar. */
.offcanvas-nav a {
    display: block;
    padding: 20px var(--nav-indent);
    font-size: .875em;
    line-height: 1;
    color: var(--fg);
    text-decoration: none;
    border-top: 1px solid var(--gedaempft);
}
.offcanvas-nav a:hover,
.offcanvas-nav a:focus { background: var(--fg); color: var(--bg); }
.offcanvas-nav [aria-current="page"] {
    background: var(--nav-jetzt);
    color: var(--bg);
}

/* Abmelden steht als letzter Eintrag und ist bewusst abgesetzt: Es ist eine
   Handlung, kein Ziel. Der Abstand darueber verhindert, dass man es beim
   Zielen auf den letzten Bereich versehentlich trifft; die Akzentfarbe nimmt
   es zugleich aus der Reihe der Bereiche heraus. */
.offcanvas-nav__abmelden { margin-top: 18px; }
.offcanvas-nav__abmelden a { color: var(--accent); }

/* ==========================================================================
   Komponenten
   ========================================================================== */

/* --- Meldungen ----------------------------------------------------------- */

.alert {
    border-left: 4px solid var(--accent);
    background: var(--surface);
    padding: 12px 14px;
    margin: 0 0 18px;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.alert--ok    { border-left-color: var(--ok);    background: var(--ok-bg); }
.alert--warn  { border-left-color: var(--warn);  background: var(--warn-bg); }
.alert--error { border-left-color: var(--error); background: var(--error-bg); }
.alert p:last-child { margin-bottom: 0; }

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

.login-card {
    max-width: 420px;
    margin: 8vh auto;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(27, 34, 58, .14);
    padding: 28px var(--gutter);
}
.login-card h1 { text-align: center; margin-bottom: 1.2em; }

/* --- Anmeldeseite: dunkelblau ueber die ganze Flaeche --------------------- */
/*
   Wie auf der Firmenwebsite. Der Grund ist ohnehin dunkel; hier entfaellt
   zusaetzlich der helle Arbeitsstreifen, und Schrift und Bedienelemente
   bekommen die hellen Werte.

   ALLES AUF body.ist-anmeldung EINGEGRENZT. Die Regeln oben gelten weiter fuer
   die Fehlerseite, die dieselbe .login-card benutzt und hell bleiben soll.
*/

body.ist-anmeldung {
    /* Nur hier gebraucht, deshalb an dieser Stelle statt in :root. Ein
       aufgehellter Grund traegt die Eingabefelder besser als ein Rahmen
       allein – rein durchsichtig waeren sie vom Hintergrund nicht zu
       unterscheiden. */
    --feld: rgba(255, 255, 255, .09);

    color: var(--fg);
    /* Sagt dem Browser, dass die Seite dunkel ist. Bildlaufleiste,
       Schreibmarke und die Ausfuellhilfe richten sich danach. */
    color-scheme: dark;
}

/* Den hellen Arbeitsstreifen gibt es hier nicht – die Anmeldeseite ist von
   oben bis unten dunkel. */
body.ist-anmeldung .main { background: none; }

/* Die Fusszeile ist hier nicht erwuenscht: Die Seite soll mit dem Knopf enden.
   Ausgeblendet statt aus dem Rahmen entfernt – auf allen uebrigen Seiten steht
   sie weiterhin, dort fuehrt sie den Abmelde-Link. */
body.ist-anmeldung .site-footer { display: none; }

/* Ueberschriften und Links stehen sonst in --bg und waeren auf dem gleichen
   Grund unsichtbar. */
body.ist-anmeldung h1,
body.ist-anmeldung h2,
body.ist-anmeldung h3 { color: var(--fg); }
body.ist-anmeldung a { color: var(--accent); }
body.ist-anmeldung a:hover,
body.ist-anmeldung a:focus { color: var(--fg); }

/* Nebentexte: --muted ist ein dunkles Grau und traegt hier nicht. */
body.ist-anmeldung .untertitel,
body.ist-anmeldung .hinweis,
body.ist-anmeldung .erklaerung { color: var(--accent); }

/* Meldungen behalten ihren hellen Grund und brauchen deshalb die dunkle
   Schrift zurueck – vom Koerper geerbtes Weiss waere darauf unlesbar. */
body.ist-anmeldung .alert { color: var(--text); }

/*
   Das Bild ist reine Zier und traegt keine Auskunft – deshalb als Hintergrund
   und nicht als <img>. Zwei Gruende sprechen hier dafuer:

     * Fehlt die Datei, bleibt die Flaeche in der Akzentfarbe stehen. Ein <img>
       zeigte an ihrer Stelle das Symbol fuer ein kaputtes Bild.
     * Ein leeres alt-Attribut muesste sonst begruenden, warum das Bild fuer
       Screenreader nichts bedeutet. Als Hintergrund stellt sich die Frage nicht.

   Das Bild liegt in 1800x600 vor und wird auf hoechstens 1200x400 gezeigt –
   die anderthalbfache Aufloesung fuer Bildschirme mit hoher Punktdichte.
   'cover' haelt den Ausschnitt auch dann ein, wenn spaeter eines mit anderem
   Seitenverhaeltnis abgelegt wird.
*/
.login-hero {
    max-width: 1200px;
    margin: 0 auto 28px;
    aspect-ratio: 3 / 1;
    border-radius: var(--radius);
    background: var(--accent) url("/assets/img/img-hero-homepage.jpg") center / cover no-repeat;
}

body.ist-anmeldung .login-card {
    background: none;
    box-shadow: none;
    margin: 0 auto 8vh;
    padding: 0 var(--gutter);
}

body.ist-anmeldung .form-field label { color: var(--fg); }
body.ist-anmeldung .form-field input[type="text"],
body.ist-anmeldung .form-field input[type="password"] {
    background: var(--feld);
    border-color: var(--accent);
    color: var(--fg);
}
body.ist-anmeldung .form-field input:focus { border-color: var(--fg); }

/* Umgekehrt zum uebrigen Knopf: dunkler Grund faende hier keinen Kontrast. */
body.ist-anmeldung .btn {
    background: var(--accent);
    color: var(--bg);
}
body.ist-anmeldung .btn:hover,
body.ist-anmeldung .btn:focus {
    background: var(--fg);
    color: var(--bg);
}

/*
   Die Ausfuellhilfe des Browsers.

   Chrome und Safari uebermalen ausgefuellte Felder mit einem hellen Gelb –
   auf dunklem Grund ist die Schrift dann nicht mehr zu lesen. Die
   Hintergrundfarbe laesst sich dabei nicht setzen, wohl aber ein Innenschatten,
   der sie vollstaendig verdeckt. Die lange Verzoegerung haelt ihn dauerhaft.

   Der Farbwert steht hier ausgeschrieben: Ein Schatten kann nicht
   halbdurchsichtig ueber die gelbe Flaeche gelegt werden, er muss sie decken.
   #262e47 ist --bg mit demselben Aufhellungsgrad wie --feld.

   Ohne diese Regel sieht die Seite genau dann kaputt aus, wenn jemand seine
   gespeicherten Zugangsdaten benutzt – also im Alltag fast immer.
*/
body.ist-anmeldung input:-webkit-autofill,
body.ist-anmeldung input:-webkit-autofill:hover,
body.ist-anmeldung input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 100px #262e47;
    -webkit-text-fill-color: var(--fg);
    caret-color: var(--fg);
    transition: background-color 100000s ease-in-out 0s;
}

/* --- Formulare ----------------------------------------------------------- */

.form-field { margin-bottom: 16px; }
.form-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 14px;
}
.form-field input[type="text"],
.form-field input[type="password"],
.form-field input[type="email"],
.form-field input[type="search"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    color: var(--text);
    background: var(--surface);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--accent); }
.form-field .fehler { color: var(--error); font-size: 13px; margin-top: 4px; }
.form-field .erklaerung { color: var(--muted); font-size: 13px; margin-top: 4px; }

/*
   Zwei Lautstaerken, mehr nicht:

   .btn            gefuellt  – die eine Hauptaktion einer Seite
   .btn.btn--leise umrandet  – jeder Nebenweg daneben

   Stehen mehrere gleichrangige Knoepfe untereinander, sind alle leise. Zwei
   gefuellte Knoepfe auf derselben Seite heben sich gegenseitig auf.
*/
.btn {
    display: inline-block;
    padding: 11px 20px;
    /* Durchsichtiger Rand statt gar keiner: Nur so sind gefuellter und leiser
       Knopf gleich hoch, wenn sie in einer Reihe nebeneinander stehen. */
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover,
.btn:focus { background: var(--nav-hot); color: var(--accent); }
.btn--voll { width: 100%; text-align: center; }

.btn--leise {
    background: transparent;
    color: var(--bg);
    border-color: var(--line-stark);
}
/* Beim Zeigen UND beim Anspringen mit der Tastatur – sonst bekaeme, wer ohne
   Maus bedient, gar keine Rueckmeldung. Der Wechsel auf die Akzentfarbe ist
   bewusst deutlich: Ein Rand, der nur eine Spur dunkler wird, laesst offen,
   ob ueberhaupt etwas passiert ist. */
.btn--leise:hover,
.btn--leise:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* --- Bereichsuebersicht -------------------------------------------------- */

.area-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
.area-tile a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
}
.area-tile a:hover,
.area-tile a:focus {
    border-color: var(--accent);
    box-shadow: var(--schatten);
}
.area-tile img { width: 32px; height: 32px; flex: 0 0 32px; }
.area-tile strong { display: block; color: var(--bg); }
.area-tile span { color: var(--muted); font-size: 13px; }

/* --- Dokumentenliste ----------------------------------------------------- */

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.doc-row:last-child { border-bottom: 0; }
.doc-row__titel { flex: 1 1 auto; min-width: 0; }
.doc-row__titel strong { display: block; }

/* --- Bibliothek: Suchfeld ------------------------------------------------ */

/* Steht zuoberst, weil es der Hauptweg ist: Bei drei Ebenen bis zur PDF-Datei
   tippt niemand gern durch, wer weiss, wonach er sucht. */
.bib-suche {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.bib-suche__feld {
    flex: 1 1 260px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}

/* --- Bibliothek: Brotkrumen ---------------------------------------------- */

.brotkrumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--muted);
}
.brotkrumen a { color: var(--muted); }
.brotkrumen a:hover,
.brotkrumen a:focus { color: var(--bg); }
.brotkrumen__pfeil { color: var(--line); }
.brotkrumen [aria-current="page"] { color: var(--text); font-weight: bold; }

/* --- Bibliothek: Ordnerliste --------------------------------------------- */

.ordner-liste { list-style: none; margin: 0 0 18px; padding: 0; }
.ordner-zeile { border-bottom: 1px solid var(--line); }
.ordner-zeile:last-child { border-bottom: 0; }

/* Stehen im selben Verzeichnis Ordner UND Dokumente, setzt die Vorlage
   "--anschluss". Dann faellt der Absatz weg und die Linie unter dem letzten
   Ordner bleibt stehen: Beide Listen lesen sich als eine durchgehende Reihe
   mit gleichen Trennern, statt als zwei Bloecke, die ohne Grenze aneinander
   stossen. Ohne Dokumente endet die Ordnerliste wie die Dokumentenliste –
   ohne abschliessende Linie. */
.ordner-liste--anschluss { margin-bottom: 0; }
.ordner-liste--anschluss .ordner-zeile:last-child {
    border-bottom: 1px solid var(--line);
}
.ordner-zeile__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    color: var(--text);
    text-decoration: none;
}
.ordner-zeile__link:hover,
.ordner-zeile__link:focus { background: var(--page); }
.ordner-zeile__icon { flex: 0 0 24px; }
.ordner-zeile__name { flex: 1 1 auto; min-width: 0; font-weight: bold; }
.ordner-zeile__zahl { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* --- Bibliothek: Fassungen und Sprachen ---------------------------------- */

/* Ein Dokument, darunter seine Fassungen, je Fassung die Sprachen. Bewusst
   OHNE Auszeichnung einer Fassung als "aktuell": Welche die richtige ist,
   haengt an der Anlage beim Kunden, nicht am Datum. */
.doc-row--gruppe { align-items: flex-start; }
.doc-row__inhalt { flex: 1 1 auto; min-width: 0; }
.doc-row__titel-text { display: block; margin-bottom: 6px; }
.doc-row__pfad {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
}

.fassungen { list-style: none; margin: 0; padding: 0; }
.fassungen__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 4px 0;
}
.fassungen__version {
    flex: 0 0 auto;
    min-width: 9em;
    color: var(--muted);
    font-size: 14px;
    /* Steht hier statt einer Version die Bezeichnung aus dem Dateinamen
       (siehe LibraryRepository), kann sie lang werden – ohne diese Regel
       schoebe sie die Zeile auf dem Telefon ueber den Rand hinaus. */
    overflow-wrap: anywhere;
}
/* Das Ausgabedatum aus dem Dateinamen. Bewusst schwaecher als die
   Bezeichnung: Es ordnet ein, unterscheidet aber selten. */
.fassungen__stand {
    flex: 0 0 auto;
    min-width: 5.5em;
    color: var(--muted);
    font-size: 13px;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}
.fassungen__sprachen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fassungen .btn.ist-aktiv {
    background: var(--bg);
    border-color: var(--bg);
    color: var(--fg);
}

/* --- Feste Spalten fuer die Fassungen -----------------------------------

   Der Flexbereich oben laesst jede Zeile fuer sich laufen: Traegt eine
   Fassung kein Datum, fehlt ihr die mittlere Angabe, und ihre Knoepfe
   ruecken um deren Breite nach links. Das Raster hier stellt sie wieder
   untereinander.

   Es sitzt auf der LISTE, damit alle Zeilen EINES Dokuments dieselben
   Spalten teilen; die Zeile reicht sie als "subgrid" durch. Der andere Weg
   waere display:contents an der <li> – der nimmt ihr in einigen
   Vorleseprogrammen die Listenbedeutung.

   max-content heisst: so breit wie der laengste Text DIESES Dokuments.
   Traegt keine seiner Fassungen ein Datum, faellt die mittlere Spalte auf
   null zusammen, statt leeren Platz zu belegen.

   Der @supports-Rahmen ist Absicht: Ein Browser ohne subgrid bekommt
   unveraendert den Flexbereich von oben – schlechter ausgerichtet, aber nie
   kaputt. Unter 700 px bleibt es ohnehin beim Umbruch; drei Spalten und die
   Knoepfe passen auf einem Telefon nicht nebeneinander. */
@media (min-width: 700px) {
    @supports (grid-template-columns: subgrid) {
        .fassungen {
            display: grid;
            grid-template-columns: max-content max-content auto;
            column-gap: 12px;
        }
        .fassungen__zeile {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            align-items: center;
        }
        /* Die Untergrenze kommt jetzt aus der Spalte, nicht aus dem Feld –
           sonst koennte die Datumsspalte nie zusammenfallen. */
        .fassungen__stand { min-width: 0; }
    }
}

/* Fassungswahl im Viewer. Zugeklappt, sobald es viele sind – die Leiste
   darunter soll nicht weggedraengt werden. */
.viewer-fassungen {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.viewer-fassungen summary { cursor: pointer; font-weight: bold; }
.viewer-fassungen[open] summary { margin-bottom: 8px; }

.suchstand { color: var(--muted); font-size: 14px; }

/* --- Bibliotheksverwaltung ----------------------------------------------- */

/* Bericht des letzten Durchgangs. Rot umrandet, sobald die Loeschsperre
   angeschlagen hat oder etwas gescheitert ist. */
.lauf-bericht {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}
.lauf-bericht--warnung { border-left-color: var(--warn); background: var(--warn-bg); }
.lauf-bericht__zeile { margin: 0 0 4px; font-size: 14px; }
.lauf-bericht__meldung { margin: 8px 0; font-weight: bold; }
.lauf-bericht__aktion { display: inline-block; margin: 8px 8px 0 0; }

.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    font-size: 14px;
    color: var(--muted);
}
.kennzahlen strong { display: block; font-size: 20px; color: var(--text); }
.kennzahlen .ist-warnung strong { color: var(--warn); }

.admin-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.admin-filter select,
.admin-filter input {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}

.admin-table .ist-auffaellig { background: var(--warn-bg); }
.admin-table__meta { display: block; color: var(--muted); font-size: 13px; }

/* Erkannt und korrigiert stehen NEBENEINANDER. Nur so ist nachvollziehbar,
   was die Anwendung gelesen hat und was jemand von Hand richtiggestellt hat. */
.wert-korrigiert { font-weight: bold; }
.wert-erkannt,
.feld-erkannt {
    display: block;
    color: var(--muted);
    font-size: 13px;
}
.feld-erkannt { margin-top: 4px; }

.datei-kopf {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.datei-kopf p { margin: 0 0 4px; }
.datei-kopf p:last-child { margin-bottom: 0; }

.marke--warnung { background: var(--warn-bg); color: var(--warn); }

.doc-row__icon { flex: 0 0 24px; }

/* --- PDF-Viewer ---------------------------------------------------------- */

/* Titel und Dateigroesse. Duerfen wegscrollen – beim Lesen braucht sie
   niemand, und der Platz gehoert dem Dokument. */
.viewer-titel { margin-bottom: 12px; }
.viewer-titel h1 { margin-bottom: .15em; font-size: 20px; }
.viewer-titel .hinweis { margin: 0; }

/* Werkzeugleiste.

   KLEBT beim Scrollen. Ohne das waere sie bei einem Handbuch mit dreihundert
   Seiten nach dem ersten Wischen unerreichbar – man muesste fuer jeden
   naechsten Suchtreffer die ganze Strecke zurueck nach oben.

   z-index bewusst NIEDRIGER als die Menue-Ebenen: Off-Canvas 50, dessen
   Hintergrund 40, Sprunglink 100. Sonst laege die Leiste ueber dem
   Mobilmenue. */
.viewer-leiste {
    position: sticky;
    /* Nicht am Bildschirmrand kleben, sondern unter der Statusleiste – sonst
       verschwaende die Bedienung im App-Modus hinter der Uhrzeit. */
    top: var(--sicher-oben);
    z-index: 20;

    /* Dunkelblau wie die Kopfzeile der Website. Die Leiste schwebt ueber
       Dokumentseiten, die fast immer weiss sind – auf hellem Grund verschwaende
       sie darin. Der Farbblock trennt Bedienung und Inhalt eindeutig. */
    background: var(--bg);
    color: var(--fg);
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(27, 34, 58, .25);

    padding: 8px 10px;
    margin-bottom: 12px;
}
.viewer-leiste__haupt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* --- Bedienelemente auf dunklem Grund ------------------------------------

   .btn--leise ist fuer helle Flaechen gebaut: dunkle Schrift, heller Rand.
   Auf der dunklen Leiste waere die Schrift unsichtbar, deshalb hier gedreht. */
.viewer-leiste .btn--leise {
    color: var(--fg);
    border-color: rgba(255, 255, 255, .3);
    background: transparent;
}
.viewer-leiste .btn--leise:hover,
.viewer-leiste .btn--leise:focus {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    color: var(--fg);
}
/* Ohne das saehen die Treffer-Pfeile vor der ersten Suche bedienbar aus. */
.viewer-leiste .btn--leise:disabled {
    opacity: .4;
    cursor: default;
    background: transparent;
}

.viewer-zurueck { display: inline-flex; align-items: center; gap: 4px; }
.viewer-zurueck__pfeil { font-size: 17px; line-height: 1; }

/* Schmal: nur der Pfeil. Der Text wird optisch versteckt statt entfernt,
   sonst verloere der Verweis seinen zugaenglichen Namen. */
.viewer-zurueck__text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.viewer-seitenwahl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.viewer-seitenwahl__feld {
    width: 3.6em;
    padding: 5px 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
    text-align: center;
    color: var(--text);
    background: var(--surface);
}
.viewer-seitenwahl__feld:focus { border-color: var(--accent); }

.viewer-zoom { display: inline-flex; align-items: center; gap: 4px; }

.viewer-zoomwert  { font-size: 14px; }

/* Hellblau wie die Sprachwahl in der Kopfzeile. Der graue Ton fuer Nebentexte
   (--muted) waere auf Dunkelblau nicht mehr lesbar. */
.viewer-seitenzahl {
    font-size: 14px;
    color: var(--accent);
    white-space: nowrap;
}

.viewer-lupe { display: inline-flex; align-items: center; padding: 6px 10px; }

/* Der Hinweis auf die Tastenkuerzel steht unter dem Dokument – wer ihn
   braucht, sucht ihn dort, und oben nimmt er nur Platz weg. */
.viewer-tastatur { margin-top: 12px; }

.btn--klein { padding: 6px 12px; font-size: 14px; }

/* --- Suche im Dokument --------------------------------------------------- */

/* Auf schmalen Bildschirmen eingeklappt; die Lupe schaltet sie zu. Zwei
   dauerhafte Zeilen waeren auf einem Telefon zu teuer. */
.viewer-suche {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.viewer-leiste.ist-suche-offen .viewer-suche { display: flex; }
/* Feld und Loeschtaste bilden eine Einheit; die Taste sitzt im Feld. */
.viewer-suche__feldbox {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 320px;
}
.viewer-suche__feld {
    width: 100%;
    min-width: 0;
    /* Rechts Platz fuer die Loeschtaste. */
    padding: 6px 30px 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
}
.viewer-suche__feld:focus { border-color: var(--accent); }

/* Die eingebaute Loeschtaste von Chrome und Safari ausblenden – sonst stuenden
   zwei Kreuze nebeneinander. Firefox bringt gar keine mit, deshalb ueberhaupt
   eine eigene. */
.viewer-suche__feld::-webkit-search-cancel-button,
.viewer-suche__feld::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.viewer-suche__leeren {
    position: absolute;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.viewer-suche__leeren:hover { background: var(--line); color: var(--text); }

/* Erscheint erst, wenn etwas im Feld steht. Bewusst ohne JavaScript: Der
   Browser wertet :placeholder-shown bei jeder Eingabe selbst aus, auch beim
   Leeren ueber die Tastatur. */
.viewer-suche__feld:placeholder-shown + .viewer-suche__leeren { display: none; }
.viewer-suche__stand {
    font-size: 14px;
    color: var(--accent);
    min-width: 0;
}

/* Hervorhebung der Fundstellen in der Textebene.

   ALLE Fundstellen gelb, die AKTUELLE hellblau mit dunklem Rand. Ohne diese
   Unterscheidung sieht man bei mehreren Treffern auf einer Seite nur eine Reihe
   gleich aussehender Markierungen und weiss nicht, welche gemeint ist.

   ZWEI DINGE, DIE HIER LEICHT SCHIEFGEHEN:

   1. "color: inherit" ist Pflicht. Die Textebene liegt unsichtbar ueber der
      gezeichneten Seite – ihre Schrift ist durchsichtig. Ein <mark> braechte
      sonst die Browser-Vorgabe mit (schwarz auf gelb), und der Text erschiene
      doppelt und leicht versetzt.

   2. Die Deckkraft bleibt bewusst unter 60 Prozent. Die Farbe liegt ueber dem
      gezeichneten Text; bei hoeherer Deckkraft waere ausgerechnet die
      gefundene Stelle am schlechtesten zu lesen. Die aktuelle Fundstelle hebt
      sich deshalb ueber den Rand ab, nicht ueber kraeftigere Farbe. */
.textLayer mark.ist-treffer {
    color: inherit;
    background: rgba(255, 213, 0, .42);
    border-radius: 2px;
    padding: 0;
}
.textLayer mark.ist-aktuell {
    background: rgba(154, 198, 216, .58);
    outline: 2px solid rgba(27, 34, 58, .7);
    outline-offset: 0;
}

.pdf-viewer {
    background: #55606f;
    border-radius: var(--radius);
    padding: 12px;
    overflow: auto;

    /* Die Zwei-Finger-Geste gehoert dem Dokument, nicht der Seite.
       Ohne diese Angabe deutet der Browser sie als Seitenzoom und
       vergroessert alles mit, auch die Werkzeugleiste – und im Skript kommt
       sie gar nicht erst an. "pan-x pan-y" laesst das Wischen mit einem
       Finger in beide Richtungen unberuehrt. */
    touch-action: pan-x pan-y;
}
.pdf-viewer__seiten {
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* ZWEI ZEILEN, UND DAS IST ABSICHT.
       Eine zentrierte Seite, die breiter ist als der Rahmen, ragt auf BEIDEN
       Seiten hinaus – und der linke Ueberhang liegt vor dem Nullpunkt des
       Rollbereichs. Dorthin fuehrt kein Scrollweg: Nach rechts kommt man,
       nach links nicht. "safe" gibt die Zentrierung genau dann auf, wenn sie
       zu unerreichbarem Ueberlauf fuehren wuerde.

       Die erste Zeile bleibt als Rueckfall stehen: Ein Browser, der "safe"
       nicht kennt, verwirft die zweite und behaelt die bisherige
       Zentrierung – schlechter, aber nicht kaputt. */
    align-items: center;
    align-items: safe center;
}

/* Nur WAEHREND der Zwei-Finger-Geste: Der Browser darf den Stapel als eigene
   Ebene halten und muss ihn nicht bei jedem Zwischenschritt neu rastern.
   Bewusst nicht dauerhaft – will-change kostet Speicher, und der ist auf dem
   Telefon bei einem grossen Handbuch ohnehin knapp. Das Skript setzt die
   Klasse beim Ansetzen und nimmt sie beim Loslassen wieder weg. */
.pdf-viewer__seiten.ist-geste {
    will-change: transform;
}

/* Traeger einer Seite: Zeichenflaeche und Textebene liegen uebereinander.
   Bewusst OHNE max-width: Der Viewer setzt die Groesse passend zur gewaehlten
   Vergroesserung. Eine Begrenzung hier wuerde nur den Traeger schrumpfen,
   nicht die Zeichenflaeche darin – die Textebene saesse dann versetzt. Ist
   die Seite breiter als der Rahmen, scrollt der Rahmen (overflow: auto). */
.pdf-seite {
    position: relative;
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);

    /* OHNE das landet jeder angesprungene Suchtreffer HINTER der klebenden
       Leiste. Die Hoehe meldet das Skript, weil sie schwankt: ein- oder
       zweizeilig, Suche auf- oder zugeklappt. Der Ersatzwert greift nur, falls
       das Skript nicht laeuft. */
    scroll-margin-top: calc(var(--sicher-oben) + var(--leiste-hoehe, 56px) + 10px);
}
.pdf-seite canvas {
    display: block;
    /* Bildschirmfotos sind nicht verhinderbar – aber das versehentliche
       "Bild sichern" per langem Tippen auf iOS laesst sich abstellen.
       Bewusst NUR auf der Zeichenflaeche: Auf der Textebene wuerde es das
       Markieren und die Sprachausgabe beeintraechtigen. */
    -webkit-touch-callout: none;
}

/* --- Dokumentansicht: schmale Bildschirme -------------------------------- */

/* Randlos unterhalb des Umschaltpunkts.

   Container (15 px), Inhaltskarte (15 px) und Viewer-Rahmen (12 px) kosten
   zusammen rund 84 px – auf einem 390-px-Telefon ueber ein Fuenftel der
   Breite. Weil der Viewer auf Seitenbreite einpasst, wird der Text dadurch
   unmittelbar kleiner. Hier faellt das weg; auf dem Desktop bleibt die
   weisse Karte, dort ist Breite kein Problem. */
@media (max-width: 799px) {
    .ist-leseansicht .main { padding-top: 12px; }

    .ist-leseansicht .main > .container {
        padding-left: 0;
        padding-right: 0;
    }
    .ist-leseansicht .content {
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Randlos sollen nur die SEITEN sein. Text und Bedienung bekommen ihren
       Abstand einzeln zurueck, sonst klebten sie am Bildschirmrand. */
    .ist-leseansicht .viewer-titel,
    .ist-leseansicht .viewer-leiste,
    .ist-leseansicht .viewer-tastatur {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
    /* Randlos reicht die Leiste bis an den Bildschirmrand – abgerundete Ecken
       saehen dort abgeschnitten aus. */
    .ist-leseansicht .viewer-leiste { border-radius: 0; }
    .ist-leseansicht #pdf-status,
    .ist-leseansicht noscript .alert {
        margin-left: var(--gutter);
        margin-right: var(--gutter);
    }

    .ist-leseansicht .pdf-viewer {
        padding: 6px 4px;
        border-radius: 0;
    }
}

/* Ab dem Umschaltpunkt ist alles gleichzeitig sichtbar: Die Suche braucht
   keine Lupe, und "Zurueck" darf ausgeschrieben werden. Diese Regeln stehen
   bewusst NACH den Grundregeln – so genuegt die Reihenfolge und es braucht
   kein !important. */
@media (min-width: 800px) {
    /* Alles auf EINER Linie: Zurueck, Seitenwahl und Zoom links, die Suche
       rechts daneben. Auf einem breiten Bildschirm ist der Platz da, und die
       Leiste bleibt dadurch so flach wie moeglich – sie nimmt dem Dokument
       ja dauerhaft Hoehe weg. Reicht es doch nicht, bricht die Suche als
       Ganzes um, statt einzelne Elemente zu zerreissen. */
    .viewer-leiste {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
    }
    .viewer-leiste__haupt { flex: 0 0 auto; }

    .viewer-suche {
        display: flex;
        flex: 1 1 340px;
        min-width: 0;
        margin-top: 0;
    }
    /* Etwas schmaler als in der eigenen Zeile, damit die Linie laenger haelt. */
    .viewer-suche__feldbox { flex: 1 1 180px; max-width: 300px; }

    #pdf-suche-auf { display: none; }

    .viewer-zurueck__pfeil { display: none; }
    .viewer-zurueck__text {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}

/* --- Tabellen ------------------------------------------------------------ */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-table th,
.admin-table td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.admin-table th { color: var(--bg); }
.admin-table tbody tr:hover { background: var(--page); }

/* --- Zwei-Faktor-Einrichtung --------------------------------------------- */

.setup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}
.setup-grid__qr { flex: 0 0 auto; }
.setup-grid__text { flex: 1 1 280px; min-width: 260px; }
.setup-grid__text h3:first-child { margin-top: 0; }

.qr-bild {
    background: #fff;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.geheimnis {
    font-size: 15px;
    letter-spacing: 1px;
    word-break: break-all;
}

/* --- Wiederherstellungscodes --------------------------------------------- */

.code-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.code-grid li {
    background: #eef1f6;
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
}

/* --- Fehlerseiten --------------------------------------------------------- */

.fehler-status {
    margin: 0 0 4px;
    text-align: center;
    font-size: 52px;
    font-weight: bold;
    line-height: 1;
    color: var(--accent);
}

/* --- Hilfsklassen --------------------------------------------------------- */
/* Bewusst als Klassen statt als style-Attribute: Die Content-Security-Policy
   setzt style-src 'self' – Inline-Formatierung im HTML wuerde vom Browser
   verworfen und die Seite saehe kaputt aus. */

.zentriert     { text-align: center; }
.abstand-oben  { margin-top: 18px; }
.abstand-oben--gross { margin-top: 24px; }
.form-schmal   { max-width: 460px; }
.feld-kurz     { max-width: 180px; }
.fehlerliste   { margin: 0; padding-left: 20px; }

/* ==========================================================================
   Breakpoints – 768 / 800 / 992 / 1200, wie auf der Hauptsite
   ========================================================================== */

@media (min-width: 768px) {
    body { font-size: 16px; }

    h1 { font-size: 28px; }

    .content { padding: 26px 28px; }

    .area-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 800px) {
    /* Ab hier Desktop-Navigation statt Off-Canvas – gleicher Umschaltpunkt
       wie auf der Hauptsite. */
    .navtoggle,
    .offcanvas,
    .offcanvas-backdrop { display: none; }

    /* Die Ankreuzbox MUSS hier mit ausgeblendet werden. opacity und
       pointer-events nehmen sie nicht aus der Tabulatorreihenfolge: Sonst
       liesse sie sich auf dem Rechner mit der Leertaste umschalten – sichtbar
       geschieht nichts, aber app.js sperrt daraufhin das Scrollen der Seite,
       und es gaebe kein Bedienelement mehr, um die Sperre zu loesen. */
    .navtoggle-input { display: none; }

    /* Ohne die Menue-Taste ist die Zeile frei: Hier hat "Abmelden" neben dem
       Logo Platz und steht wieder oben rechts. */
    .abmelden { display: block; }

    .mainnav {
        display: block;
        background: var(--nav-hot);
    }
    .mainnav ul {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 var(--gutter);
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    .mainnav > ul > li > a {
        display: block;
        padding: 12px 16px;
        color: var(--fg);
        text-decoration: none;
        font-size: 15px;
    }
    .mainnav > ul > li > a:hover,
    .mainnav > ul > li > a:focus,
    .mainnav > ul > li.is-current > a {
        background: var(--accent);
        color: var(--bg);
        font-weight: bold;
    }

    /* "Mein Profil" steht als Symbol ganz rechts.
       Es ist der einzige Eintrag, der nicht zu einem Arbeitsbereich fuehrt,
       sondern zum eigenen Konto – abgesetzt gibt er die Reihe der Bereiche
       nicht als Gleichrangiger aus.

       margin-left:auto schiebt ihn an die rechte Innenkante von "ul". Die
       hat dieselbe Breite und denselben Innenabstand wie ".container", also
       steht das Symbol genau ueber der rechten Kante des Inhalts und des
       Bilds auf der Anmeldeseite. Wird die Reihe umbrochen, wirkt die Regel
       je Zeile – der Eintrag bleibt rechts. */
    .mainnav__symbolfeld { margin-left: auto; }

    /* Ein Bild im Textfluss saesse auf der Grundlinie und zoege die Zeile
       auseinander. display:block nimmt es heraus, die 24 px entsprechen der
       Zeilenhoehe der uebrigen Eintraege – der Streifen behaelt seine Hoehe. */
    .mainnav__symbol { display: block; }
}

@media (min-width: 992px) {
    .main { padding: 32px 0 64px; }
    .area-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
    .content { padding: 32px 36px; }
}

/* --- Bewegung reduzieren ------------------------------------------------- */
/* Betriebssystem-Einstellung respektieren – wie auf der Hauptsite. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Verwaltung ---------------------------------------------------------- */

/* Ueberschrift mit Schaltflaechen rechts. Bricht auf schmalen Geraeten um,
   statt die Schaltflaechen aus dem Bild zu schieben. */
.admin-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.admin-kopf h1 { margin: 0; }

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Tabellen sind auf dem Telefon breiter als der Bildschirm. Statt sie
   umzubrechen und unleserlich zu machen, rollen sie in ihrem eigenen
   Behaelter – die Seite selbst bleibt ohne Querlauf. */
.tabelle-rollt {
    overflow-x: auto;
    margin-bottom: 18px;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.admin-table thead th {
    font-size: 13px;
    color: var(--muted);
    border-bottom-width: 2px;
    white-space: nowrap;
}
.admin-table tbody tr:hover { background: #f9fafb; }

/* Gesperrte Konten und archivierte Dokumente bleiben lesbar, treten aber
   zurueck. Bewusst nicht nur ueber die Farbe: Die Marke daneben sagt es
   ausdruecklich, sonst geht die Information bei Farbsehschwaeche verloren. */
.admin-table .ist-gesperrt td { opacity: .6; }

.admin-table__aktionen {
    white-space: nowrap;
}
.admin-table__aktionen form {
    display: inline;
    margin: 0;
}
.admin-table__aktionen > * { margin: 0 4px 4px 0; }

/* Zweitangabe unter dem Haupteintrag – Benutzername, Dateiname, Erklaerung. */
.zeile-meta {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
    font-weight: normal;
}

/* Kurze Zustandsmarke. */
.marke {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    vertical-align: middle;
}
.marke--ok   { background: var(--ok-bg);    color: var(--ok); }
.marke--warn { background: var(--warn-bg);  color: var(--warn); }
.marke--info { background: #e8eef5;         color: var(--muted); }

/* --- Formulare der Verwaltung -------------------------------------------- */

.form-field fieldset,
fieldset.form-field {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 0 0 16px;
}
fieldset.form-field legend {
    padding: 0 6px;
    font-weight: bold;
    font-size: 14px;
}

/* Ankreuzfeld mit Beschriftung DANEBEN. Die ganze Zeile ist anklickbar –
   das Kaestchen allein ist auf dem Telefon ein zu kleines Ziel.

   "label.auswahl" statt ".auswahl": Steht das Feld in einem .form-field – auf
   der Anmeldeseite und in der Rollenliste der Benutzerverwaltung tut es das –,
   greift sonst ".form-field label" mit seinem display:block, und der Text
   rutscht UNTER das Kaestchen. Aus demselben Grund stehen Aussenabstand und
   Schriftschnitt hier ausdruecklich: Eine Beschriftung neben einem Kaestchen
   ist Fliesstext, keine Feldueberschrift, und gehoert nicht fett. Wo es eine
   Hervorhebung braucht, steht ein <strong> im Text. */
label.auswahl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    margin-bottom: 0;
    font-weight: normal;
    font-size: inherit;
    cursor: pointer;
}
.auswahl input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
}
.auswahl span { display: block; }
.auswahl strong { font-weight: bold; }

/* --- Zugangsdaten --------------------------------------------------------- */

/* Einmalig angezeigtes Startpasswort. Bewusst gross und gut abschreibbar. */
.zugangskarte {
    background: var(--surface);
    border: 2px solid var(--bg);
    border-radius: var(--radius);
    padding: 18px var(--gutter);
    margin-bottom: 18px;
}
.zugangskarte__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 10px;
}
.zugangskarte__zeile:last-child { margin-bottom: 0; }
.zugangskarte__bezeichnung {
    color: var(--muted);
    font-size: 13px;
    min-width: 120px;
}
.zugangskarte__wert {
    font-family: Consolas, "Courier New", monospace;
    font-weight: bold;
    word-break: break-all;
}
.zugangskarte__wert--gross { font-size: 22px; letter-spacing: .06em; }

/* --- Anleitung (Installation als App) ------------------------------------ */

/* Zwei Spalten ab 700 px, darunter untereinander. iOS und Android stehen
   damit nebeneinander – wer sein Gerät kennt, findet seinen Block sofort. */
.anleitung {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 8px;
}
@media (min-width: 700px) {
    .anleitung { grid-template-columns: 1fr 1fr; }
}

.anleitung__block {
    background: #f9fafb;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px var(--gutter);
}
.anleitung__block h2 {
    font-size: 16px;
    color: var(--text);
    margin: 0 0 .7em;
}

/* Nummerierte Schritte mit Luft dazwischen – die Liste wird am Telefon
   gelesen, waehrend man die Schritte ausfuehrt. */
.anleitung__schritte {
    margin: 0;
    padding-left: 22px;
}
.anleitung__schritte li { margin-bottom: .7em; }
.anleitung__schritte li:last-child { margin-bottom: 0; }

/* --- Gefahrenzone -------------------------------------------------------- */

/* Endgueltige Aktionen stehen abgesetzt am Seitenende, nicht neben den
   uebrigen Schaltflaechen. Wer hier klickt, hat den Weg dorthin gesucht. */
.gefahrenzone {
    margin-top: 36px;
    padding: 16px var(--gutter);
    border: 1px solid var(--error);
    border-radius: var(--radius);
    background: var(--error-bg);
}
.gefahrenzone h2 {
    font-size: 16px;
    color: var(--error);
    margin: 0 0 .6em;
}
.gefahrenzone p { font-size: 14px; }

.btn--gefahr { background: var(--error); color: #fff; }
.btn--gefahr:hover,
.btn--gefahr:focus { background: #8f1d1d; color: #fff; }

/* --- Druck --------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .mainnav,
    .offcanvas,
    .navtoggle,
    .skip-link { display: none !important; }
    /* Beide: Seit der Grund dunkelblau ist, traegt ".main" den hellen Ton.
       Ohne die zweite Zeile druckte der Bogen ein graues Feld mit. */
    body,
    .main { background: #fff; }
    .content { box-shadow: none; padding: 0; }

    /* Beim Ausdruck der Zugangsdaten sind Schaltflaechen sinnlos. */
    .knopfreihe,
    .gefahrenzone { display: none !important; }
    .zugangskarte { border-color: #000; }
}