/* Punktewert-Rechner – mobile-first, Systemschriften, ruhig und sachlich. */
:root {
    --blau: #1a3f7a;
    --blau-dunkel: #12294f;
    --gold: #c9a227;
    --hintergrund: #f6f7f9;
    --karte: #ffffff;
    --text: #1c2430;
    --text-schwach: #5a6472;
    --linie: #dde2e9;
    --gruen: #1e7d3c;
    --gelb: #b07d10;
    --rot: #b02a2a;
    /* Textvarianten mit AA-Kontrast (≥4,5:1) auf hellen Flächen — die hellen
       Töne oben bleiben für Flächen und Grafik (Navy-Köpfe, SVG, Badges-BG). */
    --gold-text: #8a6d1a;   /* statt --gold als Textfarbe auf Weiß */
    --gelb-text: #7d5f00;   /* statt --gelb als Textfarbe auf Hell */
    --gelb-tief: #8a6d1a;   /* Ampel-Gelb-Fläche, trägt weiße Schrift */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--hintergrund);
    color: var(--text);
    line-height: 1.45;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
a { color: var(--blau); }

/* ---------- Seitenrahmen (Navigation v26) ----------
   Handy/Tablet: Kopfleiste oben (Marke, Suche, Zahnrad), Hauptnavigation
   unten mit „Neu“ in der Mitte. Desktop ab 1100 px: Leiste links, Suche
   als Feld oben rechts. */
.sprungmarke {
    position: absolute; left: 12px; top: -60px; z-index: 50;
    background: var(--gold); color: var(--blau-dunkel); font-weight: 700;
    padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.sprungmarke:focus { top: 12px; }
.sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 20px; height: 20px; flex: none; }

.kopf {
    background: var(--blau);
    color: #fff;
    padding: calc(6px + env(safe-area-inset-top)) 6px 6px 16px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.marke {
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.2rem; /* ab ~18,7 px fett gilt Gold auf Navy (4,26:1) als großer Text */
    letter-spacing: 0.02em;
    margin-right: auto;
}
/* Neues Logo (14.10.2026): oben in der Navy-Kopfzeile am Handy/Tablet das ganze Logo wie in der Desktop-Seitenleiste (15.10.2026,
   vorher nur die Bildmarke), auf den schlichten Seiten ebenso; Bilder nie verzerren (Höhe aus der Breite). Neben Suche und Zahnrad
   bleibt es auch auf 320 px schmalen Handys ganz sichtbar. */
.marke img { display: block; height: auto; }
.marke-kopf img { width: 184px; max-width: calc(100vw - 140px); }
.marke-logo img { width: 200px; max-width: 60vw; }
.kopf-suche { display: none; }
.kopf-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; color: #dfe6f2;
}
.kopf-knopf .icon { width: 22px; height: 22px; }
.kopf-knopf:hover { background: rgba(255, 255, 255, .08); }
.kopf-knopf[aria-current="page"] { color: var(--gold); }

.inhalt { max-width: 760px; margin: 0 auto; padding: 4px 12px 24px; }
.inhalt:focus { outline: none; }

/* Pfad und Seitentitel */
.pfad ol {
    list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
    margin: 8px 0 0; padding: 0; font-size: 0.8rem; color: var(--text-schwach);
}
.pfad li { min-width: 0; }
.pfad li + li::before { content: "›"; margin: 0 7px; color: #8b95a3; }
.pfad a { color: var(--blau); text-decoration: none; }
.pfad a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Die aktuelle Seite steht direkt darunter als Überschrift — im Pfad nicht doppelt */
.pfad li[aria-current] { display: none; }
.seiten-titel {
    font-size: 1.3rem; line-height: 1.25; margin: 6px 0 12px;
    color: var(--blau-dunkel); text-wrap: balance; letter-spacing: -0.01em;
}
.pfad + .seiten-titel { margin-top: 2px; }
.seiten-intro { margin: -6px 0 14px; color: var(--text-schwach); font-size: 0.9rem; }

/* Hauptnavigation — Handy: feste Leiste unten */
.hauptnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    background: var(--karte);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 20;
}
.hauptnav-marke { display: none; }
.hauptnav-link {
    flex: 1;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
    min-height: 54px;
    padding: 7px 2px 6px;
    text-decoration: none;
    color: var(--text-schwach);
    font-size: 0.75rem;
    transition: color .15s ease-out;
}
.hauptnav-icon { width: 24px; height: 24px; }
.hauptnav-link[aria-current="page"] { color: var(--blau); font-weight: 600; }
.hauptnav-neu .hauptnav-icon {
    width: 42px; height: 42px; padding: 9px; margin-top: -16px;
    border-radius: 50%; background: var(--blau); color: #fff;
    box-shadow: 0 3px 8px rgba(18, 41, 79, .28);
}
.hauptnav-neu[aria-current="page"] .hauptnav-icon { background: var(--blau-dunkel); color: var(--gold); }
/* „Neu“ oben gibt es nur am Desktop (Runde 7: Tab-Folge = Sichtfolge) */
.hauptnav .hauptnav-neu-oben { display: none; }
/* Unterseiten-Block der Seitenleiste: in der Handy-Leiste ausgeblendet (Pillen auf der Seite reichen) */
.hauptnav-unter { display: none; }
.zaehler {
    position: absolute; top: 3px; left: calc(50% + 5px);
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
    background: var(--gold); color: var(--blau-dunkel);
    font-size: 0.75rem; font-weight: 700; line-height: 19px; text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 1100px) {
    body { padding-bottom: 0; padding-left: 232px; }
    .hauptnav {
        top: 0; right: auto; width: 232px;
        flex-direction: column; gap: 2px;
        background: var(--blau-dunkel);
        border-top: 0;
        padding: 18px 12px;
    }
    .hauptnav-marke {
        display: block; order: -2;
        color: var(--gold); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em;
        text-decoration: none; padding: 4px 12px 20px;
    }
    /* Logo statt Schriftzug (14.10.2026): so breit wie der bisherige Bereich (184 px Innenbreite), Höhe automatisch */
    .hauptnav-marke img { display: block; width: 100%; max-width: 184px; height: auto; }
    .hauptnav-link {
        flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
        min-height: 0; padding: 10px 12px; border-radius: 8px;
        font-size: 0.95rem; color: #c3cfe2;
    }
    .hauptnav-icon { width: 20px; height: 20px; }
    .hauptnav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
    .hauptnav-link[aria-current="page"] { background: rgba(255, 255, 255, .11); color: #fff; }
    .hauptnav-link[aria-current="page"] .hauptnav-icon { color: var(--gold); }
    .hauptnav-neu {
        margin-bottom: 16px;
        border: 1px solid rgba(201, 162, 39, .6); color: var(--gold);
    }
    .hauptnav .hauptnav-neu-oben { display: flex; }
    .hauptnav .hauptnav-neu-mitte { display: none; }
    .hauptnav-neu .hauptnav-icon {
        width: 20px; height: 20px; padding: 0; margin: 0;
        background: none; box-shadow: none; border-radius: 0; color: var(--gold);
    }
    .hauptnav-neu:hover { background: rgba(201, 162, 39, .12); color: var(--gold); }
    .hauptnav-neu[aria-current="page"] .hauptnav-icon { background: none; }
    .hauptnav :focus-visible { outline-color: var(--gold); }
    .zaehler { position: static; margin-left: auto; }
    /* Unterseiten von „Punkte“ in der Seitenleiste (nur Desktop) */
    .hauptnav-unter { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 30px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .16); }
    .hauptnav-unter a { color: #c3cfe2; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 0.88rem; }
    .hauptnav-unter a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
    .hauptnav-unter a[aria-current="page"] { background: rgba(255, 255, 255, .11); color: var(--gold); font-weight: 600; }

    .kopf {
        background: transparent; color: var(--text);
        max-width: 1400px; margin: 0 auto; padding: 14px 28px 0; gap: 6px;
        justify-content: flex-end;
    }
    .kopf .marke, .kopf-knopf-suche { display: none; }
    .kopf-suche { display: flex; align-items: center; position: relative; width: min(440px, 55%); }
    .kopf-suche input {
        width: 100%; font: inherit; font-size: 0.9rem; color: var(--text);
        padding: 8px 12px 8px 36px; min-height: 40px;
        border: 1px solid var(--linie); border-radius: 8px; background: var(--karte);
    }
    .kopf-suche input:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
    .kopf-suche-icon { position: absolute; left: 11px; width: 18px; height: 18px; color: var(--text-schwach); pointer-events: none; }
    .kopf-knopf { color: var(--text-schwach); width: 40px; height: 40px; }
    .kopf-knopf:hover { background: var(--linie); }
    .kopf-knopf[aria-current="page"] { color: var(--blau); }

    .inhalt { max-width: 1400px; padding: 0 28px 32px; }
    .seiten-titel { font-size: 1.55rem; margin-bottom: 16px; }
}

/* Breite Bildschirme: zweispaltiges Karten-Layout statt schmaler Endlos-
   Spalte. CSS-Columns füllen erst links, dann rechts; break-inside hält
   jede Karte am Stück. Seiten mit eigenem Raster (inhalt-raster) ohne. */
@media (min-width: 1440px) {
    .inhalt:not(.inhalt-raster):not(.inhalt-schmal):not(.inhalt-breit) { columns: 2; column-gap: 16px; } /* schlichte Seiten (Anmeldung, Rechtstexte) bleiben einspaltig (11.10.2026) */
    .inhalt > .karte, .inhalt > .warnung, .inhalt > .hinweis-box, .inhalt > form {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .inhalt > datalist { display: none; }
    /* Breite Tabellen (Hotel-Wächter) und Seitenkopf über beide Spalten */
    .inhalt > .karte-voll, .inhalt > .pfad, .inhalt > .seiten-titel, .inhalt > .seiten-intro,
    .inhalt > .flash, .inhalt > .fall-meta, .inhalt > .reise-zuordnung,
    .inhalt > .suche-feld, .inhalt > .suche-zahl, .inhalt > .waechter-zeile, .inhalt > .warnung,
    .inhalt > .unternav { column-span: all; } /* Pillen-Navigation (Punkte) wurde sonst auf beide Spalten verteilt */
    .inhalt > .demo-banner, .inhalt > .sitzungs-hinweis { column-span: all; } /* E7: Banner wurde sonst auf beide Spalten verteilt */
}

/* Karten & Typografie */
.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--blau-dunkel); }

/* Karten-Kopf: dunkelblauer Balken mit goldener Überschrift + weißer
   Kurzerklärung — gleiche Optik wie Titelleiste und Alert-Mails */
.karte-kopf {
    background: var(--blau-dunkel);
    margin: -14px -16px 14px;
    padding: 10px 16px 9px;
    border-radius: 9px 9px 0 0;
}
.karte-kopf h2 { color: var(--gold); margin: 0; font-size: 1rem; letter-spacing: .2px; }
.karte-kopf p { color: #dfe6f2; margin: 3px 0 0; font-size: 0.78rem; line-height: 1.35; max-width: 75ch; }
h3 { font-size: 0.92rem; margin: 0 0 6px; color: var(--blau-dunkel); }
.klein { font-size: 0.82rem; color: var(--text-schwach); }
.hinweis { color: var(--text-schwach); font-size: 0.88rem; }
.rechts { text-align: right; }
code { background: var(--hintergrund); padding: 1px 5px; border-radius: 4px; }

/* Flash & Warnungen */
.flash {
    background: #e8f2ea;
    border: 1px solid #bcd9c4;
    color: var(--gruen);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}
/* hidden schlägt display-Regeln von Klassen (z. B. .feld-reihe) */
[hidden] { display: none !important; }
/* Fehler rot (Runde 5) — als Seitenmeldung und direkt im Formular */
.flash-fehler { background: #fbeaea; border-color: #e6b8b8; color: var(--rot); }
.formular-fehler {
    background: #fbeaea; border: 1px solid #e6b8b8; color: var(--rot); border-radius: 8px;
    padding: 8px 12px; margin: 0 0 4px; font-size: 0.9rem; font-weight: 600;
}
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld-fehler { border-color: var(--rot); }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--rot); }
.feld-fehler { border: 1px solid var(--rot); border-radius: 8px; padding: 6px 8px; }
.warnung {
    background: #fdf3e0;
    border: 1px solid #ecd49a;
    color: var(--gelb-text);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

/* Formulare */
.formular { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.feld { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.feld > span { font-size: 0.82rem; color: var(--text-schwach); }
.feld > span em { font-style: normal; color: var(--gold-text); }
.feld small { font-size: 0.78rem; color: var(--text-schwach); }
.feld .abweichung { color: var(--gold-text); font-weight: 600; }
.feld .abweichung a { color: var(--blau); font-weight: 400; }
.feld .plausi-warnung { color: var(--gelb-text); font-weight: 600; }
.feld-check-gruppe > span { font-size: 0.82rem; color: var(--text-schwach); display: block; margin-bottom: 4px; }
.check-zeile { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.weg-hinweis { font-size: 0.78rem; color: var(--text-schwach); margin: -4px 0 0; }
.feld input, .feld select, .feld textarea {
    font: inherit;
    padding: 9px 10px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: #fff;
    min-height: 40px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
    outline: 2px solid var(--blau);
    outline-offset: 0;
    border-color: var(--blau);
}
.feld-reihe { display: flex; gap: 10px; }
/* Am Handy stehen alle Feldpaare untereinander, volle Breite */
@media (max-width: 600px) {
    .feld-reihe { flex-direction: column; }
}
/* Felder dürfen in schmalen Spalten schrumpfen — sonst setzt das längste
   Option-Label eines Selects die Mindestbreite der ganzen Reihe, und Felder
   liefen aus der Karte (Hotel-Wächter bei 1440 px, Posten-Formular der
   Reise ab 1300 px, Barbuchung im Fall-Formular) */
.feld { min-width: 0; }
.feld input, .feld select, .feld textarea { max-width: 100%; min-width: 0; }
/* Schmale Formularspalten (Seitenspalte der Reise) stapeln wie am Handy */
.formular { container-type: inline-size; }
@container (max-width: 480px) {
    .feld-reihe { flex-direction: column; }
}
/* Einheit als Suffix rechtsbündig im Eingabefeld */
.feld-mit-suffix { position: relative; display: block; }
.feld-mit-suffix input { width: 100%; }
.feld-mit-suffix .suffix {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-schwach);
    font-size: 0.8rem;
    pointer-events: none;
}
.feld-mit-suffix input { padding-right: 64px; }
.feld-check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.9rem; }
fieldset.hilfsrechner { border: 1px dashed var(--linie); border-radius: 8px; padding: 8px 10px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.hilfsrechner legend { font-size: 0.8rem; color: var(--text-schwach); padding: 0 4px; }
.hilfsrechner-box { border: 1px dashed var(--linie); border-radius: 8px; padding: 6px 10px; }
.hilfsrechner-box summary { font-size: 0.84rem; color: var(--blau); cursor: pointer; }

/* Knöpfe */
.knopf {
    display: inline-block;
    background: var(--blau);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 11px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.knopf:active { background: var(--blau-dunkel); }
.knopf-zweit { background: #fff; color: var(--blau); border: 1px solid var(--blau); }
.knopf-gefahr { background: #fff; color: var(--rot); border: 1px solid var(--rot); }
.knopf-klein { padding: 5px 10px; font-size: 0.8rem; font-weight: 500; }
.knopf-gross { display: block; margin: 10px 0; padding: 18px; font-size: 1.05rem; }
.inline { display: inline-block; margin: 4px 0; }

/* Ergebnis */
.ergebnis-titel { margin-top: 16px; }
.fazit {
    background: #eef2f9;
    border: 1px solid rgba(201, 162, 39, .55);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.fazit h3 { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fazit p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.fazit .ampel-legende { margin: 0 0 8px; }
.varianten { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .varianten { grid-template-columns: 1fr 1fr; } }
.variante { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; }
.ct-gross { font-size: 1.7rem; font-weight: 700; color: var(--blau-dunkel); margin: 4px 0; }
.ct-einheit { font-size: 0.85rem; font-weight: 400; color: var(--text-schwach); }
.block { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 0; font-size: 0.86rem; }
.kv dt { color: var(--text-schwach); }
.kv dd { margin: 0; }
/* "Tatsächliche Ersparnis" stärker gewichten als den Gegenwert */
.kv .ersparnis-dt { color: var(--text); font-weight: 700; }
.kv .ersparnis { font-weight: 700; font-size: 1.02rem; }
.kv .ersparnis-plus { color: var(--gruen); }
.kv .ersparnis-minus { color: var(--rot); }
/* Beträge nie zwischen Zahl und Einheit umbrechen; auf sehr schmalen
   Karten stattdessen Beschriftung und Wert untereinander setzen */
.kv dd { overflow-wrap: normal; }
@media (max-width: 420px) {
    .kv { grid-template-columns: 1fr; gap: 0; }
    .kv dt { margin-top: 5px; }
    .kv dd { margin-bottom: 2px; }
}
.auffuellwege { margin: 6px 0 0; padding-left: 20px; font-size: 0.86rem; }
.auffuellwege li { margin-bottom: 5px; }
.deckung-ok { color: var(--gruen); font-weight: 600; }
.deckung-fehlt { color: var(--rot); font-weight: 600; }

/* Gegenüberstellung Punkte-/Barbuchung */
.gegenueber { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
@media (min-width: 620px) { .gegenueber { grid-template-columns: 1fr 1fr; } }
.gegen-kasten { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; }
.gegen-kasten ul { list-style: none; margin: 4px 0; padding: 0; font-size: 0.86rem; }
.gegen-kasten li { padding-left: 20px; position: relative; margin-bottom: 4px; }
.gegen-pro li::before { content: "+"; position: absolute; left: 4px; color: var(--gruen); font-weight: 700; }
.gegen-contra li::before { content: "−"; position: absolute; left: 4px; color: var(--rot); font-weight: 700; }
.gegen-kasten .manuell { font-style: italic; }
.gegen-notiz { font-size: 0.84rem; margin: 6px 0 0; color: var(--text-schwach); }
.gegen-spalte > span { font-weight: 600; color: var(--blau-dunkel); font-size: 0.88rem; }

/* Ampel */
.ampel {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}
.ampel-gruen { background: var(--gruen); }
.ampel-gelb { background: var(--gelb-tief); }
.ampel-rot { background: var(--rot); }
.ampel-grau { background: var(--text-schwach); }
/* Entscheidung passt zur Empfehlung bzw. Grenzfall: ruhig statt Signalfarbe */
.ampel-ruhig { background: #eef2f9; color: var(--blau-dunkel); }
.ampel-text { font-size: 0.85rem; margin: 6px 0 0; }

/* Listen (Fristen, Fälle) */
.fristen, .faelle { list-style: none; margin: 0; padding: 0; }
.fristen li, .faelle li { border-bottom: 1px solid var(--linie); }
.fall-zeile { display: flex; align-items: center; gap: 8px; }
.fall-zeile > a { flex: 1; min-width: 0; }
.status-umschalter select {
    font-size: 0.78rem;
    padding: 4px 6px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: #fff;
    color: var(--text-schwach);
}
.ergebnis-einklapp { margin-top: 16px; }
.ergebnis-einklapp > summary { cursor: pointer; color: var(--blau); font-weight: 600; padding: 6px 0; }
/* Falldetail: Formular hinter dem Ergebnis, aufklappbar */
.eingaben-einklapp { margin-top: 10px; }
.eingaben-einklapp > summary { cursor: pointer; color: var(--blau); font-weight: 600; padding: 6px 0; }
.eingaben-einklapp[open] > summary { margin-bottom: 8px; }
details.erweitert > summary { cursor: pointer; color: var(--text-schwach); padding: 4px 0; }
details.erweitert[open] > summary { margin-bottom: 8px; }
.fall-meta .ampel { vertical-align: middle; }
.fristen li:last-child, .faelle li:last-child { border-bottom: 0; }
.fristen a, .faelle a { display: block; padding: 10px 4px; text-decoration: none; color: var(--text); }
.frist-bald { background: #fdf3e0; border-radius: 6px; }
.frist-abgelaufen { background: #fbe9e9; border-radius: 6px; }
.frist-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.9rem; } /* 15.10.2026: wrap für 320 px */
.frist-zeile.erledigt { color: var(--text-schwach); text-decoration: line-through; }

/* Tabellen — gleiche Optik wie die Alert-Mails (heller Kopfbalken,
   Versal-Spaltentitel, kräftige Zahlen, dezente Zebra-Streifen) */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabelle th, .tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: left; }
.tabelle th.rechts, .tabelle td.rechts { text-align: right; }
.tabelle thead tr { background: #eef2f9; }
.tabelle th {
    color: var(--text-schwach);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: none;
}
.tabelle tbody tr:nth-child(even) { background: #f7f9fc; }
.tabelle td.rechts { font-weight: 600; color: #12294f; }
tr.veraltet td { color: var(--gelb-text); }
tr.gruppe td, tr.pool-summe td { background: #fff !important; }
tr.gruppe td {
    padding-top: 16px;
    border-bottom: 2px solid var(--linie);
    font-size: 0.92rem;
    color: #12294f;
}
tr.pool-summe td { border-top: 2px solid var(--linie); }
.bestand-schnell input[type="text"] { max-width: 7.5em; padding: 3px 6px; }
.bestand-schnell { white-space: nowrap; }

/* Mobil: Tabellen laufen nie mehr aus der Karte — sie scrollen innerhalb
   der Karte horizontal, Zeileninhalte bleiben einzeilig lesbar. */
@media (max-width: 700px) {
    .tabelle {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tabelle th, .tabelle td { white-space: nowrap; padding: 8px 8px; }
    /* Programmnamen dürfen umbrechen — so bleiben die Zahlenspalten ohne
       Scrollen sichtbar, nur Nebenspalten wandern ggf. aus dem Bild */
    .tabelle th:first-child, .tabelle td:first-child { white-space: normal; min-width: 9em; }
    .bestand-schnell input[type="text"] { max-width: 6em; }

    /* "Meine Punkte": gestapelte Zeilen statt horizontalem Scroll — die
       Kernaktion (neuen Stand eintragen) bleibt komplett im Viewport.
       Zeile = Name (volle Breite) / Bestand links + Eingabe rechts / Stand. */
    .tabelle-punkte { display: block; overflow: visible; }
    .tabelle-punkte thead { display: none; }
    .tabelle-punkte tbody { display: block; }
    .tabelle-punkte tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2px 10px;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid var(--linie);
        background: none !important;
    }
    .tabelle-punkte td {
        display: block;
        border-bottom: 0;
        padding: 0;
        white-space: normal;
        min-width: 0;
    }
    .tabelle-punkte td:nth-child(1) { grid-column: 1 / -1; }
    /* d29: die Pille rutscht auf dem Handy unter den Programmnamen */
    .tabelle-punkte .verfall-pille { display: table; margin: 3px 0 0; white-space: normal; }
    .tabelle-punkte td:nth-child(2) {
        grid-row: 2;
        grid-column: 1;
        text-align: left;
        font-weight: 600;
        color: var(--blau-dunkel);
    }
    .tabelle-punkte td:nth-child(3) { grid-row: 2; grid-column: 2; text-align: right; }
    .tabelle-punkte td:nth-child(4) {
        grid-row: 3;
        grid-column: 1 / -1;
        font-size: 0.75rem;
        color: var(--text-schwach);
    }
    .tabelle-punkte td:empty { display: none; }
    .tabelle-punkte tr.gruppe { display: block; border-bottom: 2px solid var(--linie); padding: 14px 0 4px; }
    /* Basis-Regel "tr.gruppe td" (2px-Border, 16px-Padding) überstimmen —
       sonst unterstreicht die td-Border jede umbrochene Überschriftszeile */
    .tabelle-punkte tr.gruppe td { display: inline; border-bottom: 0; padding: 0; }
    /* Eingabefeld und OK-Knopf in Daumen-tauglicher Größe */
    .tabelle-punkte .bestand-schnell input[type="text"] { min-height: 40px; padding: 6px 8px; max-width: 7em; }
    .tabelle-punkte .bestand-schnell .knopf-klein { padding: 10px 14px; font-size: 0.85rem; }
}
tr.abweichung-stark td { background: #fbe9e9; color: var(--rot); font-weight: 600; }
.badge-pruefen, .badge-inaktiv {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdf3e0;
    color: var(--gelb-text);
}
.badge-inaktiv { background: var(--linie); color: var(--text-schwach); }
/* d29 (19.10.2026): Pille „Schutz und Verfall“ neben dem Programmnamen in „Meine Punkte“ — Text statt nur Farbe, Link in den Kalender */
.verfall-pille {
    display: inline-block; vertical-align: middle; white-space: nowrap;
    font-size: 0.7rem; font-weight: 700; line-height: 1.5; padding: 1px 7px; margin-left: 6px;
    border-radius: 999px; text-decoration: none;
}
.verfall-pille:hover, .verfall-pille:focus-visible { text-decoration: underline; }
.vp-schutz { background: #e3efe5; color: #1f5f30; }
.vp-verfall { background: #eef2f9; color: var(--blau-dunkel); }
.vp-warn { background: #fdf3e0; color: var(--gelb-text); }
.vp-kein { background: var(--linie); color: var(--text-schwach); }

/* Geschlossene Accordions: Inhalt auch per CSS hart verstecken. Safari
   zeichnet <details>-Inhalte im Spalten-Layout (columns: 2) beim ersten
   Paint sonst kurz ausgeklappt, bevor das native Zuklappen greift —
   "alles blitzt auf und verschwindet". */
details:not([open]) > *:not(summary) { display: none; }

/* Programmverwaltung */
.programm { border-bottom: 1px solid var(--linie); padding: 6px 0; }
.programm:last-child { border-bottom: 0; }
.programm summary { cursor: pointer; padding: 6px 0; }
.programm[open] summary { margin-bottom: 8px; }
.programm-neu summary { color: var(--blau); }

/* Verlaufs-SVG */
.verlauf-svg { width: 100%; height: auto; margin-bottom: 8px; }
.linie-daten { fill: none; stroke: var(--blau); stroke-width: 2.5; }
.punkt { fill: var(--gold); stroke: var(--blau); stroke-width: 1; }
.linie-ziel { stroke: var(--gruen); stroke-width: 1; stroke-dasharray: 5 4; }
.linie-ek { stroke: var(--rot); stroke-width: 1; stroke-dasharray: 2 4; }
.svg-label { font-size: 10px; fill: var(--text-schwach); }
.svg-rechts { text-anchor: end; }

.typwahl { text-align: center; }

/* ---------- Bausteine der Navigation v26 ---------- */
::selection { background: rgba(201, 162, 39, .32); }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
input[type="checkbox"]:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.tabelle td.rechts, .ct-gross, .feed-datum, .fp-datum { font-variant-numeric: tabular-nums; }
summary { cursor: pointer; }

/* Etiketten (Lebenszyklus, Lücke) */
.chip {
    display: inline-block; vertical-align: middle; white-space: nowrap;
    font-size: 0.75rem; font-weight: 600; line-height: 1.5;
    padding: 0 8px; border-radius: 999px; border: 1px solid transparent;
}
.chip-fest { background: #e6f0e9; color: #17662e; }
.chip-offen { background: #fdf3e0; color: var(--gelb-text); }
.chip-ruhig { background: #eef2f9; color: var(--blau-dunkel); }
.chip-aus { background: var(--linie); color: var(--text-schwach); }
.chip-luecke { background: #fff; border: 1px dashed var(--gold-text); color: var(--gold-text); }
.chip-aufgabe { background: #eef2fb; border: 1px solid #6b7fb3; color: #2f4580; } /* N9: Erledigung statt Buchung */
.meta { font-size: 0.82rem; color: var(--text-schwach); }
.meta .ampel { vertical-align: middle; }
.punkt-status {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--gruen); flex: none; vertical-align: middle;
}
.punkt-status.warn { background: var(--gold); }
.punkt-status.fehler { background: var(--rot); }
.punkt-status.aus { background: #fff; border: 2px solid #a8b1bd; }

/* Statuszeile der Wächter (Heute, Wächter-Seite) */
.waechter-zeile {
    display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
    margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
    background: #f3f6fb; font-size: 0.82rem; color: var(--text-schwach);
}
.waechter-zeile a { color: var(--blau); text-decoration: none; }
.waechter-zeile a:hover { text-decoration: underline; }
.waechter-zeile > span { display: inline-flex; align-items: center; gap: 7px; }
.waechter-zeile strong { color: var(--text); font-weight: 600; }

/* Als Nächstes */
.feed { list-style: none; margin: 0; padding: 0; }
.feed > li { border-bottom: 1px solid var(--linie); }
.feed > li:last-child { border-bottom: 0; }
.feed a {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 9px 4px; text-decoration: none; color: var(--text); border-radius: 6px;
}
.feed a:hover { background: #f5f7fb; }
.feed-datum { display: flex; flex-direction: column; line-height: 1.2; }
.feed-datum strong { font-size: 0.92rem; color: var(--blau-dunkel); }
.feed-datum small { font-size: 0.75rem; color: var(--text-schwach); }
.feed-datum .icon { width: 22px; height: 22px; color: var(--gold-text); }
.feed-titel { display: block; font-weight: 600; font-size: 0.92rem; }
.feed-text { display: block; font-size: 0.8rem; color: var(--text-schwach); }
.feed-text b { color: var(--text); font-weight: 600; }
.feed-pfeil { width: 16px; height: 16px; color: #a8b1bd; }
.stufe-gelb .feed-datum strong { color: var(--gelb-text); }
.stufe-rot .feed-datum strong { color: var(--rot); }
.stufe-rot > a { background: #fbefef; }
.feed-mehr > summary { padding: 8px 4px 2px; color: var(--blau); font-size: 0.86rem; font-weight: 600; }

/* Streckenband: Aufenthalte als Blöcke, Flüge als Punkte */
.band { margin: 4px 0 6px; }
/* d37 (19.10.2026): Symbol (Flugzeug, Auto, Bahn, Bus, Fähre) statt Punkt — gebucht blau, offen gold; d37b: 24 px am Computer, 20 px am Handy,
   dazu das Bett-Symbol jedes Hotels am Anreisetag; Symbole am selben Tag um je --band-schritt versetzt (lib/render.php band_html) */
.band { --band-schritt: 26px; }
.band-fluege { position: relative; height: 26px; }
.band-flug { position: absolute; top: 0; width: 24px; height: 24px; margin-left: -12px; color: var(--blau); }
.band-flug .band-symbol { display: block; width: 24px; height: 24px; }
.band-flug.offen { color: var(--gold-text); }
.band-spur { position: relative; height: 28px; border-radius: 6px; background: var(--hintergrund); border: 1px solid var(--linie); }
.band-block {
    position: absolute; top: 2px; bottom: 2px; border-radius: 4px;
    display: flex; align-items: center; padding: 0 6px; overflow: hidden;
    background: var(--blau); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.band-block > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* d37b: „…“ nur, wenn der Text nicht passt */
@media (max-width: 700px) {
    .band { --band-schritt: 22px; }
    .band-fluege { height: 22px; }
    .band-flug { width: 20px; height: 20px; margin-left: -10px; }
    .band-flug .band-symbol { width: 20px; height: 20px; }
}
.band-block.offen { background: #fff8e8; color: var(--gold-text); border: 1px dashed var(--gold-text); }
.band-achse { display: flex; justify-content: space-between; margin-top: 3px; font-size: 0.75rem; color: var(--text-schwach); }
.band-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 0.75rem; color: var(--text-schwach); }
.band-legende span { display: inline-flex; align-items: center; gap: 5px; }
.band-legende i { display: inline-block; width: 14px; height: 9px; border-radius: 2px; background: var(--blau); }
.band-legende i.offen { background: #fff8e8; border: 1px dashed var(--gold-text); }
.reise-zahlen { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; font-size: 0.86rem; }
.reise-zahlen strong { color: var(--blau-dunkel); }

/* Fahrplan einer Reise */
.fahrplan { list-style: none; margin: 0; padding: 0; }
.fp-zeile {
    display: grid; grid-template-columns: 52px 22px minmax(0, 1fr); gap: 4px 10px;
    padding: 10px 6px; border-bottom: 1px solid var(--linie);
}
.fp-zeile:last-child { border-bottom: 0; }
.fp-datum { line-height: 1.2; }
.fp-datum strong { display: block; font-size: 0.9rem; color: var(--blau-dunkel); }
.fp-datum small { font-size: 0.75rem; color: var(--text-schwach); }
.fp-icon { color: var(--blau); padding-top: 1px; }
.fp-icon .icon { width: 20px; height: 20px; }
.fp-titel { font-weight: 600; color: var(--text); text-decoration: none; }
a.fp-titel:hover { color: var(--blau); text-decoration: underline; text-underline-offset: 2px; }
.fp-meta { font-size: 0.8rem; color: var(--text-schwach); margin-top: 2px; }
.fp-meta a { color: var(--blau); }
.fp-luecke {
    background: #fffbf0; border: 1px dashed #d9bf6a; border-radius: 8px; margin: 6px 0;
}
.fp-luecke .fp-icon { color: var(--gold-text); }
.fp-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fp-aktionen form { margin: 0; }
.fp-mehr > summary { list-style: none; cursor: pointer; }
.fp-mehr > summary::-webkit-details-marker { display: none; }
.fp-mehr[open] { flex-basis: 100%; }
.fp-mehr > summary .auf, .fp-mehr[open] > summary .zu { display: none; } /* „Mehr“ wird aufgeklappt zu „Weniger“ (12.10.2026) */
.fp-mehr[open] > summary .auf { display: inline; }
.fp-mehr-inhalt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Gleiches Zeilenmuster für Wächter und Listen */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeile {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
    padding: 10px 4px; border-bottom: 1px solid var(--linie);
}
.zeile:last-child { border-bottom: 0; }
.zeile > .punkt-status { margin-top: 6px; }
.zeile-titel { font-weight: 600; color: var(--text); text-decoration: none; }
a.zeile-titel:hover { color: var(--blau); text-decoration: underline; text-underline-offset: 2px; }
.zeile-meta { font-size: 0.8rem; color: var(--text-schwach); margin-top: 2px; }
.zeile-meta a { color: var(--blau); }
.zeile-wert { text-align: right; font-size: 0.86rem; font-weight: 600; color: var(--blau-dunkel); white-space: nowrap; }
.zeile-wert small { display: block; font-weight: 400; color: var(--text-schwach); font-size: 0.78rem; }
/* Pausiert/verworfen über Farbe statt Deckkraft — opacity .6 fiel unter AA-Kontrast (Runde 7) */
.zeile.pausiert { background: #f8f9fb; }
.zeile.pausiert .zeile-titel, .zeile.pausiert .zeile-wert, .zeile.pausiert .zeile-meta a { color: var(--text-schwach); }
.karten-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Auswahl „Neu“ */
.auswahl { list-style: none; margin: 0; padding: 0; }
.auswahl li { border-bottom: 1px solid var(--linie); }
.auswahl li:last-child { border-bottom: 0; }
.auswahl a {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; align-items: center;
    padding: 12px 4px; text-decoration: none; color: var(--text); border-radius: 8px;
}
.auswahl a:hover { background: #f5f7fb; }
.auswahl-icon {
    width: 36px; height: 36px; padding: 8px; border-radius: 9px;
    background: #eef2f9; color: var(--blau);
}
.auswahl strong { display: block; font-size: 0.95rem; }
.auswahl small { display: block; font-size: 0.8rem; color: var(--text-schwach); }
.auswahl .feed-pfeil { justify-self: end; }
/* E4 (13.10.2026): einfache Ansicht — Vollmodus-Blöcke aus, Hinweise an */
.nur-einfach { display: none; }
.ansicht-einfach .voll { display: none !important; }
.ansicht-einfach .nur-einfach { display: block; }
.ansicht-fuss { margin: 1.2rem 0 0.4rem; padding: 0 16px; font-size: 0.82rem; color: var(--text-schwach); display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; }
.link-knopf { background: none; border: 0; padding: 0; color: var(--navy, #1a3f7a); text-decoration: underline; cursor: pointer; font: inherit; }
.hinweis-kasten { background: #eef3fa; border: 1px solid var(--linie); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; font-size: 0.92rem; }
.start-liste { list-style: none; margin: 0; padding: 0; }
.start-liste li { padding: 0.35rem 0; border-bottom: 1px solid var(--linie); }
.start-liste li:last-child { border-bottom: 0; }
.start-liste .vorhanden { color: var(--text-schwach); font-size: 0.85rem; margin-left: 0.4rem; }
.start-schritte { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-schwach); margin-bottom: 0.6rem; }
.start-schritte .aktiv { color: var(--text); font-weight: 600; }
/* d27b (19.10.2026): Abfrage nach dem Schnell-Update in der Zeile (kostenlos/gekauft, Herkunft, Speichern/Später) und Hinweis auf offene Zugänge */
.herkunft-frage { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; align-items: center; margin-top: 0.45rem; font-weight: 400; color: var(--text); }
.herkunft-frage .hf-optionen { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.herkunft-frage .feld-check { margin: 0; font-size: 0.88rem; }
.herkunft-frage input[type="text"] { width: 4.5rem; padding: 3px 6px; }
.herkunft-frage input[type="text"][hidden] { display: none; }
.herkunft-frage select { padding: 4px 6px; font-size: 0.88rem; max-width: 17rem; }
.herkunft-frage .hf-herkunft { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.herkunft-frage .hf-knoepfe { display: inline-flex; gap: 0.4rem; }
.schnell-aendern { font-weight: 600; margin-left: 0.3rem; }
/* d27c (19.10.2026): Liste der Zugänge — Filter, Tabelle, Sammelkorrektur, Vorschau; am Handy je Zugang eine Karte mit drei Zeilen */
.zug-filter-box { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 12px; margin: 0 0 10px; }
.zug-filter-box > summary { font-size: 0.86rem; font-weight: 600; color: var(--blau); cursor: pointer; }
.zug-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; padding: 6px 0 4px; }
.zug-filter label { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; color: var(--text-schwach); }
.zug-filter label > span { font-weight: 600; }
.zug-filter select { padding: 5px 8px; font-size: 0.9rem; }
.zug-filter .feld-check { flex-direction: row; align-items: center; font-size: 0.88rem; color: var(--text); padding-bottom: 6px; }
.zug-summe { margin: 0 0 8px; }
.zug-tabelle { font-size: 0.84rem; } /* Feinschliff 19.10.2026: passt ab 1024 px ohne Querscrollen in die Karte */
.zug-tabelle th, .zug-tabelle td { padding: 6px 7px; }
.zug-tabelle td.rechts, .zug-tabelle th.rechts { white-space: nowrap; }
.zug-tabelle td.zc-konto { white-space: nowrap; }
.zug-tabelle td.zc-herkunft { max-width: 24em; }
.zug-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* höchstens zwei Zeilen, dann „…“ */
.zug-info { cursor: help; }
.zug-unter { display: block; font-size: 0.8rem; color: var(--text-schwach); }
.zug-unter:empty { display: none; }
.zug-konto-name { color: var(--text); }
.zug-tabelle tr.zug-offen td { background: #fffaf0; }
.zug-tabelle tr.zug-verbraucht td { color: var(--text-schwach); }
.zug-tabelle tr.zug-aktiv td { background: #eef2f9; }
.zug-tabelle td.zc-check { width: 1.6rem; }
.zug-tabelle .zug-ct { display: block; font-size: 0.74rem; color: var(--text-schwach); }
.zug-tabelle .nur-handy, .zug-tabelle td.zc-zeile2 { display: none; }
.zug-pille-offen { display: inline-block; background: #fff0c2; color: #7a5200; border-radius: 10px; padding: 1px 8px; font-size: 0.78rem; font-weight: 600; }
.zug-pille-verbraucht { display: inline-block; background: #e9edf2; color: var(--text-schwach); border-radius: 10px; padding: 1px 8px; font-size: 0.76rem; }
.zug-bearbeiten td { background: #f5f7fb !important; padding: 10px 12px; }
.zug-form h3 { font-size: 0.98rem; margin: 0 0 8px; }
.zug-limit-satz { color: var(--blau-dunkel); font-weight: 600; }
.zug-sammel { border: 1px dashed var(--linie); border-radius: 8px; padding: 10px 12px; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.9rem; }
.zug-sammel .feld-check { margin: 0; }
.zug-sammel select, .zug-sammel input[type="text"] { padding: 4px 6px; }
.zug-sammel input[type="text"] { width: 4rem; }
.zug-sammel-herkunft { display: inline-flex; align-items: center; gap: 0.4rem; }
.zug-vorschau { background: #e8f0fb; border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.zug-vorschau h3 { font-size: 1rem; margin: 0 0 6px; }
.zug-vorschau .zug-limit { background: #fff6e0; border-radius: 6px; padding: 6px 10px; font-weight: 600; margin: 6px 0; }
.zug-vorschau-liste { margin: 6px 0 10px 1.1rem; padding: 0; }
.zug-fuss { margin-top: 12px; }
@media (max-width: 700px) {
    .zug-filter { flex-direction: column; align-items: stretch; }
    .zug-filter select { width: 100%; box-sizing: border-box; }
    .zug-filter .feld-check { padding-bottom: 0; }
    .zug-tabelle { display: block; overflow: visible; }
    .zug-tabelle thead { display: none; }
    .zug-tabelle tbody { display: block; }
    /* je Zugang eine Karte: Zeile 1 Kästchen · Konto · Datum · Stift, Zeile 2 Menge · Rest · Kosten (eigene Zelle), Zeile 3 Herkunft · Art · Verfall */
    .zug-tabelle tbody > tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "check konto datum stift" "zeile2 zeile2 zeile2 zeile2" "info info info info";
        gap: 3px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); background: none !important; }
    .zug-tabelle tbody > tr.zug-bearbeiten { display: block; }
    .zug-tabelle td, .zug-tabelle td:first-child { display: block; border: 0; padding: 0; white-space: normal; min-width: 0; background: none !important; } /* td:first-child: die 9em-Regel der Tabellen oben */
    .zug-tabelle td.zc-check { grid-area: check; width: auto; }
    .zug-tabelle td.zc-konto { grid-area: konto; font-weight: 600; }
    .zug-tabelle.zug-einfach tbody > tr, .zug-tabelle tbody > tr.ohne-check { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "konto datum stift" "zeile2 zeile2 zeile2" "info info info"; }
    .zug-tabelle td.zc-konto { overflow: hidden; text-overflow: ellipsis; } /* Feinschliff: nie umbrechen */
    /* Feinschliff: ein gefiltertes Konto hat keine Konto-Spalte — Zeile 1 ist dann Kästchen · Datum · Stift */
    .zug-tabelle.zug-ohne-konto tbody > tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "check datum stift" "zeile2 zeile2 zeile2" "info info info"; }
    .zug-tabelle.zug-ohne-konto tbody > tr.ohne-check { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "datum stift" "zeile2 zeile2" "info info"; }
    .zug-tabelle.zug-ohne-konto td.zc-datum { text-align: left; font-weight: 600; color: var(--text); }
    .zug-tabelle td.zc-herkunft { max-width: none; }
    .zug-tabelle td.zc-datum { grid-area: datum; color: var(--text-schwach); font-size: 0.86rem; text-align: right; }
    .zug-tabelle td.zc-aktion { grid-area: stift; text-align: right; }
    .zug-tabelle td.zc-menge, .zug-tabelle td.zc-rest, .zug-tabelle td.zc-kosten, .zug-tabelle td.zc-art, .zug-tabelle td.zc-verfall { display: none; }
    .zug-tabelle td.zc-zeile2 { grid-area: zeile2; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.92rem; font-weight: 600; }
    .zug-tabelle td.zc-zeile2 small { color: var(--text-schwach); font-size: 0.76rem; font-weight: 600; }
    .zug-tabelle td.zc-zeile2 .zug-ct { display: inline; margin-left: 0.3rem; font-weight: 400; }
    .zug-tabelle td.zc-herkunft { grid-area: info; font-size: 0.86rem; }
    .zug-tabelle .nur-handy { display: inline; color: var(--text-schwach); }
    .zug-tabelle .nur-handy + .zug-info::before { content: " · "; }
    .zug-tabelle tr.zug-bearbeiten { display: block; }
    .zug-tabelle tr.zug-bearbeiten td { padding: 10px 8px; background: #f5f7fb !important; }
    .zug-sammel { flex-direction: column; align-items: stretch; }
    .zug-sammel .knopf { min-height: 40px; }
}

.hinweis-offen { background: #fff6e0; border: 1px solid #e8c77a; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 0.88rem; color: var(--text); }
.hinweis-offen a { font-weight: 600; }
@media (max-width: 700px) {
    .herkunft-frage { flex-direction: column; align-items: stretch; }
    .herkunft-frage .hf-optionen { flex-direction: column; }
    .herkunft-frage select { max-width: 100%; width: 100%; box-sizing: border-box; }
    .herkunft-frage .hf-herkunft { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; }
    .herkunft-frage .hf-knoepfe .knopf { flex: 1; min-height: 40px; }
}
/* E1 (13.10.2026): erledigte Schritte auf „Heute“ */
.auswahl li.erledigt strong { color: var(--text-schwach); }
.auswahl .erledigt-haken { color: var(--gruen); font-weight: 700; margin-left: 0.25em; }

/* Suche */
.suche-feld { display: flex; gap: 8px; margin: 0 0 14px; }
.suche-feld input {
    flex: 1; font: inherit; padding: 10px 12px; min-height: 44px;
    border: 1px solid var(--linie); border-radius: 8px; background: #fff;
}
.suche-feld input:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
mark { background: #fbe9a8; color: var(--text); border-radius: 2px; padding: 0 1px; }

/* Eingeklappte Formulare (iPhone: nachschauen statt editieren) */
.formular-einklapp > summary {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--blau); font-weight: 600; padding: 4px 0;
}
.formular-einklapp[open] > summary { margin-bottom: 10px; }
.reise-zuordnung { margin: -6px 0 12px; font-size: 0.84rem; }
.reise-zuordnung summary { color: var(--text-schwach); }
.reise-zuordnung summary strong { color: var(--blau); }
.reise-zuordnung form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.reise-zuordnung select { font: inherit; font-size: 0.86rem; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; }
.vorschlag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #f3f6fb; font-size: 0.86rem; margin: 6px 0; }

/* Icon-Knöpfe mit Beschriftung für Screenreader */
.knopf-icon { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; vertical-align: middle; }
.knopf-icon .icon { width: 16px; height: 16px; }

/* Sprungziele (#w6, #posten-3 …) kurz hervorheben und nicht unter den Rand scrollen */
[id] { scroll-margin-top: 14px; }
:target:not(main) { animation: ziel-aufleuchten 2.4s ease-out; }
tr:target > td { animation: ziel-aufleuchten 2.4s ease-out; }
@keyframes ziel-aufleuchten { from { background-color: #fff1c4; } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
    :target:not(main), tr:target > td { animation: none; outline: 2px solid var(--gold); outline-offset: 2px; }
    .hauptnav-link { transition: none; }
}

/* Breite Tabellen am Handy als gestapelte Zeilen (Beschriftung aus data-label) */
@media (max-width: 700px) {
    .tabelle-stapel { display: block; overflow: visible; }
    .tabelle-stapel thead { display: none; }
    .tabelle-stapel tbody, .tabelle-stapel tr, .tabelle-stapel td { display: block; }
    .tabelle-stapel tr { padding: 8px 0; border-bottom: 1px solid var(--linie); background: none !important; }
    .tabelle-stapel td { border: 0; padding: 2px 0; white-space: normal; min-width: 0; }
    .tabelle-stapel td[data-label]::before {
        content: attr(data-label) ": "; color: var(--text-schwach); font-size: 0.76rem; font-weight: 600;
    }
    .tabelle-stapel td:empty { display: none; }
}

/* Heute: eigenes Raster am Desktop (Fristen und Reise links, Punkte rechts) */
.heute-unten > .karte, .heute-haupt > .karte, .heute-seite > .karte { break-inside: avoid; }
@media (min-width: 1300px) {
    .heute-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
    .heute-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
}

/* Druck: Rahmen weg, nur Inhalt */
@media print {
    .hauptnav, .kopf, .sprungmarke, .pfad { display: none !important; }
    body { padding: 0 !important; }
}
.band-legende .band-symbol-legende { width: 14px; height: 14px; color: var(--blau); flex: none; } /* d37: Symbole in der Legende */
.tabelle td.aktionen form, .tabelle td.aktionen > a { display: inline-block; margin: 2px 0; }
@media (max-width: 700px) {
    .tabelle-stapel td.nur-breit { display: none; }
    .tabelle-stapel td.aktionen { padding-top: 6px; }
}

/* ---------- Feinschliff nach der Kritik (03.10.2026 abends) ---------- */
/* Lange Wörter ohne Leerzeichen (URLs in Notizen) dürfen die Seite nicht
   verbreitern — sonst rutscht am Handy die untere Leiste aus dem Bild */
body { overflow-wrap: break-word; }
fieldset { min-width: 0; }  /* „Weiche Faktoren“ ragte 27 px über den Kartenrand */
kbd { font: inherit; font-size: .85em; padding: 0 5px; border: 1px solid var(--linie); border-radius: 4px; background: #fff; }

/* Nebenkarten: heller, ruhiger Kopf für Verwaltung, Archiv und Formulare —
   die Navy/Gold-Köpfe bleiben den Hauptkarten */
.karte-kopf-neben { background: #eef2f9; border-bottom: 1px solid var(--linie); }
.karte-kopf-neben h2 { color: var(--blau-dunkel); }
.karte-kopf-neben p { color: var(--text-schwach); }
.karte-kopf p { max-width: 75ch; }
@media (max-width: 700px) {
    /* am Handy nur die Überschrift — die Erklärsätze kosteten 30–60 px je Karte */
    .karte-kopf p { display: none; }
    .karte-kopf { padding-bottom: 10px; }
}

/* iPhone: Felder unter 16 px lösen beim Antippen Hineinzoomen aus */
@media (max-width: 700px) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
    .tabelle-punkte .bestand-schnell .knopf-klein { min-height: 44px; min-width: 48px; }
    .status-umschalter select { max-width: 11em; }
}

/* Meine Punkte: Einrückung statt „↳“, Bestätigung direkt unter der Zeile */
.tabelle td.eingerueckt { padding-left: 22px; }
tr.bestand-meldung td { background: #e8f2ea !important; color: var(--gruen); font-size: 0.86rem; padding: 7px 10px; }
tr.bestand-fehler td { background: #fbe9e9 !important; color: var(--rot); }
@media (max-width: 700px) {
    .tabelle-punkte td.eingerueckt { padding-left: 0; }
    .tabelle-punkte tr.bestand-meldung { display: block; padding: 0 0 8px; border-bottom: 1px solid var(--linie); }
    .tabelle-punkte tr.bestand-meldung td { display: block; border-radius: 6px; }
}

/* Neuer Fall / Fall bearbeiten: Formular links, Live-Ergebnis rechts mitlaufend */
.ergebnis { margin-top: 4px; }
@media (min-width: 1100px) {
    .karte-fall:has(> form#bewertungsformular),
    .karte-fall:has(> details.eingaben-einklapp[open]) {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-items: start;
    }
    .karte-fall > .karte-kopf { grid-column: 1 / -1; }
    .karte-fall:has(> form#bewertungsformular) > form,
    .karte-fall:has(> details.eingaben-einklapp[open]) > details.eingaben-einklapp { grid-column: 1; grid-row: 2; }
    .karte-fall:has(> form#bewertungsformular) > .ergebnis-spalte,
    .karte-fall:has(> details.eingaben-einklapp[open]) > .ergebnis-spalte {
        grid-column: 2; grid-row: 2; position: sticky; top: 12px;
        max-height: calc(100vh - 24px); overflow: auto; padding-right: 4px;
    }
    .karte-fall .ergebnis-spalte > .ergebnis-titel:first-child { margin-top: 0; }
}
@media (min-width: 1440px) {
    .inhalt > .karte-fall:has(> details.eingaben-einklapp[open]) { column-span: all; }
}

/* Gleiches Zeilenmuster am Handy: Wert unter den Titel statt daneben
   (Hotel-Wächter-Titel brachen sonst vierzeilig um) */
/* Runde 4: auch in schmalen Spalten (Reise-Seitenspalte bei 1300 px, Wächter
   bei 1440 px) stapeln — vorher brach der Titel auf 3–5 Zeilen um, weil der
   Wert daneben nicht umbrechen darf */
.zeilen { container-type: inline-size; }
@container (max-width: 560px) {
    .zeile { grid-template-columns: 12px minmax(0, 1fr); }
    .zeile > .zeile-wert { grid-column: 2; text-align: left; }
    .zeile > .zeile-wert:empty { display: none; }
    .zeile-wert { white-space: normal; }
    .zeile-wert small { display: inline; margin-left: 6px; }
}
@media (max-width: 520px) {
    .zeile { grid-template-columns: 12px minmax(0, 1fr); }
    .zeile > .zeile-wert { grid-column: 2; text-align: left; }
    .zeile > .zeile-wert:empty { display: none; }
    .zeile-wert { white-space: normal; }
    .zeile-wert small { display: inline; margin-left: 6px; }
}

/* Kleinteile */
.gedimmt, .gedimmt a, .gedimmt strong { color: var(--text-schwach); }
.frist-gelb { color: var(--gelb-text); font-weight: 600; }
.druck-link { text-align: right; margin: 0 0 10px; }
.reise-bezug { margin: -4px 0 12px; }
.feld-breit { flex: 3; }
.gefahr-zone { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.zuordnen-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.zuordnen-zeile select { font: inherit; font-size: 0.86rem; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; max-width: 100%; }
.icon-text { width: 0.95em; height: 0.95em; vertical-align: -0.12em; }
.fp-filter { margin: 0 0 4px; text-align: right; }
.fahrplan.nur-offen > .fp-zeile:not(.fp-luecke):not(.fp-offen) { display: none; }
.zeile form.inline { margin: 6px 0 0; }
/* Datumsspalten nie umbrechen (der allgemeine Wortumbruch trennte sonst „23.06.27“) */
.feed-datum, .fp-datum, .zaehler, .chip, .ampel { overflow-wrap: normal; white-space: nowrap; }
.feed a { grid-template-columns: 66px minmax(0, 1fr) auto; }
/* Reiseseite: Fahrplan breit, Wächter und Formulare daneben */
/* Punkte-Seite: Kontostände und Gruppen links der Reihe nach, Pflege rechts */
@media (min-width: 1300px) {
    .punkte-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
}
@media (min-width: 1300px) {
    .reise-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
}
.zeile-wert { font-variant-numeric: tabular-nums; }
/* Woher ein Formular kommt (Fall, Posten, Reise) — Design-Review Runde 3;
   seit Runde 4 ohne farbigen Seitenstreifen (Detektor: side-tab) */
.kontext-hinweis { background: #eef2f9; border: 1px solid #d5deec; border-radius: 8px; padding: 8px 12px; margin: 0 0 4px; font-size: 0.9rem; color: var(--blau-dunkel); }
/* Urteil zum Wächter-Stand und günstigere Preise (Runde 4: .positiv hatte keine Regel) */
.positiv { color: var(--gruen); font-weight: 600; }
.urteil { font-weight: 600; }
.urteil-gut { color: var(--gruen); }
.urteil-ruhig { color: var(--text-schwach); }
/* Preiskurven lesbar groß, nicht <small> in .klein (10,9 px) */
.kurven { font-size: 0.85rem; color: var(--text-schwach); margin: 6px 0; }
.kurven small { font-size: inherit; }
/* Buchung/Planung: Erklärung neben dem Radio umbrechen lassen */
.feld-check.art-wahl { align-items: flex-start; }
.feld-check.art-wahl input { margin-top: 4px; }
/* Lange Wörter in Zusammenfassungszeilen umbrechen (Prüfbericht N6) */
details > summary { overflow-wrap: anywhere; }
/* Hotel-Wächter-Detailseite */
.stand-satz { font-size: 1.05rem; margin: 0 0 10px; }
.tabelle-scroll { overflow-x: auto; }
td.nowrap { white-space: nowrap; }
/* Flug-Wächter: Quellen nach Allianz */
.quellen-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.quellen-gruppe { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.quellen-gruppe legend { font-size: 0.82rem; font-weight: 600; color: var(--blau-dunkel); padding: 0 4px; }
.knopf-text { background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 400; font-size: 0.8rem; color: var(--blau); cursor: pointer; text-decoration: underline; }
/* Fahrplan und Zeilen am Handy: Knöpfe mit 44 px Tippfläche (Runde 3, P2-e) */
@media (max-width: 700px) {
    .fp-aktionen .knopf-klein, .zeile .knopf-klein, .aktionen .knopf-klein, .karten-fuss .knopf-klein, .fp-mehr > summary.knopf-klein,
    .fp-filter .knopf-klein, .gefahr-zone .knopf-klein {
        min-height: 44px; display: inline-flex; align-items: center;
    }
    /* Runde 4: eingeklappte Formulare („Posten anlegen“) mit 44-px-Zeile,
       Pfad-Links mit größerer Tippfläche ohne Layoutänderung */
    .formular-einklapp > summary { min-height: 44px; }
    .pfad a { padding: 12px 0; }
    /* Freistehender Text nicht 12 px am Rand (Detektor: body-text-viewport-edge) */
    /* Runde 6: Außen- statt Innenabstand — gemessen wird der Rand des Elements, nicht des Texts */
    .inhalt > .seiten-intro, .inhalt > .fall-meta, .inhalt > .reise-bezug, .inhalt > .pfad { margin-left: 4px; margin-right: 4px; }
    /* Depot-Tabellen: die Quelle darf umbrechen, sonst lag „ד bei x = 1.228 px */
    .tabelle td.td-umbruch { white-space: normal; min-width: 9em; }
}

/* ---- Runde 5: Lesbarkeit und Tippflächen ---- */
/* <small> ohne eigene Größe nie unter 12 px (Detektor: 10,9 px in .klein, 11,7 px in Tabellen) */
small { font-size: max(12px, 0.85em); }
/* Meta-Text am Desktop größer (12,5–12,8 px gemessen) */
@media (min-width: 900px) {
    .fp-meta, .feed-text, .zeile-meta { font-size: 0.86rem; }
    .karte-kopf p { font-size: 0.84rem; }
}
/* Flug-Posten: Flug-Wächter als Häkchenliste */
.check-spalte { display: flex; flex-direction: column; gap: 4px; }
/* „alle“ je Allianz: größere Tippfläche ohne Layoutsprung */
.knopf-text { padding: 10px 6px; margin: -10px 0; }
@media (max-width: 700px) {
    /* kleine Aufklapper auf der Fallseite (19–23 px gemessen) */
    .reise-zuordnung > summary, #fristen details > summary, #storno > summary,
    .eingaben-einklapp > summary, .ergebnis-einklapp > summary, .feed-mehr > summary { padding: 10px 0; }
    /* Inline-Links im Fahrplan (15 px hoch): Tippfläche nach oben/unten erweitern */
    .fp-meta a { padding: 8px 0; }
}
/* Karten-Fuß: Link- und Formular-Knöpfe gleich hoch */
.karten-fuss { align-items: center; }
.karten-fuss form.inline { margin: 0; }
/* Weiteres Programm erfassen (lief ohne Gestaltung: 22–24 px) */
.tabelle-punkte .schnell-neu-feld {
    font: inherit; font-size: 16px; padding: 8px 10px; min-height: 40px; max-width: 100%;
    border: 1px solid var(--linie); border-radius: 8px; background: #fff;
}
.tabelle-punkte .schnell-neu-ok { min-height: 40px; min-width: 48px; }
/* Hinweis unter quer scrollenden Tabellen am Handy (per app.js) */
.scroll-hinweis { font-size: 0.78rem; color: var(--text-schwach); margin: 4px 0 0; text-align: right; }

/* ---- Reiseablauf (04.10.2026) ---- */
.chip-gefahr { background: #fbeaea; color: var(--rot); }
.ablauf { list-style: none; margin: 10px 0 0; padding: 0; }
.ablauf-zeile {
    /* E6b (14.10.2026): Titel mit Mindestbreite — vorher bekam er neben einer langen Betragszeile 0 px */
    display: grid; grid-template-columns: 74px 20px minmax(9em, 1fr) auto; gap: 2px 10px; align-items: start;
    padding: 8px 0; border-top: 1px solid var(--linie); font-size: 0.9rem;
}
.ablauf-datum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--blau-dunkel); font-size: 0.84rem; padding-top: 1px; min-width: 0; }
.ablauf-datum-teil { white-space: nowrap; } /* d21 (18.10.2026): ein Zeitraum bricht nur nach dem Strich um („31.12.–“ / „06.01.“), statt über das Symbol zu laufen */
.ablauf-icon { width: 18px; height: 18px; color: var(--text-schwach); margin-top: 1px; }
.ablauf-was { min-width: 0; }
.ablauf-was a { color: var(--blau-dunkel); font-weight: 600; text-decoration: none; }
.ablauf-was a:hover { text-decoration: underline; }
.ablauf-was small { display: block; color: var(--text-schwach); font-size: 0.8rem; margin-top: 1px; }
.ablauf-was small a { font-weight: 400; color: var(--blau); text-decoration: underline; }
.ablauf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.ablauf-rechts b { font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--blau-dunkel); white-space: nowrap; }
.ablauf-posten .ablauf-icon { color: var(--gold-text); }
.ablauf-luecke { background: #fdf6f6; }
.ablauf-luecke .ablauf-icon, .ablauf-luecke .ablauf-was { color: var(--rot); }
.ablauf-summe { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--linie); font-size: 0.86rem; color: var(--text-schwach); }
.ablauf-summe b { color: var(--blau-dunkel); font-variant-numeric: tabular-nums; }
.ablauf-luecken b, .ablauf-luecken { color: var(--rot); }
.ablauf-box > summary { color: var(--blau); font-weight: 600; cursor: pointer; padding: 6px 0; }
@media (max-width: 520px) {
    .ablauf-zeile { grid-template-columns: 70px 18px minmax(0, 1fr); gap: 2px 8px; }
    .ablauf-datum { font-size: 0.8rem; }
    .ablauf-rechts { grid-column: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 3px 8px; } /* 15.10.2026: bei 320 px Chip und Betrag untereinander statt über den Rand */
}

/* Ablauf auf der Reiseseite: Lücken und Preise, Kostenbuch */
.fahrplan > .fp-fehlt { background: #fdf6f6; border-color: #e6b8b8; }
.fp-fehlt .fp-icon, .fp-fehlt .fp-titel { color: var(--rot); }
.fp-kosten { color: var(--blau-dunkel); }
.kostenbuch td small { color: var(--text-schwach); }
.kostenbuch tr.kb-summe td { font-weight: 600; border-top: 2px solid var(--linie); background: #f4f6fa; }
.kostenbuch tr.kb-offen td { color: var(--text-schwach); }

/* ---- Runde 6: Reiseseite gegliedert ---- */
/* Sprungleiste: klebt oben, bis die drei Bereiche ab 1.300 px nebeneinanderstehen */
.sprungleiste {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: 6px; margin: 0 0 12px; padding: 6px 0;
    background: var(--hintergrund); border-bottom: 1px solid var(--linie);
}
.sprungleiste a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 22px;
    background: var(--karte); color: var(--blau-dunkel); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.sprungleiste a span {
    min-width: 20px; padding: 0 6px; border-radius: 10px; background: #eef2f9;
    font-size: 0.78rem; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.sprungleiste a:hover { border-color: var(--blau); }
.sprungleiste a[aria-current="true"] { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.sprungleiste a[aria-current="true"] span { background: rgba(255, 255, 255, .16); color: var(--gold); }
@media (max-width: 1299px) {
    #fahrplan, #kostenbuch, #waechter { scroll-margin-top: 66px; }
}
@media (min-width: 1300px) {
    .sprungleiste { display: none; }
}

/* Ablaufzeile: Titel links, Status und Preis rechts, darunter eine Faktenzeile */
.fp-haupt { min-width: 0; }
.fp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.fp-kopf .fp-titel { flex: 1 1 16em; min-width: min(10em, 100%); } /* E6b: Titel nie schmaler als 10em */
.fp-rechts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 8px; margin-left: auto; }
.fp-rechts b { font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--blau-dunkel); white-space: nowrap; }
@media (max-width: 520px) {
    /* Symbol unter das Datum: die zwei Spalten brauchten ~110 von 343 px */
    .fp-zeile { grid-template-columns: 46px minmax(0, 1fr); gap: 2px 10px; }
    .fp-zeile > .fp-icon { grid-column: 1; grid-row: 2; }
    .fp-zeile > .fp-haupt { grid-column: 2; grid-row: 1 / span 2; }
    .fp-rechts { margin-left: 0; justify-content: flex-start; }
}

/* Kostenbuch als Bilanz: Summe rechts, Erklärung immer sichtbar darunter */
.bilanz { margin: 0; }
.bilanz-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--linie);
}
.bilanz-zeile dt { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.bilanz-zeile dt small { display: block; font-weight: 400; color: var(--text-schwach); margin-top: 1px; text-wrap: pretty; }
.bilanz-zeile dd { margin: 0; text-align: right; white-space: nowrap; }
.bilanz-zeile dd b { font-size: 0.98rem; color: var(--blau-dunkel); font-variant-numeric: tabular-nums; }
.bilanz-liste { grid-template-columns: auto minmax(0, 1fr); }
.bilanz-liste dd { white-space: normal; font-size: 0.86rem; color: var(--text-schwach); }
.bilanz-punkte { display: block; }
.bilanz-punkte b { font-size: inherit; }
.bilanz-offen dd b { color: var(--gold-text); }
.bilanz-gesamt { border-bottom: 0; border-top: 2px solid var(--linie); margin-top: -1px; }
.bilanz-gesamt dt { color: var(--blau-dunkel); }
.bilanz-gesamt dd b { font-size: 1.1rem; }
.kb-abschnitte { margin-top: 12px; }
/* In der schmalen Seitenspalte (Desktop) gestapelt wie am Handy */
.kb-tabelle { container: kb / inline-size; }
@container kb (max-width: 560px) {
    .tabelle-stapel.kostenbuch, .kostenbuch tbody, .kostenbuch tr, .kostenbuch td { display: block; }
    .kostenbuch thead { display: none; }
    .kostenbuch tr { padding: 8px 0; border-bottom: 1px solid var(--linie); background: none !important; }
    .tabelle.kostenbuch td, .tabelle.kostenbuch td.rechts { border: 0; padding: 2px 0; white-space: normal; min-width: 0; text-align: left; }
    .kostenbuch td[data-label]::before { content: attr(data-label) ": "; color: var(--text-schwach); font-size: 0.76rem; font-weight: 600; }
    .kostenbuch td:empty { display: none; }
    /* Beträge nebeneinander statt je eine Zeile */
    .tabelle.kostenbuch td.rechts { display: inline-block; margin-right: 14px; }
    .tabelle.kostenbuch td:empty { display: none; }
}

/* ---- Runde 7 ---- */
/* Umschaltknöpfe: gedrückt sichtbar, Beschriftung bleibt gleich */
.knopf[aria-pressed="true"] { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.knopf[aria-pressed="true"]::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ein Pfeil für alle Aufklapper (Runde 7): .formular-einklapp hatte durch
   display:inline-flex gar keinen, andere den nativen Browser-Pfeil, „Mehr“
   ist ein Knopf und bleibt ohne. Ersetzt die Runde-6-Regel nur für die Reiseseite. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:not(.knopf)::before {
    content: ""; display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .15s ease-out;
}
details[open] > summary:not(.knopf)::before { transform: rotate(90deg); }
.formular-einklapp > summary::before { margin-right: 0; }
@media (prefers-reduced-motion: reduce) {
    details > summary:not(.knopf)::before { transition: none; }
}

/* Fallseite: Stand & nächste Schritte, Storno in „Storno & Fristen“, Löschen unten */
.feld-info p { margin: 0; padding: 9px 0; font-size: 0.95rem; }
.stand-zeile { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stand-schritte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.stand-schritte form { margin: 0; }
.storno-teil { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.storno-teil > summary { color: var(--rot); font-weight: 600; }
.gefahr-karte .karte-kopf h2 { color: var(--rot); }

/* Punkte-Seite: Transfermatrix */
.transfer-matrix th[scope="row"] { font-weight: 600; color: var(--text); white-space: normal; text-transform: none; letter-spacing: normal; font-size: 0.9rem; background: none; }
.transfer-matrix .mitte { text-align: center; }
.transfer-zelle {
    display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 36px; padding: 0 8px;
    border-radius: 8px; border: 1px solid var(--linie); background: var(--karte);
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--blau-dunkel); text-decoration: none;
}
.transfer-zelle:hover { border-color: var(--blau); }
.transfer-zelle.aktiv { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.transfer-bearbeiten { background: #f3f6fb; border: 1px solid #d5deec; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.transfer-bearbeiten h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--blau-dunkel); }
.schnell-neu-gruppe { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.schnell-neu-gruppe .schnell-neu-feld { width: 7.5em; min-width: 0; }
@media (max-width: 700px) {
    .transfer-zelle { min-height: 44px; }
}
.transfer-bearbeiten .aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Runde 7b: Feinschliff ---- */
.formular-fehler ul { margin: 4px 0 0; padding-left: 18px; }
.formular-fehler p { margin: 0; }
.verlauf-abschnitte td:first-child { white-space: nowrap; }
.verlauf-fehler td { color: var(--rot); }

/* ---- Phase 1b (07.10.2026): Anmeldung, Sitzungshinweise, Nur-Lese-Rolle, zweiter Faktor ---- */
.inhalt-schmal { max-width: 540px; }
.inhalt-breit { max-width: 820px; } /* Rechtstexte (N2) */
body.schlicht .kopf { justify-content: center; }
.anmelden-karte .formular { margin-top: 6px; }
.sitzungs-hinweis { background: #fff6dc; border: 1px solid #ecd79a; color: var(--gelb-text); border-radius: 10px;
                    padding: 8px 12px; margin: 0 0 10px; font-size: .88rem; }
.sitzungs-hinweis a { color: var(--blau); }
/* Nur-Lese-Rolle: Formulare bleiben unsichtbar (der Server weist sie ohnehin ab), Kontoaktionen auf Einstellungen bleiben */
body.nur-lesen:not(.seite-einstellungen) form[method="post"],
body.nur-lesen [form="schnell-neu"], body.nur-lesen .schnell-neu-ok,
body.nur-lesen .hauptnav-neu-oben, body.nur-lesen .hauptnav-neu-mitte { display: none !important; }
.passkey-block { margin: 0 0 12px; }
.passkey-meldung { font-size: .85rem; color: var(--text-schwach); margin: 6px 0 0; min-height: 1.2em; }
.code-kasten { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.02rem; letter-spacing: .08em;
               background: var(--hintergrund); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; word-break: break-all; }
.notfall-codes { columns: 2; list-style: none; padding: 0; margin: 8px 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; }
.notfall-codes li { padding: 3px 0; break-inside: avoid; }
.sicherheit-liste { list-style: none; padding: 0; margin: 0; }
.sicherheit-liste li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
                       padding: 8px 0; border-bottom: 1px solid var(--linie); }
.sicherheit-liste li:last-child { border-bottom: 0; }
.nutzer-karte .zeile-meta form, .nutzer-karte .frist-zeile form { display: inline; }
.einmal-passwort { background: #e9f3ec; border: 1px solid #bfdcc8; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.einmal-passwort code { font-size: 1.1rem; letter-spacing: .06em; }

/* ---- Phase 2 (08.10.2026): Unternavigation Punkte · Verfall · Karten · Katalog, Kennzeichen, Verfallsliste, Kalender-Link ---- */
.unternav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.unternav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; font-size: .9rem; color: var(--text); background: #fff; }
.unternav a.aktiv { background: #12294f; color: #fff; border-color: transparent; }
.kz { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .75rem; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.kz-sicher { background: #e3efe5; color: #1f5f30; }
.kz-unsicher { background: #fff1d6; color: #8a5a00; }
.kz-geschaetzt { background: #e8ecf3; color: #3b4a63; }
.kz-app { background: #e6f0fb; color: #1b4f8a; }
.kz-abweichend, .kz-schutz { background: #fde8e8; color: #a12222; }
.kz-geschuetzt { background: #e3efe5; color: #1f5f30; white-space: normal; } /* 15.10.2026: lange Kartennamen brechen um (320 px) */
.verfall-monat { margin: 12px 0 4px; font-weight: 700; }
.verfall-liste { list-style: none; margin: 0; padding: 0; }
.verfall-liste li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie); align-items: baseline; flex-wrap: wrap; }
.verfall-liste li.vorbei .vl-datum { color: var(--rot); }
.verfall-liste .vl-datum { min-width: 5.5em; font-weight: 700; }
.verfall-liste .vl-menge { min-width: 7em; text-align: right; }
.verfall-liste .vl-text { flex: 1 1 14em; }
.kalender-link { word-break: break-all; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }

/* ---- Phase 3 (08.10.2026): Punktewert-Rechner — Modus-Umschalter, ★ Top-Ampel, Ergebnisraster ---- */
@media (min-width: 1100px) {
    .rechner-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 16px; align-items: start; }
}
.ampel-box { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.ampel-box.ampel-gruen { background: #eef8ef; border-color: var(--gruen); }
.ampel-box.ampel-gelb { background: #fff8e6; border-color: var(--gelb-tief); }
.ampel-box.ampel-rot { background: #fdeeee; border-color: var(--rot); }
.ampel-box.ampel-grau { background: #f5f5f5; }
.ampel-box.ampel-top { background: #fff8e1; border-color: #d9a51d; }
.ampel.ampel-top { background: #b8860b; }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0 4px; }
.aktionen-zeile .inline { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.modus-schalter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } /* 15.10.2026: wrap — bei 320 px passten vier Modi nicht */
.modus-schalter a { flex: 1 1 0; text-align: center; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; text-decoration: none; color: var(--text); background: #fff; font-weight: 600; }
.modus-schalter a.aktiv { background: #12294f; color: #fff; border-color: transparent; }
.rechner-ergebnis .kv dd strong { font-size: 1.05rem; }
.rechner-ergebnis h3 { margin: 14px 0 4px; font-size: 0.95rem; }
.staffel-beste td { font-weight: 700; background: #fff8e1; }
.karten-vergleich td.rechts, .karten-vergleich th.rechts { text-align: right; }

/* ---- Prognose (09.10.2026): Rhythmus der Kaufaktionen, Monatsverteilung, Einordnung im Kaufangebot ---- */
.prognose-box { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.9rem; }
.prognose-box .ampel-text { display: none; }
.ueberfaellig { color: var(--rot); font-weight: 700; }
.prognose-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 6px 0 4px; }
.prognose-monate .pm { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 78px; font-size: 0.72rem; color: var(--text-schwach); }
.prognose-monate .pm-balken { width: 100%; background: #12294f; border-radius: 3px 3px 0 0; min-height: 2px; }
.prognose-monate .pm-zahl { font-weight: 700; color: var(--text); line-height: 1.2; }
.prognose-tabelle td { vertical-align: top; }
.rechner-ergebnis h4, .karte h4 { margin: 12px 0 2px; font-size: 0.9rem; }

/* N1 (11.10.2026): Haken „öffentlich“ neben „Angebot merken“ (nur Systemadmin) */
.aktionen-zeile .feld-check { display: inline-flex; margin-right: 8px; }

/* N2 (11.10.2026): Registrierung, Rechtstexte, Fußzeile */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fuss-recht { grid-column: 1 / -1; text-align: center; font-size: 0.78rem; color: var(--text-schwach); padding: 14px 16px 24px; }
.fuss-recht a { color: inherit; }
.fuss-recht .fuss-youtube { white-space: nowrap; } /* d58 (25.10.2026): „Punktewert auf YouTube“ mit Symbol nie mitten im Link umbrechen */
@media (max-width: 900px) { .fuss-recht { padding-bottom: 96px; } }
.rechtstext { padding: 16px 18px; }
.rechtstext h2 { font-size: 1rem; margin: 18px 0 6px; color: var(--blau-dunkel); }
.rechtstext p { margin: 0 0 10px; }
/* a35 (17.10.2026): Hilfe „Punktewert mit Claude“ — englische Menünamen von Claude markiert, Bild, lange Connector-Adresse umbrechen */
.ui-en { background: #eef3fc; border: 1px dashed #9db4e3; border-radius: 4px; padding: 0 4px; white-space: nowrap; font-size: 0.95em; }
.hilfe-claude h3 { font-size: 0.95rem; margin: 14px 0 4px; }
.hilfe-claude ol, .hilfe-claude ul { padding-left: 22px; margin: 0 0 10px; }
.hilfe-claude li { margin: 3px 0; }
.hilfe-bild { margin: 10px 0 12px; }
.hilfe-bild img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 10px; }
.hilfe-bild figcaption { color: var(--text-schwach); font-size: 0.85rem; margin-top: 4px; }
.connector-adresse { word-break: break-all; }
/* a35-Nachtrag (18.10.2026): Bilder der deutschen Oberfläche — höchstens 800 px, auf dem Handy volle Breite (kleine Ausschnitte nicht), Werkzeuglisten */
.hilfe-bild a { display: inline-block; max-width: 100%; }
.hilfe-bild img { max-width: min(100%, 800px); }
@media (max-width: 600px) { .hilfe-bild:not(.hilfe-bild-klein) a, .hilfe-bild:not(.hilfe-bild-klein) img { width: 100%; } }
.hilfe-claude ol[start] { margin-top: 10px; }
.hilfe-werkzeuge { display: grid; gap: 4px 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 4px 0 10px; }
.hilfe-werkzeug-liste { columns: 2 140px; column-gap: 20px; }
.fortgeschritten { margin-top: 8px; }
.fortgeschritten summary { cursor: pointer; font-size: 0.85rem; color: var(--text-schwach); }

/* Schlichte Seiten (11.10.2026): Wortmarke als Link, Rücksprung unter dem Titel */
a.marke { color: inherit; text-decoration: none; }
a.marke:hover { text-decoration: underline; }
.schlicht-zurueck { margin: -8px 0 12px; }

/* F1 (13.10.2026): Euro-Umrechnung mit Kursdatum im Tooltip, Kursfußnote, Wert deiner Buchung heute */
.eur-umrechnung { color: var(--text-schwach); cursor: help; border-bottom: 1px dotted #8b95a3; }
.kurs-fussnote { margin-top: 14px; color: var(--text-schwach); }
.wert-heute { line-height: 1.5; }
.status-momentaufnahme { font-style: italic; }

/* F2 (14.10.2026): Preisverlauf je Posten, Buchen-Knopf, Fristen-Hinweis */
.preisverlauf summary { cursor: pointer; }
.preisverlauf-liste { margin: 4px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--text-schwach); }
.buchen-link { font-weight: 600; }
.frist-reise { color: var(--text-schwach); }

/* E5 (14.10.2026): Kurzerklärungen — am Feld (.hilfe) und am Begriff (.begriff: Hover, Fokus, Antippen; kein JavaScript) */
.feld small.hilfe a, .begriff small a { color: var(--blau); }
.begriff { position: relative; border-bottom: 1px dotted #8b95a3; cursor: help; outline: none; }
.begriff small {
    display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; width: min(320px, 80vw);
    padding: 8px 10px; border-radius: 8px; background: var(--blau-dunkel, #1a3f7a); color: #fff; font-size: 0.8rem;
    font-weight: 400; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,0.18); text-transform: none; letter-spacing: 0;
}
.begriff small a { color: #ffd98a; }
.begriff:hover small, .begriff:focus small, .begriff:focus-within small { display: block; }
.glossar dt { font-weight: 600; margin-top: 10px; }
.glossar dd { margin: 2px 0 0; color: var(--text-schwach); }

/* ---- E6b (14.10.2026): Betragsteile in der grauen Zeile, Zahl am Zahnrad ---- */
/* Jeder Teil („467.160 JPY Rate“, „+ 29.239 JPY Paket“) bleibt zusammen; umbrochen wird nur zwischen den Teilen */
.betrag-teil { white-space: nowrap; }
.betrag-teile { overflow-wrap: normal; }
/* E6c: Zahl am Zahnrad ist ein eigener Link zur Liste der Rückmeldungen; Klickfläche ringsum 4 px größer */
.kopf-zahnrad { position: relative; display: inline-flex; }
.kopf-zahnrad .kopf-zaehler { position: absolute; top: 1px; right: 0; left: auto; margin: 0; z-index: 1; text-decoration: none; }
.kopf-zahnrad .kopf-zaehler::after { content: ''; position: absolute; inset: -4px -2px -4px -4px; } /* rechts knapp: am Handy sonst 1 px über den Rand */
.kopf-zahnrad .kopf-zaehler:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* E6c: Zahl in einer Zeile oder Überschrift (Einstellungen → Verwaltung) */
.zaehler.zaehler-inline { position: static; display: inline-block; margin: 0; vertical-align: 1px; }
.auswahl li.verwaltung-offen { background: #fffbf0; box-shadow: inset 3px 0 0 var(--gold); border-radius: 8px; }
.auswahl li.verwaltung-offen a { grid-template-columns: 36px minmax(0, 1fr) auto 16px; }
.auswahl li.verwaltung-offen a:hover { background: #fdf3d8; }
.auswahl small .akzent-offen { display: inline; font-size: inherit; color: var(--gold-text); font-weight: 700; }

/* ---- E7 (14.10.2026): öffentliche Startseite, Bildvergrößerung ohne JavaScript, Demo ---- */
.start-kopf { padding: 18px 20px; }
.start-lead { font-size: 1.3rem; font-weight: 700; color: var(--blau-dunkel); margin: 0 0 6px; line-height: 1.3; }
.start-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
/* 15.10.2026: „Schon dabei? Anmelden“ ist ein Knopf wie „Demo ansehen“ und „Testzugang anfragen“ (vorher kleiner Textlink) */
.start-video { margin: 0 0 16px; }
.start-video video, .start-video img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linie);
    box-shadow: 0 4px 16px rgba(18, 41, 79, .10); background: #fff; }
/* a34 (17.10.2026): Hinweis unter dem Video, Schrift wie die Bildunterschriften der Kacheln */
.start-video-hinweis { margin: 6px 2px 0; color: var(--text-schwach); font-size: 0.85rem; }
.start-bild { display: block; cursor: zoom-in; }
.start-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.start-kachel { margin: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.start-kachel img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--linie); }
.start-kachel figcaption { padding: 10px 12px 12px; }
.start-kachel figcaption strong { display: block; color: var(--blau-dunkel); font-size: 0.95rem; line-height: 1.3; }
.start-kachel figcaption span { display: block; color: var(--text-schwach); font-size: 0.85rem; margin-top: 3px; }
@media (max-width: 640px) {
    .start-kacheln { grid-template-columns: minmax(0, 1fr); }
    /* Handy-Bilder sind hochkant: Vorschau oben angeschnitten, groß per Antippen */
    .start-kachel img { max-height: 380px; object-fit: cover; object-position: top; }
}
/* Vergrößerung über :target — Antippen irgendwo schließt (Link zurück zum Bild) */
.lupe { display: none; }
.lupe:target { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    position: fixed; inset: 0; z-index: 100; padding: 12px; background: rgba(10, 20, 40, .88); text-decoration: none; cursor: zoom-out; }
.lupe:target img { max-width: 100%; max-height: calc(100vh - 70px); width: auto; height: auto; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.lupe-zu { color: #fff; font-size: 0.9rem; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 18px; }
code.kopierbar { user-select: all; -webkit-user-select: all; font-size: 0.95rem; padding: 2px 6px; }
.demo-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px;
    background: #fff6dc; border: 1px solid #ecd79a; border-left: 4px solid var(--gold); border-radius: 10px; padding: 8px 12px;
    margin: 0 0 12px; font-size: 0.88rem; color: var(--text); }
.demo-banner-aktionen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.demo-beispiel { background: #fffbf0; border: 1px dashed #d9bf6a; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.demo-beispiel .zeilen li { display: flex; gap: 10px; align-items: flex-start; }
.demo-beispiel small { display: block; color: var(--text-schwach); }
/* E7: In der Demo (Rolle „lesen“) bleiben „Demo beenden“ und der Ansicht-Umschalter sichtbar — beide speichern nichts */
body.nur-lesen.demo-sitzung .demo-banner form[method="post"], body.nur-lesen.demo-sitzung .ansicht-fuss form[method="post"] { display: inline-flex !important; }

/* ---- E8 (14.10.2026): Import von Kontoständen ---- */
.import-liste { list-style: none; margin: 0 0 10px; padding: 0; }
.import-zeile { border: 1px solid var(--linie); border-left: 4px solid var(--linie); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; background: var(--karte); }
.import-zeile p { margin: 4px 0 0; }
.import-zeile .feld { margin: 6px 0 0; }
.import-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.import-kopf .feld-check { font-size: 0.95rem; }
.import-status { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #eef2f9; color: var(--blau-dunkel); }
.import-werte { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.import-neu { border-left-color: var(--gruen); }
.import-neu .import-status { background: #e6f3ea; color: var(--gruen); }
.import-aktualisieren { border-left-color: var(--blau); }
.import-aelter, .import-mehrdeutig, .import-unbekannt { border-left-color: var(--gold); background: #fffbf0; }
.import-aelter .import-status, .import-mehrdeutig .import-status, .import-unbekannt .import-status { background: #fdf3e0; color: var(--gelb-text); }
.import-fehler { border-left-color: var(--rot); background: #fdf3f3; }
.import-fehler .import-status { background: #fbe9e9; color: var(--rot); }
.import-unveraendert { opacity: .8; }
.import-meldung { color: var(--gelb-text); }
.import-fehler .import-meldung { color: var(--rot); }
.import-sinkt, .import-steigt { color: var(--gelb-text); }
.import-vorlagen, .import-spalten, .import-ergebnis { margin: 4px 0 10px; padding-left: 1.1rem; }
.import-vorlagen li, .import-spalten li, .import-ergebnis li { margin: 3px 0; }
/* E8: Startseite — der Nutzensatz ist jetzt die Überschrift, die Karte beginnt mit dem „Für wen“-Absatz */
.start-kopf > p:first-child { margin-top: 0; }
/* E9 (15.10.2026): Hinweise zum Betrieb — rotes „!“ unten am Zahnrad, Verwaltungszeile rot markiert */
.kopf-zahnrad .kopf-zaehler.kopf-warnung { top: auto; bottom: 1px; background: var(--rot); color: #fff; }
/* d31 (18.10.2026): neue Anfragen auf der Warteliste — zweite Zahl links oben am Zahnrad, blau (die gelbe rechts sind die Rückmeldungen) */
.kopf-zahnrad .kopf-zaehler.kopf-warteliste { right: auto; left: -8px; background: #fff; color: var(--blau-dunkel); }
.auswahl li.verwaltung-warnung { background: #fdf3f3; box-shadow: inset 3px 0 0 var(--rot); border-radius: 8px; }
.auswahl li.verwaltung-warnung a:hover { background: #fbe9e9; }
.auswahl small .akzent-warnung { display: inline; font-size: inherit; color: var(--rot); font-weight: 700; }
.betrieb-hinweise { margin: 0 0 10px; padding-left: 1.1rem; color: var(--rot); }
.fehlend-aktionen { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; margin: 8px 0; }
.fehlend-aktionen .feld { margin: 0; min-width: 12rem; }
.katalog-aliasse { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }

/* 15.10.2026: schmale Handys (320 px) — nichts ragt mehr über den Bildschirm */
#haushalt form.inline { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
#haushalt-wahl { min-width: 0; max-width: 100%; }
/* d54 (25.10.2026): Haushalt löschen im Adminbereich — Feld breit genug für den Platzhalter, am Handy unter dem Feld der Knopf */
form.loeschen-mit-name { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; }
form.loeschen-mit-name input[name="bestaetigung"] { width: 17em; max-width: 100%; }
form.loeschen-mit-name button:disabled { opacity: 0.45; cursor: not-allowed; } /* gesperrt sichtbar, bis der Name stimmt */

/* ---- d32 (18.10.2026): Wahl der Ansicht im Schnellstart (start.php) und Zeile in „Erste Schritte“ (index.php) ---- */
.ansicht-wahl { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.ansicht-wahl legend { font-weight: 700; color: var(--blau-dunkel); padding: 0; margin-bottom: 8px; font-size: 1.02rem; }
.ansicht-wahl .ansicht-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ansicht-wahl .ansicht-option { display: block; border: 2px solid var(--linie); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: #fff; }
.ansicht-wahl .ansicht-option:has(input:checked) { border-color: var(--blau-dunkel); box-shadow: 0 0 0 2px rgba(18, 41, 79, .12); }
.ansicht-wahl .ansicht-option input { margin: 0 4px 0 0; vertical-align: 1px; }
.ansicht-wahl .ansicht-option strong { font-size: 1.05rem; }
.ansicht-wahl .ansicht-option small { display: block; color: var(--text-schwach); margin-top: 6px; line-height: 1.4; }
.ansicht-wahl .ansicht-tag { font-size: 0.76rem; font-weight: 600; color: var(--blau-dunkel); background: #eef2f8; border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.ansicht-wahl .ansicht-zusatz { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 600px) { .ansicht-wahl .ansicht-optionen { grid-template-columns: 1fr; } }
.einstieg-ansicht { margin: 10px 0 0; }

/* ---------- Adminbereich (d40, 21.10.2026): eigene Kopfzeile (Navy) mit Titel und Rücksprung, Pillen-Navigation, Wartungsbanner.
   Die Seiten liegen unter /admin/ ohne Hauptnavigation — am Desktop keinen Platz für die Seitenleiste freihalten. */
body.seite-admin { padding-bottom: 24px; }
.admin-kopf { gap: 12px; padding-right: 16px; }
.admin-kopf-titel { color: var(--gold); font-weight: 700; font-size: 1rem; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-kopf-titel small { color: #dfe6f2; font-weight: 400; font-size: 0.8rem; }
.admin-zurueck { color: #dfe6f2; text-decoration: none; font-size: 0.85rem; white-space: nowrap; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; }
.admin-zurueck:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav { margin: 10px 0 6px; }
.admin-bereiche { flex-wrap: wrap; gap: 6px 16px; }
.admin-bereiche-form { margin-bottom: 8px; flex: 0 0 100%; width: 100%; } /* d40b: in der Aktionen-Zeile (flex) kollabierte das Formular
   wegen container-type: inline-size auf Breite 0 — Bereiche und Knopf standen senkrecht; jetzt eigene volle Zeile vor den Knöpfen */
.admin-bereiche-form .knopf { align-self: flex-start; } /* d40b: Knopf nicht über die volle Breite strecken */
.wartung-banner { margin: 8px 0 12px; }
.vorhaben-text { font-size: 1.05rem; }
/* d44 (22.10.2026): wer ist online, seats.aero-Grenze mit Rückfrage */
.online-punkt { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #2e9e4f; margin-right: .3em; vertical-align: middle; }
.online-kopf { font-size: .8rem; font-weight: 400; color: var(--text-schwach); margin-left: .4em; }
.rueckfrage-kasten { border: 1px solid var(--gold); background: #fffbf0; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.rueckfrage-kasten p { margin: 0 0 8px; }
/* d45 (23.10.2026): Rückfrage-Karte und Hinweis „Darf Thorsten nachfragen?“ auf „Heute“, Gruppe „Nutzer“ und Vorschau unter Admin → Kontakte */
.karte-rueckfrage { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.rueckfrage-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rueckfrage-felder textarea { min-height: 4.5em; }
.rueckfrage-vorschau details { margin: 6px 0; }
.rueckfrage-vorschau pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.88rem; background: #f5f7fb; border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; }
.nutzer-tabelle td small { display: block; color: var(--text-schwach); }
.nutzer-tabelle tr.nicht-waehlbar td { color: var(--text-schwach); }
.nutzer-tabelle tr.nicht-waehlbar strong { color: var(--text); }
#mailgrenzen-tabelle small { display: block; color: var(--text-schwach); } /* d50: Standardwert und „je Klick“-Beschriftung unter dem Feld */
#mailgrenzen-tabelle input[type="number"] { width: 6em; }
body.nur-lesen #rueckfrage-hinweis form[method="post"] { display: inline-flex !important; } /* d45: Einwilligung und Karte betreffen nur den eigenen Zugang — auch für Nur-Lese-Mitglieder */
body.nur-lesen #rueckfrage form[method="post"] { display: flex !important; }
.feld-check > input[type="checkbox"], .feld-check > input[type="radio"] { flex: 0 0 auto; } /* d45: lange Beschriftungen drückten das Kästchen auf Punktgröße (Registrierung) */
@media (min-width: 1100px) {
    body.seite-admin { padding-left: 0; }
    body.seite-admin .kopf.admin-kopf { background: var(--blau); color: #fff; max-width: none; padding: 10px 28px; justify-content: flex-start; }
    body.seite-admin .kopf.admin-kopf .marke { display: block; }
    body.seite-admin .inhalt { max-width: 1400px; }
}
@media (max-width: 700px) {
    .admin-kopf-titel { display: none; } /* am Handy nur Logo und Rücksprung — die Überschrift steht auf der Seite */
    .admin-kopf .marke-kopf img { max-width: calc(100vw - 150px); }
    .admin-zurueck { font-size: 0.78rem; padding: 6px 8px; }
}