/* ==========================================================================
   profieinbrecher.de — Designsystem, RICHTUNG A: "Raster & Linien"
   SICHERHEIT und TECHNIK Heuberger

   Haltung: Werkstattblatt. Flach, linksbündig, kräftige Linien statt Schatten,
   sichtbares Raster. Rot ausschliesslich an Anruf-Elementen und roter Ampel.
   Mobil zuerst. Keine externen Ressourcen, keine Frameworks.
   ========================================================================== */

:root {
  /* --- Ink / Anthrazit ------------------------------------------------ */
  --anthrazit:       #2b3238;   /* Logo-Anthrazit, Flächen */
  --anthrazit-hell:  #4a545c;
  --anthrazit-tief:  #171c20;   /* dunkelste Fläche, Hero-Kontrapunkt */
  --text:            #1b2126;
  --text-leise:      #5a646c;
  --text-invers:     #eef1f3;
  --text-invers-leise: #aab5bd;

  /* --- Blau: Arbeitsfarbe, Links, Struktur ---------------------------- */
  --blau:            #0f5fbe;
  --blau-dunkel:     #0a4691;
  --blau-hell:       #7fb0f0;   /* nur auf dunklem Grund */
  --blau-hauch:      #e9f0fa;

  /* --- Signale: Rot nur Notruf, Grün nur WhatsApp/OK ------------------ */
  /* Rot bleibt Warnung: rote Ampelstufe und Warnkasten. Sonst nirgends. */
  --notfall:         #c62a1e;
  --notfall-dunkel:  #99180f;
  --notfall-hauch:   #fbeceb;
  --notfall-linie:   #e3a49e;

  /* Anrufen. Auf Wunsch von Alex am 15.08. von Rot auf Orange umgestellt:
     Rot liest sich als Warnung, der Anruf ist aber das erwuenschte Ziel.
     Weiss auf --anruf ergibt 4,7:1, damit auch fuer normalen Text sicher. */
  --anruf:           #c94a08;
  --anruf-dunkel:    #9a330a;
  --wa:              #1faa54;   /* vorgegeben, nicht ändern */
  --wa-dunkel:       #17843f;
  --gruen:           #12784a;
  --gruen-hauch:     #e7f2eb;
  --gruen-linie:     #a5cdb4;

  /* Eigene Farbe fuer den Festpreis-Rechner. Auf Wunsch von Alex am 15.08.:
     Der Rechner ist das wichtigste Element der Seite und soll sich abheben.
     Bewusst weder WhatsApp-Gruen (#1faa54, reserviert) noch das dunklere
     Ampelgruen. Weiss darauf 5,0:1, die Unterzeile in --rechner-zeile 4,6:1. */
  --rechner:         #15803d;
  --rechner-tief:    #0f6330;
  --rechner-zeile:   #e4f3e8;
  --rechner-hauch:   #eef8f1;
  --orange:          #a85f06;
  --orange-hauch:    #fbf1e0;
  --orange-linie:    #dfbb85;

  /* --- Grund & Linien ------------------------------------------------- */
  --weiss:           #fff;
  --sand:            #f2efea;
  --sand-tief:       #e8e3db;
  --linie:           #d8d2c8;   /* 1px Trennlinien */
  --linie-stark:     var(--anthrazit-tief); /* 2px Struktur */

  /* --- Maße ----------------------------------------------------------- */
  --wrap: 1180px;
  --rand: 1.25rem;
  --r: 2px;
  --r-gross: 2px;
  --r-pille: 2px;
  /* Schaltflaechen sind das einzige weiche Element im sonst kantigen Raster.
     Auf Wunsch von Alex am 15.08.: Knoepfe sollen als Knoepfe lesbar sein. */
  --r-btn: 8px;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;

  --linie-1: 1px solid var(--linie);
  --linie-2: 2px solid var(--linie-stark);

  /* Schatten: in Richtung A nur dort, wo etwas wirklich über dem
     Inhalt liegt (mobile Dauerleiste, Aufklappmenü). Sonst keine. */
  --schatten: none;
  --schatten-hoch: 0 12px 28px rgba(23,28,32,.18);

  /* --- Schrift: Systemstack, null Ladezeit --------------------------- */
  --sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zahl: var(--sys);

  --tr: .14s cubic-bezier(.2,.6,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sys);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
}

img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }

/* ---------- Typografie ----------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--anthrazit-tief);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  /* Ergaenzung 15.08.: Ohne das laufen lange deutsche Komposita wie
     "Umsatzsteuer-Identifikationsnummer" im Impressum bei 360px aus der Seite. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.3rem); }
h3 { font-size: clamp(1.12rem, 1.02rem + .5vw, 1.32rem); letter-spacing: -.012em; }
h4 { font-size: 1.02rem; letter-spacing: -.008em; }
p  { margin: 0 0 1.1em; text-wrap: pretty; overflow-wrap: break-word; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }

a { color: var(--blau-dunkel); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--blau); }

::selection { background: var(--blau); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: var(--r);
}

.wrap { width: min(100% - (var(--rand) * 2), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--anthrazit-tief); color: #fff; padding: .8rem 1.2rem; font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   Rahmen
   ========================================================================== */

