@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --bg:     #EFF1F4;
    --paper:  #FFFFFF;
    --ink:    #17263A;
    --ink60:  #5A6878;
    --ink30:  #A9B3BE;
    --line:   #DFE4E9;
    --rot:    #C2453B;
    --gelb:   #B07908;
    --gruen:  #1F7A5C;
    --blau:   #2B4E7E;

    /* Version 4: weichere Kanten, ruhigere Schatten */
    --rund:    12px;
    --rund-s:  9px;
    --schatten:    0 1px 2px rgba(23,38,58,.05), 0 4px 14px rgba(23,38,58,.05);
    --schatten-s:  0 1px 2px rgba(23,38,58,.05);
    --luft:    18px;
    /* Breite der linken Navigationsleiste – am Handy schmal, sonst breit */
    --navbreite: 58px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── „hidden" muss wirken ──────────────────────────────────────────────────
   Das HTML-Attribut `hidden` ist nur `display: none` aus dem Browser-Standard.
   Jede eigene Regel mit `display` schlägt es – dann ist ein Element sichtbar,
   obwohl PHP oder JavaScript es versteckt haben.

   Genau das ist am 24.08.2026 im Einkauf passiert: `.scan-buehne` hat
   `display: flex`, also stand die Kamerabühne beim Öffnen der Seite offen da
   („Kamera wird geöffnet…", schwarzes Bild über der ganzen Seite), ohne dass
   jemand darauf getippt hatte. Aus demselben Grund waren beide Scan-Knöpfe zu
   sehen, obwohl das Skript je nach Gerät nur einen einblendet.

   Diese Regel gehört nach ganz vorne. Einer der wenigen Fälle, in denen
   `!important` richtig ist: „versteckt" darf sich nicht überstimmen lassen. */
[hidden] { display: none !important; }

/* Kein seitliches Verschieben der Seite.
   Ein einzelnes Element, das ein paar Punkte über den Rand ragt – ein Knopf mit
   langer Beschriftung, eine Tabelle, das Menü-Blatt – macht am Handy die ganze
   Seite querscrollbar. Man wischt dann versehentlich zur Seite und sucht den
   Inhalt. Gemessen an „Verwaltung": ein Knopf ragte vier Punkte hinaus und die
   Seite war 394 statt 390 breit. Waagerecht gibt es hier nichts zu sehen, also
   wird es abgeschnitten. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Archivo', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* Platz am Seitenende. Muss reichen für: die feste Fussleiste (~70 px),
       Safaris Bedienleiste am unteren Rand des iPhones (~90 px) und den
       Home-Indikator. Mit nur 100 px liess sich eine Fotosammlung nicht bis
       zum Ende scrollen – die untersten Kacheln und der Bereich zum Hochladen
       lagen unter der Safari-Leiste und waren nicht erreichbar.
       env() liefert 0, solange kein viewport-fit=cover gesetzt ist; die
       Angabe schadet nicht und greift, sobald es einmal gesetzt wird. */
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    -webkit-font-smoothing: antialiased;
}

.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.eyebrow {
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: var(--ink60); display: block;
}
.mini { font-size: 12px; color: var(--ink60); line-height: 1.5; }
.ist-rot, .ist-rot .eyebrow, .ist-rot strong { color: var(--rot); }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }

/* Der farbige Bereichskopf selbst steht weiter unten („main.seite > h1, …").
   Sein erklärender Text ist dort. */
/* ── Einstellungsseiten schmal halten ──────────────────────────────────────
   Ernst am 24.08.2026: „das Ganze muss nicht so breit dargestellt werden, wie
   momentan. Es reicht eine schmale Darstellung, in der man alles einfach sehen
   kann."

   Über die ganze Bildschirmbreite gezogene Formulare sind schwer zu lesen: Das
   Auge muss bei jeder Zeile weit zurückspringen. Rund 620 Punkte sind ein gutes
   Mass – etwa 75 Zeichen je Zeile.

   ACHTUNG, hier ist schon zweimal ein Selektor zerrissen: Diese Regel wurde
   nachträglich eingeschoben und hat dabei die Selektorzeile der Regel darunter
   mitgerissen („main.seite > .monat-kopf,"). Beim Einschieben deshalb IMMER
   prüfen, dass die Zeile davor auf „}" endet und nicht auf ein Komma. */
.kasten.schmal { max-width: 620px; }

/* Auf Einstellungsseiten ist „.mini" nicht ein Randhinweis, sondern der
   Haupttext – Ernst am 24.08.2026: „der Text ist klein". Deshalb dort etwas
   grösser, und die Kästen von sich aus schmal, ohne dass jeder einzelne die
   Klasse tragen muss. */
main.alles-klappbar .kasten { max-width: 620px; }
main.alles-klappbar .mini   { font-size: 14px; color: var(--ink); }
main.alles-klappbar .mini strong { font-weight: 700; }

/* Zwischentitel im Fotobereich: sichtbar, aber leiser als eine Abschnitts-
   überschrift. */
.fo-titel {
    margin: 18px 0 6px;
    font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink60);
}
.fo-titel:first-of-type { margin-top: 10px; }

/* Ordner merken: Feld und Knopf in einer Zeile, am Handy untereinander. */
.fo-zeile { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 8px; }
.fo-zeile > label { flex: 1 1 220px; }
.fo-zeile > button { flex: 0 0 auto; }

/* Fortschritt eines Abholdurchgangs („wie viel ist gelaufen, wie viel fehlt").
   Ein Kasten mit Balken, kein Zahlensalat: Die erste Frage ist immer, ob es
   überhaupt noch läuft – deshalb hebt .lauf-wach sich farbig ab. */
.lauf-kasten {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--rund-s);
    background: var(--paper);
}
.lauf-kasten.lauf-wach { border-color: var(--gruen); }
.lauf-kopf {
    margin: 0 0 8px;
    font-size: 13px; font-weight: 700;
}
.lauf-balken {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--line);
    margin: 0 0 8px;
}
.lauf-balken > span {
    display: block; height: 100%;
    border-radius: 999px;
    background: var(--gruen);
    transition: width .4s ease;
}
.lauf-kasten .mini { margin: 0 0 4px; }
.lauf-kasten .mini:last-child { margin-bottom: 0; }

/* Die Ordnerauswahl aus Dropbox.
   Ein <select> mit der Ordnerstruktur – die Tiefe steht als Einrückung im Text
   selbst (siehe dbxOrdnerAuswahl()), weil ein Auswahlfeld keine Baumdarstellung
   kann. Damit die Einrückung nicht wegfällt, sind es geschützte Leerzeichen. */
select.dbx-wahl { width: 100%; max-width: 100%; }

/* Die Filterleiste rollt seitlich, statt sich zu stauchen.
   Ohne feste Mindestbreite quetscht flex die Chips ineinander, und die
   Beschriftungen liegen übereinander – bei zehn Personen unlesbar. */
nav.filter {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
nav.filter::-webkit-scrollbar { display: none; }
nav.filter > .chip { flex: 0 0 auto; white-space: nowrap; }

/* Der farbige Bereichskopf.
   ────────────────────────
   Ernst am 24.08.2026: „ich meine bei terminen und kalender dass die
   Darstellung mit Kopfzeile usw. anders aussieht."

   Recht hatte er: Die Regel galt nur für `main.seite > h1`. Termine benutzt
   aber `<main class="liste">`, und der Kalender hat seinen Monatskopf ganz
   ausserhalb von `main`. Auf beiden Seiten fehlte der Kopf deshalb komplett,
   während alle anderen Bereiche ihn hatten – genau der Bruch, den Ernst gesehen
   hat. Deshalb hier eine gemeinsame Selektorliste statt einer einzelnen Regel. */
main.seite > h1,
main.liste > h1,
h1.bereich-kopf,
body > .monat-kopf {
    background: var(--bereich, var(--ink));
    color: #fff;
    margin: -18px -18px 16px;
    padding: 14px 18px 15px;
    border-radius: 0 0 var(--rund) var(--rund);
    display: flex; align-items: center; gap: 10px;
    font-size: 20px;
    box-shadow: var(--schatten-s);
}
main.seite > .monat-kopf h1,
body > .monat-kopf h1,
body > .bereich-kopf h1 {
    background: none; color: inherit; margin: 0; padding: 0;
    box-shadow: none; border-radius: 0; font-size: 20px;
}
main.seite > .monat-kopf .num { color: rgba(255,255,255,.75); }

/* „h1.bereich-kopf" steht ausserhalb von <main> (siehe liste.php). Es braucht
   deshalb KEINEN negativen Rand – der oben in der gemeinsamen Regel gleicht nur
   das Innenpolster von <main> aus, das hier gar nicht wirkt. */
h1.bereich-kopf {
    margin: 0 0 12px;
    border-radius: 0 0 var(--rund) var(--rund);
}
/* Das Bereichssymbol vor der Überschrift – dasselbe wie in der Navigation,
   damit man am Symbol erkennt, wo man ist, ohne zu lesen.
   Es steht bewusst nur hier: Die drei anderen Kopfvarianten hatten diesen
   Selektor früher zwar in der Liste, aber ohne „content" – ein ::before ohne
   Inhalt entsteht nicht, sie zeigten also nie ein Symbol. Beim Aufräumen des
   zerrissenen Selektors am 25.08.2026 blieb es deshalb so, wie Ernst es kennt. */
h1.bereich-kopf::before {
    content: var(--bereich-symbol, "");
    font-size: 20px; line-height: 1;
    filter: saturate(1.15);
}
/* Der Hinweis direkt unter dem Kopf gehört optisch dazu */
main.seite > h1 + .hinweis { margin-top: -8px; }

/* Abschnittsüberschriften in der Bereichsfarbe – gliedert die Seite, ohne dass
   Flächen bunt werden. */
main.seite .eyebrow { color: var(--bereich, var(--ink60)); }
main.seite .such-kopf { color: var(--ink); }
main.seite .such-kopf > span[aria-hidden] { filter: none; }

/* Der Hauptknopf nimmt die Bereichsfarbe an: „Ablegen" in den Dokumenten ist
   dann blau, „Eintragen" bei den Fahrzeugen grün. */
main.seite .knopf-voll { background: var(--bereich, var(--ink)); }
main.seite .knopf-voll.hell { background: var(--paper); color: var(--ink); }

/* Chips und aktive Zustände greifen die Farbe auf */
main.seite .chip.aktiv { background: var(--bereich, var(--ink)); border-color: var(--bereich, var(--ink)); }

/* Die frühere Kopfleiste (.hauptnav) ist entfallen – die Navigation steht
   jetzt links, siehe Abschnitt „senkrechte Leiste". */
.nav-punkt {
    display: inline-block; width: 8px; height: 8px; border-radius: 999px;
    margin-right: 5px; vertical-align: middle; flex-shrink: 0;
}

/* ---------- Navigation: senkrechte Leiste am linken Rand ----------
   Vorher lief sie quer über den Kopf. Mit elf Bereichen war sie am iPhone
   breiter als der Bildschirm; man musste weit nach rechts schieben, um an
   Fotos oder Finanzen zu kommen.

   Jetzt steht sie links und wächst nach unten. Am Handy schmal, nur die vier
   wichtigsten Bereiche plus „Mehr"; ab 620 px breit mit allen Bereichen und
   Beschriftung, dann braucht es „Mehr" nicht mehr. Ein Markup, zwei
   Darstellungen – die Auswahl macht allein dieses Stylesheet. */
.nav-mehr-schalter { position: absolute; opacity: 0; pointer-events: none; }

.seitennav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 2px;
    width: var(--navbreite);
    background: var(--ink);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    overflow-y: auto; scrollbar-width: none;
    box-shadow: 2px 0 12px rgba(21, 34, 52, .16);
}
.seitennav::-webkit-scrollbar { display: none; }

.tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px; color: #8E9CAC; cursor: pointer;
    font-size: 9px; font-weight: 700; letter-spacing: .02em; text-align: center;
    border-left: 3px solid transparent; min-height: 52px; justify-content: center;
}
.tab-symbol { font-size: 20px; line-height: 1.05; }
.tab-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-aktiv { color: #fff; border-left-color: #fff; background: #1D2E45; }
.tab:active { background: #22344E; }
.tab-abmelden { margin-top: auto; color: #7E8DA0; }

/* Der Inhalt rückt neben die Leiste */
body { padding-left: var(--navbreite); }
.fussleiste { left: var(--navbreite); }

/* Seiten ohne Leiste laufen über die ganze Breite. Betrifft die Startseite:
   sie ist selbst das Menü. Ohne diese Regel blieb links der Platz der Leiste
   als leerer Streifen stehen – am iPhone wie am Rechner. */
body.voll-flaeche { padding-left: 0; }
body.voll-flaeche .fussleiste { left: 0; }

/* Das Blatt mit allen Bereichen – am Handy der Weg zu allem Weiteren */
.nav-blatt { display: none; }

@media (max-width: 619px) {
    /* Schmal: nur Symbole und die vier wichtigsten Punkte */
    .tab-extra { display: none; }

    .nav-blatt {
        display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none;
    }
    .nav-blatt-weg {
        position: absolute; inset: 0; background: rgba(21, 34, 52, .45);
        opacity: 0; transition: opacity .2s ease;
    }
    .nav-blatt-inhalt {
        position: absolute; left: 0; right: 0; bottom: 0;
        background: var(--paper); border-radius: var(--rund) var(--rund) 0 0;
        padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
        transform: translateY(102%); transition: transform .24s ease;
        max-height: 84vh; overflow-y: auto;
    }
    .nav-mehr-schalter:checked ~ .nav-blatt { pointer-events: auto; }
    .nav-mehr-schalter:checked ~ .nav-blatt .nav-blatt-weg { opacity: 1; }
    .nav-mehr-schalter:checked ~ .nav-blatt .nav-blatt-inhalt { transform: none; }

    .nav-blatt-kopf {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; margin-bottom: 12px;
    }
    .nav-raster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .nav-feld {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        padding: 14px 6px; border-radius: var(--rund-s);
        background: var(--bg); font-size: 12px; font-weight: 600; text-align: center;
        min-height: 76px; justify-content: center;
    }
    .nav-feld-symbol { font-size: 22px; line-height: 1; }
    .nav-feld.aktiv { background: var(--ink); color: #fff; }
    .nav-feld:active { transform: scale(.97); }
    .nav-blatt-fuss {
        margin: 14px 0 0; font-size: 13px; color: var(--ink60);
        display: flex; align-items: center; gap: 2px;
    }
    .nav-blatt-fuss a { text-decoration: underline; }

    /* Platz am Seitenende für Fussleiste und Safaris Bedienleiste */
    body { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
    .fussleiste { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* Ab Tabletbreite bleibt die Darstellung dieselbe – Symbol oben, kleiner Text
   darunter, weil Ernst genau das schöner findet. Nur etwas breiter, damit
   „Dokumente" und „Kalender" ganz lesbar sind, und ALLE Bereiche sichtbar;
   „Mehr" braucht es dort nicht. */
@media (min-width: 620px) {
    :root { --navbreite: 76px; }
    .tab { padding: 12px 4px; font-size: 10px; min-height: 58px; gap: 4px; }
    .tab-symbol { font-size: 21px; }
    .tab-mehr { display: none; }
}

/* ---------- Aufklappbare Abschnitte ----------
   Einheitlich in allen Bereichen; die Umwandlung macht klappSkript() in
   lib.php, hier steht nur das Aussehen.

   ACHTUNG: Die Überschriften kommen als <h2 class="eyebrow"> aus den Seiten.
   Diese Klasse setzt 10 px, Grossbuchstaben und weite Sperrung - beim ersten
   Versuch war deshalb jeder Kopf ein winziger Grossbuchstabenstreifen. Alle
   drei Eigenschaften müssen ausdrücklich zurückgenommen werden, sonst gewinnt
   die alte Klasse. */
.falte { padding: 0; margin-bottom: 12px; }
.falte-kopf {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 16px 16px 16px 0; margin: 0;
    background: var(--paper); border: 0; border-radius: var(--rund);
    box-shadow: var(--schatten-s);
    font-family: inherit; text-align: left; cursor: pointer;
    color: var(--ink); min-height: 60px;
    position: relative; overflow: hidden;
}
/* Farbakzent links – gibt den Köpfen Halt und macht sie auf einen Blick
   als Bedienelement erkennbar. */
.falte-kopf::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--ink30); transition: background .18s ease;
}
.falte-kopf { padding-left: 20px; }
.falte-kopf:active { background: #F4F6F9; }

.falte-titel {
    flex: 1 1 auto; min-width: 0;
    font-size: 16px; font-weight: 700; letter-spacing: -.005em;
    text-transform: none; color: var(--ink); line-height: 1.3;
}
/* Die mitgebrachte eyebrow-Klasse vollständig zurücknehmen */
.falte-titel .eyebrow {
    display: inline; font-size: inherit; letter-spacing: inherit;
    text-transform: none; color: inherit; font-weight: inherit;
}
.falte-pfeil {
    flex: 0 0 26px; text-align: center; font-size: 20px; color: var(--ink30);
    transition: transform .18s ease;
}

.falte.auf {
    background: var(--paper); border-radius: var(--rund);
    box-shadow: var(--schatten);
}
.falte.auf > .falte-kopf {
    border-radius: var(--rund) var(--rund) 0 0; box-shadow: none;
    border-bottom: 1px solid var(--line);
}
.falte.auf > .falte-kopf::before { background: var(--blau); }
.falte.auf > .falte-kopf .falte-pfeil { transform: rotate(90deg); color: var(--blau); }

.falte-inhalt { display: none; }
.falte.auf > .falte-inhalt { display: block; padding: 14px 16px 16px; }

/* ---------- Kopf ---------- */
.kopf {
    background: var(--paper); padding: 22px 20px;
    border-radius: 0 0 var(--rund) var(--rund);
    box-shadow: var(--schatten);
}
.zaehler { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.zaehler .zahl { font-family: 'IBM Plex Mono', monospace; font-size: 44px; line-height: .85; font-weight: 600; }
.zaehler .einheit { padding-bottom: 4px; }
.naechster-titel { margin: 6px 0 0; font-weight: 600; font-size: 16px; }
.naechster-info  { margin: 1px 0 0; font-size: 13px; color: var(--ink60); }
.leer { margin: 12px 0 0; color: var(--ink60); font-size: 14px; }

/* Der Kopfbereich der Terminliste war 660 Punkte hoch – am Handy fast ein
   ganzer Bildschirm, bevor der erste Termin kam. Dieselben Angaben, nur enger
   gesetzt: Monatsband schmaler, Abstände halbiert. */
.band-titel { margin: 12px 0 5px; }
.band { display: flex; align-items: flex-end; gap: 1px; height: 26px; }
.band-spalte { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.balken { width: 100%; border-radius: 1px; }
.balken.vorbei { background: var(--rot); opacity: .85; }
.balken.kommt  { background: var(--blau); }
.fuss { width: 100%; height: 2px; margin-top: 3px; background: var(--line); }
.fuss.heute { height: 5px; background: var(--ink); }

.summen { display: flex; gap: 24px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.summen strong { display: block; font-size: 18px; font-weight: 600; margin-top: 0; }

/* ---------- Filter ---------- */
.filter { display: flex; gap: 8px; padding: 14px 20px; overflow-x: auto; align-items: center; }
.chip {
    padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--ink60); white-space: nowrap;
}
.chip.aktiv { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.trenner { width: 1px; height: 20px; background: var(--line); flex: 0 0 1px; }

/* ---------- Liste ---------- */
.liste, .seite { padding: 0 20px; }
.seite { padding-top: var(--luft); }
.gruppe { margin-bottom: 26px; }
.gruppe h2 { margin: 0 0 10px; }
.karten {
    background: var(--paper);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.zeile { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.karten > .zeile:last-child { border-bottom: 0; }
.zeile::before { content: ''; width: 3px; flex: 0 0 3px; background: transparent; }
.zeile.rot::before  { background: var(--rot); }
.zeile.gelb::before { background: var(--gelb); }
/* Farbe aus dem Herkunftskalender (FamilyWall). Rot und Gelb für
   überfällig/bald fällig haben Vorrang – die sind wichtiger. */
.zeile[style*="--eigenfarbe"]::before { background: var(--eigenfarbe); }
.zeile.typ-termin::before { background: var(--blau); opacity: .35; }
.zeile.typ-termin.rot::before  { background: var(--rot); opacity: 1; }
.zeile.typ-termin.gelb::before { background: var(--gelb); opacity: 1; }

/* ---------- Einzelposten einer Abbuchung ----------
   Ernst am 26.08.2026: „Zahlungen immer als ein Punkt … die Einzelposten nur
   als Kommentar oder Punkte". `.zeile` ist eine Flexreihe (Farbstreifen ·
   Inhalt · ERLEDIGT); die Klappliste ist ein weiteres Kind und braucht
   deshalb den Umbruch – sonst stünde sie als schmale Spalte neben dem Betrag.
   Der Umbruch ist für die anderen Zeilen wirkungslos: Was passt, bricht
   nicht. */
.zeile { flex-wrap: wrap; }
.posten-liste { flex: 0 0 100%; border-top: 1px dashed var(--line); }
.posten-liste > summary {
    padding: 6px 12px; font-size: 12px; color: var(--ink60); cursor: pointer;
}
.posten-liste > summary:active { background: #F1F4F7; }
.posten-liste ul { list-style: none; margin: 0; padding: 0 12px 8px; }
.posten-liste li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
    padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.posten-liste li:first-child { border-top: 0; }
.posten-name { flex: 1 1 130px; min-width: 0; }
.posten-liste li .num { margin-left: auto; font-variant-numeric: tabular-nums; }

.zeile-inhalt { flex: 1; display: block; padding: 8px 8px 8px 12px; min-width: 0; }
.zeile-oben, .zeile-unten { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
/* Die zweite Zeile bleibt EINE Zeile, auch wenn eine lange Notiz darin steht.
   Sonst wächst ein Eintrag mit ausführlicher Notiz auf die dreifache Höhe, und
   in einer Liste mit hundert Einträgen findet man nichts mehr. Der ganze Text
   steht weiter in der Einzelansicht. */
.zeile-unten .meta {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1;
}
/* Das Wichtigste zuerst und hervorgehoben: „überfällig", „in 3 Tagen". */
.status-wort { font-weight: 600; color: var(--ink); }
.zeile.rot .status-wort  { color: var(--rot); }
.zeile.gelb .status-wort { color: var(--gelb); }
.titel  { font-weight: 600; }
.betrag { font-weight: 500; white-space: nowrap; }
.meta   { font-size: 12px; color: var(--ink60); }
.datum  { font-size: 11px; color: var(--ink60); white-space: nowrap; }
.status { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; color: var(--ink60); }
.zeile.rot  .status, .zeile.rot  .datum { color: var(--rot); }
.zeile.gelb .status, .zeile.gelb .datum { color: var(--gelb); }
.notiz { display: block; font-size: 11px; color: var(--ink30); margin-top: 3px; }

.erledigt-form { display: flex; border-left: 1px solid var(--line); flex: 0 0 auto; }
.erledigt-form button {
    background: none; border: 0; padding: 0 14px; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; color: var(--gruen); white-space: nowrap;
}

/* Am Handy nur ein Haken statt des Wortes „ERLEDIGT".
   Gemessen an der Terminliste: Das Wort belegte 185 von 275 Punkten
   Inhaltsbreite – zwei Drittel. „Ernst - Rettermayer telefonieren" brach dadurch
   auf drei Zeilen um, und die Zeile war wieder so hoch wie vorher. Der Haken
   braucht 44 Punkte, bleibt also eine sichere Tippfläche. */
@media (max-width: 619px) {
    .erledigt-form button {
        padding: 0; width: 44px; font-size: 0;   /* Text weg, Fläche bleibt */
    }
    .erledigt-form button::before {
        content: '✓'; font-size: 19px; letter-spacing: 0;
    }
}

.klapp { margin-bottom: 22px; }
.klapp summary { cursor: pointer; padding: 6px 0; }
.hist-zeile {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 12px; border-bottom: 1px solid var(--line);
    font-size: 13px; color: var(--ink60);
}
/* Bei 31 Zeilen in der Verwaltung sparen drei Punkte je Zeile 100 Punkte.
   Die Zeile bleibt mit 38 Punkten gut lesbar – sie ist nur Anzeige, hier wird
   nichts angetippt, also braucht sie keine Fingerfläche. */
/* Vermerk zu einer gebuchten Zahlung („per Überweisung bezahlt"). Kursiv und
   blasser als der Titel: Er ergänzt die Buchung, er ist nicht ihr Name. */
.hist-notiz { color: var(--ink30); font-style: italic; }

/* ---------- Kalender ---------- */
.monat-kopf {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; background: var(--paper);
    border-radius: 0 0 var(--rund) var(--rund); box-shadow: var(--schatten-s);
}
.monat-mitte { text-align: center; }
.monat-kopf h1 { margin: 0; font-size: 21px; }
.monat-kopf .num { color: var(--ink60); font-weight: 500; }
.heute-link {
    display: inline-block; margin-top: 4px;
    font-size: 12px; font-weight: 600; color: var(--blau);
    border: 1px solid var(--blau); border-radius: 999px;
    padding: 2px 10px;
}
.pfeil {
    /* „flex: 0 0 42px" statt nur „width": Der Monatskopf ist ein Flex-Kasten,
       und ohne feste Flex-Basis zogen sich die Pfeile über die halbe Breite –
       aus zwei runden Knöpfen wurden zwei lange weisse Balken. */
    flex: 0 0 42px;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; color: var(--ink60);
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}

/* Im farbigen Bereichskopf sind Schrift und Rahmen weiss – auf blauem Grund
   verschwand die Jahreszahl (dunkelblau auf blau) und die Pfeile stachen als
   weisse Flächen heraus. */
body > .monat-kopf .num { color: rgba(255,255,255,.72); }
body > .monat-kopf .pfeil {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.32);
    color: #fff;
}
body > .monat-kopf .pfeil:hover { background: rgba(255,255,255,.24); }
body > .monat-kopf .heute-link {
    color: #fff; border-color: rgba(255,255,255,.5);
}

.wochentage {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--paper); padding: 0 8px 6px;
}
.wochentage span {
    text-align: center; font-size: 10px; font-weight: 700;
    letter-spacing: .1em; color: var(--ink30);
}

.raster {
    /* „minmax(0, 1fr)" statt „1fr".
    
       „1fr" heisst in Wirklichkeit „minmax(auto, 1fr)" – die Spalte darf also
       nicht schmaler werden als ihr Inhalt. Seit die Termintitel einzeilig sind
       (white-space: nowrap), ist dieser Inhalt ein langer Text: „C/E - Urlaub
       mit Aulehners" allein verlangt gut 200 Punkte. Sieben solche Spalten
       sprengten die Seite nach rechts, und die Sonntagsspalte war abgeschnitten.

       Mit „minmax(0, ...)" dürfen die Spalten schrumpfen; der Titel wird dann
       per text-overflow gekürzt, wie vorgesehen. */
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; background: var(--line);
    border-radius: var(--rund); overflow: hidden;
    box-shadow: var(--schatten);
}
.tag {
    background: var(--paper); min-height: 72px;
    padding: 5px 3px 4px;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    /* KEIN overflow: hidden.
    
       Ernst am 24.08.2026: „im Bereich Kalender finde ich es unglücklich, dass
       die einzelnen Termine jetzt unterschiedliche Höhen haben ... die
       Gesamthöhe ist dann eben bestimmt durch die Anzahl der Termine, die
       maximal an einem der Tage in der Woche vorhanden sind."

       Genau das verhinderte „overflow: hidden": Passten die Pillen nicht in die
       Zelle, wurden sie am Rand abgeschnitten – halbe Balken, die wie
       übereinanderliegende Termine aussahen. Ohne die Regel wächst die
       Grid-Zeile von selbst nach dem Tag mit den meisten Terminen, und alle
       Zellen der Woche werden gleich hoch. Genau das ist gewollt. */
    position: relative;
}
/* Antippfläche liegt hinter dem Inhalt, damit der Aufklapp-Knopf
   darüber bedienbar bleibt. */
.tag-flaeche { position: absolute; inset: 0; z-index: 0; }
.tag > *:not(.tag-flaeche) { position: relative; z-index: 1; }
.tag-schalter { position: absolute; opacity: 0; pointer-events: none; }

/* Ab dem fünften Termin: am Rechner sichtbar, auf dem Handy erst
   nach dem Aufklappen. Die Zelle wächst dabei mit. */
.nur-rechner { display: none; }
.wenn-auf { display: none; }

@media (max-width: 619px) {
    .tag .kalender-pill.ab-fuenf { display: none; }
    .tag-schalter:checked ~ .kalender-pill.ab-fuenf { display: block; }
    .tag-schalter:checked ~ .kalender-mehr .wenn-zu { display: none; }
    .tag-schalter:checked ~ .kalender-mehr .wenn-auf { display: inline; }
}
@media (min-width: 620px) {
    .nur-handy   { display: none; }
    .nur-rechner { display: block; }
}
.tag.fremd { background: #F4F6F7; }
.tag.fremd .tagzahl { color: var(--ink30); }
.tagzahl { font-size: 13px; font-weight: 500; align-self: center; flex-shrink: 0; }
.tag.heute .tagzahl {
    background: var(--ink); color: #fff; border-radius: 999px;
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}
.tag.gewaehlt { box-shadow: inset 0 0 0 2px var(--blau); }

/* Titelbalken (FamilyWall-Stil) */
.kalender-pill {
    /* Jede Pille genau eine Zeile hoch – und zwar immer dieselbe.
    
       Über eine feste Höhe statt über Zeilenhöhe plus Innenabstand: So sind
       zwei Pillen auch dann gleich hoch, wenn in einer ein Emoji steckt.
       Emojis sind höher als Buchstaben und haben die Zeilen vorher
       auseinandergezogen – das war der Grund für die ungleichen Höhen.
       9px war zudem zu klein zum Lesen; 10,5px passt noch in die Spalte. */
    display: block;
    height: 16px; line-height: 16px;
    font-size: 10.5px; font-weight: 600;
    color: #fff; border-radius: 2px;
    padding: 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-shrink: 0;
}
.kalender-pill.alt { opacity: 0.42; }
.tag.fremd .kalender-pill { opacity: 0.42; }
.kalender-mehr {
    font-size: 9px; font-weight: 700; color: var(--ink60);
    text-align: center; line-height: 1.4; flex-shrink: 0;
    cursor: pointer; padding: 2px 0;
    border-radius: 4px;
}
.kalender-mehr:active { background: #EFF2F5; }

/* Punkte (nur noch in der Legende) */
.punkte { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; }
.punkt { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.punkt.geld   { background: var(--blau); }
.punkt.termin { background: var(--gruen); }
.punkt.alt    { opacity: .35; }
.mehr { font-size: 9px; color: var(--ink60); font-style: normal; }

.legende {
    display: flex; gap: 16px; padding: 10px 20px;
    font-size: 11px; color: var(--ink60);
}
.legende span { display: flex; align-items: center; gap: 5px; }
.tagesliste h2 { margin: 4px 0 8px; }

/* ---------- Blöcke, Admin ---------- */
.block { margin-bottom: 26px; }
.block h2 { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kasten {
    background: var(--paper); border-radius: var(--rund);
    box-shadow: var(--schatten); padding: 18px;
}
.hinweis { font-size: 13px; color: var(--ink60); margin: 0 0 18px; line-height: 1.55; }

/* ACHTUNG beim Einschieben: Die Zeile darüber muss auf „}" enden, nicht auf ein
   Komma – sonst reisst ein Selektor von seiner Regel los. Siehe CLAUDE.md,
   Fallstrick 19, das ist hier schon zweimal passiert. */

/* Ein Hinweis, der widerspricht, was daneben steht. Braucht Gewicht: Bei „Wo
   ist wer" liest man „0 m zurückgelegt" sonst als „war zu Hause", obwohl in
   Wahrheit nur nichts gemeldet wurde. */
.hinweis.ist-warnung {
    color: var(--ink);
    background: rgba(176, 121, 8, .09);
    border-left: 3px solid var(--gelb);
    border-radius: 0 var(--rund-s) var(--rund-s) 0;
    padding: 10px 12px;
}
.empfang-zeile {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.empfang-zeile:last-child { border-bottom: 0; }
.empfang-zeile > span:last-child { color: var(--ink60); text-align: right; }
.empfang-zeile.ist-schlecht > span:last-child { color: var(--rot); }

.benutzer-zeile { background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px; }
.karten > .benutzer-zeile:last-child { border-bottom: 0; }
.benutzer-zeile.still { opacity: .55; }
.benutzer-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.benutzer-kopf .meta { display: block; }
.klein-knopf {
    max-width: 100%;
    display: inline-block;
    border: 1px solid var(--line); border-radius: 999px;
    /* Mindestens 44 px hoch – Apples Mindestmass für Tippflächen.
       Vorher 7px/14px, also nur 32 px hoch: am Handy traf man den Knopf
       nur mit Glück. Betrifft „Ändern" in Kontakten und in der
       Benutzerverwaltung genauso wie die Finanzblätter. */
    padding: 12px 18px; line-height: 20px;
    min-height: 44px; box-sizing: border-box;
    font-size: 12px; font-weight: 600; color: var(--ink60); white-space: nowrap;
    background: var(--paper); cursor: pointer;
}
.unterformular { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ---------- Dokumente ---------- */
.dok-knopfreihe { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
/* Ein Formular als Knopf in einer Reihe – ohne das würde es die Zeile brechen */
.knopf-form { display: contents; }
.knopf-rand.ist-rot { color: var(--rot); border-color: #E8C4C1; }

/* Alle drei Knöpfe gleich breit nebeneinander.
   ACHTUNG, hier steckte ein Fehler, der am Rechner die halbe Zeile gefressen
   hat: „display: contents" nimmt das <form> aus dem Layout, seine Kinder werden
   selbst zu Flex-Elementen. Die Regel „.dok-knopfreihe > *" erreicht sie damit
   NICHT – sie sind Enkel. Der Löschknopf trug stattdessen width:100%, und
   Prozente beziehen sich im Flex-Layout auf den ganzen Container. Also nahm er
   die volle Reihenbreite ein, und „Ansehen" und „Herunterladen" wurden auf
   Nullbreite gequetscht. Deshalb hier ausdrücklich auch die Enkel. */
.dok-knopfreihe > *,
.dok-knopfreihe > .knopf-form > button {
    flex: 1 1 0; min-width: 0; text-align: center; width: auto;
}
/* Am Handy bleiben die Knöpfe lesbar, statt auf Null zu schrumpfen. */
@media (max-width: 480px) {
    .dok-knopfreihe > *,
    .dok-knopfreihe > .knopf-form > button { flex: 1 1 30%; }
}
.dok-knopfreihe .dok-kamera { padding-left: 10px; padding-right: 10px; }
#dok-details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
#dok-fusshinweis { margin-top: 12px; }

/* Die Kamera hängt an einem versteckten Dateifeld. Das Feld selbst darf
   nicht display:none sein – Safari löst es dann teils nicht aus. Deshalb
   liegt es unsichtbar über dem Knopf. */
.dok-kamera { position: relative; overflow: hidden; cursor: pointer; }
.dok-kamera input[type=file] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
    cursor: pointer; font-size: 0;
}

.dok-suche { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; flex-wrap: wrap; }
.dok-suche input[type=search] { flex: 1 1 180px; }

.dok-baum {
    background: var(--paper); border-radius: var(--rund);
    box-shadow: var(--schatten); overflow: hidden; margin-bottom: 22px;
}

/* Ein Ast besteht aus der Zeile und, falls vorhanden, den Kindern.
   Aufgeklappt wird über eine versteckte Checkbox – reines CSS.
   Die Checkbox steht im Markup VOR den Kindern, weil der Geschwister-
   selektor ~ nur nachfolgende Elemente erreicht. */
.dok-schalter { position: absolute; opacity: 0; pointer-events: none; }

.dok-zeile {
    display: flex; align-items: stretch;
    border-bottom: 1px solid var(--line);
}
.dok-baum .dok-ast:last-child > .dok-zeile { border-bottom: 0; }

.dok-ordner {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 9px 15px 9px 4px;
    min-height: 40px; font-size: 14px; min-width: 0;
}
.dok-ordner.aktiv { background: #F1F4F7; font-weight: 700; box-shadow: inset 3px 0 0 var(--ink); }
.dok-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-ordner .dok-zahl {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink60);
    background: var(--bg); border-radius: 999px; padding: 3px 9px; flex: 0 0 auto;
}

/* Der Pfeil ist die Tippfläche zum Auf- und Zuklappen: 44 px breit, damit
   er am Handy sicher zu treffen ist, ohne den Ordnerlink zu erwischen. */
.dok-pfeil {
    flex: 0 0 46px; display: flex; align-items: center; justify-content: center;
    /* Deutlich sichtbar: klein wirkte der Pfeil verloren neben dem Namen */
    font-size: 22px; line-height: 1; color: var(--ink);
    cursor: pointer;
    transition: transform .18s ease, color .18s ease;
    -webkit-user-select: none; user-select: none;
}
.dok-pfeil.leer { cursor: default; }
.dok-pfeil:active { color: var(--ink); }
.dok-schalter:checked ~ .dok-zeile .dok-pfeil { transform: rotate(90deg); color: var(--ink); }

/* Kinder sind standardmässig verborgen */
.dok-kinder { display: none; }
.dok-schalter:checked ~ .dok-kinder { display: block; }

/* Einrückung je Ebene, dazu eine feine Linie als Zugehörigkeit */
.dok-kinder > .dok-ast > .dok-zeile { padding-left: 18px; }
.dok-kinder > .dok-ast > .dok-zeile .dok-ordner { font-size: 13px; }
.dok-kinder { box-shadow: inset 1px 0 0 var(--line); }
.dok-ast { position: relative; }
.dok-karte { margin-top: 12px; }

/* Themen: Sicht quer über die Ordner */
.dok-personen { align-items: center; }
.dok-filterwort { opacity: .7; margin-right: 2px; }
.dok-themazeile { display: block; margin-top: 12px; text-decoration: none; color: inherit; }
.dok-themakarte { margin-top: 4px; }
.dok-themen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.dok-themachip { font-size: 12px; padding: 5px 10px; }
.dok-wer { font-weight: 600; }
/* Vorschlag für einen Ordner, den es noch nicht gibt */
.dok-neuvorschlag {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #F1F4F7; border-radius: var(--rund-s); padding: 10px 12px;
    margin: 4px 0 12px;
}

/* ---------- Fotos ---------- */
.foto-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* Nur das unmittelbare Kind: In der Knopfreihe einer Sammlung stecken jetzt
   Klappfelder mit ganzen Formularen darin, und ein <strong> in einem Formular
   ist kein Titel. */
.foto-kopf > strong { flex: 1 1 120px; min-width: 0; font-size: 15px; }

/* Raster passt sich der Breite an: am Handy drei, am Rechner sechs Spalten */
.foto-raster {
    display: grid; gap: 4px; margin: 12px 0 16px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.foto-kachel { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--rund-s); background: var(--bg); }
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Videos in der Galerie: Abspielsymbol und Laufzeit auf der Kachel */
.foto-kachel.ist-video { position: relative; }
.foto-film {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 999px;
    background: rgba(23,38,58,.62); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; padding-left: 2px; z-index: 1;
}
.foto-dauer {
    position: absolute; right: 4px; bottom: 4px; z-index: 1;
    background: rgba(23,38,58,.72); color: #fff;
    font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px;
}
/* Video OHNE Vorschaubild.
   ────────────────────────
   Ernst am 24.08.2026: „ohne vorschaubild sind die videos aber blöd zu
   erkennen". Recht hat er – eine leere graue Fläche sagt nichts.

   Ein echtes Vorschaubild kann dieser Webspace nicht erzeugen: Der
   HEVC-Decoder läuft in die Speichergrenze von 768 MB, die nicht anhebbar ist
   (gemessen: 786 400 von 786 432 kB belegt, dann bricht er ab). Also muss die
   Kachel selbst etwas hergeben – kein Bild, aber alles andere: ein grosses
   Filmsymbol, die Laufzeit, das Aufnahmedatum. Der dunkle Verlauf hebt sie
   deutlich von den Foto-Kacheln ab, damit auf einen Blick klar ist, was ein
   Film ist. */
.foto-kachel.ist-video.ohne-bild {
    background: linear-gradient(150deg, #24374f 0%, #16233a 60%, #101a2b 100%);
    display: flex; align-items: center; justify-content: center;
}
.foto-kachel.ist-video.ohne-bild .foto-film {
    /* Deutlich grösser als das Abspielzeichen über einem Bild: Hier ist es
       nicht Beiwerk, sondern der einzige Inhalt. */
    width: 54px; height: 54px; font-size: 22px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
}
.foto-kachel.ist-video.ohne-bild .video-text {
    position: absolute; left: 0; right: 0; bottom: 6px; z-index: 1;
    text-align: center; color: rgba(255,255,255,.78);
    font-size: 10px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
}
/* Die Laufzeit steht dann mittig unter dem Symbol, nicht in der Ecke – in der
   Ecke wirkt sie wie ein Aufkleber auf einem fehlenden Bild. */
.foto-kachel.ist-video.ohne-bild .foto-dauer {
    right: auto; left: 50%; transform: translateX(-50%);
    bottom: 22px; font-size: 11px; background: rgba(0,0,0,.38);
}

.foto-buehne video { width: 100%; height: auto; display: block; border-radius: var(--rund-s); background: #000; }

.album-raster {
    display: grid; gap: 12px; margin-top: 12px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.album-kachel {
    display: block; background: var(--paper); border-radius: var(--rund);
    box-shadow: var(--schatten); padding: 8px;
}
.album-kachel strong { display: block; font-size: 14px; margin-top: 8px; }
.album-bild {
    aspect-ratio: 4/3; overflow: hidden; border-radius: var(--rund-s);
    background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.album-bild img { width: 100%; height: 100%; object-fit: cover; }
.album-leer { font-size: 30px; opacity: .45; }

/* Karten mit Leaflet. Feste Höhe, denn die Bibliothek braucht eine messbare
   Fläche – ohne Höhe bleibt der Kartenbereich leer.
   Am Handy grosszügig hoch: eine Karte, in der man nichts erkennt, ist
   nutzlos, und genau das war das Problem der selbstgebauten Fassung. */
.karte-flaeche {
    width: 100%; height: 62vh; min-height: 320px; max-height: 620px;
    border-radius: var(--rund); box-shadow: var(--schatten);
    margin-bottom: 10px; background: #E7EDF3; z-index: 0;
}
/* Marke mit Anzahl. Leaflet setzt eigene Klassen, deshalb hier nur das Innere. */
.karte-marke span {
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--rot); color: #fff;
    font-size: 11px; font-weight: 700; border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(23,38,58,.4);
}
.karte-marke.person span { background: var(--marke, var(--blau)); font-size: 12px; }
/* Leaflet-Bedienelemente an die Optik des Portals anpassen */
.leaflet-control-zoom a { border-radius: var(--rund-s) !important; }
.leaflet-popup-content { font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; }

/* Aufnahmeorte: echte Kartenkacheln, darüber die Punkte.
   Die Kachelfläche hat ein festes Seitenverhältnis (3 × 3 Kacheln) und wird
   auf die verfügbare Breite skaliert; die Punkte sitzen prozentual darauf und
   wandern deshalb korrekt mit. */
.ort-karte {
    position: relative; width: 100%; aspect-ratio: 1;
    background: #E7EDF3; border-radius: var(--rund);
    box-shadow: var(--schatten); overflow: hidden; margin-bottom: 10px;
}
.ort-kacheln {
    position: absolute; inset: 0; display: grid; gap: 0;
    grid-auto-rows: 1fr;
}
/* KEIN object-fit: cover. Das hat jede Kachel einzeln beschnitten, wodurch
   Strassen an den Nähten versetzt waren. Ohne Angabe wird das Bild exakt auf
   die Zelle gezogen – die Zellen sind quadratisch, also stimmt das Bild. */
.ort-kacheln img { width: 100%; height: 100%; display: block; }
.ort-punkt {
    position: absolute; transform: translate(-50%, -50%);
    width: var(--gr); height: var(--gr); border-radius: 999px;
    background: var(--rot); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(23,38,58,.4); border: 2px solid #fff;
}
.ort-punkt:active { transform: translate(-50%, -50%) scale(.94); }
/* Kleine Karte am Ende der Sammlung – zeigt, wo die Bilder aufgenommen wurden.
   `aspect-ratio` steht hier nur als Rückfall: Die Fläche muss zum Kachelraster
   passen (2 × 2 ist quadratisch, 2 × 1 ein flacher Streifen), und die
   Zeilenzahl kennt allein fotos.php. Sie schreibt das Verhältnis deshalb
   direkt ans Element. */
.ort-mini {
    position: relative; width: 100%; max-width: 420px; aspect-ratio: 1;
    border-radius: var(--rund-s); overflow: hidden; background: #E7EDF3;
    box-shadow: var(--schatten-s); margin: 10px 0 12px; display: block;
}
.ort-mini .ort-kacheln { grid-template-columns: repeat(2, 1fr); }
/* Die Punkte sind Verweise („beim klick auf die zahl … gleich die entsprechenden
   Bilder"), also gross genug für einen Daumen: 22 statt 18 Punkte. Der
   angetippte wird dunkel – man muss sehen, welche Bilder man da unten sieht. */
.ort-mini .ort-punkt { --gr: 22px; font-size: 10px; border-width: 1.5px; }
.ort-mini .ort-punkt.ist-da {
    background: var(--ink); --gr: 26px; font-size: 11px;
    box-shadow: 0 0 0 3px rgba(23,38,58,.18), 0 2px 8px rgba(23,38,58,.45);
}
.ort-mini-fuss {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.86); font-size: 11px; font-weight: 600;
    padding: 4px 8px; color: var(--ink);
}

/* ── Die Karte und die Bilder des angetippten Ortes ────────────────────────
   Ernst am 26.08.2026: „beim klick auf die zahl in der karte sollten rechts bzw.
   unten gleich die entsprechenden Bilder gezeigt werden". „Rechts bzw. unten" ist
   hier keine zweite Bauart, sondern derselbe Umbruch: Beide Felder wollen
   mindestens 300 Punkte, am Handy passt nur eines in die Zeile – also rutscht
   die Vorschau von selbst unter die Karte. */
.ort-block {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px;
}
.ort-block > .ort-mini { flex: 1 1 300px; }
.ort-bilder { flex: 1 1 300px; min-width: 0; margin: 10px 0 12px; }
.ort-bilder-kopf {
    display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap;
    margin: 0 0 8px;
}
.ort-bilder-kopf .klein-knopf { margin-left: auto; flex: 0 0 auto; }
/* Kleine Kacheln, `auto-fill`: Es ist eine Vorschau neben der Karte – wie viele
   in eine Reihe passen, hängt davon ab, wie breit sie neben der Karte noch ist.
   Eine feste Spaltenzahl wäre hier falsch, weil es keine Ansage dazu gibt. */
.ort-bilder-raster {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

/* ── Grosse Karte: die Bilder des angetippten Punktes und die Voransicht ────
   Ernst am 26.08.2026: „ich möchte, dass die Bilder unterhalb der Karte direkt
   eingeblendet werden und wenn man sie dort anklickt, nochmals unterhalb eine
   Voransicht erscheint".

   Beide Fächer liegen in derselben Fläche wie die Karte, mit einer Trennlinie
   darüber: Man soll sehen, dass das Gezeigte zu dem Punkt oben gehört und
   nicht ein neuer Abschnitt der Seite ist. */
.ort-tafel { margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.ort-tafel-kopf, .ort-schau-kopf {
    display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap;
    margin: 0 0 10px;
}
/* Der Schliessknopf rechts, die Wege weiter davor. `margin-left: auto` am
   letzten Knopf schiebt alles Folgende an den Rand. */
.ort-tafel-kopf .klein-knopf, .ort-schau-kopf .klein-knopf { margin-left: auto; }
/* Am Handy sind es zwei Reihen: erst die Angaben, dann die Knöpfe in ganzer
   Breite – nebeneinander wären sie schmaler als ein Daumen. */
.ort-schau-kopf .knopf-voll, .ort-schau-kopf .knopf-rand { flex: 0 0 auto; }
/* Grössere Kacheln als in der kleinen Karte am Ende der Sammlung: Hier ist die
   ganze Seitenbreite da, und ein Tipp soll treffen. */
.ort-tafel-raster {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
/* Die Kacheln sind Knöpfe, keine Verweise: Ein Tipp öffnet nichts, er zeigt
   die Voransicht darunter. Der Browser gibt Knöpfen Rahmen und Grauton mit,
   die hier weg müssen. */
button.ort-kachel {
    border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
    cursor: pointer; -webkit-appearance: none; appearance: none;
}
button.ort-kachel.ist-da {
    box-shadow: 0 0 0 3px var(--rot);
}
/* Die angetippte Marke auf der Karte wird dunkel – man muss sehen, zu welchem
   Punkt die Bilder darunter gehören. */
.karte-marke.ist-da span {
    background: var(--ink);
    box-shadow: 0 0 0 3px rgba(23,38,58,.2), 0 2px 8px rgba(23,38,58,.5);
}
.ort-schau { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
/* Die Voransicht bleibt so hoch, dass die Karte oben nicht verschwindet:
   Sonst schiebt jedes angetippte Bild die Karte aus dem Bild, und man muss
   zum nächsten Punkt zurückscrollen. */
.ort-schau-bild {
    display: block; width: 100%; max-height: 52vh;
    object-fit: contain; border-radius: var(--rund-s); background: var(--bg);
}
/* Die Liste aller Orte ist zugeklappt – sie ist nur noch der Weg zu Apple
   Karten und Google Maps. Aufgeklappt bekommen die Einträge Luft. */
.ort-liste > summary { cursor: pointer; }
.ort-liste[open] > summary { margin-bottom: 12px; }

/* „Wo ist wer": Marken der Personen und der Weg eines Tages */
.wer-marke {
    position: absolute; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--farbe); color: #fff; border: 2.5px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 2px 10px rgba(23,38,58,.45);
}
.wer-marke:active { transform: translate(-50%, -50%) scale(.94); }
.weg-linie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.weg-punkt {
    position: absolute; transform: translate(-50%, -50%);
    width: 9px; height: 9px; border-radius: 999px;
    background: #fff; border: 2px solid var(--farbe);
}
.weg-punkt.halt { width: 15px; height: 15px; background: var(--farbe); }
.weg-punkt.start { width: 17px; height: 17px; background: #fff; border-width: 4px; }
.weg-punkt.ziel  { width: 21px; height: 21px; background: var(--farbe); border-width: 3px;
                   box-shadow: 0 2px 8px rgba(23,38,58,.4); }

.ort-leiste {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.ort-leiste .still { opacity: .35; pointer-events: none; }

.foto-buehne {
    background: var(--paper); border-radius: var(--rund); box-shadow: var(--schatten);
    padding: 8px; margin-bottom: 12px; overflow: auto;
}
.foto-buehne img { width: 100%; height: auto; display: block; border-radius: var(--rund-s); }
.foto-blaettern {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.foto-blaettern .still { opacity: .35; }

/* Die Seitenzahlen einer Sammlung. Die Leiste `.foto-seiten` (Zurück – Standort
   – Weiter) gibt es hier nicht mehr: Seit dem 26.08.2026 stehen die Zahlen
   selbst in der Steuerzeile (`.foto-leiste`), mit ‹ und › als Nachbarn darin.
   Beim Einzelbild (`.foto-blaettern`) und bei den Dokumentseiten
   (`.dok-blaettern`) bleibt die alte Anordnung – dort gibt es keine Seitenzahlen,
   nur ein Vorher und ein Nachher. */
.foto-seitenwahl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Blass statt weg: Ein Pfeil, der am Anfang oder Ende verschwindet, verschiebt
   beim Tippen die ganze Zeile – und der Finger trifft die Seitenzahl daneben. */
.foto-seitenwahl .chip.pfeil { padding-left: 9px; padding-right: 9px; }
.foto-seitenwahl .chip.still { opacity: .3; }
/* „Bild 1441–1560 von 2984 · 06/2019 – 08/2019" – gehört zur Leiste, nicht zum
   Text darunter, deshalb dicht an die Seitenzahlen gerückt. */
.foto-seitenwahl + .mini { margin: 4px 0 12px; }
/* Rechtetabelle: waagrecht schiebbar, damit viele Benutzer hineinpassen */
.tab-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }
/* Balken in der Nutzungsauswertung – zeigt das Verhältnis auf einen Blick */
.nutz-zeile { align-items: flex-start; }
.nutz-balken {
    display: block; height: 5px; margin-top: 6px; width: 100%; max-width: 220px;
    background: var(--line); border-radius: 999px; overflow: hidden;
}
.nutz-balken i { display: block; height: 100%; background: var(--blau); }
.dok-rechtetab td, .dok-rechtetab th { white-space: nowrap; }
.dok-rechtetab input[type=checkbox] { width: 22px; height: 22px; }
/* Sammelschalter je Person: am Handy untereinander, sonst nebeneinander */
.dok-sammelzeile { align-items: center; flex-wrap: wrap; }
.dok-sammelzeile .mini { display: block; }
.dok-sammelknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.dok-sammelknoepfe form { margin: 0; }

/* ---------- Dokumentvorschau ---------- */
.dok-vorschau-kopf {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.dok-vorschau-kopf strong { flex: 1 1 140px; min-width: 0; font-size: 15px; }
.dok-vorschau-kopf .knopf-rand, .dok-vorschau-kopf .knopf-voll { flex: 0 0 auto; }

.dok-blatt {
    background: var(--paper); border-radius: var(--rund);
    box-shadow: var(--schatten); padding: 8px; margin-bottom: 14px;
    overflow: auto;                     /* vergrössert schiebbar */
    -webkit-overflow-scrolling: touch;
}
/* ACHTUNG Spezifität: display gehört NICHT in diese Regel.
   `.dok-blatt img` wiegt (0,1,1) und schlug damit `.dok-blatt-gross`
   mit (0,1,0) – beide Bilder waren gleichzeitig sichtbar, das Dokument
   stand doppelt auf der Seite und die Zoomknöpfe schienen wirkungslos.
   Deshalb steht display jetzt bei den beiden Klassen selbst. */
.dok-blatt img { border-radius: var(--rund-s); }
/* Standard: passt in die Breite. Vergrössert: doppelte Breite, scrollbar. */
.dok-blatt-klein { display: block; width: 100%; height: auto; }
.dok-blatt-gross { display: none; width: 200%; max-width: none; height: auto; }

.dok-zoomschalter { position: absolute; opacity: 0; pointer-events: none; }
.dok-zoomleiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dok-ansichtschip { cursor: pointer; }

/* Drei Ansichten. Die Regeln wiegen (1,3,1) und schlagen damit sowohl
   `.dok-blatt img` (0,1,1) als auch `.chip` – bei gleicher Spezifität hätte
   die spätere Zeile gewonnen, und genau daran ist die Vorschau vorher
   gescheitert (beide Bilder gleichzeitig sichtbar, Knöpfe wirkungslos). */

/* „Ganze Breite": das kleine Bild füllt die Spalte. Standard. */
#dok-a-breite:checked ~ .dok-blatt .dok-blatt-klein { display: block; width: 100%; height: auto; }
#dok-a-breite:checked ~ .dok-blatt .dok-blatt-gross { display: none; }

/* „Grösser": doppelte Breite, im Blatt schiebbar */
#dok-a-gross:checked ~ .dok-blatt .dok-blatt-klein { display: none; }
#dok-a-gross:checked ~ .dok-blatt .dok-blatt-gross {
    display: block; width: 200%; max-width: none; height: auto;
}

/* „Stark": 350 % – damit lässt sich eine IBAN am Handy wirklich lesen.
   Es ist dasselbe Bild wie bei „Grösser", nur weiter aufgezogen; ein
   zusätzlicher Serveraufruf entsteht dadurch nicht. */
#dok-a-stark:checked ~ .dok-blatt .dok-blatt-klein { display: none; }
#dok-a-stark:checked ~ .dok-blatt .dok-blatt-gross {
    display: block; width: 350%; max-width: none; height: auto;
}

/* Welche Ansicht ist gewählt? */
#dok-a-breite:checked ~ .dok-zoomleiste label[for="dok-a-breite"],
#dok-a-gross:checked  ~ .dok-zoomleiste label[for="dok-a-gross"],
#dok-a-stark:checked  ~ .dok-zoomleiste label[for="dok-a-stark"] {
    background: var(--ink); color: #fff; border-color: var(--ink);
}
.dok-zoomschalter:checked ~ .dok-blatt .dok-blatt-klein { display: none; }
.dok-zoomschalter:checked ~ .dok-blatt .dok-blatt-gross { display: block; }

.dok-blaettern {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.dok-blaettern .knopf-rand { flex: 0 0 auto; }
.dok-blaettern .still { opacity: .35; }
.dok-seitenstand { font-size: 13px; color: var(--ink60); }
.dok-seitenwahl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dok-seiten {
    margin: 10px 0; padding-left: 24px;
    font-size: 12px; color: var(--ink60); line-height: 1.7;
}
.dok-seiten:empty { display: none; }

/* Dringlichkeit */
.dok-karte.dok-wichtig  { box-shadow: inset 4px 0 0 var(--gelb), var(--schatten); }
.dok-karte.dok-dringend { box-shadow: inset 4px 0 0 var(--rot),  var(--schatten); }
.dok-fahne {
    display: inline-block; vertical-align: 2px;
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    padding: 3px 7px; border-radius: 999px; margin-right: 5px;
    background: var(--rot); color: #fff;
}
.dok-wichtig .dok-fahne { background: var(--gelb); }
.dok-frist { color: var(--rot); font-weight: 600; }
.dok-alarm {
    color: var(--rot); font-weight: 600;
    background: #FDF3F2; border-left: 3px solid var(--rot);
    padding: 9px 12px; border-radius: var(--rund-s);
}
.chip.dok-warnchip { border-color: var(--rot); color: var(--rot); }
.chip.dok-warnchip.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }

/* Rückmeldung der automatischen Erkennung */
.dok-erkannt {
    color: var(--gruen); font-weight: 600;
    background: #F1F8F5; border-left: 3px solid var(--gruen);
    padding: 9px 12px; border-radius: var(--rund-s);
}

/* ---------- Fußleiste und Knöpfe ---------- */
.fussleiste {
    position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 20px;
    /* Unten zusätzlich der Home-Indikator, damit die Knöpfe nicht darauf
       liegen und sich schwer treffen lassen. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 68%, rgba(239,241,244,0));
    display: flex; gap: 10px; z-index: 30;
}
.fussleiste.zwei .knopf-voll { flex: 1; }

.knopf-voll {
    display: block; width: 100%; text-align: center; padding: 11px 14px;
    background: var(--ink); color: #fff; border: 0; border-radius: var(--rund-s);
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: var(--schatten-s);
}
.knopf-voll.hell { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.knopf-rand {
    display: inline-block; max-width: 100%; padding: 10px 16px; border: 1px solid var(--line);
    border-radius: var(--rund-s); color: var(--ink60); font-weight: 500;
    background: var(--paper); font-family: inherit; font-size: 15px; cursor: pointer;
}
.knopf-rand.breit { display: block; width: 100%; text-align: center; }
.knopf-loeschen {
    display: block; width: 100%; margin-top: 12px; padding: 15px 10px;
    background: none; border: 0; color: var(--rot);
    font-family: inherit; font-size: 14px; cursor: pointer;
}

/* ---------- Formular ---------- */
.overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(21,34,52,.45);
    display: flex; align-items: flex-end; justify-content: center;
}
.formular {
    width: 100%; max-width: 480px; max-height: 94vh; overflow-y: auto;
    background: var(--paper); border-radius: var(--rund) var(--rund) 0 0;
    padding: 22px; box-shadow: 0 -8px 40px rgba(23,38,58,.22);
}
.formular::before {
    content: ''; display: block; width: 38px; height: 4px; margin: -6px auto 16px;
    background: var(--ink30); border-radius: 999px;
}
.formular-titel { margin: 0 0 16px; }
.formular label, .login-karte label, .kasten label, .unterformular label { display: block; margin-bottom: 10px; }
.formular label .eyebrow, .login-karte label .eyebrow,
.kasten label .eyebrow, .unterformular label .eyebrow { margin-bottom: 3px; }
/* Häkchenzeile im Anmeldeformular */
.an-zeile { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.an-zeile input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 22px; }
.an-zeile span { font-size: 14px; }

.paar { display: flex; gap: 12px; }
.paar > label { flex: 1; }
/* Am Handy untereinander. Zwei Felder nebeneinander passten schon vorher
   knapp; seit die Navigationsleiste links 58 px belegt, bleiben nur noch
   332 px Inhaltsbreite und das rechte Feld wurde abgeschnitten – gemessen
   an der Sammlung „von/bis". Datumsfelder brauchen in Safari rund 150 px
   allein für „TT.MM.JJJJ". */
@media (max-width: 619px) {
    .paar { flex-direction: column; gap: 0; }
    .paar > label { width: 100%; }
}

/* ── Formulare am Rechner mehrspaltig ──────────────────────────────────────
   Ernst am 24.08.2026: „nicht gut aufgeteilt ... andere anordnung würde eine
   bessere aufteilung und übersicht bewirken."

   Am Handy bleibt alles untereinander – dort ist kein Platz. Am Rechner lagen
   bisher 26 Eingabefelder in einer einzigen Spalte, während rechts zwei Drittel
   der Fläche leer blieben: „Mein Konto" war 7204 px hoch, also acht
   Bildschirmseiten. Als Raster füllen die Felder die Breite und die Seite wird
   etwa halb so lang.

   Knöpfe, Absätze und Überschriften bleiben über die ganze Breite – sonst
   stünde ein „Speichern" plötzlich neben einem Eingabefeld und man findet es
   nicht mehr. */
@media (min-width: 700px) {
    /* NUR Formulare mit mindestens zwei Eingabefeldern werden mehrspaltig.
    
       Der erste Versuch setzte das Raster auf jeden „.kasten" – und weil das im
       Portal auch reine Textkästen sind, standen plötzlich Absätze in drei
       Spalten nebeneinander. „:has(> label + label)" trifft genau die
       Formulare, um die es geht: solche mit zwei aufeinanderfolgenden
       Beschriftungen. Ein Formular mit einem einzigen Feld bleibt wie es war. */
    form.kasten:has(> label + label),
    form.formular:has(> label + label),
    .unterformular:has(> label + label) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 0 16px;
        align-items: start;
    }
    /* Alles, was keine Eingabe ist, läuft über die ganze Breite – sonst stünde
       ein „Speichern" neben einem Feld und wäre nicht mehr zu finden. */
    form.kasten > button, form.kasten > .knopf-voll, form.kasten > .knopf-rand,
    form.kasten > p, form.kasten > h2, form.kasten > h3, form.kasten > table,
    form.kasten > .an-zeile, form.kasten > .paar, form.kasten > textarea,
    form.kasten > .dok-knopfreihe, form.kasten > .kz-reihe, form.kasten > details,
    form.formular > button, form.formular > .knopf-voll, form.formular > p,
    form.formular > .formular-knoepfe, form.formular > .schalter,
    .unterformular > button, .unterformular > .knopf-voll,
    .unterformular > p, .unterformular > table, .unterformular > ol,
    .unterformular > textarea, .unterformular > .fz-form {
        grid-column: 1 / -1;
    }
    /* Ein mehrzeiliges Textfeld braucht die ganze Zeile */
    form.kasten > label:has(textarea),
    form.formular > label:has(textarea),
    .unterformular > label:has(textarea) { grid-column: 1 / -1; }
}

input, select, textarea {
    width: 100%; padding: 8px 11px; border: 1px solid var(--line);
    border-radius: var(--rund-s); background: #fff; color: var(--ink);
    font-family: inherit; font-size: 16px;
}
/* Warum bleibt die Schrift bei 16 px, obwohl kleiner kompakter wäre? Weil
   Safari auf dem iPhone bei allem UNTER 16 px in ein Eingabefeld hineinzoomt,
   sobald man es antippt – die Seite springt dann und man muss zurückwischen.
   Gespart wird deshalb am Innenabstand: 43 px hohe Felder wurden so zu 37 px,
   bei 26 Feldern in „Mein Konto" sind das 150 px weniger Scrollweg. */
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: var(--blau);
    box-shadow: 0 0 0 3px rgba(43,78,126,.12);
}
input[type=date], input[type=time], input[type=number], input[name=betrag] {
    font-family: 'IBM Plex Mono', monospace;
}
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; }

.schalter { display: flex; gap: 8px; margin-bottom: 16px; }
.schalter-teil { flex: 1; margin: 0 !important; }
.schalter-teil input { position: absolute; opacity: 0; pointer-events: none; }
.schalter-teil span {
    display: block; text-align: center; padding: 11px;
    border: 1px solid var(--line); border-radius: var(--rund-s);
    font-size: 14px; font-weight: 600; color: var(--ink60); cursor: pointer;
    background: var(--paper);
}
.schalter-teil input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.schalter-teil input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }

.haken { display: flex; align-items: center; gap: 9px; margin-bottom: 10px !important; }
.haken input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--ink); }
.haken.mittig { flex: 1; align-self: center; margin-top: 18px !important; }
.haken.still { opacity: .5; }
.sicht-liste {
    background: #F5F7F9; border: 1px solid var(--line); border-radius: var(--rund-s);
    padding: 14px; margin-bottom: 14px;
}
.sicht-liste .eyebrow { margin-bottom: 8px; }

.formular-knoepfe { display: flex; gap: 10px; align-items: stretch; margin-top: 18px; }
.formular-knoepfe .knopf-voll { flex: 1; }

/* ---------- Anmeldung ---------- */
.login-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-karte {
    background: var(--paper); border-radius: var(--rund); padding: 30px 26px;
    width: 100%; max-width: 380px; box-shadow: var(--schatten);
    border-top: 3px solid var(--ink);
}
.login-karte h1 { margin: 6px 0 20px; font-size: 26px; }
.meldung { padding: 11px 14px; border-radius: var(--rund-s); font-size: 13px; margin: 0 0 16px; }
.meldung.fehler { background: #F9E6E4; color: var(--rot); }
.meldung.gut    { background: #E3F1EB; color: var(--gruen); }

@media (min-width: 620px) {
    .overlay { align-items: center; }
    .formular { border-radius: var(--rund); }
    .formular::before { display: none; }
    .tag { min-height: 104px; }

    /* Auch am Rechner bleibt jede Pille EINZEILIG.
    
       Hier stand vorher „white-space: normal" mit „-webkit-line-clamp: 2", damit
       lange Titel zweizeilig laufen. Das war der Grund für Ernsts Beobachtung
       („die einzelnen Termine haben unterschiedliche Höhen", 24.08.2026): Ein
       Termin mit langem Titel wurde doppelt so hoch wie der darüber, und weil
       die Zellenhöhe davon nicht wusste, schoben sich die unteren Pillen
       übereinander.

       Eine Zeile je Termin, dafür alle gleich – der volle Titel steht beim
       Antippen des Tages darunter. */
    .tag .kalender-pill {
        white-space: nowrap;
        display: block;
        height: 18px; line-height: 18px; font-size: 11px;
    }
}
/* Hinweis: Die Regel für „Bewegung reduzieren" steht am Ende der Datei,
   damit sie auch die später ergänzten Animationen abschaltet. */

/* ================= Version 3: Aufgaben, Einkauf, Notizen, Kontakte ================= */

.filter.flach { padding: 0 0 14px; }

/* --- Abhak-Zeilen (Aufgaben, Einkauf) --- */
.haken-zeile {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px; border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.karten > .haken-zeile:last-child { border-bottom: 0; }
.haken-zeile.rot  { box-shadow: inset 3px 0 0 var(--rot); }
.haken-zeile.gelb { box-shadow: inset 3px 0 0 var(--gelb); }
.haken-zeile.fertig { opacity: .5; }
.haken-zeile.fertig .titel { text-decoration: line-through; }

/* Sprungziel aus der Suche. Ein Treffer verlinkt auf #a12 bzw. #e7; ohne
   Hervorhebung landet man mitten in einer langen Liste und sucht die Zeile
   dann von Hand. Das Aufleuchten bleibt stehen, solange die Adresse gilt. */
.haken-zeile:target {
    box-shadow: inset 3px 0 0 var(--blau);
    background: #F3F7FC;
    opacity: 1;
}

.haken-form, .weg-form { display: flex; margin: 0; }
.kasten-knopf {
    width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px;
    border: 2px solid var(--ink30); border-radius: 5px;
    background: none; cursor: pointer; padding: 0;
    font-size: 14px; line-height: 1; color: var(--gruen);
}
.kasten-knopf.voll { border-color: var(--gruen); background: var(--gruen); color: #fff; }

.haken-inhalt { flex: 1; min-width: 0; }
.haken-inhalt .titel { display: block; font-weight: 600; }
.haken-inhalt .meta  { display: block; font-size: 12px; color: var(--ink60); margin-top: 1px; }
.haken-inhalt .notiz { display: block; font-size: 12px; color: var(--ink30); margin-top: 3px; }
.menge { font-size: 13px; color: var(--ink60); font-weight: 500; }
.stern { color: var(--rot); font-style: normal; font-weight: 700; }

.weg-form button {
    background: none; border: 0; color: var(--ink30);
    font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer;
}

/* --- Schnelleingabe --- */
.schnell {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: var(--paper); border: 0;
    border-radius: var(--rund); padding: 12px; margin-bottom: 20px;
    box-shadow: var(--schatten);
}
.schnell input { flex: 1 1 auto; min-width: 0; }
.schnell input.schmal { flex: 0 0 84px; }
.schnell input.voll { flex: 1 1 100%; }
.schnell button {
    flex: 0 0 48px; border: 0; border-radius: var(--rund-s);
    background: var(--ink); color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer;
}

/* --- Notizzettel --- */
.zettel-feld { display: grid; gap: 14px; }
.zettel {
    background: var(--paper); border: 0;
    border-left: 4px solid var(--ink30); border-radius: var(--rund);
    padding: 16px; box-shadow: var(--schatten);
}
.zettel.fest { border-left-color: var(--gelb); background: #FFFDF7; }
.zettel-text { margin: 0 0 10px; line-height: 1.5; }
.zettel-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.zettel-knoepfe { display: flex; align-items: center; gap: 4px; }
.zettel-knoepfe form { margin: 0; }
.zettel-knoepfe button, .zettel-knoepfe a {
    background: none; border: 0; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 4px 6px; color: var(--ink60);
}

/* --- Kontakte --- */
.kontakt { background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px; }
.karten > .kontakt:last-child { border-bottom: 0; }
.kontakt-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kontakt-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tel-knopf {
    border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 14px; font-size: 13px; color: var(--blau); background: #F6F9FB;
}
.kontakt .notiz { margin: 8px 0 0; font-size: 12px; color: var(--ink60); }

/* --- Kalenderpunkt für Aufgaben --- */
.punkt.aufgabe { background: var(--gelb); }

/* --- Abbuchungen aus den Finanzen ---------------------------------------
   Eigene Farbe, weil eine Abbuchung weder Termin noch offene Zahlung ist: Sie
   geht von selbst ab, man kann sie nicht abhaken. Violett grenzt sie deutlich
   vom Blau der Zahlungen ab.                                              */
.punkt.ausgabe { background: #6B4E9E; }

/* Der Schalter „Abbuchungen aus/ein" ist ein Knopf, kein Link – ein Klick
   speichert etwas. Damit er wie die Chips daneben aussieht, braucht er das,
   was ein <button> nicht vom Browser geschenkt bekommt. */
.chip-form { display: inline-flex; margin: 0; flex: 0 0 auto; }
button.chip {
    appearance: none; -webkit-appearance: none;
    background: transparent; font-family: inherit; line-height: 1.2; cursor: pointer;
}
button.chip.aktiv { background: var(--ink); color: #fff; }
.legende .chip-form { margin-left: auto; }

/* Hinweis unter der Terminliste: was jenseits der 100 Tage liegt. */
.horizont-hinweis { padding: 4px 0 18px; }
.horizont-hinweis a { text-decoration: underline; }

/* --- Farbpunkt für Personen --- */
.person-punkt {
    display: inline-block; width: 8px; height: 8px; border-radius: 999px;
    margin-right: 4px; vertical-align: middle; flex-shrink: 0;
}

/* --- Farbwahl im Terminformular (Palette wie FamilyWall) --- */
.farbwahl {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 4px;
}
.farbfeld { margin: 0 !important; display: block; }
.farbfeld input { position: absolute; opacity: 0; pointer-events: none; }
.farbfeld span {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    cursor: pointer; box-shadow: inset 0 0 0 1px rgba(23,38,58,.12);
    transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease;
}
.farbfeld.ohne span {
    background: var(--paper); color: var(--ink30);
    font-size: 17px; font-weight: 600;
}
.farbfeld input:checked + span {
    transform: scale(1.14);
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.farbfeld input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 3px; }
.farbfeld span:active { transform: scale(.92); }

/* --- Farb-Wahl im Konto --- */
.farb-wahl { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.farb-wahl input[type=color] { width: 48px; height: 40px; padding: 2px; border-radius: var(--rund-s); cursor: pointer; }

/* --- Schnellwahl in der Übersicht --- */
.schnellwahl {
    display: flex; gap: 10px; margin-top: 18px;
    padding-top: 18px; border-top: 1px solid var(--line);
}
.schnellwahl a {
    flex: 1; text-align: center; padding: 12px 4px;
    border: 1px solid var(--line); border-radius: var(--rund-s);
    background: #F8FAFB;
}
.schnellwahl strong { display: block; font-size: 21px; font-weight: 600; }
.schnellwahl span {
    display: block; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink60); font-weight: 700; margin-top: 2px;
}

/* Fortschrittsbalken für den Massenupload. */
.balken {
    height: 8px; background: var(--bg); border-radius: 999px;
    overflow: hidden; margin: 8px 0;
}
.balken span {
    display: block; height: 100%; width: 0;
    background: var(--gruen); border-radius: 999px;
    transition: width .2s ease;
}
#foto-fortschritt { margin-top: 12px; }

/* ================= Version 7: eigene Sammlungen und Freigabe =========
   Eine private Sammlung trägt ihren Freigabeknopf direkt unter der Kachel –
   das ist der Weg, den Ernst am häufigsten gehen wird, und er soll nicht in
   einem Klappmenü versteckt sein. */
.album-eigen { display: flex; flex-direction: column; gap: 6px; }
.album-eigen .album-kachel { margin: 0; }
.album-freigabe { margin: 0; }
.album-freigabe button { width: 100%; padding: 7px 8px; font-size: 12px; }

/* Freigabe einer Sammlung: drei Stufen, dazwischen die Namen.
   Die Tippflächen sind bewusst gross – am Handy trifft man einen 14px hohen
   Radioknopf nicht, und ein Fehlgriff bedeutet hier, dass Bilder jemand sieht,
   der sie nicht sehen soll. Deshalb ist die ganze Zeile anklickbar. */
.album-freigabe > summary {
    cursor: pointer;
    padding: 6px 8px;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--flaeche);
    list-style: none;
    text-align: center;
}
.album-freigabe > summary::-webkit-details-marker { display: none; }
.album-freigabe[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.frei-form {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--rand);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--flaeche);
}
.frei-wahl, .frei-person {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}
.frei-wahl:hover, .frei-person:hover { background: rgba(0,0,0,.04); }
.frei-wahl input, .frei-person input { width: 20px; height: 20px; margin: 0; flex: none; }

/* Die Namen gehören zur Stufe darüber – eingerückt, damit das sichtbar ist. */
.frei-leute {
    margin: 0 0 4px 26px;
    padding-left: 8px;
    border-left: 2px solid var(--rand);
}
.frei-form button { margin-top: 6px; }

/* Nummerierte Anleitung, etwas luftiger als eine reine Liste. */
.anleitung { padding-left: 20px; margin: 8px 0 0; }
.anleitung li { margin-bottom: 7px; }
.anleitung code {
    background: var(--bg); padding: 1px 5px; border-radius: 4px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
}

/* ================= Version 7: Personen in Fotos =================
   Kacheln statt Liste: Ein Gesicht erkennt man am Bild, nicht am Namen.
   Die Reihen scrollen waagerecht – am Handy passen sonst zwei Gesichter auf
   den Bildschirm und man wischt endlos nach unten. */

.person-reihe {
    display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 8px;
    scrollbar-width: none;
}
.person-reihe::-webkit-scrollbar { display: none; }
.person-karte {
    flex: 0 0 auto; width: 84px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.person-karte img, .person-leer {
    width: 72px; height: 72px; border-radius: 999px; object-fit: cover;
    background: var(--bg); border: 2px solid transparent;
}
.person-leer {
    display: flex; align-items: center; justify-content: center;
    color: var(--ink30); font-size: 26px; font-weight: 700;
}
.person-karte.aktiv img, .person-karte.aktiv .person-leer { border-color: var(--blau); }
.person-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.person-zahl { font-size: 11px; color: var(--ink60); }

/* Gruppen gleicher Person: Bildreihe, Angabe, Namensfeld. Bewusst breit und
   flach – man prüft die Bilder mit einem Blick und tippt einmal. */
.grp-liste { display: flex; flex-direction: column; gap: 10px; }
.grp-karte {
    background: var(--bg); border-radius: var(--rund-s); padding: 10px;
    display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.grp-bilder { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.grp-bilder img {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: var(--rund-s); background: var(--paper); display: block;
}
.grp-mehr {
    font-size: 12px; font-weight: 600; color: var(--ink60);
    background: var(--paper); border-radius: var(--rund-s);
    padding: 6px 9px;
}
.grp-zeile { line-height: 1.35; }
.grp-wahl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grp-wahl select { flex: 0 1 160px; padding: 7px 9px; font-size: 14px; }
.grp-wahl input[type=text] { flex: 1 1 150px; min-width: 0; padding: 7px 9px; font-size: 14px; }
.grp-wahl button { flex: 0 0 auto; padding: 8px 14px; }

/* Die zu benennenden Gesichter: quadratische Kacheln im Raster. */
.ges-reihe {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.ges-karte {
    background: var(--bg); border-radius: var(--rund-s); padding: 8px;
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.ges-karte img {
    width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
    border-radius: var(--rund-s); display: block; background: var(--paper);
}
.ges-vorschlag { margin: 0; }
.ges-vorschlag button { width: 100%; padding: 7px 8px; font-size: 13px; }
.ges-wahl { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.ges-wahl select, .ges-wahl input { width: 100%; padding: 6px 8px; font-size: 13px; }
.ges-wahl button { padding: 6px 8px; font-size: 12px; }
.ges-weg { margin: 0; }
.ges-weg button {
    border: 0; background: none; color: var(--ink30);
    font-size: 11px; cursor: pointer; padding: 2px; width: 100%;
}
.ges-weg button:hover { color: var(--rot); text-decoration: underline; }

/* ── Mehrere Bilder auswählen ──────────────────────────────────────────────
   Das Kästchen liegt in der Ecke ÜBER der Kachel. Es ist bewusst gross (28 px
   Fläche): Am Handy trifft man ein 16-px-Kästchen neben einem Verweis nicht
   zuverlässig, und ein Fehlgriff öffnet dann das Bild. */
.foto-feld { position: relative; }
.foto-haken {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,.86); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 1px 3px rgba(23,38,58,.25);
}
.foto-haken input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.foto-feld.gewaehlt .foto-kachel img { outline: 3px solid var(--bereich, var(--blau)); outline-offset: -3px; }
.foto-feld.gewaehlt .foto-haken { background: var(--bereich, var(--blau)); }
/* Das Bild, auf das ein Verweis aus der Karte gezielt hat („In der Sammlung
   öffnen"). Ohne diesen Ring landet man auf einer Seite mit zwei Dutzend
   Bildern und sucht das gemeinte selbst. Kein `outline` auf dem Bild wie bei
   der Auswahl, sondern ein Ring um das ganze Feld: Beides kann gleichzeitig
   gelten, und dann müssen die zwei Zeichen unterscheidbar bleiben. */
.foto-feld.ist-ziel {
    box-shadow: 0 0 0 3px var(--rot), 0 4px 14px rgba(23,38,58,.28);
    border-radius: var(--rund-s); scroll-margin-top: 90px;
}

/* Die Sammelleiste klebt am unteren Rand, damit sie auch bei langer Liste
   erreichbar bleibt – ohne sie müsste man nach jeder Auswahl nach oben. */
.foto-sammelleiste {
    position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 30; margin: 12px 0 0;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--rund); padding: 10px 12px;
    box-shadow: var(--schatten);
}
.foto-anzahl { font-weight: 600; font-size: 14px; }
.foto-sammelleiste select { flex: 1 1 150px; min-width: 0; padding: 7px 9px; font-size: 14px; }
.foto-sammelleiste button { flex: 0 0 auto; padding: 8px 12px; font-size: 14px; }

/* „Alle Bilder dieser Seite auswählen" – steht über dem Raster und ist immer
   da, weil die Sammelleiste erst mit der ersten Auswahl erscheint. */
.foto-wahlkopf { margin: 0 0 8px; }

/* ── Einzelne Bilder freigeben ─────────────────────────────────────────────
   Die zweite Leiste sitzt UNTER der ersten und klebt nicht: Zwei klebende
   Leisten übereinander nehmen am Handy die halbe Höhe weg. Sie erscheint
   ohnehin nur, wenn etwas ausgewählt ist. */
.foto-freileiste { position: static; bottom: auto; z-index: auto; }
.foto-freileiste .eyebrow { flex: 1 1 100%; }
.haken-reihe {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; padding: 4px 8px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.haken-reihe input { margin: 0; }
.haken-reihe:has(input:checked) {
    border-color: var(--bereich, var(--blau));
    background: color-mix(in srgb, var(--bereich, var(--blau)) 12%, var(--paper));
}
/* Marke auf der Kachel: „dieses Bild ist für jemanden freigegeben". Rechts
   unten, damit sie dem Auswahlkästchen oben links nicht in die Quere kommt. */
.foto-frei {
    position: absolute; right: 5px; bottom: 5px; z-index: 2;
    max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; pointer-events: none;
    font-size: 11px; line-height: 1.5; padding: 1px 6px; border-radius: 999px;
    background: rgba(23,38,58,.72); color: #fff; backdrop-filter: blur(2px);
}

/* Fotoraster für „alle Bilder dieser Person" */
.foto-raster {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.foto-raster img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: var(--rund-s); display: block; background: var(--bg);
}

/* ── Anzeigegrösse der Vorschau ───────────────────────────────────────────
   Ernst am 26.08.2026: „ich möchte bei der vorschau eine möglichkeit haben die
   anzeigegröße zu ändern … wie jetzt, am handy 3 nebeneinander oder 2 oder nur
   1 … auch am rechner!"

   Feste Spaltenzahl statt `auto-fill`: „drei nebeneinander" ist eine Ansage,
   die `auto-fill` nicht einhalten kann – es rechnet mit einer Mindestbreite und
   entscheidet selbst, je nach Fensterbreite auch anders.

   ACHTUNG, hier lag eine Falle: `.foto-raster` steht in dieser Datei ZWEIMAL
   (oben für die Fotogalerie, hier für „alle Bilder dieser Person"), und die
   zweite Regel gewinnt – die Galerie lief also schon immer mit 96 statt 104
   Punkten. Diese Regeln stehen deshalb NACH beiden, und die Stufen tragen zwei
   Klassen (`.foto-raster.gr-3`), damit sie unabhängig von der Reihenfolge
   greifen. Wer oben etwas ändert, ändert nichts – bitte hier schauen.

   `minmax(0, 1fr)` statt `1fr`: Ein Bild mit eigener Breite würde die Spalte
   sonst aufblähen und das Raster über den Rand schieben. */
.foto-raster { grid-template-columns: repeat(var(--sp, 3), minmax(0, 1fr)); }
@media (min-width: 620px) {
    .foto-raster { grid-template-columns: repeat(var(--sp-gross, 5), minmax(0, 1fr)); }
}
/* Sieben Stufen, von Vollbild bis „sehr klein". Ernst am 26.08.2026: „zudem
   hätte ich gerne beim zoom gerne 5-8 stufen verbaut … von vollbild bis sehr
   detailliert" und „kleinste größe am rechner wie gerade eben" – die letzte
   Stufe hat am Rechner deshalb genau die acht Spalten von vorher.

   Die Zahlen stehen zweimal im Portal: hier und in FOTO_GROESSEN (fotolib.php).
   Das ist bewusst und lässt sich nicht vermeiden – der Server braucht sie, um
   die Bilderzahl je Seite zu bestimmen, der Browser, um die Spalten zu setzen.
   Wer eine Stufe ändert, ändert beide Stellen; die Prüfung in
   werkzeuge/pruef-fotokarte.php vergleicht sie miteinander. */
.foto-raster.gr-1 { --sp: 1; --sp-gross: 1; }
.foto-raster.gr-2 { --sp: 1; --sp-gross: 2; }
.foto-raster.gr-3 { --sp: 2; --sp-gross: 3; }
.foto-raster.gr-4 { --sp: 2; --sp-gross: 4; }
.foto-raster.gr-5 { --sp: 3; --sp-gross: 5; }
.foto-raster.gr-6 { --sp: 3; --sp-gross: 6; }
.foto-raster.gr-7 { --sp: 4; --sp-gross: 8; }

/* Vollbild und „sehr gross" zeigen das GANZE Bild, nicht einen quadratischen
   Ausschnitt: Bei einem Bild in voller Breite fällt der Beschnitt sofort auf –
   bei einem Hochformat fehlt dann oben und unten das halbe Motiv. In den
   kleineren Stufen bleibt das Quadrat, weil ein Raster mit unterschiedlich hohen
   Kacheln unruhig wirkt.

   Am Handy gilt das für beide Stufen (dort ist auch „sehr gross" eine Spalte),
   am Rechner nur für Vollbild – ab zwei Spalten nebeneinander sähen zwei Bilder
   verschiedener Höhe wie ein Versehen aus. */
.foto-raster.gr-1 .foto-kachel,
.foto-raster.gr-1 .foto-kachel img,
.foto-raster.gr-2 .foto-kachel,
.foto-raster.gr-2 .foto-kachel img { aspect-ratio: auto; height: auto; }
.foto-raster.gr-1 .foto-kachel img,
.foto-raster.gr-2 .foto-kachel img { object-fit: contain; }
@media (min-width: 620px) {
    .foto-raster.gr-2 .foto-kachel { aspect-ratio: 1; }
    .foto-raster.gr-2 .foto-kachel img { height: 100%; object-fit: cover; }
}

/* ── Die Steuerzeile: Seiten links, Name mittig, Zoom rechts ───────────────
   Ernsts Handskizze vom 26.08.2026. Drei Felder, aber KEIN dreispaltiges
   Raster: Am Handy soll die Zeile umbrechen dürfen, und `space-between` hält
   die drei Gruppen von selbst an ihren Plätzen. Der Name in der Mitte darf
   schrumpfen (`min-width: 0`), damit eine lange Beschreibung die Seitenzahlen
   nicht aus der Zeile drückt. */
.foto-leiste {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px;
}
.leiste-seiten, .leiste-zoom { flex: 0 0 auto; }
.leiste-titel {
    flex: 1 1 40%; min-width: 0; text-align: center;
    display: flex; flex-direction: column; gap: 1px; line-height: 1.25;
}
.leiste-titel strong { font-size: 15px; }
.leiste-titel .mini { font-size: 11px; }
/* Am Handy zuerst der Name: Er sagt, wo man ist. Zoom und Seiten stehen
   darunter in einer Reihe – zwei Zeilen statt fünf. */
@media (max-width: 619px) {
    .foto-leiste { gap: 6px 10px; }
    .leiste-titel { order: -1; flex: 1 1 100%; text-align: left; }
    .leiste-seiten { order: 2; }
    .leiste-zoom { order: 1; }
}

/* Der Zoom: − in der Mitte der Name der Stufe (und der Weg zu Vollbild) + .
   Kein Auswahlmenü und keine sieben Knöpfe: Die Wirkung sieht man erst nach dem
   Tippen, und sieben Knöpfe wären am Handy eine eigene Zeile. */
.foto-zoom {
    display: flex; align-items: stretch; gap: 0; margin: 0;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); overflow: hidden;
}
.foto-zoom button {
    border: 0; background: none; color: var(--ink); cursor: pointer;
    font-size: 13px; line-height: 1.2; min-height: 34px; padding: 5px 10px;
}
.zoom-schritt { font-size: 17px; font-weight: 600; padding: 5px 13px; }
/* Blass und tot statt weg – siehe .foto-seitenwahl: ein Knopf, der wegspringt,
   verschiebt beim Tippen die ganze Zeile. */
.foto-zoom button[disabled] { opacity: .3; cursor: default; }
.zoom-mitte {
    border-left: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    font-weight: 600; white-space: nowrap;
}
.zoom-mitte.ist-da { background: var(--bereich, var(--blau)); color: #fff; }
.foto-zoom button:active { background: #EFF2F5; }
.zoom-mitte.ist-da:active { background: var(--bereich, var(--blau)); }

/* Hochladen, Anlegen und Ändern als Klappknöpfe in der obersten Reihe. Offen
   nehmen sie die ganze Breite – ein Formular neben einem Knopf wäre zu schmal,
   und die Reihe würde bei jedem Öffnen anders aussehen. */
.kopf-klapp { flex: 0 0 auto; min-width: 0; }
.kopf-klapp > summary { list-style: none; display: inline-block; }
.kopf-klapp > summary::-webkit-details-marker { display: none; }
.kopf-klapp[open] { flex: 1 1 100%; }
.kopf-klapp[open] > summary { margin-bottom: 10px; }
.kopf-klapp .kasten, .kopf-klapp .unterformular { margin-bottom: 12px; }

/* ================= Version 7: Fahrzeuge – und die dichtere Bauart =========
   Ernst am 24.08.2026: „Tabellen mit großen feldern und eingabefelder riesen
   groß ... andere anordnung würde eine bessere aufteilung und übersicht
   bewirken." Diese Klassen sind der erste Schritt: Eingabefelder fliessen in
   einer Reihe statt untereinander, Tabellenzeilen sind schmal, Kennzahlen
   stehen als Block. Was sich hier bewährt, wandert in die anderen Bereiche. */

/* Formular als fliessende Reihe. Die Felder wachsen mit, brechen aber um,
   sobald es eng wird – am Handy landet damit jedes Feld untereinander, am
   Rechner stehen fünf in einer Zeile. */
.fz-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.fz-form input[type=text],
.fz-form input[type=date],
.fz-form select { flex: 1 1 140px; min-width: 0; padding: 8px 10px; font-size: 15px; }
.fz-form .fz-eng { flex: 0 1 104px; }
.fz-form button { flex: 0 0 auto; padding: 9px 18px; }
/* Das Aufnahmefeld sieht wie ein Knopf aus; das eigentliche Dateifeld liegt
   unsichtbar darüber. Ohne diesen Kniff zeigt jeder Browser sein eigenes,
   verschieden breites Bedienelement – am iPhone „Datei auswählen" in Grau. */
.fz-beleg { position: relative; overflow: hidden; cursor: pointer; flex: 0 0 auto; }
.fz-beleg input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
    font-size: 0; width: 100%; height: 100%;
}
/* Nach der Auswahl bestätigt der Browser nichts – deshalb wenigstens ein
   deutlicher Zustand, sobald eine Datei gewählt ist. */
.fz-beleg:focus-within { outline: 2px solid var(--blau); outline-offset: 1px; }

.fz-mitlabel {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink60); flex: 1 1 190px;
}
.fz-mitlabel input { flex: 1 1 auto; min-width: 0; }

/* Kennzahlen: am Handy zwei je Reihe, am Rechner so viele wie passen. */
.kz-reihe {
    display: grid; gap: 8px; margin: 0 0 12px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.kz {
    background: var(--bg); border-radius: var(--rund-s);
    padding: 9px 11px; display: flex; flex-direction: column; gap: 1px;
}
.kz-wert { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kz-name { font-size: 11px; color: var(--ink60); }
.kz.gelb { box-shadow: inset 3px 0 0 var(--gelb); }
.kz.rot  { box-shadow: inset 3px 0 0 var(--rot); }
.kz.rot .kz-wert { color: var(--rot); }

/* Schmale Tabelle. Bewusst ohne Kopfzeile: die Werte erklären sich, und eine
   Kopfzeile kostet am Handy eine ganze Zeile Höhe. */
.fz-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.fz-tab td { padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fz-tab tr:last-child td { border-bottom: 0; }
.fz-tab td.rechts { text-align: right; }
.fz-tab .fz-klein { font-size: 12px; color: var(--ink60); }
.fz-tab .weg-form button {
    border: 0; background: none; color: var(--ink30);
    font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.fz-tab .weg-form button:hover { color: var(--rot); }

/* Anteilsbalken statt Tortendiagramm: eine Zeile, sofort vergleichbar. */
.fz-balken { width: 34%; min-width: 60px; }
.fz-balken span {
    display: block; height: 7px; border-radius: 4px;
    background: var(--blau); opacity: .75; min-width: 2px;
}

@media (max-width: 520px) {
    /* Am Handy die Kilometer- und Literangaben in eine eigene Zeile lassen,
       sonst quetscht sich alles auf 40 Prozent Breite. */
    .fz-liste td { padding: 5px 4px; }
    .fz-balken { display: none; }
}

/* ================= Version 7: Strichcode scannen =================
   Die Kamerabühne liegt über der Liste, nicht daneben: Am Handy braucht das
   Bild die ganze Breite, sonst erkennt der Leser die schmalen Balken nicht. */

.scan-leiste { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }

.scan-buehne {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(21, 34, 52, .92);
    display: flex; align-items: center; justify-content: center;
    padding: 16px calc(16px + var(--navbreite)) 16px 16px;
}
.scan-kasten {
    width: 100%; max-width: 520px;
    background: var(--paper); border-radius: var(--rund);
    padding: 14px; box-shadow: var(--schatten);
}
.scan-kasten video {
    width: 100%; max-height: 46vh; background: #000;
    border-radius: var(--rund-s); display: block; object-fit: cover;
}

/* Der rote Strich zeigt, wohin der Code gehalten werden soll. Er liegt genau
   dort, wo der Leser das Bild abtastet – die mittleren 35 Prozent. */
.scan-strich {
    height: 2px; background: var(--rot); opacity: .8;
    margin: -24vh 12px 0; position: relative; z-index: 1;
    border-radius: 2px;
}

.scan-text { margin: 14px 0 0; font-size: 14px; color: var(--ink60); text-align: center; }
.scan-text.scan-gut    { color: var(--gruen); font-weight: 600; }
.scan-text.scan-fehler { color: var(--rot); }

.scan-neu { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.scan-neu .paar { display: flex; gap: 8px; }
.scan-neu .paar input { flex: 1 1 0; min-width: 0; }

.scan-knoepfe { display: flex; gap: 8px; margin: 14px 0 0; }
.scan-knoepfe button { flex: 1 1 0; }

/* ================= Version 7: Suche über alles =================
   Eine einzige Trefferzeile für alle Bereiche. Absichtlich karg: Titel,
   Fundstelle, Herkunft – wer mehr will, tippt darauf. Am Handy ist jede Zeile
   eine grosse Fläche, damit man sie mit dem Daumen sicher trifft. */

/* Die Spezifität ist Absicht: „.block h2" setzt weiter oben
   justify-content: space-between, damit Überschrift und Zusatz auseinander
   rücken. Hier soll die Trefferzahl aber direkt hinter dem Namen stehen –
   ohne „.block" davor verliert die Regel und die Zahl klebte am rechten
   Bildschirmrand, weit weg vom Bereich, zu dem sie gehört. */
.block .such-kopf {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    font-size: 16px; margin: 0 0 8px;
}
.such-kopf .num {
    font-size: 12px; font-weight: 500;
    color: var(--ink60); background: var(--bg);
    padding: 2px 8px; border-radius: 999px;
}

.such-liste { display: flex; flex-direction: column; }
.such-zeile {
    display: block; padding: 12px 13px; color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--line); border-radius: var(--rund-s);
}
.such-liste .such-zeile:last-child { border-bottom: 0; }
.such-zeile:active { background: #F3F7FC; }

.such-titel { display: block; font-weight: 600; line-height: 1.35; }
.such-text  { display: block; font-size: 13px; color: var(--ink60); margin-top: 3px; }
.such-meta  { display: block; font-size: 12px; color: var(--ink30); margin-top: 4px; }

/* Das gefundene Wort im Text. Kein grelles Gelb – der Text soll lesbar
   bleiben, die Stelle nur auffindbar sein. */
mark {
    background: #FBEFC7; color: var(--ink);
    padding: 0 2px; border-radius: 3px;
}

/* Bei den Chips der Bereichsauswahl steht die Trefferzahl hinter dem Namen */
.filter .chip .num { margin-left: 5px; color: var(--ink60); font-size: 12px; }
.filter .chip.aktiv .num { color: rgba(255, 255, 255, .75); }

/* ================= Version 6: Lebendigere Bedienelemente =================
   Alles Antippbare bekommt eine sichtbare Reaktion: leichtes Anheben beim
   Zeigen, spürbares Eindrücken beim Tippen. Bei „Bewegung reduzieren" im
   System bleibt alles ruhig (siehe Regel ganz unten in dieser Datei). */

.chip, .klein-knopf, .knopf-voll, .knopf-rand, .tel-knopf, .heute-link,
.schnellwahl a, .fin-menue-punkt, .start-punkt, .kachel, .pfeil,
.kasten-knopf, .schalter-teil span, .zeile-inhalt, .fin-karte,
.blatt-nav a, .fin-kopfzahl {
    transition: transform .16s cubic-bezier(.2,.7,.3,1),
                box-shadow .16s ease,
                background-color .16s ease,
                border-color .16s ease,
                opacity .16s ease;
}

/* Zeigen (Maus) – auf dem Handy ohne Wirkung */
@media (hover: hover) {
    .chip:hover, .klein-knopf:hover, .knopf-rand:hover, .tel-knopf:hover {
        border-color: var(--ink30); background: #fff;
    }
    .knopf-voll:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(23,38,58,.18); }
    .fin-menue-punkt:hover, .kachel:hover, .fin-karte:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(23,38,58,.06), 0 10px 26px rgba(23,38,58,.12);
    }
    .start-punkt:hover { transform-origin: center; }
    .schnellwahl a:hover { background: #fff; border-color: var(--ink30); }
    .zeile-inhalt:hover { background: #FAFBFC; }
    .pfeil:hover { background: #F4F7F9; border-color: var(--ink30); }
}

/* Tippen – das eigentliche Rückmeldesignal auf dem Handy */
.chip:active, .klein-knopf:active, .knopf-rand:active, .tel-knopf:active,
.schnellwahl a:active, .pfeil:active, .heute-link:active {
    transform: scale(.95);
    background: #EFF2F5;
}
.knopf-voll:active { transform: scale(.975); box-shadow: 0 1px 3px rgba(23,38,58,.2); }
/* .fin-karte steht hier bewusst NICHT mehr: sie ist ein Behälter mit
   Bedienelementen darin, kein Knopf. Beim Zusammenziehen wanderte der
   Knopf „Ändern" unter dem Finger weg und der Klick ging daneben. */
.fin-menue-punkt:active, .kachel:active, .fin-kopfzahl:active {
    transform: scale(.97);
    box-shadow: var(--schatten-s);
}
.zeile-inhalt:active { background: #F1F4F7; }
.kasten-knopf:active { transform: scale(.88); }

/* Startseite: Kacheln liegen auf einem Kreis. Die Grundverschiebung steht
   weiter unten bei .start-punkt – hier nur die Reaktion beim Bedienen. */
@media (hover: hover) {
    .start-punkt:hover { --skala: 1.07; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
}
.start-punkt:active { --skala: .93; }

/* Auswahlfelder: sichtbar als Bedienelement, nicht als graues Kästchen */
select {
    appearance: none; -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink60) 50%),
        linear-gradient(135deg, var(--ink60) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
    cursor: pointer;
}
select:hover { border-color: var(--ink30); }

/* Haken und Schalter mit weicherem Umschalten */
.kasten-knopf { transition: transform .16s cubic-bezier(.2,.7,.3,1), background-color .16s ease, border-color .16s ease; }
.haken input, .fin-posten-haken input { cursor: pointer; }

/* Seiteninhalt sanft einblenden statt hart erscheinen */
.seite > h1, .kopf, .karten, .kasten, .fin-menue, .kachel-feld {
    animation: sanft-auf .32s ease both;
}
@keyframes sanft-auf {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ================= Version 5: Startseite mit Bildcollage ================= */

.start {
    position: relative; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 30px 18px 26px; overflow: hidden;
}

/* Collage: viele Bilder, schräg, unterschiedlich gross und einander
   überlappend. Die Streuwerte kommen aus index.php.
   grid-auto-flow: dense füllt Lücken, die grosse Kacheln hinterlassen. */
.start-collage {
    position: absolute; inset: -6%;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: 86px;
    grid-auto-flow: row dense;
    gap: 0;
}
.start-collage i {
    display: block;
    /* Grösser als die Zelle: so überlappen sich die Kacheln wirklich */
    width: calc(100% + 16px); height: calc(100% + 16px);
    margin: -8px;
    background-size: cover; background-position: center;
    border-radius: 3px;
    transform: rotate(var(--dreh, 0deg)) translate(var(--x, 0), var(--y, 0));
    /* Dünner heller Rand statt kräftigem Schatten – bei überlappenden
       Kacheln summierten sich die Schatten zu einem grauen Schleier. */
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 1px 4px rgba(0,0,0,.22);
    animation: collage-auf .7s ease both;
    animation-delay: calc(var(--nr, 0) * 12ms);
}
.start-collage i.gross { grid-column: span 2; grid-row: span 2; z-index: 3; }
.start-collage i.hoch  { grid-row: span 2; z-index: 2; }

@keyframes collage-auf { from { opacity: 0; } to { opacity: 1; } }

/* Schleier: nur dort abdunkeln, wo Schrift liegt. Neutrales Schwarz
   statt Blau – der Blauton liess die Fotos grau wirken. In der Mitte
   und an den Rändern etwas mehr, damit Überschrift, Kreis und der
   Abmelden-Knopf lesbar bleiben; dazwischen bleiben die Bilder klar. */
.start-schleier {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 34% 26% at 50% 52%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 72%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom,
            rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 12%, rgba(0,0,0,.04) 26%,
            rgba(0,0,0,.04) 74%, rgba(0,0,0,.34) 90%, rgba(0,0,0,.58) 100%);
}

@media (min-width: 620px) {
    .start-collage {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        grid-auto-rows: 112px;
    }
}

.start-kopf, .start-kreis, .start-abmelden { position: relative; z-index: 2; }

.start-kopf {
    text-align: center; color: #fff; flex-shrink: 0;
    /* Eigener Schatten hinter dem Text – der Schleier ist jetzt heller,
       damit die Bilder sichtbar bleiben. */
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.45);
    padding: 4px 10px;
}
.start-kopf .eyebrow { color: rgba(255,255,255,.78); }
.start-kopf h1 {
    margin: 4px 0 10px; font-size: 28px; color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 3px 22px rgba(0,0,0,.5);
}
.start-naechster {
    margin: 0; display: flex; flex-direction: column; gap: 2px;
    font-size: 13px; color: #fff;
}
.start-naechster strong { font-weight: 600; }
.start-naechster span { color: rgba(255,255,255,.82); font-size: 12px; }

/* Die Fristzeile im Kopf der Startseite. Sie liegt auf der Collage, deshalb
   ein eigener dunkler Grund – heller Text allein wäre über einem hellen Bild
   nicht zu lesen. Rot nur bei überschrittener Frist; alles andere ist eine
   Ankündigung und soll die Startseite nicht alarmieren. */
.start-frist {
    margin: 8px 0 0; max-width: 320px;
    border-radius: 12px;
    background: rgba(0,0,0,.34);
    border-left: 3px solid rgba(255,255,255,.55);
}
.start-frist a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 7px 10px; color: #fff; text-decoration: none;
}
.start-frist strong { font-weight: 600; font-size: 13px; }
.start-frist span { color: rgba(255,255,255,.82); font-size: 12px; }
.start-frist-spaet { border-left-color: #ff6b6b; background: rgba(120,0,0,.42); }

/* Kreisanordnung: jede Kachel wird per Winkel platziert.
   Der Radius muss eine feste Länge sein – Prozentwerte in translate()
   beziehen sich auf die Kachel selbst, nicht auf den Kreis. */
.start-kreis {
    --radius: 122px;
    --groesse: 76px;
    position: relative;
    width: min(100%, 340px); height: min(100vw, 340px);
    margin: auto;
    flex-shrink: 0;
}
/* Aussehen einer Kachel – gilt in beiden Anordnungen (Kreis und Gitter).
   Wo die Kachel LIEGT, steht weiter unten je Anordnung. */
.start-punkt {
    --skala: 1;
    position: relative;              /* Bezug für die Zähler-Plakette */
    width: var(--groesse); height: var(--groesse);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 4px 18px rgba(0,0,0,.32);
    color: var(--ink); text-align: center;
    transform: scale(var(--skala));
    /* Kacheln erscheinen nacheinander */
    animation: punkt-auf .4s cubic-bezier(.2,.8,.3,1) both;
    animation-delay: calc(var(--nr) * 45ms + 120ms);
}
.start-kreis .start-punkt {
    position: absolute; top: 50%; left: 50%;
    margin: calc(var(--groesse) / -2) 0 0 calc(var(--groesse) / -2);
    transform:
        rotate(calc(var(--nr) * (360deg / var(--anzahl)) - 90deg))
        translate(var(--radius))
        rotate(calc(-1 * (var(--nr) * (360deg / var(--anzahl)) - 90deg)))
        scale(var(--skala));
}
@keyframes punkt-auf {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Kacheln mit Zähler nach vorn, sonst verdeckt die Nachbarkachel die Plakette */
.start-punkt:has(.start-zahl) { z-index: 2; }
.start-symbol { font-size: 20px; line-height: 1; }
.start-text {
    font-size: 10px; font-weight: 700; letter-spacing: .01em;
    max-width: calc(var(--groesse) - 10px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.start-zahl {
    /* Innerhalb des Kreises halten – in der Ecke würde die Nachbarkachel
       darüberliegen und die Plakette verdecken. */
    position: absolute; top: 6px; right: 6px; z-index: 3;
    min-width: 19px; height: 19px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rot); color: #fff;
    border-radius: 999px; font-size: 10.5px; font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

.start-abmelden {
    flex-shrink: 0; margin-top: 4px;
    font-size: 12px; font-weight: 600; color: #fff;
    border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
    padding: 9px 22px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(3px);
}

@media (min-width: 560px) {
    .start-kreis { --radius: 152px; --groesse: 92px; width: 420px; height: 420px; }
    .start-symbol { font-size: 25px; }
    .start-text { font-size: 11.5px; }
}
@media (max-height: 720px) {
    .start-kreis { --radius: 104px; --groesse: 66px; width: 292px; height: 292px; }
    .start-symbol { font-size: 17px; }
    .start-text { font-size: 9px; }
}

/* ---- Zweite Anordnung: Ring am Rand (Handy), Raster in der Mitte (Rechner)
   ----------------------------------------------------------------------------
   WARUM überhaupt eine zweite Form: Im Kreis wächst mit jedem Bereich nur die
   Dichte, nicht der Platz. Bei fünfzehn Kacheln stossen die Beschriftungen
   aneinander. Wer die Form gewählt hat, steht in den Einstellungen je Benutzer
   (startAnordnung() in lib.php) – Standard bleibt der Kreis.

   Bis 620 px liegen die Kacheln ringsum am Bildschirmrand; die Koordinaten
   rechnet index.php aus (--rx/--ry), weil ein Rechteck keine Winkelformel hat.
   Darüber ist es ein Raster in der Mitte, und die Koordinaten bleiben liegen.  */
.start-gitter {
    --groesse: 66px;
    position: absolute;
    /* Nicht bis in die Ecken: Oben liegt am iPhone die Uhr, unten der
       Balken zum Wischen. Als App im Vollbild reicht der Inhalt darunter,
       und die obersten Kacheln lägen sonst halb hinter der Statuszeile. */
    inset: max(6px, env(safe-area-inset-top, 0px)) 0
           max(6px, env(safe-area-inset-bottom, 0px)) 0;
    z-index: 2;
    /* Nur die Kacheln nehmen Berührungen an. Sonst läge eine unsichtbare
       Fläche über der ganzen Startseite. */
    pointer-events: none;
}
.start-gitter .start-punkt {
    position: absolute;
    left: var(--rx, 50%); top: var(--ry, 50%);
    margin: calc(var(--groesse) / -2) 0 0 calc(var(--groesse) / -2);
    pointer-events: auto;
}
/* Am Handy sitzt die Begrüssung in der Mitte des Rings, der Abmelden-Knopf
   direkt darunter – unten am Rand liegen jetzt Kacheln. */
.start-verteilt { justify-content: center; gap: 14px; }
.start-verteilt .start-kopf { max-width: 250px; }
/* Auf dem Ring sind die Kacheln kleiner als im Kreis: Symbol und Schrift
   deshalb eine Stufe zurück, sonst passt „Dokumente" nicht mehr hinein.
   Beide Werte stehen hier fest, damit sie nicht ab 560 px springen. */
.start-verteilt .start-gitter .start-symbol { font-size: 19px; }
.start-verteilt .start-gitter .start-text {
    font-size: 9px; max-width: calc(var(--groesse) - 6px);
}

@media (min-width: 620px) {
    .start-verteilt { justify-content: space-between; }
    .start-verteilt .start-kopf { max-width: none; }
    .start-gitter {
        --groesse: 88px;
        position: relative; inset: auto;
        display: grid; grid-template-columns: repeat(4, var(--groesse));
        gap: 16px; justify-content: center;
        margin: auto; flex-shrink: 0;
        pointer-events: auto;
    }
    .start-gitter .start-punkt {
        position: relative; left: auto; top: auto; margin: 0;
    }
    .start-verteilt .start-gitter .start-symbol { font-size: 25px; }
    .start-verteilt .start-gitter .start-text {
        font-size: 11.5px; max-width: calc(var(--groesse) - 10px);
    }
}
@media (min-width: 1000px) {
    .start-gitter {
        --groesse: 96px;
        grid-template-columns: repeat(5, var(--groesse));
        gap: 20px;
    }
}

/* ---- Dritte Anordnung: Arbeitsplatz (nur Verwaltung) ----------------------
   Ernst am 26.08.2026: „Als Admin brauch ich mehr Übersicht und mehr
   möglichkeiten … mit Collage im Hintergrund". Die Collage bleibt also, sie
   trägt jetzt aber Fliesstext statt nur Kacheln – deshalb ein dichterer
   Schleier und Kästen aus Milchglas darauf. Wer die Form nicht gewählt hat,
   sieht von diesen Regeln nichts: alles hängt an .start-arbeit.            */
.start-arbeit {
    justify-content: flex-start; gap: 14px;
    padding: max(18px, env(safe-area-inset-top, 0px)) 14px 22px;
    /* Der Inhalt darf länger sein als der Bildschirm – anders als beim Kreis,
       der immer genau eine Seite füllt. Das overflow: hidden von .start bleibt:
       Es schneidet nur den Überhang der Collage ab, denn der Kasten selbst
       wächst mit dem Inhalt (min-height, kein height). */
    min-height: 100svh;
}
/* Am Handy liegt unten die feste Leiste – darunter darf nichts verschwinden. */
@media (max-width: 719px) {
    .start-arbeit { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* Über Bildern ist Text nur mit Abstand lesbar. Der Schleier ist deshalb
   flächig statt in Bahnen wie beim Kreis, und die Bilder bleiben dahinter
   trotzdem zu erkennen. */
.start-arbeit .start-schleier {
    background: linear-gradient(to bottom,
        rgba(0,0,0,.72) 0%, rgba(0,0,0,.60) 30%, rgba(0,0,0,.58) 100%);
    backdrop-filter: blur(2px);
}

.ap-kopf, .ap-raster, .ap-kacheln { position: relative; z-index: 2; width: 100%; }

.ap-kopf {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px;
    max-width: 1500px; margin: 0 auto;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.ap-hallo { flex: 1 1 200px; }
.ap-hallo .eyebrow { color: rgba(255,255,255,.8); }
.ap-hallo h1 { margin: 2px 0 0; font-size: 26px; color: #fff; }

/* Das Suchfeld ist der Grund, warum diese Seite ein Arbeitsplatz ist:
   von hier aus geht es überall hin, ohne vorher einen Bereich zu wählen. */
.ap-suche { flex: 1 1 320px; display: flex; gap: 8px; }
.ap-suche input {
    flex: 1; min-width: 0;
    padding: 12px 16px; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.95);
    font-size: 15px; color: var(--ink);
    box-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.ap-suche button {
    flex-shrink: 0; padding: 12px 20px; border: 0; border-radius: 999px;
    background: var(--blau); color: #fff; font-size: 14px; font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* Die Felder: am Handy eine Spalte, am Rechner bis zu vier. */
.ap-raster {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    max-width: 1500px; margin: 0 auto;
}
@media (min-width: 720px)  { .ap-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .ap-raster { grid-template-columns: repeat(4, 1fr); } }

.ap-feld {
    background: rgba(255,255,255,.93);
    border-radius: var(--rund); padding: 12px 14px 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.32);
    backdrop-filter: blur(6px);
    align-self: start;
}
.ap-feld h2 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 6px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink60);
}
.ap-feld h2 a { color: inherit; }
.ap-zahl {
    margin-left: auto;
    min-width: 20px; padding: 2px 7px; border-radius: 999px;
    background: var(--rot); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
/* Ein Geldbetrag ist keine Menge offener Punkte – nicht rot, nur sachlich. */
.ap-summe { background: var(--ink); }
.ap-leer { margin: 4px 0 8px; font-size: 12.5px; color: var(--ink60); }

/* Eine Zeile: Titel links, Zahl rechts, darunter der Zusatz. Zwei Reihen
   statt drei – dieselbe Sparsamkeit wie in der Terminliste. */
.ap-zeile {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: baseline; column-gap: 6px;
    padding: 8px 8px 8px 10px; margin: 0 -4px;
    border-left: 3px solid transparent; border-radius: 8px;
    color: var(--ink);
}
.ap-zeile + .ap-zeile { border-top: 1px solid var(--line); }
.ap-zeile:active { background: rgba(0,0,0,.05); }
.ap-zeile .person-punkt { grid-row: 1; align-self: center; }
.ap-titel {
    grid-column: 2; font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-rechts { grid-column: 3; font-size: 13px; font-variant-numeric: tabular-nums; }
.ap-unten {
    grid-column: 2 / -1; grid-row: 2;
    font-size: 11.5px; color: var(--ink60);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-heute { border-left-color: var(--blau); background: rgba(43,78,126,.06); }
.ap-spaet { border-left-color: var(--rot);  background: rgba(194,69,59,.07); }

/* Die Bereiche bleiben die Navigation, nur klein: eine Leiste am Fuss
   statt einer Fläche in der Mitte. */
.ap-kacheln {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 1500px; margin: 2px auto 0;
}
.ap-kachel {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 74px; padding: 8px 4px;
    background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    color: #fff; font-size: 10px; font-weight: 600; text-align: center;
    backdrop-filter: blur(4px);
}
.ap-kachel span:not(.ap-symbol):not(.start-zahl) {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-kachel .start-zahl { top: 2px; right: 2px; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.ap-symbol { font-size: 19px; line-height: 1; }
.ap-kachel:active { background: rgba(0,0,0,.55); }

/* ================= Version 4: Finanzen ================= */

/* --- Blattwahl innerhalb der Finanzen --- */
.fin-blattkopf { margin-bottom: 16px; }
.fin-zurueck {
    display: inline-block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--blau);
    /* War nur 20 px hoch und damit am Handy kaum zu treffen.
       Der Innenabstand vergrössert die Tippfläche, ohne die Optik
       zu verändern – der negative Rand fängt ihn wieder auf. */
    padding: 14px 10px; margin-left: -10px;
}
.fin-blattkopf h1 { margin: 0; }

.fin-kopfzahlen { margin-bottom: 24px; }
.fin-kopfzahl {
    display: block; background: var(--ink); color: #fff;
    border-radius: var(--rund); padding: 18px 20px; box-shadow: var(--schatten);
}
.fin-kopfzahl .eyebrow { color: rgba(255,255,255,.6); }
.fin-kopfzahl strong {
    display: block; margin: 4px 0 2px;
    font-size: clamp(26px, 8.4vw, 34px); font-weight: 600; letter-spacing: -.015em;
    white-space: nowrap;
}
.fin-kopfzahl .mini { color: rgba(255,255,255,.66); }

/* Menükacheln statt Textlinks – auf dem Handy sonst kaum zu treffen */
.fin-menue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-menue-punkt {
    display: flex; flex-direction: column; gap: 2px; min-height: 74px;
    justify-content: center;
    background: var(--paper); border-radius: var(--rund);
    padding: 14px; box-shadow: var(--schatten);
}
.fin-menue-titel { font-weight: 700; font-size: 15px; }
.fin-menue-unter { font-size: 11px; color: var(--ink60); line-height: 1.35; }

/* --- Kennzahlen-Kacheln --- */
/* Mobil einspaltig: Beträge wie 2.382.464,00 € brauchen die ganze Breite. */
.kachel-feld { display: grid; grid-template-columns: 1fr; gap: 12px; }
.kachel {
    background: var(--paper); border-radius: var(--rund); padding: 16px;
    box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.kachel.gross { grid-column: 1 / -1; }
/* Beträge dürfen nicht umbrechen – Schrift schrumpft stattdessen mit */
.kachel strong {
    font-size: clamp(20px, 6.4vw, 26px); font-weight: 600;
    letter-spacing: -.015em; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel.gross strong { font-size: clamp(25px, 8.6vw, 34px); }
.kachel .mini { font-size: 11px; }
.kachel.ist-rot strong { color: var(--rot); }

/* --- Wertzeilen --- */
.fin-zeile {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.karten > .fin-zeile:last-child { border-bottom: 0; }
.fin-text { flex: 1; min-width: 0; }
.fin-wert { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-hinweis {
    display: block; font-size: 11px; color: var(--ink60);
    font-style: normal; line-height: 1.45; margin-top: 3px;
}
.fin-zeile.stark { background: #F6F8FA; }
.fin-zeile.stark .fin-wert, .fin-zeile.stark .fin-text { font-weight: 700; }
.fin-zeile.warnung { box-shadow: inset 3px 0 0 var(--gelb); }
.fin-zeile.ist-rot .fin-wert { color: var(--rot); }
.fin-zeile.ist-gelb .fin-wert { color: var(--gelb); }

/* --- Eingabewerte --- */
.fin-eingabe { padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--paper); }
.karten > .fin-eingabe:last-child { border-bottom: 0; }
.fin-eingabe-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fin-feld { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.fin-feld input { width: 130px; text-align: right; padding: 8px 10px; font-size: 15px; }
.fin-feld em { font-style: normal; font-size: 12px; color: var(--ink60); width: 12px; }
.fin-feld.breit { display: flex; width: 100%; }
.fin-feld.breit input { width: auto; flex: 1; text-align: left; }
.fin-feld.breit em { width: auto; flex: 0 0 auto; min-width: 0; }

/* --- Tabellen --- */
.tab-rollen { overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: thin; }
.fin-tab {
    width: 100%; border-collapse: collapse; background: var(--paper);
    border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten);
    font-size: 14px;
}
.fin-tab.schmal { font-size: 13px; min-width: 560px; }
.fin-tab th, .fin-tab td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.fin-tab thead th {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink60); font-weight: 700; background: #F6F8FA; white-space: nowrap;
}
.fin-tab td.r, .fin-tab th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-tab tbody tr:last-child td { border-bottom: 0; }
.fin-tab tr.summe td { font-weight: 700; background: #F6F8FA; }
.fin-tab tr.gewaehlt td { background: #EDF3FA; box-shadow: inset 3px 0 0 var(--blau); }
.fin-tab tr.warnung td { box-shadow: inset 3px 0 0 var(--gelb); }
.fin-tab tr.still td { opacity: .45; }
.fin-tab td em { display: block; font-style: normal; font-size: 11px; color: var(--ink60); }

/* --- Kredit- und Gläubigerkarten --- */
.fin-karte {
    background: var(--paper); border-radius: var(--rund); padding: 16px;
    box-shadow: var(--schatten); margin-bottom: 12px;
}
.fin-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fin-karte-kopf strong { font-size: 15px; }
.fin-karte .mini { display: block; margin-top: 4px; }
.fin-karte .klapp { margin: 12px 0 0; }
.fin-karte .klapp summary { list-style: none; display: inline-block; }
.fin-karte .klapp summary::-webkit-details-marker { display: none; }

/* Der Knopf „Ändern" ist ein <summary>. Dort gewann .klapp summary
   (padding: 6px 0) über .klein-knopf, weil es spezifischer ist – der Knopf
   SAH aus wie eine Pille mit Innenabstand, hatte seitlich aber keinen und
   war nur 45 × 32 px gross. Diese Regel holt das Mass zurück. */
.klapp summary.klein-knopf {
    padding: 12px 18px; line-height: 20px;
    min-height: 44px; box-sizing: border-box;
}
/* Am Handy über die ganze Breite: dort wird die Seite fast nur bedient. */
@media (max-width: 619px) {
    .klapp summary.klein-knopf { display: block; text-align: center; }
}
/* Kein Zusammenziehen beim Drücken. Der Knopf sitzt in einer Karte, die
   sich beim Antippen um 3 % verkleinerte – gemessen wanderte er dabei
   4,8 px zur Seite und schrumpfte auf 41,6 × 29,5 px. Genau deshalb ging
   der Klick oft daneben. Rückmeldung gibt jetzt nur die Farbe. */
.klapp summary.klein-knopf:active { transform: none; background: #EFF2F5; }

/* --- Ausgabenpositionen --- */
.fin-posten {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.karten > .fin-posten:last-child { border-bottom: 0; }
.fin-posten.still { opacity: .45; }
.fin-posten-haken { margin: 0 !important; display: flex; }
.fin-posten-haken input { width: 20px; height: 20px; accent-color: var(--ink); }
.fin-posten-text { flex: 1 1 150px; min-width: 0; font-size: 14px; }
.fin-posten-wahl { flex: 0 0 108px; padding: 7px 8px; font-size: 13px; }
/* Der Abbuchungszeitpunkt („zum 1."). Seit dem 26.08.2026 sitzt in der Zeile ein
   Feld mehr; sie darf deshalb umbrechen – am Handy stehen dann Bezeichnung und
   Haken oben, Zuordnung, Abbuchung und Betrag darunter. */
.fin-posten-wann { flex: 0 0 104px; padding: 7px 8px; font-size: 13px; }
/* Der zweite Haken der Zeile: „steht diese Position im Kalender?". Er trägt
   seine Beschriftung mit sich – zwei nackte Kästchen nebeneinander wären nicht
   unterscheidbar, und der eine schaltet die Ausgabe ab, der andere nur ihre
   Anzeige. */
.fin-posten-kal {
    margin: 0 !important; display: flex; align-items: center; gap: 5px;
    flex: 0 0 auto; font-size: 12px; color: var(--ink60);
}
.fin-posten-kal input { width: 18px; height: 18px; accent-color: var(--ink); }
.fin-posten-betrag { flex: 0 0 96px; text-align: right; padding: 7px 9px; font-size: 14px; font-weight: 600; }
@media (max-width: 520px) {
    .fin-posten-text { flex: 1 1 calc(100% - 40px); }
    .fin-posten-wahl, .fin-posten-wann { flex: 1 1 0; }
    .fin-posten-betrag { flex: 0 0 90px; }
}

/* --- Terminplan --- */
.fin-termin {
    padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--paper);
    display: flex; flex-direction: column; gap: 3px; position: relative;
}
.karten > .fin-termin:last-child { border-bottom: 0; }
.fin-termin.warnung { box-shadow: inset 3px 0 0 var(--rot); }
.fin-termin.still { opacity: .5; }
.fin-termin-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fin-termin-datum {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--ink60);
}
.fin-status {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; background: #EEF1F4; color: var(--ink60);
}
.fin-status.statusoffen       { background: #F9E6E4; color: var(--rot); }
.fin-status.statuserledigt    { background: #E3F1EB; color: var(--gruen); }
.fin-status.statuszugesagt    { background: #E3F1EB; color: var(--gruen); }
.fin-status.statusgeplant     { background: #EDF3FA; color: var(--blau); }
.fin-status.statusangefordert { background: #FBF2DE; color: var(--gelb); }
.fin-termin-form { margin: 8px 0 0; }
.fin-termin-form select { padding: 7px 10px; font-size: 13px; width: auto; }
/* Der Vermerk zum letzten Statuswechsel („Bank hat mündlich zugesagt").
   Abgesetzt durch die Leiste links, damit er sich von den Angaben aus der
   Tabelle unterscheidet – er ist der einzige Satz auf der Karte, den ein
   Mensch geschrieben hat. */
.fin-vermerk {
    margin-top: 5px; padding-left: 9px;
    border-left: 2px solid var(--line);
    font-size: 13px; color: var(--ink60);
}
.fin-vermerk .mini { display: block; color: var(--ink30); }
.fin-weg {
    position: absolute; right: 10px; bottom: 10px;
    background: none; border: 0; color: var(--ink30);
    font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer;
}

/* --- Dringlichkeitsstufen --- */
.rang-sofort { color: var(--rot); }
.rang-hoch   { color: var(--gelb); }

/* --- Fließtext und Belege --- */
.kasten.fliess p { margin: 0 0 12px; line-height: 1.6; }
.kasten.fliess p:last-child { margin-bottom: 0; }
.kasten.fliess p.warn {
    background: #FBF2DE; border-left: 3px solid var(--gelb);
    padding: 11px 13px; border-radius: 0 var(--rund-s) var(--rund-s) 0;
    font-size: 13px;
}
.beleg-text {
    margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12.5px; line-height: 1.65; white-space: pre-wrap;
    word-break: break-word; color: var(--ink);
}

@media (min-width: 520px) {
    .kachel-feld { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 620px) {
    .zettel-feld { grid-template-columns: 1fr 1fr; }
    .kachel-feld { grid-template-columns: repeat(3, 1fr); }
    .kachel.gross { grid-column: span 3; }
    .fin-tab.schmal { min-width: 0; }
}

/* ================= Version 8: Wolke – Drive und Dropbox =================
   Nur Zeilen zum Antippen und ein Fortschrittsbalken. Bewusst wenige Regeln:
   Alles andere übernehmen .kasten, .block und die Knopfklassen, die es schon
   gibt – der Bereich soll nicht anders aussehen als der Rest des Portals.

   Steht hier und nicht am Ende der Datei: Der Abschnitt danach
   („Bewegung reduzieren") muss der letzte bleiben, damit er alle Animationen
   erfasst.                                                                 */

.wolke-liste {
    display: flex; flex-direction: column;
    gap: 2px; margin: 10px 0 16px;
}

/* Grosse Tippfläche – bedient wird das am iPhone, mit dem Daumen. */
.wolke-zeile {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 10px 14px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--rund-s);
    color: var(--ink); text-decoration: none;
}

.wolke-zeile:active { background: var(--bg); }

.wolke-symbol {
    flex: 0 0 26px; text-align: center;
    font-size: 17px; color: var(--ink60);
}

.wolke-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }

.wolke-pfeil { flex: 0 0 auto; color: var(--ink30); font-size: 20px; }

.wolke-neu { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Der Balken ist das native <progress>. Es braucht in Safari beide
   Pseudo-Elemente, sonst bleibt es grau. */
#wolke-balken {
    width: 100%; height: 10px; margin: 6px 0 12px;
    border: none; border-radius: 5px;
    background: var(--line); appearance: none; -webkit-appearance: none;
}

#wolke-balken::-webkit-progress-bar { background: var(--line); border-radius: 5px; }
#wolke-balken::-webkit-progress-value {
    background: var(--bereich, var(--blau)); border-radius: 5px;
}
#wolke-balken::-moz-progress-bar { background: var(--bereich, var(--blau)); }

/* ---------- Register (Verwaltung) ----------
   Eine Leiste aus Pillen unter der Überschrift. Sie wählt, WELCHER Teil der
   Seite gezeigt wird – anders als .filter, das eine Liste einschränkt. Deshalb
   eigene Klasse: gleiche Form, aber grösser, mit Symbol und in der Bereichsfarbe.

   Am iPhone liegen sechs Register nicht nebeneinander; die Leiste lässt sich
   deshalb schieben. Angeschnittene Pillen am Rand zeigen, dass da noch mehr
   kommt – ein Umbruch in zwei Reihen hätte am Handy zu viel Höhe gekostet. */
.reiter {
    display: flex; gap: 6px; margin: 0 0 18px; padding-bottom: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--ink60);
    font-size: 14px; font-weight: 500; white-space: nowrap;
    box-shadow: var(--schatten-s);
}
.reiter a:active { background: #F1F4F7; }
.reiter a.aktiv {
    background: var(--bereich, var(--ink)); border-color: var(--bereich, var(--ink));
    color: #fff; font-weight: 600;
}

/* ---------- Papierkorb: der Weg zurück ----------
   Bewusst wenige Regeln. Die Filterreihe (.filter/.chip), die Klapptexte
   (.klapp), die Kästen und alle Knopfklassen gibt es schon – der Papierkorb
   soll nicht wie ein fremder Bereich aussehen, sondern wie eine Liste, die man
   kennt. Neu ist nur, was es nirgends sonst gibt: die Restfrist rechts oben
   und die beiden Knöpfe darunter.                                          */
.pk-summe { margin: 0 0 12px; }

.pk-zeile {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--rund-s); padding: 12px 14px;
}

/* Ab drei Tagen Restfrist ein roter Rand: Wer die Seite einmal im Monat
   öffnet, soll ohne Lesen sehen, was als Nächstes verschwindet. */
.pk-zeile.eilt { border-color: #E8C4C1; }

.pk-kopf {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 2px;
}
.pk-kopf strong { min-width: 0; overflow-wrap: anywhere; }

.pk-frist {
    flex: 0 0 auto; font-size: 12px; color: var(--ink60);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.pk-zeile .meta { display: block; margin: 0 0 8px; }
.pk-zeile .klapp { margin-bottom: 10px; }

/* Zwei Formulare in einer Reihe. `.knopf-voll` ist sonst display:block mit
   width:100% und würde „Endgültig" in die nächste Zeile drücken – dasselbe
   Problem wie in .dl-knoepfe. */
.pk-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-knoepfe > form { flex: 1 1 0; min-width: 130px; }
.pk-knoepfe > form > button { width: 100%; text-align: center; }
.pk-knoepfe > form > .knopf-voll { display: block; }

/* Die Felder eines gelöschten Satzes: Bezeichnung links, Wert rechts. Am Handy
   untereinander, sonst wird aus jedem längeren Text eine Schlucht. */
.pk-felder { margin: 6px 0 10px; font-size: 13px; }
.pk-felder dt { color: var(--ink60); font-size: 12px; }
.pk-felder dd { margin: 0 0 7px; overflow-wrap: anywhere; }

@media (min-width: 620px) {
    .pk-felder {
        display: grid; grid-template-columns: 170px 1fr;
        gap: 2px 14px; align-items: baseline;
    }
    .pk-felder dt { grid-column: 1; }
    .pk-felder dd { grid-column: 2; margin-bottom: 3px; }
}

/* ---------- Barrierefreiheit: Bewegung reduzieren ----------
   Steht bewusst ganz am Ende, damit sie alle Animationen erfasst,
   auch die in späteren Abschnitten ergänzten.                    */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    .start-punkt, .start-collage i, .seite > h1, .kopf,
    .karten, .kasten, .fin-menue, .kachel-feld {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ---------- Dauerlauf: Balken statt Textwand ----------
   Ernst am 26.08.2026: „den Status würde ich gerne als Balken sehen nicht als
   lange Texte …. die texte brauche ich nicht und die buttons deutlicher zu
   erkennen und besser aufgeteilt."

   Also: eine Karte je Lauf, darin genau drei Dinge übereinander – Prozentzahl
   mit einer kurzen Zeile, der Balken, die Knöpfe. Die Erklärungen stecken in
   einem <details> darunter und sind zu, bis jemand sie sehen will.

   Warum <progress> und nicht ein div mit Innenbalken wie .lauf-balken? Weil es
   dieselbe Sache ist und der Vorleser am iPhone den Wert dann ansagt. Die
   Farbe kommt aus --bereich, damit die Karte im jeweiligen Bereich zu Hause
   aussieht (Verwaltung anders als Konto). */
.dl {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--rund-s);
    background: var(--paper);
}
/* Läuft etwas, hebt sich die Karte ab – die erste Frage ist immer „geht es
   überhaupt voran". */
.dl.dl-aktiv { border-color: var(--bereich, var(--gruen)); }
/* Eine Karte ohne Knöpfe – nur Anzeige (Originale in Dropbox, Gelöschte
   Originale). Ernst am 26.08.2026: „bitte auch einen statusbalken bei
   Originale in dropbox und von Photosync … dann ist alles einheitlich".
   Gleiche Bauform wie die bedienbaren Karten, nur zurückhaltender: ohne
   Rahmen und ohne Papierfläche steht sie nicht wie ein Knopf da, der nichts
   tut. Der letzte Abstand fällt weg, weil darunter das Aufklapp-Detail folgt. */
.dl.dl-still {
    border: 0;
    background: none;
    padding: 0;
    margin-bottom: 8px;
}

.dl-kopf {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 8px;
}
.dl-anteil {
    flex: 0 0 auto;
    font-size: 22px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--bereich, var(--ink));
}
.dl-text {
    flex: 1 1 0; min-width: 0;
    font-size: 13px; color: var(--ink60);
}

.dl-balken {
    display: block; width: 100%; height: 10px; margin: 0 0 12px;
    border: none; border-radius: 5px;
    background: var(--line); appearance: none; -webkit-appearance: none;
}
.dl-balken::-webkit-progress-bar { background: var(--line); border-radius: 5px; }
.dl-balken::-webkit-progress-value {
    background: var(--bereich, var(--gruen)); border-radius: 5px;
    transition: width .4s ease;
}
.dl-balken::-moz-progress-bar { background: var(--bereich, var(--gruen)); border-radius: 5px; }

/* Die Knopfreihe. Das Auswahlfeld steht im selben Formular wie der Startknopf
   (sonst startet der Knopf einen anderen Ordner als den, der zu sehen ist) –
   am Handy untereinander, am Rechner der Knopf neben dem Feld. */
.dl-knoepfe > .dl-form {
    display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
}
.dl-wahl { flex: 1 1 100%; }
.dl-wahl select, .dl-wahl input[type="text"] { width: 100%; max-width: 100%; }
.dl-knoepfe > .dl-form > button { flex: 1 1 0; min-width: 140px; text-align: center; }
/* .knopf-voll ist sonst display:block mit width:100% – im Flex-Layout würde er
   die ganze Zeile nehmen und „Nur merken" in die nächste drücken. */
.dl-knoepfe > .dl-form > .knopf-voll { display: inline-block; width: auto; }

/* Die Automatikregel ist eine EINSTELLUNG, kein Startknopf. Deshalb eine
   eigene, abgesetzte Zeile mit dünnem Trennstrich darüber: Vorher standen
   beide Formulare direkt untereinander und man drückte „Übernehmen", wenn man
   „auslagern" meinte. */
.dl-regel {
    display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
    margin: 0 0 14px; padding-top: 12px;
    border-top: 1px solid var(--line);
}
.dl-regel > label { flex: 1 1 240px; }
.dl-regel > label select { width: 100%; }
.dl-regel > button { flex: 0 0 auto; }

/* ================= Version 7: Fotos-Startseite ============================
   Ernst am 26.08.2026 mit einer Skizze: „Es handelt sich um die Startseite bei
   Fotos. Ich hätte sie auch gerne anders und übersichtlicher angeordnet. Mit
   keinem zusätzlichen Text und Erklärungen sollte selbsterklärend sein."

   Die Skizze zeigt: Titel, EINE umbrechende Knopfreihe, darunter drei offene
   Kästen NEBENEINANDER („Für alle", „Für einzelne", „Nur ich") mit ihren
   Kacheln darin. Alles Erklärende ist aus fotos.php verschwunden; hier steht
   nur, was die Anordnung tragen muss.                                     */

/* ── Die Knopfreihe der Übersicht ──────────────────────────────────────────
   `.foto-kopf` gibt es schon (die Steuerzeile einer offenen Sammlung). Die
   Übersicht nutzt dieselbe Reihe, braucht aber eine andere Ausrichtung:
   `align-items: center` würde die Dateiknöpfe an dem hohen, umgebrochenen
   Hochladeformular ausrichten und sie damit in die Mitte einer leeren Fläche
   setzen. `flex-start` heftet alles an die Oberkante. */
.foto-kopf-uebersicht { align-items: flex-start; }

/* Das Hochladeformular als Reihenglied, das SELBST eine Reihe ist.
   Warum so und nicht anders: Ein `<form>` in einem `<form>` ist ungültig,
   `display: contents` nimmt dem Formular die Möglichkeit, seine Angabenfelder
   in eine eigene Zeile umzubrechen, und das `form=`-Attribut versagt in
   älteren Safari-Fassungen still – der Fehler zeigte sich erst, wenn ein
   Hochladen ohne Datei ankommt. */
.foto-hoch {
    display: flex; flex-wrap: wrap; gap: 8px;
    flex: 1 1 auto; min-width: 0; margin: 0;
}
/* `.knopf-voll` ist sonst display:block mit width:100% – als Flex-Glied nähme
   es die ganze Zeile und schöbe „Neues Foto aufnehmen" in die nächste. */
.foto-hoch > .dok-kamera {
    display: inline-block; width: auto;
    flex: 0 1 auto; min-width: 0;
    padding-left: 12px; padding-right: 12px;
}
/* Die Angaben (Sammlung, Notiz, Hinzufügen) gehören unter die Reihe, nicht in
   sie. Sie sind ohnehin verborgen, bis Dateien gewählt sind – siehe das
   Skript am Fuss von fotos.php. */
.foto-hoch > #foto-details { flex: 0 0 100%; }

/* Die Zahlen (Bilder · Grösse · Sammlungen) sind Auskunft, keine Erklärung.
   Sie füllen den Rest der Reihe und stehen rechts – so kosten sie keine
   eigene Zeile. Am Handy, wo die Reihe umbricht, landen sie unter den
   Knöpfen und stehen dort linksbündig, damit sie nicht im Leeren hängen. */
.foto-zahlen { flex: 1 1 auto; min-width: 0; text-align: right; align-self: center; }
@media (max-width: 560px) { .foto-zahlen { flex: 1 1 100%; text-align: left; } }

/* ── Die drei Gruppen nebeneinander ────────────────────────────────────────
   `auto-fit` entscheidet nach Breite: am Rechner drei Spalten, am Handy eine
   – untereinander, wie bisher. 280 px ist die Grenze, unter der zwei Kacheln
   (je 148 px) nicht mehr nebeneinander passen.

   Die Hülle hat noch eine zweite Wirkung, die hier festgehalten sein soll:
   klappSkript() in lib.php greift nur `main.seite > section.block` – eine
   Ebene tiefer nicht mehr. Die drei Gruppen bleiben deshalb offen, so wie es
   die Skizze zeigt. */
.album-gruppen {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}
/* Der Abstand kommt jetzt vom Gitter; der eigene Abstand der Kästen würde die
   Spalten unterschiedlich lang enden lassen. Der dünne Rahmen macht sichtbar,
   wo eine Gruppe endet – ohne ihn stehen am Rechner drei Spalten weisse
   Kacheln nebeneinander und man sieht nicht, welche Überschrift zu welcher
   Spalte gehört. Keine Papierfläche darunter: Die Kacheln SIND weiss, ein
   weisser Kasten schluckte sie. */
.album-gruppen > .block {
    margin-bottom: 0;
    border: 1px solid var(--line); border-radius: var(--rund);
    padding: 12px;
}
/* Erste Kachelreihe direkt unter der Überschrift: Das Raster bringt sonst
   12 px Abstand mit, die im Kasten doppelt wirken. */
.album-gruppen .album-raster { margin-top: 8px; }

/* ================= Version 9: Dein Sekretär =================
   Hinweise, die die Doku-Wache aus Ernsts Post gelesen hat, samt der
   Entscheidung darüber. Ernst am 03.09.2026: „mit einer entscheidungsauswahl
   für mich was ich mit diesem tipp machen möchte!"

   Die Entscheidung ist ein Feld aus grossen Knöpfen und keine Auswahlliste.
   Eine Auswahlliste braucht am iPhone drei Berührungen (öffnen, drehen,
   bestätigen) und verrät vorher nicht, was drinsteht; sechs Knöpfe brauchen
   eine und stehen offen da. Sie umbrechen von selbst und stehen am Handy
   untereinander, weil ein Knopf, der halb aus dem Bild ragt, nicht getroffen
   wird.                                                                     */

.sek-karte {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink30);
    border-radius: var(--rund);
    box-shadow: var(--schatten-s);
    padding: 13px 15px;
    margin-bottom: 12px;
}
/* Der linke Streifen ist die ganze Dringlichkeitsanzeige. Absichtlich nicht die
   Fläche: Ein Dutzend farbig hinterlegter Karten übertönt sich gegenseitig, und
   dann sticht keine mehr heraus. */
.sek-dringend { border-left-color: var(--gelb); }
.sek-spaet    { border-left-color: var(--rot); background: #FDF6F5; }

.sek-kopf {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.sek-art {
    font-size: 12px; font-weight: 600; color: var(--ink60);
    letter-spacing: .02em;
}
.sek-frist {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px;
    color: var(--ink60);
}
.sek-frist.ist-spaet { color: var(--rot); font-weight: 600; }
.sek-marke {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em;
    background: #FBF0D8; color: var(--gelb);
    padding: 2px 7px; border-radius: 999px;
}
.sek-betrag {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
    color: var(--ink);
}

.sek-titel { margin: 0 0 5px; font-size: 16px; line-height: 1.3; }
.sek-text  { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }

/* ── Woher der Hinweis kommt ───────────────────────────────────────────────
   Zugeklappt, weil es im Normalfall nicht gebraucht wird – aber vorhanden,
   weil ein Hinweis ohne Fundstelle eine Behauptung ist. */
.sek-beleg { margin: 0 0 10px; }
.sek-beleg > summary {
    font-size: 12px; color: var(--ink60); cursor: pointer;
    list-style: none;
}
.sek-beleg > summary::-webkit-details-marker { display: none; }
.sek-beleg > summary::before { content: '▸ '; }
.sek-beleg[open] > summary::before { content: '▾ '; }
.sek-zitat {
    margin: 8px 0; padding: 8px 12px;
    border-left: 2px solid var(--line);
    font-size: 13px; line-height: 1.5; color: var(--ink60);
    font-style: italic;
}
/* Der Ablagepfad in Festbreite: Er wird gelesen wie eine Adresse, nicht wie
   ein Satz, und Leerzeichen darin müssen zählbar bleiben. */
.sek-pfad {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--ink30); word-break: break-all;
}

.sek-stand {
    margin: 8px 0 0; padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink60);
}
.sek-zurueck { margin-top: 8px; }

/* ── Die Entscheidungsauswahl ─────────────────────────────────────────────── */
.sek-wahl {
    margin-top: 10px; padding-top: 11px;
    border-top: 1px solid var(--line);
}
.sek-wahl-felder {
    display: grid; gap: 10px;
    margin-bottom: 11px;
}
@media (min-width: 700px) {
    .sek-wahl-felder { grid-template-columns: 170px 1fr; align-items: end; }
}
.sek-wahl-felder label { margin-bottom: 0; }

.sek-knoepfe {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 6px;
}
.sek-knopf {
    flex: 1 1 auto; min-width: 132px;
    /* 44 Punkte ist Apples kleinste zuverlässig treffbare Fläche. Darunter
       tippt man am Handy daneben – und daneben heisst hier: falsche
       Entscheidung über einen Brief. */
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line); border-radius: var(--rund-s);
    background: var(--paper); color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.sek-knopf:hover { border-color: var(--ink30); background: #F7F9FB; }
.sek-knopf:active { background: #EDF1F5; }

/* Die beiden Knöpfe, die etwas ANLEGEN, sind hervorgehoben – sie sind der
   eigentliche Zweck der Liste. „Nicht wichtig" bleibt bewusst blass: Es ist
   die einzige Entscheidung, die sich schlecht rückgängig machen lässt, und
   soll nicht der Knopf sein, auf den man aus Versehen tippt. */
.sek-knopf-termin  { border-color: var(--blau);  color: var(--blau);  font-weight: 600; }
.sek-knopf-aufgabe { border-color: var(--gruen); color: var(--gruen); font-weight: 600; }
.sek-knopf-egal    { color: var(--ink60); }

.sek-hilfe { margin-top: 10px; }
.sek-hilfe > summary { font-size: 12px; color: var(--ink60); cursor: pointer; }
.sek-hilfe dl { margin: 8px 0 0; font-size: 13px; }
.sek-hilfe dt { font-weight: 600; margin-top: 7px; }
.sek-hilfe dd { margin: 2px 0 0; color: var(--ink60); }

/* Die Zeile auf der Startseite. Sie nutzt .start-frist mit; eigen ist nur der
   Streifen links, damit man Frist und Hinweis nicht verwechselt. */
.start-sek { border-left-color: rgba(255,255,255,.35); }