/* =====================================================================
   Das App-Gerüst
   =====================================================================

   Ab 900 px eine feste Seitenleiste, darunter eine Leiste am unteren
   Rand. Beides zeigt, WO man ist – und ist damit selbst schon Führung.
   Vorher gab es nur eine blaue Zeile oben und den Weg zurück über die
   Startseite; wer auf einer Unterseite stand, sah nicht, wozu sie gehört.

   900 px als Grenze, weil ein Tablet quer (meist 1024 oder 1180) den
   Platz für die Spalte längst hat und ihn sonst verschenken würde.
   ===================================================================== */

.geruest { display: flex; flex-direction: column; min-height: 100dvh; }

/* --- Seitenleiste ---------------------------------------------------- */
.seitenleiste {
    display: none;                       /* am Handy: siehe unten */
    background: var(--flaeche-tief);
    color: var(--text-auf-tief);
    flex-direction: column;
    padding: var(--raum-4) var(--raum-3);
    gap: var(--raum-1);
}
.seitenleiste .marke-oben {
    display: flex; align-items: center; gap: var(--raum-3);
    padding: var(--raum-2) var(--raum-3) var(--raum-5);
    color: inherit; text-decoration: none;
}
.seitenleiste .marke-oben .zeichen {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); border-radius: var(--rund-m);
}
.seitenleiste .marke-oben .zeichen .symbol { width: 22px; height: 22px; }
.seitenleiste .marke-oben .name { font-weight: 680; letter-spacing: -.01em; }

.seitenleiste .gruppe {
    font-size: var(--schrift-xs); text-transform: uppercase;
    letter-spacing: .08em; font-weight: 650;
    color: var(--text-auf-tief-leise);
    padding: var(--raum-4) var(--raum-3) var(--raum-1);
}
.seitenleiste a.ziel {
    display: flex; align-items: center; gap: var(--raum-3);
    padding: var(--raum-3);
    border-radius: var(--rund-m);
    color: rgba(255, 255, 255, .82);
    text-decoration: none; font-weight: 550;
    font-size: var(--schrift-s);
    transition: background var(--tempo-schnell) var(--kurve),
                color var(--tempo-schnell) var(--kurve);
}
.seitenleiste a.ziel:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.seitenleiste a.ziel .symbol { width: 20px; height: 20px; flex: 0 0 20px; opacity: .8; }
.seitenleiste a.ziel.hier {
    background: rgba(255, 255, 255, .14); color: #fff; font-weight: 650;
}
.seitenleiste a.ziel.hier .symbol { opacity: 1; }
.seitenleiste a.ziel .zaehler {
    /* Siehe `.verbindungswarnung`: `--rot` mit Weiss ergibt im
       Dunkelmodus 2,41:1. */
    margin-left: auto; background: var(--rot-flaeche);
    color: var(--text-auf-rot);
    font-size: var(--schrift-xs); font-weight: 700;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--rund-voll); display: grid; place-items: center;
}
.seitenleiste .unten { margin-top: auto; padding-top: var(--raum-4); }
/* Die Knöpfe im Fuß stehen auf --flaeche-tief (dunkelblau). `.knopf.stumm`
   färbt mit --text-leise, und das ist für HELLE Flächen gedacht: gemessen
   3,25:1 auf „Passwort" und „Abmelden". Hier gilt dieselbe Schriftfarbe
   wie für die Ziele darüber. */
