/* ==========================================================================
   [Produktname], Design "simpel und modern" (Paket 2G)
   Weißer Inhalt auf hellem Grau, feine Linien, Radius 8 px (Karten) und 6 px (Felder, Knöpfe), ein ganz leichter Schatten.
   Alle Farbwerte stehen nur im ersten :root-Block. Die Markenfarbe kommt von außen: --farbe-marke und
   --farbe-marke-schrift setzt _basis.html aus config.py; alle Stufen werden mit color-mix() abgeleitet.
   Schrift: Geist (400, 500, 600) und Geist Mono (400, 500), je Latin und Latin-Ext, SIL OFL 1.1, selbst gehostet.
   ========================================================================== */

@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/geist-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/geist-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Marke: --farbe-marke und --farbe-marke-schrift setzt _basis.html aus config.py. Die Werte hier gelten nur als Rückfall. */
  --farbe-marke: #2352d8;
  --farbe-marke-schrift: #ffffff;
  --farbe-marke-dunkel: color-mix(in srgb, var(--farbe-marke) 82%, black);
  --farbe-marke-hell: color-mix(in srgb, var(--farbe-marke) 8%, white);
  --farbe-marke-mittel: color-mix(in srgb, var(--farbe-marke) 22%, white);

  /* Grund, Flächen, Text, Linien (Grautöne mit leichtem Blaustich) */
  --farbe-text: #172033;
  --farbe-text-leise: #566176;
  --farbe-grund: #f6f7f9;
  --farbe-flaeche: #ffffff;
  --farbe-rand: #e3e6ec;          /* feine Linie */
  --farbe-rand-stark: #8c95a5;    /* Rand von Eingabefeldern (Kontrast mind. 3:1) */
  --farbe-rand-knopf: #c9ced8;    /* Rand von Knöpfen */
  --farbe-druck: #000000;         /* nur für den Druck */
  --farbe-druck-linie: #777777;
  --schatten-farbe: rgb(16 24 40 / 0.06);

  /* Status (Vordergrund dunkel, Hintergrund hell), unabhängig von der Marke */
  --farbe-ok-vorn: #166534;       --farbe-ok-grund: #e6f4ea;
  --farbe-fehler-vorn: #b42318;   --farbe-fehler-grund: #fdeceb;
  --farbe-offen-vorn: #854d0e;    --farbe-offen-grund: #fef6d6;
  --farbe-neutral-vorn: #475467;  --farbe-neutral-grund: #eceef2;
  --farbe-info-vorn: var(--farbe-marke-dunkel);  --farbe-info-grund: var(--farbe-marke-hell);

  /* Schriften */
  --schrift: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Schriftgrößen */
  --groesse-klein: 0.875rem;   /* 14 px: Hilfetext, Tabellen */
  --groesse-text: 1rem;        /* 16 px: Fließtext und Eingaben */
  --groesse-mittel: 1.125rem;
  --groesse-h3: 1.0625rem;
  --groesse-h2: 1.25rem;
  --groesse-h1: 1.75rem;

  /* Abstände */
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px;
  --abstand-5: 24px; --abstand-6: 32px; --abstand-7: 48px; --abstand-8: 64px;

  /* Form */
  --radius-karte: 8px;
  --radius-feld: 6px;
  --radius-pille: 999px;
  --schatten: 0 1px 2px var(--schatten-farbe);
  --breite-inhalt: 1120px;
  --fokus: 2px solid var(--farbe-marke);
  --fokus-abstand: 2px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--farbe-grund); color: var(--farbe-text); font: 400 var(--groesse-text)/1.55 var(--schrift); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--farbe-text); }
h2 { font-size: var(--groesse-h2); margin: var(--abstand-7) 0 var(--abstand-3); }
h3 { font-size: var(--groesse-h3); }
h4 { font-size: var(--groesse-text); }
h5 { font-size: var(--groesse-klein); margin: var(--abstand-4) 0 var(--abstand-2); }
p { margin: 0 0 var(--abstand-3); }
ul, ol { margin: 0 0 var(--abstand-3); }
a { color: var(--farbe-marke); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--farbe-marke-dunkel); }
:focus-visible { outline: var(--fokus); outline-offset: var(--fokus-abstand); border-radius: 3px; }
form { margin: 0; }
hr { border: 0; border-top: 1px solid var(--farbe-rand); margin: var(--abstand-5) 0; }
code, pre, .mono, .kennung, .hash { font-family: var(--schrift-mono); }
.mono, .kennung { font-size: 0.9375em; font-weight: 400; font-variant-numeric: tabular-nums; }
.kennung { font-weight: 500; overflow-wrap: anywhere; }
.hash { font-size: 0.8125rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.leise { color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.beschriftung { color: var(--farbe-text-leise); font-size: var(--groesse-klein); margin: 0 0 var(--abstand-3); }
.umbruch { overflow-wrap: anywhere; }
.abstand-oben { margin-top: var(--abstand-4); }
.nur-leser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprunglink { position: absolute; left: var(--abstand-4); top: -100px; z-index: 10; padding: var(--abstand-2) var(--abstand-4); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-knopf); border-radius: var(--radius-feld); }
.sprunglink:focus { top: var(--abstand-2); }

/* ---------- Kopfzeile und Navigation ---------- */
.kopfleiste { background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
.kopf-innen { max-width: var(--breite-inhalt); margin: 0 auto; padding: 0 var(--abstand-5); min-height: 60px; display: flex; align-items: center; gap: var(--abstand-5); }
.marke { display: inline-flex; align-items: center; gap: var(--abstand-2); font-weight: 600; font-size: var(--groesse-mittel); letter-spacing: -0.01em; color: var(--farbe-text); text-decoration: none; white-space: nowrap; }
.marke img { display: block; height: 32px; width: auto; }   /* Logo VeriCarry (E27), Name steht im alt-Text */
.marke:hover { color: var(--farbe-text); }
.kopf-platz { flex: 1 1 auto; }
.sprachwahl { display: flex; align-items: center; gap: var(--abstand-1, 4px); font-size: var(--groesse-klein); color: var(--farbe-text-leise); }
.sprach-knopf { min-width: 34px; min-height: 34px; padding: 0 var(--abstand-2); font: 500 var(--groesse-klein)/1 var(--schrift); color: var(--farbe-text-leise); background: none; border: 0; border-radius: var(--radius-feld); cursor: pointer; }
.sprach-knopf:hover { color: var(--farbe-marke); background: var(--farbe-marke-hell); }
.sprach-knopf.aktiv { color: var(--farbe-text); font-weight: 700; background: var(--farbe-grund); cursor: default; }
/* Pilot-Hinweis und Kontomenü (L60, L63): <details>/<summary>, ohne JavaScript */
.kopf-innen { position: relative; }
.pilot-hinweis { position: relative; display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--abstand-3); font-size: 0.8125rem; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--farbe-offen-vorn); background: var(--farbe-offen-grund); border-radius: var(--radius-pille); text-decoration: none; }
a.pilot-hinweis::before { content: ""; position: absolute; inset: -8px -4px; }   /* Trefferfläche mindestens 44 px hoch */
a.pilot-hinweis:hover { color: var(--farbe-offen-vorn); text-decoration: underline; }
.pilot-kurz { display: none; }
.konto { position: relative; min-width: 0; }
.konto-knopf { display: inline-flex; align-items: center; gap: var(--abstand-2); max-width: 220px; min-height: 40px; padding: 0 var(--abstand-3); list-style: none; cursor: pointer; font-size: var(--groesse-klein); font-weight: 500; color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-knopf); border-radius: var(--radius-feld); }
.konto-knopf::-webkit-details-marker { display: none; }
.konto-knopf::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 2px 0 0; border-right: 1.5px solid var(--farbe-text-leise); border-bottom: 1.5px solid var(--farbe-text-leise); transform: rotate(45deg); }
.konto[open] > .konto-knopf::after { margin-top: 3px; transform: rotate(225deg); }
.konto-knopf:hover, .konto[open] > .konto-knopf { background: var(--farbe-grund); }
.konto-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-initialen { display: none; }
.konto-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; max-width: calc(100vw - 2 * var(--abstand-4)); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); box-shadow: var(--schatten); }
.konto-person { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--abstand-4); border-bottom: 1px solid var(--farbe-rand); overflow-wrap: anywhere; }
.konto-liste { list-style: none; margin: 0; padding: var(--abstand-2); }
.konto-liste a, .konto-eintrag { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--abstand-3); font: 500 var(--groesse-klein)/1.2 var(--schrift); color: var(--farbe-text); text-align: left; text-decoration: none; background: none; border: 0; border-radius: var(--radius-feld); cursor: pointer; }
.konto-liste a:hover, .konto-eintrag:hover { background: var(--farbe-grund); color: var(--farbe-text); }
.konto-liste a[aria-current=page] { color: var(--farbe-marke); }
.konto-sprache { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); min-height: 44px; padding: 0 var(--abstand-3); }
.konto-beschriftung { font-size: var(--groesse-klein); font-weight: 500; }
.konto-sprache .sprach-knopf { min-width: 44px; min-height: 44px; }

