/* ===========================================================================
   Haus- & Sanitärtechnik Mehler – gemeinsames Stylesheet
   Monochrome Premium-Version.
   Rechtlich sauber: keine externen Dienste, keine Google Fonts,
   keine einwilligungspflichtigen Cookies -> kein Cookie-Banner.
   =========================================================================== */

:root{
  --schwarz:#0B0B0C;
  --kohle:#161618;
  --grau-d:#2E3237;
  --grau:#454B52;
  /* Abgedunkelt von #70767D: der alte Wert kam auf hellem Grund (--hell) nur
     auf 4,07:1 und lag damit unter der WCAG-Anforderung von 4,5:1 für
     Fließtext. Jetzt 4,92:1 auf --hell und 5,55:1 auf Weiß. */
  --grau-h:#63696F;
  --linie:#E4E4E6;
  --hell:#F1F1F2;
  --weiss:#FFFFFF;
  --fehler:#A32020;
  --erfolg:#1E5E37;
  --max:1180px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* <picture> ist von Haus aus inline. Ohne diese Regel hätte der Wrapper keine
   Höhe und das height:100% der Bilder darin liefe ins Leere. */
picture{display:block}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{font-family:var(--sans);color:var(--schwarz);background:var(--weiss);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}

/* Nur für Screenreader sichtbar */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Sprunglink zum Inhalt */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--schwarz);padding:12px 20px;font-weight:700}
.skip:focus{left:0}

