/* =========================================================
   Falsch getankt Service Berlin & Brandenburg — Stylesheet

   Gestaltungsrichtung (Stand 2026-09-08, von Hermann freigegeben):
   dieselbe Formensprache wie Hamburg — ruhig, hochwertig, technisch,
   viel Weissraum, grosse Typografie, weiche Schatten. Zwei Dinge
   unterscheiden Berlin bewusst: die Akzentfamilie ist warmes Orange
   statt Gold, und der Text steht mittig statt linksbuendig.

   Schrift: bewusst die Systemschrift. Auf iPhone und Mac ist das
   SF Pro — genau der gewuenschte Look, ohne einen einzigen externen
   Aufruf. Google Fonts sind ausgeschlossen: die CSP erlaubt nur
   'self', und eine externe Schrift wuerde die IP jedes Besuchers
   uebertragen. Barlow bleibt als lokaler Rueckfall fuer Android
   und Windows eingebunden.

   Zwei Regeln aus dem CD gelten unveraendert weiter:
     1. Rot ist ausschliesslich Warnung. „Motor nicht starten",
        Schwere-Kennzeichnung. Sonst nirgends.
     2. Das Logo steht auf Weiss oder sehr hellem Grund,
        nie auf Dunkel, nie auf Fotos.

   Mobil hat Vorrang. Wer diese Seite oeffnet, steht an einer
   Tankstelle und hat gerade falsch getankt: Nummer sofort sichtbar,
   ein Fingertipp zum Anruf, Dauerleiste am unteren Rand.
   ========================================================= */

:root{
  /* Grundflaechen */
  --c-bg:        #F5F5F7;
  --c-bg-alt:    #FFFFFF;
  --c-surface:   #FFFFFF;
  --c-line:      rgba(0,0,0,.09);
  --c-line-2:    rgba(0,0,0,.15);

  /* Schrift — Kontraste auf #FFF und auf #F5F5F7 geprueft */
  --c-ink:       #1D1D1F;
  --c-ink-2:     #6E6E73;   /* 5,3:1 auf Weiss, 5,0:1 auf #F5F5F7 */
  --c-ink-3:     #737378;   /* 4,9:1 auf Weiss, 4,6:1 auf #F5F5F7 */

  /* Primaerfarbe: fast Schwarz — Navigation, Flaechen, Handlung */
  --c-prim:      #1D1D1F;
  --c-prim-hv:   #000000;
  --c-prim-sf:   #F0F0F2;
  --c-prim-li:   #C7C7CC;

  /* Akzent: warmes Premium-Orange */
  --c-akz:       #FFB020;
  --c-akz-warm:  #FF9500;
  --c-akz-gold:  #F2740C;
  --c-akz-tief:  #D45F04;
  --c-akz-sf:    #FFF4E8;
  --c-akz-sf2:   #FFE3C4;
  --c-akz-tx:    #9A4A00;   /* Schrift auf heller Orangeflaeche, 6,3:1 */
  --grad-akz:    linear-gradient(135deg, var(--c-akz) 0%, var(--c-akz-gold) 100%);
  --grad-text:   linear-gradient(102deg, var(--c-akz-warm) 2%, var(--c-akz-gold) 54%, var(--c-akz-tief) 98%);

  /* Warnung: ausschliesslich hierfuer */
  --c-warn:      #D6382F;
  --c-warn-tx:   #C7332B;
  --c-warn-sf:   #FDEEED;

  /* Systemschrift zuerst, Barlow als lokaler Rueckfall */
  --f-disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
            "Barlow", Roboto, Arial, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
            "Barlow", Roboto, Arial, sans-serif;

  --w-max: 1180px;
  --w-narrow: 760px;
  --pad: clamp(1.25rem, 4vw, 2.25rem);
  --sec-y: clamp(4rem, 8vw, 7rem);
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --schatten:   0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --schatten-m: 0 2px 6px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.09);
  --glow:       0 8px 26px rgba(242,116,12,.34);

  /* Berlin setzt den Text mittig */
  --ausricht: center;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font:400 clamp(1.0625rem,1.02rem + .22vw,1.14rem)/1.58 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.1; font-family:var(--f-disp); font-weight:600;
  letter-spacing:-.028em; }
p{ margin:0 0 1em; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

/* Fokusring muss auf hellem UND dunklem Grund sichtbar sein. Ein
   einfarbiger Ring kann das nicht. Deshalb heller Kern plus dunkler
   Saum ueber box-shadow. */
:focus-visible{
  outline:3px solid #FFFFFF;
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--c-prim);
  border-radius:8px;
}
/* Auf hellem Grund die Reihenfolge umkehren, sonst verschwindet der
   weisse Kern im Weiss der Seite. */
.sec:not(.sec--cta) :focus-visible,
.bar :focus-visible,
.hero :focus-visible,
.crumb :focus-visible{
  outline-color:var(--c-prim);
  box-shadow:0 0 0 6px #FFFFFF, 0 0 0 8px var(--c-prim);
}

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--c-prim);
  color:#fff; padding:.75rem 1.25rem; font-weight:600; border-radius:0 0 var(--r) 0; }
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:var(--w-narrow); }
.tc{ text-align:center; }
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--alt{ background:var(--c-bg-alt); border-block:1px solid var(--c-line); }
.sec--cta{ background:var(--c-prim); color:#fff; overflow:hidden; }
.sec--cta .lead{ color:rgba(255,255,255,.66); margin-inline:auto; }

/* Warmer Lichtschein im Abschlussblock */
.sec--cta::before{
  content:""; position:absolute; left:50%; top:-32%; width:min(900px,150%);
  aspect-ratio:1; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(242,116,12,.30) 0%,
             rgba(242,116,12,.08) 40%, transparent 68%);
}
.sec--cta::after{
  content:""; position:absolute; left:50%; bottom:-70%; width:min(1100px,180%);
  aspect-ratio:2/1; transform:translateX(-50%); border-radius:50%; pointer-events:none;
  border-top:1.5px solid rgba(255,176,32,.32);
  box-shadow:0 -20px 64px rgba(242,116,12,.18);
}
.sec--cta > .wrap{ position:relative; z-index:2; }

/* Kicker: kleines Label in Orange */
.kicker{ display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-body); font-weight:600; text-transform:uppercase;
  letter-spacing:.15em; font-size:.72rem; color:var(--c-akz-tx); margin:0 0 .9rem; }
.kicker::before{ content:""; width:16px; height:3px; border-radius:2px;
  background:var(--grad-akz); flex:none; }
.sec--cta .kicker{ color:var(--c-akz-gold); }

