:root{
  --bg:#ECEEE9;
  --bg-band:#DFE3DD;
  --surface:#FBFAF7;
  --surface-2:#F2F3EF;
  --line:#D3D8D1;
  --line-soft:#E2E5DF;
  --text:#101F24;
  --text-dim:#4E6167;
  --text-faint:#7C8D91;
  --accent:#8A6A22;
  --accent-bright:#C9A85C;
  --accent-soft:#CBb078;
  --accent-wash:rgba(138,106,34,.08);
  --salvia:#3F6849;
  --warn:#9A4E28;
  --shadow-s:0 1px 2px rgba(16,31,36,.05), 0 4px 14px -6px rgba(16,31,36,.18);
  --shadow:0 1px 2px rgba(16,31,36,.06), 0 18px 44px -22px rgba(16,31,36,.35);
  --shadow-l:0 2px 4px rgba(16,31,36,.08), 0 30px 70px -30px rgba(16,31,36,.45);
  --scrim:linear-gradient(180deg, rgba(4,18,22,.58) 0%, rgba(4,18,22,.20) 40%, rgba(4,18,22,.82) 100%);
  --r-s:10px;
  --r:16px;
  --r-l:22px;
  --nav-h:60px;
  --f-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#071A20;
    --bg-band:#04141A;
    --surface:#0D2B33;
    --surface-2:#123842;
    --line:#1E4854;
    --line-soft:#153340;
    --text:#EFEADD;
    --text-dim:#9DB2B5;
    --text-faint:#6E8589;
    --accent:#D4B478;
    --accent-bright:#E8CD96;
    --accent-soft:#8A7443;
    --accent-wash:rgba(212,180,120,.09);
    --salvia:#93B89B;
    --warn:#DE9A70;
    --shadow-s:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.55);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 46px -24px rgba(0,0,0,.85);
    --shadow-l:0 2px 4px rgba(0,0,0,.5), 0 34px 80px -32px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --bg:#071A20;
  --bg-band:#04141A;
  --surface:#0D2B33;
  --surface-2:#123842;
  --line:#1E4854;
  --line-soft:#153340;
  --text:#EFEADD;
  --text-dim:#9DB2B5;
  --text-faint:#6E8589;
  --accent:#D4B478;
  --accent-bright:#E8CD96;
  --accent-soft:#8A7443;
  --accent-wash:rgba(212,180,120,.09);
  --salvia:#93B89B;
  --warn:#DE9A70;
  --shadow-s:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.55);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 46px -24px rgba(0,0,0,.85);
  --shadow-l:0 2px 4px rgba(0,0,0,.5), 0 34px 80px -32px rgba(0,0,0,.95);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:500}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--accent-bright); color:#08181D}
:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:4px}

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

