/* ==========================================================================
   CETRUS Real Estate Advisory
   Bildsprache: Architektenzeichnung. Haarlinien, Passkreuze, Blattbeschriftung.
   Zwei Schriften, wie in der CI: Didone für Überschriften, Cormorant für Text.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* CI, unverändert */
  --green:        #1E3125;
  --beige:        #CFC6B5;
  --terra:        #CB6843;
  --taupe:        #7D7A70;

  /* abgeleitet, Kontrast gegen WCAG AA 4.5:1 geprüft */
  --green-deep:   #16241B;
  --offwhite:     #F4F1EA;
  --terra-ink:    #863F25;
  --terra-btn:    #BD5934;
  --taupe-ink:    #56534D;

  --line-dark:    rgba(30,49,37,.22);
  --line-dark-2:  rgba(30,49,37,.42);
  --line-light:   rgba(207,198,181,.24);
  --line-light-2: rgba(207,198,181,.5);

  --display: "Bodoni Moda", "Didot", "Bodoni MT", "Times New Roman", serif;
  --serif:   "Cormorant Garamond", "Cormorant", "Garamond", Georgia, serif;

  --gutter: clamp(22px, 5vw, 84px);
  --maxw: 1320px;
  --rail: 68px;
  --lock: clamp(250px, 58vw, 800px);
  --ease: cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--beige);
  color:var(--green);
  font-family:var(--serif);
  font-size:clamp(18px,1.35vw,21px);
  line-height:1.6;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
::selection{background:var(--terra);color:var(--offwhite)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* --------------------------------------------------------------------------
   DISPLAY TYPE
   A Didone's hairlines thin out as the optical size grows, which is exactly
   what made the headings hard to read on the dark ground. We pin the optical
   size to a TEXT value so the thin strokes stay solid at any display size,
   and we set headings in spaced capitals, which is where a Didone is most
   legible and which matches the wordmark.
   -------------------------------------------------------------------------- */
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}

h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 16;
  font-optical-sizing:none;
  font-weight:600;
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.1;
  letter-spacing:.05em;
  text-transform:uppercase;
  max-width:21ch;
}
.sec--dark h2{font-weight:600;color:var(--offwhite)}
.sec--light h2{font-weight:600;color:var(--green)}

h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 14;
  font-optical-sizing:none;
  font-weight:600;
  font-size:clamp(20px,2vw,25px);
  line-height:1.22;
  letter-spacing:.015em;
}

.label{
  font-family:var(--display);
  font-variation-settings:"opsz" 8;
  font-optical-sizing:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.4;
}

.lead{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,33px);
  line-height:1.32;
  font-weight:500;
  max-width:40ch;
  margin:26px 0 0;
}
.sec--light .lead{color:var(--taupe-ink)}
.sec--dark  .lead{color:var(--beige)}

p{margin:0 0 1em;max-width:52ch}
p:last-child{margin-bottom:0}
p,li{hyphens:auto;-webkit-hyphens:auto}
.lead,.pos__close,.hero__claim .big,h2,h3{hyphens:none;-webkit-hyphens:none}
p,li,h1,h2,h3,.word,.ttl,.card__city{overflow-wrap:break-word}
strong,b{font-weight:600}
a{color:inherit;text-decoration:none}

/* ---------- layout ---------- */
.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
@media (min-width:1080px){.shell{padding-left:calc(var(--gutter) + var(--rail))}}

.sec{position:relative;padding-block:clamp(78px,11vw,150px);overflow:hidden}
.sec--dark{background:var(--green);color:var(--beige)}
.sec--light{background:var(--beige);color:var(--green)}

.sec::before,.sec::after{
  content:"";position:absolute;width:15px;height:15px;pointer-events:none;opacity:.85;
}
.sec::before{top:22px;left:22px;border-top:1px solid currentColor;border-left:1px solid currentColor}
.sec::after{bottom:22px;right:22px;border-bottom:1px solid currentColor;border-right:1px solid currentColor}
.sec--dark::before,.sec--dark::after{color:var(--line-light-2)}
.sec--light::before,.sec--light::after{color:var(--line-dark-2)}
@media (max-width:640px){.sec::before,.sec::after{display:none}}

