/* ==========================================================================
   ALBANO AKTIV · style.css
   Single source of truth for all pages (root + subpages).
   --------------------------------------------------------------------------
   Brand palette · Navy #1F4E79 · Brown #8B5A2B · Cream #F5EBD6 · White
   Fonts        · Inter (UI) · Fraunces (display, italic accents) · Caveat (signature)
                · Caveat Brush (alternative signature, brush feel)
                  All fonts are self-hosted from /assets/fonts/. No external
                  dependencies, no requests to Google. See @font-face block below.

   Reference this stylesheet:
   <link rel="stylesheet" href="style.css">          ← root level (index, about, contact, external-tours)
   <link rel="stylesheet" href="../style.css">       ← subpages (biking/, trekking/, holiday-packages/, legal/)

   Sources:
   - index.html is the canonical reference. Where coming-soon and index differ,
     the index version wins. Coming-soon-only blocks (coming-soon section,
     license footer, nav wordcloud) are added without overriding index defaults.
   - Wordcloud component (wordcloud-component.html) is integrated as a generic,
     reusable component. Word size classes (wc-hero, wc-medium, wc-small, wc-tiny)
     work in any container (.nav-wordcloud, .wordcloud-band, future containers).

   STRUCTURE
   0.  Self-hosted fonts (@font-face)
   1.  Tokens & reset
   2.  Topbar
   3.  Nav · full + mega menu  (index + content subpages)
   4.  Nav · coming-soon variant
   5.  Buttons
   6.  Hero (headline band + cinemascope video)
   7.  Sections · container · eyebrow · section-title
   8.  Wordclouds — generic word styles + container variants
   9.  Activities grid
   10. About section
   11. Tour cards (featured tours)
   12. Coming-soon section
   13. CTA band
   14. Footer
   15. Animations
   16. Responsive
   17. Legal pages
   ========================================================================== */


/* ==========================================================================
   0. SELF-HOSTED FONTS
   --------------------------------------------------------------------------
   All font files live in /assets/fonts/ relative to the site root.
   Format: WOFF2 only. Charsets: latin + latin-ext (covers Portuguese
   characters like ã, ç, õ and other Western/Eastern European accents).

   Filenames follow google-webfonts-helper output exactly. If you re-download
   later and the version numbers change (e.g. inter v20 → v21), update the
   src URLs below — there's no other coupling.

   Available font-families:
     'Inter'         → 400, 500, 600, 700 (normal)
     'Fraunces'      → 400, 500, 600, 700 (normal); 400, 500, 700 (italic)
     'Caveat'        → 400, 700 (normal) — handwritten signature accent
     'Caveat Brush'  → 400 (normal) — alternative signature style, brush feel

   font-display: swap → text renders in fallback font immediately, then
   swaps in the brand font. No "invisible text" flash.
   ========================================================================== */

/* Inter — UI / body */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}

/* Fraunces — display, headlines, italic accents */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin_latin-ext-700italic.woff2') format('woff2');
}

/* Caveat — handwritten signature accent */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/caveat-v23-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/caveat-v23-latin_latin-ext-700.woff2') format('woff2');
}

/* Caveat Brush — alternative signature style with a brush feel.
   Use via: font-family: 'Caveat Brush', cursive;
   Good for: alternative team-member signatures, decorative wordcloud accents. */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/caveat-brush-v12-latin_latin-ext-regular.woff2') format('woff2');
}


/* ==========================================================================
   1. TOKENS & RESET
   ========================================================================== */

:root {
  --navy:       #1F4E79;
  --navy-deep:  #16395A;
  --navy-soft:  #3A6FA0;
  --brown:      #8B5A2B;
  --brown-soft: #A86F3D;
  --cream:      #F5EBD6;
  --cream-soft: #FBF6EA;
  --ink:        #1A2332;
  --muted:      #5E6B7A;
  --line:       #E6DFCF;
  --white:      #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }


/* ==========================================================================
   2. TOPBAR · brown strip — picks up the brown of the logo mountains
   ========================================================================== */

.topbar {
  background: var(--brown);
  color: var(--cream);
  font-size: 13px;
  padding: 9px 0;
  letter-spacing: 0.02em;
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.topbar a { color: var(--cream); opacity: 0.92; }
.topbar a:hover { opacity: 1; }
.topbar-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar-pin {
  width: 13px;
  height: 18px;
  flex-shrink: 0;
}
.topbar-right {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-right > * { white-space: nowrap; }
.topbar-right .sep { opacity: 0.4; }
.topbar-right .lang-active {
  font-weight: 700;
  background: rgba(245, 235, 214, 0.18);
  color: var(--cream);
  padding: 2px 8px;
  border-radius: 3px;
  pointer-events: none;
}
/* Sprachweiche-Container — bündelt EN/DE/PT mit engerem Gap als die
   anderen Topbar-Items (Telefon, Email). */
.topbar-right .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Flag icons for language switch (inline SVG via data URI — keine externen
   Bilder, scharf auf retina, einheitliche Darstellung auf Windows/Mac/Mobile) */
.flag {
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1px;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1px;
  flex-shrink: 0;
}
.flag-en {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='u'><path d='M0 0v30h60V0z'/></clipPath><rect width='60' height='30' fill='%23012169'/><path d='M0 0L60 30M60 0L0 30' stroke='%23fff' stroke-width='6' clip-path='url(%23u)'/><path d='M0 0L60 30M60 0L0 30' stroke='%23C8102E' stroke-width='4' clip-path='url(%23u)'/><path d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/><path d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/></svg>");
}
.flag-de {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'><rect width='5' height='1' fill='%23000'/><rect y='1' width='5' height='1' fill='%23DD0000'/><rect y='2' width='5' height='1' fill='%23FFCE00'/></svg>");
}
.flag-pt {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><rect width='240' height='400' fill='%23046A38'/><rect x='240' width='360' height='400' fill='%23DA291C'/><circle cx='240' cy='200' r='65' fill='none' stroke='%23FFE160' stroke-width='14'/><circle cx='240' cy='200' r='35' fill='%23fff' stroke='%23012169' stroke-width='4'/></svg>");
}


/* ==========================================================================
   3. NAV · full · mega menu
   Used on index.html and all content subpages.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo · left */
.logo-link {
  flex-shrink: 0;
  display: block;
}
.logo-link img {
  height: 84px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--brown);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li.active > a::after,
.nav-links > li.has-mega:hover > a::after {
  transform: scaleX(1);
}
.nav-links > li > a:hover,
.nav-links > li.has-mega:hover > a {
  color: var(--navy-deep);
}

/* Chevron */
.nav-links > li.has-mega > a .chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform 0.25s ease;
  display: inline-block;
}
.nav-links > li.has-mega:hover > a .chev {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 560px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brown);
  border-radius: 2px;
  padding: 24px;
  box-shadow: 0 24px 60px -24px rgba(22, 57, 90, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 120;
}
.mega.wide { width: 760px; }
.has-mega:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.has-mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

/* Mega header */
.mega-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cream);
}
.mega-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.mega-title em { font-style: italic; color: var(--brown); font-weight: 500; }
.mega-viewall {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: none !important;
}
.mega-viewall:hover { color: var(--navy-deep); }
.mega-viewall::after {
  content: "→";
  font-size: 14px;
  transition: transform 0.2s ease;
}
.mega-viewall:hover::after { transform: translateX(3px); }

