/* ============================================
   DESIGN TOKENS — Egon Hotel
   Speisekarten-Brand · Marineblau · Gold · Weinrot
   ============================================ */
:root {
  /* Colors — Hanse-Navy mk2: einen Tick näher am Logo-Blau #1070B8, etwas heller
     freigegeben 19.05.2026 · Louise Klitgaard */
  --c-primary: #1B4F82;          /* Hanse-Navy (Standard-Text Innenseiten) */
  --c-primary-dark: #123C68;     /* Tiefes Navy für dunkle Sections */
  --c-primary-light: #376EA5;    /* Heller Hover-Ton */
  --c-royal: #245C95;            /* Royalblau (Cover, Akzentflächen) */
  --c-accent: #DDB13C;           /* Gold-Gelb — näher an Logo-Krone, freigegeben 08.06.2026 (vorher #C9A961) */
  --c-accent-soft: #E8CC80;      /* Soft-Gold (gelber) */
  --c-highlight: #8B2A2F;        /* Weinrot/Bordeaux (Produktnamen, Akzent-Typo) */
  --c-highlight-soft: #A53B40;
  --c-sand: #EFE7D5;             /* Sand-Creme (wärmer) */
  --c-sand-deep: #E0D5BD;
  --c-cream: #F8F3E8;            /* Creme (Speisekarte Innenseiten) */
  --c-ink: #1B4F82;              /* Body = Hanse-Navy */
  --c-ink-soft: #58709E;         /* Sekundärtext */
  --c-line: #DBD3BD;             /* Border-Linien (warm) */
  --c-white: #FFFFFF;
  --c-success: #2D7D5A;
  --c-danger: #B23A3A;

  /* Typography — direkt aus der Egon Lounge Speisekarte */
  --f-display: "Barlow Condensed", "Oswald", "Helvetica Neue Condensed", sans-serif;
  --f-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-serif: var(--f-display);  /* Legacy alias */

  /* Spacing scale (8px) */
  --s-1: 0.5rem;   --s-2: 1rem;
  --s-3: 1.5rem;   --s-4: 2rem;
  --s-5: 3rem;     --s-6: 4rem;
  --s-7: 6rem;     --s-8: 8rem;

  /* Layout */
  --max-w: 1280px;
  --max-w-text: 720px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(18, 60, 104, 0.07), 0 1px 3px rgba(18, 60, 104, 0.05);
  --shadow-md: 0 4px 12px rgba(18, 60, 104, 0.09), 0 2px 4px rgba(18, 60, 104, 0.05);
  --shadow-lg: 0 12px 40px rgba(18, 60, 104, 0.14), 0 4px 12px rgba(18, 60, 104, 0.07);
  --shadow-xl: 0 24px 60px rgba(18, 60, 104, 0.20);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 240ms;
  --dur-slow: 400ms;

  /* Focus — sichtbarer Tastatur-Fokus (WCAG 2.4.7). Gold kontrastiert auf Navy/
     Foto/dunklen Sektionen + auf weissen/Navy-Buttons (die wichtigsten Controls). */
  --focus-ring-color: var(--c-accent);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id], [id="booking"], [id="kontakt"] { scroll-margin-top: 96px; }
body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-primary-light); }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
input, textarea, select { font: inherit; }

/* Globaler, einheitlicher Tastatur-Fokus (WCAG 2.4.7). :where() = Specificity 0,
   damit Komponenten-Stile bei Bedarf gewinnen. Nur fuer Tastatur (:focus-visible),
   nicht bei Maus-Klick. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip-Link (WCAG 2.4.1): erstes fokussierbares Element, springt zum Hauptinhalt.
   Off-screen bis Tastatur-Fokus. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 4000;
  background: var(--c-primary-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 8px; outline: 3px solid var(--c-accent); outline-offset: 2px; }
/* main als Block (ältere Browser) */
main { display: block; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   TYPOGRAPHY — Speisekarten-Brand
   Barlow Condensed (Display) + Montserrat (Body)
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.015em;
}
h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.025em;
}
h4 {
  font-size: 1rem;
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
p {
  color: var(--c-ink-soft);
  max-width: 65ch;
  font-weight: 400;
  line-height: 1.65;
}
.eyebrow {
  /* 03.07.2026 Meeting: dicker + eine Stufe größer — ältere Zielgruppe,
     dünne Overlines waren auf vielen Screens schwer lesbar */
  font-family: var(--f-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-2);
}
/* Eyebrow auf dunklem Hintergrund */
.usp-head .eyebrow,
.panorama .eyebrow {
  color: var(--c-cream);
  opacity: 0.85;
}
.final-cta .eyebrow {
  color: var(--c-accent);
  opacity: 1;
  font-weight: 600;
  letter-spacing: 0.22em;
}
/* Egons Empfehlung — mit Krone, Gold-Akzent */
.eyebrow-egon {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--c-accent) !important;
  opacity: 1 !important;
  letter-spacing: 0.22em;
  font-weight: 500;
}
.eyebrow-egon img {
  width: 22px;
  height: 19px;
  display: inline-block;
  filter: drop-shadow(0 3px 6px rgba(201, 169, 97, 0.4));
  animation: crownFloat 4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ============================================
   LAYOUT HELPERS
   ============================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-3); }
/* 03.07.2026 Meeting: Abstände zwischen Sektionen kompakter (vorher 6/8rem) */
/* 03.07.2026: Sektionsabstände nochmals enger (Kundenwunsch: näher, aber nicht direkt aneinander) */
.section { padding: 3.5rem 0; }
@media (min-width: 768px) { .section { padding: 4.75rem 0; } }
.section-tight { padding: var(--s-5) 0; }
.text-center { text-align: center; }
.section-head {
  max-width: 720px;
  margin: 0 auto var(--s-5);
  text-align: center;
}
.section-head p { margin: var(--s-2) auto 0; }
/* text-wrap: pretty verhindert "verwaiste" Einzelwörter in der letzten Zeile (Untertitel/Fließtext). */
.section-head p,
.panorama-text p,
.renov-strip-text p { text-wrap: pretty; }
@media (max-width: 600px) {
  /* Kein zentrierter Text auf Mobile (Kundenwunsch) → Section-Heads & Panorama linksbündig,
     und die erzwungenen Desktop-<br> in den Untertiteln droppen, damit nichts abgehackt umbricht. */
  .section-head { text-align: left; }
  .section-head p { margin-left: 0; margin-right: 0; }
  .panorama-text { text-align: left; }
  .section-head p br,
  .panorama-text p br { display: none; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 28px;
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  transition: all var(--dur) var(--ease);
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 1px 3px rgba(18, 60, 104, 0.18), 0 4px 12px rgba(18, 60, 104, 0.14);
}
.btn-primary:hover {
  background: var(--c-primary-dark);
  color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(18, 60, 104, 0.32);
}
.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
}
.btn-outline:hover {
  background: var(--c-primary);
  color: var(--c-white);
}
.btn-cream {
  background: var(--c-cream);
  color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(18, 60, 104, 0.18), 0 4px 12px rgba(18, 60, 104, 0.14);
}
.btn-cream:hover {
  background: var(--c-white);
  color: var(--c-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(18, 60, 104, 0.32);
}
.btn-ghost {
  background: transparent;
  color: var(--c-cream);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn-ghost:hover {
  background: var(--c-cream);
  color: var(--c-primary);
  border-color: var(--c-cream);
}
.btn-white {
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(18, 60, 104, 0.18), 0 4px 12px rgba(18, 60, 104, 0.12);
}
.btn-white:hover {
  background: var(--c-cream);
  color: var(--c-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(18, 60, 104, 0.28);
}

/* ============================================
   NAVIGATION
   ============================================ */
.topbar {
  /* Hellere Tonalität · Upstalsboom-inspiriert · weniger visuelles Gewicht */
  /* Korrektur: Kontaktleiste bleibt immer oben sichtbar (sticky) */
  position: sticky;
  top: 0;
  z-index: 99;
  background: #FBF8F3;
  color: var(--c-primary-dark);
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(18, 60, 104, 0.08);
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.topbar-info { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-primary-dark);
  opacity: 0.78;
  transition: opacity var(--dur) var(--ease);
  white-space: nowrap;
}
.topbar-link svg { color: rgba(18, 60, 104, 0.55); flex-shrink: 0; }
a.topbar-link:hover { color: var(--c-primary); opacity: 1; }
.topbar-lang { display: flex; gap: 4px; flex-shrink: 0; }
.topbar-lang button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-primary-dark);
  opacity: 0.55;
  padding: 4px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topbar-lang button.active,
.topbar-lang button:hover { opacity: 1; color: var(--c-primary); }
.topbar-lang .flag {
  width: 16px;
  height: 11px;
  display: block;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(18, 60, 104, 0.12);
  flex-shrink: 0;
  overflow: hidden;
}

@media (max-width: 960px) {
  .topbar-address { display: none; }
}
@media (max-width: 640px) {
  .topbar-email { display: none; }
}
/* Sprachschalter auf Mobile etwas kompakter, Labels bleiben aber lesbar */
@media (max-width: 640px) {
  .topbar-lang button { padding: 4px 6px; gap: 5px; font-size: 0.75rem; }
  .topbar-inner { gap: var(--s-2); }
}
/* Erst auf wirklich winzigen Screens (≤340 px, also iPhone SE 1. Gen) Labels verstecken */
@media (max-width: 340px) {
  .topbar-lang button { font-size: 0; padding: 4px 5px; gap: 0; }
}

.nav {
  position: sticky;
  /* Korrektur: Nav klebt direkt unter der sticky Kontaktleiste */
  top: var(--topbar-h, 2.5rem);
  z-index: 100;
  /* Weicher Fade nach unten · vermeidet harten Kasten hinter dem überhängenden Logo */
  background: linear-gradient(
    to bottom,
    rgba(251, 248, 243, 0.97) 0%,
    rgba(251, 248, 243, 0.94) 78%,
    rgba(251, 248, 243, 0) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
  box-shadow: 0 6px 18px rgba(18, 60, 104, 0.05);
  transition: all var(--dur) var(--ease);
}
.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--s-2) 0;
  gap: var(--s-3);
  padding-left: 226px;
  min-height: 92px;
  transition: padding-left 0.4s var(--ease);
}
.logo {
  /* Am oberen Nav-Rand verankert · Überhang nach unten. Schrumpft beim Scrollen (.nav.scrolled). */
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 3;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
.logo-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--c-cream);
  box-shadow: 0 14px 36px rgba(18, 60, 104, 0.28), 0 3px 10px rgba(18, 60, 104, 0.14);
  background: var(--c-cream);
  transition: transform 700ms var(--ease-out), box-shadow var(--dur) var(--ease);
  animation: logoEnter 900ms var(--ease-out) both;
}
.logo:hover .logo-img {
  transform: rotate(-8deg) scale(1.04);
  box-shadow: 0 20px 48px rgba(18, 60, 104, 0.38), 0 6px 14px rgba(18, 60, 104, 0.18);
}
@media (max-width: 960px) {
  .nav-inner { padding-left: 142px; min-height: 76px; }
  .logo { width: 128px; height: 128px; }
}
@media (max-width: 640px) {
  .nav-inner { padding-left: 122px; min-height: 64px; }
  .logo { width: 110px; height: 110px; left: 14px; top: 50%; transform: translateY(-50%); }
  .logo-img { border-width: 3px; }
}
@media (max-width: 420px) {
  .nav-inner { padding-left: 104px; min-height: 56px; }
  .logo { width: 94px; height: 94px; left: 12px; top: 50%; transform: translateY(-50%); }
}
@keyframes logoEnter {
  from { opacity: 0; transform: rotate(-180deg) scale(0.7); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

.nav-links {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ink);
  position: relative;
  padding: 0.5rem 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: flex; gap: var(--s-1); align-items: center; }

/* Drawer-spezifische Elemente · auf Desktop unsichtbar */
.nav-drawer-close,
.nav-drawer-brand,
.nav-drawer-footer {
  display: none;
}
/* Links-Wrapper: auf Desktop neutral (li bleiben direkte Flex-Kinder der .nav-links),
   im Drawer (≤960px) wird er zum 2-Spalten-Grid. */
.nav-drawer-links { display: contents; }
.nav-drawer-offers { display: none; }

/* Mobile menu · Hamburger-Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 102;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-primary);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease), background 0.2s var(--ease);
  transform-origin: center;
}
/* Animation: Hamburger → X */
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop hinter dem Drawer */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18, 60, 104, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  cursor: pointer;
}
.nav-backdrop.is-visible {
  display: block;
  opacity: 1;
}

@media (max-width: 960px) {
  /* Wichtig: backdrop-filter auf .nav entfernen, damit position:fixed
     im Drawer relativ zum Viewport (nicht zur Nav) positioniert wird. */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(251, 248, 243, 0.98);
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 300px;
    max-width: 82vw;
    height: 100vh;
    height: 100dvh; /* dynamische Viewport-Höhe für Mobile */
    background: var(--c-cream);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.36s var(--ease-out);
    padding: 80px 0 var(--s-4);
    box-shadow: -24px 0 60px rgba(18, 60, 104, 0.22);
    z-index: 101;
    overflow-y: auto;
    list-style: none;
    margin: 0;
  }
  .nav-links.active { transform: translateX(0); }

  /* Close-Button im Drawer (X oben rechts) */
  .nav-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--c-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
  }
  .nav-drawer-close:hover {
    background: rgba(18, 60, 104, 0.06);
    color: var(--c-accent);
  }

  /* Drawer-Padding & Layout an neue Struktur anpassen */
  .nav-links {
    padding: 0 !important;
  }

  /* Brand-Block oben im Drawer (Logo + Name) */
  .nav-drawer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(18, 60, 104, 0.08);
    background: var(--c-cream);
  }
  .nav-drawer-brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-primary);
    flex-shrink: 0;
  }
  .nav-drawer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .nav-drawer-brand-text strong {
    font-family: var(--f-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--c-primary);
    text-transform: uppercase;
  }
  .nav-drawer-brand-text span {
    font-family: var(--f-sans);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Footer-Block unten im Drawer */
  .nav-drawer-footer {
    margin-top: auto;
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(18, 60, 104, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(180deg, rgba(248, 243, 232, 0) 0%, rgba(238, 230, 213, 0.4) 100%);
  }

  /* Primary CTA — höhere Spezifität, damit .nav-links a nicht überschreibt */
  .nav-links .nav-drawer-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--c-primary) !important;
    color: var(--c-cream) !important;
    padding: 14px 20px !important;
    border-radius: 100px;
    font-family: var(--f-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--c-accent) !important;
    border-left: 1px solid var(--c-accent) !important;
    transition: background 0.2s ease, transform 0.15s ease;
    box-shadow: 0 8px 22px rgba(18, 60, 104, 0.22);
    width: 100%;
  }
  .nav-links .nav-drawer-cta:hover {
    background: var(--c-primary-dark) !important;
    color: var(--c-cream) !important;
    transform: translateY(-1px);
    padding: 14px 20px !important;
  }
  .nav-links .nav-drawer-cta svg { color: var(--c-accent); }

  /* Kontakt-Block — höhere Spezifität */
  .nav-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-links .nav-drawer-contact a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 4px !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: var(--c-ink) !important;
    text-decoration: none;
    border: none !important;
    border-left: none !important;
    transition: color 0.2s ease;
    background: none !important;
    text-transform: none;
    letter-spacing: 0.01em;
  }
  .nav-links .nav-drawer-contact a:hover {
    color: var(--c-primary) !important;
    background: none !important;
    padding: 8px 4px !important;
  }
  .nav-links .nav-drawer-contact a svg {
    color: var(--c-accent);
    flex-shrink: 0;
  }
  .nav-links .nav-drawer-contact a span { line-height: 1.3; }

  /* Sprache-Switcher */
  .nav-drawer-lang {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(18, 60, 104, 0.05);
    border-radius: 100px;
  }
  .nav-drawer-lang button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 10px;
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--c-ink-soft);
    cursor: pointer;
    border-radius: 100px;
    transition: all 0.2s ease;
  }
  .nav-drawer-lang button:hover { color: var(--c-primary); }
  .nav-drawer-lang button.is-active {
    background: var(--c-primary);
    color: var(--c-cream);
    box-shadow: 0 2px 8px rgba(18, 60, 104, 0.18);
  }

  /* Rating-Box */
  .nav-drawer-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px;
    background: rgba(201, 169, 97, 0.07);
    border: 1px solid rgba(201, 169, 97, 0.18);
    border-radius: 12px;
    text-align: center;
  }
  .nav-drawer-rating-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .nav-drawer-rating-head strong {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1;
  }
  .nav-drawer-rating-head strong small {
    font-size: 0.8rem;
    color: var(--c-ink-soft);
    font-weight: 500;
    margin-left: 2px;
  }
  .nav-drawer-rating-stars {
    color: var(--c-accent);
    font-size: 0.95rem;
    letter-spacing: 2px;
  }
  .nav-drawer-rating-stars em {
    opacity: 0.35;
    font-style: normal;
  }
  .nav-drawer-rating-meta {
    font-size: 0.7rem;
    color: var(--c-ink-soft);
    letter-spacing: 0.04em;
  }

  /* Menü-Items im Drawer */
  .nav-links li {
    display: block;
    width: 100%;
    list-style: none;
  }
  .nav-links a {
    font-family: var(--f-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--c-primary);
    padding: 16px 28px;
    display: block;
    width: 100%;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  }
  .nav-links a::after { display: none; }
  .nav-links a:hover {
    color: var(--c-accent);
    background: rgba(201, 169, 97, 0.06);
    padding-left: 32px;
  }
  .nav-links a.nav-active {
    color: var(--c-accent);
    border-left-color: var(--c-accent);
    background: rgba(201, 169, 97, 0.08);
    font-weight: 700;
  }

  /* ===== Menü-Links als 2-Spalten-Grid · Home oben über die volle Breite ===== */
  .nav-drawer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(18, 60, 104, 0.08);
  }
  .nav-drawer-links > li { border-bottom: 1px solid rgba(18, 60, 104, 0.08); }
  .nav-drawer-links > li:nth-child(2n) { border-right: 1px solid rgba(18, 60, 104, 0.08); }
  .nav-drawer-links > li:first-child { grid-column: 1 / -1; border-right: none; }
  .nav-links .nav-drawer-links a {
    text-align: center;
    padding: 20px 10px;
    border-left: none;
    font-size: 1rem;
  }
  .nav-links .nav-drawer-links a:hover { padding-left: 10px; background: rgba(201, 169, 97, 0.08); }
  .nav-links .nav-drawer-links a.nav-active { border-left: none; }

  /* ===== Sekundär-CTA „Angebote" · direkt unter „Direkt buchen" ===== */
  .nav-links .nav-drawer-offers {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px !important;
    border-radius: 100px;
    background: var(--c-cream) !important;
    color: var(--c-primary) !important;
    border: 1.5px solid var(--c-primary) !important;
    font-family: var(--f-sans) !important;
    font-size: 0.74rem !important;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-links .nav-drawer-offers:hover {
    background: var(--c-primary) !important;
    color: var(--c-cream) !important;
    padding-left: 20px !important;
  }

  /* Body-Scroll-Lock wenn Menü offen */
  body.menu-open { overflow: hidden; }

  /* Sichtbarkeit Toggle + Nav-CTAs */
  .menu-toggle { display: flex; }
  .nav-cta .btn { display: none; }
  .nav-cta .btn-primary { display: inline-flex; padding: 10px 18px; font-size: 0.875rem; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 90vh;
  min-height: 90dvh;
  display: flex;
  align-items: center;
  color: var(--c-cream);
  /* horizontal weiter clippen (sonst ~9px H-Scroll durch Hero-Deko), aber vertikal sichtbar lassen,
     damit das Gäste-Popover nach unten ÜBER die nächste Section ragen darf statt abgeschnitten zu werden */
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

/* ============================================
   FOTO-LIGHTBOX · klickbare Bilder in Galerien
   ============================================ */
.gastro-gallery img,
.gastro-thumb img,
.gastro-gallery-main img {
  cursor: zoom-in;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8, 22, 40, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  background: var(--c-primary-dark);
  cursor: default;
}
.lightbox-caption {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(248, 243, 232, 0.85);
  text-align: center;
  max-width: 720px;
  margin: 0;
  line-height: 1.4;
}
.lightbox-counter {
  position: absolute;
  top: -42px;
  left: 0;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(248, 243, 232, 0.65);
}
.lightbox-btn {
  position: fixed;
  background: rgba(248, 243, 232, 0.12);
  border: 1px solid rgba(248, 243, 232, 0.25);
  color: var(--c-cream);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  font-family: var(--f-sans);
  transition: background 200ms ease, transform 200ms ease;
  backdrop-filter: blur(8px);
}
.lightbox-btn:hover {
  background: var(--c-accent);
  color: var(--c-primary);
  border-color: var(--c-accent);
  transform: scale(1.05);
}
.lightbox-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.lightbox-close {
  top: 24px;
  right: 24px;
}
.lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox.is-single .lightbox-prev,
.lightbox.is-single .lightbox-next { display: none; }
body.lightbox-active { overflow: hidden; }

@media (max-width: 640px) {
  .lightbox-btn { width: 40px; height: 40px; font-size: 1.3rem; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ============================================
   PANORAMAZIMMER SLIDER · Foto-Carousel mit Pfeilen
   ============================================ */
.panorama-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.panorama-slider-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--c-primary-dark);
}
.panorama-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 380ms var(--ease);
}
.panorama-slide.is-active { opacity: 1; }

.panorama-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  z-index: 2;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.panorama-arrow:hover {
  background: var(--c-accent);
  color: var(--c-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.panorama-arrow-prev { left: 14px; }
.panorama-arrow-next { right: 14px; }
.panorama-arrow:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.panorama-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(8, 22, 40, 0.5);
  border-radius: 100px;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.panorama-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(248, 243, 232, 0.45);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.panorama-dot.is-active {
  background: var(--c-accent);
  transform: scale(1.25);
}

/* ============================================
   SPEISEN-HIGHLIGHTS · 6-card grid
   ============================================ */
.speisen-section { padding: clamp(46px, 5.6vw, 76px) 0; }
.speisen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 16px;
}
@media (max-width: 860px) { .speisen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .speisen-grid { grid-template-columns: 1fr; } }
.speisen-card {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-accent);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.speisen-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.speisen-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: var(--s-3);
}
.speisen-card-icon svg { width: 28px; height: 28px; }
.speisen-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 8px;
}
.speisen-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-3);
  flex-grow: 1;
}
.speisen-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed rgba(18, 60, 104, 0.12);
  padding-top: 12px;
}
.speisen-tag {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.tag-veg     { background: rgba(45, 125, 90, 0.12);  color: #1F5A40; }
.tag-vegan   { background: rgba(45, 125, 90, 0.18);  color: #1F5A40; }
.tag-classic { background: rgba(201, 169, 97, 0.16); color: #8a6f2b; }
.tag-local   { background: rgba(18, 60, 104, 0.10);  color: var(--c-primary); }
.speisen-price {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-primary); /* WCAG: Gold auf Creme war 1,82:1 — Navy #1B4F82 = 7,63:1 */
}
.speisen-footnote {
  margin: clamp(28px, 3vw, 40px) auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--c-ink-soft);
  font-style: italic;
}

/* Speisen-card · Diese Woche · Badge */
.speisen-card {
  position: relative;
}
.speisen-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(18, 60, 104, 0.18);
}
.speisen-card-featured {
  border-top-color: #2D7D5A;
}
.speisen-card-featured .speisen-card-badge {
  background: #2D7D5A;
}

/* Rotation-Hinweis unter Karten */
.speisen-rotation-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(24px, 3vw, 32px) auto 0;
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  font-style: italic;
}
.speisen-rotation-note svg {
  color: var(--c-accent);
  flex-shrink: 0;
}

/* DIE KOMPLETTE KARTE · ausklappbar */
.speisen-full-menu {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 1080px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
}
.speisen-full-menu-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 32px);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--dur) var(--ease);
}
.speisen-full-menu-summary::-webkit-details-marker { display: none; }
.speisen-full-menu-summary:hover {
  background: rgba(201, 169, 97, 0.06);
}
.speisen-full-menu-summary-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.speisen-full-menu-summary-text strong {
  font-family: var(--f-display);
  /* 12.06.2026: größer — der Reiter ersetzt die Sektions-Überschrift */
  font-size: 1.45rem;
  color: var(--c-primary);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.speisen-full-menu-summary-text span {
  font-size: 0.84rem;
  color: var(--c-ink-soft);
}
.speisen-full-menu-chevron {
  color: var(--c-accent);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}
.speisen-full-menu[open] .speisen-full-menu-chevron {
  transform: rotate(180deg);
}
.speisen-full-menu[open] .speisen-full-menu-summary {
  border-bottom: 1px solid var(--c-line);
}

.speisen-full-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
}
@media (max-width: 720px) {
  .speisen-full-menu-grid { grid-template-columns: 1fr; }
}
.speisen-menu-category-title {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--s-3);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-accent);
}
.speisen-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.speisen-menu-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.speisen-menu-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.speisen-menu-item-name {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.speisen-menu-veg-mark {
  font-size: 0.85em;
  margin-left: 4px;
  display: inline-block;
}
.speisen-menu-item-price {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--c-primary); /* WCAG: Gold auf Creme war 1,82:1 — Navy = lesbar */
  white-space: nowrap;
  flex-shrink: 0;
}
.speisen-menu-item-desc {
  font-size: 0.825rem;
  color: var(--c-ink-soft);
  font-style: italic;
}
.speisen-menu-item-allergens {
  font-size: 0.72rem;
  color: var(--c-ink-soft);
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.speisen-full-menu-footer {
  border-top: 1px solid var(--c-line);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* 12.06.2026: PDF-Knopf mittig, Allergene zentriert darunter */
  align-items: center;
  text-align: center;
}
.speisen-full-menu-footer p {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin: 0;
}
.speisen-full-menu-footer p strong {
  color: var(--c-primary);
}
@media (min-width: 720px) {
  /* 12.06.2026: Zeilen-Layout raus — Knopf bleibt mittig, Allergene zentriert darunter */
  .speisen-full-menu-footer p { max-width: 680px; }
}

/* ============================================
   BAR-SECTION · Hendrick + 3 Cocktails
   ============================================ */
.bar-section { padding: clamp(50px, 6.4vw, 80px) 0; }
.bar-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
@media (max-width: 760px) { .bar-intro { grid-template-columns: 1fr; gap: var(--s-3); } }
.bar-host {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(248, 243, 232, 0.06);
  border: 1px solid rgba(248, 243, 232, 0.12);
  border-left: 3px solid var(--c-accent);
  border-radius: 8px;
}
.bar-host-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 1.9rem;
  font-weight: 800;
  flex-shrink: 0;
}
.bar-host-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.bar-host-label {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.bar-host-text strong {
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--c-cream);
}
.bar-host-role {
  font-size: 0.82rem;
  color: rgba(248, 243, 232, 0.7);
}
.bar-intro-text h2 {
  color: var(--c-cream);
  margin: 0 0 12px;
  text-wrap: balance;
}
.bar-intro-text h2 em { color: var(--c-accent); font-style: italic; }
.bar-intro-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(248, 243, 232, 0.82);
  margin: 0;
  max-width: 540px;
}

.cocktails-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) { .cocktails-grid { grid-template-columns: 1fr; } }

/* 4-Spalten-Variante · 1 Image-Card + 3 Cocktail-Cards */
.cocktails-grid.cocktails-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1280px;
}
@media (max-width: 1100px) {
  .cocktails-grid.cocktails-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cocktails-grid.cocktails-grid-4 { grid-template-columns: 1fr; }
}

/* Side-by-Side · Image links, 3 Cocktail-Rows rechts gestapelt */
.cocktails-grid.cocktails-grid-side {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  max-width: 1160px;
  align-items: stretch;
  gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 860px) {
  .cocktails-grid.cocktails-grid-side { grid-template-columns: 1fr; }
}

/* Stack-Container für die 3 Cocktail-Rows · gleichmäßig verteilt */
.cocktail-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cocktail-stack > .cocktail-card-row {
  flex: 1;
}

/* Cocktail-Card als horizontale Row (Icon links, Inhalt rechts) */
.cocktail-card-row {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.1vw, 26px) !important;
}
.cocktail-card-row .cocktail-icon {
  width: 52px;
  height: 52px;
  margin: 0;
  flex-shrink: 0;
}
.cocktail-card-row .cocktail-icon svg {
  width: 26px;
  height: 26px;
}
.cocktail-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cocktail-card-row h3 {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  text-align: left;
}
.cocktail-card-row .cocktail-recipe {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  flex-grow: 0;
}
.cocktail-card-row .cocktail-meta {
  margin: 6px 0 0;
  justify-content: flex-start;
  padding-top: 8px;
  border-top: 1px dashed rgba(248, 243, 232, 0.14);
  width: 100%;
}
.cocktail-card-row.cocktail-card-featured .cocktail-badge {
  top: -10px;
  left: 24px;
  transform: none;
}

/* Centered Bar-Head (statt Image-links/Text-rechts) */
.bar-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.bar-head .eyebrow {
  color: var(--c-accent);
  margin-bottom: 12px;
  display: inline-block;
}
.bar-head h2 {
  color: var(--c-cream);
  margin: 0 0 14px;
  text-wrap: balance;
}
.bar-head h2 em {
  color: var(--c-accent);
  font-style: italic;
}
.bar-head p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(248, 243, 232, 0.82);
  margin: 0;
}

/* Image-Card · gleiche vertikale Anatomie wie cocktail-card,
   nur dass das "Icon" durch ein Foto ersetzt ist */