.sheet{display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,3.6vw,46px)}
.sheet .n{color:var(--terra)}
.sec--light .sheet .n{color:var(--terra-ink)}
.sheet .t{opacity:.72}
.sheet .dash{
  flex:1 1 auto;height:1px;background:currentColor;opacity:.26;
  transform-origin:left;transition:transform 1100ms var(--ease) 120ms;
}
.sheet.armed .dash{transform:scaleX(0)}
.sheet.is-in .dash{transform:scaleX(1)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;background:var(--green-deep);color:var(--offwhite);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(90px,14vh,140px) clamp(76px,11vh,120px);overflow:hidden;
}
.hero__grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__grid line{stroke:var(--beige);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.13}
.hero__inner{position:relative;z-index:2}

/* Lockup, rebuilt from the supplied artwork. Measured from the 1254px original:
   subline runs 8% WIDER than the wordmark and starts slightly left of it, a
   vertical terracotta bar sits at the far left, the horizontal rule is inset.
   Every glyph is its own span so flex can justify each line to an exact width,
   which keeps the spacing right whatever the font falls back to. */
.mark{position:relative;width:var(--lock);padding-left:0}
.mark__bar{
  position:absolute;
  left:calc(var(--lock) * -0.0845);
  top:calc(var(--lock) * -0.035);
  width:calc(var(--lock) * 0.0107);
  height:calc(var(--lock) * 0.322);
  background:var(--terra);
  transform-origin:top;
}
.mark__word{
  font-family:var(--display);
  font-variation-settings:"opsz" 30;
  font-optical-sizing:none;
  font-weight:400;
  font-size:calc(var(--lock) * 0.2);
  line-height:1;margin:0;
  display:flex;justify-content:space-between;
  width:100%;color:var(--offwhite);
}
.mark__word span{display:inline-block}
.mark__sub{
  font-family:var(--display);
  font-variation-settings:"opsz" 10;
  font-optical-sizing:none;
  font-weight:500;
  font-size:calc(var(--lock) * 0.057);
  line-height:1;text-transform:uppercase;color:var(--beige);
  display:flex;justify-content:space-between;
  width:108%;margin-left:-1.7%;
  margin-top:calc(var(--lock) * 0.055);
}
.mark__sub span{display:inline-block}
.mark__sub .sp{width:0}
.mark__rule{
  height:calc(var(--lock) * 0.0107);
  width:calc(var(--lock) * 0.72);
  margin-left:calc(var(--lock) * 0.144);
  margin-top:calc(var(--lock) * 0.055);
  background:var(--terra);transform-origin:left;
}

.hero__claim{margin-top:clamp(40px,7vh,84px);max-width:40ch}
.hero__claim .big{
  font-family:var(--serif);font-size:clamp(23px,2.9vw,36px);line-height:1.34;
  color:var(--offwhite);margin:0 0 16px;max-width:none;font-weight:500;
}
.hero__claim .small{
  font-family:var(--display);
  font-variation-settings:"opsz" 10;
  font-optical-sizing:none;
  font-size:clamp(10px,1.15vw,13px);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--beige);margin:0;max-width:none;
}

.hero__foot{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(24px,4vh,42px);
  display:flex;justify-content:flex-end;align-items:flex-end;gap:20px;z-index:2;
}
@media (min-width:1080px){.hero__foot{left:calc(var(--gutter) + var(--rail))}}
.hero__foot .label{color:var(--beige);opacity:.75}
.scroll-cue{display:flex;align-items:center;gap:11px;color:var(--beige)}
.scroll-cue .bar{
  display:block;width:1px;height:42px;background:var(--beige);opacity:.4;
  position:relative;overflow:hidden;
}
.scroll-cue .bar::after{
  content:"";position:absolute;inset:0;background:var(--terra);
  animation:cue 2600ms var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}100%{transform:translateY(100%)}}
