/* =========================================================================
   AS-Protection – Stylesheet
   Statisch, ohne JavaScript-Abhängigkeit. Fonts lokal, Bilder als WebP.
   ========================================================================= */

/* ---------- Fonts (lokal, Inter Variable 100–900) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-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:100 900;font-display:swap;
  src:url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-italic.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:italic;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-ext-italic.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --blue:#0d3773;
  --navy:#0d2d5c;
  --ink:#1d2530;
  --ink-2:#132939;
  --text:#627084;
  --yellow:#ffed00;
  --bg:#fff;
  --bg-soft:#f9fafb;
  --bg-muted:#edf0f3;
  --line:#e6ebf1;

  --wrap:1220px;
  --pad-x:32px;
  --pad-y:80px;
  --gap:32px;
  --radius:12px;
  --radius-sm:8px;
  --shadow:rgba(13,55,115,.15) 0 4px 20px -4px;
  --shadow-hover:rgba(13,55,115,.3) 0 4px 20px -4px;

  --fs-h1:56px; --fs-h2:40px; --fs-h3:28px; --fs-h4:24px; --fs-h5:20px;
  --header-h:80px;
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-blocked:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:400;line-height:1.8;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:-1px}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.3}
h4{font-size:var(--fs-h4);line-height:1.3}
h5{font-size:var(--fs-h5);line-height:1.3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:1.25em}
strong{font-weight:600;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--yellow);color:var(--navy);padding:12px 20px;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto}
.section{padding:var(--pad-y) var(--pad-x)}
.section--flush{padding-block:50px}
.section--soft{background:var(--bg-soft)}
.section--muted{background:var(--bg-muted)}
.section--accent{background:var(--yellow)}
.section--accent h2,.section--accent p{color:var(--navy)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.stack--sm{gap:16px}
.stack--lg{gap:48px}
.center{text-align:center;align-items:center}
.measure{max-width:768px}
.center .measure{margin-inline:auto}

/* Dunkle Sektionen */
.section--dark{background:var(--ink-2);color:rgba(255,255,255,.75)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark a{color:#fff}
.section--dark .card{background:rgba(255,255,255,.05);box-shadow:none}
.section--dark .card--bordered{border:1px solid rgba(255,255,255,.1)}
.section--dark .card__icon{background:rgba(236,166,16,.2)}
.section--dark .card__icon svg{stroke:var(--yellow)}
.section--dark .card__meta{color:rgba(255,255,255,.6)}
.section--dark .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.section--dark .chip span{color:#fff}
.section--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.1)}

/* Spalten-Utilities (Desktop / Tablet / Mobil) */
.cols{display:flex;flex-wrap:wrap;gap:var(--gap)}
.cols>*{min-width:0}
.cols--4>*{width:calc((100% - 96px)/4)}
.cols--3>*{width:calc((100% - 64px)/3)}
.cols--2>*{width:calc(50% - 16px)}
.split{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.split>*{flex:1 1 400px;min-width:0}

/* ---------- Header ---------- */
.topbar{background:var(--ink-2);padding:8px var(--pad-x)}
.topbar .wrap{display:flex;justify-content:center}
.topbar a{color:#fff;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}

.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,252,.66);
  -webkit-backdrop-filter:blur(20px) saturate(222%);
  backdrop-filter:blur(20px) saturate(222%);
  box-shadow:0 2px 10px 0 rgba(0,0,0,.07);
  padding:0 var(--pad-x);
}
.masthead .wrap{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.brand{flex:0 0 auto}
.brand img{width:200px;height:auto}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;
  transition:color .15s ease,background-color .15s ease;
}
.nav a:hover,.nav a[aria-current=page]{color:var(--blue);background:rgba(13,58,115,.07)}
.nav .has-sub{position:relative}
.nav .has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.nav .sub{
  position:absolute;left:0;top:100%;min-width:260px;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.nav .has-sub:hover>.sub,.nav .has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* CSS-only Mobilmenü (Checkbox-Schalter, kein JavaScript) */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-toggle-label{display:none;flex:0 0 auto;margin-left:auto;padding:10px;cursor:pointer;border-radius:var(--radius-sm)}
.nav-toggle-label span,.nav-toggle-label span::before,.nav-toggle-label span::after{
  display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle-label span{position:relative}
.nav-toggle-label span::before,.nav-toggle-label span::after{content:"";position:absolute;left:0}
.nav-toggle-label span::before{top:-7px}
.nav-toggle-label span::after{top:7px}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:100vh;display:flex;align-items:center;
  padding:120px var(--pad-x) 80px;
  background-color:var(--navy);background-position:center;background-size:cover;background-repeat:no-repeat;
  color:rgba(255,255,255,.8);
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);opacity:.72}
.hero h1,.hero h2{color:#fff}
.hero--short{min-height:auto;padding-top:160px;padding-bottom:80px}
.hero__inner{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero .lead{font-size:20px;line-height:1.6;letter-spacing:-.5px;max-width:768px}

/* Hero-Bilder je Seite */
.hero--home{background-image:url(/img/hero-index.webp);background-position:90% center}
.hero--ueber-uns{background-image:url(/img/hero-ueber-uns.webp)}
.hero--kontakt{background-image:url(/img/hero-kontakt.webp)}
.hero--qualitaetspolitik{background-image:url(/img/hero-qualitaetspolitik.webp)}
.hero--alltagsbegleitung{background-image:url(/img/hero-alltagsbegleitung.webp)}
.hero--deeskalationsmanagement{background-image:url(/img/hero-deeskalationsmanagement.webp)}
.hero--baustellenueberwachung{background-image:url(/img/hero-baustellenueberwachung.webp)}
.hero--citystreife{background-image:url(/img/hero-citystreife.webp)}
.hero--detektei-observationen{background-image:url(/img/hero-detektei-observationen.webp)}
.hero--empfangs-pfortendienst{background-image:url(/img/hero-empfangs-pfortendienst.webp)}
.hero--leistungen{background-image:url(/img/slider-as-protection-baustellenueberwachung.webp)}
.hero--objektschutz-bewachung{background-image:url(/img/hero-objektschutz-bewachung.webp)}
.hero--personen-begleitschutz{background-image:url(/img/hero-personen-begleitschutz.webp)}
.hero--veranstaltungsschutz{background-image:url(/img/hero-veranstaltungsschutz.webp)}
.hero--werkschutz{background-image:url(/img/hero-werkschutz.webp)}

/* ---------- Chip ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;width:auto;
  padding:4px 16px;border-radius:100px;border:1px solid transparent;
  background:rgba(13,58,115,.1);font-size:14px;line-height:1.6;
}
.chip span{font-weight:600;color:var(--blue)}
.chip svg{width:16px;height:16px;fill:none;stroke:var(--yellow)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 32px;border:1px solid transparent;border-radius:var(--radius-sm);
  font-size:16px;font-weight:600;line-height:1;text-align:center;text-decoration:none;
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn--primary:hover{background:#f0df00;border-color:#f0df00}
.btn--ghost{background:transparent;border-color:rgba(13,55,115,.7);color:var(--navy)}
.btn--ghost:hover{background:rgba(13,55,115,.1)}
.btn--blue{position:relative;overflow:hidden;isolation:isolate;padding:18px 32px;border:0;color:#fff;
  background-image:linear-gradient(0deg,#1171a0,#0a557a)}
.btn--blue::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background-color .2s ease}
.btn--blue:hover::before{background:rgba(0,0,0,.1)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}

/* Glanz-Animation, respektiert reduzierte Bewegung */
.btn--shine{position:relative;overflow:hidden;isolation:isolate}
.btn--shine::after{
  content:"";position:absolute;top:-100%;left:-250%;width:250%;height:300%;pointer-events:none;
  background:linear-gradient(145deg,transparent 15%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.08) 65%,transparent 85%);
  transform:skewX(-25deg) scaleX(-1);animation:shine 5s infinite;
}
@keyframes shine{0%{left:-250%}90%,100%{left:150%}}

/* ---------- Bullet-Listen mit Häkchen ---------- */
.checklist{margin:0 0 14.4px;padding:0;list-style:none}
.checklist:last-child{margin-bottom:0}
.checklist li{position:relative;display:block;padding-left:26px}
.checklist li::before{
  content:"";position:absolute;top:.75em;left:0;width:20px;height:20px;transform:translateY(-50%);
  background-color:var(--yellow);
  -webkit-mask:url(/img/check.svg) no-repeat center/cover;
  mask:url(/img/check.svg) no-repeat center/cover;
}
.checklist li+li{margin-top:10px}
.checklist--lg li{padding-left:36px}
.checklist--lg li::before{width:24px;height:24px}
.checklist--inline li{display:inline-block;margin-top:0}
.checklist--inline li:not(:last-child){margin-right:15px}

/* ---------- Karten ---------- */
.card{
  display:flex;flex-direction:column;gap:12px;
  padding:24px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);
}
.card--bordered{border:1px solid rgba(0,0,0,.15)}
.card__icon{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;padding:12px;border-radius:var(--radius-sm);
  background:rgba(13,58,115,.1);
}
.card__icon svg{width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:2}
.card__icon--fill svg{fill:var(--blue);stroke:none}
.card__icon--round{border-radius:100px}
.card--lg .card__icon{width:56px;height:56px;padding:16px;border-radius:16px}
.card h3{margin:0;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:0}
.card__title{margin:0;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:0}
.card p{margin:0;line-height:1.6}
.card__meta{font-size:14px;line-height:1.6}
.card--row{flex-direction:row;align-items:flex-start;gap:16px}
.card--stat{align-items:flex-start}
.card--stat .card__title{font-size:28px}

/* ---------- Teaser (Leistungskacheln) ---------- */
.teaser{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);
  color:inherit;text-decoration:none;transition:box-shadow .2s ease;
}
.teaser:hover{box-shadow:var(--shadow-hover);text-decoration:none}
.teaser__img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .2s ease}
.teaser:hover .teaser__img{transform:scale(1.05)}
.teaser__body{position:relative;z-index:1;display:flex;flex-direction:row;gap:16px;padding:24px;background:#fff}
.teaser__icon{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;padding:12px;border-radius:var(--radius-sm);background:rgba(13,58,115,.1);
}
.teaser__icon svg{width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:2}
.teaser__icon--fill svg{fill:var(--blue);stroke:none}
.teaser__text{display:flex;flex-direction:column;gap:8px}
.teaser__text h3{margin:0;font-size:20px;letter-spacing:0}
.teaser__text p{margin:0;font-weight:500;line-height:1.6;color:var(--text)}
.teaser:hover .teaser__text h3{color:var(--blue)}

/* ---------- Bild mit Overlay-Box ---------- */
.figure{position:relative}
.figure img{border-radius:var(--radius)}
.overlay-box{
  position:absolute;left:-24px;bottom:-24px;width:auto;padding:24px;
  border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);
}
.overlay-box .stat{margin:0;font-size:var(--fs-h4);font-weight:700;line-height:1.1;color:var(--blue)}
.overlay-box p{margin:0;font-size:14px}

