/* =========================================================
   ALPIN – GLOBAL CORE
   Datei: 00-alpin-core.css

   DESIGN SYSTEM / GLOBALE BASIS
   LOKALE TYPOGRAFIE: ARCHIVO
========================================================= */


/* =========================================================
   00 | LOCAL WEBFONTS
   /wp-content/themes/alpin/fonts/
========================================================= */


/* ---------------------------------------------------------
   ARCHIVO
   --------------------------------------------------------- */


/* Archivo Regular 400 */

@font-face {
    font-family: "Archivo";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-v25-latin-regular.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 400;

    font-display: swap;
}


/* Archivo Medium 500 */

@font-face {
    font-family: "Archivo";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-v25-latin-500.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 500;

    font-display: swap;
}


/* Archivo SemiBold 600 */

@font-face {
    font-family: "Archivo";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-v25-latin-600.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 600;

    font-display: swap;
}


/* Archivo Bold 700 */

@font-face {
    font-family: "Archivo";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-v25-latin-700.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 700;

    font-display: swap;
}


/* Archivo ExtraBold 800 */

@font-face {
    font-family: "Archivo";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-v25-latin-800.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 800;

    font-display: swap;
}


/* Archivo Black / 900 */

@font-face {
    font-family: "Archivo";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-v25-latin-900.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 900;

    font-display: swap;
}


/* ---------------------------------------------------------
   ARCHIVO NARROW
   --------------------------------------------------------- */


/* Archivo Narrow Regular */

@font-face {
    font-family: "Archivo Narrow";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-narrow-v35-latin-regular.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 400;

    font-display: swap;
}


/* Archivo Narrow Medium */

@font-face {
    font-family: "Archivo Narrow";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-narrow-v35-latin-500.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 500;

    font-display: swap;
}


/* Archivo Narrow SemiBold */

@font-face {
    font-family: "Archivo Narrow";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-narrow-v35-latin-600.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 600;

    font-display: swap;
}


/* Archivo Narrow Bold */

@font-face {
    font-family: "Archivo Narrow";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-narrow-v35-latin-700.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 700;

    font-display: swap;
}


/* ---------------------------------------------------------
   ARCHIVO BLACK
   --------------------------------------------------------- */

@font-face {
    font-family: "Archivo Black";

    src:
        url("/wp-content/themes/alpin/fonts/archivo-black-v23-latin-regular.woff2")
        format("woff2");

    font-style: normal;
    font-weight: 400;

    font-display: swap;
}


/* =========================================================
   01 | GLOBALE VARIABLEN
========================================================= */

:root {

    /* -----------------------------------------------------
       MAXIMALE WEBSITE-BREITE
    ----------------------------------------------------- */

    --alpin-max-width: 1600px;


    /* -----------------------------------------------------
       GLOBALE AUSSENFLUCHT
    ----------------------------------------------------- */

    --alpin-edge: 72px;
    --alpin-edge-tablet: 40px;
    --alpin-edge-mobile: 24px;


    /* -----------------------------------------------------
       ALPIN FARBEN
    ----------------------------------------------------- */

    --alpin-red: #d40000;

    --alpin-black: #080808;
    --alpin-black-soft: #0d0d0d;

    --alpin-white: #ffffff;

    --alpin-text: #ffffff;

    --alpin-text-secondary:
        rgba(255,255,255,.66);

    --alpin-text-muted:
        rgba(255,255,255,.56);

    --alpin-line:
        rgba(255,255,255,.10);


    /* -----------------------------------------------------
       TYPOGRAFIE

       Standard:
       Archivo

       Display / schmal:
       Archivo Narrow

       Massive Headlines:
       Archivo Black
    ----------------------------------------------------- */

    --alpin-font:
        "Archivo",
        Arial,
        sans-serif;

    --alpin-font-display:
        "Archivo Narrow",
        "Archivo",
        "Arial Narrow",
        Arial,
        sans-serif;

    --alpin-font-black:
        "Archivo Black",
        "Archivo",
        Arial,
        sans-serif;


    /* -----------------------------------------------------
       TRANSITIONS
    ----------------------------------------------------- */

    --alpin-transition-fast:
        .18s ease;


    /* -----------------------------------------------------
       FACTS – GLOBALES HINTERGRUNDBILD
    ----------------------------------------------------- */

    --alpin-facts-bg:
        url("/wp-content/themes/alpin/img/bg_globalfacts.png");


    /* -----------------------------------------------------
       VEHICLE CARD BACKGROUNDS
    ----------------------------------------------------- */

    --alpin-vehicle-motorhome:
        url("/wp-content/themes/alpin/img/vehicles/motorhome.webp");

    --alpin-vehicle-van:
        url("/wp-content/themes/alpin/img/vehicles/van.webp");

    --alpin-vehicle-offroad:
        url("/wp-content/themes/alpin/img/vehicles/offroad.webp");

    --alpin-vehicle-car:
        url("/wp-content/themes/alpin/img/vehicles/car.webp");

    --alpin-vehicle-performance:
        url("/wp-content/themes/alpin/img/vehicles/performance.webp");

    --alpin-vehicle-tractor:
        url("/wp-content/themes/alpin/img/vehicles/tractor.webp");

    --alpin-vehicle-truck:
        url("/wp-content/themes/alpin/img/vehicles/truck.webp");


    /* -----------------------------------------------------
       PRODUCT IMAGES
    ----------------------------------------------------- */

    --alpin-img-powerup:
        url("/wp-content/themes/alpin/img/product-powerup.webp");

    --alpin-img-powerpedal:
        url("/wp-content/themes/alpin/img/product-powerpedal.webp");


    /* -----------------------------------------------------
       CUSTOMER NEEDS – HINTERGRUNDBILD
    ----------------------------------------------------- */

    --alpin-customer-needs-bg:
        url("/wp-content/themes/alpin/img/alpin-wohnmobil-mehr-fahrkomfort.webp");

}


/* =========================================================
   02 | PERFORMANCE / CONTENT BACKGROUNDS
========================================================= */


/* BLOCK 1 – PRODUCT */

.alpin-performance-product {

    background-image:
        url("/wp-content/themes/alpin/img/alpin-performance-intro.webp")
        !important;
}


/* BLOCK 2 – SOUVERÄNITÄT */

.alpin-performance-sovereignty {

    background-image:
        url("/wp-content/themes/alpin/img/alpin-performance-sovereignty.webp")
        !important;
}


/* BLOCK 3 – DEVELOPMENT */

.alpin-performance-dev {

    background-image:
        url("/wp-content/themes/alpin/img/alpin-dev.webp")
        !important;
}


/* BLOCK 4 – WERKSTATT */

.alpin-performance-workshop {

    background-image:
        url("/wp-content/themes/alpin/img/alpin-werkstatt-montage.webp")
        !important;
}


/* BLOCK 5 – AUSTRIA */

.alpin-performance-austria {

    background-image:
        url("/wp-content/themes/alpin/img/alpin-berg-flagge.webp")
        !important;
}


/* =========================================================
   03 | CUSTOMER NEEDS
========================================================= */

.alpin-customer-needs-start
.alpin-customer-needs-image {

    background-image:
        url("/wp-content/themes/alpin/img/start-suv.webp")
        !important;
}


/* =========================================================
   04 | HTML / BOX-SIZING
========================================================= */

html {

    box-sizing:
        border-box !important;

    background:
        #111111 !important;
}


*,
*::before,
*::after {

    box-sizing:
        inherit;
}


/* =========================================================
   05 | GLOBALER AUSSENBEREICH
========================================================= */

