/**
 * Hochzeits-Website Styles
 * Version: 1.0.0
 * Autoren: Fenja & Malte
   */

/* ================================
   1. Basis-Styles und CSS-Variablen
   ================================ */
/* Setzt grundlegende Stile für alle Elemente */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; /* Einheitliches Scroll-Verhalten */
  /* Bessere Performance für Animationen */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ========== CSS-Variablen & Basis-Konfiguration ========== */
:root {
  /* Farbschema 
   * Verwendet ein einheitliches Farbkonzept mit Pastelltönen
   * und harmonischen Abstufungen
   */
  --primary-color: #bfb3b3;    /* Hauptfarbe - Hell */
  --primary-color-light: #bfb3b3; /* Hellere Variante der Hauptfarbe */
  --primary-color-dark: #8C6B5C; /* Dunklere Variante der Hauptfarbe */
  
  --secondary-color: #2f4f4f;  /* Akzentfarbe - Dunkles Grün */
  --accent-color: #FFD700;     /* Highlight - Gold */
  
  /* Layout & Spacing 
   * Einheitliches Spacing-System für konsistente Abstände
   */
  --spacing-base: 20px;    /* Basis-Abstand */
  --spacing-small: 10px;   /* Kleiner Abstand */
  --spacing-large: 40px;   /* Großer Abstand */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  
  /* Typografie
   * Schriftgrößen-System für responsive Textanpassung
   */
  /* Schriftarten & Typografie */
  --font-family: 'Cormorant Garamond', serif;
  --font-size-extra-large: 4rem;     /* z. B. Namen */
  --font-size-large: 1.5rem;         /* z. B. Datum oder Location */
  --font-size-medium: 1.2rem;        /* z. B. Einladungstext */
  --font-size-base: 1rem;            /* Standard-Fließtext */
  --font-size-small: 0.9rem;         /* Zusatzinfos oder Adresse */

  /* Farben */
  --background-color: #FAFAFA;        /* Sehr heller Hintergrund */
  --text-color: #1E1E1E;              /* Elegantes Dunkelgrau/Schwarz für Haupttext */
  --text-color-light: #5A4C46;        /* Warmes Braun für Akzente */
  --overlay-color: rgba(0, 0, 0, 0.6);/* Halbtransparenter Overlay */
  
  /* Effekte */
  --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Für Karten, Modals etc. */
  --transition-duration: 0.3s;                /* Einheitliche Transition */

  /* Responsive Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;

  /* Link-Farben */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-dark);
  --link-visited-color: var(--primary-color-light);
  --link-active-color: var(--primary-color-dark);
  
  /* Link-Transition */
  --link-transition: all 0.3s ease-in-out;

  /* Border */
  --border-color: rgba(0, 0, 0, 0.1);
  --border-radius: 4px;

  /* Navigation */
  --z-header: 1000;
  --transition-base: 0.3s ease;
  --color-background: #fff;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
}

/* Allgemeine Stile für den Body */
body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--secondary-color);
  line-height: 1.8;
  font-size: var(--font-size-base);
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
  text-align: center; /* Zentriert den Text */
}

/* Überschriften */
h1, h2, h3 {
  font-family: var(--font-family);
  font-weight: 700; /* Fett für Überschriften */
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

/* Fließtext */
p,
.countdown-timer {
  font-family: var(--font-family);
  font-size: 1.2rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

/* ========== Link Styles ========== */
/* Basis Link-Styling für ALLE Links */
a, 
a[href^="tel:"],
a[href^="mailto:"],
.map-container a,
.accommodation-item a, 
.activity-item a,
.trauzeugen a,
section a {
    color: var(--link-color);
    text-decoration: none;
    transition: var(--link-transition);
    position: relative;
}

/* Einheitlicher Hover-Effekt */
a:hover,
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
.map-container a:hover,
.accommodation-item a:hover,
.activity-item a:hover,
.trauzeugen a:hover,
section a:hover {
    color: var(--link-hover-color);
}

/* Einheitlicher Unterstrich-Effekt */
a:not(.btn):before,
a[href^="tel:"]:before,
a[href^="mailto:"]:before,
.map-container a:before,
.accommodation-item a:before,
.activity-item a:before,
.trauzeugen a:before,
section a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* Hover-Effekt für Unterstrich */
a:not(.btn):hover:before,
a[href^="tel:"]:hover:before,
a[href^="mailto:"]:hover:before,
.map-container a:hover:before,
.accommodation-item a:hover:before,
.activity-item a:hover:before,
.trauzeugen a:hover:before,
section a:hover:before {
    transform: scaleX(1);
}

/* Besuchte Links */
a:visited,
a[href^="tel:"]:visited,
a[href^="mailto:"]:visited {
    color: var(--link-visited-color);
}

/* Aktive Links */
a:active,
a[href^="tel:"]:active,
a[href^="mailto:"]:active {
    color: var(--link-active-color);
    transform: scale(0.98);
}

/* Footer Links speziell */
footer a {
    color: var(--secondary-color);
    font-weight: 500;
}

footer a:hover {
    color: var(--primary-color);
}

/* Einheitliche Button-Styles mit höherer Spezifität */
.btn.custom-btn,
button.custom-btn {
  background-color: var(--primary-color) !important;
  color: var(--text-color-light) !important;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn.custom-btn:hover,
button.custom-btn:hover {
  background-color: var(--primary-color-dark) !important;
  transform: translateY(-2px);
  color: var(--text-color-light) !important;
}

/* Mobile Optimierungen */
@media (max-width: 768px) {
    a, 
    a[href^="tel:"],
    a[href^="mailto:"] {
        padding: 0.3rem 0; /* Größere Touch-Fläche */
    }

    /* Vereinfachter Hover-Effekt auf Mobile */
    a:hover::after {
        transform: none;
    }
}

/* ========== Header ========== */
/* Versteckt den Header initial */
.hidden-header {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Sichtbarer Zustand des Headers */
.hidden-header.visible {
  display: flex; /* Sicherstellen, dass Flexbox aktiv bleibt */
  opacity: 1; /* Sichtbar */
  transition: none; /* Deaktiviere Animationen */
}

/* Header und Slideshow Styles */
header {
  position: relative;
  width: 100%;
  height: 100vh; /* Volle Viewport-Höhe */
  min-height: -webkit-fill-available; /* Für iOS Safari */
  overflow: hidden;
}

/* Verbesserte Browser-Unterstützung für Slideshow */
.slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background-color);
  /* Verbesserte Performance */
  will-change: contents;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Firefox-spezifische Optimierungen */
  scrollbar-width: none;
  -moz-transform: translate3d(0, 0, 0);
  /* IE/Edge Optimierungen */
  -ms-transform: translate3d(0, 0, 0);
  /* Opera Optimierungen */
  -o-transform: translate3d(0, 0, 0);
}

.slideshow img,
.slideshow video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    object-position: center;
    /* Optimierte Transitions */
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 1.5s, 20s;
    transform: scale(1.0);
    /* Performance Optimierungen */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity, transform;
  /* Verbesserte Bildqualität für verschiedene Browser */
  image-rendering: -webkit-optimize-contrast;  /* Chrome, Safari */
  image-rendering: crisp-edges;                /* Firefox */
  image-rendering: pixelated;                  /* Edge Fallback */
}

.slideshow img.active,
.slideshow video.active {
    opacity: 1;
    z-index: 1;
    transform: scale(1.1);
}

/* iOS Safari Fixes */
@supports (-webkit-touch-callout: none) {
  .header {
    /* Fix für iOS 100vh Bug */
    height: -webkit-fill-available;
  }
  
  .slideshow img,
  .slideshow video {
    /* Verhindert iOS Safari Overflow-Probleme */
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    /* Deaktiviere Hardware-Acceleration bei Performance-Problemen */
    transform: translate3d(0, 0, 0);
  }
}

/* Reduzierte Animationen für mobile Geräte */
@media (max-width: 768px) {
    .slideshow img,
    .slideshow video {
        transition: opacity 1s ease-out;
        transform: none;
    }
    
    .slideshow img.active,
    .slideshow video.active {
        transform: none;
    }
}

/* Optimierungen für ältere Browser */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .slideshow img,
    .slideshow video {
        transition: opacity 1.5s ease-out;
        transform: none !important;
    }
}

/* Safari-spezifische Optimierungen */
@supports (-webkit-overflow-scrolling: touch) {
  .slideshow img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Verbesserte Performance für High-DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slideshow img {
    transform-style: preserve-3d;
  }
}

/* Spezielle Behandlung für Hochkantbilder */
.slideshow img[data-orientation="portrait"] {
  object-position: center 20%; /* Zeigt die oberen 30% des Bildes */
}

/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  .slideshow img[data-orientation="portrait"] {
    object-position: center 25%; /* Noch etwas höher auf mobilen Geräten */
  }
}

@media screen and (orientation: portrait) {
  .slideshow img {
    object-position: center center;
  }
}

/* Optimierung für verschiedene Bildschirmgrößen */
@media screen and (min-width: 1200px) {
  .slideshow img {
    object-fit: cover;
  }
}

@media screen and (max-width: 480px) {
  .slideshow img {
    object-position: center center;
  }
}

/* Farbiges Overlay */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: 0.3; /* Transparenz anpassen */
  z-index: 2;
}

/* Header-Box über dem Overlay */
header .header-box {
  position: absolute; /* Absolute statt relative */
  z-index: 3;
  bottom: 15%; /* Abstand vom unteren Rand */
  left: 50%;
  transform: translateX(-50%); /* Nur horizontal zentrieren */
  text-align: center;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.45);
  color: var(--primary-color);
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  width: 45%; /* Automatische Breite basierend auf Inhalt */
  max-width: 90%; /* Verhindert zu breite Box auf schmalen Bildschirmen */
    /* backdrop-filter entfernen, falls gesetzt */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

header .header-box h1,
header .header-box p,
header .header-box .countdown,
header .header-box .countdown span,
header .header-box .countdown small,
header .header-box .countdown-timer {
  color: var(--primary-color);
  font-size: 1.3rem;
  font-family: var(--font-family);
  margin: 0;
}

header .header-box h1 {
  font-size: 3.5rem; /* Vorher 3rem */
  margin-bottom: 8px;
}

header .header-box h2 {
  font-size: 2rem; /* Vorher 3rem */
  margin-bottom: 8px;
  margin-top: 8px;
}

header .header-box p {
  font-size: 1.3rem; /* Vorher 1.5rem */
  margin-bottom: 8px;
}

header .header-box .countdown{
  margin-top: 8px; /* Abstand zum Text */
  font-size: 2rem; /* Vorher 1.2rem */
  display: flex;
  justify-content: center;
  gap: 10px; /* Abstand zwischen den Zeitblöcken */
}

/* Entferne alte Countdown-Stile */
header .countdown {
  display: none; /* Verstecke die alte separate Box */
}

header .header-box i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}

