/* ==========================================================================
   RHEINUFER PRESTIGE — Complete Design System
   Camping- & Sportbootclub Itterdamm
   Aesthetic: Warm midnight, antique gold, editorial Cormorant, refined DM Sans
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Atmosphere */
  --rp-void:         #03080E;
  --rp-deep:         #06111D;
  --rp-surface:      #0C1E2E;
  --rp-raised:       #122435;
  --rp-glass:        rgba(255, 255, 255, 0.07);
  --rp-glass-lt:     rgba(255, 255, 255, 0.045);

  /* Gold */
  --rp-gold:         #ffffff;
  --rp-gold-lt:      #E2C46A;
  --rp-gold-dk:      #9B7D36;
  --rp-gold-pale:    rgba(255, 255, 255, 0.12);
  --rp-gold-glow:    rgba(255, 255, 255, 0.28);
  --rp-gold-border:  rgba(255, 255, 255, 0.35);

  /* Nature */
  --rp-green:        #4D7C2F;
  --rp-green-lt:     #6B8E23;
  --rp-green-glow:   rgba(107, 142, 35, 0.22);

  /* Text */
  --rp-cream:        #EDE8DD;
  --rp-cream-80:     #ffffff;
  --rp-cream-60:     #ffffff;
  --rp-cream-40:     rgba(255,255,255,0.48);
  --rp-cream-20:     rgba(255,255,255,0.22);

  /* Borders */
  --rp-border:       rgba(255, 255, 255, 0.13);
  --rp-border-md:    rgba(255, 255, 255, 0.20);
  --rp-border-lg:    rgba(255, 255, 255, 0.30);

  /* Typography */
  --rp-display:      'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --rp-body:         'DM Sans', 'Nunito', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --rp-section-v:    5rem;
  --rp-container:    1200px;

  /* Radius */
  --rp-r-xs:   4px;
  --rp-r-sm:   8px;
  --rp-r:      14px;
  --rp-r-lg:   20px;
  --rp-r-xl:   28px;
  --rp-r-full: 9999px;

  /* Shadows */
  --rp-sh-xs:   0 2px 8px rgba(3, 8, 14, 0.40);
  --rp-sh-sm:   0 4px 16px rgba(3, 8, 14, 0.48);
  --rp-sh:      0 8px 28px rgba(3, 8, 14, 0.55);
  --rp-sh-lg:   0 18px 52px rgba(3, 8, 14, 0.62);
  --rp-sh-gold: 0 8px 28px rgba(255, 255, 255, 0.24);

  /* Motion */
  --rp-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --rp-med:  300ms cubic-bezier(0.4, 0, 0.2, 1);
  --rp-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --rp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
body.frontend-layout {
  --rp-gold:        #C9A84C !important;
  --rp-gold-lt:     #D4B56A !important;
  --rp-gold-pale:   rgba(201, 168, 76, 0.12) !important;
  --rp-gold-glow:   rgba(201, 168, 76, 0.28) !important;
  --rp-gold-border: rgba(201, 168, 76, 0.35) !important;
}


/* ==========================================================================
   BASE TYPOGRAPHY + FONT LOADING
   ========================================================================== */
body.frontend-layout {
  font-family: var(--rp-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

body.frontend-layout p,
body.frontend-layout li,
body.frontend-layout span,
body.frontend-layout div,
body.frontend-layout label,
body.frontend-layout input,
body.frontend-layout textarea,
body.frontend-layout select,
body.frontend-layout a,
body.frontend-layout small,
body.frontend-layout .card-text,
body.frontend-layout .card-meta,
body.frontend-layout .nav-link {
  font-family: var(--rp-body) !important;
}

body.frontend-layout h1,
body.frontend-layout h2,
body.frontend-layout h3,
body.frontend-layout h4,
body.frontend-layout h5,
body.frontend-layout h6,
body.frontend-layout .card-title,
body.frontend-layout .section-header h2 {
  font-family: var(--rp-display) !important;
}

/* ==========================================================================
   GLOBAL ATMOSPHERE
   ========================================================================== */
body.frontend-layout {
  background-color: var(--rp-deep) !important;
  background:
    linear-gradient(to bottom,
      rgba(3, 8, 14, 0.64) 0%,
      rgba(5, 14, 26, 0.52) 35%,
      rgba(5, 14, 26, 0.55) 65%,
      rgba(3, 8, 14, 0.72) 100%),
    url('../images/hero-bg.jpg') center / cover fixed !important;
  color: var(--rp-cream) !important;
  min-height: 100vh !important;
}

/* Disable glassmorphism.css pseudo-element — we control background directly */
body.frontend-layout::before {
  display: none !important;
}

/* ==========================================================================
   HEADER — Frosted Warm Glass
   ========================================================================== */
body.frontend-layout .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(4, 10, 20, 0.78) !important;
  backdrop-filter: blur(36px) saturate(1.9) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.9) brightness(1.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 48px rgba(3, 8, 14, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: background var(--rp-med) !important;
}

/* Hide redundant top bar */
body.frontend-layout .header-top { display: none !important; }

body.frontend-layout .header-main {
  padding: 1.5rem 0 !important;
  background: transparent !important;
}

body.frontend-layout .header-main-inner {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
}

/* ── Brand ── */
body.frontend-layout .brand-text h1 {
  font-family: var(--rp-display) !important;
  font-size: clamp(0.9rem, 1.6vw, 1.25rem) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--rp-cream) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.frontend-layout .brand-text p { display: none !important; }

/* ── Desktop Nav ── */
body.frontend-layout .nav-main {
  align-items: center !important;
  gap: 0.15rem !important;
}

body.frontend-layout .nav-main a {
  font-family: var(--rp-body) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rp-cream-60) !important;
  text-decoration: none !important;
  padding: 0.65rem 1.1rem !important;
  border-radius: var(--rp-r-sm) !important;
  transition: color var(--rp-fast), background var(--rp-fast) !important;
  position: relative !important;
  white-space: nowrap !important;
}

body.frontend-layout .nav-main a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: calc(100% - 1.75rem) !important;
  height: 1.5px !important;
  background: #C9A84C !important;
  border-radius: var(--rp-r-full) !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  transition: transform var(--rp-med) var(--rp-ease) !important;
}

body.frontend-layout .nav-main a:hover {
  color: var(--rp-cream) !important;
  background: rgba(255,255,255,0.07) !important;
}

body.frontend-layout .nav-main a.active {
  color: #C9A84C !important;
  border: 1px solid #C9A84C !important;
}

body.frontend-layout .nav-main a:hover::after,
body.frontend-layout .nav-main a.active::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* ── Header Actions ── */
body.frontend-layout .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-left: auto !important;
}

html:not(#\9):not(#\8) body.frontend-layout .header-login-btn {
  font-family: var(--rp-body) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rp-cream-60) !important;
  text-decoration: none !important;
  padding: 0.65rem 1.1rem !important;
  border-radius: var(--rp-r-sm) !important;
  border: none !important;
  background: transparent !important;
  transition: color var(--rp-fast), background var(--rp-fast) !important;
  position: relative !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.5 !important;
}

html:not(#\9):not(#\8) body.frontend-layout .header-login-btn::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: calc(100% - 1.75rem) !important;
  height: 1.5px !important;
  background: var(--rp-gold) !important;
  border-radius: var(--rp-r-full) !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  transition: transform var(--rp-med) var(--rp-ease) !important;
}

html:not(#\9):not(#\8) body.frontend-layout .header-login-btn:hover {
  color: var(--rp-cream) !important;
  background: rgba(255,255,255,0.07) !important;
  border: none !important;
}

html:not(#\9):not(#\8) body.frontend-layout .header-login-btn:hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}

body.frontend-layout .header-register-btn,
body.frontend-layout .btn.btn-sm.header-register-btn {
  font-family: var(--rp-body) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border: none !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: var(--rp-r-full) !important;
  text-decoration: none !important;
  transition: all var(--rp-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.22) !important;
}

body.frontend-layout .header-register-btn:hover {
  background: var(--rp-gold-lt) !important;
  color: var(--rp-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--rp-sh-gold) !important;
}

/* Member / Admin nav buttons */
body.frontend-layout .header-member-btn,
body.frontend-layout .header-admin-btn {
  font-family: var(--rp-body) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rp-cream-60) !important;
  text-decoration: none !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: var(--rp-r-full) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  transition: all var(--rp-fast) !important;
  background: rgba(255,255,255,0.05) !important;
}

body.frontend-layout .header-member-btn:hover,
body.frontend-layout .header-admin-btn:hover {
  color: var(--rp-gold) !important;
  border-color: var(--rp-gold-border) !important;
}

/* ── Mobile Menu Toggle ── */
body.frontend-layout .menu-toggle {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--rp-cream-80) !important;
  border-radius: var(--rp-r-sm) !important;
  padding: 0.6rem 0.9rem !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  transition: all var(--rp-fast) !important;
  line-height: 1 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
}

body.frontend-layout .menu-toggle:hover {
  border-color: var(--rp-gold-border) !important;
  color: var(--rp-gold) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   MOBILE NAVIGATION
   ========================================================================== */
body.frontend-layout .mobile-nav {
  background: rgba(6, 17, 29, 0.97) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  border-right: 1px solid var(--rp-gold-border) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  padding: 0 !important;
  box-shadow: 4px 0 40px rgba(3, 8, 14, 0.7) !important;
  /* Chrome mobile: GPU-Layer VOR dem Einblenden erzwingen */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  isolation: isolate !important;
  /* Sichtbarkeit per opacity statt display – backdrop-filter bleibt aktiv */
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease, visibility 0.28s ease !important;
}
body.frontend-layout .mobile-nav.active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.frontend-layout .mobile-nav-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 1.5rem 1.75rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: none !important;
}

