/* ==========================================================================
   Villa Soennecken · Denkmal-Apartments Bonn-Poppelsdorf
   Design-System: Sandstein, Nachtblau, Messing und Gold. Libre Baskerville + Hanken Grotesk
   ========================================================================== */

@font-face{font-family:"Libre Baskerville";src:url("../fonts/libre-baskerville-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("../fonts/libre-baskerville-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("../fonts/libre-baskerville-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --paper:#F3E9E3;          /* Sandstein hell, wie die Fassade im Licht */
  --stone:#E8D7CD;          /* Sandstein */
  --stone-line:#D2B9AC;     /* Fugen */
  --ink:#2B231E;            /* Sepia-Tinte */
  --ink-soft:#5C4D44;
  --park:#1D3044;           /* tiefes, gedecktes Blau, abgeleitet vom Logo-Blau #1F4E79 */
  --park-2:#27405A;
  --navy:#142231;           /* tiefes Blau für den Seitenfuß */
  --park-line:rgba(243,233,227,.18);
  --brass:#8E5F2B;          /* Messing, die Farbe der Schreibfeder: CTA */
  --brass-hover:#774E22;
  --brass-light:#D9B66E;    /* Gold auf Blau */
  --on-brass:#FFF8F2;

  /* Schrift */
  --serif:"Libre Baskerville","Baskerville","Georgia","Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-display:clamp(2.5rem,6.2vw,5.25rem);
  --fs-h2:clamp(1.75rem,3.6vw,2.875rem);
  --fs-h3:clamp(1.125rem,1.5vw,1.3125rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;

  /* Spacing-Skala 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --container:1240px;
  --gutter:clamp(20px,5vw,40px);
  --section-y:clamp(64px,9vw,128px);
  --block-y:clamp(24px,4vw,48px);
  --header-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--fs-h2);margin-bottom:var(--s3)}
h3{font-size:var(--fs-h3);line-height:1.2;margin-bottom:var(--s1)}
strong{font-weight:600}
.num{font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--brass);color:var(--on-brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.lead{font-size:clamp(1.125rem,1.5vw,1.3rem);line-height:1.55;color:var(--ink-soft);max-width:60ch}
.prose{max-width:62ch}
.prose p{color:var(--ink-soft)}
.note{font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);max-width:75ch}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- CTA: überall identisch ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 30px;background:var(--brass);color:var(--on-brass);font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.01em;text-decoration:none;border-radius:2px;border:0;cursor:pointer;transition:background-color .25s var(--ease),transform .25s var(--ease);-webkit-tap-highlight-color:transparent;text-align:center}
.cta:hover{background:var(--brass-hover)}
.cta:active{transform:translateY(1px)}
.cta__nib{width:14px;height:20px;flex:none}
.cta-row{display:flex;justify-content:center;margin-top:var(--s6)}

/* ---------- Gesims-Trenner (Zahnschnitt nach der Fassade) ---------- */
.cornice{height:22px;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.cornice span{display:block;height:100%;
  background:
    linear-gradient(var(--stone-line),var(--stone-line)) top/100% 1px no-repeat,
    linear-gradient(var(--stone-line),var(--stone-line)) 0 5px/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--stone-line) 0 10px,transparent 10px 20px) 0 10px/100% 9px no-repeat}
.on-dark .cornice span{background:
    linear-gradient(var(--park-line),var(--park-line)) top/100% 1px no-repeat,
    linear-gradient(var(--park-line),var(--park-line)) 0 5px/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--park-line) 0 10px,transparent 10px 20px) 0 10px/100% 9px no-repeat}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-header.is-scrolled{background:rgba(243,233,227,.94);box-shadow:0 1px 0 var(--stone-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.brand__text{display:flex;flex-direction:column}
.brand__logo{flex:none;display:block}
.brand__logo img{display:block;width:62px;height:auto}
.site-footer .brand__logo img{width:84px}
@media (max-width:599px){.brand__logo img{width:50px}.brand{gap:10px}}
.brand__name{font-family:var(--serif);font-size:1.1875rem;font-weight:400;letter-spacing:.01em}
.brand__sub{font-size:.75rem;color:var(--ink-soft);margin-top:5px;letter-spacing:.02em}
.site-header .cta{min-height:48px;padding:10px 22px;font-size:.9375rem}
@media (max-width:767px){.site-header .cta{display:none}:root{--header-h:64px}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;padding-top:var(--header-h);display:grid;grid-template-columns:1fr;background:var(--paper)}
.hero__visual{position:relative;order:-1;height:min(38svh,520px);margin:var(--s2) var(--gutter) 0}
.hero__pediment .ped-d{display:none}
@media (min-width:960px){.hero__pediment .ped-m{display:none}.hero__pediment .ped-d{display:inline}}
.hero__frame{position:absolute;inset:0;clip-path:polygon(0 9%,50% 0,100% 9%,100% 100%,0 100%);overflow:hidden;background:var(--paper)}
.hero__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:44% 64%}

.hero__photo{position:absolute;inset:0}
.hero__pediment{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero__pediment path{fill:none;stroke:var(--brass);stroke-width:1.2;vector-effect:non-scaling-stroke}
.hero__caption{position:absolute;right:var(--s2);bottom:var(--s2);display:grid;font-size:.75rem;line-height:1;color:var(--paper);background:rgba(43,35,30,.62);padding:7px 10px;border-radius:2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.hero__content{padding:var(--s3) var(--gutter) var(--s5);display:flex;flex-direction:column;justify-content:center}
.hero__place{font-family:var(--serif);font-style:italic;font-size:1.0625rem;color:var(--ink-soft);margin:0 0 var(--s2)}
.hero h1{font-size:clamp(1.625rem,7.2vw,2.375rem);line-height:1.15;hyphens:manual;font-weight:500;margin:0 0 var(--s3);letter-spacing:-.01em}
.hero h1 span{display:inline}
@media (min-width:600px){.hero h1 span{display:block}}
@media (min-width:960px){.hero h1{font-size:clamp(2rem,2.6vw,2.375rem)}}
.hero__sub{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:var(--ink-soft);max-width:34ch;margin:0 0 var(--s4)}
.hero__facts{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0}
.hero__facts li{padding:0 var(--s3) 0 0;margin-right:var(--s3);border-right:1px solid var(--stone-line);font-size:.8125rem;line-height:1.35;color:var(--ink-soft)}
.hero__facts li:last-child{border-right:0;margin-right:0;padding-right:0}
.hero__facts b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;color:var(--ink);margin-bottom:4px;white-space:nowrap}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.hero__cta small{font-size:.8125rem;color:var(--ink-soft)}
@media (max-width:420px){
  .hero__facts{grid-template-columns:repeat(3,1fr)}
  .hero__facts li{padding-right:10px;margin-right:10px;font-size:.75rem}
  .hero__facts b{font-size:1.2rem}
  .hero__content{padding-top:var(--s3)}
  .hero__sub{margin-bottom:var(--s3)}
  .hero__facts{margin-bottom:var(--s3)}
  .hero .cta{width:100%}
}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,9fr) minmax(0,11fr);align-items:stretch}
  .hero__visual{order:0;align-self:center;height:auto;aspect-ratio:10/9;max-height:calc(100svh - var(--header-h) - 48px);margin:var(--s3) var(--gutter) var(--s3) 0}
  .hero__content{padding:var(--s6) var(--s5) var(--s6) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))}
  .hero__frame{clip-path:polygon(0 7%,50% 0,100% 7%,100% 100%,0 100%)}
}

