/* ==========================================================================
   Watermark Usedom - CSS Framework
   Extracted from original Wix site via Inspector MCP
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Face Declarations
   -------------------------------------------------------------------------- */
/* Gilda Display - from Wix original */
@font-face {
  font-family: 'Gilda Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/gilda-display.woff2') format('woff2');
}

/* Roboto - Variable font (300-400 weight) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../assets/fonts/roboto.woff2') format('woff2');
}

/* Jost - Variable font (Futura alternative for nav) */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../assets/fonts/jost.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colors - Exact from original */
  --color-primary: rgb(91, 115, 111);
  /* Sage/Teal - Headings */
  --color-text: rgb(75, 78, 80);
  /* Dark gray - Body text */
  --color-text-light: rgb(120, 122, 124);
  /* Light gray - h5, secondary */
  --color-text-muted: rgb(142, 144, 137);
  /* Muted - Buttons */
  --color-footer-link: rgb(190, 199, 197);
  /* Footer links */
  --color-bg: #f4f2f1;
  /* Off-white - Page background */
  --color-bg-light: #faf9f8;
  /* Lighter background */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typography */
  --font-heading: 'Gilda Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-nav: 'Jost', 'Futura', 'Century Gothic', sans-serif;

  /* Font Sizes - Exact from original */
  --fs-hero: 72px;
  /* Stats numbers */
  --fs-h1: 50px;
  /* Section headings */
  --fs-h2: 50px;
  /* Same as h1 */
  --fs-h3: 30px;
  --fs-h5: 25px;
  /* Subheadings */
  --fs-body: 18px;
  /* Paragraph text */
  --fs-small: 14px;
  /* Footer, nav */
  --fs-nav: 14px;

  /* Line Heights - Exact from original */
  --lh-h2: 70px;
  --lh-h5: 37.5px;
  --lh-body: 30.6px;

  /* Letter Spacing */
  --ls-heading: 2.5px;
  /* h2 letter-spacing */
  --ls-nav: normal;
  --ls-body: normal;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;
  --gap-mobile: 0.5rem;
  /* 16px */
  --mobile-section-spacing: 0.5rem;
  /* 20px */
  /* Consistent 40px total between sections (20+20) */

  /* Layout */
  --container-max: 1400px;
  --container-padding: clamp(1rem, 5vw, 3rem);
  --header-height: 62px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  letter-spacing: normal;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

ul,
ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-primary);
}

h1 {
  font-size: var(--fs-hero);
  line-height: 1.2;
}

h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

h3 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

h4 {
  font-size: var(--fs-h3);
  line-height: 1.4;
}

h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-text-light);
  letter-spacing: normal;
}

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--fs-h5);
  line-height: 1.6;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: 900px;
}

.container--wide {
  max-width: 1600px;
}

.section {
  padding: var(--space-xl) 0;
}

.section--lg {
  padding: var(--space-2xl) 0;
}

.section--bg {
  background-color: var(--color-white);
}

.text-center {
  text-align: center;
}

/* Flexbox utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

/* Grid utilities */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {

  /* Mobile REM Scaling: 16px base at 320px viewport, scales proportionally */
  /* 16px / 320px * 100 = 5vw */
  html {
    font-size: 5vw;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Bootstrap-Style Utility Classes
   -------------------------------------------------------------------------- */

/* Mobile Section Padding - replaces duplicate padding rules */
@media (max-width: 768px) {
  .u-section-mobile {
    padding-left: calc(3 * var(--mobile-section-spacing)) !important;
    padding-right: calc(3 * var(--mobile-section-spacing)) !important;
    padding-top: calc(4 * var(--mobile-section-spacing)) !important;
    padding-bottom: calc(4 * var(--mobile-section-spacing)) !important;
  }

}

/* Container Width Utilities */
.u-max-w-588 {
  max-width: 588px;
}

.u-max-w-800 {
  max-width: 800px;
}

.u-max-w-900 {
  max-width: 900px;
}

.u-max-w-980 {
  max-width: 980px;
}

.u-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Typography Utilities */
.u-text-body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: rgb(75, 78, 80);
}

.u-text-lead {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: 35px;
  color: rgb(120, 122, 124);
}

.u-heading-section {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: 2.5px;
  color: rgb(91, 115, 111);
}

@media (max-width: 768px) {
  .u-heading-section {
    font-size: 1.5rem;
    /* 24px - Wix h2 intro */
    line-height: 1.4;
    letter-spacing: 0.0625rem;
    /* 1px */
  }

  .u-text-lead {
    font-size: 1rem;
    /* 16px - Wix h5 */
    line-height: 1.7;
  }
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: transparent;
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.header--transparent {
  background-color: transparent;
}

.header--scrolled {
  position: fixed;
  background-color: rgb(142, 144, 137);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Centered header variant (no logo) */
.header--centered .header__inner {
  justify-content: center;
}

.header--centered .nav {
  width: 100%;
  justify-content: center;
}

.header__logo {
  height: 40px;
  width: auto;
}

.header__logo img {
  height: 100%;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Mobile-only nav items (hidden on desktop) */
.nav__item--mobile-only {
  display: none;
}

.nav__link {
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--color-white);
  padding: 0 27px;
  line-height: 50px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.4s;
}

.nav__link:hover {
  /* Original has no underline or color change on hover */
}

/* White text when header is scrolled (on gray bg) */
.header--scrolled .nav__link {
  color: var(--color-white);
}

/* Active state - no visual difference in original */
.nav__link--active {
  /* No special styling */
}

/* Mobile menu toggle */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
}

.nav__toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 8px 0;
  transition: var(--transition-fast);
}

@media (max-width: 900px) {

  /* On mobile, header stays transparent when scrolled - only burger visible */
  .header--scrolled {
    background-color: transparent;
    box-shadow: none;
  }

  /* Burger menu gets dark color when scrolled (for visibility on light content) */
  .header--scrolled .nav__toggle span {
    background-color: var(--color-primary);
  }

  .nav__toggle {
    display: block;
  }

  /* Burger to X animation (3 lines) */
  .nav__toggle--active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .nav__toggle--active span:nth-child(2) {
    opacity: 0;
  }

  .nav__toggle--active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .nav__toggle--active span,
  .header--scrolled .nav__toggle--active span {
    background-color: #fff;
  }

  .nav__list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #4C4E50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
  }

  .nav__list--open {
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    display: block;
    width: 100%;
  }

  .nav__link:hover,
  .nav__link--active {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Show mobile-only nav items */
  .nav__item--mobile-only {
    display: block;
    background-color: rgb(142, 144, 137);
    width: 100%;
    text-align: center;
  }

  .nav__link--buchen {
    color: var(--color-white);
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5625rem;
  /* 25px like original */
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  min-width: 180px;
  min-height: 50px;
  padding: 0.875em 2em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn--primary {
  background-color: rgb(142, 144, 137);
  color: var(--color-white);
  border: 1px solid var(--color-white);
  width: 232px;
  height: 62px;
  font-size: 25px;
  padding: 0;
  border-radius: 0;
  transition: border-color 0.4s, background-color 0.4s, color 0.4s;
}

.btn--primary:hover {
  background-color: rgb(244, 242, 241);
  border-color: rgb(120, 122, 124);
  color: rgb(142, 144, 137);
}

.btn--outline {
  background-color: transparent;
  color: rgb(142, 144, 137);
  border: 2px solid rgb(142, 144, 137);
}

.btn--outline:hover {
  background-color: rgb(142, 144, 137);
  color: var(--color-white);
  border-color: rgb(142, 144, 137);
}

.btn--white-filled {
  background-color: var(--color-white);
  color: var(--color-text);
  border-color: var(--color-white);
}

.btn--white-filled:hover {
  background-color: transparent;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
}

.hero--short {
  min-height: 60vh;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 141px;
  /* Exact from original */
}

.hero__logo {
  width: 242px;
  height: 50px;
  margin-bottom: 67px;
  /* Gap to subtitle text */
}

.hero__title {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* House page hero - matches original exactly */
.hero--house .hero__logo {
  margin-bottom: 197px;
  /* Exact gap from logo to title in original */
}

.hero--house .hero__title {
  font-size: 60px;
  letter-spacing: 3px;
  line-height: 84px;
  margin-bottom: 0;
  /* Title and subtitle overlap slightly due to line-height */
}

.hero--house .hero__title--sub {
  font-family: var(--font-body);
  /* Roboto - Sans-Serif */
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 1.05px;
  line-height: 29.4px;
  margin-bottom: 0;
}

.hero--house .hero__buttons {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin-top: 197px;
  /* Exact gap from subtitle to button in original */
}

.hero__subtitle {
  font-family: var(--font-heading);
  /* Gilda Display */
  font-size: clamp(18px, 5vw, 28px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: clamp(3px, 1vw, 5.6px);
  word-spacing: 0px;
  text-transform: none;
  text-align: center;
  line-height: 47.6px;
  color: var(--color-white);
  max-width: 900px;
  white-space: normal;
}

.hero__buttons {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 17px;
  justify-content: center;
}

/* Hero-specific white outline buttons */
.btn--white {
  font-size: 1.75rem;
  width: 269px;
  height: 73px;
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 0;
  padding: 0;
  transition: border-color 0.4s, background-color 0.4s;
}

.btn--white:hover {
  background-color: rgb(142, 144, 137);
  border-color: rgb(142, 144, 137);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Content Sections
   -------------------------------------------------------------------------- */
.intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.intro__title {
  margin-bottom: var(--space-md);
}

.intro__text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: rgb(75, 78, 80);
}

/* House Page Intro - 2-column layout like original */
.house-intro {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 82px;
  padding: 100px 152px;
  background: var(--color-bg);
  min-height: 521px;
  max-width: 1285px;
  margin: 0 auto;
}

.house-intro__heading {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  color: rgb(91, 115, 111);
  margin: 0;
  width: 490px;
  flex-shrink: 0;
  text-align: center;
}

.house-intro__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 476px;
  flex-shrink: 0;
}

.house-intro__body p {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 33.6px;
  color: rgb(120, 122, 124);
  margin: 0;
}

@media (max-width: 1100px) {
  .house-intro {
    flex-direction: column;
    padding: 60px 40px;
    gap: 40px;
  }

  .house-intro__heading,
  .house-intro__body {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .house-intro {
    gap: 1.25rem;
    /* 20px */
  }

  .house-intro__heading {
    text-align: center;
  }

  .house-intro__body {
    text-align: center;
  }

  .house-intro__body p {
    font-size: 1rem;
    /* 16px - Wix computed */
    line-height: 1.5;
  }
}

/* Image Grid - 2 images side by side (65% / 35% split), full width */
.image-grid {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding-bottom: 20px;
  height: 732px;
  background: white;
}

.image-grid--narrow-wide {
  grid-template-columns: 34fr 66fr;
}

.image-grid--wide-narrow {
  grid-template-columns: 65fr 35fr;
}

/* Height variants for image grids */
.image-grid--h732 {
  height: 732px;
}

.image-grid--h793 {
  height: 793px;
}

.image-grid--h535 {
  height: 535px;
}

.image-grid--h725 {
  height: 725px;
}

.image-grid__item {
  overflow: hidden;
  height: 100%;
}

.image-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: var(--gap-mobile);
    padding-bottom: 0;
  }



  .image-grid__item {
    height: 25rem;
    /* 400px */
  }
}

/* Features Section - 2-column layout like original */
.features-section {
  display: grid;
  grid-template-columns: 489px 1fr;
  gap: 150px;
  align-items: start;
  padding: 100px 200px;
  background: #ffffff;
}

.features-section__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.features-section__title {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 400;
  line-height: 78.4px;
  letter-spacing: normal;
  color: rgb(91, 115, 111);
  margin: 0;
}

.features-section__desc {
  font-family: var(--font-body);
  font-size: 31px;
  font-weight: 400;
  line-height: 52.7px;
  letter-spacing: normal;
  color: rgb(120, 122, 124);
  margin: 0;
}

.features-section__icons {
  display: flex;
  flex-direction: column;
  gap: 68px;
  justify-self: end;
}

.house-feature {
  display: flex;
  align-items: center;
  gap: 18px;
}

.house-feature img {
  width: 69px;
  height: 69px;
  flex-shrink: 0;
}

.house-feature span {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: normal;
  color: rgb(85, 81, 81);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .features-section {
    grid-template-columns: 1fr;
    gap: 1.875rem;
    /* 30px */
  }

  .features-section__title {
    text-align: center;
  }

  .features-section__desc {
    font-size: 1rem;
    /* 16px - Wix computed */
    line-height: 1.6;
  }

  .features-section__icons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.875rem;
    /* 30px */
    justify-self: start;
    width: 100%;
  }

  .house-feature {
    flex-direction: row;
    text-align: left;
    gap: 1.25rem;
    /* 20px */
    justify-content: flex-start;
    align-items: center;
  }

  .house-feature img {
    width: 3.75rem;
    /* 60px */
    height: 3.75rem;
    /* 60px */
  }

  .house-feature span {
    font-size: 1.375rem;
    /* 22px */
    line-height: 1.3;
    white-space: normal;
  }
}

/* Description Section - 2 column layout */
.description-section {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 155px;
  padding: 100px 200px 100px 150px;
  background: var(--color-bg);
  align-items: start;
}

.description-section__heading h3 {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  line-height: 67.2px;
  color: rgb(91, 115, 111);
  text-align: center;
  margin: 0;
}

.description-section__heading h5 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: rgb(120, 122, 124);
  text-align: center;
  margin: 30px 0 0 0;
}

.description-section__text {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 588px;
  margin-left: auto;
}

.description-section__text p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: rgb(75, 78, 80);
  margin: 0;
}

