/* Paradiesvogel Reinigung & Entrümpelung — styles.css
   Design-System: "Blue-Collar Authority"
   Farben aus dem Logo: Dunkelgrün #2e4d43 / #234e42, Akzent-Orange aus der Marke. */

/* ---------- 1. Tokens ---------- */
:root{
  --farbe-primaer:#234e42;
  --farbe-primaer-tief:#17332c;
  --farbe-primaer-hell:#2f6455;
  --farbe-sekundaer:#fc6e05;      /* Marken-Orange, nur als Akzentfläche/Grafik */
  --farbe-cta:#c44f04;            /* abgedunkelt: weißer Text erreicht WCAG AA */
  --farbe-cta-hover:#a44003;

  --creme:#f8f5ed;
  --creme-2:#f1ece0;
  --weiss:#ffffff;
  --text:#18211d;
  --text-leise:#535f59;
  --rand:#e3ddd0;
  --rand-stark:#cfc7b6;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  --breite:1180px;
  --radius:14px;
  --radius-s:10px;
  --schatten:0 1px 2px rgba(24,33,29,.05),0 8px 24px -12px rgba(24,33,29,.18);
  --schatten-stark:0 2px 4px rgba(24,33,29,.06),0 24px 48px -20px rgba(24,33,29,.28);
  --abstand-sektion:72px;
}
@media (min-width:900px){ :root{ --abstand-sektion:104px; } }

@font-face{
  font-family:"Fraunces";
  src:url("/fonts/fraunces-latin.woff2") format("woff2");
  font-weight:500 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Das geschlossene Mobilmenü liegt per translateX rechts außerhalb.
     `clip` verhindert waagerechtes Scrollen, ohne – anders als `hidden` –
     einen Scroll-Container zu erzeugen (der position:sticky brechen würde). */
  overflow-x:clip;
}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;
  color:var(--text);background:var(--weiss);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
button{font:inherit;}
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:700;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;
  overflow-wrap:break-word;   /* Notbremse gegen Überlauf, ohne sichtbaren Trennstrich */
}
/* Aktive Silbentrennung nur dort, wo lange Komposita wie
   „Verkehrsschilderreinigung" sonst nicht in die Zeile passen (lang="de"). */
@media (max-width:520px){
  h1{hyphens:auto;}
}
h1{font-size:clamp(2.05rem,1.35rem + 3.1vw,3.6rem);}
h2{font-size:clamp(1.7rem,1.25rem + 2vw,2.7rem);}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.35rem);}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--farbe-sekundaer);outline-offset:2px;border-radius:4px;}

.container{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:20px;}
@media (min-width:900px){.container{padding-inline:28px;}}

.sektion{padding-top:var(--abstand-sektion);padding-bottom:var(--abstand-sektion);}
.sektion--creme{background:var(--creme);}
.sektion--gruen{background:var(--farbe-primaer-tief);color:var(--creme);}
.sektion--gruen h2{color:var(--weiss);}

.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--farbe-primaer);color:#fff;padding:12px 18px;}
.skip-link:focus{left:0;}

/* ---------- 3. Typo-Bausteine ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--farbe-primaer);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--farbe-sekundaer);border-radius:2px;flex:none;}
.sektion--gruen .eyebrow{color:#a8c9bd;}
.lead{font-size:1.08rem;color:var(--text-leise);max-width:60ch;}
.sektion--gruen .lead{color:#c9dbd4;}
.sektion-kopf{max-width:44rem;margin-bottom:44px;}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--radius-s);border:2px solid transparent;
  font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .12s ease;
  line-height:1.2;text-align:center;
}
.btn:active{transform:translateY(1px);}
.btn--cta{background:var(--farbe-cta);color:#fff;}
.btn--cta:hover{background:var(--farbe-cta-hover);}
.btn--gruen{background:var(--farbe-primaer);color:#fff;}
.btn--gruen:hover{background:var(--farbe-primaer-tief);}
.btn--outline{background:transparent;color:var(--farbe-primaer);border-color:var(--rand-stark);}
.btn--outline:hover{border-color:var(--farbe-primaer);background:var(--weiss);}
.btn--hell{background:var(--weiss);color:var(--farbe-primaer);}
.btn--hell:hover{background:var(--creme);}
.btn--gross{padding:17px 32px;font-size:1.05rem;}
.btn--block{display:flex;width:100%;}

/* ---------- 5. Kopfbereich ---------- */
.topbar{background:var(--farbe-primaer-tief);color:#c9dbd4;font-size:.83rem;}
.topbar .container{display:flex;justify-content:center;align-items:center;gap:10px;padding-block:9px;text-align:center;}
@media (max-width:767px){.topbar{display:none;}}

.kopfleiste{position:sticky;top:0;z-index:95;}
.kopf{background:var(--weiss);border-bottom:1px solid var(--rand);}
.kopf__inner{display:flex;align-items:center;gap:22px;padding-block:12px;}
.kopf__logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;}
.kopf__logo img{width:54px;height:auto;}
.kopf__logo span{display:none;}

