:root {
  /* Optimizely Axiom Design System. Der vollstaendige Token-Satz liegt in
     docs/axiom-tokens.json (ueber @optiaxiom/mcp abgerufen) -- die Namen in den
     Kommentaren sind die dortigen, damit nachvollziehbar bleibt, woher jeder
     Wert stammt.

     Der Plan verlangt @optiaxiom/react fuer die Oberflaechen. Hier laufen die
     Tokens durch eine handgeschriebene CSS-Datei statt durch React-Komponenten
     -- der Grund steht in docs/adr/000-stack-abweichung.md. Die Werte sind
     dieselben, das Aussehen ist es damit auch.

     Die Akzentfarbe ist ein kraeftiges Limettengruen und traegt IMMER dunklen
     Text. Weiss darauf waere unlesbar. */

  --bg: #F9FCF8;              /* bg.page */
  --panel: #FFFFFF;           /* bg.default */
  --panel-2: #EFF5EB;         /* bg.secondary */
  --line: #D8E4CB;            /* border.default */

  --text: #202320;            /* fg.default */
  --muted: #484E46;           /* fg.secondary */

  --accent: #226B1E;          /* fg.link.default */
  --accent-bg: #ABFF44;       /* bg.accent */
  --accent-bg-hover: #99F141; /* bg.accent.hovered */
  --accent-subtle: #EEFFD9;   /* bg.accent.subtle */

  --danger: #8F4764;          /* fg.error */
  --bg-error-subtle: #FFDFE8; /* bg.error.subtle */
  --focus: #197A94;           /* border.focus */

  --radius: 8px;              /* borderRadius.md */
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  /* Die Grotesk B und Roboto sind lizenzpflichtig und werden nicht nachgeladen
     -- die CSP verbietet externe Quellen. Wo sie installiert sind, greifen sie. */
  --font-sans: "Die Grotesk B", "DI Grotesk B", "Roboto Variable", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); }

header.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
header.top h1 { font-size: 17px; margin: 0; }
header.top .spacer { flex: 1; }
header.top .wer { color: var(--muted); font-size: 13px; }

main { max-width: 1000px; margin: 0 auto; padding: 24px; }

section.karte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 20px;
}
section.karte > h2 { margin: 0 0 12px; font-size: 15px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
input, select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  color: var(--text);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bg);
  border-radius: var(--radius);
  cursor: pointer;
}
button:hover { background: var(--accent-bg-hover); }
button.leise { background: var(--panel); border-color: var(--line); font-weight: 500; }
button.leise:hover { background: var(--panel-2); }
/* Ein deaktivierter Knopf muss auch aussehen wie einer -- sonst klickt man
   dagegen und haelt die Anwendung fuer kaputt. */
button:disabled, button:disabled:hover {
  background: var(--panel-2);
  border-color: var(--line);
  color: #7A8074;               /* fg.disabled */
  cursor: not-allowed;
}

.meldung {
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 14px;
}
.meldung.fehler { background: var(--bg-error-subtle); color: var(--danger); }
.meldung.gut { background: var(--accent-subtle); color: var(--accent); }

