/* Main CSS file for Obereder Branchentag Landingpage - Combined Structure */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700;800&family=Roboto:wght@300;400;500;700&display=swap');

/* Root Variables */
:root {
  /* Obereder Hauptfarben */
  --primary-color: #298dcd;      /* Primärfarbe: Blau laut Vorgabe */
  --secondary-color-1: #2b8bcc;  /* Sekundärfarbe 1: Hellblau */
  --secondary-color-2: #00bfff;  /* Sekundärfarbe 2: Neonblau Variante */
  
  /* Dunkles Theme Grundfarben */
  --dark-bg: #000000;            /* Hintergrund laut Vorgabe: Schwarz */
  --dark-bg-alt: #000000;        /* Alternative dunkle Hintergrundfarbe (auch Schwarz) */
  --dark-surface: #1a1a2e;       /* Dunkle Oberflächenfarbe für Karten/Panels */
  
  /* Neon-Akzentfarben */
  --neon-cyan: #00bfff;          /* Neon Cyan für Highlights */
  --neon-magenta: #ff00ff;       /* Neon Magenta für Highlights */
  --neon-blue: #0088ff;          /* Neon Blau für Highlights */
  --neon-glow: 0 0 10px;         /* Basis Neon-Glow Effekt */
  
  /* Akzentfarbe Gold laut Vorgabe */
  --accent-gold: #a48b6e;
  
  /* Text und UI Farben */
  --text-primary: #ffffff;       /* Primäre Textfarbe: Weiß */
  --text-secondary: #b8b8d0;     /* Sekundäre Textfarbe: Helles Grau-Blau */
  --text-disabled: #6c6c8b;      /* Deaktivierte Textfarbe: Mittleres Grau-Blau */
  
  /* Gradient Definitionen */
  --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color-1));
  --gradient-neon: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
  --gradient-dark: linear-gradient(135deg, var(--dark-bg), var(--dark-bg-alt));
  
  /* Schatten Definitionen */
  --shadow-normal: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.5);
  --neon-shadow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0, 255, 255, 0.5);
  --neon-shadow-magenta: 0 0 10px var(--neon-magenta), 0 0 20px rgba(255, 0, 255, 0.5);
  --neon-shadow-blue: 0 0 10px var(--neon-blue), 0 0 20px rgba(0, 136, 255, 0.5);
  
  /* Abstände und Größen */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  
  /* Rundungen */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  /* Animationszeiten */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #000000 !important; /* Hintergrund laut Vorgabe: Schwarz */
  background-image: none !important; /* Keine Bewegung, kein Bild */
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

#particles-canvas {
  display: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: 5.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.02;
  margin-bottom: 1.5rem;
  margin-top: 50px;
  text-shadow: none;
}

@media (max-width: 992px) {
  h1 {
    font-size: 3.2rem;
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }
}

h2 {
  font-size: 2.5rem;
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-lg);
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
}

h2::after {
  content: "";
  display: block !important;
  width: 45px;
  height: 3px;
  background: #2b8bcc;
  margin: 0.5em auto 1.2em auto;
  border-radius: 2px;
  position: static !important;
}

h3 {
  font-size: 1.8rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
}

h4 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--neon-cyan);
  text-decoration: none;
  transition: all var(--transition-normal) ease;
}

a:hover {
  text-shadow: var(--neon-shadow-cyan);
}

ul {
  list-style: none;
  margin-bottom: var(--spacing-md);
}

li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: var(--spacing-lg);
}

li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: var(--neon-cyan);
  border-radius: 50%;
  box-shadow: var(--neon-shadow-cyan);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

section {
  padding: var(--spacing-xl) 0;
  position: relative;
  margin-bottom: var(--spacing-xl);
}

/* Remove margin below Downloads section so it is flush with the footer */
#downloads {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Downloads Section */
.downloads-grid {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
  margin-top: 2.5rem;
}
.download-item {
  background: #181b2b;
  border: 2px solid #2b8bcc;
  border-radius: 22px;
}

/* Reworked Highlights (insights) two-column layout */
#highlights .insights-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* make right column larger */
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: start;
}
#highlights .insights-left h2 {
  margin-bottom: 0.6rem;
}
#highlights .insights-left p {
  color: var(--text-secondary);
  max-width: 62ch;
}
#highlights .program-title {
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}
#highlights .program-list {
  list-style: none;
  padding-left: 0;
}
#highlights .program-list li {
  margin: 0.25rem 0 0.4rem 0;
  padding-left: 1.6rem; /* overwrite global li padding */
}
#highlights .program-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: auto;
  height: auto;
  color: var(--brand-blue, #298dcd);
  background: none !important;
  box-shadow: none !important;
}
#highlights .insights-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#highlights .insights-image-figure {
  margin: 0;
}
#highlights .insights-image {
  display: block;
  width: 100%;
  max-width: 100%; /* allow full column width for larger display */
  height: auto;
  border-radius: 12px;
}
/* TOM logo below the image, right-aligned, colored white */
#highlights .insights-image-figure .tom-logo {
  display: block;
  height: 96px;
  width: auto;
  margin: 0.8rem 8px 0 auto; /* place under image, align right, add small right inset */
  filter: brightness(0) invert(1);
}
@media (max-width: 700px) {
  #highlights .insights-image-figure .tom-logo {
    height: 72px;
    margin: 0.6rem 6px 0 auto; /* small right inset on mobile */
  }
}
@media (max-width: 1024px) {
  #highlights .insights-grid {
    grid-template-columns: 1fr;
  }
  #highlights .insights-right {
    order: 0; /* keep natural order: left first, then right */
  }
}

.download-item .download-icon {
  margin-bottom: 0.7em;
  font-size: 3.2em;
  color: #2b8bcc;
}
.download-item h3 {
  color: #fff;
  font-size: 1.45em;
  font-weight: 700;
  margin-bottom: 0.5em;
  margin-top: 0.2em;
  letter-spacing: 0.01em;
}
.download-item p {
  color: #b0b9c9;
  font-size: 1.08em;
  margin-bottom: 2.1em;
  margin-top: 0.2em;
}
.download-button {
  display: inline-block;
  border: 2px solid #2b8bcc;
  color: #2b8bcc;
  background: transparent;
  border-radius: 12px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.13em;
  padding: 0.7em 2.2em;
  margin-top: 0.7em;
  letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
}
.download-button:hover,
.download-button:focus {
  background: #2b8bcc;
  color: #fff;
  border: 2px solid #2b8bcc;
}

/* Disabled Download Card */
.download-item-disabled {
  background: #181b2b;
  border: 2px dashed #2b8bcc;
  opacity: 0.65;
  filter: grayscale(0.25);
}
.download-item-disabled .download-icon {
  color: #2b8bcc;
  opacity: 0.6;
}
.download-item-disabled h3 {
  color: #2b8bcc;
  opacity: 0.7;
}
.download-item-disabled p {
  color: #b0b9c9;
  opacity: 0.7;
}
.download-item-disabled .download-button,
.download-button.disabled {
  background: #6c768a !important;
  color: #fff !important;
  border: 2px solid #b0b9c9 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}
.download-item-disabled .download-button::after,
.download-button.disabled::after {
  content: "Bald verfügbar";
  display: block;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  margin-top: 0;
  letter-spacing: 0.01em;
}
.download-item-disabled .download-button span,
.download-button.disabled span {
  display: none;
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-title h2 {
  display: inline-block;
}

.subtitle {
  color: var(--neon-cyan);
  text-shadow: var(--neon-shadow-cyan);
  font-size: 0.7em;
}

.section-title h2,
#downloads .section-title h2,
#downloads .section-title,
#downloads .section-title h2 span,
#downloads .section-title .subtitle {
  color: #fff !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

#downloads .section-title .subtitle {
  color: #b8b8d0 !important;
}

/* Registration section h2 title blue */
#register .section-title h2 {
  color: #2b8bcc !important;
}

/* Header Styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: var(--spacing-md) 0;
  background-color: rgba(10, 10, 20, 0.8);
  backdrop-filter: blur(10px);
  transition: all var(--transition-normal) ease;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#obereder-logo {
  width: 200px; /* Increased size */
  margin: 20px 0; /* Added spacing above and below */
  filter: none !important;
  box-shadow: none !important;
}

#castrol-logo {
  height: 40px;
  margin-right: var(--spacing-md);
}

nav ul {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: 0;
}

nav ul li {
  margin-bottom: 0;
  padding-left: 0;
}

nav ul li::before {
  display: none;
}

nav ul li a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-normal) ease;
  position: relative;
}

nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--neon-cyan);
  transition: all var(--transition-normal) ease;
  transform: translateX(-50%);
}

nav ul li a:hover {
  color: var(--text-primary);
}

nav ul li a:hover::after {
  width: 80%;
  box-shadow: var(--neon-shadow-cyan);
}

.cta-button-nav {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--neon-cyan);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all var(--transition-normal) ease;
  box-shadow: var(--neon-shadow-cyan);
}

.cta-button-nav:hover {
  background-color: var(--neon-cyan);
  color: var(--dark-bg);
  box-shadow: var(--neon-shadow-cyan), 0 0 30px rgba(0, 255, 255, 0.8);
}

#header-gradient-effect {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--neon-magenta));
  background-size: 200% 100%;
  animation: gradientMove 5s ease infinite;
  z-index: 999;
}

@keyframes gradientMove {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Hero Section */
#hero {
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: none;
  padding-top: 0;
  margin-bottom: 0 !important;
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

#hero::before {
  display: none;
}

#hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.7) saturate(1.1);
}

#hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(120deg, rgba(31,44,114,0.55) 0%, rgba(0,191,255,0.18) 100%);
  z-index: 1;
  pointer-events: none;
}

#hero .container {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #fff;
  background: none;
  border-radius: 24px;
  box-shadow: 0 8px 32px 0 rgba(31,44,114,0.13);
    backdrop-filter: blur(3px);
    padding: 130px 2rem 2.5rem;
}

