/* ==========================================================================
   DESIGN SYSTEM - GIGI'S ART REBRANDING (CONTEMPORARY HERITAGE)
   ========================================================================== */

/* Import Google Fonts: Cinzel (Elegant Serif) & Inter (Sharp Sans-Serif) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette Tokens - Flyer-Inspired Warm Sand & Dark Espresso */
  --bg-primary: #cabfaf; /* Sandstone base matching Flyer.pdf dominant color */
  --bg-secondary: #fbf8f3; /* Rich warm cream / soft linen white for high-contrast card blocks */
  --bg-tertiary: #b3a797; /* Rich sandstone shadow tone, adjusted for new sandstone base */
  
  /* 15.08.2026: von #387c44 nachgedunkelt. Auf dem Sandstein-Hintergrund kam die
     alte Farbe nur auf Kontrast 2.80 - ausgerechnet die hervorgehobenen Woerter
     waren die am schlechtesten lesbaren. Jetzt 4.96. */
  --accent-gold: #27522f;
  --accent-gold-rgb: 39, 82, 47;

  /* Toene fuer Text auf dunklem Grund (Kopf- und Fusszeile). Die duerfen NICHT
     mitgedunkelt werden, dort wirkt es andersherum. */
  --accent-on-dark: #6cc47f;
  --text-on-dark: #cfc7ba;
  /* 15.08.2026 nachgedunkelt: vorher #2e6236, auf dem Sandstein nur 4.0.
     Traegt die kleinen Beschriftungen wie 'Materialien' oder 'Seminargebuehr'. */
  --accent-bronze: #24502c;
  --accent-moss: #27522f; /* Saturated medieval forest moss green */
  --accent-moss-rgb: 39, 82, 47;
  --leather-brown: #6b3e1c; /* Solid deep leather-wrapped wood brown */
  --leather-brown-rgb: 107, 62, 28;
  --accent-red: #8f2121; /* Medieval blood red */
  
  --text-light: #1c1814; /* Swapped: Deep espresso charcoal for main body text and headings */
  --text-muted: #4a453c; /* 15.08.2026 nachgedunkelt: vorher #575249, Kontrast nur 4.28 */
  --text-dark: #fcfbfa; /* Swapped: Creamy white for dark contrast components (buttons, footer) */
  
  --border-color: rgba(107, 62, 28, 0.45);
  --border-gold: rgba(56, 124, 68, 0.6);
  --border-width: 3px;
  
  --glass-bg: rgba(246, 238, 223, 0.94); /* Warm oak milk glass */
  
  /* Typography Tokens */
  --font-serif: 'Cinzel', serif;
  --font-sans: 'Inter', sans-serif;
  
  /* Shadow & Glow Tokens - Tactile Outline Layers adapted for Light Canvas */
  --glow-gold: 0 0 20px rgba(56, 124, 68, 0.18);
  --shadow-dark: 0 10px 30px rgba(107, 62, 28, 0.12);
  --shadow-rough: 4px 4px 0px rgba(107, 62, 28, 0.28);
  --shadow-rough-gold: 4px 4px 0px rgba(56, 124, 68, 0.35);
  
  /* Animation Timing */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.2s ease;

  /* Irregular hand-hewn curves mimicking rustic timber / leather slabs */
  --border-radius-raw-1: 95px 15px 150px 20px / 20px 120px 15px 95px;
  --border-radius-raw-2: 25px 95px 20px 120px / 120px 20px 95px 25px;
  --border-radius-raw-3: 15px 90px 15px 90px / 90px 15px 90px 15px;
}

/* ==========================================================================
   BASE & RESET STYLES
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary);
  color: var(--text-light);
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  line-height: 1.7;
  letter-spacing: 0.02em;
  background-color: var(--bg-primary);
  background-image: 
    repeating-linear-gradient(rgba(107, 62, 28, 0.012) 0px, rgba(107, 62, 28, 0.012) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(107, 62, 28, 0.012) 0px, rgba(107, 62, 28, 0.012) 1px, transparent 1px, transparent 5px),
    radial-gradient(circle at 15% 15%, rgba(76, 90, 71, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(107, 62, 28, 0.08) 0%, transparent 60%);
  background-position: left top, left top, left top, left top;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed;
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9), 2px 2px 4px rgba(0, 0, 0, 0.45);
}

a {
  color: var(--accent-bronze);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(207, 163, 56, 0.3);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

li {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

/* Custom Scrollbar - Leather and Forest theme */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-moss);
  border: 2px solid var(--bg-primary);
  border-radius: 6px;
  transition: var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* Custom text selection in organic forest green */
::selection {
  background-color: var(--accent-moss);
  color: var(--text-dark) !important;
}

/* ==========================================================================
   REUSABLE UTILITIES & LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-padding {
  padding: 8rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
}

.section-header h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
  position: relative;
  display: block;
  max-width: 100%;
}

.section-header h2::after {
  content: '🏹';
  display: block;
  font-size: 1.3rem;
  color: var(--accent-gold);
  text-shadow: var(--glow-gold);
  margin: 0.8rem auto 0 auto;
  letter-spacing: 0;
}

.section-header h2::before {
  content: '';
  display: block;
  width: 180px;
  height: 3px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, var(--accent-moss) 4px, var(--accent-moss) 12px);
  margin: 0 auto 1.2rem auto; /* Added 1.2rem bottom margin for spacious breathing room */
  border-radius: 50%;
  opacity: 0.9;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 1.2rem auto 0 auto;
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fcfbfa; /* Creamy light text for maximum contrast on leather brown */
  border: var(--border-width) solid var(--accent-moss);
  border-radius: var(--border-radius-raw-1);
  position: relative;
  background: var(--accent-moss); /* Solid premium waldgrün background */
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-rough);
  z-index: 1;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
  z-index: -1;
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcfbfa; /* Cream/white light overlay for clean illumination on hover */
  opacity: 0;
  transition: var(--transition-smooth);
  z-index: -2;
}

.btn-premium:hover {
  color: #fcfbfa;
  border-color: var(--accent-moss);
  box-shadow: 4px 4px 0px rgba(var(--accent-moss-rgb), 0.35), 0 0 15px rgba(var(--accent-moss-rgb), 0.35) !important;
  transform: translateY(-2px) rotate(-0.5deg);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium:hover::after {
  opacity: 0.15; /* Subtle light overlay on hover */
}

.btn-secondary {
  color: var(--text-light); /* Deep espresso text on soft background */
  border-color: rgba(var(--accent-moss-rgb), 0.5) !important; /* Waldgrün outline matching style updates */
  border-radius: var(--border-radius-raw-2);
  background: rgba(var(--accent-moss-rgb), 0.08) !important; /* Soft semi-transparent waldgrün background */
  box-shadow: 4px 4px 0px rgba(var(--accent-moss-rgb), 0.18);
}

.btn-secondary::after {
  background: var(--accent-moss);
}

.btn-secondary:hover {
  color: #fcfbfa; /* Transition text color to light as background goes dark */
  border-color: var(--accent-moss);
  box-shadow: var(--shadow-rough), 0 0 15px rgba(var(--accent-moss-rgb), 0.3);
}

.btn-secondary:hover::after {
  opacity: 0.85; /* Transition to solid waldgrün on hover */
}

/* ==========================================================================
   STICKY HEADER & NAV
   ========================================================================== */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.6rem 0; /* spacious default padding */
  background-color: #121412;
  background-image: 
    repeating-linear-gradient(rgba(124, 75, 36, 0.015) 0px, rgba(124, 75, 36, 0.015) 1px, transparent 1px, transparent 4px),
    linear-gradient(to bottom, rgba(24, 27, 24, 0.8), rgba(14, 16, 14, 0.95)),
    url('assets/images/header_bark_texture.png');
  background-position: left top, left top, center center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, 100% 100%, cover;
  border-bottom: 3px solid var(--leather-brown);
  box-shadow: var(--shadow-dark), 0 5px 15px rgba(0, 0, 0, 0.5);
  transition: var(--transition-smooth);
}

/* Hardware-accelerated dark overlay for buttery smooth scroll transition */
.main-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(11, 13, 11, 0.95), rgba(8, 9, 8, 0.98));
  z-index: -1;
  opacity: 0; /* fully transparent at the top */
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.main-header.scrolled::before {
  opacity: 0.96; /* smoothly covers the header background with a dark solid backdrop on scroll */
}

.main-header::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom: 1.5px dashed var(--accent-gold);
  opacity: 0.5;
  pointer-events: none;
}

.main-header.scrolled {
  padding: 0.3rem 0; /* compact scrolled padding */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  transition: var(--transition-smooth); /* perfectly synchronized height resizing */
  position: relative;
  z-index: 1; /* sits above the ::before overlay */
}

