/* CampusGrid: Tokens nach brain/80-templates/designsystem/tokens.css, nur Werte ersetzt (ruhige Petrol-Palette). */
:root {
  --bg: #11161a;
  --surface-1: #181e23;
  --surface-2: #20272d;
  --text: #e8eae8;
  --text-variant: #b6bcb9;
  --text-muted: #8f9894;
  --line: rgba(255, 255, 255, 0.14);

  --accent: #5cc0b0;
  --accent-strong: #1d6a60;
  --accent-subtle: rgba(92, 192, 176, 0.12);
  --on-accent: #ffffff;

  --danger: #ef8a80;  --danger-strong: #a3302a;  --danger-subtle: rgba(239, 138, 128, 0.12);
  --warning: #dcb45f; --warning-subtle: rgba(220, 180, 95, 0.12);
  --success: #86c47f; --success-subtle: rgba(134, 196, 127, 0.12);

  --focus-ring: #f2d27a;
  --focus-core: #111111;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* offen: eigene Schrift (self-hosted) */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --max: 120rem;
  --gutter: clamp(1rem, 3vw, 2rem);
  --panel-breite: 34rem;

  --line-hair: 1px;
  --line-control: 1.5px;
  --line-head: 2px;
  --touch: 44px;

  --dur-hover: 150ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
}
:root[data-theme="light"] {
  --bg: #f6f7f5;
  --surface-1: #eceeeb;
  --surface-2: #e1e4e0;
  --text: #131716;
  --text-variant: #444c48;
  --text-muted: #5c6561;
  --line: rgba(0, 0, 0, 0.16);
  --accent: #14605a;
  --accent-strong: #14605a;
  --accent-subtle: rgba(20, 96, 90, 0.08);
  --danger: #a8231b; --danger-subtle: rgba(168, 35, 27, 0.08);
  --warning: #7d5800; --warning-subtle: rgba(125, 88, 0, 0.09);
  --success: #2a6626; --success-subtle: rgba(42, 102, 38, 0.08);
}
[data-profil="werkzeug"] {
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --fs-h1: 1.25rem; --fs-h2: 1.1rem; --fs-h3: 0.95rem;
  --fs-body: 1rem; --fs-label: 0.85rem; --fs-meta: 0.8rem;
  --space-s: 0.5rem; --space-m: 1rem; --space-l: 1.5rem;
  --field-max: 300px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.55 var(--font-ui); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-core); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
h2 { font-size: var(--fs-h2); font-weight: 650; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
p { margin: 0 0 var(--space-m); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gedaempft { color: var(--text-muted); font-size: var(--fs-meta); }

/* ---------- Kopf ---------- */
.kopf { border-bottom: var(--line-hair) solid var(--line); background: var(--surface-1); }
.kopf-innen { max-width: var(--max); margin: 0 auto; padding: var(--space-s) var(--gutter); display: flex; flex-wrap: wrap;
              gap: var(--space-s) var(--space-l); align-items: center; justify-content: space-between; }
.marke { display: flex; flex-direction: column; }
.marke strong { font-size: var(--fs-h1); font-weight: 700; letter-spacing: 0.01em; }
.marke span { font-size: var(--fs-meta); color: var(--text-muted); }
.kopf-werkzeuge { display: flex; gap: var(--space-s); align-items: center; flex-wrap: wrap; }
.clusterleiste { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--space-s); display: flex; flex-wrap: wrap;
                 gap: var(--space-s) var(--space-l); align-items: center; font-size: var(--fs-label); }
.clusterleiste .zustand { font-weight: 650; }
.clusterleiste ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); list-style: none; margin: 0; padding: 0; }
.clusterleiste .phase { color: var(--text-muted); }
.clusterleiste form { margin: 0; }
.zustand[data-art="gut"], .knoten-zustand[data-art="gut"] { color: var(--success); }
.zustand[data-art="warn"], .knoten-zustand[data-art="warn"] { color: var(--warning); }
.zustand[data-art="schlecht"], .knoten-zustand[data-art="schlecht"] { color: var(--danger); }
.verbindung { color: var(--danger); font-weight: 650; }

.reiter { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: var(--space-s); }
.reiter a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-m); color: var(--text-variant);
            text-decoration: none; border-bottom: var(--line-head) solid transparent; font-weight: 600; }
