/*
Theme Name: nobleclean
Theme URI: https://nobleclean.de
Author: nobleclean
Description: Theme fuer nobleclean Hannover - Gebaeudereinigung sowie Alltagsbegleitung und Haushaltshilfe. Inhalte werden ueber Seiten, Menues, den Customizer und Shortcodes gepflegt.
Version: 3.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: nobleclean
*/

/* ============================================================
   nobleclean – gemeinsames Stylesheet
   Navy/Blau = Gebäudereinigung · Leinen/Grün = Haushaltshilfe
   ============================================================ */
:root{
  --navy:#032D44; --blau:#60A9D4; --moos:#032D44;
  --leinen:#EDE7DD; --papier:#FBFAF8; --kohle:#1C2B33;
  --grau:#5D6B73; --linie:#DCD5CA;
  --display:"Fraunces",Georgia,serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--papier);color:var(--kohle);font-family:var(--body);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--navy);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.4vw,3.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.1vw,2.3rem);letter-spacing:-.015em}
h3{font-size:1.18rem;line-height:1.3}
p{margin:0 0 1.1em}
a{color:var(--navy)}
img{max-width:100%;display:block}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin:0 0 1rem}
.eyebrow.gruen{color:var(--moos)}
.lead{font-size:1.18rem;color:var(--grau);line-height:1.6}
section{padding:74px 0}
.sec-line{border-top:1px solid var(--linie)}
.leinen{background:var(--leinen)}

