/* ============================================================
   KERN - auf allen Seiten gleich, Quelle ist assets/brandbook.html.
   Aenderungen hier und im Brandbook gemeinsam machen.
   Stand 24.09.2026: vier Radien (6/10/16/24), einheitlicher
   Seitenkopf mit Faktenkarte, keine Zeile ueber Ueberschriften,
   Gold nur fuer Knoepfe, Linien, Haken und Icons auf Dunkel.
   Stand 01.11.2026: Abstaende aus den Tokens oder im 4er-Raster,
   Schriftstufen ohne halbe Pixel, Schriften als Tokens.
   ============================================================ */
:root{
  --brand:#D4AF37; --brand-hell:#E8C866; --auf-brand:#141210;
  --schwarz:#141210; --anthrazit:#221F1A; --anthrazit-2:#2E2A24; --geist:#241F12;
  --grau-900:#3A362E; --grau-700:#5C5850; --grau-500:#8A867C; --grau-400:#B4B0A6; --feld-rahmen:#8A867C;
  --grau-300:#D6D3CB; --grau-200:#E6E4DE; --grau-100:#F4F3EF; --grau-50:#FAFAFA; --weiss:#FFFFFF;
  --erfolg:#15803D; --warnung:#C2410C; --fehler:#B91C1C; --info:#1D4ED8;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:24px;
  --schatten-s:0 1px 2px rgba(20,18,16,.06);
  --schatten:0 1px 2px rgba(20,18,16,.05), 0 14px 32px -18px rgba(20,18,16,.28);
  --schrift-titel:"Barlow Condensed","Barlow",Impact,sans-serif;
  --schrift-text:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
/* hidden muss gewinnen - sonst ueberstimmt z. B. .meldung{display:flex} das Attribut */
[hidden]{display:none !important}
html{overflow-x:clip}
body{margin:0; background:var(--weiss); color:var(--schwarz);
  font-family:var(--schrift-text);
  font-size:16px; line-height:1.625; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--schrift-titel); margin:0; text-wrap:balance}