.nav{display:none;margin-left:auto;}
@media (min-width:1000px){.nav{display:flex;align-items:center;gap:2px;}}
.nav a,.nav__trigger{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:9px 11px;border-radius:8px;border:0;background:none;
  font-size:.95rem;font-weight:500;color:var(--text);text-decoration:none;cursor:pointer;
}
.nav a:hover,.nav__trigger:hover{background:var(--creme);color:var(--farbe-primaer);}
.nav__item{position:relative;}
.nav__trigger svg{transition:transform .15s ease;}
.nav__item:hover .nav__trigger svg,.nav__item:focus-within .nav__trigger svg{transform:rotate(180deg);}
.nav__menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:270px;
  background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten-stark);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s ease;
}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:none;}
.nav__menu a{display:block;padding:9px 12px;font-size:.94rem;font-weight:500;}
.nav__menu .nav__alle{margin-top:6px;border-top:1px solid var(--rand);padding-top:12px;font-weight:700;color:var(--farbe-primaer);}
.nav__menu--zwei{min-width:460px;columns:2;column-gap:6px;}
.nav__menu--zwei a{break-inside:avoid;}
.nav__menu--zwei .nav__alle{column-span:all;}

.kopf__rechts{margin-left:auto;display:flex;align-items:center;gap:14px;}
@media (min-width:1000px){.kopf__rechts{margin-left:18px;}}
.kopf__tel{display:none;text-decoration:none;line-height:1.2;white-space:nowrap;}
@media (min-width:1180px){.kopf__tel{display:block;}}
.kopf__tel small{display:block;font-size:.72rem;color:var(--text-leise);font-weight:500;}
.kopf__tel strong{font-size:1.08rem;color:var(--farbe-primaer);letter-spacing:-.01em;}
.kopf__cta{display:none;}
@media (min-width:1000px){.kopf__cta{display:inline-flex;padding:13px 20px;white-space:nowrap;font-size:.96rem;}}

.burger{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--creme);border:1px solid var(--rand);border-radius:9px;
  padding:9px 13px;font-size:.9rem;font-weight:600;color:var(--farbe-primaer);cursor:pointer;
}
@media (min-width:1000px){.burger{display:none;}}
.burger span{display:block;width:17px;height:2px;background:currentColor;position:relative;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:currentColor;}
.burger span::before{top:-5px;} .burger span::after{top:5px;}

/* Mobil-Menü */
.mobilmenu{
  position:fixed;inset:0;z-index:120;background:var(--weiss);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .22s ease;visibility:hidden;
}
.mobilmenu[data-offen="1"]{transform:none;visibility:visible;}
.mobilmenu__top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--rand);}
.mobilmenu__schliessen{background:var(--creme);border:1px solid var(--rand);border-radius:9px;padding:9px 14px;font-weight:600;cursor:pointer;}
.mobilmenu__body{padding:8px 20px 32px;}
.mobilmenu__body a{display:block;padding:13px 0;border-bottom:1px solid var(--rand);text-decoration:none;font-weight:600;}
.mobilmenu__gruppe{margin-top:18px;}
.mobilmenu__gruppe > p{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise);margin:0 0 4px;}
.mobilmenu__gruppe a{font-weight:500;font-size:.97rem;}
.mobilmenu__aktionen{display:grid;gap:10px;margin-top:24px;}

