/* =========================================================
   LEO 4 · Leopoldstraße 4–6, München
   Pitch Lead-Vermietungsmandat
   Design-System nach E&G-Entwurf, eine Stufe gehobener
   ========================================================= */

:root{
  /* Papier */
  --paper:#fbf7f0;
  --paper-2:#f6eee2;
  --paper-3:#f1e7d7;
  --paper-4:#eaddc9;

  /* Tiefe */
  --night:#14110d;
  --night-2:#1e1a14;

  /* Akzente */
  --gold:#b08d5b;
  --gold-lt:#cdae7c;
  --gold-dp:#94733f;
  --wine:#5c2b3d;
  --wine-lt:#7d4257;
  --eug-red:#a90024;

  /* Text */
  --ink:#14110d;
  --ink-2:#3d372c;
  --ink-3:#6d6455;
  --ink-4:#736b5c;

  /* Linien */
  --hair:rgba(176,141,91,.34);
  --hair-2:rgba(176,141,91,.18);
  --hair-dark:rgba(205,174,124,.22);

  --display:'Cormorant Garamond',Georgia,serif;
  --serif:'Spectral',Georgia,serif;
  --sans:'Mada','Helvetica Neue',Arial,sans-serif;

  --wrap:1280px;
  --gut:clamp(22px,5.5vw,80px);
  --header-h:92px;
  --ease:cubic-bezier(.19,.68,.31,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--serif);
  font-size:17.5px;
  line-height:1.78;
  font-weight:300;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Feines Papierkorn über der gesamten Seite */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.14}
p{margin:0 0 1.2em}
strong{font-weight:500;color:var(--wine)}

/* ---------------- Bausteine ---------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}
.wrap--narrow{max-width:1020px}
.section{padding:clamp(56px,7vw,110px) 0;position:relative}
.section--paper2{background:var(--paper-2)}
.section--night{background:var(--night);color:rgba(247,240,229,.82)}
.section--night strong{color:var(--gold-lt)}

/* Kicker: Sans, gesperrte Versalien, Gold */
.kicker{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dp);margin:0 0 26px;
}
.kicker b{font-weight:600;color:var(--gold-dp);letter-spacing:.2em}
.section--night .kicker{color:var(--gold-lt)}
.section--night .kicker b{color:var(--gold)}

/* Display-Typografie */
.h-hero{
  font-family:var(--display);font-weight:300;
  font-size:clamp(66px,13.2vw,178px);line-height:.88;letter-spacing:-.014em;
  color:var(--ink);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
.h-1{font-family:var(--display);font-weight:300;font-size:clamp(38px,5.6vw,78px);line-height:1.06;letter-spacing:-.008em;color:var(--ink)}
.h-2{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.9vw,52px);line-height:1.12;letter-spacing:-.005em;color:var(--ink)}
.h-3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.3vw,30px);line-height:1.2;color:var(--wine)}
.section--night .h-1,.section--night .h-2{color:#faf4e9}
.section--night .h-3{color:var(--gold-lt)}

/* Sans-Label über Listen und Spalten */
.label{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 18px;display:block;
}
.section--night .label{color:rgba(205,174,124,.82)}

.lead{font-size:clamp(19px,1.55vw,23px);line-height:1.72;color:var(--ink-2);font-weight:300;max-width:64ch}
.section--night .lead{color:rgba(247,240,229,.78)}
.muted{color:var(--ink-3)}
.wine{color:var(--wine)}
.src{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-top:20px}

/* Goldene Haarlinie */
.hair{height:1px;background:var(--hair);border:0;margin:0 0 clamp(34px,4vw,56px)}
.hair--short{width:96px;background:var(--gold);height:1px;margin-bottom:30px}
.section--night .hair{background:var(--hair-dark)}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-size:12px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;padding:15px 40px;
  border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.btn--gold{border-color:var(--gold);color:var(--gold)}
.btn--gold:hover{background:var(--gold);color:var(--night)}

/* ---------------- Vertraulichkeitsleiste ---------------- */
.confidential{
  background:var(--night);color:rgba(205,174,124,.9);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  text-align:center;padding:11px 18px;
}
.confidential b{color:#f3e7d2;font-weight:500}

/* ---------------- Header ---------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,247,240,.94);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--hair-2);box-shadow:0 10px 40px rgba(20,17,13,.05)}
.header__inner{display:flex;align-items:center;gap:30px;height:var(--header-h)}
.header__logo{display:flex;align-items:center;gap:26px}
.header__logo img{height:38px;width:auto}
.header__obj{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);padding-left:26px;border-left:1px solid var(--hair);line-height:1.7;
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.1vw,34px)}
.nav a{
  font-family:var(--sans);font-size:11.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);padding:8px 0;position:relative;white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--gold);transition:right .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{right:0}
.nav a.is-active{color:var(--gold-dp)}
.nav a.btn{color:var(--ink);padding:12px 28px;font-size:11px}
.nav a.btn::after{display:none}
.nav a.btn:hover{color:var(--paper)}

.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--hair);background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1px;background:var(--ink);transition:.35s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
.burger.is-open span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){top:23px;transform:rotate(-45deg)}

/* ---------------- Fassaden-Wasserzeichen ---------------- */
.facade{
  position:absolute;right:0;bottom:0;width:min(72%,1040px);
  opacity:.5;pointer-events:none;user-select:none;
}
.facade--full{width:100%;right:auto;left:0;opacity:.34}
.section--night .facade,.section--night .facade-svg{opacity:.34;filter:brightness(1.75)}
.section--night .facade-svg svg,.closing .facade-svg svg{stroke-width:1.7}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;overflow:hidden;background:var(--paper-2);
  min-height:calc(100svh - var(--header-h));display:flex;align-items:center;
  padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,70px);
}
.hero .facade{width:min(70%,1080px);opacity:.42;bottom:-4%}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__kicker{
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:clamp(20px,3vw,34px);
}
.hero h1{margin:0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__rule{width:clamp(150px,20vw,290px);height:1px;background:var(--gold);margin:clamp(22px,3vw,38px) 0 clamp(20px,2.4vw,30px)}
.hero__claim{
  font-family:var(--display);font-size:clamp(21px,2.5vw,34px);line-height:1.3;font-weight:300;
  color:var(--wine);max-width:34ch;margin:0;
}
.hero__meta{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-top:clamp(20px,2.6vw,32px);
}
.hero__facts{
  display:grid;grid-template-columns:1fr 1fr;
  max-width:min(56%,680px);
  margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--hair);
  position:relative;z-index:1;
}
/* die letzte Zeile schließt bündig ab — kein herunterhängender Rand */
.hero__fact{padding:20px 26px 6px 0;border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.hero__fact:nth-child(2n){border-right:0}
.hero__fact:nth-child(n+3){border-bottom:0}
.hero__fact dt{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px}
.hero__fact dd{margin:0;font-family:var(--sans);font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.hero__fact dd small{font-family:var(--sans);font-size:.44em;font-weight:400;color:var(--gold);letter-spacing:.04em;margin-left:3px}
.hero__fact dd span{display:block;font-size:14px;font-weight:300;color:var(--ink-3);letter-spacing:.04em;margin-top:6px}

/* ---------------- Sektionsauftakt ---------------- */
.opener{position:relative;overflow:hidden;background:var(--paper-2);padding:clamp(84px,11vw,150px) 0}
.opener .facade{width:min(66%,900px);opacity:.42}
.opener__inner{position:relative;z-index:2}
.opener__no{
  font-family:var(--display);font-weight:500;font-size:clamp(64px,9vw,132px);
  line-height:.9;color:var(--gold);letter-spacing:-.02em;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
.opener h2{margin-top:.1em}
.opener__rule{width:clamp(130px,17vw,240px);height:1px;background:var(--hair);margin:30px 0 26px}
.opener__sub{font-size:clamp(17px,1.4vw,20px);color:var(--wine);max-width:40ch;margin:0}

/* ---------------- Grids ---------------- */
.head{max-width:920px;margin-bottom:clamp(34px,4.4vw,60px)}
.g2{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,6vw,96px);align-items:start}
.g2--wide{grid-template-columns:1.35fr .65fr}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.6vw,58px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,38px)}

/* ---------------- Listen mit Haarlinien ---------------- */
.list{list-style:none;margin:0;padding:0}
.list li{padding:14px 0;border-bottom:1px solid var(--hair-2);font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.list li:first-child{border-top:1px solid var(--hair)}
.section--night .list li{border-color:var(--hair-dark);color:rgba(247,240,229,.76)}
.section--night .list li:first-child{border-top-color:var(--hair-dark)}
.list--tight li{padding:10px 0;font-size:15.5px;line-height:1.55}
.list--num{counter-reset:n}
.list--num li{counter-increment:n;padding-left:44px;position:relative}
.list--num li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:15px;
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--gold);font-weight:500;
}
.list--dash li{padding-left:32px;position:relative}
.list--dash li::before{content:"—";position:absolute;left:0;top:14px;color:var(--gold);font-size:14px}

