/* ==========================================================================
   kacheln.css — Bauteile des Portals: Rahmen, Kachel, Stat-Karte,
   Statusampel, Abzeichen, Formular, Knopf.
   --------------------------------------------------------------------------
   MOBIL ZUERST: Der Grundzustand jeder Regel ist die einspaltige
   Handy-Ansicht. Erweiterungen ausschliesslich ueber min-width — es gibt in
   dieser Datei bewusst KEINE max-width-Medienabfrage.

   Hier steht KEIN roher Farb- oder Abstandswert. Alles kommt aus tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Kein automatisches Vergroessern der Schrift beim Drehen des Geraets */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schrift-familie);
    font-size: var(--schrift-grund);
    line-height: var(--zeilenhoehe);
    /* Nichts darf die Seite seitwaerts schieben. Breites scrollt in der
       eigenen Box — siehe .kopierfeld__eingabe und .datenliste dd. */
    overflow-x: hidden;
}

h1, h2, h3 { line-height: var(--zeilenhoehe-eng); margin: 0; }
p { margin: 0; }
ul { margin: 0; }

a { color: var(--marke-text); }   /* Marke als Text traegt nicht — siehe tokens.css */

:focus-visible {
    outline: 3px solid var(--marke-text);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
}

.sprungmarke {
    position: absolute;
    left: -9999px;
}
.sprungmarke:focus {
    left: var(--abstand-2);
    top: var(--abstand-2);
    z-index: 10;
    background: var(--karte);
    color: var(--text);
    padding: var(--abstand-2) var(--abstand-3);
    border-radius: var(--radius);
}

.still { color: var(--text-still); }

/* --------------------------------------------------------------------------
   Kopfleiste und Navigation
   Am Handy kompakt und daumen-erreichbar; KEINE Funktion haengt an Hover.
   -------------------------------------------------------------------------- */

.kopfleiste {
    background: var(--kopf-flaeche);
    color: var(--kopf-text);
    /* Heller Kopf mit Haarlinie statt Schlagschatten (Markenkleid) */
    border-bottom: 1px solid var(--linie);
}

.kopfleiste__innen {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: var(--abstand-2) var(--abstand-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-3);
    min-height: var(--touchziel);
}

.kopfleiste__marke {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
    color: var(--kopf-text);
    font-size: var(--schrift-marke);
    font-weight: var(--schrift-fett);
    text-decoration: none;
    letter-spacing: 0.01em;
}

/* Logo Stil+Find links vom Portalnamen (Markenkleid v1: Hoehe mobil
   28-32px). Rein per CSS, weil die Vorlagen laut Anweisung unangetastet
   bleiben — den zugaenglichen Namen traegt der danebenstehende Text der
   Marke; das Bild selbst ist dekorativ. Die weisse Grundplatte des Logos
   verschmilzt auf dem hellen Kopf, eine eigene Platte ist nicht noetig. */
.kopfleiste__marke::before {
    content: "";
    width: 30px;
    height: 30px;
    flex: none;
    background: url("/assets/bilder/logo.svg") center / contain no-repeat;
}

.kopfleiste__person {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    min-width: 0;
}

.kopfleiste__name {
    font-size: var(--schrift-klein);
    color: var(--kopf-text);
    /* Lange Namen duerfen die Leiste nicht sprengen */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 8rem;
}

.kopfleiste__abmelden { margin: 0; }

.navigation {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-2) var(--abstand-1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1);
    /* Am Handy wird UMGEBROCHEN statt seitwaerts gescrollt: Bei sechs
       Punkten verschwanden die hinteren sonst aus dem Blick, und was man
       nicht sieht, sucht man nicht. Die Seite selbst scrollt weiterhin
       nie seitwaerts. */
}

.navigation__punkt {
    color: var(--kopf-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: var(--schrift-klein);
    padding: var(--abstand-2) var(--abstand-3);
    border-radius: var(--radius-klein);
    min-height: var(--touchziel);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    opacity: 0.85;
}
.navigation__punkt:focus-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   Inhaltsbereich
   -------------------------------------------------------------------------- */

.inhalt {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: var(--abstand-4);
    display: flex;
    flex-direction: column;
    gap: var(--raster-luecke);
}

.seite--schmal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.schmal {
    width: 100%;
    max-width: var(--schmal-breite);
    margin: 0 auto;
    padding: var(--abstand-6) var(--abstand-4) var(--abstand-4);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4);
    flex: 1;
}