/* Sticky-Action-Bar (mobil, OBEN) */
.aktionsbar{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--farbe-primaer-tief);padding:8px 14px;
}
@media (min-width:1000px){.aktionsbar{display:none;}}
.aktionsbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:12px 6px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.9rem;
}
.aktionsbar__anruf{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.25);}
.aktionsbar__angebot{background:var(--farbe-sekundaer);color:#18211d;}

/* ---------- 6. Hero ---------- */
.hero{position:relative;background:var(--farbe-primaer-tief);color:var(--creme);overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,#17332c 0%,#234e42 55%,#1b3d34 100%);
}
@media (min-width:1200px){
  .hero::before{
    background-image:linear-gradient(100deg,rgba(17,40,33,.985) 0%,rgba(17,40,33,.95) 42%,rgba(17,40,33,.72) 100%),url("/bilder/stock/hero-reinigung.jpg");
    background-size:cover;background-position:center right;
  }
}
.hero__inner{position:relative;display:grid;gap:40px;padding-block:52px 60px;}
@media (min-width:1000px){
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(380px,410px);gap:44px;align-items:start;padding-block:76px 88px;}
}
@media (min-width:1280px){
  .hero__inner{grid-template-columns:minmax(0,1fr) 430px;gap:56px;}
}
/* In den zweispaltigen Köpfen ist die Textspalte schmaler als der Container –
   die H1 skaliert deshalb flacher, damit sie nicht in 5–6 Zeilen zerfällt. */