/* Definitionsreihen (Zahl rechts) */
.rows{border-top:1px solid var(--hair)}
.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:26px;padding:17px 0;border-bottom:1px solid var(--hair-2)}
.rows dt{color:var(--ink-2);font-size:16.5px}
.rows dd{margin:0;font-family:var(--sans);font-weight:600;font-size:19px;color:var(--ink);text-align:right;white-space:nowrap}
.rows dd small{font-family:var(--sans);font-size:.62em;font-weight:400;color:var(--gold);margin-left:2px}
.rows--total div:last-child{border-bottom:1px solid var(--gold);padding-top:22px}
.rows--total div:last-child dd{color:var(--wine)}

/* ---------------- Panels ---------------- */
.panel{background:var(--paper-3);padding:clamp(30px,3.4vw,50px)}
.section--paper2 .panel{background:var(--paper-4)}
.panel.panel--line{background:transparent;border:1px solid var(--hair)}
.panel--night{background:rgba(205,174,124,.07);border:1px solid var(--hair-dark)}
.panel h3{margin-bottom:20px}
.panel .list li{border-color:rgba(176,141,91,.26)}
.panel .list li:first-child{border-top-color:rgba(176,141,91,.4)}

/* Große Kennzahl */
.big{margin:0;font-variant-numeric:lining-nums;font-family:var(--sans);font-weight:700;font-size:clamp(38px,5.4vw,76px);line-height:.94;letter-spacing:-.02em;color:var(--ink)}
.big small{font-family:var(--sans);font-size:.32em;font-weight:400;color:var(--gold);letter-spacing:.02em;margin-left:5px}
.section--night .big{color:#faf4e9}
.calc{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:11px;margin:28px 0 22px;
  font-family:var(--sans);font-weight:700;font-size:clamp(24px,2.7vw,38px);
  letter-spacing:-.015em;color:var(--ink);font-variant-numeric:lining-nums;line-height:1.1;
}
.calc i{font-style:normal;font-weight:300;font-size:.52em;color:var(--gold)}
.calc small{font-size:.44em;font-weight:400;color:var(--gold);margin-left:-4px}

.big-lbl{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-top:16px;line-height:1.7}
.section--night .big-lbl{color:rgba(205,174,124,.8)}

/* ---------------- Zitat ---------------- */
.quote{position:relative;padding:clamp(52px,7vw,104px) 0}
.quote__mark{width:96px;height:1px;background:var(--gold);margin-bottom:clamp(28px,3.4vw,44px)}
.quote p{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(25px,3.4vw,47px);line-height:1.3;color:var(--wine);margin:0;
}
.section--night .quote p{color:#f3e7d2}
.quote cite{
  display:block;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-4);margin-top:clamp(26px,3vw,40px);
}
.section--night .quote cite{color:rgba(205,174,124,.82)}

/* ---------------- Tabellen ---------------- */
.table-wrap{overflow-x:auto;border-top:1px solid var(--gold)}
table{width:100%;border-collapse:collapse;min-width:720px;font-size:15.5px;font-weight:300}
th{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-4);text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);white-space:nowrap;
}
td{padding:15px 16px 15px 0;border-bottom:1px solid var(--hair-2);color:var(--ink-2);vertical-align:baseline;line-height:1.5}
td:first-child{color:var(--gold-dp);font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.08em}
td:last-child,th:last-child{white-space:nowrap;padding-right:0}
.num{text-align:right;font-family:var(--sans);font-weight:400;white-space:nowrap;font-variant-numeric:lining-nums}
th.num{text-align:right}
.stage{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.stage::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9}

/* Zeilen erscheinen gestaffelt, wenn die Tabelle ins Bild kommt.
   Der Container bleibt dabei ruhig — würde er selbst faden, verdeckte er die Staffelung. */
.table-wrap.rv{opacity:1;transform:none;transition:none}
.table-wrap thead{opacity:0;transition:opacity .6s var(--soft)}
.table-wrap.is-in thead{opacity:1}
.table-wrap tbody tr{
  opacity:0;transform:translate3d(-14px,0,0);
  transition:opacity .75s var(--soft),transform .85s var(--soft),background-color .45s var(--soft);
}
.table-wrap.is-in tbody tr{opacity:1;transform:none}
.table-wrap.is-in tbody tr:nth-child(1){transition-delay:.12s}
.table-wrap.is-in tbody tr:nth-child(2){transition-delay:.24s}
.table-wrap.is-in tbody tr:nth-child(3){transition-delay:.36s}
.table-wrap.is-in tbody tr:nth-child(4){transition-delay:.48s}
.table-wrap.is-in tbody tr:nth-child(5){transition-delay:.60s}
.table-wrap.is-in tbody tr:nth-child(6){transition-delay:.72s}
.table-wrap.is-in tbody tr:nth-child(7){transition-delay:.84s}
.table-wrap.is-in tbody tr:nth-child(8){transition-delay:.96s}
.stage--hot{color:var(--eug-red)}
.stage--warm{color:var(--gold-dp)}
.stage--strat{color:var(--ink-3)}
.section--night .stage--hot{color:#e8798d}
.section--night .stage--warm{color:var(--gold-lt)}
.section--night .stage--strat{color:rgba(247,240,229,.62)}
.section--night th{color:rgba(205,174,124,.8);border-bottom-color:var(--hair-dark)}
.section--night td{color:rgba(247,240,229,.75);border-bottom-color:rgba(205,174,124,.12)}
.section--night td:first-child{color:var(--gold-lt)}
.section--night td{border-bottom-color:rgba(205,174,124,.10)}
.section--night .table-wrap{border-top-color:var(--gold)}

/* ---------------- Stufen / Phasen ---------------- */
.stage-col h3{font-size:clamp(19px,1.5vw,23px);margin-bottom:16px}
.stage-col .label{color:var(--gold-dp);margin-bottom:10px}
.stage-col--accent{background:var(--paper-3);padding:clamp(24px,2.4vw,34px);margin:calc(-1 * clamp(24px,2.4vw,34px)) 0}
.section--paper2 .stage-col--accent{background:var(--paper-4)}

/* Zeitleiste */
.milestones{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,80px);margin-top:clamp(44px,5vw,74px);padding-top:clamp(30px,3.4vw,48px);border-top:1px solid var(--gold)}
.milestone{display:flex;align-items:baseline;gap:14px}
.milestone b{font-family:var(--sans);font-weight:700;font-size:clamp(22px,2.3vw,31px);color:var(--ink);letter-spacing:-.01em}
.milestone span{font-size:16px;color:var(--wine)}

/* ---------------- Prozessstufen ---------------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;display:flex;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid rgba(176,141,91,.26);font-size:16.5px;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--gold);font-weight:500;min-width:22px;
}

/* ---------------- Team ---------------- */
.team{display:flex;flex-wrap:wrap;gap:10px 0;align-items:baseline}
.team span{font-family:var(--display);font-size:clamp(21px,2.2vw,30px);color:var(--ink);font-weight:400}
.section--night .team span,.closing .team span{color:#faf4e9}
.team i{font-style:normal;color:var(--gold);margin:0 16px}

/* ---------------- Abschluss ---------------- */
.closing{position:relative;overflow:hidden;padding:0}
.closing .facade,.closing .facade-svg{
  opacity:.36;filter:brightness(1.85);width:min(78%,1180px);
  /* Unter der Textspalte unsichtbar, rechts in voller Stärke — kein Wettbewerb mit den Buchstaben */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.55) 58%,#000 78%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.55) 58%,#000 78%);
}
.closing .quote{max-width:min(58%,720px)}
.closing .quote p{max-width:none}
@media (max-width:900px){
  .closing .quote{max-width:none}
  .closing .facade,.closing .facade-svg{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,#000 85%);
            mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,#000 85%);
  }
}
.closing__inner{position:relative;z-index:2;padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(84px,10vw,150px)}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:clamp(34px,4vw,54px)}

/* ---------------- Footer ---------------- */
.footer{background:var(--night-2);color:rgba(247,240,229,.68);padding:clamp(56px,6vw,84px) 0 40px;font-size:15px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,4vw,64px);padding-bottom:44px;border-bottom:1px solid rgba(205,174,124,.16)}
.footer h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:20px;font-weight:500}
.footer a{transition:color .3s var(--ease)}
.footer a:hover{color:var(--gold-lt)}
.footer__logo img{height:44px;filter:brightness(0) invert(1);opacity:.86;margin-bottom:24px}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,240,229,.55)}
.footer__bottom nav{display:flex;gap:26px}