#hero h1 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 800;
  font-size: 5.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.02;
  text-shadow: none;
  margin-bottom: 1.5rem;
  margin-top: 50px;
}

@media (max-width: 992px) {
  #hero h1 {
    font-size: 3.2rem;
  }
}

@media (max-width: 700px) {
  #hero h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 1.5rem;
  }
}

#hero .hero-sub {
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
  
  letter-spacing: 0.02em;
  border-radius: 12px;
  padding: 0.7em 1.2em;
  display: inline-block;
  box-shadow: none;
  background: none;
  text-shadow: none;
}

#hero .hero-date {
  font-size: 1.18rem;
  color: #1f2c72;
  margin-top: 0.7em;
  margin-bottom: 3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.82);
  border-radius: 12px;
  padding: 0.6em 1.4em;
  display: inline-block;
  box-shadow: 0 2px 16px 0 rgba(31,44,114,0.10);
  text-shadow: none;
}

.hero-date.hero-date-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(10, 20, 40, 0.72);
  border-radius: 1.5em;
  padding: 0.45em 1.5em;
  margin: 1.2em 0 1.1em 0;
  box-shadow: none;
  letter-spacing: 0.01em;
  backdrop-filter: blur(2px);
  flex-wrap: nowrap;
  white-space: nowrap;
}
.hero-date-main, .hero-date-extra {
  color: var(--neon-cyan);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hero-date-sep {
  color: var(--neon-cyan);
  opacity: 0.55;
  font-size: 1.1em;
  font-weight: 400;
  margin: 0 0.5em;
}
@media (max-width: 700px) {
  .hero-date.hero-date-inline {
    font-size: 0.98rem;
    padding: 0.35em 0.7em;
    gap: 0.5em;
  }
}
#hero .cta-button {
  font-size: 1.05em;
  padding: 1.1em 2.2em;
  border: 2px solid #2b8bcc;
  color: #2b8bcc;
  background: #fff;
  font-weight: 700;
  border-radius: 2em;
  box-shadow: none;
  text-shadow: none;
  transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s cubic-bezier(.4,0,.2,1), background 0.18s, color 0.18s, border-color 0.18s;
  will-change: transform, box-shadow;
  outline: none;
  margin-top: 2.2em;
}
#hero .cta-button:hover, #hero .cta-button:focus {
  transform: scale(1.08);
  box-shadow: 0 6px 24px 0 rgba(43,139,204,0.13);
  background: #2b8bcc;
  color: #fff;
  border-color: #2b8bcc;
  z-index: 2;
}

/* Intro Section */
#intro {
  text-align: center;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
}

#intro h2.fade-in {
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: none;
  margin-bottom: 1rem;
}
#intro h2.fade-in::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    var(--neon-cyan) 0%,
    #162447 100%
  );
  box-shadow: 0 0 16px var(--neon-cyan);
  border-radius: 4px;
  transition: background 0.7s cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 700px) {
  #intro h2.fade-in {
    font-size: 2.1rem;
  }
}

/* Intro Datum mittig, ohne Kachel, noch präsenter */
#intro-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 2.5rem auto 1.2rem auto;
  min-height: 0;
  max-width: none;
}
.intro-date-icon {
  display: none;
}
.intro-date-content {
  align-items: center;
  justify-content: center;
}
.intro-date-main {
  font-size: 1.05em;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: none;
  margin-bottom: 0.05em;
  text-align: center;
}
.intro-date-extra {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-top: 0.1em;
  text-align: center;
}
@media (max-width: 700px) {
  .intro-date-main {
    font-size: 2rem;
  }
  .intro-date-extra {
    font-size: 1rem;
  }
}

.intro-desc {
  text-align: center;
  font-size: 1.13em;
  color: var(--text-secondary);
    max-width: 900px;
    margin: 1.5em auto 2.5rem;
}

/* Highlights Section */
#highlights {
  background-color: var(--dark-bg-alt);
  padding: var(--spacing-xl) 0;
  margin-bottom: 0 !important;
  padding-bottom: 10em;
  padding-top: 10em;
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.highlight-item {
  background-color: var(--dark-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-normal);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal) ease;
}

.highlight-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-elevated);
}

.highlight-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 5px;
  background: var(--gradient-neon);
  transition: width var(--transition-normal) ease;
}

.highlight-item:hover::after {
  width: 100%;
}

.highlight-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  transition: all var(--transition-normal) ease;
}

.highlight-item:hover .highlight-img {
  transform: scale(1.05);
  box-shadow: var(--shadow-elevated);
}

/* Networking Section */
#networking {
  text-align: center;
    position: relative;
  background: url('../images/seminar3.jpg') no-repeat center center / cover;
    /* reduced vertical padding for a more compact layout */
    padding: 60px 0 1.2rem;
}

#networking::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* dark overlay added for Branchengespräche */
  z-index: 0;
}

/* Typography and spacing enhancements for networking */
#networking h2 {
    /* use global h2 sizing to match other sections */
    margin-bottom: 1rem;
}

#networking p {
  color: #fff;  /* paragraphs in Branchengespräche white */
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  max-width: 800px;
  line-height: 1.5;
}

.networking-features {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
  margin: 2.5rem 0 1.5rem 0;
  flex-wrap: wrap;
}
.networking-feature {
  background: transparent; /* removed dark background for feature cards */
  border-radius: var(--border-radius-lg);
  box-shadow: none !important;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 340px;
  text-align: center;
  margin-bottom: 1.5rem;
  transition: none;
  border-top: 4px solid var(--neon-cyan);
}
.networking-feature:hover {
  box-shadow: none !important;
  transform: none !important;
}
.networking-feature i {
  font-size: 2.2rem;
  color: var(--neon-cyan);
  margin-bottom: 1rem;
  text-shadow: none;
}
.networking-feature h3 {
  font-size: 1.18rem;
  color: var(--text-primary);
  margin-bottom: 0.7rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 500;
  text-shadow: none;
}
.networking-feature p {
  color: #fff;  /* feature text in Branchengespräche white */
  font-size: 1.04rem;
}
.networking-description {
  text-align: center;
  font-size: 1.13em;
  color: var(--text-secondary);
  margin-top: 1.5em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .networking-features {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .networking-feature {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}

/* Location Section */
#location {
  background-color: var(--dark-bg-alt);
  padding: var(--spacing-xl) 0;
}

.location-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.location-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-normal) ease;
  /* Entfernt den blauen Schein beim Hover */
  box-shadow: none;
}
.location-gallery img:hover {
  transform: scale(1.05);
  /* Kein box-shadow mehr */
  box-shadow: none;
}

/* Popup Galerie Styles */
.gallery-popup-overlay {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 20, 40, 0.92);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
}
.gallery-popup-overlay.active {
  display: flex;
}
.gallery-popup-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery-popup-img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  background: #181c2f;
}
.gallery-popup-close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 2.2rem;
  color: var(--neon-cyan);
  cursor: pointer;
  font-weight: bold;
  z-index: 2;
  background: none;
  border: none;
}
.gallery-popup-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1.2rem;
}
.gallery-popup-arrow {
  font-size: 2.5rem;
  color: var(--neon-cyan);
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 2.5rem;
  transition: color 0.2s, transform 0.2s;
}
.gallery-popup-arrow:hover {
  color: var(--neon-blue);
  transform: scale(1.15);
}
@media (max-width: 700px) {
  .gallery-popup-img {
    max-width: 98vw;
    max-height: 60vh;
  }
  .gallery-popup-arrow {
    font-size: 2rem;
    margin: 0 1.2rem;
  }
}

/* Program Section */
#program {
  padding: var(--spacing-xl) 0;
}

/* Programmübersicht Split Layout */
.programm-split {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  align-items: flex-start;
  margin: 2.5rem auto 0 auto;
  width: 100%;
  max-width: none;
}
.programm-day {
  background: var(--dark-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-normal);
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  flex: 1 1 0;
  text-align: left;
  border-top: 4px solid var(--neon-cyan);
  min-width: 0;
}
@media (max-width: 700px) {
  .programm-split {
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }
  .programm-day {
    width: 100%;
    padding: 1.2rem 0.7rem 1rem 0.7rem;
  }
}

/* Programmübersicht Uhrzeiten optisch hervorheben */
.programm-time {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  color: var(--neon-cyan);
  font-size: 1.13em;
  letter-spacing: 1px;
  text-shadow: 0 0 8px var(--neon-cyan);
  min-width: 60px;
  display: inline-block;
}

/* Pricing Section */
#pricing {
  background-color: var(--dark-bg-alt);
  padding: var(--spacing-xl) 0;
}

/* Preise pro Person – visuelle Anordnung wie im Screenshot, modern und klar */
.preise-visual-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 auto 2.5rem auto;
  max-width: 1100px;
}
.preise-block {
  min-width: 320px;
  flex: 1 1 340px;
  margin-bottom: 1.2rem;
  background: var(--dark-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-normal);
  padding: 2.2rem 2rem 1.5rem 2rem;
  transition: box-shadow var(--transition-normal) ease, border-color var(--transition-normal) ease;
  border-left: none;
}
.preise-block:hover {
  box-shadow: var(--shadow-elevated);
  border-left: none;
}
.preise-title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1.4rem;
  color: var(--neon-cyan);
  font-weight: 700;
  margin-bottom: 1.1rem;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.preise-row {
  display: flex;
  align-items: baseline;
  gap: 2.5rem;
  margin-bottom: 0.7rem;
}
.preise-label {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 400;
  min-width: 120px;
  margin-right: 0.7rem;
}
.preise-value {
  font-size: 1.6rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
    margin-bottom: 0.1em;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  border-bottom: none;
  background: linear-gradient(90deg, rgba(0,191,255,0.18) 0%, rgba(43,139,204,0.13) 100%);
  border-radius: 6px;
  padding: 0.1em 0.5em 0.1em 0.5em;
  box-shadow: 0 2px 12px 0 rgba(0,191,255,0.08);
  text-shadow: none;
}
.preise-tax {
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 0.3em;
  margin-bottom: 0.12em;
}
@media (max-width: 900px) {
  .preise-visual-grid {
    flex-direction: column;
    gap: 2.2rem 0;
    align-items: stretch;
  }
  .preise-block {
    min-width: 0;
    width: 100%;
    margin-bottom: 2.2rem;
  }
  .preise-title {
    font-size: 1.5rem;
  }
  .preise-value {
    font-size: 1.5rem;
  }
}