.h2{ font-size:clamp(1.9rem,1.25rem + 2.9vw,3.1rem); margin-bottom:.5em; text-wrap:balance; }
.h2--xl{ font-size:clamp(2.15rem,1.3rem + 4vw,3.6rem); }
.h2--m{ font-size:clamp(1.45rem,1.15rem + 1.3vw,2rem); margin-bottom:.6em; }
.lead{ font-size:clamp(1.06rem,1rem + .4vw,1.26rem); color:var(--c-ink-2);
  max-width:60ch; line-height:1.62; }
.tc .lead{ margin-inline:auto; }

/* ---------- Kopfzeile: Glas mit Unschaerfe ---------- */
.bar{ position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s; }
.bar.is-stuck{ border-bottom-color:var(--c-line); background:rgba(255,255,255,.88); }
.bar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px; }
.brand{ display:inline-flex; align-items:center; text-decoration:none; flex:none; min-height:44px; }
.brand__img{ height:36px; width:auto; display:block; }
@media (max-width:520px){ .brand__img{ height:30px; } }
.bar__nav{ display:flex; align-items:center; gap:1.75rem;
  margin-left:auto; margin-right:1.25rem; }
.bar__nav a{ color:var(--c-ink); text-decoration:none; font-family:var(--f-body);
  font-weight:500; font-size:.94rem; letter-spacing:-.01em; opacity:.8;
  transition:opacity .18s; }
/* Gleiche Hoehe wie der Aufklapp-Knopf, sonst sitzt „Fehlbetankungen"
   tiefer als die Woerter daneben. */
@media (min-width:901px){
  /* :not(.nur-mobil), sonst schlaegt diese Regel das display:none der
     nur-mobil-Links und Vorbeugen/Partner tauchen am Desktop auf. */
  .bar__nav > a:not(.nur-mobil){ display:inline-flex; align-items:center; min-height:44px; }
}
.bar__nav a:hover{ opacity:1; }
@media (max-width:900px){ .bar__nav{ display:none; } }
.bar__cta{ padding:.6rem 1.15rem; font-size:.95rem; border-radius:999px; }
@media (max-width:560px){ .bar__cta .btn__lbl{ display:none; } .bar__cta{ padding:.6rem .85rem; } }

/* ---------- Knoepfe ---------- */
.btn{ display:inline-flex; align-items:center; gap:.65rem; padding:.9rem 1.5rem;
  border-radius:999px; font-family:var(--f-body); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; min-height:48px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.985); }
.btn--call{ background:var(--grad-akz); color:var(--c-ink); box-shadow:var(--glow); }
.btn--call:hover{ box-shadow:0 16px 42px rgba(242,116,12,.42); }
.btn--ghost{ background:var(--c-surface); color:var(--c-ink); border-color:var(--c-line);
  box-shadow:var(--schatten); }
.btn--ghost:hover{ box-shadow:var(--schatten-m); }
.btn--xl{ padding:1.05rem 2rem; font-size:1.2rem; border-radius:18px; min-height:60px; }
.btn__ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; }
.btn__ico svg{ width:1.05em; height:1.05em; display:block; }
.btn--xl .btn__ico svg{ width:1.3rem; height:1.3rem; }
.btn__stack{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.btn__kicker{ font-family:var(--f-body); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; opacity:.7; }
.btn__lbl{ font-variant-numeric:tabular-nums; }
.sec--cta .btn--call{ background:var(--grad-akz); color:var(--c-ink); box-shadow:var(--glow); }

/* Auf dem Handy ist der Anrufknopf die wichtigste Flaeche der Seite */
@media (max-width:760px){
  .hero__cta .btn--xl{ width:100%; justify-content:center; }
  .sec--cta .btn--xl{ width:100%; justify-content:center; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--c-bg);
  padding-block:clamp(2rem,5vw,4.25rem) clamp(3rem,7vw,5rem); }
.hero__in{ position:relative; z-index:2; }
.hero__glow{ position:absolute; inset:auto 0 auto 50%; top:-38%;
  width:min(1000px,140vw); aspect-ratio:1.7/1; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(242,116,12,.14), transparent 70%);
  pointer-events:none; z-index:1; }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.9rem;
  font-weight:600; letter-spacing:-.01em; color:var(--c-ink);
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:999px;
  padding:.55rem 1rem .55rem .8rem; margin:0 0 clamp(1.1rem,3vw,1.6rem);
  box-shadow:var(--schatten); }
.pulse{ width:8px; height:8px; border-radius:50%; background:#34C759; flex:none;
  box-shadow:0 0 0 3px rgba(52,199,89,.18);
  animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(52,199,89,.18); }
  50%{ box-shadow:0 0 0 6px rgba(52,199,89,.06); } }
@media (prefers-reduced-motion:reduce){ .pulse{ animation:none; } }
.hero__h{ margin:0 0 clamp(1.1rem,2.5vw,1.5rem); }
.hero__h-sm{ display:block; font-size:clamp(1.25rem,1rem + 1.5vw,1.9rem);
  color:var(--c-ink-2); font-weight:600; margin-bottom:.15em; }
.hero__h-lg{ display:block; font-size:clamp(2.4rem,1.3rem + 5.4vw,4.75rem);
  letter-spacing:-.032em; line-height:1.05; text-wrap:balance; }
.hero__h-lg--m{ font-size:clamp(1.9rem,1.2rem + 3.2vw,3.2rem) !important; }
.hero__h-lg em{ font-style:normal; color:var(--c-warn); }
/* Das letzte Wort der Ueberschrift traegt den Orange-Verlauf */
.hero__h-lg i{ font-style:normal;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; }
.hero__lead{ font-size:clamp(1.06rem,1rem + .45vw,1.24rem); max-width:34em;
  color:var(--c-ink-2); line-height:1.62; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem;
  margin:clamp(1.7rem,3.5vw,2.2rem) 0 clamp(1.1rem,2.5vw,1.4rem); }
.hero__cta--mitte{ justify-content:center; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ font-size:.9rem; font-weight:500; color:var(--c-ink-2); background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:999px; padding:.45rem 1rem; }
.warnzeile{ margin:0; padding:.9rem 1.2rem; background:var(--c-warn-sf);
  border:1px solid rgba(214,56,47,.28); border-left:4px solid var(--c-warn);
  border-radius:var(--r); font-size:.98rem; color:var(--c-ink-2); display:inline-block; }
.warnzeile strong{ color:var(--c-warn-tx); }
.hero--sub{ background:var(--c-bg); }

