/* Aussichtstürme in DE & AT — Konzept: Turmachse. Eine Haarlinie mit Höhenskala läuft links durch jede Seite,
   rechts steht der Text dicht gesetzt. Farben = Luftperspektive: je weiter weg, desto heller der Bergkamm. */
@font-face{font-family:"Cabinet";src:url(/fonts/cabinet-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Cabinet";src:url(/fonts/cabinet-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url(/fonts/switzer-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url(/fonts/switzer-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Switzer";src:url(/fonts/switzer-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Martian";src:url(/fonts/martian-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --himmel:#E9EEF0;      /* Grund: dunstiger Himmel */
  --kamm4:#D3DDE1;       /* fernster Kamm */
  --kamm3:#A9BAC1;
  --kamm2:#6E8692;
  --kamm1:#3F5561;       /* naher Kamm */
  --schiefer:#1D2A31;    /* Text */
  --abend:#F4A66A;       /* Abendlicht, nur als Fläche */
  --abend-tinte:#8A3B0E; /* Abendlicht als Text auf hell */
  --linie:#B3C1C7;
  --text-2:#40525B;
  --fl:#F6F8F9;          /* helle Fläche */
  --d:"Cabinet","Arial Narrow",system-ui,sans-serif;
  --t:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"Martian",ui-monospace,"SF Mono",Menlo,monospace;
  --achse:clamp(56px,9vw,132px);
  --rand:clamp(16px,4vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --himmel:#0E161B;--kamm4:#17232A;--kamm3:#22333C;--kamm2:#3A4F5A;--kamm1:#7C939E;--schiefer:#E2E9EC;
  --abend:#F4A66A;--abend-tinte:#F4B07A;--linie:#2C3D46;--text-2:#A9B9C0;--fl:#131E24;color-scheme:dark}}
:root[data-theme="dark"]{
  --himmel:#0E161B;--kamm4:#17232A;--kamm3:#22333C;--kamm2:#3A4F5A;--kamm1:#7C939E;--schiefer:#E2E9EC;
  --abend:#F4A66A;--abend-tinte:#F4B07A;--linie:#2C3D46;--text-2:#A9B9C0;--fl:#131E24;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--himmel);color:var(--schiefer);font:400 1.0625rem/1.6 var(--t);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--abend-tinte)}
:focus-visible{outline:2px solid var(--abend-tinte);outline-offset:3px}
.mo{font-family:var(--m);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--d);font-weight:800;line-height:.95;letter-spacing:-.03em;text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,6vw,4.2rem)}
h3{font-size:clamp(1.35rem,2.6vw,1.8rem);letter-spacing:-.02em;line-height:1.05}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Turmachse (links, fixiert) ---------- */
.lot{position:fixed;left:0;top:0;bottom:0;width:var(--achse);pointer-events:none;z-index:1}
.lot::before{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--schiefer);opacity:.55}
.lot ol{list-style:none;margin:0;padding:0;position:absolute;inset:72px 0 24px 0;display:flex;flex-direction:column;justify-content:space-between}
.lot li{display:flex;justify-content:flex-end;align-items:center;gap:6px;color:var(--text-2);font-family:var(--m);font-size:.62rem;line-height:1}
.lot li::after{content:"";width:8px;height:1px;background:currentColor}
.lot li:nth-child(odd)::after{width:16px}
.lot .zeiger{position:absolute;right:-1px;top:72px;transform:translateY(-50%);display:flex;align-items:center;gap:6px;
  font-family:var(--m);font-size:.66rem;color:var(--schiefer);transition:top .12s linear}
.lot .zeiger b{background:var(--abend);color:#1D2A31;padding:4px 6px;font-weight:400;white-space:nowrap}
.lot .zeiger::after{content:"";width:9px;height:9px;background:var(--abend);transform:translateX(5px) rotate(45deg)}
@media (max-width:719px){.lot{display:none}}

/* ---------- Kopf ---------- */
.kopfzeile{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px var(--rand) 10px calc(var(--achse) + var(--rand));background:color-mix(in srgb,var(--himmel) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--d);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;line-height:1.05;min-height:44px}
.marke svg{flex:none}
.marke small{display:block;font-family:var(--m);font-weight:400;font-size:.6rem;letter-spacing:.06em;color:var(--text-2)}
.hoehe-mobil{margin-left:auto;color:var(--text-2)}
.hoehe-mobil b{color:var(--schiefer);font-weight:400}
.etagen-knopf{min-height:44px;padding:0 16px;border:1px solid var(--schiefer);background:transparent;color:var(--schiefer);
  font:400 .74rem var(--m);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:10px}
.etagen-knopf i{display:grid;gap:3px}.etagen-knopf i::before,.etagen-knopf i::after{content:"";display:block;width:14px;height:1.5px;background:currentColor}
.etagen-knopf:hover{background:var(--schiefer);color:var(--himmel)}
@media (max-width:719px){.kopfzeile{padding-left:var(--rand)}.marke small{display:none}}
@media (min-width:720px){.hoehe-mobil{display:none}.etagen-knopf{margin-left:auto}}
.fortschritt{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--abend)}

/* ---------- Etagen-Menü: Schichten wie Kämme im Dunst ---------- */
.etagen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--himmel);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overflow-y:auto}
.etagen[hidden]{display:none}
.etagen-kopf{display:flex;justify-content:space-between;align-items:center;padding:10px var(--rand);gap:12px}
.etagen nav{flex:1;display:flex;flex-direction:column}
.etagen ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1}
.etagen li{flex:1;display:flex}
.etagen a{flex:1;display:grid;grid-template-columns:4.5rem 1fr auto;align-items:center;gap:12px;min-height:64px;
  padding:10px var(--rand);text-decoration:none;font-family:var(--d);font-weight:800;font-size:clamp(1.4rem,4.4vw,2.6rem);letter-spacing:-.02em;line-height:1}
