/* ---------------------------------------------------------------------------
   Pruefaufbau - Oberflaeche.

   Benutzt die Tokens und Regeln aus design-system.md. Das ist Absicht: Der
   Geraetetest prueft damit nebenbei, ob das Design-System auf echten
   Telefonen traegt - Trefferflaechen, Kontrast, Lesbarkeit bei Sonne.

   KEIN style-Attribut im Markup (design-system.md §14.4).
--------------------------------------------------------------------------- */

:root{
  /* Marke */
  --brand:#1870b8; --brand-3:#4a9edd; --brand-dark:#12558a; --brand-soft:#e8f1f9;
  --brand-grad:linear-gradient(135deg,#12558a 0%,#1870b8 60%,#2277bd 100%);

  /* Text und Linien */
  --ink:#1b232c; --ink-soft:#3d4854; --muted:#5f6875;
  --line:#e5e8ec; --line-strong:#d6dbe1;

  /* Flaechen */
  --bg:#ffffff; --bg-soft:#f5f7fa;

  /* Zustaende - immer als Paar */
  --ok:#16a34a;   --ok-bg:rgba(34,197,94,.12);
  --part:#b45309; --part-bg:rgba(217,119,6,.13);
  --no:#b02a37;   --no-bg:rgba(220,53,69,.1);
  --na:#5f6875;   --na-bg:#eef1f4;

  /* Geometrie */
  --radius:18px; --ctl-radius:12px;
  --shadow-sm:0 1px 2px rgba(15,23,32,.04),0 1px 1px rgba(15,23,32,.03);
  --shadow:0 10px 30px -12px rgba(15,23,32,.12),0 2px 6px rgba(15,23,32,.04);
  --shadow-brand:0 10px 25px -10px rgba(24,112,184,.55);

  /* Hoehen - drei Stufen, ausgesprochen statt versteckt (§14.2) */
  --ctl-h:42px; --ctl-h-sm:34px; --tap-h:44px;
  --chip-h:34px; --chip-h-sm:24px;
  --ctl-pad-x:.9rem; --ic:17px;
}

/* Baustellen-Modus als Token-Ebene (§14.3) */
[data-modus="baustelle"]{
  --ctl-h:52px; --ctl-h-sm:44px; --tap-h:52px;
  --chip-h:40px; --chip-h-sm:28px;
  --ink:#0b1016; --muted:#3d4854;
  --line:#c8ced6; --line-strong:#aab3bd;
  --bg-soft:#eef1f5;
  font-size:17px;
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

body{
  margin:0;background:var(--bg-soft);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.6;
  padding:0 16px 96px;                       /* Seitengutter nie unter 16px */
}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;margin:0}
.zahl{font-variant-numeric:tabular-nums}

/* --- Kopf --- */
.kopf{max-width:640px;margin:0 auto;padding-block:24px 16px}
.kopf h1{font-size:clamp(1.5rem,6vw,2rem);font-weight:800}
.kopf p{color:var(--muted);margin:8px 0 0}

/* --- Stapel: der Abstand kommt vom Elternteil (§1 Regel 3) --- */
.stapel{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* --- Karte --- */
.karte{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:20px;
  display:flex;flex-direction:column;gap:16px;
}
.karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.karte-kopf h2{font-size:1.05rem;font-weight:800}
.karte p{margin:0;color:var(--muted);font-size:.9rem}
.karte .warum{font-size:.82rem;color:var(--muted);border-left:3px solid var(--brand-3);
  padding-left:12px;display:flex;flex-direction:column;gap:4px}
.karte .warum b{color:var(--brand-dark);font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em}

/* --- Chips: nur fuer Ausnahmen (§1 Regel 5) --- */
.chip{display:inline-flex;align-items:center;min-height:var(--chip-h-sm);
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.chip.ok{color:var(--ok);background:var(--ok-bg)}
.chip.warnung{color:var(--part);background:var(--part-bg)}
.chip.fehler{color:var(--no);background:var(--no-bg)}
.chip.offen{color:var(--na);background:var(--na-bg)}
.chip.laeuft{color:var(--brand-dark);background:var(--brand-soft)}

/* --- Knoepfe: in dieser Ansicht IMMER Touch-Groesse (§14.2) --- */
.btn{
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap-h);padding:.35rem 1.25rem;
  border-radius:999px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink-soft);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn-primary{background:var(--brand-grad);border-color:transparent;color:#fff;
  font-weight:700;box-shadow:var(--shadow-brand)}
.btn-breit{width:100%}
.btn-sm{min-height:var(--ctl-h-sm);padding:.25rem .95rem;font-size:.85rem}
.btn-reihe{display:flex;gap:8px;flex-wrap:wrap}
.btn-reihe .btn{flex:1 1 auto}

/* --- Messwerte --- */
.werte{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.werte li{display:flex;justify-content:space-between;gap:16px;font-size:.9rem;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.werte li:last-child{border-bottom:none;padding-bottom:0}
.werte .k{color:var(--muted)}
.werte .v{font-weight:600;text-align:right;overflow-wrap:anywhere}

/* --- Leerzustand: nie nur "keine Daten" (§6.13) --- */
.leer{color:var(--muted);font-size:.9rem;background:var(--bg);
  border:1px dashed var(--line-strong);border-radius:var(--ctl-radius);
  padding:16px;text-align:center}

/* --- Kamera --- */
.kamera{position:relative;border-radius:var(--ctl-radius);overflow:hidden;
  background:#000;aspect-ratio:4/3;max-width:100%}
.kamera video{width:100%;height:100%;object-fit:cover;display:block}
.kamera-linie{position:absolute;left:8%;right:8%;top:50%;height:2px;
  background:var(--no);opacity:.75}

/* --- Feld --- */
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:.82rem;font-weight:600}
.feld input{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--ctl-radius);
  min-height:var(--tap-h);padding:0 var(--ctl-pad-x)}
.feld input:focus-visible{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 .25rem rgba(24,112,184,.15)}
#push-kontakt-block{display:flex;flex-direction:column;gap:16px}
.feld textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--ctl-radius);
  padding:.6rem var(--ctl-pad-x);line-height:1.5;min-height:96px;resize:none}
.feld textarea:focus-visible{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 .25rem rgba(24,112,184,.15)}

/* --- Fussleiste: Hauptaktion unten, in Daumenreichweite (§14.7) --- */
.fuss{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:8px 16px calc(8px + env(safe-area-inset-bottom));}
.fuss-inner{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:8px}
.fuss .stand{flex:1;font-size:.8rem;color:var(--muted)}

/* --- Vorschaubild --- */
.vorschau{border-radius:var(--ctl-radius);border:1px solid var(--line);
  max-width:100%;display:block}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}