/* EMS — Hexagon-Einstieg, lokaler Entwurf vom 05.09.2026.
   Originales Logo, Beschriftungen und Linkziele bleiben erhalten. */
.hex-hero {
    --hex-ease: cubic-bezier(.2,.7,.2,1);
    height: 100svh;
    min-height: 680px;
    padding: 0;
    background: #122538;
    isolation: isolate;
}
.hex-hero .hero-bg img {
    opacity: .46;
    filter: saturate(.48) contrast(1.04);
}
.hex-hero .hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,#10233755,transparent 35%,#10233775),
        radial-gradient(ellipse at 50% 50%,transparent 8%,#10233775 90%);
}
.hex-hero .hex-layout { overflow: hidden; }
.hex-hero .hex-center {
    width: min(1000px,104svh,60vw);
    top: 51%;
}
.hex-hero .hex-logo {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    animation: none;
    filter: drop-shadow(0 18px 32px #07152260);
    transition: filter .65s var(--hex-ease), transform .65s var(--hex-ease);
}
.hex-hero .hex-logo.logo-hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 22px 34px #07152285) drop-shadow(0 0 14px #e86f2c12);
}
.hex-hero .hex-panel {
    animation: none;
    border: 0;
    border-radius: 0;
    background: linear-gradient(125deg,#6383a312,#10233736);
    transition: background .65s var(--hex-ease);
    -webkit-tap-highlight-color: transparent;
}
.hex-hero .hex-panel:nth-of-type(even) {
    background: linear-gradient(155deg,#52749708,#091b2e50);
}
.hex-hero .hex-panel::before {
    background: radial-gradient(420px circle at var(--hex-light-x,50%) var(--hex-light-y,50%),#e7f3ff13,transparent 80%);
    transition: opacity .6s var(--hex-ease);
}
.hex-hero .hex-panel::after {
    border: 0;
    box-shadow: none;
    background: radial-gradient(ellipse at var(--content-x,50%) var(--content-y,50%),#e86f2c13,transparent 64%);
    opacity: 0;
    transition: opacity .65s var(--hex-ease);
}
.hex-hero .hex-panel:is(:hover,:focus-visible) {
    background: linear-gradient(130deg,#85a8c623,#1c34455e);
    outline: none;
}
.hex-hero .hex-panel:is(:hover,:focus-visible)::before,
.hex-hero .hex-panel:is(:hover,:focus-visible)::after { opacity: 1; }
.hex-hero .hex-panel-content {
    width: 250px;
    padding: 10px;
    text-align: center;
    white-space: normal;
    transform: translate(-50%,-50%);
    transition: transform .65s var(--hex-ease);
}
.hex-hero .hex-panel-6 .hex-panel-content { left: 35%; top: 24%; }
.hex-hero .hex-panel-1 .hex-panel-content { left: 65%; top: 24%; }
.hex-hero .hex-panel-5 .hex-panel-content { left: 17%; top: 51%; }
.hex-hero .hex-panel-2 .hex-panel-content { left: 83%; top: 51%; }
.hex-hero .hex-panel-4 .hex-panel-content { left: 35%; top: 78%; }
.hex-hero .hex-panel-3 .hex-panel-content { left: 65%; top: 78%; }
.hex-hero .hex-panel:is(:hover,:focus-visible) .hex-panel-content {
    transform: translate(-50%,calc(-50% - 3px));
}
.hex-hero .hex-panel-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 1px solid #edb28b30;
    border-radius: 11px;
    background: #112a3c60;
    box-shadow: inset 0 1px #ffffff0a;
    transition: color .5s, border-color .5s, background .5s;
}
.hex-hero .hex-panel-icon svg {
    width: 21px;
    height: 21px;
    stroke: #f69b60;
    stroke-width: 1.6;
}
.hex-hero .hex-panel:is(:hover,:focus-visible) .hex-panel-icon {
    transform: none;
    background: #e86f2c1c;
    border-color: #f69b6070;
    box-shadow: none;
}
.hex-hero .hex-panel:hover .hex-panel-icon svg { transform: none; }
.hex-hero .hex-panel-content h3 {
    font-size: clamp(1rem,1.25vw,1.25rem);
    font-weight: 650;
    letter-spacing: .035em;
    line-height: 1.25;
    margin: 0 0 8px;
    color: #fff;
}
.hex-hero .hex-panel-content p {
    font-size: clamp(.8125rem,.9vw,.9375rem);
    color: #c8d5e1;
    line-height: 1.6;
}
.hex-hero .hex-panel:is(:hover,:focus-visible) h3 { color: #ffb884; }
.hex-hero .hex-panel:is(:hover,:focus-visible) p { color: #eef4f8; }
.hex-hero .hex-panel:focus-visible h3 {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}
.hex-wireframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 16;
    pointer-events: none;
    overflow: visible;
}
.hex-wireframe path {
    fill: none;
    stroke: #cedfed1a;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke .65s var(--hex-ease);
}
.hex-wireframe path.is-active { stroke: #ef9a5e7a; }
.hex-wireframe .hex-hub-line { stroke: #edb28b45; }
.hex-hero .scroll-indicator {
    bottom: 24px;
    animation: none;
}
.hex-hero .scroll-indicator a {
    flex-direction: row;
    gap: 14px;
    color: #d1dde7;
    font-size: .6875rem;
    letter-spacing: .15em;
    min-height: 44px;
}
.hex-hero .scroll-indicator .mouse {
    width: 20px;
    height: 30px;
    border-width: 1px;
    border-color: #ffffff50;
}
.hex-hero .scroll-indicator .wheel {
    width: 2px;
    height: 5px;
    top: 6px;
    animation-duration: 3s;
}
@media (min-width: 1600px) {
    .hex-hero .hex-panel-6 .hex-panel-content,
    .hex-hero .hex-panel-4 .hex-panel-content { left: calc(50% - 260px); }
    .hex-hero .hex-panel-1 .hex-panel-content,
    .hex-hero .hex-panel-3 .hex-panel-content { left: calc(50% + 260px); }
    .hex-hero .hex-panel-5 .hex-panel-content { left: calc(50% - 560px); }
    .hex-hero .hex-panel-2 .hex-panel-content { left: calc(50% + 560px); }
}
@media (max-width: 992px) {
    .hex-hero { height: auto; min-height: 0; padding: 0 0 24px; }
    .hex-hero .hero-bg img { opacity: .27; object-position: 45% center; }
    .hex-hero .hero-overlay { background: linear-gradient(180deg,#10233740,#102337db); }
    .hex-hero .hex-layout {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
        padding: 96px 24px 20px;
        max-width: 740px;
        margin: auto;
    }
    .hex-hero .hex-center {
        grid-column: 1 / -1;
        position: relative;
        width: 100%;
        height: 240px;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 0 18px;
    }
    .hex-hero .hex-logo,
    .hex-hero .hex-logo.logo-hover {
        position: absolute;
        top: -120px;
        left: 50%;
        width: 720px;
        height: 480px;
        max-width: none;
        margin: 0;
        transform: translateX(-50%);
    }
    .hex-hero .hex-panel,
    .hex-hero .hex-panel:nth-of-type(even) {
        position: relative;
        clip-path: none !important;
        border: 1px solid #b6cede28;
        border-radius: 10px;
        background: linear-gradient(135deg,#718da815,#0d203366);
        min-height: 144px;
    }
    .hex-hero .hex-panel::before { display: none; }
    .hex-hero .hex-panel::after {
        inset: auto 18px 0;
        height: 1px;
        background: #e9a173;
        opacity: .35;
    }
    .hex-hero .hex-panel-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        padding: 20px;
        text-align: left;
        transform: none !important;
    }
    .hex-hero .hex-panel-content::after {
        content: '↗';
        position: absolute;
        top: 20px;
        right: 18px;
        font-size: 17px;
        line-height: 1;
        color: #c8d5e190;
    }
    .hex-hero .hex-panel-icon {
        width: 28px;
        height: 28px;
        margin: 0 0 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .hex-hero .hex-panel-content h3 { font-size: 1rem; letter-spacing: -.02em; margin-bottom: 6px; text-transform: none; }
    .hex-hero .hex-panel-content p { font-size: .8125rem; line-height: 1.6; }
    .hex-hero .hex-panel:focus-visible { outline: 2px solid #ffb884; outline-offset: -3px; }
    .hex-wireframe { display: none; }
    .hex-hero .scroll-indicator {
        position: relative;
        inset: auto;
        transform: none;
        display: flex;
        justify-content: center;
        padding: 12px 20px 0;
    }
}
@media (max-width: 480px) {
    .hex-hero .hex-layout { padding: 84px 20px 16px; gap: 10px; }
    .hex-hero .hex-center { height: 240px; margin-bottom: 10px; }
    .hex-hero .hex-panel-content { padding: 18px 14px; }
    .hex-hero .hex-panel-content h3 { font-size: .9375rem; }
    .hex-hero .hex-panel-content p { font-size: .75rem; overflow-wrap: anywhere; }
    .hex-hero .hex-panel-content::after { top: 18px; right: 14px; }
}
/* Auf sehr schmalen Geräten bleibt der Menüknopf vollständig erreichbar. */
@media (max-width: 360px) {
    .site-nav .wrap { padding-inline: 12px; gap: 8px; }
    .site-nav .brand { min-width: 0; font-size: .875rem; gap: 6px; letter-spacing: -.035em; }
    .site-nav .brand-mark { flex-shrink: 0; }
    .site-nav .nav-burger { width: 44px; min-width: 44px; height: 44px; flex: 0 0 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .hex-hero *, .hex-hero *::before, .hex-hero *::after {
        animation: none !important;
        transition: none !important;
    }
    .hex-hero #hero-parallax { transform: none !important; }
    .hex-hero .hex-logo.logo-hover { transform: none; }
    .hex-hero .hex-panel:is(:hover,:focus-visible) .hex-panel-content { transform: translate(-50%,-50%); }
}
@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
    .hex-hero .hex-logo.logo-hover { transform: translateX(-50%); }
}