/* ============================================================
   LANDHAUS PROJEKT GMBH — Doppelbungalow Barum
   Design-System: hell, mehrere Grüntöne, ausschließlich Sans-Serif
   Zielgruppe Best Ager -> große Schrift, hohe Kontraste, ruhige Flächen
   ============================================================ */

:root{
  /* Marken-Grün (aus dem Original-Logo) */
  --green-900:#04321E;
  --green-800:#065C36;
  --green-700:#028945;   /* Logo dunkelgrün */
  --green-600:#0FA152;
  --green-500:#4AB848;   /* Logo hellgrün */
  --green-400:#77CC70;
  --green-200:#BFE6BC;
  --green-100:#DEF1DB;
  --green-50:#F1F8EF;

  /* Neutrale Töne */
  --ink:#15211B;
  --body:#3C4A42;
  --muted:#6C7B72;
  --line:#DCE7D9;
  --line-soft:#EAF1E7;
  --white:#FFFFFF;
  --cream:#F8FBF6;

  --font-sans:'Inter','Helvetica Neue',Arial,sans-serif;

  --space-2:10px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;

  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --transition:all .22s ease;
  --content-max:1240px;
  --pad-x:clamp(20px,5vw,72px);
  --sec-y:clamp(64px,9vw,120px);
  --shadow-sm:0 2px 10px rgba(4,50,30,.05);
  --shadow:0 14px 40px rgba(4,50,30,.09);
  --shadow-lg:0 26px 70px rgba(4,50,30,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:96px}
body{
  font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.65;
  color:var(--body); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--green-600); outline-offset:3px; border-radius:4px}

.container{width:100%; max-width:var(--content-max); margin:0 auto; padding-inline:var(--pad-x)}
.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}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--font-sans); color:var(--ink); line-height:1.15; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:700}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:700}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:650}
h4{font-size:clamp(1.1rem,1.8vw,1.25rem); font-weight:650; letter-spacing:-.01em}
p{margin-top:var(--space-3); text-wrap:pretty}
strong{color:var(--ink); font-weight:650}

.eyebrow{font-size:.875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-700)}
.eyebrow-light{color:var(--green-400)}
.lead{font-size:clamp(1.1rem,2vw,1.3rem); line-height:1.55; color:var(--body); margin-top:var(--space-4)}
.section-dark .lead{color:var(--green-100)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-weight:650; font-size:1.02rem; letter-spacing:.01em;
  padding:17px 32px; border-radius:var(--radius-sm); min-height:58px;
  border:2px solid transparent; cursor:pointer; transition:var(--transition); text-align:center;
}
.btn-primary{background:var(--green-700); color:var(--white); box-shadow:0 8px 22px rgba(2,137,69,.24)}
.btn-primary:hover{background:var(--green-800); transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,137,69,.3)}
.btn-secondary{background:var(--white); color:var(--green-800); border-color:var(--green-200)}
.btn-secondary:hover{border-color:var(--green-600); background:var(--green-50)}
.section-dark .btn-secondary{background:transparent; color:var(--white); border-color:rgba(255,255,255,.45)}
.section-dark .btn-secondary:hover{background:rgba(255,255,255,.1); border-color:var(--white)}
.btn-ghost-light{background:rgba(255,255,255,.14); color:var(--white); border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px)}
.btn-ghost-light:hover{background:rgba(255,255,255,.24); border-color:var(--white)}
.btn-block{width:100%; margin-top:var(--space-4)}
.btn svg{width:20px; height:20px; flex-shrink:0}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px 0; transition:var(--transition);
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-header.scrolled{padding:9px 0; box-shadow:var(--shadow-sm)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4)}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand-mark{height:44px; width:auto; transition:var(--transition)}
.brand-word{height:26px; width:auto; transition:var(--transition)}
.scrolled .brand-mark{height:38px}
.scrolled .brand-word{height:22px}
.nav{display:flex; align-items:center; gap:clamp(12px,1.5vw,26px)}
.nav>a{font-size:1rem; font-weight:550; color:var(--ink); position:relative; padding:6px 0}
.nav>a:not(.btn)::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--green-500); transition:var(--transition)}
.nav>a:not(.btn):hover::after{width:100%}
.nav a.nav-cta{color:var(--white)!important; padding:13px 24px; min-height:0; font-size:.98rem; border-radius:var(--radius-sm); white-space:nowrap}
.nav a.nav-cta::after{display:none}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:10px; z-index:110}
.nav-toggle span{display:block; width:26px; height:2.5px; border-radius:2px; background:var(--ink); transition:var(--transition)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:min(100svh,880px); display:flex; align-items:flex-end; color:var(--white); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero-overlay{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(4,50,30,.5) 0%,rgba(4,50,30,.2) 28%,rgba(4,50,30,.62) 62%,rgba(4,50,30,.9) 100%)}
.hero-content{position:relative; z-index:2; padding-top:150px; padding-bottom:clamp(56px,8vw,96px); max-width:960px}
.hero-content h1{color:var(--white); text-shadow:0 2px 20px rgba(0,0,0,.28)}
.hero-badge-slot{display:flex}
.hero-badge{
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:9px 20px; margin-bottom:var(--space-5);
  font-size:clamp(.78rem,1.6vw,.9rem); font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); line-height:1.3; backdrop-filter:blur(8px);
}
.hero-badge-dot{width:9px; height:9px; border-radius:50%; background:var(--green-500); flex-shrink:0; box-shadow:0 0 0 4px rgba(74,184,72,.35)}
.hb-mid{display:inline}
.hb-mobil{display:none}
.hero-ort{display:none}
@media(max-width:600px){
  .hb-mid{display:none}
  .hero-badge{letter-spacing:.08em; padding:9px 16px}
}
.hero-lead{font-size:clamp(1.1rem,2.1vw,1.45rem); font-weight:400; margin-top:var(--space-4); color:rgba(255,255,255,.94); max-width:44ch; text-shadow:0 1px 14px rgba(0,0,0,.3)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6)}
.br-lg{display:none}

