@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/newsreader-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/bodoni-moda-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  /* Die Variable-Datei traegt die Achse 100-900. Der frueher engere Bereich
     hat leichtere Schnitte auf 400 hochgeklemmt. */
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/hanken-grotesk-var.woff2) format('woff2');
}

:root {
  --color-bg: #EFEBE7;
  --color-sand: #D5CCC5;
  --color-surface: #F9F7F4;
  --color-text: #34302E;
  --color-muted: rgba(52, 48, 46, 0.78);
  --color-line: rgba(52, 48, 46, 0.18);
  --color-dark: #34302E;
  --color-cream: #EFEBE7;
  --color-cream-soft: rgba(239, 235, 231, 0.72);
  /* Faerbt einfarbige SVG/PNG-Icons auf die Creme- bzw. Dunkelfarbe der Marke.
     Nie brightness(0) invert(1) verwenden - das ergibt reines Weiss (#FFF). */
  --filter-cream: brightness(0) saturate(100%) invert(94%) sepia(10%) saturate(332%) hue-rotate(341deg) brightness(104%) contrast(92%);
  --filter-dark: brightness(0) saturate(100%) invert(16%) sepia(14%) saturate(900%) hue-rotate(354deg);
  --color-gold: #94877F;
  --color-brown: #6F625C;
  /* Deckkraft des Foto-Schleiers hinter Textflaechen (Referenz: Abschnitt "Hof"). */
  --copy-veil: 0.05;
  /* Einheitlicher Innenabstand der Textseiten in 50/50-Abschnitten (mobil). */
  --split-pad-y: clamp(56px, 14vw, 72px);
  --split-media-ratio: 4 / 3;
  /* Einheitlicher vertikaler Abstand der Inhaltsabschnitte auf dem Handy. */
  --section-pad-y: 72px;
  /* Abstand Ueberschrift -> Fliesstext auf schmalen Displays. */
  --title-gap: 18px;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad-x: clamp(24px, 5vw, 56px);
  --fs-h1: clamp(45px, 6vw, 77px);
  --fs-body: clamp(1.09375rem, 1rem + 0.4vw, 1.1875rem);
  --fs-h2: clamp(2.1875rem, 1.5rem + 2.6vw, 3.3125rem);
  --fs-h3: clamp(1.3125rem, 1.15rem + 0.35vw, 1.4375rem);
  --fs-sub: clamp(15px, 1.19vw, 17px);
  --fs-btn: 12px;
  --fs-nav: 13px;
  --fs-menu: clamp(27px, 1.8vw + 17.3px, 43.2px);
  --fs-menu-sub: clamp(12px, 0.9vw, 14px);
  --fs-small: 14px;
  --fs-list: 15px;
  --fs-meta: 12px;
  --fs-legal: 12.5px;
  --logo-w: clamp(104px, 11vw, 148px);
  --wrap-wide: max(1180px, 75vw);
  --edge: max(var(--pad-x), calc((100vw - var(--wrap-wide)) / 2));
  --font-display: 'Bodoni Moda', Georgia, "Times New Roman", serif;
  --wrap: min(1120px, calc(100vw - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img,
svg {
  max-width: 100%;
}

.wrap {
  width: var(--wrap);
  margin: 0 auto;
}

/* Nur fuer Suchmaschinen und Screenreader: aus dem sichtbaren Bereich
   geschoben, aber im Dokument voll vorhanden (kein display:none). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-nav:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10000;
  width: auto;
  height: auto;
  padding: 0.65rem 0.85rem;
  background: var(--color-dark);
  color: var(--color-cream);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 235, 231, 0.94);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-home {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-lang {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-lang a {
  text-decoration: none;
  color: var(--color-muted);
}

.site-lang a.active {
  color: var(--color-text);
  font-weight: 700;
}
main#main-content {
  min-height: 55vh;
}
.page-hero {
  padding: clamp(7rem, 16vw, 14rem) 0 clamp(5rem, 10vw, 9rem);
  background: var(--color-bg);
}
.page-hero p:first-child {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-hero h1 {
  margin: 0;
  max-width: 920px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.3rem, 11vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.page-hero p {
  margin: 0 0 1.4rem;
}.page-hero {
  border-bottom: 1px solid var(--color-line);
}

.page-hero-legal {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.page-hero .wrap > p:last-child {
  max-width: 44rem;
  margin-top: 1.25rem;
  color: var(--color-muted);
}

.legal-content,
.legal-content-full {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.legal-content h1,
.legal-content h2,
.legal-content h3 {
  color: var(--color-text);
  line-height: 1.18;
}

.legal-content h1 {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  /* Ebenfalls 20 % kleiner (vorher clamp(2.5rem, 6vw, 5rem)), damit die
     Rechtsseiten dieselbe Titelgroesse fahren wie die uebrigen Seiten.
     Der Mobil-Wert weiter unten bleibt unveraendert. */
  font-size: clamp(2rem, 4.8vw, 4rem);
  font-weight: 400;
}

.legal-content h2 {
  margin: 2.4rem 0 0.8rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.legal-content p,
.legal-content li {
  color: var(--color-muted);
}

.legal-nav {
  margin-top: 2rem;
}

.cookie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 1.5rem 0 2rem;
}

.cookie-card {
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}

.cookie-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.cookie-card-badge {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cookie-card p {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.cookie-card ul {
  margin: 0;
  padding: 0 0 0 1.2rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.cookie-card ul li {
  margin-bottom: 0.2rem;
}

.cookie-card ul li code {
  font-size: 0.84rem;
  background: var(--color-bg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

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

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

.site-footer-inner {
  min-height: 120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.site-footer p {
  margin: 0;
}

.site-footer p:last-child {
  text-align: right;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

.site-footer a {
  color: inherit;
}

.site-footer-legal {
  padding: 1.1rem 0 1.6rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-align: center;
}

.site-footer-legal p {
  margin: 0.1rem 0;
}

.site-footer-legal a {
  color: inherit;
}

@media (max-width: 760px) {
  .wrap {
    width: min(100% - 28px, 1120px);
  }

  .site-header-inner,
  .site-footer-inner{
    grid-template-columns: 1fr;
  }

  .site-header-inner {
    min-height: auto;
    padding: 1rem 0;
    align-items: flex-start;
  }
  .page-hero {
    padding-top: 5rem;
  }

  .site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 0;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .site-footer p:last-child {
    text-align: left;
  }
}

/* ==========================================================================
   Startseite Baita Odles — Design 1:1 aus design/index.html
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.home {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.home a {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Reveal-System: Texte oeffnen sich als Maske nach unten und steigen dabei auf,
   Bilder werden als Wipe aufgedeckt und zoomen dabei sanft aus.
   -------------------------------------------------------------------------- */

:root {
  --rv-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --rv-text-dur: 0.6s;
  --rv-text-step: 0.08s;
  --rv-text-rise: 44px;
  --rv-media-dur: 0.7s;
  --rv-media-step: 0.1s;
  --rv-mask-closed: polygon(-6% -8%, -6% -8%, 106% -8%, 106% -8%);
  --rv-mask-open: polygon(-6% -8%, -6% 108%, 106% 108%, 106% -8%);
}

/* Der Container blendet nur ruhig auf, die eigentliche Bewegung machen die Kinder. */
.js [data-reveal] {
  opacity: 1;
}

.js [data-reveal].revealed {
  animation: none;
}

/* Text-Zeilen: Maske zu -> Maske auf, gleichzeitig von unten hereinfahren. */
.js .rv-item {
  translate: 0 var(--rv-text-rise);
  clip-path: var(--rv-mask-closed);
}

.js [data-reveal].revealed .rv-item,
.js .rv-item.revealed {
  translate: 0 0;
  clip-path: var(--rv-mask-open);
  transition:
    translate var(--rv-text-dur) var(--rv-ease),
    clip-path var(--rv-text-dur) var(--rv-ease);
  transition-delay: calc(0.06s + var(--rv-i, 0) * var(--rv-text-step));
}

/* Bilder: Wipe von oben, jedes zweite Bild einer Gruppe wipet von unten. */
.js [data-reveal-media] {
  opacity: 1;
  /* Das leicht vergrößerte Ausgangsbild darf beim Wipe keine horizontale
     Scrollbreite erzeugen, bevor der Abschnitt sichtbar geworden ist. */
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
  transition: clip-path var(--rv-media-dur) var(--rv-ease);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-media-step));
}

.js [data-reveal-media].rv-from-bottom {
  clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
}

.js [data-reveal-media].revealed {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}

.js [data-reveal-media] img {
  transform: scale(1.06);
  transform-origin: center;
  transition: transform var(--rv-media-dur) var(--rv-ease);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-media-step));
}

.js [data-reveal-media].revealed img {
  transform: none;
}

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.deco {
  position: absolute;
  pointer-events: none;
}

.deco-dark {
  filter: var(--filter-dark);
}

.deco-light {
  filter: var(--filter-cream);
}

/* Sehr lange deutsche Komposita (z. B. "Durchsetzungsverfahren") sprengen auf
   schmalen Displays sonst die Zeile. Greift nur, wenn ein Wort wirklich nicht passt. */
h1, h2, h3, h4,
p, li, dt, dd,
.btn-label {
  overflow-wrap: break-word;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  letter-spacing: 0.21em;
  text-transform: uppercase;
  padding: 1.333em 2.667em;
  border-radius: 40px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.btn-gold {
  background: var(--color-gold);
  color: var(--color-dark);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn-ghost {
  border-color: rgba(239, 235, 231, 0.55);
  color: var(--color-cream);
  transition: background 0.25s, border-color 0.25s;
}

.btn-outline {
  border-color: var(--color-dark);
  color: var(--color-dark);
  transition: background 0.25s, color 0.25s;
}.btn-solid {
  background: var(--color-dark);
  color: var(--color-cream);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* Hover nur fuer echte Zeigergeraete. Auf Touch bleibt sonst der
   Hover-Zustand nach dem Antippen haengen. */
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-cream);
  }

  .btn-ghost:hover {
    background: rgba(239, 235, 231, 0.14);
    border-color: rgba(239, 235, 231, 0.9);
  }

  .btn-outline:hover {
    background: var(--color-dark);
    color: var(--color-cream);
  }

  .btn-solid:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark);
  }
}

/* ---------- Header ueber dem Hero ---------- */

.hd {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 38px) var(--edge);
}

.hd-menu {
  display: inline-flex;
  align-items: center;
  gap: 1.08em;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  letter-spacing: 0.192em;
  text-transform: uppercase;
  transition: opacity 0.2s, font-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hd-menu svg {
  width: 2em;
  height: auto;
  flex: none;
}

.hd-menu:hover {
  opacity: 0.65;
}

.hd-menu:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

.hd-logo {
  position: absolute;
  top: clamp(16px, 2.3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: var(--logo-w);
  height: auto;
  filter: var(--filter-cream);
  pointer-events: none;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hd {
  transition: padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hd-cta {
  transition: background 0.25s, border-color 0.25s, font-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.at-top .hd {
  padding-top: calc(clamp(20px, 3vw, 38px) + clamp(28px, 5vw, 72px));
}

body.at-top .hd-menu {
  font-size: calc(var(--fs-nav) * 1.5);
}

body.at-top .hd-cta {
  font-size: calc(var(--fs-btn) * 1.5);
}

body.at-top .hd-logo {
  top: calc(clamp(16px, 2.3vw, 32px) + clamp(18px, 3.2vw, 46px));
  width: calc(var(--logo-w) * 1.5);
}

.hd-cta {
  padding: 1.167em 2.333em;
}

/* ---------- Menue-Overlay ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #34302E;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 16vw, 150px) var(--edge) clamp(40px, 6vw, 60px);
  overflow-y: auto;
}

.menu-overlay.open {
  display: flex;
  animation: fadeIn 0.62s cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

body.menu-open {
  overflow: hidden !important;
}

.menu-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4.5vw, 40px);
  text-align: center;
}

.menu-item-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-menu);
  line-height: 1.1;
  color: var(--color-cream);
  transition: opacity 0.25s;
}

.menu-item:hover .menu-item-title {
  opacity: 0.85;
}

.menu-item-sub {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  font-size: var(--fs-menu-sub);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(239, 235, 231, 0.5);
  line-height: 2.1;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease, transform 0.35s ease;
}

.menu-item-sub a {
  display: block;
  color: inherit;
}

.menu-item-sub a:hover,
.menu-item-sub a:focus-visible {
  color: var(--color-cream);
}

.content-page section[id] {
  scroll-margin-top: 74px;
}

.menu-item:hover .menu-item-sub,
.menu-item:focus-visible .menu-item-sub,
.menu-item:focus-within .menu-item-sub {
  max-height: 240px;
  opacity: 1;
  transform: none;
  margin-top: 14px;
}

.menu-mountain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(80px, 10vw, 170px);
  opacity: 0.07;
  pointer-events: none;
}

.menu-layout,
.menu-main {
  display: contents;
}

/* Die responsiven <picture>-Wrapper duerfen kein eigenes Layout erzeugen,
   sonst werden sie statt der Bilder zu den Grid-Items der Menuegalerie. */
.menu-pics picture {
  display: contents;
}

.menu-pics img {
  display: block;
  height: auto;
  object-fit: cover;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .menu-pics {
    display: none;
  }
}

.menu-langs {
  position: relative;
  z-index: 2;
  margin-top: 52px;
  display: flex;
  gap: 22px;
  font-size: var(--fs-meta);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.menu-langs a {
  color: rgba(239, 235, 231, 0.5);
}

.menu-langs a.active,
.menu-langs a:hover {
  color: var(--color-cream);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

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

/* Hero-Bildausschnitt auf Desktop: MacBook-Fenster (13/15 Zoll) sind flacher
   als das 3:2-Foto, darum wird oben/unten beschnitten. Die Motive mit Personen
   bekommen einen eigenen Fokuspunkt, damit niemand aus dem Bild faellt. */
@media (min-width: 701px) {
  .food-page .hero-bg img {
    object-position: 50% 42%;
  }

  .farm-page .hero-bg img {
    object-position: 62% 38%;
  }

  .events-page .hero-bg img {
    object-position: 50% 55%;
  }
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(52, 48, 46, 0.72) 0%, rgba(52, 48, 46, 0) 34%, rgba(52, 48, 46, 0) 66%, rgba(52, 48, 46, 0.57) 100%);
}

.hero-tracks {
  top: 16%;
  right: -80px;
  width: clamp(300px, 36vw, 520px);
  height: auto;
  opacity: 0.08;
  transform: rotate(14deg);
  z-index: 2;
}

.hero-mountain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(80px, 10.5vw, 150px);
  z-index: 3;
  pointer-events: none;
}

/* ---------- Willkommen ---------- */

.welcome {
  position: relative;
  padding: clamp(80px, 10vw, 116px) 24px clamp(88px, 11vw, 124px);
  text-align: center;
  overflow: hidden;
  background: var(--color-sand);
}

.welcome-icon {
  top: 29px;
  left: -61px;
  width: clamp(240px, 26vw, 379px);
  height: auto;
  opacity: 0.11;
  transform: rotate(-8deg);
}

.welcome-inner {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
}

.welcome h1,
.welcome h2 {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--color-dark);
}

.welcome p {
  margin: 0 auto 44px;
  max-width: 625px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-muted);
}

/* ---------- Essen ---------- */

.food {
  position: relative;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: clamp(84px, 10vw, 110px) 0 clamp(88px, 10.5vw, 118px);
  overflow: hidden;
}

.food-layout {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.food-intro {
  flex: 0 0 38%;
  padding: 24px 48px 0 var(--edge);
}

.food-intro h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--color-cream);
}

.food-intro p {
  margin: 0 0 36px;
  max-width: 360px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(239, 235, 231, 0.75);
}

.food-scroll {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: clamp(18px, 1.9vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  padding: 220px var(--pad-x) 4px 0;
}

.food-scroll.is-vertical-pan {
  overflow-x: hidden;
  scroll-snap-type: none;
}

.food-card {
  flex: 0 0 clamp(300px, 42vw, 496px);
  scroll-snap-align: start;
}

.food-card-img {
  height: clamp(300px, 36vw, 425px);
  overflow: hidden;
}

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

.food-card-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(239, 235, 231, 0.28);
  padding: 15px 2px 0;
  margin-top: 16px;
}

.food-card-cap h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--color-cream);
}

.food-card-cap span:last-child {
  font-size: var(--fs-list);
  color: rgba(239, 235, 231, 0.6);
}

.food-deco-a {
  top: 35px;
  left: 484px;
  width: 419px;
  height: 207px;
  opacity: 0.08;
  transform: rotate(7deg);
}

.food-deco-b {
  top: 607px;
  left: 112px;
  width: 490px;
  height: 492px;
  opacity: 0.08;
  transform: rotate(-19deg);
}

/* ---------- Hof & Tiere ---------- */

.farm {
  position: relative;
  padding: clamp(56px, 8vw, 100px) 24px;
  overflow: hidden;
  background: var(--color-sand);
}.farm-grid {
  position: relative;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

.farm-text h2 {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--color-dark);
}

.farm-text p {
  margin: 0 0 44px;
  max-width: 460px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-muted);
}

.farm-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
}

.farm-img {
  overflow: hidden;
}

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

.farm-img-wide {
  grid-column: span 2;
  aspect-ratio: 610 / 339;
}

.farm-img-small {
  aspect-ratio: 28 / 25;
}

.site-odles .farm-imgs > .farm-img:nth-child(3) img {
  object-position: 70% center;
}

/* ---------- Galerie / Momente ---------- */

.moments {
  position: relative;
  z-index: 2;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: clamp(84px, 10vw, 116px) 0 clamp(48px, 6vw, 96px);
  overflow: visible;
}

.moments-scroll {
  position: relative;
  z-index: 2;
  transform: translateY(clamp(70px, 9vw, 130px));
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  padding: 10px var(--pad-x) 12px;
}

.m-item {
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  scroll-snap-align: start;
}

.m-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}/* ---------- Events / Musik ---------- */

.events {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 66vw, 908px);
  padding: clamp(90px, 11.5vw, 130px) 24px;
  overflow: hidden;
  background: var(--color-sand);
}.events-body {
  position: relative;
  z-index: 2;
  width: 50%;
  max-width: 688px;
  margin-left: auto;
  padding-right: 24px;
}

.events-body h2 {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--color-dark);
}

.events-body p {
  margin: 0 0 40px;
  max-width: 440px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-muted);
}

.events-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.events-deco {
  top: 247px;
  right: -70px;
  width: 428px;
  height: 595px;
  opacity: 0.1;
}

/* ---------- Karte / Anreise ---------- */

.map {
  position: relative;
  padding: clamp(80px, 9.5vw, 110px) 24px clamp(276px, 33vw, 390px);
  overflow: hidden;
  background: var(--color-sand);
}.map-grid {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6.5vw, 96px);
  align-items: center;
}

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

.map-body h2 {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--color-dark);
}

.map-body p {
  margin: 0 0 36px;
  max-width: 440px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-muted);
}

.map-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.map-photos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 56px;
}

.map-photos > div {
  flex: 1 1 240px;
  max-width: 560px;
}

.map-photos img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Footer ---------- */

.ft {
  position: relative;
  background: var(--color-dark);
  color: var(--color-cream-soft);
  padding: clamp(84px, 10.5vw, 120px) var(--pad-x) 40px;
}

.ft-grid {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(32px, 3.2vw, 44px);
  align-items: start;
}

.ft-brand img {
  width: 128px;
  height: auto;
  margin-bottom: 22px;
  filter: var(--filter-cream);
  opacity: 0.92;
}

.ft-brand p {
  margin: 0;
  max-width: 280px;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: rgba(239, 235, 231, 0.58);
}

.ft-col-title {
  margin: 0 0 20px;
  font-size: var(--fs-meta);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.ft-col nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-small);
}

/* Anschrift steht ueber den Kontaktlinks, gleiche Schriftgroesse. */
.ft-address {
  margin: 0 0 14px;
  color: rgba(239, 235, 231, 0.58);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.ft-col a {
  color: rgba(239, 235, 231, 0.58);
  transition: color 0.2s;
}

.ft-col a:hover {
  color: var(--color-cream);
}

.ft-bottom {
  max-width: var(--wrap-wide);
  margin: 60px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(239, 235, 231, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--fs-legal);
  color: rgba(239, 235, 231, 0.5);
  letter-spacing: 0.3px;
}

.ft-bottom-links {
  display: inline-flex;
  gap: 26px;
  flex-wrap: wrap;
}

.ft-bottom a {
  color: rgba(239, 235, 231, 0.5);
  transition: color 0.2s;
}

.ft-bottom a:hover {
  color: var(--color-cream);
}

.ft-uptomade {
  color: rgba(239, 235, 231, 0.75);
  letter-spacing: 1px;
}

.ft .site-footer-legal {
  font-size: var(--fs-legal);
  max-width: var(--wrap-wide);
  margin: 28px auto 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(239, 235, 231, 0.12);
  color: rgba(239, 235, 231, 0.45);
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .food-layout {
    flex-direction: column;
    gap: 40px;
  }

  .food-intro {
    flex: none;
    width: 100%;
    padding: 0 var(--pad-x);
  }

  .food-scroll {
    flex: none;
    width: 100%;
    padding: 24px var(--pad-x) 4px;
  }

  .food-deco-a {
    left: auto;
    right: 40px;
  }

  .events-body {
    width: 56%;
    padding-left: 48px;
  }
}

@media (max-width: 860px) {
  .food-deco-b {
    top: auto;
    bottom: -160px;
  }

  .farm-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .map-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

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

  .ft-brand {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .hd-menu {
    font-size: 12px;
  }

  .hd-cta {
    font-size: 11px;
  }

  body.at-top .hd-menu {
    font-size: 15px;
  }

  body.at-top .hd-cta {
    font-size: 14px;
  }

  .events {
    display: block;
    min-height: 0;
    padding: 0 0 72px;
  }

  .events-body {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: clamp(64px, 12vw, 88px) 24px 52px;
  }.ft-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 1600px) {
  :root {
    --fs-h1: min(4.81vw, 100px);
    --fs-h2: min(3.31vw, 70px);
    --fs-h3: min(1.44vw, 30px);
    --fs-body: min(1.19vw, 25px);
    --fs-sub: min(1.06vw, 22px);
    --fs-btn: min(0.75vw, 16px);
    --fs-nav: min(0.8125vw, 17px);
    --fs-menu: min(2.7vw, 57.6px);
    --fs-menu-sub: min(0.875vw, 18px);
    --fs-small: min(0.875vw, 18px);
    --fs-list: min(0.94vw, 20px);
    --fs-meta: min(0.75vw, 16px);
    --fs-legal: min(0.78vw, 16px);
    --logo-w: min(9.25vw, 220px);
  }

  .food-card {
    flex-basis: min(34.5vw, 640px);
  }

  .food-card-img {
    height: min(29.5vw, 550px);
  }.events-body {
    margin-right: calc((100vw - var(--wrap-wide)) / 2);
    padding-right: 0;
  }

  .hero-tracks {
    width: min(32.5vw, 830px);
  }

  .hero-mountain {
    height: min(10.4vw, 240px);
  }

  .welcome-icon {
    width: min(23.7vw, 610px);
  }

  .food-deco-a {
    width: min(26.2vw, 670px);
    height: auto;
  }

  .food-deco-b {
    width: min(30.6vw, 785px);
    height: auto;
  }

  .events-deco {
    width: min(26.75vw, 685px);
    height: auto;
  }
}

/* ---------- Deutsche Startseite: responsiver Feinschliff ---------- */

.site-odles {
  --color-surface: var(--color-bg);
  --font-display: 'Newsreader', Georgia, "Times New Roman", serif;
  --pad-x: clamp(20px, 4vw, 72px);
  /* H1 auf Kundenwunsch 20 % kleiner als urspruenglich
     (clamp(2.85rem, 2.05rem + 3.25vw, 6rem)). Mobil bleibt die Groesse
     unveraendert: <=700px und <=360px bringen eigene Ueberschreibungen mit. */
  --fs-h1: clamp(2.28rem, 1.64rem + 2.6vw, 4.8rem);
  --fs-h2: clamp(2.45rem, 1.95rem + 1.8vw, 4.35rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.35vw, 1.75rem);
  --fs-body: clamp(1.05rem, 0.97rem + 0.28vw, 1.35rem);
  --fs-sub: clamp(0.98rem, 0.9rem + 0.25vw, 1.25rem);
  --fs-btn: clamp(0.7rem, 0.62vw, 0.875rem);
  --fs-nav: clamp(0.75rem, 0.67vw, 0.94rem);
  --fs-small: clamp(0.875rem, 0.78vw, 1.05rem);
  --fs-list: clamp(0.94rem, 0.84vw, 1.125rem);
  --fs-meta: clamp(0.75rem, 0.68vw, 0.875rem);
  --fs-legal: clamp(0.75rem, 0.68vw, 0.875rem);
  --logo-w: clamp(96px, 8.5vw, 184px);
  background: var(--color-bg);
}

.site-odles h1,
.site-odles h2,
.site-odles h3,
.site-odles .menu-item-title {
  font-optical-sizing: auto;
  text-wrap: balance;
  /* "break-word" bricht nur, wenn ein Wort sonst nicht in die Zeile passt -
     bei normalen Breiten identisch zu "normal", verhindert aber Ueberlauf
     durch lange Komposita wie "Durchsetzungsverfahren" auf 320 px. */
  overflow-wrap: break-word;
}

.site-odles .deco-light,
.site-odles .hd-logo,
.site-odles .ft-brand img {
  filter: var(--filter-cream);
}

body.site-odles .a11y-dismiss {
  color: var(--color-cream) !important;
}

.site-odles .btn {
  min-height: 44px;
  max-width: 100%;
  line-height: 1.35;
  text-align: center;
  justify-content: center;
  white-space: normal;
}

.site-odles .hd-menu {
  min-height: 44px;
  padding: 0;
  touch-action: manipulation;
}

.site-odles .hd-left,
.site-odles .hd-actions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.site-odles .hd-left {
  gap: clamp(16px, 1.8vw, 28px);
}

.site-odles .hd-lang-switcher {
  position: relative;
}

.site-odles .hd-lang-toggle {
  display: none;
}

.site-odles .hd-actions {
  gap: clamp(10px, 1.1vw, 18px);
}

.site-odles .hd-langs {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: rgba(239, 235, 231, 0.55);
  font-size: var(--fs-nav);
  letter-spacing: 0.14em;
}

.site-odles .hd-lang-separator {
  width: 1px;
  height: 18px;
  margin-inline: 6px;
  background: rgba(239, 235, 231, 0.58);
}

.site-odles .hd-langs a {
  display: inline-flex;
  min-width: 28px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  touch-action: manipulation;
  transition: opacity 0.28s ease;
}

.site-odles .hd-langs a:hover,
.site-odles .hd-langs a:focus-visible {
  opacity: 0.62;
}

.site-odles .hd-langs a:focus-visible,
.site-odles .hd-weather:focus-visible,
.site-odles .hd-webcam:focus-visible,
.site-odles .hero-webcam:focus-visible,
.site-odles .hero-weather-mobile:focus-visible,
.site-odles .ft-brand-partner:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 4px;
}

.site-odles .hd-info-links {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}

.site-odles .hd-info-separator {
  width: 1px;
  height: 20px;
  background: rgba(239, 235, 231, 0.58);
}

.site-odles .hd-weather,
.site-odles .hd-webcam {
  display: inline-flex;
  width: 36px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-cream);
  touch-action: manipulation;
  transition: opacity 0.28s ease;
}