/* Mega items grid */
.mega-grid { display: grid; gap: 6px; }
.mega-grid.two   { grid-template-columns: 1fr 1fr; gap: 16px; }
.mega-grid.three { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.mega-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 3px;
  transition: background 0.2s ease;
  align-items: center;
}
.mega-item:hover { background: var(--cream-soft); }
.mega-thumb {
  width: 56px;
  height: 56px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.mega-item-text { flex: 1; min-width: 0; }
.mega-item-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy-deep);
  margin-bottom: 2px;
  line-height: 1.2;
}
.mega-item-desc {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
  font-weight: 400;
}
.mega-item:hover .mega-item-title { color: var(--brown); }

/* Compact mega (fewer items) */
.mega-compact { width: 300px; }
.mega-compact .mega-grid { grid-template-columns: 1fr; }
.mega-compact .mega-item { padding: 10px 12px; }
.mega-compact .mega-thumb { width: 48px; height: 48px; }

/* Simple dropdown (no items with images) */
.dropdown-simple {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brown);
  padding: 8px;
  box-shadow: 0 24px 60px -24px rgba(22, 57, 90, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.25s ease;
  z-index: 120;
}
.has-mega:hover .dropdown-simple {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-simple a {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  border-radius: 2px;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  text-transform: none;
}
.dropdown-simple a:hover {
  background: var(--cream);
  color: var(--brown);
  padding-left: 20px;
}

/* Nav right */
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy-deep);
}


/* ==========================================================================
   4. NAV · coming-soon variant
   Add `nav-static` to the .nav element to disable the sticky/blur defaults.
   The inline wordcloud uses the generic .wc-* classes from section 8.
   ========================================================================== */

.nav-static {
  position: static;
  background: var(--white);
  backdrop-filter: none;
}

/* Logo-only nav — used on coming-soon legal pages. No menu, no wordcloud,
   logo stays left as usual. Combine with .nav .nav-static .nav-logo-only. */
.nav-logo-only .nav-inner {
  justify-content: flex-start;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.cta-btn {
  background: var(--navy);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 2px solid var(--navy);
  cursor: pointer;
  display: inline-block;
}
.cta-btn:hover {
  background: var(--brown);
  border-color: var(--brown);
  transform: translateY(-1px);
}
.cta-btn.outline {
  background: transparent;
  color: var(--navy);
}
.cta-btn.outline:hover {
  background: var(--navy);
  color: var(--white);
}
.cta-btn.brown {
  background: var(--brown);
  border-color: var(--brown);
}
.cta-btn.brown:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

/* Brand icons inside buttons (Google Maps, WhatsApp, Phone, Instagram, Facebook) */
.brand-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* ==========================================================================
   6. HERO · headline band + cinemascope video
   ========================================================================== */

.hero {
  position: relative;
  background: var(--white);
}

/* Headline band: full width, with cream mountain silhouette as background */
.hero-headline {
  position: relative;
  width: 100%;
  padding: 18px 32px 36px;
  text-align: right;
  overflow: hidden;
  background: var(--white);
}
.hero-headline-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23F5EBD6'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom;
  opacity: 0.55;
}
/* Hero color variants — match the page-header subpage colors so overview hero
   and detail-page header use the same silhouette tone */
.hero.hero-blue .hero-headline-shape {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23A8C5DE'/></svg>");
}
.hero.hero-brown .hero-headline-shape {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23E0C8A8'/></svg>");
  pointer-events: none;
  z-index: 0;
}
.hero-headline h1 {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--navy-deep);
  margin: 0;
  letter-spacing: -0.02em;
}
.hero-headline h1 em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.hero-headline h1 .underline-word {
  position: relative;
  display: inline-block;
}
.hero-headline h1 .underline-word::after {
  content: "";
  position: absolute;
  bottom: 4px; left: -3px; right: -3px;
  height: 8px;
  background: var(--cream);
  z-index: -1;
}