.wrap{width:min(1160px, calc(100% - 2.5rem)); margin-inline:auto}
.prose{max-width:66ch}
.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
}
.dim{color:var(--text-dim)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.78em 1.45em; border-radius:999px;
  font:500 .95rem/1 var(--f-body); letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s, border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{
  background:linear-gradient(135deg, var(--accent-bright), #B98F3E);
  color:#20180A; box-shadow:0 8px 24px -10px rgba(201,168,92,.65);
}
.btn--gold:hover{box-shadow:0 14px 32px -12px rgba(201,168,92,.8)}
.btn--ghost{
  color:#F3EEE1; border-color:rgba(243,238,225,.4);
  background:rgba(8,24,29,.25); backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:rgba(243,238,225,.75); background:rgba(8,24,29,.4)}
.sec .btn--ghost{color:var(--text); border-color:var(--line); background:var(--surface)}
.sec .btn--ghost:hover{border-color:var(--accent); background:var(--accent-wash)}

/* ============ NAVIGATION ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--nav-h);
  background:rgba(6,22,27,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(227,200,140,.14);
}
.nav__in{height:100%; display:flex; align-items:center; gap:1.2rem}
.nav__brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  color:#F3EEE1; white-space:nowrap;
}
.nav__brand svg{flex:none}
.nav__brand b{font:600 .78rem/1.2 var(--f-body); letter-spacing:.22em; text-transform:uppercase}
.nav__brand span{display:block; font:400 .58rem/1 var(--f-mono); letter-spacing:.3em; color:rgba(227,200,140,.75); text-transform:uppercase; margin-top:.25rem}
.nav__links{
  display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:none;
  flex:1; min-width:0; padding:0 .4rem;
}
.nav__links::-webkit-scrollbar{display:none}
.nav__links a{
  flex:none; padding:.5rem .7rem; border-radius:8px; text-decoration:none;
  font:500 .72rem/1 var(--f-mono); letter-spacing:.13em; text-transform:uppercase;
  color:rgba(240,235,222,.62); transition:color .2s, background .2s; position:relative;
}
.nav__links a:hover{color:#fff; background:rgba(255,255,255,.07)}
.nav__links a[aria-current]{
  color:var(--accent-bright);
  background:rgba(227,200,140,.10);
}
.nav__ctrl{display:flex; align-items:center; gap:.5rem; flex:none}
.mode{
  display:flex; align-items:center; padding:.28rem; gap:.15rem;
  border:1px solid rgba(243,238,225,.22); border-radius:999px;
}
.mode button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:.38rem .8rem; border-radius:999px;
  font:500 .68rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(240,235,222,.55); transition:color .2s, background .2s;
}
.mode button[aria-pressed="true"]{
  background:var(--accent-bright); color:#20180A;
}
.tbtn{
  appearance:none; width:36px; height:36px; display:grid; place-items:center;
  border:1px solid rgba(243,238,225,.22); border-radius:50%; cursor:pointer;
  background:transparent; color:rgba(240,235,222,.85);
  transition:border-color .2s, transform .25s;
}
.tbtn:hover{border-color:rgba(243,238,225,.6); transform:rotate(15deg)}
.tbtn svg{width:16px; height:16px}
:root[data-theme="dark"] .tbtn .i-moon{display:none}
:root:not([data-theme="dark"]) .tbtn .i-sun{display:none}
.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--accent-soft), var(--accent-bright));
  z-index:2; transition:width .12s linear;
}
@media (max-width:900px){
  .nav__brand b, .nav__brand span{display:none}
  .mode button{padding:.38rem .6rem}
}
@media (max-width:640px){
  .nav__in{gap:.6rem}
  .nav__brand svg{width:26px;height:26px}
  .tbtn{width:32px;height:32px}
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:min(96vh, 900px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; isolation:isolate;
  background:#041216;
}
.hero__img{
  position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; z-index:-2;
  animation:drift 46s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.09) translate3d(-1.6%,-1.4%,0)}}
.hero::after{content:""; position:absolute; inset:0; background:var(--scrim); z-index:-1}
.hero__inner{padding:calc(var(--nav-h) + clamp(2.5rem,7vw,5rem)) 0 0}
.hero h1{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:520;
  color:#F7F2E7;
  font-size:clamp(4.2rem, 14vw, 11rem); line-height:.9; letter-spacing:-.02em;
  margin:.3em 0 .16em;
}
.hero h1 em{font-style:italic; font-weight:480; color:#E8CD96}
.hero__eyebrow{color:#E8CD96}
.hero__lead{
  color:#EBE6D9; font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.55;
  max-width:56ch; margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:clamp(2rem,5vw,3.2rem)}
.statbar{
  border-top:1px solid rgba(232,205,150,.26);
  display:grid; grid-template-columns:repeat(5,1fr);
  margin-bottom:clamp(1.6rem,4vw,2.6rem);
  backdrop-filter:blur(2px);
}
.statbar li{padding:1.15rem 1rem 1.15rem 0; border-right:1px solid rgba(232,205,150,.14)}
.statbar li:last-child{border-right:0}
.statbar b{
  display:block; font-family:var(--f-display); font-optical-sizing:auto;
  font-size:clamp(1.35rem,2.5vw,2rem);
  color:#F7F2E7; font-weight:500; line-height:1.05; font-variant-numeric:tabular-nums;
}
.statbar span{
  display:block; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(235,230,217,.6); margin-top:.45rem;
}
@media (max-width:760px){
  .statbar{grid-template-columns:repeat(2,1fr)}
  .statbar li{border-bottom:1px solid rgba(232,205,150,.14)}
  .statbar li:nth-child(2n){border-right:0}
  .statbar li:last-child{grid-column:span 2; border-bottom:0}
}

/* ============ SEKTIONEN ============ */
.sec{padding:clamp(3.8rem,8vw,7rem) 0}
.sec--alt{background:var(--bg-band)}
.sec__head{margin-bottom:clamp(2rem,4vw,3rem)}
.sec__head h2{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:520;
  font-size:clamp(2.05rem,4.4vw,3.4rem);
  line-height:1.04; letter-spacing:-.015em; margin:.55rem 0 .9rem; max-width:21ch;
}
.sec__head p:not(.eyebrow){color:var(--text-dim); max-width:62ch; font-size:1.02rem}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ============ AUF EINEN BLICK ============ */
.blick__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.tile{
  display:block; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.35rem 1.25rem; box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  position:relative; overflow:hidden;
}
.tile::after{
  content:"→"; position:absolute; top:1.15rem; right:1.2rem;
  font-family:var(--f-mono); color:var(--text-faint);
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s;
}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent-soft)}
.tile:hover::after{opacity:1; transform:none}
.tile__kpi{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:540;
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.tile__kpi small{font-size:.55em; color:var(--text-faint); font-weight:450}
.tile--good .tile__kpi{color:var(--salvia)}
.tile--warn .tile__kpi{color:var(--warn)}
.tile__label{
  margin-top:.5rem; font:600 .88rem/1.35 var(--f-body); color:var(--text);
}
.tile__sub{
  margin-top:.15rem; font:400 .76rem/1.4 var(--f-mono);
  letter-spacing:.02em; color:var(--text-faint);
}
.verdict{
  margin-top:1rem; border-radius:var(--r);
  border:1px solid var(--line); border-left:3px solid var(--accent-bright);
  background:
    linear-gradient(135deg, var(--accent-wash), transparent 55%),
    var(--surface);
  box-shadow:var(--shadow-s);
  padding:clamp(1.3rem,3vw,1.8rem) clamp(1.3rem,3vw,2rem);
  display:flex; flex-direction:column; gap:1.1rem;
}
.verdict p{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:450;
  font-size:clamp(1.12rem,2vw,1.42rem); line-height:1.45; max-width:52ch;
}
.verdict p strong{font-weight:600}
.verdict__row{display:flex; gap:.8rem; flex-wrap:wrap}
@media (max-width:920px){.blick__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.blick__grid{grid-template-columns:1fr}}

/* ============ KARTEN ============ */
.grid{display:grid; gap:1.15rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:920px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.g3,.g2{grid-template-columns:1fr}}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.55rem 1.55rem 1.65rem; box-shadow:var(--shadow-s); display:flex; flex-direction:column; gap:.7rem;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent-soft)}
.card h3{font-family:var(--f-display); font-optical-sizing:auto; font-weight:550; font-size:1.48rem; line-height:1.15}
.card p:not(.card__tag){color:var(--text-dim); font-size:.95rem}
.card strong{color:var(--text); font-weight:600}
.card__tag{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}

/* Quartier-Karten mit Bild */
.q{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-s);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.q:hover{transform:translateY(-4px); box-shadow:var(--shadow-l); border-color:var(--accent-soft)}
.q figure{margin:0; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.q figure img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.q:hover figure img{transform:scale(1.05)}
.q__mult{
  position:absolute; left:.8rem; top:.8rem; z-index:2;
  background:rgba(5,20,25,.72); color:#E8CD96;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(232,205,150,.25);
  font:500 .66rem/1 var(--f-mono); letter-spacing:.08em;
  padding:.44rem .8rem; border-radius:999px;
}
.q__body{padding:1.2rem 1.3rem 1.45rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.q__body h3{font-family:var(--f-display); font-optical-sizing:auto; font-weight:550; font-size:1.4rem; line-height:1.12}
.q__kicker{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint)}
.q__body p:not(.q__kicker):not(.q__for){font-size:.93rem; color:var(--text-dim)}
.q__for{
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--line-soft);
  font-size:.86rem; color:var(--text);
}
.q__for b{color:var(--accent); font-weight:500; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; display:block; margin-bottom:.15rem}

/* ============ BILDBÄNDER ============ */
.band{position:relative; height:clamp(300px,46vw,540px); overflow:hidden; background:var(--bg-band)}
.band img{width:100%; height:100%; object-fit:cover}
.band figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.6rem 0 1.6rem;
  background:linear-gradient(180deg,rgba(4,18,22,0),rgba(4,18,22,.85));
}
.band figcaption .wrap{color:#ECE7DA; font-size:.97rem; max-width:min(1160px,calc(100% - 2.5rem))}
.band figcaption b{display:block; font-family:var(--f-display); font-optical-sizing:auto; font-size:1.55rem; color:#F7F2E7; font-weight:520; margin-bottom:.2rem}
.band figcaption span{color:rgba(236,231,218,.82)}

/* ============ FLIESSTEXT / SPLIT ============ */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.body-copy p + p{margin-top:1rem}
.body-copy{color:var(--text-dim); font-size:1.02rem}
.body-copy strong{color:var(--text); font-weight:600}

.facts{border-top:1px solid var(--line)}
.facts li{display:grid; grid-template-columns:minmax(120px,.5fr) 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.95rem}
.facts dt, .facts .k{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); padding-top:.3rem}
.facts .v{color:var(--text); font-weight:500}
.facts .v small{display:block; color:var(--text-dim); font-size:.85rem; font-weight:400; margin-top:.25rem}
@media (max-width:560px){.facts li{grid-template-columns:1fr; gap:.2rem}}

/* ============ AKKORDEONS (Vertiefung) ============ */
.deep{
  border:1px solid var(--line-soft); border-left:2px solid var(--accent-soft);
  border-radius:var(--r-s); background:var(--surface-2); margin-top:1.1rem; overflow:hidden;
}
.deep summary{
  cursor:pointer; list-style:none; user-select:none;
  padding:.9rem 1.15rem;
  display:flex; align-items:center; gap:.65rem;
  font:500 .74rem/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  transition:background .2s;
}
.deep summary::-webkit-details-marker{display:none}
.deep summary:hover{background:var(--accent-wash)}
.deep summary::before{
  content:"+"; flex:none; width:1.35rem; height:1.35rem; display:grid; place-items:center;
  border:1px solid currentColor; border-radius:50%;
  font-size:.85rem; line-height:1;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.deep[open] summary::before{transform:rotate(45deg)}
.deep__in{padding:.4rem 1.15rem 1.2rem; color:var(--text-dim); font-size:.99rem}
.deep__in p + p{margin-top:.9rem}
.deep__in strong{color:var(--text); font-weight:600}

/* ============ STEUER-INSTRUMENT ============ */
.calc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.calc__top{padding:1.6rem clamp(1.1rem,3vw,2rem); border-bottom:1px solid var(--line); display:grid; gap:1rem}
.calc__label{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.calc__label span{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint)}
.calc__val{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:540;
  font-size:clamp(1.8rem,4vw,2.5rem); font-variant-numeric:tabular-nums; color:var(--text);
}
.calc__val i{font-style:normal; font-size:.55em; color:var(--text-faint); margin-right:.3em}
.presets{display:flex; gap:.45rem; flex-wrap:wrap}
.presets button{
  appearance:none; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim);
  font:500 .72rem/1 var(--f-mono); letter-spacing:.06em;
  padding:.45rem .8rem; border-radius:999px;
  transition:border-color .2s, color .2s, background .2s;
}
.presets button:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-wash)}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-soft) var(--fill,37%), var(--line) var(--fill,37%));
  outline:none; margin:.6rem 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent-bright); border:3px solid var(--surface); cursor:grab;
  box-shadow:0 0 0 1px var(--accent), 0 4px 12px -2px rgba(0,0,0,.4);
  transition:transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--accent-bright);
  border:3px solid var(--surface); cursor:grab; box-shadow:0 0 0 1px var(--accent);
}
input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
.calc__hint{font-size:.85rem; color:var(--text-dim)}
.calc__rows{padding:.4rem 0}
.crow{
  display:grid; grid-template-columns:minmax(96px,1.15fr) 46px minmax(60px,2.4fr) auto auto;
  gap:.9rem; align-items:center; padding:.66rem clamp(1.1rem,3vw,2rem);
  border-bottom:1px solid var(--line-soft); font-size:.9rem;
  transition:background .2s;
}
.crow:hover{background:var(--accent-wash)}
.crow:last-child{border-bottom:0}
.crow--me{background:var(--accent-wash)}
.crow__n{font-weight:500}
.crow--me .crow__n::after{content:" ← Referenz"; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-left:.4rem}
.crow__m{font-family:var(--f-mono); font-size:.78rem; color:var(--text-faint); text-align:right; font-variant-numeric:tabular-nums}
.crow__bar{height:7px; border-radius:4px; background:var(--line-soft); position:relative; overflow:hidden}
.crow__bar i{position:absolute; inset:0 auto 0 0; background:var(--accent-soft); border-radius:4px; display:block; transition:width .25s cubic-bezier(.2,.7,.2,1)}
.crow--me .crow__bar i{background:var(--accent-bright)}
.crow__t{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:.86rem; text-align:right; min-width:5.4em}
.crow__d{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:.8rem; text-align:right; min-width:5.6em; color:var(--salvia)}
.crow__d.up{color:var(--warn)}
@media (max-width:700px){
  .crow{grid-template-columns:1fr auto auto; gap:.35rem .7rem; align-items:center}
  .crow__n{grid-area:1/1/2/2}
  .crow__m{grid-area:1/2/2/3}
  .crow__t{grid-area:1/3/2/4}
  .crow__bar{grid-area:2/1/3/3}
  .crow__d{grid-area:2/3/3/4}
  .crow--me .crow__n::after{content:""}
}
.calc__foot{padding:1.05rem clamp(1.1rem,3vw,2rem) 1.35rem; border-top:1px solid var(--line); font-size:.83rem; color:var(--text-dim)}