h1{font-size:clamp(40px,5vw,58px); line-height:.98; font-weight:700; letter-spacing:-.005em}
h2{font-size:clamp(30px,3.6vw,40px); line-height:1.05; font-weight:600}
h3{font-size:clamp(22px,2.2vw,26px); line-height:1.12; font-weight:600}
/* Ueberschriften bleiben schwarz, auch hervorgehobene Woerter */
h1 em,h2 em,h3 em{font-style:normal; color:inherit}
p{margin:0}
img{max-width:100%}
a{color:var(--schwarz); text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{text-decoration-color:var(--schwarz)}
:focus-visible{outline:3px solid var(--schwarz); outline-offset:2px}
.dunkel :focus-visible{outline-color:var(--brand-hell)}
::selection{background:var(--brand); color:var(--schwarz)}
.bahn{max-width:1140px; margin:0 auto; padding:0 28px}
.i{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

/* Schriftstufen */
.auszeichnung{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-700)}
.text-gross{font-size:18px; line-height:1.6}
.klein{font-size:14px; line-height:1.55}
.wert{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.gedaempft{color:var(--grau-700)}

/* ── Notizen fuer die Abstimmung ── */
.notiz{font-family:var(--schrift-text); font-size:10.5px; font-weight:600; letter-spacing:.05em;
  line-height:1.4; background:var(--info); color:#fff; padding:3px 8px; border-radius:var(--r-s); display:none; margin-bottom:8px}
.notiz.dyn{background:#B45309}
body.notizen .notiz{display:inline-block}
.seo{display:none; background:#EEF2FF; border-bottom:1px solid #C7D2FE; font-size:13px; padding:10px 0; color:#1E1B4B}
.seo b{font-weight:700} .seo code{font-family:inherit; background:#fff; padding:1px 5px; border-radius:4px}
body.notizen .seo{display:block}
#schalter{position:fixed; right:16px; bottom:16px; z-index:60; background:var(--schwarz); color:var(--weiss);
  border:none; border-radius:var(--r-m); font-family:var(--schrift-text); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:10px 15px; cursor:pointer}

/* ── Knoepfe ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); height:48px; padding:0 20px;
  border-radius:var(--r-m); border:1.5px solid transparent; font-family:var(--schrift-text); font-size:15px;
  font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s}
.btn .i{width:17px; height:17px}
.btn-gross{height:52px; padding:0 var(--s-5); font-size:16px}
.btn-klein{height:36px; padding:0 var(--s-3); font-size:14px}
.btn-primaer{background:var(--brand); color:var(--auf-brand)}
.btn-primaer:hover{background:var(--schwarz); color:var(--brand)}
.btn-sekundaer{background:var(--weiss); color:var(--schwarz); border-color:var(--grau-300)}
.btn-sekundaer:hover{border-color:var(--schwarz)}
/* Textlink neben einem Knopf: schwarz mit Goldunterstrich */
.btn-schlicht{height:auto; padding:0; border:0; border-radius:0; background:none; color:var(--schwarz);
  text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:5px}
.btn-schlicht:hover{text-decoration-color:var(--schwarz)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--grau-200); color:var(--grau-500); border-color:transparent; cursor:not-allowed; pointer-events:none}
.dunkel .btn-primaer:hover{background:var(--brand-hell); color:var(--auf-brand)}
.dunkel .btn-sekundaer{background:transparent; color:var(--weiss); border-color:rgba(255,255,255,.3)}
.dunkel .btn-sekundaer:hover{border-color:var(--weiss)}
.dunkel .btn-schlicht{color:var(--weiss)}
.aktionen{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-5)}

/* Textlink mit Pfeil - Gold als Schrift waere auf Weiss nicht lesbar */
.mehr{display:inline-flex; align-items:center; gap:var(--s-2); font-size:15px; font-weight:700; color:var(--schwarz);
  text-decoration:none; border-bottom:2px solid var(--brand); padding-bottom:2px}
.mehr:hover{border-bottom-color:var(--schwarz)}
.mehr .i{width:15px; height:15px}
.dunkel .mehr{color:var(--weiss)}

/* ── Kennzeichen und Meldungen ── */
.badge{display:inline-flex; align-items:center; gap:var(--s-2); height:28px; padding:0 var(--s-3); border-radius:var(--r-s);
  font-size:13px; font-weight:600; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-marke{background:var(--schwarz); color:var(--brand)}
.badge-erfolg{background:#E3F2E8; color:var(--erfolg)}
.badge-warnung{background:#FCE7DC; color:var(--warnung)}
.badge-neutral{background:var(--grau-100); color:var(--grau-700)}
.meldung{display:flex; gap:var(--s-3); padding:var(--s-4) 20px; border:1px solid; border-radius:var(--r-m); font-size:15px; line-height:1.5}
.meldung .i{margin-top:2px}
.meldung b{font-weight:700}
.meldung-info{background:#EEF2FC; border-color:#C9D6F5; color:#1E3A8A}
.meldung-erfolg{background:#E9F5EE; border-color:#BFE0CB; color:#14532D}
.meldung-warnung{background:#FDF0E8; border-color:#F5CDB6; color:#7C2D12}

/* ── Kopfzeile ── */
.kopf{background:var(--weiss); border-bottom:1px solid var(--grau-200); position:relative; z-index:40}
.kopf .bahn{display:flex; align-items:center; gap:var(--s-6); min-height:72px}
.logo{font-family:var(--schrift-titel); font-weight:700; font-size:26px; letter-spacing:.02em;
  color:var(--brand); text-decoration:none; white-space:nowrap}
.nav{display:flex; align-items:center; gap:var(--s-5); font-size:15px; font-weight:600}
.nav > a,.aufklapp summary{text-decoration:none; padding:var(--s-2) 0; border-bottom:2px solid transparent}
.nav > a:hover,.aufklapp summary:hover{border-bottom-color:var(--grau-300)}
.nav > a[aria-current="page"],.aufklapp summary.ist-aktiv{border-bottom-color:var(--brand)}
.kopf .anruf{margin-left:auto}
.aufklapp{position:relative}
.aufklapp summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s-2)}
.aufklapp summary::-webkit-details-marker{display:none}
.pfeil-unten{width:7px; height:7px; border-right:2px solid; border-bottom:2px solid; transform:translateY(-2px) rotate(45deg); transition:transform .15s}
.aufklapp[open] .pfeil-unten{transform:translateY(1px) rotate(-135deg)}
.aufklapp-feld{position:absolute; top:calc(100% + 14px); left:-14px; min-width:290px; background:var(--weiss);
  border:1px solid var(--grau-200); border-radius:var(--r-l); box-shadow:var(--schatten); padding:var(--s-2); z-index:50}
.nav .aufklapp-feld a{display:block; padding:var(--s-3); border-radius:var(--r-m); font-weight:600; text-decoration:none}
.nav .aufklapp-feld a:hover,.nav .aufklapp-feld a[aria-current="page"]{background:var(--grau-100)}
/* Abstand, damit Hover- und Aktiv-Flaeche nicht aneinanderstossen */
.nav .aufklapp-feld a + a{margin-top:var(--s-1)}
.nav .aufklapp-feld a:first-child{position:relative; margin-bottom:var(--s-2)}
.nav .aufklapp-feld a:first-child::after{content:""; position:absolute; left:var(--s-3); right:var(--s-3); bottom:-6px; border-bottom:1px solid var(--grau-200)}
/* Menue auf dem Handy */
.menue{display:none; margin-left:auto}
.menue summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s-2); height:44px; padding:0 var(--s-4);
  border:1px solid var(--grau-300); border-radius:var(--r-m); background:var(--weiss); font-weight:600; font-size:15px}
.menue summary::-webkit-details-marker{display:none}
.menue summary .striche{width:18px; height:12px; border-top:2px solid; border-bottom:2px solid; position:relative}
.menue summary .striche::after{content:""; position:absolute; left:0; right:0; top:3px; border-top:2px solid}
.menue[open] summary{background:var(--schwarz); border-color:var(--schwarz); color:var(--weiss)}
.menue .klappe{position:absolute; left:0; right:0; top:100%; background:var(--weiss); border-bottom:1px solid var(--grau-200);
  border-radius:0 0 var(--r-l) var(--r-l); box-shadow:var(--schatten); padding:var(--s-3) var(--s-4) var(--s-5)}
.menue .klappe nav{display:flex; flex-direction:column}
.menue .klappe a{display:block; padding:var(--s-3); border-radius:var(--r-m); font-size:18px; font-weight:600; text-decoration:none}
.menue .klappe a:hover,.menue .klappe a[aria-current="page"]{background:var(--grau-100)}
.menue .klappe nav a + a{margin-top:var(--s-1)}
.menue .klappe .gruppe{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-700); padding:var(--s-3) var(--s-3) var(--s-1)}
.menue .klappe a.unter{font-size:16px}
/* a.btn braucht eigene Spezifitaet, sonst gewinnt .menue .klappe a */
.menue .klappe a.btn{display:flex; height:52px; padding:0 20px; margin-top:var(--s-4); font-size:16px}
.menue .klappe a.btn-primaer:hover{background:var(--schwarz); color:var(--brand)}
/* Erreichbarkeit neben dem Anruf-Knopf. Zeiten kommen spaeter aus dem Backend */
.erreichbar{display:flex; align-items:center; gap:var(--s-2); font-size:13px; line-height:16px; color:var(--grau-700)}
.erreichbar-text{display:flex; flex-direction:column}
.erreichbar-text b{font-weight:600; color:var(--schwarz)}
.erreichbar .punkt{position:relative; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--grau-500)}
.erreichbar.ist-offen .punkt{background:var(--erfolg)}
.erreichbar.ist-offen .punkt::after{content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:erreichbar-puls 1.8s ease-out infinite}
@keyframes erreichbar-puls{from{transform:scale(1); opacity:.6} to{transform:scale(2.6); opacity:0}}
@media (prefers-reduced-motion:reduce){ .erreichbar.ist-offen .punkt::after{animation:none} }
.kopf .bahn > .erreichbar{position:relative; margin-left:auto; margin-right:-8px}
.kopf .bahn > .erreichbar:not([hidden]) + .anruf{margin-left:0}
.kopf .bahn > .erreichbar .notiz{position:absolute; top:calc(100% + 12px); right:0; margin:0; white-space:nowrap}
.menue .klappe .erreichbar{justify-content:center; margin-top:var(--s-3); font-size:14px}
.menue .klappe .erreichbar-text{flex-direction:row; gap:var(--s-1)}
.menue .klappe .erreichbar-text b::after{content:","}

/* ── Seitenkopf: ein Aufbau fuer alle Unterseiten ──
   Brotkrume, Google-Bewertung, H1, ein bis zwei Saetze, Anfrage und Textlink,
   rechts die Faktenkarte mit drei Fakten. Rechtstexte nutzen .schlicht. */
.seitenkopf{background:var(--grau-50); border-bottom:1px solid var(--grau-200); padding:var(--s-5) 0 var(--s-8)}
.krume ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; font-size:14px; color:var(--grau-700)}
.krume li+li::before{content:"/"; margin-right:var(--s-2); color:var(--grau-300)}
.krume a{color:var(--grau-700); text-decoration:none} .krume a:hover{color:var(--schwarz); text-decoration:underline}
/* oben buendig, damit die H1 auf jeder Seite an derselben Stelle steht */
.seitenkopf .raster{display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:var(--s-8); align-items:start; margin-top:40px}
.seitenkopf.schlicht .raster{grid-template-columns:minmax(0,760px)}
.seitenkopf h1{margin-top:var(--s-4)}
.seitenkopf.schlicht h1{margin-top:0}
.seitenkopf .einleitung{font-size:18px; line-height:1.6; color:var(--grau-700); margin-top:var(--s-4); max-width:46ch}
.seitenkopf .aktionen{margin-top:var(--s-6)}
.seitenkopf .meldung{margin-top:var(--s-6)}
.gbewertung{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2); font-size:14px; color:var(--grau-700)}
.gbewertung > svg{width:17px; height:17px; flex:0 0 auto}
.gbewertung .note{font-weight:700; color:var(--schwarz)}
.gsterne{display:inline-flex; gap:1px}
.gsterne svg{width:13px; height:13px; fill:#E7A61A}
.faktenkarte{background:var(--weiss); border-radius:var(--r-l); padding:var(--s-2) var(--s-5); box-shadow:var(--schatten)}
.fakt{display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--s-3); align-items:center; padding:var(--s-4) 0; color:inherit; text-decoration:none}
.fakt + .fakt{border-top:1px solid var(--grau-200)}
.fakt > div > b{display:block; font-family:var(--schrift-titel); font-size:22px; font-weight:600; line-height:1.1}
.fakt > div > span:not(.notiz){display:block; font-size:14px; line-height:1.4; color:var(--grau-700); margin-top:var(--s-1)}
.fakt .notiz{margin:6px 0 0}
a.fakt:hover > div > b{text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:4px}
/* Icon-Kachel: hell und leise, Icon schwarz mit feiner Linie. In hellen Abschnitten weiss mit Rand,
   auf Dunkel Anthrazit mit Gold. Gilt fuer Faktenkarte, Karten, Schritte und Kontaktwege */
.kachel{width:40px; height:40px; border-radius:var(--r-m); background:var(--grau-100); color:var(--schwarz);
  display:grid; place-items:center; flex:0 0 auto; font-family:var(--schrift-titel); font-size:20px; font-weight:700; line-height:1}
.kachel .i{width:20px; height:20px; stroke-width:1.6}
.hell .kachel{background:var(--weiss); box-shadow:inset 0 0 0 1px var(--grau-200)}
.dunkel .kachel{background:var(--anthrazit-2); color:var(--brand); box-shadow:none}

/* ── Abschnitte ── */
.abschnitt{padding:var(--s-9) 0}
.abschnitt + .abschnitt{border-top:1px solid var(--grau-200)}
.abschnitt.hell{background:var(--grau-50)}
.sek-kopf{max-width:64ch; margin-bottom:var(--s-7)}
.sek-kopf p{margin-top:var(--s-4); color:var(--grau-700); font-size:18px; line-height:1.6}
.zwei{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center}
.zwei.oben{align-items:start}
.bildrahmen{margin:0}
.bildrahmen img{display:block; width:100%; height:auto; border-radius:var(--r-l)}
.bildrahmen figcaption{font-size:13px; color:var(--grau-700); margin-top:var(--s-2)}
/* KI-Bilder: Hinweis im Bild, fast durchsichtig. Klasse an das Element, das genau das Bild umschliesst */
.ki{position:relative}
.ki::after{content:"Mit KI erstellt"; position:absolute; right:var(--s-3); bottom:var(--s-3); font:600 12px/1 var(--schrift-text);
  letter-spacing:.04em; color:rgba(255,255,255,.6); text-shadow:0 1px 3px rgba(20,18,16,.45); pointer-events:none}
.dunkel{background:var(--schwarz); color:var(--weiss)}
.dunkel .gedaempft,.dunkel .sek-kopf p{color:var(--grau-300)}
/* Dunkles Band mit Geistertypo im Hintergrund */
.geist{font-family:var(--schrift-titel); font-weight:700; line-height:.76; white-space:nowrap;
  color:var(--geist); pointer-events:none; user-select:none}

/* Haken-Liste */
.haken{list-style:none; margin:0; padding:0}
.haken li{display:flex; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--grau-200)}
.haken li:last-child{border-bottom:none}
.haken li .i{color:var(--brand); margin-top:var(--s-1); stroke-width:2.6}
.haken li b{display:block; font-weight:700}
.haken li span{display:block; color:var(--grau-700); font-size:15px; line-height:1.5}
.dunkel .haken li{border-color:var(--anthrazit-2)}
.dunkel .haken li span{color:var(--grau-300)}