/* ---------- Sections ---------- */
.section{padding-block:var(--sec-y)}
.section-light{background:var(--white); color:var(--body)}
.section-soft{background:var(--green-50); color:var(--body)}
.section-dark{background:var(--green-900); color:var(--green-100)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--white)}
/* strong erbt sonst --ink und wird auf dem dunklen Grund praktisch schwarz */
.section-dark strong{color:var(--white)}
.section-head{max-width:760px; margin-bottom:var(--space-7)}
.section-head h2{margin-top:var(--space-3)}
.section-head-center{margin-left:auto; margin-right:auto; text-align:center}

/* ---------- Statistik-Band ---------- */
/* 3D-Video: randlos, ohne Abstand nach oben und unten.
   line-height:0 am Traeger und display:block am Video verhindern den
   Zeilenabstand, der unter einem Inline-Element sonst als heller Streifen
   zwischen gruener Sektion und Video stehen bleibt.
   pointer-events:none macht das Video unanklickbar. */
/* Hinweis unter der Galerie: zurueckhaltend, aber lesbar — er ist eine
   rechtliche Angabe, kein Fliesstext. */
.bild-hinweis{margin-top:var(--space-5); font-size:.88rem; line-height:1.55; color:var(--muted); max-width:70ch}

.filmband{display:block; margin:0; padding:0; line-height:0; font-size:0; background:var(--green-900)}
.filmband video{display:block; width:100%; height:auto; margin:0; border:0; pointer-events:none; user-select:none}
/* MUSS nach der Grundregel stehen: .filmband{display:block} weiter oben hat
   dieselbe Spezifitaet, eine Media Query erhoeht sie nicht. Stuende dieser
   Block davor, wuerde er ueberschrieben und das Video bliebe sichtbar.
   Auf dem Desktop traegt die Seite auch ohne, und die 10 MB entfallen —
   js/main.js prueft die Sichtbarkeit und laedt es dort gar nicht erst. */
@media(min-width:900px){
  .filmband{display:none}
}

/* ---------- Foerder-Siegel (ersetzt das frühere Zahlenband) ---------- */
.foerderung{background:var(--white); padding-block:clamp(40px,6vw,66px)}
.foerderung-inner{display:flex; flex-direction:column; align-items:center; gap:var(--space-4)}

.siegel{
  position:relative; overflow:hidden; width:100%; max-width:580px;
  display:flex; align-items:center; gap:clamp(14px,3vw,28px);
  padding:clamp(22px,3.2vw,30px) clamp(20px,3.2vw,34px);
  border-radius:20px; color:var(--white);
  background:
    repeating-radial-gradient(ellipse at 26% 54%, transparent 0 22px, rgba(255,255,255,.085) 22px 23px, transparent 23px 44px),
    repeating-radial-gradient(ellipse at 32% 50%, transparent 0 34px, rgba(255,255,255,.05) 34px 35px, transparent 35px 68px),
    radial-gradient(circle at 93% -12%, rgba(74,184,72,.5), transparent 44%),
    linear-gradient(135deg, #04321E 0%, #0A5433 100%);
  box-shadow:0 22px 52px rgba(4,50,30,.26);
}
.siegel::before{
  content:''; position:absolute; top:50%; right:-48px; width:152px; height:152px;
  border:1px solid rgba(255,255,255,.2); border-radius:50%; transform:translateY(-50%);
  box-shadow:
    0 0 0 14px rgba(255,255,255,.05), 0 0 0 15px rgba(255,255,255,.13),
    0 0 0 30px rgba(255,255,255,.035), 0 0 0 31px rgba(255,255,255,.09);
  pointer-events:none;
}
.siegel-copy{position:relative; z-index:2; flex:1; min-width:0}
.siegel-eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 11px; font-size:.75rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green-400);
}
/* Bildmarke auf heller Scheibe — das Dunkelgruen der Marke ginge sonst im Grund unter */
.siegel-brand{
  flex-shrink:0; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%; background:var(--white);
  box-shadow:0 3px 10px rgba(4,50,30,.3);
}
.siegel-brand img{width:19px; height:auto; display:block}
.siegel-headline{
  margin:0; font-family:var(--font-sans); font-size:clamp(1.45rem,4.4vw,2.05rem);
  font-weight:750; line-height:1.12; letter-spacing:-.03em;
  color:transparent; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-image:linear-gradient(135deg,#FFFFFF 0%,#DEF1DB 52%,#77CC70 100%);
  padding-bottom:.06em;
}
/* Ohne background-clip:text bliebe die Zeile unsichtbar */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .siegel-headline{color:var(--white); -webkit-text-fill-color:currentColor}
}
.siegel-sub{margin:10px 0 0; font-size:clamp(.9rem,1.9vw,1.02rem); line-height:1.45; color:rgba(255,255,255,.86)}
.siegel-sub strong{color:var(--white); font-weight:700}
.siegel-fn{color:rgba(255,255,255,.7); text-decoration:none; font-size:.85em; vertical-align:super; margin-left:2px}
.siegel-fn:hover{color:var(--white)}
.siegel-shield{
  position:relative; z-index:2; flex-shrink:0;
  width:clamp(58px,9vw,84px); height:clamp(58px,9vw,84px); display:grid; place-items:center;
}
.siegel-shield svg{width:100%; height:100%}


@media(max-width:520px){
  .siegel-eyebrow{letter-spacing:.1em; gap:8px}
  .siegel-brand{width:26px; height:26px}
  .siegel-brand img{width:16px}
}
@media(max-width:400px){
  .siegel{gap:12px; padding:20px 18px}
  .siegel-shield{width:52px; height:52px}
}