/* ============ WARNBLOCK ============ */
.flag{
  border-left:3px solid var(--warn); background:var(--surface); padding:1.5rem 1.6rem;
  display:flex; flex-direction:column; gap:.65rem; border-radius:var(--r-s);
  border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-s);
}
.flag h3{font-family:var(--f-display); font-optical-sizing:auto; font-size:1.35rem; font-weight:550}
.flag p:not(.eyebrow){font-size:.95rem; color:var(--text-dim)}
.flag strong{color:var(--text); font-weight:600}
.flag .eyebrow{color:var(--warn)}

/* ============ VIDEOS ============ */
.vids{display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem}
@media (max-width:920px){.vids{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.vids{grid-template-columns:1fr}}
.vid{
  display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-s); position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.vid:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent-soft)}
.vid figure{margin:0; position:relative; aspect-ratio:16/9; overflow:hidden; background:#08222a}
.vid img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s}
.vid:hover img, .vid:focus-visible img{transform:scale(1.05); filter:brightness(1.07)}
.vid figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,18,22,.05),rgba(4,18,22,.55));
}
.vid__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:56px; height:56px; border:1px solid rgba(247,242,231,.75); border-radius:50%;
  display:grid; place-items:center; background:rgba(4,18,22,.45); backdrop-filter:blur(4px);
  transition:background .3s, scale .3s;
}
.vid:hover .vid__play{background:rgba(4,18,22,.72); scale:1.08}
.vid__play::before{content:""; border-left:12px solid #F7F2E7; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px}
.vid__body{padding:1rem 1.15rem 1.2rem}
.vid__body b{display:block; font-weight:600; font-size:.94rem; line-height:1.35; margin-bottom:.3rem}
.vid__body span{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint)}
.vid:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ============ WEG / SCHRITTE ============ */
.steps{counter-reset:s; display:grid; gap:0; position:relative; padding-left:0; border-top:0}
.steps::before{
  content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg, var(--accent-soft), var(--line));
  opacity:.55;
}
.steps li{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:1.25rem;
  padding:1.05rem 0; position:relative;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; z-index:1;
  background:var(--surface); border:1px solid var(--line);
  font:500 .72rem/1 var(--f-mono); color:var(--accent); letter-spacing:.04em;
  box-shadow:var(--shadow-s);
}
.steps h4{font-family:var(--f-body); font-weight:600; font-size:1.03rem; margin:.55rem 0 .25rem}
.steps p{font-size:.93rem; color:var(--text-dim)}
.steps em{font-style:normal; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); display:block; margin-top:.4rem}

