/* ═══════════════════════════════════════════════════════════
   Clavis International — Corporate
   Ein konsolidiertes Stylesheet (kein Overlay).
   Brand: Rot #b00810 (Akzent/CTA) · Grün #2A453D (Abschluss)
   Schrift: Inter (UI/Text) + Fraunces (Display), self-hosted (DSGVO)
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#1d1d1f;
  --ink-70:rgba(29,29,31,.72);
  --ink-55:rgba(29,29,31,.55);
  --ink-35:rgba(29,29,31,.35);

  --rot:#b00810;         /* Marken-Rot, exakt aus dem Logo */
  --rot-2:#cc141c;       /* etwas heller für Hover-Zustände */
  --rot-soft:rgba(176,8,16,.07);

  --gruen:#2A453D;
  --gruen-2:#22382F;

  --weiss:#fff;
  --grau:#f5f5f7;
  --grau-2:#eef0f2;
  --linie:rgba(29,29,31,.12);

  --max:1240px;
  --pad:clamp(20px,5vw,64px);
  --r:0;

  /* Design-Steuerung (Redaktionsbereich): Schriften + Button-Ecken.
     Defaults = Clavis-Standard; werden ggf. per <style> im <head> übersteuert. */
  --ff-body:'Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-head:'Heebo',-apple-system,BlinkMacSystemFont,sans-serif;
  --btn-radius:0;

  --t:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--ff-body);
  font-size:17px;line-height:1.62;color:var(--ink);background:var(--weiss);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--rot);color:#fff}

/* ── Typografie ─────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(2rem,4.4vw,3.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.07}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.026em}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.015em}
h4{font-size:1.06rem;font-weight:700}

/* Zweiteilige Headline: der zweite Teil ist rot */
h1 em,h2 em,h3 em{font-style:normal;color:var(--rot);font-weight:inherit}

.lead{font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.55;color:var(--ink-70)}
.klein{font-size:.9rem;color:var(--ink-55)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);margin-bottom:1.1em;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--rot);flex:none}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(64px,9vw,124px) 0}
.sec--grau{background:var(--grau)}
.sec--grau2{background:var(--grau-2)}
.sec--gruen{background:var(--ink);color:#fff}
.sec--gruen .lead{color:rgba(255,255,255,.75)}
.sec--gruen .eyebrow{color:#fff}
.sec--gruen .eyebrow::before{background:#fff}

.kopf{max-width:760px;margin-bottom:clamp(38px,5vw,66px)}
.kopf .lead{margin-top:1.1em}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:14px 26px;border-radius:var(--btn-radius);border:1.5px solid transparent;
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .35s var(--t),background .25s,border-color .25s,color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn--rot{background:var(--rot);color:#fff}
.btn--rot:hover{background:var(--rot-2)}
.btn--linie{border-color:var(--linie);color:var(--ink)}
.btn--linie:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--weiss{background:#fff;color:var(--ink)}
.btn--weiss:hover{background:var(--rot);color:#fff}
.btn__pfeil{transition:transform .35s var(--t)}
.btn:hover .btn__pfeil{transform:translateX(4px)}

/* ── Header ─────────────────────────────────────────────── */
.hd{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:18px 0;transition:background .4s var(--t),padding .4s var(--t),box-shadow .4s;
}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hd__logo img{height:34px;width:auto;transition:opacity .3s}
.hd__logo .l-weiss{display:block}
.hd__logo .l-dunkel{display:none}
.hd__nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.hd__nav a{
  font-size:.92rem;font-weight:500;color:rgba(255,255,255,.88);
  padding:6px 0;position:relative;transition:color .25s;
}
.hd__nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--rot);transition:width .3s var(--t);
}
.hd__nav a:hover::after,.hd__nav a[aria-current]::after{width:100%}
.hd__lang{font-size:.8rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.hd__lang a[aria-current]{color:#fff}

/* gescrollt: weiß */
.hd.is-fest{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(18px);padding:11px 0;box-shadow:0 1px 0 var(--linie)}
.hd.is-fest .hd__logo .l-weiss{display:none}
.hd.is-fest .hd__logo .l-dunkel{display:block}
.hd.is-fest .hd__nav a{color:var(--ink-70)}
.hd.is-fest .hd__nav a:hover{color:var(--ink)}
.hd.is-fest .hd__lang{color:var(--ink-35)}
.hd.is-fest .hd__lang a[aria-current]{color:var(--ink)}

.hd__burger{display:none;width:26px;height:18px;position:relative;background:none;border:0;cursor:pointer}
.hd__burger span{position:absolute;left:0;width:100%;height:1.8px;background:#fff;transition:.3s var(--t)}
.hd__burger span:nth-child(1){top:0}
.hd__burger span:nth-child(2){top:8px}
.hd__burger span:nth-child(3){top:16px}
.hd.is-fest .hd__burger span{background:var(--ink)}

/* ── Hero ───────────────────────────────────────────────── */
/* Kein Vollbild-Kino: heller Rahmen, das Video als abgerundetes Widescreen-Panel */
.hero{position:relative;background:var(--weiss);
  padding:calc(64px + clamp(16px,3vw,42px)) clamp(14px,3.2vw,46px) clamp(28px,4vw,60px)}
.hero__rahmen{position:relative;max-width:1380px;margin:0 auto;color:#fff;
  aspect-ratio:21/9;max-height:min(72svh,680px);
  border-radius:0;overflow:hidden;background:#0f1416;
  box-shadow:0 34px 90px -34px rgba(15,20,22,.5),0 6px 22px -12px rgba(15,20,22,.42)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,20,22,.22) 0%,rgba(15,20,22,.02) 42%,rgba(15,20,22,.54) 100%),
             linear-gradient(90deg,rgba(15,20,22,.36) 0%,rgba(15,20,22,0) 54%);
}
.hero__in{position:absolute;z-index:1;left:0;bottom:0;
  width:min(720px,90%);padding:clamp(22px,3.2vw,52px)}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--rot)}
.hero h1 em{color:#fff}
.hero .lead{color:rgba(255,255,255,.82);max-width:560px;margin-top:1.1em;
  font-size:clamp(.92rem,1vw,1.02rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1em}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;width:1px;height:44px;background:rgba(255,255,255,.35);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;inset:0;background:#fff;animation:scrollhint 2.4s var(--t) infinite}
@keyframes scrollhint{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ── Beweis-Band ────────────────────────────────────────── */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.zahl{text-align:center}
.zahl .n{
  display:block;font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:900;
  letter-spacing:-.03em;line-height:1;color:var(--ink);
}
.zahl .n em{font-style:normal;color:var(--rot)}
.zahl .l{display:block;margin-top:.7em;font-size:.87rem;color:var(--ink-55);line-height:1.4}

/* ── Statement ──────────────────────────────────────────── */
.stmt{max-width:900px}
.stmt p{font-size:clamp(1.3rem,2.5vw,2rem);font-weight:600;letter-spacing:-.018em;line-height:1.32}
.stmt p b{color:var(--rot);font-weight:700}
.stmt .sig{margin-top:1.8em;font-size:.9rem;color:var(--ink-55)}

/* ── Projekt-Karten ─────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.pkarte{
  display:block;border-radius:0;overflow:hidden;background:#fff;
  border:1px solid var(--linie);transition:transform .45s var(--t),box-shadow .45s;
}
.pkarte:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(29,29,31,.11)}
.pkarte__b{aspect-ratio:4/3;overflow:hidden;background:var(--grau-2)}
.pkarte__b--leer{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#e6e8ea,#e6e8ea 10px,#eef0f2 10px,#eef0f2 20px);
}
.pkarte__b--leer span{
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-35);
}
.pkarte__b img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--t)}
.pkarte:hover .pkarte__b img{transform:scale(1.05)}
.pkarte__t{padding:18px 20px 22px}
.pkarte__t .ort{font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.pkarte__t h4{margin-top:.45em;letter-spacing:-.015em}

/* ── Awards ─────────────────────────────────────────────── */
/* ── Auszeichnungen: Karten (Siegel + Jahr + Titel) ───────── */
.awardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px);
  max-width:1020px;margin:clamp(1.6rem,3vw,2.6rem) auto clamp(2rem,3.5vw,3rem)}
.awardk{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,1.6vw,20px)}
.awardk__bild{height:clamp(72px,7.4vw,100px);display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,22px)}
.awardk__bild img{max-height:100%;width:auto;max-width:132px;object-fit:contain}
.awardk__signet{max-height:62%;width:auto}
.awardk__text{display:block}
.awardk .j{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--rot)}
.awardk .t{display:block;margin-top:.45em;font-size:.92rem;font-weight:600;color:var(--ink-70);line-height:1.35}
@media(max-width:860px){.awardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.awardgrid{grid-template-columns:1fr;gap:26px}}

/* ── CTA-Block ──────────────────────────────────────────── */
.cta{text-align:center;max-width:680px;margin:0 auto}
.cta h2{color:#fff}
.cta h2 em{color:var(--rot-2)}
.cta .lead{margin:1.1em auto 2em}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Footer ─────────────────────────────────────────────── */
.ft{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(56px,7vw,88px) 0 34px;font-size:.9rem}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.ft__logo img{height:32px;margin-bottom:16px}
.ft h5{color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.1em}
.ft a{transition:color .25s}
.ft a:hover{color:#fff}
.ft ul{list-style:none}
.ft li{margin-bottom:.55em}
.ft__unten{
  margin-top:clamp(38px,5vw,60px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.4);
}
.ft__meta{display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.ft__legal{display:flex;gap:16px}
.ft__social{display:flex;gap:14px;align-items:center}
.ft__social a{display:inline-flex;color:rgba(255,255,255,.5);transition:color .25s,transform .25s}
.ft__social a:hover{color:#fff;transform:translateY(-2px)}
.ft__social svg{width:20px;height:20px;fill:currentColor;display:block}

/* ── Animation-once ─────────────────────────────────────── */
.an{opacity:0;transform:translateY(24px);transition:opacity .85s var(--t),transform .85s var(--t)}
.an.in{opacity:1;transform:none}
.an-2{transition-delay:.09s}
.an-3{transition-delay:.18s}
.an-4{transition-delay:.27s}
.an-5{transition-delay:.36s}
.an-6{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .an{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .hero__scroll::after{animation:none}
}

/* ── Mobil ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .ft__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  h1{font-size:1.82rem;line-height:1.14;letter-spacing:-.02em}
  .hero .lead{font-size:1rem}
  .hd__burger{display:block}
  .hd__nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
    transform:translateX(100%);transition:transform .5s var(--t);
  }
  .hd__nav.is-offen{transform:none}
  .hd__nav a{font-size:1.35rem;font-weight:700;color:var(--ink)}
  /* Dropdown im Mobilmenü: Unterpunkte gestapelt sichtbar, kein Caret/Panel */
  .hd__drop{flex-direction:column;align-items:center;gap:12px;color:var(--ink)}
  .hd__drop::after{display:none}
  .hd__sub{position:static;opacity:1;visibility:visible;transform:none;margin:0;padding:0;
    min-width:0;background:none;backdrop-filter:none;box-shadow:none;
    display:flex;flex-direction:column;align-items:center;gap:10px}
  .hd__sub a{font-size:1.02rem;font-weight:600;color:var(--ink-70);padding:0}
  .hd__sub a:hover{background:none}
  .zahlen{grid-template-columns:1fr;gap:34px}
  .pgrid{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
  .hero__rahmen{aspect-ratio:auto;min-height:80svh;max-height:none}
  .hero__in{max-width:none}
}

/* ═══ Projektseiten ═══════════════════════════════════════ */

/* ── Seitenkopf (Übersicht) ─────────────────────────────── */
.seitenkopf{padding-top:clamp(120px,15vw,190px);padding-bottom:clamp(40px,5vw,64px)}
.seitenkopf .lead{max-width:680px;margin-top:1.1em}
/* Sektion, die (ohne Seitenkopf) direkt unter dem fixen Header beginnt */
.sec--auftakt{padding-top:clamp(120px,15vw,180px)}

.bilanz{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);margin-top:clamp(34px,4vw,52px)}
.bilanz__i .n{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--rot)}
.bilanz__i .l{display:block;margin-top:.55em;font-size:.85rem;color:var(--ink-55);line-height:1.35}

/* ── Filter ─────────────────────────────────────────────── */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.5vw,44px)}
.filter__b{
  display:inline-flex;align-items:center;gap:.5em;
  padding:9px 16px;border-radius:0;border:1px solid var(--linie);
  background:#fff;font-family:inherit;font-size:.87rem;font-weight:600;color:var(--ink-70);
  cursor:pointer;transition:all .25s var(--t);
}
.filter__b span{font-size:.76rem;color:var(--ink-35);font-weight:700}
.filter__b:hover{border-color:var(--ink-35);color:var(--ink)}
.filter__b.is-aktiv{background:var(--ink);border-color:var(--ink);color:#fff}
.filter__b.is-aktiv span{color:rgba(255,255,255,.55)}

/* ── Karten-Erweiterungen ───────────────────────────────── */
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pkarte__b{position:relative}
.pkarte__jahr{
  position:absolute;top:12px;right:12px;
  padding:5px 11px;border-radius:0;
  background:rgba(15,20,22,.72);backdrop-filter:blur(8px);
  font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#fff;
}
.pkarte__u{margin-top:.5em;font-size:.9rem;line-height:1.45;color:var(--ink-55)}
.pkarte__meta{display:block;margin-top:.9em;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--ink-35)}
.pkarte.is-aus{display:none}

/* ── Presse ─────────────────────────────────────────────── */
.presse{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.presse__i{
  display:flex;flex-direction:column;gap:.35em;
  padding:22px 24px;border-radius:0;background:#fff;border:1px solid var(--linie);
  transition:transform .4s var(--t),box-shadow .4s;
}
.presse__i:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(29,29,31,.1)}
.presse__m{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.presse__t{font-size:.98rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.presse__pdf{margin-top:.4em;font-size:.78rem;color:var(--ink-35)}

/* ── Projekt-Hero ───────────────────────────────────────── */
.phero{position:relative;min-height:min(74svh,640px);display:flex;align-items:flex-end;padding:0 0 clamp(44px,6vw,72px);color:#fff}
.phero--leer{background:var(--ink);min-height:auto;padding-top:clamp(120px,15vw,180px)}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,22,.34) 0%,rgba(15,20,22,.08) 42%,rgba(15,20,22,.62) 100%)}
.phero__in{position:relative;z-index:1;width:100%}
/* Container bleibt auf Rasterbreite (bündig mit Logo/Submenü), nur der Inhalt wird begrenzt */
.phero__in > *{max-width:900px}
.phero h1{margin-top:.3em;font-family:var(--ff-head);font-weight:500;letter-spacing:-.03em;line-height:1.04}
.phero .lead{color:rgba(255,255,255,.88);max-width:640px;margin-top:1em;padding-left:16px;border-left:2px solid var(--rot)}
.phero h1 em{color:#fff;font-weight:600}
.phero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.btn--weiss-linie{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--weiss-linie:hover{background:#fff;color:var(--ink);border-color:#fff}

.zurueck{display:inline-block;margin-bottom:1.4em;font-size:.87rem;font-weight:600;color:rgba(255,255,255,.72);transition:color .25s}
.zurueck:hover{color:#fff}

.marke{
  display:inline-block;padding:5px 13px;border-radius:0;
  border:1px solid rgba(255,255,255,.35);
  font-size:.71rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.marke--aktuell{background:var(--rot);border-color:var(--rot)}

/* ── Eckdaten ───────────────────────────────────────────── */
.sec--eckdaten{padding:clamp(30px,3.5vw,46px) 0;border-bottom:1px solid var(--linie)}
.eckdaten{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,64px);
  border-top:1px solid var(--linie);padding-top:clamp(24px,3vw,38px)}
.eckdaten dt{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.eckdaten dd{margin-top:.4em;font-size:1.02rem;font-weight:600;letter-spacing:-.01em}

/* ── Fließtext ──────────────────────────────────────────── */
.ptext{max-width:780px}
.ptext p{margin-bottom:1.35em;font-size:1.06rem;line-height:1.72;color:var(--ink-70)}
.ptext p:first-of-type{font-size:1.2rem;line-height:1.6;color:var(--ink)}
.pbild{margin:clamp(30px,4vw,52px) 0;border-radius:0;overflow:hidden}
.pbild img{width:100%}

/* ── Galerie ────────────────────────────────────────────── */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.galerie__i{margin:0;border-radius:0;overflow:hidden;background:var(--grau-2);aspect-ratio:4/3}
.galerie__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--t)}
.galerie__i:hover img{transform:scale(1.05)}
@media(max-width:900px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.galerie{grid-template-columns:1fr 1fr}}

/* ── Dokumente ──────────────────────────────────────────── */
.doks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:920px}
.dok{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:0;border:1px solid var(--linie);background:#fff;
  transition:border-color .3s,transform .35s var(--t);
}
.dok:hover{border-color:var(--rot);transform:translateX(3px)}
.dok__i{
  flex:none;padding:5px 9px;border-radius:0;background:var(--rot-soft);
  font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--rot);
}
.dok__n{flex:1;font-size:.93rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.dok__g{flex:none;font-size:.78rem;color:var(--ink-35)}

@media (max-width:1000px){
  .pgrid--3,.presse{grid-template-columns:repeat(2,1fr)}
  .galerie{columns:2}
}
@media (max-width:720px){
  .pgrid--3,.presse,.doks{grid-template-columns:1fr}
  .galerie{columns:1}
  .bilanz{gap:24px}
  .bilanz__i{min-width:44%}
  .eckdaten{gap:20px}
  .eckdaten>div{min-width:44%}
  .seitenkopf{padding-top:104px}
}

/* ═══ News ════════════════════════════════════════════════ */

/* ── Aufmacher (neuester Beitrag) ───────────────────────── */
.aufmacher{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border-radius:0;overflow:hidden;background:#fff;border:1px solid var(--linie);
  transition:transform .45s var(--t),box-shadow .45s;
}
.aufmacher:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(29,29,31,.12)}
.aufmacher__b{overflow:hidden;background:var(--grau-2);min-height:320px}
.aufmacher__b img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--t)}
.aufmacher:hover .aufmacher__b img{transform:scale(1.04)}
.aufmacher__t{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center}
.aufmacher__t h2{margin:.45em 0 .5em;font-size:clamp(1.5rem,2.6vw,2.15rem)}
.aufmacher__t .lead{font-size:1.02rem;margin-bottom:1.6em}
.aufmacher__t .btn{align-self:flex-start;pointer-events:none}

/* ── Meta-Zeile ─────────────────────────────────────────── */
.nmeta{font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--ink-55)}
.nmeta b{font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rot);font-size:.73rem}

/* ── Filter ─────────────────────────────────────────────── */
.nfilter{
  display:inline-flex;align-items:center;gap:.5em;
  padding:9px 16px;border-radius:0;border:1px solid var(--linie);background:#fff;
  font-family:inherit;font-size:.87rem;font-weight:600;color:var(--ink-70);
  cursor:pointer;transition:all .25s var(--t);
}
.nfilter span{font-size:.76rem;color:var(--ink-35);font-weight:700}
.nfilter:hover{border-color:var(--ink-35);color:var(--ink)}
.nfilter.is-aktiv{background:var(--ink);border-color:var(--ink);color:#fff}
.nfilter.is-aktiv span{color:rgba(255,255,255,.55)}
.nfilter--jahr{padding:7px 13px;font-size:.83rem}
.filter--jahre{margin-top:-18px}
.trefferzahl{margin-bottom:1.6em;color:var(--ink-35)}
.leer{padding:60px 0;text-align:center;color:var(--ink-55)}

/* ── News-Liste ─────────────────────────────────────────── */
.nliste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.nliste--3{grid-template-columns:repeat(3,1fr)}
.nkarte{display:flex;flex-direction:column;transition:transform .4s var(--t)}
.nkarte:hover{transform:translateY(-4px)}
.nkarte.is-aus{display:none}
.nkarte__b{aspect-ratio:16/10;border-radius:0;overflow:hidden;background:var(--grau-2);margin-bottom:16px}
.nkarte__b img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--t)}
.nkarte:hover .nkarte__b img{transform:scale(1.05)}
.nkarte__b--leer{background:repeating-linear-gradient(45deg,#e9ebed,#e9ebed 10px,#f2f4f5 10px,#f2f4f5 20px)}
.nkarte__t h3{margin:.5em 0 .45em;font-size:1.08rem;font-weight:700;line-height:1.32;letter-spacing:-.012em}
.nkarte:hover h3{color:var(--rot)}
.nkarte__t p{font-size:.92rem;line-height:1.5;color:var(--ink-55)}

/* ── Beitragsseite ──────────────────────────────────────── */
.nkopf{padding-top:clamp(118px,14vw,175px);padding-bottom:clamp(26px,3vw,40px)}
.nkopf__in{max-width:820px}
.nkopf h1{margin-top:.4em;font-size:clamp(1.75rem,3.6vw,2.85rem);line-height:1.12}
.zurueck--dunkel{color:var(--ink-55);display:block;margin-bottom:1.6em}
.zurueck--dunkel:hover{color:var(--rot)}

.nbild{padding:0 0 clamp(30px,4vw,52px)}
.nbild figure{border-radius:0;overflow:hidden;max-height:600px}
.nbild img{width:100%;height:100%;object-fit:cover}
.nText{padding-top:0}
.nquelle{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--linie);color:var(--ink-35)}

.doks--eng{grid-template-columns:1fr;margin:2.2em 0}
.galerie--2{columns:2;margin:2.4em 0}

@media (max-width:1000px){
  .nliste,.nliste--3{grid-template-columns:repeat(2,1fr)}
  .aufmacher{grid-template-columns:1fr}
  .aufmacher__b{min-height:240px;aspect-ratio:16/9}
}
@media (max-width:720px){
  .nliste,.nliste--3,.galerie--2{grid-template-columns:1fr;columns:1}
  .nkopf{padding-top:104px}
  .filter--jahre{margin-top:-8px}
}

/* Seiten ohne dunklen Hero: Header von Anfang an in Dunkelschrift */
.hd--hell .hd__logo .l-weiss{display:none}
.hd--hell .hd__logo .l-dunkel{display:block}
.hd--hell .hd__nav a{color:var(--ink-70)}
.hd--hell .hd__nav a:hover{color:var(--ink)}
.hd--hell .hd__lang{color:var(--ink-35)}
.hd--hell .hd__lang a[aria-current]{color:var(--ink)}
.hd--hell .hd__burger span{background:var(--ink)}

/* ── Dropdown-Navigation (Leistungen → Unterpunkte) ── */
.hd__drop{position:relative;display:inline-flex;align-items:center;
  color:rgba(255,255,255,.88)}
.hd.is-fest .hd__drop,.hd--hell .hd__drop{color:var(--ink-70)}
.hd__drop::after{content:"";width:6px;height:6px;margin-left:7px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.65;transition:transform .25s var(--t)}
.hd__drop:hover::after,.hd__drop:focus-within::after{transform:rotate(45deg) translateY(0)}
.hd__sub{position:absolute;top:100%;left:-14px;min-width:248px;padding:12px 0;margin-top:6px;
  background:rgba(255,255,255,.98);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 22px 54px -22px rgba(15,20,22,.34),0 1px 0 var(--linie);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .24s var(--t),transform .24s var(--t),visibility .24s;z-index:120}
.hd__drop:hover .hd__sub,.hd__drop:focus-within .hd__sub{opacity:1;visibility:visible;transform:none}
.hd__sub a{display:block;padding:10px 24px;font-size:.9rem;font-weight:500;
  color:var(--ink-70);white-space:nowrap}
.hd__sub a::after{display:none}
.hd__sub a:hover{color:var(--ink);background:var(--grau)}

/* ═══ Investoren ══════════════════════════════════════════ */

.hero--mittel{min-height:min(78svh,680px)}

/* ── Vorteile ───────────────────────────────────────────── */
.vorteile{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,48px)}
.vorteil{padding-top:22px;border-top:2px solid var(--rot)}
.vorteil__no{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--rot)}
.vorteil h3{margin:.7em 0 .5em}
.vorteil p{font-size:.99rem;line-height:1.6;color:var(--ink-70)}

