/* Look des Förderschmiede-Cockpits (Hülle, Knoten g3-huelle).
   Tokens und Regeln aus dem abgenommenen Entwurf (werkstatt/teil1.css), ohne Entwurfswerkzeug und ohne Inhalte.
   Farben und Schriften nach der Corporate-Design-Note; Abweichungen mit Grund im README des Pakets.
   Kein externer Abruf: Schriften liegen als WOFF2 im Ordner schriften neben dieser Datei. */

@font-face { font-family: "Montserrat"; src: url("schriften/montserrat-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("schriften/montserrat-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("schriften/montserrat-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("schriften/montserrat-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Russo One"; src: url("schriften/russo-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat Alternates"; src: url("schriften/montserrat-alternates-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* Farben aus dem Corporate Design */
  --signal: #11768C;
  --deep: #031926;
  --silber: #BDBFBF;
  --dunkelgrau: #1B2426;
  --weiss: #FFFFFF;
  --grund: #F5F8F9;
  /* abgeleitete Stufen, nur für Zustände und Text (README: Abweichungen) */
  --signal-dunkel: #0D5A6B;
  --signal-hell: #E7F1F4;
  --signal-zart: #F1F7F9;
  --text: #1B2426;
  --text-leise: #4C626A;
  --linie: #DDE6E8;
  --linie-zart: #EBF0F1;
  --erfolg: #246747;
  --erfolg-hell: #EDF7F0;
  --warnung: #694609;
  --warnung-hell: #FFF5DD;
  --fehler: #AC2437;
  --fehler-hell: #FFF2F3;
  --symbol: #7A8C92;
  --text-blass: #748790;
  --text-gruppe: #4C626A;
  --rand-feld: #748790;
  --text-menue: #34474E;
  --flaeche-kopf: #FAFCFC;
  --flaeche-grau: #EEF2F3;
  --flaeche-reiter: #E9EFF1;
  --signal-hell-hover: #D6E8ED;
  --text-platzhalter: #5A6E75;
  /* Abstände und Rundungen */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px;
  --r1: 6px; --r2: 10px; --r3: 14px;
  --schatten: 0 1px 2px rgba(3, 25, 38, .05), 0 4px 14px rgba(3, 25, 38, .05);
  --schatten-hoch: 0 2px 4px rgba(3, 25, 38, .06), 0 12px 32px rgba(3, 25, 38, .12);
  /* Förderschmiede-Winkel: 37,5 Grad gegen die Senkrechte, Breite durch Höhe 0,767 */
  --kante-h: 14px; --kante-b: 10.7px;
  --menue-breite: calc(248px + env(safe-area-inset-left, 0px));
  --schrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: "Russo One", "Montserrat", system-ui, sans-serif;
  --schrift-kicker: "Montserrat Alternates", "Montserrat", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 16px/1.5 var(--schrift); overflow-wrap: break-word;
}
h1, h2, h3, p { margin: 0; }
h1 { font: 400 clamp(26px, 3.2vw, 32px)/1.15 var(--schrift-titel); color: var(--deep); text-wrap: balance; letter-spacing: .01em; }
h2 { font: 400 20px/1.3 var(--schrift-titel); color: var(--deep); text-wrap: balance; letter-spacing: .01em; }
h3 { font: 400 16px/1.35 var(--schrift-titel); color: var(--deep); letter-spacing: .01em; }
p { text-wrap: pretty; }
a { color: var(--signal-dunkel); text-underline-offset: .18em; }
a.textlink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; vertical-align: middle; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

/* Fokusring: weißer Spalt, dann Signal Blue */
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--signal); }
/* Elemente mit Schnittkante oder in Behältern mit overflow: hidden bekommen den Ring nach innen */
.knopf:focus-visible, a.zeile:focus-visible, .unten a:focus-visible, .unten summary:focus-visible, .mehr-blatt a:focus-visible { box-shadow: inset 0 0 0 2px var(--weiss), inset 0 0 0 4px var(--deep); }
.knopf.zweit:focus-visible, .unten a:focus-visible, .unten summary:focus-visible, .mehr-blatt a:focus-visible { box-shadow: inset 0 0 0 3px var(--deep); }
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
.zahl, .zahlen { font-variant-numeric: tabular-nums; }
.leise { color: var(--text-leise); }
.klein { font-size: 14px; }
.vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.kicker { font: 500 12px/1.3 var(--schrift-kicker); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-dunkel); }
.springen { position: absolute; left: var(--a2); top: var(--a2); z-index: 70; display: inline-flex; align-items: center; min-height: 44px; padding: var(--a2) var(--a4); background: var(--weiss); color: var(--deep); font-weight: 600; border-radius: var(--r1); transform: translateY(-200%); }
.springen:focus { transform: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Hülle ---------- */
.huelle { display: grid; grid-template-columns: var(--menue-breite) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--weiss) calc(var(--menue-breite) - 1px), var(--linie-zart) calc(var(--menue-breite) - 1px), var(--linie-zart) var(--menue-breite), transparent var(--menue-breite)); }
.menue {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--a2);
  padding: var(--a4) var(--a4) calc(var(--a4) + env(safe-area-inset-bottom, 0px)) calc(var(--a4) + env(safe-area-inset-left, 0px)); background: var(--weiss); border-right: 1px solid var(--linie-zart);
}
.menue-logo { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--a2); align-self: flex-start; }
.menue-logo img { display: block; width: 112px; height: auto; }
.menue nav { display: flex; flex-direction: column; gap: 0; }
.menue-gruppe { margin: var(--a2) var(--a3) 2px; font: 500 11px/1.3 var(--schrift-kicker); letter-spacing: .1em; text-transform: uppercase; color: var(--text-gruppe); }
.menue-gruppe:first-child { margin-top: 0; }
.menue a.punkt {
  display: flex; align-items: center; gap: var(--a3); min-height: 44px; padding: 6px var(--a3);
  border-radius: var(--r2); color: var(--text-menue); text-decoration: none; font-size: 15px; font-weight: 500;
}
.menue a.punkt:hover { background: var(--signal-zart); }
.menue a.punkt svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: var(--symbol); }
.menue a.punkt[aria-current="page"] { background: var(--signal-hell); color: var(--signal-dunkel); }
.menue a.punkt[aria-current="page"] svg { stroke: var(--signal); }
.menue-fuss { margin-top: auto; display: flex; flex-direction: column; gap: var(--a2); padding-top: var(--a2); border-top: 1px solid var(--linie-zart); }
.crm-link { display: inline-flex; align-items: center; gap: var(--a2); min-height: 44px; padding: var(--a1) var(--a3); color: var(--text-leise); font-size: 13px; text-decoration: none; }
.crm-link svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; }
.crm-link:hover { color: var(--signal-dunkel); text-decoration: underline; }
.ich { display: flex; align-items: center; gap: var(--a3); padding: 0 var(--a2); min-width: 0; }
.ich-bild { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--weiss); font: 400 13px/1 var(--schrift-titel); }
.ich-text { min-width: 0; }
.ich-name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ich-rolle { font-size: 12px; color: var(--text-leise); }
.abmelden { margin: 0; }
.abmelden button { display: inline-flex; align-items: center; gap: var(--a2); min-height: 44px; min-width: 44px; padding: var(--a1) var(--a3); border: 0; background: transparent; color: var(--text-leise); font-size: 13px; cursor: pointer; text-decoration: none; }
.abmelden button:hover { color: var(--signal-dunkel); text-decoration: underline; }
.abmelden svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; }