.preise-block-full {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.2rem;
  border-left: none;
}
.preise-block-full:hover {
  border-left: none;
}
@media (max-width: 900px) {
  .preise-block-full {
    width: 100%;
    min-width: 0;
  }
}

/* Registration Section */
#register {
  background: #fff;
  border-radius: 0;
  padding: var(--spacing-xl) 0;
}

#register .container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: #1f3c72;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#event-registration-form {
  max-width: 600px;
  margin: 2.5rem auto 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#event-registration-form label {
  color: #1f3c72;
  font-weight: 600;
  margin-bottom: 0.4em;
  font-size: 1.08em;
  letter-spacing: 0.01em;
  align-self: flex-start;
}

#event-registration-form input[type="text"],
#event-registration-form input[type="email"],
#event-registration-form input[type="tel"],
#event-registration-form select,
#event-registration-form textarea {
  width: 100%;
  max-width: 100%;
  background: #f7f7f7;
  border: none;
  border-radius: 2em;
  color: #1f3c72;
  font-size: 1.08em;
  padding: 1.1em 1.5em;
  margin-bottom: 1.3em;
  box-shadow: none;
  outline: none;
  transition: box-shadow 0.18s, background 0.18s;
  box-sizing: border-box;
}
#event-registration-form input[type="text"]:focus,
#event-registration-form input[type="email"]:focus,
#event-registration-form input[type="tel"]:focus,
#event-registration-form select:focus,
#event-registration-form textarea:focus {
  background: #eaf8ff;
  box-shadow: 0 0 0 2px var(--neon-cyan, #00bfff);
}
#event-registration-form textarea {
  min-height: 90px;
  resize: vertical;
  border-radius: 1.5em;
}

#event-registration-form .form-group {
  width: 100%;
  max-width: 480px;
  margin-bottom: 0.7em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}

#event-registration-form input[type="checkbox"] {
  accent-color: var(--neon-cyan);
  margin-right: 0.6em;
  width: 1.1em;
  height: 1.1em;
}

#event-registration-form .cta-button-form {
  width: 100%;
  max-width: 480px;
  margin: 1.2em 0 0.5em 0;
  padding: 1.1em 0;
  font-size: 1.15em;
  font-weight: 700;
  border-radius: 2em;
  border: none;
  background: #298dcd; /* CI-Blau */
  color: #fff !important;
  box-shadow: 0 2px 12px 0 rgba(31,44,114,0.07);
  text-shadow: none;
  letter-spacing: 0.04em;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#event-registration-form .cta-button-form:hover, #event-registration-form .cta-button-form:focus {
  background: linear-gradient(90deg, #ff914d 0%, var(--neon-cyan, #00bfff) 100%);
  color: #fff !important;
  box-shadow: 0 4px 18px 0 rgba(31,44,114,0.13);
}
#event-registration-form .cta-button-form-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
}
#event-registration-form .cta-button-form-inner i {
  color: inherit !important;
  font-size: 1.1em;
  margin-left: 0.1em;
  text-shadow: none !important;
}

#event-registration-form a {
  color: var(--neon-cyan);
  text-decoration: underline;
  transition: color 0.18s;
}
#event-registration-form a:hover {
  color: #ff914d;
}

#event-registration-form .form-group:last-child {
  margin-bottom: 0.5em;
}

#event-registration-form input[type="checkbox"] + label {
  font-size: 0.98em;
  font-weight: 400;
  color: #1f3c72;
  display: inline;
}

#register .container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: #1f3c72;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Registration form specific styles */
.registration-form h2 {
    color: #2b8bcc !important;
}

/* Two-column layout for registration form */
.form-columns {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    margin-left: -180px;
    margin-right: -180px;
    padding: 32px 0 0 0;
    position: relative;
    min-height: 520px; /* Mindesthöhe für beide Spalten, nach Bedarf anpassen */
}
.form-column-left, .form-column-right {
    flex: 1 1 873px;
    min-width: 679px;
    max-width: 970px;
    background: #f7fbff;
    border-radius: 18px;
    box-shadow: 0 4px 32px 0 rgba(43,139,204,0.10);
    padding: 56px 64px 48px 64px;
    margin: 0 0 32px 0;
    font-size: 1.18em;
    display: flex;
    flex-direction: column;
    height: auto;
}
.form-column-left {
    /* Linke Spalte optisch nach unten verlängern, damit sie exakt mit rechter Spalte abschließt */
    min-height: 100%;
    height: 100%;
    /* Kein negatives margin mehr, stattdessen volle Höhe */
    align-self: stretch;
}
.form-column-right {
    align-self: stretch;
}
@media (max-width: 1100px) {
    .form-columns {
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        margin-right: 0;
        min-height: unset;
    }
    .form-column-left, .form-column-right {
        min-width: 0;
        max-width: 100%;
        padding: 20px 8px 14px 8px;
        font-size: 1em;
        height: auto;
        min-height: unset;
    }
}

/* Footer */
footer {
  background: var(--dark-bg-alt);
  padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
  border-top: 2px solid rgba(0,191,255,0.13);
  box-shadow: 0 -2px 24px 0 rgba(0,191,255,0.07);
  margin-top: 0 !important;
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-content {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}
.footer-logo {
  width: 15rem;
  max-width: 100%;
  margin-bottom: 0.7rem;
  filter: drop-shadow(0 0 8px var(--neon-cyan));
}
@media (max-width: 900px) {
  .footer-logo {
    width: 8rem;
  }
}
.footer-content p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.6;
}
.footer-content a {
  color: var(--neon-cyan);
  text-decoration: underline;
  transition: color 0.2s;
}
.footer-content a:hover {
  color: var(--neon-blue);
}
.footer-map {
  flex: 1 1 320px;
  min-width: 260px;
  max-width: 420px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px 0 rgba(0,191,255,0.09);
}
.footer-links {
  width: 100%;
  margin-top: 1.2rem;
  text-align: left;
  font-size: 1.05rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.footer-links a {
  color: var(--neon-cyan);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  padding: 0 0.2em;
}
.footer-links a:hover {
  color: var(--neon-blue);
}
.footer-links-separator {
  color: var(--text-secondary);
  font-size: 1.1em;
  padding: 0 0.2em;
  user-select: none;
}
@media (max-width: 600px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
    font-size: 0.98rem;
  }
  .footer-links-separator {
    display: none;
  }
}
footer .copyright {
  width: 100%;
  text-align: center;
  color: var(--text-disabled);
  font-size: 0.98rem;
  margin-top: 2.2rem;
  letter-spacing: 0.03em;
}
.footer-social {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  margin-top: 0.5em;
}
.footer-social-label {
  color: var(--text-secondary);
  font-size: 1.08rem;
  font-weight: 500;
  margin-bottom: 0.2em;
  letter-spacing: 0.03em;
}
.footer-social-icons {
  display: flex;
  flex-direction: row;
  gap: 1.1em;
}
.footer-social-link {
  display: inline-block;
  color: var(--neon-cyan);
  font-size: 1.6rem;
  margin-right: 0;
  transition: color 0.2s, transform 0.2s;
  text-decoration: none;
}
.footer-social-link:hover {
  color: var(--neon-blue);
  transform: scale(1.13);
}
.footer-social-right {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.3em;
  margin-top: 7rem;
}
.footer-social-right .footer-social-label {
  color: var(--text-secondary);
  font-size: 1.08rem;
  font-weight: 500;
  margin-bottom: 0.2em;
  letter-spacing: 0.03em;
  text-align: right;
  width: 100%;
}
.footer-social-right .footer-social-icons {
  display: flex;
  flex-direction: row;
  gap: 1.1em;
  justify-content: flex-end;
  width: 100%;
}
.footer-social-right .footer-social-link {
  display: inline-block;
  color: var(--neon-cyan);
  font-size: 1.6rem;
  margin-right: 0;
  transition: color 0.2s, transform 0.2s;
  text-decoration: none;
}
.footer-social-right .footer-social-link:hover {
  color: var(--neon-blue);
  transform: scale(1.13);
}
/* SVG icons in footer: size and force white color */
.footer-social-svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  filter: brightness(0) invert(1);
}
/* Keep icons white on hover as requested */
.footer-social-link:hover .footer-social-svg {
  filter: brightness(0) invert(1);
}
.footer-website-link {
  color: var(--neon-cyan);
  font-weight: 500;
  text-decoration: underline;
  margin-top: 0.5em;
  font-size: 1.08rem;
  text-align: right;
  display: block;
  width: 100%;
  transition: color 0.2s;
}
.footer-website-link:hover {
  color: var(--neon-blue);
}
@media (max-width: 900px) {
  .footer-social-right {
    align-items: flex-start;
    margin-top: 1.2em;
    gap: 0.5em;
  }
  .footer-social-right .footer-social-label,
  .footer-social-right .footer-social-icons,
  .footer-website-link {
    text-align: left;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Delay Classes */
.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}

/* Responsive Styles */
@media (max-width: 992px) {
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .container {
    padding: 0 var(--spacing-md);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  header .container {
    flex-direction: column;
    align-items: center;
  }
  
  #obereder-logo, #castrol-logo {
    margin-bottom: var(--spacing-sm);
  }
  
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  
  .highlight-grid,
  .location-gallery,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .price-item h3 {
    min-height: auto;
  }
}



/* --- OBEREDER BRANCHENTAG: BUTTON & DATENSCHUTZ-FIXES --- */

/* Style für alle .cta-button im Formular: blauer Rand, blauer Hover, keine Neon-Effekte */
#event-registration-form .cta-button,
.cta-button {
  border: 2px solid #2b8bcc !important;
  background: transparent !important;
  color: #2b8bcc !important;
  font-weight: 700;
  border-radius: 2em;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#event-registration-form .cta-button:hover,
.cta-button:hover {
  background: #2b8bcc !important;
  color: #fff !important;
  border: 2px solid #2b8bcc !important;
}

/* Datenschutz-Link im Formular immer Obereder-Blau */
#event-registration-form label[for="datenschutz"] a {
  color: #2b8bcc !important;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.18s;
}
#event-registration-form label[for="datenschutz"] a:hover {
  color: #0088ff !important;
}

