/* ==========================================================================
   Spänezähler · Gestaltung

   **Die Farben sind die des Hauses, nicht selbst gewählte.** Sie stammen
   zeichengleich aus dem CI der Schreinerei Benz
   (`entwurfsplattform/frontend/src/ci/stil.css`), das seinerseits aus dem
   abgestimmten Mockup kommt. Beide Anwendungen laufen nebeneinander, und wer
   von der einen zur anderen wechselt, soll nicht das Gefühl haben, den
   Betrieb gewechselt zu haben.

   Übernommen sind die Tokens, nicht die Technik: Die Entwurfsplattform nutzt
   Tailwind, hier stehen die Werte unmittelbar. Ein zweites Framework für acht
   Seiten wäre Last ohne Ertrag.

   **Für das Handy gebaut, nicht dafür angepasst.** Neun von vierzehn tragen
   am Handy ein, oft mit einer Hand und mit Späne an den Fingern. Deshalb:
   große Flächen zum Antippen, wenig auf einem Bildschirm, und keine Bedienung,
   die Zielgenauigkeit verlangt.
   ========================================================================== */

:root {
    /* --- CI Schreinerei Benz, Werte unverändert -------------------------- */
    --greige:      #eae6de;   /* Grundfläche, warm */
    --greige-tief: #dfd9ce;
    --papier:      #f6f4ef;   /* Karten */
    --tinte:       #2c2924;   /* Text */
    --tinte-60:    #6f6a61;
    --benz-grau:   #696969;   /* Logo-Grau */
    --braun:       #6b4f3a;   /* Wortmarke */
    --gruen:       #94c31d;   /* Akzent, sparsam */
    --gruen-tief:  #7ba315;
    --eiche:       #b08d5f;   /* Holzton */
    --linie:       #cfc8ba;
    --weiss:       #ffffff;

    /* --- Für Meldungen abgeleitet ---------------------------------------
       Das CI kennt kein Rot und kein Warngelb; es ist auf Ruhe angelegt.
       Eine Anwendung, die Fehler meldet, braucht beides. Die Töne sind
       deshalb aus der Palette heraus gemischt, nicht daneben gestellt:
       gedämpft, warm, und im selben Grauwert. */
    --rot:         #9b3b28;
    --rot-hell:    #f7e8e3;
    --gelb-hell:   #f5eeda;
    --gruen-hell:  #eef4dc;

    --rand:        10px;
    --luft:        16px;
    /* Fingerkuppe, nicht Mauszeiger. Alles zum Antippen ist mindestens so
       groß; darunter trifft niemand mit Arbeitshandschuhen. */
    --tippflaeche: 48px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    /* Inter ist die CI-Schrift, wird aber **nicht nachgeladen**: Ein
       Webfont von einem fremden Server überträgt bei jedem Aufruf die
       IP-Adresse des Mitarbeiters dorthin, und das ist ohne Not nicht zu
       rechtfertigen (LG München, 20.01.2022, 3 O 17493/20). Wer Inter
       installiert hat, bekommt es; alle anderen die Systemschrift, die ihr
       sehr ähnlich ist und auf dem Handy nativ aussieht. */
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* 17px statt 16: Der Unterschied ist auf einem Handy in der Werkstatt
       deutlich spürbar, am Bildschirm kaum. */
    font-size: 17px;
    line-height: 1.5;
    color: var(--tinte);
    background: var(--greige);
    padding-bottom: 90px;   /* Platz für die Fußleiste */
}

/* --- Kopf ------------------------------------------------------------- */
header {
    background: var(--braun);
    color: var(--weiss);
    padding: 14px var(--luft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}

header .marke { display: flex; align-items: center; gap: 10px; }
/* Weiß auf Braun: Das Logo ist dunkel, deshalb wird es hier aufgehellt.
   Eine eigene weiße Fassung wäre sauberer; solange es die nicht gibt, ist
   dies die Lösung, die ohne zweite Datei auskommt. */
header .logo { height: 26px; width: auto; filter: brightness(0) invert(1); }
header .titel { font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; }
header a { color: var(--weiss); text-decoration: none; }
header .wer { font-size: 0.85rem; opacity: 0.85; }

main { padding: var(--luft); max-width: 760px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 28px 0 10px; }
p  { margin: 0 0 12px; }

.leise { color: var(--tinte-60); font-size: 0.9rem; }

/* --- Karten ----------------------------------------------------------- */
.karte {
    background: var(--papier);
    border-radius: var(--rand);
    padding: var(--luft);
    margin-bottom: 14px;
    border: 1px solid var(--linie);
}

/* Die Ränder sind je ein Schritt kräftiger als die Fläche, damit die Karte
   ihren Umriss behält, ohne laut zu werden. */
.karte.gut    { background: var(--gruen-hell); border-color: #cfdda0; }
.karte.warn   { background: var(--gelb-hell);  border-color: #ddc98f; }
.karte.fehler { background: var(--rot-hell);   border-color: #dcb2a5; }

.spruch {
    font-size: 1.15rem;
    line-height: 1.45;
    font-style: italic;
}
.spruch + .quelle { color: var(--tinte-60); font-size: 0.85rem; font-style: normal; }

/* --- Zahlen ----------------------------------------------------------- */
.zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.zahl {
    flex: 1 1 130px;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rand);
    padding: 12px;
}
.zahl .wert { font-size: 1.5rem; font-weight: 600; }
.zahl .name { color: var(--tinte-60); font-size: 0.82rem; }
.wert.plus  { color: var(--gruen); }
.wert.minus { color: var(--rot); }

/* --- Formulare -------------------------------------------------------- */
label { display: block; font-weight: 600; margin: 14px 0 5px; }
label .hinweis { font-weight: 400; color: var(--tinte-60); font-size: 0.85rem; }

input, select, textarea {
    width: 100%;
    min-height: var(--tippflaeche);
    padding: 10px 12px;
    font-size: 17px;   /* unter 16px zoomt iOS beim Antippen hinein */
    font-family: inherit;
    color: var(--tinte);
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rand);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--eiche);
    outline-offset: 1px;
}

.zeile { display: flex; gap: 10px; }
.zeile > * { flex: 1; }

/* --- Knöpfe ----------------------------------------------------------- */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--tippflaeche);
    margin-top: 18px;
    padding: 12px 18px;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    color: var(--weiss);
    background: var(--braun);
    border: none;
    border-radius: var(--rand);
    cursor: pointer;
    text-decoration: none;
}
.knopf:active { background: var(--eiche); }
.knopf.zweit {
    color: var(--braun);
    background: var(--papier);
    border: 2px solid var(--braun);
}
.knopf.gefahr { background: var(--rot); }
.knopf:disabled { background: var(--linie); color: var(--tinte-60); cursor: default; }

