/*
 * Komfort-Schicht: Lesbarkeit und Bedienbarkeit für alle Altersgruppen.
 *
 * Wird als letztes Stylesheet geladen und überschreibt dadurch die im
 * Vite-Bündel kompilierten Tokens — ohne Neubau, wie forms.css/apple.css.
 * Weil die Tailwind-Hilfsklassen (text-sm, text-base …) ihre Größe aus
 * var(--text-*) lesen, wirkt die Anhebung hier in der GESAMTEN Anwendung.
 *
 * Grundmaße (Faktor 1):
 *   Grundschrift 17 px, „klein" 15 px — kleiner wird es nirgends.
 *   Die Stufe „sehr klein" (12 px) existiert nicht mehr; --text-xs wird
 *   auf 15 px gehoben, damit auch noch nicht umgestellte Vorlagen lesbar
 *   sind.
 *
 * Persönliche Stufen (Profil → Darstellung) setzen data-schrift am
 * <html>-Element; Abstände und Bedienhöhen wachsen gedämpft mit, damit
 * Layouts nicht zerfallen.
 */

:root {
    /* Von data-schrift gesetzt; 1 = Normalgröße. */
    --schrift-faktor: 1;
    /* Abstände wachsen nur halb so stark wie die Schrift. */
    --abstand-faktor: calc(1 + (var(--schrift-faktor) - 1) * 0.5);
    /* Mindesthöhe für Fingerziele — nur auf Touch-Geräten (s. u.). */
    --ziel-min: 0px;

    --text-xs: calc(0.9375rem * var(--schrift-faktor));   /* 15 px */
    --text-sm: calc(0.9375rem * var(--schrift-faktor));   /* 15 px */
    --text-base: calc(1.0625rem * var(--schrift-faktor)); /* 17 px */
    --text-lg: calc(1.1875rem * var(--schrift-faktor));   /* 19 px */
    --text-xl: calc(1.375rem * var(--schrift-faktor));    /* 22 px */
    --text-2xl: calc(1.625rem * var(--schrift-faktor));   /* 26 px */
    --text-3xl: calc(2rem * var(--schrift-faktor));       /* 32 px */
    --text-4xl: calc(2.375rem * var(--schrift-faktor));   /* 38 px */
    --text-5xl: calc(3rem * var(--schrift-faktor));       /* 48 px */

    /* Zeilenhöhen als Verhältnis — großzügiger als die Tailwind-Vorgaben,
       weil enge Zeilen das Lesen für ältere Augen deutlich erschweren. */
    --text-xs--line-height: 1.5;
    --text-sm--line-height: 1.55;
    --text-base--line-height: 1.6;
    --text-lg--line-height: 1.5;
    --text-xl--line-height: 1.35;
    --text-2xl--line-height: 1.3;
    --text-3xl--line-height: 1.25;
    --text-4xl--line-height: 1.2;
    --text-5xl--line-height: 1.15;

    --space-1: calc(0.25rem * var(--abstand-faktor));
    --space-2: calc(0.5rem * var(--abstand-faktor));
    --space-3: calc(0.75rem * var(--abstand-faktor));
    --space-4: calc(1rem * var(--abstand-faktor));
    --space-5: calc(1.25rem * var(--abstand-faktor));
    --space-6: calc(1.5rem * var(--abstand-faktor));
    --space-8: calc(2rem * var(--abstand-faktor));
    --space-10: calc(2.5rem * var(--abstand-faktor));
    --space-12: calc(3rem * var(--abstand-faktor));
}

html[data-schrift='gross'] { --schrift-faktor: 1.125; }
html[data-schrift='sehr-gross'] { --schrift-faktor: 1.28; }

/* ---- Fingerbedienung: große Ziele, sobald kein Mauszeiger im Spiel ist ----
   Mit Maus bleibt die Anwendung kompakt; auf iPad und Handy wächst jedes
   Bedienelement auf mindestens 44 px (Apple-Mindestmaß). */
@media (pointer: coarse) {
    :root { --ziel-min: 44px; }
}

/* ---- Schaltflächen ---- */
.ds-btn--sm {
    font-size: var(--text-sm);
    height: max(calc(34px * var(--schrift-faktor)), var(--ziel-min));
}
.ds-btn--md {
    font-size: var(--text-base);
    height: max(calc(42px * var(--schrift-faktor)), var(--ziel-min));
}
.ds-btn--lg {
    font-size: var(--text-base);
    height: max(calc(50px * var(--schrift-faktor)), var(--ziel-min));
}

/* ---- Eingabefelder ----
   Grundschrift statt „klein": unter 16 px zoomt iOS beim Hineintippen
   die ganze Seite heran — der häufigste Stolperstein auf dem iPad. */
.ds-input,
.ds-select,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='tel'],
input[type='url'],
select,
textarea {
    font-size: max(var(--text-base), 16px);
}
.ds-input,
.ds-select {
    height: max(calc(42px * var(--schrift-faktor)), var(--ziel-min));
}
.ds-field-label { font-size: var(--text-base); }
.ds-field-hint,
.ds-field-error { font-size: var(--text-sm); }

/* ---- Kontrollkästchen, Auswahlknöpfe, Schalter ---- */
.ds-checkbox,
.ds-radio {
    width: calc(22px * var(--schrift-faktor));
    height: calc(22px * var(--schrift-faktor));
}
.ds-checkbox::after { width: 6px; height: 11px; }
.ds-check-row {
    font-size: var(--text-base);
    min-height: var(--ziel-min);
    gap: var(--space-3);
}

@media (pointer: coarse) {
    .ds-checkbox,
    .ds-radio {
        width: calc(26px * var(--schrift-faktor));
        height: calc(26px * var(--schrift-faktor));
    }
    .ds-switch { width: 56px; height: 34px; }
    .ds-switch-thumb { width: 26px; height: 26px; top: 4px; left: 4px; }
    .ds-switch input:checked ~ .ds-switch-thumb { transform: translateX(22px); }
}

/* ---- Navigation ---- */
.app-nav-item {
    font-size: var(--text-base);
    min-height: max(44px, calc(44px * var(--schrift-faktor)));
}

/* ---- Etiketten und Reiter: nie kleiner als 15 px ---- */
.ds-badge,
.ds-tag,
.ds-tooltip { font-size: var(--text-sm); }
.ds-tab {
    font-size: var(--text-base);
    min-height: var(--ziel-min);
}

/* ---- Tabellen: luftigere Zeilen, damit Zeilen nicht verrutschen ---- */
table :is(th, td) { padding-block: var(--space-3); }
@media (pointer: coarse) {
    table :is(th, td) a,
    table :is(th, td) button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Lesbarkeit langer Inhalte ----
   Formatierte Texte (Beiträge, Protokolle, Anträge, Briefe) erben ihre Größe
   sonst vom umgebenden Kasten — oft „klein". Sie sind aber das, was wirklich
   gelesen wird, und bekommen deshalb Grundgröße, ruhigen Zeilenabstand und
   eine begrenzte Zeilenlänge: über etwa 80 Zeichen verliert das Auge die
   Zeile. (.prose ist der Marker der Anzeige, [data-richtext-area] der
   Editor — siehe richtext.css.) */
.prose,
[data-richtext-area] {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.prose > :is(p, ul, ol, blockquote, h1, h2, h3) { max-width: 72ch; }

/* ---- Höherer Kontrast (Profil → Darstellung) ----
   Verstärkt Ränder, Text und abgeschwächte Flächen; Farbwerte stammen
   weiterhin aus den Theme-Tokens, damit der Dunkelmodus mitgeht. */
html[data-kontrast='mehr'] {
    --color-text-muted: var(--color-text);
    --color-border: var(--color-border-strong);
    --color-placeholder: var(--color-text);
}
html[data-kontrast='mehr'] .ds-card,
html[data-kontrast='mehr'] .ds-input,
html[data-kontrast='mehr'] .ds-select,
html[data-kontrast='mehr'] .ds-btn--secondary {
    border-width: 2px;
}
html[data-kontrast='mehr'] :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---- Weniger Bewegung (Profil → Darstellung) ----
   Gleiche Wirkung wie die Geräteeinstellung „Bewegung reduzieren". */
html[data-bewegung='weniger'] *,
html[data-bewegung='weniger'] *::before,
html[data-bewegung='weniger'] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ---- Geräteeinstellung „Kontrast erhöhen" ebenfalls respektieren ---- */
@media (prefers-contrast: more) {
    :root {
        --color-text-muted: var(--color-text);
        --color-border: var(--color-border-strong);
    }
}

/* ---- Überschriften in der Hauptnavigation ----
   Trennen „Meine Arbeit" / „Fraktion" / „Unterlagen & Kontakte" /
   „Verwaltung" voneinander, damit man beim Suchen nur eine Entscheidung
   treffen muss. Neue Klasse, deshalb hier statt im Bündel. */
.app-nav-heading {
    margin: var(--space-4) 0 var(--space-1);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.app-nav-heading:first-of-type { margin-top: var(--space-2); }

/* Breitere Seitenleiste, damit die längeren Beschriftungen bei großer
   Schrift nicht umbrechen. */
.app-sidebar { width: calc(252px * var(--schrift-faktor)); }

/* ---- Tabellen, die nicht hineinpassen: untereinander statt seitwärts ----
   Seitliches Schieben ist auf iPad und Handy die unbeliebteste Bedienart
   überhaupt — man übersieht Spalten, weil nicht auffällt, dass rechts noch
   etwas steht. tabellen-stapeln.js misst deshalb, ob eine Tabelle vollständig
   sichtbar ist, und setzt sonst data-stapeln. Dann wird jede Zeile zu einem
   Kästchen, in dem jede Angabe ihre Spaltenüberschrift vor sich trägt.
   Dadurch bleiben schmale Tabellen überall Tabellen — gestapelt wird nur,
   wo es nötig ist. */
.ds-tabelle-huelle:has(table[data-stapeln]),
.ds-card > [style*='overflow-x']:has(table[data-stapeln]) {
    overflow-x: visible !important;
}

table[data-stapeln] {
    display: block;
    min-width: 0 !important;
    width: 100%;
}

/* Die Kopfzeile wird zur Beschriftung in den Zeilen — sichtbar wäre sie
   doppelt. Für Vorlesesoftware bleibt sie erhalten. */
table[data-stapeln] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

table[data-stapeln] tbody { display: block; }

table[data-stapeln] tbody tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
}

table[data-stapeln] tbody tr > * {
    display: block;
    width: auto;
    border: 0;
    padding: var(--space-1) 0;
    white-space: normal;
}

/* Angabe mit Beschriftung: links die Spalte, rechts der Wert. */
table[data-stapeln] tbody td[data-spalte] {
    display: grid;
    grid-template-columns: minmax(5rem, 38%) 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

table[data-stapeln] tbody td[data-spalte]::before {
    content: attr(data-spalte);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}

/* Spalten ohne Überschrift (Schaltflächen) stehen für sich. */
table[data-stapeln] tbody td:not([data-spalte]) {
    margin-top: var(--space-2);
}

table[data-stapeln] tfoot { display: block; }