/* Schriften selbst gehostet (Barlow, SIL Open Font License 1.1) – keine Verbindung nach außen. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/barlow-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/barlowcondensed-700-latin.woff2) format('woff2'); }

/* Farben wie auf der Reintjes-Website */
:root {
  --schwarz:#1f282b; --weiss:#ffffff; --milch:#f3f6f4; --stahl:#d5dcdd; --stahl-tief:#5b686e;
  --gruen:#4f9e36; --gruen-tief:#1d4a27; --gelb:#f6c800; --rot:#b3261e; --gruen-hell:#e3f1dd;
  --ziel:56px;
  --rand-l:max(16px, env(safe-area-inset-left)); --rand-r:max(16px, env(safe-area-inset-right)); /* Querformat: Notch/Ecken */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; font:18px/1.45 'Barlow', system-ui, sans-serif; background:var(--milch); color:var(--schwarz); }
h1, h2, legend { font-family:'Barlow Condensed', 'Barlow', system-ui, sans-serif; font-weight:700; }
a { color:var(--gruen-tief); }
:focus-visible { outline:3px solid var(--gelb); outline-offset:2px; }

/* Testinstanz (FAHRER_APP_TESTSYSTEM=1): gut sichtbar, aber ohne die Bedienung zu verdecken. */
.testsystem-band { margin:0; padding:8px var(--rand-r) 8px var(--rand-l); color:var(--schwarz); font-weight:700; font-size:18px; line-height:1.3; text-align:center;
  background:repeating-linear-gradient(-45deg, var(--gelb) 0 14px, var(--weiss) 14px 28px); border-bottom:3px solid var(--schwarz); }
.testsystem-band { text-shadow:0 0 4px var(--weiss), 0 0 2px var(--weiss); }
/* iPhone (Home-Bildschirm): Platz für Statusleiste und Ecken; der dunkle Streifen deckt beim Scrollen den Bereich der Uhr ab. */
.kopf { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 16px; background:var(--schwarz); color:var(--weiss); min-height:64px;
  padding-top:calc(4px + env(safe-area-inset-top)); padding-left:var(--rand-l); padding-right:var(--rand-r); }
body::before { content:""; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); background:var(--schwarz); z-index:10; pointer-events:none; }
.kopf-titel { color:var(--weiss); font-weight:600; font-size:20px; text-decoration:none; display:inline-flex; align-items:center; min-height:48px; }
.kopf-bereich { color:var(--gelb); margin-left:6px; }
.kopf-rechts { display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap; justify-content:flex-end; }
.kopf-konto { color:var(--weiss); font-weight:600; }
.kopf-abmelden { margin:0; }
.kopf-knopf { min-height:40px; padding:0 14px; font:inherit; font-size:16px; font-weight:600; color:var(--weiss); background:none;
  border:1.5px solid rgba(255,255,255,.5); border-radius:8px; cursor:pointer; }