.main-header.scrolled .nav-container {
  height: 60px;
}

.logo-wrapper a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  color: var(--text-light);
  text-decoration: none;
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.logo-main {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.1;
  color: var(--text-light);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9), 0 0 12px rgba(207, 163, 56, 0.3);
  transition: var(--transition-smooth);
  white-space: nowrap; /* prevent text wrapping */
}

.logo-sub {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-on-dark);
  margin-top: 2px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9);
  transition: var(--transition-smooth);
  white-space: nowrap; /* prevent text wrapping */
}

/* Explicit high-contrast branding overrides for the sticky dark header */
.main-header .logo-main {
  color: #fcfbfa !important; /* Creamy white for dark background */
}

.main-header .logo-sub {
  color: #5cb870 !important; /* Strahlendes Waldgrün für Premium-Kontrast auf dem dunklen Balken */
}

.nav-menu-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.nav-menu {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.nav-link {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(252, 251, 250, 0.75); /* Premium-Creme für exzellenten Kontrast */
  position: relative;
  padding: 0.5rem 0;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #5cb870; /* Strahlendes Waldgrün */
  transition: var(--transition-fast);
  box-shadow: 0 0 8px rgba(92, 184, 112, 0.6);
}

.nav-link:hover, .nav-link.active {
  color: #5cb870; /* Strahlendes Waldgrün im aktiven/Hover-Zustand */
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.mobile-nav-toggle {
  display: none;
  font-size: 1.8rem;
  color: #fcfbfa; /* Hardcoded creamy white – must stay visible on dark header in BOTH light and dark theme */
  cursor: pointer;
  transition: var(--transition-fast);
  background: none;
  border: none;
  padding: 0.25rem;
}

.mobile-nav-toggle:hover {
  color: var(--accent-gold);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Changed from height: 100vh to allow auto-expansion on small viewports */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Changed from hidden to visible so the background circle can extend into the next section */
  text-align: center;
  padding-top: 7.5rem; /* Spacious mobile header buffer */
  box-sizing: border-box;
  background-color: var(--bg-primary); /* Adapted: sandstone base in light mode, deep black-espresso in dark mode */
  z-index: 1; /* Establishes a stacking context below the main content */
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 125vh; /* Extends below the 100vh fold to show the lower half of the circle */
  background-image: url('assets/images/hohlweg_2.png');
  background-size: auto 120vh; /* scaled up mobile image scale to be grander */
  background-position: center 6vh; /* shifted down to align the canopy and path beautifully under the mobile header navigation */
  background-repeat: no-repeat;
  opacity: 0.55; /* high-end visual presence, details remain prominent */
  filter: sepia(0.12) contrast(1.02) brightness(0.96); /* subtle warm sandstone sepia tint matching the Elefantenhaut */
  z-index: 1; /* positive z-index to paint in front of the parent's solid background-color */
  transform: scale(1.02);
  transform-origin: center top; /* zoom anchor from the center-top */
  animation: subtleZoom 25s infinite alternate ease-in-out;
  /* Light bottom fade-out at the very end of the extended background circle (starts at 106vh for mobile) */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 1101px) {
  .hero-section {
    padding-top: 8rem; /* Spacious desktop header buffer */
  }
  .hero-bg {
    height: 145vh; /* Extends below the 100vh fold on desktop to show the lower half of the circle */
    background-size: auto 140vh; /* scaled up desktop image scale to be double-sized and majestic */
    background-position: center 8vh; /* shifted down to clear the desktop header navigation buffer beautifully */
  }
}

@keyframes subtleZoom {
  0% { transform: scale(1.01) translate(0,0); }
  100% { transform: scale(1.06) translate(0, -1%); }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(18, 20, 18, 0.72) 0%, /* dark overlay at the top for solid main header contrast */
    rgba(18, 20, 18, 0.2) 25%,
    transparent 35%, /* completely transparent in the center for pristine image clarity */
    transparent 100% /* stays completely transparent to the bottom so the image flows seamlessly into the next section */
  );
  z-index: 2; /* placed in front of hero-bg */
}

.hero-content {
  position: relative;
  z-index: 3; /* placed at the very top for pristine text legibility and click interactivity */
  max-width: 900px;
  padding: 0 2rem;
  margin-top: 5.5rem; /* push down entire hero block to clear fixed sticky navigation */
  animation: fadeInUp 1.2s ease-out forwards;
  will-change: transform, opacity;
}

.hero-brand-symbol {
  margin-bottom: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-emblem-image {
  width: 27rem;
  height: 27rem;
  object-fit: contain;
  /* Clean, sharp dark drop-shadow optimized for the white triskele (removed blurry green drop-shadow) */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  animation: heroPulse 6s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease;
  user-select: none;
  image-rendering: -webkit-optimize-contrast; /* Forces razor-sharp downscaling from 2000px to 144px */
}

.hero-emblem-image:hover {
  animation-play-state: paused;
  transform: scale(1.08) rotate(6deg);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}

@keyframes heroPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* Gentle brand pulsing in place */
  }
  100% {
    transform: scale(1);
  }
}

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

.hero-pretitle {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700; /* Added: Bold weight for maximum letter definition */
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #fcfbfa; /* Changed: High-prestige crisp cream white for maximum contrast */
  margin-bottom: 1.5rem;
  display: inline-block;
  position: relative;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.98), 0 0 6px rgba(0, 0, 0, 0.95); /* Changed: Double-layered dark shadow for complete isolation from detailed foliage */
}

.hero-pretitle::after {
  content: '';
  display: block;
  width: 40px;
  height: 1.5px;
  background: #fcfbfa; /* Changed: Matches bright cream text */
  margin: 0.5rem auto 0 auto;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
  line-height: 1.2;
  color: #ffffff; /* High-prestige crisp white text */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.95), 4px 4px 10px rgba(0, 0, 0, 0.65);
}

.hero-title span {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: #ffffff; /* Crisp pure white text for perfect legibility */
  letter-spacing: 0.22em;
  margin-top: 1rem;
  font-family: var(--font-sans);
  opacity: 1;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.95);
}

.hero-motto {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  color: #ffffff;
  max-width: 760px;
  margin: 0 auto 3rem auto;
  letter-spacing: 0.05em;
  position: relative;
  padding: 1.6rem 2.2rem;
  background: rgba(14, 20, 15, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--border-radius-raw-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 15px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.95);
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

/* Elite high-contrast button styling inside the dark hero section overlay */
.hero-actions .btn-secondary {
  color: #fcfbfa !important;
  background: rgba(22, 35, 25, 0.65) !important; /* Premium unified forest waldgrün glass */
  backdrop-filter: blur(8px); /* Blur to prevent uneven background leaf bleed */
  border-color: rgba(92, 184, 112, 0.4) !important; /* Subtly glowing leaf green border */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.hero-actions .btn-secondary::after {
  background: #5cb870 !important; /* Elegant green solid backdrop overlay on hover */
}

.hero-actions .btn-secondary:hover {
  color: #12100d !important; /* Transitions to crisp dark espresso text on hover */
  border-color: #5cb870 !important;
  box-shadow: 0 0 20px rgba(92, 184, 112, 0.45) !important;
  text-shadow: none !important;
}

.hero-actions .btn-secondary:hover::after {
  opacity: 1 !important; /* Transitions to solid forest green on hover */
}

.scroll-indicator {
  position: relative;
  margin-top: 3.5rem;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(252, 251, 250, 0.85); /* Changed: Soft, bright cream white for maximum contrast */
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
  opacity: 0.9; /* Changed: Increased slightly for better visibility */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* Added: Drop shadow to isolate text from forest texture */
}

.scroll-indicator svg {
  fill: #5cb870; /* Changed: Radiant, bright leaf green to match rebranded accent */
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); /* Added: Drop shadow for sharp definition */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* ==========================================================================
   DER BOGENBAUER (STORY)
   ========================================================================== */

#story {
  position: relative;
  z-index: 2; /* Sits in front of the overflowing hero-bg circle */
}

.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5rem;
  align-items: center;
}

.story-text {
  animation: fadeIn 1.5s ease;
}

.story-text p {
  color: var(--text-muted);
  margin-bottom: 1.8rem;
  font-size: 1.05rem;
  text-align: justify;
}

.story-text p:first-of-type {
  font-size: 1.15rem;
  color: var(--text-light);
  line-height: 1.8;
}

.story-text strong {
  color: var(--accent-gold);
}

.story-image-panel {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.story-collage {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 520px;
  margin: 0 auto;
}

.collage-card {
  position: absolute;
  transition: var(--transition-smooth);
}

.card-drawing {
  top: 0;
  left: 0;
  width: 72%;
  z-index: 2;
}

.card-photo {
  bottom: 10px;
  right: 0;
  width: 66%;
  z-index: 3;
}

/* Tactile visual hierarchy: dim and scale down the non-hovered card */
.story-collage:hover .collage-card:not(:hover) {
  opacity: 0.72;
  filter: grayscale(15%) contrast(95%);
  transform: scale(0.97);
}

/* Elevate and enlarge the hovered card to focus user attention */
.story-collage .collage-card:hover {
  opacity: 1;
  z-index: 10;
  transform: translateY(-8px) scale(1.03);
}

.story-image-wrapper {
  position: relative;
  border: 2px solid var(--border-color);
  padding: 1rem; /* compact padding for collage density */
  background: var(--bg-secondary);
  box-shadow: var(--shadow-dark);
  border-radius: var(--border-radius-raw-3);
  transition: var(--transition-smooth);
}

.story-image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--accent-gold);
  transform: translate(-10px, 10px);
  z-index: -1;
  pointer-events: none;
  transition: var(--transition-smooth);
  border-radius: var(--border-radius-raw-3);
}

/* Allow custom border colors for different cards in the collage */
.story-image-wrapper.border-leather::before {
  border-color: var(--leather-brown);
}

.story-image-wrapper:hover::before {
  transform: translate(-3px, 3px); /* elegant micro parallax counter-balance */
}

.story-image-wrapper img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: var(--transition-smooth);
  border-radius: calc(var(--border-radius-raw-3) - 8px);
  display: block;
}

.story-image-wrapper:hover img {
  transform: scale(1.02);
}

.story-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(135deg, var(--accent-moss) 0%, #303d2b 100%);
  border: 1.5px solid var(--accent-gold);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-dark);
  z-index: 2;
  box-shadow: var(--glow-gold);
}

.story-badge span:first-child {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fcfbfa; /* Creamy white for extreme legibility on dark green background */
  line-height: 1;
}

.story-badge span:last-child {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fcfbfa; /* Creamy white for extreme legibility on dark green background */
  display: block;
  margin-top: 5px;
}

/* ==========================================================================
   DIE BÖGEN & INTERACTIVE PREVIEW
   ========================================================================== */

/* Vom Baum zum Bogen 6-Grid */
.tree-to-bow-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.8rem;
  margin-bottom: 5rem;
}

@media (max-width: 1024px) {
  .tree-to-bow-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .tree-to-bow-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

.tree-to-bow-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tree-to-bow-card a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-dark);
  transition: var(--transition-smooth);
  position: relative;
  cursor: pointer;
}

.tree-to-bow-card a:hover {
  border-color: var(--accent-moss);
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--accent-moss-rgb), 0.4);
}

.tree-to-bow-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition-smooth);
}

.tree-to-bow-card a:hover img {
  transform: scale(1.08);
}

.tree-to-bow-step {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-gold);
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 5rem;
}

.card-organic {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 2.5rem;
  position: relative;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-raw-1);
}

.card-organic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--leather-brown);
  transition: var(--transition-smooth);
  border-radius: 6px 6px 0 0;
}

.card-organic:hover {
  transform: translateY(-5px);
  border-color: var(--accent-moss);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(var(--accent-moss-rgb), 0.35);
}

.card-organic:hover::before {
  background: var(--accent-moss);
  box-shadow: 0 0 10px rgba(var(--accent-moss-rgb), 0.5);
}

.card-icon {
  margin-bottom: 2rem;
  color: var(--accent-moss);
}

.card-icon svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
  opacity: 0.85;
}

.card-organic h3 {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.card-organic p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.card-footer {
  margin-top: auto;
  border-top: 1px solid rgba(139, 90, 43, 0.1);
  padding-top: 1.5rem;
}

.card-link {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-moss);
}

.card-link::after {
  content: '→';
  transition: var(--transition-fast);
}

.card-link:hover {
  color: var(--accent-gold);
}

.card-link:hover::after {
  transform: translateX(5px);
}

/* Bow Detail Frame & Interactive showcase */
.bows-showcase {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  box-shadow: var(--shadow-dark);
  border-radius: var(--border-radius-raw-3);
  overflow: hidden;
}

.showcase-image-panel {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.showcase-image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 8s ease-in-out;
}

.bows-showcase:hover .showcase-image-panel img {
  transform: scale(1.08);
}

.showcase-content-panel {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.showcase-tag {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--accent-gold);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  display: block;
}

.showcase-content-panel h3 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.showcase-content-panel p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

.configurator-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(139, 90, 43, 0.15);
  padding-bottom: 1rem;
}

.config-tab {
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--border-color);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: var(--transition-fast);
  color: var(--text-light);
  background: transparent;
}

.config-tab.active {
  border-color: var(--accent-moss);
  background: var(--accent-moss);
  color: var(--text-dark) !important;
  box-shadow: 4px 4px 0px rgba(var(--accent-moss-rgb), 0.25);
}

.config-tab:hover:not(.active) {
  border-color: var(--accent-moss);
  color: var(--accent-moss);
  background: rgba(var(--accent-moss-rgb), 0.08);
}

/* ==========================================================================
   PFEILE & ZUBEHÖR
   ========================================================================== */

.arrows-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.arrows-image-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.arrow-image-banner {
  border: 2px solid var(--border-color);
  padding: 0.5rem;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-dark);
  transition: var(--transition-smooth);
  overflow: hidden;
  display: block;
  border-radius: var(--border-radius-raw-1);
}

.arrow-image-banner:hover {
  border-color: var(--border-gold);
  box-shadow: var(--glow-gold);
}

.arrow-image-banner img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: var(--transition-smooth);
  border-radius: calc(var(--border-radius-raw-1) - 4px);
}

.arrow-image-banner:hover img {
  transform: scale(1.04);
}


.arrow-feature-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 2.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.5rem;
  transition: var(--transition-smooth);
  border-radius: var(--border-radius-raw-2);
}

.arrow-feature-card:hover {
  border-color: var(--accent-moss);
  box-shadow: 0 10px 25px rgba(var(--accent-moss-rgb), 0.2);
  transform: translateX(5px);
}

.arrow-feature-icon {
  color: var(--accent-moss);
  flex-shrink: 0;
}

.arrow-feature-icon svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
}

.arrow-feature-content h4 {
  font-size: 1.15rem;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  letter-spacing: 0.05em;
}

.arrow-feature-content p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Configurator Arrows Panel */
.arrows-config-panel {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 3rem;
  box-shadow: var(--shadow-dark);
  border-radius: var(--border-radius-raw-3);
}

.arrows-config-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(139, 90, 43, 0.15);
  padding-bottom: 1.5rem;
}

.arrows-config-header h3 {
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.arrow-detail-display {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.arrow-detail-display p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  background: var(--bg-tertiary);
  padding: 1.8rem;
  border: 1px solid rgba(139, 90, 43, 0.1);
}

.spec-item {
  display: flex;
  flex-direction: column;
}

.spec-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--accent-moss);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.spec-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 2px;
}

/* ==========================================================================
   ANGEBOTE & SEMINARE
   ========================================================================== */

.course-box {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  box-shadow: var(--shadow-dark);
  margin-bottom: 4rem;
  border-radius: var(--border-radius-raw-3);
  overflow: hidden;
}

.course-info {
  padding: 4rem;
}

.course-info h3 {
  font-size: 2.2rem;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  line-height: 1.2;
}

.course-subtitle {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--accent-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2rem;
}

.course-desc {
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

.course-details-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.course-detail-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid rgba(139, 90, 43, 0.1);
  padding-bottom: 0.8rem;
}

.course-detail-row:last-child {
  border-bottom: none;
}

.course-detail-label {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-bronze);
  font-weight: 600;
}

.course-detail-val {
  font-size: 0.95rem;
  color: var(--text-light);
}

.course-action-card {
  background: var(--bg-tertiary);
  padding: 4rem 3rem;
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.course-price-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.course-price-val {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-moss);
  line-height: 1;
  margin: 0.8rem 0 1.5rem 0;
  text-shadow: 0 0 15px rgba(var(--accent-moss-rgb), 0.25);
}

.course-price-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 3rem;
  line-height: 1.5;
}

/* Event Services list */
.services-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem auto;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 3rem 2rem;
  text-align: center;
  transition: var(--transition-smooth);
  border-radius: var(--border-radius-raw-1);
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-moss);
  box-shadow: 0 10px 30px rgba(var(--accent-moss-rgb), 0.25);
}

.service-icon {
  color: var(--accent-moss);
  margin-bottom: 2rem;
  display: inline-block;
}

.service-icon svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
}

.service-card h4 {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ==========================================================================
   PRESSE & DOWNLOADS
   ========================================================================== */

.press-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: stretch; /* Stretch columns to equal height */
}

