/* ----------------------------------- */
/*  CSS-BASIS FÜR DIE HOMEPAGE    */
/* ----------------------------------- */

/* Grundlegende Einstellungen und Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Sehr wichtig für gute Layouts */
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Professionelle Schriftart */
    line-height: 1.6;
    color: #333; /* Dunkler Text für bessere Lesbarkeit */
    background-color: #f8f8f8; /* Sehr helles Grau als Hintergrund */
}

p{
    font-size: 1.4em;
}

/* Container sorgt dafür, dass der Inhalt zentriert und begrenzt wird */
.container {
    width: 85%; /* Etwas schmaler als 100% für bessere Lesbarkeit */
    max-width: 1200px;
    margin: 0 auto; /* Zentriert den Container */
    padding: 20px 0;
}

/* Style für die Branding-Gruppe (Logo + Name) */
.logo-branding {
    display: flex; /* Stellt sicher, dass Logo und Name nebeneinander stehen */
    align-items: center;
}

.logo {
    height: 60px; /* Passen Sie diese Höhe an die Größe Ihres Logos an */
    width: auto;  /* Die Breite wird automatisch angepasst */
}

.company-name {
    font-size: 1.6em; /* Größer und prominenter */
    font-weight: 700;
    margin-left: 10px; /* Kleiner Abstand zwischen Logo und Text */
}

/* HEADER STYLING (Navigation) */
.main-header {
    background-color: #003366; /* Dunkles Blau für Professionalität */
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-header .container {
    display: flex;
    justify-content: space-between; /* Logo und Menü getrennt */
    align-items: center;
    padding: 0 20px;
}

.main-header h1 {
    font-size: 1.8em;
}

.main-header nav ul {
    list-style: none;
    display: flex; /* Menüpunkte nebeneinander */
}

.main-header nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.main-header nav ul li a:hover {
    background-color: #0056b3; /* Helleres Blau beim Hovern */
    border-radius: 4px;
}

.impressum * , .datenschutz * {
    font-size: 1em;
    padding: 5px;
}

.impressum-link {
    font-size: 1.5em;
}

.spacer {
    height: 60px;
}

/* HERO SECTION STYLING (Der auffälligste Bereich) */
.hero {
    background-color: #e6f2ff; /* Sehr helles, kühles Blau */
    text-align: center;
    padding: 80px 20px;
    margin-bottom: 40px;
}

.hero h2 {
    font-size: 2.5em;
    color: #003366;
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.4em;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Button (Call to Action) */
.cta-button {
    display: inline-block;
    background-color: #ff8c00; /* Orange als Akzentfarbe, die Aufmerksamkeit erregt */
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #e67e00; /* Etwas dunkler beim Hovern */
}

/* INFO SECTIONS (Über uns, Dienstleistungen) */
.info-section {
    padding: 50px 0;
    text-align: center;
}

.info-section h2 {
    color: #003366;
    margin-bottom: 25px;
    border-bottom: 2px solid #ccc; /* Eine Linie zur Abgrenzung */
    padding-bottom: 10px;
    font-size: 1.6em;
}

/* SERVICE GRID (Für Dienstleistungen) */
.service-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px; /* Abstand zwischen den Kacheln */
    flex-wrap: wrap; /* Stellt sicher, dass sich die Boxen auf kleineren Bildschirmen umbrechen */
}

.service-item {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Leichter Schatten für Tiefe */
    flex: 1; /* Stellt sicher, dass die Kacheln gleich breit sind */
    min-width: 250px; /* Mindestbreite für bessere Darstellung */
}

.service-item h3 {
    color: #003366;
    margin-bottom: 10px;
}


/* FOOTER STYLING */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}

/* Responsive Anpassungen (Wichtig für Mobilgeräte) */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column; /* Menü wird unter den Titel */
        text-align: center;
    }
    .main-header nav ul {
        padding-top: 10px;
        justify-content: center;
    }
    .service-grid {
        flex-direction: column; /* Kacheln stapeln auf Mobilgeräten */
    }
}