@media (max-width:640px){.hero__foot .label.hide-s{display:none}}

/* Entrance only. Fill mode "both" hides each element during its delay and holds
   the end state afterwards, so nothing is ever pinned at opacity:0 by a standing
   rule. If the animation never runs, the hero simply renders finished. */
.js-ready .mark__word span{animation:rise 820ms var(--ease) both}
.js-ready .mark__sub span{animation:rise 760ms var(--ease) 640ms both}
.js-ready .mark__rule{animation:draw 900ms var(--ease) 820ms both}
.js-ready .mark__bar{animation:drawY 800ms var(--ease) 700ms both}
.js-ready .hero__claim .big{animation:rise 900ms var(--ease) 960ms both}
.js-ready .hero__claim .small{animation:rise 900ms var(--ease) 1090ms both}
.js-ready .hero__grid line{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:plot 1500ms var(--ease) forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes plot{to{stroke-dashoffset:0}}

/* ---------- rail ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;display:none;pointer-events:none}
@media (min-width:1080px){.rail{display:block}}
.rail__line{position:absolute;left:30px;top:14vh;bottom:14vh;width:1px;background:var(--line-light)}
.rail__items{position:absolute;left:0;top:14vh;bottom:14vh;width:100%;display:flex;flex-direction:column;justify-content:space-between}
.rail__i{position:relative;height:1px;pointer-events:auto;display:block;border:0;background:none;padding:0;cursor:pointer}
.rail__i::before{
  content:"";position:absolute;left:24px;top:0;width:13px;height:1px;background:var(--line-light-2);
  transition:width 460ms var(--ease),background-color 460ms var(--ease),left 460ms var(--ease);
}
.rail__i span{
  position:absolute;left:52px;top:50%;transform:translateY(-50%) translateX(-6px);
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--beige);white-space:nowrap;opacity:0;
  transition:opacity 340ms var(--ease),transform 340ms var(--ease);
}
.rail__i:hover span{opacity:.7;transform:translateY(-50%) translateX(0)}
.rail__i.on::before{left:18px;width:25px;background:var(--terra)}
.rail__i.on span{opacity:1;transform:translateY(-50%) translateX(0)}
.rail.on-light .rail__line{background:var(--line-dark)}
.rail.on-light .rail__i::before{background:var(--line-dark-2)}
.rail.on-light .rail__i span{color:var(--green)}
.rail.on-light .rail__i.on::before{background:var(--terra-ink)}

.prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--terra);transform:scaleX(0);transform-origin:left;z-index:60}
@media (min-width:1080px){.prog{display:none}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px var(--gutter);background:rgba(22,36,27,.94);
  border-bottom:1px solid var(--line-light);
  transform:translateY(-104%);transition:transform 520ms var(--ease);
}
.nav.show{transform:translateY(0)}
@supports (backdrop-filter:blur(6px)){.nav{background:rgba(22,36,27,.82);backdrop-filter:blur(8px)}}
.nav__mark{
  font-family:var(--display);font-variation-settings:"opsz" 14;font-optical-sizing:none;
  font-size:15px;font-weight:500;letter-spacing:.3em;color:var(--offwhite);text-indent:.3em;
}
.nav__links{display:none;gap:30px;align-items:center}
@media (min-width:860px){.nav__links{display:flex}}
.nav__links a{
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--beige);position:relative;padding-block:4px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--terra);
  transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease);
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__cta{
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--offwhite);border:1px solid var(--line-light-2);padding:9px 17px;
  transition:background-color 380ms var(--ease),border-color 380ms var(--ease);
}
.nav__cta:hover{background:var(--terra-btn);border-color:var(--terra-btn)}

/* ---------- reveal (sichtbar per Default, JS blendet nur aus, was unten liegt) ---------- */
.rv.armed{opacity:0;transform:translateY(15px)}
.rv.is-in{opacity:1;transform:translateY(0);transition:opacity 760ms var(--ease),transform 760ms var(--ease)}

/* ---------- 01 Positionierung ---------- */
.stack{display:flex;flex-direction:column;border-top:1px solid var(--line-dark);margin-top:clamp(30px,4vw,48px)}
.stack__row{
  display:flex;align-items:baseline;gap:clamp(14px,3vw,38px);
  padding-block:clamp(16px,2.6vw,30px);border-bottom:1px solid var(--line-dark);
}
.stack__row .idx{
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--terra-ink);
  flex:0 0 auto;width:2.6em;
}
.stack__row .word{
  font-family:var(--display);font-variation-settings:"opsz" 18;font-optical-sizing:none;
  font-weight:500;font-size:clamp(26px,5.6vw,66px);line-height:1.04;letter-spacing:.01em;
}
.pos__close{
  margin-top:clamp(26px,3.6vw,44px);font-family:var(--serif);
  font-size:clamp(19px,2vw,25px);line-height:1.4;color:var(--taupe-ink);max-width:46ch;
}