/* ---------------- Platzhalterfläche ---------------- */
.ph{
  background:var(--paper-3);border:1px solid var(--hair-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(40px,6vw,90px) 30px;min-height:clamp(260px,32vw,420px);
}
.section--paper2 .ph{background:var(--paper-4)}
.ph--low{min-height:clamp(180px,20vw,240px);padding:clamp(28px,4vw,50px) 30px}
.ph .label{margin-bottom:14px;color:var(--gold-dp)}
.ph p{max-width:34ch;margin:0;color:var(--ink-3);font-size:17px}

/* ---------------- Reveal ---------------- */
.rv{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 1.15s var(--soft),transform 1.15s var(--soft);
  will-change:opacity,transform;
}
.rv.is-in{opacity:1;transform:none}
.rv.is-in.rv--done{will-change:auto}
@media (prefers-reduced-motion:reduce){
  .rv,.w,.facade-svg [data-draw],.table-wrap tbody tr,.table-wrap thead,
  .area__step,.switch__side,.figure,.hero__fact,.hero__lead{
    opacity:1!important;transform:none!important;filter:none!important;
    transition:none!important;stroke-dashoffset:0!important;
  }
  .area__plan [data-body],.area__plan.is-split [data-body-group="1"] [data-body],
.area__plan.is-split [data-body-group="2"] [data-body]{fill:var(--wine);stroke:var(--wine)}
.area__plan [data-body]{transition:fill .7s var(--soft),stroke .7s var(--soft)}
.area__plan [data-label]{--o:1}
  .scene{height:auto!important}
  .scene__pin{position:static;height:auto;padding:clamp(70px,10vw,120px) 0}
  .area__step,.switch__side{position:static;margin-bottom:34px}
  .area__plan{max-width:100%}
  .track{transform:none!important;flex-wrap:wrap}
  .track-viewport{overflow:visible}
  .beats{display:none}
  html{scroll-behavior:auto}
  .rail{transition:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1140px){
  .nav{display:none}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-top:1px solid var(--hair-2);padding:6px var(--gut) 28px;
    max-height:calc(100vh - var(--header-h));overflow:auto;
    box-shadow:0 24px 44px rgba(20,17,13,.1);
  }
  .nav.is-open a{padding:17px 0;border-bottom:1px solid var(--hair-2);font-size:13px}
  .nav.is-open a.btn{margin-top:22px;text-align:center;border:1px solid var(--ink)}
  .burger{display:block}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .header__obj{display:none}
}
@media (max-width:900px){
  :root{--header-h:76px}
  .g2,.g2--wide,.g3{grid-template-columns:1fr}
  .hero__facts{grid-template-columns:repeat(2,1fr);max-width:none}
  .hero .facade,.hero .facade-svg{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 45%,#000 80%);
            mask-image:linear-gradient(180deg,transparent 0%,transparent 45%,#000 80%);
  }
  .facade{width:130%!important;right:-15%;opacity:.3!important}
  .stage-col--accent{margin:0}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .g4,.g5{grid-template-columns:1fr}
  .hero__facts{grid-template-columns:1fr}
  .milestones{gap:24px}
  .footer__grid{grid-template-columns:1fr}
  .rows dt,.list li{font-size:16px}
}


/* =========================================================
   Bewegungsschicht
   ========================================================= */

:root{
  --soft:cubic-bezier(.16,.84,.28,1);
  --soft-out:cubic-bezier(.33,1,.4,1);
}

/* ---------- Kapitel-Leiste am rechten Rand ---------- */
.rail{
  position:fixed;right:clamp(16px,2.2vw,34px);top:50%;z-index:150;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  transform:translate3d(0,-50%,0);
  opacity:0;pointer-events:none;transition:opacity .55s var(--soft);
}
.rail.is-on{opacity:1;pointer-events:auto}
.rail a{display:flex;align-items:center;gap:12px;padding:5px 0;color:var(--ink-3)}
.rail__lbl{
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;opacity:0;transform:translate3d(8px,0,0);
  transition:opacity .4s var(--soft),transform .45s var(--soft),color .4s var(--soft);
}
.rail__lbl b{font-weight:600;color:var(--gold-dp);margin-right:7px;letter-spacing:.08em}
.rail__dash{
  position:relative;display:block;width:16px;height:1px;
  background:rgba(176,141,91,.42);
  transition:width .5s var(--soft),background-color .4s var(--soft);
}
.rail__dash::after{
  content:"";position:absolute;inset:0;background:var(--gold-dp);
  transform:scaleX(var(--cp,0));transform-origin:0 50%;opacity:0;
  transition:opacity .3s var(--soft);
}
.rail a:hover .rail__dash{background:rgba(176,141,91,.75)}
.rail a.is-active{color:var(--ink)}
.rail a.is-active .rail__dash{width:36px;background:rgba(176,141,91,.28)}
.rail a.is-active .rail__dash::after{opacity:1}
.rail a.is-active .rail__lbl,.rail a:hover .rail__lbl{opacity:1;transform:none}

/* über dunklen Abschnitten */
.rail.on-dark a{color:rgba(247,240,229,.72)}
.rail.on-dark a.is-active{color:#faf4e9}
.rail.on-dark .rail__lbl b{color:var(--gold-lt)}
.rail.on-dark .rail__dash{background:rgba(205,174,124,.34)}
.rail.on-dark a.is-active .rail__dash::after{background:var(--gold-lt)}

@media (max-width:900px){.rail{display:none}}

/* ---------- Header: verbirgt sich beim Abwärtsscrollen ---------- */
.header{
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),
             transform .55s var(--soft),background-color .5s var(--ease);
}
.header.is-hidden{transform:translate3d(0,-100%,0)}

/* ---------- Wortweise Headline-Reveals ---------- */
.w{
  display:inline-block;
  opacity:0;transform:translate3d(0,.32em,0);
  transition:opacity 1s var(--soft),transform 1.1s var(--soft);
  will-change:opacity,transform;
}
.split.is-in .w,
.rv.is-in .split .w,
.hero.is-ready .h-hero .w{opacity:1;transform:none}
.split.is-in.rv--done .w,
.rv--done .split .w{will-change:auto}

/* Headline eines Reveal-Blocks: der Block selbst bleibt ruhig, die Wörter tragen */
.rv .split{opacity:1}

/* ---------- Fassade: zeichnet sich beim Eintritt ---------- */
.facade-svg{position:absolute;right:0;bottom:0;pointer-events:none;user-select:none;line-height:0}
.facade-svg svg{width:100%;height:auto;display:block}
.facade-svg [data-draw]{
  stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--soft-out),opacity .8s linear;
  opacity:.25;
}
.facade-svg.is-drawn [data-draw]{stroke-dashoffset:0;opacity:1}

/* Parallax-Träger */
.par{will-change:transform}

/* ---------- Micro-Interactions ---------- */
/* Zurückhaltend: nur Farbe, keine Verschiebung, kein Anheben */
.list li{transition:border-color .45s var(--soft)}
.list li:hover{border-color:var(--gold)}
tbody tr{transition:background-color .45s var(--soft)}
tbody tr:hover{background:rgba(176,141,91,.05)}
.section--night tbody tr:hover{background:rgba(205,174,124,.05)}
.footer a,.nav a{transition:color .35s var(--soft)}

/* ---------- Hero-Intro ---------- */
.hero__kicker,.hero__rule,.hero__claim,.hero__meta,.hero__facts{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 1.1s var(--soft),transform 1.1s var(--soft);
}
.hero.is-ready .hero__kicker,
.hero.is-ready .hero__rule,
.hero.is-ready .hero__claim,
.hero.is-ready .hero__meta,
.hero.is-ready .hero__facts{opacity:1;transform:none}
.hero.is-ready .hero__kicker{transition-delay:.05s}
.hero.is-ready .hero__rule{transition-delay:.5s;transform-origin:0 50%}
.hero.is-ready .hero__claim{transition-delay:.62s}
.hero.is-ready .hero__meta{transition-delay:.74s}
.hero.is-ready .hero__facts{transition-delay:.86s}
.hero__rule{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--soft-out),opacity .6s var(--soft)}
.hero.is-ready .hero__rule{transform:scaleX(1)}

/* Eckdaten des Heros einzeln gestaffelt */
.hero__fact{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s var(--soft),transform .9s var(--soft)}
.hero.is-ready .hero__fact{opacity:1;transform:none}
.hero.is-ready .hero__fact:nth-child(1){transition-delay:.92s}
.hero.is-ready .hero__fact:nth-child(2){transition-delay:1.02s}
.hero.is-ready .hero__fact:nth-child(3){transition-delay:1.12s}
.hero.is-ready .hero__fact:nth-child(4){transition-delay:1.22s}