.schmal__marke {
    font-size: var(--schrift-titel);
    text-align: center;
    color: var(--text);
}

.fussleiste {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: var(--abstand-5) var(--abstand-4);
    color: var(--text-still);
    font-size: var(--schrift-winzig);
    text-align: center;
}
.fussleiste--schmal { padding-top: var(--abstand-4); }

/* --------------------------------------------------------------------------
   Kachel-Grundraster
   1 Spalte am Handy · 2 ab Tablet · bis 4 am Desktop
   -------------------------------------------------------------------------- */

.raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raster-luecke);
    /* Kacheln behalten ihre natuerliche Hoehe. Ohne dies streckt das Raster
       alle auf die Hoehe der laengsten - eine kurze Kachel steht dann mit
       einem Feld Leere darunter und wirkt unfertig. */
    align-items: start;
}

.kachel {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-kachel);
    padding: var(--kachel-innen);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-3);
    min-width: 0;                 /* damit Inhalt im Raster schrumpfen darf */
}

.kachel__titel {
    font-size: var(--schrift-titel);
    font-weight: var(--schrift-halbfett);
}

.kachel__text { color: var(--text); }

/* Beschreibende Zeile einer Uebersichts-Kachel: hoechstens drei Zeilen,
   dann Ellipse (Kachel-System v1). Als eigene Klasse, damit Fliesstext in
   Detailansichten ungekuerzt bleibt. */
.kachel__text--kurz {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.kachel__text--still { color: var(--text-still); font-size: var(--schrift-klein); }
.kachel__text--warnung {
    color: var(--status-warn-text);
    font-size: var(--schrift-klein);
}

.kachel__leer {
    color: var(--text-still);
    font-size: var(--schrift-klein);
    padding: var(--abstand-4) 0;
    border-top: 1px dashed var(--linie);
}

.kachel--begruessung {
    background: var(--marke-flaeche);
    color: var(--text);
}
.kachel--zugang      { border-color: var(--status-warn); }

.kachel--formular {
    /* Formularkacheln stehen allein und sollen nicht ueberbreit werden */
    max-width: var(--schmal-breite);
    width: 100%;
}

/* --------------------------------------------------------------------------
   Stat-Karte und Statusampel
   -------------------------------------------------------------------------- */

.statkarte {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
}
.statkarte__wert {
    font-size: var(--schrift-titel);
    font-weight: var(--schrift-fett);
    line-height: var(--zeilenhoehe-eng);
}
.statkarte__marke {
    font-size: var(--schrift-winzig);
    color: var(--text-still);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ampel {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-1);
    font-size: var(--schrift-winzig);
    font-weight: var(--schrift-halbfett);
    padding: var(--abstand-1) var(--abstand-2);
    border-radius: 999px;
}
.ampel::before {
    content: "";
    /* Aussenmass 9px, Kern 7px (Anweisung 76) — der Ring entsteht aus der
       Kachelflaeche, damit kein zweites Element noetig ist. */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: inset 0 0 0 1px var(--karte);
    /* Farbe ist nie das einzige Signal — der Text daneben sagt dasselbe. */
    flex: none;
}
.ampel--aktiv      { color: var(--status-ok-text);   background: var(--status-ok-flaeche); }
.ampel--eingeladen { color: var(--status-warn-text); background: var(--status-warn-flaeche); }
.ampel--gesperrt   { color: var(--status-crit-text); background: var(--status-crit-flaeche); }

.abzeichen {
    display: inline-block;
    font-size: var(--schrift-winzig);
    font-weight: var(--schrift-halbfett);
    padding: var(--abstand-1) var(--abstand-2);
    border-radius: var(--radius-klein);
    background: var(--marke-flaeche);
    color: var(--text);
}

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

.meldung {
    padding: var(--abstand-3) var(--abstand-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--schrift-klein);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}
.meldung--erfolg {
    background: var(--status-ok-flaeche);
    border-color: var(--status-ok);
    color: var(--status-ok-text);
}
.meldung--fehler {
    background: var(--status-crit-flaeche);
    border-color: var(--status-crit);
    color: var(--status-crit-text);
}
.meldung__liste { padding-left: var(--abstand-5); }
.meldung__nachsatz { color: var(--text-still); }

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */

.formular {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4);
}

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

