/* =====================================================================
   VLS VERKEHRSLEITSYSTEME DÖBELN GmbH · gemeinsames Stylesheet
   Design-Entwurf v01 · 04.08.2026 · nemacon
   Gestaltung: Nele · Bau: Ben · Prüfung: Quirin

   Liegt auf derselben Domain. Kein Fremd-CDN, keine Bibliothek.
   Alle Schriften werden lokal aus ../fonts/ ausgeliefert.
   ===================================================================== */

/* ============ 1 · SCHRIFTEN (lokal, kein Google-Server) ============ */
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============ 2 · DESIGN-TOKEN ============ */
:root{
  /* Primärfarbe aus dem Logo ausgezählt: #C61932 */
  --rot:#C61932;
  --rot-tief:#991327;
  --rot-gross:#E8465C;        /* große Schrift auf Dunkel */
  --rot-klein:#F58A99;        /* kleine Schrift auf Dunkel */
  --signal:#F3B31C;           /* Warnleuchten-Gelb, nur Akzent auf Dunkel */

  --asphalt:#16181C;
  --asphalt-hell:#212429;
  --asphalt-rand:#2E3339;
  --stahl-700:#333A42;
  --stahl-600:#4C555F;
  --stahl-500:#626B76;
  --stahl-300:#8D959E;
  --stahl-250:#B9C0C8;
  --stahl-200:#D8DCE1;
  --stahl-100:#EDEFF2;
  --papier:#FBFBFA;
  --weiss:#FFFFFF;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  --breite:1400px;
  --rand:22px;
  --radius:4px;
  --linie:1px solid var(--stahl-200);
  --schatten:0 1px 2px rgba(22,24,28,.05), 0 10px 28px rgba(22,24,28,.07);
  --schatten-hoch:0 2px 6px rgba(22,24,28,.09), 0 26px 56px rgba(22,24,28,.16);
  --tempo:.34s cubic-bezier(.22,.61,.36,1);
}


/* ============ 3 · GRUNDLAGEN ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;background:var(--papier);color:var(--asphalt);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Barlow','Inter',system-ui,sans-serif;margin:0;line-height:1.07;letter-spacing:-.02em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}
.dunkel :focus-visible{outline-color:var(--rot-klein)}

.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.springlink{position:absolute;left:-9999px;top:0;background:var(--rot);color:#fff;padding:12px 20px;z-index:999;font-weight:600;text-decoration:none}
.springlink:focus{left:8px;top:8px}

.t-riese{font-size:clamp(1.85rem,3.9vw,3.6rem);letter-spacing:-.03em}
.t-gross{font-size:clamp(1.95rem,3.6vw,3.1rem);letter-spacing:-.028em}
.t-mittel{font-size:clamp(1.35rem,2.1vw,1.8rem);letter-spacing:-.02em}
.t-klein{font-size:1.08rem;letter-spacing:-.012em;font-weight:700}
.lead{font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.62;color:var(--stahl-600)}
.fliess{color:var(--stahl-600)}
.dunkel .lead,.dunkel .fliess{color:var(--stahl-250)}

.marke{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.94rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rot);margin-bottom:var(--s3);
}
.marke::before{content:"";width:46px;height:4px;flex:none;background:currentColor}
.marke .nr{color:var(--stahl-500);letter-spacing:.14em}
.dunkel .marke{color:var(--rot-klein)}
.dunkel .marke .nr{color:var(--stahl-300)}

.dunkel{background:var(--asphalt);color:var(--weiss)}
.sektion{padding-block:clamp(56px,7.5vw,120px)}
.sektion-grau{background:var(--stahl-100)}

/* ============ 4 · BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.005em;
  padding:15px 28px;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:var(--tempo);line-height:1.2;
}
.btn-rot{background:var(--rot);color:#fff;border-color:var(--rot)}
.btn-rot:hover{background:var(--rot-tief);border-color:var(--rot-tief);transform:translateY(-2px);box-shadow:0 12px 26px rgba(198,25,50,.34)}
.btn-linie{background:transparent;color:var(--asphalt);border-color:var(--stahl-200)}
.btn-linie:hover{border-color:var(--asphalt);background:var(--asphalt);color:#fff;transform:translateY(-2px)}
.dunkel .btn-linie{color:#fff;border-color:rgba(255,255,255,.36)}
.dunkel .btn-linie:hover{background:#fff;color:var(--asphalt);border-color:#fff}
.btn .pfeil{transition:transform var(--tempo)}
.btn:hover .pfeil{transform:translateX(4px)}
.tat-reihe{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Textlink mit Pfeil */
.weiter{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;padding-block:3px;
  font-family:'Barlow',sans-serif;font-weight:700;font-size:.97rem;color:var(--rot);
}
.weiter:hover{color:var(--rot-tief)}
.weiter svg{transition:transform var(--tempo)}
.weiter:hover svg{transform:translateX(4px)}

