@charset "utf-8";
/*
************************************************************
(c) copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz;
fs@csskoeln.de
************************************************************
ObjektControl - Grundstylesheet
$Id: style.css 3 08.09.2026 @javis$

Hell und freundlich, Schwarz auf Weiss. Farbe traegt ausschliesslich
Bedeutung: Schweregrad, Verzug, Status. Nie Dekoration.

Aufgebaut fuer Tablet zuerst (iPad und Android), danach Desktop.
Bedienflaechen sind mindestens 44 Pixel hoch, damit sie mit dem
Finger sicher zu treffen sind.
*/

/* ---------- Schriften ---------- */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Grundwerte ---------- */

:root {
    --weiss:        #ffffff;
    --flaeche:      #f6f6f6;
    --flaeche-2:    #ededed;
    --schrift:      #1a1a1a;
    --schrift-hell: #666666;
    --schrift-fein: #8c8c8c;
    --linie:        #dcdcdc;
    --linie-fein:   #ebebeb;
    --schwarz:      #000000;

    /* Signalfarben, nur fuer Zustaende */
    --gut:          #1f7a4d;
    --gut-flaeche:  #e8f4ee;
    --warn:         #96660a;
    --warn-flaeche: #fbf2df;
    --stop:         #b3352a;
    --stop-flaeche: #fbeae8;

    /* Ampel fuer den Schweregrad eines Mangels.
       Gedeckte Toene: ein Signalrot schreit auf jedem Bildschirm, und
       ein helles Gruen ist auf dem Tablet in der Sonne nicht zu lesen.
       Die Farbe steht nie allein — daneben steht immer das Wort. */
    --grad-1:       #2e7d4f;
    --grad-1-rand:  #b9d8c6;
    --grad-2:       #b07d13;
    --grad-2-rand:  #ecd9a8;
    --grad-3:       #bf4a3d;
    --grad-3-rand:  #eec4be;

    --radius:       6px;
    --radius-gross: 10px;
    --schatten:     0 1px 2px rgba(0,0,0,.06), 0 6px 18px -10px rgba(0,0,0,.22);

    --abstand:      16px;
    --touch:        44px;

    /* Eine Kante fuer alles: Logo, Hauptmenue, Untermenue, Inhalt.
       Liefen sie auseinander, wirkte der Kopf unruhig. */
    --rand:         16px;
    --touch-klein:  38px;   /* fuer dicht gesetzte Bedienelemente */

    /* Zeilenhoehen. Auf dem Tablet zaehlt jeder Millimeter: wer durch
       neunzig Bereiche scrollen muss, verliert die Uebersicht. */
    --zeile-y:      9px;
    --zeile-x:      12px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--flaeche);
    color: var(--schrift);
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--schwarz);
}
h1 { font-size: 24px; }
h2 { font-size: 19px; margin-top: 22px; margin-bottom: 8px; }
h3 { font-size: 16px; margin-top: 16px; margin-bottom: 6px; }

p { margin: 0 0 12px; }

a { color: var(--schwarz); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--schwarz);
    outline-offset: 2px;
}

/* ---------- Aufbau ---------- */

/* Flaeche ueber die volle Breite, Inhalt in der Mitte. Genauso sind
   die beiden Menueleisten aufgebaut, damit die Kanten durchlaufen. */
.kopf {
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 50;
}
.kopf-innen {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px var(--rand);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.marke-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;          /* damit lange Namen kuerzen statt schieben */
    margin-right: auto;
}

.logo {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    color: var(--schwarz);
    line-height: 1.15;
    white-space: nowrap;
}
.logo i { margin-right: 6px; }

/* Der Name steht unter dem Wort ObjektControl, nicht unter dem Symbol:
   sonst liest er sich wie ein zweites Logo. */
.benutzer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 27px;
    max-width: min(100%, 340px);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--schrift-hell);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    width: fit-content;
}
/* Lange Namen kuerzen statt den Kopf zu sprengen.
   "Maximilian von Baumgarten-Krueger" passt damit ebenso wie "Ali Ay". */
.benutzer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.benutzer i { font-size: 9px; opacity: .55; flex: none; }
.benutzer:hover { color: var(--schwarz); border-bottom-color: var(--linie); }

.kopf-rechts { align-self: center; display: flex; align-items: center; gap: 8px; }

.inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px var(--rand) 26px;
}

.fuss {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px var(--abstand) 40px;
    color: var(--schrift-fein);
    font-size: 13px;
    border-top: 1px solid var(--linie);
    margin-top: 32px;
}

/* ---------- Navigation ---------- */

/* Aufbau wie beim Kopf: die Flaeche geht ueber die volle Breite, der
   Inhalt sitzt in der Mitte auf derselben Kante wie Logo und Inhalt.
   Vorher war die Leiste selbst auf 1200 Pixel begrenzt und brach auf
   breiten Bildschirmen mitten im Bild ab. */
.nav {
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
}
.nav-innen {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--rand);
}
.nav-innen > a:first-child { padding-left: 0; }
.nav-innen a {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: var(--touch);
    padding: 0 14px;
    text-decoration: none;
    color: var(--schrift-hell);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    font-size: 15px;
}
.nav-innen a:hover { color: var(--schwarz); }
.nav-innen a.aktiv {
    color: var(--schwarz);
    font-weight: 700;
    border-bottom-color: var(--schwarz);
}

/* ---------- Seitenkopf ---------- */
/*
   Wie der Kartenkopf, nur mit einer zweiten Zeile darunter: welche
   Woche, fuer wen. Die Klasse stand bisher ohne jede Gestaltung in der
   Planung, deshalb hing die Ueberschrift dort lose auf dem grauen
   Grund und das Blaettern fiel niemandem auf.
*/

