@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400&display=swap');
/* ^ Schriften-Import muss die ERSTE Zeile der Datei bleiben */

/* =====================================================================
   BERGHOF BERWANG – zentrales Stylesheet
   ---------------------------------------------------------------------
   Einbinden im Template (nach style.css / custom.css):
     link-Tag im Template: href="/css/berghof.css" rel="stylesheet"
   (KEINE HTML-Tags und keine SVG-Data-URIs in dieser Datei – der
   Server-Upload blockt das sonst mit 403.)

   Alle Klassen sind mit "bh-" geprefixt, damit nichts mit dem
   Theme (Bootstrap / Polo) kollidiert. Farben, Schriften und Abstände
   werden ausschließlich über die Variablen in :root gesteuert –
   dort anpassen, alle Seiten ziehen nach.

   Aufbau:
     1. Variablen (Farben, Schrift, Raster)
     2. Basis & Typografie
     3. Layout-Bausteine (Section, Wrap, Grid)
     4. Komponenten (Buttons, Karten, Bänder, Icon-Liste …)
     5. Scroll-Effekte (Reveal, Parallax, Marquee, Vergleich Alt/Neu)
     6. Responsiv
     7. Bildergalerie als Fotowand (Programm-Seite)
     8. Header-Logo beim Scrollen verkleinern
     9. Mobil-Feinschliff
    10. Footer: Linkfarbe + Google-Maps-Karte (Lazy Load)
    11. Zimmerseiten: Zimmertext (bh-room)
    12. Zimmer-Übersicht: Slider mit einem Zimmer pro Bild
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIABLEN
   Farben angelehnt an die alte Seite: helles Steingrau, Weiß,
   das Schieferblau des Schriftzugs, dazu Holz, Gold (Shape-Divider
   des Themes: #bd9353) und ein gedecktes Almgrün.
   ------------------------------------------------------------------- */
:root {
  /* Grundflächen */
  --bh-paper:      #f6f3ec;   /* warmer Papierton, Hauptfläche      */
  --bh-cream:      #ece7dc;   /* etwas dunkler, Wechselflächen       */
  --bh-stone:      #e6e4df;   /* das Grau der alten Seiten-Panels    */
  --bh-white:      #ffffff;

  /* Text */
  --bh-ink:        #2b2a26;   /* Fließtext dunkel                    */
  --bh-ink-soft:   #4a4740;
  --bh-muted:      #7a756b;   /* Nebentext                           */

  /* Akzente */
  --bh-slate:      #0d6f4d;   /* Logo-Grün – Buttons, Links, Karten                       */
  --bh-slate-deep: #0a4b35;   /* Logo-Grün dunkel – Überschriften, dunkle Flächen         */
  --bh-wood:       #8a6543;   /* Altholz                             */
  --bh-gold:       #bd9353;   /* Gold/Lärche – identisch zum Theme   */
  --bh-gold-soft:  #d9bf8e;
  --bh-meadow:     #1f7d59;   /* Logo-Grün mittel – Blumenbänder     */
  --bh-meadow-soft:#9fd3bb;

  /* Linien, Schatten, Radien */
  --bh-line:       rgba(43, 42, 38, .14);
  --bh-line-strong:rgba(43, 42, 38, .28);
  --bh-shadow:     0 30px 60px -32px rgba(43, 42, 38, .45);
  --bh-shadow-sm:  0 10px 24px -14px rgba(43, 42, 38, .35);
  --bh-radius:     6px;
  --bh-radius-lg:  14px;

  /* Schrift */
  --bh-font-head:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --bh-font-body:  'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
  --bh-font-hand:  'Cormorant Garamond', Georgia, serif;   /* nur 2 Schriften: Vorzeilen laufen kursiv in der Überschriftenschrift */

  /* Raster */
  --bh-wrap:       1180px;
  --bh-wrap-narrow: 820px;
  --bh-gutter:     clamp(20px, 4vw, 48px);
  --bh-section-y:  clamp(64px, 9vw, 130px);

  /* Bewegung */
  --bh-ease:       cubic-bezier(.22, .61, .36, 1);
  --bh-dur:        .9s;
}

/* ---------------------------------------------------------------------
   2. BASIS & TYPOGRAFIE
   ------------------------------------------------------------------- */
.bh, .bh * { box-sizing: border-box; }

/* --- Einbettung ins CMS ------------------------------------------
   Das Programm setzt den Inhalt in  section > .container > .row > .col
   und gibt jeder section 80px Padding, weißen Hintergrund und
   overflow:hidden. Hier wird das für unseren Inhalt neutralisiert und
   der .bh-Block auf volle Viewport-Breite gezogen. */
section:has(> .container > .row > div > .bh) { padding: 0; background: var(--bh-paper); }
section:has(> .container > .row > div > .bh) > .container > .row > div { margin-bottom: 0 !important; }
/* das Programm packt unser Script in ein leeres p – dessen Abstand weg */
section:has(> .container > .row > div > .bh) > .container > .row > div > p:has(script) { margin: 0 !important; }
.bh { width: var(--bh-vw, 100vw); margin-left: calc(50% - var(--bh-vw, 100vw) / 2); } /* --bh-vw setzt das Script (Viewport ohne Scrollbar) */
/* Übergang zum Footer: die leere Programm-Sektion (.sidebar-right) mit dem
   goldenen Berggipfel-Divider wird transparent und um ihre Höhe nach oben
   über das letzte Bild gezogen – die Gipfel wachsen so direkt aus dem Bild
   in den goldenen Footer, ohne harte Kante oder helle Zwischenfläche. */
section:has(.bh) ~ section.sidebar-right {
  background: transparent !important; padding: 0 !important; min-height: 0;
  height: 110px; margin-top: -110px; position: relative; z-index: 2; pointer-events: none;
}
section:has(.bh) ~ section.sidebar-right .shape-divider svg { height: 110px !important; }
section:has(.bh) ~ section.sidebar-right .shape-divider { filter: drop-shadow(0 -6px 10px rgba(0, 0, 0, .15)); }
.bh .bh-section { overflow: visible; width: auto; background: var(--bh-paper); }
.bh .bh-section.bh-cream { background: var(--bh-cream); }
.bh .bh-section.bh-stone { background: var(--bh-stone); }
.bh .bh-section.bh-dark  { background: var(--bh-slate-deep); }
.bh .bh-band, .bh .bh-invite { padding-left: 0; padding-right: 0; background: var(--bh-slate-deep); }
.bh .bh-band { padding-top: 0; padding-bottom: 0; }

