/*
Theme Name:  Autohaus Uhlenkötter
Theme URI:   https://uhlenkotter.de
Author:      Autohaus Uhlenkötter
Description: Custom Theme für KFZ-Werkstatt – Oldtimer & Neufahrzeuge
Version:     1.0
Text Domain: uhlenkotter
*/

/*
 * ============================================================
 *  Autohaus Uhlenkötter – Hauptstylesheet
 *  Projekt:   KFZ-Werkstatt (Oldtimer & Neufahrzeuge)
 *  Stimmung:  Technisch, Kühles Blau-Grau
 *  Autor:     Claude (Anthropic) – generiert nach Briefing
 *  Stand:     2025
 * ============================================================
 *
 *  Inhaltsverzeichnis
 *  ------------------
 *  1.  CSS-Variablen (:root)
 *  2.  Reset & Basisstile
 *  3.  Typografie
 *  4.  Layout – Sektionen & .half
 *  5.  Flexbox-Spalten (wXX-Klassen)
 *  6.  Header (#siteheader)
 *  7.  Navigation
 *  8.  Vollbild-Sektion
 *  9.  Footer (#sitefooter)
 * 10.  Animationen / Fade-in
 * 11.  Responsive – Breakpoint 500 px
 * ============================================================
 */


/* ============================================================
   1. CSS-VARIABLEN
   ============================================================ */
:root {

    /* --- Farben (Kühles Blau-Grau) --- */
    --color-primary:        #1E3A5F;   /* Navy – Hauptfarbe           */
    --color-primary-light:  #2C5282;   /* Mittelblau – Hover/Akzent   */
    --color-secondary:      #4A6FA5;   /* Slate-Blau – Highlights     */
    --color-steel:          #8DA9C4;   /* Stahlblau – Dekorelement    */
    --color-bg:             #F5F7FA;   /* Hellgrau-Weiß – Seitenbg    */
    --color-bg-alt:         #E8EDF3;   /* Leicht getöntes Weiß        */
    --color-bg-dark:        #0D1F33;   /* Tiefes Navy – Footer/Hero   */
    --color-text:           #1A2B3C;   /* Fast-Schwarz – Fließtext    */
    --color-text-light:     #4A5568;   /* Mittelgrau – Sekundärtext   */
    --color-text-inverted:  #F0F4F8;   /* Helles Weiß – auf dunkel    */
    --color-accent:         #5BA4D4;   /* Hellblau – CTAs, Links      */
    --color-border:         #CBD5E0;   /* Rahmenfarbe                 */
    --color-white:          #FFFFFF;
    --color-overlay:        rgba(13, 31, 51, 0.62); /* Hero-Overlay   */

    /* --- Typografie --- */
    /* Headlines: Barlow Condensed – schmal, kraftvoll, technisch     */
    /* Fließtext: IBM Plex Sans – klare Lesbarkeit, technischer Touch */
    --font-headline:        'Barlow Condensed', sans-serif;
    --font-body:            'IBM Plex Sans', sans-serif;

    /*
     * Fluid Skalierung: clamp(min, bevorzugt, max)
     * Breakpoint-Bereich: 500 px – 2000 px
     * Stufensprung: Goldener Schnitt ≈ 1.618
     *
     * Basis (--fs-base):   ~1.0 rem  → alle Stufen relativ dazu
     *
     * Stufen:
     *   xs  : ÷1.618  ≈ 0.618 rem
     *   sm  : ÷1.272  ≈ 0.786 rem (√Goldener Schnitt)
     *   base: 1.000 rem
     *   md  : ×1.272  ≈ 1.272 rem
     *   lg  : ×1.618  ≈ 1.618 rem
     *   xl  : ×2.618  ≈ 2.618 rem
     *   2xl : ×4.236  ≈ 4.236 rem
     *   3xl : ×6.854  ≈ 6.854 rem
     */
    --fs-xs:    clamp(0.55rem,  calc(0.50rem + 0.20vw), 0.70rem);
    --fs-sm:    clamp(0.75rem,  calc(0.68rem + 0.27vw), 0.90rem);
    --fs-base:  clamp(0.90rem,  calc(0.80rem + 0.40vw), 1.10rem);
    --fs-md:    clamp(1.10rem,  calc(0.95rem + 0.60vw), 1.40rem);
    --fs-lg:    clamp(1.30rem,  calc(1.10rem + 0.93vw), 1.90rem);
    --fs-xl:    clamp(1.70rem,  calc(1.30rem + 1.60vw), 2.80rem);
    --fs-2xl:   clamp(2.20rem,  calc(1.60rem + 2.40vw), 4.20rem);
    --fs-3xl:   clamp(2.80rem,  calc(1.80rem + 4.00vw), 6.50rem);

    /* Zeilenhöhen (Goldener Schnitt) */
    --lh-body:       1.618;
    --lh-headline:   1.18;

    /* --- Layout --- */
    --max-width:     2000px;           /* .half – maximale Breite     */
    --padding-section: 2rem;           /* Sektion oben/unten          */
    --padding-col:   1.5rem;           /* Spalten links/rechts        */
    --header-height: 80px;

    /* --- Transitions --- */
    --transition:    0.3s ease;
    --transition-slow: 0.6s ease;
}


