/* =========================================================
   Sarah Bock Immobilien — Ink & Copper
   ========================================================= */

:root{
  --papier:#F3EEE7;
  --creme:#E8DFD3;
  --creme-tief:#DCD1C2;
  --tinte:#14110F;
  --tinte-weich:#241E1A;
  --kupfer:#B47A5B;       /* Display-Typo (≥24px), Flächen, Linien */
  --kupfer-tief:#8A5636;  /* Kleintext auf hellem Grund — 5,3:1 / 4,6:1 */
  --kupfer-licht:#D6A183; /* auf Tinte */
  --nebel:#6F655E;      /* 4,8:1 auf Papier — WCAG AA für Kleintext */
  --nebel-hell:#A9A29B; /* nur auf Tinte, dort 7,5:1 */

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;
  --s6:clamp(3rem,6vw,6rem); --s7:clamp(4rem,9vw,9rem);
  --rand:clamp(1.25rem, 5vw, 5.5rem);
  --serif:'Instrument Serif', 'Times New Roman', serif;
  --sans:'Inter Tight', system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --kopf-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--sans); font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6; font-weight:400; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.lade{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.02em}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
section{position:relative; overflow-x:clip}
::selection{background:var(--kupfer); color:#fff}

/* ---------- Typo-Bausteine ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nebel); font-weight:500; margin:0 0 var(--s3);
}
.eyebrow--hell{color:var(--kupfer-licht)}
.abschnitt h2, .region h2, .wert h2, .kontakt h2, .ueber h2{
  font-family:var(--serif); font-size:clamp(2.4rem,1.4rem + 4.2vw,5rem);
  line-height:.98; letter-spacing:-.025em;
}
em{font-family:var(--serif); font-style:italic; color:var(--kupfer)}
.ink{background:var(--tinte); color:var(--papier)}
.ink em{color:var(--kupfer-licht)}

.pille{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:100px; border:1px solid var(--tinte);
  font-size:.9rem; font-weight:500; text-decoration:none; letter-spacing:.01em;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.pille:hover{background:var(--tinte); color:var(--papier)}
.pille--voll{background:var(--kupfer); border-color:var(--kupfer); color:#fff}
.pille--voll:hover{background:var(--tinte); border-color:var(--tinte)}

/* =========================================================
   INTRO
   ========================================================= */
.intro{position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:var(--papier); pointer-events:none}
.intro.ist-weg{display:none}
.intro__mitte{position:relative; z-index:2; text-align:center}
.intro__mark{width:min(220px,42vw); color:var(--kupfer); overflow:visible}
.im-pfad{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.intro__wort{
  margin-top:1.2rem; font-family:var(--serif); font-size:1.5rem; letter-spacing:.04em;
  opacity:0; transform:translateY(12px);
}
.intro__wort span{font-style:italic; color:var(--kupfer)}
.intro__vorhang{position:absolute; left:0; right:0; height:50.5%; background:var(--tinte); z-index:3; transform:scaleY(0)}
.intro__vorhang[data-v="1"]{top:0; transform-origin:top}
.intro__vorhang[data-v="2"]{bottom:0; transform-origin:bottom}

/* =========================================================
   HEADER
   ========================================================= */
.kopf{
  position:fixed; top:0; left:0; right:0; z-index:90; height:var(--kopf-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--rand); mix-blend-mode:normal;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), height .5s var(--ease);
}
.kopf.ist-fest{background:rgba(243,238,231,.82); backdrop-filter:blur(14px); height:62px; border-bottom:1px solid rgba(20,17,15,.08)}
.kopf.auf-ink{color:var(--papier)}
.kopf.auf-ink.ist-fest{background:rgba(20,17,15,.75); border-bottom-color:rgba(243,238,231,.12)}
.kopf__marke{display:flex; align-items:baseline; gap:.6rem; text-decoration:none}
.kopf__mono{
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.02em; color:var(--kupfer);
  border:1px solid currentColor; border-radius:50%; width:2.2rem; height:2.2rem;
  display:grid; place-items:center; font-size:1rem; flex:0 0 auto;
}
.kopf__name{font-family:var(--serif); font-size:1.15rem; white-space:nowrap; transition:opacity .4s var(--ease), transform .4s var(--ease)}
.kopf__name em{font-size:.95rem}
.kopf.ist-fest .kopf__name{opacity:0; transform:translateX(-8px)}
.kopf__nav{display:flex; gap:2rem}
.kopf__nav a{text-decoration:none; font-size:.9rem; position:relative; padding:.25rem 0}
.kopf__nav a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.kopf__nav a:hover::after{transform:scaleX(1); transform-origin:left}
.kopf__cta{
  text-decoration:none; font-size:.85rem; font-weight:500; padding:.6rem 1.3rem;
  border:1px solid currentColor; border-radius:100px; transition:background .4s var(--ease), color .4s var(--ease);
}
.kopf__cta:hover{background:var(--kupfer); border-color:var(--kupfer); color:#fff}
.kopf__burger{display:none; width:40px; height:40px; position:relative}
.kopf__burger span{position:absolute; left:9px; width:22px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s}
.kopf__burger span:first-child{top:17px}
.kopf__burger span:last-child{top:23px}
body.menue-auf .kopf__burger span:first-child{transform:translateY(3px) rotate(45deg)}
body.menue-auf .kopf__burger span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- Menü-Overlay ---------- */
.menue{
  position:fixed; inset:0; z-index:80; background:var(--tinte); color:var(--papier);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  display:grid; place-items:center;
}
.menue.ist-auf{pointer-events:auto}
.menue__bogen{position:absolute; left:0; right:0; bottom:-1px; height:12vh; width:100%; fill:var(--tinte); transform:translateY(99%)}
.menue__inhalt{width:min(1100px,100%); padding:0 var(--rand); display:grid; gap:var(--s5)}
.menue__liste li{overflow:hidden}
.menue__liste a{
  font-family:var(--serif); font-size:clamp(2rem,1rem + 4.5vw,4.2rem); line-height:1.12;
  text-decoration:none; display:inline-block; transform:translateY(110%);
  transition:color .35s var(--ease);
}
.menue__liste a:hover{color:var(--kupfer-licht); font-style:italic}
.menue__meta{display:flex; gap:var(--s5); flex-wrap:wrap; font-size:.9rem; color:var(--nebel-hell); opacity:0}
.menue__meta span{display:block; color:var(--kupfer-licht); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem}
.menue__meta a{text-decoration:none}

/* ---------- Rail ---------- */
.rail{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:70; display:flex; gap:.9rem; align-items:stretch; opacity:0; pointer-events:none}
.rail.ist-da{opacity:1}
.rail__linie{width:1px; background:rgba(20,17,15,.16); position:relative}
.rail__linie i{position:absolute; top:0; left:-.5px; width:2px; background:var(--kupfer); height:0}
.rail__punkte{display:flex; flex-direction:column; justify-content:space-between; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel); gap:.55rem}
.rail__punkte li{transition:color .4s var(--ease), transform .4s var(--ease); transform-origin:right}
.rail__punkte li.ist-aktiv{color:var(--kupfer); transform:scale(1.12)}
.rail.auf-ink .rail__linie{background:rgba(243,238,231,.2)}
.rail.auf-ink .rail__punkte{color:var(--nebel-hell)}
.rail::before{ /* Scrim, damit die Labels auf Fotos lesbar bleiben */
  content:''; position:absolute; inset:-16px -20px; z-index:-1; border-radius:100px;
  background:linear-gradient(to left, rgba(20,17,15,.42), transparent 85%); opacity:0;
  transition:opacity .5s var(--ease);
}
.rail.auf-ink::before{opacity:1}
/* über Vollbild-Sektionen weicht die Rail dem Inhalt */
.rail.ist-versteckt{opacity:0 !important}

/* =========================================================
   1 · HERO
   ========================================================= */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--kopf-h) 0 var(--s4); overflow:hidden}
