:root{
  --bg:#0b0f14;
  --text:#121417;
  --muted:#5b6472;
  --card:#ffffff;
  --line:rgba(18,20,23,.10);
  --shadow:0 16px 50px rgba(0,0,0,.18);
  --radius:18px;
  --radius2:999px;
  --max:1200px;
}

/* =========================================================
   Alpenlodge UI fixes (safe patch)
   - Header consistent across all pages
   - Only ONE booking entrypoint (header button)
   - Hide redundant booking buttons (floating + hero)
   - Pull first content section into hero (cards sit on hero)
   - Booking overlay: sane size + visible iframe
   ========================================================= */

/* Header: use logo as the brand, hide duplicate wordmark text */
.site-header .brand .wordmark{ display:none !important; }
.site-header .brand img{ height:40px; width:auto; }

/* Remove redundant booking buttons (keep only header button) */
.floating-book, .mobile-book{ display:none !important; }

/* No extra hero buttons on ANY page (header button stays) */
.hero-actions{ display:none !important; }

/* Cards "on hero": first section overlaps hero bottom */
.hero{ position:relative; }
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.45) 100%);
}

/* The first section after the hero should sit "into" the hero */
.hero + .section{
  margin-top:-120px;
  position:relative;
  z-index:5;
}

/* Make the overlapped cards readable */
.hero + .section .card{
  box-shadow:0 14px 40px rgba(0,0,0,0.18);
}

/* Booking overlay: ensure iframe has height */
.booking-overlay{ position:fixed; inset:0; z-index:9999; display:none; }
.booking-overlay.is-open{ display:block; }
.booking-overlay .booking-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.booking-overlay .booking-panel{
  position:absolute;
  top:72px; /* below header */
  left:50%;
  transform:translateX(-50%);
  width:min(1100px, calc(100vw - 24px));
  height:calc(100vh - 92px);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,0.35);
}
.booking-overlay .booking-head{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.booking-overlay .booking-close{
  appearance:none;
  border:0;
  background:rgba(0,0,0,0.06);
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
}
.booking-overlay .booking-body{
  height:calc(100% - 52px);
}
#apartmentIframeAll{
  height:100%;
  min-height:520px;
}
#apartmentIframeAll iframe{
  width:100% !important;
  height:100% !important;
  min-height:520px !important;
  border:0 !important;
}

/* Mobile: use full-screen panel */
@media (max-width: 768px){
  .booking-overlay .booking-panel{
    top:0;
    left:0;
    transform:none;
    width:100vw;
    height:100vh;
    border-radius:0;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:36px;width:auto;display:block}
.brand .wordmark{font-weight:700;letter-spacing:.2px}
.main-nav{display:flex;justify-content:center;gap:22px;align-items:center}
.main-nav a{text-decoration:none;color:#1b1f24;font-weight:500;padding:8px 10px;border-radius:12px}
.main-nav a:hover{background:rgba(0,0,0,.05)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius2);text-decoration:none;
  padding:10px 16px;font-weight:700;border:1px solid transparent;
}
.btn-primary{background:#111;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn-primary:hover{background:#000}
.btn-ghost{border-color:var(--line);background:#fff}
.header-cta{display:flex;gap:10px;justify-content:flex-end}

.hero{
  position:relative;min-height:68vh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero video,.hero .hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero .hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18));
}
.hero .hero-content{
  position:relative;z-index:2;color:#fff;
  padding:96px 0 44px;
}
.hero h1{margin:0 0 10px;font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.5px}
.hero p{margin:0 0 18px;font-size:clamp(16px,1.2vw,18px);max-width:680px;opacity:.95}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.section{padding:58px 0}
.kicker{color:var(--muted);font-weight:700;letter-spacing:.2px;text-transform:uppercase;font-size:12px;margin-bottom:10px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted);line-height:1.5}
.card .meta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;color:#2a2f36}