body.frontend-layout .mobile-nav-header .brand-text h1 {
  font-family: var(--rp-display) !important;
  color: var(--rp-cream) !important;
  font-size: 1.25rem !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

body.frontend-layout .mobile-nav-close {
  color: var(--rp-cream-60) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--rp-r-sm) !important;
  font-size: 1rem !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
  transition: all var(--rp-fast) !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.frontend-layout .mobile-nav-close:hover {
  color: var(--rp-cream) !important;
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

body.frontend-layout .mobile-nav-links {
  padding: 0.5rem 0 !important;
  flex: 1 !important;
}

body.frontend-layout .mobile-nav-links a {
  font-family: var(--rp-body) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: var(--rp-cream-80) !important;
  text-decoration: none !important;
  padding: 1.1rem 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  transition: color var(--rp-fast), background var(--rp-fast), padding-left var(--rp-fast) !important;
}

body.frontend-layout .mobile-nav-links a i {
  color: var(--rp-gold) !important;
  opacity: 0.70 !important;
  width: 1.3em !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  transition: opacity var(--rp-fast) !important;
  flex-shrink: 0 !important;
}

body.frontend-layout .mobile-nav-links a:hover,
body.frontend-layout .mobile-nav-links a.active {
  color: var(--rp-gold) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.frontend-layout .mobile-nav-links a:hover i,
body.frontend-layout .mobile-nav-links a.active i {
  opacity: 1 !important;
}

body.frontend-layout .mobile-nav-links a.active {
  border-left: 2.5px solid var(--rp-gold) !important;
  padding-left: calc(1.75rem - 2.5px) !important;
}

body.frontend-layout .mobile-nav-actions {
  padding: 1.5rem 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.frontend-layout .mobile-nav-actions .btn-primary {
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border: none !important;
  font-family: var(--rp-body) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-radius: var(--rp-r-full) !important;
  padding: 0.95rem 1.5rem !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.28) !important;
}

body.frontend-layout .mobile-nav-actions .btn-outline {
  background: transparent !important;
  color: var(--rp-cream-68, #ffffff) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  font-family: var(--rp-body) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--rp-r-full) !important;
  padding: 0.95rem 1.5rem !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* ==========================================================================
   DESKTOP / MOBILE NAV VISIBILITY — explicit breakpoint guards
   ========================================================================== */
@media (min-width: 1024px) {
  body.frontend-layout .nav-main    { display: flex !important; }
  body.frontend-layout .menu-toggle { display: none !important; }
}

@media (max-width: 1023px) {
  body.frontend-layout .nav-main    { display: none !important; }
  body.frontend-layout .menu-toggle { display: flex !important; }
}

/* ==========================================================================
   GLOBAL SECTIONS
   ========================================================================== */
body.frontend-layout .section {
  padding: var(--rp-section-v) 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

body.frontend-layout .section.bg-light {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.frontend-layout .section.section-dark {
  background: rgba(3, 8, 14, 0.38) !important;
  backdrop-filter: none !important;
}

/* ── Section Header ── */
body.frontend-layout .section-header {
  text-align: center !important;
  margin-bottom: 3.5rem !important;
}

body.frontend-layout .section-header p {
  font-family: var(--rp-body) !important;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.20em !important;
  color: var(--rp-gold) !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

/* Force visible — overrides home.php's inline `color: transparent !important` */
body.frontend-layout .section .section-header h2,
body.frontend-layout .section.bg-light .section-header h2,
body.frontend-layout .section.section-dark .section-header h2,
body.frontend-layout .section-header h2 {
  font-family: var(--rp-display) !important;
  font-size: clamp(2rem, 3.8vw, 2.9rem) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Container */
body.frontend-layout .container {
  max-width: var(--rp-container) !important;
  padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
  padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   HERO — Editorial Showcase
   ========================================================================== */

/* Kill the wave divider — it breaks the dark-to-dark flow */
body.frontend-layout .wave-divider { display: none !important; }

body.frontend-layout .hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 6rem 0 7rem !important;
}

/* Atmospheric glow layers */
body.frontend-layout .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255, 255, 255, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 15% 15%, rgba(45, 106, 127, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(77, 124, 47, 0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Scroll line indicator */
body.frontend-layout .hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1px !important;
  height: 2.75rem !important;
  background: linear-gradient(to bottom, var(--rp-gold-border), transparent) !important;
  animation: rpScrollLine 2.2s ease-in-out infinite !important;
  z-index: 2 !important;
}

body.frontend-layout .hero > * {
  position: relative !important;
  z-index: 1 !important;
}

body.frontend-layout .hero-content {
  text-align: center !important;
  max-width: 860px !important;
  padding: 2.5rem 2.5rem 4rem !important;
  animation: rpFadeUp 0.95s var(--rp-ease) both !important;
  background: rgba(3, 8, 14, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: var(--rp-r-xl) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── Tagline (eyebrow) ── */
body.frontend-layout .hero-tagline {
  font-family: 'Playfair Display', var(--rp-display), Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.20em !important;
  color: var(--rp-gold) !important;
  margin-bottom: 1.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 1rem !important;
  animation-delay: 50ms !important;
}

body.frontend-layout .hero-tagline::before,
body.frontend-layout .hero-tagline::after {
  content: '' !important;
  display: inline-block !important;
  width: 2.25rem !important;
  height: 1px !important;
  background: var(--rp-gold) !important;
  opacity: 0.55 !important;
}

/* ── Logo ── */
body.frontend-layout .hero-logo-section {
  margin-bottom: 1.75rem !important;
  animation-delay: 100ms !important;
}

body.frontend-layout .hero-logo-img {
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 4px rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(3, 8, 14, 0.60) !important;
}

/* ── Main Title ── */
body.frontend-layout .hero-title,
body.frontend-layout h1.hero-title,
body.frontend-layout .hero .hero-title {
  font-family: var(--rp-display) !important;
  font-size: clamp(2.1rem, 5.5vw, 4.25rem) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 1.625rem !important;
  text-shadow:
    0 2px 4px rgba(3, 8, 14, 0.90),
    0 4px 24px rgba(3, 8, 14, 0.65) !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* ── Hero Body Text ── */
body.frontend-layout .hero-text {
  font-family: var(--rp-body) !important;
  font-size: clamp(0.9rem, 1.8vw, 1.055rem) !important;
  font-weight: 400 !important;
  color: var(--rp-cream-80) !important;
  max-width: 580px !important;
  margin: 0 auto 2.75rem !important;
  line-height: 1.85 !important;
  text-shadow:
    0 1px 3px rgba(3, 8, 14, 0.80),
    0 2px 14px rgba(3, 8, 14, 0.50) !important;
}

/* ── Hero Buttons ── */
body.frontend-layout .hero-buttons {
  display: flex !important;
  gap: 1rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

body.frontend-layout .hero-btn-primary {
  display: none !important;
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border-radius: var(--rp-r-full) !important;
  padding: 1rem 2.5rem !important;
  border: none !important;
  box-shadow: var(--rp-sh-gold) !important;
  text-decoration: none !important;
  transition: all var(--rp-med) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

body.frontend-layout .hero-btn-primary:hover {
  background: var(--rp-gold-lt) !important;
  color: var(--rp-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 38px rgba(255, 255, 255, 0.38) !important;
}

body.frontend-layout .hero-btn-secondary {
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
  color: var(--rp-cream-80) !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  border-radius: var(--rp-r-full) !important;
  padding: 1rem 2.5rem !important;
  text-decoration: none !important;
  transition: all var(--rp-med) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

body.frontend-layout .hero-btn-secondary:hover {
  border-color: var(--rp-gold-border) !important;
  color: var(--rp-gold) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ==========================================================================
   FEATURE CARDS — Dark Glass Editorial Panels
   ========================================================================== */
body.frontend-layout .grid-features {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.5rem !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
}

/* Override inline !important from PHP-generated <style> */
body.frontend-layout .grid-features .feature-card,
body.frontend-layout .section .feature-card,
body.frontend-layout .feature-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2.5px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  padding: 2.25rem 2rem 2rem !important;
  text-align: center !important;
  transition: transform var(--rp-med), box-shadow var(--rp-med), border-top-color var(--rp-med) !important;
  min-height: auto !important;
  max-width: 100% !important;
  box-shadow:
    0 4px 20px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  flex: unset !important;
  min-width: 0 !important;
}

body.frontend-layout .feature-card:hover {
  transform: translateY(-7px) !important;
  box-shadow:
    0 18px 48px rgba(3, 8, 14, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  border-top-color: var(--rp-gold) !important;
}

/* Icon */
body.frontend-layout .grid-features .feature-icon,
body.frontend-layout .section .feature-icon,
body.frontend-layout .feature-icon {
  width: 54px !important;
  height: 54px !important;
  background: var(--rp-gold-pale) !important;
  border-radius: var(--rp-r) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1.375rem !important;
  font-size: 1.4rem !important;
  color: var(--rp-gold) !important;
  border: none !important;
  box-shadow: none !important;
  transition: background var(--rp-med), box-shadow var(--rp-med) !important;
}

body.frontend-layout .feature-card:hover .feature-icon {
  background: rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.16) !important;
  filter: none !important;
}

/* Title */
body.frontend-layout .grid-features .feature-card h3,
body.frontend-layout .section .feature-card h3,
body.frontend-layout .feature-card h3 {
  font-family: var(--rp-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--rp-cream) !important;
  margin-bottom: 0.625rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

/* Body */
body.frontend-layout .grid-features .feature-card p,
body.frontend-layout .section .feature-card p,
body.frontend-layout .feature-card p {
  font-family: var(--rp-body) !important;
  font-size: 0.875rem !important;
  color: var(--rp-cream-40) !important;
  line-height: 1.72 !important;
  margin: 0 !important;
}

/* Staggered entrance */
body.frontend-layout .feature-card:nth-child(1) { animation: rpFadeUp 0.75s 0ms var(--rp-ease) both !important; }
body.frontend-layout .feature-card:nth-child(2) { animation: rpFadeUp 0.75s 90ms var(--rp-ease) both !important; }
body.frontend-layout .feature-card:nth-child(3) { animation: rpFadeUp 0.75s 180ms var(--rp-ease) both !important; }
body.frontend-layout .feature-card:nth-child(4) { animation: rpFadeUp 0.75s 270ms var(--rp-ease) both !important; }

/* ==========================================================================
   NEWS / CARD GRID
   ========================================================================== */
body.frontend-layout .grid {
  display: grid !important;
  gap: 1.5rem !important;
}

body.frontend-layout .grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

body.frontend-layout .news-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--rp-r-lg) !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform var(--rp-med), box-shadow var(--rp-med), border-color var(--rp-med) !important;
}

body.frontend-layout .news-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--rp-sh) !important;
  border-color: var(--rp-border-md) !important;
}

body.frontend-layout .card-image-wrap {
  position: relative !important;
  overflow: hidden !important;
}

body.frontend-layout .card-image-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(3, 8, 14, 0.72) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

body.frontend-layout .card-image,
body.frontend-layout .card-image-wrap img.card-image {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform var(--rp-slow) !important;
}

body.frontend-layout .news-card:hover .card-image {
  transform: scale(1.04) !important;
}

body.frontend-layout .news-category {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 2 !important;
  font-family: var(--rp-body) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: var(--rp-r-full) !important;
}

body.frontend-layout .card-body {
  padding: 1.5rem !important;
}

body.frontend-layout .card-title,
body.frontend-layout .card-title a {
  font-family: var(--rp-display) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--rp-cream) !important;
  line-height: 1.3 !important;
  margin-bottom: 0.625rem !important;
  text-decoration: none !important;
  transition: color var(--rp-fast) !important;
  display: block !important;
}

body.frontend-layout .card-title a:hover,
body.frontend-layout a.card-title:hover {
  color: var(--rp-gold) !important;
}

body.frontend-layout .card-text {
  font-family: var(--rp-body) !important;
  font-size: 0.865rem !important;
  color: var(--rp-cream-40) !important;
  line-height: 1.75 !important;
  margin-bottom: 1rem !important;
}

body.frontend-layout .card-meta {
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  color: var(--rp-cream-40) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* "Alle Neuigkeiten" / general section CTA buttons */
body.frontend-layout .text-center .btn-primary,
body.frontend-layout .mt-4 .btn-primary,
body.frontend-layout .btn-primary {
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
  color: var(--rp-gold) !important;
  border: 1.5px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-full) !important;
  padding: 0.875rem 2.25rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  transition: all var(--rp-med) !important;
  box-shadow: none !important;
}

body.frontend-layout .btn-primary:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--rp-gold) !important;
  color: var(--rp-gold-lt) !important;
  transform: translateY(-2px) !important;
}

body.frontend-layout .mt-4 { margin-top: 2.75rem !important; }
body.frontend-layout .text-center { text-align: center !important; }

/* ==========================================================================
   EVENTS SECTION
   ========================================================================== */
body.frontend-layout .section .card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow:
    0 4px 20px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform var(--rp-med), box-shadow var(--rp-med) !important;
  overflow: hidden !important;
}

body.frontend-layout .section .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rp-sh) !important;
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
body.frontend-layout .cta-section,
body.frontend-layout .section-cta {
  background: transparent !important;
  padding: 6rem 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

body.frontend-layout .cta-section::before,
body.frontend-layout .section-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-top: 1px solid var(--rp-border) !important;
  border-bottom: 1px solid var(--rp-border) !important;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 72%) !important;
  pointer-events: none !important;
}

body.frontend-layout .cta-section > *,
body.frontend-layout .section-cta > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   ALERT / FLASH MESSAGES
   ========================================================================== */
body.frontend-layout .alert {
  border-radius: var(--rp-r) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.9rem !important;
}

body.frontend-layout .alert-success {
  background: rgba(77, 124, 47, 0.18) !important;
  border: 1px solid rgba(77, 124, 47, 0.3) !important;
  color: #a3d471 !important;
}

body.frontend-layout .alert-error {
  background: rgba(185, 28, 28, 0.18) !important;
  border: 1px solid rgba(185, 28, 28, 0.3) !important;
  color: #fca5a5 !important;
}

body.frontend-layout .alert-info {
  background: rgba(45, 106, 127, 0.18) !important;
  border: 1px solid rgba(45, 106, 127, 0.3) !important;
  color: #93c5fd !important;
}

/* ==========================================================================
   FOOTER — Lighter glassy, refined, breathing
   ========================================================================== */
body.frontend-layout footer.site-footer {
  background: rgba(6, 17, 29, 0.44) !important;
  backdrop-filter: blur(36px) saturate(1.9) brightness(1.32) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.9) brightness(1.32) !important;
  border-top: 1px solid rgba(255,255,255,0.16) !important;
  padding: 3.5rem 0 2.5rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 -8px 40px rgba(3, 8, 14, 0.22) !important;
}

/* Gold rule at top of footer */
body.frontend-layout footer.site-footer::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 2px !important;
  background: linear-gradient(to right, transparent, var(--rp-gold), transparent) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
}

/* Subtle atmospheric glow above footer */
body.frontend-layout footer.site-footer::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 80px !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent) !important;
  pointer-events: none !important;
}

body.frontend-layout footer.site-footer .container {
  position: relative !important;
  z-index: 1 !important;
}

body.frontend-layout footer.site-footer .footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
  font-family: var(--rp-body) !important;
  font-size: 0.82rem !important;
  color: var(--rp-cream-60) !important;
}

body.frontend-layout footer.site-footer .footer-bottom a {
  color: var(--rp-cream-60) !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  margin-left: 1.5rem !important;
  transition: color var(--rp-fast) !important;
  letter-spacing: 0.02em !important;
}

body.frontend-layout footer.site-footer .footer-bottom a:hover {
  color: var(--rp-gold) !important;
}

/* ==========================================================================
   SUBPAGE HEROES
   ========================================================================== */
body.frontend-layout .about-hero,
body.frontend-layout .news-hero,
body.frontend-layout .gallery-hero,
body.frontend-layout .contact-hero,
body.frontend-layout .imprint-hero,
body.frontend-layout .privacy-hero,
body.frontend-layout .nl-hero,
body.frontend-layout .album-hero,
body.frontend-layout .news-detail-hero {
  background: transparent !important;
  padding: 7rem 0 4.5rem !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}

body.frontend-layout .about-hero h1,
body.frontend-layout .news-hero h1,
body.frontend-layout .gallery-hero h1,
body.frontend-layout .contact-hero h1,
body.frontend-layout .imprint-hero h1,
body.frontend-layout .privacy-hero h1 {
  font-family: var(--rp-display) !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.875rem !important;
  text-shadow: 0 2px 16px rgba(3, 8, 14, 0.5) !important;
}

body.frontend-layout .about-hero p,
body.frontend-layout .news-hero p,
body.frontend-layout .gallery-hero p,
body.frontend-layout .contact-hero p,
body.frontend-layout .imprint-hero p,
body.frontend-layout .privacy-hero p {
  font-family: var(--rp-body) !important;
  font-size: clamp(0.9rem, 2vw, 1rem) !important;
  color: var(--rp-cream-60) !important;
  font-weight: 300 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* Subpage content section backgrounds */
body.frontend-layout .about-content,
body.frontend-layout .imprint-content,
body.frontend-layout .privacy-content {
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Preserve dark glass on news and gallery */
body.frontend-layout .news-section,
body.frontend-layout .gallery-section {
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
body.frontend-layout[data-page="contact"] section:not(.contact-hero) {
  background: transparent !important;
}

/* (2,3,6) beats editor-overrides div:nth-of-type(1) at (1,2,4)
   :not(section) keeps section wrappers transparent — only inner card divs get glass */
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] [style*="background: #ffffff"]:not(input):not(textarea):not(iframe):not(section),
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] [style*="background: #f8fafc"]:not(section) {
  background: var(--rp-glass) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  box-shadow:
    0 4px 24px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

/* Direction card icon containers — override light-blue gradient with gold */
body.frontend-layout[data-page="contact"] [style*="background: linear-gradient(135deg, #e0f2fe"],
body.frontend-layout[data-page="contact"] [style*="background:linear-gradient(135deg, #e0f2fe"],
body.frontend-layout[data-page="contact"] [style*="background: linear-gradient(135deg, #bae6fd"] {
  background: var(--rp-gold-pale) !important;
  border: 1px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.12) !important;
}

body.frontend-layout[data-page="contact"] [style*="background: linear-gradient(135deg, #e0f2fe"] i,
body.frontend-layout[data-page="contact"] [style*="background: linear-gradient(135deg, #e0f2fe"] span,
body.frontend-layout[data-page="contact"] [style*="background: linear-gradient(135deg, #bae6fd"] i,
body.frontend-layout[data-page="contact"] [style*="background: linear-gradient(135deg, #bae6fd"] span {
  color: var(--rp-gold) !important;
}

body.frontend-layout[data-page="contact"] [style*="border-bottom: 1px solid #e5e7eb"] {
  border-bottom: 1px solid var(--rp-border) !important;
}

body.frontend-layout[data-page="contact"] button[type="submit"] {
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border: none !important;
  border-radius: var(--rp-r-full) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.875rem 2rem !important;
  transition: all var(--rp-med) !important;
}

body.frontend-layout[data-page="contact"] button[type="submit"]:hover {
  background: var(--rp-gold-lt) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--rp-sh-gold) !important;
}

/* ==========================================================================
   NEWS PAGE
   ========================================================================== */
body.frontend-layout .news-hero h1 {
  font-style: italic !important;
}

body.frontend-layout .news-card-title {
  font-family: var(--rp-display) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

body.frontend-layout .news-card-excerpt {
  font-family: var(--rp-body) !important;
  line-height: 1.75 !important;
}

body.frontend-layout .news-card-meta {
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
}

body.frontend-layout .news-card:hover {
  border-color: var(--rp-gold-border) !important;
}

body.frontend-layout .news-card-btn {
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border-radius: var(--rp-r-full) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all var(--rp-fast) !important;
}

body.frontend-layout .news-card-btn:hover {
  background: var(--rp-gold-lt) !important;
  transform: translateY(-1px) !important;
  color: var(--rp-deep) !important;
}

body.frontend-layout .news-filter-btn {
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.frontend-layout .news-filter-btn.active {
  background: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border-color: transparent !important;
  box-shadow: var(--rp-sh-gold) !important;
}

body.frontend-layout .news-empty h3,
body.frontend-layout .gallery-empty h3 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
}

/* ==========================================================================
   GALLERY PAGE
   ========================================================================== */
body.frontend-layout .gallery-hero h1,
body.frontend-layout .album-info h3 {
  font-style: italic !important;
}

body.frontend-layout .album-card:hover {
  border-color: var(--rp-gold-border) !important;
}

/* ==========================================================================
   LOGIN / AUTH PAGES
   ========================================================================== */
body.frontend-layout .login-header h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem) !important;
  letter-spacing: -0.02em !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .login-header p,
body.frontend-layout .login-form label,
body.frontend-layout .login-footer,
body.frontend-layout .login-form-row {
  font-family: var(--rp-body) !important;
}

body.frontend-layout .login-form input:focus {
  border-color: var(--rp-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
}

body.frontend-layout .login-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--rp-r-full) !important;
  padding: 0.9rem 1.5rem !important;
  transition: all var(--rp-med) !important;
}

body.frontend-layout .login-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

body.frontend-layout .login-footer a,
body.frontend-layout .login-form-row a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--rp-fast) !important;
}

