/* Ember-Web – App-Oberfläche (hell und dunkel nach Systemeinstellung) */
:root {
    --akzent: #a8322d;
    --hintergrund: #f4f2f1;
    --karte: #ffffff;
    --rand: #e3dfdd;
    --text: #1d1b1a;
    --leise: #6b6461;
    --ok: #1b6e2d;
    --ok-hell: #e3f1e6;
    --nein: #a8201a;
    --nein-hell: #f8dedc;
    --einsatz: #a8322d;
    --jugend: #df7a1c;
    --kinder: #8e2a8c;
    --unsicher: #b45309;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #1c1a19;
        --karte: #272423;
        --rand: #3a3634;
        --text: #f0ecea;
        --leise: #a59e9b;
        --ok-hell: #1f3a26;
        --nein-hell: #44201e;
    }
}

* { box-sizing: border-box; }

/* Aufbau wie eine App: Kopfzeile oben, Reiter unten fest – nur der Inhalt dazwischen scrollt. Das Dokument selbst
   scrollt nie; sonst schiebt Safari auf dem iPhone beim Wischen (und nach dem Tippen in ein Eingabefeld) die ganze
   App samt Kopfzeile nach oben und lässt sie dort stehen. Seitlich verschiebt sich ebenfalls nichts. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--hintergrund);
    color: var(--text);
}

.kopf {
    flex: none;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: var(--karte);
    border-bottom: 1px solid var(--rand);
}

.kopf .logo { width: 34px; height: 34px; border-radius: 8px; }
.kopf div { display: flex; flex-direction: column; line-height: 1.2; }
.kopf span { font-size: 0.8rem; color: var(--leise); }

/* der einzige Bereich, der scrollt – auf breiten Bildschirmen bleibt der Inhalt 640 px breit in der Mitte */
main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 14px max(14px, calc((100% - 640px) / 2)) 24px; }

h2 { font-size: 1.05rem; margin: 18px 4px 8px; }
.leise { color: var(--leise); }
.klein { font-size: 0.85rem; }

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.termin { border-left: 5px solid var(--einsatz); }
.termin.jugend { border-left-color: var(--jugend); }
.termin.kinder { border-left-color: var(--kinder); }
.termin .wann { font-weight: 600; }
/* Mitteilungen wie die Termine: Farbe des Bereichs links; an alle neutral */
.mitteilung { border-left: 5px solid var(--leise); }
.mitteilung.einsatz { border-left-color: var(--einsatz); }
.mitteilung.jugend { border-left-color: var(--jugend); }
.mitteilung.kinder { border-left-color: var(--kinder); }
.termin .titel { font-size: 1.05rem; margin: 2px 0; }
.termin .stand { margin-top: 6px; font-size: 0.85rem; }
.termin .stand.zusage { color: var(--ok); }
.termin .stand.absage { color: var(--nein); }
.termin .stand.unsicher { color: var(--unsicher); }