.site-odles .hd-weather:hover,
.site-odles .hd-webcam:hover {
  opacity: 0.68;
}

.site-odles .hd-weather img,
.site-odles .hd-webcam img {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
  filter: var(--filter-cream);
}

.site-odles .hd-webcam img {
  width: 24px;
  height: 24px;
}

.site-odles .hero-weather-mobile {
  display: none;
}

.site-odles .hd {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  padding-top: clamp(11px, 1.15vw, 17px);
  padding-bottom: clamp(10px, 1vw, 15px);
  background: rgba(52, 48, 46, 0.95);
  transform: translateY(-110%);
  transition:
    transform 0.5s cubic-bezier(0.16, 0.76, 0.24, 1),
    padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.35s ease;
}

.site-odles .hd-logo {
  position: fixed;
  top: 8px;
  z-index: 51;
  width: calc(var(--logo-w) * 0.648);
  transform: translate(-50%, -150%);
  transition:
    width 0.48s cubic-bezier(0.16, 0.76, 0.24, 1),
    top 0.48s cubic-bezier(0.16, 0.76, 0.24, 1),
    transform 0.5s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles.header-visible .hd,
.site-odles.at-top .hd {
  transform: translateY(0);
}

.site-odles.header-visible .hd-logo,
.site-odles.at-top .hd-logo {
  transform: translateX(-50%);
}

.site-odles .hd-cta {
  min-height: 44px;
  padding-block: 0;
}

.site-odles.at-top .hd {
  padding-top: calc(clamp(20px, 3vw, 38px) + clamp(15px, 2.4vw, 34px));
  padding-bottom: clamp(20px, 2.4vw, 34px);
  background: transparent;
}

.site-odles.at-top .hd-menu,
.site-odles.at-top .hd-cta {
  font-size: calc(var(--fs-nav) * 1.18);
}

.site-odles.at-top .hd-logo {
  top: calc(clamp(16px, 2.3vw, 32px) + clamp(14px, 2vw, 28px));
  width: calc(var(--logo-w) * 1.2);
}

.site-odles.menu-open .hd-logo {
  visibility: hidden;
}

body.site-odles.menu-open .hd-menu svg {
  display: block;
}

body.site-odles.menu-open .hd-menu svg line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

body.site-odles.menu-open .hd-menu svg line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

body.site-odles.menu-open .hd-menu svg line:nth-child(3) {
  transform: translate(4px, -5px) rotate(-45deg) scaleX(1.444);
}

.site-odles .menu-overlay .menu-langs {
  display: none;
}

.site-odles .menu-overlay {
  justify-content: flex-start;
  min-height: 100dvh;
  /* Oben und unten gleich viel Luft, sonst ist die Mitte optisch verschoben. */
  padding: clamp(88px, 13vh, 150px) var(--edge);
  padding-bottom: max(clamp(88px, 13vh, 150px), env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.site-odles .menu-nav {
  width: min(100%, 860px);
  gap: clamp(12px, 2.2vh, 32px);
  /* margin-block statt margin-top: die untere Sprachwahl als Gegengewicht
     ist ausgeblendet, mit margin-top allein rutscht die Navigation nach unten. */
  margin-block: auto;
}

.site-odles .menu-item {
  display: flex;
  min-height: 44px;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site-odles .menu-item-title {
  font-size: clamp(1.75rem, min(2.65vw, 5vh), 3.75rem);
  line-height: 1.04;
  text-wrap: balance;
}

.site-odles .menu-langs {
  margin-top: clamp(20px, 4vh, 44px);
  margin-bottom: auto;
  min-height: 44px;
  align-items: center;
}

.site-odles .menu-langs a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.site-odles .hero {
  min-height: 100vh;
  min-height: 100svh;
}

.site-odles .hero-webcam {
  position: absolute;
  bottom: clamp(70px, 9.5vh, 110px);
  left: var(--edge);
  z-index: 5;
  display: none;
  width: clamp(34px, 2.8vw, 42px);
  height: clamp(42px, 3.2vw, 48px);
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: manipulation;
  transition: opacity 0.38s ease, color 0.38s ease;
}

.site-odles .hero-webcam:hover {
  background: transparent;
  color: var(--color-cream);
  opacity: 0.68;
}

.site-odles .hero-webcam img {
  width: 29px;
  height: 29px;
  flex: none;
  object-fit: contain;
  filter: var(--filter-cream);
}

.site-odles .welcome-inner {
  max-width: 1025px;
}

.site-odles .welcome h1,
.site-odles .welcome h2 {
  max-width: 23.75ch;
  margin-inline: auto;
}

/* Die Ueberschrift rueckt naeher an ihren Untertitel. */
.site-odles .welcome h1:has(+ .welcome-lead) {
  margin-bottom: 22px;
}

.site-odles .welcome p {
  max-width: 47.5rem;
  line-height: 1.7;
}

.site-odles .food-intro {
  flex-basis: 48%;
}

.site-odles .food-intro h2 {
  max-width: 18ch;
}

.site-odles .food-intro p,
.site-odles .farm-text p,
.site-odles .events-body p,
.site-odles .map-body p {
  line-height: 1.7;
}

.site-odles .farm-text h2 {
  max-width: 17ch;
  font-size: clamp(2.25rem, 1.8rem + 1.55vw, 3.9rem);
}

.site-odles .events-body h2 {
  max-width: 18ch;
}

@media (min-width: 701px) {
  .site-odles .events-body {
    padding-left: clamp(72px, 7vw, 140px);
  }

}

.site-odles .map-body h2 {
  max-width: 15ch;
}

.site-odles .ft-brand-partners {
  display: flex;
  max-width: 290px;
  align-items: center;
  gap: clamp(13px, 1.25vw, 20px);
  margin-top: clamp(24px, 2.4vw, 34px);
}

.site-odles .ft-brand-partner {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  opacity: 0.82;
  touch-action: manipulation;
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles .ft-brand-partner:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.site-odles .ft-brand .ft-brand-partner img {
  width: auto;
  height: auto;
  margin: 0;
  filter: none;
  opacity: 1;
  object-fit: contain;
}

.site-odles .ft-brand .ft-brand-partner-valgardena img {
  width: clamp(102px, 8.6vw, 138px);
}

.site-odles .ft-brand .ft-brand-partner-suedtirol img {
  width: clamp(54px, 4.5vw, 72px);
}

.site-odles .ft-brand .ft-brand-partner-seceda img {
  width: clamp(68px, 5.4vw, 88px);
  height: auto;
  filter: none;
}

@media (max-height: 620px), (max-width: 1200px) {
  .site-odles .menu-pics {
    display: none;
  }
}

@media (max-width: 1120px) {
  .site-odles .food-intro {
    max-width: 760px;
  }

  .site-odles .food-intro h2 {
    max-width: 17ch;
  }.site-odles .events-body {
    width: 60%;
    padding-left: 40px;
  }
}

@media (max-width: 700px) {
  .site-odles {
    --pad-x: clamp(20px, 6vw, 28px);
    --logo-w: clamp(88px, 24vw, 112px);
    --hero-action-bottom: clamp(62px, 9vh, 78px);
  }

  .site-odles .hd {
    padding-inline: var(--pad-x);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-odles .hd-left {
    gap: clamp(7px, 2vw, 10px);
  }

  .site-odles .hd-actions {
    gap: clamp(4px, 1.5vw, 8px);
  }

  .site-odles .hd-info-links {
    display: none;
  }

  .site-odles .hd-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-odles .hd-menu {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .site-odles .hd-menu svg {
    width: 2.6em;
  }

  .site-odles .hd-lang-toggle {
    display: inline-flex;
    min-width: 48px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.12em;
    cursor: pointer;
  }

  .site-odles .hd-lang-toggle svg {
    width: 9px;
    transition: transform 0.35s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

  .site-odles .hd-lang-toggle:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 2px;
  }

  .site-odles .hd-lang-switcher.is-open .hd-lang-toggle svg {
    transform: rotate(180deg);
  }

  .site-odles .hd-langs {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    z-index: 8;
    width: 58px;
    min-height: 0;
    padding: 7px 0;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(239, 235, 231, 0.28);
    background: #34302E;
    font-size: 10px;
    letter-spacing: 0.1em;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -7px);
    transition:
      visibility 0s linear 0.3s,
      opacity 0.3s ease,
      transform 0.36s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

  .site-odles .hd-lang-switcher.is-open .hd-langs {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }

  .site-odles .hd-langs a {
    width: 100%;
    min-width: 0;
    min-height: 40px;
  }

  .site-odles .hd-lang-separator {
    width: 28px;
    height: 1px;
    margin: 0;
  }

  .site-odles .hd-weather {
    display: none;
  }

  .site-odles .hero-weather-mobile {
    position: absolute;
    right: var(--pad-x);
    bottom: var(--hero-action-bottom);
    z-index: 5;
    display: inline-flex;
    width: 34px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--color-cream);
    touch-action: manipulation;
    transition: opacity 0.38s ease;
  }

  .site-odles .hero-weather-mobile:hover {
    opacity: 0.68;
  }

  .site-odles .hero-weather-mobile img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: var(--filter-cream);
  }

  .site-odles.at-top .hd {
    padding-top: 38px;
    padding-bottom: 22px;
  }

  .site-odles.at-top .hd-menu {
    font-size: 14px;
  }

  .site-odles .hd-cta {
    width: auto;
    min-width: 84px;
    height: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .site-odles.at-top .hd-cta {
    width: auto;
    min-width: 88px;
    height: 48px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .site-odles .hd-logo {
    top: 7px;
    left: 50%;
  }

  .site-odles.at-top .hd-logo {
    top: 31px;
    width: calc(var(--logo-w) * 1.15);
  }

  .site-odles .hero-webcam {
    bottom: var(--hero-action-bottom);
    left: var(--pad-x);
    display: inline-flex;
    width: 34px;
    height: 44px;
    min-height: 0;
    padding: 0;
  }

  .site-odles .hero-webcam img {
    width: 22px;
    height: 22px;
  }

  .site-odles .welcome,
  .site-odles .farm{
    padding-inline: var(--pad-x);
  }

  .site-odles .welcome-inner,
  .site-odles .food-intro,
  .site-odles .farm-text,
  .site-odles .events-body,
  .site-odles .map-body,
  .site-odles .food-card-cap,
  .site-odles .ft-grid,
  .site-odles .ft-bottom {
    text-align: center;
  }

  .site-odles .food-intro h2,
  .site-odles .farm-text h2,
  .site-odles .events-body h2,
  .site-odles .map-body h2,
  .site-odles .food-intro p,
  .site-odles .farm-text p,
  .site-odles .events-body p,
  .site-odles .map-body p,
  .site-odles .ft-brand p {
    margin-inline: auto;
  }

  .site-odles .welcome .btn,
  .site-odles .food-intro .btn,
  .site-odles .farm-text .btn{
    margin-inline: auto;
  }

  .site-odles .events-ctas,
  .site-odles .map-ctas {
    justify-content: center;
  }

  .site-odles .food-card-cap {
    position: relative;
    justify-content: center;
    padding-inline: 28px;
  }

  .site-odles .food-card-cap h3 {
    width: 100%;
  }

  .site-odles .food-card-cap > span:last-child {
    position: absolute;
    right: 2px;
  }

  .site-odles .food-card {
    flex-basis: min(82vw, 340px);
  }.site-odles .events-body {
    width: 100%;
    padding-inline: var(--pad-x);
  }.site-odles .map {
    padding-inline: var(--pad-x);
    padding-bottom: clamp(150px, 42vw, 190px);
  }

  .site-odles .ft {
    padding-inline: var(--pad-x);
  }

}

@media (max-width: 540px) {

  .site-odles .ft-col a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}

/* ---------- Legal-Seiten und mobiles Menü: klarer Orientierungspunkt ----------
   Die Rechtsseiten übernehmen das bereits mobile verwendete Bergmotiv auch
   am Desktop. Das Bild bleibt bewusst ruhig und deutlich niedriger als die
   inhaltlichen Heroes, damit die langen Rechtstexte sofort erreichbar bleiben. */
.site-odles.page-sub .subhero {
  height: clamp(300px, 33vw, 500px);
  background-color: var(--color-dark);
  background-image:
    linear-gradient(
      180deg,
      rgba(52, 48, 46, 0.66) 0%,
      rgba(52, 48, 46, 0.36) 46%,
      rgba(52, 48, 46, 0.58) 100%
    ),
    url("gallery/desktop/baita-odles-vor-den-groedner-dolomiten.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Mobil wird die vorhandene 900-px-Variante geladen. */
@media (max-width: 700px) {
  .site-odles.page-sub .subhero {
    min-height: 78vh;
    min-height: 78svh;
    height: 78vh;
    height: 78svh;
    background-image:
      linear-gradient(
        180deg,
        rgba(52, 48, 46, 0.62) 0%,
        rgba(52, 48, 46, 0.34) 42%,
        rgba(52, 48, 46, 0.5) 100%
      ),
      url("gallery/mobile/baita-odles-vor-den-groedner-dolomiten-1300.webp");
  }
}

/* Mobiles Listen-Menue gilt bis 1200px, damit auch Tablets es bekommen.
   Ab 1201px uebernimmt das Desktopmenue mit Fotos. */
@media (max-width: 1200px) {
  /* Jeder Hauptpunkt bleibt ein eindeutiger Link. Unterpunkte erhalten einen
     separaten, großzügigen Aufklapp-Button und volle, gut erreichbare Zeilen. */
  .site-odles .menu-overlay {
    padding: max(76px, calc(env(safe-area-inset-top) + 58px)) 20px max(34px, env(safe-area-inset-bottom));
  }

  .site-odles .menu-nav {
    width: min(100%, 390px);
    align-items: stretch;
    gap: 7px;
    margin-block: auto;
    text-align: left;
  }

  .site-odles .menu-item {
    width: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .site-odles .menu-item-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    align-items: stretch;
    border-bottom: 1px solid rgba(239, 235, 231, 0.2);
  }

  .site-odles .menu-item-title {
    display: flex;
    max-width: none;
    min-height: 54px;
    align-items: center;
    padding: 6px 8px 6px 0;
    font-size: clamp(1.42rem, 6.35vw, 1.86rem);
    line-height: 1.08;
    text-align: left;
  }

  .site-odles .menu-item-toggle {
    display: grid;
    width: 54px;
    min-width: 54px;
    min-height: 54px;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(239, 235, 231, 0.2);
    background: transparent;
    color: var(--color-cream);
    cursor: pointer;
    touch-action: manipulation;
  }

  .site-odles .menu-item-toggle svg {
    width: 19px;
    height: 19px;
    transition: transform 0.28s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

  .site-odles .menu-item.submenu-open .menu-item-toggle svg {
    transform: rotate(180deg);
  }

  .site-odles .menu-item-toggle:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: -5px;
  }

  .site-odles .menu-item-sub,
  .site-odles .menu-item:hover .menu-item-sub,
  .site-odles .menu-item:focus-visible .menu-item-sub,
  .site-odles .menu-item:focus-within .menu-item-sub {
    width: 100%;
    align-items: stretch;
    gap: 6px;
    font-size: clamp(0.9rem, 3.8vw, 1rem);
    line-height: 1.3;
    text-align: left;
  }

  .site-odles .menu-item.submenu-open .menu-item-sub {
    max-height: 152px;
    margin-top: 8px;
    padding: 0 0 8px;
  }

  .site-odles .menu-item-sub a {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 6px 14px;
    border-radius: 2px;
    background: rgba(239, 235, 231, 0.1);
    color: var(--color-cream);
  }

  .site-odles .menu-item-sub a:active {
    background: rgba(239, 235, 231, 0.2);
  }
}

@media (min-width: 1201px) {
  .site-odles .menu-item-primary {
    display: block;
  }

  .site-odles .menu-item-toggle {
    display: none;
  }
}

@media (max-width: 360px), (max-height: 620px) {
  .site-odles .menu-item-title {
    font-size: 1.78rem;
  }

  .site-odles .menu-overlay {
    padding-top: 76px;
    padding-bottom: max(76px, env(safe-area-inset-bottom));
  }

  .site-odles .menu-nav {
    gap: 10px;
  }

  .site-odles .menu-langs {
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  .site-odles {
    --logo-w: 80px;
  }

  .site-odles .hd-cta,
  .site-odles.at-top .hd-cta {
    min-width: 84px;
    padding-inline: 7px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }

  .site-odles .hd-weather {
    display: none;
  }

  .site-odles .hero-weather-mobile {
    width: 30px;
  }

  .site-odles .hd-actions {
    gap: 2px;
  }

  .site-odles .hd-left {
    gap: 3px;
  }

  .site-odles .hd-lang-toggle {
    min-width: 42px;
  }

  .site-odles.at-top .hd-logo {
    width: calc(var(--logo-w) * 1.13);
  }

  .site-odles main h2 {
    font-size: calc(2.25rem - 2px);
  }

  .site-odles .food-intro,
  .site-odles .events-body {
    padding-inline: 14px;
  }

  .site-odles .food-intro h2,
  .site-odles .events-body h2 {
    font-size: 2.1rem;
  }
}

/* ---------- Deutsche Startseite: Interaktion und Rhythmus ---------- */

.site-odles .hero-mountain {
  height: clamp(64px, 8.4vw, 192px);
}

@media (min-width: 821px) {
  .site-odles .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .site-odles .hero-mountain {
    transform: none;
  }
}

.site-odles .hd-menu svg line {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.48s cubic-bezier(0.16, 0.76, 0.24, 1), opacity 0.48s ease;
}

.site-odles .hd-menu svg line:nth-child(3) {
  transform-origin: center;
}

.site-odles .hd-menu:hover svg line:nth-child(1),
.site-odles .hd-menu:focus-visible svg line:nth-child(1) {
  transform: translateX(2px);
}

.site-odles .hd-menu:hover svg line:nth-child(3),
.site-odles .hd-menu:focus-visible svg line:nth-child(3) {
  transform: translateX(-2px);
}

.site-odles .menu-mountain {
  height: clamp(44px, min(6.8vw, 8vh), 118px);
}

.site-odles .menu-item-title {
  opacity: 1;
  font-style: normal;
  transform-origin: center;
  transition:
    transform 0.68s cubic-bezier(0.16, 0.76, 0.24, 1) 0.05s,
    letter-spacing 0.68s cubic-bezier(0.16, 0.76, 0.24, 1) 0.05s,
    opacity 0.58s ease 0.05s;
}

.site-odles .menu-item:hover .menu-item-title,
.site-odles .menu-item:focus-visible .menu-item-title {
  opacity: 1;
  letter-spacing: inherit;
  transform: none;
  transition-delay: 0.09s;
}

.site-odles .menu-item-sub {
  display: flex;
  max-height: none;
  margin-top: clamp(7px, 1.1vh, 11px);
  overflow: visible;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45em 1.3em;
  opacity: 1;
  transform: none;
  color: var(--color-cream);
  font-style: normal;
  font-size: clamp(0.82rem, min(0.95vw, 1.65vh), 1.08rem);
  line-height: 1.45;
  transition:
    opacity 0.52s ease 0.1s,
    transform 0.58s cubic-bezier(0.16, 0.76, 0.24, 1) 0.1s;
}

.site-odles .menu-item-sub > span {
  position: relative;
  display: inline-block;
  opacity: 1;
  transition: opacity 0.5s ease 0.05s;
}

.site-odles .menu-item-sub > span:hover {
  opacity: 1;
}

.site-odles .menu-item-sub > span + span::before {
  position: absolute;
  left: -0.82em;
  content: "·";
  opacity: 0.55;
}

.site-odles .menu-item:hover .menu-item-sub,
.site-odles .menu-item:focus-visible .menu-item-sub {
  max-height: none;
  margin-top: clamp(7px, 1.1vh, 11px);
  opacity: 1;
  transform: translateY(2px);
  transition-delay: 0.2s;
}

@media (max-height: 760px), (max-width: 700px) {
  .site-odles .menu-item-sub {
    display: none;
  }
}

/* Fuell-Effekt: die Flaeche wischt von links herein, Text und Rand kippen
   dabei mit. Alle drei Zeiten sind bewusst gleich lang, damit nichts
   vorauseilt. Kein Anheben, kein Schatten. */
.site-odles .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--btn-bg, transparent);
  border-color: var(--btn-border, transparent);
  color: var(--btn-color, var(--color-dark));
  transition:
    color 0.42s ease,
    border-color 0.42s ease;
}

.site-odles .btn::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  content: "";
  background: var(--btn-fill, var(--color-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles .btn > span {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.site-odles .btn-arrow {
  transition: transform 0.42s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles .btn:focus-visible {
  color: var(--btn-hover-color, var(--color-cream));
  border-color: var(--btn-hover-border, var(--btn-fill, var(--color-dark)));
}

.site-odles .btn:focus-visible::before {
  transform: scaleX(1);
}

.site-odles .btn:focus-visible .btn-arrow {
  transform: translateX(5px);
}

@media (hover: hover) and (pointer: fine) {
  .site-odles .btn:hover {
    color: var(--btn-hover-color, var(--color-cream));
    border-color: var(--btn-hover-border, var(--btn-fill, var(--color-dark)));
  }

  .site-odles .btn:hover::before {
    transform: scaleX(1);
  }

  .site-odles .btn:hover .btn-arrow {
    transform: translateX(5px);
  }
}

.site-odles .btn-gold {
  --btn-bg: var(--color-gold);
  --btn-color: var(--color-dark);
  --btn-border: var(--color-gold);
  --btn-fill: var(--color-dark);
  --btn-hover-color: var(--color-cream);
  --btn-hover-border: var(--color-dark);
}

.site-odles .btn-ghost {
  --btn-bg: transparent;
  --btn-color: var(--color-cream);
  --btn-border: rgba(239, 235, 231, 0.72);
  --btn-fill: var(--color-cream);
  --btn-hover-color: var(--color-dark);
  --btn-hover-border: var(--color-cream);
}.site-odles .btn-outline {
  --btn-bg: transparent;
  --btn-color: var(--color-dark);
  --btn-border: var(--color-dark);
  --btn-fill: var(--color-dark);
  --btn-hover-color: var(--color-cream);
  --btn-hover-border: var(--color-dark);
}

.site-odles .btn-solid {
  --btn-bg: var(--color-dark);
  --btn-color: var(--color-cream);
  --btn-border: var(--color-dark);
  --btn-fill: var(--color-gold);
  --btn-hover-color: var(--color-dark);
  --btn-hover-border: var(--color-gold);
}

/* Buttons auf den dunklen Flaechen (Essen, Gallerie, Anreise) bekommen
   dieselbe Outline-Optik wie auf den hellen Flaechen, nur invertiert:
   transparenter Grund statt beiger Fuellung. */
.site-odles .food .btn,
.site-odles .moments .btn,
.site-odles .map .btn {
  --btn-bg: transparent;
  --btn-color: var(--color-cream);
  --btn-border: var(--color-cream-soft);
  --btn-fill: var(--color-cream);
  --btn-hover-color: var(--color-dark);
  --btn-hover-border: var(--color-cream);
}

/* ---------- Deutsche Startseite: atmosphaerische Bildflaechen ---------- */

.site-odles .welcome::before,
.site-odles .farm::before,
.site-odles .events::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.site-odles .welcome::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 1) 0%,
      rgba(213, 204, 197, 0.92) 52%,
      rgba(213, 204, 197, 0.85) 100%
    ),
    url("gallery/desktop/geislergruppe-bei-der-baita-odles.webp");
}

.site-odles .farm::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 0.87) 0%,
      rgba(213, 204, 197, 0.85) 50%,
      rgba(213, 204, 197, 0.87) 100%
    ),
    url("gallery/desktop/familienzeit-auf-der-almwiese.webp");
}

.site-odles .events::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 0.85) 0%,
      rgba(213, 204, 197, 0.92) 52%,
      rgba(213, 204, 197, 1) 100%
    ),
    url("gallery/desktop/kuehe-auf-almweide-baita-odles.webp");
}

.site-odles .welcome-inner,
.site-odles .farm-grid {
  position: relative;
  z-index: 1;
}

.site-odles .welcome-icon {
  z-index: 2;
}

/* ---------- Deutsche Startseite: grosszuegiges Desktopmenue ----------
   Ab 621px Hoehe, damit auch 13-Zoll-MacBooks (Viewport ~700px) das
   Desktopmenue mit Fotos und linksbuendigen Punkten bekommen. */

@media (min-width: 1201px) and (min-height: 621px) {

  .site-odles .menu-overlay {
    display: none;
    padding: 0;
    overflow: hidden;
  }

  .site-odles .menu-overlay.open {
    display: block;
  }

  .site-odles .menu-nav {
    position: absolute;
    /* Gleicher Abstand oben und unten: der Block liegt damit wirklich mittig,
       und der Sicherheitsabstand zum Logo bleibt erhalten. */
    top: clamp(154px, 17vh, 224px);
    bottom: clamp(154px, 17vh, 224px);
    left: 10vw;
    width: min(40vw, 760px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(15px, 1.85vh, 24px);
    text-align: left;
  }

  .site-odles .menu-item {
    position: relative;
    width: 100%;
    min-height: 0;
    display: block;
  }

  .site-odles .menu-item-title {
    font-size: clamp(2.64rem, min(3.18vw, 6.6vh), 4.5rem);
    line-height: 1.04;
    transform-origin: left center;
    transition: opacity 0.62s ease 0.08s, color 0.62s ease 0.08s;
  }

  .site-odles .menu-item:hover .menu-item-title,
  .site-odles .menu-item:focus-visible .menu-item-title {
    letter-spacing: inherit;
    transform: none;
  }

  .site-odles .menu-item-sub {
    position: static;
    display: flex;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(10px, 1.05vh, 14px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    font-size: clamp(0.91rem, min(1.014vw, 1.82vh), 1.22rem);
    line-height: 1.3;
    pointer-events: none;
    transition:
      visibility 0s linear 0.72s,
      max-height 0.82s cubic-bezier(0.16, 0.76, 0.24, 1) 0.06s,
      margin-top 0.82s cubic-bezier(0.16, 0.76, 0.24, 1) 0.06s,
      opacity 0.62s ease 0.08s,
      transform 0.72s cubic-bezier(0.16, 0.76, 0.24, 1) 0.06s;
  }

  .site-odles .menu-item-sub > span,
  .site-odles .menu-item-sub > a {
    display: block;
  }

  .site-odles .menu-item-sub > span + span::before,
  .site-odles .menu-item-sub > a + a::before {
    content: none;
  }

  .site-odles .menu-item:hover .menu-item-sub,
  .site-odles .menu-item:focus-visible .menu-item-sub,
  .site-odles .menu-item:focus-within .menu-item-sub {
    max-height: clamp(118px, 15vh, 166px);
    margin-top: clamp(12px, 1.5vh, 18px);
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s, 0.07s, 0.07s, 0.11s, 0.08s;
  }

  .site-odles .menu-item:hover .menu-item-sub > span,
  .site-odles .menu-item:hover .menu-item-sub > a,
  .site-odles .menu-item:focus-visible .menu-item-sub > span,
  .site-odles .menu-item:focus-visible .menu-item-sub > a,
  .site-odles .menu-item:focus-within .menu-item-sub > span,
  .site-odles .menu-item:focus-within .menu-item-sub > a {
    opacity: 1;
  }

  .site-odles .menu-pics {
    position: absolute;
    top: clamp(130px, 15vh, 190px);
    right: max(24px, 6vw);
    bottom: clamp(100px, 12vh, 160px);
    left: 54vw;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 1.8vw, 38px);
  }

  .site-odles .menu-pics img {
    position: static;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* Menuebilder sind reine Deko: kein Hover, keine Maus-Interaktion. */
    pointer-events: none;
    scale: 1;
  }

  .site-odles .mp-big {
    grid-column: 2;
    grid-row: 1 / 13;
    object-position: 50% 48%;
  }

  .site-odles .mp-small {
    grid-column: 1;
    grid-row: 8 / 13;
    /* Abendbild vom Col Raiser: Huette sitzt knapp links der Mitte,
       im unteren Bilddrittel. */
    object-position: 47% 60%;
  }

  .site-odles .mi-br-d {
    display: inline;
  }

  .site-odles .menu-mountain {
    z-index: 1;
  }
}

/* Flache Fenster (MacBook 13 Zoll): dasselbe Desktopmenue, nur mit weniger
   Luft oben und unten, damit alle sieben Punkte samt Fotos Platz haben. */
@media (min-width: 1201px) and (min-height: 621px) and (max-height: 760px) {
  .site-odles .menu-nav {
    top: clamp(96px, 14vh, 130px);
    bottom: clamp(96px, 14vh, 130px);
  }

  .site-odles .menu-pics {
    top: clamp(90px, 13vh, 120px);
    bottom: clamp(70px, 10vh, 100px);
  }
}

.site-odles .food-layout {
  z-index: 2;
}

.site-odles .food-scroll {
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.site-odles .food-deco-a {
  z-index: 1;
  top: clamp(72px, 8vw, 110px);
  left: 55.2%;
  width: clamp(432px, 37.2vw, 804px);
  height: auto;
}

.site-odles .food-deco-b {
  z-index: 1;
}.site-odles .moments {
  background-color: var(--color-dark);
  overflow: hidden;
  padding-top: clamp(58px, 6.5vw, 74px);
  padding-bottom: clamp(76px, 8vw, 124px);
}

.site-odles .moments-scroll {
  --moments-gap: clamp(14px, 1.6vw, 22px);
  display: block;
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 54px);
  margin-right: 20vw;
  padding: 10px 0 16px var(--pad-x);
  transform: none;
  touch-action: pan-y;
}

.site-odles .moments-track {
  display: flex;
  width: max-content;
  align-items: flex-start;
  will-change: transform;
}

.site-odles .moments-track.is-ready {
  animation: momentsLoop var(--carousel-duration, 40s) linear infinite;
}

.site-odles .moments-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--moments-gap);
  padding-right: var(--moments-gap);
}

.site-odles .m-item {
  flex-shrink: 0;
  box-shadow: none;
  scroll-snap-align: none;
}

@keyframes momentsLoop {
  from {
    transform: translate3d(var(--carousel-loop-start, 0%), 0, 0);
  }

  to {
    transform: translate3d(var(--carousel-loop-end, -50%), 0, 0);
  }
}

/* Die sichtbare Bildfolge liegt in der mittleren von drei identischen Reihen.
   Auto-Lauf und schnelle manuelle Klickfolgen passieren dadurch ohne einen
   sichtbaren Rücksprung an den Anfang. */
.site-odles .moments-track {
  --carousel-loop-start: -33.333333%;
  --carousel-loop-end: -66.666667%;
}

@media (max-width: 700px) {
  /* Auf Mobilgeraeten bleiben die Bildwelten bewusst praesent. */
  .site-odles .hero {
    min-height: 65vh;
    min-height: 65svh;
  }

  .site-odles .hero-mountain {
    height: clamp(96px, 15vw, 110px);
  }

  .site-odles .hero-webcam,
  .site-odles .hero-weather-mobile {
    bottom: calc(var(--hero-action-bottom) + 8px);
    width: 51px;
    height: 66px;
  }

  .site-odles .hd-lang-toggle {
    gap: 7px;
    font-size: 15px;
  }

  .site-odles .hd-lang-toggle svg {
    width: 13.5px;
  }

  .site-odles .hd-langs {
    width: 72px;
    font-size: 14px;
  }

  .site-odles .hd-langs a {
    min-height: 48px;
  }

  .site-odles .hd-lang-separator {
    width: 38px;
  }

  .site-odles .menu-item-sub,
  .site-odles .menu-item:hover .menu-item-sub,
  .site-odles .menu-item:focus-visible .menu-item-sub,
  .site-odles .menu-item:focus-within .menu-item-sub {
    display: flex;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    font-size: clamp(0.85rem, calc(3vw + 2px), 0.98rem);
    line-height: 1.35;
    pointer-events: none;
    transition:
      visibility 0s linear 0.28s,
      max-height 0.28s cubic-bezier(0.16, 0.76, 0.24, 1),
      margin-top 0.28s cubic-bezier(0.16, 0.76, 0.24, 1),
      opacity 0.22s ease,
      transform 0.28s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

  .site-odles .menu-item-sub > span + span::before,
  .site-odles .menu-item-sub > a + a::before {
    content: none;
  }

  .site-odles .menu-item.submenu-open .menu-item-sub {
    max-height: 128px;
    margin-top: 8px;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .site-odles .menu-item.submenu-open .menu-item-title {
    opacity: 1;
  }

  .site-odles .menu-langs {
    font-size: clamp(0.875rem, 3.7vw, 1rem);
  }

  .site-odles .farm {
    padding-right: 0;
    padding-left: 0;
    padding-top: clamp(48px, 13vw, 60px);
    padding-bottom: 0;
  }

  .site-odles .farm-text {
    padding-inline: var(--pad-x);
  }

  .site-odles .farm-imgs {
    gap: 12px;
  }

  .site-odles .events {
    padding-bottom: clamp(30px, 8vw, 36px);
  }

  .site-odles .moments {
    background-image: none;
    padding-top: clamp(38px, 11vw, 50px);
    padding-bottom: clamp(48px, 14vw, 64px);
  }

  .site-odles .menu-overlay {
    background-color: #34302E;
    background-image:
      linear-gradient(rgba(52, 48, 46, 0.9), rgba(52, 48, 46, 0.9)),
      url("gallery/desktop/baita-odles-im-abendlicht.webp");
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover, cover;
  }

  .site-odles .moments-scroll {
    --moments-gap: 12px;
    margin-top: 24px;
  }

}

@media (max-width: 540px) {
  .site-odles .ft {
    padding-top: 58px;
    padding-bottom: 24px;
  }

  .site-odles .ft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  .site-odles .ft-brand {
    grid-column: 1 / -1;
  }

  .site-odles .ft-col:last-child {
    grid-column: 1 / -1;
  }

  .site-odles .ft-col:last-child nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .site-odles .ft-brand img {
    margin-bottom: 12px;
  }

  .site-odles .ft-brand p {
    font-size: calc(var(--fs-small) + 2px);
    line-height: 1.55;
  }

  .site-odles .ft-brand-partners {
    justify-content: center;
    margin: 22px auto 0;
  }

  .site-odles .ft-brand .ft-brand-partner img {
    margin: 0;
  }

  .site-odles .ft-brand .ft-brand-partner-seceda img {
    filter: none;
  }

  .site-odles .ft-col-title {
    margin-bottom: 8px;
  }

  .site-odles .ft-col nav {
    gap: 0;
    font-size: calc(var(--fs-small) + 2px);
  }

  .site-odles .ft-col a {
    min-height: 36px;
    line-height: 1.35;
  }

  .site-odles .ft-bottom {
    margin-top: 32px;
    padding-top: 18px;
  }

  .site-odles .ft-bottom-links {
    font-size: calc(var(--fs-legal) + 2px);
  }

  .site-odles .ft .site-footer-legal {
    margin-top: 18px;
  }
}

@media (min-width: 701px) and (max-width: 820px) {
  .site-odles {
    --hero-action-bottom: clamp(66px, 8vh, 86px);
  }

  .site-odles .hd-info-links {
    display: none;
  }

  .site-odles .hero-webcam {
    bottom: var(--hero-action-bottom);
    display: inline-flex;
    width: 34px;
    height: 44px;
  }

  .site-odles .hero-webcam img {
    width: 22px;
    height: 22px;
  }

  .site-odles .hero-weather-mobile {
    position: absolute;
    right: var(--pad-x);
    bottom: var(--hero-action-bottom);
    z-index: 5;
    display: inline-flex;
    width: 34px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--color-cream);
    touch-action: manipulation;
  }

  .site-odles .hero-weather-mobile img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: var(--filter-cream);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal]{
    opacity: 1;
    animation: none;
  }

  .js [data-reveal].revealed {
    animation: none;
  }

  .js .rv-item,
  .js [data-reveal].revealed .rv-item,
  .js .rv-item.revealed {
    translate: none;
    clip-path: none;
    transition: none;
  }

  .site-odles .btn {
    transition: none;
  }

  .site-odles .btn::before,
  .site-odles .btn-arrow {
    transition: none;
  }

  .site-odles .hd-langs a,
  .site-odles .hd-weather,
  .site-odles .hd-webcam,
  .site-odles .hero-webcam,
  .site-odles .hero-weather-mobile,
  .site-odles .ft-brand-partner {
    transition: none;
  }

  .site-odles .hero-webcam:hover,
  .site-odles .ft-brand-partner:hover {
    transform: none;
  }

  .site-odles .btn:hover .btn-arrow,
  .site-odles .btn:focus-visible .btn-arrow {
    transform: none;
  }

  .site-odles .moments-track.is-ready {
    animation: none;
  }

  .site-odles .moments-scroll {
    overflow-x: auto;
    touch-action: pan-x pan-y;
  }

  .site-odles .moments-set[aria-hidden="true"] {
    /* Die zwei technischen Zwillinge bleiben sichtbar, damit die Pfeiltasten
       auch bei reduzierter Bewegung ohne Sprung von Ende zu Anfang wechseln.
       Sie sind weiterhin aria-hidden und werden nie vorgelesen. */
    display: flex;
  }
}

/* ---------- Deutsche Startseite: FAQ ---------- */

.site-odles .faq {
  background: var(--color-sand);
  padding: clamp(70px, 9vw, 140px) var(--pad-x) clamp(170px, 18vw, 280px);
}

.site-odles .faq-inner {
  width: min(100%, 980px);
  margin: 0 auto;
}

.site-odles .faq h2 {
  margin: 0 0 clamp(28px, 4vw, 56px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.06;
}

.site-odles .faq-item {
  border-top: 1px solid var(--color-line);
}

.site-odles .faq-item:last-of-type {
  border-bottom: 1px solid var(--color-line);
}

.site-odles .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
}

.site-odles .faq-item summary::-webkit-details-marker {
  display: none;
}

.site-odles .faq-item summary h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}

.site-odles .faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1;
  color: var(--color-muted);
  transition: transform 0.3s ease;
}