.cocktail-card-image {
  padding: 0 !important;
  overflow: hidden;
  background: rgba(248, 243, 232, 0.04);
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  text-align: center;
}
.cocktail-card-image .cocktail-card-image-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* 12.06.2026: Foto wächst auf volle Kartenhöhe (Karte wird vom höheren Cocktail-Stack
     gestreckt) — sonst bleibt unten ein blauer Streifen; aspect-ratio bleibt als Minimum */
  flex: 1 1 auto;
}
.cocktail-card-image .cocktail-card-image-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cocktail-card-image:hover .cocktail-card-image-photo img {
  transform: scale(1.04);
}
.cocktail-card-image .cocktail-card-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(11, 35, 66, 0.88), rgba(11, 35, 66, 0));
  text-align: left;
}
.cocktail-card-image .bar-host-avatar {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  flex-shrink: 0;
}
.cocktail-card-image .bar-host-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}
.cocktail-card-image .bar-host-text strong {
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--c-cream);
  letter-spacing: 0.02em;
}
.cocktail-card-image .bar-host-role {
  font-size: 0.6875rem;
  color: rgba(248, 243, 232, 0.78);
  letter-spacing: 0.04em;
}
/* Title + Recipe + Meta innerhalb der Image-Card bekommen Cocktail-Card-Padding */
.cocktail-card-image h3,
.cocktail-card-image .cocktail-recipe,
.cocktail-card-image .cocktail-meta {
  padding-left: clamp(20px, 2.4vw, 28px);
  padding-right: clamp(20px, 2.4vw, 28px);
}
.cocktail-card-image h3 { padding-top: clamp(18px, 2.2vw, 24px); }
.cocktail-card-image .cocktail-meta { padding-bottom: clamp(20px, 2.4vw, 28px); }
.cocktail-card {
  background: rgba(248, 243, 232, 0.06);
  border: 1px solid rgba(248, 243, 232, 0.14);
  border-top: 2px solid rgba(201, 169, 97, 0.5);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(24px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  position: relative;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cocktail-card:hover {
  transform: translateY(-3px);
  background: rgba(248, 243, 232, 0.10);
}
.cocktail-card-featured {
  background: rgba(201, 169, 97, 0.12);
  border-color: var(--c-accent);
  border-top: 2px solid var(--c-accent);
}
.cocktail-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.cocktail-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  margin: 0 0 var(--s-3);
}
.cocktail-icon svg { width: 32px; height: 32px; }
.cocktail-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  font-weight: 700;
  color: var(--c-cream);
  margin: 0 0 10px;
}
.cocktail-recipe {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(248, 243, 232, 0.78);
  margin: 0 0 var(--s-3);
  flex-grow: 1;
}
.cocktail-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-top: 1px dashed rgba(248, 243, 232, 0.18);
  padding-top: 14px;
  width: 100%;
}
.cocktail-tag {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(248, 243, 232, 0.62);
  font-style: italic;
}
.cocktail-price {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-accent);
}
.bar-footnote {
  margin: clamp(28px, 3vw, 40px) auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 0.84rem;
  color: rgba(248, 243, 232, 0.62);
  font-style: italic;
}

/* ============================================
   FOOD-REVIEWS · Google/Booking Testimonials
   ============================================ */
.food-reviews-section { padding: clamp(46px, 5.6vw, 76px) 0; }
.food-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) { .food-reviews-grid { grid-template-columns: 1fr; } }
.food-review {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(22px, 2.4vw, 28px);
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  color: var(--c-primary);
  line-height: 1.5;
  position: relative;
}
.food-review-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.food-review-platform {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-style: normal;
}
.food-review-stars {
  font-family: Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  font-style: normal;
  line-height: 1;
}
.food-review cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* ============================================
   GASTRO/KULINARIK HERO · Foto-Override mit Lounge-Übersicht
   ============================================ */
.hero.hero-gastro::before {
  /* 10.06.2026: Video-Hero — Platzhalter raus, Verlauf bleibt als Overlay; Parallax aus (Video-Ebene ist statisch) */
  background:
    linear-gradient(100deg, rgba(11, 35, 66, 0.90) 0%, rgba(18, 60, 104, 0.55) 45%, rgba(18, 60, 104, 0.20) 100%);
  transform: none !important;
  inset: 0;
}
/* 12.06.2026: Zeiten-Leiste entfernt (Meeting-Beschluss: keine Doppel-Info, Video frei) —
   Hero-Höhe wieder reine 16:9-Videofläche wie beim Zimmer-Hero */
.hero.hero-gastro {
  min-height: min(56.25vw, 100dvh);
}

/* ============================================
   ZIMMER HERO · Panoramazimmer-Foto als Override
   ============================================ */
.hero.hero-zimmer::before {
  /* 10.06.2026: Foto raus aus ::before — läuft jetzt als Video-Ebene darunter; der Verlauf bleibt als Overlay */
  background:
    linear-gradient(100deg, rgba(11, 35, 66, 0.88) 0%, rgba(18, 60, 104, 0.50) 45%, rgba(18, 60, 104, 0.15) 100%);
}
/* Hero-Höhe = 16:9 des Viewports, damit das Video ohne Beschnitt zu sehen ist (Deckel: Viewport-Höhe) */
.hero.hero-zimmer {
  min-height: min(56.25vw, 100dvh);
}
/* Parallax AUS auf dem Video-Hero: der halbtransparente Verlauf muss deckungsgleich
   auf dem (statischen) Video liegen — sonst schiebt er sich beim Scrollen als grauer
   Streifen über die nächste Sektion */
.hero.hero-zimmer::before {
  transform: none !important;
  inset: 0;
}
/* Hero-Video (Zimmer + Kulinarik) · liegt UNTER dem ::before-Verlauf */
.hero-zimmer .hero-video,
.hero-gastro .hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: url("img/poster-rooms.webp") center / cover no-repeat;
}
.hero-gastro .hero-video {
  background-image: url("img/poster-kulinarik.webp");
  inset: 0;
}
@media (max-width: 879px) {
  .hero.hero-gastro .hero-content { padding-top: clamp(40px, 12vw, 80px); padding-bottom: clamp(28px, 8vw, 56px); }
}
.hero-zimmer .hero-video video,
.hero-zimmer .hero-video img,
.hero-gastro .hero-video video,
.hero-gastro .hero-video img {
  /* 07.07.2026: img mit aufgenommen — nav.js ersetzt das Video bei blockiertem
     Autoplay (Stromsparmodus) durch sein Poster-<img>; ohne diese Regel war das
     Ersatzbild ungestylt → blauer Hero statt Zimmerfoto (Sabrina-Bug) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero-zimmer .hero-video video,
  .hero-gastro .hero-video video { display: none; } /* Foto-Fallback (Wrapper-Hintergrund) bleibt sichtbar */
}
/* Mobil (≤768px): Video wie auf der Startseite — auf den oberen Bereich gedeckelt,
   damit object-fit:cover deutlich weniger hineinzoomt; darunter Navy-Untergrund. */
@media (max-width: 768px) {
  .hero.hero-zimmer,
  .hero.hero-gastro { background: var(--c-primary-dark); }
  .hero-zimmer .hero-video,
  .hero-gastro .hero-video {
    inset: 0 0 auto 0;          /* oben verankert */
    height: 62vh;               /* gedeckelt → weniger Zoom */
    bottom: auto;
  }
  .hero-zimmer .hero-video video,
  .hero-zimmer .hero-video img,
  .hero-gastro .hero-video video,
  .hero-gastro .hero-video img { object-position: center 42%; }
  /* Den schrägen ::before-Verlauf mobil abschalten — er deckte die GESAMTE Hero-Höhe ab
     (auch unter dem gedeckelten 62vh-Video) und erzeugte dort eine sichtbare Kante.
     Wie auf der Startseite übernimmt EIN vertikaler ::after-Scrim Lesbarkeit + weichen
     Übergang; darunter ist der Untergrund einheitlich Navy → keine Linie mehr. */
  .hero.hero-zimmer::before,
  .hero.hero-gastro::before { display: none; }
  .hero.hero-zimmer::after,
  .hero.hero-gastro::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 62vh;
    background: linear-gradient(to bottom,
      rgba(13, 29, 54, 0.42) 0%,
      rgba(13, 29, 54, 0.42) 40%,
      rgba(13, 29, 54, 0.72) 82%,
      var(--c-primary-dark) 100%);
    z-index: -1;
    pointer-events: none;
  }
}
/* Gastro-Karte rechts · Öffnungszeiten + CTA */
.hero-gastro-card {
  /* 10.06.2026: durchsichtig, damit das Hero-Video durchscheint */
  background: rgba(8, 22, 40, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(248, 243, 232, 0.22);
  border-radius: 12px;
  padding: clamp(24px, 2.5vw, 32px);
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px 14px rgba(8, 22, 40, 0.55);
}
.hero-gastro-card-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.hero-gastro-hours {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-gastro-hours li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(248, 243, 232, 0.10);
}
.hero-gastro-hours li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.hero-gastro-hours-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(221, 177, 60, 0.14);
  border: 1px solid rgba(221, 177, 60, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  flex-shrink: 0;
}
.hero-gastro-hours-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.hero-gastro-hours-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 10.06.2026: Hierarchie gedreht — erst WAS (Gold-Label), dann WANN (große Creme-Zeit) */
.hero-gastro-hours-text .hours-label {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  line-height: 1.2;
}
.hero-gastro-hours-text strong {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-cream);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.hero-gastro-hours-text small {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: rgba(248, 243, 232, 0.8);
  line-height: 1.4;
}
.hero-gastro-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(248, 243, 232, 0.16);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.hero-gastro-card-link:hover { color: var(--c-accent); }
.hero-gastro-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 6px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  width: 100%;
  justify-content: center;
}
.hero-gastro-cta:hover {
  background: var(--c-accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.4);
  color: var(--c-primary);
}
.hero-gastro-cta svg { flex-shrink: 0; }

/* ============================================
   GASTRO FOTO-GALERIEN · Frühstück + Lounge
   ============================================ */
.gastro-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}
.gastro-gallery-main {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-primary-dark);
  aspect-ratio: 4 / 3;
}
.gastro-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%; /* oben beschneiden — Essen statt Decke zeigen */
  display: block;
  transition: opacity 0.6s ease;
}
.gastro-gallery-main.is-fading img { opacity: 0; }
.gastro-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}
.gastro-gallery-thumbs.thumbs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gastro-gallery-thumbs.thumbs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gastro-thumb {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--c-primary-dark);
  aspect-ratio: 1 / 1;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gastro-thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.gastro-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%; /* oben beschneiden — Essen statt Decke zeigen */
  display: block;
}
@media (max-width: 640px) {
  .gastro-gallery-thumbs,
  .gastro-gallery-thumbs.thumbs-3,
  .gastro-gallery-thumbs.thumbs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================
   CONTENT-FIRST HERO VARIANT (kein Foto)
   Für Utility/Info-Seiten · Tagungen, Über uns, Egons Tipps
   ============================================ */
.hero.hero-content-first {
  min-height: auto;
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #FBF8F3 0%, var(--c-cream) 60%, var(--c-sand) 100%);
  color: var(--c-primary);
  display: block;
  align-items: initial;
}
.hero.hero-content-first::before,
.hero.hero-content-first::after { display: none; }
.hero-content-first .page-watermark {
  opacity: 0.07;
  color: var(--c-primary);
}
.hero-content-first .hero-content { padding: 0 var(--s-3); }
.hero-content-first .hero-head {
  max-width: 920px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.hero.hero-content-first .hero-eyebrow {
  color: var(--c-accent);
  font-weight: 700;
  letter-spacing: 0.14em;
}
/* Headline · navy für klare Lesbarkeit, em-Teil in Gold als Akzent am Ende */
.hero.hero-content-first h1 {
  color: var(--c-primary);
  margin-bottom: var(--s-3);
  font-weight: 800;
}
.hero.hero-content-first h1 em {
  color: var(--c-accent);
  font-style: italic;
}
.hero.hero-content-first .hero-lead {
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  letter-spacing: 0.005em;
  line-height: 1.6;
  max-width: 680px;
  text-wrap: pretty;
  opacity: 1;
}

/* Hero mit Foto-Toggle · für Tagungen-Seite */
.hero-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
@media (max-width: 880px) {
  .hero-photo-grid { grid-template-columns: 1fr; }
}
.hero-photo-text .hero-head { margin: 0; max-width: 100%; }

.hero-photo-toggle {
  margin: 0;
  position: relative;
}
.hero-photo-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--c-primary-dark);
}
.hero-photo-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.hero-photo-stage img.is-active { opacity: 1; }

.hero-photo-controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(248, 243, 232, 0.6);
  border-radius: 100px;
  padding: 4px;
  gap: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.hero-photo-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--f-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.hero-photo-tab svg { color: var(--c-ink-soft); transition: color var(--dur) var(--ease); }
.hero-photo-tab:hover { color: var(--c-primary); }
.hero-photo-tab:hover svg { color: var(--c-accent); }
.hero-photo-tab.is-active {
  background: var(--c-primary);
  color: var(--c-cream);
}
.hero-photo-tab.is-active svg { color: var(--c-accent); }

/* Quick-Stats-Streifen im Hero */
.hero-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  margin: 0 auto var(--s-3);
  max-width: 960px;
  border-top: 1px solid rgba(18, 60, 104, 0.14);
  border-bottom: 1px solid rgba(18, 60, 104, 0.14);
}
.hero-stats li {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.hero-stats strong {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 8px;
}
.hero-stats span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 600;
  line-height: 1.35;
  width: 100%;
  text-align: center;
  text-wrap: balance;
}
/* Hero-Umbau 10.06.2026: Text + Sprungmarken links, schnelle Facts als 2×2-Kartencluster rechts
   (gleiche Logik wie Königstraße-Sektion · genutzt auf lage, egon-empfiehlt, ueber-uns) */
.hero-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
@media (min-width: 880px) {
  .hero-2col {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
}
.hero-stats.hero-stats--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  border: none;
  max-width: none;
}
.hero-stats--cards li {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: clamp(18px, 2.2vw, 28px) 14px;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(18, 60, 104, 0.06);
}
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* Section-Anchor-Chips · "Auf dieser Seite" Quick-Nav */
.hero-chips-wrap {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.hero-chips-label {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 600;
  margin-bottom: 12px;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.hero-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 100px;
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.hero-chips a::before {
  content: "↓";
  font-size: 0.85rem;
  color: var(--c-accent);
  font-weight: 700;
}
.hero-chips a:hover {
  background: var(--c-primary);
  color: var(--c-cream);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}
.hero-chips a:hover::before { color: var(--c-accent); }
@media (max-width: 1023px) {
  .hero { min-height: auto; padding-top: var(--s-3); padding-bottom: var(--s-3); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: -8% 0 0 0;
  background:
    linear-gradient(105deg, rgba(18, 60, 104, 0.92) 0%, rgba(26, 47, 82, 0.55) 40%, rgba(18, 60, 104, 0.25) 100%);
  z-index: -1;
  transform: translateY(var(--hero-parallax, 0));
  transition: transform 80ms linear;
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(44, 70, 112, 0.22) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}
/* Hero-Hintergrundvideo (hinter Inhalt + Buchungsformular) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero::before {
    background:
      linear-gradient(105deg, rgba(18, 60, 104, 0.92) 0%, rgba(26, 47, 82, 0.55) 40%, rgba(18, 60, 104, 0.25) 100%),
      url("img/poster-frontpage.webp") center / cover no-repeat;
  }
}

/* ===== Mobil (≤768px): Hero-Video als Vollflächen-Hintergrund (immersiv wie Desktop),
   aber deutlich weniger gezoomt. Trick: das Video deckt nur den oberen, gedeckelten
   Bereich (≈56vh) statt der gesamten – sehr hohen – Hero-Höhe und blendet nach unten
   in Navy aus. Dadurch wählt object-fit:cover einen viel kleineren Maßstab → es bleibt
   deutlich mehr vom Bild sichtbar. Die Headline liegt wie am Desktop über dem Video. ===== */
@media (max-width: 768px) {
  /* :not(.hero-inner) → nur der Startseiten-Hero mit Video, NICHT die Unterseiten-Heros */
  .hero:not(.hero-inner) {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    background: var(--c-primary-dark);    /* Untergrund unterhalb des Videos */
    position: relative;
  }
  /* höhere Spezifität, sonst überschreibt der spätere Basis-Shorthand `padding: var(--s-7)...` */
  .hero:not(.hero-inner) .hero-content {
    position: relative;
    z-index: 2;
    padding-top: 34vh;                    /* Headline rutscht über den unteren Teil des Videos */
  }
}
/* Vollflächen-Video nur bei erlaubter Bewegung – Reduced-Motion behält das Foto-Fallback */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero:not(.hero-inner)::before { display: none; }        /* schräger Brand-Gradient mobil aus */
  .hero-video {
    position: absolute;
    inset: 0 0 auto 0;                    /* oben verankert, volle Breite */
    display: block;
    width: 100%;
    height: 56vh;                         /* gedeckelt → viel kleinerer Cover-Maßstab = weniger Zoom */
    object-fit: cover;
    object-position: center 38%;
    z-index: 0;
  }
  /* Scrim: Video oben klar, unten weich in Navy übergehend (Lesbarkeit + kein harter Rand) */
  .hero:not(.hero-inner)::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 56vh;
    background: linear-gradient(to bottom,
      rgba(13, 29, 54, 0.05) 0%,
      rgba(13, 29, 54, 0.12) 40%,
      rgba(13, 29, 54, 0.72) 82%,
      var(--c-primary-dark) 100%);
    z-index: 1;                           /* über dem Video, unter dem Inhalt */
    pointer-events: none;
  }
}

/* ===== Mobil (≤519px): Bewertungs-Portale (Google · Booking · HolidayCheck)
   alle drei nebeneinander in einer Reihe, dafür etwas kompakter ===== */
@media (max-width: 519px) {
  .review-stats.review-stats--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
  }
  .review-stats--three .platform { padding: var(--s-2) 6px; }
  .review-stats--three .platform-name {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    margin-bottom: 3px;
  }
  .review-stats--three .platform-rating { font-size: 1.3rem; }
  .review-stats--three .platform-rating small { font-size: 0.7rem; }
  .review-stats--three .platform-count { font-size: 0.6rem; margin-top: 3px; line-height: 1.25; }
}

/* ===== Mobil (≤768px): Standort-Karte – nur die nummerierten Marker zeigen,
   die festen Beschriftungen ausblenden. Beschreibung erscheint beim Antippen
   (Leaflet-Popup ist bereits an jedem Marker gebunden). Nur Startseiten-Karte (#index-osm). ===== */
@media (max-width: 768px) {
  #index-osm .tipps-tooltip { display: none; }
}

/* FAQ-Überschrift: Umbruch mobil hinter „vor der" statt hinter „Sie" */
.faq-br-m { display: none; }
@media (max-width: 768px) {
  .faq-br-d { display: none; }
  .faq-br-m { display: inline; }
}

/* Floating Steuerrad unten links */
.hero-wheel {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: clamp(280px, 30vw, 420px);
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: screen;
  animation: wheelSpin 60s linear infinite, wheelDrift 8s ease-in-out infinite;
  transform-origin: center center;
  z-index: 0;
}
.hero-wheel img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.15));
}
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes wheelDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 6px -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wheel { animation: none; }
}
@media (max-width: 768px) {
  .hero-wheel { bottom: -60px; left: -80px; opacity: 0.22; }
}
.hero-content {
  padding: var(--s-7) var(--s-3) var(--s-6);
  width: 100%;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: end;
}
.hero-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: center;
  }
}
.hero h1 {
  color: var(--c-cream);
  margin-bottom: var(--s-3);
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero h1 em {
  color: var(--c-accent);
  font-style: normal;
  font-weight: 800;
  letter-spacing: inherit;
  white-space: nowrap;
  display: inline-block;
}
/* Section-Header-Headlines (lage/ueber-uns/egon-empfiehlt u.a.): dezentes, aufrechtes
   Navy-Emphasis statt Faux-Kursiv. Barlow Condensed hat keine Italic-Achse → das
   UA-Default-Italic wirkte verwaschen/unfertig. Bewusst KEIN Gold (Gold bleibt den
   Foto-Heroes vorbehalten). */
.section-head h1 em,
.section-head h2 em,
.insta-head h2 em {
  /* 03.07.2026 Meeting: Blau/Gold-Split auf ALLEN Sektions-Überschriften
     ("blå og gul hele vejen igennem") — vorher bewusst navy, jetzt Kundenwunsch Gold */
  font-style: normal;
  font-weight: 800;
  color: var(--c-accent);
}
/* 07/2026: Kunde wünscht Gold-Akzent in ausgewählten Headline-Hälften
   (FAQ, Zimmer, Frühstück, Vergleichstabelle) — gezielt per .em-gold */
h1 em.em-gold,
h2 em.em-gold,
.section-head h1 em.em-gold,
.section-head h2 em.em-gold {
  color: var(--c-accent);
  font-style: normal;
  font-weight: 800;
}
/* 07/2026: "EGON LOUNGE" in Fließtext gold hervorgehoben (Kundenwunsch) */
.lounge-gold {
  color: var(--c-accent);
  font-weight: 700;
}
/* 07/2026: größere Eyebrow-Variante (Kundenwunsch: "In jedem Zimmer enthalten" war zu klein) */
.eyebrow--lg {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
/* 07/2026: obere Headline-Zeile größer + fett (Vergleichstabelle Zimmer) */
.h2-strong {
  font-weight: 800;
  font-size: 1.12em;
}
.hero-lead {
  font-size: 1.125rem;
  color: rgba(251, 248, 243, 0.92);
  margin-bottom: var(--s-4);
  max-width: 540px;
  line-height: 1.55;
}
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-4);
  padding: 14px 18px;
  background: rgba(251, 248, 243, 0.07);
  border: 1px solid rgba(251, 248, 243, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
  max-width: 100%;
}
.hero-trust-score {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
  border-right: 1px solid rgba(251, 248, 243, 0.18);
  padding-right: 14px;
}
.hero-trust-score strong {
  font-family: var(--f-serif);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--c-cream);
  letter-spacing: -0.025em;
  line-height: 1;
}
.hero-trust-score strong small {
  font-family: var(--f-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(251, 248, 243, 0.6);
  letter-spacing: 0;
  margin-left: 2px;
}
.hero-stars {
  display: flex;
  gap: 2px;
  color: var(--c-accent);
}
.hero-stars svg { width: 14px; height: 14px; }
.hero-trust-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 4px;
}
.hero-trust-meta-count {
  font-size: 0.875rem;
  color: var(--c-cream);
  font-weight: 600;
}
.hero-trust-meta-platforms {
  font-size: 0.6875rem;
  color: rgba(251, 248, 243, 0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 6px 14px;
  background: rgba(251, 248, 243, 0.08);
  border: 1px solid rgba(251, 248, 243, 0.25);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.85);
  margin-bottom: var(--s-3);
}
.hero-eyebrow::before { content: none; }

/* Booking Card */
.booking-card {
  background: var(--c-cream);
  color: var(--c-ink);
  padding: 22px var(--s-4) var(--s-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: visible;
}
.booking-card::before { display: none; }

/* === Floating Crown === */
.booking-crown {
  position: absolute;
  top: -42px;
  right: -4px;
  width: 52px;
  height: 44px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(201, 169, 97, 0.45));
  animation: crownFloat 4s ease-in-out infinite;
  transform-origin: center bottom;
}
.booking-crown img,
.booking-crown svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@keyframes crownFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .booking-crown { animation: none; }
}

/* === Header mit Ab-Preis === */
.booking-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding-top: var(--s-1);
}
.booking-card-head h3 {
  font-size: 1.5rem;
  color: var(--c-primary);
  margin: 0;
  line-height: 1;
}
.booking-card-head .booking-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.6;
  margin-bottom: 6px;
}
.booking-from {
  position: relative;
  text-align: right;
  line-height: 1;
}
.booking-from-label {
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  display: block;
  margin-bottom: 2px;
}
.booking-from-price {
  font-family: var(--f-serif);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--c-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.booking-from-price small {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-ink-soft);
  letter-spacing: 0;
}

/* === Bestpreis-Vergleichs-Badge === */
.bestprice-compare {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(45, 125, 90, 0.08) 0%, rgba(45, 125, 90, 0.03) 100%);
  border: 1px solid rgba(45, 125, 90, 0.22);
  border-radius: var(--radius-md);
  margin-bottom: var(--s-3);
}
.bestprice-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--c-success);
  color: var(--c-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bestprice-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.bestprice-headline {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-success);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.bestprice-sub {
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.bestprice-sub s {
  color: var(--c-ink-soft);
  opacity: 0.7;
  font-weight: 400;
}
.bestprice-sub strong {
  color: var(--c-primary);
  font-weight: 700;
}
.booking-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
@media (max-width: 380px) {
  .booking-fields { grid-template-columns: minmax(0, 1fr); }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.field input, .field select {
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 0.9375rem;
  transition: border-color var(--dur) var(--ease);
  min-height: 48px;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26, 47, 82, 0.15);
}
.field-full { grid-column: span 2; }
.booking-card .btn {
  width: 100%;
  padding: 16px;
  font-size: 1rem;
}
.booking-perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  justify-content: center;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--c-ink);
  font-weight: 500;
}
.booking-perks > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.booking-perks > span::before {
  content: "✓";
  color: var(--c-success);
  font-weight: 700;
}
.booking-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  justify-content: center;
  margin-top: var(--s-2);
  font-size: 0.75rem;
  color: var(--c-ink-soft);
}
.booking-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.booking-trust svg { color: var(--c-primary); opacity: 0.55; flex-shrink: 0; }

.iframe-note {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  font-size: 0.6875rem;
  text-align: center;
  color: var(--c-ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
}

/* ============================================
   BOOKING ADD-ONS — Checkbox-Liste für Frühstück/Parken/Anlass
   ============================================ */
.booking-addons {
  display: grid;
  gap: 6px;
  margin: var(--s-1) 0;
}

/* Urgency-Nudge · ersetzt die Add-On-Liste, verkaufspsychologisch optimiert */
.booking-urgency {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: var(--s-1) 0;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.04));
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--c-ink);
  line-height: 1.35;
}
.booking-urgency svg {
  color: var(--c-accent);
  flex-shrink: 0;
}
.booking-urgency strong {
  color: var(--c-accent);
  font-weight: 700;
}
.booking-addon {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  position: relative;
}
.booking-addon:hover {
  border-color: var(--c-accent);
  background: #FBF6E8;
}
.booking-addon input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.booking-addon-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.booking-addon input:checked ~ .booking-addon-check {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.booking-addon input:checked ~ .booking-addon-check::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}
.booking-addon-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.booking-addon-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--c-ink);
  line-height: 1.25;
}
.booking-addon-desc {
  font-size: 0.6875rem;
  color: var(--c-ink-soft);
  line-height: 1.3;
}
.booking-addon-price {
  font-weight: 700;
  color: var(--c-accent);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.booking-addon--occasion .booking-addon-icon {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
}
.booking-occasion-select {
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 0.8125rem;
  font-family: inherit;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
}

/* ============================================
   BOOKING TRANSPARENCY — "Was kostet wirklich?"
   ============================================ */
.booking-transparency,
.booking-cancellation {
  margin-top: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-white);
  overflow: hidden;
}
.booking-transparency summary,
.booking-cancellation summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-primary);
  list-style: none;
  user-select: none;
}
.booking-transparency summary::-webkit-details-marker,
.booking-cancellation summary::-webkit-details-marker { display: none; }
.booking-transparency summary > span:first-child,
.booking-cancellation summary > span {
  flex: 1;
}
.booking-chevron {
  transition: transform 0.2s ease;
  color: var(--c-accent);
  flex-shrink: 0;
}
.booking-transparency[open] .booking-chevron,
.booking-cancellation[open] .booking-chevron {
  transform: rotate(180deg);
}
.booking-transparency-body,
.booking-cancellation-body {
  padding: 0 14px 14px;
  font-size: 0.8125rem;
  color: var(--c-ink);
  line-height: 1.5;
}
.booking-cost-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.booking-cost-table td {
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: 0.8125rem;
}
.booking-cost-table tr:last-child td { border-bottom: none; }
.booking-cost-table .amt {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary);
  white-space: nowrap;
}
.booking-cost-table .amt-free {
  color: var(--c-success);
}
.booking-transparency-note {
  margin: 8px 0 0;
  padding: 10px;
  background: var(--c-cream);
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.booking-transparency-note strong {
  color: var(--c-primary);
  font-weight: 700;
}
.booking-cancellation-body {
  margin: 0;
  padding-left: 30px;
  padding-right: 14px;
}
.booking-cancellation-body li {
  padding: 5px 0;
  font-size: 0.8125rem;
}
.booking-cancellation-body li strong {
  color: var(--c-primary);
  font-weight: 600;
}

/* ============================================
   USP STRIP — Cards mit Big-Numbers + Hover-Drama
   ============================================ */
.usp-strip {
  background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: var(--c-cream);
  padding: var(--s-5) 0 var(--s-5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.usp-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(44, 70, 112, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(201, 169, 97, 0.10) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.usp-strip::after {
  /* Goldlinie oben mittig */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 20vw, 220px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
  opacity: 0.7;
}
.usp-head {
  text-align: center;
  margin-bottom: var(--s-6);
  padding: 0 var(--s-2);
}
.usp-head p { max-width: 560px; font-size: 0.9375rem; }
.usp-head .eyebrow {
  /* 07/2026: weiß + fett + größer (Kundenwunsch — vorher Gold, schlecht lesbar) */
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  opacity: 1;
  margin-bottom: var(--s-2);
}
.usp-head h2 {
  color: var(--c-cream);
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  font-weight: 400;
  max-width: 620px;
  margin: 0 auto;
  letter-spacing: -0.02em;
}
.usp-head h2 em {
  color: var(--c-accent);
  font-style: normal;
  font-weight: 700;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  position: relative;
}
.usp-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .usp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

.usp-item {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: rgba(251, 248, 243, 0.04);
  border: 1px solid rgba(251, 248, 243, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  isolation: isolate;
}
.usp-item::before {
  /* Heller Akzent-Strich oben (versteckt bis hover) */
  content: "";
  position: absolute;
  top: 0; left: var(--s-3); right: var(--s-3);
  height: 2px;
  background: var(--c-cream);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--ease-out);
  z-index: 1;
}
.usp-item:hover {
  background: rgba(251, 248, 243, 0.08);
  border-color: rgba(251, 248, 243, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(8, 28, 60, 0.45);
}
.usp-item:hover::before {
  transform: scaleX(1);
}

/* Big Number als Background-Decoration (cream/weiß) */
.usp-number {
  position: absolute;
  top: -12px;
  right: -10px;
  font-family: var(--f-serif);
  font-size: clamp(5.5rem, 11vw, 9rem);
  font-weight: 400;
  color: var(--c-cream);
  opacity: 0.12;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  z-index: 0;
}
.usp-item:hover .usp-number {
  opacity: 0.28;
  transform: translate(-3px, 3px);
}

.usp-item-content {
  position: relative;
  z-index: 1;
}

.usp-item-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
  opacity: 0.8;
}
.usp-item-label::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--c-accent);
}

.usp-item h4 {
  color: var(--c-cream);
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  margin-bottom: var(--s-1);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.18;
  position: relative;
  z-index: 1;
}
.usp-item p {
  color: rgba(251, 248, 243, 0.78);
  font-size: 0.875rem;
  margin: 0;
  max-width: none;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* ============================================
   STORY (Egon's Geschichte)
   ============================================ */
.story {
  background: var(--c-sand);
  position: relative;
  overflow: hidden;
}
.story::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 280px;
  height: 280px;
  border: 1px solid var(--c-primary);
  border-radius: 50%;
  opacity: 0.12;
}
.story::after {
  content: "";
  position: absolute;
  bottom: -100px; left: -100px;
  width: 400px;
  height: 400px;
  border: 1px solid var(--c-primary);
  border-radius: 50%;
  opacity: 0.06;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  position: relative;
  z-index: 1;
}
.story-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--s-7); }
}
.story-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(44, 70, 112, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(201, 169, 97, 0.18) 0%, transparent 55%),
    linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-portrait::after {
  /* dezenter Steuerrad-Outline als Pattern */
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 243, 0.06);
  pointer-events: none;
}
.story-portrait::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 243, 0.04);
  pointer-events: none;
}
.story-portrait-caption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  color: var(--c-cream);
  text-align: center;
}
.story-portrait-caption .ek-monogram {
  position: absolute;
  top: -150%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-serif);
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 400;
  line-height: 1;
  color: rgba(251, 248, 243, 0.95);
  display: block;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 24px rgba(8, 28, 60, 0.5);
}
.story-portrait-caption .ek-name {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 700;
  display: block;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 6px;
  color: var(--c-cream);
  text-shadow: 0 2px 16px rgba(18, 60, 104, 0.4);
}
.story-portrait-caption .ek-role {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 4px;
  display: block;
}
.story-portrait-flag {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  width: 56px;
  height: 38px;
  background: #C8102E;
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.story-portrait-flag::before {
  content: "";
  position: absolute;
  top: 14px;
  width: 100%;
  height: 6px;
  background: var(--c-cream);
}
.story-portrait-flag::after {
  content: "";
  position: absolute;
  left: 16px;
  height: 100%;
  width: 6px;
  background: var(--c-cream);
}
.story-text blockquote {
  position: relative;
  font-family: var(--f-sans);
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-primary);
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-primary);
  margin: var(--s-3) 0 var(--s-4);
  letter-spacing: -0.01em;
}
.story-text blockquote::before {
  content: "„";
  position: absolute;
  left: -10px;
  top: -25px;
  font-size: 5rem;
  color: var(--c-primary);
  opacity: 0.18;
  font-family: var(--f-serif);
  line-height: 1;
}
.story-text .quote-author {
  font-size: 0.875rem;
  font-style: normal;
  color: var(--c-ink-soft);
  margin-top: var(--s-1);
  display: block;
}
.story-tagline {
  font-family: var(--f-serif);
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.18;
  color: var(--c-primary);
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
/* Drei Werte in den Farben der dänischen Flagge:
   Modern · Persönlich = rot (Dannebrog-Rot #C8102E)
   Ehrlich = weiß auf rotem Pill-Hintergrund (= weißes Kreuz der Flagge) */
.story-tagline em {
  color: #C8102E;
  font-style: normal;
  font-weight: 700;
  display: inline-block;
  letter-spacing: -0.005em;
}
.story-tagline em:nth-child(2) {
  color: #FFFFFF;
  background: #C8102E;
  padding: 0.04em 0.36em 0.08em;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.30);
}


/* ============================================
   VALUE-CAROUSEL — drei Werte rotieren, Dannebrog-Layout
   2 rote Kästen + 1 weißer in der Mitte (= dänische Flagge typografisch)
   ============================================ */
.value-carousel {
  position: relative;
  margin: 10px 0 0;
  padding-top: 0;
  min-height: 4em;
}
.value-carousel-track {
  position: relative;
  min-height: 3.2em;
}
.value-trio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
}
.value-trio.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.value-cell {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 0.10em 0.55em 0.18em;
  border-radius: 7px;
  white-space: nowrap;
  line-height: 1.1;
  transition: transform 400ms var(--ease-out);
}
.value-cell-red {
  /* Marineblau-Pill mit Gold-Innenlinie · brand-konform */
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: var(--c-cream);
  box-shadow:
    0 6px 18px rgba(18, 60, 104, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.value-cell-white {
  /* Cream-Pill mit Gold-Rahmen · der Akzent in der Mitte */
  background: var(--c-cream);
  color: var(--c-primary);
  border: 2px solid var(--c-accent);
  box-shadow:
    0 6px 16px rgba(201, 169, 97, 0.28),
    inset 0 -2px 0 rgba(201, 169, 97, 0.08);
}
.value-trio.is-active .value-cell { transform: translateY(0); }
.value-trio:not(.is-active) .value-cell { transform: translateY(8px); }
.value-carousel-dots {
  display: none;  /* Dots ausgeblendet — User-Wunsch */
}

@media (prefers-reduced-motion: reduce) {
  .value-trio { transition: none; }
}


/* ============================================
   FUN-FACTS CARD (Sub-Page-Heros · GEO-Content)
   Dezente Glas-Panel-Optik statt voller Cream-Karte
   ============================================ */
.fun-facts-card {
  background: rgba(248, 243, 232, 0.09);
  border: 1px solid rgba(248, 243, 232, 0.18);
  border-radius: 4px 12px 12px 4px;
  padding: 16px 20px;
  max-width: none;
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-cream);
  box-shadow: 0 10px 28px rgba(18, 60, 104, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fun-facts-card::before {
  /* dezente Gold-Akzentlinie links — Marken-Anker */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--c-accent);
}

.fun-facts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.fun-facts-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(248, 243, 232, 0.18);
  margin-left: 6px;
  min-width: 30px;
}
.fun-facts-track {
  position: relative;
  min-height: 4.5em;
}
.fun-fact {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
}
.fun-fact.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.fun-fact-title {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.002em;
  color: var(--c-cream);
  line-height: 1.18;
}
.fun-fact-text {
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(248, 243, 232, 0.78);
  text-wrap: pretty;
}

/* Schmale Progress-Bar als Aktivitätsindikator */
.fun-facts-dots {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.fun-fact-dot {
  flex: 1;
  height: 1.5px;
  background: rgba(201, 169, 97, 0.18);
  border-radius: 1px;
  transition: background 400ms var(--ease);
  position: relative;
  overflow: hidden;
}
.fun-fact-dot.is-active {
  background: var(--c-accent);
}
.fun-fact-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: funFactsShine 1.8s ease-out;
}
@keyframes funFactsShine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@media (max-width: 1023px) {
  .fun-facts-card { max-width: 520px; margin: var(--s-3) auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fun-fact { transition: none; }
  .fun-fact-dot.is-active::after { animation: none; }
}

/* ============================================
   STATS — animierte Hotel-Zahlen
   ============================================ */
.stats {
  background: var(--c-primary);
  color: var(--c-cream);
  padding: var(--s-6) 0;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(201, 169, 97, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.stats-grid > * { min-width: 0; }
@media (min-width: 768px) {
  /* Korrektur: nur noch 3 Kacheln -> 3 Spalten, mittig (Bewertungen-Kachel entfernt) */
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 12.06.2026: Über-uns hat 4 Kacheln — die gehören auf EINE Linie */
  .stats-grid:has(> .stats-item:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* einzelne 3. Kachel auf Mobile über beide Spalten zentrieren */
  .stats-grid > .stats-item:nth-child(3):last-child { grid-column: 1 / -1; }
}
.stats-item {
  position: relative;
}
@media (min-width: 768px) {
  .stats-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18%; bottom: 18%;
    right: calc(var(--s-3) * -0.5);
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(251, 248, 243, 0.18) 50%, transparent 100%);
  }
}
.stats-number {
  font-family: var(--f-serif);
  font-size: clamp(3rem, 5vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  color: var(--c-cream);
  letter-spacing: 0;
  display: block;
  margin-bottom: 8px;
}
.stats-suffix {
  font-family: var(--f-serif);
  font-size: 0.6em;
  color: var(--c-accent);
  margin-left: 2px;
}
.stats-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.7);
}

/* ============================================
   WARUM DIREKT BUCHEN
   ============================================ */
.why-direct {
  background: var(--c-sand);
  position: relative;
}
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.why-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  padding: var(--s-4);
  text-align: left;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
  box-shadow: 0 16px 40px rgba(18, 60, 104, 0.10);
}
.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
  position: relative;
}
.why-icon svg { width: 22px; height: 22px; }
.why-card h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--c-ink);
}
.why-card p {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--c-ink-soft);
  line-height: 1.55;
}
.why-cta {
  text-align: center;
  margin-top: var(--s-5);
}

/* ============================================
   TEAM — Costi, Jason, Chris
   ============================================ */
.team {
  background: var(--c-cream);
  position: relative;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* schmaler: 2x2 */
  gap: var(--s-3);
  max-width: 980px;
  margin: 0 auto;
}
/* fruehere 768er 3-Spalten-Regel entfernt -> durchgehend 2x2 bis Desktop (4 Spalten ab @1024 unten) */
.team-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  padding: var(--s-5) var(--s-3) var(--s-4);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.team-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--c-primary);
  transition: transform 400ms var(--ease-out);
}
.team-card:hover {
  border-color: rgba(26, 47, 82, 0.4);
  box-shadow: 0 12px 32px rgba(18, 60, 104, 0.12);
  transform: translateY(-4px);
}
.team-card:hover::before { transform: translateX(-50%) scaleX(1); }
.team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  color: var(--c-cream);
  font-family: var(--f-serif);
  font-size: 2.75rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-3);
  box-shadow: 0 10px 28px rgba(18, 60, 104, 0.28);
  transition: transform 500ms var(--ease-out);
}
.team-card:hover .team-avatar { transform: scale(1.05) rotate(-3deg); }
.team-card h3 {
  font-size: 1.5rem;
  margin-bottom: 4px;
  color: var(--c-primary);
}
.team-role {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.55;
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.team-quote {
  font-family: var(--f-sans);
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin: 0;
  position: relative;
  padding-top: var(--s-2);
}
.team-quote::before {
  content: "„";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  color: var(--c-primary);
  opacity: 0.2;
  line-height: 1;
  font-family: var(--f-serif);
}
.team-source {
  display: block;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--c-ink-soft);
  margin-top: var(--s-2);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* Lange Woerter (z.B. "Frühstücksrestaurant") in schmalen 2x2-Karten nie abschneiden -> umbrechen */
.team-role { overflow-wrap: anywhere; }
.team-quote, .team-source { overflow-wrap: break-word; }

/* 2x2 auf schmalen Phones: kompaktere Karten (kleinere Avatare/Schrift), damit nichts klemmt */
@media (max-width: 480px) {
  .team-card { padding: var(--s-4) 16px var(--s-3); }
  .team-avatar { width: 66px; height: 66px; font-size: 1.9rem; margin-bottom: var(--s-2); }
  .team-card h3 { font-size: 1.2rem; margin-bottom: 2px; }
  .team-role { letter-spacing: 0.08em; }
  .team-quote { font-size: 0.85rem; padding-top: 6px; }
  .team-quote::before { font-size: 1.9rem; top: -6px; }
}

/* ============================================
   ROOMS
   ============================================ */
.rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
@media (min-width: 640px) { .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rooms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.room-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur) var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;          /* ganze Karte klickbar */
}
.room-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.room-image {
  aspect-ratio: 4 / 3;
  background: var(--c-sand);
  position: relative;
  overflow: hidden;
}
.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
/* 16.06.2026: Themen-Icon im weißen Kreis (oben links — oben rechts sitzt die Preis-Pille) für spezielle Zimmer */
.room-icon-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(18, 60, 104, 0.2);
}
.room-icon-badge svg { width: 24px; height: 24px; }
.room-card:hover .room-image img {
  transform: scale(1.04);
}
.room-card.featured .room-image::after {
  content: "Premium";
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  background: var(--c-primary);
  color: var(--c-cream);
  padding: 4px 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  z-index: 1;
}

.room-body {
  padding: var(--s-2) var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 7px;
}
.room-tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-weight: 600;
  opacity: 0.7;
}
.room-card h3 {
  font-size: 1.3rem;
  color: var(--c-primary);
  margin: 0;
}
.room-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}
.room-features span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.room-features span::before {
  content: "•";
  color: var(--c-primary);
  opacity: 0.5;
}
.room-features span:first-child::before { display: none; }

.room-price-row {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(18, 60, 104, 0.18);
}
.room-price-label {
  font-size: 0.62rem;
  color: var(--c-ink-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.room-price {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -0.02em;
}
.room-price small {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--c-ink-soft);
}
.room-card a.room-link, .room-card button.room-link {
  display: block;
  width: 100%;
  padding: 13px var(--s-3);
  background: var(--c-primary);
  color: var(--c-cream);
  text-align: center;
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.room-card button.room-link span.arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
  margin-left: 4px;
}
.room-card a.room-link:hover, .room-card button.room-link:hover {
  background: var(--c-highlight);
  color: var(--c-cream);
}
.room-card button.room-link:hover span.arrow {
  transform: translateX(6px);
}

/* ============================================
   PANORAMA FEATURE
   ============================================ */
.panorama {
  background: var(--c-primary);
  color: var(--c-cream);
  position: relative;
  overflow: hidden;
}
.panorama-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.panorama-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .panorama-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); }
}
.panorama-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.panorama-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panorama-image::after {
  content: "";
  position: absolute;
  inset: var(--s-3);
  border: 1px solid rgba(251, 248, 243, 0.45);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.panorama-text h2 {
  color: var(--c-cream);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.panorama-text h2 em { color: var(--c-accent); font-style: normal; font-weight: 700; }
.panorama-text p { color: rgba(251, 248, 243, 0.85); margin-bottom: var(--s-3); }
.panorama-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(251, 248, 243, 0.15);
  border-bottom: 1px solid rgba(251, 248, 243, 0.15);
}
.panorama-feature {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.panorama-feature strong {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-cream);
}
.panorama-feature span {
  font-size: 0.8125rem;
  color: rgba(251, 248, 243, 0.7);
}

/* ============================================
   TAGUNGEN
   ============================================ */
.tagungen { background: var(--c-sand); }
.tagungen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 1024px) {
  .tagungen-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
}
.tagungen-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.tagungen-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Toggle (Leer / Im Meeting) — passt sich an .tagungen-image an */
.tagungen-image .hero-photo-toggle {
  width: 100%;
  height: 100%;
}
.tagungen-image .hero-photo-stage {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.tagungen-packages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-4);
}
.tagungen-package {
  padding: var(--s-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  transition: all var(--dur) var(--ease);
}
.tagungen-package:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tagungen-package h4 {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.7;
  margin-bottom: 4px;
  font-family: var(--f-sans);
}
.tagungen-package strong {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-primary);
  display: block;
  margin-bottom: var(--s-1);
}
.tagungen-package p {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  margin: 0;
}
.tagungen-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-3);
}
.tagungen-features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--c-white);
  border-radius: 100px;
  border: 1px solid var(--c-line);
}
.tagungen-features svg { color: var(--c-primary); opacity: 0.6; flex-shrink: 0; }

/* ============================================
   INSTAGRAM
   ============================================ */
.insta { background: var(--c-cream); }
.insta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.insta-head h2 { margin: 0; }
.insta-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--c-primary);
  font-weight: 500;
}
.insta-handle:hover { color: var(--c-primary-light); }
.insta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
@media (min-width: 768px) { .insta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } }
.insta-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.insta-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.insta-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.insta-tile:hover img { transform: scale(1.06); }
.insta-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(18, 60, 104, 0.4) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.insta-tile:hover::after { opacity: 1; }
.insta-tile-icon {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 24px;
  height: 24px;
  color: var(--c-cream);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 1;
}
.insta-tile:hover .insta-tile-icon { opacity: 1; }

/* ============================================
   GASTRONOMY
   ============================================ */
.gastro {
  background: var(--c-cream);
}
.gastro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
.gastro-grid > * { min-width: 0; }
@media (min-width: 768px) { .gastro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.gastro-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur) var(--ease);
}
.gastro-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.gastro-image {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.gastro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gastro-card:hover .gastro-image img {
  transform: scale(1.04);
}

/* Auto-Slideshow für Gastro-Karten (Frühstück + Egon Lounge) */
.gastro-slider .gastro-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease), transform 600ms var(--ease-out);
}
.gastro-slider .gastro-slide.is-active { opacity: 1; }
.gastro-card:hover .gastro-slider .gastro-slide.is-active { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .gastro-slider .gastro-slide { transition: none; }
}
.gastro-body { padding: var(--s-4); }
.gastro-body h3 { font-size: 1.75rem; margin-bottom: var(--s-1); }
.gastro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0;
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  padding-bottom: var(--s-2);
}
.gastro-meta-item { display: flex; align-items: center; gap: 6px; }
.gastro-meta-item svg { color: var(--c-primary); opacity: 0.6; flex-shrink: 0; }

/* ============================================
   REVIEWS / SOCIAL PROOF
   ============================================ */
.reviews { background: var(--c-sand); }
.review-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
}
@media (min-width: 768px) { .review-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); } }
/* 3-Portal-Streifen (Google · Booking · HolidayCheck) — 09.06.2026 */
.review-stats--three { max-width: 760px; margin: var(--s-4) auto var(--s-5); }
.review-stats--three .platform { text-decoration: none; color: inherit; }
.review-stats--three .platform-count { font-size: 0.78rem; color: var(--c-ink-soft); margin-top: 4px; }
@media (min-width: 520px) { .review-stats.review-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.platform {
  background: var(--c-white);
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid var(--c-line);
  transition: all var(--dur) var(--ease);
}
.platform:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.platform-name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 6px;
}
.platform-rating {
  font-family: var(--f-serif);
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.platform-rating small {
  font-family: var(--f-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-ink-soft);
}
.platform-count {
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  margin-top: 4px;
}

.review-cards {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 320px;
  display: block !important;
}
@media (min-width: 768px) { .review-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review-card {
  background: var(--c-white);
  padding: var(--s-3);
  border-radius: var(--radius-lg);
  position: relative;
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.review-card::before {
  content: "";
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A5BB5' opacity='0.22'%3E%3Cpath d='M3 17h3l2-4V7H2v6h3zm10 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.review-stars { display: flex; gap: 2px; color: var(--c-accent); }
.review-text {
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-primary);
  margin: 0;
  letter-spacing: -0.005em;
}
.review-meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-2);
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 1rem;
}
.review-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-primary);
}
.review-source {
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
}

/* ============================================
   LOCATION
   ============================================ */
.location { background: var(--c-cream); }
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
.location-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .location-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5); }
}
.location-map {
  aspect-ratio: 4 / 3;
  background: var(--c-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-line);
  overflow: hidden;
  position: relative;
}
.location-map svg {
  width: 100%;
  height: 100%;
  display: block;
}

  50% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  
}
.location-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.location-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--c-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  transition: all var(--dur) var(--ease);
  flex: 1;
  min-height: 0;
}
.location-item:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}
.location-info h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: 2px;
  line-height: 1.2;
}
.location-info p { font-size: 0.8125rem; margin: 0; color: var(--c-ink-soft); line-height: 1.3; }
.location-distance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--f-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--c-primary);
  white-space: nowrap;
  line-height: 1;
}
.location-distance small {
  font-family: var(--f-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  opacity: 0.7;
}

/* ============================================
   FAQ — native details/summary
   ============================================ */
.faq { background: var(--c-sand); }
.faq-list {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--c-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item:hover { border-color: rgba(26, 47, 82, 0.4); }
.faq-item[open] {
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(18, 60, 104, 0.08);
}
.faq-question {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
  padding: 18px 60px 18px var(--s-3);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-primary);
  letter-spacing: -0.005em;
  line-height: 1.4;
  user-select: none;
  transition: color var(--dur) var(--ease);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }
.faq-icon {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--c-primary);
  border-radius: 2px;
  transition: transform 300ms var(--ease-out), background 300ms;
}
.faq-icon::before { width: 11px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 11px; }
.faq-item[open] .faq-icon { background: var(--c-primary); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: var(--c-cream); }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); }
.faq-answer {
  padding: 0 var(--s-3) var(--s-3);
  color: var(--c-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  animation: faqOpen 320ms var(--ease-out);
}
.faq-answer p { margin: 0; max-width: none; }
.faq-answer p + p { margin-top: 8px; }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta {
  color: var(--c-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-7) 0;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 60, 104, 0.85) 0%, rgba(26, 47, 82, 0.55) 50%, rgba(18, 60, 104, 0.92) 100%),
    url("img/skyline-hamburg.webp") center / cover no-repeat;
  z-index: -1;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Sanftes Vignette in der Mitte */
    radial-gradient(ellipse at center, transparent 0%, rgba(18, 60, 104, 0.3) 100%),
    /* Mesh-Gradient zum Footer hin: vier weiche Farbblobs verschmelzen */
    radial-gradient(ellipse 70% 70% at 15% 100%, rgba(31, 58, 107, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 85% 100%, rgba(31, 58, 107, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 30% 95%, rgba(201, 169, 97, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 35% 28% at 70% 92%, rgba(139, 42, 47, 0.05) 0%, transparent 60%),
    /* Dunkler Konvergenzpunkt unten Mitte (zum Footer-Farbton) */
    radial-gradient(ellipse 60% 30% at 50% 102%, var(--c-primary-dark) 0%, rgba(18, 60, 104, 0.6) 40%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.final-cta-content { position: relative; z-index: 1; }
.final-cta h2 {
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.final-cta h2 em { color: var(--c-accent); font-style: normal; font-weight: 700; }
.final-cta-content > p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.125rem;
  max-width: 540px;
  margin: var(--s-2) auto var(--s-4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.final-cta-buttons { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* Final CTA · 3 Vorteile (konsolidiert aus Why-Direct) */
.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  max-width: 960px;
  margin: var(--s-3) auto var(--s-5);
}
@media (min-width: 720px) {
  .final-cta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
}
.final-cta-card {
  background: rgba(11, 31, 58, 0.55);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 14px;
  padding: var(--s-4) var(--s-3);
  text-align: center;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.final-cta-card:hover {
  background: rgba(11, 31, 58, 0.72);
  border-color: var(--c-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.final-cta-card-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.22);
  color: var(--c-accent);
  border: 1px solid rgba(201, 169, 97, 0.45);
}
.final-cta-card-icon svg { width: 24px; height: 24px; }
.final-cta-card h3 {
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.final-cta-card p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--c-primary-dark);
  color: rgba(251, 248, 243, 0.75);
  padding: var(--s-6) 0 var(--s-3);
  font-size: 0.875rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Spiegel-Mesh oben am Footer: nimmt die Blobs der final-cta auf,
   damit der Übergang nicht als harte Kante wahrgenommen wird */
footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background:
    radial-gradient(ellipse 70% 100% at 15% 0%, rgba(31, 58, 107, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 100% at 85% 0%, rgba(31, 58, 107, 0.40) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 30% 5%, rgba(201, 169, 97, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 35% 60% at 70% 8%, rgba(139, 42, 47, 0.03) 0%, transparent 65%),
    linear-gradient(180deg, rgba(18, 60, 104, 0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
footer > .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.footer-grid > * { min-width: 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }

.footer-brand h3 {
  color: var(--c-cream);
  font-size: 1.5rem;
  margin-bottom: var(--s-1);
}
.footer-brand p { color: rgba(251, 248, 243, 0.6); max-width: 320px; margin-bottom: var(--s-2); }
.footer-col h4 {
  color: var(--c-cream);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  font-family: var(--f-sans);
  font-weight: 600;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { color: rgba(251, 248, 243, 0.7); }
.footer-col a:hover { color: var(--c-cream); }
.footer-social { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.footer-social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 248, 243, 0.08);
  border-radius: 50%;
  transition: all var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--c-primary-light); color: var(--c-cream); }
.footer-bottom {
  border-top: 1px solid rgba(251, 248, 243, 0.12);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: rgba(251, 248, 243, 0.55);
}

/* ============================================
   STICKY BOOKING BAR (Desktop, scroll-triggered)
   ============================================ */
@media (max-width: 960px) {
}
@media (max-width: 640px) {
}

/* ============================================
   MOBILE STICKY CTA
   ============================================ */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: var(--s-2);
  left: var(--s-2);
  right: var(--s-2);
  z-index: 90;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}
/* 16.06.2026: Mobiler Sticky-Button „Verfügbarkeit prüfen" entfernt — doppelt zu „Direkt buchen" (oben)
   + Tour-Guide-Pille (unten). Bleibt daher auch auf Mobile ausgeblendet, kein Body-Padding mehr nötig. */
@media (max-width: 768px) {
  .mobile-cta { display: none; }
}

/* ============================================
   ANIMATIONS — explicit reveal, no JS flicker
   ============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: fadeUp 800ms var(--ease-out) both;
}
.reveal-delay-1 { animation-delay: 80ms; }
.reveal-delay-2 { animation-delay: 160ms; }
.reveal-delay-3 { animation-delay: 240ms; }
.reveal-delay-4 { animation-delay: 320ms; }

.scroll-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-fade { opacity: 1; transform: none; }
}
/* ============================================
   NAV ACTIVE STATE (Multi-Page)
   ============================================ */
.nav-links a.nav-active {
  color: var(--c-primary);
  font-weight: 600;
}
.nav-links a.nav-active::after { transform: scaleX(1); transform-origin: left; }

/* ============================================
   INNER PAGE HERO (für Sub-Pages)
   ============================================ */
.hero-inner {
  min-height: 56vh;
  min-height: 56dvh;
}
@media (min-width: 1024px) {
  .hero-inner .hero-content {
    /* 12.06.2026: horizontal var(--s-3) statt 0 — sonst klebt der Hero-Text bei 1024–1280px
       am Viewport-Rand und fluchtet nicht mit dem Sektionsinhalt darunter */
    padding: var(--s-7) var(--s-3) var(--s-5);
  }
}
.hero-inner h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
}
.hero-inner .hero-lead {
  max-width: 620px;
}
/* Angebote-Hero: Such-Leiste (DIRS21 QuickBook) statt Wizard */
.hero-search { max-width: 600px; margin: clamp(20px, 3vw, 30px) 0 0; }
.hero-search-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-cream);
  opacity: 0.92;
  margin: 0 0 9px 2px;
}
.hero-search-card {
  /* transparent: das DIRS21-QuickBook bringt seine eigene weiße Karte mit;
     ein zusätzlicher weißer Wrapper erzeugte sonst eine doppelte Karte */
  background: transparent;
  padding: 0;
}
.hero-inner .hero-offer-intro { width: 100%; max-width: 720px; }
.hero-inner .hero-trust-badges { margin-top: clamp(16px, 2.5vw, 24px); }

/* ===== Minimalistischer Angebote-Hero · zentriert, ohne Deko/Truhe ===== */
.hero.hero-min { background: linear-gradient(180deg, #143f6a 0%, #123C68 100%); }
.hero.hero-min::before,
.hero.hero-min::after { display: none !important; }
.hero-min-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding-block: clamp(10px, 3vw, 40px);
}
.hero-min-kicker {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  padding-left: 0.38em;
}
.hero-min .hero-min-h1 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 8vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: 0.006em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-cream);
  margin: 0;
}
.hero-min .hero-min-h1 .gold { color: var(--c-accent); }
.hero-min-rule {
  display: block;
  width: 54px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
  margin: clamp(22px, 3.2vw, 34px) auto;
}
.hero-min-sub {
  font-family: var(--f-sans);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  color: rgba(248, 243, 232, 0.82);
  max-width: 540px;
  margin: 0 auto clamp(26px, 4vw, 40px);
}
.hero-min-search { max-width: 600px; margin: 0 auto; }
.hero-min-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 2.8vw, 30px);
  font-family: var(--f-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(248, 243, 232, 0.66);
}
.hero-min-trust span[aria-hidden] { color: var(--c-accent); opacity: 0.55; }

/* Distance-Strip · scan-bar mit den wichtigsten Zielen zwischen Hero und Anfahrt */
.distance-strip {
  background: linear-gradient(180deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
  padding: clamp(20px, 2.5vw, 32px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.distance-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 18px);
  max-width: 1080px;
  margin: 0 auto;
}
.distance-strip-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 6px;
  color: var(--c-cream);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.distance-strip-list li:last-child { border-right: none; }
.distance-strip-list strong {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.distance-strip-list span {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, 0.78);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .distance-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .distance-strip-list li:nth-child(3) { border-right: none; }
  .distance-strip-list li { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 12px; }
  .distance-strip-list li:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 420px) {
  .distance-strip-list { grid-template-columns: 1fr; }
  .distance-strip-list li:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* Anfahrt-Sektion · echtes Google-Maps-Embed + Info-Karten-Grid */
.anfahrt-section { padding: clamp(46px, 5.6vw, 76px) 0; }

.anfahrt-map-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-line);
  scroll-margin-top: 120px;
}
.anfahrt-map-wrap iframe,
.anfahrt-map-wrap .anfahrt-osm {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  background: var(--c-sand);
}
.anfahrt-map-wrap .anfahrt-osm { z-index: 1; }
.osm-logo-marker {
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  background: #fff;
}
.anfahrt-map-cta { z-index: 1000; }
/* OSM-Karte in der Location-Sektion (Startseite) — füllt die 4/3-Box */
.location-map .location-osm { position: absolute; inset: 0; z-index: 1; background: var(--c-sand); }
/* Leaflet-Attribution kompakt halten — Fremd-CSS (DIRS21-Widget) bläht das Flaggen-SVG sonst auf.
   Höhere Spezifität als leaflet.css nötig (leaflet.css lädt nach style.css und setzt display:inline !important) */
.leaflet-control-attribution .leaflet-attribution-flag,
.leaflet-container .leaflet-attribution-flag { display: none !important; width: 0 !important; }
.leaflet-control-attribution { font-size: 10px !important; line-height: 1.4 !important; padding: 2px 6px !important; }
.leaflet-control-attribution a { display: inline !important; padding: 0 !important; font-size: 10px !important; }
.leaflet-control-attribution svg { width: 1em !important; height: 0.67em !important; }
.anfahrt-map-cta svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.anfahrt-map-cta {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--c-primary);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.anfahrt-map-cta:hover {
  transform: translateY(-1px);
  background: var(--c-primary-dark);
  color: var(--c-cream);
  box-shadow: var(--shadow-lg);
}

.anfahrt-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .anfahrt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .anfahrt-cards { grid-template-columns: 1fr; }
}
.anfahrt-card {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-accent);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(20px, 2.2vw, 26px);
  scroll-margin-top: 120px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}
.anfahrt-card-badge {
  position: absolute;
  top: -1px;
  right: 14px;
  transform: translateY(-50%);
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  z-index: 2;
}
.anfahrt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-primary);
  border-top-color: var(--c-accent);
}
.anfahrt-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: var(--s-3);
}
.anfahrt-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}
.anfahrt-card-lead {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-2) 0;
  font-style: italic;
}
.anfahrt-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
}
.anfahrt-card-list li {
  font-size: 0.88rem;
  color: var(--c-ink);
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(18, 60, 104, 0.08);
}
.anfahrt-card-list li:last-child { border-bottom: none; }
.anfahrt-card-list strong {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.02em;
  margin-right: 4px;
}