/* ---------- Vier-Schritte-Ablauf ---------- */
.steps{ display:grid; gap:1.1rem; margin-top:clamp(2rem,5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.step{ position:relative; background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:2.4rem 1.6rem 1.6rem; box-shadow:var(--schatten);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s; }
.step--warn{ border-color:rgba(214,56,47,.3); background:var(--c-warn-sf); }
.step--warn .step__n{ background:var(--c-warn); color:#fff; box-shadow:0 2px 8px rgba(214,56,47,.3); }
.step__n{ position:absolute; top:-20px; left:1.6rem; width:42px; height:42px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--stufe-farbe, var(--c-akz)); color:var(--c-ink);
  font-family:var(--f-body); font-weight:600; font-size:1.1rem;
  box-shadow:0 2px 10px var(--stufe-schatten, rgba(242,116,12,.32)); }
/* Je Schritt ein dunklerer Orangeton — der Ablauf wird sichtbar */
.step:nth-child(1){ --stufe-farbe:#FFC760; --stufe-schatten:rgba(255,176,32,.30); }
.step:nth-child(2){ --stufe-farbe:#FFB020; --stufe-schatten:rgba(255,176,32,.36); }
.step:nth-child(3){ --stufe-farbe:#F2740C; --stufe-schatten:rgba(242,116,12,.36); }
.step:nth-child(4){ --stufe-farbe:#E2740A; --stufe-schatten:rgba(212,95,4,.36); }
.step__h{ font-size:1.3rem; margin:.25rem 0 .5rem; }
.step p{ color:var(--c-ink-2); font-size:1rem; margin:0; line-height:1.55; }
.callout{ margin-top:clamp(2rem,5vw,3rem); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.2rem;
  background:var(--c-akz-sf); border:1px solid rgba(242,116,12,.24);
  border-radius:var(--r-lg); padding:1.6rem 1.7rem; }
.callout p{ margin:0; color:var(--c-ink-2); max-width:52ch; }
.callout strong{ color:var(--c-ink); }

/* ---------- Karten ---------- */
.cards{ display:grid; gap:1.2rem; margin-top:clamp(2rem,5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.cards--3{ grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); }
.card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:1.9rem 1.7rem; box-shadow:var(--schatten);
  transition:border-color .26s, transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s; }
.card:hover{ border-color:rgba(242,116,12,.3); transform:translateY(-5px);
  box-shadow:var(--schatten-m), 0 0 0 1px rgba(242,116,12,.16), 0 22px 50px rgba(242,116,12,.12); }
.card__h{ font-size:1.3rem; margin-bottom:.55rem; }
.card p{ color:var(--c-ink-2); font-size:1rem; margin:0; line-height:1.55; }
.card--link{ display:block; text-decoration:none; color:inherit; }
.card__go{ display:inline-block; margin-top:1rem; color:var(--c-akz-tx);
  font-family:var(--f-body); font-weight:600; font-size:1rem; }

/* ---------- Schadensfall-Kacheln ---------- */
.faelle{ display:grid; gap:1.2rem; margin-top:clamp(2rem,5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); }
.fall{ display:block; text-decoration:none; color:inherit; background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--r-lg); padding:1.9rem 1.7rem;
  box-shadow:var(--schatten);
  transition:border-color .26s, transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s; }
.fall:hover{ border-color:rgba(242,116,12,.3); transform:translateY(-5px);
  box-shadow:var(--schatten-m), 0 0 0 1px rgba(242,116,12,.16), 0 22px 50px rgba(242,116,12,.12); }
.fall__stufe{ display:inline-block; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; padding:.3rem .7rem;
  border-radius:999px; margin-bottom:.9rem; }
.fall__stufe--kritisch{ color:var(--c-warn-tx); background:var(--c-warn-sf); }
.fall__stufe--ernst{ color:var(--c-akz-tx); background:var(--c-akz-sf2); }
.fall__h{ font-family:var(--f-disp); font-weight:600; font-size:1.4rem;
  letter-spacing:-.025em; margin:0 0 .5rem; }
.fall p{ color:var(--c-ink-2); font-size:1rem; margin:0; line-height:1.55; }
.eyebrow--kritisch .pulse{ background:var(--c-warn); box-shadow:0 0 0 3px rgba(214,56,47,.18); }
.eyebrow--ernst .pulse{ background:var(--c-akz-gold); box-shadow:0 0 0 3px rgba(242,116,12,.18); animation:none; }
.eyebrow--beherrschbar .pulse{ background:var(--c-ink-3); box-shadow:none; animation:none; }

/* ---------- Tags & Links ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.8rem; }
.tags li{ font-size:.95rem; color:var(--c-ink-2); background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:999px; padding:.45rem 1rem;
  transition:border-color .18s, color .18s, transform .18s; }
.tags--link li{ padding:0; }
.tags--link li a{ display:block; text-decoration:none; color:inherit; padding:.45rem 1rem; }
.tags--link li:hover{ border-color:rgba(242,116,12,.45); color:var(--c-ink); transform:translateY(-1px); }
.lnk{ color:var(--c-ink); font-family:var(--f-body); font-weight:600;
  font-size:1.05rem; text-decoration:none;
  border-bottom:2px solid var(--c-akz-gold); }
.lnk:hover{ border-bottom-color:var(--c-ink); }
.mt{ margin-top:1.7rem; }

.crumb{ border-bottom:1px solid var(--c-line); padding-block:.85rem;
  font-size:.88rem; color:var(--c-ink-3); background:var(--c-bg); }
.crumb a{ color:var(--c-ink-2); text-decoration:none; }
.crumb a:hover{ color:var(--c-ink); }
.crumb span{ margin-inline:.35rem; }
.crumb [aria-current]{ color:var(--c-ink); }

/* ---------- FAQ ---------- */
.faq{ margin-top:clamp(2rem,5vw,2.6rem); border-top:1px solid var(--c-line); }
.qa{ border-bottom:1px solid var(--c-line); }
.qa summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start;
  justify-content:space-between; gap:1rem; padding:1.25rem 0; font-family:var(--f-disp);
  font-weight:600; letter-spacing:-.02em; min-height:44px;
  font-size:clamp(1.1rem,1rem + .4vw,1.3rem); transition:color .18s; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--c-akz-tx); }
.qa summary::after{ content:""; flex:none; width:9px; height:9px; margin-top:.45rem;
  border-right:2px solid var(--c-akz-gold); border-bottom:2px solid var(--c-akz-gold);
  transform:rotate(45deg); transition:transform .25s; }
.qa[open] summary::after{ transform:rotate(-135deg); margin-top:.7rem; }
.qa p{ color:var(--c-ink-2); margin:0 0 1.3rem; max-width:64ch; font-size:1.01rem; line-height:1.62; }

/* ---------- Kundenstimmen ---------- */
.stimmen{ display:grid; gap:1.2rem; margin-top:clamp(2rem,5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.stimme{ margin:0; background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:1.8rem 1.7rem 1.5rem; box-shadow:var(--schatten); }
.stimme blockquote{ margin:0 0 1.1rem; font-family:var(--f-disp); font-weight:500;
  font-size:clamp(1.12rem,1.02rem + .4vw,1.32rem); line-height:1.5; letter-spacing:-.018em; }
.stimme blockquote::before{ content:"\201E"; color:var(--c-akz-gold); }
.stimme blockquote::after{ content:"\201C"; color:var(--c-akz-gold); }
.stimme figcaption{ display:flex; flex-direction:column; gap:.12rem; }
.stimme figcaption strong{ color:var(--c-ink); font-size:.95rem; font-weight:600; }
.stimme figcaption span{ color:var(--c-ink-3); font-size:.86rem; }

/* ---------- Partner ---------- */
.partner-liste{ display:grid; gap:1.2rem; margin-top:clamp(2rem,5vw,3rem); }
.partner{ background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:2rem 1.8rem; box-shadow:var(--schatten); }
.partner__gebiet{ display:inline-block; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:.72rem; color:var(--c-akz-tx);
  background:var(--c-akz-sf2); border-radius:999px; padding:.3rem .75rem; margin:-.2rem 0 1rem; }
.partner p{ color:var(--c-ink-2); }
.partner__kontakt{ margin:1.3rem 0 .8rem; }

/* ---------- Gebiete-Hub ---------- */
.gwrap{ display:grid; gap:1.2rem; margin-top:clamp(2rem,5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.gblock{ background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:1.7rem 1.6rem; box-shadow:var(--schatten); }
.gblock--wide{ grid-column:1/-1; }
.gblock__h{ font-size:1.2rem; margin:0 0 .9rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--c-line); display:flex; align-items:center;
  justify-content:space-between; gap:.7rem; }
.gblock__n{ font-family:var(--f-body); font-size:.7rem; font-weight:600;
  color:var(--c-akz-tx); background:var(--c-akz-sf2); border-radius:999px;
  padding:.2rem .6rem; letter-spacing:.04em; }
.glist{ display:flex; flex-wrap:wrap; gap:.35rem .6rem; }
.glist li{ font-size:.95rem; }
.glist a{ color:var(--c-ink-2); text-decoration:none; }
.glist a:hover{ color:var(--c-ink); text-decoration:underline; }
.gblock--wide .glist{ gap:.4rem .9rem; }

/* ---------- Kontakt-Meta ---------- */
.meta{ display:grid; gap:1.6rem; margin-top:clamp(2.2rem,5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); text-align:left; }
.meta dt{ font-weight:600; text-transform:uppercase; letter-spacing:.13em;
  font-size:.72rem; color:rgba(255,255,255,.5); margin-bottom:.35rem; }
.meta dd{ margin:0; font-size:1rem; word-break:break-word; }
.meta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Bilder ---------- */
.figur{ margin:clamp(2rem,5vw,3rem) 0 0; }
.figur img{ width:100%; height:auto; display:block; border-radius:var(--r-lg);
  box-shadow:var(--schatten-m); }
.figur--breit{ margin-bottom:0; }

/* ---------- Fusszeile ---------- */
.foot{ background:var(--c-prim); color:rgba(255,255,255,.56);
  padding-block:clamp(2.5rem,6vw,3.5rem) 2rem; border-top:1px solid rgba(255,255,255,.1); }
.fgrid{ display:grid; gap:1.8rem 1.2rem; padding-bottom:2rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-bottom:1px solid rgba(255,255,255,.1); }
.fcol h3{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  color:rgba(255,255,255,.5); margin:0 0 .8rem; font-family:var(--f-body); font-weight:600; }
.fcol ul{ display:flex; flex-direction:column; gap:.35rem; }
.fcol a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:.9rem; }
.fcol a:hover{ color:#fff; text-decoration:underline; }
.foot .fall{ margin:1.6rem 0 0; background:none; border:0; box-shadow:none; padding:0; }
.foot .fall:hover{ transform:none; box-shadow:none; }
.foot .fall a{ color:var(--c-akz); text-decoration:none; font-family:var(--f-body);
  font-weight:600; font-size:1.05rem; }
.foot .fall a:hover{ text-decoration:underline; }
.foot__in{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; margin-top:1.8rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1); }
.foot__c{ margin:0; color:rgba(255,255,255,.56); font-size:.88rem; }
.foot__nav{ display:flex; gap:1.5rem; }
.foot__nav a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:.88rem; }
.foot__nav a:hover{ color:#fff; }

/* ---------- Mobiler Dauer-CTA: Anrufen + WhatsApp ---------- */
.sticky-call{ position:fixed; z-index:70; left:0; right:0; bottom:0;
  display:none; gap:.6rem;
  padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom,0px));
  background:rgba(29,29,31,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(140%); transition:transform .3s ease; visibility:hidden; }
.sticky-call.is-on{ transform:translateY(0); visibility:visible; }
.sticky-call__a{ flex:1 1 0; min-height:56px; display:inline-flex; align-items:center;
  justify-content:center; gap:.5rem; padding:.85rem .6rem;
  border-radius:14px; color:#fff; text-decoration:none;
  font-family:var(--f-body); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; }
.sticky-call__a:active{ transform:scale(.985); }
.sticky-call__tel{ background:var(--grad-akz); color:var(--c-ink);
  box-shadow:0 4px 18px rgba(242,116,12,.3); }
.sticky-call__wa{ background:#128C7E; }   /* WhatsApp-Gruen, dunkle Variante: 4,6:1 auf Weiss */
.sticky-call__a:focus-visible{ outline:3px solid #fff; outline-offset:-5px; }
.sticky-call .btn__ico svg{ width:1.25rem; height:1.25rem; }
@media (max-width:760px){
  .sticky-call{ display:flex; }
  body{ padding-bottom:calc(5.1rem + env(safe-area-inset-bottom,0px)); }
  .callout{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
  .reveal.is-in{ opacity:1; transform:none; }
}

/* ---------- Rechtstexte ---------- */
.legal{ padding-block:clamp(2.5rem,7vw,4.5rem); }
.legal h1{ font-size:clamp(2rem,1.5rem + 2.4vw,3rem); margin-bottom:1.4rem; }
.legal h2{ font-size:1.45rem; margin:2.4rem 0 .6rem; }
.legal p, .legal li{ color:var(--c-ink-2); }
.legal ul{ list-style:disc; padding-left:1.4rem; margin-bottom:1em; }
.legal a{ color:var(--c-ink); }
.legal .todo{ background:var(--c-akz-sf); border:1px solid rgba(242,116,12,.3);
  border-radius:var(--r); padding:1rem 1.2rem; color:var(--c-ink); font-size:.95rem;
  margin-bottom:2rem; }

.sec .wrap--narrow > p{ color:var(--c-ink-2); font-size:1.06rem; line-height:1.72; }

/* =========================================================
   Geteilter Hero, Vertrauenszeile, Sprachumschalter
   ========================================================= */

.hero--split{ padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,5rem); }
.hero__grid{ display:grid; gap:clamp(2rem,4vw,3.75rem); align-items:start;
  grid-template-columns:1fr; position:relative; z-index:2; }
@media (min-width:960px){
  .hero__grid{ grid-template-columns:1.02fr .98fr; }
  /* Oberkante der rechten Spalte auf die Ueberschrift, nicht auf das Label */
  .hero__karte{ margin-top:3.1rem; }
}
.hero__bild{ position:relative; }
.figur--hero{ margin:0; }
.figur--hero img{ border-radius:var(--r-xl); box-shadow:var(--schatten-m); }

/* Haekchen-Liste */
.haken{ display:flex; flex-direction:column; gap:.85rem;
  margin:clamp(1.3rem,3vw,1.8rem) 0 0; }
.haken li{ display:flex; align-items:flex-start; gap:.75rem;
  color:var(--c-ink); font-size:1.02rem; line-height:1.45; }
.haken li::before{
  content:""; flex:none; width:20px; height:20px; margin-top:.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:17px 17px; background-repeat:no-repeat; background-position:center;
}

/* Vertrauenszeile unter dem Hero */
.trust{ background:var(--c-bg-alt); border-block:1px solid var(--c-line); }
.trust__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.6rem 1.2rem; padding-block:2.2rem; background:none; }
.trust__i{ background:none; padding:0;
  display:flex; flex-direction:column; gap:.3rem; }
.trust__i strong{ font-family:var(--f-disp); font-weight:600;
  font-size:1.6rem; color:var(--c-ink); line-height:1.1; letter-spacing:-.03em; }
.trust__i:first-child strong{ color:var(--c-akz-gold); }
.trust__i span{ font-size:.9rem; color:var(--c-ink-2); line-height:1.45; }

/* Schmaler Abschnitt fuer ein einzelnes Bild */
.sec--schmal{ padding-block:0; margin-top:clamp(-1rem,-2vw,-.5rem); }
.sec--schmal .figur{ margin-top:clamp(2rem,5vw,3rem); }

/* Sprachumschalter */
.sprachwahl{ display:flex; gap:.1rem; align-items:center; }
.sprachwahl__a{ display:inline-block; padding:.15rem .5rem; border-radius:7px;
  color:var(--c-ink-2); text-decoration:none; font-size:.78rem; font-weight:600;
  letter-spacing:.05em; transition:background .18s, color .18s; }
.sprachwahl__a:hover{ background:var(--c-prim-sf); color:var(--c-ink); }
.sprachwahl__a[aria-current]{ background:var(--c-prim-sf); color:var(--c-ink); }

/* Feinzeile: Preis- und Zeitangabe. Bewusst zurueckhaltend — beim Notruf
   zaehlt die Nummer, nicht der Preis. */
.feinzeile{
  margin:clamp(1.6rem,3.5vw,2.2rem) 0 0; padding:1.15rem 1.35rem;
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); color:var(--c-ink-2); font-size:.95rem;
  line-height:1.6; max-width:70ch; box-shadow:var(--schatten);
}
.feinzeile strong{ color:var(--c-ink); }

/* Sterne und Gesamtnote */
.sterne{ display:inline-flex; gap:.12rem; color:var(--c-akz-gold); margin-bottom:.7rem; }
.sterne svg{ width:17px; height:17px; display:block; }
.note{ margin:-.4rem 0 0; color:var(--c-ink-2); font-size:1rem; }
.note strong{ color:var(--c-ink); font-size:1.2rem; font-family:var(--f-disp); }

/* Bewertung in der Vertrauenszeile */
.trust__i--note{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.1rem .5rem; }
.trust__i--note strong{ font-size:2rem; }
.trust__i--note .sterne{ margin-bottom:0; align-self:center; }
.trust__i--note span{ flex-basis:100%; }

/* Zulassungshinweis in der Fusszeile der Sprachfassungen */
.foot__krwg{ display:inline-block; margin-top:.3rem; font-size:.82rem; color:rgba(255,255,255,.56); }

/* Nachsatz unter der Warnzeile auf den Fallseiten */
.hero__nach{ margin:1rem 0 0; color:var(--c-ink-2); font-size:1rem; max-width:56ch; }

/* Pflichtangabe zur Herkunft der Bewertungen (§ 5b Abs. 3 UWG) */
.stimmen__herkunft{
  margin:clamp(1.4rem,3vw,2rem) 0 0; max-width:74ch;
  font-size:.86rem; line-height:1.65; color:var(--c-ink-3);
}

/* Symbolbild-Kennzeichnung: sichtbar, aber zurueckhaltend */
.figur figcaption{
  margin-top:.6rem; font-size:.8rem; color:var(--c-ink-3); letter-spacing:.01em;
}
.figur--hero figcaption{ text-align:right; }

/* =========================================================
   Textbloecke in Rahmen
   ========================================================= */

/* Vorteilskarte im Hero */
.hero__karte{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:1.9rem 1.8rem 1.6rem;
  box-shadow:var(--schatten);
}
.hero__karte-h{
  margin:0 0 1.1rem;
  font-family:var(--f-body); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--c-ink-2);
}
.hero__karte .haken{ margin:0; }
.hero__karte-f{
  margin:1.4rem 0 0; padding-top:1.1rem; border-top:1px solid var(--c-line);
  font-size:.9rem; color:var(--c-ink-3);
}

/* Der Standardrahmen fuer Prosa */
.panel{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,1.9rem);
  box-shadow:var(--schatten);
}
.panel > :last-child{ margin-bottom:0; }
.sec--alt .panel{ background:var(--c-bg); border-color:var(--c-line); }

/* Betonter Rahmen: traegt links eine orangene Kante. */
.panel--wichtig{
  border-left:4px solid var(--c-akz-gold);
  background:linear-gradient(90deg, var(--c-akz-sf), var(--c-surface) 34%);
}
.sec--alt .panel--wichtig{
  background:linear-gradient(90deg, var(--c-akz-sf), var(--c-bg) 34%);
}

/* Gerahmter Abschnittsvorspann */
.lead--panel{
  max-width:none; padding:clamp(1.3rem,2.6vw,1.7rem) clamp(1.4rem,3vw,1.8rem);
  background:var(--c-surface); border:1px solid var(--c-line);
  border-left:4px solid var(--c-akz); border-radius:var(--r-lg);
  margin-bottom:0; box-shadow:var(--schatten);
}
.sec--alt .lead--panel{ background:var(--c-bg); }

/* Hervorhebung im Fliesstext — ruhige Unterlegung, kein Textmarker. */
.panel strong, .lead--panel strong, .sec .wrap--narrow > p strong{
  color:var(--c-ink);
  box-shadow:inset 0 -.42em 0 var(--c-akz-sf2);
}

/* Abschnittskopf klarer absetzen */
.sec > .wrap > .kicker,
.sec > .wrap--narrow > .kicker{ margin-bottom:.75rem; }
.h2 + .lead--panel{ margin-top:1.4rem; }

/* =========================================================
   Mobiles Menue
   ========================================================= */
.bar__menu{
  display:none; appearance:none; background:none; border:0;
  border-radius:11px; width:44px; height:44px; padding:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  margin-left:auto; margin-right:.5rem; flex:none;
  -webkit-tap-highlight-color:transparent;
}
.bar__menu span{ display:block; width:19px; height:1.8px; background:var(--c-ink);
  border-radius:2px; transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .2s; }
.bar__menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.bar__menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.bar__menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }
.nur-mobil{ display:none; }

@media (max-width:900px){
  .bar__menu{ display:flex; }
  .bar__nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; margin:0; padding:.5rem .75rem 1rem;
    /* Deckend, nicht als Glas: ueber dem Hero war der Text sonst
       durch das Menue hindurch zu sehen. */
    background:var(--c-surface);
    border-bottom:1px solid var(--c-line);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.28);
  }
  .bar.menu-offen .bar__nav{ display:flex; }
  .bar__nav a{
    display:block; padding:.95rem .8rem; font-size:1.05rem; border:0;
    border-radius:12px; opacity:1;
  }
  .bar__nav a:hover{ background:var(--c-bg); }
  .nur-mobil{ display:block; }
  .bar__nav-sprachen{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.7rem .8rem 0; }
  .bar__nav-sprachen a{ display:inline-block; padding:.5rem 1rem; border:1px solid var(--c-line);
    border-radius:999px; font-size:.92rem; }
  .bar{ position:sticky; }
  .bar__in{ position:relative; }
}
@media (prefers-reduced-motion:reduce){ .bar__menu span{ transition:none; } }

/* Sued-Block auf der Gebiete-Seite */
.gblock--sued{ border-color:rgba(242,116,12,.3); background:var(--c-akz-sf); }
.gblock--sued .gblock__h{ border-bottom-color:rgba(242,116,12,.25); }

/* =========================================================
   Handy: Tippflaechen und Schriftgroessen
   Das Handy ist das Hauptgeraet — die 44px-Regel gilt hier ohne
   Ausnahme fuer alles, was man antippt.
   ========================================================= */
@media (max-width:760px){
  .sprachwahl{ gap:.15rem; }
  .sprachwahl__a{ min-width:44px; min-height:44px; display:inline-flex;
    align-items:center; justify-content:center; font-size:.86rem; }

  .brand{ min-height:44px; }

  .crumb{ font-size:.92rem; }
  .crumb a, .crumb [aria-current]{ display:inline-block; padding:.65rem .35rem;
    min-width:44px; min-height:44px; text-align:center; }

  .eyebrow{ font-size:.9rem; }
  .chip{ font-size:.92rem; padding:.55rem 1rem; }

  /* Ortslisten: aus schmalen Zeilen werden antippbare Chips */
  .glist{ gap:.5rem; }
  .glist li{ font-size:.95rem; }
  .glist a{ display:inline-flex; align-items:center; min-height:44px;
    padding:.6rem 1rem; background:var(--c-surface);
    border:1px solid var(--c-line); border-radius:999px; }
  .glist a:hover{ text-decoration:none; border-color:rgba(242,116,12,.45); }
  .gblock--sued .glist a{ background:#fff; }

  .tags--link li a{ min-height:44px; display:inline-flex; align-items:center; padding:.65rem 1rem; }
  .tags li{ font-size:.97rem; }

  /* Fusszeile: jede Zeile eine volle Tippflaeche */
  .fcol a{ display:flex; align-items:center; min-height:44px; padding:.35rem 0; font-size:.95rem; }
  .fcol ul{ gap:0; }
  .foot__nav{ flex-wrap:wrap; gap:.25rem 1.25rem; }
  .foot__nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:.95rem; }
  .foot__c{ font-size:.92rem; }
  .foot .fall a{ display:inline-flex; align-items:center; min-height:44px; }

  /* Vertrauenszeile: 2x2 statt vier gestapelter Kacheln */
  .trust__in{ grid-template-columns:1fr 1fr; padding-block:1.8rem; }
  .trust__i strong{ font-size:1.4rem; }
  .trust__i--note strong{ font-size:1.7rem; }
  .trust__i span{ font-size:.85rem; }

  /* Telefon, E-Mail und Behoerdenlink im Impressum stehen je auf einer
     eigenen Zeile — als Tippflaeche duerfen sie 44px hoch sein. */
  .legal a{ display:inline-flex; align-items:center; min-height:44px; }
  /* Quellenangabe unter den Bewertungen: der Link aufs Google-Profil
     steht am Zeilenende und war nur 39px hoch. */
  .stimmen__herkunft a{ display:inline-flex; align-items:center; min-height:44px; }
  .lnk{ display:inline-flex; align-items:center; min-height:44px; }
  .meta a{ display:inline-flex; align-items:center; min-height:44px; }
  .partner__kontakt .btn{ width:100%; justify-content:center; }
}

/* Kopfzeile auf dem Handy einzeilig halten */
@media (max-width:760px){ .nur-desktop{ display:none; } }

/* Hero-Hierarchie: die Frage traegt, die Anweisung steht darunter */
.hero__h-sm--unten{
  display:block; font-size:clamp(1.35rem,1.05rem + 1.7vw,2.1rem); font-weight:600;
  color:var(--c-ink-2); margin:.42em 0 0; letter-spacing:-.025em;
}
.hero__h-sm--unten em{ font-style:normal; color:var(--c-warn); }

/* „24 h erreichbar" steht direkt unter dem Anruf-Knopf */
.eyebrow--unten{ margin:0 0 1rem; }

/* Sprachwahl in der weissen Kopfleiste */
.sprachwahl--bar{ gap:.15rem; flex:none; }
.sprachwahl--bar .sprachwahl__a{ color:var(--c-ink-2); font-weight:600; font-size:.82rem;
  letter-spacing:.03em; padding:.4rem .6rem; border-radius:8px; }
.sprachwahl--bar .sprachwahl__a:hover{ background:var(--c-prim-sf); color:var(--c-ink); }
.sprachwahl--bar .sprachwahl__a[aria-current]{ background:var(--c-prim-sf); color:var(--c-ink); }
.sprachwahl--bar .sprachwahl__a:focus-visible{ outline:2px solid var(--c-ink); outline-offset:2px; }
@media (max-width:760px){
  .sprachwahl--bar .sprachwahl__a{ min-width:44px; min-height:44px; padding:.3rem .4rem; }
  .bar__in .brand{ flex:0 1 auto; min-width:0; }
  .brand__img{ max-width:100%; height:auto; min-width:96px; }
}