.press-list-wrapper h3,
.download-panel h3 {
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(139, 90, 43, 0.15);
  padding-bottom: 1rem;
}

.press-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-smooth);
  border-radius: var(--border-radius-raw-2);
}

.press-item:hover {
  border-color: var(--accent-moss);
  box-shadow: 0 5px 15px rgba(var(--accent-moss-rgb), 0.2), 0 5px 15px rgba(0,0,0,0.3);
  transform: translateX(5px);
}

.press-meta {
  display: flex;
  flex-direction: column;
}

.press-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.press-source {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--accent-bronze);
  letter-spacing: 0.08em;
}

.press-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-bronze);
  transition: var(--transition-fast);
}

.press-item:hover .press-btn {
  border-color: var(--accent-moss);
  color: var(--accent-moss);
  background: rgba(var(--accent-moss-rgb), 0.12);
  box-shadow: 0 0 10px rgba(var(--accent-moss-rgb), 0.35);
}

.press-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.download-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.download-box {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-dark);
  border-radius: var(--border-radius-raw-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1; /* Stretch to fill full height of the grid column */
}

.download-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--leather-brown), var(--accent-moss));
}

.download-icon {
  color: var(--accent-moss);
  margin-bottom: 2rem;
}

.download-icon svg {
  width: 64px;
  height: 64px;
  fill: currentColor;
  filter: drop-shadow(0 0 15px rgba(var(--accent-moss-rgb), 0.25));
}

.download-box h4 {
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.download-box p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 3rem;
  line-height: 1.6;
}

/* ==========================================================================
   KONTAKT, IMPRESSUM & DATENSCHUTZ
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5rem;
}

.contact-info-panel h3 {
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.contact-details-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 4rem;
}

.contact-detail-item {
  display: flex;
  gap: 1.5rem;
}

.contact-detail-icon {
  color: var(--accent-moss);
  flex-shrink: 0;
  margin-top: 5px;
}

.contact-detail-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.contact-detail-text h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--accent-bronze);
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
  text-shadow: none;
}

.contact-detail-text p, .contact-detail-text a {
  font-size: 1.15rem;
  color: var(--text-light);
  line-height: 1.5;
}

.contact-detail-text a:hover {
  color: var(--accent-moss);
}

.social-links-wrapper h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-bottom: 1.2rem;
  text-shadow: none;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.social-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

.social-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Contact Form */
.contact-form-panel {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 4rem;
  box-shadow: var(--shadow-dark);
  border-radius: var(--border-radius-raw-3);
}

.contact-form-panel h3 {
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(139, 90, 43, 0.15);
  padding-bottom: 1rem;
}

.form-group {
  margin-bottom: 2rem;
}

.form-group label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-bronze);
  margin-bottom: 0.6rem;
}

