/* ==========================================================================
   Schlüsseldienst Götz · Karlsruhe — Design-System
   Website by Rex Fortis · rexfortis.de
   Eine CSS-Datei, keine externen Requests. Schrift: Manrope (self-hosted).
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-950: #081c33;
  --navy-900: #0b2440;
  --navy: #0d3664;
  --navy-700: #1b3d74;
  --amber: #f38800;
  --amber-300: #ffb139;
  --amber-050: #fff8eb;
  --green: #12924a;
  --green-dark: #0c7038;
  --ink: #181819;
  --ink-2: #55565e;
  --ink-3: #a2a3a8;
  --line: rgba(144, 148, 166, 0.28);
  --bg: #ffffff;
  --bg-soft: #f5f6f9;
  --radius: 16px;
  --radius-s: 12px;
  --shadow: 0 1px 2px rgba(8, 28, 51, 0.06), 0 10px 30px -12px rgba(8, 28, 51, 0.18);
  --wrap: 1120px;
  --wrap-pad: clamp(16px, 4vw, 28px);   /* Seitenrand des Containers */
  --sticky-h: 64px;
}

/* ---- Reset / Grundlagen ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
a:hover { color: var(--navy-700); }
h1, h2, h3 { line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.85rem, 4.8vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3.1vw, 2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.35em; }
p { margin: 0 0 1em; }
/* Lange Wörter ohne Trennstelle dürfen umbrechen — sonst schieben sie auf 320 px die
   ganze Seite auf. Aufgetreten bei der H1 „Datenschutzerklärung" (bei 29,6 px Schrift
   rund 300 px breit, verfügbar sind 273) und bei der E-Mail-Adresse im Impressum.
   Deutsche Komposita in Überschriften sind hier der Regelfall, nicht die Ausnahme. */
h1, h2, h3, h4, p, li, dd, blockquote, figcaption, summary { overflow-wrap: break-word; }
ul { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: 0.45em; }
strong { font-weight: 800; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); }
.section { padding-block: clamp(2.8rem, 7vw, 4.6rem); }
.section--soft { background: var(--bg-soft); }
.section--navy { background: linear-gradient(160deg, var(--navy-900), var(--navy)); color: #fff; }
.section--navy h2 { color: #fff; }
.section--navy a { color: var(--amber-300); }
.lead { font-size: 1.15rem; }
.muted { color: var(--ink-2); }
.section--navy .muted { color: rgba(255, 255, 255, 0.78); }

/* ---- Topbar (wie Altseite) ---- */
.topbar {
  background: var(--navy-950); color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem; font-weight: 600;
}
.topbar .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding-block: 7px;
}
.topbar .tb-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar .tb-sep { color: rgba(255, 255, 255, 0.35); }
.topbar svg { flex: none; color: var(--amber-300); }
/* Auf schmalen Geräten nur die Adresse zeigen — sonst bricht die Zeile zweizeilig um */
@media (max-width: 700px) {
  .topbar .tb-sep, .topbar .tb-area { display: none; }
}

/* ---- Skip-Link ---- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--navy-950); font-weight: 800;
  padding: 10px 16px; border-radius: 0 0 var(--radius-s) 0;
}
.skip:focus { left: 0; }

/* ---- Header ---- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__in {
  min-height: var(--sticky-h);
  display: flex; align-items: center; gap: 16px;
}
.header__in { min-height: 86px; gap: 22px; }
.header__logo img { height: 70px; width: auto; }
.header__nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.header__nav a {
  text-decoration: none; font-weight: 700; font-size: 0.97rem; color: var(--ink);
  position: relative; padding-block: 6px;
}
.header__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--amber); transition: right 0.18s ease;
}
.header__nav a:hover { color: var(--navy); }
.header__nav a:hover::after { right: 0; }

/* Google-Bewertung im Header */
.header__rating {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; box-shadow: var(--shadow); white-space: nowrap;
  text-decoration: none; transition: border-color 0.15s ease, transform 0.08s ease;
}
a.header__rating:hover { border-color: var(--amber); }
a.header__rating:active { transform: translateY(1px); }
.header__nav ~ .header__rating { margin-left: 0; }
.header__rating .hr-stars { color: var(--amber); letter-spacing: 1px; font-size: 0.92rem; }
.header__rating .hr-text { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.header__rating .hr-text b { color: var(--ink); font-weight: 800; font-size: 0.95rem; }
.header__rating ~ .header__call { margin-left: 20px; }
/* Der 5,0-Chip passt weiter herunter als anfangs angenommen: Der Kopf braucht
   mit Chip 666 px (Burger-Modus) bzw. 935 px (mit Navigationsleiste) — gemessen.
   Erst unter 760 px fangen Logo und Notdienst-Block an sich zu stauchen. */
@media (max-width: 759.98px) { .header__rating { display: none; } }

/* Notdienst-Block im Header (Muster der Altseite, größer gesetzt) */
.header__call { margin-left: auto; text-align: right; line-height: 1.15; }
.header__nav ~ .header__call { margin-left: 0; }
.header__call .hc-label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--amber); font-weight: 800; font-size: 0.83rem; white-space: nowrap;
}
.header__call .hc-num {
  display: block; font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 800;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.header__call .hc-num:hover { color: var(--navy); }
/* ---- Mobiles Menü ----
   Bis 31.08. verschwand die Navigation ab 1040 px ersatzlos — ohne Ersatz.
   Umgesetzt als Checkbox-Schalter, NICHT als <details>: Chrome versteckt den
   Inhalt eines geschlossenen <details> über sein Shadow-DOM, das lässt sich
   per CSS nicht aufheben — auf dem Desktop wäre die Navigation dann weg.
   Mit der Checkbox liegt die Sichtbarkeit vollständig beim Stylesheet.
   Das kleine Skript am Seitenende schließt nur wieder zu. */
.mnav__toggle {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;   /* Klicks macht das <label>, nicht die Box */
}
.mnav__btn { display: none; }

@media (min-width: 1041px) {
  .mnav__toggle { display: none; }
}

@media (max-width: 1040px) {
  /* Reihenfolge ausdrücklich setzen: ohne order rutscht der 5,0-Chip (order 0)
     vor das Logo. Rechte Gruppe = Chip, Notdienst-Block, Burger. */
  .header__logo { order: 1; }
  .header__rating { order: 2; }
  .header__in > .header__call { order: 3; margin-left: auto; }  /* schlägt .header__nav ~ .header__call */
  .mnav__btn {
    display: inline-flex; align-items: center; justify-content: center;
    order: 4; margin-left: 12px; flex: none;
    width: 46px; height: 46px;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--navy); cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .mnav__btn:hover { border-color: var(--amber); }
  .mnav__toggle:focus-visible + .mnav__btn { outline: 3px solid var(--amber); outline-offset: 2px; }
  .mnav__toggle:checked + .mnav__btn {
    background: var(--navy); color: #fff; border-color: var(--navy);
  }
  .mnav__btn .ic-x { display: none; }
  .mnav__toggle:checked + .mnav__btn .ic-x { display: block; }
  .mnav__toggle:checked + .mnav__btn .ic-burger { display: none; }

  .header__nav { display: none; }
  .mnav__toggle:checked ~ .header__nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -20px rgba(8, 28, 51, .45);
    padding: 4px clamp(16px, 4vw, 28px) 12px;
  }
  .mnav__toggle:checked ~ .header__nav a {
    padding: 15px 2px; font-size: 1.05rem; border-bottom: 1px solid var(--line);
  }
  .mnav__toggle:checked ~ .header__nav a:last-child { border-bottom: 0; }
  .mnav__toggle:checked ~ .header__nav a::after { display: none; }
}
/* Sobald der 5,0-Chip sichtbar ist, ist er der erste Teil der rechten Gruppe —
   dann gehört das auto-Margin an ihn, nicht an den Notdienst-Block. */
