/* neue-verwaltung.ch — gemeinsame Basis (Tokens, Fonts, Reset, Buttons).
   Wird von allen Seiten geladen. Seitenspezifisches CSS bleibt inline. */

:root{
  --night:#0e2a33;        /* tiefes Petrol/Nachtblau */
  --night-2:#123842;
  --sand:#f5f0e6;         /* warmes Sandbeige */
  --sand-2:#ece4d3;
  --paper:#fbf9f4;
  /* Kupfer: --copper ist der AA-konforme Standard (5.33:1 auf Weiss,
     4.69:1 auf Sand). --copper-d ist Hover/aktiv, --copper-l rein
     dekorativ (Glow, Verläufe) — nie für Text oder Buttonflächen. */
  --copper:#a2572f;
  --copper-d:#8a4a28;
  --copper-l:#c06b3e;
  /* --copper-n: helles Kupfer fuer Text, Links und Fokusringe auf --night
     (6.95:1). --copper selbst kommt dort nur auf 2.82:1 und faellt durch. */
  --copper-n:#e0a37e;
  --ink:#16232a;
  --muted:#5c6b70;
  --line:#d9d0be;
  --ok:#3f7d5c;
  /* Fehlerrot fuer Formularmeldungen: 6.54:1 auf Weiss, 6.21:1 auf --paper. */
  --err:#b3261e;
  --shadow:0 1px 2px rgba(14,42,51,.06),0 8px 30px rgba(14,42,51,.08);
  --r:14px;
  --maxw:1120px;
  --wrapw:var(--maxw);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-latin-var.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-italic-latin-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-var.woff2) format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:var(--wrapw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);font-weight:600}

/* Skip-Link: nur bei Tastaturfokus sichtbar */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:12px;top:12px;background:var(--night);color:var(--sand);padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:15px;border-radius:10px;padding:12px 20px;text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:var(--copper-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--night);border:1.5px solid var(--night)}
.btn-ghost:hover{background:var(--night);color:var(--sand)}
.btn-dark{background:var(--night);color:var(--sand)}
.btn-dark:hover{background:var(--night-2);transform:translateY(-1px)}

/* Formularfehler: Meldung pro Feld plus roter Rahmen am Eingabefeld.
   Die Felder sind in index.html inline gestylt (.field input …), und dieser
   <style>-Block steht nach base.css. Die Attributselektoren sind darum
   bewusst spezifischer gehalten, sonst gewinnt das Inline-CSS. */
.field-err{display:none;margin-top:5px;font-size:13px;font-weight:500;line-height:1.4;color:var(--err)}
.field-err[data-show="true"]{display:block}
input[aria-invalid="true"],select[aria-invalid="true"],.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--err)}
input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus,.field input[aria-invalid="true"]:focus,.field select[aria-invalid="true"]:focus{outline:none;border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.16)}

/* Sticky CTA-Leiste, nur auf Mobil. z-index 90: ueber der Kopfzeile (50),
   unter Modal (100), Toast (200) und Cookie-Banner (300). */
.mcta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;display:none;align-items:center;justify-content:center;min-height:52px;padding:14px 18px;border-radius:12px;background:var(--copper);color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.25;text-align:center;text-decoration:none;box-shadow:0 6px 24px rgba(14,42,51,.28);transform:translateY(calc(100% + 40px));transition:transform .28s ease}
.mcta[data-show="true"]{transform:translateY(0)}
.mcta:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
/* Platz fuer die Leiste, damit sie die Fusszeile nie dauerhaft deckt. Der
   Abstand gehoert in die Fusszeile, nicht an den body: dessen Hintergrund
   ist Sand, die Fusszeile ist dunkel — ein padding-bottom am body haengt
   einen hellen Streifen unter die dunkle Flaeche. "body footer" schlaegt
   zudem das footer{padding:…} aus dem Inline-Block von index.html. */
@media(max-width:900px){.mcta{display:flex}body:has(.mcta) footer{padding-bottom:116px}}
/* wie in der globalen Regel oben: bei reduzierter Bewegung kein Uebergang */
@media (prefers-reduced-motion:reduce){.mcta{transition:none}}
@media print{.mcta{display:none!important}}

/* Cookie-Banner, wird von assets/site.js auf jeder Seite eingehaengt.
   z-index 300: ueber Kopfzeile (50), .mcta (90), Modal (100) und Toast (200). */
.cbanner{position:fixed;left:0;right:0;bottom:0;z-index:300;display:none;background:var(--night);color:#a9bbc0;border-top:1px solid var(--night-2);box-shadow:0 -8px 30px rgba(14,42,51,.35);padding:18px 20px calc(18px + env(safe-area-inset-bottom))}
.cbanner[data-show="true"]{display:block}
.cbanner-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cbanner p{flex:1 1 320px;max-width:62ch;font-size:13.5px;line-height:1.55;color:#a9bbc0}
.cbanner a{color:var(--copper-n);text-decoration:underline}
.cbanner a:hover{color:#fff}
.cbanner-btns{display:flex;flex-wrap:nowrap;gap:10px;flex-shrink:0}
.cbtn-accept,.cbtn-reject{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border-radius:10px;font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.cbtn-accept{background:var(--copper);color:#fff;border:1.5px solid transparent}
.cbtn-accept:hover{background:var(--copper-d)}
.cbtn-reject{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.cbtn-reject:hover{background:var(--night-2);border-color:#a9bbc0}
.cbtn-accept:focus-visible,.cbtn-reject:focus-visible{outline:3px solid var(--copper-n);outline-offset:2px}
/* solange der Banner offen ist, darf die Sticky-Leiste ihn nicht ueberdecken */
body[data-consent="open"] .mcta{display:none}
/* Umgekehrt: steht das Anfrageformular offen, weicht der Banner. Er liegt
   auf z-index 300 ueber dem Dialog (100) und verdeckte sonst den Absenden-
   Knopf. Es wird dabei nichts entschieden — ohne Klick bleibt die Vorgabe
   stehen und der Banner kehrt zurueck, sobald der Dialog schliesst. */
body:has(.modal[data-open]) .cbanner{display:none}
@media(max-width:560px){.cbanner-btns{width:100%}.cbtn-accept,.cbtn-reject{flex:1}}
@media print{.cbanner{display:none!important}}