/* Neue Prüfung (L59): zwei Felder, ein Knopf, zwei eingeklappte Bereiche */
.start-felder { gap: 0 var(--abstand-5); align-items: start; }
.start-knopf { margin: var(--abstand-2) 0 var(--abstand-3); }
.knopfleiste.start-knopf .leise { flex: 0 1 auto; }
.start-beispiel { margin: 0; }
summary .leise { overflow-wrap: anywhere; }

/* Liste Prüfungen (L61) */
.liste-offen { display: block; margin-top: 2px; white-space: nowrap; }
.board td.firma .kennung { font-size: 0.8125rem; }

/* Feedback-Seite (L64) */
.feedback-formular { max-width: 640px; }
.feedback-formular textarea { width: 100%; }

/* Nachtrag Rundgang (B8 bis B30): weitere Filter, Tabellenspalten, Handy-Karten statt Tabellen */
details.weitere-filter { margin: 0 0 var(--abstand-4); }
details.weitere-filter .board-leiste { margin-bottom: 0; }
.tabelle td.mail { min-width: 17rem; overflow-wrap: anywhere; }
.tabelle td.wert { min-width: 17rem; font-family: var(--schrift-mono); overflow-wrap: anywhere; }
.tabelle td.zweizeilig .leise { display: block; }
.tabelle tr.folgezeile td { padding-top: 0; }
.beispiel-erwartung { margin-bottom: var(--abstand-2); }
.tabelle-fest { table-layout: fixed; }
.tabelle-fest .spalte-titel { width: auto; }
.tabelle-fest .spalte-status { width: 9rem; }
.tabelle-fest .spalte-e { width: 6rem; }
.quellen-details { margin: var(--abstand-2) 0 0; font-size: var(--groesse-klein); }
.quellen-details dt { font-weight: 500; color: var(--farbe-text-leise); }
.quellen-details dd { margin: 0 0 var(--abstand-2); }
.karten .karte details.einklapp { margin: 0 0 var(--abstand-3); }
.karten .karte details.einklapp p { color: var(--farbe-text); font-size: var(--groesse-klein); }
.karten .karte details.einklapp p.leise { color: var(--farbe-text-leise); }

@media screen and (max-width: 760px) {
  /* Tabellen mit .tabelle-karten werden auf dem Handy zu Karten: je Zeile eine Karte, Beschriftung aus data-label */
  .tabelle-scroll:has(> .tabelle-karten) { overflow: visible; background: none; border: 0; box-shadow: none; }
  .tabelle-karten, .tabelle-karten tbody, .tabelle-karten tr, .tabelle-karten td { display: block; width: 100%; }
  .tabelle-karten thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle-karten { background: none; }
  .tabelle-karten tr { position: relative; margin: 0 0 var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); box-shadow: var(--schatten); }
  /* .tabelle.tabelle-karten: höhere Spezifität als die späteren Grundregeln .tabelle td (Innenabstand, min-width) */
  .tabelle.tabelle-karten td { position: static; min-width: 0 !important; padding: 4px 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  .tabelle.tabelle-karten td[data-label]::before { content: attr(data-label); display: block; position: static; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--farbe-text-leise); }
  .tabelle-karten tbody tr:hover td { background: none; }
  .tabelle-karten td.zahl { text-align: left; }
  .tabelle-karten td .leise, .tabelle-karten td.firma .leise { display: block; }
  .tabelle-karten td.firma, .tabelle-karten td.nummer { font-weight: 500; }
  .tabelle-karten tr.mit-folgezeile { margin-bottom: 0; border-bottom: 0; border-radius: var(--radius-karte) var(--radius-karte) 0 0; box-shadow: none; }
  .tabelle-karten tr.folgezeile { margin-bottom: var(--abstand-3); padding-top: 0; border-top: 0; border-radius: 0 0 var(--radius-karte) var(--radius-karte); }
  .tabelle.tabelle-karten td.aktion, .tabelle.tabelle-karten tr.folgezeile td { padding-left: 0; }
  .tabelle-karten td.aktion .knopf { width: 100%; }
  /* Karte ganz anklickbar: der Link „Ansehen“ (Liste) bzw. der Name (Frachtführer) spannt sich über die Karte */
  .tabelle-karten td.aktion a::after, .tabelle-karten td.firma > a:first-child::after { content: ""; position: absolute; inset: 0; }
  .tabelle-karten td.zahl a { position: relative; z-index: 1; }
  /* Tippflächen mindestens 44 px (B27) */
  .tabelle td a, .board-leiste a, .seiten a, .sprunglink { display: inline-flex; align-items: center; min-height: 44px; }
  .tabelle-karten td.aktion a { padding: 0; }
  summary { min-height: 44px; }
  /* Admin (B34, B35, B39): die Seite scrollt nicht seitlich, Tabellen wischen in ihrer Karte; Unterpunkte in einer Zeile */
  .inhalt, .tabelle-scroll { min-width: 0; max-width: 100%; }
  .tabelle-scroll { position: relative; }   /* N13: schneidet auch absolut positionierte Kinder (nur-leser) ab */
  .filter.unternav { flex-wrap: nowrap; overflow-x: auto; }
  .filter.unternav a { flex: none; }
}
.nav { display: flex; align-items: stretch; gap: var(--abstand-5); align-self: stretch; }
.nav a { display: inline-flex; align-items: center; padding: 2px 0 0; border-bottom: 2px solid transparent; color: var(--farbe-text-leise); font-size: var(--groesse-klein); font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--farbe-text); }
.nav a.aktiv { color: var(--farbe-text); border-bottom-color: var(--farbe-marke); }

