/* ug-web — Sonderreinigungen (Rado Facility)
 *
 * Nutzungssituation, aus der jede Entscheidung hier folgt: Bright steht im
 * Treppenhaus, Handy in einer Hand, Handschuhe halb aus, oft Neonlicht oder
 * Gegenlicht am Fenster. Daraus folgen: sehr hoher Textkontrast, Touch-Ziele
 * ab 44 px, eine Handlung je Bildschirm, keine Dekoration.
 *
 * Farbstrategie: zurückhaltend. Der Akzent (Stahlblau) markiert nur Aktionen
 * und Auswahl. Grün/Gelb/Rot sind für die Ampel reserviert und dürfen deshalb
 * nirgends dekorativ auftauchen — sonst verliert die Ampel ihre Bedeutung.
 */

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

:root {
  color-scheme: light dark;

  --grund: oklch(0.975 0.004 240);
  --flaeche: oklch(1 0 0);
  --flaeche-2: oklch(0.945 0.006 240);
  --flaeche-still: oklch(0.955 0.005 240);
  --rand: oklch(0.885 0.008 240);
  --rand-stark: oklch(0.78 0.012 240);

  --text: oklch(0.24 0.015 250);
  --text-leise: oklch(0.45 0.014 250);

  --akzent: oklch(0.47 0.11 235);
  --akzent-klar: oklch(0.99 0 0);
  --akzent-flaeche: oklch(0.955 0.022 235);

  --gruen: oklch(0.42 0.11 155);
  --gruen-flaeche: oklch(0.955 0.032 155);
  --gelb: oklch(0.44 0.10 70);
  --gelb-flaeche: oklch(0.955 0.045 85);
  --rot: oklch(0.44 0.16 28);
  --rot-flaeche: oklch(0.955 0.030 28);

  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px oklch(0.24 0.015 250 / 0.07),
              0 1px 8px oklch(0.24 0.015 250 / 0.05);

  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;

  --ziel: 44px;                    /* Touch-Ziel, Apple HIG / WCAG 2.5.5 */
  --tempo: 160ms;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);

  --z-leiste: 20;
  --z-melde: 40;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: oklch(0.185 0.012 250);
    --flaeche: oklch(0.235 0.013 250);
    --flaeche-2: oklch(0.21 0.012 250);
    --flaeche-still: oklch(0.275 0.013 250);
    --rand: oklch(0.33 0.014 250);
    --rand-stark: oklch(0.45 0.016 250);

    --text: oklch(0.955 0.004 250);
    --text-leise: oklch(0.755 0.012 250);

    --akzent: oklch(0.76 0.10 235);
    --akzent-klar: oklch(0.18 0.02 250);
    --akzent-flaeche: oklch(0.30 0.045 235);

    --gruen: oklch(0.83 0.13 155);
    --gruen-flaeche: oklch(0.30 0.05 155);
    --gelb: oklch(0.85 0.13 85);
    --gelb-flaeche: oklch(0.31 0.05 75);
    --rot: oklch(0.78 0.14 28);
    --rot-flaeche: oklch(0.31 0.07 28);

    --schatten: 0 1px 2px oklch(0 0 0 / 0.4), 0 1px 8px oklch(0 0 0 / 0.3);
  }
}

/* ------------------------------------------------------------------ Grund */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* scrollIntoView (Tastatur-Fokus, Sprungmarken, Automation) muss die fixe
     Tab-Leiste einrechnen — sonst landet der Zielknopf UNTER der Leiste
     (E2E-Befund 11.08.: „Meldung senden" war nicht antippbar). */
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Platz für Tab-Leiste + iPhone-Homebar; mit sichtbarer Warteschlangen-Leiste
     kommen deren 36 px dazu, sonst verdeckt sie den letzten Knopf. */
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.375rem; letter-spacing: -0.01em; }
h2 { font-size: 1rem; }
h3 { font-size: 0.9375rem; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: var(--raum-3); top: -100px;
  z-index: var(--z-melde);
  padding: var(--raum-3) var(--raum-4);
  background: var(--akzent); color: var(--akzent-klar);
  border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 600;
}
.sprungmarke:focus { top: var(--raum-3); }

.feinheit { color: var(--text-leise); font-size: 0.8125rem; }

.abstand-oben { margin-top: var(--raum-4); }

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

.kopf {
  position: sticky; top: 0;
  z-index: var(--z-leiste);
  display: flex; align-items: center; gap: var(--raum-3);
  padding: calc(env(safe-area-inset-top) + var(--raum-2)) var(--raum-4) var(--raum-2);
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--rand);
}

.kopf-marke { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kopf-titel { font-weight: 650; font-size: 1rem; letter-spacing: -0.01em; }
.kopf-zeile2 {
  font-size: 0.75rem; color: var(--text-leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.knopf-kopf { flex: none; }
.knopf-kopf span { display: none; }
@media (min-width: 400px) { .knopf-kopf span { display: inline; } }

/* ----------------------------------------------------------------- Inhalt */

.inhalt {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--raum-4) var(--raum-4) var(--raum-6);
}
.inhalt:focus { outline: none; }

.ansicht-titel { margin-bottom: var(--raum-1); }
.ansicht-unterzeile { color: var(--text-leise); font-size: 0.875rem; margin-bottom: var(--raum-4); }

.banner {
  padding: var(--raum-3) var(--raum-4);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--rand);
}
.banner-warnung { background: var(--gelb-flaeche); color: var(--gelb); font-weight: 550; }

/* ----------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--raum-2);
  min-height: var(--ziel);
  padding: 0 var(--raum-4);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.knopf:hover:not(:disabled) { background: var(--flaeche-still); }
.knopf:active:not(:disabled) { transform: scale(0.985); }
.knopf:disabled { opacity: 0.5; cursor: not-allowed; }

.knopf-haupt {
  background: var(--akzent); color: var(--akzent-klar); border-color: transparent;
}
.knopf-haupt:hover:not(:disabled) { background: color-mix(in oklch, var(--akzent), var(--text) 12%); }

.knopf-still { background: transparent; border-color: transparent; color: var(--text-leise); }
.knopf-still:hover:not(:disabled) { background: var(--flaeche-still); color: var(--text); }

.knopf-breit { width: 100%; }

.knopf-klein { min-height: 36px; padding: 0 var(--raum-3); font-size: 0.8125rem; }

.knopf-zurueck {
  min-height: var(--ziel);
  padding: 0 var(--raum-3) 0 var(--raum-2);
  margin: 0 0 var(--raum-3) calc(-1 * var(--raum-2));
  background: transparent; border-color: transparent; color: var(--text-leise);
  font-weight: 550;
}
.knopf-zurueck:hover { background: var(--flaeche-still); color: var(--text); }
.pfeil { font-size: 1.5rem; line-height: 1; width: 20px; text-align: center; }

.symbol { width: 20px; height: 20px; flex: none; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.knopf-reihe > .knopf { flex: 1 1 160px; }

/* ---------------------------------------------------------------- Flächen */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--raum-4);
  box-shadow: var(--schatten);
}

.karte-mittig { text-align: center; margin-top: var(--raum-6); }
.karte-mittig h1 { margin-bottom: var(--raum-2); }
.karte-mittig p { color: var(--text-leise); margin-bottom: var(--raum-4); }
.karte-mittig .feinheit { margin-top: var(--raum-3); margin-bottom: 0; }

.marke-gross {
  width: 56px; height: 56px;
  color: var(--akzent);
  margin-bottom: var(--raum-3);
}

.hinweis { color: var(--text-leise); }
.hinweis h1 { color: var(--text); margin-bottom: var(--raum-2); }

.leer {
  text-align: center;
  padding: var(--raum-6) var(--raum-4);
  color: var(--text-leise);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
}
.leer strong { display: block; color: var(--text); margin-bottom: var(--raum-2); font-size: 1rem; }

/* ------------------------------------------------------------------ Suche */

.leiste-suche { display: flex; align-items: center; gap: var(--raum-3); margin-bottom: var(--raum-4); }

.suchfeld { position: relative; flex: 1; display: flex; align-items: center; }
.suchfeld .symbol {
  position: absolute; left: var(--raum-3);
  color: var(--text-leise); pointer-events: none;
}
.suchfeld input {
  width: 100%; min-height: var(--ziel);
  padding: 0 var(--raum-3) 0 40px;
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text);
  font: inherit;
}
.suchfeld input::placeholder { color: var(--text-leise); }

.schalter {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  min-height: var(--ziel); padding: 0 var(--raum-2);
  font-size: 0.875rem; font-weight: 550; color: var(--text-leise);
  cursor: pointer; white-space: nowrap;
}
.schalter input { width: 20px; height: 20px; accent-color: var(--akzent); }

/* --------------------------------------------------------------- Fallliste */

.gruppen { display: flex; flex-direction: column; gap: var(--raum-5); }

.gruppe-kopf {
  display: flex; align-items: baseline; gap: var(--raum-2);
  margin-bottom: var(--raum-2);
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--rand);
}
.gruppe-kopf h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe-zahl { margin-left: auto; font-size: 0.8125rem; color: var(--text-leise); flex: none; }

.falliste { display: flex; flex-direction: column; gap: var(--raum-2); list-style: none; margin: 0; padding: 0; }

.fallkarte {
  display: flex; align-items: center; gap: var(--raum-3);
  width: 100%; min-height: 60px;
  padding: var(--raum-3);
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: inherit; font: inherit;
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}
.fallkarte:hover { border-color: var(--rand-stark); background: var(--flaeche-still); }
.fallkarte:active { background: var(--flaeche-2); }

.fall-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fall-apartment { font-weight: 600; }
.fall-zeile2 { font-size: 0.8125rem; color: var(--text-leise); }
.fall-pfeil { color: var(--text-leise); flex: none; }
.fall-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); margin-top: 6px; }

.listenkopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3);
  margin-bottom: var(--raum-4);
}
.listenkopf .ansicht-unterzeile { margin: 0; }

/* Ampel: Farbe UND Text — nie Farbe allein (Rot-Grün-Schwäche, Sonnenlicht). */
.ampel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 650; white-space: nowrap;
  flex: none;
}
.ampel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ampel-gruen { background: var(--gruen-flaeche); color: var(--gruen); }
.ampel-gelb { background: var(--gelb-flaeche); color: var(--gelb); }
.ampel-rot { background: var(--rot-flaeche); color: var(--rot); }
.ampel-neutral { background: var(--flaeche-still); color: var(--text-leise); }

.chips { display: flex; flex-wrap: wrap; gap: var(--raum-1); margin-top: var(--raum-1); }
.chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rand-stark);
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-leise);
}
.chip-erledigt { border-color: transparent; background: var(--gruen-flaeche); color: var(--gruen); }

/* ---------------------------------------------------------------- Skelett */

.skelett {
  height: 62px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--flaeche-2), var(--flaeche-still), var(--flaeche-2));
  background-size: 200% 100%;
  animation: schimmer 1.4s linear infinite;
}
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ----------------------------------------------------------------- Detail */

.detail-kopf { margin-bottom: var(--raum-4); }
.detail-kopf .ampel { margin-top: var(--raum-2); }

.datenliste { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-1) var(--raum-4); margin: 0; }
.datenliste dt { color: var(--text-leise); font-size: 0.8125rem; }
.datenliste dd { margin: 0; font-size: 0.8125rem; }

.phase { margin-top: var(--raum-4); }
.phase-kopf {
  display: flex; align-items: baseline; gap: var(--raum-2);
  margin-bottom: var(--raum-3);
}
.phase-zahl { margin-left: auto; font-size: 0.8125rem; color: var(--text-leise); }

.miniaturen { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-3); list-style: none; padding: 0; }
.miniatur {
  position: relative;
  width: 72px; height: 72px;
  border-radius: var(--radius-klein);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
}
.miniatur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatur-stand {
  position: absolute; inset: auto 0 0 0;
  padding: 2px 4px;
  font-size: 0.625rem; font-weight: 650; text-align: center;
  background: oklch(0.24 0.015 250 / 0.72); color: oklch(1 0 0);
}
.miniatur-fehler .miniatur-stand { background: var(--rot); color: var(--akzent-klar); }
.miniatur-entfernen {
  position: absolute; top: 2px; right: 2px;
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: oklch(0.24 0.015 250 / 0.72); color: oklch(1 0 0);
  cursor: pointer; font-size: 14px; line-height: 1;
}

.warteposten { display: flex; flex-direction: column; gap: var(--raum-2); margin-top: var(--raum-3); }
.wartepost {
  display: flex; align-items: center; gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche-2);
  font-size: 0.8125rem;
}
.wartepost-text { flex: 1; min-width: 0; }
.wartepost-fehler { border-color: var(--rot); }
.wartepost-fehler .wartepost-text { color: var(--rot); font-weight: 550; }

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

.feld { display: block; margin-bottom: var(--raum-4); }
.feld > span { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: var(--raum-1); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: var(--ziel);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text);
  font: inherit;
}
.feld textarea { min-height: 88px; resize: vertical; }
.feld-fehler input, .feld-fehler select, .feld-fehler textarea { border-color: var(--rot); }
.feldfehler { display: block; margin-top: var(--raum-1); color: var(--rot); font-size: 0.75rem; font-weight: 550; }

.wahlliste { display: flex; flex-direction: column; gap: var(--raum-2); list-style: none; margin: 0 0 var(--raum-4); padding: 0; }
.wahl {
  display: flex; align-items: center; gap: var(--raum-3);
  width: 100%; min-height: var(--ziel);
  padding: var(--raum-3);
  text-align: left; font: inherit; color: inherit;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  cursor: pointer;
}
.wahl:hover { border-color: var(--rand-stark); }
.wahl[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-flaeche); }
.wahl-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.trenner {
  display: flex; align-items: center; gap: var(--raum-3);
  margin: var(--raum-5) 0 var(--raum-4);
  color: var(--text-leise); font-size: 0.75rem; font-weight: 600;
}
.trenner::before, .trenner::after { content: ""; height: 1px; background: var(--rand); flex: 1; }

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

.meldungsliste { display: flex; flex-direction: column; gap: var(--raum-2); list-style: none; margin: 0; padding: 0; }
.meldungskarte {
  padding: var(--raum-3);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}
.meldungskopf { display: flex; align-items: center; gap: var(--raum-2); margin-bottom: var(--raum-1); }
.meldungskopf strong { flex: 1; min-width: 0; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-2); }

/* --------------------------------------------------- Warteschlange + Tabs */

body.mit-warteleiste { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }

.warteschlange-leiste {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: var(--z-leiste);
  display: flex; flex-direction: column; gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  background: var(--akzent-flaeche);
  border-top: 1px solid var(--rand);
  font-size: 0.8125rem; font-weight: 550;
  /* Mehrere gescheiterte Einträge dürfen die Leiste nicht über den halben
     Bildschirm wachsen lassen — sie bleibt eine Leiste, keine Ansicht. */
  max-height: 40vh; overflow-y: auto;
}

.leiste-text { margin: 0; }

.leiste-liste {
  display: flex; flex-direction: column; gap: var(--raum-1);
  list-style: none; margin: 0; padding: 0;
}

.leiste-post {
  display: flex; align-items: center; gap: var(--raum-2);
  font-weight: 450;
}

.leiste-post-text { flex: 1; min-width: 0; color: var(--rot); }

.tableiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-leiste);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--flaeche-2);
  border-top: 1px solid var(--rand);
}

.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--raum-2) var(--raum-1);
  border: none; background: none;
  color: var(--text-leise);
  font: inherit; font-size: 0.6875rem; font-weight: 600;
  cursor: pointer;
  transition: color var(--tempo) var(--kurve);
}
.tab[aria-current="page"] { color: var(--akzent); }
.tab .symbol { width: 24px; height: 24px; }
.tab-melden .symbol { color: inherit; }

/* -------------------------------------------------------- Statusmeldungen */

.meldebereich {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: var(--z-melde);
  width: min(560px, calc(100% - 2 * var(--raum-4)));
  display: flex; flex-direction: column; gap: var(--raum-2);
  pointer-events: none;
}

.mitteilung {
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius);
  background: var(--text); color: var(--grund);
  font-size: 0.875rem; font-weight: 550;
  box-shadow: var(--schatten);
  animation: einblenden 200ms var(--kurve);
}
.mitteilung-fehler { background: var(--rot); color: oklch(1 0 0); }
.mitteilung-erfolg { background: var(--gruen); color: oklch(1 0 0); }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- Ruhemodus */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skelett { background: var(--flaeche-2); }
}