/* ============ GEGENRECHNUNG ============ */
.contra li{
  display:grid; grid-template-columns:auto 1fr; gap:1.05rem; align-items:start;
  padding:1.15rem 0; border-bottom:1px solid var(--line-soft); font-size:.97rem; color:var(--text-dim);
}
.contra li::before{
  content:"✕"; flex:none; width:1.6rem; height:1.6rem; margin-top:.1rem;
  display:grid; place-items:center;
  color:var(--warn); border:1px solid var(--warn); border-radius:50%;
  font:500 .72rem/1 var(--f-mono); opacity:.85;
}
.contra b{color:var(--text); font-weight:600}

/* ============ FOOTER ============ */
.foot{background:var(--bg-band); border-top:1px solid var(--line); padding:3.2rem 0 3.6rem; font-size:.83rem; color:var(--text-faint)}
.foot h4{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.85rem; font-weight:500}
.foot a{color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.foot a:hover{color:var(--accent)}
.foot ul li{padding:.24rem 0; line-height:1.5}
.credits{columns:2; column-gap:2rem}
@media (max-width:640px){.credits{columns:1}}

/* ============ BACK TO TOP ============ */
.totop{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:55;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--accent); border:1px solid var(--line);
  box-shadow:var(--shadow); text-decoration:none;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s, transform .3s, border-color .2s;
}
.totop.show{opacity:1; pointer-events:auto; transform:none}
.totop:hover{border-color:var(--accent)}
.totop svg{width:17px; height:17px}