/* Abstand zwischen Header und erster Section */
header + section {
  margin-top: var(--spacing-large); /* Gleicher Abstand wie zwischen Sections */
  padding-top: var(--spacing-base);
  position: relative;
}

/* Mobile Viewport Anpassungen */
@media screen and (max-width: 768px) {
  header {
    height: 100vh;
    /* Unterstützung für mobile Browser */
    height: calc(var(--vh, 1vh) * 100);
  }

  header .header-box {
    bottom: 10%; /* Konstanter Abstand auch auf mobilen Geräten */
    width: 75%; /* Breite auf mobilen Geräten */
    padding: 15px 20px; /* Etwas weniger Padding auf mobilen Geräten */
  }

  .slideshow img {
    object-position: center 20%; /* Noch weiter oben auf mobilen Geräten */
  }
}

/* Responsive Anpassungen für Header-Box */
@media (max-width: 480px) {
  header .header-box {
    width: 95%;
    max-width: 98%;
    padding: 10px 5px;
    font-size: 1rem;
  }
  header .header-box h1 {
    font-size: 2rem;
  }
  header .header-box h2 {
    font-size: 1.2rem;
  }
  header .header-box p {
    font-size: 1rem;
  }
  header .header-box .countdown {
    font-size: 1.1rem;
    flex-direction: column;
    gap: 4px;
  }
}

/* Verbesserte Touch-Flächen für Buttons und Links */
@media (max-width: 768px) {
  .custom-btn,
  .btn.custom-btn,
  button.custom-btn {
    min-height: 48px;
    min-width: 48px;
    font-size: 1.1rem;
    padding: 12px 18px;
  }
  a, 
  a[href^="tel:"],
  a[href^="mailto:"] {
    min-height: 44px;
    display: inline-block;
    padding: 0.5rem 0;
  }
}

/* ================================
   2. Layout & Komponenten
   ================================ */
/* ========== Abschnitte ========== */
/* Allgemeine Stile für Abschnitte */
section {
  padding: var(--spacing-large) 5%; /* Einheitliches Padding */
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  background-color: transparent;
  border: none;
  box-shadow: none;
  animation: fadeIn 0.8s ease-in-out;
}

/* Einheitlicher Abstand für das Rückmeldeformular */
#rsvp-form {
  padding: 0 5%; /* Gleicher Abstand wie bei den Sections */
  max-width: 1000px;
  margin: 0 auto;
}

/* Trennlinie zwischen Abschnitten */
.section-divider {
  width: calc(100% - 40px);
  max-width: 80%;
  margin: 0 auto; /* Entferne vertikalen Abstand */
  border: none;
  border-top: 2px solid var(--primary-color);
}

/* Reduziere den Abstand zwischen <hr> und der nächsten Section */
.section-divider + section {
  margin-top: 0; /* Kein zusätzlicher Abstand */
}

/* Überschriften in Abschnitten */
h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 20px; /* Abstand unter der Überschrift */
}

/* Fließtext in Abschnitten */
section p {
  font-size: 1.2rem; /* Angenehme Schriftgröße */
  line-height: 1.8; /* Angenehmer Zeilenabstand */
  color: var(--secondary-color);
  margin-bottom: 20px; /* Abstand unter dem Text */
}

/* Wedding-ABC */
.wedding-abc {
  display: flex;
  flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */
  gap: 20px; /* Abstand zwischen den Spalten */
  justify-content: center; /* Zentriert die Inhalte */
  max-width: 1000px; /* Maximale Breite für das Wedding-ABC */
  margin: 0 auto; /* Zentriert das gesamte Element */
  text-align: left; /* Text bleibt linksbündig */
  padding: 0 5%; /* Abstand zu den Bildschirmrändern auf 5% gesetzt */
}

.wedding-abc .column {
  flex: 1;
  min-width: 300px; /* Mindestbreite für Spalten */
  max-width: 90%; /* Spaltenbreite angepasst, um das Padding zu berücksichtigen */
  margin: 0 auto; /* Zentriert die Spalten */
}

.wedding-abc .column div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: var(--secondary-color);
}

.wedding-abc .column div i {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-right: 10px;
}

@media (max-width: 768px) {
  .wedding-abc {
    flex-direction: column; /* Spalten untereinander anordnen */
    align-items: center; /* Zentriert die Spalten */
    gap: 20px; /* Abstand zwischen den Spalten */
  }

  .wedding-abc .column {
    min-width: 100%; /* Volle Breite für Spalten */
    text-align: center; /* Zentriert die Spalten */
    margin-bottom: 0; /* Kein zusätzlicher Abstand zwischen den Spalten */
  }

  .wedding-abc .column div {
    display: flex;
    justify-content: flex-start; /* Icons und Text linksbündig */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Volle Breite für das div */
    max-width: 600px; /* Optionale maximale Breite */
    margin: 0 auto; /* Zentriert das div */
  }

  header + section {
    margin-top: 0 !important; /* Entfernt den Abstand vollständig */
    padding-top: 0 !important; /* Entfernt zusätzliches Padding */
  }
}

/* FAQ */
section div h3 {
  font-size: 1.5rem; /* Einheitliche Schriftgröße */
  color: var(--secondary-color);
  margin-bottom: 10px;
}

section div p {
  font-size: 1.2rem;
  color: var(--secondary-color);
  margin-bottom: 15px;
}

/* FAQ Accordion Styles */
.accordion-button {
  background-color: transparent;
  color: var(--secondary-color);
  font-family: var(--font-family);
  font-size: 1.2rem;
  padding: 1rem;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--primary-color);
}

.accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(130, 158, 137, 0.25);
}