/* ============================================================
   2. RESET & BASISSTILE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:    var(--font-body);
    font-size:      var(--fs-base);
    line-height:    var(--lh-body);
    color:          var(--color-text);
    background:     var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

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

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

ul {
    list-style: none;
}


/* ============================================================
   3. TYPOGRAFIE
   ============================================================ */

/* --- Google Fonts Import (in functions.php oder wp_head einbinden) ---
   @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
*/

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-headline);
    font-weight:    700;
    line-height:    var(--lh-headline);
    color:          var(--color-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl);  }
h4 { font-size: var(--fs-lg);  }
h5 { font-size: var(--fs-md);  }
h6 { font-size: var(--fs-base); }

p {
    font-size:      var(--fs-base);
    line-height:    var(--lh-body);
    margin-bottom:  1.2rem;
    color:          var(--color-text);
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: 600;
}

small, .text-sm {
    font-size: var(--fs-sm);
}

.text-xs     { font-size: var(--fs-xs);   }
.text-lg     { font-size: var(--fs-lg);   }
.text-inverted { color: var(--color-text-inverted); }
.text-light  { color: var(--color-text-light); }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }


/* ============================================================
   4. LAYOUT – SEKTIONEN & .half
   ============================================================ */

/* Jede Sektion spannt die volle Breite */
section.full,
.full {
    width:      100%;
    display:    block;
}

/* .half begrenzt den Inhalt und zentriert ihn */
.half {
    max-width:      var(--max-width);
    margin-left:    auto;
    margin-right:   auto;
    padding-left:   var(--padding-section);
    padding-right:  var(--padding-section);
    display:        flex;
    flex-wrap:      wrap;
    align-items:    flex-start;
}

section .half {
    padding-top:    var(--padding-section);
    padding-bottom: var(--padding-section);
}

/* Sektions-Hintergründe wechseln */
section.full:nth-of-type(even) {
    background: var(--color-bg-alt);
}

section.full:nth-of-type(odd) {
    background: var(--color-bg);
}


/* ============================================================
   5. FLEXBOX-SPALTEN (wXX-Klassen)
   ============================================================ */

/* Alle Spalten: Padding separat steuerbar */
.w25, .w33, .w50, .w66, .w75, .w100 {
    padding:    var(--padding-col);
    min-width:  0; /* verhindert Overflow bei langen Inhalten */
}

.w25  { flex: 0 0 25%;  width: 25%;  }
.w33  { flex: 0 0 33.333%; width: 33.333%; }
.w50  { flex: 0 0 50%;  width: 50%;  }
.w66  { flex: 0 0 66.666%; width: 66.666%; }
.w75  { flex: 0 0 75%;  width: 75%;  }
.w100 { flex: 0 0 100%; width: 100%; }


/* ============================================================
   6. HEADER (#siteheader)
   ============================================================ */
#siteheader {
    position:           sticky;
    top:                0;
    left:               0;
    right:              0;
    z-index:            1000;
    height:             var(--header-height);
    background:         transparent;          /* Start: transparent  */
    transition:         background var(--transition),
                        box-shadow var(--transition);
}

/* Klasse wird per jQuery gesetzt, sobald gescrollt wird */
#siteheader.scrolled {
    background:     var(--color-bg-dark);
    box-shadow:     0 2px 16px rgba(0, 0, 0, 0.25);
}