.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 12px var(--rand);
    margin-bottom: 10px;
}
.seitenkopf h1, .seitenkopf h2, .seitenkopf h3 { margin: 0; }

/* Das Werkzeug rechts, die Angaben darunter, die Hilfe ganz unten */
.seitenkopf > .werkzeug { margin-left: auto; }
.seitenkopf > .meta {
    flex: 0 0 100%;
    order: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    color: var(--schrift-hell);
    font-size: 13.5px;
}
.seitenkopf > .hilfe {
    flex: 0 0 100%;
    order: 99;
    width: 100%;
    margin-top: 4px;
}

/* ---------- Leisten und Hinweise, die frei auf der Seite stehen ---------- */
/*
   Such- und Filterleisten und einzelne Hinweiszeilen standen ohne
   Flaeche auf dem grauen Grund. Innerhalb eines Kopfes oder einer Karte
   bleiben sie flach, dort tragen sie ja schon weiss unter sich.
*/

.inhalt > .werkzeug,
.inhalt > form > .werkzeug,
.inhalt > .hinweis,
.inhalt > .schalterreihe {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 10px var(--rand);
    margin-bottom: 10px;
}
.inhalt > .hinweis { color: var(--schrift-hell); }

/* ---------- Abschnittskopf ---------- */
/*
   Ueberschrift und der erklaerende Satz standen nackt auf dem grauen
   Grund. Auf dem Tablet, im Hellen, war das schlecht zu lesen. Beides
   sitzt jetzt auf weiss, wie alles andere auf der Seite auch.

   Folgt direkt eine Liste, Karte oder Tabelle, waechst der Kopf mit ihr
   zusammen: eine durchgehende Flaeche statt zwei Kaestchen uebereinander.
*/

.karte-kopf,
.inhalt > :is(h1, h2, h3),
.inhalt > form > :is(h2, h3),
.inhalt > :is(h1, h2, h3, .karte-kopf) + p.fein,
.inhalt > form > :is(h2, h3) + p.fein {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 12px var(--rand);
    margin-bottom: 10px;
}

/* Ueberschrift und Satz sind ein Block, keine zwei */
.karte-kopf:has(+ p.fein),
.inhalt > :is(h1, h2, h3):has(+ p.fein),
.inhalt > form > :is(h2, h3):has(+ p.fein) {
    border-bottom: 0;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    padding-bottom: 2px;
    margin-bottom: 0;
}
.inhalt > :is(h1, h2, h3, .karte-kopf) + p.fein,
.inhalt > form > :is(h2, h3) + p.fein {
    border-top: 0;
    border-radius: 0 0 var(--radius-gross) var(--radius-gross);
    padding-top: 0;
}

/* Kopf und der Block darunter: eine Flaeche */
.inhalt > :is(h1, h2, h3, .karte-kopf, .seitenkopf, .werkzeug, .hinweis, .schalterreihe):has(+ :is(.liste, .karte, .tabelle-rahmen, .tagesleiste, .hilfe, .werkzeug)),
.inhalt > :is(h1, h2, h3, .karte-kopf) + p.fein:has(+ :is(.liste, .karte, .tabelle-rahmen, .tagesleiste, .hilfe)) {
    border-bottom: 0;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    margin-bottom: 0;
}
.inhalt > :is(h1, h2, h3, .karte-kopf, .seitenkopf, .werkzeug, .hinweis, .schalterreihe) + :is(.liste, .karte, .tabelle-rahmen, .tagesleiste, .hilfe, .werkzeug),
.inhalt > :is(h1, h2, h3, .karte-kopf) + p.fein + :is(.liste, .karte, .tabelle-rahmen, .tagesleiste, .hilfe) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Steckt der Kopf schon in einer weissen Flaeche, bleibt er flach.
   Sonst saesse ein Kasten im Kasten. */
.karte .karte-kopf,
.bereich .karte-kopf,
.liste .karte-kopf,
.hilfe .karte-kopf,
.karte-kopf .karte-kopf {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* ---------- Karten und Listen ---------- */

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.karte-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-kopf .rechts { margin-left: auto; }

/* Listen sind zusammenhaengende Bloecke, keine einzeln schwebenden
   Kaertchen: ein Rahmen aussen, duenne Linien innen, Zebrastreifen. Das
   spart auf dem Tablet gut ein Drittel der Hoehe. */
.liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    overflow: hidden;
    background: var(--weiss);
    margin-bottom: 12px;
}

.zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--weiss);
    border: none;
    border-bottom: 1px solid var(--linie-fein);
    border-radius: 0;
    padding: var(--zeile-y) var(--zeile-x);
    min-height: var(--touch);
    text-decoration: none;
    color: inherit;
}
.liste > .zeile:nth-child(even),
.liste > label.zeile:nth-child(even) { background: var(--flaeche); }
.liste > *:last-child { border-bottom: none; }

