/* ==========================================================================
   AlpenPura · Editorial facelift (Sept 2026)
   --------------------------------------------------------------------------
   Loaded on every page right after ap-refine.css. Direction approved by the
   owner on the prototype (prototype-editorial preview, 25 Sept 2026):
   flat Pine buttons, calmer and larger typography, more air, image heroes
   with a slow zoom and line-by-line text, scroll motion (js/ap-reveal.js)
   and a mobile booking bar (js/ap-bookbar.js).

   Note for the CI document: buttons are now flat Pine #1E2B1F with square
   corners (CI v1.0 still shows the brown gradient with 2px radius).

   EasyBooking widgets (#ebFrontEndFrame, #ebOffer, #ebAvailability*,
   #sstrip, #ssm) are never restyled here, except the Pine search button of
   the homepage quick search (#ssm .sb1), as on the approved prototype.
   To roll back: remove the <link> to this file (and the two scripts).
   ========================================================================== */

:root { --pine: #1E2B1F; }

/* ─── 1 · Buttons: flat, square, Pine / outline ─────────────────────── */
.btn-p, #nav .btn-p, #nav.solid .btn-p {
  background: var(--pine) !important;
  border: 1px solid var(--pine) !important;
  border-radius: 0 !important;
  padding: 13px 38px !important;
  letter-spacing: .22em !important;
  transition: background .35s, color .35s !important;
}
.btn-p:hover, #nav .btn-p:hover { background: transparent !important; color: var(--pine) !important; opacity: 1 !important; }
.btn-o { border-radius: 0 !important; padding: 12px 36px !important; letter-spacing: .22em !important; }
.btn-o:not([style*="color:rgba(255"]):not([style*="color:#fff"]) { border-color: var(--on-s) !important; color: var(--on-s) !important; }
/* outline buttons on dark photo bands stay light */
.btn-o[style*="color:rgba(255"], .btn-o[style*="color:#fff"] { border-color: rgba(255, 255, 255, .72) !important; color: #fff !important; }
.btn-g { border-radius: 0 !important; border-color: #fff !important; color: #fff !important; letter-spacing: .22em !important; }
/* Buttons styled inline with the old brown gradient (compare cards, CTAs) */
:is(a, button, div, span)[style*="linear-gradient(135deg,#86715A"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *),
:is(a, button, div, span)[style*="linear-gradient(135deg,var(--p-dim)"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *),
#ssm .sb1 {
  background: var(--pine) !important;
  border-radius: 0 !important;
}
/* Tablets: slimmer bar button */
@media (min-width: 768px) and (max-width: 1099px) { #nav .btn-p { padding: 13px 26px !important; } }

/* ─── 2 · Typography: larger section titles ─────────────────────────── */
/* Homepages (section titles carry .serif) */
section h2.serif:not(:where(#ebAvailability, #ebAvailabilityGams) *) { font-size: clamp(2rem, 3.4vw, 3rem) !important; }
/* Chalet, landing, booking pages: stand-alone section titles */
section h2[style*="font-size:clamp(1.8rem,3vw,2.6rem)"],
section h2[style*="font-size:clamp(1.8rem,4vw,2.8rem)"],
section h2[style*="font-size:clamp(1.6rem,3vw,2.4rem)"] { font-size: clamp(2rem, 3.4vw, 3rem) !important; line-height: 1.18 !important; }
section h2[style*="font-size:clamp(1.5rem,2.5vw,2rem)"],
section h2[style*="font-size:clamp(1.6rem,2.5vw,2.2rem)"],
section h2[style*="font-size:clamp(1.4rem,2.2vw,1.9rem)"] { font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important; line-height: 1.2 !important; }

/* ─── 3 · More air between sections ─────────────────────────────────── */
/* (one spacing rhythm for all sections: see section 11) */

/* ─── 4 · Motion keyframes ──────────────────────────────────────────── */
@keyframes apZoom { from { transform: scale(1); opacity: 1; } to { transform: scale(1.16); opacity: .86; } }
@keyframes apZoomSoft { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes apLine { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
:root { --ap-ease: cubic-bezier(.22, .61, .36, 1); }

/* ─── 5 · Homepage hero: text bottom-left, slow zoom, lines one by one ── */
#home { background: #1C1914 !important; }
#home .relative.z-10.text-center { position: absolute !important; left: 6vw; bottom: 14vh; text-align: left !important; max-width: 720px !important; margin: 0 !important; padding: 0 !important; }
#home h1 { font-size: clamp(2.2rem, 4.6vw, 4.2rem) !important; margin-bottom: 22px !important; }
#home .a3 { margin-left: 0 !important; margin-bottom: 30px !important; font-size: 1.05rem !important; letter-spacing: .04em; }
#home .a4 { justify-content: flex-start !important; }
#home > .absolute.inset-0 > img { animation: apZoom 25s linear both; transform-origin: 50% 40%; will-change: transform; }
#home h1.a2 { animation: none !important; }
#home h1 .ap-hl { display: block; animation: apLine 1.6s var(--ap-ease) .3s both; }
#home h1 .ap-hl + .ap-hl { animation-delay: 1s; }
#home .a3 { animation: apLine 1.6s var(--ap-ease) 1.55s both !important; }
#home .a4 { animation: apFade 1.4s ease 1.95s both !important; }

/* Homepage logo at the top of the page: larger and set lower */
#nav-logo { transition: top .3s ease; }
@media (max-width: 767px) { #nav.nav-top #nav-logo { top: calc(50% + 10px) !important; } }
@media (min-width: 768px) and (max-width: 1199px) { #nav.nav-top #nav-logo { top: calc(50% + 16px) !important; } }
@media (min-width: 1200px) {
  html #nav.nav-top #ll-img { height: 150px !important; }
  #nav.nav-top #nav-logo { top: calc(50% + 28px) !important; }
}

/* Homepage intro: photo bleeds to the right edge */
@media (min-width: 768px) {
  #chalet .md\:col-span-5.relative { margin-right: calc((100vw - min(100vw, 1280px)) / -2 - 48px); }
  #chalet .iz { aspect-ratio: 4 / 5; border-radius: 0 !important; }
}

/* Homepage stories: staggered, taller photos, no card */
.grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"] { border-radius: 0 !important; }
.grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"] > div:first-child { height: 420px !important; }
@media (min-width: 768px) { .grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"]:nth-child(2) { margin-top: 110px; } }
.grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"] h3 { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .2em !important; text-transform: uppercase; }

/* ─── 6 · Image heroes (landing pages, booking and enquiry pages) ─────── */
.ap-hero-img { background: #1C1914 !important; }
.ap-hero-img > img, .ap-hero-img > .absolute.inset-0 > img { animation: apZoom 25s linear both; transform-origin: 50% 45%; will-change: transform; }
.ap-hero-txt h1 .ap-hl { display: block; animation: apLine 1.6s var(--ap-ease) .35s both; }
.ap-hero-txt h1 .ap-hl + .ap-hl { animation-delay: .95s; }
.ap-hero-txt > p:first-child { animation: apFade 1.2s ease .15s both; color: rgba(249, 222, 195, .92) !important; }
.ap-hero-txt > h1 + * { animation: apLine 1.6s var(--ap-ease) 1.45s both; }
.ap-hero-txt > h1 + * + * { animation: apFade 1.4s ease 1.8s both; }
.ap-hero-txt > h1 + * + * + * { animation: apFade 1.4s ease 2s both; }
/* Landing pages: a taller, calmer hero */
section.ap-hero-img { min-height: 82vh !important; }
@media (max-width: 767px) { section.ap-hero-img { min-height: 78vh !important; } }
.ap-hero-img h1 { font-size: clamp(2.2rem, 4.6vw, 4rem) !important; }

/* ─── 7 · Chalet pages: split hero, photo bleeds to the right edge ───── */
.ap-hero-split .iz img { animation: apZoomSoft 25s linear both; transform-origin: 50% 45%; }
.ap-hero-split h1 { font-size: clamp(2.2rem, 3.3vw, 3.2rem) !important; line-height: 1.12 !important; margin-bottom: 24px !important; }
.ap-hero-split h1 .ap-hl { display: block; animation: apLine 1.6s var(--ap-ease) .3s both; }
.ap-hero-split h1 .ap-hl + .ap-hl { animation-delay: .85s; }
.ap-hero-split h1 .ap-hl + .ap-hl + .ap-hl { animation-delay: 1.4s; }
.ap-split-txt > p.ey { animation: apFade 1.2s ease .1s both; }
.ap-split-txt > h1 ~ * { animation: apFade 1.4s ease 1.7s both; }
.ap-split-txt > h1 + * { animation: apLine 1.6s var(--ap-ease) 1.35s both; }
@media (min-width: 1024px) {
  section.ap-hero-split { padding: 0 !important; }
  section.ap-hero-split > div {
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: min(calc(100vh - 72px), 920px);
  }
  section.ap-hero-split .ap-split-txt {
    align-self: center;
    padding: 96px clamp(40px, 4.5vw, 80px) 96px var(--ap-gutter);
  }
  section.ap-hero-split .iz { position: relative; aspect-ratio: auto !important; border-radius: 0 !important; min-height: 560px; }
  section.ap-hero-split .iz img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
}
@media (max-width: 1023px) {
  section.ap-hero-split { padding: 0 0 56px !important; }
  section.ap-hero-split > div { gap: 36px !important; }
  section.ap-hero-split .iz { order: -1; border-radius: 0 !important; aspect-ratio: 4 / 3.4 !important; }
  section.ap-hero-split .ap-split-txt { padding: 0 var(--ap-gutter); }
}

/* Reduced motion: no zoom, no sliding */
@media (prefers-reduced-motion: reduce) {
  #home > .absolute.inset-0 > img, .ap-hero-img > img, .ap-hero-img > .absolute.inset-0 > img, .ap-hero-split .iz img { animation: none !important; }
  #home h1 .ap-hl, #home .a3, #home .a4, .ap-hero-txt h1 .ap-hl, .ap-hero-txt > *, .ap-hero-split h1 .ap-hl, .ap-split-txt > * { animation: apFade .6s ease both !important; }
}

/* ─── 8 · Scroll motion (js/ap-reveal.js) ───────────────────────────── */
/* Start states only exist on elements the script has prepared */
html.ap-motion .ap-a { opacity: 0; transform: translate3d(0, 64px, 0); transition: opacity 1.2s var(--ap-ease), transform 1.3s cubic-bezier(.19, 1, .22, 1); }
html.ap-motion .ap-a.ap-fade { transform: none; transition: opacity 1.2s var(--ap-ease); }
html.ap-motion .ap-a.ap-in { opacity: 1; transform: none; }
html.ap-motion img.ap-img { scale: 1.12; transition: scale 1.9s cubic-bezier(.19, 1, .22, 1); }
html.ap-motion img.ap-img.ap-in { scale: 1; }
@media (max-width: 767px) { html.ap-motion .ap-a:not(.ap-fade):not(.ap-in) { transform: translate3d(0, 36px, 0); } }
@media print {
  html.ap-motion .ap-a { opacity: 1 !important; transform: none !important; }
  html.ap-motion img.ap-img { scale: 1 !important; }
}

/* ─── 9 · Mobile booking bar (js/ap-bookbar.js) ─────────────────────── */
.ap-bb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 250, 248, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #D1C4BA; transform: translateY(110%); transition: transform .35s; }
.ap-bb.on { transform: none; }
.ap-bb a { flex: 1; text-align: center; font: 500 11px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 15px 0; text-decoration: none; }
.ap-bb .o { border: 1px solid var(--on-s); color: var(--on-s); }
.ap-bb .s { background: var(--pine); color: #fff; border: 1px solid var(--pine); }
@media (min-width: 768px) { .ap-bb { display: none; } }
/* keep the cookie dialog and the mobile menu above the bar */
body:has(#mnav.open) .ap-bb { transform: translateY(110%); }

/* ─── 10 · Chalet Gams page: photos without any zoom (owner request, 29 Sept 2026)
   No slow zoom in the header, no zoom when a photo scrolls in, no zoom on hover. */
body.ap-no-zoom img:not(#home img) { animation: none !important; scale: 1 !important; transform: none !important; }
/* The homepages use the same class (owner request, 29 Sept 2026): only the
   header photo (#home) keeps its slow zoom, all other photos stay still. */

/* Homepage header photo (Chalet Gams exterior): a little more shade behind the
   text at the bottom left so the headline stays legible on the bright facade */
#home > .absolute.inset-0 > div[style*="linear-gradient(to bottom"] {
  background:
    linear-gradient(to top, rgba(20, 18, 14, .66) 0%, rgba(20, 18, 14, .20) 52%, rgba(20, 18, 14, .30) 100%),
    linear-gradient(90deg, rgba(20, 18, 14, .38) 0%, rgba(20, 18, 14, 0) 62%) !important;
}

/* Homepage intro ("Die Kunst des Einfachen"): on tablets and desktops the photo
   is exactly as tall as the text, from the eyebrow to the buttons, so it is
   cropped less at the sides; the location caption hangs below the photo */
@media (min-width: 768px) {
  #chalet > .grid { align-items: stretch !important; }
  #chalet .md\:col-span-5.relative { display: flex; flex-direction: column; }
  #chalet .md\:col-span-5.relative > .iz { aspect-ratio: auto !important; flex: 1 1 auto; min-height: 0; position: relative; }
  #chalet .md\:col-span-5.relative > .iz img { position: absolute; inset: 0; width: 100%; height: 100%; }
  #chalet .absolute.bg-white { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; bottom: auto !important; }
}

/* Homepage reviews: no frames — only thin lines between Google | Airbnb |
   Booking.com, running without a break from the scores down through the
   review excerpts; all three columns equally wide */
.ap-rev-sum > div { background: transparent !important; border-right: 0 !important; }
.ap-rev-sum > div + div { border-left: 1px solid var(--ap-divider, #D1C4BA) !important; }
#google-reviews-grid { gap: 0 !important; }
#google-reviews-grid > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
@media (min-width: 768px) {
  .ap-rev-sum { margin-bottom: 0 !important; }
  .ap-rev-sum > div { padding-bottom: 36px !important; }
  #google-reviews-grid > div { padding: 36px 40px 8px !important; }
  #google-reviews-grid > div + div { border-left: 1px solid var(--ap-divider, #D1C4BA) !important; }
}
@media (max-width: 767px) {
  #google-reviews-grid > div { padding: 28px 0 !important; }
  #google-reviews-grid > div + div { border-top: 1px solid var(--ap-divider, #D1C4BA) !important; }
}

/* ─── 11 · One content frame and one spacing rhythm for the whole site
   (2 Oct 2026, all pages DE/EN/NL)
   · Side margin: 24 px on phones, at least 48 px on tablets, 6 % of the
     screen on desktops; content at most 1440 px wide (on very large screens
     the margins grow instead).
   · Section spacing: 72 px phones / 96 px tablets / 120 px desktops;
     section heading → content 48 px.
   Full-width backgrounds (header photos, booking bar, dark bands, footer)
   stay full width; their content follows the frame. EasyBooking widgets and
   narrow reading / form columns (FAQ, legal texts, booking forms) keep their
   own width. */
:root { --ap-gutter: 24px; --ap-space: 72px; --ap-frame: calc(100% - 2 * var(--ap-gutter)); }
@media (min-width: 768px) { :root { --ap-gutter: max(48px, 6vw, calc((100vw - 1440px) / 2)); --ap-space: 96px; } }
@media (min-width: 1280px) { :root { --ap-space: 120px; } }

/* Navigation bar (all widths) */
#nav-inner, #nav > div[style*="max-width:1280px"] { max-width: var(--ap-frame) !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Header texts on photos */
#home .relative.z-10.text-center { left: var(--ap-gutter) !important; }
.ap-hero-txt { max-width: var(--ap-frame) !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Sections, bands and footer */
@media (min-width: 768px) {
  :is(section, footer):is(.px-6, .md\:px-12) { padding-left: 0 !important; padding-right: 0 !important; }
  :is(section, footer) > .max-w-screen-xl { max-width: var(--ap-frame) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
  #panel-winter .md\:px-12, #panel-sommer .md\:px-12 { padding-left: 0 !important; padding-right: 0 !important; }
  :is(section:not(.ap-hero-split), body > div):has(> div[style*="max-width:1280px"]) { padding-left: 0 !important; padding-right: 0 !important; }
  :is(section:not(.ap-hero-split), body > div) > div[style*="max-width:1280px"] { max-width: var(--ap-frame) !important; }
  /* sections with a narrower column (FAQ, comparison, booking, enquiry) and
     centred photo bands: the same side margin as everywhere else */
  body > :is(section, div)[style*="px 24px"]:not(.ap-hero-split):not(.ap-hero-img):not([id^="cbanner"]):not(#glb):not(:has(> div[style*="max-width:1280px"])),
  body > :is(section, div) > div[style*="px 24px"][style*="text-align:center"] { padding-left: var(--ap-gutter) !important; padding-right: var(--ap-gutter) !important; }
  /* legal pages: the reading column keeps its width; on tablets its text follows the frame */
  body > main[style*="max-width:860px"] { max-width: min(860px, calc(100% - 2 * var(--ap-gutter) + 48px)) !important; }
  /* homepage booking bar: "Anreise" and "Anfragen" sit exactly on the frame */
  #sstrip { padding-left: 0 !important; padding-right: 0 !important; }
  #sstrip .sw { max-width: var(--ap-frame) !important; }
  #sstrip .arrival.sf { padding-left: 0 !important; }
  #sstrip .search.sc { padding-right: 0 !important; }
  /* homepage intro: text starts at the frame, photo ends at the frame */
  #chalet .md\:col-start-2 { grid-column: 1 / span 5 !important; }
  #chalet .md\:col-span-5.relative { grid-column: 7 / span 6 !important; margin-right: 0 !important; }
}

/* One vertical rhythm */
section:is(.py-20, .py-24), section[style*="padding:80px 24px"] { padding-top: var(--ap-space) !important; padding-bottom: var(--ap-space) !important; }
section :is(.text-center, [style*="text-align:center"]):has(> h2):not(:last-child):not(#anfrage *) { margin-bottom: 48px !important; }

/* Gallery: same rhythm and frame; height follows the width (fewer cropped photos) */
#galerie { padding-top: var(--ap-space) !important; padding-bottom: var(--ap-space) !important; }
#galerie > div:first-child { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 48px !important; }
#galerie .gal-nav-row { padding-bottom: 0 !important; }
@media (min-width: 768px) {
  #galerie > div { max-width: var(--ap-frame) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
  #galerie .gal-page { height: auto !important; aspect-ratio: 2.16 / 1; min-height: 380px; max-height: 700px; }
  #galerie .gal-left, #galerie .gal-right { height: auto !important; }
}
@media (max-width: 767px) {
  #galerie > div { padding-left: var(--ap-gutter) !important; padding-right: var(--ap-gutter) !important; }
  /* homepage quick search on phones (our own form, not an EasyBooking widget): fields on the 24 px margin */
  #ssm { padding-left: var(--ap-gutter) !important; padding-right: var(--ap-gutter) !important; }
}