/* ============================================
   CSS-Variablen (harmonisiert aus beiden Exporten)
   Basis: Export 1.0 (für Navigation & Hero)
   ============================================ */
:root {
  /* Farben - Design Sheet BERGBAUDE VALTENBERG */
  --color-primary: #0D2417; /* DARK GREEN */
  --color-accent: #E3361F; /* DARK ORANGE */
  --color-secondary: #1C3F1D; /* LIGHT GREEN */
  --color-surface: #ffffff;
  --color-surface-elevated: #f7f8f6;
  --color-on-surface: #222222;
  --color-on-surface-secondary: #555555;
  --color-on-primary: #ffffff;
  --color-neutral: #9D9D9C; /* LIGHT GRAY */
  --color-border: #e6eae4;
  --color-scrim: rgba(0, 0, 0, 0.36);
  --color-outline: color-mix(in oklab, #0D2417 30%, #ffffff);
  --color-overlay: rgba(13, 36, 23, 0.06);
  --color-backplate: rgba(13, 36, 23, 0.06);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;
  --section-gap: clamp(0.75rem, 20px, 1.5rem);

  /* Typografie - Empfohlene Kombination: Inter + Playfair Display */
  --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Playfair Display", Georgia, serif;
  --font-weight-body: 400;
  --font-weight-heading: 600;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-hero: clamp(2rem, calc(1.6rem + 24px), 3.25rem);
  --line-height-body: 1.6;
  --line-height-heading: 1.05;
  --line-height-base: 1.6;
  --letter-spacing-body: 0.1px;
  --letter-spacing-heading: 0.2px;

  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-sm: 12px;
  --border-radius-md: 20px;
  --border-radius-lg: 32px;
  --border-radius-xl: 48px;
  --border-radius-full: 9999px;

  /* Shadows */
  --shadow-level-1: 0 2px 8px rgba(13, 36, 23, 0.12);
  --shadow-level-2: 0 8px 24px rgba(13, 36, 23, 0.16);
  --shadow-level-3: 0 16px 40px rgba(13, 36, 23, 0.2);

  /* Layout */
  --content-max-width: 72rem;
  --animation-duration-fast: 150ms;
  --animation-duration-standard: 250ms;
  --animation-duration-slow: 400ms;
  --animation-curve-primary: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   WordPress / Impreza Wrapper Fixes (Pixel-Preserve)
   ============================================ */
/**
 * Impreza wraps pages with `#page-content.l-main`, which can apply a boxed layout.
 * The original static design is full-bleed. We remove the boxed constraint ONLY
 * for our Frontpage to restore the expected full-width hero (and sections).
 *
 * NOTE: Section internals (e.g. `.teaser-container`, `.newsletter-container`) already
 * control their own max-width, so making the outer wrapper full-width is safe.
 */
body.home #page-content.l-main,
body.front-page #page-content.l-main,
body.page-id-6 #page-content.l-main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/**
 * Impreza/US-Core section wrappers (boxed layout) – disable ONLY on Frontpage.
 * In WPBakery mode, content may be wrapped with `.l-section` and `.l-section-h`,
 * which apply max-width + side margins/padding (boxed). Our design is full-bleed.
 */
body.home .l-main > .l-section,
body.front-page .l-main > .l-section,
body.page-id-6 .l-main > .l-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.home .l-main > .l-section > .l-section-h,
body.front-page .l-main > .l-section > .l-section-h,
body.page-id-6 .l-main > .l-section > .l-section-h {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* WPBakery Row Abstände reduzieren */
body.home .l-main > .wpb_row,
body.front-page .l-main > .wpb_row,
body.page-id-6 .l-main > .wpb_row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Zusätzliche Abstände zwischen Sections entfernen */
body.home .l-main > .l-section + .l-section,
body.front-page .l-main > .l-section + .l-section,
body.page-id-6 .l-main > .l-section + .l-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.home .l-main > .wpb_row + .wpb_row,
body.front-page .l-main > .wpb_row + .wpb_row,
body.page-id-6 .l-main > .wpb_row + .wpb_row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ============================================
   Reset & Base Styles
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family-body);
  font-size: 1rem;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
  width: 100%;
  max-width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  position: relative;
  left: 0;
  right: 0;
}

body {
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-on-surface);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
  width: 100% !important;
  max-width: 100vw !important; /* Verhindert Überbreite */
  padding-top: 0; /* Wird durch Navigation-Höhe angepasst */
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* ============================================
   Navigation Styles (Export 1.0)
   ============================================ */
@keyframes navigation-line-grow {
  to {
    transform: scaleX(1);
  }
}

@keyframes navigation-slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes navigation-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navigation-main-2evtl {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  position: fixed !important; /* Fixed für immer sichtbaren Header */
  background: color-mix(in srgb, var(--color-surface) 98%, transparent);
  transition: all 0.4s var(--animation-curve-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari Support */
}

/* WordPress Admin-Bar: Fixed Header darf nicht "unter" die Admin-Bar rutschen */
body.admin-bar .navigation-main-2evtl {
  top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 782px) {
  body.admin-bar .navigation-main-2evtl {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}

.navigation-main-2evtl::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  content: "";
  opacity: 0.3;
  position: absolute;
  animation: navigation-line-grow 2s var(--animation-curve-primary) forwards;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary) 20%,
    var(--color-accent) 50%,
    var(--color-primary) 80%,
    transparent 100%
  );
}

.navigation-main-2evtl.navigation-scrolled {
  box-shadow: var(--shadow-level-2);
  background: color-mix(in srgb, var(--color-surface) 98%, transparent);
  position: fixed !important; /* Sicherstellen, dass es auch beim Scrollen fixed bleibt */
}

.navigation-main-2evtl.navigation-scrolled::before {
  opacity: 0.5;
}

.navigation-container-7hkdfd {
  margin: 0 auto;
  display: flex;
  padding: var(--spacing-md) var(--spacing-lg);
  max-width: var(--content-max-width);
  position: relative;
  align-items: center;
  justify-content: space-between;
  /* Sicherstellen, dass alle Kinder (Logo, Nav-Links, CTA) exakt auf einer Linie sind */
  vertical-align: middle;
}

/* WICHTIG: Alle direkten Kinder des Navigation-Containers müssen exakt auf einer Linie sein */
.navigation-container-7hkdfd > * {
  display: flex;
  align-items: center;
  vertical-align: middle;
  margin: 0;
  line-height: 1;
}

.navigation-logo-link-87cn66 {
  z-index: 1001;
  display: flex;
  align-items: center;
  transition: transform 0.3s var(--animation-curve-primary);
  text-decoration: none;
  color: inherit;
  /* Logo-Link exakt auf derselben Linie wie Menüpunkte ausrichten */
  vertical-align: middle;
  margin: 0;
}

.navigation-logo-link-87cn66:hover {
  transform: translateY(-2px);
}

.navigation-logo-link-87cn66:hover .navigation-logo-icon-r4it6w {
  opacity: 0.9;
  transform: scale(1.05);
}

.navigation-logo-3x791 {
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
}

.navigation-logo-icon-r4it6w {
  height: 90px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--color-primary) 20%, transparent));
  transition: all 0.4s var(--animation-curve-primary);
  /* Logo-Bild exakt auf derselben Linie wie Menüpunkte ausrichten */
  vertical-align: middle;
  display: block;
  margin: 0;
}

.navigation-brand-name-fldq2t {
  display: none; /* Logo enthält bereits den Text */
}

/* Header Öffnungszeiten - kompakt neben Logo */
.navigation-hours-header-8k3jf {
  gap: var(--spacing-xs);
  display: flex;
  align-items: center;
  margin-left: var(--spacing-md);
  padding-left: var(--spacing-md);
  border-left: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  vertical-align: middle;
  flex-shrink: 0;
}