.etagen a .mo{font-weight:400;letter-spacing:.04em}
.etagen a:hover{color:inherit;padding-left:calc(var(--rand) + 12px)}
.etagen a{transition:padding .2s}
.etagen li:nth-child(1) a{background:var(--fl)}
.etagen li:nth-child(2) a{background:var(--kamm4)}
.etagen li:nth-child(3) a{background:var(--kamm3)}
.etagen li:nth-child(4) a{background:var(--kamm2);color:#F2F5F6}
.etagen li:nth-child(5) a{background:var(--kamm1);color:#F2F5F6}
.etagen li:nth-child(6) a{background:#1D2A31;color:#F2F5F6}
.etagen a[aria-current="page"] .mo:first-child::after{content:" ●";color:var(--abend)}

/* ---------- Grundraster: Achse + Inhalt ---------- */
main,.fuss{padding-left:calc(var(--achse) + var(--rand));padding-right:var(--rand)}
@media (max-width:719px){main,.fuss{padding-left:var(--rand)}}
.band{padding-block:clamp(56px,9vw,120px);border-top:1px solid var(--linie)}
.band:first-child{border-top:0}
.marg{display:grid;gap:18px 40px}
@media (min-width:960px){.marg{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}}
.marg>.mo{color:var(--text-2);padding-top:.6em}
.lauf{max-width:66ch;display:grid;gap:1.05em}
.lauf h2{margin-top:.6em;font-size:clamp(1.7rem,4vw,2.6rem)}
.lauf h3{margin-top:.5em}
.lauf ul,.lauf ol{margin:0;padding-left:1.2em;display:grid;gap:.4em}
.lead{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;max-width:46ch;color:var(--schiefer)}
.hinweis{border-left:3px solid var(--abend);padding:.2em 0 .2em 1em;color:var(--text-2);font-size:.95rem}

/* ---------- Startseite: erster Schirm ---------- */
.ankunft{display:grid;gap:28px;padding-block:28px 56px;position:relative}
@media (min-width:960px){.ankunft{grid-template-columns:minmax(0,1fr) minmax(260px,32%);gap:48px;padding-block:40px 80px;align-items:end}}
.ankunft-text{container-type:inline-size;min-width:0;display:grid;gap:22px}
.ankunft h1{font-size:clamp(3rem,17.2cqi,13rem);line-height:.84;letter-spacing:-.045em}
.ankunft h1 .z{display:block}
.ankunft h1 .z1::after{content:"-"}
.ankunft h1 .klein{display:block;font-family:var(--d);font-weight:500;font-size:.24em;letter-spacing:-.01em;line-height:1.1;margin-top:.35em}
.ankunft-skala{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:stretch;min-height:320px}
.fenster{margin:0;position:relative;overflow:hidden;background:var(--kamm3);aspect-ratio:9/16;max-height:78vh;width:100%}
@media (max-width:959px){.fenster{aspect-ratio:4/5;max-height:none}}
.fenster img{width:100%;height:100%;object-fit:cover}
.fenster figcaption{position:absolute;left:0;bottom:0;right:0;padding:10px 12px;background:linear-gradient(transparent,rgba(13,20,24,.72));color:#EEF3F5}
.messlatte{position:relative;border-left:1px solid var(--schiefer);margin-top:6px;display:flex;flex-direction:column;justify-content:space-between}
.messlatte span{font-family:var(--m);font-size:.62rem;color:var(--text-2);padding-left:8px;position:relative;line-height:1}
.messlatte span::before{content:"";position:absolute;left:-1px;top:50%;width:6px;height:1px;background:var(--schiefer)}
.hoehenmarken{list-style:none;margin:0;padding:0;display:grid;gap:10px;border-top:1px solid var(--schiefer);padding-top:14px}
.hoehenmarken li{display:grid;grid-template-columns:7.2rem 1fr;gap:12px;align-items:baseline}
.hoehenmarken b{font-family:var(--d);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hoehenmarken a{text-decoration:none}
.hoehenmarken a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ---------- Turm-Skyline ---------- */
.skyline{display:grid;gap:22px}
.sky-steuer{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.wahl{display:inline-flex;border:1px solid var(--schiefer)}
.wahl button{min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--schiefer);font:400 .72rem var(--m);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.wahl button+button{border-left:1px solid var(--schiefer)}
.wahl button[aria-pressed="true"]{background:var(--schiefer);color:var(--himmel)}
.sky-feld{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.sky-reihe{position:relative;display:flex;align-items:flex-end;gap:6px;height:340px;min-width:100%;width:max-content;padding:0 4px 0 46px;
  border-bottom:2px solid var(--schiefer);background:linear-gradient(to top,var(--kamm4),transparent 70%)}
.sky-gitter{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.sky-gitter span{position:absolute;left:0;right:0;border-top:1px dashed var(--linie);font:400 .58rem var(--m);color:var(--text-2);padding-left:2px}
.sky-gitter span em{font-style:normal;position:relative;top:-1.2em}
.sky-turm{position:relative;z-index:1;width:46px;flex:none;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  border:0;background:transparent;padding:0;cursor:pointer;color:var(--schiefer)}
.sky-turm .bau{width:16px;background:var(--schiefer);transition:height .45s cubic-bezier(.3,.7,.2,1),background .2s}
.sky-turm .grund{width:100%;background:var(--kamm3);clip-path:polygon(0 100%,50% 0,100% 100%);transition:height .45s cubic-bezier(.3,.7,.2,1)}
.sky-turm .wert{font:400 .58rem var(--m);margin-bottom:4px;white-space:nowrap}
.sky-turm[aria-pressed="true"] .bau{background:var(--abend)}
.sky-turm[aria-pressed="true"] .wert{background:var(--abend);color:#1D2A31;padding:2px 3px}
.sky-turm:hover .bau{background:var(--kamm1)}
.sky-turm[hidden]{display:none}
.sky-namen{display:flex;gap:6px;padding:8px 4px 0 46px;width:max-content;min-width:100%}
.sky-namen span{width:46px;flex:none;font:400 .56rem/1.15 var(--m);writing-mode:vertical-rl;transform:rotate(180deg);height:118px;text-align:left;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.sky-namen span[data-an="1"]{color:var(--schiefer)}
.sky-namen span[hidden]{display:none}
.datenblatt{display:grid;gap:18px;padding:22px;background:var(--fl);border:1px solid var(--linie)}
@media (min-width:860px){.datenblatt{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;padding:30px}}
.datenblatt h3{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.datenblatt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-content:start}
.datenblatt dt{font:400 .66rem/1.7 var(--m);text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.datenblatt dd{margin:0;font-variant-numeric:tabular-nums}
.horizont{display:grid;gap:8px;align-content:start}
.horizont b{font-family:var(--d);font-weight:800;font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.horizont svg{width:100%;max-width:340px;height:auto}
.horizont svg .k{fill:none;stroke:var(--kamm2);stroke-width:1}
.horizont svg .p{fill:var(--abend)}
.horizont svg text{fill:var(--text-2);font:400 9px var(--m)}

/* ---------- Etagen-Liste (Rubriken) ---------- */
.stock{list-style:none;margin:0;padding:0;border-top:2px solid var(--schiefer)}
.stock li{border-bottom:1px solid var(--linie)}
.stock a{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0;text-decoration:none}
@media (min-width:760px){.stock a{grid-template-columns:5rem minmax(0,1fr) 200px;align-items:center;gap:28px}}
.stock .nr{color:var(--text-2)}
.stock h3{font-size:clamp(1.8rem,4.6vw,3.4rem);transition:transform .25s}
.stock a:hover h3{transform:translateX(10px)}
.stock a:hover{color:inherit}
.stock p{color:var(--text-2);max-width:56ch;margin-top:8px}
.stock .schlitz{height:110px;overflow:hidden;background:var(--kamm3)}
@media (max-width:759px){.stock .schlitz{height:140px}}
.stock .schlitz img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}

/* ---------- Seitenkopf Unterseiten ---------- */
.seitenkopf{display:grid;gap:20px;padding-block:28px 40px;container-type:inline-size}
.krumen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--text-2)}
.krumen li+li::before{content:"↑ ";color:var(--abend-tinte)}
.krumen a{text-decoration:none}.krumen a:hover{text-decoration:underline}
.seitenkopf h1{font-size:clamp(2.6rem,11cqi,8.5rem);line-height:.88;letter-spacing:-.04em;max-width:14ch}
.seitenkopf .lead{max-width:52ch}
.kopfbild{margin:0;display:grid;gap:8px}
.kopfbild img{width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--kamm3)}
@media (max-width:719px){.kopfbild img{aspect-ratio:4/3}}
.kopfbild figcaption{color:var(--text-2)}

/* ---------- Steckbrief, Vergleich, Liste ---------- */
.steckbrief{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:2px solid var(--schiefer)}
.steckbrief div{padding:14px 14px 14px 0;border-bottom:1px solid var(--linie);display:grid;gap:4px}
.steckbrief dt{font:400 .64rem var(--m);text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.steckbrief dd{margin:0;font-family:var(--d);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.steckbrief dd small{font-family:var(--t);font-weight:400;font-size:.85rem;letter-spacing:0;display:block;color:var(--text-2)}
.objekte{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--schiefer)}
.objekte li{display:grid;gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--linie)}
@media (min-width:860px){.objekte li{grid-template-columns:7rem minmax(0,1fr) 13rem}}
.objekte .m{font-family:var(--d);font-weight:800;font-size:2rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.objekte .m small{display:block;font:400 .6rem var(--m);letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);margin-top:4px}
.objekte h3{font-size:1.45rem}
.objekte p{color:var(--text-2);margin-top:6px;max-width:60ch}
.objekte .fakt{font:400 .68rem/1.7 var(--m);color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.land{display:inline-block;font:400 .62rem var(--m);border:1px solid currentColor;padding:2px 5px;margin-right:6px;vertical-align:2px}
.formel{font-family:var(--m);font-size:clamp(1.1rem,3vw,1.6rem);padding:18px 0;border-block:1px solid var(--linie)}
.tafel{overflow-x:auto;border-top:2px solid var(--schiefer)}
.tafel table{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
.tafel th,.tafel td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.tafel th{font:400 .66rem var(--m);text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.tafel th:first-child,.tafel td:first-child{position:sticky;left:0;background:var(--himmel)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen details:first-child{border-top:2px solid var(--schiefer)}
.fragen summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font-family:var(--d);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.55rem);letter-spacing:-.015em;line-height:1.15;min-height:44px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--m);font-size:1.3rem;font-weight:400}
.fragen details[open] summary::after{content:"–"}
.fragen .antwort{padding:0 0 20px;max-width:66ch;display:grid;gap:.8em;color:var(--text-2)}
.quelle{font:400 .66rem/1.6 var(--m);color:var(--text-2);letter-spacing:.03em}
.quelle a{word-break:break-word}
.knopf{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;background:var(--schiefer);color:var(--himmel);text-decoration:none;
  font:400 .74rem var(--m);letter-spacing:.05em;text-transform:uppercase}
.knopf:hover{background:var(--abend);color:#1D2A31}
.adresse{font-style:normal;font-size:1.1rem;line-height:1.55}

/* ---------- Fuß ---------- */
.fuss{background:var(--schiefer);color:var(--himmel);padding-block:56px 40px;display:grid;gap:28px;position:relative;z-index:2}
:root .fuss{--fuss-text:#C7D3D8}
.fuss .kaemme{width:100%;height:auto;display:block}
.fuss nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.fuss nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font:400 .76rem var(--m);text-transform:uppercase;letter-spacing:.05em}
.fuss nav a:hover{color:var(--abend)}
.fuss p{max-width:72ch;font-size:.92rem;color:var(--himmel);opacity:.8}
.fuss .nullmeter{font-family:var(--d);font-weight:800;font-size:clamp(2.2rem,8vw,6rem);letter-spacing:-.04em;line-height:.9}
.fuss .nullmeter span{color:var(--abend)}