/* ==========================================================================
   Gipfelblick Chalets – Stylesheet
   Farbwelt aus den Materialien des Hauses: Fels, Firn, Altholz, Loden.
   ========================================================================== */

:root{
  --fels:#191E1B;
  --stein:#252C27;
  --schiefer:#6E7670;
  --firn:#EDEEE9;
  --papier:#F6F6F3;
  --altholz:#8B6F4E;
  --loden:#4C5F41;
  --linie:rgba(25,30,27,.16);
  --linie-hell:rgba(255,255,255,.22);

  --display:"Bodoni Moda", Georgia, "Times New Roman", serif;
  --text:"Jost", "Helvetica Neue", Arial, sans-serif;

  --rand:clamp(20px, 5vw, 88px);
  --spalte:minmax(0,1fr);
  --kopfhoehe:112px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--kopfhoehe) + 16px)}
body{
  margin:0;
  background:var(--papier);
  color:var(--fels);
  font-family:var(--text);
  font-weight:300;
  font-size:clamp(16px,.55vw + 15px,18px);
  line-height:1.68;
  letter-spacing:.005em;
  overflow-wrap:break-word;
}
body.scroll-sperre{overflow:hidden}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
::selection{background:var(--loden); color:var(--firn)}
:focus-visible{outline:2px solid var(--loden); outline-offset:3px}
.dunkel :focus-visible, .kopf :focus-visible, .fuss :focus-visible{outline-color:var(--firn)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--fels); color:var(--firn); padding:.8rem 1.2rem}
.skip:focus{left:0}

