/* -------------------------------------------------------------------------
   inno.n1x.tech — im Stil von n1x.tech.

   Dieselben Tokens, dieselbe Schrift, dieselben Griffe wie auf der
   Startseite und bei n0tes: Space Grotesk fuer Text, Mono-Versalien mit
   weitem Sperrsatz fuer Beschriftungen, Karten mit 14 px Radius, die beim
   Ueberfahren einen Millimeter steigen.

   Die Schrift liegt als Datei daneben (kein Google-Fonts-Aufruf, kein
   externer Request) - dieselbe woff2 wie bei n0tes.
   ------------------------------------------------------------------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/static/spacegrotesk.woff2) format('woff2')}

:root{
  --bg:#0a0b0d; --flaeche:#111316; --flaeche2:#14171b; --rand:#1e2126;
  --rand-hell:#2b2f36; --txt:#e9ecef; --dim:#8b929c; --akzent:#3ecfb2;
  --mono:ui-monospace,Consolas,monospace;
  --warn:#e0a33e; --rot:#e06c6c; --gut:#3ecfb2; --blau:#6ba8e0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6}
a{text-decoration:none;color:var(--akzent)}

h1{margin:0;font-weight:600;letter-spacing:-.025em;font-size:1.5rem;line-height:1.12}
.akz{color:var(--akzent)}
.hell{color:#fff}
h2{margin:0 0 10px;font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
/* Zwischenueberschriften sprechen die Mono-Sprache der Startseite. */
h3{margin:20px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400}

/* ---- Geruest ---- */
.kopf{position:sticky;top:0;z-index:40;background:rgba(10,11,13,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rand);padding:16px 24px 0}
.kopfzeile{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  max-width:1400px;margin:0 auto}
.reiter{display:flex;gap:4px;max-width:1400px;margin:14px auto 0;overflow-x:auto}
.reiter button{background:none;border:0;border-bottom:1px solid transparent;
  color:var(--dim);padding:9px 15px;font:inherit;font-size:.92rem;cursor:pointer;
  white-space:nowrap;border-radius:8px 8px 0 0;transition:color .2s ease}
.reiter button:hover{color:var(--txt);background:var(--flaeche)}
.reiter button.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)}
main{max-width:1400px;margin:0 auto;padding:26px 24px 84px}
.blatt{display:none}
.blatt.aktiv{display:block}

/* ---- Bausteine ---- */
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;
  padding:24px;margin-bottom:16px;
  transition:border-color .2s ease,background .2s ease}
.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Nur die Kennzahlkacheln heben sich beim Ueberfahren - bei Formularkarten
   waere die Bewegung beim Tippen bloss unruhig. */
.raster > .karte.kachel:hover{border-color:var(--rand-hell);background:var(--flaeche2);
  transform:translateY(-2px)}
.leise{color:var(--dim);font-size:.9rem}
.zahl{font-variant-numeric:tabular-nums}
.gross{font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.reihe{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.reihe.eng{gap:7px}
.wachsend{flex:1;min-width:0}

button,.knopf{background:var(--flaeche);border:1px solid var(--rand);color:var(--txt);
  padding:10px 16px;border-radius:10px;font:inherit;font-size:.9rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,color .2s ease}
button:hover,.knopf:hover{border-color:rgba(62,207,178,.45);background:var(--flaeche2);
  transform:translateY(-1px);color:var(--txt)}
button:focus-visible,.knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
button:disabled{opacity:.4;cursor:default;transform:none;
  border-color:var(--rand);color:var(--dim)}
button.haupt{border-color:rgba(62,207,178,.35);color:var(--akzent)}
button.haupt:hover{border-color:var(--akzent);background:rgba(62,207,178,.07)}
button.gefahr{border-color:rgba(224,108,108,.4);color:var(--rot)}
button.gefahr:hover{border-color:var(--rot);background:rgba(224,108,108,.08)}
button.klein{padding:6px 11px;font-size:.82rem}

input,select,textarea{background:var(--bg);border:1px solid var(--rand);color:var(--txt);
  padding:9px 12px;border-radius:10px;font:inherit;font-size:.9rem;width:100%;
  transition:border-color .2s ease}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--akzent)}
