/* Pultiva — Design-System „Pult" */

:root {
    --grund:        #F5F0E6;
    --karte:        #FCF9F3;
    --linie:        #E2D9C7;
    --linie-stark:  #DED5C4;
    --text:         #211D18;
    --text-leise:   #6B5B44;
    --akzent:       #B4452F;
    --akzent-text:  #FBF7EF;
    --positiv:      #3F7A5A;
    --warnung:      #C8892C;
    --gedaempft:    #EFE8DA;

    --radius:       14px;
    --radius-klein: 10px;
    --schrift-serif: "Iowan Old Style", Charter, Georgia, serif;
    --schrift:       -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:       #17140F;
        --karte:       #211D18;
        --linie:       #332C23;
        --linie-stark: #3D352A;
        --text:        #EDE6D8;
        --text-leise:  #A2937C;
        --akzent:      #D4674D;
        --akzent-text: #1A0F0B;
        --positiv:     #5B9E7A;
        --warnung:     #DEA45C;
        --gedaempft:   #1E1A15;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--schrift-serif); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4em; }

/* Kopfzeile und Navigation */
.kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 20px;
    border-bottom: 1px solid var(--linie-stark);
}
.kopf__marke { display: flex; align-items: center; gap: 9px; font-family: var(--schrift-serif); font-size: 17px; }
.kopf__zeichen {
    width: 24px; height: 24px; border-radius: 7px;
    background: var(--akzent); color: var(--akzent-text);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--schrift-serif); font-weight: 800; font-size: 14px;
}
.navi { display: flex; gap: 20px; font-size: 14px; }
.navi a { color: var(--text-leise); text-decoration: none; padding-bottom: 2px; }
.navi a[aria-current="page"] { color: var(--text); font-weight: 650; border-bottom: 2px solid var(--akzent); }

/* Inhalt */
.inhalt { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; }

.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 22px 24px;
}

/* Bedienelemente — mindestens 44px Berührungsfläche */
.knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 22px;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--gedaempft); color: var(--text);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf--haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.feld { display: block; margin-bottom: 16px; }
.feld__label { display: block; font-size: 13px; font-weight: 650; color: var(--text-leise); margin-bottom: 5px; }
.feld input {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--karte); color: var(--text); font: inherit;
}
.feld input:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }

.feld select {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--karte); color: var(--text); font: inherit;
}
.feld select:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }

.feld textarea {
    width: 100%; min-height: 132px; padding: 10px 12px;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--karte); color: var(--text); font: inherit; resize: vertical;
}
.feld textarea:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }

.hinweis {
    padding: 11px 14px; border-radius: var(--radius-klein);
    background: var(--gedaempft); color: var(--text-leise); font-size: 14px;
}
.hinweis--fehler { background: var(--akzent); color: var(--akzent-text); }

.anmeldung { max-width: 420px; margin: 8vh auto; }

/* Layout-Bausteine für mehrere Seiten (Aufgabe 7 f.). Die Content-Security-Policy
   verbietet Inline-Skripte ebenso wie Inline-Stile — ein `style="…"`-Attribut wird
   von der CSP wortlos verworfen, ohne dass etwas sichtbar kaputtgeht. Abstände und
   wiederkehrende Bausteine deshalb hier als Klassen statt als Inline-Stil. */
.abstand-oben { margin-top: 20px; }

/* .hinweis und .knopf teilen sich var(--gedaempft) — Knöpfe in einem
   Hinweiskasten verschwinden farblich in ihm. Für nebeneinanderstehende
   Knöpfe außerhalb eines Hinweises deshalb ein eigener Baustein. */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.trenner {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0; color: var(--text-leise); font-size: 13px; text-align: center;
}
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.schluesselliste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.schluesselliste li {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.schluessel__meta { display: block; color: var(--text-leise); font-size: 13px; margin-top: 2px; }

/* Die „Jetzt"-Karte ist die einzige Seite, die man aus zwei Metern Entfernung
   lesen können muss — mit dem iPad auf dem Pult, im Vorbeigehen. */
.jetzt { text-align: center; padding: 34px 24px; }
.jetzt h1 { font-size: 34px; margin: 6px 0; }
.jetzt__zeile { color: var(--text-leise); font-size: 15px; margin: 0; }
.jetzt .knopfreihe { justify-content: center; }
.jetzt form { margin-top: 20px; }

/* Klassenbuch-Chronik: zum Lesen und zum Abtippen, nicht zum Blättern. */
.chronik { list-style: none; margin: 16px 0 0; padding: 0; }
.chronik li { padding: 14px 0; border-top: 1px solid var(--linie); }
.chronik__kopf { margin: 0 0 4px; color: var(--text-leise); font-size: 14px; }
.chronik__thema { margin: 0 0 6px; }

@media print {
    .chronik li { break-inside: avoid; }
}