.site-odles .faq-item[open] summary::after {
  transform: rotate(45deg);
}

.site-odles .faq-item summary:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 3px;
}

.site-odles .faq-item p {
  margin: 0;
  padding: 0 0 clamp(20px, 2.4vw, 30px);
  max-width: 68ch;
  color: var(--color-muted);
  font-size: var(--fs-body);
  line-height: 1.65;
}

.site-odles .faq-item p a {
  color: inherit;
  text-decoration: underline;
}

/* ---------- Deutsche Startseite: Mobile-Feinschliff ---------- */

@media (max-width: 700px) {
  /* Hero-Bild ist mobil sehr hell: staerkerer Verlauf fuer lesbaren Header und Titel */

  /* Wetter- und Webcam-Icon als runde, helle Buttons mit dunklem Icon */
  .site-odles .hero-webcam,
  .site-odles .hero-weather-mobile {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--color-sand);
  }

  .site-odles .hero-webcam:hover,
  .site-odles .hero-weather-mobile:hover {
    background: var(--color-gold);
    opacity: 1;
  }

}

/* ---------- Deutsche Startseite: Mobile-Verhalten und Feinschliff 2 ---------- */

.site-odles a,
.site-odles button {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 700px) {
  /* Galerie mobil: volle Breite, automatisches Scrollen */
  .site-odles .moments-scroll {
    margin-right: 0;
  }

  /* Abstand zwischen Anreise und FAQ halbieren */

  /* Footer-Unterzeile: zwei Zeilen (Links / Copyright + Webdesign) */
  .site-odles .ft-bottom {
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 14px;
    row-gap: 10px;
  }

  .site-odles .ft-bottom-links {
    order: -1;
    flex-basis: 100%;
    justify-content: center;
    gap: 8px 14px;
  }
}

/* Touch-Geraete: Der Button schaltet beim Antippen sofort um, ohne
   Wischanimation und ohne haengenbleibenden Hover-Zustand. */
@media (hover: none) {
  .site-odles .btn,
  .site-odles .btn::before,
  .site-odles .btn-arrow {
    transition: none;
  }

  .site-odles .btn:active::before {
    transform: scaleX(1);
  }

  .site-odles .btn:active {
    color: var(--btn-hover-color, var(--color-cream));
    border-color: var(--btn-hover-border, var(--btn-fill, var(--color-dark)));
  }

  .btn-gold:active {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-cream);
  }

  .btn-outline:active {
    background: var(--color-dark);
    color: var(--color-cream);
  }

  .btn-ghost:active {
    background: rgba(239, 235, 231, 0.14);
    border-color: rgba(239, 235, 231, 0.9);
  }

  .btn-solid:active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark);
  }
}

/* ---------- Deutsche Startseite: kompakter Footer mobil ---------- */

@media (max-width: 700px) {
  .site-odles .ft {
    padding: 52px var(--pad-x) 24px;
  }

  /* Anker-Spalte "Entdecken" mobil ausblenden, Menue deckt das ab */
  .site-odles .ft-grid > .ft-col:nth-of-type(2) {
    display: none;
  }

  .site-odles .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .site-odles .ft-brand {
    grid-column: span 2;
  }

  .site-odles .ft-brand img {
    width: 92px;
    margin-bottom: 10px;
  }

  .site-odles .ft-brand p {
    max-width: 300px;
    font-size: var(--fs-meta);
    line-height: 1.55;
  }

  .site-odles .ft-brand-partners {
    margin-top: 14px;
  }

  .site-odles .ft-col nav {
    gap: 0;
    font-size: var(--fs-small);
  }

  .site-odles .ft-col a {
    min-height: 32px;
  }

  /* Kontakt-Spalte neben "Besuch planen" statt volle Breite */
  .site-odles .ft-col:last-child {
    grid-column: auto;
  }

  .site-odles .ft-col:last-child nav {
    display: flex;
    flex-direction: column;
  }

  .site-odles .ft .site-footer-legal {
    padding: 10px 0 0;
    font-size: calc(var(--fs-legal) - 0.5px);
    line-height: 1.5;
  }
}

@media (max-width: 700px) {
  .site-odles .food-card-img {
    height: clamp(390px, 104vw, 440px);
  }

  .site-odles .food-card:nth-child(1) .food-card-img img,
  .site-odles .food-card:nth-child(3) .food-card-img img {
    object-position: 50% 72%;
  }

  .site-odles .food-card:nth-child(2) .food-card-img img,
  .site-odles .food-card:nth-child(4) .food-card-img img {
    object-position: 50% 50%;
  }

  .site-odles .food-card:nth-child(5) .food-card-img img {
    object-position: 50% 58%;
  }

  .site-odles .food-card:nth-child(6) .food-card-img img {
    object-position: 50% 62%;
  }

  .site-odles .food-card:nth-child(7) .food-card-img img {
    object-position: 50% 52%;
  }

  .site-odles .food-card:nth-child(8) .food-card-img img {
    object-position: 50% 56%;
  }
}

/* Feinschliff des mobilen Menues - gilt wie das Listen-Menue bis 1200px. */
@media (max-width: 1200px) {
  .site-odles .menu-overlay {
    padding-top: clamp(76px, 10vh, 92px);
    padding-bottom: max(clamp(76px, 10vh, 92px), env(safe-area-inset-bottom));
  }

  .site-odles .menu-nav {
    width: min(100%, 320px);
    gap: clamp(14px, 2vh, 20px);
  }

  .site-odles .menu-item {
    width: fit-content;
    min-height: 44px;
  }

  /* Ohne den erzwungenen Umbruch stehen die kurzen Punkte einzeilig,
     nur die beiden langen brechen noch - das macht das Menue kuerzer. */
  .site-odles .menu-nav .mi-br {
    display: none;
  }

  .site-odles .menu-item-title {
    max-width: 16ch;
    /* 2 px groesser als zuvor, damit die Hauptpunkte klar fuehren. */
    font-size: clamp(calc(1.57rem + 2px), calc(6.5vw + 2px), calc(1.87rem + 2px));
    letter-spacing: -0.006em;
    line-height: 1.1;
  }

  .site-odles .menu-langs {
    margin-top: clamp(14px, 2.2vh, 20px);
  }
}

/* ---------- Deutsche Startseite: Speisensteuerung und finale Bildkanten ---------- */

.site-odles .food-carousel {
  flex: 1 1 0;
  min-width: 0;
}

.site-odles .food-carousel .food-scroll {
  width: 100%;
}

.site-odles .food-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(20px, 2vw, 30px);
  padding: 28px var(--pad-x) 0 0;
}

.site-odles .food-control {
  display: inline-grid;
  width: clamp(52px, 4.4vw, 66px);
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-cream);
  cursor: pointer;
  touch-action: manipulation;
}

.site-odles .food-control-prev {
  transform: none;
}

.site-odles .food-control:hover,
.site-odles .food-control:focus-visible {
  color: var(--color-gold);
}

.site-odles .food-control:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 6px;
}

.site-odles .food-control:disabled {
  opacity: 0.28;
  cursor: default;
  color: var(--color-cream);
}

.site-odles .food-card-cap {
  justify-content: flex-start;
}

