/* KI-ready Check – Grundgestaltung nach sysmedo-CI
   Formsprache: flach, Haarlinien statt Schatten, viel Weißraum, Gewichte 400/500, ein grüner Akzent.
   Farben ausschließlich aus sysmedo-ci.md, als Tokens. Umschalten über die Klasse am <body>:
   theme-hell (Kundenansicht, Exporte) | theme-dunkel (interne Oberfläche, Präsentation).
   Radius: 4 px Buttons/Felder, 8 px Karten. Fokus: 2 px Outline, 2 px Abstand. */

@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/Roboto-Regular.4279528ce0e7.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/Roboto-Medium.55cfeb5304f0.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/Roboto-Bold.10a07810f28f.woff2") format("woff2");
}

/* ---------------------------------------------------------------- Tokens */

:root, .theme-hell {
  /* Kernfarben CI */
  --ci-gruen: #41A62A;
  --ci-gruen-dunkel: #35881F;
  --ci-gruen-hell: #E8F4E4;
  --ci-text: #3E3D40;
  --ci-grau-700: #5F5E62;
  --ci-grau-400: #A3A2A6;
  --ci-grau-200: #E2E1E4;
  --ci-grau-100: #F5F5F6;
  --ci-rot: #CC0C34;
  --ci-rot-hell: #FBE7EB;
  --ci-gelb: #E0A800;

  --schrift: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Cascadia Mono", monospace;
  --sperrung: -0.007em;

  /* Semantik – hell. Kontraste: Text 10,8:1, Sekundärtext 6,4:1, Feldrahmen 6,4:1 (≥ 3:1), Fokus Grün 3,1:1 (≥ 3:1) */
  --bg: #FFFFFF;
  --flaeche: #FFFFFF;
  --flaeche-2: var(--ci-grau-100);
  --flaeche-3: var(--ci-grau-200);
  --text: var(--ci-text);
  --text-2: var(--ci-grau-700);
  --rahmen: var(--ci-grau-200);
  --rahmen-feld: var(--ci-grau-700);
  --rahmen-stark: var(--ci-grau-400);
  --akzent: var(--ci-gruen);              /* Flächen, Linien, Punkte */
  --akzent-hover: var(--ci-gruen-dunkel);
  --auf-akzent: #1E1D20;
  /* Primärbutton: Weiß auf #41A62A hat real nur 3,1:1 (Weiß auf #35881F 4,47:1) – nicht AA für 15–16 px.
     Daher dunkle Schrift #1E1D20 auf Grün: 5,4:1; Hover #5FC246: 7,5:1. Umschaltbar über diese Tokens. */
  --akzent-btn: var(--ci-gruen);
  --akzent-btn-hover: #5FC246;
  --auf-akzent-btn: #1E1D20;
  --akzent-gross: var(--ci-gruen);        /* grüner Text nur ab 24 px */
  --akzent-flaeche: var(--ci-gruen-hell);
  --fokus: var(--ci-gruen);
  --fehler: var(--ci-rot);
  --fehler-text: var(--ci-rot);           /* 5,7:1 auf Weiß, 5,0:1 auf #FBE7EB */
  --fehler-flaeche: var(--ci-rot-hell);
  --warn: var(--ci-gelb);
  --warn-flaeche: rgba(224, 168, 0, .12);
  --logo-hell: block;
  --logo-dunkel: none;
}