.bh {
  font-family: var(--bh-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--bh-ink);
  background: var(--bh-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.bh h1, .bh h2, .bh h3, .bh h4 {
  font-family: var(--bh-font-head);
  font-weight: 500;
  line-height: 1.1;
  color: var(--bh-slate-deep);
  margin: 0 0 .5em;
  letter-spacing: .005em;
}
.bh h1 { font-size: clamp(40px, 5.4vw, 66px); }
.bh h2 { font-size: clamp(34px, 4.4vw, 54px); }
.bh h3 { font-size: clamp(24px, 2.4vw, 30px); }
.bh h4 { font-size: 20px; }
.bh h2 em, .bh h1 em { font-style: italic; color: var(--bh-wood); }

/* Theme-Regeln für p/li/a/span (Poppins, andere Größen) neutralisieren */
.bh p, .bh li, .bh a, .bh span, .bh figcaption, .bh strong, .bh em, .bh small { font-family: inherit; }
.bh p { margin: 0 0 1.1em; font-size: inherit; line-height: inherit; color: inherit; }
.bh p:last-child { margin-bottom: 0; }
.bh .bh-lead {
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: var(--bh-ink-soft);
  font-weight: 300;
}
.bh a { color: var(--bh-slate); text-decoration: none; transition: color .25s; }
.bh a:hover { color: var(--bh-wood); }

.bh ul, .bh ol { margin: 0 0 1.1em; padding: 0; list-style: none; }
.bh li { margin: 0; }

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

/* handgeschriebene Vorzeile über Überschriften */
.bh .bh-kicker {
  display: inline-block;
  font-family: var(--bh-font-head);
  font-style: italic;
  font-size: clamp(21px, 1.9vw, 26px);
  letter-spacing: .01em;
  color: var(--bh-wood);
  margin-bottom: .3em;
}
/* kleine Berg-Silhouette als Zierlinie */
.bh .bh-divider {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--bh-gold);
  margin-bottom: 18px;
}
.bh .bh-divider::before, .bh .bh-divider::after {
  content: ""; width: 42px; height: 1px; background: currentColor; opacity: .6;
}
.bh .bh-divider svg { width: 26px; height: 26px; }

/* Blumenband direkt unter dem Hero: Almgrün mit beigen Blümchen
   (inline-SVG-Muster im HTML, wandert langsam nach rechts) */
.bh-ribbon {
  background: var(--bh-meadow);
  border-top: 3px solid var(--bh-gold);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
  line-height: 0;
}
.bh-ribbon.bh-ribbon-bottom { border-top: 0; border-bottom: 3px solid var(--bh-gold); box-shadow: inset 0 1px 0 rgba(0,0,0,.12); }
.bh-ribbon-svg { display: block; width: 100%; height: 64px; }
@media (max-width: 860px) { .bh-ribbon-svg { height: 52px; } }

/* ---------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------- */
.bh-section { position: relative; padding: var(--bh-section-y) 0; }
.bh-section.bh-tight { padding-top: calc(var(--bh-section-y) * .55); padding-bottom: calc(var(--bh-section-y) * .55); }
.bh-section.bh-cream { background: var(--bh-cream); }
.bh-section.bh-stone { background: var(--bh-stone); }
.bh-section.bh-dark  { background: var(--bh-slate-deep); color: #e8e4da; }
.bh-section.bh-dark h2, .bh-section.bh-dark h3 { color: #f4efe4; }
.bh-section.bh-dark .bh-kicker { color: var(--bh-gold-soft); }
.bh-section.bh-dark p { color: #cfc9bc; }

.bh-wrap { width: min(var(--bh-wrap), 100% - 2 * var(--bh-gutter)); margin-inline: auto; }
.bh-wrap.bh-narrow { width: min(var(--bh-wrap-narrow), 100% - 2 * var(--bh-gutter)); }

.bh-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.bh-head.bh-center { margin-inline: auto; text-align: center; }

.bh-grid { display: grid; gap: clamp(24px, 4vw, 56px); }
.bh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.bh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bh-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bh-grid-2.bh-text-right > :first-child { order: 2; }

/* ---------------------------------------------------------------------
   4. KOMPONENTEN
   ------------------------------------------------------------------- */
/* Buttons */
.bh .bh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--bh-font-body); font-weight: 600; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid var(--bh-slate);
  background: var(--bh-slate); color: #fff;
  transition: transform .3s var(--bh-ease), background .3s, color .3s, box-shadow .3s;
  box-shadow: var(--bh-shadow-sm);
}
.bh .bh-btn:hover { background: var(--bh-slate-deep); color: #fff; transform: translateY(-2px); }
.bh .bh-btn svg { width: 18px; height: 18px; transition: transform .3s var(--bh-ease); }
.bh .bh-btn:hover svg { transform: translateX(4px); }
.bh .bh-btn.bh-btn-ghost { background: transparent; color: var(--bh-slate); box-shadow: none; }
.bh .bh-btn.bh-btn-ghost:hover { background: var(--bh-slate); color: #fff; }
.bh .bh-btn.bh-btn-gold { background: var(--bh-gold); border-color: var(--bh-gold); color: #fff; }
.bh .bh-btn.bh-btn-gold:hover { background: var(--bh-wood); border-color: var(--bh-wood); }
.bh .bh-btn.bh-btn-light { background: #fff; border-color: #fff; color: var(--bh-slate-deep); }
.bh .bh-btn.bh-btn-light:hover { background: var(--bh-gold-soft); border-color: var(--bh-gold-soft); }
.bh .bh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Bild-Rahmen mit Schatten + Hover-Zoom */
.bh-frame {
  position: relative; overflow: hidden;
  border-radius: var(--bh-radius-lg);
  box-shadow: var(--bh-shadow);
  background: var(--bh-stone);
}
.bh-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--bh-ease);
}
.bh-frame:hover img { transform: scale(1.05); }
.bh-frame.bh-ratio-4-5 { aspect-ratio: 4 / 5; }
.bh-frame.bh-ratio-3-4 { aspect-ratio: 3 / 4; }
.bh-frame.bh-ratio-4-3 { aspect-ratio: 4 / 3; }
.bh-frame.bh-ratio-16-9 { aspect-ratio: 16 / 9; }
.bh-frame.bh-ratio-1-1 { aspect-ratio: 1 / 1; }

/* Detail-Bilder mit Bildunterschrift */
.bh-details figure { margin: 0; }
.bh-details figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px;
  color: #fff; font-family: var(--bh-font-head); font-style: italic; font-size: 24px;
  background: linear-gradient(to top, rgba(6,40,28,.7), transparent);
}

/* Einzelne Blümchen als lose Verzierung um Bilder herum (reines CSS,
   kein SVG nötig): fünf Blütenblätter in Papierton + goldene Mitte.
   Markup:  i-Element mit class="bh-bloom" und style="top:-14px;left:-10px;--s:26px;--r:12deg"
   innerhalb eines Elements mit der Klasse .bh-blooms (position: relative).
   --s Größe, --r Drehung, --o Deckkraft, --d Verzögerung des sanften Wiegens. */
.bh-blooms { position: relative; }
.bh-bloom {
  --s: 30px; --r: 0deg; --o: 1;
  --petal: #c2463d;        /* Geranienrot */
  --heart: #f6f3ec;        /* helle Mitte */
  position: absolute; z-index: 4; width: var(--s); height: var(--s); pointer-events: none;
  opacity: var(--o);
  background:
    radial-gradient(circle calc(var(--s) * .12) at 50% 50%, var(--heart) 97%, transparent 100%),
    radial-gradient(circle calc(var(--s) * .21) at 50% 24%, var(--petal) 97%, transparent 100%),
    radial-gradient(circle calc(var(--s) * .21) at 75% 42%, var(--petal) 97%, transparent 100%),
    radial-gradient(circle calc(var(--s) * .21) at 66% 72%, var(--petal) 97%, transparent 100%),
    radial-gradient(circle calc(var(--s) * .21) at 34% 72%, var(--petal) 97%, transparent 100%),
    radial-gradient(circle calc(var(--s) * .21) at 25% 42%, var(--petal) 97%, transparent 100%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
  transform: rotate(var(--r));
  animation: bh-sway 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.bh-bloom.bh-bloom-light { --petal: #ffffff; --heart: #c2463d; }   /* weiß mit roter Mitte */
/* Sektionen mit Blümchen über die nachfolgende Sektion heben, damit
   Blümchen am unteren Rand nicht unter deren Hintergrund verschwinden */
.bh section.bh-section:has(.bh-bloom), .bh .bh-section:has(.bh-bloom) { z-index: 2; }
/* --- Winter-Variante: Schneeflocken statt Blümchen -----------------
   Markup: svg.bh-flake mit style="top:..;left:..;--s:30px;--r:10deg" (Inline-SVG im HTML)
   innerhalb eines .bh-blooms-Elements. Farbe Eisblau, Variante
   .bh-flake-light in Weiß. Die Bänder bekommen .bh-ribbon-winter. */
.bh-flake {
  --s: 28px; --r: 0deg; --o: 1;
  position: absolute; z-index: 4; width: var(--s); height: var(--s); pointer-events: none;
  color: #5c9bd1;                              /* Eisblau */
  opacity: var(--o);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.22));
  transform: rotate(var(--r));
  animation: bh-flake-sway 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.bh-flake.bh-flake-light { color: #ffffff; filter: drop-shadow(0 1px 2px rgba(20,40,60,.45)); }
@keyframes bh-flake-sway {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(calc(var(--r) + 25deg)) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .bh-flake { animation: none; } }
@media (max-width: 860px) { .bh-flake { --s: 22px; } }
.bh-ribbon.bh-ribbon-winter { background: #3f6b8e; border-top-color: var(--bh-gold); }   /* Winterblau */
.bh-ribbon.bh-ribbon-winter.bh-ribbon-bottom { border-bottom-color: var(--bh-gold); }

@keyframes bh-sway {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(calc(var(--r) + 9deg)) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .bh-bloom { animation: none; } }
@media (max-width: 860px) { .bh-bloom { --s: 20px; } .bh-bloom.bh-bloom-mobile-hide { display: none; } }

/* kleines Etikett auf einem Bild (z. B. Gastgeber) */
.bh-tag {
  position: absolute; left: 22px; bottom: 22px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  padding: 12px 18px; border-radius: var(--bh-radius);
  box-shadow: var(--bh-shadow-sm);
  line-height: 1.25;
}
.bh-tag strong { display: block; font-family: var(--bh-font-head); font-size: 22px; color: var(--bh-slate-deep); }
.bh-tag span { font-size: 14px; color: var(--bh-muted); }

/* Bild-Collage: großes Bild + versetztes kleines Bild */
.bh-collage { position: relative; padding-bottom: 14%; padding-right: 12%; }
.bh-collage .bh-frame.bh-main { aspect-ratio: 4 / 3; }
.bh-collage .bh-frame.bh-small {
  position: absolute; right: 0; bottom: 0; width: 46%;
  aspect-ratio: 1 / 1; border: 8px solid var(--bh-paper);
}
/* "Fenster"-Parallax: der Rahmen bleibt quadratisch, das Hochformat-Bild
   behält seine volle Höhe und wandert beim Scrollen durch den Rahmen –
   beim Einstieg sieht man den oberen Bildrand, beim Rausscrollen den
   unteren. Die Bewegung setzt das Script über data-bh-window. */
.bh-collage .bh-frame.bh-small img[data-bh-window] {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform;
}
.bh-cream .bh-collage .bh-frame.bh-small { border-color: var(--bh-cream); }

/* Karten (Zimmer, Angebote) */
.bh-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--bh-radius-lg); overflow: hidden;
  box-shadow: var(--bh-shadow-sm);
  transition: transform .5s var(--bh-ease), box-shadow .5s var(--bh-ease);
}
.bh-card:hover { transform: translateY(-6px); box-shadow: var(--bh-shadow); }
.bh-card .bh-card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.bh-card .bh-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--bh-ease); }
.bh-card:hover .bh-card-img img { transform: scale(1.06); }
.bh-card .bh-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bh-card .bh-card-body h3 { margin-bottom: 2px; }
.bh-card .bh-card-meta { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-gold); font-weight: 600; white-space: nowrap; }
.bh-card .bh-card-body p { color: var(--bh-ink-soft); font-size: 16px; }
.bh-card .bh-card-link { margin-top: auto; padding-top: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
/* ganze Karte klickbar (Link mit Block-Elementen darin entfernt das CMS – daher Link innen + ::after) */
.bh-card .bh-card-link::after { content: ""; position: absolute; inset: 0; }
.bh-card .bh-card-link svg { width: 16px; height: 16px; transition: transform .3s var(--bh-ease); }
.bh-card:hover .bh-card-link svg { transform: translateX(4px); }
.bh-card.bh-card-dark { background: var(--bh-slate-deep); }
.bh-card.bh-card-dark h3 { color: #f4efe4; }
.bh-card.bh-card-dark p { color: #cfc9bc; }
.bh-card.bh-card-dark .bh-card-link { color: var(--bh-gold-soft); }

/* breite Karte: Bild links, Text rechts */
.bh-card.bh-card-wide { flex-direction: row; }
.bh-card.bh-card-wide .bh-card-img { aspect-ratio: auto; width: 42%; flex: none; }
@media (max-width: 700px) {
  .bh-card.bh-card-wide { flex-direction: column; }
  .bh-card.bh-card-wide .bh-card-img { width: 100%; aspect-ratio: 4 / 3; }
}

/* kompakte Linkliste in Karten (z. B. Touren) */
.bh-card .bh-card-list { margin: 4px 0 12px; position: relative; z-index: 2; }   /* über dem Stretch-Link der Karte, damit die Einzellinks klickbar sind */
.bh-card .bh-card-list li { border-top: 1px solid var(--bh-line); }
.bh-card .bh-card-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; font-size: 15px; font-weight: 600; color: var(--bh-slate-deep);
}
.bh-card .bh-card-list a:hover { color: var(--bh-slate); }
.bh-card .bh-card-list svg { width: 15px; height: 15px; flex: none; color: var(--bh-gold); transition: transform .3s var(--bh-ease); }
.bh-card .bh-card-list a:hover svg { transform: translateX(4px); }
.bh-card .bh-card-list a::after { display: none; }   /* kein Stretch-Link – nur der Haupt-Link unten */

/* Linkliste (Ausflugsziele): Name, Beschreibung, Pfeil */
.bh .bh-linklist { margin-top: 22px; }
.bh .bh-linklist li { border-top: 1px solid var(--bh-line); }
.bh .bh-linklist li:last-child { border-bottom: 1px solid var(--bh-line); }
.bh .bh-linklist a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t a" "s a"; align-items: center; column-gap: 16px;
  padding: 14px 4px; color: var(--bh-ink); transition: background .25s, padding .3s var(--bh-ease);
}
.bh .bh-linklist a:hover { background: rgba(255,255,255,.55); padding-left: 12px; color: var(--bh-ink); }
.bh .bh-linklist strong { grid-area: t; font-family: var(--bh-font-head); font-weight: 500; font-size: 22px; color: var(--bh-slate-deep); }
.bh .bh-linklist span { grid-area: s; font-size: 15px; color: var(--bh-muted); }
.bh .bh-linklist svg { grid-area: a; width: 18px; height: 18px; color: var(--bh-gold); transition: transform .3s var(--bh-ease); }
.bh .bh-linklist a:hover svg { transform: translateX(4px); }

/* Icon-Liste "Auf einen Blick" */
.bh-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bh-feature {
  background: #fff; border-radius: var(--bh-radius-lg); padding: 28px 24px;
  border: 1px solid var(--bh-line);
  transition: transform .5s var(--bh-ease), box-shadow .5s var(--bh-ease), border-color .5s;
}
.bh-feature:hover { transform: translateY(-4px); box-shadow: var(--bh-shadow-sm); border-color: var(--bh-gold-soft); }
.bh-feature .bh-ico {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--bh-cream); color: var(--bh-wood);
}
.bh-feature .bh-ico svg { width: 26px; height: 26px; }
.bh-feature h4 { margin-bottom: 4px; font-family: var(--bh-font-body); font-weight: 600; font-size: 17px; color: var(--bh-ink); }
.bh-feature p { font-size: 15px; color: var(--bh-muted); }

/* Zahlen / Fakten-Leiste */
.bh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.bh-stat .bh-num {
  font-family: var(--bh-font-head); font-size: clamp(44px, 5vw, 68px);
  line-height: 1; color: var(--bh-gold); font-weight: 500;
}
.bh-stat .bh-num small { font-size: .45em; margin-left: 4px; color: var(--bh-gold-soft); }
.bh-stat .bh-lbl { margin-top: 8px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-muted); }
.bh-dark .bh-stat .bh-lbl { color: #a8a294; }

/* Zitat / Handschrift-Block */
.bh-quote {
  font-family: var(--bh-font-head); font-style: italic;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.3;
  color: var(--bh-slate-deep); max-width: 760px;
}
.bh-signature { font-family: var(--bh-font-head); font-style: italic; font-size: 32px; color: var(--bh-wood); margin-top: 18px; display: inline-block; }

/* Zwei Bild-Panels nebeneinander (Sommer / Winter) */
.bh-seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--bh-radius-lg); overflow: hidden; box-shadow: var(--bh-shadow); }
.bh-season { position: relative; min-height: 520px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; }
.bh-season img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--bh-ease); }
.bh-season:hover img { transform: scale(1.06); }
.bh-season::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,40,28,.82) 0%, rgba(6,40,28,.15) 55%, transparent 100%); }
.bh-season .bh-season-body { position: relative; z-index: 1; padding: 36px; transform: translateY(14px); transition: transform .8s var(--bh-ease); }
.bh-season:hover .bh-season-body { transform: translateY(0); }
.bh-season h3 { color: #fff; font-size: clamp(30px, 3vw, 40px); }
.bh-season .bh-kicker { color: var(--bh-gold-soft); }
.bh-season p { color: rgba(255,255,255,.85); font-size: 16px; max-width: 420px; }
.bh-season ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bh-season li { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; }

/* Grünen "Filter" (Abdunklung) über Bildband, Sommer/Winter und Einladung
   abschalten: Klasse bh-filter-off am äußeren div.bh setzen.
   Text bekommt dann einen kräftigeren Schatten, damit er lesbar bleibt. */
.bh.bh-filter-off .bh-band::after,
.bh.bh-filter-off .bh-invite::after,
.bh.bh-filter-off .bh-season::after { background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); }
.bh.bh-filter-off .bh-band h2, .bh.bh-filter-off .bh-band p, .bh.bh-filter-off .bh-band .bh-kicker,
.bh.bh-filter-off .bh-invite h2, .bh.bh-filter-off .bh-invite p, .bh.bh-filter-off .bh-invite .bh-kicker,
.bh.bh-filter-off .bh-invite .bh-contact, .bh.bh-filter-off .bh-invite .bh-signature,
.bh.bh-filter-off .bh-season h3, .bh.bh-filter-off .bh-season p, .bh.bh-filter-off .bh-season .bh-kicker {
  /* dünne dunkle Kontur um die Buchstaben + weicher Schatten */
  font-weight: 600;                 /* fett – mit Kontur wirkt die normale Stärke zu dünn */
  -webkit-text-stroke: 1.4px rgba(0,0,0,.85);
  paint-order: stroke fill;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,.8),  1.5px -1.5px 0 rgba(0,0,0,.8),
    -1.5px  1.5px 0 rgba(0,0,0,.8),  1.5px  1.5px 0 rgba(0,0,0,.8),
     0 -1.5px 0 rgba(0,0,0,.8), 0 1.5px 0 rgba(0,0,0,.8),
    -1.5px 0 0 rgba(0,0,0,.8), 1.5px 0 0 rgba(0,0,0,.8),
     0 2px 5px rgba(0,0,0,.7), 0 4px 24px rgba(0,0,0,.6);
}
.bh.bh-filter-off .bh-band h2, .bh.bh-filter-off .bh-invite h2, .bh.bh-filter-off .bh-season h3 {
  font-weight: 700; -webkit-text-stroke: 2.4px rgba(0,0,0,.9);
}
.bh.bh-filter-off .bh-band .bh-kicker, .bh.bh-filter-off .bh-invite .bh-kicker, .bh.bh-filter-off .bh-season .bh-kicker { font-weight: 600; }