/* Hinweisband bei "Ansicht als": ruhig, aber unübersehbar */
.ansicht-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2) var(--a4); padding: var(--a3) var(--a4); border-radius: var(--r3); background: var(--warnung-hell); color: var(--warnung); font-size: 14px; }
.ansicht-band b { font-weight: 600; }
.ansicht-band form { margin: 0; }

.huelle.ohne-menue { display: block; background: none; }

/* ---------- Inhalt ---------- */
.inhalt { min-width: 0; padding: var(--a6) calc(var(--a6) + env(safe-area-inset-right, 0px)) calc(var(--a8) + env(safe-area-inset-bottom, 0px)) var(--a6); }
.inhalt:focus { outline: none; }
.crm-handy { display: none; }
.inhalt-in { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--a6); }
.kopfzeile-handy { display: none; }
.seitenkopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4) var(--a6); align-items: start; }
.seitenkopf.mit-apollo { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); }
.seitenkopf-titel { display: flex; flex-direction: column; gap: var(--a2); padding-top: var(--a1); min-width: 0; }
.seitenkopf-titel p { color: var(--text-leise); max-width: 62ch; }
.seitenkopf-aufgabe { display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a2); }
.zurueck { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--a1); min-height: 44px; min-width: 44px; font-size: 14px; font-weight: 600; color: var(--signal-dunkel); text-decoration: none; }
.zurueck:hover { text-decoration: underline; }
h1[tabindex]:focus { outline: none; }
.apollo-platz { min-width: 0; }