/* ---------- Inhalt ---------- */
.inhalt { max-width: var(--breite-inhalt); margin: 0 auto; padding: var(--abstand-6) var(--abstand-5) var(--abstand-7); }
.inhalt-schmal { max-width: 460px; padding-top: var(--abstand-8); }
.seitenkopf { margin-bottom: var(--abstand-5); }
.seitentitel { font-size: var(--groesse-h1); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.seitenuntertitel { margin: var(--abstand-1) 0 0; color: var(--farbe-text-leise); }
.inhalt-schmal .seitentitel { font-size: var(--groesse-h2); }
.fusszeile { max-width: var(--breite-inhalt); margin: 0 auto; padding: var(--abstand-5); color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--abstand-5); align-items: start; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--abstand-4); }
.raster-2 > .feld-voll { grid-column: 1 / -1; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--abstand-5); }

/* ---------- Karten ---------- */
.karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); padding: var(--abstand-5); margin: 0 0 var(--abstand-5); box-shadow: var(--schatten); }
.karte h2, .karte h3 { margin: 0 0 var(--abstand-4); font-size: var(--groesse-h3); }
.karte-kopf { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); margin-bottom: var(--abstand-4); }
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte > :last-child, .karte-koerper > :last-child { margin-bottom: 0; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--abstand-4); }
.karten .karte { margin: 0; }
.karten .karte p { flex: 1; font-size: var(--groesse-klein); color: var(--farbe-text-leise); }
.karten .karte { display: flex; flex-direction: column; }
.karten .karte .knopf { align-self: flex-start; }

/* ---------- Knöpfe ---------- */
.knopf, button.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: 40px; padding: 0 var(--abstand-4); font: 500 var(--groesse-klein)/1.2 var(--schrift); font-size: 0.9375rem; color: var(--farbe-marke-schrift); background: var(--farbe-marke); border: 1px solid var(--farbe-marke); border-radius: var(--radius-feld); text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s; }
.knopf:hover { background: var(--farbe-marke-dunkel); border-color: var(--farbe-marke-dunkel); color: var(--farbe-marke-schrift); }
.knopf-sekundaer, button.knopf-sekundaer { color: var(--farbe-text); background: var(--farbe-flaeche); border-color: var(--farbe-rand-knopf); }
.knopf-sekundaer:hover { color: var(--farbe-text); background: var(--farbe-grund); border-color: var(--farbe-rand-stark); }
.knopf-gefahr, button.knopf-gefahr { color: var(--farbe-fehler-vorn); background: var(--farbe-flaeche); border-color: var(--farbe-fehler-vorn); }
.knopf-gefahr:hover { color: var(--farbe-fehler-vorn); background: var(--farbe-fehler-grund); border-color: var(--farbe-fehler-vorn); }
.knopf-link, button.knopf-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--abstand-2); font: 500 0.9375rem/1.2 var(--schrift); color: var(--farbe-marke); background: none; border: 0; text-decoration: none; cursor: pointer; }
.knopf-link:hover { text-decoration: underline; background: none; }
.knopf-klein, button.knopf-klein { min-height: 34px; padding: 0 var(--abstand-3); font-size: var(--groesse-klein); }
.knopf[disabled], .knopf:disabled, .knopf[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.knopfleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-4); margin: var(--abstand-5) 0; }
.knopfleiste .leise { flex: 1 1 260px; margin: 0; }

/* ---------- Formulare ---------- */
.feld { margin-bottom: var(--abstand-4); min-width: 0; }
.feld-label { display: block; font-weight: 500; font-size: var(--groesse-klein); line-height: 1.4; margin-bottom: var(--abstand-1); color: var(--farbe-text); }
.feld-hilfe { display: block; color: var(--farbe-text-leise); font-size: var(--groesse-klein); margin: 0 0 var(--abstand-2); font-weight: 400; max-width: 62ch; }
.pflicht, .optional { margin-left: var(--abstand-2); font-weight: 400; font-size: 0.8125rem; color: var(--farbe-text-leise); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
  display: block; width: 100%; min-height: 40px; padding: var(--abstand-2) var(--abstand-3); font: 400 var(--groesse-text)/1.4 var(--schrift); color: var(--farbe-text);
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-feld); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=datetime-local], input:not([type]), textarea { appearance: none; -webkit-appearance: none; }
textarea { min-height: 88px; resize: vertical; }
textarea.text-gross { min-height: 280px; }
textarea.vorlage { font-size: var(--groesse-klein); }
input.eingabe-kennung, .eingabe-kennung { font-family: var(--schrift-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { outline: var(--fokus); outline-offset: 0; border-color: var(--farbe-marke); }
input::placeholder, textarea::placeholder { color: var(--farbe-text-leise); opacity: .8; }
input[type=file] { width: 100%; min-height: 40px; padding: var(--abstand-2); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-feld); background: var(--farbe-grund); font: inherit; font-size: var(--groesse-klein); }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; min-height: 28px; margin-right: var(--abstand-3); padding: 0 var(--abstand-3); cursor: pointer; background: var(--farbe-flaeche); color: var(--farbe-text); border: 1px solid var(--farbe-rand-knopf); border-radius: var(--radius-feld); }
.feld-fehler { display: block; color: var(--farbe-fehler-vorn); font-size: var(--groesse-klein); font-weight: 500; margin-bottom: var(--abstand-2); }
.feld-mit-fehler input, .feld-mit-fehler select, .feld-mit-fehler textarea { border-color: var(--farbe-fehler-vorn); }
.feldgruppe { border: 0; padding: 0; margin: 0 0 var(--abstand-4); min-width: 0; }
.feldgruppe > legend { padding: 0; font-weight: 500; font-size: var(--groesse-klein); margin-bottom: var(--abstand-2); }
.haken { display: flex; align-items: flex-start; gap: var(--abstand-3); min-height: 28px; margin-bottom: var(--abstand-3); }
.haken input { width: 18px; height: 18px; min-height: 0; flex: none; margin: 3px 0 0; accent-color: var(--farbe-marke); }
.haken label { font-weight: 400; }
.haken .feld-hilfe { margin: 0; }
.markiert { display: inline-block; vertical-align: middle; margin-left: var(--abstand-2); padding: 1px var(--abstand-2); background: var(--farbe-marke-hell); color: var(--farbe-marke-dunkel); border-radius: var(--radius-pille); font-size: 0.75rem; font-weight: 500; line-height: 1.6; }
.fehlerliste { background: var(--farbe-fehler-grund); border: 1px solid color-mix(in srgb, var(--farbe-fehler-vorn) 30%, white); border-radius: var(--radius-karte); padding: var(--abstand-4) var(--abstand-5); margin-bottom: var(--abstand-5); color: var(--farbe-fehler-vorn); }
.fehlerliste h2 { font-size: var(--groesse-text); margin: 0 0 var(--abstand-2); color: var(--farbe-fehler-vorn); }
.fehlerliste ul { margin: 0; padding-left: var(--abstand-5); }
.suche { display: flex; gap: var(--abstand-2); flex: 1 1 320px; max-width: 460px; }
.suche input { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.vorschau-zeile { margin: var(--abstand-2) 0 0; color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.vorschau-zeile .kennung { color: var(--farbe-text); }
.ablauf { margin: 0 0 var(--abstand-4); color: var(--farbe-text-leise); font-size: var(--groesse-klein); }

/* ---------- Einklappbereiche ---------- */
details.einklapp { margin: var(--abstand-3) 0; }
details.einklapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--abstand-2); min-height: 36px; font-weight: 500; font-size: var(--groesse-klein); color: var(--farbe-text); border-radius: var(--radius-feld); }
details.einklapp > summary::-webkit-details-marker { display: none; }
details.einklapp > summary::before { content: ""; width: 6px; height: 6px; flex: none; margin: 0 var(--abstand-1) 0 var(--abstand-1); border-right: 1.5px solid var(--farbe-text-leise); border-bottom: 1.5px solid var(--farbe-text-leise); transform: rotate(-45deg); transition: transform .12s; }
details.einklapp[open] > summary::before { transform: rotate(45deg); }
details.einklapp > summary:hover { color: var(--farbe-marke); }
details.einklapp > summary .leise { font-weight: 400; margin-left: auto; }
details.einklapp > .einklapp-inhalt { padding: var(--abstand-2) 0 var(--abstand-2); }
details.einklapp.eingerueckt > summary { color: var(--farbe-marke); }
details.einklapp.karte-einklapp { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); padding: var(--abstand-2) var(--abstand-5); margin: 0 0 var(--abstand-5); box-shadow: var(--schatten); }
details.einklapp.karte-einklapp > summary { min-height: 44px; font-size: var(--groesse-text); }
details.einklapp.karte-einklapp > .einklapp-inhalt { padding-bottom: var(--abstand-4); }
.formular-schritt { border-top: 1px solid var(--farbe-rand); margin-top: var(--abstand-3); padding-top: var(--abstand-1); }