.form-control {
  width: 100%;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  padding: 1rem 1.2rem;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.95rem;
  transition: var(--transition-fast);
  border-radius: 6px 3px 5px 3px / 3px 5px 3px 6px;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-checkbox {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.form-checkbox input[type="checkbox"] {
  accent-color: var(--accent-gold);
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

.form-checkbox label {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.form-checkbox label a {
  color: var(--accent-bronze);
  text-decoration: underline;
}

.form-checkbox label a:hover {
  color: var(--accent-gold);
}

/* Form success message */
.form-success-overlay {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.success-icon {
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
}

.success-icon svg {
  width: 64px;
  height: 64px;
  fill: currentColor;
}

.success-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  color: var(--accent-gold);
}

.success-desc {
  color: var(--text-muted);
  max-width: 400px;
  margin-bottom: 2rem;
}

/* Legal Sections Tab system */
.legal-tabs-wrapper {
  margin-top: 8rem;
  border-top: 1px solid rgba(139, 90, 43, 0.15);
  padding-top: 5rem;
}

.legal-tabs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.legal-tab-btn {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-light);
  padding: 0.6rem 1.8rem;
  border: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.legal-tab-btn.active {
  border-color: var(--leather-brown);
  background: var(--leather-brown);
  color: var(--text-dark) !important;
  box-shadow: var(--shadow-rough);
}

.legal-tab-btn:hover:not(.active) {
  border-color: var(--leather-brown);
  color: var(--leather-brown);
  background: rgba(107, 62, 28, 0.05);
}

.legal-content-container {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 4rem;
  box-shadow: var(--shadow-dark);
  display: none;
  border-radius: var(--border-radius-raw-3);
}

.legal-content-container.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

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

.legal-text h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 2.5rem 0 1rem 0;
  color: var(--accent-gold);
  border-bottom: 1px solid rgba(139, 90, 43, 0.1);
  padding-bottom: 0.5rem;
  text-shadow: none;
}

.legal-text h3:first-of-type {
  margin-top: 0;
}

.legal-text h4 {
  font-size: 1rem;
  text-transform: uppercase;
  margin: 1.8rem 0 0.8rem 0;
  color: var(--text-light);
  text-shadow: none;
}

.legal-text p {
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.legal-text ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.legal-text li {
  color: var(--text-muted);
  list-style-type: square;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   LIGHTBOX GALLERY STYLES
   ========================================================================== */

.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 18, 17, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--text-light);
  font-size: 2.5rem;
  transition: var(--transition-fast);
}

.lightbox-close:hover {
  color: var(--accent-gold);
  transform: rotate(90deg);
}

.lightbox-img-wrapper {
  max-width: 80%;
  max-height: 80vh;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: var(--border-radius-raw-3);
}

.lightbox-img-wrapper::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 3px solid var(--accent-gold);
  box-shadow: 0 0 50px rgba(0,0,0,0.8), var(--glow-gold);
  border-radius: inherit;
  filter: url('#rough-edge');
  pointer-events: none;
  z-index: 3;
}

.lightbox-overlay.active .lightbox-img-wrapper {
  transform: scale(1);
}

.lightbox-img-wrapper img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

.lightbox-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(16, 18, 17, 0.85);
  border-top: 1px solid var(--border-color);
  padding: 1.2rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fcfbfa;
  text-align: center;
  z-index: 2;
  border-bottom-right-radius: 15px 90px;
  border-bottom-left-radius: 90px 15px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.main-footer {
  background: #090a09;
  border-top: 1px solid var(--border-color);
  padding: 4rem 0 2rem 0;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-logo .logo-main {
  font-size: 2rem;
  color: #fcfbfa !important; /* Creamy white text for dark footer background */
}

.footer-logo .logo-sub {
  font-size: 0.8rem;
  color: var(--accent-gold) !important; /* Gold subtext for high-prestige contrast */
}

.footer-nav {
  display: flex;
  gap: 2.5rem;
}

.footer-nav-link {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-dark);
}

.footer-nav-link:hover {
  color: var(--accent-gold);
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(163, 168, 164, 0.5);
  border-top: 1px solid rgba(139, 90, 43, 0.05);
  padding-top: 2rem;
  width: 100%;
}

/* ==========================================================================
   RESPONSIVENESS (MEDIA QUERIES)
   ========================================================================== */

/* Compact desktop menu gaps and logo sizing on smaller viewports to prevent overlaps */
@media (min-width: 1101px) and (max-width: 1366px) {
  .nav-menu {
    gap: 1.1rem;
  }
  .logo-main {
    font-size: 1.45rem !important;
  }
  .logo-sub {
    font-size: 0.58rem !important;
    letter-spacing: 0.28em !important;
  }
  .logo-icon {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }
}

@media (min-width: 1101px) and (max-width: 1200px) {
  .nav-menu {
    gap: 0.8rem;
  }
  .nav-link {
    font-size: 0.8rem;
  }
}

/* Activate mobile navigation menu early to prevent overlaps on smaller desktop resolutions */
@media (max-width: 1100px) {
  .mobile-nav-toggle {
    display: block;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001; /* Ensure toggle stays interactive and on top */
  }
  
  .nav-menu {
    position: fixed;
    top: 96px; /* Position dropdown perfectly below default spacious header */
    left: 0;
    width: 100%;
    height: calc(100vh - 96px);
    background: rgba(16, 18, 17, 0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
    
    /* Premium smooth transition instead of abrupt snap */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.4s;
    pointer-events: none;
  }
  
  /* Compact dropdown position on scrolled compact header */
  .main-header.scrolled .nav-menu {
    top: 70px;
    height: calc(100vh - 70px);
  }
  
  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .nav-link {
    font-size: 1.2rem;
    color: #fcfbfa; /* Creamy white for high contrast in dark mobile menu drawer */
  }
}

@media (max-width: 1024px) {
  .story-grid, .arrows-split, .arrows-main-layout, .press-layout, .contact-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  
  .story-image-panel {
    order: -1;
  }
  
  .course-box {
    grid-template-columns: 1fr;
  }
  
  .course-action-card {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  
  .section-padding {
    padding: 5rem 0;
  }

  .hero-section {
    height: auto !important;
    min-height: 100vh;
    padding-bottom: 6rem;
    box-sizing: border-box;
  }

  .hero-emblem-image {
    width: 19.5rem !important;
    height: 19.5rem !important;
  }
  
  .hero-title {
    font-size: 2.6rem;
  }
  
  .hero-title span {
    font-size: 1.2rem;
  }
  
  .hero-motto {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem;
  }

  .scroll-indicator {
    display: none !important;
  }
  
  .bows-showcase {
    grid-template-columns: 1fr;
  }
  
  .showcase-content-panel {
    padding: 2.5rem;
  }
  
  .arrows-config-panel, .contact-form-panel, .download-box, .legal-content-container {
    padding: 2.5rem 1.5rem;
  }
  
  .legal-tabs {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .footer-nav {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  
  /* Course section responsive adjustments */
  .course-info {
    padding: 2.5rem 2rem;
  }
  
  .course-info h3 {
    font-size: 1.6rem;
  }
  
  .course-detail-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-bottom: 0.6rem;
  }
  
  .course-action-card {
    padding: 2.5rem 1.5rem;
  }
  
  .section-header h2 {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   WILDWOOD & RAW EDGES - ORGANIC VISUAL SYSTEM
   ========================================================================== */

/* Bind SVG Roughness Filters to warp HTML components into organic slabs */
.story-image-wrapper, 
.arrow-image-banner {
  filter: url('#rough-edge');
  border-width: var(--border-width) !important;
  box-shadow: var(--shadow-rough) !important;
}

/* Avoid text distortion: Apply organic rough filters ONLY to absolute pseudo-elements (::after) of text containers, keeping text 100% sharp and crisp */
.card-organic, 
.arrows-config-panel, 
.contact-form-panel, 
.course-box, 
.press-item, 
.download-box, 
.bows-showcase, 
.service-card, 
.legal-content-container {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1;
}

/* Base style for warped background layer */
.card-organic::after, 
.arrows-config-panel::after, 
.contact-form-panel::after, 
.course-box::after, 
.press-item::after, 
.download-box::after, 
.bows-showcase::after, 
.service-card::after, 
.legal-content-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-secondary);
  background-image: 
    repeating-linear-gradient(rgba(124, 75, 36, 0.015) 0px, rgba(124, 75, 36, 0.015) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at top right, rgba(70, 85, 63, 0.08) 0%, transparent 40%),
    radial-gradient(circle at bottom left, rgba(124, 75, 36, 0.08) 0%, transparent 40%);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-rough);
  border-radius: inherit;
  filter: url('#rough-edge');
  z-index: -1;
  pointer-events: none;
  transition: var(--transition-smooth);
}

/* Specific button style: Remove rough filter from the button container to make the text perfectly crisp */
.btn-premium {
  box-shadow: var(--shadow-rough) !important;
  /* Buttons already have an asymmetrical border radius, which looks beautifully organic on its own */
}

/* Custom interactive wood tilts and micro-animations */
.card-organic {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-organic:hover::after,
.arrows-config-panel:hover::after,
.contact-form-panel:hover::after,
.bows-showcase:hover::after,
.service-card:hover::after,
.press-item:hover::after {
  border-color: var(--border-gold) !important;
  box-shadow: var(--shadow-rough-gold), 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

.course-box:hover::after,
.download-box:hover::after {
  border-color: rgba(var(--accent-moss-rgb), 0.6) !important;
  box-shadow: 4px 4px 0px rgba(var(--accent-moss-rgb), 0.35), 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

/* Alternating subtle default tilts for card lists to represent hand-laid workshop elements */
.cards-grid .card-organic:nth-child(1) {
  transform: rotate(-0.7deg);
}
.cards-grid .card-organic:nth-child(2) {
  transform: rotate(0.6deg);
}
.cards-grid .card-organic:nth-child(3) {
  transform: rotate(-0.5deg);
}

.cards-grid .card-organic:nth-child(1):hover {
  transform: translateY(-8px) rotate(0.8deg);
}
.cards-grid .card-organic:nth-child(2):hover {
  transform: translateY(-8px) rotate(-0.6deg);
}
.cards-grid .card-organic:nth-child(3):hover {
  transform: translateY(-8px) rotate(0.7deg);
}

/* Service cards alternating tilts */
.services-grid .service-card:nth-child(1) {
  transform: rotate(0.5deg);
}
.services-grid .service-card:nth-child(2) {
  transform: rotate(-0.6deg);
}
.services-grid .service-card:nth-child(3) {
  transform: rotate(0.4deg);
}

.services-grid .service-card:nth-child(1):hover {
  transform: translateY(-6px) rotate(-0.5deg);
}
.services-grid .service-card:nth-child(2):hover {
  transform: translateY(-6px) rotate(0.6deg);
}
.services-grid .service-card:nth-child(3):hover {
  transform: translateY(-6px) rotate(-0.4deg);
}

/* Double organic outlines for customizer showcase details */
.specs-grid {
  border: 1.5px dashed var(--border-color) !important;
  border-radius: var(--border-radius-raw-2);
  background: rgba(var(--accent-moss-rgb), 0.08) !important; /* Soft waldgrün forest-moss mist background */
}

/* ==========================================================================
   TRISKELE LOGO STYLING
   ========================================================================== */
.logo-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.logo-icon {
  width: 2.7rem;
  height: 2.7rem;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); /* Sharp natural dark shadow instead of blurry green */
  image-rendering: -webkit-optimize-contrast; /* Sharp scaling */
}

.logo-link:hover .logo-icon {
  transform: scale(1.08); /* Disabled rotation, keeping elegant hover scale and green glow */
  filter: drop-shadow(var(--glow-gold));
}

/* Scrolled state transitions for logo components inside sticky header */
.main-header.scrolled .logo-icon {
  width: 2.3rem;
  height: 2.3rem;
}

.main-header.scrolled .logo-main {
  font-size: 1.3rem;
}

.main-header.scrolled .logo-sub {
  font-size: 0.52rem;
  letter-spacing: 0.24em;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.footer-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); /* Sharp natural dark shadow */
  image-rendering: -webkit-optimize-contrast; /* Sharp scaling */
}

.footer-logo-link:hover .footer-logo-icon {
  transform: scale(1.1); /* Disabled rotation for consistency, keeping hover scale and green glow */
  filter: drop-shadow(var(--glow-gold));
}

.footer-logo-text {
  text-align: left;
}

/* ==========================================================================
   BILDERGALERIE (IMPRESSIONEN) SECTION STYLING
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.gallery-item-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 12px 24px 16px 20px;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-item-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-rough);
  border-radius: inherit;
  filter: url('#rough-edge');
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: var(--transition-smooth);
}

.gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--bg-primary);
  z-index: 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-item-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(14, 16, 14, 0.95) 0%, rgba(14, 16, 14, 0.7) 60%, transparent 100%);
  padding: 1.25rem 1rem;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  display: none !important;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
  z-index: 3;
}

.gallery-item-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-gold);
  text-shadow: var(--glow-gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gallery-item-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Hover Effects */
.gallery-item-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
  z-index: 10;
}

.gallery-item-wrapper:hover::after {
  border-color: var(--border-gold) !important;
  box-shadow: var(--shadow-rough-gold), 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

.gallery-item-wrapper:hover .gallery-item img {
  transform: scale(1.08);
}

.gallery-item-wrapper:hover .gallery-item-overlay {
  transform: translateY(0);
  opacity: 1;
}

/* Default hand-crafted organic rotations for gallery items */
.gallery-grid .gallery-item-wrapper:nth-child(even) {
  transform: rotate(0.6deg);
}
.gallery-grid .gallery-item-wrapper:nth-child(odd) {
  transform: rotate(-0.5deg);
}

.gallery-grid .gallery-item-wrapper:nth-child(even):hover {
  transform: translateY(-8px) rotate(-0.4deg) scale(1.02);
}
.gallery-grid .gallery-item-wrapper:nth-child(odd):hover {
  transform: translateY(-8px) rotate(0.5deg) scale(1.02);
}

/* Responsive Breakpoints for Gallery Grid */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .gallery-item-overlay {
    opacity: 1;
    transform: translateY(0);
    padding: 0.85rem 0.75rem;
  }
  
  .gallery-item-title {
    font-size: 0.85rem;
  }
  
  .gallery-item-sub {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .story-collage {
    max-width: 320px;
    height: 380px;
  }
  
  .story-image-wrapper {
    padding: 0.6rem;
  }
  
  .story-badge {
    padding: 0.8rem;
    bottom: -10px;
    right: -10px;
  }
  
  .story-badge span:first-child {
    font-size: 1.5rem;
  }
  
  .story-badge span:last-child {
    font-size: 0.55rem;
  }
  
  /* Prevent horizontal layout overflow inside configurator specs */
  .specs-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    padding: 1.25rem !important;
  }
  
  /* Give action buttons more horizontal room on narrow mobile viewports */
  .hero-actions {
    padding: 0 1rem;
  }
  
  /* Additional mobile optimizations for course section */
  .course-info {
    padding: 2rem 1.25rem;
  }
  
  .course-info h3 {
    font-size: 1.35rem;
  }
  
  .section-header h2 {
    font-size: clamp(1.2rem, 5.5vw, 1.35rem);
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   DARK THEME COLOR PALETTE OVERRIDES
   ========================================================================== */
:root.dark-theme {
  --bg-primary: #12100d; /* Premium deep black-espresso base */
  --bg-secondary: #1c1814; /* Dark espresso / deep rich charcoal for contrast card blocks */
  --bg-tertiary: #0c0a08; /* Deeper black-coffee shadow tone */
  
  --accent-gold: #5cb870; /* Rebranded: Radiant glowing light forest green */
  --accent-gold-rgb: 92, 184, 112;
  --accent-bronze: #46a058; /* Rebranded: Earthy rich mid-forest green */
  --accent-moss: #3d824b; /* Rich glowing medieval forest moss green */
  --accent-moss-rgb: 61, 130, 75;
  --leather-brown: #8c562e; /* Warm, rich caramel-leather brown */
  --leather-brown-rgb: 140, 86, 46;
  --accent-red: #ab3333; /* Slightly more vibrant medieval blood red */
  
  --text-light: #fcfbfa; /* Creamy white for body text and headings */
  --text-muted: #bdae9c; /* Soft sand gray for description subtitles and metadata */
  --text-dark: #12100d; /* Swapped: Deep espresso for elements requiring dark text (contrast buttons) */
  
  --border-color: rgba(92, 184, 112, 0.35); /* Rebranded: Elegant glowing green-dust borders on dark oak */
  --border-gold: rgba(92, 184, 112, 0.6);
  
  --glass-bg: rgba(22, 19, 16, 0.96); /* Elegant dark-espresso glass */
  
  --glow-gold: 0 0 20px rgba(92, 184, 112, 0.25);
  --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.65);
  --shadow-rough: 4px 4px 0px rgba(92, 184, 112, 0.15);
  --shadow-rough-gold: 4px 4px 0px rgba(92, 184, 112, 0.3);
}

:root.dark-theme body {
  background-image: 
    repeating-linear-gradient(rgba(223, 178, 87, 0.015) 0px, rgba(223, 178, 87, 0.015) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(223, 178, 87, 0.015) 0px, rgba(223, 178, 87, 0.015) 1px, transparent 1px, transparent 5px),
    radial-gradient(circle at 15% 15%, rgba(104, 121, 98, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(140, 86, 46, 0.12) 0%, transparent 60%);
}

:root.dark-theme .hero-bg {
  opacity: 0.65; /* Erhöhte Sichtbarkeit des Waldwegs auf dunklem Grund */
  filter: sepia(0.08) contrast(1.05) brightness(0.9); /* Kräftigerer Kontrast für mystische Waldatmosphäre */
}

/* ==========================================================================
   THEME SWITCHER (LIGHT & DARK MODE TOGGLE BUTTON)
   ========================================================================== */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #fcfbfa; /* Creamy white on dark header */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  z-index: 1002;
  margin-left: 1.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(92, 184, 112, 0.35); /* Elegant glowing green-dust border */
  background-color: rgba(28, 24, 20, 0.3); /* Dark oak background */
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.theme-toggle:hover {
  color: #5cb870; /* Radiant glowing leaf green */
  border-color: #5cb870;
  background-color: rgba(92, 184, 112, 0.15);
  box-shadow: 0 0 15px rgba(92, 184, 112, 0.35);
}

.theme-toggle svg {
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Hide sun icon by default (light mode) */
.theme-toggle .sun-icon {
  display: none;
}

/* Show moon icon by default (light mode) */
.theme-toggle .moon-icon {
  display: block;
}

/* Toggle icon visibility based on dark theme */
:root.dark-theme .theme-toggle .sun-icon {
  display: block;
  color: var(--accent-gold);
}

:root.dark-theme .theme-toggle .moon-icon {
  display: none;
}

@media (max-width: 1100px) {
  body {
    background-attachment: scroll !important;
  }

  .theme-toggle {
    position: absolute;
    right: 5.2rem; /* Sit neatly next to the hamburger toggle (which is at right: 2rem) */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001; /* Stay interactive and on top */
    margin-left: 0;
  }

  .story-image-wrapper,
  .arrow-image-banner,
  .lightbox-img-wrapper {
    filter: none !important;
  }
}

/* Prevent transitions and animations during window resizing on header and navigation components to eliminate crossover flashes and layout wiggles */
.resize-animation-stopper .main-header,
.resize-animation-stopper .nav-menu,
.resize-animation-stopper .nav-link,
.resize-animation-stopper .theme-toggle,
.resize-animation-stopper .mobile-nav-toggle {
  transition: none !important;
  animation: none !important;
}

/* ==========================================================================
   11. INTERACTIVE BOGEN-FINDER WIZARD STYLES
   ========================================================================== */

.finder-container {
  margin-top: 5rem;
  padding: 4rem 3rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-raw-1);
  box-shadow: var(--shadow-dark);
  position: relative;
  overflow: hidden;
}

.finder-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--leather-brown);
  border-radius: 6px 6px 0 0;
}

.finder-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.finder-header h3 {
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  color: var(--text-light);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
}

.finder-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto;
}

/* Steps Progress Bar */
.finder-progress {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 4rem auto;
  padding: 0 1rem;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 2;
  cursor: default;
  min-width: 90px;
  flex-shrink: 0;
}

.progress-step span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.progress-step label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: var(--transition-smooth);
  pointer-events: none;
  display: block;
  position: relative !important;
  text-align: center;
  margin-top: 0.5rem;
  white-space: nowrap;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
}

.progress-step.active span {
  background: var(--accent-moss);
  border-color: var(--accent-moss);
  color: var(--text-dark);
  box-shadow: 0 0 12px rgba(var(--accent-moss-rgb), 0.35);
}

.progress-step.active label {
  color: var(--accent-moss);
  text-shadow: 0px 0px 1px rgba(var(--accent-moss-rgb), 0.15);
}

.progress-line {
  position: absolute;
  top: 19px;
  left: 2.5rem;
  right: 2.5rem;
  height: 3px;
  background: rgba(107, 62, 28, 0.15);
  z-index: 1;
  transform: translateY(-50%);
}

.progress-line-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-moss);
  transition: var(--transition-smooth);
}