.hero__buehne{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden}
.hero__skizze{
  position:absolute; width:min(1250px,118vw); max-width:none; top:46%; left:50%;
  transform:translate(-50%,-50%); mix-blend-mode:multiply; opacity:.5;
  will-change:transform;
}
.hero__typo{
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); line-height:.82; text-align:center; width:100%;
  color:var(--kupfer); pointer-events:none; user-select:none;
}
.ht-zeile{display:block; font-size:clamp(4.5rem,1rem + 17.5vw,18rem); letter-spacing:-.02em; overflow:hidden; padding-bottom:.04em}
.ht-zeile span{display:inline-block; will-change:transform; transform:translateY(115%)}
.hero__frei{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  height:min(80vh,780px); display:flex; align-items:flex-end; will-change:transform;
}
.hero__frei img{height:100%; width:auto; max-width:none; object-fit:contain; filter:drop-shadow(0 40px 70px rgba(20,17,15,.18))}
.hero__vignette{position:absolute; inset:0; background:radial-gradient(120% 75% at 50% 30%, transparent 40%, rgba(243,238,231,.85) 100%); pointer-events:none}

.hero__unten{
  position:relative; z-index:5; display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); padding:0 var(--rand); flex-wrap:wrap;
}
.hero__claim{max-width:34rem}
.hero__satz{font-family:var(--serif); font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem); line-height:1.02; margin-bottom:var(--s3)}
.hero__pillen{display:flex; gap:.7rem; flex-wrap:wrap}
.hero__hint{position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--nebel); display:flex; align-items:center; gap:.6rem; transition:opacity .5s}
.hero__hint span{width:1px; height:28px; background:currentColor; display:block; animation:tropf 2.2s infinite}
@keyframes tropf{0%{transform:scaleY(.2); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(.2); transform-origin:bottom}}
.hero__hint.ist-weg{opacity:0}