/* ---------- Hinweise ---------- */
.hinweis { padding: var(--abstand-3) var(--abstand-4); margin: 0 0 var(--abstand-4); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); background: var(--farbe-flaeche); font-size: var(--groesse-klein); line-height: 1.5; }
.hinweis > :last-child { margin-bottom: 0; }
.hinweis strong:first-child { display: block; margin-bottom: 2px; }
.hinweis-info { background: var(--farbe-info-grund); border-color: var(--farbe-marke-mittel); color: var(--farbe-info-vorn); }
.hinweis-erfolg { background: var(--farbe-ok-grund); border-color: color-mix(in srgb, var(--farbe-ok-vorn) 25%, white); color: var(--farbe-ok-vorn); }
.hinweis-warnung { background: var(--farbe-offen-grund); border-color: color-mix(in srgb, var(--farbe-offen-vorn) 25%, white); color: var(--farbe-offen-vorn); }
.hinweis-fehler { background: var(--farbe-fehler-grund); border-color: color-mix(in srgb, var(--farbe-fehler-vorn) 30%, white); color: var(--farbe-fehler-vorn); }
.hinweis-fehler a { color: var(--farbe-fehler-vorn); font-weight: 500; }
.hinweis ul { margin: var(--abstand-1) 0 0; padding-left: var(--abstand-5); }

/* ---------- Status-Badges: heller Grund, dunkle Schrift ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 10px; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; vertical-align: middle; border-radius: var(--radius-pille); color: var(--farbe-neutral-vorn); background: var(--farbe-neutral-grund); }
.status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.status-erledigt, .status-aktiv, .status-fertig { color: var(--farbe-ok-vorn); background: var(--farbe-ok-grund); }
.status-abweichend, .status-gesperrt, .status-fehlt, .status-warnsignal { color: var(--farbe-fehler-vorn); background: var(--farbe-fehler-grund); }
.status-offen, .status-nur-lesen, .status-eingeschraenkt, .status-in-arbeit { color: var(--farbe-offen-vorn); background: var(--farbe-offen-grund); }
.status-nicht-pruefbar, .status-nicht-anwendbar, .status-beendet, .status-intern, .status-spaeter { color: var(--farbe-neutral-vorn); background: var(--farbe-neutral-grund); }
.status-test, .status-geplant, .status-info { color: var(--farbe-info-vorn); background: var(--farbe-info-grund); }
.status-leiste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0 0 var(--abstand-4); }

/* ---------- Kopf der Prüfung: Meta-Zeile mit Kennwerten ---------- */
.kennwerte { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-6); margin: 0 0 var(--abstand-5); padding: 0; }
.kennwerte > div { min-width: 0; }
.kennwerte dt { font-size: 0.8125rem; color: var(--farbe-text-leise); margin: 0; }
.kennwerte dd { margin: 0; font-size: var(--groesse-klein); font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Warnsignale: ruhige rote Hinweiskarte ---------- */
.warnkarte { background: var(--farbe-fehler-grund); border: 1px solid color-mix(in srgb, var(--farbe-fehler-vorn) 28%, white); border-radius: var(--radius-karte); padding: var(--abstand-4) var(--abstand-5); margin: var(--abstand-4) 0; color: var(--farbe-text); }
.warnkarte-titel { display: flex; align-items: baseline; gap: var(--abstand-2); margin: 0 0 var(--abstand-2); font-weight: 600; color: var(--farbe-fehler-vorn); }
.warnkarte-zahl { font-family: var(--schrift-mono); font-size: var(--groesse-h2); font-weight: 500; line-height: 1; }
.warnkarte-liste { margin: 0; padding-left: var(--abstand-5); }
.warnkarte-liste li { padding: 2px 0; }
.warnkarte a { color: var(--farbe-fehler-vorn); font-weight: 500; }

/* ---------- Nicht erreicht: graue Hinweiskarte, gestrichelter Rand ---------- */
.ausfall { background: var(--farbe-grund); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-karte); padding: var(--abstand-4) var(--abstand-5); margin: 0 0 var(--abstand-5); }
.ausfall-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-2); }
.ausfall h3 { margin: 0; font-size: var(--groesse-text); }
.ausfall p { margin-bottom: var(--abstand-2); }
.ausfall a { font-weight: 500; }

