html, body{
    min-height: 100%;
}
html{
    background-color: white;
}
body{
    margin: 0;
    background-color: transparent;
    color: black;
    min-height: 100vh;
    /* Body is the positioned containing block for #meshprologo /
       #langswitcher so they scroll WITH the document on mobile,
       instead of being interpreted as fixed-to-viewport on some
       mobile browsers when no positioned ancestor exists. */
    position: relative;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#neuralbg{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

a{
    text-decoration: none!important;
}

/* Topbar als Grid-Header: links Spacer, mitte Logo, rechts Lang.
   Kein absolute-Positioning mehr — das löst Overlap-Probleme auf
   intermediären Viewport-Breiten (~640-1000px), wo der zentrierte
   Logo und die rechtsbündige Lang-Auswahl sich vorher berühren
   konnten.  Der Header-Block scrollt natürlich mit dem Dokument. */
#topbar{
    position: relative;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    min-height: 90px;
    background: transparent;
}
#topbar .topbar-side{
    display: flex;
    align-items: center;
}
#topbar .topbar-side--left{
    justify-self: start;
    /* leerer Spacer — sorgt nur für die linke Grid-Spalte, damit
       der Logo zentriert bleibt */
}

#meshprologo{
    grid-column: 2;
    justify-self: center;
    width: 200px;
    height: 90px;
    /* Flex-Center, damit der MESHPRO-Schriftzug exakt mittig im Box
       sitzt und sich an der Lang-Buttons-Mittellinie ausrichtet (die
       Topbar selber centered alles vertikal — nur ohne Flex-Center
       schob das alte top/bottom-Padding den Text nach oben). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
    color: black;
    background-color: white;
    font-size: 30px;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#meshprologo:hover{
    background-color: black;
    color: white;
}
.highlight{
    color: #0066cc;
}
#meshprologo:hover .highlight{
    color: #0066cc;
}

#langswitcher{
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 4px;
}
.lang-btn{
    background: white;
    color: black;
    border: 2px solid black;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lang-btn.active{
    background: black;
    color: white;
}
.lang-btn:hover{
    background: #0066cc;
    color: white;
    border-color: #0066cc;
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 90px);   /* abzüglich Topbar-Höhe */
    padding: 40px 20px 80px;
    box-sizing: border-box;
    gap: 48px;
    position: relative;
}
.cards{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}

.hero{
    text-align: center;
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    z-index: 3;
}
.hero-title{
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-mark{
    position: relative;
    display: inline-block;
    padding: 14px 40px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: clamp(40px, 5.6vw, 64px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #0066cc;
    border-radius: 22px;
    isolation: isolate;
    font-feature-settings: "kern" on, "ss01" on;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}
.hero-mark::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.45) 55%,
        rgba(220, 234, 255, 0.55) 100%);
    backdrop-filter: blur(22px) saturate(1.8);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 102, 204, 0.06),
        0 1px 0 rgba(0, 102, 204, 0.05),
        0 14px 44px -8px rgba(0, 102, 204, 0.22),
        0 4px 14px -4px rgba(0, 0, 0, 0.06);
    z-index: -1;
}
.hero-mark::after{
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.95),
        transparent);
    border-radius: 1px;
    z-index: -1;
    pointer-events: none;
}
.hero-sub-mark{
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #2a3340;
    font-feature-settings: "kern" on, "ss02" on;
}
.hero-tag{
    margin: 16px 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #0066cc;
    font-weight: 600;
    opacity: 0.9;
    font-feature-settings: "tnum" on;
    /* Auf Mobile war "Wähle deine Plattform" hinter den Cards
       verschwunden — Stack-Order erzwingen. */
    position: relative;
    z-index: 3;
}
.hero-tag::before,
.hero-tag::after{
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: #0066cc;
    vertical-align: middle;
    margin: 0 12px;
    opacity: 0.6;
}
.center{
    text-align: center!important;
}

.pos{
    position: relative;
    flex: 1 1 460px;
    min-width: 220px;
    max-width: 640px;
    cursor: pointer;
    animation: fadeUp 0.6s ease both;
}
/* Wide-screen breakpoints — let the cards use the available real estate
   instead of stranding 1500+ px of empty space on 2K/4K monitors. */
@media (min-width: 1200px){
    .pos{ max-width: 720px; }
    .cards{ gap: 56px; }
}
@media (min-width: 1600px){
    .pos{ max-width: 820px; }
    .cards{ gap: 72px; }
}
#pistole{ animation-delay: 0.05s; }
#gewehr{ animation-delay: 0.15s; }

@keyframes fadeUp{
    from{ opacity: 0; transform: translateY(12px); }
    to  { opacity: 1; transform: translateY(0); }
}

.pos img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 1192;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.pos:hover img{
    transform: scale(1.08);
}

.title{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 12px 28px;
    color: white;
    font-weight: 700;
    letter-spacing: 0.02em;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    transition: background-color 0.25s ease, border-color 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
}
.pos:hover .title{
    background-color: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.28);
}


.impressum{
    padding: 24px 20px;
    font-size: 13px;
    opacity: 0.5;
    margin-top: 40px;
}
.impressum a{
    margin: 0 6px;
    color: inherit;
}
.impressum a:hover{
    color: #0066cc;
}

#whitebackground{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    background-color: white;
    z-index: 999;
    transition: left 0.5s ease, right 0.5s ease;
}
.fullscreen{
    left: 0!important;
    right: 0!important;
}


@media only screen and (max-width: 768px){
    /* No overflow/height locks here — they were stopping the page from
       scrolling on mobile and made the absolutely-positioned navbar
       elements look pinned to the viewport. */
    .container{
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        padding: 24px 16px 52px;
        gap: 14px;
        box-sizing: border-box;
    }
    .hero{
        flex: 0 0 auto;
    }
    .hero-mark{
        font-size: 30px;
        padding: 8px 22px;
        border-radius: 18px;
    }
    .hero-sub-mark{
        font-size: 15px;
    }
    .hero-tag{
        font-size: 10px;
        letter-spacing: 0.28em;
        margin-top: 8px;
    }
    .hero-tag::before,
    .hero-tag::after{
        width: 18px;
        margin: 0 8px;
    }
    .cards{
        flex: 1 1 0;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        width: 100%;
    }
    .pos{
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        max-width: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    .pos img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .title{
        transform: translate(-50%, -50%) scale(1.05);
    }
    .pos:hover .title{
        transform: translate(-50%, -50%) scale(1.1);
    }
    /* Mobile-Layout: Topbar in zwei Reihen — Logo zentriert oben,
       Lang-Buttons darunter zentriert.  Kein Absolute-Positioning;
       das Topbar-Grid wechselt einfach auf 1 Spalte. */
    #topbar{
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 4px;
        padding: 8px 12px;
        min-height: 0;
    }
    #topbar .topbar-side--left{ display: none; }
    #meshprologo{
        grid-column: 1;
        width: 100%;
        max-width: 320px;
        height: auto;
        padding: 12px 10px;
        font-size: 22px;
        justify-self: center;
    }
    #langswitcher{
        grid-column: 1;
        justify-self: center;
        padding: 4px 0;
    }
    .container{
        padding: 24px 20px 60px;
    }
}