/* ---------- Kapitelziffer ---------- */
.opener__no{
  display:inline-block;
  transition:opacity 1.3s var(--soft),transform 1.3s var(--soft);
}
.opener .rv .opener__no{opacity:0;transform:translate3d(0,26px,0) scale(.94)}
.opener .rv.is-in .opener__no{opacity:1;transform:none;transition-delay:.1s}
.opener__rule{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s var(--soft-out) .45s}
.opener .rv.is-in .opener__rule{transform:scaleX(1)}

/* Trennlinien wachsen ein */
.hair,.hair--short{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s var(--soft-out)}
.rv.is-in .hair,.rv.is-in .hair--short,.hair.is-in{transform:scaleX(1)}

@media (max-width:900px){
  .panel:hover{transform:none;box-shadow:none}
  .list li:hover{padding-left:0}
}

/* =========================================================
   Scroll-gebundene Szenen
   Der Container ist hoch, sein Inhalt bleibt stehen.
   --p (0 … 1) beschreibt, wie weit man durch die Szene ist.
   ========================================================= */

.scene{position:relative;display:block}
.scene__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding-top:var(--header-h);box-sizing:border-box;
}
.scene__inner{position:relative;z-index:3;width:100%}
.scene .h-2{font-size:clamp(27px,3.1vw,42px)}
.scene .kicker{margin-bottom:18px}

/* ---------- Hero als Szene ---------- */
.hero.scene{min-height:0;padding:0;display:block;overflow:visible;background:var(--paper-2)}
.scene{overflow:visible}
.hero .scene__pin{background:var(--paper-2)}
.hero .facade,.hero .facade-svg{
  width:min(74%,1140px);right:0;bottom:-4%;opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 38%,rgba(0,0,0,.65) 60%,#000 78%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 38%,rgba(0,0,0,.65) 60%,#000 78%);
}
.hero .facade-svg svg{stroke-width:1.7}
/* Die Fassade wächst beim Scrollen sacht heran */
.hero .beats{bottom:auto;top:calc(var(--header-h) + clamp(18px,2.4vw,30px));justify-content:flex-end}
.hero .facade-svg{
  transform:translate3d(0,calc((1 - var(--p,0)) * 26px),0) scale(calc(.985 + var(--p,0) * .015));
  transform-origin:100% 100%;
}
/* Ebenen werden nacheinander gezeichnet — eine Style-Zuweisung je Ebene */
.facade-svg.is-scrubbed g[data-layer] [data-draw]{
  stroke-dashoffset:calc(var(--len) * (1 - var(--gp,0)));
  opacity:calc(.2 + var(--gp,0) * .8);
  transition:none;
}

/* Titelblock driftet zum Ende der Szene sanft weg */
.hero__lead{
  transform:translate3d(0,calc(var(--p,0) * -78px),0);
  opacity:calc(1 - max(0, var(--p,0) - .58) * 2.6);
}
/* Eckdaten steigen nacheinander auf, gesteuert vom Scroll */
.hero__fact{
  opacity:var(--f,0);
  transform:translate3d(0,calc((1 - var(--f,0)) * 22px),0);
}
.hero.is-ready .hero__fact{opacity:var(--f,0);transform:translate3d(0,calc((1 - var(--f,0)) * 22px),0);transition:none}
.hero.is-ready .hero__fact:nth-child(n){transition-delay:0s}

/* ---------- Fortschrittspunkte einer Szene ---------- */
.beats{
  position:absolute;left:0;right:0;bottom:clamp(28px,4vw,54px);z-index:4;
  display:flex;gap:12px;align-items:center;
}
.beat{
  width:26px;height:2px;background:var(--hair);position:relative;overflow:hidden;
}
.beat::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(var(--b,0));transform-origin:0 50%;
}
.section--night .beat{background:rgba(205,174,124,.22)}

/* ---------- Flächenszene ---------- */
.area .scene__inner{text-align:center}
.area__plan{position:relative;width:100%;max-width:min(760px,64vw);margin:0 auto}
.area__plan svg{width:100%;height:auto;display:block}
.area__body{position:relative;min-height:clamp(150px,16vw,190px);max-width:720px;margin:clamp(18px,2.4vw,30px) auto 0}
.area__step{
  position:absolute;inset:0;
  opacity:var(--s,0);
  transform:translate3d(0,calc((1 - var(--s,0)) * 14px),0);
  pointer-events:none;
}
.area__step .area__num i{font-style:normal;font-weight:300;font-size:.5em;color:var(--gold);margin:0 .12em}
.area__step[data-active]{pointer-events:auto}
.area__step .area__num{
  font-family:var(--sans);font-weight:700;font-variant-numeric:lining-nums;
  font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0;
}
.area__step .area__num small{font-size:.34em;font-weight:400;color:var(--gold);margin-left:5px}
.area__step h3{margin:14px 0 8px}
.area__step p{margin:0 auto;font-size:16px;color:var(--ink-3);max-width:60ch}

/* Baukörper im Grundriss */
.area__plan [data-body]{
  fill:var(--gold);fill-opacity:calc(var(--o,0) * .18);
  stroke:var(--gold);stroke-opacity:calc(.34 + var(--o,0) * .66);stroke-width:1.8;
}
.area__plan.is-split [data-body-group="1"] [data-body],
.area__plan.is-split [data-body-group="2"] [data-body]{fill:var(--wine);stroke:var(--wine)}
.area__plan [data-body]{transition:fill .7s var(--soft),stroke .7s var(--soft)}
.area__plan [data-label]{
  font-family:var(--sans);font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  fill:var(--ink-3);opacity:var(--o,0);
}

/* ---------- Szenario-Umschalter ---------- */
.switch__stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.switch__side{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:var(--s,0);pointer-events:none;
}
.switch__side[data-on]{pointer-events:auto}

/* ---------- Zeitplan: horizontaler Durchlauf ---------- */
.track{
  display:flex;gap:clamp(28px,3.4vw,56px);
  transform:translate3d(calc(var(--x,0) * -1px),0,0);
  will-change:transform;
}
.track__col{flex:0 0 clamp(240px,25vw,330px)}
.track__head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.track__kw{
  font-family:var(--sans);font-weight:700;font-variant-numeric:lining-nums;
  font-size:clamp(19px,1.7vw,24px);color:var(--gold-dp);letter-spacing:-.01em;white-space:nowrap;
}

/* ---------- Kennzahlen als eigener Moment ---------- */
.figures{display:flex;align-items:baseline;gap:clamp(30px,5vw,90px);flex-wrap:wrap}
.figures .big{font-size:clamp(38px,4.8vw,72px)}

@media (max-width:900px){
  .scene__pin{height:auto;position:static;padding:clamp(70px,10vw,120px) 0}
  .scene{height:auto!important}
  .hero .scene__pin{padding:clamp(80px,12vw,130px) 0 clamp(50px,7vw,80px)}
  .hero__fact{opacity:1!important;transform:none!important}
  .hero__lead{transform:none!important;opacity:1!important}
  .area__plan{max-width:100%}
  .area__body{min-height:0;margin-top:30px}
  .area__step{position:static;opacity:1!important;transform:none!important;margin-bottom:30px}
  .switch__side{position:static;opacity:1!important}
  .track{transform:none!important;flex-wrap:wrap}
  .track__col{flex:1 1 260px}
  .figure{opacity:1!important;transform:none!important}
  .beats{display:none}
}

