@font-face{font-family:"Epilogue";src:url(fonts/epilogue-normal.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/serif-normal.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--kalk:#EDF0F1;--weiss:#FAFBFB;--nacht:#1E2327;--tanne:#21392F;--glut:#D35A22;--glut-d:#B4471A;--grat:#C3CCD0;--nebel:#566873;
--rand:24px;--max:1240px;--k:"Epilogue",system-ui,sans-serif;--t:"Source Serif",Georgia,serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--kalk);color:var(--nacht);font:400 17px/1.6 var(--t);font-optical-sizing:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glut);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--nacht);color:#fff;padding:8px 16px;z-index:99}.skip:focus{left:8px}
h1,h2,h3,.k{font-family:var(--k);font-weight:500;letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(38px,6.4vw,76px);font-weight:400}
h2{font-size:clamp(29px,4vw,48px);font-weight:400}
h3{font-size:clamp(20px,2vw,24px);font-weight:500;line-height:1.25}
p+p{margin-top:1em}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.lese{max-width:36em}
.klein{font-size:15px;color:var(--nebel)}
.cap{font-family:var(--k);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

/* Entwurfsband */
.band{background:var(--nacht);color:#cfd6d9;font:400 12px/1.4 var(--k);letter-spacing:.04em;text-align:center;padding:7px 16px}

/* Kopf */
.kopf{position:absolute;left:0;right:0;z-index:20;color:#fff}
.kopf.fest{position:relative;color:var(--nacht);border-bottom:1px solid var(--grat);background:var(--kalk)}
.kopf .w{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo img{width:150px;height:auto}
.kopf nav{display:flex;align-items:center;gap:26px;font:500 14px/1 var(--k);letter-spacing:.02em}
.kopf nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.kopf nav a:hover,.kopf nav a[aria-current]{border-color:currentColor}
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--glut);color:#fff;text-decoration:none;font:600 15px/1 var(--k);letter-spacing:.01em;padding:16px 22px;border:0;cursor:pointer;transition:background .2s}
.knopf:hover{background:var(--glut-d)}
.knopf.leer{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.knopf.leer:hover{background:rgba(255,255,255,.1)}
.kopf nav .knopf{padding:12px 16px;border:0;font-size:14px}
.menue-k{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.menue-k span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .25s,opacity .2s}
.menue-k span:nth-child(1){top:16px}.menue-k span:nth-child(2){top:22px}.menue-k span:nth-child(3){top:28px}
.offen .menue-k span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.offen .menue-k span:nth-child(2){opacity:0}
.offen .menue-k span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Kopfbild Startseite */
.held{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#26323a}
.held picture,.held picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,24,.45) 0,rgba(14,20,24,0) 28%,rgba(14,20,24,0) 45%,rgba(14,20,24,.72) 100%)}
.held .w{position:relative;z-index:2;width:100%;padding-bottom:56px}
.held h1{max-width:11em}
.held .fakten{display:flex;flex-wrap:wrap;gap:8px 28px;margin:28px 0 32px;font:400 15px/1.3 var(--k);letter-spacing:.01em}
.held .fakten b{display:block;font-size:26px;font-weight:400;letter-spacing:-.01em}
.held .tun{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.held .tel{font:500 15px/1 var(--k);margin-left:8px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px}

/* Seitenkopf Unterseiten */
.skopf{padding:72px 0 40px}
.skopf h1{font-size:clamp(36px,5.4vw,64px);max-width:13em}
.skopf p{margin-top:20px;max-width:36em;font-size:19px}
.breitbild{width:100%;aspect-ratio:21/9;object-fit:cover}

/* Grat-Linie (Silhouette aus dem Logo) */
.grat{display:block;width:100%;height:56px;color:var(--grat)}
.grat path{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}

/* Abschnitte */
.ab{padding:104px 0}
.ab.dunkel{background:var(--nacht);color:#E7ECEE}
.ab.tanne{background:var(--tanne);color:#E7EEEA}
.zwei{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:900px){.zwei{grid-template-columns:5fr 7fr;gap:64px;align-items:center}.zwei.um{grid-template-columns:7fr 5fr}.zwei.um>:first-child{order:2}}
.zwei h2{margin-bottom:24px}
.bild-hoch{aspect-ratio:4/5;object-fit:cover;width:100%}
.bild-quer{aspect-ratio:3/2;object-fit:cover;width:100%}
.unter{margin-top:10px;font-size:14px;color:var(--nebel);font-style:italic}
.dunkel .unter,.tanne .unter{color:#9fb0b6}
.weiter{display:inline-block;margin-top:28px;font:600 15px/1 var(--k);text-decoration:none;border-bottom:1.5px solid var(--glut);padding-bottom:5px}
.weiter:hover{color:var(--glut)}
.dunkel .weiter:hover,.tanne .weiter:hover{color:#f3a37c}

/* Panorama-Band */
.pano{position:relative}
.pano img{width:100%;height:clamp(260px,46vw,620px);object-fit:cover}
.pano figcaption{max-width:var(--max);margin:0 auto;padding:16px var(--rand) 0;font-size:15px;color:var(--nebel)}

/* Daten-Liste */
.daten{display:grid;grid-template-columns:1fr;border-top:1px solid var(--grat)}
.daten>div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--grat)}
.daten dt{font:500 14px/1.5 var(--k);letter-spacing:.02em}
.dunkel .daten,.dunkel .daten>div,.tanne .daten,.tanne .daten>div{border-color:rgba(255,255,255,.16)}

/* Raeume */
.raeume{display:grid;grid-template-columns:1fr;gap:24px;margin-top:48px}
@media(min-width:760px){.raeume{grid-template-columns:7fr 5fr;align-items:end}}
.raeume img{width:100%;object-fit:cover}

/* Wetterweiche */
.weiche{position:relative;color:#fff;overflow:hidden;background:#2b3940}
.weiche .hg{position:absolute;inset:0}
.weiche .hg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.weiche .hg img.an{opacity:1}
.weiche::after{content:"";position:absolute;inset:0;background:rgba(16,22,26,.66)}
.weiche .w{position:relative;z-index:2;padding-top:96px;padding-bottom:96px}
.weiche .frage{font:400 clamp(28px,4vw,48px)/1.1 var(--k);letter-spacing:-.015em;max-width:15em}
.weiche .zitat{margin-top:16px;font-style:italic;color:#cdd7da;max-width:34em}
.wahl{display:flex;flex-wrap:wrap;gap:0;margin:40px 0 0;border:1px solid rgba(255,255,255,.4);width:max-content;max-width:100%}
.wahl button{background:none;border:0;border-right:1px solid rgba(255,255,255,.4);color:#fff;padding:14px 20px;font:500 15px/1 var(--k);cursor:pointer;transition:background .2s,color .2s}
.wahl button:last-child{border-right:0}
.wahl button[aria-pressed="true"]{background:var(--glut)}
.wahl button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.12)}
.ziele{margin-top:40px;columns:1;column-gap:48px;list-style:none;font:400 19px/1.35 var(--k)}
@media(min-width:700px){.ziele{columns:2}}
@media(min-width:1100px){.ziele{columns:3}}
.ziele li{break-inside:avoid;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.18);opacity:0;transform:translateY(6px);animation:rein .45s ease forwards}
.ziele li small{display:block;font:400 14px/1.4 var(--t);color:#b9c6ca;margin-top:2px}
.weiche .nr{font:500 13px/1 var(--k);letter-spacing:.14em;text-transform:uppercase;color:#f0b393;margin-top:32px}
@keyframes rein{to{opacity:1;transform:none}}

/* Preise */
.preise{width:100%;border-collapse:collapse;font-family:var(--k)}
.preise th,.preise td{text-align:left;padding:18px 0;border-bottom:1px solid var(--grat);vertical-align:baseline}
.preise th{font-weight:400;font-size:17px}
.preise td{text-align:right;font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.preise td small{font-size:14px;color:var(--nebel);letter-spacing:0}
.dunkel .preise th,.dunkel .preise td{border-color:rgba(255,255,255,.16)}
.dunkel .preise td small{color:#9fb0b6}
.liste{list-style:none}
.liste li{padding:12px 0;border-bottom:1px solid var(--grat)}
.dunkel .liste li{border-color:rgba(255,255,255,.16)}

/* Formular */
.form{display:grid;gap:16px}
.form .reihe{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){.form .reihe{grid-template-columns:1fr 1fr}}
.form label{display:grid;gap:6px;font:500 14px/1.3 var(--k)}
.form input,.form textarea,.form select{width:100%;background:var(--weiss);border:1px solid var(--grat);border-radius:0;padding:13px 14px;font:400 17px/1.4 var(--t)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--glut);outline-offset:0;border-color:transparent}
.form textarea{min-height:130px;resize:vertical}
.danke{display:none;padding:24px;background:var(--tanne);color:#fff;font:400 18px/1.5 var(--t)}
.danke.zeigen{display:block}

/* Galerie */
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:900px){.galerie{grid-template-columns:repeat(3,1fr);gap:12px}}
.galerie button{border:0;padding:0;background:none;cursor:zoom-in;display:block;overflow:hidden}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.galerie button:hover img{transform:scale(1.03)}
.galerie .gross{grid-column:span 2}
.galerie .gross img{aspect-ratio:16/9}
.lb{position:fixed;inset:0;background:rgba(10,14,16,.94);z-index:90;display:none;align-items:center;justify-content:center;padding:24px;flex-direction:column;gap:14px}
.lb.offen{display:flex}
.lb img{max-height:82vh;width:auto;max-width:100%}
.lb p{color:#cdd7da;font-size:15px;max-width:40em;text-align:center}
.lb button{position:absolute;top:16px;right:16px;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font:500 14px/1 var(--k);padding:12px 16px;cursor:pointer}

/* Fuss */
.fuss{background:var(--nacht);color:#cdd6d9;padding:80px 0 40px;font-size:16px}
.fuss .spalten{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:860px){.fuss .spalten{grid-template-columns:5fr 3fr 3fr}}
.fuss h2{font-size:clamp(26px,3vw,36px);color:#fff;margin-bottom:20px}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;display:grid;gap:8px;font-family:var(--k);font-size:15px}
.fuss .unten{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:12px 28px;font:400 13px/1.4 var(--k);color:#93a3a9}
.fuss img{width:170px;margin-bottom:24px}

/* Handyleiste */
.leiste{display:none}

/* Erscheinen */
.zeig{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.zeig.da{opacity:1;transform:none}

@media(max-width:960px){
  :root{--rand:22px}
  body{font-size:17px}
  .menue-k{display:block;color:inherit}
  .kopf .w{height:72px}
  .logo img{width:128px}
  .kopf nav{position:fixed;inset:0;background:var(--nacht);color:#fff;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:96px 28px 40px;font-size:26px;font-weight:400;transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:30;visibility:hidden}
  .kopf nav a{padding:10px 0;border:0}
  .kopf nav .knopf{margin-top:24px;font-size:17px;padding:16px 20px}
  .offen nav{transform:none;visibility:visible}
  .menue-k{z-index:40}
  .offen .menue-k{color:#fff;position:fixed;right:18px;top:calc(var(--bandh,30px) + 14px)}
  .ab{padding:72px 0}
  .held .w{padding-bottom:96px}
  .held .fakten{gap:12px 22px}
  .held .fakten b{font-size:22px}
  .leiste{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:25;font:600 15px/1 var(--k);transform:translateY(100%);transition:transform .3s}
  .leiste.da{transform:none}
  .leiste a{display:flex;align-items:center;justify-content:center;padding:18px 8px calc(18px + env(safe-area-inset-bottom));text-decoration:none;background:var(--nacht);color:#fff}
  .leiste a+a{background:var(--glut)}
  .fuss{padding-bottom:110px}
  .daten>div{grid-template-columns:1fr;gap:4px}
  .wahl{width:100%}
  .wahl button{flex:1 1 50%;padding:15px 10px;border-bottom:1px solid rgba(255,255,255,.4)}
  .wahl button:nth-child(2n){border-right:0}
  .wahl button:nth-child(n+3){border-bottom:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.zeig{opacity:1;transform:none}.ziele li{opacity:1;transform:none}}