/* ============================================================
   Berggasthaus Chäller — Design System
   Warm, editorial, image-forward. Fraunces display + humanist sans.
   ============================================================ */

:root{
  /* Brand */
  --green:      #2E4A3A;   /* logo green */
  --green-deep: #1A2B21;   /* scrims, footer */
  --green-800:  #24382C;
  --gold:       #C8863C;   /* sunlight accent */
  --gold-soft:  #DBA968;
  --cream:      #F5EFE3;   /* warm paper */
  --cream-2:    #EFE7D6;
  --sand:       #E7DCC7;
  --ink:        #23201B;   /* warm near-black */
  --ink-soft:   #57503f;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  --maxw: 1240px;
  --measure: 62ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --shadow: 0 30px 60px -30px rgba(26,43,33,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---- Typography ---- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--green);
  font-optical-sizing:auto;
}
h2{ font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); }
h3{ font-size:clamp(1.3rem, 1.05rem + 1vw, 1.7rem); font-weight:540; }
p{ margin:0 0 1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
  margin:0 0 1rem;
  display:inline-block;
}
.lead{ font-size:clamp(1.1rem,1rem + .6vw,1.4rem); color:var(--ink-soft); }
.quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
}

/* ---- Layout ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(3.5rem, 8vw, 8rem); }
.section--cream{ background:var(--cream); }
.section--sand{ background:var(--cream-2); }
.section--green{ background:var(--green); color:var(--cream); }
.section--green h2{ color:#fff; }
.section--green .lead{ color:rgba(245,239,227,.8); }
.center{ text-align:center; }
.center p{ margin-inline:auto; }

/* ---- Navigation ---- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(26,43,33,.82);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  color:var(--cream);
  border-bottom:1px solid rgba(219,169,104,.18);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; min-height:70px; }
.nav__brand{
  font-family:var(--font-display); font-weight:560;
  font-size:1.25rem; letter-spacing:.005em; color:var(--cream);
  display:flex; align-items:center; gap:.6rem;
}
.nav__brand img{ height:34px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.nav__links{ margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.nav__links a{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:rgba(245,239,227,.82); transition:color .2s;
}
.nav__links a:hover{ color:var(--gold-soft); }
.nav__lang{ display:flex; gap:.35rem; font-weight:700; }
.nav__lang a{ color:rgba(245,239,227,.6); }
.nav__lang a[aria-current="true"]{ color:var(--gold); }
.nav__toggle{ display:none; }
.nav__cta{ display:none; }
@media (max-width:860px){
  .nav__toggle{
    display:flex; align-items:center; justify-content:center; margin-left:auto;
    background:none; border:0; color:var(--cream);
    font-size:1.6rem; line-height:1; cursor:pointer; width:44px; height:44px; padding:0;
  }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--green-deep); flex-direction:column; align-items:stretch;
    gap:0; padding:.25rem var(--pad) 1.75rem; display:none;
    border-bottom:1px solid rgba(219,169,104,.2);
    box-shadow:0 30px 44px -22px rgba(0,0,0,.55);
  }
  .nav__links.open{ display:flex; animation:menuIn .28s var(--ease); }
  .nav__links > a{
    font-family:var(--font-display); font-size:1.5rem; font-weight:520;
    text-transform:none; letter-spacing:0; color:var(--cream);
    padding:.9rem 0; border-bottom:1px solid rgba(245,239,227,.1);
  }
  .nav__links > a:hover, .nav__links > a:focus-visible{ color:var(--gold-soft); }
  .nav__links a.nav__cta{
    display:block; margin-top:1.2rem; text-align:center;
    background:var(--gold); color:var(--green-deep);
    font-family:var(--font-body); font-size:.9rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em;
    padding:1.05rem 1rem; border-radius:2px; border-bottom:0;
  }
  .nav__links a.nav__cta:hover{ background:var(--gold-soft); color:var(--green-deep); }
  .nav__lang{ margin-top:1.4rem; justify-content:center; gap:1.1rem; font-size:1.05rem; }
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:.9rem;
  letter-spacing:.02em; padding:.9rem 1.7rem; border-radius:2px; border:0; cursor:pointer;
  background:var(--gold); color:var(--green-deep);
  transition:transform .25s var(--ease), background .25s, box-shadow .25s;
}
.btn:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(200,134,60,.7); }
.btn--ghost{
  background:transparent; color:var(--cream);
  border:1px solid rgba(245,239,227,.5); box-shadow:none;
}
.btn--ghost:hover{ background:rgba(245,239,227,.08); border-color:var(--cream); transform:translateY(-2px); }
.link-more{
  font-weight:700; letter-spacing:.02em; color:var(--green);
  border-bottom:2px solid var(--gold); padding-bottom:2px;
}
.section--green .link-more{ color:var(--gold-soft); }

/* ---- Hero ---- */
.hero{
  position:relative; min-height:min(92vh, 900px);
  display:grid; align-items:end;
  color:var(--cream); overflow:hidden; isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 42%;
  transform:scale(1.04); animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(26,43,33,.55) 0%, rgba(26,43,33,.08) 32%, rgba(26,43,33,.18) 55%, rgba(26,43,33,.85) 100%);
}
.hero__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(3rem,7vw,6rem); text-align:center;
}
/* Logo as a crafted crest: green emblem on a warm paper medallion with a hairline seal ring */
.hero__crest{
  display:grid; place-items:center; position:relative; isolation:isolate;
  width:clamp(158px, 17vw, 236px); aspect-ratio:1;
  margin:0 auto clamp(1.3rem, 3vw, 2.1rem);
  background:radial-gradient(circle at 50% 38%, #FBF7EE 0%, var(--cream) 72%, #EDE4D2 100%);
  border-radius:50%;
  box-shadow:0 30px 60px -22px rgba(20,30,24,.7), 0 2px 6px rgba(20,30,24,.25);
  opacity:0; animation:rise .9s var(--ease) .2s forwards;
}
.hero__crest::after{
  content:""; position:absolute; inset:clamp(8px,1.1vw,12px); border-radius:50%;
  border:1.5px solid rgba(200,134,60,.55);
}
.hero__logo{ width:74%; height:74%; object-fit:contain; display:block; }
.hero__eyebrow{ color:#ecc48b; text-shadow:0 2px 16px rgba(0,0,0,.6); opacity:0; animation:rise .9s var(--ease) .35s forwards; }
.hero__quote{
  font-size:clamp(1.6rem, 1rem + 3.4vw, 3.4rem);
  max-width:20ch; margin:.4rem auto 0; color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
  opacity:0; animation:rise 1s var(--ease) .5s forwards;
}
.hero__actions{ margin-top:clamp(1.5rem,4vw,2.5rem); display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:rise 1s var(--ease) .7s forwards; }
.hero__scroll{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  width:1px; height:46px; background:linear-gradient(rgba(245,239,227,0),rgba(245,239,227,.8));
  z-index:1;
}
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
/* Small screens: center the hero, enlarge the crest, stack CTAs full-width */
@media (max-width:560px){
  .hero{ align-items:center; }
  .hero__inner{ padding-top:2rem; padding-bottom:2.5rem; }
  .hero__crest{ width:min(64vw, 250px); margin-bottom:clamp(1.6rem,5vw,2.4rem); }
  .hero__actions{ flex-direction:column; align-items:stretch; width:min(340px,100%); margin-inline:auto; }
  .hero__actions .btn{ justify-content:center; padding-block:1rem; }
}

/* ---- Editorial split (image + text) ---- */
.split{ display:grid; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (min-width:820px){
  .split{ grid-template-columns:1.05fr 1fr; }
  .split--reverse .split__media{ order:2; }
}
.split__media{ position:relative; }
.split__media img{
  width:100%; height:clamp(360px, 54vh, 580px); object-fit:cover;
  border-radius:3px; box-shadow:var(--shadow); display:block;
}
/* wide/landscape variant: show the full landscape frame (e.g. group photo) */
.split__media--wide img{ aspect-ratio:3/2; height:auto; min-height:0; max-height:none; }
.split__body{ max-width:56ch; }

/* Map (Anfahrt) — framed like the other split media */
.map-frame{
  position:relative; z-index:1;
  height:clamp(360px, 52vh, 560px); border-radius:3px; overflow:hidden;
  box-shadow:0 42px 70px -32px rgba(26,43,33,.6);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
.anfahrt__route{ margin-top:1.6rem; }

/* small caption tag on images */
.imgtag{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(26,43,33,.72); color:var(--cream);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:.4rem .8rem; border-radius:2px; backdrop-filter:blur(4px);
}

/* ---- Full-bleed image band with overlay statement ---- */
.band{
  position:relative; min-height:clamp(420px,60vh,640px);
  display:grid; place-items:center; text-align:center;
  color:var(--cream); overflow:hidden; isolation:isolate;
}
.band__media{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,43,33,.5), rgba(26,43,33,.62)); }
.band__inner{ padding:clamp(3rem,8vw,7rem) var(--pad); max-width:26ch; }
.band__inner .quote{ font-size:clamp(1.8rem,1rem + 4vw,3.6rem); color:#fff; }
.band__inner .eyebrow{ color:var(--gold-soft); }
.band__author{ margin-top:1.4rem; font-family:var(--font-body); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); }
.band--zitat .band__inner{ max-width:34ch; }
.band--zitat .quote{ font-size:clamp(1.5rem,1rem + 2.6vw,2.9rem); }

/* ---- Rooms ---- */
.rooms{ display:grid; gap:0; margin-top:2.5rem; border-top:1px solid var(--sand); }
.room{
  display:grid; gap:.35rem 2rem; padding:1.6rem 0; border-bottom:1px solid var(--sand);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .room{ grid-template-columns:auto 1fr auto; align-items:baseline; } }
.room__name{ font-family:var(--font-display); font-size:1.35rem; color:var(--green); font-weight:540; }
.room__beds{ color:var(--ink-soft); }
.room__meta{ color:var(--gold); font-weight:700; letter-spacing:.02em; }
.price-note{ margin-top:1.5rem; color:var(--ink-soft); font-size:.95rem; }
.price-strong{ color:var(--green); font-family:var(--font-display); font-size:1.15rem; }

/* Rooms visual: fixed landscape frame in the photos' own 3:2 ratio (nothing is cropped or
   stretched). Only the image content cross-fades on hover/focus/tap. The image column is
   widened so the frame's height lines up with the category list — compact and gap-free. */
.rooms-visual{ position:relative; aspect-ratio:3 / 2; }
@media (min-width:820px){
  #uebernachten .split{ grid-template-columns:1.4fr 1fr; align-items:center; }
}
#uebernachten .rooms-visual img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  border-radius:3px; box-shadow:0 42px 70px -32px rgba(26,43,33,.6);
  opacity:0; transition:opacity .5s ease;
}
#uebernachten .rooms-visual img.is-active{ opacity:1; }

/* compact room rows: name + count on one line, description beneath */
#uebernachten .rooms{ margin-top:1.75rem; }
#uebernachten .room{
  grid-template-columns:1fr auto; column-gap:1.5rem; row-gap:.15rem;
  align-items:baseline; padding:1rem 0;
}
#uebernachten .room__name{ grid-column:1; grid-row:1; }
#uebernachten .room__meta{ grid-column:2; grid-row:1; text-align:right; }
#uebernachten .room__beds{ grid-column:1 / -1; grid-row:2; font-size:.95rem; }

/* interactive room rows */
.room[data-target]{ position:relative; cursor:pointer; transition:background-color .3s ease; }
.room[data-target]::before{
  content:""; position:absolute; left:-1rem; top:.95rem; bottom:.95rem; width:3px;
  background:var(--gold); border-radius:2px;
  opacity:0; transform:scaleY(.35); transform-origin:top;
  transition:opacity .3s ease, transform .3s ease;
}
.room[data-target].is-active::before,
.room[data-target]:hover::before,
.room[data-target]:focus-visible::before{ opacity:1; transform:scaleY(1); }
.room[data-target] .room__name{ transition:color .3s ease; }
.room[data-target].is-active .room__name,
.room[data-target]:hover .room__name{ color:var(--gold); }
.room[data-target]:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:3px; }

/* per-room inline photo — hidden on desktop (the swap frame handles it) */
.room__photo{ display:none; }

/* Mobile: no hover, so give each category its own photo card (everything visible) */
@media (max-width:819px){
  #uebernachten .rooms-visual{ display:none; }
  #uebernachten .rooms{ margin-top:1.75rem; border-top:0; }
  #uebernachten .room{
    grid-template-columns:1fr auto;
    grid-template-areas:"photo photo" "name meta" "desc desc";
    column-gap:1rem; row-gap:.15rem;
    padding:0 0 1.9rem; margin-bottom:1.9rem; border-bottom:1px solid var(--sand);
  }
  #uebernachten .rooms .room:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0; }
  .room__photo{
    display:block; grid-area:photo; width:100%; aspect-ratio:3/2; object-fit:cover;
    border-radius:3px; margin-bottom:1rem; box-shadow:0 22px 44px -26px rgba(26,43,33,.55);
  }
  #uebernachten .room__name{ grid-area:name; align-self:baseline; }
  #uebernachten .room__meta{ grid-area:meta; align-self:baseline; text-align:right; }
  #uebernachten .room__beds{ grid-area:desc; }
  /* no swap interaction on touch → drop the pointer affordances */
  .room[data-target]{ cursor:default; }
  .room[data-target]::before{ display:none; }
  .room[data-target].is-active .room__name{ color:var(--green); }
}