/* Cinemascope video band: full width, fixed height */
.hero-video-band {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: var(--navy-deep);
  position: relative;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
  display: block;
}
/* Bildanker-Varianten — Default ist "center 75%" (Bildmitte/-untergewicht):
   - .anchor-top    = center 0%   → schneidet komplett unten ab
                                    (Panorama, Motiv ganz oben — z.B. Sky/Canopy)
   - .anchor-upper  = center 25%  → leicht oben-orientiert,
                                    lässt Kopfraum übrig (Personen, Blumen)
   - .anchor-bottom = center 100% → schneidet komplett oben ab
                                    (Motiv ganz unten — z.B. Hügel mit viel Sky) */
.hero-video.anchor-top    { object-position: center top; }
.hero-video.anchor-upper  { object-position: center 25%; }
.hero-video.anchor-middle { object-position: center 50%; }
.hero-video.anchor-bottom { object-position: center bottom; }


/* ==========================================================================
   7. SECTIONS · container · eyebrow · section-title
   ========================================================================== */

section { padding: 56px 0; position: relative; }
.hero { padding: 0; }
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 14px;
  position: relative;
  padding-left: 40px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 2px;
  background: var(--brown);
}
.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  color: var(--navy-deep);
  margin-bottom: 14px;
  max-width: 720px;
}
.section-title em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.section-intro {
  font-size: 17px;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 48px;
}

/* Coming-soon Placeholder — Platzhalter-Block in Content-Sektionen,
   solange der echte Text fehlt. Mittig, größere kursive Fraunces. */
.coming-soon-notice {
  text-align: center;
}
.coming-soon-notice p {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.4;
  color: var(--navy-deep);
  max-width: 720px;
  margin: 18px auto 0;
}


/* ==========================================================================
   8. WORDCLOUDS · generic word styles + container variants
   --------------------------------------------------------------------------
   The wc-* size classes are reusable across any wordcloud container.
   Add new containers (e.g. .wordcloud-band, .nav-wordcloud, .footer-wordcloud)
   and the same word classes will work inside them.

   Per-page customization: change the hierarchy by reassigning size classes
   in the SVG (e.g. on /trekking, swap so trekking gets .wc-hero, biking gets
   .wc-medium). New size tiers — add them as additional modifiers below
   (e.g. .wc-xl, .wc-large) without touching the existing ones.

   Two flavors per word class:
   - SVG flavor (used inside .nav-wordcloud, .wordcloud-band): uses `fill`
   - HTML flavor (used inside .nav-wordcloud-mobile, .wordcloud-band-mobile,
     prefix `wcm-`): uses `color` + explicit `font-size`
   ========================================================================== */

/* --- 8a · Generic SVG word classes (work in any SVG wordcloud container) --- */

.wc-word {
  font-family: 'Fraunces', serif;
  fill: var(--navy);
  transition: fill 0.25s ease, transform 0.25s ease;
  cursor: default;
}
.wc-word:hover { fill: var(--brown); }

.wc-hero {
  font-weight: 700;
  font-style: italic;
  fill: var(--navy-deep);
}
.wc-hero-2 {
  font-weight: 700;
  font-style: italic;
  fill: var(--brown);
}
.wc-medium {
  font-weight: 600;
  fill: var(--navy);
}
.wc-small {
  font-weight: 500;
  fill: var(--navy-soft);
}
.wc-tiny {
  font-weight: 400;
  fill: var(--brown-soft);
  font-style: italic;
}

/* Category-color modifiers — overschreiben den größenabhängigen Default
   (z. B. external-tours: blau für eigene Programm-Items, braun für Partner-Extras) */
.wc-word.wc-blue            { fill: var(--navy); }
.wc-word.wc-blue.wc-small   { fill: var(--navy-soft); }
.wc-word.wc-blue.wc-tiny    { fill: var(--navy-soft); }
.wc-word.wc-brown           { fill: var(--brown); }
.wc-word.wc-brown.wc-small  { fill: var(--brown-soft); }
.wc-word.wc-brown.wc-tiny   { fill: var(--brown-soft); }

/* --- 8b · Generic HTML/mobile word classes --- */

.wcm {
  display: inline-block;
  font-family: 'Fraunces', serif;
  margin: 3px 5px;
  vertical-align: middle;
  letter-spacing: -0.01em;
}
.wcm-hero {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: var(--navy-deep);
}
.wcm-hero-2 {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: var(--brown);
}
.wcm-medium {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}
.wcm-medium-2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--brown);
}
.wcm-small {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-soft);
}
.wcm-tiny {
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--brown-soft);
}
/* Category-color modifiers (mobile/HTML pendant zu .wc-blue / .wc-brown) */
.wcm.wcm-blue            { color: var(--navy); }
.wcm.wcm-blue.wcm-small  { color: var(--navy-soft); }
.wcm.wcm-blue.wcm-tiny   { color: var(--navy-soft); }
.wcm.wcm-brown           { color: var(--brown); }
.wcm.wcm-brown.wcm-small { color: var(--brown-soft); }
.wcm.wcm-brown.wcm-tiny  { color: var(--brown-soft); }
.wcm-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brown-soft);
  opacity: 0.6;
  margin: 0 4px;
  vertical-align: middle;
}

/* --- 8c · Container variant: wordcloud inside the nav (coming-soon) ------ */

.nav-wordcloud {
  flex: 1;
  margin-left: 32px;
  max-height: 90px;
  overflow: hidden;
  position: relative;
}
.nav-wordcloud svg {
  width: 100%;
  height: 90px;
  display: block;
}

/* Mobile equivalent for the nav variant — sits below the nav */
.nav-wordcloud-mobile {
  display: none;
  padding: 14px 24px 18px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  text-align: center;
  line-height: 1.5;
}
/* In the nav-wordcloud-mobile, separator picks up cream tone */
.nav-wordcloud-mobile .wcm-sep {
  background: var(--cream);
  opacity: 1;
}