/* Entferne Neon-Effekte von Texten, Überschriften und Buttons */
h1, h2, h3, h4, h5, h6, p, a, button, .cta-button, .cta-button-nav, .cta-button-form, .pulse-button {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: none !important;
}
h2::after, h1::before, h1::after {
  display: none !important;
}
li::before {
  background-color: var(--text-primary) !important;
  box-shadow: none !important;
}
a {
  color: var(--text-primary) !important;
}

/* Override remaining neon classes to remove glow and animations */
.neon-text,
.subtitle {
  text-shadow: none !important;
  filter: none !important;
  color: var(--text-primary) !important;
}
.pulse-button {
  animation: none !important;
}

/* Remove glow/neon effect from download buttons */
.download-button,
.download-button:hover,
.download-button:focus {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background: none !important;
  color: var(--text-primary) !important;
}
.download-button.disabled,
.download-item-disabled .download-button.disabled {
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  color: var(--text-primary) !important;
}

/* Remove neon/glow from all CTA and download buttons */
.cta-button,
.cta-button-nav,
.download-button {
  background: none !important;
  color: var(--text-primary) !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
.cta-button:hover,
.cta-button:focus,
.cta-button-nav:hover,
.cta-button-nav:focus,
.download-button:hover,
.download-button:focus {
  background: none !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---- Force Remove Neon/Glow for Hero CTA and Download Buttons ---- */
#hero .cta-button,
.download-item .download-button {
  background: none !important;
  border: 1px solid var(--text-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#hero .cta-button:hover,
#hero .cta-button:focus,
.download-item .download-button:hover,
.download-item .download-button:focus {
  background: none !important;
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Strong override to style all relevant buttons with blue border and hover-fill */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.cta-button,
a.download-button,
.cta-button-nav {
  background: transparent !important;  /* reset any background:none */
  border: 2px solid var(--secondary-color-1) !important;
  color: var(--secondary-color-1) !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.cta-button:hover,
a.download-button:hover,
.cta-button-nav:hover {
  background: var(--secondary-color-1) !important;
  border: 2px solid var(--secondary-color-1) !important;
  color: #fff !important;
}

/* Remove glow/neon effect from footer logo */
.footer-logo, #obereder-logo {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Form Styles */
.form-column-left, .form-column-right {
    flex: 1 1 873px; /* vorher 900px, jetzt 3% weniger */
    min-width: 679px; /* vorher 700px, jetzt 3% weniger */
    max-width: 970px; /* vorher 1000px, jetzt 3% weniger */
    background: #f7fbff;
    border-radius: 18px;
    box-shadow: 0 4px 32px 0 rgba(43,139,204,0.10);
    padding: 56px 64px 48px 64px;
    margin: 0 0 32px 0;
    font-size: 1.18em;
}
#zimmerkategorie-group label,
#zimmerkategorie-group .option-group label {
    font-size: 0.98em;
}

/* Optimierte Checkbox-Gruppierung */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.option-group {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e7ef;
}
.option-group:last-child {
    border-bottom: none;
}
.option-group-title {
    font-weight: bold;
    margin-bottom: 6px;
    display: block;
    color: #2b8bcc;
}
.option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 12px;
}

/* Schriftgröße im gesamten Anmeldeformular etwas kleiner gesetzt */
#event-registration-form,
#event-registration-form input,
#event-registration-form label,
#event-registration-form textarea,
#event-registration-form .option-group-title {
    font-size: 0.93em;
}
.form-column-left, .form-column-right {
    font-size: 0.93em;
}
@media (max-width: 1100px) {
    .form-column-left, .form-column-right {
        font-size: 0.91em;
    }
    #event-registration-form,
    #event-registration-form input,
    #event-registration-form label,
    #event-registration-form textarea,
    #event-registration-form .option-group-title {
        font-size: 0.91em;
    }
}

#register .section-title {
    margin-bottom: 10px !important;
}
#register .section-title h2 {
    margin-bottom: 0.2em !important;
}
#register p.fade-in.delay-1 {
    margin-top: 0.2em !important;
}

/* --- Datenschutz-Checkbox und Button-Optimierung: nebeneinander, Button länger --- */

/* Datenschutz-Checkbox und Label nebeneinander, nur für diese Gruppe */
#event-registration-form .form-group.datenschutz-group {
  flex-direction: row;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.2em;
}
#event-registration-form .form-group.datenschutz-group label[for="datenschutz"] {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 1em;
  display: inline;
}
#event-registration-form input[type="checkbox"]#datenschutz {
  margin: 0 0.6em 0 0;
  width: 1.2em;
  height: 1.2em;
  accent-color: #2b8bcc;
}

/* Button: länger, nicht viel breiter */
#event-registration-form .cta-button {
  max-width: 220px;
  min-width: 120px;
  width: 100%;
  font-size: 1em;
  padding: 0.7em 0 0.7em 0 !important;
}

/* Neue CSS-Klasse für garantierte Obereder-Blau E-Mail-Adresse */
.obereder-blue {
  color: #2b8bcc !important;
  font-weight: 600;
  text-decoration: underline;
}

/* Programmübersicht & Experten Accordion Styles */
#experten-programm {
  margin: 3.5em auto 4em auto;
  max-width: 900px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px 0 rgba(43,62,108,0.07);
  padding: 3.5em 2.5em 2.5em 2.5em;
}
#experten-programm h2 {
  font-size: 2.5em;
  font-weight: 700;
  color: #223366;
  margin-bottom: 0.2em;
  letter-spacing: -0.5px;
}
#experten-programm p {
  color: #4a5a7a;
  font-size: 1.18em;
  margin-bottom: 2.2em;
}
.programm-tabs {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  margin-bottom: 2.2em;
  background: #f5f8fb;
  border-radius: 12px;
  padding: 0.2em;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.programm-tab {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.8em 2.6em;
  font-size: 1.13em;
  color: #223366;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  box-shadow: none;
}
.programm-tab.active {
  background: #2b8bcc;
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(43,139,204,0.10);
}
.programm-timetable {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.programm-row {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(43,62,108,0.06);
  padding: 1.3em 2.2em 1.3em 2.2em;
  position: relative;
  transition: box-shadow 0.18s, background 0.18s, transform 0.18s;
  border: none;
  min-height: 70px;
}
.programm-row.expandable:hover {
  box-shadow: 0 6px 24px 0 rgba(43,62,108,0.13);
  background: #f7fafd;
  transform: scale(1.015);
  z-index: 2;
}
.programm-row.pause {
  background: #f5f8fb;
  color: #7a8ca6;
  font-weight: 600;
  box-shadow: none;
  border-radius: 12px;
  justify-content: flex-start;
  padding: 1.3em 2.2em;
  margin-bottom: 1.2em;
}
.programm-time {
  min-width: 80px;
  font-weight: 700;
  color: #2b8bcc;
  font-size: 1.18em;
  margin-right: 1.6em;
  margin-top: 0.1em;
}
.programm-title {
  flex: 1 1 350px;
  font-weight: 700;
  color: #223366;
  font-size: 1.15em;
  margin-right: 1.2em;
  margin-top: 0.1em;
}
.programm-expert {
  min-width: 200px;
  color: #7a8ca6;
  font-size: 1em;
  font-weight: 500;
  margin-right: 1.2em;
  margin-top: 0.1em;
  text-align: right;
}
.programm-toggle {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  margin-left: 1.2em;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background 0.18s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.programm-toggle:after {
  content: '\25BC';
  font-size: 1.1em;
  color: #b0b9c9;
  display: block;
  transition: transform 0.18s, color 0.18s;
}
.programm-row.expandable:hover .programm-toggle:after,
.programm-toggle.open:after {
  color: #2b8bcc;
}
.programm-toggle.open:after {
  transform: rotate(180deg);
}
.programm-details {
  display: none;
  background: #f5f8fb;
  border-radius: 0 0 10px 10px;
  padding: 1.1em 2em 1.1em 5.5em;
  margin-top: 0.5em;
  color: #223366;
  font-size: 1.04em;
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(43,62,108,0.07);
}
.programm-details.open {
  display: block;
  animation: fadeInAccordion 0.3s;
}
@keyframes fadeInAccordion {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1100px) {
  #experten-programm { max-width: 99vw; padding: 2em 0.5em; }
}
@media (max-width: 700px) {
  .programm-row, .programm-details { flex-direction: column; align-items: flex-start; }
  .programm-expert, .programm-title, .programm-time { margin-right:  0; }
  .programm-details { padding: 1em 1em 1em 2.5em; }
}

/* CTA Location Highlights Bar Styles (formerly Comedy Hirten) */
.cta-location-highlights-section {
  background: #fff;
  width: 100%;
  padding: 20em 0 20em 0; /* noch mehr weißer Abstand oben und unten */
  margin: 0;
}
.cta-location-highlights-bar {
  width: 100%;
    margin: 0 auto;
  /* padding: 0; entfernt, falls vorhanden */
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Playfair Display', 'Montserrat', 'Segoe UI', Arial, sans-serif;
    background: none;
}
.cta-location-highlights-question {
  font-size: 1.45em;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 1.1em;
  margin-bottom: 0.2em;
  text-align: center;
  color: #153e6c;
  font-family: 'Playfair Display', 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
.cta-location-highlights-answer {
  font-size: 1.08em;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 1.1em;
  text-align: center;
  color: #153e6c;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
@media (max-width: 600px) {
  .cta-location-highlights-bar {
    max-width: 98vw;
  }
  .cta-location-highlights-question {
    font-size: 1.1em;
  }
  .cta-location-highlights-answer {
    font-size: 0.98em;
  }
}

/* Entfernt Standardabstände zwischen Abschnitten und sorgt für nahtlose weiße Flächen */
section {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: #fff;
  border: none;
}

.container {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #153e6c;
}

/* Entfernt Abstand speziell zwischen direkt aufeinanderfolgenden Sections */






section + section {
  margin-top: 0;
}

/* Entfernt Abstand bei .cta-location-highlights-section (vormals .cta-comedy-hirten-section), falls noch vorhanden */
.cta-location-highlights-section {
  margin: 0;
  padding: 0;
  background: #fff;
}

/* Hero date text block under the logo: h3 (Open Sans Medium) + p, stacked, no box */
.hero-date-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0 0 2rem 0; /* increased bottom spacing under the date block */
  gap: 0.15rem; /* tightened spacing between h3 and p */
}
.hero-date-bar h3 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700 !important; /* Open Sans Bold per request */
  font-size: 2.4rem; /* slightly reduced size */
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}
.hero-date-bar p {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* slightly reduced size */
  line-height: 1.35;
  color: #ffffff;
  opacity: 0.95;
  margin: 0;
}
@media (max-width: 700px) {
  .hero-date-bar {
    gap: 0.25rem;
  }
  .hero-date-bar h3 { font-size: 2.4rem; }
  .hero-date-bar p { font-size: 1.3rem; }
}

/* --- STARKER OVERRIDE: H2-LINIE SICHTBAR MACHEN (angepasst) --- */
h2:not(.kein-linienfix)::after {
  content: "" !important;
  display: block !important;
  width: 100px !important;
  height: 3px !important;
  background: #2b8bcc !important;
  margin: 0.3em auto 1.2em auto !important;
  border-radius: 2px !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  pointer-events: none !important;
  z-index: 10 !important;
}



#highlights h2::after,
#location h2::after {
  background: #2b8bcc !important;
}

/* Center the h2 heading and its decorative line for Downloads & Materialien */
#downloads .container > h2.section-title {
  text-align: left !important;
  width: 100%;
  display: block;
}
#downloads .container > h2.section-title::after {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* Galerie: Linie linksbündig und in Gold */
#galerie .container > h2.section-title {
  text-align: left !important;
  width: 100%;
  display: block;
}
#galerie .container > h2.section-title::after {
  background: var(--accent-gold) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* Hotel Schachner Komfort Abschnitt – Galerie statt Slider (2 Spalten x 3 Reihen) */
