/* ==========================================================================
   MC Immo Investment GmbH · Stylesheet
   Eine Datei, keine externen Ressourcen. Mobile first.
   Breakpoints: 640 / 900 / 1200
   ========================================================================== */

/* --- Schriften (lokal) --------------------------------------------------- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- Variablen ----------------------------------------------------------- */
:root{
  --white:#FFFFFF;
  --sand:#F5F3EE;
  --sand-2:#EDEAE2;
  --ink:#141414;
  --ink-2:#1F1F1F;
  --body:#4A4A4A;
  --muted:#737373;
  --gold:#B8963E;
  --gold-dark:#806224;
  --gold-hover:#6B521E;
  --gold-light:#D6BC7A;
  --line-dark:#2C2C2C;
  --text-on-dark:#F2EFE8;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --container:1200px;
  --gutter:24px;
  --nav-h:76px;
  --sect:64px;

  /* Bewegung: eine Palette fuer alles */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease:var(--ease-out);
}
@media (min-width:900px){
  :root{--nav-h:92px;--sect:96px;--gutter:32px}
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#C9C4B8 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9C4B8;border-radius:10px;border:2px solid var(--white)}
::-webkit-scrollbar-thumb:hover{background:#B3AD9F}
::selection{background:var(--sand-2);color:var(--ink)}
.on-dark ::selection,.site-footer ::selection,.section--dark ::selection,.pagehero ::selection{background:var(--gold-light);color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}

img{max-width:100%;height:auto;display:block}
picture{display:block}

h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink-2);font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--serif);letter-spacing:-.01em;line-height:1.15;font-weight:400}
h1{font-size:clamp(2.6rem,5.2vw,4rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
h3{font-family:var(--sans);font-size:1.25rem;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;line-height:1.35}
h4{font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--ink-2);line-height:1.4}

p{margin:0 0 1.25em;max-width:62ch;hyphens:auto;hyphenate-limit-chars:10 5 4;overflow-wrap:break-word;text-wrap:pretty}
/* Am Desktop reicht der Platz: keine automatische Silbentrennung im Lesetext */
@media (min-width:900px){p,li,.faq summary,.card,.service{hyphens:manual}}
ul,ol{margin:0 0 1.25em;padding-left:1.25em}
li{margin-bottom:.4em;hyphens:auto;hyphenate-limit-chars:10 5 4;overflow-wrap:break-word;text-wrap:pretty}
strong{font-weight:600;color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--sand-2);margin:2.5rem 0}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease}
a:hover{color:var(--gold-dark);text-decoration-color:var(--gold-dark)}

:focus-visible{outline:3px solid var(--gold-dark);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--gold-light)}

[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* --- Hilfsklassen -------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{width:100%;max-width:calc(68ch + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.text-center{text-align:center}
.lead{font-size:1.0625rem;color:var(--body)}
.nowrap{white-space:nowrap}

.section{padding-block:var(--sect)}
.section--sand{background:var(--sand)}
.section--dark{background:var(--ink);color:#CFCBC2}
.section--tight{padding-block:calc(var(--sect)*.66)}
.section--note{padding-block:48px 64px}

.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--text-on-dark)}
.section--dark a{color:var(--gold-light)}
.section--dark a:hover{color:#fff}
.section--dark a.btn,.section--dark a.btn:hover{color:#fff}

.skip-link{position:absolute;left:16px;top:-100px;z-index:200;background:var(--ink);color:var(--text-on-dark);
  padding:12px 20px;border-radius:3px;font-family:var(--sans);font-size:.875rem;font-weight:500;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:12px;color:var(--text-on-dark)}

/* Sichtbarer Platzhalter-Hinweis (gelbe Markierung fuer noch offene Angaben) */
mark.platzhalter{
  background:#FFF3B0;color:#3A3000;padding:.15em .45em;border-radius:2px;
  box-shadow:inset 0 0 0 1px #E4C64A;font-family:var(--sans);font-size:.9375rem;font-weight:500;hyphens:manual;
  hyphens:auto;overflow-wrap:break-word;
}

/* --- Overline ------------------------------------------------------------ */
.overline{
  display:flex;align-items:center;gap:16px;
  margin:0 0 16px;
  font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dark);line-height:1.4;
}
.overline::after{content:"";flex:0 0 40px;height:1px;background:var(--gold);transform:translateY(.5px)}
.overline--center{justify-content:center}
.overline--center::before{content:"";flex:0 0 40px;height:1px;background:var(--gold);transform:translateY(.5px)}
.section--dark .overline{color:var(--gold-light)}
.section--dark .overline::after,.section--dark .overline::before{background:var(--gold-light)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;border-radius:3px;border:1px solid var(--gold-dark);
  background:var(--gold-dark);color:#fff;
  font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
  white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
}
.btn:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:#fff;box-shadow:0 6px 18px -8px rgba(128,98,36,.55)}
/* Lichtschimmer: laeuft beim Hover/Fokus einmal von links nach rechts */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%);transition:transform .7s var(--ease-in-out)}
.btn svg{transition:transform .35s var(--ease-out)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
.btn:active{box-shadow:none}
.btn--ghost{background:transparent;color:var(--gold-dark);border-color:var(--gold-dark)}
.btn--ghost:hover{background:var(--gold-dark);color:#fff}
.section--dark .btn--ghost{color:var(--gold-light);border-color:var(--gold-light)}
.section--dark .btn--ghost:hover{background:var(--gold-light);color:var(--ink)}

.arrow-link{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dark);text-decoration:none;
}
.arrow-link{padding:8px 0;transition:color .2s ease}
.arrow-link svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.arrow-link:hover{color:var(--ink-2)}
.arrow-link:hover svg,.arrow-link:focus-visible svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.arrow-link:hover svg{transform:none}}

.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}

/* --- Kopfbereich / Navigation -------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:transparent;pointer-events:none}
.site-header > *{pointer-events:auto}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--white);
  box-shadow:0 1px 0 transparent,0 1px 24px rgba(20,20,20,0);
  transform-origin:top center;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.site-header.is-scrolled::before{box-shadow:0 1px 0 var(--sand-2),0 1px 24px rgba(20,20,20,.09)}
.nav{transition:transform .5s var(--ease-out)}
.nav-logo img{transform-origin:left center;transition:transform .5s var(--ease-out)}
/* Ab 1100 px: Leiste 92 -> 72 px, Logo skaliert mit */
@media (min-width:1100px){
  .site-header.is-scrolled::before{transform:scaleY(.7826)}
  .site-header.is-scrolled .nav{transform:translateY(-10px)}
  .site-header.is-scrolled .nav-logo img{transform:scale(.78)}
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--nav-h);
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
}
.nav-logo{display:flex;align-items:center;flex:0 0 auto;padding:6px 0}
.nav-logo img{height:52px;width:auto}
@media (min-width:900px){.nav-logo img{height:70px}}

.nav-list{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none;position:relative}
.nav-ind{
  position:absolute;left:0;top:0;width:1px;height:2px;background:var(--gold);
  transform-origin:left center;pointer-events:none;opacity:0;
  transition:transform .45s var(--ease-out),opacity .3s var(--ease-out);
}
.nav-ind.is-on{opacity:1}
.nav-ind.is-still{transition:none}
.nav-list.has-ind a[aria-current="page"]{border-bottom-color:transparent}
.nav-list a{
  display:inline-block;padding:6px 0;
  font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .25s ease;
}
.nav-list a:hover{color:var(--gold-dark)}
.nav-list a[aria-current="page"]{color:var(--ink-2);border-bottom-color:var(--gold)}
.nav-cta{flex:0 0 auto}
.nav-cta .btn{min-height:48px;padding:12px 26px;font-size:.8125rem}

.nav-desktop{display:none}
@media (min-width:1100px){
  .nav-desktop{display:flex;align-items:center;gap:36px}
}

.nav-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;margin:0;
  background:transparent;border:1px solid var(--sand-2);border-radius:3px;color:var(--ink-2);cursor:pointer;
}
.nav-burger:hover{border-color:var(--gold)}
.nav-burger .icon-close{display:none}
.nav-burger[aria-expanded="true"] .icon-open{display:none}
.nav-burger[aria-expanded="true"] .icon-close{display:block}
@media (min-width:1100px){.nav-burger{display:none}}

.nav-mobile{
  position:absolute;left:0;right:0;top:100%;
  visibility:hidden;opacity:0;transform:translateY(-10px);
  border-top:1px solid var(--sand-2);background:var(--white);
  box-shadow:0 24px 40px -24px rgba(20,20,20,.25);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  transition:opacity .35s var(--ease-out),transform .45s var(--ease-out),visibility 0s linear .45s;
}
.nav-mobile.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s,0s,0s}
.nav-mobile li a,.nav-mobile .btn{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),color .2s ease}
.nav-mobile.is-open li a,.nav-mobile.is-open .btn{opacity:1;transform:none}
.nav-mobile.is-open li:nth-child(2) a{transition-delay:.05s}
.nav-mobile.is-open li:nth-child(3) a{transition-delay:.1s}
.nav-mobile.is-open li:nth-child(4) a{transition-delay:.15s}
.nav-mobile.is-open li:nth-child(5) a{transition-delay:.2s}
.nav-mobile.is-open li:nth-child(6) a{transition-delay:.25s}
.nav-mobile.is-open .btn{transition-delay:.3s}
.nav-backdrop{position:fixed;inset:0;z-index:95;background:rgba(20,20,20,.5);opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease-out),visibility 0s linear .35s}
.nav-backdrop.is-open{opacity:1;visibility:visible;transition-delay:0s}
@media (min-width:1100px){.nav-backdrop,.nav-backdrop.is-open{display:none}}
@media (min-width:1100px){.nav-mobile,.nav-mobile.is-open{display:none}}
.nav-mobile ul{list-style:none;margin:0;padding:8px 0 24px}
.nav-mobile li{margin:0}
.nav-mobile a{
  display:block;padding:16px var(--gutter);min-height:48px;
  font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--sand-2);
}
.nav-mobile a[aria-current="page"]{color:var(--gold-dark);box-shadow:inset 3px 0 0 var(--gold)}
.nav-mobile .btn{margin:20px var(--gutter) 0;width:calc(100% - 2*var(--gutter))}

/* --- Hero Startseite ----------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--sand)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media picture{height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 100%}
.hero-veil{position:absolute;inset:0;z-index:-1}
.hero-inner{padding-block:72px}
.hero h1{margin-bottom:24px;color:var(--ink);font-size:clamp(2.6rem,5.2vw,4.25rem);text-wrap:initial}
/* H1-Zeilen: Maske fuer das Hochgleiten. Flex-Spalte, damit die Ausgleichs-Raender nicht verschmelzen */
.hero h1,.pagehero h1{display:flex;flex-direction:column;align-items:flex-start}
.line{display:block;overflow:hidden;padding:.12em 0 .2em;margin:-.12em 0 -.2em}
.line-in{display:block}
.hero .hero-rule{width:64px;height:1px;background:var(--gold);margin:0 0 24px;border:0}
.hero p{max-width:34ch;color:var(--ink-2);font-size:1.0625rem;margin-bottom:32px}

/* Mobil: Bild oben, Text darunter (kein Text auf unruhigem Bild) */
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;background:var(--white);min-height:min(70vh,640px);min-height:min(70svh,640px)}
  .hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;flex:0 0 auto}
  .hero-media img{object-position:62% 100%}
  .hero-veil{display:none}
  .hero-inner{padding-block:40px 56px;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
  .hero p{max-width:100%}
}
@media (min-width:900px){
  .hero{display:flex;align-items:center;min-height:min(78vh,640px)}
  /* Parallax-Reserve: Bildkasten ragt 12 % nach oben, damit beim Verschieben keine Luecke entsteht */
  .anim .hero-media,.anim .pagehero-media{top:-12%}
  .hero-veil{background:linear-gradient(100deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.84) 24%,
      rgba(255,255,255,.58) 40%,
      rgba(255,255,255,.18) 54%,
      rgba(255,255,255,0) 66%)}
  .hero-inner{padding-block:80px;width:100%}
}

/* Hero der Unterseiten (ca. 50 vh, Text auf Bild mit dunklem Verlauf) */
.pagehero{position:relative;isolation:isolate;background:var(--ink);overflow:hidden}
.pagehero-media{position:absolute;inset:0;z-index:-2}
.pagehero-media picture{height:100%}
.pagehero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%)}
.pagehero--photo .pagehero-media img{}
.pagehero--pos-top .pagehero-media img{object-position:50% 32%}
.pagehero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,12,12,.80) 0%,rgba(12,12,12,.60) 45%,rgba(12,12,12,.28) 100%),
             linear-gradient(0deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,.08) 60%);
}
.pagehero-inner{padding-block:72px;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(44vh,380px)}
.pagehero-inner > *{width:100%}
@media (min-width:900px){.pagehero-inner{min-height:min(50vh,520px);padding-block:96px}}
.pagehero h1{color:#fff;margin-bottom:0;max-width:18ch;text-wrap:initial}
.pagehero .overline{color:var(--gold-light)}
.pagehero .overline::after{background:var(--gold-light)}
.pagehero p{color:#E6E2DA;max-width:56ch;margin-top:24px;margin-bottom:0}
.pagehero .overline{margin-bottom:16px}

/* --- Zweispaltige Text/Bild-Sektion (Über uns auf der Startseite) -------- */
.split-2{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.split-2{grid-template-columns:1fr 1fr;gap:80px}}
.split-2--rev .split-2-media{order:-1}
@media (max-width:899px){.split-2--rev .split-2-media{order:0}}

/* Bild mit versetztem Goldrahmen */
.framed{position:relative;padding:0 16px 16px 0}
.framed picture{position:relative;z-index:1;overflow:hidden}
.framed img{position:relative;z-index:1;width:100%;aspect-ratio:3/2;object-fit:cover}
.framed--photo img{}
.framed::after{
  content:"";position:absolute;right:0;bottom:0;left:32px;top:32px;
  border:1px solid var(--gold);z-index:0;pointer-events:none;
}
@media (max-width:639px){.framed{padding:0 10px 10px 0}.framed::after{left:22px;top:22px}}

/* --- Leistungen (4 Spalten mit Trennlinien) ------------------------------ */
.section-head{max-width:680px;margin-bottom:56px}
.section-head--center .overline{margin-bottom:16px}
.section-head h2{max-width:none}
.section-head--center{margin-inline:auto;text-align:center;max-width:920px}
.section-head--center h2{max-width:none;margin-inline:auto}
.section-head h2{margin-bottom:16px}
.section-head p{margin-bottom:0}
.section-head--center p{margin-inline:auto}

.cols-4{display:grid;gap:0;grid-template-columns:1fr}
.cols-4 > *{padding:32px 0;border-top:1px solid var(--sand-2)}
.cols-4 > *:first-child{border-top:0;padding-top:0}
@media (min-width:640px){
  .cols-4{grid-template-columns:1fr 1fr}
  .cols-4 > *{padding:32px 28px;border-top:0;border-left:1px solid var(--sand-2)}
  .cols-4 > *:nth-child(odd){border-left:0;padding-left:0}
  .cols-4 > *:nth-child(even){padding-right:0}
  .cols-4 > *:nth-child(n+3){border-top:1px solid var(--sand-2)}
}
@media (min-width:1100px){
  .cols-4{grid-template-columns:repeat(4,1fr)}
  .cols-4 > *,
  .cols-4 > *:nth-child(odd),
  .cols-4 > *:nth-child(even),
  .cols-4 > *:nth-child(n+3){padding:0 30px;border-top:0;border-left:1px solid var(--sand-2)}
  .cols-4 > *:first-child{padding-left:0;border-left:0}
  .cols-4 > *:last-child{padding-right:0}
}
.service{text-align:center}
.service .icon{display:flex;justify-content:center;margin-bottom:24px;color:var(--gold)}
.service .icon svg{width:44px;height:44px;stroke-width:1.35}
.service h3{margin-bottom:12px}
.service p{font-size:.9375rem;line-height:1.65;margin:0 auto;max-width:30ch}

/* --- Dunkles Band mit Kennzahlen ----------------------------------------- */
.band{display:grid;gap:48px;align-items:center}
@media (min-width:1200px){.band{grid-template-columns:1.12fr 1fr;gap:56px}}
.band > div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:start}
.band-icon{
  grid-row:1 / span 2;width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);color:var(--gold-light);margin:0;
}
.band h2{grid-column:2;margin-bottom:12px;font-size:clamp(1.6rem,2.4vw,1.95rem);max-width:none;text-wrap:balance}
.band p{grid-column:2;margin-bottom:0;max-width:48ch}
@media (max-width:479px){
  .band > div:first-child{grid-template-columns:1fr}
  .band-icon{grid-row:auto;width:56px;height:56px;margin-bottom:20px}
  .band h2,.band p{grid-column:auto}
}
.section--dark:has(> .container > .band){padding-block:72px}
@media (min-width:900px){.section--dark:has(> .container > .band){padding-block:80px}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat{padding:0 12px;text-align:left;position:relative}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);transform-origin:top center}
.stat:first-child{padding-left:0}
.stat:first-child::before{display:none}
.stat-value .num{font-variant-numeric:tabular-nums}
.stat:last-child{padding-right:0}
@media (min-width:640px){.stat{padding:0 20px}.stat:first-child{padding-left:0}}
.stat-value{
  font-family:var(--serif);font-weight:400;color:var(--gold-light);
  font-size:clamp(1.5rem,6vw,2.7rem);line-height:1.05;margin:0 0 8px;
  overflow-wrap:normal;word-break:keep-all;white-space:nowrap;max-width:none;
}
@media (min-width:640px){.stat-value{font-size:clamp(2rem,3.4vw,2.7rem)}}
.stat-label{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-on-dark);line-height:1.5;margin:0;max-width:none;hyphens:manual;
}
@media (min-width:640px){.stat-label{font-size:.75rem;letter-spacing:.12em;max-width:20ch}}

/* --- Split-Sektion mit randlosem Bild (Kontakt-Teaser) ------------------- */
.split-bleed{display:grid;grid-template-columns:1fr}
.split-bleed-text{
  padding:var(--sect) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;
}
.split-bleed-media img{width:100%;height:100%;object-fit:cover;min-height:280px}
@media (min-width:900px){
  .split-bleed{grid-template-columns:1fr 1fr;align-items:stretch}
  .split-bleed-text{
    padding:var(--sect) 72px var(--sect) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));
  }
  .split-bleed-media{position:relative;min-height:100%}
  .split-bleed-media picture{position:absolute;inset:0}
  .split-bleed-media img{position:absolute;inset:0;height:100%}
}
.split-bleed-text p{margin-bottom:32px}
.split-bleed-text .overline{margin-bottom:16px}

/* --- Disclaimer ---------------------------------------------------------- */
.disclaimer{
  margin-top:40px;padding:4px 0 4px 20px;border-left:2px solid var(--gold);
  background:transparent;color:var(--muted);
  font-size:.9375rem;line-height:1.6;max-width:62ch;
}
.section--dark .disclaimer{color:#A8A49C;max-width:66ch;margin:48px auto 0;padding:20px 0 0;border-left:0;border-top:1px solid var(--line-dark);text-align:center}
.section--dark .disclaimer mark.platzhalter{font-size:.875rem}

/* --- Karten, Listen, Raster ---------------------------------------------- */
.card{background:var(--white);border:1px solid var(--sand-2);border-radius:3px;padding:32px;
  transition:border-color .35s ease,box-shadow .35s ease}
.card:hover{border-color:#DDD6C4;box-shadow:0 12px 32px -18px rgba(20,20,20,.18)}
.section--sand .card{background:var(--white)}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Nummeriertes Raster (8 Gründe) */
.reasons{display:grid;gap:0;grid-template-columns:1fr}
.reason{padding:32px 0;border-top:1px solid var(--sand-2)}
.reason:first-child{border-top:0;padding-top:0}
@media (min-width:640px){
  .reasons{grid-template-columns:1fr 1fr}
  .reason{padding:32px 28px;border-top:1px solid var(--sand-2);border-left:1px solid var(--sand-2)}
  .reason:nth-child(odd){border-left:0;padding-left:0}
  .reason:nth-child(even){padding-right:0}
  .reason:nth-child(-n+2){border-top:0;padding-top:0}
}
@media (min-width:1100px){
  .reasons{grid-template-columns:repeat(4,1fr)}
  .reason,.reason:nth-child(odd),.reason:nth-child(even){padding:32px 28px;border-left:1px solid var(--sand-2);border-top:1px solid var(--sand-2)}
  .reason:nth-child(4n+1){border-left:0;padding-left:0}
  .reason:nth-child(4n){padding-right:0}
  .reason:nth-child(-n+4){border-top:0;padding-top:0}
}
.reason-num{
  display:block;font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.14em;line-height:1;color:var(--gold-dark);
  font-variant-numeric:lining-nums tabular-nums;margin-bottom:16px;
}
.reason h3{font-size:1.0625rem;margin-bottom:8px}
.reason p{font-size:.9375rem;line-height:1.65;margin:0}

/* Zeitleiste (5 Schritte) */
.timeline{list-style:none;margin:0;padding:0;position:relative;--tl:1}
.timeline::before{content:"";position:absolute;left:0;top:6px;bottom:0;width:1px;background:var(--sand-2)}
.timeline::after{content:"";position:absolute;left:0;top:6px;bottom:0;width:1px;background:var(--gold);
  transform:scaleY(var(--tl));transform-origin:top center}
.timeline > li{position:relative;padding:0 0 44px 44px}
.timeline > li:last-child{padding-bottom:0}
.timeline > li::before{
  content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--gold);
}
@media (min-width:640px){.timeline > li{padding-left:56px}}
.step-num{
  display:block;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px;
}
.timeline h3{margin-bottom:10px}
.timeline p{margin-bottom:0}

/* Aufzählung mit Goldpunkt */
.gold-list{list-style:none;margin:0 0 1.25em;padding:0;display:grid;gap:12px}
@media (min-width:640px){.gold-list{grid-template-columns:1fr 1fr;column-gap:32px}}
.gold-list li{position:relative;padding-left:22px;margin:0}
.gold-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:0;list-style:none}
.chips li{
  margin:0;padding:8px 16px;border:1px solid var(--sand-2);border-radius:999px;background:var(--white);
  font-size:.8125rem;color:var(--ink-2);
}
.section--sand .chips li{background:var(--white)}

/* Nummerierte Punkteliste mit Gold-Ziffer */
.numbered{list-style:none;margin:0;padding:0;display:grid;gap:32px}
@media (min-width:900px){.numbered{grid-template-columns:1fr 1fr;column-gap:56px}}
.numbered > li{margin:0;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.numbered .n{
  font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.14em;line-height:1.7;color:var(--gold-dark);min-width:2.4ch;
  font-variant-numeric:lining-nums tabular-nums;padding-top:.1em;
}
.numbered h3{font-size:1.0625rem;margin-bottom:6px}
.numbered p{margin:0;font-size:.9375rem;line-height:1.65}

/* Icon-Text-Punkte */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:640px){.ticks{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.ticks{grid-template-columns:repeat(3,1fr)}}
.ticks li{margin:0;display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:var(--ink-2)}
.ticks svg{flex:0 0 auto;color:var(--gold);margin-top:3px}

/* --- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--sand-2);max-width:none}
.faq details{border-bottom:1px solid var(--sand-2)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--ink-2);line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--gold-dark)}
.faq summary .sign{
  flex:0 0 auto;width:22px;height:22px;position:relative;margin-top:3px;color:var(--gold);
}
.faq summary .sign::before,.faq summary .sign::after{
  content:"";position:absolute;background:currentColor;transition:transform .2s ease,opacity .2s ease;
}
.faq summary .sign::before{left:0;top:10px;width:22px;height:1.5px}
.faq summary .sign::after{left:10px;top:0;width:1.5px;height:22px}
.faq details[open] summary .sign::after{transform:scaleY(0);opacity:0}
.faq .faq-body{padding:0 0 24px;max-width:68ch}
.faq .faq-body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.faq summary .sign::before,.faq summary .sign::after{transition:none}}

/* --- Galerie + Lightbox -------------------------------------------------- */
.gallery{display:grid;gap:20px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media (min-width:640px){.gallery{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery li{margin:0}
.gallery figure{margin:0}
.gallery button{
  display:block;width:100%;padding:0;border:0;background:var(--sand-2);cursor:zoom-in;
  overflow:hidden;position:relative;line-height:0;isolation:isolate;
}
.gallery button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:#B8963E;mix-blend-mode:soft-light;opacity:.28;
}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .9s var(--ease-out)}
.gallery button:hover img,.gallery button:focus-visible img{transform:scale(1.04)}
/* Kleiner Hinweis, der beim Hover von unten hochgleitet (nur mit Maus) */
.gallery button::before{
  content:"Bild vergrößern";position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:36px 16px 14px;text-align:left;
  font-family:var(--sans);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:#fff;
  background:linear-gradient(0deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,0) 100%);
  opacity:0;transform:translateY(100%);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);
}
@media (hover:hover){
  .gallery button:hover::before,.gallery button:focus-visible::before{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.gallery img,.gallery button:hover img{transition:none;transform:none}}
.gallery figcaption,.gallery .caption{
  padding:12px 2px 0;font-family:var(--sans);font-size:.8125rem;color:var(--body);text-align:left;line-height:1.5;
}

dialog.lightbox{
  border:0;padding:0;background:transparent;max-width:min(94vw,1200px);max-height:94vh;width:100%;color:var(--text-on-dark);
}
dialog.lightbox::backdrop{background:rgba(12,12,12,.92)}
@keyframes lb-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes lb-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.975)}}
@keyframes lb-fade-in{from{opacity:0}to{opacity:1}}
@keyframes lb-fade-out{from{opacity:1}to{opacity:0}}
.anim dialog.lightbox[open] .lightbox-inner{animation:lb-in .4s var(--ease-out) both}
.anim dialog.lightbox[open]::backdrop{animation:lb-fade-in .4s var(--ease-out) both}
.anim dialog.lightbox.is-closing .lightbox-inner{animation:lb-out .22s var(--ease-in-out) both}
.anim dialog.lightbox.is-closing::backdrop{animation:lb-fade-out .22s var(--ease-in-out) both}
.lightbox-inner{display:flex;flex-direction:column;gap:14px}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;background:#0C0C0C}
.lightbox-caption{font-family:var(--sans);font-size:.875rem;color:#CFCBC2;margin:0;text-align:center}
.lightbox-bar{display:flex;justify-content:center;gap:12px}
.lightbox-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;
  background:transparent;border:1px solid var(--line-dark);color:var(--text-on-dark);border-radius:3px;cursor:pointer;
  font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}
.lightbox-btn:hover{border-color:var(--gold-light);color:var(--gold-light)}
.lightbox-btn:focus-visible{outline-color:var(--gold-light)}

/* --- Vorher/Nachher-Slider ----------------------------------------------- */
.ba{margin:0}
.ba-stage{--pos:50%;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand-2);user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-stage picture{display:contents}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:rgba(255,255,255,.95);
  box-shadow:0 0 0 .5px rgba(20,20,20,.35);pointer-events:none}
.ba-knob{
  position:absolute;top:50%;left:var(--pos,50%);width:40px;height:40px;border-radius:50%;
  background:rgba(20,20,20,.28);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(20,20,20,.28);
  transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;justify-content:center;color:#fff;
}
.ba-knob svg{width:18px;height:18px;stroke-width:1.5}
.ba-tag{
  position:absolute;top:16px;padding:6px 10px 5px;border-radius:0;
  background:rgba(20,20,20,.6);border:1px solid rgba(255,255,255,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1;pointer-events:none;
}
.ba-tag--l{left:16px}
.ba-tag--r{right:16px}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;
}
.ba-range::-webkit-slider-runnable-track{background:transparent;height:100%}
.ba-range::-moz-range-track{background:transparent;height:100%}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;border-radius:50%;background:transparent;border:0;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:transparent;border:0;cursor:ew-resize}
.ba-range:focus-visible{outline:3px solid var(--gold-dark);outline-offset:3px}
.ba-caption{padding-top:12px;font-family:var(--sans);font-size:.8125rem;color:var(--body);line-height:1.5}
.ba-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:640px){.ba-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:900px){.ba-grid{gap:40px}.ba-grid--3{grid-template-columns:repeat(3,1fr);gap:24px}}

/* --- Kontaktseite -------------------------------------------------------- */
.contact-layout{display:grid;gap:48px;align-items:start}
@media (min-width:900px){
  .contact-layout{grid-template-columns:1.15fr .85fr;gap:64px}
  .contact-layout > .contact-aside{position:sticky;top:calc(var(--nav-h) + 24px)}
}

.info-card{background:var(--sand);border:1px solid var(--sand-2);border-radius:3px;padding:32px}
@media (min-width:640px){.info-card{padding:40px}}
.info-block{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--sand-2)}
.info-block:first-of-type{border-top:0;padding-top:0}
.info-block:last-child{padding-bottom:0}
.info-block svg{flex:0 0 auto;color:var(--gold-dark);margin-top:3px}
.info-block h3{font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.info-block p{margin:0;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.info-block p + p{margin-top:12px}
.info-block a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--sand-2)}
.info-block a:hover{color:var(--gold-dark);border-bottom-color:var(--gold)}

/* --- Formular ------------------------------------------------------------ */
.form{max-width:640px}
.field{margin-bottom:24px}
.field > label{
  display:block;margin-bottom:8px;
  font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--ink-2);letter-spacing:.02em;
}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field select,.field textarea{
  width:100%;padding:14px 16px;min-height:52px;
  font-family:var(--sans);font-size:1rem;color:var(--ink-2);line-height:1.5;
  background:var(--white);border:1px solid #D8D4CB;border-radius:3px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{min-height:170px;resize:vertical}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#BEB8AB}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(128,98,36,.16);outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold-dark);outline-offset:1px}
.field ::placeholder{color:#A6A199;opacity:1}

.field-error{
  display:block;height:0;overflow:hidden;margin:0;visibility:hidden;opacity:0;transform:translateY(-6px);
  font-size:.875rem;line-height:1.5;color:#9B2317;font-weight:500;max-width:none;
  transition:opacity .3s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .35s;
}
.field.has-error .field-error,.field-check.has-error .field-error{height:auto;margin-top:8px;visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* Absenden: Ladezustand mit CSS-Spinner */
.btn.is-loading{pointer-events:none;color:rgba(255,255,255,.85)}
.btn.is-loading::before{
  content:"";width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#9B2317;background:#FDF7F6}

.field-check{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-bottom:24px}
.field-check input[type="checkbox"]{
  width:22px;height:22px;margin:2px 0 0;accent-color:var(--gold-dark);flex:0 0 auto;
}
.field-check .check-text{font-size:.9375rem;line-height:1.6;color:var(--body);margin:0;max-width:66ch}
.field-check .check-text a{color:var(--gold-dark)}
.field-check .field-error{grid-column:1 / -1}
.field-check.has-error input[type="checkbox"]{outline:2px solid #9B2317;outline-offset:2px}

.form-note{font-size:.875rem;color:var(--body);line-height:1.6;margin:16px 0 0;max-width:58ch}
.form-status{margin:0 0 24px}
.form-status:empty{margin:0}
.form-status .alert{
  padding:16px 20px;border-left:2px solid #9B2317;background:#FDF7F6;color:#7E1D13;
  font-size:.9375rem;line-height:1.6;margin:0;
}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Fußbereich ---------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--text-on-dark);padding-block:64px 0}
@media (min-width:900px){.site-footer{padding-block:80px 0}}
.footer-grid{display:grid;gap:44px;grid-template-columns:1fr}
@media (min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;gap:44px 40px}}
@media (min-width:1100px){.footer-grid{grid-template-columns:1.5fr 1fr 1.3fr .9fr;gap:48px}}
.footer-brand img{height:96px;width:auto;margin-bottom:24px}
.anim .footer-grid.reveal.stagger > .footer-brand img{opacity:0;transition:opacity 1.2s var(--ease-out) .1s}
.anim .footer-grid.reveal.stagger.is-visible > .footer-brand img{opacity:1}
.footer-brand p{color:#C4C0B8;font-size:.9375rem;max-width:32ch;margin:0}
.footer-col h2{
  font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 20px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 4px}
.footer-col a{color:#DAD6CE;text-decoration:none;font-size:.9375rem;display:inline-block;padding:6px 0;transition:color .2s ease}
.footer-col a:hover{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;color:#DAD6CE;font-size:.9375rem;line-height:1.6;margin-bottom:12px}
.footer-contact a{padding:2px 0}
.footer-contact svg{flex:0 0 auto;color:var(--gold-light);margin-top:4px}
.footer-contact .stack{display:block}
.footer-contact .stack span{display:block}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  margin-top:56px;padding-block:26px;border-top:1px solid var(--line-dark);
}
.footer-bottom p{margin:0;color:#A5A19A;font-size:.8125rem}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line-dark);color:var(--gold-light);border-radius:2px;transition:border-color .2s ease,color .2s ease;
}
.social-link:hover{border-color:var(--gold-light);color:#fff}

/* --- Mobile Aktionsleiste ------------------------------------------------ */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;
  background:var(--white);border-top:1px solid var(--sand-2);box-shadow:0 -2px 18px rgba(20,20,20,.10);
}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:60px;padding:12px 8px;
  font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);
}
.mobile-bar a + a{background:var(--gold-dark);color:#fff}
.mobile-bar a + a:hover{background:var(--gold-hover)}
.mobile-bar svg{flex:0 0 auto}
@media (min-width:900px){.mobile-bar{display:none}}
@media (max-width:899px){body.has-mobile-bar{padding-bottom:60px}}

/* --- Lesespalte (Impressum, Datenschutz) --------------------------------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin-top:2.5em;margin-bottom:.6em}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:1.0625rem;margin-top:1.8em;margin-bottom:.5em}
.prose p,.prose li{color:var(--body)}
.prose ul{padding-left:1.1em}
.prose .addr{font-style:normal;line-height:1.8}
.prose a{color:var(--ink)}

/* --- Zentrierte Kurzseiten (Danke, 404) ---------------------------------- */
.pagecenter{padding-block:var(--sect);text-align:center}
.pagecenter .overline{justify-content:center}
.pagecenter .overline::before{content:"";flex:0 0 40px;height:1px;background:var(--gold)}
.pagecenter p{margin-inline:auto;max-width:56ch}
.pagecenter .btn-row{justify-content:center}
.pagecenter .link-row{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;margin-top:32px;padding:0;list-style:none}
.pagecenter .link-row li{margin:0}
.pagecenter .link-row a{display:inline-block;padding:8px 0}


/* --- Nachtraege: Unterseiten-Bausteine ----------------------------------- */
.pagehero--plain{background:var(--ink)}
.pagehero--plain::before{display:none}
.pagehero--plain .pagehero-inner{min-height:0;padding-block:48px 40px}
.pagehero--plain h1{max-width:26ch}
@media (min-width:900px){.pagehero--plain .pagehero-inner{min-height:0;padding-block:72px 60px}}

.lead-first{font-size:1.125rem;line-height:1.65;color:var(--ink-2);max-width:66ch}
@media (min-width:900px){.lead-first{font-size:1.1875rem}}

.sub-head{font-size:1.0625rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2);margin:0 0 28px;
  padding-bottom:14px;border-bottom:1px solid var(--sand-2)}

.goldbox{border:1px solid var(--gold);padding:22px 26px;margin-top:32px;max-width:62ch;background:var(--white)}
.goldbox p{margin:0;color:var(--ink-2)}
.goldbox a{color:var(--gold-dark);text-decoration:none;border-bottom:1px solid var(--sand-2);white-space:nowrap}
.goldbox a:hover{border-bottom-color:var(--gold)}

.portrait-slot{margin-top:8px}
.hint{font-size:.875rem;color:var(--body);margin-top:16px}

.split-2--sticky{align-items:start}
@media (min-width:900px){
  .split-2--sticky .split-2-media{position:sticky;top:128px}
}

.contact-layout .info-card .overline{margin-bottom:14px}
.contact-layout .info-card h2{margin-bottom:26px}

/* --- Hilfsklassen statt Inline-Styles (CSP: style-src 'self') ----------- */
.narrow{max-width:66ch}
.mt-40{margin-top:40px}
.mt-48{margin-top:48px}
.mt-56{margin-top:56px}
.mt-64{margin-top:64px}
.section-head--tight{margin-bottom:32px}
.h2--small{font-size:clamp(1.5rem,2.4vw,1.9rem)}

/* Zweispaltiger Fliesstext, der sich selbst ausgleicht (Ueber uns) */
.text-cols{column-gap:48px}
@media (min-width:900px){.text-cols{columns:2;column-gap:64px}}
.text-cols p{max-width:none;break-inside:avoid}
.text-cols > div:last-child > p:last-child{margin-bottom:0}

/* Fuenf Karten: 3 + 2 zentriert (Leistungen) */
.cards-5{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.cards-5 > *{flex:1 1 100%}
@media (min-width:640px){.cards-5 > *{flex:0 1 calc((100% - 24px)/2)}}
@media (min-width:1100px){.cards-5 > *{flex:0 1 calc((100% - 48px)/3)}}

/* Schmale Hinweiszeile ueber dem Fussbereich (Startseite) */
.legal-line{border-top:1px solid var(--sand-2);padding:18px var(--gutter);text-align:center}
.legal-line p{margin:0 auto;max-width:80ch;font-size:.8125rem;line-height:1.5;color:var(--muted)}

/* --- Bewegung ------------------------------------------------------------
   Alle Anfangszustaende haengen an html.anim. Die Klasse setzt main.js nur,
   wenn JavaScript laeuft UND der Nutzer keine reduzierte Bewegung wuenscht.
   Ohne JS oder mit prefers-reduced-motion ist deshalb alles sofort sichtbar.
   ------------------------------------------------------------------------- */

/* Seite blendet ein (Seitenwechsel) */
@keyframes page-in{from{opacity:0}to{opacity:1}}
.anim body{animation:page-in .55s var(--ease-out) both}
.anim main{transition:opacity .18s var(--ease-in-out)}
.anim main.is-leaving{opacity:0}

/* Hero: Ken-Burns 8 s, Text gestaffelt */
@keyframes ken-burns{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes line-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes rule-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.anim .hero-media img,.anim .pagehero-media img{animation:ken-burns 8s var(--ease-out) both}
.anim .hero-inner .line-in,.anim .pagehero-inner .line-in{animation:line-up .9s var(--ease-out) both}
.anim .hero-inner .line:nth-child(2) .line-in{animation-delay:.09s}
.anim .hero-inner .line:nth-child(3) .line-in{animation-delay:.18s}
.anim .hero-inner .hero-rule{transform-origin:left center;animation:rule-grow .8s var(--ease-out) .3s both}
.anim .hero-inner p{animation:rise-in .9s var(--ease-out) .3s both}
.anim .hero-inner .btn-row{animation:rise-in .9s var(--ease-out) .42s both}
.anim .pagehero-inner .overline{animation:rise-in .8s var(--ease-out) both}
.anim .pagehero-inner .overline::after{transform-origin:left center;animation:rule-grow .8s var(--ease-out) .25s both}
.anim .pagehero-inner .overline::before{transform-origin:right center;animation:rule-grow .8s var(--ease-out) .25s both}
.anim .pagehero-inner .line-in{animation-delay:.12s}
.anim .pagehero-inner .line:nth-child(2) .line-in{animation-delay:.21s}
.anim .pagehero-inner p{animation:rise-in .9s var(--ease-out) .32s both}
.anim .pagehero-inner .btn-row{animation:rise-in .9s var(--ease-out) .44s both}
.hero-media,.pagehero-media{will-change:auto}
.hero-media.is-parallax,.pagehero-media.is-parallax{will-change:transform}

/* Scroll-Einblendungen (einmalig, IntersectionObserver setzt is-visible) */
.anim .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.anim .reveal.is-visible{opacity:1;transform:none}
/* Raster: Kinder nacheinander (Versatz als Variable, damit Icons ihn erben) */
.anim .reveal.stagger{opacity:1;transform:none;transition:none}
.anim .reveal.stagger > *{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out) var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.anim .reveal.stagger.is-visible > *{opacity:1;transform:none}
.anim .reveal.stagger > :nth-child(2){--d:.08s}
.anim .reveal.stagger > :nth-child(3){--d:.16s}
.anim .reveal.stagger > :nth-child(4){--d:.24s}
.anim .reveal.stagger > :nth-child(5){--d:.32s}
.anim .reveal.stagger > :nth-child(6){--d:.4s}
.anim .reveal.stagger > :nth-child(7){--d:.48s}
.anim .reveal.stagger > :nth-child(8){--d:.56s}
.anim .reveal.stagger > :nth-child(9){--d:.64s}
.anim .reveal.stagger > :nth-child(10){--d:.72s}
.anim .reveal.stagger > :nth-child(11){--d:.8s}
.anim .reveal.stagger > :nth-child(12){--d:.88s}
/* Karten behalten ihre Hover-Uebergaenge zusaetzlich */
.anim .reveal.stagger > .card{transition:opacity .6s var(--ease-out) var(--d,0s),transform .6s var(--ease-out) var(--d,0s),border-color .35s ease,box-shadow .35s ease}

/* Overline-Linie waechst von links (zentriert: linke Linie von rechts) */
.anim .reveal .overline::after{transform:translateY(.5px) scaleX(0);transform-origin:left center;transition:transform .7s var(--ease-out) .25s}
.anim .reveal .overline::before{transform:translateY(.5px) scaleX(0);transform-origin:right center;transition:transform .7s var(--ease-out) .25s}
.anim .reveal.is-visible .overline::after,.anim .reveal.is-visible .overline::before{transform:translateY(.5px) scaleX(1)}

/* Vorhang: Bild wird von links aufgedeckt und zoomt leicht heraus */
/* Der Clip liegt auf dem picture-Kind, nicht auf dem beobachteten Element:
   ein komplett weggeclipptes Element meldet der IntersectionObserver sonst nie als sichtbar. */
.anim .curtain picture{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease-in-out)}
.anim .curtain.is-visible picture{clip-path:inset(0)}
.anim .curtain img{transform:scale(1.08);transition:transform 1.3s var(--ease-out)}
.anim .curtain.is-visible img{transform:none}
/* Rahmenbild: Goldrahmen faehrt versetzt nach dem Foto ein */
.anim .framed.curtain::after{opacity:0;transform:translate(-14px,-14px);transition:opacity .6s var(--ease-out) .55s,transform .8s var(--ease-out) .55s}
.anim .framed.curtain.is-visible::after{opacity:1;transform:none}

/* Kennzahlen: Goldlinien wachsen, Zahlen zaehlt main.js hoch */
.anim .band .stat::before{transform:scaleY(0);transition:transform .9s var(--ease-out) .2s}
.anim .band.is-visible .stat::before{transform:scaleY(1)}
.anim .band.is-visible .stat:nth-child(3)::before{transition-delay:.35s}

/* Icons zeichnen sich (main.js setzt pathLength=1 und die Klasse draw) */
.anim svg.draw *{stroke-dasharray:1 2;stroke-dashoffset:1.1;transition:stroke-dashoffset 1.2s var(--ease-in-out) calc(var(--d,0s) + .15s)}
.anim .is-visible svg.draw *{stroke-dashoffset:0}

/* Zeitleiste: Goldlinie waechst mit dem Scrollen (main.js setzt --tl) */
.anim .timeline{--tl:0}
.anim .timeline::after{transition:transform .25s linear}

/* Formular-Fokus, Karten usw. behalten ihre kurzen Uebergaenge (200 ms) */

/* Reduzierte Bewegung: Sicherheitsnetz fuer alles, was nicht an .anim haengt */
@media (prefers-reduced-motion:reduce){
  .anim .reveal,.anim .reveal.stagger > *{opacity:1;transform:none;transition:none}
  .nav-mobile,.nav-mobile li a,.nav-mobile .btn,.nav-backdrop,.field-error{transition:none}
  .site-header.is-scrolled::before,.site-header.is-scrolled .nav,.site-header.is-scrolled .nav-logo img{transform:none}
  .btn::after{display:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* --- Fliesstext-Links an dunklen Stellen (SEO-Einbau 06.09.) ------------ */
.pagehero p a{color:var(--gold-light);text-decoration-color:rgba(214,188,122,.6)}
.pagehero p a:hover{color:#fff}

/* --- Ueber uns: Zitat und Portraet-Rahmen (Fix-Runde 2, 06.09.) ---------- */
.pull-quote{
  margin:0;padding-left:28px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--gold-dark);max-width:none;text-wrap:balance;
}
.portrait-frame{
  position:relative;z-index:1;aspect-ratio:3/2;background:var(--sand-2);border:1px solid var(--sand-2);
  display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;
}
.portrait-frame .portrait-slot{margin:0;max-width:none}
.portrait-frame mark.platzhalter{font-size:.875rem;line-height:1.7}

/* --- Druck --------------------------------------------------------------- */
@media print{
  *,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
  .site-header,.mobile-bar,.nav-mobile,.nav-backdrop,.site-footer,.skip-link,.btn,.btn-row,.arrow-link,
  .hero-media,.hero-veil,.pagehero-media,.legal-line,.faq summary .sign{display:none!important}
  html{scroll-behavior:auto}
  body{color:#000;background:#fff;font-size:11pt;line-height:1.5;padding:0}
  body.has-mobile-bar{padding-bottom:0}
  .container,.container-narrow{max-width:none;padding-inline:0}
  .section,.pagecenter{padding-block:16pt}
  .section--sand,.section--dark,.pagehero,.pagehero--plain,.hero,.info-card,.card,.goldbox{background:#fff!important;color:#000!important;border-color:#bbb}
  .section--dark h1,.section--dark h2,.section--dark h3,.section--dark p,.pagehero h1,.pagehero p,.stat-label,.footer-col h2{color:#000!important}
  .pagehero::before{display:none}
  .pagehero-inner{min-height:0;padding-block:0 12pt}
  h1,h2,h3,h4,p,li{color:#000}
  h2,h3{break-after:avoid}
  p,li,.card,.reason{break-inside:avoid}
  a{color:#000;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  .anim .reveal,.anim .reveal.stagger > *,.anim .curtain,.anim .curtain picture,.anim .curtain img,.anim .framed.curtain::after,
  .anim .line-in,.anim .hero-inner > *,.anim .pagehero-inner > *,.anim .footer-grid img,.anim body,.anim main,.anim .stat::before,
  .anim .overline::after,.anim .overline::before{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}
  .anim svg.draw *{stroke-dashoffset:0!important}
  .anim .timeline{--tl:1}
  .split-2,.contact-layout,.band{display:block}
  .split-2-media,.framed::after{display:none}
  mark.platzhalter{box-shadow:none;border:1px solid #999;background:#fff}
}

/* Abnahme-Fixes 06.09. (Endprüfung A) */
.nav-mobile a.btn,.nav-mobile.is-open a.btn{color:#fff}
body.menu-open{overflow:hidden}
/* Keine Silbentrennung in Ueberschriften (09.09.2026): 'Referenzen' wurde auf dem
   Handy zu 'Referen-zen' getrennt. Umbruch nur noch im Notfall, ohne Trennstrich. */
@media (max-width:420px){.pagehero h1,.legal h1,h1{overflow-wrap:break-word;hyphens:manual}}
h1,h2,h3{hyphens:manual}

/* =========================================================================
   VARIANTE A2 „Animiert" (Show-Version, 06.09.2026)
   Zusatzschicht ueber Variante A. Alles haengt an html.anim (Bewegung) bzw.
   an Medienabfragen ab 1024 px. Ohne JavaScript, bei reduzierter Bewegung
   und unter 1024 px bleibt die Seite genau wie Variante A.
   Nur transform / opacity / clip-path / filter, keine Layout-Animationen.
   ========================================================================= */

/* --- 1. Pop-out-Hero: Himmel hinten, freigestelltes Gebaeude davor -------
   Aufbau ab 1024 px:
   .hero-media = Rahmen mit overflow:hidden und der Himmel-Platte
   .hero-pop   = gleicher Kasten, aber overflow sichtbar, darin das Cutout.
   Beide Bildebenen liegen deckungsgleich: identische Breite (100 %) und
   identischer negativer Rand (-4.933 % der Rahmenbreite). Dadurch steht die
   Dachkante immer exakt --pop Pixel ueber der Rahmenkante, unabhaengig von
   der Fensterbreite. Das Cutout ragt in das weisse Band unter der Leiste.
   ------------------------------------------------------------------------ */
.hero-pop{display:none}
@media (min-width:1024px){
  .hero--pop{
    --band:118px;--pop:88px;
    overflow:visible;background:var(--white);
    /* ABNAHME A2 (P1): Die vergroesserten Bildebenen (scale 1.04 / 1.06)
       ragen rechts ueber das Fenster hinaus. Der clip-path auf .hero-pop
       schneidet sie nur optisch ab, die Seite blieb dadurch 29 px
       waagerecht scrollbar (Scrollleiste am unteren Rand, ab 1024 px).
       overflow-x:clip begrenzt den Scrollbereich, laesst das Dach aber
       weiterhin nach oben aus dem Rahmen ragen (y bleibt sichtbar). */
    overflow-x:clip;overflow-y:visible;
    /* Rahmenhoehe so gewaehlt, dass das Bild den Rahmen immer bis unten
       fuellt (Bildhoehe = 56,25 % der Breite) und in flachen Fenstern nicht
       ueber den Bildschirm hinauswaechst. */
    min-height:calc(var(--band) + clamp(380px,min(51.3vw - 96px,66vh),700px));
  }
  .hero--pop .hero-media{
    top:var(--band);inset-inline:0;bottom:0;overflow:hidden;z-index:-3;background:var(--sand);
  }
  .hero--pop .hero-pop{
    display:block;position:absolute;top:var(--band);inset-inline:0;bottom:0;
    z-index:-2;pointer-events:none;overflow:visible;perspective:1200px;
    /* Nur nach oben offen: unten und an den Seiten endet das Cutout genau an
       der Rahmenkante, nach oben darf das Dach 400 px herausragen. */
    clip-path:inset(-400px 0 0 0);
  }
  /* Die Bildebene ist das picture-Element selbst (kein Zusatz-Kasten,
     damit die Mobilansicht von Variante A unveraendert bleibt). */
  .hero--pop .hero-layer{position:absolute;left:0;right:0;top:calc(-1 * var(--pop));height:auto;display:block}
  .hero--pop .hero-layer img{
    display:block;width:100%;height:auto;max-width:none;margin-top:-4.933%;object-fit:fill;
  }
  /* Ruhelage ohne Skript: Himmel leicht groesser, Gebaeude fast in Originalgroesse */
  .hero--pop .hero-layer--sky{transform-origin:50% 0;transform:scale(1.06)}
  .hero--pop .hero-layer--cut{transform-origin:50% 0;transform:scale(1.04)}
  /* Der weisse Schleier endet vor dem Gebaeude, damit das Dach frei steht */
  .hero--pop .hero-veil{
    z-index:-1;
    background:linear-gradient(100deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.88) 20%,
      rgba(255,255,255,.62) 33%,
      rgba(255,255,255,.20) 44%,
      rgba(255,255,255,0) 53%);
  }
  .hero--pop .hero-inner{position:relative;z-index:1}
}
/* Der Ken-Burns von Variante A wuerde die Skript-Transformationen ueber-
   schreiben: fuer den Pop-out-Hero uebernimmt das Skript die Bewegung. */
.anim .hero--pop .hero-media img{animation:none}
@keyframes pop-rise{
  0%{transform:translate3d(0,54px,0);opacity:0}
  55%{opacity:1}
  72%{transform:translate3d(0,-9px,0)}
  100%{transform:none;opacity:1}
}
@keyframes sky-rise{from{transform:scale(1.05)}to{transform:none}}
@media (min-width:1024px){
  .anim .hero--pop .hero-media{top:var(--band)}
  /* Auffahrt beim Laden: das Gebaeude schiebt sich mit leichtem Ueberschwingen
     aus dem Foto heraus (1,2 s). Liegt auf dem Bild, das Skript auf der Ebene. */
  .anim .hero--pop .hero-layer--cut img{animation:pop-rise 1.2s var(--ease-out) .15s both}
  .anim .hero--pop .hero-layer--sky img{animation:sky-rise 8s var(--ease-out) both}
  .anim .hero--pop.is-live .hero-layer{will-change:transform}
}

/* Unterseiten-Heros: Parallax laeuft in A2 mit Faktor 0,3 statt 0,2. Damit
   unten keine Luecke entsteht, ragt der Bildkasten 20 % statt 12 % nach oben. */
@media (min-width:900px){
  .anim .pagehero-media{top:-20%}
}

/* --- 2. Tiefen-Tilt fuer das Rahmenbild (Ueber uns) ---------------------- */
@media (min-width:1024px) and (hover:hover){
  .anim .framed.tilt{perspective:1000px}
  .anim .framed.tilt picture{
    transform-origin:50% 50%;
    transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
    box-shadow:0 18px 40px -30px rgba(20,20,20,.45);
  }
  .anim .framed.tilt.is-tilt picture{transition:box-shadow .5s var(--ease-out);box-shadow:0 30px 60px -34px rgba(20,20,20,.5)}
  .anim .framed.tilt::after{
    transform:translate3d(var(--fx,0px),var(--fy,0px),0);
    transition:transform .5s var(--ease-out);
  }
  .anim .framed.tilt.is-tilt::after{transition:none}
  /* Waehrend der Vorhang laeuft, bleibt der Einfahr-Uebergang von A gueltig */
  .anim .framed.tilt.curtain:not(.is-visible)::after{transform:translate(-14px,-14px)}
}

/* --- 3. 3D-Karten mit Glanzlicht ---------------------------------------- */
@media (min-width:1024px) and (hover:hover){
  .anim .tilt-card{
    position:relative;
    transition:transform .5s var(--ease-out),box-shadow .4s ease;
    transform-origin:50% 50%;
  }
  .anim .tilt-card.is-tilt{transition:box-shadow .4s ease}
  /* Glanzlicht nur auf Flaechen, die auch eine Karte sind. Auf den rahmen-
     losen Leistungsspalten wirkte ein warmer Fleck wie ein Schmutzrand. */
  .anim .card.tilt-card::after,.anim .gallery button.tilt-card::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
    background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),
      rgba(184,150,62,.15),rgba(184,150,62,0) 72%);
    transition:opacity .4s ease;
  }
  .anim .card.tilt-card.is-tilt::after{opacity:1}
  .anim .tilt-card > *{position:relative;z-index:1}
  /* Schatten nur dort, wo die Karte auch einen Rahmen hat. Die Leistungs-
     spalten stehen ohne Kasten auf Weiss, dort wuerde ein Schatten einen
     unsichtbaren Kasten sichtbar machen. */
  .anim .card.tilt-card.is-tilt{box-shadow:0 22px 44px -28px rgba(20,20,20,.28)}
  /* Galeriekacheln: das vorhandene Goldschleier-Pseudo bekommt das Glanzlicht */
  .anim .gallery button.tilt-card::after{
    background:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#DCC386,#B8963E 62%);
    mix-blend-mode:soft-light;opacity:.28;z-index:1;
  }
  .anim .gallery button.tilt-card.is-tilt::after{opacity:.34}
  .anim .gallery button.tilt-card{box-shadow:none}
  .anim .gallery button.tilt-card.is-tilt{box-shadow:0 26px 50px -32px rgba(20,20,20,.42)}
}

/* --- 4. Scrollytelling: fuenf Schritte mit stehendem Bild ---------------- */
.story-shot + .story-shot{display:none}
.story-frame{position:relative;padding:0 16px 16px 0}
.story-frame::after{
  content:"";position:absolute;right:0;bottom:0;left:32px;top:32px;
  border:1px solid var(--gold);z-index:0;pointer-events:none;
}
.story-stack{position:relative;z-index:1}
.story-shot{margin:0}
.story-shot img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:639px){.story-frame{padding:0 10px 10px 0}.story-frame::after{left:22px;top:22px}}
/* Die Bildergeschichte laeuft nur mit Skript und ohne reduzierte Bewegung.
   Sonst bleibt es die schlichte Liste mit einem Bild wie in Variante A. */
@media (min-width:1024px){
  .anim .story{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
  /* Das Bild steht mittig im freien Fenster (unterhalb der Leiste), damit es
     genau auf den mittig stehenden Schritttext trifft und nie unter der
     Navigation verschwindet. */
  .anim .story .story-media{
    position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
    display:flex;align-items:center;
  }
  .anim .story .story-media > .story-frame{width:100%}
  /* Nahezu quadratisch: fuellt das Fenster, statt es halb leer zu lassen */
  .anim .story-stack{aspect-ratio:1/1;overflow:hidden;background:var(--sand-2)}
  .anim .story-shot{position:absolute;inset:0;display:block}
  .anim .story-shot + .story-shot{display:block}
  .anim .story-shot picture{display:block;height:100%}
  .anim .story-shot img{height:100%;aspect-ratio:auto}
  /* Das neue Bild zieht ueber dem alten auf. Das vorherige bleibt so lange
     voll deckend darunter liegen, bis der Wechsel durch ist: sonst waeren
     beide halbdurchsichtig und es entstuende eine Doppelbelichtung. */
  .anim .story-shot{opacity:0;z-index:0;transition:opacity .6s var(--ease-in-out)}
  .anim .story-shot img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
  .anim .story-shot.is-prev{opacity:1;z-index:1;transition:none}
  .anim .story-shot.is-on{opacity:1;z-index:2}
  .anim .story-shot.is-on img{transform:none}
  /* Sicherheitsnetz: das erste Bild steht immer */
  .anim .story-shot:first-child{opacity:1}
  .anim .story-steps > li{
    min-height:56vh;padding-bottom:0;
    display:flex;flex-direction:column;justify-content:center;
  }
  .anim .story-steps > li:last-child{min-height:56vh}
  /* Auslauf: haelt das klebende Bild an seinem Platz, solange der
     letzte Schritt mittig steht. Die Zeitleiste endet am letzten Punkt. */
  .anim .story-steps{padding-bottom:26vh}
  .anim .story-steps::before,.anim .story-steps::after{bottom:54vh}
  /* Der Goldpunkt wandert auf die Hoehe des mittig stehenden Textes */
  .anim .story-steps > li::before{top:50%;margin-top:-5px}
  .anim .story-steps > li{transition:opacity .5s var(--ease-out)}
  /* Muss die Staffelungs-Regel (.reveal.stagger.is-visible > *) uebertreffen,
     sonst bleiben alle Schritte gleich hell. */
  /* Ohne diese Zeile erbt der Schrittwechsel den Staffelungs-Versatz der
     Einblendung und haengt bis zu 0,3 s nach. */
  .anim .story-steps.stagger.is-visible > li{transition:opacity .45s var(--ease-out) 0s}
  .anim .story-steps.stagger.is-visible > li.is-far{opacity:.8}
  .anim .story-steps > li .step-num{
    display:inline-block;transform-origin:left center;
    transition:transform .5s var(--ease-out),color .5s var(--ease-out);
  }
  .anim .story-steps > li.is-active .step-num{transform:scale(1.5) translateY(-1px);color:var(--gold)}
  .anim .story-steps > li::before{transition:transform .5s var(--ease-out)}
  .anim .story-steps > li.is-active::before{transform:scale(1.5)}
}

/* --- 5. Kennzahlen: Tiefenstaffelung und Goldschimmer -------------------- */
.band-sect{position:relative;overflow:hidden}
.band-sect > .container{position:relative;z-index:1}
@keyframes gold-drift{
  0%{transform:translate3d(-12%,0,0)}
  50%{transform:translate3d(12%,0,0)}
  100%{transform:translate3d(-12%,0,0)}
}
@media (min-width:1024px){
  .stats{perspective:900px;perspective-origin:50% 50%}
  .anim .band .stat{
    opacity:0;transform:translate3d(0,14px,-90px) scale(.86);filter:blur(6px);
    transition:transform .9s var(--ease-out),opacity .9s var(--ease-out),filter .9s var(--ease-out);
  }
  .anim .band .stat:nth-child(2){transition-delay:.12s}
  .anim .band .stat:nth-child(3){transition-delay:.24s}
  .anim .band.is-visible .stat{opacity:1;transform:none;filter:none}
  .anim .band-sect::before{
    content:"";position:absolute;top:-30%;left:-20%;width:140%;height:160%;z-index:0;pointer-events:none;
    background:radial-gradient(60% 60% at 30% 40%,rgba(214,188,122,.55),rgba(214,188,122,0) 70%);
    opacity:.06;animation:gold-drift 20s linear infinite;
  }
}

/* --- 6. Waagerechte Galeriebahn (Objekte) -------------------------------- */
.lane-sect{display:none}
@media (min-width:1024px){
  /* Kein overflow auf der Sektion: das wuerde position:sticky aushebeln.
     Waagerecht beschnitten wird erst im klebenden Kasten darunter. */
  .anim .lane-sect{display:block;background:var(--sand)}
  .lane{height:190vh;position:relative}
  .lane-sticky{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .lane-head{margin:0 0 32px;max-width:none;padding-inline:max(var(--gutter),calc((100vw - var(--container))/2))}
  .lane-track{display:flex;gap:28px;padding-inline:max(var(--gutter),calc((100vw - var(--container))/2));will-change:transform}
  .lane-track figure{margin:0;flex:0 0 auto;width:min(40vw,580px)}
  .lane-track img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .lane-track figcaption{
    padding:12px 2px 0;font-family:var(--sans);font-size:.8125rem;color:var(--body);line-height:1.5;
  }
  /* Weiche Kanten: die Reihe laeuft links und rechts in den Sandton aus,
     statt am Bildschirmrand hart abgeschnitten zu werden. */
  .lane-sticky::before,.lane-sticky::after{
    content:"";position:absolute;top:0;bottom:0;width:96px;z-index:2;pointer-events:none;
  }
  .lane-sticky::before{left:0;background:linear-gradient(90deg,var(--sand) 12%,rgba(245,243,238,0) 100%)}
  .lane-sticky::after{right:0;background:linear-gradient(270deg,var(--sand) 12%,rgba(245,243,238,0) 100%)}
}

/* --- 7. Textwirkung: Woerter und Zeichen blenden gestaffelt ein ---------- */
.w{display:inline-block;overflow:hidden;padding:.14em 0 .22em;margin:-.14em 0 -.22em;vertical-align:bottom}
.w-in{display:inline-block}
.anim .w-in{transform:translateY(112%);transition:transform .8s var(--ease-out) var(--wd,0s)}
.anim .is-visible .w-in{transform:none}
.ch{display:inline;white-space:pre-wrap}
.anim .ch{opacity:0;transition:opacity .45s var(--ease-out) var(--wd,0s)}
.anim .is-visible .ch{opacity:1}
/* Overline: erst waechst die Linie, dann kommt der Text */
.anim .reveal .overline{opacity:0;transition:opacity .5s var(--ease-out) .34s}
.anim .reveal.is-visible .overline{opacity:1}

/* --- 8. Seitenwechsel als weisser Vorhang -------------------------------- */
@keyframes curtain-up{from{transform:translateY(0)}to{transform:translateY(-100%)}}
.anim body::after{
  content:"";position:fixed;inset:0;z-index:300;background:var(--white);pointer-events:none;
  animation:curtain-up .42s var(--ease-in-out) both;
}
.anim main.is-leaving{opacity:1}
.page-curtain{
  position:fixed;inset:0;z-index:299;background:var(--white);pointer-events:none;
  transform:translateY(100%);transition:transform .4s var(--ease-in-out);
}
.page-curtain.is-up{transform:translateY(0)}

/* --- 9. Goldring als Mauszeiger-Begleiter (nur Maus, ab 1024 px) --------- */
.cursor-ring{
  position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:1px solid var(--gold);z-index:120;pointer-events:none;opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .3s var(--ease-out);
}
.cursor-ring.is-on{opacity:.5}
@media (max-width:1023px),(hover:none){.cursor-ring{display:none}}

/* --- 10. Sicherheitsnetz: reduzierte Bewegung und Druck ------------------ */
@media (prefers-reduced-motion:reduce){
  .anim body::after,.page-curtain,.cursor-ring{display:none}
  .anim .w-in,.anim .ch,.anim .band .stat,.anim .story-shot,.anim .story-shot img,
  .anim .hero--pop .hero-layer--cut img,.anim .hero--pop .hero-layer--sky img{
    transform:none!important;opacity:1!important;filter:none!important;transition:none!important;animation:none!important;
  }
  .anim .reveal .overline{opacity:1}
  .anim .band-sect::before{animation:none}
  .story-shot + .story-shot{display:none}
  .lane-sect{display:none}
}
@media print{
  body::after,.page-curtain,.cursor-ring,.lane-sect,.hero-pop{display:none!important}
  .anim .w-in,.anim .ch,.anim .band .stat,.anim .story-shot{transform:none!important;opacity:1!important;filter:none!important}
  .story{display:block}
  .story-shot + .story-shot{display:none}
}

/* =========================================================================
   ABNAHME A2 · P1-Korrektur (06.09.2026)
   Das randlose Skyline-Foto der Kontakt-Sektion liegt absolut in seiner
   Rasterzelle und wird vom Ken-Burns auf scale(1.08) vergroessert. Ohne
   Begrenzung ragt es 29 px ueber den rechten Fensterrand hinaus: die
   Startseite liess sich waagerecht schieben und zeigte am unteren Rand
   eine Scrollleiste. Derselbe Fehler steckt in Variante A.
   ========================================================================= */
.split-bleed-media{overflow:hidden}

/* 07.09.2026: Kennzahlen mit Inhaltsbreite, gleiche Abstaende zu den Trennlinien */
@media (min-width:640px){
  .stats{grid-template-columns:auto auto auto;justify-content:start}
  .stat{padding:0 36px}
  .stat:first-child{padding-left:0}
  .stat:last-child{padding-right:0}
  .stats--eng .stat:not(:last-child) .stat-label{width:0;min-width:100%;max-width:none;white-space:nowrap}
}

/* 07.09.2026: Bildergalerie "So koennte Ihr Investment aussehen" (Investment-Seite), laeuft nach links durch */
.galerie-band{position:relative;overflow:hidden;margin-top:40px}
.galerie-track{display:flex;gap:20px;width:max-content;will-change:transform}
.galerie-track figure{margin:0;flex:0 0 auto;width:min(62vw,420px)}
.galerie-track img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.galerie-track figcaption{margin-top:10px;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark,var(--muted,#806224))}
@keyframes galerie-lauf{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.anim .galerie-track{animation:galerie-lauf 75s linear infinite}
.anim .galerie-band:hover .galerie-track,.anim .galerie-band:focus-within .galerie-track{animation-play-state:paused}
html:not(.anim) .galerie-band{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
html:not(.anim) .galerie-track figure{scroll-snap-align:start}
html:not(.anim) .galerie-track .galerie-dup{display:none}
@media (max-width:639px){.galerie-track{gap:12px}.galerie-track figure{width:72vw}}
@media print{.galerie-sect{display:none}}

/* 08.09.2026: Projekt-Bloecke auf der Objekte-Seite, Platzhalter fuer noch fehlende Fotos */
.projekt-titel{margin-bottom:28px}
.bild-platzhalter{aspect-ratio:3/2;background:var(--sand-2);border:1px dashed var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);text-align:center;padding:16px}

/* --- Handy: Einstiegstext unter dem Seitenkopf enger setzen (09.09.2026) -----
   Zwischen Kopfbild, Einstiegstext und dem ersten Abschnitt stand auf kleinen
   Bildschirmen zu viel Luft. Am Rechner bleibt der Abstand unveraendert. */
@media (max-width:639px){
  .pagehero + .section{padding-top:36px;padding-bottom:28px}
  .pagehero + .section .lead-first{margin-bottom:0}
  .pagehero + .section + .section{padding-top:40px}
}

/* --- Handy: keine automatische Silbentrennung (09.09.2026) -------------------
   Woerter wie 'Referenzen' oder 'Kapitalanlage' wurden auf schmalen Bildschirmen
   mit Trennstrich zerlegt. Jetzt rutscht das ganze Wort in die naechste Zeile. */
@media (max-width:639px){
  p,li,h1,h2,h3,h4,summary,.card,.service,.lead,.lead-first,figcaption,.faq summary{
    hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;
  }
}