/* ---------- Karte „Domain und Firma“ ---------- */
.domainbox { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); margin: 0 0 var(--abstand-5); box-shadow: var(--schatten); }
.domainbox-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); padding: var(--abstand-4) var(--abstand-5) 0; }
.domainbox-kopf h2 { margin: 0; font-size: var(--groesse-h3); }
.domainbox-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-4) var(--abstand-6); padding: var(--abstand-4) var(--abstand-5); }
.domainbox-seite { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.domainbox-seite .etikett-name { font-size: 0.8125rem; color: var(--farbe-text-leise); }
.domainbox-seite strong { font-size: var(--groesse-mittel); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.domainbox-seite strong.kennung { font-size: var(--groesse-mittel); font-weight: 500; }
.domainbox-belege { padding: 0 var(--abstand-5) var(--abstand-4); font-size: var(--groesse-klein); color: var(--farbe-text-leise); }
.domainbox-belege ul { margin: var(--abstand-2) 0 0; padding-left: var(--abstand-5); }
.domainbox-belege li { margin-bottom: var(--abstand-1); }
.domainbox-satz { margin: 0; padding: var(--abstand-3) var(--abstand-5); border-top: 1px solid var(--farbe-rand); font-size: var(--groesse-klein); color: var(--farbe-text); }

/* ---------- Zusammenfassung und Fortschritt ---------- */
.zusammenfassung { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); padding: var(--abstand-5); margin: 0 0 var(--abstand-5); box-shadow: var(--schatten); }
.zusammenfassung h2 { margin: 0 0 var(--abstand-3); font-size: var(--groesse-h3); }
.zusammenfassung > :last-child { margin-bottom: 0; }
progress.balken { display: block; width: 100%; height: 8px; margin: 0 0 var(--abstand-4); border: 0; border-radius: var(--radius-pille); overflow: hidden; background: var(--farbe-rand); appearance: none; -webkit-appearance: none; }
progress.balken::-webkit-progress-bar { background: var(--farbe-rand); border-radius: var(--radius-pille); }
progress.balken::-webkit-progress-value { background: var(--farbe-marke); border-radius: var(--radius-pille); }
progress.balken::-moz-progress-bar { background: var(--farbe-marke); border-radius: var(--radius-pille); }
.offene-liste { background: var(--farbe-offen-grund); border-radius: var(--radius-feld); padding: var(--abstand-3) var(--abstand-4); margin: var(--abstand-3) 0; color: var(--farbe-offen-vorn); font-size: var(--groesse-klein); }
.offene-liste a { color: var(--farbe-offen-vorn); font-weight: 500; }
.freigabe-zeile { padding-top: var(--abstand-3); border-top: 1px solid var(--farbe-rand); margin: var(--abstand-4) 0 0; font-size: var(--groesse-klein); }

/* ---------- Tabellen ---------- */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--abstand-5); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); box-shadow: var(--schatten); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--groesse-klein); background: var(--farbe-flaeche); }
.tabelle th { text-align: left; font-size: 0.8125rem; font-weight: 500; color: var(--farbe-text-leise); padding: var(--abstand-3); border-bottom: 1px solid var(--farbe-rand); }
.tabelle td { padding: var(--abstand-3); border-bottom: 1px solid var(--farbe-rand); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--farbe-grund); }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle td.zahl { font-family: var(--schrift-mono); white-space: nowrap; }
.tabelle td .kennung { white-space: nowrap; }
.tabelle td.nummer { font-family: var(--schrift-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle td.nummer a { font-weight: 500; text-decoration: none; }
.tabelle td.zeit { font-family: var(--schrift-mono); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--farbe-text-leise); }
.tabelle td.firma { min-width: 160px; font-weight: 500; }
.tabelle td.firma .leise { display: block; font-weight: 400; }
.tabelle td.firma a { text-decoration: none; }
.tabelle .leer { padding: var(--abstand-7) var(--abstand-4); text-align: center; color: var(--farbe-text-leise); }
.tabelle tr.ersetzt td { color: var(--farbe-text-leise); text-decoration: line-through; }
.board-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-5); margin-bottom: var(--abstand-4); font-size: var(--groesse-klein); }
.filter { display: flex; flex-wrap: wrap; gap: var(--abstand-1); }
.filter a { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 34px; padding: 0 var(--abstand-3); border-radius: var(--radius-feld); color: var(--farbe-text-leise); text-decoration: none; font-size: var(--groesse-klein); font-weight: 500; }
.filter a:hover { background: var(--farbe-rand); color: var(--farbe-text); }
.filter a.aktiv { background: var(--farbe-flaeche); color: var(--farbe-text); border: 1px solid var(--farbe-rand); box-shadow: var(--schatten); }
.filter.unternav { margin-bottom: var(--abstand-5); }
.seiten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-4); color: var(--farbe-text-leise); font-size: var(--groesse-klein); }

/* ---------- Schlüssel-Wert-Liste ---------- */
.daten { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0 0 var(--abstand-5); padding: var(--abstand-1) var(--abstand-5); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); box-shadow: var(--schatten); font-size: var(--groesse-klein); }
.daten dt { color: var(--farbe-text-leise); padding: var(--abstand-3) var(--abstand-3) var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-rand); }
.daten dd { margin: 0; padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-rand); overflow-wrap: anywhere; display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-2); }
.daten > :nth-last-child(-n+2) { border-bottom: 0; }
.daten-klein { grid-template-columns: 170px minmax(0, 1fr); padding: 0; border: 0; box-shadow: none; background: none; margin-bottom: var(--abstand-3); }
.daten-klein dt, .daten-klein dd { padding-top: var(--abstand-2); padding-bottom: var(--abstand-2); }
.eintrag .daten-klein, .firmenprofil .daten-klein { background: none; }

/* ---------- Prüfschritte: ruhige Karten-Liste ---------- */
.phase { display: flex; align-items: baseline; gap: var(--abstand-3); margin: var(--abstand-6) 0 var(--abstand-3); }
.phase h3 { margin: 0; font-size: var(--groesse-klein); font-weight: 600; color: var(--farbe-text); }
.phase .leise { margin: 0; font-size: 0.8125rem; }
.schritt { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); padding: var(--abstand-4) var(--abstand-5); margin: 0 0 var(--abstand-3); scroll-margin-top: var(--abstand-4); box-shadow: var(--schatten); }
.schritt:target { outline: var(--fokus); outline-offset: 2px; }
.schritt-kopf { display: flex; align-items: center; gap: var(--abstand-3); }
.schritt-kopf h4 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--groesse-text); }
.schritt-kopf .status { margin-left: auto; flex: none; }
.schritt-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--farbe-grund); color: var(--farbe-text-leise); font-family: var(--schrift-mono); font-size: 0.8125rem; font-weight: 500; }
.schritt-erledigt .schritt-nr { background: var(--farbe-ok-grund); color: var(--farbe-ok-vorn); }
.schritt-abweichend .schritt-nr { background: var(--farbe-fehler-grund); color: var(--farbe-fehler-vorn); }
.schritt-offen .schritt-nr { background: var(--farbe-offen-grund); color: var(--farbe-offen-vorn); }
.schritt-koerper { padding: var(--abstand-2) 0 0 calc(26px + var(--abstand-3)); min-width: 0; }
.schritt-koerper > :last-child { margin-bottom: 0; }
.schritt-art { color: var(--farbe-text-leise); font-size: 0.8125rem; margin: 0 0 var(--abstand-1); }
.befunde { list-style: none; margin: var(--abstand-3) 0; padding: 0; font-size: var(--groesse-klein); }
.befunde li { padding: var(--abstand-2) 0; border-top: 1px solid var(--farbe-rand); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--abstand-1) var(--abstand-3); }
.befunde .status { justify-self: start; align-self: start; }
.befunde .quelle { display: block; color: var(--farbe-text-leise); font-size: 0.8125rem; }
.hilfe { background: var(--farbe-grund); border-radius: var(--radius-feld); padding: var(--abstand-2) var(--abstand-3); font-size: var(--groesse-klein); margin: var(--abstand-2) 0; }
.eintrag { background: var(--farbe-grund); border-radius: var(--radius-feld); padding: var(--abstand-3) var(--abstand-4); margin: var(--abstand-2) 0; font-size: var(--groesse-klein); }
.eintrag p { margin: var(--abstand-1) 0; }
.eintrag .notiz, .notiz { color: var(--farbe-text); }
.warn-zeile { color: var(--farbe-fehler-vorn); font-weight: 500; }
.hinweis-zeile { color: var(--farbe-offen-vorn); font-weight: 500; }
.assistent { background: var(--farbe-grund); border-radius: var(--radius-karte); padding: var(--abstand-4); margin: var(--abstand-3) 0; }
.assistent h4 { margin: 0 0 var(--abstand-2); }
.rueckruf-nummer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-3) var(--abstand-4); margin: var(--abstand-2) 0; }
.rueckruf-nummer .etikett-kennung { font-family: var(--schrift-mono); font-size: var(--groesse-h2); font-weight: 500; }
.nicht-verwenden { background: var(--farbe-fehler-grund); color: var(--farbe-fehler-vorn); border-radius: var(--radius-feld); padding: var(--abstand-2) var(--abstand-3); font-size: var(--groesse-klein); margin: var(--abstand-3) 0; }
.leitfaden ol { margin: var(--abstand-1) 0; padding-left: var(--abstand-5); font-size: var(--groesse-klein); }
.leitfaden li { margin: var(--abstand-1) 0; }
.code { display: inline-block; font-family: var(--schrift-mono); font-weight: 500; font-size: var(--groesse-h2); letter-spacing: 0.25em; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-feld); padding: 0 var(--abstand-3); }
.firmenprofil { margin: var(--abstand-2) 0; }
.firmenprofil h4 { margin: 0 0 var(--abstand-2); }
.siegel-fehler { margin-bottom: var(--abstand-5); }