.zeile:hover { background: var(--surface-hover, #eef1f3); }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .titel { font-weight: 700; line-height: 1.35; }
.zeile .unter {
    color: var(--schrift-hell);
    font-size: 13.5px;
    line-height: 1.35;
    display: block;
}
.zeile .rechts {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Einzeln stehende Zeilen behalten ihren Rahmen */
.zeile.frei {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

/* Zebrastreifen fuer bgcolor() */
.bg-a { background: var(--weiss); }
.bg-b { background: var(--flaeche); }

/* ---------- Kennzeichnungen ---------- */

.marke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--flaeche-2);
    color: var(--schrift-hell);
    white-space: nowrap;
}
.marke.gut  { background: var(--gut-flaeche);  color: var(--gut); }
.marke.warn { background: var(--warn-flaeche); color: var(--warn); }
.marke.stop { background: var(--stop-flaeche); color: var(--stop); }

/* Verzug: je laenger ueberfaellig, desto deutlicher */
.verzug        { font-variant-numeric: tabular-nums; font-weight: 700; }
.verzug.frisch { color: var(--schrift-hell); font-weight: 400; }
.verzug.spaet  { color: var(--warn); }
.verzug.sehr   { color: var(--stop); }

/* Schweregrad 1 bis 3 */
.grad { display: inline-flex; gap: 2px; vertical-align: middle; }
.grad span {
    width: 7px; height: 14px;
    border-radius: 2px;
    background: var(--linie);
}
.grad[data-grad="1"] span:nth-child(1),
.grad[data-grad="2"] span:nth-child(-n+2),
.grad[data-grad="3"] span { background: currentColor; }
.grad-1 { color: var(--grad-1); }
.grad-2 { color: var(--grad-2); }
.grad-3 { color: var(--grad-3); }

/* Farbpunkt der Auftragsart, Farbe kommt aus ocontrol_job_types */
.art-punkt {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    flex: none;
}

/* ---------- Meldungen, passend zu getTextbox() ---------- */

.status-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius);
    padding: 13px 15px;
    margin: 0 0 14px;
    border: 1px solid var(--linie);
    background: var(--weiss);
}
.status-box i { font-size: 18px; line-height: 1.4; flex: none; }
.status-box p:last-child, .status-box span { margin-bottom: 0; }

