/* Gemeinsames Farbschema: siehe FARBSCHEMA.md. */
:root {
    --ui-calendar-empty: #E8E8E8;
    --ui-ivory: #F5F9E9;
    --ui-pale-sky: #CDE6F5;
    --ui-deep-blue: #18314F;
    --ui-dust-denim: #748CAB;
    --ui-text: #515751;
    --ui-background: #f3f4f6;
    --ui-white: #FFFFFF;
    --ui-warning-bg: #FFFBEB;
    --ui-warning-border: #FDE68A;
    --ui-warning-text: #B45309;
    --ui-danger-bg: #FDF2F2;
    --ui-terracotta: #C85A54;
    --ui-danger-title: #B93838;
    --ui-success-bg: #e4f3ea;
    --ui-success-text: #1c7a43;
    --ui-positive: #0a7d3c;
    --ui-negative: #c02020;
    --ui-attention-bg: #fff0f0;
    --ui-attention-border: #d99999;
    --ui-dialog-shadow: 0 0 0 1px #748cab40, 0 12px 40px #18314f30;
}
/* Reines CSS, keine externen Ressourcen.
   Die App muss offline funktionieren, deshalb auch keine Web-Schriften. */

:root {
    --schrift: "Segoe UI", Tahoma, Arial, sans-serif;
    --zahlen: "Consolas", "Courier New", monospace;

    --grund: #f4f5f7;
    --karte: var(--ui-white);
    --linie: #d8dce2;
    --linie-stark: #b4bcc6;
    --text: #1d2430;
    --text-leise: #666f7d;

    --plus: var(--ui-positive);
    --minus: var(--ui-negative);
    --hinweis: #b06a00;
    --hinweis-grund: #fff6e0;
    --aktion: #24557f;
    --aktion-hell: #eaf1f8;
    --wochenende: #eceef1;
    --heute: var(--ui-ivory);
}

* { box-sizing: border-box; }

/* iOS blaeht laengere Textabsaetze eigenmaechtig auf («text inflation»),
   waehrend kurze Beschriftungen unveraendert bleiben — dadurch wirken
   Hinweistexte und Warnungen am Telefon viel groesser als der Rest. Beide
   Browser auf dem iPhone (Safari und Chrome) nutzen dieselbe Engine, deshalb
   trat es in beiden auf. Festhalten auf 100 % schaltet die Aufblaehung ab. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 15px;
    color: var(--text);
    background: var(--grund);
}

/* ---------------------------------------------------------------- Kopf */

/* Die Kopfzeile bleibt beim Rollen stehen. Wer unten im Monat arbeitet, kam
   sonst nur ueber den Weg nach oben zu Monat, Jahr oder Absenzen zurueck.
   Sie traegt dafuer nur Marke, Sprachwahl und Navigation. Die Kennzahlen
   stehen darunter in `.kopfzahlen` und rollen mit: sie sind eine
   Momentaufnahme und kein Bedienelement, und eine dauerhaft sichtbare Leiste
   soll so schmal sein wie moeglich. */
