/* ============================================================
   main.css — Gemeinsame Stile für alle Seiten
   KFZ Wolfram
   ============================================================ */

/* ── Fonts ── */
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-latin-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-latin-900-italic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* ── Reset & CSS-Variablen ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --yellow: #F5C400;
    --dark:   #111111;
    --darker: #0a0a0a;
    --mid:    #1c1c1c;
    --surface:#242424;
    --white:  #f0ede8;
    --gray:   #888880;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Barlow', sans-serif;
    background: var(--dark);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Header / Navigation ── */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    height: 60px;
    border-bottom: 1px solid rgba(245,196,0,0.2);
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(16px);
}

.nav-logo {
    display: flex;
    align-items: center;
    padding: 0 32px;
    border-right: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
}

.nav-logo-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
}

.nav-logo-text span { color: var(--yellow); }

/* ── Footer ── */
footer {
    background: var(--darker);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 40px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
}

.footer-logo span { color: var(--yellow); }

footer p {
    font-size: 12px;
    font-weight: 300;
    color: var(--gray);
    letter-spacing: 0.04em;
}

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.28s; }
.reveal-d4 { transition-delay: 0.38s; }
.reveal-d5 { transition-delay: 0.48s; }
.reveal-d6 { transition-delay: 0.58s; }

/* ── Zugänglichkeit ── */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Responsive (gemeinsam) ── */
@media (max-width: 768px) {
    footer { flex-direction: column; gap: 16px; text-align: center; padding: 32px 24px; }
    .nav-logo { padding: 0 20px; }
}