/* ==========================================================================
   Klose Objektservice — Design System
   Farben aus dem Logo: Navy, Blattgrün, Weiß
   ========================================================================== */

@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('../fonts/caveat-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Marke */
  --navy-900:#071B33;
  --navy-800:#0A2340;
  --navy:#0C2A4E;
  --navy-600:#143D6B;
  --navy-400:#2E5C8F;
  --green-700:#3C5E0F;
  --green-600:#4A7220;
  --green:#5C8A26;
  --green-400:#7CA83E;
  --green-100:#EDF4E2;
  --green-050:#F5F9EF;

  /* Neutral */
  --white:#FFFFFF;
  --sand:#F6F7F9;
  --line:#E3E7EC;
  --line-strong:#C9D1DA;
  --ink:#16202C;
  --ink-soft:#4A5866;
  --ink-mute:#6B7885;

  /* Typo */
  --font-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Layout */
  --wrap:1180px;
  --gap:2.5rem;--gap:clamp(1.25rem,3vw,2.5rem);
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(7,27,51,.06),0 2px 8px rgba(7,27,51,.05);
  --shadow:0 4px 12px rgba(7,27,51,.07),0 14px 40px rgba(7,27,51,.09);
  --shadow-lg:0 10px 30px rgba(7,27,51,.10),0 30px 70px rgba(7,27,51,.13);
  --ease:cubic-bezier(.22,.61,.36,1)}

*,*::before,*::after{box-sizing:border-box}
/* Waagerechte Sperre mit Rückfalloption: 'clip' gibt es erst ab Safari 16.
   Ältere Browser verwerfen die zweite Zeile und behalten 'hidden'. Ohne diese
   Rückfalloption gäbe es dort GAR KEINE Sperre — die Seite liesse sich seitlich
   schieben, was beim senkrechten Wischen als Ruckeln wahrgenommen wird.
   overscroll-behavior-x unterbindet zusätzlich das seitliche Nachfedern. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
body{overscroll-behavior-x:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;font-family:var(--font-body);font-size:1.075rem;font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy-600);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--green-600)}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.12;
  letter-spacing:-.02em;color:var(--navy-900);margin:0 0 .5em;
  overflow-wrap:break-word;hyphens:auto}
/* Display-Groessen nicht automatisch trennen — das sieht aus wie ein Textsatzfehler.
   Wo ein Wort zwingend brechen muss, steht ein weiches Trennzeichen (­) im Text. */
h1,h2{hyphens:manual}
h1{font-size:3.85rem;font-size:clamp(2.1rem,1.35rem + 3.3vw,3.85rem)}
h2{font-size:2.6rem;font-size:clamp(1.65rem,1.15rem + 2.1vw,2.6rem)}
h3{font-size:1.45rem;font-size:clamp(1.15rem,1.02rem + .6vw,1.45rem);font-weight:700;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.wrap{max-width:var(--wrap);padding-left:1.25rem;padding-right:1.25rem;
  margin-left:auto;margin-right:auto}
@supports (width:min(1px,2vw)){
  .wrap{max-width:none;padding-left:0;padding-right:0;width:min(100% - 2.5rem,var(--wrap))}
}

/* Grid- und Flex-Kinder duerfen unter ihre Inhaltsbreite schrumpfen.
   Ohne das sprengen lange Auswahl-Texte (<option>) das Raster. */
.grid > *,.row > *,.row-3 > *,.split > *,.steps > *,.layout-aside > *,
.hero__inner > *,.checks > *,.tiles > *,.footer__grid > *,.cta__inner > *,
.form fieldset,.field{min-width:0}
.tile label > span,.check label,.checklist li > div,.card__list li > span,
.hero__list li > span,.contact-card li > div,.footer__contact li > span,
.filelist span,.step,.card{min-width:0}
.tile b,.tile small,.check label,.card__list span{overflow-wrap:break-word}
input,select,textarea{max-width:100%}
select{text-overflow:ellipsis}
.wrap-narrow{max-width:780px;padding-left:1.25rem;padding-right:1.25rem;
  margin-left:auto;margin-right:auto}
@supports (width:min(1px,2vw)){
  .wrap-narrow{max-width:none;padding-left:0;padding-right:0;width:min(100% - 2.5rem,780px)}
}
@media (max-width:560px){.wrap,.wrap-narrow{width:calc(100% - 2rem)}}

.section{padding:7rem 0;padding:clamp(3.5rem,2rem + 6vw,7rem) 0}
.section--tight{padding:4.5rem 0;padding:clamp(2.5rem,1.5rem + 4vw,4.5rem) 0}
.section--sand{background:var(--sand)}
.section--green{background:var(--green-050)}
.section--navy{background:var(--navy);color:#DCE6F2}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--navy a{color:var(--green-400)}

/* Eyebrow laeuft seit 08/2026 durchgaengig in der Schnoerkelschrift (Kundenwunsch:
   "alles was gruen ist, schnoerkeln"). Caveat wird nicht versalisiert.
   Seit 09/2026 OHNE den kurzen gruenen Strich davor (Kundin mag ihn nicht) und etwas groesser. */
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:'Caveat',cursive;
  font-weight:600;font-size:1.9rem;font-size:clamp(1.6rem,1.4rem + .8vw,1.95rem);line-height:1.15;letter-spacing:.01em;text-transform:none;
  color:var(--green-600);margin-bottom:.7rem}
.section--navy .eyebrow{color:var(--green-400)}
.lead{font-size:1.24rem;font-size:clamp(1.06rem,1rem + .38vw,1.24rem);color:var(--ink-soft);line-height:1.6;max-width:62ch}
.section--navy .lead{color:#B9CADF}
.head-block{max-width:44rem;margin-bottom:3.25rem;margin-bottom:clamp(2rem,1rem + 2.5vw,3.25rem)}
.center{text-align:center}
.head-block.center,.center .head-block{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Skip-Link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--green-400);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:96px}

/* ---------- Buttons ---------- */
.btn{--bg:var(--navy);--fg:#fff;--bd:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;letter-spacing:.005em;
  padding:.92em 1.6em;border:2px solid var(--bd);border-radius:0;background:var(--bg);color:var(--fg);
  text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),
    background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  box-shadow:var(--shadow-sm);line-height:1.2;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--fg)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--green{--bg:var(--green);--bd:var(--green)}