.seitenleiste .knopf.stumm { color: rgba(255, 255, 255, .82); }
.seitenleiste .knopf.stumm:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.seitenleiste .wer {
    display: flex; align-items: center; gap: var(--raum-3);
    padding: var(--raum-3); border-radius: var(--rund-m);
    background: rgba(255, 255, 255, .07);
}
.seitenleiste .wer .kreis {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--rund-voll);
    /* Nicht #fff: Im Dunkeln ist --akzent-hell ein helles Blau, und Weiß
       darauf kam auf 2,43:1. Die Marke sagt, was auf den Akzent gehört. */
    background: var(--akzent-hell); color: var(--text-auf-akzent);
    display: grid; place-items: center; font-weight: 700;
    font-size: var(--schrift-s);
}
.seitenleiste .wer .name { font-size: var(--schrift-s); font-weight: 600;
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seitenleiste .wer .rolle { font-size: var(--schrift-xs);
                            color: var(--text-auf-tief-leise); }

/* --- Inhaltsspalte ----------------------------------------------------
   `flex: 1 1 auto`, und die 1 in der Mitte ist die wichtige Stelle. Hier
   stand `1 0 auto`, also schrumpfen VERBOTEN. Damit setzte die Spalte ihre
   Inhaltsbreite durch – und die ist wegen `.inhalt { max-width: 1180px }`
   genau 1180 px. Neben der 264 px breiten Seitenleiste ergibt das 1444 px,
   und alles darunter scrollte waagerecht:

       900 px Fenster  → 544 px Überstand
      1280 px Fenster  → 164 px Überstand
      1440 px Fenster  →   4 px Überstand

   Bei 1440 sah es nach einem Rundungsfehler aus, bei 900 war die halbe
   Seite weg. Gefunden wurde es nur, weil zwischen den geprüften Breiten
   nachgemessen wurde – 390/820/1440 allein zeigten fast nichts.

   `min-width: 0` allein rettet das nicht: Es hebt die Mindestbreite auf,
   aber schrumpfen darf die Spalte trotzdem nicht. Beides zusammen gehört
   hierher. */
.blatt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Kopfzeile über dem Inhalt: Titel und die Handlung dieser Seite. */
/* DIE STATUSLEISTE DES HANDYS LIEGT UEBER DIESER ZEILE.
   `apple-mobile-web-app-status-bar-style: black-translucent` und
   `viewport-fit=cover` (beide in basis.html) heissen: Der Inhalt beginnt
   ganz oben am Glas, unter Uhr, Empfang und Akku. Ohne dieses Polster
   sitzt der Seitentitel hinter der Uhrzeit - und genau das ist es, was
   „sieht nicht aus wie eine App" bedeutet.

   `env(safe-area-inset-*)` ist im Browser 0 und wird nur in der
   installierten App zu einem echten Wert. Es kostet also nichts, wo es
   nicht gebraucht wird. Seitlich gilt dasselbe fuer das iPhone im
   Querformat, wo die Kameranische in den Rand ragt. */
.blattkopf {
    display: flex; align-items: center; gap: var(--raum-3);
    padding: var(--raum-4);
    padding-top: calc(var(--raum-4) + env(safe-area-inset-top));
    padding-left: calc(var(--raum-4) + env(safe-area-inset-left));
    padding-right: calc(var(--raum-4) + env(safe-area-inset-right));
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    position: sticky; top: 0; z-index: var(--z-kopf);
    min-height: var(--kopf);
}
.blattkopf h1 { margin: 0; font-size: var(--schrift-l); }
.blattkopf .rechts { margin-left: auto; display: flex; align-items: center;
                     gap: var(--raum-2); }
.blattkopf .zurueck {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--rund-m); color: var(--text-leise);
    text-decoration: none; flex: 0 0 40px;
}
.blattkopf .zurueck:hover { background: var(--flaeche-hoch); color: var(--text); }
.blattkopf .zurueck .symbol { width: 22px; height: 22px; }

.inhalt { padding: var(--raum-5) var(--raum-4) var(--raum-8);
          max-width: 1180px; width: 100%; }
.inhalt.weit { max-width: none; }

/* --- Leiste unten (Handy) --------------------------------------------- */
.untenleiste {
    /* `margin-top: auto` DRUECKT SIE AN DEN UNTEREN RAND.

       Ohne diese Zeile stand die Leiste dort, wo der Inhalt aufhoerte -
       auf einer kurzen Seite also mitten im Bildschirm, mit einer
       schwarzen Flaeche darunter. Auf "Ueber das System" tiefer als auf
       "Produkte", weil dort mehr Text steht.

       Warum `position: sticky` das NICHT erledigt hat: Sticky heftet ein
       Element an den Rand des Sichtbereichs, waehrend gescrollt wird. Wo
       nichts zu scrollen ist, tut es gar nichts - und genau die kurzen
       Seiten sind die, auf denen es auffiel.

       Die Leiste ist das letzte Kind von `.blatt` (einer Flexspalte).
       `.blatt` waechst auf volle Hoehe, `.inhalt` aber nicht - der freie
       Platz lag also UNTER der Leiste. `margin-top: auto` gibt ihn ihr
       nach oben und schiebt sie damit ganz nach unten.

       Nicht `.inhalt { flex: 1 }`: Das wuerde den Inhaltskasten selbst
       dehnen und damit jede Seite betreffen, die auf ihre Hoehe baut.
       Diese Zeile bewegt nur die Leiste. */
    margin-top: auto;
    position: sticky; bottom: 0; z-index: var(--z-korb);
    display: flex; align-items: stretch;
    background: var(--flaeche);
    border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom);
}
.untenleiste a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    padding: var(--raum-2) var(--raum-1) var(--raum-3);
    min-height: 56px;
    color: var(--text-leise); text-decoration: none;
    font-size: var(--schrift-xs); font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.untenleiste a .symbol { width: 24px; height: 24px; }
