/* ═══════════════════════════════════════════════════════════════
   Kundenseiten — Tokens, Bausteine und Rahmen (toloro#4635)
   ═══════════════════════════════════════════════════════════════

   Das eine Blatt für die Seiten, die Kunden des Betriebs sehen:
   heute das Kundenportal (`templates/portal2/`, `portal2-start.html`),
   als Nächstes Angebot, Unterschrift und Termin.

   Warum ein eigenes Blatt und nicht `desktop/css/*.css`: Auf dem
   Kundenportal-Host leitet nginx `/desktop/…` auf den Büro-Host um
   (`deploy/nginx/desktop-umzug-snippet.conf`); durch kommen nur
   `/desktop/vendor/`, `/desktop/fonts/` und `sw.js`. Ein Blatt aus
   `/desktop/css/` liefe dort in die Umleitung, die CSP verwürfe es, und
   die Kundenseite stünde ungestaltet da.

   Drei Zusagen, jede mit Wächter:
   1. **Gleiche Namen, gleiche Werte.** Der `:root`-Block trägt die Tokens
      aus `desktop/css/tokens.css` wörtlich. Geändert wird dort, hier zieht
      man nach (`kundenseite-tokens.test.js` vergleicht jeden gemeinsamen
      Namen und rechnet die Kontraste nach).
   2. **Gleiche Klasse, gleiches Aussehen.** `.btn`, `.card`, `.badge-…`,
      `.alert-…`, `.empty-state`, `.form-…`, `.list-item`, `.tabs`,
      `.blaettern`, `.table` sehen aus wie im Desktop. Bewusste
      Abweichungen stehen am Baustein: die Hausfarbe (unten) und
      44 px Mindesthöhe der kleinen Knöpfe auf dem Handy.
   3. **Die Hausfarbe des Betriebs ist die Hauptfarbe** (Entscheidung U1,
      Christian 22.10.2026): Primärknopf, aktive Navigation, Links. Sie
      kommt als `--marke`, `--marke-hover`, `--marke-text`, `--marke-soft`
      aus `/branding/farben.css` — dort schon auf Kontrast gezogen
      (Weiß darauf und sie selbst auf den hellen Flächen ≥ 4,5:1,
      `Kundenseitenfarbe`). Fehlt das Blatt oder ist keine Farbe gepflegt,
      gelten die Vorgaben unten: Toloro-Navy, also genau der Desktop.

   Schrift: Inter vom eigenen Server, aus `/desktop/fonts/` (die
   nginx-Ausnahme besteht, `kundenseiten-ohne-desktop-assets.test.js`).
   ═══════════════════════════════════════════════════════════════ */

/* ── Schrift ─────────────────────────────────────────────────── */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/desktop/187408c82171/fonts/inter-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/desktop/187408c82171/fonts/inter-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[x-cloak] { display: none !important; }
[hidden] { display: none !important; }

/* ── Tokens ──────────────────────────────────────────────────── */
/* Wörtlich aus desktop/css/tokens.css (Begründungen und Rechenwege dort),
   danach die Namen, die es nur auf Kundenseiten gibt. */