/* ---------- Bausteine ---------- */
.abschnitt { display: flex; flex-direction: column; gap: var(--a4); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a2) var(--a4); }
.abschnitt-kopf p { color: var(--text-leise); font-size: 14px; }
.karte { background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten); padding: var(--a5); min-width: 0; }
.karte-flach { background: var(--weiss); border-radius: var(--r3); border: 1px solid var(--linie-zart); padding: var(--a5); min-width: 0; }
.raster { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.raster-2 { display: grid; gap: var(--a5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.raster-3 { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }

/* Aufgaben (Zeilen mit genau einem Knopf) */
.aufgaben { display: flex; flex-direction: column; background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten); overflow: hidden; }
.aufgabe { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--a2) var(--a4); align-items: center; padding: var(--a4) var(--a5); border-top: 1px solid var(--linie-zart); }
.aufgabe:first-child { border-top: 0; }
.aufgabe-wann { font: 600 15px/1.2 var(--schrift); color: var(--deep); font-variant-numeric: tabular-nums; }
.aufgabe-wann small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-leise); }
.aufgabe-was { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aufgabe-was b { font-weight: 600; color: var(--deep); }
.aufgabe-was span { font-size: 14px; color: var(--text-leise); }
.aufgabe-tun { display: flex; flex-wrap: wrap; gap: var(--a2); justify-content: flex-end; }

/* Fortschritt */
.balken { height: 10px; border-radius: 999px; background: var(--linie-zart); overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 999px; background: var(--signal); }
progress.balken { -webkit-appearance: none; appearance: none; width: 100%; border: 0; color: var(--signal); }
progress.balken::-webkit-progress-bar { background: var(--linie-zart); border-radius: 999px; }
progress.balken::-webkit-progress-value { background: var(--signal); border-radius: 999px; }
progress.balken::-moz-progress-bar { background: var(--signal); border-radius: 999px; }

/* Zahlenkacheln: große Zahl, darunter die Herkunft */
.kachel { background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten); padding: var(--a5); display: flex; flex-direction: column; gap: var(--a2); min-width: 0; }
.kachel-label { font-size: 14px; font-weight: 500; color: var(--text-leise); }
.kachel-wert { font: 400 40px/1.05 var(--schrift-titel); color: var(--deep); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kachel-wert.klein { font-size: 30px; }
.kachel-unter { font-size: 13px; color: var(--text-leise); }
.kachel-herkunft { margin-top: auto; font-size: 12px; color: var(--text-leise); }
.kachel.grau .kachel-wert { color: var(--text-blass); }
.ton-gut { color: var(--erfolg); }
.ton-mittel { color: var(--warnung); }
.ton-schlecht { color: var(--fehler); }
.kachel-bewertung { font-size: 13px; font-weight: 600; }

/* Marken */
.marken { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); }
.marke { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; background: var(--signal-zart); color: var(--signal-dunkel); white-space: normal; }
.marke::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.marke.erfolg { background: var(--erfolg-hell); color: var(--erfolg); }
.marke.warnung { background: var(--warnung-hell); color: var(--warnung); }
.marke.fehler { background: var(--fehler-hell); color: var(--fehler); }
.marke.grau { background: var(--flaeche-grau); color: var(--text-leise); }

