/* ═══════════════════════════════════════════════════════════════════════════
   Glanzplan Design-System für RK Car(e)
   ───────────────────────────────────────────────────────────────────────────
   Übernahme aus der Aufbereitungs-App (~/Desktop/Aufberitung App):

     Farben, Radien, Größen  →  packages/shared/src/design/tokens.ts
     Bausteine               →  design-system/komponenten/*.html
     Aufbau der Ansichten    →  design-system/screens/*.html
     Verhalten               →  apps/web/src/components/*.tsx

   Diese Datei ist die EINZIGE Wahrheit für das Aussehen der angemeldeten
   Bereiche (Admin, Firmen-Portal, Mitarbeiter). Sie wird NACH tailwind.output
   und rk-theme geladen und braucht deshalb kein !important, solange die
   gp-Klassen verwendet werden.

   Regeln, die hier eingebaut sind, damit sie nicht in jeder Ansicht neu
   bedacht werden müssen:
     · Bedienelemente mindestens 44 px hoch, in der Werkstatt 56 px.
     · Zustand nie allein über Farbe — immer Text daneben.
     · Zahlen mit Tabellenziffern, damit Kommastellen fluchten.
     · Keine Emoji. Icons kommen aus Lucide (config/icons.js).
     · Bewegung nur, wenn das Gerät sie erlaubt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · Tokens ═════════════════════════════════════════════════════════ */
:root {
    /* Marke */
    --gp-ink: #1e3a5f;
    --gp-mid: #2d5a8e;
    --gp-accent: #3b82f6;
    --gp-hell: #a8d8ea;
    --gp-heller: #d4eef7;
    --gp-softline: #cfe3f5;

    /* Flächen */
    --gp-surface: #ffffff;
    --gp-sunken: #f1f5f9;
    --gp-canvas: #f8fafc;

    /* Linien und abgestufter Text (auf Tinte gerechnet) */
    --gp-line: rgba(30, 58, 95, 0.12);
    --gp-line-strong: rgba(30, 58, 95, 0.22);
    --gp-ink-2: rgba(30, 58, 95, 0.68);
    --gp-ink-3: rgba(30, 58, 95, 0.55); /* Untergrenze für Text: ~4,6:1 */

    /* Zustand — nie die Markenfarbe dafür verwenden */
    --gp-ok: #15803d;
    --gp-ok-bg: #f0fdf4;
    --gp-ok-line: #bbf7d0;
    --gp-warn: #b45309;
    --gp-warn-bg: #fffbeb;
    --gp-warn-line: #fde68a;
    --gp-err: #b91c1c;
    --gp-err-bg: #fef2f2;
    --gp-err-line: #fecaca;
    --gp-info: #1d4ed8;
    --gp-info-bg: #eff6ff;
    --gp-info-line: #bfdbfe;

    /* Der zurückgenommene Ton für Vergleichswerte in Diagrammen (4,8:1). */
    --gp-vergleich: #64748b;

    /* Abstände */
    --gp-s1: 4px;
    --gp-s2: 8px;
    --gp-s3: 12px;
    --gp-s4: 16px;
    --gp-s5: 24px;
    --gp-s6: 32px;
    --gp-s7: 48px;

    /* Radien */
    --gp-r-chip: 6px;
    --gp-r-control: 8px;
    --gp-r-card: 12px;
    --gp-r-pill: 999px;

    /* Schatten */
    --gp-sh1: 0 1px 2px rgba(30, 58, 95, 0.06);
    --gp-sh2: 0 2px 8px rgba(30, 58, 95, 0.08);
    --gp-sh3: 0 16px 40px rgba(30, 58, 95, 0.16);

    /* Touchziele: 44 Pflicht, 48 komfortabel, 56 Werkstatt */
    --gp-tap: 44px;
    --gp-tap-komfort: 48px;
    --gp-tap-werkstatt: 56px;

    /* Breite der Seitenleiste */
    --gp-leiste: 224px;

    --gp-schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --gp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Werkstatt: Touch-Geräte bekommen grössere Ziele. */
@media (hover: none) and (pointer: coarse) {
    :root {
        --gp-tap: 48px;
    }
}

/* ═══ 2 · Grundlage ══════════════════════════════════════════════════════ */
/* Nur im angemeldeten Bereich — die Marketing-Seiten behalten ihr Aussehen. */
body.gp-app {
    font-family: var(--gp-schrift);
    background: var(--gp-canvas);
    color: var(--gp-ink);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

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

.gp-icon {
    flex-shrink: 0;
    vertical-align: -0.15em;
}

/* Ein Fokusring für die ganze Anwendung. */
.gp-app :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .gp-app *,
    .gp-app *::before,
    .gp-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Nur für Vorleseprogramme. */
.gp-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ 3 · Grundgerüst ════════════════════════════════════════════════════
   Handy (< 1024): feste Kopfzeile mit Menü-Knopf, Navigation als Schublade
                   von links, Inhalt volle Breite.
   Desktop (1024+): dauerhafte Seitenleiste links, keine Kopfzeile.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Kopfzeile am Handy ── */
.gp-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--gp-s3);
    background: var(--gp-ink);
    color: #fff;
    padding: 10px 12px;
    border-bottom: 1px solid var(--gp-line);
}

.gp-topbar-knopf {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--gp-r-control);
    /* Eigene Fläche: Am Handy gibt es kein Schweben — ohne sie sieht man
       nicht, dass der Menü-Knopf ein Knopf ist. */
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.gp-topbar-knopf:hover {
    background: var(--gp-mid);
}