/* ---------- 02 Akkordeon ---------- */
.acc{border-top:1px solid var(--line-light);margin-top:clamp(30px,4vw,48px)}
.acc__item{border-bottom:1px solid var(--line-light)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:20px;background:none;border:0;
  padding:clamp(20px,2.6vw,30px) 0;color:var(--beige);
  font-family:var(--display);font-variation-settings:"opsz" 14;font-optical-sizing:none;
  font-weight:600;font-size:clamp(19px,2.6vw,30px);line-height:1.15;
  letter-spacing:.05em;text-transform:uppercase;text-align:left;
  cursor:pointer;transition:color 380ms var(--ease);
}
.acc__btn .num{
  font-variation-settings:"opsz" 8;font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--terra);flex:0 0 auto;width:2.6em;
}
.acc__btn .ttl{flex:1 1 auto}
.acc__btn .sign{flex:0 0 auto;width:19px;height:19px;position:relative}
.acc__btn .sign::before,.acc__btn .sign::after{content:"";position:absolute;background:var(--terra);transition:transform 440ms var(--ease),opacity 440ms var(--ease)}
.acc__btn .sign::before{left:0;right:0;top:9px;height:1px}
.acc__btn .sign::after{top:0;bottom:0;left:9px;width:1px}
.acc__btn[aria-expanded="true"] .sign::after{transform:scaleY(0);opacity:0}
.acc__btn[aria-expanded="true"],.acc__btn:hover{color:var(--offwhite)}

.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 480ms var(--ease)}
.acc__item.open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden;min-height:0}

/* Zwei Spalten ab 880px. Der Einzug ersetzt die frühere Spacer-Spalte,
   die sich per display:none selbst ausgehebelt hatte. */
.acc__body{
  padding:0 0 clamp(26px,3.4vw,42px);
  display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr;
}
@media (min-width:880px){
  .acc__body{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding-left:calc(2.6em + 20px);
  }
}
.acc__lead{display:flex;flex-direction:column;gap:20px}
.acc__body .intro{
  font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.38;
  color:var(--offwhite);margin:0;max-width:24ch;font-weight:500;
}
.acc__body ul{list-style:none;margin:0;padding:0}
.acc__body li{
  position:relative;padding-left:26px;margin-bottom:.7em;
  font-size:clamp(17px,1.3vw,19.5px);line-height:1.55;color:var(--beige);max-width:40ch;
}
.acc__body li:last-child{margin-bottom:0}
.acc__body li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:1px;background:var(--terra)}
.acc__body .q{
  padding-top:18px;border-top:1px solid var(--line-light);margin:0;
  font-family:var(--serif);font-size:clamp(19px,1.8vw,22px);line-height:1.4;
  color:var(--offwhite);max-width:30ch;font-style:italic;
}
.acc__body .q b{
  display:block;font-family:var(--display);font-variation-settings:"opsz" 8;
  font-optical-sizing:none;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:.6em;
}

