/* Datei: /public/css/site-nav.css */
/* Navigation der öffentlichen Seiten (app/Core/ui/site-nav.php): feste Leiste oben, Mega-Menü "Module"
   mit drei Bereichs-Spalten (Szene + Module), ab 960px abwärts Burger-Menü mit aufklappbaren Modulen.
   Verhalten (Hover mit kurzer Verzögerung, Klick, Esc, Burger) in /js/ct-site-nav.js. */

html { scroll-padding-top: 80px; } /* Anker (#plans, #early-access ...) landen unter der festen Leiste, nicht dahinter */

.ct-site-nav {
    --nav-h: 66px;
    position: sticky; top: 0; z-index: 900;
    background: rgba(15, 15, 18, .82);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--ct-border-soft);
}
.ct-site-nav::after { /* feine Bereichsfarben-Linie unter der Leiste */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; opacity: .55;
    background: linear-gradient(90deg, transparent, var(--ct-area-streaming) 25%, var(--ct-area-social) 50%, var(--ct-area-website) 75%, transparent);
}
.ct-site-nav__bar {
    max-width: 1240px; height: var(--nav-h); margin: 0 auto; padding: 0 22px;
    display: flex; align-items: center; gap: 28px;
}

.ct-site-nav__brand { display: flex; align-items: center; gap: 10px; color: var(--ct-text); text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.ct-site-nav__brand:hover { color: var(--ct-text); } /* kein Hover-Effekt am Logo (sonst färbt die allgemeine a:hover-Regel alles grün) */
.ct-site-nav__brand img { display: block; }
.ct-site-nav__brand b { font-weight: inherit; color: #a6c725; } /* gleiches Grün wie das Symbol */

.ct-site-nav__menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ct-site-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ct-site-nav__link {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 10px;
    background: none; color: var(--ct-text-muted); font: inherit; font-size: 15px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: color .15s, background-color .15s;
}
.ct-site-nav__link:hover, .has-mega.is-open > .ct-site-nav__link { color: var(--ct-text); background: rgba(255, 255, 255, .06); }
.ct-site-nav__link[aria-current="page"] { color: var(--ct-text); box-shadow: inset 0 -2px 0 var(--ct-primary); border-radius: 10px 10px 0 0; }
.ct-site-nav__chev { font-size: 11px; transition: transform .2s; }
.has-mega.is-open .ct-site-nav__chev { transform: rotate(180deg); }

.ct-site-nav__actions { display: flex; align-items: center; gap: 10px; }
.ct-site-nav__login { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; color: var(--ct-text); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 10px; }
.ct-site-nav__login:hover { background: rgba(255, 255, 255, .06); }
.ct-site-nav__cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    color: var(--ct-black, #0f0f12); font-size: 14px; font-weight: 700; text-decoration: none;
    background: linear-gradient(90deg, #A8D80B, #7FE0B0 55%, #38BDF8);
    box-shadow: 0 6px 22px -8px rgba(168, 216, 11, .7); transition: transform .15s, box-shadow .15s;
}
.ct-site-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(127, 224, 176, .8); }

.ct-site-nav__burger { display: none; }

/* ---------- Mega-Menü ---------- */
.ct-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 0 22px 22px; pointer-events: none;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; /* niedrige Fenster: im Menü scrollen */
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.has-mega.is-open .ct-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.ct-mega::before { /* Brücke zwischen Leiste und Menü, damit die Maus auf dem Weg nicht "rausfällt" */
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.ct-mega__inner, .ct-mega__foot { max-width: 1196px; margin: 0 auto; }
.ct-mega__inner {
    display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
    margin-top: 10px; padding: 16px; border: 1px solid var(--ct-border); border-bottom: 0; border-radius: 20px 20px 0 0;
    background: radial-gradient(120% 140% at 0% 0%, rgba(168, 216, 11, .07), transparent 45%),
                radial-gradient(120% 140% at 100% 0%, rgba(167, 139, 250, .08), transparent 45%),
                var(--ct-bg-soft);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.ct-mega__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px;
    border: 1px solid var(--ct-border); border-top-color: var(--ct-border-soft); border-radius: 0 0 20px 20px;
    background: var(--ct-bg-card); color: var(--ct-text-muted); font-size: 14px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.ct-mega__foot i.fa-star { color: var(--ct-primary); margin-right: 6px; }
.ct-mega__foot b { color: var(--ct-text); font-weight: 600; }
.ct-mega__foot a { color: var(--ct-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ct-mega__foot a:hover i { transform: translateX(3px); }
.ct-mega__foot a i { transition: transform .15s; margin-left: 4px; }

.ct-mega__col {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px;
    border-radius: 16px; background: rgba(255, 255, 255, .02); border: 1px solid var(--ct-border-soft);
}
.ct-mega__feature { display: grid; gap: 8px; padding: 2px 2px 6px; }
.ct-mega__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.ct-mega__area { color: var(--area); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ct-mega__area i { margin-right: 4px; }
.ct-mega__all { color: var(--ct-text-muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.ct-mega__all i { font-size: 10px; margin-left: 2px; transition: transform .15s; }
.ct-mega__all:hover { color: var(--area); }
.ct-mega__all:hover i { transform: translateX(3px); }
.ct-mega__pitch { margin: 0; padding: 0 4px; color: var(--ct-text-muted); font-size: 13px; line-height: 1.5; }

.ct-mega__tiles { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ct-mega__col--streaming .ct-mega__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-mega__tile {
    display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 12px;
    color: var(--ct-text); text-decoration: none; transition: background-color .15s;
}
.ct-mega__tile:hover, .ct-mega__tile:focus-visible { background: rgba(255, 255, 255, .06); }
.ct-mega__icon {
    display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
    color: var(--area); font-size: 15px;
    background: color-mix(in srgb, var(--area) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area) 28%, transparent);
    transition: transform .2s, background-color .2s, color .2s;
}
.ct-mega__tile:hover .ct-mega__icon { transform: scale(1.08) rotate(-4deg); background: var(--area); color: var(--ct-black, #0f0f12); }
.ct-mega__text { display: grid; gap: 2px; min-width: 0; }
.ct-mega__text strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ct-mega__text small {
    color: var(--ct-text-muted); font-size: 12px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-mega__badge {
    display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
    font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ct-text-muted); background: rgba(255, 255, 255, .08);
}
.ct-mega__more {
    margin-top: auto; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--ct-border);
    color: var(--ct-text-muted); font-size: 12px; text-decoration: none; text-align: center;
}
.ct-mega__more:hover { color: var(--area); border-color: var(--area); }

/* ---------- Szenen (gezeichnet, keine Screenshots) ---------- */
.ct-mega__scene {
    position: relative; height: 118px; border-radius: 12px; overflow: hidden; isolation: isolate;
    background: radial-gradient(90% 120% at 80% 0%, color-mix(in srgb, var(--area) 30%, transparent), transparent 60%), #14141a;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area) 22%, transparent);
}
.ct-mega__scene span, .ct-mega__scene i, .ct-mega__scene b, .ct-mega__scene em { position: absolute; display: block; }

/* Streaming: Spielbild, Kamera, Alert, Chat */
.ct-mega__scene--stream .s-screen { inset: 12px 34% 12px 12px; border-radius: 8px; overflow: hidden; background: linear-gradient(#2a1b5e, #7b3b8f 58%, #f08a4b); }
.ct-mega__scene--stream .s-sun { right: 18%; top: 22%; width: 22px; height: 22px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 24px #ffd27a; }
.ct-mega__scene--stream .s-hills { left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50% 50% 0 0; background: #1f5b3a; box-shadow: 60px -10px 0 -6px #40306b; }
.ct-mega__scene--stream .s-cam { left: 20px; bottom: 20px; width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #1b2440, #0d1020); box-shadow: 0 0 0 2px var(--area); }
.ct-mega__scene--stream .s-cam::after { content: ""; position: absolute; left: 50%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #e9b48f; box-shadow: 0 13px 0 4px #9146ff; }
.ct-mega__scene--stream .s-alert {
    left: 33%; top: 16px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 10px; font-weight: 700; color: var(--ct-black, #0f0f12); background: var(--area);
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--area) 70%, transparent);
}
.ct-mega__scene--stream .s-alert i { position: static; display: inline; margin-right: 3px; }
.ct-mega__scene--stream .s-chat { right: 12px; top: 12px; bottom: 12px; width: calc(34% - 22px); border-radius: 8px; background: rgba(255, 255, 255, .05); }
.ct-mega__scene--stream .s-chat i { left: 8px; right: 8px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.ct-mega__scene--stream .s-chat i:nth-child(1) { top: 12px; right: 30%; }
.ct-mega__scene--stream .s-chat i:nth-child(2) { top: 26px; background: color-mix(in srgb, var(--area) 45%, transparent); }
.ct-mega__scene--stream .s-chat i:nth-child(3) { top: 40px; right: 18%; }
.ct-mega__scene--stream .s-live { right: 18px; bottom: 18px; padding: 2px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #fff; background: #e5484d; }

/* Social Media: Beiträge im Fächer + Kalender */
.ct-mega__scene--social .s-post { top: 22px; width: 64px; height: 76px; border-radius: 10px; background: #1e1e25; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ct-mega__scene--social .s-post i { left: 7px; right: 7px; top: 7px; height: 38px; border-radius: 6px; background: linear-gradient(135deg, var(--area), #7FE0B0); }
.ct-mega__scene--social .s-post b { left: 7px; right: 18px; bottom: 12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.ct-mega__scene--social .s-post--1 { left: 50%; margin-left: -88px; transform: rotate(-10deg); }
.ct-mega__scene--social .s-post--1 i { background: linear-gradient(135deg, #f58529, #dd2a7b); }
.ct-mega__scene--social .s-post--2 { left: 50%; margin-left: -32px; top: 16px; z-index: 1; }
.ct-mega__scene--social .s-post--3 { left: 50%; margin-left: 24px; transform: rotate(10deg); }
.ct-mega__scene--social .s-post--3 i { background: linear-gradient(135deg, #1877f2, #a78bfa); }
.ct-mega__scene--social .s-cal { position: absolute; right: 12px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ct-black, #0f0f12); background: var(--area); font-size: 13px; }
.ct-mega__scene--social .s-cal i { position: static; }

/* Website: Browserfenster mit Cookie-Banner */
.ct-mega__scene--web .s-browser { left: 14px; right: 14px; top: 14px; bottom: -10px; border-radius: 10px 10px 0 0; background: #1e1e25; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ct-mega__scene--web .s-dots { left: 10px; top: 9px; display: flex !important; gap: 4px; position: absolute; }
.ct-mega__scene--web .s-dots i { position: static; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ct-mega__scene--web .s-browser > b { left: 12px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.ct-mega__scene--web .s-browser > b:nth-of-type(1) { top: 28px; width: 46%; height: 10px; background: rgba(255, 255, 255, .16); }
.ct-mega__scene--web .s-browser > b:nth-of-type(2) { top: 46px; width: 70%; }
.ct-mega__scene--web .s-browser > b:nth-of-type(3) { top: 60px; width: 58%; }
.ct-mega__scene--web .s-banner {
    left: 24px; right: 24px; bottom: 12px; height: 32px; padding: 0 8px; border-radius: 9px;
    display: flex !important; align-items: center; gap: 8px; position: absolute;
    background: #2a2a34; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .9), inset 0 0 0 1px color-mix(in srgb, var(--area) 40%, transparent);
}
.ct-mega__scene--web .s-banner > i { position: static; color: var(--area); font-size: 13px; }
.ct-mega__scene--web .s-banner > span { position: relative; flex: 1; height: 16px; }
.ct-mega__scene--web .s-banner > span b { left: 0; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.ct-mega__scene--web .s-banner > span b:nth-child(1) { top: 2px; width: 90%; }
.ct-mega__scene--web .s-banner > span b:nth-child(2) { top: 10px; width: 60%; }
.ct-mega__scene--web .s-banner > em { position: static; width: 34px; height: 16px; border-radius: 999px; background: var(--area); }

/* Leichte Bewegung, solange das Menü offen ist */
@media (prefers-reduced-motion: no-preference) {
    .has-mega.is-open .s-alert { animation: ct-mega-pop 2.8s ease-in-out infinite; }
    .has-mega.is-open .s-live { animation: ct-mega-blink 1.6s steps(2, jump-none) infinite; }
    .has-mega.is-open .s-post--2 { animation: ct-mega-float 3.2s ease-in-out infinite; }
    .has-mega.is-open .s-banner { animation: ct-mega-rise .5s cubic-bezier(.2, .9, .3, 1.3) both; }
    .has-mega.is-open .ct-mega__col { animation: ct-mega-in .32s ease both; }
    .has-mega.is-open .ct-mega__col:nth-child(2) { animation-delay: .04s; }
    .has-mega.is-open .ct-mega__col:nth-child(3) { animation-delay: .08s; }
}
@keyframes ct-mega-pop { 0%, 100% { transform: translateX(-50%) scale(1); } 12% { transform: translateX(-50%) scale(1.12); } 24% { transform: translateX(-50%) scale(1); } }
@keyframes ct-mega-blink { 50% { opacity: .35; } }
@keyframes ct-mega-float { 50% { transform: translateY(-5px); } }
@keyframes ct-mega-rise { from { transform: translateY(46px); } }
@keyframes ct-mega-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 1120px) {
    .ct-mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ct-mega__col--streaming { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
    .ct-mega__col--streaming .ct-mega__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ct-mega__scene { height: 92px; }
}

/* ---------- Handy / Tablet: Burger-Menü ---------- */
@media (max-width: 960px) {
    /* Ohne backdrop-filter: der macht die Leiste sonst zum Bezugsrahmen für das position:fixed-Menü */
    .ct-site-nav { --nav-h: 60px; background: var(--ct-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ct-site-nav__bar { padding: 0 16px; justify-content: space-between; }
    .ct-site-nav__burger {
        display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0;
        border: 0; border-radius: 12px; background: none; color: var(--ct-text); cursor: pointer;
    }
    .ct-site-nav__burger-lines, .ct-site-nav__burger-lines::before, .ct-site-nav__burger-lines::after {
        display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s;
    }
    .ct-site-nav__burger-lines { position: relative; }
    .ct-site-nav__burger-lines::before, .ct-site-nav__burger-lines::after { content: ""; position: absolute; left: 0; }
    .ct-site-nav__burger-lines::before { top: -7px; }
    .ct-site-nav__burger-lines::after { top: 7px; }
    .is-menu-open .ct-site-nav__burger-lines { background: transparent; }
    .is-menu-open .ct-site-nav__burger-lines::before { transform: translateY(7px) rotate(45deg); }
    .is-menu-open .ct-site-nav__burger-lines::after { transform: translateY(-7px) rotate(-45deg); }

    .ct-site-nav__menu {
        position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 1;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px;
        padding: 14px 16px 28px; overflow-y: auto; overscroll-behavior: contain;
        background: var(--ct-bg);
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .18s, transform .18s, visibility 0s linear .18s;
    }
    .is-menu-open .ct-site-nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

    .ct-site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
    .ct-site-nav__link { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 17px; color: var(--ct-text); }
    .ct-site-nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ct-primary); border-radius: 0 10px 10px 0; }

    .ct-mega { position: static; padding: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto; display: none; transition: none; max-height: none !important; overflow: visible; } /* !important: Höhe vom Desktop (JS) gilt hier nicht */
    .has-mega.is-open .ct-mega { display: block; }
    .ct-mega::before { display: none; }
    .ct-mega__inner { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .ct-mega__col, .ct-mega__col--streaming { display: flex; padding: 8px; }
    .ct-mega__col--streaming .ct-mega__tiles { grid-template-columns: minmax(0, 1fr); }
    .ct-mega .ct-mega__scene, .ct-mega__pitch, .ct-mega__more { display: none; }
    .ct-mega__feature { padding: 4px 2px 0; }
    .ct-mega__text small { -webkit-line-clamp: 1; }
    .ct-mega__foot { flex-direction: column; align-items: flex-start; margin-top: 10px; padding: 14px; border-radius: 14px; border-top-color: var(--ct-border); box-shadow: none; }
    .has-mega.is-open .ct-mega__col { animation: none; }

    .ct-site-nav__actions { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ct-border-soft); }
    .ct-site-nav__login, .ct-site-nav__cta { justify-content: center; padding: 14px 18px; font-size: 16px; }
    .ct-site-nav__login { border: 1px solid var(--ct-border); }

    html.ct-site-nav-lock { overflow: hidden; }
}