@media (min-width: 760px) and (max-width: 1040px) {
  .header__in > .header__rating { margin-left: auto; }
  .header__in > .header__call { margin-left: 20px; }
}

@media (max-width: 400px) {
  .mnav__btn { width: 40px; height: 40px; }
  .mnav__btn { margin-left: 8px; border-radius: 10px; }
}

@media (max-width: 600px) {
  .header__in { min-height: 72px; gap: 12px; }
  .header__logo img { height: 54px; }
  .header__call .hc-label { font-size: 0.74rem; }
  .header__call .hc-num { font-size: 1.1rem; }
}
@media (max-width: 380px) {
  .header__logo img { height: 46px; }
  .header__call .hc-label { display: none; }
}

/* ---- Buttons (Hero-CTA-Stil: kompakt, nebeneinander) ---- */
/* Mindesthöhe für den Daumen: Bei 320–360 px schrumpften die Knöpfe auf 38 px,
   der Bewertungsknopf sogar auf 34 — gemessen 03.09.2026. Für eine Notdienstseite,
   die im Ernstfall einhändig bedient wird, zu wenig (Apple nennt 44 pt, Android 48 dp).
   Über `min-height` statt mehr Polsterung, damit das Layout unverändert bleibt. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;
  padding: 0.78em 1.15em; border-radius: var(--radius-s);
  font-weight: 800; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }
.btn--call { background: var(--amber); color: var(--navy-950); }
.btn--call:hover { filter: brightness(1.06); color: var(--navy-950); }
.btn--wa { background: var(--green); color: #fff; }
.btn--wa:hover { background: var(--green-dark); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.section--navy .btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.btn--sm { padding: 0.55em 0.9em; font-size: 0.92rem; min-height: 40px; }
/* Die Rufnummer im Kopf ist das wichtigste Ziel der Seite und war als reine
   Textzeile nur 20 px hoch. Polsterung vergrößert die Trefferfläche auf 40 px,
   der negative Außenabstand hält die Kopfhöhe exakt wie vorher. */
