/* ===========================================================================
   Auffuellstunden FOS Meran
   Gestaltung fuer 120 Personen zwischen 25 und 65, am Schreibtisch und am Handy.

   Grundsaetze:
   - Schrift ab 17px, dunkler Text auf hellem Grund, kein Text auf Farbflaechen
   - Formularfelder untereinander, Beschriftung darueber, nie nebeneinander
   - Klickflaechen mindestens 44px hoch
   - Ein sichtbarer Hauptknopf pro Seite, alles andere tritt zurueck
   - Bewusst nur ein helles Erscheinungsbild: vorhersehbar auf jedem Geraet
   =========================================================================== */

:root {
    --ground:      #f4f5f7;
    --surface:     #ffffff;
    --surface-alt: #eceef3;
    --line:        #d2d7e0;
    --line-strong: #a8b0c0;

    --ink:         #141c30;
    --ink-2:       #3b4459;
    --muted:       #5f6880;

    --blau:        #1d4ed8;
    --blau-dunkel: #1739a8;
    --blau-hell:   #e5ebfb;

    --gruen:       #1c6b45;
    --gruen-hell:  #dcefe4;
    --amber:       #7d5406;
    --amber-hell:  #faedd0;
    --rot:         #a12a1f;
    --rot-hell:    #fae3e0;

    --radius:      6px;
    --schatten:    0 1px 2px rgba(20, 28, 48, .07), 0 4px 14px rgba(20, 28, 48, .05);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* ------------------------------------------------------------------ Kopf */

.kopf {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.kopf-innen {
    max-width: 62rem; margin: 0 auto; padding: .6rem 1.25rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marke {
    font-weight: 700; font-size: 1.05rem; color: var(--ink);
    text-decoration: none; letter-spacing: -.01em; margin-right: auto;
}
.marke span { font-weight: 400; color: var(--muted); }

.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 .85rem; border-radius: var(--radius);
    color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--surface-alt); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--blau-hell); color: var(--blau-dunkel); }

.kopf-person { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------------ Rahmen */

.inhalt { max-width: 62rem; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
.eng    { max-width: 34rem; }

h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.015em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
p  { margin: 0 0 .9rem; max-width: 42rem; }
.unter { color: var(--muted); margin: 0 0 1.5rem; max-width: 42rem; }

a { color: var(--blau); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--blau); outline-offset: 2px;
}

/* ------------------------------------------------------------------ Karten */

.karte {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--schatten);
    padding: 1.25rem; margin: 0 0 1.25rem;
}
.karte > :first-child { margin-top: 0; }
.karte > :last-child  { margin-bottom: 0; }

/* Die wichtigste Zahl der Startseite - als Satz, nicht als Kennzahl. */
.hauptaussage {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 5px solid var(--blau);
    border-radius: var(--radius); box-shadow: var(--schatten);
    padding: 1.35rem 1.5rem; margin: 0 0 1.25rem;
}
.hauptaussage.erledigt { border-left-color: var(--gruen); }
.hauptaussage.warnung  { border-left-color: var(--amber); }
.hauptaussage p {
    font-size: 1.4rem; line-height: 1.35; font-weight: 600;
    margin: 0 0 .35rem; letter-spacing: -.01em;
}
.hauptaussage .dazu { font-size: 1rem; font-weight: 400; color: var(--ink-2); margin: 0; }

/* Fortschritt */
.balken {
    height: 14px; background: var(--surface-alt);
    border: 1px solid var(--line); border-radius: 999px;
    overflow: hidden; margin: 1rem 0 .5rem;
}
.balken i { display: block; height: 100%; background: var(--blau); }
.balken i.voll  { background: var(--gruen); }
.balken i.ueber { background: var(--amber); }
.balken-text { font-size: .95rem; color: var(--muted); display: flex; justify-content: space-between; }

/* ------------------------------------------------------------------ Knoepfe */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: 0 1.35rem;
    background: var(--blau); color: #fff; border: 1px solid var(--blau);
    border-radius: var(--radius); font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }

.knopf.neben {
    background: var(--surface); color: var(--ink);
    border-color: var(--line-strong); font-weight: 500;
}
.knopf.neben:hover { background: var(--surface-alt); }