.theme-dunkel {
  /* CI-Dunkelmodus. Kontraste: Text #F0F0F1 auf #2A292C 13,4:1, Sekundärtext #A3A2A6 5,7:1,
     Akzent #5FC246 auf #2A292C 6,4:1, #1E1D20 auf #5FC246 7,4:1, Feldrahmen #A3A2A6 5,7:1 */
  --bg: #1E1D20;
  --flaeche: #2A292C;
  --flaeche-2: #3E3D40;
  --flaeche-3: #3E3D40;
  --text: #F0F0F1;
  --text-2: #A3A2A6;
  --rahmen: #3E3D40;
  --rahmen-feld: #A3A2A6;
  --rahmen-stark: #5F5E62;
  --akzent: #5FC246;
  --akzent-hover: #41A62A;
  --auf-akzent: #1E1D20;
  --akzent-btn: #5FC246;
  --akzent-btn-hover: #41A62A;            /* #1E1D20 auf #41A62A: 5,4:1 */
  --auf-akzent-btn: #1E1D20;
  --akzent-gross: #5FC246;
  --akzent-flaeche: rgba(95, 194, 70, .14);
  --fokus: #5FC246;
  --fehler: #CC0C34;
  --fehler-text: #F0F0F1;                 /* Rot auf Dunkel reicht nicht für AA: heller Text + rotes Icon */
  --fehler-flaeche: rgba(204, 12, 52, .18);
  --warn: #E0A800;
  --warn-flaeche: rgba(224, 168, 0, .14);
  --logo-hell: none;
  --logo-dunkel: block;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--sperrung);
  color: var(--text);
  background: var(--bg);
}