.header__call .hc-num { padding-block: 10px; margin-block: -10px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Anruf + WhatsApp bleiben auch auf schmalen Geräten nebeneinander */
@media (max-width: 460px) {
  .cta-row { flex-wrap: nowrap; gap: 9px; }
  .cta-row .btn { flex: 1 1 auto; min-width: 0; padding-inline: 0.7em; font-size: 0.94rem; }
  .cta-row .btn svg { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .cta-row .btn { font-size: 0.87rem; gap: 6px; }
}

/* ---- Hero ---- */
.hero {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(243, 136, 0, 0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy) 100%);
  color: #fff;
}
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(2.6rem, 6.5vw, 4.8rem);
}
.hero h1 { color: #fff; max-width: 21ch; }
.hero .lead { color: rgba(255, 255, 255, 0.85); max-width: 52ch; }
.hero__eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 18px; font-weight: 700; font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.badge-stars {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 11px; border-radius: 999px;
  color: #fff; font-weight: 800; font-size: 0.9rem;
}
.badge-stars .star { color: var(--amber-300); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 20px; padding: 0; list-style: none; font-size: 0.95rem;
}
.hero__facts li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.hero__facts .tick { color: var(--amber-300); font-weight: 800; }
.hero__media { position: relative; }
.hero__media img {
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  width: 100%; object-fit: cover; aspect-ratio: 4 / 3;
}
.hero__caption {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(8, 28, 51, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff; font-size: 0.85rem; font-weight: 600;
  padding: 7px 12px; border-radius: 10px;
}
@media (max-width: 860px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__media { order: 2; }
}

/* ==========================================================================
   HERO — Foto mit Diagonale (Muster der Altseite, sauber umgesetzt)
   ========================================================================== */
.hero--split {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--navy-900) 0%, var(--navy) 58%, var(--navy-700) 100%);
}
/* Zweispaltiges Raster: Text und Foto teilen sich denselben Container,
   das Foto blutet nach rechts über den Container hinaus aus. */
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: stretch; column-gap: clamp(20px, 3vw, 44px);
}
.hero--split .hero__body {
  padding-block: clamp(2.2rem, 4.4vw, 3.6rem);
  align-self: center; min-width: 0;
}
.hero--split .hero__photo {
  position: relative; margin: 0; min-width: 0;
  /* über den zentrierten Container hinaus bis an den Fensterrand */
  margin-right: min(calc(var(--wrap-pad) * -1), calc((var(--wrap) - 100vw) / 2 - var(--wrap-pad)));
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.hero--split .hero__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 30%;
}
/* Weicher Übergang zur Fläche, damit die Kante nicht hart abreißt */
.hero--split .hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--navy) 0%, rgba(13, 54, 100, 0.55) 18%, rgba(13, 54, 100, 0.08) 46%, transparent 66%);
}
/* Google-Bewertung im Hero */
.hero__rating {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.9); font-size: 0.92rem; font-weight: 600;
}
.hero__rating .hr-stars { color: var(--amber-300); letter-spacing: 1.5px; }
.hero__rating b { color: #fff; font-weight: 800; }
/* Untergrenze 1.8rem, nicht 1.6: Der Mobil-Block (≤760 px) deckelt die H1 bei
   1.8rem. Mit 1.6rem als Untergrenze schrumpfte die Überschrift beim Überschreiten
   der 760-px-Grenze von 28,8 auf 25,6 px — sie wurde also kleiner, während das
   Fenster breiter wurde. Jetzt treffen sich beide Regeln an der Grenze. */
.hero--split h1 {
  text-transform: uppercase; letter-spacing: 0.005em; color: #fff;
  font-size: clamp(1.8rem, 2.9vw, 2.35rem); line-height: 1.14;
}
.hero__bar { width: 88px; height: 4px; background: var(--amber-300); border-radius: 3px; margin: 16px 0 20px; }
.hero__punch { list-style: none; padding: 0; margin: 0 0 24px; }
.hero__punch li {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px;
  color: #fff; font-size: clamp(0.98rem, 1.15vw, 1.06rem); font-weight: 600;
}
.hero__punch .tick { color: var(--amber-300); font-weight: 800; flex: none; line-height: 1.5; }
.hero--split .btn--call { box-shadow: 0 10px 28px -10px rgba(243, 136, 0, 0.8); }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
  .hero--split .hero__photo { clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); }
}
/* Mobil: Foto als Band über den Text, keine Diagonale übers Gesicht */
@media (max-width: 760px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero__photo {
    order: -1;
    /* Höhe wächst mit der Breite, damit der Bildausschnitt in jeder Handygröße
       derselbe bleibt. 200 px feste Höhe schnitten Patrick direkt am Hals ab. */
    height: clamp(220px, 64vw, 480px);
    margin-inline: min(calc(var(--wrap-pad) * -1), calc((var(--wrap) - 100vw) / 2 - var(--wrap-pad)));
    clip-path: none;
  }
  .hero--split .hero__photo img { object-position: 58% 38%; }
  .hero--split .hero__photo::after {
    background: linear-gradient(180deg, rgba(8, 28, 51, 0.12) 0%, rgba(11, 36, 64, 0.5) 100%);
  }
  .hero--split .hero__body { padding-block: clamp(1.7rem, 5.5vw, 2.4rem); }
  .hero--split h1 { font-size: clamp(1.35rem, 5.9vw, 1.8rem); overflow-wrap: break-word; }
  .hero__bar { width: 74px; margin: 14px 0 18px; }
  .hero__punch li { font-size: 1rem; }
}

