/*
Theme Name: Golf Club Brandnertal
Theme URI: 
Author: MLS - GC Brand
Author URI: 
Description: Premium WordPress theme für den Golfclub Brand im Brandnertal – elegant und modern.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: golfclub
Tags: golf
*/

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  --color-forest:    #1a2e1a;
  --color-pine:      #2d4a2d;
  --color-sage:      #5a7a5a;
  --color-mist:      #e8ede8;
  --color-snow:      #f5f7f5;
  --color-gold:      #a88935;   /* darkened from #b8963e for WCAG AA 4.5:1 on cream */
  --color-gold-light:#d4af5a;
  --color-cream:     #faf8f4;
  --color-charcoal:  #1c1c1c;
  --color-stone:     #6b6b6b;
  --color-live:      #4ade80;

  --font-display:    'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:       'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-med:  0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.18s ease;

  --max-width: 1380px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* ── Design Tokens 2026 — Rundungen (modern, konsistent) ── */
  --radius-xs:    6px;   /* badges, tiny chips */
  --radius-sm:   10px;   /* small controls */
  --radius-md:   14px;   /* buttons, inputs */
  --radius-lg:   20px;   /* news cards, images, panels */
  --radius-xl:   28px;   /* card grids, hero image, webcam, lessons */
  --radius-2xl:  36px;   /* big feature sections */
  --radius-pill: 999px;  /* pills, language switcher */

  /* ── Layered Shadows — weich, tief, premium ── */
  --shadow-xs:  0 1px 2px rgba(26, 46, 26, 0.04);
  --shadow-sm:  0 2px 8px rgba(26, 46, 26, 0.05), 0 1px 2px rgba(26, 46, 26, 0.04);
  --shadow-md:  0 4px 16px rgba(26, 46, 26, 0.06), 0 2px 4px rgba(26, 46, 26, 0.04);
  --shadow-lg:  0 12px 32px rgba(26, 46, 26, 0.08), 0 4px 8px rgba(26, 46, 26, 0.05);
  --shadow-xl:  0 24px 48px rgba(26, 46, 26, 0.10), 0 8px 16px rgba(26, 46, 26, 0.06);
  --shadow-card-hover: 0 20px 60px rgba(26, 46, 26, 0.14), 0 8px 20px rgba(26, 46, 26, 0.06);
}


/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* scroll-behavior: smooth removed - JS handles smooth scrolling with header offset */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-charcoal);
  background: var(--color-cream);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ============================================
   HYPHENATION — lets German long words break at syllable boundaries
   instead of overflowing mobile containers. Applied only to body-text
   elements, NOT container classes (would cascade into UI/nav/buttons).
   ============================================ */
p, li, dd, blockquote,
.about-text p,
.lessons-content p,
.webcam-text p,
.greenfee-card .card-feature,
.gc-news-archive__excerpt,
.gc-team-member__desc,
.gc-card__text {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
}

/* Defensive: UI/nav elements must NEVER wrap or hyphenate.
   Without this, narrow viewports (e.g. with WP admin bar taking space)
   could force "EN" language-switcher text to break into "E" / "N" stack. */
.language-switcher,
.language-switcher a,
.nav-cta,
.menu-toggle,
.site-logo .logo-main,
.site-logo .logo-sub,
#primary-navigation > ul > li > a,
.btn {
  hyphens: manual;
  overflow-wrap: normal;
  word-wrap: normal;
  white-space: nowrap;
}

img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
a:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 2px; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 2px; }

/* Form-Elemente erben die Theme-Schrift (sonst nutzen Browser System-Defaults) */
input, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Text selection */
::selection { background: var(--color-gold); color: #fff; }
::-moz-selection { background: var(--color-gold); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-cream); }
::-webkit-scrollbar-thumb { background: var(--color-sage); border-radius: 5px; border: 2px solid var(--color-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* ============================================
   SCROLL PROGRESS INDICATOR
   Thin gold line at very top of viewport that fills
   as the user scrolls through the page. Premium detail
   without any visual noise.
   ============================================ */
.gc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  /* Above content + header (100), below mobile-nav (9999) and page-loader (99998) so
     the progress bar is hidden correctly when the mobile menu or loader overlay open. */
  z-index: 150;
  pointer-events: none;
}
.gc-scroll-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  box-shadow: 0 0 8px rgba(184, 150, 62, 0.4);
  transform-origin: left center;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .gc-scroll-progress__bar { transition: none; }
}

/* ============================================
   IMAGE FADE-IN — smooth opacity transition when images load.
   Only applies to content images that JS has tagged with data-fade.
   Already-loaded images or images without the attr are visible immediately.
   Hero slides + logo + SVGs excluded (they have own rules or load instantly).
   ============================================ */
img[data-fade]:not(.is-loaded) {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img[data-fade].is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  img[data-fade]:not(.is-loaded),
  img[data-fade].is-loaded { opacity: 1; transition: none; }
}

/* ============================================
   FILM-GRAIN OVERLAY — cinematic texture on dark sections.
   Applied via ::after pseudo. Very subtle (opacity ~0.04) — the effect
   is "felt" more than "seen". Pointer-events:none keeps interactivity.
   ============================================ */
#hero::after,
#greenfee-section::after,
.lessons-layout::after,
#webcam-section::after,
#contact-cta::after,
#site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/grain.svg');
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
/* Ensure parents have positioning for absolute pseudo to anchor correctly.
   #hero already has position: relative + overflow: hidden above. */
#greenfee-section,
#webcam-section,
#site-footer,
.lessons-layout,
#contact-cta {
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  /* Grain is static, doesn't move — but we hide it if user wants minimal visual noise */
  #hero::after, #greenfee-section::after, .lessons-layout::after,
  #webcam-section::after, #contact-cta::after, #site-footer::after {
    display: none;
  }
}

/* ============================================
   PREMIUM POLISH — Tabular numerals + smooth rendering
   ============================================ */
/* All numeric displays (stats, prices, weather, dates) use
   tabular-nums so digit widths are uniform — looks professional
   and avoids "jumping" during count-up animations. */
.hero-stat-item .stat-number,
.about-fact .fact-value,
.greenfee-card .amount,
.greenfee-card .currency,
.gc-stat__num,
.gc-pricing-card__amount,
.weather-temp,
.forecast-day .f-temp,
.forecast-day .f-min,
.news-card-date,
.gc-news-archive__date,
.membership-table tbody td .price-cell,
.hole-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;              /* Jost Regular — clean geometric default */
  line-height: 1.2;
  letter-spacing: 0;             /* Jost is already optically balanced */
}

.display-headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 9rem);
  font-weight: 400;              /* Regular for very large display text (less chunky) */
  line-height: 1;
  letter-spacing: -0.01em;
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-pad {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  background: rgba(26, 46, 26, 1);
  /* NO backdrop-filter: it creates isolated stacking contexts on mobile Safari
     that can hide or clip fixed children with different z-indexes */
  box-shadow: 0 1px 0 rgba(184, 150, 62, 0.12);
  transition: padding var(--transition-med), box-shadow var(--transition-med), background var(--transition-med);
  min-width: 0;
  column-gap: 1rem;
  overflow: visible;
}

#site-header.scrolled {
  background: rgba(26, 46, 26, 1);
  padding: 0.85rem var(--gutter);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3), 0 1px 0 rgba(184, 150, 62, 0.2);
}

/* Front page: transparent header until scrolled */
body.home #site-header:not(.scrolled) {
  background: transparent;
  box-shadow: none;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
  max-width: 240px;
}

.site-logo img {
  height: auto;
  max-height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-top: -18px;
  margin-bottom: -18px;
  transition: opacity var(--transition-fast), max-height var(--transition-med), margin var(--transition-med);
}

/* Scrolled: logo slightly extends beyond bar but keeps breathing room */
#site-header.scrolled .site-logo img {
  max-height: 50px;
  max-width: 140px;
  margin-top: -6px;
  margin-bottom: -6px;
}

/* Front page transparent: großes Logo, kein Overflow nötig */
body.home #site-header:not(.scrolled) .site-logo img {
  max-height: 90px;
  max-width: 240px;
  margin-top: 0;
  margin-bottom: 0;
}

.site-logo:hover img { opacity: 0.8; }

/* Mobile header text — hidden on desktop, visible on mobile/tablet */
.header-mobile-text {
  display: none;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text .logo-main {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.05em;
}

.logo-text .logo-sub {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

/* Logo protection */
.site-logo {
  flex-shrink: 0;
  min-width: 0;
}

.logo-text .logo-main {
  white-space: nowrap;
}

/* Primary Navigation */
#primary-navigation {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: visible;
}

#primary-navigation > ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: visible;
}

#primary-navigation > ul > li {
  position: relative;
  overflow: visible;
}


#primary-navigation > ul > li > a {
  font-size: clamp(0.6rem, 0.72vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 0.5rem clamp(0.3rem, 0.5vw, 0.7rem);
  transition: color var(--transition-fast);
  display: block;
  white-space: nowrap;
}

#primary-navigation > ul > li > a:hover,
#primary-navigation > ul > li.current-menu-item > a {
  color: var(--color-gold-light);
}

/* ── Desktop Dropdown ── */

/* Chevron indicator on parent items that have children */
#primary-navigation > ul > li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
#primary-navigation > ul > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: -2px;
}
#primary-navigation > ul > li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg);
}

/* Invisible hover bridge — prevents hover gap between link and dropdown.
   In scrolled mode JS sets --dd-bridge to cover the exact gap to header bottom.
   Width matches the dropdown's min-width (220px) so diagonal mouse paths stay inside. */
#primary-navigation > ul > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  width: 240px;
  min-width: calc(100% + 20px);
  height: var(--dd-bridge, 18px);
  background: transparent;
  z-index: 199;
}

/* The dropdown panel — base styles (ORIGINAL LOOK preserved) */
#primary-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(26, 46, 26, 1);
  min-width: 220px;
  padding: 0.4rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 200;
  list-style: none;
  margin: 0;
  border: none;
  border-radius: 0 0 6px 6px;
  box-shadow: none;
}

/* Header shadow tweaks when dropdown is open (seamless look) */
#site-header.scrolled:has(.menu-item-has-children:hover) {
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}
body:not(.home) #site-header:not(.scrolled):has(.menu-item-has-children:hover) {
  box-shadow: none !important;
}

/* Transparent header (home, not scrolled): floating card matching DE/EN switcher style.
   Position (top) is set by JS to align with header bottom; CSS only handles the glass look. */
body.home #site-header:not(.scrolled) .sub-menu {
  padding-top: 0.4rem;
  background: var(--lang-switch-bg, rgba(0, 0, 0, 0.3));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Show on hover — also persist on focus for keyboard navigation */
#primary-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
#primary-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: all;
}

/* Dropdown items */
#primary-navigation .sub-menu li a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  transition: color 0.15s ease, background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  border: none;
}

#primary-navigation .sub-menu li a:hover {
  color: var(--color-gold-light, #d4af5a);
  background: rgba(255,255,255,0.08);
}

/* Transparent: all corners rounded */
body.home #site-header:not(.scrolled) .sub-menu li:first-child a {
  border-radius: 10px 10px 0 0;
}
body.home #site-header:not(.scrolled) .sub-menu li:last-child a {
  border-radius: 0 0 10px 10px;
}
/* Scrolled: only bottom corners rounded */
#site-header.scrolled .sub-menu li:last-child a,
body:not(.home) #site-header .sub-menu li:last-child a {
  border-radius: 0 0 5px 5px;
}

/* T-Time CTA Button */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: var(--color-gold);
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.nav-cta:hover { background: var(--color-gold-light); }

/* ── Language Switcher: Sliding pill toggle ── */
.language-switcher {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: var(--lang-switch-bg, rgba(0,0,0,0.3));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}

/* Sliding gold pill — sits behind the links */
.language-switcher::after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--color-gold, #a88935);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Default: pill on left (first link is current).
   Slide right when second link is current. */
.language-switcher:has(a:last-child.is-current)::after {
  left: 50%;
}

/* Hover: slide pill to whichever link is hovered */
.language-switcher:has(a:first-child:hover)::after {
  left: 3px;
}
.language-switcher:has(a:last-child:hover)::after {
  left: 50%;
}

/* Links sit above the sliding pill */
.language-switcher a {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  min-width: 28px;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
  text-decoration: none;
  background: transparent;
  transition: color 0.3s ease;
}

/* Current link: bright text (pill is behind it) */
.language-switcher a.is-current {
  color: var(--color-text-light, #fff);
}

/* Hover non-current: bright text on hovered, dim current */
.language-switcher a:not(.is-current):hover {
  color: var(--color-text-light, #fff);
}
.language-switcher:has(a:not(.is-current):hover) a.is-current {
  color: rgba(255,255,255,0.55);
}

.desktop-language-switcher-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-language-switcher {
  flex-shrink: 0;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  position: relative;
  /* sits in header stacking context — doesn't matter, it's just a button */
  z-index: 2;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.32s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* Hamburger → X */
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   MOBILE NAV OVERLAY
   Outside the header → no stacking context issues.
   Hidden off-screen via transform (GPU layer).
   Never affected by scroll position.
   ============================================ */
#mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-forest);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* overflow:hidden removed - iOS Safari clipped the close button when scrolled.
     Body scroll is now locked via JS instead. */
  overflow-y: auto;
}

#mobile-nav.is-open {
  transform: translateX(0);
}

/* Mobile nav top bar — logo left, close right */
.mobile-nav-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 1.5rem 0;
}

.mobile-nav-logo {
  display: flex;
  align-items: center;
}

.mobile-nav-logo img {
  height: 44px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* Close button */
#mobile-nav-close {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.2s;
}
#mobile-nav-close:hover { background: rgba(255,255,255,0.12); }

#mobile-nav-close span {
  position: absolute;
  display: block;
  width: 18px;
  height: 1.5px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
}
#mobile-nav-close span:nth-child(1) { transform: rotate(45deg); }
#mobile-nav-close span:nth-child(2) { transform: rotate(-45deg); }

/* Nav list fills remaining space, items centered vertically */
#mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 1.5rem;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

#mobile-nav ul li {
  border-bottom: none;
}
#mobile-nav ul li:first-child {
  border-top: none;
}

/* Font and padding scale with viewport height */
#mobile-nav ul li a {
  display: block;
  padding: clamp(0.6rem, 1.8vh, 1.1rem) 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vh, 1.5rem);
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  text-align: left;
  text-decoration: none;
  line-height: 1.15;
  transition: color 0.2s;
}
#mobile-nav ul li a:hover,
#mobile-nav ul li a:active { color: var(--color-gold-light); }

/* T-Time CTA */
#mobile-nav .mobile-nav-cta-item {
  border: none !important;
  padding: clamp(1rem, 2.5vh, 1.5rem) 1.5rem;
  text-align: left;
}
#mobile-nav .mobile-nav-cta-item a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 2.2rem;
  background: var(--color-gold);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s;
}
#mobile-nav .mobile-nav-cta-item a:hover { background: var(--color-gold-light); }

/* Language switcher: bigger & more prominent */
#mobile-nav .mobile-language-switcher-item {
  border: none;
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.mobile-language-switcher {
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 4px;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* Override specificity for switcher links — bigger touch targets */
#mobile-nav .mobile-language-switcher a {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  display: block;
  min-width: 40px;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: none;
  transition: color 0.3s ease;
}

#mobile-nav .mobile-language-switcher a.is-current {
  color: var(--color-text-light, #fff);
}

#mobile-nav .mobile-language-switcher a:not(.is-current):hover {
  color: var(--color-text-light, #fff);
}

#mobile-nav .mobile-language-switcher:has(a:not(.is-current):hover) a.is-current {
  color: rgba(255,255,255,0.45);
}

/* ── Mobile Dropdown Accordion ── */

/* Parent link: left-aligned text with chevron */
#mobile-nav .menu-item-has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

/* Chevron — small, refined */
#mobile-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(255,255,255,0.35);
  border-bottom: 1.5px solid rgba(255,255,255,0.35);
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
  margin-right: 0.25rem;
}

/* Expanded: chevron points up + gold */
#mobile-nav .menu-item-has-children.is-expanded > a::after {
  transform: rotate(-135deg);
  border-color: var(--color-gold, #a88935);
}

/* Expanded parent: gold accent */
#mobile-nav .menu-item-has-children.is-expanded > a {
  color: var(--color-gold-light, #d4af5a) !important;
}

/* Sub-menu: slide-down with clean background */
#mobile-nav .sub-menu {
  display: none;
  list-style: none;
  margin: 0.25rem 0 0.5rem 0;
  padding: 0.5rem 0 0.5rem 1rem;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: 2px solid rgba(184, 150, 62, 0.25);
}

#mobile-nav .menu-item-has-children.is-expanded > .sub-menu {
  display: block;
}

/* Sub-menu items: clean, indented, left-aligned */
#mobile-nav .sub-menu li {
  border-bottom: none !important;
}
#mobile-nav .sub-menu li:first-child {
  border-top: none !important;
}
#mobile-nav .sub-menu li:last-child {
  border-bottom: none !important;
}

#mobile-nav .sub-menu li a {
  font-family: var(--font-body) !important;
  font-size: clamp(0.82rem, 2vh, 0.95rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: clamp(0.4rem, 1vh, 0.6rem) 1rem !important;
  color: rgba(255,255,255,0.5) !important;
  text-align: left !important;
  line-height: 1.5 !important;
}

#mobile-nav .sub-menu li a:hover,
#mobile-nav .sub-menu li a:active {
  color: var(--color-gold-light, #d4af5a) !important;
  background: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
#hero {
  position: relative;
  height: 100vh;        /* fallback for browsers without svh support */
  height: 100svh;       /* accounts for mobile URL bar — no overlap on iOS Safari */
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Parallax overlay — stronger at bottom for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 46, 26, 0.35) 0%,
    rgba(26, 46, 26, 0.10) 30%,
    rgba(26, 46, 26, 0.55) 65%,
    rgba(26, 46, 26, 0.88) 100%
  );
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem);
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  min-width: 0;
}

.hero-text {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.3s forwards;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8.5vw, 10rem);
  font-weight: 400;
  color: #fff;
  line-height: 0.9;
  letter-spacing: -0.025em;
  opacity: 0;
  animation: fadeUp 1.1s 0.5s forwards;
}

/* hero-title em styling removed — now uses .has-inline-color system */

.hero-subtitle {
  margin-top: 1.75rem;
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  font-weight: 300;
  letter-spacing: 0.05em;
  max-width: 420px;
  opacity: 0;
  animation: fadeUp 1.1s 0.7s forwards;
}

.hero-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1.1s 0.9s forwards;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-end;
  opacity: 0;
  animation: fadeUp 1.1s 1.1s forwards;
}

.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: right;
}

.hero-stat-item {
  color: rgba(255,255,255,0.9);
}

.hero-stat-item .stat-number {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

.hero-stat-item .stat-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-top: 0.2rem;
}

.hero-scroll {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 3rem;
}

.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-med);
  position: relative;
  overflow: hidden;
  /* Never let a button break out of its container */
  max-width: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-primary {
  /* Subtle gold-to-gold-light diagonal gradient — adds depth, reads "premium" */
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 55%, var(--color-gold) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  transition: background-position var(--transition-med), transform var(--transition-med), box-shadow var(--transition-med);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-gold-light);
  transform: translateX(-100%);
  transition: transform var(--transition-med);
}

.btn-primary:hover { background-position: 100% 50%; }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.75);
}

.btn-dark {
  background: var(--color-forest);
  color: #fff;
}

.btn-dark:hover { background: var(--color-pine); }

/* ── Subtle lift on hover for all buttons ── */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Card Lift-Effekte (subtil, premium) ── */
.greenfee-card,
.gc-card,
.gc-pricing-card,
.gc-team-member,
.gc-quote {
  transition: transform var(--transition-med), box-shadow var(--transition-med), background var(--transition-med);
}
.greenfee-card:hover,
.gc-card:hover,
.gc-pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.gc-team-member:hover .gc-team-member__img img {
  transform: scale(1.04);
}
.gc-team-member__img img {
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* About Image Zoom on hover */
.about-visual img,
.lessons-visual img {
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.about-visual:hover img,
.lessons-visual:hover img {
  transform: scale(1.03);
}

/* Course section header image subtle parallax */
.course-sticky { transition: transform var(--transition-med); }

/* Link underline animation */
.gc-card__link,
.news-read-more,
.page-breadcrumb a {
  position: relative;
  display: inline-block;
}
.gc-card__link::after,
.news-read-more::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gc-card__link:hover::after,
.news-read-more:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Icon button hover rotate (arrows) */
.btn svg {
  transition: transform var(--transition-fast);
}
.btn:hover svg {
  transform: translateX(3px);
}

/* Stat number count-up hover subtle */
.gc-stat__num,
.hero-stat-item .stat-number {
  transition: color var(--transition-fast);
}

/* Quote marks subtle fade on scroll-in */
.gc-quote::before {
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .greenfee-card:hover,
  .gc-card:hover,
  .gc-pricing-card:hover,
  .gc-team-member:hover .gc-team-member__img img,
  .about-visual:hover img,
  .lessons-visual:hover img,
  .btn:hover svg {
    transform: none;
  }
  .gc-card__link::after,
  .news-read-more::after {
    transform: scaleX(1);
  }
}

.btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ============================================
   WEATHER WIDGET
   ============================================ */
#weather-section {
  background: var(--color-forest);
  padding: 2.5rem 0;
  border-top: 1px solid rgba(184, 150, 62, 0.2);
  border-bottom: 1px solid rgba(184, 150, 62, 0.2);
}

.weather-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}

.weather-location {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.weather-location-icon {
  width: 40px;
  height: 40px;
  background: rgba(184, 150, 62, 0.15);
  border: 1px solid rgba(184, 150, 62, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-light);
}

.weather-location-text .location-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 400;
}

.weather-location-text .location-sub {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 0.1rem;
}

.weather-current {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.weather-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
}

.weather-temp {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}

.weather-temp span {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.5);
}

.weather-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.weather-condition {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
}

.weather-extra {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
}

.weather-forecast {
  display: flex;
  gap: 0.25rem;
  /* Allow horizontal scroll when many forecast days are requested (up to 16
     from Open-Meteo) so the layout doesn't break on narrow viewports. */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.weather-forecast::-webkit-scrollbar { height: 4px; }
.weather-forecast::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.weather-forecast .forecast-day { flex: 0 0 auto; }

.forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  min-width: 70px;
  transition: background var(--transition-fast);
}

.forecast-day:hover { background: rgba(255,255,255,0.08); }

.weather-disclaimer {
  font-size: 0.65rem;
  text-align: left;
  margin-top: 0.5rem;
  /* color + opacity set via shared .gc-finehint-dark rule above */
}

.forecast-day .f-day {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.forecast-day .f-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}

.forecast-day .f-temp {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 400;
}

.forecast-day .f-min {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
}

.weather-loading {
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  animation: pulse 1.5s ease-in-out infinite;
}

.weather-error {
  color: rgba(255,255,255,0.4);
  font-size: 0.78rem;
}

/* ============================================
   COURSE INTRO / ABOUT SECTION
   ============================================ */
#about-section {
  background: var(--color-cream);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: center;
}

.about-text .section-label { margin-bottom: 1.5rem; }

.about-text h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  color: var(--color-forest);
  margin-bottom: 2rem;
  line-height: 1.1;
}

/* about h2 em styling removed — now uses .has-inline-color system */

.about-text p {
  color: var(--color-stone);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(26, 46, 26, 0.1);
}

.about-fact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.about-fact .fact-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-forest);
  line-height: 1;
}

