/* Datei: /public/css/area-page.css */
/* Öffentliche Bereichsseiten /pages/streaming.php, social-media.php, website.php (app/Core/ui/area-page.php).
   Bereichsfarbe kommt als --area vom <body>. Szenen und Badges aus site-nav.css. */

.ct-area { max-width: 1180px; margin: 0 auto; padding: 0 22px 40px; }
.ct-area-body { overflow-x: clip; } /* Leuchten und Fenster-Schatten dürfen nie seitlich scrollen lassen (clip: sticky bleibt intakt) */
html { scroll-padding-top: 84px; } /* Anker landen unter der festen Navigation, nicht dahinter */

.ct-area-kicker {
    display: inline-flex; align-items: center; gap: 8px; color: var(--area);
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Kopf ---------- */
.ct-area-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px;
    padding: 72px 0 48px;
}
.ct-area-hero::before { /* Leuchten in der Bereichsfarbe */
    content: ""; position: absolute; z-index: -1; right: -10%; top: -10%; width: 70%; height: 120%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--area) 22%, transparent), transparent);
    pointer-events: none;
}
.ct-area-hero h1 { margin: 14px 0 16px; font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.ct-area-hero__lead { max-width: 520px; margin: 0 0 28px; color: var(--ct-text-muted); font-size: 18px; line-height: 1.6; }
.ct-area-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ct-area-hero__actions .ct-site-nav__cta { padding: 13px 22px; font-size: 15px; }
.ct-area-ghost {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
    border: 1px solid var(--ct-border); color: var(--ct-text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.ct-area-ghost:hover { border-color: var(--area); color: var(--area); }

/* Szene aus dem Mega-Menü, hier groß - die Teile sitzen relativ, also wächst alles mit */
.ct-mega__scene.ct-area-hero__scene {
    height: auto; aspect-ratio: 16 / 10; border-radius: 22px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 0 0 1px color-mix(in srgb, var(--area) 30%, transparent);
    font-size: 200%;
}
.ct-area-hero__scene.ct-mega__scene--stream .s-screen { inset: 7% 32% 7% 5%; border-radius: 14px; }
.ct-area-hero__scene.ct-mega__scene--stream .s-sun { width: 15%; height: auto; aspect-ratio: 1; }
.ct-area-hero__scene.ct-mega__scene--stream .s-cam { left: 8%; bottom: 12%; width: 22%; height: 28%; border-radius: 12px; }
.ct-area-hero__scene.ct-mega__scene--stream .s-cam::after { top: 22%; width: 26%; height: auto; aspect-ratio: 1; margin-left: -13%; box-shadow: 0 28px 0 10px #9146ff; }
.ct-area-hero__scene.ct-mega__scene--stream .s-alert { top: 12%; padding: 8px 18px; font-size: 18px; }
.ct-area-hero__scene.ct-mega__scene--stream .s-chat { right: 5%; top: 7%; bottom: 7%; width: 24%; border-radius: 14px; }
.ct-area-hero__scene.ct-mega__scene--stream .s-chat i { left: 12%; right: 12%; height: 12px; border-radius: 6px; }
.ct-area-hero__scene.ct-mega__scene--stream .s-chat i:nth-child(1) { top: 10%; right: 35%; }
.ct-area-hero__scene.ct-mega__scene--stream .s-chat i:nth-child(2) { top: 20%; }
.ct-area-hero__scene.ct-mega__scene--stream .s-chat i:nth-child(3) { top: 30%; right: 22%; }
.ct-area-hero__scene.ct-mega__scene--stream .s-live { right: 8%; bottom: 9%; padding: 5px 12px; font-size: 14px; border-radius: 8px; }
.ct-area-hero__scene.ct-mega__scene--social .s-post { top: 20%; width: 28%; height: 62%; border-radius: 18px; }
.ct-area-hero__scene.ct-mega__scene--social .s-post i { left: 8%; right: 8%; top: 7%; height: 58%; border-radius: 12px; }
.ct-area-hero__scene.ct-mega__scene--social .s-post b { left: 8%; right: 25%; bottom: 12%; height: 10px; border-radius: 5px; }
.ct-area-hero__scene.ct-mega__scene--social .s-post--1 { margin-left: -38%; }
.ct-area-hero__scene.ct-mega__scene--social .s-post--2 { margin-left: -14%; top: 14%; }
.ct-area-hero__scene.ct-mega__scene--social .s-post--3 { margin-left: 10%; }
.ct-area-hero__scene.ct-mega__scene--social .s-cal { right: 6%; bottom: 8%; width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.ct-area-hero__scene.ct-mega__scene--web .s-browser { left: 7%; right: 7%; top: 9%; border-radius: 16px 16px 0 0; }
.ct-area-hero__scene.ct-mega__scene--web .s-dots { left: 18px; top: 16px; gap: 7px; }
.ct-area-hero__scene.ct-mega__scene--web .s-dots i { width: 11px; height: 11px; }
.ct-area-hero__scene.ct-mega__scene--web .s-browser > b { left: 20px; height: 12px; border-radius: 6px; }
.ct-area-hero__scene.ct-mega__scene--web .s-browser > b:nth-of-type(1) { top: 52px; height: 20px; }
.ct-area-hero__scene.ct-mega__scene--web .s-browser > b:nth-of-type(2) { top: 88px; }
.ct-area-hero__scene.ct-mega__scene--web .s-browser > b:nth-of-type(3) { top: 112px; }
.ct-area-hero__scene.ct-mega__scene--web .s-banner { left: 12%; right: 12%; bottom: 9%; height: 26%; padding: 0 18px; gap: 16px; border-radius: 16px; }
.ct-area-hero__scene.ct-mega__scene--web .s-banner > i { font-size: 28px; }
.ct-area-hero__scene.ct-mega__scene--web .s-banner > span { height: 32px; }
.ct-area-hero__scene.ct-mega__scene--web .s-banner > span b { height: 9px; }
.ct-area-hero__scene.ct-mega__scene--web .s-banner > span b:nth-child(2) { top: 20px; }
.ct-area-hero__scene.ct-mega__scene--web .s-banner > em { width: 64px; height: 30px; }
@media (prefers-reduced-motion: no-preference) {
    .ct-area-hero__scene .s-alert { animation: ct-mega-pop 2.8s ease-in-out infinite; }
    .ct-area-hero__scene .s-live { animation: ct-mega-blink 1.6s steps(2, jump-none) infinite; }
    .ct-area-hero__scene .s-post--2 { animation: ct-mega-float 3.2s ease-in-out infinite; }
    .ct-area-hero__scene .s-banner { animation: ct-mega-rise .7s .2s cubic-bezier(.2, .9, .3, 1.3) both; }
}

/* ---------- Sprungleiste ---------- */
.ct-area-jump {
    position: sticky; top: 66px; z-index: 50; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -22px 24px; padding: 12px 22px;
    background: rgba(15, 15, 18, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ct-border-soft);
}
.ct-area-jump::-webkit-scrollbar { display: none; }
.ct-area-jump a {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
    color: var(--ct-text-muted); font-size: 14px; font-weight: 600; text-decoration: none;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--ct-border-soft); transition: color .15s, border-color .15s;
}
.ct-area-jump a i { color: var(--area); font-size: 12px; }
.ct-area-jump a:hover, .ct-area-jump a.is-active { color: var(--ct-text); border-color: color-mix(in srgb, var(--area) 60%, transparent); }

/* ---------- Module ---------- */
.ct-area-mod {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px;
    padding: 64px 0; border-bottom: 1px solid var(--ct-border-soft);
}
.ct-area-mod.is-flipped .ct-area-mod__text { order: 2; }
.ct-area-mod__name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--area); font-size: 14px; font-weight: 700; }
.ct-area-mod__no { color: var(--ct-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
.ct-area-mod h2 { margin: 12px 0 14px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.ct-area-mod p { margin: 0 0 22px; color: var(--ct-text-muted); font-size: 16px; line-height: 1.7; }
.ct-area-mod__features { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-area-mod__features li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.ct-area-mod__features i {
    flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; transform: translateY(4px);
    font-size: 11px; color: var(--ct-black, #0f0f12); background: var(--area);
}

/* Gezeichnetes App-Fenster */
.ct-area-mod__visual { position: relative; padding: 24px; }
.ct-area-mod__visual::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 32px;
    background: radial-gradient(70% 70% at 50% 50%, color-mix(in srgb, var(--area) 20%, transparent), transparent 70%);
}
.ct-area-win {
    border-radius: 18px; overflow: hidden; background: var(--ct-bg-card);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--ct-border);
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .5s ease;
}
.ct-area-mod.is-flipped .ct-area-win { transform: perspective(1200px) rotateY(6deg) rotateX(2deg); }
.ct-area-mod:hover .ct-area-win { transform: perspective(1200px) rotateY(0) rotateX(0); }
.ct-area-win__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--ct-border-soft); }
.ct-area-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ct-area-win__bar span { margin-left: 10px; color: var(--ct-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-area-win__head { display: flex; align-items: center; gap: 14px; padding: 20px 20px 14px; }
.ct-area-win__icon {
    display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; font-size: 20px;
    color: var(--ct-black, #0f0f12); background: var(--area); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--area) 70%, transparent);
}
.ct-area-win__title { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ct-area-win__title b { font-size: 17px; font-weight: 700; }
.ct-area-win__title small { color: var(--ct-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-area-win__row {
    display: flex; align-items: center; gap: 12px; margin: 0 14px 8px; padding: 12px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--ct-border-soft); font-size: 13px;
}
.ct-area-win__row:last-child { margin-bottom: 18px; }
.ct-area-win__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--area); box-shadow: 0 0 10px var(--area); }
.ct-area-win__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ct-text); }
.ct-area-win__switch { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.ct-area-win__switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s; }
.ct-area-win__head .ct-area-win__switch, .ct-area-win__switch.is-on { background: var(--area); }
.ct-area-win__head .ct-area-win__switch::after, .ct-area-win__switch.is-on::after { transform: translateX(14px); }
.ct-area-mod__float {
    position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
    font-size: 26px; color: var(--area); background: var(--ct-bg-soft);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9), inset 0 0 0 1px color-mix(in srgb, var(--area) 45%, transparent);
}
.ct-area-mod.is-flipped .ct-area-mod__float { right: auto; left: 0; }

/* Einblenden beim Scrollen (Klasse is-in setzt ct-site-nav.js; ohne JS ist alles sofort sichtbar) */
@media (prefers-reduced-motion: no-preference) {
    .ct-area.is-ready .ct-area-mod { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .ct-area.is-ready .ct-area-mod.is-in { opacity: 1; transform: none; }
    .ct-area.is-ready .ct-area-win__row { opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(.25s + var(--n) * .08s); }
    .ct-area.is-ready .is-in .ct-area-win__row { opacity: 1; transform: none; }
    .ct-area-mod__float { animation: ct-mega-float 4s ease-in-out infinite; }
}

/* ---------- Ende: Aufruf + andere Bereiche ---------- */
.ct-area-end { display: grid; gap: 20px; padding: 72px 0 24px; }
.ct-area-end__cta {
    position: relative; overflow: hidden; padding: 48px; border-radius: 26px; text-align: center;
    background: radial-gradient(80% 140% at 50% 0%, color-mix(in srgb, var(--area) 22%, transparent), transparent 70%), var(--ct-bg-card);
    border: 1px solid var(--ct-border);
}
.ct-area-end__cta h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; }
.ct-area-end__cta p { max-width: 520px; margin: 0 auto 24px; color: var(--ct-text-muted); font-size: 16px; line-height: 1.6; }
.ct-area-end__cta .ct-site-nav__cta { padding: 13px 24px; font-size: 15px; }
.ct-area-end__others { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ct-area-other {
    display: grid; gap: 8px; padding: 24px; border-radius: 20px; text-decoration: none; color: var(--ct-text);
    background: var(--ct-bg-card); border: 1px solid var(--ct-border); transition: border-color .2s, transform .2s;
}
.ct-area-other strong { font-size: 20px; font-weight: 700; }
.ct-area-other small { color: var(--ct-text-muted); font-size: 13px; }
.ct-area-other:hover { border-color: var(--area); transform: translateY(-2px); }
.ct-area-other:hover small { color: var(--area); }

/* ---------- Schmal ---------- */
@media (max-width: 960px) {
    html { scroll-padding-top: 120px; }
    .ct-area { padding: 0 16px 32px; }
    .ct-area-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 0 32px; }
    .ct-area-hero__lead { font-size: 16px; }
    .ct-area-jump { top: 60px; margin: 0 -16px 8px; padding: 10px 16px; }
    .ct-area-mod { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 0; }
    .ct-area-mod.is-flipped .ct-area-mod__text { order: 0; }
    .ct-area-mod__visual { padding: 18px 10px; }
    .ct-area-win, .ct-area-mod.is-flipped .ct-area-win { transform: none; }
    .ct-area-mod__float { width: 52px; height: 52px; font-size: 21px; border-radius: 16px; }
    .ct-area-end__cta { padding: 32px 20px; }
}
@media (max-width: 520px) {
    .ct-mega__scene.ct-area-hero__scene { font-size: 100%; }
    .ct-area-hero__scene.ct-mega__scene--stream .s-alert { font-size: 11px; padding: 5px 10px; }
    .ct-area-hero__scene.ct-mega__scene--web .s-browser > b:nth-of-type(3) { display: none; }
}