img { max-width: 100%; height: auto; }
.logo-auf-hell { display: var(--logo-hell); }
.logo-auf-dunkel { display: var(--logo-dunkel); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 16px; color: var(--text); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: 36px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
p { margin: 0 0 16px; }
strong { font-weight: 500; }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.sr-only {
  /* !important, damit Formularregeln (z. B. input { width: 100% }) versteckte Felder nicht aufblähen */
  position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0 !important;
}
.skip-link { position: absolute; left: 16px; top: -64px; background: var(--flaeche); color: var(--text); padding: 8px 16px; z-index: 100; border-radius: 4px; border: 1px solid var(--rahmen); }
.skip-link:focus { top: 8px; }

[hidden] { display: none !important; }

.meta, .klein { font-size: 14px; color: var(--text-2); }
.leer-wert { color: var(--text-2); }

/* Linien-Icons (Inline-SVG, currentColor) */
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------------------------------------------------------------- Kopf / Gerüst intern */

.kopf { background: var(--bg); border-bottom: 1px solid var(--rahmen); }
.kopf-innen { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 32px; }
.kopf-logo { display: block; line-height: 0; }
.kopf-logo img { width: 128px; height: auto; }
.kopf-titel { font-size: 14px; color: var(--text-2); }
.navi { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.navi a, .navi button {
  font: inherit; font-size: 15px; color: var(--text-2); text-decoration: none; letter-spacing: var(--sperrung);
  padding: 8px 12px; border-radius: 4px; background: none; border: 0; cursor: pointer;
}
.navi a:hover, .navi button:hover { color: var(--text); background: var(--flaeche); }
.navi a[aria-current="page"] { color: var(--text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 4px 4px 0 0; }
.navi form { margin: 0; }
.navi-nutzer { font-size: 14px; color: var(--text-2); padding: 0 8px 0 16px; border-left: 1px solid var(--rahmen); margin-left: 8px; }

.inhalt { max-width: 1200px; margin: 0 auto; padding: 48px 24px 96px; }
.inhalt-schmal { max-width: 720px; }

.fuss { text-align: center; font-size: 14px; color: var(--text-2); padding: 32px 16px 40px; border-top: 1px solid var(--rahmen); }

/* ---------------------------------------------------------------- Meldungen und Hinweise */

.meldungen { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 8px; }
.meldung {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: 8px; border: 1px solid var(--rahmen); background: var(--flaeche);
}
.meldung::before {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  border: 1.5px solid currentColor;
}
.meldung-success { border-color: var(--akzent); }
.meldung-success::before { content: "✓"; color: var(--akzent); }
.meldung-error { border-color: var(--fehler); background: var(--fehler-flaeche); color: var(--fehler-text); }
.meldung-error::before { content: "!"; color: #FFFFFF; background: var(--fehler); border-color: var(--fehler); }
.meldung-warning { border-color: var(--warn); background: var(--warn-flaeche); }
.meldung-warning::before { content: "!"; color: var(--text); border-color: var(--warn); }
.meldung-info::before, .meldung-::before { content: "i"; color: var(--text-2); }

.hinweis { border: 1px solid var(--rahmen); border-left: 3px solid var(--akzent); background: var(--flaeche); padding: 16px 20px; border-radius: 8px; margin: 0 0 24px; }
.hinweis-titel { font-weight: 500; margin: 0 0 4px; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis-neutral { border-left-color: var(--rahmen-stark); background: var(--flaeche-2); }
.hinweis-warnung { border-left-color: var(--warn); background: var(--warn-flaeche); }
.hinweis-fehler { border-color: var(--fehler); border-left-width: 3px; background: var(--fehler-flaeche); color: var(--fehler-text); }
.hinweis-fehler .hinweis-titel::before {
  content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--fehler); color: #FFFFFF; font-size: 13px; font-weight: 700; margin-right: 8px; vertical-align: 1px;
}

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: var(--sperrung);
  min-height: 40px; padding: 9px 18px; border-radius: 4px; cursor: pointer;
  text-decoration: none; border: 1px solid var(--akzent-btn);
  background: var(--akzent-btn); color: var(--auf-akzent-btn);
}
.btn:hover { background: var(--akzent-btn-hover); border-color: var(--akzent-btn-hover); color: var(--auf-akzent-btn); }
.btn-sekundaer { background: transparent; border-color: var(--rahmen-feld); color: var(--text); }
.btn-sekundaer:hover, .theme-dunkel .btn-sekundaer:hover { background: var(--flaeche-2); border-color: var(--text); color: var(--text); }
.btn-destruktiv { background: var(--ci-rot); border-color: var(--ci-rot); color: #FFFFFF; }
.btn-destruktiv:hover, .theme-dunkel .btn-destruktiv:hover { background: #A80A2B; border-color: #A80A2B; color: #FFFFFF; }
.btn-text { background: none; border-color: transparent; color: var(--text); padding-left: 8px; padding-right: 8px; text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 4px; }
.btn-text:hover, .theme-dunkel .btn-text:hover { background: var(--flaeche-2); border-color: transparent; color: var(--text); }
.btn-klein { min-height: 34px; padding: 5px 12px; font-size: 14px; }
.btn-gross { min-height: 48px; padding: 12px 24px; font-size: 16px; }
.btn[disabled], .btn[aria-disabled="true"],
.btn[disabled]:hover { background: var(--flaeche-2); border-color: var(--rahmen); color: var(--text-2); cursor: not-allowed; }
.btn-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-zeile form { margin: 0; }

/* ---------------------------------------------------------------- Karten */

.karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 8px; padding: 24px; }
.karte + .karte { margin-top: 24px; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.karte-kopf h2 { margin: 0; font-size: 20px; }
.karte-abschnitt { border-top: 1px solid var(--rahmen); margin-top: 24px; padding-top: 24px; }
.karte-abschnitt h3 { font-size: 16px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- Formulare */

.feld { margin: 0 0 24px; }
.feld > label, .feld-label { display: block; font-weight: 500; margin: 0 0 8px; font-size: 15px; }
.pflicht-text { font-size: 13px; font-weight: 400; color: var(--text-2); margin-left: 8px; white-space: nowrap; padding: 1px 6px; border: 1px solid var(--rahmen); border-radius: 4px; }
.feld-hilfe { font-size: 14px; color: var(--text-2); margin: 0 0 8px; }
.feld-hilfe-unten { margin: 8px 0 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
input[type="datetime-local"], input[type="url"], select, textarea {
  font: inherit; font-size: 16px; color: var(--text); letter-spacing: var(--sperrung);
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--rahmen-feld); border-radius: 4px;
}
.theme-hell input[type="text"], .theme-hell input[type="email"], .theme-hell input[type="tel"],
.theme-hell input[type="password"], .theme-hell select, .theme-hell textarea { background: #FFFFFF; }
textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--akzent); }
input[readonly] { background: var(--flaeche-2); }

.feld-fehler input, .feld-fehler select, .feld-fehler textarea, [aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
.fehlertext { display: flex; gap: 8px; align-items: flex-start; color: var(--fehler-text); font-size: 15px; font-weight: 500; margin: 8px 0 0; }
.fehlertext::before {
  content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--fehler); color: #FFFFFF;
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.optionen { display: grid; gap: 8px; }
.option {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px 16px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--flaeche);
}
.option:hover { border-color: var(--rahmen-feld); }
.option input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--akzent); flex: none; }
.option:has(input:checked), .option.gewaehlt { border-color: var(--akzent); background: var(--akzent-flaeche); box-shadow: inset 3px 0 0 var(--akzent); }
.option:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }

.formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.formular-raster .feld-voll { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- Badges (immer Text + Zeichen, nie nur Farbe) */

.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 500; line-height: 1.3;
  padding: 3px 10px; border-radius: 4px; border: 1px solid var(--rahmen-stark); background: transparent; color: var(--text);
}
.badge::before { font-size: 12px; line-height: 1; }
.badge-nicht_eingeladen { color: var(--text-2); border-color: var(--rahmen); }
.badge-nicht_eingeladen::before { content: "○"; }
.badge-eingeladen::before { content: "✉"; }
.badge-angesehen::before { content: "◐"; }
.badge-gestartet { border-color: var(--warn); }
.badge-gestartet::before { content: "✎"; }
.badge-abgeschlossen { border-color: var(--akzent); background: var(--akzent-flaeche); }
.badge-abgeschlossen::before { content: "✓"; font-weight: 700; }
.badge-warnung { border-color: var(--fehler); background: var(--fehler-flaeche); color: var(--fehler-text); }
.badge-warnung::before { content: "!"; font-weight: 700; display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--fehler); color: #FFFFFF; align-items: center; justify-content: center; font-size: 11px; }

/* ---------------------------------------------------------------- Übersicht */

.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.seitenkopf h1 { margin: 0; }
.seitenkopf .meta { margin: 8px 0 0; }
.brotkrumen { font-size: 14px; color: var(--text-2); margin: 0 0 8px; }

.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 64px; padding: 0; list-style: none; border: 1px solid var(--rahmen); border-radius: 8px; background: var(--flaeche); }
.kennzahl { padding: 24px; border-left: 1px solid var(--rahmen); }
.kennzahl:first-child { border-left: 0; }
.kennzahl-wert { display: block; font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.kennzahl-name { display: block; font-size: 14px; color: var(--text-2); margin-top: 8px; }
.kennzahl-akzent .kennzahl-wert { color: var(--akzent-gross); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.filter a {
  display: inline-block; padding: 6px 14px; border-radius: 4px; border: 1px solid var(--rahmen);
  color: var(--text-2); text-decoration: none; font-size: 14px;
}
.filter a:hover { border-color: var(--rahmen-feld); color: var(--text); }
.filter a[aria-current="true"] { border-color: var(--akzent); color: var(--text); background: var(--akzent-flaeche); font-weight: 500; }

.tabelle-rahmen { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 8px; overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rahmen); vertical-align: top; }
.tabelle thead th { background: var(--flaeche-2); font-weight: 500; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.theme-dunkel .tabelle thead th { background: var(--flaeche); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle-klickbar tbody tr { cursor: pointer; }
.tabelle-klickbar tbody tr:hover td { background: var(--flaeche-2); }
.tabelle td a.zeilen-link { font-weight: 500; text-decoration-color: transparent; }
.tabelle tr:hover td a.zeilen-link, .tabelle td a.zeilen-link:focus-visible { text-decoration-color: var(--akzent); }
.tabelle .warn-text { margin-top: 6px; white-space: normal; }

.leer { text-align: center; padding: 64px 24px; }
.leer p { color: var(--text-2); }

/* ---------------------------------------------------------------- Detail */

.detail-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }

.neuer-link { border: 1px solid var(--akzent); background: var(--flaeche); border-radius: 8px; padding: 24px; margin: 0 0 48px; }
.neuer-link h2 { font-size: 20px; margin-bottom: 8px; }
.link-kopieren { display: flex; gap: 8px; margin: 16px 0 8px; }
.link-kopieren input { font-family: var(--mono); font-size: 14px; }
.link-kopieren .btn { white-space: nowrap; }
.kopier-status { font-size: 14px; min-height: 22px; margin: 0; }

.kennwerte { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 16px; }
.kennwerte dt { color: var(--text-2); font-size: 14px; padding-top: 1px; }
.kennwerte dd { margin: 0; }

.score-zeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }
.score-zahl { font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--akzent-gross); }
.score-max { color: var(--text-2); }

.zeitleiste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zeitleiste li { position: relative; padding: 28px 8px 0 0; font-size: 14px; }
.zeitleiste li::before {
  content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--rahmen-stark); background: var(--flaeche); z-index: 1;
}
.zeitleiste li::after { content: ""; position: absolute; top: 9px; left: 14px; right: 2px; height: 1px; background: var(--rahmen); }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste li.erledigt::before { content: "✓"; background: var(--akzent); border-color: var(--akzent); width: 14px; height: 14px; top: 3px; font-size: 9px; line-height: 14px; text-align: center; color: var(--auf-akzent); font-weight: 700; }
.zeitleiste li.erledigt::after { background: var(--akzent); }
.zeitleiste .schritt-name { display: block; font-weight: 500; font-size: 15px; }
.zeitleiste .schritt-zeit { display: block; color: var(--text-2); }