input.fehlerhaft{border-color:var(--rot)}
input::placeholder{color:#5a616b}
/* Beschriftungen im selben Mono-Versalsatz wie die Marker der Startseite. */
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.feld{margin-bottom:12px}
.felder{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
textarea{min-height:90px;font-family:var(--mono);font-size:.78rem;resize:vertical}

.marke{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--rand-hell);
  border-radius:5px;padding:3px 7px;white-space:nowrap;display:inline-block}
.marke.ok{color:var(--akzent);border-color:rgba(62,207,178,.35)}
.marke.rot{color:var(--rot);border-color:rgba(224,108,108,.35)}
.marke.warn{color:var(--warn);border-color:rgba(224,163,62,.35)}
.marke.blau{color:var(--blau);border-color:rgba(107,168,224,.35)}

.hinweis{font-size:.9rem;border-radius:10px;padding:12px 15px;margin:12px 0;
  background:var(--flaeche2);border:1px solid var(--rand-hell)}
.hinweis.warn{color:var(--warn);border-color:rgba(224,163,62,.3);
  background:rgba(224,163,62,.05)}
.hinweis.fehler{color:var(--rot);border-color:rgba(224,108,108,.3);
  background:rgba(224,108,108,.05)}
.hinweis.gut{color:var(--akzent);border-color:rgba(62,207,178,.3);
  background:rgba(62,207,178,.05)}
.hinweis ul{margin:7px 0 0;padding-left:18px}
.hinweis li{margin:3px 0}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);font-weight:400;
  padding:8px 12px 9px 0;border-bottom:1px solid var(--rand-hell);
  white-space:nowrap;position:sticky;top:0;background:var(--flaeche)}
th.klickbar{cursor:pointer;user-select:none;transition:color .2s ease}
th.klickbar:hover{color:var(--akzent)}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rand);vertical-align:top}
td.r,th.r{text-align:right}
tr.klickbar{cursor:pointer;transition:background .15s ease}
tr.klickbar:hover td{background:var(--flaeche2)}
.tabellenrahmen{overflow-x:auto;max-height:70vh;overflow-y:auto}
code,.mono{font-family:var(--mono);font-size:.82rem}
pre{background:var(--bg);border:1px solid var(--rand);border-radius:10px;padding:14px;
  overflow:auto;max-height:60vh;font-size:.76rem;line-height:1.5;margin:0;
  font-family:var(--mono)}

/* ---- Besonderes ---- */
.schalter{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:.9rem}
.schalter input{width:auto;margin:0;accent-color:var(--akzent)}
.balken{height:5px;border-radius:99px;background:var(--bg);overflow:hidden;
  margin-top:8px;border:1px solid var(--rand)}
.balken i{display:block;height:100%;background:var(--akzent);transition:width .3s}

/* Der Modus-Streifen. Absichtlich laut: wer hier bestellt, gibt Geld aus. */
.modus{border-radius:14px;padding:16px 20px;margin-bottom:16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--rand-hell);background:var(--flaeche)}
.modus.test{border-color:rgba(107,168,224,.3)}
.modus.echt{border-color:rgba(224,108,108,.5);background:rgba(224,108,108,.06)}
.modus b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400}
.modus.echt b{color:var(--rot)}
.modus.test b{color:var(--blau)}

.blaettern{display:flex;gap:9px;align-items:center;justify-content:center;
  margin-top:18px;flex-wrap:wrap}

.schleier{position:fixed;inset:0;background:rgba(6,7,9,.8);z-index:80;
  display:none;align-items:flex-start;justify-content:center;
  padding:44px 18px;overflow:auto;backdrop-filter:blur(3px)}
.schleier.auf{display:flex}
.fenster{background:var(--flaeche);border:1px solid var(--rand-hell);
  border-radius:14px;padding:24px;max-width:900px;width:100%}
.fenster .kopfzeile{justify-content:space-between;display:flex;align-items:center;
  margin-bottom:14px}

.positionen td{padding:6px 10px 6px 0}
.positionen input{padding:6px 10px}

/* Fussmarke wie auf allen eigenen Seiten. */
.fussmarke{position:fixed;left:14px;bottom:11px;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;pointer-events:none;z-index:50}
.fussmarke a{color:#5a616b;text-decoration:none;pointer-events:auto;
  transition:color .2s ease}
.fussmarke a:hover{color:var(--akzent)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
@media (max-width:640px){
  main{padding:18px 14px 74px}
  .kopf{padding:14px 14px 0}
  .karte{padding:18px 16px}
  .gross{font-size:1.7rem}
}