/* ---------- Projekt / Objektdaten ---------- */
.projekt-grid{display:grid; grid-template-columns:1fr; gap:var(--space-7); align-items:start}
.objektdaten{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,4vw,40px); box-shadow:var(--shadow-sm)}
.objektdaten .eyebrow{margin-bottom:var(--space-4)}
.data-list{display:flex; flex-direction:column}
.data-list>div{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0; border-bottom:1px solid var(--line-soft)}
.data-list>div:last-child{border-bottom:0}
.data-list dt{color:var(--muted); font-size:1rem}
.data-list dd{font-weight:650; color:var(--ink); text-align:right}
.data-list .row-price{border-top:2px solid var(--green-200); margin-top:6px; padding-top:18px; border-bottom:0}
.data-list .row-price dt{color:var(--ink); font-weight:600}
.data-list .row-price dd{color:var(--green-700); font-weight:750; font-size:1.25rem}
.objektdaten-note{margin-top:var(--space-4); font-size:.9rem; color:var(--muted)}

.check-list{display:flex; flex-direction:column; gap:12px; margin-top:var(--space-5)}
.check-list li{position:relative; padding-left:34px; font-size:1.05rem; color:var(--body)}
.check-list li::before{
  content:''; position:absolute; left:0; top:5px; width:22px; height:22px; border-radius:50%;
  background:var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028945' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.section-dark .check-list li{color:var(--green-100)}
.section-dark .check-list li::before{background-color:rgba(255,255,255,.14)}

.projekt-figure{margin-top:var(--space-7)}
.projekt-figure img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.projekt-figure figcaption{margin-top:14px; font-size:.92rem; color:var(--muted); text-align:center}

/* ---------- Grundriss ---------- */
.grundriss-media{
  margin:0 auto; max-width:1040px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(10px,1.4vw,18px); box-shadow:var(--shadow);
}
.grundriss-media a{display:block; border-radius:10px; overflow:hidden}
.grundriss-media img{width:100%; height:auto; display:block; transition:transform .5s ease}
.grundriss-media a:hover img{transform:scale(1.02)}
.grundriss-media figcaption{
  margin-top:16px; padding-inline:6px; font-size:.92rem; color:var(--muted);
  text-align:center; line-height:1.5;
}
.gr-zoom{
  display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:6px;
  color:var(--green-700); font-weight:650;
}
.gr-zoom::before{
  content:''; width:17px; height:17px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028945' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/17px no-repeat;
}
.grundriss-cta{display:flex; justify-content:center; margin-top:var(--space-6)}


/* ---------- Preisangabe (Exposé-Seite) ---------- */
.hp-amount{display:block; font-size:clamp(1.7rem,3vw,2.1rem); font-weight:750; color:var(--green-700); letter-spacing:-.02em; margin-top:4px}

/* ---------- Ausstattung ---------- */
.feature-grid{display:grid; grid-template-columns:1fr; gap:var(--space-4)}
.feature{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3.2vw,34px); transition:var(--transition)}
.feature:hover{border-color:var(--green-400); box-shadow:var(--shadow-sm); transform:translateY(-3px)}
.feature-icon{display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--space-4)}
.feature-icon img{width:56px; height:56px}
.feature h4{margin-bottom:8px}
.feature p{color:var(--body); font-size:1rem; margin-top:0}

.extras{margin-top:var(--space-7); background:var(--green-50); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,4vw,44px)}
.extras h3{margin-bottom:var(--space-4)}
.extras-grid{display:grid; grid-template-columns:1fr; gap:12px 32px}
.extras-grid li{position:relative; padding-left:34px; font-size:1.02rem; padding-block:4px}
.extras-grid li::before{
  content:''; position:absolute; left:0; top:8px; width:22px; height:22px; border-radius:50%;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028945' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- Energiekonzept (dunkelgrün) ---------- */
.energie-grid{display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:center}
/* Festes Seitenverhaeltnis: sonst richtet sich die Bildhoehe allein nach der
   Bildbreite und der Platz neben dem Text bleibt zur Haelfte leer. */
.energie-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg)}

/* Die vier Anlagen: feine Trennlinie statt gerahmter Kaesten — dieselbe
   Linienfarbe wie im Zahlenband weiter oben. */
.energie-specs{list-style:none; padding:0; margin:var(--space-7) 0 0; display:grid; grid-template-columns:1fr; gap:var(--space-5)}
.energie-specs li{border-top:1px solid rgba(255,255,255,.22); padding-top:var(--space-4)}
.energie-specs .es-icon{display:block; width:48px; height:48px; color:var(--green-400); margin-bottom:14px}
/* Einspaltig aufs Handy: Icon neben den Text, wie bei den Lage-Fakten */
@media(max-width:599px){
  .energie-specs li{display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:center}
  .energie-specs .es-icon{grid-column:1; grid-row:1 / span 2; align-self:center; margin-bottom:0}
  .energie-specs h4{grid-column:2; grid-row:1}
  .energie-specs p{grid-column:2; grid-row:2; max-width:none}
}
.energie-specs h4{margin:0; font-size:1.06rem; line-height:1.3}
.energie-specs p{margin:7px 0 0; color:var(--green-200); font-size:.98rem; line-height:1.5; max-width:32ch}

/* ---------- Galerie ---------- */
/* Galerie als Endlos-Karussell -----------------------------------------
   Gewischt wird mit dem nativen Scrollen des Browsers — das fuehlt sich auf
   dem Handy richtig an und funktioniert ohne Zusatzbibliothek. Den Endlos-
   Umlauf besorgt js/main.js. */