.knoepfe { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

button, a.knopf {
    display: inline-block;
    text-decoration: none;
    font: inherit;
    border-radius: 10px;
    border: 1px solid var(--rand);
    background: var(--karte);
    color: var(--text);
    padding: 9px 14px;
    cursor: pointer;
}

button.zusage[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
/* Wer zu- und wer abgesagt hat: eine Zeile zum Aufklappen */
.termin details.wer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rand); font-size: 0.85rem; }
.termin details.wer summary { color: var(--leise); cursor: pointer; }
.termin details.wer .namen { margin: 6px 0 0; }
.termin details.wer .namen.zusage strong { color: var(--ok); }
.termin details.wer .namen.absage strong { color: var(--nein); }
.abwesenheit .liste-zeile:first-of-type { margin-top: 2px; }
button.absage[aria-pressed="true"] { background: var(--nein); border-color: var(--nein); color: #fff; }
button.unsicher[aria-pressed="true"] { background: var(--unsicher); border-color: var(--unsicher); color: #fff; }
button.primaer, a.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button:disabled { opacity: 0.55; }

input[type="text"], input[type="date"], input[type="time"], input[type="datetime-local"] {
    width: 100%;
    font: inherit;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--rand);
    background: var(--hintergrund);
    color: var(--text);
    margin-top: 8px;
}

.mitteilung .zeit { font-size: 0.8rem; color: var(--leise); }
.mitteilung .text { white-space: pre-line; margin-top: 4px; }

.hinweis {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-left: 5px solid var(--akzent);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.meldung { position: fixed; left: 50%; max-width: calc(100vw - 32px); bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    background: var(--text); color: var(--hintergrund); padding: 8px 14px; border-radius: 10px; font-size: 0.9rem; }

.reiter {
    flex: none;
    display: flex;
    background: var(--karte);
    border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Alle Reiter gleich breit (nicht nach Textlänge), Symbol über der Beschriftung – symmetrisch bei 3 oder 4 Reitern */
.reiter button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 0;
    border-radius: 0;
    padding: 8px 2px 7px;
    font-size: 0.72rem;
    background: none;
    color: var(--leise);
    font-weight: 600;
}
.reiter button[hidden] { display: none; }
.reiter svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reiter span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reiter button[aria-current="page"] { color: var(--akzent); }
.reiter[hidden] { display: none; }

.code {
    font: 700 1.6rem/1.2 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 10px;
    margin: 8px 0;
    background: var(--hintergrund);
    border-radius: 10px;
    user-select: all;
}

/* Abstimmung: Antworten als Knöpfe, nach der Stimme mit Balken */
.abstimmung { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.abstimmung .option {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    background: linear-gradient(90deg, var(--ok-hell) var(--anteil, 0%), var(--karte) var(--anteil, 0%));
}
.abstimmung .option.gewaehlt { border-color: var(--ok); font-weight: 600; }
.abstimmung .anzahl { color: var(--leise); font-size: 0.85rem; white-space: nowrap; }
/* Namen unter der Antwort: eigene Zeile über die ganze Breite */
.abstimmung .option { flex-wrap: wrap; }
.abstimmung .namen { position: relative; flex-basis: 100%; margin-top: 2px; font-size: 0.8rem; font-weight: 400;
    color: var(--leise); text-align: left; }

/* Kalender: je Tag eine Überschrift, darunter die Einträge mit Farbe des Bereichs */
h2.tag { font-size: 0.95rem; margin: 16px 4px 6px; color: var(--leise); }
.kalender-eintrag {
    display: flex;
    gap: 10px;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-left: 5px solid var(--einsatz);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.kalender-eintrag.jugend { border-left-color: var(--jugend); }
.kalender-eintrag.kinder { border-left-color: var(--kinder); }
.kalender-eintrag.sonstige { border-left-color: var(--leise); }
.kalender-eintrag .was { flex: 1; min-width: 0; }
.kalender-eintrag .klein-knopf { align-self: center; flex: none; }
.kalender-eintrag .uhr { width: 88px; flex: none; font-variant-numeric: tabular-nums; color: var(--leise); font-size: 0.9rem; }

/* Monatsansicht: Raster Mo–So, je Bereich ein farbiger Punkt am Tag */
.monat-kopf { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.monat-kopf strong { font-size: 1.05rem; }
button.monat-pfeil { font-size: 1.3rem; line-height: 1; padding: 6px 14px; }
.monat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.monat .wochentag { text-align: center; font-size: 0.75rem; color: var(--leise); padding-bottom: 2px; }
button.tag-zelle { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; min-height: 48px;
    border-radius: 10px; min-width: 0; border-color: transparent; }
button.tag-zelle.mit-terminen { font-weight: 700; }
button.tag-zelle.vergangen { color: var(--leise); }
button.tag-zelle.heute .nummer { background: var(--akzent); color: #fff; border-radius: 50%; width: 1.7em; line-height: 1.7em; }
button.tag-zelle.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent) inset; }
.punkte { display: flex; gap: 3px; min-height: 7px; }
.punkt-bereich { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--einsatz); }
.punkt-bereich.jugend { background: var(--jugend); }
.punkt-bereich.kinder { background: var(--kinder); }
.punkt-bereich.sonstige { background: var(--leise); }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 4px 0; }

/* Rechts in der Kopfzeile: Ember öffnen, Aktualisieren, Einstellungen */
.kopf .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.kopf .symbol[hidden], .kopf .zaehler[hidden] { display: none; }
.kopf .symbol { position: relative; display: flex; padding: 8px; background: none; border: 0; color: var(--leise); }
.kopf .symbol[aria-current="page"] { color: var(--akzent); }
.kopf .zaehler { position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--akzent); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; }
.kopf .symbol svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
    stroke-linejoin: round; }