.reiter a:hover { color: var(--text); }
.reiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.reiter-leiste { border-bottom: var(--line-hair) solid var(--line); }

/* ---------- Layout ---------- */
.seite { max-width: var(--max); margin: 0 auto; padding: var(--space-l) var(--gutter); display: block; }
.inhalt { min-width: 0; }
.inhalt > section { margin-bottom: calc(var(--space-l) * 1.5); }
.inhalt h1 { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--space-m); }
.inhalt h2 { margin-bottom: var(--space-s); }
.einfach { max-width: 28rem; margin: 0 auto; padding: var(--space-l) var(--gutter); }

.panel { margin-top: var(--space-l); border: var(--line-hair) solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.panel-umschalter { width: 100%; min-height: var(--touch); display: flex; align-items: center; padding: 0 var(--space-m);
  background: none; border: 0; color: var(--text); font: 650 1rem var(--font-ui); text-align: left; cursor: pointer; }
.panel-umschalter::after { content: "(einblenden)"; margin-left: 0.5rem; color: var(--text-muted); font-weight: 400; }
.panel-umschalter[aria-expanded="true"]::after { content: "(ausblenden)"; }
.panel-inhalt { display: flex; flex-direction: column; min-height: 0; }
.panel-inhalt[hidden] { display: none; }
.panel-bereich { display: flex; flex-direction: column; min-height: 0; border-top: var(--line-hair) solid var(--line); }
.panel-bereich > h2 { padding: var(--space-s) var(--space-m); font-size: var(--fs-h3); }
.protokoll-liste, .karten-liste { overflow-y: auto; list-style: none; margin: 0; padding: 0; max-height: 22rem; }
.protokoll-bereich { flex: 3 1 0; }
.erklaerung-bereich { flex: 2 1 0; }

@media (min-width: 1100px) {
  .seite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-breite); gap: var(--space-l); align-items: start; }
  .panel { margin-top: 0; position: sticky; top: var(--space-m); height: calc(100vh - 2 * var(--space-m)); display: flex; flex-direction: column; }
  .panel-umschalter { display: none; }
  .panel-inhalt, .panel-inhalt[hidden] { display: flex; flex: 1; }
  .protokoll-liste, .karten-liste { max-height: none; flex: 1; min-height: 0; }
}

/* ---------- Protokoll ---------- */
.eintrag { padding: 0.35rem var(--space-m); border-top: var(--line-hair) solid var(--line); font-size: var(--fs-meta); }
.eintrag:first-child { border-top: 0; }
.eintrag-kopf { display: flex; flex-wrap: wrap; gap: 0 0.6rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.eintrag-art { font-weight: 700; color: var(--text); }
.eintrag[data-art="Abgelehnt"] .eintrag-art, .eintrag[data-art="Fehler"] .eintrag-art, .eintrag[data-art="Ausfall"] .eintrag-art { color: var(--danger); }
.eintrag[data-art="Neustart"] .eintrag-art { color: var(--warning); }
.eintrag[data-art="Commit"] .eintrag-art { color: var(--success); }
.eintrag-text { margin: 0.1rem 0 0; overflow-wrap: anywhere; color: var(--text-variant); }
.eintrag-text.sql { font-family: var(--font-mono); color: var(--text); }
.eintrag-meta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.leer-hinweis { padding: var(--space-m); color: var(--text-variant); font-size: var(--fs-label); margin: 0; }

.karte { padding: var(--space-s) var(--space-m); border-top: var(--line-hair) solid var(--line); }
.karte:first-child { border-top: 0; }
.karte-art { font-size: var(--fs-meta); font-weight: 700; color: var(--text-muted); }
.karte[data-art="Fehler"] .karte-art { color: var(--danger); }
.karte[data-art="Mechanismus"] .karte-art { color: var(--accent); }
.karte h3 { margin: 0.1rem 0 0.25rem; }
.karte p { font-size: var(--fs-label); color: var(--text-variant); margin: 0 0 0.3rem; }
.karte .ausloeser { color: var(--text-muted); font-size: var(--fs-meta); }

/* ---------- Tabellen ---------- */
.tabellen-huelle { overflow-x: auto; }
.ds-tabelle { width: 100%; border-collapse: collapse; }
.ds-tabelle th { text-align: left; font-size: var(--fs-label); font-weight: 600; color: var(--text-muted);
                 border-bottom: var(--line-head) solid var(--text); padding: 0.5rem 0.75rem; white-space: nowrap; }
.ds-tabelle td { border-bottom: var(--line-hair) solid var(--line); padding: 0.6rem 0.75rem; vertical-align: middle; }
.ds-tabelle .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-tabelle caption { text-align: left; font-weight: 650; padding-bottom: var(--space-s); }
.skala { display: inline-block; vertical-align: middle; width: 6rem; height: 0.5rem; background: var(--surface-2);
          border: var(--line-hair) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-right: 0.5rem; }
.skala > span { display: block; height: 100%; background: var(--accent); }
.status-frei { color: var(--success); font-weight: 650; }
.status-belegt { font-weight: 650; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.aktionen form { margin: 0; display: flex; gap: var(--space-s); align-items: center; flex-wrap: wrap; }

/* ---------- Formulare und Knoepfe ---------- */
label { display: block; font-size: var(--fs-label); color: var(--text-muted); margin-bottom: 0.25rem; }
label.inline { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--text-variant); margin: 0; }
input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%; max-width: var(--field-max); min-height: var(--touch); padding: 0 0.75rem; background: var(--surface-1);
  color: var(--text); border: var(--line-control) solid var(--line); border-radius: var(--radius-sm); font: inherit; }