/* Wenn kein Vollbild-Hero darunter: sofort solide Hintergrundfarbe */
#siteheader.solid {
    background: var(--color-bg-dark);
}

#siteheader .half {
    height:         var(--header-height);
    align-items:    center;
    justify-content: space-between;
    padding-top:    0;
    padding-bottom: 0;
    flex-wrap:      nowrap;
}

/* --- Logo --- */
.logo {
    display:        inline-block;
    height:         calc(var(--header-height) * 0.6);
    flex-shrink:    0;
}

.logo img {
    height:     100%;
    width:      auto;
}

/* ACF-Feld: site_logo – wird per Template ausgegeben */
/* Fallback-Text, falls kein Bild gesetzt ist */
.logo::after {
    content:        attr(data-name);
    font-family:    var(--font-headline);
    font-size:      var(--fs-xl);
    font-weight:    800;
    color:          var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display:        block;
    line-height:    1;
}


/* ============================================================
   7. NAVIGATION
   ============================================================ */
nav {
    display:    flex;
    align-items: center;
}

ul.first-navigation {
    display:        flex;
    gap:            0;
    align-items:    center;
}

ul.first-navigation li {
    position: relative;
}

ul.first-navigation li a {
    display:        block;
    padding:        0.5rem 1rem;
    font-family:    var(--font-headline);
    font-size:      var(--fs-sm);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text-inverted);
    transition:     color var(--transition);
    white-space:    nowrap;
}

ul.first-navigation li a:hover,
ul.first-navigation li.current-menu-item a {
    color: var(--color-accent);
}

/* Trennlinie zwischen Nav-Items */
ul.first-navigation li + li::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        30%;
    height:     40%;
    width:      1px;
    background: var(--color-steel);
    opacity:    0.4;
}


/* ============================================================
   8. VOLLBILD-SEKTION (Hero)
   ============================================================ */
section.full.hero,
section.full.fullscreen {
    position:           relative;
    width:              100%;
    min-height:         100vh;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    overflow:           hidden;
    background:         var(--color-bg-dark);  /* Fallback */
}

/* Hintergrundbild über ACF-Feld (background-image inline per PHP) */
section.full.hero .hero-bg,
section.full.fullscreen .fullscreen-bg {
    position:   absolute;
    inset:      0;
    background-size:    cover;
    background-position: center;
    background-repeat:  no-repeat;
    z-index:    0;
    transition: transform 0.8s ease;
}

/* Parallax-Effekt (leicht – per jQuery gesteuert) */
section.full.hero:hover .hero-bg {
    transform: scale(1.02);
}

/* Dunkles Overlay */
section.full.hero::after,
section.full.fullscreen::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--color-overlay);
    z-index:    1;
}

section.full.hero .half,
section.full.fullscreen .half {
    position:   relative;
    z-index:    2;
    padding-top:    calc(var(--header-height) + var(--padding-section));
    padding-bottom: var(--padding-section);
    flex-direction: column;
    align-items:    flex-start;
    justify-content: center;
    min-height:     100vh;
}

section.full.hero h1,
section.full.fullscreen h1 {
    color:      var(--color-white);
    max-width:  60rem;
    margin-bottom: 1rem;
}

section.full.hero p,
section.full.fullscreen p {
    color:      var(--color-text-inverted);
    font-size:  var(--fs-md);
    max-width:  42rem;
    margin-bottom: 2rem;
}

/* CTA-Button im Hero */
.btn,
a.btn {
    display:        inline-block;
    font-family:    var(--font-headline);
    font-size:      var(--fs-md);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding:        0.75rem 2rem;
    background:     var(--color-primary-light);
    color:          var(--color-white);
    border:         2px solid var(--color-primary-light);
    transition:     background var(--transition),
                    color var(--transition),
                    border-color var(--transition);
    cursor:         pointer;
}

.btn:hover,
a.btn:hover {
    background:     transparent;
    color:          var(--color-white);
    border-color:   var(--color-white);
}

.btn-outline,
a.btn-outline {
    background:     transparent;
    border-color:   var(--color-accent);
    color:          var(--color-accent);
}