/* ---- Vertrauensleiste unter dem Hero ---- */
.badge-strip { background: #fff; border-bottom: 1px solid var(--line); }
.badge-strip .wrap {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 26px; padding-block: 22px; align-items: center;
}
.badge-strip .bs-item {
  display: flex; align-items: center; gap: 13px;
  font-weight: 800; font-size: 0.97rem; line-height: 1.28;
}
.badge-strip .bs-ico {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-050); color: var(--amber);
  box-shadow: inset 0 0 0 1.5px rgba(243, 136, 0, 0.28);
}
.badge-strip .bs-google {
  gap: 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 14px; box-shadow: var(--shadow);
}
.badge-strip .bs-google .g-row { display: flex; align-items: baseline; gap: 7px; }
.badge-strip .bs-google .g-val { font-size: 1.15rem; }
.badge-strip .bs-google .g-sub {
  display: block; font-weight: 600; font-size: 0.78rem; color: var(--ink-2); margin-top: 1px;
}
.badge-strip .g-stars { color: var(--amber); letter-spacing: 1.5px; font-size: 0.95rem; }
@media (max-width: 980px) {
  .badge-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .badge-strip .wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 16px; }
  .badge-strip .bs-ico { width: 40px; height: 40px; }
}

/* ---- Intro mit Foto (nach Badge-Leiste) ---- */
.intro { }
.intro__in {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
.intro__eyebrow {
  color: var(--amber); font-weight: 800; letter-spacing: 0.02em;
  margin-bottom: 8px;
}
/* Notfall-Karte neben dem Intro */
.callcard {
  background: linear-gradient(160deg, var(--navy-900), var(--navy));
  color: #fff; border-radius: var(--radius); padding: clamp(20px, 2.6vw, 28px);
  box-shadow: 0 20px 46px -22px rgba(8, 28, 51, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.callcard .cc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--amber-300); font-weight: 800; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.callcard .cc-num {
  display: block; margin-top: 6px; color: #fff; text-decoration: none;
  font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
}
.callcard .cc-num:hover { color: var(--amber-300); }
.callcard .cc-sub { margin: 6px 0 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.96rem; }
.callcard .cc-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.callcard .cc-facts li {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px;
  font-size: 0.96rem; color: rgba(255, 255, 255, 0.92);
}
.callcard .cc-facts .tick { color: var(--amber-300); font-weight: 800; flex: none; }
.callcard .btn { width: 100%; }
@media (max-width: 860px) {
  .intro__in { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Schritt-Karten mit Bild (Abschnitt „Sie rufen an …")
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

.step {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -18px rgba(8, 28, 51, 0.4); }
.step__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft); }
.step__media img { width: 100%; height: 100%; object-fit: cover; }
/* Nummer als Marke auf dem Bild */
.step__no {
  position: absolute; left: 16px; bottom: -20px;
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: var(--navy-950);
  font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 8px 20px -8px rgba(243, 136, 0, 0.9);
  border: 3px solid #fff;
}
.step__body { padding: 32px 20px 22px; }
.step__body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step__body p { color: var(--ink-2); margin-bottom: 0; font-size: 0.99rem; }
@media (prefers-reduced-motion: reduce) { .step:hover { transform: none; } }

/* ---- Karten / Grids ---- */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card h3 { display: flex; align-items: center; gap: 10px; }
.card .ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-050); color: var(--amber);
}
.section--navy .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none; color: #fff;
}

/* ==========================================================================
   Preiskarten
   ========================================================================== */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .prices { grid-template-columns: minmax(0, 1fr); } }