/* Der Bildblock liegt ohne Aussenabstand an Oberkante, rechter Kante und Unterkante. */
@media (min-width: 861px) {
  .site-odles .farm {
    padding: 0;
  }

  .site-odles .farm-grid {
    max-width: none;
    height: clamp(936px, 79.3vw, 1144px);
    grid-template-columns: minmax(340px, 42%) minmax(0, 58%);
    gap: 0;
  }

  .site-odles .farm-text {
    padding: clamp(90px, 10vw, 150px) clamp(48px, 6vw, 100px) clamp(90px, 10vw, 150px) var(--edge);
  }

  .site-odles .farm-imgs {
    min-height: 0;
    height: 100%;
    align-self: stretch;
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(14px, 1.8vw, 24px);
  }

  .site-odles .farm-img-wide,
  .site-odles .farm-img-small {
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* Der Übergang von Anreise zu den Fragen ist bewusst kompakter. */

.site-odles .faq {
  padding-top: clamp(35px, 4.5vw, 70px);
}

@media (min-width: 1201px) and (min-height: 621px) {
  .site-odles .menu-pics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(14, minmax(0, 1fr));
  }

  .site-odles .menu-pics .mp-big,
  .site-odles .menu-pics .mp-small {
    width: 100%;
    height: 100%;
  }

  /* Linkes Menuebild sitzt bewusst 10 % tiefer als das rechte. */
  .site-odles .menu-pics .mp-big {
    grid-column: 1;
    grid-row: 1 / 12;
    object-position: 50% 55%;
    transform: translateY(10%);
  }

  .site-odles .menu-pics .mp-small {
    grid-column: 2;
    grid-row: 4 / 15;
    /* Holzherz-Motiv: das Herz sitzt leicht links der Bildmitte. */
    object-position: 45% 50%;
  }
}

@media (max-width: 1120px) {
  .site-odles .food-carousel {
    width: 100%;
  }

  .site-odles .food-controls {
    padding-left: var(--pad-x);
  }
}

@media (max-width: 700px) {
  .site-odles .food-controls {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .site-odles .food-control {
    transition: none;
  }
}

/* ---------- Galerie und Lage: finale Geometrie ---------- */

.site-odles .hd-menu:hover {
  opacity: 1;
}

.site-odles .moments-track,
.site-odles .moments-set {
  align-items: center;
}@media (min-width: 1600px) {
}

@media (min-width: 1201px) and (min-height: 621px) {
}

@media (min-width: 701px) and (max-width: 1200px) {
}

@media (max-width: 700px) {
}

/* ---------- Mobil und Tablet: Header-Leiste bleibt im offenen Menue sichtbar ---------- */

@media (max-width: 1200px) {
  .site-odles.menu-open .hd {
    visibility: visible;
  }

  .site-odles.menu-open .hd {
    z-index: 70;
    transform: translateY(0);
    background: transparent;
  }

  .site-odles.menu-open .hd-logo {
    z-index: 70;
    visibility: hidden;
    transform: translateX(-50%);
  }

  /* Sprachwahl liegt oben im Header, die untere im Overlay entfaellt */
  .site-odles .menu-overlay .menu-langs {
    display: none;
  }

  /* Erster Tap zeigt die Unterpunkte, zweiter Tap navigiert */
  .site-odles .menu-item-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(0.45em + 2px) calc(1.3em + 2px);
    /* Bewusst die Grotesk: so heben sich die Unterpunkte klar von den
       Hauptpunkten in der Display-Serife ab. */
    font-family: var(--font-body);
    font-size: calc(var(--fs-menu-sub) + 2px);
    letter-spacing: 0.02em;
    line-height: 1.45;
    text-transform: none;
    color: var(--color-cream);
  }

  .site-odles .menu-item-sub > span {
    position: relative;
    display: inline-block;
    opacity: 1;
  }

  .site-odles .menu-item-sub > span + span::before {
    position: absolute;
    left: -0.82em;
    content: "·";
    opacity: 0.55;
  }

  /* Die Hoehe liegt knapp ueber dem echten Inhalt (zwei Zeilen mit der
     groesseren Mobilschrift, rund 75px). Mit dem frueheren Schaetzwert 240px
     lief die Animation erst ins Leere und klappte dann schlagartig zu. */
  .site-odles .menu-item.submenu-open .menu-item-sub {
    max-height: 128px;
    opacity: 1;
    transform: none;
    margin-top: 12px;
    visibility: visible;
    pointer-events: auto;
    transition:
      visibility 0s linear 0s,
      max-height 0.28s cubic-bezier(0.16, 0.76, 0.24, 1),
      margin-top 0.28s cubic-bezier(0.16, 0.76, 0.24, 1),
      opacity 0.22s ease 0.04s,
      transform 0.28s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

}

/* Menue-Titel: Umbruch nur im mobilen offenen Menue */
.mi-br {
  display: none;
}

@media (max-width: 1200px) {
  .site-odles .mi-br {
    display: inline;
  }

  .site-odles .menu-item-title {
    line-height: 1.12;
  }
}

/* ---------- Musik: 50/50-Teilung, Textblock zentriert in der rechten Haelfte ---------- */

@media (min-width: 701px) {
  .site-odles .events {
    padding-inline: 0;
  }

  .site-odles .events-body {
    width: 50%;
    max-width: none;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  .site-odles .events-inner {
    width: 100%;
    max-width: 34rem;
    padding-inline: 24px;
  }
}

/* ---------- Menue: ruhiger Reveal direkt aus dem Header-Trigger ---------- */

.site-odles .menu-overlay {
  display: flex;
  isolation: isolate;
  visibility: hidden;
  background: transparent;
  pointer-events: none;
}

.site-odles .menu-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(rgba(52, 48, 46, 0.95), rgba(52, 48, 46, 0.95)),
    url("gallery/desktop/baita-odles-im-abendlicht.webp") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}

.site-odles .menu-overlay.open {
  animation: none;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 1201px) and (min-height: 621px) {
  .site-odles .menu-overlay {
    display: block;
  }
}

.site-odles .menu-overlay.open::before {
  opacity: 1;
}

.site-odles .menu-overlay.closing::before {
  opacity: 0;
  transition-duration: 0.28s;
}

.site-odles .menu-overlay.open .menu-mountain {
  animation: menuMountainRise 0.7s cubic-bezier(0.16, 0.76, 0.24, 1) 0.3s both;
}

@keyframes menuMountainRise {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.site-odles .menu-overlay.open .menu-item {
  animation: menuItemRise 0.46s cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

.site-odles .menu-overlay.open .menu-item:nth-child(1) { animation-delay: 0.08s; }
.site-odles .menu-overlay.open .menu-item:nth-child(2) { animation-delay: 0.11s; }
.site-odles .menu-overlay.open .menu-item:nth-child(3) { animation-delay: 0.14s; }
.site-odles .menu-overlay.open .menu-item:nth-child(4) { animation-delay: 0.17s; }
.site-odles .menu-overlay.open .menu-item:nth-child(5) { animation-delay: 0.2s; }
.site-odles .menu-overlay.open .menu-item:nth-child(6) { animation-delay: 0.23s; }
.site-odles .menu-overlay.open .menu-item:nth-child(7) { animation-delay: 0.26s; }

@keyframes menuItemRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-odles .menu-overlay.open .menu-pics img {
  animation: menuPhotoReveal 0.72s cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

.site-odles .menu-overlay.open .mp-big { animation-delay: 0.42s; }
.site-odles .menu-overlay.open .mp-small { animation-delay: 0.54s; }

@keyframes menuPhotoReveal {
  from {
    opacity: 0;
    transform: scale(1.035);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-odles .menu-overlay.closing .menu-nav,
.site-odles .menu-overlay.closing .menu-mountain,
.site-odles .menu-overlay.closing .menu-pics {
  animation: menuContentOut 0.18s ease both;
}

.site-odles .menu-overlay.closing .menu-item {
  animation: none;
}

@keyframes menuContentOut {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-odles .menu-overlay.open::before,
  .site-odles .menu-overlay.closing::before,
  .site-odles .menu-overlay.open .menu-nav,
  .site-odles .menu-overlay.open .menu-mountain,
  .site-odles .menu-overlay.closing .menu-nav,
  .site-odles .menu-overlay.closing .menu-mountain,
  .site-odles .menu-overlay.closing .menu-pics,
  .site-odles .menu-overlay.open .menu-item,
  .site-odles .menu-overlay.open .menu-pics img {
    animation: none;
  }

  .site-odles .menu-overlay::before {
    transition: none;
  }

  .site-odles .menu-overlay.open::before {
    opacity: 1;
  }

  .site-odles .menu-overlay.open .menu-nav,
  .site-odles .menu-overlay.open .menu-mountain,
  .site-odles .menu-overlay.open .menu-item,
  .site-odles .menu-overlay.open .menu-pics img {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Musik und Lage: Dekos bewusst im Inhaltsfluss platzieren ---------- */

/* Kaesebrett sitzt am unteren Rand des Hof-Abschnitts und wird dort leicht
   angeschnitten - nicht hinter der Ueberschrift. */
.site-odles .events-deco {
  top: auto;
  bottom: calc(clamp(-150px, -9vw, -60px) + 100px);
  right: -10px;
  z-index: 3;
  transform: translateX(-20%);
}

/* ---------- Finale Vorschau-QA: Fokus, Anker und Touchziele ---------- */

.site-odles main section[id],
.site-odles footer[id] {
  /* Der fixe Header blendet sich beim Runterscrollen aus; Anker landen darum
     exakt am Abschnittsanfang. Die Abschnitte bringen eigenes Padding mit. */
  scroll-margin-top: 8px;
}

.site-odles a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: none), (pointer: coarse) {
  .site-odles .hd-menu:focus,
  .site-odles .hd-menu:focus-visible,
  .site-odles .menu-overlay a:focus,
  .site-odles .menu-overlay a:focus-visible,
  .site-odles .hd-lang-toggle:focus,
  .site-odles .hd-lang-toggle:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  .site-odles .hd-menu:focus,
  .site-odles .hd-menu:focus-visible,
  .site-odles .menu-overlay a:focus,
  .site-odles .menu-overlay a:focus-visible,
  .site-odles .hd-lang-toggle:focus,
  .site-odles .hd-lang-toggle:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  .site-odles .faq h2 {
    text-align: center;
  }

  .site-odles .ft-col a,
  .site-odles .ft-bottom a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 1024px) {
  .site-odles .hd-langs a,
  .site-odles .hd-weather,
  .site-odles .hd-webcam {
    min-width: 44px;
  }

  .site-odles .ft-col a,
  .site-odles .ft-bottom a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

/* ---------- Speisen: Desktop-Pfeile rechts oberhalb der Bilder ---------- */

@media (min-width: 1121px) {
  .site-odles .food {
    padding-bottom: clamp(44px, 4vw, 59px);
  }

  .site-odles .food-carousel {
    position: relative;
    padding-bottom: clamp(24px, 2.5vw, 36px);
  }

  .site-odles .food-controls {
    position: absolute;
    top: clamp(92px, 7vw, 108px);
    right: calc(var(--pad-x) + 40px);
    z-index: 3;
    width: auto;
    justify-content: flex-start;
    gap: 40px;
    visibility: visible;
    opacity: 1;
    padding: 0;
  }
}

@media (min-width: 701px) and (max-width: 1120px) {
  .site-odles .food-carousel {
    position: relative;
    padding-top: 68px;
  }

  .site-odles .food-controls {
    position: absolute;
    top: 0;
    right: calc(var(--pad-x) + 40px);
    z-index: 3;
    width: auto;
    justify-content: flex-start;
    gap: 40px;
    visibility: visible;
    opacity: 1;
    padding: 0;
  }
}

/* ---------- Letzter Pixelpass: Header, Pfeile und mobile Bilduebergaenge ---------- */

.site-odles .hd-logo {
  top: clamp(16px, 1.2vw, 20px);
  width: calc(var(--logo-w) * 0.56);
}

.site-odles .food-control {
  width: clamp(73px, 6vw, 88px);
  height: 64px;
  opacity: 1;
}

.site-odles .food-control:disabled {
  opacity: 0.58;
}

@media (max-width: 700px) {
  .site-odles .hd-logo {
    top: 16px;
  }

  .site-odles.at-top .hd-logo {
    top: 57px;
  }

  .site-odles .events-deco {
    top: auto;
    bottom: -46px;
    right: -42px;
    z-index: 3;
    width: min(76vw, 296px);
    height: auto;
    transform: translateX(-20%);
  }

  .site-odles .events-body {
    z-index: 2;
  }
}

/* ---------- Anreise: dunkle Flaeche mit heller Kartenzeichnung ---------- */

/* Der Kartenblock kommt frueher und zuegiger herein als die uebrigen
   Abschnitte, siehe data-reveal-early im Markup. */
.site-odles .map {
  background: var(--color-dark);
  color: var(--color-cream);
  --rv-media-dur: 0.5s;
  --rv-media-step: 0.06s;
  --rv-text-dur: 0.45s;
  --rv-text-step: 0.05s;
}

.site-odles .map-body h2 {
  color: var(--color-cream);
}

.site-odles .map-body p {
  color: rgba(239, 235, 231, 0.76);
}

.site-odles .map-img img {
  filter: var(--filter-cream);
}

.site-odles .map-img img {
  opacity: 0.9;
}

/* ---------- Echte Pfeilbilder und Logo im Header ---------- */

.site-odles .food-control-icon {
  display: block;
  width: clamp(73px, 6vw, 88px);
  height: auto;
  flex: none;
  filter: var(--filter-cream);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.site-odles .food-control-prev .food-control-icon {
  transform: scaleX(-1);
}

.site-odles .food-control:hover .food-control-icon,
.site-odles .food-control:focus-visible .food-control-icon {
  filter: brightness(0) saturate(100%) invert(79%) sepia(21%) saturate(493%) hue-rotate(356deg) brightness(92%) contrast(84%);
}

/* Sobald der Header seinen dunklen Balken hat, steht das Logo 10 % groesser. */
.site-odles .hd .hd-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(68px, 4.62vw, 86px);
  height: auto;
  transform: translate(-50%, -50%);
  transition:
    width 0.48s cubic-bezier(0.16, 0.76, 0.24, 1),
    transform 0.48s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles.header-visible .hd .hd-logo,
.site-odles:not(.at-top) .hd .hd-logo {
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-odles.at-top .hd .hd-logo {
  top: 50%;
  width: calc(var(--logo-w) * 1.2);
  transform: translate(-50%, -13%);
}

@media (max-width: 820px) {
  .site-odles.at-top .hd .hd-logo {
    width: calc(var(--logo-w) * 1.15);
    transform: translate(-50%, -37%);
  }
}

@media (max-width: 700px) {
  .site-odles.at-top .hd .hd-logo {
    transform: translate(-50%, 5%);
  }
}

@media (max-width: 360px) {
  .site-odles.at-top .hd .hd-logo {
    width: calc(var(--logo-w) * 1.13);
  }
}

/* ---------- Unterseiten (Impressum & Co.): dunkles Kopf-Band ---------- */

.site-odles .subhero {
  position: relative;
  height: clamp(230px, 32vh, 340px);
  background: var(--color-dark);
}.site-odles.page-sub .legal-content {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.page-sub,
.page-sub main,
.page-sub .page-hero {
  background: var(--color-sand);
}

.site-odles.page-sub .legal-content h1 {
  font-family: var(--font-display);
  font-weight: 400;
}

.site-odles.page-sub .legal-content a {
  color: inherit;
}

/* ---------- Mobil: Ein-Kachel-Snap im Speisen-Slider ---------- */

@media (max-width: 700px) {
  .site-odles.page-sub .legal-content h1 {
    font-size: clamp(2.1rem, 9vw, 2.5rem);
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .site-odles .food-scroll {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-x);
  }

  .site-odles .food-card {
    /* Startseiten-Karussell "Suedtiroler Kueche" bleibt auf Kundenwunsch bei Originalbreite.
       Die 20%-Verbreiterung gilt nur fuer die uebrigen Karusselle (z. B. .m-item). */
    flex: 0 0 76vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: scale(0.94);
    transform-origin: center center;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .site-odles .food-card.is-active {
    transform: scale(1);
  }
}

/* ---------- Mobil: mehr Luft zwischen den Abschnitten ---------- */

@media (max-width: 700px) {

  .site-odles .map-grid {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }

  .site-odles .map-body {
    padding-inline: var(--pad-x);
  }

  .site-odles main section h2 {
    margin-bottom: 22px;
  }

  .site-odles .food-controls {
    padding-top: 30px;
  }
}

.site-odles.page-sub .legal-content a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 1600px) {
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-media],
  .js [data-reveal-media].revealed {
    opacity: 1;
    clip-path: none;
    transition: none;
  }

  .js [data-reveal-media] img,
  .js [data-reveal-media].revealed img {
    transform: none;
    transition: none;
  }
}

/* ---------- Hero: rechte Spuren-SVG kompakt und deckend ---------- */

.site-odles .hero-tracks {
  top: auto;
  right: clamp(22px, 3vw, 56px);
  bottom: clamp(130px, 16vh, 180px);
  width: clamp(150px, 18vw, 260px);
  height: auto;
  opacity: 1;
  filter: var(--filter-cream);
}

@media (min-width: 1600px) {
  .site-odles .hero-tracks {
    right: clamp(48px, 3vw, 72px);
    bottom: clamp(150px, 16vh, 200px);
    width: min(16.25vw, 415px);
  }
}

/* Nur Startseite: Huetten-Skizze im Willkommens-Abschnitt vergroessert
   (2x minus 20 %); linke Seite voll sichtbar, laeuft per linearem
   Gradient nach rechts auf fast unsichtbar aus. */
@media (min-width: 701px) {
  .site-odles .welcome-icon-home {
    width: clamp(384px, 41.6vw, 606px);
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%);
    mask-image: linear-gradient(to right, #000 35%, transparent 100%);
  }
}

@media (min-width: 1600px) {
  .site-odles .welcome-icon-home {
    width: min(37.9vw, 976px);
  }
}

@media (max-width: 700px) {
  .site-odles .hero-tracks {
    right: 20px;
    bottom: clamp(138px, 18vh, 170px);
    width: clamp(120px, 33vw, 150px);
  }
}

/* ---------- Feinabstimmung: Menü, Galerie, Lage und mobile Abstände ---------- */

.site-odles .hd-logo {
  display: block;
  line-height: 0;
  pointer-events: auto;
}

.site-odles .hd-logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.site-odles .menu-item-title,
.site-odles .menu-item-sub > span {
  opacity: 0.6;
}

.site-odles .menu-item:hover .menu-item-title,
.site-odles .menu-item:focus-visible .menu-item-title,
.site-odles .menu-item:hover .menu-item-sub > span,
.site-odles .menu-item:focus-visible .menu-item-sub > span,
.site-odles .menu-item.submenu-open .menu-item-title,
.site-odles .menu-item.submenu-open .menu-item-sub > span {
  opacity: 1;
}

.site-odles .hero-tracks {
  opacity: 0.2;
}

.site-odles .moments {
  padding-top: clamp(116px, 13vw, 148px);
}

@media (min-width: 1201px) and (min-height: 621px) {
}

@media (max-width: 700px) {
  .site-odles .hero-tracks {
    bottom: clamp(150px, 20vh, 186px);
  }

  .site-odles .food-scroll {
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
  }

}

/* ---------- Finale Feinabstimmung: ruhige Galerie & mobile Navigation ---------- */

.site-odles .moments-scroll {
  overflow: clip;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  pointer-events: none;
  user-select: none;
}

.site-odles .moments-set {
  align-items: center;
  gap: clamp(22px, 2.2vw, 38px);
}

.site-odles .moments-set .m-item {
  flex: none;
  align-self: center;
  margin: 0;
}

.site-odles .moments-set .m-large {
  width: clamp(360px, 32vw, 520px);
  height: clamp(430px, 38vw, 610px);
}

.site-odles .moments-set .m-small {
  width: clamp(255px, 21vw, 340px);
  height: clamp(315px, 28vw, 450px);
}

.site-odles .moments-set .m-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kein pauschales object-position mehr: die Motivmitte wird pro Foto
     ueber die img[src*=...]-Regeln gesetzt; Standard bleibt center. */
}

/* Hof-Luftbild: René will die rechte Bildseite (Hof + Stall) sehen,
   nicht die linke Wiese. */
.site-odles .moments-set .m-item img[src*="hof-luftbild-baita-odles"] {
  object-position: 80% 50%;
}

/* Dolomiten-Panorama im Karussell: René will die rechte Bildseite sehen —
   die Hütte beginnt am linken Kachelrand, rechts davon Bänke und Geisler.
   Nur hier; ausserhalb des Karussells gilt weiter die 45%-Regel unten. */
.site-odles .moments-set .m-item img[src*="baita-odles-vor-den-groedner-dolomiten"] {
  object-position: 76% 50%;
}

/* Musikant steht im linken Bilddrittel. */
.site-odles .moments-set .m-item img[src*="musikant-vor-der-baita-odles"] {
  object-position: 30% 50%;
}

/* Familienmotiv mit Ziegen: Hof und Huette liegen rechts der Bildmitte. */
.site-odles .moments-set .m-item img[src*="familie-ziegen-spielplatz-baita-odles"] {
  object-position: 62% 50%;
}

/* Huehnermotiv: das Maedchen steht im rechten Bilddrittel. Zentriert wuerde
   die Kachel es am Kopf abschneiden, darum der Ausschnitt weiter rechts. */
.site-odles .moments-set .m-item img[src*="kinder-in-tracht-bei-den-huehnern-baita-odles"] {
  object-position: 70% 50%;
}

/* Hochformat-Gerichtefotos haben oben viel leere Holzwand, der Teller sitzt
   im unteren Drittel. Ein leichter Zoom mit Ursprung auf der Tellermitte
   rueckt ihn in allen Viewports in die Kachelmitte. */
.site-odles .moments-set .m-item img[src*="knoedelsuppe-mit-schnittlauch"] {
  transform: scale(1.3);
  transform-origin: 50% 85%;
}

.site-odles .moments-set .m-item img[src*="suedtiroler-knoedeltris"] {
  transform: scale(1.3);
  transform-origin: 50% 80%;
}

.site-odles .moments-set .m-item img[src*="hausgemachte-schlutzkrapfen-baita-odles"] {
  transform: scale(1.35);
  transform-origin: 50% 85%;
}

.site-odles .moments-set .m-item img[src*="gulasch-mit-semmelknoedel"] {
  transform: scale(1.3);
  transform-origin: 50% 80%;
}

.site-odles .moments-set .m-item img[src*="tagliata-mit-rucola-und-parmesan"] {
  transform: scale(1.25);
  transform-origin: 50% 75%;
}

.site-odles .moments-set .m-item img[src*="apfelstrudel-mit-vanillesauce"] {
  transform: scale(1.3);
  transform-origin: 50% 85%;
}

.site-odles .moments-set .m-item img[src*="tiramisu-mit-beeren-baita-odles"] {
  transform: scale(1.25);
  transform-origin: 50% 65%;
}

.site-odles .moments-set .m-item img[src*="penne-mit-tomatensauce"] {
  transform: scale(1.3);
  transform-origin: 50% 78%;
}

.site-odles .moments-set .m-item img[src*="hausgemachter-beerenkuchen"] {
  transform: scale(1.25);
  transform-origin: 50% 70%;
}

/* Kaiserschmarrn: der Teller ragt weiter nach oben als bei den uebrigen
   Gerichtefotos, deshalb schnitt der Zoom die obere Tellerecke ab. Das
   translateY schiebt das Motiv zusaetzlich um 20 % der Kachelhoehe nach
   unten, sodass der obere Rand vollstaendig sichtbar bleibt. */
.site-odles .moments-set .m-item img[src*="kaiserschmarrn-mit-beeren"] {
  transform: translateY(20%) scale(1.3);
  transform-origin: 50% 80%;
}

/* Mobile laedt statt der Desktop-Querformatfotos (1800x1200, Teller unten)
   die Hochformat-Crops (900x1350) aus gallery/mobile. Dort sitzt der Teller
   ohnehin schon tiefer im Bild, sodass der oben fuer Querformat kalibrierte
   Zoom-Ursprung (o70-85) das Gericht zu weit nach unten drueckt. Auf schmalen
   Viewports darum ein einheitlicher, staerker zentrierender Ausschnitt: mehr
   Zoom (1.45) mit Ursprung bei 80 % rueckt das Gericht in die Kachelmitte. */
@media (max-width: 700px) {
  .site-odles .moments-set .m-item img[src*="knoedelsuppe-mit-schnittlauch"],
  .site-odles .moments-set .m-item img[src*="suedtiroler-knoedeltris"],
  .site-odles .moments-set .m-item img[src*="hausgemachte-schlutzkrapfen-baita-odles"],
  .site-odles .moments-set .m-item img[src*="gulasch-mit-semmelknoedel"],
  .site-odles .moments-set .m-item img[src*="tagliata-mit-rucola-und-parmesan"],
  .site-odles .moments-set .m-item img[src*="apfelstrudel-mit-vanillesauce"],
  .site-odles .moments-set .m-item img[src*="tiramisu-mit-beeren-baita-odles"],
  .site-odles .moments-set .m-item img[src*="penne-mit-tomatensauce"],
  .site-odles .moments-set .m-item img[src*="hausgemachter-beerenkuchen"] {
    transform: scale(1.45);
    transform-origin: 50% 80%;
  }

  /* René: diese Gerichte werden mobil unten abgeschnitten, darum das Motiv
     zusaetzlich nach oben schieben (negatives translateY = nach oben). */
  .site-odles .moments-set .m-item img[src*="suedtiroler-knoedeltris"],
  .site-odles .moments-set .m-item img[src*="penne-mit-tomatensauce"] {
    transform: translateY(-20%) scale(1.45);
  }

  .site-odles .moments-set .m-item img[src*="knoedelsuppe-mit-schnittlauch"] {
    transform: translateY(-12%) scale(1.45);
  }

  /* Kaiserschmarrn behaelt zusaetzlich den 20-%-Versatz nach unten. */
  .site-odles .moments-set .m-item img[src*="kaiserschmarrn-mit-beeren"] {
    transform: translateY(20%) scale(1.45);
    transform-origin: 50% 80%;
  }
}

/* Food-Story-Slider (Klassiker / Fleisch vom Grill / Suesse Alm-Momente):
   die breiten Slides beschneiden Hochformat-Fotos vertikal; ohne Korrektur
   zeigt die Bildmitte die Holzwand statt des Tellers. */
.site-odles .photo-slide img[src*="suedtiroler-knoedeltris-mit-krautsalat"] {
  object-position: 50% 95%;
}

.site-odles .photo-slide img[src*="hausgemachte-schlutzkrapfen-baita-odles"] {
  object-position: 50% 95%;
}

.site-odles .photo-slide img[src*="gulasch-mit-semmelknoedel"] {
  object-position: 50% 72%;
}

.site-odles .photo-slide img[src*="tagliata-mit-rucola-und-parmesan"] {
  object-position: 50% 70%;
}

.site-odles .photo-slide img[src*="apfelstrudel-mit-vanillesauce"] {
  object-position: 50% 74%;
}

.site-odles .photo-slide img[src*="kaiserschmarrn-mit-beeren"] {
  object-position: 50% 76%;
}

.site-odles .photo-slide img[src*="tiramisu-mit-beeren-baita-odles"] {
  object-position: 50% 60%;
}

@media (max-width: 700px) {
  .site-odles .hero-tracks {
    display: none;
  }

  .site-odles .hero-webcam,
  .site-odles .hero-weather-mobile {
    display: grid;
    place-items: center;
    color: var(--color-dark);
    background: var(--color-cream);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(27, 24, 20, 0.18);
  }

  .site-odles .hero-webcam img,
  .site-odles .hero-weather-mobile img {
    filter: brightness(0) saturate(100%);
    opacity: 0.74;
  }

  .site-odles.menu-open .hd .hd-logo {
    z-index: 75;
    visibility: visible;
    opacity: 1;
    width: 70px;
    transform: translate(-50%, -50%);
  }

  .site-odles.page-sub.at-top .hd .hd-logo {
    top: 50%;
    width: 70px;
    transform: translate(-50%, -50%);
  }

  .site-odles .menu-item-sub {
    font-size: calc(var(--fs-menu-sub) + 4px);
  }

  .site-odles .menu-item-sub > span {
    opacity: 0.6;
  }

  .site-odles .menu-item.submenu-open .menu-item-sub > span {
    opacity: 1;
  }

  .site-odles .menu-item-sub > span + span::before {
    display: none;
    content: none;
  }

  .site-odles .moments-set {
    gap: 12px;
  }

  .site-odles .moments-set .m-large,
  .site-odles .moments-set .m-small {
    /* Auf Kundenwunsch: einzelne Karussellbilder mobil 20 % breiter. */
    width: calc((100vw - var(--pad-x) - var(--pad-x) - 12px) / 2 * 1.2);
  }

  .site-odles .moments-set .m-large {
    height: clamp(270px, 78vw, 330px);
  }

  .site-odles .moments-set .m-small {
    height: clamp(259px, 72vw, 312px);
  }
}

/* ---------- Offenes Menü: großzügiger Rhythmus und durchgehender Vollbildzustand ---------- */

.site-odles.menu-open .hd {
  z-index: 70;
  visibility: visible;
  background: transparent;
  box-shadow: none;
  transform: translateY(0);
}

.site-odles.menu-open .hd .hd-logo {
  z-index: 75;
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.site-odles .menu-nav {
  gap: clamp(14.4px, 2.64vh, 38.4px);
}

@media (min-width: 1201px) and (min-height: 621px) {
  .site-odles .menu-nav {
    gap: clamp(18px, 2.22vh, 29px);
  }
}

@media (max-width: 700px) {
  /* Der Abstand zwischen zwei Punkten muss groesser sein als der
     Zeilenabstand innerhalb eines Punktes, sonst verschwimmen sie.
     Auf Kundenwunsch rund 30 Prozent enger als die fruehere Stufe. */

  .site-odles.menu-open .hd .hd-logo {
    width: 70px;
  }
}

/* ---------- Musik: Hof-Collage gespiegelt ---------- */

.site-odles .events {
  display: block;
  min-height: 0;
  padding: 0;
}

.site-odles .events-grid {
  position: relative;
  z-index: 1;
  display: grid;
}

.site-odles .events-imgs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
}

.site-odles .events-img {
  min-width: 0;
  overflow: hidden;
}

.site-odles .events-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-odles .events-img-wide {
  grid-column: span 2;
}

.site-odles .events-img-wide img {
  object-position: 50% 64%;
}

.site-odles .events-imgs > .events-img:nth-child(2) img {
  object-position: 52% center;
}

.site-odles .events-imgs > .events-img:nth-child(3) img {
  object-position: 48% center;
}

.site-odles .events-img-stacked {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 24px);
}

.site-odles .events-img-stacked picture {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.site-odles .events-img-stacked picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-odles .events-body {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  max-width: none;
  margin: 0;
}

.site-odles .events-body::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(rgba(213, 204, 197, 0.88), rgba(213, 204, 197, 0.88)),
    url("gallery/desktop/familie-bei-der-heuarbeit.webp");
  background-position: center;
  background-size: cover;
}

.site-odles .events-inner {
  width: 100%;
  max-width: 34rem;
  padding: 0;
}

@media (min-width: 861px) {
  .site-odles .events-grid {
    height: clamp(936px, 79.3vw, 1144px);
    grid-template-columns: minmax(0, 58%) minmax(340px, 42%);
    gap: 0;
    align-items: stretch;
  }

  .site-odles .events-imgs {
    min-height: 0;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr);
  }

  .site-odles .events-img-wide,
  .site-odles .events-img-small {
    min-height: 0;
  }

  .site-odles .events-body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding: clamp(90px, 10vw, 150px) var(--edge) clamp(90px, 10vw, 150px) clamp(48px, 6vw, 100px);
  }
}

@media (max-width: 860px) {
  .site-odles .events-grid {
    grid-template-columns: 1fr;
  }

  .site-odles .events-body {
    order: 1;
    display: flex;
    justify-content: center;
    padding: clamp(72px, 10vw, 96px) var(--pad-x) clamp(48px, 7vw, 68px);
  }

  .site-odles .events-imgs {
    order: 2;
    width: 100%;
  }

  .site-odles .events-img-wide {
    aspect-ratio: 610 / 339;
  }

  .site-odles .events-img-small {
    aspect-ratio: 28 / 25;
  }
}

@media (max-width: 700px) {
  .site-odles .events-body {
    padding: 76px var(--pad-x) 52px;
  }

  .site-odles .events-imgs {
    gap: 12px;
  }

  .site-odles .events-img-stacked {
    gap: 12px;
  }

  /* Mobil bleibt im gestapelten Bildpaar nur das Weidemotiv stehen; das
     Huehnerfoto wuerde auf schmalen Viewports zu klein und unruhig wirken.
     Das verbleibende picture fuellt als einziges Flex-Item die volle Hoehe. */
  .site-odles .events-img-stacked .events-img-hen {
    display: none;
  }

  .site-odles .events-deco {
    top: auto;
    bottom: 60px;
    right: -42px;
  }
}

/* ---------- Mobile Rhythmik: konsistente, realistische Abschnittsabstaende ---------- */

@media (max-width: 700px) {
  .site-odles .welcome {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .site-odles .food {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .site-odles .farm {
    padding-top: 68px;
    padding-bottom: 0;
  }

  .site-odles .moments {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .site-odles .events-body {
    padding-top: 72px;
    padding-bottom: 48px;
  }

  .site-odles .map {
    padding-top: 88px;
    padding-bottom: 96px;
  }

  /* 30 % mehr Abstand zwischen Kartenbild und naechster Ueberschrift. */
  .site-odles .map-grid {
    gap: 60px;
  }

  .site-odles .faq {
    padding-top: 68px;
    padding-bottom: 112px;
  }

  .site-odles .faq h2 {
    margin-bottom: 30px;
  }

  /* Mobil sitzen die beiden Symbole in einer halben Pille, die bis an den
     Bildschirmrand laeuft: links angeschnitten die Webcam, rechts das Wetter.
     Symbol 30 % groesser als zuvor, dunkel auf hellem Grund. */
  .site-odles .hero-webcam,
  .site-odles .hero-weather-mobile {
    isolation: isolate;
    width: auto;
    min-width: 66px;
    height: 52px;
    background: var(--color-sand);
  }

  .site-odles .hero-webcam {
    left: 0;
    padding-right: 14px;
    padding-left: 8px;
    border-radius: 0 999px 999px 0;
  }

  .site-odles .hero-weather-mobile {
    right: 0;
    padding-right: 8px;
    padding-left: 14px;
    border-radius: 999px 0 0 999px;
  }

  .site-odles .hero-webcam::before,
  .site-odles .hero-weather-mobile::before {
    content: none;
  }

  .site-odles .hero-webcam img,
  .site-odles .hero-weather-mobile img {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    filter: var(--filter-dark);
  }

  /* Bisher 16 px, jetzt je nach Mobilbreite rund 30 % groesser. */
  .site-odles .menu-item-sub,
  .site-odles .menu-item:hover .menu-item-sub,
  .site-odles .menu-item:focus-visible .menu-item-sub,
  .site-odles .menu-item.submenu-open .menu-item-sub {
    font-size: clamp(18px, 5.4vw, 21px);
  }
}

/* ==========================================================================
   Bewegungs-Ebene: Hero-Intro, Galerie-Einflug, Menue-Buehne, Bild-Hover
   Vorbild ist ein gestaffelter Masken-Aufbau statt einfacher Einblendungen.
   ========================================================================== */

/* ---------- Hero: Titel als Maske{
  animation: none;
  opacity: 1;
  translate: 0 56px;
  clip-path: var(--rv-mask-closed);
}

.js .site-odles .hero-bg img {
  transform: scale(1.09);
  transition: transform 1.8s var(--rv-ease);
}

.js .site-odles.hero-ready .hero-bg img {
  transform: none;
}

/* ---------- Galerie: Kacheln klappen aus der Tiefe herein ---------- */

.js .site-odles .moments-scroll .m-item {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.5s ease,
    translate 0.55s var(--rv-ease);
  transition-delay: calc(var(--rv-i, 0) * 0.05s);
}

.js .site-odles .moments-scroll.revealed .m-item {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Bild-Hover: ruhiger Zoom innerhalb der Bildkante ---------- */

.site-odles .food-card-img img,
.site-odles .m-item img {
  transition: transform 0.8s var(--rv-ease);
}

.site-odles .food-card:hover .food-card-img img,
.site-odles .m-item:hover img {
  transform: scale(1.07);
}

/* ---------- Menue: gestaffelte Buehne statt einer einzelnen Einblendung ---------- */

/* 1. Hintergrund wischt von rechts herein. */
.js .site-odles .menu-overlay::before {
  opacity: 1;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.75s var(--rv-ease);
}

.js .site-odles .menu-overlay.open::before {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.js .site-odles .menu-overlay.closing::before {
  opacity: 1;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition-duration: 0.5s;
  transition-delay: 0.1s;
}

/* 2. Bergsilhouette steigt auf. */
.js .site-odles .menu-overlay.open .menu-mountain {
  animation: menuMountainRise 0.72s var(--rv-ease) 0.34s both;
}

/* 3. Bilder fahren von rechts herein und werden dabei aufgedeckt. */
.js .site-odles .menu-overlay .menu-pics img {
  animation: none;
  opacity: 0;
  translate: 60px 0;
  clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
}

.js .site-odles .menu-overlay.open .menu-pics img {
  opacity: 1;
  translate: 0 0;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  transition:
    opacity 0.7s var(--rv-ease),
    translate 0.9s var(--rv-ease),
    clip-path 0.9s var(--rv-ease);
}

.js .site-odles .menu-overlay.open .mp-big {
  transition-delay: 0.44s;
}

.js .site-odles .menu-overlay.open .mp-small {
  transition-delay: 0.56s;
}

/* 4. Menuepunkte oeffnen sich als Maske, genau wie die Texte im Seiteninhalt. */
.js .site-odles .menu-overlay .menu-item {
  animation: none;
  opacity: 1;
  translate: 0 60px;
  clip-path: var(--rv-mask-closed);
}

.js .site-odles .menu-overlay.open .menu-item {
  animation: none;
  translate: 0 0;
  clip-path: var(--rv-mask-open);
  transition:
    translate 0.8s var(--rv-ease),
    clip-path 0.8s var(--rv-ease);
}

.js .site-odles .menu-overlay.open .menu-item:nth-child(1) { transition-delay: 0.46s; }
.js .site-odles .menu-overlay.open .menu-item:nth-child(2) { transition-delay: 0.54s; }
.js .site-odles .menu-overlay.open .menu-item:nth-child(3) { transition-delay: 0.62s; }
.js .site-odles .menu-overlay.open .menu-item:nth-child(4) { transition-delay: 0.70s; }
.js .site-odles .menu-overlay.open .menu-item:nth-child(5) { transition-delay: 0.78s; }
.js .site-odles .menu-overlay.open .menu-item:nth-child(6) { transition-delay: 0.86s; }
.js .site-odles .menu-overlay.open .menu-item:nth-child(7) { transition-delay: 0.94s; }

/* Umlaut-Punkte (z. B. Ö in Oeffnungszeiten) ragen ueber die Zeilenbox hinaus —
   die Menue-Maske bekommt oben mehr Luft, damit nichts abgeschnitten wird. */
.js .site-odles .menu-overlay .menu-item {
  clip-path: polygon(-6% -24%, -6% -24%, 106% -24%, 106% -24%);
}

.js .site-odles .menu-overlay.open .menu-item {
  clip-path: polygon(-6% -24%, -6% 108%, 106% 108%, 106% -24%);
}

/* 5. Sprachwahl zuletzt. */
.js .site-odles .menu-overlay .menu-langs {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js .site-odles .menu-overlay.open .menu-langs {
  opacity: 1;
  transition-delay: 0.94s;
}

/* Schliessen: Inhalt geht schnell weg, der Hintergrund wischt danach zurueck. */
.js .site-odles .menu-overlay.closing .menu-item,
.js .site-odles .menu-overlay.closing .menu-pics img,
.js .site-odles .menu-overlay.closing .menu-langs,
.js .site-odles .menu-overlay.closing .menu-mountain {
  animation: none;
  opacity: 0;
  transition:
    opacity 0.22s ease,
    translate 0.22s ease;
  transition-delay: 0s;
}

/* Burger dreht sich beim Oeffnen mit ins Kreuz. */
.js .site-odles .hd-menu svg {
  transition: transform 0.6s var(--rv-ease);
}

.js body.site-odles.menu-open .hd-menu svg {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .js .site-odles .menu-overlay .menu-item,
  .js .site-odles .menu-overlay.open .menu-item,
  .js .site-odles .menu-overlay .menu-pics img,
  .js .site-odles .menu-overlay.open .menu-pics img {
    translate: none;
    clip-path: none;
    opacity: 1;
    transition: none;
    animation: none;
  }

  .js .site-odles .hero-bg img,
  .js .site-odles.hero-ready .hero-bg img,
  .js .site-odles .moments-scroll .m-item,
  .js .site-odles .moments-scroll.revealed .m-item,
  .site-odles .food-card:hover .food-card-img img,
  .site-odles .m-item:hover img {
    transform: none;
    translate: none;
    opacity: 1;
    transition: none;
  }

  .js .site-odles .menu-overlay::before,
  .js .site-odles .menu-overlay.open::before {
    clip-path: none;
    transition: none;
  }

  .js .site-odles .menu-overlay.closing::before {
    opacity: 0;
    clip-path: none;
  }

  .js .site-odles .menu-overlay .menu-langs,
  .js .site-odles .menu-overlay.open .menu-langs {
    opacity: 1;
    transition: none;
  }

  .js body.site-odles.menu-open .hd-menu svg {
    transform: none;
  }
}

/* ---------- Touch-Geraete: keine haengenbleibenden Hover-Zustaende ----------
   Auf Touch loest ein Tap den Hover mit aus und der Zustand bleibt stehen,
   bis woanders hingetippt wird. Darum werden alle dekorativen Hover-Effekte
   dort auf ihren Ruhezustand zurueckgesetzt. Buttons bekommen ihr Feedback
   ueber :active (siehe oben). */

@media (hover: none) {
  .site-odles .food-card:hover .food-card-img img,
  .site-odles .m-item:hover img {
    transform: none;
  }

  .site-odles .hd-menu:hover,
  .hd-menu:hover {
    opacity: 1;
  }

  .site-odles .hd-menu:hover svg line:nth-child(1),
  .site-odles .hd-menu:hover svg line:nth-child(3) {
    transform: none;
  }

  .site-odles .food-control:hover .food-control-icon {
    filter: var(--filter-cream);
  }

  .site-odles .hd-langs a:hover,
  .site-odles .hd-weather:hover,
  .site-odles .hd-webcam:hover,
  .site-odles .hero-webcam:hover,
  .site-odles .hero-weather-mobile:hover {
    opacity: 1;
  }

  .site-odles .ft-brand-partner:hover {
    opacity: 0.82;
    transform: none;
  }

  .menu-langs a:hover:not(.active) {
    color: rgba(239, 235, 231, 0.5);
  }

  .ft-col a:hover {
    color: rgba(239, 235, 231, 0.58);
  }

  .ft-bottom a:hover {
    color: rgba(239, 235, 231, 0.5);
  }
}

/* ---------- Menuepunkte ohne Ziel ----------
   Die Unterseiten existieren noch nicht, darum sind die Hauptpunkte reiner
   Text. Punkte mit Untermenue bleiben Buttons, damit sie mobil aufklappen. */

.site-odles .menu-nav .menu-item {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
}

.site-odles .menu-nav span.menu-item {
  cursor: default;
}

.site-odles .menu-nav button.menu-item {
  cursor: pointer;
}

@media (min-width: 701px) {
  .site-odles .menu-nav button.menu-item {
    cursor: default;
  }
}

/* Buttons ohne Ziel: gleiche Optik und derselbe Hover wie echte Buttons.
   Nur der Zeiger bleibt der Pfeil, weil dahinter noch keine Seite liegt. */

/* ---------- Fokusrahmen nur bei Tastaturbedienung ----------
   Ohne diese Regel zeichnet Chrome nach einem Mausklick einen Rahmen, sobald
   das Skript den Fokus selbst setzt. Mit Tab bleibt der Rahmen sichtbar. */
html[data-input="pointer"] :focus,
html[data-input="pointer"] :focus-visible {
  outline: none;
  box-shadow: none;
}

/* ---------- Mobiles Menue: Zugehoerigkeit sichtbar machen ----------
   Solange ein Untermenue offen ist, treten die uebrigen Punkte zurueck.
   Dadurch ist auf einen Blick klar, welche Unterpunkte zu welchem
   Hauptpunkt gehoeren. Gilt wie das Listen-Menue bis 1200px. */

@media (max-width: 1200px) {
  .site-odles .menu-nav:has(.is-active) .menu-item:not(.is-active) .menu-item-title {
    opacity: 0.3;
  }

  /* Auch Punkte ohne Untermenue werden beim Antippen hell. */
  .site-odles .menu-item.is-active .menu-item-title {
    opacity: 1;
  }

  .site-odles .menu-item-title {
    transition: opacity 0.32s ease;
  }

  /* Als Block mit zentriertem Text: jeder Unterpunkt steht mittig unter
     seinem Hauptpunkt. Linksbuendig wirkten kuerzere Unterpunkte wie
     verrutscht (links eingerueckt, rechts scheinbar abgeschnitten). */
  .site-odles .menu-item-sub {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    font-weight: 300;
  }

  .site-odles .menu-item-sub > span {
    display: block;
    padding-left: 22px;
  }

  .site-odles .menu-item-sub > span + span {
    margin-top: calc(0.45em + 2px);
  }

  .site-odles .menu-item-sub > span::before,
  .site-odles .menu-item-sub > span + span::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 12px;
    height: 1px;
    background: rgba(239, 235, 231, 0.55);
    content: "";
  }

  .site-odles .menu-item.submenu-open .menu-item-sub {
    padding-top: 2px;
  }
}

/* ---------- Mobiler Header und mobile Schriftgroessen ---------- */

/* Das Telefon-Icon ersetzt auf dem Handy den Text im Kontakt-Button.
   Am Desktop bleibt der Schriftzug. */
.hd-cta-icon {
  display: none;
}

@media (max-width: 700px) {
  .site-odles {
    /* Fliesstexte 1 px groesser, Buttonschrift 2 px groesser. */
    --fs-body: clamp(1.11rem, 1.03rem + 0.28vw, 1.41rem);
    --fs-btn: clamp(0.825rem, 0.62vw, 1rem);
  }

  /* Der Kontakt-Button traegt statt Text nur das Telefon-Symbol und
     laeuft als halbe Pille bis an den rechten Bildschirmrand. Das negative
     Aussenmass hebt den Innenabstand des Headers auf. */
  .site-odles .hd-cta,
  .site-odles.at-top .hd-cta {
    width: auto;
    min-width: 62px;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--pad-x) 0 14px;
    margin-right: calc(var(--pad-x) * -1);
    gap: 0;
    background: var(--color-sand);
    border-color: transparent;
    border-radius: 999px 0 0 999px;
  }

  .site-odles .hd-cta .btn-label {
    display: none;
  }

  .site-odles .hd-cta .hd-cta-icon {
    display: block;
    width: 24px;
    height: 24px;
    filter: var(--filter-dark);
  }

  .site-odles .hd-cta::before {
    content: none;
  }

  /* Buttons bleiben trotz groesserer Schrift kompakt. */
  .site-odles .btn {
    padding: 1.15em 1.9em;
    gap: 0.7em;
  }
}

/* ---------- Kopfband mobil einheitlich auf 65 vh ----------
   Gilt fuer die Startseite und fuer alle Unterseiten (Impressum,
   Datenschutz, Cookies, Barrierefreiheit, Wetter & Webcam). */

@media (max-width: 700px) {
  .site-odles .hero {
    min-height: 65vh;
    min-height: 65svh;
  }

  .site-odles .subhero {
    min-height: 78vh;
    min-height: 78svh;
    height: 78vh;
    height: 78svh;
  }

  /* Legal-Seiten mobil: statt der reinen dunklen Flaeche ein Hintergrundfoto
     im Kopfbereich (wie der Hero der uebrigen Seiten). Der dunkle Verlauf
     oben haelt den hellen Header (Logo/Menue/Telefon) lesbar. .subhero wird
     von script.js an Stelle der .page-hero-legal eingesetzt -> hier stylen. */
  .site-odles.page-sub .subhero {
    background-color: var(--color-dark);
    background-image:
      linear-gradient(
        180deg,
        rgba(52, 48, 46, 0.62) 0%,
        rgba(52, 48, 46, 0.34) 42%,
        rgba(52, 48, 46, 0.5) 100%
      ),
      url("gallery/mobile/baita-odles-vor-den-groedner-dolomiten-1300.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* ---------- Schon gesehene Abschnitte ohne Wiederholung ----------
   Kehrt der Gast von einer Unterseite auf die Startseite zurueck, stehen
   bereits aufgedeckte Abschnitte sofort da, statt erneut einzublenden. */

.js .rv-instant,
.js .rv-instant .rv-item,
.js .rv-instant img {
  transition: none !important;
  animation: none !important;
}

/* ---------- Inhaltsseiten: modulare Bild- und Textabschnitte ---------- */

.food-page .welcome-icon {
  width: clamp(360px, 39vw, 568px);
}

.product-intro h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
}

.product-intro p{
  margin: 30px auto 40px;
  line-height: 1.8;
}

.product-section {
  position: relative;
  padding: clamp(96px, 12vw, 170px) var(--pad-x);
  overflow: hidden;
  background: var(--color-sand);
}

.product-intro{
  max-width: 720px;
  margin: 0 auto clamp(58px, 7vw, 96px);
  text-align: center;
}

.product-intro p{
  max-width: 580px;
  color: var(--color-muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 52px);
  max-width: 1380px;
  margin: 0 auto;
}

.product-card {
  min-width: 0;
}

.product-card:nth-child(2) {
  margin-top: clamp(38px, 6vw, 90px);
}

.product-card-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-dark);
}

.product-card-media img,
.split-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, center);
}

.product-card h3 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.7vw, 3rem);
  font-weight: 500;
}

.product-card p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.split-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* min-height statt height: Sektionen mit Titel + Text + Button duerfen
     mitwachsen, sonst laeuft die zentrierte Textspalte unten aus der Sektion. */
  min-height: clamp(520px, 70vh, 720px);
  background: var(--color-sand);
}

.split-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(70px, 9vw, 150px);
}

.split-feature-media {
  height: 100%;
  overflow: hidden;
}

.split-feature.is-reversed .split-feature-copy {
  grid-column: 2;
  grid-row: 1;
}

.split-feature.is-reversed .split-feature-media {
  grid-column: 1;
  grid-row: 1;
}.split-feature h2 {
  margin: 0;
  max-width: 570px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.06;
}

.split-feature p {
  max-width: 540px;
  margin: 28px 0 0;
  color: var(--color-muted);
  line-height: 1.8;
}

.split-feature .btn {
  align-self: flex-start;
  margin-top: 38px;
}

.route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px;
  color: var(--color-brown);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Die Spaltenzahl richtet sich nach den vorhandenen Eintraegen - so bleibt die
   Zeile bei zwei Angaben genauso ausgewogen wie bei dreien. */
.opening-hours-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 56px 0 44px;
  border-block: 1px solid rgba(52, 48, 46, 0.18);
}

.opening-hours-grid div {
  padding: 28px 20px;
  line-height: 1.35;
}

.opening-hours-grid div + div {
  border-left: 1px solid rgba(52, 48, 46, 0.18);
}

/* Saison-Label und Zeitraum stehen einzeilig nebeneinander (durch | getrennt) */
.opening-hours-grid span {
  color: var(--color-brown);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.opening-hours-grid strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 500;
  white-space: nowrap;
}

.opening-hours-grid .oh-when {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-brown);
}

.opening-hours-grid .oh-when::before {
  content: "|";
  margin: 0 0.5em;
  font-weight: 400;
  color: rgba(52, 48, 46, 0.4);
}

/* Startseite (#besuch): Container ist nur 850px breit – den Öffnungszeiten-Block
   auf Kontaktseiten-Breite ausbrechen lassen, damit die Uhrzeit einzeilig bleibt. */
#besuch .opening-hours-grid {
  position: relative;
  left: 50%;
  width: min(1175px, 94vw);
  transform: translateX(-50%);
}

.opening-hours-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

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

  .product-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    margin-inline: auto;
  }

  .split-feature-copy {
    padding: clamp(56px, 7vw, 86px);
  }
}