.hotel-eder-section {
  width:100%;
  max-width:100%;
  background:#000;
  padding:6rem 0 6rem 0;
  margin:0 0 2em 0;
}
.hotel-eder-flex {
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap: clamp(1.2rem, 4vw, 3rem); /* match #highlights spacing */
  width:100%;
  max-width:1200px;
  margin:0 auto;
  flex-wrap:wrap;
  padding: 0; /* rely on outer .container padding for insets */
}
.hotel-eder-info {
  background: transparent;
  border-radius:18px;
  box-shadow:0 4px 24px #0001;
  padding:2.5em 2.2em 1.2em 2.2em;
  max-width:520px;
  min-width:340px;
  flex:1 1 420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
    color: #2b8bcc !important;
    margin: 0 0 5px;
}
.hotel-eder-info h2 {
  font-size:2em;
  font-weight:800;
    color:#1f3c72;
  letter-spacing:0.01em;
  /* Remove decorative line and reduce spacing */
  border-bottom: none !important;
  box-shadow: none !important;
}
.hotel-eder-info p {
  font-size:1em;
  color:#fff;
  margin-bottom:1rem;
  line-height:1.5;
  /* Reduce spacing below h2 */
  margin-top: 0 !important;
}
.hotel-eder-btns {
  display:flex;
  gap:0.7em;
  flex-wrap:wrap;
  margin-top:0.05rem;
}
.hotel-eder-btn {
  background: #1f3c72 !important;
  color: #ffffff !important;
  border: 2px solid #1f3c72 !important;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: none !important;
  transition: all 0.3s ease;
  display: inline-block;
}
.hotel-eder-btn:hover {
  background: #2c5aa0 !important;
  color: #fff !important;
  border: 2px solid #2c5aa0 !important;
  outline: none !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(31,60,114,0.3);
}
.hotel-eder-btn-outline { background:#fff;color:#2b8bcc;border:2px solid #2b8bcc; }
.hotel-eder-btn-outline:hover { background:#2b8bcc;color:#fff; }

/* Neue Galerie */
.hotel-eder-gallery {
  flex: 1 1 616px;
  min-width: 340px;
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
}
.hotel-eder-gallery figure {
  margin: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  background: transparent;
}
.hotel-eder-gallery img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .hotel-eder-gallery {
    grid-template-columns: 1fr; /* mobil untereinander */
  }
}
.slider-card-main .slider-img-main {
  width:616px;
  height:514px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 2px 12px #0001;
  background:#eaeaea;
  z-index:1;
  transition:box-shadow 0.2s;
}
.slider-card-preview .slider-img-preview {
  width:220px;
  height:514px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 2px 12px #0001;
  background:#eaeaea;
  margin-left:-60px;
  z-index:0;
  opacity:0.85;
  filter:blur(1px) grayscale(0.1);
  transition:opacity 0.2s,filter 0.2s;
}
.slider-card-info {
  display:none;
}
.slider-dots {
  display:flex;
  justify-content:center;
  gap:0.5em;
  margin-top:1em;
}
.slider-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#bbb;
  cursor:pointer;
  transition:background 0.2s;
  border:none;
}
.slider-dot.active {
  background:#2b8bcc;
}
@media (max-width:1300px) {
  .slider-card-main .slider-img-main { width:420px;height:350px; }
  .slider-card-preview .slider-img-preview { width:120px;height:350px; }
  .slider-images { min-height:350px; }
}
@media (max-width:900px) {
  .hotel-eder-flex { flex-direction:column; align-items:center; gap:2em; }
  .hotel-eder-slider-wrap { max-width:98vw; }
  .slider-card-main .slider-img-main { width:98vw;max-width:98vw;height:220px; }
  .slider-card-preview .slider-img-preview { width:60vw;max-width:60vw;height:220px;margin-left:-18vw; }
  .slider-images { min-height:220px; }
}

/* Neue Styles für die Icon-Zeile im Hotel Eder Abschnitt */
.hotel-eder-icons-row {
  gap: 2vw !important; /* Abstand zwischen Icons/Text verringern */
  margin: 1.2em 0 0.7em 0 !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.hotel-eder-icons-row .leisure-icon {
  background: none !important; /* Weißer Hintergrund entfernen */
  box-shadow: none !important;
  color: #1f3c72 !important; /* Dunkelblau für Icons */
  font-size: 2.3em !important;
  padding: 0.15em !important;
  margin-bottom: 0.1em !important;
  vertical-align: middle;
}
.hotel-eder-icons-row .leisure-title {
  color: #1f3c72 !important; /* Dunkelblau für Text */
  font-size: 1.05em !important; /* Kleinerer Schriftschnitt */
  font-weight: 500 !important;
  margin: 0 1.2vw 0 1.2vw !important;
  letter-spacing: 0.01em;
  line-height: 1.1;
  vertical-align: middle;
  display: block !important;
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 700px) {
  .hotel-schachner-icons-row {
    gap: 3vw !important;
  }
  .hotel-schachner-icons-row .leisure-icon {
    font-size: 1.4em !important;
    padding: 0.1em !important;
  }
  .hotel-schachner-icons-row .leisure-title {
    font-size: 0.98em !important;
    margin: 0 0.7vw 0 0.7vw !important;
  }
}

/* Formular-Erfolgsmeldung in sehr hellem Blau */
.form-success {
  background: #f6fbfe !important;
  border-left: 4px solid #b3d8f6 !important;
  color: #2b8bcc !important;
  text-align: center;
  padding: 2.2em 1.2em;
  margin-top: 2em;
  border-radius: 12px;
  font-size: 1.15em;
  box-shadow: none !important;
}

/* Popup Modal Styles for Themen Freitag/Samstag */
.popup-modal {
  display: none;
  position: fixed;
  z-index: 4000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 20, 40, 0.92);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
}
.popup-modal.active {
  display: flex;
}
/* Ensure inline style display:block still uses flex layout for centering */
.popup-modal[style*="display: block"] {
  display: flex !important;
}
.popup-content {
  background: #fff;
  color: #1f3c72;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  max-width: 600px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5em 2em 2em 2em;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.04em;
  line-height: 1.45;
}
.popup-content h3 {
  font-size: 1.25em;
  margin-bottom: 0.7em;
  margin-top: 0.2em;
  line-height: 1.2;
}
.popup-topics {
  margin-top: 0.5em;
}
.popup-topic {
  margin-bottom: 1em;
}
.popup-topic h3 {
  font-size: 1.08em;
  margin-bottom: 0.3em;
  margin-top: 0.1em;
  line-height: 1.18;
}
.popup-topic p {
  font-size: 0.98em;
  margin-bottom: 0.2em;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .popup-content {
    font-size: 0.98em;
    padding: 0.7em 0.3em 0.7em 0.3em;
  }
  .popup-content h3 {
    font-size: 1.08em;
  }
}

/* Ensure popup-close (X) is always right-aligned */
.popup-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.popup-close {
  position: absolute;
  top: 16px;
  right: 18px;
  align-self: flex-end;
  /* already has font-size, color, etc. */
}
@media (max-width: 700px) {
  .popup-close {
    top: 8px;
    right: 10px;
  }
}

/* Preise p.Person Section: Mehr Abstand nach oben und abgerundeter Übergang */
#preise, #preiseproperson, #preise-pro-person, #preise-p-person, #preisepperson, #preise-person, #preise-person-section, #preise-section {
  padding-top: 3.5em !important;
  border-top-left-radius: 32px !important;
  border-top-right-radius: 32px !important;
  margin-top: 0 !important;
}

