/* Kitzherz · Townhouse Hahnenkamm. Gestaltung nach Brandkit 1.0 (18.10.2026).
   Tokens wie brand/tokens.css, Schriftpfade relativ zu assets/css. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}

:root{
  --alpenrot:#A01E2A;--kohle:#2C2622;--schnee:#FBF8F2;
  --laerche:#AD7759;--laerche-tief:#8A5638;--zirbe:#DD9E57;--granit:#838386;--altholz:#68544C;
  --leinen:#F3ECE1;--nebel:#E6DFD4;--kohle-mild:#5C534C;--nacht:#1E1A17;
  --schrift-anzeige:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --schrift-text:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --gleiten:cubic-bezier(.16,1,.3,1);--schweben:cubic-bezier(.65,0,.35,1);
  --rand:clamp(20px,5vw,80px);--breite:1440px;
  --haarlinie:1px solid rgba(44,38,34,.16);
  --haarlinie-hell:1px solid rgba(251,248,242,.2);
  --kopf-hoehe:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--nacht)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--schnee);color:var(--kohle);font-family:var(--schrift-text);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,dl,dd,figure{margin:0}
:focus-visible{outline:2px solid var(--zirbe);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprungmarke{position:absolute;left:12px;top:-60px;z-index:200;background:var(--schnee);color:var(--kohle);padding:10px 16px;font-size:14px}
.sprungmarke:focus{top:12px}

/* Filmkorn über allem: verbirgt die geringe Auflösung der Fotos und gibt
   allen Flächen dieselbe Haptik. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.07;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Raster und Typografie */