/* ============ 5 · INFOLEISTE UND KOPF ============ */
/* Kopfleiste: mobil nur das Nötigste. Adresse und Öffnungszeiten stehen
   weiter unten ohnehin. Vier Einträge übereinander waren 119 px hoch und
   haben ein Fünftel des Handybildschirms verbraucht, bevor der Hero anfing. */
.leiste{background:var(--asphalt);color:var(--stahl-250);font-size:.82rem}
.leiste .huelle{display:flex;justify-content:space-between;align-items:center;gap:8px var(--s3);min-height:40px;flex-wrap:wrap}
.leiste ul{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.leiste .ab-mittel,.leiste .ab-breit{display:none}
/* Unter 600 px ist die linke Liste komplett leer. Sie muss weg, sonst
   verbraucht allein ihr Zwischenraum 24 px und die rechte Liste bricht um. */
.leiste ul:first-child{display:none}
.leiste ul:last-child{flex:1;justify-content:space-between;gap:12px}
.leiste li{display:flex;align-items:center;gap:8px}
.leiste a{text-decoration:none;display:inline-block;padding-block:3px}
.leiste a:hover{color:#fff}
.leiste .notruf{color:var(--signal);font-weight:600}
.punkt{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;box-shadow:0 0 0 3px rgba(243,179,28,.22)}

.kopf{position:sticky;top:0;z-index:100;background:rgba(251,251,250,.93);backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--linie);transition:box-shadow var(--tempo)}
.kopf.geheftet{box-shadow:0 1px 0 var(--stahl-200),0 12px 32px rgba(22,24,28,.09)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:78px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{width:132px}

.nav{display:none}
.nav>ul{display:flex;align-items:center;gap:var(--s4)}
.nav a{
  text-decoration:none;font-weight:600;font-size:.96rem;color:var(--stahl-700);
  padding:8px 0;position:relative;transition:color var(--tempo);display:inline-block;
}
.nav>ul>li>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--rot);transition:width var(--tempo)}
.nav a:hover{color:var(--asphalt)}
.nav>ul>li>a:hover::after{width:100%}
.nav [aria-current="page"]{color:var(--asphalt)}
.nav>ul>li>[aria-current="page"]::after{width:100%}

/* Untermenü Leistungen, reines CSS */
.hat-unter{position:relative}
.hat-unter>a::before{
  content:"";position:absolute;left:0;right:0;top:100%;height:18px;   /* Brücke zum Menü */
}
.unter{
  position:absolute;left:-18px;top:calc(100% + 16px);min-width:264px;
  background:var(--weiss);border:var(--linie);border-radius:var(--radius);box-shadow:var(--schatten-hoch);
  padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--tempo);
}
.hat-unter:hover .unter,.hat-unter:focus-within .unter{opacity:1;visibility:visible;transform:none}
.unter a{padding:10px 14px;border-radius:3px;font-size:.94rem;font-weight:500}
.unter a:hover{background:var(--stahl-100);color:var(--asphalt)}
.unter a[aria-current="page"]{background:var(--stahl-100);font-weight:600}

.kopf-tat{display:flex;align-items:center;gap:var(--s2)}
/* Nummer im Kopf ohne Zusatz. Die 24 Stunden stehen nur in der schwarzen
   Leiste darüber, denn die Bereitschaft ist für Havarien da, nicht für
   Anfragen. */