.accordion-body {
  background-color: transparent;
  padding: 1rem;
  color: var(--secondary-color);
  font-size: 1.1rem;
}

.accordion-item {
  border: 1px solid rgba(130, 158, 137, 0.2);
  background-color: transparent;
  margin-bottom: 0.5rem;
}

/* Trauzeugen */
.trauzeugen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Zentriert die Trauzeugen */
  gap: 20px;
  margin-top: 20px;
  width: 100%; /* Stellt sicher, dass die Trauzeugen den gesamten Bereich einnehmen */
}

.trauzeuge {
  text-align: center;
  max-width: 300px; /* Maximale Breite für jeden Trauzeugen */
  flex: 1 1 calc(50% - 20px); /* Zwei Spalten auf mittleren Bildschirmen */
  margin: 10px; /* Abstand zwischen den Trauzeugen */
}

.trauzeuge-bild {
  width: 150px; /* Einheitliche Breite */
  height: 150px; /* Einheitliche Höhe */
  object-fit: cover; /* Zuschneiden des Bildes */
  border-radius: 50%; /* Runde Bilder */
  aspect-ratio: 1 / 1; /* Stellt sicher, dass das Bild immer quadratisch ist */
  overflow: hidden; /* Verhindert, dass Inhalte außerhalb des Kreises sichtbar sind */
  margin-bottom: 25px; /* Fügt einen Abstand von 10px hinzu */
}

@media (min-width: 1024px) {
  .trauzeugen {
    justify-content: space-around; /* Gleichmäßige Verteilung bei breiten Bildschirmen */
  }
}

@media (max-width: 768px) {
  .trauzeuge {
    flex: 1 1 100%; /* Eine Spalte auf kleineren Bildschirmen */
  }

  .trauzeuge-bild {
    width: 120px; /* Kleinere Bilder auf kleinen Bildschirmen */
    height: 120px;
  }
}

/* Freizeitaktivitäten und Unterkünfte */
.activity-item,
.accommodation-item,
.map-container {
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding: 1.5rem;
}

/* Gemeinsamer Hover-Effekt */
.activity-item:hover,
.accommodation-item:hover,
.map-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Aktivitätskachel mit Bild */
.activity-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.activity-item h3 {
  margin: 1rem 0;
  color: var(--primary-color);
}

.activity-item p {
  margin-bottom: 1rem;
  flex-grow: 1;
}

/* Container für Kacheln */
.accommodations {
  display: flex;
  flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */
  gap: 20px; /* Abstand zwischen den Kacheln */
  justify-content: center; /* Zentriert die Kacheln */
}

.activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
  .accommodation-item {
    flex: 1 1 calc(50% - 20px); /* Zwei Spalten auf kleineren Bildschirmen */
    max-width: calc(50% - 20px);
  }

  .activity-image {
    width: 120px;
    height: 120px;
  }

  .activities {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .accommodation-item {
    flex: 1 1 100%; /* Eine Spalte auf sehr schmalen Bildschirmen */
    max-width: 100%;
  }
}

/* ================================
   3. Header & Navigation
   ================================ */
/* ========== Header ========== */
/* Versteckt den Header initial */
.hidden-header {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Sichtbarer Zustand des Headers */
.hidden-header.visible {
  display: flex; /* Sicherstellen, dass Flexbox aktiv bleibt */
  opacity: 1; /* Sichtbar */
  transition: none; /* Deaktiviere Animationen */
}

/* Header und Slideshow Styles */
header {
  position: relative;
  width: 100%;
  height: 100vh; /* Volle Viewport-Höhe */
  min-height: -webkit-fill-available; /* Für iOS Safari */
  overflow: hidden;
}

/* Verbesserte Browser-Unterstützung für Slideshow */
.slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background-color);
  /* Verbesserte Performance */
  will-change: contents;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Firefox-spezifische Optimierungen */
  scrollbar-width: none;
  -moz-transform: translate3d(0, 0, 0);
  /* IE/Edge Optimierungen */
  -ms-transform: translate3d(0, 0, 0);
  /* Opera Optimierungen */
  -o-transform: translate3d(0, 0, 0);
}

.slideshow img,
.slideshow video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    object-position: center;
    /* Optimierte Transitions */
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 1.5s, 20s;
    transform: scale(1.0);
    /* Performance Optimierungen */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity, transform;
  /* Verbesserte Bildqualität für verschiedene Browser */
  image-rendering: -webkit-optimize-contrast;  /* Chrome, Safari */
  image-rendering: crisp-edges;                /* Firefox */
  image-rendering: pixelated;                  /* Edge Fallback */
}

.slideshow img.active,
.slideshow video.active {
    opacity: 1;
    z-index: 1;
    transform: scale(1.1);
}

/* iOS Safari Fixes */
@supports (-webkit-touch-callout: none) {
  .header {
    /* Fix für iOS 100vh Bug */
    height: -webkit-fill-available;
  }
  
  .slideshow img,
  .slideshow video {
    /* Verhindert iOS Safari Overflow-Probleme */
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    /* Deaktiviere Hardware-Acceleration bei Performance-Problemen */
    transform: translate3d(0, 0, 0);
  }
}

/* Reduzierte Animationen für mobile Geräte */
@media (max-width: 768px) {
    .slideshow img,
    .slideshow video {
        transition: opacity 1s ease-out;
        transform: none;
    }
    
    .slideshow img.active,
    .slideshow video.active {
        transform: none;
    }
}