/* ---------- Chat ---------- */
.chat{
  width:min(360px,100%); background:rgba(255,255,255,.72); backdrop-filter:blur(18px);
  border:1px solid rgba(20,17,15,.09); border-radius:20px; padding:1rem;
  box-shadow:0 24px 60px -30px rgba(20,17,15,.4);
}
.chat__kopf{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem}
.chat__kopf img{width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:50% 20%}
.chat__kopf strong{display:block; font-size:.85rem; font-weight:600}
.chat__status{font-size:.7rem; color:var(--nebel); display:flex; align-items:center; gap:.35rem}
.chat__status::before{content:''; width:6px; height:6px; border-radius:50%; background:#5FA777}
.chat__lauf{display:flex; flex-direction:column; gap:.45rem; min-height:2.4rem; margin-bottom:.7rem}
.blase{
  font-size:.85rem; line-height:1.45; padding:.55rem .8rem; border-radius:14px; max-width:88%;
  opacity:0; transform:translateY(8px);
}
.blase--du{background:var(--tinte); color:var(--papier); align-self:flex-end; border-bottom-right-radius:4px}
.blase--sie{background:rgba(180,122,91,.14); border-bottom-left-radius:4px}
.blase--tipp{display:flex; gap:4px; align-items:center; width:fit-content}
.blase--tipp i{width:5px; height:5px; border-radius:50%; background:var(--kupfer); display:block; animation:tipp 1.2s infinite}
.blase--tipp i:nth-child(2){animation-delay:.15s}
.blase--tipp i:nth-child(3){animation-delay:.3s}
@keyframes tipp{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.chat__chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chat__chips button{
  font-size:.74rem; padding:.4rem .75rem; border:1px solid rgba(20,17,15,.16); border-radius:100px;
  transition:background .3s, color .3s, border-color .3s;
}
.chat__chips button:hover{background:var(--tinte); color:var(--papier); border-color:var(--tinte)}
.chat__chips button.ist-weg{display:none}

/* =========================================================
   2 · MANIFEST
   ========================================================= */
.manifest{
  padding:var(--s7) var(--rand); display:grid; gap:var(--s5);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center;
}
.manifest__portrait{overflow:hidden; border-radius:2px; aspect-ratio:3/4; max-height:78vh}
.manifest__portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter:grayscale(1) contrast(1.06); clip-path:inset(100% 0 0 0); will-change:clip-path}
.manifest__inhalt{max-width:38rem}
.slice{position:relative; font-family:var(--serif); font-size:clamp(2.6rem,1.5rem + 4.6vw,5.4rem); line-height:1; margin-bottom:var(--s4); color:var(--papier)}
.sl{display:block; height:.3335em; overflow:hidden; will-change:transform}
.sl b{display:block; font-weight:inherit; transform:translateY(calc(var(--i) * -.3335em))}
.slice__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.worte{font-size:clamp(1.05rem,.98rem + .5vw,1.35rem); line-height:1.62; margin-bottom:var(--s4)}
.worte .w{color:rgba(243,238,231,.22); transition:color .25s linear}
.worte .w.an{color:var(--papier)}
.durch{display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--s4)}
.durch li{font-size:1.05rem; color:var(--nebel-hell)}
.durch s{text-decoration:none; position:relative; display:inline-block}
.durch s::after{content:''; position:absolute; left:-.1em; right:-.1em; top:52%; height:1.5px; background:var(--kupfer); transform:scaleX(var(--sx,0)); transform-origin:left}
.manifest__pointe{font-family:var(--serif); font-size:clamp(1.3rem,1rem + 1.2vw,2rem); color:var(--kupfer-licht); font-style:italic}