/* Karten */
.karte{border:1px solid var(--grau-200); border-radius:var(--r-l); background:var(--weiss); padding:var(--s-5); display:flex; flex-direction:column}
.karte h3{margin-bottom:var(--s-3)}
.karte p{color:var(--grau-700)}
.karte > .kachel{margin-bottom:var(--s-4)}
.karten{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4)}
.karten.zwei-sp{grid-template-columns:1fr 1fr}
/* Leistungskarte: ganze Karte ist der Link */
a.karte{color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s}
a.karte:hover{border-color:var(--grau-300); box-shadow:var(--schatten); transform:translateY(-2px)}
.karte .karten-fuss{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:auto; padding-top:var(--s-5)}
.karte .karten-fuss b{font-family:var(--schrift-titel); font-size:26px; font-weight:700; line-height:1}
.karte .karten-pfeil{width:40px; height:40px; border-radius:var(--r-m); background:var(--grau-100); display:grid; place-items:center; transition:background .15s}
a.karte:hover .karten-pfeil{background:var(--brand)}

/* Schritte: Nummer in der Kachel */
.schritte{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); list-style:none; margin:0; padding:0; counter-reset:s}
.schritte li{counter-increment:s}
.schritte li::before{content:counter(s); display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-m);
  background:var(--grau-100); color:var(--schwarz); font-family:var(--schrift-titel); font-size:20px; font-weight:700; margin-bottom:var(--s-4)}