/* ---------- Notdienst-Leiste ---------- */
.notdienst-bar{background:var(--schwarz);color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.12)}
.notdienst-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:9px;padding-bottom:9px}
.notdienst-bar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.notdienst-bar a:hover{border-bottom-color:#fff}
.notdienst-bar .punkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:9px;animation:puls 2.4s infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Navigation ---------- */
header.site{background:var(--schwarz);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px}
.logo{background:#fff;padding:7px 13px}
.logo img{height:42px;width:auto}
nav.haupt{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
nav.haupt a{color:#fff;text-decoration:none;font-weight:600;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 15px;transition:opacity .2s;opacity:.85}
nav.haupt a:hover,nav.haupt a:focus-visible{opacity:1}
nav.haupt a.aktiv{opacity:1;box-shadow:inset 0 -2px 0 #fff}
nav.haupt a.cta{border:1.5px solid #fff;margin-left:12px;opacity:1}
nav.haupt a.cta:hover{background:#fff;color:var(--schwarz)}
.burger{display:none;background:none;border:1.5px solid rgba(255,255,255,.6);color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;cursor:pointer}
@media(max-width:900px){
  .burger{display:block}
  nav.haupt{display:none;position:absolute;top:100%;left:0;right:0;background:var(--kohle);flex-direction:column;align-items:stretch;padding:12px 18px 20px;gap:2px;border-top:1px solid rgba(255,255,255,.1)}
  nav.haupt.offen{display:flex}
  nav.haupt a{padding:14px 12px}
  nav.haupt a.cta{margin-left:0;margin-top:10px;text-align:center}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--schwarz)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Der Verlauf muss kräftig genug sein, damit die Schrift auch über den
   hellen Stellen des Videos lesbar bleibt – das Bildmaterial wechselt
   zwischen dunklen Bad-Aufnahmen und hellen Außenszenen. */
.hero .schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.28) 0%,rgba(11,11,12,.10) 28%,rgba(11,11,12,.62) 58%,rgba(11,11,12,.93) 100%)}
/* Der seitliche Abstand muss hier mitgeschrieben werden: die Regel ist
   spezifischer als .wrap und würde dessen padding sonst auf 0 setzen. */
.hero .inhalt{position:relative;z-index:2;padding:70px 26px 48px;color:#fff;max-width:820px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.26em;font-size:12px;font-weight:700;color:rgba(255,255,255,.75)}
.eyebrow::before{content:"";width:40px;height:1.5px;background:#fff}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:12px 0 8px}
.hero p{font-size:clamp(17px,1.8vw,20px);color:rgba(255,255,255,.92);max-width:56ch}
.hero .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:16px 30px;transition:background .2s,color .2s,border-color .2s}
.btn.voll{background:#fff;color:var(--schwarz);border:1.5px solid #fff}
.btn.voll:hover{background:transparent;color:#fff}
.btn.leer{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn.leer:hover{border-color:#fff;background:#fff;color:var(--schwarz)}
/* Dunkler Button auf hellem Grund */
.btn.dunkel{background:var(--schwarz);color:#fff;border:1.5px solid var(--schwarz);cursor:pointer;font-family:inherit}
.btn.dunkel:hover{background:transparent;color:var(--schwarz)}

/* Hero im Hochformat.
   Das Video ist mit 1600x610 sehr breit. In einem hohen, schmalen Kasten
   schneidet object-fit:cover rund drei Viertel der Bildbreite weg – zu sehen
   bleibt nur ein Streifen aus der Bildmitte. Deshalb läuft das Video auf
   schmalen Geräten als eigenes Band über die volle Breite, der Text steht
   darunter auf dem schwarzen Grund des Hero-Bereichs. */
@media(max-width:760px),(orientation:portrait) and (max-width:1100px){
  .hero{display:block;min-height:0}
  .hero video{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2/1}
  .hero .schleier{display:none}
  .hero .inhalt{padding:28px 26px 36px;max-width:none}
  .hero .knoepfe{margin-top:22px}
  .hero .knoepfe .btn{flex:1 1 100%;text-align:center}
}

/* ---------- Vertrauens-Band ---------- */
.vertrauen{background:var(--weiss);border-bottom:1px solid var(--linie)}
.vertrauen .reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
@media(max-width:840px){.vertrauen .reihe{grid-template-columns:repeat(2,1fr)}}
.vertrauen .merkmal{padding:15px 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--schwarz);text-align:center;border-right:1px solid var(--linie)}
.vertrauen .merkmal:last-child{border-right:none}
@media(max-width:840px){.vertrauen .merkmal:nth-child(2){border-right:none}.vertrauen .merkmal:nth-child(-n+2){border-bottom:1px solid var(--linie)}}

section{padding:52px 0}
/* Beim Sprung auf #leistungen, #kontakt usw. würde die klebende Kopfzeile
   sonst die Überschrift verdecken. */
section[id]{scroll-margin-top:96px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--grau);display:flex;align-items:center;gap:12px;margin-bottom:12px}
.kicker::before{content:"";width:40px;height:1.5px;background:var(--schwarz)}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.015em;line-height:1.12;color:var(--schwarz)}
.untertitel{color:var(--grau);max-width:62ch;margin-top:12px;font-size:17px}

/* ---------- Intro ---------- */
.intro .raster{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
@media(max-width:860px){.intro .raster{grid-template-columns:1fr;gap:40px}}
.intro p.flies{color:var(--grau-d)}
.intro p.flies+p.flies{margin-top:14px}
.versprechen{background:var(--schwarz);color:#fff;padding:28px 30px}
.versprechen h3{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:22px;color:rgba(255,255,255,.7)}
.versprechen ul{list-style:none}
.versprechen li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15.5px;display:flex;gap:16px}
.versprechen li:last-child{border-bottom:none;padding-bottom:0}
.versprechen li::before{content:"—";flex:none;color:rgba(255,255,255,.5)}

/* ---------- Leistungen ---------- */
.leistungen{background:var(--hell)}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:920px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kacheln{grid-template-columns:1fr}}
.kachel{position:relative;background:var(--weiss);text-decoration:none;color:var(--schwarz);display:flex;flex-direction:column;border:1px solid var(--linie);transition:transform .2s,box-shadow .2s}
.kachel:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(11,11,12,.14)}
.kachel .bild{aspect-ratio:3/2;overflow:hidden;background:var(--kohle);position:relative}
.kachel .bild picture{width:100%;height:100%}
.kachel .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .35s}
.kachel:hover .bild img{transform:scale(1.045)}
.kachel .text{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.kachel h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.kachel p{font-size:14.5px;color:var(--grau);flex:1}
.kachel .mehr{margin-top:18px;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--schwarz)}
.kachel .mehr::after{content:" →"}
/* Klarstellung unter den Kacheln: die Motive zeigen keine eigenen Objekte. */
.bild-hinweis{margin-top:22px;font-size:13.5px;color:var(--grau-h);max-width:78ch}
.bild-hinweis a{color:var(--grau);text-decoration:underline;text-underline-offset:3px}
.bild-hinweis a:hover{color:var(--schwarz)}

/* ---------- Kennzeichnung KI-generierter Bilder ----------
   Sitzt unten rechts in der Ecke des jeweiligen Bildes. Bewusst dezent, aber
   mit ausreichendem Kontrast, damit der Hinweis auf hellen wie dunklen
   Motiven lesbar bleibt. Nicht anklickbar, damit er die Kachel-Verlinkung
   darunter nicht stört. */
.ki-hinweis{
  position:absolute;right:0;bottom:0;z-index:3;
  background:rgba(11,11,12,.74);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;line-height:1.2;pointer-events:none}
@media(max-width:600px){.ki-hinweis{font-size:9.5px;padding:3px 7px}}

/* ---------- Notdienst ---------- */
.notdienst{position:relative;color:#fff;text-align:left;overflow:hidden;background:var(--schwarz)}
/* image-set() liefert modernen Browsern WebP, alle anderen bekommen das JPEG
   aus der ersten Zeile. */
.notdienst .bg{position:absolute;inset:0;
  background:url('../img/notdienst-hintergrund.jpg') center/cover no-repeat;
  background-image:image-set(url('../img/notdienst-hintergrund.webp') type('image/webp'),
                             url('../img/notdienst-hintergrund.jpg') type('image/jpeg'));
  background-position:center;background-size:cover;background-repeat:no-repeat}
.notdienst .dunkel{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.72) 55%,rgba(11,11,12,.35) 100%)}
.notdienst .wrap{position:relative;z-index:2}
.notdienst .kicker{color:rgba(255,255,255,.7)}
.notdienst .kicker::before{background:#fff}
.notdienst h2{color:#fff;max-width:16ch}
.notdienst p{color:rgba(255,255,255,.92);max-width:48ch;margin-top:16px;font-size:17.5px}
.notdienst .tel{display:inline-block;margin-top:20px;font-size:clamp(26px,4.6vw,46px);font-weight:800;letter-spacing:-.01em;color:#fff;text-decoration:none;border-bottom:3px solid #fff;padding-bottom:4px}
.notdienst .tel:hover{opacity:.85}
.notdienst .rund{margin-top:16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- Warum ---------- */
.warum .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:840px){.warum .drei{grid-template-columns:1fr}}
.punkt{background:var(--weiss);display:flex;flex-direction:column;border:1px solid var(--linie)}
.punkt .pbild{aspect-ratio:16/9;overflow:hidden;background:var(--kohle);position:relative}
.punkt .pbild picture{width:100%;height:100%}
.punkt .pbild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.punkt:hover .pbild img{transform:scale(1.04)}
.punkt .ptext{padding:20px 24px 24px}
.punkt .nummer{font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--grau-h);margin-bottom:16px}
.punkt h3{font-size:19px;font-weight:800;margin-bottom:10px}
.punkt p{font-size:15px;color:var(--grau)}

/* ---------- Bewertungen ---------- */
.bewertungen{background:var(--hell)}
.zitate{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
@media(max-width:840px){.zitate{grid-template-columns:1fr}}
.zitat{background:var(--weiss);border:1px solid var(--linie);padding:30px 28px;display:flex;flex-direction:column}
.zitat .sterne{font-size:15px;letter-spacing:3px;margin-bottom:14px;color:var(--schwarz)}
.zitat p{font-size:15px;color:var(--grau-d);flex:1;font-style:italic}
.zitat .wer{margin-top:18px;font-weight:700;font-size:14px}
.zitat .wo{font-size:12.5px;color:var(--grau-h);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.bewertungen .aktion{text-align:center;margin-top:28px}
.bewertungen .aktion .btn.google{background:var(--schwarz);color:#fff;border:1.5px solid var(--schwarz)}
.bewertungen .aktion .btn.google:hover{background:transparent;color:var(--schwarz)}
.bewertungen .aktion .klein{display:block;margin-top:14px;font-size:13px;color:var(--grau-h)}

/* ---------- Kontakt ---------- */
.kontakt .raster{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:26px;align-items:start}
@media(max-width:860px){
  .kontakt .raster{grid-template-columns:1fr;gap:36px}
  /* Einspaltig stünde das Formular sonst unter allen Kontaktdaten – es ist
     aber das Ziel des Buttons "Beratungstermin" und gehört deshalb nach oben. */
  .kontakt .formular{order:-1}
}
.kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:12px 26px;font-size:16px}
.kontakt dt{font-weight:700;letter-spacing:.02em}
.kontakt dd a{color:var(--schwarz);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.kontakt dd a:hover{opacity:.7}
.kontakt .hinweis{background:var(--hell);border-left:3px solid var(--schwarz);padding:26px 26px;font-size:15px;color:var(--grau-d);margin-top:28px}
.kontakt .hinweis strong{color:var(--schwarz)}
.kontakt .hinweis .klein{font-size:13px;color:var(--grau-h);margin-top:14px;display:block}

/* ---------- Formular ---------- */
.formular{background:var(--weiss);border:1px solid var(--linie);padding:32px 30px 34px}
@media(max-width:520px){.formular{padding:24px 20px 26px}}
.formular h3{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grau);margin-bottom:22px}
/* Der untere Abstand hält die Fehlermeldung, die absolut darüber gelegt wird. */
.feld{margin-bottom:27px;position:relative}
.feld label{display:block;font-size:14px;font-weight:700;letter-spacing:.02em;margin-bottom:7px}
.feld .pflicht{color:var(--grau-h);font-weight:600}
.feld input,.feld select,.feld textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--schwarz);background:var(--weiss);
  border:1.5px solid var(--linie);padding:13px 14px;transition:border-color .18s;border-radius:0;-webkit-appearance:none;appearance:none}
.feld select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%230B0B0C' d='M7 9 0 2l2-2 5 5 5-5 2 2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:44px}
.feld textarea{min-height:150px;resize:vertical;line-height:1.6}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--grau-h)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--schwarz);box-shadow:inset 0 0 0 1px var(--schwarz)}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"],.feld select[aria-invalid="true"]{border-color:var(--fehler);box-shadow:inset 0 0 0 1px var(--fehler)}
/* Fehlermeldungen liegen absolut im Abstand unter dem Feld und beeinflussen
   das Layout deshalb nie. Andernfalls verschöbe sich beim Verlassen eines
   Feldes das restliche Formular – und ein Klick auf das nächste Bedienelement
   ginge daneben, weil es unter dem Mauszeiger wegrutscht. */
.fehlertext{
  position:absolute;top:100%;left:0;right:0;margin-top:4px;
  line-height:1.3;color:var(--fehler);font-size:13px;font-weight:600}
.feld-zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:520px){.feld-zwei{grid-template-columns:1fr}}

/* Honeypot – für Menschen unsichtbar, Bots füllen es aus */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.zustimmung-block{position:relative;margin-bottom:30px}
.zustimmung{display:flex;gap:12px;align-items:flex-start}
.zustimmung input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--schwarz);-webkit-appearance:auto;appearance:auto;border-radius:0}
.zustimmung label{font-size:14px;line-height:1.6;color:var(--grau-d);font-weight:400;margin:0}
.zustimmung a{color:var(--schwarz);text-decoration:underline;text-underline-offset:3px}