/* ---------- 03 Leistungen ---------- */
.svc{border-top:1px solid var(--line-dark);margin-top:clamp(30px,4vw,48px)}
.sec--dark .svc{border-top-color:var(--line-light)}
.svc__i{
  border-bottom:1px solid var(--line-dark);padding-block:clamp(30px,3.6vw,48px);
  display:grid;gap:22px clamp(24px,3.4vw,52px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:880px){
  .svc__i{grid-template-columns:132px minmax(0,1.05fr) minmax(0,1fr)}
}
.sec--dark .svc__i{border-bottom-color:var(--line-light)}
.svc__art{width:132px;max-width:100%}
.dwg{width:100%;height:auto;display:block;overflow:visible}
.dwg .s{fill:none;stroke:var(--taupe-ink);stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.7}
.sec--dark .dwg .s{stroke:var(--beige);opacity:.55}
.dwg .a{stroke:var(--terra);opacity:1}
.dwg .s.armed{stroke-dasharray:1;stroke-dashoffset:1}
.dwg .s.armed.go{animation:plot 1000ms var(--ease) forwards;animation-delay:var(--d,0ms)}

.svc__h{display:flex;flex-direction:column;gap:12px}
.svc__h h3{font-size:clamp(23px,2.8vw,32px);letter-spacing:.055em;text-transform:uppercase}
/* the subtitle takes its colour from the ground it sits on, not from a
   fixed value: this section has moved between light and dark before. */
.svc__h .k{font-family:var(--serif);font-size:clamp(19px,1.9vw,23px);line-height:1.42;margin:0;max-width:28ch}
.sec--light .svc__h .k{color:var(--taupe-ink)}
.sec--dark  .svc__h .k{color:var(--beige)}
.svc ul{list-style:none;margin:0;padding:0}
.svc li{position:relative;padding-left:26px;margin-bottom:.65em;font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;max-width:36ch}
.svc li:last-child{margin-bottom:0}
.svc li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:1px;background:var(--terra)}

/* ---------- 04 Ansatz ---------- */
.why{display:grid;gap:clamp(30px,4vw,44px);grid-template-columns:1fr;margin-top:clamp(34px,4.6vw,60px)}
@media (min-width:900px){.why{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px)}}
.why__i{position:relative;border-top:1px solid var(--line-light);padding-top:26px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.why__n{
  position:absolute;right:-6px;top:6px;
  font-family:var(--display);font-variation-settings:"opsz" 40;font-optical-sizing:none;
  font-weight:400;font-size:clamp(76px,9vw,124px);line-height:.8;
  color:var(--beige);opacity:.09;pointer-events:none;user-select:none;
}
.why__i h3{color:var(--offwhite);max-width:16ch;position:relative;z-index:1}
.why__i p{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--beige);margin:0;max-width:30ch;position:relative;z-index:1}
@media (min-width:900px){
  .why__i:nth-child(2){margin-top:40px}
  .why__i:nth-child(3){margin-top:80px}
}
@media (max-width:899px){
  .why__n{right:0;font-size:clamp(58px,15vw,92px);opacity:.08}
}

/* ---------- 05 Märkte ---------- */
.map{display:grid;gap:clamp(32px,4vw,60px);grid-template-columns:1fr;margin-top:clamp(34px,4.4vw,58px);align-items:start}
@media (min-width:980px){.map{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}}

.map__fig{position:relative;max-width:560px;margin-inline:auto;width:100%}
.map__svg{width:100%;height:auto;display:block;overflow:visible}
.map__net line{stroke:var(--green);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.09}
.map__outline{stroke:var(--taupe-ink);opacity:.6}
.map__outline.armed{stroke-dasharray:4300;stroke-dashoffset:4300}
.map__outline.armed.go{animation:plot 2200ms var(--ease) forwards}