/* ---------- Szenario-Umschalter ---------- */
.switch__stage{position:relative;min-height:clamp(320px,42vw,440px);display:block}
.switch__side{
  position:absolute;inset:0;display:block;
  opacity:var(--s,0);transform:translate3d(0,calc((1 - var(--s,0)) * 16px),0);
  pointer-events:none;
}
.switch__col{width:min(46%,520px)}
.switch__pair{display:flex;gap:clamp(30px,4vw,64px);margin-top:clamp(24px,3vw,40px);flex-wrap:wrap}
.switch__plan{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:min(48%,600px);pointer-events:none;
}
.switch__plan svg{width:100%;height:auto;display:block}
.switch__plan [data-body]{
  fill:var(--gold);stroke:var(--gold-lt);stroke-width:2;
  fill-opacity:.2;stroke-opacity:1;
  transition:fill .6s var(--soft),stroke .6s var(--soft);
}
.switch__plan [data-label]{
  font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;fill:rgba(247,240,229,.82);
}
.switch__plan.is-split [data-body-group="1"] [data-body],
.switch__plan.is-split [data-body-group="2"] [data-body]{fill:#d4788f;stroke:#e59aad}
.switch__plan line{stroke:rgba(205,174,124,.5)}
.switch__plan [data-street]{fill:rgba(205,174,124,.7);font-size:13px}

/* ---------- Zeitplan: horizontaler Durchlauf ---------- */
.track-viewport{overflow:hidden;width:100%}
.track{align-items:flex-start}
.track__col .list li{font-size:15.5px;padding:11px 0}

@media (max-width:900px){
  .switch__stage{min-height:0}
  .switch__side{position:static;transform:none!important;margin-bottom:44px}
  .switch__col{width:100%}
  .switch__plan{position:static;width:100%;max-width:360px;transform:none;margin-top:30px}
  .track-viewport{overflow:visible}
}

/* ---------- „100 %" bleibt stehen, die Bedeutung wechselt ---------- */
.hundred{display:flex;align-items:center;gap:clamp(28px,5vw,80px);flex-wrap:wrap}
.hundred__num{
  margin:0;font-family:var(--sans);font-weight:700;font-variant-numeric:lining-nums;
  font-size:clamp(76px,13vw,190px);line-height:.86;letter-spacing:-.035em;color:#faf4e9;
}
.hundred__num small{font-size:.3em;font-weight:400;color:var(--gold);margin-left:8px;letter-spacing:0}
.hundred__stack{position:relative;flex:1 1 320px;min-height:clamp(80px,9vw,130px)}
.hundred__lbl{
  position:absolute;left:0;top:50%;
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3.6vw,52px);line-height:1.12;color:var(--gold-lt);
  opacity:var(--s,0);
  transform:translate3d(0,calc(-50% + (1 - var(--s,0)) * 18px),0);
  white-space:nowrap;
}
@media (max-width:900px){
  .hundred{display:block}
  .hundred__stack{position:static;min-height:0;margin-top:20px}
  .hundred__lbl{position:static;opacity:1!important;transform:none!important;display:block;
    white-space:normal;font-size:clamp(21px,4.6vw,30px);margin-bottom:10px}
}

/* =========================================================
   Flächenlinie — eine Linie, die sich teilt
   --g1 / --g2  Lücke vor Segment 1 / 2  (0 … 1)
   --a          Hervorhebung des Segments (0 … 1)
   --merge      Segment 1 + 2 werden zur zweiten Adresse (0 … 1)
   ========================================================= */
.bar{
  position:relative;display:flex;align-items:flex-start;
  width:100%;max-width:960px;margin:clamp(40px,5vw,72px) auto clamp(56px,7vw,100px);
  padding-top:14px;
}
.bar__seg{
  flex:var(--w) 0 0;position:relative;min-width:0;
  margin-left:calc(var(--g,0) * 18px);
  transition:margin-left .05s linear;
}
.bar__seg[data-seg="0"]{margin-left:0}
.bar__line{position:relative;height:2px;background:var(--hair-2)}
.bar__line::after{
  content:"";position:absolute;inset:0;
  background:var(--gold);
  opacity:calc(.28 + var(--a,0) * .72);
  transform:scaleY(calc(1 + var(--a,0) * .5));
  transition:background-color .7s var(--soft);
}
.bar.is-merged .bar__seg[data-seg="1"] .bar__line::after,
.bar.is-merged .bar__seg[data-seg="2"] .bar__line::after{background:var(--wine)}

/* Beschriftung unter jedem Segment */
.bar__lbl,.bar__merged,.bar__whole{
  position:absolute;top:22px;left:0;
  display:flex;flex-direction:column;gap:2px;white-space:nowrap;
  font-family:var(--sans);text-align:left;
}
.bar__lbl span,.bar__merged span,.bar__whole span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.bar__lbl b,.bar__merged b,.bar__whole b{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:lining-nums}
.bar__lbl{opacity:var(--l,0);transform:translate3d(0,calc((1 - var(--l,0)) * 6px),0)}
.bar__lbl--end{left:auto;right:0;text-align:right}
.bar__merged{
  left:calc(60.16% + 18px);opacity:var(--m,0);
  transform:translate3d(0,calc((1 - var(--m,0)) * 6px),0);
}
.bar__merged b{color:var(--wine)}
.bar__whole{
  left:50%;transform:translate3d(-50%,calc((1 - var(--wh,0)) * 6px),0);text-align:center;align-items:center;
  opacity:var(--wh,0);
}

.area__body{min-height:clamp(150px,16vw,190px)}

@media (max-width:900px){
  .bar{margin:28px auto 44px}
  .bar__seg{margin-left:calc(var(--g,0) * 8px)}
  .bar__lbl span,.bar__merged span,.bar__whole span{font-size:9.5px}
  .bar__lbl b,.bar__merged b,.bar__whole b{font-size:13px}
  .bar__merged{left:calc(60.16% + 8px)}
}


/* =========================================================
   Mobil-Feinschliff
   ========================================================= */
@media (max-width:600px){
  /* Tabellen werden Karten: jede Zeile ein Block, jede Zelle mit ihrem Spaltenkopf */
  .table-wrap{overflow:visible;border-top:0}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;min-width:0;width:100%}
  .table-wrap thead{display:none}
  .table-wrap tbody tr{
    padding:16px 0 14px;border-top:1px solid var(--hair);border-bottom:0;
    transform:none;
  }
  .table-wrap tbody tr:last-child{border-bottom:1px solid var(--hair)}
  /* Zwei Spalten, beide dürfen umbrechen — kein Wort sprengt die Karte */
  .table-wrap td{
    display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:14px;align-items:baseline;
    padding:6px 0;border:0;text-align:right;white-space:normal;overflow-wrap:anywhere;
  }
  .table-wrap td::before{
    content:attr(data-label);text-align:left;
    font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-4);line-height:1.45;
  }
  .section--night .table-wrap td::before{color:rgba(205,174,124,.8)}
  .table-wrap td:first-child{font-size:12px;letter-spacing:.12em;padding-bottom:8px}
  .table-wrap td:first-child::before{content:attr(data-label)}
  .table-wrap .num{text-align:right}
  .table-wrap tbody tr:nth-child(n){transition-delay:0s}

  /* Gesperrte Kleinschrift: unter 11,5 px liest sie niemand */
  .label,.kicker,.src,th,.hero__fact dt,.big-lbl,.stage,.confidential,.header__obj,
  .bar__lbl span,.bar__merged span,.bar__whole span{font-size:11.5px}
  .kicker b{font-size:11.5px}
  .confidential{padding:9px 14px;letter-spacing:.16em;line-height:1.5}

  .btn{font-size:12px;padding:14px 28px}
  .confidential__more{display:none}

  /* Berührbare Ziele: mindestens 40 px */
  .footer a{display:inline-block;padding:8px 0}
  .footer__bottom nav a{padding:10px 0}
  .nav.is-open a{padding:15px 0}

  /* Rhythmus enger */
  .section{padding:clamp(48px,12vw,72px) 0}
  .head{margin-bottom:26px}
  .g2,.g3,.g4,.g5{gap:26px}
  .panel{padding:22px 20px}
  .list--tight li{padding:9px 0}

  /* Hero: eine Spalte, Fakten untereinander mit Luft */
  .hero .scene__pin{padding-top:clamp(72px,16vw,100px)}
  .hero__facts{grid-template-columns:1fr;max-width:none}
  .hero__fact{border-right:0;border-bottom:1px solid var(--hair-2);padding:14px 0 8px}
  .hero__fact:last-child{border-bottom:0}

  /* Flächenlinie: auf Mobil erzählen die fünf gestapelten Schritte die Geschichte — die Linie entfällt */
  .bar{display:none}
  .area__body{margin-top:18px}
  .area__step{margin-bottom:38px}
}

/* =========================================================
   Fassung 3 — um die Entscheidung gebaut
   ========================================================= */

/* ---------- Die Frage ---------- */
.ask{padding:clamp(88px,12vw,170px) 0}
.ask__inner{max-width:900px}
.h-ask{
  font-family:var(--display);font-weight:300;
  font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-.012em;color:#faf4e9;
}
.spine{
  list-style:none;margin:clamp(48px,6vw,84px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);
}
.spine a{
  display:block;padding:22px 0 0;border-top:1px solid var(--hair-dark);
  color:rgba(247,240,229,.82);transition:color .4s var(--soft),border-color .4s var(--soft);
}
.spine a:hover{color:#faf4e9;border-top-color:var(--gold)}
.spine b{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:12px}
.spine span{font-family:var(--display);font-size:clamp(21px,2vw,27px);line-height:1.25}

/* ---------- Kennzahlen-Paar ---------- */
.numbers{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);
  margin:clamp(44px,5.4vw,72px) 0 clamp(26px,3vw,40px);
  padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--hair);
}
.big i{font-style:normal;font-weight:300;font-size:.5em;color:var(--gold);margin:0 .1em}