.btn--green:hover{--bg:var(--green-600);--bd:var(--green-600)}
.btn--wa{--bg:#25D366;--bd:#25D366;--fg:#06331A}
.btn--wa:hover{--bg:#1DB954;--bd:#1DB954}
.btn--ghost{--bg:transparent;--fg:var(--navy);--bd:var(--line-strong)}
.btn--ghost:hover{--bd:var(--navy);--bg:transparent;--fg:var(--navy)}
.section--navy .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.35)}
.section--navy .btn--ghost:hover{--bd:#fff;--fg:#fff}
.btn--lg{font-size:1.02rem;padding:1.05em 1.9em}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.center .btn-row{justify-content:center}

/* ---------- Header ---------- */
.header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--line);transition:box-shadow .2s var(--ease)}
.header.is-stuck{box-shadow:0 4px 24px rgba(7,27,51,.09)}
.header__bar{display:flex;align-items:center;gap:3.25rem;gap:clamp(1.25rem,3vw,3.25rem);min-height:84px;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
/* Wortmarke = Original-Bitmap aus dem Kundenlogo (logo-wort.png), keine Nachbildung mit Webfont. */
.brand__mark{width:40px;height:auto;flex:none}
.brand__wort{height:34px;width:auto;flex:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:1rem;gap:clamp(.2rem,1.2vw,1rem)}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:.28em;font-family:var(--font-head);font-weight:600;
  font-size:.925rem;color:var(--navy-900);text-decoration:none;padding:.65rem 1rem;border-radius:0;
  transition:background-color .16s,color .16s;white-space:nowrap}
.nav__link:hover{background:var(--green-050);color:var(--green-700)}
.nav__link.is-aktiv{color:var(--green-700);background:var(--green-050)}
.nav__caret{width:.85em;height:.85em;flex:none;opacity:.65;transition:transform .18s var(--ease)}
.nav > .btn{display:none}  /* im Desktop-Header steckt der CTA rechts, nur mobil im Menü */

/* Aufklappmenü: rein über :hover und :focus-within, ganz ohne JavaScript */
.nav__sub{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;list-style:none;margin:0;
  padding:.4rem;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s var(--ease);z-index:20}
/* unsichtbare Brücke, damit das Menü beim Hinuntergehen der Maus nicht zuklappt */
.nav__item--drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.nav__item--drop:hover .nav__sub,
.nav__item--drop:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__item--drop:hover .nav__caret,
.nav__item--drop:focus-within .nav__caret{transform:rotate(180deg)}
.nav__sub li{margin:0}
.nav__sub a{display:block;padding:.6rem .85rem;border-radius:0;font-family:var(--font-head);
  font-weight:600;font-size:.9rem;color:var(--navy-900);text-decoration:none;white-space:nowrap;
  transition:background-color .14s,color .14s}
.nav__sub a:hover{background:var(--green-050);color:var(--green-700)}
.nav__sub a[aria-current="page"]{color:var(--green-700);background:var(--green-050)}
.header__cta{display:flex;align-items:center;gap:1.25rem;flex:none}
.header__tel{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);
  font-weight:700;color:var(--navy-900);text-decoration:none;font-size:.95rem;white-space:nowrap}