@media (max-width: 640px) {
  .anfahrt-map-wrap iframe, .anfahrt-map-wrap .anfahrt-osm { height: 320px; }
  .anfahrt-map-cta { bottom: 12px; right: 12px; font-size: 0.8rem; padding: 8px 12px; }
}

/* Hamburg-Tipps Cards (auf Lage-Page) */
.tipps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .tipps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tipps-category {
  margin-top: clamp(40px, 5vw, 64px);
  scroll-margin-top: 120px;
}
.tipps-category-headline {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 auto 6px;
  max-width: 1080px;
  text-align: left;
  letter-spacing: 0.01em;
}
.tipps-category-lead {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin: 0 auto var(--s-3);
  max-width: 1080px;
  text-wrap: pretty;
}
.tipps-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  padding: var(--s-3);
  transition: all var(--dur) var(--ease);
}
/* 13.06.2026: Tipp-Karten-Buttons auf Kartenbreite begrenzen — liefen vorher über den Rand hinaus
   (z. B. „Zum Veranstaltungskalender" 376px in einer 344px-Karte). Jetzt volle Kartenbreite, mittig, umbruchsicher. */
.tipps-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.tipps-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-accent);
  box-shadow: var(--shadow-md);
}
.tipps-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 6px;
  display: block;
}
.tipps-card h3 { font-size: 1.375rem; margin-bottom: 6px; }
.tipps-card p { font-size: 0.9375rem; margin: 0; }

/* Anfahrt-Modi (Auto / Bahn / Flugzeug) */
.modes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
@media (min-width: 768px) {
  .modes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mode-card {
  padding: var(--s-3);
  background: var(--c-sand);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
}
.mode-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--s-1);
  color: var(--c-primary);
}
.mode-card ul { list-style: none; padding: 0; }
.mode-card li {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mode-card li:last-child { border-bottom: 0; }
.mode-card li strong { color: var(--c-ink); font-weight: 600; }

/* ============================================
   SPEISEKARTEN-MOTIFS — Doppelrahmen + Akzente
   ============================================ */

/* Doppelrahmen-Helper: nutzbar als .double-frame Klasse oder via custom prop */
.double-frame {
  position: relative;
  padding: var(--s-3);
}
.double-frame::before,
.double-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-accent);
  pointer-events: none;
}
.double-frame::after {
  inset: 6px;
  opacity: 0.55;
}

/* Booking-Card Inner-Frame Akzent (subtle) */
.booking-card {
  background: var(--c-cream);
}
.booking-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--c-accent);
  border-radius: calc(var(--radius-lg) - 6px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.booking-card > * { position: relative; z-index: 1; }

/* Logo: Goldakzent-Ring (statt Cream) — passt zur Speisekarte */
.logo-img {
  border-color: var(--c-cream) !important;
  box-shadow:
    0 0 0 2px var(--c-accent),
    0 14px 36px rgba(18, 60, 104, 0.28),
    0 3px 10px rgba(18, 60, 104, 0.14) !important;
}

/* Stats-numbers: Barlow Condensed Heavy für Speisekarten-Look */
.stats-number,
.usp-number,
.room-price,
.platform-rating,
.booking-from-price,
.location-distance,
.panorama-feature strong {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.stats-suffix {
  font-family: var(--f-display);
  color: var(--c-accent);
}

/* Reviews stars bleiben Gold (aus Speisekarten-Palette) */
.review-stars { color: var(--c-accent); }

/* Highlight-Text-Helfer (Weinrot Bold wie Produktnamen) */
.highlight {
  color: var(--c-highlight);
  font-weight: 700;
}

/* ============================================
   TYPOGRAPHIE-POLISH — Witwen vermeiden
   ============================================ */
.nowrap { white-space: nowrap; }

/* Verhindert 1-Wort-Zeilen am Absatz-Ende (Browser-Support: Chrome 117+, Safari 17.4+) */
p, .hero-lead, .review-text, .team-quote, .faq-answer p, blockquote {
  text-wrap: pretty;
}

/* Headlines: balance verteilt Text gleichmäßig auf Zeilen */
h1, h2, h3, .stats-label, .platform-name {
  text-wrap: balance;
}

/* Hero-Lead etwas atemmiger */
.hero-lead {
  letter-spacing: 0.01em;
  max-width: 580px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================
   ROOM MODAL — Detail-Dialog für Zimmer-Karten
   ============================================ */
.room-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  border: none;
  padding: 0;
  max-width: 720px;
  width: 92vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  background: var(--c-cream);
  box-shadow: 0 30px 80px rgba(18, 60, 104, 0.45);
  overflow: hidden;
  color: var(--c-ink);
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.room-modal::backdrop {
  background: rgba(18, 60, 104, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 16.06.2026: Auf Mobile den teuren Backdrop-Blur abschalten (deckender Hintergrund stattdessen) —
   Vollbild-blur + Video-Decode lassen schwächere Geräte einfrieren. Desktop behält den Blur. */
@media (max-width: 768px) {
  .room-modal::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 60, 104, 0.9);
  }
}
.room-modal[open] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
to { opacity: 0; transform: translateY(16px) scale(0.97); }
}
@keyframes backdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.room-modal-inner {
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 90vh;
  overflow: hidden;
  position: relative; /* Anker für das in die Ecke verschobene Schließen-✕ */
}
/* Korrektur 09.06.2026: Zimmer-Detail am Desktop = Bild links, Info rechts (Mobile bleibt gestapelt) */
@media (min-width: 860px) {
  .room-modal { max-width: 1060px; }
  .room-modal-inner {
    grid-template-rows: none;
    /* 14.06.2026: feste Foto-Spalte 560px + feste Höhe 560px → Box immer EXAKT quadratisch (560×560).
       So füllt das 1:1-Foto die linke Seite KOMPLETT (kein Leerraum, kein Beschnitt). Der Text (max. 536px)
       passt rechts ohne Scroll; nur auf sehr schmalen/niedrigen Fenstern scrollt er. */
    grid-template-columns: 560px minmax(0, 1fr);
    align-items: stretch;
    height: min(560px, 88vh);
  }
  /* Foto: 1:1 (von .room-modal-img geerbt), Breite = Spalte (560) → 560×560 füllt die Box.
     height:auto, damit aspect-ratio die Höhe treibt; align-self:center für das mittige Morphen zum Video. */
  .room-modal-inner .room-modal-img { width: 100%; height: auto; min-height: 0; align-self: center; }
  /* 13.06.2026: Video-Ansicht → Box bleibt volle Kastengröße (560×560) wie beim Foto, damit die Knöpfe an
     EXAKT derselben Stelle sitzen (unterer Kastenrand) und beim Blättern nicht springen. Das Video bleibt 16:9
     (560×315 = ganzes Video, kein Beschnitt), vertikal mittig; Pfeile & Zähler liegen unten im Creme-Bereich. */
  .room-modal-inner .room-modal-img.is-video { aspect-ratio: auto; height: min(560px, 88vh); display: flex; align-items: center; justify-content: center; }
  .room-modal-inner .room-modal-img.is-video .room-modal-video { height: 315px; flex: none; }
  .room-modal-inner .room-modal-body { overflow-y: auto; }
}
.room-modal-img {
  position: relative;
  /* 14.06.2026: quadratisch — alle Fotos sind 1200×1200, so sieht man sie randlos KOMPLETT (kein Beschnitt) */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* 13.06.2026: Hintergrund = Creme wie das Textpanel (nahtlos), Knöpfe dafür navy — Wunsch */
  background: var(--c-cream);
}
/* 13.06.2026: Video-Slide → Box wird 16:9 → ganzes Video sichtbar (kein Beschnitt, keine Balken);
   am Desktop mittig in der Spalte (creme oben/unten), auf Mobile rückt der Text darunter nach. */
.room-modal-img.is-video { aspect-ratio: 16 / 9; }
/* 13.06.2026: Fotos & Video werden VOLLSTÄNDIG gezeigt (contain, kein Beschnitt) — egal ob quer oder hoch.
   Hintergrund ist jetzt einfarbig blau, daher der unscharfe Bild-Klon deaktiviert. */
.room-modal-media-bg { display: none; }
.room-modal-img img,
.room-modal-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* 13.06.2026: Fotos UND Video füllen die Box randlos (kein Creme-Rand) — Knöpfe liegen auf dem Bild.
   Der 16:9-Rundgang wird in der hohen Box mittig beschnitten, schwenkt aber durchs Zimmer → wirkt voll & groß. */
.room-modal-img img,
.room-modal-video { object-fit: cover; }
/* 16.06.2026 (Fix): Video nimmt KEINE Taps an → ein Fingertipp kann nie aufs bildfüllende Video fallen,
   sondern nur auf X/Pfeile. Verhindert auf iOS, dass der Schließen-Tap „verschluckt" wird (Seite blieb inert). */
.room-modal-video { pointer-events: none; }
/* globales "img,video { display:block }" (Z.74) schlägt sonst das [hidden]-Attribut → Bild lag über dem Video */
.room-modal-img img[hidden],
.room-modal-img .room-modal-video[hidden] { display: none; }
/* 13.06.2026: unterer Navy-Verlauf entfernt — auf Creme-Hintergrund nicht mehr nötig (navy Pillen statt heller) */
.room-modal-img::after { display: none; }
.room-modal-tag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  background: var(--c-cream);
  color: var(--c-primary);
  padding: 6px 14px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(18, 60, 104, 0.2);
}
.room-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  /* 16.06.2026 (Fix): Tap-Treffer immer auf den Knopf, nie aufs darunterliegende Video; Touch sofort verarbeiten */
  pointer-events: auto;
  touch-action: manipulation;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 13.06.2026: sitzt jetzt in der äußeren Ecke über dem Preis (heller Panel-Grund) → navy für Kontrast */
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  box-shadow: 0 4px 14px rgba(11, 35, 66, 0.3);
}
.room-modal-close:hover {
  transform: rotate(90deg) scale(1.08);
  background: var(--c-highlight);
}
.room-modal-close svg { width: 18px; height: 18px; }

.room-modal-body {
  padding: var(--s-4);
  overflow-y: auto;
}
.room-modal-body h3 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.room-modal-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.room-modal-features span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.room-modal-features span::before {
  content: "•";
  color: var(--c-primary);
  opacity: 0.5;
}
.room-modal-features span:first-child::before { display: none; }
.room-modal-body p {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0 0 var(--s-3);
  max-width: none;
}
.room-includes {
  list-style: none;
  padding: var(--s-2) 0;
  margin: 0 0 var(--s-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px var(--s-3);
}
@media (min-width: 540px) {
  .room-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.room-includes li {
  font-size: 0.875rem;
  color: var(--c-ink);
  position: relative;
  padding-left: 22px;
  font-weight: 500;
}
.room-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}
/* Popup-Kopf: Zimmername links, Preis + "Direkt buchen" rechts daneben (kompakt) */
.room-modal-head {
  display: flex;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.room-modal-head h3 { margin: 0 auto 0 0; min-width: 0; }   /* Name links, schiebt Preis + Button nach rechts */
.room-modal-price-wrap { line-height: 1.05; white-space: nowrap; flex-shrink: 0; }
.room-modal-head .btn { white-space: nowrap; flex-shrink: 0; }
/* Mobile: Preis bleibt rechts NEBEN dem Namen; Button volle Breite darunter */
@media (max-width: 480px) {
  .room-modal-body h3 { font-size: 1.4rem; }
  .room-modal-price { font-size: 1.2rem; }
  .room-modal-price-label { display: inline; margin: 0; }
  .room-modal-price-wrap { line-height: 1.25; }
  .room-modal-head .btn { flex: 1 1 100%; text-align: center; }
}
.room-modal-price {
  font-family: var(--f-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.01em;
  line-height: 1;
}
.room-modal-price small {
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--c-ink-soft);
  letter-spacing: 0;
}
.room-modal-price-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 2px;
}

/* room-link als Button */
button.room-link {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================
   RATING CATEGORIES (Booking-Daten)
   ============================================ */
.rating-cats {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  max-width: 980px;
  margin: var(--s-5) auto 0;
}
.rating-cats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
}
.rating-cats-head h3 {
  font-size: 1rem;
  margin: 0;
  letter-spacing: 0.04em;
}
.rating-cats-head .source {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 500;
}
.rating-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-2);
}
.rating-cats-grid > * { min-width: 0; }
@media (min-width: 540px) { .rating-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rating-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rating-cat-name {
  /* 07/2026: größer + Navy — Kategorien deutlicher lesbar (Kundenwunsch) */
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  white-space: nowrap;
}
.rating-cat-bar {
  height: 5px;
  background: var(--c-sand);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.rating-cat-bar-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: 3px;
  transition: width 1200ms var(--ease-out);
}
.rating-cat:nth-child(-n+4) .rating-cat-bar-fill {
  background: var(--c-accent);
}
.rating-cat-bar-fill.is-gold {
  background: var(--c-accent);
}
.rating-cat-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rating-cat-value strong {
  /* 07/2026: Zahlen in Navy statt Gold + größer — deutlicher (Kundenwunsch) */
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.02em;
}
.rating-cat-value small {
  font-size: 0.625rem;
  color: var(--c-ink-soft);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.rating-cat.highlight .rating-cat-value strong { color: var(--c-primary); }

/* Stammgast-Badge */
.repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid var(--c-accent);
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-2);
}
.repeat-badge::before {
  content: "★";
  color: var(--c-accent);
  font-size: 0.875rem;
}

/* ============================================
   REVIEW CAROUSEL — Auto-Slider
   ============================================ */
.review-cards {
  position: relative;
  min-height: 240px;
  display: block !important;  /* override grid */
}
.review-cards .review-card {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  padding: var(--s-3);
  border-radius: var(--radius-lg);
  position: static;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.review-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--s-3);
}
.review-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur) var(--ease);
}
.review-dots button.is-active {
  background: var(--c-primary);
  transform: scale(1.4);
}
.review-dots button:hover:not(.is-active) {
  background: var(--c-primary-light);
}


/* ============================================
   REVIEWS SPLIT — Carousel | Rating-Cats nebeneinander
   ============================================ */
.reviews-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-3);
  align-items: stretch;
}
.reviews-split > * { min-width: 0; }
@media (min-width: 1024px) {
  .reviews-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
  }
}
.reviews-split-left {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.reviews-split .rating-cats {
  margin: 0;
  max-width: none;
}
.reviews-split .rating-cats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) 10px;
}
@media (min-width: 540px) {
  .reviews-split .rating-cats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* ============================================
   REVIEW SLIDES — smooth track slider
   ============================================ */
.review-track {
  display: flex;
  height: 100%;
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.review-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2);
}
.review-slide > * { min-width: 0; }
@media (max-width: 640px) { .review-slide { grid-template-columns: minmax(0, 1fr); } .review-cards { min-height: 520px; } }
/* Pagination dots verstecken */
.review-dots { display: none !important; }


/* ============================================
   HERO WETTER-WIDGET
   ============================================ */
.hero-weather {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
  padding: 8px 16px;
  background: rgba(248, 243, 232, 0.12);
  border: 1px solid rgba(248, 243, 232, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-size: 0.8125rem;
  color: rgba(248, 243, 232, 0.92);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.hero-weather svg { color: var(--c-accent); flex-shrink: 0; }
.hero-weather strong { color: var(--c-cream); font-weight: 700; }
.hero-weather-icon { display: inline-flex; }
.hero-weather-temp { color: var(--c-cream); }
.hero-weather-sep { opacity: 0.5; }
.hero-weather-desc { font-weight: 500; }
.hero-weather-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(248, 243, 232, 0.3);
  margin: 0 4px;
}
.hero-weather-extra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.85;
  font-size: 0.78rem;
  transition: opacity 400ms var(--ease);
}
.hero-weather[data-state="loading"] strong { opacity: 0.5; }
.hero-weather-extra.is-fading { opacity: 0; }
/* Mobile: the vertical divider strands at a wrapped line-end + a 2-line stadium pill
   looks accidental. Hide the divider, drop sunrise onto its own indented sub-line,
   soften the shape to a rounded rectangle. */
@media (max-width: 600px) {
  .hero-weather { border-radius: 14px; row-gap: 3px; }
  .hero-weather-divider { display: none; }
  .hero-weather-extra { flex-basis: 100%; padding-left: 24px; opacity: 0.7; }
}


/* ============================================
   NEWSLETTER (Egons Brief)
   ============================================ */
.footer-newsletter-lead {
  color: rgba(248, 243, 232, 0.65) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5;
  margin-bottom: 12px !important;
  max-width: 280px;
}
.newsletter-form {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(248, 243, 232, 0.08);
  border: 1px solid rgba(248, 243, 232, 0.18);
  border-radius: var(--radius-sm);
  color: var(--c-cream);
  font-size: 0.8125rem;
  font-family: var(--f-sans);
}
.newsletter-form input::placeholder { color: rgba(248, 243, 232, 0.4); }
.newsletter-form input:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(248, 243, 232, 0.12);
}
.newsletter-form button {
  width: 40px;
  height: 40px;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 700;
  transition: all var(--dur) var(--ease);
}
.newsletter-form button:hover { background: var(--c-cream); }
.footer-newsletter-meta {
  color: rgba(248, 243, 232, 0.38) !important;
  font-size: 0.6875rem !important;
  margin: 0 !important;
}


/* PDF-Download-Button */
.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-accent);
  border-radius: var(--radius-md);
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease);
}

/* Egon Lounge · CTA-Buttons nebeneinander */
.lounge-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.lounge-cta-row .btn { margin: 0; }
@media (max-width: 480px) {
  .lounge-cta-row { flex-direction: column; align-items: stretch; }
  .lounge-cta-row .btn { width: 100%; justify-content: center; }
}
.btn-pdf:hover {
  background: var(--c-accent);
  color: var(--c-primary-dark);
  border-color: var(--c-accent);
}
.btn-pdf svg { color: var(--c-accent); }
.btn-pdf:hover svg { color: var(--c-primary-dark); }


/* ============================================
   BEFORE/AFTER SLIDER (Renovierung)
   ============================================ */
.before-after { background: var(--c-cream); }
.ba-compare {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  user-select: none;
  cursor: ew-resize;
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-before {
  z-index: 1;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 50ms linear;
}
.ba-before img {
  filter: sepia(0.55) saturate(0.7) brightness(0.9);
}
.ba-after { z-index: 0; }
.ba-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--c-cream);
  z-index: 2;
  pointer-events: none;
  transition: left 50ms linear;
  box-shadow: 0 0 12px rgba(18, 60, 104, 0.4);
}
.ba-handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--c-cream);
  color: var(--c-primary);
  border-radius: 50%;
  padding: 11px;
  box-shadow: 0 4px 16px rgba(18, 60, 104, 0.35);
}
.ba-label {
  position: absolute;
  top: var(--s-2);
  z-index: 2;
  padding: 6px 14px;
  background: rgba(18, 60, 104, 0.85);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
  pointer-events: none;
}
.ba-label-before { left: var(--s-2); }
.ba-label-after { right: var(--s-2); background: var(--c-accent); color: var(--c-primary-dark); }


/* ============================================
   RENOVIERUNGS-CAROUSEL (Vor/Nach auf zimmer.html)
   Namespace: .renov-* — kollidiert nicht mit .reveal (Page-Load-Fade)
   ============================================ */
.renov-carousel-section { background: var(--c-cream); }
.renov-carousel {
  max-width: 1080px;
  margin: 0 auto;
}
.renov-stage { position: relative; }
/* Renov-Photo · einfacher Bildrahmen ohne Vorher/Nachher-Slider */
.renov-photo {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-primary-dark);
}
.renov-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.renov-year {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: var(--shadow-md);
}
.renov-scene { display: none; }
.renov-scene.is-active {
  display: block;
  animation: renovFade 380ms var(--ease-out);
}
@keyframes renovFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.renov-caption {
  text-align: center;
  margin-top: var(--s-3);
  max-width: 640px;
  margin-inline: auto;
}
.renov-caption h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 500;
  color: var(--c-primary);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.renov-caption p {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* Vorher-Placeholder */
.ba-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10)),
    repeating-linear-gradient(
      135deg,
      var(--c-sand) 0 18px,
      var(--c-sand-deep) 18px 36px
    );
  color: var(--c-primary);
}
.ba-placeholder-eyebrow {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(18, 60, 104, 0.10);
}
.ba-placeholder-text {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(18, 60, 104, 0.72);
  font-weight: 400;
  line-height: 1.4;
  max-width: 80%;
}

/* Solo-Szene (Bar — neu hinzugekommen) */
.ba-solo {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ba-solo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-label-new {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.ba-label-new svg { flex: 0 0 auto; }

/* Thumbnail-Navigation */
.renov-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--s-4);
  max-width: 760px;
  margin-inline: auto;
}
.renov-thumb {
  appearance: none;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 4px 7px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-family: var(--f-sans);
  text-align: center;
  position: relative;
}
.renov-thumb:hover { border-color: rgba(201, 169, 97, 0.45); }
.renov-thumb.is-active {
  border-color: var(--c-accent);
  background: rgba(255, 255, 255, 0.55);
}
.renov-thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  margin-bottom: 6px;
}
.renov-thumb-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.renov-thumb-label small {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  border-radius: 100px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  vertical-align: 1px;
}

@media (max-width: 720px) {
  .renov-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
  }
  .renov-thumb-label { font-size: 0.65rem; }
}
@media (max-width: 420px) {
  .renov-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================
   RENOV-STRIP (schmaler Cream-Streifen zwischen USP & Stats)
   Bild-Rotator + kurze Renovierungs-Story
   ============================================ */
.renov-strip {
  background: var(--c-cream);
  padding: var(--s-5) 0;
  position: relative;
}
.renov-strip-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-5);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.renov-strip-grid > * { min-width: 0; }
.renov-strip-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 20px 40px rgba(18, 60, 104, 0.18),
    0 6px 14px rgba(18, 60, 104, 0.10);
  background: var(--c-sand);
}
.renov-strip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  will-change: opacity;
}
.renov-strip-img.is-visible { opacity: 1; }
/* 07/2026: Ken-Burns-Zoom auf dem sichtbaren Bild — Sektion wirkt lebendiger */
@keyframes renovKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.renov-strip-img.is-visible {
  animation: renovKenBurns 5s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .renov-strip-img.is-visible { animation: none; }
}
/* 07/2026: Renovierungs-Chips unter dem Text (Kundenwunsch: Sektion lebendiger) */
.renov-strip-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--s-3) 0 0;
  padding: 0;
}
.renov-strip-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(221, 177, 60, 0.12);
  border: 1px solid rgba(221, 177, 60, 0.45);
  border-radius: 100px;
  padding: 6px 14px;
}
.renov-strip-chips li::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 800;
}
.renov-strip-badge {
  position: absolute;
  bottom: var(--s-2);
  left: var(--s-2);
  z-index: 2;
  padding: 7px 14px;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 6px 16px rgba(18, 60, 104, 0.30);
  pointer-events: none;
}
.renov-strip-text { color: var(--c-primary); }
.renov-strip-text .eyebrow {
  display: inline-block;
  margin-bottom: var(--s-2);
}
.renov-strip-text h2 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
  line-height: 1.06;
  letter-spacing: -0.005em;
  white-space: nowrap;        /* "Schritt fuer Schritt erneuert." bleibt auf EINER Zeile */
}
.renov-strip-text h2 em {
  color: var(--c-accent);
  font-style: normal;
}
.renov-strip-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-3);
  max-width: 54ch;
}
.renov-strip-text .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.renov-strip-text .link-arrow:hover {
  gap: 14px;
  color: var(--c-highlight);
  border-color: var(--c-highlight);
}

@media (max-width: 820px) {
  .renov-strip-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
  .renov-strip-media { max-width: 480px; margin: 0 auto; width: 100%; }
  .renov-strip-text h2 { font-size: clamp(1.2rem, 5.1vw, 2.3rem); }  /* nowrap-Titel auf Mobile passend halten */
}

@media (prefers-reduced-motion: reduce) {
  .renov-strip-img { transition: none; }
}


/* ============================================
   EGONS BRIEF (handgeschriebener Brief, ueber-uns.html)
   ============================================ */
.egon-letter-section {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 169, 97, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(201, 169, 97, 0.08), transparent 60%),
    var(--c-sand);
  padding: 4.75rem 0;
  position: relative;
  overflow: hidden;
}
.egon-letter-section::before {
  /* zarte Goldlinie oben mittig */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 18vw, 200px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
  opacity: 0.6;
}
.egon-letter {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: var(--c-cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(18, 60, 104, 0.025) 0 1px, transparent 1px 38px),
    radial-gradient(ellipse at 15% 5%, rgba(18, 60, 104, 0.04), transparent 60%),
    radial-gradient(ellipse at 85% 95%, rgba(139, 42, 47, 0.025), transparent 55%);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 64px);
  border-radius: 3px;
  box-shadow:
    0 30px 70px rgba(18, 60, 104, 0.22),
    0 10px 24px rgba(18, 60, 104, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: rotate(-0.5deg);
  font-family: 'Caveat', 'Brush Script MT', cursive;
  color: var(--c-primary);
}
.egon-letter-meta {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-2);
  text-align: right;
  font-weight: 400;
}
.egon-letter-greeting {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.85rem, 4vw, 2.4rem) !important;
  font-weight: 600;
  color: var(--c-primary);
  margin: 0 0 var(--s-3);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
}
.egon-letter-body p {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
  max-width: none;
}
.egon-letter-body p:last-child { margin-bottom: var(--s-3); }
.egon-letter-signature {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: clamp(2.6rem, 5.5vw, 3.4rem);
  font-weight: 600;
  font-style: italic;
  color: var(--c-highlight);
  line-height: 1;
  margin-top: var(--s-3);
  letter-spacing: 0.01em;
}
.egon-letter-role {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: 10px;
}
@media (max-width: 720px) {
  .egon-letter { transform: rotate(-0.3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .egon-letter { transform: none; }
}


/* ============================================
   TAGESABLAUF-TIMELINE (Gastronomie)
   ============================================ */
.day-timeline { background: var(--c-cream); }

.day-tabs {
  display: grid;
  /* 12.06.2026: 3 Tabs nach Verschmelzung Lounge+Kaffeezeit — vorher 4 Spalten = leere Spalte rechts */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 920px;
  margin: 0 auto var(--s-4);
  position: relative;
  border-bottom: 1px solid var(--c-line);
}
.day-tab {
  appearance: none;
  background: none;
  border: none;
  padding: 16px 12px;
  cursor: pointer;
  font-family: var(--f-sans);
  color: var(--c-ink-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: color var(--dur) var(--ease);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.day-tab:hover { color: var(--c-primary); }
.day-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-accent);
}
.day-tab-time {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: inherit;
  transition: color var(--dur) var(--ease);
}
.day-tab.is-active .day-tab-time { color: var(--c-accent); }
.day-tab-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.day-tab.is-active .day-tab-name { color: var(--c-primary); }

.day-stage {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.day-phase {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.day-phase.is-active {
  display: grid;
  animation: dayFade 420ms var(--ease-out);
}
.day-phase > * { min-width: 0; }
@keyframes dayFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.day-phase-img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.day-phase-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Korrektur 09.06.2026: oben beschneiden, damit mehr vom Essen sichtbar ist (Hochformat-Fotos) */
  object-position: 50% 70%;
  display: block;
}
/* 10.06.2026: gleiche Regel für die Gastro-Karten (Startseite + Kulinarik) und Cocktail-Karten —
   Fotos werden OBEN beschnitten statt unten, damit Essen/Theke sichtbar bleiben */
.gastro-image img,
.cocktail-card-image .cocktail-card-image-photo img {
  object-position: 50% 70%;
}
.day-phase-time {
  display: inline-block;
  padding: 5px 14px;
  background: var(--c-primary);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: var(--s-2);
}
.day-phase-text h3 {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
  line-height: 1.08;
  letter-spacing: -0.005em;
}
.day-phase-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-3);
  max-width: 50ch;
}
.day-phase-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
}
.day-phase-meta strong {
  color: var(--c-primary);
  font-weight: 700;
  margin-right: 6px;
}

@media (max-width: 820px) {
  .day-phase { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .day-tab { padding: 12px 6px; }
}
@media (max-width: 420px) {
  .day-tab-name { font-size: 0.6rem; letter-spacing: 0.1em; }
  .day-tab-time { font-size: 1rem; }
}


/* ============================================
   DEST-GRID (Hamburg liegt vor der Tür) — Card-Grid statt radiales SVG
   ============================================ */
.dest-grid-section { background: var(--c-sand); }
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  max-width: 1100px;
  margin: 0 auto;
}
.dest-grid > * { min-width: 0; }
.dest-card {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(18, 60, 104, 0.12);
  border-color: var(--c-accent);
}
.dest-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.dest-card:hover::before { opacity: 1; }
.dest-card-walk { background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-sand) 100%); }
.dest-card-walk::before {
  background: var(--c-accent);
  opacity: 1;
}
.dest-card-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 0;
}
.dest-card-num {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-primary);
  letter-spacing: -0.02em;
}
.dest-card-unit {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
}
.dest-card-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  align-self: flex-start;
}
.dest-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 4px 0 6px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.dest-card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}

