/* ==========================================================================
   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; }
}

/* Tabelle mit Tag- und Nachttarif: zwei Preisspalten statt einer */
.preistabelle--tarife thead th + th{ text-align:right; padding-left:1rem; }
.preistabelle--tarife tbody td{ padding-left:1rem; }
.preistabelle--tarife tbody td b{ font-size:2.4rem; }
.preistabelle--tarife .preis-blau{ font-size:2.4rem !important; }
.preistabelle--tarife tbody td small{
  font-size:.85rem; color:var(--grau-60); margin-right:.15rem;
}
.preistabelle--tarife tbody td em{
  font-style:normal; font-weight:600; font-size:1.05rem;
}
@media (max-width: 560px){
  .preistabelle--tarife tbody th{ padding-right:.5rem; font-size:1rem; }
  .preistabelle--tarife tbody th span{ font-size:.85rem; }
  .preistabelle--tarife thead th + th,
  .preistabelle--tarife tbody td{ padding-left:.9rem; }
  .preistabelle--tarife tbody td b,
  .preistabelle--tarife .preis-blau{ font-size:1.45rem !important; }
  .preistabelle--tarife tbody td small{ display:block; font-size:.75rem; margin:0 0 .15rem; }
  .preistabelle--tarife tbody td em{ font-size:.95rem; white-space:normal; }
}

/* ——— 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(auto-fit, minmax(14.5rem, 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-dk2);
  text-decoration:none;
}
.bewertungen__link:hover{ text-decoration:underline; color:var(--blau-dk); }
.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-dk2); }
@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:block; margin:0 auto 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; }

/* ——— Wartungsseite —————————————————————————————————————— */
.ist-wartung{ background:var(--schwarz); }
.wartung__badge{
  display:inline-block; font-family:var(--f-eng); font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em; color:var(--blau-hell);
  background:rgba(27,157,240,.12); border:1px solid rgba(27,157,240,.35);
  padding:.35rem .9rem; border-radius:999px; margin-bottom:1.25rem;
}
.wartung__box{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:1.25rem 1.5rem; margin:1.75rem auto 2rem; max-width:32rem;
  font-size:.95rem; line-height:1.55; text-align:left;
}
.wartung__box strong{ color:var(--weiss); }
.wartung__box p{ margin-bottom:.4rem; }
.wartung__box p:last-child{ margin-bottom:0; color:var(--silber); font-size:.88rem; }
.wartung__fuss{
  margin-top:2.5rem; font-size:.88rem; color:var(--grau-40);
  display:flex; justify-content:center; gap:1.75rem;
}
.wartung__fuss a{ color:var(--silber); text-decoration:none; }
.wartung__fuss a:hover{ color:var(--blau-hell); text-decoration:underline; }

/* 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;
}
/* Logos der Kartenanbieter — Regeln der Anbieter (geprüft 06.10.2026):
   - Alle Zeichen gleich groß (Apple, Google: nie kleiner als andere Marken;
     Visa: gleiche Präsenz wie andere Kartensysteme).
   - Schutzraum: Apple 1/4 der Logohöhe, Google 1/2 der Höhe des „G“
     (≈ 0,2 × Logohöhe) → Abstand = 0,25 × Logohöhe.
   - Mastercard-Symbol digital mindestens 24 px breit. Das Symbol füllt 89 %
     der Dateibreite, ist bei 26 px Logohöhe also gut 29 px breit → Logohöhe
     nie unter 26 px. Lieber eine zweite Zeile als zu klein.
   - Dateien unverändert. Visa und Mastercard auf weißer Kachel (Kontrast auf
     dem dunklen Grund), ihr Schutzraum steckt bereits in den Dateien.
   Höhe: 40 px, schmaler dann bis 26 px. 10.8 = Logobreiten je 1 px Höhe
   (girocard 2.75 + 3 × 1.55 + Google Pay 2.33) + 4 Abstände à 0.25, gerundet;
   40px = Seitenränder 2 × 20. */
.zahl-logos{
  --lh: clamp(26px, calc((100vw - 40px) / 10.8), 40px);
  display:flex; flex-wrap:wrap; gap:calc(var(--lh) * .25);
  margin:1.75rem 0 0; padding:0; list-style:none;
}
.zahl-logo{ margin:0; padding:0; line-height:0; }
.zahl-logo img{ display:block; height:var(--lh); width:auto; }
.zahl-logo--kachel{
  background:#fff; border-radius:5px;
  width:calc(var(--lh) * 1.55); height:var(--lh);
  padding:calc(var(--lh) * .08); box-sizing:border-box;
}
.zahl-logo--kachel img{ width:100%; height:100%; object-fit:contain; }
/* Die Google-Datei bringt ringsum Schutzraum mit (Zeichen = 54 % der Höhe).
   Größer ziehen, damit das Zeichen selbst so hoch ist wie die anderen. Oben
   und unten wird der Schutzraum neutralisiert (dort hält der Seitenabstand
   ihn frei), seitlich bleibt gut 0,2 × Logohöhe davon stehen. */
.zahl-logo--gpay img{
  height:calc(var(--lh) * 1.85);
  margin:calc(var(--lh) * -.425) calc(var(--lh) * -.2);
}
.zahl-logos + .zahl-badges{ margin-top:.75rem; }

.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; }

/* ——— Unterseiten (Autoöffnung, Preise, Notdienst) —————————————— */
.navi a[aria-current="page"],
.sprungleiste a[aria-current="page"]{ color:var(--weiss); border-bottom-color:var(--blau); }

/* Brotkrumen: liegen auf dem dunklen Aufmacher, deshalb gleicher Grund */
.krumen{ background:var(--schwarz); font-size:.85rem; color:var(--grau-40); }
.krumen ol{
  display:flex; flex-wrap:wrap; gap:.35rem; list-style:none;
  margin:0; padding:.9rem 0 0;
}
.krumen li + li::before{ content:"›"; margin-right:.35rem; color:var(--grau-60); }
.krumen a{ color:var(--grau-40); text-decoration:none; border-bottom:1px solid var(--grau-60); }
.krumen a:hover{ color:var(--weiss); }

/* Querverweise zwischen den Seiten */
.weiter{ list-style:none; margin:1.5rem 0 0; padding:0; border-top:2px solid var(--schwarz); }
.weiter li{ padding:1rem 0; border-bottom:1px solid var(--grau-20); }
.weiter a{
  display:inline-block; font-family:var(--f-eng); font-weight:700; font-size:1.2rem;
  color:var(--blau-dk); text-decoration:none; border-bottom:2px solid var(--blau);
}
.weiter span{ display:block; margin-top:.3rem; color:var(--grau-60); font-size:.95rem; }

/* Fußzeile: zweite Linkgruppe für die Leistungsseiten */
.fuss__navs{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-end; }
@media (max-width: 640px){ .fuss__navs{ align-items:flex-start; } }