/* --- 8d · Container variant: standalone wordcloud band ------------------- */
/*  Full-width section, intended between hero video and "What we offer".
    Optionally place a cream mountain silhouette behind it via
    <div class="wordcloud-band-shape"></div>.                               */

.wordcloud-band {
  position: relative;
  width: 100%;
  background: var(--white);
  overflow: hidden;
}
.wordcloud-band-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23F5EBD6'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.wordcloud-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px 22px;
}
.wordcloud-band svg {
  width: 100%;
  height: clamp(80px, 9vw, 110px);
  display: block;
}
.wordcloud-band-mobile {
  display: none;
  position: relative;
  z-index: 1;
  padding: 16px 24px 18px;
  text-align: center;
  line-height: 1.5;
}


/* ==========================================================================
   9. ACTIVITIES grid
   ========================================================================== */

.activities {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.activity {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: var(--white);
  background-size: cover;
  background-position: center;
  transition: all 0.4s ease;
  cursor: pointer;
}
.activity::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 57, 90, 0) 30%, rgba(22, 57, 90, 0.85) 100%);
  transition: all 0.4s ease;
}
.activity:hover::before {
  background: linear-gradient(180deg, rgba(22, 57, 90, 0.3) 0%, rgba(22, 57, 90, 0.92) 100%);
}
.activity > * { position: relative; z-index: 2; }
.activity-number {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.activity h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: 0;
  color: var(--cream);
  opacity: 0.9;
}
.activity ul {
  list-style: none;
  font-size: 14px;
  opacity: 0.9;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}
.activity:hover ul {
  max-height: 200px;
  margin-top: 4px;
}
.activity ul li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(245, 235, 214, 0.2);
}
.activity-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--cream);
}
.activity-cta::after {
  content: "→";
  transition: transform 0.3s ease;
}
.activity:hover .activity-cta::after { transform: translateX(6px); }
.activity.big   { grid-column: span 7; min-height: 420px; }
.activity.small { grid-column: span 5; }
.activity.third { grid-column: span 4; }

/* 4-card grid: all equal, square, side by side */
.activities.four-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.activity.square {
  grid-column: span 1;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 22px;
}
.activity.square h3 { font-size: 15px; }


/* ==========================================================================
   10. ABOUT section
   ========================================================================== */

.about {
  background: var(--cream-soft);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--white), transparent);
}
.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  align-items: center;
}
.about-img {
  position: relative;
  aspect-ratio: 4/5;
  background-image: url('img/02.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}
.about-img::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 2px solid var(--brown);
  z-index: -1;
}
.about-img::after {
  content: "Madeira · Since 2010";
  position: absolute;
  bottom: -24px; left: 24px;
  background: var(--brown);
  color: var(--cream);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.2vw, 44px);
  color: var(--navy-deep);
  line-height: 1.08;
  margin-bottom: 20px;
}
.about h2 em { font-style: italic; color: var(--brown); font-weight: 500; }
.about p {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.7;
}
.about-signature { margin-top: 36px; display: flex; align-items: center; gap: 20px; }
.about-signature .sig {
  font-family: 'Caveat', cursive;
  font-size: 32px;
  color: var(--navy);
  line-height: 1;
}
.about-signature .role {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Promo section · cross-promotes Private Tours & Transfers on index */
.promo {
  background: var(--cream-soft);
  position: relative;
  overflow: hidden;
}
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.promo-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}
.promo-img::before {
  content: "";
  position: absolute;
  inset: -16px -16px 16px 16px;
  border: 2px solid var(--brown);
  z-index: -1;
}
.promo h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  color: var(--navy-deep);
  margin: 8px 0 18px;
}
.promo h2 em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.promo p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 26px;
}
.promo-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--navy);
  padding: 4px 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.promo-cta:hover {
  color: var(--brown);
  border-color: var(--brown);
}
.promo-cta::after {
  content: " →";
}
@media (max-width: 1100px) {
  .promo-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* ==========================================================================
   11. TOUR cards (featured tours)
   ========================================================================== */

.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tours-grid.four-cards {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .tours-grid.four-cards { grid-template-columns: repeat(2, 1fr); }
}
.tour-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.tour-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(22, 57, 90, 0.25);
  border-color: var(--brown-soft);
}
.tour-img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  position: relative;
}
.tour-img .tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--cream);
  color: var(--brown);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tour-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.tour-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tour-meta span { display: flex; align-items: center; gap: 6px; }
.tour-meta span::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--brown);
  border-radius: 50%;
}
.tour-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--navy-deep);
  margin-bottom: 10px;
  line-height: 1.2;
}
.tour-body p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 20px;
  flex: 1;
}
.tour-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tour-price {
  font-family: 'Fraunces', serif;
  color: var(--navy);
  font-size: 22px;
}
.tour-price .from {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  display: block;
  margin-bottom: 2px;
}
.tour-link {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour-link:hover { color: var(--brown); }


/* ==========================================================================
   11b. PAGE HEADER · Overview-Seiten Header mit Bergschema-Hintergrund
   Variants: .page-header-blue (Mountain Biking, External Tours)
             .page-header-brown (Trekking, Holiday Packages)
   ========================================================================== */

.page-header {
  position: relative;
  padding: 64px 0 56px;
  background: var(--white);
  overflow: hidden;
}
.page-header-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23A8C5DE'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.page-header-blue .page-header-shape {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23A8C5DE'/></svg>");
  opacity: 0.55;
}
.page-header-brown .page-header-shape {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 120 L0 70 L80 50 L160 75 L240 30 L320 60 L400 25 L500 70 L600 35 L720 60 L840 30 L960 55 L1080 25 L1200 55 L1320 35 L1440 60 L1440 120 Z' fill='%23E0C8A8'/></svg>");
  opacity: 0.55;
}
.page-header .container {
  position: relative;
  z-index: 1;
}
.page-header h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  color: var(--navy-deep);
  margin: 6px 0 18px;
  max-width: 820px;
}
.page-header h1 em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.page-header-blue h1 em {
  color: var(--navy-soft);
}
.page-header-brown h1 em {
  color: var(--brown);
}
.page-header-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 720px;
  margin: 0;
}