.feld__marke {
    font-size: var(--schrift-klein);
    font-weight: var(--schrift-halbfett);
}
.feld__marke--klein {
    font-weight: var(--schrift-normal);
    color: var(--text-still);
    font-size: var(--schrift-winzig);
}

.feld__gruppe {
    display: flex;
    gap: var(--abstand-2);
    align-items: stretch;
}
.feld__gruppe .feld__eingabe { flex: 1; min-width: 0; }

.feld__eingabe {
    width: 100%;
    min-height: var(--touchziel);
    padding: var(--abstand-2) var(--abstand-3);
    font-family: inherit;
    /* Bewusst NICHT kleiner als die Grundgroesse: kleinere Werte loesen unter
       iOS beim Antippen ein Hineinzoomen aus. */
    font-size: var(--schrift-grund);
    color: var(--text);
    background: var(--flaeche-still);
    border: 1px solid var(--linie-kraeftig);
    border-radius: var(--radius);
}
.feld__eingabe::placeholder { color: var(--text-still); }

.feld__schalter { flex: none; }

.feld__hilfe {
    font-size: var(--schrift-winzig);
    color: var(--text-still);
}

.hinweis {
    font-size: var(--schrift-klein);
    color: var(--text-still);
}

/* --------------------------------------------------------------------------
   Knopf — Grundmass ist immer das Touch-Ziel
   -------------------------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touchziel);
    padding: var(--abstand-2) var(--abstand-4);
    font-family: inherit;
    font-size: var(--schrift-klein);
    font-weight: var(--schrift-halbfett);
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dauer-kurz) var(--kurve),
                border-color var(--dauer-kurz) var(--kurve);
}

.knopf--haupt {
    background: var(--marke);
    /* Kontrast-Regel: NIE Weiss auf Orange (~2:1). --text-auf-marke ist ein
       fester dunkler Wert, der auch in der dunklen Darstellung dunkel bleibt. */
    color: var(--text-auf-marke);
}


.knopf--still {
    background: transparent;
    color: inherit;
    border-color: var(--linie-kraeftig);
}


.knopf--warnung {
    background: var(--status-crit-flaeche);
    color: var(--status-crit-text);
    border-color: var(--status-crit);
}

.knopf:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Symbolknopf — quadratisch, volles Touch-Mass, kein Text.
   Wird fuer den Augen-Schalter am Passwortfeld benutzt. */
.knopf--symbol {
    width: var(--touchziel);
    min-width: var(--touchziel);
    padding: 0;
    background: transparent;
    color: var(--text-still);
    border-color: var(--linie-kraeftig);
}

.knopf--symbol[aria-pressed="true"] { color: var(--marke-text); }

.symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.symbol[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Kopierfeld — muss am Handy bedienbar sein
   -------------------------------------------------------------------------- */

.kopierfeld {
    display: flex;
    flex-direction: column;      /* am Handy untereinander: beides volle Breite */
    gap: var(--abstand-2);
}

.kopierfeld__eingabe {
    width: 100%;
    min-width: 0;
    min-height: var(--touchziel);
    padding: var(--abstand-2) var(--abstand-3);
    font-family: var(--schrift-familie-fest);
    font-size: var(--schrift-klein);
    color: var(--text);
    background: var(--flaeche-still);
    border: 1px solid var(--linie-kraeftig);
    border-radius: var(--radius);
    /* Der lange Link scrollt IM Feld — nicht die Seite. */
    overflow-x: auto;
}

.kopierfeld__knopf { width: 100%; }

/* Ein Initialpasswort ist kurz und wird abgetippt oder durchgesagt — es darf
   deshalb gross und luftig stehen, anders als ein langer Link. */
.kopierfeld__eingabe--passwort {
    font-size: var(--schrift-gross);
    font-weight: var(--schrift-halbfett);
    letter-spacing: 0.08em;
    text-align: center;
    overflow-x: visible;
}

/* --------------------------------------------------------------------------
   Datenliste (Konto-Karte)
   -------------------------------------------------------------------------- */

.datenliste {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    border-top: 1px solid var(--linie);
    padding-top: var(--abstand-3);
}

.datenliste__paar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1) var(--abstand-3);
    align-items: baseline;
}