/* ---- Tours ---- */
.tours{ list-style:none; padding:0; margin:1.75rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.1rem 2rem; }
.tour{ display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.14); }
.section--cream .tour, .section--sand .tour{ border-bottom-color:var(--sand); }
.tour__name{ font-weight:600; }
.tour__time{ color:var(--gold); font-weight:600; white-space:nowrap; }

/* ---- Info rows (hours / directions) ---- */
.info-line{ font-family:var(--font-display); font-size:clamp(1.15rem,1rem + .8vw,1.5rem); line-height:1.5; }
.info-line strong{ color:var(--gold-soft); font-weight:600; }

/* ---- Gallery (uniform grid — clean bottom edge) ---- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (min-width:600px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .gallery{ grid-template-columns:repeat(4,1fr); } }
.gallery a{ display:block; overflow:hidden; border-radius:3px; aspect-ratio:4/3; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery a:hover img{ transform:scale(1.06); }

/* ---- Aktuelles ---- */
.posts{ display:grid; gap:2rem; margin-top:2.5rem; }
@media (min-width:700px){ .posts{ grid-template-columns:1fr 1fr; } }
.post img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:3px; margin-bottom:1rem; }
.post__date{ color:var(--gold); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.post h3 a:hover{ color:var(--gold); }

/* ---- Contact / Form ---- */
.contact-grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media (min-width:820px){ .contact-grid{ grid-template-columns:1.2fr .8fr; } }
.form label{ display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:rgba(245,239,227,.7); margin:0 0 .4rem; }
.form .field{ margin-bottom:1.15rem; }
.form input, .form select, .form textarea{
  width:100%; font:inherit; color:var(--cream);
  background:rgba(255,255,255,.06); border:1px solid rgba(245,239,227,.22);
  border-radius:2px; padding:.8rem .9rem;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(255,255,255,.1); }
.form option{ color:#000; }
.form .check{ display:flex; gap:.6rem; align-items:flex-start; text-transform:none; letter-spacing:0; font-weight:400;
  color:rgba(245,239,227,.85); font-size:.9rem; }
.form .check input{ width:auto; margin-top:.25rem; }
.form-note{ padding:1rem 1.2rem; border-radius:2px; margin-bottom:1rem; }
.form-note--ok{ background:var(--gold); color:var(--green-deep); font-weight:700; }
.form-note--err{ background:rgba(219,169,104,.15); color:var(--gold-soft); border:1px solid rgba(219,169,104,.4); }
.contact-card p{ line-height:1.9; }
.contact-card a{ border-bottom:1px solid var(--gold); }

/* ---- Footer ---- */
.footer{ background:var(--green-deep); color:rgba(245,239,227,.82); padding-block:clamp(3rem,6vw,4.5rem); }
.footer__grid{ display:grid; gap:2.5rem; }
@media (min-width:720px){ .footer__grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer img.logo{ height:74px; width:auto; filter:brightness(0) invert(1); opacity:.9; margin-bottom:1rem; }
.footer h4{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--gold); margin:0 0 .9rem; }
.footer a{ color:rgba(245,239,227,.82); }
.footer a:hover{ color:var(--gold-soft); }
.footer__legal{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(245,239,227,.12);
  font-size:.82rem; color:rgba(245,239,227,.5); display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:space-between; }

/* ---- Subpage header ---- */
.page-head{ background:var(--green); color:var(--cream); padding-block:clamp(3rem,7vw,6rem); text-align:center; }
.page-head h1{ color:#fff; font-family:var(--font-display); font-size:clamp(2.2rem,1.5rem + 3vw,4rem); }
.prose{ max-width:64ch; margin-inline:auto; }
.prose h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); margin-top:2em; }

/* ============================================================
   Richness layer — texture, depth, motion, craft
   ============================================================ */

/* Warm paper texture on the plain light surfaces */
.section--cream, .section--sand, .page-head{ position:relative; isolation:isolate; }
.section--cream::after, .section--sand::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../images/bg-kraft.png'); background-size:560px;
  opacity:.14; mix-blend-mode:multiply;
}
.section--sand::after{ opacity:.20; }
.section--cream > .wrap, .section--sand > .wrap{ position:relative; z-index:1; }
.section--sand{ border-top:1px solid rgba(200,134,60,.16); border-bottom:1px solid rgba(200,134,60,.16); }