.about-fact .fact-label {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.about-visual {
  position: relative;
}

.about-image-stack {
  position: relative;
}

/* Wrapper div (inline-styled gradient container with the image inside) */
.about-image-stack > div:first-child {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.about-img-main {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.about-img-accent {
  position: absolute;
  bottom: -3rem;
  left: -3rem;
  width: 55%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid var(--color-cream);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

/* ============================================
   GREENFEE / PRICING SECTION
   ============================================ */
#greenfee-section {
  background: var(--color-forest);
  color: #fff;
}

.greenfee-header {
  text-align: center;
  margin-bottom: 4rem;
}

.greenfee-header .section-label {
  margin-bottom: 1.5rem;
}

.greenfee-header h2 {
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  color: #fff;
}

.greenfee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(184, 150, 62, 0.15);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.greenfee-card {
  background: var(--color-forest);
  padding: 3rem 2.5rem;
  position: relative;
  transition: background var(--transition-med);
}

.greenfee-card:hover {
  background: var(--color-pine);
}

.greenfee-card.featured {
  background: var(--color-pine);
  border: 1px solid rgba(184, 150, 62, 0.35);
}

.greenfee-card .card-badge {
  position: absolute;
  top: 0;
  right: 2rem;
  background: var(--color-gold);
  padding: 0.35rem 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.greenfee-card .card-category {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.75rem;
}

.greenfee-card h3 {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 1.5rem;
}

.greenfee-card .price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.greenfee-card .price .currency {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-gold-light);
}

.greenfee-card .price .amount {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}

.greenfee-card .price-note {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}

.greenfee-card .card-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.greenfee-card .card-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
}

.greenfee-card .card-feature::before {
  content: '';
  width: 5px;
  height: 1px;
  background: var(--color-gold);
  flex-shrink: 0;
}

/* ============================================
   COURSE / HOLES SECTION
   ============================================ */
#course-section {
  background: var(--color-snow);
}

.course-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
  margin-bottom: 5rem;
}

.course-sticky {
  position: sticky;
  top: 6rem;
}

.course-sticky .section-label { margin-bottom: 1.5rem; }

.course-sticky h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--color-forest);
  margin-bottom: 1.5rem;
}

.course-sticky p {
  color: var(--color-stone);
  font-size: 0.95rem;
  line-height: 1.8;
}

.holes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(26, 46, 26, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hole-card {
  background: var(--color-snow);
  padding: 1.75rem;
  transition: background var(--transition-med);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.hole-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform var(--transition-med);
}

.hole-card:hover { background: #fff; }
.hole-card:hover::before { transform: scaleX(1); }

.hole-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  color: rgba(26, 46, 26, 0.08);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.hole-par {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.hole-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-forest);
  margin: 0.3rem 0;
}

.hole-meters {
  font-size: 0.75rem;
  color: var(--color-stone);
  letter-spacing: 0.05em;
}

/* ============================================
   GOLFSCHULE / LESSONS SECTION
   ============================================ */
#lessons-section {
  background: var(--color-cream);
  overflow: hidden;
}

.lessons-layout {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 0;
  min-height: 600px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.lessons-visual {
  position: relative;
  overflow: hidden;
}

.lessons-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.lessons-layout:hover .lessons-visual img { transform: scale(1.04); }

.lessons-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 40%, rgba(26, 46, 26, 0.85) 100%);
}

.lessons-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem 5rem 3rem;
  background: var(--color-forest);
}

.lessons-content .section-label {
  margin-bottom: 1.5rem;
  color: var(--color-gold);
}

.lessons-content h2 {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  color: #fff;
  margin-bottom: 1.5rem;
}

.lessons-content p {
  color: rgba(255,255,255,0.8);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.lessons-offerings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--color-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.lesson-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(4px); }

.lesson-item .lesson-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.lesson-item .lesson-info h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: #fff;
}

.lesson-item .lesson-info p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
  line-height: 1.4;
}

/* ============================================
   MEMBERSHIPS SECTION
   ============================================ */
#membership-section {
  background: var(--color-mist);
}

.membership-header {
  text-align: center;
  margin-bottom: 4rem;
}

.membership-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.membership-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.membership-table thead tr {
  background: var(--color-forest);
  color: #fff;
}

.membership-table thead th,
.membership-table thead td {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.membership-table thead th:first-child,
.membership-table thead td:first-child { color: var(--color-gold-light); }

.membership-table tbody tr {
  border-bottom: 1px solid rgba(26, 46, 26, 0.08);
  transition: background var(--transition-fast);
}

.membership-table tbody tr:hover { background: rgba(26, 46, 26, 0.03); }

.membership-table tbody td {
  padding: 1.1rem 1.5rem;
  color: var(--color-charcoal);
}

.membership-table tbody td:first-child {
  font-weight: 500;
  color: var(--color-forest);
}

.membership-table tbody td .price-cell {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-forest);
}

/* Notes block — annotations below the membership table */
.membership-notes {
  margin-top: 1.5rem;
  padding: 1rem 0 0;
}
.membership-notes p {
  margin: 0 0 0.4rem;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-stone);
  line-height: 1.5;
}
.membership-notes p:last-child { margin-bottom: 0; }

/* ============================================
   NEWS SECTION
   ============================================ */
#news-section {
  background: var(--color-cream);
}

.news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4rem;
}

.news-header h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--color-forest);
}

.news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.5rem;
  justify-content: center;
}
/* 1 post only: single centered card (featured variant, full-size) */
.news-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 520px);
}
/* 2 posts only: featured + 1 small, centered */
.news-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.news-empty {
  text-align: center;
  color: var(--color-stone);
  font-size: 1rem;
  padding: 3rem 0;
  font-style: italic;
}

/* ── News Archive Block (für /de/news und /en/news) ── */
.gc-news-archive__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.gc-news-archive__header h2 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  color: var(--color-forest);
  margin-top: 0.75rem;
}
.gc-news-archive__subtext {
  font-size: 1.05rem;
  color: var(--color-stone);
  max-width: 600px;
  margin: 1rem auto 0;
  line-height: 1.7;
}

.gc-news-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-content: center;  /* centers grid when fewer items than columns */
}
/* 1 post only: single centered card with max-width (avoids stretching wide) */
.gc-news-archive__grid:has(> :only-child) {
  grid-template-columns: minmax(0, 420px);
}
/* 2 posts only: show both centered side-by-side */
.gc-news-archive__grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 420px));
}

.gc-news-archive__card {
  background: #fff;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  display: flex;
  flex-direction: column;
}
.gc-news-archive__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.gc-news-archive__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.gc-news-archive__image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-pine), var(--color-sage));
}
.gc-news-archive__image--fallback {
  min-height: 220px;
}
.gc-news-archive__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gc-news-archive__card:hover .gc-news-archive__image img { transform: scale(1.04); }

.gc-news-archive__body {
  padding: 1.5rem 1.75rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gc-news-archive__date {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.65rem;
}

.gc-news-archive__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-forest);
  margin-bottom: 0.75rem;
}

.gc-news-archive__excerpt {
  font-size: 0.9rem;
  color: var(--color-stone);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  flex: 1;
}

.gc-news-archive__readmore {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: color var(--transition-fast);
}
.gc-news-archive__card:hover .gc-news-archive__readmore { color: var(--color-gold-light); }

.gc-news-archive__empty {
  text-align: center;
  color: var(--color-stone);
  font-size: 1rem;
  padding: 4rem 0;
  font-style: italic;
}

/* Pagination */
.gc-news-archive__pagination {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.gc-news-archive__pag-num,
.gc-news-archive__pag-link {
  padding: 0.65rem 1rem;
  min-width: 40px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone);
  background: transparent;
  border: 1px solid rgba(26,46,26,0.1);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.gc-news-archive__pag-num:hover,
.gc-news-archive__pag-link:hover {
  border-color: var(--color-gold);
  color: var(--color-forest);
}
.gc-news-archive__pag-num.is-current {
  background: var(--color-forest);
  color: #fff;
  border-color: var(--color-forest);
}

@media (max-width: 1100px) {
  .gc-news-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gc-news-archive__grid { grid-template-columns: 1fr; }
}

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.news-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.news-card.featured .news-card-image { aspect-ratio: 16/10; }

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-card:hover .news-card-image img { transform: scale(1.05); }

.news-card-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card-date {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}

.news-card h3 {
  font-size: 1.3rem;
  color: var(--color-forest);
  margin-bottom: 0.75rem;
  flex: 1;
}

.news-card.small h3 { font-size: 1.05rem; }

.news-card p {
  font-size: 0.85rem;
  color: var(--color-stone);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.news-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-forest);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.news-read-more::after {
  content: '→';
  transition: transform var(--transition-fast);
}

.news-card:hover .news-read-more { color: var(--color-gold); }
.news-card:hover .news-read-more::after { transform: translateX(4px); }

/* ============================================
   WEBCAM / PANORAMA SECTION
   ============================================ */
#webcam-section {
  background: var(--color-forest);
  padding: 5rem 0;
}

.webcam-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: center;
}
/* Frame-only variant — used on subpages where the gc/webcam block has no
   label/heading/text/button and the page already provides its own heading.
   Collapses to a single column and shrinks the section padding so the embed
   sits cleanly in the page flow instead of looking like a hero section. */
.webcam-section--frame-only { padding: 1.5rem 0; background: transparent; color: inherit; }
.webcam-inner--frame-only   { grid-template-columns: 1fr; gap: 0; }
.webcam-section--frame-only .webcam-frame-wrap { max-width: 800px; margin-inline: auto; }

.webcam-text .section-label { margin-bottom: 1.5rem; }

.webcam-text h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  color: #fff;
  margin-bottom: 1.5rem;
}

.webcam-text p {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* Frame + refresh-note are now wrapped together so they sit in the same grid
   column on desktop (refresh-note always directly under the frame, never
   auto-placed into an empty row-1-col-1 cell). */
.webcam-frame-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.webcam-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.3);
  overflow: hidden;
  border: 1px solid rgba(184, 150, 62, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ─────────────────────────────────────────────────────────────
   Shared "Kleingedruckt" (fine-print) style for DARK backgrounds.
   Uses Customizer color "Mist" (--color-mist) with subtle opacity.
   Applied via utility class .gc-finehint-dark, OR directly in rules
   for known elements like webcam-refresh, weather-disclaimer, etc.
   ───────────────────────────────────────────────────────────── */
.gc-finehint-dark,
.webcam-refresh-note,
.weather-disclaimer,
.gc-greenfee__disclaimer,
.gc-newsletter--dark .gc-newsletter__disclaimer {
  color: var(--color-mist);
  opacity: 0.65;
  letter-spacing: 0.04em;
}

.webcam-refresh-note {
  font-size: 0.75rem;
  margin: 0;            /* gap is now provided by .webcam-frame-wrap flex gap */
  text-align: right;    /* aligned right under the frame — feels natural like a photo credit */
}
.gc-greenfee__disclaimer {
  font-size: 0.78rem;
  margin-top: 2rem;
  text-align: center;
}

.webcam-frame iframe,
.webcam-frame img,
.webcam-iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
  background: rgba(0, 0, 0, 0.3);
}
/* Webcam iframe specifically — make sure it covers the frame even when the
   embedded page has its own background or padding. */
.webcam-iframe {
  position: absolute;
  inset: 0;
}
.webcam-frame { position: relative; }

.webcam-overlay-tag {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(26, 46, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.webcam-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-live);
  animation: livePulse 2s ease-in-out infinite;
}

.webcam-overlay-tag span {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ============================================
   CONTACT / FOOTER CTA
   ============================================ */
#contact-cta {
  background: var(--color-gold);
  padding: 6rem 0;
  overflow: hidden;
}

.contact-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.contact-cta-text {
  flex: 1;
  min-width: 0;
}

.contact-cta-text h2 {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  color: #fff;
  word-break: break-word;
}

.contact-cta-text p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  margin-top: 0.75rem;
}

/* Buttons column — wraps the InnerBlock gc/cta-button children. Sits in the
   third column of .contact-cta-inner. Buttons STACK VERTICALLY (equal width,
   centred labels) so adding a 3rd/4th button never squishes the heading and
   the text stays readable. flex-shrink:0 protects the heading column. */
.contact-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  flex-shrink: 0;
}

/* CTA buttons reuse the homepage hero button themes (.btn-primary / .btn-outline /
   .btn-dark). The CTA sits on a GOLD background though, so two of those need a
   little tuning here to stay crisp:
   - .btn-primary (gold gradient) would blend into the gold bg → add a defining
     shadow + subtle light edge so it reads as a raised gold button.
   - .btn-outline is white (built for the dark hero); strengthen the border a touch
     so the outline is clearly visible on gold. */
.contact-cta-actions .btn-primary {
  box-shadow: 0 6px 18px rgba(26, 46, 26, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.contact-cta-actions .btn-primary:hover {
  box-shadow: 0 10px 26px rgba(26, 46, 26, 0.24);
}
.contact-cta-actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
}
.contact-cta-actions .btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255,255,255,0.85);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  margin-top: 2px;
}

.contact-item a {
  color: inherit;
  transition: opacity var(--transition-fast);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.contact-item a:hover { opacity: 1; }

/* ============================================
   FOOTER
   ============================================ */
#site-footer {
  background: var(--color-charcoal);
  padding: 5rem 0 2.5rem;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand {
  flex: 1 1 250px;
  max-width: 320px;
}
.footer-col {
  flex: 1 1 130px;
}
/* When the footer has no link columns (only the brand block), let the brand
   breathe a little wider so the footer doesn't look lopsided. */
.footer-grid > .footer-brand:only-child {
  max-width: 560px;
}

.footer-brand img {
  height: auto;
  max-height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.6;
  margin-bottom: 1.5rem;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.8;
  max-width: 280px;
  margin-bottom: 2rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer-social a:hover {
  transform: translateY(-2px);
}

.footer-social a:hover {
  background: var(--color-gold);
  color: #fff;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 1.5rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col ul li a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--transition-fast);
}

.footer-col ul li a:hover { color: rgba(255,255,255,0.8); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
}

.footer-bottom-links {
  display: flex;
  gap: 2rem;
}

.footer-bottom-links a {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.2);
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover { color: rgba(255,255,255,0.5); }

/* ============================================
   PAGE TEMPLATE
   ============================================ */
.page-hero {
  background: var(--color-forest);
  padding: 10rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,74,45,0.8), rgba(26,46,26,0.95));
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-breadcrumb a {
  color: var(--color-gold-light);
  transition: color var(--transition-fast);
}

.page-breadcrumb a:hover {
  color: #fff;
}

.page-breadcrumb .sep {
  color: rgba(255,255,255,0.25);
}

.page-breadcrumb .current {
  color: rgba(255,255,255,0.5);
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  color: #fff;
  line-height: 1;
}

.page-hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  margin-top: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.page-container {
  max-width: 900px;
}

/* ============================================
   GUTENBERG BLOCK STYLING (entry-content)
   ============================================ */
.entry-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-stone);
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--color-forest);
  margin: 3rem 0 1.25rem;
}

.entry-content h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--color-forest);
  margin: 2.5rem 0 1rem;
}

.entry-content h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-forest);
  margin: 2rem 0 0.75rem;
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content a {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(184,150,62,0.3);
  transition: border-color var(--transition-fast);
}

.entry-content a:hover {
  border-color: var(--color-gold);
}

.entry-content ul,
.entry-content ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-gold);
  background: rgba(26,46,26,0.03);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-forest);
  line-height: 1.6;
}

.entry-content blockquote p {
  margin-bottom: 0;
}

.entry-content img {
  margin: 2rem 0;
  border-radius: var(--radius-lg);
}

.entry-content figure {
  margin: 2.5rem 0;
}
.entry-content figure img {
  border-radius: var(--radius-lg);
}

.entry-content figcaption {
  font-size: 0.78rem;
  color: var(--color-stone);
  text-align: center;
  margin-top: 0.75rem;
  letter-spacing: 0.05em;
}

.entry-content table,
.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9rem;
}

.entry-content table thead th,
.entry-content .wp-block-table table thead th {
  background: var(--color-forest);
  color: #fff;
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.entry-content table tbody td,
.entry-content .wp-block-table table tbody td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(26,46,26,0.08);
  color: var(--color-charcoal);
}

.entry-content table tbody tr:hover,
.entry-content .wp-block-table table tbody tr:hover {
  background: rgba(26,46,26,0.03);
}

.entry-content hr,
.entry-content .wp-block-separator {
  border: none;
  height: 1px;
  background: rgba(26,46,26,0.1);
  margin: 3rem 0;
}

.entry-content .wp-block-button__link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.1rem 2.5rem;
  background: var(--color-forest);
  color: #fff;
  border: none;
  border-bottom: none;
  transition: background var(--transition-fast);
}

.entry-content .wp-block-button__link:hover {
  background: var(--color-pine);
  border-bottom: none;
}

.entry-content .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--color-forest);
  color: var(--color-forest);
}

.entry-content .is-style-outline .wp-block-button__link:hover {
  background: var(--color-forest);
  color: #fff;
}

/* Wide / full width blocks */
.entry-content .alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Columns block */
.entry-content .wp-block-columns {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
}

.entry-content .wp-block-column {
  flex: 1;
}

/* Cover block */
.entry-content .wp-block-cover {
  margin: 2.5rem 0;
  min-height: 350px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Gallery block */
.entry-content .wp-block-gallery {
  margin: 2.5rem 0;
  gap: 0.75rem;
}

/* Buttons block (group of core/buttons) — spacing + wrap */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

/* Pullquote block — gold rules + display font, distinct from the left-bar quote */
.entry-content .wp-block-pullquote {
  border: none;
  border-top: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  padding: 2.5rem 1rem;
  margin: 3rem 0;
  text-align: center;
  background: transparent;
}
.entry-content .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
.entry-content .wp-block-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-style: italic;
  color: var(--color-forest);
  line-height: 1.5;
  margin: 0;
}
.entry-content .wp-block-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* Code / preformatted — dark "terminal" card; inline <code> gets a subtle chip */
.entry-content .wp-block-code,
.entry-content pre.wp-block-preformatted {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  margin: 2rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
}
.entry-content code {
  background: rgba(26,46,26,0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.entry-content .wp-block-code code {
  background: transparent;
  padding: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
/* ── Page Fade Transition ── */
@keyframes gcPageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: gcPageFadeIn 0.4s ease-out;
}

/* ── Loading Overlay (erscheint beim Seitenwechsel) ── */
.gc-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--color-forest, #1a2e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
body.gc-page-leaving .gc-page-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Gold progress bar am oberen Rand — eigenes Element, immer oberhalb des Overlays */
.gc-page-loader__bar {
  position: fixed;
  top: 0; left: 0;
  right: 0;
  height: 3px;
  z-index: 99999;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
body.gc-page-leaving .gc-page-loader__bar {
  opacity: 1;
}
.gc-page-loader__bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 35%;
  background: var(--color-gold, #a88935);
  box-shadow: 0 0 10px rgba(184,150,62,0.5);
  animation: gcLoaderBar 0.9s ease-in-out infinite;
  transform: translateX(-100%);
}
@keyframes gcLoaderBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Center logo (image) or text fallback with breathing animation */
.gc-page-loader__img,
.gc-page-loader__logo {
  opacity: 0;
  animation: gcLoaderLogoFade 0.8s 0.15s ease-out forwards, gcLoaderBreathe 2.4s 0.8s ease-in-out infinite;
}
.gc-page-loader__img {
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gc-page-loader__logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--color-text-light, #fff);
  letter-spacing: 0;
  text-align: center;
}
.gc-page-loader__logo em {
  font-style: italic;
  color: var(--color-gold-light, #d4af5a);
  display: inline-block;
}
.gc-page-loader__sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold, #a88935);
  opacity: 0;
  animation: gcLoaderLogoFade 0.8s 0.25s ease-out forwards;
}
@keyframes gcLoaderLogoFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gcLoaderBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.98); opacity: 0.85; }
}

/* Body wird nicht mehr transparent — Overlay übernimmt */
body.gc-page-leaving {
  overflow: hidden;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .gc-page-loader, .gc-page-loader__logo, .gc-page-loader__sub { transition: none; animation: none; }
  .gc-page-loader__bar::after { animation: none; width: 100%; transform: none; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 0.2; }
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Scroll-reveal classes -- progressive enhancement:
   Content is visible by default. Only hidden when JS is confirmed available.
   CSS-level safety: @keyframes revealFallback fires after 3s so content
   is NEVER permanently invisible, even if JS crashes completely. */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  animation: revealFallback 0s 3s forwards;
}
.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes revealFallback {
  to { opacity: 1; transform: translateY(0); }
}
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ============================================
   THEME COLOR PALETTE — link WP classes to CSS vars
   (Customizer-Änderungen wirken automatisch)
   ============================================ */
/* Inline color marks — used by FSE text-color system */
mark.has-inline-color {
  background: none !important;
  padding: 0;
}
/* High specificity to override dynamic !important rules on parents */
.hero-title mark.has-inline-color,
.contact-cta-text mark.has-inline-color,
h1 mark.has-inline-color,
h2 mark.has-inline-color {
  color: inherit;
}
.hero-title mark.has-gold-light-color,
h1 mark.has-gold-light-color { color: var(--color-gold-light) !important; }
.hero-title mark.has-gold-color,
h1 mark.has-gold-color { color: var(--color-gold) !important; }
h2 mark.has-gold-color { color: var(--color-gold) !important; }
h2 mark.has-gold-light-color { color: var(--color-gold-light) !important; }

/* Fallback: old <em> tags still in DB templates */
.hero-title em { font-style: italic; color: var(--color-gold-light); }
.about-text h2 em { font-style: italic; color: var(--color-gold); }
.contact-cta-text h2 em { font-style: italic; color: var(--color-forest); }
.gc-404-hero h1 em { font-style: italic; color: var(--color-gold-light); }

.has-forest-color { color: var(--color-forest) !important; }
.has-pine-color { color: var(--color-pine) !important; }
.has-sage-color { color: var(--color-sage) !important; }
.has-gold-color { color: var(--color-gold) !important; }
.has-gold-light-color { color: var(--color-gold-light) !important; }
.has-cream-color { color: var(--color-cream) !important; }
.has-mist-color { color: var(--color-mist) !important; }
.has-charcoal-color { color: var(--color-charcoal) !important; }
.has-stone-color { color: var(--color-stone) !important; }
.has-error-color { color: var(--color-error) !important; }
.has-white-color { color: #fff !important; }

.has-forest-background-color { background-color: var(--color-forest) !important; }
.has-pine-background-color { background-color: var(--color-pine) !important; }
.has-sage-background-color { background-color: var(--color-sage) !important; }
.has-gold-background-color { background-color: var(--color-gold) !important; }
.has-gold-light-background-color { background-color: var(--color-gold-light) !important; }
.has-cream-background-color { background-color: var(--color-cream) !important; }
.has-mist-background-color { background-color: var(--color-mist) !important; }
.has-charcoal-background-color { background-color: var(--color-charcoal) !important; }
.has-stone-background-color { background-color: var(--color-stone) !important; }
.has-white-background-color { background-color: #fff !important; }

/* ============================================
   404 PAGE — matches page-hero + content style
   ============================================ */
.gc-404-hero {
  background: var(--color-forest);
  padding: 12rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.gc-404-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,74,45,0.8), rgba(26,46,26,0.95));
}

.gc-404-hero > * {
  position: relative;
}

.gc-404-hero .section-label {
  display: block;
  margin-bottom: 1.5rem;
}

.gc-404-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  color: #fff;
  line-height: 1;
}

/* 404 em styling removed — now uses .has-inline-color system */

.gc-404-body {
  background: var(--color-cream);
  padding: clamp(4rem, 8vw, 6rem) 0;
  text-align: center;
}

.gc-404-body .gc-404-text {
  font-size: 1.1rem;
  color: var(--color-stone);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

.gc-404-body .gc-404-actions {
  margin-top: 2.5rem;
}

.gc-btn-dark .wp-block-button__link {
  background: var(--color-forest) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  transition: background var(--transition-fast);
}

.gc-btn-dark .wp-block-button__link:hover {
  background: var(--color-pine) !important;
}

/* ============================================
   BLOCK LIBRARY — universelle Blöcke
   All colors use CSS variables → Customizer-änderbar
   ============================================ */

/* ── Section Header ── */
.gc-section-header { text-align: center; margin-bottom: 3rem; }
.gc-section-header h2 { font-size: clamp(2rem, 4vw, 3.5rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-section-subtext { font-size: 1.1rem; color: var(--color-stone); max-width: 600px; margin: 1rem auto 0; line-height: 1.8; }

/* ── Text + Image ── */
.gc-text-image__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.gc-text-image--reversed .gc-text-image__grid { direction: rtl; }
.gc-text-image--reversed .gc-text-image__grid > * { direction: ltr; }
.gc-text-image__content h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); }
.gc-text-image__content p { color: var(--color-stone); line-height: 1.8; margin-top: 1.25rem; }
.gc-text-image__visual img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.gc-text-image__placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-pine), var(--color-forest)); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* ── Card Grid ── */
.gc-card-grid__header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gc-card-grid__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-card-grid__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(26,46,26,0.06); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }

/* Card — matches greenfee-card elegance */
.gc-card {
  background: var(--color-cream);
  padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  position: relative;
  transition: background var(--transition-med);
}
.gc-card:hover { background: var(--color-snow); }
.gc-card__icon { font-size: 1.75rem; margin-bottom: 1.25rem; line-height: 1; }
.gc-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  color: var(--color-forest);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.gc-card__text {
  font-size: 0.85rem;
  color: var(--color-stone);
  line-height: 1.8;
}
.gc-card__link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: color var(--transition-fast);
}
.gc-card__link:hover { color: var(--color-gold-light); }

/* Card Grid Dark — forest background, light cards */
.gc-card-grid--dark { background: var(--color-forest); }
.gc-card-grid--dark .gc-card-grid__header h2 { color: var(--color-text-light, #fff); }
.gc-card-grid--dark .gc-card-grid__header .section-label { color: var(--color-gold); }
.gc-card-grid--dark .gc-card-grid__items { background: rgba(184,150,62,0.15); }
.gc-card-grid--dark .gc-card { background: var(--color-forest); }
.gc-card-grid--dark .gc-card:hover { background: var(--color-pine); }
.gc-card-grid--dark .gc-card__title { color: var(--color-text-light, #fff); }
.gc-card-grid--dark .gc-card__text { color: rgba(255,255,255,0.6); }
.gc-card-grid--dark .gc-card__icon { opacity: 0.8; }

/* ── FAQ ── */
.gc-faq + .gc-faq { padding-top: 0; }
.gc-faq__header { text-align: center; margin-bottom: 3rem; }
.gc-faq__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-faq-item {
  background: #fff;
  border: 1px solid rgba(26,46,26,0.08);
  border-radius: var(--radius-md);
  padding: 0 1.5rem;
  margin-bottom: 0.75rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.gc-faq-item:hover { border-color: rgba(184, 150, 62, 0.3); box-shadow: var(--shadow-sm); }
.gc-faq-item__q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.25rem 0; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-forest); text-align: left; gap: 1rem; }
.gc-faq-item__q svg { flex-shrink: 0; transition: transform 0.3s ease; color: var(--color-gold); }
.gc-faq-item__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.gc-faq-item__q[aria-expanded="true"] { color: var(--color-gold); }
.gc-faq-item__a { padding: 0 0 1.25rem; color: var(--color-stone); line-height: 1.8; font-size: 0.95rem; }
.gc-faq-item__a[hidden] { display: none !important; }

/* FAQ editor styles */
.gc-faq-item__q-edit { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-forest); padding: 1rem 0 0.5rem; font-weight: 400; }
.gc-faq-item__a-edit { color: var(--color-stone); padding: 0 0 1rem; border-bottom: 1px solid rgba(26,46,26,0.08); }

/* ── Team Grid ── */
.gc-team__header { text-align: center; margin-bottom: 3rem; }
.gc-team__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.gc-team-member { text-align: center; }
.gc-team-member__img { width: 100%; aspect-ratio: 3/4; overflow: hidden; margin-bottom: 1.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gc-team-member__img img { width: 100%; height: 100%; object-fit: cover; }
.gc-team-member__placeholder { width: 100%; height: 100%; background: var(--color-mist); display: flex; align-items: center; justify-content: center; color: var(--color-stone); }
.gc-team-member__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-forest); }
.gc-team-member__role { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-top: 0.25rem; }
.gc-team-member__desc { font-size: 0.85rem; color: var(--color-stone); line-height: 1.7; margin-top: 0.75rem; }

/* ── Stats Bar ── */
.gc-stats-bar { padding: 3rem 0; border-top: 1px solid rgba(26,46,26,0.06); border-bottom: 1px solid rgba(26,46,26,0.06); }
.gc-stats-bar__items { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; }
.gc-stat { text-align: center; }
.gc-stat__num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; color: var(--color-forest); line-height: 1; }
.gc-stat__label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin-top: 0.5rem; }

/* Stats Bar Dark */
.gc-stats-bar--dark { background: var(--color-forest); border-color: rgba(184,150,62,0.2); }
.gc-stats-bar--dark .gc-stat__num { color: #fff; }

/* ── CTA Banner ── */
.gc-cta-banner { padding: clamp(4rem, 8vw, 6rem) 0; color: #fff; }
.gc-cta-banner__heading { font-size: clamp(2rem, 4vw, 3.5rem); color: #fff; }
.gc-cta-banner__text { font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 600px; margin: 1rem auto 0; line-height: 1.7; }
.gc-cta-banner--forest .btn-dark { background: var(--color-gold); }
.gc-cta-banner--pine .btn-dark { background: var(--color-gold); }

/* ── Quote / Testimonial ── */
.gc-quote { text-align: center; max-width: 800px; margin: 3rem auto; padding: 3rem 2rem; position: relative; }
.gc-quote::before { content: '\201C'; position: absolute; top: -0.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 8rem; color: var(--color-gold); opacity: 0.15; line-height: 1; pointer-events: none; }
.gc-quote__text { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-style: italic; color: var(--color-forest); line-height: 1.6; position: relative; }
.gc-quote__author { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.gc-quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.gc-quote__name { display: block; font-family: var(--font-body); font-size: 0.9rem; color: var(--color-forest); }
.gc-quote__role { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-top: 0.15rem; }

/* ── Image Gallery ── */
.gc-gallery__header { text-align: center; margin-bottom: 3rem; }
.gc-gallery__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-gallery__grid { display: grid; gap: 0.5rem; }
.gc-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gc-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gc-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
.gc-gallery-img { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gc-gallery-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-med); }
.gc-gallery-img:hover img { transform: scale(1.03); }
.gc-gallery-img figcaption { font-size: 0.75rem; color: var(--color-stone); padding: 0.5rem 0; letter-spacing: 0.03em; }

/* ── Divider ── */
.gc-divider { padding: 2rem 0; }
.gc-divider hr { border: none; height: 1px; background: rgba(26,46,26,0.08); }
.gc-divider--gold hr { height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); }
.gc-divider--dots hr { background: none; border-bottom: 2px dotted var(--color-gold); opacity: 0.4; }

/* ── Icon List ── */
.gc-icon-list { max-width: 700px; }
.gc-icon-list__header h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--color-forest); margin-top: 0.5rem; }
.gc-icon-list__items { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.gc-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(26,46,26,0.05);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  line-height: 1.6;
}
.gc-icon-list-item__icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  color: var(--color-gold);
  font-size: 1rem;
  margin-top: 0.15rem;
}

/* ── Pricing Table ── */
.gc-pricing__header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gc-pricing__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(26,46,26,0.06); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.gc-pricing-card {
  background: var(--color-cream);
  padding: clamp(2rem, 3vw, 3rem);
  text-align: center;
  position: relative;
  transition: background var(--transition-med);
}
.gc-pricing-card:hover { background: var(--color-snow); }
.gc-pricing-card--featured {
  background: var(--color-forest);
  color: var(--color-text-light, #fff);
}
.gc-pricing-card--featured:hover { background: var(--color-pine); }
.gc-pricing-card__badge {
  position: absolute;
  top: 0; right: 2rem;
  background: var(--color-gold);
  padding: 0.35rem 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.gc-pricing-card__title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
}
.gc-pricing-card--featured .gc-pricing-card__title { color: var(--color-gold-light); }
.gc-pricing-card__amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-forest);
}
.gc-pricing-card--featured .gc-pricing-card__amount { color: var(--color-text-light, #fff); }
.gc-pricing-card__period {
  font-size: 0.8rem;
  color: var(--color-stone);
  margin-left: 0.25rem;
}
.gc-pricing-card--featured .gc-pricing-card__period { color: rgba(255,255,255,0.6); }
.gc-pricing-card__features {
  margin: 1.5rem 0;
  font-size: 0.85rem;
  color: var(--color-stone);
  line-height: 2;
}
.gc-pricing-card--featured .gc-pricing-card__features { color: rgba(255,255,255,0.7); }

/* ── Tournament Calendar (iframe-based) ── */
.gc-tournament-cal__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gc-tournament-cal__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }

.gc-tournament-cal__iframe-wrapper {
  position: relative;
  width: 100%;
  background: #fafafa;
  border: 1px solid rgba(26,46,26,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.gc-tournament-cal__iframe {
  display: block;
  width: 100%;
  min-height: 900px;
  height: 900px;
  border: 0;
  background: #fff;
}

/* Mobile: give it more scroll space since PCCaddie reflows vertically */
@media (max-width: 768px) {
  .gc-tournament-cal__iframe {
    min-height: 1100px;
    height: 1100px;
  }
}

/* Noscript / iframe-blocked fallback */
.gc-tournament-cal__fallback {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-stone);
}
.gc-tournament-cal__fallback p { margin: 0 0 1rem; }

/* Disclaimer below iframe */
.gc-tournament-cal__disclaimer {
  font-size: 0.7rem;
  color: rgba(26,46,26,0.35);
  text-align: center;
  margin-top: 1.5rem;
  letter-spacing: 0.02em;
  font-style: italic;
  line-height: 1.6;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.gc-tournament-cal__disclaimer a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.gc-tournament-cal__disclaimer a:hover {
  color: var(--color-forest);
}

/* ── Newsletter Block ── */
.gc-newsletter__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gc-newsletter__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-newsletter__subtext { font-size: 1.05rem; color: var(--color-stone); max-width: 560px; margin: 1rem auto 0; line-height: 1.7; text-align: center; }

.gc-newsletter__body { margin-top: 2rem; }
.gc-newsletter__hint { color: var(--color-stone); font-size: 0.9rem; text-align: center; padding: 2rem; background: rgba(26,46,26,0.03); border-radius: var(--radius-md); }
.gc-newsletter__disclaimer { font-size: 0.75rem; color: var(--color-stone); opacity: 0.7; text-align: center; margin-top: 1.25rem; line-height: 1.6; }

/* Dark variant */
.gc-newsletter--dark { background: var(--color-forest); }
.gc-newsletter--dark .gc-newsletter__header h2 { color: #fff; }
.gc-newsletter--dark .gc-newsletter__subtext { color: rgba(255,255,255,0.6); }
.gc-newsletter--dark .gc-newsletter__hint { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); }
/* .gc-newsletter--dark .gc-newsletter__disclaimer → color set via shared .gc-finehint-dark rule */

/* Style common Newsletter plugin forms (Mailchimp for WordPress + MailPoet) */
.gc-newsletter .mc4wp-form,
.gc-newsletter .mailpoet_form,
.gc-newsletter form {
  max-width: 100%;
}
.gc-newsletter input[type="email"],
.gc-newsletter input[type="text"] {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  padding: 0.9rem 1rem !important;
  border: 1px solid rgba(26,46,26,0.12) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  color: var(--color-charcoal) !important;
  width: 100% !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  -webkit-appearance: none !important;
}
.gc-newsletter input[type="email"]:focus,
.gc-newsletter input[type="text"]:focus {
  outline: none !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(184,150,62,0.1) !important;
}
.gc-newsletter input[type="submit"],
.gc-newsletter button[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2rem !important;
  background: var(--color-forest) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: background var(--transition-fast) !important;
  width: auto !important;
  margin-top: 0.5rem !important;
}
.gc-newsletter input[type="submit"]:hover,
.gc-newsletter button[type="submit"]:hover {
  background: var(--color-pine) !important;
}

/* Dark variant inputs */
.gc-newsletter--dark input[type="email"],
.gc-newsletter--dark input[type="text"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.gc-newsletter--dark input[type="email"]::placeholder,
.gc-newsletter--dark input[type="text"]::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
.gc-newsletter--dark input[type="submit"],
.gc-newsletter--dark button[type="submit"] {
  background: var(--color-gold) !important;
}
.gc-newsletter--dark input[type="submit"]:hover,
.gc-newsletter--dark button[type="submit"]:hover {
  background: var(--color-gold-light) !important;
}

/* Horizontal layout if inputs are in same row (common for newsletter) */
.gc-newsletter form .mc4wp-form-fields,
.gc-newsletter form .mailpoet_paragraph {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.gc-newsletter form input[type="email"],
.gc-newsletter form input[type="text"] {
  flex: 1 1 250px;
}
@media (max-width: 480px) {
  .gc-newsletter form .mc4wp-form-fields,
  .gc-newsletter form .mailpoet_paragraph { flex-direction: column; }
}

/* ── Contact Form (WPForms wrapper) ── */
.gc-contact-form__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gc-contact-form__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); margin-top: 0.75rem; }
.gc-contact-form__subtext { font-size: 1.05rem; color: var(--color-stone); max-width: 600px; margin: 1rem auto 0; line-height: 1.7; }

/* Dark variant */
.gc-contact-form--dark { background: var(--color-forest); }
.gc-contact-form--dark .gc-contact-form__header h2 { color: #fff; }
.gc-contact-form--dark .gc-contact-form__subtext { color: rgba(255,255,255,0.6); }

/* Style WPForms to match theme — full override */
.gc-contact-form .wpforms-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* Labels */
.gc-contact-form .wpforms-form .wpforms-field-label,
.gc-contact-form .wpforms-form label:not(.wpforms-field-label-inline) {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-forest) !important;
  margin-bottom: 0.5rem !important;
}
.gc-contact-form .wpforms-form .wpforms-field-sublabel {
  font-size: 0.7rem !important;
  color: var(--color-stone) !important;
}

/* All inputs */
.gc-contact-form .wpforms-form input[type="text"],
.gc-contact-form .wpforms-form input[type="email"],
.gc-contact-form .wpforms-form input[type="tel"],
.gc-contact-form .wpforms-form input[type="url"],
.gc-contact-form .wpforms-form input[type="number"],
.gc-contact-form .wpforms-form input[type="date"],
.gc-contact-form .wpforms-form select,
.gc-contact-form .wpforms-form textarea {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid rgba(26,46,26,0.12) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  color: var(--color-charcoal) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  width: 100% !important;
  -webkit-appearance: none !important;
}
.gc-contact-form .wpforms-form input:focus,
.gc-contact-form .wpforms-form select:focus,
.gc-contact-form .wpforms-form textarea:focus {
  outline: none !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(184,150,62,0.1) !important;
}
.gc-contact-form .wpforms-form input::placeholder,
.gc-contact-form .wpforms-form textarea::placeholder {
  color: var(--color-stone) !important;
  opacity: 0.5 !important;
}
.gc-contact-form .wpforms-form textarea { min-height: 150px !important; resize: vertical !important; }
.gc-contact-form .wpforms-form .wpforms-field { margin-bottom: 1.25rem !important; }

/* Submit button */
.gc-contact-form .wpforms-form .wpforms-submit-container { margin-top: 1.5rem !important; }
.gc-contact-form .wpforms-form button[type="submit"],
.gc-contact-form .wpforms-form .wpforms-submit {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem !important;
  background: var(--color-forest) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: background var(--transition-fast) !important;
  width: auto !important;
}
.gc-contact-form .wpforms-form button[type="submit"]:hover,
.gc-contact-form .wpforms-form .wpforms-submit:hover { background: var(--color-pine) !important; }
.gc-contact-form .wpforms-form .wpforms-required-label { color: var(--color-gold) !important; }

/* Checkboxes & GDPR */
.gc-contact-form .wpforms-form .wpforms-field-gdpr-checkbox label,
.gc-contact-form .wpforms-form .wpforms-field-checkbox label,
.gc-contact-form .wpforms-form .wpforms-field-label-inline {
  font-size: 0.8rem !important;
  color: var(--color-stone) !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* Confirmation message */
.gc-contact-form .wpforms-confirmation-container-full {
  background: rgba(26,46,26,0.04) !important;
  border: 1px solid rgba(26,46,26,0.1) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2rem !important;
  color: var(--color-forest) !important;
}

/* ─── Dark variant ─── */
.gc-contact-form--dark .gc-contact-form__header .section-label { color: var(--color-gold) !important; }
.gc-contact-form--dark .gc-contact-form__header h2 { color: #fff !important; }
.gc-contact-form--dark .gc-contact-form__subtext { color: rgba(255,255,255,0.6) !important; }

.gc-contact-form--dark .wpforms-form .wpforms-field-label,
.gc-contact-form--dark .wpforms-form label { color: rgba(255,255,255,0.7) !important; }
.gc-contact-form--dark .wpforms-form .wpforms-field-sublabel,
.gc-contact-form--dark .wpforms-form .wpforms-field-description,
.gc-contact-form--dark .wpforms-form .wpforms-field-medium-editor { color: rgba(255,255,255,0.4) !important; }

.gc-contact-form--dark .wpforms-form input,
.gc-contact-form--dark .wpforms-form select,
.gc-contact-form--dark .wpforms-form textarea {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.gc-contact-form--dark .wpforms-form input::placeholder,
.gc-contact-form--dark .wpforms-form textarea::placeholder { color: rgba(255,255,255,0.3) !important; }
.gc-contact-form--dark .wpforms-form input:focus,
.gc-contact-form--dark .wpforms-form select:focus,
.gc-contact-form--dark .wpforms-form textarea:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(184,150,62,0.15) !important;
}
.gc-contact-form--dark .wpforms-form button[type="submit"],
.gc-contact-form--dark .wpforms-form .wpforms-submit { background: var(--color-gold) !important; }
.gc-contact-form--dark .wpforms-form button[type="submit"]:hover,
.gc-contact-form--dark .wpforms-form .wpforms-submit:hover { background: var(--color-gold-light) !important; }
.gc-contact-form--dark .wpforms-form .wpforms-required-label { color: var(--color-gold-light) !important; }
.gc-contact-form--dark .wpforms-form .wpforms-field-gdpr-checkbox label,
.gc-contact-form--dark .wpforms-form .wpforms-field-checkbox label,
.gc-contact-form--dark .wpforms-form .wpforms-field-label-inline { color: rgba(255,255,255,0.5) !important; }
.gc-contact-form--dark .wpforms-confirmation-container-full {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* ── Map Embed ── */
.gc-map__header { text-align: center; margin-bottom: 2rem; }
.gc-map__header h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-forest); }
.gc-map__frame { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.gc-map__frame iframe { display: block; }
.gc-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 350px;
  background: var(--color-mist);
  color: var(--color-stone);
  text-align: center;
  border-radius: var(--radius-lg);
}
.gc-map__placeholder svg { color: var(--color-gold); opacity: 0.5; }

/* ============================================
   RESPONSIVE — TABLET 1100px
   ============================================ */
@media (max-width: 1100px) {
  :root { --gutter: 2rem; }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-img-accent { display: none; }
  .about-visual { max-width: 500px; margin: 0 auto; width: 100%; }

  .greenfee-grid { grid-template-columns: 1fr; gap: 2px; }

  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card.featured { grid-column: 1 / -1; }

  .footer-grid { gap: 2.5rem; }
  .footer-brand { flex: 1 1 100%; max-width: none; }

  .membership-table-wrap { overflow-x: auto; }
}

/* ============================================
   RESPONSIVE — TABLET 900px
   ============================================ */
@media (max-width: 900px) {
  .hero-meta { display: none; }

  .about-grid { gap: 2.5rem; }

  .course-intro { grid-template-columns: 1fr; gap: 3rem; }
  .course-sticky { position: static; top: auto; }
  .holes-grid { grid-template-columns: repeat(3, 1fr); }

  .lessons-layout { grid-template-columns: 1fr; }
  .lessons-visual {
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 280px;
    max-height: 380px;
    overflow: hidden;
  }
  .lessons-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Remove fading overlay on stacked layout */
  .lessons-visual-overlay { display: none; }
  .lessons-content { padding: 3rem 2rem; }

  .webcam-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .webcam-text { text-align: center; }
  .webcam-text .section-label { display: block; margin: 0 auto 1.5rem; }

  .contact-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .greenfee-card { padding: 2rem 1.75rem; }
}

/* ============================================
   RESPONSIVE — MOBILE 768px
   ============================================ */
@media (max-width: 768px) {
  :root { --gutter: 2rem; }

  /* ---- PAGE TEMPLATE ---- */
  .page-hero { padding: 8rem 0 3.5rem; }
  .page-hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .page-breadcrumb { flex-wrap: wrap; gap: 0.35rem; }
  .entry-content .wp-block-columns { flex-direction: column; gap: 1.5rem; }
  .entry-content .alignwide { width: 100%; margin-left: 0; }

  /* ---- HEADER / NAV ---- */
  #site-header {
    display: flex;
    padding: 1rem var(--gutter);
    gap: 0.75rem;
    justify-content: space-between;
  }
  #primary-navigation { display: none; }   /* desktop nav hidden on mobile */
  .desktop-language-switcher { display: none; }
  .menu-toggle { display: flex; }          /* hamburger visible on mobile */
  .site-logo img { max-height: 56px; max-width: 140px; margin-top: -14px; margin-bottom: -14px; }
  #site-header.scrolled .site-logo img { max-height: 48px; max-width: 120px; margin-top: -12px; margin-bottom: -12px; }
  body.home #site-header:not(.scrolled) .site-logo img { max-height: 64px; max-width: 170px; margin: 0; }

  /* Mobile header text — sichtbar auf Mobile/Tablet */
  .header-mobile-text {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }

  /* ---- HERO ---- */
  #hero { min-height: 100svh; }
  .hero-title {
    font-size: clamp(2.8rem, 11vw, 5rem);
    line-height: 0.95;
  }
  .hero-subtitle {
    font-size: 0.9rem;
    margin-top: 1.25rem;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 2rem;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-scroll { display: none; }
  .hero-content { padding-bottom: 3rem; }

  /* ---- WEATHER ---- */
  #weather-section { padding: 1.75rem 0; }
  .weather-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .weather-forecast { display: none; }

  /* ---- ABOUT ---- */
  #about-section .about-facts {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  /* ---- GREENFEE ---- */
  .greenfee-card { padding: 2rem 1.5rem; }
  .greenfee-card .price .amount { font-size: 2.8rem; }

  /* ---- HOLES ---- */
  .holes-grid { grid-template-columns: repeat(2, 1fr); }
  .hole-card { padding: 1.25rem; }
  .hole-number { font-size: 2.2rem; }

  /* ---- LESSONS ---- */
  .lessons-content { padding: 2.5rem 1.5rem; }

  /* ---- NEWS ---- */
  .news-grid { grid-template-columns: 1fr; }
  .news-card.featured { grid-column: auto; }
  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* ---- MEMBERSHIP TABLE ---- */
  .membership-table { font-size: 0.75rem; }
  .membership-table thead th,
  .membership-table tbody td { padding: 0.85rem 0.75rem; }
  .membership-table tbody td .price-cell { font-size: 1rem; }

  /* ---- WEBCAM ---- */
  #webcam-section { padding: 3.5rem 0; }

  /* ---- CONTACT CTA ---- */
  #contact-cta { padding: 4rem 0; }
  .contact-cta-inner { gap: 2rem; }
  .contact-cta-text h2 { font-size: clamp(2rem, 8vw, 3rem); }

  /* ---- FOOTER ---- */
  .footer-grid {
    gap: 2rem;
  }
  .footer-brand { flex: 1 1 100%; max-width: none; }
  .footer-col { flex: 1 1 45%; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .footer-bottom-links {
    gap: 1.25rem;
    flex-wrap: wrap;
  }
  .footer-brand p { max-width: 100%; }

  /* ---- BUTTONS — never overflow ---- */
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Block Library responsive */
  .gc-text-image__grid { grid-template-columns: 1fr; gap: 2rem; }
  .gc-text-image--reversed .gc-text-image__grid { direction: ltr; }
  .gc-card-grid__items { grid-template-columns: 1fr; }
  .gc-team__grid { grid-template-columns: 1fr; }
  .gc-stats-bar__items { gap: 2rem; }
  .gc-gallery--cols-3, .gc-gallery--cols-4 { grid-template-columns: 1fr 1fr; }
  .gc-pricing__grid { grid-template-columns: 1fr; }
  .gc-tournament-cal__item { flex-direction: column; align-items: stretch; gap: 1rem; }
  .gc-tournament-cal__link { width: 100%; }
  .gc-tournament-cal__book-btn { width: 100%; justify-content: center; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE 480px
   ============================================ */
@media (max-width: 480px) {
  :root { --gutter: 1rem; }

  .hero-title { font-size: clamp(2.5rem, 12vw, 3.5rem); }

  .about-facts { grid-template-columns: 1fr 1fr; }
  .holes-grid { grid-template-columns: 1fr 1fr; }
  .hole-card { padding: 1rem; }

  .greenfee-card { padding: 1.5rem 1.25rem; }
  .greenfee-card .price .amount { font-size: 2.4rem; }

  .lessons-content { padding: 2rem 1.25rem; }

  .membership-table { font-size: 0.7rem; min-width: 400px; }
  .membership-table thead th,
  .membership-table tbody td { padding: 0.7rem 0.6rem; }

  .contact-cta-inner > div:last-child .btn { width: 100%; justify-content: center; }

  /* Prevent any element wider than screen */
  section, .container, #weather-section, #site-header { max-width: 100vw; }
}

/* ============================================
   GLOBAL OVERFLOW GUARD
   ============================================ */
/* Nothing should ever cause horizontal scroll */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.container {
  width: 100%;
}
/* Ensure all sections are contained */
section, header, footer, main {
  overflow-x: hidden;
}

/* ============================================
   WORDPRESS SPECIFIC
   ============================================ */
.wp-caption { max-width: 100%; }
.alignnone { margin: 0; }
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ============================================
   ACCESSIBILITY: reduce motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   INNERBLOCKS COMPATIBILITY
   Ensures layouts work regardless of whether WordPress
   adds wrapper divs around InnerBlock items or not.
   ============================================ */

/* No extra CSS needed — WordPress SSR InnerBlocks render
   $content directly without wrapper divs on the frontend. */

/* ============================================
   FAQ ACCORDION
   H3 = clickable question, next p = answer (hidden by default)
   Activated via JS on pages with .gc-faq-accordion class
   Note: .gc-faq-item card styling lives in the Block Library section above.
   ============================================ */
.gc-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: var(--color-forest);
  line-height: 1.3;
  margin: 0;
  transition: color 0.2s;
  user-select: none;
}
.gc-faq-question:hover {
  color: var(--color-gold);
}
.gc-faq-question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.3s ease;
  line-height: 1;
}
.gc-faq-item.is-open .gc-faq-question::after {
  content: '−';
}
.gc-faq-item.is-open .gc-faq-question {
  color: var(--color-gold);
}

.gc-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 0 0 0;
}
.gc-faq-item.is-open .gc-faq-answer {
  max-height: 500px;
  padding: 0 0 1.25rem 0;
}
.gc-faq-answer p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-stone);
  margin: 0;
}

/* ── Holes block (roster of hole tiles) ── */
/* ============================================
   HOLES BLOCK — card-style grid (matches gc/speisekarten + gc/greenfee-card)
   ============================================ */
.gc-holes__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.gc-holes__header h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--color-forest);
  margin-top: 0.75rem;
}
.gc-holes__header .section-subtext {
  color: var(--color-stone, #6b6b6b);
  margin-top: 1rem;
}
.gc-holes__grid {
  display: grid;
  gap: 1.5rem;
}
.gc-holes--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gc-holes--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gc-holes--cols-4 { grid-template-columns: repeat(4, 1fr); }

.gc-hole {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(26, 46, 26, 0.08);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gc-hole:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26, 46, 26, 0.08);
  border-color: var(--color-gold, #a88935);
}

.gc-hole__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-mist, #e8ede8);
  overflow: hidden;
  /* Match parent card's top corners so no white/grey shows through */
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.gc-hole__img-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}
/* Reset .entry-content img/figure leaks (margin: 2rem 0 / border-radius) so the
   image fills the media wrapper edge-to-edge and the grey background can't peek through. */
.gc-hole .gc-hole__img-btn img,
.gc-hole .gc-hole__img-placeholder svg,
.gc-hole img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease;
}
.gc-hole:hover .gc-hole__img-btn img { transform: scale(1.05); }
.gc-hole__img-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }
.gc-hole__img-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

/* Number badge — smaller, more refined, sits on top of image */
.gc-hole__number {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: var(--color-gold, #a88935);
  color: #fff;
  font-family: var(--font-display, "Jost", sans-serif);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: "tnum";
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  letter-spacing: 0;
}

/* Body — tighter, includes a subtle gold accent line below the image as visual anchor */
.gc-hole__body {
  padding: 1.1rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  position: relative;
}
/* Subtle gold accent line above body — visual link between image and body,
   matches the gold accents elsewhere in the theme (section-label, dividers) */
.gc-hole__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  width: 1.75rem;
  height: 2px;
  background: var(--color-gold, #a88935);
  opacity: 0.7;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.gc-hole:hover .gc-hole__body::before {
  width: 3rem;
  opacity: 1;
}

.gc-hole__title {
  font-family: var(--font-display, "Jost", sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-forest, #1a2e1a);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.gc-hole__meta {
  font-size: 0.7rem;
  color: var(--color-gold, #a88935);
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  font-feature-settings: "tnum";
}
.gc-hole__desc {
  font-size: 0.85rem;
  color: var(--color-stone, #6b6b6b);
  margin: 0.2rem 0 0;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .gc-holes--cols-3, .gc-holes--cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .gc-holes--cols-2, .gc-holes--cols-3, .gc-holes--cols-4 { grid-template-columns: 1fr; }
  .gc-hole__number { top: 0.6rem; left: 0.6rem; min-width: 1.7rem; height: 1.7rem; font-size: 0.85rem; }
  .gc-hole__body { padding: 1rem 1.25rem 1.1rem; }
  .gc-hole__body::before { left: 1.25rem; }
}

/* ============================================
   BUTTON STYLES — core/button variations registered via register_block_style().
   Selectors target the core/button DOM (.wp-block-button > .wp-block-button__link)
   so users get themed buttons by picking a style from the core Button's toolbar
   dropdown — no custom block needed. CSS mirrors the existing .btn-primary /
   .btn-outline / .btn-dark classes.
   ============================================ */
.wp-block-button.is-style-gc-primary > .wp-block-button__link,
.wp-block-button.is-style-gc-outline > .wp-block-button__link,
.wp-block-button.is-style-gc-dark    > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body, "Jost", sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--radius-md, 6px);
  transition: background-position 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.wp-block-button.is-style-gc-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-gc-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-gc-dark    > .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.1));
}

/* ── GC Primary (gold gradient — same as .btn-primary) ── */
.wp-block-button.is-style-gc-primary > .wp-block-button__link {
  background: linear-gradient(135deg, var(--color-gold, #a88935) 0%, var(--color-gold-light, #d4af5a) 55%, var(--color-gold, #a88935) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
}
.wp-block-button.is-style-gc-primary > .wp-block-button__link:hover { background-position: 100% 50%; }

/* ── GC Outline (transparent with border — same as .btn-outline) ── */
.wp-block-button.is-style-gc-outline > .wp-block-button__link {
  background: transparent;
  color: var(--color-forest, #1a2e1a);
  border: 1px solid var(--color-forest, #1a2e1a);
}
.wp-block-button.is-style-gc-outline > .wp-block-button__link:hover {
  background: rgba(26, 46, 26, 0.06);
  border-color: var(--color-gold, #a88935);
  color: var(--color-gold, #a88935);
}
/* When placed on dark backgrounds (hero etc.), invert to white-on-dark */
.hero-actions .wp-block-button.is-style-gc-outline > .wp-block-button__link,
[class*="dark"] .wp-block-button.is-style-gc-outline > .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-actions .wp-block-button.is-style-gc-outline > .wp-block-button__link:hover,
[class*="dark"] .wp-block-button.is-style-gc-outline > .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

/* ── GC Dark (forest filled — same as .btn-dark) ── */
.wp-block-button.is-style-gc-dark > .wp-block-button__link {
  background: var(--color-forest, #1a2e1a);
  color: #fff;
}
.wp-block-button.is-style-gc-dark > .wp-block-button__link:hover {
  background: var(--color-pine, #2d4a2d);
}

/* ============================================
   PER-BLOCK FONT SIZE — make the Typography → Size control work on gc/ blocks.
   The render_block filter puts the chosen size on the block wrapper and tags it
   .gc-has-fs (only when a size is actually set). These rules let the block's
   RUNNING TEXT inherit that size. Headings keep their designed scale and buttons
   keep their fixed size — exactly like setting a font size on a core Group block.
   !important is justified here because the class only appears on explicit opt-in
   (the editor chose a size), and it must beat the blocks' own nested text rules.
   ============================================ */
.gc-has-fs p,
.gc-has-fs li,
.gc-has-fs figcaption,
.gc-has-fs blockquote {
  font-size: inherit !important;
}

/* ── Lightbox modal (shared, used by Holes for now) ── */
.gc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 20, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.gc-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.gc-lightbox__inner {
  position: relative;
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.gc-lightbox__img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  background: #000;
}
.gc-lightbox__caption {
  color: #f4f1e8;
  font-family: var(--font-display, serif);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.gc-lightbox__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0;
}
.gc-lightbox__close:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  transform: scale(1.05);
}
.gc-lightbox__close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.gc-lightbox__close svg { width: 20px; height: 20px; }

@media (max-width: 700px) {
  .gc-lightbox__close { top: auto; bottom: -3.5rem; right: 50%; transform: translateX(50%); }
  .gc-lightbox__close:hover { transform: translateX(50%) scale(1.05); }
}

body.gc-lightbox-open { overflow: hidden; }

/* ============================================
   SPEISEKARTEN BLOCK (gc/speisekarten + gc/speisekarte-item)
   ============================================ */
.gc-speisekarten { background: var(--color-cream, #faf8f4); }
.gc-speisekarten__header { text-align: center; margin-bottom: 3rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.gc-speisekarten__header .section-subtext { color: var(--color-stone, #6b6b6b); margin-top: 1rem; }
.gc-speisekarten__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.gc-speisekarten__empty {
  text-align: center;
  color: var(--color-stone, #6b6b6b);
  font-style: italic;
  padding: 3rem 1rem;
}

.gc-speisekarte-item {
  background: #fff;
  border: 1px solid rgba(26, 46, 26, 0.08);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gc-speisekarte-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26, 46, 26, 0.08);
  border-color: var(--color-gold, #a88935);
}
.gc-speisekarte-item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-mist, #e8ede8);
  border-bottom: 1px solid rgba(26, 46, 26, 0.1);
}
/* PDF preview: show only the TOP of the page (where logo/title typically lives).
   Looks like a preview snippet of the menu cover instead of the whole document. */
.gc-speisekarte-item__media--pdf {
  background: #fff;
}
.gc-speisekarte-item__media > a {
  display: block;
  width: 100%;
  height: 100%;
}
/* Reset .entry-content img margin/border-radius leakage (same bug as in holes block) */
.gc-speisekarte-item__media img,
.gc-speisekarte-item .gc-speisekarte-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease;
}
/* PDF preview specifically: anchor at TOP so the header/title of the menu is visible */
.gc-speisekarte-item__media--pdf img {
  object-fit: cover;
  object-position: top center;
}
.gc-speisekarte-item:hover .gc-speisekarte-item__media img { transform: scale(1.03); }
.gc-speisekarte-item__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sage, #5a7a5a);
  aspect-ratio: 4 / 3;
}
.gc-speisekarte-item__media--placeholder svg { width: 60%; height: 60%; opacity: 0.6; }

/* Stronger card border so the frame is clearly visible */
.gc-speisekarte-item {
  border: 1px solid rgba(26, 46, 26, 0.15);
}
.gc-speisekarte-item:hover {
  border-color: var(--color-gold, #a88935);
  box-shadow: 0 12px 30px rgba(26, 46, 26, 0.1);
}
.gc-speisekarte-item__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.gc-speisekarte-item__subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold, #a88935);
  font-weight: 600;
}
.gc-speisekarte-item__title {
  font-size: 1.4rem;
  margin: 0;
  color: var(--color-forest, #1a2e1a);
}
.gc-speisekarte-item__desc {
  font-size: 0.92rem;
  color: var(--color-stone, #6b6b6b);
  line-height: 1.5;
  margin: 0;
}
/* Action buttons row — visible on white card background.
   The two buttons split View (eye icon, opens PDF in new tab inline) and
   Download (arrow icon, forces local download via the `download` attribute). */
.gc-speisekarte-item__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  flex-wrap: wrap;
}
.gc-speisekarte-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  font-family: var(--font-body, "Jost", sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.gc-speisekarte-item__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.gc-speisekarte-item__btn:hover { transform: translateY(-1px); }

/* "Ansehen" = primary action, filled forest button (clearly visible on white) */
.gc-speisekarte-item__btn--view {
  background: var(--color-forest, #1a2e1a);
  color: #fff;
  border: 1px solid var(--color-forest, #1a2e1a);
}
.gc-speisekarte-item__btn--view:hover {
  background: var(--color-pine, #2d4a2d);
  border-color: var(--color-pine, #2d4a2d);
  color: #fff;
}

/* "Download" = secondary action, outlined in forest (visible on white) */
.gc-speisekarte-item__btn--download {
  background: transparent;
  color: var(--color-forest, #1a2e1a);
  border: 1px solid rgba(26, 46, 26, 0.25);
}
.gc-speisekarte-item__btn--download:hover {
  background: rgba(26, 46, 26, 0.06);
  border-color: var(--color-gold, #a88935);
  color: var(--color-gold, #a88935);
}

/* ============================================
   NEWSLETTER ARCHIVE (gc/newsletter-archive + gc/newsletter-issue)
   Grid of past newsletter editions — portrait covers + PDF view/download.
   ============================================ */
.gc-newsletter-archive { background: var(--color-cream, #faf8f4); }
.gc-newsletter-archive__header { text-align: center; margin-bottom: 3rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.gc-newsletter-archive__header .section-subtext { color: var(--color-stone, #6b6b6b); margin-top: 1rem; }
.gc-newsletter-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.gc-newsletter-archive__empty {
  text-align: center;
  color: var(--color-stone, #6b6b6b);
  font-style: italic;
  padding: 3rem 1rem;
}

.gc-newsletter-issue {
  background: #fff;
  border: 1px solid rgba(26, 46, 26, 0.15);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gc-newsletter-issue:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26, 46, 26, 0.1);
  border-color: var(--color-gold, #a88935);
}
.gc-newsletter-issue__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-mist, #e8ede8);
  border-bottom: 1px solid rgba(26, 46, 26, 0.1);
}
.gc-newsletter-issue__media--pdf { background: #fff; }
.gc-newsletter-issue__media > a { display: block; width: 100%; height: 100%; }
/* Reset .entry-content img margin/border-radius leakage (same as speisekarten/holes) */
.gc-newsletter-issue__media img,
.gc-newsletter-issue .gc-newsletter-issue__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease;
}
.gc-newsletter-issue:hover .gc-newsletter-issue__media img { transform: scale(1.03); }
.gc-newsletter-issue__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sage, #5a7a5a);
}
.gc-newsletter-issue__media--placeholder svg { width: 55%; height: 55%; opacity: 0.6; }
.gc-newsletter-issue__body {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.gc-newsletter-issue__date {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold, #a88935);
  font-weight: 600;
}
.gc-newsletter-issue__title {
  font-size: 1.25rem;
  margin: 0;
  color: var(--color-forest, #1a2e1a);
}
.gc-newsletter-issue__desc {
  font-size: 0.9rem;
  color: var(--color-stone, #6b6b6b);
  line-height: 1.5;
  margin: 0;
}
.gc-newsletter-issue__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  flex-wrap: wrap;
}
.gc-newsletter-issue__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  font-family: var(--font-body, "Jost", sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.gc-newsletter-issue__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.gc-newsletter-issue__btn:hover { transform: translateY(-1px); }
.gc-newsletter-issue__btn--view {
  background: var(--color-forest, #1a2e1a);
  color: #fff;
  border: 1px solid var(--color-forest, #1a2e1a);
}
.gc-newsletter-issue__btn--view:hover {
  background: var(--color-pine, #2d4a2d);
  border-color: var(--color-pine, #2d4a2d);
  color: #fff;
}
.gc-newsletter-issue__btn--download {
  background: transparent;
  color: var(--color-forest, #1a2e1a);
  border: 1px solid rgba(26, 46, 26, 0.25);
}
.gc-newsletter-issue__btn--download:hover {
  background: rgba(26, 46, 26, 0.06);
  border-color: var(--color-gold, #a88935);
  color: var(--color-gold, #a88935);
}

/* ============================================
   TEAM CALENDAR (gc/team-calendar + gc/team-event)
   ============================================ */
.gc-team-calendar__header { text-align: center; margin-bottom: 2.5rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.gc-team-calendar__header .section-subtext { color: var(--color-stone, #6b6b6b); margin-top: 1rem; }
.gc-team-calendar__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gc-team-calendar__empty {
  text-align: center;
  color: var(--color-stone, #6b6b6b);
  font-style: italic;
  padding: 2.5rem 1rem;
}

.gc-team-event {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(26, 46, 26, 0.08);
  border-radius: 6px;
  border-left: 4px solid var(--color-gold, #a88935);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gc-team-event:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(26, 46, 26, 0.06);
}
.gc-team-event.is-cancelled {
  opacity: 0.55;
  border-left-color: var(--color-stone, #6b6b6b);
}
.gc-team-event.is-cancelled .gc-team-event__title { text-decoration: line-through; }

.gc-team-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
  color: var(--color-forest, #1a2e1a);
}
.gc-team-event__day {
  font-size: 1.8rem;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.gc-team-event__month {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold, #a88935);
  margin-top: 0.15rem;
  font-weight: 600;
}
.gc-team-event__year {
  font-size: 0.65rem;
  color: var(--color-stone, #6b6b6b);
  margin-top: 0.15rem;
  font-feature-settings: "tnum";
}
.gc-team-event__body { min-width: 0; }
.gc-team-event__title {
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
  color: var(--color-forest, #1a2e1a);
}
.gc-team-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-stone, #6b6b6b);
  margin-bottom: 0.4rem;
}
.gc-team-event__meta .gc-team-event__time::before { content: "🕐 "; opacity: 0.7; }
.gc-team-event__meta .gc-team-event__location::before { content: "📍 "; opacity: 0.7; }
.gc-team-event__desc {
  font-size: 0.92rem;
  color: var(--color-charcoal, #1c1c1c);
  margin: 0.25rem 0 0;
  line-height: 1.5;
}
.gc-team-event__signup { white-space: nowrap; }

@media (max-width: 640px) {
  .gc-team-event {
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }
  .gc-team-event__signup {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }
  .gc-team-event__day { font-size: 1.5rem; }
}

/* ============================================
   DOWNLOADS (gc/downloads + gc/download-item)
   ============================================ */
.gc-downloads__header { text-align: center; margin-bottom: 2.5rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.gc-downloads__header .section-subtext { color: var(--color-stone, #6b6b6b); margin-top: 1rem; }
.gc-downloads__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gc-downloads__empty {
  text-align: center;
  color: var(--color-stone, #6b6b6b);
  font-style: italic;
  padding: 2.5rem 1rem;
}

.gc-download-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(26, 46, 26, 0.08);
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gc-download-item:hover {
  border-color: var(--color-gold, #a88935);
  box-shadow: 0 6px 20px rgba(26, 46, 26, 0.06);
}
.gc-download-item__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 137, 53, 0.1);
  color: var(--color-gold, #a88935);
  border-radius: 50%;
  flex-shrink: 0;
}
.gc-download-item__icon svg { width: 22px; height: 22px; }
.gc-download-item__body { min-width: 0; }
.gc-download-item__title {
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
  color: var(--color-forest, #1a2e1a);
}
.gc-download-item__desc {
  font-size: 0.88rem;
  color: var(--color-stone, #6b6b6b);
  margin: 0;
  line-height: 1.4;
}
.gc-download-item__meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--color-stone, #6b6b6b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.4rem 0 0;
}
.gc-download-item__ext {
  background: var(--color-mist, #e8ede8);
  color: var(--color-forest, #1a2e1a);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-weight: 600;
}
.gc-download-item__btn { white-space: nowrap; }

/* The download list sits on WHITE cards, but .btn-outline is built for dark
   backgrounds (white text + white border) → the "Herunterladen" text was
   invisible. Force a light-context outline button here: dark forest text +
   visible border, filled on hover. Descendant selector (.gc-download-item …)
   raises specificity above the inline .btn-outline !important rules. */
.gc-download-item .gc-download-item__btn {
  color: var(--color-forest, #1a2e1a) !important;
  border-color: rgba(26, 46, 26, 0.35) !important;
}
.gc-download-item .gc-download-item__btn:hover {
  background: var(--color-forest, #1a2e1a) !important;
  border-color: var(--color-forest, #1a2e1a) !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  .gc-download-item {
    grid-template-columns: 40px 1fr;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
  }
  .gc-download-item__icon { width: 40px; height: 40px; }
  .gc-download-item__btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }
}

/* ============================================
   HERO MODULAR BUTTONS — gc/hero-button rendering
   The hero-button block emits a plain <a class="btn btn-primary"> or
   <a class="btn btn-outline">, so it inherits the existing button styles.
   Editor preview wrapper styling only:
   ============================================ */
/* Legacy preview — shown in the editor whenever the gc/hero block has no real
   gc/hero-button children yet. Mirrors what the front-end renders (the legacy
   PHP fallback in hero.php) so the editor never looks empty. */
.gc-hero-edit-legacy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}
.gc-hero-edit-legacy__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.gc-hero-edit-legacy__hint {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.4rem;
  padding: 0.5rem 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Editor preview of the hero block. Single InnerBlocks slot holds BOTH gc/hero-button
   and gc/hero-stat children. Buttons row up at the top (auto-wrap on overflow), stats
   stack below in their own rows right-aligned with a gold accent line — visually
   distinct without forcing strict columns that create phantom gaps. */
.gc-hero-edit-children {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  align-items: stretch;
}
.gc-hero-edit-children > .wp-block,
.gc-hero-edit-children .block-editor-block-list__layout > .wp-block {
  margin: 0 !important;
}
.gc-hero-edit-button-wrap {
  display: inline-block;
}
/* Stat children — sit on their own row, right-aligned with a thin gold accent
   so they read as a different "kind" of element from the buttons above. */
.gc-hero-edit-children > .wp-block[data-type="gc/hero-stat"],
.gc-hero-edit-children .block-editor-block-list__layout > .wp-block[data-type="gc/hero-stat"] {
  align-self: flex-end;
  max-width: 260px;
  width: auto;
  text-align: right;
  border-right: 2px solid var(--color-gold, #d4af5a);
  padding-right: 0.75rem;
}
/* The first stat after a button gets a subtle top divider so the "group switch"
   is visually clear (buttons section → stats section). */
.gc-hero-edit-children > .wp-block[data-type="gc/hero-button"] + .wp-block[data-type="gc/hero-stat"] {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Custom "+ Button / + Stat" appender — rendered inline at the bottom of the
   hero block's editable area so the user always has obvious controls to add
   new items, without hunting in the sidebar. Replaces the default Gutenberg
   "+" appender which appended at the wrong position. */
.gc-hero-edit-appender {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(212, 175, 90, 0.4);
  border-radius: 4px;
}
.gc-hero-edit-appender__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold, #d4af5a);
  margin-right: 0.25rem;
}
.gc-hero-edit-appender .components-button {
  flex: 0 0 auto;
}