/* --- Meldungen -------------------------------------------------------- */
.meldung {
    padding: 12px 14px;
    border-radius: var(--rand);
    margin-bottom: 14px;
    border-left: 5px solid;
}
.meldung.gut    { background: var(--gruen-hell); border-color: var(--gruen); }
.meldung.warn   { background: var(--gelb-hell);  border-color: #c9971f; }
.meldung.fehler { background: var(--rot-hell);   border-color: var(--rot); }
.meldung ul { margin: 6px 0 0; padding-left: 20px; }

/* --- Zustandsabzeichen ------------------------------------------------ */
/* Kleines Schild hinter einem Namen: „noch nicht eingeloggt", „stillgelegt".
   Bewusst mit Wort und nicht nur mit Farbe: Etwa jeder zwölfte Mann sieht Rot
   und Grün nicht auseinander, und in einer Personenliste hinge daran, ob
   jemand seinen Zugang noch bekommen muss. Die Farbe ist die Zugabe, das Wort
   die Aussage. */
.zustand {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid;
}
.zustand.gut  { background: var(--gruen-hell); border-color: #cfdda0; }
.zustand.warn { background: var(--gelb-hell);  border-color: #ddc98f; }
.zustand.grau { background: var(--greige-tief); border-color: var(--linie);
                color: var(--tinte-60); }

/* --- Listen ----------------------------------------------------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rand);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.liste a { color: inherit; text-decoration: none; flex: 1; }
.liste .neben { color: var(--tinte-60); font-size: 0.85rem; }

/* Ein Tag im Monatsblatt. */
.tag { display: flex; justify-content: space-between; gap: 10px;
       padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.tag:last-child { border-bottom: none; }
.tag.frei   { background: var(--greige-tief); color: var(--tinte-60); }
.tag.fehlt  { background: var(--rot-hell); }
.tag .datum { min-width: 92px; font-variant-numeric: tabular-nums; }
.tag .std   { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Fortschritt ------------------------------------------------------ */
.balken {
    height: 10px;
    background: var(--linie);
    border-radius: 5px;
    overflow: hidden;
    margin: 8px 0;
}
.balken > div { height: 100%; background: var(--gruen); }

/* --- Fußleiste -------------------------------------------------------- */
/* Unten, weil der Daumen dort hinkommt. Oben wäre sie bei einem großen
   Handy einhändig nicht erreichbar. */
nav.fuss {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    background: var(--papier);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
}
nav.fuss a {
    flex: 1;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    font-size: 0.72rem;
    color: var(--tinte-60);
    text-decoration: none;
}
nav.fuss a.hier { color: var(--braun); font-weight: 600; }
nav.fuss .zeichen { font-size: 1.35rem; line-height: 1; }

/* --- Anmeldung -------------------------------------------------------- */
.anmeldung {
    max-width: 400px;
    margin: 8vh auto;
    padding: var(--luft);
}
.anmeldung h1 { font-size: 1.8rem; text-align: center; margin-bottom: 4px; }
.anmeldung .unterzeile { text-align: center; color: var(--tinte-60);
                         margin-bottom: 24px; }

/* --- Größerer Bildschirm ---------------------------------------------- */
/* Samuel und Michael sitzen am Rechner. Die Fußleiste wandert dann nach
   oben, weil dort kein Daumen ist, sondern ein Mauszeiger. */
@media (min-width: 760px) {
    body { padding-bottom: 20px; }
    nav.fuss {
        position: static;
        max-width: 760px;
        margin: 0 auto;
        border-top: none;
        border-bottom: 1px solid var(--linie);
        background: transparent;
    }
    nav.fuss a { flex-direction: row; gap: 8px; font-size: 0.95rem; }
    .zeile.breit { display: flex; }
}

/* --- Drucken ---------------------------------------------------------- */
@media print {
    header, nav.fuss, .knopf { display: none; }
    body { background: var(--papier); padding: 0; }
    .karte { border: none; padding: 0; }
}