/* ============ REVEAL ============ */
[data-rv="on"] .rv{opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
[data-rv="on"] .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv="on"] .rv{opacity:1; transform:none; transition:none}
  .hero__img{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ============ KOMPAKT-MODUS ============
   Scan-Ansicht: nur Überschriften, Zahlen, Fakten-Spalten und interaktive Tools.
   Lange Texte (Fliesstext + Vertiefungs-Akkordeons) werden ausgeblendet.        */
[data-mode="kompakt"] .deep,
[data-mode="kompakt"] .body-copy,
[data-mode="kompakt"] .sec__head p:not(.eyebrow),
[data-mode="kompakt"] .card p:not(.card__tag),
[data-mode="kompakt"] .q__body p:not(.q__kicker),
[data-mode="kompakt"] .facts .v small,
[data-mode="kompakt"] .steps p,
[data-mode="kompakt"] .band figcaption span{display:none}
[data-mode="kompakt"] .split{grid-template-columns:1fr}

/* ══════════════════════════════════════════════════════════════
   STÄDTE-SYSTEM — Switcher, Eignung, Vergleich
   ══════════════════════════════════════════════════════════════ */

/* ---- Städte-Switcher in der Nav ---- */
.cities{
  display:flex; align-items:center; gap:.15rem;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:.2rem; flex-shrink:0;
}
.cities a{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.42em .9em; border-radius:999px; text-decoration:none;
  font:500 .82rem/1 var(--f-body); color:var(--text-dim);
  white-space:nowrap; transition:background .22s, color .22s;
}
.cities a:hover{color:var(--text)}
.cities a[aria-current="page"]{
  background:var(--accent); color:#1B1408; font-weight:600;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .cities a[aria-current="page"],
:root:not([data-theme]) .cities a[aria-current="page"]{color:#12200F}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .cities a[aria-current="page"]{color:#1B1408}
}
.cities .dot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5}
.cities a[aria-current="page"] .dot{opacity:1}
.cities .soon{opacity:.45; cursor:not-allowed; font-style:italic}

@media (max-width:1080px){ .nav__links{display:none} }
@media (max-width:560px){
  .cities a{padding:.42em .7em; font-size:.76rem}
  .cities .dot{display:none}
}

/* ---- „Passt zu dir, wenn" — Eignungsblock ---- */
.fit{
  position:relative; margin-top:-3.2rem; z-index:3;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--shadow-l);
  padding:clamp(1.4rem,3.4vw,2.4rem); overflow:hidden;
}
.fit::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent-bright), var(--salvia));
}
.fit__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem; margin-bottom:1.3rem}
.fit__head h2{font-family:var(--f-display); font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.15}
.fit__badge{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.36em .8em; border-radius:999px; border:1px solid var(--accent-soft);
  color:var(--accent); background:var(--accent-wash); white-space:nowrap;
}
.fit__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.1rem,3vw,2.4rem)}
@media (max-width:760px){ .fit__cols{grid-template-columns:1fr; gap:1.4rem} }
.fit__col h3{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:.85rem; display:flex; align-items:center; gap:.5em;
}
.fit__col--yes h3{color:var(--salvia)}
.fit__col--no h3{color:var(--warn)}
.fit__col li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  padding:.5rem 0; font-size:.94rem; line-height:1.5; color:var(--text-dim);
  border-bottom:1px solid var(--line-soft);
}
.fit__col li:last-child{border-bottom:0}
.fit__col li b{color:var(--text); font-weight:600}
.fit__col svg{width:17px; height:17px; margin-top:.24em; flex-shrink:0}
.fit__col--yes svg{color:var(--salvia)}
.fit__col--no svg{color:var(--warn)}
.fit__foot{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem;
  font-size:.9rem; color:var(--text-dim);
}
.fit__foot strong{color:var(--text)}