.gp-topbar-titel {
    min-width: 0;
    flex: 1;
}
.gp-topbar-marke {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}
.gp-topbar-wo {
    font-size: 11px;
    color: var(--gp-hell);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Seitenleiste ── */
.gp-leiste {
    background: var(--gp-ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gp-marke {
    padding: 18px 18px 14px;
    flex-shrink: 0;
}
.gp-marke img {
    height: 28px;
    width: auto;
    display: block;
}
.gp-marke-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.gp-marke-sub {
    font-size: 11px;
    color: var(--gp-hell);
    margin-top: 4px;
}

/* Die Menüliste rollt für sich — sonst wandert der Fuß bei langen Seiten
   ans Ende von 300 Rechnungen und „Abmelden" ist nicht mehr erreichbar. */
.gp-nav-huelle {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gp-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
}
.gp-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--gp-tap);
    padding: 0 10px;
    border-radius: var(--gp-r-control);
    color: var(--gp-heller);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.2;
}
.gp-nav a:hover {
    background: rgba(45, 90, 142, 0.5);
    color: #fff;
}
.gp-nav a.aktiv {
    background: var(--gp-mid);
    color: #fff;
    font-weight: 700;
}
.gp-nav-zaehler {
    margin-left: auto;
    font-family: var(--gp-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--gp-r-pill);
    padding: 1px 7px;
}

/* Fuß: Firma, Rolle, E-Mail, Abmelden — bleibt immer unten sichtbar. */
.gp-leiste-fuss {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gp-s2);
    border-top: 1px solid rgba(45, 90, 142, 0.4);
    padding: 14px 12px;
}
.gp-fuss-firma {
    padding: 0 8px;
    min-width: 0;
}
.gp-fuss-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-fuss-rolle {
    font-size: 11px;
    color: rgba(168, 216, 234, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-fuss-trenner {
    border-top: 1px solid rgba(45, 90, 142, 0.4);
    padding-top: var(--gp-s2);
}
.gp-fuss-mail {
    padding: 0 8px;
    font-size: 11px;
    color: rgba(168, 216, 234, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-abmelden {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: var(--gp-s2);
    width: 100%;
    min-height: var(--gp-tap);
    padding: 0 8px;
    border: 0;
    border-radius: var(--gp-r-control);
    background: transparent;
    color: var(--gp-heller);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.gp-abmelden:hover {
    background: rgba(45, 90, 142, 0.5);
    color: #fff;
}

/* ── Schublade am Handy ── */
.gp-schleier {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(30, 58, 95, 0.5);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.gp-schublade {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 288px;
    max-width: 85vw;
    box-shadow: 6px 0 24px rgba(30, 58, 95, 0.25);
}

/* Geschlossen ist der Standard — die Schublade erscheint erst mit .offen am
   Körper. Ohne JavaScript bleibt so nichts über dem Inhalt liegen. */
.gp-schleier,
.gp-schublade {
    display: none;
}
.gp-app.menue-offen .gp-schleier,
.gp-app.menue-offen .gp-schublade {
    display: flex;
    flex-direction: column;
}
.gp-app.menue-offen {
    overflow: hidden;
}

/* ── Inhalt ── */
.gp-inhalt {
    min-width: 0;
    flex: 1;
    padding: 20px 16px;
}

@media (min-width: 640px) {
    .gp-inhalt {
        padding: 20px 24px;
    }
}

@media (min-width: 1024px) {
    .gp-shell {
        display: flex;
    }
    .gp-topbar,
    .gp-schleier,
    .gp-schublade,
    .gp-app.menue-offen .gp-schleier,
    .gp-app.menue-offen .gp-schublade {
        display: none;
    }
    .gp-app.menue-offen {
        overflow: visible;
    }
    /* `sticky` statt `fixed`: So bleibt die Leiste Teil des Flex-Layouts und
       der Inhalt braucht keinen Rand, der zu ihrer Breite passen muss. */
    .gp-leiste-fest {
        display: flex;
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--gp-leiste);
        flex-shrink: 0;
        border-right: 1px solid var(--gp-line);
    }
    .gp-inhalt {
        padding: 24px 32px;
    }
}

@media (max-width: 1023px) {
    .gp-leiste-fest {
        display: none;
    }
}

/* ── Seitenkopf ── */
.gp-seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-s3);
    margin-bottom: var(--gp-s5);
}
.gp-seitenkopf-text {
    min-width: 0;
}
.gp-seitenkopf h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
@media (min-width: 640px) {
    .gp-seitenkopf h1 {
        font-size: 24px;
    }
}
.gp-seitenkopf-unter {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--gp-mid);
}
.gp-seitenkopf-aktion {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-s2);
    align-items: center;
}

/* ═══ 4 · Knöpfe ═════════════════════════════════════════════════════════
   Eine Primär-Aktion pro Ansicht. Werkstatt-Knöpfe immer in Groß, 56 px.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-s2);
    min-height: var(--gp-tap);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--gp-r-control);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease;
}
.gp-btn:disabled,
.gp-btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
}

.gp-btn--haupt {
    background: var(--gp-ink);
    color: #fff;
}
.gp-btn--haupt:hover:not(:disabled) {
    background: var(--gp-mid);
    color: #fff;
}

.gp-btn--zweit {
    background: var(--gp-surface);
    color: var(--gp-ink);
    border-color: var(--gp-line-strong);
}
.gp-btn--zweit:hover:not(:disabled) {
    background: var(--gp-sunken);
    color: var(--gp-ink);
}

.gp-btn--still {
    background: transparent;
    color: var(--gp-mid);
}
.gp-btn--still:hover:not(:disabled) {
    background: var(--gp-sunken);
    color: var(--gp-ink);
}

.gp-btn--gefahr {
    background: var(--gp-err-bg);
    color: var(--gp-err);
    border-color: var(--gp-err-line);
}
.gp-btn--gefahr:hover:not(:disabled) {
    background: #fee2e2;
    color: var(--gp-err);
}

/* Der eine Knopf, der wirklich löscht — im Bestätigungsdialog. */
.gp-btn--gefahr-voll {
    background: var(--gp-err);
    color: #fff;
    border-color: var(--gp-err);
}
.gp-btn--gefahr-voll:hover:not(:disabled) {
    background: #991b1b;
    color: #fff;
}

.gp-btn--gross {
    min-height: var(--gp-tap-werkstatt);
    padding: 0 22px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--gp-r-card);
}
.gp-btn--klein {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12.5px;
}
.gp-btn--voll {
    width: 100%;
}

/* Knopf, der nur ein Icon trägt — mit Vorlese-Label, nie ohne. */
.gp-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gp-tap);
    height: var(--gp-tap);
    flex-shrink: 0;
    border: 1px solid var(--gp-line-strong);
    border-radius: var(--gp-r-control);
    background: var(--gp-surface);
    color: var(--gp-mid);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.gp-btn-icon:hover {
    background: var(--gp-sunken);
    color: var(--gp-ink);
}

/* ═══ 5 · Status, Chips und Pillen ═══════════════════════════════════════
   Text, Fläche und Linie kommen immer als Trio aus den Status-Tokens.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid;
    border-radius: var(--gp-r-chip);
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.gp-badge--offen {
    color: var(--gp-info);
    background: var(--gp-info-bg);
    border-color: var(--gp-info-line);
}
.gp-badge--zugewiesen {
    color: var(--gp-mid);
    background: var(--gp-heller);
    border-color: var(--gp-softline);
}
.gp-badge--in-arbeit {
    color: var(--gp-warn);
    background: var(--gp-warn-bg);
    border-color: var(--gp-warn-line);
}
.gp-badge--erledigt {
    color: var(--gp-ok);
    background: var(--gp-ok-bg);
    border-color: var(--gp-ok-line);
}
.gp-badge--abgerechnet {
    color: var(--gp-ink);
    background: var(--gp-sunken);
    border-color: var(--gp-line);
}
.gp-badge--storniert {
    color: var(--gp-err);
    background: var(--gp-err-bg);
    border-color: var(--gp-err-line);
}
/* Neutral — für Merkmale, die keinen Zustand tragen (Fahrzeugart, Klasse). */
.gp-badge--neutral {
    color: #334155;
    background: var(--gp-sunken);
    border-color: var(--gp-line);
}

.gp-chip {
    display: inline-block;
    background: var(--gp-sunken);
    border-radius: var(--gp-r-chip);
    padding: 2px 7px;
    font-size: 12px;
    font-family: var(--gp-mono);
    color: var(--gp-ink-2);
}

.gp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gp-heller);
    border: 1px solid var(--gp-softline);
    border-radius: var(--gp-r-pill);
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gp-mid);
}

.gp-punkt {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: var(--gp-r-pill);
    background: currentColor;
    display: inline-block;
}