/* Warm vignette + hairline on the deep green sections */
.section--green{ position:relative; isolation:isolate; }
.section--green::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 15% 10%, rgba(219,169,104,.16), transparent 55%);
}
.section--green > .wrap{ position:relative; z-index:1; }

/* Layered image: soft gold accent block behind + warm shadow (depth) */
.split__media{ isolation:isolate; }
.split__media::before{
  content:""; position:absolute; z-index:0;
  inset:auto -16px -16px auto; width:64%; height:74%; border-radius:3px;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold)); opacity:.45;
}
.split--reverse .split__media::before{ inset:auto auto -16px -16px; }
.split__media img{ position:relative; z-index:1; box-shadow:0 42px 70px -32px rgba(26,43,33,.6); }
.imgtag{ z-index:2; }

/* Decorative gold rule before left-aligned section eyebrows */
.split__body .eyebrow{ display:flex; align-items:center; }
.split__body .eyebrow::before{
  content:""; width:30px; height:2px; margin-right:.8rem; background:currentColor; opacity:.65;
}

/* Drop cap opens the story */
#ueber-uns .lead > p:first-child::first-letter{
  float:left; font-family:var(--font-display); font-weight:600;
  font-size:3.5em; line-height:.72; padding:.06em .14em 0 0; color:var(--gold);
}

/* Richer section rhythm — a touch more air + warmer headings */
h2{ text-wrap:balance; }
.quote{ text-wrap:balance; }

/* Scroll-reveal (progressive enhancement — only applied when JS adds the class) */
.is-reveal{ opacity:0; transform:translateY(28px); }
.is-reveal.is-visible{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }

/* Parallax media need a little overscan so movement doesn't reveal edges */
.hero__media, .band__media{ top:-8%; height:116%; will-change:transform; }

/* ---- Motion / a11y ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .hero__media, .band__media{ transform:none !important; top:0; height:100%; }
  .is-reveal{ opacity:1 !important; transform:none !important; }
}

/* Video (Drohnen-Flug Aletsch Arena) — responsive 16:9 frame */
.video-frame{
  position:relative; aspect-ratio:16/9; max-width:1000px; margin-inline:auto;
  border-radius:3px; overflow:hidden;
  box-shadow:0 42px 70px -32px rgba(26,43,33,.6);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Visually hidden (SEO/a11y) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }