/* --- style.css --- */

/* --- Variables & Basic Reset --- */
:root {
  --primary-color: #007399; /* Haupt-Blau */
  --secondary-color: #005f73; /* Dunkleres Blau/Türkis */
  --accent-color: #0a9396; /* Akzent Türkis */
  --light-bg: #e0f7fa; /* Heller Hintergrund */
  --lighter-bg: #f0fdfd; /* Noch hellerer Hintergrund */
  --text-color: #004d66; /* Standard-Textfarbe */
  --white-color: #ffffff; /* Weiß */
  --light-text-footer: #e0f7fa; /* Heller Text auf dunklem Grund */
  --success-color: #2e7d32; /* Erfolgsgrün */
  --error-color: #c62828; /* Fehlerrot */
  --validation-error-color: #d32f2f; /* Speziell für Feld-Validierung */
  --border-color: #b3e0e6; /* Randfarbe */
  --focus-ring-color: rgba(10, 147, 150, 0.5); /* Fokus-Ring Farbe */
  --shadow-light: rgba(0, 60, 80, 0.07); /* Leichter Schatten */
  --shadow-medium: rgba(0, 60, 80, 0.12); /* Mittlerer Schatten */
  --shadow-strong: rgba(0, 60, 80, 0.2); /* Stärkerer Schatten */
  --hero-overlay-color: rgba(0, 77, 102, 0.60); /* Overlay für #home */
  --about-overlay-color: rgba(0, 77, 102, 0.70); /* Overlay für #about */
  --section-bg-overlay: rgba(255, 255, 255, 0.94); /* Fast deckendes Weiß für Standardsektionen */
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
  font-size: 100%; /* 16px Standard */
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  /* Hintergrund: Fallback-Farbe, dann Gradient, dann Bild */
  background-color: var(--light-bg); /* Fallback */
  background-image:
    linear-gradient(rgba(224, 247, 250, 0.3), rgba(224, 247, 250, 0.3)),
    url('images/global-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* Fixiert (Desktop), wird in MQ überschrieben */
  background-repeat: no-repeat;
  color: var(--text-color);
  line-height: 1.7;
  font-size: 1rem; /* entspricht 16px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; /* Ermöglicht Footer am Ende, auch bei wenig Inhalt */
  flex-direction: column; /* Elemente untereinander */
  min-height: 100vh; /* Mindesthöhe des Viewports */
}

/* --- Accessibility & Basic Elements --- */
*:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}
a:focus, button:focus, input:focus, textarea:focus {
   outline: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}


/* --- Header Styling --- */
header {
  position: sticky; top: 0; z-index: 1000;
  background-color: rgba(0, 115, 153, 0.92);
  box-shadow: 0 1px 6px var(--shadow-medium);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 1.8rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
header.scrolled {
  background-color: var(--primary-color);
  box-shadow: 0 2px 8px var(--shadow-strong);
}
header h1 { color: var(--white-color); margin: 0; font-size: 1.7em; font-weight: 700; }
header h1 a { color: inherit; text-decoration: none; position: relative; padding-bottom: 6px; display: inline-block; }
header h1 a[aria-current="page"]::after,
.header-right nav ul li a[aria-current="page"]::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 75%; height: 2.5px;
  background-color: var(--white-color); transform: translateX(-50%); transition: width 0.3s ease;
}
header h1 a:hover::after, header h1 a:focus-visible::after,
.header-right nav ul li a:hover::after, .header-right nav ul li a:focus-visible::after {
   content: ''; position: absolute; bottom: 5px; left: 50%; width: 60%; height: 2px;
   background-color: var(--white-color); transform: translateX(-50%); transition: width 0.3s ease;
}
header h1 a:focus-visible::after { bottom: 0; height: 2.5px; }