.status-box.success { background: var(--gut-flaeche);  border-color: #c4e2d3; }
.status-box.success i { color: var(--gut); }
.status-box.notice  { background: var(--warn-flaeche); border-color: #ecd9a8; }
.status-box.notice i { color: var(--warn); }
.status-box.error   { background: var(--stop-flaeche); border-color: #eec4be; }
.status-box.error i { color: var(--stop); }

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

.feld { margin-bottom: 10px; }
.feld label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 3px;
}
.feld .hinweis { font-size: 12.5px; color: var(--schrift-hell); margin-top: 3px; }

/* Mehrere Felder in einer Zeile. Auf dem Tablet passen drei bis vier
   nebeneinander, untereinander waere es eine Scrollstrecke. */
/* Labels stehen auf einer Linie. Mit flex-end rutschten Felder mit
   Erklärung nach oben, sobald das Nachbarfeld keine hatte — das war die
   Unruhe im Formular. */
.reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-start;
}
.reihe > .feld { margin-bottom: 0; flex: 1 1 160px; min-width: 0; }
.reihe > .feld.schmal { flex: 0 0 110px; }
.reihe > .feld.mittel { flex: 0 0 170px; }
.reihe > .feld.breit  { flex: 3 1 260px; }

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="email"],
select, textarea {
    width: 100%;
    min-height: var(--touch);
    padding: 8px 11px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--schrift);
    font-family: inherit;
    font-size: 16px; /* unter 16px zoomt iOS beim Tippen hinein */
}
textarea { min-height: 82px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
    border-color: var(--schwarz);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.feld.fehler input, .feld.fehler select, .feld.fehler textarea {
    border-color: var(--stop);
    background: var(--stop-flaeche);
}
.feld .fehlertext { color: var(--stop); font-size: 13px; margin-top: 4px; font-weight: 700; }

.zaehler { float: right; font-weight: 400; color: var(--schrift-fein); font-size: 13px; }

/* ---------- Schaltflaechen ---------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch);
    padding: 0 18px;
    border: 1px solid var(--schwarz);
    border-radius: var(--radius);
    background: var(--schwarz);
    color: var(--weiss);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
}
/* Beim Ueberfahren hellt der schwarze Knopf sichtbar auf. Vorher
   lag der Unterschied bei drei Prozent und fiel niemandem auf. */
.knopf:hover { background: #3d3d3d; border-color: #3d3d3d; }
.knopf:active { transform: translateY(1px); }

.knopf.zweit {
    background: var(--weiss);
    color: var(--schwarz);
}
.knopf.zweit:hover { background: var(--flaeche); }

/* Der stille Knopf stand auf durchsichtigem Grund und ging damit auf
   der grauen Seite unter. Jetzt steht er auf weiss wie alle anderen. */
.knopf.still {
    background: var(--weiss);
    border-color: var(--linie);
    color: var(--schrift-hell);
    font-weight: 400;
}
.knopf.still:hover {
    background: var(--flaeche);
    color: var(--schwarz);
    border-color: var(--schrift-fein);
}

/* ---------- Blaetterleiste ---------- */
/*
   Eine eigene weisse Box, wie alles andere auf der Seite. Vorher hing
   sie an der Liste und ging darin unter.

   Alles in einer Zeile: links was man sieht, in der Mitte die Seiten,
   rechts wie viele Datensaetze eine Seite traegt.
*/

.blaettern {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 9px var(--rand);
    margin: 12px 0;
    font-size: 13.5px;
}

.blatt-zahl {
    color: var(--schrift-hell);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.blatt-seiten {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.blatt-seiten .knopf {
    min-height: 34px;
    min-width: 34px;
    padding: 0 9px;
    font-size: 13.5px;
    font-weight: 400;
    flex: none;
}
.blatt-hier {
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}
.blatt-luecke {
    color: var(--schrift-fein);
    padding: 0 2px;
    user-select: none;
    flex: none;
}

.blatt-groesse {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex: none;
}
.blatt-groesse label { white-space: nowrap; }
.blatt-groesse select {
    min-height: 34px;
    width: auto;
    padding: 0 30px 0 10px;
    font-size: 13.5px;
}

/* Auf dem Tablet hochkant reicht die Breite nicht fuer drei Bloecke
   nebeneinander: die Seitenzahlen ruecken dann in eine eigene Zeile.
   Die Box bleibt, nur der Umbruch kommt dazu. */
@media (max-width: 700px) {
    .blaettern { flex-wrap: wrap; }
    .blatt-seiten {
        order: 3;
        flex: 0 0 100%;
        margin: 0;
        justify-content: center;
    }
}


/* Mehrfachauswahl, etwa die Bereiche im Faelligkeitsfilter.
   Als Liste statt als Klappfeld: auf dem Tablet gibt es keine
   Steuerungstaste, dort waehlt jede Beruehrung einen Eintrag um. */
.mehrfach {
    height: auto;
    min-height: auto;
    padding: 4px;
    overflow-y: auto;
}
.mehrfach option {
    padding: 7px 9px;
    border-radius: 4px;
    line-height: 1.35;
}
.mehrfach option:checked {
    background: var(--schwarz) linear-gradient(0deg, var(--schwarz) 0%, var(--schwarz) 100%);
    color: var(--weiss);
    font-weight: 600;
}

.knopf[disabled], .knopf.aus {
    opacity: .45;
    pointer-events: none;
}
/* Die Hauptaktion steht rechts, davor das Abbrechen. Im Quelltext
   kommt sie zuerst, damit sie auch beim Springen mit der Tastatur die
   erste ist. row-reverse dreht nur die Anzeige. */
.knopf-reihe {
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 14px;
}
.knopf-reihe.links {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.knopf-reihe.mitte { justify-content: center; }

/* ---------- Auswahl der Taetigkeitsart ---------- */

.arten { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.arten label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--touch);
    padding: 0 15px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
    cursor: pointer;
    font-size: 15px;
    user-select: none;
}
.arten input { position: absolute; opacity: 0; pointer-events: none; }
.arten input:checked + label,
.arten label.gewaehlt {
    border-color: var(--schwarz);
    background: var(--schwarz);
    color: var(--weiss);
    font-weight: 700;
}
.arten label:hover { background: var(--flaeche); }
.arten input:checked + label:hover,
.arten label.gewaehlt:hover { background: #3d3d3d; border-color: #3d3d3d; }
.arten label:focus-within { outline: 2px solid var(--schwarz); outline-offset: 2px; }

/* ---------- Bereichspruefung ---------- */

.bereich {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 6px;
}
.bereich:nth-of-type(even) { background: var(--flaeche); }
.bereich.erledigt { border-left: 4px solid var(--gut); }
.bereich.mangel   { border-left: 4px solid var(--stop); }
.bereich.ausnahme { border-left: 4px solid var(--warn); }

.bereich-name { font-weight: 700; font-size: 16px; margin-bottom: 8px; }

.alt-mangel {
    background: var(--warn-flaeche);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 14px;
    margin-bottom: 12px;
}
.alt-mangel strong { display: block; }

.wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wahl button {
    min-height: 46px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--schrift-hell);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.wahl button i { font-size: 18px; }
.wahl button.an[data-wahl="ok"]      { background: var(--gut-flaeche);  border-color: var(--gut);  color: var(--gut); }
.wahl button.an[data-wahl="defect"]  { background: var(--stop-flaeche); border-color: var(--stop); color: var(--stop); }
.wahl button.an[data-wahl="skipped"] { background: var(--warn-flaeche); border-color: var(--warn); color: var(--warn); }

.nachfrage { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie-fein); }
.nachfrage[hidden] { display: none; }

/* ---------- Fotos ---------- */

.fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foto {
    position: relative;
    width: 84px; height: 84px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--linie);
    background: var(--flaeche-2);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto button {
    position: absolute;
    top: 3px; right: 3px;
    width: 26px; height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: var(--weiss);
    cursor: pointer;
    line-height: 1;
}
.foto-neu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    border: 2px dashed var(--linie);
    border-radius: var(--radius);
    color: var(--schrift-fein);
    font-size: 22px;
    cursor: pointer;
}
.foto-neu:hover { border-color: var(--schwarz); color: var(--schwarz); }

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

.tabelle-rahmen {
    overflow-x: auto;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--schrift-hell);
    padding: 8px 12px;
    border-bottom: 1px solid var(--linie);
    background: var(--flaeche-2);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
td { padding: 8px 12px; border-bottom: 1px solid var(--linie-fein); }
tbody tr:nth-child(even) { background: var(--flaeche); }
tbody tr:hover { background: #eef1f3; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Kleinkram ---------- */

.leer {
    text-align: center;
    padding: 44px 20px;
    color: var(--schrift-hell);
}
.leer i { font-size: 34px; color: var(--linie); display: block; margin-bottom: 12px; }

.fein { color: var(--schrift-hell); font-size: 14px; }
.rechtsbuendig { text-align: right; }
.nowrap { white-space: nowrap; }
.versteckt { display: none !important; }

/* ---------- Desktop ---------- */

/* Ab Tabletbreite darf es dichter werden. Das iPad Pro 10,5 liefert
   hochkant 834 und quer 1112 Punkte, beides landet hier. */
@media (min-width: 760px) {
    body { font-size: 15px; }
    :root { --zeile-y: 7px; }

    .inhalt { padding: 18px var(--abstand); }
    h1 { font-size: 27px; }
    h2 { font-size: 20px; }

    .zeile .unter { font-size: 13px; }
    .wahl { grid-template-columns: repeat(3, minmax(0, 190px)); }

    /* Auf dem Tablet ist genug Platz fuer groessere Tage im Kalender */
    table.kal td button { width: 46px; height: 46px; font-size: 16px; }
    .kalender { min-width: 380px; }
}

@media (min-width: 1100px) {
    .inhalt { padding: 22px var(--abstand); }
}

/* ---------- Druck ---------- */

@media print {
    .kopf, .nav, .knopf-reihe, .fuss { display: none; }
    body { background: #fff; font-size: 11pt; }
    .karte, .bereich { border: 1px solid #999; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Hilfe ---------- */

.hilfe-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 50%;
    background: var(--weiss);
    color: var(--schrift-hell);
    font-size: 15px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 8px;
    flex: none;
}
.hilfe-knopf:hover { color: var(--schwarz); border-color: var(--schrift-fein); }
.hilfe-knopf[aria-expanded="true"] {
    background: var(--schwarz);
    border-color: var(--schwarz);
    color: var(--weiss);
}

.hilfe {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--schwarz);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 0 0 16px;
    font-size: 15px;
}
.hilfe p:last-child { margin-bottom: 0; }
.hilfe ul, .hilfe ol { margin: 0 0 12px; padding-left: 22px; }
.hilfe li { margin-bottom: 5px; }
.hilfe h3, .hilfe h4 { margin: 14px 0 6px; font-size: 15px; }
.hilfe code {
    background: var(--flaeche-2);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 13px;
}
.hilfe-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--linie-fein);
    font-size: 13px;
}
.hilfe-fuss a { color: var(--schrift-hell); }
.hilfe-fuss a:hover { color: var(--schwarz); }

/* ---------- Fussbereich ---------- */

.fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 20px;
}
.fuss-info { color: var(--schrift-fein); }
.fuss-copy { margin-left: auto; color: var(--schrift-fein); }

@media (max-width: 620px) {
    .fuss-copy { margin-left: 0; }
}

/* ---------- Pflichtfelder ---------- */

.pflicht {
    color: var(--stop);
    font-weight: 700;
    margin-left: 2px;
}
.feld label .fein { font-weight: 400; }

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

.status-box {
    width: 100%;
    position: relative;
    padding-right: 46px;
}
.status-box.geht {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease, transform .35s ease;
}
.box-zu {
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    opacity: .65;
    cursor: pointer;
    font-size: 15px;
}
.box-zu:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* ---------- Datumsfeld mit Kalender ---------- */

.datum-feld { position: relative; display: block; }
.datum-feld input.datum { padding-right: 92px; }
.datum-feld input.datum.datum-falsch {
    border-color: var(--stop);
    background: var(--stop-flaeche);
}

.datum-knopf {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--schrift-hell);
    cursor: pointer;
    font-size: 15px;
}
.datum-knopf:hover { color: var(--schwarz); border-color: var(--schrift-fein); }

.datum-kw {
    position: absolute;
    top: 50%; right: 48px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--schrift-fein);
    pointer-events: none;
    white-space: nowrap;
}