@media (max-width: 768px) {
  .description-section {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    /* 20px */
  }

  /* font-size/line-height now in unified mobile heading rule */

  .description-section__heading h5 {
    font-size: 1rem;
    /* 16px */
    margin-top: 1.25rem;
    /* 20px */
  }

  .description-section__text {
    max-width: 100%;
    margin: 0;
  }

  .description-section__text p {
    font-size: .875rem;

    /* 16px - Wix computed */
    line-height: 1.6;
    text-align: center;
  }
}

/* Parallax Section */
.parallax-section {
  height: 85vh;
  max-height: 767px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

/* Fullwidth Image (no parallax) */
.fullwidth-image {
  width: 100%;
  overflow: hidden;
}

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

/* Intro Split - Full width with edge-to-edge image */
.intro-split {
  display: grid;
  grid-template-columns: 60fr 40fr;
  /* Text wider, image narrower */
  min-height: 864px;
  /* Match Wix image height */
}

.intro-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl) 80px;
  text-align: center;
  background-color: #fff;
}

.intro-split__content>* {
  max-width: 588px;
}

.intro-split__content .intro__title {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: 2.5px;
  color: rgb(91, 115, 111);
  text-align: center;
  margin-bottom: var(--space-md);
}

.intro-split__content .lead {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: 37.5px;
  letter-spacing: normal;
  color: rgb(120, 122, 124);
  text-align: center;
  font-style: normal;
}

.intro-split__image {
  position: relative;
  overflow: hidden;
}

.intro-split__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Reversed layout - Image left, text right (40/60 split) */
.intro-split--reverse {
  grid-template-columns: 2fr 3fr;
}

.intro-split--reverse .intro-split__image {
  order: -1;
}

.intro-split--reverse .intro-split__content {
  background-color: var(--color-bg);
}

/* Styling for reversed intro h2 - uses smaller line-height */
.intro-split--reverse .intro__title {
  line-height: 60px;
}

/* Styling for subtitle in reversed intro */
.intro-split--reverse .intro__subtitle {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: normal;
  color: rgb(120, 122, 124);
  text-align: center;
  margin-bottom: var(--space-md);
  font-style: normal;
}

/* Centered text in reversed intro */
.intro-split--reverse .intro__text {
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* Buttons wrapper in reversed intro */
.intro-split--reverse .intro__buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: var(--space-md);
}

.intro-split--reverse .intro__buttons .btn--outline {
  width: 275px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  padding: 0;
}

@media (max-width: 900px) {
  .intro-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .intro-split--reverse {
    grid-template-columns: 1fr;
  }

  .intro-split--reverse .intro-split__image {
    order: 0;
  }

  .intro-split__content {
    padding: var(--space-lg) var(--space-md);
  }

  .intro-split__image {
    min-height: 50vh;
  }
}

/* Two-column layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

.split--reverse>* {
  direction: ltr;
}

.split__image {
  overflow: hidden;
}

.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.split__image:hover img {
  transform: scale(1.02);
}

.split__content {
  padding: var(--space-lg);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split--reverse {
    direction: ltr;
  }
}

/* --------------------------------------------------------------------------
   Stats Section - "Ankommen, um zu bleiben"
   -------------------------------------------------------------------------- */
.stats-section {
  background-color: #faf9f8;
  padding: var(--space-xl) 0;
}

/* Two-column header: H1 left (553px), Quote right (387px) */
.stats-header {
  display: grid;
  grid-template-columns: 553px 387px;
  gap: var(--space-lg);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
  margin-left: auto;
  margin-right: auto;
}

.stats-header__title h1 {
  font-family: var(--font-heading);
  font-size: 70px;
  font-weight: 400;
  line-height: 98px;
  letter-spacing: normal;
  color: rgb(91, 115, 111);
  /* color_41 - teal/sage green */
  margin: 0;
}