.tel-kopf{display:none;text-decoration:none;font-family:'Barlow',sans-serif;font-weight:700;font-size:1.06rem;white-space:nowrap;padding-block:6px}
.tel-kopf:hover{color:var(--rot)}
.kopf .btn{display:none;padding:12px 22px;font-size:.94rem}

.menue-knopf{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:var(--asphalt);border:0;border-radius:var(--radius);cursor:pointer;
}
.menue-knopf span{display:block;height:2px;background:#fff;transition:var(--tempo)}
.menue-knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue-knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.schublade{
  position:fixed;inset:0;top:0;z-index:99;background:var(--asphalt);color:#fff;
  padding:104px var(--rand) var(--s8);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:var(--tempo);
}
.schublade.offen{opacity:1;visibility:visible;transform:none}
.schublade ul{display:flex;flex-direction:column;gap:2px}
.schublade>nav>ul>li>a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  text-decoration:none;font-family:'Barlow',sans-serif;font-weight:700;font-size:1.35rem;
  padding:14px 0;border-bottom:1px solid var(--asphalt-rand);
}
.schublade>nav>ul>li>a span{font-family:'Barlow Condensed',sans-serif;font-size:.92rem;color:var(--stahl-300);letter-spacing:.14em}
.schublade .unter-mobil{padding:6px 0 12px 2px;border-bottom:1px solid var(--asphalt-rand)}
.schublade .unter-mobil a{
  display:block;text-decoration:none;font-size:.98rem;color:var(--stahl-250);
  padding:9px 0 9px 16px;border-left:2px solid var(--asphalt-rand);
}
.schublade .unter-mobil a:hover,.schublade .unter-mobil a[aria-current="page"]{color:#fff;border-left-color:var(--rot)}
.schublade .tat-reihe{margin-top:var(--s6)}
.schublade .btn{flex:1 1 220px}

/* ============ 6 · HERO (nur Startseite) ============ */
.hero{position:relative;background:var(--asphalt);color:#fff;overflow:hidden}
.hero-bild{position:absolute;inset:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:grayscale(.08) contrast(1.04) brightness(1.17)}
.hero-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,24,28,.93) 0%,rgba(22,24,28,.86) 46%,rgba(22,24,28,.76) 100%);
}
.hero .huelle{position:relative;z-index:2;padding-block:clamp(38px,5.2vw,68px) clamp(62px,6.5vw,92px);display:grid;gap:var(--s5)}
.hero .marke{color:#fff}
.hero .marke::before{background:var(--rot-klein)}
.hero .marke .nr{color:var(--stahl-250)}
.hero h1{margin-bottom:var(--s3)}
.hero h1 .zeile{display:block}
.hero h1 .rot{color:var(--rot-gross)}
.hero .lead{margin-bottom:var(--s4);max-width:60ch;color:#fff}

/* USP-Box am Fuß des Heros, bündig mit der Kennzahlen-Karte darunter */
.vertrauen{
  display:grid;grid-template-columns:minmax(0,1fr);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--radius);
  background:rgba(22,24,28,.42);backdrop-filter:blur(5px);overflow:hidden;
}
.vertrauen li{
  display:flex;gap:14px;align-items:center;padding:16px 20px;
  font-size:.95rem;color:#fff;line-height:1.32;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.vertrauen li:last-child{border-bottom:0}
.usp-symbol{width:26px;height:26px;flex:none;color:var(--rot-klein)}

/* Zertifikats-Badges rechts im Hero */
.nachweise{display:none}
.nachweis-titel{
  display:flex;align-items:center;gap:12px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:var(--s3);
}
.nachweis-titel::before{content:"";width:34px;height:4px;flex:none;background:var(--rot-klein)}
.nachweise ul{display:flex;flex-direction:column;gap:12px}
.badge{
  display:flex;align-items:center;gap:16px;padding:13px 18px 13px 13px;
  background:rgba(22,24,28,.72);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);backdrop-filter:blur(6px);transition:var(--tempo);
}
.badge:hover{background:rgba(22,24,28,.86);border-color:rgba(255,255,255,.34);transform:translateX(-4px)}
.badge-siegel{
  width:74px;height:60px;flex:none;background:#fff;border-radius:3px;
  display:flex;align-items:center;justify-content:center;padding:6px;
}
.badge-siegel img{max-height:46px;width:auto;object-fit:contain}
.badge-text b{display:block;font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;line-height:1.22;color:#fff;letter-spacing:-.01em}
.badge-text>span{display:block;margin-top:3px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.07em;color:#D7DCE2}

/* Kennzahlen, ragt in den Hero */
.kennzahlen{position:relative;z-index:3;margin-top:calc(-1 * clamp(22px,3.2vw,42px))}
.kennzahlen ul{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten-hoch);overflow:hidden;
}
.kennzahlen li{padding:var(--s4) var(--s3);border-right:var(--linie);border-bottom:var(--linie)}
.kennzahlen li:nth-child(2n){border-right:0}
.kennzahlen li:nth-last-child(-n+2){border-bottom:0}
.kennzahlen b{
  display:block;font-family:'Barlow',sans-serif;font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--asphalt);
}
.kennzahlen b i{font-style:normal;color:var(--rot);font-size:.5em;vertical-align:.55em;margin-left:2px}
.kennzahlen span{display:block;margin-top:10px;font-size:.86rem;line-height:1.4;color:var(--stahl-500)}

/* ============ 7 · SEITENKOPF (Unterseiten) ============ */
.seitenkopf{position:relative;background:var(--asphalt);color:#fff;overflow:hidden}
.seitenkopf-bild{position:absolute;inset:0}
.seitenkopf-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:grayscale(.12) brightness(1.04)}
.seitenkopf-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,24,28,.95) 0%,rgba(22,24,28,.9) 48%,rgba(22,24,28,.66) 100%)}
.seitenkopf .huelle{position:relative;z-index:2;padding-block:clamp(34px,4.4vw,58px) clamp(40px,5vw,68px)}
.seitenkopf h1{max-width:22ch;margin-bottom:var(--s3)}
.seitenkopf .lead{max-width:66ch;color:#fff}
.brotkrume{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:var(--s4);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.92rem;
  letter-spacing:.12em;text-transform:uppercase;color:#D7DCE2;
}
.brotkrume a{text-decoration:none;display:inline-block;padding-block:3px}
.brotkrume a:hover{color:#fff;text-decoration:underline}
.brotkrume span{color:var(--rot-klein)}
.brotkrume [aria-current="page"]{color:#fff}

/* ============ 8 · SEKTIONSKOPF ============ */
.kopfzeile{display:grid;gap:var(--s3);margin-bottom:clamp(36px,4.5vw,68px)}
.kopfzeile h2{max-width:20ch}
.kopfzeile .lead{max-width:62ch}
.kopfzeile.mitte{text-align:center;justify-items:center}
.kopfzeile.mitte .marke{justify-content:center}
.kopfzeile.mitte h2{max-width:26ch}

/* ============ 9 · ABLAUF ============ */
.ablauf{display:grid;gap:var(--s2);grid-template-columns:minmax(0,1fr);counter-reset:schritt}
.schritt{
  position:relative;background:var(--weiss);border:var(--linie);border-radius:var(--radius);
  padding:var(--s4) var(--s3);transition:var(--tempo);
}
.schritt::before{
  counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:2.1rem;
  line-height:1;color:var(--rot);margin-bottom:14px;letter-spacing:.02em;
}
.schritt h3{font-size:1.16rem;margin-bottom:8px;letter-spacing:-.012em;overflow-wrap:break-word;hyphens:auto}
.schritt p{font-size:.95rem;color:var(--stahl-600);line-height:1.58;overflow-wrap:break-word;hyphens:auto}
.schritt:hover{border-color:var(--stahl-300);box-shadow:var(--schatten);transform:translateY(-3px)}

.fazit{
  margin-top:var(--s6);background:var(--asphalt);color:#fff;border-radius:var(--radius);
  padding:clamp(28px,3.4vw,52px);display:grid;gap:var(--s4);align-items:center;
}
.fazit p{font-family:'Barlow',sans-serif;font-weight:700;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.22;letter-spacing:-.02em}
.fazit .btn{justify-self:start}

/* ============ 10 · LEISTUNGSKARTEN ============ */
.karten{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
.karte{
  display:flex;flex-direction:column;background:var(--weiss);border:var(--linie);
  border-radius:var(--radius);overflow:hidden;transition:var(--tempo);
}
.karte:hover{box-shadow:var(--schatten-hoch);transform:translateY(-4px);border-color:transparent}
.karte-bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stahl-100);flex:none}
.karte-bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .6s cubic-bezier(.22,.61,.36,1),filter var(--tempo)}
.karte:hover .karte-bild img{transform:scale(1.05);filter:saturate(1)}
.karte-bild b{
  position:absolute;left:0;bottom:0;background:var(--rot);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.84rem;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 14px 7px;
}
.karte-text{padding:var(--s4) var(--s3);display:flex;flex-direction:column;flex:1}
.karte h3{font-size:clamp(1.15rem,1.5vw,1.35rem);margin-bottom:10px}
.karte-text>p{font-size:.94rem;color:var(--stahl-600);margin-bottom:var(--s3)}
.karte-fuss{margin-top:auto;padding-top:var(--s2);border-top:var(--linie)}

/* Aufzählung mit rotem Strich */
.liste{display:flex;flex-direction:column;gap:10px}
.liste li{position:relative;padding-left:24px;font-size:.98rem;color:var(--stahl-700);line-height:1.55}
.liste li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:3px;background:var(--rot)}
.liste.eng li{font-size:.93rem}