:root {
    --primary: #15293F;
    --primary-hover: #0D1D2F;
    --primary-soft: #E8EDF3;
    --accent: #E87A2A;
    --accent-hover: #C9621C;
    --accent-soft: #FCEBDD;
    --accent-text: #9A4A0C;
    --accent-strong: #B5560F;
    --accent-strong-hover: #9A4A0C;
    --success: #10B981;
    --success-soft: #D1FAE5;
    --success-hover: #059669;
    --success-text: #166534;
    --success-strong: #15803D;
    --success-strong-hover: #166534;
    --warning: #F59E0B;
    --warning-soft: #FEF3C7;
    --warning-text: #B45309;
    --danger: #EF4444;
    --danger-soft: #FEE2E2;
    --danger-hover: #DC2626;
    --danger-text: #B91C1C;
    --danger-strong: #DC2626;
    --danger-strong-hover: #B91C1C;
    --info: #6366F1;
    --info-soft: #E0E7FF;
    --info-text: #4338CA;
    --neutral: #607086;
    --neutral-soft: #F1F5F9;
    --text: #1E293B;
    --text-secondary: #607086;
    --text-muted: #607086;
    --bg: #FFFFFF;
    --bg-subtle: #F8FAFC;
    --bg-muted: #F1F5F9;
    --surface: #FFFFFF;
    --background: #FFFFFF;
    --border: #E2E8F0;
    --border-active: #CBD5E1;
    --border-control: #7A8A9C;
    /* Die Navy-Fläche des Desktops — die Kundenseiten haben eine helle
       Seitenleiste, tragen die Namen aber mit, damit die Abschrift
       vollständig ist und token-kontrast.py dieses Blatt ganz prüft. */
    --sidebar-bg: #15293F;
    --sidebar-bg-deep: #0D1D2F;
    --sidebar-text: rgba(255, 255, 255, 0.72);
    --sidebar-text-active: #FFFFFF;
    --sidebar-heading: rgba(255, 255, 255, 0.42);
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(255, 255, 255, 0.10);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --focus-ring: 2px solid var(--primary);
    --focus-ring-hell: 2px solid #FFFFFF;
    --focus-ring-abstand: 2px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
    --radius: 10px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-sans);
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Die Hausfarbe des Betriebs — Vorgabe Toloro-Navy. /branding/farben.css
       überschreibt die vier Namen mit der geprüften Farbe des Betriebs. */
    --marke: var(--primary);
    --marke-hover: var(--primary-hover);
    --marke-text: var(--primary);
    --marke-soft: var(--primary-soft);

    /* Maße des Rahmens */
    --kopf-hoehe: 56px;
    --seitenleiste-breite: 248px;
    --inhalt-max: 1200px;
    /* Höhe der Leiste unten ohne den Rand des Geräts: eine Zeile mit den
       fünf Zielen (toloro#4638). */
    --leiste-hoehe: 53px;
}

/* ── Grundlage ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg-subtle);
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--marke-text); text-decoration: none; }
a:hover { color: var(--marke-hover); text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4 { line-height: 1.25; }

/* Symbole in Knöpfen und Zeilen: Farbe vom Text, nie eine eigene. */
.symbol {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.symbol-sm { width: 16px; height: 16px; }
.symbol-lg { width: 24px; height: 24px; }

/* ── Tastatur-Fokus: ein Ring für alles (wie components.css) ─── */
.btn:focus-visible,
button:focus-visible,
summary:focus-visible,
a:focus-visible,
.tab:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-abstand);
}

.form-input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 1px;
}

/* Rasterzellen tragen den Ring innen — Nachbarzellen stoßen an. */
[data-raster-zelle]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
}

[role="button"]:not(:disabled) { cursor: pointer; }

/* ── Karten ──────────────────────────────────────────────────── */
.card {
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.card-header {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.card-header-title {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text);
}

.card-header-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.card-body {
    padding: 0 16px 16px;
}

.card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
}

/* ── Knöpfe ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-base);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
    line-height: 1;
    text-decoration: none;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:disabled:active,
.btn.disabled:active { transform: none; }

/* Hausfarbe statt Navy (U1) — ohne gepflegte Farbe ist --marke Navy. */
.btn-primary { background: var(--marke); color: white; }
.btn-primary:hover { background: var(--marke-hover); color: white; }
.btn-primary:disabled:hover, .btn-primary.disabled:hover { background: var(--marke); }

.btn-outline {
    background: transparent;
    color: var(--marke-text);
    border: 2px solid var(--marke);
}

.btn-outline:hover { background: var(--marke-soft); color: var(--marke-text); }
.btn-outline:disabled:hover, .btn-outline.disabled:hover { background: transparent; }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-muted); color: var(--text); }

.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--border-active); color: var(--text); }

.btn-danger { background: var(--danger-strong); color: white; }
.btn-danger:hover { background: var(--danger-strong-hover); color: white; }