.stats-header__quote h5 {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: normal;
  color: rgb(125, 117, 117);
  margin: 0;
  text-align: left;
}

/* 3x3 Stats Grid */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.stats__item {
  padding: var(--space-sm) var(--space-md);
}

/* Icon in circle - SVGs have built-in circle background */
.stats__icon {
  width: 65px;
  height: 65px;
  margin: 0 auto var(--space-sm);
}

.stats__icon svg,
.stats__icon img {
  width: 100%;
  height: 100%;
}

/* Stats number - 72px Gilda Display, teal color */
.stats__number {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 400;
  line-height: 100.8px;
  letter-spacing: 3.6px;
  color: rgb(91, 115, 111);
  margin-bottom: var(--space-xs);
}

/* Stats label - 17px Roboto, dark gray */
.stats__label {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  letter-spacing: normal;
  color: rgb(75, 78, 80);
  text-align: center;
}

@media (max-width: 1000px) {
  .stats-header {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0;
    margin-bottom: var(--space-sm);
    gap: var(--space-sm);
  }

  .stats-header__title h1 {
    font-size: 50px;
    line-height: 70px;
  }

  .stats-header__quote h5 {
    text-align: center;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__number {
    font-size: 56px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .stats-header__title h1 {
    font-size: 2.5rem;
    /* 40px */
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   Services Grid
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.service {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-white);
}

.service__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
}

.service__title {
  font-size: var(--fs-body);
  margin-bottom: var(--space-sm);
}

.service__text {
  font-size: var(--fs-small);
  color: var(--color-text-light);
}

@media (max-width: 900px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services {
    grid-template-columns: 1fr;
  }
}

/* Services Section - House pages */
.services-section {
  padding: 80px 100px;
  background: white;
}

/* Services Header - 2 column layout like description section */
.services-header {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 80px;
  padding: 0 100px 60px 80px;
  align-items: start;
}

.services-header__title h2 {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(91, 115, 111);
  text-align: left;
  margin: 0;
}

.services-header__text {
  max-width: 400px;
  margin-left: auto;
}

.services-header__text p {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 33.6px;
  color: rgb(120, 122, 124);
  margin: 0;
}

@media (max-width: 768px) {
  .services-header {
    grid-template-columns: 1fr;
    padding: 0 1.25rem 2.5rem;
    /* 0 20px 40px */
    gap: 1.25rem;
    /* 20px */
  }

  .services-header__title h2 {
    text-align: center;
  }

  .services-header__text {
    max-width: 100%;
    margin: 0;
    text-align: center;
  }

  .services-header__text p {
    font-size: 1rem;
    /* 16px - Wix computed */
    line-height: 1.6;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 317px);
  gap: 16px 14px;
  justify-content: center;
}

.service-item {
  background: rgb(241, 240, 240);
  padding: 40px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-item img {
  width: 45px;
  height: 37px;
  margin-bottom: 20px;
}

.service-item h4 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: 1.5px;
  color: rgb(91, 115, 111);
  margin: 0 0 16px 0;
}

.service-item p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgb(75, 78, 80);
  margin: 0;
}

@media (max-width: 1020px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Equipment Section - House pages */
.equipment-section {
  padding: 80px 0;
  background: var(--color-bg);
  max-width: 980px;
  margin: 0 auto;
}

.equipment-section .intro__title {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: 2px;
  color: rgb(91, 115, 111);
  margin-bottom: 16px;
  text-align: left;
}

.equipment-section .lead {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: 35px;
  color: rgb(120, 122, 124);
  margin-bottom: 60px;
  text-align: left;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 60px;
}

.equipment-category h4 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 33.6px;
  letter-spacing: 1.2px;
  color: rgb(91, 115, 111);
  margin: 0 0 20px 0;
}

.equipment-category ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.equipment-category li {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 30.4px;
  color: rgb(75, 78, 80);
}

@media (max-width: 900px) {
  .equipment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .equipment-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA Section - House pages */
.cta-section {
  padding: 80px 60px;
  background: var(--color-bg);
  text-align: center;
}

.cta-section .intro__title {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  color: rgb(91, 115, 111);
  margin: 0 auto 40px auto;
  max-width: 980px;
}

.btn--outline {
  display: inline-block;
  background: transparent;
  border: 2px solid rgb(142, 144, 137);
  border-radius: 0;
  padding: 15px 40px;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  color: rgb(142, 144, 137);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn--outline:hover {
  background: rgb(142, 144, 137);
  border-color: rgb(142, 144, 137);
  color: white;
}

/* Mini Slider - House pages */
.mini-slider {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mini-slider::-webkit-scrollbar {
  display: none;
}

.mini-slider__track {
  display: flex;
  gap: 0;
}

.mini-slider__item {
  flex: 0 0 auto;
  width: 33.333vw;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

.mini-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mini-slider__item:hover img {
  transform: scale(1.05);
}

.mini-slider__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: white;
}

.mini-slider__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 5px;
}

.mini-slider__subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .mini-slider__item {
    width: 50vw;
  }
}

@media (max-width: 600px) {
  .mini-slider__item {
    width: 80vw;
  }
}

/* --------------------------------------------------------------------------
   Pro Gallery - Wix-style gallery layout (100vw, responsive)
   -------------------------------------------------------------------------- */
.pro-gallery {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pro-gallery__row {
  width: 100%;
}

.pro-gallery__row--full {
  display: block;
}

.pro-gallery__row--split {
  display: flex;
  gap: 24px;
}

/* Two equal columns layout */
.pro-gallery__row--half {
  display: flex;
  gap: 24px;
}

.pro-gallery__row--half .pro-gallery__item {
  flex: 1;
  aspect-ratio: 3 / 2;
}

.pro-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.pro-gallery__row--full .pro-gallery__item {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* Last item - single image, ~61% width */
.pro-gallery__row--single .pro-gallery__item {
  width: 61%;
  aspect-ratio: 3 / 2;
}

.pro-gallery__item--wide {
  flex: 69;
  aspect-ratio: 3 / 2;
}

.pro-gallery__item--narrow {
  flex: 31;
  aspect-ratio: 2 / 3;
}

.pro-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pro-gallery__item:hover img {
  opacity: 0.9;
}

.pro-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  color: white;
  text-align: center;
}

.pro-gallery__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.pro-gallery__subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .pro-gallery {
    gap: var(--gap-mobile);
  }

  .pro-gallery__row--split,
  .pro-gallery__row--half {
    flex-direction: column;
    gap: var(--gap-mobile);
  }

  .pro-gallery__row--half .pro-gallery__item,
  .pro-gallery__row--single .pro-gallery__item {
    width: 100%;
  }

  .pro-gallery__item--wide,
  .pro-gallery__item--narrow {
    flex: 1 1 auto;
    aspect-ratio: 3 / 2;
  }

  /* Portrait images on mobile (like Wix) */
  .pro-gallery__item--portrait {
    aspect-ratio: 2 / 3;
  }

  .pro-gallery__caption {
    padding: 1.25rem;
    /* 20px */
  }

  .pro-gallery__title {
    font-size: 1rem;
    /* 20px */
    margin-bottom: 0;
  }

  .pro-gallery__subtitle {
    font-size: .75rem;
    /* 14px */
  }
}

/* --------------------------------------------------------------------------
   Amenities List
   -------------------------------------------------------------------------- */
.amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.amenities__group {
  padding: var(--space-md);
}

.amenities__title {
  font-size: var(--fs-body);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-primary);
}

.amenities__list {
  font-size: var(--fs-small);
  color: var(--color-text-light);
}

.amenities__list li {
  padding: var(--space-xs) 0;
  padding-left: 1em;
  position: relative;
}

.amenities__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .amenities {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .amenities {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Image Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-sm);
}

.gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

/* Masonry-style gallery */
.gallery--masonry {
  columns: 3;
  column-gap: var(--space-sm);
}

.gallery--masonry .gallery__item {
  aspect-ratio: auto;
  break-inside: avoid;
  margin-bottom: var(--space-sm);
}

@media (max-width: 900px) {
  .gallery--masonry {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .gallery--masonry {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background-color: rgb(142, 144, 137);
  padding: 60px 80px 30px;
}

.footer__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 60px;
  align-items: start;
  margin-bottom: 40px;
}

.footer__map img {
  width: 139px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer__center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  justify-self: center;
}

.footer__logo {
  width: 251px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.footer__nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  letter-spacing: normal;
  line-height: 33px;
}

.footer__nav a:hover {
  color: #fff;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer__email {
  font-family: var(--font-body);
  font-size: 29px;
  font-weight: 300;
  color: #fff;
  text-decoration: underline;
  line-height: 2.1em;
}

.footer__phone {
  font-family: var(--font-body);
  font-size: 29px;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
  line-height: 2.1em;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: none;
  font-size: 14px;
  color: #fff;
  line-height: 1.6em;
}

.footer__bottom p {
  margin: 0;
  color: #fff;
}

.footer__legal {
  display: flex;
  gap: 40px;
  align-items: center;
}

.footer__legal a {
  color: #fff;
  text-decoration: none;
}

.footer__legal span {
  display: none;
}

/* --------------------------------------------------------------------------
   Mobile Responsive Styles
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ========== UNIFIED MOBILE SPACING ========== */
  /* Mobile-only spacing utilities */
  .mt-section {
    margin-top: var(--mobile-section-spacing);
  }

  .mb-section {
    margin-bottom: var(--mobile-section-spacing);
  }

  .pt-section {
    padding-top: var(--mobile-section-spacing);
  }

  .pb-section {
    padding-bottom: var(--mobile-section-spacing);
  }

  /* ========== END UNIFIED SPACING ========== */

  .nav .btn--primary {
    display: none;
  }

  /* Hero Section Mobile */
  .hero {
    min-height: 100vh;
  }

  .hero__content {
    padding-top: 5rem;
    /* 80px */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .hero__logo {
    width: 11.25rem;
    /* 180px */
    height: auto;
    margin-bottom: 2.5rem;
    /* 40px */
  }

  .hero__subtitle {
    line-height: 1.6;
    max-width: 100%;
    font-size: .75rem;
  }

  .hero--house .hero__title {
    font-size: 1.75rem;
    /* 36px */
    line-height: 1.2;
    letter-spacing: 0.125rem;
    /* 2px */
  }

  .hero--house .hero__title--sub {
    font-size: 0.875rem;
    /* 16px */
    line-height: 1.4;
    letter-spacing: 0.05rem;
    /* 0.8px */
  }



  .hero__buttons {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    gap: 0.9375rem;
    /* 15px */
  }

  .btn--white {
    font-size: 1.375rem;
    /* 24px - Wix computed */
    padding: 0.5rem 2.5rem;
    /* 8px 40px */
    height: auto;
    min-width: auto;
    min-height: auto;
    white-space: nowrap;
  }

  /* Intro Sections Mobile */
  .intro-split {
    grid-template-columns: 1fr;
    padding: 0;
    background-color: white;
  }

  .intro-split--reverse {
    grid-template-columns: 1fr;
  }

  .intro-split__content {
    padding: 1.875rem 1.25rem;
    /* 30px 20px */
  }

  .intro-split__image {
    min-height: 18.75rem;
    /* 300px */
    margin-bottom: 0.5rem;
    /* 8px */
  }

  /* Unified mobile heading styles */
  .intro__title,
  .intro-split__content .intro__title,
  .intro-split--reverse .intro__title,
  .equipment-section .intro__title,
  .cta-section .intro__title,
  .house-intro__heading,
  .features-section__title,
  .description-section__heading h3,
  .services-header__title h2 {
    font-size: 1.375rem;
    line-height: 1.4;
    letter-spacing: 0.075rem;
    /* 1.2px */
  }

  .intro__text {
    font-size: .875rem;
    /* 16px - Wix h5 computed */
    line-height: 1.5;
  }

  .intro-split--reverse .intro__subtitle {
    font-size: 1.125rem;
    /* 16px - Wix h5 computed */
    line-height: 1.5;
  }

  .lead,
  .intro-split__content .lead,
  .equipment-section .lead {
    font-size: 1rem;
    /* 16px - Wix h5 computed */
    line-height: 1.7;
  }

  .intro__buttons {
    flex-direction: column;
    gap: 0.9375rem;
    /* 15px */
  }

  .intro__buttons .btn--outline {
    width: 100%;
  }

  .intro-split--reverse .intro__buttons .btn--outline {
    width: 100%;
    height: auto;
    padding: 0.9375rem 2.5rem;
    /* 15px 40px */
    font-size: 1.125rem;
    /* 18px - Wix button computed */
  }

  /* Stats Section Mobile */
  .stats-header__title h1 {
    font-size: 1.75rem;
    /* 28px - Wix h1 computed */
    line-height: 1.4;
    text-align: left;
  }

  .stats-header__quote h5 {
    font-size: 1rem;
    /* 16px - Wix h5 computed */
    line-height: 1.5;
    text-align: left;
    margin-bottom: 1rem;
  }

  .stats__number {
    font-size: 3.4375rem;
    /* 55px - Wix h2 stats computed */
    margin-bottom: 0;
    color: rgb(120, 122, 124);
  }

  /* Stats Mobile Layout: Icon left, Number+Label right */
  .stats {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    /* 40px */
    max-width: 20rem;
    /* 320px - centered narrow column */
    margin: 0 auto;
  }

  .stats__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 2rem;
    /* 32px horizontal gap */
    align-items: center;
    text-align: left;
    padding: 0;
  }

  .stats__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    /* Span both rows */
    width: 4.0625rem;
    /* 65px */
    height: 4.0625rem;
    /* 65px */
    margin: 0;
    align-self: center;
  }

  .stats__number {
    grid-column: 2;
    grid-row: 1;
    line-height: 1.1;
  }

  .stats__label {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.3;
  }

  /* Parallax Sections Mobile - shorter to show more horizontal content */
  .parallax-section {
    min-height: 11.25rem;
    /* 180px */
    height: 35vw;
    /* Aspect ratio based on viewport width */
    max-height: 13.75rem;
    /* 220px */
    background-attachment: scroll;
    /* Better performance on mobile */
    margin-bottom: 0.5rem;
  }

  /* Footer Mobile */
  .footer {
    padding: 2.5rem 1.25rem 1.25rem;
    /* 40px 20px 20px */
  }

  .footer__main {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.875rem;
    /* 30px */
  }

  .footer__center {
    align-items: center;
    justify-self: center;
  }

  .footer__nav {
    align-items: center;
  }

  .footer__map {
    display: flex;
    justify-content: center;
  }

  .footer__map img {
    width: 7.5rem;
    /* 120px */
  }

  .footer__logo {
    width: 12.5rem;
    /* 200px */
  }

  .footer__contact {
    align-items: center;
  }

  .footer__email,
  .footer__phone {
    font-size: 1.25rem;
    /* 20px */
  }

  .footer__bottom {
    flex-direction: column;
    gap: 0.9375rem;
    /* 15px */
    text-align: center;
  }

  .footer__legal {
    gap: 1.25rem;
    /* 20px */
  }
}

