/* =========================================================================
   Opera Gebäudeservice GmbH – Stylesheet
   Quelle: /tools/assets/styles.css  ->  wird von build.py nach /styles.css kopiert
   ========================================================================= */

:root{
  --farbe-primaer:#0F3457;
  --farbe-primaer-dunkel:#092338;
  --farbe-sekundaer:#2E9BD8;
  --farbe-cta:#0F76B4;
  --farbe-cta-hover:#0B5C8E;
  --farbe-text:#16202B;
  --farbe-text-leise:#54636F;
  --farbe-linie:#DCE4EC;
  --farbe-flaeche:#F1F6FA;
  --farbe-flaeche-2:#E7EFF7;
  --radius:10px;
  --radius-gross:16px;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schatten:0 2px 4px rgba(12,32,52,.04),0 12px 28px rgba(12,32,52,.08);
  --schatten-stark:0 24px 60px rgba(6,22,38,.34);
  --breite:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--schrift);font-size:17px;line-height:1.65;
  color:var(--farbe-text);background:#fff;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--farbe-cta);text-underline-offset:2px}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;letter-spacing:-.02em;color:var(--farbe-primaer);font-weight:800}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem);letter-spacing:-.028em}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
:focus-visible{outline:3px solid var(--farbe-sekundaer);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:var(--breite);margin:0 auto;padding-left:20px;padding-right:20px}
.abschnitt{padding-top:72px;padding-bottom:72px}
.abschnitt-eng{padding-top:52px;padding-bottom:52px}
.flaeche{background:var(--farbe-flaeche)}
.dunkel{background:var(--farbe-primaer);color:#fff}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.augenbraue{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--farbe-cta);margin-bottom:.7em;
}
.dunkel .augenbraue{color:var(--farbe-sekundaer)}
.abschnitt-kopf{max-width:760px;margin-bottom:38px}
.abschnitt-kopf p{color:var(--farbe-text-leise);font-size:1.06rem;margin-bottom:0}
.dunkel .abschnitt-kopf p{color:rgba(255,255,255,.82)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 1rem/1.15 var(--schrift);padding:15px 24px;border-radius:var(--radius);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;text-align:center;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primaer{background:var(--farbe-cta);color:#fff}
.btn-primaer:hover{background:var(--farbe-cta-hover);color:#fff}
.btn-hell{background:#fff;color:var(--farbe-primaer)}
.btn-hell:hover{background:#EAF3FA}
.btn-rand{background:transparent;color:var(--farbe-primaer);border-color:var(--farbe-linie)}
.btn-rand:hover{border-color:var(--farbe-cta);color:var(--farbe-cta)}
.dunkel .btn-rand{color:#fff;border-color:rgba(255,255,255,.45)}
.dunkel .btn-rand:hover{border-color:#fff;color:#fff}
.btn-voll{width:100%}
.btn-gross{padding:17px 30px;font-size:1.06rem}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Kopfbereich (Header + mobile Aktionsleiste) ---------- */
.kopfbereich{position:sticky;top:0;z-index:70;background:#fff;box-shadow:0 1px 0 var(--farbe-linie)}
.kopf-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marke img.marke-icon{width:30px;height:auto}
.marke img.marke-wort{width:152px;height:auto}

.haupt-nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.haupt-nav a,.haupt-nav .nav-schalter{
  display:inline-flex;align-items:center;gap:5px;padding:9px 10px;border-radius:8px;
  font:600 .94rem/1.2 var(--schrift);color:var(--farbe-primaer);text-decoration:none;
  background:none;border:0;cursor:pointer;white-space:nowrap;
}
.haupt-nav a:hover,.haupt-nav .nav-schalter:hover{background:var(--farbe-flaeche);color:var(--farbe-cta)}
.haupt-nav a[aria-current="page"]{color:var(--farbe-cta)}
.nav-pfeil{width:9px;height:9px;flex:none;opacity:.6}
.hat-menu{position:relative}
.unter-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:262px;background:#fff;
  border:1px solid var(--farbe-linie);border-radius:12px;box-shadow:var(--schatten);
  padding:8px;list-style:none;margin:0;display:none;z-index:80;
}
.unter-menu li{margin:0}
.unter-menu a{display:block;width:100%;padding:9px 12px;font-weight:600;font-size:.95rem}
.unter-menu .menu-alle{border-top:1px solid var(--farbe-linie);margin-top:6px;padding-top:6px}
.unter-menu .menu-alle a{color:var(--farbe-cta)}
.hat-menu:hover>.unter-menu,.hat-menu:focus-within>.unter-menu,.hat-menu.offen>.unter-menu{display:block}

/* Mega-Menü „Leistungen" – drei Spalten nach Leistungsgruppe */
.mega-menu{
  display:none;min-width:min(720px,calc(100vw - 48px));padding:22px 24px 18px;
  grid-template-columns:repeat(3,minmax(150px,1fr));gap:8px 30px;
}
.hat-menu:hover>.mega-menu,.hat-menu:focus-within>.mega-menu,.hat-menu.offen>.mega-menu{display:grid}
.menu-spalte ul{list-style:none;margin:0;padding:0}
.menu-titel{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--farbe-cta);padding:0 10px 8px;margin-bottom:6px;border-bottom:1px solid var(--farbe-linie);
}
.mega-menu a{padding:8px 10px;border-radius:8px;font-weight:600;font-size:.93rem;line-height:1.3}
.mega-menu a:hover{background:var(--farbe-flaeche)}

.kopf-aktionen{display:flex;align-items:center;gap:12px;flex:none}
.kopf-aktionen .btn{padding:12px 18px;font-size:.95rem}
.kopf-telefon{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--farbe-primaer);
  font-weight:800;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap;
}
.kopf-telefon:hover{color:var(--farbe-cta)}
.kopf-telefon svg{width:17px;height:17px;flex:none;color:var(--farbe-cta)}

.nav-burger{
  display:none;align-items:center;justify-content:center;width:46px;height:44px;
  border:1.5px solid var(--farbe-linie);border-radius:9px;background:#fff;cursor:pointer;flex:none;
}
.nav-burger span{display:block;width:20px;height:2px;background:var(--farbe-primaer);position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--farbe-primaer)}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}

/* mobile Aktionsleiste – oben, damit sie das Chat-Widget unten rechts nicht überlagert */
.aktionsleiste{display:none;border-top:1px solid var(--farbe-linie);background:var(--farbe-flaeche)}
.aktionsleiste .container{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:9px;padding-bottom:9px}
.aktionsleiste .btn{padding:12px 10px;font-size:.95rem}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;background:var(--farbe-primaer-dunkel);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(103deg,#071D30 0%,#0D3253 52%,#134873 100%);
}
.hero>.container{position:relative;z-index:1;padding-top:56px;padding-bottom:64px}
.hero h1{color:#fff;margin-bottom:.42em;max-width:16ch}
.hero-text p.unter{font-size:1.1rem;color:rgba(255,255,255,.86);max-width:52ch;margin-bottom:1.5em}
.hero-vertrauen{display:flex;flex-wrap:wrap;gap:9px 20px;list-style:none;margin:0;padding:0}
.hero-vertrauen li{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.92)}
.hero-vertrauen svg{width:17px;height:17px;flex:none;color:var(--farbe-sekundaer)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:start}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 26px}

@media (min-width:1200px){
  .hero::before{
    background-image:linear-gradient(103deg,rgba(7,29,48,.93) 0%,rgba(10,40,66,.80) 48%,rgba(13,50,82,.66) 100%),url("/bilder/stock/hero-bueroflur.jpg");
    background-size:cover;background-position:center right;
  }
}

/* ---------- Anfrageformular ---------- */
.formular-karte{
  background:#fff;color:var(--farbe-text);border-radius:var(--radius-gross);
  padding:26px;box-shadow:var(--schatten-stark);
}
.formular-karte.im-rahmen{box-shadow:var(--schatten);border:1px solid var(--farbe-linie)}
.formular-kopf{margin-bottom:16px}
.formular-kopf h2,.formular-kopf .titel{font-size:1.28rem;margin-bottom:.28em;color:var(--farbe-primaer);font-weight:800;line-height:1.22}
.formular-kopf p{font-size:.94rem;color:var(--farbe-text-leise);margin:0}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feld{margin-bottom:12px}
.feld label,.feld .beschriftung{display:block;font-size:.84rem;font-weight:700;color:var(--farbe-primaer);margin-bottom:5px}
.feld .optional{font-weight:600;color:var(--farbe-text-leise)}
.feld input[type=text],.feld input[type=tel],.feld input[type=email],.feld select,.feld textarea{
  width:100%;font:400 .98rem/1.4 var(--schrift);color:var(--farbe-text);background:#fff;
  border:1.5px solid #C9D6E2;border-radius:8px;padding:11px 12px;
}
.feld textarea{min-height:88px;resize:vertical}
.feld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2354636F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--farbe-cta);outline:2px solid rgba(15,118,180,.18);outline-offset:0}
.feld-zustimmung{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px}
.feld-zustimmung input{width:19px;height:19px;margin:2px 0 0;flex:none;accent-color:var(--farbe-cta)}
.feld-zustimmung label{font-size:.82rem;line-height:1.5;color:var(--farbe-text-leise);font-weight:500}
.honigtopf{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formular-fuss{margin-top:12px;font-size:.82rem;color:var(--farbe-text-leise);text-align:center}
.formular-status{margin-top:12px;font-size:.93rem;font-weight:600;border-radius:8px;padding:11px 13px;display:none}
.formular-status.sichtbar{display:block}
.formular-status.fehler{background:#FDECEC;color:#96201F;border:1px solid #F3C6C6}
.formular-status.hinweis{background:#FFF6E5;color:#7A5300;border:1px solid #F2DCAE}
.formular-erfolg{display:none;text-align:center;padding:12px 4px}
.formular-erfolg.sichtbar{display:block}
.formular-erfolg .haken{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:#E4F4E8;color:#1E7A3C;display:flex;align-items:center;justify-content:center}
.formular-erfolg .haken svg{width:26px;height:26px}
.formular-erfolg h3{font-size:1.16rem;margin-bottom:.35em}
.formular-erfolg p{font-size:.95rem;color:var(--farbe-text-leise);margin-bottom:0}
form.gesendet .formular-koerper{display:none}

/* ---------- Vertrauens-Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--farbe-linie);border-radius:var(--radius-gross);overflow:hidden;border:1px solid var(--farbe-linie)}
.zahlen div{background:#fff;padding:24px 18px;text-align:center}
.zahlen b{display:block;font-size:2rem;font-weight:800;color:var(--farbe-primaer);letter-spacing:-.03em;line-height:1.1}
.zahlen span{display:block;font-size:.88rem;color:var(--farbe-text-leise);margin-top:5px;font-weight:600}

/* ---------- Karten-Raster ---------- */
.raster{display:grid;gap:22px}
.raster-4{grid-template-columns:repeat(4,1fr)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-2{grid-template-columns:repeat(2,1fr)}

.leistungs-karte{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--farbe-linie);
  border-radius:var(--radius-gross);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.leistungs-karte:hover{border-color:var(--farbe-sekundaer);transform:translateY(-2px);box-shadow:var(--schatten)}
.leistungs-karte img{width:100%;aspect-ratio:16/10;object-fit:cover}
.leistungs-karte .inhalt{padding:20px;display:flex;flex-direction:column;flex:1}
.leistungs-karte h3{margin-bottom:.4em;font-size:1.14rem}
.leistungs-karte p{font-size:.95rem;color:var(--farbe-text-leise);margin-bottom:1em}
.leistungs-karte .mehr{margin-top:auto;font-weight:700;font-size:.95rem;color:var(--farbe-cta)}

.info-karte{background:#fff;border:1px solid var(--farbe-linie);border-radius:var(--radius-gross);padding:24px}
.info-karte h3{display:flex;align-items:center;gap:10px;font-size:1.08rem}
.info-karte h3 .symbol{width:34px;height:34px;border-radius:9px;background:var(--farbe-flaeche-2);color:var(--farbe-cta);display:flex;align-items:center;justify-content:center;flex:none}
.info-karte h3 .symbol svg{width:18px;height:18px}
.info-karte p{font-size:.96rem;color:var(--farbe-text-leise);margin-bottom:0}

/* ---------- Über uns ---------- */
.ueber-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.ueber-liste{list-style:none;padding:0;margin:0 0 1.4em}
.ueber-liste li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;font-size:1rem}
.ueber-liste svg{width:19px;height:19px;flex:none;color:var(--farbe-cta);margin-top:4px}

.bild-platzhalter{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
  background:var(--farbe-flaeche-2);border:2px dashed #B9CBDC;border-radius:var(--radius-gross);
  color:#5B7288;padding:28px 20px;min-height:230px;
}
.bild-platzhalter svg{width:30px;height:30px;opacity:.55}
.bild-platzhalter b{font-size:.94rem;font-weight:700}
.bild-platzhalter span{font-size:.83rem;max-width:32ch;line-height:1.5}
.platzhalter-hoch{aspect-ratio:4/5;min-height:0}
.platzhalter-quer{aspect-ratio:4/3;min-height:0}

/* ---------- Embeds / Consent ---------- */
.embed-platzhalter{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  background:var(--farbe-flaeche-2);border:1px solid var(--farbe-linie);border-radius:var(--radius-gross);
  padding:34px 22px;color:var(--farbe-text-leise);
}
.embed-platzhalter p{font-size:.95rem;max-width:46ch;margin:0}
.embed-platzhalter>svg{width:30px;height:30px;opacity:.45}
.embed-platzhalter .btn{margin-top:2px}
.embed-rahmen iframe{width:100%;border:0;display:block;border-radius:var(--radius-gross)}
.karte-rahmen,.karte-rahmen .embed-platzhalter{min-height:340px}
.karte-rahmen iframe{min-height:340px;border-radius:var(--radius-gross)}
.bewertungs-rahmen,.bewertungs-rahmen .embed-platzhalter{min-height:320px}
.bewertungs-rahmen iframe{min-height:320px}
.umfrage-rahmen,.umfrage-rahmen .embed-platzhalter{min-height:640px}
.umfrage-rahmen iframe{min-height:640px}

.bewertungs-abschluss{margin-top:26px;text-align:center}
.bewertungs-abschluss p{font-size:.95rem;color:var(--farbe-text-leise);margin-bottom:.8em}

/* ---------- Einsatzgebiete ---------- */
.gebiete-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.stadt-links{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0 0 22px}
.stadt-links a{
  display:inline-block;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--farbe-linie);
  font-size:.93rem;font-weight:600;color:var(--farbe-primaer);text-decoration:none;
}
.stadt-links a:hover{border-color:var(--farbe-cta);color:var(--farbe-cta)}

/* ---------- Abschluss-CTA ---------- */
.abschluss-grid{display:grid;grid-template-columns:1fr .92fr;gap:46px;align-items:center}
.abschluss-kontakt{list-style:none;padding:0;margin:22px 0 0}
.abschluss-kontakt li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;color:rgba(255,255,255,.9);font-size:1rem}
.abschluss-kontakt svg{width:19px;height:19px;flex:none;color:var(--farbe-sekundaer);margin-top:4px}
.abschluss-kontakt a{color:#fff;font-weight:700;text-decoration:none}
.abschluss-kontakt a:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.fuss{background:var(--farbe-primaer-dunkel);color:rgba(255,255,255,.76);font-size:.95rem}
.fuss a{color:rgba(255,255,255,.76);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:36px;padding-top:56px;padding-bottom:40px}
.fuss h3{color:#fff;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1em;font-weight:800}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:9px}
.fuss .marke-fuss img{width:180px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.95}
.fuss-unten{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;padding-bottom:26px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:.88rem}
.fuss-rechtslinks{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0}
.fuss-schalter{background:none;border:0;color:rgba(255,255,255,.76);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.fuss-schalter:hover{color:#fff}

/* ---------- Breadcrumb ---------- */
.brotkrumen{font-size:.86rem;color:var(--farbe-text-leise);padding-top:16px}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.brotkrumen li::after{content:"›";margin-left:7px;opacity:.55}
.brotkrumen li:last-child::after{content:""}
.brotkrumen a{color:var(--farbe-text-leise)}

/* ---------- Cookie-Banner ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;
  border-top:2px solid var(--farbe-primaer);box-shadow:0 -10px 40px rgba(6,22,38,.16);
}
.cookie-banner[hidden]{display:none}
.cookie-inner{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;padding-top:18px;padding-bottom:18px}
.cookie-inner p{margin:0;font-size:.92rem;color:var(--farbe-text-leise)}
.cookie-inner strong{display:block;color:var(--farbe-primaer);font-size:1rem;margin-bottom:4px}
.cookie-knoepfe{display:flex;flex-wrap:wrap;gap:9px}
.cookie-knoepfe .btn{padding:12px 18px;font-size:.94rem}
.cookie-dialog{border:0;border-radius:var(--radius-gross);padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:var(--schatten-stark)}
.cookie-dialog::backdrop{background:rgba(6,22,38,.6)}
.cookie-dialog-inner{padding:26px}
.cookie-dialog h2{font-size:1.35rem}
.cookie-kategorie{border:1px solid var(--farbe-linie);border-radius:10px;padding:14px 16px;margin-bottom:11px}
.cookie-kategorie label{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--farbe-primaer);font-size:.98rem;cursor:pointer}
.cookie-kategorie input{width:18px;height:18px;accent-color:var(--farbe-cta)}
.cookie-kategorie p{margin:7px 0 0 28px;font-size:.87rem;color:var(--farbe-text-leise)}
.cookie-dialog-fuss{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1080px){
  .fuss-grid{grid-template-columns:1fr 1fr;gap:32px}
  .raster-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero h1{max-width:20ch}
  .ueber-grid,.gebiete-grid,.abschluss-grid{grid-template-columns:1fr;gap:30px}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .raster-3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1150px){
  .haupt-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-top:1px solid var(--farbe-linie);box-shadow:0 18px 34px rgba(6,22,38,.14);
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .haupt-nav.offen{display:block}
  .haupt-nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 12px 16px}
  .haupt-nav>ul>li{border-bottom:1px solid var(--farbe-linie)}
  .haupt-nav>ul>li:last-child{border-bottom:0}
  .haupt-nav a,.haupt-nav .nav-schalter{width:100%;justify-content:space-between;padding:13px 8px;font-size:1rem}
  .unter-menu{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 10px 8px;min-width:0}
  .hat-menu:hover>.unter-menu,.hat-menu:focus-within>.unter-menu{display:none}
  .hat-menu.offen>.unter-menu{display:block}
  .mega-menu{min-width:0;padding:0 0 10px 8px}
  .hat-menu:hover>.mega-menu,.hat-menu:focus-within>.mega-menu{display:none}
  .hat-menu.offen>.mega-menu{display:block}
  .menu-spalte{margin-bottom:10px}
  .menu-titel{padding:6px 8px 4px;margin-bottom:2px}
  .unter-menu a{padding:9px 8px;font-weight:500}
  .nav-burger{display:flex}
  .kopf-aktionen .btn-primaer{display:none}
  .kopf-telefon{font-size:1rem}
  .kopfbereich{position:sticky}
  .aktionsleiste{display:block}
}

@media (max-width:640px){
  body{font-size:16px}
  .abschnitt{padding-top:48px;padding-bottom:48px}
  .abschnitt-eng{padding-top:38px;padding-bottom:38px}
  .hero>.container{padding-top:36px;padding-bottom:44px}
  h1 br,h2 br{display:none}
  .raster-4,.raster-3,.raster-2{grid-template-columns:1fr}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .zahlen div{padding:18px 12px}
  .zahlen b{font-size:1.6rem}
  .formular-karte{padding:20px}
  .feld-reihe{grid-template-columns:1fr;gap:0}
  .cookie-inner{grid-template-columns:1fr;gap:14px}
  .cookie-knoepfe .btn{flex:1 1 auto}
  .fuss-grid{grid-template-columns:1fr;gap:28px;padding-top:42px}
  .fuss-unten{flex-direction:column;align-items:flex-start}
  .kopf-telefon span.tel-text{display:none}
  .marke img.marke-wort{width:140px}
  .hero-aktionen .btn{width:100%}
}

@media (max-width:380px){
  .marke img.marke-wort{width:118px}
  .aktionsleiste .btn{font-size:.88rem;padding:12px 6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =========================================================================
   Unterseiten
   ========================================================================= */

/* ---------- Text-Seitenkopf (Dienstleistungs-, Kombi- und Funnel-Seiten) ---------- */
.seiten-kopf{background:var(--farbe-primaer);color:#fff;position:relative}
.seiten-kopf::before{content:"";position:absolute;inset:0;background:linear-gradient(103deg,#071D30 0%,#0D3253 58%,#134873 100%)}
.seiten-kopf>.container{position:relative;z-index:1;padding-top:14px;padding-bottom:56px}
.seiten-kopf h1{color:#fff;margin-bottom:.42em;font-size:clamp(1.85rem,1.25rem + 2.2vw,2.75rem)}
.seiten-kopf .hero-aktionen{margin:26px 0 0}
.seiten-kopf .unter{font-size:1.08rem;color:rgba(255,255,255,.86);max-width:54ch}
.seiten-kopf .brotkrumen{color:rgba(255,255,255,.62);padding-bottom:22px}
.seiten-kopf .brotkrumen a{color:rgba(255,255,255,.78)}
.seiten-kopf .brotkrumen a:hover{color:#fff}
/* Umrandete Buttons auf dem dunklen Seitenkopf brauchen helle Schrift (WCAG AA) */
.seiten-kopf .btn-rand{color:#fff;border-color:rgba(255,255,255,.45)}
.seiten-kopf .btn-rand:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.kopf-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:start}
.kopf-grid .hero-vertrauen{margin-top:22px}

/* schlanker Kopf ohne Formular (Kern- und Rechtsseiten) */
.seiten-kopf.schlank>.container{padding-bottom:44px}
.seiten-kopf.schlank .unter{max-width:62ch}
@media (min-width:1200px){
  .seiten-kopf.schlank::before{
    background-image:linear-gradient(100deg,rgba(7,29,48,.97) 0%,rgba(10,40,66,.90) 46%,rgba(13,50,82,.74) 100%),url("/bilder/stock/hero-bueroflur.jpg");
    background-size:cover;background-position:center right;
  }
}

/* ---------- Leistungsumfang ---------- */
.umfang{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;list-style:none;padding:0;margin:0}
.umfang li{display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.umfang svg{width:19px;height:19px;flex:none;color:var(--farbe-cta);margin-top:4px}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0;counter-reset:schritt}
.ablauf li{background:#fff;border:1px solid var(--farbe-linie);border-radius:var(--radius-gross);padding:22px}
.ablauf li::before{
  counter-increment:schritt;content:counter(schritt);
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:12px;
  background:var(--farbe-primaer);color:#fff;border-radius:9px;font-weight:800;font-size:1rem;
}
.ablauf h3{font-size:1.04rem;margin-bottom:.35em}
.ablauf p{font-size:.94rem;color:var(--farbe-text-leise);margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--farbe-linie)}
.faq details:first-of-type{border-top:1px solid var(--farbe-linie)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-weight:700;font-size:1.04rem;color:var(--farbe-primaer);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2.2px solid var(--farbe-cta);border-bottom:2.2px solid var(--farbe-cta);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq details p{margin:0 0 19px;color:var(--farbe-text-leise);font-size:1rem;max-width:74ch}

/* ---------- Querverlinkung ---------- */
.quer-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.quer-links a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:999px;
  background:#fff;border:1px solid var(--farbe-linie);font-size:.95rem;font-weight:600;
  color:var(--farbe-primaer);text-decoration:none;
}
.quer-links a:hover{border-color:var(--farbe-cta);color:var(--farbe-cta)}

/* ---------- Leistungen vor Ort ---------- */
.stadt-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stadt-karte{background:#fff;border:1px solid var(--farbe-linie);border-radius:var(--radius-gross);padding:22px}
.stadt-karte h2{font-size:1.14rem;margin-bottom:.15em}
.stadt-karte .region{display:block;font-size:.85rem;color:var(--farbe-text-leise);margin-bottom:14px}
.stadt-karte ul{list-style:none;padding:0;margin:0}
.stadt-karte li{margin-bottom:7px}
.stadt-karte a{font-size:.96rem;font-weight:600;text-decoration:none;color:var(--farbe-primaer)}
.stadt-karte a:hover{color:var(--farbe-cta);text-decoration:underline}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.nap{list-style:none;padding:0;margin:0 0 26px}
.nap li{display:flex;gap:13px;align-items:flex-start;margin-bottom:15px;font-size:1.02rem}
.nap svg{width:20px;height:20px;flex:none;color:var(--farbe-cta);margin-top:5px}
.nap a{color:var(--farbe-primaer);font-weight:700;text-decoration:none}
.nap a:hover{color:var(--farbe-cta)}

/* ---------- Galerie ---------- */
.galerie-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ---------- Rabatt ---------- */
.angebot-box{
  background:var(--farbe-flaeche-2);border:1px solid var(--farbe-linie);border-left:5px solid var(--farbe-cta);
  border-radius:var(--radius);padding:22px 24px;margin:0 0 26px;
}
.angebot-box b{display:block;font-size:1.5rem;color:var(--farbe-primaer);letter-spacing:-.02em;margin-bottom:4px}
.angebot-box p{margin:0;font-size:.98rem;color:var(--farbe-text-leise)}

/* ---------- Rechtstexte ---------- */
.text-seite{max-width:820px}
.text-seite h2{font-size:1.5rem;margin-top:1.9em}
.text-seite h2:first-child{margin-top:0}
.text-seite h3{font-size:1.12rem;margin-top:1.7em;color:var(--farbe-primaer)}
.text-seite p,.text-seite li{font-size:1rem;color:#2C3844;line-height:1.72}
.text-seite{overflow-wrap:anywhere}
.text-seite h2,.text-seite h3{overflow-wrap:anywhere;hyphens:auto}
.text-seite a{word-break:break-word}
.hinweis-box{
  background:#FFF6E5;border:1px solid #F2DCAE;border-radius:var(--radius);
  padding:18px 20px;margin-bottom:28px;font-size:.95rem;color:#6B4A00;
}
.hinweis-box strong{display:block;margin-bottom:4px;color:#5A3E00}

@media (max-width:980px){
  .kopf-grid,.kontakt-grid{grid-template-columns:1fr;gap:30px}
  .ablauf{grid-template-columns:repeat(2,1fr)}
  .stadt-karten,.galerie-raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .umfang{grid-template-columns:1fr;gap:10px}
  .ablauf{grid-template-columns:1fr}
  .stadt-karten,.galerie-raster{grid-template-columns:1fr}
  .seiten-kopf>.container{padding-bottom:40px}
}

/* =========================================================================
   Phase 2 – Sektionen der Unterseiten
   ========================================================================= */
.warum-bild{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-gross)}
.unter-titel{font-size:1.06rem;margin:34px 0 16px}

.info-karte.auf-dunkel{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)}
.info-karte.auf-dunkel h3{color:#fff}
.info-karte.auf-dunkel p{color:rgba(255,255,255,.78)}
.info-karte.auf-dunkel h3 .symbol{background:rgba(46,155,216,.18);color:var(--farbe-sekundaer)}

.chip-titel{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--farbe-sekundaer);margin:0 0 14px;font-weight:800}
.dunkel .chip-titel{color:var(--farbe-sekundaer)}
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0 0 30px}
.chips li{
  padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);font-size:.92rem;font-weight:600;color:rgba(255,255,255,.94);
}
.chips-link li{padding:0;background:none;border:0}
.chips-link a{
  display:inline-block;padding:8px 15px;border-radius:999px;background:rgba(46,155,216,.14);
  border:1px solid rgba(46,155,216,.45);font-size:.92rem;font-weight:600;color:#fff;text-decoration:none;
}
.chips-link a:hover{background:rgba(46,155,216,.3);color:#fff}

.stadt-karte h2 a{color:var(--farbe-primaer);text-decoration:none}
.stadt-karte h2 a:hover{color:var(--farbe-cta)}
.karte-fuss{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--farbe-linie);font-size:.92rem}
.karte-fuss a{font-weight:700;text-decoration:none}

@media (max-width:980px){
  .warum-bild{aspect-ratio:16/10}
}

/* ---------- Bewertungen: „Schon mit uns gearbeitet?" ---------- */
.mitmachen{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:center}
.mitmachen p{margin-bottom:0;color:var(--farbe-text-leise)}
.mitmachen-aktion{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mitmachen-aktion span{font-size:.9rem;color:var(--farbe-text-leise)}
@media (max-width:820px){
  .mitmachen{grid-template-columns:1fr;gap:22px}
}

/* ---------- Hero-Hintergrundbild auf Unterseiten (erst ab Desktop) ---------- */
@media (min-width:1200px){
  .seiten-kopf.hat-bild::before{
    background-image:linear-gradient(100deg,rgba(7,29,48,.95) 0%,rgba(10,40,66,.86) 46%,rgba(13,50,82,.68) 100%),var(--kopf-bild);
    background-size:cover;background-position:center right;
  }
}
/* ---------- Galerie mit echten Motiven ---------- */
.galerie-bild{margin:0;border-radius:var(--radius-gross);overflow:hidden;background:var(--farbe-flaeche)}
.galerie-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.bild-hinweis{margin:20px 0 0;font-size:.85rem;color:var(--farbe-text-leise)}

/* ---------- grosse Leistungs-Checkliste ---------- */
.umfang-gross{gap:14px 34px}
.umfang-gross li{font-size:1.04rem}

/* ---------- Leistungsdetails auf den Stadt-Seiten ---------- */
.leistungs-details{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.leistungs-detail{background:#fff;border:1px solid var(--farbe-linie);border-radius:var(--radius-gross);padding:26px}
.leistungs-detail h3{font-size:1.18rem;margin-bottom:.5em}
.leistungs-detail>p{color:var(--farbe-text-leise);font-size:.98rem}
.leistungs-detail .umfang{grid-template-columns:1fr;gap:8px;margin-bottom:14px}
.leistungs-detail .umfang li{font-size:.95rem}
@media (max-width:820px){ .leistungs-details{grid-template-columns:1fr} }

/* ---------- Aktions-Karte auf der Startseite ---------- */
.aktion-karte{
  display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-left:5px solid var(--farbe-sekundaer);border-radius:var(--radius-gross);padding:34px 36px;
}
.aktion-karte h2{margin-bottom:.4em}
.aktion-karte p{color:rgba(255,255,255,.82);margin-bottom:0}
.aktion-aktion{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.aktion-aktion span{font-size:.9rem;color:rgba(255,255,255,.7)}
@media (max-width:820px){
  .aktion-karte{grid-template-columns:1fr;gap:22px;padding:26px 22px}
}

/* Linkzeile unter dem Leistungsraster: alle übrigen Leistungsseiten */
.leistungs-zeile{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--farbe-linie);
  font-size:.93rem;line-height:1.4;
}
.leistungs-zeile>span{font-weight:700;color:var(--farbe-text-leise);margin-right:4px}
.leistungs-zeile a{
  padding:6px 12px;border:1px solid var(--farbe-linie);border-radius:999px;
  font-weight:600;color:var(--farbe-text);background:#fff;
}
.leistungs-zeile a:hover{border-color:var(--farbe-cta);color:var(--farbe-cta)}
.dunkel .leistungs-zeile{border-top-color:rgba(255,255,255,.16)}
.dunkel .leistungs-zeile a{background:transparent;border-color:rgba(255,255,255,.24);color:#fff}