/* ── Beteiligungsformen ─────────────────────────────────── */
.formen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.form{
  padding:clamp(26px,3vw,40px);border-radius:0;
  background:#fff;border:1px solid var(--linie);
  display:flex;flex-direction:column;
}
.form__kurz{margin-top:.6em;font-size:1.02rem;font-weight:600;color:var(--ink-70)}
.form__liste{list-style:none;margin:1.5em 0;padding:0}
.form__liste li{
  position:relative;padding-left:1.5em;margin-bottom:.7em;
  font-size:.95rem;line-height:1.5;color:var(--ink-70);
}
.form__liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--rot);
}
.form__fuer{
  margin-top:auto;padding-top:1.2em;border-top:1px solid var(--linie);
  font-size:.92rem;line-height:1.5;color:var(--ink-55);
}
.form__fuer b{color:var(--ink);font-weight:700}

.hinweis{
  margin-top:clamp(24px,3vw,38px);padding:16px 20px;
  border-left:2px solid var(--linie);background:var(--grau);
  border-radius:0;color:var(--ink-55);line-height:1.55;
}

/* ── Ablauf ─────────────────────────────────────────────── */
.ablauf{list-style:none;counter-reset:s;display:grid;gap:clamp(14px,1.8vw,22px)}
.schritt{
  display:flex;gap:clamp(18px,2.2vw,30px);align-items:flex-start;
  padding:clamp(20px,2.4vw,30px);border-radius:0;background:#fff;
  border:1px solid var(--linie);
}
.schritt__n{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--rot);color:#fff;
  font-size:.95rem;font-weight:800;
}
.schritt h4{font-size:1.06rem}
.schritt p{margin-top:.4em;font-size:.96rem;line-height:1.55;color:var(--ink-70)}

/* ── Vorhaben ───────────────────────────────────────────── */
.vorhaben{display:grid;gap:clamp(16px,2vw,26px)}
.vorh{
  display:grid;grid-template-columns:.85fr 1fr;
  border-radius:0;overflow:hidden;background:#fff;border:1px solid var(--linie);
}
.vorh__b{position:relative;min-height:260px;overflow:hidden;background:var(--grau-2)}
.vorh__b img{width:100%;height:100%;object-fit:cover}
.vorh__b--leer{
  display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#e6e8ea,#e6e8ea 10px,#eef0f2 10px,#eef0f2 20px);
}
.vorh__b--leer span{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-35)}
.vorh__status{
  position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:0;
  background:rgba(15,20,22,.76);backdrop-filter:blur(8px);
  font-size:.72rem;font-weight:700;letter-spacing:.05em;color:#fff;
}
.vorh__t{padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;justify-content:center}
.vorh__t .ort{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.vorh__t h3{margin:.45em 0 .55em}
.vorh__t p{font-size:.97rem;line-height:1.6;color:var(--ink-70)}
.vorh__d{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,42px);margin-top:1.5em;padding-top:1.3em;border-top:1px solid var(--linie)}
.vorh__d dt{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-35)}
.vorh__d dd{margin-top:.35em;font-size:.95rem;font-weight:600}

/* ── Zugang / Formular ──────────────────────────────────── */
.zugang{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,80px);align-items:start}
.zugang__l{list-style:none;margin-top:1.8em}
.zugang__l li{
  position:relative;padding-left:1.7em;margin-bottom:.85em;
  font-size:.97rem;line-height:1.5;color:rgba(255,255,255,.8);
}
.zugang__l li::before{
  content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--rot-2);
}

.zugang__f{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:clamp(26px,3vw,38px);border-radius:0;background:#fff;
}
.feld{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.feld--halb{grid-column:span 1}
.feld label{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--ink-70)}
.feld input,.feld select,.feld textarea{
  padding:11px 13px;border:1px solid var(--linie);border-radius:0;
  font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .25s;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--rot)}
.feld textarea{resize:vertical;min-height:76px}
.feld__hint{grid-column:1/-1;font-size:.8rem;color:var(--ink-35);line-height:1.45}
.check{
  grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;
  font-size:.85rem;line-height:1.45;color:var(--ink-55);cursor:pointer;
}
.check input{margin-top:.22em;flex:none;accent-color:var(--rot)}
.zugang__f .btn{grid-column:1/-1;justify-content:center}

/* ── Rechtlicher Hinweis ────────────────────────────────── */
.rechtlich{padding:clamp(34px,4vw,52px) 0;background:var(--grau)}
.rechtlich p{max-width:900px;font-size:.82rem;line-height:1.6;color:var(--ink-35)}

/* ══ Investoren-Seite im E&V-Private-Office-Duktus ════════════════════ */
.eyebrow--hell{color:rgba(255,255,255,.82)}
.eyebrow--hell::before{background:var(--rot-2)}

/* Kinematischer Vollbild-Hero */
.iv-hero{position:relative;min-height:80vh;display:flex;align-items:flex-end;overflow:hidden;background:#0e0f11}
.iv-hero__bg{position:absolute;inset:0}
.iv-hero__bg img{width:100%;height:100%;object-fit:cover}
.iv-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,14,.32) 0%,rgba(10,12,14,.40) 45%,rgba(10,12,14,.86) 100%)}
.iv-hero__in{position:relative;z-index:2;color:#fff;padding-block:clamp(3rem,7vw,6rem);max-width:820px}
.iv-hero__in h1{color:#fff;margin:.5rem 0 .7rem}
.iv-hero__in h1 em{color:#fff}
.iv-hero__in .lead{color:rgba(255,255,255,.85);max-width:560px;margin-bottom:1.7rem}

/* Alternierende Statement-Sektionen (Bild / Text) — E&V-Signatur */
.iv-stmt{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,4.5rem);
  max-width:var(--max);margin-inline:auto;padding:clamp(2.6rem,6vw,5rem) var(--pad)}
.iv-stmt--flip .iv-stmt__b{order:2}
.iv-stmt__b{aspect-ratio:4/3;overflow:hidden;background:var(--grau-2)}
.iv-stmt__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--t)}
.iv-stmt:hover .iv-stmt__b img{transform:scale(1.04)}
.iv-stmt__no{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--rot)}
.iv-stmt__t h2,.iv-stmt__t h3{margin:.55rem 0 .8rem;font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.14}
#vorteile .kopf{margin-bottom:0}
#vorteile .iv-stmt:first-child{padding-top:clamp(1.6rem,3.5vw,3rem)}
/* Unternehmen · „Wer wir sind“: die Section-Polsterung entfällt, der Block
   bringt seinen eigenen Innenabstand mit (sonst doppelte Lücke). */
#wer{padding-top:clamp(10px,1.6vw,24px);padding-bottom:clamp(10px,1.6vw,24px)}
.iv-stmt__t p{color:var(--ink-70);line-height:1.7;max-width:46ch;font-size:1.02rem}

/* Vorhaben als Premium-Bildkacheln */
.ivorhaben{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:1100px){.ivorhaben{grid-template-columns:repeat(2,1fr)}}
.ivorh{background:#fff;border:1px solid var(--linie);display:flex;flex-direction:column}
.ivorh__b{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.ivorh__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--t)}
.ivorh:hover .ivorh__b img{transform:scale(1.05)}
.ivorh__b--leer{display:flex;align-items:center;justify-content:center;color:var(--ink-35);font-size:.85rem}
.ivorh__grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.78))}
.ivorh__status{position:absolute;top:1rem;left:1rem;z-index:2;background:var(--rot);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:.32em .8em}
.ivorh__kopf{position:absolute;left:0;bottom:0;z-index:2;padding:1.3rem 1.5rem;color:#fff}
.ivorh__kopf .ort{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.ivorh__kopf h3{color:#fff;margin:.25rem 0 0;font-size:1.3rem}
.ivorh__t{padding:1.3rem 1.5rem 1.5rem}
.ivorh__t p{color:var(--ink-70);font-size:.94rem;line-height:1.7;
  margin:0 0 1.1rem;hyphens:auto}
.ivorh__d{display:flex;flex-wrap:wrap;gap:0 1.4rem;border-top:1px solid var(--linie);margin:0;padding:0}
.ivorh__d>div{padding:.8rem 0 0}
.ivorh__d dt{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-35)}
.ivorh__d dd{margin:.2rem 0 0;font-size:.92rem;font-weight:700;color:var(--ink)}

/* KPI-Zeile im Track-Record-Block */
.iv-kpi{display:flex;gap:clamp(1.5rem,3vw,2.6rem);flex-wrap:wrap;margin:1.5rem 0 1.7rem}
.iv-kpi__i .n{display:block;font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1}
.iv-kpi__i .l{font-size:.8rem;color:var(--ink-55);line-height:1.35}

/* Dunkler Zugang/Kontakt-Abschnitt */
.iv-zugang{background:#0e0f11;color:#fff;padding:clamp(3rem,7vw,5.5rem) 0}
.iv-zugang .zugang__t h2{color:#fff}
.iv-zugang .zugang__t h2 em{color:var(--rot)}
.iv-zugang .zugang__t .lead{color:rgba(255,255,255,.78)}
.iv-zugang .zugang__l li{color:rgba(255,255,255,.82)}

@media(max-width:860px){
  .iv-hero{min-height:66vh}
  .iv-stmt{grid-template-columns:1fr;gap:1.4rem}
  .iv-stmt--flip .iv-stmt__b{order:0}
  .iv-stmt__b{aspect-ratio:16/10}
  .ivorhaben{grid-template-columns:1fr}
}

@media (max-width:1000px){
  .vorteile,.formen{grid-template-columns:1fr}
  .vorh{grid-template-columns:1fr}
  .vorh__b{min-height:210px;aspect-ratio:16/9}
  .zugang{grid-template-columns:1fr;gap:34px}
}
@media (max-width:720px){
  .zugang__f{grid-template-columns:1fr;gap:12px}
  .feld--halb{grid-column:1/-1}
  .schritt{gap:14px;padding:18px}
}

/* ── Trust-Band direkt unter dem Hero ───────────────────── */
.trustband{padding:clamp(38px,4.5vw,60px) 0;border-bottom:1px solid var(--linie)}
.trustband .zahl .n{font-size:clamp(2rem,3.6vw,2.9rem)}

/* ── Finanzierungslücke ─────────────────────────────────── */
.luecke__balken{
  display:flex;height:64px;border-radius:0;overflow:hidden;
  border:1px solid var(--linie);
}
.lb{display:grid;place-items:center;font-size:.95rem;font-weight:800;letter-spacing:-.01em;
  flex-basis:0;min-width:0;overflow:hidden;white-space:nowrap;
  transition:flex-grow 1.6s cubic-bezier(.65,0,.35,1)}
.luecke.fliesst .lb{transition:none}   /* JS setzt jeden Frame, CSS darf nicht nachziehen */
.lb b{transition:opacity .4s var(--t)}
.lb.is-schmal b{opacity:0}
.lb--foe{background:var(--gruen);color:#fff}
.lb--bank{background:var(--grau-2);color:var(--ink-55)}
.lb--ci{background:var(--ink);color:#fff}
.lb--inv{background:var(--rot);color:#fff}

.luecke__legende{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px);margin-top:clamp(22px,2.6vw,34px)}
.luecke__legende h4{margin:.55em 0 .35em;font-size:1rem}
.luecke__legende p{font-size:.93rem;line-height:1.5;color:var(--ink-55)}
.pkt{display:inline-block;width:11px;height:11px;border-radius:0}
.pkt--bank{background:var(--grau-2);border:1px solid var(--linie)}
.pkt--ci{background:var(--ink)}
.pkt--inv{background:var(--rot)}
.pkt--foe{background:var(--gruen)}
.luecke__legende--4{grid-template-columns:repeat(4,1fr)}
.luecke__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.luecke__label{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55)}
.luecke__punkte{display:flex;gap:6px}
.luecke__punkte i{display:block;width:18px;height:2px;background:var(--linie);transition:background .5s var(--t)}
.luecke__punkte i.is-aktiv{background:var(--rot)}
@media (max-width:1000px){.luecke__legende--4{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}

/* ── Track-Record-Verweis ───────────────────────────────── */
.trackverweis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.trackverweis .btn{margin-top:1.8em}
.trackverweis__b{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trackverweis__b img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:0;
  filter:grayscale(1);opacity:.65;transition:filter .5s var(--t),opacity .5s;
}
.trackverweis:hover .trackverweis__b img{filter:none;opacity:1}

/* ── Risiken ────────────────────────────────────────────── */
.risiken{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)}
.risiko{
  padding:clamp(20px,2.4vw,28px);border-radius:0;
  background:var(--grau);border-left:3px solid var(--ink-35);
}
.risiko h4{font-size:1rem;letter-spacing:-.012em}
.risiko p{margin-top:.5em;font-size:.93rem;line-height:1.55;color:var(--ink-55)}

@media (max-width:1000px){
  .luecke__legende,.risiken{grid-template-columns:1fr}
  .trackverweis{grid-template-columns:1fr}
}
@media (max-width:720px){
  .luecke__balken{height:52px}
  .lb{font-size:.82rem}
  .trustband .zahlen{gap:26px}
}

/* ═══ Startseite: Kette · Bereiche · Einstiege ════════════ */

/* ── Wertschöpfungskette ────────────────────────────────── */
/* ── „Was wir tun": kompakte Kette in zwei Zeilen à vier ──
   Konsequente Leserichtung 1→8. Beim Sichtbarwerden poppen die Knoten
   nacheinander auf und die Linie füllt sich je Zeile links→rechts. */
.kette2{margin-top:clamp(44px,5vw,76px);display:flex;flex-direction:column;gap:clamp(40px,5vw,66px)}
.kette2.an{opacity:1;transform:none}   /* Elemente animieren einzeln, nicht der Block */
.kzeile{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.7vw,28px)}
.kzeile__linie{position:absolute;top:23px;left:12.5%;right:12.5%;height:2px;background:var(--linie);z-index:0}
.kzeile__linie b{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--rot),var(--rot-2));transition:width .85s var(--t)}
.kette2.in .kzeile:first-child .kzeile__linie b{width:100%;transition-delay:.15s}
.kette2.in .kzeile:last-child  .kzeile__linie b{width:100%;transition-delay:.6s}

.kstep{position:relative;padding-top:52px;z-index:1}
.kstep__node{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(.4);opacity:0;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--rot);color:#fff;font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px #fff;   /* weißer Ring: Linie endet sauber am Knoten */
  transition:transform .55s var(--t),opacity .55s var(--t)}
.kstep--ziel .kstep__node{background:var(--ink)}
.kette2.in .kstep__node{transform:translateX(-50%) scale(1);opacity:1;transition-delay:calc(var(--n)*.09s)}

.kstep__card{background:#fff;border:1px solid var(--linie);
  padding:clamp(16px,1.5vw,22px);opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--t),transform .6s var(--t)}
.kette2.in .kstep__card{opacity:1;transform:none;transition-delay:calc(var(--n)*.09s + .06s)}
.kstep__card h3{font-size:1.02rem;font-weight:700;letter-spacing:-.014em}
.kstep__card p{margin-top:.45em;font-size:.88rem;line-height:1.5;color:var(--ink-55)}

@media (prefers-reduced-motion:reduce){
  .kstep__node{transform:translateX(-50%) scale(1);opacity:1;transition:none}
  .kstep__card{opacity:1;transform:none;transition:none}
  .kzeile__linie b{width:100%;transition:none}
}

.kette__fazit{
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--linie);
  font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.5;color:var(--ink-70);
  max-width:820px;
}
.kette__fazit b{color:var(--ink);font-weight:700}

/* ── Geschäftsbereiche ──────────────────────────────────── */
/* Geschäftsbereiche — originalgetreuer Nachbau des „Wonach suchen Sie?"-
   Effekts (tg_background_list): EIN durchgehendes Bild hinter allen Spalten;
   Hover auf eine Kachel blendet deren Bild ein (JS, über die ganze Breite).
   Nur der Text ist auf die Spalte begrenzt; beim Hover gleitet der Titel nach
   oben und der Block (Beschreibung + Ghost-Button) entfaltet sich von unten. */
.bereiche{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:#000;aspect-ratio:12/6.555;overflow:hidden}
.bereiche__bg{position:absolute;inset:0;z-index:0}
.bereiche__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);transition:opacity .7s var(--t),transform 8s linear}
.bereiche__img.is-aktiv{opacity:1;transform:scale(1.1)}
.bereich{position:relative;z-index:2;display:block;color:#fff;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.4)}
.bereich:last-child{border-right:0}
.bereich::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.68) 100%)}
.bereich__t{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2vw,40px)}
/* Titelblock gleitet beim Hover nach oben */
.bereich__kopf{transform:translateY(10px);transition:transform .35s var(--t)}
.bereich:hover .bereich__kopf,.bereich.is-aktiv .bereich__kopf{transform:translateY(-10px)}
.bereich__n{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#fff;
  display:flex;align-items:center;gap:.6em;margin-bottom:.55rem;opacity:.92}
.bereich__n::before{content:"";width:1.6rem;height:2px;background:var(--rot)}
.bereich__t h3{font-size:clamp(1.12rem,1.3vw,1.42rem);color:#fff;line-height:1.14;letter-spacing:-.01em}
/* Reveal: entfaltet sich von unten (scaleY), wie im Original */
.bereich__reveal{transform:scaleY(0);transform-origin:bottom;max-height:0;opacity:0;overflow:hidden;
  transition:transform .3s var(--t),max-height .35s var(--t),opacity .35s var(--t),margin .35s var(--t)}
.bereich:hover .bereich__reveal,.bereich:focus-visible .bereich__reveal,.bereich.is-aktiv .bereich__reveal{
  transform:scaleY(1);max-height:18rem;opacity:1;margin-top:.7rem}
.bereich__reveal p{font-size:.87rem;line-height:1.5;color:rgba(255,255,255,.86);margin:0}
.bereich__ghost{display:inline-block;margin-top:1.1rem;padding:.6em 1.5em;
  border:1px solid #fff;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.03em;
  transition:background .3s var(--t),color .3s var(--t)}
.bereich__ghost:hover{background:#fff;color:var(--ink)}
/* Touch-Geräte: kein Hover → dauerhaft aufgeklappt */
@media(hover:none){
  .bereich__kopf{transform:none}
  .bereich__reveal{transform:none;max-height:18rem;opacity:1;margin-top:.7rem}
}

/* ── Einstiege ──────────────────────────────────────────── */
.einstiege{display:grid;gap:10px}
.einstieg{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
  border-radius:0;border:1px solid var(--linie);background:#fff;
  transition:border-color .3s,transform .35s var(--t),background .3s;
}
.einstieg:hover{border-color:var(--rot);transform:translateX(4px);background:var(--rot-soft)}
.einstieg__f{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:600;letter-spacing:-.012em}
.einstieg__z{
  flex:none;display:inline-flex;align-items:center;gap:.5em;
  font-size:.9rem;font-weight:700;color:var(--rot);white-space:nowrap;
}
.einstieg:hover .btn__pfeil{transform:translateX(4px)}

@media (max-width:1000px){
  /* Kein Hover-Bildwechsel sinnvoll → gemeinsame Ebene aus, je Kachel eigenes Bild */
  .bereiche{grid-template-columns:repeat(2,1fr);aspect-ratio:auto}
  .bereiche__bg{display:none}
  .bereich{aspect-ratio:3/3.565;overflow:hidden}
  .bereich__img{display:block}
  /* Kette: 2 Spalten, Linie nur im 4-Spalten-Layout */
  .kzeile{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .kette2{gap:32px}
  .kzeile__linie{display:none}
}
@media (max-width:720px){
  /* Kette: Nummern führen, Linie entfällt (nur für 4-Spalten sinnvoll) */
  .kzeile{grid-template-columns:1fr;gap:26px}
  .kette2{gap:26px}
  .kzeile__linie{display:none}
  .bereiche{grid-template-columns:1fr}
  .bereich{aspect-ratio:3/3.105;border-right:0;border-bottom:1px solid rgba(255,255,255,.4)}
  .bereich:last-child{border-bottom:0}
  .einstieg{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ═══ Leistungen ══════════════════════════════════════════ */
.lgruppe{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,4vw,72px);align-items:start}
.lgruppe__kopf{position:sticky;top:100px}
.lgruppe__n{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--rot)}
.lgruppe__kopf h2{margin:.3em 0 .4em}
.lgruppe__liste{display:grid;gap:14px}
.lkarte{
  padding:clamp(22px,2.4vw,30px);border-radius:0;
  background:#fff;border:1px solid var(--linie);
  transition:transform .4s var(--t),box-shadow .4s;
}
.sec--grau .lkarte{background:var(--weiss)}
.lkarte:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(29,29,31,.08)}
.lkarte h3{font-size:1.15rem;letter-spacing:-.015em}
.lkarte p{margin-top:.5em;font-size:.96rem;line-height:1.6;color:var(--ink-70)}

/* ═══ Unternehmen ═════════════════════════════════════════ */
.unt-intro{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,4vw,72px);align-items:start}
.unt-intro__text p{margin-bottom:1.1em}
.unt-intro__text p:last-child{margin-bottom:0}

/* Team-Platzhalter */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.tmember__foto{
  aspect-ratio:1;border-radius:0;margin-bottom:14px;
  display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#e6e8ea,#e6e8ea 10px,#eef0f2 10px,#eef0f2 20px);
}
.tmember__foto span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-35)}
.tmember h4{font-size:1.02rem;letter-spacing:-.012em}
.tmember p{margin-top:.3em;font-size:.88rem;color:var(--ink-55)}

@media (max-width:1000px){
  .lgruppe,.unt-intro{grid-template-columns:1fr}
  .lgruppe__kopf{position:static}
  .team{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .team{grid-template-columns:1fr 1fr}
}

/* ═══ Kontakt ═════════════════════════════════════════════ */
.kontakt{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.kontakt__info{display:grid;gap:clamp(26px,3vw,40px)}
.kblock h3{font-size:.98rem;letter-spacing:-.01em;margin-bottom:.5em}
.kblock p{font-size:1rem;line-height:1.65;color:var(--ink-70)}
.kblock a{transition:color .25s}
.kblock a:hover{color:var(--rot)}
.kbereiche{list-style:none;display:grid;gap:.5em}
.kbereiche a{
  display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--rot);font-size:.95rem;
}
.kbereiche a::after{content:"→";transition:transform .3s var(--t)}
.kbereiche a:hover::after{transform:translateX(4px)}

.kontakt__form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:clamp(26px,3vw,40px);border-radius:0;background:var(--grau);
}

/* ═══ Rechtstext ══════════════════════════════════════════ */
.rechtstext{max-width:760px;overflow-wrap:break-word;word-break:break-word}
.rechtstext h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:1.6em 0 .5em}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.1rem;margin:1.3em 0 .4em}
.rechtstext p{margin-bottom:1em;font-size:.98rem;line-height:1.7;color:var(--ink-70)}
.rechtstext a{color:var(--rot);word-break:break-word}
.rechtstext a:hover{text-decoration:underline}
.rechtstext ul{margin:0 0 1em 1.2em}
.rechtstext li{margin-bottom:.4em;font-size:.98rem;line-height:1.6;color:var(--ink-70)}

@media (max-width:1000px){
  .kontakt{grid-template-columns:1fr}
}
@media (max-width:720px){
  .kontakt__form{grid-template-columns:1fr}
}

/* ═══ Reiche Projektseite (Muster: Ombria) ════════════════ */
.phero--gross{min-height:min(84svh,720px)}

.rintro{
  max-width:820px;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.5;
  font-weight:600;letter-spacing:-.015em;color:var(--ink);
}

/* Zahlen-Reihe */
.rzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,40px);margin-bottom:clamp(38px,5vw,60px)}
.rzahl{text-align:center}
.rzahl .n{display:block;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--rot)}
.rzahl .l{display:block;margin-top:.6em;font-size:.85rem;color:var(--ink-55);line-height:1.4}

/* Lageplan */
.rlageplan{border-radius:0;overflow:hidden;background:#fff;border:1px solid var(--linie)}
.rlageplan img{width:100%}
.rlageplan__text{max-width:760px;margin:1.6em auto 0;text-align:center;font-size:1rem;line-height:1.65;color:var(--ink-70)}

/* Ausstattung */
.rausstattung{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;max-width:920px;
}
.rausstattung li{
  position:relative;padding-left:1.6em;font-size:1rem;line-height:1.5;color:var(--ink-70);
}
.rausstattung li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:0;
  background:var(--rot);
}

/* Themen-Sektionen */
.rthema{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.rthema--gedreht{direction:rtl}
.rthema--gedreht>*{direction:ltr}
.rthema__b{border-radius:0;overflow:hidden;background:var(--grau-2)}
.rthema__b img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1s var(--t)}
.rthema:hover .rthema__b img{transform:scale(1.04)}
.rthema__t h3{font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.02em}
.rthema__t p{margin-top:.8em;font-size:1.02rem;line-height:1.7;color:var(--ink-70)}

/* Immobilien-Karten */
.rimmo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.rimmo__k{
  display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  border-radius:0;background:#fff;border:1px solid var(--linie);
  transition:transform .4s var(--t),box-shadow .4s;
}
.rimmo__k:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(29,29,31,.1)}
.rimmo__typ{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.rimmo__k h4{margin:.4em 0 1em;font-size:1.2rem;letter-spacing:-.015em}
.rimmo__d{display:grid;gap:.7em;margin-bottom:1.4em}
.rimmo__d>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--linie);padding-bottom:.7em}
.rimmo__d dt{font-size:.86rem;color:var(--ink-55)}
.rimmo__d dd{font-size:.95rem;font-weight:600;text-align:right}
.rimmo__preis{color:var(--rot);font-weight:800}
.rimmo__pdf{
  margin-top:auto;display:inline-flex;align-items:center;gap:.6em;
  font-size:.88rem;font-weight:600;color:var(--ink-70);transition:color .25s;
}
.rimmo__pdf:hover{color:var(--rot)}

/* Investment-Highlight (auf Grün) */
.rinvest{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.rinvest__t h2{color:#fff}
.rinvest__t .lead{color:rgba(255,255,255,.8)}
.rinvest__l{list-style:none;display:grid;gap:.9em}
.rinvest__l li{
  position:relative;padding-left:1.9em;font-size:1.02rem;line-height:1.5;color:#fff;font-weight:500;
}
.rinvest__l li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--rot-2);font-weight:800;
}

/* Dunkler CTA-Block auf hellem Grund */
.cta--dunkel{
  background:var(--ink);color:#fff;border-radius:0;
  padding:clamp(40px,6vw,80px) clamp(24px,4vw,60px);max-width:none;
}
.cta--dunkel h2{color:#fff}
.cta--dunkel .lead{color:rgba(255,255,255,.72);margin-left:auto;margin-right:auto}
.cta--dunkel .eyebrow{color:#fff;justify-content:center}
.cta--dunkel .eyebrow::before{background:var(--rot-2)}

@media (max-width:1000px){
  .rzahlen{grid-template-columns:repeat(2,1fr);gap:30px}
  .rausstattung{grid-template-columns:repeat(2,1fr)}
  .rthema,.rinvest{grid-template-columns:1fr;gap:24px}
  .rthema--gedreht{direction:ltr}
  .rimmo{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .rausstattung,.rimmo{grid-template-columns:1fr}
  .rzahlen{gap:24px}
}

.ed-zahl{color:var(--rot);font-weight:800}

/* ── Developer-Abriss ───────────────────────────────────── */
.developer{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(30px,4vw,72px);align-items:start}
.developer__t h2{letter-spacing:-.02em}
.developer__x{font-size:1.08rem;line-height:1.7;color:var(--ink-70)}

@media (max-width:1000px){ .developer{grid-template-columns:1fr;gap:20px} }

/* ── Karte im Clavis-Stil (Duoton + animierter Marker) ──── */
.karte{
  position:relative;border-radius:0;overflow:hidden;
  border:1px solid var(--linie);background:var(--grau-2);
  aspect-ratio:16/9;box-shadow:0 20px 50px rgba(29,29,31,.10);
}
.karte>img{width:100%;height:100%;object-fit:cover;display:block}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte.is-geladen .karte__chip,
.karte.is-geladen .karte__pin,
.karte.is-geladen .karte__bar{display:none}

.karte__chip{
  position:absolute;top:18px;left:18px;z-index:2;
  padding:9px 15px;border-radius:0;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--ink);
  box-shadow:0 4px 16px rgba(29,29,31,.14);
}

/* zentrierter roter Pin mit Puls (Karte ist marker-zentriert) */
.karte__pin{
  position:absolute;left:50%;top:50%;z-index:2;
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--rot);border:3px solid #fff;
  box-shadow:0 3px 12px rgba(29,29,31,.35);
}
.karte__pulse{
  position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;background:var(--rot);
  animation:kpulse 2.4s var(--t) infinite;
}
@keyframes kpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.4);opacity:0}}

.karte__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 18px;
  background:linear-gradient(180deg,transparent,rgba(15,20,22,.55));
}
.karte__load{
  padding:11px 20px;border-radius:0;border:0;cursor:pointer;
  background:#fff;font-family:inherit;font-size:.86rem;font-weight:700;color:var(--ink);
  box-shadow:0 6px 20px rgba(29,29,31,.2);transition:transform .3s var(--t),color .25s;
}
.karte__load:hover{transform:translateY(-2px);color:var(--rot)}
.karte__gmaps{font-size:.84rem;font-weight:700;color:#fff;transition:opacity .25s}
.karte__gmaps:hover{opacity:.75}
@media (prefers-reduced-motion:reduce){ .karte__pulse{animation:none;opacity:0} }

/* ── Film-Button im Hero ────────────────────────────────── */
.filmbtn{
  display:inline-flex;align-items:center;gap:.7em;margin-top:1.8em;
  padding:12px 24px;border-radius:0;cursor:pointer;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  font-family:inherit;font-size:.92rem;font-weight:600;color:#fff;
  transition:background .25s,border-color .25s,transform .3s var(--t);
}
.filmbtn:hover{background:var(--rot);border-color:var(--rot);transform:translateY(-2px)}
.filmbtn__ico{
  width:26px;height:26px;border-radius:50%;background:#fff;color:var(--rot);
  display:grid;place-items:center;font-size:.7rem;padding-left:2px;
}

/* ── Video-Modal (Pop-up) ───────────────────────────────── */
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.vmodal[hidden]{display:none}
.vmodal__bg{position:absolute;inset:0;background:rgba(10,14,15,.86);backdrop-filter:blur(6px);animation:vfade .3s var(--t)}
.vmodal__box{position:relative;z-index:1;width:min(1000px,100%);animation:vpop .4s var(--t)}
.vmodal__frame{aspect-ratio:16/9;border-radius:0;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vmodal__frame iframe{width:100%;height:100%;border:0;display:block}
.vmodal__x{
  position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.15);border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background .25s;
}
.vmodal__x:hover{background:var(--rot)}
.vmodal__hint{margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.5);text-align:center}
@keyframes vfade{from{opacity:0}to{opacity:1}}
@keyframes vpop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

@media (max-width:720px){
  .karte{aspect-ratio:4/3}
  .karte__bar{flex-direction:column;align-items:stretch;gap:8px}
  .karte__gmaps{text-align:center}
  .vmodal__x{top:-42px}
}

/* ── Projekt-Sprungnavigation (sticky) ──────────────────── */
.projnav{
  position:sticky;top:56px;z-index:90;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--linie);
}
.projnav__in{display:flex;gap:clamp(18px,2.4vw,34px);overflow-x:auto;scrollbar-width:none}
.projnav__in::-webkit-scrollbar{display:none}
.projnav a{
  flex:none;padding:16px 0;position:relative;white-space:nowrap;
  font-size:.86rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-55);
  transition:color .25s;
}
.projnav a:hover{color:var(--ink)}
.projnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--t);
}
.projnav a:hover::after,.projnav a.is-aktiv::after{transform:scaleX(1)}
.projnav a.is-aktiv{color:var(--rot)}

/* Anspringziele: Platz für sticky Header (~0) + Sub-Nav (~56px) freilassen */
#ueberblick,#ausstattung,#immobilien,#kapitalanlage,#entwickler,#lage,#galerie,#dokumente{
  scroll-margin-top:118px;
}
@media (max-width:720px){
  .projnav__in{gap:20px}
  .projnav a{font-size:.82rem;padding:14px 0}
}

/* ── Interaktive Weltkarte (Projektübersicht) ───────────── */
/* Weltkarte-Breaker auf Hellgrau; Text dunkel, Akzente in Clavis-Rot.
   Karten-Punkte neutral grau, Kanten laufen weich aus (Maske auf .wkarte__bg). */
.wk-sec{background:#eef0f2;color:var(--ink);padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.wk-sec .eyebrow{color:var(--ink-55)}
.wk-sec .eyebrow::before{background:var(--rot)}
.wk-sec .kopf h2{color:var(--ink)}
.wk-sec .kopf h2 em{color:var(--rot)}
.wk-sec .lead{color:var(--ink-55)}
.kopf--hell{margin-left:auto;margin-right:auto;text-align:center}
.kopf--hell .eyebrow{justify-content:center}

.wkarte{position:relative}
.wkarte__scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding:44px 0 8px}
.wkarte__scroll::-webkit-scrollbar{height:6px}
.wkarte__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:0}
.wkarte__innen{position:relative;width:100%;aspect-ratio:3840/1110;transition:height .85s var(--t)}
/* Graue Punktkarte, die an allen Kanten weich im Hintergrund ausläuft — kein Rand.
   Die Maske liegt nur auf dem Bild; Pins und Tooltips bleiben voll sichtbar. */
.wkarte__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 48%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);
          mask-image:radial-gradient(ellipse 58% 62% at 50% 48%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%)}

.wkpin{position:absolute;left:var(--x);top:var(--y);width:20px;height:20px;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;text-decoration:none}
.wkpin__dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--rot);
  box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(176,8,16,.18),0 2px 8px rgba(176,8,16,.35);transition:transform .16s var(--t)}
.wkpin--aktuell{z-index:3}
.wkpin--aktuell .wkpin__dot{background:var(--ink);box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(29,29,31,.14),0 2px 8px rgba(0,0,0,.3)}
.wkpin--aktuell .wkpin__dot::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--ink);animation:wkpuls 2.4s ease-out infinite}
@keyframes wkpuls{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3.4);opacity:0}}
.wkpin:hover,.wkpin:focus-visible{z-index:70;outline:none}
.wkpin:hover .wkpin__dot,.wkpin:focus-visible .wkpin__dot{transform:scale(1.4)}

.wktip{position:absolute;bottom:150%;left:50%;width:188px;
  transform:translateX(-50%) translateY(6px);
  background:#fff;color:var(--ink);border-radius:0;overflow:hidden;text-align:left;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .17s var(--t),transform .17s var(--t);z-index:70}
.wkpin:hover .wktip,.wkpin:focus-visible .wktip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.wktip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#fff}
/* Pins im oberen Kartenbereich: Tooltip klappt nach unten */
.wkarte:not(.ist-eu) .wkpin--unten .wktip,.wkarte.ist-eu .wkpin--unten-eu .wktip{bottom:auto;top:150%;transform:translateX(-50%) translateY(-6px)}
.wkarte:not(.ist-eu) .wkpin--unten:hover .wktip,.wkarte:not(.ist-eu) .wkpin--unten:focus-visible .wktip,.wkarte.ist-eu .wkpin--unten-eu:hover .wktip,.wkarte.ist-eu .wkpin--unten-eu:focus-visible .wktip{transform:translateX(-50%) translateY(0)}
.wkarte:not(.ist-eu) .wkpin--unten .wktip::after,.wkarte.ist-eu .wkpin--unten-eu .wktip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff}
.wktip__b{display:block;aspect-ratio:16/10;background:#eef0f2}
.wktip__b img{width:100%;height:100%;object-fit:cover}
.wktip__t{display:block;padding:.6rem .72rem .74rem}
.wktip__ort{display:block;font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rot)}
.wktip__n{display:block;font-size:1rem;font-weight:800;letter-spacing:-.01em;line-height:1.16;margin:.18rem 0 .34rem}
.wktip__go{display:block;font-size:.72rem;font-weight:600;color:var(--ink-55)}

.wkleg{display:flex;gap:1.6rem;justify-content:center;margin-top:1.5rem;font-size:.8rem;color:var(--ink-55)}
.wkleg__i{display:inline-flex;align-items:center;gap:.5rem}
.wkleg__d{width:10px;height:10px;border-radius:50%;background:var(--rot)}
.wkleg__d--aktuell{background:var(--ink)}

@media(max-width:760px){
  .wkarte__innen{min-width:660px}
  .wktip{width:158px}
}

/* ── News-Breaker auf der Startseite ─────────────────────── */
.sec--news{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.nbreak__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.nbreak__kt{max-width:620px}
.nbreak__kt .lead{margin-top:.9em}
.nbreak__alle{flex:none}

.nbreak{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.nbreak__k{display:block;text-decoration:none;color:inherit}
.nbreak__b{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:0;background:var(--grau-2)}
.nbreak__b img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--t)}
.nbreak__k:hover .nbreak__b img{transform:scale(1.045)}
.nbreak__b--leer{background:linear-gradient(135deg,var(--grau-2),#e4e7ea)}
.nbreak__t{display:block;padding-top:.85rem}
.nbreak__m{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rot)}
.nbreak__h{display:block;margin-top:.35rem;font-size:1.05rem;font-weight:700;line-height:1.28;
  letter-spacing:-.012em;color:var(--ink)}
.nbreak__k:hover .nbreak__h{color:var(--rot)}

@media(max-width:860px){
  .nbreak{grid-template-columns:1fr 1fr}
  .nbreak__k:nth-child(3){display:none}
}
@media(max-width:560px){
  .nbreak{grid-template-columns:1fr;gap:22px}
  .nbreak__k:nth-child(3){display:block}
  .nbreak__kopf{align-items:flex-start}
}

/* ── LinkedIn-Beiträge im News-Bereich ───────────────────── */
.ntags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.8em 0 .4em}
.ntags span{font-size:.78rem;font-weight:600;color:var(--ink-55);
  background:var(--grau);border-radius:0;padding:.28em .78em}
.nText .btn--linie{margin-top:1.2em}

/* ── Immobilienportal ────────────────────────────────────── */
.immfilter{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(14px,2vw,26px);padding:clamp(18px,2.4vw,26px);background:#fff;
  border:1px solid var(--linie);border-radius:0;margin-bottom:1.6rem}
.immfilter__l{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55);margin-bottom:.6rem}
.immfilter__l b{color:var(--rot);letter-spacing:0;text-transform:none;font-size:.86rem}
.immfilter__b{display:flex;flex-wrap:wrap;gap:.4rem}
.ifb{padding:.42em .82em;border:1px solid var(--linie);border-radius:0;background:#fff;
  font-family:inherit;font-size:.83rem;font-weight:600;color:var(--ink-70);cursor:pointer;
  transition:all .18s var(--t)}
.ifb:hover{border-color:var(--ink-35)}
.ifb span{opacity:.5;margin-left:.25em;font-weight:500}
.ifb.is-aktiv{background:var(--ink);border-color:var(--ink);color:#fff}
.ifb.is-aktiv span{opacity:.6}
.immrange{width:100%;accent-color:var(--rot);margin-top:.5rem}

.immzahl{display:flex;align-items:center;gap:1rem;font-size:.9rem;font-weight:600;
  color:var(--ink-70);margin:0 0 1.4rem}
.immreset{border:0;background:none;font-family:inherit;font-size:.85rem;font-weight:600;
  color:var(--rot);cursor:pointer;text-decoration:underline;padding:0}

.immgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(22px,2.8vw,38px)}
/* E&V-nah: randlose, schwebende Karten mit weichem Schatten (Ecken bleiben scharf) */
.immkarte{background:#fff;border:0;border-radius:0;overflow:hidden;
  box-shadow:0 1px 3px rgba(29,29,31,.05),0 14px 34px -20px rgba(29,29,31,.2);
  display:flex;flex-direction:column;transition:box-shadow .5s var(--t),transform .5s var(--t)}