/* ---------- Prozess-Schritte ---------- */
.steps{display:flex;flex-direction:column;gap:24px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps li::before{
  counter-increment:step;content:counter(step);
  flex:0 0 auto;width:40px;height:40px;border-radius:100px;
  background:var(--blue);color:#fff;font-weight:700;text-align:center;line-height:40px;
}
.steps h3{margin:0 0 4px;font-size:20px}
.steps p{margin:0;line-height:1.6}

/* ---------- Ortsliste (Einsatzgebiet) ---------- */
.pins{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;list-style:none}
.pins li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-radius:var(--radius-sm);background:rgba(13,58,115,.025);line-height:1.2;
}
.pins .pin-name{font-weight:500;color:var(--ink)}
.pins .pin-time{font-size:14px;color:var(--text)}
.footnote{font-size:14px;line-height:1.6}

/* ---------- Google-Bewertung ---------- */
.rating{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.rating:hover{text-decoration:none}
.rating__logo{width:100px;height:auto;flex:0 0 auto}
.rating__body{display:flex;flex-direction:column;gap:4px}
.rating__row{display:flex;flex-direction:row;align-items:center;gap:4px}
.rating__stars{width:68px;height:auto}
.rating__score{font-size:14px;font-weight:500;line-height:1.2}
.rating__label{font-size:14px;font-weight:500;line-height:1.2;opacity:.85}

/* ---------- Logo-Laufband (CSS-only, kein JavaScript) ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:64px;align-items:center;animation:marquee 45s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee img{width:auto;height:60px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .2s ease,opacity .2s ease}
.marquee img:hover{filter:none;opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Formular ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.form .field{display:flex;flex-direction:column;gap:6px}
.form label{font-size:14px;font-weight:600;color:var(--ink)}
.form input,.form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:16px;color:var(--ink);background:#fff;
}
.form input:focus,.form textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(13,55,115,.12)}
.form textarea{min-height:140px;resize:vertical}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}
.form .consent input{width:auto;flex:0 0 auto;margin-top:4px}
.form .btn{align-self:flex-start}

/* ---------- Footer ---------- */
.footer-cta{background:var(--navy);color:rgba(255,255,255,.75);padding:var(--pad-y) var(--pad-x)}
.footer-cta h2,.footer-cta h3{color:#fff}
.footer-cta .card{background:rgba(255,255,255,.05);box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.footer-cta .card__icon{background:rgba(236,166,16,.2)}
.footer-cta .card__icon svg{stroke:var(--yellow)}
.footer-cta .card__title{color:#fff;font-size:18px}
.footer-cta .card__meta{color:rgba(255,255,255,.6)}
.footer-cta .card a{color:#fff}
.footer-cta .box{padding:24px;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.footer-cta .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.footer-cta .chip span{color:#fff}

.site-footer{
  background:linear-gradient(90deg,#0e1f2b 0%,var(--ink-2) 100%);
  color:rgba(255,255,255,.65);padding:var(--pad-y) var(--pad-x);
}
.site-footer h2{color:#fff;font-size:18px;font-weight:600;letter-spacing:0;margin-bottom:16px}
.site-footer a{color:rgba(255,255,255,.65);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer li{display:flex;align-items:center;gap:10px}
.site-footer li svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--yellow);stroke-width:2}
.site-footer hr{border-top:1px solid rgba(255,255,255,.12);margin:48px 0 24px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px}
.footer-bottom p{margin:0}
.lang-switch{display:flex;gap:8px;align-items:center}
.lang-switch a[aria-current]{color:#fff;font-weight:600}

/* ---------- Rechtstexte / Fließtext ---------- */
.prose{max-width:none}
.prose h2{font-size:28px;margin-top:1.5em}
.prose h3{font-size:22px;margin-top:1.5em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.4em}
.prose table{width:100%;border-collapse:collapse;margin:1em 0}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose-scroll{overflow-x:auto}

/* ---------- 404 ---------- */
.error-page{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--pad-y) var(--pad-x)}
.error-page .code{font-size:96px;font-weight:700;line-height:1;color:var(--blue);margin:0 0 8px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  :root{--fs-h1:44px;--fs-h2:34px;--fs-h3:26px}
  .brand img{width:170px}
  .nav a{padding:10px 8px;font-size:14px}
}
@media (max-width:1024px){
  .cols--4>*,.cols--3>*{width:calc(50% - 16px)}
  .hide-tablet{display:none!important}

  /* Navigation klappt in ein CSS-only Panel */
  .nav-toggle-label{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 0;margin:0;
    display:block;overflow-y:auto;
    padding:24px var(--pad-x) 48px;
    background:#fff;
    transform:translateX(100%);visibility:hidden;
    transition:transform .25s ease,visibility .25s;
  }
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a{padding:14px 12px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .nav .has-sub>a::after{display:none}
  .nav .sub{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:0 0 0 16px;min-width:0}
  .nav .sub a{font-size:15px;color:var(--text)}
  .nav-toggle:checked~.nav{transform:none;visibility:visible}
  .nav-toggle:checked~.nav-toggle-label span{background:transparent}
  .nav-toggle:checked~.nav-toggle-label span::before{transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked~.nav-toggle-label span::after{transform:translateY(-7px) rotate(-45deg)}
  .header-actions{display:none}
}
@media (max-width:767px){
  :root{--fs-h1:34px;--fs-h2:28px;--fs-h3:22px;--fs-h4:20px;--pad-x:16px;--pad-y:40px;--gap:16px;--header-h:60px}
  .cols--4>*,.cols--3>*,.cols--2>*{width:100%}
  .cols--2.cols--keep>*{width:calc(50% - 8px)}
  .split{gap:32px}
  .hero{min-height:auto;padding-top:100px;padding-bottom:60px}
  .hero--short{padding-top:100px}
  .hero .lead{font-size:18px}
  .overlay-box{left:-16px;bottom:-16px;padding:16px}
  .pins{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .marquee img{height:44px}
  .hide-mobile{display:none!important}
  .error-page .code{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-blocked:auto!important}
  .marquee__track{animation:none}
}
@media print{
  .masthead,.topbar,.footer-cta,.marquee,.nav-toggle-label{display:none}
  body{color:#000}
}

/* Erste Sektion ohne Hero braucht Abstand unter den festen Kopf */
.section--first{padding-top:160px}
@media (max-width:767px){.section--first{padding-top:100px}}
.shd{box-shadow:var(--shadow);border-radius:var(--radius)}
.box{padding:24px;border-radius:var(--radius);background:var(--bg-soft)}

/* =========================================================================
   Layout-Utilities (entsprechen den Flex-Einstellungen des Originals)
   ========================================================================= */
.group{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gap)}
.row>*{min-width:0}
.col-reverse{display:flex;flex-direction:column-reverse;gap:var(--gap)}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.text-center{text-align:center}
.text-center .chip,.text-center .btn-row{justify-content:center}
.text-center .checklist{display:inline-block;text-align:left}
.w-75{width:calc(75% - var(--gap)/2)}
.w-25{width:calc(25% - var(--gap)/2)}
.w-50{width:calc(50% - var(--gap)/2)}

/* Zweispaltige Abschnitte: Kinder teilen sich die Breite */
.row>.group,.row>.stack{flex:1 1 380px}
.wrap.row{display:flex;flex-direction:row;flex-wrap:wrap;gap:32px;align-items:center}
.wrap.row>*{flex:1 1 380px}

/* Bild mit Overlay-Box braucht einen Bezugspunkt */
.has-overlay{position:relative}
.has-overlay>img{border-radius:var(--radius);width:100%}

/* Icons: nie größer als ihr Kasten */
svg{max-width:100%}
.topbar svg,.site-footer li svg{width:16px;height:16px;flex:0 0 auto}
.chip svg{width:16px;height:16px;flex:0 0 auto}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.card__icon svg,.teaser__icon svg{width:24px;height:24px}
.rating__logo{width:32px;height:32px;flex:0 0 auto}

/* Akzentfarbe in Überschriften (wie im Original) */
.accent-col{color:var(--yellow)}
.blue-col{color:var(--blue)}

/* Logo-Laufband: Größe und Farbigkeit wie im Original */
.marquee__track{gap:48px}
.marquee img{height:auto;width:152px;max-width:none;filter:none;opacity:1}

/* Hero: Textbreite begrenzen, Inhalte linksbündig stapeln */
.hero__inner{max-width:820px;gap:24px}
.hero__inner>p{max-width:720px}
.hero .btn-row{gap:16px}
.hero hr{width:100%;max-width:560px;border-color:rgba(255,255,255,.25)}
.hero .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.hero .chip span{color:#fff}
.hero .chip svg{stroke:var(--yellow)}
.hero .checklist li::before{background-color:var(--yellow)}
.hero .rating__label,.hero .rating__score{color:#fff}

/* Gelber Aktionsstreifen: zweispaltig wie im Original */
.section--accent .row{align-items:center;justify-content:space-between}
.section--accent .btn--ghost{border-color:rgba(13,45,92,.5);color:var(--navy)}

@media (max-width:900px){
  .wrap.row,.row{gap:32px}
  .w-75,.w-25,.w-50{width:100%}
}
@media (max-width:767px){
  .row,.wrap.row{flex-direction:column;align-items:stretch}
  .hero__inner{max-width:100%}
  .marquee img{width:120px}
}

/* ---------- Feinabgleich gegen das Original ---------- */
/* Überschrift nutzt die volle Spaltenbreite, nur der Fließtext wird begrenzt */
.hero__inner{max-width:none}
.hero__inner>h1{max-width:none}
.hero__inner>p{max-width:620px}

/* Buttons: Maße des Originals */
.btn{font-size:18px;padding:17px 32px}
.hero .btn--ghost,.footer-cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.1)}

/* Chip: Höhe und Icon-Darstellung wie im Original */
.chip{padding:4px 16px}
.chip svg,.chip svg *{fill:none;stroke:var(--yellow)}

/* Google-Bewertung: Wortmarke statt Quadrat */
.rating__logo{width:100px;height:auto}
.rating__stars img{width:auto;height:16px}

/* Trennlinie im Hero über die volle Breite */
.hero hr{width:100%;max-width:none;margin:8px 0}
.btn-row--center{justify-content:center}

/* ---------- Abgleich unterer Seitenbereich ---------- */
/* Chip darf nie über die volle Breite laufen */
.chip{align-self:flex-start}
.text-center>.chip,.text-center .chip{align-self:center}

/* Zentrierte Karten (Kennzahlen) */
.card--center{align-items:center;text-align:center}
.card--center .card__icon{border-radius:100px}

/* Overlay-Box am Bild: gelb wie im Original */
.overlay-box{background:var(--yellow);box-shadow:none}
.overlay-box>*,.overlay-box p,.overlay-box .stat{color:var(--navy)}
.overlay-box .stat,.overlay-box h4{margin:0;font-size:20px;font-weight:700;color:var(--navy)}

/* Footer-Kontaktkarten: linksbündig, Werte in Signalgelb */
.footer-cta .wrap.center .card{text-align:left;align-items:flex-start}
.footer-cta .card__title{font-size:16px;overflow-wrap:anywhere}
.footer-cta .card a{color:var(--yellow)}
.footer-cta .card a:hover{color:#fff}

/* Notfall-Kasten: gelb über die volle Breite */
.footer-cta .box{
  width:100%;background:var(--yellow);border:0;text-align:left;
  flex-direction:row;align-items:center;justify-content:space-between;gap:24px;
}
.footer-cta .box h3,.footer-cta .box p{color:var(--navy)}
.footer-cta .box .btn{background:var(--navy);border-color:var(--navy);color:#fff;flex:0 0 auto}
.footer-cta .box .btn:hover{background:#0a2247;border-color:#0a2247}

/* Footer-Listen: Icon und Text auf einer Zeile */
.site-footer li a{display:inline-flex;align-items:center;gap:10px}
.site-footer li{align-items:center}

@media (max-width:767px){
  .footer-cta .box{flex-direction:column;align-items:stretch}
}

/* ---------- Icon-Listen (Kontaktangaben, Aufzählungen) ---------- */
.icon-list{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-direction:column;gap:12px}
.icon-list:last-child{margin-bottom:0}
.icon-list li{display:flex;align-items:center;gap:12px}
.icon-list li a{display:inline-flex;align-items:center;gap:12px;color:inherit}
.icon-list svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--blue);stroke-width:2}
.section--dark .icon-list svg,.hero .icon-list svg{stroke:var(--yellow)}

/* Sicherheitsnetz: ein SVG ohne eigene Größe darf nie den Text sprengen */
li svg,p svg,a svg{max-width:24px;max-height:24px}
.card__icon svg,.teaser__icon svg{max-width:none;max-height:none}

/* Das ausgeblendete Mobilmenü darf keine Seitwärts-Scrollleiste erzeugen.
   clip statt hidden, damit position:sticky im Kopf weiter funktioniert. */
html,body{overflow-x:clip}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}

/* =========================================================================
   Abgleich gegen die gemessenen Werte des Originals
   ========================================================================= */

/* In zentrierten Spalten dürfen Blöcke nicht zusammenschrumpfen.
   (align-items:center des Elternteils sonst die Breite zieht) */
.center>.cols,.center>.box,.center>.row,.center>hr{align-self:stretch;width:100%}
.center>.chip{align-self:center}

/* Gelber Angebotsstreifen: Text ~73 %, Buttons ~24 % und untereinander */
.section--accent .wrap.row{align-items:center;gap:32px;flex-wrap:nowrap}
.section--accent .wrap.row>*:first-child{flex:1 1 auto;min-width:0}
.section--accent .wrap.row>*:last-child{flex:0 0 305px}
.section--accent .btn-row{flex-direction:column;width:100%;gap:16px}
.section--accent .btn{width:100%}

/* Notfall-Kasten: untereinander, linksbündig - wie im Original */
.footer-cta .box{
  flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:12px;text-align:left;
}
.footer-cta .box .btn{margin-top:12px}

/* Footer-Kontaktkarten: Label fett, Wert in Signalgelb, Zusatz gedämpft */
.card__label{margin:0;font-size:16px;font-weight:700;line-height:1.4}
.card__value{margin:0;font-size:16px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.card__meta{font-size:16px;font-weight:400;line-height:1.6}
.footer-cta .card__label{color:#fff}
.footer-cta .card__value a{color:var(--yellow)}
.footer-cta .card__value a:hover{color:#fff}
.footer-cta .card__meta{color:rgba(255,255,255,.6)}

@media (max-width:900px){
  .section--accent .wrap.row{flex-wrap:wrap}
  .section--accent .wrap.row>*:last-child{flex:1 1 100%}
}

/* ---------- Typografie-Varianten aus dem Original (pro Element gesetzt) ---------- */
.fs-14{font-size:14px;line-height:1.6}
.fs-20{font-size:20px}
.fs-24{font-size:24px}
.fs-28{font-size:28px}
.fs-32{font-size:32px}
.fs-20-bold{font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.5px}
.fs-28-bold{font-size:28px;font-weight:700;line-height:1.6;letter-spacing:-.5px}

/* Gelber Streifen: Abstand zwischen Überschrift und Text wie im Original */
.section--accent .wrap.row>*:first-child{gap:6px}


/* =========================================================================
   Symbole, dunkle Flächen, Overlay
   ========================================================================= */

/* Font-Awesome-Symbole sind Flächen, keine Striche */
.card__icon--filled svg,.teaser__icon--fill svg{fill:currentColor;stroke:none}
.card__icon--filled svg *,.teaser__icon--fill svg *{fill:currentColor;stroke:none}

/* Dunkle Abschnitte: gelber Symbolkreis, dunkles Symbol, weiße Titel */
.section--dark .card__icon,.on-dark .card__icon{background:var(--yellow);color:var(--navy)}
.section--dark .card__icon svg,.on-dark .card__icon svg{stroke:var(--navy)}
.section--dark .card__icon--filled svg,.on-dark .card__icon--filled svg{fill:var(--navy);stroke:none}
.section--dark .card__title,.section--dark .card__label,
.on-dark .card__title,.on-dark .card__label{color:#fff}
.section--dark .card p,.on-dark .card p{color:rgba(255,255,255,.6)}
.section--dark .card__meta,.on-dark .card__meta{color:rgba(255,255,255,.6)}

/* Im Footer bleibt der Symbolkreis gedämpft, wie im Original */
.footer-cta .card__icon{background:rgba(236,166,16,.2);color:var(--yellow)}
.footer-cta .card__icon svg{stroke:var(--yellow)}
.footer-cta .card__icon--filled svg{fill:var(--yellow);stroke:none}

/* Auf dunklem Grund verschachtelte Container aufhellen */
.on-dark{color:rgba(255,255,255,.75)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}

/* Overlay-Box: Farbe kommt aus der erzeugten bg-Klasse des Originals */
.overlay-box{background:none;box-shadow:var(--shadow);border-radius:var(--radius)}
.overlay-box .card__title,.overlay-box p{color:var(--ink)}
.overlay-box .card__meta{color:var(--text)}
.bg-ffed00.overlay-box .card__title,.bg-ffed00.overlay-box p{color:var(--navy)}
/* Zentrierte Abschnitte: nur die direkten Kinder mittig setzen.
   Karten- und Spaltenraster behalten ihre eigene Ausrichtung. */
.center-children>*{text-align:center}
.center-children>.cols,.center-children>.row,.center-children>.split,
.center-children>.group{text-align:left}
.center-children>.chip{align-self:center}
.center-children>p,.center-children>.measure{margin-inline:auto}
.center-children>.btn-row{justify-content:center}
.text-center{text-align:center}
.text-center>.chip{align-self:center}

.chip{text-align:left}

/* =========================================================================
   Feinabgleich (steht bewusst zuletzt und gewinnt gegen die Basisregeln)
   ========================================================================= */

/* Kartentitel: Größe kommt aus der Token-Klasse, fett erzwingt das Theme */
.card__title{font-weight:700;line-height:1.2;color:var(--ink)}

.section--dark .card .card__title,.section--dark .card--center .card__title,
.on-dark .card .card__title{color:#fff}
.card__text{margin:0;line-height:1.6;color:var(--text)}
.section--dark .card__text,.on-dark .card__text{color:rgba(255,255,255,.6)}

/* Prozess-Schritte: 16px fett wie im Original */
.steps h3{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 4px}
.steps p{font-size:16px;color:var(--text)}

/* Overlay-Box am Bild */
.overlay-box .card{background:none;box-shadow:none;padding:0;border:0}
.overlay-box .card__title{font-size:16px;font-weight:700;color:var(--ink)}
.overlay-box .card__text,.overlay-box .card__meta{font-size:14px;color:var(--text)}
.bg-ffed00.overlay-box .card__title,.bg-ffed00.overlay-box .card__text{color:var(--navy)}

/* Notruf-Button: roter Verlauf wie im Original */
.btn--emergency{
  border:0;color:#fff;
  background-image:linear-gradient(90deg,#e10000,#cc0000);
}
.btn--emergency:hover{background-image:none;background-color:#cc0000;color:#fff}

/* Bewertungsblock in der ersten Footer-Spalte */
.site-footer h2.mt{margin-top:28px}
.site-footer .rating{color:rgba(255,255,255,.75)}
.site-footer .rating:hover{color:#fff}
.site-footer .rating__label{opacity:.75}

/* Ortskacheln: Symbol vor dem Ortsnamen, wie im Original */
.pins li{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:16px;
  border-radius:var(--radius-sm);background:rgba(13,58,115,.025);line-height:1.2}
.pin-icon{display:inline-flex;flex:0 0 auto}
.pin-icon svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2}
.pins .pin-name{font-weight:500;color:var(--ink)}
.pins .pin-time{margin-left:auto;font-size:14px;color:var(--text)}

/* Symbol neben dem Text (elementor-position-inline-start) */
.card--row{flex-direction:row;align-items:flex-start;gap:16px}
.card--row .card__icon{flex:0 0 auto}
.card--row>.card__title,.card--row>.card__text{flex:1 1 auto}
.card--row{flex-wrap:wrap}
.card--row .card__title{width:calc(100% - 64px)}
.card--row .card__text{width:calc(100% - 64px);margin-left:64px;margin-top:-4px}

/* Overlay-Box: nur so breit wie ihr Inhalt, wie im Original */
.overlay-box{width:max-content;max-width:calc(100% - 48px)}
.overlay-box .card--row{align-items:center}
/* Das Child-Theme erzwingt fette Kartentitel, unabhängig vom Typografie-Token.
   Höhere Spezifität als die erzeugten Klassen — die Schriftgröße bleibt bei ihnen. */
.card .card__title{font-weight:700;line-height:1.2}
.overlay-box .card .card__title{font-weight:700}
/* Auf 768px begrenzter Fließtext (bx-txt im Original) */
.measure{max-width:768px}
.center-children>.measure{margin-inline:auto}
/* Fließtext-Seiten brauchen weiterhin Abstände um die Überschriften */
.prose h2,.prose h3,.prose h4{margin:1.5em 0 .5em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
/* ---- Lesbarkeit auf dunklem Grund ---- */
/* Fett ausgezeichnete Stellen dürfen nicht in Dunkelblau auf dem Bild stehen */
.hero strong,.hero b,
.section--dark strong,.section--dark b,
.on-dark strong,.on-dark b,
.footer-cta strong,.footer-cta b{color:#fff}

/* Bildüberlagerung im Hero kräftiger, damit der Text sicher lesbar bleibt */
.hero::before{opacity:.85}

/* ---- Overlay-Box am Bild: Symbol links, Titel und Zusatz rechts darunter ---- */
.card--row .card__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.overlay-box .card--row{flex-wrap:nowrap;align-items:center;gap:16px}
.overlay-box .card--row .card__title,
.overlay-box .card--row .card__text{width:auto;margin-left:0}
/* Navigation: Einträge immer linksbündig, auch im Untermenü */
.nav a,.nav .sub a{text-align:left}
.nav ul,.nav .sub{text-align:left}
/* Untermenü stapelt und füllt die Breite, statt die Einträge zu zentrieren */
.nav .sub{align-items:stretch}
.nav .sub li{width:100%}
.nav .sub a{display:block;width:100%}
/* Rechtstexte: Maße aus dem Original */
.prose h2{font-size:32px;line-height:1.2;margin:32px 0 16px}
.prose h3{font-size:22.4px;line-height:1.3;margin:24px 0 16px}
.prose h4{font-size:20px;margin:24px 0 12px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:14.4px}
/* Cookie-Richtlinie: eigener Dokumentcontainer mit eigener Typografie */
.prose--doc{max-width:800px;font-size:14px}
.prose--doc p,.prose--doc li{font-size:14px}
.prose--doc h2,.prose--doc h3{font-size:22px;line-height:1.3;margin:15px 0 10px}
.prose--doc h4,.prose--doc h5,.prose--doc h6{font-size:16px;margin:15px 0 10px}
.prose--doc ul,.prose--doc ol{padding-left:35px}
/* Rechtstexte: Zwischenüberschriften wie im Original */
.prose h4{font-size:19.2px}

/* Cookie-Richtlinie: Beschriftungen der Schalter sind im Original nur für
   Screenreader da und optisch ausgeblendet */
.cmplz_consent_per_service_label,
.cmplz-consent-per-service-label{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* =========================================================================
   Abstände, Zentrierung, Einblend-Animation
   ========================================================================= */

/* Die aus dem Original übernommenen Abstände wirken nur in Flex-Containern */
.gap-0,.gap-6,.gap-16,.gap-18,.gap-24,.gap-32,.gap-48,.gap-64{
  display:flex;flex-direction:column;
}
.row[class*="gap-"]{flex-direction:row;flex-wrap:wrap}
.cols[class*="gap-"]{flex-direction:row;flex-wrap:wrap}
.chip[class*="gap-"]{display:inline-flex;flex-direction:row}
.icon-list[class*="gap-"],.pins[class*="gap-"]{display:flex}

/* Begrenzter Fließtext in zentrierten Abschnitten mittig stellen */
.text-center>.measure,.text-center .measure{margin-inline:auto}

/* ---- Sanftes Einblenden von unten (ohne JavaScript) ----
   Grundfall: alles blendet beim Laden ein - das können alle Browser.
   Wo der Browser Scroll-Timelines beherrscht, wird daraus ein Einblenden
   beim Hereinscrollen. Bei "Bewegung reduzieren" entfällt der Effekt. */
@keyframes fade-up{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:no-preference){

  /* Hero: gestaffelt beim Laden */
  .hero__inner>*{animation:fade-up .7s cubic-bezier(.22,.61,.36,1) both}
  .hero__inner>*:nth-child(1){animation-delay:.05s}
  .hero__inner>*:nth-child(2){animation-delay:.14s}
  .hero__inner>*:nth-child(3){animation-delay:.22s}
  .hero__inner>*:nth-child(4){animation-delay:.30s}
  .hero__inner>*:nth-child(5){animation-delay:.36s}
  .hero__inner>*:nth-child(6){animation-delay:.42s}
  .hero__inner>*:nth-child(n+7){animation-delay:.48s}

  /* Übriger Inhalt: Grundfall Einblenden beim Laden */
  main section:not(.hero) h2,
  main section:not(.hero) .chip,
  main section:not(.hero) .card,
  main section:not(.hero) .teaser,
  main section:not(.hero) .figure,
  main section:not(.hero) .overlay-box,
  main section:not(.hero) .steps li{
    animation:fade-up .8s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:.15s;
  }

  /* Moderne Browser: stattdessen beim Hereinscrollen */
  @supports (animation-timeline:view()){
    main section:not(.hero) h2,
    main section:not(.hero) .chip,
    main section:not(.hero) .card,
    main section:not(.hero) .teaser,
    main section:not(.hero) .figure,
    main section:not(.hero) .overlay-box,
    main section:not(.hero) .steps li{
      animation-delay:0s;
      animation-timeline:view();
      animation-range:entry 0% cover 28%;
    }
  }
}
/* Leistungskacheln: Strich-Symbole, sofern das Original sie nicht als Fläche markiert */
.teaser__icon svg,.teaser__icon svg *{fill:none;stroke:var(--blue)}
.teaser__icon--fill svg,.teaser__icon--fill svg *{fill:var(--blue);stroke:none}
/* Topbar: Telefonangabe links, Sprachumschalter rechts */
.topbar .wrap{justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.topbar__phone{display:inline-flex;align-items:center;gap:8px}
.lang-switch--top{margin:0;display:flex;align-items:center;gap:8px;font-size:14px}
.lang-switch--top a{color:rgba(255,255,255,.7);font-weight:500}
.lang-switch--top a:hover{color:#fff}
.lang-switch--top a[aria-current]{color:#fff;font-weight:600}
.lang-switch--top span{color:rgba(255,255,255,.4)}
@media (max-width:520px){
  .topbar .wrap{justify-content:center;gap:4px 16px}
  .topbar__phone span{font-size:13px}
}

/* AUTO-TYPO-START  (aus den Elementor-Tokens erzeugt, nicht von Hand ändern) */
.gap-0{gap:0px}
.gap-6{gap:6px}
.gap-16{gap:16px}
.gap-18{gap:18px}
.gap-24{gap:24px}
.gap-64{gap:64px}
.bg-0d2d5c{background-color:#0D2D5C}
.bg-0d3773{background-color:#0D3773}
.bg-edf0f3{background-color:#EDF0F3}
.bg-f9fafb{background-color:#F9FAFB}
.bg-ffed00{background-color:#FFED00}
.bg-ffffff{background-color:#FFFFFF}
.fg-0d2d5c,.fg-0d2d5c p,.fg-0d2d5c li,.fg-0d2d5c h1,.fg-0d2d5c h2,.fg-0d2d5c h3,.fg-0d2d5c h4{color:#0D2D5C}
.fg-0d3773,.fg-0d3773 p,.fg-0d3773 li,.fg-0d3773 h1,.fg-0d3773 h2,.fg-0d3773 h3,.fg-0d3773 h4{color:#0D3773}
.fg-1d2530,.fg-1d2530 p,.fg-1d2530 li,.fg-1d2530 h1,.fg-1d2530 h2,.fg-1d2530 h3,.fg-1d2530 h4{color:#1D2530}
.fg-ffffff,.fg-ffffff p,.fg-ffffff li,.fg-ffffff h1,.fg-ffffff h2,.fg-ffffff h3,.fg-ffffff h4{color:#FFFFFF}
.t-7df1b9b,.t-7df1b9b p,.t-7df1b9b li{font-size:14px;line-height:1.8em}
.t-82b45ee,.t-82b45ee p,.t-82b45ee li{font-size:18px;line-height:1.6em;letter-spacing:-0.5px}
.t-ba8c901,.t-ba8c901 p,.t-ba8c901 li{font-size:14px;line-height:1.6em}
.t-bbcd583,.t-bbcd583 p,.t-bbcd583 li{font-size:20px;font-weight:400;line-height:1.6em;letter-spacing:-0.5px}
/* AUTO-TYPO-END */

/* =========================================================================
   BEWEGUNG  —  greift ausschliesslich, wenn /js/app.js laeuft (html.js-anim).
   Ohne JavaScript bleibt die Seite genau so, wie sie vorher war.
   ========================================================================= */

/* ---------- 1. Einblenden beim Hereinscrollen ---------- */
html.js-anim .js-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
}
html.js-anim .js-reveal.is-in{opacity:1;transform:none}
html.js-anim .js-d1.is-in{transition-delay:.08s}
html.js-anim .js-d2.is-in{transition-delay:.16s}
html.js-anim .js-d3.is-in{transition-delay:.24s}
html.js-anim .js-d4.is-in{transition-delay:.32s}
html.js-anim .js-d5.is-in{transition-delay:.40s}

/* Die bisherige CSS-only Einblendung abschalten, damit sich nichts ueberlagert */
html.js-anim main section:not(.hero) h2,
html.js-anim main section:not(.hero) .chip,
html.js-anim main section:not(.hero) .card,
html.js-anim main section:not(.hero) .teaser,
html.js-anim main section:not(.hero) .figure,
html.js-anim main section:not(.hero) .overlay-box,
html.js-anim main section:not(.hero) .steps li{
  animation:none;
}

/* ---------- 2. Parallaxe im Kopfbereich ---------- */
/* Das Hintergrundbild liegt als eigene Ebene mit Ueberstand hinter dem Hero
   und wird beim Scrollen verschoben. Es erbt das Motiv der Sektion, die
   Seitenzuordnung (.hero--home usw.) bleibt also unveraendert. */
html.js-anim .hero{overflow:hidden}
html.js-anim .hero::after{
  content:"";
  position:absolute;left:0;right:0;top:-30px;height:calc(100% + 30px);z-index:-2;
  background-image:inherit;
  background-position:inherit;
  background-size:cover;
  background-repeat:no-repeat;
  transform:translate3d(0,min(var(--parallax,0px),30px),0);
  will-change:transform;
}

/* Auf Telefonen ohne Parallaxe: ruhiger und schont den Akku */
@media (max-width:767px){
  html.js-anim .hero::after{display:none}
}

/* Sicherheitsnetz: wer Bewegung reduziert, sieht nichts davon */
@media (prefers-reduced-motion:reduce){
  html.js-anim .js-reveal{opacity:1;transform:none;transition:none}
  html.js-anim .hero::after{display:none}
}

/* =========================================================================
   Uebernahme aus der dunklen Fassung — bewusst nur diese drei Punkte:
   breiteres Raster, kraeftigere Ueberschriften, abgerundete Labels.
   ========================================================================= */

/* 1. Breiteres Raster */
:root{--wrap:1360px}

/* 2. Ueberschriften etwas kraeftiger, Laufweite proportional statt fix */
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.02em}

/* 3. Labels ueber den Ueberschriften: abgerundet statt Pillenform */
.chip{border-radius:8px}

/* =========================================================================
   Kontaktseite: Verhaeltnis Text / Formular
   Text bekommt den groesseren Teil, das Formular wird kompakt und
   bekommt nur noch einen Rahmen statt Karte-in-Karte.
   ========================================================================= */
.contact-split{align-items:flex-start;gap:56px}
.contact-split>*:first-child{flex:1 1 540px}

.contact-split>.contact-form{flex:0 1 480px}
.contact-form{
  padding:32px;
  border-radius:var(--radius);
  background:#fff;
}
.contact-form>h2{margin:0 0 22px;font-size:24px;line-height:1.25}

/* innere Karte aufloesen: kein zweiter Rahmen, kein doppelter Innenabstand */
.contact-form>.card{padding:0;gap:0;background:none;box-shadow:none;border:0;border-radius:0}

/* Felder etwas kompakter */
.contact-form .form{gap:14px}
.contact-form .form .field{gap:5px}
.contact-form .form input,
.contact-form .form textarea{padding:12px 14px;font-size:16px}
.contact-form .form textarea{min-height:118px}
.contact-form .form .consent{margin-top:2px;font-size:13px}
.contact-form .form .btn{width:100%;padding:15px 24px}

@media (max-width:900px){
  .contact-split{gap:40px}
  .contact-split>*:first-child,.contact-form{flex:1 1 100%}
}
@media (max-width:767px){
  .contact-form{padding:22px}
}

/* =========================================================================
   Laufweite und Schriftstaerke aus der dunklen Fassung — Farben bleiben.
   ========================================================================= */

/* Labels ueber den Ueberschriften: gesperrte Versalien */
.chip span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* Titel der Leistungskacheln: gesperrte Versalien */
.teaser__text h3{
  font-size:18px;font-weight:700;line-height:1.15;
  text-transform:uppercase;letter-spacing:.015em;
}

/* Kraeftigere Schrift im Kopfmenue */
.nav a{font-size:16px;font-weight:600}
.btn{font-weight:700}

/* Stufen des Menues wieder herstellen (stehen im Original vor dieser Zeile) */
@media (max-width:1100px){.nav a{font-size:15px}}
@media (max-width:1024px){.nav a{font-size:17px}}

/* =========================================================================
   Hero: Textspalte begrenzen wie in der dunklen Fassung,
   damit das Motiv rechts sichtbar bleibt.
   ========================================================================= */
.hero__inner{max-width:920px}
.hero__inner>h1{max-width:900px}
.hero__inner>p{max-width:820px}

/* =========================================================================
   Hero: seitlicher Verlauf statt flaechiger Abdeckung.
   Links deckend hinter dem Text, rechts gibt er das Motiv frei.
   Farbe ist unser Navy (--navy = #0d2d5c).
   ========================================================================= */
.hero::before{
  opacity:1;
  background:linear-gradient(100deg,
    #0d2d5c            0%,
    rgba(13,45,92,.95) 38%,
    rgba(13,45,92,.72) 66%,
    rgba(13,45,92,.34) 100%);
}

/* =========================================================================
   Bild neben Text: Oberkante auf Hoehe der Ueberschrift statt mittig.
   ========================================================================= */
.row>.has-overlay,.row>.figure{align-self:flex-start}

/* Wenn die Spalten untereinander stehen, muss das Bild wieder
   die volle Breite einnehmen. */
@media (max-width:767px){
  .row>.has-overlay,.row>.figure{align-self:stretch}
}

/* =========================================================================
   Leistungskacheln: gelber Streifen faehrt beim Ueberfahren
   von links nach rechts an die Unterkante.
   ========================================================================= */
.teaser{position:relative}
.teaser::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.teaser:hover::after,
.teaser:focus-visible::after{transform:scaleX(1)}

/* Bei reduzierter Bewegung erscheint der Streifen ohne Lauf */
@media (prefers-reduced-motion:reduce){
  .teaser::after{transition:none}
}

/* =========================================================================
   Notfall-Kasten: Teamfoto rechts im gelben Feld.
   ========================================================================= */
.footer-cta .box{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding-right:48%;          /* Text laeuft nicht unter das Bild */
  justify-content:center;
}
.box__team{
  position:absolute;
  right:32px;bottom:0;
  height:calc(100% - 12px);
  width:auto;max-width:none;
  pointer-events:none;
  user-select:none;
}

/* Schmalere Fenster: Bild kleiner, ab Tablet ganz weg */
@media (max-width:1100px){
  .footer-cta .box{padding-right:42%}
  .box__team{right:16px}
}
@media (max-width:900px){
  .footer-cta .box{min-height:0;padding-right:24px}
  .box__team{display:none}
}

/* Ab 1200 px waechst das Teamfoto ueber die Oberkante des gelben Kastens
   hinaus. Darunter bleibt es wie bisher innerhalb. */
@media (min-width:1200px){
  .footer-cta .box{
    overflow:visible;          /* Koepfe duerfen heraus */
    min-height:200px;
    margin-top:104px;          /* Platz nach oben, nichts wird verdeckt */
    padding-right:60%;
  }
  .box__team{
    right:24px;bottom:0;
    width:min(58%,820px);
    height:auto;
  }
}

/* =========================================================================
   Bebas Neue (SIL Open Font License), lokal als woff2.
   Vorerst nur die Ueberschriften der Startseite (<body class="bebas">).
   ========================================================================= */
@font-face{
  font-family:'Bebas Neue';
  font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/bebas-neue.woff2) format('woff2');
}

/* Bebas gibt es nur in einem Schnitt — 400 erzwingen, sonst rechnet der
   Browser eine unsaubere Kunst-Fettung. Die Schrift laeuft schmal und hoch,
   deshalb groesser, enger im Zeilenabstand und leicht gesperrt. */
.bebas h1,
.bebas h2{
  font-family:'Bebas Neue',Inter,system-ui,sans-serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:.012em;
}
.bebas h1{font-size:calc(var(--fs-h1) * 1.22)}
.bebas h2{font-size:calc(var(--fs-h2) * 1.22)}

/* Die Spaltenueberschriften im Fussbereich sind kleine Beschriftungen,
   keine Abschnittsueberschriften — sie duerfen nicht mitwachsen. */
.bebas .site-footer h2{
  font-size:21px;
  line-height:1.2;
  letter-spacing:.04em;
  margin-bottom:16px;
}

/* Ueberschriften mit eigener, kleinerer Groesse duerfen nicht mitwachsen:
   Rechtstexte, Cookie-Dokument und der Formularkopf auf der Kontaktseite. */
.bebas .prose h2{font-size:34px;line-height:1.1;margin:32px 0 16px}
.bebas .prose--doc h2{font-size:24px;line-height:1.15;margin:16px 0 10px}
.bebas .contact-form>h2{font-size:26px;line-height:1.15}

/* =========================================================================
   Checkliste mit blauen Kacheln statt freistehender Haken.
   Zwei Ebenen: ::before ist die Kachel, ::after der gelbe Haken darauf.
   ========================================================================= */
.checklist--tiles li{padding-left:46px;min-height:30px;display:flex;align-items:center}
.checklist--tiles li+li{margin-top:14px}
.checklist--tiles li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:9px;background:var(--blue);
  -webkit-mask:none;mask:none;
}
.checklist--tiles li::after{
  content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;background-color:var(--yellow);
  -webkit-mask:url(/img/check-mark.svg) no-repeat center/contain;
  mask:url(/img/check-mark.svg) no-repeat center/contain;
}

/* Die vier Kennzahlen stehen jetzt unter dem Textblock in einer Reihe */
.cols--4>.card--center{padding:26px 20px}

/* =========================================================================
   Kontaktkarten im Fussbereich: Symbolflaeche gelb, Symbol darin blau.
   ========================================================================= */
.footer-cta .card__icon{background:var(--yellow);color:var(--navy)}
.footer-cta .card__icon svg{stroke:var(--navy)}
.footer-cta .card__icon--filled svg,
.footer-cta .card__icon--filled svg *{fill:var(--navy);stroke:none}

/* =========================================================================
   Kennzahl-Kacheln: duenner gelber Streifen an der Unterkante.
   ========================================================================= */
.cols--stats>.card{position:relative;overflow:hidden}
.cols--stats>.card::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--yellow);
}

/* =========================================================================
   Auf hellem Grund: Labels in kraeftigem Blau mit gelber Schrift,
   Symbolflaechen in Gelb mit dunkelblauem Symbol.
   Dunkle Flaechen (Hero, dunkle Sektionen, Footer) behalten ihre eigenen
   Regeln — die stehen weiter oben und sind spezifischer.
   ========================================================================= */
.chip{background:transparent;border-color:var(--navy)}
.chip span{color:var(--blue)}
.chip svg,.chip svg *{stroke:var(--blue)}

.card__icon{background:var(--yellow)}
.card__icon svg,.card__icon svg *{stroke:var(--navy)}
.card__icon--fill svg,.card__icon--fill svg *,
.card__icon--filled svg,.card__icon--filled svg *{fill:var(--navy);stroke:none}

.teaser__icon{background:var(--yellow)}
.teaser__icon svg,.teaser__icon svg *{stroke:var(--navy)}
.teaser__icon--fill svg,.teaser__icon--fill svg *{fill:var(--navy);stroke:none}

/* Symbole in Labels auf dunklem Grund bleiben gelb — die Regel oben faerbt
   sonst auch die Pfade im SVG blau, und die verschwinden dort. */
.hero .chip svg,.hero .chip svg *,
.section--dark .chip svg,.section--dark .chip svg *,
.on-dark .chip svg,.on-dark .chip svg *,
.footer-cta .chip svg,.footer-cta .chip svg *{stroke:var(--yellow)}

/* =========================================================================
   Navigation: Hover und aktuelle Seite in Gelb statt hellblauer Flaeche.
   ========================================================================= */
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current=page]{background:var(--yellow);color:var(--navy)}

/* Aktuelle Seite: keine Flaeche, nur eine blaue Unterlinie.
   Als innerer Schatten statt Rahmen — sonst kollidiert sie mit der
   Trennlinie, die die Eintraege im Mobilmenue ohnehin haben. */
.nav a[aria-current=page]{
  background:transparent;
  color:var(--blue);
  box-shadow:none;
  position:relative;
}
/* gerade Linie als eigenes Element — ein innerer Schatten wuerde der
   Eckenrundung folgen und an den Enden nach oben biegen.
   ::before, weil ::after beim Eintrag mit Untermenue den Pfeil traegt. */
.nav a[aria-current=page]::before{
  content:"";
  position:absolute;left:12px;right:12px;bottom:5px;
  height:2px;background:var(--blue);
}
.nav a[aria-current=page]:hover,
.nav a[aria-current=page]:focus-visible{background:var(--yellow);color:var(--navy)}

/* =========================================================================
   Fehlerbehebung Mobilmenue
   Der Kopf traegt backdrop-filter. Dadurch wird er zum Bezugsrahmen fuer
   position:fixed — das Panel rechnete sein "inset:… 0 0" gegen den 60 px
   hohen Kopf statt gegen das Fenster und war nur 72 px hoch. Deshalb hier
   eine ausdrueckliche Hoehe.
   ========================================================================= */
@media (max-width:1024px){
  .nav{
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    bottom:auto;
  }
}

/* =========================================================================
   Gelber Streifen: Mitarbeiterin zwischen Text und Buttons.
   Sie steht als normales Flex-Element in der Reihe (nimmt also Platz weg),
   ragt aber durch den negativen oberen Aussenabstand ueber den Streifen
   hinaus, ohne ihn hoeher zu machen.
   ========================================================================= */
.section--accent{position:relative;overflow:visible}
.section--accent .wrap.row>.band-person{
  flex:0 0 auto;
  align-self:flex-end;
  width:auto;
  height:396px;
  /* Der negative untere Abstand entspricht dem Innenabstand des Streifens:
     dadurch endet sie exakt auf dessen Unterkante. Der negative obere
     Abstand laesst sie oben herausragen, ohne den Streifen zu vergroessern. */
  margin:-150px 68px calc(-1 * var(--pad-y)) 8px;
  pointer-events:none;
  user-select:none;
}


/* Unter 1200 px wird die Textspalte zu schmal: die Ueberschrift braeche auf
   drei Zeilen um, der Streifen wuerde hoeher als das Bild und der Ueberstand
   waere weg. Deshalb entfaellt das Bild dort. */
@media (max-width:1299px){
  .section--accent .wrap.row>.band-person{display:none}
}

/* Ueberschrift im gelben Streifen wie die uebrigen Abschnittsueberschriften,
   mit festem Umbruch im Text auf zwei Zeilen. */
.bebas .section--accent h2{line-height:1.05}

/* =========================================================================
   Kontaktseite: drei Spalten — Bild, Text, Formular.
   Das Bild ist unten ausgerichtet, damit es mit dem Formular auf einer
   Linie endet; der Text beginnt oben, wo die Ueberschrift hingehoert.
   ========================================================================= */
.contact-split>.contact-person{
  /* Das neue Foto ist hochformatiger als das alte. Ueber die Hoehe statt
     ueber die Breite gesetzt - so enden die drei Spalten unten weiterhin
     auf einer Linie, statt dass das Bild die Zeile auseinanderzieht. */
  flex:0 0 auto;
  align-self:flex-end;
  width:auto;
  height:507px;
  margin-bottom:0;
}
.contact-split>.gap-24{flex:1 1 300px}

/* Unter 1260 px reicht die Breite nicht mehr fuer drei Spalten — die
   Zeile wuerde umbrechen und das Formular allein darunter rutschen. */
@media (max-width:1259px){
  .contact-split>.contact-person{display:none}
}

/* =========================================================================
   Kontaktformular kompakter: Beschriftungen stecken als Platzhalter in den
   Feldern, das Nachrichtenfeld ist flacher. Ziel ist eine Hoehe nahe der
   Textspalte daneben.
   ========================================================================= */
.contact-form{padding:28px}
.contact-form>h2{font-size:22px;margin:0 0 16px}
.contact-form .form{gap:12px}
.contact-form .form .field{gap:0}
.contact-form .form input,
.contact-form .form textarea{padding:11px 14px;font-size:16px}
.contact-form .form textarea{min-height:0;height:88px;resize:vertical}
.contact-form .form input::placeholder,
.contact-form .form textarea::placeholder{color:#8b93a1;opacity:1}
.contact-form .form .consent{margin-top:0;font-size:12.5px;line-height:1.5}
.contact-form .form .btn{padding:13px 24px;font-size:17px}

/* Gelber Streifen: Zeilenumbruch nur dort, wo er im HTML steht.
   Bricht die Zeile zusaetzlich um, waechst das Band und die
   Mitarbeiterin ragt nicht mehr oben heraus. Gilt genau in dem
   Bereich, in dem sie sichtbar ist. */
@media (min-width:1300px){
  .section--accent .gap-6 h2{white-space:nowrap}
}

/* ---------------------------------------------------------------------
   Lichtschein am Mauszeiger

   Eine einzige Ebene ueber der Seite, reines Weiss. Weiss auf Weiss
   ergibt wieder Weiss - deshalb begrenzt sich der Schein von selbst:
   ueber den hellen Abschnitten ist er praktisch unsichtbar, sichtbar
   wird er nur ueber Hero, Kontaktbereich und Fusszeile.

   Die aeussere Huelle liegt fest im Fenster, schneidet das Lichtfeld an
   den Raendern ab (sonst entstuende eine waagerechte Bildlaufleiste)
   und faengt keine Klicks ab. Sie liegt unter der Kopfzeile (z-index 50).
   Erzeugt wird sie vom Skript; ohne JavaScript existiert sie nicht.
   --------------------------------------------------------------------- */
:root{--glow-size:1040px}

.glow-layer{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:none}

.glow{
  position:absolute;left:0;top:0;
  width:var(--glow-size);height:var(--glow-size);
  margin:calc(var(--glow-size) / -2) 0 0 calc(var(--glow-size) / -2);
  transform:translate3d(var(--gx,-9999px),var(--gy,-9999px),0);
  will-change:transform;
  opacity:0;transition:opacity .45s ease;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.115) 0%,
    rgba(255,255,255,.065) 36%,
    rgba(255,255,255,.021) 60%,
    rgba(255,255,255,0) 78%);
}
.glow.is-on{opacity:1}

/* Touchgeraete und "Bewegung reduzieren": kein Lichtschein */
@media (hover:none),(pointer:coarse){.glow-layer{display:none}}
@media (prefers-reduced-motion:reduce){.glow-layer{display:none}}

/* Der gelbe Streifen ist die einzige Flaeche, auf der weisses Licht
   sichtbar bleibt: Gelb wird davon blass. Deshalb liegt er ueber der
   Lichtebene (40) und unter der Kopfzeile (50). */
.section--accent{position:relative;z-index:41}

/* Textspalte der Leistungskacheln darf schrumpfen. Ohne dies bestimmt das
   laengste Wort ("BAUSTELLENUEBERWACHUNG") die Mindestbreite und der Text
   laeuft seitlich aus der Kachel; betraf 768-900 px. Ab 1024 px aendert
   sich nichts, dort passt die Ueberschrift ohnehin in eine Zeile. */
.teaser__text{min-width:0}
.teaser__text h3{overflow-wrap:break-word;hyphens:auto}

/* =========================================================================
   Mobil (bis 767 px) — drei Anpassungen. Der Desktop bleibt unberuehrt.
   ========================================================================= */
@media (max-width:767px){

  /* 1. Leistungskacheln: ohne Symbol, damit die Ueberschrift die volle
        Breite hat. */
  .teaser__icon{display:none}
  .teaser__body{gap:0}

  /* 2. Gelber Streifen: die Mitarbeiterin steht unter den Schaltflaechen
        und endet buendig auf der Unterkante des Streifens. */
  .section--accent .wrap.row>.band-person{
    display:block;
    order:3;
    align-self:center;
    flex:0 0 auto;
    width:auto;height:300px;max-width:none;
    margin:24px 0 calc(-1 * var(--pad-y));
    pointer-events:none;user-select:none;
  }

  /* 3. Notfall-Kasten: das Teamfoto sitzt unten im gelben Feld, ueber die
        volle Kastenbreite und buendig mit dessen Unterkante. */
  .footer-cta .box{position:relative;overflow:hidden;padding-bottom:0}
  .box__team{
    display:block;position:static;
    /* Breiter als der Kasten, die Ueberstaende werden abgeschnitten.
       Feste Werte statt Prozent: ein Bild mit Prozentbreite wuerde die
       Mindestbreite der Geschwister anheben, dann liefe der Text heraus. */
    width:calc(100% + 150px);height:auto;max-width:none;
    margin:20px -75px 0;
    pointer-events:none;user-select:none;
  }
}

/* =========================================================================
   Wortumbruch

   Deutsche Komposita ("Baustellenueberwachung", "Patentrechtsmissachtung")
   sind laenger als eine Zeile auf dem Telefon. Ohne Trennung laufen sie
   seitlich aus dem Bild oder reissen grosse Luecken in den Absatz.

   Ueberschriften werden ueberall getrennt; die Regel greift nur, wenn ein
   Wort nicht in die Zeile passt - auf dem Desktop aendert sich dadurch
   nichts. Fliesstext wird nur in schmalen Spalten getrennt: bis 1023 px
   Fensterbreite sowie in den Leistungskacheln, die auch am grossen Schirm
   schmal sind.
   ========================================================================= */
/* Getrennt wird bevorzugt an den Silbenfugen (hyphens:auto). break-word
   ist nur die Notbremse: es greift erst, wenn ein Wort auch allein nicht
   in die Zeile passt, und draengt sich - anders als "anywhere" - nicht
   vor die Silbentrennung. */
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:auto}

/* Damit das reicht, muessen die Kaesten auch schrumpfen duerfen: ohne
   diese Regel ist ein Flex-Element so breit wie sein laengstes Wort und
   ragt aus dem Bild, obwohl der Text darin laengst umbricht. */
.hero__inner>*{max-width:100%}
/* die festen Hoechstbreiten im Hero duerfen die Deckelung nicht aushebeln */
.hero__inner>h1{max-width:min(900px,100%)}
.hero__inner>p{max-width:min(820px,100%)}
.hero__inner{max-width:min(920px,100%)}
.row>*,.cols>*,.stack>*,.group,.gap-24>*,.gap-16>*,.gap-6>*{min-width:0;max-width:100%}
.teaser__text p{hyphens:auto}

@media (max-width:1023px){
  p,li,dd,dt,figcaption{overflow-wrap:break-word;hyphens:auto}
}

/* Kachelbeschriftungen sind in jeder Fensterbreite schmal - dort wird
   immer getrennt, sonst stehen die Titel bei 1024-1100 px ueber dem Rand. */
.card__title,.card__text,.card__value,.card__label{overflow-wrap:break-word;hyphens:auto}

/* Titel der Leistungskacheln: keine Versalien mehr, normale Schreibweise. */
.teaser__text h3{text-transform:none;letter-spacing:0;font-size:19px}

/* =========================================================================
   Kopfzeile im Bereich 1025-1299 px

   Dort steht das Menue schon nebeneinander, der Platz reicht aber nicht:
   die Notrufnummer ragte rechts aus dem Bild (deutsch bis 85 px, englisch
   bis 150 px, weil die Beschriftungen laenger sind). Menue und Schaltflaechen
   werden in diesem Bereich etwas kleiner gesetzt, ab 1300 px bleibt alles
   wie bisher.
   ========================================================================= */
@media (min-width:1025px) and (max-width:1299px){
  .header-actions{gap:8px}
  .header-actions .btn{font-size:15px;padding-left:12px;padding-right:12px}
  .nav a{font-size:15px}
}
@media (min-width:1025px) and (max-width:1059px){
  .header-actions .btn{font-size:14px;padding-left:10px;padding-right:10px}
  .nav a{font-size:14px}
}

/* Bilder, die ohne Huelle direkt im Inhaltsbereich stehen (Abschnitte
   "Einsatzgebiet" und aehnliche), bekommen dieselbe Eckenrundung wie die
   uebrigen Bilder. Die freigestellten Personen sind ausgenommen - sie
   haben keinen sichtbaren Rahmen, den man runden koennte. */
.wrap.row>img:not([class]),
.wrap.stack>img:not([class]),
.wrap>.row>img:not([class]){border-radius:var(--radius)}

/* Feste Zeilenumbrueche in der Hero-Ueberschrift der Startseite.
   Die laengste erzwungene Zeile ("Zertifizierter Sicherheitsdienst") misst
   464 px; ab 520 px Fensterbreite stehen dafuer 488 px zur Verfuegung.
   Darunter bricht der Satz wieder von selbst um, mit Silbentrennung. */
br.br-breit{display:none}
@media (min-width:520px){
  br.br-breit{display:block}
}

/* Kuerzere Zeilenlaenge im Beratungs-Absatz */
.footer-cta .wrap > .measure{max-width:700px}

/* Kachel ohne Verlinkung */
.teaser--static{cursor:default}
.teaser--static:hover{box-shadow:var(--shadow)}
.teaser--static:hover .teaser__img{transform:none}
.teaser--static:hover .teaser__text h3{color:inherit}
.teaser--static::after{display:none}

/* =========================================================================
   Keine automatische Silbentrennung mehr.
   Getrennt wird nur noch an den handgesetzten Trennstellen (&shy;) und
   das auch nur dann, wenn das Wort in der Zeile wirklich nicht mehr passt.
   overflow-wrap:break-word bleibt als Notbremse fuer Woerter, die selbst
   allein breiter als die Spalte sind.
   ========================================================================= */
h1,h2,h3,h4,h5,h6,
p,li,dd,dt,figcaption,
.teaser__text h3,.teaser__text p,
.card__title,.card__text,.card__value,.card__label,
.measure,.lead,blockquote{hyphens:none;-webkit-hyphens:none}

/* Nur dort, wo eine Spalte schmaler ist als das laengste Wort, duerfen die
   gesetzten Trennstellen (&shy;) ueberhaupt greifen. */
@media (min-width:768px) and (max-width:919px){
  .teaser__text h3{hyphens:manual;-webkit-hyphens:manual}
}
@media (max-width:389px){
  h1,h2,h3,h4,
  .card__title,
  .teaser__text h3{hyphens:manual;-webkit-hyphens:manual}
}
@media (max-width:340px){
  .card__text,p{hyphens:manual;-webkit-hyphens:manual}
}

/* Mehr Luft zwischen Einleitungstext und Kachelraster
   (gleicher Abstand wie im Kontaktblock: 48 px) */
.wrap.gap-18 > .cols{margin-top:30px}

/* Vorleser-Zeile ueber dem Fliesstext: fett und direkt darueber */
.section--dark .text-center > p:first-child{font-weight:700;margin-bottom:6px}


/* Telefonnummer in der Kopfleiste als gelber Button */
.topbar a.topbar__phone{
  background:var(--yellow);color:var(--navy);
  padding:4px 14px;border-radius:6px;font-weight:600;
}
.topbar a.topbar__phone:hover{background:#f5e400;text-decoration:none}

/* Mobil: weniger Luft ueber dem Hero-Inhalt */
@media (max-width:767px){
  .hero{padding-top:40px;padding-bottom:48px}
  .hero--short{padding-top:40px}
}

/* Mobil: H1 mitwachsend, damit mittellange Woerter ohne Trennung passen */
@media (max-width:520px){
  .bebas h1{font-size:min(calc(var(--fs-h1) * 1.22), 10vw)}
}

/* Hero-Bilder der Leistungsseiten: rechtsbuendig, vertikal oben verankert, damit Koepfe nicht angeschnitten werden */
.hero--baustellenueberwachung,.hero--werkschutz,.hero--citystreife,.hero--detektei-observationen,
.hero--objektschutz-bewachung{background-position:right top}
.hero--deeskalationsmanagement,.hero--personen-begleitschutz{background-position:right 8%}
.hero--empfangs-pfortendienst{background-position:right 22%}
.hero--veranstaltungsschutz{background-position:right 20%}

/* Kachelbild oben verankert (nicht oben anschneiden) */
.teaser__img--oben{object-position:center top}

/* Kontaktkarten: alle Werte gelb, Zeigehand bei "Rund um die Uhr" */
.footer-cta .card__value{color:var(--yellow)}
.footer-cta .card__value--hand{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.hand-point{display:inline-flex;color:var(--yellow);animation:hand-point 1.4s ease-in-out infinite}
.hand-point svg{display:block}
@keyframes hand-point{0%,100%{transform:translateX(10px)}50%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.hand-point{animation:none}}

/* Hinweisbalken (z. B. Textfreigabe) */
.notice-bar{background:var(--yellow);color:var(--navy);padding:6px var(--pad-x);text-align:center;font-size:13px;line-height:1.4}
.notice-bar p{margin:0}
.hero--brandsicherheitswache{background-image:url(/img/hero-brandsicherheitswache.webp);background-position:right top}

/* Startseite: Bild bleibt beim Scrollen stehen, nur Text und Overlay laufen weg */
.hero--home::before{opacity:1;background:linear-gradient(90deg,rgba(13,45,92,.74) 0%,rgba(13,45,92,.66) 45%,rgba(13,45,92,.48) 100%)}
html.js-anim .hero--home::after{
  top:0;height:100%;
  background-attachment:fixed;
  transform:none;will-change:auto;
}

/* Startseite: Einleitungstext schmaler und ausgeglichen umbrochen (max. 4 Zeilen am Desktop) */
.hero--home .t-bbcd583{max-width:760px}
.hero--home .t-bbcd583 p{text-wrap:balance}

/* Startseite: sechs Punkte in zwei gleichmaessigen Reihen (3 + 3) */
.hero--home .checklist--inline{max-width:700px}

/* Desktop: Inhalt im Kopfbereich vertikal mittig im sichtbaren Bereich unter Topbar und Menue.
   Der Kopf ist so hoch wie das Fenster abzueglich Topbar (49 px) und Menue (--header-h). */
@media (min-width:768px){
  .hero,.hero--home{
    align-items:center;
    min-height:calc(100vh - 49px - var(--header-h));
    min-height:calc(100svh - 49px - var(--header-h));
    padding-top:80px;padding-bottom:80px;
  }
}

/* Sprachumschalter mit Flaggen */
.lang-switch a{display:inline-flex;align-items:center;gap:6px}
.lang-switch .flag{display:block;width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex:none}

/* Schwebender Anruf-Knopf: erscheint beim Scrollen am rechten Rand, faehrt bei Hover/Fokus aus.
   Ohne JavaScript ist er immer sichtbar. */
.call-fab{
  position:fixed;right:0;top:calc(var(--header-h) + 130px);z-index:40;
  display:flex;align-items:center;height:68px;
  background:var(--yellow);color:var(--navy);
  border-radius:34px 0 0 34px;
  box-shadow:0 6px 20px rgba(13,45,92,.28);
  padding:0 20px 0 22px;overflow:hidden;
  font-weight:700;font-size:18px;line-height:1;white-space:nowrap;text-decoration:none;
  transition:opacity .25s ease,transform .25s ease,background-color .2s ease;
}
.call-fab:hover,.call-fab:focus-visible{background:#f5e400;text-decoration:none;color:var(--navy)}
.call-fab svg{width:30px;height:30px;flex:none}
.call-fab span{max-width:0;opacity:0;margin-left:0;overflow:hidden;
  transition:max-width .35s ease,opacity .25s ease,margin-left .35s ease}
.call-fab:hover span,.call-fab:focus-visible span{max-width:300px;opacity:1;margin-left:14px}
html.js-anim .call-fab{opacity:0;transform:translateX(100%);pointer-events:none;visibility:hidden}
html.js-anim.is-scrolled .call-fab{opacity:1;transform:none;pointer-events:auto;visibility:visible}
@media (max-width:767px){
  .call-fab{height:60px;padding:0 16px 0 18px;border-radius:30px 0 0 30px}
  .call-fab svg{width:28px;height:28px}
  .call-fab span{display:none}
}
@media (prefers-reduced-motion:reduce){.call-fab,.call-fab span{transition:none}}
@media print{.call-fab{display:none}}

/* Cookie-Hinweis (ProntoSite-Widget): Farben passend zur Seite.
   Ohne diese Zeilen liefert der Import "hover" als Primaerfarbe - die Buttons waeren unsichtbar.
   html:root schlaegt das nachgeladene :root des Imports. */
html:root{
  --ps-w-primary:#ffed00;--ps-w-on-primary:#0d2d5c;
  --ps-w-link:#0d3773;--ps-w-text:#1d2530;--ps-w-surface:#fff;--ps-w-bg:#fff;
}

/* Impressum / Datenschutz: Rechtstext linksbuendig unter der Ueberschrift (nicht zentriert) */
.prose .ps-legal{margin-left:0;margin-right:auto;padding-left:0;padding-right:0}

/* Fusszeile: "Made with ProntoSite" direkt neben den Sprach-Links */
.footer-bottom__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.footer-bottom__meta .lang-switch{margin:0}
.footer-badge{display:inline-flex;align-items:center;gap:8px;color:inherit;opacity:.85;font-size:14px;text-decoration:none}
.footer-badge:hover{opacity:1;text-decoration:none}

/* Impressum: Hinweis auf Webdesign und Umsetzung unter dem Rechtstext */
.legal-credit{margin:8px 0 0;font-size:15px;color:var(--text)}
.legal-credit a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.footer-badge__icon{display:block;width:20px;height:20px;border-radius:5px;flex:none}

/* Mobil: Bild direkt in einer Zeilen-Gruppe nicht strecken.
   In der Spalten-Ansicht wirkt flex-basis (380px) sonst als Hoehe. */
@media (max-width:767px){
  .row>img,.wrap.row>img{flex:0 0 auto;width:100%;height:auto}
}