/* Extra small devices */
@media (max-width: 480px) {

  .footer__email,
  .footer__phone {
    font-size: 1.125rem;
    /* 18px */
  }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mt-0 {
  margin-top: 0;
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   GLightbox Customizations
   -------------------------------------------------------------------------- */
.glightbox-clean .gslide-description {
  background: transparent;
}

.glightbox-clean .gdesc-inner {
  padding: var(--space-sm);
}

.glightbox-clean .gslide-title {
  font-family: var(--font-heading);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Gallery Page Styles
   -------------------------------------------------------------------------- */
.gallery-section {
  padding: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 4px;
}

.gallery-grid__item {
  display: block;
  overflow: hidden;
  cursor: pointer;
}

/* Span classes for collage layout */
.gallery-grid__item--span1 {
  grid-column: span 1;
}

.gallery-grid__item--span2 {
  grid-column: span 2;
}

.gallery-grid__item--span3 {
  grid-column: span 3;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery-grid__item:hover img {
  opacity: 0.9;
}

/* GLightbox white background, no shadow */
.glightbox-clean .gslide-media {
  background: #fff;
  box-shadow: none !important;
}

.glightbox-clean .goverlay {
  background: rgba(255, 255, 255, 0.95);
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: #8E9088;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background: #7a7d76;
}

.glightbox-clean .gclose svg,
.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg {
  fill: #fff;
}

/* Gallery Hero */
.hero--gallery {
  min-height: 60vh;
}

.hero--gallery .hero__title {
  font-family: var(--font-heading);
  font-size: 56px;
  /* Exact from original */
  color: var(--color-white);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  line-height: 78.4px;
  /* 1.4 ratio */
  letter-spacing: normal;
  font-weight: 400;
}

/* Gallery intro section */
.hero--gallery+.intro-section {
  padding: 62px 0 56px;
  /* Match original spacing */
  background: var(--color-bg);
}

/* Gallery intro - Gilda Display like original */
.hero--gallery+.intro-section .lead {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: 35px;
  /* Exact from original */
  color: rgb(120, 122, 124);
  /* Exact gray from original */
  letter-spacing: normal;
  max-width: 765px;
  margin: 0 auto;
  text-align: center;
}

.gallery-section+.footer {
  margin-top: 0;
}

/* Responsive Gallery */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    /* 4px */
    padding: 0;
  }

  .gallery-grid__item--span1,
  .gallery-grid__item--span2,
  .gallery-grid__item--span3 {
    grid-column: span 1;
  }

  .hero--gallery {
    min-height: 50vh;
  }

  .hero--gallery .hero__title {
    font-size: 1.5rem;
    /* 24px */
    padding: 0 1.25rem;
    /* 0 20px */
    line-height: 1.3;
  }
}

/* ==========================================================================
   Booking Page Styles - Exact from Original
   ========================================================================== */

/* Booking Hero */
.hero--booking {
  min-height: 60vh;
}

.hero--booking .hero__title {
  font-family: var(--font-heading);
  font-size: 56px;
  color: var(--color-white);
  text-align: center;
  line-height: normal;
  letter-spacing: normal;
  margin-bottom: 0;
}

.hero__subtitle--booking {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
  line-height: normal;
  letter-spacing: normal;
  margin: 0;
}

/* ==========================================================================
   Booking Overlap Section - EXACT from Original (1728px viewport reference)

   Original measurements:
   - Section: starts at y=712, height 642px
   - White card: left 80px (4.6%), width 990px (57.3%), height 642px
   - Text padding: 206px from card left edge
   - Image: left 658px (38%), width 990px (57.3%), height 588px
   - Image overlaps card by ~413px
   - Image top offset from card: 212px
   ========================================================================== */
.booking-overlap {
  background: var(--color-bg);
  padding: 0;
  margin-top: 123px;
  /* Exact gap from hero section */
}

.booking-overlap__container {
  position: relative;
  width: 100%;
  max-width: 1728px;
  margin: 0 auto;
  overflow: visible;
  /* Image extends below card */
}

.booking-overlap__content {
  position: relative;
  background: #fff;
  /* Card: 57.3% width, starts at 4.6% from left */
  width: 57.3%;
  margin-left: 4.6%;
  /* Exact padding from original: 80px top, 206px left, 50px bottom */
  padding: 80px 60px 50px 206px;
  z-index: 2;
  box-sizing: border-box;
}

.booking-overlap__title {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: rgb(91, 115, 111);
  margin: 0 0 22px 0;
  /* Exact gap from inspector */
}

.booking-overlap__text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  /* Roboto Light */
  line-height: 30.6px;
  color: rgb(75, 78, 80);
  margin: 0 0 64px 0;
  /* Exact gap from inspector */
  max-width: 562px;
}

.booking-overlap__highlight {
  /* Original: bold AND underlined */
  font-weight: 700;
  text-decoration: underline;
  color: rgb(75, 78, 80);
}

.booking-overlap__buttons {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* Exact gap from inspector */
}

.booking-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 472px;
  /* Exact width */
  height: 70px;
  /* Exact height */
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  color: rgb(120, 122, 124);
  text-decoration: none;
  background: transparent;
  border: 2px solid rgb(120, 122, 124);
  transition: all 0.3s ease;
}