.dim-tabelle td.zahl, .dim-tabelle th.zahl { text-align: right; white-space: nowrap; }
.balken { display: block; height: 4px; background: var(--flaeche-3); border-radius: 2px; overflow: hidden; margin-top: 8px; min-width: 80px; }
.balken > span { display: block; height: 100%; background: var(--akzent); width: 0; }

.antworten-abschnitt { border-top: 1px solid var(--rahmen); }
.antworten-abschnitt:first-of-type { border-top: 0; }
.antworten-abschnitt > summary { cursor: pointer; padding: 16px 0; font-weight: 500; font-size: 17px; }
.antwort { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px dashed var(--rahmen); }
.antwort:last-child { border-bottom: 0; }
.antwort-frage { font-weight: 500; margin: 0 0 4px; }
.antwort-wert { margin: 0; white-space: pre-wrap; color: var(--text-2); }
.antwort-notiz { margin: 8px 0 0; font-size: 14px; color: var(--text-2); white-space: pre-wrap; }
.punkte { display: inline-block; font-weight: 500; font-size: 13px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--akzent); color: var(--text); margin-right: 8px; }

.exporte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exporte a { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- Anmelden */

.anmelde-seite { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; }
.anmelde-karte { width: 100%; max-width: 420px; }
.anmelde-logo { width: 160px; margin: 0 auto 40px; }
.anmelde-umschalter { position: absolute; top: 16px; right: 16px; }
.anmelde-karte h1 { font-size: 28px; }
.anmelde-karte .btn { width: 100%; }
.geraet-wahl { margin: 0 0 24px; padding: 16px; background: var(--flaeche-2); border-radius: 4px; }

/* ---------------------------------------------------------------- Kundengerüst */

.kunde-kopf { background: var(--bg); border-bottom: 1px solid var(--rahmen); }
.kunde-kopf-innen { max-width: 880px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kunde-kopf img { width: 128px; }
.kunde-kopf-titel { font-size: 14px; color: var(--text-2); text-align: right; }
.kunde-kopf-rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.kunde-inhalt { max-width: 880px; margin: 0 auto; padding: 48px 24px 64px; }

/* ---------------------------------------------------------------- Responsiv */

@media (max-width: 1000px) {
  .detail-raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  h1 { font-size: 28px; }
  .kopf-innen { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
  .navi { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .inhalt { padding: 32px 16px 64px; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl:nth-child(3) { border-left: 0; }
  .kennzahl:nth-child(n+3) { border-top: 1px solid var(--rahmen); }
  .formular-raster { grid-template-columns: 1fr; }
  .zeitleiste { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .zeitleiste li::after { display: none; }
  .link-kopieren { flex-direction: column; }
  .karte { padding: 20px 16px; }
  .kunde-inhalt { padding: 32px 16px 48px; }
  .kunde-kopf-innen { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .kopf, .navi, .fuss, .btn, .skip-link { display: none !important; }
}

/* ---------------------------------------------------------------- Umschalter Hell/Dunkel */

.theme-umschalter {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; letter-spacing: var(--sperrung); color: var(--text-2);
  background: transparent; border: 1px solid var(--rahmen); border-radius: 4px;
  min-height: 34px; padding: 4px 10px; cursor: pointer;
}
.theme-umschalter:hover { color: var(--text); border-color: var(--rahmen-feld); }
.theme-schalter {
  position: relative; width: 30px; height: 16px; border-radius: 8px; flex: none;
  border: 1.5px solid var(--rahmen-feld); background: transparent;
}
.theme-schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rahmen-feld); transition: left .15s;
}
.theme-umschalter[aria-pressed="true"] .theme-schalter { border-color: var(--akzent); }
.theme-umschalter[aria-pressed="true"] .theme-schalter::after { left: 16px; background: var(--akzent); }
.theme-zustand { min-width: 2.2em; text-align: left; }

/* ---------------------------------------------------------------- Einstellungen */

.navi a.navi-nutzer { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--rahmen); border-radius: 0; font-size: 14px; }

.unternavi { display: flex; flex-wrap: wrap; gap: 4px; margin: -24px 0 32px; border-bottom: 1px solid var(--rahmen); }
.unternavi a { padding: 10px 14px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.unternavi a:hover { color: var(--text); }
.unternavi a[aria-current="page"] { color: var(--text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--akzent); }

.badge-zugang-aktiv { border-color: var(--akzent); background: var(--akzent-flaeche); }
.badge-zugang-aktiv::before { content: "✓"; font-weight: 700; }
.badge-zugang-einrichtung { border-color: var(--warn); }
.badge-zugang-einrichtung::before { content: "✉"; }
.badge-zugang-abgelaufen { border-color: var(--fehler); }
.badge-zugang-abgelaufen::before { content: "!"; font-weight: 700; }
.badge-zugang-deaktiviert { color: var(--text-2); border-color: var(--rahmen); }
.badge-zugang-deaktiviert::before { content: "○"; }

.quelle { display: inline-block; font-size: 13px; color: var(--text-2); border: 1px solid var(--rahmen); border-radius: 4px; padding: 0 6px; margin-left: 4px; }
.option-gesperrt { cursor: not-allowed; opacity: .8; }
.option input[type="checkbox"] { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--akzent); flex: none; }

.h-schritt { font-size: 18px; margin-bottom: 8px; }
.h-klein { font-size: 18px; font-weight: 500; margin-top: 24px; }
.qr-bild { display: block; width: 220px; height: 220px; background: #FFFFFF; padding: 8px; border-radius: 8px; margin: 0 0 16px; }
.schluessel { font-family: var(--mono); font-size: 14px; letter-spacing: .05em; word-break: break-all; }
.codes { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.codes li { font-family: var(--mono); font-size: 16px; text-align: center; padding: 8px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--flaeche-2); }

@media (max-width: 760px) {
  .codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unternavi { margin-top: -32px; }
}

/* Schnittstelle (MCP) */
.konfig { margin: 0; padding: 12px; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 4px;
  font-family: var(--mono); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kennwerte code, .tabelle code { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }