/* G-Klasse Schmidt — premium homepage CSS */
/* Full replacement file */

:root {
    --text: rgba(238, 238, 238, 0.88);
    --text-muted: rgba(238, 238, 238, 0.66);
    --text-soft: rgba(238, 238, 238, 0.52);
    --line: rgba(255, 255, 255, 0.24);
    --bg: #050505;
    --red-glow: rgba(185, 0, 0, 0.26);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

body {
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* HERO BACKGROUND */
.hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    background-color: var(--bg);
    background-image: url("images/hero_2560.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.14) 0%,
            rgba(0, 0, 0, 0.00) 34%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        radial-gradient(
            circle at center 70%,
            transparent 0%,
            rgba(0, 0, 0, 0.13) 74%,
            rgba(0, 0, 0, 0.34) 100%
        );
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-top)) {
    .hero {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* TOP NAVIGATION — desktop */
.site-header {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 34px;
    right: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.main-nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    min-width: 0;
}

.lang-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.main-nav a,
.lang-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: none;
    color: var(--text-muted);
    background: transparent;
    letter-spacing: 0.105em;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.92);
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

.main-nav a {
    padding: 0;
}

.lang-nav a {
    width: 34px;
    padding: 0;
}

.main-nav a::before,
.lang-nav a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 52px;
    height: 18px;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.13;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.13) 42%,
        transparent 72%
    );
    filter: blur(7px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.main-nav a::after,
.lang-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 5px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.76),
        transparent
    );
    opacity: 0;
    transition: left 180ms ease, right 180ms ease, opacity 180ms ease;
}

.main-nav a:hover,
.lang-nav a:hover,
.main-nav a:focus-visible,
.lang-nav a:focus-visible {
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.32),
        0 2px 12px rgba(0, 0, 0, 0.95);
    transform: translateY(-1px);
    outline: none;
}

.main-nav a:hover::before,
.lang-nav a:hover::before,
.main-nav a:focus-visible::before,
.lang-nav a:focus-visible::before {
    opacity: 0.34;
    transform: translateX(-50%) translateY(-1px);
}

.main-nav a:hover::after,
.lang-nav a:hover::after,
.main-nav a:focus-visible::after,
.lang-nav a:focus-visible::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* BOTTOM CONTACT ACTIONS — desktop */
.hero-actions {
    position: absolute;
    z-index: 10;
    left: 34px;
    right: 34px;
    bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding-bottom: 0;
    border-bottom: 0;
}

.action-link {
    --action-offset-x: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 42px;
    color: var(--text-soft);
    letter-spacing: 0.035em;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
    transform: translateX(var(--action-offset-x));
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

.hero-actions .action-link:first-child {
    --action-offset-x: -10mm;
}

.hero-actions .action-link:nth-child(3) {
    --action-offset-x: 10mm;
}

.action-link::after {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 3px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.62),
        transparent
    );
    opacity: 0;
    transition: left 180ms ease, right 180ms ease, opacity 180ms ease;
}

.action-link:hover,
.action-link:focus-visible {
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.22),
        0 0 16px var(--red-glow);
    transform: translateX(var(--action-offset-x)) translateY(-1px);
    outline: none;
}

.action-link:hover::after,
.action-link:focus-visible::after {
    left: 18%;
    right: 18%;
    opacity: 1;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 17px;
    line-height: 1;
    opacity: 0.72;
}

/* Localized homepage principles above the contact action row on desktop. */
.hero-slogans {
    position: absolute;
    z-index: 11;
    left: 34px;
    right: 34px;
    bottom: 94px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: center;
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(238, 238, 238, 0.66);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow:
        0 1px 12px rgba(0, 0, 0, 0.95),
        0 0 18px rgba(255, 255, 255, 0.08),
        0 9px 26px rgba(120, 0, 0, 0.18);
    pointer-events: none;
}

.hero-slogans::before {
    display: none;
}

/* Large desktop screens */
@media (min-width: 1921px) {
    .hero {
        background-image: url("images/hero_2560.jpg");
    }
}