/* ═══ 6 · Karten und Kacheln ═════════════════════════════════════════════ */
.gp-karte {
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    overflow: hidden;
}
.gp-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-s3);
    padding: 13px 16px;
    border-bottom: 1px solid var(--gp-line);
}
.gp-karte-titel {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.gp-karte-inhalt {
    padding: var(--gp-s4);
}

/* Ein Abschnitt INNERHALB einer Karte — getrennt durch eine Linie, nicht
   durch eine eigene Karte: Fünf Karten mit je 32 px Innenabstand kosten rund
   300 Pixel Höhe, ohne eine einzige Information hinzuzufügen. */
.gp-block {
    border-top: 1px solid var(--gp-line);
    padding: var(--gp-s4);
}
.gp-block:first-child {
    border-top: 0;
}
@media (min-width: 640px) {
    .gp-block {
        padding: 20px;
    }
}
.gp-block-kopf {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--gp-s4);
}
.gp-block-kopf h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.gp-block-kopf .gp-icon {
    margin-top: 2px;
    color: var(--gp-mid);
}
.gp-block-beschreibung {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--gp-mid);
    max-width: 70ch;
}

/* ── KPI-Kacheln ── */
.gp-kpi-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.gp-kpi {
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    padding: var(--gp-s4);
    min-width: 0;
}
.gp-kpi-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gp-mid);
}
.gp-kpi-wert {
    font-size: 26px;
    font-weight: 800;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.gp-kpi-trend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    margin-top: 4px;
    color: var(--gp-mid);
}
.gp-kpi-trend--auf {
    color: var(--gp-ok);
}
.gp-kpi-trend--ab {
    color: var(--gp-err);
}
.gp-kpi-trend--warn {
    color: var(--gp-warn);
}

/* Leitkennzahl: eine Kachel, die über die Reihe hinausragt. */
.gp-kpi--leit {
    border-left: 3px solid var(--gp-mid);
}
.gp-kpi--leit .gp-kpi-wert {
    font-size: 30px;
}

/* Fortschrittsbalken unter einer Kachel. */
.gp-balken {
    display: flex;
    height: 8px;
    margin-top: var(--gp-s2);
    border-radius: var(--gp-r-pill);
    overflow: hidden;
    background: var(--gp-sunken);
}
.gp-balken-beschriftung {
    display: flex;
    justify-content: space-between;
    gap: var(--gp-s2);
    margin-top: 10px;
    font-size: 12px;
    color: var(--gp-mid);
    font-variant-numeric: tabular-nums;
}

/* ═══ 7 · Tabellen ═══════════════════════════════════════════════════════
   Dichte Desktop-Tabelle in einer Tafel: Werkzeugleiste oben, Zeilen-Hover,
   Preise rechtsbündig tabular. Am Handy wird daraus eine Kartenliste.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-tafel {
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    overflow: hidden;
    box-shadow: var(--gp-sh1);
}

.gp-werkzeuge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gp-s3);
    padding: 12px 16px;
    border-bottom: 1px solid var(--gp-line);
}
.gp-anzahl {
    font-size: 12px;
    color: var(--gp-mid);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .gp-werkzeuge {
        flex-direction: column;
        align-items: stretch;
    }
}

.gp-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gp-scroller::-webkit-scrollbar {
    height: 8px;
}
.gp-scroller::-webkit-scrollbar-thumb {
    background: rgba(30, 58, 95, 0.2);
    border-radius: 4px;
}

.gp-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.gp-tabelle th {
    background: var(--gp-canvas);
    border-bottom: 1px solid var(--gp-line);
    padding: 10px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gp-mid);
    white-space: nowrap;
}
.gp-tabelle td {
    border-bottom: 1px solid var(--gp-line);
    padding: 11px 16px;
    vertical-align: top;
}
.gp-tabelle tbody tr:last-child td {
    border-bottom: none;
}
.gp-tabelle tbody tr:hover {
    background: var(--gp-canvas);
}
.gp-tabelle th.rechts,
.gp-tabelle td.rechts {
    text-align: right;
}
.gp-tabelle a.gp-zeilen-link {
    color: var(--gp-ink);
    text-decoration: none;
    font-weight: 600;
}
.gp-tabelle a.gp-zeilen-link:hover {
    color: var(--gp-accent);
    text-decoration: underline;
}

.gp-sub {
    font-size: 12px;
    color: var(--gp-mid);
}
.gp-mono {
    font-family: var(--gp-mono);
}
.gp-preis {
    text-align: right;
    font-family: var(--gp-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gp-zahl {
    font-variant-numeric: tabular-nums;
}

/* Kartenliste als Ersatz für die Tabelle am Handy. */
.gp-kartenliste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gp-listenkarte {
    display: block;
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    padding: var(--gp-s3);
    text-decoration: none;
    color: inherit;
}
.gp-listenkarte:hover {
    border-color: var(--gp-line-strong);
}
.gp-listenkarte-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-s2);
}

/* Zeile in einer Panelliste (Dashboard, Team, Rechnungen). */
.gp-zeile {
    display: flex;
    align-items: center;
    gap: var(--gp-s3);
    padding: 12px 16px;
    border-bottom: 1px solid var(--gp-line);
}
.gp-zeile:last-child {
    border-bottom: none;
}
.gp-zeile-haupt {
    min-width: 0;
    flex: 1;
}
.gp-zeile-stark {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-zeile-neben {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
 * Am Handy rutscht der rechte Teil in eine eigene Zeile.
 *
 * Vorher stand er starr neben dem Text: Bei 375 px ragten die Knöpfe bis 394 px
 * hinaus — sichtbar abgeschnitten und nicht mehr treffbar, weil die Tafel den
 * Überhang wegschneidet. Umbrechen ist hier richtig, Kürzen wäre es nicht:
 * Die Handgriffe sind der Grund, warum die Zeile eine Zeile ist.
 */
@media (max-width: 640px) {
    .gp-zeile {
        flex-wrap: wrap;
    }
    .gp-zeile-haupt {
        flex: 1 1 100%;
    }
    .gp-zeile-neben {
        flex: 1 0 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
.gp-zeit {
    flex: none;
    width: 52px;
    font-family: var(--gp-mono);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gp-mid);
}

/* ═══ 8 · Formulare ══════════════════════════════════════════════════════
   Felder mindestens 44 px hoch. Jedes Feld hat eine sichtbare Beschriftung —
   kein Platzhalter als Label, weil der beim Tippen verschwindet.
   Fehler stehen UNTER dem Feld, konkret und deutsch, nie nur „ungültig".
   ═══════════════════════════════════════════════════════════════════════ */
.gp-formular {
    display: grid;
    gap: var(--gp-s4);
}
@media (min-width: 640px) {
    .gp-formular--zwei {
        grid-template-columns: 1fr 1fr;
    }
    .gp-formular--drei {
        grid-template-columns: repeat(3, 1fr);
    }
}
.gp-feld--breit {
    grid-column: 1 / -1;
}

.gp-feld {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.gp-feld label,
.gp-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gp-ink);
}
.gp-pflicht {
    color: var(--gp-err);
    margin-left: 2px;
}

/*
 * `:where()` steuert keine Spezifität bei — die Grundregel wiegt damit so
 * wenig wie eine einzelne Klasse. Ohne das gewann sie gegen jede spätere
 * Feinheit: Das Suchfeld bekam seinen Platz fürs Lupensymbol nicht, weil drei
 * `:not()` in der Auswahl schwerer wogen als `.gp-suchfeld input`.
 */
.gp-app
    :where(
        input:not([type='checkbox']):not([type='radio']):not([type='file']),
        select,
        textarea
    ) {
    font: inherit;
    font-size: 15px;
    color: var(--gp-ink);
    background: var(--gp-surface);
    border: 1px solid var(--gp-line-strong);
    border-radius: var(--gp-r-control);
    padding: 9px 11px;
    min-height: var(--gp-tap);
    width: 100%;
    max-width: 100%;
}
.gp-app textarea {
    min-height: 88px;
    resize: vertical;
}
.gp-app :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--gp-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.gp-app :where(input, textarea)::placeholder {
    color: rgba(45, 90, 142, 0.6);
}
.gp-app :where(input, select, textarea):disabled {
    background: var(--gp-sunken);
    color: var(--gp-mid);
    cursor: not-allowed;
}

/* Das fehlerhafte Feld bekommt auch eine Fläche, nicht nur einen roten Rand:
   In einem Formular mit zwölf Feldern findet das Auge die getönte Fläche,
   den 1-px-Rand findet es nicht. */
.gp-feld--fehler input,
.gp-feld--fehler select,
.gp-feld--fehler textarea,
.gp-app [aria-invalid='true'] {
    border-color: var(--gp-err);
    background: var(--gp-err-bg);
}

.gp-fehlermeldung {
    font-size: 12px;
    font-weight: 600;
    color: var(--gp-err);
}
.gp-hilfetext {
    font-size: 12px;
    color: var(--gp-mid);
}

/* Auswahlliste mit eigenem Pfeil (Lucide, über dem Feld). */
.gp-auswahl {
    position: relative;
}
.gp-app .gp-auswahl select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
}
.gp-auswahl-pfeil {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gp-mid);
    display: flex;
}