/* Aufbau-Animation im Hero: Federzeichnung, dann Aquarell */
.js .hero__photo{-webkit-mask-image:url("../img/aquarell-maske.png");mask-image:url("../img/aquarell-maske.png");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 64%;mask-position:50% 64%;-webkit-mask-size:0% 0%;mask-size:0% 0%;transition:-webkit-mask-size 3.8s cubic-bezier(.45,.05,.25,1),mask-size 3.8s cubic-bezier(.45,.05,.25,1)}
.js .hero.is-revealed .hero__photo{-webkit-mask-size:420% 420%;mask-size:420% 420%}
.js .hero.is-settled .hero__photo{-webkit-mask-image:none;mask-image:none}
.js .hero__frame .hero__photo img{transform:scale(1.04);transition:transform 6s var(--ease)}
.js .hero.is-revealed .hero__frame .hero__photo img{transform:scale(1)}
.js .hero__pediment{opacity:0;transition:opacity 1.2s var(--ease) .3s}
.js .hero.is-drawn .hero__pediment{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .hero__photo{-webkit-mask-image:none;mask-image:none;transition:none}
  .js .hero__frame .hero__photo img{transform:none;transition:none}
  .js .hero__pediment{opacity:1;transition:none}
}

.scroll-hint{position:absolute;left:50%;bottom:18px;width:28px;height:28px;margin-left:-14px;color:var(--ink-soft);transition:opacity .4s;display:none}
.scroll-hint svg{width:100%;height:100%;animation:hint 2.2s var(--ease) infinite}
.scroll-hint.is-hidden{opacity:0}
@keyframes hint{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (min-width:960px){.scroll-hint{display:block;left:21%}}
@media (prefers-reduced-motion:reduce){.scroll-hint svg{animation:none}}

/* ---------- Eckdaten ---------- */
.facts{background:var(--park);color:var(--paper)}
.facts h2{color:var(--paper)}
.facts__grid{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--park-line)}
.facts__grid li{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--park-line)}
.fact__value{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap;white-space:nowrap;font-family:var(--serif);font-weight:400;color:var(--brass-light);line-height:1;margin-bottom:var(--s2)}
.fact__value .count{font-size:clamp(2.125rem,2.8vw,2.75rem);font-variant-numeric:tabular-nums lining-nums;display:inline-block}
.fact__value .unit{font-size:clamp(1.125rem,1.5vw,1.375rem)}
.fact__value .pre{font-size:1rem;font-family:var(--sans);font-weight:500;color:rgba(243,233,227,.7);align-self:center}
.fact__label{font-size:.9375rem;line-height:1.45;color:rgba(243,233,227,.82);max-width:24ch}
.facts .cta-row{margin-top:var(--s6)}
@media (min-width:1100px){.facts__grid{grid-template-columns:repeat(5,1fr)}.facts__grid li{border-right:1px solid var(--park-line);padding-left:var(--s3)}.facts__grid li:first-child{padding-left:0}.facts__grid li:last-child{border-right:0}}