/* Steps Content Pane */
.finder-step {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.finder-step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.step-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 2.8rem;
  color: var(--text-light);
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.option-card {
  background: var(--bg-primary);
  border: 2.5px solid var(--border-color);
  border-radius: var(--border-radius-raw-2);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 3px 3px 0px rgba(107, 62, 28, 0.12);
}

.option-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  border: 1px dashed transparent;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.option-card:hover, .option-card:focus {
  border-color: var(--accent-moss);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-rough-gold), 0 0 15px rgba(var(--accent-moss-rgb), 0.25) !important;
  transform: translateY(-4px) rotate(0.2deg) !important;
  outline: none;
}

.option-card:hover::after {
  border-color: rgba(var(--accent-moss-rgb), 0.3);
  margin: 3px;
}

.option-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  transition: var(--transition-smooth);
}

.option-card:hover .option-icon {
  transform: scale(1.15) rotate(4deg);
}

.option-card h5 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.option-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.step-nav {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

/* Step 4: Result Panel Styling */
.result-card {
  background: rgba(39, 82, 47, 0.04);
  border: 2.5px dashed var(--accent-moss);
  border-radius: var(--border-radius-raw-3);
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 3rem;
  align-items: flex-start;
  position: relative;
  box-shadow: inset 0 0 30px rgba(var(--accent-moss-rgb), 0.03);
}

.result-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background: var(--accent-moss);
  border-radius: 50%;
  color: var(--text-dark);
  font-size: 2.8rem;
  box-shadow: var(--shadow-rough);
  border: 2px solid var(--bg-secondary);
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.result-tag {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-moss);
  font-weight: 700;
}

.result-content h4 {
  font-size: 1.95rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
}

.result-content p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.result-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.8rem 0;
  padding: 1.8rem 0;
  border-top: 1px solid rgba(107, 62, 28, 0.15);
  border-bottom: 1px solid rgba(107, 62, 28, 0.15);
}