@media (max-width: 700px) {
  .food-page .welcome-icon {
    width: clamp(300px, 92vw, 430px);
  }

  .product-grid,
  .opening-hours-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .product-card:nth-child(2) {
    margin-top: 0;
  }

  .product-card:last-child {
    grid-column: auto;
    width: auto;
  }

  .split-feature {
    display: flex;
    height: auto;
    flex-direction: column;
  }

  .split-feature.is-reversed .split-feature-copy,
  .split-feature.is-reversed .split-feature-media {
    order: initial;
  }

  /* Mobil: Bildhaelfte ueberall gleich hoch (festes Seitenverhaeltnis),
     Texthaelfte genau so hoch wie ihr Inhalt - kein erzwungener Leerraum. */
  .split-feature-copy {
    min-height: 0;
    padding: var(--split-pad-y) var(--pad-x);
  }

  .split-feature-media {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--split-media-ratio);
  }

  .opening-hours-grid div + div {
    border-top: 1px solid rgba(52, 48, 46, 0.18);
    border-left: 0;
  }
}

/* ---------- Unterseiten: Farbfolge und verdichtete Inhaltsmodule ---------- */

/* Das Logo-SVG trägt den exakten Website-Cremeton bereits selbst.
   Damit entsteht keine abweichende Filter-Beigefärbung mehr. */
.site-odles .hd-logo,
.site-odles .hd-logo-image,
.site-odles .ft-brand > img {
  filter: none;
}

.kitchen-welcome {
  padding-bottom: clamp(88px, 10vw, 132px);
}

.food-page .kitchen-welcome::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 1) 0%,
      rgba(213, 204, 197, 0.96) 48%,
      rgba(213, 204, 197, 0.9) 100%
    ),
    url("gallery/desktop/aperitif-in-der-holzstube.webp");
}

.kitchen-welcome .welcome-inner {
  margin-bottom: clamp(62px, 8vw, 108px);
}

.welcome-kitchen-carousel {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 10px 0 16px var(--pad-x);
}

.welcome-kitchen-carousel .moments-track.is-ready {
  animation-name: momentsLoop;
}