/* Knöpfe: Schnittkante oben rechts und unten links */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: 44px; min-width: 44px; padding: var(--a2) var(--a4); border: 0; border-radius: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  background: var(--signal); color: var(--weiss);
  clip-path: polygon(0 0, calc(100% - var(--kante-b)) 0, 100% var(--kante-h), 100% 100%, var(--kante-b) 100%, 0 calc(100% - var(--kante-h)));
}
.knopf:hover { background: var(--signal-dunkel); }
.knopf:active { transform: scale(.97); }
.knopf.zweit { background: var(--signal-hell); color: var(--signal-dunkel); }
.knopf.zweit:hover { background: var(--signal-hell-hover); }
.knopf.text { background: transparent; color: var(--signal-dunkel); clip-path: none; padding: var(--a2); }
.knopf.text:hover { text-decoration: underline; background: transparent; }
.knopf[disabled], .knopf[aria-disabled="true"] { background: var(--flaeche-grau); color: var(--text-blass); cursor: not-allowed; }
.knopf[hidden] { display: none; }
@media (hover: hover) { .knopf { transition: background-color .15s ease-out; } }

/* Listen und Zeilen */
.liste { display: flex; flex-direction: column; background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten); overflow: hidden; }
.zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a2) var(--a4); align-items: center; padding: var(--a4) var(--a5); border-top: 1px solid var(--linie-zart); color: inherit; text-decoration: none; }
.zeile:first-child { border-top: 0; }
a.zeile:hover { background: var(--signal-zart); }
.zeile-haupt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zeile-haupt b { font-weight: 600; color: var(--deep); }
.zeile-haupt span { font-size: 14px; color: var(--text-leise); }
.zeile-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--a1); text-align: right; }

/* Tabelle, am Handy als Karten */
.tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten); overflow: hidden; font-size: 14px; }
.tabelle caption { text-align: left; padding: 0 0 var(--a2); font-weight: 600; color: var(--deep); }
.tabelle th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-leise); padding: var(--a3) var(--a4); background: var(--flaeche-kopf); border-bottom: 1px solid var(--linie-zart); }
.tabelle td { padding: var(--a3) var(--a4); border-top: 1px solid var(--linie-zart); vertical-align: middle; overflow-wrap: anywhere; }
.tabelle tr:first-child td { border-top: 0; }
.tabelle td.r, .tabelle th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; text-decoration: none; }
.tabelle a:hover { text-decoration: underline; }

/* Reiter innerhalb einer Seite */
.reiter { display: flex; flex-wrap: wrap; gap: var(--a1); padding: var(--a1); background: var(--flaeche-reiter); border-radius: 999px; align-self: flex-start; }
.reiter a, .reiter button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: var(--a1) var(--a4); border: 0; border-radius: 999px; background: transparent; color: var(--text-leise); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.reiter [aria-current="page"], .reiter [aria-pressed="true"] { background: var(--weiss); color: var(--deep); box-shadow: 0 1px 3px rgba(3, 25, 38, .12); }

/* Hinweis, Leerzustand, Fehlerzustand */
.hinweis { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3); padding: var(--a4) var(--a5); border-radius: var(--r3); background: var(--signal-zart); color: var(--deep); font-size: 14px; }
.hinweis.warnung { background: var(--warnung-hell); color: var(--warnung); }
.hinweis.fehler { background: var(--fehler-hell); color: var(--fehler); }
.hinweis.erfolg { background: var(--erfolg-hell); color: var(--erfolg); }
.hinweis b { font-weight: 600; }
.hinweis[hidden] { display: none; }
.leer { color: var(--text-leise); font-size: 14px; }
.zustand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a2); }
.zustand b { color: var(--deep); font-weight: 600; }
.zustand.fehler b { color: var(--fehler); }