/* =========================================================
   3 · KAMERAFAHRT
   ========================================================= */
.fahrt{height:520vh; background:var(--tinte)}
.fahrt__buehne{position:sticky; top:0; height:100svh; overflow:hidden}
.fahrt__szenen{position:absolute; inset:0}
.szene{position:absolute; inset:0; margin:0; opacity:0; will-change:opacity, transform}
.szene:first-child{opacity:1}
.szene img{width:100%; height:100%; object-fit:cover; will-change:transform}
.fahrt__flor{position:absolute; inset:0; background:linear-gradient(to right, rgba(20,17,15,.88) 0%, rgba(20,17,15,.5) 42%, rgba(20,17,15,.15) 70%, rgba(20,17,15,.45) 100%)}
.fahrt__texte{position:absolute; inset:0; display:grid; align-content:center; padding:0 var(--rand); pointer-events:none}
.ktext{position:absolute; left:var(--rand); top:50%; transform:translateY(-50%); max-width:30rem; color:var(--papier); opacity:0}
.ktext__nr{font-family:var(--serif); font-size:.9rem; color:var(--kupfer-licht); letter-spacing:.2em; display:block; margin-bottom:.9rem}
.ktext h3{font-family:var(--serif); font-size:clamp(2.4rem,1.6rem + 3vw,4.4rem); line-height:1; margin-bottom:1rem}
.ktext p{color:rgba(243,238,231,.78); font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.fahrt__index{position:absolute; left:var(--rand); bottom:2.2rem; color:rgba(243,238,231,.5); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase}
.fi-titel{display:block; color:var(--kupfer-licht); margin-bottom:.7rem}
.fahrt__index ol{display:flex; gap:1.1rem; flex-wrap:wrap; margin-bottom:.7rem; counter-reset:fi}
.fahrt__index li{counter-increment:fi; transition:color .4s var(--ease)}
.fahrt__index li::before{content:counter(fi,decimal-leading-zero) ' '; opacity:.5}
.fahrt__index li.ist-aktiv{color:var(--papier)}
.fi-leiste{width:min(360px,40vw); height:1px; background:rgba(243,238,231,.2); position:relative}
.fi-leiste i{position:absolute; inset:0 auto 0 0; width:0; background:var(--kupfer-licht)}

/* =========================================================
   4 · ZAHLEN
   ========================================================= */
.zahlen{padding:var(--s7) var(--rand); overflow:hidden; text-align:center}
.zahlen__gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s4); position:relative; z-index:2}
.zahl__n{display:block; font-family:var(--serif); font-size:clamp(3.4rem,2rem + 5vw,6.4rem); line-height:1; color:var(--papier)}
.zahl__l{display:block; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel-hell); margin-top:.6rem}
.zahlen__fuss{margin-top:var(--s5); font-size:.85rem; color:var(--nebel-hell); position:relative; z-index:2}
.zahlen__geist{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; overflow:hidden}
.zahlen__geist span{font-family:var(--serif); font-size:min(58vw,52rem); line-height:1; color:rgba(243,238,231,.035); will-change:transform}

/* =========================================================
   5 · LEISTUNGEN
   ========================================================= */
