/* ===========================================================================
   IOX Cockpit - Gestaltung
   Gesamtplan Abschnitt 4: dunkel, IBM Plex lokal, --maxw 1440px.
   Palette wie das oeffentliche Radar nach R0b: Steel, Copper, Offwhite.

   KEINE FREMDQUELLE. Kein Google Fonts, kein CDN - die CSP des Dienstes
   erlaubt nur 'self' (Abnahmekriterium K6). IBM Plex wird aus /schrift/
   geliefert; die fuenf Dateien uebernimmt Stufe S8b auf dem Zielhost aus dem
   Webroot des Radars und prueft sie gegen schriften.sha256. Fehlen sie, greift
   die Ersatzkette und die Seite laedt trotzdem nichts von aussen.
   =========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/schrift/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/schrift/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/schrift/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/schrift/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/schrift/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --maxw: 1440px;
  --steel: #101C2C;
  --steel-hell: #17263a;
  --steel-rand: #24364f;
  --copper: #C96F2E;
  --copper-hell: #E08B4A;
  --offwhite: #ECE8E1;
  --grau: #93a1b5;
  --gruen: #5FA777;
  --gelb: #D9A441;
  --rot: #C2553F;

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --luft: 1rem;
  --rund: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss staerker sein als jede Klassenregel.
   Korrektur 3 (20.10.): nach dem Anmelden blieb das Anmeldefenster mittig ueber
   der Anwendung stehen, und zwei anmeldung_ok im Audit-Log (10:54, 10:56)
   zeigten, dass Rafael es zweimal versucht hat.
   anmeldung.js setzt  document.getElementById('anmeldung').hidden = true  -
   richtig. Nur wirkt das Attribut ueber  [hidden] { display: none }  aus der
   Vorgabe des Darstellungsprogramms, und JEDE Regel des Autorenstilblatts
   schlaegt diese Vorgabe. .anmeldung setzt display:grid - das Fenster blieb
   also ein Raster, und place-items:center hielt es in der Mitte.
   #anwendung hatte keine display-Regel; dort wirkte hidden, weshalb VOR der
   Anmeldung alles richtig aussah und der Fehler erst danach sichtbar wurde.
   !important, damit die Regel unabhaengig von der Reihenfolge und von jeder
   kuenftigen Klassenregel gilt. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--steel);
  color: var(--offwhite);
  font: 400 16px/1.5 var(--sans);
}

code, .mono, pre { font-family: var(--mono); font-size: 0.9em; }

/* --- Anmeldung ----------------------------------------------------------- */
.anmeldung {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--luft);
}
.anmeldung form {
  width: 100%;
  max-width: 22rem;
  background: var(--steel-hell);
  border: 1px solid var(--steel-rand);
  border-radius: var(--rund);
  padding: 1.75rem;
}
.marke {
  font-family: var(--mono);
  letter-spacing: 0.22em;
  color: var(--copper);
  margin: 0;
  font-size: 0.8rem;
}
.anmeldung h1 { margin: 0.25rem 0 0.75rem; font-size: 1.5rem; font-weight: 600; }

label { display: block; margin: 0.9rem 0; font-size: 0.85rem; color: var(--grau); }
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.65rem 0.7rem;
  background: var(--steel);
  color: var(--offwhite);
  border: 1px solid var(--steel-rand);
  border-radius: var(--rund);
  font: inherit;
  /* 16px verhindert, dass iOS beim Fokus hineinzoomt. */
  font-size: 16px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 1px;
}
textarea { resize: vertical; }

button {
  font: inherit;
  padding: 0.65rem 1rem;
  /* 44px Mindesthoehe - mobil mit dem Daumen bedienbar. */
  min-height: 44px;
  border-radius: var(--rund);
  border: 1px solid var(--copper);
  background: var(--copper);
  color: #12100d;
  font-weight: 600;
  cursor: pointer;
}
button.still {
  background: transparent;
  color: var(--offwhite);
  border-color: var(--steel-rand);
  font-weight: 400;
}
button:disabled { opacity: 0.5; cursor: default; }
#anmeldeknopf { width: 100%; margin-top: 0.5rem; }

.fehler { color: var(--rot); font-size: 0.9rem; margin: 0.75rem 0 0; }
.still { color: var(--grau); font-size: 0.85rem; }