/* Standard desktop / laptop */
@media (max-width: 1920px) {
    .hero {
        background-image: url("images/hero_1920.jpg");
    }
}

/* Smaller laptop */
@media (max-width: 1366px) {
    .site-header {
        top: 8px;
        left: 24px;
        right: 24px;
        gap: 42px;
    }

    .main-nav {
        gap: 30px;
    }

    .lang-nav {
        gap: 22px;
    }

    .main-nav a,
    .lang-nav a {
        min-height: 38px;
        font-size: 12px;
        letter-spacing: 0.095em;
    }

    .lang-nav a {
        width: 30px;
    }

    .hero-actions {
        left: 24px;
        right: 24px;
        bottom: 24px;
        gap: 18px;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .action-link {
        font-size: 14px;
    }

    .hero-slogans {
        left: 24px;
        right: 24px;
        bottom: 88px;
        gap: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        font-size: 13px;
        letter-spacing: 0.15em;
    }

    .hero-slogans::before {
        left: -24px;
        right: -24px;
    }
}

/* iPhone / Android portrait and small tablets */
@media (max-width: 900px) {
    .hero {
        min-height: 100svh;
        background-image: url("images/hero_mobile.jpg?v=20260519-clean");
        background-size: cover;
        background-position: center 50%;
    }

    .hero::before {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.22) 0%,
                rgba(0, 0, 0, 0.04) 30%,
                rgba(0, 0, 0, 0.10) 62%,
                rgba(0, 0, 0, 0.56) 100%
            );
    }

    .site-header {
        top: calc(8px + env(safe-area-inset-top));
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
    }

    .main-nav {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 0 4px 4px 4px;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 14px,
            #000 calc(100% - 18px),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 14px,
            #000 calc(100% - 18px),
            transparent 100%
        );
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        min-height: 28px;
        font-size: 9.2px;
        letter-spacing: 0.078em;
    }

    .lang-nav {
        justify-content: flex-end;
        gap: 19px;
        padding-right: 2px;
    }

    .lang-nav a {
        width: auto;
        min-height: 26px;
        font-size: 9.4px;
        letter-spacing: 0.095em;
    }

    .main-nav a::before,
    .lang-nav a::before,
    .main-nav a::after,
    .lang-nav a::after {
        display: none;
    }

    /* Mobile contact block:
       moved into the free dark area above the car, left side.
       This avoids conflict with the built-in logo and lower captions. */
    .hero-actions {
        left: 34px;
        right: auto;
        top: 17.5svh;
        bottom: auto;
        width: min(310px, calc(100vw - 68px));
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0;
        border: none;
    }

    .action-link {
        justify-content: flex-start;
        min-height: 22px;
        gap: 9px;
        font-size: 11.8px;
        line-height: 1.1;
        letter-spacing: 0.01em;
        color: rgba(235, 235, 235, 0.62);
        white-space: nowrap;
    }

    .hero-actions .action-link:first-child,
    .hero-actions .action-link:nth-child(3) {
        --action-offset-x: 0;
    }

    .action-link::after {
        display: none;
    }

    .icon {
        width: 16px;
        height: 16px;
        font-size: 13px;
        opacity: 0.66;
        flex: 0 0 auto;
    }

    .hero-slogans {
        left: 14px;
        right: 14px;
        bottom: calc(94px + env(safe-area-inset-bottom));
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(5px, 1.8vw, 10px);
        align-items: end;
        padding-bottom: 0;
        border-bottom: 0;
        font-size: clamp(7px, 1.75vw, 8.4px);
        font-weight: 600;
        line-height: 1.24;
        letter-spacing: 0.075em;
        text-transform: uppercase;
        white-space: normal;
        color: rgba(218, 218, 218, 0.42);
        text-shadow:
            0 1px 7px rgba(0, 0, 0, 0.92),
            0 5px 14px rgba(0, 0, 0, 0.42);
    }

    .hero-slogans span {
        min-width: 0;
        max-width: 100%;
        text-align: center !important;
        white-space: normal;
        overflow-wrap: normal;
        hyphens: auto;
    }

    html[lang="de"] .hero-slogans,
    html[lang="fr"] .hero-slogans,
    html[lang="es"] .hero-slogans {
        font-size: clamp(6.35px, 1.58vw, 7.6px);
        line-height: 1.22;
        letter-spacing: 0.052em;
        gap: clamp(4px, 1.4vw, 8px);
    }
}

