/* ZNA-Monitor: Grundgestaltung, geladen NACH ikim-gestaltung.css.
   Nur Tokens aus der gemeinsamen Gestaltung; was nur der ZNA-Monitor hat,
   steht hier oder in board.css und portal.css. */

:root{
  /* MTS-Farben: fest, in beiden Themen gleich, mit dunkler Schrift */
  --mts-rot:#E5484D; --mts-orange:#F08A24; --mts-gelb:#E9C71F; --mts-gruen:#3FAE6E; --mts-blau:#4C8FDC; --mts-tinte:#10161A;
  --auf-ok:#FFFFFF; --auf-fehler:#FFFFFF;
  --warn-rand:#D69A2D; --warn-text:#8A5A06;
  --schleier:rgb(10 16 22 / .45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){ --auf-ok:#06241A; --auf-fehler:#2B0908; --warn-rand:#E6AE45; --warn-text:#E6AE45; --schleier:rgb(0 0 0 / .55); }
}
:root[data-thema="dunkel"]{ --auf-ok:#06241A; --auf-fehler:#2B0908; --warn-rand:#E6AE45; --warn-text:#E6AE45; --schleier:rgb(0 0 0 / .55); }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{font-size:var(--gr-3);line-height:1.5;min-height:100vh}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit}
button{display:inline-flex;align-items:center;justify-content:center;gap:var(--a-2);height:38px;padding:0 14px;white-space:nowrap}
button.klein{height:30px;padding:0 10px;font-size:var(--gr-2)}
button.gross{height:48px;padding:0 20px;font-size:var(--gr-4)}
button .ic{width:16px;height:16px}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea{width:100%;padding:8px 12px;font-size:var(--gr-3)}
textarea{min-height:90px;resize:vertical}
a{text-decoration:none}
a:hover{text-decoration:underline}
.leise{color:var(--text-3)}
.zweit{color:var(--text-2)}
.klein-text{font-size:var(--gr-2)}
.fett{font-weight:700}

/* ---------- Seitenrahmen ---------- */
.rahmen{min-height:100vh;display:flex;flex-direction:column}
.kopfleiste{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--a-4);
  padding:10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background:color-mix(in srgb, var(--hinter) 85%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie)}
.marke{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-family:var(--schrift-titel);font-weight:800;font-size:var(--gr-5);letter-spacing:-.02em}
.marke:hover{text-decoration:none}
.marke-zeichen{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--akzent);color:var(--akzent-text)}
.marke-zeichen svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hauptnavi{display:flex;gap:2px;margin-left:var(--a-4)}
.hauptnavi a{padding:6px 12px;border-radius:var(--r-1);color:var(--text-2);font-weight:600;font-size:var(--gr-3)}
.hauptnavi a:hover{background:var(--flaeche-2);color:var(--text);text-decoration:none}
.hauptnavi a.aktiv{background:var(--akzent-hell);color:var(--akzent)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:var(--a-2)}
@media (max-width:760px){ .hauptnavi{display:none} }
.inhalt{width:100%;max-width:1240px;margin:0 auto;padding:var(--a-6) max(16px, env(safe-area-inset-right, 0px)) var(--a-12) max(16px, env(safe-area-inset-left, 0px))}
.inhalt.schmal{max-width:760px}
.seitenkopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--a-3) var(--a-4);margin-bottom:var(--a-6)}
.seitenkopf h1{font-size:var(--gr-7);text-wrap:balance}
.seitenkopf p{color:var(--text-2);margin-top:4px}
.seitenkopf .aktionen{margin-left:auto;display:flex;gap:var(--a-2);flex-wrap:wrap}

/* ---------- Karten, Felder ---------- */
.karte{padding:var(--a-5)}
.karte + .karte{margin-top:var(--a-4)}
.karte-kopf{display:flex;align-items:center;gap:var(--a-3);margin-bottom:var(--a-4);flex-wrap:wrap}
.karte-kopf h2,.karte-kopf h3{font-size:var(--gr-5)}
.karte-kopf p{color:var(--text-2);font-size:var(--gr-2);flex-basis:100%}
.karte-kopf .aktionen{margin-left:auto;display:flex;gap:var(--a-2);flex-wrap:wrap}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld > span:first-child,.feld > .lbl{font-size:var(--gr-2);font-weight:600;color:var(--text-2)}
.feld .hilfe{font-size:var(--gr-1);color:var(--text-3)}
.felder{display:grid;gap:var(--a-4)}
.felder.zwei{grid-template-columns:repeat(2, minmax(0,1fr))}
.felder.drei{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:640px){ .felder.zwei,.felder.drei{grid-template-columns:1fr} }
.haken-zeile{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--text);cursor:pointer}
.haken-zeile input{margin:0}
.reihe{display:flex;flex-wrap:wrap;gap:var(--a-2);align-items:center}
.reihe.ende{justify-content:flex-end}
.trenner{height:1px;background:var(--linie);margin:var(--a-4) 0}
.kasten{padding:var(--a-3) var(--a-4);border-radius:var(--r-1);background:var(--flaeche-2);color:var(--text-2);font-size:var(--gr-2)}
.kasten.warn{background:var(--warn-hell);color:var(--text)}
.kasten.ok{background:var(--ok-hell);color:var(--text)}
.kasten.fehler{background:var(--fehler-hell);color:var(--fehler)}
.geheim{font-family:ui-monospace,Consolas,monospace;font-size:var(--gr-6);font-weight:700;letter-spacing:.08em;
  padding:var(--a-3) var(--a-4);border-radius:var(--r-1);background:var(--flaeche-2);text-align:center;user-select:all}