/* ============ 12 · ZERTIFIKATE ============ */
.zert{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
.zert-karte{
  background:var(--weiss);border:var(--linie);border-top:4px solid var(--rot);
  border-radius:var(--radius);padding:var(--s5) var(--s4);display:flex;flex-direction:column;
}
.zert-karte img{height:80px;width:auto;margin-bottom:var(--s3);object-fit:contain;object-position:left center}
/* Für die Qualifizierung nach RSA, ZTV-SA und MVAS 99 gibt es kein Siegel.
   Statt eines erfundenen Logos steht dort eine gesetzte Normen-Marke. */
.norm-marke{
  height:80px;margin-bottom:var(--s3);padding-left:15px;
  border-left:4px solid var(--rot);display:flex;flex-direction:column;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.09em;
}
.norm-marke span{display:block;font-size:1.16rem;line-height:1.28;color:var(--asphalt)}
.norm-marke.klein{height:auto;margin:0;padding-left:11px;border-left-width:3px}
.norm-marke.klein span{font-size:.86rem;line-height:1.3;letter-spacing:.05em}
.badge-siegel:has(.norm-marke){padding:7px 9px 7px 5px}
.zert-karte h3{font-size:1.16rem;margin-bottom:10px;line-height:1.25}
.zert-karte p{font-size:.95rem;color:var(--stahl-600);margin-bottom:var(--s2)}
.regnr{
  margin-top:auto;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.94rem;
  letter-spacing:.09em;color:var(--stahl-500);border-top:var(--linie);padding-top:12px;
}

/* ============ 13 · TEXT UND TABELLEN (Unterseiten) ============ */
.prosa{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:start}
.prosa h2{margin-bottom:var(--s3)}
.prosa h3{font-size:1.3rem;margin:var(--s5) 0 var(--s2)}
.prosa p+p{margin-top:var(--s2)}
.prosa-text>p{color:var(--stahl-600)}
.prosa-bild{border-radius:var(--radius);overflow:hidden;margin:0}
/* Das Betriebsfoto ist ein sehr breites Panorama (3,65:1). Auf dem Handy waere es
   nur 91 px hoch, das Gebaeude also kaum zu erkennen. Bis 760 px deshalb ein
   16:9-Ausschnitt, der auf den Schriftzug an der Fassade zielt. */
.breitbild img{aspect-ratio:16/9;object-fit:cover;object-position:32% 50%}
.prosa-bild figcaption{font-size:.84rem;color:var(--stahl-500);padding-top:10px}

/* table-layout:fixed, sonst ist die Mindestbreite der Tabelle die Summe der
   laengsten Woerter. Bei 320 px hat sie den Textbereich sonst aufgesprengt. */
.datenblatt{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:var(--s3);font-size:.96rem}
.datenblatt caption{
  text-align:left;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--stahl-500);padding-bottom:12px;
}
.datenblatt th,.datenblatt td{text-align:left;padding:13px 14px;border-bottom:var(--linie);vertical-align:top;hyphens:auto;overflow-wrap:break-word}
.datenblatt th{font-family:'Barlow',sans-serif;font-weight:700;width:38%;color:var(--asphalt)}
.datenblatt td{color:var(--stahl-600)}
.datenblatt tr:first-child th,.datenblatt tr:first-child td{border-top:2px solid var(--asphalt)}