/* ==========================================================================
   11c. OVERVIEW LIST · 2-Spalten-Liste mit Bild links, Text rechts
   Variants: .overview-list-blue (Mountain Biking, External Tours)
             .overview-list-brown (Trekking, Holiday Packages)
   ========================================================================== */

.overview-list {
  background: var(--white);
}
.list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.list-grid.list-grid-single {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  gap: 14px;
}
.list-grid-single .list-card {
  grid-template-columns: 140px 1fr;
}
.list-grid-single .list-card-img {
  width: 140px;
  height: 140px;
}
.list-grid-single .list-card-text h3 {
  font-size: 21px;
}
.list-grid-single .list-card-text p {
  font-size: 15px;
}
.list-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: stretch;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
  transition: all 0.25s ease;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.list-card:hover {
  border-color: var(--navy-soft);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(22, 57, 90, 0.25);
}
.overview-list-blue .list-card {
  background: #EAF1F8;
  border-color: #C5D7E5;
}
.overview-list-blue .list-card:hover {
  border-color: var(--navy-soft);
  background: var(--white);
  box-shadow: 0 14px 30px -16px rgba(22, 57, 90, 0.35);
}
.overview-list-brown .list-card {
  background: #F4E9D8;
  border-color: #D9C5A6;
}
.overview-list-brown .list-card:hover {
  border-color: var(--brown-soft);
  background: var(--white);
  box-shadow: 0 14px 30px -16px rgba(139, 90, 43, 0.3);
}
.list-card-img {
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.list-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.list-card-text h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  color: var(--navy-deep);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.overview-list-blue .list-card:hover h3 { color: var(--navy-soft); }
.overview-list-brown .list-card:hover h3 { color: var(--brown); }
.list-card-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.list-card-text p + p { margin-top: 6px; }
.list-card-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--navy-deep) !important;
  font-size: 15px !important;
}
.list-card-price {
  font-weight: 600;
  color: var(--navy-deep) !important;
  margin-top: 10px !important;
}

/* Static list cards — nicht klickbar, kein Hover-Effekt
   Used on external-tours.html (keine Unterseiten) */
.list-card-static {
  cursor: default;
}
.list-card-static:hover {
  transform: none;
  background: var(--cream-soft);
  box-shadow: none;
}
.overview-list-blue .list-card-static:hover {
  background: #EAF1F8;
  border-color: #C5D7E5;
  box-shadow: none;
}
.overview-list-brown .list-card-static:hover {
  background: #F4E9D8;
  border-color: #D9C5A6;
  box-shadow: none;
}
.list-card-static:hover h3 { color: var(--navy-deep); }


/* ==========================================================================
   11d. INFO BOX · zentrierte Notiz mit Border (z.B. zwischen Header und Liste)
   ========================================================================== */

.info-box-section {
  padding: 24px 0 0;
}
.info-box {
  max-width: 720px;
  margin: 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 20px 28px;
  text-align: center;
  background: var(--white);
}
.info-box p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--navy-deep);
  margin: 0;
  line-height: 1.45;
}


/* ==========================================================================
   11e0. BACK LINK · "← Zurück zur Übersicht" — same eyebrow style with chevron
   ========================================================================== */

.back-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.2s ease;
}
.back-link::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 14px;
  vertical-align: 2px;
}
.back-link:hover {
  color: var(--brown-soft);
}


/* ==========================================================================
   11e. TOUR SUBPAGE · single-tour layout
   Header: heading left, landscape map right (over Bergschema-Hintergrund).
   Body: 4-photo gallery, text block, more photos.
   ========================================================================== */

.page-header-grid {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: 40px;
  align-items: center;
}
/* Page-header grid variant: wordcloud beside heading (overview pages like trekking01, mtb01) */
.page-header-grid.cloud-right {
  grid-template-columns: minmax(280px, 380px) 1fr;
}
/* Tighter vertical padding when the page-header carries a cloud-right grid */
.page-header:has(.page-header-grid.cloud-right) {
  padding: 24px 0 28px;
}
.page-header-cloud {
  position: relative;
}
.page-header-cloud svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 130px;
}
.page-header-cloud-mobile {
  display: none;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .page-header-grid.cloud-right {
    grid-template-columns: 1fr;
  }
  .page-header-cloud svg { display: none; }
  .page-header-cloud-mobile { display: block; }
}

/* Intro paragraph above overview list (used when intro moved out of page-header) */
.overview-list .list-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 760px;
}

.page-header-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
/* Optional clickable wrapper — opens map in lightbox */
.page-header-map-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.page-header-map-trigger img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-header-map-trigger:hover img {
  transform: scale(1.02);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

/* Gallery (used both above and below the text block) */
.tour-gallery {
  background: var(--white);
  padding: 24px 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-item {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

/* Text block between galleries */
.tour-text {
  background: var(--white);
  padding: 16px 0 32px;
}
.tour-text .container {
  max-width: 820px;
}
.tour-text h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--navy-deep);
  margin: 0 0 12px;
}
.tour-text h2 em {
  font-style: italic;
  color: var(--brown);
  font-weight: 500;
}
.tour-text h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--navy-deep);
  margin: 24px 0 8px;
}
.tour-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}
.tour-text ul {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
  padding-left: 20px;
}
.tour-text ul li { margin-bottom: 4px; }