/* ---------- Anmelden ---------- */
.anmeldung { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-karte); padding: var(--abstand-5); box-shadow: var(--schatten); }
.anmeldung .knopf { width: 100%; }
.anmeldung p { margin-bottom: 0; text-align: center; font-size: var(--groesse-klein); }
.rollen-formular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); }
.rollen-formular .haken { margin-bottom: 0; align-items: center; }

/* ---------- Protokoll und Druck (A4, schwarz-weiß) ---------- */
body.protokoll .inhalt { max-width: 960px; }
.p-schritt { border-top: 1px solid var(--farbe-rand); padding: var(--abstand-3) 0; }
.p-schritt .schritt-kopf, .p-schritt > p.leise { break-after: avoid; page-break-after: avoid; }
.p-schritt .schritt-kopf h4 { display: flex; gap: var(--abstand-2); }
.abfr td, .abfr th { font-size: 0.75rem; vertical-align: top; }
.abfr pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.75rem; max-height: 300px; overflow: auto; }
footer.fuss { margin-top: var(--abstand-5); border-top: 1px solid var(--farbe-rand); padding-top: 6px; font-size: 0.75rem; color: var(--farbe-text-leise); }
.seitenumbruch { page-break-before: always; }
@page { size: A4; margin: 14mm 12mm 10mm; }
table.druckrahmen { width: 100%; border-collapse: collapse; background: none; font-size: inherit; }
table.druckrahmen > tbody > tr > td, table.druckrahmen > tfoot > tr > td { padding: 0; border: 0; }
.fuss-platz { display: none; }