/* Fakten */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--a4) var(--a5); margin: 0; }
.fakt { display: flex; flex-direction: column; gap: 2px; }
.fakt dt { font-size: 13px; color: var(--text-leise); }
.fakt dd { margin: 0; font-weight: 600; color: var(--deep); }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: var(--a4); margin: 0; }
.feld { display: flex; flex-direction: column; gap: var(--a1); }
.feld label, .feld .feld-name { font-size: 14px; font-weight: 600; color: var(--deep); }
.feld small { font-size: 13px; color: var(--text-leise); }
.feld .pflicht { font-weight: 500; color: var(--text-leise); }
.eingabe, .formular input[type="text"], .formular input[type="email"], .formular input[type="number"], .formular input[type="date"], .formular select, .formular textarea {
  width: 100%; min-height: 44px; padding: var(--a2) var(--a3); border-radius: var(--r1); border: 1px solid var(--rand-feld); background: var(--weiss); font-size: 16px;
}
.formular textarea { min-height: 120px; }
.formular-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); }
.haken { display: flex; align-items: center; gap: var(--a2); min-height: 44px; font-size: 14px; color: var(--text); cursor: pointer; }
.haken input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--signal-dunkel); }
.chips { display: flex; flex-wrap: wrap; gap: var(--a2); }
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: var(--a1) var(--a3); border-radius: 999px; border: 1px solid var(--rand-feld); background: var(--weiss); color: var(--text-leise); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--deep); border-color: var(--deep); color: var(--weiss); }
.suche { width: 100%; height: 44px; padding: 0 var(--a4); border-radius: 999px; border: 1px solid var(--rand-feld); background: var(--weiss); font-size: 16px; }
.suche::placeholder, .eingabe::placeholder { color: var(--text-platzhalter); opacity: 1; }

/* Fließtext (Wissen und Erklärungen) */
.artikel { max-width: 72ch; display: flex; flex-direction: column; gap: var(--a4); }
.artikel h2 { margin-top: var(--a4); }
.artikel ul, .artikel ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: var(--a2); }

/* Fehler- und Aufbauseite der Gerüste (ohne Menü) */
.fehlerseite, .aufbau { max-width: 560px; margin: 12vh auto var(--a6); padding: var(--a6); background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: var(--a3); }
.fehlerseite a, .aufbau a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Untere Leiste und Mehr, nur Handy */
.unten { display: none; }