/* Mobile Menu Button */
.menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10; }
.menu-toggle .bar { display: block; width: 100%; height: 3px; background-color: var(--white-color); border-radius: 2px; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform-origin: center; }
.menu-toggle.active .bar1 { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active .bar2 { opacity: 0; }
.menu-toggle.active .bar3 { transform: translateY(-8px) rotate(-45deg); }

/* Desktop Navigation */
.header-right nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.header-right nav ul li a { color: var(--white-color); text-decoration: none; font-weight: 500; padding: 10px 15px; display: block; border-radius: 6px; position: relative; overflow: hidden; transition: background-color 0.3s ease; }
.header-right nav ul li a:hover { background-color: rgba(255,255,255,0.1); }


/* --- Main Content & General Section Styling --- */
main {
  display: block;
  flex-grow: 1; /* Nimmt verfügbaren Platz ein, drückt Footer nach unten */
}
section {
  padding: 70px 25px;
  margin-left: auto;  /* Zentriert Sektion */
  margin-right: auto; /* Zentriert Sektion */
  margin-top: 50px;
  margin-bottom: 50px;
  width: 90%;
  max-width: 1200px;
  background-color: var(--section-bg-overlay);
  border-radius: 15px;
  box-shadow: 0 5px 20px var(--shadow-light);
  position: relative; /* Wichtig für ::before */
  overflow: hidden;
}
section:first-child { margin-top: 0; } /* Kein oberer Margin für die erste Sektion */
/* section:last-child { margin-bottom: 0; } /* Entfernt, da Footer eigenen Margin-Top hat */

section h2 { text-align: center; color: var(--secondary-color); margin-top: 0; margin-bottom: 40px; font-size: 2.2em; font-weight: 700; }
section h3 { /* Styling für alle H3 in Sektionen (z.B. Newsletter) */
  text-align: center; color: var(--secondary-color); margin-top: 0; margin-bottom: 15px; font-size: 1.8em; font-weight: 700;
}
section p { text-align: center; max-width: 800px; margin: 0 auto 25px auto; color: var(--text-color); }

/* --- Specific Section Styling: #home --- */
#home {
  background-image: url('images/bg.jpg'); background-size: cover; background-position: center center;
  background-attachment: fixed; color: var(--white-color); padding: 120px 25px; box-shadow: none;
  z-index: 1; background-color: transparent; border-radius: 0; width: 100%; max-width: none;
  margin-top: 0; margin-bottom: 50px; /* Standard Margin unten wieder hinzufügen */
}
#home::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--hero-overlay-color); z-index: -1; }
#home h2 { color: var(--white-color); font-size: 3em; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); margin-bottom: 25px; }
#home p { color: var(--white-color); font-size: 1.4em; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); max-width: 750px; margin-bottom: 0; }

/* --- Specific Section Styling: #about --- */
#about {
  background-image: url('images/we.jpg'); background-size: cover; background-position: center center;
  color: var(--white-color); padding: 90px 25px; box-shadow: none; z-index: 1; background-color: transparent;
}
#about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--about-overlay-color); z-index: -1; border-radius: inherit; }
#about h2 { color: var(--white-color); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
#about .about-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 35px; }
#about .about-person { flex: 1 1 360px; max-width: 460px; background-color: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 15px; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25); transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.6s ease, background-color 0.3s ease; opacity: 0; transform: translateY(35px); text-align: left; color: var(--white-color); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); will-change: transform, opacity; }
#about .about-person.visible { opacity: 1; transform: translateY(0); }
#about .about-person:hover { transform: translateY(-10px); background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
#about .about-person h3 { color: var(--white-color); text-shadow: inherit; margin-top: 0; margin-bottom: 20px; text-align: center; font-size: 1.4em; }
#about .about-person ul { list-style: none; padding-left: 0; margin: 0; }
#about .about-person ul li { color: var(--white-color); text-shadow: inherit; margin-bottom: 10px; padding-left: 2em; position: relative; font-size: 0.95em; }
#about .about-person ul li::before { content: "✨"; position: absolute; left: 0; top: 2px; color: var(--light-bg); font-size: 1.1em; text-shadow: none; }

/* --- Events Section Styling --- */
.event-boxes-container { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin: 40px 0; }
.event-box { flex: 1 1 310px; background-color: var(--lighter-bg); padding: 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07); border: 1px solid var(--border-color); transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; }
.event-box:hover { transform: translateY(-6px); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12); }
.event-box p { margin: 0; color: var(--text-color); text-align: left; line-height: 1.8; }
.event-location-container { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; margin: 50px 0; }
.next-event-details { flex: 1 1 420px; max-width: 520px; text-align: center; }
.next-event-date { text-align: center; font-size: 1.25em; font-weight: 500; color: var(--primary-color); background-color: rgba(224, 247, 250, 0.8); padding: 18px 25px; border-radius: 10px; margin: 0 auto 25px auto; border: 1px solid var(--border-color); display: inline-block; }
.next-event-date strong { font-weight: 700; color: var(--secondary-color); }
.event-duration-cost { font-size: 1em; line-height: 1.7; color: var(--secondary-color); margin: 0 auto; max-width: 380px; }
.map-container { flex: 1 1 420px; min-height: 320px; max-width: 580px; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px var(--shadow-medium); }
.map-container iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: none; }

/* --- Event Formular Styling --- */
.form-heading { /* Wird nur für Event-Form genutzt */
    text-align: center; margin-bottom: 20px; margin-top: 50px; color: var(--secondary-color); font-size: 1.6em;
}
#event-form { display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 30px auto 0 auto; padding: 35px; background-color: var(--lighter-bg); border-radius: 15px; box-shadow: 0 5px 15px var(--shadow-light); border: 1px solid var(--border-color); }