.knopf.gefahr { background: var(--surface); color: var(--rot); border-color: var(--line-strong); }
.knopf.gefahr:hover { background: var(--rot-hell); border-color: var(--rot); }

.knopf.klein { min-height: 40px; padding: 0 .8rem; font-size: .95rem; }
.knopf-reihe { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }

/* ------------------------------------------------------------------ Formulare */

.feld { margin: 0 0 1.15rem; }
.feld label, .feld .beschriftung {
    display: block; font-weight: 600; margin-bottom: .3rem;
}
.feld .hilfe { font-size: .93rem; color: var(--muted); margin: .3rem 0 0; }

input[type=text], input[type=email], input[type=date], input[type=number],
select, textarea {
    width: 100%; min-height: 48px; padding: .55rem .7rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    font: inherit;
}
textarea { min-height: 5.5rem; resize: vertical; }
select { min-height: 48px; }

input[type=checkbox] { width: 22px; height: 22px; vertical-align: -3px; }
.feld-check { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1rem; }
.feld-check label { font-weight: 500; margin: 0; }

fieldset { border: 0; padding: 0; margin: 0; }

/* Zahleneingabe: schmal, damit klar ist, dass wenig hineingehoert */
.schmal { max-width: 9rem; }

/* ------------------------------------------------------------------ Meldungen */

.meldung {
    border: 1px solid var(--line); border-left: 5px solid var(--blau);
    background: var(--surface); border-radius: var(--radius);
    padding: .85rem 1.1rem; margin: 0 0 1.1rem; box-shadow: var(--schatten);
}
.meldung.ok     { border-left-color: var(--gruen); }
.meldung.warn   { border-left-color: var(--amber); }
.meldung.fehler { border-left-color: var(--rot); }
.meldung p { margin: 0; }

.hinweiskasten {
    background: var(--surface-alt); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .85rem 1.1rem; margin: 0 0 1.1rem;
}
.hinweiskasten p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Tabellen */

.tabelle-rahmen {
    overflow-x: auto; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--schatten); margin: 0 0 1.25rem;
}
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
thead th {
    background: var(--surface-alt); color: var(--ink-2);
    font-size: .88rem; font-weight: 600; white-space: nowrap;
    border-bottom: 1px solid var(--line-strong);
}
tbody tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: #fafbfd; }

/* Auf dem Handy werden Tabellen zu Bloecken */
@media (max-width: 640px) {
    .stapeln thead { display: none; }
    .stapeln tbody tr {
        display: block; border-bottom: 1px solid var(--line-strong); padding: .5rem 0;
    }
    .stapeln tbody td {
        display: flex; justify-content: space-between; gap: 1rem;
        border: 0; padding: .3rem .9rem; text-align: right;
    }
    .stapeln tbody td::before {
        content: attr(data-label); font-weight: 600; color: var(--ink-2); text-align: left;
    }
    .stapeln tbody td.voll { display: block; text-align: left; }
    .stapeln tbody td.voll::before { display: block; }
}

/* ------------------------------------------------------------------ Marken */

.marker {
    display: inline-block; font-size: .82rem; font-weight: 600;
    padding: .15rem .5rem; border-radius: 3px; white-space: nowrap;
}
.m-offen   { background: var(--surface-alt); color: var(--ink-2); }
.m-ok      { background: var(--gruen-hell);  color: var(--gruen); }
.m-kuerz   { background: var(--amber-hell);  color: var(--amber); }
.m-abgel   { background: var(--rot-hell);    color: var(--rot); }
.m-info    { background: var(--blau-hell);   color: var(--blau-dunkel); }

/* ------------------------------------------------------------------ Zeilenliste */