@media (max-width: 1180px) {
  .seitenkopf.mit-apollo { grid-template-columns: minmax(0, 1fr); }
  .apollo-platz { max-width: 560px; }
}
@media (max-width: 1023px) {
  :root { --menue-breite: calc(216px + env(safe-area-inset-left, 0px)); }
  .inhalt { padding: var(--a5) calc(var(--a5) + env(safe-area-inset-right, 0px)) calc(var(--a7) + env(safe-area-inset-bottom, 0px)) var(--a5); }
}
@media (max-width: 900px) {
  .tabelle.karten thead { display: none; }
  .tabelle.karten caption { display: block; width: 100%; }
  .tabelle.karten, .tabelle.karten tbody, .tabelle.karten tr, .tabelle.karten td { display: block; width: 100%; }
  .tabelle.karten tr { padding: var(--a3) var(--a4); border-top: 1px solid var(--linie-zart); }
  .tabelle.karten tr:first-child { border-top: 0; }
  .tabelle.karten td { border: 0; padding: 2px 0; display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: var(--a3); text-align: left; }
  .tabelle.karten td.r { text-align: left; }
  .tabelle.karten td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-leise); }
  .tabelle.karten td.titel { display: block; padding-bottom: var(--a1); font-size: 15px; }
  .tabelle.karten td.titel::before { content: none; }
}
@media (max-width: 767px) {
  .huelle { display: block; min-height: 0; background: none; }
  .menue { display: none; }
  .inhalt { padding: var(--a4) calc(var(--a4) + env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) calc(var(--a4) + env(safe-area-inset-left, 0px)); }
  .crm-handy { display: flex; justify-content: center; padding-top: var(--a2); border-top: 1px solid var(--linie-zart); }
  .inhalt-in { gap: var(--a5); }
  .kopfzeile-handy { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); position: relative; }
  .kopfzeile-handy .marke-handy { display: inline-flex; align-items: center; min-height: 44px; }
  .kopfzeile-handy .marke-handy img { width: 84px; height: auto; display: block; }
  .ich-handy { position: relative; }
  .ich-handy > summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 50%; }
  .ich-handy-blatt { position: absolute; right: 0; top: calc(100% + var(--a1)); z-index: 32; width: min(280px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--a1); padding: var(--a3); background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten-hoch); }
  .ich-handy-blatt .ich { padding: var(--a1) var(--a2) var(--a2); }
  .seitenkopf { gap: var(--a3); }
  .apollo-platz { max-width: none; }
  .karte, .karte-flach, .kachel { padding: var(--a4); }
  .aufgabe { grid-template-columns: minmax(0, 1fr); gap: var(--a2); padding: var(--a4); }
  .aufgabe-wann { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a2); }
  .aufgabe-wann small { margin-top: 0; }
  .aufgabe-tun { justify-content: flex-start; }
  .zeile { padding: var(--a3) var(--a4); }
  .kachel-wert { font-size: 32px; }
  .fehlerseite, .aufbau { margin: var(--a5) var(--a4); padding: var(--a5); }
  /* Tastaturfokus nie unter der Leiste unten */
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .unten {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: var(--a1) calc(var(--a1) + env(safe-area-inset-right, 0px)) calc(var(--a1) + env(safe-area-inset-bottom, 0px)) calc(var(--a1) + env(safe-area-inset-left, 0px));
    background: var(--weiss); border-top: 1px solid var(--linie); box-shadow: 0 -4px 18px rgba(3, 25, 38, .06);
  }
  .unten > a, .unten > details > summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; min-width: 0; padding: var(--a1) 2px; border: 0; background: transparent; border-radius: var(--r2);
    color: var(--text-leise); font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .unten > details { min-width: 0; }
  .unten svg { width: 22px; height: 22px; stroke: var(--symbol); flex: 0 0 22px; }
  .unten [aria-current="page"], .unten summary.aktiv, .unten details[open] > summary { color: var(--signal-dunkel); background: var(--signal-hell); }
  .unten [aria-current="page"] svg, .unten summary.aktiv svg, .unten details[open] > summary svg { stroke: var(--signal); }
  .mehr-blatt {
    display: flex; flex-direction: column; gap: var(--a1); position: fixed; left: calc(var(--a2) + env(safe-area-inset-left, 0px)); right: calc(var(--a2) + env(safe-area-inset-right, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 31;
    max-height: calc(100vh - 96px); overflow-y: auto;
    padding: var(--a3); background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten-hoch);
  }
  .mehr-blatt a.punkt { display: flex; align-items: center; gap: var(--a3); min-height: 48px; padding: var(--a2) var(--a3); border-radius: var(--r2); color: var(--deep); font-weight: 600; text-decoration: none; }
  .mehr-blatt a.punkt svg { width: 20px; height: 20px; stroke: var(--symbol); }
  .mehr-blatt a.punkt[aria-current="page"] { background: var(--signal-hell); color: var(--signal-dunkel); }
  .mehr-blatt .crm-link { padding: var(--a3); }
}
@media (max-width: 380px) {
  .inhalt { padding-left: calc(var(--a3) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--a3) + env(safe-area-inset-right, 0px)); }
  .reiter a, .reiter button { padding: var(--a1) var(--a3); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Fokusring zuletzt: kein Zustand darf ihn überschreiben */
.reiter [aria-pressed]:focus-visible, .reiter [aria-current]:focus-visible, .chip[aria-pressed]:focus-visible, .menue a.punkt[aria-current]:focus-visible { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--signal); }
.unten [aria-current]:focus-visible, .unten summary.aktiv:focus-visible, .mehr-blatt a.punkt[aria-current]:focus-visible { box-shadow: inset 0 0 0 3px var(--deep); }

@media print {
  .menue, .unten, .kopfzeile-handy, .crm-handy, .springen { display: none !important; }
  .huelle { display: block; background: none; }
  body { background: var(--weiss); }
}