body.frontend-layout .login-footer a:hover,
body.frontend-layout .login-form-row a:hover {
  color: rgba(255, 255, 255, 1) !important;
}

body.frontend-layout .login-form-row input[type="checkbox"] {
  accent-color: var(--rp-gold) !important;
}

/* ==========================================================================
   ABOUT PAGE — Glass Cards
   ========================================================================== */
html:not(#\9):not(#\8) body.frontend-layout .vorstand-card {
  background: var(--rp-glass) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow:
    0 4px 20px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform var(--rp-med), box-shadow var(--rp-med), border-top-color var(--rp-med) !important;
  overflow: hidden !important;
}

body.frontend-layout .vorstand-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 14px 40px rgba(3, 8, 14, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  border-top-color: var(--rp-gold) !important;
}

body.frontend-layout .vorstand-name,
body.frontend-layout .board-name {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  letter-spacing: -0.01em !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .vorstand-role,
body.frontend-layout .board-role {
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--rp-gold) !important;
}

body.frontend-layout .vorstand-subtitle,
body.frontend-layout .board-subtitle {
  font-family: var(--rp-body) !important;
  font-size: 0.8rem !important;
  color: var(--rp-cream-40) !important;
}

body.frontend-layout .about-section {
  background: transparent !important;
}