/* ---------- Notleiste ------------------------------------------------ */
.notleiste { background: var(--anthrazit-tief); color: var(--text-invers-leise); font-size: .84rem; }
.notleiste__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 38px; }
.notleiste__txt { display: inline-flex; align-items: center; gap: .55rem; letter-spacing: .005em; }
.notleiste__tel {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.notleiste__tel svg { flex: none; }
.notleiste__tel:hover { color: #fff; border-bottom-color: var(--anruf); }
.puls { width: 7px; height: 7px; border-radius: 50%; background: #3ec27c; box-shadow: 0 0 0 0 rgba(62,194,124,.6); animation: puls 2.6s infinite; flex: none; }
@keyframes puls { 70% { box-shadow: 0 0 0 7px rgba(62,194,124,0); } 100% { box-shadow: 0 0 0 0 rgba(62,194,124,0); } }
@media (max-width: 900px) { .notleiste__txt { font-size: .78rem; } }

/* ---------- Google-Sterne -------------------------------------------- */
/* Erscheinen nur, wenn Schnitt und Anzahl in bewertungen.json gepflegt sind.
   Nur sichtbarer Text, bewusst KEIN aggregateRating im JSON-LD. */
.sterne {
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.sterne__bilder { color: #f0a500; font-size: 1rem; letter-spacing: .04em; }
.sterne__zahl { font-weight: 800; font-variant-numeric: tabular-nums; }
.sterne__quelle { font-weight: 400; }
.sterne--dunkel { color: var(--text-invers-leise); font-size: .82rem; }
.sterne--dunkel .sterne__zahl { color: #fff; }
.sterne--dunkel:hover { color: #fff; }
.sterne--hell { color: var(--text-leise); font-size: .88rem; }
.sterne--hell .sterne__zahl { color: var(--anthrazit-tief); }
.sterne--hell:hover { color: var(--anthrazit-tief); }

/* Stoerer auf dem Hero-Foto. Auf Wunsch von Alex am 15.08.: die Bewertung soll
   als Sticker am Bild kleben statt als Zeile unter den Vorteilen zu stehen.
   Sitzt oben rechts und ragt bewusst ueber die Bildkante, damit es klebt. */
.sterne--stoerer {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  white-space: normal; text-align: center;
  background: var(--weiss); color: var(--text-leise);
  border: 2px solid var(--anthrazit-tief); border-radius: var(--r-btn);
  padding: .5rem .8rem .45rem;
  box-shadow: 0 6px 16px rgba(23,28,32,.18);
}
.sterne--stoerer .sterne__bilder { font-size: .92rem; letter-spacing: .02em; }
.sterne--stoerer .sterne__zahl { font-size: 1.45rem; line-height: 1.05; color: var(--anthrazit-tief); }
.sterne--stoerer .sterne__quelle { font-size: .7rem; letter-spacing: .01em; }
.sterne--stoerer:hover { color: var(--text-leise); border-color: var(--blau); }
@media (max-width: 560px) {
  .sterne--stoerer { top: -10px; right: -8px; padding: .4rem .65rem .35rem; }
  .sterne--stoerer .sterne__zahl { font-size: 1.25rem; }
}
/* In der Notleiste ist links wenig Platz, dort faellt die Wortmarke zuerst weg */
@media (max-width: 860px) { .notleiste .sterne__quelle { display: none; } }
@media (max-width: 620px) { .notleiste .sterne { display: none; } }

/* ---------- Kopf ----------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: var(--weiss);
  border-bottom: var(--linie-2);
}
.kopf__in { display: flex; align-items: center; gap: var(--s4); min-height: 66px; }
/* Das Logo im Kopf traegt im heutigen HTML ein inline style="width:100%".
   Deshalb begrenzt der Link die Breite, nicht das Bild. */
.marke { flex: none; display: block; line-height: 0; width: 190px; max-width: 46vw; }
.marke__bild { width: 100%; height: auto; }
@media (max-width: 560px) { .marke { width: 148px; } }

.menue-schalter {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .85rem;
  background: var(--weiss); border: 2px solid var(--anthrazit-tief); border-radius: var(--r);
  font: inherit; font-size: .86rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--anthrazit-tief); cursor: pointer; transition: background var(--tr), color var(--tr);
}
.menue-schalter:hover { background: var(--sand); }
.menue-schalter[aria-expanded="true"] { background: var(--anthrazit-tief); color: #fff; }
.menue-schalter__balken { position: relative; width: 18px; height: 2px; background: currentColor; }
.menue-schalter__balken::before, .menue-schalter__balken::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
.menue-schalter__balken::before { top: -6px; }
.menue-schalter__balken::after  { top: 6px; }
[aria-expanded="true"] .menue-schalter__balken { background: transparent; }
[aria-expanded="true"] .menue-schalter__balken::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menue-schalter__balken::after  { transform: translateY(-6px) rotate(-45deg); }

.hauptnav { display: none; }
.hauptnav.offen {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--weiss); border-bottom: var(--linie-2); box-shadow: var(--schatten-hoch);
  padding: 0 var(--rand) var(--s5); max-height: calc(100dvh - 104px); overflow-y: auto;
}
.hauptnav__liste { list-style: none; margin: 0; padding: 0; }
.hauptnav__liste > li { border-bottom: var(--linie-1); }
.hauptnav__liste > li:last-child { border-bottom: 0; }
.hauptnav a {
  display: block; min-height: 44px; padding: .85rem .1rem;
  color: var(--anthrazit-tief); font-weight: 700; text-decoration: none;
}
.hauptnav a:hover { color: var(--blau); }
.hauptnav a[aria-current="page"] { color: var(--blau-dunkel); box-shadow: inset 3px 0 0 var(--blau); padding-left: .7rem; }
.hauptnav__unter { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--linie); }
.hauptnav__unter a { font-weight: 500; font-size: .94rem; padding: .5rem .1rem; color: var(--text-leise); }
.hauptnav__unter a:hover { color: var(--blau); }
.hauptnav__cta { display: flex; gap: .6rem; margin-top: var(--s4); }
.hauptnav__cta .btn { flex: 1; }

/* Die beiden Knoepfe im Kopf sind Schaltflaechen, keine Navigationslinks.
   Ohne diesen Block gewinnt ".hauptnav a" (hoehere Spezifitaet) und setzt
   Textfarbe, Innenabstand und Mindesthoehe des Knopfs zurueck. Ergebnis war
   dunkler Text auf Rot bei 1,6:1 und ein zusammengedrueckter Knopf. */
.hauptnav .btn {
  display: inline-flex; min-height: 48px; padding: .8rem 1.25rem;
  border-bottom-width: 2px; border-bottom-style: solid;
  color: #fff; font-size: .96rem; font-weight: 800;
}
.hauptnav .btn:hover, .hauptnav .btn:focus-visible { color: #fff; }
.hauptnav .btn--tel { border-bottom-color: var(--anruf); }
.hauptnav .btn--tel:hover, .hauptnav .btn--tel:focus-visible { border-bottom-color: var(--anruf-dunkel); }
.hauptnav .btn--wa { border-bottom-color: var(--wa); }
.hauptnav .btn--wa:hover, .hauptnav .btn--wa:focus-visible { border-bottom-color: var(--wa-dunkel); }

@media (min-width: 1000px) {
  .menue-schalter { display: none; }
  .hauptnav {
    display: flex !important; position: static !important; align-items: center; gap: 1.3rem;
    margin-left: auto; padding: 0 !important; box-shadow: none !important; border: 0 !important;
    max-height: none !important; overflow: visible !important; background: none;
  }
  .hauptnav__liste { display: flex; align-items: center; gap: 1.15rem; }
  .hauptnav__liste > li { border: 0; position: relative; }
  .hauptnav a { padding: .45rem 0; min-height: 0; font-size: .93rem; border-bottom: 2px solid transparent; }
  .hauptnav a:hover { border-bottom-color: var(--blau); }
  .hauptnav a[aria-current="page"] { box-shadow: none; padding-left: 0; border-bottom-color: var(--blau); }
  .hauptnav__unter {
    position: absolute; top: calc(100% + .55rem); left: -.9rem; width: 296px;
    background: var(--weiss); border: 2px solid var(--anthrazit-tief); border-radius: var(--r);
    padding: .35rem; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
  }
  .hauptnav__liste > li:hover .hauptnav__unter,
  .hauptnav__liste > li:focus-within .hauptnav__unter { opacity: 1; visibility: visible; transform: none; }
  .hauptnav__unter a { padding: .5rem .65rem; border-bottom: 0; }
  .hauptnav__unter a:hover { background: var(--blau-hauch); color: var(--blau-dunkel); }
  .hauptnav__cta { margin: 0 0 0 .5rem; gap: .5rem; align-items: center; }
  /* Im Kopf etwas kompakter als im Inhalt, aber beide Knoepfe exakt gleich hoch
     und mit gleichem Innenabstand. 44px bleibt das Mindestmass fuer Tippziele. */
  .hauptnav__cta .btn {
    flex: none; min-height: 44px; padding: .6rem 1.05rem;
    font-size: .9rem; letter-spacing: -.01em;
  }
  .hauptnav__cta .btn svg { width: 17px; height: 17px; }
}

/* ---------- Brotkrumen ----------------------------------------------- */
.krume { background: var(--sand); border-bottom: var(--linie-1); font-size: .82rem; }
.krume ol { list-style: none; margin: 0; padding: .6rem 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.krume li::after { content: "/"; margin-left: .4rem; color: #a9a196; }
.krume li:last-child::after { content: ""; }
.krume a { color: var(--text-leise); text-decoration: none; }
.krume a:hover { color: var(--blau); text-decoration: underline; }
.krume [aria-current] { color: var(--anthrazit-tief); font-weight: 700; }

/* ==========================================================================
   Schaltflächen
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.25rem;
  border: 2px solid transparent; border-radius: var(--r-btn);
  font: inherit; font-size: .96rem; font-weight: 800; line-height: 1.15; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform .1s;
}
.btn svg { flex: none; }
.btn:focus-visible { border-radius: var(--r-btn); }

.btn--tel { background: var(--anruf); border-color: var(--anruf); color: #fff; }
.btn--tel:hover, .btn--tel:focus-visible { background: var(--anruf-dunkel); border-color: var(--anruf-dunkel); color: #fff; }
.btn--tel:active { background: var(--anruf-dunkel); transform: translateY(1px); }

.btn--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn--wa:hover, .btn--wa:focus-visible { background: var(--wa-dunkel); border-color: var(--wa-dunkel); color: #fff; }
.btn--wa:active { transform: translateY(1px); }

.btn--blau { background: var(--blau); border-color: var(--blau); color: #fff; }
.btn--blau:hover, .btn--blau:focus-visible { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.btn--blau:active { transform: translateY(1px); }

.btn--linie { background: transparent; border-color: var(--anthrazit-tief); color: var(--anthrazit-tief); }
.btn--linie:hover, .btn--linie:focus-visible { background: var(--anthrazit-tief); border-color: var(--anthrazit-tief); color: #fff; }
.btn--linie:active { transform: translateY(1px); }

.btn--gross { min-height: 58px; padding: 1rem 1.5rem; font-size: 1.1rem; }
.btn--voll  { width: 100%; }

/* Telefonnummer im Knopf: Ziffern gleichmäßig */
.btn[href^="tel:"] { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Auf dunklem Grund bleibt der Umriss-Knopf lesbar */
.hero--dunkel .btn--linie, .schluss .btn--linie {
  border-color: #7b868e; color: #fff;
}
.hero--dunkel .btn--linie:hover, .schluss .btn--linie:hover { background: #fff; border-color: #fff; color: var(--anthrazit-tief); }

/* ==========================================================================
   Hero — hell, auf Sand. Der Kontrapunkt (dunkel) sind Rechner und Schluss.
   ========================================================================== */
.hero { position: relative; background: var(--sand); color: var(--text); border-bottom: var(--linie-2); }
.hero__in { display: grid; gap: var(--s5); padding: var(--s6) 0 var(--s7); }
.hero__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--weiss); border: 2px solid var(--anthrazit-tief); border-radius: var(--r);
  color: var(--anthrazit-tief); padding: .34rem .7rem; margin-bottom: var(--s4);
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.hero__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--anruf); flex: none; }
/* 26ch statt 22ch: die H1 traegt seit 15.08. das Fokus-Keyword und ist laenger. */
.hero h1 { color: var(--anthrazit-tief); margin-bottom: .5rem; max-width: 26ch; }
.hero h1 em { font-style: normal; color: var(--blau-dunkel); }
.hero__lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.24rem); line-height: 1.5; color: var(--text-leise); max-width: 46ch; margin-bottom: var(--s5); }
.hero__lead strong { color: var(--anthrazit-tief); font-weight: 800; }
.hero--dunkel .hero__lead strong { color: #fff; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--s3); }
/* flex-basis 0 statt auto: beide Knoepfe werden exakt gleich breit, damit die
   beiden Belege darunter buendig darunter sitzen (Wunsch Alex 15.08.). */
.hero__btns .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
@media (max-width: 420px) {
  .hero__btns { display: grid; grid-template-columns: 1fr; }
  .hero__btns .btn { width: 100%; }
}
.hero__anker { margin: 0 0 var(--s5); font-size: .92rem; }
.hero__anker a { color: var(--blau-dunkel); font-weight: 700; }
/* Vorteile im Hero. Bewusst zurueckhaltend: drei kurze Belege, kein Rahmen,
   keine Flaeche. Der Blick soll an den Kontaktknoepfen und am Rechner haengen
   bleiben, nicht an dieser Zeile. Stand 15.08. nach Rueckmeldung von Alex. */
.hero__punkte {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: .35rem;
  font-size: .88rem; line-height: 1.45; color: var(--text-leise);
}
/* Zwei Spalten mit demselben Abstand wie .hero__btns, damit die beiden Belege
   genau unter den beiden Schaltflaechen sitzen. */
@media (min-width: 520px) { .hero__punkte { grid-template-columns: 1fr 1fr; gap: .35rem .6rem; } }
.hero__punkte li { display: flex; align-items: center; gap: .4rem; }
.hero__punkte svg { flex: none; color: var(--gruen); }
.hero__punkte strong { font-weight: 800; color: var(--anthrazit-tief); }
.hero__bild { position: relative; border: 2px solid var(--anthrazit-tief); border-radius: var(--r); background: var(--sand-tief); }
.hero__bild picture { display: block; overflow: hidden; border-radius: inherit; }
.hero__bild img { width: 100%; }
@media (max-width: 899px) {
  .hero__bild { order: -1; }
  .hero__bild img { height: 180px; object-fit: cover; object-position: center 26%; }
}
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s7); padding: var(--s8) 0; }
}

/* Optionale dunkle Hero-Fassung für Unterseiten */
.hero--dunkel { background: var(--anthrazit-tief); color: var(--text-invers); border-bottom: 0; }
.hero--dunkel h1 { color: #fff; }
.hero--dunkel h1 em { color: var(--blau-hell); }
.hero--dunkel .hero__lead { color: var(--text-invers-leise); }
.hero--dunkel .hero__kicker { background: transparent; border-color: #6d777f; color: #fff; }
.hero--dunkel .hero__punkte { color: var(--text-invers-leise); }
.hero--dunkel .hero__punkte strong { color: #fff; }
.hero--dunkel .hero__anker a { color: var(--blau-hell); }
.hero--dunkel .hero__bild { border-color: #39424a; }

/* ==========================================================================
   Abschnitte, Raster, Karten
   ========================================================================== */
.sek { padding: var(--s7) 0; }
.sek--sand { background: var(--sand); }
.sek--blau { background: var(--blau-hauch); }
.sek--eng  { padding: var(--s6) 0; }
.sek__kopf { max-width: 62ch; margin-bottom: var(--s6); }
.sek__kopf--mitte { margin-inline: auto; }  /* linksbündig bleibt, nur zentriert im Satzspiegel */
.sek__kicker {
  display: block; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blau-dunkel); margin-bottom: .55rem;
}
.lead { font-size: 1.08rem; line-height: 1.55; color: var(--text-leise); }

.raster { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .raster--3 { grid-template-columns: repeat(3, 1fr); } .raster--4 { grid-template-columns: repeat(4, 1fr); } }

.karte {
  background: var(--weiss); border: var(--linie-2); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: background var(--tr);
}
a.karte { text-decoration: none; color: inherit; }
a.karte:hover { background: var(--sand); color: inherit; }
.karte__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-tief); border-bottom: var(--linie-2); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte__txt { padding: 1.15rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.karte__txt h3 { margin-bottom: .35rem; }
.karte__txt p { font-size: .94rem; color: var(--text-leise); }
.karte__mehr {
  margin-top: auto; padding-top: var(--s4); font-weight: 800; font-size: .9rem;
  color: var(--blau-dunkel); display: inline-flex; align-items: center; gap: .35rem;
}
.karte__mehr::after { content: "→"; transition: transform var(--tr); }
a.karte:hover .karte__mehr::after { transform: translateX(3px); }

/* ---------- Vertrauensblock ------------------------------------------ */
.vertrauen { display: grid; gap: 0; border: var(--linie-2); background: var(--weiss); }
.vertrauen__pkt { padding: 1.15rem 1.2rem; border-bottom: var(--linie-1); }
.vertrauen__pkt:last-child { border-bottom: 0; }
/* Haken groesser und kraeftiger, damit der Block positiv wirkt statt nur sachlich.
   Er steht vor der Ueberschrift auf eigener Zeile, dadurch beginnen alle vier
   Ueberschriften auf gleicher Hoehe, egal wie lang sie sind. */
.vertrauen__pkt h3 { font-size: 1rem; margin-bottom: .35rem; }
.vertrauen__pkt .haken {
  display: block; color: var(--gruen); margin-bottom: .5rem;
  width: 26px; height: 26px;
}
.vertrauen__pkt p { font-size: .92rem; color: var(--text-leise); margin: 0; }
@media (min-width: 700px) {
  .vertrauen { grid-template-columns: repeat(2, 1fr); }
  .vertrauen__pkt { border-right: var(--linie-1); }
  .vertrauen__pkt:nth-child(2n) { border-right: 0; }
  .vertrauen__pkt:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1040px) {
  .vertrauen { grid-template-columns: repeat(4, 1fr); }
  .vertrauen__pkt { border-bottom: 0; border-right: var(--linie-1); }
  .vertrauen__pkt:nth-child(2n) { border-right: var(--linie-1); }
  .vertrauen__pkt:last-child { border-right: 0; }
}

/* ---------- Ablauf --------------------------------------------------- */
.ablauf { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--linie-2); }
.ablauf li { counter-increment: s; padding: 1.2rem 0 1.2rem 3.4rem; border-bottom: var(--linie-1); position: relative; }
.ablauf li::before {
  content: counter(s); position: absolute; left: 0; top: 1.2rem;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--anthrazit-tief); color: #fff; font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.ablauf h3 { font-size: 1rem; margin-bottom: .25rem; }
.ablauf p { font-size: .92rem; color: var(--text-leise); margin: 0; }
@media (min-width: 860px) {
  .ablauf { grid-template-columns: repeat(4, 1fr); border-bottom: var(--linie-2); }
  .ablauf li { border-bottom: 0; border-right: var(--linie-1); padding: 1.4rem 1.2rem 1.5rem; }
  .ablauf li:last-child { border-right: 0; }
  .ablauf li::before { position: static; margin-bottom: .8rem; }
}

/* ==========================================================================
   Ampel + Preisrechner — das Herzstück
   ========================================================================== */
/* Der Rechner ist das einzige Element mit eigener Farbe und 3px-Kante.
   Das ist die Ausnahme von "alles gleich stark", weil er das Ziel der Seite ist. */
.rechner {
  background: var(--weiss);
  border: 3px solid var(--rechner);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.rechner__kopf { background: var(--rechner); color: #fff; padding: 1.15rem 1.3rem; }
.rechner__kopf h2 { color: #fff; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin-bottom: .3rem; }
.rechner__kopf p { color: var(--rechner-zeile); font-size: .9rem; margin: 0; }
/* minmax(0, 1fr) ist hier die entscheidende Zeile. Ohne sie bekommt das Raster
   eine implizite "auto"-Spalte, die sich auf die maximale Inhaltsbreite aufblaeht
   — bei 320px Fensterbreite auf 290px, obwohl nur 232px Platz sind. Der Rechner
   wird dann rechts abgeschnitten. Mit 1fr bekommt die Spalte genau den
   vorhandenen Platz und alles darin muss sich fuegen. */
.rechner__leib { padding: 1.3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
@media (min-width: 640px) { .rechner__kopf { padding: 1.3rem 1.6rem; } .rechner__leib { padding: 1.6rem; } }

.feld > label, .feld > .feld__label {
  display: block; margin-bottom: .55rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--anthrazit-tief);
}
.feld__hint { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--text-leise); font-size: .82rem; }

/* --- Postleitzahl --- */
.plz-reihe { display: flex; gap: .6rem; }
.plz-reihe input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.35rem; font-weight: 800;
  letter-spacing: .16em; font-variant-numeric: tabular-nums;
  min-height: 56px; padding: .7rem .85rem;
  background: var(--sand); color: var(--anthrazit-tief);
  border: 2px solid var(--anthrazit-tief); border-radius: var(--r);
}
.plz-reihe input:hover { background: var(--sand-tief); }
.plz-reihe input:focus { outline: none; background: var(--weiss); border-color: var(--blau); box-shadow: inset 0 0 0 2px var(--blau-hauch), 0 0 0 3px rgba(15,95,190,.25); }
.plz-reihe input::placeholder { font-weight: 600; font-size: .95rem; letter-spacing: .02em; color: #93897d; }

/* --- Ampel: getönte Fläche, farbiger Kreis mit Symbol --- */
.ampel {
  display: none; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.1rem; border: 2px solid; border-radius: var(--r);
  animation: einblenden .3s ease both;
}
.ampel.an { display: flex; }
.ampel__licht {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.ampel__licht svg { width: 24px; height: 24px; }
.ampel__txt { flex: 1; min-width: 0; }
.ampel__titel { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.012em; }
.ampel__zeile { margin: 0; font-size: .93rem; line-height: 1.5; }
.ampel__zeile + .ampel__zeile { margin-top: .4rem; }

/* Anschlussangebot in der roten Ampel. Bewusst als Block mit eigener Trennlinie,
   kurzer Ueberschrift und Schlagwortliste statt als Fliesstext: Wer gerade eine
   Absage bekommt, liest keinen Absatz mehr, sondern ueberfliegt. */
.ampel__mehr { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--notfall-linie); }
.ampel__mehr-titel { margin: 0 0 .55rem; font-size: .88rem; font-weight: 800; color: var(--anthrazit-tief); }
.marken { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.marken li {
  background: var(--weiss); border: 1px solid var(--notfall-linie); border-radius: var(--r-btn);
  padding: .28rem .6rem; font-size: .81rem; font-weight: 700; color: var(--anthrazit-tief);
  line-height: 1.35;
}
.ampel__mehr .btn { min-height: 44px; padding: .6rem 1.1rem; font-size: .92rem; }
.ampel__fuss { margin: .8rem 0 0; font-size: .82rem; color: var(--text-leise); }

/* Gruener Kasten im roten Block. Was trotzdem geht, soll sofort ins Auge
   springen, sonst liest niemand ueber die Absage hinaus (Wunsch Alex 15.08.). */
.ampel__ja {
  margin-top: .9rem; padding: .85rem .95rem;
  background: var(--gruen-hauch); border: 2px solid var(--gruen-linie); border-radius: var(--r-btn);
}
.ampel__ja-titel {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem;
  font-size: .92rem; font-weight: 800; color: var(--gruen);
}
.ampel__ja-titel svg { flex: none; }
.ampel__ja .marken { margin-bottom: 0; }
.ampel__ja .marken li { border-color: var(--gruen-linie); }
.ampel__ja .btn { margin-top: .85rem; min-height: 44px; padding: .6rem 1.1rem; font-size: .92rem; }

/* Zonenuebersicht auf der Einsatzgebiet-Seite. Nutzt bewusst dieselben
   Ampelbausteine wie der Rechner, damit Erklaerung und Werkzeug zusammenpassen. */
.zonen { display: grid; gap: var(--s4); }
.zonen__block { animation: none; }

.ampel--gruen  { background: var(--gruen-hauch);   border-color: var(--gruen-linie); }
.ampel--gruen  .ampel__licht { background: var(--gruen); }
.ampel--gruen  .ampel__titel { color: #0a5c37; }
.ampel--orange { background: var(--orange-hauch);  border-color: var(--orange-linie); }
.ampel--orange .ampel__licht { background: var(--orange); }
.ampel--orange .ampel__titel { color: #7b4504; }
.ampel--rot    { background: var(--notfall-hauch); border-color: var(--notfall-linie); }
.ampel--rot    .ampel__licht { background: var(--notfall); }
.ampel--rot    .ampel__titel { color: var(--notfall-dunkel); }

@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ampel, .ergebnis, .feld[data-schritt] { animation: none !important; } }

/* --- Auswahlkacheln --- */
/* minmax(0, 1fr) statt 1fr: Ein blosses "1fr" ist "minmax(auto, 1fr)" und darf
   deshalb NICHT unter die Mindestbreite seines Inhalts schrumpfen. Sobald ein
   Wort wie "abgebrochen" breiter rendert als der Platz hergibt — auf dem iPhone
   frueher als im Chrome, die Systemschrift laeuft dort breiter — sprengt das
   Raster den Rechnerkasten und die rechte Spalte wird abgeschnitten.
   Mit minmax(0, 1fr) teilen sich die Spalten immer nur den vorhandenen Platz. */
.wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 360px) { .wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 560px) { .wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wahl label {
  display: flex; align-items: center; flex-wrap: wrap; text-align: left;
  /* Rastereintraege haben von Haus aus min-width:auto und wehren sich gegen das
     Schrumpfen. min-width:0 hebt das auf. "hyphens" trennt lange deutsche
     Woerter wie "abgeschlossen" sauber mit Bindestrich (das lang="de" im
     html-Element liefert die Trennregeln), "break-word" ist nur die Notbremse,
     falls ein Wort selbst dafuer zu lang ist. */
  min-width: 0; hyphens: auto; overflow-wrap: break-word;
  min-height: 56px; padding: .6rem .75rem;
  background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--r);
  font-size: .92rem; font-weight: 700; line-height: 1.25; color: var(--anthrazit-tief);
  cursor: pointer; transition: border-color var(--tr), background var(--tr), color var(--tr);
}
.wahl label:hover { border-color: var(--anthrazit-hell); background: var(--sand); }
.wahl input:checked + label {
  border-color: var(--blau); background: var(--blau-hauch); color: var(--blau-dunkel);
  box-shadow: inset 0 0 0 2px var(--blau-hauch);
}
.wahl input:focus-visible + label { outline: 3px solid var(--blau); outline-offset: 2px; }
/* Zweite Zeile in der Kachel "Schnellstmöglich": welches Zeitfenster gerade gilt.
   Wird von app.js gefüllt und bleibt leer, wenn kein JavaScript läuft. */
.wahl__jetzt { flex: 1 0 100%; font-size: .78rem; font-weight: 500; color: var(--text-leise); line-height: 1.3; }
.wahl__jetzt:empty { display: none; }
.wahl input:checked + label .wahl__jetzt { color: var(--blau-dunkel); }
.feld[data-schritt]:not([hidden]) { animation: einblenden .3s ease both; }

/* --- Ergebnis: die Preiszahl ist das größte Element der Seite --- */
.ergebnis { display: none; padding: 1.3rem; background: var(--sand); border-top: var(--linie-2); animation: einblenden .32s ease both; container-type: inline-size; }
.ergebnis.an { display: block; }
@media (min-width: 640px) { .ergebnis { padding: 1.6rem; } }
.ergebnis__preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .7rem; margin-bottom: .4rem; }
.ergebnis__zahl {
  font-family: var(--zahl);
  /* Die Zahl darf nie umbrechen. Groesse haengt an der Breite des Ergebnisblocks,
     nicht am Viewport — sonst passt "95-200 EUR" in einer Spalte nicht in eine Zeile. */
  font-size: clamp(2.4rem, 1.6rem + 5vw, 5.4rem);
  font-size: clamp(2.4rem, 13cqi, 5.4rem);
  white-space: nowrap;
  font-weight: 800; line-height: .95; letter-spacing: -.045em;
  color: var(--anthrazit-tief); font-variant-numeric: tabular-nums lining-nums;
}
/* Optional, sobald das Waehrungszeichen im HTML eigenes span hat */
.ergebnis__zahl span { font-size: .55em; font-weight: 800; letter-spacing: -.01em; margin-left: .06em; }
.ergebnis__label { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
.ergebnis__zusatz { font-size: .94rem; color: var(--text-leise); margin: 0 0 1rem; max-width: 46ch; }
.ergebnis__zusammenfassung {
  font-size: .9rem; color: var(--text); background: var(--weiss);
  border-left: 3px solid var(--anthrazit-tief); padding: .7rem .85rem; margin: 0 0 1.1rem;
}
.ergebnis__btns { display: grid; gap: .6rem; }
@media (min-width: 520px) { .ergebnis__btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ergebnis__fuss { font-size: .8rem; color: var(--text-leise); margin: .9rem 0 0; }

/* Freiwilliges Adressfeld, bewusst UNTER den Schaltflaechen und zurueckhaltend
   gesetzt: es soll niemanden aufhalten, der nur schnell anrufen will. */
.ergebnis__adresse { margin-top: var(--s4); }
.ergebnis__adresse label { display: block; margin-bottom: .4rem; font-size: .86rem; font-weight: 700; color: var(--text-leise); }
.ergebnis__adresse input {
  width: 100%; min-height: 48px; padding: .6rem .8rem;
  font: inherit; font-size: .96rem; color: var(--text);
  background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--r);
}
.ergebnis__adresse input:focus-visible { border-color: var(--blau); }

/* ==========================================================================
   Preistabelle
   ========================================================================== */
.tab-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--linie-2); border-radius: var(--r); background: var(--weiss); }
table.preise { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
table.preise th, table.preise td { padding: .85rem 1rem; text-align: left; border-bottom: var(--linie-1); }
table.preise thead th {
  background: var(--anthrazit-tief); color: #fff; border-bottom: 0;
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
table.preise tbody th { font-weight: 700; color: var(--anthrazit-tief); }
table.preise tbody tr:nth-child(even) th, table.preise tbody tr:nth-child(even) td { background: #faf8f5; }
table.preise td { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.preise td strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
table.preise .preise__spanne { white-space: normal; background: var(--blau-hauch) !important; }
table.preise .preise__spanne span { color: var(--text-leise); font-size: .87rem; font-variant-numeric: normal; }
table.preise tbody tr:last-child th, table.preise tbody tr:last-child td { border-bottom: 0; }

/* Unter 700px wird aus der Tabelle eine Kartenliste. Jede Zelle traegt ihre
   Spaltenbezeichnung in data-spalte, deshalb geht das ohne JavaScript und
   ohne dass der eilige Nutzer waagerecht wischen muss. */
@media (max-width: 700px) {
  .tab-huelle { overflow-x: visible; border: 0; background: none; }
  table.preise { min-width: 0; display: block; }
  table.preise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  table.preise tbody { display: block; }
  table.preise tbody tr {
    display: block; background: var(--weiss);
    border: var(--linie-2); border-radius: var(--r); margin-bottom: var(--s3);
  }
  table.preise tbody tr:last-child { margin-bottom: 0; }
  table.preise tbody th[scope="row"] {
    display: block; background: var(--sand); border-bottom: var(--linie-2);
    font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: .6rem .9rem;
  }
  table.preise tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
    padding: .55rem .9rem; border-bottom: var(--linie-1); white-space: nowrap;
  }
  table.preise tbody td::before {
    content: attr(data-spalte);
    color: var(--text-leise); font-size: .84rem; font-weight: 400;
    font-variant-numeric: normal; white-space: normal;
  }
  table.preise tbody td[colspan]::before { content: none; }
  table.preise tbody td[colspan] { justify-content: flex-start; }
  table.preise tbody tr td:last-child { border-bottom: 0; }
  table.preise tbody tr:nth-child(even) th, table.preise tbody tr:nth-child(even) td { background: none; }
  table.preise tbody tr:nth-child(even) th[scope="row"] { background: var(--sand); }
}

/* ==========================================================================
   Google-Bewertungen — statisch aus bewertungen.json, kein fremdes Widget
   ========================================================================== */
/* Schieber: reines CSS mit scroll-snap. Ohne JavaScript laesst sich die Spur
   weiterhin wischen und mit der Tastatur bedienen, die beiden Knoepfe sind nur
   Bequemlichkeit und deshalb mit .braucht-js ausgeblendet, wenn kein JS laeuft. */
.schieber { position: relative; margin-top: var(--s5); }
/* Flexbox statt Grid: in einem waagerechten Scroll-Container haben Prozente in
   grid-auto-columns keinen definierten Bezug, die Spalten kollabieren dann auf
   Container-Breite geteilt durch Anzahl. Bei flex-basis loesen sie sauber auf. */
.schieber__spur {
  display: flex; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s3); scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.schieber__spur > * { flex: 0 0 min(85%, 330px); }
@media (min-width: 700px)  { .schieber__spur > * { flex-basis: calc(50% - var(--s4) / 2); } }
@media (min-width: 1000px) { .schieber__spur > * { flex-basis: calc(33.333% - var(--s4) * 2 / 3); } }
.schieber__spur:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; }
.schieber__knoepfe { display: flex; gap: .5rem; margin-top: var(--s3); }
.schieber__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--weiss); border: 2px solid var(--anthrazit-tief); border-radius: var(--r-btn);
  color: var(--anthrazit-tief); cursor: pointer;
  transition: background var(--tr), color var(--tr), opacity var(--tr);
}
.schieber__knopf:hover { background: var(--anthrazit-tief); color: #fff; }
.schieber__knopf[disabled] { opacity: .3; cursor: default; }
.schieber__knopf[disabled]:hover { background: var(--weiss); color: var(--anthrazit-tief); }

.bewertung {
  margin: 0; padding: var(--s5);
  background: var(--weiss); border: var(--linie-2); border-radius: var(--r);
  display: flex; flex-direction: column; gap: .7rem;
  scroll-snap-align: start;
}
.stern { color: var(--orange); font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.bewertung blockquote { margin: 0; }
.bewertung blockquote p { margin: 0; font-size: .96rem; line-height: 1.55; }
.bewertung figcaption { margin-top: auto; padding-top: .3rem; font-size: .85rem; font-weight: 700; color: var(--text-leise); }
.bewertungen__quelle { margin: var(--s4) 0 0; font-size: .84rem; color: var(--text-leise); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border: var(--linie-2); border-radius: var(--r); background: var(--weiss); overflow: hidden; }
.faq__pkt { border-bottom: var(--linie-1); }
.faq__pkt:last-child { border-bottom: 0; }
.faq__pkt summary {
  list-style: none; cursor: pointer; position: relative;
  min-height: 56px; padding: 1.05rem 3.2rem 1.05rem 1.2rem;
  font-weight: 700; letter-spacing: -.008em; color: var(--anthrazit-tief);
}
.faq__pkt summary::-webkit-details-marker { display: none; }
.faq__pkt summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--anthrazit-tief); border-bottom: 2px solid var(--anthrazit-tief);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.faq__pkt[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__pkt summary:hover { background: var(--sand); }
.faq__pkt[open] summary { background: var(--sand); }
.faq__inhalt { padding: 0 1.2rem 1.25rem; color: var(--text-leise); font-size: .95rem; }

/* ==========================================================================
   Prosa
   ========================================================================== */
.prosa { max-width: 68ch; }
.prosa h2 { margin-top: 2.4rem; padding-top: 1.2rem; border-top: var(--linie-2); }
.prosa h3 { margin-top: 1.7rem; }

/* Ab 1000px zweispaltig: Ueberschrift links, Fliesstext rechts.
   Grund (Rueckmeldung von Alex am 15.08.): Eine 68ch breite Textspalte allein
   im 1180px-Raster laesst rechts eine tote Flaeche. Die Satzbreite bleibt
   trotzdem lesbar, sie wandert nur in die rechte Spalte. Die Trennlinie ueber
   der Ueberschrift bleibt in der linken Spalte und markiert den Abschnitt. */
@media (min-width: 1000px) {
  .prosa {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 37rem);
    justify-content: space-between;
    column-gap: var(--s7);
    align-items: start;
  }
  .prosa > * { grid-column: 2; }
  .prosa > h2 {
    grid-column: 1;
    margin-top: 0; padding-top: 1.2rem;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
    text-wrap: balance;
  }
  /* Der erste Block einer Sektion braucht oben keinen zusaetzlichen Abstand */
  .prosa > *:nth-child(2) { margin-top: 0; padding-top: 1.2rem; }
  .prosa > h3:nth-child(2) { padding-top: 1.35rem; }
  /* Steht die Prosa schon in einer Spalte (Zweispalter, Rechner, schmale
     Sektion), bleibt sie einspaltig. Sonst entstehen vier sehr schmale
     Spalten, siehe Kontaktseite. */
  .duo .prosa, .rechner .prosa, .wrap[style*="max-width"] .prosa {
    display: block; max-width: 68ch;
  }
  .duo .prosa > h2 { margin-top: 2.4rem; padding-top: 1.2rem; font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.3rem); }
  .duo .prosa > *:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
}
.prosa ul, .prosa ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prosa li { margin-bottom: .4em; }
.prosa .hinweis {
  background: var(--blau-hauch); border-left: 4px solid var(--blau);
  padding: 1rem 1.2rem; margin: 1.7rem 0; font-size: .95rem;
}
.prosa .warnung {
  background: var(--notfall-hauch); border-left: 4px solid var(--notfall);
  padding: 1rem 1.2rem; margin: 1.7rem 0; font-size: .95rem;
}
.prosa .nachgereicht {
  color: var(--text-leise); font-size: .92rem; font-style: normal;
  border-left: 3px solid var(--linie); padding-left: .9rem;
}

/* ---------- Zweispalter ---------------------------------------------- */
.duo { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--s7); } .duo--breit-links { grid-template-columns: 1.15fr .85fr; } }
.duo__bild { overflow: hidden; border: var(--linie-2); border-radius: var(--r); }
.duo__bild img { width: 100%; }

/* ---------- Ortsliste ------------------------------------------------ */
.orte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: var(--linie-2); background: var(--weiss); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.orte li { border-right: var(--linie-1); border-bottom: var(--linie-1); }
.orte a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  min-height: 48px; padding: .7rem .9rem; text-decoration: none;
  color: var(--anthrazit-tief); font-weight: 700; font-size: .93rem;
  transition: background var(--tr), color var(--tr);
}
.orte a:hover { background: var(--blau-hauch); color: var(--blau-dunkel); }
.orte .km { font-weight: 600; font-size: .82rem; color: var(--text-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Schlussblock & Fuß
   ========================================================================== */
.schluss { background: var(--anthrazit-tief); color: var(--text-invers-leise); }
.schluss__in { display: grid; gap: var(--s5); padding: var(--s7) 0; align-items: center; }
@media (min-width: 860px) { .schluss__in { grid-template-columns: 1.2fr auto; gap: var(--s6); } }
.schluss h2 { color: #fff; margin-bottom: .45rem; }
.schluss p { color: var(--text-invers-leise); margin: 0; max-width: 46ch; }
.schluss__txt strong { color: #fff; font-weight: 800; }
/* Bewusst auf __txt eingegrenzt. Eine Regel ".schluss a" haette hoehere
   Spezifitaet als ".btn--tel" und wuerde die Schaltflaechen danebenfaerben. */
.schluss__txt a { color: var(--blau-hell); font-weight: 700; }
.schluss__txt a:hover { color: #fff; }
.schluss__btns { display: flex; flex-wrap: wrap; gap: .7rem; }

.fuss { background: var(--anthrazit); color: #bcc5cc; font-size: .9rem; padding: var(--s7) 0 var(--s4); }
.fuss a { color: #bcc5cc; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__raster { display: grid; gap: var(--s5); }
@media (min-width: 700px)  { .fuss__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fuss__raster { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: var(--s6); } }
.fuss__marke { font-weight: 800; color: #fff; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .7rem; }
.fuss__marke span { color: #fff; }
/* Helle Logofassung auf dem dunklen Fussgrund */
.fuss__logo { margin: 0 0 var(--s4); line-height: 0; }
.fuss__logo-bild { width: 220px; max-width: 70%; height: auto; }

/* Instagram-Verweis. Icon ist inline eingebettet, keine Icon-Bibliothek. */
.ig { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 700; }
.ig svg { flex: none; }
.ig span { text-decoration: underline; text-underline-offset: .18em; }
.ig--fuss { color: #bcc5cc; }
.ig--fuss:hover { color: #fff; }
.fuss__h { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: #8a949c; margin: 0 0 .8rem; font-weight: 800; }
.fuss__klein { font-size: .87rem; line-height: 1.7; margin: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss__zeile {
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between; align-items: center;
  border-top: 2px solid #3b444b; margin-top: var(--s6); padding-top: 1.1rem; font-size: .83rem;
}
.fuss__zeile nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* ==========================================================================
   Mobile Dauerleiste — das wichtigste Element der Seite
   ========================================================================== */
.mobil-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0;
  border-top: 2px solid rgba(0,0,0,.2);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px rgba(23,28,32,.2);
}
.mobil-cta__btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 60px; padding: .9rem .6rem;
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.005em; color: #fff; text-decoration: none;
}
.mobil-cta__btn--tel { background: var(--anruf); }
.mobil-cta__btn--wa  { background: var(--wa); }
.mobil-cta__btn:active { filter: brightness(.9); }
.mobil-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
@media (min-width: 1000px) { .mobil-cta { display: none; } }
@media (max-width: 999px) { body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   Kleinkram
   ========================================================================== */
.zentriert { text-align: center; }
.mt-2 { margin-top: var(--s6); }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kein-js .braucht-js { display: none; }

/* ---------- Nur für den internen Schaukasten ------------------------- */
.sg-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-top: 1.4rem; }
.sg-farbe { border: var(--linie-2); background: var(--weiss); }
.sg-farbe span { display: block; height: 56px; background: var(--f); border-bottom: var(--linie-2); }
.sg-farbe code { display: block; padding: .5rem .6rem 0; font-size: .76rem; font-weight: 800; }
.sg-farbe small { display: block; padding: 0 .6rem .55rem; font-size: .73rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.sg-reihe { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; align-items: center; }
.sg-fahne {
  display: inline-block; margin-bottom: 1.4rem; padding: .3rem .6rem;
  background: var(--anthrazit-tief); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}