.booking-btn:hover {
  background: #8E9088;
  color: #fff;
}

.booking-overlap__image {
  position: absolute;
  /* Image starts at 38% from left edge */
  left: 38%;
  /* Image starts 218px below card top (card extends 218px above image) */
  top: 218px;
  /* Image width: 57.3% of viewport */
  width: 57.3%;
  max-width: 990px;
  height: 588px;
  z-index: 1;
}

.booking-overlap__image img {
  width: 100%;
  height: 588px;
  object-fit: cover;
  object-position: 100% 50%;
  /* Right-aligned crop like original */
}

/* ==========================================================================
   Contact Office Section - EXACT from Original

   Original measurements (1728px viewport):
   - Section: full width, height 914px
   - H2: centered, font-size 50px, letter-spacing 2.5px
   - H2 to first icon: 41px gap
   - Icons: 62x62px displayed
   - Icon to label: 38px horizontal gap
   - Icon to icon: 85px vertical gap
   - Content centered at ~430px from left
   ========================================================================== */
.contact-office {
  background: #ffffff;
  /* White background in original */
  /* Original measurements:
     - Image extends 158px below white card
     - 72px gray gap between image bottom and this section
     - 55px padding-top within section
     Total: 158 + 72 = 230px margin-top needed */
  padding: 55px 0 100px;
  margin-top: 230px;
  width: 100%;
}