.hell .schritte li::before{background:var(--weiss); box-shadow:inset 0 0 0 1px var(--grau-200)}
.schritte h3{font-size:22px}
.schritte p{margin-top:var(--s-2); color:var(--grau-700); font-size:15px}

/* Preisliste */
.preiszeilen{border:1px solid var(--grau-200); border-radius:var(--r-l); background:var(--weiss); overflow:hidden}
.preiszeilen > div{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding:var(--s-4) var(--s-5)}
.preiszeilen > div + div{border-top:1px solid var(--grau-200)}
.preiszeilen b{display:block; font-weight:700}
.preiszeilen span{display:block; font-size:14px; color:var(--grau-700); line-height:1.45}
.preiszeilen em{font-style:normal; font-family:var(--schrift-titel); font-size:26px; font-weight:700; white-space:nowrap}

/* Haeufige Fragen: Plus in der Kachel, dreht beim Oeffnen zum Kreuz */
.fragen{border:1px solid var(--grau-200); border-radius:var(--r-l); background:var(--weiss); overflow:hidden; max-width:820px}
.fragen details + details{border-top:1px solid var(--grau-200)}
.fragen summary{list-style:none; cursor:pointer; position:relative; padding:20px 80px 20px var(--s-5);
  font-family:var(--schrift-titel); font-size:22px; font-weight:600; line-height:1.2}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{background:var(--grau-50)}