/* --- Rahmen -------------------------------------------------------------- */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--luft);
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--luft);
  border-bottom: 1px solid var(--steel-rand);
}
.kopf-links { display: flex; align-items: baseline; gap: 0.6rem; }
.kopf-rechts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kopf-rechts button { min-height: 38px; padding: 0.4rem 0.7rem; }

nav.reiter {
  display: flex;
  gap: 0.25rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.6rem var(--luft) 0;
  overflow-x: auto;
  /* Mobil waagerecht schiebbar statt umgebrochen - die Reiterzeile bleibt
     eine Zeile und verschluckt keine Reiter. */
  scrollbar-width: thin;
}
nav.reiter button {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: var(--rund) var(--rund) 0 0;
  color: var(--grau);
  font-weight: 400;
  white-space: nowrap;
  min-height: 40px;
}
nav.reiter button.aktiv {
  color: var(--offwhite);
  border-bottom-color: var(--copper);
  font-weight: 600;
}

main { max-width: var(--maxw); margin: 0 auto; padding: var(--luft); }

h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }

.platzhalter {
  border: 1px dashed var(--steel-rand);
  border-radius: var(--rund);
  padding: 1.5rem;
  color: var(--grau);
  max-width: 44rem;
}
.platzhalter h2 { color: var(--offwhite); }

/* --- Kacheln ------------------------------------------------------------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: var(--luft);
}
.kachel {
  background: var(--steel-hell);
  border: 1px solid var(--steel-rand);
  border-radius: var(--rund);
  padding: 0.75rem 0.85rem;
}
.kachel .wert { font-family: var(--mono); font-size: 1.5rem; display: block; }
.kachel .bez { color: var(--grau); font-size: 0.78rem; }
.kachel.warnt { border-color: var(--gelb); }
.kachel.stoert { border-color: var(--rot); }

/* --- Karten -------------------------------------------------------------- */
.karte {
  background: var(--steel-hell);
  border: 1px solid var(--steel-rand);
  border-left: 3px solid var(--copper);
  border-radius: var(--rund);
  padding: var(--luft);
  margin-bottom: 0.85rem;
}
.karte-kopf {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: baseline; justify-content: space-between;
}
.karte-kopf strong { font-size: 1.05rem; }
.karte dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0.75rem 0; font-size: 0.9rem; }
.karte dt { color: var(--grau); }
.karte dd { margin: 0; }
.karte .knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--luft); }
.karte .knoepfe button { flex: 1 1 8rem; }

.marken { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mark {
  font-family: var(--mono); font-size: 0.72rem;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--steel-rand); color: var(--grau);
}
.mark.gut   { border-color: var(--gruen); color: var(--gruen); }
.mark.warnt { border-color: var(--gelb);  color: var(--gelb); }
.mark.schlecht { border-color: var(--rot); color: var(--rot); }

/* --- Tabellen ------------------------------------------------------------ */
.tabellenrahmen { overflow-x: auto; border: 1px solid var(--steel-rand); border-radius: var(--rund); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { padding: 0.5rem 0.65rem; text-align: left; border-bottom: 1px solid var(--steel-rand); white-space: nowrap; }
th { color: var(--grau); font-weight: 400; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-family: var(--mono); }
tr.schlecht td { color: var(--rot); }

/* --- Dialoge ------------------------------------------------------------- */
dialog {
  background: var(--steel-hell);
  color: var(--offwhite);
  border: 1px solid var(--steel-rand);
  border-radius: var(--rund);
  padding: var(--luft);
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}
dialog::backdrop { background: rgba(4, 8, 14, 0.75); }
dialog menu { display: flex; gap: 0.5rem; justify-content: flex-end; margin: var(--luft) 0 0; padding: 0; }
dialog menu button { flex: 1 1 auto; }
fieldset { border: 1px solid var(--steel-rand); border-radius: var(--rund); margin: var(--luft) 0 0; }
legend { color: var(--grau); font-size: 0.8rem; padding: 0 0.4rem; }

.leer { color: var(--grau); border: 1px dashed var(--steel-rand); border-radius: var(--rund); padding: var(--luft); }

@media (max-width: 30rem) {
  :root { --luft: 0.75rem; }
  .karte .knoepfe button { flex: 1 1 100%; }
  dialog menu { flex-direction: column-reverse; }
}