/* ---------- Aufklapper ---------- */
.more{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.more summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:20px 0;position:relative;padding-right:44px;
}
.more summary::-webkit-details-marker{display:none}
.more summary span{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500}
.more summary em{font-style:normal;font-size:15.5px;color:var(--ink-3)}
.more summary::after{
  content:"";position:absolute;right:4px;top:50%;width:14px;height:14px;
  background:
    linear-gradient(var(--gold),var(--gold)) center/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1px 14px no-repeat;
  transform:translateY(-50%);transition:transform .5s var(--soft);
}
.more[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.more summary:hover span{color:var(--gold-dp)}
.more__body{padding:8px 0 clamp(36px,4.4vw,56px)}
.more .more__body{animation:more-in .7s var(--soft) both}
@keyframes more-in{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
.section--night .more{border-color:var(--hair-dark)}
.section--night .more summary span{color:#faf4e9}
.section--night .more summary em{color:rgba(247,240,229,.62)}
.section--night .more summary:hover span{color:var(--gold-lt)}
.section--night .more summary::after{
  background:
    linear-gradient(var(--gold-lt),var(--gold-lt)) center/14px 1px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) center/1px 14px no-repeat;
}

/* ---------- Menschen ---------- */
.people{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:clamp(24px,3vw,48px);align-items:start;margin-top:8px}
.person{padding-top:22px;border-top:1px solid var(--hair)}
.person__portrait{
  width:min(100%,220px);aspect-ratio:4/5;background:var(--paper-3);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:16px 18px;margin-bottom:22px;
  border:1px solid var(--hair-2);
}
.person__portrait span{font-family:var(--display);font-size:44px;font-weight:300;color:var(--gold-dp);letter-spacing:.02em}
.person__role{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin:6px 0 16px}
.person__quote{font-family:var(--display);font-style:italic;font-size:clamp(19px,1.6vw,23px);line-height:1.35;color:var(--wine);margin:0 0 18px}
.person__contact{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);margin:0}
.person__contact a:hover{color:var(--gold-dp)}
.person--team{padding-top:22px}
.team--small span{font-size:clamp(18px,1.6vw,22px)}

/* ---------- Sticky-CTA (nur Mobil) ---------- */
.cta-bar{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:140;
  display:none;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 20px;background:var(--night);color:#faf4e9;
  font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 18px 40px -18px rgba(20,17,13,.5);
  transform:translate3d(0,120%,0);transition:transform .5s var(--soft);
}
.cta-bar b{font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:none;color:var(--gold-lt)}
.cta-bar.is-on{transform:none}

@media (max-width:900px){
  .spine{grid-template-columns:1fr;gap:0}
  .spine a{padding:18px 0}
  .numbers{grid-template-columns:1fr;gap:28px}
  .people{grid-template-columns:1fr 1fr}
  .person--team{grid-column:1/-1}
  .cta-bar{display:flex}
  body{padding-bottom:78px}   /* Platz für die CTA-Leiste */
}
@media (max-width:600px){
  .people{grid-template-columns:1fr}
  .person__portrait{width:140px}
  .more summary{padding-right:34px}
  .more summary em{font-size:14.5px}
  .h-ask{font-size:clamp(34px,10vw,44px)}
}


/* ---------- Targetlist auf Mobil: ein Ticket je Kandidat, drei Zeilen ---------- */
@media (max-width:600px){
  #targets tbody tr{
    display:grid;grid-template-columns:26px max-content max-content 1fr auto;
    column-gap:10px;row-gap:3px;align-items:baseline;
    padding:13px 0 12px;border-top:1px solid rgba(205,174,124,.14);
  }
  #targets tbody tr:last-child{border-bottom:1px solid rgba(205,174,124,.14)}
  #targets td{display:block;padding:0;text-align:left;white-space:normal}
  #targets td::before{display:none}
  #targets td:nth-child(1){grid-column:1;grid-row:1/4;font-size:12px;color:var(--gold-lt);letter-spacing:.08em;padding-top:2px}
  #targets td:nth-child(2){grid-column:2/5;grid-row:1;font-size:16.5px;color:#faf4e9}
  #targets td:nth-child(7){grid-column:5;grid-row:1;justify-self:end}
  #targets td:nth-child(3),#targets td:nth-child(4),#targets td:nth-child(5){
    grid-row:2;font-family:var(--sans);font-size:12.5px;font-weight:400;color:rgba(247,240,229,.72);white-space:nowrap;
  }
  #targets td:nth-child(3){grid-column:2}
  #targets td:nth-child(4){grid-column:3}
  #targets td:nth-child(5){grid-column:4}
  #targets td:nth-child(4)::before,#targets td:nth-child(5)::before{
    content:"·";display:inline;color:var(--gold);margin-right:10px;font-family:var(--sans);font-size:12.5px;
  }
  #targets td:nth-child(6){grid-column:2/6;grid-row:3;font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:rgba(205,174,124,.8)}
  #targets td:nth-child(6)::before{content:"Zugang ";display:inline;text-transform:none;letter-spacing:.06em;color:rgba(205,174,124,.55);font-size:11.5px}
  #targets .stage{font-size:10.5px}

  .person__role{font-size:11.5px}
  .person__contact a{display:inline-block;padding:10px 0}
  .cta-bar b{font-size:11px}
}


/* =========================================================
   Erlebnis — Staffelung, Mobil-Fassade, Wisch-Karussell
   ========================================================= */

/* Kinder eines Reveal-Blocks erscheinen nacheinander */
.stagger > *{opacity:0;transform:translate3d(0,16px,0);transition:opacity .9s var(--soft),transform 1s var(--soft)}
.rv.is-in .stagger > *,.rv.is-in.stagger > *{opacity:1;transform:none}
.rv.is-in .stagger > :nth-child(1),.rv.is-in.stagger > :nth-child(1){transition-delay:.05s}
.rv.is-in .stagger > :nth-child(2),.rv.is-in.stagger > :nth-child(2){transition-delay:.18s}
.rv.is-in .stagger > :nth-child(3),.rv.is-in.stagger > :nth-child(3){transition-delay:.31s}
.rv.is-in .stagger > :nth-child(4),.rv.is-in.stagger > :nth-child(4){transition-delay:.44s}
.rv.is-in .stagger > :nth-child(5),.rv.is-in.stagger > :nth-child(5){transition-delay:.57s}
.rv.is-in .stagger > :nth-child(6),.rv.is-in.stagger > :nth-child(6){transition-delay:.70s}
/* 100 %-Begriffe: auf Desktop steuert die Szene, nicht die Staffelung */
@media (min-width:901px){
  .hundred__stack.stagger > .hundred__lbl{
    transition:none;
    opacity:var(--s,0);
    transform:translate3d(0,calc(-50% + (1 - var(--s,0)) * 18px),0);
  }
}

@media (max-width:900px){
  /* Hero-Fassade steht im Textfluss zwischen Claim und Eckdaten und zeichnet sich beim Öffnen */
  .hero .facade-svg.in-flow{
    position:static;width:118%;max-width:none;margin:28px -9% 4px;
    opacity:.62;filter:none;transform:none!important;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero .facade-svg.in-flow svg{stroke-width:1.7}

  .hero__facts{margin-top:18px}
  /* 100 %: Begriffe untereinander, gestaffelt */
  .hundred__stack.stagger .hundred__lbl{position:static;display:block;transform:none}
  .rv.is-in .hundred__stack.stagger .hundred__lbl{opacity:1}
}

@media (max-width:600px){
  /* Targetlist als Wisch-Karussell: ein Block, sieben Karten, die nächste lugt hervor */
  #targets{border-top:0}
  #targets tbody{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  #targets tbody::-webkit-scrollbar{display:none}
  #targets tbody tr{
    flex:0 0 min(76vw,300px);scroll-snap-align:start;
    display:grid;grid-template-columns:max-content max-content 1fr auto;
    grid-template-rows:auto auto auto 1fr;column-gap:10px;row-gap:6px;align-content:start;
    padding:18px 18px 16px;border:1px solid rgba(205,174,124,.26);border-top:1px solid rgba(205,174,124,.26);
    background:rgba(205,174,124,.06);
  }
  #targets tbody tr:last-child{border-bottom:1px solid rgba(205,174,124,.26)}
  #targets td:nth-child(1){grid-column:1;grid-row:1;font-size:12px;color:var(--gold-lt);letter-spacing:.08em;padding-top:0}
  #targets td:nth-child(7){grid-column:4;grid-row:1;justify-self:end}
  #targets td:nth-child(2){grid-column:1/5;grid-row:2;font-size:20px;line-height:1.2;color:#faf4e9;margin-top:4px}
  #targets td:nth-child(3){grid-column:1;grid-row:3}
  #targets td:nth-child(4){grid-column:2;grid-row:3}
  #targets td:nth-child(5){grid-column:3;grid-row:3}
  #targets td:nth-child(6){grid-column:1/5;grid-row:4;align-self:end;margin-top:10px}
  #targets::after{
    content:"Wischen \2192";display:block;margin-top:2px;
    font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(205,174,124,.6);
  }
  /* Karten kommen nacheinander ins Bild */
  #targets.is-in tbody tr:nth-child(n){transition-delay:0s}
  #targets.is-in tbody tr:nth-child(1){transition-delay:.05s}
  #targets.is-in tbody tr:nth-child(2){transition-delay:.15s}
  #targets.is-in tbody tr:nth-child(3){transition-delay:.25s}
}