/* Entferne ggf. unteren Margin/Padding der Icons-Section */
.hotel-eder-icons-row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Entfernt ALLE Linien unter h2 explizit für Branchentag: auch globale h2::after-Overrides! */
.hotel-eder-info h2,
.hotel-eder-section h2 {
  border-bottom: none !important;
  box-shadow: none !important;
  background: none !important;
  margin-bottom: 0.1em !important;
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  position: static !important;
}
.hotel-eder-info h2::after,
.hotel-eder-info h2::before,
.hotel-eder-section h2::after,
.hotel-eder-section h2::before {
  content: none !important;
  display: none !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  box-shadow: none !important;
}
.hotel-schachner-komfort-info p {
  margin-top: 0.05em !important;
}

/* Download-Buttons: Gleiches Design wie Nav-Button, disabled-Variante für Präsentationen */
.download-button {
  background: transparent !important;
  color: #2b8bcc !important;
  border: 2px solid #2b8bcc !important;
  border-radius: 2em;
  font-weight: 700;
  padding: 0.9em 2em;
  font-size: 1.05em;
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  cursor: pointer;
}
.download-button:hover,
.download-button:focus {
  background: #2b8bcc !important;
  color: #fff !important;
  border-color: #2b8bcc !important;
}
.download-item-disabled .download-button,
.download-button.disabled {
  background: #6c768a !important;
  color: #fff !important;
  border: 2px solid #b0b9c9 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}
.download-item-disabled .download-button::after,
.download-button.disabled::after {
  content: "Bald verfügbar";
  display: block;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  margin-top: 0;
  letter-spacing: 0.01em;
}
.download-item-disabled .download-button span,
.download-button.disabled span {
  display: none;
}

/* Abstand unter Download-Grid zum Footer */
.download-grid {
  padding-bottom: 7em;
}

/* Footer: Weißer Text auf allen Seiten */
footer, footer p, footer a, footer .footer-content, footer .footer-social-label, footer .footer-social-link, footer .footer-website-link, footer .footer-links, footer .footer-links a, footer .footer-links-separator, footer .copyright {
    color: #fff !important;
}

footer .footer-logo {
    filter: brightness(100%) invert(0%);
}

/* --- Responsive Verbesserungen für perfekte mobile Ansicht --- */
@media (max-width: 900px) {
  .highlight-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  .highlight-item {
    padding: 1.2rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .highlight-img {
    height: 160px !important;
  }
  .preise-visual-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  .preise-block {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 1.2rem !important;
  }
  .footer-content, .footer-social, .footer-links {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0.5em !important;
  }
  .footer-social-icons {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
  }
}
@media (max-width: 700px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .section-title {
    margin-bottom: 1.2em !important;
  }
  .highlight-grid {
    gap: 0.7em !important;
  }
  .highlight-item {
    padding: 0.7em 0.5em !important;
    font-size: 0.98em !important;
  }
  .highlight-img {
    height: 70px !important;
    margin-bottom: 0.5em !important;
  }
  .highlight-item h3 {
    font-size: 1.1em !important;
    margin-bottom: 0.3em !important;
  }
  .highlight-item ul {
    margin-bottom: 0.3em !important;
  }
  .mehr-erfahren {
    font-size: 0.95em !important;
    margin-top: 0.2em !important;
  }
  .preise-visual-grid {
    gap: 0.7em !important;
  }
  .preise-block {
    padding: 0.7em 0.5em !important;
    font-size: 0.98em !important;
  }
  .preise-title {
    font-size: 1.1em !important;
    margin-bottom: 0.3em !important;
  }
  .preise-row {
    flex-direction: column !important;
    gap: 0.2em !important;
  }
  .preise-label, .preise-value {
    font-size: 0.98em !important;
    margin-left: 0 !important;
  }
  #event-registration-form {
    padding: 0.5em 0.2em !important;
    font-size: 0.98em !important;
  }
  .form-columns {
    flex-direction: column !important;
    gap: 0.2em !important;
  }
  .form-group {
    margin-bottom: 0.7em !important;
  }
  .form-group label {
    font-size: 1em !important;
    margin-bottom: 0.2em !important;
  }
  .form-group input, .form-group textarea {
    font-size: 1em !important;
    padding: 0.6em 0.7em !important;
  }
  .cta-button {
    font-size: 1em !important;
    padding: 0.7em 0 !important;
    min-width: 100px !important;
    max-width: 100% !important;
  }
  .option-list label {
    font-size: 0.98em !important;
    padding: 0.3em 0 !important;
  }
  .footer-content, .footer-social, .footer-links {
    font-size: 0.95em !important;
    gap: 0.2em !important;
  }
  .footer-logo {
    width: 80px !important;
    margin-bottom: 0.3em !important;
  }
}
@media (max-width: 480px) {
  h1, h2, h3 {
    font-size: 1em !important;
    margin-bottom: 0.5em !important;
  }
  .highlight-img {
    height: 50px !important;
  }
  .preise-title {
    font-size: 1em !important;
  }
  .footer-logo {
    width: 60px !important;
  }
}

/* Abstand nach unten bei Seminar ohne Nächtigung und Verlängerung entfernen */
@media (max-width: 700px) {
  .preise-block:not(.preise-block-full) {
    margin-bottom: 0 !important;
  }
  .preise-visual-grid {
    margin-bottom: 0 !important;
  }
  #pricing {
    padding-bottom: 1em !important;
    margin-bottom: 0 !important;
  }
}

/* Abstand unterhalb vom Preis zum Kachel-Ende minimieren */
@media (max-width: 700px) {
  .preise-block .preise-value {
    margin-bottom: 0 !important;
  }
  .preise-row {
    margin-bottom: 0 !important;
  }
  .preise-block {
    padding-bottom: 0 !important;
  }
}


/* Fragebogen: Options 1–5 nebeneinander für ausgewählte Fragen */
label[for="q1"] + .option-list,
label[for="q2"] + .option-list,
label[for="q3"] + .option-list,
label[for="q4"] + .option-list,
label[for="q5"] + .option-list,
label[for="q6"] + .option-list,
label[for="q7"] + .option-list,
label[for="q8"] + .option-list,
label[for="q9"] + .option-list,
label[for="q12"] + .option-list,
label[for="q14"] + .option-list,
label[for="q15"] + .option-list {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 12px;
}

/* Linke Spalte: Bewertungs-Nummern linksbündig ausrichten */
.form-column-left .form-group {
  align-items: flex-start;
}
.form-column-left .option-list {
  align-self: flex-start;
}
.form-column-left .option-list label {
  text-align: left;
  justify-content: flex-start;
}


/* Rechts-Spalte: Ausrichtungs-Override für Fragen 12, 14, 15 – Optionen linksbündig */
.form-column-right label[for="q12"] + .option-list,
.form-column-right label[for="q14"] + .option-list,
.form-column-right label[for="q15"] + .option-list {
  align-self: flex-start;
  justify-content: flex-start;
}
.form-column-right label[for="q12"] + .option-list label,
.form-column-right label[for="q14"] + .option-list label,
.form-column-right label[for="q15"] + .option-list label {
  text-align: left;
  justify-content: flex-start;
}




/* --- Option list horizontal layout: show radio options side by side --- */
.option-list {
  display: flex;
  flex-wrap: wrap;    /* erlaubt Umbruch bei zu wenig Platz */
  gap: 0.5rem 1rem;   /* vertikaler und horizontaler Abstand */
}

.option-list label {
  display: inline-flex;
  align-items: center; /* Icon und Text vertikal zentriert */
}


/* === Farb-Palette Overrides (Branchentag NFZ) ===
   Vorgaben: Hintergrund Schwarz, Blau #298dcd, Gold #a48b6e
   Minimal-invasive Überschreibungen ohne breites Refactoring */
:root {
  --brand-blue: #298dcd;
  --brand-gold: #a48b6e;
}

/* Zierlinie unter h2 in Brand-Blau */
h2::after {
  background: var(--brand-blue) !important;
}

/* Primäre Call-To-Action Buttons in Brand-Blau */
.cta-button,
#event-registration-form .cta-button {
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
.cta-button:hover,
#event-registration-form .cta-button:hover {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #ffffff !important;
}

/* Gold-Variante für spezielle CTAs (z.B. "Mehr erfahren") */
.cta-button-gold {
  border-color: var(--brand-gold) !important;
  color: var(--brand-gold) !important;
}
.cta-button-gold:hover,
.cta-button-gold:focus {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #ffffff !important;
}

/* Labels und Links im Formular in Brand-Blau halten */
#event-registration-form label,
#event-registration-form a,
#register .container {
  color: var(--brand-blue) !important;
}

/* Dezente Gold-Akzente: Trennlinien, kleine Deko-Elemente */
.separator, .gold-accent, .gold-dot::before {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
}


/* --- Hero: Left-aligned variant with logo above date and CTA --- */
#hero .hero-left {
  text-align: left !important;
  align-items: flex-start !important;
}
#hero .hero-left .hero-logo {
  display: block;
  width: min(82vw, 680px);
  height: auto;
  margin: 0 0 0.9rem 0; /* increased gap below logo to separate more from date bar */
}
#hero .hero-left .hero-date-bar {
  margin: 0 0 2rem 0 !important; /* increased bottom spacing under the date block in hero */
  justify-content: flex-start !important;
}
#hero .hero-left .cta-button {
  align-self: flex-start !important;
}
@media (max-width: 700px) {
  #hero .hero-left .hero-logo {
    width: min(88vw, 520px);
  }
}

/* Ensure the left alignment in the header (hero) has the same left inset as other sections */
#hero .container.hero-container-wide {
  max-width: 1200px !important;  /* match global .container */
  width: 100%;
  padding-left: var(--spacing-lg) !important; /* same horizontal padding as .container */
  padding-right: var(--spacing-lg) !important;
  margin: 0 auto; /* center container so its left edge matches other sections */
  text-align: left !important;
  align-items: flex-start !important;
}

