/*
  ---------------------------------------------------------------
  Website Content and Design © www.ClaxDesign.com
  Diese Datei enthält das vollständige Styling für die Kontaktseite.
  Der Code ist urheberrechtlich geschützt und darf nicht
  ohne Genehmigung verwendet oder verändert werden.
  ---------------------------------------------------------------
*/

/* Globale CSS-Variable für die Primärfarbe */
:root {
    --primary: red; /* Hauptfarbe für Buttons, Icons, Rahmen und Hervorhebungen */
}


/* ============================= */
/* Hauptbereich – Kontaktseite  */
/* ============================= */

/* Hauptcontainer der Seite */
.main-content {
    min-height: 100vh; /* Mindestens volle Bildschirmhöhe */
    padding: 140px 40px 100px; /* Abstand oben (für Navbar), seitlich und unten */
    display: flex; /* Flexbox-Layout zur Positionierung */
    align-items: flex-start; /* Inhalt oben ausrichten */
    justify-content: center; /* Horizontal zentrieren */
}

/* Innerer Inhaltscontainer */
.content-container {
    max-width: 1200px; /* Maximale Breite für bessere Lesbarkeit */
    width: 100%; /* Volle Breite bis zur Maximalbegrenzung */
}

/* Hauptüberschrift der Kontaktseite */
.content-title {
    font-size: 4rem; /* Große, dominante Überschrift */
    text-align: center; /* Zentrierte Darstellung */
    margin-bottom: 40px; /* Abstand nach unten */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* Schatten für bessere Lesbarkeit */
}

/* Titel im Dark Mode */
body.dark-mode .content-title {
    color: white; /* Weiße Schrift */
}

/* Titel im Light Mode */
body.light-mode .content-title {
    color: white; /* Ebenfalls weiß für Designkonsistenz */
}

/* Bootstrap-Klasse Kombination für Untertitel */
.text-center.fs-3 {
    color: white; /* Weiße Schriftfarbe */
}

/* Light Mode Variante */
body.light-mode .text-center.fs-3 {
    color: white; /* Farbe bleibt weiß */
}


/* ============================= */
/* Kontaktinformationen          */
/* ============================= */

/* Links innerhalb der Kontaktinformationen */
.contact-info a {
    text-decoration: none; /* Entfernt Unterstreichung */
    color: inherit; /* Übernimmt Elternfarbe */
    transition: color 0.3s; /* Sanfte Farbänderung */
}

/* Hover-Effekt für Kontaktlinks */
.contact-info a:hover {
    color: red; /* Farbwechsel zur Primärfarbe */
}

/* Icons innerhalb der Kontaktinformationen */
.contact-info i {
    color: red; /* Primärfarbe */
    transition: transform 0.3s; /* Animationsübergang */
}

/* Hover-Effekt für Icons */
.contact-info i:hover {
    transform: scale(1.2); /* Vergrößert Icon leicht */
}

/* Überschrift innerhalb Kontaktinfo */
.contact-info h4 {
    color: red; /* Weiße Schrift */
    font-size: 1.5rem; /* Mittlere Überschrift */
    margin-left: 0px; /* Abstand oben und unten */
}

/* Light Mode Variante */
body.light-mode .contact-info h4 {
    color: white; /* Weiß bleibt erhalten */
}

/* Text innerhalb Kontaktinfo */
.contact-info p {
    color: white; /* Weiße Schrift */
    font-size: 1.6rem; /* Größere Schrift für wichtige Infos */
    font-weight: 600; /* Halbfett */
    margin: 0; /* Kein zusätzlicher Abstand */
}

/* Light Mode Variante */
body.light-mode .contact-info p {
    color: white;
}


/* ============================= */
/* Öffnungszeiten Bereich        */
/* ============================= */

/* Überschrift Öffnungszeiten */
.opening-hours h3 {
    color: white; /* Primärfarbe */
    font-size: 2rem; /* Große Schrift */
    margin-bottom: 20px; /* Abstand nach unten */
}

/* Text Öffnungszeiten */
.opening-hours p {
    color: red; /* Weiße Schrift */
    font-size: 1.8rem; /* Gut lesbar */
}

/* Light Mode Variante */
body.light-mode .opening-hours p {
    color: white;
}


/* ============================= */
/* Formular Styling              */
/* ============================= */