.result-spec-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.result-spec-item strong {
  font-size: 0.78rem;
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-moss);
}

.result-spec-item span {
  font-size: 1.05rem;
  color: var(--text-light);
  line-height: 1.5;
}

.result-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.result-actions .btn-restart {
  box-shadow: 3px 3px 0px rgba(107, 62, 28, 0.15);
}

/* Responsive adjustments for Bogen-Finder */
@media (max-width: 900px) {
  .options-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  
  .result-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem;
    text-align: center;
  }
  
  .result-icon-container {
    margin: 0 auto;
  }
  
  .result-specs {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: left;
  }
  
  .result-actions {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .finder-container {
    padding: 2rem 1.2rem;
  }
  
  .finder-progress {
    padding: 0;
  }
  
  .progress-step span {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  
  .progress-step {
    min-width: auto;
  }
  
  .progress-step label {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    white-space: normal;
    max-width: 70px;
    text-align: center;
  }
  
  .progress-line {
    top: 16px;
    left: 1.5rem;
    right: 1.5rem;
  }

  .option-card {
    padding: 2rem 1.5rem;
  }

  .step-title {
    font-size: 1.15rem;
    margin-bottom: 2rem;
  }

  .result-card {
    padding: 1.8rem;
  }

  .result-content h4 {
    font-size: 1.45rem;
  }

  .result-content p {
    font-size: 0.95rem;
  }

  .result-spec-item span {
    font-size: 0.95rem;
  }

  .result-actions {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .result-actions .btn-premium {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.8rem 1.2rem;
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }
}

/* Medium screens: Prevent navigation menu from overlapping the logo */
@media (max-width: 1300px) and (min-width: 1101px) {
  .nav-container {
    padding: 0 1.5rem;
  }
  .nav-menu {
    gap: 0.75rem;
  }
  .nav-link {
    font-size: 0.8rem;
  }
  .logo-main {
    font-size: 1.25rem;
  }
  .logo-sub {
    font-size: 0.52rem;
    letter-spacing: 0.22em;
  }
}

/* ==========================================================================
   DYNAMIC EVENT CALENDAR STYLING (CONTEMPORARY HERITAGE)
   ========================================================================== */
.calendar-section {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.calendar-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.calendar-header h2 {
  font-size: 2.2rem;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9), 2px 2px 4px rgba(0, 0, 0, 0.45);
}

.calendar-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto;
}

.calendar-wrapper {
  position: relative;
  width: 100%;
  min-height: 200px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-raw-3);
  padding: 3rem 2rem;
  box-shadow: var(--shadow-dark);
}

/* Loading & Empty States */
.calendar-loading-spinner, .calendar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
}

.spinner-icon {
  font-size: 3rem;
  animation: spinArrow 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  margin-bottom: 1.5rem;
  display: inline-block;
  text-shadow: var(--glow-gold);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

@keyframes spinArrow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

.calendar-loading-spinner p, .calendar-empty-state p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Calendar Card List Grid */
.calendar-grid-container {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: 100%;
}

.calendar-card {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  gap: 2rem;
  align-items: center;
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-raw-2);
  padding: 1.5rem;
  box-shadow: var(--shadow-dark);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.calendar-card:hover {
  transform: translateY(-4px) rotate(0.2deg);
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-rough-gold), 0 10px 25px rgba(var(--accent-moss-rgb), 0.15);
}

/* Left side: Date Block */
.calendar-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--accent-moss);
  border-radius: var(--border-radius-raw-3);
  padding: 1rem;
  color: #fcfbfa;
  min-height: 100px;
  text-align: center;
  box-shadow: var(--shadow-rough);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.calendar-date-day {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-date-month {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 4px;
  opacity: 0.9;
}

/* Middle: Info Block */
.calendar-info-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calendar-event-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.calendar-event-tag {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* Custom Tag Styles */
.calendar-event-tag.seminar {
  background: rgba(56, 124, 68, 0.1);
  color: var(--accent-gold);
  border-color: rgba(56, 124, 68, 0.3);
}

.calendar-event-tag.markt {
  background: rgba(107, 62, 28, 0.1);
  color: var(--leather-brown);
  border-color: rgba(107, 62, 28, 0.3);
}

.calendar-event-tag.atelier {
  background: rgba(143, 33, 33, 0.1);
  color: var(--accent-red);
  border-color: rgba(143, 33, 33, 0.3);
}

.calendar-event-location {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.calendar-event-location svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.8;
}

.calendar-card h4 {
  font-size: 1.3rem;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.04em;
  text-shadow: none;
  color: var(--text-light);
}

.calendar-event-desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Right side: Action / Availability Block */
.calendar-action-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
}

.calendar-spots-badge {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-block;
  padding: 0.3rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
}

.calendar-spots-badge.available {
  background: rgba(56, 124, 68, 0.08);
  color: var(--accent-gold);
  border-color: rgba(56, 124, 68, 0.25);
}

.calendar-spots-badge.booked-out {
  background: rgba(143, 33, 33, 0.08);
  color: var(--accent-red);
  border-color: rgba(143, 33, 33, 0.25);
  font-weight: 700;
}

.calendar-card .btn-premium {
  padding: 0.6rem 1.4rem;
  font-size: 0.78rem;
  width: 100%;
}

.calendar-card .btn-premium.btn-secondary:hover {
  color: var(--text-dark) !important;
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 900px) {
  .calendar-wrapper {
    padding: 2rem 1rem;
  }
  
  .calendar-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    padding: 1.8rem 1.2rem;
  }
  
  .calendar-date-block {
    max-width: 150px;
    margin: 0 auto;
    min-height: 80px;
  }
  
  .calendar-event-meta {
    justify-content: center;
  }
  
  .calendar-action-block {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Premium hover state for clickable Google Maps location anchors */
a.calendar-event-location {
  transition: var(--transition-fast);
}

a.calendar-event-location:hover {
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(var(--accent-gold-rgb), 0.25);
}

/* Prevent element overlaps on low-height screens (landscape mode on mobile/tablet) */
@media (max-height: 620px) {
  .hero-section {
    height: auto !important;
    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 5rem;
  }
  
  .hero-content {
    margin-top: 1.5rem;
  }
  
  .hero-brand-symbol {
    margin-bottom: 1rem;
  }
  
  .hero-emblem-image {
    width: 18rem !important;
    height: 18rem !important;
  }
  
  .hero-pretitle {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
  }
  
  .hero-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }
  
  .hero-title span {
    font-size: 1.1rem;
    margin-top: 0.4rem;
    letter-spacing: 0.15em;
  }
  
  .hero-motto {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    padding: 0.8rem 0;
  }
  
  .scroll-indicator {
    margin-top: 2rem;
  }
}

/* ==========================================================================
   GALERIE SEITE SPEZIFISCHE STYLES
   ========================================================================== */

/* Mini Hero (spacious buffer) */
.hero-mini {
  min-height: 45vh !important;
  padding-top: 8rem;
  padding-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mini .hero-bg {
  height: 55vh !important;
  background-size: cover;
  background-position: center center;
  opacity: 0.4;
}

.hero-mini .hero-content {
  margin-top: 0;
}

/* Category Filter Tabs Grid Alignment */
.gallery-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 3.5rem;
}

/* Gallery Grid */
.gallery-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 5rem;
}

.gallery-page-item {
  position: relative;
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-raw-2);
  overflow: hidden;
  box-shadow: var(--shadow-dark);
  transition: var(--transition-smooth);
  cursor: pointer;
  aspect-ratio: 4 / 3;
}

.gallery-page-item:hover {
  transform: scale(1.03) translateY(-4px);
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-rough-gold), 0 10px 25px rgba(var(--accent-gold-rgb), 0.25);
}

.gallery-page-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gallery-page-item:hover .gallery-page-image {
  transform: scale(1.06);
}

/* Card hover info overlay styling */
.gallery-page-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(18, 20, 18, 0.95) 0%, rgba(18, 20, 18, 0.5) 75%, transparent 100%);
  padding: 2rem 1.5rem 1.2rem 1.5rem;
  color: #fcfbfa;
  opacity: 0;
  transform: translateY(15px);
  transition: var(--transition-smooth);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gallery-page-item:hover .gallery-page-overlay {
  opacity: 1;
  transform: translateY(0);
}

.gallery-page-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.95);
}

.gallery-page-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5cb870;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95);
}

/* Lightbox Navigation Control Styles */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(252, 251, 250, 0.75);
  font-size: 3rem;
  font-weight: 300;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem;
  transition: var(--transition-fast);
  z-index: 10002;
  user-select: none;
}

.lightbox-nav-btn:hover {
  color: var(--accent-gold);
  text-shadow: 0 0 10px rgba(var(--accent-gold-rgb), 0.5);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
  left: 2rem;
}