header.kopf {
    display: flex;
    align-items: center;
    /* Beide Reihen mittig: bei einem langen Firmennamen, wenn die Navigation
       auf eine eigene Zeile rutscht, stehen Marke und Sprachwahl oben mittig
       und die Menuepunkte darunter mittig. Auf breiten Fenstern fuellt die
       Navigation die Zeile (flex: 1 1 auto), dort bleibt die Marke links. */
    justify-content: center;
    gap: 20px;
    /* Etwas mehr Luft nach oben, damit die obere Reihe nicht am Fensterrand
       klebt und die beiden Reihen buendig wirken. */
    padding: 14px 20px;
    background: var(--karte);
    border-bottom: 2px solid var(--linie-stark);
    /* Die Navigation steht IMMER auf einer Zeile — notfalls auf einer
       eigenen, ueber die ganze Breite. Sie ist das letzte Element der
       Kopfzeile; reicht der Platz neben Marke und Sprachwahl nicht, rutscht
       sie als Ganzes eine Zeile tiefer und hat dort alles fuer sich. Vorher
       brach sie mitten im Menue um, weil die Kennzahlen rechts ihren festen
       Platz beanspruchten — auf Franzoesisch zweizeilig, auf Italienisch
       dreizeilig, und die Sprache bestimmte, wie die Navigation aussieht. */
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.marke { font-weight: 700; font-size: 16px; white-space: nowrap; flex: 0 0 auto; }
h2 .leise, h3 .leise { margin-left: 10px; }

.marke .person { font-weight: 400; color: var(--text-leise); margin-left: 10px; }

nav.hauptnavigation {
    display: flex; gap: 4px;
    flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap;
    /* Die Menuepunkte mittig, wenn sie Platz haben. «safe» faellt bei zu
       schmaler Zeile auf linksbuendig zurueck, damit der erste Punkt beim
       Rollen erreichbar bleibt (zentriert wuerde der Anfang sonst hinter dem
       linken Rand verschwinden). */
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
}
nav.hauptnavigation::-webkit-scrollbar { display: none; }

/* Rollbereich um die Navigation: er nimmt den Platz ein, den die Navigation
   allein hatte (flex: 1 1 auto), die Pfeile liegen darueber an den Raendern. */
.navi-rollbereich {
    position: relative;
    flex: 1 1 auto; min-width: 0;
    display: flex;
}

/* Halb sichtbare Pfeile links und rechts, so hoch wie die Navi-Zeile. Der
   Verlauf blendet die Menuepunkte darunter weich aus; der Pfeil ist hellgrau
   und passt sich der Seite an. app.js zeigt einen Pfeil nur, wenn in seine
   Richtung ueberhaupt etwas zu rollen ist. */
.navi-pfeil {
    position: absolute; top: 0; bottom: 0; width: 40px;
    display: flex; align-items: center;
    padding: 0 6px; border: none; cursor: pointer; z-index: 3;
    font-size: 26px; line-height: 1; color: var(--text-leise);
}
.navi-pfeil.links  { left: 0;  justify-content: flex-start;
    background: linear-gradient(to right, var(--karte) 55%, transparent); }
.navi-pfeil.rechts { right: 0; justify-content: flex-end;
    background: linear-gradient(to left,  var(--karte) 55%, transparent); }
.navi-pfeil:hover  { color: var(--text); }
.navi-pfeil[hidden] { display: none; }

nav.hauptnavigation a {
    white-space: nowrap;
    padding: 7px 14px;
    text-decoration: none;
    color: var(--text);
    border-radius: 5px;
    border: 1px solid transparent;
}
nav.hauptnavigation a:hover { background: var(--aktion-hell); }
/* Fokus-Rahmen der Navigation: nur bei Tastaturbedienung sichtbar und im Stil
   der Seite (derselbe blaue Rahmen wie bei den Eingabefeldern). Ein Mausklick
   oder ein per Skript gesetzter Fokus zeigt keinen Rahmen mehr — vorher blitzte
   dort der rohe Browser-Rahmen als blaue «Klammern» auf, etwa beim Klick auf
   «Meldungen», wenn kurz zuvor auf «Heute» eine Zeit geaendert wurde. */
nav.hauptnavigation a:focus { outline: none; }
nav.hauptnavigation a:focus-visible {
    outline: 2px solid var(--aktion); outline-offset: 2px;
}
nav.hauptnavigation a.aktiv {
    background: var(--aktion-hell);
    border-color: var(--aktion);
    color: var(--aktion);
    font-weight: 600;
}

/* Die Kennzahlenzeile: mittig, ueber die ganze Breite, mit einer duennen
   Linie zum Inhalt. Die Linie markiert den Bereichswechsel und trennt sie
   zugleich von der Kopfzeile, die beim Rollen darueber stehen bleibt. */
.kopfzahlen {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 8px 20px;
    background: var(--karte);
    border-bottom: 1px solid var(--linie);
}

.kopfsaldo { text-align: center; line-height: 1.3; white-space: nowrap; }
.kopfsaldo .beschriftung { font-size: 11px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .5px; }
.kopfsaldo .wert { font-family: var(--zahlen); font-size: 20px; font-weight: 700; }

.plus  { color: var(--plus); }
.minus { color: var(--minus); }

/* ------------------------------------------------------------ Warnungen */

/* Ein Hinweis mit einem leichten Umriss ringsum in seiner eigenen Farbe (wie
   die Leiste «offene Meldungen»), nicht mehr ein Balken mit nur einer Linie
   unten. Gelb als Hinweis, rot als Verstoss (kräftige Schrift), blau bei der
   Überzeit. */
.warnung {
    margin: 14px 20px 0;
    padding: 10px 14px;
    background: var(--hinweis-grund);
    border: 1px solid #e8d090;
    border-radius: 5px;
    color: var(--hinweis);
}
.warnung strong { color: #8a5200; }
.warnung.rot { background: #fdecec; border-color: #f2b8b8; color: var(--minus); }
.warnung.rot strong { color: var(--minus); }
/* Der Beleg-Balken (Arztzeugnis, Geburtsanzeige, Marschbefehl …) auf «Heute»
   und im Monat: anders als die übrigen Warnungen nicht über die ganze Breite,
   sondern nur so breit wie sein Text, mittig und mit etwas Abstand nach oben —
   ein Hinweis, keine Sperre. */
.warnung.beleg {
    width: fit-content;
    max-width: calc(100% - 40px);
    /* Rundum abgesetzt, oben wie unten ~5mm, damit der Balken frei steht und
       nicht am weissen Arbeitsbereich klebt. */
    margin: 20px auto 20px;
    text-align: center;
}
.warnung.beleg strong { margin-right: 4px; }
.warnung.beleg a { margin-left: 6px; white-space: nowrap; }

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

main { padding: 20px; max-width: 1400px; margin: 0 auto; }

.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.karte > h2 { margin: 0 0 14px; font-size: 17px; }
.karte > h2 .leise { font-weight: 400; color: var(--text-leise); font-size: 14px; }

/* Zwischenueberschrift in einer Kachel. Die Meldung an die Versicherung
   traegt zwei Bezugsrahmen, den ganzen Monat und die Kurzarbeitstage;
   ohne Ueberschrift stuende «Geleistete Arbeit» zweimal auf der Seite und
   meinte zweierlei. Kleiner als die h2 der Kachel, damit die Gliederung
   erkennbar bleibt und die Kachel trotzdem eine Kachel bleibt. */
.karte h3 { margin: 16px 0 8px; font-size: 14px; }
.karte h3 .leise { font-weight: 400; color: var(--text-leise); font-size: 13px; }

.spalten { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.spalten > * { flex: 1; min-width: 300px; }
/* Eine Spalte mit einer Tabelle, die nicht schmaler werden kann: die Liste der
   erfassten Absenzen braucht 535 Pixel und die Kachel 40 dazu. Darunter bricht
   sie unter die Nachbarspalte um, statt Knoepfe aus der Kachel zu schieben.
   Dieselbe Mindestbreite wie eine Spalte des `.kachelraster`, in dem die
   Kachel «Auszahlung beantragen» steht: beide verhalten sich gleich. */
.spalten > .liste-spalte { min-width: min(592px, 100%); }

/* Zwei Kachelspalten enden unten auf gleicher Hoehe. `.spalten` richtet oben
   aus, und die beiden Stapel werden verschieden lang. Die LETZTE Kachel der
   kuerzeren Spalte waechst und schliesst die Luecke: ein wenig Luft in einer
   Kachel ist gewollter Raum, eine ausgefranste Kante ein Versehen.
   Untereinander gestapelt (Telefon) greift nichts davon. */
.spalten.gleich-lang { align-items: stretch; }
.spalten.gleich-lang > * { display: flex; flex-direction: column; }
.spalten.gleich-lang > * > .karte:last-child { flex: 1; }

/* Eine Zeile aus mehreren KURZEN Feldern. `.spalten` verlangt 300 Pixel je
   Kind — richtig fuer Kacheln, zu viel fuer vier Zahlenfelder: das vierte
   fiel allein in eine zweite Zeile. Hier zaehlt die Beschriftung, nicht das
   Feld, und die darf umbrechen. */
.feldzeile {
    display: grid;
    /* 180 Pixel, nicht 200: bei 200 kippte die Zeile auf einem Fenster von
       945 Pixeln wieder auf drei plus eins. */
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 18px;
    align-items: start;
}
.feldzeile > * { min-width: 0; }

/* Felder ohne Hilfetext auf gleiche Hoehe bringen: die Beschriftung darf ueber
   zwei Zeilen umbrechen («Ferienanspruch in Tagen pro Jahr»), das Feld selbst
   soll trotzdem mit den Nachbarn fluchten. Dafuer wird jede Beschriftung zum
   Fueller und das Feld sitzt unten. Nur wo unter dem Feld nichts mehr steht. */
.feldzeile-unten { align-items: stretch; }
.feldzeile-unten > label { display: flex; flex-direction: column; margin-bottom: 0; }
.feldzeile-unten > label > .beschriftung { flex: 1 0 auto; }

/* Die Wochentage stehen nebeneinander, nicht untereinander: als <label class=
   "tag"> erbten sie sonst das block-Layout jeder Beschriftung und machten die
   Kachel unnoetig hoch. */
/* Fest drei Spalten (statt auto-fit, das bei ~571 Pixeln Kachelbreite nur zwei
   ergab): Pensum, Wochensoll, Ferienanspruch stehen oben, Kanton und die
   Wochentage teilen sich die zweite Zeile. Unter 700 Pixeln zwei Spalten, damit
   die Zahlenfelder nicht zerdrueckt werden. */
.feldzeile-drei { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
@media (max-width: 700px) { .feldzeile-drei { grid-template-columns: 1fr 1fr; } }

/* Die Wochentage sitzen gleich rechts vom Kanton: das Feld spannt zwei Spalten
   des Rasters, damit alle sieben in eine Zeile passen. */
.arbeitstage-feld { grid-column: span 2; }
.arbeitstage { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 3px; }
.arbeitstage .tag {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0; white-space: nowrap;
}
.arbeitstage .tag input { width: auto; margin: 0; }

/* Der Saldo zu Monatsbeginn, in der Werkzeugleiste der Monatsansicht. Er
   stand einmal ganz unten in kleiner Schrift, wo ihn niemand sieht — dabei
   erklaert er die erste Zahl der Saldospalte. Gestaltet wie die Knoepfe
   daneben, damit er in der Leiste nicht als Fremdkoerper steht. */
.monatsstart {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--linie); border-radius: 5px;
    background: var(--grund);
    white-space: nowrap;
}
.monatsstart .titel {
    font-size: 11px; color: var(--text-leise);
    text-transform: uppercase; letter-spacing: .5px;
}
.monatsstart .zahl {
    font-family: var(--zahlen); font-weight: 700; font-size: 16px;
}

/* Die Monatsleiste: Steuerung (Navigation, Monat, Jahr) links, der Export
   rechts, der Saldo zu Monatsbeginn dazwischen ueber den Zahlenspalten. Beide
   Huellen sind Flex, damit mobile.js sie einzeln umbauen kann. */
/* Breit: der Saldo zu Monatsbeginn wird auf die Leiste mit Monatswahl und
   Export hochgezogen und sitzt rechtsbuendig ueber den Zahlenspalten. Der
   Versatz von 359 px (= Absenz 170 + Bemerkung 130 + Aktionsspalte «A» 59, am
   laufenden Server gemessen) legt seinen rechten Rand auf die Saldospalte; die
   Spalte Segmente ist elastisch, der stabile Anker ist deshalb die rechte
   Seite. Der negative Rand legt die Badge-Zeile auf die Zeile darueber; sie
   traegt keine Bedienelemente, nur der Badge faengt Klicks, damit die
   Monatswahl und die Knoepfe darunter erreichbar bleiben. Wird es schmaler
   (unter 1250), faellt das weg und der Badge steht in seiner eigenen Zeile
   linksbuendig darunter; am Telefon ebenso. */
@media (min-width: 1250px) {
    .saldostart-zeile {
        justify-content: flex-end;
        margin-top: -50px;
        pointer-events: none;
    }
    .saldostart-zeile .monatsstart {
        margin-right: 359px;
        pointer-events: auto;
    }
}

/* Auszahlung beantragen: Konto-Dropdown und der auszahlbare Saldo stehen
   nebeneinander. Der Saldo sitzt gross und grün rechts vom Dropdown, in
   derselben Box wie der Saldo zu Monatsbeginn; klein und grau darunter war
   er kaum zu sehen. Das Feld richtet unten aus, damit die Box mit dem
   Dropdown fluchtet. */
.antrag-kontozeile { display: flex; align-items: flex-end; gap: 16px;
                     flex-wrap: wrap; }
.antrag-kontozeile .antrag-kontofeld { margin-bottom: 0; }

/* -------------------------------------------------------- Kachelraster
 *
 * Drei Spalten mit fester Gewichtung, anders als bei .spalten, wo alle
 * Kacheln gleich breit werden. Die Regel dahinter: eine Kachel mit einer
 * Tabelle gehoert in eine breite Spalte, eine mit reinem Text in die
 * schmale. Vorher wurden Tabellen in zu schmale Kacheln gepresst, brachen
 * dreizeilig um und verloren ihre letzte Spalte.
 */
/* Zwei Spalten, solange beide breit genug fuer ihre Tabelle sind — sonst
   eine. Fest auf `1fr 1fr` gestellt wurde die Sonntagsarbeit unterhalb von
   rund 1240 Pixeln in eine Kachel von 464 Pixeln gepresst, obwohl ihre
   Tabelle 560 braucht; die Frist rechts wurde dabei abgeschnitten. Eine
   Rollleiste innerhalb einer Kachel ist keine Loesung, das ist im ganzen
   Programm so gehalten: die Kachel nimmt sich lieber die volle Breite.

   `min(..., 100%)` ist noetig, damit die Spalte am Telefon nicht auf ihrer
   Mindestbreite beharrt und die Seite seitlich hinausschiebt. */
.kachelraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(592px, 100%), 1fr));
    gap: 18px;
    align-items: start;
}
.kachelraster > * { min-width: 0; }     /* sonst sprengt eine Tabelle ihre Spalte */
.schmalspalte { display: flex; flex-direction: column; gap: 18px; }


/* Tabellen auf der Ueberzeitseite richten ihre Spalten am Inhalt aus.
   Gleichmaessig verteilt entstand zwischen Datum und Stunden ein grosser
   Leerraum, waehrend die Begruendung daneben umbrach. */
.kachelraster table { table-layout: auto; width: 100%; }
.kachelraster td.zahl, .kachelraster th.zahl { width: 1%; }

/* Ein Zeitraum bleibt auf einer Zeile: '10.08.-16.08.2026'. */
td.spanne, th.spanne { white-space: nowrap; }

/* Eine lange Begruendung kuerzt sich selbst, der ganze Text steht im
   Tooltip. Ohne das schiebt sie die Kachel auseinander. */
td.gekuerzt {
    /* max-width 0 mit width 100 %: die Spalte nimmt, was die anderen
       uebrig lassen, und schrumpft notfalls bis auf ihre Mindestbreite.
       Mit einer festen Hoechstbreite bestimmte der Text die Mindestbreite
       der Tabelle, und seit der Spalte «Art» lief sie aus der Kachel. */
    max-width: 0; width: 100%; min-width: 80px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
/* In einer Kachel darf ein langer Merker umbrechen, «Auszahlung Überzeit»
   oder «Pagamento lavoro straordinario (LL)»: sonst gibt er der Tabelle eine
   Mindestbreite, die keine Kachel hat. */
.kachelraster td .merker { white-space: normal; }

/* Ein Satz, der in einer schmalen Spalte umbrechen darf, etwa die Begruendung
   einer Ablehnung in der Absenzliste. */
.umbrechen { white-space: normal; overflow-wrap: anywhere; }

/* Wie `gekuerzt` (nimmt den uebrigen Platz der Tabelle), aber der Text bricht um
   statt mit «…» abzuschneiden — die Begruendung auf der Ueberstundenseite. */
td.begruendung-zelle {
    max-width: 0; width: 100%; min-width: 80px;
    white-space: normal; overflow-wrap: anywhere;
}

/* Die Begruendung des Entscheids unter der Begruendung der antragstellenden
   Person, in der geschlossenen Antragsliste. Eine eigene Zeile mit «Genehmigt:»
   oder «Abgelehnt:» davor, damit die vorgesetzte Person ihre Begruendung sieht. */
.entscheid-begruendung { display: block; margin-top: 3px; color: var(--text-leise); }

/* Der Stand eines Antrags als farbiges Etikett. */
.stand {
    display: inline-block; padding: 1px 7px; border-radius: 9px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.stand.offen     { background: #FFF2CC; color: #7F6000; }
.stand.genehmigt { background: #E2EFDA; color: #375623; }
.stand.abgelehnt { background: #FCE4E4; color: #843C3C; }
.stand.zurueckgezogen { background: #EDEDED; color: #555; }

/* Ein Antrag, der drängt: dringend oder über der Frist. Ein zartes Rosaweiss,
   das die Zeile hervorhebt, ohne wie eine Fehlerzeile zu wirken. */
tr.hervorgehoben td { background: var(--ui-danger-bg); }

/* ------------------------------------------------------ Auswahl mit Text
 *
 * Radiobuttons statt eines Auswahlfeldes, wo die Optionstexte erklaeren
 * muessen. Ein natives <select> kann seine Optionen nicht umbrechen und
 * schneidet sie ab, im geschlossenen Zustand wie in der aufgeklappten Liste;
 * das ist weder ueber die Breite noch ueber CSS zu loesen.
 *
 * Beschriftungen werden nirgends abgeschnitten. Reicht der Platz nicht,
 * bricht der Text um.
 */
/* Zaehler in der Navigation und die Leiste beim Start. */
.zaehler {
    display: inline-block; min-width: 17px; padding: 0 5px;
    border-radius: 9px; background: var(--minus); color: #fff;
    font-size: 11px; font-weight: 700; text-align: center; line-height: 17px;
}
/* Die Leiste steht unter der Kopfzeile, nicht in ihr, und in der Mitte der
   Seite wie ein eingesetztes Bild. Ganz umrahmt statt mit einem breiten
   Streifen links, duenn, und nur so breit wie ihr Text: ein Balken ueber die
   ganze Seitenbreite las sich wie eine Stoerung, dabei ist es ein Hinweis.
   Der Weg zur Liste ist ein Knopf und kein Link, damit er als Handlung
   erkennbar bleibt. */
.meldungsleiste-grund {
    display: flex; justify-content: center;
    padding: 10px 20px 0;
}

.meldungsleiste {
    /* Kompakter, mittiger Kasten. Der Knopf bleibt rechts neben dem Text; ein
       langer Text (etwa der Ueberzeit-Hinweis) bricht auf drei bis vier Zeilen
       um, statt den Balken ueber die ganze Breite zu ziehen und den Knopf
       darunter zu schieben. `nowrap` haelt Text und Knopf in einer Reihe, das
       feste Mass sorgt fuer den Umbruch im Text. */
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: nowrap;
    max-width: min(640px, 100%);
    padding: 5px 7px 5px 12px; border-radius: 4px;
    background: var(--hinweis-grund);
    border: 1px solid rgba(0, 0, 0, .15);
    font-size: 12.5px; line-height: 1.5;
}
.meldungsleiste.dringend {
    background: #FCE4E4; color: #843C3C; border-color: #E8B0B0;
}
.meldungsleiste > span { min-width: 0; }
/* Der Knopf steht auf Weiss und nicht auf dem Grund der Leiste: gleich
   eingefaerbt verschwand er darin und sah nicht mehr nach einer Handlung
   aus. Die Schrift folgt der Leiste, damit kein blauer Fleck in einem roten
   Kasten steht. */
.meldungsleiste .knopf {
    background: #fff; color: inherit;
    border-color: currentColor; opacity: .9;
    /* Etwas kompakter (rund 20 %) als ein normaler Knopf, die Schriftgrösse
       bleibt. «winzig» greift hier nicht, weil es ein <a> ist. */
    padding: 5px 12px;
    /* Der Knopf schrumpft nicht und bleibt einzeilig rechts vom Text. */
    flex: 0 0 auto; white-space: nowrap;
}
.meldungsleiste .knopf:hover { opacity: 1; background: #fff; }

/* --------------------------------------------------------- Feldraster
 *
 * Felder nebeneinander, solange Platz ist, sonst untereinander. Ohne festes
 * mobiles Layout: die Unfallerfassung soll spaeter auch vom Telefon aus
 * bedienbar sein, und dort steht alles in einer Spalte.
 */
.feldraster {
    display: grid; gap: 0 18px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
}
.feldraster > * { min-width: 0; }

fieldset.auswahl { border: none; margin: 0 0 4px; padding: 0; }
fieldset.auswahl legend { padding: 0; margin-bottom: 4px; }

.auswahlzeile {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 0; margin: 0; cursor: pointer;
    font-size: 13px; line-height: 1.45;
    white-space: normal;                 /* nie abschneiden */
}
.auswahlzeile input[type="radio"] {
    margin: 2px 0 0; flex: none; width: 15px; height: 15px; cursor: pointer;
}
.auswahlzeile > span { flex: 1; min-width: 0; }
/* Der Artikelverweis am Ende, wie die uebrigen Hilfetexte der Kachel. */
.auswahlzeile .hilfe { display: inline; margin: 0; }

/* Ein Knopf, der wie ein Link aussieht: fuer die seltene Handlung in einer
   Tabellenzeile, die keine eigene Spalte verdient. */
button.alslink {
    background: none; border: none; padding: 0 0 0 6px;
    font-size: 12px; color: var(--minus); text-decoration: underline;
    cursor: pointer; min-height: 0;
}
button.alslink:hover { text-decoration: none; }

/* -------------------------------------------------------- Stempelmeldung */

.stempelmeldung {
    background: #e8f5ec;
    border: 2px solid var(--plus);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.stempelmeldung.gesperrt { background: var(--hinweis-grund); border-color: #e0b050; }
.stempelmeldung .text { font-size: 24px; font-weight: 700; flex: 1; }
.stempelmeldung .korrektur { display: flex; align-items: center; gap: 8px; }
.stempelmeldung input[type="text"] {
    font-family: var(--zahlen); font-size: 20px; width: 88px; text-align: center;
}

/* ------------------------------------------------------------- Knöpfe */

button, .knopf {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid var(--linie-stark);
    border-radius: 5px;
    background: var(--karte);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
button:hover, .knopf:hover { background: var(--aktion-hell); border-color: var(--aktion); }

button.haupt, .knopf.haupt {
    background: var(--aktion); border-color: var(--aktion); color: #fff; font-weight: 600;
}
button.haupt:hover, .knopf.haupt:hover { background: #1b426b; }

button.gross { font-size: 18px; padding: 12px 28px; }
button.leise { border-color: var(--linie); color: var(--text-leise); }
button.gefahr { color: var(--minus); border-color: #e0b0b0; }
button.gefahr:hover { background: #fdecec; border-color: var(--minus); }
button.winzig { padding: 3px 8px; font-size: 12px; }

/* «Foto aufnehmen» unter einem Beleg-Feld. Erscheint per JS nur auf einem
   Touch-Geraet (siehe kameraAnhaengen in app.js), fingerfreundlich hoch und
   mit etwas Abstand zum Feld darueber. */
button.kamera-knopf { display: block; margin-top: 8px; min-height: 44px; }
/* Ein Link, der wie ein kleiner Knopf aussieht, in der Meldungstabelle: «Öffnen»
   neben «Hochladen». `button.winzig` erfasst ihn nicht, und er stand in voller
   Knopfgroesse daneben. Nur hier, die Kopfzeile und der Monat bleiben, wie sie sind. */
/* Die Meldungslisten haben feste Spaltenbreiten (table-layout: fixed), damit
   Name, Datum und Absenzart über alle drei Listen fluchten. Ein langer
   Absenzart-Merker («Militär / Zivilschutz / Zivildienst / J+S») darf dann
   umbrechen, statt aus seiner Spalte in die nächste zu ragen.

   `max-width` schmiegt den Badge an seinen Text: ohne ihn füllt ein
   umbrechender Inline-Block die ganze feste Spalte (die verfügbare Breite),
   und rechts der kürzeren Zeile stünde viel leeres Grün. 128 px liegt knapp
   über der breitesten einwortigen Absenzart («Mutterschaftsurlaub», 122 px),
   sodass Einzelwörter einzeilig bleiben und nur die langen, mehrwortigen
   Merker umbrechen und sich an ihre längste Zeile schmiegen. */
.meldungsliste .merker { white-space: normal; max-width: 128px; }
.meldungsliste .knopf.winzig { padding: 3px 8px; font-size: 12px; }
/* In der Standspalte erbte er die Zahlenschrift der Zelle und wurde dadurch
   2 Pixel niedriger als «Hochladen» daneben. */
.meldungsliste .knopf.winzig { font-family: var(--schrift); }
/* Die Aktionsspalte der Unfallliste ist breiter als ihre beiden Knoepfe
   («Bearbeiten», «PDF»); ohne diese Regel klebten sie links und liessen rechts
   eine Luecke. Rechtsbuendig stehen sie am Rand wie bei Meldungen und
   Antraegen, deren Spalten genau so breit sind wie ihre Knoepfe. */
.meldungsliste td.aktionen, .meldungsliste th.aktionen { text-align: right; }

/* Waagrechter Rollbereich: die Meldungs- und Antragslisten scrollen, statt
   ihre Spalten zu stauchen, sobald das Fenster schmaler wird als die Tabelle
   (jede traegt dafuer eine min-width). So erscheint der Schiebebalken, bevor
   sich Spalten wie «Begruendung» und «Frist» ueberlagern. jahr.html und
   monat.html setzen es seit je inline; hier fehlte die Basis. */
.rollbar { overflow-x: auto; }

/* Der Rahmen um die Jahresmatrix. Am Desktop rollt er waagrecht, falls das
   Fenster schmaler ist als die Matrix. Am Telefon dreht `jahr.html` die Matrix
   darin ins Querformat (siehe dortiges Skript), damit die ganze Jahresmatrix
   lesbar ist und sich als Querformat abbilden laesst. */
.matrix-wrap { overflow-x: auto; }

/* Anträge: die Aktionsspalte (Genehmigen/Ablehnen) steht rechts mit etwas
   Abstand zum Kachelrand, wie die Knoepfe der Meldungsliste darueber. Vorher
   klebte «Ablehnen» am Rand, und in der geschlossenen Ansicht stand der Knopf
   weit links mit grossem Leerraum rechts. */
.antragsliste td:last-child, .antragsliste th:last-child {
    text-align: right; padding-right: 14px;
}

/* Zwei Knoepfe, die zusammengehoeren, etwa Genehmigen und Ablehnen: gleich
   breit und buendig. Vorher war jeder so breit wie sein Wort. Die Breite gibt
   der laengere Text vor, damit es in jeder Sprache stimmt; eine feste Breite
   passte nur auf Deutsch. */
/* Zwei (oder ein) Entscheid-Knopf, buendig am rechten Rand der Spalte (die
   Zelle traegt text-align:right). Als Raster mit zwei festen Spalten blieb ein
   einzelner Knopf — etwa nur «Genehmigen» bei einem abgelehnten Antrag — in der
   linken Haelfte haengen und stand nicht rechtsbuendig. Als inline-flex hugt
   auch ein einzelner Knopf den rechten Rand. */
.knopfpaar {
    display: inline-flex;
    gap: 6px;
    vertical-align: middle;
}
.knopfpaar.untereinander { flex-direction: column; align-items: stretch; }
.knopfpaar > button { margin: 0; }
.knopfpaar.untereinander > button { width: 100%; }

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

label { display: block; margin-bottom: 12px; }
/* Die Feldbeschriftung, gleich ob sie in einem <label> oder als <legend>
   ueber einer Gruppe steht. Die Regel galt nur fuer label > und liess
   jede Legende gross und schwarz stehen — neben den kleinen grauen
   Beschriftungen daneben sah das aus wie eine Ueberschrift. */
label > .beschriftung, legend.beschriftung {
    display: block; font-size: 13px; color: var(--text-leise);
    margin-bottom: 3px; font-weight: 400;
}
label > .hilfe, .hilfe { display: block; font-size: 12px;
    color: var(--text-leise); margin-top: 3px; }

input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], select, textarea {
    font-family: inherit;
    font-size: 15px;
    padding: 7px 9px;
    border: 1px solid var(--linie-stark);
    border-radius: 4px;
    background: #fff;
    color: var(--text);
    width: 100%;
    max-width: 320px;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--aktion); outline-offset: -1px; border-color: var(--aktion);
}
input.zeit { font-family: var(--zahlen); width: 90px; text-align: center; }
input.kurz { max-width: 130px; }
/* Freitext, der in einer Zeile lesbar sein muss: Unfallort und Sachverhalt.
   Die allgemeinen 320 Pixel reichen dort nicht, ein ganzer Satz bricht darin
   nach vier Woertern um. Nach oben begrenzt, damit die Zeile am grossen
   Bildschirm nicht so lang wird, dass das Auge die Zeile verliert. */
input.breit, textarea.breit { max-width: 760px; }
input.gespeichert { background: #eaf7ee; transition: background .4s; }

/* Firmen-Stammdaten: die Textfelder etwas laenger (lange Firmennamen, und in
   der Welschschweiz lange Ortsnamen). Um rund 20 Prozent ueber die 320 Pixel
   der uebrigen Felder. PLZ und Ort stehen mit kleinem Abstand nebeneinander:
   die PLZ braucht nur vier Zeichen, das Ortsfeld ist deutlich laenger, aber
   nicht ueberdimensioniert. */
.firma-karte input[type="text"] { max-width: 384px; }
.firma-plzort { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.firma-plzort > label { margin-bottom: 12px; }
.firma-karte input.firma-plz { width: 92px; max-width: 92px; }
/* PLZ (92) + Abstand (12) + Ort (280) = 384, damit die Zeile rechts bündig
   mit den anderen Feldern der Kachel abschliesst. */
.firma-karte input.firma-ort { width: 280px; max-width: 100%; }

/* Zahl mit nachgestellter Einheit, etwa «50 %». Die Einheit gehoert an die
   Zahl und nicht in die Beschriftung: sonst steht sie zu weit weg. */
.mit-einheit { display: inline-flex; align-items: center; gap: 6px; }
.mit-einheit .einheit { color: var(--text-leise); font-size: 15px; }

/* Ankreuzfeld mit Text daneben. Ohne die eigene Breite zoege das Kaestchen
   auf die volle Feldbreite wie ein Textfeld. */
.wahl { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wahl input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
input.fehlerhaft { background: #fdecec; border-color: var(--minus); }

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

table { border-collapse: collapse; width: 100%; font-size: 14px; }

/* Eine Tabelle, die nur so breit wird wie ihr Inhalt. Die Herleitung des
   anrechenbaren Ausfalls hat zwei Spalten; ueber die ganze Kachelbreite
   gezogen stand die Zahl einen halben Bildschirm von ihrer Beschriftung
   entfernt und war nicht mehr zuzuordnen. Die Klasse stand seit je in der
   Vorlage, eine Regel dazu in keinem Stilblatt. */
table.schmal { width: auto; min-width: 300px; }
table.schmal td.zahl { padding-left: 32px; }
th, td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--linie); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
     color: var(--text-leise); background: #fafbfc; font-weight: 600;
     border-bottom: 2px solid var(--linie-stark); }
td.zahl, th.zahl {
    text-align: right; font-family: var(--zahlen);
    font-variant-numeric: tabular-nums;
}
td.zahl { white-space: nowrap; }
th.zahl { white-space: normal; }

/* Die Zahlenspalten der Monatstabelle: Ist, Soll, Diff., Abw. KA, Saldo.
   Alle gleich breit und so schmal wie ihre Zahlen, dann sind die Abstaende
   gleichmaessig und der Platz bleibt fuer die Zeitpaare. Ohne Breite gab der
   Browser den Platz nach der Laenge der Ueberschrift aus: 62, 62, 79, 86 und
   55 Pixel fuer Zahlen von 36 bis 38. Eine laengere Zahl, etwa ein Saldo von
   dreistelligen Stunden, macht ihre Spalte trotzdem breiter: die Zelle bricht
   nicht um. */
table.tagesliste th.zahlspalte { width: 56px; }

/* Links braucht eine rechtsbuendige Zahl kein Polster, es kostet nur Breite.
   Mit den ueblichen 8 Pixeln war das Monatstotal «190:10» breiter als die
   Spalte, und Ist und Soll standen bei 62 Pixeln statt bei den 55 der
   anderen: zwischen Ist und Soll klaffte eine Luecke von 31 Pixeln. */
table.tagesliste td.zahl, table.tagesliste th.zahlspalte { padding-left: 2px; }

/* Nach einer rechtsbuendigen Zahl beginnt die Absenz linksbuendig; mit dem
   ueblichen Polster stand der Merker zu nahe an der Zahl davor. */
table.tagesliste th.nach-zahlen { padding-left: 14px; }

/* Die Zeitfelder der Monatstabelle am grossen Bildschirm etwas schmaler, damit
   zwei Zeitpaare auf eine Zeile passen. «08:00» braucht in der Zahlenschrift
   rund 50 Pixel samt Polster und Rahmen; 66 waren grosszuegig. Das «!important»
   braucht es, weil die Breite in der Vorlage am Feld steht, wie in der
   Druckregel weiter unten. Nur am Bildschirm ab 721 Pixeln: am Telefon sind
   die Felder breiter, der Schrift von 16 Pixeln wegen. */
@media screen and (min-width: 721px) {
    table.tagesliste .zeitpaar input.zeit { width: 60px !important; }
}
tr.wochenende td { background: var(--wochenende); color: var(--text-leise); }
tr.feiertag td { background: #e4e4e4; }
tr.heute td { background: var(--heute); }
tr.heute td:first-child { border-left: 3px solid var(--aktion); }
tfoot td { font-weight: 700; border-top: 2px solid var(--linie-stark); background: #fafbfc; }

/* Die fette Linie trennt die Kalenderwochen. So sieht man auf einen Blick,
   welche Tage zusammen eine Woche ergeben, und die Wochenzeile darunter
   fasst sie zusammen. */
tr.wochenstart td { border-top: 3px solid var(--aktion); }

tr.wochensumme td {
    background: #f3f6fa;
    font-weight: 600;
    border-bottom: 1px solid var(--linie-stark);
    color: var(--text);
}
tr.wochensumme td.leise { font-weight: 400; }

/* Stillzeit steht klein unter den Segmenten, deutlich abgesetzt. */
.stillzeit-zeile {
    display: flex; align-items: center; gap: 6px;
    margin-top: 5px; padding-top: 5px;
    border-top: 1px dashed var(--linie);
}
.stillzeit-zeile .zeit { font-family: var(--zahlen); }

.zeitliste { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Ein Dateifeld sieht aus wie ein Knopf und steht neben einem. Das eigene
   Feld ist versteckt; sichtbar ist die Beschriftung im Label. Ohne
   `inline-flex` sitzt sie auf der Grundlinie ihres Textes statt in der Mitte
   des Knopfes daneben, und die beiden stehen um ein paar Pixel versetzt. */
.dateiwahl {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    /* `label` traegt ueberall 12 Pixel Abstand nach unten. In einer Zeile
       neben einem Knopf macht dieser Abstand die Zeile hoeher als beide
       Knoepfe, und `align-items: center` richtet dann den Rahmen samt
       Abstand aus: das Dateifeld sass sechs Pixel zu hoch. */
    margin: 0;
}
.dateiwahl .knopf { margin: 0; }
.zeitpaar { white-space: nowrap; font-family: var(--zahlen); }

/* Eine Absenz mit erfasstem Beginn und Ende bei den Segmenten, meist ein
   Anlass. Der Streifen in ihrer Farbe unterscheidet sie von einer
   Stempelung; die Farbe selbst steht in der Vorlage am Element, denn sie
   gehoert zur Absenzart und ist in den Einstellungen aenderbar. */
/* Ein feiner Rahmen in der Absenzfarbe um das Zeitpaar einer Absenz mit Beginn
   und Ende, auf «Heute» wie in der Monatsansicht. Die Farbe kommt aus der
   Vorlage (--absenzrahmen) und ist die pure Farbe der Absenzart, auch bei den
   hellen Gelbtoenen: abgedunkelt veraenderte sich der Farbton, und die pure
   Farbe ist fuer das Auge besser zu erkennen (Entscheid vom 11.09.2026).

   **outline und nicht border.** Ein outline nimmt keinen Platz ein: die Felder
   stehen genau dort, wo sie ohne Rahmen stuenden. Der fruehere Streifen links
   (border-left mit padding-left) schob das Zeitpaar um acht Pixel. */
.zeitpaar.absenzzeit, .absenzpaar {
    outline: 1.5px solid var(--absenzrahmen, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Die Huelle auf «Heute» ordnet ihre Kinder mit demselben Abstand wie die
   Zeile selbst, sonst verschoebe sie Beginn, «bis» und Ende. */
.absenzpaar { display: inline-flex; align-items: center; gap: 8px; }

.merker {
    display: inline-block; padding: 1px 7px; border-radius: 3px;
    font-size: 12px; border: 1px solid rgba(0,0,0,.15); white-space: nowrap;
}
/* In einer Ueberschrift beginnt der Merker sonst unmittelbar nach dem
   Wochentag, und die beiden lesen sich wie ein Wort. In der Tabelle steht
   er allein in seiner Spalte und braucht den Abstand nicht. */
h2 .merker { margin-left: 10px; }
.merker.laeuft { background: var(--plus); color: #fff; border-color: var(--plus); }

/* Verkuerzte Ruhezeit (Art. 15a ArG). Gelb, solange die Verkuerzung zulaessig
   war, rot wenn nicht. Nie eine Sperre: die Zeit ist gearbeitet. */
.merker.ruhezeit { background: #FFF2CC; color: #7F6000; border-color: #E8D08A; }
.merker.ruhezeit.unzulaessig { background: #FCE4E4; color: #843C3C; border-color: #E8B0B0; }

/* Ein Hinweiskasten, der eine Grenze betrifft, statt nur zu informieren. */

/* ------------------------------------------------------- Segmentzeilen */

.segmente { list-style: none; margin: 0; padding: 0; }
.segmente li {
    display: flex; align-items: center; gap: 8px;
    /* Umbrechen, wenn die Zeile mit «laeuft»-Merker, Dauer, «auto» und
       Loeschknopf breiter wird als die Karte (am Telefon quer wie hoch); der
       Loeschknopf stand sonst rechts ausserhalb. */
    flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--linie);
}
.segmente li .dauer { margin-left: auto; font-family: var(--zahlen); color: var(--text-leise); }
.segmente .bis { color: var(--text-leise); }

/* Die Absenz als eigene Zeile zwischen den Zeitfenstern. Sie stand bisher
   nur als Merker in der Ueberschrift: man sah, DASS der Tag betroffen ist,
   aber nicht, von wann bis wann.

   **Kein grauer Balken hinter der Zeile.** Er war der einzige, ging nur
   ueber einen Teil der Breite und sah aus wie ein Fehler. Die Zeile sieht
   aus wie jede andere; was sie unterscheidet, ist der farbige Merker mit
   dem Namen der Absenzart — und, wo nichts zu aendern ist, das graue
   Zeitfeld. */

/* Ein ganzer oder halber Tag traegt keine Uhrzeiten; die hier stehen sind
   aus dem Umfang und dem Tagessoll gerechnet und lassen sich nicht
   speichern. Das Feld hat deshalb die Form eines Zeitfelds, aber grau
   gefuellt und ohne Rahmen: so ist es ohne ein Wort daneben klar. Genau
   dieselbe Breite wie ein Eingabefeld, damit die Zeile mit den
   Segmentzeilen darueber fluchtet. */
span.zeit.fest {
    display: inline-block;
    /* Dieselbe Basis wie ein Eingabefeld, damit beide unter dem Druck der
       Flexzeile gleich nachgeben. Ohne sie nahm der span seine Textbreite
       als Basis und schrumpfte neben dem langen Merker «Ausgleich Ueberzeit
       (halber Tag)» von 90 auf 61 Pixel. */
    flex: 0 0 90px;
    width: 90px;
    font-family: var(--zahlen);
    text-align: center;
    /* Genau das Polster und der Rahmen eines Eingabefeldes: sonst steht die
       Zeile ein paar Pixel tiefer als die Segmentzeilen daneben. */
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--wochenende);
    color: var(--text-leise);
}

/* Ein gesperrtes Datumsfeld: der Wert wird gerechnet und laesst sich nicht
   von Hand aendern — das fixe Enddatum des Mutterschaftsurlaubs, das sich aus
   Beginn plus Reglement ergibt. Grau gefuellt wie das feste Zeitfeld, damit
   ohne ein Wort daneben klar ist, dass hier nichts zu waehlen ist. */
input.gesperrt {
    background: var(--wochenende);
    color: var(--text-leise);
    cursor: default;
}

@media (max-width: 720px) {
    /* Die Absenzzeile traegt mehr als eine Segmentzeile: zwei Zeitfelder,
       den Merker mit dem Namen der Absenzart, die Dauer und zwei Knoepfe.
       Auf 375 Pixeln passt das nicht nebeneinander — gemessen 457 Pixel
       Inhalt in 326 Pixeln Platz, und die ganze SEITE liess sich dadurch
       seitlich wegschieben. Sie bricht deshalb um.

       Nur diese Zeile: die Segmentzeilen darueber sind kuerzer und sollen
       ihre eine Zeile behalten. */
    .segmente li.absenzzeile { flex-wrap: wrap; }
    /* Umgebrochen waere die Dauer sonst allein auf einer Zeile ganz rechts. */
    .segmente li.absenzzeile .dauer { margin-left: 0; }
}

/* ---------------------------------------------------------- Kennzahlen */

.kennzahlen { display: flex; gap: 22px; flex-wrap: wrap; }
.kennzahl { min-width: 110px; }
.kennzahl .beschriftung { font-size: 12px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .4px; }
.kennzahl .wert { font-family: var(--zahlen); font-size: 22px; font-weight: 700; }
.kennzahl.gross .wert { font-size: 34px; }

/* Ein Kacheltitel mit Jahr-Auswahl rechts: der Titel links, das Dropdown
   rechtsbündig auf derselben Zeile, damit sich das Jahr an der Kachel
   wechseln lässt, ohne zum Kopf der Seite zu rollen. */
h2.mit-jahr {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
h2.mit-jahr .seiten-jahr { font-weight: 400; }

/* Ein Kicker über dem Kacheltitel, der die Kachel als eigenes Konto
   kennzeichnet: GLAZ betrieblich, Überzeit nach Arbeitsgesetz. So sind die
   beiden Konten auf einen Blick als getrennt zu erkennen. */
.konto-kicker {
    margin: 0 0 2px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--text-leise);
}

/* Die Jahreszähler der Kachel «Hinweise zu Grenzen», prominent statt klein
   am Fuss. Bei einer Unterschreitung der Ruhezeit rot getönt. */
.grenzen-summe {
    display: flex; flex-wrap: wrap; gap: 6px 24px;
    padding: 10px 12px; border-radius: 4px; background: #eef1f5;
    border: 1px solid transparent;
}
/* Bei einer Ruhezeit-Unterschreitung roter Grund und roter Umriss ringsum;
   die Schrift bleibt, wie sie ist. */
.grenzen-summe.hat-verstoss { background: #FCE4E4; border-color: #E8B0B0; }
.grenzen-summe .posten { font-size: 14px; font-weight: 600; }
.grenzen-summe .posten.rot { color: var(--minus); }

/* ------------------------------------- Präsenzspiegel (Jahresansicht)

   Aufbau nach referenz/Präsenzspiegel Vorlage.xlsx: Personalienblock,
   Wochentagsraster über 37 Spalten, Monatsname auf beiden Seiten,
   Bemerkungsspalte rechts, Legende darunter.

   **Ohne den gelben Kopfbalken der Vorlage.** Er war das einzige farbige
   Feld dieser Art im ganzen Programm und sah dadurch aus wie ein
   Überbleibsel. Der Kopf ist eine schlichte h2 wie in der Monatsansicht und
   braucht deshalb keine eigene Regel mehr. */

.spiegel-personalien {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px 24px;
    font-size: 13px;
    margin-bottom: 14px;
}
.spiegel-personalien .feldname { color: var(--text-leise); display: inline-block; min-width: 110px; }

table.matrix { table-layout: fixed; font-size: 11px; border: 1px solid var(--linie-stark); }
table.matrix th, table.matrix td {
    border: 1px solid var(--linie); padding: 0; text-align: center;
    height: 19px; overflow: hidden;
}
table.matrix th.monat, table.matrix td.monat {
    width: 46px; font-weight: 700; background: #fafbfc; padding: 0 4px;
    font-size: 11px; text-align: left; text-transform: none; letter-spacing: 0;
}
table.matrix th.jahrspalte, table.matrix td.jahrspalte {
    width: 22px; background: #fafbfc; font-weight: 700; font-size: 10px;
    text-transform: none; letter-spacing: 0; padding: 0;
}
/* Der Kopf traegt die vierstellige Jahreszahl waagrecht und brauchte bei
   10 Pixeln 23 von 22 Pixeln — sie war um ein Zeichen beschnitten, sobald die
   Tabelle sonst breit wurde. Neun Pixel wie bei den Tagesnummern daneben
   passen, ohne die Spalte zu verbreitern: jedes Pixel hier zaehlt 37-mal. */
table.matrix th.jahrspalte { font-size: 9px; }
/* Die Jahreszahl steht wie in der Vorlage seitlich, hier gedreht */
table.matrix td.jahrspalte span {
    display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
    letter-spacing: 2px;
}
table.matrix th.tagnummer {
    width: 21px; font-size: 9px; padding: 2px 0;
    text-transform: none; letter-spacing: 0; font-weight: 600;
}
table.matrix th.tagnummer.we { background: var(--wochenende); }
table.matrix td.zelle { font-size: 9px; font-weight: 700; }
/* Halber Tag: Das Kuerzel rueckt in die farbige Haelfte oben links. Sonst
   staende es zur Haelfte auf Weiss, und bei den dunklen Absenzfarben ist die
   gerechnete Schriftfarbe Weiss, also unsichtbar. */
table.matrix td.zelle.geteilt { text-align: left; vertical-align: top;
    font-size: 8px; letter-spacing: -0.3px;
    padding: 0 0 0 1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.matrix td.leer { background: var(--ui-calendar-empty); border-color: var(--linie); }
table.matrix td.bemerkung { width: 132px; text-align: right; padding: 0 5px; font-size: 11px; }
table.matrix th.bemerkung { width: 132px; }

/* Tagesnummern sind wie in der Vorlage ausgeblendet und zuschaltbar. */
table.matrix td.zelle::before { content: ""; font-size: 8px; color: #555; font-weight: 400; }
table.matrix.mit-tagesnummern td.zelle::before { content: attr(data-tag); }
table.matrix.mit-tagesnummern td.zelle .kuerzel { margin-left: 2px; }

/* Erscheint nur im Druck, etwa das Trennzeichen zwischen Kommen und Gehen. */
.nur-drucken { display: none; }

/* Hervorgehobener Hinweis auf einer Seite, gleiche Anmutung wie im Dialog. */
.hinweiskasten {
    margin-top: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.45;
    background: var(--hinweis-grund); border: 1px solid #e8d090;
    border-radius: 5px; color: var(--hinweis);
}
/* Der Verstoss (Stufe 2): roter Grund, roter Umriss ringsum, kräftig rote
   Schrift. Eigene Klasse statt «warnung», die sonst die gelbe Balkenschrift
   und nur die untere Linie mitbrachte. */
.hinweiskasten.rot { background: #FCE4E4; border-color: #E8B0B0; color: var(--minus); }

/* Hervorgehobener Hinweis im Dialog, etwa der zum zweiten Laufwerk bei der
   Datensicherung. Er darf nicht wie Fliesstext aussehen. */
.dialog-hinweis {
    margin-top: 12px; margin-bottom: 16px;
    padding: 10px 12px; font-size: 14px; line-height: 1.45;
    background: var(--hinweis-grund); border-radius: 3px;
}

.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.legende .eintrag { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.legende .feld {
    width: 22px; height: 14px; border: 1px solid rgba(0,0,0,.3); display: inline-block;
}

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

#quittung {
    position: fixed; right: 20px; bottom: 20px; z-index: 100;
    background: #1d2430; color: #fff; padding: 11px 20px;
    border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .2s, transform .2s; max-width: 420px;
}
#quittung.sichtbar { opacity: 1; transform: translateY(0); }
#quittung.fehler { background: var(--minus); }

/* Segment-Umschalter (zwei Links als eine Pille), etwa «Offen | Geschlossen».
   Ersetzt dort ein Auswahlfeld, wo dessen natives Dropdown stoert — auf der
   gedrehten Handy-Ansicht der Meldungen zeichnet das Betriebssystem es sonst
   hochkant ins Querbild. Die Umschaltung laeuft ueber die Adresse, ohne JS. */
.segmentwahl { display: inline-flex; border: 1px solid var(--linie-stark);
    border-radius: 8px; overflow: hidden; }
.segmentwahl a {
    padding: 7px 14px; text-decoration: none;
    color: var(--aktion); background: var(--karte);
    font-size: 14px; line-height: 1.2; white-space: nowrap;
}
.segmentwahl a + a { border-left: 1px solid var(--linie-stark); }
.segmentwahl a.aktiv { background: var(--aktion); color: #fff; }

/* Jahr-Schrittwaehler: die Jahreszahl zwischen zwei Pfeil-Links. Wie der
   Segment-Umschalter ein Ersatz fuer ein Auswahlfeld, dessen Dropdown auf der
   gedrehten Handy-Ansicht sonst stoert; laeuft ueber die Adresse, ohne JS. */
.jahrwahl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.jahrstepper { display: inline-flex; align-items: center;
    border: 1px solid var(--linie-stark); border-radius: 8px; overflow: hidden; }
.jahrstepper a, .jahrstepper .pfeil {
    padding: 6px 13px; text-decoration: none; color: var(--aktion);
    background: var(--karte); font-size: 18px; line-height: 1; }
.jahrstepper a:hover { background: var(--aktion-hell); }
.jahrstepper .pfeil.aus { color: var(--linie); cursor: default; }
.jahrstepper .jahrzahl {
    padding: 6px 14px; min-width: 58px; text-align: center;
    font-weight: 600; font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--linie-stark);
    border-right: 1px solid var(--linie-stark); }

/* ----------------------------------------------------------- Sonstiges */

.leise { color: var(--text-leise); }
.klein { font-size: 13px; }
.zahlen { font-family: var(--zahlen); }
.rechts { text-align: right; }
.abstand-oben { margin-top: 16px; }
.trennlinie { border: 0; border-top: 1px solid var(--linie); margin: 18px 0; }

/* Ein Schalter, der das Verhalten des ganzen Betriebs aendert: «Absenzen zuerst
   bewilligen». Zwischen gleich aussehenden Zahlenfeldern ging er unter. Ein
   getoenter Kasten mit fetter Beschriftung, Kaestchen und Text auf einer
   Zeile. */
.hauptschalter {
    background: var(--aktion-hell); border: 1px solid #b8cbe4; border-radius: 4px;
    padding: 10px 14px; margin-bottom: 12px;
}
.hauptschalter label.ankreuz {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.hauptschalter input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }
.hauptschalter .beschriftung { font-weight: 600; font-size: 15px; }
.hauptschalter .hilfe { margin: 0; }

.farbfeld { width: 26px; height: 20px; border: 1px solid var(--linie-stark);
            display: inline-block; vertical-align: middle; border-radius: 3px; }

/* Der Farbwaehler in den Absenzarten. Ohne Zutun zeichnet ihn das
   Betriebssystem mit einem klobigen Rahmen, der am iPhone wie «farbige
   Klammern» um den Farbfleck wirkt. Wir nehmen die Systemdarstellung weg und
   setzen einen sauberen, abgerundeten Farbfleck mit dünnem Rahmen. Das Menue
   zum Aendern bleibt das native und oeffnet wie gewohnt. */
input[type="color"] {
    -webkit-appearance: none; appearance: none;
    width: 44px; height: 30px; padding: 0;
    border: 1px solid var(--linie-stark); border-radius: 6px;
    background: none; cursor: pointer; vertical-align: middle;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 4px; }

/* ------------------------------------------------------------- Drucken */

/* ------------------------------------------------------------ Handy
 *
 * Die Anwendung wird auch am Telefon bedient. Zwei Dinge waren dort im Weg,
 * beide gemessen an einem Fenster von 375 Pixeln:
 *
 * 1. **Die Kopfzeile brauchte 279 von 812 Pixeln**, ein Drittel des
 *    Bildschirms, bevor irgendein Inhalt kam: die Navigation brach auf vier
 *    Zeilen um und die Kennzahlen standen dazwischen. Neu laeuft die
 *    Navigation in einer einzigen Zeile, die sich seitlich schieben laesst,
 *    und die Kennzahlen stehen darunter nebeneinander.
 *
 * 2. **Die Monatstabelle war 869 Pixel breit.** Ist, Soll, Differenz und
 *    Saldo lagen ausserhalb des Bildschirms, also genau das, wofuer man die
 *    Ansicht oeffnet. Am Telefon wird daraus je Tag eine Karte.
 *
 * Dazu: Eingabefelder mindestens 16 Pixel gross. Darunter zoomt iOS beim
 * Antippen in das Feld hinein und die Seite steht danach schief.
 */

@media (max-width: 720px) {
    body { font-size: 15px; }
    main { padding: 10px; }
    .karte { padding: 12px; margin-bottom: 12px; }

    /* Kopfzeile: Marke und Person in eine Zeile, klein. Die Navigation
       rutscht auf 375 Pixeln immer eine Zeile tiefer und rollt dort
       seitlich; gewischt wird ohne sichtbaren Rollbalken. */
    header.kopf { gap: 8px; padding: 8px 10px; }
    /* Ein langer Firmenname darf hier umbrechen. Abgeschnitten wird nichts:
       das gilt fuer Beschriftungen ueberall im Programm. */
    .marke { font-size: 15px; flex: 1 1 auto; flex-wrap: wrap; white-space: normal; }
    .kopfzahlen { gap: 8px; padding: 6px 10px; }
    .marke .person { margin-left: 6px; }

    .navi-rollbereich { flex: 0 0 100%; }
    nav.hauptnavigation { -webkit-overflow-scrolling: touch; }
    nav.hauptnavigation a { padding: 8px 12px; }

    .meldungsleiste-grund { padding: 8px 10px 0; }

    /* Die Kennzahlen der Kopfzeile nebeneinander, linksbuendig. */
    .kopfsaldo { text-align: left; flex: 1; min-width: 90px; }
    /* Die Beschriftung darf umbrechen, der Wert nicht. `.kopfsaldo` traegt
       weiter oben `white-space: nowrap`, damit «-1276:12» nicht mitten in
       der Zahl bricht; die Beschriftung erbte es. Auf Deutsch fiel das nie
       auf, «GLAZ-Saldo heute» passt in die 113 Pixel eines Drittels. «Saldo
       dell'orario flessibile oggi» braucht 169 und schob sich ueber die
       Nachbarin, sodass alle drei Beschriftungen ineinanderliefen. */
    .kopfsaldo .beschriftung {
        font-size: 10px; letter-spacing: 0;
        white-space: normal; line-height: 1.2;
    }
    .kopfsaldo .wert { font-size: 17px; }

    /* Genug Flaeche zum Antippen, und keine Felder, die iOS hineinzoomen.
       Aufgezaehlt statt pauschal: Ankreuzfelder und der Farbwaehler sollen
       ihre eigene Groesse behalten. */
    input[type="text"], input[type="number"], input[type="date"],
    input[type="email"], select, textarea {
        font-size: 16px; max-width: none;
    }
    input.kurz, .kalenderfeld input { max-width: 100%; }
    input.zeit { width: 84px; padding: 9px 6px; }
    button, .knopf { min-height: 40px; padding: 9px 14px; }
    button.winzig, .meldungsliste .knopf.winzig { min-height: 32px; }
    /* Der Linkknopf bleibt ein Link, bekommt aber eine Flaeche, die der
       Daumen trifft. Die 40 Pixel Hoehe der uebrigen Knoepfe wuerden die
       Tabellenzeile auseinanderziehen. */
    button.alslink { min-height: 0; padding: 6px 8px; font-size: 14px; }
    /* Genug Flaeche fuer den Daumen im Segment-Umschalter und im Jahrwaehler. */
    .segmentwahl a { padding: 10px 16px; font-size: 16px; }
    .jahrstepper a, .jahrstepper .pfeil { padding: 10px 16px; }
    .jahrstepper .jahrzahl { padding: 10px 14px; }

    /* Teil G: die neuen Ansichten ab 360 Pixel. Kein eigenes Layout,
       nur Felder untereinander statt nebeneinander. */
    .feldraster { grid-template-columns: 1fr; }
    textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
    .meldungsliste td, .meldungsliste th { padding: 6px 5px; }

    .spalten { gap: 12px; }
    .spalten > * { min-width: 0; flex-basis: 100%; }
    /* Untereinander gestapelt darf die letzte Kachel nicht mehr wachsen. */
    .spalten.gleich-lang > * > .karte:last-child { flex: 0 1 auto; }
    .kennzahlen { gap: 12px 18px; }

    /* Dialoge fuellen die Breite, die Knoepfe stehen untereinander. */
    .dialog { max-width: 100%; }
    .dialog-knoepfe { flex-direction: column-reverse; }
    .dialog-knoepfe button { width: 100%; }
}

/* ------------------------------------------- Meldungen erzwungen im Querformat
 *
 * Die Seite «Meldungen» traegt drei breite Tabellen und ist am Telefon nur im
 * Querformat brauchbar. Eine Webseite kann das Geraet nicht selbst drehen — die
 * Orientierungssperre verlangt Vollbild und fehlt auf dem iPhone ganz. Deshalb
 * wird der Inhalt selbst gedreht: haelt man das Telefon hochkant, erscheint die
 * Seite quer; dreht man es quer, ist sie es ohnehin. So bleibt sie immer im
 * Querformat und wechselt nie in die Hochkantansicht.
 *
 * Gedreht wird allein der Inhaltsrahmen, und dieser ist zugleich sein eigener
 * Rollbereich — dadurch klebt die Kopfzeile darin weiterhin oben. Der
 * Rueckfragedialog haengt an <body>, nicht am Rahmen, und wird eigens gedreht.
 * Greift nur hochkant; quer gehaltenes Telefon zeigt die Seite ohne Drehung.
 */
@media (max-width: 720px) and (orientation: portrait) {
    /* Nur die Meldungsseite wird ruhiggestellt. Das «overflow: hidden» gehoerte
       zuerst auch aufs <html>, ohne Bindung an die Seite — damit war auf JEDER
       Hochformat-Seite das senkrechte Scrollen tot. Es gilt jetzt nur, wo die
       Seite gedreht ist. */
    body.seite-meldungen { overflow: hidden; }
    html:has(body.seite-meldungen) { overflow: hidden; }

    body.seite-meldungen .rahmen-inhalt {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vh;
        height: 100vw;
        transform-origin: left top;
        transform: translateY(100vh) rotate(-90deg);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Die drei Listen muessen in den gedrehten Rahmen passen (100vh breit).
       Sonst ragt eine 955-px-Tabelle darueber hinaus, und weil der Rahmen
       overflow-x: hidden traegt, war ihr Anfang (Spalte «Mitarbeiter») nicht
       mehr erreichbar — «der Anfang von links abgeschnitten». `min-width: 0`
       hebt die feste Mindestbreite auf (die inline gesetzt ist, daher
       !important); mit table-layout:fixed verteilen sich die Spalten auf die
       Rahmenbreite, die Textspalte bricht um. Zeitraum und Absenzart geben
       etwas ab, damit «Was zu tun» genug Platz behaelt. */
    body.seite-meldungen .meldungsliste { min-width: 0 !important; }
    body.seite-meldungen .meldungsliste th:nth-child(2),
    body.seite-meldungen .meldungsliste td:nth-child(2) { width: 128px !important; }
    body.seite-meldungen .meldungsliste th:nth-child(3),
    body.seite-meldungen .meldungsliste td:nth-child(3) { width: 150px !important; }

    /* Erledigen, Genehmigen und Ablehnen: der Dialog haengt an <body> und wird
       deshalb eigens quergestellt, damit er zum gedrehten Inhalt passt. Die
       Flex-Zentrierung darin bleibt und mittet den Kasten im Querbild. */
    body.seite-meldungen .dialog-hintergrund {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 100vh;
        height: 100vw;
        transform: translate(-50%, -50%) rotate(-90deg);
    }
}

/* ------------------------------------------------ Monatstabelle am Handy
 *
 * Aus jeder Tabellenzeile wird eine Karte. Die Spaltentitel stehen im
 * Attribut data-spalte und erscheinen hier vor dem Wert; ohne sie waeren
 * vier Zahlen untereinander nicht zuzuordnen.
 */

@media (max-width: 720px) {
    table.tagesliste thead { display: none; }
    table.tagesliste, table.tagesliste tbody,
    table.tagesliste tr, table.tagesliste td { display: block; width: auto; }

    table.tagesliste tr {
        border: 1px solid var(--linie); border-radius: 6px;
        margin-bottom: 8px; padding: 8px 10px; background: var(--karte);
    }
    table.tagesliste td { border: 0; padding: 2px 0; text-align: left; }
    table.tagesliste td:empty { display: none; }

    /* Der Tag als Ueberschrift der Karte. */
    table.tagesliste td[data-spalte="Datum"] {
        font-weight: 700; font-size: 15px; display: inline-block;
    }
    table.tagesliste td[data-spalte="Tag"] {
        display: inline-block; margin-left: 6px; color: var(--text-leise);
    }

    /* Die vier Zahlen nebeneinander statt untereinander. */
    table.tagesliste td[data-spalte="Ist"],
    table.tagesliste td[data-spalte="Soll"],
    table.tagesliste td[data-spalte="Differenz"],
    table.tagesliste td[data-spalte="Saldo"] {
        display: inline-block; min-width: 72px; margin-right: 10px;
        font-family: var(--zahlen);
    }
    /* Die Abweichung Kurzarbeit reiht sich dort ein. Ueber die Klasse und
       nicht ueber data-spalte: der Titel ist uebersetzt und hiesse auf
       Franzoesisch anders.

       **Nur wenn sie etwas traegt.** An Tagen ohne Kurzarbeit ist die Zelle
       leer, und «td:empty» blendet leere Zellen aus. Diese Regel hat aber
       dieselbe Spezifitaet und steht weiter unten; ohne «:not(:empty)»
       gewann sie, und jeder Tag ohne Kurzarbeit bekam am Telefon die
       Beschriftung «Abweichung Kurzarbeit» vor nichts. */
    table.tagesliste td.kae-abweichung:not(:empty) {
        display: inline-block; min-width: 72px; margin-right: 10px;
        font-family: var(--zahlen);
    }
    table.tagesliste td[data-spalte]::before {
        content: attr(data-spalte) " ";
        font-family: var(--schrift); font-size: 11px;
        color: var(--text-leise); text-transform: uppercase;
        letter-spacing: .4px; margin-right: 4px;
    }
    table.tagesliste td[data-spalte="Datum"]::before,
    table.tagesliste td[data-spalte="Tag"]::before { content: ""; }

    /* Die Farbe gehoert an die Karte, nicht an die einzelnen Zellen: sonst
       ist nur ein Teil der Karte eingefaerbt und der Rest bleibt weiss. */
    table.tagesliste td { background: none !important; }
    /* Wochensumme und die Aufteilung «davon auf das Ueberzeitkonto» stehen im
       getoenten Kasten. Das Monatstotal NICHT: es steht schlicht wie eine
       Tageskarte, dafuer fett und mit Beschriftungen. */
    table.tagesliste tr.wochensumme, table.tagesliste tr.aufteilung {
        background: var(--aktion-hell); border-color: var(--aktion);
    }
    table.tagesliste tr.monatstotal { font-weight: 700; }
    table.tagesliste tr.monatstotal td[data-spalte]::before { font-weight: 400; }
    /* Der Uebertrag aufs Ueberzeitkonto bleibt im Kasten, aber kompakt. */
    table.tagesliste tr.aufteilung { padding: 6px 10px; font-size: 12px; }
    table.tagesliste tr.aufteilung td { padding: 0; }
    /* Der Tagessaldo ist die wichtigste Zahl der Karte: fett, in Gruen bzw.
       Rot (ueber .plus/.minus), damit die Zahlenzeile nicht zu schlicht wirkt. */
    table.tagesliste td[data-spalte="Saldo"] { font-weight: 700; }
    table.tagesliste tr.wochenende { background: var(--wochenende); }
    table.tagesliste tr.feiertag { background: #e4e4e4; }
    table.tagesliste tr.heute {
        background: var(--heute); border-left: 4px solid var(--aktion);
    }

    /* Der Knopf am Zeilenende steht neben den Zahlen, nicht darunter. */
    table.tagesliste td:last-child { display: inline-block; margin-top: 4px; }
    table.tagesliste td:last-child::before { content: ""; }

    /* Der waagrechte Rollbereich wird nicht mehr gebraucht. */
    .rollbar { overflow: visible; }

    /* Die Jahresmatrix wird am Telefon auf die Breite skaliert (jahr.html,
       jahrPassend). Eine CSS-`transform: scale` verkleinert aber nur die
       Darstellung, nicht die Layout-Breite — der Rahmen bliebe damit trotz
       `overflow-x: hidden` waagrecht «anfassbar» und schnappte nach dem
       Wischen zurueck. `touch-action: pan-y` laesst nur senkrechtes Wischen zu:
       die Matrix steht damit starr, die Seite scrollt weiterhin. */
    .matrix-wrap { touch-action: pan-y; overflow: hidden; }

    /* Der Personalienblock des Praesenzspiegels stand in drei Spalten mit je
       110 Pixeln Mindestbreite und schob die Seite 26 Pixel ueber den Rand:
       die ganze Seite liess sich seitlich verschieben, obwohl die Matrix in
       ihrem eigenen Rollbereich sitzt. Am Telefon zwei Spalten, ohne feste
       Breite. */
    .spiegel-personalien { grid-template-columns: 1fr 1fr; gap: 3px 12px; }
    .spiegel-personalien .feldname { min-width: 0; display: block; }

    /* Jede uebrige Tabelle rollt in sich selbst statt die ganze Seite
       seitlich zu verschieben. Ohne das liessen sich Ueberzeit, Absenzen und
       Einstellungen um bis zu 285 Pixel wegschieben, und die Kopfzeile
       wanderte mit.

       Ausgenommen sind die beiden, die es schon anders loesen: die
       Tagesliste wird am Telefon zu Karten, die Jahresmatrix sitzt in
       ihrem eigenen Rollbereich. */
    .karte table:not(.tagesliste):not(.matrix) {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }

    /* Die Meldungslisten rollen am Telefon in ihrem .rollbar (wie am Desktop),
       nicht als eigener Block. Ihre min-width machte die als Block gesetzte
       Tabelle sonst breiter als die Seite (955 Pixel in einer 360er Kachel)
       und verschob die ganze Seite samt klebender Kopfzeile waagrecht. Der
       .rollbar-fest rollt stattdessen selbst, die Tabelle bleibt darin. */
    .rollbar.rollbar-fest { overflow-x: auto; }
}

/* ----------------------------------------------------------- Drucken
 *
 * Ziel: ein Monat auf ein Blatt A4 hochkant, so wie im PDF.
 *
 * Zwei Dinge gingen hier schief und sind der Grund fuer die Regeln unten:
 *
 * 1. «page-break-inside: avoid» auf der Karte. Ist die Karte hoeher als eine
 *    Seite, kann der Browser den Umbruch nicht vermeiden und schiebt sie
 *    trotzdem auf die naechste Seite. Ergebnis: eine leere erste Seite und
 *    der Inhalt danach doch verteilt. Karten duerfen umbrechen, nur Zeilen
 *    nicht.
 * 2. Die Zeiten stehen in Eingabefeldern. Gedruckt werden daraus Kaesten mit
 *    Rahmen und fester Breite, und ein Monat passt nicht mehr aufs Blatt.
 *    Im Druck werden sie zu schlichtem Text.
 */

@media print {
    body { background: #fff; font-size: 11px; }
    header.kopf nav, .nicht-drucken, #quittung, button, .knopf { display: none !important; }
    /* Im Druck klebt nichts, und die Trennlinie steht unter beiden Reihen
       zusammen — sonst kostete die neue Kennzahlenzeile ein zweites Mal
       Rand, und der Monat muss auf EIN Blatt A4 hochkant passen. */
    header.kopf {
        border-bottom: 0; padding: 0; margin: 0;
        position: static; box-shadow: none;
    }
    /* Die Kennzahlen gehoeren aufs Blatt, aber ohne Kasten und linksbuendig:
       gedruckt liest man von links, nicht aus der Mitte. */
    .kopfzahlen {
        justify-content: flex-start; gap: 24px;
        padding: 0; border: 0; border-bottom: 1px solid #000;
        margin-bottom: 8px;
    }
    .kopfsaldo { text-align: left; }
    main { padding: 0; max-width: none; }
    .karte { border: 0; padding: 0; margin-bottom: 10px; page-break-inside: auto; }

    /* Nur Zeilen zusammenhalten, nicht ganze Bloecke. Der Tabellenkopf
       wiederholt sich, falls es doch einmal zwei Seiten werden. */
    tr, .kennzahl { page-break-inside: avoid; }
    thead { display: table-header-group; }

    /* Der waagrechte Rollbereich der Monatsansicht darf nichts abschneiden. */
    .rollbar { overflow: visible !important; }

    /* Eingabefelder als Text drucken. Die Breiten stehen als Attribut in der
       Vorlage und schlagen die Regel sonst, deshalb hier ueberall wichtig. */
    input[type="text"], input[type="number"], select, textarea {
        border: 0 !important; background: transparent !important;
        padding: 0 !important; box-shadow: none !important;
        width: auto !important; max-width: none !important;
        font-size: 10px !important; appearance: none; -webkit-appearance: none;
    }
    input.zeit { width: 38px !important; text-align: left; }
    .nur-drucken { display: inline !important; color: var(--text-leise); }
    input::placeholder { color: transparent !important; }

    /* Eng genug, dass ein ganzer Monat auf ein Blatt geht. Gemessen an einem
       vollen Monat mit zwei Segmenten an den meisten Tagen bleibt so noch
       Luft fuer ein drittes. */
    table { font-size: 9px; }
    th, td { padding: 0.5px 3px; }
    h2 { font-size: 14px; margin-bottom: 4px; }
    .zeitliste { gap: 2px; }
    .zeitpaar { gap: 1px; }
    .merker { padding: 0 3px; font-size: 8px; }
    .stillzeit-zeile { font-size: 8px; }

    /* Kein erzwungener Umbruch vor der Meldung an die Versicherung: sie
       passt gemessen mit aufs Blatt. Nur ihre Tabelle soll nicht mitten
       durchgeschnitten werden, falls es doch einmal eng wird. */
    .meldungskarte { page-break-inside: avoid; }

    table.matrix { font-size: 8px; }
    tr.wochenende td { background: #ececec !important; -webkit-print-color-adjust: exact; }
    td, th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4; margin: 10mm; }
}

/* Monate, die im laufenden Jahr noch nicht angebrochen sind */
tr.kuenftig td { color: var(--text-leise); background: #fafbfc; }


/* ------------------------------------------ Segment direkt in der Zeile */

.neues-segment {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 5px; border-radius: 5px;
    background: var(--aktion-hell); border: 1px solid var(--aktion);
}
input.inline-zeit {
    width: 70px; padding: 3px 4px; font-size: 13px;
    font-family: var(--zahlen); text-align: center;
}
input.inline-zeit::placeholder { font-family: var(--schrift); font-size: 11px; }

button.segment-neu {
    padding: 2px 9px; font-size: 13px; line-height: 1.4;
    border-style: dashed; color: var(--aktion);
}
button.segment-neu:hover { border-style: solid; }

/* ---------------------------------------------------- Pausenhinweis */

.warnung.pause {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border: 1px solid #e0b050; border-radius: 8px;
    margin: 0 0 18px; padding: 14px 18px;
}
.warnung.pause > span { flex: 1; min-width: 280px; }

/* ------------------------------------------------ Kalenderauswahl */

.kalenderfeld { position: relative; display: inline-block; }

.kalender {
    position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
    background: var(--karte); border: 1px solid var(--linie-stark);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    padding: 8px; width: 254px;
}

.kal-kopf {
    display: flex; align-items: center; gap: 2px;
    margin-bottom: 6px;
}
.kal-titel {
    flex: 1; text-align: center; font-weight: 600; font-size: 14px;
    white-space: nowrap;
}
button.kal-pfeil {
    padding: 3px 7px; font-size: 14px; line-height: 1;
    border-color: transparent; background: transparent; color: var(--text-leise);
}
button.kal-pfeil:hover { background: var(--aktion-hell); color: var(--aktion); }

.kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.kal-wochentag {
    text-align: center; font-size: 11px; font-weight: 600;
    color: var(--text-leise); padding: 3px 0;
}
.kal-wochentag.we { color: var(--minus); }

button.kal-tag {
    padding: 5px 0; font-size: 13px; text-align: center;
    border-color: transparent; background: transparent; border-radius: 4px;
}
button.kal-tag:hover { background: var(--aktion-hell); border-color: var(--aktion); }
button.kal-tag.we { color: var(--text-leise); }
button.kal-tag.heute { border-color: var(--aktion); font-weight: 700; }
button.kal-tag.gewaehlt {
    background: var(--aktion); border-color: var(--aktion);
    color: #fff; font-weight: 700;
}
.kal-tag.leer { visibility: hidden; }

.kal-fuss {
    display: flex; gap: 6px; margin-top: 7px;
    border-top: 1px solid var(--linie); padding-top: 7px;
}
button.kal-fussknopf { flex: 1; padding: 4px 8px; font-size: 12px; }
/* Der Weg aus dem Kalender heraus. Gleicher Rahmen wie «Heute», aber
   fett: er wurde uebersehen, und wer ihn nicht findet, klickt daneben. */
button.kal-fussknopf.betont { font-weight: 700; }

/* Die Zeile fuer einen eigenen Feiertag: Datum, Umfang, Bezeichnung, Knopf.
   Kein Feldraster, dort saessen alle in gleich breiten Spalten und der Knopf
   auf der Hoehe der Beschriftungen statt auf der der Felder. Ausgerichtet
   wird an der Grundlinie der Eingabefelder, deshalb flex-end. */
.feiertagzeile {
    display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end;
}
.feiertagzeile > label { margin-bottom: 0; }
.feiertagzeile > label.waechst { flex: 1; min-width: 220px; }
.feiertagzeile > button { margin-bottom: 1px; }

/* Die beiden Ankreuzfelder untereinander, ohne Rahmen des fieldset.

   Zusammen sind sie so hoch wie ein Eingabefeld daneben (2 x 18 = 36 Pixel).
   Da die ganze Zeile an der Unterkante ausgerichtet ist, liegt das Paar damit
   genau ueber dem Feld: «Vormittag» knapp ueber der Mitte, «Nachmittag»
   knapp darunter. Mit Abstand dazwischen rutschte es nach oben aus dem
   Feldband heraus. */
fieldset.feiertaghaelfte {
    border: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0;
}
fieldset.feiertaghaelfte legend { padding: 0; }
fieldset.feiertaghaelfte .wahl {
    font-size: 13px; white-space: nowrap;
    /* Ohne das eigene margin: 0 traegt jede Zeile die 12 Pixel, die jedes
       <label> von Haus aus hat, und das Paar rutscht aus dem Feldband. */
    height: 18px; line-height: 18px; align-items: center; margin: 0;
}
fieldset.feiertaghaelfte .wahl input[type="checkbox"] { width: 14px; height: 14px; }

/* Auf der Absenzseite sollen die Datumsfelder nicht die ganze Breite füllen */
.kalenderfeld input { max-width: 150px; }

/* Ein laufendes Segment zählt noch nicht als geleistet, das muss man sehen */
.hinweis-laeuft {
    background: var(--hinweis-grund); border: 1px solid #e0b050;
    border-radius: 5px; padding: 8px 10px; color: var(--hinweis); margin: 0;
}
input.zeit.laeuft-noch {
    background: var(--hinweis-grund); border-color: #e0b050;
}

/* ------------------------------------------- Rückfrage im Seitenstil

   Ersetzt confirm(). Der Browserdialog sieht wie eine Systemfehlermeldung
   aus; diese Rückfrage gehört sichtbar zur Anwendung. */

.dialog-hintergrund {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(20, 26, 36, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

.dialog {
    background: var(--karte);
    /* Ringsum derselbe duenne Rahmen. Der breite blaue Streifen oben sah aus
       wie eine Systemmeldung, dabei gehoert die Rueckfrage zur Seite. */
    border: 1px solid var(--linie-stark);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    padding: 22px 24px 18px;
    max-width: 460px; width: 100%;
}
.dialog.gefahr { border-color: var(--minus); }
.dialog.erfolg { border-color: var(--ui-success-text); }

/* Ein rundes Symbol oben; die Farbe steht fuer die Art der Meldung. */
.dialog-icon {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 2px auto 14px;
}
.dialog-icon svg { width: 26px; height: 26px; }
.dialog-icon.erfolg { background: var(--ui-success-bg); color: var(--ui-success-text); }
.dialog-icon.info { background: var(--aktion-hell); color: var(--aktion); }
.dialog-icon.fehler { background: #fdecec; color: var(--minus); }

/* Zentrierte Kurzmeldung (Symbol, Text, ein Knopf mittig). */
.dialog-zentriert .dialog-titel,
.dialog-zentriert .dialog-text { text-align: center; }
.dialog-zentriert .dialog-knoepfe { justify-content: center; }

.dialog-titel { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.dialog-text { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }

/* Das Feld stiess vorher direkt an die Knopfreihe; der Rahmen beruehrte
   «Abbrechen». Die Klasse steht am Element (input.), sonst gewinnen die
   320 Pixel der allgemeinen Feldregel und das Feld endet vor den Knoepfen,
   statt mit ihnen zu fluchten. */
input.dialog-feld { width: 100%; max-width: 100%; margin: 4px 0 18px; }

.dialog-knoepfe { display: flex; gap: 8px; justify-content: flex-end; }
.dialog-knoepfe button { min-width: 110px; }
button.gefahr.haupt {
    background: var(--minus); border-color: var(--minus); color: #fff;
}
button.gefahr.haupt:hover { background: #9c1a1a; border-color: #9c1a1a; }

/* -------------------------------------- Überzeit: das zweite Konto */

.warnung.ueberzeit { background: #eef3fa; border-color: #b8cbe4; color: var(--aktion); }
.warnung.ueberzeit strong { color: #16375c; }


/* Tage ohne ausreichende Mittagspause: der Hinweis steht als Knopf in der
   Segmentspalte. Kein farbiger Rand an der Zeile, der zeichnete sich an
   jeder Zelle ab und sah aus wie ein Spaltentrenner. */
button.pause-knopf {
    background: var(--hinweis-grund); border-color: #e0b050;
    color: var(--hinweis); font-weight: 600;
}
button.pause-knopf:hover { background: #ffeec2; border-color: var(--hinweis); }

.kopfsaldo .ueberzeit-wert { color: var(--aktion); }

/* Fusszeile der Monatsansicht: wohin die Differenz gegangen ist */
tfoot tr.aufteilung td {
    font-weight: 400; font-size: 12px; border-top: 0;
    background: #fafbfc; padding-top: 2px; padding-bottom: 6px;
}

/* ------------------------------------------ Grenzhinweise zum GLAZ-Saldo
 *
 * Bewusst in der Seitenmitte und nicht als Balken am Seitenkopf: wer weiter
 * unten im Monat arbeitet, sähe einen Balken oben gar nicht. Kein Kreuz zum
 * Wegklicken, es gibt nur den Weg über den Eintrag oder «Weiterarbeiten».
 */

.grenzhinweis-grund {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(20, 26, 36, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

.grenzhinweis {
    background: var(--karte);
    border: 1px solid var(--linie-stark);
    border-top: 5px solid var(--hinweis);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(20, 26, 36, .3);
    padding: 22px 26px;
    max-width: 620px;
    line-height: 1.5;
}
.grenzhinweis.unten { border-top-color: var(--minus); }

.grenzhinweis-titel {
    font-size: 17px; font-weight: 700; margin-bottom: 10px;
    color: #8a5200;
}
.grenzhinweis.unten .grenzhinweis-titel { color: var(--minus); }

.grenzhinweis p { margin: 0 0 10px; }
.grenzhinweis p.klein { color: var(--text-leise); }

.grenzhinweis-knoepfe {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 16px; flex-wrap: wrap;
}

@media print { .grenzhinweis-grund { display: none; } }

/* ------------------------------------------------ Jahresauswahl im Spiegel
 *
 * Mehrere Jahre gleichzeitig. Wer lange in der Firma ist, will sie
 * untereinander sehen statt zu blättern.
 */

.jahreswahl {
    display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
    padding: 8px 10px; margin-bottom: 12px;
    background: #fafbfc; border: 1px solid var(--linie); border-radius: 4px;
}
.jahreswahl .jahrfeld {
    display: flex; align-items: center; gap: 4px;
    margin: 0; font-size: 13px; font-family: var(--zahlen);
}
.jahreswahl .jahrfeld input { width: auto; margin: 0; }

/* Zwischen den Jahrestabellen etwas Luft, sonst kleben sie aneinander. */
.spiegel table.matrix { margin-bottom: 14px; }

/* ------------------------------------------- Verlauf der Anstellung
 *
 * Die Tabelle steht ueber die volle Breite und nicht in der schmalen
 * Spalte der Stammdaten. Dort war sie 513 Pixel breit in einer Kachel von
 * 414 und sprengte sie; eine Tabelle gehoert nie in eine Spalte, die zu
 * schmal fuer sie ist.
 *
 * Die Felder tragen eigene Breiten statt der globalen «kurz»-Breite: mit
 * ihr war das Datum um 34 Pixel abgeschnitten, das Pensum um 13 und die
 * Ferientage um 14 — aus «100» wurde «1(». Die Zahlen sind gemessen, nicht
 * geschaetzt, und enthalten die Pfeilchen der Zahlenfelder.
 */
.abschnitte td,
.abschnitte th        { padding-left: 4px; padding-right: 4px; }
.abschnitte input,
.abschnitte select    { min-width: 0; }
.abschnitte .f-datum  { width: 96px; }
.abschnitte .f-pensum { width: 64px; }
.abschnitte .f-tage   { width: 72px; }
.abschnitte select    { width: 62px; }

/* ------------------------------------------------------- Sprachwahl
 *
 * Oben rechts in der Marke, auf jeder Seite. Drei Kuerzel statt einer
 * Auswahlliste: bei drei Moeglichkeiten waere die Liste ein Klick zu viel,
 * und so ist die aktive Sprache auf einen Blick zu sehen.
 *
 * In den Einstellungen steht die Wahl ebenfalls, dort als erstes Feld der
 * Stammdaten. Weiter unten kaeme sie zu spaet.
 */
.sprachwahl { display: inline-flex; gap: 2px; flex: 0 0 auto; }
/* Knopf in der Kopfzeile, Verweis im Erststart-Assistenten: dort gibt es
   noch keine Person, an der sich etwas speichern liesse, die Wahl laedt die
   Seite in der gewaehlten Sprache neu. Aussehen soll beides gleich. */
.sprachwahl button, .sprachwahl a {
    min-height: 0; padding: 3px 7px; font-size: 11px; font-weight: 700;
    letter-spacing: .5px; border-radius: 4px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-leise); cursor: pointer;
    display: inline-block;
}
.sprachwahl button:hover, .sprachwahl a:hover {
    background: rgba(0,0,0,.05); color: var(--text);
}
.sprachwahl button.aktiv, .sprachwahl a.aktiv {
    background: var(--aktion); border-color: var(--aktion); color: #fff;
}
.marke { display: flex; align-items: baseline; gap: 8px; }

@media (max-width: 720px) {
    /* Am Telefon etwas mehr Flaeche fuer den Daumen, ohne die Marke
       auseinanderzuziehen. */
    .sprachwahl button, .sprachwahl a { padding: 5px 8px; font-size: 12px; }
}

/* Im Druck hat die Sprachwahl nichts zu suchen. */
@media print { .sprachwahl { display: none; } }
/* Ausschliesslich neue Elemente: keine Änderung bestehender Desktop-Regeln. */
.mobile-only { display: none; }

/* Desktop: gleiche Aktionsfarben, kompakte bestehende Anordnung. */
@media screen and (min-width: 769px) {
    :root { --aktion: var(--ui-deep-blue); --aktion-hell: var(--ui-pale-sky); }
    button:not(.kal-tag):not(.alslink), a.knopf {
        font-family: var(--schrift); border-radius: 8px;
    }
    button.haupt, .knopf.haupt { background: var(--ui-deep-blue); border-color: var(--ui-deep-blue); color: var(--ui-white); }
    button.haupt:hover, .knopf.haupt:hover { background: var(--ui-deep-blue); }
    table:not(.matrix) thead th,
    table:not(.matrix) tfoot td,
    table:not(.matrix) tr.wochensumme td,
    table:not(.matrix) tr.monatstotal td { background: var(--ui-pale-sky); }
    .segmentwahl a { background: var(--ui-pale-sky); color: var(--ui-deep-blue); }
    .segmentwahl a.aktiv { background: var(--ui-deep-blue); color: var(--ui-white); }
    .seite-meldungen .jahrwahl > label { margin: 0; }
    button[data-erledigt], button[data-genehmigen], button[data-ablehnen],
    button[data-beleg-fuer], button[data-erledigt]:hover,
    button[data-genehmigen]:hover, button[data-ablehnen]:hover,
    button[data-beleg-fuer]:hover { background: var(--ui-white); }
}

/* Gemeinsame Karten- und Warnfarben für Bildschirmansichten. */
@media screen {
    .karte, .jahreswahl { border-color: var(--ui-dust-denim); }
    .warnung.rot, .meldungsleiste.dringend { color: var(--ui-terracotta); background: var(--ui-danger-bg); border-color: var(--ui-terracotta); }
    .warnung.rot strong { color: var(--ui-terracotta); }
    .grenzhinweis, .grenzhinweis.unten { border: 0; border-radius: 14px; box-shadow: 0 0 0 1px #748cab40, 0 12px 40px #18314f30; }
    .grenzhinweis-titel, .grenzhinweis.unten .grenzhinweis-titel, .dialog.gefahr .dialog-titel { color: var(--ui-danger-title); }
    .dialog.gefahr { border: 0; box-shadow: 0 0 0 1px #748cab40, 0 12px 40px #18314f30; }
    .dialog-text:empty { display: none; }
    .dialog.gefahr .dialog-titel { margin-bottom: 20px; }
    button.gefahr.haupt, button.gefahr.haupt:hover { background: var(--ui-terracotta); border-color: var(--ui-terracotta); }
}

/* Wiederverwendbare Meldungen: Variante statt neuer Hex-Farben verwenden. */
.ui-meldung { padding: 12px 14px; border: 1px solid; border-radius: 10px; }
.ui-meldung--info { background: var(--ui-pale-sky); border-color: var(--ui-dust-denim); color: var(--ui-deep-blue); }
.ui-meldung--warnung { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning-text); }
.ui-meldung--fehler { background: var(--ui-danger-bg); border-color: var(--ui-terracotta); color: var(--ui-terracotta); }
.ui-meldung--erfolg { background: var(--ui-success-bg); border-color: var(--ui-success-text); color: var(--ui-success-text); }

/* Benutzerverwaltung: Informations- und Erfolgsmeldungen. */
.dialog.dialog-meldung { border: 0; box-shadow: var(--ui-dialog-shadow); }
.dialog-meldung .dialog-text { font-size: 16px; line-height: 1.5; }
.dialog-info .dialog-titel { color: var(--ui-dust-denim); font-size: 20px; font-weight: 700; }
.dialog-kopierzeile { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.dialog-kopierzeile code { font-family: var(--zahlen); font-size: 17px; overflow-wrap: anywhere; min-width: 0; }
.dialog-kopierzeile .dialog-kopieren { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; min-width: 36px; min-height: 36px; height: 36px; padding: 6px; color: var(--ui-deep-blue); background: var(--ui-white); border: 1px solid var(--ui-dust-denim); border-radius: 8px; }
.dialog-kopierstatus { display: block; font-size: 13px; color: var(--ui-deep-blue); margin-bottom: 12px; }

/* Status und Aktionen der erfassten Absenzen teilen dieselbe linke Kante. */
.absenz-status { text-align: left; }
.absenz-status button.alslink { padding-left: 0; padding-right: 0; margin-right: 0; text-align: left; }
.absenz-status .umbrechen { overflow-wrap: anywhere; }

/* Nur die kompakten Absenz-Löschbuttons rechts ausrichten. */
.absenz-status > button.winzig.gefahr { display: block; margin-left: auto; margin-right: 0; }

/* Personenauswahl und Lesehinweis teilen sich bei genügend Platz eine Zeile. */
.personenwahl-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.personenwahl-zeile .personenwahl { flex: 0 1 240px; margin: 0; }
.personenwahl-zeile .fremdansicht-hinweis { flex: 0 1 auto; width: fit-content; max-width: 100%; margin: 0; background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning-text); }