/* Kontrollkästchen treffbar machen. */
.gp-checkzeile {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--gp-tap);
}
.gp-app .gp-checkzeile input[type='checkbox'],
.gp-app .gp-checkzeile input[type='radio'] {
    width: 20px;
    height: 20px;
    min-height: 0;
    flex-shrink: 0;
    accent-color: var(--gp-ink);
    margin: 0;
}
.gp-checkzeile label {
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
}

/* Schalter mit Erklärung — für Ja/Nein-Entscheidungen mit Folgen. */
.gp-schalter {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-s3);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    background: var(--gp-surface);
    padding: var(--gp-s3);
}
.gp-schalter input {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    min-height: 0;
    flex-shrink: 0;
    accent-color: var(--gp-ink);
}

/* Sichtbare Auswahl statt Aufklappmenü — für kurze, feste Listen. */
.gp-kacheln {
    display: grid;
    gap: var(--gp-s2);
}
@media (min-width: 640px) {
    .gp-kacheln--zwei {
        grid-template-columns: 1fr 1fr;
    }
    .gp-kacheln--drei {
        grid-template-columns: repeat(3, 1fr);
    }
}
.gp-kachel {
    display: block;
    width: 100%;
    min-height: var(--gp-tap);
    padding: 10px;
    text-align: left;
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.gp-kachel:hover {
    border-color: var(--gp-line-strong);
}
.gp-kachel[aria-pressed='true'],
.gp-kachel.gewaehlt {
    border-color: var(--gp-accent);
    background: var(--gp-info-bg);
    font-weight: 600;
}
.gp-kachel-unter {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--gp-mid);
}

/* Auswahlzeile — Punkt, Kurzcode, Name, Preis rechts; Gruppe im hellen Kasten. */
.gp-wahlgruppe {
    display: flex;
    flex-direction: column;
    gap: var(--gp-s2);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    background: var(--gp-canvas);
    padding: var(--gp-s3);
}
.gp-wahlgruppe-titel {
    display: flex;
    align-items: center;
    gap: var(--gp-s2);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gp-mid);
}
.gp-wahlzeile {
    display: flex;
    align-items: center;
    gap: var(--gp-s3);
    min-height: var(--gp-tap);
    padding: 10px 12px;
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}
.gp-wahlzeile:hover {
    border-color: var(--gp-line-strong);
}
.gp-wahlzeile.gewaehlt,
.gp-wahlzeile:has(input:checked) {
    border-color: var(--gp-accent);
    box-shadow: inset 0 0 0 1px var(--gp-accent);
}
.gp-wahlzeile-name {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
}
.gp-wahlzeile-kennung {
    flex-shrink: 0;
    font-family: var(--gp-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--gp-accent);
}
.gp-wahlzeile-preis {
    flex-shrink: 0;
    font-family: var(--gp-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--gp-mid);
}

/* Die Übersicht, die beim Ausfüllen mitläuft. */
.gp-formularrahmen {
    display: grid;
    gap: var(--gp-s4);
    align-items: start;
}
@media (min-width: 1024px) {
    .gp-formularrahmen {
        grid-template-columns: minmax(0, 1fr) 19rem;
    }
}
.gp-uebersicht {
    display: flex;
    flex-direction: column;
    gap: var(--gp-s3);
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    padding: var(--gp-s4);
}
@media (min-width: 1024px) {
    .gp-uebersicht {
        position: sticky;
        top: var(--gp-s4);
    }
}
.gp-uebersicht-titel {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gp-mid);
}
.gp-uebersicht dt {
    font-size: 12px;
    color: var(--gp-mid);
}
.gp-uebersicht dd {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-uebersicht-preis {
    border-top: 1px solid var(--gp-line);
    padding-top: var(--gp-s3);
}
.gp-uebersicht-preis .betrag {
    font-family: var(--gp-mono);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ═══ 9 · Filterleiste ═══════════════════════════════════════════════════ */
.gp-filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-s2);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    background: var(--gp-canvas);
    padding: 10px;
    margin-bottom: var(--gp-s4);
}
.gp-suchfeld {
    position: relative;
    min-width: 200px;
    flex: 1;
}
.gp-suchfeld .gp-suchsymbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gp-mid);
    display: flex;
}
.gp-app .gp-suchfeld input {
    padding-left: 38px;
}

