/* AKB Cockpit. Marke: Dunkelgrün #0f2b1d, Akzent #2ecc71, Systemschrift (reference_akb_brand_identity). */
:root {
  --grund: #f1f4f0; --flaeche: #ffffff; --text: #0c1a12; --leise: #56685c; --linie: #dce4dd;
  --marke: #0f2b1d; --akzent: #1b7d46; --balken: #2ecc71; --spur: #e6efe8;
  --kopf-grund: #0f2b1d; --kopf-text: #f1f7f2; --kopf-leise: #a8c3b1; --kopf-linie: #2a4a37;
  --rot: #b42318; --rot-grund: #fdecea; --gelb: #8f5300; --gelb-grund: #fff3dc;
  --gruen: #1b7d46; --gruen-grund: #e3f4e9; --grau: #6b756e; --grau-grund: #eef1ee;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --grund: #08120c; --flaeche: #102018; --text: #e6eee8; --leise: #98ad9f; --linie: #21392b;
    --marke: #e6eee8; --akzent: #4fd98a; --spur: #1a3024;
    --kopf-grund: #0c1a12; --kopf-text: #eef6f0; --kopf-leise: #94b29f; --kopf-linie: #24402f;
    --rot: #ff9a8f; --rot-grund: #3a1713; --gelb: #ffc670; --gelb-grund: #33260c;
    --gruen: #5fdc95; --gruen-grund: #12321f; --grau: #a3ada6; --grau-grund: #1b2620;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 15px; line-height: 1.5;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
a { color: var(--akzent); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; color: var(--marke); text-wrap: balance; }
h2 { font-size: 1rem; font-weight: 800; }
h3 { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-top: 12px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.leise { color: var(--leise); }
.fuss { font-size: .82rem; color: var(--leise); margin: 6px 0 0; }

/* Kopf */
.kopf { position: sticky; top: env(safe-area-inset-top); z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  background: var(--kopf-grund); color: var(--kopf-text); border-radius: 14px; padding: 12px 16px; margin: 12px auto; max-width: 1200px; }
.marke { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.punkt { color: var(--balken); }
.navi { display: flex; gap: 14px; flex-wrap: wrap; }
.navi a { color: var(--kopf-text); text-decoration: none; font-weight: 600; }
.kopf-stand { color: var(--kopf-leise); font-size: .8rem; font-variant-numeric: tabular-nums; }
.suche { flex: 1 1 180px; }
.suche input { width: 100%; }
input, textarea, select { font: inherit; font-size: 16px; /* iOS zoomt in Felder unter 16 px */ color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
textarea { width: 100%; min-height: 10rem; }
.knopf { font: inherit; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 7px 12px; border: 1px solid var(--kopf-linie);
  background: transparent; color: inherit; text-decoration: none; display: inline-block; }
.knopf.warnung { background: var(--gelb-grund); color: var(--gelb); border-color: var(--gelb); }
.knopf.leise { opacity: .8; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--balken); outline-offset: 2px; }

/* Inhalt */
.inhalt { max-width: 1200px; margin: 0 auto 48px; display: grid; gap: 16px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 720px) { .raster { grid-template-columns: 1fr; } }
.kachel, .flaeche { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; }
.liste { list-style: none; margin: 0; padding: 0; }
.zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--linie); }
.liste > .zeile:first-child { border-top: 0; }
.zeitpunkt { font-variant-numeric: tabular-nums; color: var(--leise); min-width: 4.5em; }
.chip { font-size: .72rem; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--spur); color: var(--leise); text-decoration: none; }
.chip.rot { background: var(--rot-grund); color: var(--rot); }
.chip.gelb { background: var(--gelb-grund); color: var(--gelb); }
.hinweis { border-radius: 10px; padding: 10px 12px; background: var(--grau-grund); color: var(--grau); display: grid; gap: 6px; justify-items: start; }
.hinweis p { margin: 0; }
.ampel { font-weight: 800; font-size: 1.05rem; margin: 0; padding: 8px 12px; border-radius: 10px; }
.ampel-gruen { background: var(--gruen-grund); color: var(--gruen); }
.ampel-gelb { background: var(--gelb-grund); color: var(--gelb); }
.ampel-rot { background: var(--rot-grund); color: var(--rot); }
.ampel-grau { background: var(--grau-grund); color: var(--grau); }
.punkt-status { width: 10px; height: 10px; border-radius: 50%; display: inline-block; align-self: center; }
.s-gruen { background: var(--gruen); } .s-gelb { background: var(--gelb); } .s-rot { background: var(--rot); } .s-grau { background: var(--grau); }
.werkzeuge { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.werkzeuge a { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: var(--text); font-weight: 600; }
.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 8px; border-top: 1px solid var(--linie); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.formular { display: grid; gap: 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
pre.notizen { white-space: pre-wrap; font: inherit; margin: 0; }

/* Anmelden */
body.anmelden { display: grid; place-items: center; min-height: 100vh; background: var(--kopf-grund); }
.karte-anmelden { background: var(--flaeche); color: var(--text); border-radius: 16px; padding: 24px; width: min(420px, 100%); display: grid; gap: 14px; }
.karte-anmelden .marke { color: var(--marke); }