/* Narrow phones */
@media (max-width: 430px) {
    .hero {
        background-position: center 50%;
    }

    .site-header {
        top: calc(7px + env(safe-area-inset-top));
        left: 14px;
        right: 14px;
    }

    .main-nav {
        gap: 12px;
    }

    .main-nav a {
        min-height: 27px;
        font-size: 8.7px;
        letter-spacing: 0.065em;
    }

    .lang-nav {
        gap: 17px;
    }

    .lang-nav a {
        min-height: 25px;
        font-size: 9px;
    }

    .hero-actions {
        left: 30px;
        right: auto;
        top: 17.5svh;
        width: min(300px, calc(100vw - 60px));
        gap: 8px;
    }

    .action-link {
        min-height: 21px;
        font-size: 11.2px;
    }

    .icon {
        width: 15px;
        height: 15px;
        font-size: 12px;
    }

    .hero-slogans {
        left: 10px;
        right: 10px;
        bottom: calc(92px + env(safe-area-inset-bottom));
        gap: clamp(3px, 1.2vw, 6px);
        font-size: clamp(6.55px, 1.72vw, 7.45px);
        line-height: 1.22;
        letter-spacing: 0.055em;
        color: rgba(218, 218, 218, 0.38);
    }

    html[lang="de"] .hero-slogans,
    html[lang="fr"] .hero-slogans,
    html[lang="es"] .hero-slogans {
        font-size: clamp(5.9px, 1.55vw, 6.9px);
        letter-spacing: 0.035em;
        gap: 3px;
    }
}

/* Very small / short mobile screens */
@media (max-height: 740px) and (max-width: 900px) {
    .hero {
        background-position: center 48%;
    }

    .site-header {
        top: calc(5px + env(safe-area-inset-top));
    }

    .main-nav a {
        font-size: 8.5px;
    }

    .lang-nav a {
        font-size: 8.8px;
    }

    .hero-actions {
        top: 17svh;
        gap: 6px;
    }

    .action-link {
        font-size: 10.8px;
        min-height: 20px;
    }

    .hero-slogans {
        bottom: calc(78px + env(safe-area-inset-bottom));
        font-size: clamp(6.25px, 1.62vw, 7.1px);
        line-height: 1.2;
        letter-spacing: 0.045em;
        color: rgba(218, 218, 218, 0.36);
    }

    html[lang="de"] .hero-slogans,
    html[lang="fr"] .hero-slogans,
    html[lang="es"] .hero-slogans {
        font-size: clamp(5.7px, 1.45vw, 6.55px);
        letter-spacing: 0.026em;
    }
}

