/**
 * Basisstile und Variablen
 * Enthält CSS-Variablen, Reset und grundlegende Typografie
 */

/* Grundlegende Einstellungen */
:root {
    /* Moderne Farbdefinitionen - Basisfarben bleiben, aber mit modernen Akzenten */
    --primary-color: #1c3d5a;         /* Dunkelblau - Basis CI-Farbe */
    --primary-light: #2c4b6a;          /* Etwas helleres Blau für Akzente */
    --primary-dark: #132a3f;           /* Dunkleres Blau für Kontraste */
    --secondary-color: #2c86c7;
    --accent-color: #4CAF50;           /* Grün - Basis CI-Farbe */
    --accent-bright: #5ac85e;          /* Helleres Grün für Hover-Effekte */
    --accent-dark: #3b9c3f;            /* Dunkleres Grün für Schatten/Kontraste */
    --accent-color-light: #e8f5e9;
    --text-color: #333;
    --light-gray: #f5f5f5;
    --dark-gray: #616161;
    --white: #ffffff;
    --neutral-light: rgba(255,255,255,0.9);  /* Fast-Weiß für moderne Transparenz */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --gradient-overlay: linear-gradient(135deg, rgba(28,61,90,0.5) 0%, rgba(28,61,90,0.85) 100%);
    
    /* Barrierefreiheit Variablen */
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --focus-outline: 3px solid #4CAF50;
    
    /* Sektionsfarben */
    --section-blue: #2c4b6a;      /* Dunkleres Blau aus CI-Farben (primary-light) */
    --section-cream: #fefcf7;     /* Cremeweiß für Alternation */

    /* Z-Index-Strategie */
    --z-index-base: 1;
    --z-index-content: 10;
    --z-index-map: 20;
    --z-index-header: 1000;
    --z-index-menu: 1010;
    --z-index-accessibility: 2000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--light-gray);
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth; /* Fügt sanftes Scrollen für alle Browser hinzu, die es unterstützen */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--primary-color);
}

a {
    text-decoration: none;
    color: var(--secondary-color);
    transition: var(--transition);
}

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

img {
    max-width: 100%;
    height: auto;
}

/* Barrierefreiheit Stile */
.accessibility-mode {
    /* Erhöhter Kontrast */
    --primary-color: #00417f !important;
    --primary-dark: #003366 !important;
    --primary-light: #0057a8 !important;
    --secondary-color: #0057a8 !important;
    --accent-color: #008000 !important;
    --accent-bright: #00a000 !important;
    --accent-dark: #006000 !important;
    --text-color: #000000 !important;
    --dark-gray: #333333 !important;
    --light-gray: #ffffff !important;
    --white: #ffffff !important;
    --shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    
    /* Verbesserte Lesbarkeit */
    font-size: 18px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.5px !important;
}

.accessibility-mode h1,
.accessibility-mode h2,
.accessibility-mode h3 {
    letter-spacing: 0.5px !important;
}

.accessibility-mode a:focus,
.accessibility-mode button:focus,
.accessibility-mode input:focus,
.accessibility-mode textarea:focus,
.accessibility-mode select:focus {
    outline: var(--focus-outline) !important;
    outline-offset: 3px !important;
}

.accessibility-mode img {
    /* Verbesserte Bildbeschreibungen und Kontrast */
    filter: saturate(120%) !important;
}

.accessibility-mode .service-card,
.accessibility-mode .gallery-item,
.accessibility-mode .contact-info {
    border: 1px solid #000 !important;
}

/* Verbesserte Barrierefreiheit-Stile */
.accessibility-mode {
    /* Erhöhter Kontrast */
    --primary-color: #00417f !important;
    --primary-dark: #003366 !important;
    --primary-light: #0057a8 !important;
    --secondary-color: #0057a8 !important;
    --accent-color: #008000 !important;
    --accent-bright: #00a000 !important;
    --accent-dark: #006000 !important;
    --text-color: #000000 !important;
    --dark-gray: #333333 !important;
    --light-gray: #ffffff !important;
    --white: #ffffff !important;
    --shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    
    /* Verbesserte Lesbarkeit */
    font-size: 18px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.5px !important;
}