.immkarte:hover{box-shadow:0 4px 10px rgba(29,29,31,.06),0 30px 62px -26px rgba(29,29,31,.34);transform:translateY(-5px)}
.immkarte.is-aus{display:none}
.immkarte__b{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--grau-2)}
.immkarte__b img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--t)}
.immkarte:hover .immkarte__b img{transform:scale(1.045)}
.immkarte__typ{position:absolute;top:.7rem;left:.7rem;background:rgba(255,255,255,.94);
  border-radius:0;padding:.3em .8em;font-size:.72rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.immkarte__res{position:absolute;top:.7rem;right:.7rem;background:var(--rot);color:#fff;
  border-radius:0;padding:.3em .8em;font-size:.72rem;font-weight:700}

.immkarte__t{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.35rem 1.4rem}
.immkarte__ort{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.immkarte__t h3{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:.4rem 0 .85rem}

.immkarte__d{display:flex;gap:1.4rem;margin:0 0 .7rem;padding:0}
.immkarte__d dt{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-35)}
.immkarte__d dd{margin:.1rem 0 0;font-size:.92rem;font-weight:600;color:var(--ink)}

.immkarte__m{list-style:none;padding:0;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.34rem}
.immkarte__m li{font-size:.74rem;color:var(--ink-70);background:var(--grau);
  border-radius:0;padding:.26em .7em}

.immkarte__f{margin-top:auto;padding-top:1rem;border-top:1px solid var(--linie)}
.immkarte__preis{display:block;font-size:1.2rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.immkarte__l{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:.6rem}
.immkarte__pdf,.immkarte__resort{font-size:.83rem;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem}
.immkarte__pdf{color:var(--ink-70)}
.immkarte__pdf:hover{color:var(--rot)}
.immkarte__resort{color:var(--rot)}
.immkarte__resort:hover{text-decoration:underline}

.immleer{max-width:560px;font-size:1rem;color:var(--ink-70);padding:2.4rem 0}
.immhinweis{margin-top:2.4rem;max-width:760px;color:var(--ink-35)}
.btn--linie-hell{border-color:rgba(255,255,255,.45);color:#fff}
.btn--linie-hell:hover{background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:560px){
  .immgrid{grid-template-columns:1fr}
  .immfilter{padding:1rem}
}

/* ── Immobilien-Pop-up ───────────────────────────────────── */
.immkarte__b{border:0;padding:0;width:100%;cursor:pointer;font:inherit;text-decoration:none}
.immkarte__titel,.immkarte__mehr{text-decoration:none}
.immkarte__lupe{position:absolute;inset:auto 0 0 0;padding:.7rem;background:linear-gradient(transparent,rgba(0,0,0,.55));
  color:#fff;font-size:.8rem;font-weight:600;opacity:0;transition:opacity .2s var(--t);text-align:left}
.immkarte:hover .immkarte__lupe{opacity:1}
.immkarte__titel{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.immkarte__titel:hover{color:var(--rot)}
.immkarte__mehr{border:0;background:none;padding:0;font-family:inherit;font-size:.83rem;font-weight:600;
  color:var(--rot);cursor:pointer}
.immkarte__mehr:hover{text-decoration:underline}

.omodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
.omodal[hidden]{display:none}
.omodal__bg{position:absolute;inset:0;background:rgba(15,20,22,.72);backdrop-filter:blur(3px)}
.omodal__box{position:relative;background:#fff;border-radius:0;width:min(920px,100%);
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.omodal__x{position:absolute;top:.7rem;right:.9rem;z-index:3;border:0;background:rgba(255,255,255,.9);
  width:38px;height:38px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.omodal__x:hover{background:var(--rot);color:#fff}

.omodal__kopf{padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.2rem,2.4vw,1.8rem) .9rem;border-bottom:1px solid var(--linie)}
.omodal__kopf h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:.3rem 0 .5rem;padding-right:2.5rem}
.omodal__preis{display:flex;align-items:center;gap:.8rem}
.omodal__res{background:var(--rot);color:#fff;border-radius:0;padding:.24em .8em;font-size:.74rem;font-weight:700}

.otabs{display:flex;gap:.2rem;padding:0 clamp(1.2rem,2.4vw,1.8rem);border-bottom:1px solid var(--linie);
  overflow-x:auto;flex:none}
.otab{border:0;background:none;padding:.85em .95em;font-family:inherit;font-size:.88rem;font-weight:600;
  color:var(--ink-55);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.otab:hover{color:var(--ink)}
.otab.is-aktiv{color:var(--rot);border-bottom-color:var(--rot)}

.omodal__inhalt{overflow-y:auto;padding:clamp(1.1rem,2.2vw,1.6rem);flex:1}
/* Panes sind <section> — globales Section-Padding hier zurücksetzen,
   sonst entsteht oben+unten je ~124px Leerraum. */
.opane{display:none;padding:0;margin:0}
.opane.is-aktiv{display:block}

.ogal__gross{margin:0;border-radius:0;overflow:hidden;aspect-ratio:3/2;background:var(--grau-2)}
.ogal__gross img{width:100%;height:100%;object-fit:cover;display:block}
.ogal__mini{display:flex;gap:.5rem;margin-top:.5rem;overflow-x:auto;padding-bottom:.3rem}
.ogal__m{flex:none;width:84px;height:58px;border:1px solid var(--linie);border-radius:0;overflow:hidden;
  padding:0;background:none;cursor:pointer;opacity:.55;transition:opacity .18s,border-color .18s}
.ogal__m img{width:100%;height:100%;object-fit:cover}
.ogal__m:hover{opacity:1}
.ogal__m.is-aktiv{opacity:1;border-color:var(--rot);box-shadow:inset 0 0 0 1px var(--rot)}
/* Galerie als responsives Thumbnail-Raster (statt gequetschter Scroll-Leiste) */
.ogal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem;margin-top:.6rem}
.ogal__grid .ogal__m{flex:none;width:100%;height:auto;aspect-ratio:3/2;cursor:pointer}
.objd__staedte{margin:.2rem 0 1rem}

/* Eckdaten als ruhige Faktenleiste (E&V-Stil): gleichmässige Spalten,
   Trennlinien, prominente Werte. */
.oeck{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;
  margin:1.2rem 0 0;padding:0;border:1px solid var(--linie);border-radius:0}
.oeck>div{padding:.85rem 1.1rem;border-right:1px solid var(--linie)}
.oeck>div:last-child{border-right:0}
.oeck dt{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-35)}
.oeck dd{margin:.25rem 0 0;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.2}
.omerk{margin-top:1rem}
.omodal__hint{margin-top:1rem;margin-bottom:0;color:var(--ink-35)}

/* Fragen & Antworten je Immobilie — Käuferfragen + KI-Sichtbarkeit */
.ofaq{margin:0}
.ofaq__item{padding:1.05rem 0;border-bottom:1px solid var(--linie)}
.ofaq__item:first-child{padding-top:.1rem}
.ofaq__item:last-child{border-bottom:0;padding-bottom:.1rem}
.ofaq dt{margin:0 0 .35rem;font-weight:700;font-size:1rem;color:var(--ink)}
.ofaq dd{margin:0;color:var(--ink-70);line-height:1.62;max-width:64ch}

/* ── Immobilien-Detailseite (eigene URL je Objekt) ───────────────── */
.brotkrume{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:var(--ink-55);margin-bottom:1rem}
.brotkrume a{color:var(--ink-55);text-decoration:none}
.brotkrume a:hover{color:var(--rot)}
.objd__kopf h1{margin:.3rem 0 0;font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.15}
/* weniger Abstand zwischen Headline und Inhalt */
.objd__kopf{padding-bottom:clamp(10px,1.6vw,18px)}
.objd{padding-top:clamp(.4rem,1.2vw,1rem)}
/* Video-Button in der Objektbox = Linien-Button wie „Exposé (PDF)" (nicht der helle Hero-Stil) */
.objektbox__cta .filmbtn{margin-top:0;background:transparent;border:1.5px solid var(--linie);color:var(--ink);
  backdrop-filter:none;font-size:.95rem;padding:14px 26px;justify-content:center;width:100%}
.objektbox__cta .filmbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
/* Kaufnebenkosten-Kasten unter der Karte (hebt sich ab) */
.nebenkosten{margin-top:1.2rem;border:1px solid var(--linie);background:var(--grau-2);padding:clamp(1rem,2vw,1.4rem)}
.nebenkosten__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.7rem}
.nebenkosten h3{font-size:1.05rem;margin:0;color:var(--ink)}
.nebenkosten__summe{font-size:.9rem;font-weight:700;color:var(--rot)}
.nebenkosten dl{margin:0;padding:0;display:flex;flex-direction:column}
.nebenkosten dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--linie)}
.nebenkosten dl>div:last-child{border-bottom:0}
.nebenkosten dt{margin:0;font-size:.9rem;color:var(--ink-70)}
.nebenkosten dd{margin:0;font-size:.9rem;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.nebenkosten__hint{margin:.7rem 0 0;font-size:.76rem;color:var(--ink-55);line-height:1.5}
.objd{padding:clamp(1.5rem,4vw,3rem) 0}
.objd__grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(1.5rem,3vw,2.6rem);align-items:start}
.objd__haupt{min-width:0}
.objd__bild{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--grau-2)}
.objd__bild img{width:100%;height:100%;object-fit:cover;display:block}
.objd__res{position:absolute;top:1rem;left:1rem;background:var(--rot);color:#fff;font-size:.74rem;font-weight:700;padding:.3em .8em}
.objd__block{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
/* Galerie/erster Block bündig mit der Oberkante der Info-Box rechts */
.objd__haupt>.objd__block:first-child{margin-top:0}
.objd__block h2{font-size:clamp(1.15rem,2vw,1.5rem);margin:0 0 .8rem}
.objd__block p{color:var(--ink-70);line-height:1.7;max-width:68ch;margin:0 0 .8em}
.objd__merk{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem .5rem}
.objd__merk li{position:relative;padding-left:1.3rem;color:var(--ink-70);line-height:1.5}
.objd__merk li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;background:var(--rot)}
.objd__hint{margin-top:2rem;color:var(--ink-35)}

/* top = Header-Höhe + Abstand, damit die sticky Box nicht unter die Menüleiste rutscht */
.objd__seite{position:sticky;top:92px;display:flex;flex-direction:column;gap:1rem}
.objektbox{border:1px solid var(--linie);padding:1.4rem}
/* Projekt-Logo oben rechts, max. 1/3 der Containerbreite */
.objektbox__logo{display:flex;justify-content:flex-end;margin-bottom:1rem}
.objektbox__logo img{width:auto;max-width:33%;max-height:56px;object-fit:contain;display:block}
/* Kaufpreis: Label links, Preis rechts (dezent) */
.objektbox__kaufpreis{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.objektbox__kplabel{font-size:.86rem;color:var(--ink-55)}
.objektbox__kpreis{font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.1;text-align:right}
.objektbox__preis{font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1.1}
.objektbox__qm{font-size:.86rem;color:var(--ink-55);margin-top:.2rem;text-align:right}
.objektbox__res{display:inline-block;margin-top:.6rem;background:var(--rot);color:#fff;font-size:.72rem;font-weight:700;padding:.28em .8em}
.objektbox__eck{margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column}
.objektbox__eck>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--linie)}
.objektbox__eck>div:last-child{border-bottom:0}
.objektbox__eck dt{margin:0;font-size:.86rem;color:var(--ink-55)}
.objektbox__eck dd{margin:0;font-size:.9rem;font-weight:700;color:var(--ink);text-align:right}
.objektbox__cta{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem}
.objektbox__cta .btn{justify-content:center;width:100%}
.objektbox--energie h3,.objektbox--kontakt h3{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-35);margin:0 0 .7rem}
.objektbox--kontakt p{margin:.2rem 0}

@media(max-width:860px){
  .objd__grid{grid-template-columns:1fr}
  .objd__seite{position:static;order:-1}
}

.ogrundriss{margin:0 0 1.2rem;border:1px solid var(--linie);border-radius:0;overflow:hidden;background:#fff}
.ogrundriss img{width:100%;height:auto;display:block}

.omodal__fuss{display:flex;flex-wrap:wrap;gap:.7rem;padding:1rem clamp(1.2rem,2.4vw,1.8rem);
  border-top:1px solid var(--linie);background:var(--grau);flex:none}

@media(max-width:640px){
  .omodal{padding:0}
  .omodal__box{max-height:100dvh;border-radius:0;width:100%}
  /* Tabs auf schmalen Screens horizontal scrollbar statt umbrechen/abschneiden */
  .otabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .otabs::-webkit-scrollbar{display:none}
  .otab{padding:.8em .7em;font-size:.82rem;white-space:nowrap;flex:none}
  /* Faktenleiste: zwei Spalten, Trennlinien sauber umbrechen */
  .oeck{grid-template-columns:1fr 1fr}
  .oeck>div{border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
  .oeck>div:nth-child(2n){border-right:0}
  .omodal__fuss .btn{flex:1 1 auto;justify-content:center}
}

/* ── Kinematischer Hero: Slideshow mit Ken-Burns-Bewegung ── */
.hero__bg{overflow:hidden}
/* Randlose Überblendung: die neue Folie liegt oben und blendet ein, die alte
   (.is-raus) bleibt darunter unverändert deckend stehen — inklusive ihrer
   laufenden Zoom-Bewegung. Kein Größensprung, kein Durchscheinen. */
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;will-change:opacity}
.hero__slide.is-aktiv{opacity:1;z-index:2;transition:opacity 2.2s cubic-bezier(.37,0,.25,1)}
.hero__slide.is-raus{opacity:1;z-index:1}
.hero__slide img,
.hero__slide .hero__video{width:100%;height:100%;object-fit:cover;object-position:center center;
  transform-origin:center;display:block}
/* Videos bewegen sich selbst — ein leiser Rest-Zoom gibt Tiefe, mehr nicht */
.hero__slide.is-aktiv .hero__video,.hero__slide.is-raus .hero__video{animation:kbv 12s ease-out forwards}
@keyframes kbv{from{transform:scale(1.06)} to{transform:scale(1.0)}}

/* Jede Folie bewegt sich anders — sonst wirkt der Wechsel mechanisch.
   Die Bewegung läuft nur, solange die Folie sichtbar ist. */
.hero__slide.is-aktiv img,.hero__slide.is-raus img{animation:kb1 14s ease-out forwards}
.hero__slide[data-i="1"].is-aktiv img,.hero__slide[data-i="1"].is-raus img{animation-name:kb2}
.hero__slide[data-i="2"].is-aktiv img,.hero__slide[data-i="2"].is-raus img{animation-name:kb3}
@keyframes kb1{from{transform:scale(1.02) translate3d(0,0,0)}   to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}}
@keyframes kb2{from{transform:scale(1.12) translate3d(1%,0,0)}  to{transform:scale(1.02) translate3d(0,-1%,0)}}
@keyframes kb3{from{transform:scale(1.03) translate3d(0,1%,0)}  to{transform:scale(1.13) translate3d(1.2%,0,0)}}

/* Bildwechsel-Punkte */
.hero__punkte{position:absolute;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);z-index:2;
  display:flex;flex-direction:column;gap:.6rem}
.hero__p{width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  background:none;cursor:pointer;transition:background .25s var(--t),transform .25s var(--t)}
.hero__p:hover{background:rgba(255,255,255,.55)}
.hero__p.is-aktiv{background:#fff;transform:scale(1.25)}

/* ── Wertschöpfungs-Zeile: „Vom Grundstück … bis zum laufenden Betrieb" ── */
.hkette{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:1.3em 0 0;
  font-size:clamp(.82rem,1.15vw,1rem);font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.9)}
.hkette__w{opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--t),transform .7s var(--t)}
.hkette__w--stark{color:#fff}
.hkette__linie{display:block;height:1px;width:0;background:linear-gradient(90deg,var(--rot-2),rgba(255,255,255,.85));
  transition:width 1.1s .45s cubic-bezier(.65,0,.35,1)}
.hero.is-da .hkette__w{opacity:1;transform:none}
.hero.is-da .hkette__w--stark{transition-delay:1.35s}
.hero.is-da .hkette__linie{width:clamp(44px,7vw,110px)}

/* Kennzahlen mittig — unabhängig davon, wie viele es sind. Vorher stand hier
   ein festes Raster aus fünf Spalten; bei vier Kacheln blieb rechts eine leer
   und die Reihe saß sichtbar links (Wunsch 04.11.2026). */
.zahlen{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(24px,3vw,40px) clamp(32px,5vw,80px)}
.zahlen > .zahl{flex:0 1 clamp(8rem,13vw,11rem)}
.zahl .n i{font-style:normal;font-size:.44em;font-weight:700;color:var(--ink-35);
  display:block;margin-bottom:.1em;letter-spacing:.02em}
@media(max-width:1000px){.zahlen{gap:32px 36px}.zahlen > .zahl{flex:0 1 11rem}}

/* Wer Bewegung reduziert haben will, bekommt ein ruhiges Standbild. */
@media (prefers-reduced-motion:reduce){
  .hero__slide.is-aktiv img,
  .hero__slide[data-i="1"].is-aktiv img,
  .hero__slide[data-i="2"].is-aktiv img,
  .hero__slide.is-aktiv .hero__video,
  .hero__slide.is-raus img,.hero__slide.is-raus .hero__video{animation:none;transform:none}
  .hero__slide.is-aktiv{transition-duration:.01ms}
  .hkette__w{opacity:1;transform:none;transition:none}
  .hkette__linie{transition:none;width:clamp(44px,7vw,110px)}
}

/* Abdunklung für den Slideshow-Hero: seitlicher Schatten links (der Text ist
   linksbündig) plus Verlauf oben/unten. Hält die Schrift auf allen drei
   Motiven lesbar — auch auf dem hellen Poolbild. */
.hero__bg::after{
  background:
    linear-gradient(90deg, rgba(12,17,19,.58) 0%, rgba(12,17,19,.32) 38%,
                           rgba(12,17,19,.04) 70%, rgba(12,17,19,.14) 100%),
    linear-gradient(180deg, rgba(12,17,19,.34) 0%, rgba(12,17,19,.02) 32%,
                            rgba(12,17,19,.46) 100%);
}

/* Vierstufige Kette im Hero: Beratung → Entwicklung → Vermarktung → Betrieb.
   Jede Stufe blendet versetzt ein (--v = Position), die Linien wachsen dazwischen. */
.hkette{gap:.5rem .7rem}
.hkette__w{transition-delay:calc(var(--v,0) * .28s)}
.hkette__linie{width:0;background:linear-gradient(90deg,rgba(255,255,255,.35),var(--rot-2))}
.hero.is-da .hkette__linie{width:clamp(20px,3.2vw,46px)}
.hero.is-da .hkette__linie:nth-of-type(1){transition-delay:.30s}
.hero.is-da .hkette__linie:nth-of-type(2){transition-delay:.58s}
.hero.is-da .hkette__linie:nth-of-type(3){transition-delay:.86s}
.hero.is-da .hkette__w--stark{transition-delay:1.05s}
.hkette__w--stark{color:#fff;font-weight:700}
@media (prefers-reduced-motion:reduce){
  .hkette__w,.hkette__linie{transition:none}
  .hkette__linie{width:clamp(20px,3.2vw,46px)}
}

/* ══ Schrift: Heebo ═════════════════════════════════════════════════
   Auf Wunsch übernommen von der bisherigen clavisinternational.com
   (dort die dominante Schrift): eine Stimme für Headline, Subtext und
   Text — Heebo (self-hosted, DSGVO). */

h1, h2,
.hero h1, .seitenkopf h1, .phero h1 {
  font-family:var(--ff-head);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}
h1{font-size:clamp(2.05rem,4.7vw,3.7rem);line-height:1.08}
/* Hero-Handschrift: dieselbe Grotesk wie im Hero der Startseite, im
   ruhigen Schnitt 500. Steht bewusst NACH der allgemeinen Regel. */
.phero h1, .rhero h1{font-family:var(--ff-head);font-weight:500;letter-spacing:-.03em}
.phero h1 em, .rhero h1 em{font-weight:600}
h2{font-size:clamp(1.7rem,3.7vw,2.9rem)}
/* Heebo hat keinen Kursivschnitt — Hervorhebung nur über Farbe, aufrecht. */
h1 em, h2 em, .hero__h em{font-weight:800;font-style:normal}

h3, h4, h5{font-family:var(--ff-head)}

/* Tastatur-Fokus: war bisher nur an Formularfeldern und Kartenpins gesetzt —
   wer mit der Tastatur navigiert, sah auf Links und Buttons gar nichts. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--rot);
  outline-offset:3px;
  border-radius:0;
}
/* Auf dunklem Grund reicht Rot nicht — dort heller Ring. */
.hero a:focus-visible, .hero button:focus-visible,
.sec--gruen a:focus-visible, .sec--gruen button:focus-visible,
.wk-sec a:focus-visible, .wk-sec button:focus-visible,
.cta--dunkel a:focus-visible, .ft a:focus-visible,
.phero a:focus-visible, .phero button:focus-visible{
  outline-color:#fff;
}
/* Bildkarten: Fokus umschließt die ganze Kachel sauber. */
.pkarte:focus-visible, .nkarte:focus-visible, .immkarte__b:focus-visible,
.wkpin:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:.8em 1.2em;border-radius:0;
  font-size:.9rem;font-weight:600}
.skip:focus{left:0}

/* Grundgrößen der Überschriften (die frühere Korrektur galt der breiter
   bauenden Serif und ist mit der Grotesk nicht mehr nötig). */
h1{font-size:clamp(2.05rem,4.5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.85rem)}

/* Pins der Weltkarte erscheinen gestaffelt, sobald die Karte ins Bild kommt */
.wkarte__innen .wkpin{opacity:0;transform:translate(-50%,-50%) scale(.4);
  transition:opacity .45s var(--t),transform .45s cubic-bezier(.34,1.56,.64,1),left .9s var(--t),top .9s var(--t)}
.wkarte__innen.pins-da .wkpin{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition-delay:calc(var(--pin,0) * 38ms)}
@media (prefers-reduced-motion:reduce){
  .wkarte__innen .wkpin{opacity:1;transform:translate(-50%,-50%);transition:none}
}

/* Größer-als-Zeichen statt des Wortes „über": steht inline vor der Zahl,
   etwas kleiner und zurückgenommen, damit die Zahl die Hauptrolle behält. */
.zahl .n i{
  display:inline;
  font-style:normal;
  font-size:.62em;
  font-weight:400;
  color:var(--ink-35);
  margin:0 .12em 0 0;
  vertical-align:.06em;
  letter-spacing:0;
}
/* Nur für Screenreader — das Zeichen allein wird sonst als „größer" vorgelesen */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Je Bild ein eigener Text — alle im selben Rasterfeld, damit die Höhe
   nicht springt. Nur der aktive ist sichtbar und anklickbar. */
.hero__texte{display:grid}
.hero__text{grid-area:1/1;opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .75s var(--t),transform .75s var(--t)}
.hero__text.is-aktiv{opacity:1;pointer-events:auto;transform:none}
/* Textvarianten sehen aus wie die h1, sind aber keine zweite Hauptüberschrift */
.hero__h{font-family:var(--ff-head);font-weight:700;
  font-size:clamp(2rem,4.15vw,3.3rem);line-height:1.1;letter-spacing:-.018em;
  margin:0;color:#fff}
.hero__h em{font-style:normal;color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .hero__text{transition:none;transform:none}
}

/* Understatement: die Einheit („Mrd. €", „Mio. €") tritt deutlich zurück —
   die Zahl trägt, die Einheit begleitet nur. */
.zahl .n em{
  font-style:normal;
  font-size:.3em;
  font-weight:600;
  color:var(--ink-35);
  letter-spacing:.02em;
  margin-left:.18em;
  vertical-align:.55em;
}

/* Zahl und Einheit gehören zusammen — nie umbrechen lassen.
   Bei fünf schmalen Spalten riss „500 Mio. €" sonst auf zwei Zeilen. */
.zahl .n{white-space:nowrap}

/* ── Beratungsseite ──────────────────────────────────────── */
.bgruende{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(22px,3vw,44px)}
.bgrund h3{margin-bottom:.5em}
.bgrund p{color:var(--ink-70)}
.bgrund{padding-top:1.3rem;border-top:2px solid var(--rot)}

.bbeleg{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);
  margin-top:clamp(38px,5vw,64px);padding-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--linie)}
.bbeleg__i .n{display:block;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;
  letter-spacing:-.03em;line-height:1;color:var(--rot);white-space:nowrap}
.bbeleg__i .n i{font-style:normal;font-size:.55em;font-weight:400;color:var(--ink-35);margin-right:.1em}
.bbeleg__i .n em{font-style:normal;font-size:.34em;font-weight:600;color:var(--ink-35);
  margin-left:.18em;vertical-align:.5em}
.bbeleg__i .l{display:block;margin-top:.5em;font-size:.84rem;color:var(--ink-55);line-height:1.4}

.bwege{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(20px,3vw,36px)}
.bweg{background:#fff;border:1px solid var(--linie);border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .25s var(--t),transform .25s var(--t)}
.bweg:hover{box-shadow:0 16px 40px rgba(0,0,0,.09);transform:translateY(-3px)}
.bweg__b{aspect-ratio:16/9;overflow:hidden;background:var(--grau-2)}
.bweg__b img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--t)}
.bweg:hover .bweg__b img{transform:scale(1.045)}
.bweg__t{padding:clamp(1.1rem,2vw,1.6rem);display:flex;flex-direction:column;flex:1}
.bweg__t p{color:var(--ink-70);margin:.6em 0 1.2em}
.bweg__cta{margin-top:auto;font-weight:600;font-size:.92rem;color:var(--rot);
  text-decoration:none;display:inline-flex;align-items:center;gap:.45em}
.bweg:hover .bweg__cta .btn__pfeil{transform:translateX(4px)}

.bsystem{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:start}
.bsystem__t p{color:var(--ink-70);margin-top:1em}
.bfelder{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.bfelder li{padding:.75em 1em;background:var(--grau);border-radius:0;
  font-size:.92rem;font-weight:600;color:var(--ink);
  border-left:3px solid var(--rot)}

.bfoerder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:start}
.bfoerder__x .klein{margin-top:1.1em;color:var(--ink-35)}

@media(max-width:860px){
  .bsystem,.bfoerder{grid-template-columns:1fr}
}

/* ── Beratung: Detailseiten ──────────────────────────────── */
.bfeldliste{display:grid;gap:clamp(22px,3vw,40px)}
/* Investoren · sechs Gründe: etwas mehr Luft zwischen Kopf und erster Karte */
#vorteile .bfeldliste{margin-top:clamp(6px,1vw,14px)}
.bfeld{background:#fff;border:1px solid var(--linie);border-radius:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(220px,.8fr) 1.8fr}
/* Bild füllt die Spalte, die Höhe bestimmt der Text (hochformatige Bilder blähten die Karte auf) */
.bfeld__b{position:relative;overflow:hidden;background:var(--grau-2);min-height:220px}
.bfeld__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bfeld__t{padding:clamp(1.2rem,2.2vw,1.9rem)}
.bfeld__t h3{margin-bottom:.5em}
.bfeld__was{color:var(--ink-70)}
.bfeld__spalten{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.3em 0}
.bfeld__spalten h4{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rot);margin-bottom:.6em}
.bfeld__spalten ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.bfeld__spalten li{font-size:.9rem;color:var(--ink-70);padding-left:1em;position:relative}
.bfeld__spalten li{padding-left:1.15em}
.bfeld__spalten li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--rot)}
.bfeld__n{display:block;font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--rot);margin-bottom:.35em}
.bfeld__wirkung{margin:0;padding-top:1.1em;border-top:1px solid var(--linie);
  font-size:.94rem;font-weight:600;color:var(--ink)}

.bphasen{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,3vw,36px)}
/* 5 Schritte (z. B. Investoren-Ablauf): am Desktop alle in einer Reihe */
.bphasen--5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.bphase{padding-top:1.2rem;border-top:2px solid var(--linie)}
.bphase__n{font-size:.8rem;font-weight:800;color:var(--rot);letter-spacing:.06em}
.bphase__p{display:block;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-35);margin:.25em 0 .5em}
.bphase h3{font-size:1.1rem;margin-bottom:.4em}
.bphase p{font-size:.92rem;color:var(--ink-70)}

.bkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.6vw,32px)}
.bkarte{background:#fff;border:1px solid var(--linie);border-radius:0;overflow:hidden}
.bkarte__b{aspect-ratio:16/10;overflow:hidden;background:var(--grau-2)}
.bkarte__b img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--t)}
.bkarte:hover .bkarte__b img{transform:scale(1.045)}
.bkarte__t{padding:1.1rem 1.2rem 1.3rem}
.bkarte__t h3{font-size:1.08rem;margin-bottom:.45em}
.bkarte__t p{font-size:.92rem;color:var(--ink-70)}

.btypen{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(18px,2.6vw,30px)}
.btyp{padding:clamp(1.1rem,2vw,1.5rem);background:var(--grau);border-radius:0}
.btyp__nr{display:block;font-size:.8rem;font-weight:800;color:var(--rot);letter-spacing:.06em;margin-bottom:.5em}
.btyp h3{font-size:1.05rem;margin-bottom:.45em}
.btyp p{font-size:.9rem;color:var(--ink-70)}
.btyp__w{list-style:none;padding:0;margin:.9em 0 .8em;display:flex;flex-wrap:wrap;gap:.35rem}
.btyp__w li{font-size:.74rem;font-weight:600;background:#fff;border:1px solid var(--linie);
  border-radius:0;padding:.28em .7em;color:var(--ink-70)}
.btyp__e{margin:0;font-size:.86rem;color:var(--ink)}
.btyp__e b{color:var(--rot)}

.bpakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2.6vw,28px);align-items:start}
.bpaket{position:relative;background:#fff;border:1px solid var(--linie);border-radius:0;
  padding:clamp(1.3rem,2.2vw,1.7rem);display:flex;flex-direction:column;height:100%}
.bpaket__badge{position:absolute;top:-11px;left:clamp(1.3rem,2.2vw,1.7rem);
  background:var(--rot);color:#fff;border-radius:0;padding:.3em .85em;
  font-size:.72rem;font-weight:700;letter-spacing:.04em}
.bpaket h3{font-size:1.12rem;margin-bottom:.35em}
.bpaket__fuer{font-size:.86rem;color:var(--ink-55);margin:0 0 1em}
.bpaket__preis{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:0}
.bpaket__note{font-size:.8rem;color:var(--rot);font-weight:600;margin:.3em 0 1.1em}
.bpaket__l{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:.45rem}
.bpaket__l li{font-size:.88rem;color:var(--ink-70);padding-left:1.1em;position:relative}
.bpaket__l li::before{content:"✓";position:absolute;left:0;color:var(--rot);font-size:.85em}
.bpaket__cta{margin-top:auto;align-self:flex-start}

@media(max-width:760px){
  .bfeld{grid-template-columns:1fr}
  .bfeld__b{min-height:180px;aspect-ratio:16/9}
  .bfeld__spalten{grid-template-columns:1fr;gap:1.1rem}
}

/* ══ Motive aus dem CI-Logo: Globus & Schlüsselloch ════════════════════════
   Das Logo ist ein Globus (international) mit den Initialen C und I, wobei das
   I zugleich ein Schlüsselloch ist — Clavis = lateinisch „Schlüssel". Daraus:
   • Globus, langsam rotierend, als Hintergrundbewegung (Vorbild Coffee-Stain)
   • Schlüsselloch als ruhiges Accessoire („der Schlüssel zu Ihrem Vorhaben")
   Beides bleibt Hintergrund — Karten und Flächen bleiben rechteckig. */

.sec--gruen, .sec--news{position:relative}
.sec--gruen > .wrap, .sec--news > .wrap{position:relative;z-index:1}