.formular .btn.dunkel{width:100%;text-align:center}
.formular .btn.dunkel[disabled]{opacity:.5;cursor:progress}
.formular .fusszeile{font-size:12.5px;color:var(--grau-h);margin-top:16px;line-height:1.6}

/* Rückmeldung nach dem Absenden */
.meldung{display:none;padding:18px 20px;font-size:15px;font-weight:600;margin-bottom:22px;border-left:3px solid}
.meldung.an{display:block}
.meldung.ok{background:#EDF5F0;border-color:var(--erfolg);color:var(--erfolg)}
.meldung.fehler{background:#FBEDED;border-color:var(--fehler);color:var(--fehler)}
.meldung a{color:inherit}

/* ---------- Footer ---------- */
footer{background:var(--schwarz);color:rgba(255,255,255,.88);padding:40px 0 26px;font-size:15px}
footer .raster{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:46px}
@media(max-width:760px){footer .raster{grid-template-columns:1fr}}
footer .logo-f img{height:50px;width:auto;margin-bottom:16px}
footer h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.22em;margin-bottom:16px;font-weight:700}
footer a{color:rgba(255,255,255,.75);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer ul{list-style:none}
footer li{padding:4px 0}
.rechtliches{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.5)}
.rechtliches a{color:rgba(255,255,255,.72)}

/* ---------- Unterseiten (Impressum, Datenschutz, Danke, 404) ---------- */
.unterseite{padding:56px 0 76px}
.unterseite .wrap{max-width:840px}
.unterseite h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.unterseite .strich{height:2px;width:64px;background:var(--schwarz);margin:20px 0 34px}
.unterseite h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:38px 0 10px}
.unterseite h3{font-size:17px;font-weight:700;margin:24px 0 8px}
.unterseite p+p{margin-top:12px}
.unterseite ul{margin:10px 0 10px 22px;color:var(--grau-d)}
.unterseite li{margin:5px 0}
.unterseite a{color:var(--schwarz);text-decoration:underline;text-underline-offset:3px}
.unterseite a:hover{opacity:.7}
.unterseite p{color:var(--grau-d)}
.unterseite .stand{margin-top:44px;font-size:14px;color:var(--grau-h)}
.unterseite .bildnachweis{font-size:14.5px;color:var(--grau-h)}
/* Offener Platzhalter – vor dem Livegang zu füllen */
.platzhalter{background:var(--hell);border-left:3px solid var(--schwarz);padding:3px 10px;font-weight:600;color:var(--schwarz)}

/* Zentrierte Statusseiten (danke.html, 404.html) */
.status{padding:90px 0 100px;text-align:center}
.status .wrap{max-width:640px}
.status .zeichen{font-size:13px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--grau-h);margin-bottom:18px}
.status h1{font-size:clamp(30px,4.6vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.status p{color:var(--grau);margin-top:16px;font-size:17px}
.status .knoepfe{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.status .btn.leer{border-color:var(--linie);color:var(--schwarz)}
.status .btn.leer:hover{border-color:var(--schwarz);background:var(--schwarz);color:#fff}

:focus-visible{outline:3px solid var(--schwarz);outline-offset:3px}
.hero :focus-visible,.notdienst :focus-visible,footer :focus-visible,header :focus-visible{outline-color:#fff}