/* Vollbreites Bildband mit Parallax */
.bh-band { position: relative; min-height: 60vh; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; }
.bh-band .bh-band-bg { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.bh-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(6,40,28,.15) 0%, rgba(6,40,28,.55) 100%); }
.bh-band .bh-band-inner { position: relative; z-index: 1; padding: 80px var(--bh-gutter); max-width: 820px; }
.bh-band h2 { color: #fff; font-size: clamp(38px, 5vw, 64px); text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.bh-band .bh-kicker { color: var(--bh-gold-soft); }
.bh-band p { color: rgba(255,255,255,.9); font-size: clamp(17px, 1.5vw, 20px); }

/* Höhen-Badge (rund, drehende Schrift) */
.bh-altitude {
  position: absolute; right: clamp(16px, 5vw, 70px); top: clamp(16px, 4vw, 60px); z-index: 2;
  width: 132px; height: 132px; display: grid; place-items: center;
}
.bh-altitude svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: bh-spin 22s linear infinite; }
.bh-altitude svg text { font-family: var(--bh-font-body); font-size: 8.6px; letter-spacing: .16em; fill: rgba(255,255,255,.9); text-transform: uppercase; }
.bh-altitude .bh-alt-num { font-family: var(--bh-font-head); font-size: 30px; line-height: 1; color: #fff; text-align: center; }
.bh-altitude .bh-alt-num small { display: block; font-family: var(--bh-font-body); font-size: 11px; letter-spacing: .2em; opacity: .85; margin-top: 4px; }
@keyframes bh-spin { to { transform: rotate(360deg); } }

/* Einladung / CTA am Seitenende */
.bh-invite { position: relative; overflow: hidden; color: #fff; text-align: center; padding: clamp(90px, 12vw, 160px) 0; }
.bh-invite .bh-invite-bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.bh-invite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,75,53,.55) 0%, rgba(10,75,53,.75) 60%, rgba(10,75,53,.9) 100%); }
.bh-invite .bh-wrap { position: relative; z-index: 1; }
.bh-invite h2 { color: #fff; }
.bh-invite p { color: rgba(255,255,255,.88); }
.bh-invite .bh-kicker { color: var(--bh-gold-soft); }
.bh-invite .bh-contact { margin-top: 32px; font-size: 16px; color: rgba(255,255,255,.8); }
.bh-invite .bh-contact a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.bh-invite .bh-contact a:hover { color: var(--bh-gold-soft); }

/* ---------------------------------------------------------------------
   5. SCROLL-EFFEKTE
   Elemente mit .bh-reveal bekommen per JS die Klasse .bh-in, sobald sie
   in den Viewport scrollen. Varianten: -left / -right / -scale / -clip.
   data-delay="200" verzögert in Millisekunden (Stagger).
   ------------------------------------------------------------------- */
.bh-reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity var(--bh-dur) var(--bh-ease), transform var(--bh-dur) var(--bh-ease);
  transition-delay: var(--bh-delay, 0ms);
  will-change: opacity, transform;
}
.bh-reveal.bh-reveal-left  { transform: translateX(-48px); }
.bh-reveal.bh-reveal-right { transform: translateX(48px); }
.bh-reveal.bh-reveal-scale { transform: scale(.92); }
.bh-reveal.bh-reveal-clip  { transform: none; clip-path: inset(0 100% 0 0); transition-property: clip-path, opacity; transition-duration: 1.2s; }
.bh-reveal.bh-in { opacity: 1; transform: none; }
.bh-reveal.bh-reveal-clip.bh-in { clip-path: inset(0 0 0 0); }

