/* ═══════════════════════════════════════════════════════════════════
 *  Betriebsanzeige — Erscheinungsbild
 *
 *  DIE WERTE STAMMEN AUS pakete/oberflaeche/src/marke.css und sind
 *  dort gemessen, nicht hier erfunden. Ergänzt um die vier Zustände,
 *  die es in der Marke noch nicht gab.
 *
 *  KEIN GOOGLE FONTS. Die Schriften liegen im Markenpaket und werden
 *  von dieser Anwendung selbst ausgeliefert — dieselbe Entscheidung
 *  wie auf der Website, ausdrücklich ohne Tracking.
 * ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;
  src:url("/schriften/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:500;font-style:normal;font-display:swap;
  src:url("/schriften/fraunces-500.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("/schriften/worksans-400.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url("/schriften/worksans-600.woff2") format("woff2")}

/* Werte aus pakete/oberflaeche/src/marke.css — nicht nachempfunden,
   sondern übernommen. Ergänzt um vier Zustandsfarben. */
:root{
  --creme:#f5f0e8; --creme-hell:#f3ead9; --sand:#e9ddca;
  --braun-hell:#8b6b47; --braun:#6b4a2b; --braun-dunkel:#4d3a26; --braun-tief:#3a2c1c;
  --gold:#b98a4e; --signal:#c8102e; --text:#463422;
  --ok:#4e7a44;      --ok-flaeche:#eaf0e4;
  --auf:#a9702a;     --auf-flaeche:#f7ecd9;
  --stoer:#c8102e;   --stoer-flaeche:#fbe6e8;
  --unbek:#5f646b;   --unbek-flaeche:#eceef0; --unbek-linie:#d6dade;
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--text);
  font-family:"Work Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:600;margin:0;color:var(--braun-tief)}
h3{font-family:"Work Sans",Arial,sans-serif;font-weight:600;margin:0;color:var(--braun-tief)}
p{margin:0;text-wrap:pretty}
a{color:var(--braun);text-decoration:none}
a:hover{color:var(--braun-tief)}
table{border-collapse:collapse;width:100%}

.blatt{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.karte{background:#fff;border:1px solid var(--sand);border-radius:22px;
  box-shadow:0 8px 24px rgba(58,44,28,.08)}

/* Etikett — kleine Grossbuchstaben über jeder Zahl */
.etikett{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--braun-hell)}

/* Die vier Zustände. Farbe ist der DRITTE Kanal, nicht der einzige:
   jeder Zustand hat auch eine eigene Marke und der vierte eine Schraffur. */
.zust{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:4px 11px 4px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.z-in_ordnung{color:var(--ok);background:var(--ok-flaeche);border-color:#cfdcc6}
.z-auffaellig{color:var(--auf);background:var(--auf-flaeche);border-color:#e6d2ae}
.z-gestoert{color:var(--stoer);background:var(--stoer-flaeche);border-color:#f0c6cc}
.z-nicht_geprueft{color:var(--unbek);border-color:var(--unbek-linie);
  background:repeating-linear-gradient(135deg,var(--unbek-linie) 0 5px,var(--unbek-flaeche) 5px 10px)}

.fuss{font-size:12.5px;color:var(--braun-hell);display:flex;gap:14px;align-items:baseline}
.trenn{height:1px;background:var(--sand);border:0;margin:0}

/* Beispielwerte — die Kennzeichnung gehört sichtbar aufs Bild, nicht
   in eine Fussnote. */
.probe{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--braun);
  border:1px dashed var(--braun-hell);border-radius:999px;padding:5px 12px;background:#fffdf9}

.seite{padding:36px 0 40px}
.kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.kicker{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--braun-hell);margin-bottom:6px}
.kopf h1{font-size:34px;line-height:1.1}
.kopf-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.stand{font-size:13px;color:var(--braun-hell)}
.stand b{color:var(--braun-tief);font-weight:600}

.antwort{display:flex;align-items:center;gap:20px;padding:20px 26px;margin-bottom:20px}
.antwort .satz{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:21px;
  line-height:1.35;color:var(--braun-tief);flex-grow:1}
.antwort .zust{font-size:13.5px;padding:6px 14px 6px 11px}

.gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kachel{display:flex;flex-direction:column;gap:11px;padding:20px 22px 17px;min-height:196px}
.kachel-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zahl{font-size:31px;font-weight:600;color:var(--braun-tief);line-height:1;letter-spacing:-.01em}
.zahl .neben{font-size:15px;font-weight:400;color:var(--braun-hell);letter-spacing:0}
.grund{font-size:14px;line-height:1.45;color:var(--text);flex-grow:1}
.kachel .fuss{border-top:1px solid var(--sand);padding-top:10px;justify-content:space-between}

.notiz{margin-top:22px;font-size:12.5px;color:var(--braun-hell);line-height:1.5}


@media (max-width: 900px) {
  .gitter { grid-template-columns: 1fr; }
  .kopf { flex-direction: column; align-items: flex-start; gap: 12px }
  .antwort { flex-direction: column; align-items: flex-start; gap: 12px }
  .kachel { min-height: 0 }
}

/* Die Zahl darf nicht ueber die Karte hinauswachsen — manche Anzeigen
   sind Saetze, keine Zahlen ("1 versendet, 0 gescheitert"). */
.zahl { font-size: clamp(19px, 2.1vw, 29px); line-height: 1.15 }

/* ── Kennzahlenseite ───────────────────────────────────────────── */
.bereich { margin-top: 28px }
.bereich h2 { font-size: 19px; margin-bottom: 12px }
.kennzahl { min-height: 0 }
.kennzahl .zahl--wort { font-size: 21px; color: var(--unbek) }
.kennzahl .fuss { font-size: 11.5px; gap: 10px }
.leiste { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px }
.achse { font-size: 12.5px; color: var(--braun); background: #fff;
         border: 1px solid var(--sand); border-radius: 999px; padding: 6px 13px }
.achse b { color: var(--braun-tief); margin-left: 5px }
.achse--leer { border-style: dashed; color: var(--braun-hell); background: none }

/* ── Die zwei Seiten finden einander ───────────────────────────── */
.navi { display: flex; gap: 16px; margin-top: 8px; font-size: 13.5px }
.navi a { color: var(--braun-hell); text-decoration: none;
          border-bottom: 1px solid var(--sand); padding-bottom: 2px }
.navi a:hover { color: var(--braun-tief); border-bottom-color: var(--braun-hell) }
.navi-hier { color: var(--braun-tief); font-weight: 600;
             border-bottom: 2px solid var(--braun); padding-bottom: 1px }