.price {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow);
}
.price--lead { border-color: rgba(243, 136, 0, 0.45); box-shadow: 0 14px 34px -18px rgba(243, 136, 0, 0.55); }
.price__tag {
  position: absolute; top: -11px; left: 22px;
  background: var(--amber); color: var(--navy-950);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.price__label { font-weight: 800; color: var(--ink); font-size: 1.02rem; }
.price__val {
  display: flex; align-items: baseline; gap: 6px; margin: 6px 0 8px;
  font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1;
}
.price__val .pv-ab { font-size: 1rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.price__note { color: var(--ink-2); font-size: 0.95rem; margin: 0; }

/* Leistungsbestandteile als Zeilen mit Häkchen */
.incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.incl li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.incl .ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-050); color: var(--amber); font-weight: 800; font-size: 0.85rem;
  box-shadow: inset 0 0 0 1.5px rgba(243, 136, 0, 0.3);
}
.incl b { display: block; color: var(--ink); }
.incl span.t { color: var(--ink-2); }

/* ==========================================================================
   Leistungs-Kacheln mit Icon
   ========================================================================== */
.svcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svcgrid { grid-template-columns: minmax(0, 1fr); } }
.svcitem {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 18px; transition: border-color 0.15s ease, transform 0.15s ease;
}
.svcitem:hover { border-color: var(--amber); transform: translateY(-2px); }
.svcitem__top { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.svcitem__ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--amber-300);
}
.svcitem h3 { margin: 0; font-size: 1rem; }
.svcitem p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .svcitem:hover { transform: none; } }

/* ==========================================================================
   Zeit-Chips im Navy-Band
   ========================================================================== */
.timechips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.timechips li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 0.95rem;
}
.timechips svg { color: var(--amber-300); flex: none; }

/* ==========================================================================
   Bewertungs-Leiste
   ========================================================================== */
.ratingbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px clamp(20px, 3vw, 28px); box-shadow: var(--shadow);
}
.rb-score { display: flex; align-items: center; gap: 14px; }
.rb-val { font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 800; color: var(--navy); line-height: 1; }
.rb-stars { color: var(--amber); font-size: 1.25rem; letter-spacing: 2px; display: block; }
.rb-meta { color: var(--ink-2); font-size: 0.94rem; font-weight: 600; display: block; margin-top: 3px; }
.rb-goog { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.rb-goog svg { flex: none; }
.rb-cta { margin-left: auto; }
@media (max-width: 720px) {
  .rb-cta { margin-left: 0; width: 100%; }
  .rb-cta .btn { width: 100%; }
}

/* ==========================================================================
   Rezension
   ========================================================================== */
.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow); max-width: 760px;
}
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review__stars { color: var(--amber); letter-spacing: 2px; font-size: 1.1rem; }
.review__src { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.review blockquote {
  margin: 0 0 16px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55;
  font-weight: 600; color: var(--ink);
}
.review figcaption { display: flex; align-items: center; gap: 11px; color: var(--ink-2); font-size: 0.95rem; }
.review .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 0.9rem;
}

/* ==========================================================================
   Schluss-Band
   ========================================================================== */
.endband {
  background: linear-gradient(150deg, var(--navy-950), var(--navy) 70%, var(--navy-700));
  color: #fff;
}
.endband h2 { color: #fff; }
.endband p { color: rgba(255, 255, 255, 0.85); }
.endband .big-num {
  display: inline-block; margin: 6px 0 18px; color: #fff; text-decoration: none;
  font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.02em;
}
.endband .big-num:hover { color: var(--amber-300); }
.endband .nap {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.7);
}
.endband .nap a { color: rgba(255, 255, 255, 0.9); }

/* ---- Preisblock (alt, weiterhin auf Ortsseiten genutzt) ---- */
.price-panel {
  border: 1px solid var(--line); border-left: 5px solid var(--amber);
  background: #fff; border-radius: var(--radius);
  padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow);
}
.price-panel ul { list-style: none; padding: 0; margin: 0; }
.price-panel li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dashed var(--line); margin: 0;
}
.price-panel li:last-child { border-bottom: 0; }
.price-panel .p-label { font-weight: 800; }
.price-panel .p-val { margin-left: auto; font-weight: 800; color: var(--navy); white-space: nowrap; }
@media (max-width: 430px) {
  .price-panel li { flex-wrap: wrap; }
  .price-panel .p-val { white-space: normal; }
}

/* ---- Leistungslisten ---- */
.svc { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.svc li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px; margin: 0;
}
.svc b { color: var(--navy); }

/* ==========================================================================
   Einsatzgebiet als Ortsschilder (Muster openmydoor24)
   ========================================================================== */
/* Zweispaltig: Text links, Schilderwand rechts */
.area-split { display: grid; gap: clamp(26px, 4vw, 54px); align-items: start; }
@media (min-width: 1000px) {
  .area-split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}
.area-split .as-text p:last-child { margin-bottom: 0; }
.as-eyebrow {
  color: var(--amber); font-weight: 800; font-size: 0.84rem;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px;
}