/* Ein Filter: Knopf mit der aktuellen Wahl, Menü mit allen Möglichkeiten. */
.gp-filter {
    position: relative;
}
.gp-filter > summary {
    display: flex;
    align-items: center;
    gap: var(--gp-s2);
    min-height: var(--gp-tap);
    padding: 0 12px;
    border: 1px solid var(--gp-line-strong);
    border-radius: var(--gp-r-control);
    background: var(--gp-surface);
    color: var(--gp-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.gp-filter > summary::-webkit-details-marker {
    display: none;
}
.gp-filter > summary:hover {
    background: var(--gp-sunken);
}
.gp-filter[data-aktiv='true'] > summary {
    background: var(--gp-ink);
    border-color: var(--gp-ink);
    color: #fff;
}
.gp-filter-label {
    color: var(--gp-mid);
    font-weight: 500;
}
.gp-filter[data-aktiv='true'] .gp-filter-label {
    color: rgba(255, 255, 255, 0.7);
}
.gp-filter-menue {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 240px;
    max-height: 26rem;
    overflow-y: auto;
    background: var(--gp-surface);
    border: 1px solid var(--gp-line-strong);
    border-radius: var(--gp-r-control);
    box-shadow: var(--gp-sh3);
    padding: 4px 0;
}
.gp-filter-menue a,
.gp-filter-menue button {
    display: flex;
    align-items: center;
    gap: var(--gp-s3);
    width: 100%;
    min-height: var(--gp-tap);
    padding: 0 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--gp-ink);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}
.gp-filter-menue a:hover,
.gp-filter-menue button:hover {
    background: var(--gp-sunken);
}
.gp-filter-menue a[aria-current='true'] {
    font-weight: 700;
}
.gp-filter-menue .gp-filter-anzahl {
    margin-left: auto;
    font-family: var(--gp-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--gp-mid);
}
.gp-filter-gruppe {
    display: block;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gp-mid);
    border-top: 1px solid var(--gp-line);
    margin-top: 4px;
}
.gp-filter-menue > *:first-child.gp-filter-gruppe {
    border-top: 0;
    margin-top: 0;
}

/* ═══ 10 · Rückmeldung ═══════════════════════════════════════════════════ */
.gp-hinweis {
    display: flex;
    gap: 10px;
    border: 1px solid;
    border-radius: var(--gp-r-control);
    padding: var(--gp-s3);
    font-size: 14px;
    line-height: 1.45;
}
.gp-hinweis .gp-icon {
    margin-top: 1px;
}
.gp-hinweis-titel {
    font-weight: 700;
}
.gp-hinweis--info {
    color: var(--gp-info);
    background: var(--gp-info-bg);
    border-color: var(--gp-info-line);
}
.gp-hinweis--warnung {
    color: var(--gp-warn);
    background: var(--gp-warn-bg);
    border-color: var(--gp-warn-line);
}
.gp-hinweis--fehler {
    color: var(--gp-err);
    background: var(--gp-err-bg);
    border-color: var(--gp-err-line);
}
.gp-hinweis--erfolg {
    color: var(--gp-ok);
    background: var(--gp-ok-bg);
    border-color: var(--gp-ok-line);
}

/* Meldungen, die von selbst kommen — oben rechts, über allem. */
.gp-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
}
.gp-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--gp-surface);
    box-shadow: var(--gp-sh2);
}
.gp-toast--erfolg {
    color: var(--gp-ok);
    background: var(--gp-ok-bg);
    border-color: var(--gp-ok-line);
}
.gp-toast--fehler {
    color: var(--gp-err);
    background: var(--gp-err-bg);
    border-color: var(--gp-err-line);
}
.gp-toast-schliessen {
    margin-left: auto;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 4px;
    display: flex;
    opacity: 0.7;
}
.gp-toast-schliessen:hover {
    opacity: 1;
}

/* Gefährliche Aktionen bestätigen immer im Dialog mit klarer Konsequenz. */
.gp-dialog {
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    box-shadow: var(--gp-sh3);
    padding: 0;
    max-width: 440px;
    width: calc(100vw - 32px);
    background: var(--gp-surface);
    color: var(--gp-ink);
}
.gp-dialog::backdrop {
    background: rgba(30, 58, 95, 0.5);
}
.gp-dialog-kopf {
    padding: 16px 20px 0;
    font-size: 17px;
    font-weight: 700;
}
.gp-dialog-text {
    padding: 8px 20px 0;
    font-size: 14px;
    color: var(--gp-mid);
    line-height: 1.5;
}
.gp-dialog-inhalt {
    padding: 16px 20px 0;
}
.gp-dialog-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 20px;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    /* Am Handy von unten über die volle Breite. */
    .gp-dialog {
        width: 100vw;
        max-width: 100vw;
        margin: auto auto 0;
        border-radius: var(--gp-r-card) var(--gp-r-card) 0 0;
    }
}

/* Leerzustände erklären den nächsten Schritt — nie nur „Keine Daten". */
.gp-leer {
    border: 1px dashed var(--gp-line-strong);
    border-radius: var(--gp-r-card);
    padding: 34px 24px;
    text-align: center;
    background: var(--gp-surface);
}
.gp-leer-bild {
    display: block;
    margin: 0 auto 4px;
    max-width: 100%;
    height: auto;
}
.gp-leer-titel {
    font-size: 15px;
    font-weight: 700;
    margin-top: var(--gp-s2);
}
.gp-leer-text {
    font-size: 13px;
    color: var(--gp-mid);
    margin-top: 4px;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}
.gp-leer .gp-btn {
    margin-top: 14px;
}

/* ═══ 11 · Werkstatt (Mitarbeiter am Handy) ══════════════════════════════
   Große Ziele, wenig Text, eine Handlung je Karte — bedient wird mit
   Handschuhen und nassen Fingern.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-werkstatt-karte {
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-left: 4px solid var(--gp-mid);
    border-radius: var(--gp-r-card);
    padding: var(--gp-s4);
    margin-bottom: var(--gp-s3);
}
.gp-werkstatt-karte--laeuft {
    border-left-color: var(--gp-warn);
    background: var(--gp-warn-bg);
}
.gp-werkstatt-karte--fertig {
    border-left-color: var(--gp-ok);
    opacity: 0.72;
}
.gp-werkstatt-titel {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}
.gp-werkstatt-zeile {
    display: flex;
    align-items: center;
    gap: var(--gp-s2);
    font-size: 14px;
    color: var(--gp-mid);
    margin-top: 4px;
}

/* ═══ 12 · Dashboard ═════════════════════════════════════════════════════
   Nach `design-system/screens/dashboard.html`: ein Rahmen, darin Kopf,
   Warnzeile, Kennzahlen und Panels — getrennt durch 1-px-Fugen statt durch
   Abstände. Das Haarlinien-Raster hält den Morgenblick zusammen.

   Eine Zahl führt, drei begleiten: Vier gleich große Kacheln haben keine
   Aussage — das Auge sucht sich dann selbst eine aus, und morgens ist das
   die falsche. Der Größenunterschied IST die Aussage.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-dash {
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-card);
    box-shadow: var(--gp-sh1);
    overflow: hidden;
}

.gp-dash-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-s4);
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gp-line);
}
.gp-dash-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gp-mid);
}
.gp-dash-titel {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 2px 0 0;
    line-height: 1.15;
}

/* Die Warnzeile ist das Einzige, was morgens sofort etwas auslöst. */
.gp-dash-warnung {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--gp-err-bg);
    border-bottom: 1px solid var(--gp-err-line);
}
.gp-dash-warnung .gp-icon {
    color: var(--gp-err);
}
.gp-dash-warnung-text {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: #7f1d1d;
}

.gp-dash-zahlen {
    display: grid;
    grid-template-columns: minmax(280px, 1.3fr) repeat(auto-fit, minmax(195px, 1fr));
    gap: 1px;
    background: var(--gp-line);
    border-bottom: 1px solid var(--gp-line);
}
.gp-zelle {
    background: var(--gp-surface);
    padding: 18px 20px;
    min-width: 0;
}
.gp-zelle--leit {
    border-left: 3px solid var(--gp-mid);
}
.gp-zelle-marke {
    display: flex;
    align-items: center;
    gap: var(--gp-s2);
}
.gp-zelle-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gp-ink-3);
}
.gp-zelle-wert {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: var(--gp-s2);
    white-space: nowrap;
}
.gp-zelle--leit .gp-zelle-wert {
    font-size: 40px;
    line-height: 44px;
}
.gp-zelle-unter {
    font-size: 13.5px;
    color: rgba(30, 58, 95, 0.65);
    margin-top: 3px;
}

