/* Mehrere Fahrten planen — Ergänzung zur bestehenden Anfrageseite.
 *
 * 21.09.2026 · Claude Opus 5 · Auftrag von Jesse, übergeben von Codex
 * (Wiki: Fahrdienst-Schaumburg-Mehrfachanfragen-Auftrag).
 *
 * WARUM EINE EIGENE DATEI:
 * site.css und guide.css sind in Codex' Handschrift geschrieben — bis zu
 * 850 Zeichen je Zeile. Dort hineinzuschreiben ergäbe entweder einen
 * Flickenteppich aus zwei Stilen oder einen Tippfehler, den in so einer
 * Zeile niemand findet. Diese Datei benutzt AUSSCHLIESSLICH seine
 * Design-Tokens (--brand, --ink, --line, --soft, --serif …), sieht deshalb
 * aus wie der Rest, und lässt sich im Zweifel wieder entfernen, ohne seine
 * Arbeit anzufassen.
 *
 * KEINE EIGENEN FARBWERTE. Jede Farbe kommt aus einem Token; damit stimmt
 * Hell und Dunkel automatisch, ohne dass ich beides nachpflegen muss.
 */

/* Eine Fehlerfarbe fehlt in Codex' Tokensatz. Statt sie hart einzutragen,
   bekommt sie ein eigenes Token — sonst stünde im Dunkelmodus ein dunkles
   Rot auf dunklem Grund. Die Werte folgen seinem Muster: gedeckt im Hellen,
   aufgehellt im Dunklen.
   Das Zeichen ⚠ trägt die Bedeutung ohnehin mit; die Farbe verstärkt nur. */