.split-feature.tone-sand,
.closing-story,
.location-page .route-feature {
  background: var(--color-sand);
}

.split-feature.tone-dark {
  color: var(--color-cream);
  background: var(--color-dark);
}

.split-feature.tone-dark h2 {
  color: var(--color-cream);
}

.split-feature.tone-dark p {
  color: var(--color-cream-soft);
}
.split-feature.tone-dark .route-meta {
  color: var(--color-gold);
}

.split-feature.tone-dark .btn {
  --btn-bg: transparent;
  --btn-color: var(--color-cream);
  --btn-border: var(--color-cream-soft);
  --btn-fill: var(--color-cream);
  --btn-hover-color: var(--color-dark);
  --btn-hover-border: var(--color-cream);
}

/* Das Hintergrundfoto liegt ueber der GANZEN Sektion, nicht nur in der
   Texthaelfte. Nur so entsteht derselbe grosszuegige Bildausschnitt wie beim
   Abschnitt "Hof" auf der Startseite - eine halbbreite Flaeche wuerde per
   "cover" so eng beschneiden, dass oft nur eine strukturlose Flaeche bleibt.
   Auf der Bildhaelfte deckt das Foto der Bildhaelfte die Ebene ohnehin ab. */
.split-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.split-feature::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-position: center;
  background-size: cover;
  opacity: var(--copy-veil);
  pointer-events: none;
}

/* Die Motive stehen bewusst hier und nicht als Inline-Variable im HTML:
   Chrome loest relative URLs in Custom Properties gegen das STYLESHEET auf,
   nicht gegen das Dokument. Ein "../gallery/..." aus /de/ landete darum beim
   direkten Oeffnen per file:// ausserhalb des Projektordners. */
.split-feature[data-bg="tisch-marende"]::before,
.family-closing[data-bg="tisch-marende"]::before {
  background-image: url("gallery/desktop/gedeckter-tisch-mit-suedtiroler-marende.webp");
}

.split-feature[data-bg="dessert-387"]::before,
.family-closing[data-bg="dessert-387"]::before {
  background-image: url("gallery/desktop/hausgemachtes-dessert-auf-der-alm.webp");
}

.split-feature[data-bg="hay-136"]::before,
.family-closing[data-bg="hay-136"]::before {
  background-image: url("gallery/desktop/heuarbeit-auf-der-almwiese.webp");
}

.split-feature[data-bg="hens-sign-472"]::before,
.family-closing[data-bg="hens-sign-472"]::before {
  background-image: url("gallery/desktop/huehnerstall-der-baita-odles.webp");
}

.split-feature[data-bg="calf-036"]::before,
.family-closing[data-bg="calf-036"]::before {
  background-image: url("gallery/desktop/kalb-auf-der-almweide-baita-odles.webp");
}

.split-feature[data-bg="lage-354"]::before,
.family-closing[data-bg="lage-354"]::before {
  background-image: url("gallery/desktop/heuernte-vor-den-dolomiten.webp");
}

.split-feature[data-bg="lage-2"]::before,
.family-closing[data-bg="lage-2"]::before {
  background-image: url("gallery/desktop/almweg-zur-baita-odles.webp");
}

.split-feature[data-bg="meadow-play-301"]::before,
.family-closing[data-bg="meadow-play-301"]::before {
  background-image: url("gallery/desktop/familienzeit-auf-der-almwiese.webp");
}

.split-feature[data-bg="gal-8"]::before,
.family-closing[data-bg="gal-8"]::before {
  background-image: url("gallery/desktop/holzstube-der-baita-odles.webp");
}

/* Eigenes, thematisch passendes Hintergrundmotiv fuer die Ziegen-Sektion.
   Es ist bewusst nicht eines der Bilder im danebenliegenden Slider. */
.split-feature[data-bg="goat-family"]::before,
.family-closing[data-bg="goat-family"]::before {
  background-image: url("gallery/desktop/familie-ziegen-almweide.webp");
}

/* Eigenes Hintergrundmotiv fuer den Weg vom Fermeda Sessellift – ebenfalls
   getrennt vom sichtbaren Hauptfoto der Bildhaelfte. */
.split-feature[data-bg="fermeda-meadow"]::before,
.family-closing[data-bg="fermeda-meadow"]::before {
  background-image: url("gallery/desktop/baita-odles-in-der-blumenwiese.webp");
}

/* Weg vom Parkplatz Cristauta: der Aufstieg fuehrt durch den Laerchenwald,
   darum ein Waldmotiv statt einer offenen Almwiese. */
.split-feature[data-bg="laerchenwald"]::before,
.family-closing[data-bg="laerchenwald"]::before {
  background-image: url("gallery/desktop/kuh-auf-almweide-unter-laerchen.webp");
}

.split-feature-copy,
.split-feature-media {
  position: relative;
  z-index: 1;
}

.farm-page .hero-mountain path {
  fill: var(--color-dark);
}

/* Gleiches Prinzip auf anreise.html: dort folgt direkt unter dem Hero der
   dunkle Anreise-Abschnitt, also nimmt die Bergsilhouette dessen Braunton an
   und der Uebergang bleibt eine durchgehende Flaeche. */
.hero-mountain-dark path {
  fill: var(--color-dark);
}

.farm-page .farm-welcome {
  color: var(--color-cream);
  background: var(--color-dark);
}

.farm-page .farm-welcome::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(52, 48, 46, 1) 0%,
      rgba(52, 48, 46, 0.96) 48%,
      rgba(52, 48, 46, 0.88) 100%
    ),
    url("gallery/desktop/familie-bei-der-heuarbeit.webp");
  background-position: center;
  background-size: cover;
}

.farm-page .farm-welcome h1,
.farm-page .farm-welcome h2 {
  color: var(--color-cream);
}

.farm-page .farm-welcome h2.welcome-lead {
  color: var(--color-cream-soft);
}

.farm-page .farm-welcome p {
  color: var(--color-cream-soft);
}

.farm-page .farm-welcome .welcome-icon {
  filter: var(--filter-cream);
  transform: none;
}

.farm-page .farm-welcome .btn {
  --btn-bg: transparent;
  --btn-color: var(--color-cream);
  --btn-border: var(--color-cream-soft);
  --btn-fill: var(--color-cream);
  --btn-hover-color: var(--color-dark);
  --btn-hover-border: var(--color-cream);
}

.closing-story {
  padding: clamp(110px, 14vw, 190px) var(--pad-x);
  text-align: center;
}

.closing-story > div {
  max-width: 720px;
  margin: 0 auto;
}

.closing-story h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
}

.closing-story p {
  max-width: 600px;
  margin: 30px auto 40px;
  color: var(--color-muted);
  line-height: 1.8;
}

.closing-story-farm {
  color: var(--color-dark);
  background-image:
    linear-gradient(rgba(213, 204, 197, 0.95), rgba(213, 204, 197, 0.95)),
    url("gallery/desktop/hofschwein-der-baita-odles.webp");
  background-position: center 56%;
  background-size: cover;
}.events-page .welcome::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 1) 0%,
      rgba(213, 204, 197, 0.96) 48%,
      rgba(213, 204, 197, 0.9) 100%
    ),
    url("gallery/desktop/kinder-auf-schaukel-baita-odles.webp");
}

.family-closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  min-height: 62vh;
  min-height: 62svh;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-sand);
}

.family-closing-media {
  min-height: 62vh;
  min-height: 62svh;
  overflow: hidden;
}

.family-closing-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-closing-copy {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: clamp(68px, 8vw, 126px);
  color: var(--color-dark);
}

.family-closing::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-position: center;
  background-size: cover;
  opacity: var(--copy-veil);
  pointer-events: none;
}

.family-closing-copy,
.family-closing-media {
  position: relative;
  z-index: 1;
}

.family-closing-copy h2 {
  max-width: 610px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
}

.family-closing-copy p {
  max-width: 560px;
  margin: 28px 0 38px;
  color: var(--color-muted);
  line-height: 1.8;
}

.family-closing-copy .btn {
  align-self: flex-start;
}

.contact-page .contact-welcome {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(56px, 5vw, 76px);
  padding-bottom: clamp(70px, 6vw, 92px);
}

.contact-page .contact-welcome::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 1) 0%,
      rgba(213, 204, 197, 0.995) 50%,
      rgba(213, 204, 197, 0.98) 100%
    ),
    url("gallery/desktop/sonnenliegen-mit-dolomitenblick.webp");
}

.contact-page .contact-welcome .welcome-inner {
  width: min(1175px, 100%);
  max-width: 1175px;
}

.contact-page .contact-welcome .welcome-inner > p {
  max-width: 762.5px;
}