.qr{display:grid;place-items:center}
.qr svg{width:min(240px, 100%);height:auto;border-radius:var(--r-1)}

/* ---------- Tabellen ---------- */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
table.datentabelle{width:100%;border-collapse:collapse}
.datentabelle th,.datentabelle td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--linie);vertical-align:middle}
.datentabelle th{background:var(--flaeche-2);white-space:nowrap}
.datentabelle tbody tr:last-child td{border-bottom:0}
.datentabelle td.zahl{text-align:right;font-variant-numeric:tabular-nums}
.datentabelle td.knoepfe{text-align:right;white-space:nowrap}

/* ---------- Dialog ---------- */
.dialog-huelle{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--schleier);
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.dialog-kasten{width:min(560px, 100%);max-height:100%;overflow:auto;background:var(--flaeche);padding:var(--a-6);display:flex;flex-direction:column;gap:var(--a-4)}
.dialog-kasten.breit{width:min(860px, 100%)}
.dialog-kasten h2{font-size:var(--gr-6)}
.dialog-fuss{display:flex;justify-content:flex-end;gap:var(--a-2);flex-wrap:wrap;padding-top:var(--a-2)}
.dialog-fehler{color:var(--fehler);font-weight:600;font-size:var(--gr-2)}

/* ---------- Anmeldung ---------- */
.anmeldung{min-height:100vh;display:grid;place-items:center;padding:var(--a-6) var(--a-4)}
.login-box{background:var(--flaeche);border:1px solid var(--linie)}
.login-innen{display:flex;flex-direction:column;gap:var(--a-4)}
.login-innen h1{font-size:var(--gr-7)}
.login-innen .unterzeile{color:var(--text-2);margin-top:-8px}
.login-fehler{background:var(--fehler-hell);color:var(--fehler)}
.login-innen .fuss-zeile{text-align:center;font-size:var(--gr-2);color:var(--text-3)}
.schritte-punkte{display:flex;gap:6px}
.schritte-punkte i{width:28px;height:4px;border-radius:2px;background:var(--linie)}
.schritte-punkte i.an{background:var(--akzent)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-family:ui-monospace,Consolas,monospace;font-size:var(--gr-4)}
.codes span{padding:6px 10px;border-radius:6px;background:var(--flaeche-2);text-align:center}

/* ---------- Kleinteile ---------- */
.marke-mts{display:inline-block;min-width:4.6em;text-align:center;border-radius:6px;padding:.15em .55em;font-weight:700;color:var(--mts-tinte)}
.marke-mts.rot{background:var(--mts-rot)} .marke-mts.orange{background:var(--mts-orange)} .marke-mts.gelb{background:var(--mts-gelb)}
.marke-mts.gruen{background:var(--mts-gruen)} .marke-mts.blau{background:var(--mts-blau)}
.marke-mts.ohne{background:transparent;color:var(--text-3);border:1.5px dashed var(--linie-stark)}
.listen-feld{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1.5px solid var(--linie-stark);border-radius:var(--r-1);background:var(--flaeche);min-height:44px;align-items:center}
.listen-feld .eintrag{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:var(--r-rund);background:var(--flaeche-2);font-weight:600;font-size:var(--gr-2)}
.listen-feld .eintrag button{height:22px;width:22px;padding:0;border:0;background:none;color:var(--text-3);box-shadow:none}
.listen-feld .eintrag button:hover{color:var(--fehler)}
.listen-feld input{flex:1;min-width:140px;border:0 !important;box-shadow:none !important;padding:4px 6px !important;min-height:0 !important;background:transparent}
.wahl-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.wahl-knoepfe button{height:34px}
.wahl-knoepfe button[aria-pressed="true"]{background:var(--akzent-hell);border-color:var(--akzent);color:var(--akzent)}
.leer{padding:var(--a-8) var(--a-4);text-align:center;color:var(--text-3)}
.fusszeile{margin-top:auto;padding:var(--a-4);text-align:center;font-size:var(--gr-1);color:var(--text-3)}
.fusszeile a{color:var(--text-3)}