/* ---- Direktvergleich Lugano ↔ Locarno ---- */
.vs{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
}
.vs__head{
  display:grid; grid-template-columns:minmax(120px,1.5fr) 1fr 1fr;
  gap:.6rem; padding:1rem clamp(.9rem,2.4vw,1.5rem);
  border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-faint);
}
.vs__head span:nth-child(n+2){text-align:right}
.vs__head .here{color:var(--accent); font-weight:600}
.vs__row{
  display:grid; grid-template-columns:minmax(120px,1.5fr) 1fr 1fr;
  gap:.6rem; padding:.78rem clamp(.9rem,2.4vw,1.5rem);
  border-bottom:1px solid var(--line-soft); font-size:.92rem; align-items:center;
}
.vs__row:last-child{border-bottom:0}
.vs__row:hover{background:var(--accent-wash)}
.vs__k{color:var(--text-dim)}
.vs__k small{display:block; font-size:.76rem; color:var(--text-faint); line-height:1.35}
.vs__v{
  text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:.92rem; font-weight:500;
}
.vs__v.win{color:var(--salvia); font-weight:600}
.vs__v.lose{color:var(--warn)}
.vs__v em{font-style:normal; display:block; font-size:.7rem; color:var(--text-faint); font-family:var(--f-body)}
.vs__foot{padding:.95rem clamp(.9rem,2.4vw,1.5rem) 1.15rem; font-size:.83rem; color:var(--text-dim); border-top:1px solid var(--line)}
@media (max-width:560px){
  .vs__head, .vs__row{grid-template-columns:1fr auto auto; gap:.5rem .8rem}
  .vs__v{font-size:.82rem}
}