/* Grundlegende Textformatierung in Barrierefreiheit-Modus */
.accessibility-mode h1,
.accessibility-mode h2,
.accessibility-mode h3,
.accessibility-mode h4,
.accessibility-mode h5,
.accessibility-mode h6 {
    letter-spacing: 0.5px !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* Hintergrundfarben für Sektionen im Barrierefreiheit-Modus */
.accessibility-mode section {
    background-color: var(--light-gray) !important;
}

.accessibility-mode .about-section,
.accessibility-mode .map-section,
.accessibility-mode .gallery-section,
.accessibility-mode .partners-section,
.accessibility-mode .service-area-section {
    background-color: var(--primary-color) !important;
}

.accessibility-mode .about-section h2,
.accessibility-mode .map-section h2,
.accessibility-mode .gallery-section h2,
.accessibility-mode .partners-section h2,
.accessibility-mode .service-area-section h2,
.accessibility-mode .about-section h3,
.accessibility-mode .map-section h3,
.accessibility-mode .gallery-section h3,
.accessibility-mode .partners-section h3,
.accessibility-mode .service-area-section h3,
.accessibility-mode .about-section p,
.accessibility-mode .map-section p,
.accessibility-mode .gallery-section p,
.accessibility-mode .partners-section p,
.accessibility-mode .service-area-section p {
    color: var(--white) !important;
}

/* Verbesserte Karten und UI-Komponenten */
.accessibility-mode .service-card,
.accessibility-mode .usp-card,
.accessibility-mode .price-card,
.accessibility-mode .gallery-item,
.accessibility-mode .testimonial-content,
.accessibility-mode .faq-item,
.accessibility-mode .contact-form-container,
.accessibility-mode .contact-info {
    border: 2px solid #000 !important;
    background-color: var(--white) !important;
}

/* Verbesserte Buttons und interaktive Elemente */
.accessibility-mode .cta-button,
.accessibility-mode .price-cta,
.accessibility-mode button[type="submit"] {
    font-size: 1.1rem !important;
    padding: 16px 32px !important;
    border: 2px solid #000 !important;
    background-color: #008000 !important;
    color: #fff !important;
    font-weight: 700 !important;
    transition: background-color 0.3s ease !important;
}

.accessibility-mode .cta-button:hover,
.accessibility-mode .price-cta:hover,
.accessibility-mode button[type="submit"]:hover {
    background-color: #006400 !important;
}

/* Formulare Barrierefreiheit verbessern */
.accessibility-mode input,
.accessibility-mode select,
.accessibility-mode textarea {
    border: 2px solid #000 !important;
    background-color: var(--white) !important;
    color: var(--text-color) !important;
    font-size: 1.1rem !important;
}

.accessibility-mode label {
    color: var(--text-color) !important;
    font-weight: 700 !important;
}

/* Verbesserte Fokusstile für interaktive Elemente */
.accessibility-mode a:focus,
.accessibility-mode button:focus,
.accessibility-mode input:focus,
.accessibility-mode select:focus,
.accessibility-mode textarea:focus,
.accessibility-mode [role="button"]:focus {
    outline: 3px solid var(--accent-color) !important;
    outline-offset: 3px !important;
}

/* Banner und Auszeichnungen besser erkennbar machen */
.accessibility-mode .seasonal-badge,
.accessibility-mode .price-badge,
.accessibility-mode .header-badge {
    background-color: var(--accent-color) !important;
    color: var(--white) !important;
    border: 2px solid #000 !important;
    font-weight: 700 !important;
}

/* Barrierefreiheit Toggle - NEU POSITIONIERT FÜR BESSERE MOBILANSICHT */
.accessibility-toggle {
    position: fixed !important;
    bottom: 145px !important; /* Position am unteren Rand beibehalten */
    right: 20px !important; 
    z-index: var(--z-index-accessibility) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 45px !important;
    height: 45px !important;
    box-shadow: none !important;
    transition: transform 0.3s ease !important;
}

.accessibility-toggle:hover {
    transform: scale(1.08) !important;
}

#accessibility-toggle-btn {
    background-color: var(--primary-color);
    color: var(--white);
    border: none; /* Border entfernt */
    border-radius: 50%;
    width: 45px; /* Von 52px auf 45px geändert - gleiche Größe wie Scroll-Buttons */
    height: 45px; /* Von 52px auf 45px geändert - gleiche Größe wie Scroll-Buttons */
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Gleicher Schatten wie Scroll-Buttons */
    padding: 0; /* Kein Padding für exakte Zentrierung */
}

#accessibility-toggle-btn:hover,
#accessibility-toggle-btn:focus {
    background-color: var(--accent-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gleicher Hover-Schatten wie Scroll-Buttons */
    transform: translateY(-3px); /* Gleiche Hover-Animation wie Scroll-Buttons */
    outline: none;
}

#accessibility-toggle-btn i {
    margin: 0; /* Kein Margin am Icon */
    line-height: 1; /* Optimale Linienhöhe für Zentrierung */
}

/* Responsive Anpassungen für Barrierefreiheit-Button */
@media (max-width: 768px) {
    .accessibility-toggle {
        bottom: 140px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    #accessibility-toggle-btn {
        width: 40px; /* Angepasst an Scroll-Buttons */
        height: 40px; /* Angepasst an Scroll-Buttons */
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .accessibility-toggle {
        bottom: 75px !important; /* Deutlich höher positioniert, weg von der Navigation */
        left: 10px !important; /* Zur linken Seite verschoben, um Kollision mit rechten Elementen zu vermeiden */
        right: auto !important; /* "right" zurücksetzen, da wir jetzt "left" verwenden */
        width: 35px !important;
        height: 35px !important;
    }
    
    #accessibility-toggle-btn {
        width: 35px; /* Angepasst an Scroll-Buttons */
        height: 35px; /* Angepasst an Scroll-Buttons */
        font-size: 16px;
    }
}

/* Honeypot-Feld für Bot-Schutz - versteckt für menschliche Besucher */
.honeypot-field {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* SEO Footer Styling */
.seo-footer-text {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.seo-footer-text p {
    margin-bottom: 0;
}