.zeile {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--schatten);
    padding: 1rem 1.15rem; margin: 0 0 .8rem;
    display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
}
.zeile-text { flex: 1 1 16rem; min-width: 0; }
.zeile-titel { font-weight: 600; margin: 0 0 .15rem; }
.zeile-unter { color: var(--muted); font-size: .95rem; margin: 0; }
.zeile-zahlen { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.zeile-zahl { text-align: right; min-width: 5rem; }
.zeile-zahl b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.zeile-zahl span { font-size: .82rem; color: var(--muted); }
.zeile-tun { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ Kennzahlen */

.kennzahlen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; margin: 0 0 1.25rem;
}
.kennzahl { background: var(--surface); padding: .9rem 1.1rem; }
.kennzahl b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kennzahl span { font-size: .88rem; color: var(--muted); }
.kennzahl.betont b { color: var(--blau-dunkel); }
.kennzahl.knapp  b { color: var(--rot); }

/* ------------------------------------------------------------------ Stellvertretung */

.stellvertretung {
    background: var(--amber-hell); border-bottom: 1px solid var(--line-strong);
    color: var(--amber);
}
.stellvertretung .kopf-innen { padding: .5rem 1.25rem; font-weight: 600; }
.stellvertretung form { margin-left: auto; }

/* ------------------------------------------------------------------ Fuss */

.fuss {
    max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
    color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ Sonstiges */

.nur-lesbar { color: var(--muted); }
.trenner { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }
.zentriert { text-align: center; }
details.aufklapp summary {
    cursor: pointer; font-weight: 600; min-height: 44px;
    display: flex; align-items: center;
}

/* ------------------------------------------------------------------ Freigabe
   Eine Zeile pro Taetigkeit als Spaltenraster. Dadurch stehen die
   Eingabefelder ueber alle Zeilen auf derselben Linie, egal wie lang der
   Text links ist. Unter 860px wird gestapelt, dann erscheinen die
   Beschriftungen an den Feldern. */

.entscheid-kopf,
.entscheid {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) 6rem 8.5rem minmax(11rem, 1.1fr);
    gap: 1rem;
}

.entscheid-kopf {
    padding: 0 1.15rem .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
}
.entscheid-kopf .rechts { text-align: right; }

.entscheid {
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1rem 1.15rem;
    margin: 0 0 .8rem;
}

.entscheid .was   { font-weight: 600; margin: 0 0 .2rem; }
.entscheid .dazu  { color: var(--muted); font-size: .95rem; margin: 0 0 .2rem; max-width: none; }
.entscheid .dazu:last-child { margin-bottom: 0; }
.entscheid .beschreibung { white-space: pre-line; }

.entscheid .zahl-gross {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.5;
}

/* Beschriftungen nur im gestapelten Zustand sichtbar - fuer Vorleseprogramme
   bleiben sie immer im Dokument. */
.nur-eng {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .entscheid-kopf { display: none; }
    .entscheid {
        grid-template-columns: 1fr 1fr;
        gap: .75rem 1rem;
    }
    .entscheid .zelle-was,
    .entscheid .zelle-anmerkung { grid-column: 1 / -1; }
    .entscheid .zahl-gross { text-align: left; }
    .nur-eng {
        position: static;
        width: auto; height: auto;
        clip: auto;
        display: block;
        font-weight: 600;
        font-size: .88rem;
        margin-bottom: .25rem;
    }
}

/* Freitextbeschreibung: Absaetze der Lehrperson bleiben erhalten */
.beschreibung { white-space: pre-line; }

/* Sortierbare Spaltenkoepfe */
.sortlink {
    color: var(--ink-2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    white-space: nowrap;
}
.sortlink:hover { color: var(--blau-dunkel); text-decoration: underline; }
.sortlink.ist-aktiv { color: var(--blau-dunkel); font-weight: 700; }

/* Suchzeile: Feld und Knoepfe auf einer Linie, unten ausgerichtet */
.suchzeile {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ Breite Seiten
   Seiten mit vielen Spalten brauchen mehr Platz als Lesetext. Auf grossen
   Bildschirmen passt die Tabelle dann ohne waagrechtes Rollen, und die
   Kopfzeile bleibt beim Scrollen stehen. */

.inhalt.breit { max-width: 100rem; }

/* Zeilen etwas kompakter, damit mehr auf einen Blick passt */
.breit table th,
.breit table td { padding: .5rem .7rem; }
.breit table { font-size: .88rem; }

@media (min-width: 1150px) {
    /* Ohne eigenen Rollbereich kann die Kopfzeile an der Seite haften.
       Auf schmalen Bildschirmen bleibt das waagrechte Rollen erhalten. */
    .breit .tabelle-rahmen { overflow: visible; }
    .breit .tabelle-rahmen thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: inset 0 -1px 0 var(--line-strong);
    }
}