/* =========================================================
   Milchglas-Scheibe mit Zugangswort
   ========================================================= */
html.gate-locked{overflow:hidden}
html.gate-locked body{overflow:hidden;height:100svh}
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--gut)}
html.gate-open .gate{display:none}
.gate__veil{
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(251,247,240,.78),rgba(246,238,226,.86));
  -webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gate__veil{background:linear-gradient(160deg,rgba(251,247,240,.97),rgba(246,238,226,.99))}
}
.gate__card{
  position:relative;width:min(440px,100%);text-align:center;margin:0;
  padding:clamp(34px,5vw,56px) clamp(26px,4vw,48px) clamp(26px,3.6vw,40px);
  background:rgba(251,247,240,.72);border:1px solid rgba(176,141,91,.28);
  box-shadow:0 30px 80px -30px rgba(20,17,13,.28),0 1px 0 rgba(255,255,255,.7) inset;
  animation:gateIn 1.1s var(--soft) both;
}
@keyframes gateIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.gate__logo{display:block;height:26px;margin:0 auto 26px}
.gate__kicker{margin:0 0 14px;color:var(--gold-dp)}
.gate__title{
  margin:0 0 16px;font-family:var(--display);font-weight:300;
  font-size:clamp(44px,6vw,64px);line-height:.95;letter-spacing:-.01em;color:var(--ink);
}
.gate__title em{font-style:normal;color:var(--gold)}
.gate__text{margin:0 auto 30px;max-width:34ch;font-size:15px;line-height:1.65;color:var(--ink-3);font-weight:300}
.gate__field{display:block;position:relative;text-align:left;margin:0 0 6px}
.gate__lbl{
  display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:4px;
}
.gate__input{
  display:block;width:100%;box-sizing:border-box;margin:0;padding:10px 0 12px;
  font-family:var(--sans);font-size:22px;letter-spacing:.32em;font-weight:400;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(20,17,13,.22);
  border-radius:0;outline:none;text-align:center;caret-color:var(--gold);
  transition:border-color .4s var(--soft);
}
.gate__input:focus{border-bottom-color:transparent}
.gate__line{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;transition:transform .55s var(--soft);
}
.gate__input:focus ~ .gate__line{transform:scaleX(1)}
.gate__hint{min-height:20px;margin:0 0 20px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--wine)}
.gate__hint.is-info{color:var(--ink-4)}
.gate.is-busy .gate__btn{opacity:.55;cursor:progress}
.gate__btn{width:100%;padding:16px 20px}
.gate__foot{margin:26px 0 0;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}

.gate.is-wrong .gate__card{animation:gateShake .5s cubic-bezier(.36,.07,.19,.97)}
.gate.is-wrong .gate__input{border-bottom-color:var(--wine)}
@keyframes gateShake{
  10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}
}
.gate.is-leaving{pointer-events:none;transition:opacity 1s var(--soft);opacity:0}
.gate.is-leaving .gate__card{transition:transform 1s var(--soft),opacity .7s var(--soft);transform:translate3d(0,-14px,0) scale(.985);opacity:0}
.gate.is-leaving .gate__veil{transition:-webkit-backdrop-filter 1s var(--soft),backdrop-filter 1s var(--soft);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
@media (prefers-reduced-motion:reduce){
  .gate__card{animation:none}
  .gate.is-leaving,.gate.is-leaving *{transition-duration:.01s}
}
@media (max-width:600px){
  .gate{padding:18px}
  .gate__card{padding:30px 22px 24px}
  .gate__input{font-size:20px;letter-spacing:.26em}
}


/* =========================================================
   Hero: Foto schimmert hinter der Fassadenzeichnung durch
   ========================================================= */
.hero__photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .facade,.hero .facade-svg{z-index:1}
.hero__photo img{
  position:absolute;right:-3%;bottom:-8%;width:min(80%,1240px);height:auto;display:block;
  opacity:calc(.42 + var(--p,0) * .14);
  filter:saturate(.7) sepia(.22) contrast(.94) brightness(1.04) blur(.3px);
  mix-blend-mode:multiply;
  transform:translate3d(0,calc((1 - var(--p,0)) * 22px),0) scale(calc(1.05 - var(--p,0) * .05));
  transform-origin:100% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,rgba(0,0,0,.6) 56%,#000 78%),
                     radial-gradient(ellipse 78% 92% at 68% 62%,#000 0%,rgba(0,0,0,.75) 48%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,rgba(0,0,0,.6) 56%,#000 78%),
                     radial-gradient(ellipse 78% 92% at 68% 62%,#000 0%,rgba(0,0,0,.75) 48%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
@media (prefers-reduced-motion:reduce){.hero__photo img{transform:none;opacity:.5}}
@media (max-width:900px){
  /* Mobil: Foto liegt im Block der Fassadenzeichnung, oben und unten weich ins Papier */
  .hero .facade-svg.in-flow{position:relative;opacity:1!important;width:118%;margin:24px -9% 6px}
  .hero .facade-svg.in-flow svg{position:relative;z-index:1;opacity:.82}
  .hero .facade-svg.in-flow .hero__photo{position:absolute;left:0;right:0;top:-4%;bottom:-14%;overflow:hidden;z-index:0}
  .hero .facade-svg.in-flow .hero__photo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 42%;
    right:auto;bottom:auto;max-width:none;transform:none;
    opacity:.56;filter:saturate(.68) sepia(.2) contrast(.95) brightness(1.03) blur(.25px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 22%,#000 40%,#000 70%,rgba(0,0,0,.7) 86%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 22%,#000 40%,#000 70%,rgba(0,0,0,.7) 86%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  /* Solange das Skript das Foto noch nicht verschoben hat: unsichtbar */
  .hero .scene__pin > .hero__photo{display:none}
}


/* Konfliktpunkte auf Mobil: jede Zeile eine Karte mit klarer Reihenfolge */
@media (max-width:600px){
  #conflicts tbody{display:grid;gap:12px}
  #conflicts tbody tr{
    padding:18px 18px 18px;border:1px solid var(--hair);background:var(--paper-2);
  }
  #conflicts tbody tr:last-child{border-bottom:1px solid var(--hair)}
  #conflicts td{display:block;text-align:left;padding:0;overflow-wrap:normal}
  #conflicts td::before{display:block;margin-bottom:5px;text-align:left}
  #conflicts td:first-child{
    font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:0;line-height:1.35;color:var(--ink);
    padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--hair);
  }
  #conflicts td:first-child::before{content:"Situation"}
  #conflicts td:nth-child(2){font-size:15px;line-height:1.5;color:var(--ink-3);margin-bottom:14px}
  #conflicts td:nth-child(2)::before{content:"Risiko beim großen Haus"}
  #conflicts td:nth-child(3){font-size:16.5px;line-height:1.45;padding-left:14px;border-left:2px solid var(--gold)}
  #conflicts td:nth-child(3)::before{content:"Unser Versprechen"}
}


/* =========================================================
   Abschnitt 01: der Film steht neben dem Text
   Kopf trägt nur Kicker und Headline, darunter eine Goldlinie.
   Der Fließtext und die vier Qualitäten stehen als Block links,
   der Film als hochformatige Spalte rechts — kein Leerraum mehr.
   ========================================================= */
.head--rule{max-width:1040px;margin-bottom:0}
/* Die Headline hält ihre zwei gesetzten Zeilen — kein hängendes Wortende */
.head--rule .h-1{font-size:clamp(38px,4.9vw,70px)}
.head__rule{width:clamp(120px,16vw,220px);height:1px;background:var(--gold);margin-top:clamp(26px,3.2vw,44px)}

.intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(250px,25vw,344px);
  gap:clamp(40px,5.2vw,86px);
  align-items:start;
  margin-top:clamp(34px,4.2vw,58px);
}
.intro__text .lead{max-width:54ch;margin:0}
.qual{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3vw,42px) clamp(30px,3.4vw,54px);
  margin-top:clamp(32px,4vw,56px);
}
.qual .label{color:var(--gold-dp);margin-bottom:13px}
.qual p:last-child{margin:0;font-size:16.5px;line-height:1.66}

/* ---------------- Film ---------------- */
.film{margin:0}
.film__frame{
  position:relative;overflow:hidden;aspect-ratio:9/16;
  background:var(--night);border:1px solid var(--hair);
}
.film__v{width:100%;height:100%;object-fit:cover;background:var(--night);
  filter:saturate(.92) contrast(1.02) brightness(.99)}