/* „Was tue ich jetzt?" steht unter der Erreichbarkeits-Zeile */
.hero__zweit{ margin-top:0; }

/* Sprungziele landen nicht unter der klebenden Kopfleiste */
[id]{ scroll-margin-top:5rem; }

/* Menue scrollbar im Querformat, Anrufknopf bei sehr schmalen Geraeten */
@media (max-width:900px){
  .bar.menu-offen .bar__nav{ max-height:calc(100dvh - 70px); overflow-y:auto;
    -webkit-overflow-scrolling:touch; }
  .bar__nav-sprachen a{ min-height:44px; display:inline-flex; align-items:center; }
}
@media (max-width:360px){
  .btn--xl{ font-size:1.1rem; padding:.95rem 1.3rem; }
  .sprachwahl--bar .sprachwahl__a{ min-width:38px; padding:.3rem .25rem; }
  .bar__cta{ padding:.55rem .7rem; }
}

/* Kundenstimmen: nur die ersten drei offen, der Rest hinter einer Schaltflaeche */
.stimmen__mehr{ margin-top:1.2rem; }
.stimmen__mehr > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center;
  gap:.5rem; padding:.75rem 1.4rem; border:1px solid var(--c-line); border-radius:999px;
  background:var(--c-surface); font-family:var(--f-body); font-weight:600; font-size:1rem;
  color:var(--c-ink); min-height:48px; box-shadow:var(--schatten);
  transition:box-shadow .2s, transform .2s; }