.datenliste dt {
    font-size: var(--schrift-winzig);
    color: var(--text-still);
    flex: 0 0 9rem;
}

.datenliste dd {
    margin: 0;
    font-size: var(--schrift-klein);
    min-width: 0;
    /* Lange E-Mail-Adressen brechen um, statt die Karte zu sprengen */
    overflow-wrap: anywhere;
}

.aktionen {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-3);
    border-top: 1px solid var(--linie);
    padding-top: var(--abstand-3);
}
.aktionen .knopf { width: 100%; }

.aktionen__form {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

/* ==========================================================================
   Erweiterungen fuer groessere Schirme — ausschliesslich min-width
   ========================================================================== */

/* Ab Tablet: zwei Spalten, etwas mehr Luft */
@media (min-width: 40rem) {
    /* Rasterabstand bleibt bei 12px (Anweisung 76) — frueher wuchs er hier. */
    .kachel--ereignisse { grid-column: 1 / -1; }

    .inhalt { padding: var(--abstand-5); }

    .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kachel { padding: var(--abstand-5); }

    .kopfleiste__name { max-width: 16rem; }

    .kopierfeld { flex-direction: row; }        /* nebeneinander wird jetzt lesbar */
    .kopierfeld__knopf { width: auto; flex: none; }

    /* Aktionen duerfen nebeneinander stehen, sobald Platz da ist */
    .aktionen { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
    .aktionen .knopf { width: auto; }
    .aktionen__form { flex: 1 1 16rem; }

    .kachel--begruessung { grid-column: 1 / -1; }
}

/* Ab Desktop: bis zu vier Spalten */
/* Dritte Stufe: 3 Spalten ab ~768px */
@media (min-width: 48rem) {
    .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Der Ereignisstrom traegt am meisten Text und bekommt deshalb die
       doppelte Breite. Nebenbei fuellt das die vierte Spalte, die sonst
       neben drei Kacheln leer bliebe. */
    .kachel--ereignisse { grid-column: span 2; }

    /* Konto-Karten tragen viel Inhalt — zwei Spalten stehen ihnen besser
       als vier gequetschte. */
    .raster--konten { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kachel--begruessung { grid-column: 1 / -1; }
}

/* Wer Bewegung reduziert haben moechte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Etappe 2 — Projektplan, Aufgaben, Ereignisse
   Weiterhin gilt: kein roher Farb- oder Abstandswert, alles aus tokens.css.
   Grundzustand bleibt die Handy-Ansicht.
   ========================================================================== */

.seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-3);
    flex-wrap: wrap;
}
.seitenkopf__titel {
    font-size: var(--schrift-titel);
    font-weight: var(--schrift-halbfett);
}

.brotkrume {
    font-size: var(--schrift-klein);
}
.brotkrume a { text-decoration: none; }


.kachel__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-2);
    flex-wrap: wrap;
}

.kachel__verweis {
    color: inherit;
    text-decoration: none;
}
.kachel__verweis:focus-visible { text-decoration: underline; }

.kachel__weiter {
    margin-top: auto;              /* haengt sich an den Kachelboden */
    font-size: var(--schrift-klein);
    font-weight: var(--schrift-halbfett);
    text-decoration: none;
    min-height: var(--touchziel);
    display: inline-flex;
    align-items: center;
}


.kachel__titel--tag {
    font-size: var(--schrift-gross);
    color: var(--text-still);
}

.kachel__fliesstext { font-size: var(--schrift-klein); }

/* Einspaltiges Raster fuer Detailseiten */
.raster--einspaltig { grid-template-columns: 1fr; }

.etappenliste {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raster-luecke);
}

/* --- Zaehler ------------------------------------------------------------ */

.zaehler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: var(--abstand-1) var(--abstand-2);
    border-radius: 999px;
    background: var(--marke-flaeche);
    color: var(--text);
    font-weight: var(--schrift-fett);
    font-size: var(--schrift-klein);
}
.zaehler--warnung {
    background: var(--status-crit-flaeche);
    color: var(--status-crit-text);
}