/* Optimierungen für ältere Browser */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .slideshow img,
    .slideshow video {
        transition: opacity 1.5s ease-out;
        transform: none !important;
    }
}

/* Safari-spezifische Optimierungen */
@supports (-webkit-overflow-scrolling: touch) {
  .slideshow img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Verbesserte Performance für High-DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slideshow img {
    transform-style: preserve-3d;
  }
}

/* Spezielle Behandlung für Hochkantbilder */
.slideshow img[data-orientation="portrait"] {
  object-position: center 20%; /* Zeigt die oberen 30% des Bildes */
}

/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  .slideshow img[data-orientation="portrait"] {
    object-position: center 25%; /* Noch etwas höher auf mobilen Geräten */
  }
}

@media screen and (orientation: portrait) {
  .slideshow img {
    object-position: center center;
  }
}

/* Optimierung für verschiedene Bildschirmgrößen */
@media screen and (min-width: 1200px) {
  .slideshow img {
    object-fit: cover;
  }
}

@media screen and (max-width: 480px) {
  .slideshow img {
    object-position: center center;
  }
}

/* Farbiges Overlay */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: 0.3; /* Transparenz anpassen */
  z-index: 2;
}

/* Header-Box über dem Overlay */
header .header-box {
  position: absolute; /* Absolute statt relative */
  z-index: 3;
  bottom: 10%; /* Abstand vom unteren Rand */
  left: 50%;
  transform: translateX(-50%); /* Nur horizontal zentrieren */
  text-align: center;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.4); /* vorher 0.4, jetzt transparenter */
  color: var(--primary-color);
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  width: 50%; /* Automatische Breite basierend auf Inhalt */
  max-width: 90%; /* Verhindert zu breite Box auf schmalen Bildschirmen */
    /* backdrop-filter entfernen, falls gesetzt */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

header .header-box h1,
header .header-box p,
header .header-box .countdown,
header .header-box .countdown span,
header .header-box .countdown small,
header .header-box .countdown-timer {
  color: var(--primary-color);
  font-size: 1.3rem;
  font-family: var(--font-family);
  margin: 0;
}

header .header-box h1 {
  font-size: 3.5rem; /* Vorher 3rem */
  margin-bottom: 8px;
}

header .header-box h2 {
  font-size: 2rem; /* Vorher 3rem */
  margin-bottom: 8px;
  margin-top: 8px;
}

header .header-box p {
  font-size: 1.3rem; /* Vorher 1.5rem */
  margin-bottom: 8px;
}

header .header-box .countdown{
  margin-top: 8px; /* Abstand zum Text */
  font-size: 2rem; /* Vorher 1.2rem */
  display: flex;
  justify-content: center;
  gap: 10px; /* Abstand zwischen den Zeitblöcken */
}

/* Entferne alte Countdown-Stile */
header .countdown {
  display: none; /* Verstecke die alte separate Box */
}

header .header-box i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}

/* Abstand zwischen Header und erster Section */
header + section {
  margin-top: var(--spacing-large); /* Gleicher Abstand wie zwischen Sections */
  padding-top: var(--spacing-base);
  position: relative;
}

/* Mobile Viewport Anpassungen */
@media screen and (max-width: 768px) {
  header {
    height: 100vh;
    /* Unterstützung für mobile Browser */
    height: calc(var(--vh, 1vh) * 100);
  }

  header .header-box {
    bottom: 10%; /* Konstanter Abstand auch auf mobilen Geräten */
    width: 75%; /* Breite auf mobilen Geräten */
    padding: 15px 20px; /* Etwas weniger Padding auf mobilen Geräten */
  }

  .slideshow img {
    object-position: center 20%; /* Noch weiter oben auf mobilen Geräten */
  }
}

/* Responsive Anpassungen für Header-Box */
@media (max-width: 480px) {
  header .header-box {
    width: 95%;
    max-width: 98%;
    padding: 10px 5px;
    font-size: 1rem;
  }
  header .header-box h1 {
    font-size: 2rem;
  }
  header .header-box h2 {
    font-size: 1.2rem;
  }
  header .header-box p {
    font-size: 1rem;
  }
  header .header-box .countdown {
    font-size: 1.1rem;
    flex-direction: column;
    gap: 4px;
  }
}

/* Verbesserte Touch-Flächen für Buttons und Links */
@media (max-width: 768px) {
  .custom-btn,
  .btn.custom-btn,
  button.custom-btn {
    min-height: 48px;
    min-width: 48px;
    font-size: 1.1rem;
    padding: 12px 18px;
  }
  a, 
  a[href^="tel:"],
  a[href^="mailto:"] {
    min-height: 44px;
    display: inline-block;
    padding: 0.5rem 0;
  }
}

/* ================================
   4. Sektionen & Content
   ================================ */
/* ========== Abschnitte ========== */
/* Allgemeine Stile für Abschnitte */
section {
  padding: var(--spacing-large) 5%; /* Einheitliches Padding */
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  background-color: transparent;
  border: none;
  box-shadow: none;
  animation: fadeIn 0.8s ease-in-out;
}

/* Einheitlicher Abstand für das Rückmeldeformular */
#rsvp-form {
  padding: 0 5%; /* Gleicher Abstand wie bei den Sections */
  max-width: 1000px;
  margin: 0 auto;
}

/* Trennlinie zwischen Abschnitten */
.section-divider {
  width: calc(100% - 40px);
  max-width: 80%;
  margin: 0 auto; /* Entferne vertikalen Abstand */
  border: none;
  border-top: 2px solid var(--primary-color);
}

