/* =========================================================
   Globale Design-Variablen (CSS Custom Properties)
   Diese Variablen definieren zentrale Farben, Schatten,
   Hintergründe und Kontrastwerte für Dark- und Light-Mode.
   Änderungen hier wirken sich projektweit aus.
   ========================================================= */
:root {
    --primary: red; /* Hauptakzentfarbe der Website (Buttons, Links, Hervorhebungen) */
    --primary-dark: #c00; /* Dunklere Variante der Primärfarbe für Hover-Zustände */
    --text-dark: #e0e0e8; /* Standard-Textfarbe im Dark Mode */
    --text-light: #1a1a2e; /* Standard-Textfarbe im Light Mode */
    --bg-dark: #0f0f14; /* Seitenhintergrund im Dark Mode */
    --bg-light: #f8f9fa; /* Seitenhintergrund im Light Mode */
    --overlay-dark: rgba(15, 15, 20, 0.75); /* Halbtransparenter Overlay-Hintergrund (Dark Mode) */
    --overlay-light: rgba(248, 249, 250, 0.88); /* Halbtransparenter Overlay-Hintergrund (Light Mode) */
    --shadow-dark: rgba(0, 0, 0, 0.55); /* Starker Schatten im Dark Mode */
    --shadow-light: rgba(0, 0, 0, 0.18); /* Weicher Schatten im Light Mode */
    --border-dark: rgba(180, 180, 200, 0.25); /* Rahmenfarbe für Dark Mode */
    --border-light: rgba(140, 140, 180, 0.35); /* Rahmenfarbe für Light Mode */
}


/* =========================================================
   HERO-BEREICH MIT HINTERGRUNDBILD
   Vollflächiger Startbereich mit zentriertem Inhalt.
   ========================================================= */
.hero-image {
    width: 100%; /* Nimmt gesamte verfügbare Breite ein */
    height: 100vh; /* Höhe entspricht der kompletten Viewport-Höhe */
    background-image: url('assets/img/MesGruppe3.jpg'); /* Hintergrundbild */
    background-size: cover; /* Bild füllt Fläche vollständig aus */
    background-position: center; /* Bild wird zentriert */
    background-repeat: no-repeat; /* Keine Wiederholung des Bildes */
    margin: 0; /* Kein Außenabstand */
    padding: 0; /* Kein Innenabstand */
    position: relative; /* Ermöglicht absolute Positionierung von Overlay-Elementen */
    display: flex; /* Aktiviert Flexbox */
    align-items: center; /* Vertikale Zentrierung des Inhalts */
    justify-content: center; /* Horizontale Zentrierung des Inhalts */
}


/* =========================================================
   Overlay-Container über dem Hero-Bild
   Enthält Titel oder Partnerlogos.
   ========================================================= */
.partner-overlay {
    position: absolute; /* Positioniert relativ zum Hero-Container */
    top: 50%; /* Vertikale Mitte */
    left: 50%; /* Horizontale Mitte */
    margin-top: 50px; /* Zusätzlicher Abstand nach unten */
    transform: translate(-50%, -50%); /* Exakte Zentrierung */
    width: 90%; /* Breite relativ zum Viewport */
    max-width: 1240px; /* Maximale Inhaltsbreite */
    text-align: center; /* Text zentrieren */
    z-index: 10; /* Überlagert Hintergrundbild */
    padding: 20px; /* Innenabstand */
    box-sizing: border-box; /* Padding wird in Breitenberechnung einbezogen */
}


/* =========================================================
   Titel im Hero-Bereich
   Große, auffällige Headline.
   ========================================================= */
.partner-title {
    font-size: 4.2rem; /* Sehr große Schrift für starke visuelle Präsenz */
    font-weight: 700; /* Fette Schrift */
    color: white; /* Textfarbe im Dark Mode */
    text-shadow: 3px 3px 12px var(--shadow-dark); /* Tiefer Schatten für bessere Lesbarkeit */
    margin: 0 0 2.5rem 0; /* Abstand unterhalb */
    line-height: 1.1; /* Enger Zeilenabstand für Headlines */
}


/* Anpassung des Titels im Light Mode */
body.light-mode .partner-title {
    color: #111; /* Dunkle Schrift */
    text-shadow: 2px 2px 10px rgba(255,255,255,0.9); /* Heller Kontrastschatten */
}


/* =========================================================
   FOOTER-BEREICH
   Unterer Seitenabschluss mit Impressum & Links.
   ========================================================= */
footer {
    background-color: #000; /* Schwarzer Hintergrund */
    color: #ddd; /* Heller Text */
    padding: 70px 0 50px; /* Oberer und unterer Abstand */
    text-align: center; /* Inhalt zentrieren */
}


/* Light Mode Variante */
body.light-mode footer {
    background-color: #fff; /* Weißer Hintergrund */
    color: #222; /* Dunkler Text */
    border-top: 1px solid #e0e0e0; /* Dezente obere Trennlinie */
}


/* Unterer Footer-Bereich (z.B. Impressum/Copy) */
.footer-bottom {
    font-size: 1rem; /* Standard-Schriftgröße */
    margin-top: 2.5rem; /* Abstand zum oberen Footer-Inhalt */
    opacity: 0.85; /* Leicht reduzierte Deckkraft */
}


/* Footer-Links */
.footer-bottom a {
    color: var(--primary); /* Primärfarbe */
    text-decoration: none; /* Kein Unterstrich */
    font-weight: 500; /* Mittlere Schriftstärke */
}


/* Hover-Zustand für Footer-Links */
.footer-bottom a:hover {
    text-decoration: underline; /* Unterstrich bei Hover */
    color: var(--primary-dark); /* Dunklere Akzentfarbe */
}


/* =========================================================
   RESPONSIVE DESIGN – ANPASSUNGEN
   Optimierung für verschiedene Bildschirmgrößen.
   ========================================================= */

/* Große Tablets */
@media (max-width: 1200px) {
    .partner-title {
        font-size: 3.6rem; /* Verkleinerte Headline */
    }
}


/* Tablets */
@media (max-width: 992px) {
    .partner-title {
        font-size: 3.1rem; /* Weitere Verkleinerung */
        text-shadow: 3px 3px 10px var(--shadow-dark); /* Angepasster Schatten */
    }

    .partner-overlay {
        width: 92%; /* Mehr Platz am Rand */
        padding: 15px; /* Reduzierter Innenabstand */
    }
}


/* Kleine Tablets / Smartphones */
@media (max-width: 768px) {
    .hero-image {
        height: auto; /* Automatische Höhe */
        min-height: 90vh; /* Mindestens 90% der Bildschirmhöhe */
        padding-bottom: 80px; /* Zusätzlicher Abstand unten */
    }

    .partner-overlay {
        position: relative; /* Kein absolutes Positionieren mehr */
        top: auto;
        left: auto;
        transform: none; /* Keine Verschiebung */
        width: 94%;
        margin: 0 auto;
        padding: 140px 20px 80px; /* Abstand oben/unten */
    }

    .partner-title {
        font-size: 2.6rem;
        margin: 0 0 2rem 0;
        padding-top: 20px;
        text-shadow: 2px 2px 8px var(--shadow-dark);
    }

    body.light-mode .partner-title {
        text-shadow: 1px 1px 6px rgba(0,0,0,0.25);
    }
}


/* Kleine Smartphones */
@media (max-width: 576px) {
    .partner-title {
        font-size: 2.1rem;
        line-height: 1.15;
    }

    .partner-overlay {
        padding: 120px 16px 60px;
    }

    footer {
        padding: 50px 0 40px;
    }

    .footer-bottom {
        font-size: 0.95rem;
    }
}


/* =========================================================
   BODY – GLOBALER DARK/LIGHT MODE KONTRAST
   ========================================================= */
body {
    background-color: var(--bg-dark); /* Dunkler Seitenhintergrund */
    color: var(--text-dark); /* Helle Schrift */
    transition: background-color 0.4s ease, color 0.4s ease; /* Sanfter Theme-Wechsel */
}


body.light-mode {
    background-color: var(--bg-light); /* Heller Hintergrund */
    color: var(--text-light); /* Dunkle Schrift */
}


/* =========================================================
   GLASSMORPHISM CONTENT-BOXEN
   Für About, Content-Fenster oder Beispielbereiche.
   ========================================================= */
.about-box,
.content-window,
.example-content-window {
    background-color: var(--overlay-dark); /* Halbtransparenter Hintergrund */
    backdrop-filter: blur(10px); /* Hintergrundunschärfe */
    -webkit-backdrop-filter: blur(10px); /* Safari-Support */
    border: 1px solid var(--border-dark); /* Leichter Rahmen */
    border-radius: 16px; /* Runde Ecken */
    padding: 2.2rem; /* Innenabstand */
    color: var(--text-dark); /* Textfarbe */
    box-shadow: 0 10px 40px var(--shadow-dark); /* Tiefenschatten */
}


/* Light Mode Variante */
body.light-mode .about-box,
body.light-mode .content-window,
body.light-mode .example-content-window {
    background-color: var(--overlay-light);
    border-color: var(--border-light);
    color: var(--text-light);
    box-shadow: 0 8px 32px var(--shadow-light);
}


/* =========================================================
   GLOBALE LINK-STYLES
   ========================================================= */
a {
    color: var(--primary); /* Standard-Linkfarbe */
    transition: color 0.2s; /* Weicher Farbwechsel */
}


body.light-mode a {
    color: #d00; /* Leicht dunkleres Rot im Light Mode */
}


a:hover {
    color: #ff4444; /* Helleres Rot bei Hover */
}