.fragen summary::before{content:""; position:absolute; right:var(--s-5); top:50%; width:32px; height:32px; margin-top:-16px;
  border-radius:var(--r-m); background:var(--grau-100); transition:background .15s}
.fragen summary::after{content:""; position:absolute; right:33px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:linear-gradient(var(--schwarz),var(--schwarz)) center/100% 2.4px no-repeat,
             linear-gradient(var(--schwarz),var(--schwarz)) center/2.4px 100% no-repeat; transition:transform .2s}
.fragen details[open] summary::before{background:var(--brand)}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen .antwort{padding:0 var(--s-5) var(--s-5); color:var(--grau-700); max-width:68ch}
.fragen .antwort p + p{margin-top:var(--s-3)}

/* ── Formulare ── */
.formraster{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-5)}
.formraster .ganz{grid-column:1/-1}
.feld{display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-4)}
.feld label,.feld legend{font-size:14px; font-weight:600; color:var(--grau-900); padding:0}
fieldset.feld{border:none; margin:0 0 var(--s-4); padding:0}
.pflicht{color:var(--fehler); margin-left:2px}
.optional{font-weight:400; color:var(--grau-700); margin-left:var(--s-1)}
.hilfe{font-size:13px; color:var(--grau-700); line-height:1.45}
.eingabe{height:48px; width:100%; padding:0 var(--s-4); border:1px solid var(--feld-rahmen); border-radius:var(--r-m); background:var(--weiss);
  font-family:var(--schrift-text); font-size:16px; color:var(--schwarz); transition:border-color .14s, box-shadow .14s;
  -webkit-appearance:none; appearance:none}