.navigation-hours-icon-small-2m9xq {
  color: var(--color-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.navigation-hours-text-4p9xq {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-body);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.navigation-hours-compact-7k2jf {
  display: inline;
}

.navigation-hours-days-3m8xq {
  color: var(--color-on-surface);
  font-weight: 600;
}

.navigation-links-wrapper-xoyi5 {
  gap: var(--spacing-xl);
  display: flex;
  align-items: center;
  /* Navigation-Links-Wrapper exakt auf derselben Linie wie Logo ausrichten */
  vertical-align: middle;
  margin: 0;
}

.navigation-links-pv044q {
  gap: var(--spacing-md);
  margin: 0;
  display: flex;
  padding: 0;
  list-style: none;
  /* WICHTIG: Alle <li> Elemente müssen exakt auf derselben Baseline sein */
  align-items: baseline;
}

/* Sicherstellen, dass alle Navigation-Links exakt auf derselben Höhe sind */
.navigation-links-pv044q .navigation-item-zz9r8j {
  display: flex;
  align-items: baseline;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

.navigation-links-pv044q .navigation-link-swulhb {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
}

.navigation-item-zz9r8j {
  position: relative;
  display: flex;
  align-items: baseline;
  /* Sicherstellen, dass alle <li> Elemente exakt auf derselben Baseline sind */
  line-height: 1;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

.navigation-link-swulhb {
  color: var(--color-on-surface);
  /* Fix: in WP/Impreza kann baseline/line-height je Element abweichen.
     Durch inline-flex + feste line-height sitzen alle Menüpunkte auf einer Linie. */
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-md);
  position: relative;
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: 1;
  transition: color 0.3s var(--animation-curve-primary);
  white-space: nowrap;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  /* Sicherstellen, dass alle Links exakt auf derselben Baseline sind */
  vertical-align: baseline;
  margin: 0;
}

/* Auch CTA Button exakt vertikal ausrichten */
.navigation-cta-3qtlfg {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* CTA Button exakt auf derselben Linie wie Menüpunkte ausrichten */
  vertical-align: middle;
  margin: 0;
}

.navigation-link-swulhb::before {
  left: 50%;
  width: 0;
  bottom: 0;
  height: 2px;
  content: "";
  position: absolute;
  transform: translateX(-50%);
  background: var(--color-primary);
  transition: width 0.4s var(--animation-curve-primary);
  border-radius: var(--border-radius-full);
  /* WICHTIG: ::before darf den Link nicht nach oben verschieben */
  pointer-events: none;
}

.navigation-link-swulhb:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.navigation-link-swulhb:hover::before {
  width: 80%;
}

.navigation-cta-3qtlfg {
  box-shadow: var(--shadow-level-1);
  transition: all 0.3s var(--animation-curve-primary);
  white-space: nowrap;
}

.navigation-mobile-toggle-ccnk28 {
  color: var(--color-on-surface);
  border: none;
  cursor: pointer;
  z-index: 1002;
  display: none;
  padding: var(--spacing-sm);
  position: relative;
  background: transparent;
  transition: all 0.3s var(--animation-curve-primary);
  border-radius: var(--border-radius-md);
}

.navigation-mobile-toggle-ccnk28:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.navigation-mobile-toggle-ccnk28 {
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

.navigation-toggle-menu-doc58u,
.navigation-toggle-close-ss214k {
  width: 28px;
  height: 28px;
  stroke-width: 2.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-on-surface); /* Explizite Farbe */
  stroke: currentColor; /* Nutzt die color-Eigenschaft */
}

.navigation-toggle-menu-doc58u {
  display: block;
}

.navigation-toggle-close-ss214k {
  display: none;
  color: var(--color-on-surface) !important; /* Explizite dunkle Farbe */
  stroke: var(--color-on-surface) !important; /* Explizite dunkle Farbe */
}

.navigation-mobile-toggle-ccnk28[aria-expanded="true"] .navigation-toggle-menu-doc58u {
  display: none !important;
}

.navigation-mobile-toggle-ccnk28[aria-expanded="true"] .navigation-toggle-close-ss214k {
  display: block !important;
  color: var(--color-on-surface) !important; /* Explizite dunkle Farbe */
  stroke: var(--color-on-surface) !important; /* Explizite dunkle Farbe */
  opacity: 1 !important;
  visibility: visible !important;
}

.navigation-mobile-menu-u2p569 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000; /* Höher als Navigation (1000) */
  display: none;
  opacity: 0;
  position: fixed;
  transition: opacity 0.4s var(--animation-curve-primary);
  pointer-events: none;
  visibility: hidden;
}

.navigation-mobile-menu-u2p569.navigation-active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: all !important;
  visibility: visible !important;
}

.navigation-mobile-menu-u2p569.navigation-active .navigation-mobile-panel-ptaokg {
  transform: translateX(0) !important;
  visibility: visible !important;
}

.navigation-mobile-menu-u2p569.navigation-active .navigation-mobile-cta-cigju {
  animation: navigation-fade-up 0.5s 0.4s var(--animation-curve-primary) forwards;
}

.navigation-mobile-backdrop-pgdb {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: color-mix(in srgb, var(--color-scrim) 70%, transparent);
  backdrop-filter: blur(4px);
}

.navigation-mobile-panel-ptaokg {
  top: 0;
  right: 0;
  width: 85%;
  height: 100vh; /* Vollständige Viewport-Höhe */
  padding: clamp(5rem, 96px, 6rem) var(--spacing-xl) var(--spacing-2xl);
  max-width: 400px;
  position: absolute;
  box-shadow: var(--shadow-level-3);
  overflow-y: auto;
  transform: translateX(100%);
  background: var(--color-surface);
  transition: transform 0.4s var(--animation-curve-primary);
  border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl);
  z-index: 10001; /* Höher als das Menü-Container */
}

/* Close-Button im Mobile-Menü-Panel */
.navigation-mobile-close-button {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface);
  z-index: 10002;
  border-radius: var(--border-radius-md);
  transition: all 0.2s var(--animation-curve-primary);
}

.navigation-mobile-close-button:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.navigation-mobile-close-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* Mobile-Menü für kleine Screens optimieren */
@media (max-width: 479px) {
  .navigation-mobile-panel-ptaokg {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important; /* Vollständige Viewport-Höhe */
    border-radius: 0 !important;
    padding: clamp(4rem, 80px, 5rem) var(--spacing-lg) var(--spacing-xl) !important;
    right: 0 !important;
    left: 0 !important;
  }

  .navigation-mobile-menu-u2p569.navigation-active .navigation-mobile-panel-ptaokg {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
}

/* Mobile-Menü für alle Mobile-Größen */
@media (max-width: 991px) {
  .navigation-mobile-menu-u2p569.navigation-active .navigation-mobile-panel-ptaokg {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
}

.navigation-mobile-links-gyywr {
  gap: var(--spacing-xs);
  margin: 0;
  display: flex;
  padding: 0;
  list-style: none;
  flex-direction: column;
}

.navigation-mobile-item-9ev5cn {
  opacity: 0;
  animation: navigation-slide-in 0.5s var(--animation-curve-primary) forwards;
  transform: translateX(30px);
}

.navigation-mobile-item-9ev5cn:nth-child(1) {
  animation-delay: 0.1s;
}

.navigation-mobile-item-9ev5cn:nth-child(2) {
  animation-delay: 0.15s;
}

.navigation-mobile-item-9ev5cn:nth-child(3) {
  animation-delay: 0.2s;
}

.navigation-mobile-item-9ev5cn:nth-child(4) {
  animation-delay: 0.25s;
}

.navigation-mobile-item-9ev5cn:nth-child(5) {
  animation-delay: 0.3s;
}

.navigation-mobile-link-jw80pq {
  color: var(--color-on-surface);
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
  position: relative;
  font-family: var(--font-family-body);
  font-weight: 500;
  transition: all 0.3s var(--animation-curve-primary);
  white-space: nowrap;
  border-radius: var(--border-radius-lg);
  text-decoration: none;
}

.navigation-mobile-link-jw80pq::before {
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  content: "";
  position: absolute;
  transform: translateY(-50%);
  background: var(--color-primary);
  transition: height 0.3s var(--animation-curve-primary);
  border-radius: var(--border-radius-full);
}

.navigation-mobile-link-jw80pq:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.navigation-mobile-link-jw80pq:hover::before {
  height: 60%;
}

.navigation-mobile-cta-cigju {
  width: 100%;
  opacity: 0;
  margin-top: var(--spacing-2xl);
  transform: translateY(20px);
}

/* ============================================
   Hero Section Styles (Export 1.0)
   ============================================ */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(0.5rem);
  }
}

.hero-section-e82byq {
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

/* Hero Image Wrapper */
.hero-image-wrapper-9tk0ls {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  overflow: hidden;
}

.hero-image-mpvhc9 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top; /* Fokus: höchste Erhebung des Berges (links oben) */
  /* Zoom-In Animation: 1 → 1.06 über 8-10 Sekunden */
  animation: heroImageZoomIn 9s ease-out forwards;
  transform-origin: left top; /* Zoom-Animation startet von links oben */
}