.deko{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.motiv{position:absolute;display:block;width:min(52vw,520px);aspect-ratio:1;
  background:center/contain no-repeat;opacity:.08;will-change:transform}
.deko--leise .motiv{opacity:.05}

/* Globus (News) — langsam rotierend */
.deko--globus .motiv{background-image:url(../img/globus-dunkel.svg)}
.deko--globus .motiv--1{top:-16%;right:-6%;animation:globusdreh 140s linear infinite}
.deko--globus .motiv--2{bottom:-22%;left:-10%;width:min(34vw,340px);
  animation:globusdreh 180s linear infinite reverse}
@keyframes globusdreh{to{transform:rotate(360deg)}}

/* Schlüsselloch (CTA, grün) — ruhiges Schweben */
.deko--schluessel .motiv{background-image:url(../img/schluessel-hell.svg);opacity:.09}
.deko--schluessel .motiv--1{top:-14%;right:-6%;width:min(40vw,400px);
  animation:schweb 24s var(--t) infinite alternate}
.deko--schluessel .motiv--2{bottom:-24%;left:-8%;width:min(30vw,300px);opacity:.06;
  animation:schweb2 30s var(--t) infinite alternate}
@keyframes schweb{from{transform:translateY(0) scale(1)}to{transform:translateY(-7%) scale(1.05)}}
@keyframes schweb2{from{transform:translateY(0)}to{transform:translateY(6%)}}

/* Weiche Wellenkante statt harter Farbkante — auf ALLEN dunklen CTAs (sitewide) */
.sec--gruen::before{content:"";position:absolute;left:0;right:0;top:0;
  transform:translateY(-100%);height:clamp(26px,4vw,56px);background:var(--ink);
  pointer-events:none;z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70L0 34C300 6 560 6 720 26C900 48 1160 62 1440 30L1440 70Z' fill='%23fff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70L0 34C300 6 560 6 720 26C900 48 1160 62 1440 30L1440 70Z' fill='%23fff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* Schlüsselloch-Motiv als ruhig schwebendes Accessoire — auf ALLEN CTAs (sitewide) */
/* Schlüsselloch-Motiv entfernt (07.10.2026) — im Abschlussblock
   steht das I der Bildmarke, siehe .cta__i. */

@media (prefers-reduced-motion:reduce){
  .motiv{animation:none!important}
}

/* ── Beratung: Marktlücke-Statement + Referenz-Streifen (aus Consulting) ── */
.bluecke__in{max-width:62rem;border-left:3px solid var(--rot);padding-left:clamp(20px,3vw,44px)}
.bluecke__in h2{margin-top:.25em}
.bluecke__in .lead{margin-top:1.05em;max-width:46em}

.bref{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,14px);
  margin-top:clamp(28px,3.4vw,48px)}
.bref__i{border:1px solid var(--linie);background:#fff;color:var(--ink-70);
  padding:.7em 1.15em;font-weight:600;font-size:.95rem;
  transition:border-color .4s var(--t),color .4s var(--t),transform .4s var(--t)}
.bref__i:hover{border-color:var(--rot);color:var(--rot);transform:translateY(-2px)}

/* ══ Reduzierter Hero (19.08.2026) — weisser Streifen + Vollbreite-Video mit
   kleinem Text oben links + drei halb überlappende Container (E&V-Muster) ══ */
/* ── Hero vollflächig im BMW-Stil (28.08.2026) ──────────────
   Randloses Video über die volle Höhe, Header transparent darüber
   (Home rendert ohne heller_kopf → weisse Nav), Positionierungszeile
   unten links in Weiss mit rotem „weltweit"-Akzent, eine CTA darunter.
   Scrim + Slideshow kommen aus den Basis-Regeln (.hero__bg::after / .hero__slide). */
.hero--bmw{position:relative;padding:0;height:85svh;min-height:476px;max-height:816px;
  margin-inline:clamp(16px,3vw,48px);background:#0e0f11;overflow:hidden}
.hero--bmw .hero__bg{position:absolute;inset:0;z-index:0}

/* Kleine Bildunterschrift unten links: nur Titel + Destination.
   Liegt als Geschwister von .hero__bg (z-index:2) ÜBER dem Scrim; der Text
   wird per JS mit der aktiven Slide aktualisiert (sanfter Fade über .is-da). */
.hero__cap{position:absolute;z-index:2;margin:0;
  /* exakt in der Flucht zum Logo: Rasterrand + Innenabstand, abzüglich
     des Aussenabstands, mit dem der Hero selbst eingerückt ist */
  left:calc(max((100vw - var(--max)) / 2, 0px) + var(--pad) - clamp(16px,3vw,48px));
  bottom:clamp(22px,3.6vw,46px);
  color:#fff;opacity:0;transition:opacity .45s var(--t);text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero__cap.is-da{opacity:1}
/* Designelement (Variante B): Name in Fraunces, Ort als gesperrte Versalien,
   feine rote Kante links — ruhig, editorial, nicht zu viel. */
.cap__t{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:2px solid var(--rot)}
.cap__name{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;
  font-size:clamp(1.25rem,2.1vw,1.9rem);letter-spacing:-.01em;line-height:1.05;color:#fff}
.cap__ort{font-size:clamp(.62rem,.8vw,.72rem);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
@media(max-width:600px){.cap__t{padding-left:12px;gap:4px}}

/* ── Resort-Hero (projekt_reich): gerahmt + animiert wie Home-Hero,
   Overlay unten links am Rahmen-Rand (Label · Name · Untertitel) ── */
.rhero .rhero__in{position:absolute;z-index:2;left:0;right:0;
  bottom:clamp(40px,6vw,88px);color:#fff}
.rhero .rhero__in .wrap{width:100%}
.rhero .zurueck{display:inline-block;color:rgba(255,255,255,.85);font-size:.85rem;font-weight:600;
  letter-spacing:.02em;margin-bottom:clamp(14px,2vw,22px);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.rhero .zurueck:hover{color:#fff}
.rhero__label{display:block;font-size:clamp(.66rem,.9vw,.8rem);font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:.7rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.rhero h1{color:#fff;font-family:var(--ff-head);font-weight:500;
  font-size:clamp(2.25rem,5.2vw,4.1rem);line-height:1.02;letter-spacing:-.032em;margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.rhero__sub{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.4;
  margin:clamp(.7rem,1.1vw,1rem) 0 0;max-width:44ch;padding-left:16px;border-left:2px solid var(--rot);
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.rhero .filmbtn{margin-top:clamp(18px,2vw,26px)}

/* ── Resort-Überblick: Text + gerahmtes Logo ── */
.rueber{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.rueber--solo{display:block}
.rueber--solo .rueber__t{max-width:820px}
.rueber__logo{margin-top:clamp(1.9rem,3.2vw,2.8rem);display:flex;justify-content:flex-end}
.rueber__intro{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.7;color:var(--ink);margin:.6em 0 0}
.rueber__text{color:var(--ink-70);line-height:1.7;margin:1em 0 0}
.rueber__body{max-width:820px}
.rlogo{margin:0;background:#fff;border:1px solid var(--linie);padding:clamp(18px,2.4vw,32px);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 18px 48px -30px rgba(15,20,22,.3)}
.rlogo img{width:100%;max-width:150px;height:auto;display:block}
.rzahlen{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);margin-top:clamp(24px,3vw,38px)}
.rzahl .n{display:block;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:900;color:var(--rot);line-height:1}
.rzahl .l{display:block;font-size:.85rem;color:var(--ink-70);margin-top:.4em;max-width:22ch}
@media(max-width:820px){.rueber{grid-template-columns:1fr;gap:34px}.rueber__logo{max-width:360px}}

/* ── Resort-Ausstattung: Kacheln mit Icon über dem Merkmal ── */
.ramen{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(12px,1.4vw,18px)}
.ramen__i{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.7rem,1vw,1rem);
  padding:clamp(18px,2vw,26px);background:var(--grau);border-bottom:2px solid transparent;
  transition:transform .3s var(--t),border-color .3s var(--t),background .3s var(--t),box-shadow .3s var(--t)}
.ramen__i:hover{transform:translateY(-4px);background:#fff;border-bottom-color:var(--rot);
  box-shadow:0 18px 44px -26px rgba(15,20,22,.35)}
.ramen__ic{display:block;width:clamp(28px,3vw,34px);height:clamp(28px,3vw,34px);color:var(--rot);
  transform:scale(.4);opacity:0;transition:transform .5s var(--t),opacity .5s var(--t)}
.ramen__ic svg{width:100%;height:100%;display:block}
.ramen__i.in .ramen__ic{transform:scale(1);opacity:1}
.ramen__x{font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}

/* ── Golf-Merkmale (3 Kennzahlen unter dem Text) ── */
.golfmerkmale{list-style:none;padding:0;margin:clamp(20px,2.4vw,32px) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,26px);align-items:start}
.golfmerkmale li{display:flex;flex-direction:column;min-width:0}
.golfmerkmale b{font-size:clamp(1rem,1.6vw,1.4rem);font-weight:900;color:var(--rot);line-height:1.08}
.golfmerkmale span{font-size:.76rem;line-height:1.35;color:var(--ink-70);margin-top:.45em}
@media(max-width:480px){.golfmerkmale{gap:10px}.golfmerkmale b{font-size:.92rem}.golfmerkmale span{font-size:.68rem}}
/* Golf-Mini-Galerie (4 kleinere Bilder unter dem Golfbild) */
.golfmini{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(16px,2vw,24px)}
.golfmini__i{margin:0;overflow:hidden;background:var(--grau-2);aspect-ratio:4/3}
.golfmini__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--t)}
.golfmini__i:hover img{transform:scale(1.05)}
@media(max-width:620px){.golfmini{grid-template-columns:1fr 1fr}}
/* Highlights (bis zu 3 herausragende Merkmale/USPs, Golf-Muster generalisiert) */
.rhls{display:flex;flex-direction:column;gap:clamp(48px,7vw,104px)}
.rhl{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
/* Klickbare Mini-Galerie → tauscht das grosse Hauptbild */
.rthema__b--wechsel{transition:opacity .32s var(--t)}
.golfmini__i.klick{cursor:pointer;position:relative}
.golfmini__i.klick::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--rot);transition:box-shadow .25s var(--t)}
.golfmini__i.klick:hover::after{box-shadow:inset 0 0 0 3px var(--rot)}
.golfmini__i.is-aktiv::after{box-shadow:inset 0 0 0 3px var(--rot)}
.golfmini__i.klick:focus-visible{outline:2px solid var(--rot);outline-offset:2px}

/* ── Resort-Immobilien: Karten (synchron zum Portal) ── */
.rimmoport{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2vw,26px)}
.rimmok{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);
  transition:transform .35s var(--t),box-shadow .35s var(--t)}
.rimmok:hover{transform:translateY(-4px);box-shadow:0 24px 56px -30px rgba(15,20,22,.4)}
.rimmok__b{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--grau-2)}
.rimmok__b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--t)}
.rimmok:hover .rimmok__b img{transform:scale(1.05)}
.rimmok__badge{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35em .8em}
.rimmok__t{padding:clamp(17px,1.7vw,22px);display:flex;flex-direction:column;gap:.5rem;flex:1}
.rimmok__typ{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot)}
.rimmok__t h4{font-size:1.12rem;margin:0;letter-spacing:-.01em}
.rimmok__spec{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.1rem}
.rimmok__pill{font-size:.76rem;font-weight:600;color:var(--ink-70);background:var(--grau);
  border:1px solid var(--linie);padding:.3em .7em}
.rimmok__foot{margin-top:auto;padding-top:clamp(12px,1.4vw,16px);border-top:1px solid var(--linie);
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.rimmok__preis{font-size:1.22rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.rimmok__go{font-size:.82rem;font-weight:700;color:var(--rot);white-space:nowrap}
.rimmok:hover .rimmok__go .btn__pfeil{transform:translateX(4px)}

/* ── Resort-Video ── */
/* ── Standort: 3 wichtigste Städte der Umgebung (vor der Karte) ── */
.rstaedte{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px);
  margin-bottom:clamp(20px,2.6vw,32px)}
@media(max-width:900px){.rstaedte{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.rstaedte{grid-template-columns:1fr 1fr}}
.rstadt{display:flex;flex-direction:column;padding:clamp(16px,1.8vw,22px);background:var(--grau);
  border-bottom:2px solid var(--rot)}
.rstadt__d{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.rstadt__n{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:800;letter-spacing:-.01em;margin:.3em 0 .1em}
.rstadt__e{font-size:.82rem;color:var(--ink-70)}
@media(max-width:620px){.rstaedte{grid-template-columns:1fr}}

.rvideo{position:relative;background:#0e0f11;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 34px 90px -34px rgba(15,20,22,.5)}
.rvideo video,.rvideo iframe{width:100%;height:100%;display:block;object-fit:cover;border:0}
/* YouTube-Fassade */
.ytlite{cursor:pointer}
.ytlite__poster{width:100%;height:100%;object-fit:cover;display:block}
.ytlite::after{content:"";position:absolute;inset:0;background:rgba(10,12,14,.28);transition:background .3s var(--t)}
.ytlite:hover::after{background:rgba(10,12,14,.14)}
.ytlite__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:50%;border:0;cursor:pointer;
  background:var(--rot);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px -10px rgba(187,74,40,.6);transition:transform .3s var(--t)}
.ytlite:hover .ytlite__play{transform:translate(-50%,-50%) scale(1.08)}
.ytlite__ico{font-size:clamp(1.3rem,1.8vw,1.7rem);margin-left:.15em;line-height:1}
.ytlite__hint{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 16px;margin:0;
  font-size:.76rem;color:rgba(255,255,255,.85);background:linear-gradient(0deg,rgba(10,12,14,.7),transparent);
  text-align:center}
.ytlite.is-an::after,.ytlite.is-an .ytlite__play,.ytlite.is-an .ytlite__hint,.ytlite.is-an .ytlite__poster{display:none}

/* Drei Vorteils-Karten als eigene Sektion unter dem Vollbild-Hero. */
.vorteilsband{padding:clamp(20px,2.6vw,38px) 0 0}
.hero__cards{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
/* Bildkachel: Foto füllt die Karte, Text steht im abgedunkelten Fuss */
.hero__card{position:relative;display:block;padding:0;border:0;overflow:hidden;background:#111;
  aspect-ratio:16/10;box-shadow:0 24px 50px -34px rgba(15,20,22,.5)}
.hero__card-b{position:absolute;inset:0;overflow:hidden;background:var(--grau-2)}
.hero__card-b::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,20,22,.04) 28%,rgba(15,20,22,.84) 100%)}
.hero__card-b img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero__card:hover .hero__card-b img{transform:scale(1.05)}
.hero__card-t{position:absolute;inset:auto 0 0 0;z-index:1;padding:clamp(16px,1.8vw,26px);min-width:0}
.hero__card-t::before{content:"";display:block;width:26px;height:2px;background:var(--rot);margin-bottom:.7rem}
.hero__card h3{color:#fff;font-size:clamp(1.05rem,1.5vw,1.28rem);margin:0 0 .3rem;letter-spacing:-.01em}
.hero__card p{color:rgba(255,255,255,.86);line-height:1.5;font-size:.88rem;margin:0}
@media (prefers-reduced-motion:reduce){.hero__card:hover .hero__card-b img{transform:none}}
@media(max-width:860px){
  .hero--bmw{height:75svh;max-height:none;margin-inline:clamp(10px,3vw,16px)}
  .hero__cards{grid-template-columns:1fr;gap:14px}
  .hero__card{aspect-ratio:16/9}
}

/* ── Intro/Positionierung nach dem Hero (vor den Kennzahlen) ── */
.intro{padding:clamp(2.6rem,5.5vw,5rem) 0 clamp(.8rem,2vw,1.4rem)}
.intro__in{text-align:left}
.intro .eyebrow{justify-content:flex-start}
.intro h2{margin:.5rem 0 .6rem}
.intro__sub{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.2rem .6rem;margin:0 0 1.5rem;
  font-size:clamp(.95rem,1.3vw,1.15rem);font-weight:700;color:var(--ink);letter-spacing:.01em}
.intro__sub i{color:var(--rot);font-style:normal;font-weight:400}
.intro__text{color:var(--ink-70);line-height:1.75;max-width:none;margin:0;
  font-size:clamp(.98rem,1.1vw,1.05rem)}

.iv-stmt__t p + p{margin-top:1em}

/* ── Unternehmen: Führungsfoto + funktionale Aufstellung + Award-Badges ── */
.teamfoto{margin:clamp(1.5rem,3vw,2.4rem) 0 0;max-width:1100px}
.teamfoto img{width:100%;height:auto;display:block;background:var(--grau-2)}
.teamfoto figcaption{margin-top:.7rem;font-size:.9rem;color:var(--ink-55)}
.teamfoto figcaption b{color:var(--ink);font-weight:700}
.teamrollen{list-style:none;padding:0;margin:clamp(1.6rem,3vw,2.4rem) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linie)}
.teamrollen li{padding:1rem 1.2rem 1rem 0;border-right:1px solid var(--linie)}
.teamrollen li:last-child{border-right:0}
.teamrollen li b{display:block;font-size:1rem;color:var(--ink)}
.teamrollen li span{font-size:.86rem;color:var(--ink-55)}
.bpaslide{position:relative;height:100%;aspect-ratio:438/826}
.awardk .bpaslide img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;
  opacity:0;transition:opacity .7s ease}
.awardk .bpaslide img.is-an{opacity:1}
@media(prefers-reduced-motion:reduce){.awardk .bpaslide img{transition:none}}
@media(max-width:860px){
  .teamrollen{grid-template-columns:1fr 1fr}
  .teamrollen li:nth-child(2n){border-right:0}
}
@media(max-width:560px){
  .teamrollen{grid-template-columns:1fr}
  .teamrollen li{border-right:0;border-bottom:1px solid var(--linie)}
  .teamrollen li:last-child{border-bottom:0}
}

/* ── Marken & Partner: Logo-Wände (Graustufe → Farbe beim Hover) ── */
.markenpartner .kopf{max-width:760px}
.logogruppe__t{text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45);font-weight:700;margin:clamp(1.8rem,3.4vw,2.6rem) 0 1rem}
.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:0;border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.logogrid__i{background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 14px;
  min-height:86px;box-shadow:inset -1px -1px 0 var(--linie)}
.logogrid__i img{max-width:100%;max-height:42px;object-fit:contain;
  filter:grayscale(1);opacity:.6;transition:filter .3s var(--t),opacity .3s var(--t)}
.logogrid__i:hover img{filter:none;opacity:1}
@media(max-width:560px){.logogrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}

/* ── Leistungen: cinematischer Bild-Breaker ── */
.leistbreaker{position:relative;min-height:clamp(300px,42vw,460px);display:flex;align-items:center;
  justify-content:center;background:var(--bg) center/cover no-repeat;overflow:hidden}
.leistbreaker::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,14,.48),rgba(10,12,14,.58))}
.leistbreaker__in{position:relative;z-index:2;text-align:center;color:#fff;max-width:780px;padding:0 var(--pad)}
.leistbreaker__in .eyebrow--hell{justify-content:center;margin-bottom:.6rem}
.leistbreaker__in p{margin:0;font-size:clamp(1.4rem,2.9vw,2.3rem);font-weight:800;line-height:1.2;
  color:#fff;letter-spacing:-.015em}

/* ── Leistungen-Dachseite: zwei Ast-Kacheln (Bild + Overlay + Text) ── */
.lwege{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.lweg{position:relative;display:flex;align-items:flex-end;min-height:clamp(300px,34vw,430px);
  overflow:hidden;background:var(--bg) center/cover no-repeat;color:#fff}
.lweg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,14,.12) 0,rgba(10,12,14,.4) 52%,rgba(10,12,14,.82) 100%);
  transition:background .35s var(--t)}
.lweg:hover::after{background:linear-gradient(180deg,rgba(10,12,14,.22) 0,rgba(10,12,14,.5) 52%,rgba(10,12,14,.88) 100%)}
.lweg__t{position:relative;z-index:1;padding:clamp(22px,2.6vw,36px)}
.lweg__t h3{color:#fff;font-size:clamp(1.3rem,2.1vw,1.8rem);margin:0 0 .5rem;letter-spacing:-.01em}
.lweg__t p{color:rgba(255,255,255,.9);line-height:1.55;font-size:.95rem;margin:0 0 1.1rem;max-width:46ch}
.lweg__cta{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;letter-spacing:.02em}
.lweg:hover .lweg__cta .btn__pfeil{transform:translateX(4px)}
@media(max-width:860px){.lwege{grid-template-columns:1fr}}

/* ── Vermarktung: Vermarktungsmix (4 Kanäle) + Praxisbeispiel ─────────── */
.vmix{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.vmix--2{grid-template-columns:repeat(2,1fr);max-width:980px}
.vmix__k{padding:clamp(1.1rem,2vw,1.6rem);background:var(--grau);border-top:2px solid var(--rot)}
.vmix__k h3{font-size:1.1rem;margin-bottom:.3em}
.vmix__x{font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:.9em}
.vmix__li{list-style:none;padding:0;margin:0}
.vmix__li li{position:relative;padding:.55em 0 .55em 1.1em;font-size:.88rem;line-height:1.5;
  color:var(--ink-70);border-top:1px solid var(--linie)}
.vmix__li li::before{content:"";position:absolute;left:0;top:1.15em;width:6px;height:6px;background:var(--rot)}
.vvt{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,4.5vw,4rem);align-items:start}
.vvt__b{aspect-ratio:4/5;overflow:hidden;background:var(--grau-2);position:sticky;top:110px}
.vvt__b img{width:100%;height:100%;object-fit:cover}
.vvt__s{list-style:none;padding:0;margin:0}
.vvt__s li{display:grid;grid-template-columns:3.2rem 1fr;gap:0 .6rem;padding:1.5rem 0;border-top:1px solid var(--linie)}
.vvt__s li:first-child{border-top:2px solid var(--rot)}
.vvt__n{font-size:.85rem;font-weight:800;color:var(--rot);letter-spacing:.06em;padding-top:.2em}
.vvt__s h3{font-size:1.15rem;margin-bottom:.4em}
.vvt__s p{font-size:.95rem;line-height:1.65;color:var(--ink-70);max-width:52ch}
.vvt__tag{display:inline-block;margin-left:.4em;padding:.2em .6em;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:.2em;color:var(--rot);border:1px solid var(--rot)}
@media(max-width:1000px){.vmix{grid-template-columns:repeat(2,1fr)}.vvt{grid-template-columns:1fr}.vvt__b{position:static;aspect-ratio:16/10}}
@media(max-width:600px){.vmix{grid-template-columns:1fr}.vvt__s li{grid-template-columns:2.4rem 1fr}}

/* ── Resort-Konzept: fünf Rollen, automatisch wechselnd ──────────────── */
.rk{padding-top:clamp(2.6rem,5vw,4.5rem)}
.rk__tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px);margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.rk__tab{position:relative;display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:1rem 0 0;font:inherit;color:var(--ink-55);transition:color .3s var(--t)}
.rk__tab::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--linie)}
.rk__n{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--ink-35);margin-bottom:.3em;
  transition:color .3s var(--t)}
.rk__name{display:block;font-family:var(--ff-head);font-size:clamp(.95rem,1.2vw,1.12rem);font-weight:700;line-height:1.25}
.rk__tab:hover{color:var(--ink)}
.rk__tab.is-aktiv{color:var(--ink)}
.rk__tab.is-aktiv .rk__n{color:var(--rot)}
.rk__bar{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden}
.rk__bar b{display:block;height:100%;width:0;background:var(--rot)}
.rk__tab.is-aktiv .rk__bar b{width:100%;transition:width var(--rk-dauer,6000ms) linear}
/* Aktiver Reiter: hellgrauer Hintergrund, geht nahtlos in den Inhaltskasten über */
.rk__tab{padding:1rem clamp(.8rem,1.3vw,1.2rem) 1.05rem;transition:color .3s var(--t),background-color .35s var(--t)}
.rk__tab.is-aktiv{background:var(--grau)}
@media(min-width:861px){
  .rk__tabs{margin-bottom:0}
}
@media(max-width:860px){
  .rk__tabs{margin-bottom:10px}
}
.rk__panels{display:grid;background:var(--grau);padding:clamp(1.4rem,3vw,2.6rem) clamp(1.2rem,3.2vw,3rem)}
.rk__p{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .5s var(--t)}
.rk__p.is-aktiv{opacity:1;pointer-events:auto}
.rk__x{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:600;letter-spacing:-.015em;line-height:1.3;
  max-width:22ch;color:var(--ink)}
.rk__li{list-style:none;padding:0;margin:0}
.rk__li li{position:relative;padding:.75em 0 .75em 1.6rem;font-size:.97rem;line-height:1.6;color:var(--ink-70);
  border-top:1px solid var(--linie);opacity:0;transform:translateY(10px)}
.rk__li li::before{content:"";position:absolute;left:0;top:1.25em;width:7px;height:7px;background:var(--rot)}
.rk__p.is-aktiv .rk__li li{opacity:1;transform:none;
  transition:opacity .55s var(--t) var(--d,0ms),transform .55s var(--t) var(--d,0ms)}
@media(min-width:861px){
  .rk__p{grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,4rem);display:grid;align-items:start}
}
@media(max-width:860px){
  .rk__tabs{grid-template-columns:repeat(2,1fr)}
  .rk__x{margin-bottom:1rem;max-width:none}
}
@media(max-width:520px){.rk__tabs{grid-template-columns:1fr 1fr;gap:10px}}
@media (prefers-reduced-motion:reduce){
  .rk__li li{opacity:1;transform:none}
  .rk__tab.is-aktiv .rk__bar b{transition:none;width:100%}
}