.dot{cursor:pointer}
.dot circle.hit{fill:transparent;stroke:none}
.dot circle.pt{fill:var(--terra);stroke:none;transition:r 380ms var(--ease)}
.dot circle.ring{
  fill:none;stroke:var(--terra);stroke-width:1;transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.4);transition:opacity 420ms var(--ease),transform 420ms var(--ease);
}
.dot text{
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  fill:var(--taupe-ink);opacity:0;transition:opacity 340ms var(--ease);pointer-events:none;
}
.dot:hover circle.pt,.dot:focus-visible circle.pt{r:6}
.dot:hover text,.dot:focus-visible text{opacity:1}
.dot.on circle.pt{fill:var(--green)}
.dot.on circle.ring{opacity:1;transform:scale(1);stroke:var(--green)}
.dot.on text{opacity:1;fill:var(--green)}
.dot.armed{opacity:0}
.dot.armed.go{animation:pop 520ms var(--ease) forwards;animation-delay:var(--d)}
@keyframes pop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

.chips{display:flex;flex-wrap:wrap;gap:4px 20px;margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid var(--line-dark)}
.chip{
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:0;background:none;color:var(--taupe-ink);padding:5px 0;cursor:pointer;position:relative;
  transition:color 320ms var(--ease);
}
.chip::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--terra-ink);
  transform:scaleX(0);transform-origin:left;transition:transform 340ms var(--ease);
}
.chip:hover{color:var(--terra-ink)}
.chip:hover::after{transform:scaleX(1)}
.chip.on{color:var(--green)}
.chip.on::after{transform:scaleX(1);background:var(--green);height:2px}

.card__city{
  font-family:var(--display);font-variation-settings:"opsz" 24;font-optical-sizing:none;
  font-weight:500;font-size:clamp(30px,4.2vw,52px);line-height:1.04;margin:0 0 7px;
  letter-spacing:.02em;max-width:none;
}
.card__sub{color:var(--terra-ink);margin-bottom:30px}
.card__hero{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.card__big{
  font-family:var(--display);font-variation-settings:"opsz" 30;font-optical-sizing:none;
  font-weight:400;font-size:clamp(46px,6.4vw,84px);line-height:.94;
  font-variant-numeric:tabular-nums;color:var(--green);
}
.card__bk{color:var(--taupe-ink)}
.card__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line-dark)}
.card__f{display:flex;flex-direction:column;gap:5px}
.card__f .k{color:var(--taupe-ink)}
.card__f .v{
  font-family:var(--display);font-variation-settings:"opsz" 16;font-optical-sizing:none;
  font-weight:500;font-size:clamp(20px,2.1vw,26px);line-height:1.1;font-variant-numeric:tabular-nums;
}
.card__note{
  border-left:1px solid var(--terra);padding-left:20px;
  font-family:var(--serif);font-size:clamp(19px,2vw,23px);line-height:1.42;
  color:var(--green);margin:0;max-width:36ch;
}
.card__fade{transition:opacity 260ms var(--ease)}
.card__fade.out{opacity:0}

/* ---------- 06 Person ---------- */
.person{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;margin-top:clamp(34px,4.6vw,58px);align-items:start}
@media (min-width:820px){.person{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}}
.person__plate{
  position:relative;aspect-ratio:4/5;max-width:420px;width:100%;
  border:1px solid var(--line-light-2);background:var(--green-deep);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.person__plate img{width:100%;height:100%;object-fit:cover}
.person__plate .mono{
  font-family:var(--display);font-variation-settings:"opsz" 40;font-optical-sizing:none;
  font-size:clamp(52px,7vw,90px);letter-spacing:.16em;text-indent:.16em;color:var(--beige);opacity:.45;
}
.person__plate::after{
  content:attr(data-tag);position:absolute;left:0;bottom:0;
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-deep);background:var(--terra);padding:5px 9px;
}
.person__body h3{color:var(--offwhite);font-size:clamp(26px,3.2vw,38px);letter-spacing:.04em;text-transform:uppercase}
.person__body .role{color:var(--terra);margin:11px 0 24px}
.person__lead{font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.38;color:var(--offwhite);max-width:28ch;margin-bottom:.8em}
.person__body p{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--beige);max-width:42ch}
.person .contact{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:8px 30px}
.person .contact a{font-family:var(--serif);font-size:clamp(17px,1.35vw,19px);color:var(--beige);position:relative;display:inline-block}
.person .contact a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--terra);
  transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease);
}
.person .contact a:hover::after,.person .contact a:focus-visible::after{transform:scaleX(1)}