.anmeldung {
  max-width: 380px;
  margin: 12vh auto;
}
.reihe { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.reihe label { flex: 1 1 160px; margin-bottom: 0; }
form.anlegen { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.hinweis { color: var(--muted); font-size: 13px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ------------------------------------------------ Posteingang (Block 3) */

/* Nur fuer Screenreader: die Beschriftung soll da sein, aber nicht im Weg. */
.nur-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 500;
  color: var(--muted);
}
.tab:hover { background: var(--panel-2); }
/* Die aktive Ansicht traegt Rahmen UND Schriftfarbe -- nie nur eine Farbe. */
.tab.aktiv {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.presence { margin-bottom: 0; font-size: 12px; }
.presence select { width: auto; margin-top: 2px; padding: 4px 8px; }
.leise-link { font-size: 13px; }

main.inbox {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 20px;
  max-width: 1200px;
  align-items: start;
}
@media (max-width: 780px) { main.inbox { grid-template-columns: 1fr; } }

.suchzeile { display: flex; gap: 8px; margin-bottom: 12px; }
.suchzeile input { margin-top: 0; }

.liste { list-style: none; margin: 0; padding: 0; }
.eintrag { margin-bottom: 6px; }
.eintrag-knopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 500;
}
.eintrag-knopf:hover { background: var(--panel-2); }
.eintrag-titel { flex: 1; }
.eintrag-zeit { color: var(--muted); font-size: 12px; font-weight: 400; }
.marke {
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 1px 6px;
  font-size: 11px;
}
.leer { color: var(--muted); font-size: 14px; padding: 8px 0; }

.detail-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.detail-kopf h2 { margin: 0; font-size: 15px; }

.verlauf {
  height: 45vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.blase { max-width: 75%; padding: 6px 10px; border-radius: var(--radius); font-size: 14px; }
.blase .absender { display: block; font-size: 11px; color: var(--muted); }
.eigen { align-self: flex-end; background: var(--accent-subtle); }
.fremd { align-self: flex-start; background: var(--panel-2); }

.antwortzeile { display: flex; gap: 8px; margin-top: 12px; }
.antwortzeile input { margin-top: 0; }

/* ------------------------------------------ Einrichtung und Wallboard */

textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

section.karte > h3 {
  margin: 20px 0 8px;
  font-size: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Ankreuzfeld mit Beschriftung daneben statt darunter. */
label.kasten {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
label.kasten input { width: auto; margin-top: 0; }

.farbprobe {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius);
  color: #fff;
  font-weight: 600;
}
/* Der Kontrastbefund traegt Wort UND Farbe -- nie nur Farbe (Modul 39). */
.kontrast-warnung {
  color: var(--danger);
  font-size: 13px;
  margin: 4px 0;
  font-weight: 600;
}

main.wallboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1400px;
}
.wallboard .kachel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-align: center;
}
.wallboard .kachel h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wallboard .zahl {
  margin: 8px 0 4px;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1;
}
.wallboard .unterzeile { margin: 0; font-size: 13px; color: var(--muted); }
/* Auffaellig, aber nicht allein durch Farbe: der Text darunter sagt es auch. */
.wallboard .kachel.achtung {
  border-color: var(--danger-border, var(--danger));
  background: var(--bg-error-subtle);
}

/* Die KI-Leiste sitzt ueber dem Antwortfeld und schreibt nur hinein --
   abgeschickt wird ausschliesslich von Hand (Modul 19, ADR-003). */
.ki-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px 0;
}
/* Sonst zieht die Auswahl die Breite der Spalte und sprengt die Zeile. */
.ki-leiste select { width: auto; min-width: 140px; }
.ki-leiste button { white-space: nowrap; }
.ki-hinweis {
  margin: 6px 12px 0;
  font-size: 13px;
  color: var(--muted);
}
.ki-hinweis.entwurf {
  color: var(--danger);
  font-weight: 600;
}

/* Modul 24: was der Agent sieht, ist ein Abzug -- kein lebendiges Fenster.
   Der Rahmen laeuft ohne Skripte und ohne gemeinsamen Ursprung. */
.cobrowse-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px 0;
}
.cobrowse-leiste input { flex: 1; min-width: 180px; }
.cobrowse-stand { font-size: 13px; color: var(--muted); }
.cobrowse-rahmen {
  margin: 8px 12px;
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  overflow: hidden;
}
.cobrowse-rahmen .hinweis { margin: 6px 10px; word-break: break-all; }
.cobrowse-rahmen iframe {
  width: 100%;
  height: 320px;
  border: 0;
  background: #fff;
}

/* Der Faktor-Schluessel und die Wiederherstellungscodes werden abgetippt --
   Ziffernbreite und Abstand entscheiden hier ueber Tippfehler. */
.mfa-geheimnis {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  letter-spacing: 2px;
  user-select: all;
}
.codeliste {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.codeliste li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  user-select: all;
}

/* --------------------------------------------------------------------------
   Ergaenzungen fuers Praeferenzcenter.
   -------------------------------------------------------------------------- */

/* Sichtbar fuer Screenreader, unsichtbar fuers Auge. Jede Tabelle bekommt eine
   Beschriftung -- WCAG 2.1 AA (Kapitel 8) verlangt, dass eine Tabelle sagt,
   was sie enthaelt, auch wenn die Ueberschrift daneben steht. `display: none`
   waere hier falsch: dann liest sie auch der Screenreader nicht vor. */
.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

fieldset.kasten-gruppe {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0 0;
}
fieldset.kasten-gruppe legend {
  padding: 0 6px;
  font-size: 13px;
  color: var(--muted);
}