/* --- Hero: remove scroll arrow and add hover effect to CTA --- */
#hero .scroll-down-arrow { display: none !important; }

/* Subtle, accessible hover/focus effect just for the hero CTA */
#hero .cta-button {
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
#hero .cta-button:hover,
#hero .cta-button:focus {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(41, 141, 205, 0.35) !important; /* brand blue shadow */
}
#hero .cta-button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #hero .cta-button,
  #hero .cta-button:hover,
  #hero .cta-button:focus {
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
    transform: none !important;
  }
}


/* === Section Background: Highlights with full-bleed background image === */
#highlights {
  /* apply updated background image and align left */
  background-image: url('../images/background.png');
  background-size: cover;           /* vollflächig */
  background-position: left center; /* linksbündig ausgerichtet */
  background-repeat: no-repeat;     /* nicht kacheln */
  position: relative;               /* für Overlay */
  overflow: hidden;                 /* Overlay sauber beschneiden */
}
#highlights::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.38); /* dezentes Dunkel-Overlay für Lesbarkeit */
  z-index: 0;
  pointer-events: none;
}
#highlights > .container {
  position: relative;
  z-index: 1; /* Inhalt über dem Overlay */
}

/* Insights icons row under the image (now placed before the H2) */
.insights-icons {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 1rem 0; /* space below icons before headline */
  flex-wrap: nowrap;
}
.insights-icon {
  height: 36px; /* slightly smaller desktop/tablet size */
  width: auto;
  display: inline-block;
  filter: none;
}
@media (max-width: 700px) {
  .insights-icons {
    gap: 12px;
    margin: 0 0 0.8rem 0; /* space below icons before headline */
    flex-wrap: wrap;
  }
  .insights-icon {
    height: 28px; /* slightly smaller mobile size */
  }
}


/* Highlights: H2 underline left-aligned and in gold */
#highlights .insights-left h2::after {
  background: var(--brand-gold, #a48b6e) !important;
  margin: 0.3em 0 1.2em 0 !important; /* left-aligned (no auto margins) */
  left: 0 !important;
  right: auto !important;
}


/* Gold variant for download-style buttons (used for "Mehr erfahren") */
.download-button-gold {
  background: var(--brand-gold, #a48b6e) !important;
  border-color: var(--brand-gold, #a48b6e) !important;
  color: #ffffff !important;
}
.download-button-gold:hover,
.download-button-gold:focus {
  background: var(--brand-gold, #a48b6e) !important;
  border-color: var(--brand-gold, #a48b6e) !important;
  color: #ffffff !important;
}


/* Ensure the "Mehr erfahren" button in Highlights appears gold */
#highlights .insights-left .download-button-gold,
#highlights .insights-left .download-button-gold:visited {
  background: var(--brand-gold, #a48b6e) !important;
  border-color: var(--brand-gold, #a48b6e) !important;
  color: #ffffff !important;
}
#highlights .insights-left .download-button-gold:hover,
#highlights .insights-left .download-button-gold:focus {
  background: var(--brand-gold, #a48b6e) !important;
  border-color: var(--brand-gold, #a48b6e) !important;
  color: #ffffff !important;
}

/* CTA Location Highlights – CI-Blau Hintergrund (#298dcd) mit weißen Icons & Text */
.cta-location-highlights-section {
  background: var(--brand-blue, #298dcd) !important; /* CI-Blau */
  padding: 1.2em 0 1.2em 0 !important; /* schlankerer Streifen */
  color: #ffffff !important;
  display: flex !important;             /* Inhalte im Streifen zentrieren */
  align-items: center !important;       /* vertikal mittig */
  justify-content: center !important;   /* horizontal mittig */
  text-align: center !important;        /* Text mittig ausrichten */
}
.cta-location-highlights-section .cta-location-highlights-bar {
  background: transparent !important;
}
.cta-location-highlights-section .cta-location-highlights-question,
.cta-location-highlights-section .cta-location-highlights-answer {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Icons-Reihe innerhalb des CTA-Abschnitts */
.cta-location-highlights-icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  gap: 18px 22px;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 1.2em auto 0 auto;
  padding: 0 16px;
}
@media (max-width: 900px) {
  .cta-location-highlights-icons { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cta-location-highlights-icons { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
}

.cta-location-highlights-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.cta-location-highlights-icon-img {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* SVGs in Weiß einfärben */
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .cta-location-highlights-icon-img { height: 26px; margin-bottom: 6px; }
}
.cta-location-highlights-icon-label {
  color: #ffffff !important;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.2;
}

/* Registration form: swap columns visually (right column appears on the left) */
#register .form-columns .form-column-right { order: 1; }
#register .form-columns .form-column-left { order: 2; }

/* Ensure order persists on mobile stacking (right column shown first) */
@media (max-width: 1100px) {
  #register .form-columns { flex-direction: column; }
  #register .form-columns .form-column-right { order: 1; }
  #register .form-columns .form-column-left { order: 2; }
}

/* Make the submit button solid blue with accessible hover/focus */
#event-registration-form .cta-button-form {
  background: #298dcd !important; /* enforce CI blue */
}
#event-registration-form .cta-button-form:hover,
#event-registration-form .cta-button-form:focus {
  background: #1f79b3 !important; /* darker blue for hover/focus */
  color: #fff !important;
  box-shadow: 0 4px 18px 0 rgba(31,44,114,0.13);
}
/* ===== FORMULAR-STYLES: Übernommen aus unternehmertag-kfz-2025 und leicht angepasst ===== */
.form-section {
  padding: 4rem 0;
}
.form-section .section-title {
  text-align: center;
  margin-bottom: 2rem;
  color: #1f3c72;
  /* inherit font-size and font-weight from global h2 to match Downloads & Materialien */
}
.form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1f3c72;
  font-size: 1rem;
}
.form-group input[type="text"],
.form-group input[type="email"] {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  color: #0a0a0a;
  background: #ffffff;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus {
  outline: none;
  border-color: #1f3c72;
  box-shadow: 0 0 0 3px rgba(31, 60, 114, 0.1);
}
.form-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.form-row .form-group { flex: 1; margin-bottom: 0; }
.form-row.inline-group { align-items: flex-end; gap: 2rem; }
.name-group { flex: 2; }
.name-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1f3c72; }
.name-group input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  color: #0a0a0a;
  background: #ffffff;
}
.name-group input:focus { outline: none; border-color: #1f3c72; box-shadow: 0 0 0 3px rgba(31,60,114,0.1); }
.radio-group { flex: 1; min-width: 200px; }
.radio-group label:first-of-type { font-weight: 600; display: block; margin-bottom: 0.5rem; color: #1f3c72; }
.radio-group label { display: inline-flex; align-items: center; margin-right: 1rem; margin-bottom: 0.5rem; font-weight: normal; cursor: pointer; }
.radio-group input[type="radio"] { margin-right: 0.5rem; transform: scale(1.1); }
.options-group {
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  background-color: #fafbfc;
}
.options-group legend { font-weight: 600; color: #1f3c72; padding: 0 0.5rem; font-size: 1.1rem; }
.options-group label { display: inline-flex; align-items: center; margin-right: 2rem; margin-bottom: 1rem; font-weight: normal; cursor: pointer; }
/* Ensure a clear gap to the right of price values inside labels */
.options-group label strong { margin-right: 0.5rem; display: inline-block; }
.options-group input[type="checkbox"], .options-group input[type="radio"] { margin-right: 0.75rem; transform: scale(1.2); }
.highlight {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
  border: 2px solid #1f3c72;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: left;
}
.long-checkbox { display: inline-flex; align-items: flex-start; text-align: left; }
.long-checkbox input[type="checkbox"] { margin-right: 1rem; margin-top: 0.25rem; transform: scale(1.3); }
.label-text { line-height: 1.4; color: #1f3c72; }
.label-text strong { font-size: 1.1rem; font-weight: 700; }
.label-text small { font-size: 0.9rem; color: #5a6c7d; font-weight: normal; }
.datenschutz-checkbox { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0; }
.datenschutz-checkbox input[type="checkbox"] { margin: 0; transform: scale(1.2); flex-shrink: 0; }
.datenschutz-checkbox label { margin: 0; font-weight: normal; line-height: 1.4; cursor: pointer; color: #1f3c72 !important; }
#submit-registration {
  width: 100%;
  padding: 0.875rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid #1f3c72;
  background: #1f3c72;
  color: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-top: 0.75rem;
}
#submit-registration:hover { background: #2c5aa0; border-color: #2c5aa0; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(31,60,114,0.3); }
#submit-registration:active { transform: translateY(0); }
@media (max-width: 700px) { .form-row { flex-direction: column; } .radio-group { min-width: 0; } }
/* Link-Styling im Formular */
.form-container a { color: #1f3c72; text-decoration: underline; }
.form-container a:hover { color: #2c5aa0; }
/* ===== Ende Formular-Styles ===== */


/* Dark theme overrides for options groups within the registration form (NFZ) */
.form-section .options-group {
  background-color: transparent; /* use dark page background */
  border-color: #2c5aa0; /* slightly lighter blue to match hover */
}
/* Options labels should also be in Obereder-Dunkelblau for consistency */
.form-section .options-group label {
  color: #1f3c72 !important; /* labels now dark blue */
}
.form-section .options-group legend {
  color: #1f3c72 !important; /* legend remains Obereder dunkelblau */
}

/* Radio options (Ja/Nein) should be dark gray on NFZ form */
.form-section .radio-group label:not(:first-of-type) {
  color: #8a8f98 !important; /* dunkelgrau */
}


/* --- Legend color override to ensure dark, readable legends across the form --- */
.form-section .options-group legend {
  color: #1f3c72 !important;
}


/* Ensure Datenschutzerklärungen link in the checkbox is dark blue */
.form-section .datenschutz-checkbox a {
  color: #1f3c72 !important;
  text-decoration: underline;
}
.form-section .datenschutz-checkbox a:hover,
.form-section .datenschutz-checkbox a:focus {
  color: #2c5aa0 !important;
}


/* --- Mobile equal side padding fixes for NFZ page --- */
@media (max-width: 700px) {
  /* Ensure non-container sections have the same left/right inset as .container */
  .hotel-eder-flex,
  .cta-location-highlights-icons {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* Make sure wide/bleed sections don't overflow viewport and cause asymmetric gutters */
  .hotel-schachner-komfort-section,
  .hotel-schachner-komfort-flex {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Align hero wide container gutters with global mobile container gutters */
  #hero .container.hero-container-wide {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Avoid forced minimum widths that cause overflow/asymmetric margins on small screens */
  .hotel-eder-gallery,
  .hotel-schachner-komfort-info {
    min-width: 0 !important;
  }
}


/* --- Mobile: ensure left-aligned layout for participant rows (names + radio groups) --- */
@media (max-width: 700px) {
  .form-section .form-container,
  .form-section .form-row,
  .form-section .inline-group,
  .form-section .name-group,
  .form-section .radio-group,
  .form-section .radio-group label,
  .form-section .name-group label {
    text-align: left !important;
  }
  .form-section .form-row.inline-group,
  .form-section .radio-group {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  /* Ensure Teilnehmer 1/2 label and input span the full available width on mobile */
  .form-section .inline-group .name-group,
  .form-section .inline-group .name-group label,
  .form-section .inline-group .name-group input[type="text"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Title image replacing H2 in Hotel Eder info box */
.hotel-schachner-komfort-info .hotel-eder-title-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 0.1em 0;
}


/* --- Networking section: match width to global section/container --- */
#networking .container {
  max-width: 1200px; /* align with global .container so .networking-features has same width as the section */
  margin-left: auto;
  margin-right: auto;
}


/* === Typography (NFZ): Local Open Sans faces + heading weights === */
/* Load local Open Sans fonts (Regular 400, Light 300, Bold 700) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/static/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/static/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/static/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/static/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Apply Open Sans to body text and paragraphs (Regular) */
body, p {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 400;
}

/* Headings: typography (h2 uppercase Light, h3 normal-case Medium) */
h2,
h3 {
  font-family: 'Open Sans', Arial, sans-serif;
}
/* h2 = Open Sans Light */
h2 { text-transform: uppercase; font-weight: 300 !important; font-size: 3.2rem; line-height: 1.1; }
/* h3 = Open Sans Medium */
h3 { text-transform: none !important; font-weight: 500 !important; font-size: 1.95rem; line-height: 1.15; }

/* Tablet */
@media (max-width: 992px) {
  h2 { font-size: 2.6rem; line-height: 1.1; }
  h3 { font-size: 1.7rem; line-height: 1.15; }
}

/* Mobile */
@media (max-width: 700px) {
  h2 { font-size: 2.3rem; line-height: 1.1; }
  h3 { font-size: 1.5rem; line-height: 1.15; }
}


/* Ensure intro paragraphs in Highlights are white for readability over background */
#highlights .insights-left p {
  color: #ffffff !important;
}

/* === Programm Section (two-column, black background) === */
#programm.programm-section {
  background: #000 url('../images/hintergrund_programm.png') center center / cover no-repeat;
  padding: 5rem 0 8rem 0;
}
#programm .programm-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.5rem; /* increase spacing below the programm grid */
}
#programm .programm-figure {
  margin: 0;
}
#programm .programm-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
#programm .programm-right h2 {
  color: #ffffff !important;
  margin-top: 0;
}
#programm .programm-right h2::after {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: auto !important;
  background: #2b8bcc !important; /* Obereder-Blau Linie */
}
#programm .programm-intro {
  color: #ffffff;
  opacity: 0.95;
  margin: 0.25rem 0 0.75rem 0;
  font-size: 1.05rem;
}
#programm .programm-list {
  counter-reset: prog;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.5rem;
  color: #ffffff;
}
#programm .programm-list li {
  position: relative;
  padding: 0.65rem 0.75rem 0.65rem 3rem;
  margin: 0;
  line-height: 1.4;
  background: rgba(41, 141, 205, 0.28); /* increased blue background opacity for stronger contrast */
  border: 1px solid rgba(41, 141, 205, 0.70); /* stronger blue border for clearer edge */
  border-radius: 10px;
}
#programm .programm-list li::before {
  counter-increment: prog;
  content: counter(prog);
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #a48b6e;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Open Sans', Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(164, 139, 110, 0.35);
}
@media (max-width: 900px) {
  #programm .programm-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  #programm .programm-grid {
    grid-template-columns: 1fr;
  }
  #programm .programm-left, #programm .programm-right {
    min-width: 0;
  }
}
@media (max-width: 700px) {
  #programm .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
}


/* --- Center the image in the Programm section --- */
#programm .programm-figure {
  text-align: center; /* center inline content like the image */
}
#programm .programm-image {
  display: inline-block; /* allows text-align to center it */
  width: auto;           /* prevent forced 100% width so centering is visible */
  max-width: 100%;       /* stay responsive inside the column */
  height: auto;          /* preserve aspect ratio */
  margin: 0 auto;        /* safe centering if it becomes block-level elsewhere */
}