@media print {
  body { background: var(--farbe-flaeche); color: var(--farbe-druck); font-size: 11.5px; line-height: 1.45; }
  .inhalt { padding: 0; max-width: none; }
  .kopfleiste { border-bottom: 1px solid var(--farbe-druck); }
  .kopf-innen { padding: 6px 0; min-height: 0; }
  .marke img { height: 24px; }
  .nav, .nicht-drucken, details.einklapp > summary::before, .konto, .pilot-hinweis, .kopf-platz, .sprunglink { display: none !important; }
  .seitentitel { font-size: 22px; } h2 { font-size: 14px; margin: 14px 0 4px; } h1, h2, h3, h4, .seitenuntertitel, .leise, .beschriftung { color: var(--farbe-druck); }
  .leise, .hash, .seitenuntertitel { color: var(--farbe-druck-linie); }
  tr { page-break-inside: avoid; }
  .karte, .schritt, .domainbox, .zusammenfassung, .daten, .tabelle-scroll, .tabelle, .hinweis, .warnkarte, .ausfall, .eintrag, .assistent { box-shadow: none; background: none; border-radius: 0; }
  .karte, .schritt, .domainbox, .zusammenfassung, .daten, .tabelle-scroll, .hinweis, .warnkarte, .ausfall { border: 1px solid var(--farbe-druck-linie); color: var(--farbe-druck); }
  .tabelle th, .tabelle td, .daten dt, .daten dd { border-bottom-color: var(--farbe-druck-linie); color: var(--farbe-druck); }
  .tabelle th { color: var(--farbe-druck); font-weight: 600; }
  .status { background: none; border: 1px solid var(--farbe-druck); border-radius: 3px; color: var(--farbe-druck); padding: 0 5px; }
  .status::before { display: none; }
  .ausfall { border-style: dashed; }
  .warnkarte-titel, .warn-zeile, .hinweis-zeile, .warnkarte a { color: var(--farbe-druck); }
  progress.balken { display: none; }
  footer.fuss { position: fixed; bottom: 0; left: 0; right: 0; height: 12mm; background: var(--farbe-flaeche); margin: 0; font-size: 9px; color: var(--farbe-druck-linie); }
  .fuss-platz { display: block; height: 14mm; }
  table.druckrahmen > tbody > tr { page-break-inside: auto; break-inside: auto; }
  .abfr td, .abfr th { font-size: 9px; padding: 4px 6px; }
  .schritt, .karte, .domainbox, .warnkarte, .p-schritt .eintrag { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Kopfzeile bis 900 px: erste Zeile Logo, Pilot, Konto (bzw. Sprachwahl), zweite Zeile die Menüpunkte. Nur am Bildschirm:
   WeasyPrint rechnet die A4-Seite sonst als „schmal“ und würde die Kopfzeile des Nachweises umbauen. */
@media screen and (max-width: 900px) {
  .kopf-innen { flex-wrap: wrap; padding: 0 var(--abstand-4); gap: 0 var(--abstand-2); min-height: 0; }
  .marke { order: 1; min-height: 52px; flex: none; }
  .kopf-platz { display: none; }
  .pilot-hinweis, .sprachwahl, .konto { margin-left: auto; }
  .pilot-hinweis + .konto, .pilot-hinweis + .sprachwahl { margin-left: 0; }
  .pilot-hinweis { order: 3; }
  /* Pilot-Etikett: Tippfläche 44 px hoch, sichtbar bleibt die kleine Pille (Hintergrund am ::before) */
  a.pilot-hinweis { isolation: isolate; min-height: 44px; background: none; }
  a.pilot-hinweis::before { inset: 8px 0; z-index: -1; background: var(--farbe-offen-grund); border-radius: var(--radius-pille); }
  /* Konto: auf dem Handy nur die Initialen, der volle Name steht im geöffneten Menü und im aria-label */
  .konto-name { display: none; }
  .konto-initialen { display: inline; }
  .konto-knopf { min-width: 44px; justify-content: center; }
  .pilot-lang { display: none; }
  .pilot-kurz { display: inline; }
  .sprachwahl, .konto { order: 4; }
  .konto { flex: 0 1 auto; }
  .konto-knopf { max-width: 100%; min-height: 44px; }
  .nav { order: 5; flex: 1 0 100%; gap: var(--abstand-5); overflow-x: auto; margin: 0 calc(-1 * var(--abstand-4)); padding: 0 var(--abstand-4); border-top: 1px solid var(--farbe-rand); }
  .nav a { min-height: 44px; }
  .sprachwahl .sprach-knopf { min-width: 44px; min-height: 44px; }
  .sprachwahl { gap: 0; }
  .sprachwahl > span[aria-hidden] { display: none; }
}
@media (max-width: 760px) {
  :root { --groesse-h1: 1.5rem; }
  .inhalt { padding: var(--abstand-5) var(--abstand-4) var(--abstand-6); }
  .inhalt-schmal { padding-top: var(--abstand-6); }
  .raster-2, .raster-3 { grid-template-columns: minmax(0, 1fr); }
  .karte, .zusammenfassung, .schritt, .anmeldung { padding: var(--abstand-4); }
  details.einklapp.karte-einklapp { padding: var(--abstand-1) var(--abstand-4); }
  .domainbox-kopf { padding: var(--abstand-4) var(--abstand-4) 0; }
  .domainbox-paar { grid-template-columns: minmax(0, 1fr); padding: var(--abstand-4); gap: var(--abstand-3); }
  .domainbox-belege { padding: 0 var(--abstand-4) var(--abstand-4); }
  .domainbox-satz { padding: var(--abstand-3) var(--abstand-4); }
  .daten { grid-template-columns: minmax(0, 1fr); padding: var(--abstand-1) var(--abstand-4); }
  .daten dt { border-bottom: 0; padding-bottom: 0; }
  .daten dd { padding-top: var(--abstand-1); }
  .daten > :nth-last-child(2) { border-bottom: 1px solid var(--farbe-rand); }
  .daten-klein { padding: 0; }
  .schritt-koerper { padding-left: 0; }
  .schritt-kopf { flex-wrap: wrap; }
  .schritt-kopf .status { margin-left: calc(26px + var(--abstand-3)); }
  .befunde li { grid-template-columns: minmax(0, 1fr); }
  .knopfleiste .knopf, .knopfleiste button { width: 100%; }
  .knopfleiste .knopf-link { width: auto; }
  .knopf, button.knopf { min-height: 44px; }
  .knopf-klein, button.knopf-klein { min-height: 44px; }
  .knopf-link, button.knopf-link { min-height: 44px; }
  .filter a, .suche input { min-height: 44px; }
  details.einklapp > summary { flex-wrap: wrap; }
  details.einklapp > summary .leise { flex: 1 0 100%; margin-left: 0; padding-left: calc(6px + 2 * var(--abstand-1)); }
  .haken { min-height: 44px; align-items: center; }
  .haken input { width: 22px; height: 22px; margin: 0; }
  details.einklapp > summary { min-height: 44px; }
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=datetime-local], input:not([type]), select { min-height: 44px; }
  .suche { max-width: none; }
  .code { letter-spacing: 0.15em; }
  textarea.text-gross { min-height: 200px; }
  .rueckruf-nummer .etikett-kennung { font-size: var(--groesse-mittel); }
}

/* Admin Prüfumfang: „wie Standard (an)“ passt ohne Abschneiden (Abnahme Phase 5 + 6) */
select.auswahl-breit { min-width: 13rem; }

/* Ergebnis-Karte und Rückruf (Vereinfachung E28) */
@media screen {
.kennzeile { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); margin: 0 0 var(--abstand-4); color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.kennzeile > span { min-width: 0; overflow-wrap: anywhere; }
.kennzeile-name { color: var(--farbe-text-leise); }
.kennzeile-name::after { content: ":"; }
.ergebnis-karte { padding: var(--abstand-5); }
.kurzsatz { margin: 0 0 var(--abstand-4); font-size: var(--groesse-mittel); line-height: 1.45; }
.kurzsatz strong { font-weight: 600; }
.kurz-warn { color: var(--farbe-fehler-vorn); }
.ergebnis-zeile { padding: var(--abstand-3) 0; border-top: 1px solid var(--farbe-rand); }
.ergebnis-zeile-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); margin-bottom: var(--abstand-2); }
.ergebnis-zeile-kopf h3 { margin: 0; font-size: var(--groesse-text); }
.ergebnis-zeile p { margin-bottom: var(--abstand-2); }
.domain-paar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-1) var(--abstand-3); }
.domain-paar > span { min-width: 0; overflow-wrap: anywhere; }
.domain-paar .etikett-name { display: block; font-size: 0.8125rem; color: var(--farbe-text-leise); }
.domain-pfeil { color: var(--farbe-text-leise); }
.ergebnis-karte .warnkarte { margin: var(--abstand-3) 0; }
.ergebnis-karte .ausfall { margin: var(--abstand-3) 0 0; }
.ergebnis-hinweis { margin: var(--abstand-3) 0 0; }
.knopfleiste-eng { margin: var(--abstand-3) 0; }
.rueckruf-nummern { list-style: none; margin: 0 0 var(--abstand-2); padding: 0; }
.rueckruf-nummern li { margin: 0 0 var(--abstand-2); }
.rueckruf-nummern .rueckruf-nummer { margin: 0; }
.rueckruf-nummern .etikett-kennung { white-space: nowrap; }
.aktionszeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); margin: 0 0 var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); background: var(--farbe-grund); border-radius: var(--radius-feld); font-weight: 500; }
.aktionszeile .knopf { margin-left: auto; }
.aktion-nummer, .rueckruf-nummer a.etikett-kennung { font-family: var(--schrift-mono); white-space: nowrap; color: var(--farbe-text); text-decoration: none; }
.zuerst-anrufen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); margin: 0; }
.ergebnis-domain { border-top: 0; padding-top: 0; }
.ergebnis-domain .domain-paar { align-items: center; }
.ergebnis-domain .etikett-name { display: inline; margin-right: var(--abstand-1); }
.warnliste ul { margin: var(--abstand-2) 0; padding-left: var(--abstand-5); color: var(--farbe-fehler-vorn); }
.warnliste li { margin: var(--abstand-1) 0; color: var(--farbe-text); }
.warnliste li > span:first-child { color: var(--farbe-fehler-vorn); }
@media (max-width: 760px) {
  .ergebnis-karte { padding: var(--abstand-4); }
  .kurzsatz { font-size: var(--groesse-text); }
  .inhalt .karte a:not(.knopf), .inhalt .offene-liste a, .inhalt .warnkarte a, .inhalt .ausfall a, .inhalt .schritt a:not(.knopf),
  .inhalt details a, .inhalt .hinweis a { display: inline-flex; align-items: center; min-height: 44px; }
  .inhalt .kennzeile a { display: inline-flex; align-items: center; min-height: 44px; }
  .domain-pfeil { display: none; }
  .aktionszeile .knopf { margin-left: 0; width: 100%; }
  .inhalt .warnliste a { display: inline-flex; align-items: center; min-height: 44px; }
}
}