/* --- Ampel-Zustaende der Etappen ---------------------------------------- */

.ampel--geplant { color: var(--text-still); background: var(--flaeche-still); }
.ampel--arbeit  { color: var(--marke-text);       background: var(--marke-flaeche); }
.ampel--wartet  { color: var(--status-warn-text); background: var(--status-warn-flaeche); }
.ampel--fertig  { color: var(--status-ok-text);   background: var(--status-ok-flaeche); }

/* Ampelpunkt der Projektplan-Kachel — Text steht immer daneben */
.ampelpunkt {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-1);
    font-size: var(--schrift-winzig);
    font-weight: var(--schrift-halbfett);
    padding: var(--abstand-1) var(--abstand-2);
    border-radius: 999px;
}
.ampelpunkt::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: inset 0 0 0 1px var(--karte);
    flex: none;
}
.ampelpunkt--gruen { color: var(--status-ok-text);   background: var(--status-ok-flaeche); }
.ampelpunkt--gelb  { color: var(--status-warn-text); background: var(--status-warn-flaeche); }
.ampelpunkt--rot   { color: var(--status-crit-text); background: var(--status-crit-flaeche); }

/* --- Fortschrittsbalken -------------------------------------------------- */

.fortschritt {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}
.fortschritt__schiene {
    height: var(--abstand-2);
    border-radius: 999px;
    background: var(--linie);
    overflow: hidden;
}
.fortschritt__balken {
    height: 100%;
    background: var(--marke);
    border-radius: 999px;
    transition: width var(--dauer-kurz) var(--kurve);
}
.fortschritt__text {
    font-size: var(--schrift-winzig);
    color: var(--text-still);
}

/* --- Aufgabenliste ------------------------------------------------------- */

.aufgabenliste {
    display: flex;
    flex-direction: column;
}
.aufgabenliste--still { opacity: 0.75; }

.aufgabe {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-3);
    padding: var(--abstand-2) 0;
    border-top: 1px solid var(--linie);
}
.aufgabenliste > .aufgabe:first-child,
.aufgabenliste > .aufgabe__zeile:first-child .aufgabe { border-top: none; }

.aufgabe__zeile {
    border-top: 1px solid var(--linie);
}
.aufgabe__zeile:first-child { border-top: none; }
.aufgabe__zeile .aufgabe { border-top: none; }

.aufgabe__haken {
    flex: none;
    margin: 0;
    display: flex;
}

/* Der Haken ist ein Knopf mit vollem Touch-Mass — das sichtbare Kaestchen
   ist kleiner, die Trefferflaeche nicht. */
.haken {
    width: var(--touchziel);
    height: var(--touchziel);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-still);
}
.haken--fest { cursor: default; }

.haken__kaestchen {
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid var(--linie-kraeftig);
    border-radius: var(--radius-klein);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--karte);
    transition: border-color var(--dauer-kurz) var(--kurve);
}

.haken--gesetzt .haken__kaestchen {
    background: var(--status-ok-flaeche);
    border-color: var(--status-ok);
    color: var(--status-ok);
}

.aufgabe__text {
    min-width: 0;
    padding-top: var(--abstand-2);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
}
.aufgabe__titel {
    font-size: var(--schrift-klein);
    overflow-wrap: anywhere;
}
.aufgabe--erledigt .aufgabe__titel {
    text-decoration: line-through;
    color: var(--text-still);
}

.aufgabe__zusatz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-1) var(--abstand-2);
    font-size: var(--schrift-winzig);
    color: var(--text-still);
}
.aufgabe__frist--warnung {
    color: var(--status-crit-text);
    font-weight: var(--schrift-halbfett);
}
.aufgabe__etappe {
    padding: 0 var(--abstand-2);
    border-left: 1px solid var(--linie);
}

.aufgabe__werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    padding: 0 0 var(--abstand-3) calc(var(--touchziel) + var(--abstand-3));
}
.aufgabe__werkzeuge form { margin: 0; }

/* Optisch zurueckhaltender, aber NICHT kleiner: Das Touch-Mass von 44px gilt
   ausnahmslos. Ein 36px hoher Knopf ist am Handy ein Zielfehler, auch wenn er
   nur eine Nebenaktion traegt. (Beim Bau von Etappe 2 zunaechst falsch
   gemacht, in der Abnahme aufgefallen.) */