@media (max-width: 700px) {
  .contact-page .contact-welcome {
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .family-closing {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  /* Muss hinter den Grundregeln stehen, sonst gewinnen diese. */
  .family-closing-copy {
    min-height: 0;
    padding: var(--split-pad-y) var(--pad-x);
  }

  .family-closing-media {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--split-media-ratio);
  }
}

/* ---------- Finale Verdichtung und klare Interaktionszustände ---------- */

@media (min-width: 701px) {
  .food-page .food-story .split-feature-copy {
    padding: clamp(58px, 6.5vw, 104px);
  }

  /* Alle vier Food-Sektionen gleich hoch: Die Zeilenhoehe kommt sonst aus der
     natuerlichen Bildhoehe, und ein Querformat-Foto (Getraenke & Aperitif)
     macht seine Sektion nur halb so hoch wie die drei Hochformat-Nachbarn. */
  .food-page .food-story .split-feature-media {
    height: auto;
    aspect-ratio: 2 / 3;
  }
}

.site-odles .menu-item-sub > a {
  color: rgba(239, 235, 231, 0.56);
  opacity: 1;
  transition: color 0.24s ease, transform 0.24s ease;
}

/* Wie bei den Hauptpunkten: gedaempft -> hell. Gold waere auf dem dunklen
   Grund dunkler als der Ausgangszustand und damit kein sichtbarer Hover. */
.site-odles .menu-item-sub > a:hover,
.site-odles .menu-item-sub > a:focus-visible {
  color: var(--color-cream);
  transform: translateX(4px);
}

/* ---------- Wetter & Webcam ----------
   Fruehere zweite Stylesheet-Datei. Enthaelt nur noch die Regeln, die die
   Seite wirklich verwendet: Webcam-Rahmen mit Einwilligung und den kompakten
   Wetterblock um das offizielle Widget des Landeswetterdienstes. */

.weather-page main {
  overflow: hidden;
  background: var(--color-sand);
}

.weather-wrap {
  width: min(1320px, calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
}

.webcam-section {
  position: relative;
  padding: clamp(84px, 10vw, 140px) 0 clamp(88px, 10vw, 148px);
  color: var(--color-dark);
  background: var(--color-sand);
  scroll-margin-top: 74px;
}

.weather-section-head {
  /* Seit dem Entfernen des Beschreibungsabsatzes einspaltig: Titel und
     Untertitel nehmen die ganze Breite des Bereichs ein. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: clamp(34px, 4.5vw, 60px);
}

.weather-section-head h1,
.weather-section-head h2 {
  grid-column: 1;
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.93;
}

.weather-section-head > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 560px;
  margin: 0;
  padding-bottom: 8px;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.3;
}

.webcam-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.4;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(52, 48, 46, 0.36), rgba(52, 48, 46, 0.76)),
    url("gallery/desktop/groedner-tal-vom-col-raiser.webp") center 55% / cover no-repeat;
  border: 1px solid rgba(52, 48, 46, 0.18);
}

.webcam-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
}

.webcam-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 6vw, 80px);
  text-align: center;
}

.webcam-consent[hidden] {
  display: none;
}

.webcam-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  place-items: center;
  background: var(--color-cream);
  border-radius: 50%;
}

.webcam-icon img {
  width: 34px;
  height: 34px;
  opacity: 0.76;
  filter: brightness(0) saturate(100%);
}

/* Steht auf dem abgedunkelten Foto, braucht darum die helle Schriftfarbe. */
.webcam-consent h3 {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.3vw, 4rem);
  font-weight: 400;
}

.webcam-consent p {
  max-width: 590px;
  margin: 14px 0 0;
  color: var(--color-cream-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

.weather-button {
  min-height: 48px;
  margin-top: 27px;
  padding: 13px 24px;
  color: var(--color-dark);
  background: var(--color-cream);
  border: 1px solid var(--color-cream);
  border-radius: 999px;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.weather-button:hover {
  color: var(--color-cream);
  background: transparent;
}

/* Zweitrangig unter dem Ladebutton: dauerhafte Freigabe ueber die Einstellungen. */
.webcam-consent-link {
  display: block;
  margin-top: 14px;
  padding: 8px 0;
  color: var(--color-cream-soft);
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.24em;
  cursor: pointer;
  transition: color 0.25s ease;
}

.webcam-consent-link:hover {
  color: var(--color-cream);
}

.weather-button:focus-visible,
.webcam-consent-link:focus-visible,
.webcam-external:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

.webcam-external {
  display: inline-flex;
  gap: 8px;
  margin-top: 22px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-underline-offset: 5px;
}

/* Kompakter Wetterblock: Die Hoehe folgt dem tatsaechlichen Inhalt. */
/* Kompakte, mittige Tageskarten ohne eigene Flaeche - nur Symbol und Werte.
   Das Widget kennt genau fuenf Variablen; alles andere waere wirkungslos.
   Es stapelt die Karten, solange der Container schmaler als
   --weather-switcher-breakpoint ist - der Wert muss also unter der
   Containerbreite liegen, sonst stehen die Tage untereinander. */
.official-weather-widget {
  --weather-gap: clamp(8px, 0.8vw, 14px);
  --weather-card-min-width: 100%;
  /* liegt bewusst ueber jeder Spaltenbreite: so stapelt das Widget die Tage */
  --weather-switcher-breakpoint: 9999px;
  --weather-text-primary: #34302e;
  --weather-text-secondary: #6f625c;
  /* Ohne diese vier faellt das Widget auf seine weisse Standardkarte zurueck. */
  --weather-bg: transparent;
  --weather-shadow: none;
  --weather-border-radius: 0;
  --weather-padding: 0px;
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.official-weather-fallback {
  margin: 18px 0 0;
  color: var(--color-muted);
}

.official-weather-fallback a {
  color: inherit;
  text-underline-offset: 4px;
}

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

  .weather-section-head h1,
  .weather-section-head h2,
  .weather-section-head > p:last-child {
    grid-column: 1;
    grid-row: auto;
    padding-bottom: 0;
  }
}

@media (max-width: 700px) {
  .webcam-section {
    padding-block: 72px 80px;
  }

  .weather-section-head {
    margin-bottom: 30px;
  }

  .weather-section-head h1,
  .weather-section-head h2 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .webcam-frame {
    aspect-ratio: 4 / 5;
  }

  .webcam-consent {
    padding: 25px;
  }

  .webcam-consent p {
    line-height: 1.5;
  }

      /* Auf dem Handy stehen die Tage untereinander - das ist hier richtig. */
  .official-weather-widget {
    --weather-card-min-width: 145px;
    --weather-gap: 10px;
    --weather-switcher-breakpoint: 900px;
  }
}

/* ---------- Webcam mit Wetterspalte ----------
   Aufteilung 75 % Webcam / 5 % Abstand / 20 % Wetter. Die Wetterspalte ist
   genauso hoch wie das Livebild; die drei Tage verteilen sich darin
   gleichmaessig untereinander. */

.webcam-layout {
  display: grid;
  grid-template-columns: 75% 20%;
  grid-template-rows: auto 1fr auto;
  column-gap: 5%;
}

/* Das Livebild spannt ueber Beschriftungs- und Wetterzeile und ist damit
   immer exakt so hoch wie die Wetterspalte - unabhaengig davon, wie viel
   Platz die drei Tage brauchen. */
.webcam-frame {
  grid-column: 1;
  grid-row: 1 / 3;
}

.forecast-col-title {
  grid-column: 2;
  grid-row: 1;
}

.forecast-col {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  scroll-margin-top: 74px;
}

.webcam-external {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
}

@media (min-width: 901px) {
  /* Die Rasterzeile gibt die Hoehe vor - das Seitenverhaeltnis tritt zurueck. */
  .webcam-frame {
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  /* Zu schmal fuer zwei Spalten: das Wetter rueckt unter das Livebild.
     Die drei Tage bleiben untereinander wie auf dem Desktop. */
  .webcam-layout {
    display: block;
  }

  .forecast-col {
    margin-top: clamp(34px, 5vw, 52px);
  }

  .forecast-col .official-weather-widget {
    flex: none;
  }

  .forecast-col-title {
    margin-bottom: 10px;
  }
}

.forecast-col-title {
  margin: 0 0 14px;
  color: var(--color-brown);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---------- Dekorative SVGs auf den Unterseiten ----------
   Gleiche Handschrift wie auf der Startseite: grosse, sehr helle Strichzeichnung
   am Rand, immer hinter dem Inhalt. Pro Seite kommt jedes Motiv nur einmal vor. */

.product-section,
.closing-story,
.webcam-section {
  position: relative;
  overflow: hidden;
}

.closing-story > div,
.weather-wrap {
  position: relative;
  z-index: 1;
}

/* Essen & Trinken: Kaesebrett sitzt unten im Abschnitt und wird von der
   Abschnittskante angeschnitten. */
.food-page .product-deco {
  right: clamp(-90px, -5vw, -40px);
  bottom: clamp(-190px, -14vw, -90px);
  z-index: 0;
  width: clamp(320px, 34vw, 620px);
  height: auto;
  opacity: 0.1;
  transform: rotate(-6deg);
}

/* Wie urspruenglich (top 29px / left -61px), nur 300 px tiefer. */
.food-page .welcome-icon {
  top: 329px;
  left: -61px;
}

/* Hof & Tiere: Teller mit Bergmotiv beim Abschluss "Vom Hof auf den Teller" */
.farm-page .closing-deco {
  top: 50%;
  right: clamp(-70px, -4vw, -20px);
  z-index: 0;
  width: clamp(280px, 28vw, 500px);
  height: auto;
  opacity: 0.1;
  transform: translateY(-50%) rotate(7deg);
}

/* Familien: Almbaeume hinter "Spielen und entdecken" */
.events-page .family-closing-deco {
  right: clamp(-70px, -4vw, -20px);
  bottom: clamp(-50px, -3vw, -10px);
  z-index: 0;
  width: clamp(300px, 30vw, 540px);
  height: auto;
  opacity: 0.12;
}

/* Kontakt: zweites Motiv gegenueber dem Kaffee */
.contact-page .contact-deco {
  right: clamp(-70px, -4vw, -20px);
  bottom: clamp(-40px, -2vw, 0px);
  z-index: 0;
  width: clamp(220px, 22vw, 400px);
  height: auto;
  opacity: 0.1;
  transform: rotate(8deg);
}

/* Wetter & Webcam */
.weather-page .forecast-deco {
  bottom: clamp(-50px, -3vw, 0px);
  left: clamp(-80px, -4vw, -30px);
  z-index: 0;
  width: clamp(280px, 28vw, 500px);
  height: auto;
  opacity: 0.1;
  transform: rotate(-5deg);
}

@media (max-width: 700px) {
  .food-page .product-deco,
  .farm-page .closing-deco,
  .events-page .family-closing-deco,
  .contact-page .contact-deco,
  .weather-page .forecast-deco {
    width: clamp(200px, 62vw, 300px);
  }
}

/* ---------- Gallerie: Fotogrid und Lightbox ---------- */

.gallery-page .gallery-welcome {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(56px, 5vw, 76px);
  padding-bottom: clamp(70px, 6vw, 92px);
}

.gallery-page .gallery-welcome::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(213, 204, 197, 1) 0%,
      rgba(213, 204, 197, 0.995) 50%,
      rgba(213, 204, 197, 0.98) 100%
    ),
    url("gallery/desktop/panorama-groedner-dolomiten.webp");
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  max-width: 1200px;
  margin-top: clamp(28px, 3vw, 44px);
}

.gallery-grid-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.gallery-grid-item picture,
.gallery-grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-grid-item:hover img,
.gallery-grid-item:focus-visible img {
  transform: scale(1.04);
}

.gallery-grid-item:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: -2px;
}

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gallery-page .gallery-welcome {
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 80px;
  }
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 27, 25, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.gallery-lightbox-close {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(239, 235, 231, 0.8);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible {
  color: #fff;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: clamp(44px, 5vw, 64px);
  height: clamp(44px, 5vw, 64px);
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.gallery-lightbox-prev {
  left: clamp(10px, 2vw, 28px);
}

.gallery-lightbox-next {
  right: clamp(10px, 2vw, 28px);
}

.gallery-lightbox-prev img,
.gallery-lightbox-next img {
  display: block;
  width: clamp(52px, 5vw, 72px);
  height: auto;
  filter: brightness(0) saturate(100%) invert(93%) sepia(5%) saturate(200%) hue-rotate(340deg) brightness(105%) contrast(90%);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.gallery-lightbox-prev:hover img,
.gallery-lightbox-prev:focus-visible img,
.gallery-lightbox-next:hover img,
.gallery-lightbox-next:focus-visible img {
  opacity: 1;
}

.gallery-lightbox-prev img {
  transform: scaleX(-1);
}

.gallery-lightbox-counter {
  position: absolute;
  bottom: clamp(14px, 2vw, 24px);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(239, 235, 231, 0.6);
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
}

/* ---------- Mobil: gleicher Rhythmus fuer alle Textabschnitte ----------
   Vorher lagen die Werte zwischen 54 und 112 px, was beim Scrollen als
   ungleiche Luft auffiel. Abschnitte, die bewusst ohne unteren Abstand in den
   naechsten uebergehen (farm, loc, events), bleiben unveraendert. */

@media (max-width: 700px) {
  .site-odles .welcome,
  .site-odles .product-section,
  .site-odles .closing-story,
  .site-odles .map,
  .site-odles .faq,
  .site-odles .moments,
  .site-odles .webcam-section,
  .contact-page .contact-welcome {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
  }
}

/* ---------- Mobil: mittige Ausrichtung, engerer Titelabstand ----------
   Gilt fuer alle Inhaltsseiten. Auf schmalen Displays wirkt linksbuendiger
   Text neben zentrierten Abschnitten unruhig, und der Abstand zwischen
   Ueberschrift und Fliesstext war mit 28-30 px zu gross. */

@media (max-width: 700px) {
  .split-feature-copy,
  .family-closing-copy,
  .events-inner,
  .map-body,
  .weather-section-head {
    text-align: center;
  }

  .split-feature h2,
  .split-feature p,
  .family-closing-copy h2,
  .family-closing-copy p,
  .events-inner p,
  .map-body p {
    margin-inline: auto;
  }

  .split-feature p,
  .family-closing-copy p,
  .closing-story p,
  .product-intro p,
  .welcome p,
  .events-inner p,
  .map-body p{
    margin-top: var(--title-gap);
  }

  .family-closing-copy p {
    margin-bottom: 26px;
  }

  .closing-story p,
  .product-intro p {
    margin-bottom: 28px;
  }

  .split-feature .btn,
  .family-closing-copy .btn,
  .events-inner .btn,
  .events-ctas,
  .map-ctas {
    align-self: center;
    justify-content: center;
  }

  /* Kilometer, Dauer und Schwierigkeit mittig wie der restliche Text. */
  .route-meta {
    justify-content: center;
  }

}

/* ---------- Responsive Fotoquellen ----------
   Desktop verwendet die grossen, SEO-benannten Varianten. Unter 701 px
   werden ausschliesslich die 900-px-Mobile-Varianten als Hintergrund geladen.
   Verlaeufe, Opazitaeten und Bildpositionen bleiben unveraendert. */
@media (max-width: 700px) {
  .site-odles .welcome::before {
    background-image:
      linear-gradient(to bottom, rgba(213, 204, 197, 1) 0%, rgba(213, 204, 197, 0.92) 52%, rgba(213, 204, 197, 0.85) 100%),
      url("gallery/mobile/geislergruppe-bei-der-baita-odles.webp");
  }

  .site-odles .farm::before {
    background-image:
      linear-gradient(to bottom, rgba(213, 204, 197, 0.87) 0%, rgba(213, 204, 197, 0.85) 50%, rgba(213, 204, 197, 0.87) 100%),
      url("gallery/mobile/familienzeit-auf-der-almwiese.webp");
  }

  .site-odles .events::before {
    background-image:
      linear-gradient(to bottom, rgba(213, 204, 197, 0.85) 0%, rgba(213, 204, 197, 0.92) 52%, rgba(213, 204, 197, 1) 100%),
      url("gallery/mobile/kuehe-auf-almweide-baita-odles.webp");
  }

  .site-odles .menu-overlay {
    background-image:
      linear-gradient(rgba(52, 48, 46, 0.9), rgba(52, 48, 46, 0.9)),
      url("gallery/mobile/baita-odles-im-abendlicht.webp");
  }

  .site-odles .menu-overlay::before {
    background:
      linear-gradient(rgba(52, 48, 46, 0.95), rgba(52, 48, 46, 0.95)),
      url("gallery/mobile/baita-odles-im-abendlicht.webp") center / cover no-repeat;
  }

  .site-odles .events-body::before {
    background-image:
      linear-gradient(rgba(213, 204, 197, 0.88), rgba(213, 204, 197, 0.88)),
      url("gallery/mobile/familie-bei-der-heuarbeit.webp");
  }

  .food-page .kitchen-welcome::before {
    background-image:
      linear-gradient(to bottom, rgba(213, 204, 197, 1) 0%, rgba(213, 204, 197, 0.96) 48%, rgba(213, 204, 197, 0.9) 100%),
      url("gallery/mobile/aperitif-in-der-holzstube.webp");
  }

  .split-feature[data-bg="tisch-marende"]::before,
  .family-closing[data-bg="tisch-marende"]::before {
    background-image: url("gallery/mobile/gedeckter-tisch-mit-suedtiroler-marende.webp");
  }

  .split-feature[data-bg="dessert-387"]::before,
  .family-closing[data-bg="dessert-387"]::before {
    background-image: url("gallery/mobile/hausgemachtes-dessert-auf-der-alm.webp");
  }

  .split-feature[data-bg="hay-136"]::before,
  .family-closing[data-bg="hay-136"]::before {
    background-image: url("gallery/mobile/heuarbeit-auf-der-almwiese.webp");
  }

  .split-feature[data-bg="hens-sign-472"]::before,
  .family-closing[data-bg="hens-sign-472"]::before {
    background-image: url("gallery/mobile/huehnerstall-der-baita-odles.webp");
  }

  .split-feature[data-bg="calf-036"]::before,
  .family-closing[data-bg="calf-036"]::before {
    background-image: url("gallery/mobile/kalb-auf-der-almweide-baita-odles.webp");
  }

  .split-feature[data-bg="lage-354"]::before,
  .family-closing[data-bg="lage-354"]::before {
    background-image: url("gallery/mobile/heuernte-vor-den-dolomiten.webp");
  }

  .split-feature[data-bg="lage-2"]::before,
  .family-closing[data-bg="lage-2"]::before {
    background-image: url("gallery/mobile/almweg-zur-baita-odles.webp");
  }

  .split-feature[data-bg="meadow-play-301"]::before,
  .family-closing[data-bg="meadow-play-301"]::before {
    background-image: url("gallery/mobile/familienzeit-auf-der-almwiese.webp");
  }

  .split-feature[data-bg="gal-8"]::before,
  .family-closing[data-bg="gal-8"]::before {
    background-image: url("gallery/mobile/holzstube-der-baita-odles.webp");
  }

  .split-feature[data-bg="laerchenwald"]::before,
  .family-closing[data-bg="laerchenwald"]::before {
    background-image: url("gallery/mobile/kuh-auf-almweide-unter-laerchen.webp");
  }

  .split-feature[data-bg="goat-family"]::before,
  .family-closing[data-bg="goat-family"]::before {
    background-image: url("gallery/mobile/familie-ziegen-almweide.webp");
  }

  .split-feature[data-bg="fermeda-meadow"]::before,
  .family-closing[data-bg="fermeda-meadow"]::before {
    background-image: url("gallery/mobile/baita-odles-in-der-blumenwiese.webp");
  }

  .farm-page .farm-welcome::before {
    background-image:
      linear-gradient(to bottom, rgba(52, 48, 46, 1) 0%, rgba(52, 48, 46, 0.96) 48%, rgba(52, 48, 46, 0.88) 100%),
      url("gallery/mobile/familie-bei-der-heuarbeit.webp");
  }

  .closing-story-farm {
    background-image:
      linear-gradient(rgba(213, 204, 197, 0.95), rgba(213, 204, 197, 0.95)),
      url("gallery/mobile/hofschwein-der-baita-odles.webp");
  }

  .events-page .welcome::before {
    background-image:
      linear-gradient(to bottom, rgba(213, 204, 197, 1) 0%, rgba(213, 204, 197, 0.96) 48%, rgba(213, 204, 197, 0.9) 100%),
      url("gallery/mobile/kinder-auf-schaukel-baita-odles.webp");
  }

  .contact-page .contact-welcome::before {
    background-image:
      linear-gradient(to bottom, rgba(213, 204, 197, 1) 0%, rgba(213, 204, 197, 0.995) 50%, rgba(213, 204, 197, 0.98) 100%),
      url("gallery/mobile/sonnenliegen-mit-dolomitenblick.webp");
  }

  .webcam-frame {
    background:
      linear-gradient(rgba(52, 48, 46, 0.36), rgba(52, 48, 46, 0.76)),
      url("gallery/mobile/groedner-tal-vom-col-raiser.webp") center 55% / cover no-repeat;
  }
}

/* ---------- Mobiler Footer: linksbuendig, kompakt, Schrift 2px groesser ---------- */

@media (max-width: 700px) {
  .site-odles .ft {
    padding-top: clamp(64px, 9vw, 84px);
    padding-bottom: 30px;
  }

  .site-odles .ft-grid,
  .site-odles .ft-bottom,
  .site-odles .ft .site-footer-legal {
    text-align: left;
  }

  .site-odles .ft-grid {
    gap: 26px;
  }

  .site-odles .ft-brand img,
  .site-odles .ft-brand p {
    margin-inline: 0;
  }

  .site-odles .ft-brand img {
    margin-bottom: 14px;
  }

  .site-odles .ft-brand p,
  .site-odles .ft-col nav,
  .site-odles .ft-address {
    font-size: calc(var(--fs-small) + 2px);
  }

  .site-odles .ft-col-title {
    margin-bottom: 10px;
    font-size: calc(var(--fs-meta) + 2px);
  }

  .site-odles .ft-col nav {
    align-items: flex-start;
    gap: 4px;
  }

  .site-odles .ft-col a {
    justify-content: flex-start;
    text-align: left;
  }

  .site-odles .ft-address {
    margin-bottom: 8px;
  }

  .site-odles .ft-bottom {
    margin-top: 36px;
    padding-top: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    font-size: calc(var(--fs-legal) + 2px);
  }

  .site-odles .ft-bottom-links {
    justify-content: flex-start;
    gap: 16px;
  }

  .site-odles .ft .site-footer-legal {
    margin-top: 20px;
    font-size: calc(var(--fs-legal) + 2px);
  }
}

/* ---------- Infinite-Carousel-Pfeile (Welcome-Carousel) ---------- */

.site-odles .carousel-controls {
  display: none;
}

@media (min-width: 701px) {
  .site-odles .carousel-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(20px, 2vw, 30px);
    padding: 6px var(--pad-x) 20px 0;
  }

  .site-odles .carousel-control {
    display: inline-grid;
    width: clamp(73px, 6vw, 88px);
    height: 64px;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .site-odles .carousel-control:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 6px;
  }

  .site-odles .carousel-control-icon {
    display: block;
    width: clamp(73px, 6vw, 88px);
    height: auto;
    flex: none;
    filter: var(--filter-dark);
    transition: opacity 0.3s ease, filter 0.3s ease;
  }

  /* Auf dunklen Sektionen (z. B. .moments) brauchen die Pfeile die helle Variante. */
  .site-odles .carousel-controls-light .carousel-control-icon {
    filter: var(--filter-cream);
  }

  .site-odles .carousel-control-prev .carousel-control-icon {
    transform: scaleX(-1);
  }

  .site-odles .carousel-control:hover .carousel-control-icon,
  .site-odles .carousel-control:focus-visible .carousel-control-icon {
    filter: brightness(0) saturate(100%) invert(79%) sepia(21%) saturate(493%) hue-rotate(356deg) brightness(92%) contrast(84%);
  }
}

/* ---------- Photo-Slider mit Punkten (Split-Sektionen) ---------- */

.site-odles .photo-slider {
  position: relative;
  height: 100%;
}

.site-odles .photo-slider-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  /* Das native Snap würde auch rAF-Schritte unmittelbar auf eine Kante ziehen
     und so ruckeln. Nach einem Wisch übernimmt deshalb allein die eigene,
     weich beschleunigte Einrastbewegung im Skript. */
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

.site-odles .photo-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

.site-odles .photo-slide picture,
.site-odles .photo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, center);
}

.site-odles .photo-slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}

.site-odles .photo-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-cream);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.site-odles .photo-slider-dot.is-active {
  background: var(--color-cream);
}

.site-odles .photo-slider-dot:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

/* ---------- Themen-Dekos der Unterseiten ----------
   Jede Unterseite erhaelt eigene, innerhalb der Seite einzigartige
   Linien-Motive: Spuren im Hero, dazu passende Icons in den Sektionen. */

/* Neue Willkommens-Icons liegen vollstaendig im Abschnitt (kein Anschnitt). */
.site-odles .welcome-icon-inset {
  left: clamp(24px, 4vw, 72px);
}

/* Die Huette auf der Startseite liegt gerade (waagrecht), nicht gedreht. */
.site-odles .welcome-icon-straight {
  transform: none;
}

.site-odles .loc-welcome-deco {
  top: auto;
  bottom: clamp(22px, 3vw, 44px);
  right: clamp(24px, 4vw, 72px);
  width: clamp(110px, 10vw, 172px);
  height: auto;
  /* Gleiche Deckkraft wie das Wanderer-Wasserzeichen oben links. */
  opacity: 0.11;
}

.site-odles .webcam-sun-deco {
  top: clamp(36px, 4.5vw, 72px);
  right: clamp(24px, 4vw, 72px);
  width: clamp(92px, 8.5vw, 148px);
  height: auto;
  opacity: 0.75;
}

@media (max-width: 700px) {
  .site-odles .loc-welcome-deco,
  .site-odles .webcam-sun-deco {
    display: none;
  }

  /* Mobile Header-Fotos: leicht angehobener Kontrast und Farbe, damit die
     kleineren Ausschnitte nicht flau wirken. Die Dateien selbst laden mobil
     in 1300 px (statt 900 px) fuer scharfe Retina-Darstellung. */
  .site-odles .hero-bg img {
    filter: contrast(1.08) saturate(1.07);
  }

  /* Startseite mobil: das 3:2-Motiv wird links und rechts beschnitten. Die
     Huette sitzt im Foto links der Mitte, mit zentriertem Ausschnitt stuende
     sie deutlich links im Bild. Der Fokuspunkt rueckt darum nach links: es
     bleibt mehr von der linken Bildhaelfte stehen, rechts wird mehr
     abgeschnitten — die Huette steht dadurch mittiger. */
  .site-odles .hero-bg img[src$="/baita-odles-frontalansicht.webp"] {
    object-position: 32% center;
  }

  /* Abstand zwischen den Pfeilen und dem Karussell darunter mobil halbiert. */
  .site-odles .carousel-controls + .moments-scroll {
    margin-top: 12px;
  }

  /* Mobil stehen die Pfeile UNTER dem Karussell (Wunsch René 2026-08-06):
     die Sektion wird zur Flex-Spalte, die Controls ruecken ans Ende.
     Absolut positionierte Dekor-Elemente bleiben davon unberuehrt. */
  .site-odles .welcome:has(> .carousel-controls) {
    display: flex;
    flex-direction: column;
    /* Halbierter Abstand unter dem Karussell (Wunsch René 2026-08-06). */
    padding-bottom: 36px;
  }

  .site-odles .welcome > .carousel-controls {
    order: 3;
    margin-top: 6px;
    padding-top: 4px;
    padding-bottom: 0;
  }

  /* Hinweis: Die Teller-Zoom-Regeln der Hochformat-Gerichte gelten seit
     2026-08-06 global (siehe Karussell-Block weiter oben), weil die Teller
     auch am Desktop zu tief sassen. */

  /* Wanderkarte mobil: randnah, aber vollstaendig sichtbar. Frueher stand
     hier transform: scale(1.35). Damit lief die Grafik ueber den Viewport
     hinaus und wurde vom overflow:hidden der Section beschnitten, sodass
     die aeusseren Beschriftungen (Ortisei links, St. Christina rechts)
     fehlten. Stattdessen wird der Container jetzt wie .map-photos auf volle
     Viewportbreite gezogen; ein kleiner Innenabstand haelt die Randlabels
     frei. */
  .site-odles .map-img {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 10px;
  }
}

/* Split-Slider: Pfeile und Punkte liegen gemeinsam auf dem Foto und teilen
   sich dieselbe 64-px-Zeile am unteren Bildrand. Die Punkte sitzen an der
   aeusseren, die Pfeile an der inneren Bildkante. */
.site-odles .split-feature .photo-slider-dots,
.site-odles .family-closing .photo-slider-dots {
  right: auto;
  left: clamp(18px, 2.5vw, 38px);
  bottom: clamp(16px, 2vw, 28px);
  height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* ---------- Galerie: breites Grid, groessere Bilder ---------- */

.site-odles .gallery-welcome .welcome-inner {
  max-width: min(1680px, 94vw);
}

.site-odles .gallery-grid {
  max-width: none;
}

/* ---------- Mobile: Split-Fotos 30 % hoeher ---------- */

@media (max-width: 700px) {
  .site-odles .split-feature-media,
  .site-odles .family-closing-media,
  .site-odles .split-feature > .photo-slider {
    aspect-ratio: 1.0256;
  }

}

/* Das Rind bleibt im Zuschnitt des Hofproduktes sichtbar, statt zu weit links
   aus dem Bild zu fallen. */
.site-odles .product-card-beef-image {
  /* Rechtsbuendig, damit Kuhkopf und Kalb im Kartenzuschnitt sichtbar bleiben. */
  object-position: 100% center;
}

/* Alle Fußzeilen-Texte wachsen gleichmäßig um 1,5 px – unabhängig vom Viewport. */
.site-odles .ft-brand p,
.site-odles .ft-col nav,
.site-odles .ft-address {
  font-size: calc(var(--fs-small) + 1.5px);
}

.site-odles .ft-col-title {
  font-size: calc(var(--fs-meta) + 1.5px);
}

.site-odles .ft-bottom,
.site-odles .ft .site-footer-legal {
  font-size: calc(var(--fs-legal) + 1.5px);
}

/* Ein einzelnes Spezialmodul darf die Richtung nicht wieder überschreiben:
   die Ausgangsdatei zeigt nach rechts, daher wird nur „Zurück“ gespiegelt. */
.site-odles .photo-slider-controls .photo-slider-control-prev > img {
  transform: scaleX(-1) !important;
}

.site-odles .photo-slider-controls .photo-slider-control-next > img {
  transform: none !important;
}

/* ---------- Menue Desktop/MacBook: kleinere Punkte, mehr Luft ----------
   Die Titel waren so gross, dass aufgeklappte Untermenues die folgenden
   Punkte ueberdeckten (Items wurden per flex-shrink gequetscht). */

@media (min-width: 701px) {
  .site-odles .menu-item {
    flex-shrink: 0;
  }

  .site-odles .menu-item-title {
    font-size: clamp(1.5rem, min(2.1vw, 4vh), 2.7rem);
  }

  .site-odles .menu-nav {
    gap: clamp(14px, 2.8vh, 36px);
  }
}

/* ---------- Letzte Detailkorrekturen: Startseite und Essen & Trinken ---------- */

/* Die drei Food-Erzaehlabschnitte sind am MacBook exakt 40 % kompakter. Die
   Motive bleiben ungestreckt und werden nur passend beschnitten. */
@media (min-width: 701px) and (max-width: 1600px) {
  .food-page .food-story {
    height: clamp(460px, 45vw, 680px);
    min-height: 0;
  }

  .food-page .food-story .photo-slider,
  .food-page .food-story .photo-slider-track,
  .food-page .food-story .photo-slide,
  .food-page .food-story .photo-slide picture {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* Kleine manuelle Navigation fuer die automatisch laufenden Bildfolgen. */
.site-odles .photo-slider-controls {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.site-odles .photo-slider-control {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(239, 235, 231, 0.76);
  border-radius: 50%;
  background: rgba(52, 48, 46, 0.3);
  padding: 0;
  cursor: pointer;
  transition: background 0.24s ease, border-color 0.24s ease;
}

.site-odles .photo-slider-control img {
  width: 21px;
  height: auto;
  filter: var(--filter-cream);
  transition: filter 0.24s ease, transform 0.24s ease;
}

.site-odles .photo-slider-control-prev img {
  transform: scaleX(-1);
}

.site-odles .photo-slider-control:hover,
.site-odles .photo-slider-control:focus-visible {
  border-color: var(--color-cream);
  background: var(--color-cream);
}

.site-odles .photo-slider-control:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

/* Anreisebilder liegen seitlich und unten buendig; ihr oberer Abstand bleibt. */
.site-odles .map {
  padding-bottom: 0;
}

.site-odles .map-photos {
  width: 100vw;
  max-width: none;
  margin: 56px calc(50% - 50vw) 0;
  gap: 0;
}

.site-odles .map-photos > div {
  max-width: none;
  flex: 1 1 50%;
}

/* Der Abstand zwischen FAQ und Footer ist halbiert. */
.site-odles .faq {
  padding-bottom: clamp(85px, 9vw, 140px);
}

/* Die beiden Kaesebrett-Illustrationen erhalten ihre angeforderten Positionen. */
.site-odles .events-deco {
  bottom: clamp(-150px, -9vw, -60px);
}

.food-page .product-deco {
  bottom: calc(clamp(-190px, -14vw, -90px) + 100px);
}

/* Auf der Startseite bleibt das zweite Besuchs-SVG nur als feine Textur sichtbar. */
.site-odles:not(.contact-page) .contact-welcome .contact-deco {
  opacity: 0.02;
}

@media (max-width: 700px) {
  .site-odles .map-photos > div {
    flex-basis: 100%;
  }

  .site-odles .faq {
    padding-bottom: 56px;
  }

  .site-odles .events-deco {
    bottom: -40px;
  }
}

/* ---------- Galerie, Hof und Wetter: finale Bedienung & Mobil-Feinschliff ---------- */

/* Hinweis 2026-08-06: Die frueheren generischen object-position-Regeln der
   Hochformat-Gerichte sind entfernt — die Teller-Zentrierung uebernehmen
   jetzt die Zoom-Regeln im Karussell-Block bzw. die photo-slide-Regeln
   (doppelte Korrektur wuerde die Teller zu weit verschieben). */

/* Die breiten Desktop-Kacheln der Startseiten-Kueche zeigen einen kleineren
   Bildausschnitt als die Carousel-Kacheln; jeder Teller ist hier einzeln
   nachjustiert. Mobil greifen weiterhin die nth-child-Regeln weiter unten. */
.site-odles .food-card-img img[src*="knoedelsuppe-mit-schnittlauch"],
.site-odles .food-card-img img[src*="suedtiroler-knoedeltris"] {
  object-position: 50% 98%;
}

/* Gulasch 20 % und Tagliata 17 % tiefer als die urspruenglichen 98 % / 95 %. */
.site-odles .food-card-img img[src*="gulasch-mit-semmelknoedel"] {
  object-position: 50% 78%;
}

.site-odles .food-card-img img[src*="tagliata-mit-rucola-und-parmesan"] {
  object-position: 50% 78%;
}

.site-odles .food-card-img img[src*="apfelstrudel-mit-vanillesauce"] {
  object-position: 50% 83%;
}

.site-odles .food-card-img img[src*="kaiserschmarrn-mit-beeren"] {
  object-position: 50% 56%;
}

/* Hauptmotive einzeln in die Mitte des jeweiligen Zuschnitts geruckt:
   Werte pro Foto aus dem Bildinhalt abgeleitet (Personen-/Motivposition),
   damit in keinem Kachel- oder Sliderformat das Hauptelement abgeschnitten
   wird. Spezifischere Kontextregeln duerfen weiterhin uebersteuern. */
.site-odles img[src*="holzherz-mit-blick-auf-dolomiten"] {
  object-position: 45% 50%;
}

.site-odles img[src*="gaeste-entspannen-rotwein-dolomitenblick"] {
  object-position: 62% 50%;
}

.site-odles img[src*="holzliegen-baita-odles-dolomitenpanorama"] {
  object-position: 45% 50%;
}

.site-odles img[src*="familie-ziegen-spielplatz-baita-odles"] {
  object-position: 45% 50%;
}

.site-odles img[src*="kinder-wippe-vor-bergen"] {
  object-position: 40% 50%;
}

.site-odles img[src*="kinder-katze-am-brunnen"] {
  object-position: 30% 50%;
}

.site-odles img[src*="junge-mit-katze-auf-bank"] {
  object-position: 50% 58%;
}

.site-odles img[src*="huehner-fuettern-familie"] {
  object-position: 50% 45%;
}

.site-odles img[src*="familie-in-tracht-vor-dem-langkofel"] {
  object-position: 50% 85%;
}

.site-odles img[src*="kinder-im-sandkasten-baita-odles"] {
  object-position: 50% 64%;
}

.site-odles img[src*="baita-odles-im-abendlicht"] {
  object-position: 42% 50%;
}

.site-odles img[src*="kinderspielplatz-baita-odles"] {
  object-position: 42% 50%;
}

.site-odles img[src*="baita-odles-vor-den-groedner-dolomiten"] {
  object-position: 45% 50%;
}

.site-odles img[src*="baita-odles-in-der-blumenwiese"] {
  object-position: 45% 50%;
}

/* Die grossen Familienmotive bleiben trotz der unterschiedlichen Kartenformate
   auf den Personen fokussiert. Gruppen bleiben in der Bildmitte sichtbar. */
.events-page .moments-set img[src*="kind-laufrad-blumenwiese"] {
  object-position: 38% 50%;
}

.events-page .moments-set img[src*="kinder-auf-baumstamm"] {
  object-position: 35% 50%;
}

.events-page .moments-set img[src*="kinder-im-sandkasten"] {
  object-position: 50% 64%;
}

.events-page .moments-set img[src*="kind-streichelt-hofkatze"],
.events-page .moments-set img[src*="kinder-fuettern-huehner"],
.events-page .moments-set img[src*="junge-mit-katze"] {
  object-position: 50% 44%;
}

/* Der Hof beginnt mit der gleichen festen Bild-/Text-Hoehe wie die folgenden
   Themen, damit beim Scrollen kein Abschnitt unvermittelt kuerzer wirkt. */
@media (min-width: 701px) {
  .farm-page .split-feature {
    height: clamp(520px, 70vh, 720px);
    min-height: 0;
  }

  .farm-page .split-feature .photo-slider,
  .farm-page .split-feature .photo-slider-track,
  .farm-page .split-feature .photo-slide,
  .farm-page .split-feature .photo-slide picture {
    height: 100%;
    min-height: 0;
  }
}

/* Das Tiermotiv in der dunklen Hof-Einleitung steht bewusst weiter unten und
   bleibt so frei vom Header. */
.farm-page .farm-welcome .welcome-icon {
  top: 129px;
}

@media (max-width: 700px) {
  /* Auch auf dem Handy lassen sich alle Endlos-Galerien klar manuell steuern. */
  .site-odles .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px var(--pad-x) 12px;
  }

  .site-odles .carousel-control {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .site-odles .carousel-control-icon {
    display: block;
    width: 48px;
    height: auto;
    filter: var(--filter-dark);
  }

  .site-odles .carousel-controls-light .carousel-control-icon {
    filter: var(--filter-cream);
  }

  .site-odles .carousel-control-prev .carousel-control-icon {
    transform: scaleX(-1);
  }

  /* Weniger dunkle Ueberlagerung: die mobilen Hero-Motive wirken lebendiger,
     der Header und die Titel bleiben trotzdem sicher lesbar. */
  .site-odles .hero-shade {
    background: linear-gradient(180deg, rgba(52, 48, 46, 0.76) 0%, rgba(52, 48, 46, 0) 36%, rgba(52, 48, 46, 0) 66%, rgba(52, 48, 46, 0.59) 100%);
  }

  /* Das zweite Besuchs-SVG ist auf kleinen Displays eine unnötige Wiederholung. */
  .site-odles:not(.contact-page) .contact-welcome .contact-deco {
    display: none;
  }

  /* Wetter steht mobil als ruhiger, mittiger Vollbreitenblock unter der Webcam. */
  .weather-page .forecast-col,
  .weather-page .forecast-col-title {
    width: 100%;
    text-align: center;
  }

  .weather-page .forecast-col {
    align-items: center;
  }

  .weather-page .forecast-col .official-weather-widget {
    width: 100%;
    --weather-card-min-width: 100%;
    --weather-gap: 12px;
    --weather-switcher-breakpoint: 9999px;
  }
}

/* Nach dem manuellen Schritt laeuft die Folge ohne Sprung wieder endlos weiter;
   eine aktivierte Bewegungseinschraenkung bleibt dabei vollstaendig respektiert. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .site-odles .moments-track.is-ready {
    animation: momentsLoop var(--carousel-duration, 40s) linear infinite;
  }
}

/* ---------- Einheitliches Split-Raster ----------
   Auf einem 13-Zoll-MacBook (1280 px Breite) entspricht 45 vw genau den
   kompakten 576 px der bereits abgestimmten Essen-&-Trinken-Abschnitte. Alle
   halb Bild / halb Text-Module folgen derselben Skala - auch Streichelzoo und
   Wanderrouten. Auf grossen Bildschirmen bleibt die vertraute Obergrenze von
   720 px erhalten. */
@media (min-width: 701px) {
  .site-odles .split-feature,
  .site-odles .family-closing {
    height: clamp(460px, 45vw, 720px);
    min-height: 0;
  }

  .site-odles .split-feature-copy,
  .site-odles .family-closing-copy {
    min-height: 0;
    padding: clamp(48px, 6.5vw, 104px);
  }

  .site-odles .split-feature-media,
  .site-odles .family-closing-media,
  .site-odles .split-feature .photo-slider,
  .site-odles .family-closing .photo-slider,
  .site-odles .split-feature .photo-slider-track,
  .site-odles .family-closing .photo-slider-track,
  .site-odles .split-feature .photo-slide,
  .site-odles .family-closing .photo-slide,
  .site-odles .split-feature .photo-slide picture,
  .site-odles .family-closing .photo-slide picture {
    height: 100%;
    min-height: 0;
  }

  /* Die Routen enthalten mehr Fakten und einen externen Kartenlink. Mit
     kompakterer, aber weiterhin gut lesbarer Satzdichte passen sie sauber in
     dasselbe Raster wie die kuerzeren Hof- und Kuechenthemen. */
  .location-page .route-feature .split-feature-copy {
    padding: clamp(44px, 5.5vw, 80px);
  }

  .location-page .route-feature h2 {
    font-size: clamp(2.75rem, 3.6vw, 4.3rem);
  }

  .location-page .route-feature p {
    margin-top: 20px;
    line-height: 1.6;
  }

  .location-page .route-feature .route-meta {
    margin-top: 16px;
  }

  .location-page .route-feature .btn {
    margin-top: 22px;
  }
}

/* Die Slider-Pfeile bleiben deutlich sichtbar, aber ohne Chip-, Rand- oder
   Kreisoptik: groessere reine Pfeile direkt auf dem Foto. */
.site-odles .photo-slider-controls {
  right: clamp(18px, 2.5vw, 38px);
  bottom: clamp(16px, 2vw, 28px);
  gap: 14px;
}

.site-odles .photo-slider-control {
  width: 80px;
  height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-odles .photo-slider-control img {
  width: 42px;
}

.site-odles .photo-slider-control:hover,
.site-odles .photo-slider-control:focus-visible {
  border: 0;
  background: transparent;
}

/* ---------- Gesamt-QA: eindeutige Pfeile und Bildabstaende ----------
   Beide Bedienelemente verwenden dieselbe Pfeil-Datei. Die Richtung wird
   deshalb explizit am jeweiligen Button festgelegt – auch im Hover- und
   Tastaturzustand. Dabei bleibt die Sichtbarkeit konstant; ein Hover darf
   nicht wie ein unbeabsichtigtes Ausblenden wirken. */
.site-odles .photo-slider-control-prev img,
.site-odles .photo-slider-control-prev:hover img,
.site-odles .photo-slider-control-prev:focus-visible img {
  transform: scaleX(-1);
  opacity: 1;
}

.site-odles .photo-slider-control-next img,
.site-odles .photo-slider-control-next:hover img,
.site-odles .photo-slider-control-next:focus-visible img {
  transform: none;
  opacity: 1;
}

.site-odles .photo-slider-control:hover img,
.site-odles .photo-slider-control:focus-visible img {
  filter: var(--filter-cream);
  opacity: 1;
}

.site-odles .carousel-control-prev .carousel-control-icon,
.site-odles .carousel-control-prev:hover .carousel-control-icon,
.site-odles .carousel-control-prev:focus-visible .carousel-control-icon {
  transform: scaleX(-1);
}

.site-odles .carousel-control-next .carousel-control-icon,
.site-odles .carousel-control-next:hover .carousel-control-icon,
.site-odles .carousel-control-next:focus-visible .carousel-control-icon {
  transform: none;
}

/* Die zwei vollbreiten Anreisebilder erhalten denselben ruhigen Zwischenraum
   wie die Bildcollage im Hof-Abschnitt. Der obere Abstand bleibt unveraendert. */
.site-odles .map-photos {
  gap: clamp(14px, 1.8vw, 24px);
}

@media (min-width: 701px) {
  .site-odles .map-photos > div {
    flex-basis: calc((100% - clamp(14px, 1.8vw, 24px)) / 2);
  }
}

@media (max-width: 700px) {
  .site-odles .map-photos {
    flex-wrap: nowrap;
    /* 60 px Grid-Abstand plus diese Korrektur ergeben die gewuenschten
       rund 58 px zwischen den CTAs und der Bildreihe (vorher 116 px). */
    margin-top: -2px;
  }

  .site-odles .map-photos > div {
    flex: 0 1 calc((100% - clamp(14px, 1.8vw, 24px)) / 2);
    min-width: 0;
  }
}

/* ---------- Split-Slider: beide Bedienelemente auf dem Foto ----------
   Text links/Bild rechts: Pfeile an der inneren (linken) Bildkante, Punkte an
   der aeusseren (rechten). Bild links/Text rechts: gespiegelt. Beide Leisten
   teilen sich dieselbe 64-px-Zeile und liegen exakt auf einer Hoehe. */
@media (min-width: 701px) {
  .site-odles .split-feature:not(.is-reversed) .photo-slider-controls {
    right: auto;
    left: clamp(18px, 2.5vw, 38px);
  }

  .site-odles .split-feature:not(.is-reversed) .photo-slider-dots {
    left: auto;
    right: clamp(18px, 2.5vw, 38px);
    justify-content: flex-end;
  }
}

/* ---------- Geräte-QA: Menübilder, Routenlinks und Logo ----------
   Die beiden Motive im großen Desktop-Menü wachsen nach links, während ihre
   gemeinsame rechte Kante unverändert bleibt. So bleibt die Bildbühne am
   rechten Rand sauber ausgerichtet und ist rund 30 % großzügiger als zuvor. */
@media (min-width: 1201px) and (min-height: 621px) {
  .site-odles .menu-pics {
    left: 42vw;
  }
}

/* Bei der Tablet-Grenze war die Innenhöhe der Routen-Buttons wegen des
   großzügigen vertikalen Paddings kleiner als eine Textzeile. Die ruhige
   Button-Optik bleibt erhalten, die Beschriftung kann aber nie mehr clippen. */
.site-odles .route-feature .btn {
  min-height: 48px;
  padding-block: 0.85em;
}

/* ---------- Anreise und neue Bildabstimmungen, August 2026 ---------- */

/* Das Luftbild zeigt bewusst mehr von der rechten Bildseite. So bleibt die
   Hütte im Hof-Karussell sichtbar, ohne den eigentlichen Bildrahmen zu
   vergrößern oder eine künstliche Bildfläche zu erzeugen. */
.site-odles .m-item img.carousel-hof-aerial {
  object-position: 72% center;
}

.site-odles .anchor-alias {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
}

/* Die Wegeskizze bekommt auf Lage und Anreise einen ruhigen, dunklen eigenen
   Abschnitt. Sie steht vor den Routen bzw. als Abschluss auf der Anreiseseite. */
.site-odles .arrival-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 140px) var(--pad-x);
  color: var(--color-cream);
  background: var(--color-dark);
}

.site-odles .arrival-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: clamp(48px, 8vw, 144px);
  width: min(100%, var(--wrap-wide));
  margin: 0 auto;
}

/* Auf anreise.html traegt dieser Abschnitt die Seite allein: der helle
   welcome-Abschnitt darueber ist entfallen, der Hero geht direkt in die
   ruhige dunkle Flaeche ueber. Die Wegeskizze bleibt deshalb ohne ein
   zusaetzliches Hintergrundmotiv klar lesbar. */
.site-odles .arrival-panel-solo {
  isolation: isolate;
}

/* Gestapelte Variante: die Wegeskizze steht in voller Breite, der Text
   sitzt darunter. */
.site-odles .arrival-panel-stacked {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(44px, 5vw, 78px);
  justify-items: center;
}

.site-odles .arrival-panel-stacked .arrival-panel-map {
  width: 100%;
}

.site-odles .arrival-panel-stacked .arrival-panel-map img {
  max-width: none;
}

.site-odles .arrival-panel-stacked .arrival-panel-copy {
  max-width: 46rem;
  text-align: center;
}

.site-odles .arrival-panel-stacked .arrival-times {
  max-width: 420px;
  margin-inline: auto;
}

.site-odles .arrival-panel-map {
  min-width: 0;
}

.site-odles .arrival-panel-map img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  opacity: 0.9;
  filter: var(--filter-cream);
}

.site-odles .arrival-panel-copy {
  max-width: 35rem;
}

.site-odles .arrival-panel h1,
.site-odles .arrival-panel h2 {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
}

.site-odles .arrival-panel p {
  margin: 26px 0 0;
  color: var(--color-cream-soft);
  line-height: 1.75;
}

.site-odles .arrival-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Zwei feste Zeilen (Label, Wert): die Spalten teilen sie sich per subgrid,
     damit die Gehzeiten auf einer Hoehe stehen, auch wenn ein laengeres Label
     wie "Bergstation Col Raiser" mobil zweizeilig umbricht. */
  grid-template-rows: auto auto;
  /* Kein row-gap: der Abstand Label/Wert kommt weiterhin aus dd. */
  column-gap: 18px;
  row-gap: 0;
  margin: 38px 0 0;
}

.site-odles .arrival-times > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding-top: 16px;
  border-top: 1px solid rgba(239, 235, 231, 0.32);
}

.site-odles .arrival-times dt,
.site-odles .arrival-times dd {
  margin: 0;
}

.site-odles .arrival-times dt {
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-odles .arrival-times dd {
  margin-top: 7px;
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
}

@media (max-width: 700px) {
  .site-odles .arrival-panel {
    padding-block: clamp(64px, 16vw, 96px);
  }

  .site-odles .arrival-panel-inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .site-odles .arrival-panel-map img,
  .site-odles .arrival-panel-copy {
    margin-inline: auto;
  }

  .site-odles .arrival-panel-copy {
    text-align: center;
  }

  .site-odles .arrival-times {
    max-width: 360px;
    margin-inline: auto;
    margin-top: 34px;
  }
}

/* ---------- Saisonwechsel / vorbereitete Winterebene ----------
   Ein echter Link statt eines unechten Formular-Switches: Er führt jeweils
   zur anderen Seitenfamilie, bleibt mit Tastatur bedienbar und zeigt seinen
   Zustand ausschließlich über Sonne/Schneekristall. */
.site-odles .hd-season,
.site-odles .menu-season {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
}

.site-odles .hd-season {
  padding-inline-start: clamp(8px, 1vw, 16px);
}

.site-odles .menu-season {
  display: none;
}

.site-odles .season-switch-toggle {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 76px;
  height: 38px;
  padding: 3px;
  border: 1px solid rgba(239, 235, 231, 0.56);
  border-radius: 999px;
  background: rgba(52, 48, 46, 0.18);
  box-shadow: inset 0 1px 0 rgba(239, 235, 231, 0.12);
  color: rgba(239, 235, 231, 0.54);
  text-decoration: none;
  transition: border-color 0.28s ease, background-color 0.28s ease;
}

.site-odles .season-switch-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 2);
  border-radius: 50%;
  background: var(--color-cream);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  transform: translateX(0);
  transition: transform 0.42s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles .season-switch--winter .season-switch-toggle::before {
  transform: translateX(100%);
}

.site-odles .season-switch-icon {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: 17px;
  height: 17px;
  transition: color 0.28s ease, transform 0.35s cubic-bezier(0.16, 0.76, 0.24, 1);
}

.site-odles .season-switch--summer .season-switch-icon--sun,
.site-odles .season-switch--winter .season-switch-icon--snow {
  color: var(--color-dark);
}

.site-odles .season-switch-toggle:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .site-odles .season-switch-toggle:hover {
    border-color: var(--color-cream);
    background: rgba(239, 235, 231, 0.12);
  }

  .site-odles .season-switch-toggle:hover .season-switch-icon {
    transform: scale(1.08);
  }
}