/* Zeilenweise Überschrift (Wörter schweben einzeln hoch) */
/* Luft um jedes Wort, damit kursive Unterlängen/Überhänge (z. B. das f in "Berghof") nicht abgeschnitten werden */
.bh-words .bh-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .05em .18em .14em; margin: -.05em -.18em -.14em; }
.bh-words .bh-w > span { display: inline-block; transform: translateY(130%); transition: transform 1s var(--bh-ease); transition-delay: var(--bh-delay, 0ms); }
.bh-words.bh-in .bh-w > span { transform: none; }

/* Bild, das beim Scrollen "aufgeht" (Vorhang) */
.bh-curtain { position: relative; overflow: hidden; }
.bh-curtain::before {
  content: ""; position: absolute; inset: 0; z-index: 2; background: var(--bh-paper);
  transform-origin: top; transition: transform 1.3s var(--bh-ease);
}
.bh-cream .bh-curtain::before { background: var(--bh-cream); }
.bh-curtain.bh-in::before { transform: scaleY(0); }
.bh-curtain img { transform: scale(1.15); transition: transform 1.8s var(--bh-ease); }
.bh-curtain.bh-in img { transform: scale(1); }

/* Parallax-Element (data-parallax="0.2" = Stärke) */
[data-bh-parallax] { will-change: transform; }