/* ==========================================================================
   GALLERY — Album Cards Glass
   ========================================================================== */
body.frontend-layout .album-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--rp-r-lg) !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform var(--rp-med), box-shadow var(--rp-med), border-color var(--rp-med) !important;
  text-decoration: none !important;
  display: block !important;
}

body.frontend-layout .album-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 16px 42px rgba(3, 8, 14, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-color: var(--rp-gold-border) !important;
}

body.frontend-layout .album-info {
  padding: 1.25rem 1.5rem !important;
  background: transparent !important;
}

body.frontend-layout .album-info h3,
body.frontend-layout .album-title {
  font-family: var(--rp-display) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--rp-cream) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.375rem !important;
}

body.frontend-layout .album-count,
body.frontend-layout .album-meta {
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  color: var(--rp-cream-40) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ==========================================================================
   LOGIN / REGISTER — Glass Card
   ========================================================================== */
body.frontend-layout .login-card,
body.frontend-layout .register-card,
body.frontend-layout .auth-card {
  background: rgba(10, 18, 38, 0.52) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 2.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--rp-r-xl) !important;
  padding: 0 !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
  overflow: hidden !important;
  isolation: isolate !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  position: relative !important;
  z-index: 1 !important;
}

body.frontend-layout .login-page,
body.frontend-layout .register-page {
  background: transparent !important;
  padding: 5rem 0 4rem !important;
  isolation: isolate !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

body.frontend-layout .login-header {
  padding: 2.25rem 2rem 0 !important;
  background: transparent !important;
}

body.frontend-layout .login-form {
  padding: 1.5rem 2rem 1.75rem !important;
}

body.frontend-layout .login-footer {
  padding: 1.1rem 2rem 1.75rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Form inputs glass */
body.frontend-layout .login-form input[type="email"],
body.frontend-layout .login-form input[type="password"],
body.frontend-layout .login-form input[type="text"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--rp-r-sm) !important;
  color: var(--rp-cream) !important;
  font-family: var(--rp-body) !important;
  padding: 0.75rem 1rem !important;
  transition: border-color var(--rp-fast), box-shadow var(--rp-fast) !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY FALLBACK
   ========================================================================== */

/* Headings using inline Playfair Display → Cormorant Garamond */
body.frontend-layout [style*="font-family: 'Playfair Display'"],
body.frontend-layout [style*="font-family: \"Playfair Display\""] {
  font-family: var(--rp-display) !important;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rpFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rpScrollLine {
  0%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); }
  40%, 60%  { opacity: 1; transform: translateX(-50%) translateY(10px); }
}

body.frontend-layout .animate-fade-in-up {
  animation: rpFadeUp 0.75s var(--rp-ease) both !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  body.frontend-layout .grid-features {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  body.frontend-layout .hero {
    padding: 4.5rem 1rem 5.5rem !important;
    min-height: 90vh !important;
  }

  body.frontend-layout .hero::after { display: none !important; }

  body.frontend-layout .hero-content {
    padding: 2rem 1.5rem 3rem !important;
    border-radius: var(--rp-r-lg) !important;
  }

  body.frontend-layout .hero-title,
  body.frontend-layout h1.hero-title {
    font-size: clamp(1.75rem, 7.5vw, 2.75rem) !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
  }

  body.frontend-layout .hero-text {
    font-size: 0.9rem !important;
    line-height: 1.78 !important;
  }

  body.frontend-layout .hero-buttons {
    flex-direction: column !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.frontend-layout .hero-btn-primary,
  body.frontend-layout .hero-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  body.frontend-layout .grid-features {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.frontend-layout .section {
    padding: 3.5rem 0 !important;
  }

  body.frontend-layout .section-header {
    margin-bottom: 2.5rem !important;
  }

  body.frontend-layout .section .section-header h2,
  body.frontend-layout .section-header h2 {
    font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
  }

  body.frontend-layout .grid-3 {
    grid-template-columns: 1fr !important;
  }

  body.frontend-layout footer.site-footer .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  body.frontend-layout footer.site-footer .footer-bottom a {
    margin-left: 0.625rem !important;
  }

  body.frontend-layout .about-hero,
  body.frontend-layout .news-hero,
  body.frontend-layout .gallery-hero,
  body.frontend-layout .contact-hero {
    padding: 5.5rem 0 3.5rem !important;
  }
}

@media (max-width: 479px) {
  body.frontend-layout .brand-text h1 {
    font-size: 0.875rem !important;
  }

  body.frontend-layout .hero-title,
  body.frontend-layout h1.hero-title {
    font-size: clamp(1.5rem, 8.5vw, 2.1rem) !important;
  }

  body.frontend-layout .hero {
    min-height: 85vh !important;
    padding: 4.5rem 0 5rem !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline,
  html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline {
    font-size: clamp(0.68rem, 3vw, 0.82rem) !important;
    letter-spacing: 0.05em !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    word-break: break-word !important;
    max-width: 88vw !important;
  }
  /* Tagline-Linien auf Mobile kürzer */
  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline::before,
  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline::after {
    width: 1rem !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline::before,
  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline::after,
  html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline::before,
  html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline::after {
    display: none !important;
    width: 0 !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout div.section-header p,
  html:not(#\9):not(#\8) body.frontend-layout .section-header p {
    font-size: clamp(0.78rem, 3.3vw, 0.88rem) !important;
    letter-spacing: 0.10em !important;
    white-space: nowrap !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .header-login-btn {
    display: none !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout div.brand-text h1,
  html:not(#\9):not(#\8) body.frontend-layout .brand-text h1 {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(0.75rem, 3.1vw, 0.9rem) !important;
    line-height: 1.1 !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .hero-title,
  html:not(#\9):not(#\8) body.frontend-layout h1.hero-title,
  html:not(#\9):not(#\8) body.frontend-layout .hero .hero-title {
    white-space: nowrap !important;
    font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;
  }
}

/* ==========================================================================
   HIGH-SPECIFICITY OVERRIDES — Beats editor-overrides.css (specificity 1,x,x)
   Uses html:not(#\9):not(#\8) = (2,x,x) to ensure Rheinufer Prestige wins.
   ========================================================================== */

/* ── Mobile nav icons: gold — beats teal editor-overrides ── */
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-home,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-anchor,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-images,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-info-circle,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-envelope,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-sign-in-alt,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links i.fas.fa-user-plus {
  color: var(--rp-gold) !important;
  opacity: 0.82 !important;
  flex-shrink: 0 !important;
  width: 1.3em !important;
  text-align: center !important;
}

html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links a:hover i,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links a:hover i.fas,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links a.active i,
html:not(#\9):not(#\8) body.frontend-layout nav.mobile-nav-links a.active i.fas {
  color: var(--rp-gold) !important;
  opacity: 1 !important;
}

/* ── Mobile nav action button icons ── */
html:not(#\9):not(#\8) body.frontend-layout .mobile-nav-actions a i.fas,
html:not(#\9):not(#\8) body.frontend-layout .mobile-nav-actions a i.fas.fa-cog,
html:not(#\9):not(#\8) body.frontend-layout .mobile-nav-actions a i.fas.fa-user,
html:not(#\9):not(#\8) body.frontend-layout .mobile-nav-actions a i.fas.fa-sign-out-alt,
html:not(#\9):not(#\8) body.frontend-layout .mobile-nav-actions a i.fas.fa-sign-in-alt,
html:not(#\9):not(#\8) body.frontend-layout .mobile-nav-actions a i.fas.fa-user-plus {
  color: inherit !important;
  opacity: 1 !important;
  width: auto !important;
}

/* ── Section header eyebrow: small gold label, not 26px white ── */
html:not(#\9):not(#\8) body.frontend-layout div.section-header p,
html:not(#\9):not(#\8) body.frontend-layout .section-header p {
  color: var(--rp-gold) !important;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.20em !important;
  font-family: var(--rp-body) !important;
  display: block !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.2 !important;
}

/* ── Desktop nav: gold hover, gold active — not teal/black ── */
html:not(#\9):not(#\8) body.frontend-layout nav.nav-main a:hover {
  color: var(--rp-cream) !important;
  background: rgba(255,255,255,0.07) !important;
}

html:not(#\9):not(#\8) body.frontend-layout nav.nav-main a.active,
html:not(#\9):not(#\8) body.frontend-layout nav.nav-main a.active:hover,
html:not(#\9):not(#\8) body.frontend-layout nav.nav-main a.active:visited {
  color: #C9A84C !important;
  border: 1px solid #C9A84C !important;
  background: transparent !important;
}

/* UNOVERRIDEABLE: Editor kann das nicht schlagen - 4x pseudo-not */
html:not(#\9):not(#\8):not(#\7):not(#\6) body.frontend-layout nav.nav-main a.active,
html:not(#\9):not(#\8):not(#\7):not(#\6) body.frontend-layout nav.nav-main a.active:hover {
  color: #C9A84C !important;
  border: 1px solid #C9A84C !important;
  background: transparent !important;
}
html:not(#\9):not(#\8):not(#\7):not(#\6) body.frontend-layout nav.nav-main a::after {
  background: #C9A84C !important;
}

/* ── Footer text: proper size, cream color, gold on hover ── */
html:not(#\9):not(#\8) body.frontend-layout footer.site-footer .footer-bottom div,
html:not(#\9):not(#\8) body.frontend-layout footer.site-footer .footer-bottom p,
html:not(#\9):not(#\8) body.frontend-layout div.footer-bottom div,
html:not(#\9):not(#\8) body.frontend-layout div.footer-bottom p {
  color: var(--rp-cream-60) !important;
  font-size: 0.82rem !important;
  font-family: var(--rp-body) !important;
  line-height: 1.5 !important;
}

html:not(#\9):not(#\8) body.frontend-layout footer.site-footer .footer-bottom a,
html:not(#\9):not(#\8) body.frontend-layout div.footer-bottom a {
  color: var(--rp-cream-60) !important;
  font-size: 0.82rem !important;
  font-family: var(--rp-body) !important;
}

html:not(#\9):not(#\8) body.frontend-layout footer.site-footer .footer-bottom a:hover,
html:not(#\9):not(#\8) body.frontend-layout div.footer-bottom a:hover {
  color: var(--rp-gold) !important;
}

/* ── About .glass-card: Rheinufer Prestige premium styling ── */
html:not(#\9):not(#\8) body.frontend-layout div.glass-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(24px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-top: 2.5px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow:
    0 4px 24px rgba(3, 8, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html:not(#\9):not(#\8) body.frontend-layout div.glass-card p {
  color: var(--rp-cream-80) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.72 !important;
  padding-top: 0 !important;
}

html:not(#\9):not(#\8) body.frontend-layout div.glass-card h2 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 500 !important;
}

/* ── Feature card text: cream, readable — beat editor-overrides glass-text white ── */
html:not(#\9):not(#\8) body.frontend-layout div.feature-card p {
  color: var(--rp-cream-40) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.72 !important;
}

html:not(#\9):not(#\8) body.frontend-layout div.feature-card h3 {
  color: var(--rp-cream) !important;
  font-family: var(--rp-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* ── Container p global: readable size — beat editor-overrides 20px ── */
html:not(#\9):not(#\8) body.frontend-layout .section p,
html:not(#\9):not(#\8) body.frontend-layout .card-body p,
html:not(#\9):not(#\8) body.frontend-layout .card-text {
  font-size: 0.875rem !important;
  line-height: 1.75 !important;
  font-family: var(--rp-body) !important;
}

/* Keep hero text readable at its size */
html:not(#\9):not(#\8) body.frontend-layout .hero-text,
html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-text {
  font-size: clamp(0.9rem, 1.8vw, 1.055rem) !important;
  color: var(--rp-cream-80) !important;
  font-family: var(--rp-body) !important;
  line-height: 1.85 !important;
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero tagline: gold label */
html:not(#\9):not(#\8) body.frontend-layout .hero-tagline,
html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline {
  color: var(--rp-gold) !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.20em !important;
  font-family: var(--rp-body) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.frontend-layout .hero::after { animation: none !important; }
  body.frontend-layout .hero-content,
  body.frontend-layout .animate-fade-in-up,
  body.frontend-layout .feature-card { animation: none !important; }
  body.frontend-layout * { transition-duration: 50ms !important; }
}

/* ==========================================================================
   COMPREHENSIVE HARMONIZATION — All Pages, All Components
   Rheinufer Prestige language unified across every frontend page.
   ========================================================================== */

/* ── Auth: extend card coverage to forgot-card ── */
body.frontend-layout .forgot-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 2.5px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-xl) !important;
  padding: 0 !important;
  box-shadow: 0 8px 40px rgba(3, 8, 14, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ── Auth: register/forgot page centering ── */
body.frontend-layout .forgot-page {
  background: transparent !important;
  padding: 5rem 0 4rem !important;
}

/* ── Auth headings: Cormorant Garamond across all auth pages ── */
body.frontend-layout .register-header h1,
body.frontend-layout .forgot-header h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem) !important;
  letter-spacing: -0.02em !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .register-header p,
body.frontend-layout .forgot-header p {
  color: var(--rp-cream-60) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.9rem !important;
}

/* ── Auth: forgot icon gold ── */
body.frontend-layout .forgot-header i {
  color: var(--rp-gold) !important;
  opacity: 0.9 !important;
}

/* ── Auth: register/forgot form inputs ── */
body.frontend-layout .register-form input[type="text"],
body.frontend-layout .register-form input[type="email"],
body.frontend-layout .register-form input[type="password"],
body.frontend-layout .forgot-form input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--rp-r-sm) !important;
  color: var(--rp-cream) !important;
  font-family: var(--rp-body) !important;
  padding: 0.75rem 1rem !important;
  transition: border-color var(--rp-fast), box-shadow var(--rp-fast) !important;
}

body.frontend-layout .register-form input:focus,
body.frontend-layout .forgot-form input:focus {
  border-color: var(--rp-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.frontend-layout .register-form label,
body.frontend-layout .forgot-form label {
  font-family: var(--rp-body) !important;
  color: var(--rp-cream-80) !important;
}

/* ── Auth: register/forgot submit buttons → gold primary ── */
body.frontend-layout .register-btn,
body.frontend-layout .forgot-btn {
  background: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--rp-r-full) !important;
  padding: 0.9rem 1.5rem !important;
  transition: all var(--rp-med) !important;
}

body.frontend-layout .register-btn:hover,
body.frontend-layout .forgot-btn:hover {
  background: var(--rp-gold-lt) !important;
  border-color: var(--rp-gold-lt) !important;
  box-shadow: var(--rp-sh-gold) !important;
  transform: translateY(-2px) !important;
  color: var(--rp-deep) !important;
}

/* ── Auth: register/forgot footer links → gold ── */
body.frontend-layout .register-footer,
body.frontend-layout .forgot-footer {
  color: var(--rp-cream-60) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.875rem !important;
}

body.frontend-layout .register-footer a,
body.frontend-layout .forgot-footer a {
  color: var(--rp-gold) !important;
  font-family: var(--rp-body) !important;
  transition: color var(--rp-fast) !important;
}

body.frontend-layout .register-footer a:hover,
body.frontend-layout .forgot-footer a:hover {
  color: var(--rp-gold-lt) !important;
  text-decoration: underline !important;
}

/* ── Auth: privacy checkbox box → gold highlight ── */
body.frontend-layout .privacy-check {
  background: var(--rp-gold-pale) !important;
  border: 1px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r) !important;
}

body.frontend-layout .privacy-check label {
  color: var(--rp-cream-80) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

body.frontend-layout .privacy-check a {
  color: var(--rp-gold) !important;
}

body.frontend-layout .privacy-check a:hover {
  color: var(--rp-gold-lt) !important;
  text-decoration: underline !important;
}

body.frontend-layout .privacy-check input[type="checkbox"] {
  accent-color: var(--rp-gold) !important;
}

body.frontend-layout .password-hint {
  color: var(--rp-cream-40) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.78rem !important;
}

/* ── Auth: register card body padding ── */
body.frontend-layout .register-card {
  padding: 0 !important;
}

body.frontend-layout .register-header {
  padding: 2.5rem 2.5rem 0 !important;
  background: transparent !important;
}

body.frontend-layout .register-form {
  padding: 1.75rem 2.5rem 2rem !important;
}

body.frontend-layout .register-footer {
  padding: 1.25rem 2.5rem 2rem !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  text-align: center !important;
}

/* ============================================================
   NEWS INDEX — Premium Cards & Filter
   ============================================================ */

/* News cards: replace dark-navy glass with Rheinufer Prestige glass */
body.frontend-layout .news-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow: 0 4px 20px rgba(3, 8, 14, 0.22), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

body.frontend-layout .news-card:hover {
  border-color: var(--rp-gold-border) !important;
  border-top-color: var(--rp-gold) !important;
  box-shadow: 0 14px 44px rgba(3, 8, 14, 0.58), 0 0 0 1px var(--rp-gold-border), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transform: translateY(-6px) !important;
}

/* Category badge: gold */
body.frontend-layout .news-card-badge {
  background: var(--rp-gold-pale) !important;
  color: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-xs) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

/* Card title */
body.frontend-layout .news-card-title {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
  font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
  letter-spacing: -0.01em !important;
}

body.frontend-layout .news-card-title a { color: var(--rp-cream) !important; }
body.frontend-layout .news-card-title a:hover { color: var(--rp-gold) !important; }

/* Card meta & excerpt */
body.frontend-layout .news-card-meta {
  color: var(--rp-cream-40) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.75rem !important;
}

body.frontend-layout .news-card-excerpt {
  color: var(--rp-cream-60) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}

/* Read-more: gold outline button */
body.frontend-layout .news-card-btn {
  background: transparent !important;
  color: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 0.9rem !important;
  transition: var(--rp-fast) !important;
}

body.frontend-layout .news-card-btn:hover {
  background: var(--rp-gold-pale) !important;
  border-color: var(--rp-gold) !important;
  color: var(--rp-gold-lt) !important;
}

/* Filter bar */
body.frontend-layout .news-filter {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--rp-r-lg) !important;
}

body.frontend-layout .news-filter-btn {
  color: var(--rp-cream-60) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.82rem !important;
  border-radius: var(--rp-r-sm) !important;
  transition: var(--rp-fast) !important;
}

body.frontend-layout .news-filter-btn:hover {
  color: var(--rp-cream) !important;
  background: var(--rp-gold-pale) !important;
}

body.frontend-layout .news-filter-btn.active {
  background: var(--rp-gold-pale) !important;
  color: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold-border) !important;
  box-shadow: none !important;
}

/* Empty state */
body.frontend-layout .news-empty {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid var(--rp-border) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
}

body.frontend-layout .news-empty i { color: var(--rp-gold-border) !important; }
body.frontend-layout .news-empty h3 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
}
body.frontend-layout .news-empty p { color: var(--rp-cream-60) !important; }

/* News hero heading: Cormorant */
body.frontend-layout .news-hero h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}
body.frontend-layout .news-hero p { color: var(--rp-cream-60) !important; }

/* ============================================================
   NEWS DETAIL — Article, Buttons, Typography
   ============================================================ */

/* Remove hardcoded gradient from news-detail-hero */
body.frontend-layout .news-detail-hero {
  background: transparent !important;
}

body.frontend-layout .news-detail-hero h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .news-detail-meta { color: var(--rp-cream-60) !important; }

body.frontend-layout .news-detail-badge {
  background: var(--rp-gold-pale) !important;
  color: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-xs) !important;
}

/* Article card */
body.frontend-layout .news-detail-article {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow: 0 4px 20px rgba(3, 8, 14, 0.22), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

body.frontend-layout .news-detail-article p {
  color: var(--rp-cream-80) !important;
  font-family: var(--rp-body) !important;
}

body.frontend-layout .news-detail-article h2,
body.frontend-layout .news-detail-article h3 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .news-detail-article a { color: var(--rp-gold) !important; }
body.frontend-layout .news-detail-article a:hover { color: var(--rp-gold-lt) !important; }

/* Blockquote: gold border */
body.frontend-layout .news-detail-article blockquote {
  background: var(--rp-gold-pale) !important;
  border-left-color: var(--rp-gold-border) !important;
  color: var(--rp-cream-80) !important;
}

/* Share buttons */
body.frontend-layout .news-detail-share-links a {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--rp-border) !important;
  color: var(--rp-cream-60) !important;
}

body.frontend-layout .news-detail-share-links a:hover {
  background: var(--rp-gold-pale) !important;
  border-color: var(--rp-gold-border) !important;
  color: var(--rp-gold) !important;
}

body.frontend-layout .news-detail-share h4 { color: var(--rp-cream-40) !important; }

/* Back button: gold outline */
body.frontend-layout .news-detail-btn {
  background: transparent !important;
  color: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r) !important;
  font-family: var(--rp-body) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: var(--rp-fast) !important;
}

body.frontend-layout .news-detail-btn:hover {
  background: var(--rp-gold-pale) !important;
  border-color: var(--rp-gold) !important;
  color: var(--rp-gold-lt) !important;
}

/* Related cards */
body.frontend-layout .news-related-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--rp-border) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
}

body.frontend-layout .news-related-card:hover {
  border-color: var(--rp-gold-border) !important;
  transform: translateY(-5px) !important;
}

body.frontend-layout .news-related-card h4 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .news-related-card span { color: var(--rp-cream-40) !important; }

body.frontend-layout .news-related h3 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  color: var(--rp-cream) !important;
}

/* ============================================================
   GALLERY — Album Count Badge (olive green → gold)
   ============================================================ */

/* Override the olive-green badge background */
body.frontend-layout .album-count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold-border) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: var(--rp-r-xs) !important;
  backdrop-filter: blur(8px) !important;
}

body.frontend-layout .album-info p i { color: var(--rp-gold) !important; opacity: 0.85 !important; }

/* Gallery section: ensure transparent */
body.frontend-layout .gallery-section { background: transparent !important; }

/* Gallery hero heading */
body.frontend-layout .gallery-hero h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}
body.frontend-layout .gallery-hero p { color: var(--rp-cream-60) !important; }

/* Gallery/album empty states */
body.frontend-layout .gallery-empty,
body.frontend-layout .album-empty {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid var(--rp-border) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
}

/* ============================================================
   IMPRINT & PRIVACY — Icons, Links, Notes
   ============================================================ */

/* Imprint/privacy cards: upgrade to Rheinufer Prestige glass */
body.frontend-layout .imprint-section,
body.frontend-layout .privacy-section {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
}

/* Section headings */
body.frontend-layout .imprint-section h2,
body.frontend-layout .privacy-section h2 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}

/* Icons: teal → gold */
body.frontend-layout .imprint-section h2 i,
body.frontend-layout .privacy-section h2 i {
  color: var(--rp-gold) !important;
}

body.frontend-layout .imprint-section h3,
body.frontend-layout .privacy-section h3 {
  color: var(--rp-cream) !important;
  font-family: var(--rp-body) !important;
  font-weight: 600 !important;
}

body.frontend-layout .imprint-section p,
body.frontend-layout .imprint-section li,
body.frontend-layout .privacy-section p,
body.frontend-layout .privacy-section li {
  color: var(--rp-cream-80) !important;
  font-family: var(--rp-body) !important;
}

body.frontend-layout .imprint-section strong,
body.frontend-layout .privacy-section strong {
  color: var(--rp-cream) !important;
}

/* Links: teal → gold */
body.frontend-layout .imprint-section a,
body.frontend-layout .privacy-section a {
  color: var(--rp-gold) !important;
}

body.frontend-layout .imprint-section a:hover,
body.frontend-layout .privacy-section a:hover {
  color: var(--rp-gold-lt) !important;
  text-decoration: underline !important;
}

/* Note boxes: blue → gold */
body.frontend-layout .imprint-note,
body.frontend-layout .privacy-note {
  background: var(--rp-gold-pale) !important;
  border-left: 4px solid var(--rp-gold-border) !important;
  border-radius: 0 var(--rp-r-sm) var(--rp-r-sm) 0 !important;
}

body.frontend-layout .imprint-note p,
body.frontend-layout .privacy-note p {
  color: var(--rp-cream-80) !important;
}

/* ============================================================
   NEWSLETTER — Card, Button, Inputs
   ============================================================ */

/* Card */
body.frontend-layout .nl-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 2.5px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-xl) !important;
  box-shadow: 0 8px 36px rgba(3, 8, 14, 0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Hero */
body.frontend-layout .nl-hero h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}
body.frontend-layout .nl-hero p { color: var(--rp-cream-60) !important; }

/* Labels */
body.frontend-layout .nl-label {
  color: var(--rp-cream-80) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Inputs */
body.frontend-layout .nl-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--rp-border-md) !important;
  color: var(--rp-cream) !important;
  border-radius: var(--rp-r-sm) !important;
  font-family: var(--rp-body) !important;
}

body.frontend-layout .nl-input:focus {
  border-color: var(--rp-gold-border) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 3px var(--rp-gold-pale) !important;
}

/* List items */
body.frontend-layout .nl-list-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--rp-border) !important;
  border-radius: var(--rp-r-sm) !important;
  transition: var(--rp-fast) !important;
}

body.frontend-layout .nl-list-item:hover {
  background: var(--rp-gold-pale) !important;
  border-color: var(--rp-gold-border) !important;
}

body.frontend-layout .nl-list-name { color: var(--rp-cream) !important; }
body.frontend-layout .nl-list-desc { color: var(--rp-cream-60) !important; }

body.frontend-layout .nl-list-item input[type="checkbox"] {
  accent-color: var(--rp-gold) !important;
}

/* Button: olive green → gold primary */
body.frontend-layout .nl-btn {
  background: var(--rp-gold) !important;
  border: 1px solid var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: var(--rp-r-full) !important;
}

body.frontend-layout .nl-btn:hover {
  background: var(--rp-gold-lt) !important;
  border-color: var(--rp-gold-lt) !important;
  box-shadow: var(--rp-sh-gold) !important;
  transform: translateY(-2px) !important;
  color: var(--rp-deep) !important;
}

/* Divider */
body.frontend-layout .nl-divider {
  border-top-color: var(--rp-border) !important;
}

/* ============================================================
   ABOUT PAGE — Hero, Offer Cards, CTA
   ============================================================ */

body.frontend-layout .about-hero h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}
body.frontend-layout .about-hero p { color: var(--rp-cream-60) !important; }

/* Offer cards */
body.frontend-layout .offer-card {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow: 0 4px 20px rgba(3, 8, 14, 0.22), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* CTA box */
body.frontend-layout .about-cta {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow: 0 4px 24px rgba(3, 8, 14, 0.22), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Badge boxes */
body.frontend-layout .about-badge-box {
  background: var(--rp-glass) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid var(--rp-gold-border) !important;
  border-radius: var(--rp-r-lg) !important;
  box-shadow: 0 4px 18px rgba(3, 8, 14, 0.20), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* ============================================================
   GLOBAL — All page hero headings: Cormorant Garamond
   ============================================================ */

body.frontend-layout .imprint-hero h1,
body.frontend-layout .privacy-hero h1 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
}

body.frontend-layout .imprint-hero p,
body.frontend-layout .privacy-hero p {
  color: var(--rp-cream-60) !important;
}

/* ============================================================
   GLOBAL — Consistent inline colors across all pages
   Override teal/olive-green leftover colors wherever they appear
   ============================================================ */

/* Any remaining teal links in frontend */
body.frontend-layout a[style*="color: #38bdf8"],
body.frontend-layout a[style*="color:#38bdf8"],
body.frontend-layout [style*="color: rgb(56, 189, 248)"] {
  color: var(--rp-gold) !important;
}

/* Any hardcoded blue buttons that may have been missed */
body.frontend-layout button[style*="background: rgba(73, 146, 190"],
body.frontend-layout a[style*="background: rgba(73, 146, 190"] {
  background: var(--rp-gold) !important;
  border-color: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
}

/* ============================================================
   MOBILE RESPONSIVE — Auth / News / Gallery on small screens
   ============================================================ */

@media (max-width: 768px) {
  body.frontend-layout .login-card,
  body.frontend-layout .register-card,
  body.frontend-layout .forgot-card {
    border-radius: var(--rp-r-lg) !important;
    margin: 0 1rem !important;
  }

  body.frontend-layout .login-page,
  body.frontend-layout .register-page,
  body.frontend-layout .forgot-page {
    padding: 3.5rem 0 3rem !important;
  }

  body.frontend-layout .login-header,
  body.frontend-layout .register-header {
    padding: 2rem 1.75rem 0 !important;
  }

  body.frontend-layout .login-form,
  body.frontend-layout .register-form {
    padding: 1.5rem 1.75rem 1.75rem !important;
  }

  body.frontend-layout .login-footer,
  body.frontend-layout .register-footer {
    padding: 1rem 1.75rem 1.75rem !important;
  }

  body.frontend-layout .news-filter {
    gap: 0.4rem !important;
    padding: 0.6rem !important;
  }

  body.frontend-layout .news-filter-btn {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
  }

  body.frontend-layout .nl-card {
    border-radius: var(--rp-r-lg) !important;
    margin: 0 0.5rem !important;
  }

  body.frontend-layout .news-detail-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
  }

  body.frontend-layout .news-related-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  body.frontend-layout .register-card,
  body.frontend-layout .forgot-card {
    margin: 0 0.5rem !important;
  }

  body.frontend-layout .register-header,
  body.frontend-layout .login-header {
    padding: 1.5rem 1.25rem 0 !important;
  }

  body.frontend-layout .register-form,
  body.frontend-layout .login-form {
    padding: 1.25rem 1.25rem 1.5rem !important;
  }
}

/* ═══════════════════════════════════════════
   CONTACT PAGE — remaining teal/blue fixes
   ═══════════════════════════════════════════ */

/* .kontakt-hero has inline gradient → override transparent */
body.frontend-layout .kontakt-hero {
  background: transparent !important;
}

/* All inline color:#2a6298 elements on contact page → gold */
body.frontend-layout[data-page="contact"] [style*="color: #2a6298"],
body.frontend-layout[data-page="contact"] [style*="color:#2a6298"] {
  color: var(--rp-gold) !important;
}

/* Contact page: success alert (green) → subtle emerald glass */
body.frontend-layout[data-page="contact"] [style*="background: #d1fae5"],
body.frontend-layout[data-page="contact"] [style*="background:#d1fae5"] {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  color: #6ee7b7 !important;
}

/* Contact page: error alert (red) → subtle rose glass */
body.frontend-layout[data-page="contact"] [style*="background: #fee2e2"],
body.frontend-layout[data-page="contact"] [style*="background:#fee2e2"] {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
  color: #fca5a5 !important;
}

/* ═══════════════════════════════════════════
   HIGH-SPECIFICITY (2,x,x) BUTTON FIX
   editor-overrides.css line 309 sets:
   html:not(#\9) body form button { background-color: rgba(124,58,237,0) !important }
   which resets ALL form buttons to transparent.
   We need (2,x,x) to beat it.
   ═══════════════════════════════════════════ */

/* Gold fill buttons — login, register, forgot, newsletter */
html:not(#\9):not(#\8) body.frontend-layout .login-btn,
html:not(#\9):not(#\8) body.frontend-layout .register-btn,
html:not(#\9):not(#\8) body.frontend-layout .forgot-btn,
html:not(#\9):not(#\8) body.frontend-layout .nl-btn {
  background: var(--rp-gold) !important;
  background-color: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border: 1px solid var(--rp-gold) !important;
  border-radius: var(--rp-r-full) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html:not(#\9):not(#\8) body.frontend-layout .login-btn:hover,
html:not(#\9):not(#\8) body.frontend-layout .register-btn:hover,
html:not(#\9):not(#\8) body.frontend-layout .forgot-btn:hover,
html:not(#\9):not(#\8) body.frontend-layout .nl-btn:hover {
  background: var(--rp-gold-lt) !important;
  background-color: var(--rp-gold-lt) !important;
  box-shadow: var(--rp-sh-gold) !important;
  transform: translateY(-2px) !important;
}

/* Contact page submit button → gold */
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] form button[type="submit"] {
  background: var(--rp-gold) !important;
  background-color: var(--rp-gold) !important;
  color: var(--rp-deep) !important;
  border-color: var(--rp-gold) !important;
}

/* ═══════════════════════════════════════════
   HIGH-SPECIFICITY CONTACT ICON FIX
   editor-overrides.css sets fa-envelope/info-circle/share-alt
   to #53d3d5 (teal) with (1,x,x) specificity.
   ═══════════════════════════════════════════ */
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] div.container i.fas.fa-envelope,
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] div.container i.fas.fa-info-circle,
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] div.container i.fas.fa-share-alt {
  color: var(--rp-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FINAL VISUAL HARMONIZATION
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CONTACT: section wrappers must stay transparent ──────────
   Rule [style*="background: #ffffff"]:not(input)... has specificity (0,3,4)
   and overwrites the section:not(.contact-hero) transparent rule (0,3,2).
   This rule (0,4,2) beats it and keeps section elements clean.
   ─────────────────────────────────────────────────────────────── */
body.frontend-layout[data-page="contact"] section:not(.contact-hero)[style*="background"] {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 2. CONTACT: card heading typography → Cormorant Garamond
   Needs (2,x,x) to beat main.php (0,7,1) font-family override
   ── */
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] h2[style*="font-family"],
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] h3[style*="font-family"] {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
  letter-spacing: -0.01em !important;
}

/* ── 3. CONTACT: info card row headings (Adresse/Telefon/E-Mail) ── */
html:not(#\9):not(#\8) body.frontend-layout[data-page="contact"] h4[style*="font-family"] {
  font-family: var(--rp-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rp-gold) !important;
  margin-bottom: 0.25rem !important;
}

/* ── 4. CONTACT: input focus → gold glow ── */
body.frontend-layout[data-page="contact"] input[type="text"]:focus,
body.frontend-layout[data-page="contact"] input[type="email"]:focus,
body.frontend-layout[data-page="contact"] input[type="tel"]:focus,
body.frontend-layout[data-page="contact"] textarea:focus {
  outline: none !important;
  border-color: var(--rp-gold-border) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10) !important;
}

/* ── 5. CONTACT: custom dropdown glass ── */
body.frontend-layout[data-page="contact"] #dropdown-options {
  background: rgba(6, 17, 29, 0.97) !important;
  border-color: var(--rp-border-md) !important;
}

/* ── 6. CONTACT: card header border → premium ── */
body.frontend-layout[data-page="contact"] [style*="border-bottom: 1px solid rgba(255,255,255,0.15)"] {
  border-bottom-color: var(--rp-border-md) !important;
}

/* ── 7. CONTACT: section padding tightened ── */
body.frontend-layout[data-page="contact"] section:not(.contact-hero) {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* ── 8. ABOUT: olive-green badge text → gold
   main.php inline <style> sets font-family: var(--main-font-family) !important
   on body * with specificity (0,7,1). Must use (2,x,x) to win.
   editor-overrides sets color: var(--glass-text) with (1,2,4). Must use (2,3,x).
   ── */
html:not(#\9):not(#\8) body.frontend-layout div.about-badge-box div.about-badge-text {
  color: var(--rp-gold) !important;
  font-family: var(--rp-body) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── 9. ABOUT: vorstand avatar gradient → gold-tinted dark
   editor-overrides:569 targets div.container div:nth-of-type(1) at (1,2,4) → transparent
   vorstand-avatar is first div inside vorstand-card → affected
   Fix: (2,x,x) prefix beats (1,2,4) ── */
html:not(#\9):not(#\8) body.frontend-layout .vorstand-avatar {
  background: linear-gradient(135deg, rgba(6,17,29,0.9) 0%, rgba(255, 255, 255,0.22) 100%) !important;
  background-color: rgba(6, 17, 29, 0.9) !important;
  border: 1px solid var(--rp-gold-border) !important;
  color: var(--rp-gold) !important;
  box-shadow: 0 4px 14px rgba(3, 8, 14, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* ── 10. ABOUT: section-title h2 → Cormorant Garamond
   main.php inline <style> has (0,7,1) !important for all body *
   Need (2,x,x) via html:not(#\9):not(#\8) to override font-family.
   ── */
html:not(#\9):not(#\8) body.frontend-layout .section-title h2 {
  font-family: var(--rp-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--rp-cream) !important;
  letter-spacing: -0.01em !important;
}
html:not(#\9):not(#\8) body.frontend-layout .section-title p {
  font-family: var(--rp-body) !important;
  color: var(--rp-cream-60) !important;
  font-size: 0.9rem !important;
}

/* ── 11. ABOUT: vorstand card min-height unified ── */
body.frontend-layout .vorstand-card {
  min-height: 220px !important;
}

/* ── 12. ABOUT: badge box icon sizing ── */
body.frontend-layout .about-badge-icon {
  font-size: clamp(3rem, 6vw, 4.5rem) !important;
  margin-bottom: 1.25rem !important;
}

/* ── 13. LOGIN MOBILE: remove forced min-height centering ──────
   login.php inline style: min-height: calc(100vh - 200px) + align-items: center
   On mobile this creates large empty zones. Override to natural flow.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.frontend-layout .login-page,
  body.frontend-layout .register-page,
  body.frontend-layout .forgot-page {
    min-height: auto !important;
    padding: 1.75rem 0 2.5rem !important;
    align-items: flex-start !important;
  }
  body.frontend-layout .login-card,
  body.frontend-layout .register-card,
  body.frontend-layout .forgot-card {
    margin: 0 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }
  body.frontend-layout .login-header,
  body.frontend-layout .register-header {
    padding: 1.75rem 1.5rem 0 !important;
  }
  body.frontend-layout .login-form,
  body.frontend-layout .register-form {
    padding: 1.25rem 1.5rem 1.5rem !important;
  }
  body.frontend-layout .login-footer,
  body.frontend-layout .register-footer {
    padding: 0.875rem 1.5rem 1.25rem !important;
  }
  body.frontend-layout .login-form input[type="email"],
  body.frontend-layout .login-form input[type="password"],
  body.frontend-layout .login-form input[type="text"] {
    padding: 0.7rem 0.875rem !important;
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
  }
  body.frontend-layout .login-form-row {
    margin-bottom: 1.1rem !important;
    font-size: 0.82rem !important;
  }
  html:not(#\9):not(#\8) body.frontend-layout .login-btn {
    padding: 0.875rem 1rem !important;
    width: 100% !important;
  }
}

/* ── 14. ABOUT MOBILE: board grid consistent spacing ── */
@media (max-width: 768px) {
  body.frontend-layout .board-grid {
    gap: 0.875rem !important;
  }
  body.frontend-layout .vorstand-card {
    min-height: 190px !important;
    padding: 1.25rem 1rem !important;
  }
}

@media (max-width: 480px) {
  body.frontend-layout .board-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  body.frontend-layout .vorstand-card {
    min-height: 170px !important;
    padding: 1rem 0.875rem !important;
  }
  body.frontend-layout .vorstand-avatar {
    width: 52px !important;
    height: 52px !important;
  }
}

/* ==========================================================================
   LOGIN — Captcha integration & responsive
   Root cause: login.php sets card padding:3rem + premium.css form padding:2.5rem
   = 88px per side → 420-176 = 244px inner. hCaptcha normal = 302px → clips.
   Fix: card padding:0 (above), form padding:2rem each side → 420-64 = 356px > 302px.
   ========================================================================== */

/* Captcha wrapper — glass tile, scoped to divs that contain .h-captcha only */
body.frontend-layout .login-form > div:has(.h-captcha),
body.frontend-layout .register-form > div:has(.h-captcha),
body.frontend-layout .forgot-form > div:has(.h-captcha),
body.frontend-layout[data-page="contact"] form div:has(.h-captcha) {
  display: table !important;
  overflow: visible !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 0.5rem !important;
  background: var(--rp-glass) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--rp-r-sm) !important;
  box-shadow: 0 2px 12px rgba(3, 8, 14, 0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Center the captcha inside its wrapper */
body.frontend-layout .h-captcha,
body.frontend-layout .g-recaptcha {
  display: block !important;
  max-width: 100% !important;
}

/* Button full-width, consistent height */
body.frontend-layout .login-btn,
body.frontend-layout .register-btn,
body.frontend-layout .forgot-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.875rem 1.5rem !important;
}

/* ── Tablet ≤768px ── */
@media (max-width: 768px) {
  body.frontend-layout .login-page,
  body.frontend-layout .register-page,
  body.frontend-layout .forgot-page {
    padding: 3rem 1rem 3rem !important;
    align-items: flex-start !important;
    min-height: auto !important;
  }
  body.frontend-layout .login-card,
  body.frontend-layout .register-card,
  body.frontend-layout .forgot-card {
    max-width: 100% !important;
    border-radius: var(--rp-r-lg) !important;
  }
}

/* ── Mobile ≤500px: tighten horizontal padding so 302px captcha fits ── */
/* At 390px: card ≈ 358px. form h-pad 1rem each side → inner 326px > 302px ✓  */
@media (max-width: 500px) {
  body.frontend-layout .login-header,
  body.frontend-layout .forgot-header,
  body.frontend-layout .register-header {
    padding: 1.75rem 1.25rem 0 !important;
  }
  body.frontend-layout .login-form,
  body.frontend-layout .forgot-form,
  body.frontend-layout .register-form {
    padding: 1.25rem 1rem 1.5rem !important;
  }
  body.frontend-layout .login-footer,
  body.frontend-layout .forgot-footer {
    padding: 0.875rem 1.25rem 1.5rem !important;
  }
}

/* ── ≤380px: gentle scale so captcha iframe stays within card ──
   At 375px: card ≈ 311px, form pad 1rem = inner 279px, iframe 302px overflows 23px.
   div right-margin = 17px → net overflow = 23-17 = 6px. scale(0.97) → visual 293px ✓ */
@media (max-width: 380px) {
  body.frontend-layout .h-captcha,
  body.frontend-layout .g-recaptcha {
    transform: scale(0.97) !important;
    transform-origin: left center !important;
  }
}

/* ==========================================================================
   GLOBAL CARD HOVER — unified lighter lift for all glass panels
   ========================================================================== */
body.frontend-layout .feature-card:hover,
body.frontend-layout .vorstand-card:hover,
body.frontend-layout .album-card:hover,
body.frontend-layout .news-card:hover,
body.frontend-layout .offer-card:hover {
  border-color: rgba(255, 255, 255, 0.26) !important;
  box-shadow:
    0 16px 44px rgba(3, 8, 14, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* ==========================================================================
   MOBILE SINGLE-LINE — hero-tagline + section-header p
   Must be LAST to beat the global high-specificity blocks above.
   ========================================================================== */
@media (max-width: 479px) {
  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline,
  html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline {
    font-size: clamp(0.78rem, 3.4vw, 0.88rem) !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    gap: 0 !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline::before,
  html:not(#\9):not(#\8) body.frontend-layout .hero-tagline::after,
  html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline::before,
  html:not(#\9):not(#\8) body.frontend-layout div.hero-content p.hero-tagline::after {
    display: none !important;
    width: 0 !important;
    content: none !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout div.section-header p,
  html:not(#\9):not(#\8) body.frontend-layout .section-header p {
    font-size: clamp(0.78rem, 3.3vw, 0.88rem) !important;
    letter-spacing: 0.10em !important;
    white-space: nowrap !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .header-login-btn {
    display: none !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout div.brand-text h1,
  html:not(#\9):not(#\8) body.frontend-layout .brand-text h1 {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(0.75rem, 3.1vw, 0.9rem) !important;
    line-height: 1.1 !important;
  }

  html:not(#\9):not(#\8) body.frontend-layout .hero-title,
  html:not(#\9):not(#\8) body.frontend-layout h1.hero-title,
  html:not(#\9):not(#\8) body.frontend-layout .hero .hero-title {
    white-space: nowrap !important;
    font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;
  }
}