.stimmen__mehr > summary::-webkit-details-marker{ display:none; }
.stimmen__mehr > summary::after{ content:"▾"; font-size:.9em; color:var(--c-akz-gold); }
.stimmen__mehr[open] > summary::after{ content:"▴"; }
.stimmen__mehr > summary:hover{ box-shadow:var(--schatten-m); transform:translateY(-1px); }
.stimmen__mehr > summary:focus-visible{ outline:2px solid var(--c-ink); outline-offset:2px; }
.stimmen__mehr[open] > summary{ margin-bottom:1.2rem; }

/* Haeufig gesucht: kurze Liste der gaengigen Suchformulierungen */
.suchwege{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.suchwege li{ margin:0; }
.suchwege a, .suchwege span{ display:inline-flex; align-items:center; min-height:44px;
  padding:.5rem 1.05rem; border-radius:999px;
  border:1px solid var(--c-line); background:var(--c-surface); font-size:.95rem;
  color:var(--c-ink-2); text-decoration:none; }
.suchwege a{ color:var(--c-ink); transition:border-color .18s, transform .18s; }
.suchwege a:hover{ border-color:rgba(242,116,12,.45); transform:translateY(-1px); }
.suchwege__hinweis{ font-size:.92rem; color:var(--c-ink-3); }

/* Hinweis zur Echtheitspruefung direkt unter der Sternenote (§ 5b UWG) */
.trust__hinweis{ margin:.6rem 0 0; font-size:.84rem; color:var(--c-ink-2); max-width:70ch; }

/* =========================================================
   Berliner Fassung: Text mittig

   Hermanns Vorgabe seit dem ersten Aufbau: in Berlin steht der Text
   mittig, in Hamburg linksbuendig. Die Formensprache bleibt sonst
   identisch — der Unterschied liegt in der Achse und im Farbton.

   Nicht zentriert bleiben bewusst: die Fragen im FAQ (eine mittige
   Frage mit Pfeil am Rand liest sich schlecht), Listen im Impressum
   und die Ortslisten, die als Chips ohnehin flaechig wirken.
   ========================================================= */

.hero--split .hero__in{ text-align:center; max-width:900px; margin-inline:auto; width:100%; }
.hero--sub .hero__in{ text-align:center; }
.hero__lead, .hero__nach{ margin-inline:auto; }
.hero__cta{ justify-content:center; }
.hero__h-lg, .hero__h-sm, .hero__h-sm--unten{ text-align:center; }

.h2, .h2--xl, .h2--m{ text-align:center; }
.lead, .lead--panel{ text-align:center; margin-inline:auto; }
.sec > .wrap > .kicker,
.sec > .wrap--narrow > .kicker{ display:flex; justify-content:center; }
.kicker::before{ display:none; }   /* mittig wirkt der Strich davor unruhig */

.panel{ text-align:center; }
.panel--wichtig{ border-left:0; border-top:4px solid var(--c-akz-gold);
  background:linear-gradient(180deg, var(--c-akz-sf), var(--c-surface) 40%); }
.sec--alt .panel--wichtig{ background:linear-gradient(180deg, var(--c-akz-sf), var(--c-bg) 40%); }
.lead--panel{ border-left:0; border-top:4px solid var(--c-akz); }

.step{ text-align:center; padding-top:2.9rem; }
.step__n{ left:50%; transform:translateX(-50%); }
.card, .fall, .partner{ text-align:center; }
.fall__stufe, .partner__gebiet{ margin-inline:auto; }

/* Die Liste als Block mittig, die Zeilen darin aber linksbuendig auf
   gleicher Kante — sonst wandert das Haekchen mit der Textlaenge und
   die Spalte sieht schief aus. */
.haken{ align-items:center; }
.haken li{ justify-content:flex-start; text-align:left; width:100%; max-width:34ch; }
.hero__karte-h{ text-align:center; }
.hero__karte-f{ text-align:center; }

.trust__i{ text-align:center; align-items:center; }
/* Note-Kachel: Zahl und Sterne stehen in einer Zeile, deshalb reicht
   text-align nicht — die Flex-Zeile selbst muss mittig laufen. */
.trust__i--note{ justify-content:center; }
.trust__i--note .sterne{ justify-content:center; }
/* Kleine Vorzeilen, Bildunterschriften, Hinweiskasten, Weiter-Links */
.kicker{ display:flex; justify-content:center; }
.figur figcaption, .figur--hero figcaption{ text-align:center; }
.callout{ justify-content:center; align-items:center; text-align:center; }
.callout p{ margin-inline:auto; }
.mt{ text-align:center; }
.stimmen__mehr{ text-align:center; }
.trust__hinweis{ margin-inline:auto; text-align:center; }
.note{ text-align:center; }
.feinzeile{ text-align:center; margin-inline:auto; }
.stimme{ text-align:center; }
.stimme figcaption{ align-items:center; }
.stimmen__herkunft{ margin-inline:auto; text-align:center; }
.suchwege, .tags, .chips{ justify-content:center; }
.glist{ justify-content:center; }
.gblock__h{ justify-content:center; }

.foot .wrap{ text-align:center; }
.fcol{ text-align:center; }
.fcol ul{ align-items:center; }
.foot__in{ justify-content:center; }
.foot__nav{ justify-content:center; }
.meta{ text-align:center; }

/* Auf grossen Schirmen steht die Vorteilskarte neben dem Text; dort
   braucht sie keinen zusaetzlichen Vorabstand, weil der Hero mittig
   ueber die volle Breite laeuft. */
@media (min-width:960px){
  .hero--split .hero__grid{ grid-template-columns:1fr; }
  .hero__karte{ margin-top:clamp(2rem,4vw,3rem); max-width:640px;
    margin-inline:auto; width:100%; }
}

/* Vertrauenszeile direkt unter der Ueberschrift: „Ueber 10 Jahre Erfahrung" */
.hero__erfahrung{
  display:inline-block; margin:.2rem auto 1.1rem; padding-top:.7rem;
  border-top:3px solid var(--c-akz); font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.1rem, 1rem + .8vw, 1.4rem); color:var(--c-ink);
  max-width:36ch; line-height:1.35; letter-spacing:-.02em;
}

