/*
 * MOBILE UI FRAMEWORK — 8dp Grid System
 * 1u = 14px (≤ 768px) / 10px (≤ 480px)
 * Breakpoint: max-width 768px
 */


/* ── Desktop: Mobile-only Elemente ausblenden ── */
.mobile-footer-links {
    display: none;
}

/* ════════════════════════════════════════════════════
   MOBIL GESAMT (≤ 768px)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── Header: fixed (main.css lädt nicht auf Mobile) ─── */
    body > header.site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    /* ─── Ticker auf Mobile ausblenden ─── */
    .site-header .ticker-wrap-container {
        display: none !important;
    }

    /* ─── 0. BASE UNITS ────────────────────────────── */
    :root {
        --u: 14px;          /* Layout-Unit: Top-Bar, Icons, Labels */
        --space: 8px;       /* Spacing-Unit: Abstände, Margins, Padding */
    }

    /* Body-padding = nur Top-Bar (8u = 112px), kein Ticker */
    html {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding-top: calc(8 * var(--u)) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        background-color: var(--color-olive-900, #050A05) !important;
        background-image:
            repeating-linear-gradient(
                0deg,
                rgba(0,255,65,0.08) 0px,
                rgba(0,255,65,0.08) 1px,
                transparent 1px,
                transparent calc(2 * var(--u))
            ),
            repeating-linear-gradient(
                90deg,
                rgba(0,255,65,0.08) 0px,
                rgba(0,255,65,0.08) 1px,
                transparent 1px,
                transparent calc(2 * var(--u))
            ) !important;
    }


    /* ─── 1. TOP-BAR ──────────────────────────────────
       8u hoch (112px bei 14u), #003300, Shadow 0.25u, 0-Padding
       ─────────────────────────────────────────────── */
    .site-header .main-header-content {
        height: calc(8 * var(--u)) !important;
        background-color: #000000 !important;
        border-bottom: 1px solid rgba(0,255,65,0.35) !important;
        box-shadow: 0 0 16px rgba(0,255,65,0.06) !important;
        padding: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Logo ausblenden */
    .site-header .logo-link {
        display: none !important;
    }

    /* Theme-Toggle auf Mobile ausblenden */
    .site-header .header-controls,
    .theme-toggle-button,
    #theme-toggle-button {
        display: none !important;
    }

    /* Inner Group: nimmt restlichen Platz als Flex-Item */
    .site-header .header-inner-group {
        flex: 1 !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        overflow: hidden !important;
    }

    /* Nav-Container — überschreibt main.css @768px (position: absolute; top: 75px) */
    .site-header .main-nav {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        z-index: auto !important;
    }

    /* ─── NAV-LISTE ─────────────────────────────────
       Alle 6 Icons gleichmäßig verteilt, kein Umbruch
       Gap: 0 — Flex-Distribution übernimmt Spacing
       ─────────────────────────────────────────────── */
    .site-header .main-nav ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        align-items: flex-start !important;
        list-style: none !important;
        margin: calc(1 * var(--u)) 0 0 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* NAV-ITEM: flex:1 = exakt 1/6 Breite, kein max-width — garantiert symmetrische Verteilung */
    .site-header .main-nav li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Nav-Link */
    .site-header .main-nav li a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 0 6px 0 !important;
        min-height: unset !important;
        border-radius: 0 !important;
        border-bottom: none !important;
        text-decoration: none !important;
    }

    /* ─── ICON-BOX ──────────────────────────────────
       Spec: 5u × 5u (120px). Auf kleinen Phones:
       min(5u, 14vw) = 54px bei 390px — alle 6 sichtbar
       ─────────────────────────────────────────────── */
    .site-header .main-nav li a::before {
        content: '' !important;
        display: block !important;
        width: min(calc(4.5 * var(--u)), 14vw) !important;
        height: min(calc(4.5 * var(--u)), 14vw) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        border-radius: 6px !important;
        background-color: transparent !important;
        border: none !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Icon-Bilder: in mobile-nav-icons-bg.css (async geladen) */
    /* border-radius für HOME-Icon bleibt hier */
    .site-header .main-nav li:nth-child(1) a::before {
        border-radius: 50% !important;
    }

    /* ─── LABEL ─────────────────────────────────────
       Spec: 30px in 2u Raum.
       Auf kleinen Phones: min(30px, 3.5vw) ≈ 14px bei 390px
       ─────────────────────────────────────────────── */
    .site-header .main-nav li a span {
        font-size: min(7px, 2.5vw) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        color: rgba(0,255,65,0.5) !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
        letter-spacing: 0.08em !important;
        margin-top: 0 !important;
        font-family: var(--font-heading, 'Orbitron', monospace) !important;
        height: min(calc(2 * var(--u)), 6vw) !important;
        opacity: 0;
    }

    /* Separator-Striche entfernen */
    .site-header .main-nav li:not(:last-child)::after {
        display: none !important;
    }

    /* Register (7. Item) ausblenden */
    .site-header .main-nav li:nth-child(7) {
        display: none !important;
    }

    /* Hover / Active */
    .site-header .main-nav li a.active span,
    .site-header .main-nav li a[aria-current="page"] span {
        color: #fff !important;
        animation: nav-letter-expand 0.40s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
    }

    /* Hover: kein Effekt */
    .site-header .main-nav li a:hover::before {
        filter: none !important;
    }

    /* Aktiv: nur Label leuchtet */
    .site-header .main-nav li a.active span,
    .site-header .main-nav li a[aria-current="page"] span {
        color: #00FF41 !important;
        text-shadow: 0 0 8px rgba(0,255,65,0.7) !important;
    }


    /* ─── 2. MAIN CONTENT & CARD ───────────────────
       3u (72px) Abstand oben/unten
       Card: 6px Rahmen #003300, radius 12px
       ─────────────────────────────────────────────── */
    .site-main {
        flex: 1 0 auto !important;
        padding-top: calc(2 * var(--space)) !important;
        padding-bottom: calc(2 * var(--space)) !important;
    }

    .site-main .container {
        width: calc(100% - calc(4 * var(--space))) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: calc(0.25 * var(--u)) solid #003300 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Seiten-Sections: Padding und Margin entfernen */
    .site-main .container section,
    .site-main .container .hero-section,
    .site-main .container .about-me-section,
    .site-main .container .page-content-centered {
        padding: 0 !important;
        margin: 0 !important;
        min-height: unset !important;
    }

    /* Bild-Bereich: 1u Padding oben + seitlich */
    .hero-image-wrapper {
        padding: var(--u) var(--u) 0 var(--u) !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Bild: kein Border-Radius, kein Schatten */
    .hero-image,
    .hero-image-wrapper img,
    .hero-image-wrapper picture img {
        width: 100% !important;
        max-width: calc(37 * var(--u)) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Text: 1u oben, 1.5u seitlich, 2u unten */
    .hero-content {
        padding: var(--u) calc(1.5 * var(--u)) calc(2 * var(--u)) !important;
        max-width: none !important;
        text-align: left !important;
        margin: 0 !important;
    }


    /* ─── 3. SEITEN-KARTEN (video, audio, games, kontakt, gallery)
       .card wird transparent — outer .container ist die visuelle Karte
       Gleiche Farben, Abstände und Schriften wie Home
       ─────────────────────────────────────────────────────────── */

    /* Grid/Col: reiner Block-Fluss, keine Offsets */
    .site-main .container .grid,
    .site-main .container [class*="col-"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Container-Utility-Klassen neutralisieren */
    .site-main .container.mt-12,
    .site-main .container.mb-16 {
        margin: 0 auto !important;
    }

    /* Card: transparent — outer .container übernimmt das visuelle Rahmen */
    .site-main .container .card {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }
    .site-main .container .card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Card-Header: konsistente Typografie auf allen Seiten */
    .site-main .container .card__header {
        padding: calc(var(--u) * 1.5) calc(var(--u) * 1.5) var(--u) !important;
        border-bottom: 1px solid #003300 !important;
        background: transparent !important;
        text-align: left !important;
    }
    .site-main .container .card__title,
    .site-main .container .card__header h1 {
        font-family: var(--font-heading, 'Orbitron', monospace) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #43DF43 !important;
        line-height: 1.2 !important;
        margin: 0 0 calc(var(--u) * 0.5) !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }
    .site-main .container .card__subtitle {
        font-family: var(--font-primary, 'Share Tech Mono', monospace) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #078807 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        letter-spacing: 0.06em !important;
    }

    .site-main .container .card__meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        margin-top: calc(var(--u) * 0.75) !important;
    }
    .site-main .container .card__tag {
        color: #078807 !important;
        border-color: rgba(7, 136, 7, 0.40) !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    .site-main .container .card__title-row {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    .site-main .container .card__update {
        font-size: 10px !important;
        color: rgba(0, 255, 65, 0.28) !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Card-Body: kein eigenes Padding */
    .site-main .container .card__body {
        padding: 0 !important;
        text-align: left !important;
    }

    /* Bild: flush, kein Radius, kein Schatten — wie hero-image */
    .site-main .container .card__body img,
    .site-main .container .card__body picture img {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
        margin: 0 !important;
    }

    /* Email-Overlay (Kontakt-Seite): zentriert mit Padding */
    .site-main .container .card__body .email-overlay {
        padding: calc(var(--space) * 1.5) calc(var(--space) * 1.5) 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Text-Wrapper: gleiche Padding wie hero-content */
    .site-main .container .card__body > div:not(.email-overlay) {
        padding: var(--u) calc(var(--u) * 1.5) calc(var(--u) * 2) !important;
        text-align: left !important;
    }

    /* h1: CRT-Grün, 20px — 8dp: line-height 24px, kein Abstand nach unten */
    .site-main .container .card__body h1,
    .site-main .container .card__body .text-4xl {
        font-size: 20px !important;
        font-family: var(--font-heading, 'Orbitron', monospace) !important;
        color: #43DF43 !important;
        font-weight: 700 !important;
        line-height: 24px !important;
        margin-bottom: 0 !important;
    }

    /* Paragraphen: 15px — 8dp: line-height 24px, margin-bottom 16px */
    .site-main .container .card__body p,
    .site-main .container .card__body .text-lg {
        font-size: 15px !important;
        font-family: var(--font-primary, 'Share Tech Mono', monospace) !important;
        color: #078807 !important;
        line-height: 24px !important;
        margin-bottom: 16px !important;
    }
    .site-main .container .card__body p:last-child {
        margin-bottom: 0 !important;
    }
    /* Überschriften-p (nur <strong>) — kein Abstand nach unten */
    .site-main .container .card__body p:has(> strong:only-child) {
        margin-bottom: 0 !important;
    }
    .site-main .container .card__body p strong {
        color: #43DF43 !important;
        font-weight: 700 !important;
    }

    /* Utility mb-Klassen normalisieren */
    .site-main .container .card__body .mb-4,
    .site-main .container .card__body .mb-6,
    .site-main .container .card__body .mb-8 {
        margin-bottom: calc(var(--space)) !important;
    }

    /* Bilder mit mb-Utility-Klassen: Margin entfernen (flush an nächsten Block) */
    .site-main .container .card__body img {
        margin-bottom: 0 !important;
    }

    /* Home: hero-content Textfarben konsistent */
    .hero-content p {
        font-size: 15px !important;
        color: var(--color-neutral-50, #F5F7F4) !important;
        line-height: 1.6 !important;
        margin-bottom: calc(var(--space)) !important;
    }
    .hero-content p.font-medium {
        color: var(--accent-color, #ACC8A2) !important;
        font-weight: 500 !important;
    }
    .hero-content p.text-muted {
        color: rgba(255, 255, 255, 0.5) !important;
    }


    /* ─── 5. FOOTER ────────────────────────────────
       #003300, 1u Padding, 2u pro Item, 3u links
       ─────────────────────────────────────────────── */
    .site-footer {
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: var(--u) 0 var(--u) !important;
        background-color: #000000 !important;
        border-top: 1px solid rgba(0,255,65,0.2) !important;
    }

    .site-footer .footer-content-wrapper {
        display: none !important;
    }

    .site-footer .footer-column {
        display: none !important;
    }

    .mobile-footer-links {
        display: block !important;
        padding-left: calc(3 * var(--u)) !important;
        padding-right: calc(3 * var(--u)) !important;
    }

    .mobile-footer-links ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-footer-links li {
        height: calc(2 * var(--u)) !important;
        display: flex !important;
        align-items: center !important;
        list-style: none !important;
    }

    .mobile-footer-links li::before,
    .mobile-footer-links li::marker {
        display: none !important;
        content: none !important;
    }

    .mobile-footer-links a {
        color: rgba(0,255,65,0.7) !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        font-family: var(--font-heading, 'Orbitron', monospace) !important;
    }

    .mobile-footer-links a:hover {
        color: #ffffff !important;
    }

    /* ─── 6. GALLERY FILTER (images.php) ──────────────
       Horizontales Scroll-Menü — kein Zeilenumbruch
       ─────────────────────────────────────────────── */
    .gallery-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: calc(var(--space)) !important;
        padding: calc(var(--space)) var(--u) !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .gallery-filters::-webkit-scrollbar {
        display: none !important;
    }

    .filter-btn {
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Gallery-Grid: 2-Spalten auf Mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: calc(var(--space)) !important;
        padding: 0 calc(var(--space)) calc(var(--space)) !important;
    }

} /* end @media 768px */


/* ════════════════════════════════════════════════════
   NACHT-GALERIE — Design Enhancement v2.0
   Atmosphäre, Typografie, Seitenidentität
   ════════════════════════════════════════════════════ */

@keyframes m-fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nav-letter-expand {
    0%   { opacity: 0; letter-spacing: 0.22em; }
    100% { opacity: 1; letter-spacing: 0.02em; }
}

@media (max-width: 768px) {

    /* ─── CONTAINER: Premium-Atmosphäre ──────────────
       Tiefes Olive als Kartenhintergrund, Sage-Rand,
       mehrstufige Schatten für Tiefenwirkung
       ─────────────────────────────────────────────── */
    .site-main .container {
        background: rgba(5, 10, 5, 0.95) !important;
        border: 1px solid #003300 !important;
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.8),
            0 12px 40px rgba(0, 0, 0, 0.7),
            0 0 30px rgba(0,255,65,0.03),
            inset 0 1px 0 rgba(0,255,65,0.06) !important;
        animation: m-fadeUp 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
    }

    /* ─── HERO-BILD: Gradient-Vignette unten ─────────
       Erzeugt nahtlichen Übergang Bild → Textbereich
       ─────────────────────────────────────────────── */
    .hero-image-wrapper {
        position: relative !important;
    }
    .hero-image-wrapper::after {
        content: '' !important;
        position: absolute !important;
        inset: auto 0 0 0 !important;
        height: 48% !important;
        background: linear-gradient(to bottom, transparent, rgba(5, 10, 5, 0.92)) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* ─── CARD-BILD: Gradient-Vignette (Videos etc.) ─
       picture-Element als Overlay-Träger
       ─────────────────────────────────────────────── */
    .site-main .container .card__body picture {
        position: relative !important;
        display: block !important;
    }
    .site-main .container .card__body picture::after {
        content: '' !important;
        position: absolute !important;
        inset: auto 0 0 0 !important;
        height: 52% !important;
        background: linear-gradient(to bottom, transparent, rgba(5, 10, 5, 0.9)) !important;
        pointer-events: none !important;
    }

    /* ─── TYPOGRAFIE: Verbessertes Heading-System ─────
       H1 größer, engeres Tracking → editorielles Gefühl
       ─────────────────────────────────────────────── */
    .site-main .container .card__body h1,
    .site-main .container .card__body .text-4xl {
        font-size: 22px !important;
        letter-spacing: -0.025em !important;
        line-height: 1.2 !important;
        margin-bottom: 14px !important;
    }

    /* Paragraphen: mehr Zeilenabstand für Lesefluss */
    .site-main .container .card__body p,
    .site-main .container .card__body .text-lg,
    .hero-content p {
        line-height: 1.75 !important;
        letter-spacing: 0.01em !important;
    }

    /* Hero-Text Abstand zum Bild */
    .hero-content {
        padding-top: calc(var(--u) * 1.2) !important;
    }


    /* ─── SEITEN-IDENTITÄT: Per-Page Akzentfarben ─────
       Jede Seite bekommt ein eigenes Farbklima.
       Amber=cineastisch, Cyan=klanglich, Sage=spielerisch
       ─────────────────────────────────────────────── */

    /* VIDEOS: Warmes Amber / Filmgold */
    .site-main[data-page="videos"] .container {
        border-color: rgba(200, 168, 75, 0.22) !important;
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.6),
            0 12px 40px rgba(0,0,0,0.55),
            0 0 60px rgba(200, 168, 75, 0.04),
            inset 0 1px 0 rgba(200, 168, 75, 0.06) !important;
    }
    .site-main[data-page="videos"] .card__body h1 {
        color: #F84444 !important;
    }
    .site-main[data-page="videos"] .card__body p {
        color: #CE1212 !important;
    }


    /* MUSIC: Kühles Cyan / Raumklang */
    .site-main[data-page="music"] .container {
        border-color: rgba(106, 155, 175, 0.22) !important;
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.6),
            0 12px 40px rgba(0,0,0,0.55),
            0 0 60px rgba(106, 155, 175, 0.04),
            inset 0 1px 0 rgba(106, 155, 175, 0.06) !important;
    }
    .site-main[data-page="music"] .card__body h1 {
        color: #7DE0E8 !important;
    }
    .site-main[data-page="music"] .card__body p {
        color: #38C6D2 !important;
    }


    /* GAMES: Helles Sage / Energetisch */
    .site-main[data-page="games"] .container {
        border-color: rgba(201, 222, 197, 0.25) !important;
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.6),
            0 12px 40px rgba(0,0,0,0.55),
            0 0 60px rgba(172, 200, 162, 0.05),
            inset 0 1px 0 rgba(201, 222, 197, 0.08) !important;
    }
    .site-main[data-page="games"] .card__body h1 {
        color: #DF43DF !important;
    }
    .site-main[data-page="games"] .card__body p {
        color: #A224A2 !important;
    }


    /* ─── HOME: Gelb-Töne für card__body ─────────────── */
    .site-main[data-page="home"] .card__body h1 {
        color: #FDF630 !important;
    }
    .site-main[data-page="home"] .card__body p {
        color: #C5BF0C !important;
    }
    .site-main[data-page="home"] .card__body p strong {
        color: #FDF630 !important;
    }


    /* ─── KONTAKT: Email-CTA als Haupt-Aktion ─────────
       Glassmorphism-Button, volle Breite, einladend
       ─────────────────────────────────────────────── */
    .site-main[data-page="contact"] .email-overlay {
        padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5) calc(var(--u) * 0.8) !important;
    }
    .site-main[data-page="contact"] .email-overlay .btn {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        font-size: 13px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        padding: 15px 20px !important;
        border-radius: 4px !important;
        background: rgba(0,255,65,0.08) !important;
        border: 1px solid rgba(0,255,65,0.35) !important;
        color: #00FF41 !important;
        font-weight: 400 !important;
        font-family: var(--font-heading, 'Orbitron', monospace) !important;
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
        min-height: 52px !important;
    }
    .site-main[data-page="contact"] .email-overlay .btn:active {
        background: rgba(0,255,65,0.15) !important;
        border-color: rgba(0,255,65,0.6) !important;
        box-shadow: 0 0 12px rgba(0,255,65,0.25) !important;
    }

    /* Kontakt H1 nach Email-Overlay: leicht kleiner als Eyebrow */
    .site-main[data-page="contact"] .card__body h1 {
        font-size: 20px !important;
        margin-top: 6px !important;
    }

    /* ─── GALLERY FILTER: Pill-Design, Scroll-Snapping ─ */
    .gallery-filters {
        padding: 10px calc(var(--u) * 1.2) 8px !important;
        gap: 7px !important;
    }
    .filter-btn {
        border-radius: 2px !important;
        background: rgba(0,255,65,0.05) !important;
        border: 1px solid rgba(0,255,65,0.2) !important;
        color: rgba(0,255,65,0.55) !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        font-family: var(--font-heading, 'Orbitron', monospace) !important;
        padding: 7px 14px !important;
        min-height: 34px !important;
        transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
    }
    .filter-btn.active {
        background: rgba(0,255,65,0.12) !important;
        border-color: rgba(0,255,65,0.5) !important;
        color: #00FF41 !important;
        box-shadow: 0 0 8px rgba(0,255,65,0.2) !important;
    }
    .filter-btn:active {
        background: rgba(0,255,65,0.15) !important;
    }

    /* ─── GALLERY GRID: Verfeinertes 2-Spalten-Layout ── */
    .gallery-grid {
        gap: 5px !important;
        padding: 4px calc(var(--u) * 0.8) 14px !important;
    }
    .gallery-item {
        border-radius: 2px !important;
        overflow: hidden !important;
        position: relative !important;
        background: rgba(0,255,65,0.04) !important;
        border: 1px solid rgba(0,255,65,0.1) !important;
    }
    .gallery-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.25s ease !important;
    }
    .gallery-item:active img {
        transform: scale(0.96) !important;
    }
    .gallery-item-overlay {
        border-radius: 2px !important;
        background: linear-gradient(to top, rgba(5,10,5,0.8) 0%, transparent 60%) !important;
    }

    /* ─── IMAGES: Amber-Farben für card__body ───────────── */
    .site-main[data-page="images"] .card__body h1 {
        color: #FFB000 !important;
    }
    .site-main[data-page="images"] .card__body p {
        color: #9B6E08 !important;
    }

    /* ─── GALLERY HEADER: Kompakter auf Mobile ────────── */
    .site-main[data-page="images"] .gallery-container .grid {
        margin-bottom: 0 !important;
    }
    .site-main[data-page="images"] h1 {
        font-size: 20px !important;
        color: var(--accent-color, #00FF41) !important;
        text-shadow: 0 0 12px rgba(0,255,65,0.4) !important;
        margin-bottom: 4px !important;
    }
    .site-main[data-page="images"] .gallery-container > .grid p {
        font-size: 13px !important;
        color: rgba(0,255,65,0.45) !important;
        margin-bottom: 0 !important;
    }

    /* ─── FOOTER: CRT-Abgrenzung ─────────────────── */
    .site-footer {
        border-top: 1px solid rgba(0,255,65,0.18) !important;
    }

    /* ─── NAV ACTIVE: CRT Glow ─ */
    .site-header .main-nav li a.active span,
    .site-header .main-nav li a[aria-current="page"] span {
        color: #00FF41 !important;
        text-shadow: 0 0 10px rgba(0,255,65,0.8) !important;
    }

} /* end @media 768px — Design Enhancement v2.0 */


/* ════════════════════════════════════════════════════
   KLEINE PHONES (≤ 480px) — unit auf 10px reduziert
   damit Header kompakter und body-padding kleiner
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --u: 10px;
        --space: 8px;   /* bleibt 8px — Spacing-Unit ist fix */
    }

    /* body-padding = nur Top-Bar (8 × 10px = 80px), kein Ticker */
    body {
        padding-top: calc(8 * var(--u)) !important;
    }

    /* Labels auf kleinen Phones: fluid zwischen 9px und 13px */
    .site-header .main-nav li a span {
        font-size: clamp(6px, 2vw, 7px) !important;
    }
}