:root { --mf-warn: #b03a2e; }
@media (prefers-color-scheme: dark) { :root { --mf-warn: #ff9b8a; } }
[data-theme="dark"] { --mf-warn: #ff9b8a; }
[data-theme="light"] { --mf-warn: #b03a2e; }

/* ── Die Auswahl am Einstieg ─────────────────────────────────────────── */

/* Ein <fieldset> bringt vom Browser einen Rahmen mit, der hier nicht
   hingehört — die Karten sind schon eingefasst. Es bleibt trotzdem ein
   fieldset: Screenreader lesen die Legende dann als Frage zur Gruppe vor,
   nicht als losen Text. */
.mf-wahl-gruppe {
    border: 0;
    margin: 0;
    padding: 0;
}

/* Die Frage bleibt SICHTBAR. Sie ist der Grund, warum darunter zwei Karten
   stehen; wer sie versteckt, lässt die Leute raten. Gesetzt wie die
   Legenden der übrigen Schritte. */
.mf-wahl-gruppe > legend {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.25;
    color: var(--ink);
}

.mf-wahl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}

.mf-wahl-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.mf-wahl-karte:hover {
    border-color: var(--brand);
}

/* Der gewählte Zustand traegt NIE nur Farbe: die Kante wird doppelt so
   dick, und das Häkchen oben rechts erscheint. Jesse sieht schlecht. */
.mf-wahl-karte.gewaehlt {
    border-color: var(--brand);
    border-width: 2px;
    padding: 21px 21px 19px;
    background: var(--soft);
}

.mf-wahl-karte input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mf-wahl-karte:focus-within {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.mf-wahl-haken {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: transparent;
}

.mf-wahl-karte.gewaehlt .mf-wahl-haken {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--surface);
}

.mf-wahl-titel {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink);
    padding-right: 34px;
}

.mf-wahl-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

/* ── Der erklärende Hinweis darunter ─────────────────────────────────── */
.mf-hinweis {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    margin: 0 0 28px;
    border-radius: 12px;
    background: var(--soft);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.mf-hinweis strong {
    color: var(--ink);
}

.mf-hinweis-marke {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.4;
}

/* ── Schmale Schirme ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .mf-wahl {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .mf-wahl-titel {
        font-size: 20px;
    }
}

/* ── Die Fahrtenliste ────────────────────────────────────────────────── */
.mf-bereich {
    margin: 24px 0 8px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--soft);
}

.mf-liste-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.mf-liste-titel {
    margin: 0;
    font-family: var(--serif);
    font-size: 21px;
    color: var(--ink);
}

.mf-liste-zahl {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
}

.mf-leer {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.mf-liste { display: flex; flex-direction: column; gap: 10px; }

.mf-eintrag {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

/* Die Fahrt, die gerade im Formular liegt: Kante UND Beschriftung.
   Nie nur Farbe. */
.mf-eintrag.wird-bearbeitet {
    border-color: var(--brand);
    border-width: 2px;
    padding: 13px 15px;
}

.mf-eintrag.wird-bearbeitet .mf-eintrag-nr::after {
    content: ' · wird geändert';
    font-size: 12px;
    font-weight: 600;
}

.mf-eintrag-nr {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--surface);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.mf-eintrag-inhalt { flex: 1 1 auto; min-width: 0; }

.mf-eintrag-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 3px;
}

.mf-eintrag-zeile {
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.mf-eintrag-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.mf-marke {
    padding: 2px 9px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.mf-eintrag-knoepfe {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mf-klein {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.mf-klein:hover { border-color: var(--brand); color: var(--brand); }
.mf-weg:hover { border-color: var(--mf-warn); color: var(--mf-warn); }

.mf-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.mf-abbrechen { background: var(--surface) !important; color: var(--muted) !important; }

/* ── Meldungen ───────────────────────────────────────────────────────── */
.mf-meldung {
    margin: 14px 0 0;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.55;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
}

/* Erfolg und Fehler tragen ein Zeichen, nicht nur eine Farbe. */
.mf-meldung.ist-gut::before { content: '\2713  '; font-weight: 800; color: var(--brand); }
.mf-meldung.ist-fehler { border-color: var(--mf-warn); color: var(--mf-warn); }
.mf-meldung.ist-fehler::before { content: '\26A0  '; font-weight: 800; }

@media (max-width: 720px) {
    .mf-eintrag { flex-wrap: wrap; }
    .mf-eintrag-knoepfe { flex-direction: row; width: 100%; }
    .mf-klein { flex: 1 1 auto; text-align: center; }
}

/* ── Absenden und Ergebnis ───────────────────────────────────────────── */
.mf-senden { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }

.mf-senden-titel {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
}

.mf-senden-text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.mf-fortschritt {
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.mf-ergebnis { margin-bottom: 16px; }

.mf-e-kopf {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}

.mf-e-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.mf-e-zeile {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 15px;
    line-height: 1.55;
}

/* Jeder Zustand hat ein ZEICHEN, nicht nur eine Farbe: ✓ ? ⚠ ·
   Auf einem schlechten Bildschirm bleibt die Aussage lesbar. */
.mf-e-zeichen {
    grid-row: 1 / span 2;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
}

.mf-e-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.mf-e-info { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }
.mf-e-info strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.mf-e-zeile.ist-gut { border-color: var(--brand); }
.mf-e-zeile.ist-gut .mf-e-zeichen { color: var(--brand); }

.mf-e-zeile.ist-unklar { border-color: var(--mf-warn); border-style: dashed; }
.mf-e-zeile.ist-unklar .mf-e-zeichen { color: var(--mf-warn); }

.mf-e-zeile.ist-fehler { border-color: var(--mf-warn); border-width: 2px; padding: 11px 13px; }
.mf-e-zeile.ist-fehler .mf-e-zeichen { color: var(--mf-warn); }

.mf-e-zeile.ist-offen { opacity: .65; }
.mf-e-zeile.ist-offen .mf-e-zeichen { color: var(--muted); }

.mf-e-fuss {
    margin: 14px 0 0;
    padding: 12px 15px;
    border-radius: 10px;
    background: var(--soft);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.mf-senden-knopf:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 720px) {
    .mf-e-zeile { grid-template-columns: 22px minmax(0, 1fr); padding: 10px 12px; }
}

/* ── Die eingeklappte Auswahl ────────────────────────────────────────── */
/* Ab Schritt 2 weichen die zwei Karten dieser Zeile: Die Entscheidung ist
   gefallen, aber man soll noch sehen, welche — und sie bewusst ändern
   können, statt versehentlich mitten im Ablauf umzuschalten. */
.mf-kurz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 18px;
    margin: 0 0 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}

.mf-kurz-text { font-size: 16px; color: var(--muted); }
.mf-kurz-text strong { color: var(--ink); }

.mf-kurz-zurueck {
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--brand);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mf-kurz-zurueck:hover { border-color: var(--brand); }
.mf-kurz-zurueck:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

@media (max-width: 560px) {
    .mf-kurz { flex-direction: column; align-items: stretch; }
    .mf-kurz-zurueck { width: 100%; }
}

/* ── Der Ausgang aus dem Kreislauf ───────────────────────────────────── */
/* Steht neben "Fahrt hinzufügen", sobald etwas in der Liste liegt.
   Ein Kreislauf ohne sichtbare Tür ist eine Falle. */
.mf-fertig {
    background: var(--brand) !important;
    color: var(--surface) !important;
    border-color: var(--brand) !important;
}
.mf-fertig:hover { background: var(--brand-hover) !important; }

/* Der Hinweis unter dem Fahrgastnamen, wenn das Feld zur Fahrt gewandert
 * ist. 0.8rem = 12,8 px — die Untergrenze ist Absicht, nicht Zufall.
 * Nicht nur grau: Der Doppelpfeil zeigt, dass das Feld je Fahrt gilt. */
.mf-feld-hinweis {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--muted);
}
.mf-feld-hinweis::before {
    content: "↻ ";
    color: var(--brand);
    font-weight: 700;
}

/* Der wartende Hinzufügen-Knopf.
 *
 * Jesse (21.09.2026): "Der blaue Button sollte erst wirklich blau sein,
 * wenn oben wieder erneut Daten eingegeben wurden."
 *
 * NICHT NUR BLASSER: Der gestrichelte Rahmen sagt dasselbe noch einmal in
 * Form statt in Farbe, und die Beschriftung wechselt mit. Wer Farbtöne
 * schlecht unterscheidet, sieht den Unterschied trotzdem. */
.mf-hinzu.wartet {
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px dashed var(--line) !important;
    box-shadow: none !important;
}
.mf-hinzu.wartet:hover {
    color: var(--ink) !important;
    border-color: var(--brand) !important;
}

/* ── Zustand einer Fahrt in der Liste ────────────────────────────────
 *
 * Jeder Zustand trägt SYMBOL + WORT, nicht nur eine Farbe: ✓ angefragt,
 * ? unklar, ✕ nicht übermittelt. Der abgeschickte Eintrag bekommt
 * zusätzlich einen kräftigeren linken Rand — erkennbar auch für den, der
 * Farbtöne schlecht auseinanderhält. 0,8rem ist die Untergrenze. */
.mf-eintrag-zustand {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 600;
}
.mf-eintrag-zustand.ist-gut     { color: var(--brand); }
.mf-eintrag-zustand.ist-unklar  { color: var(--mf-warn); }
.mf-eintrag-zustand.ist-fehler  { color: var(--mf-warn); }

.mf-eintrag.ist-abgeschickt {
    border-left: 4px solid var(--brand);
    opacity: 0.92;
}

/* Die abgeleitete Abholzeit. Sie ist das, was wirklich passiert — und
 * darf deshalb nicht wie eine Nebenbemerkung aussehen. */
.mf-eintrag-zeile.mf-abholung {
    font-weight: 600;
    color: var(--ink);
}
.mf-abhol-grund {
    font-weight: 400;
    color: var(--muted);
}

/* Wiederholungswunsch: eigene Marke mit Symbol, damit sie sich von den
 * übrigen Merkmalen abhebt, ohne allein auf Farbe zu setzen. */
.mf-marke.mf-marke-wdh {
    border-style: dashed;
    font-weight: 600;
}

.mf-pruef-hinweis {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink);
}

/* Die Auswahlkarten während des Versands: gedämpft und mit Schloss.
 * Nicht nur blasser — wer Farbtöne schlecht unterscheidet, erkennt den
 * Zustand am Zeichen und am nicht mehr wandernden Zeiger. */
.mf-wahl-karte.ist-gesperrt {
    opacity: 0.55;
    cursor: not-allowed;
}
.mf-wahl-karte.ist-gesperrt::after {
    content: "🔒";
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.9rem;
}