.header__tel svg{width:1.1em;height:1.1em;color:var(--green-600)}
.header__tel:hover{color:var(--green-700)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-strong);background:#fff;
  border-radius:0;cursor:pointer;align-items:center;justify-content:center;flex:none;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--navy-900);border-radius:2px;position:relative;
  transition:transform .22s var(--ease),background-color .1s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--navy-900);border-radius:2px;transition:transform .22s var(--ease),top .22s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1150px){
  /* .nav liegt hier fest positioniert und damit ausserhalb des Flusses — ohne
     dieses auto-Margin klebte die rechte Gruppe direkt am Logo. */
  .header__cta{margin-left:auto}
  .nav{position:fixed;top:78px;right:0;bottom:auto;left:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.25rem;
    box-shadow:0 20px 40px rgba(7,27,51,.12);
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:.22s var(--ease);max-height:calc(100vh - 78px);max-height:calc(100svh - 78px);overflow-y:auto}
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__item{position:static}
  .nav__link{display:flex;justify-content:space-between;padding:.85rem .6rem;
    border-bottom:1px solid var(--line);border-radius:0;font-size:1rem}
  .nav__caret{display:none}
  /* Auf dem Handy klappt nichts auf — die Unterpunkte stehen dauerhaft eingerückt da.
     ACHTUNG: hier NICHT visibility:visible setzen. visibility wird vererbt, und ein
     Kind kann sich damit gegen das ausgeblendete Elternteil wieder sichtbar schalten.
     Das geschlossene Menue waere dann zwar durchsichtig, seine Links laegen aber
     weiterhin anklickbar ueber der halben Seite. 'inherit' folgt dem Elternteil. */
  .nav__sub{position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;border:0;
    min-width:0;padding:.2rem 0 .5rem .9rem;background:transparent;border-bottom:1px solid var(--line)}
  .nav__sub li{line-height:0}
  .nav__sub a{padding:.62rem .6rem;font-weight:500;font-size:.94rem;color:var(--ink-soft);
    line-height:1.35}
  .nav .btn{margin-top:.9rem}
  .burger{display:flex}
  .header__tel span{display:none}
  .header__cta .btn{display:none}
}
@media (max-width:420px){.brand__mark{width:34px}.brand__wort{height:29px}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#D9E4F1;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 85% -10%,rgba(92,138,38,.30),transparent 58%),
    radial-gradient(90% 80% at 0% 100%,rgba(20,61,107,.85),transparent 60%),
    linear-gradient(160deg,#0C2A4E 0%,#0A2340 55%,#071B33 100%)}
/* 45°-Diagonale — Signatur aus Logo & Visitenkarte */
.hero::after{content:"";position:absolute;z-index:-1;top:-25%;right:-12%;width:58%;height:150%;
  background:linear-gradient(#5C8A26,#4A7220);transform:skewX(-20deg);opacity:.14;
  border-left:3px solid rgba(124,168,62,.5)}
.hero__inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:4.5rem;gap:clamp(2rem,4vw,4.5rem);
  align-items:center;padding:6.5rem 0 5.5rem;padding:clamp(3.25rem,2rem + 6vw,6.5rem) 0 clamp(3rem,2rem + 5vw,5.5rem)}
.hero h1{color:#fff;margin-bottom:.55em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--green-400);
  background:linear-gradient(transparent 66%,rgba(124,168,62,.28) 0);padding:0 .06em}
.hero__lead{font-size:1.3rem;font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:#C2D2E5;max-width:40ch;margin-bottom:2rem}
.hero .btn-row{margin-bottom:2.2rem}
.hero__usp{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.55rem .5rem}
.hero__usp li{display:inline-flex;align-items:center;gap:.45em;font-size:.88rem;font-weight:500;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#D9E4F1;
  padding:.42em .9em .42em .7em;border-radius:0;margin:0}
.hero__usp svg{width:1.05em;height:1.05em;color:var(--green-400);flex:none}

/* Karten-Stack rechts im Hero */
.hero__card{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:2rem;padding:clamp(1.4rem,1rem + 1.2vw,2rem)}
.hero__card h2{font-size:1.15rem;color:#fff;margin-bottom:1.1rem;display:flex;align-items:center;gap:.55rem}
.hero__card h2 svg{width:1.2em;height:1.2em;color:var(--green-400)}
.hero__list{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.7rem}
.hero__list li{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem;color:#C9D8EA;margin:0;line-height:1.45}
.hero__list svg{width:1.1em;height:1.1em;color:var(--green-400);flex:none;margin-top:.22em}
.hero__note{font-size:.82rem;color:#93A9C4;margin:0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  .hero::after{width:120%;right:-40%;opacity:.1}
}

/* ---------- Heller Start-Hero (Foto + Freisteller) ---------- */
.hero--licht{background:#fff;color:var(--ink)}
.hero--licht::before{background:
  linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 78%),
  url('../img/hero-villa.jpg') right bottom/cover no-repeat}
.hero--licht::after{display:none}
.hero--licht .hero__inner{grid-template-columns:1.05fr .95fr;align-items:end;
  padding:4.5rem 0 0;padding:clamp(2.5rem,1.5rem + 4vw,4.5rem) 0 0}
.hero--licht .hero__text{padding-bottom:5.5rem;padding-bottom:clamp(3rem,2rem + 4vw,5.5rem)}
/* Start-H1: beide Zeilen Montserrat ExtraBold in Navy, etwas kleiner als die Standard-H1 */
.hero--licht h1{color:var(--navy);font-size:3.1rem;font-size:clamp(1.9rem,1.25rem + 2.6vw,3.1rem);margin-bottom:.3em}
/* Gruss in Gruen unter der H1, in der Schnoerkelschrift */
.hero__gruss{font-family:'Caveat',cursive;font-weight:600;font-size:2.3rem;font-size:clamp(1.75rem,1.4rem + 1.3vw,2.4rem);
  line-height:1.1;color:var(--green-600);margin:0 0 1.1rem}
.hero--licht .hero__lead{color:var(--ink-soft);max-width:44ch}
.hero--licht .btn-row{margin-bottom:0}
.btn--umriss{--bg:rgba(255,255,255,.92);--fg:var(--green-700);--bd:var(--green)}
.btn--umriss:hover{--bg:var(--green-050);--fg:var(--green-700);--bd:var(--green-600)}
.hero__manuel{align-self:end;display:flex;justify-content:center}
.hero__manuel img{width:min(100%,430px);height:auto;
  filter:drop-shadow(0 18px 40px rgba(7,27,51,.25))}
@media (max-width:1000px){
  /* Handy: die Villa sitzt in der Bildmitte. Mit 'right' war nur der Rasen am
     rechten Rand zu sehen, das Haus lag ausserhalb des Ausschnitts. */
  .hero--licht::before{background:
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 20%,rgba(255,255,255,.70) 44%,
      rgba(255,255,255,.34) 68%,rgba(255,255,255,.14) 100%),
    url('../img/hero-villa.jpg') 50% bottom/cover no-repeat}
  .hero--licht .hero__inner{grid-template-columns:1fr;gap:1.5rem}
  .hero--licht .hero__text{padding-bottom:0}
  .hero__manuel img{width:min(78%,340px)}
}

/* ---------- Hero-Bild auf Unterseiten (mit Versatz-Rahmen) ---------- */
.hero__bild{position:relative;justify-self:end;align-self:center;width:100%;max-width:540px;
  margin:1rem 0}
.hero__bild::before{content:"";position:absolute;top:-16px;right:16px;bottom:16px;left:-16px;
  border:2px solid rgba(124,168,62,.55)}
.hero__bild img{position:relative;width:100%;height:340px;height:clamp(260px,30vw,360px);
  object-fit:cover;border-radius:var(--radius-lg);display:block;
  box-shadow:0 24px 60px rgba(0,0,0,.38)}
.hero__bild .photo__badge{left:auto;right:1rem;top:auto;bottom:1rem;position:absolute;z-index:1}
@media (max-width:1000px){
  .hero__bild{justify-self:start;max-width:560px;margin:0}
  .hero__bild::before{top:12px;right:-10px;bottom:-10px;left:12px}
  .hero__bild img{height:260px}
}

/* ---------- Handschrift-Akzent (Test: Schnörkelschrift) ---------- */
/* Alias: HTML nutzt teils noch .eyebrow--hand, Stil steckt jetzt in .eyebrow */
.eyebrow--hand{font-size:2rem;font-size:clamp(1.7rem,1.45rem + .9vw,2.05rem)}

/* Schnoerkel-Akzent in Ueberschriften: Caveat laeuft optisch kleiner als
   Montserrat, deshalb 1.22em Ausgleich. */
.hand{font-family:'Caveat',cursive;font-style:normal;font-weight:600;
  font-size:1.22em;line-height:.95;letter-spacing:.01em;color:var(--green-600);
  display:inline-block}
.section--navy .hand,.hero .hand,.cta .hand{color:var(--green-400)}

h2 em{font-style:normal;color:var(--green-600)}
@media (max-width:760px){.nur-breit{display:none}}
.card__body .card__more{margin:auto 0 1.1rem;padding-top:1.1rem}

/* ---------- Über uns: Manuel Klose ---------- */
.manuel{display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:3.5rem;gap:clamp(1.75rem,3vw,3.5rem);
  align-items:center}
.manuel__foto{display:flex;justify-content:center}
.manuel__foto img{width:min(100%,360px);height:auto;
  filter:drop-shadow(0 14px 32px rgba(7,27,51,.22))}
.manuel .checklist{margin-top:0}
@media (max-width:1000px){
  .manuel{grid-template-columns:1fr 1fr}
  .manuel > .reveal:first-child{grid-column:1 / -1}
}
@media (max-width:640px){.manuel{grid-template-columns:1fr}}

/* ---------- Leistungs-Karten mit Foto ---------- */
.card--foto{padding:0;display:flex;flex-direction:column;overflow:hidden}
.card__foto{position:relative;margin:0}
.card__foto img{width:100%;height:200px;object-fit:cover;display:block}
.card__foto .card__icon{position:absolute;left:14px;bottom:-34px;width:72px;height:72px;
  margin:0;border-radius:16px;border:3px solid #fff}
.card__foto .card__icon svg{width:32px;height:32px}
.card__body{display:flex;flex-direction:column;flex:1;
  padding:calc(2rem + 1.4rem) 2rem 2rem;
  padding:calc(clamp(1.4rem,1rem + 1vw,2rem) + 1.4rem) clamp(1.4rem,1rem + 1vw,2rem) clamp(1.4rem,1rem + 1vw,2rem)}
.card__body .card__list{margin-bottom:1.35rem}
.card__cta{margin-top:0}

/* ---------- Kontakt: drei Wege (Buttons auf gleicher Hoehe, Farben je Weg) ---------- */
.card--flex{display:flex;flex-direction:column}
.card--flex > p:last-child{margin-top:auto;padding-top:1.1rem}
.card__icon.card__icon--weiss{background:#fff;color:var(--navy);border:1.5px solid var(--line-strong);box-shadow:none}
.btn--weiss{--bg:#fff;--fg:var(--navy);--bd:var(--line-strong)}
.btn--weiss:hover{--bg:#fff;--fg:var(--navy);--bd:var(--navy)}

/* ---------- Kontakt-Fakten (wie Vorlage) ---------- */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;gap:clamp(1.25rem,2vw,2.5rem);
  padding:2.75rem 0;padding:clamp(1.75rem,1rem + 2vw,2.75rem) 0;border-top:1px solid var(--line)}
@media (max-width:900px){.fakten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fakten{grid-template-columns:1fr}}
.fakt{display:flex;gap:.8rem;align-items:flex-start}
.fakt svg{width:1.5em;height:1.5em;color:var(--green-600);flex:none;margin-top:.15em}
.fakt b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy-900);
  font-size:.98rem;margin-bottom:.2rem}
.fakt span{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* ---------- Vertrauensleiste ---------- */
.trust{background:var(--navy-900);color:#9FB4CC;padding:.9rem 0;font-size:.85rem}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 2.75rem;
  gap:.5rem clamp(1.25rem,3vw,2.75rem)}
.trust li{display:inline-flex;align-items:center;gap:.5em;margin:0}
.trust svg{width:1.05em;height:1.05em;color:var(--green-400);flex:none}

/* ---------- Brotkrumen ---------- */
.crumbs{background:var(--sand);border-bottom:1px solid var(--line);font-size:.85rem}
.crumbs ol{list-style:none;margin:0;padding:.75rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem}
.crumbs li{margin:0;display:flex;align-items:center;color:var(--ink-mute)}
.crumbs li + li::before{content:"";width:.42em;height:.42em;margin:0 .6em;flex:none;
  border-right:1.6px solid var(--line-strong);border-bottom:1.6px solid var(--line-strong);
  transform:rotate(-45deg)}
.crumbs a{color:var(--ink-soft);text-decoration:none;padding:.15rem 0}
.crumbs a:hover{color:var(--green-700);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--navy-900);font-weight:600}

/* ---------- Grid & Cards ---------- */
.grid{display:grid;gap:1.6rem;gap:clamp(1rem,.6rem + 1.2vw,1.6rem)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem;padding:clamp(1.4rem,1rem + 1vw,2rem);position:relative;transition:transform .22s var(--ease),
  box-shadow .22s var(--ease),border-color .22s var(--ease);height:100%}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-400)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.96rem}
.card__icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.15rem;
  background:linear-gradient(140deg,var(--green),var(--green-700));color:#fff;box-shadow:0 6px 16px rgba(60,94,15,.28)}
.card__icon svg{width:27px;height:27px}
.card--navy .card__icon{background:linear-gradient(140deg,var(--navy-600),var(--navy-900));
  box-shadow:0 6px 16px rgba(10,35,64,.3)}
.card__list{list-style:none;padding:0;margin:1.15rem 0 0;display:grid;gap:.5rem}
.card__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);margin:0;line-height:1.45}
.card__list svg{width:1.05em;height:1.05em;color:var(--green);flex:none;margin-top:.25em}
.card__more{display:inline-flex;align-items:center;gap:.4em;margin-top:1.35rem;font-family:var(--font-head);
  font-weight:700;font-size:.92rem;color:var(--navy);text-decoration:none}
.card__more svg{width:1em;height:1em;transition:transform .2s var(--ease)}
.card--link:hover .card__more{color:var(--green-700)}
.card--link:hover .card__more svg{transform:translateX(4px)}
.stretched{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit}
.stretched span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Ablauf / Steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.5rem;gap:clamp(1rem,.6rem + 1vw,1.5rem);grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:1rem}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--green);
  opacity:.28;display:block;margin-bottom:.5rem}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:.94rem;color:var(--ink-soft);margin:0}