.signs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 9px; list-style: none; padding: 0; margin: 0;
}
.sign {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  min-height: 50px; margin: 0;
  padding: 0.45em 0.55em; text-align: center; line-height: 1.2;
  background: #ffc700; color: #1d1d1f; font-weight: 700; font-size: 0.85rem;
  border: 2px solid #1d1d1f; border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px #ffc700, inset 0 0 0 2.5px rgba(29, 29, 31, 0.5),
              0 2px 8px -3px rgba(0, 0, 0, 0.35);
}
/* Stadtteile mit eigener Seite sind klickbar */
a.sign {
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.sign::after { content: "›"; font-size: 1.2em; font-weight: 800; }
a.sign:hover {
  color: #1d1d1f; transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px #ffc700, inset 0 0 0 2.5px rgba(29, 29, 31, 0.5),
              0 8px 18px -6px rgba(0, 0, 0, 0.5);
}
.signs__note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 0.88rem; color: var(--ink-2);
}
.signs__note .k {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  background: #ffc700; border: 2px solid #1d1d1f; flex: none;
}
@media (max-width: 420px) {
  .signs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sign { min-height: 48px; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) { a.sign:hover { transform: none; } }

/* ---- Stadtteile (alt, weiterhin auf Ortsseiten genutzt) ---- */
.districts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
@media (max-width: 700px) { .districts { grid-template-columns: minmax(0, 1fr); } }
.districts .d-group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px;
}
.districts .d-label { font-weight: 800; color: var(--navy); display: block; margin-bottom: 4px; }
.districts .d-names { color: var(--ink-2); font-size: 0.98rem; }

/* ---- Zitat ---- */
.quote {
  background: var(--amber-050); border: 1px solid rgba(243, 136, 0, 0.25);
  border-radius: var(--radius); padding: clamp(18px, 3vw, 26px);
}
.quote blockquote { margin: 0 0 10px; font-size: 1.12rem; font-weight: 600; }
.quote figcaption { color: var(--ink-2); font-size: 0.95rem; }

/* ---- FAQ ---- */
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 0; margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 15px 18px; font-weight: 800;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-size: 1.3rem; font-weight: 800; color: var(--amber);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-a { padding: 0 18px 16px; color: var(--ink-2); }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ---- Link-Karten (Ortsseiten) ---- */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .areas { grid-template-columns: minmax(0, 1fr); } }
.area-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 17px 20px; box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.area-card b { color: var(--navy); font-size: 1.05rem; }
.area-card span { display: block; color: var(--ink-2); font-size: 0.95rem; margin-top: 2px; }
.area-card .ac-arrow {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-050); color: var(--amber);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.area-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.area-card:hover .ac-arrow { background: var(--amber); color: var(--navy-950); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .area-card:hover, .area-card:hover .ac-arrow { transform: none; } }

/* FAQ etwas ruhiger setzen */
.faq .wrap > .faq-inner { max-width: 860px; }
.faq summary { padding: 17px 20px; }
.faq .faq-a { padding: 0 20px 18px; max-width: 78ch; }

/* ---- Schluss-CTA ---- */
.cta-final { text-align: left; }
.cta-final .cta-row { margin-top: 18px; }