.untenleiste a.hier { color: var(--akzent); }
.untenleiste a.hier .symbol { stroke-width: 2.2; }

/* --- Ab 900 px: Spalte statt Leiste ----------------------------------- */
@media (min-width: 900px) {
    .geruest { flex-direction: row; }
    .seitenleiste {
        display: flex; flex: 0 0 var(--leiste); width: var(--leiste);
        height: 100dvh; position: sticky; top: 0; overflow-y: auto;
    }
    .untenleiste { display: none; }
    .blatt { min-height: 100dvh; }
    .blattkopf { padding: var(--raum-4) var(--raum-6); }
    .inhalt { padding: var(--raum-6); }
}

/* --- Menü „Mehr" (Handy) ---------------------------------------------- */
.mehrblatt { display: grid; gap: var(--raum-3);
             grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
/* Verweis UND Knopf, beide gleich: „Abmelden" muss ein Formular sein
   (es aendert einen Zustand), soll aber genauso aussehen wie die Kacheln
   daneben. Eine Kachel, die anders aussieht als ihre Nachbarn, liest sich
   als etwas anderes. */
.mehrblatt a,
.mehrblatt button {
    display: flex; flex-direction: column; gap: var(--raum-2);
    padding: var(--raum-4);
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--rund-l); box-shadow: var(--schatten-1);
    color: inherit; text-decoration: none;
    width: 100%; text-align: left; font: inherit; cursor: pointer;
    transition: transform var(--tempo-schnell) var(--kurve),
                box-shadow var(--tempo-schnell) var(--kurve);
}
.mehrblatt a:hover,
.mehrblatt button:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.mehrblatt .symbol { width: 26px; height: 26px; color: var(--akzent); }
.mehrblatt .titel { font-weight: 650; }
.mehrblatt .text { font-size: var(--schrift-s); color: var(--text-leise); }

/* --- Verbindungswarnung ----------------------------------------------
   Als erste Zeile im Fluss, nicht über allem: Vorher lag sie über der
   Kopfzeile und verdeckte den Zurück-Pfeil. Versteckt kostet sie nichts. */
.verbindungswarnung {
    flex: 0 0 auto; order: -1;
    /* `--rot-flaeche`/`--text-auf-rot`, NICHT `--rot` mit Weiss.
       `--rot` ist eine SCHRIFTfarbe auf hellem Grund; im Dunkeln wird
       sie hell (#F08A8A), und Weiss darauf ergibt 2,41:1 - die Warnung
       war ausgerechnet dort nicht zu lesen, wo sie hingehoert. Das Haus
       hat fuer gefuellte Flaechen laengst ein eigenes Paar; diese Stelle
       benutzte es nur nicht. Hell 6,57:1, dunkel 9,6:1. */
    background: var(--rot-flaeche); color: var(--text-auf-rot);
    text-align: center;
    padding: var(--raum-2); font-size: var(--schrift-s); font-weight: 650;
}

/* --- Seitenhinweis -----------------------------------------------------
   Der Platz für abgelehnte Anfragen. Wie die Verbindungswarnung als erste
   Zeile im Fluss statt über allem - dort verdeckte sie den Zurück-Pfeil.

   `:empty` statt `hidden`: HTMX tauscht hier den INHALT aus und fasst
   Attribute nicht an. Ein Feld, das sich per `hidden` versteckt, bliebe
   nach dem Austausch unsichtbar - der Hinweis wäre da und niemand sähe
   ihn. So verschwindet es genau dann, wenn nichts drinsteht. */
.seitenhinweis:empty { display: none; }