/* Formular-Beschriftung */
.form-label {
    color: white; /* Weiße Schrift */
    font-size: 1.2rem; /* Gut lesbare Größe */
    font-weight: 600; /* Halbfett */
}

/* Light Mode Variante */
body.light-mode .form-label {
    color: white;
}

/* Eingabefelder */
.form-control {
    background-color: rgba(30, 30, 30, 0.95); /* Dunkler Hintergrund */
    border: 2px solid red; /* Roter Rahmen */
    color: white; /* Weiße Schrift */
    padding: 15px; /* Innenabstand */
    font-size: 1.1rem; /* Lesbare Größe */
    border-radius: 10px; /* Abgerundete Ecken */
}

/* Light Mode Eingabefelder */
body.light-mode .form-control {
    background-color: rgba(240, 240, 240, 0.95); /* Heller Hintergrund */
    color: white; /* Schriftfarbe */
}

/* Fokus-Zustand Eingabefelder */
.form-control:focus {
    background-color: rgba(30, 30, 30, 0.95); /* Dunkel bleibt */
    border-color: red; /* Rahmen bleibt rot */
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.3); /* Roter Glow-Effekt */
    color: white; /* Weiße Schrift */
}

/* Light Mode Fokus */
body.light-mode .form-control:focus {
    background-color: rgba(240, 240, 240, 0.95);
    color: white;
}


/* ============================= */
/* Button Styling                */
/* ============================= */

/* Primärer Button */
.btn-primary {
    background-color: red; /* Primärfarbe */
    border: none; /* Kein Rahmen */
    padding: 15px 40px; /* Großzügiger Innenabstand */
    font-size: 1.4rem; /* Große Schrift */
    border-radius: 50px; /* Stark abgerundet */
    transition: background-color 0.3s; /* Sanfter Farbwechsel */
    color: white; /* Weiße Schrift */
}

/* Hover-Zustand Button */
.btn-primary:hover {
    background-color: #cc0000; /* Dunkleres Rot */
}


/* ============================= */
/* Google Map Container          */
/* ============================= */

.map-container {
    border: 4px solid red; /* Roter Rahmen */
    border-radius: 20px; /* Abgerundete Ecken */
    overflow: hidden; /* Verhindert Überlaufen */
    box-shadow: 0 15px 40px rgba(255, 0, 0, 0.4); /* Roter Schatten */
}

/* iFrame innerhalb Map */
.map-container iframe {
    width: 100%; /* Volle Breite */
    height: 450px; /* Feste Höhe */
}


/* ============================= */
/* Footer Bereich                */
/* ============================= */

footer {
    background-color: black; /* Dunkler Hintergrund */
    color: white; /* Weiße Schrift */
    padding: 40px 0; /* Innenabstand */
    text-align: center; /* Zentrierter Text */
    position: fixed; /* Fixiert am unteren Rand */
    bottom: 0; /* Direkt unten */
    width: 100%; /* Volle Breite */
}

/* Light Mode Footer */
body.light-mode footer {
    background-color: white; /* Weißer Hintergrund */
    color: black; /* Schwarze Schrift */
}

/* Links im Footer */
.footer-bottom a {
    color: red; /* Primärfarbe */
    text-decoration: none; /* Kein Unterstrich */
}


/* ============================= */
/* Responsive Anpassungen        */
/* ============================= */

@media (max-width: 992px) {
    .contact-info i {
        font-size: 3.5rem !important; /* Größere Icons */
    }
    .contact-info h4 {
        font-size: 1.4rem;
    }
    .contact-info p {
        font-size: 1.4rem;
    }
    .opening-hours h3 {
        font-size: 1.8rem;
    }
    .opening-hours p {
        font-size: 12px;
    }
    .content-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .content-title {
        font-size: 2rem;
    }
    .map-container iframe {
        height: 350px;
    }
    .btn-primary {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .contact-info i {
        font-size: 2.8rem !important;
    }
    .contact-info h4 {
        font-size: 1.2rem;
    }
    .contact-info p {
        font-size: 1.2rem;
    }
    .opening-hours h3 {
        font-size: 1.6rem;
    }
    .opening-hours p {
        font-size: 1.4rem;
    }
    .map-container iframe {
        height: 300px;
    }
    .form-label {
        font-size: 1.1rem;
    }
    .form-control {
        padding: 12px;
        font-size: 1rem;
    }
    .content-title {
        font-size: 1.7rem;
    }
}