@keyframes heroImageZoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* Overlay: dunkles Grün/Anthrazit, 25% Opacity */
.hero-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* Responsive Crops */
/* Desktop: 16:9 oder leicht breiter - Wrapper kontrolliert Aspect-Ratio */
@media (min-width: 1024px) {
  .hero-image-wrapper-9tk0ls {
    aspect-ratio: 16 / 9;
  }
  .hero-image-mpvhc9 {
    object-fit: cover;
    object-position: left top; /* Fokus: höchste Erhebung des Berges (links oben) */
    width: 100%;
    height: 100%;
  }
}

/* Mobile: eigener Crop, Fokus links oben - natürliche Bildproportionen */
@media (max-width: 1023px) {
  .hero-image-wrapper-9tk0ls {
    /* Keine feste Aspect-Ratio auf Mobile - nutzt natürliche Bildproportionen */
    min-height: 100vh;
  }
  .hero-image-mpvhc9 {
    object-fit: cover;
    object-position: left top; /* Fokus: höchste Erhebung des Berges (links oben) */
    width: 100%;
    height: 100%;
  }
}

.hero-content-8w4ux {
  z-index: 3;
  padding: var(--spacing-xl);
  max-width: var(--content-max-width);
  position: relative;
  animation: heroFadeIn 1.2s var(--animation-curve-primary);
  text-align: center;
}

.hero-badge-s7i2fr {
  gap: var(--spacing-xs);
  color: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-surface) 30%, transparent);
  display: inline-flex;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  align-items: center;
  background: color-mix(in srgb, var(--color-surface) 20%, transparent);
  font-weight: var(--font-weight-body);
  border-radius: var(--border-radius-full);
  margin-bottom: var(--spacing-lg);
  backdrop-filter: blur(12px);
}

.hero-title-y9xk {
  color: var(--color-surface);
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-hero); /* Harmonisiert: clamp(2rem, calc(1.6rem + 24px), 3.25rem) */
  text-wrap: balance;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  text-shadow: 0 4px 24px color-mix(in srgb, var(--color-neutral) 50%, transparent);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-heading);
}

.hero-subtitle-nbf9tf {
  color: var(--color-surface);
  margin: 0 auto var(--spacing-xl);
  opacity: 0.95;
  font-size: var(--font-size-lg);
  max-width: 42rem;
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: var(--line-height-body);
}

.hero-cta-group-rm55do {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-scroll-indicator-6ze1e {
  gap: var(--spacing-sm);
  left: 50%;
  color: var(--color-surface);
  bottom: var(--spacing-xl);
  z-index: 3;
  display: flex;
  font-size: var(--font-size-xs);
  position: absolute;
  animation: scrollBounce 2s infinite;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-line-ei9uu {
  width: 2px;
  height: 3rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-surface) 50%,
    transparent 100%
  );
}

/* ============================================
   Teaser Blocks Section (Export 2.0)
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.teaser-blocks-section {
  width: 100%;
  padding: var(--section-gap) 0 !important;
  margin: 0 !important;
}

.teaser-container {
  margin: 0 auto;
  padding: var(--spacing-4xl) var(--spacing-lg);
  max-width: var(--content-max-width);
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
}

.teaser-grid {
  gap: var(--spacing-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Teaser Grid auf Mobile auf 1 Spalte */
@media (max-width: 991px) {
  .teaser-grid {
    grid-template-columns: 1fr !important;
  }
}

.teaser-card {
  overflow: hidden;
  animation: fadeIn var(--animation-duration-standard) var(--animation-curve-primary) both;
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-level-1);
  transition: transform var(--animation-duration-standard) var(--animation-curve-primary),
    box-shadow var(--animation-duration-standard) var(--animation-curve-primary);
  border-radius: var(--border-radius-lg);
}

.teaser-card:nth-child(1) {
  animation-delay: 0.1s;
}

.teaser-card:nth-child(2) {
  animation-delay: 0.2s;
}

.teaser-card:nth-child(3) {
  animation-delay: 0.3s;
}

.teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

.teaser-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

.teaser-card a {
  color: inherit;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.teaser-card a:focus-visible {
  outline: 2px solid var(--color-outline);
  outline-offset: var(--spacing-xs);
}

.teaser-card-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
}

.teaser-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--animation-duration-slow) var(--animation-curve-primary);
}

.teaser-card:hover .teaser-card-image img {
  transform: scale(1.05);
}

.teaser-image-scrim {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to bottom, transparent 40%, var(--color-scrim));
}

.teaser-card-content {
  gap: var(--spacing-sm);
  display: flex;
  padding: var(--spacing-lg);
  flex-direction: column;
}

.teaser-icon {
  color: var(--color-accent);
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-xs);
}

.teaser-card-title {
  color: var(--color-on-surface);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-xs);
}

.teaser-card-text {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-md);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

/* ============================================
   WPBakery Standard-Elemente: Teaser-Mapping
   Ziel: Pure Standard WPBakery (vc_row/vc_column/vc_single_image/vc_custom_heading/vc_column_text)
         optisch wie Export 2.0 Teaser-Kacheln.
   ============================================ */
/* Container (Impreza Row -> Teaser Container) */
.teaser-blocks-section.wpb_row {
  padding: var(--section-gap) 0 !important;
  margin: 0 !important;
}
.teaser-blocks-section.wpb_row > .l-section-h {
  margin: 0 auto;
  padding: var(--spacing-4xl) var(--spacing-lg);
  max-width: var(--content-max-width);
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
}

/* Grid (Impreza Columns Wrapper -> Teaser Grid) */
/* Original: .teaser-grid { gap: var(--spacing-2xl); display: grid; grid-template-columns: repeat(3, 1fr); } */
.teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row {
  position: relative;
  display: grid !important;
  gap: var(--spacing-2xl) !important; /* Original: var(--spacing-2xl) = 2rem */
  /* Original (Desktop): 3 Spalten */
  /* minmax(0,1fr) verhindert, dass Inhalte die Spalten „aufblasen“ (3. Kachel verschwindet sonst rechts) */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 991px) {
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row {
    grid-template-columns: 1fr !important;
  }

  /* Mobile (Original): 1 Spalte, Reihenfolge explizit fixieren */
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row > .wpb_column:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row > .wpb_column:nth-of-type(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row > .wpb_column:nth-of-type(3) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  /* Mobile: Cards sollten volle Breite nutzen */
  .teaser-blocks-section.wpb_row .wpb_column.teaser-card {
    width: 100% !important;
  }
}

/* Desktop: Reihenfolge/Placement explizit fixieren (verhindert sporadisches „3. Kachel untere Zeile“) */
@media (min-width: 992px) {
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row > .wpb_column:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row > .wpb_column:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .teaser-blocks-section.wpb_row .l-section-h > .g-cols.vc_row > .wpb_column:nth-of-type(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}

/* Card (vc_column -> teaser-card) */
/* Original: .teaser-card { overflow: hidden; border-radius: var(--border-radius-lg); background: var(--color-surface-elevated); box-shadow: var(--shadow-level-1); } */
.teaser-blocks-section.wpb_row .wpb_column.teaser-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-level-1);
  transition: transform var(--animation-duration-standard) var(--animation-curve-primary),
    box-shadow var(--animation-duration-standard) var(--animation-curve-primary);

  /* IMPORTANT:
     WPBakery/Impreza columns can have width/max-width/float from the old column system.
     When we switch the row wrapper to CSS grid, those width rules make cards too narrow
     and can break flow (3rd card drops below). Force grid-friendly sizing. */
  float: none !important;
  width: auto !important; /* Grid-Item nutzt automatisch die Spaltenbreite */
  max-width: 100% !important; /* Verhindert Overflow */
  min-width: 0 !important; /* Verhindert Grid-Overflow bei langen Texten */

  /* WICHTIG: Impreza/US-Core kann „Appear“-Animationen/Opacity setzen.
     Für Pixel-Presets und um „verschwindende“ Kacheln zu verhindern, hart auf sichtbar. */
  opacity: 1 !important;
  animation: none !important;
  transform: none;
}
.teaser-blocks-section.wpb_row .wpb_column.teaser-card:hover,
.teaser-blocks-section.wpb_row .wpb_column.teaser-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

/* Column-Link Overlay: handled above via `.g-cols > a.vc_column-link` (Impreza rendert Links als Geschwister). */

/* Inner spacing: vc_column-inner = teaser-card-content (Original) */
.teaser-blocks-section.wpb_row .wpb_column.teaser-card > .vc_column-inner {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm) !important; /* Original: .teaser-card-content gap */
}
.teaser-blocks-section.wpb_row .wpb_column.teaser-card > .vc_column-inner > .wpb_wrapper {
  margin: 0 !important;
}