/* SOBALD ETWAS DRINSTEHT, LIEGT ER GANZ OBEN.

   Im Fluss allein genuegt nicht: `.zahlflaeche` (das Blatt fuer Karte,
   Gutschein, Anschreiben) ist `position: fixed; inset: 0` mit
   `z-index: var(--z-blatt)` und deckt den ganzen Bildschirm. Ein
   Fehlerhinweis darunter ist da - und niemand sieht ihn. An der Kasse,
   im Vollbild, waere das genau der Moment, in dem man ihn braucht.

   Warum das hier anders entschieden ist als bei `.verbindungswarnung`:
   Die kann lange stehen bleiben und wuerde dann dauerhaft den
   Zurueck-Pfeil verdecken - deshalb liegt sie im Fluss. Dieses Feld ist
   nur da, solange ein Fehler ansteht, und `verbindung.js` raeumt es beim
   naechsten geglueckten Zugriff ab. Es verdeckt also genau so lange
   etwas, wie es etwas zu sagen hat. */
.seitenhinweis:not(:empty) {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: calc(var(--z-blatt) + 10);
}
.seitenhinweis {
    flex: 0 0 auto; order: -1;
    /* Dieselben Paare wie die Verbindungswarnung - `--rot` ist eine
       SCHRIFTfarbe und wird im Dunkeln hell; Weiss darauf ergibt 2,41:1. */
    background: var(--rot-flaeche); color: var(--text-auf-rot);
}
.seitenhinweis .hinweis {
    margin: 0; border: 0; background: none; color: inherit;
    text-align: center; padding: var(--raum-2);
    font-size: var(--schrift-s); font-weight: 650;
}

/* --- Symbole ----------------------------------------------------------
   Ein eigener SVG-Satz statt Emoji: Emoji sehen auf jedem Betriebssystem
   anders aus, lassen sich nicht einfärben, und ein Screenreader liest
   „Quittung" vor jedem Namen. */
.symbol {
    width: 24px; height: 24px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.15em;
}

/* =====================================================================
   ARBEITSBILDSCHIRM
   ===================================================================== */

/* Der nächste Schritt – der größte Knopf auf der Seite. Wer neu davorsteht,
   soll ihn finden, ohne zu lesen. */
.naechster-schritt {
    display: flex; align-items: center; gap: var(--raum-5);
    flex-wrap: wrap;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-left: 4px solid var(--akzent);
    border-radius: var(--rund-l); padding: var(--raum-5);
    box-shadow: var(--schatten-1); margin-bottom: var(--raum-6);
}
.naechster-schritt.faellig { border-left-color: var(--gelb); }
.naechster-schritt .text { flex: 1; min-width: 15rem; }
.naechster-schritt .was {
    font-size: var(--schrift-xs); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 650; color: var(--text-leise);
}
.naechster-schritt .titel {
    font-size: var(--schrift-l); font-weight: 680; margin-top: var(--raum-1);
}
.naechster-schritt .nebenbei { margin-bottom: 0; }

/* Hinweiszeilen sind Wege, keine Meldungen – deshalb Links mit Pfeil. */
.hinweiszeile { color: inherit; text-decoration: none; }
.hinweiszeile > .symbol { flex: 0 0 22px; width: 22px; height: 22px;
                          color: var(--text-leise); }
.hinweiszeile.warnung > .symbol { color: var(--gelb); }
.hinweiszeile.fehler  > .symbol { color: var(--rot); }
.hinweiszeile .pfeil { width: 18px; height: 18px; color: var(--text-leise);
                       flex: 0 0 18px; }
.hinweiszeile:hover .pfeil { color: var(--akzent); }

.nur-handy { display: block; }
@media (min-width: 900px) { .nur-handy { display: none; } }

/* =====================================================================
   GEFÜHRTER ABLAUF (Tagesabschluss)
   ===================================================================== */
.schritte {
    display: flex; flex-wrap: wrap; gap: var(--raum-2);
    list-style: none; padding: 0; margin: 0 0 var(--raum-5);
}
.schritte li {
    display: flex; align-items: center; gap: var(--raum-2);
    padding: var(--raum-2) var(--raum-3);
    border-radius: var(--rund-voll);
    background: var(--flaeche); border: 1px solid var(--rand);
    font-size: var(--schrift-s); color: var(--text-leise);
}
.schritte .nummer {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--rund-voll);
    background: var(--flaeche-hoch); color: var(--text-leise);
    display: grid; place-items: center;
    font-size: var(--schrift-xs); font-weight: 700;
}
.schritte li.jetzt {
    background: var(--akzent); border-color: var(--akzent);
    color: var(--text-auf-akzent); font-weight: 650;
}
.schritte li.jetzt .nummer { background: rgba(255,255,255,.25);
                             color: var(--text-auf-akzent); }