/* Laufband (Bildergalerie-Streifen) */
.bh-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bh-marquee-track { display: flex; gap: 16px; width: max-content; animation: bh-marquee 48s linear infinite; }
.bh-marquee:hover .bh-marquee-track { animation-play-state: paused; }
.bh-marquee-track .bh-frame { width: clamp(220px, 24vw, 340px); aspect-ratio: 4 / 5; flex: none; border-radius: var(--bh-radius); box-shadow: var(--bh-shadow-sm); }
.bh-marquee-track .bh-frame:nth-child(even) { aspect-ratio: 4 / 5; margin-top: 28px; }
@keyframes bh-marquee { to { transform: translateX(-50%); } }

/* Vergleichs-Schieberegler (z. B. Sommer / Winter) */
.bh-compare {
  position: relative; overflow: hidden; border-radius: var(--bh-radius-lg);
  aspect-ratio: 4 / 3; box-shadow: var(--bh-shadow); user-select: none; cursor: ew-resize; background: var(--bh-stone);
}
.bh-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-compare .bh-compare-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--bh-pos, 50%)) 0 0); }
.bh-compare .bh-compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--bh-pos, 50%); width: 2px; background: #fff; transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.bh-compare .bh-compare-handle::after {
  content: "\2039\00a0\203A"; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff; box-shadow: var(--bh-shadow-sm);
  display: grid; place-items: center; font-family: var(--bh-font-head); font-size: 26px; line-height: 1;
  color: var(--bh-slate); padding-bottom: 4px;
}
.bh-compare .bh-compare-label {
  position: absolute; top: 18px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--bh-slate-deep);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; z-index: 2; pointer-events: none;
}
.bh-compare .bh-compare-label.bh-l { left: 18px; }
.bh-compare .bh-compare-label.bh-r { right: 18px; }
.bh-compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; z-index: 3; }

