/* =========================================================
   G&R Fräs- und Drehteile GmbH – Korrekturen zum Prüfbericht
   Stand 24.08.2026 · Werbeagentur Hoffmann

   Diese Datei wird NACH template.css geladen und ergänzt sie.
   template.css selbst bleibt unverändert – damit ist jede
   Änderung nachvollziehbar und im Zweifel durch Entfernen
   dieser einen Datei rückgängig zu machen.
   ========================================================= */


/* =========================================================
   F-22 · Schließen des mobilen Menüs
   Ein eigener Schließen-Knopf ist nicht nötig: sobald die drei
   Burger-Balken sichtbar sind (F-04), verwandelt das Template die
   Schaltfläche im geöffneten Zustand selbst in ein X. Zusätzlich
   schließen der abgedunkelte Hintergrund und die Esc-Taste.
   ========================================================= */

/* =========================================================
   F-04 · Menü-Schaltfläche zuverlässig sichtbar und gross genug
   Die drei .burger-line-Elemente werden im Modul-HTML ergänzt;
   fehlen sie doch einmal, trägt main.js sie nach. Hier wird nur
   sichergestellt, dass die Fläche gross genug und gut sichtbar ist.
   ========================================================= */
.mobile-toggle {
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-toggle:focus-visible {
    outline: 2px solid var(--accent-color, #00b4d8);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Etwas Schattenkante, damit die weissen Balken auch über hellen
   Bildbereichen im Hero sicher zu erkennen sind. */
.mobile-toggle .burger-line {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

.header.scrolled .mobile-toggle .burger-line {
    box-shadow: none;
}


/* =========================================================
   F-13 · Untermenü „Leistungen“ mobil über den Pfeil öffnen,
   der Menüpunkt selbst bleibt ein normaler Link zur Seite.
   ========================================================= */
.dropdown-arrow {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
    transition: transform var(--transition-fast, 0.3s ease);
}

.dropdown-arrow:focus-visible {
    outline: 2px solid var(--accent-color, #00b4d8);
    outline-offset: 3px;
    border-radius: 4px;
}

.dropdown.active > .dropdown-arrow { transform: rotate(180deg); }

@media (max-width: 900px) {
    /* Menüpunkt und Pfeil nebeneinander, beide gross genug zum Tippen */
    .nav .dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .nav .dropdown > .nav-link {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .dropdown-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin-left: 4px;
    }

    .nav .dropdown > .dropdown-menu { flex: 1 0 100%; }
}


/* =========================================================
   F-03 · Google Maps erst nach Zustimmung
   ========================================================= */
.map-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    padding: var(--spacing-md, 2rem) var(--spacing-sm, 1rem);
    background: var(--bg-light, #f4f6f9);
    background-image:
        linear-gradient(rgba(13, 44, 84, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 44, 84, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    text-align: center;
}

.map-consent__inner {
    max-width: 460px;
    margin: 0 auto;
}

.map-consent__icon {
    font-size: 2.4rem;
    color: var(--accent-color, #00b4d8);
    margin-bottom: 0.75rem;
    display: block;
}

.map-consent h3 {
    margin: 0 0 0.35rem;
    color: var(--primary-color, #0d2c54);
}

.map-consent p { margin: 0 0 0.6rem; color: var(--text-color, #333); }

.map-consent__hint {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--secondary-color, #6c757d);
}

.map-consent__hint a {
    color: var(--primary-light, #1a4b8c);
    text-decoration: underline;
}

.map-consent__btn {
    margin-top: 0.5rem;
    cursor: pointer;
}

.map-consent__link {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--primary-light, #1a4b8c);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .map-consent { min-height: 380px; }
}


/* =========================================================
   Rückmeldung im Kontaktformular (statt Browser-Dialog)
   ========================================================= */
.form-message {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-message--erfolg {
    background: #e8f5ec;
    border-left-color: #1c6b34;
    color: #14512a;
}

.form-message--fehler {
    background: #fdeceb;
    border-left-color: #b3261e;
    color: #8c1d18;
}

/* Honeypot-Feld sicher unsichtbar halten, auch ohne Inline-Style */
.contact-form input[name="website"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}


/* =========================================================
   F-05 · Hero-Bereich zeigt nie mehr eine graue Fläche
   Solange das Video nicht spielt, steht ein Farbverlauf in den
   Hausfarben dahinter. Zusätzlich kann im Modul ein poster-Bild
   gesetzt werden.
   ========================================================= */
/* Der Farbverlauf darf NICHT auf .hero selbst liegen: das Video hat
   z-index: -2 und läge damit hinter dem Hintergrund des Elternelements.
   Deshalb ein eigenes Pseudoelement mit z-index: -3 – der Verlauf liegt
   dadurch UNTER dem Video und wird sichtbar, solange kein Videobild da ist. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--primary-color, #0d2c54);
    background-image: linear-gradient(135deg, #0d2c54 0%, #1a4b8c 55%, #0d2c54 100%);
    pointer-events: none;
}

/* Am Video selbst wird bewusst NICHTS verändert – kein Einblenden,
   keine Deckkraft-Steuerung. Im laufenden Betrieb sieht der Hero damit
   exakt so aus wie vor der Überarbeitung. Als Rückfallebene dient
   allein das poster-Bild und der Verlauf auf .hero::after darunter. */


/* =========================================================
   F-32 · Hero mobil kompakter, Schaltflächen nicht mehr umbrechend
   ========================================================= */
@media (max-width: 600px) {
    .hero {
        min-height: 85vh;
        min-height: 85svh;
    }

    .hero-buttons {
        gap: 0.75rem;
    }

    .hero-buttons .btn {
        white-space: nowrap;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        font-size: 0.82rem;
    }
}


/* =========================================================
   F-18 · Ohne JavaScript bleibt nichts unsichtbar
   (greift zusammen mit dem noscript-Block in der index.php)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .reveal-text, .reveal-up, .reveal-left, .reveal-right, .reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =========================================================
   Kleinigkeiten
   ========================================================= */

/* Sichtbarer Tastaturfokus auf allen bedienbaren Elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-color, #00b4d8);
    outline-offset: 2px;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--primary-color, #0d2c54);
    color: #fff;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
}