.kopf-knopf:hover { background:rgba(255,255,255,.12); }
.kopf-titel { white-space:nowrap; }
@media (max-width:700px) {
  .buero .kopf { flex-wrap:wrap; padding-bottom:8px; }
  .buero .kopf-rechts { width:100%; flex-wrap:nowrap; gap:8px; }
  .buero .kopf-konto { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .buero .sprachen a { padding:0 8px; min-width:44px; }
}
.sprachen a { color:var(--weiss); text-decoration:none; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; min-width:var(--ziel); min-height:var(--ziel); }
.sprachen a[aria-current] { background:var(--gelb); color:var(--schwarz); font-weight:600; }
main { padding:16px var(--rand-r) 16px var(--rand-l); }

/* --- Fahrer-Oberfläche: Touch-Ziele ≥ 56 px, Schrift ≥ 18 px --- */
.fahrer main { max-width:640px; margin:0 auto; }
.fahrer h1 { font-size:30px; margin:8px 0 16px; }
.fahrer h2 { font-size:24px; margin:0 0 12px; }

.status { position:sticky; top:env(safe-area-inset-top); z-index:5; margin:-16px -16px 16px; padding:12px 16px; font-size:20px; font-weight:600;
  background:var(--gruen-hell); color:var(--gruen-tief); border-bottom:2px solid var(--gruen); }
.status p { margin:0; }
.status.offen { background:var(--gelb); color:var(--schwarz); border-color:#a88a00; }
.status.fehler { background:var(--rot); color:var(--weiss); border-color:#7a1712; }
.status-fehler { margin:8px 0 0; padding-left:24px; font-weight:400; font-size:18px; }
.status-fehler li a { color:var(--weiss); font-weight:600; }
.status .knopf { margin-top:8px; }
.status-fehler li { margin:0 0 8px; }
.status-fehler li .knopf { margin:8px 8px 0 0; }
.status-fehler li p { margin:8px 0 0; }

.karte { background:var(--weiss); border:1px solid var(--stahl); border-radius:12px; padding:16px; margin:0 0 16px; }
.fahrer fieldset { border:0; margin:0; padding:0; min-width:0; }
.feld { margin:0 0 16px; }
.feld:last-child { margin-bottom:0; }
.fahrer label, .fahrer legend { display:block; font-weight:600; margin:0 0 6px; padding:0; }
.fahrer legend { font-size:22px; }
.fahrer input[type=text], .fahrer input[type=time], .fahrer input[type=date] {
  display:block; width:100%; min-height:var(--ziel); padding:10px 14px; font:inherit; font-size:22px;
  border:2px solid var(--stahl-tief); border-radius:10px; background:var(--weiss); color:var(--schwarz); }
.fahrer input[aria-invalid=true] { border-color:var(--rot); box-shadow:0 0 0 1px var(--rot); background:#fdf0ef; }
.warnung.am-feld { margin:-10px 0 16px; }   /* gehört sichtbar zum Feld darüber */
.feld-fehler, .warnung { color:var(--rot); font-weight:600; margin:6px 0 0; }
.hinweis, .hinweis-text { color:var(--stahl-tief); font-size:18px; margin:8px 0 0; }
.zeile { display:flex; gap:8px; }
.zeile input { flex:1; min-width:0; }

.knopf { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--ziel); min-width:var(--ziel);
  padding:10px 18px; font:inherit; font-size:20px; font-weight:600; text-decoration:none; text-align:center; cursor:pointer;
  border:2px solid var(--gruen-tief); border-radius:10px; background:var(--weiss); color:var(--gruen-tief); }
.knopf.haupt { background:var(--gruen-tief); color:var(--weiss); }
.knopf.breit { display:flex; width:100%; margin:0 0 12px; }
.knopf.riesig { min-height:88px; font-size:24px; }
.knopf.jetzt { flex:0 0 auto; margin:0; }
.knopf:disabled { opacity:.5; cursor:not-allowed; }

.kacheln { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.kacheln.zwei { grid-template-columns:1fr 1fr; }
.fahrer .kachel { position:relative; margin:0; }
.kachel input { position:absolute; opacity:0; width:1px; height:1px; }
.kachel span { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:64px; padding:8px; text-align:center;
  border:2px solid var(--stahl-tief); border-radius:10px; background:var(--weiss); font-size:22px; cursor:pointer; }
.kachel small { font-size:18px; font-weight:400; }
.kachel input:checked + span { background:var(--gruen-tief); border-color:var(--gruen-tief); color:var(--weiss); }
.kachel input:focus-visible + span { outline:3px solid var(--gelb); outline-offset:2px; }

.vorschlaege { margin:0 0 12px; }
.vorschlag-knopf { flex-direction:column; min-height:72px; font-size:24px; line-height:1.2; }
.vorschlag-knopf small { font-size:16px; font-weight:400; }
.vorschlag { margin-top:12px; padding:12px; border-radius:10px; background:var(--gruen-hell); }
.vorschlag p { margin:0 0 8px; }

.touren { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tour-kachel { display:flex; flex-direction:column; justify-content:center; min-height:104px; padding:12px; border-radius:12px;
  text-decoration:none; background:var(--milch); border:2px solid var(--gruen); color:var(--schwarz); }
.tour-nr { font-family:'Barlow Condensed', 'Barlow', sans-serif; font-weight:700; font-size:26px; color:var(--gruen-tief); }
.tour-info { font-size:18px; }

.unsichtbar { position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.fahrer .foto-knopf { display:flex; width:100%; margin:0; }
.foto-knopf:focus-within { outline:3px solid var(--gelb); outline-offset:2px; }
.foto-status { font-weight:600; margin:8px 0 0; }
.foto-vorschau { display:block; max-width:100%; margin-top:8px; border-radius:8px; border:1px solid var(--stahl); }
.frage { border-color:var(--gelb); border-width:3px; }
.frage p { margin:0 0 12px; font-weight:600; }
/* Abmelden: selten gebraucht, darum dezent und mit Abstand (Design-Befund B-13) */
.abmelden { margin-top:48px; text-align:center; }
.knopf-text { min-height:var(--ziel); padding:0 20px; border:0; background:none; font:inherit; font-weight:600;
  color:var(--stahl-tief); text-decoration:underline; cursor:pointer; }

/* Rückweg oben auf Fahrer-Unterseiten (Web-App ohne Browser-Zurück, B-04) */
.zurueck-leiste { margin:0 0 8px; }
.zurueck { display:inline-flex; align-items:center; gap:8px; min-height:var(--ziel); padding:0 16px 0 8px; margin-left:-8px;
  font-size:20px; font-weight:600; color:var(--gruen-tief); text-decoration:none; border-radius:8px; }
.zurueck span { font-size:32px; line-height:1; }
.zurueck:hover, .zurueck:focus-visible { background:var(--gruen-hell); }

/* Ansprache mit Vornamen (B-03) */
.gruss { margin:-8px 0 16px; font-size:22px; font-weight:600; color:var(--gruen-tief); }
.bitte { margin:0 0 12px; font-size:20px; font-weight:600; }

/* Fehlerseite (B-02) */
.fehlerseite { max-width:560px; margin:24px auto; }

/* --- Büro-Oberfläche --- */
/* Menü: aktuelle Seite als Reiter mit gelbem Balken (B-05); am Handy waagerecht wischbar */
.buero-nav { display:flex; justify-content:space-between; gap:8px 24px; margin:-16px calc(-1 * var(--rand-r)) 20px calc(-1 * var(--rand-l)); padding:0 var(--rand-r) 0 var(--rand-l);
  background:var(--weiss); border-bottom:1px solid var(--stahl); overflow-x:auto; }
.nav-gruppe { display:flex; gap:4px; flex:0 0 auto; }
.buero-nav a { display:inline-flex; align-items:center; min-height:52px; padding:0 12px; font-weight:600; white-space:nowrap;
  color:var(--stahl-tief); text-decoration:none; border-bottom:4px solid transparent; }
.buero-nav a:hover { color:var(--gruen-tief); }
.buero-nav a[aria-current=page] { color:var(--schwarz); border-bottom-color:var(--gelb); }

/* Büro-Grundstil (B-07): Felder und Knöpfe einheitlich, nicht Browser-Standard */
.buero main { max-width:1400px; margin:0 auto; }
.buero h1 { font-size:34px; margin:4px 0 16px; }
.buero input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .buero select, .buero textarea {
  min-height:44px; padding:6px 12px; font:inherit; font-size:17px; color:var(--schwarz); background:var(--weiss);
  border:1.5px solid var(--stahl-tief); border-radius:8px; }
.buero input[type=file] { font:inherit; font-size:16px; }
.buero input[type=checkbox], .buero input[type=radio] { width:20px; height:20px; vertical-align:-4px; accent-color:var(--gruen-tief); }
.buero .knopf { min-height:44px; min-width:0; padding:6px 16px; font-size:17px; }
.knopf.gefahr { border-color:var(--rot); color:var(--rot); background:var(--weiss); }
.knopf.gefahr:hover { background:#fbeaea; }
.knopf.haupt:hover { background:#163a1f; }
.filter { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:end; margin:0 0 16px; }
.tabelle-rahmen { overflow-x:auto; }
.tabelle { border-collapse:collapse; width:100%; background:var(--weiss); font-size:16px; }
.tabelle th, .tabelle td { padding:8px 10px; border:1px solid var(--stahl); text-align:left; vertical-align:top; }
.tabelle th { background:var(--milch); }
.zeile-rot td:first-child { border-left:6px solid var(--rot); }
.zeile-gruen td:first-child { border-left:6px solid var(--gruen); }
.zeile-gelb td:first-child { border-left:6px solid var(--gelb); }
.zaehler { display:inline-block; margin:0 0 12px; padding:10px 16px; border-radius:10px; background:var(--weiss);
  border:1px solid var(--stahl); font-size:20px; font-weight:600; }
.marke { display:inline-block; padding:2px 8px; border-radius:6px; font-weight:600; font-size:14px; }
.marke.rot { background:var(--rot); color:var(--weiss); }
.marke.gruen { background:var(--gruen-hell); color:var(--gruen-tief); border:1px solid var(--gruen); }
.marke.gelb { background:var(--gelb); color:var(--schwarz); }
.foto-klein { width:80px; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--stahl); margin:2px; vertical-align:middle; }
.status-form { display:flex; flex-direction:column; gap:6px; min-width:200px; }
.status-form button[aria-pressed=true] { background:var(--gruen-tief); border-color:var(--gruen-tief); color:var(--weiss); }
.fehler { color:var(--rot); font-weight:600; }
.erfolg { color:var(--gruen-tief); font-weight:600; }
.hinweis-karte { border-left:6px solid var(--gelb); }

/* --- Anmeldeseite: wie die Fahrer-Seiten, auf dem Handy gut bedienbar --- */
.login main { max-width:480px; margin:0 auto; }
.login .formular label { display:block; font-weight:600; margin:0 0 16px; }
.login .formular input { display:block; width:100%; min-height:var(--ziel); margin-top:6px; padding:10px 14px; font:inherit; font-size:22px;
  border:2px solid var(--stahl-tief); border-radius:10px; background:var(--weiss); color:var(--schwarz); }
.login .formular button { display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--ziel); padding:10px 18px;
  font:inherit; font-size:20px; font-weight:600; cursor:pointer; border:2px solid var(--gruen-tief); border-radius:10px;
  background:var(--gruen-tief); color:var(--weiss); }
.formular-breit { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px 16px; align-items:end; max-width:1100px; }
.formular-breit label { display:block; font-weight:600; }
.formular-breit input:not([type=checkbox]), .formular-breit select { display:block; width:100%; }
.tour-feld { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px 16px; }
.warnung-text { background:var(--gelb); padding:8px 12px; border-radius:6px; font-weight:600; }

/* --- Betriebslogo (app/static/betrieb/) --- */
.kopf-titel { gap:12px; }
.kopf-logo { display:block; height:40px; width:auto; }
.kopf-app { font-size:18px; }
.logo-gross { display:block; width:min(100%, 360px); height:auto; margin:8px auto 24px; }
.fehlerseite .logo-gross { width:min(100%, 240px); margin-top:0; }
@media (max-width:420px) { .kopf-logo { height:32px; } .kopf-app { font-size:16px; } }

/* --- Meldung nach einer Büro-Aktion (B-09) --- */
.meldung-leiste { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 16px; padding:10px 16px;
  border-radius:10px; background:var(--gruen-hell); border:1px solid var(--gruen); color:var(--gruen-tief); font-weight:600; }
.meldung-leiste p { margin:0; }

/* --- Abgleich: Zeile nach dem Markieren hervorheben (B-10), Spalte „Markieren“ (B-11) --- */
.tabelle tr { scroll-margin-top:24px; }
.tabelle tr:target td { background:#fff8d6; }
.feld-kurz { display:block; font-size:14px; font-weight:600; color:var(--stahl-tief); }
.feld-kurz input { display:block; width:100%; margin-top:2px; }
.umschalter { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.knopf-text.klein { min-height:32px; padding:0; font-size:15px; text-align:left; }

/* --- Abschluss: was noch fehlt, direkt über dem Knopf (B-12) --- */
.fehlt-karte { border:3px solid var(--gelb); }
.fehlt-karte p { margin:0 0 8px; font-weight:600; }
.fehlt-karte ul { margin:0; padding:0; list-style:none; }
.fehlt-karte a { display:flex; align-items:center; min-height:var(--ziel); font-size:20px; font-weight:600; color:var(--gruen-tief); }

/* --- Runde 4 --- */
/* Sprunglink: unsichtbar, bis er per Tastatur den Fokus bekommt (B-22) */
.sprunglink { position:absolute; left:8px; top:-60px; z-index:20; padding:10px 16px; border-radius:8px;
  background:var(--gelb); color:var(--schwarz); font-weight:600; }
.sprunglink:focus { top:calc(8px + env(safe-area-inset-top)); }
main:focus { outline:none; }

/* Listen ohne Aufzählungspunkte (B-18) */
ul.karten { list-style:none; padding:0; margin:0; }

/* Heute: Zusammenfassung, Warum-Aufklapper, feste Leiste (B-14) */
.zusammenfassung { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px;
  border:2px solid var(--gruen); }
.zusammenfassung p { margin:0; font-size:20px; font-weight:600; }
.warum { margin-top:8px; }
.warum summary { min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--gruen-tief); cursor:pointer; }
.fahrer .fuss-leiste { position:sticky; bottom:0; z-index:4; margin:16px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--milch); border-top:1px solid var(--stahl); }
.fahrer .fuss-leiste .knopf { margin:0; }

/* Büro: Aufklapper, Aktionen, Rückweg (B-15, B-16) */
details.nachtragen { margin:0 0 20px; }
details.nachtragen > summary { list-style:none; display:inline-flex; margin-bottom:12px; }
details.nachtragen > summary::-webkit-details-marker { display:none; }
details.nachtragen[open] > summary { background:var(--weiss); color:var(--gruen-tief); }
.tausch-felder { margin:8px 0; padding:8px 12px; border:1px solid var(--stahl); border-radius:10px; background:var(--weiss); }
.tausch-felder summary { font-weight:600; min-height:40px; display:flex; align-items:center; cursor:pointer; }
.aktionen { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.zurueck-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; text-decoration:none; }
.zurueck-link span { font-size:26px; line-height:1; }
.buero .formular { display:flex; flex-direction:column; gap:12px; max-width:640px; }
.buero .formular-breit { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px 20px; max-width:none; }
.buero .formular label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:15px; }
.buero .formular label:has(> input[type=checkbox]) { flex-direction:row; align-items:center; gap:8px; }
.buero .formular-breit .tausch-felder, .buero .formular-breit .tour-feld, .buero .formular-breit .aktionen,
.buero .formular-breit .hinweis-text { grid-column:1 / -1; }
.tour-feld { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px 16px;
  border:1px solid var(--stahl); border-radius:10px; padding:8px 12px 12px; background:var(--weiss); }
.tour-feld legend { font-weight:700; padding:0 6px; }

/* Mein Konto, Benutzer (B-17, B-18) */
.karten-raster { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; align-items:start; }
.karten-raster .karte h2 { margin-top:0; }
.benutzer-liste { display:flex; flex-direction:column; gap:8px; }
.benutzer-eintrag { background:var(--weiss); border:1px solid var(--stahl); border-radius:12px; }
.benutzer-eintrag > summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:12px 16px; min-height:52px; cursor:pointer; }
.benutzer-eintrag > summary .klein { color:var(--stahl-tief); font-size:15px; }
.benutzer-eintrag[open] > summary { border-bottom:1px solid var(--stahl); }
.benutzer-felder { display:grid; gap:16px; padding:16px; }
.benutzer-felder form { margin:0; }
.bestaetigen { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-weight:600; color:var(--rot); }

/* Abgleich am Handy als Karten (B-20) */
@media (max-width:700px) {
  .abgleich-tabelle, .abgleich-tabelle tbody, .abgleich-tabelle tr, .abgleich-tabelle td { display:block; width:100%; }
  .abgleich-tabelle thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .abgleich-tabelle tr { margin:0 0 12px; border:1px solid var(--stahl); border-radius:12px; overflow:hidden; background:var(--weiss); }
  .abgleich-tabelle td { border:0; border-bottom:1px solid var(--milch); padding:8px 12px; }
  .abgleich-tabelle td::before { content:attr(data-label); display:block; font-size:13px; font-weight:600; color:var(--stahl-tief); }
  .abgleich-tabelle td:first-child::before, .abgleich-tabelle td:last-child::before { display:none; }
  .abgleich-tabelle tr td:first-child { border-left:0; }
  .zeile-gelb { border-left:6px solid var(--gelb) !important; }
  .zeile-rot { border-left:6px solid var(--rot) !important; }
  .zeile-gruen { border-left:6px solid var(--gruen) !important; }
}

/* --- Nachprüfung (N-03, N-04, N-06) --- */
.benutzer-eintrag.fest .zeile-fest { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:12px 16px; min-height:52px; }
.benutzer-eintrag.fest .hinweis-text { flex-basis:100%; margin:0; font-size:15px; }
/* Aufklapper zeigen, dass sie aufgehen (Dreieck vor dem Text) */
.tausch-felder > summary::before, .benutzer-eintrag > summary::before, .warum > summary::before {
  content:"▸"; display:inline-block; width:1.2em; color:var(--gruen-tief); }
.tausch-felder[open] > summary::before, .benutzer-eintrag[open] > summary::before, .warum[open] > summary::before { content:"▾"; }
.tausch-felder > summary, .benutzer-eintrag > summary, .warum > summary { list-style:none; }
.tausch-felder > summary::-webkit-details-marker, .benutzer-eintrag > summary::-webkit-details-marker,
.warum > summary::-webkit-details-marker { display:none; }
.tausch-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px 16px; padding:8px 0 4px; }
.tausch-raster > label:first-child { grid-column:1 / -1; }
/* Datei-Feld wie die anderen Knöpfe (N-06) */
.buero input[type=file]::file-selector-button { min-height:44px; margin-right:12px; padding:6px 16px; font:inherit; font-size:17px; font-weight:600;
  color:var(--gruen-tief); background:var(--weiss); border:2px solid var(--gruen-tief); border-radius:10px; cursor:pointer; }
.warnung.karte { margin:0 0 16px; border:3px solid var(--gelb); }