.unit-list{display:grid;gap:14px}
.unit-item{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;border:1px solid var(--line);
  background:#fff;
}
.unit-item strong{font-size:16px}
.unit-item small{color:var(--muted)}
.unit-item a{text-decoration:none}

.footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:14px}
.floating-book{
  position:fixed;right:18px;bottom:18px;z-index:1200;
}
.floating-book a{box-shadow:var(--shadow)}
/* Mobile */
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px}
.drawer{
  position:fixed;inset:0;z-index:2000;display:none;
}
.drawer.open{display:block}
.drawer .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer .panel{
  position:absolute;right:0;top:0;height:100%;width:min(360px, 90vw);
  background:#fff;padding:16px;border-left:1px solid var(--line);
}
.drawer .panel a{display:block;padding:12px 10px;border-radius:12px;text-decoration:none}
.drawer .panel a:hover{background:rgba(0,0,0,.05)}
.mobile-book{
  display:none;
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1300;
}
.mobile-book a{width:100%}
@media (max-width: 900px){
  .main-nav{display:none}
  .burger{display:inline-flex;align-items:center;gap:8px}
  .header-inner{grid-template-columns:auto 1fr auto}
  .mobile-book{display:block}
  .floating-book{display:none}
  .hero{min-height:60vh}
}
.notice-file{
  display:none;
  background:#fff3cd;border:1px solid #ffeeba;color:#6b5a00;
  padding:12px 14px;border-radius:14px;margin:14px 0;
}

/* =========================
   Alpenlodge – Header polish (no path/name changes)
   ========================= */
:root{
  /* freundliches Blau-Grün */
  --accent: #0ea5a0;
  --accent-2: #22c55e;
}

/* Logo/Brand kompakt, keine Wortmarke */
.brand{gap:0;}
.brand img{height:34px;width:auto;display:block;}

/* Header: Navigation optisch sauber */
.site-header{background:rgba(255,255,255,0.92);backdrop-filter:saturate(160%) blur(10px);}
.main-nav a{font-weight:600;}
.main-nav a:hover{background:rgba(14,165,160,0.10);}
.main-nav a.is-active{background:rgba(14,165,160,0.16);border:1px solid rgba(14,165,160,0.25);}

/* Call-to-action Button in Blau/Grün */
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 0;
  box-shadow: 0 10px 26px rgba(14,165,160,0.22);
}
.btn-primary:hover{filter:brightness(0.97);transform:translateY(-1px);}

/* Redundante Buch-Buttons entfernen (nur Header bleibt) */
.floating-book, .mobile-book{display:none !important;}

/* Hero Text ins obere Viertel schieben (ohne HTML-Anpassung) */
.hero{align-items:flex-start !important;}
.hero .hero-content{padding:72px 0 0 !important;}

/* Cards/Teaser etwas kompakter – mehr 'above the fold' */
.cards{margin-top:-28px;}
.card{padding:18px;}
.card h3{margin:0 0 6px;}
.card p{margin:0 0 10px;}

/* Falls eine file://-Notice existiert: am Server unsichtbar (sicher, ohne JS/HTML) */
.notice-file{display:none;}

/* Keine zusätzlichen Buttons im Hero (auf ALLEN Seiten) */
.hero .hero-actions{display:none !important;}

/* Header: nur Logo als "Brand" (kein doppelter Schriftzug) */
.brand .wordmark{display:none !important;}
.brand img{height:34px; width:auto;}

/* Header Layout stabilisieren (wie Start) */
.site-header{position:sticky; top:0; z-index:1200; background:rgba(255,255,255,0.96); backdrop-filter:saturate(1.2) blur(8px);}
.site-header .header-inner{align-items:center;}

/* Erste Section (Unterkünfte / Content) halb in den Hero ziehen */
.hero + .section{position:relative; z-index:5; margin-top:-140px;}
@media (max-width: 980px){
  .hero + .section{margin-top:-110px;}
}
@media (max-width: 640px){
  .hero + .section{margin-top:-80px;}
}