/* ── Resort-Konzept: Panorama mit Parallax + Textkasten ─────────────── */
.rpx{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(80vh,680px);padding:clamp(3rem,7vw,6rem) 0;background:var(--grau-2)}
.rpx__b{position:absolute;top:-14%;bottom:-14%;left:0;right:0;z-index:0;will-change:transform}
.rpx__b img{width:100%;height:100%;object-fit:cover;display:block}
/* Panorama „Resort-Konzept": langsame Kamerafahrt (Zoom + Gleiten) auf dem Bild,
   die Parallax-Verschiebung liegt auf dem Container .rpx__b — keine Kollision */
@keyframes rpxFahrt{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  50%{transform:scale(1.13) translate3d(-2.4%,-1.2%,0)}
  100%{transform:scale(1.07) translate3d(2%,1%,0)}
}
.rpx__b img{transform-origin:58% 50%;animation:rpxFahrt 36s ease-in-out infinite alternate;will-change:transform}
@media (prefers-reduced-motion:reduce){.rpx__b img{animation:none}}
.rpx__b::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(29,29,31,.28) 0%,rgba(29,29,31,.06) 45%,rgba(29,29,31,0) 70%)}
.rpx__in{position:relative;z-index:1;width:100%}
.rpx__k{max-width:600px;margin-left:auto;background:#fff;
  padding:clamp(1.6rem,3vw,2.9rem);box-shadow:0 30px 60px -35px rgba(29,29,31,.45)}
.rpx__k h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.14;margin:.5rem 0 .9rem}
.rpx__k p{color:var(--ink-70);line-height:1.72;font-size:.99rem}
.rpx__k p + p{margin-top:1em}
@media(max-width:860px){
  .rpx{min-height:0;padding:0;display:block}
  .rpx__b{position:relative;top:0;bottom:0;height:46vh;min-height:260px;transform:none!important}
  .rpx__k{max-width:none;margin:-3.5rem 0 0}
  .rpx__in{padding-bottom:clamp(2rem,6vw,3rem)}
}

/* ── Projektfakten (Resortbuch-Projekte) ────────────────────────────── */
.pfakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 clamp(20px,3vw,44px);margin:0}
.pfakten > div{padding:.9rem 0;border-top:1px solid var(--linie)}
.pfakten dt{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rot);margin-bottom:.3em}
.pfakten dd{margin:0;font-size:.97rem;color:var(--ink)}

/* Resort-Logo im Projekt-Hero (weisse Fassung aus dem Resortbuch) */
.phero__logo{display:block;max-width:clamp(120px,14vw,190px);max-height:96px;width:auto;height:auto;
  margin:0 0 1.1rem;object-fit:contain;object-position:left center}

/* ── Wertschöpfungskette auf der Leistungsseite: acht Schritte am Pfad ──
   Jeder Schritt trägt sein eigenes Pfadstück; die rote Strichlinie läuft beim
   Scrollen nacheinander durch, danach setzen sich die Punkte. */
.lkette{--gap:clamp(18px,2vw,30px);list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,3.4vw,48px) var(--gap)}
.lkette__s{position:relative;padding-top:2rem;
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--t),transform .6s var(--t);
  transition-delay:calc(var(--i) * .12s)}
.lkette.is-da .lkette__s{opacity:1;transform:none}
/* graues Pfadstück bis zum nächsten Schritt */
.lkette__s::before{content:"";position:absolute;left:0;right:calc(-1 * var(--gap));top:7px;height:2px;
  background-image:linear-gradient(90deg,var(--linie) 0 7px,transparent 7px 14px);
  background-size:14px 2px;background-repeat:repeat-x}
/* rotes Pfadstück, das nacheinander durchläuft */
.lkette__s::after{content:"";position:absolute;left:0;top:7px;height:2px;width:0;z-index:1;
  background-image:linear-gradient(90deg,var(--rot) 0 7px,transparent 7px 14px);
  background-size:14px 2px;background-repeat:repeat-x;
  transition:width .5s linear;transition-delay:calc(var(--i) * .45s)}
.lkette.is-da .lkette__s::after{width:calc(100% + var(--gap))}
.lkette__s:nth-child(4n)::before,.lkette__s:nth-child(4n)::after{right:0}
.lkette.is-da .lkette__s:nth-child(4n)::after{width:100%}
.lkette__s:last-child::before,.lkette__s:last-child::after{right:0}
.lkette__punkt{position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--linie);z-index:2;
  transition:border-color .4s var(--t),background .4s var(--t),transform .4s var(--t);
  transition-delay:calc(var(--i) * .45s + .2s)}
.lkette.is-da .lkette__punkt{border-color:var(--rot);background:var(--rot);transform:scale(1.15)}
.lkette__n{display:block;font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--rot);margin-bottom:.3em}
.lkette__s h3{font-size:1.06rem;margin-bottom:.35em}
.lkette__s p{font-size:.9rem;line-height:1.6;color:var(--ink-70)}
@media(max-width:980px){
  .lkette{grid-template-columns:repeat(2,1fr)}
  .lkette__s:nth-child(4n)::before,.lkette__s:nth-child(4n)::after{right:calc(-1 * var(--gap))}
  .lkette.is-da .lkette__s:nth-child(4n)::after{width:calc(100% + var(--gap))}
  .lkette__s:nth-child(2n)::before,.lkette__s:nth-child(2n)::after{right:0}
  .lkette.is-da .lkette__s:nth-child(2n)::after{width:100%}
}
@media(max-width:560px){
  .lkette{grid-template-columns:1fr;gap:0}
  .lkette__s{padding:0 0 1.9rem 2rem}
  .lkette__s::before,.lkette__s::after{left:5px;right:auto;top:6px;bottom:0;width:2px;height:auto;
    background-image:linear-gradient(180deg,var(--linie) 0 7px,transparent 7px 14px);
    background-size:2px 14px;background-repeat:repeat-y}
  .lkette__s::after{background-image:linear-gradient(180deg,var(--rot) 0 7px,transparent 7px 14px);
    height:0;width:2px;transition:height .5s linear;transition-delay:calc(var(--i) * .45s)}
  .lkette.is-da .lkette__s::after{height:100%;width:2px}
  .lkette__s:last-child::before,.lkette__s:last-child::after{bottom:auto;height:0}
  .lkette__punkt{left:0;top:.1rem}
}
@media (prefers-reduced-motion:reduce){
  .lkette__s{opacity:1;transform:none;transition:none}
  .lkette__s::after{transition:none}
  .lkette__punkt{transition:none;border-color:var(--rot);background:var(--rot)}
}


/* ── Geschäftsbereiche: automatischer Wechsel alle 7 s (JS: clavis.js) ── */
.bereich__img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.02);transition:transform 7s linear}
.bereich.is-aktiv .bereich__img{transform:scale(1.1)}
/* nicht aktive Spalten treten zurück, solange die Automatik läuft */
.bereich::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.32);opacity:0;transition:opacity .7s var(--t)}
.bereiche.laeuft .bereich:not(.is-aktiv)::before{opacity:1}
/* Fortschrittsbalken oben an der Kachel */
.bereich__bar{position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:rgba(255,255,255,.16)}
.bereich__bar b{display:block;height:100%;width:0;background:var(--rot)}
.bereich.is-aktiv .bereich__bar b{width:100%;transition:width var(--ber-dauer,7000ms) linear}
.bereiche.pausiert .bereich.is-aktiv .bereich__bar b{transition:none;width:100%}
/* Tablet/Handy: eigenes Kachelbild sichtbar (steht bewusst NACH der Grundregel) */
@media (max-width:1000px){.bereich__img{display:block}}
@media (prefers-reduced-motion:reduce){
  .bereich__img,.bereich.is-aktiv .bereich__img{transition:none;transform:none}
  .bereich.is-aktiv .bereich__bar b{transition:none;width:100%}
}

/* ── Weltkarte: Umschalter Weltweit / Europa ─────────────────────────── */
.wkzoom{display:flex;width:max-content;margin:0 auto 4px;border:1px solid var(--linie);background:#fff}
.wkzoom__b{font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.65em 1.35em;border:0;background:transparent;color:var(--ink-55);cursor:pointer;
  transition:background .25s var(--t),color .25s var(--t)}
.wkzoom__b:hover{color:var(--ink)}
.wkzoom__b.is-aktiv{background:var(--ink);color:#fff}
.wkzoom__b:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.wkarte__bg{transition:opacity .8s var(--t)}
.wkarte__bg--eu{opacity:0}
.wkarte.ist-eu .wkarte__bg{opacity:0}
.wkarte.ist-eu .wkarte__bg--eu{opacity:1}
.wkarte.ist-eu .wkpin{left:var(--xe,var(--x));top:var(--ye,var(--y))}
.wkarte.ist-eu .wkarte__innen .wkpin--aussen{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .wkarte__innen,.wkarte__bg,.wkarte__innen .wkpin{transition:none}
}

/* Hinweis „provisionsfrei für den Erwerber" (Immobilien-Übersicht, Startseite) */
.provfrei{display:flex;align-items:baseline;gap:.7em;margin-top:1.3em;font-size:.95rem;font-weight:600;color:var(--ink)}
.provfrei::before{content:"";flex:0 0 auto;width:.55em;height:.55em;background:var(--rot);transform:translateY(-.05em)}
#immobilien .provfrei{margin-top:2.2em}

/* ── Einwilligung (Metricool-Besucherstatistik) ─────────────────────── */
.consent{position:fixed;left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:9000;
  display:flex;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .35s var(--t),transform .35s var(--t)}
.consent[hidden]{display:none}
.consent.is-da{opacity:1;transform:none}
.consent__in{width:100%;max-width:980px;background:#fff;border-top:3px solid var(--rot);box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:clamp(1rem,2vw,1.4rem) clamp(1.1rem,2.4vw,1.8rem);display:flex;gap:clamp(1rem,2.4vw,2rem);align-items:center}
.consent__t{flex:1;font-size:.9rem;line-height:1.55;color:var(--ink-70)}
.consent__t b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:.25em}
.consent__t p{margin:0}
.consent__t a{color:var(--rot);text-decoration:underline}
.consent__b{display:flex;gap:10px;flex:0 0 auto}
@media(max-width:700px){
  .consent__in{flex-direction:column;align-items:stretch}
  .consent__b .btn{flex:1;justify-content:center}
}

/* ── Investoren: Marktumfeld „Two-hour Home" ─────────────────────────── */
.mkt__kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin:clamp(1.6rem,3vw,2.6rem) 0}
.mkt__k{background:#fff;padding:clamp(1rem,2vw,1.5rem)}
.mkt__k .n{display:block;font-family:var(--ff-head);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:700;line-height:1;color:var(--rot);letter-spacing:-.02em}
.mkt__k .l{display:block;margin-top:.55rem;font-size:.9rem;line-height:1.45;color:var(--ink-70)}
.mkt__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.mkt__text h3,.mkt__fahrt h3{font-size:1.05rem;margin:0 0 .8rem}
.mkt__text p{color:var(--ink-70);line-height:1.7}
.mkt__text p + p{margin-top:1em}
.mkt__fahrt{background:#fff;padding:clamp(1.1rem,2.4vw,1.8rem)}
.mkt__z{display:grid;grid-template-columns:minmax(0,13rem) 1fr auto;gap:.9rem;align-items:center;margin:.7rem 0;font-size:.9rem}
.mkt__o{color:var(--ink)}
.mkt__t{color:var(--ink-55);font-variant-numeric:tabular-nums;white-space:nowrap}
.mkt__bar{position:relative;height:10px;background:var(--grau);overflow:hidden}
.mkt__bar b{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--ink);transition:width 1.2s var(--t)}
.mkt__fahrt.in .mkt__bar b{width:var(--w)}
.mkt__z--grenze{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--linie)}
.mkt__z--grenze .mkt__o,.mkt__z--grenze .mkt__t{color:var(--rot)}
.mkt__z--grenze .mkt__bar{background:none;border-right:2px solid var(--rot);height:14px}
.mkt__quelle{margin-top:clamp(1.2rem,2vw,1.6rem);font-size:.78rem;line-height:1.55;color:var(--ink-55);max-width:900px}
@media(max-width:900px){
  .mkt__kpi{grid-template-columns:repeat(2,1fr)}
  .mkt__grid{grid-template-columns:1fr}
}
@media(max-width:520px){.mkt__z{grid-template-columns:1fr auto}.mkt__z .mkt__bar{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:reduce){.mkt__bar b{transition:none;width:var(--w)}}

/* ── Unternehmen: Marktwissen ─────────────────────────────────────────── */
.mw{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,4rem);align-items:start}
/* Marktwissen · Karten: Stichwort, Nummer, Aussage — gestaffelt eingeblendet,
   die rote Linie oben wächst beim Erscheinen von links ein. */
.mwk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(20px,3vw,34px)}
.mwk__k{position:relative;background:#fff;border:1px solid var(--linie);padding:clamp(1.1rem,1.9vw,1.6rem);
  transition:transform .5s var(--t),box-shadow .5s var(--t)}
.mwk__k::before{content:"";position:absolute;top:-1px;left:0;height:3px;width:0;background:var(--rot);
  transition:width .7s var(--t);transition-delay:calc(var(--mwi) * .08s + .15s)}
.mwk__k.in::before{width:46px}
.mwk__k:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,22,.07)}
.mwk__n{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--ink-35)}
.mwk__s{display:block;margin:.5em 0 .45em;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rot)}
.mwk__k p{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-70)}
.mwk__q{margin-top:clamp(16px,2.2vw,26px);color:var(--ink-35)}
/* Immobilien · „Zweitwohnsitz mit Service": ruhiger Absatz unter den Karten */
.immserv{max-width:760px;margin:clamp(22px,3vw,34px) auto 0;padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--linie);text-align:center}
.immserv h3{font-size:1.05rem;margin-bottom:.5em}
.immserv p{color:var(--ink-70);line-height:1.65}
@media(max-width:1000px){.mwk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.mwk{grid-template-columns:1fr}}
.mw .kopf{margin-bottom:0}
.mw__li{list-style:none;padding:0;margin:0 0 1.4rem}
.mw__li li{position:relative;padding:.7em 0 .7em 1.6rem;border-top:1px solid var(--linie);color:var(--ink-70);line-height:1.55}
.mw__li li::before{content:"";position:absolute;left:0;top:1.2em;width:7px;height:7px;background:var(--rot)}
@media(max-width:860px){.mw{grid-template-columns:1fr;align-items:start}}

/* ── Gemeinsamer Abschnitt „Woran wir gerade arbeiten": Kapital-Hinweis + Link ── */
.ivorh{display:flex;flex-direction:column}
.ivorh__t{display:flex;flex-direction:column;flex:1}
.ivorh__kapital{position:absolute;top:1rem;right:1rem;z-index:2;background:#fff;color:var(--ink);
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.42em .8em}
.ivorh__link{margin-top:auto;padding-top:1rem;font-size:.9rem;font-weight:600;color:var(--rot);text-decoration:none}
.ivorh__link:hover{color:var(--ink)}

