/*
 * ══════════════════════════════════════════════════════════════════════════
 *  LIBRA JOURNAL — das Aussehen aller Handy-Seiten.
 *
 *  Stempeluhr (/zeit), Belegerfassung (/zeit/quittung), Feierabend
 *  nachtragen (/zeit/korrektur) und später die Reise.
 *
 *  ═══ WARUM EINE EIGENE DATEI ═══
 *  Bis zum 08.09.2026 standen diese Regeln im <style>-Block der Stempeluhr.
 *  Die Belegseite benutzte dieselben Klassennamen — und bekam davon NICHTS
 *  ab, weil ein Style-Block nur in seiner eigenen Komponente landet. Sie sah
 *  deshalb roh und gedrängt aus, obwohl der Code richtig war. Genau so
 *  gemeldet: „die eingabemasken sind gecramped".
 *
 *  ═══ GEBAUT FÜRS HANDY ═══
 *  Eine Spalte. Fingergroße Ziele (mindestens 48 px hoch). Beschriftung
 *  IMMER über dem Feld, nie daneben — nebeneinander bricht auf einem
 *  375-px-Gerät um und sieht kaputt aus. Zwischen zwei Feldern steht so
 *  viel Luft, dass man beim Tippen nicht ins falsche greift.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ── Rahmen ─────────────────────────────────────────────────────────────── */

.zeit-seite {
    width: 100%;
    min-width: 0;
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

/* ══════════════════════════════════════════════════════════════════════
   BREITE SCHIRME UND QUERFORMAT (09.09.2026)

   Betreiberansage: „nutze die gesamte Breite des Bildschirms … kann man
   das auch drehbar machen oder zu kompliziert?"

   Nein, nicht kompliziert — aber auch nicht mit einer einzigen Zahl getan.
   Eine feste Spalte von 460 px ist für ein Handy im Hochformat genau
   richtig und auf einem gedrehten Handy, einem Tablet oder in der
   Windows-App eine schmale Säule mit viel Weiß daneben.

   Deshalb ab 700 px ein RASTER statt einer Spalte: die Karten füllen die
   Breite und rücken bei jeder Drehung von selbst neu. Ein Umschalter oder
   ein zweiter Satz Masken wäre dafür nicht nötig — und wäre auch die
   falsche Antwort, weil ihn jemand pflegen müsste.

   Die Kopfzeile geht über die ganze Breite; sonst stünde das Logo in der
   ersten Zelle und die Uhr rutschte daneben.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 760px) {
    .zeit-seite {
        max-width: 1060px;
        display: grid;
        /* MINDESTENS 420 px je Spur: damit entstehen höchstens ZWEI Spalten.
           Mit 330 px wurden es drei, und drei schmale Säulen sind auf einem
           Bildschirm keine Ordnung, sondern ein Suchbild (Betreiberansage
           09.09.2026: „im Browser sieht die Zeiterfassung nicht so schön
           sortiert aus wie auf dem Handy"). */
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        gap: 18px;
        align-items: start;
        padding: 20px 20px 56px;
    }
    /* Die Karten tragen ihren Abstand sonst selbst — im Raster macht das
       das gap, und beides zusammen ergäbe doppelte Lücken. */
    .zeit-seite > .zeit-karte { margin-bottom: 0; }
    .zeit-kopf { grid-column: 1 / -1; }

    /* Kopf, Leitsatz und Fuß gehören über die ganze Breite — sie gehören
       zu KEINER Spalte. */
    .zeit-seite > .zeit-satz,
    .zeit-seite > .zeit-fuss,
    .zeit-seite > .zeit-zurueck { grid-column: 1 / -1; }
}

/* Gedrehtes Handy: viel Breite, wenig Höhe. Der Kopf muss klein werden,
   sonst füllt das Logo den halben Schirm und die Knöpfe liegen unter der
   Kante. */
@media (orientation: landscape) and (max-height: 520px) {
    .zeit-kopf { margin: 4px 0 10px; }
    .zeit-logo { width: 120px; }
    .zeit-uhr { font-size: 30px; margin-top: 4px; }
    .zeit-karte { padding: 16px 16px; }
}

/* Oben links, klein, ohne Gewicht: ein Ausgang, kein Angebot. Am QR-Code in
   der Werkstatt erscheint er gar nicht erst. */
.zeit-zurueck {
    display: inline-block;
    margin: 2px 0 4px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--lc-border);
    background: #fff;
    color: #4a5566;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.zeit-zurueck:active { background: #eef2f7; }

.zeit-kopf { text-align: center; margin: 8px 0 20px; }

/* ═══ DAS BILD MUSS SICH AN DEN KASTEN HALTEN ═══
   .zeit-logo begrenzt den KASTEN, nicht das Bild darin. Auf den Seiten, wo
   das Logo als <div class="zeit-logo"><img …></div> steht, wuchs das Bild
   deshalb auf seine natürliche Größe und ragte über die Karte hinaus —
   am 09.09.2026 gemeldet: „das logo ist breiter als das panel". */
.zeit-logo { width: 170px; max-width: 60%; display: inline-block; }
.zeit-logo img { width: 100%; height: auto; display: block; }
.zeit-uhr {
    font-size: 44px; font-weight: 700; letter-spacing: 1px;
    color: var(--lc-text); font-variant-numeric: tabular-nums; margin-top: 10px;
}
.zeit-datum { color: var(--lc-muted); font-size: 14px; margin-top: 2px; }

.zeit-karte {
    background: var(--lc-surface);
    border: 1px solid var(--lc-border);
    border-radius: 18px;
    box-shadow: var(--lc-shadow);
    padding: 22px 20px;
    margin-bottom: 16px;
}
.zeit-karte h2 { margin: 0 0 10px; font-size: 21px; }
.zeit-karte-schmal { padding: 14px !important; }
.zeit-karte-hinweis { border: 2px solid var(--lc-primary); }