/* ---- Seiten-Übergang (View Transitions) ---- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto }
  ::view-transition-old(root){ animation:vtOut .22s ease both }
  ::view-transition-new(root){ animation:vtIn .3s ease both }
}
@keyframes vtOut{ to{opacity:0} }
@keyframes vtIn{ from{opacity:0; transform:translateY(8px)} }

/* ---- Skip-Link ---- */
.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--accent); color:#1B1408; padding:.7em 1.2em;
  border-radius:999px; font:600 .9rem var(--f-body); text-decoration:none;
  transition:top .2s;
}
.skip:focus{top:.75rem}

/* ---- Bilder ohne Layout-Sprung ---- */
.q figure img, .vid img, .band img{background:var(--surface-2)}

/* ══════════════════════════════════════════════════════════════
   MOBILE-KORREKTUREN — Nav-Bedienung und Vergleichstabelle
   ══════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* Markenschriftzug weicht, damit Städte-Switcher, Modus und Theme Platz haben */
  .nav__brand-text{display:none}
  .nav__in{gap:.5rem}
  .nav__ctrl{gap:.4rem}

  /* Kurzlabels für den Lesemodus statt „Ausführlich/Kompakt" */
  .mode button{font-size:0; padding:.42em .62em}
  .mode button::after{content:attr(data-short); font-size:.75rem; letter-spacing:.01em}

  /* Vergleich: Werte brauchen echte Breite, sonst brechen die Zahlen um */
  .vs__head, .vs__row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
  .vs__v{font-size:.8rem}
  .vs__k{font-size:.86rem}
}
@media (max-width:400px){
  .mode{display:none}          /* ganz schmal: Lesemodus weicht dem Städte-Switcher */
}

/* ══════════════════════════════════════════════════════════════
   VERGLEICH — durchgehende Spalten-Hervorhebung der offenen Stadt
   ══════════════════════════════════════════════════════════════ */
.vs__head, .vs__row{gap:0}
.vs__head > *, .vs__row > *{padding-inline:.55rem}
.vs__head > *:first-child, .vs__row > *:first-child{padding-inline-start:0}
.vs__head > *:last-child, .vs__row > *:last-child{padding-inline-end:0}

/* Spalte 2 = Lugano, Spalte 3 = Locarno */
.vs--lugano .vs__head > :nth-child(2),
.vs--lugano .vs__row  > :nth-child(2),
.vs--locarno .vs__head > :nth-child(3),
.vs--locarno .vs__row  > :nth-child(3){
  background:var(--accent-wash);
  box-shadow:inset 1px 0 0 var(--line-soft), inset -1px 0 0 var(--line-soft);
}
.vs__head > *{padding-block:.15rem}
.vs__row  > *{padding-block:.55rem; margin-block:-.55rem}
.vs__head .here{
  color:var(--accent); font-weight:700;
  border-radius:6px 6px 0 0;
}
/* Die eigene Spalte trägt die kräftigere Schrift */
.vs--lugano  .vs__row > :nth-child(2),
.vs--locarno .vs__row > :nth-child(3){font-weight:600}
.vs--lugano  .vs__row > :nth-child(3),
.vs--locarno .vs__row > :nth-child(2){opacity:.82}

/* ══════════════════════════════════════════════════════════════
   KAPITELLEISTE — scrollbar statt abgeschnitten
   ══════════════════════════════════════════════════════════════ */
.nav__links{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  scroll-behavior:smooth; min-width:0; flex:1 1 auto;
  /* Verlauf am Rand zeigt, dass es weitergeht */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
}
.nav__links::-webkit-scrollbar{display:none}
.nav__links a{flex:0 0 auto; scroll-margin-inline:1.2rem}