/* Programm section: title image replacing H2 */
#programm .programm-title-image {
  display: block;
  width: 100%; /* make the right image larger: fill the column width */
  height: auto;
  margin: 0 0 0.5rem 0; /* small gap before intro text */
}


/* Button variants per spec: blue/white/gold outline with hover fill */
.btn-blue-outline,
.btn-white-outline,
.btn-gold-outline {
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background-color var(--transition-normal) ease, color var(--transition-normal) ease, border-color var(--transition-normal) ease;
}

/* 1) Light-blue outline + blue text; hover: blue fill + white text */
.btn-blue-outline {
  background: transparent !important;
  border: 2px solid var(--secondary-color-1) !important; /* hellblau Rand */
  color: var(--secondary-color-1) !important;            /* blaue Schrift */
}
.btn-blue-outline:hover,
.btn-blue-outline:focus {
  background: var(--secondary-color-1) !important;       /* Button wird blau */
  border-color: var(--secondary-color-1) !important;
  color: #ffffff !important;                              /* Schrift wird weiß */
}

/* 2) White outline + white text; hover: white fill + light-blue text */
.btn-white-outline {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}
.btn-white-outline:hover,
.btn-white-outline:focus {
  background: #ffffff !important;                         /* Button wird weiß */
  border-color: #ffffff !important;
  color: var(--secondary-color-1) !important;            /* Schrift hellblau */
}

/* 3) Gold outline + gold text; hover: gold fill + white text */
.btn-gold-outline {
  background: transparent !important;
  border: 2px solid var(--accent-gold) !important;
  color: var(--accent-gold) !important;
}
.btn-gold-outline:hover,
.btn-gold-outline:focus {
  background: var(--accent-gold) !important;             /* Goldener Button */
  border-color: var(--accent-gold) !important;
  color: #ffffff !important;                              /* weiße Schrift */
}

/* Ensure variant wins over legacy download button rules */
a.download-button.btn-white-outline {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}
a.download-button.btn-white-outline:hover,
a.download-button.btn-white-outline:focus {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--secondary-color-1) !important;
}


/* Center the registration section title explicitly */
#anmeldung h2.section-title {
  text-align: center !important;
  margin-left: auto;
  margin-right: 0 !important;
}


/* Darken background image in Programm section */
#programm.programm-section {
  position: relative;
}
#programm.programm-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75); /* adjustable darkness increased */
  z-index: 0;
  pointer-events: none;
}
#programm .container {
  position: relative;
  z-index: 1; /* ensure content is above the dark overlay */
}


/* === NFZ: Slightly darken hero video background with black overlay === */
/* Keep hero section gradient/tint overlay disabled, but add a subtle black overlay over the video. */
#hero::after {
  display: none !important;
  background: none !important;
}
/* Black overlay on the video background container */
.hero-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none !important; /* remove layover */
  background: none !important;
  pointer-events: none;
  z-index: 1;
}
.hero-video-bg video,
#hero-video {
  filter: none !important; /* rely on overlay instead of video brightness filter */
}


/* Stack Hotel Eder columns at the same breakpoint as #highlights (<=1024px) */
@media (max-width: 1024px) {
  .hotel-eder-flex {
    flex-direction: column; /* single column layout similar to #highlights grid */
  }
  .hotel-eder-flex .hotel-eder-info,
  .hotel-eder-flex .hotel-eder-gallery {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0; /* prevent unwanted wrap constraints */
  }
}


/* === Remove any overlay/blur on the hero left container === */
#hero .container.hero-container-wide.hero-left {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* Gallery Section (tile grid) */
.gallery-section {
  padding: var(--spacing-xl) 0;
  background: var(--dark-bg);
}
.gallery-section .section-title span {
  color: var(--accent-gold);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0c0c0c;
  box-shadow: var(--shadow-normal);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1; /* Forces square tiles */
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow) ease;
}
.gallery-item:hover img {
  transform: scale(1.06);
}
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}


/* Mobile-only: turn gallery grid into horizontal swipe carousel */
@media (max-width: 700px) {
  .gallery-grid {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 0 12px;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item {
    flex: 0 0 80vw; /* show ~1 item, hint of next */
    scroll-snap-align: center;
    border-radius: 12px;
  }
  .gallery-item img { aspect-ratio: 1 / 1; }
  /* Disable hover zoom on touch */
  .gallery-item:hover img { transform: none !important; }
}


/* Mobile: h2 size set to 5rem as requested */
@media (max-width: 700px) {
  h2 { font-size: 5rem; }
  h2.section-title { font-size: 5rem; }
  .hotel-eder-info h2 { font-size: 5rem; }
}
@media (max-width: 480px) {
  h2 { font-size: 5rem; }
  h2.section-title { font-size: 5rem; }
  .hotel-eder-info h2 { font-size: 5rem; }
}