/* ==========================================================================
   MR. WHITE — DARK REDESIGN (v6.0.0)
   Globale Dark-Styles: Header, Mega-Menu, Mobile-Nav, Footer, Buttons.
   Lädt NACH main.min.css und überschreibt gezielt die Light-Styles.
   Sektions-Styles der Startseite liegen inline in front-page.php.
   ========================================================================== */

:root {
    --dk-bg:          #05090F;
    --dk-bg-soft:     #0A1119;
    --dk-card:        #0C141D;
    --dk-card-hover:  #101B26;
    --dk-border:      rgba(148, 163, 184, 0.14);
    --dk-border-soft: rgba(148, 163, 184, 0.08);
    --dk-cyan:        #5DBCC8;
    --dk-cyan-bright: #7FD3DE;
    --dk-cyan-soft:   rgba(93, 188, 200, 0.12);
    --dk-cyan-border: rgba(93, 188, 200, 0.35);
    --dk-text:        #E6EDF4;
    --dk-text-body:   rgba(226, 232, 240, 0.72);
    --dk-text-muted:  rgba(148, 163, 184, 0.9);
    --header-height:  84px;
}

/* ==========================================================================
   HEADER — dunkel, schlank, Mono-Navigation
   ========================================================================== */
.site-header {
    background: rgba(5, 9, 15, 0.92) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--dk-border-soft);
    height: var(--header-height);
}
.site-header.is-scrolled {
    background: rgba(5, 9, 15, 0.97) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* Logo: dunkle Wortmarke → weiß invertieren */
.nav__logo-img,
.nav__mobile-logo img {
    filter: brightness(0) invert(1);
    height: 42px;
    width: auto;
}
.nav__logo-text,
.nav__mobile-logo span {
    color: #FFFFFF;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}

/* Nav-Links: klein, uppercase, Mono-Touch */
.nav__menu { gap: 34px; }
.nav__link {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
    transition: color 0.2s ease;
}
.nav__link:hover { color: #FFFFFF; }
.nav__link.active { color: var(--dk-cyan); }
.nav__link.active:hover { color: var(--dk-cyan-bright); }

/* Header-CTA: Outline mit Glow-Hover (Markenstil) */
.nav__link--cta.btn.btn-primary {
    background: transparent;
    color: #FFFFFF;
    border: 2px solid var(--dk-border);
    border-radius: 6px;
    padding: 12px 22px;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.nav__link--cta.btn.btn-primary:hover {
    background: transparent;
    border-color: var(--dk-cyan);
    color: var(--dk-cyan);
    box-shadow: 0 0 24px rgba(93, 188, 200, 0.25);
}

/* Burger */
.burger-line { background: #FFFFFF; }

/* Chevron im Mega-Trigger erbt Linkfarbe automatisch */

/* ==========================================================================
   MEGA MENU — dunkel
   ========================================================================== */
.mega-menu {
    background: #070D14;
    border-top: 1px solid var(--dk-border-soft);
    border-bottom: 1px solid var(--dk-border-soft);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}
.mega-col__label {
    color: var(--dk-cyan);
}
.mega-link { border-radius: 10px; }
.mega-link:hover { background: rgba(93, 188, 200, 0.07); }
.mega-link__title { color: var(--dk-text); }
.mega-link__desc { color: var(--dk-text-muted); }
.mega-link__icon {
    background: var(--dk-cyan-soft);
    color: var(--dk-cyan);
    border: 1px solid var(--dk-border-soft);
}
.mega-link__icon svg { stroke: var(--dk-cyan); }
.mega-link__arrow { color: var(--dk-cyan); }
.mega-col__all-link { color: var(--dk-cyan); }
.mega-col__all-link:hover { color: var(--dk-cyan-bright); }
.mega-col--featured {
    background: var(--dk-card);
    border: 1px solid var(--dk-border);
    border-radius: 14px;
}
.mega-featured__eyebrow { color: var(--dk-cyan); }
.mega-featured__title { color: var(--dk-text); }
.mega-featured__text { color: var(--dk-text-body); }
.mega-stat__num { color: var(--dk-cyan); }
.mega-stat__label { color: var(--dk-text-muted); }
.mega-featured__phone { color: var(--dk-text-muted); }

/* ==========================================================================
   MOBILE OVERLAY — dunkel
   ========================================================================== */
.nav__mobile-overlay { background: rgba(3, 6, 10, 0.98); }
.nav__mobile a { color: var(--dk-text); }
.nav__mobile a:hover { color: var(--dk-cyan); }
.nav__mobile-sub > span { color: var(--dk-cyan); }
.nav__mobile-sub ul a { color: var(--dk-text-body); }
.nav__mobile-close { color: #FFFFFF; }
.nav__mobile-header { border-bottom: 1px solid var(--dk-border-soft); }

/* ==========================================================================
   BUTTONS — Dark-Varianten (für dunkle Sektionen)
   ========================================================================== */
.btn-dk-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--dk-cyan);
    color: #05090F;
    border: 2px solid var(--dk-cyan);
    border-radius: 6px;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.btn-dk-primary:hover {
    background: var(--dk-cyan-bright);
    border-color: var(--dk-cyan-bright);
    box-shadow: 0 0 32px rgba(93, 188, 200, 0.35);
    transform: translateY(-1px);
    color: #05090F;
}
.btn-dk-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    background: transparent;
    color: #FFFFFF;
    border: 2px solid var(--dk-border);
    border-radius: 6px;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-dk-outline:hover {
    border-color: var(--dk-cyan);
    color: var(--dk-cyan);
    box-shadow: 0 0 24px rgba(93, 188, 200, 0.2);
}
/* Light-Sektionen: Outline-Variante auf hellem Grund */
.btn-lt-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    background: transparent;
    color: var(--color-text-heading, #0F172A);
    border: 2px solid var(--color-border-strong, #CBD5E1);
    border-radius: 6px;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-lt-outline:hover {
    border-color: var(--color-accent, #1B3740);
    color: var(--color-accent, #1B3740);
    box-shadow: 0 0 20px rgba(27, 55, 64, 0.12);
}

/* Eyebrow-Label (Markenelement "— LABEL") */
.dk-eyebrow {
    display: inline-block;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dk-cyan);
    margin-bottom: 20px;
}
.dk-eyebrow::before { content: '— '; }
.lt-eyebrow {
    display: inline-block;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent, #1B3740);
    margin-bottom: 20px;
}
.lt-eyebrow::before { content: '— '; }

/* ==========================================================================
   FOOTER — dunkel
   ========================================================================== */
.site-footer {
    background: #04070C !important;
    border-top: 1px solid var(--dk-border-soft);
}
.footer__main { padding: 90px 0 60px; }
.footer__logo { filter: brightness(0) invert(1); }
.footer__logo-text { color: #FFFFFF; }
.footer__desc { color: var(--dk-text-body); }
.footer__hashtags { display: none; }
.footer__col-title {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
}
.footer__links a,
.footer__contact a,
.footer__contact span,
.footer__contact li {
    color: var(--dk-text-body);
}
.footer__links a:hover,
.footer__contact a:hover { color: var(--dk-cyan); }
.footer__contact svg { color: var(--dk-cyan); stroke: var(--dk-cyan); }
.footer__social-link {
    background: var(--dk-card);
    border: 1px solid var(--dk-border);
    color: var(--dk-text-muted);
}
.footer__social-link:hover {
    background: var(--dk-cyan-soft);
    border-color: var(--dk-cyan-border);
    color: var(--dk-cyan);
}
.footer__regions {
    background: #04070C;
    border-top: 1px solid var(--dk-border-soft);
}
.footer__regions-label { color: var(--dk-cyan); }
.footer__regions-link,
.footer__regions-text { color: var(--dk-text-body); }
.footer__regions-link:hover .footer__regions-text { color: var(--dk-cyan); }
.footer__bottom {
    background: #030509;
    border-top: 1px solid var(--dk-border-soft);
}
.footer__copyright { color: var(--dk-text-muted); }
.footer__bottom-nav a { color: var(--dk-text-muted); }
.footer__bottom-nav a:hover { color: var(--dk-cyan); }
.footer__bottom-nav span { color: rgba(148, 163, 184, 0.4); }

/* ==========================================================================
   Reveal-Animationen (falls main.js .reveal nutzt) bleiben unverändert
   ========================================================================== */