/* ==========================================================================
   Schlüsseldienst Erfurt
   Farben aus dem Firmenlogo: Schwarzblau, Elektroblau, Silber.
   Die Neutraltöne sind bewusst kühl gehalten, damit sie zum Blau passen.
   ========================================================================== */

:root{
  --schwarz:    #04080e;
  --schwarz-2:  #101e2b;
  --blau:       #1b9df0;
  --blau-hell:  #63c6ff;
  --blau-dk:    #0b72bd;
  --blau-dk2:   #095b97;
  --silber:     #cdd8e3;
  --weiss:      #ffffff;
  --grau-10:    #eef2f7;
  --grau-20:    #dbe3ec;
  --grau-40:    #94a3b3;
  --grau-60:    #55636f;

  --f-eng: "Fira Sans Condensed", "Fira Sans Condensed Ersatz", "Fira Sans", Arial, sans-serif;
  --f-txt: "Fira Sans", "Fira Sans Ersatz", Arial, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 4vw, 2.75rem);
}

*,*::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(--weiss);
  color:var(--schwarz);
  font-family:var(--f-txt);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--f-eng); font-weight:700; line-height:1.08;
  letter-spacing:-.005em; margin:0; text-wrap:balance;
}
p{ margin:0 0 1.15rem; max-width:62ch; }
p:last-child{ margin-bottom:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
b,strong{ font-weight:600; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-nur{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blau); color:var(--schwarz); padding:.75rem 1.25rem; font-weight:600;
}
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; }

/* ——— Anrufknopf ————————————————————————————————————————— */
.tel-knopf{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--blau-dk); color:var(--weiss);
  border:2px solid var(--blau-dk);
  padding:.6rem 1rem; text-decoration:none;
  font-weight:600; font-size:1.02rem;
  font-variant-numeric:tabular-nums; word-spacing:.14em;
  transition:background-color .12s linear;
}
.tel-knopf:hover{ background:var(--blau-dk2); border-color:var(--blau-dk2); }
.tel-knopf__ico{ width:1.15em; height:1.15em; flex:none; }
.tel-knopf__zahl{
  font-family:var(--f-eng); font-weight:700; font-size:1.28em;
  letter-spacing:.01em; white-space:nowrap;
}

.tel-knopf--gross{
  padding:.9rem 1.5rem; border-width:3px;
}
.tel-knopf--gross .tel-knopf__ico{ width:1.9rem; height:1.9rem; }
.tel-knopf__block{ display:flex; flex-direction:column; line-height:1.12; text-align:left; }
.tel-knopf__block em{
  font-style:normal; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
}
.tel-knopf__block strong{
  font-family:var(--f-eng); font-weight:700; font-size:1.75rem; letter-spacing:0;
}

.anruf-zeile{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  margin-top:2rem; max-width:none;
}
.anruf-zeile > span{ font-size:.97rem; color:var(--grau-60); }
.block--schwarz .anruf-zeile > span{ color:var(--grau-40); }

/* ——— Servicezeile ————————————————————————————————————— */
.servicezeile{
  background:var(--schwarz); color:var(--weiss);
  font-size:.86rem; padding-block:.45rem;
}
.servicezeile__in{ display:flex; justify-content:space-between; gap:1rem; }
.servicezeile p{ margin:0; max-width:none; }
.servicezeile__ort{ color:var(--grau-40); }
@media (max-width: 640px){ .servicezeile__ort{ display:none; } }
@media (max-width: 560px){ .servicezeile__x{ display:none; } }

/* ——— Kopf ——————————————————————————————————————————————— */
.kopf{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:90;
  background:var(--schwarz); color:var(--weiss);
  border-bottom:3px solid var(--blau);
}
.kopf__in{ display:flex; align-items:center; gap:1.5rem; min-height:82px; }

.logo{ display:block; margin-right:auto; line-height:0; }
.logo img{ display:block; width:auto; height:58px; }
@media (max-width: 760px){ .logo img{ height:42px; } }

/* Das Logo liegt als JPG auf Schwarz. Mit "screen" verschwindet dieses
   Schwarz im dunklen Untergrund, sodass keine Kante sichtbar bleibt. */
.logo img, .fuss__logo{ mix-blend-mode:screen; }

.navi{ display:flex; gap:1.6rem; }
.navi a{
  text-decoration:none; font-size:1rem; font-weight:600; color:var(--silber);
  padding-block:.3rem; border-bottom:3px solid transparent;
}
.navi a:hover{ color:var(--weiss); }
.navi a:hover{ border-bottom-color:var(--blau); }

@media (max-width: 1180px){ .navi{ display:none; } }
@media (max-width: 760px){
  .kopf__tel{ display:none; }
  .kopf__in{ min-height:62px; }
  .wortmarke__text strong{ font-size:1.12rem; }
}

/* ——— Aufmacher ————————————————————————————————————————— */
.auf{
  background:
    radial-gradient(75% 55% at 12% -8%, #0b2f4d 0%, transparent 62%),
    radial-gradient(60% 45% at 96% 2%, #07203a 0%, transparent 58%),
    var(--schwarz);
  color:var(--weiss);
}
.auf h1{ color:var(--weiss); }
.auf__fliess{ color:var(--silber); }
.auf .haken li{ color:var(--silber); }
.auf .haken b{ color:var(--weiss); }

.auf__in{ padding-block:clamp(2.25rem, 5vw, 3.75rem); }
/* Lesebreite für Text und Knöpfe; die Faktenzeile spannt über die ganze Breite. */
.auf__text > *{ max-width:46rem; }
.auf__text > .fakten{ max-width:none; }
.auf h1{
  font-size:clamp(2.4rem, 6.2vw, 5.2rem);
  letter-spacing:-.022em; line-height:1.0;
  margin-bottom:1.5rem;
}
.auf__fliess{ font-size:1.12rem; margin-bottom:2rem; }

.haken li{
  position:relative; padding-left:2.05rem;
  margin-bottom:.7rem; line-height:1.5;
}
.haken svg{ position:absolute; left:0; top:.22em; width:22px; height:22px; }
.haken--auf{ margin-top:2.1rem; }
.haken--auf li{ font-weight:400; }
#inhaber .haken li{ margin-bottom:1.1rem; }

@media (max-width: 560px){
  .tel-knopf--gross{ width:100%; justify-content:center; }
}

/* ——— Blöcke ————————————————————————————————————————————— */
.block{ padding-block:clamp(2.75rem, 6vw, 4.75rem); }
.block--grau{ background:var(--grau-10); border-block:2px solid var(--grau-20); }
.block--schwarz{ background:var(--schwarz); color:var(--weiss); }
.block--schwarz .leise{ color:var(--grau-40); }

.block h2{
  font-size:clamp(1.75rem, 3.2vw, 2.5rem);
  margin-bottom:1.35rem; max-width:20ch;
  padding-bottom:.85rem; display:inline-block;
  background-image:
    linear-gradient(var(--blau), var(--blau)),
    linear-gradient(var(--grau-20), var(--grau-20));
  background-repeat:no-repeat;
  background-size:52px 6px, 100% 2px;
  background-position:left bottom, left bottom;
}
.block--schwarz h2, .kontakt h2{
  background-image:
    linear-gradient(var(--blau), var(--blau)),
    linear-gradient(#22394d, #22394d);
}
.block__schmal{ max-width:var(--wrap); }
.block__schmal > *{ max-width:52rem; }
.block__zwei{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:clamp(1.75rem, 4vw, 3.5rem); align-items:start;
}
.block__zwei--links{ grid-template-columns:.8fr 1.2fr; }
@media (max-width: 860px){
  .block__zwei,.block__zwei--links{ grid-template-columns:1fr; }
  .block__zwei--links figure{ order:2; }
}

/* ——— Preistabelle ————————————————————————————————————— */
.preistabelle{
  width:100%; border-collapse:collapse; margin:1.75rem 0 1.5rem;
  border-top:3px solid var(--schwarz); border-bottom:3px solid var(--schwarz);
}
.preistabelle thead th{
  font-family:var(--f-eng); font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.12em;
  text-align:left; padding:.6rem 0; border-bottom:2px solid var(--schwarz);
}
.preistabelle thead th:last-child{ text-align:right; }
.preistabelle tbody th{
  text-align:left; font-weight:600; font-size:1.2rem;
  padding:1.7rem 2rem 1.7rem 0; vertical-align:top;
}
.preistabelle tbody th span{
  display:block; font-weight:400; font-size:.95rem;
  color:var(--grau-60); margin-top:.25rem; max-width:52ch;
}
.preistabelle tbody td{
  text-align:right; vertical-align:top; padding:1.5rem 0; white-space:nowrap;
}
.preistabelle tbody td b{
  font-family:var(--f-eng); font-weight:700; font-size:3.1rem; line-height:.92;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.preistabelle tbody tr + tr th,
.preistabelle tbody tr + tr td{ border-top:1px solid var(--grau-20); }
.preis-blau{ color:var(--blau-dk); font-size:4.6rem !important; }

.hinweis{
  background:var(--grau-10); border-left:6px solid var(--blau);
  padding:1rem 1.25rem; font-size:.99rem; max-width:none;
}

@media (max-width: 560px){
  .preistabelle tbody th{ padding:1.2rem .9rem 1.2rem 0; font-size:1.06rem; }
  .preistabelle tbody td{ padding:1.1rem 0; }
  .preistabelle tbody td b{ font-size:2.2rem; }
  .preis-blau{ font-size:3rem !important; }
}

/* ——— Zahlung ————————————————————————————————————————————— */
.zahlliste{ margin-top:1.75rem; border-top:1px solid var(--schwarz-2); }
.zahlliste li{
  padding:.85rem 0; border-bottom:1px solid var(--schwarz-2); font-size:1.02rem;
}
.zahlliste b{
  font-family:var(--f-eng); font-size:1.15rem; font-weight:700;
  margin-right:.6rem; color:var(--blau-hell);
}

/* ——— Einsatzgebiet ————————————————————————————————————— */
.stadtteile{
  font-size:1.02rem; line-height:1.9; color:var(--grau-60);
  border-left:6px solid var(--blau); padding-left:1.25rem; max-width:none;
}

/* ——— Fragen ————————————————————————————————————————————— */
.faq{ margin-top:1.75rem; border-top:2px solid var(--schwarz); }
.faq details{ border-bottom:1px solid var(--grau-20); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.05rem 2.75rem 1.05rem 0;
  font-family:var(--f-eng); font-weight:600; font-size:1.2rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.55rem; top:1.5rem;
  width:14px; height:3px; background:var(--schwarz);
}
.faq summary::before{
  content:""; position:absolute; right:1.05rem; top:1.05rem;
  width:3px; height:14px; background:var(--schwarz);
  transition:opacity .12s linear;
}
.faq details[open] summary::before{ opacity:0; }
.faq summary:hover{ color:var(--blau-dk); }
.faq details > div{ padding:0 2.75rem 1.3rem 0; }

/* ——— Kontakt ————————————————————————————————————————————— */
.kontakt{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.75rem, 4vw, 4rem); align-items:start;
}
.kontakt p{ color:var(--grau-40); margin-bottom:2rem; }
.kontaktdaten{ border-top:1px solid var(--schwarz-2); }
.kontaktdaten > div{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--schwarz-2);
}
.kontaktdaten dt{
  font-family:var(--f-eng); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--blau-hell); padding-top:.22rem;
}
.kontaktdaten dd{ margin:0; }
.kontaktdaten dd a{
  font-family:var(--f-eng); font-size:1.3rem; font-weight:700;
  text-decoration:none; border-bottom:3px solid var(--blau);
  font-variant-numeric:tabular-nums; word-spacing:.14em;
}
@media (max-width: 860px){
  .kontakt{ grid-template-columns:1fr; }
  .kontaktdaten > div{ grid-template-columns:8rem 1fr; }
}

/* ——— Fuß —————————————————————————————————————————————————— */
.fuss{
  background:var(--schwarz); color:var(--grau-40);
  border-top:4px solid var(--blau); padding-block:1.5rem; font-size:.88rem;
}
.fuss__in{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.fuss p{ margin:0; max-width:none; }
.fuss nav{ display:flex; gap:1.5rem; }
.fuss a{ text-decoration:none; border-bottom:1px solid var(--grau-60); }
.fuss a:hover{ color:var(--weiss); }

/* ——— Anrufleiste (mobil) ——————————————————————————————— */
.anrufleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--schwarz); border-top:3px solid var(--blau);
  padding:.55rem var(--pad);
  padding-bottom:calc(.55rem + env(safe-area-inset-bottom, 0px));
}
.anrufleiste__in{
  display:flex; align-items:center; gap:1rem;
  max-width:var(--wrap); margin-inline:auto;
}
.anrufleiste p{ margin:0; display:flex; flex-direction:column; line-height:1.25; }
.anrufleiste p{ color:var(--weiss); }
.anrufleiste p b{ font-family:var(--f-eng); font-weight:700; font-size:1.1rem; }
.anrufleiste p span{ font-size:.79rem; color:var(--blau-hell); }
.anrufleiste .tel-knopf{ margin-left:auto; padding:.75rem 1.35rem; font-size:1.05rem; }

@media (min-width: 761px){ .anrufleiste{ display:none; } }
@media (max-width: 760px){ body{ padding-bottom:74px; } }
@media (max-width: 360px){ .anrufleiste p span{ display:none; } }

/* Ankersprünge nicht unter den Kopf ziehen */
section[id]{ scroll-margin-top:84px; }

/* ——— Druck ————————————————————————————————————————————— */
@media print{
  .kopf,.anrufleiste,.servicezeile{ display:none !important; }
  body{ padding:0; }
  .block--schwarz{ background:#fff !important; color:#000 !important; }
}

/* ——— Rechtsseiten ————————————————————————————————————— */
.recht{ padding-block:clamp(2.25rem,5vw,4rem); }
.recht .wrap{ max-width:calc(720px + 2 * var(--pad)); }
.recht h1{
  font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:1.75rem;
  padding-bottom:.7rem; border-bottom:4px solid var(--blau); display:inline-block;
}
.recht h2{ font-size:1.3rem; margin:2.25rem 0 .6rem; }
.recht address{ font-style:normal; margin-bottom:1.15rem; }
.recht a{ text-decoration-color:var(--blau); text-decoration-thickness:2px; text-underline-offset:3px; }
.recht .offen{
  background:var(--grau-10); border-left:6px solid #c2410c;
  padding:1rem 1.25rem; font-size:.97rem; max-width:none; margin-bottom:1.75rem;
}
.recht .zurueck{
  display:inline-block; margin-top:2.5rem; font-weight:600;
  text-decoration:none; border-bottom:3px solid var(--blau); padding-bottom:2px;
}

/* ——— Telefonnummer im Fließtext ————————————————————————— */
.tel-text{
  font-weight:600; text-decoration:none;
  border-bottom:3px solid var(--blau); padding-bottom:1px; white-space:nowrap;
}
.tel-text:hover{ background:var(--blau); color:var(--weiss); }

/* ——— Platzhalter-Hinweis ————————————————————————————————— */
.platzhinweis{
  position:relative; background:var(--weiss);
  border:2px dashed var(--grau-40); border-left:6px solid #c2410c;
  padding:1rem 1.25rem; font-size:.95rem; max-width:none; margin-bottom:2rem;
}
.platzhinweis b{
  display:block; font-family:var(--f-eng); font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:#c2410c; margin-bottom:.3rem;
}

/* ——— Bewertungen ————————————————————————————————————————— */
.sterne{ display:flex; gap:.18rem; margin:0; }
.sterne svg{ width:22px; height:22px; fill:#f0a500; }
.sterne .stern--teil{ fill:url(#g-stern-43); }
.sterne--klein svg{ width:16px; height:16px; }

.note{
  display:flex; align-items:center; gap:1.1rem;
  border-top:3px solid var(--schwarz); border-bottom:3px solid var(--schwarz);
  padding:1.1rem 0; margin-bottom:1.75rem;
}
.note__zahl{
  font-family:var(--f-eng); font-weight:700; font-size:3.2rem; line-height:1;
  margin:0; font-variant-numeric:tabular-nums;
}
.note__text{ margin:.25rem 0 0; font-size:.95rem; color:var(--grau-60); }

.bewertungen{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.bewertungen li{
  position:relative; background:var(--weiss);
  border:2px solid var(--schwarz); padding:1.15rem 1.25rem 1.1rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.bewertung__marke{
  position:absolute; top:0; right:0; margin:0;
  background:var(--grau-20); color:var(--grau-60);
  font-family:var(--f-eng); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; padding:.15rem .5rem;
}
.bewertungen blockquote{
  margin:0; font-size:.97rem; line-height:1.55; flex:1;
}
.bewertungen blockquote::before{ content:"„"; }
.bewertungen blockquote::after{ content:"“"; }
.bewertung__wer{
  margin:0; font-size:.86rem; color:var(--grau-60);
  border-top:1px solid var(--grau-20); padding-top:.65rem;
}
.bewertungen__quelle{
  margin:1.5rem 0 0; font-size:.94rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
}
.bewertungen__link{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--blau);
  text-decoration:none;
}
.bewertungen__link:hover{ text-decoration:underline; }
.bewertungen__pfeil{ display:inline-block; transition:transform .15s ease; }
.bewertungen__link:hover .bewertungen__pfeil{ transform:translateX(3px); }
.bewertungen__abgeben{
  display:inline-block; font-size:.88rem; color:var(--grau-60); text-decoration:underline;
}
.bewertungen__abgeben:hover{ color:var(--blau); }
@media (max-width: 860px){
  .bewertungen{ grid-template-columns:1fr; }
  .note__zahl{ font-size:2.6rem; }
}

/* ——— Karte ————————————————————————————————————————————— */
.karte{
  margin-top:1.75rem; position:relative;
  aspect-ratio:16/8; background:var(--weiss);
  border:2px solid var(--schwarz); overflow:hidden;
}
.karte__vor{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.9rem; text-align:center;
  padding:1.5rem;
  background:
    repeating-linear-gradient(45deg, var(--grau-10) 0 14px, var(--weiss) 14px 28px);
}
.karte__adresse{
  margin:0; font-family:var(--f-eng); font-weight:700;
  font-size:1.5rem; line-height:1.2;
}
.karte__text{ margin:0; font-size:.88rem; color:var(--grau-60); max-width:44ch; }
.karte__knoepfe{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin:0; }
.karte__laden,.karte__route{
  font-family:var(--f-txt); font-size:.98rem; font-weight:600;
  padding:.6rem 1.1rem; border:2px solid var(--schwarz);
  text-decoration:none; cursor:pointer;
}
.karte__laden{ background:var(--blau-dk); color:var(--weiss); border-color:var(--blau-dk); }
.karte__laden:hover{ background:var(--blau-dk2); border-color:var(--blau-dk2); }
.karte__route{ background:var(--weiss); color:var(--schwarz); }
.karte__route:hover{ background:var(--grau-10); }
.karte iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width: 640px){
  .karte{ aspect-ratio:4/3; }
  .karte__adresse{ font-size:1.25rem; }
}

/* ——— WhatsApp ————————————————————————————————————————— */
.wa-zeile{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  margin:1.1rem 0 0; max-width:none; font-size:.95rem; color:var(--grau-40);
}
.wa-knopf{
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; color:var(--weiss);
  border:2px solid rgba(255,255,255,.3);
  padding:.55rem 1rem; text-decoration:none; font-weight:600; font-size:.98rem;
  transition:border-color .12s linear, background-color .12s linear;
}
.wa-knopf:hover{ border-color:#25d366; background:rgba(37,211,102,.12); }
.wa-knopf__ico{ width:1.35em; height:1.35em; flex:none; fill:#25d366; }

/* ——— Logo im Fuß ————————————————————————————————————— */
.fuss__logo{
  display:block; width:100%; max-width:300px; height:auto;
  margin-bottom:.35rem;
}
.fuss__in{ align-items:flex-end; }
@media (max-width: 640px){ .fuss__logo{ max-width:240px; } }

/* Kontaktliste: WhatsApp-Verweis wie die Telefonnummer behandeln */
.kontaktdaten dd a[href^="https://wa.me"]{
  font-family:var(--f-txt); font-size:1.02rem; font-weight:600;
  border-bottom-color:#25d366;
}

/* ——— Soforthilfe ————————————————————————————————————————— */
.rat{ counter-reset:rat; margin:2rem 0 0; }
.rat li{
  counter-increment:rat; position:relative;
  padding:0 0 1.5rem 3.4rem; border-bottom:1px solid var(--grau-20);
  margin-bottom:1.5rem;
}
.rat li:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.rat li::before{
  content:counter(rat); position:absolute; left:0; top:-.15rem;
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  background:var(--blau-dk); color:var(--weiss);
  font-family:var(--f-eng); font-weight:700; font-size:1.15rem;
  font-variant-numeric:tabular-nums;
}
.rat h3{ font-size:1.22rem; margin-bottom:.4rem; }
.rat p{ color:var(--grau-60); margin:0; }

.notfall{
  margin-top:2.25rem;
  background:#fff4ed; border:2px solid #c2410c; border-left-width:8px;
  padding:1.15rem 1.35rem;
}
.notfall__titel{
  font-family:var(--f-eng); font-weight:700; font-size:1.2rem;
  color:#9a3412; margin-bottom:.4rem;
}
.notfall p{ max-width:60ch; }
.notfall p:last-child{ font-size:.99rem; }

@media (max-width: 560px){
  .rat li{ padding-left:2.9rem; }
  .rat li::before{ width:2.1rem; height:2.1rem; font-size:1rem; }
}

/* ——— Sprungleiste für schmale Bildschirme ——————————————————
   Unter 1080 px verschwindet die Hauptnavigation. Diese Leiste tritt an
   ihre Stelle: waagerecht scrollbar, der gerade sichtbare Abschnitt ist
   markiert und wird automatisch in den sichtbaren Bereich geholt. */
.sprungleiste{
  display:none;
  position:sticky; top:calc(env(safe-area-inset-top, 0px) + 65px); z-index:89;
  background:var(--schwarz-2); border-bottom:1px solid #1d3448;
}
.sprungleiste ul{
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-inline:var(--pad);
}
.sprungleiste ul::-webkit-scrollbar{ display:none; }
.sprungleiste li{ flex:none; scroll-snap-align:center; }
.sprungleiste a{
  display:block; padding:.7rem .85rem .6rem; white-space:nowrap;
  text-decoration:none; font-size:.92rem; font-weight:600; color:var(--grau-40);
  border-bottom:3px solid transparent;
}
.sprungleiste a[aria-current="true"]{ color:var(--weiss); border-bottom-color:var(--blau); }

@media (max-width: 1180px){
  .sprungleiste{ display:block; }
  section[id]{ scroll-margin-top:118px; }
}
@media (max-width: 760px){
  .sprungleiste{ top:calc(env(safe-area-inset-top, 0px) + 60px); }
  section[id]{ scroll-margin-top:104px; }
}

/* ——— Einwilligungsbanner ——————————————————————————————————
   Erscheint nur, wenn in messung.js eine Mess-ID hinterlegt ist. */
.einwilligung{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--schwarz); color:var(--weiss);
  border-top:3px solid var(--blau);
  padding:1.1rem var(--pad);
  padding-bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px));
  transform:translateY(110%);
  transition:transform .3s cubic-bezier(.22,.7,.3,1);
}
.einwilligung.ist-da{ transform:translateY(0); }
.einwilligung__in{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.einwilligung__titel{
  font-family:var(--f-eng); font-weight:700; font-size:1.15rem; margin-bottom:.25rem;
}
.einwilligung__text{ font-size:.92rem; color:var(--silber); max-width:62ch; margin:0; }
.einwilligung__text a{ color:var(--blau-hell); }
.einwilligung__knoepfe{ display:flex; gap:.6rem; margin-left:auto; flex-wrap:wrap; }
.einwilligung__ja,.einwilligung__nein{
  font-family:var(--f-txt); font-size:.98rem; font-weight:600;
  padding:.65rem 1.2rem; border:2px solid transparent; cursor:pointer;
}
.einwilligung__ja{ background:var(--blau-dk); color:var(--weiss); }
.einwilligung__ja:hover{ background:var(--blau-dk2); }
.einwilligung__nein{ background:transparent; color:var(--weiss); border-color:#33485c; }
.einwilligung__nein:hover{ border-color:var(--silber); }

/* Anrufleiste weicht dem Banner, damit sich nichts überlagert. */
.einwilligung ~ .anrufleiste{ display:none; }

@media (max-width: 760px){
  .einwilligung__knoepfe{ margin-left:0; width:100%; }
  .einwilligung__ja,.einwilligung__nein{ flex:1; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .einwilligung{ transition:none; }
}

/* ——— 404 ————————————————————————————————————————————————— */
.ist-404{ background:var(--schwarz); }
.vier{
  min-height:100svh; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 20% 0%, #0d3a5e 0%, transparent 55%),
    var(--schwarz);
  color:var(--weiss); padding-block:3rem;
}
.vier__in{ max-width:44rem; text-align:center; }
.vier__logo{ display:inline-block; margin:0 0 2.5rem; }
.vier__logo img{ height:auto; width:260px; mix-blend-mode:screen; }
.vier__nummer{
  font-family:var(--f-eng); font-weight:700; font-size:clamp(4rem,14vw,7rem);
  line-height:.9; color:var(--blau); margin:0 0 .6rem;
}
.vier h1{ font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:1rem; }
.vier__text{ color:var(--silber); margin:0 auto 2rem; }
.vier__zurueck{ margin-top:2rem; }
.vier__zurueck a{ color:var(--blau-hell); text-underline-offset:4px; }

/* Platzhalter in den Rechtstexten sichtbar machen statt nur kursiv */
.recht em{
  font-style:normal; background:#fff4ed; box-shadow:0 0 0 2px #fff4ed;
  border-bottom:2px solid #c2410c;
}
.recht code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em; background:var(--grau-10); padding:.1em .35em;
}
.widerruf{
  font-family:var(--f-txt); font-size:.95rem; font-weight:600; cursor:pointer;
  background:var(--blau-dk); color:var(--weiss); border:0;
  padding:.45rem .9rem; margin:0 .2rem;
}
.widerruf:hover{ background:var(--blau-dk2); }

/* ——— Porträt des Inhabers ————————————————————————————————— */
.portraet{ margin:0; }
.portraet img{
  display:block; width:100%; height:auto;
  border:3px solid var(--schwarz);
}
.portraet figcaption{
  margin-top:.6rem; font-size:.88rem; color:var(--grau-60);
  border-left:4px solid var(--blau); padding-left:.7rem;
}
.block--schwarz .portraet figcaption,
.sec--contact .portraet figcaption{ color:var(--grau-40); }


/* Urheberzeile: gehört zur Fußzeile, tritt aber hinter die
   Angaben des Betriebs zurück. */
.fuss__credit{ display:inline-block; margin-top:.4rem; }

/* ——— Faktenzeile im Aufmacher ————————————————————————————
   Drei Zahlen, die jemand behält: Preis, Wartezeit, Erreichbarkeit.
   Typografisch gesetzt, nicht als Kacheln — keine Rahmen, keine Symbole. */
.fakten{
  display:flex; flex-wrap:wrap; gap:0;
  margin:2.4rem 0 2rem; border-top:2px solid #22394d;
  padding-top:1.4rem;
}
.fakten li{
  flex:1 1 0; min-width:9rem;
  padding-right:1.4rem;
}
.fakten li + li{ padding-left:1.6rem; border-left:1px solid #22394d; }
.fakten b{
  display:block; font-family:var(--f-eng); font-weight:700;
  font-size:clamp(2.1rem, 3.6vw, 3rem); line-height:1;
  color:var(--weiss); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin-bottom:.45rem;
}
.fakten span{ display:block; font-size:.86rem; line-height:1.4; color:var(--grau-40); }

@media (max-width: 560px){
  .fakten{ gap:1.1rem 0; }
  .fakten li{ flex:1 1 42%; min-width:0; padding-right:1rem; }
  .fakten li + li{ padding-left:1rem; }
  .fakten li:nth-child(3){ flex-basis:100%; border-left:0; padding-left:0; padding-top:1rem; border-top:1px solid #22394d; }
}

/* ——— Dachzeile H1 & Hero Trust-Badge —————————————————— */
.dachzeile--h1{
  display:block;
  font-family:var(--f-eng);
  font-size:clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--blau-hell);
  margin-bottom:.55rem;
}
.hero-bewertung{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  padding:.4rem .95rem;
  border-radius:999px;
  font-size:.9rem;
  color:var(--silber);
  text-decoration:none;
  margin-bottom:1.35rem;
  transition:all .2s ease;
}
.hero-bewertung:hover{
  background:rgba(27,157,240,.18);
  border-color:rgba(27,157,240,.45);
  color:var(--weiss);
  transform:translateY(-1px);
}
.hero-bewertung__sterne{
  color:#f0a500;
  letter-spacing:.12em;
  font-size:.95rem;
}
.hero-bewertung__text strong{
  color:var(--weiss);
}

/* ——— Zahlungs-Badges & PLZ ————————————————————————————— */
.zahl-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.5rem;
}
.zahl-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--schwarz-2);
  border:1px solid rgba(255,255,255,.1);
  padding:.45rem .85rem;
  border-radius:6px;
  font-size:.92rem;
  font-weight:500;
  color:var(--weiss);
  letter-spacing:.01em;
}
.gebiet__plz{
  margin-top:1.25rem;
  font-size:.92rem;
  color:var(--grau-60);
  line-height:1.6;
}
.gebiet__plz b{ color:var(--schwarz); }

/* ——— Mobile Anrufleiste Aktionen —————————————————————— */
.anrufleiste__aktionen{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-left:auto;
}
.wa-knopf--mini{
  padding:.75rem;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  text-decoration:none;
}
.wa-knopf--mini svg{ width:22px; height:22px; }