.merkkasten{
  background:var(--stahl-100);border-left:4px solid var(--rot);border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s4);margin-top:var(--s4);
}
.merkkasten b{display:block;font-family:'Barlow',sans-serif;font-size:1.08rem;margin-bottom:8px}
.merkkasten p{font-size:.95rem;color:var(--stahl-600)}

.fakten{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--s4);border-top:var(--linie)}
.fakten div{display:flex;justify-content:space-between;gap:var(--s3);padding:14px 0;border-bottom:var(--linie)}
.fakten dt{font-size:.93rem;color:var(--stahl-500)}
.fakten dd{margin:0;font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;text-align:right}

/* Nachbar-Leistungen am Seitenende */
.nachbarn{display:grid;gap:var(--s2);grid-template-columns:minmax(0,1fr)}
.nachbar{
  display:flex;align-items:center;gap:var(--s2);text-decoration:none;
  background:var(--weiss);border:var(--linie);border-radius:var(--radius);padding:14px 18px;
  transition:var(--tempo);
}
.nachbar:hover{border-color:var(--rot);transform:translateY(-2px);box-shadow:var(--schatten)}
.nachbar b{font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;flex:1}
.nachbar svg{color:var(--rot);flex:none;transition:transform var(--tempo)}
.nachbar:hover svg{transform:translateX(4px)}