body {

    margin:
        0 !important;

    padding:
        0 !important;

    width:
        100% !important;

    min-height:
        100vh !important;


    /* -----------------------------------------------------
       GLOBALE ALPIN SCHRIFT
    ----------------------------------------------------- */

    font-family:
        var(--alpin-font) !important;


    color:
        var(--alpin-text) !important;


    background:
        radial-gradient(
            ellipse at top center,

            #414141 0%,
            #383838 20%,
            #303030 40%,
            #292929 60%,
            #242424 80%,
            #202020 100%
        )
        !important;


    background-attachment:
        fixed !important;
}


/* =========================================================
   06 | FORM ELEMENTS
   ebenfalls Archivo
========================================================= */

button,
input,
select,
textarea {

    font-family:
        var(--alpin-font);
}


/* =========================================================
   07 | ELEMENTOR BASIS
========================================================= */

.elementor {

    width:
        100% !important;
}


/* =========================================================
   08 | GLOBALE 1600PX HILFSKLASSE

   Klasse:
   alpin-width
========================================================= */

.alpin-width {

    width:
        100% !important;

    max-width:
        var(--alpin-max-width) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* =========================================================
   09 | GLOBALE AUSSENFLUCHT

   Klasse:
   alpin-edge
========================================================= */

.alpin-edge {

    padding-left:
        var(--alpin-edge) !important;

    padding-right:
        var(--alpin-edge) !important;
}


/* =========================================================
   10 | FOOTER STACK
   FACTS + CTA OHNE ABSTAND

   Diese Klasse kommt auf den gemeinsamen Elterncontainer,
   der FACTS und FOOTER / CTA enthält.

   Klasse:
   alpin-footer-stack
========================================================= */

.alpin-footer-stack {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    gap:
        0 !important;

    row-gap:
        0 !important;

    min-height:
        0 !important;

    box-sizing:
        border-box !important;
}


/* Elementor Inner Wrapper */

.alpin-footer-stack > .e-con-inner {

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    gap:
        0 !important;

    row-gap:
        0 !important;

    min-height:
        0 !important;

    box-sizing:
        border-box !important;
}


/* Direkte Kinder ebenfalls ohne vertikalen Abstand */

.alpin-footer-stack > .e-con,
.alpin-footer-stack > .e-con-inner > .e-con {

    margin-top:
        0 !important;

    margin-bottom:
        0 !important;
}


/* FACTS unten sauber abschließen */

.alpin-footer-stack .alpin-facts {

    margin-bottom:
        0 !important;
}


/* FOOTER / CTA oben sauber beginnen */

.alpin-footer-stack .alpin-global-footer,
.alpin-footer-stack .alpin-footer-cta {

    margin-top:
        0 !important;
}


/* =========================================================
   11 | BILDER
========================================================= */

img {

    max-width:
        100%;

    height:
        auto;
}


/* =========================================================
   12 | LINKS / TRANSITIONS
========================================================= */

a {

    transition:
        color var(--alpin-transition-fast),
        background-color var(--alpin-transition-fast),
        border-color var(--alpin-transition-fast),
        opacity var(--alpin-transition-fast);
}


/* =========================================================
   13 | TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {

        --alpin-edge:
            var(--alpin-edge-tablet);
    }

}


/* =========================================================
   14 | MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {

        --alpin-edge:
            var(--alpin-edge-mobile);
    }


    body {

        background:
            #202020 !important;
    }

}


/* =========================================================
   15 | TEMPORÄRER GAP-TEST
========================================================= */

.alpin-gap-test {

    background:
        lime !important;

    margin:
        0 !important;

    padding:
        0 !important;

    min-height:
        0 !important;

    gap:
        0 !important;

    row-gap:
        0 !important;
}


.alpin-gap-test > .e-con-inner {

    background:
        lime !important;

    margin:
        0 !important;

    padding:
        0 !important;

    min-height:
        0 !important;

    gap:
        0 !important;

    row-gap:
        0 !important;
}


/* =========================================================
   ENDE
   00-alpin-core.css
========================================================= */