.section--navy .step p{color:#AEC1D8}
.section--navy .step::before{color:var(--green-400);opacity:.45}

/* ---------- Feature-Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.split--rev .split__media{order:-1}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:2.25rem}.split--rev .split__media{order:0}}
.checklist{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;margin:0}
.checklist svg{width:1.35em;height:1.35em;color:var(--green);flex:none;margin-top:.1em}
.checklist strong{display:block;color:var(--navy-900);font-family:var(--font-head);font-weight:700;
  font-size:1rem;margin-bottom:.1rem}
.checklist span{font-size:.94rem;color:var(--ink-soft);line-height:1.55}

/* ---------- Foto-Platzhalter (bis eigene Bilder da sind) ---------- */
.photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--sand);
  border:1px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:2rem;
  background:
    linear-gradient(135deg,rgba(92,138,38,.07),rgba(12,42,78,.07)),
    repeating-linear-gradient(-45deg,#fff 0 12px,#F2F5F8 12px 24px);
  border:2px dashed var(--line-strong)}
.photo--ph .photo__inner{max-width:26ch}
.photo--ph svg{width:44px;height:44px;color:var(--green);opacity:.7;margin:0 auto .8rem}
.photo--ph b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1rem;
  margin-bottom:.3rem}
.photo--ph small{color:var(--ink-mute);font-size:.82rem;line-height:1.5;display:block}
.photo__credit{display:block;margin-top:.6rem;font-size:.78rem;line-height:1.5;color:var(--ink-mute)}
.photo__credit a{color:inherit;text-decoration:underline;text-decoration-thickness:.06em}
.photo__credit a:hover{color:var(--green-700)}

.photo__badge{position:absolute;left:1rem;top:1rem;background:var(--navy);color:#fff;font-family:var(--font-head);
  font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.4em .8em;border-radius:0}

/* Vorher/Nachher-Slider */
.ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;
  background:var(--sand);border:1px solid var(--line);touch-action:pan-y;user-select:none}
.ba__pane{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;padding:1.5rem}
.ba__pane img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;right:0;bottom:0;left:0}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba__ph{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1.5rem;
  background:repeating-linear-gradient(-45deg,#fff 0 12px,#F2F5F8 12px 24px)}
.ba__before .ba__ph{background:repeating-linear-gradient(-45deg,#EEF1F4 0 12px,#E6EAEF 12px 24px)}
.ba__ph b{position:absolute;top:50%;font-family:var(--font-head);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;font-size:.8rem;color:var(--navy);opacity:.5;transform:translate(-50%,-50%);
  white-space:nowrap}
.ba__before .ba__ph b{left:25%}
.ba__after .ba__ph b{left:75%}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(7,27,51,.15);transform:translateX(-50%);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;color:var(--navy)}
.ba__knob svg{width:22px;height:22px}
.ba__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba__tag{position:absolute;bottom:1rem;font-family:var(--font-head);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(7,27,51,.78);color:#fff;padding:.35em .8em;
  border-radius:0;pointer-events:none}
.ba__tag--l{left:1rem}.ba__tag--r{right:1rem;background:rgba(92,138,38,.9)}

/* ---------- Mehrspaltige Aufzählung (A–Z-Liste) ---------- */
.az{columns:3;column-gap:2.5rem;display:block;list-style:none;padding:0;margin:0}
.az li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:900px){.az{columns:2;column-gap:1.75rem}}
@media (max-width:560px){.az{columns:1}}

/* ---------- Leistungs-Tags ---------- */
.taglist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.taglist li{margin:0}
.taglist span,.taglist a{display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:0;padding:.45em 1em;font-size:.9rem;color:var(--ink-soft);text-decoration:none;
  transition:border-color .16s,color .16s,background-color .16s}
.taglist a:hover{border-color:var(--green);color:var(--green-700);background:var(--green-050)}
.section--sand .taglist span,.section--sand .taglist a{background:#fff}

/* ---------- Preis-/Info-Boxen ---------- */
.note{border-left:4px solid var(--green);background:var(--green-050);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.15rem 1.35rem;font-size:.95rem;color:var(--ink-soft)}
.note strong{color:var(--navy-900)}
.note--navy{border-color:var(--navy-600);background:#F1F5FA}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--navy-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.75rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--green-700)}
.faq__body{padding:0 3rem 1.5rem 0;color:var(--ink-soft);font-size:.98rem}

/* ---------- CTA-Band ---------- */
.cta{position:relative;background:var(--navy);color:#D9E4F1;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;
  background:radial-gradient(90% 120% at 90% 20%,rgba(92,138,38,.32),transparent 60%),
             linear-gradient(150deg,#0C2A4E,#071B33)}
.cta__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:3.5rem;gap:clamp(1.5rem,3vw,3.5rem);align-items:center;
  padding:4.5rem 0;padding:clamp(2.75rem,2rem + 3vw,4.5rem) 0}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:#B9CADF;margin-bottom:0}
@media (max-width:820px){.cta__inner{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{background:var(--navy-900);color:#93A9C4;padding:4.5rem 0 2rem;padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2rem;font-size:.93rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem 2rem;
  padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr;gap:2rem}}
.footer h4,.footer__h{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 1.1rem;font-weight:700;font-family:var(--font-head);line-height:1.3}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer li{margin:0}
.footer a{color:#B9CADF;text-decoration:none}
.footer a:hover{color:var(--green-400);text-decoration:underline}
/* Auf dunklem Grund steht das Original-Logo auf weisser Kachel — gleiche Regel
   wie auf Visitenkarte und Flyer. Keine umgefaerbte oder nachgebaute Variante. */
.footer .brand{display:inline-flex;width:auto;background:#fff;padding:.7rem .95rem;gap:.65rem}
.footer .brand__mark{width:38px}
.footer .brand__wort{height:31px}
.footer__about{max-width:34ch;margin:1.15rem 0 1.25rem;color:#93A9C4;font-size:.9rem;line-height:1.6}
.footer__contact li{display:flex;gap:.6rem;align-items:flex-start}
.footer__contact svg{width:1.05em;height:1.05em;color:var(--green-400);flex:none;margin-top:.3em}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  padding-top:1.75rem;font-size:.85rem;color:#7A90AB}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.social{display:flex;gap:.55rem;margin-top:1.25rem}
.social a{width:40px;height:40px;border-radius:0;border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;color:#B9CADF;transition:.18s var(--ease)}
.social a:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}
.social svg{width:19px;height:19px}

/* ---------- Sticky Mobile-Callbar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:99;display:none;gap:1px;background:var(--line);
  box-shadow:0 -6px 20px rgba(7,27,51,.14);padding-bottom:env(safe-area-inset-bottom);
  transform:translateZ(0)}
.callbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  background:#fff;padding:.7rem .5rem;text-decoration:none;font-family:var(--font-head);font-weight:700;
  font-size:.74rem;color:var(--navy-900);letter-spacing:.02em}
.callbar a svg{width:20px;height:20px;color:var(--green-600)}
.callbar a.is-wa{background:#25D366;color:#06331A}
.callbar a.is-wa svg{color:#06331A}
.callbar a.is-primary{background:var(--navy);color:#fff}
.callbar a.is-primary svg{color:var(--green-400)}
@media (max-width:760px){.callbar{display:flex}body{padding-bottom:66px}}

/* ---------- Formular ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2.5rem;padding:clamp(1.35rem,1rem + 1.6vw,2.5rem);box-shadow:var(--shadow-sm)}
.fieldset{border:0;padding:0;margin:0 0 2.5rem}
.fieldset:last-of-type{margin-bottom:0}
.fieldset > legend{font-family:var(--font-head);font-weight:800;font-size:1.2rem;
  color:var(--navy-900);padding:0;margin-bottom:.4rem}
#stepServices,#stepDetails,#stepContact{border-top:1px solid var(--line);padding-top:2.4rem}
.fieldset__hint{color:var(--ink-mute);font-size:.92rem;margin:0 0 1.35rem}
.panel__h{font-size:1.45rem;font-size:clamp(1.15rem,1.02rem + .6vw,1.45rem);font-weight:700;letter-spacing:-.01em;
  margin:1.75rem 0 .5em}
.field{margin-bottom:1.15rem}
.field:last-child{margin-bottom:0}
.field > label,.field__label{display:block;font-family:var(--font-head);font-weight:700;font-size:.92rem;
  color:var(--navy-900);margin-bottom:.45rem}
.field__label .opt,label .opt{font-family:var(--font-body);font-weight:400;color:var(--ink-mute);font-size:.85rem}
.req{color:var(--green-600)}
.hint{display:block;font-size:.85rem;color:var(--ink-mute);margin-top:.4rem;line-height:1.5}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],select,textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line-strong);border-radius:0;padding:.75rem .9rem;transition:.16s var(--ease);
  -webkit-appearance:none;appearance:none}
textarea{min-height:130px;resize:vertical;line-height:1.6}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5866' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1em;padding-right:2.6rem}
input:hover,select:hover,textarea:hover{border-color:var(--ink-mute)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 4px rgba(92,138,38,.14)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:#C0392B;
  box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.err{display:none;color:#C0392B;font-size:.85rem;margin-top:.4rem;font-weight:500}
.err.is-shown{display:block}
.row{display:grid;gap:1.15rem;grid-template-columns:repeat(2,1fr)}
.row-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.row,.row-3{grid-template-columns:1fr}}
/* Nebeneinanderliegende Felder: Beschriftungen unten buendig, damit die Eingabefelder
   auf einer Hoehe sitzen, auch wenn eine Beschriftung zweizeilig umbricht. */
@media (min-width:641px){
  .row > .field > .field__label{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 .3em;
    min-height:2.7em;line-height:1.35}
}

/* Auswahlkacheln */
.tiles{display:grid;gap:.85rem;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border:0}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;margin:0}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile label{display:flex;gap:.8rem;align-items:flex-start;height:100%;cursor:pointer;
  border:2px solid var(--line);border-radius:0;padding:1.1rem;background:#fff;
  transition:.18s var(--ease);font-weight:400}
.tile label:hover{border-color:var(--green-400);background:var(--green-050)}
@media (min-width:761px){
  .tile label{flex-direction:column;align-items:flex-start;gap:.8rem;padding:1.15rem}
}
.tile input:focus-visible + label{outline:3px solid var(--green-400);outline-offset:2px}
.tile input:checked + label{border-color:var(--green);background:var(--green-050);
  box-shadow:0 0 0 1px var(--green)}
.tile__ico{width:40px;height:40px;border-radius:0;background:var(--navy);color:#fff;display:grid;
  place-items:center;flex:none;transition:.18s var(--ease)}
.tile input:checked + label .tile__ico{background:var(--green)}
.tile__ico svg{width:21px;height:21px}
.tile b{display:block;font-family:var(--font-head);font-weight:700;font-size:.95rem;
  color:var(--navy-900);margin-bottom:.2rem;letter-spacing:-.01em}
.tile small{display:block;font-size:.815rem;color:var(--ink-soft);line-height:1.4}

/* Checkbox-/Radio-Listen */
.checks{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);border:0;padding:0;margin:0}
.checks--1{grid-template-columns:1fr}
.checks--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.checks,.checks--3{grid-template-columns:1fr}}
.check{position:relative;margin:0}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check label{display:flex;align-items:center;gap:.7rem;cursor:pointer;padding:.7rem .9rem;
  border:1.5px solid var(--line);border-radius:0;background:#fff;font-size:.95rem;
  transition:.16s var(--ease);line-height:1.4;height:100%}
.check label::before{content:"";width:20px;height:20px;border:2px solid var(--line-strong);border-radius:0;
  flex:none;transition:.16s var(--ease);background:#fff}
.check input[type=radio] + label::before{border-radius:50%}
.check label:hover{border-color:var(--green-400)}
.check input:focus-visible + label{outline:3px solid var(--green-400);outline-offset:2px}
.check input:checked + label{border-color:var(--green);background:var(--green-050);font-weight:500}
.check input:checked + label::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--green)}
.check input[type=radio]:checked + label::before{background-size:11px}

/* Consent */
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.consent input{width:20px;height:20px;flex:none;margin:.15rem 0 0;accent-color:var(--green)}

/* Dateiupload */
.drop{border:2px dashed var(--line-strong);border-radius:0;padding:1.6rem;text-align:center;
  background:var(--sand);transition:.18s var(--ease);cursor:pointer;display:block}
.drop:hover,.drop.is-over{border-color:var(--green);background:var(--green-050)}
.drop svg{width:34px;height:34px;color:var(--green);margin:0 auto .6rem}
.drop b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy-900);margin-bottom:.2rem}
.drop small{color:var(--ink-mute);font-size:.85rem}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.filelist{list-style:none;padding:0;margin:.9rem 0 0;display:grid;gap:.5rem}
.filelist li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:.55rem .8rem;margin:0}
.filelist svg{width:1.05em;height:1.05em;color:var(--green-600);flex:none}
.filelist span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist small{color:var(--ink-mute);flex:none}

/* Zusammenfassung */
.summary{background:var(--sand);border:1px solid var(--line);border-radius:0;
  padding:1.35rem;margin-bottom:1.5rem}
.summary h3{font-size:1rem;margin-bottom:.9rem}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;font-size:.92rem}
.summary dt{font-weight:600;color:var(--navy-900)}
.summary dd{margin:0;color:var(--ink-soft)}
.summary .empty{color:var(--ink-mute);font-style:italic;font-size:.92rem}
@media (max-width:520px){.summary dl{grid-template-columns:1fr;gap:.15rem}
  .summary dd{margin-bottom:.6rem}}

.send-choice{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
@media (max-width:640px){.send-choice{grid-template-columns:1fr}}
.form__status{margin-top:1.25rem;padding:1rem 1.25rem;border-radius:0;font-size:.95rem;display:none}
.form__status.is-shown{display:block}
.form__status.is-ok{background:var(--green-050);border:1px solid var(--green-400);color:var(--green-700)}
.form__status.is-err{background:#FDF0EE;border:1px solid #E8A79E;color:#A5352A}

/* Sprungmarken-Sidebar */
.sticky-aside{position:sticky;top:100px}
.layout-aside{display:grid;grid-template-columns:1fr 320px;gap:3.5rem;gap:clamp(2rem,3vw,3.5rem);align-items:start}
@media (max-width:960px){.layout-aside{grid-template-columns:1fr}.sticky-aside{position:static}}

/* Kontaktkarte */
.contact-card{background:var(--navy);color:#C9D8EA;border-radius:var(--radius-lg);padding:1.75rem}
.contact-card h3{color:#fff;font-size:1.15rem;margin-bottom:1.1rem}
.contact-card ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.95rem}
.contact-card li{display:flex;gap:.8rem;align-items:flex-start;margin:0;font-size:.95rem}
.contact-card svg{width:1.15em;height:1.15em;color:var(--green-400);flex:none;margin-top:.22em}
.contact-card a{color:#fff;text-decoration:none;font-weight:500}
.contact-card a:hover{color:var(--green-400);text-decoration:underline}
.contact-card small{display:block;color:#93A9C4;font-size:.83rem;margin-top:.1rem}

/* Rechtstexte */
.legal{font-size:.98rem;color:var(--ink-soft)}
.legal h2{font-size:1.4rem;margin-top:2.5rem}
.legal h3{font-size:1.1rem;margin-top:1.75rem}
.legal h2:first-child{margin-top:0}
.legal address{font-style:normal;line-height:1.8}
.legal .todo{background:#FFF8E5;border:1px solid #F0DCA0;border-radius:8px;padding:.15em .5em;
  font-size:.9em;color:#7A5B00;font-weight:600}

/* Utilities */
.mt-0{margin-top:0}.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}
[hidden]{display:none!important}

/* Reveal-Animation */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* Waehrend eines schnellen Wischs sofort zeigen — sonst starten auf einmal
   ein Dutzend Uebergaenge mitten im Nachlauf. */
.reveal.no-anim{transition:none!important}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Druck */
@media print{
  .header,.footer,.callbar,.cta,.btn{display:none!important}
  body{color:#000;font-size:11pt}
  .section{padding:1rem 0}
}

/* Optionale Fotos: sobald die Datei vorhanden ist, verdrängt sie den Platzhalter */
.has-photo{border-style:solid;border-color:var(--line);background:var(--sand)}
.has-photo > img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:2}
.has-photo .photo__inner,.has-photo .ba__ph{display:none}
.photo--ph.has-photo{padding:0;display:block}

/* ------------------------------------------------------------------ Altbrowser
   Safari auf aelteren Macs (High Sierra / Mojave, Safari 12-14.0) kennt einige
   der hier genutzten Eigenschaften nicht und verwirft die ganze Deklaration.
   Die folgenden Rueckfaelle greifen nur dort, wo das Original fehlt. */
@supports not (aspect-ratio:1/1){
  .photo--ph{min-height:16rem}
  .ba{min-height:20rem}
}
@supports (position:-webkit-sticky){
  .header{position:-webkit-sticky;position:sticky}
  .sticky-aside{position:-webkit-sticky;position:sticky}
}
.ba{-webkit-user-select:none}

/* Safari vor 14.1 kann in Flexboxen kein 'gap' (in Grids schon). Ohne Ersatz
   kleben dort Icons an ihrem Text und Buttons aneinander. inset kam in derselben
   Safari-Version dazu und dient hier als Erkennungsmerkmal: der Block wird nur
   von genau den Browsern gelesen, denen das Flex-gap fehlt. */
@supports not (inset:0){
  /* Icons stehen mal vor, mal hinter dem Text - deshalb beidseitig. */
  .btn > svg{margin-left:.3em;margin-right:.3em}
  .btn-row > * + *{margin-left:.85rem}
  .header__bar > * + *{margin-left:1.25rem}
  .brand > * + *{margin-left:.7rem}
  .header__cta > * + *{margin-left:1.25rem}
  .header__tel > svg{margin-right:.5rem}
  .nav__link > svg{margin-left:.28em}
  .hero__usp > li{margin-right:.5rem;margin-bottom:.55rem}
  .hero__usp li > svg,.hero__list li > svg,.hero__card h2 > svg{margin-right:.55rem}
  .trust li{margin-right:1.75rem}
  .trust li > svg{margin-right:.5em}
  .card__list li > svg,.footer__contact li > svg{margin-right:.6rem}
  .card__more > svg{margin-left:.4em}
  .checklist li > svg,.contact-card li > svg{margin-right:.8rem}
  .taglist > *{margin-right:.5rem;margin-bottom:.5rem}
  .footer__bottom > * + *{margin-left:1.5rem}
  .footer__bottom ul > * + *{margin-left:1.25rem}
  .social > * + *{margin-left:.55rem}
  .filelist li > * + *{margin-left:.6rem}
  .tile label > * + *{margin-left:.8rem}
  .check label > * + *{margin-left:.7rem}
  .consent > * + *{margin-left:.75rem}
}


/* ==========================================================================
   Rückfalloption für ältere Safari-Versionen (z. B. MacBook 2017):
   Flex-gap gibt es erst ab Safari 14.1 — als Näherung dienen Außenabstände.
   'inset' kam zeitgleich, deshalb taugt es hier als Erkennungsmerkmal.
   ========================================================================== */
@supports not (inset:0){
  .grid{grid-gap:1.4rem}
  .steps{grid-gap:1.4rem}
  .fakten{grid-gap:1.75rem}
  .manuel{grid-gap:2rem}
  .row,.row-3{grid-gap:1.15rem}
  .header__bar > * + *{margin-left:1.5rem}
  .nav__item + .nav__item{margin-left:.5rem}
  .nav > .btn{margin-left:.75rem}
  .header__cta > * + *{margin-left:.9rem}
  .header__tel svg{margin-right:.5rem}
  .brand__mark{margin-right:.7rem}
  .btn-row > *{margin:0 .85rem .85rem 0}
  .btn > svg:first-child{margin-right:.5em}
  .btn > svg:last-child{margin-left:.5em}
  .card__list li > svg,.checklist li > svg,.hero__list li > svg,
  .footer__contact li > svg,.fakt > svg{margin-right:.6rem}
  .card__more svg{margin-left:.4em}
  .social a + a{margin-left:.55rem}
  .footer__bottom ul li + li{margin-left:1.25rem}
  .trust li{margin:0 1.25rem .5rem 0}
  .taglist li{margin:0 .5rem .5rem 0}
  .crumbs li + li{margin-left:.1rem}
  .hero__manuel img{margin-top:1.5rem}
}
@supports not (aspect-ratio:1/1){
  .ba{min-height:340px}
  .photo--ph{min-height:280px}
}