/* ====================================== */
/* STILE FÜR DIE KONTAKTSEKTION */
/* ====================================== */

.contact-section {
    padding: 60px 0; /* Etwas mehr Abstand für eine gute Lesbarkeit */
    background-color: #f9f9f9; /* Leichte Hintergrundfarbe, um die Sektion hervorzuheben */
    text-align: center; /* Zentriert den gesamten Inhalt */
}

.contact-section h2 {
    font-size: 1.6em;
    margin-bottom: 10px;
    color: #003366;
    border-bottom: 2px solid #ccc; /* Eine Linie zur Abgrenzung */
    padding-bottom: 10px;
}

.contact-section .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
}

.contact-info {
    display: flex; /* Nutzt Flexbox, um die Informationen nebeneinander anzuordnen */
    justify-content: center; /* Zentriert den gesamten Info-Block */
    gap: 40px; /* Abstand zwischen den einzelnen Kontaktpunkten */
    max-width: 900px; /* Begrenzt die Breite, damit es nicht zu breit wird */
    margin: 0 auto;
}

.contact-item {
    flex: 1; /* Sorgt dafür, dass alle Elemente gleichmäßig Platz einnehmen */
    padding: 20px;
    border: 1px solid #eee; /* Leichte Trennlinie für jeden Punkt */
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Leichter Schatten */
}

.contact-item h3 {
    margin-top: 0;
    color: #007bff; /* Akzentfarbe für die Überschriften */
    font-size: 1.4em;
}

.contact-details,
.contact-link {
    display: block; /* Stellt sicher, dass die Details und Links unter der Überschrift stehen */
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

.contact-link {
    text-decoration: none; /* Entfernt den Unterstrich vom Mail-Link */
    color: #007bff; /* Blau als Linkfarbe */
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #0056b3; /* Dunklerer Blauton beim Hovern */
}

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
    .contact-info {
        flex-direction: column; /* Stellt die Elemente untereinander auf kleinen Bildschirmen */
        gap: 20px;
    }
}

/* ====================================== */
/* STILE FÜR DIE DIENSTLEISTUNGEN (GRID) */
/* ====================================== */

.services-section {
    padding: 60px 0;
    background-color: #f4f7f9; /* Etwas abgesetzt von anderen Bereichen */
}

.services-section h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #003366;
    font-size: 1.6em;
}

.services-grid {
    display: grid;
    /* Definiert das Raster: 2 Spalten, gleiche Breite für alle Kacheln */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; /* Abstand zwischen den Kacheln */
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 30px;
    text-align: left; /* Text innerhalb der Karte linksbündig */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt für mehr Interaktion */
.service-card:hover {
    transform: translateY(-5px); /* Leicht anheben beim Darüberfahren */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Deutlicherer Schatten */
}

.card-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.service-card h3 {
    color: #007bff; /* Akzentfarbe für die Dienstleistungsnamen */
    margin-top: 0;
    font-size: 1.5em;
}

.service-card p {
    font-size: 1.2em;
}

/* Responsive Anpassung (Falls nötig, obwohl Grid meist gut ist) */
@media (max-width: 900px) {
    .services-grid {
        /* Auf kleineren Bildschirmen kann das Grid zu einer Spalte werden, falls gewünscht */
        grid-template-columns: 1fr; 
    }
}

/* Stile für das Cookie-Banner */
#cookie-consent-banner {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #333;
    color: white;
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 9999; /* Stellt sicher, dass es über allem liegt */
    font-family: Arial, sans-serif;
}

#cookie-consent-banner h3 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.cookie-choices {
    margin-top: 15px;
    display: flex; /* Sorgt für eine nebeneinander liegende Anordnung der Buttons */
    gap: 10px;
}

.cookie-choices button {
    background-color: #007bff; /* Ein freundliches Blau als Akzent */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cookie-choices button:hover {
    background-color: #0056b3;
}

/* Ende des Styles */