.btn-outline:hover,
a.btn-outline:hover {
    background:     var(--color-accent);
    color:          var(--color-white);
}


/* ============================================================
   9. FOOTER (#sitefooter)
   ============================================================ */
#sitefooter {
    background: var(--color-bg-dark);
    color:      var(--color-text-inverted);
    width:      100%;
}

#sitefooter .half {
    padding-top:    calc(var(--padding-section) * 2);
    padding-bottom: var(--padding-section);
    flex-wrap:      wrap;
    align-items:    flex-start;
}

/* 4 Spalten im Footer */
#sitefooter .w25 {
    flex: 0 0 25%;
    width: 25%;
}

/* Footer-Spalteninhalt */
#sitefooter h3,
#sitefooter h4 {
    font-family:    var(--font-headline);
    font-size:      var(--fs-md);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-steel);
    margin-bottom:  0.75rem;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid rgba(141, 169, 196, 0.25);
}

#sitefooter p,
#sitefooter address {
    font-size:      var(--fs-sm);
    line-height:    var(--lh-body);
    color:          rgba(240, 244, 248, 0.75);
    font-style:     normal;
}

#sitefooter ul li {
    margin-bottom: 0.4rem;
}

#sitefooter ul li a {
    font-size:  var(--fs-sm);
    color:      rgba(240, 244, 248, 0.65);
    transition: color var(--transition);
}

#sitefooter ul li a:hover {
    color: var(--color-accent);
}

/* Footer-Logo */
#sitefooter .footer-logo {
    display:        block;
    margin-bottom:  1.2rem;
}

#sitefooter .footer-logo img {
    height:     2.5rem;
    width:      auto;
    filter:     brightness(0) invert(1);
    opacity:    0.9;
}

/* Footer-Subzeile */
.footer-bottom {
    width:          100%;
    margin-top:     var(--padding-section);
    padding-top:    1rem;
    border-top:     1px solid rgba(141, 169, 196, 0.15);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            0.5rem;
}

.footer-bottom p,
.footer-bottom small {
    font-size:  var(--fs-xs);
    color:      rgba(240, 244, 248, 0.4);
    margin:     0;
}


/* ============================================================
   10. ANIMATIONEN / FADE-IN
   ============================================================ */

/* Ausgangszustand: unsichtbar, leicht nach unten versetzt */
.fade-in-element {
    opacity:    0;
    transform:  translateY(1.5rem);
    transition: opacity 0.7s ease,
                transform 0.7s ease;
}

/* Klasse wird per jQuery beim Eintritt in den Viewport gesetzt */
.fade-in-element.visible {
    opacity:    1;
    transform:  translateY(0);
}

/* Gestaffeltes Einblenden für Kinder-Elemente */
.fade-in-element:nth-child(1) { transition-delay: 0.00s; }
.fade-in-element:nth-child(2) { transition-delay: 0.10s; }
.fade-in-element:nth-child(3) { transition-delay: 0.20s; }
.fade-in-element:nth-child(4) { transition-delay: 0.30s; }
.fade-in-element:nth-child(5) { transition-delay: 0.40s; }
.fade-in-element:nth-child(6) { transition-delay: 0.50s; }


/* ============================================================
   11. RESPONSIVE – Breakpoint 500 px
   ============================================================ */
@media (max-width: 500px) {

    /* Alle Spalten werden zu 100 % */
    .w25, .w33, .w50, .w66, .w75 {
        flex:   0 0 100%;
        width:  100%;
    }

    /* Footer-Spalten: 2×2 */
    #sitefooter .w25 {
        flex:   0 0 50%;
        width:  50%;
    }

    /* Header: Logo und Nav untereinander */
    #siteheader .half {
        flex-direction: row;
        justify-content: space-between;
    }

    ul.first-navigation {
        gap: 0;
    }

    ul.first-navigation li a {
        padding: 0.4rem 0.5rem;
        font-size: var(--fs-xs);
    }

    ul.first-navigation li + li::before {
        display: none;
    }

    /* Vollbild-Hero: Mindesthöhe anpassen */
    section.full.hero .half,
    section.full.fullscreen .half {
        min-height: 80vh;
    }

    /* .half: weniger Rand auf kleinen Screens */
    .half {
        padding-left:  1rem;
        padding-right: 1rem;
    }
}