.knopf--klein {
    min-height: var(--touchziel);
    padding: var(--abstand-1) var(--abstand-3);
    font-size: var(--schrift-winzig);
}

/* Namensschild */
.namensschild {
    display: inline-block;
    padding: var(--abstand-1) var(--abstand-2);
    border-radius: var(--radius-klein);
    background: var(--flaeche-still);
    border: 1px solid var(--linie);
    color: var(--text);
    font-size: var(--schrift-winzig);
    font-weight: var(--schrift-halbfett);
}

/* --- Statuswahl ---------------------------------------------------------- */

.statuswahl {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    border-top: 1px solid var(--linie);
    padding-top: var(--abstand-3);
}
.statuswahl__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
}
.statuswahl__knoepfe .knopf { flex: 1 1 10rem; }

/* --- Personenwahl (vier grosse Touch-Flaechen) --------------------------- */

.feldgruppe { border: none; margin: 0; padding: 0; }
.feldgruppe legend { padding: 0; }

.personenwahl {
    display: grid;
    grid-template-columns: 1fr 1fr;      /* am Handy zwei nebeneinander */
    gap: var(--abstand-2);
}

.person { display: block; cursor: pointer; }

/* Das echte Auswahlfeld bleibt bedienbar und fokussierbar, ist aber
   optisch durch die Flaeche ersetzt. */
.person__eingabe {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.person__flaeche {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
    justify-content: center;
    min-height: calc(var(--touchziel) + var(--abstand-4));
    padding: var(--abstand-3);
    border: 2px solid var(--linie-kraeftig);
    border-radius: var(--radius);
    background: var(--flaeche-still);
    text-align: center;
}
.person__eingabe:checked + .person__flaeche {
    border-color: var(--marke);
    background: var(--marke-flaeche);
}
.person__eingabe:focus-visible + .person__flaeche {
    outline: 3px solid var(--marke);
    outline-offset: 2px;
}
.person__name { font-size: var(--schrift-klein); font-weight: var(--schrift-halbfett); }
.person__rolle { font-size: var(--schrift-winzig); color: var(--text-still); }

/* --- Mehrzeiliges Feld ---------------------------------------------------- */

.feld__eingabe--mehrzeilig {
    min-height: calc(var(--touchziel) * 2);
    resize: vertical;
    line-height: var(--zeilenhoehe);
}

/* --- Ereignisse ---------------------------------------------------------- */

.ereignisliste {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ereignis {
    display: flex;
    gap: var(--abstand-3);
    padding: var(--abstand-2) 0;
    border-top: 1px solid var(--linie);
    font-size: var(--schrift-klein);
}
.ereignisliste > .ereignis:first-child { border-top: none; }
.ereignis__zeit {
    flex: none;
    color: var(--text-still);
    font-size: var(--schrift-winzig);
    font-variant-numeric: tabular-nums;
    padding-top: 0.1rem;
}
.ereignis__text { min-width: 0; overflow-wrap: anywhere; }

.blaetterung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-3);
    flex-wrap: wrap;
}
.blaetterung__stand {
    font-size: var(--schrift-winzig);
    color: var(--text-still);
}

/* --- Ausklappbereich ------------------------------------------------------ */

.ausklapp__kopf {
    cursor: pointer;
    min-height: var(--touchziel);
    display: flex;
    align-items: center;
    font-size: var(--schrift-klein);
    font-weight: var(--schrift-halbfett);
}

/* --- Aktiver Navigationspunkt -------------------------------------------- */

.navigation__punkt--aktiv {
    opacity: 1;
    background: var(--kopf-aktiv);
    font-weight: var(--schrift-halbfett);
    /* Aktiver Punkt in --marke unterstrichen (Markenkleid). Der Rahmen liegt
       auf allen Punkten transparent (siehe .navigation__punkt), damit beim
       Wechsel nichts springt. */
    border-bottom-color: var(--marke);
}

/* ==========================================================================
   Erweiterungen — weiterhin ausschliesslich min-width
   ========================================================================== */

@media (min-width: 40rem) {
    .personenwahl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kachel--formular { max-width: 40rem; }
}