/* Image (vc_single_image) */
.teaser-blocks-section.wpb_row .wpb_single_image.teaser-card-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
  margin: 0 !important;
  /* WPBakery single image can shrink to intrinsic width (external_img_size).
     Ensure it always fills the card width. */
  display: block !important;
}
.teaser-blocks-section.wpb_row .wpb_single_image.teaser-card-image .vc_single_image-wrapper,
.teaser-blocks-section.wpb_row .wpb_single_image.teaser-card-image .vc_figure {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

/* Some WPBakery variants wrap external images with an extra ".vc_single_image-wrapper".
   Ensure it doesn't inline-shrink. */
.teaser-blocks-section.wpb_row .wpb_single_image.teaser-card-image .vc_single_image-wrapper {
  display: block !important;
  width: 100% !important;
}
.teaser-blocks-section.wpb_row .wpb_single_image.teaser-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--animation-duration-slow) var(--animation-curve-primary);
}
.teaser-blocks-section.wpb_row .wpb_column.teaser-card:hover .wpb_single_image.teaser-card-image img {
  transform: scale(1.05);
}
/* Scrim (via pseudo-element statt extra DIV) */
.teaser-blocks-section.wpb_row .wpb_single_image.teaser-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, transparent 40%, var(--color-scrim));
  pointer-events: none;
}

/* Icon (via vc_column_text mit inline SVG) */
/* Original: .teaser-card-content { padding: var(--spacing-lg); } */
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-icon-block {
  margin: 0 !important;
}
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-icon-block .wpb_wrapper {
  padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg) !important; /* Top + sides wie Original */
  margin: 0 !important;
}
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-icon-block p {
  margin: 0 !important;
}
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-icon-block .teaser-icon {
  color: var(--color-accent);
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-xs) !important; /* Original: .teaser-icon margin-bottom */
}

/* Content (Heading + Text) */
/* Original: gap zwischen Elementen wird durch vc_column-inner gap übernommen */
.teaser-blocks-section.wpb_row .wpb_custom_heading.teaser-card-title,
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-card-text {
  margin: 0 !important;
}
.teaser-blocks-section.wpb_row .wpb_custom_heading.teaser-card-title {
  padding: 0 var(--spacing-lg) !important; /* Nur sides, kein top (gap übernimmt) */
}
.teaser-blocks-section.wpb_row .wpb_custom_heading.teaser-card-title h3 {
  margin: 0 !important;
  margin-bottom: var(--spacing-xs) !important; /* Original: .teaser-card-title margin-bottom */
  color: var(--color-on-surface);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-card-text .wpb_wrapper {
  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) !important; /* Nur sides + bottom */
}
.teaser-blocks-section.wpb_row .wpb_text_column.teaser-card-text p {
  margin: 0 !important;
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-md);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

/* ============================================
   Button Styles (Export 1.0 - btn-mahlaf)
   ============================================ */
.btn-mahlaf {
  gap: var(--spacing-xs);
  color: var(--color-on-surface);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-level-1);
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: 1.2;
  transition: all var(--animation-duration-fast) var(--animation-curve-primary);
  user-select: none;
  white-space: nowrap;
  border-radius: var(--border-radius-md);
  letter-spacing: var(--letter-spacing-body);
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
}

.btn-mahlaf:focus-visible {
  outline: 3px solid var(--color-outline);
  border-radius: var(--border-radius-md);
  outline-offset: 3px;
}

.btn-mahlaf:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  pointer-events: none;
}

.btn-primary-94p8ji {
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  transition: all 0.3s var(--animation-curve-primary);
}

.btn-primary-94p8ji:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-primary) 86%, black 14%);
  background-color: color-mix(in oklab, var(--color-primary) 86%, black 14%);
  /* Hover: Schriftfarbe bleibt weiß für besseren Kontrast */
  color: var(--color-on-primary);
}

.btn-outline-08xl2 {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
  background-color: transparent;
}

.btn-outline-08xl2:hover:not(:disabled) {
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.btn-lg-soiiys {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-md);
}

/* ============================================
   Button Styles (Export 2.0 - .btn)
   ============================================ */
.btn {
  gap: var(--spacing-xs);
  color: var(--color-on-surface);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-level-1);
  transition: all var(--animation-duration-fast) var(--animation-curve-primary);
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: 1.2;
  user-select: none;
  white-space: nowrap;
  border-radius: var(--border-radius-md);
  letter-spacing: var(--letter-spacing-body);
  justify-content: center;
  text-decoration: none;
  background-color: var(--color-surface-elevated);
}

.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: calc(var(--border-radius-md) + 1px);
  outline-offset: 3px;
}

.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(20%);
  opacity: 0.6;
  pointer-events: none;
}

.btn-primary {
  color: var(--color-on-primary);
  box-shadow: var(--shadow-level-2);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--color-primary) 88%, black 12%);
  background-color: color-mix(in oklab, var(--color-primary) 88%, black 12%);
}

.btn-accent {
  color: var(--color-on-primary);
  box-shadow: var(--shadow-level-1);
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.btn-accent:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--color-accent) 88%, black 12%);
  background-color: color-mix(in oklab, var(--color-accent) 88%, black 12%);
}

.btn-outline {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
  background-color: transparent;
}