.hero h1,.seitenkopf h1{font-size:clamp(1.72rem,1.05rem + 2.35vw,3.4rem);}
.hero h1{color:#fff;margin-bottom:20px;}
.hero h1 em{font-style:normal;color:#8fc4b0;}
.hero__sub{font-size:1.09rem;color:#cadcd5;max-width:46ch;margin-bottom:26px;}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);list-style:none;padding-left:0;}
.hero__trust li{display:flex;align-items:center;gap:8px;font-size:.94rem;font-weight:600;color:#dcebe5;}
.hero__trust svg{flex:none;color:#8fc4b0;}
.hero__eyebrow{color:#9fd0bd;}
.hero__eyebrow::before{background:var(--farbe-sekundaer);}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- 7. Formular ---------- */
.formkarte{
  background:var(--weiss);color:var(--text);border-radius:var(--radius);
  box-shadow:var(--schatten-stark);padding:26px 22px 24px;border:1px solid var(--rand);
}
@media (min-width:600px){.formkarte{padding:30px 28px 28px;}}
.formkarte__kopf{margin-bottom:18px;}
.formkarte__kopf h2,.formkarte__kopf h3{font-size:1.3rem;margin-bottom:6px;}
.formkarte__kopf p{font-size:.92rem;color:var(--text-leise);margin:0;}
.anfrage-formular .feld{margin-bottom:13px;}
.anfrage-formular .feld--paar{display:grid;gap:13px;}
@media (min-width:520px){.anfrage-formular .feld--paar{grid-template-columns:1fr 1fr;}}
.anfrage-formular label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px;}
.anfrage-formular input[type=text],
.anfrage-formular input[type=tel],
.anfrage-formular input[type=email],
.anfrage-formular select,
.anfrage-formular textarea{
  width:100%;padding:12px 13px;border:1.5px solid var(--rand-stark);border-radius:9px;
  font-family:inherit;font-size:1rem;background:#fdfcf9;color:var(--text);
}
.anfrage-formular textarea{min-height:96px;resize:vertical;}
.anfrage-formular input:focus,.anfrage-formular select:focus,.anfrage-formular textarea:focus{
  border-color:var(--farbe-primaer);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(35,78,66,.13);
}
.anfrage-formular .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.datenschutz-feld{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;font-size:.83rem;color:var(--text-leise);line-height:1.5;}
.datenschutz-feld input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--farbe-primaer);}
.datenschutz-feld a{color:var(--farbe-primaer);font-weight:600;}
.form-status{margin-top:14px;font-size:.93rem;font-weight:600;line-height:1.5;display:none;padding:12px 14px;border-radius:9px;}
.form-status[data-status]{display:block;}
.form-status[data-status=erfolg]{background:#e8f2ed;color:#1c5340;border:1px solid #b9d8cb;}
.form-status[data-status=fehler]{background:#fdefe6;color:#8c3b06;border:1px solid #f3cdb2;}
.form-hinweis{margin-top:12px;font-size:.79rem;color:var(--text-leise);text-align:center;}

/* ---------- 8. Trust-Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rand);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;}
@media (min-width:860px){.zahlen{grid-template-columns:repeat(4,1fr);}}
.zahlen div{background:var(--weiss);padding:26px 20px;text-align:center;}
.zahlen strong{display:block;font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--farbe-primaer);margin-bottom:7px;}
.zahlen span{font-size:.9rem;color:var(--text-leise);font-weight:600;}

/* ---------- 9. Karten & Grids ---------- */
.grid{display:grid;gap:22px;}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
.grid--4{grid-template-columns:1fr 1fr;}
@media (min-width:700px){.grid--2{grid-template-columns:1fr 1fr;} .grid--3{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.grid--3{grid-template-columns:repeat(3,1fr);} .grid--4{grid-template-columns:repeat(4,1fr);}}

.karte{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schatten);}
.karte__bild{aspect-ratio:3/2;background:var(--creme-2);}
.karte__bild img{width:100%;height:100%;object-fit:cover;}
.karte__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.karte__body h3{margin-bottom:8px;}
.karte__body p{font-size:.95rem;color:var(--text-leise);margin-bottom:16px;}
.karte__link{margin-top:auto;font-weight:700;color:var(--farbe-cta);text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;gap:7px;}
.karte__link:hover{color:var(--farbe-cta-hover);text-decoration:underline;}
.karte--mehr{background:var(--farbe-primaer-tief);border-color:var(--farbe-primaer-tief);color:var(--creme);justify-content:center;}
.karte--mehr .karte__body{padding:32px 24px;}
.karte--mehr h3{color:#fff;}
.karte--mehr p{color:#bcd2ca;}
.karte--mehr .karte__link{color:#f9b27a;}
.karte__mehr-zahl{display:inline-block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--farbe-sekundaer);margin-bottom:10px;}
a.karte{text-decoration:none;color:inherit;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;}
a.karte:hover{box-shadow:var(--schatten-stark);transform:translateY(-2px);border-color:var(--rand-stark);}

.merkmale{display:grid;gap:26px;grid-template-columns:1fr;}
@media (min-width:640px){.merkmale{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.merkmale{grid-template-columns:repeat(4,1fr);}}
.merkmal{display:flex;gap:14px;}
.merkmal__icon{flex:none;width:42px;height:42px;border-radius:11px;background:var(--creme);color:var(--farbe-primaer);display:flex;align-items:center;justify-content:center;border:1px solid var(--rand);}
.merkmal h3{font-size:1.03rem;margin-bottom:4px;}
.merkmal p{font-size:.92rem;color:var(--text-leise);margin:0;}

/* Häkchen-Listen */
.check{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.check li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;}
.check li svg{flex:none;margin-top:3px;color:var(--farbe-primaer);}
.sektion--gruen .check li svg{color:#8fc4b0;}

/* ---------- 10. Split-Sektionen ---------- */
.split{display:grid;gap:34px;align-items:center;}
@media (min-width:920px){.split{grid-template-columns:1fr 1fr;gap:56px;} .split--4060{grid-template-columns:42fr 58fr;}}
.split__bild{border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);}
.split__bild img{width:100%;aspect-ratio:3/2;object-fit:cover;}

.platzhalter-bild{
  border:2px dashed var(--rand-stark);border-radius:var(--radius);background:var(--creme);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:3/2;text-align:center;padding:24px;color:var(--text-leise);
}
.platzhalter-bild strong{font-family:var(--serif);color:var(--farbe-primaer);font-size:1.05rem;}
.platzhalter-bild span{font-size:.85rem;max-width:34ch;}

/* ---------- 11. Ablauf ---------- */
.schritte{display:grid;gap:20px;counter-reset:s;}
@media (min-width:820px){.schritte{grid-template-columns:repeat(3,1fr);}}
.schritt{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);padding:26px 24px;}
.schritt__nr{font-family:var(--serif);font-weight:700;color:var(--farbe-cta);font-size:.95rem;letter-spacing:.06em;margin-bottom:10px;display:block;}
.schritt h3{margin-bottom:7px;}
.schritt p{font-size:.95rem;color:var(--text-leise);margin:0;}

/* ---------- 12. Einsatzgebiete ---------- */
.orte{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 26px;}
.orte a{display:inline-flex;align-items:center;gap:7px;background:var(--weiss);border:1px solid var(--rand);border-radius:999px;padding:9px 17px;font-size:.94rem;font-weight:600;text-decoration:none;color:var(--farbe-primaer);}
.orte a:hover{border-color:var(--farbe-primaer);background:var(--creme);}
.karte-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--rand);background:var(--creme-2);}

/* Stadt-Karten (Leistungen vor Ort) */
.stadtkarten{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:680px){.stadtkarten{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.stadtkarten{grid-template-columns:repeat(3,1fr);}}
.stadtkarte{scroll-margin-top:110px;background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--schatten);}
.stadtkarte h2{font-size:1.28rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rand);}
.stadtkarte ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.stadtkarte a{display:block;padding:6px 0;font-size:.94rem;text-decoration:none;color:var(--text);}
.stadtkarte a:hover{color:var(--farbe-cta);text-decoration:underline;}

/* ---------- 13. Aktion / Rabatt ---------- */
.aktion{
  background:var(--farbe-primaer-tief);color:var(--creme);border-radius:var(--radius);
  padding:34px 26px;display:grid;gap:24px;align-items:center;
  background-image:radial-gradient(circle at 88% 12%,rgba(252,110,5,.22),transparent 55%);
}
@media (min-width:860px){.aktion{grid-template-columns:1fr auto;padding:44px 46px;gap:40px;}}
.aktion h2{color:#fff;margin-bottom:8px;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);}
.aktion p{color:#cadcd5;margin:0;max-width:52ch;}
.aktion__badge{display:inline-block;background:var(--farbe-sekundaer);color:#18211d;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:14px;}

/* ---------- 14. Bewertungen / Embeds ---------- */
.embed-platzhalter{
  border:1px solid var(--rand);border-radius:var(--radius);background:var(--creme);
  padding:32px 24px;text-align:center;color:var(--text-leise);
}
.embed-platzhalter strong{display:block;font-family:var(--serif);color:var(--farbe-primaer);font-size:1.12rem;margin-bottom:8px;}
.embed-platzhalter p{font-size:.93rem;max-width:46ch;margin:0 auto 18px;}
.embed-ziel iframe{width:100%;border:0;display:block;border-radius:var(--radius);}
.embed-ziel{min-height:340px;}
.embed-ziel--karte{min-height:380px;}
.bewerten-cta{margin-top:26px;text-align:center;}
.bewerten-cta p{font-size:.93rem;color:var(--text-leise);margin-bottom:12px;}

/* ---------- 15. FAQ ---------- */
.faq{display:grid;gap:12px;max-width:52rem;margin-inline:auto;}
.faq details{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius-s);}
.faq summary{cursor:pointer;padding:17px 48px 17px 20px;font-weight:700;font-size:1rem;position:relative;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:2px solid var(--farbe-primaer);border-bottom:2px solid var(--farbe-primaer);transform:rotate(45deg);transition:transform .18s ease;}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq .faq__antwort{padding:0 20px 18px;color:var(--text-leise);font-size:.97rem;}
.faq .faq__antwort p:last-child{margin-bottom:0;}

/* ---------- 16. Breadcrumb & Seitenkopf ---------- */
.brotkrumen{background:var(--creme);border-bottom:1px solid var(--rand);font-size:.85rem;}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px 0;color:var(--text-leise);}
.brotkrumen a{color:var(--farbe-primaer);text-decoration:none;font-weight:600;}
.brotkrumen a:hover{text-decoration:underline;}
.brotkrumen li+li::before{content:"›";margin-right:8px;color:var(--rand-stark);}

.seitenkopf{background:var(--creme);}
.seitenkopf__inner{display:grid;gap:34px;padding-block:44px 52px;}
@media (min-width:1000px){.seitenkopf__inner{grid-template-columns:minmax(0,1fr) minmax(380px,410px);gap:44px;align-items:start;padding-block:56px 64px;}}
@media (min-width:1280px){.seitenkopf__inner{grid-template-columns:minmax(0,1fr) 420px;gap:52px;}}
.seitenkopf h1{margin-bottom:16px;}
.seitenkopf .lead{margin-bottom:22px;}

/* ---------- 17. Prosa (Rechtstexte) ---------- */
.prosa{max-width:46rem;}
.prosa h2{font-size:1.5rem;margin-top:1.8em;}
.prosa h3{font-size:1.15rem;margin-top:1.5em;}
.prosa ul,.prosa ol{padding-left:1.3em;}
.prosa li{margin-bottom:.4em;}

/* ---------- 18. Galerie ---------- */
.galerie{display:grid;gap:14px;grid-template-columns:1fr 1fr;}
@media (min-width:820px){.galerie{grid-template-columns:repeat(3,1fr);}}
.galerie img,.galerie .platzhalter-bild{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%;}

/* ---------- 19. Abschluss-CTA ---------- */
.abschluss{background:var(--farbe-primaer-tief);color:var(--creme);}
.abschluss__inner{display:grid;gap:34px;padding-block:var(--abstand-sektion);}
@media (min-width:1000px){.abschluss__inner{grid-template-columns:minmax(0,1fr) 430px;gap:56px;align-items:center;}}
.abschluss h2{color:#fff;}
.abschluss .lead{color:#cadcd5;}
.abschluss .check li{color:#dcebe5;font-size:.98rem;}
.abschluss .check li svg{color:#8fc4b0;}
.abschluss__kontakt{display:grid;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15);}
.abschluss__kontakt a{display:flex;align-items:center;gap:12px;text-decoration:none;color:#e6f0ec;font-weight:600;}
.abschluss__kontakt svg{flex:none;color:#8fc4b0;}

/* ---------- 20. Fußbereich ---------- */
.fuss{background:var(--farbe-primaer-tief);color:#b9cdc5;font-size:.94rem;padding-top:56px;}
.fuss__grid{display:grid;gap:34px;padding-bottom:38px;}
@media (min-width:760px){.fuss__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;}}
.fuss h3{color:#fff;font-family:var(--sans);font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.fuss a{text-decoration:none;color:#b9cdc5;}
.fuss a:hover{color:#fff;text-decoration:underline;}
.fuss__logo{width:64px;margin-bottom:16px;}
.fuss__unten{border-top:1px solid rgba(255,255,255,.13);padding:20px 0 26px;display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;font-size:.86rem;}
.fuss__cookie{background:none;border:0;color:#b9cdc5;cursor:pointer;text-decoration:underline;padding:0;font-size:inherit;}
.fuss__cookie:hover{color:#fff;}
.fuss address{font-style:normal;}

/* ---------- 21. Cookie-Banner ---------- */
.cookie{
  position:fixed;z-index:150;left:16px;right:16px;bottom:16px;
  background:var(--weiss);border:1px solid var(--rand-stark);border-radius:var(--radius);
  box-shadow:var(--schatten-stark);padding:22px;display:none;
}
@media (min-width:820px){.cookie{max-width:470px;right:auto;left:24px;bottom:24px;padding:26px;}}
.cookie[data-offen="1"]{display:block;}
.cookie h2{font-size:1.18rem;margin-bottom:8px;}
.cookie p{font-size:.89rem;color:var(--text-leise);margin-bottom:16px;}
.cookie a{color:var(--farbe-primaer);font-weight:600;}
.cookie__knoepfe{display:grid;gap:9px;}
@media (min-width:520px){.cookie__knoepfe{grid-template-columns:1fr 1fr;}}
.cookie__knoepfe .btn{padding:12px 16px;font-size:.94rem;}
.cookie__knoepfe .btn--outline{border-color:var(--farbe-primaer);color:var(--farbe-primaer);}
.cookie__knoepfe .btn--outline:hover{background:var(--creme);}
.cookie__mehr{grid-column:1/-1;background:none;border:0;color:var(--farbe-primaer);text-decoration:underline;cursor:pointer;font-size:.86rem;padding:4px;}
.cookie__kategorien{display:none;margin:4px 0 16px;border-top:1px solid var(--rand);padding-top:14px;}
.cookie[data-detail="1"] .cookie__kategorien{display:grid;gap:12px;}
.cookie__kat{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;}
.cookie__kat input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--farbe-primaer);}
.cookie__kat strong{display:block;font-size:.92rem;color:var(--text);}
.cookie__kat span{color:var(--text-leise);}

/* ---------- 22. Kontaktdaten ---------- */
.kontaktdaten{font-style:normal;font-size:1.02rem;}
.kontaktdaten p{margin-bottom:14px;}
.kontaktdaten a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--farbe-primaer);font-weight:600;}
.kontaktdaten a:hover{text-decoration:underline;}
.kontaktdaten svg{flex:none;}

/* Querverlinkung auf Kombi-Seiten */
.stadtkarte__quer{display:grid;gap:2px;}
@media (min-width:620px){.stadtkarte__quer{grid-template-columns:1fr 1fr;column-gap:24px;}}
@media (min-width:980px){.stadtkarte__quer{grid-template-columns:repeat(3,1fr);}}

/* ---------- 23. Diverses ---------- */
.hinweis-box{background:#fdf4e8;border:1px solid #eccfa4;border-radius:var(--radius-s);padding:16px 18px;font-size:.9rem;color:#7a4a08;}
.zentriert{text-align:center;}
.mt-32{margin-top:32px;} .mt-24{margin-top:24px;}
.tabelle-scroll{overflow-x:auto;}
@media print{.kopf,.aktionsbar,.cookie,.fuss{display:none;}}

/* =====================================================================
   24. Seitenlayout nach Vorbild (Leistungs- und Kombi-Seiten)
   ===================================================================== */

/* Hero auf Unterseiten: dunkel, Formular rechts.
   Hintergrundbild kommt per --hero-bild aus dem Generator und wird erst ab
   1200 px geladen – darunter reicht der Verlauf (spart Ladezeit auf Mobil). */
.hero--seite::before{
  background:linear-gradient(150deg,#17332c 0%,#1f4438 55%,#17332c 100%);
}
@media (min-width:1200px){
  .hero--seite::before{
    background-image:
      linear-gradient(100deg,rgba(17,40,33,.975) 0%,rgba(17,40,33,.93) 46%,rgba(17,40,33,.74) 100%),
      var(--hero-bild,none);
    background-size:cover;
    background-position:center right;
  }
}
.hero__trust--liste{display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.16);}
@media (min-width:640px){.hero__trust--liste{grid-template-columns:1fr 1fr;gap:10px 26px;}}
.hero__trust--liste li{align-items:flex-start;}
.hero__trust--liste svg{margin-top:3px;color:#8fc4b0;}

/* Kennzahlen-Leiste */
.kennzahlen{background:var(--farbe-primaer-tief);}
.kennzahlen__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.13);}
@media (min-width:860px){.kennzahlen__grid{grid-template-columns:repeat(4,1fr);}}
.kennzahlen__grid div{background:var(--farbe-primaer-tief);padding:24px 18px;text-align:center;}
.kennzahlen__grid strong{display:block;font-family:var(--serif);font-size:1.75rem;line-height:1.1;color:var(--farbe-sekundaer);margin-bottom:6px;}
.kennzahlen__grid span{font-size:.86rem;color:#c2d5cd;font-weight:600;}

/* SEO-Textblock */
.textblock{display:grid;gap:36px;}
@media (min-width:980px){.textblock{grid-template-columns:1.35fr 1fr;gap:56px;align-items:start;}}
.textblock__text h2{margin-bottom:22px;}
.textblock__text p{color:var(--text-leise);max-width:62ch;}
.textblock__liste{background:var(--creme);border:1px solid var(--rand);border-radius:var(--radius);padding:26px 24px;}
.textblock__liste h3{font-size:1.05rem;margin-bottom:16px;}
.textblock__liste .check li{font-size:.95rem;}

/* Vorteile-Liste mit Titel + Text */
.vorteile{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px;}
.vorteile li{display:flex;gap:12px;align-items:flex-start;}
.vorteile svg{flex:none;margin-top:3px;color:var(--farbe-primaer);}
.vorteile strong{display:block;font-size:1rem;margin-bottom:2px;}
.vorteile span{display:block;font-size:.93rem;color:var(--text-leise);line-height:1.55;}
.split__bild--hoch img{aspect-ratio:4/5;object-fit:cover;}
@media (max-width:919px){.split__bild--hoch img{aspect-ratio:3/2;}}

/* Objektarten-Grid */
.objektgrid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:620px){.objektgrid{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.objektgrid{grid-template-columns:repeat(4,1fr);}}
.objektkarte{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);}
.objektkarte__bild{aspect-ratio:3/2;background:var(--creme-2);}
.objektkarte__bild img{width:100%;height:100%;object-fit:cover;}
.objektkarte__body{padding:18px 18px 20px;}
.objektkarte h3{font-size:1.02rem;margin-bottom:7px;}
.objektkarte p{font-size:.9rem;color:var(--text-leise);margin:0;line-height:1.55;}

/* Detail-Karten */
.detailgrid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:680px){.detailgrid{grid-template-columns:1fr 1fr;}}
@media (min-width:1040px){.detailgrid{grid-template-columns:repeat(3,1fr);}}
.detailkarte{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);padding:24px 22px;}
.detailkarte__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--creme);color:var(--farbe-primaer);border:1px solid var(--rand);margin-bottom:14px;}
.detailkarte h3{font-size:1.05rem;margin-bottom:8px;}
.detailkarte p{font-size:.93rem;color:var(--text-leise);margin:0;line-height:1.6;}

/* Vier Schritte */
.schritte--vier{grid-template-columns:1fr;}
@media (min-width:640px){.schritte--vier{grid-template-columns:1fr 1fr;}}
@media (min-width:1040px){.schritte--vier{grid-template-columns:repeat(4,1fr);}}

/* Merkmal-Karten in der dunklen Sektion */
.merkmalgrid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:640px){.merkmalgrid{grid-template-columns:1fr 1fr;}}
@media (min-width:1040px){.merkmalgrid{grid-template-columns:repeat(4,1fr);}}
.merkmalkarte{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:24px 22px;}
.merkmalkarte h3{color:#fff;font-size:1.03rem;margin-bottom:8px;}
.merkmalkarte p{color:#c2d5cd;font-size:.93rem;margin:0;line-height:1.6;}

/* Große Galerie */
.galerie--gross{grid-template-columns:1fr 1fr;gap:14px;}
@media (min-width:820px){.galerie--gross{grid-template-columns:repeat(3,1fr);}}
.galerie__item{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--creme-2);}
.galerie__item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}

/* Einsatzgebiet dunkel */
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0 0 34px;}
.chips span,.chips a{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 15px;font-size:.9rem;font-weight:600;color:#dcebe5;text-decoration:none;}
.chips a:hover{background:rgba(255,255,255,.16);}
.gebiet__spalten{display:grid;gap:26px;}
@media (min-width:820px){.gebiet__spalten{grid-template-columns:repeat(3,1fr);gap:34px;}}
.gebiet__spalten h3{color:#fff;font-size:1.05rem;margin-bottom:8px;}
.gebiet__spalten p{color:#c2d5cd;font-size:.94rem;margin:0;line-height:1.62;}

/* Stadt-/Leistungslisten in dunklen Sektionen */
.stadtliste{list-style:none;margin:0;padding:0;display:grid;gap:4px;grid-template-columns:1fr;}
@media (min-width:620px){.stadtliste{grid-template-columns:1fr 1fr;column-gap:28px;}}
@media (min-width:1000px){.stadtliste{grid-template-columns:repeat(3,1fr);}}
.stadtliste a{display:block;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#dcebe5;text-decoration:none;font-size:.95rem;}
.stadtliste a:hover{color:#fff;}
.stadtliste--hell a{border-bottom-color:var(--rand);color:var(--text);}
.stadtliste--hell a:hover{color:var(--farbe-cta);}

/* Preis-Karten */
.preisgrid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:640px){.preisgrid{grid-template-columns:1fr 1fr;}}
@media (min-width:1040px){.preisgrid{grid-template-columns:repeat(4,1fr);}}
.preiskarte{background:var(--creme);border:1px solid var(--rand);border-radius:var(--radius);padding:24px 22px;}
.preiskarte h3{font-size:1.02rem;margin-bottom:8px;}
.preiskarte p{font-size:.92rem;color:var(--text-leise);margin:0;line-height:1.6;}