.raster{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:clamp(96px,14vw,200px);position:relative}
.etikett{font-family:var(--schrift-text);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--alpenrot);line-height:1.4}
.etikett-hell{color:#F2D6B3}
.etikett-zirbe{color:var(--zirbe)}
.titel{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(42px,6.2vw,96px);line-height:1.02;letter-spacing:-.01em;margin-top:24px;font-variant-numeric:lining-nums;text-wrap:balance}
.titel em{font-style:italic;color:var(--alpenrot)}
.titel-hell{color:var(--schnee)}
.titel-hell em{color:var(--zirbe)}
.fliess{max-width:34em}
.fliess p+p{margin-top:1em}
.platzhalter{opacity:.6;font-style:italic}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 30px;border:1px solid currentColor;font-family:var(--schrift-text);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--gleiten),border-color .5s var(--gleiten)}
.knopf::before{content:"";position:absolute;inset:0;background:currentColor;transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--gleiten);z-index:-1}
.knopf-klein{padding:12px 20px;font-size:11px}
.knopf-rot{background:var(--alpenrot);border-color:var(--alpenrot);color:#fff}
.knopf-rot::before{background:var(--schnee)}
.knopf-rot:hover{color:var(--alpenrot)}
.knopf-rot:hover::before{transform:scaleY(1)}

/* Vorlader */
#vorlader{position:fixed;inset:0;z-index:500;background:var(--schnee);display:grid;place-items:center;transition:clip-path 1.1s var(--schweben);clip-path:inset(0 0 0 0)}
#vorlader.weg{clip-path:inset(0 0 100% 0)}
html:not(.js) #vorlader{display:none}
.vorlader-in{position:relative;width:96px;display:grid;justify-items:center}
.vorlader-herz{width:96px;height:88px;overflow:visible}
.vorlader-umriss{fill:none;stroke:var(--alpenrot);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:umriss 1.4s var(--schweben) .1s forwards}
.vorlader-fuellung{position:absolute;top:0;left:0;width:96px;height:88px;opacity:0;transition:opacity .8s var(--gleiten)}
#vorlader.voll .vorlader-fuellung{opacity:1}
.vorlader-balken{margin-top:28px;width:120px;height:1px;background:var(--nebel);overflow:hidden}
.vorlader-balken span{display:block;height:100%;background:var(--alpenrot);transform-origin:left;transform:scaleX(var(--geladen,0));transition:transform .4s var(--gleiten)}
@keyframes umriss{to{stroke-dashoffset:0}}

/* Kopfleiste */
.kopf{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--kopf-hoehe);padding-inline:var(--rand);display:flex;align-items:center;justify-content:space-between;color:#fff;transition:background-color .6s var(--gleiten),color .6s var(--gleiten),transform .6s var(--gleiten),height .6s var(--gleiten)}
.kopf::before{content:"";position:absolute;inset:0;background:rgba(251,248,242,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);opacity:0;transition:opacity .6s var(--gleiten);z-index:-1;border-bottom:var(--haarlinie)}
.kopf.hell{color:var(--kohle);--kopf-hoehe:68px}
.kopf.hell::before{opacity:1}
.kopf.versteckt{transform:translateY(-100%)}
.kopf-marke{display:block;height:44px;padding-block:9px;position:relative;width:auto}
.kopf-marke img{height:26px;width:auto;transition:opacity .5s var(--gleiten)}
.kopf-marke .marke-dunkel{position:absolute;top:9px;left:0;opacity:0}
.kopf.hell .marke-hell{opacity:0}
.kopf.hell .marke-dunkel{opacity:1}
.kopf-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.kopf-nav a:not(.knopf){font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;position:relative;padding-block:12px}
.kopf-nav a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--gleiten)}
.kopf-nav a:not(.knopf):hover::after,.kopf-nav a.aktiv::after{transform:scaleX(1);transform-origin:left}
.kopf-nav .knopf:hover{color:var(--kohle)}
.kopf.hell .kopf-nav .knopf{border-color:var(--alpenrot);color:var(--alpenrot)}
.kopf.hell .kopf-nav .knopf::before{background:var(--alpenrot)}
.kopf.hell .kopf-nav .knopf:hover{color:#fff}
.kopf-menue{display:none;width:44px;height:44px;position:relative}
.kopf-menue i{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .5s var(--gleiten),top .5s var(--gleiten)}
.kopf-menue i:nth-of-type(1){top:18px}
.kopf-menue i:nth-of-type(2){top:26px}
.kopf-menue[aria-expanded="true"] i:nth-of-type(1){top:22px;transform:rotate(45deg)}
.kopf-menue[aria-expanded="true"] i:nth-of-type(2){top:22px;transform:rotate(-45deg)}

/* 1 Start und Hineinflug */
.flug{position:relative;height:100vh;height:100svh;background:var(--nacht)}
.flug-buehne{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--nacht)}
.flug-standbild,.flug-canvas{position:absolute;inset:0;width:100%;height:100%}
.flug-standbild{object-fit:cover;object-position:50% 30%}
.flug-canvas{opacity:0;transition:opacity .6s linear;will-change:filter}
.flug.bereit .flug-canvas{opacity:1}
.flug.bereit .flug-standbild{visibility:hidden}
.flug-licht{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#FFF8EC 0%,rgba(255,244,226,.92) 28%,rgba(255,238,212,.35) 58%,rgba(255,236,205,0) 78%)}
.flug-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(30,26,23,.5) 0%,rgba(30,26,23,.18) 38%,rgba(30,26,23,0) 62%),linear-gradient(180deg,rgba(30,26,23,.5) 0%,rgba(30,26,23,0) 22%,rgba(30,26,23,0) 46%,rgba(30,26,23,.7) 100%)}
.flug-titel{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(96px,15vh,170px);color:#fff;z-index:2}
.flug-h1{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(58px,10vw,168px);line-height:.88;letter-spacing:-.015em;margin-top:18px}
.flug-h1 .zeile{display:block;padding-bottom:.06em}
.flug-h1 .zeile>span{display:block}
.flug-unter{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(22px,2.4vw,34px);margin-top:18px;color:#F6EBDD}
.flug-unter em{font-style:italic}
.flug-satz{text-shadow:0 2px 24px rgba(30,26,23,.35);position:absolute;left:var(--rand);bottom:clamp(110px,18vh,200px);max-width:min(40rem,calc(100% - 2*var(--rand)));color:#fff;z-index:2;opacity:0;pointer-events:none;will-change:opacity,transform,filter}
.flug-satz-gross{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(42px,6.4vw,104px);line-height:.98;letter-spacing:-.01em}
.flug-satz-klein{margin-top:18px;font-size:clamp(16px,1.3vw,19px);color:#F1E6D8;max-width:28em}
.flug-satz-mitte{left:0;right:0;max-width:none;text-align:center;bottom:auto;top:50%;transform:translateY(-50%);color:var(--kohle);text-shadow:none}
.flug-satz-innen .etikett{margin-bottom:16px}
.flug-hinweis{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:grid;justify-items:center;gap:12px;color:#fff;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;z-index:2}
.flug-hinweis i{width:1px;height:48px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.flug-hinweis i::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:#fff;animation:hinweis 2.4s var(--schweben) infinite}
@keyframes hinweis{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.flug-fortschritt{position:absolute;right:calc(var(--rand) / 2);top:50%;transform:translateY(-50%);width:1px;height:120px;background:rgba(255,255,255,.22);z-index:2}
.flug-fortschritt i{position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(var(--p,0))}

/* Erscheinen */
/* Text gleitet kurz herauf und wird scharf; Bilder blenden weich auf
   (Jeff, 18.10.2026: verblassen statt Vorhang oder Klappe). */
html.js:not(.ruhig) [data-auf]{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1.3s var(--gleiten),transform 1.3s var(--gleiten),filter 1.3s var(--gleiten)}
html.js:not(.ruhig) [data-auf].da{opacity:1;transform:none;filter:none}
.bild-auf{overflow:hidden;position:relative}
.bild-auf img{width:100%;height:100%;object-fit:cover}
html.js:not(.ruhig) .bild-auf{opacity:0;transition:opacity 1.8s var(--schweben)}
html.js:not(.ruhig) .bild-auf img{transform:scale(1.06);transition:transform 2.6s var(--gleiten)}
html.js:not(.ruhig) .bild-auf.da{opacity:1}
html.js:not(.ruhig) .bild-auf.da img{transform:none}
.zeilen-maske{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}

/* Die Linie */
.linie{position:absolute;pointer-events:none;overflow:visible}
.linie path{fill:none;stroke:var(--alpenrot);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.linie .linie-zart{stroke-width:.7;opacity:.5}
/* Nur Seitenrand plus erste Rasterspalte (die bleibt leer), nur Höhe des
   Textblocks: so kreuzt die Linie weder Text noch Kennzahlen. */
.linie-ankommen{left:0;top:-8vh;width:calc(var(--rand) + (100% - 2 * var(--rand) - 11 * 24px) / 12);height:calc(100% + 16vh);z-index:0}

/* 2 Ankommen */
.ankommen{background:var(--schnee);overflow:hidden}
.ankommen-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;position:relative;z-index:1}
.ankommen-text{grid-column:2 / span 5}
.ankommen-text .fliess{margin-top:40px}
.ankommen-bild{grid-column:8 / span 5;aspect-ratio:4/5}
.kennzahlen{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:start;margin-top:clamp(80px,10vw,140px);position:relative;z-index:1}
.kennzahl{border-top:var(--haarlinie);padding-top:18px}
.kennzahl dt{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--kohle-mild);line-height:1.5;min-height:3em}
.kennzahl dd{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(40px,4.6vw,72px);line-height:1;margin-top:10px;font-variant-numeric:lining-nums;white-space:nowrap}
.kennzahl dd .vor,.kennzahl dd .einheit{font-size:.42em;letter-spacing:.01em}
.kennzahl dd b{font-weight:300}
.kennzahl dd.zusatz{font-family:var(--schrift-text);font-size:14px;line-height:1.45;color:var(--kohle-mild);margin-top:12px;white-space:normal;letter-spacing:.01em}

/* 3 Rundgang */
.rundgang{position:relative;height:100vh;height:100svh;background:var(--nacht);color:var(--schnee)}
.rundgang-buehne{position:relative;height:100vh;height:100svh;overflow:hidden}
.raum{position:absolute;inset:0}
.raum-bild{position:absolute;inset:0;overflow:hidden}
.raum-bild img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.raum-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,26,23,.72) 0%,rgba(30,26,23,.25) 48%,rgba(30,26,23,0) 70%),linear-gradient(0deg,rgba(30,26,23,.55) 0%,rgba(30,26,23,0) 34%)}
.raum-text{position:absolute;left:var(--rand);bottom:clamp(120px,20vh,220px);max-width:min(30rem,calc(100% - 2*var(--rand)));z-index:2}
.raum-text h3{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(44px,5.6vw,92px);line-height:.98;margin-top:18px;letter-spacing:-.01em}
.raum-text p:last-child{margin-top:20px;color:#EADFD2;max-width:26em}
.rundgang-kopf{position:absolute;z-index:40;top:calc(var(--kopf-hoehe) + 28px);left:var(--rand);right:var(--rand);display:flex;justify-content:space-between;align-items:baseline}
.rundgang-zaehler{font-family:var(--schrift-anzeige);font-size:22px;color:#cfc3b6;font-variant-numeric:lining-nums}
.rundgang-zaehler b{font-weight:400;color:var(--schnee);font-size:30px}
.rundgang-leiste{position:absolute;z-index:40;left:var(--rand);right:var(--rand);bottom:36px;display:flex;gap:clamp(14px,3vw,48px);padding-bottom:18px}
.rundgang-leiste button{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,242,.5);padding-block:10px;transition:color .4s var(--gleiten)}
.rundgang-leiste button:hover,.rundgang-leiste button.aktiv{color:var(--schnee)}
.rundgang-balken{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(251,248,242,.2)}
.rundgang-balken span{position:absolute;inset:0;background:var(--zirbe);transform-origin:left;transform:scaleX(var(--p,0))}
.staub{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;mix-blend-mode:screen}

/* 4 Das Haus */
.haus{background:var(--leinen)}
.haus-kopf{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.haus-kopf>div{grid-column:1 / span 7}
.haus-kopf>.fliess{grid-column:9 / span 4}
.haus-inhalt{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(56px,7vw,96px);align-items:center}
.schnitt{grid-column:1 / span 8}
.schnitt svg{width:100%;height:auto;overflow:visible}
.schnitt text{font-family:var(--schrift-text);font-size:15px;font-weight:400;fill:var(--kohle);text-anchor:middle;pointer-events:none;letter-spacing:.02em}
.schnitt text.klein{font-size:12px;fill:var(--kohle-mild)}
.schnitt text.hinweis{font-size:12px;fill:var(--kohle-mild);text-anchor:start;font-style:italic}
.schnitt-boden line{stroke:var(--kohle);stroke-width:1.2}
.bauteil{cursor:pointer;outline:none}
.bauteil path,.bauteil rect{fill:var(--schnee);stroke:var(--kohle);stroke-width:1.1;transition:fill .5s var(--gleiten)}
.bauteil rect.auto{fill:none;stroke:var(--granit);stroke-dasharray:3 3}
.bauteil rect.hof{fill:transparent;stroke-dasharray:4 4}
.bauteil line.innen{stroke:var(--kohle);stroke-width:.8;opacity:.5}
.bauteil:hover path,.bauteil:hover rect:not(.auto),.bauteil:focus-visible path,.bauteil:focus-visible rect:not(.auto){fill:#F4E2C8}
.bauteil.aktiv path,.bauteil.aktiv rect:not(.auto){fill:var(--zirbe)}
.bauteil.aktiv text{fill:var(--kohle)}
.schnitt-deko line,.schnitt-deko path{fill:none;stroke:var(--kohle);stroke-width:1.1}
.schnitt-deko .balkon{stroke-width:3;stroke:var(--laerche)}
.schnitt-deko .dach{stroke-width:1.4}
.schnitt-deko text{font-size:11px;fill:var(--kohle-mild)}
.schnitt-tafel{grid-column:9 / span 4}
.schnitt-wahl{display:flex;flex-wrap:wrap;gap:8px}
.schnitt-wahl button{border:var(--haarlinie);padding:9px 14px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background-color .4s var(--gleiten),color .4s var(--gleiten),border-color .4s}
.schnitt-wahl button:hover{border-color:var(--kohle)}
.schnitt-wahl button.aktiv{background:var(--kohle);color:var(--schnee);border-color:var(--kohle)}
.schnitt-info{margin-top:32px;border-top:1px solid var(--kohle);padding-top:22px;min-height:220px}
.schnitt-info.wechsel{animation:wechsel .7s var(--gleiten)}
@keyframes wechsel{from{opacity:0;transform:translateY(10px)}}
.schnitt-zahl{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(52px,5vw,80px);line-height:1;margin:10px 0 14px;font-variant-numeric:lining-nums}
.schnitt-zahl span{font-size:.4em}
.fakten{margin-top:clamp(72px,9vw,120px)}
.fakten-liste{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,80px)}
.fakten-liste div{display:grid;grid-template-columns:minmax(150px,38%) 1fr;gap:16px;padding-block:16px;border-top:var(--haarlinie)}
.fakten-liste dt{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kohle-mild);padding-top:4px}
.fakten-liste dd{font-size:16px}
.fakten-hinweis{margin-top:24px;font-size:13px;color:var(--kohle-mild)}

/* 5 Zwei Wege */
.wege-karten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(56px,7vw,96px)}
.weg figure{aspect-ratio:4/3;margin-bottom:28px}
.weg:nth-child(2){margin-top:clamp(0px,10vw,140px)}
.weg h3{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(34px,3.4vw,54px);line-height:1.05;margin:14px 0 16px}
.weg p:last-child{max-width:30em}
.wege-hinweis{margin-top:clamp(56px,7vw,96px);font-size:14px;color:var(--kohle-mild);max-width:calc(46em + 2*var(--rand))}

/* 6 Kitzbühel */
.kitz{background:var(--schnee)}
.kitz-bild{position:relative;height:92vh;height:92svh;min-height:520px;overflow:hidden;background:var(--nacht)}
.kitz-bild img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.kitz-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,26,23,.7) 0%,rgba(30,26,23,0) 50%)}
.kitz-bild-text{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:clamp(48px,10vh,120px)}
.kitz-inhalt>.raster:first-child{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.kitz-text{grid-column:2 / span 5}
.karte{grid-column:8 / span 5}
.karte svg{width:100%;height:auto;overflow:visible}
.karte-linien line{stroke:var(--kohle);stroke-width:1;stroke-dasharray:3 6;opacity:.6}
.karte-orte circle{fill:var(--kohle)}
.karte-orte text,.karte-ziel text{font-family:var(--schrift-anzeige);font-size:24px;fill:var(--kohle)}
.karte-orte text.km{font-family:var(--schrift-text);font-size:12px;letter-spacing:.18em;fill:var(--kohle-mild)}
.karte-ziel circle{fill:var(--alpenrot)}
.karte-ziel .puls{fill:none;stroke:var(--alpenrot);stroke-width:1;transform-origin:380px 290px;animation:puls 3s var(--gleiten) infinite}
.karte-ziel text{font-size:30px;font-style:italic;fill:var(--alpenrot)}
@keyframes puls{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
.karte figcaption{font-size:12px;color:var(--kohle-mild);margin-top:8px}
.ort-zahlen{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:start;margin-top:clamp(72px,9vw,120px)}

/* 7 Galerie */
.galerie{background:var(--leinen);padding-bottom:clamp(80px,10vw,140px)}
.galerie-kopf{display:flex;justify-content:space-between;align-items:end;gap:24px}
.galerie-steuer{display:flex;gap:8px}
.galerie-steuer button{width:52px;height:52px;border:var(--haarlinie);font-size:18px;transition:background-color .4s,color .4s}
.galerie-steuer button:hover{background:var(--kohle);color:var(--schnee)}
.galerie-band{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0 var(--rand);display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);scrollbar-width:none;overscroll-behavior-x:contain}
.galerie-band::-webkit-scrollbar{display:none}
.galerie-band li{flex:none;scroll-snap-align:start;height:clamp(260px,40vw,540px)}
.galerie-band button{display:block;height:100%;overflow:hidden}
.galerie-band img{height:100%;width:auto;transition:transform 1.2s var(--gleiten)}
.galerie-band button:hover img{transform:scale(1.04)}
.leuchtkasten{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:rgba(30,26,23,.97);color:var(--schnee)}
.leuchtkasten::backdrop{background:rgba(30,26,23,.6)}
.leuchtkasten[open]{display:grid;place-items:center;animation:lk-auf .5s var(--gleiten)}
@keyframes lk-auf{from{opacity:0}}
.leuchtkasten img{max-width:min(92vw,1545px);max-height:82vh;width:auto;height:auto;object-fit:contain}
.leuchtkasten button{position:absolute;width:56px;height:56px;font-size:22px;border:var(--haarlinie-hell);color:var(--schnee)}
.lk-zu{top:20px;right:20px;font-size:30px!important}
.lk-zurueck{left:20px;top:50%;transform:translateY(-50%)}
.lk-vor{right:20px;top:50%;transform:translateY(-50%)}
.lk-text{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cfc3b6}

/* 8 Kontakt */
.kontakt{background:var(--kohle);color:var(--schnee);padding-block:clamp(96px,14vw,200px);position:relative;overflow:hidden}
.kontakt-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.kontakt-text{grid-column:1 / span 5;position:relative}
.kontakt-herz{width:72px;height:auto;margin-bottom:40px}
.kontakt-text .fliess{margin-top:32px;color:#E7DCCF}
.kontakt-person{margin-top:48px;border-top:var(--haarlinie-hell);padding-top:24px}
.kontakt-name{font-family:var(--schrift-anzeige);font-size:32px;font-weight:400;line-height:1.1}
.kontakt-rolle{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#cfc3b6;margin-top:6px}
.kontakt-wege{margin-top:18px}
.kontakt-wege a{text-decoration:none;border-bottom:1px solid rgba(251,248,242,.3)}
.formular{grid-column:7 / span 6;display:grid;gap:8px;align-content:start}
.formular-anliegen{border:0;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.formular-anliegen legend{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#cfc3b6;margin-bottom:14px;padding:0}
.formular-anliegen label{position:relative;cursor:pointer}
.formular-anliegen input{position:absolute;opacity:0;inset:0;cursor:pointer}
.formular-anliegen span{display:block;padding:11px 20px;border:var(--haarlinie-hell);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background-color .4s var(--gleiten),color .4s var(--gleiten)}
.formular-anliegen input:checked+span{background:var(--schnee);color:var(--kohle)}
.formular-anliegen input:focus-visible+span{outline:2px solid var(--zirbe);outline-offset:3px}
.feld{position:relative}
.feld input,.feld textarea{width:100%;background:transparent;border:0;border-bottom:var(--haarlinie-hell);color:var(--schnee);font:inherit;font-size:18px;padding:30px 0 12px;border-radius:0;resize:vertical;transition:border-color .4s}
.feld textarea{min-height:110px}
.feld input:focus,.feld textarea:focus{outline:none;border-bottom-color:var(--zirbe)}
.feld label{position:absolute;left:0;top:30px;font-size:16px;color:#bfb3a6;pointer-events:none;transform-origin:left top;transition:transform .45s var(--gleiten),color .45s}
.feld input:focus+label,.feld input:not(:placeholder-shown)+label,.feld textarea:focus+label,.feld textarea:not(:placeholder-shown)+label{transform:translateY(-22px) scale(.72);color:var(--zirbe)}
.feld.fehler input,.feld.fehler textarea{border-bottom-color:#E37580}
.feld-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.einwilligung{display:grid;grid-template-columns:22px 1fr;gap:14px;font-size:14px;color:#D9CDBF;margin:24px 0 18px;cursor:pointer;line-height:1.55}
.einwilligung input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid rgba(251,248,242,.5);margin:2px 0 0;display:grid;place-items:center;cursor:pointer}
.einwilligung input::after{content:"";width:10px;height:10px;background:var(--zirbe);transform:scale(0);transition:transform .3s var(--gleiten)}
.einwilligung input:checked::after{transform:scale(1)}
.einwilligung.fehler input{border-color:#E37580}
.formular .knopf{justify-self:start}
.formular .knopf[disabled]{opacity:.6;cursor:wait}
.formular-status{min-height:1.7em;font-size:15px;margin-top:10px;color:#E7DCCF}
.formular-status.gut{color:#BFD8B0}
.formular-status.schlecht{color:#F0A4AB}

/* Fuß */
.fuss{background:var(--nacht);color:#cfc3b6;padding-block:72px 40px}
.fuss-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.fuss-logo{grid-column:1 / span 3;width:180px}
.fuss-claim{grid-column:5 / span 4;font-family:var(--schrift-anzeige);font-size:28px;font-weight:300;color:var(--schnee)}
.fuss-claim em{color:var(--zirbe)}
.fuss-nav{grid-column:10 / span 3;display:flex;gap:28px;justify-content:flex-end;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.fuss-nav a{text-decoration:none}
.fuss-nav a:hover{color:var(--schnee)}
.fuss-klein{grid-column:1 / -1;margin-top:40px;padding-top:24px;border-top:var(--haarlinie-hell);font-size:12px;color:#9d9186}

/* Unterseiten */
.recht{max-width:760px;margin:0 auto;padding:calc(var(--kopf-hoehe) + 80px) var(--rand) 120px}
.recht h1{font-family:var(--schrift-anzeige);font-weight:300;font-size:clamp(44px,6vw,72px);line-height:1}
.recht h2{font-family:var(--schrift-anzeige);font-weight:400;font-size:28px;margin:48px 0 12px}
.recht p,.recht li{font-size:16px}
.recht p+p{margin-top:.9em}
.recht .offen{background:#F6E7C9;padding:0 4px}
body.unterseite .kopf{color:var(--kohle)}
body.unterseite .kopf::before{opacity:1}
body.unterseite .marke-hell{opacity:0}
body.unterseite .marke-dunkel{opacity:1}

/* Bewegung reduziert: keine Fahrten, alles steht */
html.ruhig .flug-canvas,html.ruhig .flug-licht,html.ruhig .flug-satz,html.ruhig .flug-hinweis i::after,html.ruhig .staub{display:none}
html.ruhig .rundgang,html.ruhig .rundgang-buehne{height:auto}
html.ruhig .raum{position:relative;height:100svh}
html.ruhig .rundgang-leiste,html.ruhig .rundgang-kopf{display:none}
html.ruhig #vorlader{display:none}
html.ruhig .karte-ziel .puls{animation:none;opacity:0}

/* Tablet und Telefon */
@media (max-width:1100px){
  .kennzahlen{grid-template-columns:repeat(3,1fr)}
  .ort-zahlen{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  :root{--kopf-hoehe:68px}
  .kopf-menue{display:block;z-index:2}
  .kopf-nav{position:fixed;inset:0;background:var(--nacht);color:var(--schnee);flex-direction:column;justify-content:center;gap:28px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--schweben);z-index:1}
  .kopf-nav a:not(.knopf){font-family:var(--schrift-anzeige);font-size:40px;letter-spacing:0;text-transform:none;font-weight:300}
  .kopf.offen .kopf-nav{clip-path:inset(0 0 0 0)}
  .kopf.offen{color:var(--schnee)}
  .kopf.offen::before{opacity:0}
  .kopf.offen .marke-hell{opacity:1}.kopf.offen .marke-dunkel{opacity:0}
  .kopf.hell .kopf-nav .knopf{border-color:var(--schnee);color:var(--schnee)}
  .ankommen-raster,.haus-kopf,.haus-inhalt,.kitz-inhalt>.raster:first-child,.kontakt-raster,.fuss-raster{grid-template-columns:1fr}
  .ankommen-text,.ankommen-bild,.haus-kopf>div,.haus-kopf>.fliess,.schnitt,.schnitt-tafel,.kitz-text,.karte,.kontakt-text,.formular,.fuss-logo,.fuss-claim,.fuss-nav{grid-column:1 / -1}
  .ankommen-bild{aspect-ratio:4/3;margin-top:40px}
  .wege-karten{grid-template-columns:1fr}
  .weg:nth-child(2){margin-top:24px}
  .fakten-liste{grid-template-columns:1fr}
  .formular{margin-top:56px}
  .fuss-nav{justify-content:flex-start}
  .linie-ankommen{visibility:hidden}
  .karte{margin-top:48px}
}
@media (max-width:600px){
  body{font-size:16px}
  .kennzahlen{grid-template-columns:1fr 1fr}
  .kennzahlen .kennzahl:last-child{grid-column:1 / -1}
  .ort-zahlen{grid-template-columns:1fr 1fr}
  .fakten-liste div{grid-template-columns:1fr;gap:4px}
  .rundgang-leiste{overflow-x:auto;scrollbar-width:none;gap:18px}
  .rundgang-leiste button{flex:none}
  .raum-bild::after{background:linear-gradient(0deg,rgba(30,26,23,.85) 0%,rgba(30,26,23,.35) 50%,rgba(30,26,23,.1) 100%)}
  .flug-satz-klein{font-size:15px}
  .galerie-steuer{display:none}
  .schnitt text{font-size:18px}
  .schnitt text.klein,.schnitt text.hinweis{font-size:15px}
}
.kopf-nav-unterseite a{color:var(--kohle)}
@media (max-width:900px){.kopf-nav-unterseite{position:static;clip-path:none;background:none;flex-direction:row}.kopf-nav-unterseite a:not(.knopf){font-family:var(--schrift-text);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}}
.seite-404{text-align:center}.seite-404 img{margin:0 auto 32px}.abstand-m{margin-top:24px}.abstand-l{margin-top:40px}
.vorderstadt{margin-top:clamp(64px,8vw,112px);display:block}
.vorderstadt img{width:100%;height:auto;aspect-ratio:2000/1335;object-fit:cover}
.vorderstadt figcaption{margin-top:14px;font-size:13px;color:var(--kohle-mild)}