@media (max-width: 820px) {
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .dest-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================
   DISTANZ-DIAGRAMM (Legacy · jetzt verwaist, sicherheitshalber unsichtbar)
   ============================================ */
.distance-diagram { display: none !important; }

.dist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.dist-grid > * { min-width: 0; }

.dist-svg-wrap {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}
.dist-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pfade vom Hotel zu den Zielen */
.dist-path {
  fill: none;
  stroke: rgba(18, 60, 104, 0.18);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  transition: stroke 350ms var(--ease), stroke-width 350ms var(--ease), opacity 350ms var(--ease);
}
.dist-path.is-active {
  stroke: var(--c-accent);
  stroke-width: 3;
  stroke-dasharray: none;
  animation: distDraw 700ms var(--ease-out) forwards;
}
@keyframes distDraw {
  from { stroke-dashoffset: 300; stroke-dasharray: 300; }
  to { stroke-dashoffset: 0; stroke-dasharray: none; }
}

/* Ziel-Pins */
.dist-pin {
  cursor: pointer;
  transition: transform 300ms var(--ease-out);
  transform-origin: center;
  transform-box: fill-box;
}
.dist-pin circle {
  fill: var(--c-cream);
  stroke: var(--c-primary);
  stroke-width: 2;
  transition: fill 300ms var(--ease), stroke 300ms var(--ease), r 300ms var(--ease-out);
}
.dist-pin text {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  fill: var(--c-primary);
  pointer-events: none;
  transition: fill 300ms var(--ease);
}
.dist-pin:hover circle { fill: var(--c-accent-soft); }
.dist-pin.is-active circle {
  fill: var(--c-accent);
  stroke: var(--c-accent);
  r: 26;
  filter: drop-shadow(0 4px 12px rgba(201, 169, 97, 0.45));
}
.dist-pin.is-active text { fill: var(--c-primary-dark); }

/* Hotel-Marker in der Mitte */
.dist-hotel circle:first-child {
  fill: var(--c-primary-dark);
  filter: drop-shadow(0 6px 16px rgba(18, 60, 104, 0.30));
}
.dist-hotel circle:nth-child(2) {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
}
.dist-hotel text {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 800;
  fill: var(--c-cream);
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* Ziel-Liste */
.dist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dist-item {
  appearance: none;
  background: var(--c-cream);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  width: 100%;
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.dist-item:hover {
  border-color: var(--c-accent-soft);
  transform: translateX(2px);
}
.dist-item.is-active {
  background: var(--c-cream);
  border-color: var(--c-accent);
  box-shadow: 0 8px 24px rgba(18, 60, 104, 0.10);
}
.dist-item-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-sand-deep);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  transition: all var(--dur) var(--ease);
}
.dist-item.is-active .dist-item-num {
  background: var(--c-accent);
  color: var(--c-primary-dark);
}
.dist-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dist-item-body strong {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.01em;
}
.dist-item-meta {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  font-weight: 500;
}
.dist-time {
  color: var(--c-accent);
  font-weight: 700;
  margin-right: 4px;
}
.dist-item-note {
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  opacity: 0.8;
  margin-top: 2px;
}

@media (max-width: 820px) {
  .dist-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .dist-svg-wrap { max-width: 420px; }
}


/* ============================================
   EGONS HAMBURG-KARTE (egon-empfiehlt.html)
   ============================================ */
.tipps-map-wrap {
  max-width: 1080px;
  margin: 0 auto var(--s-5);
}
.tipps-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tipps-map-area-label {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  fill: rgba(18, 60, 104, 0.30);
  text-transform: uppercase;
  pointer-events: none;
}
.tipps-map-river-label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  fill: rgba(31, 58, 107, 0.55);
  pointer-events: none;
}
.tipps-map-compass text {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: rgba(18, 60, 104, 0.45);
}

/* Hotel */
.tipps-map-hotel circle:first-child {
  fill: var(--c-primary-dark);
  filter: drop-shadow(0 4px 12px rgba(18, 60, 104, 0.30));
}
.tipps-map-hotel circle:nth-child(2) {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
}
.tipps-map-hotel text {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 800;
  fill: var(--c-cream);
  letter-spacing: 0.08em;
}
.tipps-map-hotel-label {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: var(--c-primary);
  text-transform: uppercase;
}

/* Pins */
.tipps-pin {
  cursor: pointer;
  transition: transform 280ms var(--ease-out);
  transform-origin: center;
  transform-box: fill-box;
}
.tipps-pin circle {
  fill: var(--c-cream);
  stroke: var(--c-primary);
  stroke-width: 2;
  transition: fill 250ms var(--ease), stroke 250ms var(--ease), r 250ms var(--ease-out);
  filter: drop-shadow(0 3px 6px rgba(18, 60, 104, 0.25));
}
.tipps-pin text {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  fill: var(--c-primary);
  pointer-events: none;
}
.tipps-pin:hover circle,
.tipps-pin:focus circle {
  fill: var(--c-accent);
  stroke: var(--c-accent);
  r: 24;
}
.tipps-pin:focus { outline: none; }
.tipps-pin:focus circle { filter: drop-shadow(0 0 0 3px rgba(201, 169, 97, 0.6)); }

/* Tipps-Karten – jetzt mit großer Nummer */
.tipps-card { position: relative; }
.tipps-num {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.40);
  z-index: 2;
}

/* Flash-Animation, wenn Karte aus der Map angeklickt wurde */
@keyframes tippsFlash {
  0%   { box-shadow: var(--shadow-sm); transform: translateY(0); }
  25%  { box-shadow: 0 0 0 4px var(--c-accent), 0 16px 36px rgba(201, 169, 97, 0.40); transform: translateY(-4px); }
  100% { box-shadow: var(--shadow-sm); transform: translateY(0); }
}
.tipps-card.is-flash {
  animation: tippsFlash 1500ms var(--ease-out);
}

@media (max-width: 720px) {
  .tipps-map-area-label { font-size: 10px; letter-spacing: 0.18em; }
}


/* ============================================
   HERO PARALLAX (subtile Bewegung beim Scroll)
   Wird per JS via --hero-parallax (in Pixel) gesetzt
   ============================================ */
.hero::before {
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
  transition: transform 0s linear;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { transform: none !important; }
}


/* ============================================
   PAGE TRANSITION (Cross-Fade beim Seitenwechsel)
   ============================================ */
@keyframes pageEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}
body {
  animation: pageEnter 280ms var(--ease-out) backwards;
  transition: opacity 220ms var(--ease-out);
}
body.is-leaving {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; transition: none; }
  body.is-leaving { opacity: 1; pointer-events: auto; }
}


/* ============================================
   PAGE WATERMARKS (hand-gezeichnete SVG-Decorations)
   Pro Sub-Page ein dezentes, animiertes Wasserzeichen
   ============================================ */
.page-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
  color: var(--c-accent);
  z-index: 1;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(201, 169, 97, 0.20));
}
.page-watermark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Position: kompakt im Hero-Bereich, RECHTS OBEN — auf dunklem Hero in Weiß */
.hero-inner .page-watermark {
  top: clamp(12px, 1.5vw, 24px);
  right: clamp(12px, 1.5vw, 24px);
  bottom: auto;
  width: clamp(140px, 17vw, 210px);
  height: clamp(140px, 17vw, 210px);
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.55;
  filter: drop-shadow(0 4px 18px rgba(255, 255, 255, 0.15));
}
.hero-inner .page-watermark svg text {
  fill: currentColor;
}

/* === Hafen-Set: alle 5 Watermarks im selben Rhythmus (5 s, gleiches Easing) === */

/* ANKER (Lage): schwingt an der Kette */
.page-watermark--wm-anchor svg {
  transform-origin: 50% 17.5%;
  animation: wmAnchorSway 5s ease-in-out infinite;
}
@keyframes wmAnchorSway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* MÖWE (Gastronomie): segelt im selben Rhythmus */
.page-watermark--wm-cup svg {
  transform-origin: 50% 50%;
  animation: wmSeagullFly 5s ease-in-out infinite;
}
@keyframes wmSeagullFly {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

/* BULLAUGE (Zimmer): wiegt sanft wie ein Schiff auf der Welle */
.page-watermark--wm-key svg {
  transform-origin: 50% 50%;
  animation: wmPortholeRock 5s ease-in-out infinite;
}
@keyframes wmPortholeRock {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
/* Wellen im Glas fließen sanft */
.page-watermark--wm-key svg path {
  animation: wmPortholeWaves 5s ease-in-out infinite;
}
.page-watermark--wm-key svg path:nth-of-type(2) { animation-delay: 0.4s; }
@keyframes wmPortholeWaves {
  0%, 100% { transform: translateX(-2px); }
  50%      { transform: translateX(2px); }
}

/* WELLEN (Egon empfiehlt): fließen sanft */
.page-watermark--wm-stamp svg path {
  transform-box: fill-box;
  animation: wmWavesFlow 5s ease-in-out infinite;
}
.page-watermark--wm-stamp svg path:nth-of-type(2) { animation-delay: 0.4s; }
.page-watermark--wm-stamp svg path:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes wmWavesFlow {
  0%, 100% { transform: translateX(-6px); opacity: 0.6; }
  50%      { transform: translateX(6px); opacity: 1; }
}

/* LEUCHTTURM (Über uns): pulsiert sanft, Sonnenstrahlen blinken im Takt */
.page-watermark--wm-crest svg {
  transform-origin: 50% 100%;
  animation: wmLighthousePulse 5s ease-in-out infinite;
}
@keyframes wmLighthousePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15)); }
  50%      { transform: scale(1.02); filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.45)); }
}
/* Die Sonnenstrahlen oben (stroke-width 4 lines) blinken im Lichtturm-Rhythmus */
.page-watermark--wm-crest svg line[stroke-width="4"] {
  animation: wmLighthouseRay 5s ease-in-out infinite;
}
@keyframes wmLighthouseRay {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-watermark svg,
  .page-watermark svg path,
  .page-watermark svg circle {
    animation: none !important;
  }
}

/* Pro-Seiten-Wasserzeichen als Sektions-Akzent (cream sections) */
.section-watermark-wrap {
  position: relative;
  overflow: hidden;
}
.section-watermark {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%) rotate(-12deg);
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  opacity: 0.05;
  pointer-events: none;
  color: var(--c-primary);
  z-index: 0;
}
.section-watermark svg { width: 100%; height: 100%; display: block; }
.section-watermark-wrap > .container { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .hero-inner .page-watermark { display: none; }
}




/* ============================================
   EGON SAGT — Caveat-Handschrift-Snippet im Sub-Page-Hero
   Kein Kasten · nur Schrift · kräftiger Text
   ============================================ */
.egon-says {
  position: relative;
  margin-top: var(--s-3);
  padding: 0;
  background: none;
  border: none;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.egon-says-icon {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 2.4rem;
  line-height: 0.5;
  color: var(--c-accent);
  opacity: 0.7;
  margin-bottom: -4px;
  display: inline-block;
}
.egon-says-text {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--c-cream);
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-wrap: pretty;
  text-wrap: balance;
}
.egon-says-sign {
  font-family: 'Caveat', cursive;
  font-size: 1.45rem;
  font-weight: 600;
  font-style: italic;
  color: var(--c-accent);
  align-self: flex-start;
  line-height: 1;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .egon-says { max-width: none; }
  .egon-says-icon { font-size: 2rem; }
}


/* ============================================
   AUSSICHT-TOGGLE auf jeder Zimmer-Card
   .room-image hat schon aspect-ratio + position:relative von der Original-Regel
   ============================================ */
.room-image-inside,
.room-image-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 380ms var(--ease);
}
.room-image-inside.is-visible,
.room-image-view.is-visible { opacity: 1; }

.room-view-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(18, 60, 104, 0.78);
  color: var(--c-cream);
  border: 1px solid rgba(248, 243, 232, 0.20);
  border-radius: 100px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.room-view-toggle:hover {
  background: var(--c-accent);
  color: var(--c-primary-dark);
  border-color: var(--c-accent);
}
.room-view-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }
.room-view-icon-back { display: none; }
.room-view-toggle[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-primary-dark);
  border-color: var(--c-accent);
}
.room-view-toggle[aria-pressed="true"] .room-view-icon-eye { display: none; }
.room-view-toggle[aria-pressed="true"] .room-view-icon-back { display: block; }


/* ============================================
   ROOM WIZARD (Welches Zimmer passt zu Ihnen?)
   ============================================ */
.room-wizard {
  background: linear-gradient(180deg, var(--c-sand) 0%, var(--c-cream) 100%);
}
.wizard-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--c-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  min-height: 380px;
}
.wizard-step {
  display: none;
  animation: wizardSlide 380ms var(--ease-out);
}
.wizard-step.is-active { display: block; }
@keyframes wizardSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
.wizard-step-meta {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.wizard-step h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 var(--s-3);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.wizard-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  margin-bottom: var(--s-2);
  background: none;
  border: none;
  color: var(--c-ink-soft);
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.wizard-back:hover { color: var(--c-primary); }

.wizard-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
.wizard-options-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wizard-option {
  appearance: none;
  background: var(--c-cream);
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: all var(--dur) var(--ease);
  color: var(--c-primary);
  font-family: var(--f-sans);
}
.wizard-option:hover {
  border-color: var(--c-accent);
  background: var(--c-sand);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(18, 60, 104, 0.10);
}
.wizard-option-icon {
  width: 44px;
  height: 44px;
  color: var(--c-accent);
}
.wizard-option-icon svg { width: 100%; height: 100%; }
.wizard-option-label {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-primary);
}
.wizard-option-wide {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-3);
  text-align: left;
  gap: 4px;
}
.wizard-option-sub {
  font-size: 0.8rem;
  color: var(--c-ink-soft);
  font-weight: 400;
  line-height: 1.4;
}

/* RESULT */
.wizard-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-3);
}
.wizard-result-grid > * { min-width: 0; }
.wizard-result-img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-sand);
}
.wizard-result-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wizard-result-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  font-family: var(--f-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: var(--s-2);
}
.wizard-result-text h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 var(--s-2);
}
.wizard-result-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-highlight);
  font-weight: 500;
  margin: 0 0 var(--s-3);
  padding-left: 12px;
  border-left: 2px solid var(--c-accent);
  line-height: 1.45;
}
.wizard-result-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: 0.85rem;
  color: var(--c-ink-soft);
}
.wizard-result-price {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-primary);
}
.wizard-result-price small {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  color: var(--c-ink-soft);
  font-weight: 500;
  margin-left: 4px;
}
.wizard-result-cta {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .wizard-options { grid-template-columns: minmax(0, 1fr); }
  .wizard-options-grid { grid-template-columns: minmax(0, 1fr); }
  .wizard-option { flex-direction: row; padding: var(--s-2); justify-content: flex-start; }
  .wizard-option-icon { width: 32px; height: 32px; }
  .wizard-result-grid { grid-template-columns: minmax(0, 1fr); }
}

/* === Kompakte Wizard-Variante (im Zimmer-Hero, neben dem Titel) === */
.wizard-card-compact {
  padding: clamp(20px, 2.5vw, 30px) clamp(22px, 2.6vw, 32px);
  max-width: none;
  min-height: 0;
}
.wizard-compact-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.wizard-progress {
  display: flex;
  gap: 6px;
  margin-bottom: var(--s-2);
  justify-content: center;
}
.wizard-progress-dot {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-line);
  transition: background 300ms var(--ease);
}
.wizard-progress-dot.is-active { background: var(--c-accent); }
.wizard-card-compact .wizard-step-meta {
  font-size: 0.62rem;
  margin-bottom: 6px;
}
.wizard-card-compact .wizard-step h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  margin-bottom: var(--s-2);
}
.wizard-card-compact .wizard-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wizard-card-compact .wizard-option {
  padding: 14px 8px;
  gap: 7px;
  border-width: 1px;
}
.wizard-card-compact .wizard-option-icon {
  width: 30px;
  height: 30px;
}
.wizard-card-compact .wizard-option-label {
  font-size: 0.78rem;
}

/* Step 2 (Priorität) gestapelt im kompakten Card */
.wizard-card-compact .wizard-options-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.wizard-card-compact .wizard-option-wide {
  padding: 10px 14px;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.wizard-card-compact .wizard-option-wide .wizard-option-label {
  font-size: 0.92rem;
  font-weight: 700;
}

/* Result-Variante: Bild oben, Text unten — wie ein gestapelter Mini-Steckbrief */
.wizard-card-compact .wizard-result-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}
.wizard-card-compact .wizard-result-img {
  aspect-ratio: 16/9;
}
.wizard-card-compact .wizard-result-text h3 {
  font-size: 1.35rem;
}
.wizard-card-compact .wizard-result-quote {
  font-size: 0.92rem;
  margin-bottom: var(--s-2);
}
.wizard-card-compact .wizard-result-meta {
  font-size: 0.78rem;
  padding-top: 10px;
  margin-bottom: var(--s-2);
}
.wizard-card-compact .wizard-result-price {
  font-size: 1.2rem;
}
.wizard-card-compact .wizard-back {
  font-size: 0.65rem;
  margin-bottom: 4px;
}

/* Zimmer-Hero: zwei Spalten ab 1024 (linker Text, rechts Wizard) */
@media (min-width: 1024px) {
  .hero-inner .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-6);
    align-items: center;
  }
}
@media (max-width: 1023px) {
  .wizard-card-compact { max-width: 480px; margin: var(--s-3) auto 0; }
}


/* ============================================
   FLOOR PLAN SWITCHER (Grundriss · Zimmer)
   ============================================ */
.floor-plan { background: var(--c-cream); }

.floor-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: var(--s-5);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
.floor-grid > * { min-width: 0; }
.floor-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: sticky;
  top: 96px;
}
.floor-info .section-head {
  text-align: left;
  margin: 0;
  max-width: none;
}
.floor-info .section-head h2 {
  text-wrap: balance;
}
.floor-info .floor-detail {
  position: static;
  top: auto;
}
.floor-svg-wrap {
  background: var(--c-sand);
  border-radius: var(--radius-md);
  padding: var(--s-3);
  position: relative;
}
.floor-meta {
  margin-bottom: var(--s-2);
  text-align: center;
}
.floor-meta-label {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.floor-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 8/5;
  display: block;
}
.floor-side-label {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  fill: rgba(18, 60, 104, 0.35);
  pointer-events: none;
}
.floor-corridor-label {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  fill: rgba(18, 60, 104, 0.30);
  pointer-events: none;
}

/* Räume */
.floor-room {
  cursor: pointer;
}
.floor-room rect {
  fill: var(--c-cream);
  stroke: rgba(18, 60, 104, 0.35);
  stroke-width: 1.5;
  transition: fill 250ms var(--ease), stroke 250ms var(--ease);
}
.floor-room text {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  fill: var(--c-primary);
  pointer-events: none;
  transition: fill 250ms var(--ease);
}
.floor-room-meta {
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  fill: var(--c-ink-soft) !important;
}
.floor-room-tag {
  font-family: var(--f-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  fill: var(--c-accent) !important;
}
.floor-room:hover rect { fill: var(--c-sand-deep); stroke: var(--c-accent); }
.floor-room:focus { outline: none; }
.floor-room.is-active rect {
  fill: var(--c-accent);
  stroke: var(--c-accent);
}
.floor-room.is-active text { fill: var(--c-primary-dark); }
.floor-room.is-active .floor-room-meta { fill: rgba(18, 60, 104, 0.7) !important; }
.floor-room.is-active .floor-room-tag { fill: var(--c-primary-dark) !important; }

/* Aufzug + Features */
.floor-feature rect {
  fill: rgba(18, 60, 104, 0.08);
  stroke: rgba(18, 60, 104, 0.20);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.floor-feature text {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 700;
  fill: var(--c-primary);
  pointer-events: none;
}
.floor-feature-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  fill: var(--c-ink-soft) !important;
  text-transform: uppercase;
}

/* Detail-Panel rechts */
.floor-detail {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--s-3);
  position: sticky;
  top: 96px;
}
.floor-detail-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--c-sand-deep);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: var(--s-2);
}
.floor-detail.is-room .floor-detail-tag {
  background: var(--c-accent);
  color: var(--c-primary-dark);
}
.floor-detail h3 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  margin: 0 0 var(--s-2);
  color: var(--c-primary);
  line-height: 1.1;
}
.floor-detail p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-2);
}
.floor-detail-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  gap: 8px 18px;
}
.floor-detail-list li {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--c-primary);
  padding-left: 16px;
  position: relative;
  white-space: nowrap;
}
.floor-detail-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

@media (max-width: 820px) {
  .floor-grid { grid-template-columns: minmax(0, 1fr); }
  .floor-detail { position: static; }
  .floor-info { position: static; }
  .floor-info .section-head { text-align: center; }
}


/* ============================================
   EGONS SONNTAGSSPAZIERGANG · Walking Tour
   ============================================ */
.walking-tour { background: var(--c-cream); }

.walk-route {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 920px;
  position: relative;
  counter-reset: step;
}
.walk-route::before {
  /* Vertikale Goldlinie als verbindender Weg */
  content: "";
  position: absolute;
  left: 28px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--c-accent) 0%,
    var(--c-accent) 96%,
    transparent 100%);
  opacity: 0.5;
  z-index: 0;
}
.walk-station {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  align-items: flex-start;
}
.walk-station-marker {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.walk-station-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-primary);
  border: 2px solid var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(18, 60, 104, 0.10);
}
.walk-station-time {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.walk-leg {
  grid-column: 1 / -1;
  justify-self: center;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-2);
  white-space: nowrap;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.walk-leg-arrow {
  color: var(--c-accent);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}
.walk-station {
  grid-template-areas:
    "leg leg"
    "marker body";
}
.walk-station-marker { grid-area: marker; }
.walk-station-body { grid-area: body; }

.walk-station-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-3);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  align-items: stretch;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.walk-station:hover .walk-station-body {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(18, 60, 104, 0.12);
}
.walk-station-body > * { min-width: 0; }
.walk-station-photo {
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  background: var(--c-sand);
  position: relative;
}
.walk-station-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.walk-station:hover .walk-station-photo img { transform: scale(1.04); }
.walk-station-text {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.walk-station-text h3 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--c-primary);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.walk-station-text p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-2);
}
.walk-station-tip {
  display: block;
  background: var(--c-sand);
  border-left: 3px solid var(--c-accent);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--c-primary);
  font-family: var(--f-sans);
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}
.walk-station-tip strong {
  color: var(--c-accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.walk-footer {
  max-width: 920px;
  margin: var(--s-4) auto 0;
  padding-left: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 0.85rem;
  color: var(--c-ink-soft);
}
.walk-footer strong {
  color: var(--c-primary);
  font-weight: 700;
}

@media (max-width: 820px) {
  .walk-station-body { grid-template-columns: minmax(0, 1fr); }
  .walk-station { grid-template-columns: 50px minmax(0, 1fr); gap: var(--s-2); }
  .walk-station-num { width: 46px; height: 46px; font-size: 1.3rem; }
  .walk-route::before { left: 23px; }
  .walk-footer { padding-left: 0; }
}


/* ============================================
   HAMBURG IN GESCHICHTEN
   ============================================ */
.hamburg-stories { background: var(--c-cream); }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 1080px;
  margin: 0 auto;
}
.stories-grid > * { min-width: 0; }
.story-card {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(18, 60, 104, 0.12);
}
.story-card-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--c-sand);
}
.story-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--ease-out);
}
.story-card:hover .story-card-img img { transform: scale(1.04); }
.story-card-text {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.story-card-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 6px;
}
.story-card-text h3 {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.story-card-text p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-2);
  flex: 1;
}
.story-card-meta {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  color: var(--c-primary);
  font-weight: 600;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
  letter-spacing: 0.01em;
}
.stories-footer {
  margin-top: var(--s-4);
  text-align: center;
  max-width: 1080px;
  margin-inline: auto;
}
.stories-footer p {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
}
.stories-footer .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.stories-footer .link-arrow:hover { gap: 12px; color: var(--c-highlight); }

@media (max-width: 720px) {
  .stories-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================
   ANGEBOTE-SEITE — Watermark, Hero-Badges, Mood-Strip,
   Photo-Offer-Cards, Stories, Direct-vs-Portal
   ============================================ */

/* SCHATZTRUHE (Angebote): wiegt sanft auf den Füßen, Sparkles blinken im Takt */
.page-watermark--wm-chest svg {
  transform-origin: 50% 85%;
  animation: wmChestRock 5s ease-in-out infinite;
}
@keyframes wmChestRock {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.page-watermark--wm-chest svg .chest-sparkles {
  transform-origin: 50% 50%;
  animation: wmChestSparkle 5s ease-in-out infinite;
}
@keyframes wmChestSparkle {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* HERO TRUST BADGES */
.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(248, 243, 232, 0.10);
  border: 1px solid rgba(248, 243, 232, 0.22);
  padding: 7px 14px;
  border-radius: 24px;
  font-size: 0.78rem;
  color: rgba(248, 243, 232, 0.94);
  font-weight: 500;
  font-family: var(--f-sans);
  backdrop-filter: blur(6px);
}
.trust-badge svg {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* MOOD STRIP (Inspiration mit Fotos) */
.mood-strip {
  padding: clamp(50px, 7vw, 90px) 0;
  background: #fff;
}
.mood-strip-head {
  text-align: center;
  margin: 0 auto clamp(28px, 4vw, 48px);
  max-width: 680px;
}
.mood-strip-head h2 {
  margin: 0;
}
.mood-strip-lead {
  margin-top: 14px;
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.mood-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.mood-tile {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px 12px 4px 12px;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.mood-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.mood-tile:hover img { transform: scale(1.08); }
.mood-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 60, 104, 0) 35%, rgba(18, 60, 104, 0.92) 100%);
  pointer-events: none;
}
.mood-tile-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  color: var(--c-cream);
  font-family: var(--f-display);
  font-size: clamp(0.92rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-wrap: balance;
  z-index: 2;
}
.mood-tile-meta {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--c-accent);
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
@media (max-width: 880px) {
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .mood-grid { grid-template-columns: minmax(0, 1fr); }
  .mood-tile { aspect-ratio: 16/10; }
}

/* OFFERS SECTION */
.offers-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--c-cream);
}
.offers-section .section-head {
  margin-bottom: clamp(36px, 5vw, 56px);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  align-items: stretch;
}
/* Desktop: feste 6-Spalten · obere Reihe 3×2 Spalten · untere Reihe 2×3 Spalten
   → untere zwei Karten zusammen genauso breit wie die drei oberen
   → letzte Reihe horizontal (Foto links, Content rechts) für kompaktere Höhe */
@media (min-width: 980px) {
  .offers-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .offers-grid .offer-card {
    grid-column: span 2;
  }
  /* Letzte Reihe (Karten 4+5): jede Karte spannt 3 Spalten → 50/50 Aufteilung */
  .offers-grid .offer-card:nth-child(4):nth-last-child(2) {
    grid-column: 1 / span 3;
  }
  .offers-grid .offer-card:nth-child(5):nth-last-child(1) {
    grid-column: 4 / span 3;
  }
  /* Horizontal-Layout: Foto links 38 %, Content rechts → wesentlich kürzer in der Höhe */
  .offers-grid .offer-card:nth-child(4):nth-last-child(2),
  .offers-grid .offer-card:nth-child(5):nth-last-child(1) {
    flex-direction: row;
  }
  .offers-grid .offer-card:nth-child(4):nth-last-child(2) .offer-photo,
  .offers-grid .offer-card:nth-child(5):nth-last-child(1) .offer-photo {
    aspect-ratio: auto;
    width: 38%;
    flex-shrink: 0;
    align-self: stretch;
  }
  .offers-grid .offer-card:nth-child(4):nth-last-child(2) .offer-photo img,
  .offers-grid .offer-card:nth-child(5):nth-last-child(1) .offer-photo img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* OFFER CARD V2 (mit Foto, Badges, Pricing, Quote) */
.offer-card {
  background: #fff;
  border-radius: 4px 12px 4px 12px;
  padding: 0;
  box-shadow: 0 10px 28px rgba(18, 60, 104, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  border-top: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(18, 60, 104, 0.16);
}
.offer-card.is-featured {
  background: var(--c-primary);
  color: var(--c-cream);
}

.offer-photo {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--c-cream);
}
.offer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.offer-card:hover .offer-photo img { transform: scale(1.05); }

.offer-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 4px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  color: var(--c-primary);
  backdrop-filter: blur(6px);
}
.offer-badge-popular { background: var(--c-accent); color: var(--c-primary); }
.offer-badge-house   { background: var(--c-highlight); color: var(--c-cream); }
.offer-badge-premium { background: var(--c-primary); color: var(--c-cream); }
.offer-badge-saving  { background: #2D7D5A; color: var(--c-cream); }

.offer-body {
  padding: clamp(22px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.offer-eyebrow {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
}

.offer-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--c-primary);
}
.offer-card.is-featured h3 { color: var(--c-cream); }

.offer-story {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  text-wrap: pretty;
  margin: 0;
}
.offer-card.is-featured .offer-story { color: rgba(248, 243, 232, 0.88); }

.offer-includes {
  list-style: none;
  padding: 14px 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.offer-card.is-featured .offer-includes {
  border-top-color: rgba(248, 243, 232, 0.16);
  border-bottom-color: rgba(248, 243, 232, 0.16);
}
.offer-includes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--c-ink-soft);
}
.offer-card.is-featured .offer-includes li { color: rgba(248, 243, 232, 0.84); }
.offer-includes li::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.4;
  font-size: 0.9rem;
}

.offer-quote {
  background: var(--c-cream);
  border-left: 3px solid var(--c-accent);
  padding: 12px 14px;
  margin: 0;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-primary);
  border-radius: 0 6px 6px 0;
}
.offer-card.is-featured .offer-quote {
  background: rgba(248, 243, 232, 0.08);
  border-left-color: var(--c-accent);
  color: rgba(248, 243, 232, 0.94);
}
.offer-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
}
.offer-card.is-featured .offer-quote cite { color: rgba(248, 243, 232, 0.6); }

.offer-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}
.offer-pricing {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.offer-price-old {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  text-decoration: line-through;
  font-weight: 500;
}
.offer-card.is-featured .offer-price-old { color: rgba(248, 243, 232, 0.45); }
.offer-price {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.offer-card.is-featured .offer-price { color: var(--c-accent); }
.offer-price-meta {
  font-size: 0.76rem;
  color: var(--c-ink-soft);
  margin-top: 5px;
  line-height: 1.45;
}
.offer-card.is-featured .offer-price-meta { color: rgba(248, 243, 232, 0.7); }
.offer-price-meta strong {
  color: var(--c-highlight);
  font-weight: 700;
}
.offer-card.is-featured .offer-price-meta strong {
  color: var(--c-accent);
}

.offer-cta {
  background: var(--c-primary);
  color: var(--c-cream);
  padding: 13px 20px;
  border-radius: 4px;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  display: block;
  transition: background 0.2s ease, color 0.2s ease;
}
.offer-card.is-featured .offer-cta {
  background: var(--c-accent);
  color: var(--c-primary);
}
.offer-cta:hover {
  background: var(--c-accent);
  color: var(--c-primary);
}
.offer-card.is-featured .offer-cta:hover {
  background: var(--c-cream);
  color: var(--c-primary);
}

/* OFFERS INTRO (Vier Vertrauenssignale) */
.offers-intro {
  padding: clamp(40px, 6vw, 70px) 0;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.offers-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1080px;
  margin: 0 auto;
}
.offers-intro-item {
  text-align: center;
  padding: 12px 8px;
}
.offers-intro-item svg {
  width: 36px;
  height: 36px;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.offers-intro-item h4 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--c-primary);
}
.offers-intro-item p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}

/* AKTUELLE DEALS / VORTEILE (zusätzlicher Angebote-Reiter) */
.deals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.deal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent);
}
.deal-card.is-highlight { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; }
.deal-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(27, 79, 130, 0.08);
  padding: 4px 11px;
  border-radius: 999px;
}
.deal-tag-gold { color: #7A5E16; background: rgba(221, 177, 60, 0.22); }
.deal-card h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  line-height: 1.12;
  color: var(--c-primary);
  margin: 2px 0 0;
}
.deal-card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}
.deal-card p strong { color: var(--c-primary); }
.deal-soon { color: var(--c-accent); font-weight: 600; font-style: italic; }
.deal-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 15px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.deal-cta:hover { background: var(--c-primary-dark); color: var(--c-white); transform: translateY(-1px); }
.deal-card.is-highlight .deal-cta { background: var(--c-accent); color: #3c2d09; }
.deal-card.is-highlight .deal-cta:hover { background: #c89c30; color: #3c2d09; transform: translateY(-1px); }
.deals-note {
  text-align: center;
  margin-top: var(--s-4);
  color: var(--c-ink-soft);
  font-size: 0.95rem;
}
.deals-note a { color: var(--c-primary); font-weight: 600; }
@media (max-width: 900px) { .deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .deals-grid { grid-template-columns: 1fr; } }

/* GUEST STORIES (Social Proof) */
.offer-stories {
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;
}
.offer-stories .section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.story-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.story-card {
  background: var(--c-cream);
  padding: clamp(24px, 3vw, 32px);
  border-radius: 4px 12px 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.story-card::before {
  content: "\201C";
  font-family: var(--f-display);
  position: absolute;
  top: -8px;
  left: 18px;
  font-size: 5.5rem;
  color: var(--c-accent);
  line-height: 1;
  opacity: 0.45;
  pointer-events: none;
}
.story-rating {
  color: var(--c-accent);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}
.story-card blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-primary);
  font-weight: 500;
  text-wrap: pretty;
  position: relative;
  z-index: 1;
}
.story-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  margin-top: auto;
}
.story-avatar {
  width: 40px;
  height: 40px;
  background: var(--c-primary);
  color: var(--c-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.story-author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.story-author-info strong {
  font-family: var(--f-display);
  color: var(--c-primary);
  font-size: 0.95rem;
}
.story-author-info span {
  font-size: 0.74rem;
  color: var(--c-ink-soft);
}
.story-source {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

/* DIRECT VS PORTAL */
.offer-vs {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--c-cream);
}
.offer-vs .section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(30px, 4vw, 50px);
}
.vs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.vs-col {
  background: #fff;
  border-radius: 4px 12px 4px 12px;
  padding: clamp(28px, 3.5vw, 40px);
  position: relative;
}
.vs-col-direct {
  background: var(--c-primary);
  color: var(--c-cream);
  box-shadow: 0 16px 40px rgba(18, 60, 104, 0.20);
}
.vs-col-direct::before {
  content: "EMPFOHLEN";
  position: absolute;
  top: -10px;
  left: 28px;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 3px;
}
.vs-col h3 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  margin: 0 0 18px 0;
  color: var(--c-primary);
}
.vs-col-direct h3 { color: var(--c-cream); }
.vs-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vs-col li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.vs-col-direct li { color: rgba(248, 243, 232, 0.94); }
.vs-col li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.vs-col-direct li svg { color: var(--c-accent); }
.vs-col-portal li svg { color: #B23A3A; opacity: 0.7; }
.vs-col li strong { color: var(--c-primary); font-weight: 700; }
.vs-col-direct li strong { color: var(--c-accent); }

/* MOBILE OFFER ADJUSTMENTS */
@media (max-width: 600px) {
  .offer-body { padding: 22px; }
  .offer-photo { aspect-ratio: 4/3; }
}

/* ============================================
   ANGEBOTS-WIZARD — 3-Schritt-Empfehlungstool
   ============================================ */
.wizard-section {
  padding: clamp(50px, 7vw, 80px) 0;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
}
.wizard {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px 12px 4px 12px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 16px 36px rgba(18, 60, 104, 0.10);
  position: relative;
  overflow: hidden;
}
.wizard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-accent);
}
.wizard-head {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.wizard-head .eyebrow { display: block; }
.wizard-head h2 { margin: 8px 0 0 0; }
.wizard-head p {
  margin: 12px auto 0;
  color: var(--c-ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 540px;
}

.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.wizard-progress .wizard-step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 1.5px solid var(--c-line);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1;
  color: var(--c-ink-soft);
  transition: all 0.3s ease;
  flex-shrink: 0;
  padding: 0;
  text-align: center;
}
.wizard-progress .wizard-step.is-active {
  display: flex !important;
  background: var(--c-primary);
  color: var(--c-cream);
  border-color: var(--c-primary);
  transform: scale(1.1);
}
.wizard-progress .wizard-step.is-done {
  display: flex !important;
  background: var(--c-accent);
  color: var(--c-primary);
  border-color: var(--c-accent);
}
.wizard-progress-line {
  width: clamp(28px, 5vw, 50px);
  height: 1.5px;
  background: var(--c-line);
  transition: background 0.3s ease;
}
.wizard-progress-line.is-done { background: var(--c-accent); }

.wizard-step-panel { display: none; }
.wizard-step-panel.is-active {
  display: block;
  animation: wizardFadeIn 0.35s ease;
}
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wizard-question {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 20px 0;
  text-align: center;
  color: var(--c-primary);
  text-wrap: balance;
  line-height: 1.2;
}

.wizard-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
}
.wizard-option {
  background: var(--c-cream);
  border: 1.5px solid var(--c-line);
  padding: 18px 14px;
  border-radius: 4px 12px 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: var(--f-sans);
}
.wizard-option:hover {
  border-color: var(--c-accent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 60, 104, 0.08);
}
.wizard-option.is-selected {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-cream);
  transform: translateY(-2px);
}
.wizard-option-label {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.15;
}
.wizard-option.is-selected .wizard-option-label { color: var(--c-cream); }
.wizard-option-meta {
  font-size: 0.74rem;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.wizard-option.is-selected .wizard-option-meta { color: rgba(248, 243, 232, 0.72); }

.wizard-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  min-height: 36px;
}
.wizard-back {
  background: none;
  border: none;
  color: var(--c-ink-soft);
  font-family: var(--f-sans);
  font-size: 0.84rem;
  cursor: pointer;
  padding: 6px 12px;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.wizard-back:hover { color: var(--c-primary); }
.wizard-back[hidden] { display: none; }

/* RESULT-PANEL */
.wizard-result {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.wizard-result-photo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4/3;
  border-radius: 4px 12px 4px 12px;
  overflow: hidden;
  margin-bottom: 6px;
  background: var(--c-cream);
}
.wizard-result-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wizard-result-eyebrow {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
}
.wizard-result-title {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 700;
  margin: 4px 0;
  color: var(--c-primary);
  text-wrap: balance;
  line-height: 1.15;
}
.wizard-result-story {
  max-width: 520px;
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 auto;
  text-wrap: pretty;
}
.wizard-result-price {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-highlight);
  margin-top: 4px;
}
.wizard-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.wizard-restart {
  background: none;
  border: 1.5px solid var(--c-line);
  padding: 11px 18px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--c-ink-soft);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.wizard-restart:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

@media (max-width: 540px) {
  .wizard-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* WIZARD IM HERO — kompakt für rechte Spalte (statt Fun-Facts-Widget) */
/* Alle Hero-Overrides scoping auf .hero .wizard ... — vermeidet Konflikt mit Room-Wizard (.wizard-card) auf zimmer.html */
.hero .wizard {
  max-width: none;
  padding: clamp(22px, 2.6vw, 30px);
  margin: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.hero .wizard .wizard-head { margin-bottom: 14px; text-align: center; }
.hero .wizard .wizard-head .eyebrow { font-size: 0.7rem; }
.hero .wizard .wizard-head h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  margin: 4px 0 0;
}
.hero .wizard .wizard-head p {
  font-size: 0.82rem;
  margin-top: 6px;
  max-width: 100%;
}
.hero .wizard .wizard-progress { margin-bottom: 16px; gap: 4px; }
.hero .wizard .wizard-progress .wizard-step {
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
  border-width: 1.5px;
}
.hero .wizard .wizard-progress-line { width: clamp(18px, 3vw, 36px); }
.hero .wizard .wizard-question {
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  margin: 0 0 12px;
  line-height: 1.2;
}
.hero .wizard .wizard-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hero .wizard .wizard-option {
  padding: 11px 10px;
  gap: 3px;
  border-radius: 4px 10px 4px 10px;
}
.hero .wizard .wizard-option-label { font-size: 0.86rem; }
.hero .wizard .wizard-option-meta { font-size: 0.66rem; line-height: 1.25; }
.hero .wizard .wizard-nav { margin-top: 14px; min-height: 26px; }
.hero .wizard .wizard-back {
  font-size: 0.78rem;
  padding: 4px 8px;
}
.hero .wizard .wizard-result { gap: 10px; }
.hero .wizard .wizard-result-photo {
  max-width: 240px;
  aspect-ratio: 16/10;
  margin-bottom: 2px;
}
.hero .wizard .wizard-result-eyebrow { font-size: 0.68rem; }
.hero .wizard .wizard-result-title {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  margin: 2px 0;
}
.hero .wizard .wizard-result-story { font-size: 0.84rem; line-height: 1.5; }
.hero .wizard .wizard-result-price { font-size: 1rem; }
.hero .wizard .wizard-result-actions .btn {
  padding: 11px 16px;
  font-size: 0.76rem;
}
.hero .wizard .wizard-restart {
  padding: 10px 14px;
  font-size: 0.72rem;
}














/* =====================================================
   EGON FREEBIE — Newsletter Hook mit Tour Guide Lead Magnet
   ===================================================== */
.egon-freebie {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  font-family: var(--f-sans);
}

/* TRIGGER (Collapsed Pill) */
.egon-freebie-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-primary);
  color: var(--c-cream);
  border: 1.5px solid var(--c-accent);
  padding: 8px 16px 8px 8px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(18, 60, 104, 0.30);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--f-sans);
  text-align: left;
}
.egon-freebie-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(18, 60, 104, 0.36);
}
.egon-freebie-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-cream);
  flex-shrink: 0;
  position: relative;
}
.egon-freebie-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Notification-Dot entfernt — wirkte irritierend am Logo */
.egon-freebie-body {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.egon-freebie-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--c-cream);
}
.egon-freebie-meta {
  font-size: 0.68rem;
  color: rgba(248, 243, 232, 0.75);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.egon-freebie-arrow {
  display: flex;
  align-items: center;
  color: var(--c-accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.egon-freebie-arrow svg { width: 14px; height: 14px; }
.egon-freebie.is-open .egon-freebie-arrow { transform: rotate(180deg); }

/* PANEL (Expanded) */
.egon-freebie-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: min(380px, calc(100vw - 40px));
  background: #fff;
  border-radius: 4px 16px 4px 16px;
  box-shadow: 0 20px 50px rgba(18, 60, 104, 0.30);
  padding: clamp(22px, 3vw, 28px);
  border-top: 3px solid var(--c-accent);
  animation: freebieSlideUp 0.3s ease;
}
@keyframes freebieSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.egon-freebie-panel[hidden] { display: none; }
.egon-freebie-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--c-ink-soft);
  cursor: pointer;
  padding: 4px 8px;
  font-family: var(--f-display);
  font-weight: 300;
}
.egon-freebie-close:hover { color: var(--c-primary); }

.egon-freebie-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.egon-freebie-content h3 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 700;
  margin: 6px 0 10px;
  color: var(--c-primary);
  line-height: 1.1;
}
.egon-freebie-content > p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.egon-freebie-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.egon-freebie-includes li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--c-primary);
}
.egon-freebie-includes li::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.egon-freebie-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.egon-freebie-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 4px;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  background: var(--c-cream);
  color: var(--c-primary);
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.egon-freebie-input:focus {
  outline: none;
  border-color: var(--c-accent);
  background: #fff;
}
.egon-freebie-consent {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--c-ink-soft);
  cursor: pointer;
  user-select: none;
}
.egon-freebie-consent input[type="checkbox"] {
  margin: 2px 0 0 0;
  flex-shrink: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.egon-freebie-submit {
  background: var(--c-primary);
  color: var(--c-cream);
  padding: 13px 18px;
  border: none;
  border-radius: 4px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.egon-freebie-submit:hover {
  background: var(--c-accent);
  color: var(--c-primary);
}

.egon-freebie-success {
  display: none;
  background: rgba(45, 125, 90, 0.08);
  border: 1px solid rgba(45, 125, 90, 0.25);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--c-primary);
  font-size: 0.86rem;
  line-height: 1.5;
}
.egon-freebie-form.is-success .egon-freebie-success { display: block; }
.egon-freebie-form.is-success .egon-freebie-input,
.egon-freebie-form.is-success .egon-freebie-consent,
.egon-freebie-form.is-success .egon-freebie-submit { display: none; }

@media (max-width: 480px) {
  .egon-freebie {
    bottom: 14px;
    right: 14px;
    left: 14px;
  }
  .egon-freebie-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .egon-freebie-panel {
    right: 0;
    left: 0;
    width: auto;
  }
}
/* 16.06.2026: Sticky-Button entfernt → Freebie-Pille braucht den 78px-Lift nicht mehr,
   sie sitzt wieder an ihrer Standard-Position unten. */


/* =====================================================
   FOOTER CONTACT LINE — zentrierte Kontaktdaten unter Grid
   ===================================================== */
.footer-contact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
  padding: 24px 0 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(248, 243, 232, 0.10);
}
.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(248, 243, 232, 0.85);
  font-size: 0.88rem;
  text-decoration: none;
  font-family: var(--f-sans);
  transition: color 0.2s ease;
}
.footer-contact-item:hover { color: var(--c-accent); }
.footer-contact-item svg {
  color: var(--c-accent);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .footer-contact-line {
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }
}

.footer-brand-tagline {
  margin-top: 4px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* =====================================================
   LEAFLET-KARTE — Egons Empfehlungen auf echter Hamburg-Karte
   ===================================================== */
.tipps-map-leaflet {
  width: 100%;
  height: clamp(380px, 50vw, 540px);
  border-radius: 4px 16px 4px 16px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 36px rgba(18, 60, 104, 0.12);
  z-index: 1;
}
.leaflet-container { background: var(--c-sand); font-family: var(--f-sans); }

.tipps-map-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--c-ink-soft);
}
.tipps-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tipps-map-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
}
.tipps-map-legend-dot--hotel { background: var(--c-primary); }
.tipps-map-legend-dot--tipp { background: var(--c-accent); }

/* CUSTOM MARKERS */
.tipps-marker {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-primary);
  border: 2.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(18, 60, 104, 0.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tipps-marker:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(18, 60, 104, 0.40);
}
.tipps-marker-hotel {
  background: var(--c-primary);
  color: var(--c-cream);
  width: 50px;
  height: 50px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  border-color: var(--c-accent);
  border-width: 2.5px;
}

/* POPUPS */
.leaflet-popup.tipps-popup .leaflet-popup-content-wrapper {
  border-radius: 4px 12px 4px 12px;
  padding: 0;
  border-top: 3px solid var(--c-accent);
  box-shadow: 0 8px 24px rgba(18, 60, 104, 0.20);
}
.leaflet-popup.tipps-popup .leaflet-popup-content {
  margin: 14px 18px;
  font-family: var(--f-sans);
  min-width: 200px;
  line-height: 1.4;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
}
.tipps-popup-tag {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
}
.tipps-popup-title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 4px 0 6px;
  line-height: 1.2;
}
.tipps-popup-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
}
.tipps-popup-link:hover { color: var(--c-accent); }

/* Leaflet zoom control im Brand-Style */
.leaflet-bar {
  border: 1px solid var(--c-line) !important;
  box-shadow: 0 4px 12px rgba(18, 60, 104, 0.10) !important;
}
.leaflet-bar a {
  background: #fff !important;
  color: var(--c-primary) !important;
  font-family: var(--f-display);
}
.leaflet-bar a:hover { background: var(--c-cream) !important; }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85) !important;
  font-size: 10px !important;
}


/* =====================================================
   STICKY-BOOK WETTER-VORSCHAU — Open-Meteo Forecast
   ===================================================== */
@media (max-width: 980px) {
}


/* =====================================================
   FAQ-SUCHWIDGET — Live-Filter über die FAQ-Items
   ===================================================== */
.faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 100px;
  padding: 6px 18px 6px 18px;
  margin: 0 auto var(--s-3);
  max-width: 600px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 6px 22px rgba(201, 169, 97, 0.20);
}
.faq-search-icon {
  color: var(--c-ink-soft);
  flex-shrink: 0;
}
.faq-search-input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  color: var(--c-primary);
  padding: 10px 0;
  min-width: 0;
}
.faq-search-input:focus { outline: none; }
.faq-search-input::placeholder { color: var(--c-ink-soft); opacity: 0.7; }
.faq-search-input::-webkit-search-cancel-button { cursor: pointer; }
.faq-search-count {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  color: var(--c-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.faq-empty {
  text-align: center;
  background: var(--c-cream);
  border: 1px dashed var(--c-line);
  border-radius: 4px 12px 4px 12px;
  padding: 24px;
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  max-width: 600px;
  margin: 0 auto;
}
.faq-empty a {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
}


/* =====================================================
   KARTE: LANDMARK-PINS + PERMANENT-TOOLTIPS
   ===================================================== */
.tipps-marker-landmark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(18, 60, 104, 0.30);
  opacity: 0.65;
}

/* Permanente Tooltips: ohne Tail, brand-konform */
.leaflet-tooltip.tipps-tooltip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: var(--f-sans);
  white-space: nowrap;
}
.leaflet-tooltip.tipps-tooltip::before,
.leaflet-tooltip.tipps-tooltip::after { display: none; }

/* Egon-Tipps Tooltip — Gold-Pill */
.leaflet-tooltip.tipps-tooltip-tipp {
  background: var(--c-accent);
  color: var(--c-primary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(18, 60, 104, 0.22);
}

/* Landmark Tooltip — dezent in Marineblau */
.leaflet-tooltip.tipps-tooltip-landmark {
  color: var(--c-primary);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  opacity: 0.78;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95), 0 0 4px rgba(255, 255, 255, 0.9);
}


/* =====================================================
   LAGE-KARTE — Leaflet-Variante (lage.html)
   ===================================================== */
.location-map-leaflet {
  width: 100%;
  height: clamp(400px, 50vw, 560px);
  border-radius: 4px 16px 4px 16px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 36px rgba(18, 60, 104, 0.12);
  z-index: 1;
}

/* Marker-Punkte für nahegelegene Ziele */
.lage-marker {
  border-radius: 50%;
  background: var(--c-primary);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(18, 60, 104, 0.35);
}
.lage-marker-big { width: 14px; height: 14px; }
.lage-marker-med { width: 10px; height: 10px; opacity: 0.75; }

/* Permanent-Tooltip-Labels für Ziele */
.leaflet-tooltip.lage-label {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 0 4px;
  font-family: var(--f-sans);
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.85);
}
.leaflet-tooltip.lage-label::before,
.leaflet-tooltip.lage-label::after { display: none; }

.lage-label-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
  line-height: 1.05;
}
.lage-label-meta {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Hotel-Label-Sondervariante */
.leaflet-tooltip.lage-label-hotel {
  text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 1);
  text-align: center;
  padding: 0;
}
.lage-label-name-hotel {
  font-size: 0.95rem;
  color: var(--c-primary);
  letter-spacing: 0.04em;
}

/* location-grid: SVG-Layout abschalten, Karte voll nehmen */
.location-map { padding: 0; background: transparent; }


/* tipps-card: jetzt klickbar zum Anzeigen auf Karte */
.tipps-card.is-clickable { cursor: pointer; }
.tipps-card.is-clickable:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
.tipps-card.is-clickable::after {
  content: "↑ Auf Karte zeigen";
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tipps-card.is-clickable:hover::after,
.tipps-card.is-clickable:focus-visible::after { opacity: 1; }
.tipps-card { position: relative; }


/* location-item: klickbar zum Anzeigen auf Karte */
.location-item.is-clickable {
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, transform 0.2s ease;
}
.location-item.is-clickable:hover {
  background: rgba(201, 169, 97, 0.06);
  transform: translateX(4px);
}
.location-item.is-clickable:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
.location-item.is-clickable::after {
  content: "→ Karte";
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.location-item.is-clickable:hover::after,
.location-item.is-clickable:focus-visible::after { opacity: 1; }


/* Team Sprachen-Linie */
.team-languages {
  margin-top: var(--s-3);
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  text-align: center;
  letter-spacing: 0.02em;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.team-languages-label {
  font-weight: 600;
  color: var(--c-primary);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}
.team-languages-list {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-primary);
  letter-spacing: 0.02em;
}

/* team-card-lead: Sabrina als General Manager hervorheben */
.team-card-lead {
  border-top: 3px solid var(--c-accent);
  background: linear-gradient(180deg, #fff 0%, var(--c-cream) 100%);
}
.team-card-lead .team-avatar {
  background: var(--c-accent);
  color: var(--c-primary);
}

/* Team-grid: 4 Spalten ab Desktop */
@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* =====================================================
   KOMFORT-SECTION (zimmer.html — In jedem Zimmer)
   ===================================================== */
.comfort-section {
  padding: clamp(60px, 8vw, 90px) 0;
}
.comfort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(18px, 2.5vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
}
.comfort-card {
  position: relative; /* Anker für das Aufpreis-Badge */
  background: var(--c-cream);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 32px);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.comfort-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 60, 104, 0.10);
}
.comfort-card svg {
  width: 42px;
  height: 42px;
  color: var(--c-accent);
  margin: 0 auto 14px;
}
.comfort-card h4 {
  font-family: var(--f-display);
  /* 13.06.2026: kleiner + nowrap, damit auch "Ruhigeres Innenhof-Zimmer" einzeilig bleibt */
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--c-primary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
@media (max-width: 1023px) {
  /* Bei 2 Spalten ist mehr Platz — Überschrift darf wieder etwas größer sein */
  .comfort-card h4 { font-size: clamp(1rem, 3vw, 1.18rem); }
}
.comfort-card .comfort-badge {
  /* 13.06.2026: Block-Element unter dem Icon (vorhersehbarer Abstand als inline-block);
     auf allen Karten reserviert (Ghost) → Überschriften fluchten exakt */
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  white-space: nowrap;
  padding: 2px 8px;
  background: rgba(27, 79, 130, 0.08);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
}
/* Platzhalter-Badge (unsichtbar) auf den anderen Karten → alle Überschriften auf einer Linie */
.comfort-card .comfort-badge--ghost { visibility: hidden; }
.comfort-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
  text-wrap: pretty;
  /* 13.06.2026: 3 Zeilen reservieren → einheitlich hohe Textblöcke über alle Karten */
  min-height: calc(1.5em * 3);
}
@media (max-width: 1023px) {
  .comfort-card p { min-height: 0; }
}
/* 13.06.2026: Mobil 2×2 statt 1 Spalte — Überschriften dürfen dabei umbrechen (sonst zu breit) */
@media (max-width: 640px) {
  /* 13.06.2026: Abstände oben/unten + zwischen den Blöcken straffer */
  .comfort-section { padding-top: 18px; padding-bottom: 12px; }
  .comfort-section .comfort-grid { margin-top: 14px; }
  .comfort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .comfort-card { padding: 10px 12px 14px; }
  .comfort-card h4 { white-space: normal; }
  .comfort-card svg { width: 34px; height: 34px; margin-bottom: 8px; }
  .comfort-card p { font-size: 0.8rem; }
  /* Badge passt nicht einzeilig in die schmale Karte → umbrechen, mittig, in der Karte gehalten */
  .comfort-card .comfort-badge {
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
  }
}


/* =====================================================
   KÖNIGSTRASSE-SECTION (ueber-uns.html — Hier war einmal Dänemark)
   ===================================================== */
.koenigsstrasse-section {
  background: linear-gradient(180deg, #fff 0%, var(--c-cream) 100%);
  padding: clamp(70px, 9vw, 110px) 0;
}
.koenigsstrasse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .koenigsstrasse-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Kopf sitzt jetzt IN der Textspalte (Umbau 10.06.2026) — Bild rechts läuft über volle Höhe */
.koenigsstrasse-head {
  margin: 0 0 20px;
  text-align: left;
}
.koenigsstrasse-head .eyebrow { display: block; margin-bottom: 10px; }
.koenigsstrasse-head h2 {
  margin: 0 0 18px 0;
  text-wrap: balance;
}
/* "der dänische König" größer + schwebende Logo-Krone an der rechten Ecke (09.06.2026) */
.koenigsstrasse-head h2 .koenig-zeile { font-size: 1.22em; display: inline-block; margin-top: 0.06em; }
.koenig-wort { position: relative; display: inline-block; }
.koenig-krone {
  position: absolute;
  top: -0.46em;
  right: -0.34em;
  width: 0.62em;
  height: auto;
  transform: rotate(16deg);
  animation: kroneSchweben 3.2s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(18, 60, 104, 0.25));
}
@keyframes kroneSchweben {
  0%, 100% { transform: rotate(16deg) translateY(0); }
  50% { transform: rotate(16deg) translateY(-0.16em); }
}
@media (prefers-reduced-motion: reduce) { .koenig-krone { animation: none; } }
.koenigsstrasse-lead {
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  font-weight: 600;
  color: var(--c-primary);
  line-height: 1.35;
  margin: 0;
  white-space: nowrap;
}
/* Lead auf einer Zeile (Wunsch); auf schmalen Phones darf er umbrechen, damit nichts überläuft */
@media (max-width: 600px) {
  .koenigsstrasse-lead { white-space: normal; }
}
.koenigsstrasse-text p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 14px;
  text-wrap: pretty;
}
.koenigsstrasse-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.koenigsstrasse-fact {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.koenigsstrasse-fact strong {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: 0.02em;
  min-width: 60px;
  flex-shrink: 0;
}
.koenigsstrasse-fact span {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
}

/* Kompakte horizontale Timeline · unter Text + Foto */
.koenigsstrasse-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding: 28px clamp(20px, 3vw, 40px) 0;
  max-width: 880px;
  border-top: 1px solid var(--c-line);
  position: relative;
}
.koenigsstrasse-timeline::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateX(-50%);
}
.koenigsstrasse-timeline-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.koenigsstrasse-timeline-item:last-child {
  align-items: flex-end;
  text-align: right;
}
.koenigsstrasse-timeline-year {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  line-height: 1;
}
.koenigsstrasse-timeline-text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 38ch;
  text-wrap: pretty;
}
@media (max-width: 560px) {
  .koenigsstrasse-timeline {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .koenigsstrasse-timeline-item:last-child {
    align-items: flex-start;
    text-align: left;
  }
}
.koenigsstrasse-aside {
  display: flex;
  align-items: center;
  justify-content: center;
}
.koenigsstrasse-aside svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  color: var(--c-primary);
  opacity: 0.85;
}
/* Postkarten-Optik (10.06.2026): weißer Rahmen, leicht gedreht, handschriftliche Caption, 1864-Marke */
.koenigsstrasse-aside-photo {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 14px 14px 10px;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
  position: relative;
}
.koenigsstrasse-aside-photo img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--c-line);
  filter: saturate(0.96);
}
.koenigsstrasse-aside-photo figcaption {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-primary);
  text-align: center;
  line-height: 1.2;
}
.postkarte-marke {
  position: absolute;
  top: 20px;
  right: 18px;
  z-index: 1;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--c-primary);
  background: rgba(255, 255, 255, 0.92);
  border: 2px dashed var(--c-accent);
  border-radius: 2px;
  padding: 5px 9px;
  transform: rotate(-5deg);
}
@media (min-width: 821px) {
  /* Bild füllt die volle Spaltenhöhe — beide Spalten enden auf gleicher Linie */
  .koenigsstrasse-aside-photo img {
    flex: 1;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 55% 50%;
  }
}
/* Timeline am Fuß der Textspalte (statt volle Breite unter dem Grid) */
.koenigsstrasse-text .koenigsstrasse-timeline {
  margin: 26px 0 0;
  padding: 22px 4px 0;
  max-width: none;
  gap: clamp(18px, 3vw, 36px);
}


/* =====================================================
   TAGUNGEN-SEITE — Räume, Bestuhlung, Pauschalen, Anfrage
   ===================================================== */
/* Rooms-Intro · Text + großes Foto nebeneinander */
.rooms-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
@media (max-width: 820px) {
  .rooms-intro { grid-template-columns: 1fr; }
}
.rooms-intro-text .eyebrow { display: block; margin-bottom: 8px; }
.rooms-intro-text h2 { margin: 0 0 16px; text-wrap: balance; }
.rooms-intro-text p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.rooms-intro-photo {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.rooms-intro-photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tagungs-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2.5vw, 30px);
  max-width: 960px;
  margin: clamp(56px, 6vw, 80px) auto 0;
}
.tagungs-room {
  background: var(--c-cream);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(24px, 3vw, 36px);
  border-top: 3px solid var(--c-accent);
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tagungs-room:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tagungs-room-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  transform: translateY(-50%);
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.tagungs-room-plan {
  margin: 0 auto var(--s-3);
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(18, 60, 104, 0.08);
  border-radius: 6px;
  color: var(--c-primary);
}
.tagungs-room-plan svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 110px;
}
.tagungs-room-tag {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.tagungs-room h3 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--c-primary);
}
.tagungs-room-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tagungs-room-features li {
  display: flex;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.tagungs-room-features li::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.tagungs-combo {
  max-width: 720px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  text-align: center;
  padding: 18px 24px;
  background: var(--c-primary);
  color: var(--c-cream);
  border-radius: 4px 12px 4px 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.tagungs-combo strong {
  color: var(--c-accent);
  font-weight: 700;
}

/* Bestuhlung */
/* Coming-Soon · zwei Placeholder-Blöcke nebeneinander (Outside-Raum + Dinner) */
.coming-soon-section { padding: clamp(40px, 5vw, 72px) 0; }
.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .coming-soon-grid { grid-template-columns: 1fr; }
}
.coming-soon-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-accent);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(24px, 3vw, 36px);
  text-align: center;
  scroll-margin-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.coming-soon-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.coming-soon-card .eyebrow { margin-bottom: 8px; }
.coming-soon-card h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin: 0 0 var(--s-2);
}
.coming-soon-card > p {
  color: var(--c-ink-soft);
  max-width: 460px;
  margin: 0 auto var(--s-2);
  line-height: 1.6;
}
.coming-soon-meta {
  color: var(--c-ink-soft);
  font-size: 0.88rem;
  margin: 0 auto var(--s-3) !important;
  font-style: italic;
}
.coming-soon-card .btn { margin-top: auto; }

.bestuhlung-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: clamp(28px, 3vw, 40px) auto 0;
}
@media (max-width: 720px) {
  .bestuhlung-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .bestuhlung-grid { grid-template-columns: 1fr; }
}
.bestuhlung-card {
  /* 03.07.2026: goldene Oberkante entfernt (Kundenwunsch) — Raum 1 & Saal einheitlich */
  background: #fff;
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  border: 1px solid var(--c-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bestuhlung-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.bestuhlung-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin: -4px auto 14px;
  color: var(--c-primary);
}
.bestuhlung-diagram svg {
  width: auto;
  max-width: 100%;
  height: 100%;
}
.bestuhlung-card strong {
  font-family: var(--f-display);
  font-size: 1.05rem;
  display: block;
  color: var(--c-primary);
  margin-bottom: 6px;
}
.bestuhlung-card span {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--c-accent);
  display: block;
  letter-spacing: -0.01em;
  line-height: 1;
}
.bestuhlung-card small {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--c-ink-soft);
  line-height: 1.3;
}

/* Pauschalen */
.pauschalen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
  padding-top: clamp(48px, 5vw, 64px);
}
.pauschale-card {
  background: var(--c-cream);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(24px, 3vw, 32px);
  border-top: 3px solid var(--c-line);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pauschale-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.pauschale-card-featured {
  background: var(--c-primary);
  color: var(--c-cream);
  border-top-color: var(--c-accent);
  transform: translateY(-8px);
  box-shadow: 0 14px 32px rgba(18, 60, 104, 0.18);
}
.pauschale-card-featured:hover {
  transform: translateY(-11px);
  box-shadow: 0 18px 40px rgba(18, 60, 104, 0.24);
}
.pauschale-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(18, 60, 104, 0.2);
  z-index: 2;
}
.pauschale-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(18, 60, 104, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin: 0 0 var(--s-3);
}
.pauschale-card-featured .pauschale-icon {
  background: rgba(248, 243, 232, 0.12);
  border-color: rgba(248, 243, 232, 0.18);
  color: var(--c-accent);
}
.pauschale-tag {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
}
.pauschale-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  margin: 6px 0 12px;
  color: var(--c-primary);
}
.pauschale-card-featured h3 { color: var(--c-cream); }
.pauschale-price {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--c-primary);
  margin-bottom: 16px;
  line-height: 1;
}
.pauschale-card-featured .pauschale-price { color: var(--c-accent); }
.pauschale-price small {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: 4px;
}
.pauschale-card-featured .pauschale-price small { color: rgba(248, 243, 232, 0.6); }
.pauschale-card ul {
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pauschale-card-featured ul { border-top-color: rgba(248, 243, 232, 0.18); }
.pauschale-card li {
  display: flex;
  gap: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
.pauschale-card-featured li { color: rgba(248, 243, 232, 0.86); }
.pauschale-card li::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.pauschalen-footnote {
  max-width: 720px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}

/* Anfrage-Formular */
.anfrage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .anfrage-grid { grid-template-columns: minmax(0, 1fr); }
}
.anfrage-text .eyebrow { display: block; margin-bottom: 8px; }
.anfrage-text h2 { margin: 0 0 20px; text-wrap: balance; }

/* Sabrina-Host-Block */
.anfrage-host {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  margin-bottom: var(--s-3);
}
.anfrage-host-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.anfrage-host-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.anfrage-host-text strong {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--c-primary);
  font-weight: 700;
}
.anfrage-host-text span {
  font-size: 0.82rem;
  color: var(--c-ink-soft);
}

/* Trust-Signal-Streifen */
.anfrage-trust {
  list-style: none;
  margin: var(--s-3) 0;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  gap: clamp(10px, 1.5vw, 18px);
  flex-wrap: wrap;
}
.anfrage-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-primary);
}
.anfrage-trust li svg { color: var(--c-accent); flex-shrink: 0; }

/* Testimonial-Zitat */
.anfrage-quote {
  margin: var(--s-3) 0;
  padding: 18px 22px;
  background: var(--c-sand);
  border-radius: 4px 12px 4px 12px;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-primary);
  position: relative;
  font-style: italic;
}
.anfrage-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  font-family: Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--c-accent);
  opacity: 0.5;
}
.anfrage-quote-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18, 60, 104, 0.12);
}
.anfrage-quote-platform {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-style: normal;
}
.anfrage-quote-stars {
  font-family: Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  font-style: normal;
  line-height: 1;
}
.anfrage-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.anfrage-text p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 24px;
}
.anfrage-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--c-line);
  padding-top: 24px;
}
@media (max-width: 480px) {
  .anfrage-contact { grid-template-columns: 1fr; }
}
.anfrage-contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: #fff;
  border-radius: 4px 12px 4px 12px;
  border: 1px solid var(--c-line);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.anfrage-contact-item:hover { border-color: var(--c-accent); }
.anfrage-contact-item strong {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
}
.anfrage-contact-item span {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--c-primary);
  font-weight: 700;
}

.anfrage-form {
  background: #fff;
  border-radius: 4px 16px 4px 16px;
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 3px solid var(--c-accent);
  box-shadow: 0 12px 28px rgba(18, 60, 104, 0.08);
}
.anfrage-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.anfrage-field > span {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.anfrage-field input,
.anfrage-field textarea,
.anfrage-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 4px;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  color: var(--c-primary);
  background: var(--c-cream);
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.anfrage-field input:focus,
.anfrage-field textarea:focus,
.anfrage-field select:focus {
  outline: none;
  border-color: var(--c-accent);
  background: #fff;
}
.anfrage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.anfrage-submit {
  background: var(--c-primary);
  color: var(--c-cream);
  padding: 14px 22px;
  border: none;
  border-radius: 4px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  margin-top: 8px;
}
.anfrage-submit:hover {
  background: var(--c-accent);
  color: var(--c-primary);
}
.anfrage-success {
  display: none;
  background: rgba(45, 125, 90, 0.08);
  border: 1px solid rgba(45, 125, 90, 0.25);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--c-primary);
  font-size: 0.9rem;
  line-height: 1.5;
}
.anfrage-form.is-success .anfrage-success { display: block; }
.anfrage-form.is-success .anfrage-field,
.anfrage-form.is-success .anfrage-row,
.anfrage-form.is-success .anfrage-submit { display: none; }


/* =====================================================
   EVENTS-KALENDER (lage.html — Hamburg-Kalender)
   ===================================================== */
.events-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 1180px;
  margin: 0 auto;
}
.event-card {
  background: var(--c-cream);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(22px, 2.8vw, 30px);
  border-top: 2px solid var(--c-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(18, 60, 104, 0.10);
}
.event-card-featured {
  background: var(--c-primary);
  color: var(--c-cream);
  border-top-color: var(--c-accent);
}
.event-month {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(201, 169, 97, 0.12);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.event-card-featured .event-month {
  background: rgba(201, 169, 97, 0.18);
}
.event-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--c-primary);
  line-height: 1.15;
}
.event-card-featured h3 { color: var(--c-cream); }
.event-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-accent);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.event-card-featured .event-meta { color: var(--c-accent); }
.event-card > p:not(.event-meta) {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.event-card-featured > p:not(.event-meta) { color: rgba(248, 243, 232, 0.86); }


/* =====================================================
   SPEZIALZIMMER-LANDINGPAGES (Hund · Allergiker · Familie · Barrierefrei · Konzert)
   ===================================================== */
.spezial-features {
  padding: clamp(60px, 8vw, 100px) 0;
}
.spezial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 2.5vw, 30px);
  max-width: 1080px;
  margin: 0 auto;
}
.spezial-card {
  background: var(--c-cream);
  border-radius: 4px 12px 4px 12px;
  padding: clamp(24px, 3vw, 32px);
  border-top: 3px solid var(--c-accent);
}
.spezial-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--c-primary);
  line-height: 1.2;
  text-wrap: balance;
}
.spezial-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.spezial-faq {
  padding: clamp(60px, 8vw, 100px) 0;
}


/* tipps-card-featured: 7. Tipp als breite Hidden-Gem-Card */
.tipps-card-featured {
  grid-column: 1 / -1;
  background: var(--c-primary);
  color: var(--c-cream);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  padding: clamp(28px, 3.5vw, 40px);
}
.tipps-card-featured .tipps-num {
  position: static;
  background: var(--c-accent);
  color: var(--c-primary);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}
.tipps-card-featured h3 {
  color: var(--c-cream);
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin: 6px 0 12px;
}
.tipps-card-featured p {
  color: rgba(248, 243, 232, 0.88);
  font-size: 0.94rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.tipps-tag-featured {
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  display: inline-block;
}
.tipps-card-featured-meta {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(248, 243, 232, 0.15);
  font-size: 0.82rem !important;
  color: rgba(248, 243, 232, 0.7) !important;
}
@media (max-width: 600px) {
  .tipps-card-featured { grid-template-columns: minmax(0, 1fr); }
  .tipps-card-featured .tipps-num { width: 48px; height: 48px; font-size: 1.3rem; }
}


/* spezial-card icon styling */
.spezial-card-icon {
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(201, 169, 97, 0.14);
  border-radius: 50%;
  color: var(--c-accent);
}
.spezial-card-icon svg {
  width: 24px;
  height: 24px;
}


/* =====================================================
   CROSS-LINKS-SECTION (zwischen Spezialzimmer-Pages)
   ===================================================== */
.cross-links-section {
  padding: clamp(50px, 7vw, 80px) 0;
}
.cross-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.cross-link-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--c-cream);
  border-radius: 4px 12px 4px 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border-top: 2px solid transparent;
}
.cross-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(18, 60, 104, 0.10);
  border-top-color: var(--c-accent);
}
.cross-link-card strong {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--c-primary);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cross-link-card span {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  line-height: 1.35;
}
.cross-link-card-primary {
  background: var(--c-primary);
  border-top: 2px solid var(--c-accent);
}
.cross-link-card-primary strong { color: var(--c-cream); }
.cross-link-card-primary span { color: rgba(248, 243, 232, 0.75); }
.cross-link-card-primary:hover {
  background: var(--c-primary-dark);
  border-top-color: var(--c-accent);
}

/* ============================================
   ROOM COMPARISON TABLE (zimmer.html)
   ============================================ */
.room-compare-section { padding: var(--s-6) 0; }
.room-compare-wrap {
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 8px 32px rgba(14, 31, 63, 0.04);
}
.room-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.room-compare-table thead {
  background: var(--c-primary);
  color: var(--c-white);
}
.room-compare-table th {
  padding: 14px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.room-compare-table tbody th {
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.room-compare-table tbody th .rc-name {
  display: block;
  font-weight: 700;
  color: var(--c-primary);
}
.room-compare-table tbody th .rc-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(27, 79, 130, 0.08);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.room-compare-table tbody th .rc-tag-gold {
  background: rgba(201, 169, 97, 0.18);
  color: #8B6F2E;
}
.room-compare-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  vertical-align: middle;
}
.room-compare-table tbody tr:last-child td,
.room-compare-table tbody tr:last-child th {
  border-bottom: none;
}
.room-compare-table .rc-price {
  font-weight: 700;
  color: var(--c-primary);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.room-compare-table .rc-cta {
  display: inline-block;
  padding: 6px 12px;
  background: var(--c-accent);
  color: var(--c-primary-dark); /* WCAG: Weiss auf Gold war 2,01:1 — Navy #123C68 = ~5,9:1 */
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.room-compare-table .rc-cta:hover { background: var(--c-accent-soft); color: var(--c-primary-dark); }
.room-compare-table .rc-featured {
  background: rgba(201, 169, 97, 0.05);
}
.room-compare-table .rc-featured th .rc-name {
  color: var(--c-accent);
}
.room-compare-table .rc-featured td strong {
  color: var(--c-accent);
}

@media (max-width: 900px) {
  .room-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .room-compare-table { min-width: 720px; }
}

/* Mobiler Scroll-Balken über der Zimmer-Vergleichstabelle (nur < 900px sichtbar) */
.rc-scroller { display: none; }
@media (max-width: 900px) {
  .rc-scroller {
    display: block;
    margin: 0 0 12px;
  }
  .rc-scroller-label {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--c-ink-soft);
    margin-bottom: 7px;
  }
  .rc-scroller-track {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: var(--c-line);
    touch-action: none;
    cursor: pointer;
  }
  .rc-scroller-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 44px;
    border-radius: 999px;
    background: var(--c-primary);
  }
}

/* COMFORT-BASICS · 7 weitere Standard-Items als Strip unter den 4 Premium-Karten */
.comfort-basics {
  margin-top: var(--s-4);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--s-3) var(--s-3);
  background: var(--c-white);
  border-radius: 14px;
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.comfort-basics-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  flex-shrink: 0;
  padding-right: var(--s-2);
  border-right: 1px solid var(--c-line);
}
@media (max-width: 760px) {
  .comfort-basics { flex-direction: column; gap: var(--s-2); }
  .comfort-basics-label {
    border-right: none;
    padding-right: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--c-line);
  }
}
.comfort-basics-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.comfort-basics-grid li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--c-cream);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-primary);
  transition: background 0.2s ease, transform 0.2s ease;
}
.comfort-basics-grid li:hover {
  background: rgba(201, 169, 97, 0.15);
  transform: translateY(-1px);
}
.comfort-basics-grid svg {
  width: 16px;
  height: 16px;
  color: var(--c-accent);
  flex-shrink: 0;
}
/* 13.06.2026: Umbruch-Helfer — nur auf Mobile aktiv (erzwingt 2 Pills oben, 3 darunter).
   Selektor mit .comfort-basics-grid li, damit es die li-Basisregeln (display/padding/bg) sicher schlägt */
.comfort-basics-grid li.comfort-basics-break { display: none; }
@media (max-width: 640px) {
  .comfort-basics { padding: 14px 8px; }
  .comfort-basics-grid { gap: 5px; }
  .comfort-basics-grid li { padding: 5px 7px; font-size: 0.58rem; gap: 4px; }
  .comfort-basics-grid svg { width: 11px; height: 11px; }
  .comfort-basics-grid li.comfort-basics-break {
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    background: none;
  }
}
.value-carousel-label {
  display: block;
  margin-top: var(--s-3);
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ============================================
   LIGHTBOX (Room image zoom)
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(14, 31, 63, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  animation: lb-fade 0.2s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  background: var(--c-white);
}
.lightbox-cap {
  color: var(--c-white);
  font-size: 0.9375rem;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: var(--c-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ============================================
   ANGEBOTE — Gültig-bis Badge + Breakdown
   ============================================ */
.offer-validity {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  background: rgba(45, 125, 90, 0.12);
  color: var(--c-success);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}
.offer-breakdown {
  margin: var(--s-2) 0;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-cream);
  overflow: hidden;
}
.offer-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-primary);
  list-style: none;
  user-select: none;
}
.offer-breakdown summary::-webkit-details-marker { display: none; }
.offer-breakdown[open] .booking-chevron { transform: rotate(180deg); }
.offer-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0 14px 14px;
  font-size: 0.8125rem;
}
.offer-breakdown-table tr td {
  padding: 5px 14px;
  border-bottom: 1px dashed rgba(91, 112, 142, 0.18);
}
.offer-breakdown-table tr td:first-child { color: var(--c-ink-soft); }
.offer-breakdown-table tr td.amt {
  text-align: right;
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offer-breakdown-table tr.sum td { color: var(--c-ink-soft); padding-top: 8px; }
.offer-breakdown-table tr.pkg td { color: var(--c-primary); font-weight: 700; }
.offer-breakdown-table tr.save {
  background: rgba(201, 169, 97, 0.12);
}
.offer-breakdown-table tr.save td {
  color: var(--c-accent);
  font-weight: 700;
  font-size: 0.9375rem;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: none;
}

/* ============================================
   ANGEBOTE — Konkreter Preisvergleich (vs-price-compare)
   ============================================ */
.vs-price-compare {
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--c-cream);
  border-radius: 14px;
  border: 1px solid var(--c-line);
}
.vs-price-compare-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
  text-align: center;
}
.vs-price-compare-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .vs-price-compare-row { grid-template-columns: 1fr; }
}
.vs-price-compare-cell {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs-price-compare-cell-direct {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
  position: relative;
}
.vs-price-compare-cell-direct::before {
  content: "Bestpreis";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: var(--c-white);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vs-price-compare-source {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.vs-price-compare-amount {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vs-price-compare-cell-direct .vs-price-compare-amount { color: var(--c-white); }
.vs-price-compare-cell:not(.vs-price-compare-cell-direct) .vs-price-compare-amount { color: var(--c-ink); }
.vs-price-compare-note {
  font-size: 0.6875rem;
  opacity: 0.75;
  line-height: 1.4;
}
.vs-price-compare-foot {
  margin: 12px 0 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--c-ink-soft);
}
.vs-price-compare-foot a { color: var(--c-accent); font-weight: 600; }

/* ============================================
   LAGE — Reeperbahn-Sicherheits-Absatz
   ============================================ */
.lage-safety {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--c-cream);
  border-radius: 14px;
  border-left: 4px solid var(--c-accent);
}
@media (max-width: 640px) {
  .lage-safety { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3); }
}
.lage-safety-icon {
  width: 60px; height: 60px;
  background: var(--c-white);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  flex-shrink: 0;
}
.lage-safety-body h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  color: var(--c-primary);
}
.lage-safety-body p {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.lage-safety-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.lage-safety-list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-ink);
  border-bottom: 1px dashed rgba(91, 112, 142, 0.18);
}
.lage-safety-list li:last-child { border-bottom: none; }
.lage-safety-list li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 4px;
  color: var(--c-accent);
  font-size: 1.25rem;
  font-weight: 700;
}
.lage-safety-foot {
  font-size: 0.8125rem !important;
  color: var(--c-ink-soft) !important;
  margin-bottom: 0 !important;
}
.lage-safety-foot a {
  color: var(--c-accent);
  font-weight: 600;
  border-bottom: 1px dashed currentColor;
  text-decoration: none;
}

/* ============================================
   TISCH-RESERVIERUNG (gastronomie.html)
   ============================================ */
.table-reserve {
  max-width: 640px;
  margin: var(--s-3) auto 0;
  padding: var(--s-3);
  background: var(--c-white);
  border-radius: 14px;
  border: 1px solid var(--c-line);
  text-align: left;
  box-shadow: 0 8px 24px rgba(14, 31, 63, 0.06);
}
.table-reserve-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.table-reserve-row:has(.table-reserve-field:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .table-reserve-row { grid-template-columns: 1fr; }
}
.table-reserve-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.table-reserve-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table-reserve-field input,
.table-reserve-field select,
.table-reserve-field textarea {
  padding: 10px 12px;
  font-size: 0.9375rem;
  font-family: inherit;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-cream);
  color: var(--c-ink);
  transition: border-color 0.18s, background 0.18s;
}
.table-reserve-field input:focus,
.table-reserve-field select:focus,
.table-reserve-field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-white);
}
.table-reserve-field textarea {
  resize: vertical;
  min-height: 60px;
}
.table-reserve-submit {
  width: 100%;
  margin-top: 8px;
}
.table-reserve-note {
  margin-top: 12px;
  font-size: 0.75rem;
  text-align: center;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.table-reserve-note a {
  color: var(--c-accent);
  font-weight: 600;
}

/* ============================================
   EGON-EMPFIEHLT — Mini-Karte mit 12 Pins
   ============================================ */
.empfiehlt-map {
  margin: var(--s-4) 0;
  padding: var(--s-3);
  background: var(--c-cream);
  border-radius: 14px;
  border: 1px solid var(--c-line);
}
.empfiehlt-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
  flex-wrap: wrap;
  gap: 10px;
}
.empfiehlt-map-head h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--c-primary);
}
.empfiehlt-map-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--c-accent);
  color: var(--c-white);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.18s ease;
}
.empfiehlt-map-download:hover { background: #B79752; color: var(--c-white); }
.empfiehlt-map-svg-wrap {
  position: relative;
  background: var(--c-white);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(91, 112, 142, 0.12);
}
.empfiehlt-map-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 360px;
}
.empfiehlt-pin {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.empfiehlt-pin circle {
  fill: var(--c-accent);
  stroke: var(--c-white);
  stroke-width: 2;
  transition: r 0.2s, fill 0.2s;
}
.empfiehlt-pin text {
  fill: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.empfiehlt-pin:hover circle,
.empfiehlt-pin.is-active circle {
  fill: var(--c-primary);
  r: 14;
}
.empfiehlt-pin-hotel circle {
  fill: var(--c-primary);
  stroke: var(--c-accent);
  stroke-width: 3;
}
.empfiehlt-pin-hotel text {
  font-size: 9px;
}

/* ============================================
   AUDIENCE TESTIMONIALS (familie/hund/allergiker/barrierefrei)
   ============================================ */
.audience-testimonials { padding: var(--s-5) 0; }
.audience-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.audience-test-card {
  background: var(--c-cream);
  border-radius: 14px;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.audience-test-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 31, 63, 0.08);
}
.audience-test-stars {
  color: var(--c-accent);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.audience-test-quote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink);
  font-style: italic;
  position: relative;
  padding-left: 12px;
}
.audience-test-quote::before {
  content: "„";
  position: absolute;
  left: -2px;
  top: -6px;
  font-size: 2rem;
  color: var(--c-accent);
  opacity: 0.4;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.audience-test-cite {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-style: normal;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--c-line);
}
.audience-test-cite strong {
  font-size: 0.875rem;
  color: var(--c-primary);
  font-weight: 700;
}
.audience-test-cite span {
  font-size: 0.75rem;
  color: var(--c-ink-soft);
}
.audience-test-foot {
  text-align: center;
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  margin-top: var(--s-2);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 14px;
  background: rgba(201, 169, 97, 0.08);
  border-radius: 8px;
  border: 1px dashed rgba(201, 169, 97, 0.3);
}

/* ============================================
   WORKATION · Tages-Pauschale + Stay-Streak (tagungen.html)
   ============================================ */
.workation-section { padding-bottom: var(--s-5); }
.workation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  max-width: 980px;
  margin: 0 auto;
}
.workation-grid-single {
  grid-template-columns: 1fr;
  max-width: 560px;
}
@media (max-width: 760px) {
  .workation-grid { grid-template-columns: 1fr; }
}
.workation-card {
  background: var(--c-cream);
  border-radius: 14px;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
}
.workation-card-main {
  background: var(--c-primary);
  color: var(--c-cream);
  border-color: var(--c-primary);
}
.workation-card-loyalty {
  background: linear-gradient(135deg, var(--c-cream) 0%, #FBF6E8 100%);
}
.workation-card-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  border-radius: 999px;
  align-self: flex-start;
}
.workation-card-tag-gold {
  background: var(--c-accent);
  color: var(--c-white);
}
.workation-card-main .workation-card-tag {
  background: rgba(255, 255, 255, 0.18);
  color: var(--c-cream);
}
.workation-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.workation-card-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
}
.workation-card-main .workation-card-amount { color: var(--c-cream); }
.workation-card-unit {
  font-size: 0.875rem;
  opacity: 0.7;
}
.workation-card h3 {
  margin: 6px 0 0;
  font-size: 1.5rem;
  color: var(--c-primary);
  line-height: 1.2;
}
.workation-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.9;
}
.workation-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.workation-card-features li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.workation-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px; height: 16px;
  background: var(--c-accent);
  color: var(--c-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
}
.workation-card-main .workation-card-features li::before { background: var(--c-cream); color: var(--c-primary); }
.workation-card .btn { align-self: flex-start; margin-top: 8px; }
.workation-card-main .btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.workation-card-main .btn-primary:hover { background: #B79752; border-color: #B79752; }
.workation-note {
  text-align: center;
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}
.workation-note a {
  color: var(--c-accent);
  font-weight: 600;
}

/* ============================================
   FOOTER ENHANCEMENT — Trust badges + A11y link
   ============================================ */
.footer-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  margin-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--c-cream);
  text-decoration: none;
  transition: background 0.18s ease;
}
.footer-trust-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-cream);
}
.footer-trust-badge strong {
  color: var(--c-accent);
  font-weight: 700;
}
.footer-lifetime {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--c-cream);
  margin: var(--s-3) 0 var(--s-2);
  opacity: 0.85;
}
.footer-lifetime strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--c-accent);
  font-weight: 700;
  display: block;
}

/* ============================================
   LANGUAGE TOAST (Coming Soon Stub)
   ============================================ */
.lang-toast {
  position: fixed;
  bottom: 110px;
  right: 24px;
  background: var(--c-primary);
  color: var(--c-cream);
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(14, 31, 63, 0.25);
  max-width: 320px;
  font-size: 0.875rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 99;
  border: 1px solid rgba(201, 169, 97, 0.4);
}
.lang-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-toast a {
  color: var(--c-accent);
  font-weight: 700;
  text-decoration: none;
  align-self: flex-end;
}
.lang-toast a:hover { color: var(--c-accent-soft); }
@media (max-width: 640px) {
  .lang-toast { left: 18px; right: 18px; max-width: none; bottom: 100px; }
}

/* ============================================
   SPEISEKARTE-PROMO (gastronomie.html)
   Dark elegant block · branded menu image left, copy right
   ============================================ */
.speisekarte-promo {
  color: var(--c-cream);
}
.speisekarte-promo-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.speisekarte-promo-image { order: 2; }
.speisekarte-promo-body  { order: 1; }
@media (max-width: 860px) {
  .speisekarte-promo-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .speisekarte-promo-image { order: 1; }
  .speisekarte-promo-body  { order: 2; }
}
.speisekarte-promo-image {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.25);
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.speisekarte-promo-image:hover { transform: translateY(-4px); }
.speisekarte-promo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.speisekarte-promo-body h2 {
  color: var(--c-cream);
  margin: 12px 0;
}
.speisekarte-promo-body h2 em {
  color: var(--c-accent);
  font-style: normal;
}
.speisekarte-promo-body > p {
  color: rgba(248, 243, 232, 0.85);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 var(--s-2);
}
.speisekarte-promo-list {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  display: grid;
  gap: 8px;
}
.speisekarte-promo-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  color: rgba(248, 243, 232, 0.9);
  line-height: 1.5;
}
.speisekarte-promo-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  background: var(--c-accent);
}
.speisekarte-promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s-2);
}
.btn-outline-cream {
  background: transparent;
  color: var(--c-cream);
  border-color: rgba(248, 243, 232, 0.4);
}
.btn-outline-cream:hover {
  background: var(--c-cream);
  color: var(--c-primary-dark);
  border-color: var(--c-cream);
}
.speisekarte-promo .btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-primary-dark);
}
.speisekarte-promo .btn-primary:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
  color: var(--c-primary-dark);
}

/* ============================================
   BAR-HERO · Cocktail-Foto + Hendrick-Intro (Gastro Bar-Sektion)
   ============================================ */
.bar-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: var(--s-4);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 860px) {
  .bar-hero { grid-template-columns: 1fr; gap: var(--s-3); }
}
.bar-hero-image {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
  aspect-ratio: 4 / 5;
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}
.bar-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.bar-hero-image:hover img { transform: scale(1.03); }

/* Override nested .bar-intro grid layout when inside .bar-hero */
.bar-hero .bar-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: none;
  margin: 0;
  padding: 0;
}
.bar-hero .bar-host {
  display: inline-flex;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  align-items: center;
}
.bar-hero .bar-host-avatar {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
}
.bar-hero .bar-host-text strong {
  font-size: 1.125rem;
}
.bar-hero .bar-host-label {
  font-size: 0.625rem;
}
.bar-hero .bar-host-role {
  font-size: 0.75rem;
}
.bar-hero .bar-intro-text {
  margin: 0;
}
.bar-hero .bar-intro-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.15;
}
.bar-hero .bar-intro-text p {
  margin-top: 12px;
  max-width: 100%;
}

/* ============================================
   EXTERN-HERO · Lounge-Cafe-Gaeste Banner (gastro)
   ============================================ */
.extern-section { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.extern-hero {
  margin: 0 auto var(--s-4);
  max-width: 720px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(14, 31, 63, 0.18);
  aspect-ratio: 16 / 10;
}
.extern-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   HOUSE-BANNER · Lobby-Foto auf Ueber-uns
   ============================================ */
.house-banner {
  padding: 0;
  background: var(--c-cream);
}
.house-banner-figure {
  margin: 0;
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
@media (max-width: 760px) {
  .house-banner-figure { aspect-ratio: 4 / 3; }
}
.house-banner-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.house-banner-caption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  background: rgba(18, 60, 104, 0.92);
  color: var(--c-cream);
  padding: 12px 18px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 360px;
}
.house-banner-caption span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.house-banner-caption strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-cream);
}
@media (max-width: 640px) {
  .house-banner-caption { left: var(--s-2); right: var(--s-2); bottom: var(--s-2); }
}

/* ============================================
   COOKIE-BANNER · DSGVO-konform, schmal & dezent
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--c-primary-dark);
  color: var(--c-cream);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  padding: 14px 16px;
  z-index: 200;
  font-family: var(--f-sans);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner.is-closing {
  opacity: 0;
  transform: translateY(20px);
}
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cookie-banner-text {
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(251, 248, 243, 0.92);
}
.cookie-nowrap { white-space: nowrap; }
.cookie-banner-text strong {
  color: var(--c-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cookie-banner a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.cookie-banner a:hover { color: #DBC084; }
.cookie-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cookie-btn {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s ease;
  width: 100%;
  white-space: nowrap;
}
.cookie-btn-decline {
  background: transparent;
  color: rgba(251, 248, 243, 0.85);
  border-color: rgba(251, 248, 243, 0.25);
}
.cookie-btn-decline:hover {
  border-color: rgba(251, 248, 243, 0.55);
  background: rgba(251, 248, 243, 0.04);
  color: var(--c-cream);
}
.cookie-btn-accept {
  background: var(--c-accent);
  color: var(--c-primary-dark);
  border-color: var(--c-accent);
}
.cookie-btn-accept:hover {
  background: #B79752;
  border-color: #B79752;
}
@media (max-width: 520px) {
  .cookie-banner {
    left: 10px;
    bottom: 10px;
    width: 270px;
    padding: 12px 14px;
  }
  .cookie-banner-text { font-size: 0.76rem; }
  .cookie-btn { padding: 10px 12px; font-size: 0.68rem; }
}


/* ============================================
   DIRS21 ONE · QuickBook — Brand-Anpassung
   Das Widget rendert in normalem DOM und liest CSS-Variablen → hier auf
   Hotel-Markenfarben umgestellt. Auf :root, damit auch der Datums-Popover
   mitgefärbt wird. Für die Buchungsmaschine im Overlay (iframe, per CSS nicht
   erreichbar) dieselben Werte zusätzlich in DIRS21 → "Styles überschreiben".
   ============================================ */
:root, .d21-widget, .d21-quickbook {
  --d21-primary: var(--c-primary) !important;      /* Hanse-Navy #1B4F82 (statt #004b7f) */
  --d21-secondary: var(--c-accent) !important;     /* Gold #C9A961 (statt #fdbb33) */
  --d21-card: var(--c-cream) !important;           /* Karten-Creme (statt #eaeaea) */
  --d21-text: var(--c-ink) !important;             /* Navy statt Schwarz */
  --d21-description: var(--c-ink-soft) !important; /* Feld-Labels in Sekundaer-Navy */
}
.booking-card .d21-quickbook { margin: 2px 0 4px; }
/* Felder duerfen schrumpfen -> "Gaeste" wird nicht mehr abgeschnitten */
.booking-card .d21-quickbook .d21-trigger-popover-button { min-width: 0 !important; padding: 22px 16px !important; font-size: 1.05rem !important; }
.booking-card .d21-quickbook .d21-trigger-popover-label { font-size: .7em !important; letter-spacing: .05em; }
/* Suchen-Button an die Karten-Buttons angleichen */
/* QuickBook: volle Kartenbreite + vertikaler Stack. Der Horizontal-Modus des Widgets
   richtet sich nach der BROWSER-Breite (nicht der Karte) und ist auf grossen Screens
   zu breit fuer die schmale Karte -> Abschneiden. Vertikal passt in jeder Breite,
   fuellt die Karte, und nichts wird abgeschnitten. */
.booking-card .d21-quickbook .d21-widget-container,
.booking-card .d21-quickbook .d21-container-view { max-width: none !important; width: 100% !important; margin: 0 !important; }
.booking-card .d21-quickbook .d21-h-stack { flex-direction: column !important; align-items: stretch !important; }
.booking-card .d21-quickbook .d21-h-stack > * { width: 100% !important; flex: 0 0 auto !important; }
/* Popover-Inhalt (Stepper -/+, Kalender) NICHT vertikal stellen -> bleibt horizontal */
.booking-card .d21-quickbook .d21-popover-inner .d21-h-stack { flex-direction: row !important; align-items: center !important; }
.booking-card .d21-quickbook .d21-popover-inner .d21-h-stack > * { width: auto !important; flex: 0 1 auto !important; }
/* 2+1: NUR den inneren Check-in+Nächte-Container wieder horizontal (Gäste bleibt voll breit darunter).
   Robust bei jeder Breite, weil die Vertikal-Basis oben die wechselnde Widget-Struktur neutralisiert.
   :not(:has(> .d21-h-stack)) trifft das Feld-Paar (kein DIREKTES Kind-h-stack). ">" = nur direkte Kinder, damit eine geöffnete Popover (injiziert h-stacks) das 2+1 NICHT zum Springen bringt. */
.booking-card .d21-quickbook .d21-h-stack.d21-divider-left-between:not(:has(> .d21-h-stack)) { flex-direction: row !important; align-items: stretch !important; }
.booking-card .d21-quickbook .d21-h-stack.d21-divider-left-between:not(:has(> .d21-h-stack)) > * { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
.booking-card .d21-quickbook button.d21-button.d21-primary {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 64px !important;
  font-size: 1.1rem !important;
  border-radius: 10px !important;
  font-weight: 600;
}

/* Warme, einladende Zeile unter "Direkt buchen" - volle Breite, damit sie auf EINER Zeile bleibt */
.booking-card .booking-subline {
  margin: 7px 0 0;
  font-size: clamp(0.83rem, 2.33vw, 1.24rem);   /* skaliert wie der Titel -> gleiche Breite, Wortabstand unveraendert */
  line-height: 1.3;
  color: var(--c-ink-soft);
}

/* "Angebote"-Seite ist live (24.06.2026): globale Ausblendung entfernt.
   Sichtbar ist der weiße "Angebote"-Button links neben "Direkt buchen".
   Der zusätzliche Menü-Eintrag <li> bleibt separat per inline-style ausgeblendet. */

/* Button-Wrapper darf nicht ueber die Kartenbreite hinaus (sonst wird der Button rechts abgeschnitten) */
.booking-card .d21-quickbook .tw-d21-w-full:has(> .d21-button.d21-primary) {
  min-width: 0 !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}


/* ============================================
   Booking-Card - Hierarchie + Feinschliff (Conversion-Optimierung)
   ============================================ */
/* Titel als klarer Anker (responsiv: Desktop groesser, Mobil sicher) */
.booking-card .booking-card-head h3 {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* Preis als zweiter Anker */
.booking-card .booking-from-price { font-size: 1.75rem; }

/* Trust-Zeile aufgewertet: groessere gruene Haekchen, mehr Luft, besser scanbar */
.booking-card .booking-trust { gap: 12px 20px; }
.booking-card .booking-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.booking-card .booking-trust svg { width: 16px !important; height: 16px !important; color: #2b9348; }

/* Mini-Bewertung (Social Proof) am Buchungspunkt */
.booking-card .booking-rating { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 0.82rem; color: var(--c-ink-soft); }
/* Korrektur: Rating direkt unter der Begrüßung im Kopf des Buchungskarten */
.booking-card .booking-rating--head { margin: 9px 0 0; font-size: 0.8rem; }
.booking-card .booking-rating--head:hover { color: var(--c-primary); }
.booking-card .booking-rating-stars { color: var(--c-accent); letter-spacing: 1px; font-size: 0.95rem; line-height: 1; }
.booking-card .booking-rating-half { opacity: 0.35; }
.booking-card .booking-rating-text strong { color: var(--c-ink); font-weight: 700; }

/* CTA: sichtbarer Fokus-Ring (Accessibility) */
.booking-card .d21-quickbook button:focus-visible { outline: 2px solid var(--c-accent) !important; outline-offset: 2px !important; }


/* Subline "Wir freuen uns auf Sie!" steht IMMER direkt unter "Direkt buchen" (linke Kopf-Spalte). */
.booking-card .booking-subline--d { display: none; }   /* alte volle-Breite-Variante entfaellt */
.booking-card .booking-subline--m { display: block; }
@media (max-width: 560px) {
  .booking-card .booking-subline--m { margin: 4px 0 0; }
}


/* ============================================
   KRONEN-LAUFBAND (dekoratives Endlos-Band zwischen Team & Zimmern)
   Kronen driften langsam nach links + wippen sanft (crownFloat).
   ============================================ */
.crown-marquee {
  overflow: hidden;
  width: 100%;
  padding: var(--s-4) 0;
  margin: calc(-1 * var(--s-6)) 0;            /* nistet sich in den vorhandenen Sektions-Abstand */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.crown-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: crownMarquee 40s linear infinite;
}
.crown-marquee-item {
  height: 44px;
  width: auto;
  flex: 0 0 auto;
  margin-right: clamp(72px, 9vw, 132px);      /* Abstand gehoert zur Kachel -> nahtlos bei -50% */
  opacity: 0.8;
  filter: drop-shadow(0 6px 14px rgba(201, 169, 97, 0.40));
  animation: crownFloat 4s ease-in-out infinite;
  transform-origin: center bottom;
}
.crown-marquee-item:nth-child(3n)   { animation-delay: -1.3s; }
.crown-marquee-item:nth-child(3n+1) { animation-delay: -2.7s; }
.crown-marquee-item:nth-child(3n+2) { animation-delay: -0.6s; }
@keyframes crownMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .crown-marquee-track { animation: none; }
  .crown-marquee-item  { animation: none; }
}


/* ---- Bewertungs-Sterne klickbar -> zum Bewertungs-Abschnitt ---- */
html { scroll-behavior: smooth; }
#bewertungen { scroll-margin-top: 100px; }
a.booking-rating, a.hero-trust { text-decoration: none; color: inherit; cursor: pointer; }
a.booking-rating:hover .booking-rating-text { text-decoration: underline; }
a.hero-trust { transition: opacity var(--dur) var(--ease); }
a.hero-trust:hover { opacity: 0.82; }

/* ---- USP-Karten: Halbkreis-Bogen um die Ueberschrift (nur Desktop) ---- */
@media (min-width: 1024px) {
  .usp-head { margin-bottom: var(--s-2); }              /* Karten viel naeher an die Ueberschrift */
  .usp-head p { max-width: 440px; }          /* schmaler -> hohe Aussenkarten kollidieren nicht mit dem Text */
  .usp-grid { align-items: stretch; padding-bottom: 24px; }
  .usp-grid > .usp-item { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  /* Korrektur 09.06.2026: alle Karten auf einer geraden Linie statt Bogen */
  .usp-grid > .usp-item { transform: none; }
  .usp-grid > .usp-item:hover { transform: translateY(-6px); }
}


/* ---- Logo schrumpft beim Scrollen (nur Desktop) ---- */
@media (min-width: 961px) {
  .logo { left: 20px; }                 /* Logo auf Desktop etwas nach rechts */
  .nav.scrolled .logo { width: 150px; height: 150px; }
  .nav.scrolled .nav-inner { padding-left: 172px; }
}

/* ---- Mobile: USP-Kartentext etwas kleiner + "Aus ..."-Zeile passend ---- */
@media (max-width: 560px) {
  .usp-item h4 { font-size: 1.1rem; }
  .usp-item p { font-size: 0.8rem; line-height: 1.5; }
  .usp-item-label { font-size: 0.625rem; }
  .usp-head p { font-size: 0.8rem; }
}


/* Korrektur: Kronen-Laufband oben im blauen Panorama-Bereich (gold auf blau) */
.panorama .crown-marquee { margin: 0 0 var(--s-4); padding: 0; }  /* Kronen mittig: keine innere Polsterung */
/* Korrektur: blauer Bereich über den Kronen schmaler (war 6rem) */
.panorama.section { padding-top: var(--s-4); }

/* =============== Rechtsseiten · Impressum / Datenschutz / AGB (12.06.2026) =============== */
.legal-content { max-width: 800px; margin: 0 auto; }
.legal-content h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; color: var(--c-ink); margin: 2.6rem 0 0.8rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--f-sans); font-weight: 600; font-size: 1rem; color: var(--c-ink); margin: 1.8rem 0 0.5rem; }
.legal-content p { font-size: 0.95rem; line-height: 1.75; color: var(--c-ink-soft); margin: 0 0 1rem; }
.legal-content ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal-content li { font-size: 0.95rem; line-height: 1.7; color: var(--c-ink-soft); margin-bottom: 0.45rem; }
.legal-content a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal-content strong { color: var(--c-ink); font-weight: 600; }
.legal-content .legal-stand { font-size: 0.85rem; color: var(--c-ink-soft); margin-top: 2.4rem; }

/* =============== 12.06.2026: 4 Bewertungen fest unter der Portal-Box (statt Karussell) =============== */
.review-grid-four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.review-grid-four > * { min-width: 0; }
@media (min-width: 1024px) { .review-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .review-grid-four { grid-template-columns: 1fr; } }

/* =============== 12.06.2026: Zimmer-Modal · Bildergalerie mit Pfeilen =============== */
.room-modal-nav {
  position: absolute;
  /* 13.06.2026: Pfeile in die untere Steuerleiste (links/rechts), Zähler mittig dazwischen */
  bottom: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  /* 13.06.2026: navy wie "Direkt buchen" (auf Creme-Hintergrund) */
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 35, 66, 0.25);
  transition: background var(--dur) var(--ease);
}
.room-modal-prev { left: 14px; }
.room-modal-next { right: 14px; }
.room-modal-nav:hover { background: var(--c-primary-dark); }
.room-modal-nav svg { width: 20px; height: 20px; }
.room-modal-imgcount {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  /* 13.06.2026: mittig unter dem Bild, navy wie "Direkt buchen" */
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(11, 35, 66, 0.25);
}
/* display:flex schlägt sonst das hidden-Attribut */
.room-modal-nav[hidden], .room-modal-imgcount[hidden] { display: none; }

/* =============== 12.06.2026: Komfort-Sektion kompakt · sitzt dicht über den Zimmer-Karten =============== */
.comfort-section {
  padding: clamp(36px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
}
.comfort-section .section-head h2 { margin-bottom: 0.5rem; }
.comfort-section .section-head p { margin-bottom: 0; }
.comfort-section .comfort-grid { margin-top: clamp(18px, 2.5vw, 28px); }
.comfort-section .comfort-card { padding: clamp(16px, 2vw, 22px); }
.comfort-section .comfort-basics { margin-top: clamp(16px, 2.5vw, 26px); }
/* Zimmer-Raster rückt näher an die Komfort-Sektion heran */
#zimmer.section { padding-top: clamp(20px, 3vw, 36px); }
/* 12.06.2026: Speisekarten-Reiter sitzt jetzt IN der Lounge-Textspalte (unter den Feature-Punkten) */
.lounge-speisekarte { margin: var(--s-3) 0; }
.lounge-speisekarte .speisen-full-menu { margin: 0; max-width: none; }
/* Galerie bleibt beim Ausklappen der Karte stehen — Grid zentriert sonst neu und die Fotos rutschen */
#lounge .panorama-grid { align-items: start; }
/* 13.06.2026: Mobil straffer — oben/unten + zwischen den Blöcken (muss NACH dem kompakt-Block stehen,
   sonst überschreibt dessen höhere Spezifität die Werte) */
@media (max-width: 640px) {
  .comfort-section { padding-top: 16px; padding-bottom: 10px; }
  .comfort-section .comfort-grid { margin-top: 12px; gap: 2px 14px; }
  .comfort-section .comfort-card { padding: 8px 12px 12px; }
}

/* =============== 12.06.2026: Speisekarte im L-Aufbau · Knopf in der Spalte, Panel volle Breite =============== */
.speisen-toggle {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
}
.speisen-toggle[aria-expanded="true"] .speisen-full-menu-chevron { transform: rotate(180deg); }
.lounge-speisekarte-panel { margin-top: clamp(20px, 2.5vw, 32px); }
.lounge-speisekarte-panel[hidden] { display: none; }

/* 12.06.2026: Gastro-Intro auf der Startseite exakt zweizeilig (Umbruch nach „Pizza,") */
.gastro .section-head p { max-width: 760px; }
@media (max-width: 640px) {
  /* Mobil bricht der Text ohnehin natürlich um — feste <br> würden nur Flatterränder erzeugen */
  .gastro .section-head p br,
  .reviews .section-head p br { display: none; }
}

/* 12.06.2026: "Was Gäste konkret bewerten" sitzt jetzt direkt unter der Portal-Box */
.reviews .rating-cats { margin-top: var(--s-3); }
.reviews .review-stats--three { margin-bottom: var(--s-3); }

/* =============== 12.06.2026: Lage — Hero + Anfahrt = EINE Sektion, Karte ganz oben =============== */
.anfahrt-section .section-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }

/* =============== 12.06.2026: Lage NEU GEDACHT · Karte + Minuten-Leiste = EIN Block =============== */
.lage-merge {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
}
.lage-merge .anfahrt-map-wrap { max-width: none; margin: 0; }
@media (min-width: 1024px) {
  .lage-merge { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
  .lage-merge .anfahrt-map-wrap { height: 100%; }
  .lage-merge .anfahrt-map-wrap .anfahrt-osm { height: 100%; min-height: 500px; }
}
.lage-dest-rail { display: flex; flex-direction: column; justify-content: space-between; }
.lage-dest-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: start;
}
.lage-dest-row:first-child { padding-top: 0; }
.lage-dest-row:last-child { border-bottom: none; padding-bottom: 0; }
.lage-dest-min { text-align: center; }
.lage-dest-min strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
}
.lage-dest-min span {
  font-family: var(--f-sans);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink-soft);
}
.lage-dest-body h3 {
  display: inline;
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin: 0;
}
.lage-dest-mode {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: 2px;
  white-space: nowrap;
}
.lage-dest-body p {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
  margin: 3px 0 0;
}
/* Praxis-Karten rücken als Teil derselben Sektion dichter heran */
.anfahrt-section .anfahrt-cards { margin-top: clamp(24px, 3vw, 40px); }

/* =============== 12.06.2026: Über uns NEU GEDACHT · Story + Fakten-Leiste = EIN Block =============== */
.ueber-merge-section .section-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
/* Außenansicht-Banner oben auf "Über uns" */
.ueber-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 600px) {
  .ueber-hero-photo { aspect-ratio: 3 / 2; margin-bottom: var(--s-4); }
}
.ueber-merge {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 1024px) {
  .ueber-merge { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
}
.ueber-story h2 { margin: 8px 0 14px; }
.ueber-story > p { color: var(--c-ink-soft); max-width: 540px; }
/* Fakten-Variante der Minuten-Leiste: breitere Zahlen-Spalte (2007 / 40.000+), linksbündig */
.ueber-fakten .lage-dest-row { grid-template-columns: 92px minmax(0, 1fr); }
.ueber-fakten .lage-dest-min { text-align: left; }
.ueber-fakten .lage-dest-min strong { font-size: 1.5rem; white-space: nowrap; }

/* =============== 12.06.2026: Über uns als BENTO-MOSAIK · Story groß, Zahlen als Charakter-Kacheln =============== */
.ueber-bento {
  display: grid;
  gap: clamp(12px, 1.5vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .ueber-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ueber-tile--story { grid-column: 1 / 3; grid-row: 1 / 3; }
  .ueber-tile--wide { grid-column: span 2; }
}
@media (max-width: 1023px) {
  .ueber-tile--story, .ueber-tile--wide { grid-column: 1 / -1; }
}
.ueber-tile {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: clamp(18px, 2.2vw, 26px);
}
.ueber-tile > strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
}
.ueber-tile h3 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 8px 0 4px;
}
.ueber-tile p {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}
.ueber-tile--navy { background: var(--c-primary-dark); border-color: transparent; }
.ueber-tile--navy h3 { color: var(--c-cream); }
.ueber-tile--navy p { color: rgba(248, 243, 232, 0.75); }
.ueber-tile--gold { background: rgba(221, 177, 60, 0.13); border-color: rgba(221, 177, 60, 0.45); }
.ueber-tile--wide { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 2vw, 24px); align-items: center; }
.ueber-tile--wide h3 { margin-top: 0; }
.ueber-tile--story { background: #fff; display: flex; flex-direction: column; justify-content: center; }
.ueber-tile--story h2 { margin: 8px 0 12px; }
.ueber-tile--story > p { font-size: 0.95rem; max-width: 520px; }

/* =============== 12.06.2026: Egons Tipps · Filter-Grid mit Kategorie-Labels + Foto-Slots =============== */
.tipps-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(24px, 3vw, 40px) auto clamp(20px, 2.5vw, 32px);
  max-width: 1080px;
}
.tipps-filter button {
  appearance: none;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tipps-filter button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tipps-filter button.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-cream);
}
.tipps-grid--all { max-width: 1080px; }
.tipps-card-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tipps-card-labels .tipps-tag { margin: 0; }
.tipps-label {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.tipps-label--navy { background: var(--c-primary); color: var(--c-cream); }
.tipps-label--gold { background: rgba(221, 177, 60, 0.18); color: #8a6d1f; border: 1px solid rgba(221, 177, 60, 0.5); }
.tipps-label--rot { background: rgba(200, 16, 46, 0.1); color: #C8102E; border: 1px solid rgba(200, 16, 46, 0.35); }
.tipps-label--musik { background: #fff; color: var(--c-primary); border: 1px solid var(--c-primary); }
.tipps-label--neutral { background: var(--c-cream); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.tipps-card-photo { margin: 0 0 12px; }
.tipps-card-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}

/* =============== 12.06.2026: Haus-Banner als "Rundgang durchs neue Erdgeschoss" (Crossfade-Tour) =============== */
.house-tour-stage {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
@media (max-width: 760px) {
  .house-tour-stage { aspect-ratio: 4 / 3; }
}
.house-tour-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.house-tour-slide.is-active { opacity: 1; }
.house-tour-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sanfter Ken-Burns-Moment beim Einblenden — bewusst dezent */
@media (prefers-reduced-motion: no-preference) {
  .house-tour-slide.is-active img { animation: tourSettle 6s ease-out forwards; }
  @keyframes tourSettle {
    from { transform: scale(1.045); }
    to { transform: scale(1); }
  }
}
.house-tour-nav {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 60%;
}
.house-tour-nav button {
  appearance: none;
  border: 1px solid rgba(248, 243, 232, 0.4);
  background: rgba(18, 60, 104, 0.72);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.house-tour-nav button:hover { background: rgba(18, 60, 104, 0.92); }
.house-tour-nav button.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-primary-dark);
}
@media (max-width: 560px) {
  .house-tour-nav { right: var(--s-2); bottom: var(--s-2); }
  .house-tour-nav button { font-size: 0.62rem; padding: 5px 9px; }
  .house-tour .house-banner-caption { bottom: auto; top: var(--s-2); left: var(--s-2); }
}

/* =============== 13.06.2026: Zimmer-Modal · Video-Slide + Play-Knopf (Einzelzimmer-Rundgang) =============== */
/* object-fit/Größe kommt von der gemeinsamen Regel oben (contain + Blur-Hintergrund) */
.room-modal-video { display: block; }
.room-modal-video[hidden] { display: none; }
/* Wenn das Video läuft, den Verlauf am unteren Rand ausblenden (sonst über den Controls) */
.room-modal-img:has(.room-modal-video:not([hidden]))::after { display: none; }
.room-modal-videobtn {
  position: absolute;
  /* 13.06.2026: nach oben rechts verschoben (wo vorher das ✕ war) */
  right: var(--s-3);
  top: var(--s-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px 8px 12px;
  border: none;
  border-radius: 999px;
  /* 13.06.2026: navy wie "Direkt buchen" (auf Creme-Hintergrund) */
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 35, 66, 0.3);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.room-modal-videobtn svg { width: 15px; height: 15px; }
.room-modal-videobtn:hover { background: var(--c-primary-dark); transform: translateY(-1px); }
.room-modal-videobtn[hidden] { display: none; }
/* 13.06.2026: Mobil — Video-Knopf mittig in die untere Leiste (wo der Zähler war), Zähler ausblenden */
@media (max-width: 859px) {
  .room-modal-imgcount { display: none; }
  .room-modal-videobtn {
    top: auto;
    bottom: 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* =============== 02.07.2026: Parken-Hinweisleiste unter dem Hero (Kundenwunsch, Option 1) =============== */
/* 07/2026: Gold = Seiten-Gold (--c-accent, wie Buchen-Buttons/Badges) statt Eigenverlauf.
   position/z-index: Der Hero-Overlay (.hero::after, overflow-y visible) blutete sonst
   über die Leiste und machte sie fleckig-dunkel. */
.parking-bar {
  background: var(--c-accent);
  border-bottom: 1px solid rgba(27, 79, 130, 0.15);
  position: relative;
  z-index: 5;
}
.parking-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 16px;
  flex-wrap: wrap;
}
.parking-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 800;
  flex: none;
}
/* Symbol + Titel als Gruppe (bleiben zusammen auf einer Zeile) */
.parking-bar-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.parking-bar-title,
.parking-bar-price {
  font-family: var(--f-sans);
  font-size: 1rem;
  color: var(--c-primary);
  letter-spacing: 0.01em;
}
.parking-bar-title { font-weight: 700; }
.parking-bar-sep {
  font-family: var(--f-sans);
  color: var(--c-primary);
  opacity: 0.55;
}
.parking-bar-link {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1.5px solid var(--c-primary);
  padding-bottom: 1px;
  white-space: nowrap;
}
.parking-bar-link:hover { opacity: 0.75; }
/* 06.07.2026: Mobil zweizeilig (Kundenwunsch) — Zeile 1: Symbol+Titel,
   Zeile 2: Preis + Details zusammen. Head auf volle Breite → erzwingt den
   Umbruch, Preis+Link fließen gemeinsam in die zweite Zeile. */
@media (max-width: 600px) {
  .parking-bar-inner {
    gap: 4px 10px;
    padding: 12px 14px;
    text-align: center;
  }
  .parking-bar-head { flex-basis: 100%; justify-content: center; }
  .parking-bar-sep { display: none; }         /* Trenner nur im Desktop-Einzeiler */
  .parking-bar-title,
  .parking-bar-price { font-size: 0.9375rem; }
  .parking-bar-link { margin-top: 0; }
}

/* =============== 02.07.2026: Raum 2 · Saal-Sektion (tagungen) =============== */
.saal-photo-toggle {
  max-width: 980px;
  margin: 0 auto;
}
.saal-photo-stage {
  aspect-ratio: 16 / 9;   /* Saal-Fotos sind Querformat — nicht auf 4:3 beschneiden */
}

/* =============== 02.07.2026 Korrektur 4: Elbspaziergang-Kopf größer (Kundenwunsch) =============== */
.walking-tour .section-head .eyebrow-egon {
  font-size: 1.0625rem;
  letter-spacing: 0.24em;
}
.walking-tour .section-head h2 {
  font-size: clamp(2.25rem, 4.2vw, 3.375rem);
}
.walking-tour .section-head p {
  font-size: 1.125rem;
}

/* =============== 03.07.2026: Bestuhlungs-Karten im Saal (wie Raum 1) =============== */
.saal-bestuhlung-grid { margin-top: var(--s-4); }

/* =============== 03.07.2026: Über-uns Zeitstrahl (2007 → 2018 → 2026) =============== */
/* Neu aufgebaut: durchgehende Verbindungslinie (pro Punkt fest verankert, überbrückt
   die Lücke sicher), größerer Text, text-wrap:pretty gegen Einzelwort-Zeilen. */
.ueber-timeline {
  padding: clamp(24px, 2.8vw, 36px);
  display: flex;
  align-items: center;          /* Zeitstrahl mittig in der hohen Kachel */
}
@media (min-width: 1024px) {
  .ueber-timeline { grid-column: 3 / 5; grid-row: 1 / 3; }
}
@media (max-width: 1023px) {
  .ueber-timeline { grid-column: 1 / -1; }
}
.ueber-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ueber-timeline-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: start;
  padding-left: 34px;
  padding-bottom: clamp(28px, 3vw, 42px);
}
.ueber-timeline-list li:last-child { padding-bottom: 0; }
/* Durchgehende Gold-Linie: von diesem Punkt bis zur Mitte des nächsten Punktes.
   Über feste Punkt-Geometrie verankert → verbindet zuverlässig, egal wie lang der Text ist. */
.ueber-timeline-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 23px;                    /* direkt unter dem Punkt (top 7 + Ø 14 = 21) */
  bottom: -14px;                /* 14 px in die nächste Zeile → Mitte des nächsten Punktes */
  width: 2px;
  background: linear-gradient(var(--c-accent), rgba(221, 177, 60, 0.5));
}
.ueber-timeline-list li:last-child::before { display: none; }
/* Punkt (liegt über der Linie) */
.ueber-timeline-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(221, 177, 60, 0.18);
}
.ueber-timeline-list strong {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 2.6vw, 2.4rem);
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1;
  letter-spacing: 0.01em;
}
.ueber-timeline-list h3 {
  font-family: var(--f-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 3px 0 6px;
}
.ueber-timeline-list p {
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.55;
  max-width: 32ch;              /* engere Spalte → weniger Umbruch-Reste */
  text-wrap: pretty;            /* verhindert Einzelwort in der letzten Zeile */
}
/* Kennzahlen-Reihe: 150 · 40.000+ · 4,1★ */
.ueber-stats-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}
@media (max-width: 900px) {
  .ueber-stats-row { grid-template-columns: 1fr; }
}
.ueber-stats-row .ueber-tile--wide { grid-column: auto; }