/* Allgemeine Form Group für beide Formulare */
.form-group { width: 100%; position: relative; }
#event-form label, #newsletter-form label:not(.sr-only) {
  display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.95em; color: var(--secondary-color);
}
#event-form input[type="text"],
#event-form input[type="email"],
#event-form textarea,
#newsletter-form input[type="email"],
#newsletter-form input[type="text"] { /* Gemeinsame Input-Styles inkl. neuem Name */
  width: 100%; padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1em; font-family: inherit; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#event-form input[type="text"]:focus,
#event-form input[type="email"]:focus,
#event-form textarea:focus,
#newsletter-form input[type="email"]:focus,
#newsletter-form input[type="text"]:focus {
  border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring-color); outline: none;
}

/* Invalid Styling für Formularfelder (via JS) */
#event-form input.invalid,
#event-form textarea.invalid,
#newsletter-form input.invalid {
  border-color: var(--validation-error-color); background-color: #fff8f8;
}
#event-form input.invalid:focus,
#event-form textarea.invalid:focus,
#newsletter-form input.invalid:focus {
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.3);
}

/* Fehlermeldungen unter den Feldern */
.validation-message { color: var(--validation-error-color); font-size: 0.85em; margin-top: 6px; min-height: 1.2em; display: block; text-align: left; } /* Links ausgerichtet */

/* Event Formular Button */
#event-form button { background-color: var(--primary-color); color: var(--white-color); font-weight: 700; font-size: 1.1em; padding: 14px 35px; border: none; border-radius: 50px; cursor: pointer; transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s; margin-top: 15px; align-self: center; will-change: transform; }
#event-form button:hover, #event-form button:focus-visible { background-color: var(--secondary-color); transform: scale(1.05); box-shadow: 0 5px 12px rgba(0, 95, 115, 0.35); }
#event-form button:disabled { background-color: #a0a0a0; cursor: not-allowed; transform: none; box-shadow: none; }

/* Allgemeine Formular Statusmeldung (nach Absenden) - Event */
#form-message { margin-top: 30px; text-align: center; font-size: 1.1em; font-weight: 500; min-height: 1.5em; padding: 15px; border-radius: 8px; opacity: 0; transition: opacity 0.5s ease; }
#form-message.visible { opacity: 1; }
#form-message.success { color: var(--success-color); background-color: #e8f5e9; border: 1px solid #c8e6c9; }
#form-message.error { color: var(--error-color); background-color: #ffebee; border: 1px solid #ffcdd2; }


/* --- Newsletter Section Styling --- */
#newsletter {
  background-color: var(--lighter-bg); /* Helleres BG */
  /* padding-top/bottom von 'section' geerbt */
  /* width, max-width, margin-left/right von 'section' geerbt */
  /* border-radius, box-shadow von 'section' geerbt */
  overflow: visible;
  position: relative;
}
#newsletter h3 { /* Verwendet globales section h3 */ }
#newsletter p { /* Verwendet globales section p */
    margin-bottom: 30px; font-size: 1.05em; max-width: 500px;
}

.newsletter-container { max-width: 700px; margin: 0 auto; text-align: center; } /* Breiter für zwei Felder nebeneinander */

#newsletter-form {
    display: flex;
    flex-wrap: wrap; /* Umbruch auf Mobile erlauben */
    gap: 15px;
    justify-content: center;
    align-items: flex-start; /* Felder oben ausrichten */
    max-width: 650px; /* Genug Platz für zwei Felder + Button */
    margin: 0 auto;
}

#newsletter-form .form-group {
    flex: 1 1 200px; /* Flexibel, Basisbreite für Felder */
    min-width: 180px; /* Mindestbreite */
    margin-bottom: 0;
}
/* Spezifisch für das E-Mail-Feld, um es etwas breiter zu machen */
#newsletter-form .form-group:has(#newsletter-email) {
    flex-basis: 240px;
}


#newsletter-form input[type="text"],
#newsletter-form input[type="email"] {
  padding: 14px 18px; /* Gleiches Padding wie Event-Form */
}

/* Newsletter Button */
#newsletter-form button {
    background-color: var(--accent-color); color: var(--white-color); font-weight: 700; font-size: 1.05em;
    padding: 14px 30px; border: none; border-radius: 8px; cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    white-space: nowrap;
    align-self: stretch; /* Dehnt Button auf gleiche Höhe wie Inputs */
    flex-shrink: 0; /* Verhindert Schrumpfen des Buttons */
}
#newsletter-form button:hover, #newsletter-form button:focus-visible { background-color: var(--secondary-color); transform: scale(1.03); box-shadow: 0 4px 10px rgba(0, 95, 115, 0.25); }
#newsletter-form button:disabled { background-color: #a0a0a0; cursor: not-allowed; transform: none; box-shadow: none; }