/* HERITAGE PAGE — one-screen premium archive */
.heritage-page{width:100%;min-height:100svh;overflow:hidden;background:radial-gradient(circle at center 12%,rgba(255,255,255,.055),transparent 34%),linear-gradient(to bottom,#050505 0%,#070707 46%,#050505 100%);color:rgba(238,238,238,.88)}
.heritage-main{position:relative;width:100%;min-height:100svh;padding:118px 34px 34px}
.heritage-main::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.08),transparent 18%),radial-gradient(circle at 50% 16%,rgba(255,255,255,.055),transparent 20%),radial-gradient(circle at 84% 18%,rgba(255,255,255,.065),transparent 18%);opacity:.42}
.heritage-archive{position:relative;z-index:2;width:min(1500px,100%);height:calc(100svh - 152px);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:24px}
.heritage-thumb{position:relative;display:block;overflow:hidden;min-height:0;background:#0a0a0a;outline:1px solid rgba(255,255,255,.055)}
.heritage-thumb img{width:100%;height:100%;display:block;object-fit:cover;filter:grayscale(7%) contrast(1.04) brightness(.82);transform:scale(1.001);transition:transform 420ms ease,filter 420ms ease}
.heritage-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.05),transparent 32%,rgba(0,0,0,.30) 100%);opacity:.72;transition:opacity 420ms ease}
.heritage-thumb::after{content:"";position:absolute;left:16px;right:16px;bottom:14px;z-index:2;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);opacity:0;transition:opacity 300ms ease}
.heritage-thumb:hover img,.heritage-thumb:focus-visible img{transform:scale(1.035);filter:grayscale(0%) contrast(1.08) brightness(.95)}
.heritage-thumb:hover::before,.heritage-thumb:focus-visible::before{opacity:.36}
.heritage-thumb:hover::after,.heritage-thumb:focus-visible::after{opacity:1}
.heritage-thumb:focus-visible{outline:1px solid rgba(255,255,255,.42);outline-offset:7px}
.heritage-lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:32px;background:rgba(0,0,0,.92)}
.heritage-lightbox:target{display:flex}
.heritage-lightbox img{max-width:min(94vw,1600px);max-height:88svh;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.85)}
.heritage-close{position:fixed;inset:0;cursor:default}
.heritage-close-button{position:fixed;z-index:101;top:22px;right:28px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);font-size:34px;line-height:1;text-decoration:none;transition:color 160ms ease,transform 160ms ease}
.heritage-close-button:hover,.heritage-close-button:focus-visible{color:rgba(255,255,255,.96);transform:scale(1.04);outline:none}
@media (max-width:1100px){.heritage-main{padding:104px 24px 28px}.heritage-archive{height:calc(100svh - 132px);gap:18px}}
@media (max-width:900px){.heritage-page{overflow-y:auto}.heritage-main{min-height:100svh;padding:calc(96px + env(safe-area-inset-top)) 18px 42px}.heritage-archive{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:14px}.heritage-thumb{aspect-ratio:3/2}.heritage-thumb::after{display:none}.heritage-lightbox{padding:16px}.heritage-lightbox img{max-width:96vw;max-height:82svh}.heritage-close-button{top:calc(14px + env(safe-area-inset-top));right:16px}}
@media (max-width:430px){.heritage-main{padding:calc(90px + env(safe-area-inset-top)) 14px 34px}.heritage-archive{gap:12px}}
@media (max-height:760px) and (min-width:901px){.heritage-main{padding-top:96px}.heritage-archive{height:calc(100svh - 122px);gap:18px}}

/* Compact homepage language switcher */
.site-header .lang-nav {
    gap: 8px !important;
    margin-left: 22px !important;
}

.site-header .lang-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 30px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(207, 165, 82, 0.26) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(235, 235, 235, 0.52) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    text-shadow: none !important;
}

.site-header .lang-nav a::before,
.site-header .lang-nav a::after {
    display: none;
}

.site-header .lang-nav a:hover,
.site-header .lang-nav a:focus-visible {
    color: rgba(235, 235, 235, 0.82) !important;
    border-color: rgba(207, 165, 82, 0.48) !important;
    background: rgba(207, 165, 82, 0.07) !important;
}

html[lang="en"] .site-header .lang-nav a[lang="en"],
html[lang="de"] .site-header .lang-nav a[lang="de"],
html[lang="fr"] .site-header .lang-nav a[lang="fr"],
html[lang="es"] .site-header .lang-nav a[lang="es"],
.site-header .lang-nav a[aria-current="page"] {
    color: rgba(245, 211, 139, 0.98) !important;
    border-color: rgba(207, 165, 82, 0.82) !important;
    background: rgba(207, 165, 82, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(207, 165, 82, 0.24) inset, 0 0 16px rgba(207, 165, 82, 0.12) !important;
}

@media (max-width: 1180px) {
    .site-header .lang-nav {
        margin-left: 0 !important;
        gap: 8px !important;
    }
}

@media (max-width: 720px) {
    .site-header .lang-nav {
        gap: 7px !important;
    }

    .site-header .lang-nav a {
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
    }
}