/*
 * NoFat Web - Gestaltungssystem, Teil 1: Grundlagen.
 *
 * Hier stehen die Werte (Farben, Schrift, Raender, Schatten, Bewegung, Bildschirmraender) und das
 * Geruest der Seite (Kopfzeile, Inhalt, untere Navigationsleiste, Fusszeile). Bausteine wie Karte,
 * Knopf oder Feld stehen in bausteine.css, Verhalten in assets/js/bausteine.js.
 *
 * Die Werte stammen aus der Android-App (ui/theme/), damit beide Fassungen gleich aussehen.
 * Geaendert wird nur hier - wer eine Farbe braucht, nimmt die Variable, nie den Farbwert.
 *
 * Keine fremden Schriften, keine fremden Quellen: Alles kommt von diesem Server.
 */

/* ==========================================================================================
   1. Werte - hell
   ========================================================================================== */
:root {
    /* Haupt (gruen) */
    --haupt: #006d45;
    --auf-haupt: #ffffff;
    --haupt-behaelter: #92f7bc;
    --auf-haupt-behaelter: #00210f;
    /* Zweit (honig) */
    --zweit: #7a5900;
    --auf-zweit: #ffffff;
    --zweit-behaelter: #ffdf9b;
    --auf-zweit-behaelter: #261a00;
    /* Akzent (beere) */
    --akzent: #9c4058;
    --auf-akzent: #ffffff;
    --akzent-behaelter: #ffd9de;
    --auf-akzent-behaelter: #3f0018;
    /* Fehler */
    --fehler: #ba1a1a;
    --auf-fehler: #ffffff;
    --fehler-behaelter: #ffdad6;
    --auf-fehler-behaelter: #410002;
    /* Grund und Flaechen */
    --grund: #fcf9f4;
    --flaeche: #fcf9f4;
    --flaeche-1: #f6f3ec;
    --flaeche-2: #f0ede5;
    --flaeche-3: #eae7df;
    --flaeche-4: #e4e1d9;
    /* Kontur und Text */
    --kontur: #79766c;
    --kontur-fein: #c9c6bc;
    --text: #1c1b17;
    --gedaempft: #48463f;
    --auf-haupt-flaeche: #ffffff;
    /* Schatten: weich und flach - wie die Karten der App */
    --schatten-1: 0 1px 2px rgba(28, 27, 23, .06), 0 1px 3px 1px rgba(28, 27, 23, .05);
    --schatten-2: 0 1px 2px rgba(28, 27, 23, .07), 0 4px 12px 2px rgba(28, 27, 23, .06);
    --schatten-3: 0 -2px 8px rgba(28, 27, 23, .06), 0 -12px 32px rgba(28, 27, 23, .10);

    /* Formen: Chips und Kaestchen eckiger, Karten und Felder deutlich runder */
    --radius-chip: 10px;
    --radius-klein: 10px;
    --radius-feld: 16px;
    --radius: 16px;
    --radius-gross: 24px;
    --radius-karte: 24px;
    --radius-blatt: 28px;
    --radius-riesig: 32px;
    --radius-rund: 999px;

    /* Abstaende */
    --abstand: 16px;
    --abstand-klein: 8px;
    --abstand-gross: 24px;
    --breite-inhalt: 46rem;
    --hoehe-kopf: 60px;
    --hoehe-leiste: 68px;

    /* Bewegung: hinein 220 ms, hinaus 140 ms - dieselbe Kurve wie in der App */
    --kurve: cubic-bezier(.05, .7, .1, 1);
    --bewegung-hinein: 220ms var(--kurve);
    --bewegung-hinaus: 140ms var(--kurve);

    /* Schrift: Material-3-Stufen, Systemschriften */
    --schrift-1: 2.25rem;   /* 36 px - Seitentitel */
    --schrift-2: 1.75rem;   /* 28 px - Abschnitt */
    --schrift-3: 1.5rem;    /* 24 px */
    --schrift-4: 1.375rem;  /* 22 px */
    --schrift-text: 1rem;   /* 16 px - Fliesstext */
    --schrift-klein: .875rem; /* 14 px */
    --schrift-fein: .75rem;   /* 12 px */
    --schrift-familie: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --zeilenhoehe: 1.55;

    /* Bildschirmraender von Geraeten mit Aussparung */
    --rand-oben: env(safe-area-inset-top, 0px);
    --rand-unten: env(safe-area-inset-bottom, 0px);
    --rand-links: env(safe-area-inset-left, 0px);
    --rand-rechts: env(safe-area-inset-right, 0px);

    color-scheme: light;
}

/* ==========================================================================================
   2. Werte - dunkel (ausdruecklich gewaehlt)
   ========================================================================================== */
:root[data-theme="dunkel"] {
    --haupt: #75daa2;
    --auf-haupt: #003921;
    --haupt-behaelter: #005232;
    --auf-haupt-behaelter: #92f7bc;
    --zweit: #efc04e;
    --auf-zweit: #3f2e00;
    --zweit-behaelter: #5c4300;
    --auf-zweit-behaelter: #ffdf9b;
    --akzent: #ffb1c1;
    --auf-akzent: #5f1129;
    --akzent-behaelter: #7d2943;
    --auf-akzent-behaelter: #ffd9de;
    --fehler: #ffb4ab;
    --auf-fehler: #690005;
    --fehler-behaelter: #93000a;
    --auf-fehler-behaelter: #ffdad6;
    --grund: #131310;
    --flaeche: #131310;
    --flaeche-1: #1b1b18;
    --flaeche-2: #1f1f1c;
    --flaeche-3: #2a2a26;
    --flaeche-4: #353531;
    --kontur: #938f85;
    --kontur-fein: #48463f;
    --text: #e6e2da;
    --gedaempft: #c9c6bc;
    --auf-haupt-flaeche: #131310;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
    --schatten-2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px 2px rgba(0, 0, 0, .3);
    --schatten-3: 0 -2px 8px rgba(0, 0, 0, .4), 0 -12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
}

/* ==========================================================================================
   3. Werte - wie das Geraet (Systemeinstellung)
   ========================================================================================== */
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --haupt: #75daa2;
        --auf-haupt: #003921;
        --haupt-behaelter: #005232;
        --auf-haupt-behaelter: #92f7bc;
        --zweit: #efc04e;
        --auf-zweit: #3f2e00;
        --zweit-behaelter: #5c4300;
        --auf-zweit-behaelter: #ffdf9b;
        --akzent: #ffb1c1;
        --auf-akzent: #5f1129;
        --akzent-behaelter: #7d2943;
        --auf-akzent-behaelter: #ffd9de;
        --fehler: #ffb4ab;
        --auf-fehler: #690005;
        --fehler-behaelter: #93000a;
        --auf-fehler-behaelter: #ffdad6;
        --grund: #131310;
        --flaeche: #131310;
        --flaeche-1: #1b1b18;
        --flaeche-2: #1f1f1c;
        --flaeche-3: #2a2a26;
        --flaeche-4: #353531;
        --kontur: #938f85;
        --kontur-fein: #48463f;
        --text: #e6e2da;
        --gedaempft: #c9c6bc;
        --auf-haupt-flaeche: #131310;
        --schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
        --schatten-2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px 2px rgba(0, 0, 0, .3);
        --schatten-3: 0 -2px 8px rgba(0, 0, 0, .4), 0 -12px 32px rgba(0, 0, 0, .45);
        color-scheme: dark;
    }
}

/* ==========================================================================================
   4. Alte Wertnamen weiterreichen
   Die Bereiche und aeltere Bausteine benutzen noch die frueheren Namen. Sie zeigen auf dieselben
   Werte, damit nichts ohne Farbe dasteht. Neue Arbeit nimmt die Namen oben.
   ========================================================================================== */
:root {
    --rand: var(--kontur-fein);
    --haupt-schwach: var(--haupt-behaelter);
    --haupt-text: var(--auf-haupt);
    --gefahr: var(--fehler);
    --gefahr-schwach: var(--fehler-behaelter);
    --warn-flaeche: var(--zweit-behaelter);
    --warn-text: var(--auf-zweit-behaelter);
    --info-flaeche: var(--flaeche-3);
    --info-text: var(--text);
    --radius-klein-alt: var(--radius-klein);
    --flaeche-2-alt: var(--flaeche-2);
}

/* ==========================================================================================
   5. Grundlage
   ========================================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.seite {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift-familie);
    font-size: var(--schrift-text);
    line-height: var(--zeilenhoehe);
    padding-left: var(--rand-links);
    padding-right: var(--rand-rechts);
    overflow-wrap: break-word;
}

/* Liegt die untere Leiste an, bekommt der Inhalt Luft, damit nichts darunter verschwindet. */
body.mit-leiste { padding-bottom: calc(var(--hoehe-leiste) + var(--rand-unten)); }

h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--schrift-1); letter-spacing: -.01em; }
h2 { font-size: var(--schrift-2); margin-top: 1.4rem; }
h3 { font-size: var(--schrift-3); margin-top: 1.2rem; }
h4 { font-size: var(--schrift-4); margin-top: 1rem; }
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: .5rem 0; }
a { color: var(--haupt); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
img { max-width: 100%; height: auto; }

.hinweis { color: var(--gedaempft); font-size: var(--schrift-klein); }
.klein { font-size: var(--schrift-klein); color: var(--gedaempft); }
.fein { font-size: var(--schrift-fein); color: var(--gedaempft); }
.lead { font-size: 1.0625rem; }
.warnung { color: var(--fehler); font-weight: 500; }
.jetzt { color: var(--gedaempft); }

/* Fokus: immer sichtbar, nie nur als Farbwechsel. */
:focus-visible {
    outline: 3px solid var(--haupt);
    outline-offset: 2px;
    border-radius: var(--radius-chip);
}

/* Sprungmarken - erst beim Anspringen sichtbar. */
.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--haupt);
    color: var(--auf-haupt);
    padding: 12px 18px;
    border-radius: 0 0 var(--radius-feld) 0;
    text-decoration: none;
    font-weight: 600;
}
.sprungmarke:focus { left: 0; }