/* --- Buttons --- */
.btn{display:inline-block;padding:15px 28px;border-radius:2px;text-decoration:none;font-weight:600;font-size:1rem;transition:transform .18s ease,background .18s ease,color .18s ease;border:0;cursor:pointer;font-family:var(--body)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#054460;transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--navy);color:var(--navy);background:none}
.btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-hell{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:none}
.btn-hell:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.btn-gruen{background:var(--moos);color:#fff}
.btn-gruen:hover{background:#054460;transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* --- Navigation --- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.nav img{height:38px;width:auto}
.menue{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.menue > li{position:relative}
.menue a{text-decoration:none;font-size:.98rem;font-weight:500;color:var(--kohle);white-space:nowrap}
.menue a:hover,.menue a[aria-current="page"]{color:var(--blau)}
.menue .tel{font-weight:600;color:var(--navy)}
.auf{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:.98rem;font-weight:500;color:var(--kohle)}
.auf:hover{color:var(--blau)}
.auf svg{transition:transform .2s ease}
.auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.auf:focus-visible,.burger:focus-visible,.menue a:focus-visible{outline:2px solid var(--blau);outline-offset:4px}
.untermenue{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:268px;
  background:var(--papier);border:1px solid var(--linie);border-radius:3px;
  box-shadow:0 12px 30px rgba(3,45,68,.13);list-style:none;margin:0;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.hat-unter:hover .untermenue,.hat-unter:focus-within .untermenue,.untermenue.offen{opacity:1;visibility:visible;transform:none}
.untermenue li + li{border-top:1px solid var(--linie)}
.untermenue a{display:block;padding:13px 16px;font-size:.95rem;line-height:1.35}
.untermenue a:hover{background:var(--leinen);color:var(--navy)}
.untermenue .u-hinweis{display:block;font-size:.8rem;color:var(--grau);margin-top:2px;font-weight:400}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--navy)}

@media(max-width:960px){
  .burger{display:block}
  .menue{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--papier);border-bottom:1px solid var(--linie);box-shadow:0 14px 26px rgba(3,45,68,.1);padding:8px 24px 20px;display:none}
  .menue.offen{display:flex}
  .menue > li{border-top:1px solid var(--linie)}
  .menue > li > a,.auf{padding:15px 0;width:100%;font-size:1.05rem}
  .menue > li > a{display:block}
  .auf{justify-content:space-between}
  .untermenue{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;border:0;border-left:2px solid var(--blau);border-radius:0;min-width:0;margin:0 0 12px;padding:0 0 0 16px;background:none}
  .untermenue.offen{display:block}
  .hat-unter:hover .untermenue,.hat-unter:focus-within .untermenue{display:none}
  .hat-unter:hover .untermenue.offen,.hat-unter:focus-within .untermenue.offen{display:block}
  .untermenue a{padding:12px 0}
}

/* --- Seitenkopf (Unterseiten) --- */
.seitenkopf{padding:56px 0 46px;border-bottom:1px solid var(--linie)}
.seitenkopf.gruen{background:var(--leinen);border-bottom:0}
.brotkrume{font-size:.86rem;color:var(--grau);margin:0 0 22px}
.brotkrume a{color:var(--grau);text-decoration:none}
.brotkrume a:hover{color:var(--blau)}
.brotkrume span{margin:0 8px;opacity:.6}

/* --- Startseite: Hero + Bereiche --- */
.hero{padding:70px 0 0}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.4rem)}
.hero h1 em{font-style:normal;color:var(--blau)}
.bereiche{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:50px;padding-bottom:74px}
.bereich{padding:38px 34px;border-radius:3px;text-decoration:none;display:block;transition:transform .2s ease,box-shadow .2s ease}
.bereich:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(3,45,68,.12)}
.b-blau{background:var(--navy);color:#EAF2F6}
.b-blau h3{color:#fff}
.b-leinen{background:var(--leinen);border-left:3px solid var(--moos)}
.bereich .k{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:14px}
.b-blau .k{color:var(--blau)}
.b-leinen .k{color:var(--moos)}
.bereich h3{font-size:1.5rem;margin-bottom:.45em}
.bereich p{font-size:1rem;margin:0 0 1.2em}
.b-blau p{color:#B7CEDA}
.b-leinen p{color:#4A565E}
.bereich .pfeil{font-weight:600;font-size:.98rem}
.b-blau .pfeil{color:#fff}
.b-leinen .pfeil{color:var(--navy)}

/* --- Teaser-Karten mit Weiterleitung --- */
.teaser-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.teaser{display:flex;flex-direction:column;background:var(--papier);border:1px solid var(--linie);border-radius:3px;padding:30px 28px;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.teaser:hover{border-color:var(--blau);transform:translateY(-3px);box-shadow:0 10px 26px rgba(3,45,68,.08)}
.teaser h3{margin-bottom:.45em}
.teaser p{font-size:.97rem;color:var(--grau);flex:1}
.teaser .pfeil{font-weight:600;font-size:.95rem;color:var(--navy);margin-top:6px}
.teaser.gruen:hover{border-color:var(--moos)}
.teaser.gruen .pfeil{color:var(--moos)}

/* --- Leistungslisten --- */
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--linie);font-size:1.01rem}
.liste li:last-child{border-bottom:0}
.liste li::before{content:"";position:absolute;left:2px;top:21px;width:13px;height:2px;background:var(--blau)}
.liste.gruen li::before{background:var(--moos)}
.liste.nein li::before{background:#A6B0B6}
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:40px}
.spalte-titel{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.spalte-titel h3{margin:0}
.tag{font-size:.71rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.tag-ja{background:#E4EFF6;color:var(--moos)}
.tag-nein{background:#E8E3DA;color:#5D6B73}

/* --- Branchen --- */
.branchen{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:42px}
.branche{border-top:2px solid var(--blau);padding-top:16px}
.branche h3{font-size:1rem;margin-bottom:.3em}
.branche p{font-size:.92rem;color:var(--grau);margin:0}

/* --- Bildband --- */
.bildband{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.bildband img{border-radius:3px;object-fit:cover;width:100%;max-height:420px}

/* --- Schritte --- */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px}
.schritte.drei{grid-template-columns:repeat(3,1fr)}
.schritt .nr{font-family:var(--display);font-size:2.5rem;color:var(--blau);line-height:1;display:block;margin-bottom:12px}
.gruen-schritte .nr{color:var(--moos)}
.schritt h3{font-size:1.05rem;margin-bottom:.4em}
.schritt p{font-size:.95rem;color:var(--grau);margin:0}

/* --- Merkkarte --- */
.merkkarte{background:var(--papier);border-radius:3px;padding:32px 30px;border-left:3px solid var(--moos)}
.merkkarte .zahl{font-family:var(--display);font-size:3rem;line-height:1;color:var(--navy);display:block;margin-bottom:6px}
.merkkarte p{font-size:1rem;margin:0 0 1.3em;color:#3E4A52}
.merkkarte p:last-child{margin-bottom:0}
.merkkarte hr{border:0;border-top:1px solid var(--linie);margin:20px 0}
.pf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}

/* --- Rechner --- */
.rechner{background:var(--navy);color:#EAF2F6}
.rechner h2{color:#fff}
.rechner .lead{color:#B7CEDA}
.rechner-box{margin-top:36px;background:rgba(255,255,255,.045);border:1px solid rgba(96,169,212,.35);border-radius:4px;overflow:hidden}
.rechner-frage{padding:28px 32px;border-bottom:1px solid rgba(96,169,212,.22)}
.rechner-frage > label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blau);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid rgba(255,255,255,.28);background:none;color:#EAF2F6;font-family:var(--body);font-size:1rem;font-weight:500;padding:12px 22px;border-radius:2px;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--blau)}
.chip[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:var(--navy);font-weight:600}
.chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ergebnis{padding:32px;background:rgba(96,169,212,.10)}
.ergebnis-zahl{font-family:var(--display);font-size:clamp(2.4rem,6.5vw,3.6rem);line-height:1;color:#fff;display:block}
.ergebnis-label{font-size:1.02rem;color:#B7CEDA;margin-top:10px;display:block}
.ergebnis-detail{margin-top:22px;padding-top:20px;border-top:1px solid rgba(96,169,212,.28);font-size:.96rem;color:#C6DBE5}
.ergebnis-detail strong{color:#fff;font-weight:600}
.fussnote{font-size:.85rem;color:#8FAEBD;margin-top:20px;line-height:1.55}

/* --- Orte --- */
.orte{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none;padding:0}
.orte li{background:var(--papier);border:1px solid var(--linie);padding:9px 18px;border-radius:2px;font-size:.97rem}

/* --- FAQ --- */
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:1.06rem;color:var(--navy);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.6rem;font-weight:400;color:var(--blau)}
.faq.gruen summary::after{color:var(--moos)}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.faq .antwort{padding:0 40px 20px 0;color:var(--grau)}
.faq .antwort p:last-child{margin-bottom:0}

/* --- Stellen --- */
.stellen{margin-top:44px;border-top:1px solid var(--linie)}
.stelle{border-bottom:1px solid var(--linie)}
.stelle summary{cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;display:block}
.stelle summary::-webkit-details-marker{display:none}
.stelle summary::after{content:"+";position:absolute;right:4px;top:24px;font-size:1.7rem;font-weight:400;color:var(--blau)}
.stelle[open] summary::after{content:"–"}
.stelle summary:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.stelle-titel{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--navy);display:block;margin-bottom:8px}
.stelle-meta{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:.8rem;font-weight:500;background:var(--leinen);color:#42505A;padding:5px 12px;border-radius:2px}
.pill.gruen{background:#E4EFF6;color:var(--moos)}
.stelle-inhalt{padding:0 0 30px;color:var(--grau)}
.stelle-inhalt h4{font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:24px 0 10px}
.stelle-inhalt .liste li{font-size:.98rem}

/* --- Vorteile --- */
.vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:42px}
.vorteil{background:var(--papier);border:1px solid var(--linie);padding:26px 24px;border-radius:3px}
.vorteil h3{font-size:1.05rem;margin-bottom:.4em}
.vorteil p{font-size:.95rem;color:var(--grau);margin:0}

/* --- CTA-Band --- */
.cta{background:var(--navy);color:#EAF2F6}
.cta h2{color:#fff}
.cta .lead{color:#B7CEDA}
.cta.gruen{background:var(--moos)}
.cta.gruen .lead{color:#B7CEDA}
.cta.gruen .eyebrow{color:#60A9D4}

/* --- Formular --- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:42px;align-items:start}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:8px}
.cta.gruen .feld label{color:#60A9D4}
.feld input,.feld textarea,.feld select{width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;font-family:var(--body);font-size:1rem;border-radius:2px}
.feld select option{background:var(--navy);color:#fff}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid #fff;outline-offset:1px;border-color:transparent}
.feld textarea{min-height:112px;resize:vertical}
.feld input[type="file"]{padding:11px 14px;font-size:.94rem}
.hinweis{font-size:.84rem;color:#9FBDCC;margin-top:14px}
.cta.gruen .hinweis{color:#60A9D4}
.direkt{border-left:2px solid var(--blau);padding-left:26px}
.cta.gruen .direkt{border-left-color:#60A9D4}
.direkt .zeile{margin-bottom:24px}
.direkt .zeile:last-child{margin-bottom:0}
.direkt .k{font-size:.77rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:5px}
.cta.gruen .direkt .k{color:#60A9D4}
.direkt .v{font-size:1.2rem;color:#fff;text-decoration:none;font-weight:500}
.direkt .v:hover{text-decoration:underline}

/* --- Fuß --- */
.fuss{background:var(--navy);color:#9FBDCC;padding:58px 0 30px;font-size:.94rem}
.fuss-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fuss h4{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blau);margin:0 0 14px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:9px}
.fuss a{color:#C6DBE5;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .marke{font-family:var(--display);font-size:1.5rem;color:#fff;margin-bottom:12px}
.fuss-unten{margin-top:44px;padding-top:22px;border-top:1px solid rgba(96,169,212,.25);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.88rem}

/* --- Reveal --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.sichtbar{opacity:1;transform:none}

@media(max-width:900px){
  .teaser-reihe,.branchen,.vorteile{grid-template-columns:1fr 1fr}
  .fuss-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  body{font-size:17px}
  section{padding:52px 0}
  .hero{padding:44px 0 0}
  .bereiche{grid-template-columns:1fr;gap:18px;margin-top:36px;padding-bottom:52px}
  .pf-grid,.split,.kontakt-grid,.bildband{grid-template-columns:1fr;gap:34px}
  .schritte,.schritte.drei{grid-template-columns:1fr 1fr;gap:26px}
  .rechner-frage,.ergebnis{padding:24px 20px}
}
@media(max-width:560px){
  .teaser-reihe,.branchen,.vorteile,.schritte,.schritte.drei,.fuss-grid{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* --- Anfrage-Router im Hero --- */
.router{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  margin-top:34px;padding:24px 26px;
  background:var(--papier);border:1px solid var(--linie);border-radius:3px;
}
.router-feld{flex:1 1 210px;min-width:180px}
.router-feld label{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blau);margin-bottom:8px;
}
.router-feld select{
  width:100%;padding:13px 14px;border:1px solid var(--linie);border-radius:2px;
  background:#fff;color:var(--kohle);font-family:var(--body);font-size:1rem;
}
.router-feld select:focus{outline:2px solid var(--blau);outline-offset:1px}
.router .btn{flex:0 0 auto}
@media(max-width:620px){
  .router{padding:20px}
  .router .btn{width:100%}
}

/* --- Referenzen --- */
.referenzen{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:42px;background:var(--linie);border:1px solid var(--linie)}
.referenz{background:var(--papier);padding:26px 22px}
.referenz h3{font-size:1.02rem;margin-bottom:.4em}
.referenz p{font-size:.92rem;color:var(--grau);margin:0}
@media(max-width:900px){.referenzen{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.referenzen{grid-template-columns:1fr}}

/* ============================================================
   WordPress-Anpassungen
   ============================================================ */

/* WP-Menue: sub-menu verhaelt sich wie .untermenue */
.menue .sub-menu{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:268px;
  background:var(--papier);border:1px solid var(--linie);border-radius:3px;
  box-shadow:0 12px 30px rgba(3,45,68,.13);list-style:none;margin:0;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.menue > li:hover > .sub-menu,
.menue > li:focus-within > .sub-menu,
.menue .sub-menu.offen{opacity:1;visibility:visible;transform:none}
.menue .sub-menu li + li{border-top:1px solid var(--linie)}
.menue .sub-menu a{display:block;padding:13px 16px;font-size:.95rem;line-height:1.35}
.menue .sub-menu a:hover{background:var(--leinen);color:var(--navy)}
.menue > li.menu-item-has-children > a{display:inline-flex;align-items:center}
.untertoggle{
  background:none;border:0;padding:4px 6px;margin-left:2px;cursor:pointer;
  color:inherit;line-height:0;
}
.untertoggle svg{transition:transform .2s ease}
.untertoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.untertoggle:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.menue .current-menu-item > a,
.menue .current-menu-ancestor > a{color:var(--blau)}

@media(max-width:960px){
  .menue .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    box-shadow:none;border:0;border-left:2px solid var(--blau);border-radius:0;
    min-width:0;margin:0 0 12px;padding:0 0 0 16px;background:none;
  }
  .menue .sub-menu.offen{display:block}
  .menue > li:hover > .sub-menu,.menue > li:focus-within > .sub-menu{display:none}
  .menue > li:hover > .sub-menu.offen,.menue > li:focus-within > .sub-menu.offen{display:block}
  .menue .sub-menu a{padding:12px 0}
  .menue > li.menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .menue > li.menu-item-has-children > .sub-menu{flex:1 0 100%}
  .untertoggle{padding:15px 0 15px 12px}
}

/* Inhalte aus dem WP-Editor */
.entry > *:last-child{margin-bottom:0}
.entry ul{list-style:none;margin:0 0 1.4em;padding:0}
.entry ul li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--linie);font-size:1.01rem}
.entry ul li:last-child{border-bottom:0}
.entry ul li::before{content:"";position:absolute;left:2px;top:21px;width:13px;height:2px;background:var(--blau)}
.entry ol{padding-left:22px}
.entry img{border-radius:3px;margin:12px 0}
.entry blockquote{border-left:3px solid var(--blau);margin:0 0 1.4em;padding:6px 0 6px 22px;color:var(--grau);font-style:normal}
.entry table{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.entry th,.entry td{border:1px solid var(--linie);padding:11px 14px;text-align:left;font-size:.98rem}
.entry th{background:var(--leinen);font-weight:600;color:var(--navy)}
.entry .wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 1.4em}
.entry .wp-block-button__link{
  background:var(--navy);color:#fff;border-radius:2px;padding:15px 28px;
  font-weight:600;font-size:1rem;text-decoration:none;
}
.entry .wp-block-button.is-style-outline .wp-block-button__link{background:none;border:1.5px solid var(--navy);color:var(--navy)}

/* Meldungen nach Formularversand */
.meldung{padding:16px 20px;border-radius:2px;margin-bottom:22px;font-size:.98rem}
.meldung-ok{background:#E4EFF6;color:#032D44;border-left:3px solid var(--moos)}
.meldung-fehler{background:#E8E3DA;color:#5D6B73;border-left:3px solid #A6B0B6}
.cta .meldung-ok{background:rgba(255,255,255,.14);color:#fff;border-left-color:#fff}
.cta .meldung-fehler{background:rgba(255,255,255,.14);color:#fff;border-left-color:#fff}
.honigtopf{position:absolute!important;left:-9999px!important}

/* Barrierefreiheit */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;clip:auto;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:2px;
}

/* Admin-Leiste */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

/* ============================================================
   Vollbreite Farbbänder im Editor-Inhalt
   ============================================================ */
body{overflow-x:hidden}

.band{
  position:relative;
  margin:72px calc(50% - 50vw);
  padding:74px calc(50vw - 50%);
}
.band > *:first-child{margin-top:0}
.band > *:last-child{margin-bottom:0}

.band-navy{background:var(--navy);color:#EAF2F6}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .lead{color:#B7CEDA}
.band-navy .eyebrow{color:var(--blau)}
.band-navy p{color:#C6DBE5}
.band-navy a:not(.btn){color:#fff}

.band-leinen{background:var(--leinen)}

.band-gruen{background:var(--moos);color:#EAF2F6}
.band-gruen h2,.band-gruen h3{color:#fff}
.band-gruen .lead,.band-gruen p{color:#B7CEDA}
.band-gruen .eyebrow{color:#60A9D4}
.band-gruen a:not(.btn){color:#fff}
.band-gruen .feld label{color:#60A9D4}
.band-gruen .direkt{border-left-color:#60A9D4}
.band-gruen .direkt .k{color:#60A9D4}
.band-gruen .hinweis{color:#60A9D4}

/* Listen im Band */
.band-navy .entry ul li,.band-navy ul li{border-bottom-color:rgba(96,169,212,.28)}
.band-gruen ul li{border-bottom-color:rgba(255,255,255,.25)}

/* Rechner im Band */
.band-navy .rechner-box{margin-top:34px}

@media(max-width:860px){
  .band{margin:52px calc(50% - 50vw);padding:52px calc(50vw - 50%)}
}

/* ============================================================
   Zwei Spalten im Editor-Inhalt
   ============================================================ */
.zwei{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;margin:0 0 1.4em}
.zwei > *:last-child{margin-bottom:0}
.zwei-gleich{grid-template-columns:1fr 1fr;gap:46px}
.zwei h2:first-child,.zwei h3:first-child{margin-top:0}
@media(max-width:860px){.zwei,.zwei-gleich{grid-template-columns:1fr;gap:34px}}

/* Spalte mit Ja/Nein-Kennzeichnung */
.spalte > *:last-child{margin-bottom:0}
.spalte .liste{margin-bottom:0}

/* ============================================================
   Abstände im Editor-Inhalt – ruhiger Textrhythmus
   ============================================================ */
.entry > h2,.band > h2{margin:3.6rem 0 1rem}
.entry > h2:first-child,.band > h2:first-child{margin-top:0}
.entry > h3,.band > h3{margin:2.4rem 0 .6rem}
.entry > h3:first-child{margin-top:0}
.entry > p{margin:0 0 1.15em}
.entry > p.lead{margin:0 0 1.6em}
.entry > ul,.entry > ol{margin:.4rem 0 2.2rem}
.entry > .teaser-reihe,.entry > .bereiche,
.band > .teaser-reihe,.band > .bereiche{margin:2.4rem 0 3rem}
.entry > .schritte,.band > .schritte{margin:2.4rem 0 3rem}
.entry > .orte,.band > .orte{margin:1.4rem 0 2.6rem}
.entry > .faq,.band > .faq{margin:2rem 0 2.6rem}
.entry > .stellen,.band > .stellen{margin:2.4rem 0 3rem}
.entry > .zwei,.band > .zwei{margin:2.4rem 0 3rem}
.entry > .merkkarte{margin:0 0 2.2rem}
.entry > p > .btn,.entry > p .btn{margin-top:.6rem}
.entry > .kontakt-grid,.band > .kontakt-grid{margin:2.4rem 0 0}
.entry > .fussnote,.band > .fussnote{margin:1.6rem 0 0}

/* Überschrift direkt nach einem Raster braucht mehr Luft */
.entry > .teaser-reihe + h2,.entry > .schritte + h2,
.entry > .zwei + h2,.entry > ul + h2{margin-top:4rem}

/* ============================================================
   Lesbarkeit am Desktop
   Fließtext in ruhiger Spaltenbreite, Raster über die volle Breite.
   ============================================================ */
.entry,
.band{
  display:grid;
  grid-template-columns:
    [voll-start text-start] min(46rem, 100%)
    [text-end] minmax(0, 1fr)
    [voll-end];
}
.entry > *,
.band > *{grid-column:text-start / text-end;min-width:0}

/* Diese Bausteine dürfen die ganze Breite nutzen */
.entry > .band,
.entry > .router,
.entry > .teaser-reihe,   .band > .teaser-reihe,
.entry > .bereiche,       .band > .bereiche,
.entry > .schritte,       .band > .schritte,
.entry > .zwei,           .band > .zwei,
.entry > .vorteile,       .band > .vorteile,
.entry > .branchen,       .band > .branchen,
.entry > .stellen,        .band > .stellen,
.entry > .kontakt-grid,   .band > .kontakt-grid,
.entry > .orte,           .band > .orte,
.entry > .rechner-box,    .band > .rechner-box,
.entry > .fussnote,       .band > .fussnote,
.entry > h1{grid-column:voll-start / voll-end}

.entry > h1{max-width:54rem}

/* ------------------------------------------------------------
   Abstände neu: im Raster fallen Außenabstände nicht zusammen,
   deshalb wird der Rhythmus ausschließlich über margin-bottom
   und einen kleinen Zuschlag über Überschriften gesteuert.
   ------------------------------------------------------------ */
.entry > *,
.band > *{margin-top:0;margin-bottom:1.15em}

.entry > h2,.band > h2{margin-top:2.7rem;margin-bottom:.85rem}
.entry > h2:first-child,.band > h2:first-child{margin-top:0}
.entry > h3,.band > h3{margin-top:1.9rem;margin-bottom:.5rem}
.entry > h3:first-child,.band > h3:first-child{margin-top:0}
.entry > h1{margin-bottom:.85rem}

.entry > p.lead,.band > p.lead{margin-bottom:1.5em}
.entry > p.eyebrow,.band > p.eyebrow{margin-bottom:.9rem}
.entry > p.eyebrow + h2,.band > p.eyebrow + h2{margin-top:0}

.entry > ul,.entry > ol,.band > ul,.band > ol{margin-bottom:1.9rem}

.entry > .router{margin-bottom:2.4rem}
.entry > .teaser-reihe,.band > .teaser-reihe,
.entry > .bereiche,.band > .bereiche,
.entry > .schritte,.band > .schritte,
.entry > .zwei,.band > .zwei,
.entry > .vorteile,.band > .vorteile,
.entry > .branchen,.band > .branchen,
.entry > .stellen,.band > .stellen,
.entry > .faq,.band > .faq,
.entry > .orte,.band > .orte{margin-bottom:1.9rem}

.entry > .kontakt-grid,.band > .kontakt-grid{margin-bottom:0}
.entry > .merkkarte{margin-bottom:1.9rem}
.entry > .fussnote,.band > .fussnote{margin-top:1.4rem;margin-bottom:0}
.entry > .rechner-box,.band > .rechner-box{margin-top:1.8rem;margin-bottom:0}

/* Farbband: waagerecht über den Bildschirmrand hinaus */
.band{
  margin-top:3.6rem;
  margin-bottom:3.6rem;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:4.4rem calc(50vw - 50%);
}
.entry > .band:first-child{margin-top:0}
.entry > .band:last-child{margin-bottom:0}

/* Der Seitenkopf nutzt dieselbe Spaltenbreite */
.seitenkopf .narrow{max-width:46rem}
.hero .narrow{max-width:46rem}

@media(max-width:860px){
  .band{
    margin-top:2.6rem;margin-bottom:2.6rem;
    padding:2.8rem calc(50vw - 50%);
  }
  .entry > h2,.band > h2{margin-top:2.2rem}
}

/* ============================================================
   Korrekturen 1.5
   ============================================================ */

/* Seitenkopf und Inhalt beginnen an derselben Kante.
   Vorher war der Kopf mittig, der Inhalt links – das ergab
   zwei verschiedene Anfangspunkte auf einer Seite. */
.seitenkopf .wrap.narrow,
.hero .wrap.narrow{max-width:1080px}
.seitenkopf .wrap.narrow > *,
.hero .wrap.narrow > *{max-width:46rem}
.seitenkopf .wrap.narrow > h1,
.hero .wrap.narrow > h1{max-width:54rem}

/* Schaltflächen dürfen im Raster nicht auf volle Breite wachsen */
.entry > .btn,.band > .btn,
.entry > p > .btn,.band > p > .btn{justify-self:start}
.entry .btn,.band .btn{display:inline-block;width:auto}
.entry > p:has(> .btn),.band > p:has(> .btn){
  display:flex;flex-wrap:wrap;gap:14px;
}

/* Mehrere Schaltflächen nebeneinander */
.btn-reihe{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 1.15em}

/* Kontaktbereich: Formular und Daten sauber getrennt */
.kontakt-grid{align-items:start}
.kontakt-grid > div{min-width:0}
.direkt{padding-top:4px}

@media(max-width:560px){
  .entry > p:has(> .btn),.band > p:has(> .btn){display:block}
  .entry .btn,.band .btn{width:100%;text-align:center}
  .entry > p > .btn + .btn,.band > p > .btn + .btn{margin-top:12px}
}

/* ============================================================
   1.6 – Grün entfernt
   Es bleiben ausschließlich die Markenfarben Navy und Hellblau
   sowie die neutralen Töne Leinen und Papier.
   ============================================================ */
:root{--moos:#032D44}

.eyebrow.gruen{color:var(--blau)}

.tag-ja{background:#E4EFF6;color:var(--navy)}
.tag-nein{background:#E8E3DA;color:#5D6B73}

.liste.gruen li::before{background:var(--blau)}
.liste.nein li::before{background:#A6B0B6}

.btn-gruen{background:var(--navy);color:#fff}
.btn-gruen:hover{background:#054460}

.band-gruen{background:var(--navy);color:#EAF2F6}
.band-gruen h2,.band-gruen h3{color:#fff}
.band-gruen .lead,.band-gruen p{color:#B7CEDA}
.band-gruen .eyebrow{color:var(--blau)}
.band-gruen a:not(.btn){color:#fff}
.band-gruen .feld label,
.band-gruen .direkt .k,
.band-gruen .hinweis{color:var(--blau)}
.band-gruen .direkt{border-left-color:var(--blau)}
.band-gruen ul li{border-bottom-color:rgba(96,169,212,.28)}

.cta.gruen{background:var(--navy)}
.cta.gruen .lead{color:#B7CEDA}
.cta.gruen .eyebrow,
.cta.gruen .feld label,
.cta.gruen .direkt .k,
.cta.gruen .hinweis{color:var(--blau)}
.cta.gruen .direkt{border-left-color:var(--blau)}

.pill.gruen{background:#E4EFF6;color:var(--navy)}

.teaser.gruen:hover{border-color:var(--blau)}
.teaser.gruen .pfeil{color:var(--navy)}

.b-leinen{border-left-color:var(--blau)}
.merkkarte{border-left-color:var(--blau)}
.gruen-schritte .nr{color:var(--blau)}
.faq.gruen summary::after{color:var(--blau)}

/* Schaltflächen innerhalb von Spalten stehen auf eigener Zeile */
.spalte p .btn,
.spalte .btn{margin-top:.4rem}
.spalte > p:last-child{margin-bottom:0}

/* ============================================================
   1.7 – Bilder
   Feste Seitenverhältnisse: die Fläche steht, bevor das Bild da
   ist. Dadurch springt beim Laden kein Text.
   ============================================================ */
.bild{margin:0;overflow:hidden;border-radius:3px;background:var(--leinen)}
.bild img{width:100%;height:100%;object-fit:cover;display:block}
.bild-breit{aspect-ratio:16/7}
.bild-flach{aspect-ratio:21/6}
.bild-hoch{aspect-ratio:4/5}

.entry > .bild,.band > .bild{margin:2.4rem 0 2.6rem}

/* Bild und Text nebeneinander */
.bildtext{
  display:grid;
  grid-template-columns:minmax(0,46rem) minmax(0,1fr);
  gap:52px;align-items:center;
}
.bildtext.bild-links{grid-template-columns:minmax(0,1fr) minmax(0,46rem)}
.bildtext.bild-links .bildtext-text{order:2}
.bildtext.bild-links .bildtext-bild{order:1}
.bildtext-text > *:first-child{margin-top:0}
.bildtext-text > *:last-child{margin-bottom:0}
.bildtext-bild{
  margin:0;overflow:hidden;border-radius:3px;background:var(--leinen);
  aspect-ratio:4/5;max-height:460px;
}
.bildtext-bild img{width:100%;height:100%;object-fit:cover;display:block}
.bildtext-ohne > *:last-child{margin-bottom:0}

.entry > .bildtext,.band > .bildtext,
.entry > .bildtext-ohne,.band > .bildtext-ohne{
  grid-column:voll-start / voll-end;margin:2.4rem 0 2.6rem;
}

@media(max-width:860px){
  .bildtext,.bildtext.bild-links{grid-template-columns:1fr;gap:28px}
  .bildtext.bild-links .bildtext-text,
  .bildtext.bild-links .bildtext-bild{order:0}
  .bildtext-bild{aspect-ratio:16/10;max-height:none}
  .bild-flach{aspect-ratio:16/9}
  .bild-hoch{aspect-ratio:4/3}
}

/* Schaltfläche in einer Spalte steht immer auf eigener Zeile */
.spalte .knopfzeile{margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:14px}
.spalte .knopfzeile .btn{width:auto}
.spalte p + p{margin-top:0}
@media(max-width:560px){
  .spalte .knopfzeile{display:block}
  .spalte .knopfzeile .btn{width:100%;text-align:center}
}

/* ============================================================
   1.9 – Bilder sitzen bündig im Rahmen
   Die allgemeine Bildregel im Inhaltsbereich darf die festen
   Bildflächen nicht verschieben, sonst entsteht oben ein Streifen.
   ============================================================ */
.bild img,
.bildtext-bild img{
  margin:0;border-radius:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
}
.bild,.bildtext-bild{line-height:0;background:var(--leinen)}

/* ============================================================
   2.0 – Bildzuschnitt
   Weniger extremer Streifen, damit Motive erkennbar bleiben.
   ============================================================ */
.bild-flach{aspect-ratio:16/6}
.bild-breit{aspect-ratio:16/7}
@media(max-width:860px){
  .bild-flach{aspect-ratio:3/2}
  .bild-breit{aspect-ratio:3/2}
}

/* Stellen-Schilder einheitlich, ohne farbliche Hervorhebung */
.pill,.pill.gruen{background:none;color:var(--grau);padding:5px 0;font-size:.86rem}
.stelle-meta{gap:0 22px}
.stelle-meta .pill + .pill{position:relative;padding-left:22px}
.stelle-meta .pill + .pill::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:14px;margin-top:-7px;background:var(--linie);
}

/* Logo darf hochaufloesend sein, ohne die Kopfzeile zu sprengen */
.nav img,.nav .custom-logo{height:auto;max-height:44px;width:auto;image-rendering:auto}
@media(max-width:560px){.nav img,.nav .custom-logo{max-height:34px}}

/* Dezenter Verweis auf die Einsatzgebiete in der Fußzeile */
.fuss-gebiete{margin:34px 0 0;font-size:.9rem}
.fuss-gebiete a{color:#9FBDCC;text-decoration:none}
.fuss-gebiete a:hover{color:#fff;text-decoration:underline}

/* Ortsliste auf der Übersichtsseite: kompakt statt endlos */
.entry .ortsraster,
.entry h2 + ul.ortsliste{list-style:none;margin:0 0 2rem;padding:0}

/* Helles Logo in der Fußzeile */
.marke-bild{margin-bottom:16px}
.marke-bild img{max-width:210px;width:100%;height:auto;display:block}
@media(max-width:560px){.marke-bild img{max-width:180px}}

/* Zustimmung zur Datenschutzerklärung */
.zustimmung{display:flex;align-items:flex-start;gap:12px;margin:6px 0 22px}
.zustimmung input[type="checkbox"]{
  flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--blau);cursor:pointer;
}
.zustimmung label{
  font-size:.93rem;line-height:1.5;color:#C6DBE5;
  text-transform:none;letter-spacing:0;font-weight:400;margin:0;cursor:pointer;
}
.zustimmung a{color:#fff;text-decoration:underline}
.zustimmung input[type="checkbox"]:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zustimmung .pflicht{color:var(--blau)}

/* ============================================================
   3.0 – Logo in der Fußzeile: kleiner und sauber ausgerichtet
   ============================================================ */
.marke-bild{
  margin:0 0 20px;
  /* Optischer Ausgleich: die Oberkante des Logos soll auf derselben
     Höhe sitzen wie die Überschriften der Spalten daneben. */
  padding-top:2px;
}
.marke-bild img{max-width:158px;width:100%;height:auto;display:block}

@media(max-width:900px){
  .marke-bild img{max-width:150px}
}
@media(max-width:560px){
  .marke-bild img{max-width:140px}
}

/* ============================================================
   3.1 – Fußzeile: gleichmäßiges Raster
   ============================================================ */

/* Spalten gleichmäßiger verteilen, damit rechts nichts umbricht
   und links keine Lücke entsteht */
.fuss-grid{
  grid-template-columns:1.15fr repeat(3, minmax(0, 1fr));
  gap:36px 46px;
  align-items:start;
}

/* Jede Spalte beginnt mit einem Kopfelement gleicher Höhe.
   Dadurch starten Adresse und Links auf derselben Zeile. */
.fuss-grid > div > *:first-child{
  min-height:26px;
  display:flex;
  align-items:flex-end;
  margin:0 0 20px;
}
.fuss h4{line-height:1.2}
.fuss .marke{line-height:1;font-size:1.4rem}
.fuss .marke-bild{padding-top:0}
.fuss .marke-bild img{max-width:150px}

/* Gleicher Zeilenabstand in allen Spalten */
.fuss ul{line-height:1.5}
.fuss li{margin:0 0 13px}
.fuss li:last-child{margin-bottom:0}
.fuss-grid p{margin:0 0 14px;line-height:1.75}
.fuss-grid p:last-child{margin-bottom:0}

/* Abstand zwischen Anschrift und Kontaktdaten */
.fuss-grid > div > p + p{margin-top:0}

@media(max-width:900px){
  .fuss-grid{grid-template-columns:1fr 1fr;gap:32px 40px}
}
@media(max-width:560px){
  .fuss-grid{grid-template-columns:1fr;gap:28px}
  .fuss-grid > div > *:first-child{min-height:0;margin-bottom:14px}
}

/* ============================================================
   3.2 – Ersatzschriften
   Greifen, wenn die Google-Schriften abgeschaltet oder noch
   nicht geladen sind. Bewusst nah am Original gewaehlt.
   ============================================================ */
:root{
  --display:"Fraunces",Charter,"Bitstream Charter","Iowan Old Style",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}