/* Fortschritts-Linie beim Scrollen (dünn, oben im Inhalt – optional) */
.bh-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--bh-gold); z-index: 9999; transition: width .1s linear; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .bh-reveal, .bh-words .bh-w > span, .bh-curtain::before, .bh-curtain img { transition: none !important; }
  .bh-reveal { opacity: 1; transform: none; clip-path: none; }
  .bh-words .bh-w > span { transform: none; }
  .bh-curtain::before { display: none; }
  .bh-marquee-track, .bh-altitude svg { animation: none; }
  [data-bh-parallax], .bh-band .bh-band-bg, .bh-invite .bh-invite-bg { transform: none !important; }
}

/* ---------------------------------------------------------------------
   6. RESPONSIV
   ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bh-features, .bh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bh { font-size: 16px; }
  .bh-grid-2, .bh-grid-3 { grid-template-columns: 1fr; }
  .bh-grid-2.bh-text-right > :first-child { order: 0; }
  .bh-seasons { grid-template-columns: 1fr; }
  .bh-season { min-height: 420px; }
  .bh-season .bh-season-body { transform: none; }
  .bh-collage { padding-right: 0; padding-bottom: 0; }
  .bh-collage .bh-frame.bh-small { display: none; }
  .bh-band { min-height: 70vh; }
  .bh-altitude { width: 104px; height: 104px; }
  .bh-altitude .bh-alt-num { font-size: 24px; }
  .bh-tag { left: 14px; bottom: 14px; padding: 10px 14px; }
  .bh-tag strong { font-size: 19px; }
}
@media (max-width: 560px) {
  .bh-features, .bh-grid-5, .bh-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bh-feature { padding: 20px 16px; }
  .bh .bh-btn { padding: 12px 22px; font-size: 14px; }
  .bh-compare .bh-compare-label { font-size: 11px; padding: 5px 10px; }
}

/* ---------------------------------------------------------------------
   7. BILDERGALERIE (Programm-Seite "bildergalerie") als Fotowand
   Das Programm baut die Galerie als .grid-layout mit absolut
   positionierten .grid-item (Isotope setzt inline left/top UND
   transform). Hier wird das per !important in ein CSS-Grid mit
   unterschiedlich großen Kacheln umgebaut.
   Raster: 4 Spalten, Zeileneinheit 150px, alle Kacheln sind 2 oder 4
   Zeilen hoch (2-Zeilen-Bänder), damit keine Löcher entstehen.
     Standard      = 1 Spalte  x 2 Zeilen (Hochformat)
     Querformat    = 2 Spalten x 2 Zeilen
     Highlight     = 2 Spalten x 4 Zeilen
     Panorama      = 4 Spalten x 2 Zeilen
     extra hoch    = 1 Spalte  x 4 Zeilen
   Die Größen werden automatisch nach einem festen Rhythmus vergeben
   (siehe unten) – neue Bilder brauchen keine Anpassung.
   ------------------------------------------------------------------- */
.gallerybody #page-content .grid-layout {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 14px;
  height: auto !important;
  margin: 0 !important;
}
.gallerybody #page-content .grid-layout .grid-loader { display: none !important; }
.gallerybody #page-content .grid-item {
  position: static !important; width: auto !important;
  padding: 0 !important; margin: 0 !important;
  left: auto !important; top: auto !important;
  transform: none !important; transition: none !important; opacity: 1 !important;
  grid-column: span 1; grid-row: span 2;
  border-radius: var(--bh-radius-lg); overflow: hidden;
  background: var(--bh-stone); box-shadow: var(--bh-shadow-sm);
}
.gallerybody #page-content .grid-item a { display: block; width: 100%; height: 100%; }
.gallerybody #page-content .grid-item img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block;
  transition: transform 1.2s var(--bh-ease) !important;
}
.gallerybody #page-content .grid-item:hover img { transform: scale(1.06); }
/* Automatisches Muster – funktioniert für beliebig viele Bilder, neue
   Fotos reihen sich einfach ein. Zyklus von 7 Bildern (12 Einheiten):
     1: Querformat 2x2   2: Standard   3: hoch 1x4   4: groß 2x4
     5–7: Standard
   Die Regeln mit :nth-last-child füllen den angebrochenen Zyklus am
   Ende so auf, dass die letzte Reihe immer voll ist (geprüft für
   35–70 Bilder, 4 und 2 Spalten). */
.gallerybody #page-content .grid-item:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+3) { grid-row: span 4; }
.gallerybody #page-content .grid-item:nth-child(7n+4) { grid-column: span 2; grid-row: span 4; }
/* Rest am Ende auffüllen */
.gallerybody #page-content .grid-item:nth-child(7n+1):nth-last-child(1 of .grid-item) { grid-column: span 4; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+2):nth-last-child(1 of .grid-item) { grid-column: span 2; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+2):nth-last-child(2 of .grid-item) { grid-column: span 2; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+3):nth-last-child(1 of .grid-item) { grid-column: span 4; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+3):nth-last-child(2 of .grid-item) { grid-column: span 1; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+4):nth-last-child(1 of .grid-item) { grid-column: span 4; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+4):nth-last-child(2 of .grid-item) { grid-column: span 2; grid-row: span 2; }
.gallerybody #page-content .grid-item:nth-child(7n+6):nth-last-child(1 of .grid-item) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
  .gallerybody #page-content .grid-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; gap: 10px; }
  .gallerybody #page-content .grid-item:nth-child(7n+1):nth-last-child(1 of .grid-item),
  .gallerybody #page-content .grid-item:nth-child(7n+3):nth-last-child(1 of .grid-item),
  .gallerybody #page-content .grid-item:nth-child(7n+4):nth-last-child(1 of .grid-item) { grid-column: span 2; }
}
@media (max-width: 480px) {
  .gallerybody #page-content .grid-layout { grid-auto-rows: 110px; }
}