/* In der schmaleren Kopfleiste bleibt das Logo frei. Der Schalter lebt dort
   sichtbar im geöffneten Menü und bleibt somit auf jedem Gerät erreichbar. */
@media (max-width: 860px) {
  .site-odles .hd-season {
    display: none;
  }

  /* Unter dem letzten Menuepunkt, mit Luft zum unteren Rand. */
  .site-odles .menu-season {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-self: center;
    margin: clamp(20px, 4.5vh, 40px) auto 0;
    transform: none;
  }

  .site-odles .menu-season .season-switch-toggle {
    width: 84px;
    height: 42px;
  }
}

/* ---------- Seiten-Intro: Fullscreen-Statement beim Seitenaufbau ----------
   Rein CSS-gesteuert (keine Bilder, kein JS, kein Request): faerbt den
   ersten Paint, zeigt Logo/Statement und blendet sich selbst aus. Kaschiert
   so die Ladezeit, statt sie zu verlaengern. */
.page-intro {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 28px);
  padding: 24px;
  text-align: center;
  animation: pageIntroOut 0.65s ease 1.15s forwards;
}

.page-intro-home {
  animation-delay: 1.7s;
}

.page-intro-dark {
  background: var(--color-dark);
  color: var(--color-cream);
}

.page-intro-sand {
  background: var(--color-sand);
  color: var(--color-dark);
}

.page-intro-logo {
  /* Sitzt exakt an der Position des Header-Logos, damit das Intro
     nahtlos in den Seitenkopf uebergeht. */
  position: absolute;
  top: clamp(26px, 5vh, 52px);
  left: 50%;
  width: clamp(150px, 17vw, 230px);
  height: auto;
  transform: translateX(-50%);
  animation: pageIntroFade 0.9s ease both;
}

@keyframes pageIntroFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.page-intro-sand .page-intro-logo {
  filter: brightness(0) saturate(100%);
  opacity: 0.82;
}

.page-intro-line {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.3vw, 1.9rem);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: pageIntroIn 0.9s cubic-bezier(0.16, 0.76, 0.24, 1) 0.12s both;
}

.page-intro-home .page-intro-line {
  font-size: clamp(1.15rem, 2.5vw, 2.05rem);
  letter-spacing: 0.22em;
}

@keyframes pageIntroIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pageIntroOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Der Home-Claim bricht nur mobil in zwei zentrierte Zeilen um. */
.intro-br {
  display: none;
}

@media (max-width: 700px) {
  .intro-br {
    display: inline;
  }

  .page-intro {
    animation-duration: 0.5s;
    animation-delay: 0.8s;
  }

  .page-intro-home {
    animation-delay: 1.2s;
  }

  .page-intro-home .page-intro-line {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    line-height: 1.9;
  }

  /* Fullscreen-Intro mobil: Text schmaler (max. 60% Bildschirmbreite) und zentriert. */
  .page-intro-line {
    max-width: 60vw;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-intro {
    animation-duration: 0.2s;
    animation-delay: 0.45s;
  }

  .page-intro-logo,
  .page-intro-line {
    animation: none;
  }
}

/* ---------- Mobil (<=700px): Feinschliff auf Kundenwunsch ----------
   1) Alle Titel (h1/h2/h3) exakt 2px kleiner ueber die Font-Variablen,
      damit auch die abschnittsspezifischen Ueberschriften mitziehen.
   2) Engerer, ruhigerer Abstand in der Menue-Navigation. */
@media (max-width: 700px) {
  .site-odles {
    --fs-h1: calc(clamp(2.85rem, 2.05rem + 3.25vw, 6rem) - 2px);
    --fs-h2: calc(clamp(2.45rem, 1.95rem + 1.8vw, 4.35rem) - 2px);
    --fs-h3: calc(clamp(1.25rem, 1.1rem + 0.35vw, 1.75rem) - 2px);
  }

  .site-odles .menu-nav {
    gap: clamp(10px, 1.1vh, 22px);
  }
}

/* ============================================================
   anreise.html: dunkle Karte, Fotopaar, dunkle Gehzeiten
   ------------------------------------------------------------
   Der Abschnitt mit der Wegeskizze bleibt auf dunklem Grund
   (.arrival-panel-solo). Darunter folgt das vollbreite Fotopaar
   mit denselben Fugen wie .map-photos auf der Startseite, danach
   die Gehzeiten auf erneut dunklem Grund (.arrival-times-panel)
   und zuletzt die drei Wandervorschlaege.
   ============================================================ */
.site-odles .arrival-copy-panel {
  position: relative;
  padding: 0;
  color: var(--color-cream);
  /* Die Fuge zwischen den Motiven zeigt den dunklen Braunton der
     angrenzenden Abschnitte, nicht die helle Cremeflaeche. */
  background: var(--color-dark);
}

/* Fotopaar: volle Breite, zwei gleich breite Bilder mit ruhiger Fuge. */
.site-odles .arrival-photos {
  --arrival-photo-gap: clamp(14px, 1.8vw, 24px);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--arrival-photo-gap);
  width: 100vw;
  max-width: none;
  /* Die Fuge sitzt nur zwischen den beiden Motiven, oben schliesst das
     Fotopaar buendig an die dunkle Kartenflaeche an. */
  margin: 0 calc(50% - 50vw);
}

.site-odles .arrival-photos > div {
  flex: 0 1 calc((100% - var(--arrival-photo-gap)) / 2);
  min-width: 0;
}

.site-odles .arrival-photos img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Gehzeiten stehen wieder auf dunklem Grund: goldene Labels und die
   feinen Trennlinien ueber den Werten kommen aus .arrival-panel. */
.site-odles .arrival-times-panel {
  padding-block: clamp(76px, 9vw, 140px);
}

@media (min-width: 701px) {
  .site-odles .arrival-times-panel .arrival-times {
    /* Breit genug, damit "ca. 1 Std. 30 Min." in einer Zeile bleibt. */
    max-width: 560px;
  }
}

/* ---------- Touch-Stabilität auf mobilen Geräten ----------
   Interaktive Elemente führen nicht zu einem versehentlichen Doppel-Tap-Zoom.
   Die Nutzer-Zoomfunktion der Seite bleibt bewusst erhalten: weder
   `maximum-scale` noch `user-scalable=no` werden verwendet. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.site-odles a,
.site-odles button,
.site-odles input,
.site-odles select,
.site-odles textarea,
.site-odles [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.site-odles .menu-overlay,
.site-odles .gallery-lightbox {
  overscroll-behavior: contain;
}

/* ---------- Finaler mobiler Menue-Override ----------
   Die Navigation ist ueber die Jahre mehrfach nachjustiert worden. Dieser
   abschliessende Block definiert deshalb die mobile Bedienung an einer Stelle:
   Seitentitel fuehren direkt zur Hauptseite, der eigene Pfeil oeffnet nur die
   zugehoerigen Unterpunkte. Gilt bis 1200px, damit Tablets dasselbe
   Listen-Menue bekommen wie das Handy. */
@media (max-width: 1200px) {
  .site-odles .menu-overlay {
    padding: max(76px, calc(env(safe-area-inset-top) + 58px)) 20px max(34px, env(safe-area-inset-bottom));
  }

  .site-odles .menu-nav {
    width: min(100%, 390px);
    align-items: stretch;
    gap: 7px;
    margin-block: auto;
    text-align: left;
  }

  .site-odles .menu-item {
    width: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .site-odles .menu-item-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    align-items: stretch;
    border-bottom: 1px solid rgba(239, 235, 231, 0.2);
  }

  .site-odles .menu-item-title {
    display: flex;
    max-width: none;
    min-height: 54px;
    align-items: center;
    padding: 6px 8px 6px 0;
    font-size: clamp(1.42rem, 6.35vw, 1.86rem);
    line-height: 1.08;
    text-align: left;
  }

  .site-odles .menu-item-toggle {
    display: grid;
    width: 54px;
    min-width: 54px;
    min-height: 54px;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(239, 235, 231, 0.2);
    background: transparent;
    color: var(--color-cream);
    cursor: pointer;
    touch-action: manipulation;
  }

  .site-odles .menu-item-toggle svg {
    width: 19px;
    height: 19px;
    transition: transform 0.28s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

  .site-odles .menu-item.submenu-open .menu-item-toggle svg {
    transform: rotate(180deg);
  }

  .site-odles .menu-item-toggle:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: -5px;
  }

  .site-odles .menu-item-sub,
  .site-odles .menu-item:hover .menu-item-sub,
  .site-odles .menu-item:focus-visible .menu-item-sub,
  .site-odles .menu-item:focus-within .menu-item-sub {
    display: flex;
    width: 100%;
    max-width: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 3.8vw, 1rem);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    pointer-events: none;
    transition:
      visibility 0s linear 0.28s,
      max-height 0.28s cubic-bezier(0.16, 0.76, 0.24, 1),
      margin-top 0.28s cubic-bezier(0.16, 0.76, 0.24, 1),
      opacity 0.22s ease,
      transform 0.28s cubic-bezier(0.16, 0.76, 0.24, 1);
  }

  .site-odles .menu-item.submenu-open .menu-item-sub {
    max-height: 152px;
    margin-top: 8px;
    padding: 0 0 8px;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .site-odles .menu-item-sub > span,
  .site-odles .menu-item-sub > a {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 6px 14px;
    border-radius: 2px;
    background: rgba(239, 235, 231, 0.1);
    color: var(--color-cream);
  }

  .site-odles .menu-item-sub > span::before,
  .site-odles .menu-item-sub > span + span::before,
  .site-odles .menu-item-sub > a + a::before {
    content: none;
  }

  .site-odles .menu-item-sub > a:active {
    background: rgba(239, 235, 231, 0.2);
  }
}

/* ---------- Titelblock auf Seiten ohne welcome-Abschnitt ---------- */

/* Der Untertitel aus dem Hero steht jetzt als h2 ueber dem Fliesstext.
   Er behaelt bewusst die kleine Schrift des frueheren Hero-Untertitels. */
.site-odles h2.welcome-lead {
  max-width: 47.5rem;
  /* Kein Abstand nach unten: der Absatz darunter soll unmittelbar
     anschliessen, damit beides als ein Text gelesen wird. */
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--color-muted);
}

/* Unter 701px greift die Absatzregel der welcome-Abschnitte nicht,
   dort bliebe sonst der Standardabstand des Browsers stehen. */
.site-odles h2.welcome-lead + p {
  margin-top: 0;
}

/* wetter-webcam.html: der Untertitel sitzt unter dem Titel in derselben Spalte. */
.weather-section-head h2.welcome-lead {
  grid-column: 1;
  align-self: start;
  /* Nicht auf die uebliche Lead-Breite begrenzen: hier steht der Untertitel
     allein unter dem Titel und darf dieselbe Breite nutzen. Die zentrierende
     Aussenspanne der allgemeinen Lead-Regel wird dabei aufgehoben, damit er an
     der linken Kante des Titels beginnt. */
  max-width: 58rem;
  margin: 18px 0 0;
}

/* ---------- Hinweis zum Weiterscrollen ---------- */

/* Sitzt mittig knapp ueber der Bergsilhouette und bewegt sich ruhig auf und
   ab. Auf Touchgeraeten ist die Wischgeste vertraut, dort bleibt er aus. */
.hero-scroll {
  display: none;
}

@media (min-width: 701px) {
  .site-odles .hero-scroll {
    position: absolute;
    left: 50%;
    /* Sitzt auf der Bergsilhouette, im durchgehend gefuellten unteren Teil,
       nicht mehr darueber im Foto. */
    bottom: calc(clamp(64px, 8.4vw, 192px) * 0.26);
    z-index: 4;
    display: block;
    width: clamp(26px, 2.2vw, 34px);
    /* Die Silhouette ist hell, der Pfeil setzt sich dunkel davon ab. */
    color: var(--color-dark);
    pointer-events: none;
    animation: heroScrollHint 2.6s ease-in-out infinite;
  }

  .site-odles .hero-scroll svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Auf anreise.html und den Hof-Seiten ist die Silhouette dunkel gefuellt,
     dort dreht sich der Kontrast um. */
  .site-odles .hero-scroll:has(+ .hero-mountain-dark),
  .site-odles.farm-page .hero-scroll {
    color: var(--color-cream);
  }
}

@keyframes heroScrollHint {
  0%, 100% {
    translate: -50% 0;
    opacity: 0.75;
  }
  50% {
    translate: -50% 8px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-odles .hero-scroll {
    animation: none;
    translate: -50% 0;
  }
}

/* Der Kartenlink steht auf der dunklen Flaeche der Gehzeiten und uebernimmt
   dieselben Button-Farben wie die dunklen Routenabschnitte. */
.site-odles .arrival-panel .arrival-map-link {
  --btn-bg: transparent;
  --btn-color: var(--color-cream);
  --btn-border: var(--color-cream-soft);
  --btn-fill: var(--color-cream);
  --btn-hover-color: var(--color-dark);
  --btn-hover-border: var(--color-cream);
  margin-top: clamp(30px, 3.4vw, 46px);
}

/* Die Wandervorschlaege tragen seit der neuen Wegbeschreibung deutlich mehr
   Text. Ihr Raster waechst deshalb um rund 30 Prozent; min-height statt height
   laesst laengere Abschnitte weiter mitwachsen statt sie zu beschneiden.
   Unter 701px stapeln die Sektionen ohnehin und behalten ihre freie Hoehe. */
@media (min-width: 701px) {
  .location-page .route-feature {
    min-height: clamp(676px, 91vh, 936px);
    height: auto;
  }
}

/* Der Textblock der Wandervorschlaege ist auf rund 570px Zeilenlaenge
   begrenzt. Auf breiten Bildschirmen blieb dadurch rechts in der Texthaelfte
   viel Leerraum stehen, waehrend der Text am linken Rand klebte. Das Padding
   waechst jetzt mit: der Block steht damit waagerecht in seiner Haelfte
   mittig, ohne dass Ueberschrift, Text, Fakten und Button ihre gemeinsame
   linke Kante verlieren. */
@media (min-width: 701px) {
  .location-page .route-feature .split-feature-copy {
    padding-inline: max(clamp(44px, 5.5vw, 80px), calc((100% - 570px) / 2));
  }
}

/* Im Abschnitt "Kuehe und Kaelber" liegt das Motiv bei zwei Fotos am rechten
   Bildrand: beim zweiten die Herde, beim dritten der Bauer. Der breite Slide
   beschneidet sonst genau diesen Teil, darum bleibt der Ausschnitt dort
   rechtsbuendig. */
.site-odles #weide .photo-slide img[src$="/kuehe-auf-der-weide.webp"],
.site-odles #weide .photo-slide img[src$="/bauer-fuettert-kuehe.webp"] {
  object-position: 100% center;
}