/* Admin: Kennung der Firma leise (B38), nur am Bildschirm */
@media screen {
.kennung { margin: var(--abstand-2) 0 var(--abstand-4); color: var(--farbe-text-leise); font-size: 0.75rem; overflow-wrap: anywhere; }
.kennung .hash { font-size: inherit; }
}

/* Leere Zustände: ein Satz und der nächste Schritt (L73), nur am Bildschirm */
@media screen {
.leer-zustand { margin: var(--abstand-4) 0; padding: var(--abstand-6) var(--abstand-4); text-align: center; background: var(--farbe-flaeche); border: 1px dashed var(--farbe-rand); border-radius: var(--radius-karte); }
.leer-zustand p { max-width: 46ch; margin: 0 auto var(--abstand-3); color: var(--farbe-text-leise); }
.leer-zustand .knopfleiste { justify-content: center; margin: 0; }
.leer-zustand-karte { margin: var(--abstand-3) 0; padding: var(--abstand-4); }
@media (max-width: 760px) {
  .leer-zustand .knopf { width: 100%; }
  .leer-zustand .knopf-link { min-height: 44px; }
}
}

/* Einführung (Phase 8): Willkommensseite, Hilfe-Seite, Hinweis-Kästen. Nur am Bildschirm. */
@media screen {
.einf-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); margin: 0 0 var(--abstand-4); padding: var(--abstand-3) var(--abstand-4); color: var(--farbe-info-vorn); background: var(--farbe-info-grund); border: 1px solid var(--farbe-marke-mittel); border-radius: var(--radius-feld); font-size: var(--groesse-klein); }
.einf-hinweis-text { flex: 1 1 16rem; margin: 0; color: var(--farbe-text); }
.einf-hinweis-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-3); margin: 0; }
.einf-beenden { font-weight: 400; color: var(--farbe-text-leise); }
.konto-panel .einf-hinweis { margin: var(--abstand-2); }
.einf-schritte { list-style: none; margin: 0 0 var(--abstand-5); padding: 0; }
.einf-schritt { display: flex; align-items: flex-start; gap: var(--abstand-4); margin: 0 0 var(--abstand-3); }
.einf-schritt h2, .einf-schritt h3 { margin: 0 0 var(--abstand-1); font-size: var(--groesse-mittel); }
.einf-schritt p { margin: 0; }
.einf-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 600; color: var(--farbe-marke-schrift); background: var(--farbe-marke); }
.einf-start { margin-bottom: var(--abstand-4); }
.einf-start .knopfleiste { margin-bottom: var(--abstand-2); }
.einf-start .leise { margin: 0; }
.einf-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: 0; }
.einf-ende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); margin: var(--abstand-4) 0; }
/* Willkommensseite kurz (Phase 8b, L75): Reihe 1 bis 4 (5), Pfeil dazwischen, am Handy als Liste untereinander */
.einf-reihe { list-style: none; display: flex; align-items: stretch; gap: var(--abstand-5); margin: 0 0 var(--abstand-5); padding: 0; }
.einf-kurz { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
.einf-kurz h2 { margin: var(--abstand-3) 0 var(--abstand-2); font-size: var(--groesse-mittel); }
.einf-kurz ul { margin: 0; padding-left: 1.1em; color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.einf-kurz li { margin: 0 0 var(--abstand-1); }
.einf-kurz:not(:last-child)::after { content: "\2192"; position: absolute; top: 18px; right: calc(-1 * var(--abstand-5)); width: var(--abstand-5); text-align: center; color: var(--farbe-text-leise); }
.einf-start { margin: 0 0 var(--abstand-3); }
.knopf-gross, button.knopf-gross { min-height: 52px; padding: 0 var(--abstand-6); font-size: var(--groesse-mittel); }
.einf-abschnitt { margin: var(--abstand-5) 0 var(--abstand-3); font-size: var(--groesse-mittel); }
/* CSS-Nachbau der Oberfläche auf der Hilfe-Seite (reine Dekoration, kein Fremd-Hosting) */
.einf-bild { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin-top: var(--abstand-3); padding: var(--abstand-3); background: var(--farbe-grund); border: 1px solid var(--farbe-rand); border-radius: var(--radius-feld); font-size: 0.75rem; color: var(--farbe-text-leise); }
.einf-feld { display: flex; flex-direction: column; gap: 2px; flex: 1 1 8rem; min-width: 0; }
.einf-feld i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einf-feld b { display: block; height: 22px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: 4px; }
.einf-knopf { display: inline-flex; align-items: center; padding: 4px 10px; color: var(--farbe-marke-schrift); background: var(--farbe-marke); border-radius: 4px; font-weight: 500; }
.einf-knopf-leise { color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-knopf); }
.einf-zeile { display: block; flex: 1 1 100%; height: 8px; background: var(--farbe-rand-knopf); border-radius: 4px; }
.einf-zeile-fett { height: 12px; background: var(--farbe-text-leise); }
.einf-zeile-kurz { flex-basis: 55%; }
.einf-marke { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; color: var(--farbe-fehler-vorn); background: var(--farbe-fehler-grund); }
.einf-zeile-titel { flex: 1 1 100%; font-weight: 600; color: var(--farbe-text); }
.einf-nummer { padding: 4px 10px; font-family: var(--schrift-mono); color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: 4px; }
.einf-pdf { padding: 4px 10px; color: var(--farbe-ok-vorn); background: var(--farbe-ok-grund); border-radius: 4px; }
}
@media screen and (max-width: 760px) {
  .einf-schritt { gap: var(--abstand-3); }
  .einf-hinweis { padding: var(--abstand-3); }
  .einf-hinweis-aktionen .knopf-klein { flex: 1 1 auto; }
  .einf-ende .knopf, .einf-inline .knopf, .einf-start .knopfleiste .knopf { width: 100%; }
  .einf-reihe { flex-direction: column; gap: var(--abstand-3); }
  .einf-kurz { padding-left: calc(32px + var(--abstand-4)); }
  .einf-kurz .einf-nr { position: absolute; top: var(--abstand-4); left: var(--abstand-4); }
  .einf-kurz h2 { margin-top: 0; }
  .einf-kurz:not(:last-child)::after { content: none; }
  .einf-start .knopf { width: 100%; }
  .einf-inline { display: flex; width: 100%; }
}
/* Ein-Klick (Phase 8b, L76/L77): Rückruf- und Entscheidungsknöpfe. Nur Bildschirm, kein Einfluss auf Protokoll und PDF. */
@media screen {
  .ein-klick { margin: var(--abstand-3) 0; }
  .ein-klick-frage { margin: 0 0 var(--abstand-2); }
  .ein-klick-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: var(--abstand-2) 0 var(--abstand-3); }
  .ein-klick-knoepfe .knopf, .karten .karte .ein-klick-knoepfe .knopf { align-self: auto; min-height: 44px; padding: 0 var(--abstand-5); white-space: nowrap; }
  .ein-klick-sperre { display: none; }
  .ein-klick-feld { max-width: 28rem; }
  .ein-klick-feld input { width: 100%; }
}
@media screen and (max-width: 760px) {
  .ein-klick-knoepfe { flex-direction: column; }
  .ein-klick-knoepfe .knopf, .karten .karte .ein-klick-knoepfe .knopf { width: 100%; min-height: 48px; }
  .ein-klick-feld { max-width: none; }
}