/* Fortschritt des Tages: erledigt (grün) und in Arbeit (bernstein). */
.gp-fortschritt {
    margin-top: 14px;
}
.gp-fortschritt-zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--gp-s2);
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-ink-3);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.gp-fortschritt-balken {
    display: flex;
    height: 10px;
    border-radius: var(--gp-r-pill);
    background: #e2e8f0;
    overflow: hidden;
}
.gp-fortschritt-balken > span {
    height: 100%;
    display: block;
}

.gp-dash-reihe {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
    gap: 1px;
    background: var(--gp-line);
}
.gp-dash-panel {
    background: var(--gp-surface);
    min-width: 0;
}
/* Links die Tagesliste über volle Höhe, rechts Team und Rechnungen
   übereinander — so bleibt keine graue Fuge leer. */
.gp-dash-panel--hoch {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.gp-dash-panel--hoch > *:last-child {
    flex: 1 1 auto;
}
@media (max-width: 820px) {
    .gp-dash-reihe {
        grid-template-columns: 1fr;
    }
    .gp-dash-panel--hoch {
        grid-row: auto;
    }
}
.gp-dash-panel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-s3);
    padding: 14px 20px;
    border-bottom: 1px solid var(--gp-line);
}
.gp-dash-panel-kopf h2 {
    font-size: 15.5px;
    font-weight: 700;
    margin: 0;
}

/* Die Uhrzeit führt — wie im Kalender und in der Handy-App. */
.gp-dash-zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(30, 58, 95, 0.07);
}
.gp-dash-zeile:last-child {
    border-bottom: 0;
}
.gp-dash-zeile--spaet {
    background: #fffbfb;
}
.gp-dash-zeit {
    width: 52px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.gp-dash-zeile--spaet .gp-dash-zeit {
    color: var(--gp-err);
    font-size: 13px;
}
.gp-dash-wagen {
    min-width: 0;
    flex: 1;
}
.gp-dash-fahrzeug {
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-dash-kunde {
    font-size: 13px;
    color: rgba(30, 58, 95, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-dash-rechts {
    display: flex;
    align-items: center;
    gap: var(--gp-s3);
    flex-shrink: 0;
}
.gp-dash-wer {
    font-size: 13px;
    color: var(--gp-ink-3);
    white-space: nowrap;
}
.gp-dash-wer--frei {
    color: var(--gp-warn);
    font-weight: 600;
}
.gp-dash-betrag {
    font-size: 14.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    width: 84px;
    text-align: right;
}
.gp-dash-zahl {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gp-dash-leer {
    padding: 28px 20px;
    font-size: 14px;
    color: var(--gp-ink-3);
}

/* Der Zustand ist Punkt UND Wort. Farbe allein ist keine Information. */
.gp-zustand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid;
    border-radius: var(--gp-r-pill);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.gp-zustand--offen {
    background: var(--gp-info-bg);
    border-color: var(--gp-info-line);
    color: #1e3a8a;
}
.gp-zustand--offen .gp-punkt {
    color: var(--gp-info);
}
.gp-zustand--arbeit {
    background: var(--gp-warn-bg);
    border-color: var(--gp-warn-line);
    color: #78350f;
}
.gp-zustand--arbeit .gp-punkt {
    color: var(--gp-warn);
}
.gp-zustand--fertig {
    background: var(--gp-ok-bg);
    border-color: var(--gp-ok-line);
    color: #14532d;
}
.gp-zustand--fertig .gp-punkt {
    color: var(--gp-ok);
}
.gp-zustand--spaet {
    background: var(--gp-err-bg);
    border-color: var(--gp-err-line);
    color: #7f1d1d;
}
.gp-zustand--spaet .gp-punkt {
    color: var(--gp-err);
}

/* Am Handy untereinander: `minmax(280px, …)` als erste Spalte sprengt sonst
   die Breite, und die Begleitzahlen stehen halb außerhalb des Bildes. */
@media (max-width: 720px) {
    .gp-dash-zahlen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .gp-dash-wer,
    .gp-dash-zeile .gp-zustand {
        display: none;
    }
    .gp-dash-betrag {
        width: auto;
    }
    .gp-dash-titel {
        font-size: 22px;
    }
    .gp-zelle--leit .gp-zelle-wert {
        font-size: 32px;
        line-height: 36px;
    }
}

/* ═══ 13 · Detailbereich ═════════════════════════════════════════════════
   Ein Auftrag, ohne die Liste zu verlassen. Am Desktop schiebt er sich von
   rechts herein, am Handy steht er über der ganzen Breite — dort ist für zwei
   Spalten kein Platz.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-detail {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: 26rem;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--gp-surface);
    border-left: 1px solid var(--gp-line);
    box-shadow: -12px 0 40px rgba(30, 58, 95, 0.16);
}
.gp-detail[hidden] {
    display: none;
}
.gp-schublade-schleier {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(30, 58, 95, 0.4);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.gp-schublade-schleier[hidden] {
    display: none;
}
.gp-app.detail-offen {
    overflow: hidden;
}
.gp-detail-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-s3);
    padding: var(--gp-s4);
    border-bottom: 1px solid var(--gp-line);
    flex-shrink: 0;
}
.gp-detail-titel {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.gp-detail-koerper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--gp-s4);
}
.gp-detail-fuss {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gp-s2);
    padding: var(--gp-s4);
    border-top: 1px solid var(--gp-line);
}

/* ═══ 14 · Breitenweichen ════════════════════════════════════════════════
   Dieselben Daten, zwei Darstellungen: dichte Tabelle am Desktop,
   Kartenliste am Handy. Die Weiche steht hier, damit keine Ansicht sie
   selbst erfindet.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-nur-breit {
    display: none;
}

/*
 * Die Kartenliste bringt ihr Layout selbst mit.
 *
 * Vorher stand in den Ansichten `style="display:flex;flex-direction:column"`
 * daneben — und ein Inline-Stil schlägt jede Regel aus einer Datei. Am Desktop
 * blieb die Kartenliste damit sichtbar, obwohl `@media` sie ausblenden wollte:
 * Tabelle UND Karten standen untereinander, dieselben Daten zweimal. Wer diese
 * Klasse setzt, darf `display` deshalb nicht selbst noch einmal bestimmen.
 */
.gp-nur-schmal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--gp-s3);
}
@media (min-width: 1024px) {
    .gp-nur-breit {
        display: table;
    }
    .gp-nur-schmal {
        display: none;
    }
}

/* ═══ 15 · Kleinkram ═════════════════════════════════════════════════════ */
.gp-raster {
    display: grid;
    gap: var(--gp-s4);
}
@media (min-width: 900px) {
    .gp-raster--2 {
        grid-template-columns: 1fr 1fr;
    }
    .gp-raster--3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .gp-raster--haupt-neben {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.gp-stapel {
    display: flex;
    flex-direction: column;
    gap: var(--gp-s3);
}
.gp-reihe {
    display: flex;
    align-items: center;
    gap: var(--gp-s2);
    flex-wrap: wrap;
}
.gp-abstand {
    margin-left: auto;
}
.gp-gedaempft {
    color: var(--gp-mid);
}
.gp-klein {
    font-size: 12px;
}
/* Auch als <button> — sonst trägt der Browser Rand und Fläche bei, und ein
   Textlink sieht aus wie ein zweiter Absenden-Knopf. */
.gp-link {
    color: var(--gp-mid);
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.gp-link:hover {
    color: var(--gp-ink);
    text-decoration: underline;
}
.gp-trenner {
    border: 0;
    border-top: 1px solid var(--gp-line);
    margin: var(--gp-s4) 0;
}

/* ── Team: Formular links, Liste rechts ─────────────────────────────────────
   In der Reihenfolge des Dokuments steht die Liste vorn — sie ist der Grund,
   warum man die Seite öffnet. Am Desktop rutscht das Formular daneben. */
.gp-team {
    grid-template-columns: 1fr;
}
.gp-team-liste {
    min-width: 0;
}
.gp-team-formular {
    min-width: 0;
}
@media (min-width: 1100px) {
    .gp-team {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }
    .gp-team-formular {
        position: sticky;
        top: var(--gp-s4);
    }
}

/* ═══ 16 · Anmeldung ═════════════════════════════════════════════════════
   Eine Karte in der Mitte, sonst nichts. Nach
   `apps/web/src/features/anmeldung/AnmeldeRahmen.tsx`.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-anmelde-rahmen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gp-s4);
    padding: var(--gp-s5) var(--gp-s4);
}
.gp-anmelde-marke img {
    height: 52px;
    width: auto;
    display: block;
}
.gp-anmelde-karte {
    width: 100%;
    max-width: 26rem;
    box-shadow: var(--gp-sh2);
}
.gp-anmelde-titel {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}
.gp-anmelde-unter {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--gp-mid);
    line-height: 1.45;
}
.gp-anmelde-fuss {
    margin: 0;
    font-size: 13px;
}

/* Feld mit vorangestelltem Symbol (E-Mail, Schloss). */
.gp-feld-symbol {
    position: relative;
}
.gp-feld-symbol > .gp-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gp-mid);
}
.gp-app .gp-feld-symbol input {
    padding-left: 38px;
}

/* ── Preiszeile: Code, PKW, NFZ ────────────────────────────────────────────
   Eine Zeile je Leistung statt einer Kachel: Sechzehn Kacheln nebeneinander
   lassen sich nicht vergleichen, sechzehn Zeilen untereinander schon. */
.gp-preiszeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 92px;
    gap: 8px;
    align-items: center;
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    padding: 8px 10px;
}
.gp-preiszeile-name {
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-app .gp-preiszeile input {
    min-height: 38px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gp-preiszeile-standard {
    grid-column: 1 / -1;
    font-size: 11px;
}

/* ── Aufklappbarer Abschnitt ───────────────────────────────────────────────
   Für Selteneres in einem langen Formular: Preise, Sonder-Empfänger. Was
   selten gebraucht wird, kostet zugeklappt eine Zeile statt dreißig. */
.gp-aufklapp {
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    background: var(--gp-canvas);
    overflow: hidden;
}
.gp-aufklapp > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-s2);
    min-height: var(--gp-tap);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gp-ink);
    cursor: pointer;
    list-style: none;
}
.gp-aufklapp > summary::-webkit-details-marker {
    display: none;
}
.gp-aufklapp > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gp-mid);
    border-bottom: 2px solid var(--gp-mid);
    transform: rotate(45deg) translate(-2px, -2px);
    flex-shrink: 0;
}
.gp-aufklapp[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
.gp-aufklapp > summary:hover {
    background: var(--gp-sunken);
}
.gp-aufklapp-inhalt {
    border-top: 1px solid var(--gp-line);
    background: var(--gp-surface);
    padding: var(--gp-s3);
    max-height: 420px;
    overflow-y: auto;
}

/* ═══ 17 · Werkstatt ═════════════════════════════════════════════════════
   Nach `design-system/screens/mitarbeiter-heute.html`. Bedient wird mit
   Handschuhen und nassen Fingern: eine Handlung je Karte, 56 px hoch, über
   die volle Breite. Alles Weitere liegt hinter einem Aufklapper.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-werkstatt-kopf {
    background: var(--gp-ink);
    color: #fff;
    border-radius: var(--gp-r-card);
    padding: var(--gp-s4);
    margin-bottom: var(--gp-s4);
}

/* ── Autohaus-Umschalter ──────────────────────────────────────────────────
   Die erste Frage am Morgen ist „welches Haus", nicht „welcher Zeitraum".
   Deshalb steht die Reihe offen da statt in einem Aufklapper.

   Waagerecht rollbar statt umbrechend: Bei sechs Autohäusern wären drei
   Zeilen Knöpfe das halbe Bild, bevor der erste Auftrag zu sehen ist. Die
   Bildlaufleiste ist ausgeblendet — am Handy wischt man ohnehin. */
.gp-werkstatt-haeuser {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: var(--gp-s3);
    -webkit-overflow-scrolling: touch;
}
.gp-werkstatt-haeuser::-webkit-scrollbar {
    display: none;
}
.gp-werkstatt-haus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: var(--gp-tap);
    padding: 0 14px;
    border: 1px solid var(--gp-line-strong);
    border-radius: var(--gp-r-pill);
    background: var(--gp-surface);
    color: var(--gp-ink);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.gp-werkstatt-haus:hover {
    background: var(--gp-heller);
}
/* Das gewählte Haus trägt die volle Fläche, nicht nur eine Kante — man muss
   es aus zwei Metern Abstand erkennen. */
.gp-werkstatt-haus.aktiv {
    background: var(--gp-ink);
    border-color: var(--gp-ink);
    color: #fff;
}
.gp-werkstatt-haus-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--gp-r-pill);
    background: var(--gp-sunken);
    color: var(--gp-mid);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.gp-werkstatt-haus.aktiv .gp-werkstatt-haus-zahl {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.gp-werkstatt-zahl {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.gp-werkstatt-balken {
    height: 7px;
    border-radius: var(--gp-r-pill);
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    margin-top: 14px;
}
.gp-werkstatt-balken > span {
    display: block;
    height: 100%;
    background: var(--gp-hell);
    border-radius: var(--gp-r-pill);
}
.gp-werkstatt-balken-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--gp-heller);
    margin-top: 6px;
}

.gp-werkstatt-karte[hidden] {
    display: none;
}
.gp-werkstatt-karte--spaet {
    border-left-color: var(--gp-err);
    background: var(--gp-err-bg);
}
.gp-werkstatt-termin {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--gp-mid);
    margin-top: 10px;
}
.gp-werkstatt-termin--spaet {
    color: var(--gp-err);
    font-weight: 700;
}
.gp-werkstatt-aktionen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--gp-s3);
}
.gp-werkstatt-fertig {
    background: var(--gp-ok-bg);
    border-color: var(--gp-ok-line);
    color: var(--gp-ok);
}

/* Der erfasste Mehraufwand — bernsteinfarben, weil er Geld kostet. */
.gp-mehraufwand {
    margin-top: var(--gp-s3);
    background: var(--gp-warn-bg);
    border: 1px solid var(--gp-warn-line);
    border-radius: var(--gp-r-control);
    padding: var(--gp-s3);
}
.gp-mehraufwand-titel {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--gp-warn);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gp-zusatzzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-s3);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--gp-surface);
}
.gp-zusatzzeile.aktiv {
    border-color: var(--gp-accent);
    background: var(--gp-info-bg);
}

.gp-preise {
    margin-top: var(--gp-s3);
    border-top: 1px solid var(--gp-line);
    padding-top: var(--gp-s2);
}
.gp-preiszeile-summe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gp-s2);
}

.gp-fotoreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-s2);
    margin-top: var(--gp-s3);
}
.gp-fotokachel {
    position: relative;
    width: 64px;
    height: 64px;
}
.gp-fotokachel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--gp-r-control);
    border: 1px solid var(--gp-line);
    display: block;
}
.gp-fotokachel form {
    position: absolute;
    top: -6px;
    right: -6px;
}
.gp-fotokachel button {
    width: 22px;
    height: 22px;
    border-radius: var(--gp-r-pill);
    border: 1px solid #fff;
    background: var(--gp-err);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    font-size: 13px;
    padding: 0;
}

/* ── Reiter ────────────────────────────────────────────────────────────────
   Am Handy scrollen sie waagerecht, statt in drei Zeilen umzubrechen. */
.gp-reiter {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--gp-sunken);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-control);
    margin-bottom: var(--gp-s4);
    overflow-x: auto;
    scrollbar-width: none;
}
.gp-reiter::-webkit-scrollbar {
    display: none;
}
/*
 * Der Reiter ist mal ein <button> (Werkstatt), mal ein <a> (Kalender,
 * Auswertungen — dort gehört die Wahl in die Adresse). Beide Fassungen müssen
 * hier abgedeckt sein: Ohne `text-decoration` unterstreicht der Browser den
 * Link, ohne 44 px trifft man ihn am Handy nicht. Das wurde bisher in jeder
 * Ansicht einzeln nachgeflickt — und im Portal vergessen.
 */
.gp-reiter-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 0 auto;
    justify-content: center;
    min-height: var(--gp-tap);
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--gp-mid);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.gp-reiter-knopf:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--gp-ink);
}
.gp-reiter-knopf.aktiv {
    background: var(--gp-ink);
    color: #fff;
}
.gp-reiter-zahl {
    font-family: var(--gp-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* ═══ 18 · Wochenraster ══════════════════════════════════════════════════
   Das Gerüst eines Stundenrasters: eine Spalte für die Uhrzeit, sieben für
   die Tage, darüber eine Linie „jetzt".

   Zwei Kalender bauen das — der des Betriebs (`gp-kalender.css`) und der des
   Autohaus-Portals (`gp-portal.css`). Beide hatten es bis hierher wortgleich
   bei sich stehen: dasselbe Spaltenraster, dieselbe Stundenspalte, dieselbe
   Zelle, dieselbe Jetzt-Linie. Vier Stellen für eine Sache, und beim
   nächsten Mal vier Stellen zu ändern.

   Was WIRKLICH verschieden ist, bleibt dort: Wie dicht die Zeilen stehen, wie
   ein Termin darin aussieht, ab welcher Breite umgeschaltet wird. Der Betrieb
   plant sieben Tage auf einmal und darf enger stehen als das Autohaus, das
   seine eigenen Fahrzeuge liest.

   Die Breite der Stundenspalte steht als `--gp-woche-uhr` an der Hülle: Die
   Jetzt-Linie muss genau dort beginnen, wo die Spalte endet, und beide sollen
   diese Zahl nur einmal kennen.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-woche {
    position: relative;
    --gp-woche-uhr: 62px;
}

.gp-woche-zeile {
    display: grid;
    grid-template-columns: var(--gp-woche-uhr) repeat(7, minmax(0, 1fr));
}

/* Dieselbe Stundenzeile mit EINER Spalte statt sieben — die Tagesansicht.
   Eigene Hülle, weil `--gp-woche-uhr` auch hier gebraucht wird und die
   Jetzt-Linie einen positionierten Vorfahren braucht. Beide Kalender bauen
   daraus ihren Tag; die Dichte kommt aus der jeweiligen Zusatzdatei. */
.gp-tag {
    position: relative;
    --gp-woche-uhr: 62px;
}

.gp-tag-zeile {
    display: grid;
    grid-template-columns: var(--gp-woche-uhr) minmax(0, 1fr);
}

/* `minmax(0, 1fr)` statt `1fr`: Sonst sprengt ein langer Fahrzeugname die
   Spalte und die Tage stehen nicht mehr übereinander. */
.gp-monatsraster {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.gp-woche-uhr {
    text-align: right;
    font-family: var(--gp-mono);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Die Zeile trägt die Stunde, die Karte darin die Uhrzeit — damit gibt es
   keine absolut gesetzten Termine und keine Überlappungen, die verteilt
   werden müssten. */
.gp-woche-zelle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    border-left: 1px solid var(--gp-line);
}

/* Die Linie „jetzt". Sie liegt über dem Raster, beginnt hinter der
   Stundenspalte und fängt keine Klicks ab. */
.gp-woche-jetzt {
    position: absolute;
    left: var(--gp-woche-uhr);
    right: 0;
    height: 2px;
    background: var(--gp-err);
    z-index: 5;
    pointer-events: none;
}
.gp-woche-jetzt::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: var(--gp-r-pill);
    background: var(--gp-err);
}

/* ═══ Personen- und Firmenfarben ═══════════════════════════════════════════
   Der Zustand eines Auftrags bleibt an seiner bisherigen Kante. Diese kleinen
   Kürzel beantworten eine andere Frage: Wem gehört der Termin? */
.gp-identitaeten {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    margin-top: 4px;
}
.gp-identitaet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 22px;
    min-height: 22px;
    max-width: 100%;
    padding: 1px;
    color: var(--gp-person-fg, var(--gp-ink));
    background: var(--gp-person-bg, var(--gp-sunken));
    border: 1px solid var(--gp-person-border, var(--gp-line-strong));
    border-radius: var(--gp-r-pill);
    line-height: 1;
    vertical-align: middle;
}
.gp-identitaet-kuerzel {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: var(--gp-r-pill);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.gp-identitaet--mit-name {
    padding-right: 7px;
}
.gp-identitaet-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 700;
}
.gp-identitaet-rolle {
    color: currentColor;
    opacity: 0.72;
    font-size: 10px;
    white-space: nowrap;
}
.gp-identitaeten-legende {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gp-line);
    background: var(--gp-sunken);
    scrollbar-width: thin;
}
.gp-identitaeten-legende-titel {
    flex: none;
    margin-right: 2px;
    color: var(--gp-ink-3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.gp-identitaeten-legende .gp-identitaet {
    flex: none;
}

@media (max-width: 600px) {
    .gp-identitaet-rolle { display: none; }
    .gp-identitaeten-legende { padding-inline: 8px; }
}