/* ==========================================================================
   Sofort-Gutachter — Dipl.-Ing. Karl Semrau, Gummersbach
   Stil: "Nachtschicht am Messgerät" — tiefes, kühles Anthrazit wie in den
   Anzeigenmotiven, ein orangeroter Signalton, echte Schadensfotos.
   Tiefe über Helligkeitsstufen + feine Kanten, keine großen Schatten.
   Schriften lokal, keine externen Requests.
   ========================================================================== */

@font-face{
  font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/barlowcond-700.woff2') format('woff2');
}

:root{
  /* Dunkle Ebenen: Seitengrund → erhöht → hervorgehoben */
  --bg-0:#14181f;
  --bg-1:#1b212a;
  --bg-2:#232b36;
  --bg-deep:#0e1218;          /* Fußzeile, dunkelster Punkt */
  --edge:#2a323e;             /* feine Kanten auf Dunkel */
  --edge-strong:#3b4654;

  /* Text auf Dunkel */
  --text:#c9d0d9;             /* Fließtext: gedämpftes Weiß */
  --text-strong:#f4f6f8;      /* Überschriften: fast Weiß */
  --muted:#8e98a6;

  /* Signalton */
  --accent:#1f5fae;           /* Button-Fläche: ruhiges Blau */
  --accent-dark:#174d8f;
  --accent-edge:#103966;
  --accent-bright:#6aa8f0;    /* Zahlen, Links, Icons auf Dunkel */

  --ok:#63b98a;               /* Häkchen auf Dunkel */
  --ok-deep:#2f6f4f;          /* Grün auf Hell */

  /* Helle Kontrapunkt-Fläche (kühl, nie beige) */
  --light:#e9edf2;
  --light-2:#dde3ea;
  --ink:#1d232c;              /* Text auf Hell */
  --ink-2:#39424e;
  --line-light:#c3cad3;       /* Kanten auf Hell */

  --maxw:44rem;
  --maxw-wide:70rem;
  --sticky-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-0);
  color:var(--text);
  line-height:1.6;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Feine technische Textur, rein per Gradient — keine Bilder, kein Glow */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 85% -5%, rgba(106,168,240,.04), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(244,246,248,.012) 3px 4px);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 1.25rem}

h1,h2,.display{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.015em;line-height:1.04;
  color:var(--text-strong);
}
h1{font-size:clamp(2.6rem,11vw,4.5rem)}
h2{font-size:clamp(1.8rem,6vw,2.6rem)}
h3{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;text-transform:uppercase;
   letter-spacing:.03em;font-size:1.3rem;line-height:1.2;color:var(--text-strong)}
p{margin-bottom:.9em}
strong{font-weight:600;color:var(--text-strong)}
a{color:var(--accent-bright)}
a:hover{color:#9cc5f5}
:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px;border-radius:2px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.skip{position:absolute;left:-999px;top:0;background:var(--bg-deep);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{left:0}

.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;flex:none}

/* --------------- Warnband (Signatur-Detail, wie im Anzeigenkopf) --------------- */
.hazard{display:none}

/* --------------- Kopfzeile --------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(20,24,31,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge);
}
.topbar-inner{
  max-width:var(--maxw-wide);margin:0 auto;padding:.7rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--text-strong);line-height:1.1}
.brand-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,4.6vw,1.25rem);letter-spacing:.03em;white-space:nowrap;
}
.brand-name .dot{color:var(--accent-bright)}
.brand-sub{font-size:.8rem;color:var(--muted)}
.topbar-call{
  display:inline-flex;align-items:center;gap:.4rem;
  text-decoration:none;color:var(--text-strong);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:500;font-size:1rem;letter-spacing:0;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.topbar-call:hover{color:var(--accent-bright)}
.topbar-call .ico{color:var(--accent-bright)}

/* --------------- Buttons --------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:600;font-size:1.05rem;text-decoration:none;cursor:pointer;
  padding:.95rem 1.5rem;border-radius:8px;
  border:1px solid transparent;
  transition:transform .07s ease, background .15s ease;
}
.btn-call{
  background:var(--accent);color:#fff;
  border-color:var(--accent-dark);
  box-shadow:0 3px 0 var(--accent-edge);
}
.btn-call:hover{background:#2569ba;color:#fff}
.btn-call:active{transform:translateY(3px);box-shadow:none}
.btn-big{font-size:1.2rem;padding:1.1rem 1.7rem}
.btn-line{
  background:var(--bg-2);color:var(--text-strong);
  border:1px solid var(--edge-strong);box-shadow:0 2px 0 #0b0e13;
}
.btn-line:hover{color:var(--accent-bright);border-color:#4a5666}
.btn-line:active{transform:translateY(2px);box-shadow:none}
.btn-ghost{
  background:rgba(244,246,248,.08);color:#fff;
  border:1.5px solid rgba(244,246,248,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.btn-ghost:hover{background:rgba(244,246,248,.16);color:#fff}

/* --------------- Hero mit Foto --------------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:var(--bg-0);
  display:flex;align-items:flex-end;
  min-height:min(88vh,46rem);
}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:65% 42%;display:block}
.hero-scrim{
  position:absolute;inset:0;
  /* Auf dem Handy liegt der Fließtext mitten auf dem Foto — der helle Himmel
     und das Warndreieck fraßen ihn auf. Mitte dunkler, unten Übergang in den
     Seitengrund, damit Anzeige → Seite eine Fläche bleibt. */
  background:
    linear-gradient(180deg, rgba(20,24,31,.55) 0%, rgba(20,24,31,.38) 26%, rgba(20,24,31,.64) 52%, rgba(20,24,31,.9) 78%, rgba(20,24,31,.98) 100%);
}
.hero-inner{position:relative;z-index:1;width:100%;padding-top:6rem;padding-bottom:2.4rem}
.kicker{
  font-size:1rem;font-weight:600;color:#dce3ea;margin-bottom:.8rem;
  text-shadow:0 1px 6px rgba(11,14,19,.6);
}
.hero h1 .hl{color:var(--accent-bright)}
.hero h1 .thin{color:#aeb6c1}
.mobil-box{
  display:flex;align-items:flex-start;gap:.75rem;max-width:30rem;
  margin:1.2rem 0 0;padding:.85rem 1rem;
  background:rgba(14,18,24,.78);border:1px solid rgba(255,255,255,.18);
  border-radius:6px;align-items:center;
}
.mobil-box .ico{
  flex:none;width:2.6rem;height:2.6rem;padding:.55rem;border-radius:50%;
  color:#fff;background:linear-gradient(180deg,#2f78d0,#174f93);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.mobil-box strong{display:block;color:#fff;font-size:1.12rem;line-height:1.3}
.mobil-box span{display:block;color:#c9d0d9;font-size:.95rem;line-height:1.45}
.hero .lead{
  font-size:1.1rem;color:#d3d9e0;max-width:34rem;margin:1.1rem 0 1.4rem;
  text-shadow:0 1px 8px rgba(11,14,19,.55);
}
.hero-cta{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;max-width:26rem}
.hero-cta .btn{width:100%}
.hero-honest{
  margin-top:1.2rem;
  font-size:.95rem;color:#b9c1cc;max-width:32rem;
  text-shadow:0 1px 6px rgba(11,14,19,.5);
}

/* --------------- Fakten-Band --------------- */
.factbar{
  background:var(--bg-1);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.55rem 2rem;padding:.85rem 1.25rem;
  font-size:.9rem;font-weight:600;color:var(--text);
}
.factbar span{display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.factbar .tick{color:var(--ok)}

/* --------------- Abschnitte --------------- */
.sec{padding:3.5rem 0}
.sec-alt{background:var(--bg-1);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.sec-title{margin-bottom:.4em}
.sec-sub{color:var(--text);max-width:38rem}

/* Dunkle Foto-/Schwerpunkt-Sektionen: eine Stufe erhöht */
.sec-dark{background:var(--bg-1);color:var(--text);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.sec-dark .sec-title{color:var(--text-strong)}
.sec-dark a:not(.btn){color:var(--accent-bright)}

/* --------------- Wer zahlt — der eine helle Kontrapunkt ---------------
   Das Gutachten selbst ist ein Dokument: dieser Block liegt wie ein
   Blatt auf dem dunklen Tisch. Kühles Hellgrau, kein Beige. */
.sec-kosten{
  background:var(--light);color:var(--ink-2);
  border-top:3px solid var(--accent);
}
.sec-kosten .sec-title,.sec-kosten h3,.sec-kosten strong{color:var(--ink)}
.sec-kosten .sec-sub{color:var(--ink-2)}
.sec-kosten a:not(.btn){color:var(--accent-dark)}
.sec-kosten a:not(.btn):hover{color:var(--accent)}
.paygrid{
  display:grid;grid-template-columns:1fr;gap:1rem;margin:1.8rem 0 1.6rem;
}
.paycard{
  background:#fff;border:1px solid var(--line-light);border-radius:8px;
  padding:1.3rem 1.3rem 1.1rem;position:relative;
  box-shadow:0 3px 0 var(--line-light);
}
.paycard h3{margin:.15rem 0 .5rem}
.paycard p{font-size:.97rem;color:var(--ink-2);margin-bottom:.5em}
.paycard p:last-child{margin-bottom:0}
.paycard-tag{font-size:.95rem;font-weight:600;margin:0}
.paycard-ok .paycard-tag{color:var(--ok-deep)}
.paycard-warn .paycard-tag{color:var(--accent-dark)}
.paycard p.paycard-num{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:2.3rem;line-height:1.1;color:var(--accent-dark);
  text-transform:uppercase;letter-spacing:.01em;margin:.2em 0 .35em;
}
.paycard-num span{
  display:block;font-family:'Barlow',sans-serif;font-weight:600;
  font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--ink-2);
}
.kosten-cta{
  background:#fff;border:1px solid var(--line-light);
  border-radius:6px;padding:1.2rem 1.3rem;
  display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;
}
.kosten-cta p{margin:0;font-size:.98rem;color:var(--ink-2);max-width:38rem}

/* --------------- Ablauf --------------- */
.ablauf-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.ablauf-photo{position:relative;max-width:26rem}
.ablauf-photo img{
  width:100%;height:auto;display:block;border-radius:8px;
  border:1px solid var(--edge-strong);
}
.ablauf-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(11,14,19,.78);color:var(--text);
  font-size:.85rem;padding:.55rem .8rem;border-radius:0 0 8px 8px;
}
.steps{list-style:none;margin:1.6rem 0 1.8rem;counter-reset:step}
.steps li{
  position:relative;padding:0 0 1.8rem 3.6rem;counter-increment:step;
}
.steps li:last-child{padding-bottom:.3rem}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:-.25rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.5rem;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;
  background:var(--accent);color:#fff;border-radius:50%;
  box-shadow:0 0 0 3px rgba(31,95,174,.4);
}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:1.2rem;top:2.5rem;bottom:.3rem;
  width:2px;background:var(--edge-strong);
}
.steps h3{margin-bottom:.25rem;color:var(--text-strong)}
.steps p{margin-bottom:0;color:var(--text);font-size:.98rem}

/* --------------- Unabhängigkeit --------------- */
.indep-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.indep-photo{max-width:26rem}
.indep-photo img{
  width:100%;height:auto;display:block;border-radius:8px;
  border:1px solid var(--edge-strong);box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.indep-text p{color:var(--text);max-width:36rem}
.pull{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,4.5vw,1.9rem);line-height:1.15;letter-spacing:.01em;
  color:var(--text-strong);position:relative;
  padding:.3rem 0 .3rem 2.6rem;margin:1.5rem 0;max-width:30rem;
}
.pull::before{
  content:"\201E";position:absolute;left:0;top:-.55em;
  font-family:Georgia,serif;font-size:3.6rem;line-height:1;color:var(--accent-bright);
}

/* --------------- CTA-Band mit Foto --------------- */
.ctaband{
  position:relative;color:#fff;overflow:hidden;background:var(--bg-0);
  padding:4.5rem 0;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
.ctaband-media{position:absolute;inset:0}
.ctaband-media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.ctaband-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(14,18,24,.92) 0%, rgba(14,18,24,.66) 55%, rgba(14,18,24,.3) 100%);
}
.ctaband-inner{position:relative;z-index:1}
.ctaband h2{color:#fff;font-size:clamp(2rem,8vw,3.2rem)}
.ctaband p{color:#d3d9e0;max-width:28rem;margin:.6rem 0 1.3rem;text-shadow:0 1px 6px rgba(11,14,19,.6)}

/* --------------- Über den Gutachter --------------- */
.person{display:grid;grid-template-columns:1fr;gap:1.75rem;margin-top:1.4rem}
.portrait{
  background:var(--bg-2);border:1px solid var(--edge-strong);
  padding:.6rem;max-width:17rem;position:relative;
}
.portrait-frame{
  aspect-ratio:4/5;background:var(--bg-1);
  display:grid;place-items:center;overflow:hidden;
}
.portrait-frame img{width:100%;height:100%;object-fit:cover;display:block}
.portrait-frame svg{width:58%;height:auto;color:var(--edge-strong)}
.portrait-cap{
  text-align:center;font-weight:600;font-size:.95rem;
  padding:.55rem .25rem .15rem;color:var(--text)}
.spec{border-top:2px solid var(--text-strong);margin-top:1.3rem}
.spec-row{
  display:grid;grid-template-columns:9.5rem 1fr;gap:.75rem;
  padding:.55rem 0;border-bottom:1px solid var(--edge-strong);font-size:.97rem;
}
.spec-row dt{font-weight:600;color:var(--muted);font-size:.85rem;
  padding-top:.15rem}
.spec-row dd{color:var(--text-strong)}

/* --------------- FAQ --------------- */
.faq{border-top:2px solid var(--text-strong);margin-top:1.6rem}
.faq details{border-bottom:1px solid var(--edge-strong)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1rem 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-strong);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:1.5rem;line-height:1;color:var(--accent-bright);
  font-family:'Barlow',sans-serif;font-weight:400;flex:none;
  transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 0 1.1rem;color:var(--text);font-size:.98rem;max-width:38rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* --------------- Kontakt --------------- */
.sec-kontakt{
  background:var(--bg-2);
  border-top:3px solid var(--accent);
}
.kontakt-lead{color:var(--text);margin-top:.5rem}
.contact-phone{
  font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,8.5vw,3.2rem);letter-spacing:0;
  color:var(--accent-bright);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
}
.contact-phone:hover{color:#9cc5f5}
.contact-phone .ico{color:var(--accent-bright);width:.8em;height:.8em}
.contact-list{list-style:none;margin-top:1.3rem;border-top:1px solid var(--edge-strong)}
.contact-list li{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.7rem 0;border-bottom:1px solid var(--edge-strong);font-size:.98rem;
  color:var(--text);
}
.contact-list .ico{color:var(--accent-bright);margin-top:.25rem}

/* --------------- Fußzeile --------------- */
.site-footer{
  background:var(--bg-deep);color:#9aa4b1;
  border-top:1px solid var(--edge);
  padding:2.2rem 0 calc(2.2rem + var(--sticky-h));
  font-size:.92rem;
}
.site-footer .brand-name{color:var(--text-strong)}
.site-footer p{margin:.5rem 0 0}
.footer-nav{margin-top:1.1rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-nav a{color:#9aa4b1;text-decoration:underline;text-underline-offset:3px}
.footer-nav a:hover{color:#fff}

/* --------------- Sticky Anruf-Leiste (nur mobil) --------------- */
.sticky-call{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;font-size:1.08rem;line-height:1.25;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--accent-dark);
}
.sticky-call small{display:block;font-weight:400;font-size:.82rem;opacity:.9}
.sticky-call:hover{background:#2569ba;color:#fff}

/* --------------- Consent-Banner --------------- */
.consent{
  position:fixed;left:.75rem;right:.75rem;z-index:70;
  bottom:calc(var(--sticky-h) + .75rem + env(safe-area-inset-bottom));
  background:var(--bg-2);border:1px solid var(--edge-strong);border-radius:8px;
  box-shadow:0 4px 0 #0b0e13;
  padding:1rem 1.1rem;max-width:26rem;
}
.consent[hidden]{display:none}
.consent p{font-size:.9rem;color:var(--text);margin-bottom:.8rem}
.consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.consent-btns .btn{padding:.65rem .5rem;font-size:.95rem}

/* --------------- Rechtsseiten --------------- */
.legal{padding:2.5rem 0 4rem}
.legal h1{font-size:clamp(1.9rem,7vw,2.6rem);margin-bottom:1.2rem}
.legal h2{font-size:1.25rem;margin:1.8rem 0 .4rem}
.legal ul{padding-left:1.3rem;margin-bottom:1rem}
.legal .back{display:inline-block;margin-top:2rem}

/* --------------- Desktop --------------- */
@media(min-width:720px){
  :root{--sticky-h:0px}
  .sticky-call{display:none}

  .hero{min-height:min(80vh,44rem);align-items:center}
  .hero-media img{object-position:70% 45%}
  .hero-scrim{
    background:
      linear-gradient(90deg, rgba(14,18,24,.92) 0%, rgba(14,18,24,.7) 44%, rgba(20,24,31,.2) 75%, rgba(20,24,31,.05) 100%),
      linear-gradient(180deg, rgba(20,24,31,.35) 0%, transparent 30%),
      linear-gradient(0deg, rgba(20,24,31,.55) 0%, transparent 22%);
  }
  .hero-inner{padding-top:4.5rem;padding-bottom:4.5rem;max-width:var(--maxw-wide)}
  .hero h1{max-width:12ch}
  .hero-cta{flex-direction:row;max-width:none}
  .hero-cta .btn{width:auto}

  .sec{padding:4.5rem 0}
  .paygrid{grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
  .kosten-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
  .kosten-cta .btn{flex:none}

  .ablauf-grid{grid-template-columns:minmax(0,26rem) 1fr;gap:3.5rem}
  .indep-grid{grid-template-columns:1fr minmax(0,26rem);gap:3.5rem}
  .indep-photo{order:2}
  .indep-text{order:1}

  .person{grid-template-columns:17rem 1fr;align-items:start}
  .consent{left:auto;right:1.25rem;bottom:1.25rem}
}

/* Rechtlicher Hinweis unter den häufigen Fragen — bewusst leise, aber lesbar */
.faq-note{
  margin-top:1.6rem;font-size:.86rem;line-height:1.55;color:var(--muted);
  max-width:44rem;
}

/* ==========================================================================
   Klarlack — Glanzschicht
   Idee: tiefe Grundfarbe, darüber eine harte, helle Lichtkante oben und ein
   weicher Reflex, wie Licht auf frisch poliertem Lack. Nur Verläufe und
   Schatten, keine Bilder. Ein Lichtstreif läuft selten über die Anruf-Knöpfe.
   ========================================================================== */

/* Knöpfe: Lack-Wölbung + Glanzkante + Reflex in der oberen Hälfte */
.btn-call{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#2f78d0 0%,#1f5fae 48%,#174f93 100%);
  border-color:#123f76;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(6,22,48,.35),
    0 3px 0 var(--accent-edge),
    0 10px 24px -8px rgba(31,95,174,.65);
  text-shadow:0 1px 1px rgba(6,22,48,.45);
}
.btn-call::before{
  content:"";position:absolute;inset:0 0 52% 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.06));
  border-radius:inherit;
}
.btn-call::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:38%;z-index:-1;
  pointer-events:none;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:lack-streif 6.5s ease-in-out 1.2s infinite;
}
.btn-call:hover{background:linear-gradient(180deg,#3a84dc 0%,#2569ba 48%,#1a559c 100%)}
@keyframes lack-streif{
  0%{left:-60%}
  22%{left:130%}
  100%{left:130%}
}

/* Zweiter Hero-Knopf: wie Glas */
.btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -10px rgba(0,0,0,.6);
}
.btn-line{
  background:linear-gradient(180deg,#2c3542,#212833);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #0b0e13;
}

/* Kopfzeile: dunkles Glas mit Lichtkante unten */
.topbar{
  background:linear-gradient(180deg,rgba(30,36,46,.92),rgba(18,22,29,.90));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 6px 18px -12px rgba(0,0,0,.8);
}
.brand-name{
  background:linear-gradient(180deg,#ffffff 0%,#dfe5ec 55%,#aab4c1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-name .dot{-webkit-text-fill-color:var(--accent-bright)}

/* Hero-Überschrift: Chrom statt flachem Weiß, „Unfall?“ in Lackblau */
.hero h1{
  background:linear-gradient(180deg,#ffffff 0%,#eef2f6 46%,#b9c3cf 54%,#e3e8ee 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.hero h1 .hl{
  background:linear-gradient(180deg,#a9d0ff 0%,#6aa8f0 46%,#3f86dc 54%,#7db4f3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 .thin{
  background:linear-gradient(180deg,#d6dde5 0%,#aeb6c1 50%,#8f99a6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Mobil-Kasten: getöntes Glas mit Spiegelkante */
.mobil-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 45%),
    rgba(14,22,34,.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -14px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* Fakten-Band: polierte Leiste */
.factbar{
  background:linear-gradient(180deg,#232a35 0%,#1b212a 55%,#171c24 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* Dunkle Flächen: weicher Lichtreflex von oben, wie eine Lampe im Lack */
.sec-dark,.sec-alt,.sec-kontakt{
  background-image:
    radial-gradient(70rem 22rem at 50% -6rem,rgba(106,168,240,.10),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%);
}
.sec-dark,.sec-alt{background-color:var(--bg-1)}
.sec-kontakt{background-color:var(--bg-2)}

/* Helle Karten: weißer Lack mit Glanzkante und Tiefe */
.sec-kosten{
  background:
    radial-gradient(60rem 18rem at 50% -4rem,rgba(255,255,255,.9),transparent 70%),
    linear-gradient(180deg,#eef2f6 0%,#e4e9ef 100%);
}
.paycard,.kosten-cta{
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 55%,#f4f7fa 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 var(--line-light),
    0 14px 30px -18px rgba(29,35,44,.45);
}
.paycard p.paycard-num{
  background:linear-gradient(180deg,#2f78d0 0%,#174d8f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.paycard-num span{-webkit-text-fill-color:var(--ink-2)}

/* Schritt-Nummern: kleine Lackknöpfe */
.steps li::before{
  background:radial-gradient(circle at 35% 28%,#7db4f3 0%,#2f78d0 38%,#174d8f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 3px rgba(31,95,174,.3),0 6px 14px -6px rgba(31,95,174,.8);
}

/* Fotos: leichte Spiegelkante am Rand */
.ablauf-photo img,.indep-photo img{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 40px -22px rgba(0,0,0,.9);
}
.portrait{
  background:linear-gradient(180deg,#2c3542,#1d232c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 36px -20px rgba(0,0,0,.9);
}

/* Große Nummer im Kontakt: Lackblau mit Glanz */
.contact-phone{
  background:linear-gradient(180deg,#a9d0ff 0%,#6aa8f0 48%,#3f86dc 52%,#7db4f3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-phone .ico{color:var(--accent-bright)}

/* Anruf-Leiste unten: gleicher Lack wie die Knöpfe */
.sticky-call{
  overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#2f78d0 0%,#1f5fae 50%,#184f93 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 -8px 20px -10px rgba(0,0,0,.7);
  text-shadow:0 1px 1px rgba(6,22,48,.45);
}
.sticky-call::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:30%;z-index:-1;
  pointer-events:none;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  animation:lack-streif 7.5s ease-in-out 3s infinite;
}
.sticky-call:hover{background:linear-gradient(180deg,#3a84dc 0%,#2569ba 50%,#1a559c 100%)}

@media (prefers-reduced-motion:reduce){
  .btn-call::after,.sticky-call::after{display:none}
}