/* ---------- Geschichte ---------- */
.story__grid{display:grid;gap:var(--s5);align-items:center}
@media (min-width:960px){.story__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7)}}
.story__figure{margin:0;position:relative}
.arch-frame{position:relative}
.arch-frame picture,.arch-frame img{width:100%}
.arch-frame img{aspect-ratio:4/5;object-fit:cover;clip-path:polygon(0 11%,50% 0,100% 11%,100% 100%,0 100%)}
.arch-frame::after{content:"";position:absolute;left:-12px;right:-12px;top:-12px;height:calc(11% + 14px);background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 100 L50 0 L100 100%27 fill=%27none%27 stroke=%27%238E5F2B%27 stroke-width=%271.2%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}
.story__figure figcaption{font-size:var(--fs-small);color:var(--ink-soft);margin-top:var(--s2)}
.story__year{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3.75rem,9vw,7.5rem);line-height:.8;color:var(--stone-line);margin:0 0 var(--s3);letter-spacing:-.02em}

.timeline{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--ink-soft);opacity:.35;transform-origin:top;transition:transform 1.6s var(--ease)}
.timeline li{position:relative;padding:0 0 var(--s4) var(--s5)}
.timeline li::before{content:"";position:absolute;left:3px;top:9px;width:9px;height:9px;border:1px solid var(--brass);background:var(--paper);transform:rotate(45deg)}
.timeline li.is-now::before{background:var(--brass)}
.timeline__year{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.1;margin-bottom:6px}
.timeline__text{font-size:.9375rem;line-height:1.5;color:var(--ink-soft);max-width:30ch;display:block}
@media (min-width:860px){
  .timeline{grid-template-columns:repeat(6,1fr)}
  .timeline::before{left:0;right:0;top:4px;bottom:auto;width:auto;height:1px;transform-origin:left}
  .timeline li{padding:var(--s4) var(--s3) 0 0}
  .timeline li::before{left:0;top:0}
}
.js .timeline.reveal-line::before{transform:scaleY(0)}
@media (min-width:860px){.js .timeline.reveal-line::before{transform:scaleX(0)}}
.js .timeline.reveal-line.is-visible::before{transform:none}

/* ---------- Substanz / Bauzeichnung ---------- */
.substance{background:var(--stone)}
.substance__head{display:grid;gap:var(--s4);align-items:end}
@media (min-width:960px){.substance__head{grid-template-columns:minmax(0,1fr) auto;gap:var(--s6)}}
.seal{width:150px;height:150px;flex:none;color:var(--brass)}
.seal text{font-family:var(--sans);font-size:9.5px;letter-spacing:2.2px;fill:currentColor;font-weight:600}
.seal .seal__center{font-family:var(--serif);font-size:17px;letter-spacing:0;fill:var(--ink);font-weight:500}
.seal .seal__date{font-family:var(--sans);font-size:9px;letter-spacing:.5px;fill:var(--ink-soft);font-weight:500}
.plate{margin-top:var(--s6);display:grid;gap:var(--s5)}
@media (min-width:1080px){.plate{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start}}
.plate__drawing{position:relative;background:#fffaf7;padding:clamp(12px,2.4vw,32px);box-shadow:0 0 0 1px var(--stone-line),0 30px 60px -40px rgba(43,35,30,.45)}
.plate__drawing::before{content:"";position:absolute;inset:8px;border:1px solid var(--stone-line);pointer-events:none}
.plate__img{position:relative}
.plate__img img{width:100%;mix-blend-mode:multiply}
.js .plate__img img{clip-path:inset(0 100% 0 0);transition:clip-path 2.2s cubic-bezier(.65,.05,.36,1)}
.js .plate.is-visible .plate__img img{clip-path:inset(0 0 0 0)}
.plate__titleblock{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s2);padding-top:var(--s1);border-top:1px solid var(--stone-line);font-size:.75rem;color:var(--ink-soft)}
.hotspot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.hotspot span{width:26px;height:26px;border-radius:50%;background:var(--brass);color:var(--on-brass);font-family:var(--serif);font-size:.875rem;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(142,95,43,.18);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hotspot:hover span,.hotspot.is-active span{transform:scale(1.15);box-shadow:0 0 0 7px rgba(142,95,43,.22)}
.js .hotspot{opacity:0;transition:opacity .5s var(--ease)}
.js .plate.is-visible .hotspot{opacity:1;transition-delay:calc(1.6s + var(--i) * 90ms)}
.plate__list{list-style:none;margin:0;padding:0;counter-reset:none}
.plate__list li{display:grid;grid-template-columns:32px 1fr;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--stone-line);transition:background-color .3s}
.plate__list li:first-child{border-top:1px solid var(--stone-line)}
.plate__list .key{width:26px;height:26px;border-radius:50%;border:1px solid var(--brass);color:var(--brass);font-family:var(--serif);font-size:.875rem;font-weight:600;display:grid;place-items:center;margin-top:2px;transition:background-color .25s,color .25s}
.plate__list li.is-active .key{background:var(--brass);color:var(--on-brass)}
.plate__list h3{font-size:1.125rem;margin-bottom:2px}
.plate__list p{font-size:.9375rem;line-height:1.5;color:var(--ink-soft);margin:0}
.interior{margin-top:var(--s6);display:grid;gap:var(--s4)}
@media (min-width:860px){.interior{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s6)}}
.interior h3{font-size:var(--fs-h3)}
.interior ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 var(--s4)}
.interior li{padding:var(--s2) 0;border-bottom:1px solid var(--stone-line);font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.interior li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* ---------- Denkmal-AfA: Kolonnade ---------- */
.afa__head{display:grid;gap:var(--s4)}
@media (min-width:960px){.afa__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:end}}
.afa__total{display:flex;align-items:baseline;gap:var(--s2);font-family:var(--serif)}
.afa__total .count{font-size:clamp(3.75rem,8vw,6.5rem);line-height:.9;font-weight:400;color:var(--brass);font-variant-numeric:tabular-nums lining-nums}
.afa__total .unit{font-size:clamp(2rem,4vw,3rem);color:var(--brass)}
.afa__total-label{font-size:.9375rem;color:var(--ink-soft);max-width:28ch;margin-top:var(--s2)}

.rate-switch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s6) 0 var(--s4)}
.rate-switch__label{font-size:.9375rem;color:var(--ink-soft);margin-right:var(--s1)}
.rate-switch__group{display:inline-flex;border:1px solid var(--stone-line);border-radius:2px;overflow:hidden;background:#fffaf7}
.rate-switch button{min-width:64px;min-height:44px;padding:0 var(--s2);border:0;border-right:1px solid var(--stone-line);background:transparent;font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.rate-switch button:last-child{border-right:0}
.rate-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.colonnade{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(4px,1.1vw,16px);align-items:end;height:clamp(300px,42vw,460px);padding:0 0 0;border-bottom:1px solid var(--ink);margin-top:var(--s3)}
.colonnade__col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
.column{position:relative;height:calc(var(--h) * 1%);display:flex;flex-direction:column;transform-origin:bottom}
.column__capital{height:clamp(10px,1.4vw,16px);margin:0 -14%;background:var(--stone);border:1px solid var(--stone-line);border-bottom:0;position:relative}
.column__capital::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:6px;background:var(--stone);border-left:1px solid var(--stone-line);border-right:1px solid var(--stone-line);border-radius:0 0 50% 50%/0 0 100% 100%}
.column__shaft{flex:1;margin:6px 6% 0;background:
   repeating-linear-gradient(90deg,var(--stone) 0 5px,var(--stone-line) 5px 6px);
   border-left:1px solid var(--stone-line);border-right:1px solid var(--stone-line)}
.column__base{height:clamp(8px,1vw,12px);margin:0 -8%;background:var(--stone);border:1px solid var(--stone-line);border-bottom:0}
.colonnade__col.is-7 .column__capital,.colonnade__col.is-7 .column__base,.colonnade__col.is-7 .column__capital::after{background:#EFE3DB}
.colonnade__col.is-7 .column__shaft{background:repeating-linear-gradient(90deg,#EFE3DB 0 5px,var(--stone-line) 5px 6px)}
.column__amount{position:absolute;left:50%;bottom:calc(var(--h) * 1% + 22px);transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:.75rem;line-height:1.25;color:var(--ink-soft)}
.column__amount b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(.8125rem,1.2vw,1rem);color:var(--ink)}
.column__amount .save{display:block;color:var(--brass);font-weight:600}
.colonnade__years{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(4px,1.1vw,16px);margin-top:var(--s1);font-size:.75rem;color:var(--ink-soft);text-align:center}
.colonnade__years span{white-space:nowrap}
.colonnade__legend{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s3);font-size:.875rem;color:var(--ink-soft)}
.colonnade__legend b{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:1.0625rem}
.js .colonnade .column{transform:scaleY(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js .colonnade .column__amount{opacity:0;transition:opacity .6s var(--ease);transition-delay:calc(.8s + var(--i) * 70ms)}
.js .colonnade.is-visible .column{transform:none}
.js .colonnade.is-visible .column__amount{opacity:1}
@media (max-width:767px){
  .colonnade{height:300px}
  .column__amount{writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);bottom:calc(var(--h) * 1% + 14px);font-size:.6875rem}
  .column__amount b{font-size:.75rem;display:inline}
  .column__amount .save{display:inline;margin-top:0;margin-left:0}
  .column__amount .sep{display:inline}
  .colonnade__years{font-size:.625rem}
}
.column__amount .sep{display:none}

.afa__result{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:var(--s5);border-top:1px solid var(--stone-line)}
.afa__result div{padding:var(--s3) 0 0}
.afa__result .big{display:block;font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:400;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.afa__result span{font-size:.9375rem;color:var(--ink-soft)}

.example{margin-top:var(--s6);display:grid;gap:var(--s5);align-items:start}
@media (min-width:960px){.example{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7)}}
.ledger{background:#fffaf7;box-shadow:0 0 0 1px var(--stone-line);padding:var(--s4)}
.ledger h3{font-size:1.25rem;margin-bottom:var(--s2)}
.ledger table{width:100%;border-collapse:collapse;font-size:.9375rem}
.ledger td{padding:12px 0;border-bottom:1px solid var(--stone-line);vertical-align:top}
.ledger td:last-child{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;padding-left:var(--s2);font-weight:500}
.ledger tr.sum td{border-bottom:0;border-top:2px solid var(--ink);font-weight:600;color:var(--ink)}
.ledger tr.sum td:last-child{font-family:var(--serif);font-size:1.25rem}
.ledger .minus{color:var(--brass)}

/* ---------- Förderung ---------- */
.funding{background:var(--park);color:var(--paper)}
.funding h2{color:var(--paper)}
.funding .lead,.funding .prose p,.funding .note{color:rgba(243,233,227,.8)}
.funding__grid{display:grid;gap:var(--s6);margin-top:var(--s5)}
@media (min-width:960px){.funding__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7);align-items:start}}
.rates{display:grid;gap:var(--s4)}
.rate__row{display:grid;gap:var(--s1)}
.rate__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-size:.9375rem;color:rgba(243,233,227,.82)}
.rate__head b{font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:400;color:var(--paper);font-variant-numeric:tabular-nums lining-nums}
.rate__row.is-kfw .rate__head b{color:var(--brass-light)}
.rate__bar{height:10px;background:rgba(243,233,227,.1);position:relative;overflow:hidden}
.rate__bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 1%);background:rgba(243,233,227,.45);transform-origin:left}
.rate__row.is-kfw .rate__bar i{background:var(--brass-light)}
.js .rates .rate__bar i{transform:scaleX(0);transition:transform 1.3s var(--ease)}
.js .rates.is-visible .rate__bar i{transform:none}
.grants{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:var(--s5);border-top:1px solid var(--park-line)}
.grants div{padding:var(--s3) var(--s3) 0 0}
.grants b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3vw,2.25rem);color:var(--brass-light);line-height:1.1;margin-bottom:6px}
.grants span{font-size:.9375rem;color:rgba(243,233,227,.8)}

/* ---------- Wohnen ---------- */
.living__grid{display:grid;gap:var(--s5)}
@media (min-width:960px){.living__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7);align-items:center}}
.feature-list{list-style:none;margin:var(--s4) 0 0;padding:0}
.feature-list li{display:grid;grid-template-columns:140px 1fr;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--stone-line);font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.feature-list li:last-child{border-bottom:1px solid var(--stone-line)}
.feature-list b{font-family:var(--serif);font-weight:400;font-size:1.125rem;color:var(--ink);line-height:1.3}
@media (max-width:420px){.feature-list li{grid-template-columns:1fr;gap:2px}}

/* ---------- Lage ---------- */
.demand{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin-top:var(--s6);border-top:1px solid var(--park-line)}
.demand div{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--park-line)}
.demand b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.25rem,3.6vw,3rem);color:var(--brass-light);line-height:1;margin-bottom:var(--s2)}
.demand h3{color:var(--paper);font-size:1.25rem}
.demand p{font-size:.9375rem;color:rgba(243,233,227,.76);margin:0}
@media (min-width:960px){.demand div{border-right:1px solid var(--park-line);padding-left:var(--s4)}.demand div:first-child{padding-left:0}.demand div:last-child{border-right:0}}

/* ---------- Werthaltigkeit ---------- */
.value{background:var(--stone)}
.value__grid{display:grid;gap:var(--s5)}
@media (min-width:960px){.value__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7);align-items:start}}
.scenarios{display:grid;gap:var(--s2)}
.scenario{background:#fffaf7;box-shadow:0 0 0 1px var(--stone-line);padding:var(--s4);display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);align-items:baseline}
.scenario h3{font-size:1.125rem;margin:0}
.scenario p{grid-column:1/-1;font-size:.875rem;color:var(--ink-soft);margin:0}
.scenario b{font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:400;color:var(--brass);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.persist{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.persist li{border:1px solid var(--stone-line);padding:6px 14px;font-family:var(--serif);font-style:italic;font-size:1rem;background:rgba(255,250,247,.5)}

/* ---------- DWI ---------- */
.agent__grid{display:grid;gap:var(--s5)}
@media (min-width:960px){.agent__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7);align-items:center}}
.agent__numbers{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--stone-line)}
.agent__numbers div{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--stone-line)}
.agent__numbers div:nth-child(odd){border-right:1px solid var(--stone-line)}
.agent__numbers div:nth-child(even){padding-left:var(--s3)}
.agent__numbers b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.75rem);font-weight:500;line-height:1;margin-bottom:var(--s1)}
.agent__numbers div>span{font-size:.875rem;color:var(--ink-soft);line-height:1.4;display:block}
.agent__numbers b .count{font:inherit;color:inherit}

/* ---------- FAQ ---------- */
.faq{background:var(--paper)}
.faq__grid{display:grid;gap:var(--s5)}
@media (min-width:960px){.faq__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s7)}}
.faq details{border-top:1px solid var(--stone-line)}
.faq details:last-of-type{border-bottom:1px solid var(--stone-line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:var(--s2);align-items:center;padding:var(--s3) 0;font-family:var(--serif);font-size:1.25rem;font-weight:500;line-height:1.3;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;justify-self:end;border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .answer{padding:0 0 var(--s3);color:var(--ink-soft);max-width:65ch;font-size:1rem}

/* ---------- Abschluss ---------- */
.closing{background:var(--paper);padding-top:var(--section-y);padding-bottom:0;text-align:center}
.closing h2{font-size:clamp(2.125rem,5vw,4.125rem);line-height:1.08;max-width:14ch;margin:0 auto var(--s3)}
.closing p{color:var(--ink-soft);max-width:46ch;margin:0 auto;font-size:1.125rem}
.closing .cta-row{margin-top:var(--s4)}
.closing__art{position:relative;margin-top:var(--s6);height:clamp(340px,62vw,760px);overflow:hidden;clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%)}
.closing__art picture,.closing__art img{position:absolute;inset:0;width:100%;height:100%}
.closing__art img{object-fit:cover;object-position:46% 52%}
.js .closing__art .art-photo{-webkit-mask-image:url("../img/aquarell-maske.png");mask-image:url("../img/aquarell-maske.png");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 70%;mask-position:50% 70%;-webkit-mask-size:0% 0%;mask-size:0% 0%;transition:-webkit-mask-size 3s cubic-bezier(.45,.05,.25,1) .5s,mask-size 3s cubic-bezier(.45,.05,.25,1) .5s}
.js .closing__art.is-visible .art-photo{-webkit-mask-size:420% 420%;mask-size:420% 420%}
@media (min-width:960px){.closing__art{clip-path:polygon(0 9%,50% 0,100% 9%,100% 100%,0 100%)}}
@media (prefers-reduced-motion:reduce){.js .closing__art .art-photo{-webkit-mask-image:none;mask-image:none;transition:none}}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(243,233,227,.72);padding-block:var(--s6) var(--s5);font-size:.875rem}
.site-footer .wrap{display:grid;gap:var(--s4)}
@media (min-width:860px){.site-footer .wrap{grid-template-columns:1fr auto;align-items:start}}
.site-footer .brand__name{color:var(--paper)}
.site-footer .brand__sub{color:rgba(243,233,227,.6)}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);list-style:none;margin:0;padding:0}
.footer-links a,.footer-links button{display:inline-flex;align-items:center;color:rgba(243,233,227,.86);text-decoration:none;background:none;border:0;padding:12px 0;font:inherit;cursor:pointer;min-height:44px}
.footer-links a:hover,.footer-links button:hover{color:var(--paper);text-decoration:underline}
.footer-legal{grid-column:1/-1;border-top:1px solid rgba(243,233,227,.14);padding-top:var(--s3);font-size:.75rem;line-height:1.6;color:rgba(243,233,227,.55);max-width:110ch}

/* ---------- Sticky CTA mobil ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(243,233,227,.96);box-shadow:0 -1px 0 var(--stone-line);transform:translateY(110%);transition:transform .4s var(--ease);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sticky-cta .cta{width:100%}
.sticky-cta.is-visible{transform:none}
@media (min-width:768px){.sticky-cta{display:none}}
@media (max-width:767px){body{padding-bottom:76px}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .colonnade .column,.js .colonnade .column__amount,.js .rates .rate__bar i,.js .plate__img img,.js .hotspot,.js .timeline.reveal-line::before{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ---------- Cookie-Banner ---------- */
.consent{position:fixed;z-index:100;left:var(--s2);right:var(--s2);bottom:var(--s2);max-width:520px;margin-inline:auto;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--stone-line),0 24px 60px -20px rgba(43,35,30,.45);padding:var(--s4);display:none}
.consent.is-open{display:block}
.consent h2{font-size:1.375rem;margin-bottom:var(--s1)}
.consent p{font-size:.875rem;line-height:1.55;color:var(--ink-soft);margin-bottom:var(--s3)}
.consent p a{color:var(--ink)}
.consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.consent__actions button{min-height:48px;padding:10px 16px;font-family:var(--sans);font-size:.9375rem;font-weight:600;border-radius:2px;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
@media (max-width:380px){.consent__actions{grid-template-columns:1fr}}

/* ---------- Funnel- und Rechtsseiten ---------- */
.page-simple{min-height:100svh;display:flex;flex-direction:column}
.page-simple main{flex:1;padding:calc(var(--header-h) + var(--s6)) 0 var(--s7)}
.page-simple .site-header{background:var(--paper);box-shadow:0 1px 0 var(--stone-line)}
.legal h1{font-size:var(--fs-h2);margin-bottom:var(--s5)}
.legal h2{font-size:1.5rem;margin:var(--s5) 0 var(--s2)}
.legal h3{font-size:1.125rem;margin:var(--s4) 0 var(--s1)}
.legal p,.legal li{color:var(--ink-soft);max-width:75ch}
.legal ul{padding-left:1.2em}
.legal .strong-box{border:1px solid var(--stone-line);background:#fffaf7;padding:var(--s3)}
.legal .strong-box p{color:var(--ink);font-weight:600}

.confirm{max-width:720px}
.confirm h1{font-size:var(--fs-h2);margin-bottom:var(--s3)}
.progress{margin:var(--s5) 0}
.progress__label{display:flex;justify-content:space-between;font-size:.9375rem;color:var(--ink-soft);margin-bottom:var(--s1)}
.progress__label b{font-family:var(--serif);font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.progress__track{height:12px;background:var(--stone);overflow:hidden}
.progress__track i{display:block;height:100%;width:90%;background:var(--brass);transform-origin:left}
.js .progress__track i{transform:scaleX(0);transition:transform 1.5s var(--ease) .2s}
.js .progress.is-run .progress__track i{transform:scaleX(1)}
.steps{list-style:none;margin:var(--s5) 0;padding:0;display:grid;gap:var(--s2)}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--s2);align-items:start;padding:var(--s3);border:1px solid var(--stone-line);background:rgba(255,250,247,.6)}
.steps .mark{width:40px;height:40px;border-radius:50%;border:1px solid var(--stone-line);display:grid;place-items:center;font-family:var(--serif);font-weight:700}
.steps li.done .mark{background:var(--park);border-color:var(--park);color:var(--paper)}
.steps li.current{border:2px solid var(--brass);background:#fffaf7;padding:var(--s4) var(--s3)}
.steps li.current .mark{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.steps li.current h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--s1)}
.steps h2{font-size:1.25rem;margin:6px 0 4px}
.steps p{font-size:.9375rem;color:var(--ink-soft);margin:0}
.spam-hint{font-size:.9375rem;color:var(--ink-soft);border-left:3px solid var(--brass);padding-left:var(--s2)}
.contact-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s2);margin-top:var(--s4)}
.contact-actions .cta{width:100%}

@media (min-width:960px){.consent{right:var(--s4);left:auto;margin:0;bottom:var(--s4);max-width:440px;padding:var(--s3)}}
.consent.is-open{animation:consentIn .5s var(--ease)}
@keyframes consentIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.consent.is-open{animation:none}}
@media (max-width:599px){
  .hero__caption{font-size:.6875rem;right:var(--s1);bottom:var(--s1)}
  .consent{padding:var(--s3) var(--s2) var(--s2);left:var(--s1);right:var(--s1);bottom:var(--s1)}
  .consent h2{font-size:1.125rem}
  .consent p{font-size:.8125rem;margin-bottom:var(--s2)}
}
.value__grid>*,.story__grid>*,.living__grid>*,.agent__grid>*,.faq__grid>*,.funding__grid>*,.example>*,.plate>*{min-width:0}
.scenario{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:420px){.scenario{grid-template-columns:1fr}.scenario b{order:-1}}
@media (max-width:599px) and (max-height:780px){.hero__visual{height:31svh}.hero__sub{font-size:1rem;margin-bottom:var(--s2)}.hero__facts{margin-bottom:var(--s2)}}

/* ---------- Vorher-nachher-Regler ---------- */
.then-now{margin-top:var(--s7)}
.then-now h3{font-size:var(--fs-h3);margin-bottom:var(--s3)}
.compare{margin:0}
.compare__stage{position:relative;overflow:hidden;background:var(--stone);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.compare__stage picture,.compare__stage img{position:absolute;inset:0;width:100%;height:100%}
.compare__stage img{object-fit:cover;pointer-events:none}
.compare__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px rgba(43,35,30,.18);pointer-events:none}
.compare__knob{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--paper);color:var(--brass);display:grid;place-items:center;box-shadow:0 6px 20px -6px rgba(43,35,30,.5),0 0 0 1px var(--stone-line);transition:transform .25s var(--ease)}
.compare__knob svg{width:22px;height:22px}
.compare.is-dragging .compare__knob,.compare__stage:hover .compare__knob{transform:scale(1.08)}
.compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;pointer-events:none}
.compare__range:focus-visible{opacity:0}
.compare__stage:focus-within .compare__knob{box-shadow:0 0 0 3px var(--brass),0 6px 20px -6px rgba(43,35,30,.5)}
@media (max-width:599px){.compare__knob{width:44px;height:44px;margin:-22px 0 0 -22px}}
.living__compare{min-width:0}

.compare__note{margin-top:var(--s1);font-size:.75rem;color:var(--ink-soft)}

/* ---------- Lage: Luftbild ungeschnitten, Lagekarte ---------- */
.location{background:var(--park);color:var(--paper)}
.location h2{color:var(--paper)}
.location .lead,.location .prose p,.location .note{color:rgba(243,233,227,.82)}
.location__head{margin-bottom:var(--s5)}
.location__aerial{margin:0}
.location__aerial picture{display:block;width:100%;max-width:min(100%,calc((100svh - var(--header-h)) * 1.5));margin-inline:auto}
.location__aerial img{width:100%;height:auto}
.location__aerial figcaption{margin-top:var(--s1);font-size:.75rem;color:rgba(243,233,227,.6)}
.location__body{padding-top:var(--s6)}
.location__text{margin-bottom:var(--s6)}
.arch-frame--portrait img{object-position:50% 30%;filter:contrast(1.02)}

.lage{display:grid;gap:var(--s4)}
@media (min-width:960px){.lage{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s5);align-items:start}}
.lage__map{position:relative}
.lmap{position:relative;width:100%;aspect-ratio:4/3;background:#E9DED6;overflow:hidden;box-shadow:0 0 0 1px rgba(217,182,110,.45)}
@media (max-width:767px){.lmap{aspect-ratio:4/5}}
.lmap .maplibregl-ctrl-attrib{font-size:10px}
.lmap__status{position:absolute;left:var(--s2);bottom:var(--s2);right:var(--s2);max-width:360px;background:rgba(20,34,49,.92);color:var(--paper);padding:var(--s2) var(--s3);box-shadow:0 0 0 1px rgba(217,182,110,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lmap__label{font-size:.8125rem;color:var(--brass-light)}
.lmap__dist{font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.15;margin:2px 0 4px}
.lmap__note{font-size:.875rem;line-height:1.45;color:rgba(243,233,227,.8)}
@media (max-width:767px){.lmap__status{position:static;max-width:none;margin-top:0}}
.places{display:grid;border-top:1px solid var(--park-line)}
.place{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);width:100%;min-height:48px;padding:12px var(--s1) 12px 0;background:none;border:0;border-bottom:1px solid var(--park-line);color:rgba(243,233,227,.86);font:inherit;font-size:.9375rem;text-align:left;cursor:pointer;transition:color .2s,padding .3s var(--ease)}
.place__name{position:relative;padding-left:22px}
.place__name::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--brass-light)}
.place__dist{font-family:var(--serif);color:var(--brass-light);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.place:hover,.place.is-active{color:var(--paper)}
.place.is-active{padding-left:6px}
.place.is-active .place__name::before{background:var(--brass-light)}
.lage__list .note{margin-top:var(--s2)}
.lmap-home{width:22px;height:22px;border-radius:50%;background:var(--park);box-shadow:0 0 0 3px #D9B66E,0 0 0 9px rgba(217,182,110,.28)}
.lmap-dot{display:flex;align-items:center;gap:6px;pointer-events:none}
.lmap-dot i{width:9px;height:9px;transform:rotate(45deg);background:#fff;border:1.5px solid #1D3044}
.lmap-dot span{font:500 11px/1 "Hanken Grotesk",Arial,sans-serif;color:#1D3044;background:rgba(243,233,227,.92);padding:4px 6px;white-space:nowrap;opacity:0;transition:opacity .25s}
.lmap-dot.is-active i{background:#D9B66E;border-color:#1D3044;width:11px;height:11px}
.lmap-dot.is-active span{opacity:1}

/* ---------- Verkaufsstand ---------- */
.stock{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin:0 0 var(--s4)}
.stock__pips{display:grid;grid-template-columns:repeat(16,10px);gap:5px}
.stock__pips i{width:10px;height:10px;transform:rotate(45deg) scale(.85);border:1px solid var(--brass);background:transparent}
.stock__pips i.sold{background:var(--brass)}
.stock__text{font-size:.9375rem;color:var(--ink-soft)}
.stock__text b{color:var(--ink);font-weight:600}
@media (max-width:420px){.stock__pips{grid-template-columns:repeat(16,8px);gap:4px}.stock__pips i{width:8px;height:8px}}

/* ---------- Kolonnade aufgeräumt ---------- */
.afa__chart{margin-top:var(--s5)}
.colonnade__groups{display:grid;grid-template-columns:8fr 4fr;gap:clamp(4px,1.1vw,16px);margin-bottom:var(--s2);font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.25rem);color:var(--ink)}
.colonnade__groups span{border-bottom:1px solid var(--brass);padding-bottom:6px;text-align:center}
.afa .colonnade{height:clamp(200px,26vw,300px);margin-top:0}
.afa .rate-switch{margin:var(--s4) 0 0}
.afa__result{margin-top:var(--s4)}
.afa .note{margin-top:var(--s2)}

/* ---------- Über uns (nach Airport Living, in Nachtblau und Gold) ---------- */
.about{background:var(--navy);color:var(--paper)}
.about h2{color:var(--paper)}
.about .lead{color:rgba(243,233,227,.82)}
.about__grid{display:grid;gap:var(--s5);align-items:center}
@media (min-width:960px){.about__grid{grid-template-columns:6fr 5fr;gap:var(--s7)}}
.about__photo{position:relative;margin:0;overflow:hidden;aspect-ratio:5/4;background:var(--navy)}
.about__photo picture{display:block;height:100%}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.about__photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(217,182,110,.35);pointer-events:none}
.about__logo img{width:160px;height:auto;margin-bottom:var(--s4)}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s4);border-top:1px solid var(--park-line)}
.about__stat{padding:var(--s3) var(--s2) 0 0}
.about__stat + .about__stat{padding-left:var(--s2);border-left:1px solid var(--park-line)}
.about__num{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--brass-light);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.about__num .count{font:inherit;color:inherit}
.about__lbl{margin-top:var(--s1);font-size:var(--fs-small);color:rgba(243,233,227,.7);line-height:1.35}
.about .cta-row{margin-top:var(--s6)}

/* ---------- Kürzere Sektionen ---------- */
.substance__head{align-items:center}
.plate{margin-top:var(--s5)}
.plate__list p{font-size:.875rem}
.story .then-now{margin-top:var(--s6)}
.living .lead{margin-top:var(--s2)}
.funding .lead{margin-top:var(--s2)}
.site-header .cta{white-space:nowrap}
@media (max-width:1100px) and (min-width:768px){.site-header .cta{font-size:.875rem;padding:10px 16px}}

@media (max-width:599px){
  .hero__visual{height:min(30svh,300px)}
  .hero__content{padding-top:var(--s3)}
  .hero h1{margin-bottom:var(--s2)}
  .hero__sub{font-size:.9375rem;margin-bottom:var(--s2)}
  .hero__facts{margin-bottom:var(--s2)}
  .stock{margin-bottom:var(--s3)}
  .stock__text{font-size:.875rem}
}