/* Warmer Schleier und Vignette: der Film sitzt im Papier, nicht darauf */
.film__grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 92% 74% at 50% 46%,transparent 0%,rgba(20,17,13,.16) 72%,rgba(20,17,13,.42) 100%),
    linear-gradient(180deg,rgba(92,43,61,.1),transparent 26%,transparent 74%,rgba(20,17,13,.24));
}
.film__prog{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(247,240,229,.2)}
.film__prog i{
  display:block;height:100%;background:var(--gold-lt);
  transform:scaleX(var(--fp,0));transform-origin:0 50%;
}
.film__cap{
  margin-top:17px;font-family:var(--sans);font-weight:300;
  font-size:12.5px;line-height:1.74;color:var(--ink-3);
}
.film__cap b{
  display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:9px;
}
@media (prefers-reduced-motion:reduce){.film__prog{display:none}}

@media (max-width:1140px){
  .intro{grid-template-columns:minmax(0,1fr) clamp(230px,25vw,300px);gap:clamp(36px,4.4vw,60px)}
}
@media (max-width:900px){
  /* Gestapelt: der Film führt in den Abschnitt ein, dann folgt der Text.
     Hochformat bleibt Hochformat — beschnitten wird nichts, nur die Breite begrenzt. */
  .intro{display:flex;flex-direction:column;margin-top:clamp(28px,4vw,40px)}
  .film{order:-1;width:min(100%,360px);margin-bottom:clamp(30px,5vw,42px)}
  .intro__text .lead{max-width:none}
  .film__cap{max-width:52ch}
}
@media (max-width:600px){
  .qual{grid-template-columns:1fr;gap:26px;margin-top:30px}
}


/* =========================================================
   Ergänzungen aus dem Deck: 30-Tage-Liste, Prozessstufen, KW-Zeile
   ========================================================= */
.list--cols{columns:2;column-gap:clamp(30px,4vw,60px)}
.list--cols li{break-inside:avoid}
.list--num.list--cols li:nth-child(6){border-top:1px solid var(--hair-dark)}
.steps{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;
  counter-reset:st;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.steps li{counter-increment:st;display:flex;align-items:baseline;gap:8px;padding-right:22px;color:rgba(247,240,229,.72)}
.steps li::before{content:counter(st,decimal-leading-zero);color:var(--gold);font-weight:600;letter-spacing:.1em}
.steps li:not(:last-child)::after{content:"";width:14px;height:1px;background:var(--hair-dark);margin-left:14px;align-self:center}
.g3--kw{max-width:760px}
@media (max-width:600px){
  .list--cols{columns:1}
  .list--num.list--cols li:nth-child(6){border-top:0}
  .steps li:not(:last-child)::after{display:none}
}


/* Porträts der Betreuer: Foto füllt die Platzhalterfläche, Papierton bleibt Hintergrund */
.person__portrait--photo{padding:0;overflow:hidden;display:block}
.person__portrait--photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:saturate(.92)}


/* =========================================================
   Zeitreise: der Zeitplan baut sich als Linie auf
   ========================================================= */
.journey{--step:.34s;--jgap:clamp(20px,2.4vw,38px)}
.journey.rv{opacity:1;transform:none;transition:none}
.journey__row{list-style:none;margin:0;padding:0;display:grid;gap:var(--jgap);position:relative}
.journey__row--kw{grid-template-columns:repeat(3,1fr)}
.journey__row--phase{grid-template-columns:repeat(5,1fr);margin-top:clamp(28px,3.6vw,48px)}
.journey__item{position:relative;padding-top:24px;min-width:0}
.journey__txt{margin:6px 0 0;font-size:15px}
/* Station */
.journey__node{
  position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--gold-lt);
  transform:scale(0);transition:transform .55s var(--soft);transition-delay:calc(var(--i) * var(--step));
}
/* Segment zur nächsten Station */
.journey__item::before{
  content:"";position:absolute;left:12px;right:calc(-1 * var(--jgap) - 2px);top:4px;height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(205,174,124,.4));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--soft-out);transition-delay:calc(var(--i) * var(--step) + .1s);
}
.journey__row > .journey__item:last-child::before{right:0;background:linear-gradient(90deg,var(--gold),transparent)}
/* Text folgt der Station */
.journey__item .track__kw,.journey__item .journey__txt{
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .7s var(--soft),transform .8s var(--soft);
}
.journey__item .track__kw{transition-delay:calc(var(--i) * var(--step) + .16s)}
.journey__item .journey__txt{transition-delay:calc(var(--i) * var(--step) + .3s)}
/* Läufer, der der Linie vorausleuchtet */
.journey__row::after{
  content:"";position:absolute;left:0;top:4px;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff3dc;box-shadow:0 0 14px 4px rgba(205,174,124,.5);opacity:0;pointer-events:none;
}
@keyframes journeyRun{0%{left:0;opacity:0}6%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes journeyPulse{0%{box-shadow:0 0 0 0 rgba(205,174,124,.5)}75%,100%{box-shadow:0 0 0 13px rgba(205,174,124,0)}}
/* Ankunft im Bild */
.journey.is-in .journey__node{transform:scale(1)}
.journey.is-in .journey__item::before{transform:scaleX(1)}
.journey.is-in .journey__item .track__kw,.journey.is-in .journey__item .journey__txt{opacity:1;transform:none}
.journey.is-in .journey__row--kw::after{animation:journeyRun 1.15s var(--soft-out) .08s both}
.journey.is-in .journey__row--phase::after{animation:journeyRun 1.9s var(--soft-out) 1.08s both}
.journey.is-in .journey__item.is-now .journey__node{animation:journeyPulse 2.8s ease-out 3s infinite}
@media (prefers-reduced-motion:reduce){
  .journey__node,.journey.is-in .journey__node{transform:scale(1);transition:none;animation:none}
  .journey__item::before{transform:scaleX(1);transition:none}
  .journey__item .track__kw,.journey__item .journey__txt{opacity:1;transform:none;transition:none}
  .journey__row::after{display:none}
}
/* Mobil: die Reise läuft senkrecht an einer Linie links */
@media (max-width:600px){
  .journey__row--kw,.journey__row--phase{grid-template-columns:1fr;gap:0}
  .journey__row--phase{margin-top:0}
  .journey__item{padding:0 0 26px 24px}
  .journey__node{left:0;top:7px}
  .journey__item::before{
    left:4px;right:auto;top:18px;bottom:-4px;width:1px;height:auto;
    background:linear-gradient(180deg,var(--gold),rgba(205,174,124,.4));
    transform:scaleY(0);transform-origin:50% 0;
  }
  .journey.is-in .journey__item::before{transform:scaleY(1)}
  .journey__row > .journey__item:last-child::before{right:auto;background:linear-gradient(180deg,var(--gold),rgba(205,174,124,.4))}
  .journey__row--phase > .journey__item:last-child::before{background:linear-gradient(180deg,var(--gold),transparent)}
  .journey__row::after{display:none}
  .journey .track__kw{font-size:17px}
}


/* ---------------- Film: Ton-Schalter ---------------- */
.film__sound{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px 8px 9px;
  background:rgba(20,17,13,.42);border:1px solid rgba(247,240,229,.28);color:#f3e7d2;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.film__sound:hover{background:rgba(20,17,13,.62);border-color:var(--gold-lt)}
.film__sound svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.film__sound svg path:first-child{fill:currentColor;stroke:none}
.film__sound .film__wave{opacity:0}
.film__sound[aria-pressed="true"] .film__wave{opacity:1}
.film__sound[aria-pressed="true"] .film__off{opacity:0}

/* ---------------- Hero: bei niedrigen Fenstern nichts abschneiden ----------------
   Die Szene bleibt geheftet, wächst aber mit dem Inhalt; der untere Rand wird am
   Ende der Szene frei. Dazu eine kompaktere Stufe für flache Bildschirme. */
@media (min-width:901px){
  .hero .scene__pin{height:auto;min-height:100svh}
}
/* Flache Bildschirme (Laptop mit Browserleiste): der Hero rückt zusammen, statt zu wachsen */
@media (min-width:901px) and (max-height:820px){
  .h-hero{font-size:clamp(60px,10vw,140px)}
  .hero__kicker{margin-bottom:14px}
  .hero__rule{margin:18px 0 14px}
  .hero__claim{font-size:clamp(20px,2.1vw,28px)}
  .hero__meta{margin-top:14px}
  .hero__facts{margin-top:22px}
  .hero__fact{padding:13px 26px 4px 0}
  .hero__fact dt{margin-bottom:7px}
  .hero__fact dd{font-size:clamp(20px,1.9vw,26px)}
}