.kopf .symbol.laedt svg { animation: drehen 0.8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Fahrzeugprüfung */
.fahrzeug-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.marke { font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.marke.ja { background: var(--ok); color: #fff; }
.marke.nein { background: var(--nein); color: #fff; }
.liste-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0;
    border-top: 1px solid var(--rand); }
/* Name links bricht bei Bedarf um; die Knöpfe („Prüfen“, „Erneut prüfen“) sind alle gleich breit und einzeilig */
.liste-zeile > div { flex: 1; min-width: 0; }
.liste-zeile > button { flex: none; width: 7.2em; padding-left: 2px; padding-right: 2px; white-space: nowrap; text-align: center; }
.stand-text { font-size: 0.85rem; color: var(--leise); }
.stand-text.ok { color: var(--ok); }
.stand-text.maengel { color: var(--nein); }
.punkt.mangel { border-color: var(--nein); }
.punkt .knoepfe { margin-top: 6px; }
label.melden { display: block; margin-top: 8px; font-size: 0.9rem; }
select, textarea { width: 100%; font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--rand);
    background: var(--hintergrund); color: var(--text); margin-top: 8px; }

/* Termine anlegen und bearbeiten */
button.neu { margin-bottom: 12px; }
.termin-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
button.klein-knopf { font-size: 0.8rem; padding: 4px 10px; }
.formular { display: grid; gap: 10px; }
.formular .feld { display: grid; gap: 4px; min-width: 0; }
.formular input, .formular select { margin-top: 0; box-sizing: border-box; min-width: 0; }
.formular .zeiten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* Safari auf dem iPhone gibt Datums- und Zeitfeldern eine eigene Mindestbreite, zentriert den Wert und lässt leere
   Felder zusammenfallen – ohne eigenes Aussehen halten sie sich an Breite, Höhe und Ausrichtung der übrigen Felder */
input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 2.75em;
    text-align: left;
}
input::-webkit-date-and-time-value { text-align: left; }
.wunsch { border-style: dashed; }
.wunsch.abgelehnt { border-color: var(--nein); }

/* Zu erledigen (wie auf der Startseite von Ember) */
/* Zahlen wie am Knopf oben: kräftiger Grund, weiße Schrift – gut lesbar, auch im Dunkeln */
.zu-erledigen .zahl { flex: none; min-width: 22px; padding: 2px 8px; border-radius: 11px; background: var(--akzent);
    color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; }
.zu-erledigen ul { list-style: none; margin: 6px 0 0; padding: 0; }
.zu-erledigen li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0;
    border-top: 1px solid var(--rand); }
.zu-erledigen li a { color: inherit; text-decoration: none; }
.zu-erledigen li a::after { content: " ›"; color: var(--leise); }
.zu-erledigen li .was { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Haken und Uhr wie die Symbole der Kopfzeile: dünne Linien, ohne Rahmen */
.zu-erledigen .symbol-knopf { flex: none; position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--leise); }
.zu-erledigen .symbol-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
.zu-erledigen .erledigt-knopf { color: var(--ok); }
/* Zurückstellen: das Auswahlmenü liegt unsichtbar über der Uhr */
.zu-erledigen .stumm-knopf { overflow: hidden; }      /* Safari macht Auswahlfelder so breit wie den längsten Eintrag */
.zu-erledigen .stumm-knopf select.stumm { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%;
    margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.zu-erledigen li > a.was, .zu-erledigen li > span.was { display: block; }
.zu-erledigen .fehler { color: var(--nein); margin: 4px 0; }
.zu-erledigen small { color: var(--leise); font-size: 0.8rem; }
.zu-erledigen small.ueberfaellig { color: var(--nein); }
.zu-erledigen .bereich-titel { font-size: 0.8rem; font-weight: 700; color: var(--leise);
    text-transform: uppercase; letter-spacing: 0.03em; }
.zu-erledigen .bereich-titel.einsatz { color: var(--einsatz); }
.zu-erledigen .bereich-titel.jugend { color: var(--jugend); }
.zu-erledigen .bereich-titel.kinder { color: var(--kinder); }

/* Termine: „+ Termin anlegen“ und der Wechsel Liste/Kalender auf einer Höhe */
.termine-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.termine-kopf .ansicht-wechsel { margin-left: auto; display: flex; padding: 8px; border: 0; background: none;
    color: var(--leise); }
.termine-kopf .ansicht-wechsel svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }