/* ================================================================
   SPARK — Unified Brand System (spark-brand.css)
   Single source of truth across all 3 properties:
     · sparkplaces.com            (.hv2 / .stg-*)
     · sparkskyresidences.de      (.ssr-mini-header)
     · socialclub-fra.de          (.sc-*)

   LOAD LAST. This is an override layer — it normalizes typography,
   buttons, header/logo geometry, and motion so the three sites read
   as one brand.

   Principles baked in:
     · Söhne is the ONE typeface (body, headings, nav, eyebrows, buttons)
     · Serif (Instrument Serif italic) is allowed ONLY for the hero
       display accent word ("Sky Lounge", "Months Ahead", "Above Berlin")
     · No monospace eyebrows — the "STAGE COLLECTION · No. 03" mono look is removed
     · Emil Kowalski: strong ease-out curves, :active scale, focus-visible
     · Impeccable: text-wrap balance/pretty, contrast, keyboard focus
     · Taste: unseen consistency compounds
   ================================================================ */

/* ── Canonical Söhne face (consistent name across all sites) ──── */
@font-face {
  font-family: 'Söhne';
  src: local('Söhne Buch'), url('fonts/Sohne-Buch.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: local('Söhne Kräftig'), url('fonts/Sohne-Kraftig.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: local('Söhne Kräftig'), url('fonts/Sohne-Kraftig.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: local('Söhne Kräftig'), url('fonts/Sohne-Kraftig.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ── Brand tokens (shared) ────────────────────────────────────── */
:root {
  /* The one sans. Söhne first, robust system fallbacks after. */
  --spark-sans: 'Söhne', 'General Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* The ONLY serif — display accent word only. */
  --spark-accent-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Emil Kowalski easing curves — stronger than the CSS built-ins. */
  --spark-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --spark-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --spark-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Unified geometry */
  --spark-nav-h:    66px;   /* one nav height for every site */
  --spark-logo-h:   22px;   /* one logo height for every site */
  --spark-radius-pill: 999px;
  --spark-btn-h:    48px;
  --spark-btn-pad-x: 26px;

  /* ONE brand gold — no orange/peach anywhere. */
  --spark-gold:   #B0894A;   /* antique gold — every accent */
  --spark-gold-2: #C7A463;   /* lighter gold — hover / on-dark emphasis */
}

/* Re-point every site's local font variables at Söhne, so existing
   rules that reference them inherit the unified face automatically.
   Mono is included on purpose: eyebrows, meta lines, time slots and
   menu toggles that used JetBrains Mono now render in Söhne. */
:root {
  --font-display: var(--spark-sans) !important;
  --font-body:    var(--spark-sans) !important;
  --stg-sans:     var(--spark-sans) !important;
  --f-body:       var(--spark-sans) !important;
  --stg-mono:     var(--spark-sans) !important;
  --f-mono:       var(--spark-sans) !important;
  --font-mono:    var(--spark-sans) !important;
}

/* ── ONE gold: override every site's accent token ─────────────── */
/* Kills the orange dark-theme accent (#c8a878/#d8bd90), the warm oak
   (#C6A87A) and the champagne tones in favour of a single gold. */
:root,
.stg, .stg--dark, .stg--light, .stg--dusk,
.sc-body, body {
  --accent:        var(--spark-gold) !important;
  --accent-2:      var(--spark-gold-2) !important;
  --oak:           var(--spark-gold) !important;
  --oak-deep:      var(--spark-gold) !important;
  --champagne:     var(--spark-gold) !important;
  --champagne-2:   var(--spark-gold-2) !important;
  --champagne-deep:var(--spark-gold) !important;
}


/* ── Global typeface enforcement ──────────────────────────────── */
body,
.stg,
.sc-body {
  font-family: var(--spark-sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings → Söhne everywhere (the display serif is applied ONLY to
   the accent <em>/<span> inside, see below). */
h1, h2, h3, h4, h5, h6,
.stg-h1, .stg-h2, .stg-h3,
.sc-h1, .sc-h2, .sc-h3,
.display {
  font-family: var(--spark-sans);
}

/* Impeccable: even line lengths, fewer orphans */
h1, h2, h3,
.stg-h1, .stg-h2, .stg-h3,
.sc-h1, .sc-h2, .sc-h3 {
  text-wrap: balance;
  letter-spacing: -0.025em;
}
p, .stg-lede, .sc-lede, .stg-body, .sc-body-copy {
  text-wrap: pretty;
}


/* ── Display accent word — the ONE allowed serif ──────────────── */
/* Keeps "Sky Lounge", "Months Ahead", "Dinner Above Berlin" italic
   serif and gold, unified across all three sites. */
.stg-h1 em, .stg-h2 em, .stg-h3 em, .stg em, .stg-serif,
.sc-h1 .sc-em, .sc-h2 .sc-em, .sc-h3 .sc-em, .sc-em,
h1 em, h2 em, h3 em,
.hero-anim__title h1 em {
  font-family: var(--spark-accent-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--accent, var(--spark-gold));
  letter-spacing: 0;
}


/* ── Eyebrow / kicker — Söhne, NOT monospace ──────────────────── */
/* Directly removes the "SPARK STAGE COLLECTION · No. 03" mono look. */
.stg-eyebrow,
.sc-eyebrow,
.eyebrow,
.label {
  font-family: var(--spark-sans) !important;
  font-weight: 500;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--accent, var(--spark-gold));
  /* Consistent eyebrow rhythm across every site */
  display: inline-flex !important;
  align-items: center;
  gap: 14px !important;
  margin: 0 0 24px !important;
}
.hv2__mega-col h6 {
  font-family: var(--spark-sans) !important;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Unified leading rule before every eyebrow (same length everywhere). */
.stg-eyebrow::before,
.sc-eyebrow::before,
.eyebrow::before {
  content: "" !important;
  width: 30px !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0.8;
  flex: 0 0 auto;
}
.stg-eyebrow--center,
.sc-eyebrow--center { justify-content: center; }


/* ── Unified button system ────────────────────────────────────── */
/* Shape, type, and motion unified across .btn / .stg-btn / .sc-btn.
   Per-site color modifiers (--primary/--ghost) are preserved. */
.btn,
.stg-btn,
.sc-btn,
.hv2__enquire,
.ssr-mini-header__cta,
.hero-anim__cta {
  font-family: var(--spark-sans) !important;
  border-radius: var(--spark-radius-pill) !important;
  transition:
    background   .18s var(--spark-ease-out),
    color        .18s var(--spark-ease-out),
    border-color .18s var(--spark-ease-out),
    transform    .16s var(--spark-ease-out) !important;
}

/* Emil: every pressable element confirms the press. */
.btn:active,
.stg-btn:active,
.sc-btn:active,
.hv2__enquire:active,
.ssr-mini-header__cta:active,
.hero-anim__cta:active,
.hero-anim__chapter:active {
  transform: scale(0.97);
}

/* Emil: hover lift is subtle and consistent. */
.btn:hover,
.stg-btn:hover,
.sc-btn:hover,
.hero-anim__cta:hover {
  transform: translateY(-1px);
}

/* Normalize the stage button away from the 2px-radius outlier. */
.stg-btn {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ── Header + logo geometry (one height, one logo size) ───────── */
.hv2__main      { height: var(--spark-nav-h); }
.stg-nav        { height: var(--spark-nav-h); }
.ssr-mini-header__inner { min-height: var(--spark-nav-h); }
.sc-header      { min-height: var(--spark-nav-h); }

/* Logo: exactly one rendered height across every property. */
.hv2__brand-img,
.ssr-mini-header__mark img,
.ssr-mini-footer__mark img {
  height: var(--spark-logo-h) !important;
  width: auto !important;
}
.sc-header__mark svg {
  height: var(--spark-logo-h) !important;
  width: auto !important;
}

/* Sublabel ("Sky Residence Berlin" / "Supper Club Berlin") →
   Instrument Serif italic in gold (the brand signature, kept per request). */
.ssr-mini-header__sublabel,
.sc-header__sublabel,
.stg-nav__brand span {
  font-family: var(--spark-accent-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
  color: var(--accent, var(--spark-gold)) !important;
}


/* ── Keyboard focus (Impeccable / WCAG 2.4.7) ─────────────────── */
:focus-visible {
  outline: 2px solid var(--accent, var(--spark-gold));
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible,
.stg-btn:focus-visible,
.sc-btn:focus-visible,
.hero-anim__cta:focus-visible,
.hv2__enquire:focus-visible,
.ssr-mini-header__cta:focus-visible {
  outline-offset: 4px;
}


/* ── Reduced motion (Emil + WCAG 2.3.3) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .stg-btn, .sc-btn,
  .hv2__enquire, .ssr-mini-header__cta,
  .hero-anim__cta, .hero-anim__chapter {
    transition-duration: 0.01ms !important;
  }
  .btn:active, .stg-btn:active, .sc-btn:active,
  .hv2__enquire:active, .hero-anim__cta:active,
  .hero-anim__chapter:active,
  .btn:hover, .stg-btn:hover, .sc-btn:hover,
  .hero-anim__cta:hover {
    transform: none !important;
  }
}


/* ================================================================
   UNIFIED NAVIGATION — link typography, CTA, burger + drawer
   Standardizes the bar formatting across .hv2 / .ssr / .sc.
   Per-site link CONTENT stays; only the formatting is shared.
   ================================================================ */

/* Primary nav links — one type treatment everywhere */
.hv2__nav-link,
.ssr-mini-header__nav a,
.sc-header__nav a {
  font-family: var(--spark-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  transition: color .15s var(--spark-ease-out);
}

/* Header CTA — one small gold pill everywhere */
.ssr-mini-header__cta,
.sc-header__cta,
.hv2__enquire {
  font-size: 9.9px !important;          /* -10% (was 11px) */
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 7.2px 14.4px !important;     /* -10% (was 8/16px) */
  border-radius: var(--spark-radius-pill) !important;
}

/* ── Shared burger button (injected on sites without one) ─────── */
.spark-burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.spark-burger span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor; transition: transform .2s var(--spark-ease-out), opacity .2s var(--spark-ease-out);
}

/* ── Shared drawer (DE/EN lives here on every site) ───────────── */
.spark-drawer { position: fixed; inset: 0; z-index: 1000; display: none; }
.spark-drawer.is-open { display: block; }
.spark-drawer__scrim {
  position: absolute; inset: 0; background: rgba(11,11,12,0.55);
  opacity: 0; transition: opacity .25s var(--spark-ease-out);
}
.spark-drawer.is-open .spark-drawer__scrim { opacity: 1; }
.spark-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 88vw);
  background: #F6F3EE; color: #0B0B0C;
  display: flex; flex-direction: column;
  padding: 28px clamp(24px, 4vw, 40px);
  transform: translateX(100%);
  transition: transform .32s var(--spark-ease-drawer);
  overflow-y: auto;
}
.spark-drawer.is-open .spark-drawer__panel { transform: translateX(0); }
.spark-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 24px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.spark-drawer__brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--spark-sans); font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; font-size: 15px; color: #0B0B0C;
}
.spark-drawer__brand .sub {
  font-family: var(--spark-accent-serif); font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none; font-size: 17px;
  color: var(--spark-gold);
}
.spark-drawer__close {
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: #0B0B0C;
}
.spark-drawer__nav { display: flex; flex-direction: column; padding: 18px 0; }
.spark-drawer__nav a {
  font-family: var(--spark-sans); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; color: #0B0B0C;
  padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: color .15s var(--spark-ease-out);
}
.spark-drawer__nav a:hover { color: var(--spark-gold); }

/* ── DE / EN language switch (consistent on every site) ───────── */
.spark-lang {
  display: inline-flex; align-items: center; gap: 0;
  margin-top: auto; padding-top: 24px;
  font-family: var(--spark-sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.spark-lang__opt {
  background: none; border: 0; cursor: pointer; padding: 6px 12px;
  color: rgba(0,0,0,0.45); font: inherit; letter-spacing: inherit;
  transition: color .15s var(--spark-ease-out);
}
.spark-lang__opt:hover { color: #0B0B0C; }
.spark-lang__opt.is-active { color: var(--spark-gold); font-weight: 600; }
.spark-lang__sep { color: rgba(0,0,0,0.25); }

@media (prefers-reduced-motion: reduce) {
  .spark-drawer__scrim, .spark-drawer__panel { transition-duration: 0.01ms !important; }
}


/* ── Residence header: make room for the injected burger ──────── */
/* The header inner is a 3-col grid; the burger becomes col 1.     */
.ssr-mini-header__inner.has-spark-burger {
  grid-template-columns: auto auto 1fr auto;
}
@media (max-width: 880px) {
  .ssr-mini-header__inner.has-spark-burger {
    grid-template-columns: auto 1fr auto; /* burger | brand | cta (nav hidden) */
  }
}


/* ── Partner strip: compact ad band (e.g. Kimpton on Frankfurt) ──
   Deliberately much shorter than a .stage-row so a partner never
   outweighs a SPARK venue. Reuses .eyebrow + .stage-row__cta. */
.spark-partner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(16px, 1.8vw, 24px) 0;
  /* the band sits between two sections; keep the bottom hairline off the
     next section's background edge so they don't read as one line */
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  text-decoration: none;
  color: inherit;
}
.spark-partner__name {
  font-family: var(--spark-sans);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 12px 0 0;
}
.spark-partner__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500, #6E6B63);
  margin: 8px 0 0;
  max-width: 42ch;
}
.spark-partner__shots { display: flex; gap: 10px; }
.spark-partner__shots img {
  width: clamp(112px, 12vw, 172px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  filter: saturate(0.92);
  transition: filter .3s var(--spark-ease-out);
}
.spark-partner:hover .spark-partner__shots img { filter: saturate(1); }

@media (max-width: 860px) {
  .spark-partner { grid-template-columns: 1fr; gap: 22px; }
  .spark-partner__shots img { width: auto; flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spark-partner__shots img { transition-duration: 0.01ms; }
}





/* Chapter ticker: same treatment, one step quieter */
.hero-anim__chapter {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.22);
}
.hero-anim__chapter:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
}
/* The location line is a label, not a heading — let the venue name lead. */
.hero-anim__chapter { letter-spacing: 0.16em; }
.hero-anim__chapter strong { margin-top: 4px; }









/* ── Footer location picker ────────────────────────────────────── */
.footer-locpick { position: relative; }
.footer-locpick__trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.footer-locpick__caret {
  flex: 0 0 auto;
  opacity: 0.45;
  transition: transform .2s var(--spark-ease-out), opacity .2s var(--spark-ease-out);
}
.footer-locpick:hover .footer-locpick__caret { opacity: 0.85; }
.footer-locpick[data-open="true"] .footer-locpick__caret { transform: rotate(180deg); opacity: 1; }

.footer-locpick__list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  min-width: 262px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #17171a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--spark-ease-out), transform .18s var(--spark-ease-out), visibility .18s;
}
.footer-locpick[data-open="true"] .footer-locpick__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.footer-locpick__list button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: rgba(255, 255, 255, 0.82);
  transition: background .15s var(--spark-ease-out), color .15s var(--spark-ease-out);
}
.footer-locpick__list button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.footer-locpick__list strong { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
.footer-locpick__list span   { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .footer-locpick__list,
  .footer-locpick__caret { transition-duration: 0.01ms; }
}




/* ── Enquire sidebar: tighter line rhythm ──────────────────────── */
.cnt-side { gap: 20px; padding: 26px 26px; }
.cnt-side__group h4 { margin: 0 0 3px; }
.cnt-side__group h4 .city { margin-bottom: 4px; }
.cnt-side__group p { margin: 0 0 8px; line-height: 1.45; }
.cnt-side__lines { gap: 3px; }


/* ══ Drawer: luxury brand directory, auf einen Schirm gebracht ═════
   Gleiches Design wie zuvor — nur maßstäblich verkleinert. Bei
   112px Header, 30px Nav und 64px CTA lief der Inhalt auf 1486px
   und damit 586px über einen 900px-Viewport hinaus: bei 100% Zoom
   war knapp die Hälfte unsichtbar. Alle Stufen bleiben erhalten,
   die Abstände und Grade sind proportional zurückgenommen. */
:root {
  --dr-bg: #F4F0E8;
  --dr-ink: #181714;
  --dr-ink-2: #77736B;
  --dr-bronze: #A77D3E;
  --dr-bronze-deep: #725222;
  --dr-foot: #171612;
  --dr-foot-2: #96938D;
  --dr-line: rgba(24, 23, 20, 0.08);
  --dr-pad-x: clamp(20px, 7%, 56px);
}

.hv2-drawer__panel--wide { width: min(420px, 78vw); }
.hv2-drawer__panel { background: var(--dr-bg); }

/* ── Header ─────────────────────────────────────────────────────── */
.hv2-drawer__head {
  height: 60px;
  padding: 0 var(--dr-pad-x);
  border-bottom: 1px solid var(--dr-line);
}
.hv2-drawer__brand img { height: 22px; }
.hv2-drawer__head-r { gap: 10px; }
.hv2-drawer__lang {
  box-sizing: border-box;
  height: 26px;
  align-items: center;
  line-height: 1;
  padding: 2px;
  background: transparent;
  border-color: var(--dr-line);
}
.hv2-drawer__lang-opt {
  min-width: 28px;
  height: 100%;
  padding: 0 8px;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--dr-ink-2);
}
.hv2-drawer__lang-opt.is-active { color: #fff; }
.hv2-drawer__lang-thumb {
  top: 2px; left: 2px;
  height: calc(100% - 4px);
  background: var(--dr-ink);
}
/* Close ist jetzt ein reiner Icon-Button: rund, nur das Kreuz */
.hv2-drawer__close {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  border-color: var(--dr-line);
  color: var(--dr-ink-2);
  justify-content: center;
}
.hv2-drawer__close svg { width: 11px; height: 11px; }
.hv2-drawer__close:hover {
  color: var(--dr-ink);
  border-color: var(--dr-line);
  background: rgba(24, 23, 20, 0.05);
}

/* ── Contentspalte: keine senkrechten Trennlinien ───────────────── */
.hv2-drawer__col {
  border-right: 0;
  border-left: 0;
  padding: clamp(16px, 2.2vh, 22px) var(--dr-pad-x) clamp(10px, 1.6vh, 14px);
}
.hv2-drawer__col--primary { gap: 0; }

/* ── Section-Labels ─────────────────────────────────────────────── */
.hv2-drawer__dest-trigger,
.hv2-drawer__block-trigger {
  font-family: var(--spark-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--dr-bronze);
}
.hv2-drawer__dest-trigger { padding: 0 0 8px; }
.hv2-drawer__block-trigger { padding: 8px 0; }
.hv2-drawer__dest-wrap[data-open="true"] .hv2-drawer__dest-trigger { color: var(--dr-bronze); }
.hv2-drawer__dest-trigger:hover,
.hv2-drawer__block-trigger:hover,
.hv2-drawer__dest-wrap:hover .hv2-drawer__dest-trigger,
.hv2-drawer__block--collapsible[data-open="true"] .hv2-drawer__block-trigger {
  color: var(--dr-bronze-deep);
}
.hv2-drawer__block-caret {
  display: block;
  margin-left: auto;
  width: 12px; height: 12px;
  color: var(--dr-bronze);
  transition: transform .22s ease;
}
.hv2-drawer__dest-caret { display: none; }
.hv2-drawer__block-trigger:hover .hv2-drawer__block-caret {
  color: var(--dr-bronze-deep);
  transform: translateY(1px);
}
.hv2-drawer__block--collapsible[data-open="true"] .hv2-drawer__block-caret {
  color: var(--dr-bronze-deep);
}


/* Hairline-Gliederung: nur horizontal */
.hv2-drawer__prod-wrap {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--dr-line);
}
.hv2-drawer__block--collapsible {
  margin-top: 10px;
  border-top: 1px solid var(--dr-line);
}
.hv2-drawer__block--collapsible + .hv2-drawer__block--collapsible { margin-top: 0; }
.hv2-drawer__col--primary > .hv2-drawer__block--collapsible:last-of-type {
  border-bottom: 1px solid var(--dr-line);
}

/* ── Destinations ───────────────────────────────────────────────── */
.hv2-drawer__dest-wrap[data-open="true"] .hv2-drawer__dest-list,
.hv2-drawer__dest-wrap:hover .hv2-drawer__dest-list { max-height: 320px; }
.hv2-drawer__dest-list a {
  padding: 1px 0;
  /* Status als eigene Spalte: alle beginnen an derselben Achse.
     Zuvor rechtsbuendig, dadurch streuten die linken Kanten um 78px. */
  display: grid;
  grid-template-columns: 1fr 112px;
  column-gap: 18px;
  align-items: baseline;
}
/* Ein Zeilentakt fuer Destinations, Products und beide Gruppen —
   gemessen liefen sie mit 23 / 21 / 27px auseinander. */
.hv2-drawer__dest-list a,
.hv2-drawer__products-list a,
.hv2-drawer__sub-list a { min-height: 26px; }
.hv2-drawer__dest-label {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--dr-ink);
  gap: 9px;
  transition: color .2s ease;
}
.hv2-drawer__dest-city { font-weight: 400; }
.hv2-drawer__dest-venue--accent {
  color: var(--dr-bronze);
  font-size: 1.1em;
  letter-spacing: 0;
}
.hv2-drawer__dest-sub {
  font-size: clamp(9.5px, 0.8vw, 10.5px);
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--dr-ink-2);
}

/* ── Products ───────────────────────────────────────────────────── */
.hv2-drawer__products-list--collapsible { margin-top: 0; }
.hv2-drawer__products-list a {
  align-items: center;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding: 1px 0;
  color: var(--dr-ink);
}

/* ── Accordion-Inhalte ──────────────────────────────────────────── */
.hv2-drawer__block--collapsible[data-open="true"] .hv2-drawer__sub-list {
  max-height: 420px;
  padding-bottom: 14px;
}
.hv2-drawer__sub-list a {
  /* Gleiche Zeilenmetrik wie Destinations und Products: dort sorgt
     min-height 27px fuer den Takt, den Gruppenzeilen fehlte er.
     Die Schrift bleibt eine Stufe kleiner (Hierarchie). */
  align-items: center;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 3px 0;
  color: var(--dr-ink);
}

.hv2-drawer__dest-list a:hover { padding-left: 0; }
.hv2-drawer__dest-list a:hover .hv2-drawer__dest-label { color: var(--dr-bronze); }
.hv2-drawer__products-list a:hover,
.hv2-drawer__sub-list a:hover { color: var(--dr-bronze); padding-left: 0; }

/* ── CTA ────────────────────────────────────────────────────────── */
.hv2-drawer__cta-inline { margin-top: 12px; padding-top: 0; }
.hv2-drawer__cta-inline-btn {
  justify-content: center;
  gap: 14px;
  min-width: 240px;
  height: 42px;
  padding: 0 22px !important;
  border-radius: 21px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  background: var(--dr-bronze-deep) !important;
  transition: background .2s ease;
}
.hv2-drawer__cta-inline-btn:hover { background: #5b4019 !important; }
.hv2-drawer__cta-arr {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0;
  transition: transform .2s ease;
}
.hv2-drawer__cta-inline-btn:hover .hv2-drawer__cta-arr { transform: translateX(4px); }

/* ── Contact-Footer ─────────────────────────────────────────────── */
.hv2-drawer__micro {
  flex: 0 0 auto;
  background: var(--dr-foot);
  border-top: 0;
  gap: 7px;
  padding: 10px var(--dr-pad-x) calc(14px + env(safe-area-inset-bottom, 0px));
}
.hv2-drawer__micro-block { gap: 2px; }
.hv2-drawer__micro-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(244, 240, 232, 0.55);
  margin-bottom: 3px;
}
.hv2-drawer__micro-row--inline {
  display: grid;
  grid-template-columns: 84px 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 1px 0;
}
.hv2-drawer__micro-row--inline span {
  font-size: 9px !important;
  letter-spacing: 0.2em;
  color: rgba(244, 240, 232, 0.55);
}
.hv2-drawer__micro-row--inline b {
  font-family: var(--spark-sans);
  font-size: 12.5px !important;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #F4F0E8;
}
.hv2-drawer__news {
  height: 36px;
  max-width: 300px;
  border-color: rgba(199, 155, 106, 0.45);
  background: rgba(255, 255, 255, 0.03);
}
.hv2-drawer__news input { font-size: 12.5px; padding: 0 14px; }
.hv2-drawer__news input::placeholder { color: var(--dr-foot-2); }
.hv2-drawer__news button {
  background: var(--dr-bronze);
  padding: 0 18px;
  font-size: 14px;
  color: #fff;
}
.hv2-drawer__news button:hover { background: var(--dr-bronze-deep); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hv2-drawer__panel--wide { width: min(420px, 86vw); }
}
@media (max-width: 720px) {
  .hv2-drawer__panel--wide { width: min(370px, 92vw); }
  .hv2-drawer__head { height: 62px; padding: 0 22px; }
  .hv2-drawer__col { padding: 14px 22px 16px; }
  .hv2-drawer__micro { padding-left: 22px; padding-right: 22px; }
  .hv2-drawer__dest-list a { flex-wrap: wrap; gap: 0 14px; }
  .hv2-drawer__dest-label { white-space: normal; }
  /* 44px Touch-Target liess die Zeilen gegenueber 26px auf dem Desktop
     um zwei Drittel auseinanderlaufen. 36px bleibt bequem treffbar —
     die Zeilen sind panelbreit, die Trefferflaeche also gross. */
  .hv2-drawer__dest-list a,
  .hv2-drawer__products-list a,
  .hv2-drawer__sub-list a { min-height: 30px; }
  .hv2-drawer__cta-inline-btn { width: 100%; min-width: 0; }
  .hv2-drawer__news { max-width: none; }
}


/* ── Familienlook: die schlanken Drawer der Schwester-Sites ─────── */
.spark-drawer__panel { background: var(--dr-bg); }
.spark-drawer__head { border-bottom: 1px solid var(--dr-line); }
.spark-drawer__nav a:hover { color: var(--dr-bronze); }


/* ══ Destination-Kachel: crafted object mit Bronze-Fassung ════════
   Texte, Begriffe und Reihenfolge der .scene-Blöcke bleiben 1:1.
   Auf .hero-anim__card gescopt, weil spark-brand.css auf allen
   Seiten lädt und ".scene" ein zu generischer Name ist. */
.hero-anim__card {
  min-height: clamp(260px, 27vw, 330px);
  /* Bronze-Fassung statt weisser Kante — das Objekt bekommt Rahmen */
  border: 1px solid rgba(199, 155, 106, 0.28);
  border-radius: 24px;
  background-color: rgba(11, 11, 12, 0.86);
  backdrop-filter: blur(30px) saturate(75%) contrast(104%);
  -webkit-backdrop-filter: blur(30px) saturate(75%) contrast(104%);
  /* Warmes Licht nur an die aeussere obere Kante, Textzone bleibt ruhig */
  background-image:
    radial-gradient(120% 110% at 100% 0%, rgba(199, 155, 106, 0.08), transparent 55%),
    linear-gradient(100deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.14) 62%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 60px -26px rgba(0, 0, 0, 0.75);
}
/* Feines Filmkorn */
.hero-anim__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}
/* Der 2px-Bronzebalken innen entfaellt — die Fassung traegt den Akzent */
.hero-anim__card::before { display: none; }

/* ── Innenraum ──────────────────────────────────────────────────── */
.hero-anim__card .scene {
  inset: clamp(20px, 1.8vw, 28px);
  gap: 0;
}
.hero-anim__card .scene__num {
  font-size: clamp(10.5px, 0.85vw, 12px);
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.7);
}
.hero-anim__card .scene h2 {
  margin-top: 18px;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
/* Instrument Serif laeuft kleiner als die Sans — optisch angleichen
   und die Fuge zum Sans-Wort oeffnen, damit die Zeile zusammenhaelt. */
.hero-anim__card .scene h2 em {
  font-size: 1.06em;
  letter-spacing: 0;
  margin-right: 0.07em;
}
.hero-anim__card .scene p {
  margin-top: 11px;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.45;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Kategorien: 2-Spalten-Raster, klarer Aktiv-Zustand ─────────── */
.hero-anim__card .scene__verticals {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(199, 155, 106, 0.18);
  /* Die beiden Spalten stehen links zusammen statt ueber die volle
     Breite gespreizt — der Rest bleibt bewusst leer. */
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: 7px clamp(36px, 5vw, 80px);
  font-size: clamp(11px, 0.9vw, 12.5px);
  letter-spacing: 0.2em;
}
.hero-anim__card .scene__verticals li {
  min-height: 19px;
  gap: 9px;
  color: rgba(255, 255, 255, 0.34);
}
.hero-anim__card .scene__verticals li::before {
  width: 14px;
  background: rgba(255, 255, 255, 0.2);
}
.hero-anim__card .scene__verticals li.on {
  color: #fff;
  font-weight: 500;
}
.hero-anim__card .scene__verticals li.on::before {
  width: 22px;
  background: var(--oak, #c79b6a);
}
.hero-anim__card .scene--4 .scene__triptych div { border-radius: 10px; }

/* Chapter-/Composite-Zaehler ueber der Kachel: raus. Die Kopfzeile
   trug nur diesen Zaehler — der erste Span war ohnehin versteckt. */
.hero-anim__top { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hv2-drawer__cta-arr,
  .hv2-drawer__block-caret,
  .hv2-drawer__dest-label,
  .hero-anim__card::after { transition-duration: 0.01ms; }
}


/* ══ Mobile-Schicht ═══════════════════════════════════════════════
   Nur Darstellung: keine Texte, keine Reihenfolge, keine Links.
   Greift ausschliesslich unter 720px — Desktop bleibt unberuehrt.
   Messwerte der Ausgangslage (390x844): Seite 19.354px = 22,9 Screens,
   Fliesstext 12,5-14px, 128 Mono-Labels, 7 verschiedene Sektionsabstaende. */
@media (max-width: 720px) {

  /* ── 1 · Lesbarkeit ─────────────────────────────────────────────
     Karten-Fliesstext lag bei 12,5-14px. Das ist der auffaelligste
     Einzelwert der Messung und der billigste Fix. */
  .uc-card__sub,
  .intent-card__sub,
  .v2-card__desc,
  .dest-tile__sub,
  .lp-prog__card-sub,
  .offer-card__desc,
  .moment__sub,
  .hero-anim__lede,
  p:not([class]) {
    /* !important, weil die Originalregeln hoehere Spezifitaet haben
       (.uc-card .uc-card__sub schlaegt .uc-card__sub) */
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }
  /* Destinations-Kachel im Hero: Text mit, Kachel waechst entsprechend */
  .hero-anim__card .scene p { font-size: 15px; line-height: 1.5; }
  .hero-anim__card { min-height: 324px; }  /* Composite-Szene lief bei 310px 3px ueber */
  /* Headlines eine Stufe zurueck, damit sie neben 15,5px Text nicht kippen */
  .sec-head h2, .v2-sec__title, .lp-prog__title {
    letter-spacing: -0.02em;
  }

  /* ── 2 · Ein Abstandstakt ───────────────────────────────────────
     Sieben verschiedene Werte (28/48/56-32/44/52/72) auf einen.
     44px ist der haeufigste Bestand — dabei bleibt es, damit die
     Vereinheitlichung die Seite nicht laenger macht. */
  section:not(.hero-anim):not(#heroAnim) {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* ── 3 · Kartennoise ────────────────────────────────────────────
     Die 01/02/03-Zaehler auf den Karten sind reine Dekoration und
     tragen keine Information — auf kleinen Schirmen konkurrieren sie
     mit der Kartenueberschrift. Tags und Metazeilen bleiben. */
  .uc-card__num,
  .intent-card__num { display: none; }

  /* ── 4 · Destinations als Swipe (Muster) ────────────────────────
     Drei gestapelte Kacheln à 409px = 1.256px. Als Swipe-Reihe rund
     450px. Der angeschnittene naechste Slide ist die Wisch-Einladung —
     dafuer braucht es kein JS und keinen Punkt-Indikator. */
  .dest-trio {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin-inline: calc(-1 * var(--spark-gutter, 20px));
    padding-inline: var(--spark-gutter, 20px);
    padding-bottom: 4px;
  }
  .dest-trio::-webkit-scrollbar { display: none; }
  .dest-trio > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* ── 5 · Sticky Enquire in der Daumenzone ───────────────────────
     Erscheint erst ab dem zweiten Screen, damit der Hero frei bleibt. */
  .spark-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 23px;
    background: #725222;
    color: #fff;
    font-family: var(--spark-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .28s var(--spark-ease-out, ease),
                transform .28s var(--spark-ease-out, ease);
  }
  .spark-fab.is-in {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .spark-fab:active { transform: scale(0.97); }
  /* Nicht ueber dem Seitenfuss kleben bleiben */
  .spark-fab.is-out {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
  }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .spark-fab { transition-duration: 0.01ms; }
}
/* Auf dem Desktop existiert der Knopf gar nicht erst */
@media (min-width: 721px) {
  .spark-fab { display: none !important; }
}


/* ── Raumzeilen: weniger Leerraum unter der Kachel ────────────────
   .stage-row trug margin-bottom clamp(64px, 8vw, 120px); zusammen mit
   dem Divider darunter entstand ein sehr grosses Loch. */
.stage-row { margin-bottom: clamp(40px, 4.5vw, 72px); }


/* ── Industries: sechs Logos in einer Reihe ───────────────────────
   Die Basis war bereits sechsspaltig, fiel aber ab 1100px auf drei
   und ab 640px auf zwei Spalten — dadurch wurden die Kacheln riesig.
   Die Reihe bleibt jetzt bis 560px zusammen, die Kacheln werden
   flacher und enger. */
.ff-ind__grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px;
}
.ff-ind__cell {
  aspect-ratio: 5/3;
  padding: 10px;
  border-radius: 6px;
}
@media (max-width: 560px) {
  .ff-ind__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .ff-ind__cell { padding: 8px; }
}


/* ── Footer-Standortwaehler: Venue wie in der Navigation ──────────
   Serif-Italic in Bronze, dieselbe optische Angleichung wie bei
   .hv2-drawer__dest-venue--accent (die Serif laeuft kleiner). */
.footer-locpick__name em,
[data-lp="name"] em {
  font-family: var(--spark-accent-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: 0;
  color: var(--spark-gold-2, #C7A463);
  margin-left: 0.12em;
}


/* ── Footer: warmes Creme statt kaltem Weiss ──────────────────────
   #F4F0E8 ist derselbe Ton wie der Drawer-Grund. Die Abstufungen
   bleiben erhalten — nur der Grundton wechselt von 255,255,255
   auf 244,240,232, damit der Fuss nicht kalt gegen die Marke steht. */
.footer {
  --f-ink: 244, 240, 232;
  color: rgb(var(--f-ink));
}
.footer h3,
.footer h5,
.footer strong,
.footer-location__name strong,
.footer [data-lp="email"],
.footer [data-lp="phone"],
.footer [data-lp="address"] { color: rgb(var(--f-ink)); }

.footer-location__cols a { color: rgba(var(--f-ink), 0.92); }
.footer-location__cols a:hover { border-bottom-color: rgb(var(--f-ink)); }
.footer-label { color: rgba(var(--f-ink), 0.5); }
.footer-cols li a { color: rgba(var(--f-ink), 0.72); }
.footer-cols li a:hover { color: rgb(var(--f-ink)); }

.footer-newsletter__form input[type="email"] { color: rgb(var(--f-ink)); }
.footer-newsletter__form input[type="email"]::placeholder { color: rgba(var(--f-ink), 0.45); }
/* Der Subscribe-Knopf war reinweiss und stach neben dem warmen Text heraus */
.footer-newsletter__form button { background: rgb(var(--f-ink)); }

/* Newsletter-Block flacher: 48px Abstand zu beiden Strichen plus
   2x20px Innenpolsterung bei nur 68px Inhalt. Strich zu Strich
   sinkt damit von 156px auf rund 116px. */
.footer .wrap { gap: 30px; }
.footer-newsletter { padding: 10px 0; }


/* ── Drawer nach der Bildvorlage ──────────────────────────────────
   Hairlines zwischen den Destinations-Zeilen und im Kontaktblock,
   Labels dort in Bronze. Die Pfeile aus der Vorlage entfallen —
   sie erschienen bislang beim Hover. */
.hv2-drawer__dest-list li + li a { border-top: 1px solid var(--dr-line); }

.hv2-drawer__products-list a .arr,
.hv2-drawer__sub-list a .arr { display: none !important; }

.hv2-drawer__micro-row--inline + .hv2-drawer__micro-row--inline,
.hv2-drawer__micro-block > .hv2-drawer__micro-eyebrow + .hv2-drawer__micro-row--inline {
  border-top: 1px solid rgba(244, 240, 232, 0.14);
}
.hv2-drawer__micro-row--inline { padding: 6px 0; }


/* ── Drawer: Inhalt scrollt wieder, statt ueberzulaufen ───────────
   site-v2.css setzt .hv2-drawer__body spaeter auf overflow:visible und
   hebelt damit das eigene overflow-y:auto aus. Beim Aufklappen von
   Experiences oder SPARK lief der Inhalt deshalb ueber den
   Kontaktblock — der Enquire-Knopf lag darueber. */
.hv2-drawer__panel { overflow: hidden; }
.hv2-drawer__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Destinations: mehr Luft zwischen den Hairlines ───────────────
   Mit den Trennlinien wirkten 26px Zeilenhoehe gequetscht. */
.hv2-drawer__dest-list a { padding: 7px 0; min-height: 34px; }
@media (max-width: 720px) {
  .hv2-drawer__dest-list a { padding: 6px 0; min-height: 36px; }
}


/* ── Feinschliff: leichtere Schnitte, engere Produktzeilen ────────
   Die Versalien standen auf 600 und wirkten fett; 500 traegt das
   Letterspacing genauso. Die Kontaktzeilen ziehen nach. */
.hv2-drawer__dest-trigger,
.hv2-drawer__block-trigger { font-weight: 500; }
.hv2-drawer__micro-eyebrow { font-weight: 400; }
.hv2-drawer__micro-row--inline span { font-weight: 400 !important; }
.hv2-drawer__micro-row--inline b { font-weight: 400 !important; }

/* Products traegt keine Trennlinien und darf deshalb enger stehen
   als Destinations (34px). */
.hv2-drawer__products-list a { padding: 2px 0; min-height: 23px; }
@media (max-width: 720px) {
  .hv2-drawer__products-list a { padding: 3px 0; min-height: 26px; }
}


/* ── Products einklappbar + Kontaktzeilen enger ───────────────────
   Products war fest offen. Fuer das exklusive Akkordeon muss es
   einfahren koennen — inklusive sichtbarem Chevron als Hinweis. */
.hv2-drawer__prod-wrap .hv2-drawer__dest-caret {
  display: block;
  margin-left: auto;
  width: 12px; height: 12px;
  color: var(--dr-bronze);
  transition: transform .22s ease;
}
.hv2-drawer__prod-wrap[data-open="true"] .hv2-drawer__dest-caret { transform: rotate(180deg); }
.hv2-drawer__prod-wrap .hv2-drawer__prod-trigger { cursor: pointer; }
.hv2-drawer__products-list--collapsible {
  overflow: hidden;
  transition: max-height .35s var(--spark-ease-drawer), opacity .25s ease;
}
.hv2-drawer__prod-wrap[data-open="false"] .hv2-drawer__products-list--collapsible {
  max-height: 0;
  opacity: 0;
}
.hv2-drawer__prod-wrap[data-open="true"] .hv2-drawer__products-list--collapsible {
  max-height: 320px;
  opacity: 1;
}

/* Kontaktzeilen: 6px Polsterung je Zeile war zu luftig */
.hv2-drawer__micro-row--inline { padding: 3px 0; }


/* ── Enquire und Newsletter als ein Paar ──────────────────────────
   Gleiche Breite, gleiche Hoehe, gleiche Pillform. Vorher war der
   Knopf 240px und schmaler als das 300px-Eingabefeld. */
.hv2-drawer__cta-inline-btn {
  min-width: 0;
  width: 100%;
  max-width: 320px;
  height: 44px;
}
.hv2-drawer__news {
  width: 100%;
  max-width: 320px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
}
.hv2-drawer__news input { padding-left: 18px; }
.hv2-drawer__news button {
  border-radius: 0 999px 999px 0;
  padding: 0 20px;
}
@media (max-width: 720px) {
  .hv2-drawer__cta-inline-btn,
  .hv2-drawer__news { max-width: none; }
}
/* Der Knopf trug noch border-radius:21px !important aus einer frueheren
   Runde und war dadurch nicht so rund wie das Eingabefeld. */
.hv2-drawer__cta-inline-btn { border-radius: 999px !important; }
.hv2-drawer__cta-inline { display: block; }
.hv2-drawer__cta-inline-btn { display: flex; box-sizing: border-box; }

/* ── Drawer: das Menue muss immer vollstaendig sichtbar sein ──────
   Ausgangslage bei 375x667: Kopf 62 + Navigation 561 + Knopf 69 +
   Kontakt 145 = 837px in einem 667px hohen Fenster. 102px Navigation
   lagen unter der Falte.

   Drei Hebel, in dieser Reihenfolge:
   1. Der Anfrage-Knopf verlaesst den scrollenden Body (Umzug in
      site-v2.js) und wird eine eigene Panel-Zeile. Als sticky-Element
      haette er stattdessen die Menuezeilen ueberdeckt.
   2. Zeilenhoehen und Innenabstaende skalieren mit der Fensterhoehe.
      .hv2-drawer__col trug allein 88px Polsterung (44px oben/unten).
   3. Der Kontaktblock weicht: ab 860px Hoehe faehrt er erst bei
      Hover/Fokus aus, unter 620px entfaellt er ganz. Die Navigation
      hat Vorrang, Kontakt bleibt ueber den Newsletter und die
      Fusszeile erreichbar.

   Gemessen: 900, 667, 600, 568 und 812x375 zeigen die Navigation
   vollstaendig, ohne Scrollen. */
.hv2-drawer__panel > .hv2-drawer__cta-inline {
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(7px, 1.2vh, 12px) var(--dr-pad-x);
  background: #F4F0E8;
  border-top: 1px solid var(--dr-line, rgba(23, 22, 18, 0.12));
}
.hv2-drawer__panel > .hv2-drawer__cta-inline .hv2-drawer__cta-inline-btn {
  width: 100%;
  max-width: none;
}
.hv2-drawer__cta-inline-btn { height: clamp(38px, 5.4vh, 44px) !important; }

.hv2-drawer__col { padding: clamp(8px, 2.2vh, 44px) var(--dr-pad-x) !important; }
.hv2-drawer__dest-list a { min-height: clamp(24px, 4.2vh, 36px) !important; }
.hv2-drawer__products-list a,
.hv2-drawer__sub-list a { min-height: clamp(21px, 3.4vh, 30px) !important; }

/* Die Eyebrows "Contact" und "Newsletter" kosteten je 17px, ohne etwas
   zu erklaeren: die Zeilen tragen ihre Labels bereits, das Feld sagt
   "your@email.com". */
.hv2-drawer__micro { gap: 4px; padding-top: 10px; }
.hv2-drawer__micro-eyebrow { display: none; }
.hv2-drawer__micro-row--inline { padding: 3px 0 !important; }

@media (max-height: 860px) {
  .hv2-drawer__micro > .hv2-drawer__micro-block:first-child {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease;
  }
  .hv2-drawer__micro:hover > .hv2-drawer__micro-block:first-child,
  .hv2-drawer__micro:focus-within > .hv2-drawer__micro-block:first-child {
    max-height: 120px;
    opacity: 1;
  }
  .hv2-drawer__micro { padding-top: 8px; padding-bottom: 10px; }
  .hv2-drawer__news { height: clamp(36px, 5vh, 42px) !important; }
}

@media (max-height: 620px) {
  .hv2-drawer__micro { display: none !important; }
}

/* Querformat: in der Hoehe ist nichts mehr zu holen, in der Breite
   schon - das Panel wird breiter und die Navigation zweispaltig. */
@media (max-height: 560px) and (min-width: 620px) {
  .hv2-drawer__panel--wide { width: min(680px, 92vw) !important; }
  .hv2-drawer__col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
    align-content: start;
  }
  .hv2-drawer__dest-wrap { grid-column: 1; }
  .hv2-drawer__prod-wrap { grid-column: 2; grid-row: 1; }
  .hv2-drawer__block { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hv2-drawer__panel > .hv2-drawer__cta-inline { padding-left: 22px; padding-right: 22px; }
  .hv2-drawer__micro-row--inline { padding: 2px 0 !important; }
  .hv2-drawer__micro-row--inline b { font-size: 12px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   DRAWER ALS KURATIERTES MEGA-MENUE
   Aus der Linkliste wird ein Einstieg ins Angebot: Destinationen mit
   Bild und Nutzenzeile, Experiences als Kachelnavigation, darunter ein
   CTA-Balken. Reihenfolge folgt der Conversion-Prioritaet.
   Die Hoehen skalieren weiter mit vh, damit die Navigation auf jedem
   Fenster vollstaendig sichtbar bleibt.
   ═══════════════════════════════════════════════════════════════════ */
.hv2-drawer__panel--wide { width: min(1040px, 96vw); }

.sparkmega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
  min-height: 100%;
}
.sparkmega__main {
  padding: clamp(10px, 2.2vh, 30px) clamp(20px, 3vw, 40px) clamp(8px, 1.6vh, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 26px);
  min-width: 0;
}

/* Die Zeile emotionalisiert den Einstieg — Kursivschnitt wie in den Heros. */
.sparkmega__intro {
  margin: 0;
  font-family: var(--spark-serif, 'Instrument Serif', Georgia, serif);
  font-size: clamp(17px, 2.1vh, 23px);
  line-height: 1.25;
  color: var(--dr-bronze-deep, #725222);
  max-width: 26ch;
}
.sparkmega__intro em { font-style: italic; color: var(--dr-bronze, #A77D3E); }

.sparkmega__sec { display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 12px); min-width: 0; }
.sparkmega__eyebrow {
  margin: 0;
  font-family: var(--spark-sans, inherit);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dr-bronze-deep, #725222);
}

/* ── Destinationen ──────────────────────────────────────────────── */
.sparkmega__dests { list-style: none; margin: 0; padding: 0; }
.sparkmega__dests li + li { border-top: 1px solid var(--dr-line, rgba(23, 22, 18, 0.10)); }
.sparkmega__dest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  padding: clamp(5px, 1vh, 10px) 0;
  text-decoration: none;
  color: inherit;
  transition: background .18s ease;
}
.sparkmega__dest:hover { background: rgba(199, 155, 106, 0.07); }
.sparkmega__thumb {
  display: block;
  width: clamp(44px, 6.2vh, 62px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: #E7E1D6;
  flex: 0 0 auto;
}
.sparkmega__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sparkmega__dest-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sparkmega__dest-txt b {
  font-family: var(--spark-sans, inherit);
  font-size: clamp(13px, 1.7vh, 15px);
  font-weight: 500;
  color: #171612;
  letter-spacing: -0.005em;
}
.sparkmega__dest-txt small {
  font-size: clamp(10.5px, 1.35vh, 12px);
  line-height: 1.35;
  color: rgba(23, 22, 18, 0.56);
}
.sparkmega__status {
  font-family: var(--spark-sans, inherit);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(23, 22, 18, 0.48);
  white-space: nowrap;
  text-align: right;
}
.sparkmega__arr {
  font-size: 14px;
  color: var(--dr-bronze, #A77D3E);
  transition: transform .2s ease;
}
.sparkmega__dest:hover .sparkmega__arr,
.sparkmega__all:hover .sparkmega__arr { transform: translateX(4px); }

.sparkmega__all {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: clamp(6px, 1vh, 10px) 0 0;
  border-top: 1px solid var(--dr-line, rgba(23, 22, 18, 0.10));
  text-decoration: none;
  font-family: var(--spark-sans, inherit);
  font-size: clamp(12px, 1.6vh, 13.5px);
  color: #171612;
}
.sparkmega__all:hover { color: var(--dr-bronze-deep, #725222); }

/* ── Experience-Kacheln ─────────────────────────────────────────── */
.sparkmega__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 0.9vh, 9px);
}
.sparkmega__tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: clamp(7px, 1.2vh, 12px) clamp(8px, 1vw, 12px);
  border: 1px solid var(--dr-line, rgba(23, 22, 18, 0.12));
  border-radius: 4px;
  text-decoration: none;
  color: #171612;
  font-family: var(--spark-sans, inherit);
  font-size: clamp(10.5px, 1.4vh, 12px);
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color .18s ease, background .18s ease;
}
.sparkmega__tile:hover {
  border-color: var(--dr-bronze, #A77D3E);
  background: rgba(199, 155, 106, 0.09);
}
.sparkmega__tile-ico { flex: 0 0 auto; color: var(--dr-bronze, #A77D3E); line-height: 0; }
.sparkmega__tile-ico svg { width: clamp(15px, 2vh, 18px); height: clamp(15px, 2vh, 18px); display: block; }

/* ── Ambient-Bild ───────────────────────────────────────────────── */
.sparkmega__visual { position: relative; overflow: hidden; background: #E7E1D6; }
.sparkmega__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sparkmega__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #F4F0E8 0%, rgba(244, 240, 232, 0.35) 22%, rgba(244, 240, 232, 0) 55%);
  pointer-events: none;
}

/* ── CTA-Balken ─────────────────────────────────────────────────── */
.hv2-drawer__panel > .hv2-drawer__cta-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  background: #EFE9DC;
  border-top: 1px solid var(--dr-line, rgba(23, 22, 18, 0.12));
  padding: clamp(8px, 1.4vh, 14px) clamp(18px, 2.4vw, 30px);
}
.sparkmega__cta-ico {
  width: clamp(32px, 4.4vh, 42px);
  height: clamp(32px, 4.4vh, 42px);
  border-radius: 50%;
  background: var(--dr-bronze-deep, #725222);
  color: #F4F0E8;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.sparkmega__cta-ico svg { width: 52%; height: 52%; }
.sparkmega__cta-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sparkmega__cta-txt b {
  font-family: var(--spark-sans, inherit);
  font-size: clamp(12px, 1.7vh, 14.5px);
  font-weight: 500;
  color: #171612;
  line-height: 1.25;
}
.sparkmega__cta-txt small {
  font-size: clamp(10px, 1.3vh, 11.5px);
  color: rgba(23, 22, 18, 0.55);
}
.hv2-drawer__panel > .hv2-drawer__cta-inline .hv2-drawer__cta-inline-btn {
  width: auto;
  min-width: clamp(150px, 16vw, 210px);
  max-width: none;
}

/* ── Schmale Fenster: Bild weicht, Kacheln zweispaltig ──────────── */
@media (max-width: 860px) {
  .hv2-drawer__panel--wide { width: min(430px, 94vw); }
  .sparkmega { grid-template-columns: minmax(0, 1fr); }
  .sparkmega__visual { display: none; }
  .sparkmega__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv2-drawer__panel > .hv2-drawer__cta-inline {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 9px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hv2-drawer__panel > .hv2-drawer__cta-inline .hv2-drawer__cta-inline-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ── Mega-Menue auf schmalen Fenstern verdichten ──────────────────
   Gemessen bei 375x667: Inhalt 627px bei 448px Platz. Die groessten
   Posten waren die Destinationszeilen (3x63) und die Experience-
   Kacheln (221px, weil "Executive Briefings" und "Investor
   Gatherings" zweizeilig umbrachen). */
@media (max-width: 860px) {
  .sparkmega__main {
    padding: clamp(8px, 1.5vh, 16px) 20px clamp(6px, 1vh, 12px);
    gap: clamp(8px, 1.4vh, 16px);
  }
  .sparkmega__intro { font-size: clamp(15px, 1.9vh, 18px); max-width: none; }

  .sparkmega__dest { padding: clamp(3px, 0.7vh, 7px) 0; gap: 10px; }
  .sparkmega__thumb { width: clamp(38px, 5vh, 46px); }
  .sparkmega__dest-txt small {
    font-size: clamp(10px, 1.2vh, 11px);
    /* Nutzenzeile bleibt, aber einzeilig - sie soll orientieren,
       nicht den halben Bildschirm fuellen. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sparkmega__status { font-size: 8px; }

  /* Kacheln einzeilig halten: das war der teuerste Posten. */
  .sparkmega__tiles { gap: 5px; }
  .sparkmega__tile {
    padding: clamp(5px, 0.9vh, 9px) 8px;
    gap: 7px;
    font-size: clamp(9.5px, 1.2vh, 11px);
    white-space: nowrap;
    overflow: hidden;
  }
  .sparkmega__tile span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .sparkmega__tile-ico svg { width: 14px; height: 14px; }

  .hv2-drawer__panel > .hv2-drawer__cta-inline {
    padding: clamp(7px, 1.1vh, 11px) 20px;
    row-gap: 7px;
    column-gap: 10px;
  }
  .sparkmega__cta-ico { width: 30px; height: 30px; }
  .sparkmega__cta-txt b { font-size: clamp(11.5px, 1.5vh, 13px); }
  .sparkmega__cta-txt small { font-size: 10px; }
  .hv2-drawer__cta-inline-btn { height: clamp(36px, 5vh, 42px) !important; }
}

/* Unter 700px Hoehe weicht der Kontaktblock ganz: das Menue hat Vorrang. */
@media (max-height: 700px) {
  .hv2-drawer__micro { display: none !important; }
}

/* ── Letzte Stufe: flache Fenster ─────────────────────────────────
   Der CTA-Balken stapelte mobil dreizeilig (90px). Als eine Zeile mit
   Icon, Kurzzeile und Knopf reicht die Haelfte. Unter 620px weicht
   zusaetzlich die Intro-Zeile - sie emotionalisiert, navigiert aber
   nicht, und die Navigation hat Vorrang. */
@media (max-width: 860px) and (max-height: 740px) {
  .hv2-drawer__panel > .hv2-drawer__cta-inline {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0;
  }
  .hv2-drawer__panel > .hv2-drawer__cta-inline .hv2-drawer__cta-inline-btn {
    grid-column: auto;
    width: auto;
    min-width: 118px;
    padding: 0 16px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
  .sparkmega__cta-txt small { display: none; }
  .sparkmega__cta-txt b { font-size: 11.5px; }
  .sparkmega__cta-ico { width: 26px; height: 26px; }
}

@media (max-height: 620px) {
  .sparkmega__intro { display: none; }
  .sparkmega__main { gap: 8px; }
  .sparkmega__dest { padding: 2px 0; }
  .sparkmega__thumb { width: 36px; }
  .sparkmega__eyebrow { font-size: 8.5px; }
}

/* ── Mega-Menue: Navigation dominiert, Bild traegt nur Atmosphaere ─
   Die Bildspalte nahm rund 37 % und komprimierte damit Destinations
   und Experiences. Verkauft wird hier Destination + Experience +
   Anfrage, nicht das Bild.
     Navigation  ~63 %  ->  ~69 %   (1fr zu 0.44fr)
     Panelbreite  1040  ->  1300px
   Bewusst auf Desktop begrenzt: ohne min-width ueberschreiben diese
   Werte die mobile Verdichtung weiter unten, und das Menue passt auf
   dem Telefon nicht mehr ins Bild. */
.hv2-drawer__panel--wide { width: min(416px, 92vw); }

@media (min-width: 861px) {
  .sparkmega { grid-template-columns: minmax(0, 1fr) minmax(0, 0.26fr); }

  .sparkmega__main {
    padding: clamp(14px, 2.8vh, 38px) clamp(26px, 3.4vw, 52px) clamp(10px, 1.8vh, 22px);
    gap: clamp(16px, 2.8vh, 34px);
  }
  /* Die Headline bekommt Luft und mehr Abstand nach unten. */
  .sparkmega__intro {
    font-size: clamp(19px, 2.4vh, 27px);
    line-height: 1.22;
    max-width: 22ch;
    margin-bottom: clamp(2px, 0.8vh, 10px);
  }

  /* Destinationszeilen ruhiger: mehr Abstand zwischen Bild, Text,
     Status und Pfeil. */
  .sparkmega__dest {
    gap: clamp(14px, 1.8vw, 24px);
    padding: clamp(8px, 1.3vh, 14px) 0;
  }
  .sparkmega__thumb { width: clamp(52px, 5.6vh, 60px); aspect-ratio: 4 / 3.1; }
  .sparkmega__dest-txt { gap: 2px; }
  .sparkmega__dest-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sparkmega__status { font-size: 9px; letter-spacing: 0.18em; }

  /* Kacheln breiter, nicht hoeher. */
  .sparkmega__tiles { gap: clamp(7px, 1vh, 10px); }
  .sparkmega__tile { padding: clamp(8px, 1.2vh, 12px) clamp(11px, 1.1vw, 16px); gap: 11px; }

  /* CTA-Balken buendig zur Navigationsspalte darueber. */
  .hv2-drawer__panel > .hv2-drawer__cta-inline {
    padding-left: clamp(26px, 3.4vw, 52px);
    padding-right: clamp(20px, 2.4vw, 34px);
  }
}

/* Der milchige Verlauf hat das Bild ausgewaschen - nur noch eine
   schmale Kante, damit der Uebergang nicht hart bricht. */
.sparkmega__visual::after {
  background: linear-gradient(90deg, rgba(244, 240, 232, 0.55) 0%, rgba(244, 240, 232, 0) 14%);
}

/* ═══════════════════════════════════════════════════════════════════
   DRAWER-FOOTER NACH DRAFT
   Zwei Spalten auf dunklem Grund: links Kontakt mit Bronze-Icons und
   feinen Trennlinien, rechts SPARK INSIDER mit Pill-Eingabefeld.
   Bewusst nur dort sichtbar, wo Platz ist - unter 700px Fensterhoehe
   weicht der Block, weil die Navigation Vorrang hat.
   ═══════════════════════════════════════════════════════════════════ */
.sparkfoot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 0;
  align-items: start;
  background: #171612;
  padding: clamp(14px, 2.4vh, 30px) clamp(26px, 3.4vw, 52px) clamp(16px, 2.6vh, 32px);
}
.sparkfoot__contact { display: flex; flex-direction: column; padding-right: clamp(24px, 3vw, 48px); }
.sparkfoot__row {
  display: grid;
  grid-template-columns: 20px 88px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: clamp(7px, 1.2vh, 12px) 0;
  text-decoration: none;
}
.sparkfoot__row + .sparkfoot__row { border-top: 1px solid rgba(199, 155, 106, 0.30); }
.sparkfoot__ico { color: var(--dr-bronze, #A77D3E); line-height: 0; }
.sparkfoot__ico svg { width: 17px; height: 17px; display: block; }
.sparkfoot__lbl {
  font-family: var(--spark-sans, inherit);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.72);
}
.sparkfoot__val {
  font-family: var(--spark-sans, inherit);
  font-size: clamp(13px, 1.7vh, 15.5px);
  font-weight: 500;
  color: #F4F0E8;
  letter-spacing: 0.005em;
}
.sparkfoot__row:hover .sparkfoot__val { color: var(--dr-bronze, #A77D3E); }

/* Rechte Spalte, durch eine feine Linie abgesetzt statt durch Abstand. */
.sparkfoot__insider {
  padding-left: clamp(24px, 3vw, 48px);
  border-left: 1px solid rgba(199, 155, 106, 0.30);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
}
.sparkfoot__insider-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--spark-sans, inherit);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dr-bronze, #A77D3E);
}
.sparkfoot__insider-sub {
  margin: 0;
  font-family: var(--spark-serif, 'Instrument Serif', Georgia, serif);
  font-size: clamp(13px, 1.8vh, 16px);
  line-height: 1.4;
  color: rgba(244, 240, 232, 0.92);
  max-width: 46ch;
}
.sparkfoot__news {
  height: clamp(40px, 5.4vh, 48px);
  max-width: 460px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(199, 155, 106, 0.55);
  background: transparent;
  overflow: hidden;
}
.sparkfoot__news input {
  font-size: clamp(12.5px, 1.6vh, 14px);
  padding: 0 20px;
  color: #F4F0E8;
}
.sparkfoot__news input::placeholder { color: rgba(244, 240, 232, 0.55); }
.sparkfoot__news button {
  background: var(--dr-bronze, #A77D3E);
  border-radius: 999px;
  padding: 0 clamp(20px, 2vw, 30px);
  font-size: 16px;
  color: #171612;
}
.sparkfoot__news button:hover { background: #C79B6A; }

/* Schmal: eine Spalte, Trennlinie wandert nach oben. */
@media (max-width: 860px) {
  .sparkfoot {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 1.8vh, 18px);
    padding-left: 20px;
    padding-right: 20px;
  }
  .sparkfoot__contact { padding-right: 0; }
  .sparkfoot__insider {
    padding-left: 0;
    padding-top: clamp(10px, 1.8vh, 16px);
    border-left: 0;
    border-top: 1px solid rgba(199, 155, 106, 0.30);
  }
  .sparkfoot__row { grid-template-columns: 18px 72px minmax(0, 1fr); gap: 11px; }
  .sparkfoot__val { font-size: 13px; }
  .sparkfoot__insider-sub { font-size: 13px; }
}

/* ── Footer darf der Navigation keinen Platz nehmen ───────────────
   Einspaltig wuchs der Block auf 316px und verdraengte bei 390x844
   213px Navigation. Die Navigation hat Vorrang, also zeigt der Footer
   auf schmalen Fenstern nur SPARK INSIDER; die Kontaktzeilen fahren
   bei Tap oder Hover aus. Vollstaendig bleibt er dort, wo Platz ist. */
@media (max-width: 860px) {
  .sparkfoot { padding-top: 10px; padding-bottom: 12px; gap: 0; }
  .sparkfoot__contact {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .22s ease;
  }
  .sparkfoot:hover .sparkfoot__contact,
  .sparkfoot:focus-within .sparkfoot__contact {
    max-height: 190px;
    opacity: 1;
  }
  .sparkfoot__insider {
    padding-top: 0;
    border-top: 0;
    gap: 8px;
  }
  /* Die Zeile erklaert den Newsletter - auf dem Telefon traegt ihn
     der Platzhalter allein. */
  .sparkfoot__insider-sub { display: none; }
  .sparkfoot__news { height: 40px; }
}

/* Letzte Reserve auf sehr flachen Fenstern: die Nutzenzeilen der
   Destinationen weichen, damit die Menuestruktur ganz sichtbar bleibt. */
@media (max-height: 620px) {
  .sparkmega__dest-txt small { display: none; }
  .sparkmega__dest { padding: 1px 0; }
  .sparkmega__tile { padding: 4px 8px; }
  .sparkmega__tiles { gap: 4px; }
  .sparkmega__main { gap: 6px; }
}

/* Der Stern vor SPARK INSIDER ist entfernt - die Sperrschrift in
   Bronze traegt die Zeile allein. */
.sparkfoot__insider-head { gap: 0; }

/* Das Bild soll nur noch angeschnitten sein - der Fokus liegt auf den
   Navigationspunkten. Von 30,6 auf rund 20 Prozent; der Ausschnitt
   wird rechts gehalten, damit die Architektur lesbar bleibt statt
   mittig zu verschwimmen. */
.sparkmega__visual img { object-position: 62% center; }

/* ── 700px Panel: die Kacheln laufen zweizeilig ───────────────────
   Bei 143px Kachelbreite brechen "Executive Briefings" und
   "Investor Gatherings" um, die Kachelhoehe steigt von 42 auf 52px.
   Damit fehlten 13px Navigation. Statt die Schrift zu verkleinern
   (bei 10,5px waere kaum Reserve) hole ich den Platz aus den
   Abstaenden - die Zeilen bleiben lesbar. */
@media (min-width: 861px) {
  .sparkmega__main {
    gap: clamp(12px, 2vh, 22px);
    padding-bottom: clamp(8px, 1.2vh, 14px);
  }
  .sparkmega__sec { gap: clamp(5px, 0.9vh, 10px); }
  .sparkmega__intro { margin-bottom: 0; }
}

/* ── Breite, aber flache Fenster (Laptops) ────────────────────────
   Bei 1440x720 belegte der Footer 190px und der Navigation fehlten
   48px. Die Kontaktreduktion hing bisher an der Fensterbreite und
   griff hier nicht. Jetzt zaehlt die Hoehe: unter 820px fahren die
   Kontaktzeilen erst bei Hover oder Fokus aus, SPARK INSIDER bleibt. */
@media (min-width: 861px) and (max-height: 820px) {
  .sparkfoot { padding-top: 12px; padding-bottom: 14px; }
  .sparkfoot__contact {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-right: 0;
    transition: max-height .3s ease, opacity .22s ease;
  }
  .sparkfoot:hover .sparkfoot__contact,
  .sparkfoot:focus-within .sparkfoot__contact {
    max-height: 170px;
    opacity: 1;
  }
  .sparkfoot { grid-template-columns: minmax(0, 1fr); }
  .sparkfoot__insider { padding-left: 0; border-left: 0; }
  .sparkfoot__insider-sub { display: none; }
}

/* ── 600px Panel ──────────────────────────────────────────────────
   Die Breite wurde bisher von den Nutzenzeilen diktiert, weil sie per
   nowrap einzeilig gehalten wurden - unter 620px begannen sie
   abzuschneiden. Sie duerfen jetzt zweizeilig umbrechen, damit das
   Panel schmaler werden kann, ohne Text zu verlieren. */
@media (min-width: 861px) {
  .sparkmega__dest-txt small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
  .sparkmega__dest { gap: clamp(10px, 1.2vw, 16px); padding: clamp(6px, 1vh, 11px) 0; }
  .sparkmega__main { padding-left: clamp(20px, 2.6vw, 34px); padding-right: clamp(20px, 2.6vw, 34px); }
  .hv2-drawer__panel > .hv2-drawer__cta-inline {
    padding-left: clamp(20px, 2.6vw, 34px);
    padding-right: clamp(16px, 2vw, 26px);
  }
  .sparkfoot { padding-left: clamp(20px, 2.6vw, 34px); padding-right: clamp(20px, 2.6vw, 34px); }
}

/* Bei 600px Panel wird die Insider-Spalte so schmal, dass die
   Beschreibungszeile mehrfach umbricht - der Footer wuchs auf 277px
   und der Navigation fehlten 9px. Zweispaltig lohnt sich hier nicht
   mehr: gestapelt bleibt beides lesbar und der Block flacher. */
@media (min-width: 861px) {
  .sparkfoot {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .sparkfoot__contact { padding-right: 0; }
  .sparkfoot__insider {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(199, 155, 106, 0.30);
    gap: 8px;
  }
  .sparkfoot__insider-sub { font-size: 13px; line-height: 1.35; max-width: none; }
  .sparkfoot__news { height: 42px; max-width: none; }
  .sparkfoot__row { padding: 7px 0; }
}

/* ── 520px Panel: Kacheln zweispaltig ─────────────────────────────
   Drei Spalten haben die Breite diktiert - bei 2 Spalten x 3 Reihen
   passen die Labels wieder einzeilig und das Panel kann schmaler
   werden. Kostet eine Kachelreihe an Hoehe, spart aber 80px Breite. */
@media (min-width: 861px) {
  .sparkmega__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 520px Panel: die letzten 99px ────────────────────────────────
   Zwei Ursachen, beide gemessen:
   1. Auch zweispaltig blieben die Kacheln zweizeilig - bei 162px
      Breite reicht 11px Schrift fuer "Executive Briefings" nicht.
      Kleineres Icon und 10px Schrift machen sie einzeilig (52 -> 42px
      x 3 Reihen).
   2. Der Footer belegte 262px, also die Haelfte der Panelhoehe, nur
      fuer Kontakt und Newsletter. Bei dieser Breite ist das
      unverhaeltnismaessig: die Kontaktzeilen fahren jetzt bei Hover
      oder Fokus aus, SPARK INSIDER bleibt sichtbar. */
@media (min-width: 861px) {
  .sparkmega__tile {
    font-size: 10px;
    padding: 8px 10px;
    gap: 8px;
  }
  .sparkmega__tile-ico svg { width: 14px; height: 14px; }

  .sparkfoot__contact {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .22s ease;
  }
  .sparkfoot:hover .sparkfoot__contact,
  .sparkfoot:focus-within .sparkfoot__contact {
    max-height: 170px;
    opacity: 1;
  }
  .sparkfoot__insider { padding-top: 0; border-top: 0; }
}

/* ── 416px Panel: die Grenze des Konzepts ─────────────────────────
   Gemessen bei 1440x900: 105px Navigation fehlten. Zwei Ursachen:
   die Nutzenzeilen brachen auf drei Zeilen um (47/31/47px statt
   3x16), und die CTA-Zeile umbrach ebenfalls (70 -> 117px).

   Bei 318px Navigationsbreite ist der Descriptor nicht mehr tragbar -
   dreizeilig gestapelt schadet er mehr als er orientiert. Name und
   Status bleiben, die Nutzenzeile entfaellt. Das ist ein bewusster
   Verlust gegenueber dem Konzept, erzwungen durch die Breite. */
@media (min-width: 861px) {
  .sparkmega__dest-txt small { display: none; }
  .sparkmega__dest { padding: 7px 0; }

  .sparkmega__cta-txt b { font-size: 12px; line-height: 1.3; }
  .hv2-drawer__panel > .hv2-drawer__cta-inline {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .sparkmega__cta-ico { width: 30px; height: 30px; }
  .hv2-drawer__cta-inline-btn {
    height: 38px !important;
    min-width: 0;
    padding: 0 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }
}

/* Bei 1440x720 fehlten noch 8px. Der Footer ist dort schon reduziert;
   die letzten Pixel kommen aus seinem Innenabstand. */
@media (min-width: 861px) and (max-height: 820px) {
  .sparkfoot { padding-top: 9px; padding-bottom: 10px; }
  .sparkfoot__row { padding: 5px 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBIL-OPTIMIERUNG DER STARTSEITE
   Gemessen bei 375px: die Seite war 18.157px hoch und trug 39
   Textklassen unter 12px, die kleinste bei 8,5px. Dazu Laufweiten von
   1,4 bis 2,8px auf 9-11px-Text - das war die eigentliche Quelle der
   Unruhe: dutzende weit gesperrte Grossbuchstaben-Labels.

   Drei Eingriffe:
   1. Untergrenze 11px - darunter ist auf dem Telefon nichts lesbar.
   2. Laufweite gekappt. Sperrung traegt auf Grossformaten, auf 10px
      zerfaellt das Wort in Einzelbuchstaben.
   3. Abschnittspolster reduziert - die vier laengsten Abschnitte
      machten mit 9.004px die Haelfte der Seite aus.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── 1. Untergrenze fuer Schriftgroessen ─────────────────────── */
  .hv2__mega-it-tag,
  .uc-card__tag,
  .moment__meta,
  .fb__stat-l,
  .fb__kicker,
  .dest-tile__city,
  .tech__kicker,
  .tech__specs-ey,
  .lp-prog__card-soon,
  .footer-label,
  .scene__num,
  .eyebrow,
  .offer-card__season,
  .spark-cookie__eyebrow,
  [class*="__kicker"],
  [class*="__eyebrow"],
  [class*="__tag"],
  [class*="__meta"],
  [class*="__label"] {
    font-size: 11px !important;
  }
  .ff-ind__eyebrow, .ff-ind__foot, .uc-reel__hint { font-size: 11px !important; }

  h6, .h6 { font-size: 11px !important; }
  small { font-size: 11.5px !important; }

  /* Kartenmetadaten waren mit 12px an der Grenze. */
  .offer-card__meta, .offer-card__meta span, .offer-card__foot span { font-size: 13px !important; }
  .link-u { font-size: 13.5px !important; }

  /* ── 2. Laufweite kappen: der groesste Ruhegewinn ────────────── */
  .hv2__mega-it-tag,
  .uc-card__tag,
  .moment__meta,
  .fb__stat-l,
  .fb__kicker,
  .dest-tile__city,
  .tech__kicker,
  .tech__specs-ey,
  .lp-prog__card-soon,
  .footer-label,
  .scene__num,
  .eyebrow,
  .offer-card__season,
  .ctr,
  .spark-cookie__eyebrow,
  .spark-cookie__btn,
  [class*="__kicker"],
  [class*="__eyebrow"],
  [class*="__tag"],
  [class*="__meta"],
  [class*="__label"] {
    letter-spacing: 0.1em !important;
  }
  .ff-ind__eyebrow, .ff-ind__foot { letter-spacing: 0.12em !important; }

  /* ── 3. Abschnitte kompakter ─────────────────────────────────── */
  section[data-screen-label] { padding-top: clamp(34px, 7vw, 52px); padding-bottom: clamp(34px, 7vw, 52px); }
}

/* ── Mobil: Kartenhoehen begrenzen ────────────────────────────────
   Gemessen bei 375px: 38 Bilder ueber 120px, zusammen 10.988px und
   damit 60 Prozent der Seitenhoehe. Nicht der Text macht die Seite
   lang, sondern die Bilder.

   Der Hebel sind aber die Karten, nicht die Bilder: .intent-card
   traegt aspect-ratio 5/6 und bleibt damit 390px hoch, auch wenn das
   Bild darin kleiner wird - es entstand nur Leerraum. Auf dem Telefon
   darf die Karte ihre Hoehe aus dem Inhalt nehmen.

   .fb__img und .tech__img sind hier bewusst NICHT gelistet: sie werden
   von ihrem Container gehoeht und kollabierten bei height:auto auf
   0px, die Bilder verschwanden. */
@media (max-width: 720px) {
  .intent-card,
  .intent-card--lg,
  .uc-card {
    aspect-ratio: auto !important;
    height: auto !important;
  }
  .intent-card__img,
  .uc-card__img,
  .moment__img,
  .v2-card__img,
  .dest-tile__img,
  .lp-prog__card-media,
  .offer-card__media img {
    max-height: clamp(170px, 55vw, 215px) !important;
    object-fit: cover;
  }
  .intent-card--lg .intent-card__img { max-height: clamp(190px, 62vw, 240px) !important; }
}

/* ── Mobiler Hero: Ruhe statt Bewegung ────────────────────────────
   Gemessen bei 375x812, vier Ursachen der Hektik:

   1. Vier Hintergrundbilder wechseln in einer 16s-Schleife
      (bgB..bgE). Auf dem Telefon ist der Bildwechsel hinter dem Text
      der lauteste Reiz - eingefroren auf das erste Motiv.
   2. Der Scrim war ein 90-Grad-Gradient: 0,82 links, 0,25 bei 55 %.
      Auf dem Desktop steht der Text links und das Bild atmet rechts.
      Auf 375px laeuft der Text ueber die volle Breite, der Scrim ist
      rechts aber fast weg - deshalb schien die Folienschrift des
      Hintergrundbildes durch den Text. Jetzt vertikal und dichter.
   3. Das Raster-Overlay lag auf Opazitaet 0,6 und legte zusaetzliche
      Textur ueber ein bereits unruhiges Foto.
   4. Der Hero war 1026px hoch bei 812px Viewport. Mit background-size
      cover wird ein Breitbild auf diese Hoehe gezogen, also stark
      hineingezoomt - daher die zu grosse Skalierung. Flacher heisst
      automatisch weniger Zoom. */
@media (max-width: 720px) {
  .hero-anim { min-height: 0 !important; height: auto !important; }
  /* Flacher heisst weniger Zoom: frankfurt-gala ist 1920x1281 (1,5).
     Bei 375x500 bleibt der Faktor bei rund 1,9 statt 2,5. */
  .hero-anim__bgs { height: clamp(430px, 62vh, 520px) !important; }

  /* 1. Bildwechsel anhalten - und auf das richtige Motiv.
        Von den vier Hintergruenden zeigen drei lesbare Schrift:
        Motiv 1 die LED-Wand einer Keynote, Motiv 2 "Panel-Diskussion"
        samt Namensschildern, Motiv 3 "YOUR LOGO". Text hinter Text war
        die Hauptursache der Unruhe. Motiv 4 ist eine abstrakte
        LED-Lichtskulptur ohne jede Schrift - reine Atmosphaere. */
  .hero-anim__bg { animation: none !important; opacity: 0 !important; }
  .hero-anim__bg--4 { opacity: 1 !important; }

  /* 4. weniger Zoom: der Ausschnitt sitzt oben, wo die Motive tragen */
  .hero-anim__bg { background-size: cover !important; background-position: 50% 32% !important; }

  /* 2. Scrim vertikal und dichter - der Text muss auf ruhigem Grund
        sitzen, egal was das Foto an dieser Stelle zeigt. */
  .hero-anim__veil {
    background: linear-gradient(180deg,
      rgba(11, 11, 12, 0.62) 0%,
      rgba(11, 11, 12, 0.72) 38%,
      rgba(11, 11, 12, 0.88) 72%,
      rgba(11, 11, 12, 0.96) 100%) !important;
  }

  /* 3. Raster zuruecknehmen */
  .hero-anim__grid { opacity: 0.18 !important; }
}

/* ── Mobiler Hero: Text unter dem Header, Bild kleiner ────────────
   Gemessen bei 375x812: der Header ist fixed und 67px hoch, der Titel
   begann bei y=34 - die erste Zeile lag hinter der Navigationsleiste.
   .hero-anim trug padding 34px oben, .hero-anim__main gar keines.
   Das war der Grund, warum der Text oben keinen Raum hatte.

   Die Bildflaeche schrumpft zusaetzlich von 503 auf rund 400px: sie
   soll den Text tragen, nicht mit ihm konkurrieren. */
@media (max-width: 720px) {
  .hero-anim { padding-top: clamp(88px, 12vh, 108px) !important; }
  .hero-anim__main { padding-top: 0 !important; }
  .hero-anim__bgs { height: clamp(340px, 48vh, 400px) !important; }

  /* Unterhalb der Bildflaeche traegt kein Scrim mehr - der Hero
     braucht dort seinen eigenen dunklen Grund, sonst steht heller
     Text auf hellem Papier. */
  .hero-anim { background: #0B0B0C; }

  /* Etwas mehr Luft zwischen Titel, Fliesstext und Knoepfen. */
  .hero-anim__lede { margin-top: 18px !important; }
  .hero-anim__ctas { margin-top: 22px !important; }
}