.nur-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------- Typografie --- */
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,7vw,5.6rem); line-height:.98}
h2{font-size:clamp(1.9rem,4.2vw,3.6rem); line-height:1.05}
h3{font-size:clamp(1.3rem,1.9vw,1.8rem); line-height:1.2}
h4{font-family:var(--text); font-weight:400; font-size:1.02rem; letter-spacing:.02em; margin:0 0 .5rem}
p{margin:0 0 1.1em; max-width:62ch}
p:last-child{margin-bottom:0}
strong{font-weight:500}
.gross{font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.55; max-width:48ch}
.fliess{color:#3A423C}
.dunkel .fliess{color:rgba(237,238,233,.78)}
.leise{color:var(--schiefer); font-size:.9rem}
.dunkel .leise{color:rgba(237,238,233,.6)}

/* -------------------------------------------------------------- Kopf ---- */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--rand);
  color:var(--firn);
  transition:background-color .3s ease, padding .3s ease, color .3s ease;
}
.kopf.fest,
.kopf.solide{
  background:rgba(25,30,27,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding-block:.7rem;
}
.wortmarke{position:relative; z-index:3; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap}
.wortmarke img{display:block; height:clamp(60px,8vw,80px); width:auto}
.wortmarke em{font-style:italic; letter-spacing:0}

.navi{display:flex; align-items:center; gap:clamp(.9rem,1.9vw,2rem)}
.navi > a,
.navi .aufklapp > button{
  font-size:.9rem; text-decoration:none; background:none; border:0; padding:.35rem 0;
  border-bottom:1px solid transparent; cursor:pointer; letter-spacing:.01em;
}
.navi > a:hover,
.navi .aufklapp > button:hover{border-bottom-color:currentColor}
.navi a[aria-current="page"]{border-bottom-color:var(--altholz)}

.aufklapp{position:relative}
.aufklapp > button::after{content:""; display:inline-block; width:.4em; height:.4em; margin-left:.5em; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg)}
.aufklapp-menue{
  position:absolute; top:calc(100% + .9rem); left:-1.1rem; min-width:14rem;
  background:rgba(25,30,27,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--linie-hell);
  padding:.5rem 0; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.aufklapp[data-offen="true"] .aufklapp-menue{opacity:1; visibility:visible; transform:none}
.aufklapp-menue a{display:block; padding:.5rem 1.1rem; font-size:.9rem; text-decoration:none}
.aufklapp-menue a:hover{background:rgba(237,238,233,.1)}

.knopf-klein{border:1px solid var(--linie-hell); padding:.5rem 1.1rem; border-radius:999px; font-size:.88rem; text-decoration:none}
.knopf-klein:hover{background:var(--firn); color:var(--fels); border-color:var(--firn)}

.burger{
  display:none; position:relative; z-index:3;
  background:none; border:0; padding:.4rem; cursor:pointer;
  width:38px; height:34px;
}
.burger span{display:block; height:1px; background:currentColor; margin:7px 0; transition:transform .3s ease, opacity .2s ease}
body.menue-offen .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menue-offen .burger span:nth-child(2){opacity:0; transform:scaleX(0)}
body.menue-offen .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:960px){
  .burger{display:block}
  .navi{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:.2rem;
    padding:calc(var(--kopfhoehe) + 1.6rem) var(--rand) 3rem;
    background:var(--fels);
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
    overflow-y:auto; overscroll-behavior:contain;
  }
  body.menue-offen .navi{opacity:1; visibility:visible}
  .navi > a, .navi .aufklapp > button{font-family:var(--display); font-size:1.7rem; padding:.35rem 0}
  .aufklapp{width:100%}
  .aufklapp > button::after{display:none}
  .aufklapp-menue{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; padding:0 0 .8rem .1rem;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .aufklapp-menue a{padding:.3rem 0; font-size:1rem; color:rgba(237,238,233,.72)}
  .aufklapp-menue a:hover{background:none; color:var(--firn)}
  .navi > a.knopf-klein{
    margin-top:1.6rem; font-family:var(--text); font-size:1rem;
    padding:.8rem 1.6rem; border:1px solid var(--firn); border-radius:999px;
  }
  .navi > a.knopf-klein[aria-current="page"]{background:var(--firn); color:var(--fels)}
}

/* ----------------------------------------------------------- Buttons ---- */
.knopf{
  display:inline-block; font-size:.95rem; letter-spacing:.02em;
  padding:.95rem 1.9rem; text-decoration:none; cursor:pointer;
  border:1px solid var(--fels); background:var(--fels); color:var(--firn);
  transition:background-color .25s ease, color .25s ease;
}
.knopf:hover{background:transparent; color:var(--fels)}
.knopf.hell{border-color:var(--firn); background:var(--firn); color:var(--fels)}
.knopf.hell:hover{background:transparent; color:var(--firn)}
.knopf.leer{background:transparent; color:var(--firn); border-color:var(--linie-hell)}
.knopf.leer:hover{background:var(--firn); color:var(--fels); border-color:var(--firn)}
.knopf.rand{background:transparent; color:var(--fels); border-color:var(--fels)}
.knopf.rand:hover{background:var(--fels); color:var(--firn)}

.textlink{display:inline-block; text-decoration:none; border-bottom:1px solid var(--altholz); padding-bottom:.15rem; font-size:.95rem}
.textlink:hover{border-bottom-color:currentColor}
.dunkel .textlink{border-bottom-color:rgba(237,238,233,.5)}

/* -------------------------------------------------------------- Hero ---- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--kopfhoehe) + 2rem) var(--rand) clamp(2rem,4vw,3.4rem);
  color:var(--firn); overflow:hidden; background:var(--fels);
}
.hero.klein{min-height:min(74svh,660px)}
.hero-bild{position:absolute; inset:0; overflow:hidden}
.hero-bild img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:ruhe 2.4s cubic-bezier(.16,.84,.32,1) forwards}
.hero-bild::after{content:""; position:absolute; inset:0; background:linear-gradient(178deg, rgba(25,30,27,.6) 0%, rgba(25,30,27,.16) 34%, rgba(25,30,27,.84) 96%)}
@keyframes ruhe{to{transform:scale(1)}}

.hero-inhalt{position:relative; width:100%}
.hero-ort{display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem; margin-bottom:clamp(1rem,2.6vw,2.2rem); font-size:.86rem; letter-spacing:.12em; color:rgba(237,238,233,.82)}
.hero-ort .hoehe{font-family:var(--display); font-size:1rem; letter-spacing:.02em; padding-left:.9rem; border-left:1px solid var(--linie-hell)}
.hero h1 .zeile2{display:block; font-style:italic; padding-left:.06em}
.hero-fuss{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.4rem,3vw,3rem); margin-top:clamp(1.5rem,3.2vw,2.6rem);
  padding-top:1.5rem; border-top:1px solid var(--linie-hell);
}
.hero-fuss p{max-width:36ch; color:rgba(237,238,233,.86); font-size:1.02rem}
.hero-aktion{display:flex; flex-wrap:wrap; gap:.7rem}

/* ---------------------------------------------------------- Sektionen --- */
.bahn{padding:clamp(4rem,8vw,8.5rem) var(--rand)}
.bahn:not(.firn):not(.dunkel){background-color:#e8e8e8}
.bahn.dunkel{background:var(--fels); color:var(--firn)}
.bahn.firn{background:var(--firn)}
.bahn.schmal{padding-block:clamp(3rem,5vw,5rem)}

.kopfzeile{
  display:grid; gap:clamp(1.1rem,3vw,3.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:end; padding-bottom:clamp(1.8rem,3.5vw,3rem);
}
@media (max-width:860px){ .kopfzeile{grid-template-columns:1fr; align-items:start} }

.zweispalt{display:grid; gap:clamp(1.6rem,4vw,4.5rem); grid-template-columns:var(--spalte) var(--spalte); align-items:start}
@media (max-width:860px){ .zweispalt{grid-template-columns:1fr} }

.masstext{max-width:70ch}

/* ------------------------------------------------------------- Fakten --- */
.fakten{display:grid; grid-template-columns:repeat(4,var(--spalte)); border-top:1px solid var(--linie)}
.dunkel .fakten{border-top-color:var(--linie-hell)}
.fakt{padding:1.8rem 1.6rem 1.9rem 0; border-right:1px solid var(--linie)}
.dunkel .fakt{border-right-color:var(--linie-hell)}
.fakt:last-child{border-right:0}
.fakt:not(:first-child){padding-left:1.6rem}
.fakt h3{font-size:1.2rem; margin-bottom:.5rem}
.fakt p{font-size:.95rem; color:#4A524D}
.dunkel .fakt p{color:rgba(237,238,233,.72)}
@media (max-width:900px){
  .fakten{grid-template-columns:repeat(2,var(--spalte))}
  .fakt:nth-child(2n){border-right:0}
  .fakt:nth-child(-n+2){border-bottom:1px solid var(--linie)}
  .fakt:nth-child(2n+1){padding-left:0}
}
@media (max-width:560px){
  .fakten{grid-template-columns:1fr}
  .fakt{border-right:0; border-bottom:1px solid var(--linie); padding:1.3rem 0}
  .fakt:nth-child(2n){padding-left:0}
  .fakt:last-child{border-bottom:0}
}

/* -------------------------------------------------------------- Zahlen -- */
.zahlen{display:grid; grid-template-columns:repeat(3,var(--spalte)); gap:clamp(1rem,3vw,3rem); border-top:1px solid var(--linie); padding-top:2rem}
.dunkel .zahlen{border-top-color:var(--linie-hell)}
.zahl{display:block}
.zahl b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,5.5vw,4.2rem); line-height:1; letter-spacing:-.03em}
.zahl span{display:block; margin-top:.5rem; font-size:.92rem; color:var(--schiefer)}
.dunkel .zahl span{color:rgba(237,238,233,.66)}
@media (max-width:640px){ .zahlen{grid-template-columns:1fr; gap:1.6rem} }

/* ------------------------------------------------------------- Lodges --- */
.lodges{display:grid; grid-template-columns:var(--spalte) var(--spalte)}
@media (max-width:860px){ .lodges{grid-template-columns:1fr} }
.lodge{padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,3vw,2.6rem) clamp(1.8rem,3vw,2.6rem) 0; border-top:1px solid var(--linie)}
.lodge + .lodge{border-left:1px solid var(--linie); padding-left:clamp(1.6rem,3vw,2.6rem)}
@media (max-width:860px){ .lodge + .lodge{border-left:0; padding-left:0} .lodge{padding-right:0} }
.lodge h3{font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:1.1rem}
.flaeche{display:flex; align-items:baseline; gap:.55rem; font-family:var(--display); font-size:clamp(2.8rem,5.6vw,4.4rem); line-height:1; letter-spacing:-.03em; margin:0}
.flaeche .einheit{font-family:var(--text); font-size:1rem; letter-spacing:.04em; color:var(--schiefer)}
.aufteilung{list-style:none; margin:1.4rem 0 0; padding:0; font-size:.95rem; color:#4A524D; max-width:34ch}
.aufteilung li{display:flex; justify-content:space-between; gap:1.5rem; padding:.55rem 0; border-bottom:1px solid var(--linie)}
.aufteilung li span:last-child{font-family:var(--display); color:var(--fels)}

.ebenen{display:flex; flex-direction:column; gap:4px; margin-top:1.5rem; max-width:34ch}
.ebene{display:flex; align-items:center; gap:.8rem; font-size:.82rem; letter-spacing:.05em; color:var(--schiefer)}
.ebene i{display:block; height:10px; flex:0 0 auto; background:var(--altholz); opacity:.75}
.ebene:nth-child(1) i{width:72px}
.ebene:nth-child(2) i{width:104px}
.ebene:nth-child(3) i{width:88px}

/* ------------------------------------------------------------ Galerie --- */
.galerie{display:grid; gap:clamp(.6rem,1.4vw,1.1rem); grid-template-columns:repeat(6,var(--spalte))}
.galerie figure{margin:0}
.galerie img{width:100%; height:100%; object-fit:cover}
.g-a{grid-column:span 3; aspect-ratio:16/10}
.g-b{grid-column:span 3; aspect-ratio:16/10; align-self:end}
.g-c{grid-column:span 6; aspect-ratio:21/8}
.g-h{grid-column:span 3; aspect-ratio:3/2}
@media (max-width:720px){ .g-a,.g-b,.g-c,.g-h{grid-column:span 6; aspect-ratio:4/3} }

.raster{display:grid; gap:clamp(.5rem,1.2vw,1rem); grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.raster button{
  display:block; padding:0; border:0; background:none; cursor:zoom-in; width:100%;
  overflow:hidden;
}
.raster img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.raster button:hover img, .raster button:focus-visible img{transform:scale(1.04)}

/* ------------------------------------------------------------ Duo ------- */
.duo{display:grid; gap:clamp(1.6rem,4vw,4.5rem); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center}
.duo.gedreht{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.duo.gedreht .duo-bild{order:2}
.duo + .duo{margin-top:clamp(3rem,6vw,6rem)}
@media (max-width:860px){
  .duo, .duo.gedreht{grid-template-columns:1fr}
  .duo.gedreht .duo-bild{order:0}
}
.duo-bild img{width:100%; aspect-ratio:3/2; object-fit:cover}
.duo-text h2, .duo-text h3{margin-bottom:1rem}

/* ------------------------------------------------------------ Marken ---- */
.marken{display:grid; gap:clamp(.7rem,1.6vw,1.4rem); grid-template-columns:repeat(5,var(--spalte)); margin-top:clamp(1.6rem,3vw,2.4rem)}
.marken figure{margin:0}
.marken img{width:100%; aspect-ratio:3/2; object-fit:cover; filter:grayscale(.35)}
.marken figcaption{margin-top:.5rem; font-size:.8rem; letter-spacing:.06em; color:var(--schiefer)}
.dunkel .marken figcaption{color:rgba(237,238,233,.66)}
@media (max-width:900px){ .marken{grid-template-columns:repeat(3,var(--spalte))} }
@media (max-width:520px){ .marken{grid-template-columns:repeat(2,var(--spalte))} }

.markenliste{display:grid; gap:clamp(1.6rem,3.5vw,3rem); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:2rem}
.markenliste article img{width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:1rem}
.markenliste h3{font-size:1.25rem; margin-bottom:.4rem}
.markenliste p{font-size:.95rem}

/* ---------------------------------------------------------- Vorteile ---- */
.vorteile{display:grid; grid-template-columns:repeat(2,var(--spalte)); margin-top:clamp(1.6rem,3.5vw,2.8rem)}
.vorteil{padding:1.7rem 2rem 1.8rem 0; border-top:1px solid var(--linie)}
.dunkel .vorteil{border-top-color:var(--linie-hell)}
.vorteil:nth-child(2n){padding-left:2rem; border-left:1px solid var(--linie)}
.dunkel .vorteil:nth-child(2n){border-left-color:var(--linie-hell)}
.vorteil h3{font-size:1.25rem; margin-bottom:.45rem}
.vorteil p{font-size:.95rem}
@media (max-width:680px){
  .vorteile{grid-template-columns:1fr}
  .vorteil:nth-child(2n){padding-left:0; border-left:0}
  .vorteil{padding-right:0}
}
.hinweis{
  margin-top:clamp(2rem,4vw,3.2rem); padding-top:1.8rem; border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between;
}
.dunkel .hinweis{border-top-color:var(--linie-hell)}

/* -------------------------------------------------------- Jahreszeiten -- */
.saison{display:grid; grid-template-columns:var(--spalte) var(--spalte); gap:clamp(.6rem,1.4vw,1.1rem)}
@media (max-width:800px){ .saison{grid-template-columns:1fr} }
.saison-feld{
  position:relative; min-height:clamp(360px,50vw,540px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.6rem,3vw,2.6rem); color:var(--firn); overflow:hidden; text-decoration:none;
}
.saison-feld img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.saison-feld::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(25,30,27,.86) 4%, rgba(25,30,27,.12) 62%)}
.saison-feld:hover img, .saison-feld:focus-visible img{transform:scale(1.04)}
.saison-inhalt{position:relative; z-index:1}
.saison-inhalt h3{font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:.6rem}
.saison-inhalt h3 em{font-style:italic}
.saison-inhalt p{font-size:.97rem; color:rgba(237,238,233,.85); max-width:44ch; margin-bottom:1.1rem}
.saison-inhalt .mehr{font-size:.9rem; letter-spacing:.05em; border-bottom:1px solid rgba(237,238,233,.55); padding-bottom:.2rem}

/* ------------------------------------------------------------ Tabellen -- */
.tabelle{width:100%; border-collapse:collapse; margin-top:1.4rem; font-size:.95rem}
.tabelle caption{text-align:left; font-size:.85rem; letter-spacing:.06em; color:var(--schiefer); padding-bottom:.8rem}
.tabelle th, .tabelle td{text-align:left; padding:.65rem .8rem .65rem 0; border-bottom:1px solid var(--linie)}
.tabelle thead th{font-weight:400; color:var(--schiefer); font-size:.85rem; letter-spacing:.05em}
.tabelle td + td, .tabelle th + th{text-align:right; font-family:var(--display); padding-right:0}
.tabelle tfoot td{font-family:var(--display); border-bottom:0; padding-top:.9rem}
.tabelle tfoot th{border-bottom:0; padding-top:.9rem}

/* ------------------------------------------------------------ Geschoss -- */
.geschoss + .geschoss{margin-top:clamp(3.5rem,7vw,6.5rem); padding-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--linie)}
.geschoss-kopf{display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 1.6rem; margin-bottom:1.6rem}
.geschoss-kopf h2{margin:0}
.plaene{display:grid; gap:clamp(1rem,2.5vw,2.4rem); grid-template-columns:var(--spalte) var(--spalte); margin-top:2rem}
@media (max-width:760px){ .plaene{grid-template-columns:1fr} }
.plan{background:#fff; border:1px solid var(--linie); padding:clamp(1rem,2vw,1.6rem)}
.plan img{width:100%; height:auto; mix-blend-mode:soft-light}
.plan h3{font-size:1.1rem; margin-bottom:.9rem}

/* -------------------------------------------------------------- Team ---- */
.team{display:grid; gap:clamp(1.6rem,4vw,4rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center}
@media (max-width:800px){ .team{grid-template-columns:1fr} }
.team img{width:100%; aspect-ratio:3/2; object-fit:cover}

/* ----------------------------------------------------------- Formular --- */
.formular{display:grid; gap:1.4rem; max-width:44rem}
.feld{display:flex; flex-direction:column; gap:.45rem}
.feld label{font-size:.88rem; letter-spacing:.03em; color:#3A423C}
.feld input, .feld textarea, .feld select{
  font:inherit; font-size:1rem; color:var(--fels);
  background:transparent; border:0; border-bottom:1px solid var(--linie);
  padding:.7rem 0; border-radius:0;
}
.feld input:focus, .feld textarea:focus{outline:none; border-bottom-color:var(--loden)}
.feld textarea{min-height:9rem; resize:vertical}
.feld[data-fehler="true"] input, .feld[data-fehler="true"] textarea{border-bottom-color:#9B4A32}
.feld .fehler{font-size:.85rem; color:#9B4A32; min-height:1.2em}
.feld-paar{display:grid; gap:1.4rem; grid-template-columns:1fr 1fr}
@media (max-width:640px){ .feld-paar{grid-template-columns:1fr} }
.optionen{display:flex; flex-wrap:wrap; gap:.6rem}
.option input{position:absolute; opacity:0; width:0; height:0}
.option span{display:inline-block; padding:.55rem 1.1rem; border:1px solid var(--linie); font-size:.92rem; cursor:pointer}
.option input:checked + span{background:var(--fels); color:var(--firn); border-color:var(--fels)}
.option input:focus-visible + span{outline:2px solid var(--loden); outline-offset:2px}
.zustimmung{display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem; line-height:1.5; color:#3A423C}
.zustimmung input{margin-top:.35rem; accent-color:var(--loden); width:1.05rem; height:1.05rem; flex:0 0 auto}
.honig{position:absolute; left:-9999px}
.formular-status{font-size:.95rem; padding:1rem 1.2rem; border-left:2px solid var(--loden); background:rgba(76,95,65,.08)}
.formular-status[hidden]{display:none}

.kontaktdaten dl{margin:0}
.kontaktdaten dt{font-size:.85rem; letter-spacing:.06em; color:var(--schiefer); margin-top:1.6rem}
.kontaktdaten dt:first-child{margin-top:0}
.kontaktdaten dd{margin:.3rem 0 0; font-size:1rem}
.kontaktdaten a{text-decoration:none; border-bottom:1px solid var(--altholz)}

.anreise{list-style:none; margin:1.4rem 0 0; padding:0}
.anreise li{padding:1rem 0; border-top:1px solid var(--linie); display:grid; grid-template-columns:8.5rem 1fr; gap:1rem}
.anreise li strong{font-weight:400; color:var(--schiefer); font-size:.9rem}
@media (max-width:560px){ .anreise li{grid-template-columns:1fr; gap:.2rem} }

/* -------------------------------------------------------------- Brief --- */
.brief{max-width:68ch}
.brief h2{margin-top:2.6rem; font-size:clamp(1.5rem,2.4vw,2rem)}
.brief h2:first-child{margin-top:0}
.brief h3{margin-top:1.8rem; font-size:1.15rem}
.brief p, .brief li{font-size:.98rem}
.brief ul{padding-left:1.2rem}

/* ------------------------------------------------------------ Weiter ---- */
.weiter{display:grid; grid-template-columns:var(--spalte) var(--spalte); border-top:1px solid var(--linie-hell)}
.weiter a{padding:clamp(1.8rem,3.5vw,2.8rem) var(--rand); text-decoration:none; display:block}
.weiter a + a{border-left:1px solid var(--linie-hell)}
.weiter a:hover{background:rgba(237,238,233,.06)}
.weiter small{display:block; font-size:.82rem; letter-spacing:.08em; color:rgba(237,238,233,.6); margin-bottom:.4rem}
.weiter strong{font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.8rem)}
@media (max-width:700px){
  .weiter{grid-template-columns:1fr}
  .weiter a + a{border-left:0; border-top:1px solid var(--linie-hell)}
}

/* --------------------------------------------------------------- Fuß ---- */
.fuss{background:var(--fels); color:rgba(237,238,233,.72); padding:clamp(3rem,5vw,4.5rem) var(--rand) 2.4rem}
.fuss-oben{display:grid; gap:2rem clamp(1.5rem,4vw,4rem); grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); padding-bottom:2.6rem}
@media (max-width:900px){ .fuss-oben{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .fuss-oben{grid-template-columns:1fr} }
.fuss h2{font-size:1.5rem; color:var(--firn); margin-bottom:.8rem}
.fuss h3{font-family:var(--text); font-size:.85rem; letter-spacing:.08em; color:rgba(237,238,233,.55); margin-bottom:.9rem}
.fuss ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.fuss a{text-decoration:none; border-bottom:1px solid transparent; font-size:.92rem}
.fuss a:hover{border-bottom-color:currentColor}
.fuss-unten{
  display:flex; flex-wrap:wrap; gap:1rem 2.4rem; align-items:center; justify-content:space-between;
  padding-top:1.8rem; border-top:1px solid var(--linie-hell); font-size:.85rem;
}
.fuss-unten nav{display:flex; flex-wrap:wrap; gap:1.4rem}

/* ----------------------------------------------------------- Lightbox --- */
.leuchtkasten{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(15,18,16,.96); padding:clamp(1rem,4vw,3rem);
  align-items:center; justify-content:center;
}
.leuchtkasten[open]{display:flex}
.leuchtkasten img{max-width:100%; max-height:82svh; width:auto; object-fit:contain}
.leuchtkasten figure{margin:0; text-align:center}
.leuchtkasten figcaption{color:rgba(237,238,233,.62); font-size:.85rem; margin-top:1rem; max-width:60ch; margin-inline:auto}
.leuchtkasten .lk-zaehler{display:block; margin-top:.35rem; color:rgba(237,238,233,.4); font-size:.78rem; letter-spacing:.08em}
.lk-knopf{
  position:absolute; background:none; border:1px solid var(--linie-hell); color:var(--firn);
  width:46px; height:46px; cursor:pointer; display:grid; place-items:center; font-size:1.2rem;
}
.lk-knopf:hover{background:var(--firn); color:var(--fels)}
.lk-zu{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem)}
.lk-vor{right:clamp(1rem,3vw,2rem); top:50%; transform:translateY(-50%)}
.lk-zurueck{left:clamp(1rem,3vw,2rem); top:50%; transform:translateY(-50%)}
@media (max-width:600px){
  .lk-vor{top:auto; bottom:1rem; transform:none}
  .lk-zurueck{top:auto; bottom:1rem; transform:none}
}

/* ------------------------------------------------------ Installieren ---- */
.install{
  position:fixed; left:clamp(12px,4vw,28px); bottom:clamp(12px,4vw,28px); z-index:70;
  display:none; align-items:center; gap:1rem;
  background:var(--fels); color:var(--firn); padding:1rem 1.2rem;
  border:1px solid var(--linie-hell); max-width:min(30rem,calc(100vw - 24px));
}
.install[data-sichtbar="true"]{display:flex}
.install p{font-size:.9rem; margin:0; max-width:20ch}
.install button{cursor:pointer}
.install .weg{background:none; border:0; color:rgba(237,238,233,.6); font-size:1.3rem; line-height:1; padding:.2rem .4rem}

/* ------------------------------------------------------ Cookie-Banner --- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--fels); color:var(--firn);
  border-top:1px solid var(--linie-hell);
  padding:1.1rem clamp(16px,4vw,28px);
}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto;
}
.cookie-banner-text{flex:1 1 320px; max-width:62ch}
.cookie-banner-titel{font-family:var(--display); font-size:1.05rem; margin:0 0 .3rem}
.cookie-banner-text p{margin:0; font-size:.88rem; line-height:1.55}
.cookie-banner-text .textlink{color:var(--firn); text-decoration:underline}
.cookie-banner-buttons{display:flex; gap:.6rem; flex-wrap:wrap; flex-shrink:0}
.cookie-banner-buttons button{cursor:pointer; font-size:.86rem}

/* --------------------------------------------------------- Bewegung ----- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .hero-bild img{transform:none}
}

@media print{
  .kopf, .fuss, .weiter, .install, .leuchtkasten{display:none !important}
  body{background:#fff; color:#000}
  .bahn{padding:1.5rem 0}
}