/* ── Unternehmen: Aufstellung als Bildstreifen mit animiertem Kasten ────── */
.teamband{position:relative;overflow:hidden;margin-top:clamp(2.4rem,5vw,4rem);min-height:clamp(420px,44vw,540px);display:flex;align-items:center}
.teamband__bg{position:absolute;inset:0}
.teamband__bg img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%;animation:rpxFahrt 40s ease-in-out infinite alternate}
.teamband__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,14,.5) 0%,rgba(10,12,14,.12) 65%,rgba(10,12,14,0) 100%)}
.teamband__in{position:relative;z-index:1;width:100%;padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.teamband__box{background:#fff;max-width:520px;padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 24px 60px rgba(0,0,0,.28);border-top:3px solid var(--rot)}
.teamband__stage{display:grid;margin:1.1rem 0 1.5rem;min-height:clamp(150px,15vw,178px)}
.teamband__item{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .6s var(--t),transform .6s var(--t);pointer-events:none}
.teamband__item.is-aktiv{opacity:1;transform:none}
.teamband__n{display:block;font-family:var(--ff-head);font-size:clamp(3rem,6vw,4.6rem);font-weight:700;line-height:.95;color:var(--rot);letter-spacing:-.03em}
.teamband__rolle{display:block;margin-top:.55rem;font-family:var(--ff-head);font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.15;color:var(--ink)}
.teamband__bereich{display:block;margin-top:.35rem;font-size:1rem;color:var(--ink-55)}
.teamband__nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.teamband__nav button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;width:100%;
  font-size:.72rem;font-weight:600;line-height:1.25;color:var(--ink-55);transition:color .3s var(--t)}
.teamband__nav button span{display:block;min-height:2.5em}
.teamband__nav button:hover,.teamband__nav button.is-aktiv{color:var(--ink)}
.teamband__nav i{display:block;height:2px;margin-top:.45rem;background:var(--linie);overflow:hidden}
.teamband__nav i b{display:block;height:100%;width:0;background:var(--rot)}
.teamband__nav button.is-aktiv i b{width:100%;transition:width var(--tb-dauer,4000ms) linear}
.teamband.ist-pausiert .teamband__nav button.is-aktiv i b{transition:none}
@media(max-width:700px){
  .teamband{display:block;min-height:0}
  .teamband__bg{position:relative;height:240px}
  .teamband__in{padding-top:0;margin-top:-70px}
  .teamband__box{max-width:none}
  .teamband__nav{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .teamband__bg img{animation:none}
  .teamband__item{transition:none}
  .teamband__nav button.is-aktiv i b{transition:none}
}

/* Auszeichnungen: Jahr und Titel untereinander (liefen inline zusammen) */

/* ── Startseite: Kennzahlen → sobald ausgezählt der Satz ─────────────────── */
.zahlen__satz{margin:clamp(1.6rem,3vw,2.4rem) auto 0;max-width:30ch;text-align:center;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;   /* wie die Hero-Untertitel (.cap__name) */
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.22;letter-spacing:-.015em;color:var(--rot)}
.zahlenwechsel.ist-bereit{display:grid}
.zahlenwechsel.ist-bereit > *{grid-area:1/1}
.zahlenwechsel.ist-bereit .zahlen{transition:opacity .7s var(--t),transform .7s var(--t)}
.zahlenwechsel.ist-bereit .zahlen__satz{margin:0 auto;align-self:center;opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .9s var(--t) .15s,transform .9s var(--t) .15s}
.zahlenwechsel.ist-satz .zahlen{opacity:0;transform:translateY(-10px);pointer-events:none}
.zahlenwechsel.ist-satz .zahlen__satz{opacity:1;transform:none}
@media(max-width:700px){
  /* Handy: nur das Zitat. Untereinander gestapelt nehmen die vier Kennzahlen
     den halben Bildschirm ein — und der Satz sagt selbst, dass sie nicht im
     Vordergrund stehen sollen (Wunsch 04.11.2026). */
  .zahlenwechsel .zahlen{display:none}
  .zahlenwechsel.ist-bereit{display:block}
  /* Dieselbe Spezifität wie die Animationsregel, sonst bleibt der Satz
     unsichtbar, bis das Auszählen durchläuft — und das gibt es hier nicht mehr. */
  .zahlenwechsel .zahlen__satz,
  .zahlenwechsel.ist-bereit .zahlen__satz{margin:0 auto;opacity:1;transform:none;
    pointer-events:auto;transition:none}
}

/* ── Hotelberatung Bestand: drei Stufen als Treppe ─────────────────────── */
.bstufen{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);align-items:end}
.bstufe{position:relative;display:flex;flex-direction:column;background:var(--grau);border-top:3px solid var(--rot);
  padding:clamp(1.3rem,2.4vw,2rem);min-height:calc(230px + var(--stufe,1) * 55px)}
.bstufe__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:auto;padding-bottom:1.4rem}
.bstufe__n{font-family:var(--ff-head);font-size:clamp(2.6rem,4.6vw,3.8rem);font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--rot)}
.bstufe__balken{display:flex;gap:5px;padding-bottom:.35rem}
.bstufe__balken i{display:block;width:clamp(18px,2vw,26px);height:6px;background:var(--linie)}
.bstufe__balken i.voll{background:var(--rot)}
.bstufe h3{margin:0 0 .55rem;font-size:clamp(1.2rem,1.8vw,1.45rem)}
.bstufe p{margin:0;color:var(--ink-70);font-size:.95rem;line-height:1.6}
.bstufe:last-child{background:var(--ink);color:#fff}
.bstufe:last-child h3{color:#fff}
.bstufe:last-child p{color:rgba(255,255,255,.76)}
.bstufe:last-child .bstufe__balken i{background:rgba(255,255,255,.22)}
.bstufe:last-child .bstufe__balken i.voll{background:var(--rot)}
@media(max-width:860px){
  .bstufen{grid-template-columns:1fr;align-items:stretch}
  .bstufe{min-height:0}
  .bstufe__kopf{margin-bottom:0}
}

/* ══════════════════════════════════════════════════════════════════════
   Käuferseite: Lifestyle-Einstiege, Sortierung, Merkliste, Rechner,
   Suchauftrag, Ansprechpartnerin  (06.10.2026)
   ══════════════════════════════════════════════════════════════════════ */

/* Lifestyle-Chips: breiter als die übrigen Filtergruppen, eigene Optik */
.immfilter__g--ls{grid-column:1/-1}
.immfilter__b--ls{gap:.5rem}
.ifb--ls{display:inline-flex;align-items:center;gap:.5em;padding:.52em 1em;
  font-size:.86rem;background:var(--grau);border-color:transparent}
.ifb--ls:hover{background:#fff;border-color:var(--ink-35)}
.ifb--ls.is-aktiv{background:var(--ink);border-color:var(--ink)}
.lsi{width:15px;height:15px;flex:none;opacity:.6;
  background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ifb--ls.is-aktiv .lsi{opacity:.9}
/* Schlichte Linien-Piktogramme, inline als Maske — keine Extra-Requests */
.lsi--strand{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 18h20M2 18c2-2 4-2 6 0 2-2 4-2 6 0 2-2 4-2 6 0'/%3E%3Ccircle cx='17' cy='7' r='3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 18h20M2 18c2-2 4-2 6 0 2-2 4-2 6 0 2-2 4-2 6 0'/%3E%3Ccircle cx='17' cy='7' r='3'/%3E%3C/svg%3E")}
.lsi--golf{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M9 21V3l9 4.5L9 12'/%3E%3Ccircle cx='6' cy='20' r='2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M9 21V3l9 4.5L9 12'/%3E%3Ccircle cx='6' cy='20' r='2'/%3E%3C/svg%3E")}
.lsi--marina{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3v16M8 6h8M4 13a8 8 0 0 0 16 0'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3v16M8 6h8M4 13a8 8 0 0 0 16 0'/%3E%3C/svg%3E")}
.lsi--spa{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 21c0-5 3-8 8-9-5-1-8-4-8-9-0 5-3 8-8 9 5 1 8 4 8 9z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 21c0-5 3-8 8-9-5-1-8-4-8-9-0 5-3 8-8 9 5 1 8 4 8 9z'/%3E%3C/svg%3E")}
.lsi--natur{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 20v-7M12 13 6 6h12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 20v-7M12 13 6 6h12z'/%3E%3C/svg%3E")}

/* Leiste über der Liste: Trefferzahl links, Werkzeuge rechts */
.immleiste{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;margin:2.4rem 0 1.4rem}
.immleiste .immzahl{margin:0}
.immwerkz{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.immsort{display:inline-flex;align-items:center;gap:.5em}
.immsort__l{font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55)}
.immsort select{font:inherit;font-size:.86rem;padding:.42em 2em .42em .7em;
  border:1px solid var(--linie);background:#fff;color:var(--ink);
  border-radius:0;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1d1f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7em center;background-size:10px}
.immsort select:focus-visible{outline:2px solid var(--rot);outline-offset:2px}

/* Merkliste */
.mi{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round}
.immmerkfilter{display:inline-flex;align-items:center;gap:.5em;font:inherit;
  font-size:.86rem;font-weight:600;padding:.46em .9em;cursor:pointer;
  border:1px solid var(--linie);background:#fff;color:var(--ink);
  transition:border-color .25s var(--t),background .25s var(--t)}
.immmerkfilter:hover{border-color:var(--ink-35)}
.immmerkfilter.is-aktiv{background:var(--ink);border-color:var(--ink);color:#fff}
.immmerkfilter.is-aktiv .mi{fill:currentColor}
.immmerkfilter.is-leer{opacity:.5}
.immmerkfilter__n{min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums;
  padding:.05em .35em;background:var(--grau);border-radius:999px;font-size:.78rem}
.immmerkfilter.is-aktiv .immmerkfilter__n{background:rgba(255,255,255,.22)}

.immkarte{position:relative}
.immmerk{position:absolute;top:.8rem;right:.8rem;z-index:3;
  display:inline-flex;align-items:center;gap:.4em;font:inherit;font-size:.78rem;
  font-weight:600;padding:.44em .7em;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.92);border:0;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .22s var(--t),color .22s var(--t)}
.immmerk:hover{background:#fff}
.immmerk .immmerk__t{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .3s var(--t),opacity .22s var(--t)}
.immkarte:hover .immmerk .immmerk__t,.immmerk:focus-visible .immmerk__t,
.immmerk.is-an .immmerk__t{max-width:6em;opacity:1}
.immmerk.is-an{background:var(--rot);color:#fff}
.immmerk.is-an .mi{fill:currentColor}
/* in der Objektbox: volle Breite wie die Buttons darüber */
.immmerk--box{position:static;width:100%;justify-content:center;
  padding:.9em 1em;font-size:.86rem;background:transparent;
  border:1px solid var(--linie);backdrop-filter:none}
.immmerk--box .immmerk__t{max-width:none;opacity:1;overflow:visible}
.immmerk--box:hover{background:var(--grau)}
.immmerk--box.is-an{background:var(--rot);border-color:var(--rot);color:#fff}

/* Energiezeile auf der Karte (Pflichtangaben auch in der Liste) */
.immkarte__en{margin:.5rem 0 0;font-size:.74rem;color:var(--ink-55)}

/* Objektbox: Provision prominent unter dem Preis */
.objektbox__prov{margin:.35rem 0 0;font-size:.8rem;font-weight:700;
  letter-spacing:.04em;color:var(--rot)}

/* Ansprechpartnerin — Monogramm statt Foto */
.ap{display:flex;align-items:center;gap:.9rem;margin:0 0 1rem}
.ap__mono{width:52px;height:52px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--gruen);color:#fff;
  font-size:1.02rem;font-weight:700;letter-spacing:.05em}
.ap__t{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ap__name{font-size:.98rem;line-height:1.25}
.ap__rolle{font-size:.78rem;color:var(--ink-55)}
.ap__wege{list-style:none;margin:0 0 1rem;padding:0;display:flex;
  flex-direction:column;gap:.3rem;font-size:.88rem}
.ap__wege a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--linie)}
.ap__wege a:hover{border-color:var(--rot);color:var(--rot)}
.ap__tel{font-weight:700;font-variant-numeric:tabular-nums}
.ap__termin{display:inline-block;font-size:.84rem;font-weight:600;color:var(--rot);
  text-decoration:none}
.ap__termin:hover{text-decoration:underline}

/* Pflichthinweise (Provision, Widerruf) */
.objektbox--recht{font-size:.74rem;line-height:1.6;color:var(--ink-55)}
.objektbox--recht p{margin:0 0 .5rem}
.objektbox--recht p:last-child{margin:0}
.objektbox--recht a{color:var(--ink-70)}

/* Rechner */
.rech{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
  margin:1.2rem 0 .8rem;align-items:start}
.rech__felder{display:flex;flex-direction:column;gap:.9rem}
.rech__felder label{display:grid;grid-template-columns:1fr auto;gap:.3rem .5rem;
  align-items:center}
.rech__felder label span{grid-column:1/-1;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
.rech__felder input{font:inherit;font-size:1rem;font-variant-numeric:tabular-nums;
  padding:.56em .7em;border:1px solid var(--linie);background:#fff;width:100%}
.rech__felder input:focus-visible{outline:2px solid var(--rot);outline-offset:1px;
  border-color:var(--rot)}
.rech__felder input:disabled{background:var(--grau);color:var(--ink-55)}
.rech__felder label i{font-style:normal;font-size:.86rem;color:var(--ink-55)}
.rech__erg{margin:0;padding:1.1rem 1.2rem;background:var(--grau);display:flex;
  flex-direction:column;gap:.5rem}
.rech__erg>div{display:flex;justify-content:space-between;gap:1rem;
  align-items:baseline;font-size:.88rem}
.rech__erg dt{color:var(--ink-70)}
.rech__erg dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.rech__sum{padding-top:.5rem;border-top:1px solid var(--linie)}
.rech__sum--stark dt{font-weight:700;color:var(--ink)}
.rech__sum--stark dd{font-size:1.12rem;color:var(--rot)}
.rech__h3{margin-top:2.6rem}
.rech__hint{color:var(--ink-55);margin-top:.2rem}
@media(max-width:720px){.rech{grid-template-columns:1fr;gap:1.1rem}}

/* Suchauftrag */
.sauftrag{max-width:900px;margin:2.6rem auto 0}
.sauftrag__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.1rem}
.sauftrag label{display:flex;flex-direction:column;gap:.35rem}
.sauftrag label span{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-55)}
.sauftrag input,.sauftrag select,.sauftrag textarea{font:inherit;font-size:.96rem;
  padding:.62em .8em;border:1px solid var(--linie);background:#fff;color:var(--ink);
  border-radius:0;width:100%}
.sauftrag select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1d1f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:10px}
.sauftrag input:focus-visible,.sauftrag select:focus-visible,
.sauftrag textarea:focus-visible{outline:2px solid var(--rot);outline-offset:1px;
  border-color:var(--rot)}
.sauftrag__notiz{margin-top:1.1rem}
.sauftrag textarea{resize:vertical;min-height:5.4em}
.sauftrag__falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sauftrag__f{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  margin-top:1.6rem}
.sauftrag__f .klein{margin:0;color:var(--ink-55);max-width:38em}

/* Footer-Telefon */
.ft__tel{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════
   Geschäftsseite: Hero als typografische Bühne über der Weltkarte
   (statt Resort-Videos — Eigentümer suchen Nachweis, nicht Urlaub)
   ══════════════════════════════════════════════════════════════════════ */
.bhero{position:relative;min-height:min(88svh,820px);display:flex;
  align-items:flex-end;padding:clamp(7rem,16vh,11rem) 0 clamp(3rem,7vh,5rem);
  background:#0e1a17;overflow:hidden;color:#fff;isolation:isolate}
/* Karte: weit, ruhig, sehr dunkel — sie trägt, sie drängt sich nicht auf */
.bhero__karte{position:absolute;inset:-6% -4%;z-index:0;opacity:.3;
  animation:bhdrift 64s ease-in-out infinite alternate}
.bhero__bg{width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  filter:grayscale(1) brightness(1.5) contrast(.7)}
@keyframes bhdrift{from{transform:scale(1.04) translate3d(-.8%,0,0)}
                   to{transform:scale(1.1) translate3d(.8%,-1%,0)}}
/* Verlauf, damit die Typografie unten immer steht */
.bhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,26,23,.72) 0%,rgba(14,26,23,.3) 38%,
             rgba(14,26,23,.88) 78%,rgba(14,26,23,.97) 100%)}

/* Projekt-Pins: zünden nacheinander und bleiben als leises Glimmen */
.bhpin{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--rot);
  opacity:0;transform:scale(.3);
  box-shadow:0 0 0 0 rgba(176,8,16,.5);
  animation:bhzuend .9s var(--t) forwards, bhpuls 4.5s ease-in-out infinite;
  animation-delay:calc(.5s + var(--i) * .11s), calc(1.4s + var(--i) * .11s)}
@keyframes bhzuend{to{opacity:.95;transform:scale(1)}}
@keyframes bhpuls{0%,100%{box-shadow:0 0 0 0 rgba(176,8,16,.45)}
                  50%{box-shadow:0 0 0 7px rgba(176,8,16,0)}}

.bhero__in{position:relative;z-index:2}
.eyebrow--hell{color:rgba(255,255,255,.62)}
.eyebrow--hell::before{background:var(--rot)}
.bhero__h1{font-family:var(--ff-head);font-size:clamp(2.1rem,5.6vw,4.3rem);
  line-height:1.04;letter-spacing:-.025em;font-weight:700;margin:.5rem 0 0;
  max-width:19ch;text-wrap:balance}
.bhero__h1 em{font-style:normal;color:rgba(255,255,255,.52)}
.bhero__lead{margin:1.3rem 0 0;max-width:50ch;font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.6;color:rgba(255,255,255,.8)}

/* Kennzahlen als Beleg — direkt unter der Aussage */
.bhzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.6rem);margin:clamp(2rem,4vh,3rem) 0 0;
  padding-top:clamp(1.4rem,3vh,2rem);border-top:1px solid rgba(255,255,255,.16);
  max-width:1000px}
.bhzahl dt{margin:0}
.bhzahl__n{display:block;font-family:var(--ff-head);font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.bhzahl dd{margin:.5rem 0 0;font-size:.8rem;line-height:1.45;
  color:rgba(255,255,255,.6)}

.bhero__btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,4vh,2.8rem)}
.bhero .hero__scroll{bottom:1.4rem}

@media(max-width:900px){
  .bhzahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.6rem}
}
@media(max-width:560px){
  .bhero{min-height:auto;padding:8.5rem 0 3.4rem}
  .bhero__h1{max-width:none}
  .bhzahl dd{font-size:.74rem}
}
@media(prefers-reduced-motion:reduce){
  .bhero__karte{animation:none}
  .bhpin{animation:bhzuend .01s forwards;opacity:.95;transform:none}
}

/* Zähler im Bühnen-Hero: Präfix/Suffix nicht kursiv */
.bhzahl__n i{font-style:normal}

/* Bühnen-Hero: Kennzahlen auf dunklem Grund — die helle .zahl-Komponente
   bringt ihre eigenen Farben mit, hier werden sie überschrieben. */
.bhero .bhzahl__n.zahl{text-align:left}
.bhero .bhzahl__n .n{display:block;color:#fff;font-weight:700;
  font-size:clamp(1.55rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.02em;
  white-space:nowrap}
.bhero .bhzahl__n .n i{display:inline;font-style:normal;font-weight:400;
  font-size:.5em;color:rgba(255,255,255,.5);margin:0 .14em 0 0;
  vertical-align:.08em;letter-spacing:0}
.bhero .bhzahl__n .n i:last-child{margin:0 0 0 .18em}

/* Headline darf zwei Zeilen füllen, bevor sie umbricht */
.bhero__h1{max-width:24ch}

/* Pins etwas präsenter — sie sind der Beleg, nicht Dekor */
.bhpin{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  box-shadow:0 0 0 0 rgba(176,8,16,.55),0 0 14px 2px rgba(176,8,16,.45)}
@keyframes bhpuls{0%,100%{box-shadow:0 0 0 0 rgba(176,8,16,.5),0 0 14px 2px rgba(176,8,16,.4)}
                  50%{box-shadow:0 0 0 9px rgba(176,8,16,0),0 0 16px 3px rgba(176,8,16,.55)}}
.bhero__karte{opacity:.42}

@media(max-width:560px){.bhero__karte{opacity:.26}}

/* Hero ohne Kennzahlen (Wunsch 06.10.2026): Bühne kompakter, Buttons näher */
.bhero{min-height:min(76svh,720px)}
.bhero__btns{margin-top:clamp(1.8rem,3.5vh,2.4rem)}

/* Pins ploppen leuchtend auf: kurzer Lichtblitz mit Überschwingen,
   danach ruhiges Glimmen (Wunsch 06.10.2026) */
.bhpin{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:#ff2b34;opacity:0;transform:scale(.2);
  animation:bhplopp 1.15s cubic-bezier(.22,1.4,.36,1) forwards,
            bhglimm 5s ease-in-out infinite;
  animation-delay:calc(.45s + var(--i) * .105s), calc(1.7s + var(--i) * .105s)}
/* Ring, der beim Zünden nach aussen läuft */
.bhpin::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid rgba(255,70,78,.85);opacity:0;transform:scale(.4);
  animation:bhring 1.5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.45s + var(--i) * .105s)}

@keyframes bhplopp{
  0%  {opacity:0;transform:scale(.2);
       box-shadow:0 0 0 0 rgba(255,70,78,0)}
  38% {opacity:1;transform:scale(1.75);
       box-shadow:0 0 22px 9px rgba(255,70,78,.85),0 0 48px 18px rgba(255,70,78,.4)}
  62% {opacity:1;transform:scale(.88);
       box-shadow:0 0 16px 5px rgba(255,70,78,.5)}
  100%{opacity:.95;transform:scale(1);
       box-shadow:0 0 13px 2px rgba(255,70,78,.45)}
}
@keyframes bhring{
  0%  {opacity:.9;transform:scale(.4)}
  70% {opacity:.22;transform:scale(3.4)}
  100%{opacity:0;transform:scale(4.6)}
}
@keyframes bhglimm{
  0%,100%{box-shadow:0 0 12px 2px rgba(255,70,78,.4)}
  50%    {box-shadow:0 0 20px 5px rgba(255,70,78,.75)}
}
@media(prefers-reduced-motion:reduce){
  .bhpin{animation:none;opacity:.95;transform:none;
         box-shadow:0 0 12px 2px rgba(255,70,78,.45)}
  .bhpin::after{animation:none;opacity:0}
}

/* ── Pins: eigene Ebene über dem Scrim, durchgehend leuchtend ──────────
   (sie lagen im abgedunkelten Kartencontainer und waren nur ein Schimmer) */
.bhero__pins{position:absolute;inset:-6% -4%;z-index:1;pointer-events:none;
  animation:bhdrift 64s ease-in-out infinite alternate}
.bhero::after{z-index:1}          /* Scrim bleibt unter den Pins */
.bhero__pins{z-index:2}
.bhero__in{z-index:3}

.bhpin{position:absolute;left:var(--x);top:var(--y);
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#ff4d55;opacity:0;transform:scale(.2);
  /* Dauerglühen: der Kern bleibt hell, der Hof atmet nur leicht */
  animation:bhplopp 1.15s cubic-bezier(.22,1.4,.36,1) forwards,
            bhglimm 4.2s ease-in-out infinite;
  animation-delay:calc(.45s + var(--i) * .105s), calc(1.7s + var(--i) * .105s)}
.bhpin::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(255,110,116,.9);opacity:0;transform:scale(.4);
  animation:bhring 1.5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.45s + var(--i) * .105s)}

@keyframes bhplopp{
  0%  {opacity:0;transform:scale(.2);box-shadow:0 0 0 0 rgba(255,77,85,0)}
  36% {opacity:1;transform:scale(1.9);
       box-shadow:0 0 26px 12px rgba(255,77,85,.95),0 0 60px 24px rgba(255,77,85,.5)}
  62% {opacity:1;transform:scale(.9);
       box-shadow:0 0 20px 7px rgba(255,77,85,.8)}
  100%{opacity:1;transform:scale(1);
       box-shadow:0 0 18px 5px rgba(255,77,85,.85),0 0 40px 12px rgba(255,77,85,.35)}
}
@keyframes bhglimm{
  0%,100%{box-shadow:0 0 18px 5px rgba(255,77,85,.85),0 0 40px 12px rgba(255,77,85,.35)}
  50%    {box-shadow:0 0 24px 8px rgba(255,90,98,1),0 0 54px 18px rgba(255,77,85,.5)}
}
@media(prefers-reduced-motion:reduce){
  .bhero__pins{animation:none}
  .bhpin{animation:none;opacity:1;transform:none;
         box-shadow:0 0 18px 5px rgba(255,77,85,.85),0 0 40px 12px rgba(255,77,85,.35)}
  .bhpin::after{animation:none;opacity:0}
}

/* Höfe enger fassen: in Europa liegen die Projekte dicht beieinander und
   verschmolzen zu einer Wolke. Kern hell, Hof kompakt. */
@keyframes bhplopp{
  0%  {opacity:0;transform:scale(.2);box-shadow:0 0 0 0 rgba(255,77,85,0)}
  36% {opacity:1;transform:scale(1.7);
       box-shadow:0 0 16px 5px rgba(255,77,85,.9),0 0 32px 10px rgba(255,77,85,.35)}
  62% {opacity:1;transform:scale(.92);box-shadow:0 0 12px 3px rgba(255,77,85,.75)}
  100%{opacity:1;transform:scale(1);
       box-shadow:0 0 11px 2px rgba(255,77,85,.9),0 0 22px 5px rgba(255,77,85,.4)}
}
@keyframes bhglimm{
  0%,100%{box-shadow:0 0 11px 2px rgba(255,77,85,.9),0 0 22px 5px rgba(255,77,85,.4)}
  50%    {box-shadow:0 0 15px 4px rgba(255,100,108,1),0 0 30px 8px rgba(255,77,85,.55)}
}
.bhpin{width:8px;height:8px;margin:-4px 0 0 -4px;background:#ff6a71}
@media(prefers-reduced-motion:reduce){
  .bhpin{box-shadow:0 0 11px 2px rgba(255,77,85,.9),0 0 22px 5px rgba(255,77,85,.4)}
}

/* ── Vermarktung · Vorbereitung: vier Pakete aus Entwicklersicht ────── */
.vauf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.6rem);margin-top:clamp(2.4rem,5vh,3.6rem)}
.vauf__k{display:flex;flex-direction:column;padding:clamp(1.6rem,2.6vw,2.2rem);
  background:#fff;border:1px solid var(--linie)}
.sec--grau .vauf__k{background:var(--grau)}
.vauf__kopf{display:flex;gap:1rem;align-items:flex-start;
  padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--linie)}
.vauf__n{flex:none;font-family:var(--ff-head);font-size:1.5rem;font-weight:700;
  line-height:1;color:var(--rot);font-variant-numeric:tabular-nums;
  padding-top:.1em}
.vauf__kopf h3{margin:0;font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.2}
.vauf__x{margin:.4rem 0 0;font-size:.92rem;color:var(--ink-55)}
.vauf__li{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:.72rem}
.vauf__li li{position:relative;padding-left:1.5em;font-size:.93rem;line-height:1.55}
.vauf__li li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--rot)}
.vauf__fuss{margin:clamp(2rem,4vh,2.8rem) 0 0;max-width:62ch;font-size:.95rem;
  line-height:1.65;color:var(--ink-70);padding-left:1.1rem;
  border-left:2px solid var(--rot)}
@media(max-width:860px){.vauf{grid-template-columns:1fr;gap:1.2rem}}

/* ── Nutzungskonzepte (Projektentwicklung): breite Zeilen, Kopf links ── */
.kzlist{display:flex;flex-direction:column;gap:0;margin-top:clamp(2.4rem,5vh,3.6rem);
  border-top:1px solid var(--linie)}
.kz{display:grid;grid-template-columns:minmax(230px,30%) 1fr;
  gap:clamp(1.4rem,4vw,3.4rem);padding:clamp(1.8rem,3.4vh,2.8rem) 0;
  border-bottom:1px solid var(--linie)}
.kz__kopf{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;
  align-content:start}
.kz__n{grid-row:1/3;font-family:var(--ff-head);font-size:1.3rem;font-weight:700;
  line-height:1.15;color:var(--rot);font-variant-numeric:tabular-nums}
.kz__kopf h3{margin:0;font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.18}
.kz__fuer{margin:.3rem 0 0;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-55)}
.kz__text>p{margin:0 0 1.2rem;font-size:1rem;line-height:1.68;color:var(--ink-70);
  max-width:62ch}
.kz__li{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 2rem}
.kz__li li{position:relative;padding-left:1.4em;font-size:.91rem;line-height:1.5}
.kz__li li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:1px;
  background:var(--rot)}

/* Prüfkasten */
.kzpruef{margin-top:clamp(2.4rem,5vh,3.4rem);padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--gruen);color:#fff}
.sec--grau .kzpruef{background:var(--gruen)}
.kzpruef h3{margin:0 0 .6rem;font-size:clamp(1.1rem,2vw,1.4rem);color:#fff}
.kzpruef>p{margin:0 0 1.3rem;max-width:62ch;color:rgba(255,255,255,.78);
  line-height:1.65}
.kzpruef ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 2.4rem}
.kzpruef li{position:relative;padding-left:1.6em;line-height:1.5;font-size:.95rem}
.kzpruef li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  border:1.5px solid rgba(255,255,255,.75);border-radius:50%}

@media(max-width:860px){
  .kz{grid-template-columns:1fr;gap:1rem}
  .kz__li,.kzpruef ul{grid-template-columns:1fr}
}

/* Sprachumschalter im Mobilmenue: der Umschalter erbt die helle Kopffarbe
   und war auf dem weissen Menuegrund unsichtbar. */
@media (max-width:720px){
  .hd__nav .hd__lang{color:var(--ink-35);font-size:1.05rem}
  .hd__nav .hd__lang a{font-size:1.05rem;color:var(--ink-55)}
  .hd__nav .hd__lang a[aria-current]{color:var(--ink)}
}

/* ── Brücke zur anderen Seite ─────────────────────────────────────────
   Gefüllter Knopf in Clavis-Rot mit weißer Schrift (Wunsch 16.10.2026).
   Schrift einen Punkt kleiner als die Menüpunkte (.92rem → .85rem),
   damit der Knopf in der Höhe im Raster der Navigation bleibt. */
.hd__nav a.hd__wechsel{
  display:inline-flex;align-items:center;gap:.5em;
  padding:10px 18px;margin-left:4px;border:0;border-radius:var(--btn-radius);
  background:var(--rot);
  font-size:.85rem;font-weight:600;letter-spacing:-.005em;line-height:1.1;
  color:#fff;white-space:nowrap;text-shadow:none;
  transition:background .25s var(--t),box-shadow .25s var(--t);
}
.hd__nav a.hd__wechsel::after{display:none}
.hd__wechsel-p{color:#fff;font-size:1.02em;
  transition:transform .35s var(--t)}
.hd__nav a.hd__wechsel:hover{background:var(--rot-2);color:#fff;
  box-shadow:0 8px 22px -12px rgba(176,8,16,.85)}
.hd__nav a.hd__wechsel:hover .hd__wechsel-p{transform:translateX(3px)}

/* Heller und mitscrollender Kopf: der Knopf bleibt rot */
.hd--hell .hd__nav a.hd__wechsel,.hd.is-fest .hd__nav a.hd__wechsel{
  background:var(--rot);color:#fff;border:0;text-shadow:none}
.hd--hell .hd__nav a.hd__wechsel:hover,.hd.is-fest .hd__nav a.hd__wechsel:hover{
  background:var(--rot-2);color:#fff}
.hd--hell .hd__nav a.hd__wechsel .hd__wechsel-p,
.hd.is-fest .hd__nav a.hd__wechsel .hd__wechsel-p{color:#fff}

/* ══════════════════════════════════════════════════════════════════════
   I der Bildmarke — Übergang im Hero und Motiv im Abschlussblock
   (Arbeit vom 05.10.2026; ging beim Spiegelvorgang am 06.10. verloren
   und ist hier nachgebaut.)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero: die nächste Szene öffnet sich durch das I ────────────────── */
.hero__slide.is-ib{
  opacity:1;transition:none;z-index:2;
  -webkit-mask:url(../img/i-blende.svg) 50% 45%/var(--ib,9vmin) no-repeat;
          mask:url(../img/i-blende.svg) 50% 45%/var(--ib,9vmin) no-repeat;
  -webkit-mask-size:var(--ib,9vmin);mask-size:var(--ib,9vmin);
}
/* Abdunklung rund um das I, damit die Form lesbar bleibt */
.hero__ibdim{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .45s var(--t);
  background:radial-gradient(closest-side at 50% 45%,
    rgba(9,13,15,.82) 0%,rgba(9,13,15,.66) 45%,rgba(9,13,15,.42) 100%);
}
.hero.is-ibauf .hero__ibdim{opacity:1}

/* ── Abschlussblock: das I als Bildfenster rechts ───────────────────── */
.sec--gruen{position:relative;overflow:hidden}
.cta__i{
  position:absolute;right:clamp(1.5rem,6vw,6rem);top:50%;
  transform:translateY(-50%) scale(.94);
  width:clamp(72px,11vw,124px);height:min(66%,360px);
  background:url(../img/seite/footer-i.webp) center/cover no-repeat;
  -webkit-mask:url(../img/i-blende.svg) center/contain no-repeat;
          mask:url(../img/i-blende.svg) center/contain no-repeat;
  opacity:0;transition:opacity .9s var(--t),transform .9s var(--t);
  pointer-events:none;z-index:0;
}
.sec--gruen .cta__i.in{opacity:1;transform:translateY(-50%) scale(1)}
.sec--gruen .wrap{position:relative;z-index:1}
@media(max-width:860px){.cta__i{display:none}}
@media(prefers-reduced-motion:reduce){
  .cta__i{transition:none;opacity:1;transform:translateY(-50%)}
  .hero__ibdim{transition:none}
}

/* ── Nutzungen jenseits des Tourismus (Startseite Geschäftsseite) ───── */
.nz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);margin-top:clamp(2.4rem,5vh,3.4rem)}
.nz__k{padding-top:1.1rem;border-top:2px solid var(--rot)}
.nz__n{display:block;font-family:var(--ff-head);font-size:.76rem;font-weight:700;
  letter-spacing:.1em;color:var(--rot);margin-bottom:.7rem}
.nz__k h3{margin:0 0 .5rem;font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.2}
.nz__k p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-70)}