@media (min-width: 64rem) {
    /* Die Etappenliste bleibt gestapelt: eine Etappe ist eine Zeile im Plan,
       kein Kachelfeld. Nebeneinander verloere sie ihre Reihenfolge. */
    .etappenliste { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Anweisung 76 — Bauteile des Kachel-Systems
   Weiterhin: kein roher Farbwert, alles aus tokens.css. Grundzustand bleibt
   die Handy-Ansicht, Erweiterung nur ueber min-width.
   ========================================================================== */

/* --- Ganze Kachel als Link (Kachel-System v1) ----------------------------
   "Die GANZE Kachel ist der Link, nicht ein Wort darin." Der vorhandene
   Verweis 'Etappe oeffnen' wird per ::after ueber die gesamte Kachel
   gespannt — ohne HTML-Aenderung. Titel-Link und Fortschritt bleiben
   darunter erreichbar, weil sie keine eigene Interaktion tragen. */

.kachel--etappe { position: relative; }

.kachel--etappe .kachel__weiter::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-gross);
}

@media (hover: hover) {
    /* Anheben um 3px + Schatten — nur an echten Zeigegeraeten, und Hover
       traegt keine Funktion: der Link geht auch ohne. */
    .kachel--etappe {
        transition: transform 0.15s var(--kurve), box-shadow 0.15s var(--kurve);
    }
    .kachel--etappe:hover {
        transform: translateY(-3px);
        box-shadow: var(--schatten-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kachel--etappe { transition: none; }
    .kachel--etappe:hover { transform: none; }
}

/* --- Statusoberkante 3px -------------------------------------------------
   Fuer Kacheln, die einen Zustand tragen (Kennzahl, Warnung). Die Kante sitzt
   IM Rahmen, nicht als zusaetzliches Element — sonst springt die Kachel beim
   Zustandswechsel um ihre eigene Randbreite. */

.kachel--status {
    border-top: var(--statuskante) solid var(--linie);
    padding-top: calc(var(--kachel-innen) - var(--statuskante));
}
.kachel--status-marke { border-top-color: var(--marke); }
.kachel--status-ok    { border-top-color: var(--status-ok); }
.kachel--status-warn  { border-top-color: var(--status-warn); }
.kachel--status-crit  { border-top-color: var(--status-crit); }
.kachel--status-info  { border-top-color: var(--status-info); }

/* --- Kachel als Link ------------------------------------------------------
   Die GANZE Kachel ist klickbar, nicht nur die Ueberschrift. Umgesetzt ueber
   eine Deckflaeche des inneren Verweises: damit bleibt genau EIN Link im
   Baum (kein verschachteltes <a>), und Text laesst sich weiter markieren. */

.kachel--klickbar { position: relative; }

.kachel--klickbar .kachel__verweis::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.kachel--klickbar:focus-within {
    outline: 3px solid var(--marke);
    outline-offset: 2px;
}

/* --- Ampel- und Markenpunkt ----------------------------------------------
   Aussenmass 9px, Kern 7px. Der Punkt ist NIE das einzige Signal — daneben
   steht immer Text. */

.punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.punkt::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.punkt--marke { color: var(--marke); }
.punkt--ok    { color: var(--status-ok); }
.punkt--warn  { color: var(--status-warn); }
.punkt--crit  { color: var(--status-crit); }
.punkt--info  { color: var(--status-info); }

/* "gerade aktiv": ruhiger Puls. Wer Bewegung reduziert haben moechte,
   bekommt einen ruhenden Punkt — die Aussage steht ohnehin im Text. */
.punkt--aktiv { animation: punkt-puls 1.6s var(--kurve) infinite; }

/* Kachel-System v1: Opazitaet 1 -> 0.35 -> 1 in ~1,6 s. Der fruehere
   Schatten-Ring entfaellt — das Dokument kennt nur den Opazitaets-Puls. */
@keyframes punkt-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* --- Tabellarische Ziffern -----------------------------------------------
   Ueberall dort, wo Zahlen untereinander stehen oder sich fortlaufend
   aendern: gleiche Ziffernbreite, damit nichts wackelt. */

.zaehler,
.statkarte__wert,
.fortschritt__text,
.ereignis__zeit,
.aufgabe__frist,
.datenliste dd {
    font-variant-numeric: tabular-nums;
}

/* --- Ereignis-Zeilen-Muster ----------------------------------------------
   Feste Zeitspalte links, Text rechts, Haarlinie zwischen den Zeilen.
   Die Zeitspalte hat eine feste Breite, damit die Texte eine gemeinsame
   Kante bilden — sonst franst die Liste bei wechselnder Zeitlaenge aus. */

.ereignis__zeit {
    width: 3.25rem;
    flex: none;
}

/* --- Leerzustands-Regel --------------------------------------------------
   Leere Zustaende stehen in der GRUNDSCHRIFT und NIE in Markenfarbe: ein
   oranger Platzhalter liest sich wie ein Hinweis auf etwas Vorhandenes. */

.kachel__leer,
.aufgabe__zusatz .still,
.datenliste .still {
    font-family: var(--schrift-familie);
    font-variant-numeric: normal;
    color: var(--text-still);
}

/* --- Zahlen-Kacheln: mobil zweispaltig erlaubt --------------------------- */

.raster--zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   Hover — ausschliesslich fuer echte Zeigergeraete.
   Auf Touch-Geraeten bleibt der Hover-Zustand sonst nach dem Tippen kleben.
   ========================================================================== */

@media (hover: hover) {
    .navigation__punkt:hover { opacity: 1; }
    .kachel__verweis:hover { text-decoration: underline; }
    .kachel__weiter:hover { text-decoration: underline; }
    .brotkrume a:hover { text-decoration: underline; }

    .knopf--haupt:hover:not(:disabled) { background: var(--marke-hover); }
    .knopf--still:hover:not(:disabled) { border-color: var(--marke); }
    .knopf--symbol:hover:not(:disabled) {
        color: var(--marke);
        border-color: var(--marke);
    }
    .haken:hover:not(.haken--fest) .haken__kaestchen { border-color: var(--marke); }

    .kachel--klickbar:hover {
        border-color: var(--marke);
        box-shadow: var(--schatten-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .punkt--aktiv { animation: none; }
}

/* --------------------------------------------------------------------------
   Rueckfrage vor Aktionen, die sich nicht zuruecknehmen lassen.
   Das Ja steht bewusst NICHT an derselben Stelle wie der Haken, den man
   gerade getroffen hat — sonst faengt ein zweiter Fehlgriff die Rueckfrage
   gleich mit ab.
   -------------------------------------------------------------------------- */

.kachel--rueckfrage { border-left: var(--statuskante) solid var(--marke); }

.rueckfrage__gegenstand {
    font-size: var(--schrift-gross);
    font-weight: var(--schrift-halbfett);
    overflow-wrap: anywhere;
}

.rueckfrage__knoepfe {
    display: flex;
    flex-direction: column;      /* am Handy untereinander, volle Breite */
    gap: var(--abstand-3);
    border-top: 1px solid var(--linie);
    padding-top: var(--abstand-4);
}
.rueckfrage__knoepfe form { margin: 0; }
.rueckfrage__knoepfe .knopf { width: 100%; }

@media (min-width: 40rem) {
    .rueckfrage__knoepfe { flex-direction: row-reverse; justify-content: flex-end; }
    .rueckfrage__knoepfe .knopf { width: auto; min-width: 10rem; }
}

/* --------------------------------------------------------------------------
   Vorschaubalken
   Muss auf den ersten Blick vom normalen Betrieb zu unterscheiden sein —
   sonst haelt man die Kundensicht fuer die eigene. Deshalb ganz oben, ueber
   der Kopfleiste, in Markenflaeche mit Markenkante.
   -------------------------------------------------------------------------- */

.vorschaubalken {
    background: var(--marke-flaeche);
    border-bottom: var(--statuskante) solid var(--marke);
    padding: var(--abstand-3) var(--abstand-4);
    display: flex;
    flex-direction: column;      /* am Handy untereinander */
    gap: var(--abstand-2);
    align-items: flex-start;
}
.vorschaubalken form { margin: 0; }
.vorschaubalken__text {
    font-size: var(--schrift-klein);
    color: var(--text);
}

@media (min-width: 40rem) {
    .vorschaubalken {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        max-width: var(--inhalt-breite);
        margin: 0 auto;
        width: 100%;
    }
}