/* Nur fuer Vorleseprogramme, aber bedienbar. */
.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ==========================================================================================
   6. Kopfzeile
   ========================================================================================== */
.kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--flaeche-1);
    border-bottom: 1px solid var(--kontur-fein);
    padding-top: var(--rand-oben);
    view-transition-name: kopf;
}

.kopf-innen {
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    min-height: var(--hoehe-kopf);
    padding: 8px var(--abstand);
    display: flex;
    align-items: center;
    gap: var(--abstand-klein);
}

.marke {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius-feld);
    padding: 4px 6px;
    margin-left: -6px;
}
.marke:hover { background: var(--flaeche-3); }
.marke-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-feld);
    background: var(--haupt-behaelter);
    color: var(--auf-haupt-behaelter);
    flex: 0 0 auto;
}
.marke-zeichen .zeichen { width: 22px; height: 22px; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 1.0625rem; }
.marke-text small { font-weight: 400; font-size: var(--schrift-fein); color: var(--gedaempft); }
.kopf-rechts { display: flex; align-items: center; gap: var(--abstand-klein); margin-left: auto; }
.wer { color: var(--gedaempft); font-size: var(--schrift-klein); }

/* ==========================================================================================
   7. Inhalt und Fusszeile
   ========================================================================================== */
.inhalt {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: var(--abstand) var(--abstand) var(--abstand-gross);
}

.fuss {
    border-top: 1px solid var(--kontur-fein);
    background: var(--flaeche-1);
    padding: 14px var(--abstand) calc(14px + var(--rand-unten));
    font-size: var(--schrift-klein);
    color: var(--gedaempft);
}
.fuss p { max-width: var(--breite-inhalt); margin: 0 auto; display: flex; gap: 14px; flex-wrap: wrap; }
.fuss .stand { margin-left: auto; }
body.mit-leiste .fuss { padding-bottom: 14px; }

/* ==========================================================================================
   8. Untere Navigationsleiste
   ========================================================================================== */
.tab-leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: var(--flaeche-1);
    border-top: 1px solid var(--kontur-fein);
    padding-bottom: var(--rand-unten);
    padding-left: var(--rand-links);
    padding-right: var(--rand-rechts);
    view-transition-name: leiste;
}
.tab-leiste ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--breite-inhalt);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
}
.tab-leiste li { display: flex; }

.tab {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--hoehe-leiste);
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--gedaempft);
    font: inherit;
    font-size: var(--schrift-fein);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--bewegung-hinaus), transform var(--bewegung-hinaus);
}
.tab:active { transform: scale(.95); }
.tab-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: var(--radius-rund);
    transition: background var(--bewegung-hinaus), color var(--bewegung-hinaus);
}
.tab-zeichen .zeichen { width: 24px; height: 24px; }
.tab-text { font-weight: 500; }

.tab[aria-current] { color: var(--haupt); }
.tab[aria-current] .tab-zeichen { background: var(--haupt-behaelter); color: var(--auf-haupt-behaelter); }
.tab[aria-current] .tab-text { font-weight: 700; }

/* ==========================================================================================
   9. Breite Bildschirme: Die Leiste wandert an die Seite
   ========================================================================================== */
@media (min-width: 60rem) {
    body.mit-leiste { padding-bottom: 0; padding-left: calc(6.5rem + var(--rand-links)); }

    .tab-leiste {
        top: 0; bottom: 0; right: auto;
        width: 6.5rem;
        border-top: 0;
        border-right: 1px solid var(--kontur-fein);
        padding: var(--rand-oben) 0 var(--rand-unten);
        display: flex;
        align-items: flex-start;
    }
    .tab-leiste ul {
        grid-template-columns: 1fr;
        max-width: none;
        width: 100%;
        align-content: start;
        gap: 4px;
        padding: 0 6px;
    }
    .tab { min-height: 64px; border-radius: var(--radius-feld); }
    .tab:hover { background: var(--flaeche-3); }

    /* Die Marke steht dann ueber der Leiste - die Kopfzeile rueckt zur Seite. */
    .kopf-innen, .inhalt, .fuss p { margin-left: 0; }
    .kopf-innen { max-width: calc(var(--breite-inhalt) + 2 * var(--abstand)); }
    .inhalt { max-width: calc(var(--breite-inhalt) + 2 * var(--abstand)); }
}

/* ==========================================================================================
   10. Bewegung und Ansichtswechsel
   ========================================================================================== */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
    .tab:active, .knopf:active, .chip:active { transform: none; }
}

/* ==========================================================================================
   11. Fehlerseite (ohne Geruest)
   ========================================================================================== */
.fehlerseite { display: flex; align-items: center; justify-content: center; padding: var(--abstand); }
.fehlerseite .karte { max-width: 30rem; text-align: center; }

/* ==========================================================================================
   12. Druck
   ========================================================================================== */
@media print {
    .kopf, .tab-leiste, .fuss, .knopf, .knopfreihe, .aktionsleiste { display: none; }
    body.seite, body.mit-leiste { background: #fff; padding: 0; }
    .karte { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}