/* Bornheimer Wiesengärten – Projekt-Landingpage
   CI wie friedmannwohnbau.de / Bienwald: Schwarz #252525, Akzent #EC8544,
   Grau #F2F2F2 / #E5E5E5, helmut (Headlines) + albert_sans (Text). */

:root{
  --ink:#252525;
  --ink-70:rgba(37,37,37,.7);
  --ink-45:rgba(37,37,37,.45);
  --paper:#fff;
  --sand:#f2f2f2;
  --line:#e5e5e5;
  --accent:#ec8544;
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:albert_sans,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.display{font-family:helmut,albert_sans,Georgia,serif;font-weight:300;
  line-height:1.06;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(38px,6.4vw,86px)}
h2{font-size:clamp(30px,4.6vw,62px)}
h3{font-size:clamp(20px,2.2vw,27px)}
p{margin:0 0 1.1em}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.kicker{font-size:14px;font-weight:500;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 18px;display:block}
.band{padding-block:clamp(72px,11vw,150px)}
.band.sand{background:var(--sand)}
.band.dark{background:var(--ink);color:var(--paper)}
.band.dark .kicker{color:rgba(255,255,255,.55)}
.lead{font-size:clamp(19px,1.6vw,22px);color:var(--ink-70);max-width:62ch}
.band.dark .lead{color:rgba(255,255,255,.72)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.7em;border-radius:999px;
  font:inherit;font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border-color:currentColor}
.btn.sm{padding:.55em 1.15em;font-size:14.5px}

/* ---- Kopfleiste ---- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--paper) 80%,transparent);border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.top.show{transform:none}
.top .bar{display:flex;align-items:center;justify-content:space-between;height:62px}
.top .dev{font-family:helmut,serif;font-size:17px}
.top nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.top nav a{font-size:15px;text-decoration:none;color:var(--ink-70)}
.top nav a:hover{color:var(--ink)}
@media(max-width:800px){.top nav a:not(.btn){display:none}}

/* ---- Hero ---- */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.05) 30%,
    rgba(0,0,0,.42) 62%,rgba(0,0,0,.78) 100%)}
.hero-in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(44px,8vh,92px);color:#fff}
.hero-in .kicker{color:rgba(255,255,255,.75)}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero-sub{margin:22px 0 30px;max-width:48ch;color:rgba(255,255,255,.88);font-size:clamp(17px,1.5vw,20px)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.scrollcue{position:absolute;left:50%;bottom:18px;z-index:3;translate:-50% 0;width:1px;height:46px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.75));animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- Journey: Scroll-Kamerafahrt ---------- */
/* Zwei getrennte Fahrten: oben der Drohnenflug, weiter unten der Bau-Zeitraffer.
   Früher lief beides als eine 660vh-Strecke – am Handy waren das fast sechs
   Bildschirmhöhen Scrubben, bevor überhaupt Inhalt kam. */
.journey{position:relative;height:460vh;background:var(--ink)}
.journey.kurz{height:320vh}
@media (max-width:700px){
  /* Kurze Strecke: am Handy will niemand drei Bildschirmhoehen scrubben,
     bevor der erste Inhalt kommt. */
  .journey{height:220vh}
  .journey.kurz{height:190vh}
  .jline{bottom:clamp(24px,4vh,48px)}
  .jline .jcta{margin-top:18px}
  .jsub{font-size:15px;margin-top:12px}
}
.journey-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.journey-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.journey-stage::after{ /* Lesbarkeit für die Typo */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.42) 0%,rgba(20,18,16,.06) 26%,rgba(20,18,16,.30) 52%,rgba(20,18,16,.58) 74%,rgba(20,18,16,.82) 100%);
}
.jtext{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:0 var(--pad) clamp(56px,10vh,120px);
  color:#fff;pointer-events:none;
}
.jline{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(56px,10vh,120px);
  opacity:0;transform:translateY(26px);
  /* Unsichtbare Zeilen liegen uebereinander. Ohne visibility blieben sie
     antippbar und im Tab-Lauf - man traf Knoepfe, die man nicht sieht. */
  visibility:hidden;
  transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s;
  max-width:min(900px,80vw);
}
.jline.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
/* Nur für Vorleseprogramme – ergänzt die Überschrift um den Projektnamen */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Zweite und dritte Fahrt: sieht aus wie eine Überschrift, ist aber keine */
.jline .h1-optik{font-size:clamp(36px,5.6vw,80px);line-height:1.06;margin:0;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
/* Sichtbarer Fokus – ohne den ist die Seite mit der Tastatur nicht bedienbar */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.unit:focus-visible,#facade rect:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#facade rect:focus-visible{fill:rgba(236,133,68,.32);stroke:rgba(255,255,255,.9)}
/* Der Kicker steht auf wechselndem Bildgrund. Gemessen kam er auf 2,85:1 –
   deshalb eine eigene Fläche statt nur Schatten (jetzt ~8:1). */
.jline .kicker{
  display:inline-block;color:#fff;margin-bottom:20px;
  background:rgba(20,18,16,.58);backdrop-filter:blur(10px);
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
}
.jline h1,.jline .display{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.jline p{color:rgba(255,255,255,.88);font-size:clamp(17px,1.9vw,22px);margin-top:16px;max-width:44ch;text-shadow:0 1px 24px rgba(0,0,0,.5)}

.scrollhint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.75);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s ease;
}
.scrollhint i{display:block;width:1px;height:44px;background:linear-gradient(#fff,transparent);animation:drop 2.2s ease-in-out infinite}
/* Muss NACH der Grundregel stehen: gleiche Spezifitaet, die spaetere gewinnt.
   Am Handy ist unter dem Knopf kein Platz mehr fuer den Hinweis. */
@media (max-width:700px){ .scrollhint{display:none} }
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}


/* Der Abschluss der Fahrt darf angeklickt werden */
.jline .jcta{pointer-events:none;margin-top:26px}
.jsub{margin:14px 0 0;color:rgba(255,255,255,.88);font-size:16px;max-width:38ch;
  text-shadow:0 1px 20px rgba(0,0,0,.4)}
.jline.on .jcta{pointer-events:auto}

/* ---- Eckdaten ---- */
.split{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(34px,6vw,86px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.facts{margin:0;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--ink-45);font-size:15px}
.facts dd{margin:0;font-weight:600;text-align:right}

/* ---- Szenenbild ---- */
.scene{position:relative;height:clamp(420px,72vh,760px);overflow:hidden;background:var(--sand)}
.scene img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.scene .cap{position:absolute;inset:auto 0 0 0;z-index:2;color:#fff;
  padding-bottom:clamp(30px,6vh,64px);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55))}
.scene .cap p{margin:0;font-family:helmut,serif;font-weight:300;font-size:clamp(23px,3.1vw,42px);line-height:1.12}

/* ---- Häuser ---- */
.hbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin:30px 0 6px}
.hcount{color:var(--ink-70);font-size:16px}
.hfilter{display:flex;gap:8px;flex-wrap:wrap}
.hfilter button{border:1px solid var(--line);background:#fff;padding:.5em 1.1em;border-radius:999px;
  font:inherit;font-size:14.5px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hfilter button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.htable{border-top:1px solid var(--line)}
.hrow{display:grid;grid-template-columns:auto 1.25fr .7fr .9fr .9fr auto;align-items:center;gap:18px;
  padding:20px 0;border-bottom:1px solid var(--line)}
.hnum{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--sand);font-weight:600;font-size:15px}
.hrow.efh .hnum{background:color-mix(in srgb,var(--accent) 20%,#fff);color:var(--accent)}
.htyp{font-weight:600}
.htyp small{display:block;font-weight:400;color:var(--ink-45);font-size:14px}
.hmetas{display:contents}
.hmeta{color:var(--ink-70);font-size:16px}
.hmeta b{font-weight:600;color:var(--ink)}
.hrow .btn{justify-self:end}
@media(max-width:900px){
  /* Am Handy ist jedes Haus eine Karte: Nummer und Typ in einer Zeile,
     darunter die drei Kennzahlen als Raster, darunter der Knopf ueber die
     volle Breite. Vorher stand die Nummer allein in einer fast leeren Spalte
     und die Kennzahlen brachen mitten im Wort um. */
  .hrow{grid-template-columns:38px 1fr;gap:4px 14px;align-items:center;
    padding:22px 0;border-bottom:1px solid var(--line)}
  .hnum{grid-row:1;grid-column:1}
  .htyp{grid-row:1;grid-column:2}
  .hmetas{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);
    gap:12px;margin-top:14px}
  .hmeta{font-size:13px;color:var(--ink-45);line-height:1.35}
  .hmeta b{display:block;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:1px}
  .hrow .btn{grid-column:1/-1;justify-self:stretch;justify-content:center;margin-top:16px}
}
.hnote{margin-top:26px;color:var(--ink-45);font-size:15.5px}

/* ---- Innen ---- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
@media(max-width:780px){.duo{grid-template-columns:1fr}}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.duo figcaption{margin-top:10px;color:var(--ink-45);font-size:14.5px}

/* ---- Lage ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.chips li{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.45em 1.05em;font-size:15px}
.mapbox{margin-top:34px;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:30px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.maphint{color:rgba(255,255,255,.5);font-size:14px;max-width:54ch;margin:0}
.mapframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}

/* ---- Kontakt: Schritt für Schritt (wie Bienwald) ---- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.wiz-panel{border:1px solid rgba(255,255,255,.16);padding:clamp(24px,3.4vw,40px);background:rgba(255,255,255,.03)}
.wiz-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}
.wiz-dots{display:flex;gap:7px}
.wiz-dots i{width:26px;height:3px;background:rgba(255,255,255,.18);transition:background .4s ease}
.wiz-dots i.on{background:var(--accent)}
.wiz-back{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:14px;
  color:rgba(255,255,255,.55);transition:color .25s ease}
.wiz-back:hover{color:#fff}
.wiz{overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.wiz-panel,.wiz-step{min-width:0}
.wiz-track{display:flex;align-items:flex-start;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.wiz-step{min-width:100%;padding:2px}
.wiz-step h3{margin:0 0 8px}
.wiz-step .hint{color:rgba(255,255,255,.55);font-size:15px;margin:0 0 22px}
.wiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-opt{font:inherit;font-size:16px;text-align:left;cursor:pointer;padding:18px 20px;
  border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.wiz-opt small{display:block;font-size:13px;color:rgba(255,255,255,.5);margin-top:4px}
.wiz-opt:hover{border-color:var(--accent);background:rgba(236,133,68,.1);transform:translateY(-2px)}
.wiz-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.wiz-field span{font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.wiz-field input,.wiz-field textarea{font:inherit;font-size:18px;color:#fff;background:transparent;
  border:0;border-radius:0;border-bottom:1px solid rgba(255,255,255,.28);padding:10px 0}
.wiz-field input:focus,.wiz-field textarea:focus{outline:0;border-bottom-color:var(--accent)}
.wiz-field textarea{resize:vertical;min-height:80px}
.wiz-field select{font:inherit;font-size:17px;color:#fff;background:transparent;border:0;border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.28);padding:10px 0}
.wiz-field select option{color:#252525}
.wiz-field select:focus{outline:0;border-bottom-color:var(--accent)}
.wiz-next{margin-top:8px}
.wiz-err{color:var(--accent);font-size:14px;margin-top:12px;display:none}
.wiz-summary{border:1px solid rgba(255,255,255,.16);padding:20px;margin:0 0 20px;
  font-size:16px;line-height:1.7;color:rgba(255,255,255,.8)}
.wiz-summary b{color:#fff;font-weight:500}
.wiz-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;
  color:rgba(255,255,255,.6);margin-bottom:20px}
.wiz-consent input{margin-top:3px;accent-color:var(--accent)}
.wiz-done{display:none;border-left:2px solid var(--accent);padding-left:18px;margin-top:20px;
  font-size:16px;color:rgba(255,255,255,.85)}
.wiz-done.show{display:block;animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}
.wiz-done a{color:#fff}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:620px){.wiz-opts{grid-template-columns:1fr}}

/* ---- Fuß ---- */
.foot{background:var(--ink);color:rgba(255,255,255,.68);padding-block:52px;font-size:15.5px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0}
.foot a{color:#fff;text-decoration:none;opacity:.85}
.foot a:hover{opacity:1}
.foot small{color:rgba(255,255,255,.42);display:block;margin-top:8px}

/* ---- Einblenden ---- */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .scrollcue{animation:none}
  .hero-img,.scene img{transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- Rechtstexte ---- */
.legal{padding-block:clamp(92px,12vw,150px);max-width:78ch}
.legal h1{margin-bottom:10px}
.legal h2{font-size:clamp(22px,2.4vw,30px);margin:42px 0 10px}
.legal h3{font-size:19px;margin:26px 0 8px}
.legal p,.legal li{color:var(--ink-70);font-size:16.5px}
.legal ul{padding-left:1.1em}
.legal a{color:var(--accent)}
.legal .hinweis{background:var(--sand);border-left:3px solid var(--accent);
  padding:14px 18px;border-radius:0 8px 8px 0;font-size:15.5px}
.legal .stand{margin-top:44px;color:var(--ink-45);font-size:15px}