/* ---- Footer ---- */
.footer { background: var(--navy-950); color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.footer a { color: #fff; }
/* Seit 03.09.2026 vier Spalten: Adresse, Leistungen, Einsatzgebiete, Erreichbarkeit.
   Die Leistungsspalte verlinkt die vier /services/-Seiten von jeder Seite aus. */
.footer__in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px; padding-block: 2.6rem 1.6rem;
}
@media (max-width: 1000px) { .footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__in { grid-template-columns: minmax(0, 1fr); } }
.footer__logo img { height: 42px; width: auto; margin-bottom: 12px; }
/* h3 statt h4: h4 direkt nach der letzten h2 des Inhalts ist ein Stufensprung.
   In der Fußzeile sitzen die Überschriften eine Ebene unter dem Seitentitel. */
.footer h3 { color: #fff; margin: 0 0 10px; font-size: 1rem; letter-spacing: 0; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 7px; }
/* Fußzeilenlinks waren 21 px hoch; WCAG 2.2 nennt 24 px als Mindestgröße für
   Ziele, die nicht im Fließtext stehen. Zwei Pixel Polsterung reichen. */
.footer li a, .footer__bottom a { display: inline-block; padding-block: 2px; }
/* Rufnummern nie mitten in der Zahl umbrechen — in der Fußzeile stand
   „0162 / 3253305" auf zwei Zeilen. */
.footer a[href^="tel:"], .nap a[href^="tel:"] { white-space: nowrap; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; align-items: center; font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer__bottom a { color: rgba(255, 255, 255, 0.75); }

/* ---- Sticky-Anrufleiste (nur mobil) ---- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--navy-950);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(8, 28, 51, 0.25);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px; font-weight: 800; font-size: 1rem; text-decoration: none;
}
.callbar .cb-call { background: var(--amber); color: var(--navy-950); }
.callbar .cb-wa { background: var(--green); color: #fff; }
@media (min-width: 861px) { .callbar { display: none; } }
@media (max-width: 860px) { body { padding-bottom: 62px; } }

/* ---- Breadcrumb ---- */
.crumbs { font-size: 0.9rem; color: var(--ink-2); padding-top: 14px; }
.crumbs a { color: var(--ink-2); }
.crumbs .sep { margin-inline: 6px; color: var(--ink-3); }

/* ---- Sonstiges ---- */
.tbl-scroll { overflow-x: auto; }
.anchor-target { scroll-margin-top: calc(var(--sticky-h) + 16px); }
::selection { background: var(--amber-300); color: var(--navy-950); }

/* ==========================================================================
   HERSTELLERLEISTE — Zylinder & Sicherheitstechnik
   Laufband wie auf openmydoor24: zwei identische Listen hintereinander, die
   erste wandert um ihre eigene Breite nach links — dadurch schließt die zweite
   nahtlos an und der Lauf wirkt endlos. Die zweite Liste ist aria-hidden,
   Screenreader lesen die Marken nur einmal.
   Die SVGs enthalten nur Namensraum-Deklarationen, keine externen Ladevorgänge
   — die Cookiefreiheit der Seite bleibt unberührt.
   ========================================================================== */
.marken {
  background: #fff;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: clamp(1.7rem, 3.4vw, 2.4rem);
}
.marken__titel {
  text-align: center; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.78rem; font-weight: 800; color: var(--ink-2);
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.6rem);
}
/* Die Ränder werden ausgeblendet, damit die Logos nicht hart abgeschnitten
   ein- und auslaufen. */
.marken__band {
  --marken-gap: clamp(26px, 2.6vw, 30px);
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marken__liste {
  flex: none; min-width: 100%;
  display: flex; align-items: center;
  gap: var(--marken-gap);
  list-style: none; margin: 0;
  /* Rechts derselbe Abstand wie zwischen den Logos: Die zweite Liste schließt
     sonst ohne Luft an, und an der Nahtstelle kleben zwei Logos aneinander
     (gemessen 61 px statt 80 px). Der Abstand MUSS als padding in der Liste
     liegen, nicht als gap im Band — sonst springt die Schleife um genau
     diesen Wert. */
  padding: 0 var(--marken-gap) 0 0;
  animation: marken-lauf 34s linear infinite;
}
/* Jedes Logo wächst gleichmäßig in den freien Platz und sitzt mittig in seinem
   Feld. Dadurch ist jeder Abstand gleich breit — auch der zur zweiten Liste.
   Feste Slotbreiten wären hier falsch: Die Logos sind unterschiedlich breit
   (Winkhaus 51 px, WILKA 85 px), gleich breite Felder erzeugen dann wieder
   ungleiche Lücken. Bleibt kein Platz übrig, greift schlicht der gap. */
.marken__liste li {
  margin: 0; flex: 1 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.marken__liste img { height: 34px; width: auto; }
.marken__band:hover .marken__liste { animation-play-state: paused; }
@keyframes marken-lauf { to { transform: translateX(-100%); } }
/* Wer Bewegung abbestellt hat, bekommt eine stehende, umbrechende Reihe. */
@media (prefers-reduced-motion: reduce) {
  .marken__band { -webkit-mask-image: none; mask-image: none; }
  .marken__liste { animation: none; flex-wrap: wrap; justify-content: center; }
  .marken__liste + .marken__liste { display: none; }
}
@media (max-width: 560px) {
  .marken__band { --marken-gap: 22px; }
  .marken__liste img { height: 27px; }
}

/* ==========================================================================
   ORTSSEITEN — Bausteine, die es auf der Startseite so nicht gibt
   ========================================================================== */

/* Lesespalte: hält Fließtext auf angenehmer Zeilenlänge statt auf 1120 px */
.prose { max-width: 74ch; }
.prose > :last-child { margin-bottom: 0; }
.section--navy .prose { max-width: 70ch; }

/* Brotkrumen im dunklen Hero */
.crumbs--hero { padding-top: 0; margin-bottom: 12px; color: rgba(255, 255, 255, 0.6); }
.crumbs--hero a { color: rgba(255, 255, 255, 0.78); }
.crumbs--hero a:hover { color: var(--amber-300); }
.crumbs--hero .sep { color: rgba(255, 255, 255, 0.4); }

/* Ablauf-Karten ohne Bild (Bilder gibt es nur auf der Startseite) */
.flow { display: grid; gap: 30px 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.flow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flowstep {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 22px; box-shadow: var(--shadow);
}
.flowstep__no {
  position: absolute; top: -17px; left: 22px;
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: var(--navy-950); font-weight: 800; font-size: 1rem;
  box-shadow: 0 8px 20px -8px rgba(243, 136, 0, 0.9); border: 3px solid #fff;
}
.flowstep h3 { margin-top: 4px; font-size: 1.06rem; }
.flowstep p { color: var(--ink-2); font-size: 0.99rem; }
.flowstep p:last-child { margin-bottom: 0; }
.section--soft .flowstep { border-color: rgba(144, 148, 166, 0.36); }
@media (max-width: 720px) { .flow--2 { grid-template-columns: minmax(0, 1fr); } }

/* Leistungs-Kacheln in zwei Spalten (kleine Gruppen) */
.svcgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .svcgrid--2 { grid-template-columns: minmax(0, 1fr); } }
/* Zwischenüberschrift über einer Kachelgruppe */
.svcgroup { margin: 1.6rem 0 0.9rem; font-size: 1.05rem; }
.svcgroup:first-of-type { margin-top: 0; }

/* Nummerierte Fragenliste (Ettlingen: „Drei Fragen …") */
.numlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: nl; }
.numlist li {
  counter-increment: nl; position: relative; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 16px 18px 16px 64px; box-shadow: var(--shadow);
}
.numlist li::before {
  content: counter(nl); position: absolute; left: 18px; top: 16px;
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--amber-300); font-weight: 800; font-size: 0.95rem;
}
.numlist strong { display: block; margin-bottom: 2px; }

/* Schilderwand mit wenigen Schildern: Text bekommt mehr Spalte,
   die Schilder stehen in festen Reihen statt auf voller Breite zu zerfließen */
@media (min-width: 1000px) {
  .area-split--text { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.signs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.signs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
@media (max-width: 420px) {
  .signs--3, .signs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   EINSATZGEBIET auf der STARTSEITE — Stadtteil-Tafel statt Schilderwand
   27 gelbe Schilder waren eine Wand. Gelb steht jetzt nur noch dort, wo es
   auch klickbar ist (Durlach, Neureut) — damit erklärt sich die Verlinkung
   von selbst und der Hinweissatz konnte entfallen.
   .signs / .sign bleiben unangetastet: die vier Ortsseiten laufen weiter
   darüber, dort sind es nur vier bis sieben Schilder.
   ========================================================================== */
@media (min-width: 1000px) {
  .area-split--districts { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); }
}

.dpanel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(16px, 2.6vw, 24px);
}

/* Die beiden Stadtteile mit eigener Seite — als echtes Ortsschild */
.dpanel__links {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0; padding: 0; max-width: 430px;
}
.dpanel__links li { display: flex; flex: 1 1 120px; min-width: 0; margin: 0; }
.dpanel__links .sign { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; }

/* Die übrigen 25 — ruhiges Namensregister, alphabetisch */
.dpanel__names {
  list-style: none; margin: clamp(15px, 2.2vw, 19px) 0 0; padding: 0;
  border-top: 1px solid var(--line); color: var(--ink); font-weight: 600;
}

/* Handy: Namensband mit Trennpunkt — spart rund 400 px Scrollweg */
@media (max-width: 559.98px) {
  .dpanel__names { padding-top: 13px; font-size: 0.99rem; line-height: 1.9; }
  /* nowrap: sonst bricht „Weiherfeld-Dammerstock" mitten im Namen um */
  .dpanel__names li { display: inline-block; margin: 0; white-space: nowrap; }
  .dpanel__names li:not(:last-child)::after {
    content: "·"; margin: 0 0.1em 0 0.4em; color: var(--ink-3); font-weight: 800;
  }
}

/* Ab Tablet: Register in Spalten mit Haarlinien */
@media (min-width: 560px) {
  .dpanel__names {
    columns: 2; column-gap: clamp(20px, 3vw, 32px);
    font-size: 0.97rem; line-height: 1.45;
  }
  .dpanel__names li {
    margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line);
    break-inside: avoid; -webkit-column-break-inside: avoid;
  }
}
/* Einspaltige Phase, in der die Tafel die volle Breite hat: dritte Spalte */
@media (min-width: 820px) and (max-width: 999.98px) {
  .dpanel__names { columns: 3; }
}

/* Fußzeile der Tafel: Ettlingen und Bruchsal sind keine Stadtteile, sondern
   eigene Städte — sie standen bis 31.08. in einer eigenen Sektion, die dafür
   zu dünn war. Hier tragen sie die beiden Fließtext-Links auf ihre Seiten. */
.dpanel__foot {
  margin: clamp(15px, 2.2vw, 19px) 0 0;
  padding-top: clamp(13px, 2vw, 16px);
  border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 0.93rem; line-height: 1.55;
}
.dpanel__foot a { font-weight: 700; }

/* Rezensionen als Raster (Startseite zeigt eine große, Ortsseiten mehrere) */
.reviewgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reviewgrid .review { max-width: none; padding: 22px; display: flex; flex-direction: column; }
.reviewgrid .review blockquote { font-size: 1rem; line-height: 1.6; flex: 1 0 auto; }
/* Google-Zeichen rechts im Kartenkopf (Muster der übrigen Kundenseiten) */
.review__g { margin-left: auto; flex: none; }
@media (max-width: 980px) {
  .reviewgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .reviewgrid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
}