/* ---------------------------------------------------------------------
   8. HEADER-LOGO (Programm-Header)
   Das Logo liegt als  a > span.logo-default > img  im Header. Die
   Theme-Regel "#logo a > img {height:80px}" greift dadurch nicht, das
   Bild bleibt in Originalgröße (250px, weißes Quadrat).
   Lösung: Das Logo ist in beiden Zuständen ein weißes "Schild" mit
   runden unteren Ecken und Schatten – oben über dem Hero groß
   (--bh-logo-top), sobald der Header beim Scrollen fixiert wird
   (.header-sticky) weich auf --bh-logo-sticky verkleinert, wo es ein
   Stück unter der 80px-Leiste heraushängt.
   ------------------------------------------------------------------- */
:root { --bh-logo-top: 230px; --bh-logo-sticky: 128px; }
#header .header-inner,
#header .header-inner .container { overflow: visible; }
#header .header-inner #logo { display: flex; align-items: flex-start; overflow: visible; }
#header .header-inner #logo img {
  height: var(--bh-logo-top) !important; width: auto !important; max-width: none !important; padding: 0 !important;
  background: #fff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 40px -18px rgba(43, 42, 38, .5);
  transition: height .6s cubic-bezier(.22, .61, .36, 1), border-radius .6s ease, box-shadow .6s ease;
  will-change: height;
}
#header.header-sticky .header-inner #logo { height: 80px; }
#header.header-sticky .header-inner #logo img {
  height: var(--bh-logo-sticky) !important;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 30px -14px rgba(43, 42, 38, .45);
}
@media (max-width: 860px) {
  :root { --bh-logo-top: 150px; --bh-logo-sticky: 96px; }
}

/* ---------------------------------------------------------------------
   9. MOBIL-FEINSCHLIFF (geprüft bei 375px)
   ------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Sprach-Flagge nicht mehr über dem Logo, sondern neben dem Burger-Menü */
  #header .header-inner .header-extras {
    position: absolute !important; right: 70px; top: 0; left: auto !important; float: none !important;
  }
  /* Detail-Bilder (Ski / Herz / Tür): mobil untereinander im Querformat,
     damit nichts abgeschnitten wird */
  .bh .bh-details { grid-template-columns: 1fr; gap: 14px; }
  .bh .bh-details figure { aspect-ratio: 16 / 10; }
  .bh .bh-details figcaption { font-size: 22px; padding: 30px 16px 14px; }
  /* Höhen-Badge mittig über dem Text, damit es die Vorzeile nicht überdeckt */
  .bh-band .bh-band-inner { padding-top: 150px; padding-bottom: 60px; }
  .bh-altitude { right: calc(50% - 52px); top: 26px; }
  /* Sommer/Winter-Panels: Text steht mobil über dem ganzen Bild – kräftigere Abdunklung */
  .bh-season::after {
    background: linear-gradient(to top, rgba(6,40,28,.88) 0%, rgba(6,40,28,.6) 60%, rgba(6,40,28,.45) 100%);
  }
}

/* ---------------------------------------------------------------------
   10. FOOTER (Programm-Footer): Linkfarbe + Google-Maps-Karte
   ------------------------------------------------------------------- */
#footer a, #footer.inverted a, #footer .widget-contact-us a, #footer.inverted .widget-contact-us a,
#footer .copyright-content a, #footer .copyright-text a {
  color: #d9f5e6 !important;      /* helles Mint auf dem goldenen Footer, Hover weiß */
  transition: color .25s;
}
#footer a:hover, #footer.inverted a:hover, #footer .copyright-content a:hover { color: #ffffff !important; }