/* ---------- 07 Kontakt ---------- */
.cta{margin-top:clamp(32px,4vw,50px);display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:var(--terra-btn);color:#fff;padding:18px 28px;border:1px solid var(--terra-btn);
  transition:background-color 400ms var(--ease),color 400ms var(--ease),border-color 400ms var(--ease);
}
.btn .arw{transition:transform 400ms var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--ghost{background:none}

/* on the light ground */
.sec--light .btn:hover{background:var(--green);border-color:var(--green);color:var(--beige)}
.sec--light .btn--ghost{color:var(--green);border-color:var(--line-dark-2)}
.sec--light .btn--ghost:hover{background:var(--green);color:var(--beige);border-color:var(--green)}

/* on the dark ground: hovering to green would disappear, so lift to beige instead */
.sec--dark .btn:hover{background:var(--beige);border-color:var(--beige);color:var(--green)}
.sec--dark .btn--ghost{color:var(--beige);border-color:var(--line-light-2)}
.sec--dark .btn--ghost:hover{background:var(--beige);color:var(--green);border-color:var(--beige)}

.coords{margin-top:clamp(40px,6vw,72px);padding-top:26px;border-top:1px solid var(--line-dark);display:grid;gap:22px 40px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sec--dark .coords{border-top-color:var(--line-light)}
.coords div{display:flex;flex-direction:column;gap:7px}
.sec--light .coords .k{color:var(--taupe-ink)}
.sec--dark  .coords .k{color:var(--beige);opacity:.72}
.coords .v{font-size:clamp(17px,1.35vw,19px);line-height:1.5}

/* ---------- footer ---------- */
.foot{background:var(--green-deep);color:var(--beige);padding-block:44px}
.foot__row{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:space-between;align-items:center}
.foot a{
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--beige);position:relative;
}
.foot a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--terra);
  transform:scaleX(0);transform-origin:left;transition:transform 360ms var(--ease);
}
.foot a:hover::after,.foot a:focus-visible::after{transform:scaleX(1)}
.foot__links{display:flex;gap:26px;flex-wrap:wrap}
.foot__c{opacity:.6}

/* ---------- Rechtsseiten ---------- */
.legal{background:var(--beige);color:var(--green);min-height:100vh}
.legal .shell{padding-block:clamp(70px,10vw,120px)}
.legal h1{
  font-family:var(--display);font-variation-settings:"opsz" 20;font-optical-sizing:none;
  font-weight:600;font-size:clamp(30px,4.4vw,50px);line-height:1.06;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;
}
.legal h2{font-size:clamp(18px,2vw,22px);margin:2.4em 0 .6em;max-width:none}
.legal p,.legal li{font-size:clamp(17px,1.3vw,19px);line-height:1.62;max-width:60ch}
.legal ul{padding-left:20px}
.legal .back{
  display:inline-block;margin-bottom:38px;
  font-family:var(--display);font-variation-settings:"opsz" 8;font-optical-sizing:none;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-ink);
}
.legal .back:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- utility ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;max-width:1px;overflow:hidden;
  background:var(--terra-btn);color:#fff;padding:12px 20px;
  font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:10px;top:10px;max-width:none}