.nzfazit{margin-top:clamp(2.6rem,5vh,3.6rem);padding:clamp(1.8rem,3.4vw,2.6rem);
  background:var(--grau);display:grid;grid-template-columns:1fr auto;
  gap:1.4rem clamp(2rem,5vw,4rem);align-items:center}
.sec--grau .nzfazit{background:#fff}
.nzfazit h3{grid-column:1;margin:0 0 .6rem;font-size:clamp(1.1rem,2vw,1.4rem)}
.nzfazit p{grid-column:1;margin:0;max-width:72ch;line-height:1.68;color:var(--ink-70)}
.nzfazit .btn{grid-column:2;grid-row:1/3;white-space:nowrap}
@media(max-width:980px){.nz{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .nz{grid-template-columns:1fr}
  .nzfazit{grid-template-columns:1fr}
  .nzfazit .btn{grid-column:1;grid-row:auto;justify-self:start}
}

/* ══════════════════════════════════════════════════════════════════════
   Werbestreifen zur Käuferseite (Geschäftsseite, 15.10.2026)
   Vollbreites Motiv, Schrift darüber, der ganze Streifen ist der Link.
   ══════════════════════════════════════════════════════════════════════ */
.wb{position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(360px,50vh,540px);background:#0c1412;color:#fff;isolation:isolate}
.wb__b{position:absolute;inset:-14% 0;z-index:0;will-change:transform;display:block}
.wb__b img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.wb::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,16,14,.9) 0%,rgba(10,16,14,.68) 42%,
    rgba(10,16,14,.14) 78%,rgba(10,16,14,.05) 100%)}
.wb__in{position:relative;z-index:2;display:block;width:100%;
  padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(40px,7vh,72px)}
.wb__mark{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:7px 13px;
  background:var(--rot);margin-bottom:clamp(14px,2.4vh,24px)}
.wb__h2{display:block;font-family:var(--ff-head);font-size:clamp(1.7rem,4.2vw,3.1rem);
  font-weight:900;letter-spacing:-.038em;line-height:1.05;max-width:17ch;color:#fff}
.wb__h2 .d{display:block;font-weight:300;color:rgba(255,255,255,.62)}
.wb__lead{display:block;margin:clamp(13px,2.2vh,20px) 0 0;max-width:42ch;
  line-height:1.6;color:rgba(255,255,255,.78)}
.wb__knopf{display:inline-flex;align-items:center;gap:.6em;
  margin-top:clamp(19px,3.2vh,30px);padding:15px 30px;background:#fff;color:var(--ink);
  font-weight:700;font-size:.94rem;border-radius:var(--btn-radius);
  transition:background .25s,color .25s,gap .3s var(--t)}
.wb:hover .wb__knopf{background:var(--rot);color:#fff;gap:1em}
@media(max-width:700px){
  .wb::after{background:linear-gradient(180deg,rgba(10,16,14,.5),rgba(10,16,14,.9))}
  .wb__h2{max-width:none}
}
@media(prefers-reduced-motion:reduce){.wb__b{transform:none!important}}

/* ══════════════════════════════════════════════════════════════════════
   Hero der Geschäftsseite (15.10.2026, Bildfassung 16.10.2026)
   Vollbild-Luftbild, Inhalt unten: links die Aussage, rechts die drei
   Leistungen. Mittlere Gewichte — die Wirkung kommt aus Bild und Raum.
   ══════════════════════════════════════════════════════════════════════ */
.ghero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(120px,18vh,190px) 0 clamp(46px,8vh,92px);
  background:#0c1412;color:#fff;overflow:hidden}
.ghero__b{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Bildfolge: nur das aktive Motiv ist sichtbar, und nur es fährt. Die
   Überblendung dauert bewusst lange — es soll wandern, nicht blinken. */
.ghero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;opacity:0;will-change:transform,opacity;
  transform-origin:54% 42%;transform:scale(1.06);
  transition:opacity 1.8s var(--t)}
.ghero__bild.ist{opacity:1;animation:gherofahrt 11s linear forwards}
@keyframes gherofahrt{
  from{transform:scale(1.05) translate3d(-.8%,.5%,0)}
  to  {transform:scale(1.16) translate3d(.9%,-.9%,0)}}
/* oben genug Deckung für den Kopf, in der Mitte freie Sicht, unten Grund
   für Schrift — wie in Entwurf A */
/* Zwei Lagen: ein gleichmäßiger Schleier, damit die Schrift auf jedem
   Motiv steht, darüber der Verlauf für Kopf und Textbereich. */
.ghero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,13,12,.62) 0%,rgba(8,13,12,.16) 26%,
      rgba(8,13,12,.68) 58%,rgba(8,13,12,.93) 100%),
    linear-gradient(0deg,rgba(8,13,12,.2),rgba(8,13,12,.2))}
.ghero__g{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,5vw,88px);align-items:end}

.ghero__mark{display:block;font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-bottom:clamp(16px,2.6vh,26px);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.ghero__h1{font-family:var(--ff-head);font-size:clamp(1.85rem,3.5vw,2.7rem);
  line-height:1.08;font-weight:500;letter-spacing:-.03em;max-width:28ch;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.42)}
.ghero__h1 .d{display:block;font-weight:300;color:rgba(255,255,255,.66)}
.ghero__lead{margin:clamp(16px,2.6vh,26px) 0 0;max-width:40ch;line-height:1.62;
  font-size:clamp(1rem,1.3vw,1.1rem);color:rgba(255,255,255,.82);
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
.ghero__weg{display:inline-flex;align-items:center;gap:.6em;
  margin-top:clamp(20px,3.2vh,30px);font-size:.95rem;font-weight:600;color:#fff;
  padding-bottom:6px;border-bottom:1.5px solid var(--rot);transition:gap .3s var(--t)}
.ghero__weg:hover{gap:1.1em}

/* Die drei Leistungen */
.lzeilen{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.26)}
.lz{position:relative;display:grid;grid-template-columns:1fr auto;
  gap:.18rem clamp(14px,2vw,28px);align-items:baseline;
  padding:clamp(13px,1.9vh,20px) 0;border-bottom:1px solid rgba(255,255,255,.26);
  color:#fff;transition:padding-left .45s var(--t),background .3s;
  opacity:0;transform:translateX(14px);
  animation:lzauf .8s var(--t) forwards;animation-delay:calc(.35s + var(--i) * .13s)}
.lz:hover,.lz:focus-visible{padding-left:clamp(10px,1.8vw,24px);outline:0;
  background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 70%)}
.lz__t{grid-column:1;font-size:clamp(1.3rem,2.6vw,2.05rem);font-weight:400;
  letter-spacing:-.026em;line-height:1.08;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.lz__x{grid-column:1;margin-top:.3rem;font-size:.9rem;line-height:1.5;
  color:rgba(255,255,255,.7);max-width:40ch;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.lz__p{grid-column:2;grid-row:1/3;align-self:center;font-size:1.45rem;font-weight:700;
  color:#fff;line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.45);
  transition:transform .3s var(--t)}
.lz:hover .lz__p{transform:translateX(6px)}
@keyframes lzauf{to{opacity:1;transform:none}}

.ghero .hero__scroll{bottom:1.6rem}
@media(max-width:900px){
  .ghero__g{grid-template-columns:1fr;gap:clamp(26px,4.5vh,42px)}
  .ghero__h1{max-width:none}
}
@media(max-width:560px){
  .ghero{min-height:auto;padding:clamp(100px,16vh,140px) 0 clamp(36px,6vh,60px)}
  .ghero::after{background:
    linear-gradient(180deg,rgba(8,13,12,.66),rgba(8,13,12,.38) 24%,
      rgba(8,13,12,.9) 58%,rgba(8,13,12,.96)),
    linear-gradient(0deg,rgba(8,13,12,.22),rgba(8,13,12,.22))}
  .lz__x{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  .lz{animation:none;opacity:1;transform:none}
  .ghero__bild{transition:none}
  .ghero__bild.ist{animation:none;transform:scale(1.04)}
}

/* ══════════════════════════════════════════════════════════════════════
   Nachbau verlorener Gestaltung (16.10.2026)
   Diese Blöcke gingen beim Spiegelvorgang am 06.10. verloren; das Markup
   stand weiter in den Vorlagen, nur die Stile fehlten.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Anreise: Flughafen und Fluggesellschaften ─────────────────────── */
.anr{margin-top:clamp(1.6rem,3vh,2.4rem)}
.anr__fh{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .9rem;
  padding-bottom:14px;margin-bottom:clamp(14px,2vh,20px);
  border-bottom:1px solid var(--linie)}
.anr__iata{font-size:.78rem;font-weight:700;letter-spacing:.12em;
  padding:5px 9px;background:var(--ink);color:#fff}
.anr__name{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.anr__weg{font-size:.86rem;color:var(--ink-55)}

.anr__al{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.anr__a{display:grid;grid-template-columns:104px 1fr auto;align-items:center;
  gap:.4rem clamp(14px,2vw,26px);padding:clamp(11px,1.6vh,15px) 0;
  border-bottom:1px solid var(--linie)}
.anr__a:last-child{border-bottom:0}
/* Fremdlogos in ein festes Fenster, damit die Zeilen gleich hoch bleiben */
.anr__logo{display:flex;align-items:center;justify-content:flex-start;
  height:30px;overflow:hidden}
.anr__logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.anr__logo b{font-size:.84rem;font-weight:700;color:var(--ink-70)}
.anr__t{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.anr__t b{font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.anr__ab{font-size:.84rem;color:var(--ink-55);line-height:1.4}
.anr__badge{justify-self:end;white-space:nowrap;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;
  background:var(--rot-soft);color:var(--rot)}
.anr__badge--via{background:var(--grau-2);color:var(--ink-55)}
.anr__fuss{margin-top:clamp(12px,2vh,18px);color:var(--ink-55)}
@media(max-width:620px){
  .anr__a{grid-template-columns:76px 1fr;row-gap:.5rem}
  .anr__logo{height:24px}
  .anr__badge{grid-column:2;justify-self:start}
}

/* ── Resort-Website: kleiner Knopf unter dem Logo ──────────────────── */
.rlogo{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vh,20px);
  margin:0}
.rweb{display:inline-flex;align-items:center;gap:.6em;max-width:100%;
  padding:9px 15px;border:1px solid var(--linie);border-radius:var(--btn-radius);
  font-size:.82rem;line-height:1.25;color:var(--ink);
  transition:border-color .25s,background .25s,color .25s}
.rweb:hover{border-color:var(--rot);background:var(--rot-soft);color:var(--rot)}
.rweb > span:first-child{display:flex;flex-direction:column;min-width:0}
.rweb__u{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-55);margin-bottom:.15em}
.rweb:hover .rweb__u{color:var(--rot)}
.rweb > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rweb__p{flex:none;font-size:.95rem;color:var(--rot);transition:transform .3s var(--t)}
.rweb:hover .rweb__p{transform:translate(2px,-2px)}

/* ── Highlight-Pillen auf den Projektkarten ────────────────────────── */
.pkarte__hl{display:flex;flex-wrap:wrap;gap:6px;margin-top:.9em}
.pkarte__hl span{font-size:.7rem;font-weight:600;letter-spacing:.02em;
  padding:4px 9px;background:var(--grau);color:var(--ink-70);
  border:1px solid var(--linie)}

/* ── Gestaffelte Einblendung: .an-1 … .an-12 ───────────────────────── */
.an-1{transition-delay:.06s}
.an-2{transition-delay:.12s}
.an-3{transition-delay:.18s}
.an-4{transition-delay:.24s}
.an-5{transition-delay:.30s}
.an-6{transition-delay:.36s}
.an-7{transition-delay:.42s}
.an-8{transition-delay:.48s}
.an-9{transition-delay:.54s}
.an-10{transition-delay:.60s}
.an-11{transition-delay:.66s}
.an-12{transition-delay:.72s}

/* ── Oberster Punkt eines Navigations-Aufklappers ──────────────────── */
.hd__droptop{display:inline-flex;align-items:center}

/* ── Gruppe in der Immobilien-Filterleiste ─────────────────────────── */
.immfilter__g{display:flex;flex-direction:column;gap:.5rem}

@media(prefers-reduced-motion:reduce){
  [class*="an-"]{transition-delay:0s!important}
}

/* ══════════════════════════════════════════════════════════════════════
   Mobilmenü — Nachtrag 16.10.2026
   Der Mobilblock steht weiter oben im Stylesheet als die Desktop-Regeln
   für .hd__sub/.hd__wechsel und wurde deshalb von ihnen überschrieben:
   Die Unterpunkte (Vermarktung, Investoren, Referenzen) lagen auf dem
   Handy unsichtbar hinter dem Menü. Hier mit höherer Spezifität korrigiert.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .hd .hd__nav .hd__drop{flex-direction:column;align-items:center;gap:12px;color:var(--ink)}
  .hd .hd__nav .hd__drop::after{display:none}
  .hd .hd__nav .hd__drop .hd__sub,
  .hd .hd__nav .hd__drop:hover .hd__sub,
  .hd .hd__nav .hd__drop:focus-within .hd__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    margin:0;padding:0;min-width:0;background:none;backdrop-filter:none;
    box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:10px}
  .hd .hd__nav .hd__sub a{display:block;padding:0;font-size:1.02rem;
    font-weight:600;color:var(--ink-70);white-space:normal;text-align:center}
  .hd .hd__nav .hd__sub a:hover{background:none;color:var(--rot)}
  .hd .hd__nav .hd__sub a[aria-current]{color:var(--rot)}
  /* Brücke zur anderen Seite: auf dem Handy als voller roter Knopf */
  .hd .hd__nav a.hd__wechsel,
  .hd--hell .hd__nav a.hd__wechsel,
  .hd.is-fest .hd__nav a.hd__wechsel{
    font-size:1.05rem;font-weight:600;padding:13px 26px;margin:.9rem 0 0;
    border:0;background:var(--rot);color:#fff;text-shadow:none}
  .hd .hd__nav a.hd__wechsel .hd__wechsel-p{color:#fff}
}

/* ══════════════════════════════════════════════════════════════════════
   Hotelberatung — Übersicht, Förderung, Referenzen, vertiefte Phasen
   (21.10.2026: Pakete/Haustypen/Förderung standen auf beiden Unterseiten
   doppelt und sind jetzt auf der Übersicht zusammengefasst.)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Die beiden Wege ─────────────────────────────────────────────── */
.hbwege{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(28px,3.5vw,46px)}
.hbweg{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,40px);background:#fff;border:1px solid var(--linie);
  border-radius:var(--btn-radius);text-decoration:none;color:inherit;
  transition:box-shadow .3s var(--t),transform .3s var(--t),border-color .3s var(--t)}
.hbweg::after{display:none}
.hbweg:hover{border-color:var(--rot);transform:translateY(-3px);
  box-shadow:0 26px 54px -30px rgba(15,20,22,.4)}
.hbweg__n{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--rot)}
.hbweg h3{margin:.5em 0 .1em;font-size:clamp(1.45rem,2.1vw,1.9rem);letter-spacing:-.02em}
.hbweg__u{margin:0 0 1em;font-size:1rem;font-weight:600;color:var(--ink-55)}
.hbweg__t{margin:0 0 1.2em;color:var(--ink-70)}
.hbweg__l{list-style:none;margin:0 0 1.6em;padding:0;display:flex;flex-direction:column;gap:.55em}
.hbweg__l li{position:relative;padding-left:20px;font-size:.95rem;color:var(--ink-70)}
.hbweg__l li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;
  background:var(--rot);border-radius:1px}
.hbweg__cta{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;
  font-weight:600;color:var(--rot)}
.hbweg:hover .btn__pfeil{transform:translateX(4px)}

/* ── Förderung: ruhiger als die Haustypen, es sind keine Angebote ── */
.hbfoerder{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(24px,3vw,38px)}
.hbfoerder__k{padding:clamp(20px,2.2vw,28px);background:#fff;border:1px solid var(--linie);
  border-radius:var(--btn-radius);border-left:3px solid var(--rot)}
.hbfoerder__k h3{margin:0 0 .5em;font-size:1.05rem;letter-spacing:-.01em}
.hbfoerder__k p{margin:0;font-size:.94rem;color:var(--ink-70)}

/* ── Referenzen: Belege statt Behauptungen ───────────────────────── */
.hbref{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(24px,3vw,38px)}
.hbref__k{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--linie);border-radius:var(--btn-radius);overflow:hidden;background:#fff;
  transition:box-shadow .3s var(--t),transform .3s var(--t)}
.hbref__k::after{display:none}
.hbref__k:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(15,20,22,.42)}
.hbref__b{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--grau)}
.hbref__b img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--t)}
.hbref__k:hover .hbref__b img{transform:scale(1.04)}
.hbref__t{display:flex;flex-direction:column;gap:.3em;padding:18px 20px 20px}
.hbref__ort{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.hbref__t strong{font-size:1.06rem;letter-spacing:-.01em}
.hbref__rolle{font-size:.9rem;color:var(--ink-70)}
.hbref__mehr{margin-top:clamp(20px,2.4vw,30px)}
.hbref__mehr a{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--rot)}
.hbref__mehr a:hover .btn__pfeil{transform:translateX(4px)}

/* ── Phasen mit Vorgehen und Ergebnissen (Neubau) ────────────────── */
.bphase--tief{grid-column:1/-1}
.bphase__spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px);
  margin-top:1.3em;padding-top:1.3em;border-top:1px solid var(--linie)}
.bphase__spalten h4{margin:0 0 .7em;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rot)}
.bphase__spalten ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.bphase__spalten li{position:relative;padding-left:18px;font-size:.94rem;color:var(--ink-70);line-height:1.5}
.bphase__spalten li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  background:var(--rot);border-radius:1px}
.bphase__wirkung{margin:1.3em 0 0;padding-top:1.1em;border-top:1px solid var(--linie);
  font-weight:600;color:var(--ink)}

@media (max-width:900px){
  .hbwege{grid-template-columns:1fr}
  .hbfoerder,.hbref{grid-template-columns:1fr}
  .bphase__spalten{grid-template-columns:1fr;gap:1.2em}
}

/* ══════════════════════════════════════════════════════════════════════
   Werbestreifen „Bades-Huk-Magazin bestellen" (27.10.2026)
   Eigene Klassen (magb*), weil .wb bereits der Brücke zur Käuferseite
   gehört und hier zusätzlich ein Cover im Vordergrund steht.
   ══════════════════════════════════════════════════════════════════════ */
.magb{position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(380px,46vw,520px);text-decoration:none;color:#fff;
  background:var(--ink)}
.magb::after{display:none}
.magb__b{position:absolute;inset:-14% 0;z-index:0;will-change:transform;display:block}
.magb__b img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.magb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,17,19,.88) 0%,rgba(14,17,19,.72) 46%,rgba(14,17,19,.4) 100%)}
.magb__in{position:relative;z-index:2;display:flex;align-items:center;
  gap:clamp(26px,4.5vw,70px);width:100%;
  padding-top:clamp(40px,5vw,66px);padding-bottom:clamp(40px,5vw,66px)}

/* Cover: leicht gekippt, hebt sich beim Überfahren */
.magb__cover{flex:none;width:clamp(150px,17vw,232px);display:block;
  transform:rotate(-3deg);transition:transform .5s var(--t)}
.magb__cover img{width:100%;height:auto;display:block;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.14)}
.magb:hover .magb__cover{transform:rotate(-3deg) translateY(-6px) scale(1.02)}

.magb__t{display:block;min-width:0}
.magb__mark{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:var(--rot);padding:5px 11px;margin-bottom:clamp(12px,1.8vh,18px)}
.magb__h2{display:block;font-family:var(--ff-head);
  font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:500;line-height:1.08;
  letter-spacing:-.03em}
.magb__h2 .d{display:block;font-weight:300;color:rgba(255,255,255,.62)}
.magb__lead{display:block;margin:clamp(12px,2vh,18px) 0 0;max-width:46ch;
  font-size:clamp(.95rem,1.15vw,1.05rem);color:rgba(255,255,255,.8);line-height:1.55}
.magb__knopf{display:inline-flex;align-items:center;gap:.6em;
  margin-top:clamp(18px,2.6vh,26px);padding:13px 24px;
  border:1px solid rgba(255,255,255,.45);border-radius:var(--btn-radius);
  font-weight:600;font-size:.95rem;transition:background .3s var(--t),gap .3s var(--t)}
.magb:hover .magb__knopf{background:var(--rot);border-color:var(--rot);gap:1em}

@media (max-width:760px){
  .magb__in{flex-direction:column;align-items:flex-start;gap:26px}
  .magb__cover{width:clamp(130px,38vw,170px)}
}

/* ── Mobilmenü: erreichbar auf kleinen Geräten (geprüft 04.11.2026) ──────
   Auf einem 667px hohen Bildschirm reichte das Menü 671px weit — DE und EN
   standen unterhalb der Kante und ließen sich nicht erreichen, weil nichts
   scrollte. Außerdem waren die Unterpunkte nur 26px hoch; fürs Tippen zu
   wenig. „safe center" hält die Mitte, schneidet aber oben nichts ab. */
@media(max-width:900px){
  .hd__nav{
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    justify-content:safe center;padding:80px 20px 28px;gap:6px;
  }
  /* 44px Trefferfläche, aber ohne zusätzlichen Abstand — damit die dreizehn
     Einträge auch auf einem 667px hohen Bildschirm vollständig ins Bild passen. */
  .hd__nav a{min-height:44px;display:flex;align-items:center;justify-content:center}
  .hd__nav > a{font-size:1.2rem}
  .hd__drop{gap:0}
  .hd__droptop{font-size:1.2rem}
  .hd__sub a,.hd__drop a{min-height:36px;font-size:1rem;font-weight:500;padding:0 10px}
  .hd__lang{margin-top:4px}
}
/* Niedrige Geräte (iPhone SE und ähnlich): noch eine Stufe kompakter, damit
   auch die Sprachwahl ohne Scrollen im Bild steht. 38px Trefferfläche liegt
   unter der 44px-Empfehlung, ist aber besser als ein Eintrag außerhalb. */
@media(max-width:900px) and (max-height:720px){
  .hd__nav{padding:68px 20px 20px;gap:0}
  .hd__nav > a,.hd__droptop{font-size:1.05rem}
  .hd__nav a{min-height:38px}
  .hd__sub a,.hd__drop a{min-height:32px;font-size:.95rem}
}

/* ── Weltkarte: von selbst wechselnde Vorschau ───────────────────────────
   Alle paar Sekunden öffnet sich bei einem zufälligen Standort dasselbe
   Fenster wie beim Überfahren mit der Maus (clavis.js). Die Klasse wird
   gesetzt und wieder entfernt; sobald jemand selbst auf der Karte ist,
   hält die Schleife an. */
.wkpin.ist-tip{z-index:70}
.wkpin.ist-tip .wkpin__dot{transform:scale(1.4)}
.wkpin.ist-tip .wktip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity .4s var(--t),transform .4s var(--t)}
.wkarte:not(.ist-eu) .wkpin--unten.ist-tip .wktip,
.wkarte.ist-eu .wkpin--unten-eu.ist-tip .wktip{transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){
  .wkpin.ist-tip .wktip{transition:none}
}