.lightbox-next {
  right: 2rem;
}

/* Responsive adjustment for Lightbox buttons */
@media (max-width: 768px) {
  .lightbox-nav-btn {
    font-size: 2.2rem;
    padding: 0.8rem;
  }
  .lightbox-prev {
    left: 0.5rem;
  }
  .lightbox-next {
    right: 0.5rem;
  }
}



/* ==========================================================================
   VOM BAUM ZUM BOGEN — Diaschau & Fließtext
   Ersetzt das frühere Schritt-1-bis-6-Raster und den Hölzer-Konfigurator.
   ========================================================================== */

.btb-show {
  margin: 0 auto 3.5rem;
  max-width: 1100px;
}

.btb-stage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btb-frame {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-raw-2);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

/* Ohne JavaScript stehen alle Bilder schlicht untereinander. */
.btb-slide { margin: 0; }
.btb-slide img { display: block; width: 100%; height: auto; }
.btb-slide figcaption {
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Sobald das Skript läuft, wird daraus eine Diaschau. */
.btb-ready .btb-frame { height: clamp(320px, 58vh, 600px); }
.btb-ready .btb-slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.btb-ready .btb-slide.is-active {
  display: flex;
  animation: btbFade 0.5s ease both;
}
@keyframes btbFade { from { opacity: 0; } to { opacity: 1; } }

/* Die Fotos haben gemischte Seitenverhaeltnisse. Statt das Bild zu beschneiden
   oder es in leeren Flaechen schwimmen zu lassen, fuellt eine unscharfe Kopie
   desselben Bildes den Rest. Die URL setzt das Skript erst beim Aufblenden,
   damit nicht alle 19 Hintergruende sofort geladen werden. */
.btb-ready .btb-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--btb-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(0.75) brightness(0.5);
  transform: scale(1.18);
  z-index: 0;
}
.btb-ready .btb-slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}
.btb-ready .btb-slide figcaption { display: none; }

.btb-nav {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-light);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btb-ready .btb-nav { display: flex; }
.btb-nav:hover {
  background: var(--accent-moss);
  color: var(--text-dark);
  transform: scale(1.08);
}
.btb-nav:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px; }

.btb-bar {
  display: none;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 1.1rem 0 0 calc(46px + 0.75rem);
  padding-right: calc(46px + 0.75rem);
}
.btb-ready .btb-bar { display: flex; }

.btb-textcol { flex: 1 1 320px; min-width: 0; }

.btb-chapter {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 0.35rem;
}

.btb-caption {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-light);
  min-height: 3.2em;
}

.btb-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.btb-dots { display: flex; gap: 6px; flex-wrap: wrap; max-width: 340px; }
.btb-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--border-color);
  transition: transform 0.2s ease, background 0.2s ease;
}
.btb-dot:hover { transform: scale(1.35); }
.btb-dot.is-active { background: var(--accent-gold); transform: scale(1.4); }
.btb-dot:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }

.btb-play {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-light);
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.btb-play:hover { background: var(--accent-moss); color: var(--text-dark); }
.btb-count {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* --- Fließtext --------------------------------------------------------- */

.btb-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.85;
}
.btb-prose p { margin-bottom: 1.4rem; }
.btb-prose h3 {
  margin: 2.6rem 0 1rem;
  font-size: 1.5rem;
  color: var(--accent-gold);
}
.btb-lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-light);
}
.btb-quote {
  margin: 2rem 0;
  padding: 1.2rem 0 1.2rem 1.6rem;
  border-left: 4px solid var(--accent-gold);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-light);
}
.btb-criteria { margin: 0 0 1.4rem 1.2rem; }
.btb-criteria li { margin-bottom: 0.6rem; }
.btb-note {
  padding: 1rem 1.3rem;
  background: rgba(var(--accent-moss-rgb), 0.10);
  border: 1px solid var(--border-gold);
  border-radius: var(--border-radius-raw-3);
  font-size: 0.98rem;
}
.btb-next-up { font-size: 1.1rem; }
.btb-next-up a { color: var(--accent-gold); font-weight: 600; }

@media (max-width: 700px) {
  .btb-stage { gap: 0.4rem; }
  .btb-nav { width: 38px; height: 38px; font-size: 1.5rem; }
  .btb-bar { margin-left: 0; padding-right: 0; }
  .btb-ready .btb-frame { height: clamp(260px, 46vh, 420px); }
  .btb-caption { font-size: 0.98rem; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btb-ready .btb-slide.is-active { animation: none; }
}

/* Die Lightbox-Ausloeser sind jetzt Links um das Bild herum, damit sie ein
   href auf die Grossfassung tragen koennen. Ohne display:block bricht die
   Kachel um, weil ein <a> von Haus aus inline ist. */
.story-image-wrapper > a,
.arrow-image-banner > a { display: block; }

/* Honeypot-Feld im Kontaktformular. Bewusst nicht display:none oder
   hidden - manche Bots pruefen darauf und lassen solche Felder aus.
   Aus dem Sichtfeld schieben wirkt zuverlaessiger. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Handlungsaufforderung im Hero. Sitzt zwischen Motto und Scroll-Hinweis und
   braucht etwas Luft, damit der erste Bildschirm nicht gedraengt wirkt. */
.hero-cta {
  margin-top: 2.2rem;
  font-size: 0.95rem;
  padding: 1rem 2.4rem;
}

@media (max-width: 700px) {
  .hero-cta { margin-top: 1.6rem; padding: 0.9rem 2rem; }
}

/* Der erste Bildschirm auf dem Handy war voll, bevor die Handlungsaufforderung
   drankam: Emblem, Titel, Untertitel und Motto brauchten zusammen mehr als die
   844 px eines gaengigen Geraets, der Knopf landete 53 px darunter. Hier wird
   so viel Luft zurueckgeholt, dass er noch auf den Schirm passt - ohne dass das
   Triskele seine Wirkung verliert. */
@media (max-width: 700px) {
  .hero-emblem-image {
    width: 13.5rem !important;
    height: 13.5rem !important;
  }
  .hero-brand-symbol { margin-bottom: 0.5rem; }
  .hero-motto { font-size: 1rem; margin-bottom: 1.1rem; }
  .hero-cta { margin-top: 1.1rem; }
}

/* Dasselbe Problem am grossen Bildschirm, nur staerker: Mit festen 27rem war
   das Emblem 446 px hoch. Auf einem 1280x720-Laptop wurde dadurch schon der
   Titel abgeschnitten, Motto und Knopf kamen gar nicht mehr vor. Jetzt waechst
   es mit der Fensterhoehe mit, statt sie zu sprengen - auf hohen Bildschirmen
   bleibt es so gross wie bisher. */
@media (min-width: 701px) {
  .hero-emblem-image {
    width: min(27rem, 31vh) !important;
    height: min(27rem, 31vh) !important;
  }
  .hero-motto { margin-bottom: 2rem; }
}

/* Auf flachen Fenstern (Laptops mit 720 bis 900 px Hoehe) reicht auch das noch
   nicht. Hier wird nach FENSTERHOEHE gestaffelt, nicht nach Breite - es ist ein
   Hoehenproblem, und ein breiter 1280x720-Laptop leidet staerker als ein
   schmales, hohes Fenster. */
@media (min-width: 701px) and (max-height: 940px) {
  .hero-emblem-image {
    width: min(27rem, 24vh) !important;
    height: min(27rem, 24vh) !important;
  }
  .hero-brand-symbol { margin-bottom: 0.8rem; }
  .hero-motto { font-size: 1.15rem; margin-bottom: 1.3rem; }
  .hero-cta { margin-top: 1.3rem; }
}

/* Letzte Stufe fuer wirklich flache Fenster. Das Emblem ist hier reine
   Dekoration - das Logo steht ohnehin schon in der Kopfzeile -, deshalb darf es
   zugunsten von Motto und Knopf weichen. */
@media (min-width: 701px) and (max-height: 800px) {
  .hero-emblem-image {
    width: min(27rem, 18vh) !important;
    height: min(27rem, 18vh) !important;
  }
  .hero-brand-symbol { margin-bottom: 0.5rem; }
  .hero-motto { font-size: 1.05rem; margin-bottom: 0.9rem; }
  .hero-cta { margin-top: 0.9rem; }
}

@media (max-width: 700px) and (max-height: 730px) {
  .hero-emblem-image {
    width: 6.5rem !important;
    height: 6.5rem !important;
  }
  .hero-brand-symbol { margin-bottom: 0.2rem; }
  .hero-motto { font-size: 0.9rem; margin-bottom: 0.7rem; }
  .hero-cta { margin-top: 0.7rem; font-size: 0.9rem; padding: 0.8rem 1.8rem; }
}