/* Stufe 1 - heller Grund. Wird NACH stil.css geladen, ueberschreibt nur.
   Hausfarben als Flaeche mit dunkler Schrift (#1b1e24), nie als Fliesstext auf Weiss:
   Blau 3,00:1, Orange 2,85:1, Gruen 2,12:1 tragen dort keinen Text. */
:root{
  --grund:#fff; --tiefer:#f3f9fd; --flaeche:#fff; --flaeche2:#f3f9fd;
  --kante:#d3dfe8; --text:#1b1e24; --leise:#4a5361;
  --band:#1b1e24;
}
body{background:#fff;color:var(--text)}
a{color:#0b5f87;text-decoration:underline;text-underline-offset:3px}
.menue a,.knopf,.themen a,.kopf-ruf,.marke,.wege a,.fuss a,.sprungleiste a{text-decoration:none}
.farbig{color:inherit;background:linear-gradient(transparent 62%,rgba(0,158,227,.28) 62%)}
.held{background:linear-gradient(180deg,#f3f9fd,#fff 80%)}
.kopf{background:rgba(255,255,255,.94)}
.held-bild figcaption{background:rgba(255,255,255,.92)}
.knopf.zweit{border-color:#8a96a3}
.knopf.zweit:hover{background:#f3f9fd;border-color:var(--text)}
.themen a .weiter{color:var(--text)}
.themen li:has(a:hover),.themen li:has(a:focus-visible){box-shadow:0 8px 22px rgba(27,30,36,.12);border-color:var(--blau)}
:focus-visible{outline:3px solid #1b1e24;outline-offset:2px}
.zitat{background:#f3f9fd}
.zitat blockquote em{color:inherit}
.offen{background:#fff4e6;color:#6b3600;border-color:var(--orange)}
.kasten{background:#fff}
.kasten.warnung{background:#fff7ee}
.handeln{background:#f3f9fd}
.hinweis{background:#fff4e6;color:#6b3600}
.sprungleiste a:hover{color:var(--text)}

/* Serviceleiste unter dem Kopf: dunkles Band, Gruen nur hier (7,9:1) */
.service{background:var(--band);color:#fff}
.service-innen{max-width:1240px;margin:0 auto;padding:10px var(--rand);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.service p{margin:0;font-weight:700}
.service p b{color:var(--gruen)}
.service .knoepfe{margin:0;gap:10px}
.service .knopf{min-height:44px;padding:9px 18px}
.service .knopf.zweit{color:#fff;border-color:#8a96a3;background:transparent}
.service .knopf.zweit:hover{background:#2b3038;border-color:#fff}
.service :focus-visible{outline-color:#fff}

/* Kacheln mit Symbol */
.themen{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.themen li{padding:20px 18px}
.ico,.themen .ico{display:grid;margin-top:0;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--blau);margin-bottom:12px}
.themen li:nth-child(3n+2) .ico{background:var(--orange)}
.themen li:nth-child(3n) .ico{background:var(--gruen)}
.ico svg{width:30px;height:30px;fill:#1b1e24;stroke:none}
.ico.o{background:var(--orange)}
.ico.g{background:var(--gruen)}
.ico.kopf{width:44px;height:44px;margin:0 0 14px}
.themen a b{font-size:1.1rem}

/* Drei-Schritte-Band */
.ablauf li{border:0;background:#f3f9fd;border-top:5px solid var(--blau);border-radius:0 0 14px 14px}
.ablauf li:nth-child(2){border-top-color:var(--orange)}
.ablauf li:nth-child(3){border-top-color:var(--gruen)}
.ablauf li::before{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--blau);color:#1b1e24;font-size:1.15rem;letter-spacing:0;margin-bottom:14px
}
.ablauf li:nth-child(2)::before{background:var(--orange)}
.ablauf li:nth-child(3)::before{background:var(--gruen)}

/* Zahlenband (dunkel, gruene Zahl 7,9:1) */
.zahlen{background:var(--band);color:#fff}
.zahlen .block{padding-block:clamp(32px,5vw,56px)}
.zahlen .kennzahlen strong{color:var(--gruen)}
.zahlen .kennzahlen span{color:#d6dde5}
.zahlen [data-offen]{outline:2px dashed var(--orange);outline-offset:6px;border-radius:4px}
.zahlen .offen{background:#2b2218;color:#ffd9a8}

/* Bildplatz (Platzhalter, bis Fotos geklaert sind) */
.bildplatz{display:grid;place-items:center;min-height:260px;border:2px dashed var(--orange);border-radius:16px;background:#fff7ee;color:#6b3600;text-align:center;padding:24px;font-weight:600}
.bildplatz small{display:block;font-weight:400;margin-top:6px}

/* Reiter in reinem CSS. Tastatur: Pfeiltasten wechseln, Tab springt in den Inhalt */
.reiter{margin-top:22px;position:relative}
.reiter > input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.reiter-leiste{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.reiter-leiste label{
  display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border:2px solid var(--kante);
  border-radius:999px;font-weight:700;cursor:pointer;background:#fff;color:var(--text)
}
.reiter-leiste label:hover{border-color:var(--text)}
#r1:checked ~ .reiter-leiste label[for=r1],
#r2:checked ~ .reiter-leiste label[for=r2],
#r3:checked ~ .reiter-leiste label[for=r3],
#r4:checked ~ .reiter-leiste label[for=r4]{background:var(--orange);border-color:var(--orange);color:#1b1e24}
#r1:focus-visible ~ .reiter-leiste label[for=r1],
#r2:focus-visible ~ .reiter-leiste label[for=r2],
#r3:focus-visible ~ .reiter-leiste label[for=r3],
#r4:focus-visible ~ .reiter-leiste label[for=r4]{outline:3px solid #1b1e24;outline-offset:3px}
.reiter-tafel{display:none}
#r1:checked ~ .tafel1,#r2:checked ~ .tafel2,#r3:checked ~ .tafel3,#r4:checked ~ .tafel4{display:block}
.reiter-tafel > section{padding:0 !important;max-width:none}
.reiter-tafel > section > h2{font-size:1.2rem;margin:0 0 .6em}

@media (max-width:560px){
  .service-innen{flex-direction:column;align-items:stretch}
  .service .knoepfe{display:grid;grid-template-columns:1fr 1fr}
  .service .knopf{padding-inline:8px}
  .themen{grid-template-columns:1fr;gap:10px}
  .themen:has(.ico){grid-template-columns:1fr 1fr}
  .themen li{padding:14px 12px}
  .themen li a span:not(.weiter){font-size:.86rem}
  .ico,.themen .ico{width:42px;height:42px}
  .reiter-leiste label{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* Menue ohne Umbruch (AP 07.10.2026): gross eine Zeile, darunter drei Striche */
.menue{flex-wrap:nowrap;white-space:nowrap}
.menue-schalter{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menue-knopf{display:none}
@media (max-width:960px){
  .kopf-innen{flex-wrap:wrap;gap:10px 14px}
  .kopf-ruf{margin-left:auto}
  .menue-knopf{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;padding:0 11px;border:1px solid var(--kante);border-radius:10px;cursor:pointer;order:2}
  .menue-knopf span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
  .menue-schalter:focus-visible+.menue-knopf{outline:3px solid var(--orange);outline-offset:2px}
  .menue{display:none;order:3;width:100%;flex-direction:column;gap:0;margin:0;padding-top:6px;border-top:1px solid var(--kante)}
  .menue a{padding:13px 10px;font-size:1rem}
  .menue a::after{left:10px;right:auto;width:40px}
  .menue-schalter:checked~.menue{display:flex}
  .menue-schalter:checked+.menue-knopf span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menue-schalter:checked+.menue-knopf span:nth-child(2){opacity:0}
  .menue-schalter:checked+.menue-knopf span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:640px){
  .menue{width:100%}
  .kopf-ruf{padding:9px 12px;font-size:0;gap:0}
  .kopf-ruf span{font-size:1.2rem}
}

/* Login oben neben dem Anrufknopf (AP 07.10.2026) */
.kopf-login{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;
  border-radius:10px;background:var(--text);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.kopf-login:hover{background:var(--orange)}
.kopf-login span{font-size:1rem}
.login-wahl{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.login-wahl a{display:block;padding:18px 22px;border:1px solid var(--kante);border-radius:12px;
  text-decoration:none;color:var(--text);background:#fff}
.login-wahl a:hover{border-color:var(--orange)}
.login-wahl b{display:block;font-size:1.15rem}
.login-wahl span{color:#555}
.login-wahl .spaeter{opacity:.55;cursor:default}
@media (max-width:960px){.kopf-login{order:1}.kopf-ruf{order:1}}
@media (max-width:640px){.kopf-login{padding:9px 12px;font-size:.95rem}}
.kopf-login svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.kopf-login b{font-weight:700}
@media (max-width:960px){.kopf-login{margin-left:auto}.kopf-ruf{margin-left:0}}
@media (max-width:640px){
  .kopf-login{padding:0;width:46px;height:46px;justify-content:center}
  .kopf-login b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kopf-ruf{width:46px;height:46px;justify-content:center;padding:0}
  .marke img{height:26px}
  .kopf-innen{gap:10px 8px}
}

/* Reiter: Ausdruck zeigt alle Tafeln, kein Inhalt geht verloren */
@media print{.reiter-tafel{display:block !important}.reiter-leiste{display:none}}
/* Reiter am Handy: gleich breite Felder, zwei je Zeile, Finger-tauglich */
@media (max-width:560px){
  .reiter-leiste{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .reiter-leiste label{justify-content:center;text-align:center;border-radius:14px;padding:10px 8px;line-height:1.2}
}
/* Fusszeile: Links mindestens 44 px hoch (Befund 12.10.2026) */
.fuss-wege{gap:0 10px}
.fuss-wege a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-inline:-8px}
.fuss-anschrift a,.fuss .klein a,.fuss-pflicht a{display:inline-block;padding:12px 2px;margin:-12px 0}
.fuss .klein a,.fuss-pflicht a{text-underline-offset:3px}