.contact-office__title {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.5px;
  color: rgb(91, 115, 111);
  text-align: center;
  margin: 0 0 41px 0;
  /* Exact gap from inspector */
}

.contact-office__grid {
  display: flex;
  flex-direction: column;
  gap: 62px;
  /* Adjusted to match original ~147-150px label-to-label spacing */
  max-width: 600px;
  margin: 0 auto;
  padding: 0 40px;
}

.contact-office__item {
  display: flex;
  align-items: flex-start;
  gap: 38px;
  /* Exact gap from inspector */
}

.contact-office__icon {
  width: 62px;
  /* Displayed size from inspector */
  height: 62px;
  flex-shrink: 0;
}

.contact-office__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0;
}

.contact-office__label {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 400;
  font-style: normal;
  /* NOT italic in original */
  line-height: normal;
  color: rgb(91, 115, 111);
  /* Same as headings */
  margin: 0 0 4px 0;
}

.contact-office__sublabel {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  color: rgb(75, 78, 80);
  /* Same as body text */
  margin: 12px 0 0 0;
}

.contact-office__value {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  color: rgb(75, 78, 80);
  margin: 0;
}

.contact-office__value a {
  color: rgb(75, 78, 80);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.contact-office__value a:hover {
  opacity: 0.7;
}

.contact-office__note {
  font-family: var(--font-body);
  font-size: 18px;
  /* Same as other text */
  font-weight: 400;
  font-style: normal;
  /* NOT italic */
  line-height: 1.5;
  color: rgb(75, 78, 80);
  /* Same as body text */
  margin: 8px 0 0 0;
}

/* Day labels like "Montag - Freitag:" are body text, NOT Gilda labels */
.contact-office__day-label {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  color: rgb(75, 78, 80);
  margin: 0 0 4px 0;
}

/* Email value is 31px, not 32px */
.contact-office__value--email {
  font-size: 31px;
}

/* Address and hours values are 18px body text, not 32px */
.contact-office__value--small {
  font-size: 18px;
  line-height: 30.6px;
}

/* Booking Page Responsive */
@media (max-width: 1200px) {
  .booking-overlap__container {
    min-height: auto;
  }

  .booking-overlap__content {
    max-width: 500px;
    margin-left: 40px;
    padding: 60px 40px;
  }

  .booking-overlap__image {
    width: 55%;
  }
}

@media (max-width: 992px) {
  .booking-overlap__container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .booking-overlap__content {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 60px 40px;
  }

  .booking-overlap__image {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
  }

  .booking-overlap__title {
    font-size: 40px;
  }

  .booking-btn {
    font-size: 18px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  .hero--booking {
    min-height: 50vh;
  }

  .hero--booking .hero__title {
    font-size: 2.25rem;
    /* 36px */
  }

  .hero__subtitle--booking {
    font-size: 1.125rem;
    /* 18px */
  }

  .booking-overlap {
    padding: 0;
    margin-top: 0;
  }

  .booking-overlap__content {
    width: 100%;
    margin: 0;
    padding: 1.875rem 0;
    /* 30px 0 */
    background: transparent;
  }

  .booking-overlap__title {
    font-size: 1.5rem;
    /* 24px */
    color: rgb(85, 81, 81);
    margin: 0 2.1875rem 1.25rem 2.1875rem;
    /* 0 35px 20px 35px */
  }

  .booking-overlap__text {
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.7;
    margin: 0 2.1875rem 1.5rem 2.1875rem;
    /* 0 35px 24px 35px */
    max-width: 100%;
  }

  .booking-overlap__buttons {
    padding: 0;
    margin: 0 2.1875rem;
    /* 0 35px */
  }

  .booking-overlap__image {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: 13.375rem;
    /* 214px */
    max-height: none;
    overflow: hidden;
    margin: 0;
  }

  .booking-overlap__image img {
    width: 100%;
    height: 13.375rem;
    /* 214px */
    object-fit: cover;
  }

  .booking-btn {
    width: 100%;
    font-size: 1.0625rem;
    /* 17px */
    height: 3.75rem;
    /* 60px */
    padding: 0 1rem;
    /* 0 16px */
  }

  .contact-office {
    padding: 2.5rem 1.5rem 3.75rem;
    /* 40px 24px 60px */
    margin-top: 0;
  }

  .contact-office__title {
    font-size: 1.625rem;
    /* 26px */
    letter-spacing: 0.08125rem;
    /* 1.3px */
    margin-bottom: 1.75rem;
    /* 28px */
  }

  .contact-office__grid {
    gap: 3.125rem;
    /* 50px */
    padding: 0 1.25rem;
    /* 0 20px */
  }

  .contact-office__item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.25rem;
    /* 20px */
  }

  .contact-office__icon {
    width: 3.125rem;
    /* 50px */
    height: 3.125rem;
    /* 50px */
  }

  .contact-office__info {
    align-items: flex-start;
    padding-top: 0;
  }

  .contact-office__label {
    font-size: 1.375rem;
    /* 22px */
  }

  .contact-office__value {
    font-size: 0.9375rem;
    /* 15px */
  }

  /* Hide icon for opening hours on mobile */
  .contact-office__item--hours .contact-office__icon {
    display: none;
  }

  .contact-office__item--hours {
    padding-left: 0;
    margin-top: 1.25rem;
    /* 20px */
  }

  .contact-office__day-label {
    font-size: 0.9375rem;
    /* 15px */
  }

  .contact-office__value--small {
    font-size: 0.9375rem;
    /* 15px */
  }

  .contact-office__note {
    font-size: 0.8125rem;
    /* 13px */
  }
}

/* ==========================================================================
   Legal Pages Styles (AGB, Impressum, Datenschutz)
   ========================================================================== */

.hero--legal {
  min-height: 40vh;
}

.hero--legal .hero__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 48px);
  color: var(--color-white);
  text-align: center;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px 80px;
}

