/*
Theme Name: Alpenglow
Description: Custom theme for skiinfo.ch — pastel dawn palette, Bodoni Moda + Albert Sans, altitude-profile resort directory.
Author: skiinfo.ch
Version: 1.0
Text Domain: alpenglow
*/

@font-face{
  font-family:'Albert Sans'; font-weight:400 700; font-style:normal; font-display:swap;
  src:url('assets/fonts/albertsans.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:400 700; font-style:normal; font-display:swap;
  src:url('assets/fonts/bodonimoda.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:500; font-style:italic; font-display:swap;
  src:url('assets/fonts/bodonimoda-italic.woff2') format('woff2');
}

:root{
  --sky:#e9eff3;
  --paper:#faf7f2;
  --ink:#33465a;
  --ink-soft:#5b7086;
  --blush:#e8a99c;
  --blush-deep:#c9765f;
  --lavender:#a99bc4;
  --amber:#cf9a56;
  --line:rgba(51,70,90,0.16);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--sky); color:var(--ink);
  font-family:'Albert Sans',Arial,sans-serif; line-height:1.65;
}
h1,h2,h3,h4,.serif{font-family:'Bodoni Moda',Georgia,serif;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit}
:focus-visible{outline:2px solid var(--blush-deep); outline-offset:2px;}
.screen-reader-text{position:absolute; left:-9999px;}

.note{
  font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
  color:var(--blush-deep); opacity:0.9; margin-top:8px; display:block;
}

/* HEADER */
header.site{display:flex; align-items:center; justify-content:space-between; padding:22px 6vw; background:var(--paper); border-bottom:1px solid var(--line);}
header.site .logo{display:flex; align-items:center; gap:9px; font-family:'Bodoni Moda',Georgia,serif; font-size:1.3rem; font-weight:700; color:var(--ink); text-decoration:none;}
header.site .logo-mark{flex:none;}
nav.site{display:flex; align-items:center;}
nav.site ul{list-style:none; display:flex; margin:0; padding:0;}
nav.site a{color:var(--ink); text-decoration:none; margin-left:34px; position:relative; font-size:0.8rem; letter-spacing:0.09em; text-transform:uppercase; font-weight:600; padding-bottom:5px; display:inline-block;}
nav.site a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background-image:linear-gradient(90deg, var(--blush-deep) 55%, transparent 0%); background-size:7px 2px; background-repeat:repeat-x;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
nav.site a:hover::after, nav.site .current-menu-item a::after{transform:scaleX(1)}

.nav-toggle{display:none; flex:none; width:32px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:space-between;}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

/* below this width the 3 nav items no longer fit the header in one row —
   collapse into a toggled full-width dropdown instead of letting it overflow */
@media (max-width:640px){
  .nav-toggle{display:flex;}
  nav.site{position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;}
  nav.site.is-open{max-height:300px;}
  nav.site ul{flex-direction:column; padding:6px 6vw 18px;}
  nav.site a{margin-left:0; padding:12px 0; width:100%;}
  header.site{position:relative; flex-wrap:wrap;}
}

/* HERO */
.hero{display:grid; grid-template-columns:1fr 1fr; min-height:72vh; background:var(--sky);}
.hero-text{padding:0 5vw; display:flex; flex-direction:column; justify-content:center;}
.kicker{font-size:0.78rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--blush-deep); font-weight:700; margin:0 0 20px;}
h1.hero-h1{font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.08; margin:0 0 22px; font-weight:600;}
h1.hero-h1 .it{font-style:italic; font-weight:500; color:var(--blush-deep);}
.hero-dek{max-width:44ch; font-size:1.08rem; color:var(--ink-soft); margin:0 0 30px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{font-weight:700; font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase; padding:14px 26px; text-decoration:none; display:inline-block; border-radius:1px;}
.btn.primary{background:var(--ink); color:var(--paper);} .btn.ghost{border:1.5px solid var(--ink); color:var(--ink);}
.hero-photo-wrap{position:relative; overflow:hidden;}
.hero-photo{height:100%; width:100%; min-height:420px; position:relative; overflow:hidden;
  clip-path:polygon(0% 22%,6% 12%,12% 26%,19% 6%,27% 24%,35% 4%,45% 20%,54% 9%,63% 27%,73% 11%,83% 23%,92% 7%,100% 18%,100% 100%,0% 100%);}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}

section{padding:70px 6vw;}
section.directory{background:var(--paper);}
h1.section-h, h2.section-h{font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 10px; font-weight:600;}
.section-sub{color:var(--ink-soft); font-size:0.95rem; margin:0 0 10px;}

/* Outer box for every hub-page section (homepage extras, magazin, skigebiete
   archive) — 1400px matches .mountain-wrap's own width. Grids (cards/postcards)
   are direct children of this, at full width. */
.section-inner{max-width:1400px; margin:0 auto;}
/* Text content (heading, subheading, intro prose, FAQ) instead sits in its own
   centered, deliberately wider-than-reading-width column — not stretched to
   match the grid's edges, just given real presence instead of a cramped ch-cap. */
.intro-col{max-width:920px; margin:0 auto;}
.directory-intro{margin:0 0 30px;}
.directory-intro p{color:var(--ink-soft); font-size:0.98rem; line-height:1.7;}
.intro-col h3.piste-bar-heading{margin-top:36px;}
.intro-col > p{color:var(--ink-soft); font-size:0.98rem; line-height:1.7;}

/* Resort flip-cards — /skigebiete/ directory. Hover/focus flips on desktop;
   a click on the front toggles a .flipped class for touch, since touch has
   no hover state. The back's CTA link is a real <a>, not the whole card, so
   the tap-to-flip and tap-to-navigate gestures never collide. */
.resort-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin:44px auto 0;}
@media (max-width:960px){.resort-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.resort-cards{grid-template-columns:1fr;}}
.flip-card{perspective:1400px; height:290px; outline:none;}
.flip-card-inner{position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;}
.flip-card:hover .flip-card-inner, .flip-card:focus-within .flip-card-inner, .flip-card.flipped .flip-card-inner{transform:rotateY(180deg);}
.flip-card-front, .flip-card-back{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:2px; overflow:hidden;}
.flip-card-front{background:var(--ink); cursor:pointer;}
.flip-card-front img{width:100%; height:100%; object-fit:cover; opacity:.85;}
.flip-card-front-label{position:absolute; left:0; right:0; bottom:0; padding:16px 18px; background:linear-gradient(180deg, transparent, rgba(51,70,90,0.8));}
.flip-card-front-label .kicker{color:var(--blush); display:block; font-size:0.7rem; margin-bottom:2px;}
.flip-card-front-label h3{margin:0; font-size:1.12rem; color:var(--paper);}
.flip-card-back{background:var(--paper); border:1px solid var(--line); transform:rotateY(180deg); padding:22px; display:flex; flex-direction:column;}
.flip-card-back h3{margin:0 0 16px; font-size:1.08rem;}
.flip-stats{list-style:none; margin:0 0 auto; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 10px;}
.flip-stats li{display:flex; flex-direction:column;}
.flip-stats strong{font-family:'Bodoni Moda',Georgia,serif; font-size:1.15rem;}
.flip-stats strong.small{font-family:'Albert Sans',Arial,sans-serif; font-size:0.82rem; font-weight:600;}
.flip-stats span{font-size:0.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px;}
.flip-cta{align-self:flex-start; font-weight:700; font-size:0.82rem; text-decoration:none; color:var(--blush-deep); border-bottom:1px solid var(--blush-deep); padding-bottom:2px;}

/* MOUNTAIN PROFILE — procedural alpine scene (canvas) + real-data elevation profile (svg) */
.mountain-scroller{overflow-x:auto; position:relative;}
.swipe-hint{display:none;}
@media (max-width:1000px){
  /* below this width .mountain-wrap's min-width:960px overflows and the
     scroller becomes swipeable — nothing else on the page hints at that,
     so show a small fading badge until the user actually scrolls it. */
  .swipe-hint{display:flex; align-items:center; gap:6px; position:sticky; left:0; width:fit-content;
    margin:10px 0 0 6vw; padding:7px 14px; background:var(--ink); color:var(--paper); font-size:0.72rem;
    font-weight:600; letter-spacing:0.03em; border-radius:20px; opacity:0.92; transition:opacity .3s ease;
    pointer-events:none;}
  .swipe-hint.is-hidden{opacity:0;}
  .swipe-hint-arrow{display:inline-block; animation:swipe-nudge 1.4s ease-in-out infinite;}
}
@keyframes swipe-nudge{0%,100%{transform:translateX(0);} 50%{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){.swipe-hint-arrow{animation:none;}}
.mountain-wrap{position:relative; width:100%; max-width:1400px; min-width:960px; margin:0 auto; aspect-ratio:1400/760;}
.mountain-wrap canvas, .mountain-wrap svg{position:absolute; top:0; left:0; width:100%; height:100%;}
.mountain-wrap svg{overflow:visible;}
.mountain-wrap a{cursor:pointer;}
.profile-dot{fill:var(--blush-deep); stroke:var(--paper); stroke-width:2.5; transition:r .18s ease;}
.profile-dot-core{fill:var(--paper); pointer-events:none;}
.mountain-wrap a:hover .profile-dot, .mountain-wrap a:focus-visible .profile-dot{r:9;}
.mountain-wrap a:hover .profile-label-name, .mountain-wrap a:focus-visible .profile-label-name{fill:var(--blush-deep);}
.profile-stem{stroke:var(--blush-deep); stroke-width:1.4; stroke-dasharray:1,5; stroke-linecap:round; opacity:0.55;}
.profile-grid{stroke:var(--ink); stroke-width:1; stroke-dasharray:1,7; stroke-linecap:round; opacity:0.22;}
.profile-grid-label{font-family:'Albert Sans',Arial,sans-serif; font-size:10.5px; fill:var(--ink); opacity:0.55;}
.profile-label-name{font-family:'Bodoni Moda',Georgia,serif; font-weight:600; fill:var(--ink); font-size:13.5px;
  paint-order:stroke; stroke:var(--paper); stroke-width:3.5px; stroke-linejoin:round;}
.profile-label-alt{font-family:'Albert Sans',Arial,sans-serif; fill:var(--ink-soft); font-size:11px; letter-spacing:0.02em;
  paint-order:stroke; stroke:var(--paper); stroke-width:3px; stroke-linejoin:round;}
.profile-col{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .profile-col{opacity:0; transform:translateY(10px); animation:profileRise .6s cubic-bezier(.2,.7,.3,1) forwards;}
  #alpenglow-profile{opacity:0; animation:profileFade .9s ease .15s forwards;}
  @keyframes profileRise{to{opacity:1; transform:none;}}
  @keyframes profileFade{to{opacity:1;}}
}
.mountain-figcaption{max-width:1400px; margin:0 auto; padding:14px 6vw 0; font-size:0.8rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.mountain-figcaption .key{width:10px; height:10px; border-radius:50%; background:var(--blush-deep); border:2px solid var(--paper); box-shadow:0 0 0 1px rgba(51,70,90,0.15); flex:none;}

/* RESORT SINGLE PAGE */
.resort-hero{position:relative; min-height:46vh; overflow:hidden; display:flex; align-items:flex-end;}
.resort-hero img.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.resort-hero::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(51,70,90,0.05), rgba(51,70,90,0.65));}
.resort-hero-inner{position:relative; z-index:2; padding:40px 6vw; color:var(--paper);}
.resort-hero .kicker{color:var(--blush);}
.resort-hero h1{color:var(--paper); font-size:clamp(2rem,4.5vw,3.2rem); margin:0;}
.resort-stats{display:flex; gap:0; flex-wrap:wrap; background:var(--paper); border-bottom:1px solid var(--line);}
.resort-stat{flex:1; min-width:140px; padding:22px 24px; border-right:1px solid var(--line); text-align:center;}
.resort-stat:last-child{border-right:none;}
.resort-stat .v{font-family:'Bodoni Moda',Georgia,serif; font-size:1.5rem; font-weight:600; display:block;}
.resort-stat .l{font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; display:block;}
/* resort intro + sidebar sit in one wide grid so the page doesn't read as a
   narrow text column stranded in empty space next to the full-width hero/grid below */
.resort-content-grid{max-width:calc(1100px + 12vw); margin:0 auto; padding:56px 6vw; display:grid;
  grid-template-columns:1.6fr 1fr; gap:12px 56px; align-items:start; box-sizing:border-box;}
.resort-intro{font-size:1.05rem;}
.resort-intro p{margin:0 0 20px;}
.resort-intro h2{font-size:1.5rem;}
.resort-sidebar{background:var(--paper); border:1px solid var(--line); padding:28px; align-self:start; position:sticky; top:24px;}
.resort-sidebar h3{font-family:'Bodoni Moda',Georgia,serif; font-size:1.05rem; margin:0 0 12px; font-weight:600;}
.resort-sidebar .attraction{font-size:0.92rem; color:var(--ink-soft); line-height:1.65; margin:0 0 22px;}
.resort-sidebar .cta-row{flex-direction:column;}
.resort-sidebar .webcam-cta{justify-content:center; width:100%; box-sizing:border-box;}
.resort-sidebar .note{margin-top:10px;}
@media (max-width:860px){
  .resort-content-grid{grid-template-columns:1fr;}
}
.webcam-cta{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); text-decoration:none;
  padding:16px 28px; font-weight:700; font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; margin:0;}
.webcam-cta:hover{background:var(--blush-deep);}
.webcam-cta.official{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.webcam-cta.official:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* piste difficulty bar */
.piste-bar-wrap{max-width:900px; margin:0 auto; padding:0 6vw;}
.piste-bar-heading{font-size:1.05rem; font-weight:600; margin:0 0 6px; color:var(--ink);}
.piste-bar{display:flex; height:14px; border-radius:2px; overflow:hidden; margin:18px 0 8px; background:var(--line);}
.piste-seg{display:block; height:100%;}
.piste-seg.blue{background:#4a7fc9;}
.piste-seg.red{background:#c9765f;}
.piste-seg.black{background:#33465a;}
.piste-legend{display:flex; gap:20px; flex-wrap:wrap; font-size:0.82rem; color:var(--ink-soft); margin-bottom:10px;}
.piste-legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}
.piste-legend .dot.blue{background:#4a7fc9;}
.piste-legend .dot.red{background:#c9765f;}
.piste-legend .dot.black{background:#33465a;}

/* resort info grid — scannable fact blocks, only rendered when content exists.
   Fixed column counts (not auto-fit) so 8 blocks always land in clean, even rows
   instead of an unpredictable 3+3+2 leftover row. */
.info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:1100px; margin:0 auto;}
.info-block{background:var(--paper); padding:28px 26px;}
.info-block img.icon{width:72px; height:72px; border-radius:12px; margin-bottom:16px; display:block;}
.info-block h3{font-family:'Bodoni Moda',Georgia,serif; font-size:1.05rem; margin:0 0 10px; font-weight:600;}
.info-block p{font-size:0.92rem; color:var(--ink-soft); margin:0; line-height:1.6;}
@media (max-width:960px){.info-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:540px){.info-grid{grid-template-columns:1fr;}}

/* FAQ accordion — native <details>, no JS. Doubles as FAQPage schema source. */
/* Same box model as .resort-content-grid so the FAQ's content edge lines up with
   whatever wide grid/box sits above it on the page, wherever it's a top-level
   sibling section (resort pages, homepage, magazin, skigebiete archive). When
   nested inside a narrower column instead (article body text), this max-width
   is simply unreachable and the rule is a harmless no-op. */
.faq-block{max-width:calc(1100px + 12vw); margin:0 auto; padding:56px 6vw 60px; box-sizing:border-box;}
/* Nested inside .section-inner (hub pages), the parent already provides the
   correct edge — don't let faq-block's own narrower resort-page cap override it. */
.intro-col .faq-block{max-width:none; margin:0; padding:56px 0 60px;}
.faq-item p{max-width:75ch;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 30px 20px 0; position:relative;
  font-family:'Bodoni Moda',Georgia,serif; font-size:1.05rem; font-weight:600; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; position:absolute; right:4px; top:18px; font-size:1.3rem; font-family:Arial,sans-serif;
  color:var(--blush-deep); font-weight:400; transition:transform .18s ease;
}
.faq-item[open] summary::after{content:'–';}
.faq-item p{margin:0 0 22px; padding-right:30px; font-size:0.94rem; color:var(--ink-soft); line-height:1.7;}
.resort-nearby{background:var(--paper); padding:50px 6vw;}
.resort-nearby ul{list-style:none; padding:0; display:flex; gap:14px; flex-wrap:wrap;}
.resort-nearby a{border:1px solid var(--line); padding:10px 18px; text-decoration:none; font-size:0.85rem; font-weight:600;}
.resort-nearby a:hover{border-color:var(--blush-deep); color:var(--blush-deep);}

/* MAGAZINE / POSTCARDS */
section.magazin{background:var(--sky);}
/* capped at 3-cards-per-row's width (270px cards) so widening .section-inner
   doesn't silently drift this to 4-per-row and leave an orphan on the last row */
.mag-grid{display:flex; gap:34px; flex-wrap:wrap; justify-content:center; padding-top:10px; max-width:900px; margin:0 auto;}
.postcard{background:var(--paper); width:270px; padding:14px 14px 20px; box-shadow:0 10px 26px rgba(51,70,90,0.14); position:relative; text-decoration:none; color:var(--ink); display:block;}
.postcard:nth-child(3n+1){transform:rotate(-2.2deg);} .postcard:nth-child(3n+2){transform:rotate(1.6deg);} .postcard:nth-child(3n){transform:rotate(-0.8deg);}
.postcard:hover{transform:rotate(0deg) translateY(-4px); transition:transform .25s ease; z-index:2;}
.postcard-photo{height:170px; overflow:hidden; border:1px solid var(--line); position:relative;}
.postcard-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.postcard-corner{position:absolute; width:26px; height:26px; background:var(--paper); clip-path:polygon(0 0,100% 0,0 100%); box-shadow:2px 2px 4px rgba(51,70,90,0.15);}
.postcard-corner.tl{top:6px; left:6px;} .postcard-corner.br{bottom:20px; right:6px; transform:rotate(180deg);}
.mag-eyebrow{font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--blush-deep); font-weight:700; margin:14px 0 6px;}
.mag-title{font-size:1.15rem; margin:0 0 8px; line-height:1.28; font-weight:600;}
.mag-dek{font-size:0.86rem; color:var(--ink-soft); margin:0;}

/* SINGLE ARTICLE */
.article-hero{min-height:38vh; overflow:hidden; position:relative; display:flex; align-items:flex-end;}
.article-hero img.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.article-hero::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(51,70,90,0.05), rgba(51,70,90,0.6));}
.article-hero-inner{position:relative; z-index:2; padding:36px 6vw; color:var(--paper); max-width:900px;}
.article-hero h1{color:var(--paper); font-size:clamp(1.8rem,3.6vw,2.6rem); margin:0 0 10px;}
.article-subhead{color:var(--paper); opacity:0.85; font-size:clamp(1rem,1.6vw,1.2rem); margin:0; font-weight:400;}
.article-meta{font-size:0.8rem; color:var(--blush); text-transform:uppercase; letter-spacing:0.06em;}
/* article + sidebar sit in one wide grid, same reasoning as the resort page:
   a lone 70ch text column looked stranded in empty space at desktop widths. */
.article-layout{max-width:1100px; margin:0 auto; padding:50px 6vw; display:grid;
  grid-template-columns:1.6fr 1fr; gap:12px 56px; align-items:start;}
.article-main{font-size:1.05rem;}
.article-main p{margin:0 0 20px;}
.article-sidebar{background:var(--paper); border:1px solid var(--line); padding:28px; align-self:start; position:sticky; top:24px;}
.article-sidebar h3{font-family:'Bodoni Moda',Georgia,serif; font-size:1.05rem; margin:0 0 14px; font-weight:600;}
.article-sidebar ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.article-sidebar a{font-size:0.92rem; color:var(--ink); text-decoration:none; line-height:1.5;}
.article-sidebar a:hover{color:var(--blush-deep);}
@media (max-width:860px){.article-layout{grid-template-columns:1fr;}}

/* STATIC PAGES (Über uns, Impressum, Datenschutz, Kontakt) */
/* width/centering: 1100px, matching .article-layout/.resort-content-grid so
   these standalone pages read at the same site-wide content width instead of
   the narrower .intro-col measure (that class stays 920px deliberately on
   the homepage/hub pages, where a full-width visual follows right after the
   intro — these static pages have nothing else, so a narrower column reads
   as empty/thin rather than as intentional restraint).
   page-body only adds what's unique to this template: vertical rhythm and
   the heading/paragraph spacing. */
.page-body{max-width:1100px; margin:0 auto; padding:60px 6vw 80px;}
.page-body h1{margin:0 0 30px;}
.page-body p{margin:0 0 20px; color:var(--ink-soft); font-size:0.98rem; line-height:1.7;}
/* Lead-paragraph treatment only for pages with a hero photo (editorial-style,
   e.g. Über uns) — a plain legal page's first line is a short label like
   "Angaben gemäss § 5 TMG:", not a narrative hook, so it must stay plain there. */
.page-hero + .page-body p:first-of-type{font-size:1.2rem; color:var(--ink-soft); line-height:1.6;}
.page-hero{height:280px; overflow:hidden; position:relative; margin-bottom:10px;}
.page-hero img{width:100%; height:100%; object-fit:cover; display:block;}
.page-body blockquote.pull-quote{margin:36px 0; padding:6px 0 6px 28px; border-left:3px solid var(--blush-deep);}
.page-body blockquote.pull-quote p{font-family:'Bodoni Moda',Georgia,serif; font-style:italic; font-size:1.35rem; color:var(--ink); line-height:1.5; margin:0;}
.page-body h2{font-size:1.35rem; margin:40px 0 14px;}
.page-body h3{font-size:1.1rem; margin:28px 0 10px;}
/* jump-nav box for longer legal pages (e.g. Datenschutz's numbered sections) */
.toc-jump{list-style:none; margin:0 0 40px; padding:22px 26px; background:var(--paper); border:1px solid var(--line); display:grid; gap:10px;}
.toc-jump a{color:var(--ink); text-decoration:none; font-size:0.92rem; font-weight:600;}
.toc-jump a:hover{color:var(--blush-deep);}

/* FOOTER */
footer.site{background:var(--ink); color:var(--sky); padding:48px 6vw 30px;}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; margin:0 0 40px;}
.footer-col h4{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--blush); margin:0 0 14px; font-weight:700;}
.footer-col a{display:block; color:rgba(233,239,243,0.8); text-decoration:none; font-size:0.9rem; margin-bottom:8px;}
.banner-frame{border:1px solid rgba(233,239,243,0.25); border-radius:4px; padding:18px; display:inline-block; max-width:100%;}
.banner-frame img{max-width:100%; display:block;}
.note-banner{color:var(--blush);}
.copyline{font-size:0.76rem; color:rgba(233,239,243,0.45); border-top:1px solid rgba(233,239,243,0.15); padding-top:20px;}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero-text{padding:60px 6vw 40px;}
  .hero-photo-wrap{min-height:320px;}
  .resort-stats{flex-direction:column;}
  .resort-stat{border-right:none; border-bottom:1px solid var(--line);}
}