/* =============================================================================
   Farmhouse Prasser — Base Stylesheet
   Design tokens, self-hosted fonts, base typography, layout, nav, footer,
   content sections, reveal pattern, responsive breakpoints.
   Source of truth: live Webflow CSS (recon/site.css, 86 KB, April 2026).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */

:root {
  /* Palette (from brief + cross-checked against site.css) */
  --brown:       #614916;
  --brown-gold:  #a27420;
  --gold:        #ffdd9d;
  --blue-grey:   #758696;
  --sky:         #77b7e5;
  --black:       #000;
  --white:       #fff;
  --offwhite:    #fafafa;
  --grey-1:      #e4e4e4;
  --grey-2:      #c8c8c8;
  --grey-3:      #424242;

  /* Layout */
  --container:   1200px;

  /* Typography scale (from site.css measured values) */
  --fs-hero:     80px;
  --fs-intro:    51px;
  --fs-header:   38px;
  --fs-mood:     54px;
  --fs-body:     18px;
  --fs-small:    14px;
  --fs-label:    20px;

  /* Spacing */
  --section-pad-y:  60px;
  --navbar-h:       77px;
}

/* ---------------------------------------------------------------------------
   2. SELF-HOSTED @font-face
   Exact filenames from assets/fonts/ — no WOFF2 for Altform/Lemonmilk.
   Domine uses variable-font range (300–700) with two woff2 files.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Altform";
  src: url("/assets/fonts/678e35d2293fc5ceb8a8750b_Altform-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Altform";
  src: url("/assets/fonts/678e35d2293fc5ceb8a87510_Altform-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Altform";
  src: url("/assets/fonts/678e35d2293fc5ceb8a87514_Altform-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lemonmilk";
  src: url("/assets/fonts/678e4366515b282f1d16db09_LEMONMILK-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Domine";
  src: url("/assets/fonts/domine-v25-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Domine";
  src: url("/assets/fonts/domine-v25-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   3. RESET / BASE
   --------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: "Altform", Verdana, sans-serif;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--white);
  background-color: #1a1a1a;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: "Domine", serif;
  font-weight: 400;
  /* color intentionally omitted — headings inherit from their container.
     Dark sections set color: var(--white) explicitly below. */
}

h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }
h4 { font-size: 18px; line-height: 24px; }

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

/* ---------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   --------------------------------------------------------------------------- */

/* Site-wide centered container (matches Webflow .container max-width: 1200px) */
.container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: block;
}

/* Hero variant — full height flex container */
.container.content {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  display: flex;
}

.container.content.hero {
  background-color: rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

/* Hero background video — fill the herosection, content overlays on top */
.background-video-2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Navbar container — matches .containernavbar in site.css */
.container.containernavbar,
.containernavbar {
  max-width: var(--container);
  color: var(--white);
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
}

/* Content wrapper — max-width inner block */
.wrapper {
  flex: 0 auto;
  max-width: 920px;
  position: static;
  overflow: visible;
}

.wrapper.hero {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 900px;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-top: 40px;
  padding-bottom: 100px;
  display: flex;
}

.wrapper.gallery {
  width: 100%;
  min-width: 0;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 20px;
}

.wrapper.testimonials {
  max-width: 950px;
}

.wrapper.footerwrapper {
  max-width: 500px;
}

/* ---------------------------------------------------------------------------
   5. NAVBAR
   --------------------------------------------------------------------------- */

/* Absolute/transparent navbar used on home page (navbarlegal) */
.navbarlegal {
  z-index: 9998;
  color: rgba(255, 221, 157, 0.5); /* --gold at 50% */
  background-color: transparent;
  border-radius: 8px;
  width: 100%;
  margin-top: 0;
  padding: 5px 20px;
  position: absolute;
  top: 10px;
}

/* Sticky variant when page is scrolled (JS adds this state) */
.navbarlegal.withbackground {
  background-color: rgba(0, 0, 0, 0.35);
  padding-top: 0;
  padding-bottom: 0;
  position: sticky;
  top: 0;
}

/* Floating pill navbar (alternative style used on some pages) */
.navbar {
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  margin-top: -55px;
  margin-left: 50%;
  margin-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  position: sticky;
  top: 10px;
}

/* Logo */
.logo {
  height: 85px;
  margin-top: 2px;
}

.logo.background {
  height: 55px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Nav links */
.nav-link,
.nav-link-3,
.nav-link-4 {
  color: var(--white);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  font-family: "Domine", serif;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 18px;
  display: inline-block;
}

.nav-link {
  padding: 12px;
  font-size: 16px;
}

.nav-link.w--current,
.nav-link-3.w--current,
.nav-link-4.w--current {
  color: var(--sky);
  font-size: 16px;
}

/* Right-hand nav group: page links + language switcher, on one row */
.nav-menu {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

/* Language switcher — inline at the end of the main nav */
.languagenav {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.nav-link.language {
  margin: 0;
  padding: 12px 6px;
  display: inline-block;
}

.nav-link.language.divider {
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
  opacity: 0.6;
}

.nav-link.language.divider {
  white-space: normal;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
  display: block;
}

.divider {
  font-size: 11px;
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   6. HERO SECTION
   --------------------------------------------------------------------------- */

.herosection {
  height: 100vh;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Static page hero banners — content pages (Geschichte/Vita) + legal */
.herosection.contentpages {
  background-image: url("/assets/img/67990222d14ce2a8497fac93_Wohnhaus.jpg");
  background-position: 50%;
  background-size: cover;
  height: 600px;
  margin-top: calc(-1 * var(--navbar-h));
}

.herosection.contentpages.vita {
  background-image: url("/assets/img/67992d3532edef25760179f2_Bildschirmfoto 2025-01-28 um 20.13.34.jpg");
}

.herosection.legal {
  background-image: url("/assets/img/67990222d14ce2a8497fac93_Wohnhaus.jpg");
  background-position: 50%;
  background-size: cover;
  height: 300px;
  margin-top: calc(-1 * var(--navbar-h));
}

/* Hero heading (large display title) */
.heroheading {
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: "Domine", serif;
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1em;
  color: var(--white);
}

/* Hero sub-label (Lemonmilk, small caps feel) */
.text-blockheader {
  letter-spacing: 1px;
  align-self: flex-start;
  margin-bottom: 0;
  font-family: "Lemonmilk", Tahoma, sans-serif;
  font-size: var(--fs-label);
  font-weight: 300;
  line-height: 1;
  display: block;
  color: var(--white);
}

/* CTA buttons — gold (hero/anfrage) and green (booking/teaser) variants.
   Match the live Webflow .w-button base padding (9px 15px) with the
   gold gradient overriding top/bottom to 5px. */
.herobutton,
.greenbutton,
.morebutton {
  color: var(--white);
  border-radius: 5px;
  padding: 9px 15px;
  font-family: "Lemonmilk", Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: inherit;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.herobutton {
  background-color: var(--brown-gold);
  background-image: linear-gradient(295deg, #9c6b00, #be9847);
  border: 1px solid #d6b366;
  padding-top: 5px;
  padding-bottom: 5px;
}

.herobutton:hover {
  border-color: #e7ddc8;
  text-decoration: none;
}

.herobutton.big {
  max-width: 300px;
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 28px;
  line-height: 1.2;
}

/* Green buttons (booking CTA, history/vita teasers) */
.greenbutton,
.morebutton {
  background-color: var(--brown-gold);
  background-image: linear-gradient(295deg, #587000, #739b34);
  border: 1px solid #afd666;
  padding-top: 10px;
  padding-bottom: 10px;
}

.greenbutton {
  width: 140px;
}

.morebutton {
  margin-top: 10px;
}

.greenbutton:hover,
.morebutton:hover {
  border-color: #e7ddc8;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   7. CONTENT SECTIONS
   --------------------------------------------------------------------------- */

.contentsection {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  height: auto;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

/* Section "one" — intro panel, brown bg with photo overlay */
.contentsection.one {
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/assets/img/678e6f9fa36e44ce0f1633cf_BE0B5985-0188-4CA3-9EAA-54BC17EA3098.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 0 0, 50%, 0 0;
  background-repeat: repeat, no-repeat, repeat;
  background-size: auto, cover, auto;
  padding: 220px 20px;
}

/* Section "two" — two-column content with background */
.contentsection.two {
  background-image:
    url("/assets/img/678f5f7c199476cb0a102edc_IMG_5479.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 100%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: auto, auto;
  padding-top: 200px;
  padding-bottom: 200px;
}

/* Mood section — full-bleed atmospheric photo */
.contentsection.mood {
  background-image:
    url("/assets/img/67ebba52a0f91dd8f94b73c6_MPHaus_TS_7709-H_M.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 50% 20%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  padding-top: 350px;
  padding-bottom: 350px;
}

/* Gallery section */
.contentsection.gallery {
  background-image:
    linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
    url("/assets/img/678f933ab5c7dd37e7530983_Bildschirmfoto 2025-01-21 um 13.28.37.jpg");
  background-position: 0 0, 50%;
  background-size: auto, cover;
  padding: 75px 40px 100px;
}

/* Features / request sections */
.contentsection.features,
.contentsection.request {
  background-image:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url("/assets/img/678f9dd2f65649bea01b584d_BackRed.jpg");
  background-position: 0 0, 50% 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  padding: 100px 20px;
}

/* Mood2 section */
.contentsection.mood2 {
  background-image: url("/assets/img/6852d9fa36c9547ea49799d9_IMG_6222.jpeg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 300px;
  padding-bottom: 300px;
}

/* Booking section */
.contentsection.booking {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("/assets/img/678f8cb00c9e0abc1e36c149_IMG_5439.jpg");
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  padding: 200px 60px;
}

/* Testimonials */
.contentsection.testimonials {
  background-image:
    url("/assets/img/6790f4d2085142b848194771_IMG_5431.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 50% 80%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  flex-flow: column;
  height: auto;
  padding: 50px 20px;
  display: block;
}

/* Two-column layout (History / Vita teaser): text in one half, photo shows
   through the empty half. Mirrors the live .twocolumns + .columnleft/right. */
.twocolumns {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 900px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.columnleft,
.columnright {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.columnleft {
  align-items: flex-start;
  padding-left: 20px;
  padding-right: 40px;
}

.columnright {
  align-items: flex-start;
  padding-left: 40px;
  padding-right: 20px;
}

.columnleft.empty,
.columnright.empty {
  /* spacer column — intentionally empty so the section photo shows */
}

@media screen and (max-width: 767px) {
  .twocolumns {
    flex-direction: column;
  }
  .columnleft,
  .columnright {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .columnleft.empty,
  .columnright.empty {
    display: none;
  }
}

/* History / Vita — brown bg + side photo */
.contentsection.history {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0)),
    url("/assets/img/67914221ba39bb67f400f632_IMG_5465.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 0 0, 65%, 0 0;
  background-repeat: repeat, no-repeat, repeat;
  background-size: auto, auto, auto;
  padding-top: 150px;
  padding-bottom: 150px;
}

.contentsection.vita {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2)),
    url("/assets/img/6791459661ab87882957419c_IMG_5452-Cleaned.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 0 0, 65%, 0 0;
  background-repeat: repeat, no-repeat, repeat;
  background-size: auto, auto, auto;
  padding-top: 150px;
  padding-bottom: 150px;
}

/* Legal pages */
.contentsection.legal {
  background-color: #2b2b2b;
  background-image: none;
  height: auto;
  display: block;
}

/* Partner section */
.contentsection.partner {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("/assets/img/67925054655129979f81f588_IMG_5484.jpg"),
    linear-gradient(var(--brown), var(--brown));
  background-position: 0 0, 50% 40%, 0 0;
  background-repeat: repeat, no-repeat, repeat;
  background-size: auto, cover, auto;
  flex-flow: column;
  align-items: center;
  padding: 50px 20px 70px;
}

/* Partner logos — clean row, centered below the text */
.logolist {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
  width: 100%;
  max-width: var(--container);
  margin: 40px auto 0;
  padding-left: 0;
  list-style-type: none;
}

.logolist li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logolistimage {
  width: auto;
  height: 90px;
  object-fit: contain;
}

@media screen and (max-width: 767px) {
  .logolist {
    gap: 30px;
  }
  .logolistimage {
    height: 64px;
  }
}

/* Info panel (Geschichte / Vita content pages) */
.contentsection.infopanel {
  background-image: none;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

/* Caption strip directly under a content-page hero */
.herocaption {
  justify-content: center;
  align-items: center;
  padding: 24px 20px;
  display: flex;
  font-family: "Altform", Verdana, sans-serif;
}

.text-block-8,
.text-block-6 {
  width: 100%;
  max-width: 900px;
  color: var(--white);
  font-size: 14px;
  opacity: 0.85;
  display: block;
}

/* Two-column info panel grid: left = heading/quote/figures, right = prose */
.infopanelgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  max-width: 900px;
  width: 100%;
}

.infopanelfirst,
.infopanelsecond {
  min-width: 0;
}

.headercontent.infopanel {
  font-family: "Domine", serif;
  font-weight: 700;
  color: var(--white);
}

.headercontent.infopanel.upper {
  text-transform: uppercase;
}

.citation {
  margin-bottom: 80px;
  color: var(--white);
  font-family: "Altform", Verdana, sans-serif;
  font-weight: 300;
}

.infopanelimage {
  width: 100%;
  margin-top: 20px;
}

.infopanelcaption {
  margin-top: 8px;
  margin-bottom: 24px;
  color: var(--white);
  font-family: "Altform", Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.8;
}

/* Legal pages — readable rich text on dark section */
.contentsection.legal .wrapper {
  max-width: var(--container);
  width: 100%;
}

.contentsection.legal .legalbody {
  color: var(--white);
}

@media screen and (max-width: 767px) {
  .infopanelgrid {
    grid-template-columns: 1fr;
  }
  .citation {
    margin-bottom: 32px;
  }
  .herosection.contentpages {
    height: 360px;
  }
  .herosection.contentpages.vita {
    height: 300px;
  }
}

/* Reviews */
.contentsection.reviews {
  height: auto;
  overflow-x: hidden;
}

/* Sleeping / Bedrooms */
.contentsection.sleeping {
  background-color: var(--black);
  background-image: none;
  height: auto;
}

/* ---------------------------------------------------------------------------
   7b. HEADING COLOR — DARK SECTIONS
   h1..h6 inherit dark by default (no global color above).
   Every section/component with a dark background sets white explicitly.
   --------------------------------------------------------------------------- */

/* Navbar (transparent/dark overlay on top of hero) */
.navbarlegal h1, .navbarlegal h2, .navbarlegal h3,
.navbarlegal h4, .navbarlegal h5, .navbarlegal h6,
.navbar h1, .navbar h2, .navbar h3,
.navbar h4, .navbar h5, .navbar h6 {
  color: var(--white);
}

/* Hero section (dark video background) */
.herosection h1, .herosection h2, .herosection h3,
.herosection h4, .herosection h5, .herosection h6 {
  color: var(--white);
}

/* Content sections with dark backgrounds or dark overlays */
.contentsection.one h1, .contentsection.one h2, .contentsection.one h3,
.contentsection.one h4, .contentsection.one h5, .contentsection.one h6,
.contentsection.two h1, .contentsection.two h2, .contentsection.two h3,
.contentsection.two h4, .contentsection.two h5, .contentsection.two h6,
.contentsection.mood h1, .contentsection.mood h2, .contentsection.mood h3,
.contentsection.mood h4, .contentsection.mood h5, .contentsection.mood h6,
.contentsection.mood2 h1, .contentsection.mood2 h2, .contentsection.mood2 h3,
.contentsection.mood2 h4, .contentsection.mood2 h5, .contentsection.mood2 h6,
.contentsection.gallery h1, .contentsection.gallery h2, .contentsection.gallery h3,
.contentsection.gallery h4, .contentsection.gallery h5, .contentsection.gallery h6,
.contentsection.features h1, .contentsection.features h2, .contentsection.features h3,
.contentsection.features h4, .contentsection.features h5, .contentsection.features h6,
.contentsection.request h1, .contentsection.request h2, .contentsection.request h3,
.contentsection.request h4, .contentsection.request h5, .contentsection.request h6,
.contentsection.booking h1, .contentsection.booking h2, .contentsection.booking h3,
.contentsection.booking h4, .contentsection.booking h5, .contentsection.booking h6,
.contentsection.testimonials h1, .contentsection.testimonials h2, .contentsection.testimonials h3,
.contentsection.testimonials h4, .contentsection.testimonials h5, .contentsection.testimonials h6,
.contentsection.history h1, .contentsection.history h2, .contentsection.history h3,
.contentsection.history h4, .contentsection.history h5, .contentsection.history h6,
.contentsection.vita h1, .contentsection.vita h2, .contentsection.vita h3,
.contentsection.vita h4, .contentsection.vita h5, .contentsection.vita h6,
.contentsection.legal h1, .contentsection.legal h2, .contentsection.legal h3,
.contentsection.legal h4, .contentsection.legal h5, .contentsection.legal h6,
.contentsection.partner h1, .contentsection.partner h2, .contentsection.partner h3,
.contentsection.partner h4, .contentsection.partner h5, .contentsection.partner h6,
.contentsection.sleeping h1, .contentsection.sleeping h2, .contentsection.sleeping h3,
.contentsection.sleeping h4, .contentsection.sleeping h5, .contentsection.sleeping h6 {
  color: var(--white);
}

/* Footer (dark background #3f3f3f) */
.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6 {
  color: var(--white);
}

/* ---------------------------------------------------------------------------
   8. TYPOGRAPHY COMPONENTS
   --------------------------------------------------------------------------- */

/* Large intro text above hero heading */
.introheader {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: var(--fs-intro);
  font-weight: 400;
  line-height: 1.1em;
  font-family: "Domine", serif;
  color: var(--white);
}

/* Section content headings */
.headercontent {
  text-align: left;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: var(--fs-header);
  font-weight: 400;
  line-height: 1.1em;
  font-family: "Domine", serif;
  color: var(--white);
  position: relative;
}

.headercontent.headermood {
  text-align: center;
  max-width: 700px;
  font-size: var(--fs-mood);
  display: block;
}

.headercontent.gallery {
  text-align: center;
  margin-bottom: 60px;
  font-size: var(--fs-header);
}

.headercontent.testimonials {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 50px;
}

/* Body copy in content sections */
.contentparagraph {
  color: var(--white);
  margin-bottom: 20px;
  font-family: "Altform", Verdana, sans-serif;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.3;
}

.contentparagraph.intro {
  max-width: 1000px;
  color: var(--white);
  margin-bottom: 0;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
}

.contentparagraphsmall {
  color: var(--white);
  font-family: "Altform", Verdana, sans-serif;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.3;
}

.contentparagraphserif {
  font-family: "Domine", serif;
  font-size: 22px;
  font-weight: 400;
}

/* Feature lists (Fakten / Auf Anfrage) — two columns, no bullets, Domine */
.list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  font-family: "Domine", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
}

@media screen and (max-width: 767px) {
  .list {
    grid-template-columns: 1fr;
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------------
   9. GALLERY
   --------------------------------------------------------------------------- */

.gallerygrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.galleryimage {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   10. CONTENT GRID (two-column layout)
   --------------------------------------------------------------------------- */

.contentgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  place-items: center;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

.first {
  padding-right: 60px;
}

.second {
  width: 100%;
  height: 430px;
}

/* ---------------------------------------------------------------------------
   10b. UMGEBUNG (surrounding) — full-bleed map behind a dark scrollable panel
   --------------------------------------------------------------------------- */
.contentsection.surrounding {
  background-image: linear-gradient(#696355, #696355);
  justify-content: flex-start;
  align-items: flex-start;
  height: 750px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.image-10 {
  z-index: 0;
  object-fit: fill;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Minimal Webflow row/column shim (only what the Umgebung markup uses) */
.columns,
.w-row {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.w-row::after {
  content: " ";
  display: table;
  clear: both;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col-6 {
  width: 50%;
}

/* Left half stays empty so the map shows through; the dark panel is on the right */
.column {
  background-color: rgba(0, 0, 0, 0.5);
  height: 750px;
  padding: 60px 10px 20px;
  display: flex;
  overflow: auto;
}

.wrapper.map {
  max-width: 450px;
  margin-left: 60px;
  padding-left: 0;
}

@media screen and (max-width: 767px) {
  .w-col {
    width: 100%;
  }
  .column-4 {
    display: none;
  }
  .contentsection.surrounding,
  .column {
    height: auto;
  }
  .column {
    padding-left: 40px;
    padding-right: 40px;
  }
  .wrapper.map {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   11. FOOTER
   --------------------------------------------------------------------------- */

.footer {
  background-color: #3f3f3f;
  background-image: url("/assets/img/67914718e4941dcde11347f3_IMG_5457.jpg");
  background-position: 50% 100%;
  background-size: cover;
  font-family: "Domine", serif;
  padding-top: 100px;
  padding-bottom: 50px;
}

.footergrid {
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Logo sits to the left of the address block */
.footerident {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 28px;
}

.footerlabel {
  margin-top: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.logofooter {
  height: 80px;
  margin-top: 15px;
}

.footertextblock {
  font-size: 17px;
  line-height: 1.5;
  color: var(--white);
}

.footerlink {
  color: var(--white);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 17px;
  display: block;
  text-decoration: none;
}

.footerlink:hover {
  text-decoration: underline;
}

.footerlinks {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 40px;
  padding-left: 0;
  font-weight: 400;
  list-style-type: none;
}

.footerlinkssecond {
  display: flex;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  padding-left: 0;
  font-weight: 400;
  list-style-type: none;
}

.footercopy {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
  font-weight: 400;
  color: var(--white);
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   12. REVIEW CARDS
   --------------------------------------------------------------------------- */

.reviewscontainer {
  width: 100%;
  min-width: 0;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 20px;
}

.reviewstrack,
.reviewswrapper {
  display: flex;
  flex-direction: row;
  column-gap: 24px;
  padding-bottom: 20px;
  overflow-x: auto;
}

.reviewcard {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
  min-width: 340px;
  max-width: 484px;
  padding: 32px 28px;
}

.reviewstars {
  color: #d4a853;
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-size: 18px;
}

.reviewtext {
  color: rgba(255, 255, 255, 0.9);
  height: 158px;
  margin-bottom: 16px;
  font-family: "Altform", Verdana, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  overflow: scroll;
}

.reviewmeta {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.reviewgastname {
  color: rgba(255, 255, 255, 0.7);
  font-family: "Altform", Verdana, sans-serif;
  font-size: var(--fs-small);
  font-weight: 400;
}

.reviewquelle {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "Altform", Verdana, sans-serif;
  font-size: 12px;
  font-weight: 300;
}

/* ---------------------------------------------------------------------------
   13. BEDROOM CARDS
   --------------------------------------------------------------------------- */

.bedroomtrack {
  display: flex;
  column-gap: 20px;
  padding-bottom: 20px;
  overflow-x: auto;
}

.bedroomcard {
  flex-shrink: 0;
  min-width: 280px;
  max-width: 320px;
  padding: 0;
}

.bedroomimage {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 200px;
}

.bedroomname {
  color: var(--white);
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.bedroombeds {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
   14. REVEAL ANIMATION PATTERN
   Content MUST be visible without JS.
   Task 8's main.js adds `js` class to <html>.
   Only when .js is present AND prefers-reduced-motion: no-preference do we
   hide and animate elements in.
   --------------------------------------------------------------------------- */

/* Default: always visible (no-JS baseline) */
.reveal {
  opacity: 1;
  transform: none;
}

/* Progressive enhancement: hide and animate only when JS runs */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .js .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   15. RESPONSIVE BREAKPOINTS
   Exact max-widths from site.css: 991px, 767px, 479px.
   (Plus Webflow's min-width: 768px for medium-up, kept for compatibility.)
   --------------------------------------------------------------------------- */

/* --- TABLET (≤ 991px) ---------------------------------------------------- */
@media screen and (max-width: 991px) {
  /* Logo — keep it close to desktop size; nav stays horizontal until mobile */
  .logo {
    height: 75px;
    margin-top: 0;
  }

  .logo.background {
    height: 55px;
  }

  /* Content sections */
  .contentsection {
    height: 100vh;
    padding-top: 40px;
  }

  .contentsection.one {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .contentsection.two {
    padding: 140px 0 140px 20px;
  }

  .contentsection.mood {
    padding-top: 220px;
    padding-bottom: 220px;
  }

  .contentsection.gallery {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contentsection.mood2 {
    padding-top: 220px;
    padding-bottom: 220px;
  }

  .contentsection.surrounding {
    height: 550px;
  }

  .contentsection.booking {
    padding: 140px 0 140px 20px;
  }

  .contentsection.history {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-left: 20px;
  }

  .contentsection.vita {
    padding-top: 140px;
    padding-bottom: 140px;
    padding-right: 20px;
  }

  /* Wrapper */
  .wrapper {
    margin-left: 30px;
    margin-right: 30px;
  }

  .wrapper.hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wrapper.footerwrapper {
    margin-left: auto;
    margin-right: auto;
  }

  /* Typography */
  .contentparagraph {
    font-size: 16px;
  }

  .headercontent {
    font-size: 32px;
  }

  .headercontent.gallery {
    font-size: 32px;
  }

  /* Footer grid */
  .footergrid {
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .footerlink {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /* Content grid */
  .contentgrid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .first {
    padding-right: 20px;
  }

  /* Navbar */
  .navbarlegal {
    opacity: 1;
  }

  .containernavbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- MOBILE (≤ 767px) ---------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Hero */
  .herosection {
    height: auto;
  }

  /* Navbar */
  .logo {
    height: 40px;
    margin-top: 0;
  }

  .logo.background {
    height: 40px;
  }

  .nav-menu {
    background-color: rgba(0, 0, 0, 0.85);
    flex-direction: row;
    justify-content: flex-end;
    display: block;
  }

  .containernavbar {
    padding-left: 20px;
    padding-right: 20px;
  }

  .navbarlegal.withbackground {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Content sections go auto-height on mobile */
  .contentsection {
    background-image: none;
    height: auto;
    min-height: 500px;
    padding-bottom: 40px;
  }

  .contentsection.one {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .contentsection.two {
    padding: 60px 10px;
  }

  .contentsection.mood {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .contentsection.gallery {
    padding: 60px 10px;
  }

  .contentsection.features,
  .contentsection.request,
  .contentsection.mood2 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .contentsection.booking {
    background-image:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url("/assets/img/678f8cb00c9e0abc1e36c149_IMG_5439.jpg"),
      linear-gradient(var(--brown), var(--brown));
    background-position: 0 0, 50%, 0 0;
    background-repeat: repeat, no-repeat, repeat;
    background-size: auto, auto, auto;
    padding: 60px 20px;
  }

  .contentsection.testimonials {
    padding-top: 10%;
  }

  .contentsection.history {
    background-image:
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
      url("/assets/img/67914221ba39bb67f400f632_IMG_5465.jpg");
    background-position: 0 0, 60%;
    background-repeat: repeat, no-repeat;
    background-size: auto, auto;
    padding: 60px 40px;
  }

  .contentsection.vita {
    background-image:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url("/assets/img/6791459661ab87882957419c_IMG_5452-Cleaned.jpg");
    background-position: 0 0, 65%;
    background-repeat: repeat, no-repeat;
    background-size: auto, auto;
    padding: 60px 40px;
  }

  .contentsection.legal {
    padding-top: 20px;
  }

  .contentsection.partner {
    padding-top: 10%;
  }

  .contentsection.infopanel {
    padding-top: 60px;
  }

  .contentsection.sleeping {
    min-height: 0;
  }

  /* Wrapper */
  .wrapper.hero {
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 230px;
    padding-bottom: 40px;
  }

  .wrapper.gallery {
    padding-left: 20px;
  }

  /* Typography */
  .text-blockheader {
    font-size: 18px;
  }

  .contentparagraph {
    font-size: 16px;
  }

  .contentparagraph.intro {
    font-size: 18px;
  }

  .heroheading {
    font-size: 60px;
  }

  .introheader {
    font-size: 44px;
  }

  .headercontent.headermood {
    font-size: 40px;
  }

  /* Footer */
  .footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .footerlinks {
    grid-template-columns: 1fr 1fr;
  }

  /* Gallery — 2 columns on mobile */
  .contentgrid {
    grid-template-columns: 1fr;
  }

  /* Reviews */
  .reviewscontainer {
    padding-left: 20px;
  }

  .reviewcard {
    max-width: 400px;
  }

  /* Bedrooms */
  .bedroomcard {
    min-width: 240px;
    max-width: 280px;
  }
}

/* --- SMALL MOBILE (≤ 479px) ---------------------------------------------- */
@media screen and (max-width: 479px) {
  .herosection {
    height: 80vh;
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .containernavbar {
    padding-left: 5px;
    padding-right: 5px;
  }

  .text-blockheader {
    text-align: left;
    letter-spacing: 1px;
    width: 100%;
    font-size: 14px;
  }

  .logo {
    height: 40px;
    margin-top: 0;
  }

  .languagenav {
    right: 4px;
  }

  /* Wrapper */
  .wrapper {
    margin-left: 20px;
    margin-right: 20px;
  }

  .wrapper.hero {
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 10px 40px;
  }

  .wrapper.testimonials {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* Typography */
  .contentparagraph {
    font-size: 18px;
    font-weight: 400;
    display: block;
  }

  .contentparagraph.intro {
    font-size: 18px;
  }

  .heroheading {
    font-size: 45px;
  }

  .introheader {
    font-size: 34px;
  }

  .headercontent {
    font-size: 30px;
  }

  .headercontent.headermood {
    font-size: 32px;
  }

  /* Footer */
  .footergrid {
    grid-template-columns: 1fr;
  }

  .footerlinks {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  /* Gallery — 2 cols on tiny screens */
  .gallerygrid {
    grid-template-columns: 1fr 1fr;
  }

  /* Content grid */
  .contentgrid {
    padding-left: 0;
    padding-right: 0;
  }

  .first {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Reviews */
  .reviewscontainer {
    padding-left: 20px;
  }

  .reviewcard {
    min-width: 250px;
    max-width: 280px;
  }

  /* Bedrooms */
  .bedroomcard {
    min-width: 220px;
    max-width: 260px;
  }
}

/* --- MEDIUM-UP (≥ 768px) — Webflow compat -------------------------------- */
@media (min-width: 768px) {
  /* Headings use Domine as body serif in rich text blocks */
  .bold-text-7 {
    font-family: "Domine", serif;
    text-transform: uppercase;
  }

  .bold-text-8 {
    font-family: "Domine", serif;
  }
}

/* ---------------------------------------------------------------------------
   16. MOBILE NAV (hamburger open state)
   body.nav-open shows the .nav-menu overlay.
   The menu-button shows 3 bars (spans) and animates to X when open.
   --------------------------------------------------------------------------- */

/* Hamburger button */
.menu-button {
  display: none; /* shown via media query below */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 10001;
}

.menu-button span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate burger to X when open */
body.nav-open .menu-button span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

body.nav-open .menu-button span:nth-child(2) {
  opacity: 0;
}

body.nav-open .menu-button span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile nav overlay.
   Gated under .js so that without JavaScript the full nav stays visible
   (and no dead hamburger button is shown) — progressive enhancement. */
@media screen and (max-width: 767px) {
  .js .menu-button {
    display: flex;
  }

  .js .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding-top: 80px;
  }

  body.nav-open .nav-menu {
    display: flex;
  }

  .nav-menu .nav-link {
    font-size: 24px;
    padding: 16px;
    display: block;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   17. LIGHTBOX
   Fullscreen overlay; .is-open makes it visible.
   --------------------------------------------------------------------------- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.92);
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox__img {
  display: block;
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox__close {
  top: -22px;
  right: -22px;
  font-size: 22px;
}

.lightbox__prev {
  left: -54px;
}

.lightbox__next {
  right: -54px;
}

/* ---------------------------------------------------------------------------
   18. ACCORDION (Umgebung)
   Without JS: panels (.dropdown-list) are fully visible (open).
   With JS: html.js class is present; JS adds .accordion-collapsed to close.
   --------------------------------------------------------------------------- */

/* No-JS baseline: everything visible */
.dropdown-list {
  overflow: visible;
}

/* JS baseline: collapse panels that have the class added by JS */
.js .accordion-collapsed {
  display: none;
}

.accordiontoggle {
  cursor: default;
}

.js .accordiontoggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 0;
}

.js .accordiontoggle::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--white);
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s ease;
}

.js .accordiontoggle[aria-expanded="true"]::after {
  content: "\2212"; /* minus sign */
}

.js .dropdown-list {
  padding-top: 8px;
  padding-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   19. SLIDER-6 CAROUSEL
   Without JS: all slides are visible (block/stacked).
   With JS: html.js is present; non-active slides hidden, carousel layout active.
   --------------------------------------------------------------------------- */

/* No-JS baseline: all slides visible stacked */
.slider-6 {
  width: 100%;
  height: 100%;
}

.slider6-image {
  display: block;
  width: 100%;
  height: auto;
}

/* JS carousel mode */
.js .slider-6 {
  position: relative;
  overflow: hidden;
  height: 430px;
}

.js .slider6__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.js .slider6-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js .slider6-image.slider6-active {
  opacity: 1;
}

/* Prev/next buttons */
.slider6__prev,
.slider6__next {
  display: none; /* hidden without JS */
}

.js .slider6__prev,
.js .slider6__next {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  font-size: 24px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.js .slider6__prev:hover,
.js .slider6__next:hover {
  background: rgba(0, 0, 0, 0.6);
}

.js .slider6__prev {
  left: 8px;
}

.js .slider6__next {
  right: 8px;
}

/* Dots */
.slider6__dots {
  display: none;
}

.js .slider6__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 2;
}

.slider6__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.slider6__dot.slider6-dot-active {
  background: var(--white);
}

/* Gallery grid (used in home.njk — matches .gallery__grid class) */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}

.gallery__item {
  display: block;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery__item:hover img {
  transform: scale(1.04);
}

@media screen and (max-width: 767px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
  }

  .lightbox__prev {
    left: -40px;
  }

  .lightbox__next {
    right: -40px;
  }
}

@media screen and (max-width: 479px) {
  .lightbox__prev,
  .lightbox__next {
    position: fixed;
    top: auto;
    bottom: 20px;
  }

  .lightbox__prev {
    left: calc(50% - 54px);
  }

  .lightbox__next {
    right: calc(50% - 54px);
  }

  .lightbox__close {
    top: 10px;
    right: 10px;
    position: fixed;
  }
}