/* 
  ---------------------------------------------------------------
  Website Content and Design © www.ClaxDesign.com
  Alle Styles, Layouts und Design-Code in dieser Datei wurden
  exklusiv von ClaxDesign erstellt.
  Jede unautorisierte Nutzung, Modifikation oder Weitergabe ist verboten.
  ---------------------------------------------------------------
*/

/* Root-Variable für Hauptfarbe */
:root {
    --primary: red; /* Primärfarbe für Links, Hover-Effekte, Buttons */
}

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

/* Footer Container Styling */
.footer-container {
    background-color: black; /* Dark Mode Hintergrund */
    color: white; /* Textfarbe im Dark Mode */
    padding: 20px 0; /* Innenabstand oben und unten */
    text-align: center; /* Text zentrieren */
    width: 100%; /* Volle Breite */
}

/* Footer Dark Mode explizit */
body.dark-mode .footer-container {
    background-color: black; /* Hintergrundfarbe beibehalten */
    color: white; /* Textfarbe beibehalten */
}

/* Footer Light Mode Styling */
body.light-mode .footer-container {
    background-color: white; /* Heller Hintergrund */
    color: black; /* Schwarzer Text */
}

/* Footer Link Container */
.footer-links {
    display: flex; /* Flexbox für Links */
    justify-content: center; /* Horizontal zentrieren */
    gap: 30px; /* Abstand zwischen Links */
    margin-bottom: 20px; /* Abstand nach unten */
    flex-wrap: wrap; /* Zeilenumbruch falls nötig */
}

/* Footer Links Styling */
.footer-links a {
    color: var(--primary); /* Primärfarbe für Links */
    text-decoration: none; /* Kein Unterstrich standardmäßig */
    font-weight: 500; /* Schriftgewicht mittel */
    cursor: pointer; /* Zeiger bei Hover */
    transition: all 0.3s; /* Sanfter Übergang bei Hover */
}

/* Hover-Effekt für Footer Links */
.footer-links a:hover {
    text-decoration: underline; /* Unterstrich beim Hover */
    opacity: 0.8; /* Leicht transparent beim Hover */
}

/* Footer Bottom Text Styling */
.footer-bottom {
    font-size: 1rem; /* Standard Schriftgröße */
    margin-top: 20px; /* Abstand nach oben */
}

/* Links im Footer Bottom */
.footer-bottom a {
    color: var(--primary); /* Primärfarbe für Links */
    text-decoration: none; /* Kein Unterstrich standardmäßig */
}

/* Hover-Effekt Footer Bottom Links */
.footer-bottom a:hover {
    text-decoration: underline; /* Unterstrich beim Hover */
}

/* ========== MODAL STYLES ========== */

/* Modal Overlay Container */
.modal {
    display: none; /* Standardmäßig ausgeblendet */
    position: fixed; /* Overlay fixiert über allen Elementen */
    z-index: 10000; /* Sehr hoher Z-Index */
    left: 0; /* Links oben starten */
    top: 0; /* Oben starten */
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
    overflow: auto; /* Scrollbar bei Bedarf */
    background-color: rgba(0, 0, 0, 0.7); /* Transparenter dunkler Hintergrund */
}

/* Modal Inhalt Container */
.modal-content {
    background-color: #fefefe; /* Standard heller Hintergrund */
    margin: 5% auto; /* Vertikal 5% Abstand, horizontal zentriert */
    padding: 30px; /* Innenabstand */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
    width: 80%; /* Breite relativ zum Viewport */
    max-width: 1000px; /* Maximalbreite */
    max-height: 80vh; /* Maximale Höhe relativ zur Ansicht */
    overflow-y: auto; /* Scrollbar bei Überlauf */
    position: relative; /* Für close-Button absolute Position */
    color: #333; /* Standardtextfarbe */
    line-height: 1.6; /* Zeilenhöhe für Lesbarkeit */
}

/* Modal Inhalt Light Mode */
body.light-mode .modal-content {
    background-color: #f8f9fa; /* Heller Hintergrund */
    color: #212529; /* Dunkler Text */
}

/* Close-Button Styling */
.close {
    position: absolute; /* Position relativ zum Modal-Container */
    right: 20px; /* Abstand von rechts */
    top: 15px; /* Abstand von oben */
    color: #aaa; /* Standardfarbe */
    font-size: 28px; /* Große Schrift für Sichtbarkeit */
    font-weight: bold; /* Fett */
    cursor: pointer; /* Zeiger beim Hover */
}

/* Hover-Effekt für Close Button */
.close:hover {
    color: var(--primary); /* Farbwechsel bei Hover */
}

/* Modal Überschriften H2 */
.modal h2 {
    color: var(--primary); /* Primärfarbe */
    margin-top: 0; /* Kein Abstand oben */
    padding-bottom: 15px; /* Abstand unten */
    border-bottom: 1px solid #eee; /* Unterstrich für Trennung */
}

/* Modal Überschriften H3 */
.modal h3 {
    color: #333; /* Dunkle Farbe */
    margin-top: 25px; /* Abstand oben */
    margin-bottom: 15px; /* Abstand unten */
}

/* Modal Überschriften H4 */
.modal h4 {
    color: #333; /* Dunkle Farbe */
    margin-top: 20px; /* Abstand oben */
    margin-bottom: 10px; /* Abstand unten */
    font-weight: 600; /* Halbfett */
}

/* Modal Paragraphen, Listen, ul Styling */
.modal p,
.modal li,
.modal ul {
    color: #555; /* Standardtextfarbe */
    margin-bottom: 10px; /* Abstand nach unten */
}

/* Unordered List Styling im Modal */
.modal ul {
    padding-left: 20px; /* Einrückung für Aufzählung */
    margin-bottom: 15px; /* Abstand nach unten */
}

/* List Items Styling */
.modal li {
    margin-bottom: 8px; /* Abstand zwischen Listeneinträgen */
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */

/* Mobile Anpassungen für Modals und Footer */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: row; /* Links nebeneinander anordnen */
        flex-wrap: nowrap; /* Kein Umbruch */
        gap: 15px; /* Abstand zwischen Links */
        justify-content: center; /* Horizontal zentrieren */
    }

    .footer-links a {
        white-space: nowrap; /* Text in einer Zeile */
    }

    .modal-content {
        width: 90%; /* Breitere Darstellung im mobilen Viewport */
        padding: 20px; /* Innenabstand reduzieren */
        margin: 10% auto; /* Abstand oben und zentrieren */
    }

    .close {
        right: 10px; /* Abstand nach rechts reduzieren */
        top: 10px; /* Abstand nach oben reduzieren */
    }
}

/* ========== MODAL CONTENT SPECIFIC STYLES ========== */

/* Impressum Text Styles */
.impressum-text h3 {
    color: #2c3e50; /* Dunkelblau */
    font-size: 1.4rem; /* Schriftgröße */
    margin: 20px 0 15px; /* Abstand oben, unten */
    padding-top: 10px; /* Abstand innerhalb oben */
    border-top: 1px solid #eee; /* Trennlinie oben */
}

.impressum-text p {
    margin-bottom: 15px; /* Abstand nach unten */
    line-height: 1.6; /* Lesbarkeit */
}

.impressum-text ul {
    margin: 10px 0 15px 20px; /* Abstand und Einrückung */
}

.impressum-text strong {
    color: #2c3e50; /* Hervorhebung für Text */
}

/* Datenschutz Text Styles */
.datenschutz-text h3 {
    color: #2c3e50; /* Überschrift Farbe */
    font-size: 1.3rem; /* Schriftgröße */
    margin: 20px 0 10px; /* Abstand oben und unten */
}

.datenschutz-text h4 {
    color: #34495e; /* Unterüberschrift Farbe */
    font-size: 1.1rem; /* Schriftgröße */
    margin: 15px 0 8px; /* Abstand oben und unten */
}

.datenschutz-text p {
    margin-bottom: 12px; /* Abstand nach unten */
    line-height: 1.6; /* Lesbarkeit */
}

/* AGB Text Styles */
.agb-text h3 {
    color: #2c3e50; /* Überschrift Farbe */
    font-size: 1.3rem; /* Schriftgröße */
    margin: 20px 0 10px; /* Abstand oben und unten */
}

.agb-text p {
    margin-bottom: 12px; /* Abstand nach unten */
    line-height: 1.6; /* Lesbarkeit */
}

/* Gemeinsames Styling für alle Modal-Texte */
.modal-text-container {
    padding: 0 10px; /* Horizontaler Innenabstand */
}

.modal-text-container img {
    display: block; /* Block Element */
    margin: 0 auto 20px; /* Zentriert mit Abstand unten */
    border-radius: 50%; /* Runde Bilder */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Zentrierter Bilder-Container */
.centered-image {
    text-align: center; /* Zentrierung */
    margin: 20px 0; /* Abstand oben und unten */
}

.centered-image p {
    text-align: center; /* Text zentrieren */
    font-weight: 600; /* Halbfett */
    margin-top: 10px; /* Abstand nach oben */
}