.kalender {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    left: 0;
    min-width: 344px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    padding: 12px;
}
.kalender[hidden] { display: none; }

.kal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.kal-kopf strong { font-family: 'Roboto Slab', Georgia, serif; font-size: 15px; }
.kal-kopf button {
    width: 42px; height: 42px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    cursor: pointer;
    color: var(--schrift-hell);
}
.kal-kopf button:hover { color: var(--schwarz); border-color: var(--schrift-fein); }

table.kal { width: 100%; border-collapse: collapse; }
table.kal th {
    padding: 6px 0;
    font-size: 12px;
    background: none;
    border: none;
    text-align: center;
    color: var(--schrift-fein);
    text-transform: none;
    letter-spacing: 0;
}
table.kal td { padding: 1px; border: none; text-align: center; }

table.kal th.kal-kw, table.kal td.kal-kw {
    color: var(--schrift-fein);
    font-size: 12px;
    font-weight: 700;
    border-right: 1px solid var(--linie-fein);
    padding-right: 8px;
    width: 38px;
    background: var(--flaeche);
}

table.kal td button {
    width: 42px; height: 42px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    color: var(--schrift);
}
table.kal td button:hover { background: var(--flaeche); }
table.kal td button.fremd { color: var(--schrift-fein); opacity: .5; }
table.kal td button.heute { border-color: var(--linie); font-weight: 700; }
table.kal td button.an {
    background: var(--schwarz);
    border-color: var(--schwarz);
    color: var(--weiss);
    font-weight: 700;
}
table.kal td button.an:hover { background: #3d3d3d; border-color: #3d3d3d; }

.kal-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--linie-fein);
}
.kal-fuss button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
    font-family: inherit;
    font-size: 12px;
    color: var(--schrift-hell);
    cursor: pointer;
}
.kal-fuss button:hover { color: var(--schwarz); border-color: var(--schrift-fein); }

@media (max-width: 420px) {
    .kalender { left: auto; right: 0; min-width: 280px; }
}

/* ---------- Rueckmeldung am einzelnen Bereich ---------- */

.gespeichert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--gut);
    vertical-align: middle;
}
.gespeichert.geht {
    opacity: 0;
    transition: opacity .35s ease;
}
.alt-mangel.erledigt {
    background: var(--gut-flaeche);
    text-decoration: line-through;
    opacity: .7;
}
/*
   Schweregrad als Ampel. Schon vor der Wahl farbig, damit man zielen
   kann; gewaehlt dann gefuellt, damit auf einen Blick klar ist, was
   dasteht. Der Punkt links traegt dieselbe Aussage noch einmal, fuer
   alle, die Rot und Gruen nicht unterscheiden.
*/
.wahl button.grad-wahl {
    flex-direction: row;
    gap: 7px;
}
.wahl button.grad-wahl::before {
    content: "";
    width: 11px; height: 11px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.wahl button.grad-wahl[data-grad="1"] { color: var(--grad-1); border-color: var(--grad-1-rand); }
.wahl button.grad-wahl[data-grad="2"] { color: var(--grad-2); border-color: var(--grad-2-rand); }
.wahl button.grad-wahl[data-grad="3"] { color: var(--grad-3); border-color: var(--grad-3-rand); }

.wahl button.grad-wahl:hover { background: var(--flaeche); }

.wahl button.grad-wahl.an {
    color: var(--weiss);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.wahl button.grad-wahl.an::before { background: var(--weiss); }

.wahl button.grad-wahl.an[data-grad="1"] { background: var(--grad-1); border-color: var(--grad-1); }
.wahl button.grad-wahl.an[data-grad="2"] { background: var(--grad-2); border-color: var(--grad-2); }
.wahl button.grad-wahl.an[data-grad="3"] { background: var(--grad-3); border-color: var(--grad-3); }

/* ---------- Zahlentafeln und Balken ---------- */

.zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.zahl-tafel {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zahl-tafel .wert {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.zahl-tafel .was { font-size: 13px; color: var(--schrift-hell); }
.zahl-tafel.warn { border-left: 4px solid var(--warn); }
.zahl-tafel.warn .wert { color: var(--warn); }
.zahl-tafel.stop { border-left: 4px solid var(--stop); }
.zahl-tafel.stop .wert { color: var(--stop); }

.balken {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--flaeche-2);
    overflow: hidden;
}
.balken span {
    display: block;
    height: 100%;
    background: var(--schwarz);
    border-radius: 999px;
    min-width: 2px;
}

/* ---------- Hilfe: immer unter der Überschrift, nie daneben ---------- */

.karte-kopf { flex-wrap: wrap; }

/* Der Hilfeblock ist Teil des Flex-Containers, soll aber die volle
   Breite einnehmen und unter allem anderen stehen. */
.karte-kopf > .hilfe,
.arten + .hilfe,
h1 + .hilfe, h2 + .hilfe, h3 + .hilfe {
    flex: 0 0 100%;
    order: 99;
    width: 100%;
    margin-top: 4px;
}

/* Die Hilfe sitzt buendig in ihrem Kopf: keine Luft links und rechts,
   kein Kaestchen im Kaestchen. Der Rahmen bleibt, samt schwarzem Balken
   an der Seite, denn daran erkennt man die Hilfe. */
.inhalt > .karte-kopf,
.inhalt > .seitenkopf { overflow: hidden; }

.inhalt > .karte-kopf > .hilfe,
.inhalt > .seitenkopf > .hilfe {
    /* Die Breite muss die Polsterung des Kopfes mitnehmen, sonst
       haengt der Block links ueber und rechts fehlt er. */
    flex: 0 0 calc(100% + var(--rand) * 2);
    width: calc(100% + var(--rand) * 2);
    margin: 10px calc(var(--rand) * -1) -12px;
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
}

.hilfe { position: relative; padding-right: 46px; }

.hilfe-zu {
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--schrift-hell);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.hilfe-zu:hover { color: var(--schwarz); border-color: var(--schrift-fein); }

/* ---------- Auswahl bei mehrdeutiger Postleitzahl ---------- */

.plz-auswahl {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.plz-auswahl[hidden] { display: none; }

.plz-kopf {
    flex: 0 0 100%;
    font-size: 13px;
    color: var(--schrift-hell);
    margin-bottom: 2px;
}
.plz-auswahl button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
    font-family: inherit;
    font-size: 14px;
    color: var(--schrift);
    cursor: pointer;
}
.plz-auswahl button:hover {
    border-color: var(--schwarz);
    background: var(--schwarz);
    color: var(--weiss);
}

/* ---------- Suchen und Sortieren ---------- */

.werkzeug {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.werkzeug .feld { margin: 0; flex: 1 1 220px; }
.werkzeug .treffer {
    font-size: 13px;
    color: var(--schrift-fein);
    white-space: nowrap;
}

/* Zebrastreifen nach dem Filtern, siehe zebra() in app.js */
.liste > .gerade, tbody tr.gerade { background: var(--flaeche) !important; }
.liste > *:not(.gerade), tbody tr:not(.gerade) { background: var(--weiss); }

th.sortierbar { cursor: pointer; user-select: none; padding-right: 22px; position: relative; }
th.sortierbar:hover { color: var(--schwarz); }
th.sortierbar::after {
    content: "\f0dc";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 8px;
    opacity: .28;
    font-size: 10px;
}
th.sortierbar.auf::after { content: "\f0de"; opacity: .9; }
th.sortierbar.ab::after  { content: "\f0dd"; opacity: .9; }

/* ---------- Zwei Spalten auf dem Tablet ---------- */

.zwei-spalten { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 860px) {
    .zwei-spalten { grid-template-columns: 1fr 1fr; align-items: start; }
}

.zwei-spalten .liste { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Untermenü innerhalb einer Seite */
/* Untermenue: eigene Leiste, abgesetzt durch die Flaeche, damit die
   Ebenen auseinanderzuhalten sind. */
.nav.unter {
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--linie);
    border-radius: 0;
    border-top: none;
}
.nav.unter .nav-innen > a {
    min-height: 38px;
    font-size: 13.5px;
    padding: 0 13px;
    border-bottom-width: 2px;
}
.nav.unter .nav-innen > a:first-child { padding-left: 13px; }
.nav.unter .nav-innen > a.aktiv { background: var(--weiss); }

/* ---------- Bereichspflege ---------- */

/* In der Zeile sind das Symbolknoepfe, keine eigenstaendigen
   Schaltflaechen: sie bleiben durchsichtig und stoeren den
   Zebrastreifen nicht. */
.bereich-zeile .rechts .knopf.still {
    min-height: 34px;
    padding: 0 9px;
    background: transparent;
    border-color: transparent;
}
.bereich-zeile .rechts .knopf.still:hover { border-color: var(--linie); }
.bereich-zeile { user-select: none; -webkit-user-select: none; }

button.zeile {
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
button.zeile:disabled, .katalog-zeile.drin {
    opacity: .45;
    cursor: default;
    background: var(--flaeche-2) !important;
}

/* Rückmeldung an einer Zeile */
.zeilenfehler {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--stop);
}
.zeilenfehler i { margin-right: 5px; }

/* ---------- Dialoge ---------- */

.dialog-hinter {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20, 24, 28, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dialog {
    background: var(--weiss);
    border-radius: var(--radius-gross);
    box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
}
.dialog-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linie);
    position: relative;
}
.dialog-kopf strong {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 16px;
    flex: 1;
    padding-right: 30px;
}
.dialog-inhalt { padding: 16px; }
.dialog-inhalt p:first-child { margin-top: 0; }

.dialog-wahl { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dialog-wahl .knopf { width: 100%; justify-content: flex-start; }

.knopf.warnung {
    background: var(--stop);
    border-color: var(--stop);
    color: var(--weiss);
}
.knopf.warnung:hover { background: #9a2d23; }

/* Der Fuss trägt jetzt Release, Berechtigung und Rolle */
.fuss-info { line-height: 1.7; }
.fuss-info code {
    background: var(--flaeche-2);
    font-size: 11.5px;
    padding: 1px 5px;
}


/* ---------- Hauptnavigation auf dem Rechner mittig ---------- */

/* Auf schmalen Geräten bleibt sie links und scrollt, sonst wäre bei
   fünf Punkten nichts mehr zu treffen. Ab Tabletbreite steht sie
   mittig, das sieht auf dem großen Bildschirm ruhiger aus. */
/* Nicht mehr zentriert: die Kante muss zum Untermenue passen. */

/* ---------- Postleitzahlen-Auswahl ---------- */

/* Das PLZ-Feld ist schmal, die Trefferliste darf es nicht sein. Sie
   bricht deshalb aus dem Feld aus und legt sich über den Rest der
   Zeile, statt sich auf 110 Pixel zu quetschen. */
.feld:has(input.plz) { position: relative; }

.plz-auswahl {
    position: absolute;
    z-index: 90;
    top: 100%;
    left: 0;
    min-width: 340px;
    max-width: min(560px, 88vw);
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--schatten);
    margin-top: 4px;
    flex-direction: column;
    gap: 4px;
}
.plz-auswahl button {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
}

/* Ohne :has bleibt die Liste unter dem Feld stehen, statt zu überlagern.
   Sie ist dann breiter als das Feld, aber nicht abgeschnitten. */
@supports not selector(:has(*)) {
    .plz-auswahl { position: static; min-width: 0; margin-top: 8px; }
}

@media (max-width: 520px) {
    .plz-auswahl { min-width: 0; width: 78vw; }
}


/* ---------- Erklärungen unter den Feldern ---------- */

/* In einer Reihe stören sie das Bild, sobald ein Feld eine hat und das
   Nachbarfeld nicht. Sie bekommen deshalb eine feste Mindesthöhe, damit
   die Felder darunter trotzdem auf einer Linie bleiben, und sind
   zurückhaltender gesetzt. */
.reihe > .feld > .hinweis {
    min-height: 2.6em;
    font-size: 12px;
    line-height: 1.3;
    color: var(--schrift-fein);
}
.reihe > .feld > .fehlertext { min-height: 0; }

/* Außerhalb einer Reihe darf die Erklärung so hoch sein, wie sie will */
.feld > .hinweis { min-height: 0; }

/* Untertabs innerhalb der Systemeinstellungen */
.nav.unter.klein a { min-height: 38px; font-size: 13.5px; padding: 0 12px; }


/* ---------- Kein Ergebnis zur Suche ---------- */

/* Eine leer gefilterte Liste sieht aus wie ein Fehler. Die Meldung sagt
   deshalb, was los ist, wiederholt den Suchbegriff und bietet den Weg
   zurueck. */
.nichts {
    padding: 32px 20px;
    text-align: center;
    color: var(--schrift-hell);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    margin-bottom: 12px;
}
.nichts > i {
    font-size: 28px;
    color: var(--linie);
    display: block;
    margin-bottom: 10px;
}
.nichts b {
    display: block;
    color: var(--schrift);
    font-size: 15.5px;
    margin-bottom: 4px;
}
.nichts p { margin: 0 0 12px; font-size: 14px; }
.nichts .wort {
    background: var(--flaeche-2);
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 700;
    color: var(--schrift);
}

/* Auf schmalen Geraeten nur das Symbol beim Abmelden */
.nur-breit { display: inline; }
@media (max-width: 560px) {
    .nur-breit { display: none; }
    .benutzer { max-width: 190px; }
}

/* ---------- Dritte Ebene: Schalterreihe im Inhalt ---------- */

/* Drei Menüleisten übereinander wären zu viel. Wo eine dritte Ebene
   nötig ist, steht sie als Schalterreihe im Inhalt: sie gehört sichtbar
   zum Bereich, nicht zur Anwendung. */
.schalterreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.schalterreihe a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
    text-decoration: none;
    color: var(--schrift-hell);
    font-size: 13.5px;
}
.schalterreihe a:hover { border-color: var(--schrift-fein); color: var(--schwarz); }
.schalterreihe a.aktiv {
    background: var(--schwarz);
    border-color: var(--schwarz);
    color: var(--weiss);
    font-weight: 600;
}

/* ---------- Blätterleiste für Tag und Woche ---------- */

/* Vorher war das Blättern ein Pfeilchen am Rand, das man übersieht.
   Jetzt eine eigene Leiste: links zurück, in der Mitte groß wo man ist,
   rechts vor. */
.tagesleiste {
    display: flex;
    align-items: stretch;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    overflow: hidden;
    margin-bottom: 14px;
}
.tagesleiste .blatt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    min-height: 50px;
    color: var(--schrift-hell);
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
}
.tagesleiste .blatt:hover { background: var(--flaeche); color: var(--schwarz); }
.tagesleiste .mitte {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 6px 10px;
    border-left: 1px solid var(--linie-fein);
    border-right: 1px solid var(--linie-fein);
    text-align: center;
}
.tagesleiste .mitte b {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 15px;
}
.tagesleiste .mitte span { font-size: 12px; color: var(--schrift-fein); }

@media (max-width: 560px) {
    .tagesleiste .blatt span { display: none; }
    .tagesleiste .blatt { padding: 0 13px; }
}

/* ---------- Wochenansicht ---------- */

.woche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.tag {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}
.tag.heute { border-color: var(--schwarz); border-width: 2px; padding: 9px; }
/* Freie und vergangene Tage waren grau hinterlegt und damit die
   einzigen Kaesten ohne Flaeche. Sie bleiben weiss; die gestrichelte
   Kante und die blassere Schrift sagen dasselbe. */
.tag.frei { border-style: dashed; }
.tag.vorbei { opacity: .7; }

/* Feiertage im Wochenraster.
   Nicht rot: ein Feiertag ist keine Warnung. Eine gestrichelte Kante
   und der Name reichen, damit niemand versehentlich dort plant. */
.tag.feiertag {
    border-style: dashed;
    border-color: var(--schrift-fein);
}
.feiertag-marke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding: 2px 7px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--schrift-hell);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.feiertag-marke i { font-size: 10px; }

/* Im Seitenkopf steht sie neben der Ueberschrift und darf nicht
   die Schriftgroesse der Ueberschrift erben */
h1 > .feiertag-marke, h2 > .feiertag-marke {
    vertical-align: middle;
    margin: 0 0 0 4px;
}

.tag-kopf { margin-bottom: 8px; }
.tag-kopf b {
    display: block;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 14px;
}
.tag-kopf span { font-size: 11.5px; color: var(--schrift-fein); }

.tag-liste { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.mini {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    padding: 5px 8px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 5px;
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
}
.tag.heute .mini, .tag.vorbei .mini { background: var(--weiss); }
.mini:hover { background: var(--flaeche); border-color: var(--schrift-fein); }
.mini i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini em { margin-left: auto; color: var(--gut); font-size: 11px; }
.mini.fertig span { text-decoration: line-through; opacity: .65; }

.tag-plus {
    margin-top: 8px;
    border: 1px dashed var(--linie);
    background: none;
    border-radius: 5px;
    padding: 7px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--schrift-fein);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.tag-plus:hover { border-color: var(--schwarz); color: var(--schwarz); }

/* ---------- Trefferliste der Objektsuche ---------- */

.objekt-treffer {
    margin-top: 6px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.objekt-treffer[hidden] { display: none; }

.treffer-zeile {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--linie-fein);
    background: var(--weiss);
    font-family: inherit;
    cursor: pointer;
}
.treffer-zeile:last-child { border-bottom: none; }
.treffer-zeile:hover { background: var(--flaeche); }
.treffer-zeile strong { font-size: 14px; }
.treffer-zeile span { font-size: 12.5px; color: var(--schrift-hell); }

/* Die dritte Ebene sitzt auf einer eigenen weißen Fläche. Vorher waren
   es durchsichtige Knöpfe auf grauem Grund — die sahen nicht aus wie
   etwas, das man anklicken kann. */
.schalterreihe {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 8px 10px;
}
.schalterreihe a { background: var(--weiss); }
.schalterreihe a.aktiv { background: var(--schwarz); }

/* Auswahlreihen der Tätigkeitsarten ebenso */
.arten label { background: var(--weiss); }

/* ---------- Passwortfelder ---------- */

.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 46px; }

/*
   Das Auge zeigt den Zustand, nicht die Handlung: gruen heisst verdeckt,
   niemand kann mitlesen. Rot heisst offen, das Passwort steht im Klartext
   auf dem Bildschirm. Wer sich am Tablet umdreht, sieht das sofort.

   Die Farbe steht nicht allein: das durchgestrichene Auge sagt dasselbe
   noch einmal, fuer alle, die Rot und Gruen nicht unterscheiden.
*/
.pw-auge {
    position: absolute;
    top: 50%; right: 5px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--schrift-fein);
    cursor: pointer;
    font-size: 16px;
}
.pw-auge.zu    { color: var(--gut); }
.pw-auge.offen { color: var(--stop); }

.pw-auge.zu:hover    { background: var(--gut-flaeche);  border-color: #c4e2d3; }
.pw-auge.offen:hover { background: var(--stop-flaeche); border-color: #eec4be; }
.pw-auge:hover { background: var(--flaeche-2); }

/* Steht das Passwort offen, faellt auch das Feld auf */
.pw-feld:has(> .pw-auge.offen) input {
    border-color: var(--stop);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .04em;
}

/* Der Vorschlag steht groß und lesbar daneben, damit er sich abschreiben
   oder vorlesen lässt. */
.pw-anzeige {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--flaeche);
    border: 1px dashed var(--linie);
    border-radius: var(--radius);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 19px;
    letter-spacing: .06em;
    text-align: center;
    color: var(--schwarz);
    user-select: all;
}
.pw-anzeige[hidden] { display: none; }