/* ---------- reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .rv,.rv.armed{opacity:1!important;transform:none!important;transition:none!important}
  .js-ready .mark__word span,.js-ready .mark__sub span,.js-ready .hero__claim > *{animation:none!important;opacity:1!important}
  .js-ready .mark__bar{animation:none!important;transform:scaleY(1)!important}
  .js-ready .mark__rule{animation:none!important;transform:scaleX(1)!important}
  .js-ready .hero__grid line{animation:none!important;stroke-dashoffset:0!important}
  .scroll-cue .bar::after{animation:none}
  .sheet .dash{transition:none;transform:scaleX(1)!important}
  .map__outline.armed{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .dot.armed{opacity:1!important}
  .dwg .s.armed{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

/* ==========================================================================
   Abschnitte, die mit Christophs Angaben dazugekommen sind
   ========================================================================== */

/* ---------- 01 Klassifizierung neben den drei Assetklassen ---------- */
.stack__row{justify-content:flex-start}
.stack__row .word{flex:1 1 auto}
.stack__row .cls{
  flex:0 0 auto;color:var(--terra-ink);opacity:.9;white-space:nowrap;align-self:center;
}
@media (max-width:620px){
  .stack__row{flex-wrap:wrap}
  .stack__row .cls{width:100%;padding-left:calc(2.6em + 14px);margin-top:2px}
}

/* ---------- 03 Track Record ---------- */
.stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.2vw,44px);
  margin-top:clamp(34px,4.4vw,56px);
  padding-block:clamp(26px,3vw,40px);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
@media (min-width:720px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{display:flex;flex-direction:column;gap:9px}
.stat__v{
  font-family:var(--display);font-variation-settings:"opsz" 30;font-optical-sizing:none;
  font-weight:400;font-size:clamp(42px,5.4vw,72px);line-height:.92;
  font-variant-numeric:tabular-nums;color:var(--green);
  white-space:nowrap;
}
.stat__k{color:var(--taupe-ink);max-width:22ch}

.mand{margin-top:clamp(34px,4.2vw,54px)}
.mand__h{color:var(--terra-ink);margin-bottom:22px}
.mand__l{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:860px){.mand__l{grid-template-columns:1fr 1fr;gap:20px clamp(28px,3.4vw,52px)}}
.mand__l li{
  position:relative;padding-left:26px;
  font-size:clamp(17px,1.35vw,19.5px);line-height:1.5;max-width:44ch;
}
.mand__l li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--terra)}
.mand__l b{
  font-family:var(--display);font-variation-settings:"opsz" 14;font-optical-sizing:none;
  font-weight:600;font-size:1.03em;letter-spacing:.01em;
}

/* ---------- 05 Drei Situationen ---------- */
.sit{
  display:grid;gap:0;grid-template-columns:1fr;
  margin-top:clamp(32px,4.2vw,52px);border-top:1px solid var(--line-dark);
}
@media (min-width:900px){
  .sit{grid-template-columns:repeat(3,1fr);gap:0 clamp(26px,3.2vw,52px)}
}
.sit__i{
  padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:13px;
}
@media (min-width:900px){.sit__i{border-bottom:none}}
.sit__n{color:var(--terra-ink)}
.sit__i h3{max-width:18ch}
.sit__i p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.52;color:var(--taupe-ink);margin:0;max-width:36ch}

/* ---------- 06 vierter Punkt im Ansatz ---------- */
@media (min-width:900px){
  .why{grid-template-columns:repeat(2,1fr)}
  .why__i:nth-child(2){margin-top:0}
  .why__i:nth-child(3){margin-top:0}
}
@media (min-width:1180px){
  .why{grid-template-columns:repeat(4,1fr)}
  .why__i:nth-child(2){margin-top:34px}
  .why__i:nth-child(3){margin-top:68px}
  .why__i:nth-child(4){margin-top:102px}
  .why__n{font-size:clamp(54px,4.2vw,76px);top:-10px;right:0;opacity:.07}
}

/* ---------- 07 Karte: ein einheitlicher Standorttyp ---------- */
.chips{gap:4px 18px}

/* ---------- 08 Person: Hinweis-Tag neutraler ---------- */
.person__plate::after{background:var(--taupe-ink);color:var(--offwhite)}