.legal-content h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-primary);
  margin-bottom: 32px;
}

.legal-content h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-primary);
  margin: 40px 0 20px;
}

.legal-content h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 32px 0 16px;
}

.legal-content h4 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text);
  margin: 24px 0 12px;
}

.legal-content h5 {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text);
  margin: 20px 0 10px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 16px;
}

.legal-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal-content a:hover {
  opacity: 0.7;
}

.legal-content ul {
  margin: 16px 0;
  padding-left: 24px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 8px;
}

.legal-content .uppercase {
  text-transform: uppercase;
  font-size: 14px;
}

@media (max-width: 768px) {
  .hero--legal {
    min-height: 30vh;
  }

  .hero--legal .hero__title {
    font-size: 1.5rem;
    /* 24px */
  }

  .legal-content {
    padding: 2.5rem 1.25rem 3.75rem;
    /* 40px 20px 60px */
  }

  .legal-content h1 {
    font-size: 1.625rem;
    /* 26px */
  }

  .legal-content h2 {
    font-size: 1.25rem;
    /* 20px */
  }

  .legal-content h3 {
    font-size: 1.125rem;
    /* 18px */
  }
}

/* --------------------------------------------------------------------------
   LQIP - Low Quality Image Placeholder
   -------------------------------------------------------------------------- */
.lqip {
  filter: blur(20px);
  transform: scale(1.1);
  transition: filter 0.4s ease-out, transform 0.4s ease-out;
}

.lqip.loaded {
  filter: blur(0);
  transform: scale(1);
}

.lqip.instant {
  transition: none;
}