.btn-outline:hover:not(:disabled) {
  color: var(--color-on-primary);
  box-shadow: var(--shadow-level-1);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/* ============================================
   Responsive Styles
   ============================================ */
/* Tablet Breakpoint (768px - 991px) */
@media (max-width: 991px) and (min-width: 769px) {
  .navigation-logo-icon-r4it6w {
    height: 75px;
    max-width: 320px;
  }

  .footer-logo-image-fkk2jqc {
    height: 100px;
    max-width: 380px;
  }
}

@media (max-width: 991px) {
  /* Container-Breiten für Tablet/Mobile optimieren - KEINE max-width mehr */
  .navigation-container-7hkdfd,
  .hero-content-8w4ux,
  .teaser-container,
  .highlights-container,
  .wetter-webcam-container,
  .region-container,
  .newsletter-container,
  .gallery-container,
  .footer-content-wrapper-hrwskj {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important; /* Zentrierung sicherstellen */
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    box-sizing: border-box;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .navigation-links-wrapper-xoyi5 {
    display: none;
  }

  .navigation-mobile-toggle-ccnk28 {
    display: block;
  }
}

/* Mobile Breakpoint: Öffnungszeiten erst bei sehr kleinen Bildschirmen ausblenden */
@media (max-width: 600px) {
  /* Öffnungszeiten auf sehr kleinen Bildschirmen ausblenden */
  .navigation-hours-header-8k3jf {
    display: none !important;
  }

  .navigation-logo-icon-r4it6w {
    height: 65px;
    max-width: 260px;
  }

  .footer-logo-image-fkk2jqc {
    height: 85px;
    max-width: 320px;
  }

  .hero-content-8w4ux {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .hero-cta-group-rm55do {
    width: 100%;
    flex-direction: column;
  }

  .hero-cta-group-rm55do .btn-mahlaf {
    width: 100%;
  }

  .teaser-grid {
    gap: var(--spacing-3xl) !important; /* Größerer Abstand zwischen Kacheln auf Mobile */
    grid-template-columns: 1fr !important;
    padding: 0;
    row-gap: var(--spacing-3xl) !important; /* Expliziter row-gap für vertikalen Abstand */
  }

  .teaser-card {
    flex-direction: column;
    margin-bottom: var(--spacing-2xl) !important; /* Zusätzlicher Abstand nach jeder Kachel */
  }

  .teaser-card:last-child {
    margin-bottom: 0 !important; /* Kein Abstand nach der letzten Kachel */
  }

  .teaser-card-image {
    flex: 0 0 auto;
    width: 100%;
    height: 220px;
  }

  .teaser-card-content {
    flex: 1;
    padding: var(--spacing-lg);
  }

  .highlights-grid {
    grid-template-columns: 1fr !important;
    row-gap: var(--spacing-lg);
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Highlight-Karten Padding/Margin auf Mobile reduzieren */
  .highlights-container {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .highlights-panel {
    padding: var(--spacing-md) !important;
    margin: 0 !important;
  }

  .highlight-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: var(--spacing-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Wetter-Webcam: 2 Spalten -> 1 Spalte auf Mobile */
  .wetter-webcam-container {
    grid-template-columns: 1fr !important;
    padding: var(--spacing-md);
    gap: var(--spacing-lg);
  }

  /* Footer: 4 Spalten -> 1 Spalte auf Mobile */
  .footer-main-section-h259ea {
    grid-template-columns: 1fr !important;
  }

  /* Footer Hours: 3 Spalten -> 1 Spalte auf Mobile */
  .footer-hours-grid-ekp9ak {
    grid-template-columns: 1fr !important;
  }

  /* Region Grid: 2 Spalten -> 1 Spalte auf Mobile */
  .region-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .region-hero-image {
    height: 300px;
  }

  .region-quick-access {
    padding: var(--spacing-md);
  }

  .newsletter-cta-panel {
    order: -1;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .news-masonry {
    column-count: 1;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "hero"
      "feat"
      "a"
      "b"
      "c"
      "d";
  }

  .gallery-item--hero {
    height: 300px;
  }
}

@media (max-width: 479px) {
  .navigation-mobile-panel-ptaokg {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: clamp(4rem, 80px, 5rem) var(--spacing-lg) var(--spacing-xl);
  }

  .navigation-brand-name-fldq2t {
    display: none;
  }

  .navigation-logo-icon-r4it6w {
    height: 50px;
    max-width: 200px;
  }

  .footer-logo-image-fkk2jqc {
    height: 70px;
    max-width: 280px;
  }

  /* Hero Section Mobile Optimierungen */
  .hero-content-8w4ux {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .hero-title-y9xk {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
  }

  .hero-subtitle-nbf9tf {
    font-size: clamp(0.875rem, 4vw, 1.125rem);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
  }

  .hero-cta-group-rm55do {
    gap: var(--spacing-sm);
  }

  .hero-cta-group-rm55do .btn-mahlaf {
    min-height: 44px; /* Touch-friendly */
    font-size: var(--font-size-md);
    padding: var(--spacing-md) var(--spacing-lg);
    width: 100%;
  }

  /* Button-Styles für Mobile optimieren */
  .btn,
  .btn-mahlaf {
    min-height: 44px; /* Touch-friendly */
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    width: 100%; /* Buttons auf Mobile volle Breite */
  }

  /* Vereinheitlichte Font-Größen für Mobile */
  
  /* Haupttitel (Section-Titel) */
  .section-title,
  h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.3 !important;
  }

  /* Untertitel (Card-Titel, h2, h3) */
  .teaser-card-title,
  .highlight-card-title,
  .news-title,
  h2,
  h3 {
    font-size: clamp(1.125rem, 4.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
  }

  /* Body-Text - Vereinheitlicht */
  body,
  .teaser-card-text,
  .highlight-card-text,
  .news-excerpt,
  p {
    font-size: clamp(0.9375rem, 3.75vw, 1rem) !important;
    line-height: 1.6 !important;
  }

  /* Kleine Texte (Meta, Labels) */
  .news-meta,
  .teaser-icon + span,
  small {
    font-size: clamp(0.8125rem, 3.25vw, 0.875rem) !important;
    line-height: 1.5 !important;
  }

  .hero-scroll-indicator-6ze1e {
    display: none;
  }

  .teaser-card-image {
    width: 100%;
    height: 200px;
  }

  .teaser-card-content {
    padding: var(--spacing-md);
  }

  .teaser-icon {
    width: 32px;
    height: 32px;
  }

  /* Button Touch-Targets für Mobile */
  .btn,
  .btn-mahlaf {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .btn-sm {
    min-height: 40px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Navigation Mobile Optimierungen */
  .navigation-container-7hkdfd {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .navigation-mobile-toggle-ccnk28 {
    min-width: 44px;
    min-height: 44px;
  }

  .highlights-panel {
    padding: var(--spacing-lg);
  }

  .wetter-info {
    padding: var(--spacing-md);
  }

  .webcam-panel {
    padding: var(--spacing-sm);
  }

  .footer-content-wrapper-hrwskj {
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) !important;
    padding-left: var(--spacing-md) !important; /* Symmetrisches Padding */
    padding-right: var(--spacing-md) !important; /* Symmetrisches Padding */
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    display: block !important;
    float: none !important;
  }

  .footer-main-section-h259ea {
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Alle Grid-Items im Footer-Main-Section begrenzen */
  .footer-main-section-h259ea > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Footer-Contact-Items begrenzen */
  .footer-contact-item-esoj5q {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Footer-Logo begrenzen */
  .footer-logo-wrapper-4ngopj {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-logo-image-fkk2jqc {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Footer-Hours-Section: Volle Breite auf Mobile, damit Text nicht abgeschnitten wird */
  .footer-main-section-h259ea > .footer-hours-section-sox4ha {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    /* Grid-Item: Volle Breite auf Mobile */
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: start !important;
    overflow: visible !important;
  }

  .footer-hours-section-sox4ha {
    padding: var(--spacing-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  .footer-hours-wrapper-nkw1n {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .footer-hours-content-89qj9t {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 0 !important;
    box-sizing: border-box !important;
  }

  .footer-hours-icon-cqtxlf {
    width: 48px;
    height: 48px;
  }

  .footer-social-link-jffnsw {
    width: 36px;
    height: 36px;
  }

  .footer-legal-wrapper-4woica {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Footer-Bottom-Section begrenzen */
  .footer-bottom-section-xpd5f3 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  .footer-social-wrapper-b1yxs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
  }

  .footer-social-links-hf8kvk {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
  }

  .footer-legal-wrapper-4woica {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .footer-legal-links-tx3qn9 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
  }

  .region-grid {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .region-hero-image {
    height: 250px;
  }

  .newsletter-container {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .gallery-container {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .gallery-item--hero {
    height: 250px;
  }

  /* Container-Breiten für kleine Mobile-Screens */
  .navigation-container-7hkdfd {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Section Padding für Mobile optimieren */
  .teaser-blocks-section,
  .highlights-section,
  .wetter-webcam-section,
  .region-section,
  .newsletter-section,
  .gallery-section {
    padding: var(--spacing-xl) 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Container Padding für Mobile optimieren - KEINE max-width */
  .teaser-container,
  .highlights-container,
  .region-container,
  .newsletter-container,
  .gallery-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important; /* Zentrierung sicherstellen */
    padding: var(--spacing-lg) var(--spacing-md) !important;
    padding-left: var(--spacing-md) !important; /* Symmetrisches Padding */
    padding-right: var(--spacing-md) !important; /* Symmetrisches Padding */
    box-sizing: border-box;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .wetter-webcam-container {
    padding: var(--spacing-sm);
    gap: var(--spacing-md);
  }

  .region-grid {
    padding: var(--spacing-lg) var(--spacing-md) !important;
    padding-left: var(--spacing-md) !important; /* Symmetrisches Padding */
    padding-right: var(--spacing-md) !important; /* Symmetrisches Padding */
    gap: var(--spacing-lg);
    grid-template-columns: 1fr !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .region-container {
    grid-template-columns: 1fr !important;
    margin: 0 auto !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .region-quick-access,
  .region-quick-actions {
    padding: var(--spacing-md) !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .region-tips-card {
    padding: var(--spacing-md) !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    margin: 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Region-Grid begrenzen */
  .region-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  /* Region-Lead begrenzen */
  .region-lead {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Region-Actions begrenzen */
  .region-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .region-quick-access .btn {
    width: 100%;
    text-align: left;
    padding: var(--spacing-md);
    min-height: 48px;
  }

  .newsletter-container {
    padding: var(--spacing-xl) var(--spacing-sm);
  }

  .newsletter-cta-panel {
    padding: var(--spacing-md);
  }

  .gallery-container {
    padding: var(--spacing-xl) var(--spacing-sm);
  }

  /* Teaser-Cards Mobile Optimierung */
  .teaser-card {
    margin: 0;
    border-radius: var(--border-radius-md);
  }

  .teaser-card-content {
    padding: var(--spacing-md);
  }

  /* Highlights Mobile Optimierung */
  .highlights-panel {
    padding: var(--spacing-md);
  }

  /* Wetter-Webcam Mobile Optimierung */
  .wetter-info {
    padding: var(--spacing-sm);
  }

  .webcam-panel {
    padding: var(--spacing-sm);
  }
}

/* ============================================
   Highlights Section (Export 2.0)
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  color: var(--color-on-surface);
  margin: 0 0 var(--spacing-md) 0;
  font-size: clamp(2rem, 60px, 3.5rem);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.highlights-section {
  width: 100%;
  padding: var(--section-gap) 0 !important;
  margin: 0 !important;
}

.highlights-container {
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg) !important;
  max-width: var(--content-max-width);
}

.highlights-panel {
  padding: var(--spacing-xl) !important;
  background: var(--color-surface);
  box-shadow: var(--shadow-level-1);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.highlights-grid {
  display: grid;
  row-gap: var(--spacing-xl);
  column-gap: var(--spacing-2xl);
  margin-top: var(--spacing-md) !important;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
}

/* Highlights Grid auf Mobile auf 1 Spalte */
@media (max-width: 991px) {
  .highlights-grid {
    grid-template-columns: 1fr !important;
  }
}

.highlight-card {
  gap: var(--spacing-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  padding: var(--spacing-md);
  animation: fadeInUp var(--animation-duration-slow) var(--animation-curve-primary) both;
  background: var(--color-surface-elevated);
  transition: transform var(--animation-duration-standard) var(--animation-curve-primary),
    box-shadow var(--animation-duration-standard) var(--animation-curve-primary);
  border-radius: var(--border-radius-md);
  flex-direction: column;
}

.highlight-card:nth-child(1) {
  animation-delay: 0.1s;
}

.highlight-card:nth-child(2) {
  animation-delay: 0.2s;
}

.highlight-card:nth-child(3) {
  animation-delay: 0.3s;
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

.highlight-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-md);
}

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

.highlight-scrim {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to bottom, transparent 50%, var(--color-scrim));
}

.highlight-label {
  top: var(--spacing-sm);
  color: var(--color-on-surface);
  right: var(--spacing-sm);
  padding: 4px var(--spacing-sm);
  z-index: 3;
  position: absolute;
  font-size: var(--font-size-sm);
  background: var(--color-backplate);
  font-weight: 500;
  border-radius: var(--border-radius-full);
}

.highlight-content {
  gap: var(--spacing-sm);
  display: flex;
  flex-direction: column;
}

.highlight-icon {
  color: var(--color-accent);
  width: 32px;
  height: 32px;
}

.highlight-title {
  color: var(--color-on-surface);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-heading);
}

.highlight-text {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-md);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.btn-accent-e8i7v7 {
  color: var(--color-on-surface);
  border-color: color-mix(in oklab, var(--color-accent) 84%, #000 16%);
  background-color: var(--color-accent);
}

.btn-accent-e8i7v7:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-accent) 86%, black 14%);
  background-color: color-mix(in oklab, var(--color-accent) 86%, black 14%);
}

.btn-sm-uv7aa {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
}

/* ============================================
   Wetter-Webcam Section (Export 2.0)
   ============================================ */
.wetter-webcam-section {
  width: 100%;
  padding: var(--section-gap) 0 !important;
  margin: 0 !important;
}

.wetter-webcam-container {
  gap: var(--section-gap);
  margin: 0 auto;
  display: grid;
  padding: var(--spacing-lg);
  max-width: var(--content-max-width);
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  box-shadow: var(--shadow-level-1);
  border-radius: var(--border-radius-lg);
  grid-template-columns: 1fr 1fr; /* Gleichmäßige Aufteilung statt 40% 60% */
}

/* Webcam deaktiviert: Nur Wetter-Info, volle Breite */
.wetter-webcam-container--no-webcam {
  grid-template-columns: 1fr !important;
}

.wetter-info {
  gap: var(--spacing-md);
  display: flex;
  padding: var(--spacing-lg);
  background: var(--color-surface-elevated);
  border-radius: var(--border-radius-md);
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.wetter-heading {
  color: var(--color-on-surface);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}

.wetter-subtitle {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-md);
  font-family: var(--font-family-body);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.wetter-data {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.wetter-item {
  gap: var(--spacing-sm);
  border: 1px solid var(--color-border);
  display: flex;
  padding: var(--spacing-sm);
  background: color-mix(in srgb, var(--color-surface) 95%, var(--color-primary) 5%);
  align-items: center;
  border-radius: var(--border-radius-sm);
}

.wetter-icon {
  color: var(--color-accent);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.wetter-details {
  gap: 2px;
  display: flex;
  flex-direction: column;
}

.wetter-label {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-body);
}

.wetter-value {
  color: var(--color-on-surface);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
}

/* Kleine Variante für "Letzte Aktualisierung" */
.wetter-item--update {
  opacity: 0.75;
  border-color: color-mix(in srgb, var(--color-border) 50%, transparent);
}

.wetter-icon--small {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.wetter-label--small {
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

.wetter-value--small {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-body);
  opacity: 0.9;
}

.webcam-panel {
  padding: var(--spacing-md);
  overflow: hidden;
  position: relative;
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-level-2);
  border-radius: var(--border-radius-md);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.webcam-header {
  gap: var(--spacing-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.webcam-icon {
  color: var(--color-accent);
  width: 24px;
  height: 24px;
}

.webcam-title {
  color: var(--color-on-surface);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: 500;
  margin-right: auto;
}

.webcam-status {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
}

.webcam-preview {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
}

.webcam-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.webcam-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to bottom, transparent 60%, var(--color-scrim));
}

.webcam-actions {
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
}

/* ============================================
   Region-CTA Section (Export 2.0)
   ============================================ */
.region-cta-section {
  width: 100%;
  padding: var(--section-gap) 0;
}

.region-grid {
  gap: var(--section-gap);
  margin: 0 auto;
  display: grid;
  padding: var(--spacing-3xl) var(--spacing-lg);
  max-width: var(--content-max-width);
  grid-template-columns: 2fr 1fr;
}

.region-lead {
  gap: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}

.region-actions {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.region-hero-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  border-radius: var(--border-radius-lg);
}

.region-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.region-intro {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.region-tips-card {
  border: 1px solid var(--color-border);
  padding: var(--spacing-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-level-1);
  border-radius: var(--border-radius-lg);
}

.region-quick-actions {
  gap: var(--spacing-sm);
  display: flex;
  flex-direction: column;
}

.region-quick-actions .btn {
  width: 100%;
  justify-content: flex-start;
}

.region-scrim {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to bottom, transparent 40%, var(--color-scrim));
}

.region-benefit {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: var(--line-height-body);
}

.region-details {
  color: var(--color-on-surface);
  font-size: var(--font-size-md);
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
}

.region-tips-title {
  color: var(--color-on-surface);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
}

.region-tips-list {
  gap: var(--spacing-sm);
  margin: 0;
  display: flex;
  padding: 0;
  list-style: none;
  flex-direction: column;
}

.region-quick-title {
  color: var(--color-on-surface);
  font-size: var(--font-size-md);
  font-family: var(--font-family-heading);
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
}

.region-tip-item {
  color: var(--color-on-surface-secondary);
  position: relative;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
  padding-left: var(--spacing-md);
}

.region-tip-item strong {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-heading);
}

.region-tip-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* ============================================
   Newsletter Section (Export 2.0)
   ============================================ */
.newsletter-section {
  width: 100%;
  padding: var(--section-gap) 0;
}

.newsletter-container {
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-lg);
  max-width: var(--content-max-width);
  background: var(--color-surface);
  box-shadow: var(--shadow-level-1);
  border-radius: var(--border-radius-lg);
}

.newsletter-cta-panel {
  gap: var(--spacing-md);
  color: var(--color-on-primary);
  border: 1px solid var(--color-outline);
  display: flex;
  padding: var(--spacing-lg);
  background: var(--color-primary);
  box-shadow: var(--shadow-level-2);
  text-align: center;
  align-items: center;
  border-radius: var(--border-radius-xl);
  margin-bottom: var(--spacing-2xl);
  flex-direction: column;
}

.news-masonry {
  column-gap: var(--spacing-lg);
  column-count: 3;
}

/* News-Masonry auf Mobile auf 1 Spalte */
@media (max-width: 991px) {
  .news-masonry {
    column-count: 1 !important;
    column-gap: var(--spacing-lg);
  }
}

.newsletter-icon {
  color: var(--color-on-primary);
  width: 40px;
  height: 40px;
}

.newsletter-heading {
  color: var(--color-on-primary);
  margin: 0;
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

.newsletter-text {
  color: var(--color-on-primary);
  font-size: var(--font-size-md);
  max-width: 600px;
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
}

.newsletter-form {
  gap: var(--spacing-sm);
  width: 100%;
  display: flex;
  max-width: 500px;
  margin-top: var(--spacing-sm);
}

.newsletter-input {
  flex: 1;
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-md);
  background: var(--color-surface);
  font-family: var(--font-family-body);
  border-radius: var(--border-radius-sm);
}

.newsletter-privacy {
  color: var(--color-on-primary);
  opacity: 0.9;
  font-size: var(--font-size-sm);
  max-width: 600px;
}

.news-card {
  width: 100%;
  border: 1px solid var(--color-border);
  display: inline-block;
  overflow: hidden;
  background: var(--color-surface-elevated);
  transition: transform var(--animation-duration-standard) var(--animation-curve-primary),
    box-shadow var(--animation-duration-standard) var(--animation-curve-primary);
  break-inside: avoid;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-xl);
  /* WICHTIG: position: relative ist notwendig, damit .news-card-scrim sich relativ zur Card positioniert */
  position: relative;
}

.news-card--hero {
  /* Zusätzliche Styles für Hero-Card können hier hinzugefügt werden */
}

.news-card img {
  width: 100%;
  height: auto;
  display: block;
}

.news-card-scrim {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to bottom, transparent 40%, var(--color-scrim));
}

.news-card-content {
  gap: var(--spacing-xs);
  display: flex;
  padding: var(--spacing-md);
  flex-direction: column;
  position: relative;
  z-index: 3;
}

.news-meta {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.news-title {
  color: var(--color-on-surface);
  margin: 0;
  font-size: var(--font-size-lg); /* Harmonisiert: 1.25rem */
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}

.news-excerpt {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-md);
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
}

/* ============================================
   Gallery Section (Export 2.0)
   ============================================ */
.gallery-section {
  width: 100%;
  padding: var(--section-gap) 0;
}

.gallery-container {
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-lg);
  max-width: var(--content-max-width);
}

.gallery-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.gallery-grid {
  gap: var(--spacing-lg);
  display: grid;
  margin-bottom: var(--spacing-2xl);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas: 
    "hero hero hero"
    "feat a b"
    "feat c d";
}

/* Gallery Grid auf Mobile auf 1 Spalte */
@media (max-width: 991px) {
  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "hero"
      "feat"
      "a"
      "b"
      "c"
      "d" !important;
  }
}

.gallery-item:nth-child(1) {
  grid-area: hero;
}

.gallery-item:nth-child(2) {
  grid-area: feat;
}

.gallery-item:nth-child(3) {
  grid-area: a;
}

.gallery-item:nth-child(4) {
  grid-area: b;
}

.gallery-item:nth-child(5) {
  grid-area: c;
}

.gallery-item:nth-child(6) {
  grid-area: d;
}

.gallery-footer {
  gap: var(--spacing-md);
  display: flex;
  border-top: 1px solid var(--color-border);
  align-items: center;
  padding-top: var(--spacing-xl);
  justify-content: space-between;
}

.gallery-item {
  border: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: none;
  transition: transform var(--animation-duration-fast) var(--animation-curve-primary),
    box-shadow var(--animation-duration-fast) var(--animation-curve-primary);
  border-radius: var(--border-radius-md);
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

.gallery-item--hero {
  height: 400px;
}

.gallery-item--feat {
  height: 100%;
}

.gallery-item:not(.gallery-item--hero):not(.gallery-item--feat) {
  height: 200px;
}

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

.gallery-credit {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
}

.home-gallery-scrim1,
.home-gallery-scrim2,
.home-gallery-scrim3,
.home-gallery-scrim4,
.home-gallery-scrim5,
.home-gallery-scrim6 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to bottom, transparent 50%, var(--color-scrim));
}

.home-gallery-caption1,
.home-gallery-caption2 {
  left: 0;
  color: var(--color-on-surface);
  right: 0;
  bottom: 0;
  padding: var(--spacing-md);
  z-index: 3;
  position: absolute;
  background: var(--color-backplate);
}

.gallery-label {
  color: var(--color-on-surface-secondary);
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.gallery-title {
  color: var(--color-on-surface);
  margin: 0;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: 500;
}

/* ============================================
   Scroll-to-Top Button
   ============================================ */
.scroll-to-top-button {
  position: fixed;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  width: 48px;
  height: 48px;
  display: none; /* Wird per JavaScript angezeigt */
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-level-2);
  z-index: 999;
  transition: all 0.3s var(--animation-curve-primary);
  opacity: 0;
  transform: translateY(20px);
}

.scroll-to-top-button.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.scroll-to-top-button:hover {
  background: color-mix(in oklab, var(--color-primary) 86%, black 14%);
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-3);
}

.scroll-to-top-button:active {
  transform: translateY(-2px);
}

.scroll-to-top-button svg {
  width: 24px;
  height: 24px;
}

/* Scroll-to-Top Button auf Mobile anpassen */
@media (max-width: 991px) {
  .scroll-to-top-button {
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 44px;
    height: 44px;
  }

  .scroll-to-top-button svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   Footer Styles (Export 1.0)
   ============================================ */
@keyframes footer-subtle-zoom {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes footer-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.footer-container-gsa86m {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  background: var(--color-surface);
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: block;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

.footer-background-wrapper-q591j {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  position: absolute;
}

.footer-background-image-166fk3 {
  top: 0;
  left: 0;
  width: 100%;
  filter: brightness(0.4) saturate(1.2);
  height: 100%;
  position: absolute;
  animation: footer-subtle-zoom 30s ease-in-out infinite alternate;
  object-fit: cover;
  transform: scale(1.05);
  object-position: center;
  z-index: 1;
}

.footer-organic-overlay-crv99y {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 95%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 92%, transparent) 30%,
    color-mix(in srgb, var(--color-surface) 88%, transparent) 100%
  );
}

.footer-content-wrapper-hrwskj {
  margin: 0 auto !important; /* Zentrierung sicherstellen */
  z-index: 3;
  padding: clamp(3rem, 72px, 5rem) var(--spacing-lg) var(--spacing-2xl) !important;
  padding-left: var(--spacing-lg) !important; /* Explizit gesetzt für Symmetrie */
  padding-right: var(--spacing-lg) !important; /* Explizit gesetzt für Symmetrie */
  /* Desktop: Content-Breite wie andere Sections (in Flucht mit Wetter-Widget oben) */
  max-width: var(--content-max-width) !important;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  display: block;
  float: none;
  clear: both;
}

.footer-main-section-h259ea {
  gap: var(--spacing-2xl);
  display: grid;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
  margin-bottom: clamp(3rem, 60px, 4rem);
  padding-bottom: clamp(2rem, 48px, 3rem);
  /* Desktop: 3 Spalten für erste Zeile (Logo, Öffnungszeiten, Kontakt), Menüs in neuer Zeile */
  grid-template-columns: 1fr 2fr 2.2fr;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.footer-links-column-placeholder {
  visibility: hidden;
  min-height: 1px;
}

.footer-legal-note {
  color: color-mix(in srgb, var(--color-on-surface) 60%, transparent);
  font-size: var(--font-size-xs);
  margin: 0;
}
.footer-legal-note a {
  color: currentColor;
  opacity: 0.75;
  text-decoration: underline;
}

.footer-brand-column-oisim {
  grid-column: span 1;
}

.footer-logo-wrapper-4ngopj {
  gap: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
}

.footer-logo-image-fkk2jqc {
  height: 120px;
  width: auto;
  max-width: 450px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--color-primary) 20%, transparent));
  transition: transform var(--animation-duration-standard) var(--animation-curve-primary);
  transform-origin: center;
}

.footer-logo-wrapper-4ngopj:hover .footer-logo-image-fkk2jqc {
  transform: translateY(-2px) scale(1.02);
}

.footer-brand-text-hk4jw {
  display: none; /* Logo enthält bereits den Text */
}

.footer-brand-name-ig45zo {
  display: none; /* Logo enthält bereits den Text */
}

.footer-brand-tagline-0jkeos {
  display: none; /* Logo enthält bereits den Text */
}

.footer-brand-description-0rdz2p {
  color: var(--color-on-surface-secondary);
  margin: 0;
  opacity: 0.8;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.footer-links-column-jdyqnm {
  grid-column: span 1;
}

/* Desktop: Menüs in neuer Zeile darunter, nebeneinander */
@media (min-width: 768px) {
  .footer-main-section-h259ea > .footer-links-column-jdyqnm:first-of-type {
    /* Erste Menü-Spalte: Neue Zeile, erste Spalte */
    grid-column: 1;
    grid-row: 2;
  }
  
  .footer-main-section-h259ea > .footer-links-column-jdyqnm:last-of-type {
    /* Zweite Menü-Spalte: Neue Zeile, zweite Spalte */
    grid-column: 2;
    grid-row: 2;
  }
}

.footer-column-title-0w2yj8 {
  color: var(--color-on-surface);
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-md);
  position: relative;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  padding-bottom: var(--spacing-sm);
}

.footer-column-title-0w2yj8::after {
  left: 0;
  width: 32px;
  bottom: 0;
  height: 2px;
  content: "";
  position: absolute;
  background: var(--color-primary);
  transition: width var(--animation-duration-standard) var(--animation-curve-primary);
  border-radius: var(--border-radius-full);
}

.footer-links-column-jdyqnm:hover .footer-column-title-0w2yj8::after {
  width: 48px;
}

.footer-links-list-r4ibog {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link-item-l15f39 {
  margin-bottom: var(--spacing-sm);
}

.footer-link-wh2o4 {
  gap: var(--spacing-xs);
  color: var(--color-on-surface-secondary);
  display: inline-flex;
  opacity: 0.85;
  font-size: var(--font-size-sm);
  position: relative;
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  transition: all var(--animation-duration-fast) var(--animation-curve-primary);
  padding-left: var(--spacing-sm);
  text-decoration: none;
}

.footer-link-wh2o4::before {
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  content: "";
  opacity: 0;
  position: absolute;
  transform: translateY(-50%);
  background: var(--color-primary);
  transition: all var(--animation-duration-fast) var(--animation-curve-primary);
  border-radius: var(--border-radius-full);
}

.footer-link-wh2o4:hover {
  color: var(--color-on-surface);
  opacity: 1;
  transform: translateX(8px);
}

.footer-link-wh2o4:hover::before {
  opacity: 1;
}

.footer-contact-column-o9inpn {
  grid-column: span 1;
  /* Desktop: Kontakt nutzt volle Breite seiner Spalte und rutscht nach rechts */
  width: 100%;
  max-width: 100%;
}

.footer-contact-list-2zpzug {
  gap: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.footer-contact-item-esoj5q {
  gap: var(--spacing-md);
  border: 1px solid color-mix(in srgb, var(--color-border) 20%, transparent);
  display: flex;
  padding: var(--spacing-sm);
  align-items: flex-start;
  background: color-mix(in srgb, var(--color-surface-elevated) 30%, transparent);
  transition: all var(--animation-duration-standard) var(--animation-curve-primary);
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(8px);
}

.footer-contact-item-esoj5q:hover {
  box-shadow: var(--shadow-level-1);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-surface-elevated) 50%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.footer-contact-icon-wnb8vi {
  color: var(--color-primary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  flex-shrink: 0;
  border-radius: var(--border-radius-md);
  justify-content: center;
}

.footer-contact-content-koj04c {
  gap: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.footer-contact-label-ba34lu8 {
  color: var(--color-on-surface-secondary);
  opacity: 0.7;
  font-size: var(--font-size-xs);
  font-family: var(--font-family-body);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer-contact-value-ae0dsk {
  color: var(--color-on-surface);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: 1.4;
}

.footer-contact-link-vw52sf {
  color: var(--color-on-surface);
  text-decoration: none;
  transition: color var(--animation-duration-fast) var(--animation-curve-primary);
}

.footer-contact-link-vw52sf:hover {
  color: var(--color-primary);
}

.footer-hours-section-sox4ha {
  border: 1px solid color-mix(in srgb, var(--color-border) 25%, transparent);
  padding: var(--spacing-xl);
  background: color-mix(in srgb, var(--color-surface-elevated) 40%, transparent);
  border-radius: var(--border-radius-lg);
  margin-bottom: clamp(2rem, 48px, 3rem);
  backdrop-filter: blur(12px);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  /* Desktop: Öffnungszeiten-Kachel nutzt ihre Grid-Spalte voll aus */
  grid-column: span 1;
}

.footer-hours-wrapper-nkw1n {
  gap: var(--spacing-xl);
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.footer-hours-icon-cqtxlf {
  color: var(--color-accent);
  width: 56px;
  height: 56px;
  display: flex;
  animation: footer-pulse 3s ease-in-out infinite;
  align-items: center;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  flex-shrink: 0;
  border-radius: var(--border-radius-lg);
  justify-content: center;
}

.footer-hours-icon-cqtxlf svg {
  width: 28px;
  height: 28px;
}

.footer-hours-content-89qj9t {
  flex: 1;
  min-width: 0;
  width: 0;
  box-sizing: border-box;
}

.footer-hours-title-3wtpuj {
  color: var(--color-on-surface);
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-md);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.footer-hours-grid-ekp9ak {
  gap: var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-auto-rows: auto;
}

.footer-hours-item-wynlmf {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer-hours-day-zh2py8 {
  color: var(--color-on-surface);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: 600;
}

.footer-hours-time-wnbyzr {
  color: var(--color-on-surface-secondary);
  opacity: 0.85;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
}

.footer-bottom-section-xpd5f3 {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
  padding-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.footer-social-wrapper-b1yxs {
  gap: var(--spacing-lg);
  display: flex;
  align-items: center;
}

.footer-social-title-jc4zca {
  color: var(--color-on-surface);
  margin: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: 600;
}

.footer-social-links-hf8kvk {
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
}

.footer-social-link-jffnsw {
  color: var(--color-on-surface-secondary);
  width: 40px;
  border: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
  height: 40px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--color-surface-elevated) 50%, transparent);
  transition: all var(--animation-duration-standard) var(--animation-curve-primary);
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(8px);
  justify-content: center;
  text-decoration: none;
  transform-origin: center;
}

.footer-social-link-jffnsw:hover {
  color: var(--color-on-primary);
  box-shadow: var(--shadow-level-1);
  transform: translateY(-2px) scale(1.05);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.footer-social-link-jffnsw svg {
  width: 20px;
  height: 20px;
  transition: stroke var(--animation-duration-standard) var(--animation-curve-primary);
}

/* SVG-Icon beim Hover explizit weiß machen, damit es auf dunklem Hintergrund sichtbar ist */
.footer-social-link-jffnsw:hover svg {
  stroke: var(--color-on-primary) !important;
  color: var(--color-on-primary) !important;
}

.footer-legal-wrapper-4woica {
  gap: var(--spacing-lg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer-copyright-uz1m9 {
  color: var(--color-on-surface-secondary);
  margin: 0;
  opacity: 0.75;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
}

.footer-legal-links-tx3qn9 {
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
}

.footer-legal-link-d30k2 {
  color: var(--color-on-surface-secondary);
  opacity: 0.75;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  transition: color var(--animation-duration-fast) var(--animation-curve-primary);
  text-decoration: none;
}

.footer-legal-link-d30k2:hover {
  color: var(--color-primary);
  opacity: 1;
}

.footer-legal-divider-hx3gpf {
  color: var(--color-on-surface-secondary);
  opacity: 0.4;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .navigation-main-2evtl,
  .navigation-logo-link-87cn66,
  .navigation-link-swulhb,
  .navigation-mobile-toggle-ccnk28,
  .navigation-mobile-menu-u2p569,
  .navigation-mobile-panel-ptaokg,
  .navigation-mobile-link-jw80pq,
  .navigation-cta-3qtlfg {
    animation: none;
    transition: none;
  }

  .navigation-mobile-item-9ev5cn {
    opacity: 1;
    transform: none;
  }

  .navigation-mobile-cta-cigju {
    opacity: 1;
    transform: none;
  }

  .hero-content-8w4ux {
    animation: none;
  }

  .hero-scroll-indicator-6ze1e {
    animation: none;
  }

  .teaser-card {
    animation: none;
  }

  .highlight-card {
    animation: none;
  }

  .footer-background-image-166fk3 {
    animation: none;
  }

  .footer-hours-icon-cqtxlf {
    animation: none;
  }
}

/* Hero: Öffnungszeiten auf Mobile statt "Jetzt entdecken" Button */
/* Desktop: Öffnungszeiten ausblenden, Button anzeigen */
.hero-opening-hours-mobile {
  display: none;
}

/* Mobile: Button ausblenden, Öffnungszeiten anzeigen */
@media (max-width: 991px) {
  .hero-cta-desktop-only {
    display: none !important;
  }
  
  .hero-opening-hours-mobile {
    display: block;
    text-align: center;
    padding: 0.875rem 1.5rem;
    background-color: var(--color-primary, #0D2417);
    color: var(--color-on-primary, #ffffff);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
  }
  
  .hero-opening-hours-mobile .navigation-hours-compact-7k2jf {
    color: var(--color-on-primary, #ffffff);
    font-size: 0.9375rem;
    line-height: 1.5;
    display: block;
  }
}