/* Statusmeldung für Newsletter */
#newsletter-message { margin-top: 25px; text-align: center; font-size: 1em; font-weight: 500; min-height: 1.5em; padding: 10px; border-radius: 6px; max-width: 500px; margin-left: auto; margin-right: auto; opacity: 0; transition: opacity 0.5s ease; }
#newsletter-message.visible { opacity: 1; }
#newsletter-message.success { color: var(--success-color); background-color: #e8f5e9; border: 1px solid #c8e6c9; }
#newsletter-message.error { color: var(--error-color); background-color: #ffebee; border: 1px solid #ffcdd2; }


/* --- Contact Section --- */
#contact p { font-size: 1.15em; line-height: 1.8; color: var(--text-color); }
#contact a { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: color 0.3s ease, text-decoration 0.3s ease; border-bottom: 1px solid transparent; }
#contact a:hover, #contact a:focus-visible { color: var(--secondary-color); border-bottom-color: var(--secondary-color); }

/* --- Footer Styling --- */
footer { text-align: center; padding: 30px 20px; background-color: var(--secondary-color); color: var(--light-text-footer); margin-top: 50px; font-size: 0.9em; }


/* --- Responsive Design --- */
@media (max-width: 992px) {
    section { padding: 60px 20px; }
    #home { padding: 100px 20px; } #home h2 { font-size: 2.5em; } #home p { font-size: 1.2em; }
    #about { padding: 70px 20px; }
    .event-location-container { gap: 30px; }
    .next-event-details, .map-container { flex-basis: 380px; }
    #newsletter { padding: 50px 20px; }
    #newsletter-form { max-width: 600px; } /* Etwas schmaler auf Tablets */
}

@media (max-width: 768px) {
  body, #home { background-attachment: scroll !important; }
  header { padding: 0.8rem 1rem; background-color: var(--primary-color); }
  .menu-toggle { display: flex; }
  .header-right nav ul { flex-direction: column; background-color: rgba(0, 95, 115, 0.98); position: absolute; top: 100%; left: 0; width: 100%; padding: 15px 0; box-shadow: 0 5px 10px var(--shadow-medium); visibility: hidden; opacity: 0; transform: translateY(-15px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; z-index: 999; }
  .header-right nav ul.show { visibility: visible; opacity: 1; transform: translateY(0); }
  .header-right nav ul li { width: 100%; text-align: center; }
  .header-right nav ul li a { padding: 14px 15px; border-radius: 0; width: 100%; display: block; }
  header h1 a::after, .header-right nav ul li a::after { display: none; }
  .header-right nav ul li a:hover, .header-right nav ul li a:focus-visible, .header-right nav ul li a[aria-current="page"] { background-color: var(--accent-color); color: var(--white-color); font-weight: 700; }
  section { padding: 50px 15px; margin: 30px auto; }
  section h2 { font-size: 1.9em; margin-bottom: 30px; }
  section h3 { font-size: 1.6em; } /* H3 auch anpassen */
  section p { font-size: 1em; }
  #home { padding: 70px 15px; margin-top: 0; margin-bottom: 30px; } #home h2 { font-size: 2.2em; } #home p { font-size: 1.15em; }
  #about { padding: 60px 15px; }
  #about .about-person { flex-basis: 100%; max-width: none; padding: 25px; }
  #about .about-person h3 { font-size: 1.3em; } #about .about-person ul li { font-size: 0.9em; }
  .event-boxes-container { gap: 20px; margin: 30px 0; } .event-box { flex-basis: 100%; padding: 25px; }
  .event-location-container { flex-direction: column; align-items: center; gap: 30px; margin: 40px 0; }
  .next-event-details { flex-basis: auto; width: 100%; max-width: 100%; order: 1; }
  .map-container { flex-basis: auto; width: 100%; max-width: 100%; min-height: 280px; order: 2; }
  .map-container iframe { min-height: 280px; }
  .next-event-date { font-size: 1.15em; padding: 15px 20px; } .event-duration-cost { font-size: 0.95em; }
  .form-heading { font-size: 1.5em; margin-top: 40px; }
  #event-form { padding: 25px 20px; gap: 18px; } #event-form label { font-size: 0.9em; }
  #event-form input, #event-form textarea { padding: 14px; }
  #event-form button { padding: 12px 30px; font-size: 1.05em; }
  #form-message { font-size: 1em; padding: 12px; }

  /* Newsletter Mobile */
  #newsletter { padding: 40px 15px; margin-top: 40px; margin-bottom: 40px;}
  #newsletter p { font-size: 1em; margin-bottom: 25px; }
  #newsletter-form { flex-direction: column; align-items: stretch; gap: 10px; max-width: 100%; } /* Untereinander */
  #newsletter-form .form-group { min-width: auto; flex-grow: 0; width: 100%; flex-basis: auto; }
  #newsletter-form button { width: 100%; }
  #newsletter-message { font-size: 0.95em; padding: 10px;}
}