:root {
    --red: #ed101b;
    --black: #08090c;
    --panel: #101216;
    --white: #f5f6f8;
    --muted: #a5a8b0;
    --line: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
.topbar {
    min-height: 76px;
    padding: 10px clamp(18px, 3.5vw, 54px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(5,6,8,.98);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 5;
}
.brand { flex: 0 0 auto; display: flex; align-items: center; }
.brand img { width: 178px; max-height: 52px; object-fit: contain; }
.navigation { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); }
.navigation a { font-size: 12px; color: #d5d6da; transition: color .2s; }
.navigation a:hover, .navigation .active { color: white; }
.navigation .active { border-bottom: 2px solid var(--red); padding-bottom: 8px; }
.account-links { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.login-link, .register-link { font-size: 12px; font-weight: 700; padding: 11px 16px; border-radius: 4px; }
.login-link { border: 1px solid #55585f; }
.register-link { background: var(--red); border: 1px solid var(--red); }
.register-link:hover, .button-red:hover { background: #bd0b13; }

.hero {
    position: relative;
    min-height: 490px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 24px;
    padding: 55px clamp(25px, 6vw, 90px);
    overflow: hidden;
    isolation: isolate;
    background: #101216 url("../images/backgrounds/hatsi-background.png") center 55% / cover no-repeat;
}
.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(3,5,8,.9), rgba(3,5,8,.55) 48%, rgba(3,5,8,.22)),
                linear-gradient(0deg, rgba(3,5,8,.85), transparent 40%);
}
.hero-copy { max-width: 620px; }
.eyebrow { color: #dddfe4; font-size: 10px; letter-spacing: 3px; font-weight: 800; }
.eyebrow span { display: inline-block; width: 23px; height: 2px; margin: 0 9px 3px 0; background: var(--red); }
.hero h1 { margin: 20px 0 16px; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -1.5px; font-weight: 900; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-copy > p { max-width: 460px; color: #d2d4d9; font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.button { min-height: 42px; padding: 13px 17px; border-radius: 4px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.button-red { background: var(--red); border: 1px solid var(--red); }
.button-outline { border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.35); }
.button-outline:hover { background: rgba(255,255,255,.1); }
.hero-brand { justify-self: end; width: min(100%, 390px); text-align: center; }
.hero-brand img { display: block; width: 100%; max-height: 210px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.hero-brand p { margin: 14px 0; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-shadow: 0 2px 8px #000; }
.hero-brand-line { height: 3px; width: 76%; margin: auto; background: linear-gradient(90deg, transparent, var(--red), #e8e8e8, transparent); }
.hero-caption { position: absolute; bottom: 15px; left: clamp(25px, 6vw, 90px); color: #b9bbc1; font-size: 9px; letter-spacing: 2px; }
.hero-caption span { color: var(--red); padding: 0 7px; }

.feature-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px clamp(20px, 4vw, 60px); background: #08090c; }
.feature-card {
    min-height: 110px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 5px;
    background: linear-gradient(145deg, #11151a, #090b0e);
    transition: border-color .2s, transform .2s, background .2s;
}
.feature-card:hover { border-color: rgba(237,16,27,.75); transform: translateY(-3px); background: #151519; }
.feature-icon { color: var(--red); font-size: 25px; line-height: 1.1; }
.feature-card h2 { margin: 9px 0 4px; font-size: 12px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 10px; }
.platform-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; padding: 17px clamp(20px, 4vw, 60px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d0f12; color: #c7c9ce; font-size: 9px; letter-spacing: 1.2px; }
.platform-bar i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #45c77b; margin-right: 7px; }
.platform-active { color: #70d59a; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 25px; padding: 22px clamp(20px, 4vw, 60px); background: #050608; color: var(--muted); font-size: 10px; }
.footer-brand { color: white; font-weight: 900; letter-spacing: 1px; }
.footer-brand span { color: var(--red); }
.footer p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer nav a:hover { color: white; }
.footer small { color: #777b83; }

@media (max-width: 1000px) {
    .topbar { flex-wrap: wrap; }
    .navigation { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; padding-top: 5px; }
    .hero { padding: 45px 30px; }
    .hero-brand { width: min(100%, 300px); }
}
@media (max-width: 680px) {
    .topbar { gap: 12px; }
    .brand img { width: 145px; }
    .account-links { margin-left: auto; }
    .login-link, .register-link { padding: 9px 10px; font-size: 11px; }
    .navigation { justify-content: flex-start; gap: 13px; }
    .navigation a { font-size: 11px; }
    .hero { grid-template-columns: 1fr; gap: 24px; padding: 44px 22px 52px; background-position: center; }
    .hero h1 { font-size: clamp(32px, 9vw, 45px); }
    .hero-brand { justify-self: center; width: min(80%, 290px); }
    .hero-brand img { max-height: 150px; }
    .hero-caption { left: 22px; font-size: 8px; }
    .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 9px; }
    .feature-card { min-height: 105px; }
    .platform-bar { align-items: flex-start; flex-direction: column; }
    .footer { flex-direction: column; align-items: flex-start; }
}

/* HATSI V4: Kompakter, schmaler Footer */
.site-footer {
    width: min(100% - 40px, 1120px) !important;
    max-width: 1120px !important;
    min-height: 0 !important;
    margin: 24px auto 0 !important;
    padding: 14px 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 10px 20px !important;
    background: #0c0d0f !important;
    border: 1px solid #292a2e !important;
    border-bottom: 2px solid #e10613 !important;
    border-radius: 6px 6px 0 0;
    color: #a9abb1 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.site-footer p {
    margin: 0 !important;
    font-size: 11px !important;
}

.site-footer div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px !important;
}

.site-footer a {
    color: #c7c8cc !important;
    font-size: 11px !important;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ed101b !important;
}

@media (max-width: 600px) {
    .site-footer {
        width: calc(100% - 24px) !important;
        margin-top: 16px !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }

    .site-footer div {
        gap: 8px 12px !important;
    }
}

/* HATSI V4 - Seitenlayout kompakt und einheitlich */
html,
body {
    min-height: 100%;
    height: auto !important;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hero {
    min-height: 420px !important;
    height: min(58vh, 560px) !important;
}

.feature-strip {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.site-footer {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 15px clamp(20px, 3.2vw, 54px) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 22px !important;
    background: #050506 !important;
    font-size: 10px !important;
}

.site-footer p,
.site-footer a {
    font-size: 10px !important;
    line-height: 1.5 !important;
}

.site-footer div {
    gap: 8px 14px !important;
}

@media (max-width: 700px) {
    .hero {
        min-height: 460px !important;
        height: auto !important;
    }

    .site-footer {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 16px 20px !important;
    }
}

/* HATSI: unnötigen Leerraum unter dem Footer reduzieren */
html,
body {
    min-height: 0;
    height: auto !important;
}

body {
    display: block !important;
    padding-bottom: 0 !important;
}

main {
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site-footer {
    flex: none !important;
    margin-bottom: 0 !important;
}


/* HATSI V4 - Korrektur für den tatsächlich verwendeten Footer */
html,
body {
    min-height: 0 !important;
    height: auto !important;
}

body {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

main {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
}

/* Der Footer in index.html heißt .footer */
footer.footer {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 3% !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px 20px !important;
    background: #050506 !important;
    border-top: 1px solid #25262a !important;
    box-sizing: border-box !important;
}

footer.footer p {
    margin: 0 !important;
}

footer.footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

footer.footer small {
    font-size: 10px;
}


/* HATSI V4 - Footer am unteren Fensterrand */
html {
    min-height: 100% !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

main {
    display: block !important;
    flex: 1 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

footer.footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    position: relative !important;
}


/* ==========================================
   HATSI RACING INTELLIGENCE V4
   PREMIUM RACING UI
   Schwarz / Racing-Rot / Silber
   ========================================== */

:root {
    --black: #08090b;
    --red: #e10613;
    --silver: #c7c9ce;
    --white: #f7f7f8;
    --muted: #a5a7ad;
    --panel: #111216;
    --border: rgba(255,255,255,.10);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--black);
}

body {
    margin: 0 !important;
    color: var(--white);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(225,6,19,.07), transparent 42%),
        var(--black) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    transition: color .2s ease, background .2s ease,
                border-color .2s ease, transform .2s ease;
}

/* Navigation */
.site-header,
header {
    position: relative;
    z-index: 50;
}

.site-header {
    background: rgba(7,8,10,.96) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(14px);
}

.navigation {
    display: flex !important;
    align-items: center !important;
    gap: clamp(12px, 1.8vw, 26px) !important;
}

.navigation a {
    color: #c9cbd0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-decoration: none !important;
}

.navigation a:hover,
.navigation .active {
    color: white !important;
}

.navigation .active {
    border-bottom: 2px solid var(--red) !important;
    padding-bottom: 8px;
}

.account-links {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}

.login-link,
.register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px !important;
    border: 1px solid #3a3b40;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.login-link {
    color: white !important;
    background: #111216;
}

.register-link {
    color: white !important;
    background: var(--red);
    border-color: var(--red);
}

.login-link:hover,
.register-link:hover {
    transform: translateY(-2px);
}

/* Hero: Halloween-Motiv als Rennsport-Blickfang */
.hero {
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    min-height: clamp(480px, 66vh, 680px) !important;
    height: auto !important;
    padding: clamp(70px, 9vh, 110px) clamp(24px, 8vw, 120px) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden;
    background-color: #090a0c !important;
    background-image:
        linear-gradient(90deg,
            rgba(5,6,8,.91) 0%,
            rgba(5,6,8,.72) 36%,
            rgba(5,6,8,.22) 75%,
            rgba(5,6,8,.35) 100%),
        linear-gradient(0deg,
            #08090b 0%,
            transparent 24%,
            rgba(0,0,0,.08) 100%),
        url("../images/backgrounds/hatsi-background.png") !important;
    background-size: cover !important;
    background-position: center 62% !important;
    background-repeat: no-repeat !important;
    border-bottom: 1px solid #27282c;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 80% 45%,
        transparent 10%,
        rgba(0,0,0,.12) 75%
    );
}

.hero-content {
    position: relative !important;
    z-index: 2 !important;
    width: min(100%, 740px) !important;
    max-width: 740px !important;
}

.hero h1 {
    max-width: 760px;
    margin: 16px 0 22px !important;
    color: #fff !important;
    font-size: clamp(38px, 5.2vw, 70px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -2px;
    text-wrap: balance;
}

.hero h1 span {
    color: #ff2430 !important;
}

.hero p {
    max-width: 590px !important;
    color: #dedfe3 !important;
    font-size: clamp(15px, 1.35vw, 18px) !important;
    line-height: 1.85 !important;
}

.hero-label {
    color: #d2d3d7 !important;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 800;
}

/* Buttons */
.primary-button,
.secondary-button {
    min-height: 49px;
    padding: 14px 23px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .5px;
    text-decoration: none !important;
    transition: transform .2s ease, background .2s ease,
                border-color .2s ease;
}

.primary-button {
    color: white !important;
    background: linear-gradient(135deg, #f01624, #b9000b) !important;
    border: 1px solid #ff3440 !important;
    box-shadow: 0 8px 24px rgba(225,6,19,.18);
}

.secondary-button {
    color: #f4f4f5 !important;
    background: rgba(12,13,16,.75) !important;
    border: 1px solid #5a5c63 !important;
}

.primary-button:hover,
.secondary-button:hover {
    transform: translateY(-2px);
}

/* Platform-Karten und Inhaltsflächen */
.platform-section {
    display: block !important;
    width: 100%;
    padding: clamp(38px, 5vw, 66px) clamp(20px, 7vw, 100px) !important;
    background: transparent !important;
}

.section-heading {
    margin-bottom: 28px;
}

.section-heading h2 {
    margin-top: 0;
    color: white;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    letter-spacing: -.8px;
}

.section-heading p {
    max-width: 680px;
    color: var(--muted);
    line-height: 1.8;
}

.platform-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.platform-card {
    position: relative;
    min-width: 0;
    min-height: 190px;
    padding: 25px !important;
    overflow: hidden;
    background: linear-gradient(145deg, #17181c, #0e0f12) !important;
    border: 1px solid #303137 !important;
    border-top: 2px solid var(--red) !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    transition: transform .22s ease, border-color .22s ease,
                box-shadow .22s ease;
}

.platform-card:hover {
    transform: translateY(-4px);
    border-color: rgba(225,6,19,.7) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.24);
}

.platform-card h3 {
    color: white !important;
    font-size: 19px;
    line-height: 1.35;
}

.platform-card p {
    color: #aeb0b6 !important;
    font-size: 13px;
    line-height: 1.8;
}

.platform-card a {
    color: #ff3742 !important;
    font-weight: 800;
}

/* Status und kleine Akzente */
.platform-active {
    color: #e4e5e8;
    letter-spacing: 1.5px;
    font-size: 10px;
    font-weight: 800;
}

.status i {
    background: #38c978;
    box-shadow: 0 0 9px rgba(56,201,120,.35);
}

/* Footer: kompakt und elegant */
footer.footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px 24px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px clamp(20px, 4vw, 56px) !important;
    color: #9b9da4 !important;
    background: #050506 !important;
    border-top: 1px solid #292a2f !important;
    font-size: 11px !important;
}

.footer-brand {
    color: white !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .5px;
}

.footer-brand span {
    color: #e10613 !important;
}

footer.footer p {
    margin: 0 !important;
    color: #a5a7ad !important;
    font-size: 11px !important;
}

footer.footer nav {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px !important;
}

footer.footer nav a {
    color: #b9bbc1 !important;
    font-size: 11px !important;
    text-decoration: none !important;
}

footer.footer nav a:hover {
    color: #ff2632 !important;
}

footer.footer small {
    color: #777980 !important;
    font-size: 10px !important;
}

/* Einheitliche Auswahl und Fokuszustände */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #ff3440;
    outline-offset: 4px;
}

/* Tablet */
@media (max-width: 950px) {
    .platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero {
        min-height: 510px !important;
        background-position: center 60% !important;
    }
}

/* Smartphone */
@media (max-width: 650px) {
    .navigation {
        flex-wrap: wrap !important;
        gap: 12px 16px !important;
    }

    .navigation a {
        font-size: 11px !important;
    }

    .account-links {
        flex-wrap: wrap;
    }

    .hero {
        min-height: 490px !important;
        padding: 58px 22px !important;
        background-position: 58% center !important;
        background-image:
            linear-gradient(90deg, rgba(4,5,7,.88), rgba(4,5,7,.48)),
            linear-gradient(0deg, #08090b 0%, transparent 28%),
            url("../images/backgrounds/hatsi-background.png") !important;
    }

    .hero h1 {
        font-size: clamp(34px, 9vw, 46px) !important;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 15px !important;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
        margin: 9px 0 0;
    }

    .platform-section {
        padding: 38px 18px !important;
    }

    .platform-grid {
        grid-template-columns: 1fr !important;
    }

    .platform-card {
        min-height: 0;
        padding: 22px !important;
    }

    footer.footer {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 18px 20px !important;
        gap: 10px !important;
    }

    footer.footer nav {
        gap: 10px 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* HATSI V4 – Vollbild ohne Scrollen, Hintergrund durchgehend sichtbar */
html, body {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    margin: 0;
    overflow: hidden !important;
}

body {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-image:
        linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.18)),
        url("../images/backgrounds/halloween.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Header: durchsichtig, damit das Hintergrundbild sichtbar bleibt */
header, .header, .navigation, nav.navigation {
    background: rgba(0,0,0,.20) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    flex-shrink: 0;
}

/* Hauptbereich nutzt nur den verfügbaren Platz */
main {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hero und Inhaltsbereiche nicht mit schwarzem Hintergrund verdecken */
.hero, .hero-section, .platform-section, .platform-grid,
section {
    background-color: transparent;
}

/* Footer: transparent und am unteren Bildschirmrand */
footer.footer, .footer {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding: 8px 16px !important;
    background: rgba(0,0,0,.22) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Kompaktere Abstände, damit die Startseite auf einen Bildschirm passt */
.hero {
    padding-top: clamp(8px, 2vh, 24px) !important;
    padding-bottom: clamp(8px, 2vh, 24px) !important;
}

.hero h1 {
    margin-top: 0;
    margin-bottom: 12px;
}

.platform-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.platform-grid {
    gap: clamp(8px, 1.2vw, 18px) !important;
}

.platform-card {
    min-height: 0 !important;
}

/* Auf kleineren Bildschirmen Inhalte kompakt halten */
@media (max-height: 800px) {
    .hero {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .hero p {
        margin-top: 6px;
        margin-bottom: 8px;
    }

    .platform-section {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    footer.footer, .footer {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

/* HATSI V4 – Vollbild ohne Scrollen, Hintergrund durchgehend sichtbar */
html, body {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    margin: 0;
    overflow: hidden !important;
}

body {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-image:
        linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.18)),
        url("../images/backgrounds/halloween.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Header: durchsichtig, damit das Hintergrundbild sichtbar bleibt */
header, .header, .navigation, nav.navigation {
    background: rgba(0,0,0,.20) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    flex-shrink: 0;
}

/* Hauptbereich nutzt nur den verfügbaren Platz */
main {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hero und Inhaltsbereiche nicht mit schwarzem Hintergrund verdecken */
.hero, .hero-section, .platform-section, .platform-grid,
section {
    background-color: transparent;
}

/* Footer: transparent und am unteren Bildschirmrand */
footer.footer, .footer {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding: 8px 16px !important;
    background: rgba(0,0,0,.22) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Kompaktere Abstände, damit die Startseite auf einen Bildschirm passt */
.hero {
    padding-top: clamp(8px, 2vh, 24px) !important;
    padding-bottom: clamp(8px, 2vh, 24px) !important;
}

.hero h1 {
    margin-top: 0;
    margin-bottom: 12px;
}

.platform-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.platform-grid {
    gap: clamp(8px, 1.2vw, 18px) !important;
}

.platform-card {
    min-height: 0 !important;
}

/* Auf kleineren Bildschirmen Inhalte kompakt halten */
@media (max-height: 800px) {
    .hero {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .hero p {
        margin-top: 6px;
        margin-bottom: 8px;
    }

    .platform-section {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    footer.footer, .footer {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

/* HATSI – Plattformauswahl */
.platform-selector {
    width: min(1000px, 94%);
    margin: 18px auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.platform-tile {
    min-width: 0;
    padding: 20px 12px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: rgba(8, 10, 14, .48);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 14px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: transform .2s ease, background .2s ease;
}

.platform-tile:hover {
    transform: translateY(-3px);
    background: rgba(8,10,14,.65);
}

.platform-tile h2 {
    margin: 0 0 8px;
    font-size: clamp(18px, 2.5vw, 26px);
    letter-spacing: 1px;
}

.platform-tile p {
    margin: 0 0 12px;
    font-size: 13px;
}

.platform-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
}

.platform-tile.active {
    border-color: #e32736;
    box-shadow: 0 0 18px rgba(227,39,54,.18);
}

.platform-tile.active .platform-status {
    color: #fff;
    background: #c91f2d;
}

.platform-tile.inactive {
    opacity: .86;
    cursor: default;
}

.platform-tile.inactive .platform-status {
    color: #e4e4e4;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.15);
}

@media (max-width: 600px) {
    .platform-selector {
        gap: 7px;
        margin: 10px auto;
    }

    .platform-tile {
        padding: 14px 5px;
        border-radius: 10px;
    }

    .platform-tile p {
        font-size: 11px;
    }

    .platform-status {
        padding: 4px 6px;
        font-size: 9px;
    }
}

/* HATSI V4 – Hintergrund sichtbar, Header und Footer transparent */
body {
    background-image:
        linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.10)),
        url("../images/backgrounds/halloween.png") !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

header.topbar,
header,
footer.footer,
.footer {
    background-color: rgba(5,7,10,.24) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* HATSI V4 – Kompaktere Plattformkarten */
.platform-selector {
    width: min(780px, 88%) !important;
    gap: 12px !important;
    margin: 12px auto !important;
}

.platform-tile {
    padding: 14px 10px !important;
    border-radius: 12px !important;
}

.platform-tile h2 {
    font-size: clamp(17px, 1.6vw, 22px) !important;
    margin-bottom: 6px !important;
}

.platform-tile p {
    font-size: 12px !important;
    margin-bottom: 9px !important;
}

.platform-status {
    padding: 4px 9px !important;
    font-size: 10px !important;
}


/* HATSI V4 – Hintergrund wie in der Designvorlage */
body {
    background-color: #08090c !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 0%,
            rgba(0,0,0,.08) 65%,
            rgba(0,0,0,.20) 100%
        ),
        url("../images/backgrounds/halloween.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

header.topbar,
header,
footer.footer,
.footer {
    background: rgba(5,7,10,.28) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Plattformen kompakt und leicht transparent */
.platform-selector {
    width: min(780px, 88%) !important;
    gap: 12px !important;
    margin: 10px auto !important;
}

.platform-tile {
    padding: 12px 10px !important;
    background: rgba(5,7,10,.58) !important;
    border-radius: 12px !important;
}

.platform-tile.active {
    border-color: #ed1728 !important;
}


/* HATSI V4 – Korrektur: echtes Hintergrundbild und weniger Abdunklung */
body {
    background-image:
        linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.08)),
        url("../images/backgrounds/hatsi-background.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Hero transparent halten, damit das Körper-Hintergrundbild durchscheint */
main {
    background: transparent !important;
}

.hero {
    background-color: transparent !important;
    background-image: none !important;
}

/* Zusätzliche dunkle Ebene im Hero deutlich reduzieren */
.hero-shade {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.04) 55%,
        rgba(0,0,0,.02) 100%
    ) !important;
    opacity: 1 !important;
}

/* Kopf- und Fußbereich durchsichtig gestalten */
header.topbar {
    background: rgba(5,7,10,.22) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

footer.footer {
    background: rgba(5,7,10,.22) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* Unnötige Plattform-Statusleiste ausblenden */
.platform-bar {
    display: none !important;
}


/* HATSI Halloween Special – dezente Rennsport-Atmosphäre */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 10% 15%, rgba(255,90,0,.10), transparent 35%),
        radial-gradient(ellipse at 90% 80%, rgba(255,40,0,.08), transparent 32%);
    animation: halloween-glow 7s ease-in-out infinite alternate;
}

.halloween-bat {
    position: fixed;
    top: 18%;
    left: -60px;
    z-index: 6;
    pointer-events: none;
    font-size: 26px;
    opacity: .8;
    filter: drop-shadow(0 0 8px rgba(255,90,0,.6));
    animation: halloween-flight 18s linear infinite;
}

@keyframes halloween-glow {
    from { opacity: .45; }
    to   { opacity: 1; }
}

@keyframes halloween-flight {
    0%   { transform: translateX(-60px) translateY(0) rotate(-8deg); }
    45%  { transform: translateX(55vw) translateY(35px) rotate(8deg); }
    100% { transform: translateX(calc(100vw + 100px)) translateY(-15px) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    .halloween-bat {
        animation: none !important;
    }
}


/* Halloween-Fledermaus sichtbar über der Startseite */
.halloween-bat {
    display: block !important;
    position: fixed !important;
    top: 18% !important;
    left: -60px;
    z-index: 9999 !important;
    pointer-events: none !important;
    font-size: 30px !important;
    animation: halloween-flight 18s linear infinite !important;
}


/* HATSI HALLOWEEN RACING SPECIAL */
body::after {
    content: "🦇";
    position: fixed;
    top: 32%;
    left: -60px;
    z-index: 9998;
    pointer-events: none;
    font-size: 25px;
    filter: drop-shadow(0 0 8px #ff5a16);
    animation: hatsi-bat-two 23s linear infinite;
}

.halloween-bat {
    filter: drop-shadow(0 0 10px #ff5a16) !important;
}

@keyframes hatsi-bat-two {
    0% {
        transform: translate(-60px, 0) rotate(-8deg);
    }
    30% {
        transform: translate(30vw, -25px) rotate(5deg);
    }
    65% {
        transform: translate(68vw, 30px) rotate(-5deg);
    }
    100% {
        transform: translate(calc(100vw + 100px), -10px) rotate(8deg);
    }
}

/* Sanfter Nebel am unteren Bildschirmrand */
body {
    position: relative;
}

body main {
    position: relative;
}

body main::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 20%;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba(255, 75, 12, .10),
        rgba(70, 70, 80, .035),
        transparent
    );
    animation: hatsi-fog 8s ease-in-out infinite alternate;
}

@keyframes hatsi-fog {
    from {
        transform: translateX(-2%);
        opacity: .35;
    }
    to {
        transform: translateX(2%);
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after,
    body main::after,
    .halloween-bat {
        animation: none !important;
    }
}



/* HATSI FIX: Unteren schwarzen Balken entfernen */
.platform-bar {
    display: none !important;
}

html,
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body {
    min-height: 100vh !important;
    background-color: #100d0e !important;
}

main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

footer.footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* HATSI Halloween – dezenter, bewegter Rennstrecken-Nebel */
body main::after {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: 0;
    height: 30%;
    z-index: 3;
    pointer-events: none;

    background:
        radial-gradient(ellipse at 20% 80%,
            rgba(210, 210, 220, 0.13) 0%,
            rgba(150, 150, 165, 0.07) 28%,
            transparent 65%),
        radial-gradient(ellipse at 65% 75%,
            rgba(255, 65, 25, 0.08) 0%,
            rgba(180, 180, 190, 0.06) 32%,
            transparent 68%),
        radial-gradient(ellipse at 90% 90%,
            rgba(210, 210, 220, 0.12) 0%,
            transparent 55%);

    filter: blur(18px);
    animation: hatsi-mist-drift 18s ease-in-out infinite alternate;
}

@keyframes hatsi-mist-drift {
    0% {
        transform: translate3d(-3%, 0, 0) scale(1);
        opacity: 0.45;
    }
    50% {
        transform: translate3d(1%, -8px, 0) scale(1.04);
        opacity: 0.8;
    }
    100% {
        transform: translate3d(4%, 3px, 0) scale(1.08);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    body main::after {
        animation: none !important;
    }
}


/* HATSI: Sichtbarer Halloween-Nebel */
body main {
    position: relative !important;
    isolation: isolate;
}

body main::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    left: -15vw !important;
    bottom: 0 !important;
    width: 130vw !important;
    height: 42vh !important;
    z-index: 20 !important;
    pointer-events: none !important;

    background:
        radial-gradient(ellipse at 15% 85%, rgba(220,225,235,.30) 0%, transparent 48%),
        radial-gradient(ellipse at 45% 100%, rgba(170,175,190,.27) 0%, transparent 52%),
        radial-gradient(ellipse at 75% 80%, rgba(220,220,230,.24) 0%, transparent 45%),
        radial-gradient(ellipse at 95% 100%, rgba(255,65,20,.13) 0%, transparent 40%) !important;

    filter: blur(22px) !important;
    opacity: .9 !important;
    animation: hatsi-visible-mist 12s ease-in-out infinite alternate !important;
}

@keyframes hatsi-visible-mist {
    0%   { transform: translateX(-7vw) translateY(8px) scale(1); }
    50%  { transform: translateX(2vw) translateY(-12px) scale(1.05); }
    100% { transform: translateX(8vw) translateY(3px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    body main::after { animation: none !important; }
}


/* HATSI – verstärkter, bewegter Rennstrecken-Nebel */
body main {
    position: relative !important;
    isolation: isolate;
}

body main::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    left: -15vw !important;
    bottom: -5vh !important;
    width: 130vw !important;
    height: 48vh !important;
    z-index: 20 !important;
    pointer-events: none !important;

    background:
        radial-gradient(ellipse at 15% 80%, rgba(225,230,235,.38) 0%, transparent 48%),
        radial-gradient(ellipse at 45% 95%, rgba(190,200,210,.32) 0%, transparent 52%),
        radial-gradient(ellipse at 75% 75%, rgba(235,238,242,.30) 0%, transparent 45%),
        radial-gradient(ellipse at 95% 100%, rgba(175,185,195,.34) 0%, transparent 48%) !important;

    filter: blur(28px) !important;
    opacity: .95 !important;
    animation: hatsi-visible-mist 9s ease-in-out infinite alternate !important;
}

@keyframes hatsi-visible-mist {
    0% {
        transform: translate3d(-4vw, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(2vw, -3vh, 0) scale(1.08);
    }
    100% {
        transform: translate3d(5vw, -1vh, 0) scale(1.03);
    }
}

/* HATSI – dynamischer, bewegter Rennstrecken-Nebel */
body main::after {
    animation: hatsi-fast-mist 5s ease-in-out infinite alternate !important;
    opacity: 1 !important;
    filter: blur(24px) !important;
}

@keyframes hatsi-fast-mist {
    0% {
        transform: translate3d(-12vw, 2vh, 0) scale(1);
    }
    25% {
        transform: translate3d(-4vw, -4vh, 0) scale(1.10);
    }
    50% {
        transform: translate3d(5vw, 1vh, 0) scale(1.18);
    }
    75% {
        transform: translate3d(12vw, -5vh, 0) scale(1.08);
    }
    100% {
        transform: translate3d(18vw, 0, 0) scale(1.15);
    }
}

/* HATSI – Newsletter-Fenster rechts im Hero-Bereich */
.hero {
    position: relative !important;
}

.hatsi-newsletter-popup {
    position: absolute !important;
    top: 100px !important;
    right: 28px !important;
    left: auto !important;
    bottom: auto !important;
    width: 235px !important;
    max-width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    color: #f4f4f4 !important;
    background: rgba(12,13,16,.94) !important;
    border: 1px solid #444 !important;
    border-top: 3px solid #e32636 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
    z-index: 100 !important;
    margin: 0 !important;
}

.hatsi-newsletter-heading {
    font-size: 16px !important;
    font-weight: 800 !important;
}

.hatsi-newsletter-heading span {
    color: #ed3343 !important;
}

.hatsi-newsletter-description {
    color: #c2c2c2 !important;
    font-size: 12px !important;
}

.hatsi-newsletter-button {
    display: block !important;
    margin-top: 12px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    background: #df2635 !important;
    color: white !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

@media (max-width: 760px) {
    .hatsi-newsletter-popup {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin: 20px 16px !important;
    }
}

/* MD Logistik – Partnerlogo im Header */
.md-logistik-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 18px;
    width: 94px;
    height: 48px;
    flex-shrink: 0;
}

.md-logistik-header img {
    display: block;
    width: 100%;
    max-height: 46px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
}

@media (max-width: 760px) {
    .md-logistik-header {
        width: 62px;
        height: 36px;
        margin-right: 8px;
    }
}

/* Beide HATSI-Partnerlogos exakt gleich groß */
.md-logistik-header,
.werbeteam-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px !important;
    height: 52px !important;
    flex: 0 0 100px !important;
    margin: 0 8px !important;
    padding: 4px !important;
    background: #fff;
    overflow: hidden;
}

.md-logistik-header img,
.werbeteam-header img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

@media (max-width: 900px) {
    .md-logistik-header,
    .werbeteam-header {
        width: 72px !important;
        height: 42px !important;
        flex-basis: 72px !important;
    }
}

@media (max-width: 600px) {
    .md-logistik-header,
    .werbeteam-header {
        width: 56px !important;
        height: 34px !important;
        flex-basis: 56px !important;
    }
}

/* HATSI V4 – zentraler Design-Fix */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    z-index: 20;
    background: rgba(5,7,10,.88) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.partner-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
}

.partner-logos-label {
    color: #d5d6da;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
}

.partner-logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.partner-logos-row .md-logistik-header,
.partner-logos-row .werbeteam-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px !important;
    height: 48px !important;
    flex: 0 0 92px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
}

.partner-logos-row .md-logistik-header img,
.partner-logos-row .werbeteam-header img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
}

.hero-shade {
    z-index: -1;
}

.hero-copy,
.hero-brand {
    position: relative;
    z-index: 2;
}

.hero h1 {
    text-wrap: balance;
    text-shadow: 0 3px 18px rgba(0,0,0,.55);
}

.hero-copy > p {
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.hero-brand img {
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.65));
}

.platform-selector {
    position: relative;
    z-index: 2;
}

.platform-tile {
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.platform-tile.active {
    border-color: #ed2636 !important;
    box-shadow: 0 8px 28px rgba(227,39,54,.16);
}

.hatsi-newsletter-popup {
    z-index: 10 !important;
}

@media (max-width: 1100px) {
    .topbar {
        flex-wrap: wrap;
        justify-content: center;
    }

    .navigation {
        order: 5;
        width: 100%;
        justify-content: center;
    }

    .partner-logos {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .topbar {
        gap: 12px;
        padding: 12px 14px;
    }

    .brand img {
        width: 125px;
    }

    .partner-logos-row .md-logistik-header,
    .partner-logos-row .werbeteam-header {
        width: 64px !important;
        height: 36px !important;
        flex-basis: 64px !important;
    }

    .partner-logos-label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .navigation {
        gap: 12px;
    }

    .account-links {
        margin-left: 0;
    }

    .hatsi-newsletter-popup {
        position: relative !important;
        inset: auto !important;
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin: 16px 14px !important;
    }
}




/* HATSI V4 – Navigation links neben dem Logo */
@media (min-width: 1101px) {
    header.topbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 28px;
    }

    header.topbar nav.navigation {
        position: static !important;
        left: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        width: auto;
        justify-content: flex-start !important;
        white-space: nowrap;
    }

    header.topbar .account-links {
        margin-left: auto;
    }
}

@media (max-width: 1100px) {
    header.topbar nav.navigation {
        position: static !important;
        transform: none !important;
        justify-content: center !important;
        width: 100%;
    }
}

/* HATSI V4 – Partnerlogos mittig im Header */
header.topbar {
    position: relative;
}

header.topbar .partner-logos {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: max-content;
    max-width: 30%;
    z-index: 5;
}

header.topbar .partner-logos-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
}

header.topbar .partner-logos img {
    display: block;
    object-fit: contain;
    max-width: 100%;
}

@media (max-width: 1100px) {
    header.topbar .partner-logos {
        position: static !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        margin: 12px auto !important;
    }
}

/* HATSI V4 – Kontaktformular */
.contact-section {
    padding: 80px 6%;
    background: linear-gradient(135deg,#090a0d,#17181e,#0a0b0e);
    border-top: 1px solid rgba(255,255,255,.1);
}
.contact-inner {
    max-width: 1120px;
    margin: auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 48px;
}
.contact-eyebrow { color: #ef343c; font-weight: 800; letter-spacing: .18em; }
.contact-intro h2 { color: #fff; font-size: clamp(2rem,4vw,3rem); }
.contact-intro h2 em { color: #ef343c; font-style: normal; }
.contact-intro p { color: #c2c3ca; line-height: 1.8; }
.contact-email { display: inline-block; color: #fff; margin-top: 12px; }
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    background: rgba(255,255,255,.04);
    border: 1px solid #34353d;
    border-radius: 12px;
}
.contact-form label { color: #eee; margin-top: 8px; }
.contact-form input, .contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px;
    background: #0b0c10;
    color: #fff;
    border: 1px solid #41424a;
    border-radius: 6px;
    font: inherit;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: 2px solid #ef343c;
    outline-offset: 1px;
}
.contact-form textarea { resize: vertical; }
.contact-submit {
    margin-top: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    background: #e92f38;
    color: white;
    border: 0;
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
}
.contact-submit:hover { background: #ff414a; }
.contact-note { color: #aaa; font-size: .8rem; }
.contact-flash { padding: 12px; border-radius: 6px; }
.contact-flash.success { color: #c8f7d3; background: #143522; }
.contact-flash.error { color: #ffd0d2; background: #401b20; }
.contact-honeypot { position: absolute !important; left: -10000px !important; }
@media (max-width: 760px) {
    .contact-inner { grid-template-columns: 1fr; }
    .contact-section { padding: 50px 5%; }
    .contact-form { padding: 18px; }
}

/* HATSI FIX: Partnerlogos im Header begrenzen */
.partner-logos {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 220px;
    max-width: 30vw;
}

.partner-logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.partner-logos-row > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 48px;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
}

.partner-logos-row > a img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.partner-logos-label {
    display: block;
    margin-bottom: 5px;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

@media (max-width: 760px) {
    .partner-logos {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 12px auto;
    }
}

/* HATSI WhatsApp Button */
.hatsi-whatsapp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #25D366;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.hatsi-whatsapp-nav:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
}

.hatsi-whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    background: #25D366;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.hatsi-whatsapp-float:hover {
    background: #1ebe5d;
    transform: translateY(-3px);
}

.hatsi-whatsapp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-size: 19px;
    line-height: 1;
}

@media (max-width: 600px) {
    .hatsi-whatsapp-float {
        right: 14px;
        bottom: 14px;
        padding: 12px 15px;
        font-size: 13px;
    }

    .hatsi-whatsapp-nav {
        padding: 8px 10px;
    }
}