.zeit-lade { text-align: center; color: var(--lc-muted); padding: 28px 0; }
.zeit-hinweis { color: var(--lc-muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; }
.zeit-name { font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 16px; }

/* ── Felder ─────────────────────────────────────────────────────────────
   Der Teil, der „gecramped" war. Drei Änderungen: mehr Abstand zwischen
   den Feldern, größere und dunklere Beschriftung, höhere Eingabefelder. */

.zeit-feld { display: block; margin-bottom: 20px; }
.zeit-feld:last-of-type { margin-bottom: 16px; }

.zeit-feld > span {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #55606e;          /* dunkler als vorher: die Beschriftung ist
                                keine Nebensache, sie sagt, was hier hin soll */
    margin-bottom: 8px;
}

.zeit-eingabe {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 15px;      /* 48 px hoch — Fingermaß */
    font-size: 17px;
    line-height: 1.3;
    border: 1px solid var(--lc-border);
    border-radius: 12px;
    background: #fff;
    color: var(--lc-text);
    -webkit-appearance: none;   /* iOS macht sonst eigene Rundungen */
    appearance: none;
}
.zeit-eingabe:focus {
    outline: 2px solid var(--lc-primary);
    outline-offset: 1px;
    border-color: var(--lc-primary);
}
/* Auswahlfelder brauchen Platz für den Pfeil, sonst klebt der Text daran. */
select.zeit-eingabe {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}
/* Mehrzeiliger Text — für Beschreibungen, die länger sind als drei Wörter. */
textarea.zeit-eingabe { min-height: 92px; resize: vertical; line-height: 1.5; }

.zeit-code { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-size: 22px; }

/* Der erklärende Kasten unter einem Feld. Er gehört SICHTBAR zum Feld
   darüber, deshalb kein zusätzlicher Abstand nach oben. */
.zeit-beispiel {
    font-size: 13px; line-height: 1.5;
    margin-top: 8px; padding: 10px 12px;
    background: #eff6ff; border-radius: 10px; color: #1e3a8a;
}
.zeit-beispiel em { font-style: normal; font-weight: 600; }
.zeit-beispiel-still { background: #f6f8fa; color: var(--lc-muted); }

/* ── Schaltflächen ──────────────────────────────────────────────────────
   Ein Knopf ist hier das Ende einer Handlung, nicht ein Kästchen. Weicher
   Radius, sanfter Schatten, spürbarer Druckzustand. */

.zeit-knopf {
    width: 100%;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    padding: 18px 0;
    min-height: 58px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
    transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.zeit-knopf:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }
.zeit-knopf:disabled { opacity: .5; box-shadow: none; transform: none; cursor: default; }
.zeit-knopf + .zeit-knopf { margin-top: 10px; }
.zeit-knopf .ic { font-size: 15px; opacity: .85; }

.zeit-knopf-blau { background: var(--lc-primary); }
.zeit-knopf-gruen { background: var(--lc-green); }
.zeit-knopf-rot { background: var(--lc-red); }
.zeit-knopf-grau { background: #64748b; font-size: 16px; padding: 15px 0; min-height: 50px; }
/* Der stille Zweitknopf: erreichbar, aber er drängt sich nicht auf. */
.zeit-knopf-still {
    background: #eef1f5; color: #455060;
    font-size: 16px; padding: 15px 0; min-height: 50px; box-shadow: none;
}
.zeit-knopf-still:active { background: #e2e7ee; }

.zeit-knopfpaar { display: flex; flex-direction: column; gap: 10px; }
/* Der erwartete Knopf ist groß, der andere bleibt erreichbar — ein
   vergessener Stempel muss nachholbar sein, ohne den Chef zu fragen. */
.zeit-knopf.gross { padding: 26px 0; font-size: 23px; min-height: 76px; }
.zeit-knopf.klein { padding: 13px 0; font-size: 16px; min-height: 48px; opacity: .82; box-shadow: none; }

/* Beleg und Reise: gleich breite Nebenwege unter der Hauptsache. */
.zeit-extra { display: flex; gap: 12px; }
.zeit-extraknopf {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 8px; border-radius: 14px; border: 1px solid #dde2e9;
    background: #f7f9fb; color: #2b3442; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.zeit-extraknopf:active { background: #eef2f7; }
.zeit-extraknopf .sinn { font-size: 26px; line-height: 1; }
.zeit-extraknopf .wort { font-size: 14.5px; font-weight: 600; }

/* ── Werkzeugmenü (Startseite) ───────────────────────────────────────────
   Zeilen statt Kacheln. Betreiberansage 09.09.2026: die Stempeluhr soll
   wirklich nur die Uhr sein, alles andere darunter in einem Menü.

   Die Zeile ist gut 60 px hoch — die Größe, die ein Daumen im Gehen sicher
   trifft, ohne dass fünf Einträge eine ganze Bildschirmhöhe brauchen. Der
   Trenner läuft durch, das Symbol sitzt in einer eigenen Kachel: so liest
   die Liste als EINE Gruppe und nicht als fünf einzelne Kästen. */

.zeit-menuekopf { margin: 0 0 4px; }

.zeit-menue { display: flex; flex-direction: column; }

.zeit-menuezeile {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 2px; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--lc-border);
    -webkit-tap-highlight-color: transparent;
}
.zeit-menuezeile:last-child { border-bottom: 0; }
button.zeit-menuezeile { width:100%; text-align:left; font:inherit; cursor:pointer; background:transparent; border:0; border-bottom:1px solid #e8edf3; }
.zeit-menuezeile:active { background: #f1f5f9; border-radius: 10px; }

.zeit-menuezeile .sinn {
    flex: 0 0 42px; height: 42px; border-radius: 12px;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 1;
}
.zeit-menuezeile .text { flex: 1; min-width: 0; display: block; }
.zeit-menuezeile .wort { display: block; font-size: 16px; font-weight: 600; color: #1e293b; }
.zeit-menuezeile .dazu {
    display: block; font-size: 12.5px; color: var(--lc-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeit-menuezeile .pfeil { flex: 0 0 auto; font-size: 22px; color: #cbd5e1; line-height: 1; }

/* ── Rückmeldungen ──────────────────────────────────────────────────────── */

.zeit-meldung {
    border-radius: 12px; padding: 13px 15px; margin-bottom: 16px;
    font-size: 15px; line-height: 1.45; text-align: center;
}
.zeit-meldung.ok { background: #dcfce7; color: #14532d; }
.zeit-meldung.warn { background: #fef3c7; color: #78350f; }
.zeit-fehler {
    background: #fee2e2; color: #7f1d1d; border-radius: 12px;
    padding: 13px 15px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.45;
}

/* ── Zähler, Stand, Kalender (Stempeluhr) ───────────────────────────────── */

.zeit-zaehler { text-align: center; margin: 4px 0 16px; padding: 14px 10px;
                background: #f1f5f9; border-radius: 16px; }
.zeit-zaehler.laeuft { background: #ecfdf5; }
.zeit-zaehler-wert { font-size: 38px; font-weight: 700; letter-spacing: 1px;
                     font-variant-numeric: tabular-nums; color: var(--lc-text); line-height: 1.1; }
.zeit-zaehler.laeuft .zeit-zaehler-wert { color: #047857; }
.zeit-zaehler-text { font-size: 13px; color: var(--lc-muted); margin-top: 4px; }
.zeit-aktueller-reisestatus { display: block; font-size: 16px; color: var(--lc-text); margin-bottom: 5px; }

.zeit-abschnitte { margin: 8px 0 4px; }
.zeit-abschnitt { display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
                  font-variant-numeric: tabular-nums; }
.zeit-abschnitt .von { min-width: 74px; }
.zeit-abschnitt .bis { flex: 1; color: var(--lc-muted); }
.zeit-abschnitt .dauer { font-weight: 600; }
.zeit-abschnitt.summe { border-top: 1px solid var(--lc-border); margin-top: 6px; padding-top: 6px; }
.zeit-abschnitt.gearbeitet .von,
.zeit-abschnitt.gearbeitet .dauer { font-weight: 700; }
.zeit-abschnitt .dauer.minus { color: var(--lc-red); }
.zeit-abschnitt .dauer.plus { color: #047857; }

/* Festes Raster statt Umbruch: auf einem 375-px-Handy sprang der fünfte
   Knopf sonst in eine eigene Zeile und sah aus wie der wichtigste. */
.zeit-stunden { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.zeit-stundenknopf { padding: 13px 0; font-size: 15px; min-height: 46px;
                     border: 1px solid var(--lc-border); border-radius: 10px; background: #fff;
                     color: var(--lc-text); cursor: pointer; }
.zeit-stundenknopf.an { background: var(--lc-primary); border-color: var(--lc-primary);
                        color: #fff; font-weight: 600; }

.zeit-stand { display: flex; margin-top: 20px; border-top: 1px solid var(--lc-border); padding-top: 16px; }
.zeit-stand-teil { flex: 1; text-align: center; }
.zeit-stand-teil .wert { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zeit-stand-teil .was { font-size: 12px; color: var(--lc-muted); margin-top: 3px; }
.wert.minus, .minus { color: var(--lc-red); }
.wert.plus, .plus { color: var(--lc-green); }

.zeit-monatskopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.zeit-monatsname { font-weight: 600; font-size: 17px; }
.zeit-pfeil { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--lc-border);
              background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--lc-text); }
.zeit-pfeil:disabled { opacity: .3; }

.zeit-kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.zeit-wochentag { text-align: center; font-size: 11px; color: var(--lc-muted); padding-bottom: 4px; }
.zeit-tag { aspect-ratio: 1; border-radius: 9px; background: #f8fafc; border: 1px solid transparent;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            cursor: pointer; }
.zeit-tag.leer { background: transparent; cursor: default; }
.zeit-tag .nr { font-size: 12px; color: var(--lc-muted); line-height: 1; }
.zeit-tag .std { font-size: 11px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.zeit-tag.voll { background: #dcfce7; }
.zeit-tag.wenig { background: #fef3c7; }
.zeit-tag.frei { background: #eef2f7; }
.zeit-tag.urlaub { background: #dbeafe; }
.zeit-tag.krank { background: #fce7f3; }
.zeit-tag.feiertag { background: #ede9fe; }
.zeit-tag.fehlt { background: #fee2e2; }
.zeit-tag.heute { border-color: var(--lc-primary); border-width: 2px; }

.zeit-tagdetail { margin-top: 14px; padding: 14px; background: #f8fafc; border-radius: 12px; font-size: 14.5px; }
.zeit-tagdetail > div { margin-top: 5px; }
.zeit-spur { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.zeit-spurpunkt { background: #fff; border: 1px solid var(--lc-border); border-radius: 7px;
                  padding: 3px 8px; font-size: 12.5px; }
.zeit-fehltag { color: var(--lc-red); }
/* Eine Erklärung, keine Warnung: Geschäftsführer „Soll = Ist", übernommene Zeiten (09.09.2026). */
.zeit-erklaerung { color: var(--lc-muted); font-size: 13px; }

.zeit-monatssumme { margin-top: 16px; border-top: 1px solid var(--lc-border); padding-top: 14px; font-size: 15px; }
.zeit-monatssumme > div { display: flex; justify-content: space-between; padding: 4px 0; }
.zeit-monatssumme span { color: var(--lc-muted); }
.zeit-fuss { text-align: center; color: var(--lc-muted); font-size: 12px; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
 *  BELEGERFASSUNG (/zeit/quittung)
 * ══════════════════════════════════════════════════════════════════════════ */

.qu-titel { font-size: 21px; font-weight: 700; color: var(--lc-text); margin-top: 8px; }
/* Unsichtbar, aber GERENDERT und ANSPRECHBAR. Zwei Dinge sind hier wichtig:
   kein display:none (Safari oeffnet fuer ein nicht gerendertes Feld keinen
   Dateidialog, auch nicht ueber sein Label), und KEIN pointer-events:none —
   das stand hier bis zum 10.09.2026 und ist beim Label-Weg ein unnoetiges
   Risiko. Bei 1 px und opacity 0 faengt das Feld ohnehin keinen Fingertipp. */
.qu-versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qu-gross { font-size: 20px; padding: 26px 16px; min-height: 84px; }

.qu-bild { border-radius: 14px; overflow: hidden; background: #11131a; margin-bottom: 18px; }
.qu-bild img { display: block; width: 100%; max-height: 46vh; object-fit: contain; }
.qu-bild-fuss { font-size: 11.5px; color: #97a1ad; padding: 8px 10px; text-align: center; }

.qu-liest { background: #eff6ff; color: #1e3a8a; border-radius: 12px; padding: 12px 14px;
            margin-bottom: 16px; font-size: 14.5px; text-align: center; }

/* Betrag und Währung in einer Zeile — gleiche Höhe, an der Grundlinie
   ausgerichtet, damit es nicht wie zwei fremde Felder aussieht. */
.qu-betragzeile { display: flex; gap: 10px; align-items: stretch; }
.qu-zahl { flex: 1; font-size: 26px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.qu-waehrung { width: 116px; flex: none; font-weight: 600; }

.qu-erkannt { color: #55606e; }
.qu-warn { background: #fef3c7 !important; color: #92400e !important; }

.qu-liste { margin-top: 24px; border-top: 1px solid var(--lc-border); padding-top: 14px; }
.qu-liste-kopf { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
                 color: var(--lc-muted); margin-bottom: 10px; font-weight: 600; }
.qu-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px;
            align-items: baseline; padding: 9px 0; border-bottom: 1px solid #f0f2f5; font-size: 14.5px; }
.qu-nr { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 12px; color: var(--lc-muted); }
.qu-betrag { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.qu-zweck { grid-column: 2; color: #55606e; font-size: 13px; }
.qu-stand { grid-column: 3; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
            background: #eef1f5; color: #55606e; justify-self: end; }
.qu-stand.offen { background: #fef3c7; color: #92400e; }
.qu-stand.gut { background: #dcfce7; color: #166534; }
.qu-stand.schlecht { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════════════════
 *  FEIERABEND NACHTRAGEN (/zeit/korrektur)
 * ══════════════════════════════════════════════════════════════════════════ */

.zk-titel { font-size: 21px; font-weight: 700; color: var(--lc-text); margin-top: 8px; }
.zk-name { font-size: 20px; font-weight: 700; color: var(--lc-text); }
.zk-tag { color: var(--lc-muted); font-size: 14.5px; margin-bottom: 18px; }
.zk-lage { background: #f5f7fa; border-radius: 14px; padding: 14px 16px; margin-bottom: 6px; }
.zk-zeile { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.zk-zeile .was { color: #55606e; font-size: 14.5px; }
.zk-zeile .wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.zk-zeile.schlecht .wert { color: var(--lc-red); }
.zk-zone { font-size: 12px; color: var(--lc-muted); margin-top: 8px; }
.zk-uhr { font-size: 28px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.zk-gut { background: #ecfdf5; color: #065f46; border-radius: 14px; padding: 16px; margin-bottom: 14px;
          font-size: 15px; line-height: 1.5; }

/* ── Sehr schmale Geräte ────────────────────────────────────────────────
   Ab hier wird der Rand knapp; lieber die Ränder verkleinern als den
   Inhalt zusammenzuschieben. */
@media (max-width: 360px) {
    .zeit-seite { padding: 12px 12px 40px; }
    .zeit-karte { padding: 18px 15px; }
    .qu-waehrung { width: 100px; }
    .qu-zahl { font-size: 23px; }
}

/* ══════════════════════════════════════════════════════════════════════
   EIGENBELEG — das Ausrufezeichen in der Mitarbeiter-App.
   (Betreiberauftrag 08.09.2026)

   Die Karte ist die einzige auf der Seite mit einem WARMEN Rand. Das ist
   Absicht: sie steht zwischen lauter blauen und grauen Karten und muss
   auf einem Handydisplay im Vorbeigehen auffallen, ohne dass jemand
   liest. Rot wäre falsch — es ist kein Fehler, nur eine offene Frage.
   ══════════════════════════════════════════════════════════════════════ */

.zeit-karte-ruf { border: 2px solid #f59e0b; background: #fffbeb; }
.zeit-karte-ruf h2 { display: flex; align-items: center; gap: 10px; color: #78350f; }

.zeit-ruf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #f59e0b; color: #fff;
    font-weight: 700; font-size: 20px; line-height: 1;
    flex: 0 0 auto;
}

/* Eine Abbuchung. Sie steht auf WEISS in der warmen Karte, damit mehrere
   davon nicht zu einer Fläche verschwimmen. */
.zeit-eb {
    background: var(--lc-surface);
    border: 1px solid #fcd34d;
    border-radius: 14px;
    padding: 14px 14px 6px;
    margin-bottom: 14px;
}
.zeit-eb:last-of-type { margin-bottom: 6px; }

.zeit-eb-kopf { display: flex; align-items: baseline; gap: 10px; }
.zeit-eb-text { font-weight: 600; font-size: 15px; line-height: 1.35; word-break: break-word; }
.zeit-eb-zahl { margin-left: auto; font-weight: 700; font-size: 16px; white-space: nowrap; }
.zeit-eb-datum { color: var(--lc-muted); font-size: 13px; margin-top: 2px; }

/* Die drei Gründe als große Flächen — sie werden im Stehen mit dem
   Daumen getroffen, nicht mit einer Maus. */
.zeit-eb-gruende { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.zeit-eb-grund {
    flex: 1 1 auto; min-width: 120px; min-height: 46px;
    border: 1.5px solid var(--lc-border); background: var(--lc-surface);
    border-radius: 12px; padding: 10px 12px;
    font-size: 14.5px; cursor: pointer; color: inherit;
}
.zeit-eb-grund:hover { border-color: #f59e0b; }
.zeit-eb-grund.an { background: #f59e0b; border-color: #f59e0b; color: #fff; font-weight: 600; }

.zeit-eb-feld { margin-top: 10px; }

/* Das Häkchen für den Feierabend nach Mitternacht (Korrekturlink). */
.zk-folgetag { display: flex; align-items: center; gap: 10px; margin: -8px 0 20px;
               font-size: 14.5px; cursor: pointer; }
.zk-folgetag input { width: 20px; height: 20px; flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════
   MEINE BELEGE — die Liste am Handy (/zeit/belege).

   Sie ist zum NACHSEHEN da, nicht zum Blättern: „habe ich den Zettel in
   der Hand schon fotografiert?" Deshalb steht auf jeder Zeile nur, was
   man auf dem Zettel selbst wiedererkennt — Verkäufer, Datum, Betrag —
   und links das Bild als Miniatur. Alles andere ist klein.
   ══════════════════════════════════════════════════════════════════════ */

.bl-summe {
    display: flex; gap: 10px; margin: 4px 0 18px;
}
.bl-summe > div {
    flex: 1; background: var(--lc-bg); border-radius: 12px;
    padding: 12px 14px; text-align: center;
}
.bl-summe .zahl { display: block; font-size: 20px; font-weight: 700; }
.bl-summe .wort { display: block; font-size: 12.5px; color: var(--lc-muted); margin-top: 2px; }

.bl-monat { padding: 14px 14px 6px !important; }
.bl-monatskopf {
    display: flex; align-items: baseline; gap: 10px;
    font-weight: 600; font-size: 15px;
    padding-bottom: 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--lc-border);
}
.bl-monatssumme { margin-left: auto; font-variant-numeric: tabular-nums; }

.bl-zeile {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid var(--lc-border);
}
.bl-zeile:last-child { border-bottom: 0; }
.bl-zeile.fragt { background: #fff7ed; border-radius: 10px; padding: 12px 10px; }

/* Das Bild kommt erst auf Wunsch — siehe Belege.razor. */
.bl-zeigen {
    margin-top: 8px; border: 1px solid var(--lc-border); background: var(--lc-surface);
    border-radius: 9px; padding: 7px 14px; font-size: 13px; cursor: pointer;
    color: var(--lc-muted); min-height: 36px;
}
.bl-zeigen:hover { color: inherit; border-color: var(--lc-primary); }
.bl-foto { margin-top: 10px; }
.bl-foto img {
    width: 100%; max-height: 420px; object-fit: contain;
    border-radius: 10px; background: #eef2f7; display: block;
}
.bl-fotofuss { display: flex; gap: 14px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.bl-zu { border: 0; background: transparent; color: var(--lc-muted); cursor: pointer;
         font-size: 12.5px; padding: 4px 0; margin-left: auto; }

.bl-mitte { flex: 1; min-width: 0; }
/* Der Verkäufer darf umbrechen statt abgeschnitten zu werden — an ihm
   erkennt man den Zettel wieder, ein halber Name hilft nicht. */
.bl-wer { font-weight: 600; font-size: 15px; line-height: 1.3; word-break: break-word; }
.bl-klein { font-size: 12.5px; color: var(--lc-muted); margin-top: 2px; }

.bl-rechts { flex: 0 0 auto; text-align: right; display: flex;
             flex-direction: column; align-items: flex-end; gap: 6px; }
.bl-betrag { font-weight: 700; font-size: 16px; white-space: nowrap;
             font-variant-numeric: tabular-nums; }
.bl-fremd { font-size: 12px; color: var(--lc-muted); white-space: nowrap; }

/* Löschen: erst fragen, dann tun. Am Handy sind die Finger breiter als
   ein Mülleimersymbol. */
.bl-weg { border: 0; background: transparent; cursor: pointer;
          font-size: 19px; line-height: 1; padding: 4px 6px; opacity: .5; }
.bl-weg:hover, .bl-weg:active { opacity: 1; }
.bl-fest { font-size: 15px; opacity: .45; padding: 4px 6px; }
.bl-fragen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 260px; }
.bl-fragen p { flex-basis: 100%; margin: 0 0 4px; text-align: left; font-size: 13px; line-height: 1.4; }
.bl-zeile.fragt { flex-wrap: wrap; }
.bl-zeile.fragt .bl-rechts { flex-basis: 100%; }
.bl-ja, .bl-nein {
    border: 0; border-radius: 9px; padding: 8px 12px;
    font-size: 13.5px; cursor: pointer; min-height: 38px;
}
.bl-ja { background: var(--lc-red, #dc2626); color: #fff; font-weight: 600; }
.bl-nein { background: #e2e8f0; color: #334155; }

/* ══════════════════════════════════════════════════════════════════════
   DIE REISE (/zeit/reise).

   Bedient am Flughafen, im Auto vor der Abfahrt, im Hotelzimmer um halb
   zwölf. Deshalb: große Flächen, wenig Text, und ganz oben immer die
   Antwort auf „was gilt gerade?".
   ══════════════════════════════════════════════════════════════════════ */

.rs-ziel { font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 4px; }

/* Der jetzige Zustand — das Erste, was man sieht. */
.rs-jetzt { text-align: center; margin: 14px 0 18px; }
.rs-jetzt .was {
    display: inline-block; background: var(--lc-primary); color: #fff;
    border-radius: 999px; padding: 8px 20px; font-size: 17px; font-weight: 600;
}
.rs-jetzt .seit { color: var(--lc-muted); font-size: 14px; margin-top: 8px; }

.rs-zahlen { display: flex; gap: 8px; }
.rs-zahlen > div { flex: 1; background: var(--lc-bg); border-radius: 12px;
                   padding: 12px 6px; text-align: center; }
.rs-zahlen .zahl { display: block; font-size: 18px; font-weight: 700;
                   font-variant-numeric: tabular-nums; }
.rs-zahlen .wort { display: block; font-size: 12px; color: var(--lc-muted); margin-top: 2px; }

/* Die Schritte. Zwei Spalten am Handy, große Trefferflächen —
   sie werden im Stehen mit dem Daumen bedient. */
.rs-schritte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-schritt {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 104px; padding: 14px 8px;
    border: 1.5px solid var(--lc-border); background: var(--lc-surface);
    border-radius: 14px; cursor: pointer; color: inherit; text-align: center;
}
.rs-schritt:hover { border-color: var(--lc-primary); }
.rs-schritt .sinn { font-size: 26px; line-height: 1; }
.rs-schritt .wort { font-size: 14.5px; font-weight: 600; }
.rs-schritt .erklaerung { font-size: 11px; color: var(--lc-muted); line-height: 1.3; }
.rs-schritt.gruen { border-color: var(--lc-green); }
.rs-schritt.gruen .wort { color: var(--lc-green); }
.rs-schritt.blau { border-color: var(--lc-primary); }
.rs-schritt.blau .wort { color: var(--lc-primary); }

/* Verlauf und frühere Reisen */
.rs-zeile { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
            border-bottom: 1px solid var(--lc-border); font-size: 14px; }
.rs-zeile:last-child { border-bottom: 0; }
.rs-zeit { color: var(--lc-muted); font-size: 13px; white-space: nowrap;
           font-variant-numeric: tabular-nums; }
.rs-was { flex: 1; min-width: 0; }
.rs-dauer { color: var(--lc-muted); white-space: nowrap;
            font-variant-numeric: tabular-nums; }

/* Belege */
.rs-beleg { display: flex; align-items: center; gap: 10px; padding: 10px 0;
            border-bottom: 1px solid var(--lc-border); }
.rs-beleg.vorschlag { opacity: .8; }
.rs-beleg-text { flex: 1; min-width: 0; }
.rs-beleg-text .wer { font-weight: 600; font-size: 14.5px; word-break: break-word; }
.rs-beleg-text .klein { font-size: 12.5px; color: var(--lc-muted); }
.rs-beleg-zahl { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-beleg-weg, .rs-beleg-dazu {
    border: 0; background: transparent; cursor: pointer; font-size: 19px;
    line-height: 1; padding: 6px 4px; opacity: .55;
}
.rs-beleg-weg:hover { opacity: 1; color: #dc2626; }
.rs-beleg-dazu { color: var(--lc-green); opacity: .8; }
.rs-beleg-dazu:hover { opacity: 1; }
.rs-belegsumme { text-align: right; font-weight: 600; padding: 10px 0 4px; }
.rs-vorschlag-kopf { font-size: 12.5px; color: var(--lc-muted);
                     margin: 16px 0 4px; padding-top: 12px;
                     border-top: 1px dashed var(--lc-border); }

/* Die Übersicht vor dem Abgeben */
.rs-uebersicht { margin: 8px 0 18px; }
.rs-uebersicht > div { display: flex; justify-content: space-between; gap: 12px;
                       padding: 7px 0; border-bottom: 1px solid var(--lc-border);
                       font-size: 14px; }
.rs-uebersicht > div:last-child { border-bottom: 0; }
.rs-uebersicht span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.zeit-haken { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px;
              font-size: 14.5px; cursor: pointer; }
.zeit-haken input { width: 20px; height: 20px; flex: 0 0 auto; }

@media (max-width: 360px) {
    .rs-schritte { grid-template-columns: 1fr; }
}

/* Die Summen nach Bezahlart. Drei Zahlen, drei Richtungen — deshalb
   untereinander mit Beschriftung und nicht als Kacheln nebeneinander:
   „Auslagen 240,00 €" allein sagt niemandem, ob das Geld kommt oder geht. */
.bl-summen { margin: 4px 0 16px; }
.bl-summe-zeile {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--lc-border); font-size: 14px;
}
.bl-summe-zeile .wort { color: var(--lc-muted); }
.bl-summe-zeile .zahl { font-weight: 600; white-space: nowrap;
                        font-variant-numeric: tabular-nums; }
.bl-summe-zeile.aus .zahl { color: var(--lc-green); }
.bl-summe-zeile.priv .zahl { color: var(--lc-red); }
.bl-summe-zeile.ergebnis {
    border-bottom: 0; border-top: 2px solid var(--lc-border);
    margin-top: 2px; padding-top: 11px; font-size: 15.5px;
}
.bl-summe-zeile.ergebnis .wort { color: inherit; font-weight: 600; }
.bl-summe-zeile.ergebnis .zahl { font-size: 18px; font-weight: 700; }
.bl-summe-fuss { color: var(--lc-muted); font-size: 12.5px; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   DIE SCHMALE KOPFLEISTE DER UNTERSEITEN (09.09.2026)

   Betreiberansage: „das logo braucht da im prinzip gar nicht mehr so groß
   hin.. eher klein oder ganz weg.. was du optisch besser findest."

   Entschieden: auf den Unterseiten GANZ WEG. Ein Logo sagt dem, der schon
   in der App ist, nichts — er weiß, wessen Programm das ist. Was er nicht
   weiß, ist, auf welcher Seite er gelandet ist. Der Platz geht deshalb an
   den SEITENNAMEN, und die gewonnene Höhe (rund 80 px) an die Knöpfe: auf
   einem Handy ist die Bildschirmhöhe das Knappste, was es gibt.

   Auf der Stempeluhr bleibt das Logo. Die hängt am QR-Code in der Werkstatt
   und ist oft das Erste, was jemand von diesem Programm sieht.

   Der Zurück-Pfeil steht IMMER links — er ist an jeder Stelle derselbe
   Griff (Betreiberansage 09.09.2026: „einmal ist der zurück button oben
   links einmal oben mittig. am besten immer oben links machen").
   ══════════════════════════════════════════════════════════════════════ */

.zeit-leiste {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 16px;
    min-height: 44px;
}
.zeit-leiste .zeit-zurueck {
    margin: 0;
    flex: 0 0 auto;
    padding: 9px 16px;
    font-size: 17px;
    line-height: 1;
}
.zeit-leiste-titel {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    word-break: break-word;
}

/* Auch wenn jemand den Pfeil später wieder in .zeit-kopf setzt: er bleibt
   links. Der Kopf ist zentriert, ein Kind davon wäre es sonst auch. */
.zeit-kopf { position: relative; }
.zeit-kopf > .zeit-zurueck { position: absolute; left: 0; top: 0; }

@media (min-width: 700px) {
    .zeit-leiste { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════
   DER LEITSATZ (09.09.2026).

   „Besser ist eine Messung. Kein Versprechen." — Betreiberansage, als
   Ersatz für „we control it".

   Zwei Zeilen statt einer: die Pause zwischen den Sätzen ist der Satz.
   Leise gesetzt — er soll beim tausendsten Mal noch erträglich sein.
   ══════════════════════════════════════════════════════════════════════ */
.zeit-satz {
    text-align: center;
    margin: 26px 0 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lc-muted);
    letter-spacing: .02em;
}
.zeit-satz span { display: block; }
.zeit-satz span + span { color: #64748b; font-weight: 500; }

@media (min-width: 700px) {
    .zeit-satz, .zeit-fuss { grid-column: 1 / -1; }
}

/* Die Vorschau der Abrechnung — die Zahlen, die auch im PDF stehen. */
.rs-geld { margin: 14px 0 4px; }
.rs-geld > div { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lc-border);
                 font-size: 14px; }
.rs-geld > div:last-child { border-bottom: 0; }
.rs-geld em { display: block; font-style: normal; font-size: 11.5px;
              color: var(--lc-muted); margin-top: 1px; }
.rs-geld span:last-child { font-weight: 600; white-space: nowrap;
                           font-variant-numeric: tabular-nums; }
.rs-geld .ergebnis { border-top: 2px solid var(--lc-border); border-bottom: 0;
                     margin-top: 4px; padding-top: 12px; }
.rs-geld .ergebnis span:first-child { font-weight: 600; font-size: 15px; }
.rs-geld .ergebnis span:last-child { font-size: 19px; font-weight: 700; color: var(--lc-green); }

/* Vorbehalte: was Geld kostet oder die Abrechnung aufhält. Warm, nicht rot —
   es ist keine Störung, sondern eine offene Frage. */
.rs-vorbehalt { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px;
                padding: 10px 12px; margin: 10px 0; font-size: 13px;
                color: #78350f; line-height: 1.5; }
.rs-vorbehalt > div + div { margin-top: 4px; }

/* Die Tageskorrektur ist zugeklappt: sie wird selten gebraucht, und ein
   Feld, das immer offensteht, lädt zum Ändern ein, wo nichts zu ändern ist. */
.rs-korrektur { margin: 14px 0 4px; }
.rs-aufklappen { border: 0; background: transparent; cursor: pointer; padding: 8px 0;
                 font-size: 13.5px; color: var(--lc-muted); display: flex;
                 align-items: center; gap: 8px; }
.rs-aufklappen:hover { color: inherit; }
.rs-marke { background: #fef3c7; color: #78350f; border-radius: 5px;
            padding: 1px 7px; font-size: 11.5px; }
.rs-korrekturfeld { padding-top: 8px; }
.rs-zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .rs-zweispalt { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   NACHSCHLAGEN (/zeit/suche) — Kollegen, Kunden, Kontakte.

   Wer eine Nummer sucht, will sie ANRUFEN, nicht abschreiben. Deshalb ist
   jede Nummer ein Verweis und keine Zeichenkette, und die Trefferliste ist
   kurz gehalten: zwanzig Treffer sind auf einem Handy keine Antwort,
   sondern eine zweite Suche.
   ══════════════════════════════════════════════════════════════════════ */

.su-satz { padding: 12px 0; border-bottom: 1px solid var(--lc-border); }
.su-satz:last-child { border-bottom: 0; padding-bottom: 0; }
.su-name { font-weight: 600; font-size: 16px; line-height: 1.3;
           display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.su-kuerzel { background: #eef2f7; color: #475569; border-radius: 5px;
              padding: 1px 7px; font-size: 11.5px; font-weight: 600; }

.su-zeile { display: flex; align-items: baseline; gap: 10px; margin-top: 5px; font-size: 14px; }
.su-zeile .was { flex: 0 0 92px; color: var(--lc-muted); font-size: 12.5px; }
.su-zeile .wert { min-width: 0; word-break: break-word; }

/* Die Nummer als Ziel für den Daumen — nicht als Text zum Abtippen. */
.su-tel { color: var(--lc-primary); text-decoration: none; font-weight: 500;
          padding: 3px 0; display: inline-block; }
.su-tel:active { text-decoration: underline; }

/* Die Wache nach dem Foto (siehe quittung.js). Warm, nicht rot: es ist
   kein Absturz, sondern eine Verbindung, die kurz weg war. */
.qu-wache {
    margin-top: 16px; padding: 14px;
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px;
}
.qu-wache-text { font-size: 14px; line-height: 1.5; color: #78350f; margin-bottom: 12px; }
.qu-wache .zeit-knopf { margin-top: 8px; }
.qu-fortschritt { padding: 14px; margin-bottom: 14px; border-radius: 12px; background: #eaf1ff; border: 1px solid #adc8ff; }
.qu-fortschritt .qu-wache-text { color: #234a80; margin: 0; }
#quStatus .qu-wache { margin: 0 0 14px; }
.qu-neu { margin: 0 0 12px; }
.qu-bearbeiten { grid-column: 1 / -1; }
.qu-pdf { display:grid; gap:10px; padding:16px; border:1px solid #d6dce8; border-radius:10px; margin:12px 0; overflow-wrap:anywhere; }
.qu-pdf-inline { display:block; width:100%; height:440px; border:0; }
.qu-pdf-marke { display:block; padding:16px; text-align:center; }
.qu-editor-schatten { position: fixed; inset: 0; z-index: 1400; background: #11182788; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: left; }
.qu-editor { width: min(680px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; margin: 0; }
.qu-editor-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qu-editor-kopf h2 { margin: 0; }
.qu-editor-bild { width: 100%; max-height: 40vh; object-fit: contain; }
.qu-editor-aktionen { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }

/* ── Rückgängig auf der Reiseseite ───────────────────────────────────────
   Der Notausgang, nicht der Weg: unter den Knöpfen, grau, klein. Wer sich
   vertan hat, findet ihn; wer richtig gedrückt hat, liest darüber hinweg.
   (Betreiberansage 09.09.2026: „jeden solchen Klick wieder rückgängig
   machen … und z.B. die Reise fortsetzen.") */

.rs-zurueck {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--lc-border);
    font-size: 13px; color: var(--lc-muted);
}
.rs-ruecknahme {
    flex: 0 0 auto; border: 1px solid #dde2e9; background: #f7f9fb;
    color: #475569; border-radius: 10px; padding: 8px 13px;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.rs-ruecknahme:active { background: #eef2f7; }
.rs-ruecknahme:disabled { opacity: .5; }

.rs-fortsetzen .text {
    font-size: 14px; line-height: 1.5; color: var(--lc-muted); margin-bottom: 14px;
}
.rs-fortsetzen .text strong { display: block; color: #1e293b; font-size: 15.5px; margin-bottom: 3px; }

/* ── Fehlende Erkennung, Uhrzeit ─────────────────────────────────────────
   Betreiberansage 09.09.2026: eine kleine ROTE Warnung, wenn Betrag oder
   Händler nicht vom Beleg gelesen werden konnten. Klein, weil es kein
   Fehler ist — eine Bitte. Rot, weil ein leeres Feld sonst aussieht wie
   eines, das man noch nicht angesehen hat. */

.qu-fehlt {
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
    border-radius: 10px; padding: 9px 12px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.45;
}

/* Datum und Uhrzeit stehen nebeneinander — sie beantworten EINE Frage
   („wann war das?") und sollen nicht als zwei Schritte gelesen werden. */
.qu-datumzeile { display: flex; gap: 12px; }
.qu-datumzeile > label { flex: 1; min-width: 0; }
.qu-leise { font-style: normal; font-weight: 400; color: var(--lc-muted); font-size: 12px; }

/* ── Mein Blatt (/zeit/ich) ─────────────────────────────────────────────── */

.ich-bildkarte { text-align: center; }

.ich-bild {
    width: 110px; height: 110px; margin: 4px auto 12px;
    border-radius: 50%; overflow: hidden;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
}
.ich-bild img { width: 100%; height: 100%; object-fit: cover; }
.ich-bild .initialen { font-size: 38px; font-weight: 600; color: #94a3b8; letter-spacing: .02em; }

.ich-name { font-size: 19px; font-weight: 600; }
.ich-kuerzel { font-size: 13px; color: var(--lc-muted); margin-top: 2px; }

.ich-bildknoepfe { display: flex; gap: 10px; margin-top: 16px; }
.ich-bildknoepfe > * { flex: 1; margin: 0; }

/* Das Dateifeld sitzt UNSICHTBAR im Knopf: ein <label> mit einem
   versteckten <input type=file> darin ist der einzige Weg, der auf jedem
   Telefon zuverlässig die Kamera öffnet. */
.ich-dateiknopf { position: relative; overflow: hidden; cursor: pointer; display: block; }
.ich-dateiknopf input[type=file] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}

.ich-entfernen {
    margin-top: 10px; background: none; border: 0; color: var(--lc-muted);
    font-size: 13px; text-decoration: underline; cursor: pointer;
}

.ich-leise { font-style: normal; font-weight: 400; color: var(--lc-muted); font-size: 12.5px; }

.ich-fest {
    background: #f8fafc; border: 1px solid var(--lc-border); border-radius: 12px;
    padding: 12px 14px; margin: 4px 0 20px;
}
.ich-fest .was { display: block; font-size: 12px; color: var(--lc-muted); }
.ich-fest .wert { display: block; font-size: 15px; font-weight: 500; margin: 2px 0 4px;
                  word-break: break-all; }
.ich-fest .dazu { display: block; font-size: 12px; color: var(--lc-muted); }

/* Der Datenschutzhinweis — klein und unten, wie der Betreiber es wollte. */
.ich-schutz {
    font-size: 11.5px; line-height: 1.55; color: var(--lc-muted);
    margin: 2px 4px 18px; text-align: left;
}

/* ── Adressbuch: Bearbeiten und Anlegen ─────────────────────────────────── */

.su-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.su-avatar {
    flex: 0 0 34px; height: 34px; border-radius: 50%; overflow: hidden;
    background: #eef2f7; border: 1px solid #e2e8f0; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.su-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.su-avatar .ini { font-size: 12.5px; font-weight: 600; color: #94a3b8; }

.su-kopf .su-name { flex: 1; min-width: 0; }

.su-stift {
    flex: 0 0 auto; border: 1px solid #dde2e9; background: #f7f9fb; color: #475569;
    border-radius: 9px; width: 34px; height: 34px; font-size: 15px; cursor: pointer;
}
.su-stift:active { background: #eef2f7; }

.su-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lc-border); }
.su-formhinweis { font-size: 12px; color: var(--lc-muted); line-height: 1.5; margin: -6px 0 14px; }

.ko-knoepfe { display: flex; gap: 10px; }
.ko-knoepfe > * { flex: 1; margin: 0; }

.ko-wahl {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid var(--lc-border); background: #f8fafc; border-radius: 11px;
    padding: 11px 13px; margin-bottom: 8px;
}
.ko-wahl:active { background: #eef2f7; }
.ko-wahl .firma { display: block; font-size: 15px; font-weight: 600; color: #1e293b; }
.ko-wahl .ort { display: block; font-size: 12.5px; color: var(--lc-muted); margin-top: 2px; }

.ko-gewaehlt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 11px;
    padding: 10px 13px; margin-bottom: 18px; font-weight: 600; color: #1e3a8a;
}
.ko-gewaehlt button {
    border: 0; background: none; color: #2563eb; font-size: 13px;
    text-decoration: underline; cursor: pointer; flex: 0 0 auto;
}

/* ── Kopfzeile der Stempeluhr: Bild, Name, Stift ────────────────────────── */

.zeit-kopfzeile { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.zeit-kopfzeile .zeit-name { flex: 1; min-width: 0; margin: 0; text-align: left; }

.zeit-ichbild {
    flex: 0 0 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: #eef2f7; border: 1px solid #e2e8f0; position: relative;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.zeit-ichbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zeit-ichbild .kuerzelchen { font-size: 14px; font-weight: 600; color: #94a3b8; }

.zeit-stift {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid #dde2e9; background: #f7f9fb; color: #475569;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; text-decoration: none;
}
.zeit-stift:active { background: #eef2f7; }

/* Die freundliche Bitte um die eigenen Nummern. Blau statt gelb: es ist
   keine Warnung, sondern eine Einladung. */
.zeit-karte-bitte { border: 1px solid #bfdbfe; background: #f8fbff; }

/* ── Frühere Reisen: antippbar bis zur Abrechnung ───────────────────────── */

.rs-waehlbar {
    width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit;
}
.rs-waehlbar:active { background: #f1f5f9; }
.rs-fertig { opacity: .55; }

.rs-zurueckzur {
    display: block; margin: 0 0 12px; border: 0; background: none; cursor: pointer;
    color: var(--lc-muted); font-size: 13.5px; padding: 4px 2px;
}

/* ── Rückmeldung (Journal, /zeit/melden) ─────────────────────────────────
   Drei Arten gleichberechtigt: Fehler, Vorschlag, Frage. Betreiberansage
   09.09.2026 — „Es könnten auch Vorschläge sein nicht nur bugs." Und das
   Bild ist freiwillig: ein Pflichtfoto hätte jede Meldung verhindert, die
   man im Vorbeigehen tippt. */

.me-arten { display: flex; gap: 8px; margin-bottom: 18px; }
.me-art {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 6px; border-radius: 12px; border: 1px solid #dde2e9;
    background: #f7f9fb; color: #475569; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.me-art.an { border-color: var(--lc-primary); background: #eff6ff; color: var(--lc-primary); }
.me-art .sinn { font-size: 22px; line-height: 1; }
.me-art .wort { font-size: 13px; font-weight: 600; }

.me-text { min-height: 130px; resize: vertical; font-family: inherit; line-height: 1.5; }

.me-bildzeile { display: flex; gap: 10px; margin-top: 4px; }
.me-bildzeile > * { flex: 1; margin: 0; }
.me-freiwillig { font-size: 12px; color: var(--lc-muted); margin: 8px 0 14px; text-align: center; }

.me-bilder { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.me-bild { position: relative; }
.me-bild img { height: 110px; width: auto; border-radius: 9px; border: 1px solid var(--lc-border); display: block; }
.me-bild button {
    position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--lc-border); background: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}

.me-absender { font-size: 12px; color: var(--lc-muted); text-align: center; margin-top: 12px; }

.me-zeile {
    display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--lc-border); font-size: 13.5px;
}
.me-zeile:last-child { border-bottom: 0; }
.me-zeile .datum { flex: 0 0 46px; color: var(--lc-muted); font-size: 12.5px; }
.me-zeile .was { flex: 1; min-width: 0; }
.me-zeile .art { font-weight: 600; margin-right: 5px; }
.me-zeile .stand { flex: 0 0 auto; font-size: 11.5px; color: var(--lc-muted); }
.me-zeile .stand.ok { color: #15803d; }
.me-zeile .stand.warn { color: #b45309; }

/* ── Zuschneiderahmen (bild.js) ──────────────────────────────────────────
   Betreiberansage 09.09.2026: „bild aufnehmen sollte noch mit einem rahmen
   auszuschneiden gehen." Ein Selbstporträt aus der Frontkamera ist hochkant
   und zeigt halb die Decke; ein rundes Bild daraus ohne Zuschnitt trifft
   das Gesicht nie.

   Der Rahmen IST die Bühne: alles, was man sieht, landet im Bild. Das
   erspart die Erklärung, welcher Teil gemeint ist. */

.lc-zuschnitt {
    position: fixed; inset: 0; z-index: 3000; background: #0f172a;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 16px;
}
.lc-zuschnitt-buehne {
    border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 20px 50px rgba(0,0,0,.5);
    line-height: 0; touch-action: none;
}
.lc-zuschnitt-buehne canvas { display: block; cursor: grab; touch-action: none; }
.lc-zuschnitt-buehne canvas:active { cursor: grabbing; }

.lc-zuschnitt-leiste { width: min(520px, 100%); display: flex; flex-direction: column; gap: 14px; }
.lc-zuschnitt-regler { width: 100%; }
.lc-zuschnitt-knoepfe { display: flex; gap: 10px; }
.lc-zuschnitt-knoepfe > * { flex: 1; margin: 0; }

/* Der Weg zu ALLEN freien Belegen — eingeklappt, damit er die kurze
   Vorschlagsliste nicht zuschüttet (Betreiberansage 09.09.2026:
   „kann ich bitte auch nachträglich noch Quittungen zu Reisen
   hinzufügen wenn ich möchte"). */
.rs-mehrbelege {
    display: block; width: 100%; margin: 10px 0 4px; padding: 10px;
    border: 1px dashed var(--lc-border); border-radius: 11px;
    background: none; color: var(--lc-muted); font-size: 13.5px; cursor: pointer;
}
.rs-mehrbelege:active { background: #f1f5f9; }

/* ── Laufende Reise auf der Startseite ───────────────────────────────────
   Betreiberansage 09.09.2026: „während ich eine Reise mache sollte das auch
   auf der Titelseite im Journal sichtbar sein."

   GRÜN und nicht grau: das ist ein laufender Zustand, kein Menüpunkt. Eine
   Reise, die man vergisst, zählt weiter — und aus zwei Tagen werden neun. */

.zeit-reiselaeuft {
    display: flex; align-items: center; gap: 13px; text-decoration: none;
    border: 1px solid #a7f3d0; background: #f0fdf4; color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.zeit-reiselaeuft:active { background: #dcfce7; }
.zeit-reiselaeuft .sinn {
    flex: 0 0 42px; height: 42px; border-radius: 12px;
    background: #dcfce7; border: 1px solid #a7f3d0;
    display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1;
}
.zeit-reiselaeuft .text { flex: 1; min-width: 0; }
.zeit-reiselaeuft .wort {
    display: block; font-size: 15.5px; font-weight: 600; color: #14532d;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeit-reiselaeuft .dazu { display: block; font-size: 12.5px; color: #166534; margin-top: 2px; }
.zeit-reiselaeuft .pfeil { flex: 0 0 auto; font-size: 22px; color: #86efac; line-height: 1; }

/* ── Bearbeitungsschirm im Adressbuch ────────────────────────────────────
   Betreiberansage 09.09.2026: „Kontakt editieren sollte eigenen frischen
   Screen öffnen, nicht so on the flow in der Liste." Der Kopf zeigt, WEN
   man gerade ändert — das ist der ganze Unterschied zum Formular mitten
   in der Trefferliste. */

.ko-schirmkopf {
    display: flex; align-items: center; gap: 13px;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--lc-border);
}
.ko-schirmname { font-size: 18px; font-weight: 600; color: #1e293b; }
.ko-schirmwas { font-size: 12.5px; color: var(--lc-muted); margin-top: 2px; }

.su-avatar.gross { flex: 0 0 48px; height: 48px; }
.su-avatar.gross .ini { font-size: 16px; }

/* Löschen steht ABGESETZT unten und in Grau — es ist der seltenste Weg
   auf dieser Seite und darf nicht neben „Speichern" um Aufmerksamkeit
   konkurrieren. Rot wird erst die Bestätigung. */
.ko-loeschen {
    display: block; width: 100%; margin-top: 22px; padding: 11px;
    border: 1px solid var(--lc-border); border-radius: 11px;
    background: none; color: var(--lc-muted); font-size: 13.5px; cursor: pointer;
}
.ko-loeschen:active { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.ko-loeschfrage {
    margin-top: 22px; padding: 15px; border-radius: 12px;
    background: #fef2f2; border: 1px solid #fecaca;
}
.ko-loeschfrage .frage { font-size: 15.5px; font-weight: 600; color: #b91c1c; margin-bottom: 5px; }
.ko-loeschfrage .dazu { font-size: 12.5px; color: #7f1d1d; line-height: 1.5; margin-bottom: 14px; }

/* Rückgängig und Widerrufen stehen NEBENEINANDER — sie sind Hin- und
   Rückweg desselben Vorgangs (Betreiberansage 09.09.2026: „neben
   Rückgängig auch Widerrufen … damit man nicht alles ausversehen löscht"). */
.rs-ruecknahmen { display: flex; gap: 8px; flex: 0 0 auto; }

/* ── Filter über Listen (Belege, Reisen) ─────────────────────────────────
   Betreiberansage 09.09.2026: „die Liste der Belege muss filterbar sein
   nach vernünftigen Kategorien" und „Reisen müssen auch filterbar sein …
   default immer nur der aktuelle Monat".

   Zwei Spalten am Handy, damit vier Auswahlfelder nicht vier Zeilen
   brauchen — Filter sind Beiwerk und dürfen die Liste nicht verdrängen. */

.bl-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.bl-filter .zeit-feld { margin-bottom: 6px; }
.bl-filter .zeit-feld > span { font-size: 12px; }
.bl-filter .zeit-eingabe { padding: 9px 10px; font-size: 14px; }

.bl-filterweg {
    display: block; width: 100%; margin: 4px 0 14px; padding: 9px;
    border: 1px dashed var(--lc-border); border-radius: 10px;
    background: none; color: var(--lc-muted); font-size: 13px; cursor: pointer;
}
.bl-filterweg:active { background: #f1f5f9; }

/* ── Zwei benannte Spalten auf der Stempeluhr ────────────────────────────
   Betreiberansage 09.09.2026: „im Browser sieht die Zeiterfassung nicht so
   schön sortiert aus wie auf dem Handy."

   Am Handy sind das zwei schlichte Blöcke untereinander — die Reihenfolge
   ist exakt dieselbe wie vorher. Erst ab 760 px stehen sie nebeneinander:

     LINKS  — was man TUT (Uhr und alles, was Aufmerksamkeit verlangt)
     RECHTS — was man NACHSCHLÄGT (Werkzeuge, Monat)

   Bewusst KEIN automatisches Raster mehr für diese Seite: das verteilte
   die Karten nach Platz statt nach Bedeutung, und die Stempeluhr stand
   dann neben der Monatsübersicht. */

.zeit-spalten { display: block; }
.zeit-spalte { display: block; }

@media (min-width: 760px) {
    /* Der Kasten spannt sich über beide Spuren des Elternrasters und teilt
       sich darin selbst auf — so bleibt das Raster für die anderen
       Journal-Seiten unangetastet. */
    .zeit-spalten {
        grid-column: 1 / -1;
        display: grid;
        /* Links etwas breiter: dort steht der große Knopf, den man trifft. */
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }
    /* Innerhalb einer Spalte behalten die Karten ihren eigenen Abstand —
       hier gibt es kein gap, das ihn ersetzen würde. */
    .zeit-spalte > .zeit-karte,
    .zeit-spalte > .zeit-reiselaeuft { margin-bottom: 18px; }
    .zeit-spalte > *:last-child { margin-bottom: 0; }
}

/* Auf einem sehr breiten Schirm nicht ins Uferlose laufen: mehr als etwa
   1060 px macht die Zeilen nur länger, nicht lesbarer. */
@media (min-width: 1200px) {
    .zeit-seite { max-width: 1060px; }
}

/* „Alles gespeichert" steht dort, wo sonst der Speichern-Knopf stünde —
   die Stelle bleibt besetzt, damit die Seite beim Tippen nicht springt
   (Betreiberansage 09.09.2026: „Speichern-Button nur wenn was geändert
   wurde"). */
.rs-gespeichert {
    text-align: center; padding: 13px; border-radius: 12px;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    font-size: 14px; font-weight: 600;
}

/* ── Servicefälle im Journal (09.09.2026) ────────────────────────────────
   Betreiberansage: „Servicefälle muss man aufrufen und suchen, filtern
   können … dort kann man Dokumente hochladen, einsehen oder Einträge
   machen, sonst nichts." */

.sj-schalter { display: flex; flex-direction: column; gap: 8px; }

/* Eine Fallzeile ist ein Knopf, kein Kasten: sie führt irgendwohin, und
   das soll man sehen, ohne es zu lesen. */
.sj-zeile {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-bottom: 1px solid var(--lc-border);
    padding: 12px 2px; font: inherit; color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.sj-zeile:last-child { border-bottom: 0; }
.sj-zeile:active { background: #f1f5f9; border-radius: 10px; }
.sj-zeile .kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sj-zeile .nr { font-weight: 700; font-size: 14.5px; color: #1e293b; }
.sj-zeile .prio {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 2px 7px; border-radius: 20px; background: #fef3c7; color: #92400e;
}
.sj-zeile .prio.p1 { background: #fee2e2; color: #b91c1c; }
.sj-zeile .archiv {
    font-size: 10.5px; padding: 2px 7px; border-radius: 20px;
    background: #f1f5f9; color: #64748b;
}
.sj-zeile .kunde { display: block; font-size: 15px; font-weight: 600; margin-top: 3px; }
.sj-zeile .wort { display: block; font-size: 13px; color: #475569; margin-top: 2px; }
.sj-zeile .fuss { display: block; font-size: 11.5px; color: var(--lc-muted); margin-top: 4px; }

.sj-kopf .firma { font-size: 18px; font-weight: 600; }
.sj-kopf .wort { font-size: 14px; color: #475569; margin-top: 3px; line-height: 1.45; }
.sj-kopf .dazu { font-size: 12px; color: var(--lc-muted); margin-top: 6px; }

/* Dateien: groß genug zum Treffen, mit Absender und Zeitpunkt — beides
   braucht man, um zu wissen, ob es DIE gesuchte Fassung ist. */
.sj-datei {
    display: flex; align-items: center; gap: 12px; padding: 11px 2px;
    border-bottom: 1px solid var(--lc-border); text-decoration: none; color: inherit;
}
.sj-datei:last-child { border-bottom: 0; }
.sj-datei:active { background: #f1f5f9; border-radius: 10px; }
.sj-datei .sinn {
    flex: 0 0 38px; height: 38px; border-radius: 11px; background: #f1f5f9;
    border: 1px solid #e2e8f0; display: flex; align-items: center;
    justify-content: center; font-size: 18px;
}
.sj-datei .text { flex: 1; min-width: 0; }
.sj-datei .name {
    display: block; font-size: 14.5px; font-weight: 600; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sj-datei .dazu { display: block; font-size: 11.5px; color: var(--lc-muted); margin-top: 2px; }
.sj-datei .pfeil { flex: 0 0 auto; font-size: 20px; color: #cbd5e1; }

/* Der Verlauf. Zurückgenommene Einträge bleiben STEHEN und durchgestrichen —
   ein Irrtum wird gegengebucht, nicht überschrieben. */
.sj-log { padding: 11px 0; border-bottom: 1px solid var(--lc-border); }
.sj-log:last-child { border-bottom: 0; }
.sj-log .kopf { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sj-log .wer { font-weight: 700; font-size: 12.5px; color: #1e293b; }
.sj-log .wann { font-size: 11.5px; color: var(--lc-muted); }
.sj-log .min {
    font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px;
    background: #eff6ff; color: #1e40af;
}
.sj-log .text { font-size: 14px; line-height: 1.5; margin-top: 4px; white-space: pre-wrap; }
.sj-log.weg .text { text-decoration: line-through; color: var(--lc-muted); }
.sj-log .weggrund { font-size: 11.5px; color: #b45309; margin-top: 4px; }

/* Der Knopf für die Tages-Berichtigung — ein echter Knopf, kein grauer
   Text (Betreiber 09.09.2026: „zu unauffällig"). */
.rs-tageknopf { margin: 12px 0 0; }

/* ── Verlaufs-Editor auf der Reiseseite (09.09.2026) ─────────────────────
   Jede Zeile ein Stempel: Schritt · Datum · Uhrzeit · Ort (fest). Rot ist,
   was sich mit dem Nachbarn überschneidet — und dann bleibt Speichern zu. */

.rs-verlaufkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rs-verlaufkopf h2 { margin-bottom: 0; }
.rs-klein { padding: 8px 12px; font-size: 13px; margin: 0; width: auto; }

.rs-ort { display: block; font-size: 11px; color: var(--lc-muted); font-weight: 400; }

.rs-editzeile {
    display: grid; grid-template-columns: 1.3fr 1.15fr .9fr auto auto; gap: 6px;
    align-items: center; padding: 8px 6px; border-radius: 10px; margin-bottom: 6px;
    border: 1px solid transparent;
}
.rs-editzeile .zeit-eingabe { padding: 8px 8px; font-size: 13.5px; min-width: 0; }
.rs-editzeile .ort { font-size: 11px; color: var(--lc-muted); max-width: 90px;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-editzeile .weg { border: 0; background: none; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 4px; }
.rs-editzeile.konflikt { background: #fef2f2; border-color: #fecaca; }
.rs-editzeile.konflikt .zeit-eingabe { border-color: #f87171; }

.rs-neuzeile { margin: 14px 0 12px; padding-top: 12px; border-top: 1px dashed var(--lc-border); }
.rs-neuzeile .titel { font-size: 12.5px; font-weight: 600; color: var(--lc-muted); margin-bottom: 6px; }
.rs-editzeile.neu { grid-template-columns: 1.3fr 1.15fr .9fr .8fr auto; background: #f8fafc; }
.rs-editzeile .dauer { width: 100%; }

@media (max-width: 420px) {
    .rs-editzeile { grid-template-columns: 1fr 1fr; }
    .rs-editzeile .ort { grid-column: 1 / -1; max-width: none; }
    .rs-editzeile.neu { grid-template-columns: 1fr 1fr; }
}

/* Berichte, die schon im Servicefall liegen. */
.rs-berichte { margin-bottom: 14px; }
.rs-bericht { padding: 8px 0; border-bottom: 1px solid var(--lc-border); font-size: 13.5px; }
.rs-bericht:last-child { border-bottom: 0; }
.rs-bericht .wann { display: block; font-size: 11.5px; color: var(--lc-muted); }
.rs-bericht a { color: var(--lc-primary); text-decoration: none; font-weight: 600; }
.rs-bericht .text { white-space: pre-wrap; }

/* ── Tickets an der Reise (09.09.2026) ─────────────────────────────────── */
.rs-ticket { padding: 10px 0; border-bottom: 1px solid var(--lc-border); font-size: 13.5px; }
.rs-ticket:last-of-type { border-bottom: 0; }
.rs-ticket .kopf { display: flex; align-items: center; gap: 8px; }
.rs-ticket .kopf a { color: var(--lc-primary); text-decoration: none; font-weight: 600; flex: 1; min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-ticket .richtung { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; }
.rs-ticket .weg { border: 0; background: none; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 2px 4px; }
.rs-ticket .leg { font-size: 12.5px; color: #334155; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rs-ticket .leise { font-size: 12px; color: var(--lc-muted); margin-top: 4px; }
.rs-ticketneu { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.rs-ticketneu .zeit-eingabe { flex: 1; min-width: 120px; }
.rs-ticketneu .zeit-knopf { margin: 0; width: auto; }

/* ═══ URLAUB (09.09.2026) ═══
   Die kleine Zeile unter dem Stand auf der Startseite („Urlaub: 12,5 Tage
   übrig · 3 beantragt") und die Seite /zeit/urlaub. Betreiberansage:
   „irgendwo klein die Anzahl der noch offenen Urlaubstage angeben" —
   klein heißt: eine Zeile, 14 px, keine vierte Kachel. */
.zeit-urlaubszeile { display: flex; align-items: center; gap: 10px; margin-top: 14px;
                     padding: 10px 12px; border-radius: 12px; background: var(--lc-bg, #f4f6fa);
                     color: var(--lc-text); text-decoration: none; font-size: 14px; min-height: 44px; }
.zeit-urlaubszeile .sinn { font-size: 18px; }
.zeit-urlaubszeile .pfeil { margin-left: auto; color: var(--lc-muted); font-size: 20px; }
.zeit-urlaubszeile strong.minus { color: var(--lc-red); }

/* Konto auf der Urlaubsseite: drei Zahlen nebeneinander, darunter die Rechnung. */
.ul-konto { display: flex; margin: 4px 0 8px; }
.ul-konto-teil { flex: 1; text-align: center; }
.ul-konto-teil .wert { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ul-konto-teil .was { font-size: 12px; color: var(--lc-muted); margin-top: 3px; }
.ul-rechnung { font-size: 13px; color: var(--lc-muted); text-align: center; margin: 8px 0 0; }
.ul-vorrechnung { font-size: 15px; margin: -4px 0 12px; color: var(--lc-muted); }
.ul-vorrechnung strong { color: var(--lc-text); }

/* Die eigenen Anträge: eine Zeile je Antrag, Stand als farbige Pille. */
.ul-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ul-antrag { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
             border: 1px solid var(--lc-border); background: #fff; }
.ul-antrag .zeitraum { font-weight: 600; font-size: 15px; }
.ul-antrag .dazu { font-size: 12.5px; color: var(--lc-muted); margin-top: 2px; }
.ul-antrag .grund { font-size: 13px; color: var(--lc-red); margin-top: 4px; }
.ul-stand { margin-left: auto; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
            white-space: nowrap; }
.ul-stand.offen { background: #fff7ed; color: #c2410c; }
.ul-stand.genehmigt { background: #ecfdf5; color: #047857; }
.ul-stand.abgelehnt { background: #fef2f2; color: #b91c1c; }
.ul-stand.zurueckgezogen { background: #f1f5f9; color: #64748b; }
.ul-antrag .zeit-knopf.klein { margin-left: 6px; min-height: 40px; padding: 0 12px; font-size: 14px; }

/* ═══ DIE WIEDERVORLAGE (10.09.2026) ═══
   Betreiberansage: „lehnt sie ab mit Kommentar zur Wiedervorlage".
   Die Karte über dem Formular erklärt, warum die Felder schon ausgefüllt
   sind. Sie ist BEWUSST nicht rot: eine Ablehnung ist hier kein Fehler,
   sondern der Anfang des nächsten Vorschlags. Deshalb der ruhige blaue
   Rand und nicht die Warnfarbe der Fehlermeldungen. */
.zeit-karte.ul-wieder { border: 1px solid #bfdbfe; background: #f8fbff; }
.ul-wieder-satz { font-size: 15px; line-height: 1.5; margin: 6px 0 12px; }

/* ═══ DIE PERSPLANER²-ZEILE (10.09.2026) ═══
   Betreiberansage: „eine Erinnerung sofort nach der Freigabe, egal von wo
   aus, dass der Urlaub in den PersPlaner² manuell eingetragen werden muss."
   Gelb und nicht grün: die Genehmigung ist fertig, DIESE Zeile ist es
   nicht — sie ist eine offene Aufgabe und muss sich von der
   Erfolgsmeldung darüber unterscheiden. */
.ul-persplaner { border: 1px solid #fcd34d; background: #fffbeb; color: #78350f;
                 border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px;
                 font-size: 14px; line-height: 1.5; }
.ul-persplaner strong { display: block; margin-bottom: 4px; }

/* Startpasswort im Umlauf: bis zum eigenen Passwort bleibt alles außer der
   Passwortkarte zu (09.09.2026).

   SEIT 10.09.2026 STEHT DIESE SPERRE NICHT MEHR HIER. display:none versteckt
   nur vor dem Auge — der Inhalt (Monat, Belege, Urlaubszahl und die
   persönliche Merkliste) lag trotzdem vollständig im ausgelieferten Markup
   und war im Seitenquelltext zu lesen. Zeit.razor rendert die Spalte jetzt
   gar nicht erst. Die Regel bleibt als Notnagel stehen, falls die Klasse
   irgendwo wieder auftaucht; gesetzt wird sie nirgends mehr. */
.zeit-spalten.zeit-gesperrt { display: none; }

/* ═══ MEINE MERKLISTE (09.09.2026) ═══
   Betreiberansage: „eine persönliche mini ToDo Liste … diese kann man
   abhaken und dann verschwinden sie wieder komplett."

   Der Haken ist ein FINGERZIEL: 44 px im Quadrat, das Maß, unter dem auf
   einem Handy niemand mehr zuverlässig trifft — und hier wird mit
   Handschuhen und im Stehen getippt. Er steht links, weil er die Handlung
   ist; der Text daneben ist die Erinnerung. */

.zeit-merkfrist { display: flex; align-items: center; gap: 10px; }
.zeit-merkfrist span { font-size: 15px; color: var(--lc-muted); white-space: nowrap; }
.zeit-merkfrist .zeit-eingabe { width: 92px; text-align: center; }

.zeit-merkliste { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.zeit-merkzeile {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px 8px 8px; border-radius: 12px;
    border: 1px solid var(--lc-border); background: #fff;
}

.zeit-merkhaken {
    flex: 0 0 auto;
    width: 44px; height: 44px; min-width: 44px;
    border: 2px solid var(--lc-border); border-radius: 12px;
    background: #fff; color: #94a3b8;
    font-size: 22px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.zeit-merkhaken:active { background: var(--lc-green, #16a34a); border-color: var(--lc-green, #16a34a); color: #fff; }
.zeit-merkhaken:disabled { opacity: .5; cursor: default; }

.zeit-merktext { flex: 1; min-width: 0; }
.zeit-merktext .wort { display: block; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.zeit-merktext .dazu { display: block; font-size: 12.5px; color: var(--lc-muted); margin-top: 3px; }

/* Der Weg zurück: still, aber erreichbar — ein Fehlgriff auf dem Handy ist
   häufig, und endgültig gelöscht wird erst sieben Tage später. */
.zeit-merkweg {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding: 10px 12px; border-radius: 12px;
    background: var(--lc-bg, #f4f6fa); color: var(--lc-muted); font-size: 13.5px;
}
.zeit-merkweg span { overflow-wrap: anywhere; }
.zeit-merkzurueck {
    margin-left: auto; border: 0; background: transparent;
    color: var(--lc-primary); font-size: 14px; font-weight: 600;
    padding: 8px 6px; min-height: 40px; cursor: pointer;
}
.zeit-merkzurueck:disabled { opacity: .5; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════
   EINHEITEN UND ÜBERSCHRIFTEN (10.09.2026)

   Betreiberbefunde: „außerdem im Kalender die Einheit angeben", „auch hier
   bitte Einheiten hin" und „wenn ich keinen konkreten Tag angeklickt habe
   Monat bis jetzt".

   Warum das mehr ist als Kosmetik: auf derselben Seite stehen DAUERN
   (0:28 gearbeitet) und UHRZEITEN (07:24 – 16:04) in derselben
   Schreibweise. Ohne Einheit muss der Leser aus dem Zusammenhang
   erschließen, was gemeint ist — und „0:28" liest sich zuerst als halb
   eins nachts. Das kleine „h" beendet die Frage, ohne die Zahl zu
   verdrängen: es ist bewusst kleiner, leichter und leiser als der Wert.
   ══════════════════════════════════════════════════════════════════════ */
.zeit-stand-teil .wert .einheit {
  font-size: .62em;
  font-weight: 500;
  opacity: .65;
  margin-left: .18em;
  letter-spacing: .01em;
}

/* Sagt, WOFÜR die Summen darunter gelten. Ohne diese Zeile sah der Block
   aus wie die Summe des oben angeklickten Tages. */
.zeit-summenkopf {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--zeit-leise, #6b7280);
  letter-spacing: .02em;
  margin: 18px 0 6px;
}
.zeit-summenkopf .zeit-summenmonat { font-weight: 400; opacity: .8; }

/* ══════════════════════════════════════════════════════════════════════
   TESTANSICHT (10.09.2026) — die Leiste über jeder Seite der Zeiterfassung,
   wenn ein Verwalter mit dem Verwalterpasswort in die Ansicht eines anderen
   sieht (Components/Shared/Testansichtsleiste.razor).

   Bewusst DUNKEL und in keiner Farbe, die sonst auf diesen Seiten eine
   Bedeutung hat: blau und grau sind die gewöhnlichen Karten, warm ist die
   offene Frage (Eigenbeleg), rot der Fehler. Die Leiste soll auf den ersten
   Blick „das ist nicht deine Ansicht" sagen — wer hier stempelt, stempelt
   für einen anderen.
   ══════════════════════════════════════════════════════════════════════ */
.zeit-testansicht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: #1e1b4b;
  color: #eef2ff;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 0 14px;
}
.zeit-testansicht .zt-marke {
  background: #a5b4fc;
  color: #1e1b4b;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
  flex: 0 0 auto;
}
.zeit-testansicht .zt-text { flex: 1 1 220px; font-size: 13.5px; line-height: 1.45; }
.zeit-testansicht .zt-text b { color: #fff; }
.zeit-testansicht .zt-ende {
  background: #eef2ff;
  color: #1e1b4b;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  flex: 0 0 auto;
}
.zeit-testansicht .zt-ende:hover { background: #fff; }
.zeit-testansicht .zt-ende:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.zeit-testansicht .zt-ende:disabled { opacity: .6; cursor: default; }

/* Reise und aktuelle Tätigkeit bleiben in der Stempeluhr erkennbar. */
.zeit-reisemodus {
  background: #eef4ff;
  color: #1e3a5f;
  border: 1px solid #c7d7f5;
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}
.zeit-kundenende {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.zeit-kundenende .zeit-knopf {
  margin: 0;
  min-height: 62px;
  white-space: normal;
  font-size: 15px;
}
@media (max-width: 420px) {
  .zeit-kundenende { grid-template-columns: 1fr; }
}