/* ============ 13b · RECHTSTEXTE ============ */
.rechtstext{max-width:78ch}
.rechtstext h2{font-size:clamp(1.4rem,2vw,1.75rem);margin:var(--s8) 0 var(--s3)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.14rem;margin:var(--s5) 0 10px}
.rechtstext p{color:var(--stahl-600);margin-bottom:var(--s2)}
.rechtstext ul{margin:var(--s2) 0 var(--s3)}
.rechtstext address{font-style:normal;color:var(--stahl-600);margin-bottom:var(--s2)}
/* Lange Adressen wie osmfoundation.org/wiki/Privacy_Policy passen auf kleinen
   Handys sonst nicht in die Spalte und schieben die ganze Seite quer. */
.rechtstext a{color:var(--rot);font-weight:500;overflow-wrap:anywhere}

/* Unübersehbare Lücke. Muss vor dem Livegang gefüllt sein, sonst ist das
   Impressum unvollständig und die Seite abmahnbar. */
.luecke,.rechtstext .luecke{
  background:#FDECEE;border:2px dashed var(--rot);border-radius:var(--radius);
  padding:14px 18px;margin:var(--s2) 0;color:var(--rot-tief);font-weight:600;font-size:.95rem;
}
.luecke::before{content:"NOCH ZU ERGÄNZEN: ";font-family:'Barlow Condensed',sans-serif;letter-spacing:.14em}