input[type="number"] { max-width: 7rem; }
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent-strong); }
.feld { margin-bottom: var(--space-m); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 1rem; font: 600 0.9rem var(--font-ui);
       border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--accent-strong); color: var(--on-accent); border: var(--line-control) solid transparent; }
.btn-secondary { background: transparent; color: var(--text); border: var(--line-control) solid var(--line); }
.btn-gefahr { background: transparent; color: var(--danger); border: var(--line-control) solid var(--danger); }
.btn-klein { min-height: 36px; padding: 0 0.75rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-secondary:hover:not(:disabled), .btn-gefahr:hover:not(:disabled) { background: var(--surface-2); }
.umschalter { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: end; margin-bottom: var(--space-m); }
.umschalter form { display: flex; gap: var(--space-s); align-items: end; margin: 0; }
.standorte-nav { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-bottom: var(--space-m); }
.standorte-nav a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-m); color: var(--text);
                   border: var(--line-control) solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; }
.standorte-nav a[aria-current="page"] { border-color: var(--accent); background: var(--accent-subtle); }

/* ---------- Meldungen und Zustaende ---------- */
.meldungen { max-width: var(--max); margin: 0 auto; padding: var(--space-s) var(--gutter) 0; }
.meldung { padding: 0.6rem var(--space-m); border: var(--line-hair) solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--space-s); }
.meldung-ok { background: var(--success-subtle); }
.meldung-fehler { background: var(--danger-subtle); }
.meldung strong { margin-right: 0.4rem; }
.leerzustand { max-width: 44rem; padding: var(--space-l); border: var(--line-hair) solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.leerzustand h1 { margin-bottom: var(--space-s); }
.szenario { padding: var(--space-m) 0; border-top: var(--line-hair) solid var(--line); max-width: 56rem; }
.szenario p { color: var(--text-variant); max-width: 70ch; }
.szenario .kapitel { color: var(--text-muted); font-size: var(--fs-meta); }
.szenario form { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: end; }
.szenario form > div { margin: 0; }
.fehlertext { color: var(--danger); font-weight: 600; }
.lauf-kopf { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: baseline; margin-bottom: var(--space-s); }
.lauf-status { font-weight: 700; }
.lauf-status[data-art="gut"] { color: var(--success); }
.lauf-status[data-art="warn"] { color: var(--warning); }
.lauf-status[data-art="schlecht"] { color: var(--danger); }

@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, input, select {
    transition: color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
  }
}
@media (max-width: 640px) {
  .reiter a { padding: 0 0.6rem; }
  .kopf-innen { flex-direction: column; align-items: flex-start; }
}

.ds-tabelle tbody th { text-align: left; font-size: var(--fs-body); font-weight: 600; color: var(--text); border-bottom: var(--line-hair) solid var(--line); padding: 0.6rem 0.75rem; }

/* Tabellen auf schmalen Bildschirmen waagerecht scrollbar statt abgeschnitten */
.tabelle-rahmen { overflow-x: auto; max-width: 100%; }