/* Rate tables · mtb13 Bike Rental */
.tour-text .rate-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px !important;
}
.tour-text .rate-icon {
  font-size: 22px;
  line-height: 1;
}
.tour-text .rate-sub {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  font-size: 0.78em;
}
.tour-text .rate-tagline {
  font-style: italic;
  color: var(--muted) !important;
  margin: 0 0 14px !important;
  font-size: 15px !important;
}
.tour-text .rate-table-wrap {
  overflow-x: auto;
  margin: 0 0 32px;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.tour-text .rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 540px;
}
.tour-text .rate-table thead th {
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--line);
  background: var(--cream-soft);
  white-space: nowrap;
}
.tour-text .rate-table thead th:not(:first-child) { text-align: right; }
.tour-text .rate-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.tour-text .rate-table tbody td:first-child {
  font-weight: 500;
  color: var(--navy-deep);
}
.tour-text .rate-table tbody td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--navy-deep);
  white-space: nowrap;
}
.tour-text .rate-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 760px) {
  .tour-text .rate-table { font-size: 13px; min-width: 460px; }
  .tour-text .rate-table thead th,
  .tour-text .rate-table tbody td { padding: 9px 10px; }
  .tour-text .rate-table thead th { font-size: 11px; }
}

/* ==========================================================================
   Partner Hotels list · used on holiday02.html
   Each card has a hero image + 3 thumbnails (clickable for lightbox)
   ========================================================================== */

.hotel-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

.hotel-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  background: #F4E9D8;          /* same warm cream as overview-list-brown */
  border: 1px solid #D9C5A6;
  border-radius: 4px;
  padding: 20px;
}
/* 2×2 image grid: 4 equal tiles, all clickable to open lightbox */
.hotel-card-img-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 1 / 1;
}
.hotel-card-tile {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hotel-card-tile:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px -8px rgba(22, 57, 90, 0.4);
  z-index: 1;
}
/* Empty placeholder when a hotel has fewer than 4 photos —
   takes the grid slot but stays invisible (blends with card bg) */
.hotel-card-tile-empty {
  display: block;
  width: 100%;
  height: 100%;
}

.hotel-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hotel-card-text h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--navy-deep);
  margin: 0 0 4px;
}
.hotel-card-text h3 a {
  color: inherit;
  text-decoration: none;
}
.hotel-card-text h3 a:hover {
  color: var(--brown);
}
.hotel-card-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown);
  margin: 0 0 14px;
}
.hotel-card-text p:not(.hotel-card-tagline) {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
}
.hotel-card-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1.5px solid var(--navy);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hotel-card-link:hover {
  color: var(--brown);
  border-color: var(--brown);
}
.hotel-card-link::after {
  content: " →";
  display: inline;
}

@media (max-width: 760px) {
  .hotel-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .hotel-card-text h3 { font-size: 21px; }
}

/* Lightbox · click thumb → fullscreen image overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(22, 57, 90, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 1000;
  cursor: zoom-out;
  animation: lightbox-fade-in 0.2s ease;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.lightbox-close:hover { opacity: 1; }
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Contact form · used on contact.html
   ========================================================================== */

.contact-content {
  background: var(--white);
  padding: 24px 0 80px;
}
.contact-content .container {
  max-width: 720px;
}
.contact-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form-row label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-form-required::after {
  content: " *";
  color: var(--brown);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--navy);
}
.contact-form textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

/* Honeypot (bot trap) — visually hidden but in DOM */
.contact-form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
}

/* DSGVO consent block */
.contact-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0 4px;
}
.contact-form-consent input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
.contact-form-consent label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}
.contact-form-consent a {
  color: var(--navy);
  text-decoration: underline;
}

/* Submit button */
.contact-form-submit {
  align-self: flex-start;
  background: var(--navy);
  color: var(--cream);
  border: none;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 4px;
}
.contact-form-submit:hover {
  background: var(--navy-deep);
}

/* Status messages (after submission, via ?sent=1 / ?error=1) */
.contact-success,
.contact-error {
  padding: 18px 22px;
  border-radius: 4px;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.55;
  border: 1.5px solid;
}
.contact-success {
  background: var(--cream-soft);
  border-color: var(--navy);
  color: var(--navy-deep);
}
.contact-error {
  background: #FBE7E5;
  border-color: #C97168;
  color: #8B2A1F;
}

.contact-fallback {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.contact-fallback a { color: var(--navy); }

/* Day-by-day list for multi-day programs (8-day, 15-day) */
.tour-text .day-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 24px;
}
.tour-text .day-list li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cream);
  font-size: 17px;
  margin-bottom: 0;
}
.tour-text .day-list li:last-child {
  border-bottom: none;
}
.tour-text .day-list li > .day-content {
  flex: 1;
  min-width: 0;
}
.tour-text .day-list .day-description {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.tour-text .day-list li > strong {
  flex-shrink: 0;
  min-width: 72px;
  color: var(--brown);
}
.tour-text .day-list li.day-rest {
  color: var(--brown-soft);
  font-style: italic;
}

@media (max-width: 760px) {
  .page-header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   12. COMING-SOON section (used only on comingsoon.html)
   ========================================================================== */

.coming-soon {
  position: relative;
  padding: 110px 0;
  text-align: center;
  background: var(--cream-soft);
  overflow: hidden;
}
.coming-soon::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--white), transparent);
  pointer-events: none;
}
.coming-soon-inner {
  position: relative;
  z-index: 2;
}
.coming-soon .dots-left,
.coming-soon .dots-right {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--brown);
  letter-spacing: 0.15em;
  vertical-align: middle;
  opacity: 0.7;
}
.coming-soon h2 {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-deep);
  margin: 0 28px;
  position: relative;
}
.coming-soon h2 .underline-word {
  position: relative;
  display: inline-block;
}
.coming-soon h2 .underline-word::after {
  content: "";
  position: absolute;
  bottom: 6px; left: -6px; right: -6px;
  height: 14px;
  background: var(--cream);
  z-index: -1;
}
.coming-soon-sub {
  margin-top: 28px;
  font-family: 'Caveat', cursive;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--navy);
  line-height: 1.3;
}
.coming-soon-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.coming-soon-divider .line {
  width: 60px;
  height: 2px;
  background: var(--brown);
  opacity: 0.55;
}
.coming-soon-divider .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brown);
}


/* ==========================================================================
   13. CTA band
   ========================================================================== */

.cta-band {
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 40px 0 32px;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: -60px; bottom: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--brown) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -80px; top: -60px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--white) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.cta-band .container { position: relative; }

/* Zeile 1 · Headline volle Breite */
.cta-row-head {
  margin-bottom: 24px;
}
.cta-band h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 2.8vw, 42px);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0;
}
.cta-band h2 em { font-style: italic; color: var(--cream); font-weight: 500; }

/* Zeile 2 · 3 Spalten: links Logo+Adresse · mitte Öffnungszeiten · rechts Buttons */
.cta-row-main {
  display: grid;
  grid-template-columns: 1fr auto 320px;
  gap: 40px;
  align-items: center;
  margin-bottom: 22px;
}

/* Öffnungszeiten-Block zwischen Adresse und Buttons —
   Schriftgröße und Farbe wie cta-address, Zeilenumbruch per <br>. */
.cta-hours {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

/* Logo + Adresse (linke Spalte) */
.cta-shop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.cta-shop-logo {
  background: var(--white);
  padding: 10px 16px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.cta-shop-logo img {
  display: block;
  height: 64px;
  width: auto;
}
.cta-band .cta-address {
  color: rgba(255,255,255,0.95);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* Buttons (rechte Spalte) — vertikal gestapelt wie original */
.cta-band .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.cta-band .cta-btn {
  background: var(--cream);
  color: var(--navy-deep);
  border-color: var(--cream);
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cta-band .cta-btn:hover { background: var(--white); border-color: var(--white); }
.cta-band .cta-btn.outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.cta-band .cta-btn.outline:hover { background: var(--cream); color: var(--navy-deep); }

/* Social buttons row (Instagram + Facebook side by side) */
.cta-band .social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cta-band .social-btn { padding-left: 12px; padding-right: 12px; }

/* Zeile 3 · Lizenzdaten einzeilig, mit Punkten getrennt, volle Breite */
.cta-licenses-row {
  color: rgba(245, 235, 214, 0.7);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(245, 235, 214, 0.18);
  border-bottom: 1px solid rgba(245, 235, 214, 0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 14px;
  line-height: 1.6;
  text-align: center;
}
.cta-licenses-row .dot {
  color: rgba(245, 235, 214, 0.4);
  font-weight: 700;
}

/* Zeile 4 · Subheadline volle Breite, große Schrift, mittig */
.cta-hint-big {
  color: var(--cream);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  text-align: center;
  margin: 0;
  max-width: none;
  width: 100%;
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

footer {
  background: var(--navy-deep);
  color: var(--white);
  padding: 24px 0;
}
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: 16px;
}
.foot-bottom a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 3px;
}
.foot-legal a { text-decoration: none; }
.foot-bottom a:hover { color: var(--cream); text-decoration-color: var(--cream); }
.foot-legal { display: flex; gap: 22px; }


/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-headline h1,
.coming-soon h2 {
  animation: rise 0.8s ease backwards;
  animation-delay: 0.1s;
}
.coming-soon-sub {
  animation: rise 0.8s ease backwards;
  animation-delay: 0.35s;
}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  /* Nav */
  .nav-toggle { display: block; }
  /* nav-right (Kontakt-Button + Burger) wird rechtsbündig an den
     Rand geschoben — vorher pushed margin-left:auto auf .nav-toggle
     den Burger nach rechts; jetzt wo der Kontakt-Button wieder mit
     drin sitzt, schieben wir den ganzen Container. */
  .nav-right { margin-left: auto; }
  /* Kontakt-Button bleibt im Topnav sichtbar, nur kompakter:
     kleineres Padding, schmalere Letter-Spacing, damit Logo + Button
     + Burger nebeneinander Platz haben */
  .nav-right > .cta-btn {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -20px rgba(22, 57, 90, 0.25);
  }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a { width: 100%; }
  .has-mega::after { display: none; }
  .mega, .dropdown-simple {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--cream);
    margin-left: 14px;
    padding: 8px;
    width: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .has-mega.open .mega,
  .has-mega.open .dropdown-simple { max-height: 800px; }
  .mega-grid.two,
  .mega-grid.three { grid-template-columns: 1fr; }
  .mega.wide { width: auto; }

  /* Coming-soon nav: hide inline SVG wordcloud, show stacked tag version */
  .nav-wordcloud { display: none; }
  .nav-wordcloud-mobile { display: block; }
  .logo-link img { /* kept at 84px on index per spec; coming-soon may slim down */ }

  /* Standalone wordcloud band: SVG → stacked tags */
  .wordcloud-band-inner { display: none; }
  .wordcloud-band-mobile { display: block; }

  /* Activities */
  .activity.big,
  .activity.small,
  .activity.third { grid-column: span 12; }
  .activities.four-grid { grid-template-columns: repeat(2, 1fr); }

  /* About / tours */
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .tours-grid,
  .tours-grid.four-cards { grid-template-columns: 1fr; }

  /* Overview list */
  .list-grid { grid-template-columns: 1fr; gap: 14px; }
  .page-header { padding: 48px 0 40px; }

  /* CTA band — Stack erst auf schmalen Geräten */
  .cta-band .actions { justify-content: flex-start; }
  .cta-band .cta-address { font-size: 15px; }
  .cta-band .cta-hours   { font-size: 15px; }
  .cta-licenses-row { font-size: 11px; gap: 4px 10px; }
  .cta-hint-big { font-size: clamp(20px, 4vw, 26px); }

  /* Hero */
  .hero-video-band { height: 220px; }
  .hero-headline { padding: 12px 24px 26px; }

  /* Section spacing */
  section { padding: 48px 0; }
  .coming-soon { padding: 70px 0; }

  /* Containers */
  .container, .nav-inner, .topbar-inner { padding-left: 24px; padding-right: 24px; }
  .topbar-inner { font-size: 12px; }

  /* Mobile topnav refinements */
  .topbar { font-size: 12px; }
  .topbar-inner { padding: 4px 16px; gap: 4px 16px; }
  .topbar-right { gap: 6px 14px; }

  /* Nav: kleineres Logo, kompakteres Padding, damit der Burger nicht neben einem Riesen-Logo schwebt */
  .nav-inner { gap: 14px; padding: 4px 16px; }
  .logo-link img { height: 56px; }
  .nav-toggle { padding: 6px; }

  /* Aufgeklapptes Mobile-Menü: Items als saubere volle Zeilen mit Trennlinien */
  .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav-links > li:last-child { border-bottom: none; }
  .nav-links > li > a { padding: 12px 14px; font-size: 14px; font-weight: 600; }
  .nav-links > li > a::after { display: none; }

  /* Mega-Submenü im Mobile-Modus: schlichte Text-Liste ohne Thumbs/Header.
     Wir matchen den :hover-Zustand explizit, damit das Desktop-Hover-Transform
     (translateX(-50%)) auf Touch-Geräten den Mega-Block nicht halb aus dem
     Sichtfeld schiebt. */
  .has-mega .mega,
  .has-mega:hover .mega {
    transform: none !important;
    margin-left: 0;
    padding: 0;
    border-left: 2px solid var(--cream);
    background: var(--cream-soft);
    box-shadow: none;
  }
  .mega-header { display: none !important; }
  .mega-viewall { display: none !important; }
  .mega-grid,
  .mega-grid.two,
  .mega-grid.three {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .mega-thumb { display: none !important; }
  .mega-item {
    display: block;
    padding: 11px 14px 11px 24px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    gap: 0;
  }
  .mega-item:last-child { border-bottom: none; }
  .mega-item:hover { background: var(--white); transform: none; }
  .mega-item-text { flex: none; min-width: 0; }
  .mega-item-title { font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--ink); }
  .mega-item:hover .mega-item-title { color: var(--brown); }
}

@media (max-width: 560px) {
  .activities.four-grid { grid-template-columns: 1fr; }

  /* Topbar: stack location + contact, center everything */
  .topbar-inner { justify-content: center; gap: 4px 18px; text-align: center; padding: 4px 12px; }
  .topbar-inner > div { width: 100%; display: flex; justify-content: center; }
  .topbar-right { gap: 4px 10px; flex-wrap: wrap; }
  /* Trennpunkte ausblenden, damit beim Umbruch keine "·" am Zeilenanfang stehen bleibt — Abstand übernimmt gap */
  .topbar-right .sep { display: none; }

  /* Nav: noch kompakter auf Telefonen */
  .nav-inner { padding: 4px 12px; gap: 8px; }
  .logo-link img { height: 44px; }
  /* Kontakt-Button bei <560 px noch eine Stufe kompakter */
  .nav-right > .cta-btn {
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .nav-right { gap: 8px; }

  /* Overview list: Bild oben, Text darunter — sonst zu eng für längere Texte */
  .list-card,
  .list-grid-single .list-card { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .list-card-img,
  .list-grid-single .list-card-img { width: 100%; height: 180px; }
  .list-card-text h3 { font-size: 17px; }
  .list-card-text p { font-size: 14px; }
  .list-grid-single .list-card-text h3 { font-size: 19px; }
  .list-grid-single .list-card-text p { font-size: 14px; }

  /* Coming-soon: hide ornamental dots, let h2 breathe */
  .coming-soon .dots-left,
  .coming-soon .dots-right { display: none; }
  .coming-soon h2 { margin: 0; }
}

/* CTA-Block: Stack erst ab 768px (separater Breakpoint, da 2-Spalten-Layout länger sinnvoll) */
@media (max-width: 768px) {
  .cta-row-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cta-shop {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: start;
  }
}


/* ==========================================================================
   17. LEGAL pages · plain content area
   Used on imprint.html, privacy.html and their coming-soon counterparts.
   Wrap the body of the page in <section class="legal-content">.
   No decorations, no hero, no images. Just readable text on white.
   ========================================================================== */

.legal-content {
  background: var(--white);
}
.legal-content .container {
  max-width: 760px;
}
.legal-content h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--navy-deep);
  margin-bottom: 8px;
}
.legal-content .legal-sub {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.legal-content h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--navy-deep);
  line-height: 1.25;
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-content h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-top: 22px;
  margin-bottom: 8px;
}
.legal-content p,
.legal-content li {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 14px;
}
.legal-content ul,
.legal-content ol {
  padding-left: 22px;
  margin-bottom: 14px;
}
.legal-content a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--cream);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.legal-content a:hover {
  text-decoration-color: var(--brown);
  color: var(--brown);
}
.legal-content strong { font-weight: 600; color: var(--navy-deep); }
.legal-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}