/* Portal-Design, zweiter Anlauf (03.10.2026).
 *
 * Florian zum ersten Entwurf: „Gefällt mir nicht wirklich. Ist das modernes
 * App Design?" Nein. Es war ein Stapel gleich schwerer Kästen mit
 * Chevrons — ein Einstellungsmenü, keine App. Das Auge wusste nicht, wo
 * es hinsoll, weil alles gleich aussah.
 *
 * Was sich ändert, und warum:
 *
 * 1. Hierarchie statt Kästen. Der Projekttitel ist groß, Abschnitte sind
 *    Überschriften mit Luft darum, Inhalte sind Zeilen mit Haarlinien.
 *    Keine Rahmen in Rahmen mehr.
 * 2. Eine Akzentfarbe, gedämpft, wie in WorkZechnik (Schieferblau statt
 *    knalligem Blau). Status als farbiger Punkt plus Text, nicht als
 *    Pastell-Pillen in fünf Tönen.
 * 3. Kennzahlen oben: drei Kacheln sagen auf einen Blick, was ansteht,
 *    und springen zum Abschnitt. Das ist das Muster, das moderne Apps
 *    benutzen, und das WorkZechniks Dashboard auch hat.
 * 4. Die eine Hauptaktion je Abschnitt ist ein großer, runder Knopf. Alles
 *    Zweitrangige ist Text.
 * 5. Felder ohne harte Rahmen, mit weichem Hintergrund und Fokusring.
 *
 * Kein npm, kein Build: Variablen hier, Bindung im Tailwind-Play-CDN in
 * base.html. Semantische Namen (bg, card, fg, line, primary …), damit kein
 * Template ein `dark:`-Präfix braucht.
 */

:root {
  --bg: 210 20% 98%;
  --card: 0 0% 100%;
  --fg: 220 15% 14%;
  --fg-muted: 215 10% 46%;
  --line: 210 14% 90%;
  --input: 210 16% 95%;
  --primary: 215 38% 36%;
  --primary-fg: 0 0% 100%;
  --ok: 152 50% 36%;
  --warn: 32 80% 42%;
  --bad: 0 65% 46%;
  --chip: 210 14% 92%;
  --chip-fg: 220 15% 32%;
}

.dark {
  --bg: 220 15% 10%;
  --card: 220 15% 13%;
  --fg: 210 15% 93%;
  --fg-muted: 215 10% 60%;
  --line: 220 12% 20%;
  --input: 220 12% 17%;
  --primary: 215 60% 62%;
  --primary-fg: 220 15% 10%;
  --ok: 152 45% 50%;
  --warn: 35 75% 58%;
  --bad: 0 62% 60%;
  --chip: 220 12% 19%;
  --chip-fg: 210 15% 85%;
}

html, body { background-color: hsl(var(--bg)); color: hsl(var(--fg)); }