.galerie-band{
  margin-top:var(--space-6);
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;          /* kein Zurueckwischen der Seite */
  /* html{scroll-behavior:smooth} wird vererbt. Der Umlauf-Sprung muss aber
     hart sein, sonst gleitet die Ansicht sichtbar ueber den ganzen Satz. */
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                   /* Leiste ausblenden: Firefox */
  /* Sanftes Ausblenden an beiden Raendern */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.galerie-band::-webkit-scrollbar{display:none}   /* Leiste ausblenden: Safari/Chrome */
.gb-spur{display:flex; gap:var(--space-3); width:max-content; padding:4px var(--space-3)}
.galerie-band figure{
  position:relative; flex:0 0 min(78vw, 460px);
  margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
.galerie-band img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
.galerie-band figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 20px 16px; color:var(--white);
  font-size:.95rem; font-weight:600; background:linear-gradient(180deg,transparent,rgba(4,50,30,.82))
}

/* ---------- Lage ---------- */
.lage-grid{display:grid; grid-template-columns:1fr; gap:var(--space-7); align-items:center}
/* Einspaltig steht die Bildstrecke ganz oben, noch vor der Ueberschrift.
   display:contents loest das Grid auf, damit Matrix und Text einzeln in die
   Reihenfolge des Containers einsortiert werden koennen — sonst liesse sich
   nur das ganze Grid verschieben. Ab 900px bleibt alles beim Zweispalter. */
@media(max-width:899px){
  #lage > .container{display:flex; flex-direction:column}
  #lage .lage-grid{display:contents}
  #lage .lage-media{order:1; margin-bottom:var(--space-6)}
  #lage .section-head{order:2; margin-bottom:var(--space-4)}
  #lage .lage-text{order:3}
  #lage .lage-facts{order:4}
}
.lage-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}

/* Bildermatrix Lüneburg ------------------------------------------------
   Zwei Spalten, die gegenlaeufig durchlaufen. Oben und unten blendet eine
   Maske die Kacheln aus, damit die Bewegung nicht hart abgeschnitten wirkt. */
.stadtmatrix{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  height:clamp(360px,64vw,540px); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.sm-spalte{overflow:hidden}
/* Kein gap, sondern Abstand an der Kachel: nur so ist die Laufhoehe exakt
   doppelt so hoch wie ein Satz und der Sprung bei -50% unsichtbar. */
.sm-lauf{display:block; will-change:transform; animation:sm-hoch 46s linear infinite}
.sm-spalte:nth-child(2) .sm-lauf{animation-name:sm-runter; animation-duration:54s}
.sm-lauf figure{margin:0 0 14px}
.sm-lauf img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
}
@keyframes sm-hoch{from{transform:translateY(0)}      to{transform:translateY(-50%)}}
@keyframes sm-runter{from{transform:translateY(-50%)} to{transform:translateY(0)}}

/* Wer Bewegung reduziert haben moechte, sieht die Matrix ruhig stehen. */
@media(prefers-reduced-motion:reduce){
  .sm-lauf{animation:none}
}

.sm-credit{margin-top:var(--space-3); font-size:.78rem; line-height:1.45; color:var(--muted)}
.sm-credit a{color:var(--muted); text-decoration:underline}
.sm-credit a:hover{color:var(--green-700)}
/* ---------- Lage-Karte ---------- */
/* Bewusst ein OSM-iframe statt Leaflet: kein Skript, kein CDN, keine
   Integritaets-Hashes und keine Groessenprobleme beim Initialisieren.
   Nur einspaltig sichtbar — auf dem Desktop traegt die Bildmatrix die Sektion. */
.lage-karte{margin:var(--space-5) 0 0}
.karte{display:none}
@media(max-width:899px){
  .karte{
    display:block; width:100%; height:clamp(300px,58vw,400px);
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--green-100);
    /* OSM-Kacheln sind beige-bunt. Stark entsaettigen, aufhellen und nur leicht
       ins Gruene drehen — mehr Saettigung kippt sofort ins Giftgruene. */
    filter:grayscale(.72) sepia(.26) hue-rotate(78deg) saturate(.85) brightness(1.08) contrast(.9);
  }
}

.karte-adresse{
  display:flex; align-items:center; gap:10px; margin-top:var(--space-5);
  font-size:.95rem; color:var(--muted); line-height:1.45;
}
.karte-adresse svg{width:19px; height:19px; flex-shrink:0; color:var(--green-700)}
@media(max-width:899px){ .karte-adresse{margin-top:12px} }
.karte-adresse strong{color:var(--ink); font-weight:650}
.lage-facts{display:grid; grid-template-columns:1fr; gap:14px; margin-top:var(--space-7)}
.fact-card{display:flex; align-items:center; gap:18px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 22px}
.fact-icon{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center}
.fact-icon img{width:48px; height:48px}
.fact-card h4{margin:0; font-size:1.06rem}
.fact-card p{margin:3px 0 0; color:var(--muted); font-size:.95rem; line-height:1.45}

/* ---------- Prozess ---------- */
.process-layout{display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start}
.process-sticky h2{margin-top:var(--space-3)}
.process-contact{margin-top:var(--space-6); padding:clamp(24px,3.5vw,32px); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.section-dark .process-contact{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18)}
.pc-label{font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700)}
.section-dark .pc-label{color:var(--green-400)}
.pc-claim{font-size:clamp(1.15rem,2vw,1.35rem); font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.35; margin-top:10px}
.section-dark .pc-claim{color:var(--white)}
.pc-hint{font-size:.95rem; color:var(--muted); margin-top:6px}
.section-dark .pc-hint{color:var(--green-200)}
.process-cta{margin-top:var(--space-5); width:100%}

.process-cards{display:flex; flex-direction:column; gap:var(--space-4); counter-reset:pstep}
.pcard{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3.4vw,36px); box-shadow:var(--shadow-sm)}
.section-dark .pcard{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); box-shadow:none}
.pcard-num{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--green-100); color:var(--green-800); font-size:1.05rem; font-weight:750; margin-bottom:14px}
.section-dark .pcard-num{background:var(--green-600); color:var(--white)}
.pcard h3{margin-bottom:0; font-size:clamp(1.2rem,2.2vw,1.45rem)}
.pcard p{color:var(--body); font-size:1rem; margin-top:10px}
.section-dark .pcard p{color:var(--green-200)}
.pcard-list{margin:14px 0 0; display:flex; flex-direction:column; gap:9px}
.pcard-list li{position:relative; padding-left:22px; font-size:.98rem; line-height:1.5}
.pcard-list li::before{content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--green-500)}
.js .pcard.reveal{transform:translateY(40px) scale(.975); transition:opacity .6s ease, transform .6s ease}
.js .pcard.reveal.is-visible{transform:none}

/* ---------- CTA ---------- */
.cta-section{background:var(--green-50)}
.cta-grid{display:grid; grid-template-columns:1fr; gap:var(--space-7); align-items:center}
.cta-trust{display:flex; flex-direction:column; gap:12px; margin:var(--space-5) 0}
.cta-trust li{position:relative; padding-left:32px; color:var(--body); font-size:1.05rem}
.cta-trust li::before{
  content:''; position:absolute; left:0; top:4px; width:22px; height:22px; border-radius:50%;
  background:var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028945' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.cta-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-lg)}
/* Exposé-Mockup ist ein Freisteller mit Transparenz. box-shadow und
   border-radius wuerden hier ein Rechteck um die durchsichtige Flaeche legen —
   deshalb drop-shadow, das folgt der Silhouette der Broschuere. */
.cta-media-expose img{
  border-radius:0; box-shadow:none;
  filter:drop-shadow(0 24px 30px rgba(4,50,30,.20)) drop-shadow(0 6px 10px rgba(4,50,30,.09));
}

/* ---------- FAQ ---------- */
.faq-list{max-width:860px; margin:var(--space-6) auto 0}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); margin-bottom:12px; transition:var(--transition)}
.faq-item[open]{border-color:var(--green-400); box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none; cursor:pointer; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-weight:650; font-size:clamp(1.02rem,2vw,1.15rem); color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:''; width:24px; height:24px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028945' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/22px no-repeat; transition:var(--transition)}
.faq-item[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23028945' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.faq-item p{margin:0 24px 24px; color:var(--body); max-width:72ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900); color:var(--green-100); padding-block:var(--space-7)}
.footer-inner{display:flex; flex-direction:column; gap:var(--space-5); align-items:center; text-align:center}
.footer-brand{display:flex; flex-direction:column; align-items:center; gap:14px}
.footer-logo{height:74px; width:auto}
.footer-address{font-style:normal; font-size:.95rem; color:var(--green-200); line-height:1.7}
.footer-address a{color:var(--white); font-weight:650}
.footer-legal{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 24px}
.footer-legal a{font-size:1rem; color:var(--green-100); transition:var(--transition)}
.footer-legal a:hover{color:var(--green-400)}
.footer-legal button{background:none;border:0;padding:0;font:inherit;color:var(--green-100);cursor:pointer}
.footer-legal button:hover{color:var(--green-400)}
.footer-fn{font-size:.82rem; line-height:1.55; color:var(--green-200); width:100%; max-width:70ch; opacity:.85}
.footer-copy{font-size:.9rem; color:var(--green-200); width:100%; border-top:1px solid rgba(255,255,255,.14); padding-top:var(--space-4)}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease}
.js .reveal.is-visible{opacity:1; transform:none}

/* ---------- Sticky Mobil-CTA ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--line); backdrop-filter:blur(10px);
}
.mobile-cta .btn{flex:1; min-height:54px; padding:14px 12px; font-size:.98rem}

/* ---------- Feedback-Hinweise ---------- */
.extras-hinweis{margin-top:var(--space-4); font-size:.92rem; color:var(--muted)}
.kfw-hinweis{
  margin-top:var(--space-5); padding:18px 22px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); border-left:4px solid var(--green-400);
}
.kfw-hinweis p{margin:6px 0 0; color:var(--white)}
.kfw-hinweis .kfw-titel{margin:0; font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-400)}
.kfw-hinweis strong{font-weight:750}

/* ---------- Zielgruppen ---------- */
.zielgruppen{display:grid; gap:var(--space-7)}
.zg-karte{display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center}
.zg-bild img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:45% 35%; border-radius:var(--radius); box-shadow:var(--shadow)}
.zg-label{margin:0; font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700)}
.zg-text h3{margin-top:var(--space-2)}
.zg-text .check-list{margin-top:var(--space-4)}

/* ---------- Baufortschritt ---------- */
.bau-grid{display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start}
.bau-timeline{list-style:none; padding:0; margin:var(--space-6) 0 0}
.bau-timeline li{position:relative; padding:0 0 var(--space-5) 38px}
.bau-timeline li:last-child{padding-bottom:0}
/* Verbindungslinie zum naechsten Punkt */
.bau-timeline li::before{content:''; position:absolute; left:8px; top:14px; bottom:-6px; width:2px; background:var(--line)}
.bau-timeline li:last-child::before{display:none}
/* Punkt: leer = kommt noch, gefuellt = erledigt, mit Ring = aktueller Stand */
.bau-timeline li::after{content:''; position:absolute; left:2px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--white); border:2px solid var(--line)}
.bau-timeline .bt-erledigt::before{background:var(--green-400)}
.bau-timeline .bt-erledigt::after{background:var(--green-700); border-color:var(--green-700)}
.bau-timeline .bt-aktuell::after{background:var(--green-500); border-color:var(--green-500); box-shadow:0 0 0 5px rgba(74,184,72,.25)}
.bt-zeit{display:block; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700)}
.bt-titel{display:block; margin-top:2px; font-size:1.1rem; font-weight:650; color:var(--ink)}
.bt-text{display:block; margin-top:2px; font-size:1rem; color:var(--body)}

/* Polaroids: weisser Rahmen, breiter Rand unten, leicht verkippt.
   Auf weissem Grund traegt der Schatten plus zarter Rand die Kante. */
.bau-polaroids{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.6vw,28px); padding:10px}
.polaroid{
  margin:0; padding:9px 9px 0; background:var(--white); border:1px solid var(--line-soft); border-radius:3px;
  box-shadow:0 14px 30px rgba(4,50,30,.13), 0 2px 6px rgba(4,50,30,.07);
  transform:rotate(var(--kipp,0deg)); transition:transform .3s ease;
}
.polaroid img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.polaroid figcaption{padding:11px 4px 15px; text-align:center; font-size:.88rem; font-style:italic; line-height:1.35; color:var(--body)}
.bau-polaroids .polaroid:nth-child(1){--kipp:-2deg}
.bau-polaroids .polaroid:nth-child(2){--kipp:1.6deg; margin-top:18px}
.bau-polaroids .polaroid:nth-child(3){--kipp:1.3deg}
.bau-polaroids .polaroid:nth-child(4){--kipp:-1.7deg; margin-top:18px}
.bau-polaroids .polaroid:nth-child(5){--kipp:1.1deg}
@media(hover:hover){ .polaroid:hover{transform:rotate(0deg) scale(1.03)} }

/* Grosses Polaroid ueber der Ueberschrift — zeigt den aktuellen Stand gross.
   Steht ausserhalb des Streifens, deshalb sind dessen nth-child-Regeln
   auf .bau-polaroids begrenzt. */
.polaroid-gross{--kipp:-1.5deg; max-width:520px; margin:0}
.polaroid-gross img{aspect-ratio:4/3}
.polaroid-gross figcaption{font-size:.95rem}
@media(max-width:899px){
  .polaroid-gross{--kipp:-1.2deg; max-width:none}
}
/* min-width:0 ist Pflicht: als Grid-Item wuerde der Wrapper sonst auf die
   Inhaltsbreite des Streifens wachsen und die Sektion breiter machen als
   den Viewport. Vorher war der Scroll-Container selbst das Grid-Item und
   hatte automatisch die Mindestgroesse 0. */
.bau-fotos{min-width:0}
.bau-wisch{display:none; align-items:center; justify-content:center; gap:8px; margin:-14px 0 0; font-size:.82rem; color:var(--muted)}
.bau-wisch svg{width:15px; height:15px}

/* Mobil: Fotostreifen zum Wischen statt gequetschter Zweispalter.
   Zwei Spalten ergaben auf dem Handy ~150px breite Bilder mit umbrechenden
   Bildunterschriften. Der Streifen laeuft randlos aus dem Container heraus,
   die angeschnittene naechste Karte zeigt, dass es weitergeht. */
@media(max-width:699px){
  .bau-polaroids{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad-x);
    padding:14px var(--pad-x) 34px;
    margin-inline:calc(var(--pad-x) * -1);
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .bau-polaroids::-webkit-scrollbar{display:none}
  .polaroid{
    flex:0 0 76%;
    max-width:300px;
    scroll-snap-align:center;
  }
  /* Im Streifen stehen die Bilder gerade — verkippt wuerden sie sich beim
     Snappen gegenseitig ueberlappen. */
  /* :nth-child(n) nur der Spezifitaet wegen — ohne das verlieren diese
     Werte gegen die .bau-polaroids .polaroid:nth-child(N)-Regeln oben. */
  .bau-polaroids .polaroid:nth-child(n){--kipp:0deg; margin-top:0}
  .polaroid figcaption{padding:12px 6px 16px; font-size:.92rem}
  .bau-wisch{display:flex}
}

@media(min-width:900px){
  .zg-karte{grid-template-columns:1fr 1fr; gap:var(--space-8)}
  .zg-karte-gespiegelt .zg-bild{order:2}
  /* Zweispaltig oben: links Text und Zeitleiste, rechts das aktuelle Foto
     gross. Darunter die Historie ueber die volle Breite — so bleiben beide
     Spalten aehnlich hoch statt einer langen, duennen Bilderspalte. */
  .bau-grid{grid-template-columns:1fr 1fr; gap:var(--space-8)}
  .bau-text{grid-column:1; grid-row:1}
  .polaroid-gross{grid-column:2; grid-row:1; justify-self:center; align-self:start}
  .bau-fotos{grid-column:1 / -1; grid-row:2}
  .bau-polaroids{grid-template-columns:repeat(4,1fr)}
  /* Das fuenfte zeigt dasselbe Foto wie das grosse daneben und bliebe in
     einer zweiten Reihe allein stehen. */
  .bau-polaroids .polaroid:nth-child(5){display:none}
  .polaroid{padding:12px 12px 0}
  .polaroid figcaption{padding:15px 6px 20px; font-size:.95rem}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:600px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .lage-facts{grid-template-columns:1fr 1fr}
  .extras-grid{grid-template-columns:1fr 1fr}
  .energie-specs{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .projekt-grid{grid-template-columns:1.05fr .95fr; gap:var(--space-8)}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .lage-grid{grid-template-columns:1fr 1fr; gap:var(--space-8)}
  .stadtmatrix{height:clamp(440px,34vw,560px)}
  .energie-grid{grid-template-columns:1.02fr .98fr; gap:var(--space-8)}
  .energie-specs{grid-template-columns:repeat(4,1fr); gap:var(--space-6); margin-top:var(--space-8)}
  .process-layout{grid-template-columns:.85fr 1.15fr; gap:var(--space-8)}
  .process-sticky{position:sticky; top:110px; align-self:start}
  .cta-grid{grid-template-columns:.92fr 1.08fr}
  /* Etwas groesser als das bisherige Bild: breitere Spalte plus leichter
     Ueberhang in den Aussenrand. Nur ab 900px, darunter wuerde das Bild
     sonst aus dem Container laufen. */
  .cta-media-expose img{width:108%; max-width:none; margin-left:-4%}
  .footer-inner{flex-direction:row; justify-content:space-between; text-align:left; align-items:flex-start; flex-wrap:wrap}
  .footer-brand{align-items:flex-start}
  .footer-legal{justify-content:flex-end}
  .br-lg{display:inline}
}

/* ---------- Mobile Navigation ---------- */
@media(max-width:1080px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw); height:100dvh;
    background:var(--white); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:var(--space-5); padding:var(--space-8) var(--space-6);
    transform:translateX(100%); transition:transform .3s ease; box-shadow:-20px 0 60px rgba(4,50,30,.2);
  }
  .nav.open{transform:translateX(0)}
  .nav>a{font-size:1.25rem}
  .nav-cta{margin-top:var(--space-3); width:100%}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  body.nav-open{overflow:hidden}
}
/* Hero auf schmalen Viewports: Bild oben, Text darunter auf Dunkelgrün.
   Verhindert, dass der Vollbild-Crop nur noch eine Hauswand zeigt. */
@media(max-width:700px){
  /* Kopfzeile scrollt auf dem Handy mit der Seite weg statt zu kleben.
     Sie belegt dadurch wieder eigenen Platz im Fluss — deshalb entfaellt
     hier zugleich das padding-top:72px am Hero, das nur den Platz unter der
     fixierten Kopfzeile ausgeglichen hat. */
  .site-header{position:static}
  /* Ohne fixierte Kopfzeile braucht ein Sprungziel keinen Vorlauf mehr. */
  html{scroll-padding-top:16px}
  .hero{min-height:0; display:block; align-items:stretch; background:var(--green-900)}
  .hero-bg{position:relative; inset:auto; z-index:0}
  .hero-bg img{width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; object-position:50% 58%}
  .hero-overlay{display:none}
  .hero-content{padding-top:0; padding-bottom:44px; max-width:none}
  /* translateY(-100%) bezieht sich auf die eigene Hoehe des Traegers, also auf
     die Badge-Hoehe — bleibt damit richtig, auch wenn Schrift oder Polsterung
     sich aendern. Der freigewordene Platz im Fluss dient als Abstand ueber der
     Ueberschrift. */
  .hero-badge-slot{transform:translateY(calc(-100% - 20px))}
  /* Badge zeigt mobil „Neubau · provisionsfrei“, der Ort steht als eigene
     Zeile mit Standort-Icon direkt ueber der H1. */
  .hb-mid,.hb-ort{display:none}
  .hb-mobil{display:inline}
  .hero-ort{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:.98rem; font-weight:600; color:var(--green-200)}
  .hero-ort svg{width:18px; height:18px; flex-shrink:0; color:var(--green-400)}
  /* Auf dem Foto (helle Pflasterflaeche) traegt die transparente Glas-Variante
     die weisse Schrift nicht mehr — deshalb dunkler hinterlegt. */
  .hero-badge{margin-bottom:0; background:rgba(4,50,30,.62); border-color:rgba(255,255,255,.5); box-shadow:0 6px 20px rgba(0,0,0,.3)}
  .hero-content h1,.hero-lead{text-shadow:none}
  .hero-lead{max-width:none}
  .hero-actions{gap:12px}
  .hero-actions .btn{width:100%}
}

@media(max-width:760px){
  .mobile-cta{display:flex}
  body{padding-bottom:78px}
  .site-footer{padding-bottom:calc(var(--space-7) + 20px)}
}
@media(max-width:480px){
  .brand-word{display:none}
  .brand-mark{height:40px}
}

/* ============================================================
   RECHTLICHE SEITEN
   ============================================================ */
.legal{padding-top:clamp(120px,14vw,170px); padding-bottom:var(--sec-y); background:var(--white); min-height:100vh}
.legal .container{max-width:860px}
.legal h1{margin-bottom:var(--space-5)}
.legal h2{font-size:clamp(1.25rem,2.6vw,1.6rem); margin-top:var(--space-6); margin-bottom:var(--space-3)}
.legal h3{font-size:1.12rem; margin-top:var(--space-4); margin-bottom:6px}
.legal p,.legal li{color:var(--body); font-size:1.02rem; line-height:1.75}
.legal ul{margin:var(--space-3) 0; padding-left:22px; list-style:disc}
.legal address{font-style:normal; line-height:1.8}
.legal a{color:var(--green-700); text-decoration:underline}
.legal .todo{background:var(--green-50); border-left:4px solid var(--green-500); padding:14px 18px; border-radius:6px; font-size:.95rem; color:var(--green-800)}
.legal .back-link{display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-7); font-size:1rem; font-weight:650; color:var(--green-700); text-decoration:none}
.legal-header{position:static; background:var(--white)}

/* ============================================================
   FUNNEL
   ============================================================ */
.funnel{min-height:100vh; background:var(--green-50); color:var(--body); display:flex; flex-direction:column; padding:clamp(18px,4vw,40px)}
.funnel-inner{width:100%; max-width:920px; margin:0 auto; flex:1; display:flex; flex-direction:column}
.funnel-top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:10px}
.funnel-brand img{height:44px; width:auto}
.funnel-meta{display:flex; align-items:center; gap:18px}
.funnel-step-label{font-size:.86rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700)}
.funnel-cancel{font-size:.95rem; color:var(--muted); transition:var(--transition)}
.funnel-cancel:hover{color:var(--ink)}
.funnel-progress{height:3px; background:var(--green-100); margin-top:18px; position:relative; overflow:hidden}
.funnel-progress span{position:absolute; inset:0 auto 0 0; background:var(--green-600); width:20%; transition:width .4s ease}
.funnel-body{flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,6vh,64px) 0}
.funnel-step{display:none}
.funnel-step.active{display:block; animation:fadeUp .38s ease}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.funnel-h{font-size:clamp(1.6rem,4.2vw,2.6rem); font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.18}
.funnel-sub{color:var(--body); margin-top:14px; font-size:1.08rem; max-width:620px}
.funnel-options{display:flex; flex-direction:column; gap:14px; margin-top:var(--space-6); max-width:780px}
.opt-btn{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left;
  background:var(--white); border:1px solid var(--line); border-radius:8px; padding:21px 24px;
  color:var(--ink); font-family:var(--font-sans); font-size:1.08rem; font-weight:600; cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease; min-height:66px;
}
.opt-btn:hover,.opt-btn.selected{border-color:var(--green-600); background:var(--green-50)}
.opt-btn .arr{color:var(--green-600); font-size:1.3rem; flex-shrink:0}
.funnel-options-2col{display:grid; grid-template-columns:1fr; gap:14px; max-width:780px}
@media(min-width:640px){ .funnel-options-2col{grid-template-columns:1fr 1fr} }

.haus-picker{display:grid; grid-template-columns:1fr; gap:16px; max-width:860px}
@media(min-width:720px){ .haus-picker{grid-template-columns:repeat(3,1fr)} }
.haus-choice{
  display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:0; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:10px; color:var(--ink);
  font-family:var(--font-sans); cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease;
}
.haus-choice:hover,.haus-choice.selected{border-color:var(--green-600); box-shadow:var(--shadow-sm)}
.haus-choice img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.hc-body{padding:16px 18px; display:flex; flex-direction:column; gap:3px}
.hc-name{font-size:1.1rem; font-weight:700}
.hc-price{color:var(--green-700); font-weight:700}

.funnel-form{display:flex; flex-direction:column; gap:18px; margin-top:var(--space-6); max-width:540px}
.field label:not(.funnel-check){display:block; font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); margin-bottom:9px}
.field input:not([type="checkbox"]){
  width:100%; background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; color:var(--ink); font-family:var(--font-sans); font-size:1.05rem;
  transition:border-color .18s ease, box-shadow .18s ease; min-height:58px;
}
.field input:not([type="checkbox"])::placeholder{color:#9AA79F}
.field input:not([type="checkbox"]):focus{outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(2,137,69,.14)}
.funnel-consent{font-size:.92rem; color:var(--muted); line-height:1.55}
.funnel-consent a{color:var(--green-700); text-decoration:underline}
.funnel-check{display:flex; align-items:center; gap:13px; color:var(--body); font-size:1rem; cursor:pointer; line-height:1.5}
.funnel-check input{width:26px; height:26px; min-height:0; margin:0; accent-color:var(--green-700); flex-shrink:0}
.funnel-check a{color:var(--green-700); text-decoration:underline}
.funnel-actions{display:flex; align-items:center; gap:20px; margin-top:6px; flex-wrap:wrap}
.funnel-back{background:none; border:0; color:var(--muted); font-family:var(--font-sans); font-size:1rem; cursor:pointer; padding:8px 0}
.funnel-back:hover{color:var(--ink)}
.field-error{color:#B4451F; font-size:.9rem; margin-top:6px; display:none; font-weight:600}
.field.invalid input:not([type="checkbox"]){border-color:#B4451F; box-shadow:0 0 0 3px rgba(180,69,31,.1)}
.field.invalid .field-error{display:block}
.field-check.invalid .funnel-check input{outline:2px solid #B4451F; outline-offset:2px}

.funnel-faq{margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--line); max-width:780px}
.funnel-faq-h{font-size:clamp(1.3rem,3vw,1.8rem); margin-top:8px}
.funnel-steps-list{margin-top:var(--space-4); max-width:780px}
.result-head{max-width:660px}
.result-icon{width:76px; height:76px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4)}
.result-icon svg{width:38px; height:38px}

/* ---------- Exposé-Downloads ---------- */
.result-cards{display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-top:var(--space-6)}
@media(min-width:700px){ .result-cards{grid-template-columns:1fr 1fr} }
.dl-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
.dl-card>img{width:100%; aspect-ratio:16/10; object-fit:cover}
.dl-body{padding:var(--space-4); display:flex; flex-direction:column; gap:10px; flex:1}
.dl-body h3{font-size:1.3rem}
.dl-body p{color:var(--body); font-size:.98rem; margin:0; flex:1}
.dl-body .btn{margin-top:8px}

/* ============================================================
   COOKIE-BANNER
   ============================================================ */
.cookie-consent{position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:16px; transform:translateY(120%); transition:transform .4s ease}
.cookie-consent.open{transform:none}
.cc-inner{
  max-width:var(--content-max); margin:0 auto; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;
  display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-lg);
}
.cc-title{font-weight:700; color:var(--ink); font-size:1.08rem; margin:0}
.cc-text{color:var(--body); font-size:.95rem; line-height:1.6; margin:8px 0 0; max-width:76ch}
.cc-text a{color:var(--green-700); text-decoration:underline}
.cc-toggle{display:inline-flex; align-items:center; gap:10px; margin-top:14px; color:var(--ink); font-size:1rem; cursor:pointer}
.cc-toggle[hidden]{display:none}
.cc-toggle input{width:22px; height:22px; accent-color:var(--green-700)}
.cc-actions{display:flex; flex-wrap:wrap; gap:12px}
.cc-btn{font-family:var(--font-sans); font-weight:650; font-size:.98rem; padding:14px 24px; border-radius:var(--radius-sm); border:2px solid transparent; cursor:pointer; transition:var(--transition); white-space:nowrap; min-height:52px}
.cc-btn-primary{background:var(--green-700); color:var(--white)}
.cc-btn-primary:hover{background:var(--green-800)}
.cc-btn-secondary{background:var(--white); color:var(--green-800); border-color:var(--line)}
.cc-btn-secondary:hover{border-color:var(--green-600)}
.cc-btn-ghost{background:transparent; color:var(--muted); border:0}
.cc-btn-ghost:hover{color:var(--ink)}
@media(min-width:900px){
  .cc-inner{flex-direction:row; align-items:center; justify-content:space-between; gap:32px}
  .cc-actions{flex-shrink:0}
}
@media(max-width:760px){ .cookie-consent{bottom:78px} }

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}