.schritte li.fertig { border-color: var(--gruen); color: var(--gruen-tief); }
.schritte li.fertig .nummer { background: var(--gruen-zart); color: var(--gruen-tief); }

/* Das Ergebnis der Zählung – EIN Wort, groß. „−3,40 €" allein sagt
   niemandem, ob das schlimm ist. */
.ergebniskopf { text-align: center; padding: var(--raum-5) 0 var(--raum-4); }
.ergebniskopf .wort {
    font-size: var(--schrift-xs); text-transform: uppercase;
    letter-spacing: .1em; font-weight: 700;
}
.ergebniskopf .betrag {
    font-size: 3rem; font-weight: 700; line-height: 1.1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    margin: var(--raum-2) 0;
}
.ergebniskopf .nebenbei { margin: 0 auto; }
.ergebniskopf.gut     .wort, .ergebniskopf.gut     .betrag { color: var(--gruen); }
.ergebniskopf.warnung .wort, .ergebniskopf.warnung .betrag { color: var(--gelb); }
.ergebniskopf.fehler  .wort, .ergebniskopf.fehler  .betrag { color: var(--rot); }

/* --- Wochenplan -------------------------------------------------------
   Sieben Spalten am Rechner, senkrecht gestapelt am Handy. Kein
   waagerechtes Scrollen: Ein Plan, den man schieben muss, wird nicht
   gelesen. */
.wochenraster {
    display: grid; gap: var(--raum-3);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    margin: var(--raum-5) 0;
}
.plantag {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--rund-m); padding: var(--raum-3);
    display: flex; flex-direction: column; gap: var(--raum-2);
}
.plantag.heute { border-color: var(--akzent); box-shadow: var(--schatten-1); }
/* Ein geschlossener Tag muss sich vom Rest unterscheiden, OHNE die
   Schichten unlesbar zu machen: Man will ja gerade sehen, wen es trifft.
   Deshalb ein anderer Grund und ein Hinweis obendrauf – kein Ausgrauen. */
.plantag.zu { background: var(--flaeche-tief); border-style: dashed; }
.plangeschlossen {
    display: flex; align-items: flex-start; gap: var(--raum-2);
    font-size: var(--schrift-s); color: var(--text-leise); margin: 0;
}
.plangeschlossen .symbol { width: 18px; height: 18px; flex: 0 0 18px;
                           margin-top: 2px; }

.plankopf { display: flex; justify-content: space-between; align-items: baseline;
            gap: var(--raum-2); border-bottom: 1px solid var(--rand);
            padding-bottom: var(--raum-2); }
.plankopf .tagname { font-weight: 700; }
.plankopf .tagdatum { font-size: var(--schrift-xs); color: var(--text-leise); }
.planliste { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: var(--raum-2); }
.planzeile {
    background: var(--flaeche-hoch); border-radius: var(--rund-s);
    padding: var(--raum-2); font-size: var(--schrift-s);
    border-left: 3px solid var(--akzent);
}
.planzeile.offen { border-left-color: var(--gelb); }
/* Abwesenheit als UEBERLAGERUNG: Der Planeintrag bleibt stehen und gilt
   naechste Woche wieder - nur der farbige Balken sagt, was diese Woche los
   ist. Rot heisst "hier fehlt jemand und niemand ist eingesprungen"; das ist
   die einzige Zeile, bei der jemand handeln muss. */
.planzeile.faellt-aus { border-left-color: var(--rot); }
.planzeile.gedeckt    { border-left-color: var(--gruen); }
/* Die ausgefallene Person durchgestrichen: Der Name muss lesbar bleiben
   (wessen Schicht war es), darf aber nicht wie eine gueltige Einteilung
   aussehen. */
.planzeile.faellt-aus .planwer,
.planzeile.gedeckt .planwer > :first-child { text-decoration: line-through; }
.planzeile.faellt-aus .marke,
.planzeile.gedeckt .marke,
.planzeile.faellt-aus .u,
.planzeile.gedeckt .u { text-decoration: none; }
.planzeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.planwer { color: var(--text-leise); }
.planwer .u { display: block; font-size: var(--schrift-xs); }
.planhandlung { display: flex; gap: var(--raum-1); flex-wrap: wrap;
                margin-top: var(--raum-1); }
.planleer { color: var(--text-leise); font-size: var(--schrift-xs);
            font-style: italic; margin: 0; }