body {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Platz für die Tab-Bar unten, inklusive iPhone-Home-Indikator */
.mit-tabbar { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* --- Felder ------------------------------------------------------------ */
/* 16px, damit iOS beim Fokus nicht hineinzoomt. Weicher Hintergrund statt
 * Rahmen: ein Formular mit zwölf umrandeten Kästen sieht nach Behörde aus. */
input, select, textarea {
  background-color: hsl(var(--input));
  color: hsl(var(--fg));
  border: 1px solid transparent;
  border-radius: .75rem;
  font-size: 16px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: hsl(var(--primary) / .5);
  box-shadow: 0 0 0 3px hsl(var(--primary) / .12);
}
input::placeholder, textarea::placeholder { color: hsl(var(--fg-muted)); }
input[type="checkbox"] { border-radius: .35rem; }

/* --- Abschnitte als Klappen -------------------------------------------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chevron { transform: rotate(90deg); }
.chevron { transition: transform .15s ease; }

/* Ein Abschnitt: Überschrift mit Luft, Inhalt darunter, Haarlinie oben.
 * Keine Kiste. */
.abschnitt { border-top: 1px solid hsl(var(--line)); }
.abschnitt > summary { padding: .9rem 0; }
.abschnitt > summary .titel { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }

/* Zeilen in einem Abschnitt: Haarlinien, kein Rahmen. */
.zeilen > * + * { border-top: 1px solid hsl(var(--line) / .7); }

/* --- Kennzahl-Kacheln ---------------------------------------------------- */
.kachel {
  display: block;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--line) / .6);
  border-radius: 1rem;
  padding: .7rem .85rem;
  transition: border-color .15s ease, transform .15s ease;
}
.kachel:active { transform: scale(.98); }
.kachel .zahl { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kachel .label { font-size: .7rem; color: hsl(var(--fg-muted)); margin-top: .15rem; }
/* Vier Kacheln nebeneinander (Chef-Ansicht): engere Polsterung und kleinere
 * Schrift, damit "zu bestellen" nicht umbricht und die Kacheln gleich hoch
 * bleiben. Ungleich hohe Kacheln sehen nach Fehler aus. */
.grid-cols-4 > .kachel { padding: .6rem .5rem; }
.grid-cols-4 > .kachel .zahl { font-size: 1.3rem; }
.grid-cols-4 > .kachel .label {
  font-size: .64rem; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 1.5em;
}
.kachel.aktiv { border-color: hsl(var(--primary) / .35); }

/* --- Status als Punkt ---------------------------------------------------- */
.punkt { width: .55rem; height: .55rem; border-radius: 9999px; display: inline-block; flex: none; }
.punkt-geplant    { background: hsl(var(--chip-fg) / .5); }
.punkt-in_arbeit  { background: hsl(var(--primary)); }
.punkt-wartet     { background: hsl(var(--warn)); }
.punkt-fertig     { background: hsl(var(--ok)); }
.punkt-abgenommen { background: hsl(var(--fg-muted) / .6); }

/* --- Knöpfe -------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .9rem; padding: .8rem 1rem; font-weight: 600; font-size: .95rem;
  background: hsl(var(--primary)); color: hsl(var(--primary-fg));
  transition: filter .15s ease, transform .1s ease;
}
.knopf:active { transform: scale(.98); filter: brightness(.95); }
.knopf-leise {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: .9rem; padding: .7rem 1rem; font-weight: 500; font-size: .9rem;
  background: hsl(var(--chip)); color: hsl(var(--chip-fg));
}
.knopf-klein {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: .3rem .7rem; font-size: .75rem; font-weight: 600;
  background: hsl(var(--chip)); color: hsl(var(--chip-fg));
}

/* --- Auswahl-Chips (Raum) ------------------------------------------------ */
/* Ein verstecktes Radio, ein sichtbarer Chip. Auf dem Handy ist ein Tipp
 * auf „Küche" schneller als ein Auswahlfeld mit Rad. */
.chip { display: inline-block; }
.chip > input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip > span {
  display: inline-block; border-radius: 9999px; padding: .4rem .8rem;
  font-size: .85rem; font-weight: 500;
  background: hsl(var(--chip)); color: hsl(var(--chip-fg));
  transition: background .12s ease, color .12s ease;
}
.chip > input:checked + span { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.chip > input:focus-visible + span { box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }

/* --- Bewegung ------------------------------------------------------------ */
@keyframes einblenden { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.einblenden { animation: einblenden .22s ease-out both; }

/* Aufnahme läuft: ruhiges Pulsieren statt Blinken */
@keyframes pulsieren { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.aufnahme { animation: pulsieren 1.4s ease-in-out infinite; }

/* --- Monteur-Ansicht: grosse Aktionen ----------------------------------- */
/* Was alle Handwerker-Apps gemeinsam haben (Recherche 03.10.2026): wenige
 * grosse Tippziele, lesbar im Sonnenlicht, mit Handschuhen zu treffen. Vier
 * Knoepfe im Raster, jeder so hoch wie ein Daumen breit ist. */
.aktion {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; min-height: 5.5rem; border-radius: 1.1rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--line) / .7);
  color: hsl(var(--fg)); font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: transform .1s ease, border-color .15s ease;
}
.aktion:active { transform: scale(.97); border-color: hsl(var(--primary) / .5); }
.aktion svg { width: 1.75rem; height: 1.75rem; color: hsl(var(--primary)); }
.aktion-primaer { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.aktion-primaer svg { color: hsl(var(--primary-fg)); }

/* Kleine Variante fuer die Chef-Ansicht: am Schreibtisch zaehlt Platz mehr
 * als Tippflaeche, die Seite darunter soll sichtbar bleiben. Trotzdem 44px
 * hoch — auch der Chef steht manchmal auf der Baustelle. */
.aktion-klein {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; min-height: 3.6rem; border-radius: .9rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--line) / .7);
  color: hsl(var(--fg)); font-size: .78rem; font-weight: 600; cursor: pointer;
  text-align: center; line-height: 1.1;
  transition: transform .1s ease, border-color .15s ease;
}
.aktion-klein:active { transform: scale(.97); border-color: hsl(var(--primary) / .5); }
.aktion-klein svg { width: 1.2rem; height: 1.2rem; color: hsl(var(--primary)); }

/* Mannschaftszeile: Name links, Zahlen rechts, beides einzeilig. */
.mann-zahl {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  background: hsl(var(--chip)); color: hsl(var(--chip-fg));
}
.mann-zahl.offen { background: hsl(var(--primary) / .15); color: hsl(var(--primary)); }
/* Zahl auf der Kachel: wie viele Aufgaben offen sind, ohne die Seite
 * aufzuklappen. Position relativ zur Kachel, deshalb `position: relative`. */
.aktion { position: relative; }
.aktion-zahl {
  position: absolute; top: .5rem; right: .5rem;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-size: .75rem; font-weight: 700;
  background: hsl(var(--primary)); color: hsl(var(--primary-fg));
}
.aktion-primaer .aktion-zahl { background: hsl(var(--primary-fg)); color: hsl(var(--primary)); }

/* --- Blatt (Wizard, Fehlteil, Stunden) ---------------------------------- */
/* Auf dem Handy ein Blatt von unten, am Rechner eine Karte.
 *
 * Hoehe: `--sichtbar` kommt aus `visualViewport` (base.html) und schrumpft,
 * wenn die Tastatur aufgeht. Ohne das liegt der untere Teil des Blattes
 * hinter der Tastatur — am 03.10.2026 waren so die Geraeteliste und der
 * Eintragen-Knopf unerreichbar. `dvh` als Rueckfall fuer Browser ohne
 * visualViewport.
 */
/* ACHTUNG `[open]`: ein <dialog> ohne dieses Attribut versteckt nur das
 * Browser-Standard-Stylesheet (`dialog:not([open]) { display: none }`), und
 * Autoren-CSS schlaegt das immer. Ein unqualifiziertes `display: flex` liess
 * das Blatt am 03.10.2026 dauerhaft am unteren Rand stehen: Kopfzeile
 * sichtbar, Koerper leer (kein Schritt `aktiv`), X ohne Wirkung (weil
 * `dlg.open` false war). Die Regel darf nie wieder ohne `[open]` stehen,
 * `tests/test_css_dialog.py` haelt das fest. */
dialog.wizard:not([open]) { display: none; }
dialog.wizard {
  border: 0; padding: 0; width: min(100vw, 32rem); max-width: 100vw;
  background: hsl(var(--card)); color: hsl(var(--fg));
  box-shadow: 0 -10px 44px hsl(220 20% 3% / .5);
}
dialog.wizard[open] {
  /* Ein Blatt, das zwischen den Schritten die Hoehe wechselt, wirkt
   * unruhig — deshalb eine feste Spanne statt Inhaltshoehe. */
  display: flex; flex-direction: column;
  min-height: min(26rem, 60dvh);
  max-height: calc(var(--sichtbar, 100dvh) * .92);
}
dialog.wizard::backdrop { background: hsl(220 20% 4% / .72); }

@media (max-width: 40rem) {
  dialog.wizard {
    position: fixed; inset: auto 0 0 0; margin: 0;
    border-radius: 1.5rem 1.5rem 0 0;
  }
}
@media (min-width: 40rem) {
  dialog.wizard { margin: auto; border-radius: 1.5rem; }
}

/* Griff: zeigt, dass es ein Blatt ist. */
.wizard-griff {
  flex: none; width: 2.5rem; height: .3rem; border-radius: 9999px;
  background: hsl(var(--line)); margin: .55rem auto .15rem;
}
@media (min-width: 40rem) { .wizard-griff { display: none; } }

.wizard-kopf {
  display: flex; align-items: center; gap: .5rem; flex: none;
  padding: .5rem .75rem .6rem; border-bottom: 1px solid hsl(var(--line));
}
.wizard-kopf .mitte { flex: 1; min-width: 0; }
.wizard-kopf .titel-klein {
  display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wizard-kopf .pfad {
  display: block; font-size: .75rem; color: hsl(var(--fg-muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Runde Tippziele links und rechts, 44px wie es sich gehoert. */
.wizard-rund {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--chip)); color: hsl(var(--chip-fg));
}
.wizard-rund svg { width: 1.15rem; height: 1.15rem; }
.wizard-rund:active { transform: scale(.94); }
.wizard-rund[hidden] { visibility: hidden; display: inline-flex; }

.wizard-schritt { display: none; }
.wizard-schritt.aktiv {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  padding: .9rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wizard-titel {
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em;
  margin-bottom: .9rem; flex: none;
}

/* Raum-Chips: grosse Tippziele */
.chip-knopf {
  border-radius: 9999px; padding: .65rem 1.1rem; font-size: 1rem; font-weight: 500;
  background: hsl(var(--chip)); color: hsl(var(--chip-fg));
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.chip-knopf:active { transform: scale(.97); }
.chip-knopf.aktiv { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }

/* Geraeteliste: Suchfeld bleibt stehen, Liste scrollt darunter. */
.wiz-suchfeld { flex: none; position: sticky; top: 0; z-index: 1;
                background: hsl(var(--card)); padding-bottom: .6rem; }
.wiz-liste { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
             margin: 0 -1.1rem; }
.wiz-liste li + li { border-top: 1px solid hsl(var(--line) / .7); }
.wiz-liste button {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; text-align: left; padding: .95rem 1.1rem; font-size: 1rem;
}
.wiz-liste button:active { background: hsl(var(--primary) / .1); }
.wiz-liste button svg { width: 1rem; height: 1rem; color: hsl(var(--fg-muted)); flex: none; }
.wiz-leer { padding: 1.2rem 1.1rem; color: hsl(var(--fg-muted)); font-size: .95rem; }