/* =========================================================
   Einwilligung fuer die Besucherstatistik
   Kleines Fenster unten links, kein Overlay — die Seite bleibt
   bedienbar, auch wenn niemand darauf reagiert.
   ========================================================= */
.consent{ position:fixed; z-index:80; left:.75rem; right:.75rem; bottom:.75rem; text-align:left; }
.consent__in{ max-width:420px; background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:1.2rem 1.3rem 1.1rem; box-shadow:var(--schatten-m); }
.consent__h{ margin:0 0 .4rem; font-family:var(--f-disp); font-weight:600;
  font-size:1.15rem; letter-spacing:-.02em; }
.consent__p{ margin:0 0 1rem; font-size:.92rem; color:var(--c-ink-2); line-height:1.55; }
.consent__btns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.consent__btns .btn{ padding:.65rem 1.2rem; font-size:.98rem; min-height:44px; }
.consent__f{ margin:.8rem 0 0; font-size:.82rem; }
.consent__f a{ color:var(--c-ink-2); }
@media (max-width:760px){
  .consent{ bottom:5.6rem; }
  /* Die Zeile ist ein Link, also auch eine Tippflaeche */
  .consent__f a{ display:inline-flex; align-items:center; min-height:44px; }
}

.foot__consent{ appearance:none; background:none; border:0; padding:0; font:inherit;
  color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){
  .foot__consent{ display:inline-flex; align-items:center; min-height:44px; }
}

/* =========================================================
   Navigationsgruppe „Fehlbetankungen"

   Vorher stand auf dem Desktop nur „AdBlue im Diesel" in der Leiste,
   die beiden anderen Faelle waren dort ausgeblendet. Jetzt fasst ein
   Aufklapper alle drei zusammen — auf dem Desktop als Menue, auf dem
   Handy dauerhaft offen, weil dort jeder zusaetzliche Tipp zaehlt.
   ========================================================= */
.bar__grp{ position:relative; }
.bar__grp-k{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
  font-family:var(--f-body); font-weight:500; font-size:.94rem;
  letter-spacing:-.01em; color:var(--c-ink); opacity:.8;
  transition:opacity .18s;
}
.bar__grp-k:hover{ opacity:1; }
.bar__grp-pf{
  width:7px; height:7px; margin-top:-3px; flex:none;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg); transition:transform .22s;
}
.bar__grp-k[aria-expanded="true"] .bar__grp-pf{ transform:rotate(-135deg); margin-top:1px; }
.bar__grp-m{ display:none; }
.bar__grp-k[aria-expanded="true"] + .bar__grp-m{ display:flex; }

@media (min-width:901px){
  .bar__grp-m{
    position:absolute; top:calc(100% + .55rem); left:50%; transform:translateX(-50%);
    flex-direction:column; gap:.15rem; min-width:250px; padding:.5rem;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border:1px solid var(--c-line); border-radius:var(--r-lg);
    box-shadow:var(--schatten-m);
  }
  .bar__grp-m a{
    display:block; padding:.65rem .85rem; border-radius:11px;
    font-size:.95rem; font-weight:500; color:var(--c-ink); opacity:1;
    white-space:nowrap; transition:background .18s;
  }
  .bar__grp-m a:hover{ background:var(--c-bg); }
  /* Das Oeffnen per Maus steuert main.js mit einer Frist beim Verlassen.
     Hier bleibt nur der Tastaturfall, der keine Frist braucht. */
  .bar__grp:focus-within .bar__grp-m{ display:flex; }
  /* Unsichtbare Bruecke ueber den Spalt zwischen Knopf und Menue. Ohne sie
     verlaesst der Zeiger auf dem Weg nach unten die Flaeche und das Menue
     klappt zu, bevor man etwas auswaehlen kann. */
  .bar__grp:hover::after,
  .bar__grp:focus-within::after{
    content:""; position:absolute; top:100%; left:-.75rem; right:-.75rem; height:.9rem;
  }
}

@media (max-width:900px){
  /* Im aufgeklappten Menue steht die Gruppe als Ueberschrift mit drei
     eingerueckten Zeilen darunter — dauerhaft sichtbar. */
  .bar__grp-m{ flex-direction:column; gap:0; }
  .bar__grp-k{
    width:100%; justify-content:space-between; padding:.95rem .8rem;
    font-size:.8rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.13em; color:var(--c-ink-2); opacity:1;
  }
  .bar__grp-m a{
    display:block; padding:.95rem .8rem .95rem 1.6rem; font-size:1.05rem;
    border-radius:12px; min-height:44px;
  }
  .bar__grp-m a:hover{ background:var(--c-bg); }
}

/* Nur fuer Vorleseprogramme und Crawler, nicht sichtbar. */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Faktenliste „Über den Betrieb" */
.fakten{ display:grid; gap:.55rem; margin-top:1.4rem; }
.fakten > div{ display:grid; grid-template-columns:9.5rem 1fr; gap:.4rem 1rem;
  padding:.85rem 1.1rem; background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r); }
.fakten dt{ font-weight:600; color:var(--c-ink); }
.fakten dd{ margin:0; color:var(--c-ink-2); }
@media (max-width:560px){ .fakten > div{ grid-template-columns:1fr; gap:.15rem; } }
.fakten > div{ grid-template-columns:1fr; text-align:center; gap:.15rem; }