/* Zeile über der Karte: "Hier finden Sie uns:" links, Instagram rechts */
.bh-map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
#footer .bh-map-title, #footer.inverted .bh-map-title {
  margin: 0; font-family: var(--bh-font-head); font-weight: 500; font-size: 26px; line-height: 1.1;
  color: #fff; text-transform: none;
}
#footer .bh-insta, #footer.inverted .bh-insta {
  display: inline-flex; align-items: center; gap: 8px; color: #d9f5e6 !important;
  font-family: var(--bh-font-body); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  transition: transform .3s var(--bh-ease), color .25s;
}
#footer .bh-insta img { width: 28px; height: 28px; border-radius: 7px; display: block; }
#footer .bh-insta:hover { color: #fff !important; transform: translateY(-2px); }
@media (max-width: 480px) { .bh-map-head { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* Partner-Links unter der Karte */
#footer .bh-footer-links { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
#footer .bh-footer-links li { margin: 0; }
#footer .bh-footer-links a, #footer.inverted .bh-footer-links a {
  font-family: var(--bh-font-body); font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: #d9f5e6 !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
#footer .bh-footer-links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bh-gold-soft); }
#footer .bh-footer-links a:hover { color: #fff !important; }

/* Karte: fester Rahmen, Platzhalter mit Nadel, iframe blendet ein, sobald geladen */
.bh-map {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; max-height: 360px;
  border-radius: var(--bh-radius-lg); overflow: hidden;
  background: var(--bh-cream); box-shadow: var(--bh-shadow-sm);
}
.bh-map-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity .6s ease;
}
.bh-map.bh-map-loaded .bh-map-frame { opacity: 1; }
.bh-map-placeholder {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; padding: 20px;
  color: var(--bh-slate-deep); font-family: var(--bh-font-body);
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(111,125,90,.18), transparent 40%),
    var(--bh-cream);
  transition: opacity .6s ease, visibility .6s;
}
.bh-map.bh-map-loaded .bh-map-placeholder { opacity: 0; visibility: hidden; }
.bh-map-pin {
  width: 54px; height: 54px; color: #c2463d;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  animation: bh-pin 2.4s ease-in-out infinite;
}
.bh-map.bh-map-failed .bh-map-pin { animation: none; }
@keyframes bh-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bh-map-placeholder strong { font-family: var(--bh-font-head); font-size: 24px; line-height: 1.1; margin-top: 6px; color: var(--bh-slate-deep); }
.bh-map-placeholder span { font-size: 14px; color: var(--bh-ink-soft); }
.bh-map-placeholder .bh-map-link {
  margin-top: 12px; display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: var(--bh-slate); color: #fff !important; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.bh-map-placeholder .bh-map-link:hover { background: var(--bh-slate-deep); color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .bh-map-pin { animation: none; } }
@media (max-width: 767px) { .bh-map { margin-top: 24px; } }

/* ---------------------------------------------------------------------
   11. ZIMMERSEITEN (Programm-Seite "zimmer-Appartements"): Zimmertext
   Markup: div.bh-room > h3 (+ span.bh-room-persons), p.bh-room-intro,
   p.bh-room-label, ul.bh-room-list. Die Bildergalerie darüber bekommt
   automatisch die Fotowand aus Abschnitt 7.
   ------------------------------------------------------------------- */
.bh-room {
  font-family: var(--bh-font-body); color: var(--bh-ink);
  background: var(--bh-paper); border-radius: var(--bh-radius-lg); border-top: 3px solid var(--bh-gold);
  padding: clamp(24px, 3vw, 40px); margin: 8px 0 28px; box-shadow: var(--bh-shadow-sm);
}
.bh-room p, .bh-room li { font-family: var(--bh-font-body); color: var(--bh-ink); }
.bh-room h3 {
  font-family: var(--bh-font-head); font-weight: 500; text-transform: none;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.1; color: var(--bh-slate-deep); margin: 0 0 14px;
}
.bh-room .bh-room-persons {
  display: block; margin-top: 6px;
  font-family: var(--bh-font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bh-gold);
}
.bh-room .bh-room-intro { font-size: 18px; line-height: 1.6; font-weight: 300; color: var(--bh-ink-soft); margin: 0 0 22px; }
.bh-room .bh-room-intro + .bh-room-text { margin-top: -12px; }   /* zweiter Absatz direkt nach dem Einleitungssatz */
.bh-room .bh-room-text { font-size: 16px; line-height: 1.65; color: var(--bh-ink); margin: 0 0 22px; }
.bh-room .bh-room-label { font-family: var(--bh-font-head); font-style: italic; font-size: 22px; color: var(--bh-wood); margin: 0 0 10px; }
.bh-room .bh-room-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 24px;
}
.bh-room .bh-room-list li {
  position: relative; margin: 0; padding: 8px 0 8px 30px; font-size: 16px;
  border-bottom: 1px solid var(--bh-line);
}
.bh-room .bh-room-list li::before {   /* Häkchen in Logo-Grün, reines CSS */
  content: ""; position: absolute; left: 4px; top: 13px; width: 9px; height: 14px;
  border: solid var(--bh-slate); border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* ---------------------------------------------------------------------
   12. ZIMMER-ÜBERSICHT (Programm-Seite "zimmer-appartements")
   Der Programm-Slider (Flickity, data-items=4) bleibt ein Slider,
   zeigt aber nur noch EIN Zimmer pro Bild: jede Zelle ist 100 % breit,
   das Zimmer liegt als Karte darin – Foto links, Text (bh-room aus
   Abschnitt 11) rechts, Button unten. Pfeile rund am Rand.
   Neue Zimmer reihen sich automatisch ein.
   ------------------------------------------------------------------- */
#page-content .rooms.carousel { height: auto !important; }
#page-content .rooms.carousel .flickity-viewport { position: relative; overflow: hidden; }
#page-content .rooms.carousel .flickity-slider { position: absolute !important; display: block; left: 0 !important; }
#page-content .rooms.carousel .polo-carousel-item {
  position: absolute !important; width: 100% !important; padding: 0 !important; left: auto;
}
/* Pfeile */
#page-content .rooms.carousel .flickity-button {
  display: flex !important; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; opacity: 1;
  background: rgba(255,255,255,.92); color: var(--bh-slate-deep);
  box-shadow: 0 10px 24px -14px rgba(43,42,38,.5);
  top: 36%; transform: translateY(-50%); transition: background .25s, color .25s;
}
#page-content .rooms.carousel .flickity-button:hover { background: var(--bh-slate); color: #fff; }
#page-content .rooms.carousel .flickity-button.previous { left: 16px; }
#page-content .rooms.carousel .flickity-button.next { right: 16px; }
#page-content .rooms.carousel .flickity-button svg { width: 18px; height: 18px; }
/* Karte: Foto links, Text rechts */
#page-content .rooms.carousel .room {
  display: grid; grid-template-columns: 1.05fr 1fr; height: auto; margin: 0;
  background: var(--bh-paper); border-radius: var(--bh-radius-lg); overflow: hidden; box-shadow: var(--bh-shadow-sm);
}
#page-content .rooms.carousel .room-image { position: relative; width: auto; margin: 0; border-radius: 0; min-height: 420px; height: 100%; overflow: hidden; }
#page-content .rooms.carousel .room-image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block;
  transition: transform 1.2s var(--bh-ease);
}
#page-content .rooms.carousel .room:hover .room-image img { transform: scale(1.04); opacity: 1; }
#page-content .rooms.carousel .room-details {
  position: static !important; transform: none !important; width: auto !important; max-width: none !important;
  opacity: 1 !important; visibility: visible !important; background: transparent !important;
  top: auto; left: auto; right: auto; bottom: auto; text-align: left;
  padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column;
}
#page-content .rooms.carousel .room-details > p:empty { display: none; }
/* Zimmertext in der Karte: keine eigene Kartenoptik */
#page-content .rooms.carousel .room .bh-room { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 18px; }
#page-content .rooms.carousel .bh-room h3 { font-size: clamp(28px, 2.6vw, 36px); margin-top: 0; }
#page-content .rooms.carousel .bh-room .bh-room-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 20px; }
#page-content .rooms.carousel .bh-room .bh-room-list li { padding: 5px 0 5px 26px; font-size: 15px; }
#page-content .rooms.carousel .bh-room .bh-room-list li::before { top: 9px; width: 8px; height: 12px; }
/* Button "weiter Informieren" wie die Buttons der Startseite */
#page-content .rooms.carousel .plan-button { margin-top: auto; }
#page-content .rooms.carousel .plan-button a.btn, #page-content .rooms.carousel .plan-button a.btn:visited {
  display: inline-flex !important; align-items: center; width: auto;
  padding: 12px 24px !important; border-radius: 999px !important;
  background: var(--bh-slate) !important; border: 1px solid var(--bh-slate) !important; color: #fff !important;
  font-family: var(--bh-font-body) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important;
  box-shadow: var(--bh-shadow-sm); transition: background .3s, transform .3s var(--bh-ease);
}
#page-content .rooms.carousel .plan-button a.btn:hover { background: var(--bh-slate-deep) !important; border-color: var(--bh-slate-deep) !important; transform: translateY(-2px); }
@media (max-width: 860px) {
  #page-content .rooms.carousel .room { grid-template-columns: 1fr; }
  #page-content .rooms.carousel .room-image { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  #page-content .rooms.carousel .flickity-button { top: 22%; width: 40px; height: 40px; }
}