.btn-danger-ghost {
    background: none;
    color: var(--danger-text);
    border: 1px solid var(--border);
}

.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); }

.btn-sm {
    padding: 8px 16px;
    font-size: var(--text-sm);
    min-height: 36px;
}

.btn-xs {
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: 500;
    min-height: 26px;
    gap: 4px;
    white-space: nowrap;
}

.btn-xs.btn-outline { border-width: 1px; }
.btn-block { width: 100%; }

.btn-icon {
    padding: 10px;
    min-height: unset;
}

.btn-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Abweichung vom Desktop mit Grund: Kundenseiten werden am Handy
   bedient (Hausregel „Kundenseiten“), Touch-Ziele brauchen 44 px. */
@media (max-width: 767px) {
    .btn-sm,
    .btn-xs,
    .btn-icon {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Eine Reihe Knöpfe, die umbricht statt hinauszuragen. */
.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ── Felder ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-control);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    background: var(--bg);
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 48px;
}

.form-input--kompakt {
    min-height: 32px;
    padding: 4px 10px;
    font-size: var(--text-sm);
}

.form-input:focus {
    outline: none;
    border-color: var(--marke);
    box-shadow: 0 0 0 3px var(--marke-soft);
}

.form-input::placeholder { color: var(--text-muted); }

textarea.form-input { min-height: 120px; resize: vertical; line-height: 1.5; }

.form-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

.form-error {
    font-size: var(--text-sm);
    color: var(--danger-text);
    margin-top: 4px;
}

/* ── Abzeichen ───────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-primary  { background: var(--primary-soft); color: var(--primary); }
.badge-accent   { background: var(--accent-soft);  color: var(--accent-text); }
.badge-success  { background: var(--success-soft); color: var(--success-text); }
.badge-warning  { background: var(--warning-soft); color: #92400E; }
.badge-danger   { background: var(--danger-soft);  color: var(--danger-text); }
.badge-info     { background: var(--info-soft);    color: var(--info-text); }
.badge-neutral  { background: var(--bg-muted);     color: var(--text-secondary); }

.badge-sm {
    gap: 3px;
    padding: 1px 7px;
    font-size: var(--text-2xs);
}

/* ── Hinweise ────────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.alert-success { background: var(--success-soft); color: var(--success-text); }
.alert-warning { background: var(--warning-soft); color: #92400E; }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-text); }
.alert-info    { background: var(--info-soft);    color: var(--info-text); }

/* ── Erklärung am Element: das ⓘ (fragments/info) ────────────── */
/* Werte wie desktop/css/components.css. Abweichung mit Grund: am Handy
   reicht die Trefferfläche über das Pseudoelement auf 44 × 44 px
   (Hausregel „Kundenseiten“), sichtbar bleibt der Knopf 20 px. */
.info-knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 0 0 4px;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-control);
    border-radius: 50%;
    cursor: pointer;
}

.info-knopf::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}

.info-knopf:hover,
.info-knopf[aria-expanded="true"] {
    color: var(--marke-text);
    border-color: var(--marke);
}

.info-karte {
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .info-knopf::before { width: 44px; height: 44px; }
}

/* ── Leerzustand ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    fill: var(--border);
    margin: 0 auto 16px;
}

.empty-state-title {
    font-weight: 600;
    font-size: var(--text-lg);
    margin-bottom: 4px;
    color: var(--text);
}

.empty-state-text { font-size: var(--text-sm); }

/* ── Zeilenliste ─────────────────────────────────────────────── */
.list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.list-item:last-child { border-bottom: none; }
.list-item:active { background: var(--bg-muted); }

/* ── Reiter ──────────────────────────────────────────────────── */
/* Abweichung vom Desktop: Reiter brechen um, statt seitlich zu scrollen
   (keine waagrechte Scrollfläche auf Kundenseiten). */
.tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    gap: 0;
}