select.eingabe{padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s-4) center; background-size:18px}
.eingabe:hover{border-color:var(--grau-900)}
.eingabe:focus{outline:none; border-color:var(--schwarz); box-shadow:0 0 0 3px rgba(212,175,55,.45)}
.eingabe.ist-fehler{border-color:var(--fehler)}
.eingabe.ist-fehler:focus{box-shadow:0 0 0 3px #FBE4E4}
textarea.eingabe{height:auto; min-height:120px; padding:var(--s-3) var(--s-4); resize:vertical; line-height:1.5}
.fehlertext{display:flex; align-items:center; gap:var(--s-2); font-size:13px; font-weight:600; color:var(--fehler); margin:0}
.fehlertext .i{width:15px; height:15px; stroke-width:2.2}
.wahl{display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-3); cursor:pointer}
.wahl input{appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:0; flex:0 0 auto; cursor:pointer;
  border:1px solid var(--feld-rahmen); background:var(--weiss); display:grid; place-content:center; transition:border-color .14s, background .14s}
.wahl input[type=checkbox]{border-radius:var(--r-s)}
.wahl input[type=radio]{border-radius:50%}
.wahl:hover input{border-color:var(--schwarz)}
.wahl input:checked{background:var(--schwarz); border-color:var(--schwarz)}
.wahl input:focus-visible{outline:3px solid var(--schwarz); outline-offset:2px}
.wahl input[type=checkbox]::before{content:""; width:11px; height:6px; border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform .12s}
.wahl input[type=checkbox]:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
.wahl input[type=radio]::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--brand); transform:scale(0); transition:transform .12s}
.wahl input[type=radio]:checked::before{transform:scale(1)}
.wahl input.ist-fehler{border-color:var(--fehler); box-shadow:0 0 0 3px #FBE4E4}
.wahl span{font-size:16px; color:var(--grau-900); line-height:1.45}
.wahl .zusatz{display:block; font-size:13px; color:var(--grau-700)}
/* Auswahl als Karten nebeneinander, z. B. Vor Ort oder Werkstatt */
.wahlkarten{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s-3)}
.wahlkarten legend{margin-bottom:var(--s-2)}
.wahlkarten .wahl{margin:0; padding:var(--s-4); align-items:flex-start; background:var(--weiss); border:1px solid var(--grau-300);
  border-radius:var(--r-m); transition:border-color .14s, box-shadow .14s}
.wahlkarten .wahl:hover{border-color:var(--grau-500)}
.wahlkarten .wahl:has(input:checked){border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.formular .senden{margin-top:var(--s-2)}

/* ── Mietkalender ── */
.kal-kopf{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-3)}
.kal-monat{font-family:var(--schrift-titel); font-size:22px; font-weight:600; margin:0}
.kal-pfeile{display:flex; gap:var(--s-2)}
.kal-pfeil{width:36px; height:36px; border-radius:var(--r-m); border:1px solid var(--grau-200); background:var(--weiss); color:var(--schwarz);
  display:grid; place-items:center; cursor:pointer; padding:0; transition:border-color .14s}
.kal-pfeil:hover:not(:disabled){border-color:var(--schwarz)}
.kal-pfeil:disabled{opacity:.35; cursor:default}
.kal-pfeil .i{width:17px; height:17px}
.kal-wt,.kal-tage{display:grid; grid-template-columns:repeat(7,1fr)}
.kal-wt span{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grau-700); text-align:center; padding:var(--s-1) 0 var(--s-2)}
.kal-tage{row-gap:var(--s-1)}
.kal-tag{position:relative; isolation:isolate; height:44px; border:0; background:none; padding:0; font:inherit; font-size:15px;
  font-variant-numeric:tabular-nums; color:var(--schwarz); cursor:pointer}
.kal-tag::before{content:""; position:absolute; inset:2px; border-radius:var(--r-m); z-index:-1; transition:background .12s, box-shadow .12s}
.kal-tag::after{content:""; position:absolute; top:2px; bottom:2px; left:0; right:0; z-index:-2}
.kal-tag:hover:not([aria-disabled="true"])::before{box-shadow:inset 0 0 0 1.5px var(--schwarz)}
.kal-tag[aria-disabled="true"]{cursor:default; color:var(--grau-300)}
.kal-tag.belegt{color:var(--grau-400)}
.kal-tag.belegt::before{background:repeating-linear-gradient(135deg, var(--grau-50) 0 4px, var(--grau-200) 4px 5.5px)}
.kal-tag.heute{color:var(--schwarz); font-weight:700}
.kal-tag.heute::before{background:radial-gradient(circle at 50% 84%, var(--brand) 2.5px, transparent 3px)}
.kal-tag.band::after{background:var(--grau-200)}
.kal-tag.band.mo::after{left:2px; border-radius:var(--r-m) 0 0 var(--r-m)}
.kal-tag.band.so::after{right:2px; border-radius:0 var(--r-m) var(--r-m) 0}
.kal-tag.start::after{left:50%; border-radius:0} .kal-tag.ende::after{right:50%; border-radius:0}
.kal-tag.start.so::after,.kal-tag.ende.mo::after,.kal-tag.allein::after{display:none}
.kal-tag.start,.kal-tag.ende,.kal-tag.allein{color:var(--weiss); font-weight:600}
.kal-tag.start::before,.kal-tag.ende::before,.kal-tag.allein::before{background:var(--schwarz); box-shadow:none}
.kal-legende{display:flex; align-items:center; gap:var(--s-2); font-size:13px; color:var(--grau-700); margin-top:var(--s-3)}
.kal-legende i{width:14px; height:14px; border-radius:var(--r-s); background:repeating-linear-gradient(135deg, var(--grau-50) 0 3px, var(--grau-300) 3px 4.5px)}
.kal-fuss{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--grau-200); min-height:64px}
.kal-auswahl b{display:block; font-weight:700; line-height:1.3}
.kal-auswahl span{display:block; font-size:14px; color:var(--grau-700)}

/* ── Anfrageband vor dem Fuss ── */
.cta{padding:var(--s-8) 0 var(--s-9)}
.anfrageband{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:var(--s-8)}
.anfrageband .geist{position:absolute; right:-1%; top:50%; transform:translateY(-50%); font-size:clamp(120px,17vw,240px)}
.anfrageband .innen{position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--s-6) var(--s-7); flex-wrap:wrap}
.anfrageband h2{max-width:24ch}
.anfrageband p{color:var(--grau-300); margin-top:var(--s-4); max-width:48ch}

/* ── Fuss ── */
footer{background:var(--schwarz); color:var(--grau-400); padding:var(--s-8) 0 var(--s-5)}
.fuss{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-6)}
.fuss-text{font-size:15px; margin-top:var(--s-3); max-width:32ch}
footer h4{font-family:var(--schrift-text); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--weiss); margin-bottom:var(--s-3); font-weight:700}
footer ul{list-style:none; margin:0; padding:0}
footer li{padding:var(--s-1) 0; font-size:15px}
footer a{color:var(--grau-400); text-decoration:none} footer a:hover{color:var(--brand)}
.fussende{border-top:1px solid var(--anthrazit-2); margin-top:var(--s-6); padding-top:var(--s-4);
  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:14px; color:var(--grau-500)}