/* Reduziere den Abstand zwischen <hr> und der nächsten Section */
.section-divider + section {
  margin-top: 0; /* Kein zusätzlicher Abstand */
}

/* Überschriften in Abschnitten */
h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 20px; /* Abstand unter der Überschrift */
}

/* Fließtext in Abschnitten */
section p {
  font-size: 1.2rem; /* Angenehme Schriftgröße */
  line-height: 1.8; /* Angenehmer Zeilenabstand */
  color: var(--secondary-color);
  margin-bottom: 20px; /* Abstand unter dem Text */
}

/* Wedding-ABC */
.wedding-abc {
  display: flex;
  flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */
  gap: 20px; /* Abstand zwischen den Spalten */
  justify-content: center; /* Zentriert die Inhalte */
  max-width: 1000px; /* Maximale Breite für das Wedding-ABC */
  margin: 0 auto; /* Zentriert das gesamte Element */
  text-align: left; /* Text bleibt linksbündig */
  padding: 0 5%; /* Abstand zu den Bildschirmrändern auf 5% gesetzt */
}

.wedding-abc .column {
  flex: 1;
  min-width: 300px; /* Mindestbreite für Spalten */
  max-width: 90%; /* Spaltenbreite angepasst, um das Padding zu berücksichtigen */
  margin: 0 auto; /* Zentriert die Spalten */
}

.wedding-abc .column div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: var(--secondary-color);
}

.wedding-abc .column div i {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-right: 10px;
}

@media (max-width: 768px) {
  .wedding-abc {
    flex-direction: column; /* Spalten untereinander anordnen */
    align-items: center; /* Zentriert die Spalten */
    gap: 20px; /* Abstand zwischen den Spalten */
  }

  .wedding-abc .column {
    min-width: 100%; /* Volle Breite für Spalten */
    text-align: center; /* Zentriert die Spalten */
    margin-bottom: 0; /* Kein zusätzlicher Abstand zwischen den Spalten */
  }

  .wedding-abc .column div {
    display: flex;
    justify-content: flex-start; /* Icons und Text linksbündig */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Volle Breite für das div */
    max-width: 600px; /* Optionale maximale Breite */
    margin: 0 auto; /* Zentriert das div */
  }

  header + section {
    margin-top: 0 !important; /* Entfernt den Abstand vollständig */
    padding-top: 0 !important; /* Entfernt zusätzliches Padding */
  }
}

/* FAQ */
section div h3 {
  font-size: 1.5rem; /* Einheitliche Schriftgröße */
  color: var(--secondary-color);
  margin-bottom: 10px;
}

section div p {
  font-size: 1.2rem;
  color: var(--secondary-color);
  margin-bottom: 15px;
}

/* FAQ Accordion Styles */
.accordion-button {
  background-color: transparent;
  color: var(--secondary-color);
  font-family: var(--font-family);
  font-size: 1.2rem;
  padding: 1rem;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--primary-color);
}

.accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(130, 158, 137, 0.25);
}

.accordion-body {
  background-color: transparent;
  padding: 1rem;
  color: var(--secondary-color);
  font-size: 1.1rem;
}

.accordion-item {
  border: 1px solid rgba(130, 158, 137, 0.2);
  background-color: transparent;
  margin-bottom: 0.5rem;
}

/* Trauzeugen */
.trauzeugen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Zentriert die Trauzeugen */
  gap: 20px;
  margin-top: 20px;
  width: 100%; /* Stellt sicher, dass die Trauzeugen den gesamten Bereich einnehmen */
}

.trauzeuge {
  text-align: center;
  max-width: 300px; /* Maximale Breite für jeden Trauzeugen */
  flex: 1 1 calc(50% - 20px); /* Zwei Spalten auf mittleren Bildschirmen */
  margin: 10px; /* Abstand zwischen den Trauzeugen */
}

.trauzeuge-bild {
  width: 150px; /* Einheitliche Breite */
  height: 150px; /* Einheitliche Höhe */
  object-fit: cover; /* Zuschneiden des Bildes */
  border-radius: 50%; /* Runde Bilder */
  aspect-ratio: 1 / 1; /* Stellt sicher, dass das Bild immer quadratisch ist */
  overflow: hidden; /* Verhindert, dass Inhalte außerhalb des Kreises sichtbar sind */
  margin-bottom: 25px; /* Fügt einen Abstand von 10px hinzu */
}

@media (min-width: 1024px) {
  .trauzeugen {
    justify-content: space-around; /* Gleichmäßige Verteilung bei breiten Bildschirmen */
  }
}

@media (max-width: 768px) {
  .trauzeuge {
    flex: 1 1 100%; /* Eine Spalte auf kleineren Bildschirmen */
  }

  .trauzeuge-bild {
    width: 120px; /* Kleinere Bilder auf kleinen Bildschirmen */
    height: 120px;
  }
}

/* Freizeitaktivitäten und Unterkünfte */
.activity-item,
.accommodation-item,
.map-container {
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding: 1.5rem;
}

/* Gemeinsamer Hover-Effekt */
.activity-item:hover,
.accommodation-item:hover,
.map-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Aktivitätskachel mit Bild */
.activity-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.activity-item h3 {
  margin: 1rem 0;
  color: var(--primary-color);
}

.activity-item p {
  margin-bottom: 1rem;
  flex-grow: 1;
}

/* Container für Kacheln */
.accommodations {
  display: flex;
  flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */
  gap: 20px; /* Abstand zwischen den Kacheln */
  justify-content: center; /* Zentriert die Kacheln */
}

.activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
  .accommodation-item {
    flex: 1 1 calc(50% - 20px); /* Zwei Spalten auf kleineren Bildschirmen */
    max-width: calc(50% - 20px);
  }

  .activity-image {
    width: 120px;
    height: 120px;
  }

  .activities {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .accommodation-item {
    flex: 1 1 100%; /* Eine Spalte auf sehr schmalen Bildschirmen */
    max-width: 100%;
  }
}

/* ================================
   5. Responsive Design
   ================================ */
/* Mobile Optimierungen */
@media (max-width: 768px) {
    a, 
    a[href^="tel:"],
    a[href^="mailto:"] {
        padding: 0.3rem 0; /* Größere Touch-Fläche */
    }

    /* Vereinfachter Hover-Effekt auf Mobile */
    a:hover::after {
        transform: none;
    }
}

/* Reduzierte Animationen für mobile Geräte */
@media (max-width: 768px) {
    .slideshow img,
    .slideshow video {
        transition: opacity 1s ease-out;
        transform: none;
    }
    
    .slideshow img.active,
    .slideshow video.active {
        transform: none;
    }
}

/* Optimierungen für ältere Browser */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .slideshow img,
    .slideshow video {
        transition: opacity 1.5s ease-out;
        transform: none !important;
    }
}

/* Safari-spezifische Optimierungen */
@supports (-webkit-overflow-scrolling: touch) {
  .slideshow img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Verbesserte Performance für High-DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slideshow img {
    transform-style: preserve-3d;
  }
}

/* Spezielle Behandlung für Hochkantbilder */
.slideshow img[data-orientation="portrait"] {
  object-position: center 20%; /* Zeigt die oberen 30% des Bildes */
}

/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  .slideshow img[data-orientation="portrait"] {
    object-position: center 25%; /* Noch etwas höher auf mobilen Geräten */
  }
}

@media screen and (orientation: portrait) {
  .slideshow img {
    object-position: center center;
  }
}

/* Optimierung für verschiedene Bildschirmgrößen */
@media screen and (min-width: 1200px) {
  .slideshow img {
    object-fit: cover;
  }
}

@media screen and (max-width: 480px) {
  .slideshow img {
    object-position: center center;
  }
}

/* ================================
   6. Utilities & Helpers
   ================================ */
/* Einheitliche Button-Styles mit höherer Spezifität */
.btn.custom-btn,
button.custom-btn {
  background-color: var(--primary-color) !important;
  color: var(--text-color-light) !important;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn.custom-btn:hover,
button.custom-btn:hover {
  background-color: var(--primary-color-dark) !important;
  transform: translateY(-2px);
  color: white !important;
}

/* Einheitliche Form-Styles */
form.row {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-family);
  color: var(--secondary-color);
}

.form-label {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--secondary-color);
  font-size: var(--font-size-medium);
}

.form-control {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--secondary-color);
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  background-color: var(--background-color);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(191, 179, 179, 0.25);
  color: var(--secondary-color);
}

.form-control::placeholder {
  color: var(--secondary-color);
  opacity: 0.6;
}

.invalid-feedback {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  color: #dc3545;
}

/* ========== Carousel ========== */
/* Carousel-Container */
.carousel {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
}

/* Bilder im Carousel */
.carousel img {
  height: 150px;
  border-radius: 10px;
  scroll-snap-align: start;
}

/* ========== Timeline ========== */
/* Timeline-Container */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Abstand zwischen den Timeline-Elementen */
  align-items: center; /* Zentriert die Timeline-Elemente */
  text-align: center; /* Zentriert den Text */
  position: relative;
}

/* Einzelne Timeline-Elemente */
.timeline-item {
  display: flex; /* Flexbox für Icon und Text */
  align-items: center; /* Vertikale Zentrierung */
  gap: 15px; /* Einheitlicher Abstand zwischen Icon und Text */
  text-align: center; /* Zentriert den Text */
  flex-direction: column; /* Ändert die Anordnung auf vertikal */
}

.timeline-item h3 {
  font-size: 1.5rem; /* Größere Schriftgröße für die Uhrzeit */
  margin-bottom: 5px; /* Abstand unter der Uhrzeit */
}

.timeline-item p {
  font-size: 1.2rem; /* Einheitliche Schriftgröße */
  margin: 0; /* Kein zusätzlicher Abstand */
}

/* Timeline-Icons */
.timeline-item i {
  font-size: 3rem; /* Größere Icon-Größe */
  color: var(--primary-color);
  flex-shrink: 0; /* Verhindert, dass Icons schrumpfen */
  margin-bottom: 10px; /* Abstand zwischen Icon und Text */
}

/* Timeline-Connector */
.timeline-connector {
  width: 2px;
  height: 20px; /* Kürzerer Strich */
  margin: 0 auto;
  background-color: var(--primary-color); /* Gleiche Farbe wie die Icons */
}