/* Booking Overlay (unter Header, nicht full white) */
.booking-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(12,18,28,0.45);
  display:none;
}
.booking-overlay.is-open{display:block;}
.booking-panel{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:72px; /* unter Header */
  width:min(1100px, calc(100vw - 24px));
  height:calc(100vh - 88px);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.35);
}
.booking-panel header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.booking-panel header .title{font-weight:700;}
.booking-panel header .close{
  appearance:none;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.booking-body{height:calc(100% - 52px);}
.booking-body #apartmentIframeAll,
.booking-body iframe{
  width:100% !important;
  height:100% !important;
  min-height:520px;
  border:0;
}
@media (max-width: 640px){
  .booking-panel{top:64px;height:calc(100vh - 72px);border-radius:14px;}
}

/* =========================================================
   FIX: only ONE booking entry in header (match Startseite)
   - keep header CTA "Jetzt buchen"
   - hide any nav/drawer booking link that duplicates it
   ========================================================= */
.main-nav a[href*="buchen"], .main-nav a[href*="booking"]{
  display:none !important;
}
.drawer .panel a[href*="buchen"], .drawer .panel a[href*="booking"]{
  display:none !important;
}
/* ===== FORCE BOOKING OVERLAY DIRECTLY UNDER HEADER (UNIVERSAL) ===== */
:root { --al-header-h: 72px; } /* falls Header höher: z.B. 84px */

/* Header sicher sticky */
.site-header, .siteHeader { position: sticky !important; top:0 !important; z-index: 5000 !important; }

/* --- Variante A: v3 classes (.al-booking-*) --- */
.al-booking-stage{
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: calc(var(--al-header-h) + 10px) !important;
  padding-bottom: 16px !important;
}
.al-booking-panel{
  max-height: calc(100vh - var(--al-header-h) - 26px) !important;
}
.al-booking-body iframe{
  height: calc(100vh - var(--al-header-h) - 160px) !important;
  max-height: 760px !important;
}

/* --- Variante B: alte IDs (#alpenBooking...) --- */
#alpenBookingOverlay, #alpenBookingOverlay.is-open{
  display:block !important;
}
#alpenBookingPanel{
  position: fixed !important;
  top: calc(var(--al-header-h) + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1000px, calc(100vw - 28px)) !important;
  height: calc(100vh - var(--al-header-h) - 26px) !important;
}
#alpenBookingFrame{
  height: calc(100% - 44px) !important;
}

/* Mobile: unter Header fast fullscreen */
@media (max-width: 768px){
  :root { --al-header-h: 72px; }
  .al-booking-panel{ width: calc(100vw - 20px) !important; }
  #alpenBookingPanel{ width: calc(100vw - 20px) !important; left: 10px !important; transform:none !important; }
}
/* ===== BOOKING FIX: UNDER HEADER, NO OVERLAY ===== */

/* Overlay komplett neutralisieren */
.al-booking-overlay,
.al-booking-backdrop {
  position: static !important;
  inset: auto !important;
  background: none !important;
  backdrop-filter: none !important;
}

/* Stage = normaler Container */
.al-booking-stage{
  position: static !important;
  display: block !important;
  padding: 0 !important;
}