/* ── Rechtstexte ── */
.rechtstext{max-width:760px}
.rechtstext h2{font-size:clamp(26px,3vw,32px); margin:var(--s-7) 0 var(--s-3); padding-top:var(--s-5); border-top:1px solid var(--grau-200)}
.rechtstext h2:first-of-type{margin-top:0; border-top:none; padding-top:0}
.rechtstext h3{font-size:22px; margin:var(--s-5) 0 var(--s-2)}
.rechtstext p,.rechtstext li{color:var(--grau-900); line-height:1.7}
.rechtstext p + p{margin-top:var(--s-3)}
.rechtstext ul{padding-left:20px; margin:var(--s-3) 0}
.rechtstext address{font-style:normal; line-height:1.7; margin:var(--s-2) 0}
.offen{background:#FCE7DC; color:#7C2D12; padding:1px 6px; border-radius:var(--r-s); font-weight:600; font-size:.94em}

/* ── Einwilligung: ein Banner fuer Statistik und externe Inhalte, unten links ── */
.einwilligung{position:fixed; left:var(--s-4); bottom:var(--s-4); z-index:70; width:min(440px, calc(100% - 2 * var(--s-4)));
  max-height:calc(100vh - 2 * var(--s-4)); overflow-y:auto; background:var(--weiss); border:1px solid var(--grau-200);
  border-radius:var(--r-l); box-shadow:var(--schatten); padding:var(--s-5)}
.einwilligung p{font-size:15px; line-height:1.5; color:var(--grau-700)}
.einwilligung .einw-titel{font-family:var(--schrift-titel); font-size:22px; font-weight:600; line-height:1.2; color:var(--schwarz); margin-bottom:var(--s-2)}
.einw-auswahl{margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--grau-200)}
.einw-auswahl .wahl input:disabled{cursor:default; opacity:.55}
.einwilligung .aktionen{margin-top:var(--s-4); gap:var(--s-3)}
.einwilligung .btn{flex:1 1 0}
.einw-fuss{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-3); font-size:14px}
.einw-fuss a,.einw-link{color:var(--grau-700)}
.einw-link{padding:0; border:0; background:none; font:inherit; text-decoration:underline; text-decoration-color:var(--brand);
  text-decoration-thickness:2px; text-underline-offset:3px; cursor:pointer}
.einw-link:hover,.einw-fuss a:hover{color:var(--schwarz)}
.fuss-link{padding:0; border:0; background:none; font:inherit; color:var(--grau-400); cursor:pointer}
.fuss-link:hover{color:var(--brand)}
/* ── Hinweisleiste ueber dem Kopf ── Text, Link und Stil kommen aus dem Backend */
.hinweisleiste{padding:var(--s-3) var(--s-5); text-align:center; font-size:15px; font-weight:600; line-height:1.45}
.hinweisleiste p{margin:0}
.hinweisleiste.dunkel{background:var(--schwarz); color:var(--weiss)}
.hinweisleiste.hell{background:var(--grau-100); color:var(--schwarz); border-bottom:1px solid var(--grau-200)}
.hinweisleiste a{margin-left:var(--s-2); color:inherit; text-decoration-color:var(--brand)}
.hinweisleiste.dunkel a:hover{text-decoration-color:var(--weiss)}
/* Google-Bewertung verlinkt aufs Profil, wenn das Backend einen Link kennt */
a.gbewertung{text-decoration:none}
a.gbewertung:hover > span:last-child{text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:3px}

/* ── Breakpoints ── */
@media (max-width:1099px){
  .kopf .bahn > .erreichbar{display:none}
  .kopf .bahn > .erreichbar:not([hidden]) + .anruf{margin-left:auto}
}
@media (max-width:960px){
  .nav,.kopf .anruf{display:none}
  .menue{display:block}
  .seitenkopf{padding-bottom:var(--s-7)}
  .seitenkopf .raster{grid-template-columns:minmax(0,1fr); gap:var(--s-6); margin-top:var(--s-6)}
  .zwei{grid-template-columns:1fr; gap:var(--s-7)}
  .karten{grid-template-columns:1fr 1fr}
  .schritte{grid-template-columns:1fr 1fr}
  .fuss{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .bahn{padding:0 20px}
  .abschnitt{padding:var(--s-8) 0}
  .karten,.karten.zwei-sp,.formraster,.wahlkarten{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr}
  .fuss{grid-template-columns:1fr}
  .anfrageband{padding:var(--s-6) var(--s-5)}
  .fragen summary{padding-left:20px; font-size:20px}
  .fragen .antwort{padding:0 20px 20px}
}
/* ── KERN ENDE ── alles darueber ist auf allen Seiten gleich ── */