/* ========== Map-Container ========== */
/* Anpassung für die Map-Container */
.map-container {
  width: 100%; /* Füllt die gesamte Breite des Bildschirms */
  max-width: 1000px; /* Maximale Breite */
  margin: 0 auto; /* Zentriert die Kachel */
  text-align: center;
  background-color: var(--background-color);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map-container:hover {
  transform: scale(1.01); /* Leichter Zoom-Effekt */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten beim Hover */
}

.map-container iframe {
  width: 100%;
  height: 400px;
  border: none; /* Kein Rahmen */
  border-radius: 8px; /* Abgerundete Ecken */
}

/* ========== Footer ========== */
/* Footer-Stile */
footer {
  background: transparent; /* Kein Hintergrund */
  color: var(--secondary-color);
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
}

/* Links im Footer */
footer a {
  color: var(--primary-color);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Footer-Copyright */
footer .copyright {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--secondary-color);
}

footer .copyright i {
  color: var(--primary-color); /* Icon in der Primärfarbe */
  margin: 0 5px;
}

.footer-links {
  text-align: center;
  margin-bottom: 1rem;
}

.footer-link {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #333;
}

.footer-separator {
  margin: 0 1rem;
  color: #666;
}

.copyright {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

/* ========== Navigation ========== */
.site-nav {
    position: fixed;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

.nav-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--secondary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-back:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.nav-back i {
    transition: transform 0.3s ease;
}

.nav-back:hover i {
    transform: translateX(-4px);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .site-nav {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
    }
    
    .nav-back {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}

/* Navigation Header */
.site-header {
    background: var(--color-background);
    box-shadow: var(--shadow-sm);
    position: relative; /* Geändert von sticky zu relative */
    z-index: 100;
    padding: 1rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.site-header .navbar-brand {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    text-decoration: none; /* Hinzugefügt */
}

.site-header .navbar-brand:hover {
    color: var(--primary-color-dark);
    transform: translateX(-5px);
    text-decoration: none; /* Hinzugefügt */
}

/* Header Styles */
.main-header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.main-header.visible {
  opacity: 1;
}

/* Navigation für rechtliche Seiten */
.back-nav {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 1000;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    color: var(--secondary-color);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.back-button:hover {
    background: var(--primary-color);
    color: white;
    transform: translateX(-5px);
}

.back-button i {
    font-size: 1.2rem;
}

/* Container für rechtliche Seiten */
.legal-container {
    max-width: 800px;
    margin: 6rem auto 2rem;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.legal-container h1 {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.legal-container h2 {
    color: var(--secondary-color);
    margin: 2rem 0 1rem;
}

.legal-container p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* ========== Animationen ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform; /* Performance-Optimierung */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optimierte Animationen */
.animated {
  will-change: transform, opacity;
}

/* ========== Formulare ========== */
.styled-form {
  max-width: 800px;
  margin: 0 auto;
  background-color: transparent;
}

.styled-form .form-label {
  font-weight: 500;
  color: var(--secondary-color);
}

.styled-form .form-label.required::after {
  content: '*';
  color: var(--primary-color);
  margin-left: 4px;
}

.styled-form .input-themed {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  transition: all 0.3s ease;
}

.styled-form .input-themed:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(130, 158, 137, 0.25);
}

.styled-form .submit-button {
  background-color: var(--primary-color);
  border: none;
  padding: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.styled-form .submit-button:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
}

.styled-form .invalid-feedback {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.styled-form .form-text {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ========== Media Queries ========== */
/* Größere Bildschirme */
@media (min-width: 600px) {
  h1 {
    font-size: var(--font-size-extra-large); /* Einheitliche große Schriftgröße */
  }

  .carousel img {
    height: 200px;
  }

  section p {
    font-size: var(--font-size-medium); /* Größerer Fließtext */
  }
}

/* Kleinere Bildschirme */
@media (max-width: 768px) {
  header h1 {
    font-size: 2.5rem; /* Kleinere Schriftgröße für Mobilgeräte */
  }

  header p {
    font-size: 1.2rem;
  }

  section {
    padding: 40px 10px; /* Weniger Padding für kleinere Bildschirme */
  }

  .countdown {
    font-size: 1.2rem; /* Kleinere Schriftgröße für Mobilgeräte */
  }

  header {
    height: 80vh;
  }

  .timeline-item {
    padding: 0.8rem;
  }

  .trauzeuge {
    flex: 1 1 100%; /* Eine Spalte auf kleineren Bildschirmen */
  }
}

/* Media Query für alle Bildschirmgrößen */
@media screen and (min-width: 320px) and (max-width: 1920px) {
  header + section {
    margin-top: var(--spacing-large) !important;
    padding-top: var(--spacing-base) !important;
  }
}

/* Optimierte Media Queries */
@media screen and (max-width: var(--breakpoint-md)) {
  :root {
    /* Angepasste Variablen für mobile Geräte */
    --font-size-xxl: 2rem;
    --spacing-lg: 30px;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Medien-Optimierungen */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .slideshow img.active {
    animation: none;
    transform: scale(1.0);
  }
}

/* Flexbox-Utilities */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

/* Grid-System */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Spacing-Utilities */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Container-Klasse für einheitliche Breiten */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding);
}

/* Verhindert Layout-Shifts */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========== Rechtliche Seiten ========== */
.legal-header {
  background: #fff;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.legal-main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Bilder */
img {
  display: block;
}

img.error {
  visibility: hidden; /* Versteckt den Alt-Text, wenn das Bild nicht geladen wird */
}

/* Loading States */
.loading {
  opacity: 0;
  visibility: hidden;
  overflow: hidden; /* Verhindert Scrollen während des Ladens */
}

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.loader-container.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loader {
  width: 60px;
  height: 60px;
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Text-Ausrichtung mit Browser-Unterstützung */
.match-parent-text {
    text-align: -webkit-match-parent;  /* Safari < 15.4 */
    text-align: match-parent;          /* Moderne Browser */
}

/* Füge Vendor-Präfixe für backdrop-filter hinzu */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .nav-back,
    .header-box,
    .site-nav,
    .back-button {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* Fallback für Browser ohne backdrop-filter */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .nav-back,
    .header-box,
    .site-nav,
    .back-button {
        background: rgba(255, 255, 255, 0.95);
    }
}