/* Panel wird Content-Block */
.al-booking-panel{
  position: relative !important;
  margin: 0 auto !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;

  width: min(1100px, calc(100% - 32px)) !important;
  max-height: none !important;

  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* Header im Panel optional ausblenden */
.al-booking-panel-header{
  display: none !important;
}

/* iframe natürlich hoch */
.al-booking-body iframe{
  height: auto !important;
  min-height: 140px !important;
  max-height: none !important;
}

/* Abstand direkt unter Header */
.site-header + .al-booking-overlay,
.site-header + .al-booking-panel{
  margin-top: 12px !important;
}

/* Mobile */
@media (max-width: 768px){
  .al-booking-panel{
    width: calc(100% - 20px) !important;
    border-radius: 14px;
  }
}
/* ===== BOOKING FIX: UNDER HEADER, NO OVERLAY ===== */

/* Overlay komplett neutralisieren */
.al-booking-overlay,
.al-booking-backdrop {
  position: static !important;
  inset: auto !important;
  background: none !important;
  backdrop-filter: none !important;
}

/* Stage = normaler Container */
.al-booking-stage{
  position: static !important;
  display: block !important;
  padding: 0 !important;
}

/* Panel wird Content-Block */
.al-booking-panel{
  position: relative !important;
  margin: 0 auto !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;

  width: min(1100px, calc(100% - 32px)) !important;
  max-height: none !important;

  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* Header im Panel optional ausblenden */
.al-booking-panel-header{
  display: none !important;
}

/* iframe natürlich hoch */
.al-booking-body iframe{
  height: auto !important;
  min-height: 140px !important;
  max-height: none !important;
}

/* Abstand direkt unter Header */
.site-header + .al-booking-overlay,
.site-header + .al-booking-panel{
  margin-top: 12px !important;
}

/* Mobile */
@media (max-width: 768px){
  .al-booking-panel{
    width: calc(100% - 20px) !important;
    border-radius: 14px;
  }
}


/* --- Patch v14: Aktivitäten & Highlights --- */

.hero-activities{
  margin-top: 22px;
  padding: 14px 16px;
  max-width: 860px;
  border-radius: 14px;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.hero-activities h3{
  margin: 0 0 6px 0;
  font-size: 18px;
  color: #fff;
}
.hero-activities-lead{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,.9);
}
.hero-activities-links a{
  display: inline-block;
  margin-right: 14px;
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}
.unit-item-link strong{ text-decoration: underline; }


/* Unit page: booking text link under hero description */
.hero-book-link{ margin-top: 10px; }
.textlink-book{
  display:inline-block;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(0,0,0,.35);
  padding-bottom: 2px;
}
.textlink-book:hover{ border-bottom-color: rgba(0,0,0,.75); }

/* === MOBILE HERO & UNTERKÜNFTE OPTIMIERUNG 2026-01-05 ==================== */
@media (max-width: 768px){
  /* Hero-Text etwas kompakter und weiter nach unten */
  .hero .hero-content{
    padding:64px 16px 40px !important;
  }
  .hero h1{
    font-size:28px !important;
    line-height:1.18 !important;
  }
  .hero p{
    font-size:16px !important;
    line-height:1.4 !important;
  }

  /* Unterkünfte untereinander statt nebeneinander */
  #unterkuenfte{
    padding-top: 28px;
  }
  .grid-3{
    grid-template-columns:1fr !important;
    row-gap:22px;
  }
}


/* === HERO seasons (emojis) + overlap fix (merged) === */
/* --- 1) Stop Unterkünfte section overlapping the hero --- */
#unterkuenfte.section{ margin-top: 0 !important; }

/* --- 2) Season tiles: transparent + readable + emojis --- */
.hero-activities-links{display:grid;grid-template-columns:repeat(4,auto);gap:10px;align-items:center}
.hero-activities-links a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,0.55);background:transparent !important;color:#fff !important;line-height:1;box-shadow:none !important;text-shadow:0 1px 2px rgba(0,0,0,0.55)}
.hero-activities-links a::before{display:inline-block;content:"";}
.hero-activities-links a[href*="winter"]::before{content:"❄️";}
.hero-activities-links a[href*="fruehling"]::before,
.hero-activities-links a[href*="fr%C3%BChling"]::before{content:"🌸";}
.hero-activities-links a[href*="sommer"]::before{content:"☀️";}
.hero-activities-links a[href*="herbst"]::before{content:"🍂";}
.hero-activities-links a:active{transform:scale(.98);}

/* Mobile: 2x2 big tiles */
@media (max-width: 680px){
  .hero-activities-links{grid-template-columns:1fr 1fr;gap:12px}
  .hero-activities-links a{min-height:54px;width:100%;}
}


/* === HEADER: unified desktop, mobile compact === */
/* Desktop: header identical everywhere (no change needed) */

/* Mobile header behavior:
   - show location, phone, email
   - show burger menu
   - hide secondary/nav clutter
*/
@media (max-width: 860px){
  /* ensure header layout stays consistent */
  header .header-inner,
  header .topbar{
    display:flex;
    align-items:center;
  }

  /* show essentials */
  .header-contact,
  .header-contact a{
    display:inline-flex !important;
    gap:6px;
    font-size:0.9rem;
  }

  /* burger menu visible */
  .menu-toggle,
  .nav-toggle,
  .hamburger{
    display:flex !important;
  }

  /* hide desktop nav links but keep menu toggle */
  nav.primary-nav ul,
  nav.primary-nav .nav-links{
    display:none !important;
  }

  /* spacing */
  header{
    padding:8px 12px;
  }
}


/* === FINAL OVERRIDES (2026-01-05): seasons emojis tiles + header mobile + units mobile + overlap === */

/* 1) Prevent Unterkünfte section from overlapping hero */
#unterkuenfte.section{ margin-top: 0 !important; }

/* 2) Seasons in hero: emoji tiles (desktop + mobile) */
.hero-activities-links{
  display: grid !important;
  grid-template-columns: repeat(4, auto) !important;
  gap: 10px !important;
  align-items: center !important;
}
.hero-activities-links a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;
  border-radius: 14px !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.55) !important;

  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
  margin-right: 0 !important;
}
.hero-activities-links a::before{
  content: "" !important;
  display: inline-block !important;
}
.hero-activities-links a[href*="winter"]::before{content:"❄️" !important;}
.hero-activities-links a[href*="fruehling"]::before,
.hero-activities-links a[href*="fr%C3%BChling"]::before{content:"🌸" !important;}
.hero-activities-links a[href*="sommer"]::before{content:"☀️" !important;}
.hero-activities-links a[href*="herbst"]::before{content:"🍂" !important;}
.hero-activities-links a:active{ transform: scale(.98); }

/* Mobile: 2x2 layout, big tappable */
@media (max-width: 680px){
  .hero-activities-links{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .hero-activities-links a{
    width: 100% !important;
    min-height: 54px !important;
  }
}

/* 3) Header: contact a bit smaller everywhere; mobile shows contact + burger */
.header-contact .header-link{ font-size: 0.92rem !important; }
.header-contact{ gap: 10px !important; }

@media (max-width: 860px){
  .header-contact .header-link{ font-size: 0.80rem !important; }
  .header-contact{ gap: 8px !important; }

  /* burger/menu toggle must be visible */
  .burger,
  .menu-toggle,
  .nav-toggle,
  .hamburger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* hide big desktop nav list on mobile (drawer stays) */
  .main-nav,
  nav.primary-nav ul,
  nav.primary-nav .nav-links{
    display: none !important;
  }
}

/* 4) Unit pages: on mobile slider + floorplan must STACK */
@media (max-width: 860px){
  .grid-2{
    grid-template-columns: 1fr !important;
  }
}


/* === FIX (2026-01-05): header contact wrapping consistent on all pages === */

/* Make header contact behave the same everywhere (index + all subpages) */
.header-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important; /* allow nice wrap */
}

/* Contact line: wrap nicely and never get hidden */
.header-contact{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.header-contact .header-link{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap; /* keep each item intact */
  font-size:0.92rem !important;
}

/* Keep only ONE booking button (but do NOT hide contact!) */
.header-cta .btn[href*="buchen"],
.header-cta .btn-primary[href*="buchen"]{
  display:inline-flex !important;
}
/* If there are multiple buttons inside header-cta, hide only extra buttons (not contact) */
.header-cta .btn + .btn{
  display:none !important;
}

/* Mobile: compact contact, burger visible */
@media (max-width: 860px){
  .header-contact .header-link{ font-size:0.80rem !important; }
  .header-cta{ gap:8px !important; }
}


/* === HEADER & DRAWER FINAL FIX: right aligned + topmost === */
/* --- HEADER: always right aligned --- */
.site-header,
header{
  position: relative;
}

.site-header .header-inner,
header .header-inner,
.site-header .header-cta,
header .header-cta{
  display:flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Force contact + burger to the right */
.header-contact{
  margin-left:auto !important;
}
.site-header .burger,
.menu-toggle,
.nav-toggle,
.hamburger{
  margin-left: 8px !important;
}

/* --- DRAWER: ALWAYS TOPMOST --- */
.drawer{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2147483647 !important;
}
.drawer .panel{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: min(320px, 86vw) !important;
  z-index: 2147483647 !important;
}
.drawer .backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
}

/* Prevent background interaction */
html.drawer-open, body.drawer-open{
  overflow: hidden !important;
}


/* === HERO SEASONS ROOT FIX (stable) === */

.hero-seasons{
  display:flex;
  gap:12px;
  margin-top:16px;
}
.hero-seasons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.55);
  background:transparent;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
}
.hero-seasons a[href*="winter"]::before{content:"❄️";}
.hero-seasons a[href*="fruehling"]::before{content:"🌸";}
.hero-seasons a[href*="sommer"]::before{content:"☀️";}
.hero-seasons a[href*="herbst"]::before{content:"🍂";}

@media (max-width:680px){
  .hero-seasons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .hero-seasons a{
    width:100%;
    min-height:54px;
  }
}


/* === HERO center (index only) + header email removed in HTML === */

/* Center hero content ONLY on the start page (index.html adds .hero-center) */
.hero.hero-center{
  text-align: center;
}
.hero.hero-center .hero-seasons{
  justify-content: center;
}
/* If hero uses a content wrapper, center it nicely */
.hero.hero-center .hero-content,
.hero.hero-center .hero-inner,
.hero.hero-center .container{
  text-align: center;
}


/* === HOME HERO OVERLAY CENTER (match apartments) === */

/* Startseite: Hero-Content als zentrierter Overlay-Block wie bei Apartments */
.hero .hero-overlay{
  display:flex;
  justify-content:center;
  width:100%;
}
.hero .hero-overlay .hero-content{
  width:100%;
  max-width:1100px;
}


/* === HOME: seasons as apartment-style chips === */

.hero-unitlist-desc{
  margin-top:10px;
  opacity:0.9;
}


/* === HOME: seasons pill buttons (restore) === */

/* Startseite: Hero-Text zentriert wie Apartments */
body.home .hero .hero-content{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
body.home .hero .hero-content .kicker,
body.home .hero .hero-content h1,
body.home .hero .hero-content p{
  text-align:center;
}
body.home .hero .hero-cta{
  justify-content:center;
}

/* Aktivitäten-Box (wie vorher schön) */
body.home .hero .hero-activities{
  max-width:1100px;
  margin: 18px auto 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
body.home .hero .hero-activities h2,
body.home .hero .hero-activities p{
  text-align:left;
  margin-left:0;
  margin-right:0;
}

/* Jahreszeiten als Pill-Buttons */
body.home .hero .hero-activities-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:10px;
}
body.home .hero .hero-activities-links .season-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  line-height:1;
}
body.home .hero .hero-activities-links .season-pill:hover{
  background: rgba(255,255,255,0.10);
}
/* FIX: Burger rechts/topmost (mobile) */
@media (max-width: 980px){
  header.site-header .header-inner{
    position: relative;
  }

  header.site-header .burger{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3000;          /* wirklich ganz oben */
    padding: 8px 10px;      /* nicht so riesig */
    font-size: 14px;
    border-radius: 12px;
  }

  /* Platz rechts schaffen, damit Kontakt-Zeile nicht unter/über Burger läuft */
  header.site-header .header-cta{
    padding-right: 90px;
  }
}