.tab {
    flex-shrink: 0;
    padding: 12px 16px;
    min-height: 44px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover { color: var(--text); text-decoration: none; }

.tab.active,
.tab[aria-current="page"] {
    color: var(--marke-text);
    border-bottom-color: var(--marke);
}

/* ── Blättern unter einer Liste ──────────────────────────────── */
.blaettern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.blaettern-stand {
    flex: 1;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.blaettern-seite { display: inline-block; white-space: nowrap; }
.blaettern-seite::before { content: "·"; margin: 0 6px; }
.blaettern-luecke { display: inline-block; min-width: 84px; }

/* ── Tabellen ────────────────────────────────────────────────── */
/* Abweichung vom Desktop: Spaltenköpfe ohne Versalien (UX-Leitlinien,
   schreiben.md — Versalien bremsen das Lesen). */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    background: var(--bg-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-subtle); }

.table .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Am Handy stapeln die Zeilen, statt seitlich zu scrollen (keine
   waagrechte Scrollfläche, Hausregel „Kundenseiten“). Die Spalten-
   überschrift kommt aus `data-label` an der Zelle. */
@media (max-width: 767px) {
    .tabelle-stapelt thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .tabelle-stapelt,
    .tabelle-stapelt tbody,
    .tabelle-stapelt tr,
    .tabelle-stapelt td {
        display: block;
        width: 100%;
    }

    .tabelle-stapelt tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }

    .tabelle-stapelt tbody tr:last-child { border-bottom: none; }

    .tabelle-stapelt td,
    .tabelle-stapelt tbody tr:last-child td {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        border: none;
        overflow-wrap: anywhere;
    }

    /* Ein Link in der gestapelten Zelle ist ein Touch-Ziel, kein Wort im Satz. */
    .tabelle-stapelt td a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .tabelle-stapelt td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 96px;
        color: var(--text-secondary);
        font-size: var(--text-xs);
        font-weight: 600;
    }
}

/* ── Hilfsklassen (Namen wie im Desktop) ─────────────────────── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-secondary); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-16  { padding: 16px; }
.flex  { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Lesetext mit Zeilenumbrüchen aus der Datenbank. */
.zeilenumbruch { white-space: pre-line; }

/* ═══════════════════════════════════════════════════════════════
   Der Rahmen: Kopf, Navigation, Inhalt
   ═══════════════════════════════════════════════════════════════
   Ab 1024 px eine Seitenleiste links, darunter eine Leiste unten am
   Bildschirmrand — jedes Ziel mit einem Tipp, Symbol und Wort, mindestens
   44 px hoch (heute zwei Tipps über das Menü). Die aktive Seite trägt
   `aria-current="page"` und die Hausfarbe, dazu Strichstärke und Balken:
   nie nur Farbe. */

.sprunglink {
    position: absolute;
    left: 16px;
    top: -200px;
    z-index: 200;
    padding: 12px 16px;
    background: var(--bg);
    color: var(--marke-text);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

.sprunglink:focus { top: 8px; }

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--kopf-hoehe);
    padding: 8px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.kopf-marke {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--text);
    flex-shrink: 0;
}

.kopf-marke:hover { color: var(--text); text-decoration: none; }

.kopf-logo {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.kopf-name {
    font-weight: 600;
    font-size: var(--text-base);
}

.kopf-kunde {
    min-width: 0;
    text-align: right;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

.kopf-kunde-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* „Schaden melden" im Kopf — die eine Handlung, die von jeder Seite aus
   gehen muss (toloro#4638). */
.kopf-melden { flex-shrink: 0; }

@media (max-width: 479px) {
    /* Am schmalen Handy stehen Logo und „Schaden melden" oben, der Kunde
       darunter — sonst bliebe für seinen Namen kaum ein Wort. */
    .kopf { flex-wrap: wrap; row-gap: 4px; }
    .kopf-kunde { order: 3; flex-basis: 100%; text-align: left; }

    /* Am schmalen Handy trägt das Logo den Ort; das Wort bleibt für
       Vorlesehilfen als Name des Links stehen (das Logo hat alt=""). */
    .kopf-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.inhalt {
    display: block;
    padding: 24px 16px calc(var(--leiste-hoehe) + 24px + var(--safe-bottom));
    min-width: 0;
}

.inhalt:focus { outline: none; }

.inhalt-breite {
    max-width: var(--inhalt-max);
    margin: 0 auto;
}

.seitenkopf { margin-bottom: 24px; }

.seitenkopf-titel {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Die Navigation: unter 1024 px die Leiste unten. */
.navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
    padding-bottom: var(--safe-bottom);
}

.navigation-liste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
}

.navigation-ziel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-height: 52px;
    padding: 6px 2px 4px;
    border-top: 3px solid transparent;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: var(--text-secondary);
}

.navigation-ziel:hover {
    color: var(--text);
    background: var(--bg-subtle);
    text-decoration: none;
}

.navigation-ziel .symbol { width: 22px; height: 22px; }

/* Ein Ziel mit zwei Wörtern: das kurze in der Leiste, das lange ab 1024 px. */
.navigation-wort-lang { display: none; }

/* aktiv: die Seite selbst ("page") oder das Ziel, unter dem sie steht
   ("true", die Projektseite unter „Projekte", toloro#4637). */
.navigation-ziel[aria-current="page"],
.navigation-ziel[aria-current="true"] {
    color: var(--marke-text);
    border-top-color: var(--marke);
    font-weight: 700;
}

/* Ab 1024 px: Seitenleiste links, Kopf darüber. */
@media (min-width: 1024px) {
    :root { --leiste-hoehe: 0px; }

    .rahmen {
        display: grid;
        grid-template-columns: var(--seitenleiste-breite) minmax(0, 1fr);
        min-height: calc(100dvh - var(--kopf-hoehe));
    }

    /* Eine eigene Fläche mit Rand: Die Seitenleiste ist ein Bereich, kein
       Text, der neben dem Inhalt in der Luft steht. Die Fläche reicht über
       die ganze Höhe der Seite (die Spalte des Rasters), mit dem Bildlauf
       wandert nur die Liste — eine mitlaufende Fläche in Fensterhöhe ließe
       unter sich einen Streifen Seitengrund frei, sobald der Kopf
       hinausgerollt ist. */
    .navigation {
        position: static;
        padding: 16px 12px;
        border-top: none;
        border-right: 1px solid var(--border);
        box-shadow: none;
        background: var(--bg);
    }

    .navigation-liste {
        position: sticky;
        top: 16px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .navigation-ziel {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-height: 44px;
        padding: 10px 12px;
        border-top: none;
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
        text-align: left;
    }

    .navigation-ziel:hover { background: var(--bg-muted); }

    .navigation-wort-lang { display: inline; }
    .navigation-wort-kurz { display: none; }

    .navigation-ziel[aria-current="page"],
    .navigation-ziel[aria-current="page"]:hover,
    .navigation-ziel[aria-current="true"],
    .navigation-ziel[aria-current="true"]:hover {
        background: var(--marke);
        color: white;
        font-weight: 600;
    }

    .inhalt { padding: 32px 32px 48px; }
}

/* Seiten ohne Navigation (Anmeldung): schmaler Inhalt in der Mitte. */
.inhalt--schmal {
    padding-bottom: calc(48px + var(--safe-bottom));
}

.inhalt--schmal .inhalt-breite { max-width: 640px; }

/* ── Dialog: Fläche, Karte, Kopf (kundendialog.js) ───────────── */
.kundendialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.kundendialog-schleier {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.kundendialog-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: calc(100dvh - 32px);
    background: var(--bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.kundendialog-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--border);
}

.kundendialog-titel {
    font-size: var(--text-base);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.kundendialog-inhalt {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kundendialog-fuss {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
}

/* Laufanzeige, solange Bild oder PDF lädt */
.ladekreis {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--marke);
    border-radius: 50%;
    animation: kundenseite-drehen 0.8s linear infinite;
}

@keyframes kundenseite-drehen { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ladekreis { animation-duration: 2.4s; }
    .btn:active { transform: none; }
}