/* Control Panel nach prototyp/Control-Panel.dc.html. Farben aus docs/03_Design-Tokens.md, keine Inline-Styles (CSP). */

@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-latin-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/open-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --blau: #0077C0; --blau-900: #1C3B58; --blau-800: #2A547B; --blau-50: #EEF7FC; --blau-100: #CFE3F2;
  --orange: #F29100; --text: #313A44; --text-2: #35485B; --grau: #556778; --linie: #E4E8ED; --linie-2: #F2F4F7;
  --rand: #CED5DD; --flaeche: #F7F8F9; --rot: #B3000B; --rot-hell: #FBE6E4; --gelb-hell: #FDF1D9; --braun: #B35E00;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --kopf: Montserrat, system-ui, sans-serif;
  --weich: 200ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--flaeche); font-family: 'Open Sans', system-ui, sans-serif; color: var(--text); line-height: 1.5; }
a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--blau-900); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
code { font-family: var(--mono); font-size: 0.875em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.js .nur-ohne-js { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Anmeldung ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(135deg, #1C3B58 0%, #2A547B 55%, #0077C0 100%); }
.auth-karte { width: 100%; max-width: 26rem; background: #FFFFFF; border-radius: 22px; padding: 2rem; box-shadow: 0 18px 40px rgba(15, 27, 38, 0.25); display: flex; flex-direction: column; gap: 1.25rem; }
.auth-karte.breit { max-width: 32rem; }
.auth-kopf { display: flex; justify-content: space-between; align-items: center; }
.auth-kopf img { width: 8rem; height: auto; }
.etikett { font-family: var(--kopf); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); }
.auth h1 { margin: 0; font-family: var(--kopf); font-weight: 800; font-size: 1.625rem; color: var(--blau-900); }
.auth p { margin: 0; }
.auth form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-text { font-size: 0.9375rem; color: var(--text-2); }
.auth-schritte { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; color: var(--text-2); }
.auth-links { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.qr-zeile { display: flex; gap: 1rem; align-items: center; }
.qr { width: 7.5rem; height: 7.5rem; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--rand); }
.qr-schluessel { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; min-width: 0; }
.qr-schluessel span { color: var(--grau); }
.qr-schluessel code { word-break: break-all; }
.codes { margin: 0; padding: 1rem; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; border-radius: 10px; background: var(--linie-2); font-family: var(--mono); font-size: 0.9375rem; }

/* ---------- Formularelemente ---------- */
.feld { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--blau-900); }
.feld-klein { font-size: 0.8125rem; font-weight: 700; color: var(--grau); }
.eingabe, .auswahl, .textfeld { min-height: 42px; padding: 0 0.75rem; border-radius: 8px; border: 1px solid var(--rand); background: #FFFFFF; font-weight: 400; font-size: 0.9375rem; color: var(--text); width: 100%; }
.auth .eingabe { min-height: 44px; border-radius: 6px; font-size: 1rem; }
.auswahl { padding: 0 0.625rem; }
.textfeld { padding: 0.625rem 0.75rem; line-height: 1.55; resize: vertical; min-height: 6rem; }
.eingabe[readonly] { background: var(--flaeche); color: var(--grau); }
.eingabe-code { min-height: 56px; border-radius: 6px; border: 1px solid var(--rand); font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; width: 100%; }
.eingabe-code.klein { min-height: 48px; font-size: 1.125rem; letter-spacing: 0.1em; }
.feld-fehler { font-size: 0.8125rem; font-weight: 600; color: #8A0009; }
.check { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; line-height: 1.45; font-weight: 400; color: var(--text); }
.check input { width: 1.125rem; height: 1.125rem; margin: 0.1rem 0 0; accent-color: var(--blau); flex-shrink: 0; }

.knopf { min-height: 48px; padding: 0 1.25rem; border: 0; border-radius: 10px; background: var(--blau); color: #FFFFFF; font-family: var(--kopf); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background var(--weich); }
.knopf:hover { background: #005F99; color: #FFFFFF; }
.knopf-rand { min-height: 48px; padding: 0 1.25rem; border-radius: 10px; border: 1.5px solid var(--blau); background: #FFFFFF; color: var(--blau); font-family: var(--kopf); font-weight: 700; }
.knopf-text { border: 0; background: none; color: var(--blau); padding: 0; font-size: inherit; }
.knopf-text:hover { color: var(--blau-900); }
.knopf-m { min-height: 40px; padding: 0 1rem; border-radius: 8px; border: 0; background: var(--blau); color: #FFFFFF; font-weight: 700; font-size: 0.9375rem; display: inline-flex; align-items: center; justify-content: center; }
.knopf-m:hover { background: #005F99; color: #FFFFFF; }
.knopf-m:disabled, .knopf:disabled { opacity: 0.45; }
.knopf-hell { min-height: 40px; padding: 0 1rem; border-radius: 8px; border: 1px solid var(--rand); background: #FFFFFF; color: var(--text); font-weight: 600; font-size: 0.9375rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; }
.knopf-hell:hover { border-color: var(--blau); color: var(--text); }
.knopf-klein { min-height: 36px; padding: 0 0.75rem; font-size: 0.8125rem; }
.knopf-gefahr { min-height: 36px; padding: 0 0.875rem; border-radius: 8px; border: 0; background: var(--rot); color: #FFFFFF; font-weight: 700; font-size: 0.875rem; }
.knopf-gefahr-rand { min-height: 40px; padding: 0 1rem; border-radius: 8px; border: 1.5px solid var(--rot); background: #FFFFFF; color: var(--rot); font-weight: 700; font-size: 0.9375rem; }
.knopf-unterstrichen { min-height: 40px; padding: 0 1rem; border: 0; background: transparent; color: var(--grau); font-weight: 600; text-decoration: underline; font-size: 0.9375rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.hinweis { margin: 0; font-size: 0.8125rem; color: var(--grau); }
.meldung, .fehler { margin: 0; padding: 0.75rem 0.875rem; border-radius: 8px; font-size: 0.875rem; line-height: 1.45; }
.meldung { background: #E5F4EC; color: #1E6B45; }
.fehler { background: var(--rot-hell); color: #8A0009; display: flex; flex-direction: column; gap: 0.25rem; }

/* ---------- Grundgerüst ---------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.nav { flex-shrink: 0; width: 100%; background: var(--blau-900); color: #FFFFFF; display: flex; flex-direction: row; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; overflow-x: auto; }
.nav-logo { width: 6.5rem; height: auto; flex-shrink: 0; margin: 0 0.75rem 0 0.25rem; }
.nav-punkt { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.875rem; border-radius: 10px; color: #FFFFFF; font-family: var(--kopf); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; flex-shrink: 0; transition: background var(--weich); }
.nav-punkt:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.nav-punkt[aria-current="page"] { background: rgba(255, 255, 255, 0.14); }
.nav-punkt span { flex: 1; }
.nav-punkt svg { flex-shrink: 0; }
.badge { min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--orange); color: var(--text); font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto !important; }
.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem clamp(1rem, 3vw, 2rem); background: #FFFFFF; border-bottom: 1px solid var(--linie); }
.kopf h1 { margin: 0; font-family: var(--kopf); font-weight: 800; font-size: 1.375rem; color: var(--blau-900); }
.kopf-nutzer { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--grau); }
.kopf-nutzer form { margin: 0; }
.knopf-icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rand); background: #FFFFFF; color: var(--text); display: grid; place-items: center; }
.inhalt { flex: 1; padding: clamp(1rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.25rem; max-width: 90rem; width: 100%; }

@media (min-width: 960px) {
  .shell { flex-direction: row; }
  .nav { width: 15rem; flex-direction: column; align-items: stretch; padding: 1.25rem 0.75rem; overflow-x: visible; }
  .nav-logo { width: 8rem; margin: 0.25rem 0.5rem 1.25rem; }
}

/* ---------- Bausteine ---------- */
.karte { padding: 1.25rem; border-radius: 14px; border: 1px solid var(--linie); background: #FFFFFF; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.karte.weit { gap: 0.875rem; }
.karte.gross { gap: 1rem; }
.karte h2, .karte-titel { margin: 0; font-family: var(--kopf); font-weight: 700; font-size: 1.0625rem; color: var(--blau-900); }
.karte h3 { margin: 0; font-family: var(--kopf); font-weight: 700; font-size: 1.0625rem; color: var(--blau-900); }
.karte form:not([class]) { display: contents; }
.spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.stapel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 960px) { .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.kpi { text-align: left; padding: 1.25rem; border-radius: 14px; border: 1px solid var(--linie); background: #FFFFFF; display: flex; flex-direction: column; gap: 0.25rem; color: var(--text); transition: border-color var(--weich); }
.kpi:hover { border-color: var(--blau); color: var(--text); }
.kpi-label, .kpi-sub { font-size: 0.875rem; color: var(--grau); }
.kpi-sub { font-size: 0.8125rem; }
.kpi-wert { font-family: var(--kopf); font-weight: 800; font-size: 2rem; color: var(--blau); }
.kpi-wert.warn { color: var(--braun); }
.kpi-wert.dunkel { color: var(--blau-900); }

.zeile { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0 0.25rem; border-bottom: 1px solid var(--linie-2); color: inherit; }
a.zeile:hover { color: inherit; background: var(--flaeche); }
.zeile-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.zeile > .status, .zeile > .knopf-hell { flex-shrink: 0; }
.zeile-text strong { font-weight: 600; }
.zeile-text small { font-size: 0.8125rem; color: var(--grau); }
.zeile-text small.warn { color: var(--braun); }
.leer { margin: 0; color: var(--grau); font-size: 0.9375rem; }

.status { padding: 0.2rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.status.gross { padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.st-neu { background: #D7ECF8; color: #1C3B58; }
.st-in_bearbeitung { background: #FDF1D9; color: #7A4B00; }
.st-kontakt_aufgenommen { background: #EEF7FC; color: #0E4D7A; }
.st-abgeschlossen { background: #E5F4EC; color: #1E6B45; }
.st-abgesagt { background: #F2F4F7; color: #556778; }

/* ---------- Listen ---------- */
.werkzeuge { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.suche { position: relative; flex: 1 1 14rem; }
.suche svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--grau); }
.suche input { width: 100%; min-height: 42px; padding: 0 0.75rem 0 2.25rem; border-radius: 10px; border: 1px solid var(--rand); }
.werkzeuge .auswahl { width: auto; min-height: 42px; border-radius: 10px; font-size: 0.875rem; }
.werkzeuge .knopf-hell { min-height: 42px; border-radius: 10px; font-size: 0.875rem; padding: 0 0.875rem; }
.auswahlleiste { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--rot-hell); font-size: 0.875rem; }
.auswahlleiste span { flex: 1; }
.tabelle-rahmen { position: relative; border-radius: 14px; border: 1px solid var(--linie); background: #FFFFFF; overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 46rem; }
.tabelle.schmal { min-width: 40rem; }
.tabelle th { text-align: left; color: var(--grau); font-size: 0.8125rem; font-weight: 600; padding: 0.75rem 0.5rem; }
.tabelle th:first-child, .tabelle td:first-child { padding-left: 1rem; }
.tabelle td { padding: 0.625rem 0.5rem; border-top: 1px solid var(--linie-2); vertical-align: middle; }
.tabelle tr.markiert td { background: var(--blau-50); }
.tabelle .grau { color: var(--grau); }
.tabelle .nowrap { white-space: nowrap; }
.tabelle .rechts { text-align: right; }
.tabelle input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--blau); }
.name-link { font-weight: 700; }
.punkt-neu { margin-left: 0.5rem; width: 0.5rem; height: 0.5rem; display: inline-block; border-radius: 999px; background: var(--blau); }
.tabelle-leer { margin: 0; padding: 2rem; text-align: center; color: var(--grau); }
.seiten { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; font-size: 0.875rem; color: var(--grau); }

/* ---------- Detail ---------- */
.zurueck { color: var(--blau-800); align-self: flex-start; font-family: var(--kopf); font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.warnbox { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.875rem 1rem; border-radius: 10px; background: var(--gelb-hell); font-size: 0.9375rem; }
.warnbox > span { flex: 1 1 16rem; }
.warnbox .eingabe { flex: 1 1 16rem; width: auto; min-height: 40px; font-size: 0.875rem; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 960px) { .detail { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); } }
.detail-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.detail-kopf h2 { margin: 0; font-family: var(--kopf); font-weight: 800; font-size: 1.5rem; color: var(--blau-900); }
.detail-kopf small { font-size: 0.875rem; color: var(--grau); display: block; margin-top: 0.25rem; }
.felder { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.875rem 1.5rem; }
.felder dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }
.felder dd { margin: 0.125rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.offen-box { border-color: #F5D9A8; background: #FFF6E6; }
.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.25rem 0.75rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #F5D9A8; font-size: 0.875rem; }
.offen-info { font-size: 0.8125rem; color: #5C3A00; }
.nachricht { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.player { width: 100%; border-radius: 10px; background: var(--blau-900); }
audio.player { background: var(--blau-50); }
.dokument { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 10px; border: 1px solid var(--linie); }
.dokument > span { font-weight: 600; flex: 1 1 12rem; overflow-wrap: anywhere; }
.dokument form { display: inline; }
.trenner { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--linie-2); font-size: 0.875rem; }
.pdf-vorschau { width: 100%; height: 70vh; border: 1px solid var(--linie); border-radius: 10px; }

/* ---------- Statistik ---------- */
.pille { min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--rand); background: #FFFFFF; color: var(--text); font-weight: 700; font-size: 0.875rem; display: inline-flex; align-items: center; }
.pille[aria-current="true"] { border-color: var(--blau); background: var(--blau); color: #FFFFFF; }
.fueller { flex: 1; }
.balken { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.5rem; gap: 0.75rem; align-items: center; font-size: 0.875rem; }
.balken > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken svg { display: block; width: 100%; height: 0.75rem; border-radius: 999px; overflow: hidden; }
.balken-grund { fill: var(--blau-50); }
.balken rect:not(.balken-grund) { fill: var(--blau); } .balken.f2 rect:not(.balken-grund) { fill: var(--blau-800); } .balken.f3 rect:not(.balken-grund) { fill: var(--orange); }
.balken-wert { text-align: right; font-family: var(--mono); }

/* ---------- Bestenliste ---------- */
.race { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; min-height: 44px; border-bottom: 1px solid var(--linie-2); }
.race.aus { opacity: 0.45; }
.race.aus .race-name { text-decoration: line-through; }
.race-platz { font-weight: 800; }
.race-name { font-weight: 600; overflow-wrap: anywhere; }
.titelzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.token { padding: 0.625rem; border-radius: 8px; background: var(--linie-2); word-break: break-all; }

/* ---------- Vorlagen ---------- */
.mail-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 820px) { .mail-raster { grid-template-columns: 13rem minmax(0, 1fr); } .mail-vorschau { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .mail-raster { grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); } .mail-vorschau { grid-column: auto; } }
.mail-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.mail-nav a { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 0.875rem; border-radius: 10px; border: 1px solid var(--linie); background: #FFFFFF; color: var(--text); }
.mail-nav a[aria-current="page"] { border: 2px solid var(--blau); background: var(--blau-50); }
.mail-nav .etikett { letter-spacing: 0.12em; }
.mail-nav strong { color: var(--blau-900); line-height: 1.3; }
.mail-nav small { font-size: 0.8125rem; color: var(--grau); }
.mail-nav small.angepasst { color: #1E6B45; }
.platzhalter { min-height: 32px; padding: 0 0.625rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche); font-family: var(--mono); font-size: 0.8125rem; color: var(--blau-900); }
.mail-vorschau { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.vorschau { border-radius: 14px; border: 1px solid var(--linie); background: #FFFFFF; overflow: hidden; }
.vorschau-kopf { padding: 0.875rem 1rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-2); }
.vorschau-betreff { font-size: 0.9375rem; font-weight: 700; color: var(--blau-900); }
.vorschau-grau { color: var(--grau); }
.vorschau-buehne { padding: 1.25rem; background: #EEF1F4; }
.vorschau-mail { max-width: 600px; margin: 0 auto; background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 27, 38, 0.06); }
.vorschau-balken { height: 4px; background: linear-gradient(90deg, #F29100, #F8B133); }
.vorschau-logo { padding: 1.25rem 1.5rem 0.5rem; }
.vorschau-logo img { width: 120px; height: auto; }
.vorschau-text { padding: 0.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; font-family: 'Open Sans', Arial, sans-serif; font-size: 0.9375rem; line-height: 1.6; }
.vorschau-text p { margin: 0; white-space: pre-line; }
.vorschau-knopf { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: 10px; background: var(--blau); color: #FFFFFF; font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 0.9375rem; }
.vorschau-link { font-size: 0.75rem; color: var(--grau); word-break: break-all; }
.vorschau-fuss { padding: 1rem 1.5rem; background: var(--blau-900); color: #FFFFFF; font-size: 0.75rem; line-height: 1.6; }
.schutz { border-color: var(--blau-100); background: var(--blau-50); gap: 0.625rem; }
.schutz h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.schutz h3 svg { color: var(--blau); }
.schutz ul { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }

/* ---------- Einstellungen ---------- */
.beispiel { padding: 0.75rem; border-radius: 8px; background: var(--linie-2); font-size: 0.8125rem; color: var(--text-2); }
.frist { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 4rem; gap: 0.5rem; align-items: center; font-size: 0.875rem; }
.frist output { min-height: 38px; padding: 0 0.5rem; border-radius: 8px; border: 1px solid var(--rand); background: var(--flaeche); display: flex; align-items: center; justify-content: flex-end; }
.frist span:last-child { color: var(--grau); }
.passkeys { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.passkeys li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.875rem; }

/* ---------- Protokoll ---------- */
.aktion { padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--linie-2); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.aktion.fehl { background: var(--rot-hell); }
.aktion.loeschen { background: var(--gelb-hell); }
.zeit { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }

/* ---------- Inhalte ---------- */
.inhalte-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.inhalte-liste a { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; border-radius: 14px; border: 1px solid var(--linie); background: #FFFFFF; color: var(--text); }
.inhalte-liste a:hover { border-color: var(--blau); }
.inhalte-liste strong { color: var(--blau-900); font-family: var(--kopf); }
.inhalte-liste small { color: var(--grau); font-size: 0.8125rem; }
.editor { display: flex; flex-direction: column; gap: 0.875rem; }
.editor fieldset { margin: 0; padding: 1rem; border: 1px solid var(--linie); border-radius: 10px; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.editor legend { padding: 0 0.375rem; font-family: var(--kopf); font-weight: 700; font-size: 0.9375rem; color: var(--blau-900); }
.editor details { border: 1px solid var(--linie); border-radius: 10px; background: #FFFFFF; }
.editor details > summary { padding: 0.75rem 1rem; font-family: var(--kopf); font-weight: 700; color: var(--blau-900); cursor: pointer; list-style-position: inside; }
.editor details > .editor-inhalt { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.liste-eintrag { border: 1px dashed var(--rand); border-radius: 10px; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.75rem; }
.liste-werkzeug { display: flex; gap: 0.375rem; justify-content: flex-end; flex-wrap: wrap; }
.build { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; font-size: 0.875rem; }
.build-status { font-weight: 700; }
.build-status.fehler-text { color: #8A0009; }
.build-status.ok { color: #1E6B45; }
.kopf-name { color: var(--grau); }
.kopf-name:hover, .kopf-name[aria-current="page"] { color: var(--blau-900); text-decoration: underline; }
.einladen { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.einladen h2 { width: 100%; }
.einladen-mail { flex: 2 1 16rem; }
.einladen-rolle { flex: 1 1 10rem; }
.einladen-hinweis { width: 100%; }
.stapel-klein { display: flex; flex-direction: column; gap: 0.375rem; }
.vorschau-absaetze { display: flex; flex-direction: column; gap: 0.875rem; }
.karte form[data-vorlage] { display: flex; flex-direction: column; gap: 0.875rem; }
.passkey-neu { display: flex; flex-direction: column; gap: 0.75rem; }
.reihe-formular { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.reihe-formular .feld { flex: 1 1 10rem; }
.editor-gruppe { background: var(--flaeche) !important; }
.editor-gruppe .editor-gruppe { background: #FFFFFF !important; }
.editor .hinzu { align-self: flex-start; }
.editor input[readonly], .editor textarea[readonly] { background: var(--linie-2); color: var(--grau); }
/* Schmale Bildschirme: Titel und Name dürfen umbrechen */
.kopf h1 { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.kopf-nutzer { min-width: 0; }
.kopf-name { text-align: right; }
@media (max-width: 400px) { .kopf h1 { font-size: 1.125rem; } .kopf-nutzer { font-size: 0.8125rem; gap: 0.5rem; } }
/* Knöpfe in Karten links ausgerichtet (Prototyp), in der Seitenleiste der Detailansicht volle Breite */
.karte > :is(button, a.knopf-hell, a.knopf-m), .karte form:not([class]) > button { align-self: flex-start; }
.detail > .stapel:last-child .karte form:not([class]) > button, .detail > .stapel:last-child .trenner button { align-self: stretch; width: 100%; }