.leist{padding:var(--s7) 0 0}
.abschnitt{padding:0 var(--rand); margin-bottom:var(--s5); max-width:46rem}
.leist__stapel{padding:0 var(--rand) var(--s6)}
.karte{
  position:sticky; top:calc(var(--kopf-h) + 3vh);
  min-height:min(74vh,620px); border-radius:26px; padding:clamp(1.75rem,3.5vw,3.5rem);
  background:var(--creme); border:1px solid rgba(20,17,15,.08);
  display:grid; align-content:center; gap:1rem; overflow:hidden; margin-bottom:2.4rem;
  box-shadow:0 40px 80px -60px rgba(20,17,15,.6); will-change:transform;
}
.karte::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:46%;
  background-image:var(--bild); background-size:cover; background-position:center;
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%); opacity:.92;
}
.karte::before{
  content:''; position:absolute; right:0; top:0; bottom:0; width:46%; z-index:2;
  /* Winkel folgt dem diagonalen Anschnitt des Bildes darunter */
  background:linear-gradient(104deg, var(--creme) 32%, rgba(232,223,211,0) 66%);
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.karte > *{position:relative; z-index:3; max-width:min(30rem,54%)}
.karte__nr{font-family:var(--serif); color:var(--kupfer-tief); font-size:1rem; letter-spacing:.2em}
.karte h3{font-family:var(--serif); font-size:clamp(1.9rem,1.3rem + 2.2vw,3.2rem); line-height:1.02}
.karte p{color:#4A423B}
.karte ul{display:flex; flex-direction:column; gap:.45rem; margin-top:.6rem}
.karte li{font-size:.9rem; color:#5C534B; padding-left:1.1rem; position:relative}
.karte li::before{content:''; position:absolute; left:0; top:.62em; width:.5rem; height:1px; background:var(--kupfer)}
.karte:nth-child(even){background:#EFE8DE}
.karte:nth-child(even)::before{background:linear-gradient(104deg, #EFE8DE 32%, rgba(239,232,222,0) 66%)}

/* =========================================================
   6 · OBJEKTE
   ========================================================= */
.objekte{height:340vh; background:var(--creme)}
.objekte__pin{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; gap:var(--s4)}
.objekte__kopf{padding:0 var(--rand); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.objekte__kopf .eyebrow{margin-bottom:.45rem} /* Unterkanten fluchten mit der H2 */
.objekte__kopf h2{font-family:var(--serif); font-size:clamp(2.2rem,1.4rem + 3.4vw,4.4rem); line-height:.98}
.objekte__hinweis{font-size:.8rem; color:var(--nebel); letter-spacing:.08em; text-transform:uppercase}
.band{display:flex; gap:1.6rem; padding:0 var(--rand); will-change:transform}
.obj{
  flex:0 0 clamp(260px,26vw,360px); background:var(--papier); border-radius:18px; overflow:hidden;
  border:1px solid rgba(20,17,15,.07); display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.obj:hover{transform:translateY(-8px); box-shadow:0 30px 60px -40px rgba(20,17,15,.6)}
.obj__bild{position:relative; aspect-ratio:4/3; overflow:hidden}
.obj__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.obj:hover .obj__bild img{transform:scale(1.06)}
.obj__neu{position:absolute; top:.8rem; left:.8rem; background:var(--kupfer); color:#fff; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .7rem; border-radius:100px}
.obj__kopf{padding:1.1rem 1.2rem .6rem}
.obj__kopf h3{font-size:1rem; font-weight:600; line-height:1.3; letter-spacing:0}
.obj__ort{font-size:.8rem; color:var(--nebel); display:block; margin-top:.25rem}
.obj__daten{display:flex; gap:1.1rem; padding:.6rem 1.2rem 1.2rem; margin-top:auto; border-top:1px solid rgba(20,17,15,.07); padding-top:.9rem}
.obj__daten dt{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel)}
.obj__daten dd{margin:0; font-size:.95rem; font-weight:600; font-family:var(--serif)}
.obj--cta{background:var(--tinte); color:var(--papier); justify-content:center; padding:2rem; gap:.8rem}
.obj--cta h3{font-family:var(--serif); font-size:1.8rem}
.obj--cta p{font-size:.9rem; color:var(--nebel-hell)}
.obj--cta .pille{align-self:flex-start; margin-top:.4rem}

/* =========================================================
   7 · BEWERTUNG
   ========================================================= */
.wert{padding:var(--s7) var(--rand); text-align:center; overflow:hidden}
.wert__kopf{max-width:56rem; margin:0 auto var(--s6)}
.wert__frage{font-family:var(--serif); font-size:clamp(2rem,1.2rem + 4vw,4.6rem); line-height:1.05; display:flex; flex-wrap:wrap; gap:.28em; align-items:center; justify-content:center}
.wert__zeile2{flex-basis:100%} /* Umbruch fest — sonst springt die Zeile beim Scrub */
.wert__bild{display:inline-block; width:clamp(80px,10vw,168px); height:clamp(50px,6.2vw,104px); border-radius:100px; overflow:hidden; vertical-align:middle}
.wert__bild img{width:100%; height:100%; object-fit:cover; will-change:transform}
.wert__lead{margin-top:var(--s3); color:#544B44; max-width:34rem; margin-left:auto; margin-right:auto}
.wert__band{position:relative; max-width:1000px; margin:0 auto var(--s6)}
.wert__linie{width:100%; height:120px; color:var(--kupfer); overflow:visible}
#wertPfad{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
/* Stationen sitzen auf der Kurve — preserveAspectRatio="none" streckt sie mit */
#wertPunkte circle{fill:var(--papier); stroke:var(--kupfer); stroke-width:2; opacity:0; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center}
.wert__schritte{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:-.6rem}
.wert__schritte li{opacity:0; transform:translateY(14px)}
.ws-nr{display:block; font-family:var(--serif); color:var(--kupfer-tief); font-size:.85rem; letter-spacing:.16em; margin-bottom:.4rem}
.wert__schritte strong{display:block; font-size:1.05rem; font-weight:600; margin-bottom:.2rem}
.wert__schritte span:last-child{font-size:.82rem; color:var(--nebel)}
.wert__anzeige{background:var(--creme); border-radius:24px; padding:var(--s4); max-width:44rem; margin:0 auto; display:grid; gap:1rem; justify-items:center}
.wert__label{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--nebel)}
.wert__spanne{display:flex; align-items:baseline; gap:.5rem; font-family:var(--serif); font-size:clamp(2rem,1.2rem + 3vw,3.6rem); line-height:1}
.wert__spanne i{color:var(--kupfer); font-style:normal}
.wert__spanne em{font-size:.5em; color:var(--kupfer)}

/* =========================================================
   8 · REGION
   ========================================================= */
.region{padding:var(--s7) var(--rand); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5); align-items:center}
.region__text > p{max-width:32rem; margin:var(--s3) 0 var(--s4); color:#544B44}
.region__liste{display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-family:var(--serif); font-size:clamp(1.2rem,.9rem + 1.2vw,2rem); line-height:1.25; color:rgba(20,17,15,.28)}
.region__liste li{cursor:default; transition:color .35s var(--ease)}
.region__liste li.ist-an{color:var(--tinte)}
.region__liste li.ist-heim{color:var(--kupfer)}
.karte-svg{width:100%; height:auto; overflow:visible}
.karte__umriss{fill:rgba(20,17,15,.04); stroke:rgba(20,17,15,.18); stroke-width:1.2; stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.pin{fill:var(--kupfer); opacity:0}
.pin--heim{fill:var(--tinte)}
.linie{stroke:var(--kupfer); stroke-width:1; opacity:.4; stroke-dasharray:var(--l); stroke-dashoffset:var(--l)}

/* =========================================================
   9 · ÜBER MICH
   ========================================================= */
.ueber{height:300vh; position:relative}
.ueber__pin{position:sticky; top:0; height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--s5); padding:var(--kopf-h) var(--rand) 0}
.ueber__bilder{position:relative; aspect-ratio:3/4; max-height:62vh; border-radius:3px; overflow:hidden; justify-self:center; width:100%}
.ub{position:absolute; inset:0; margin:0; clip-path:inset(0 0 0 0)}
.ub:not(:first-child){clip-path:inset(100% 0 0 0)}
.ub img{width:100%; height:100%; object-fit:cover}
.ueber__texte{position:relative; min-height:24rem}
.ut{position:absolute; top:2.9rem; left:0; right:0; opacity:0} /* unter dem Eyebrow */
.ut:first-of-type{opacity:1}
.ut h2{font-family:var(--serif); font-size:clamp(2.4rem,1.6rem + 3.6vw,5rem); line-height:1; margin-bottom:1rem}
.ut p{max-width:30rem; color:#544B44; font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.hunde{
  position:absolute; right:calc(var(--rand) + 1rem); bottom:6vh; z-index:5;
  width:min(260px,44vw); background:var(--papier); border-radius:16px; padding:.7rem;
  box-shadow:0 30px 60px -35px rgba(20,17,15,.7); display:flex; gap:.75rem; align-items:center;
  transform:rotate(-4deg) translateY(40px); opacity:0; border:1px solid rgba(20,17,15,.07);
}
.hunde img{width:64px; height:64px; border-radius:12px; object-fit:cover; flex:0 0 auto}
.hunde strong{display:block; font-size:.9rem}
.hunde span{font-size:.72rem; color:var(--nebel); letter-spacing:.1em; text-transform:uppercase}

/* =========================================================
   10 · STIMMEN
   ========================================================= */
.stimmen{padding:var(--s7) var(--rand); text-align:center; overflow:hidden}
.stimmen__buehne{position:relative; max-width:56rem; margin:0 auto; min-height:16rem; display:grid; place-items:center}
.stimme{position:absolute; inset:0; display:grid; place-content:center; gap:var(--s3); opacity:0; pointer-events:none}
.stimme.ist-aktiv{opacity:1; pointer-events:auto}
.stimme blockquote{margin:0; font-family:var(--serif); font-size:clamp(1.5rem,1rem + 2.2vw,2.9rem); line-height:1.18; text-indent:-.42em}
.stimme blockquote::before{content:'„'; color:var(--kupfer)}
.stimme blockquote::after{content:'“'; color:var(--kupfer)}
.stimme cite{font-style:normal; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel)}
.stimme cite span{display:block; font-size:.72rem; margin-top:.25rem; color:var(--kupfer-tief)}
.stimmen__marquee{position:absolute; left:50%; top:auto; bottom:-2.5rem; transform:translateX(-50%); width:120vw; display:flex; gap:2rem; pointer-events:none; z-index:-1; white-space:nowrap; opacity:.04}
.stimmen__marquee span{font-family:var(--serif); font-size:min(16vw,11rem); line-height:1; animation:lauf 38s linear infinite; color:var(--kupfer)}
@keyframes lauf{to{transform:translateX(-100%)}}
.stimmen__punkte{display:flex; gap:.5rem; justify-content:center; margin-top:var(--s4)}
.stimmen__punkte button{width:28px; height:2px; background:rgba(20,17,15,.18)}
.stimmen__punkte button.ist-aktiv{background:var(--kupfer)}

/* =========================================================
   11 · KONTAKT
   ========================================================= */
.kontakt{padding:var(--s7) var(--rand)}
.kontakt__raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--s6); align-items:start; max-width:1300px; margin:0 auto}
.kontakt__lead{margin:var(--s3) 0 var(--s4); color:var(--nebel-hell); max-width:30rem}
.kontakt__daten{display:grid; gap:1.1rem}
.kontakt__daten li{font-size:1rem}
.kontakt__daten span{display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kupfer-licht); margin-bottom:.25rem}
.kontakt__daten a{text-decoration:none; border-bottom:1px solid rgba(243,238,231,.25)}
.formular{display:grid; gap:.9rem}
.tabs{display:flex; gap:.4rem; margin-bottom:.6rem; flex-wrap:wrap}
.tabs button{font-size:.8rem; padding:.5rem 1rem; border-radius:100px; border:1px solid rgba(243,238,231,.22); transition:background .35s, color .35s, border-color .35s}
.tabs button.ist-aktiv{background:var(--kupfer); border-color:var(--kupfer); color:#fff}
.feld{position:relative}
.feld input,.feld textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(243,238,231,.22);
  padding:1.35rem 0 .55rem; color:var(--papier); font:inherit; font-size:1rem; border-radius:0;
  transition:border-color .4s var(--ease);
}
.feld textarea{resize:vertical}
.feld label{
  position:absolute; left:0; top:1.3rem; color:var(--nebel-hell); font-size:1rem; pointer-events:none;
  transition:transform .35s var(--ease), font-size .35s var(--ease), color .35s var(--ease); transform-origin:left top;
}
.feld input:focus,.feld textarea:focus{outline:none; border-bottom-color:var(--kupfer-licht)}
.feld input:focus + label,.feld textarea:focus + label,
.feld input:not(:placeholder-shown) + label,.feld textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.25rem) scale(.72); color:var(--kupfer-licht);
}
.pille--magnet{justify-self:start; margin-top:.6rem; will-change:transform}
.formular__hinweis{font-size:.72rem; color:var(--nebel); margin-top:.2rem}

/* =========================================================
   FOOTER
   ========================================================= */
.fuss{position:relative; z-index:1; background:var(--tinte); color:var(--papier); min-height:88svh; display:grid; align-content:center; padding:var(--s6) var(--rand) var(--s4); overflow:hidden}
.fuss__raster{position:absolute; inset:0; width:100%; height:100%; opacity:.75}
.fuss__inhalt{position:relative; z-index:2; text-align:center; display:grid; gap:var(--s3); justify-items:center}
.fuss__frage{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,1rem + 1vw,1.9rem); color:var(--kupfer-licht)}
.fuss__wort{
  font-family:var(--serif); font-size:min(30vw,20rem); line-height:.85; letter-spacing:-.03em;
  text-decoration:none; display:block; transition:color .5s var(--ease);
}
.fuss__wort:hover{color:var(--kupfer-licht)}
.fuss__zeilen{display:grid; gap:.55rem; font-size:.85rem; color:var(--nebel-hell); margin-top:var(--s3)}
.fuss__zeilen span{color:var(--papier)}
.fuss__zeilen a{text-decoration:none}
.fuss__zeilen a:hover{color:var(--kupfer-licht)}
.fuss__recht{display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; font-size:.75rem; margin-top:.5rem; opacity:.7}

/* =========================================================
   CURSOR + KORN
   ========================================================= */
.cursor{position:fixed; top:0; left:0; width:14px; height:14px; z-index:999; pointer-events:none; mix-blend-mode:difference; opacity:0; will-change:transform}
.cursor span{display:block; width:100%; height:100%; border-radius:50%; background:#fff; transition:transform .3s var(--ease)}
.cursor.ist-gross span{transform:scale(3.2)}
.korn{
  position:fixed; inset:0; z-index:998; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   RESPONSIV
   ========================================================= */
@media (max-width:1100px){
  .manifest{grid-template-columns:minmax(0,1fr)}
  .manifest__portrait{max-height:46vh; order:-1}
  .region{grid-template-columns:minmax(0,1fr)}
  .kontakt__raster{grid-template-columns:minmax(0,1fr); gap:var(--s5)}
  .rail{display:none}
}
@media (max-width:860px){
  :root{--kopf-h:64px}
  .kopf__nav,.kopf__cta{display:none}
  .kopf__burger{display:block}
  .cursor{display:none}
  /* Hero mobil: Bühne oben, Text im Fluss darunter — kein Overlay */
  .hero{min-height:auto; padding-bottom:var(--s4); display:block}
  .hero__buehne{position:relative; inset:auto; height:58svh; min-height:340px; place-items:end center}
  .hero__frei{height:80%; bottom:0}
  .hero__skizze{width:165vw; opacity:.45; top:40%}
  .hero__typo{top:38%}
  .ht-zeile{font-size:clamp(3.2rem,17vw,7rem)}
  .hero__vignette{background:radial-gradient(120% 70% at 50% 25%, transparent 45%, var(--papier) 100%)}
  .hero__unten{flex-direction:column; align-items:stretch; gap:var(--s3); margin-top:var(--s3)}
  .hero__claim{max-width:100%}
  .chat{width:100%}
  .hero__hint{display:none}
  .fahrt{height:460vh}
  .fahrt__flor{background:linear-gradient(to top, rgba(20,17,15,.92) 12%, rgba(20,17,15,.35) 60%)}
  .ktext{top:auto; bottom:8rem; transform:none; right:var(--rand)}
  .fahrt__index{bottom:1.4rem}
  .fahrt__index ol{display:none}
  .karte{position:static; min-height:auto; padding:1.5rem; margin-bottom:1.2rem}
  .karte::after,.karte::before{width:100%; clip-path:none; opacity:.13}
  .karte::before{background:linear-gradient(to bottom, var(--creme) 25%, rgba(232,223,211,.4) 100%)}
  .karte > *{max-width:100%}
  .objekte{height:auto}
  .objekte__pin{position:static; height:auto; padding:var(--s5) 0}
  .band{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; -webkit-overflow-scrolling:touch; transform:none !important}
  .obj{scroll-snap-align:center; flex:0 0 78vw}
  .wert__schritte{grid-template-columns:repeat(2,1fr); gap:var(--s3); margin-top:0}
  .wert__linie{display:none}
  .ueber{height:auto}
  .ueber__pin{position:static; height:auto; grid-template-columns:minmax(0,1fr); padding-top:var(--s5); padding-bottom:var(--s5)}
  .ueber__bilder{max-height:56vh}
  .ub:not(:first-child){display:none}
  .ueber__texte{min-height:0; display:grid; gap:var(--s4)}
  .ut{position:static; opacity:1 !important}
  .hunde{position:relative; right:auto; bottom:auto; margin:var(--s3) var(--rand) 0; transform:rotate(-3deg); opacity:1}
  .stimmen__buehne{min-height:22rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .intro{display:none}
  body.lade{overflow:auto}
  .ht-zeile span{transform:none !important}
  .szene{opacity:1 !important; position:relative; height:60vh}
  .fahrt{height:auto}
  .fahrt__buehne{position:static; height:auto}
  .fahrt__szenen{position:static}
  .fahrt__texte{position:static; padding:var(--s4) var(--rand)}
  .ktext{position:static; opacity:1 !important; transform:none; margin-bottom:var(--s4)}
  .ub:not(:first-child){display:none}
  .ut{position:static; opacity:1 !important}
  .manifest__portrait img{clip-path:none !important}
  .worte .w{color:var(--papier) !important}
  .objekte{height:auto}
  .objekte__pin{position:static; height:auto}
  .band{overflow-x:auto; transform:none !important}
  .ueber{height:auto}
  .ueber__pin{position:static; height:auto}
  .hunde{opacity:1; transform:none}
}