/* ============ 14 · KONTAKT ============ */
.kontakt-raster{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
.kontakt-karte{
  background:var(--weiss);border:var(--linie);border-radius:var(--radius);
  padding:var(--s5) var(--s4);display:flex;flex-direction:column;transition:var(--tempo);
}
.kontakt-karte:hover{box-shadow:var(--schatten);border-color:var(--stahl-300)}
.kontakt-symbol{
  width:48px;height:48px;border-radius:var(--radius);background:var(--stahl-100);
  display:flex;align-items:center;justify-content:center;color:var(--rot);margin-bottom:var(--s3);
}
.kontakt-symbol svg{width:23px;height:23px}
.kontakt-karte h3{font-size:1.3rem;margin-bottom:12px}
.kontakt-gross{
  font-family:'Barlow',sans-serif;font-weight:800;font-size:clamp(1.25rem,1.8vw,1.6rem);
  letter-spacing:-.022em;text-decoration:none;color:var(--asphalt);line-height:1.15;
  display:inline-block;word-break:break-word;padding-block:3px;
}
a.kontakt-gross:hover{color:var(--rot)}
.kontakt-karte p{font-size:.94rem;color:var(--stahl-600);margin-top:12px}
.kontakt-zeilen{display:flex;flex-direction:column;gap:11px;margin-top:var(--s2)}
.kontakt-zeilen li{display:flex;justify-content:space-between;gap:var(--s2);font-size:.94rem;color:var(--stahl-600);border-bottom:var(--linie);padding-bottom:10px}
.kontakt-zeilen li:last-child{border-bottom:0}
.kontakt-zeilen b{font-family:'Barlow',sans-serif;font-size:1rem;color:var(--asphalt);text-align:right}
.kontakt-karte .btn{margin-top:var(--s4);align-self:flex-start}

/* Zwei-Klick-Karte */
.karte-platzhalter{
  margin-top:var(--s3);border:var(--linie);border-radius:var(--radius);background:var(--stahl-100);
  padding:var(--s8) var(--s4);text-align:center;
}
.karte-platzhalter p{font-size:.9rem;color:var(--stahl-600);margin:0 auto var(--s3);max-width:62ch;line-height:1.55}
.karte-rahmen{width:100%;height:clamp(280px,38vw,440px);border:0;display:block;border-radius:var(--radius)}

/* Kein Formular-CSS. Die Website hat kein einziges Eingabefeld, das ist
   eine bewusste Entscheidung: Anfragen laufen über Telefon und E-Mail.
   Damit entfällt Block E des Web-Sicherheits-Gates vollständig. */

/* ============ 15 · SCHLUSSBAND ============ */
.schlussband{background:var(--asphalt);color:#fff;padding-block:clamp(48px,6vw,88px)}
.schlussband .huelle{display:grid;gap:var(--s4);align-items:center}
.schlussband h2{margin-bottom:12px}
.schlussband p{color:var(--stahl-250);max-width:56ch}

/* ============ 17 · FUSS ============ */
.fuss{background:var(--asphalt);color:var(--stahl-250);padding-block:var(--s10) var(--s6);font-size:.92rem}
.fuss-raster{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);margin-bottom:var(--s8)}
/* Überschriften im Fußbereich sind H2, damit auf keiner Seite ein
   Überschriften-Sprung entsteht. Die Größe macht die Klasse, nicht die Ebene. */
.fuss h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.19em;text-transform:uppercase;color:#fff;margin-bottom:var(--s3);line-height:1.3}
.fuss ul{display:flex;flex-direction:column;gap:7px}
.fuss a{text-decoration:none;display:inline-block;padding-block:4px}
.fuss a:hover{color:#fff}
/* Notfall-Bereitschaft im Fuß. Gelb wie in der Kopfleiste, damit klar ist:
   das ist die Ausnahme für Havarien, nicht die normale Erreichbarkeit. */
.fuss .notfall{display:flex;align-items:center;gap:8px;color:var(--signal);font-weight:600}

.fuss-logo{background:#fff;border-radius:var(--radius);padding:12px 14px;display:inline-block;margin-bottom:var(--s3)}
.fuss-logo img{width:150px}
.fuss-schluss{
  border-top:1px solid var(--asphalt-rand);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;font-size:.85rem;color:var(--stahl-300);
}
.fuss-schluss ul{flex-direction:row;gap:var(--s3);flex-wrap:wrap}
.fuss-schluss a{padding-block:5px}

/* ============ 18 · MOBILE HANDLUNGSLEISTE ============ */
.mobil-tat{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--asphalt-rand);border-top:1px solid var(--asphalt-rand);
  transform:translateY(110%);transition:transform var(--tempo);
}
.mobil-tat.sichtbar{transform:none}
.mobil-tat a{
  display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;
  text-decoration:none;font-family:'Barlow',sans-serif;font-weight:700;font-size:.98rem;
}
.mobil-tat .anruf{background:var(--asphalt);color:#fff}
.mobil-tat .mail{background:var(--rot);color:#fff}
body.hat-leiste{padding-bottom:56px}

/* ============ 19 · HALTEPUNKTE ============ */
@media (min-width:600px){
  .leiste .ab-mittel{display:flex}
  .leiste ul:first-child{display:flex}
  .leiste ul:last-child{flex:0 1 auto;justify-content:flex-end;gap:var(--s3)}
  .vertrauen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vertrauen li:nth-child(odd){border-right:1px solid rgba(255,255,255,.18)}
  .vertrauen li:nth-last-child(-n+2){border-bottom:0}
  .hero-bild::after{background:linear-gradient(180deg,rgba(22,24,28,.92) 0%,rgba(22,24,28,.85) 46%,rgba(22,24,28,.72) 100%)}
  .kennzahlen li{padding:var(--s5) var(--s4)}
  .zert{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kontakt-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nachbarn{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px){
  :root{--rand:34px}
  .karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fazit{grid-template-columns:minmax(0,1fr) auto}
  .schlussband .huelle{grid-template-columns:minmax(0,1fr) auto}
  .fuss-raster{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
  .prosa{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8)}
  .breitbild img{aspect-ratio:auto}
}
@media (min-width:980px){
  :root{--rand:40px}
  .leiste .ab-breit{display:flex}   /* Öffnungszeiten erst hier, sonst bricht die Leiste um */
  .nav{display:block}
  .menue-knopf{display:none}
  .kopf .btn{display:inline-flex}
  .tel-kopf{display:block}
  .logo img{width:152px}

  .hero .huelle{grid-template-columns:minmax(0,1.34fr) minmax(300px,.66fr);gap:var(--s6) var(--s10);align-items:center}
  .nachweise{display:block}
  .hero-bild::after{background:linear-gradient(93deg,rgba(22,24,28,.94) 0%,rgba(22,24,28,.9) 45%,rgba(22,24,28,.66) 75%,rgba(22,24,28,.5) 100%)}
  .vertrauen{grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .vertrauen li{padding:18px 22px;border-bottom:0;border-right:1px solid rgba(255,255,255,.18)}
  .vertrauen li:nth-child(odd){border-right:1px solid rgba(255,255,255,.18)}
  .vertrauen li:last-child{border-right:0}

  .kennzahlen ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kennzahlen li{border-bottom:0}
  .kennzahlen li:nth-child(2n){border-right:var(--linie)}
  .kennzahlen li:last-child{border-right:0}

  .kopfzeile{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s4) var(--s10);align-items:end}
  .kopfzeile .lead{padding-bottom:5px}
  .kopfzeile.mitte{grid-template-columns:minmax(0,1fr);justify-items:center}

  .karten{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 2 mal 2, keine angebrochene Reihe */
  .karten.vier{grid-template-columns:repeat(4,minmax(0,1fr))}   /* Vierergruppen ohne Rest */
  .ablauf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zert{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kontakt-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nachbarn{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mobil-tat{display:none}
  body.hat-leiste{padding-bottom:0}
}
@media (min-width:1080px){
  /* Vier Leistungen, vier Spalten: die Reihe ist immer voll und nutzt die ganze Breite */
  .karten{grid-template-columns:repeat(4,minmax(0,1fr))}
  .karten.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1200px){
  .ablauf{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1360px){
  :root{--rand:56px}
  .hero .huelle{padding-block:clamp(60px,5.4vw,84px) clamp(70px,6.5vw,96px)}
}

/* ============ 20 · BEWEGUNG SPARSAM ============ */
.auf{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .auf{opacity:1;transform:none}
}


/* ============ 20 · ABSTANDS-HELFER (bewusst ganz am Ende) ============
   Als Klassen statt style-Attribut, weil die eigene CSP mit
   style-src 'self' jedes Inline-Style verwirft. Sie stehen am Dateiende,
   damit sie die Bauteil-Regeln schlagen: gleiche Spezifitaet, also
   gewinnt die spaetere Regel. Standen sie oben, blieb .prosa-bild{margin:0}
   und .fakten{margin-top:var(--s4)} staerker und die Abstaende fehlten. */
.mt-0{margin-top:0}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)}
.mb-6{margin-bottom:var(--s6)}
.tel-hervor{color:var(--rot);font-weight:600}