/* oeffentlich-kopf.css – EINE Kopf- und Fußzeile für alle öffentlichen Betreiber-Seiten von glampr-neu (04.11.2026).
   Erzeugt aus neu/fakten/bauen.py (kopf()/fuss()). Eigene Klassen (ok-…) und eigene Farbwerte, damit Landing und seiten.css-Seiten
   exakt gleich aussehen. Wird NACH dem Seiten-CSS geladen. */
@font-face{font-family:"Satoshi";src:url(/neu/fonts/satoshi-700.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Inter";src:url(/neu/fonts/inter-500.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Inter";src:url(/neu/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ok-fl:#FFFFFF;--ok-fl2:#E9EEF2;--ok-linie:#D6DDE3;--ok-text:#1C1917;--ok-leise:#55606A;--ok-marke:#13302A;--ok-gruen:#245244;--ok-gruen-h:#1B4136;--ok-gruen-t:#FFFFFF;--ok-akzent:#245244;--ok-fokus:#E8735A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok-fl:#151E1B;--ok-fl2:#1E2B28;--ok-linie:#2C3B37;--ok-text:#EDF2EF;--ok-leise:#A3B1AB;--ok-marke:#EAF2EC;--ok-gruen:#7FBFA4;--ok-gruen-h:#9BCDB6;--ok-gruen-t:#0E1513;--ok-akzent:#9BC9B2;--ok-fokus:#F08A72}}
:root[data-theme="dark"]{--ok-fl:#151E1B;--ok-fl2:#1E2B28;--ok-linie:#2C3B37;--ok-text:#EDF2EF;--ok-leise:#A3B1AB;--ok-marke:#EAF2EC;--ok-gruen:#7FBFA4;--ok-gruen-h:#9BCDB6;--ok-gruen-t:#0E1513;--ok-akzent:#9BC9B2;--ok-fokus:#F08A72}

/* gemeinsame Inhaltsbreite aller öffentlichen Seiten */
.ok-wrap,body .wrap{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box}

/* ---------- Kopf ---------- */
header.ok-kopf{position:sticky;top:0;z-index:1000;background:var(--ok-fl);border-bottom:1px solid var(--ok-linie);backdrop-filter:none;-webkit-backdrop-filter:none;height:auto;padding:0;margin:0;font:500 16px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ok-text);text-align:left}
header.ok-kopf *{box-sizing:border-box}
.ok-z1{display:flex;align-items:center;gap:12px;min-height:60px}
.ok-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ok-marke);font:800 1.35rem/1 Satoshi,Inter,sans-serif;letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.ok-logo:hover{color:var(--ok-marke)}
.ok-logo img{height:1.35em;width:calc(1.35em * 1.2267);display:block;flex:none}
:root[data-theme="dark"] .ok-logo img{content:url(/neu/marke-hell.svg?v=3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ok-logo img{content:url(/neu/marke-hell.svg?v=3)}}
.ok-logo small{font:600 .74rem/1 Inter,sans-serif;color:var(--ok-leise);letter-spacing:.02em;margin-left:4px;align-self:center}
.ok-akt{display:flex;align-items:center;gap:8px}
.ok-k{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;font:650 .92rem/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.ok-k svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ok-k.haupt{background:var(--ok-gruen);color:var(--ok-gruen-t);border-color:var(--ok-gruen)}
.ok-k.haupt:hover{background:var(--ok-gruen-h);border-color:var(--ok-gruen-h);color:var(--ok-gruen-t)}
.ok-k.zweit{background:var(--ok-fl);color:var(--ok-text);border-color:var(--ok-linie)}
.ok-k.zweit:hover{background:var(--ok-fl2);color:var(--ok-text)}
.ok-menue{display:none}
.ok-nav{display:flex;align-items:center;gap:2px;margin:0 -10px;padding:0 0 8px}
.ok-nav a{padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--ok-text);font:600 .9rem/1.2 Inter,sans-serif;white-space:nowrap}
.ok-nav a:hover{background:var(--ok-fl2);color:var(--ok-akzent)}
.ok-nav a[aria-current="page"]{background:var(--ok-fl2);color:var(--ok-akzent);box-shadow:inset 0 -2px 0 var(--ok-akzent)}
.ok-nav a.ok-gast{margin-left:auto;color:var(--ok-leise);font-weight:600}
.ok-nav a.ok-gast:hover{color:var(--ok-akzent)}
.ok-nav .ok-mkopf,.ok-nav .ok-nurmenue{display:none}
header.ok-kopf :focus-visible,footer.ok-fuss :focus-visible{outline:3px solid var(--ok-fokus);outline-offset:2px;border-radius:6px}

/* Handy und kleines Tablet: Menü-Knopf, Menü als Vollbild mit fester Leiste oben (Zurück + Esc) */
@media (max-width:900px){
  .ok-menue{display:inline-flex}
  .ok-nav{display:none}
  html.ok-offen{overflow:hidden}
  html.ok-offen .ok-nav{display:flex;position:fixed;inset:0;z-index:2000;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0 0 24px;background:var(--ok-fl);overflow-y:auto}
  .ok-nav .ok-mkopf{display:flex;align-items:center;gap:10px;position:sticky;top:0;min-height:60px;padding:0 20px;background:var(--ok-fl);border-bottom:1px solid var(--ok-linie);font:800 1.1rem Satoshi,Inter,sans-serif;color:var(--ok-text)}
  .ok-nav .ok-mkopf .ok-k{height:40px}
  .ok-nav a{padding:14px 20px;border-radius:0;font-size:1.05rem;border-bottom:1px solid var(--ok-linie)}
  .ok-nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--ok-akzent)}
  .ok-nav a.ok-gast{margin-left:0}
  .ok-nav .ok-nurmenue{display:flex;flex-direction:column;gap:10px;padding:20px}
  .ok-nav .ok-nurmenue .ok-k{height:46px;font-size:1rem;border-bottom:1px solid transparent;padding:0 16px}
  .ok-nav .ok-nurmenue .ok-k.zweit{border-color:var(--ok-linie)}
}
@media (max-width:600px){.ok-akt .ok-k.zweit:not(.ok-menue){display:none}.ok-logo small{display:none}}
@media (max-width:420px){.ok-z1{gap:8px}.ok-k{padding:0 11px;font-size:.88rem}.ok-logo{font-size:1.25rem}}
@media (max-width:350px){.ok-menue span{display:none}}

/* ---------- Fuß ---------- */
footer.ok-fuss{margin-top:56px;background:var(--ok-fl);border-top:1px solid var(--ok-linie);padding:30px 0 34px;font:400 .92rem/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ok-leise);text-align:left}
footer.ok-fuss nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px}
footer.ok-fuss a{color:var(--ok-leise);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ok-linie)}
footer.ok-fuss a:hover{color:var(--ok-akzent);text-decoration-color:currentColor}
footer.ok-fuss nav.ok-fhaupt a{color:var(--ok-text);font-weight:600;text-decoration:none}
footer.ok-fuss nav.ok-fhaupt a:hover{color:var(--ok-akzent)}
footer.ok-fuss p{margin:12px 0 0;max-width:none}
@media print{header.ok-kopf{position:static}.ok-akt,.ok-nav{display:none}}

/* Hauptknöpfe im Inhalt der seiten.css-Seiten in derselben Farbe wie der Hauptknopf im Kopf (Tannengrün statt Koralle) */
body .knopf:not(.leise){background:var(--ok-gruen);color:var(--ok-gruen-t)}
body .knopf:not(.leise):hover{background:var(--ok-gruen-h);color:var(--ok-gruen-t)}