/* Datei: /public/css/teaser.css */
/* Startseite: Teaser "Das erwartet dich" (app/Core/ui/landing-teaser.php).
   Szenen sind reines HTML/CSS. Maße innerhalb der Szenen in cqw (Breite des Fensters),
   damit alles vom Handy bis zum Monitor gleich aussieht. Animationen laufen nur,
   solange die Szene im Bild ist (public/js/teaser.js setzt .is-visible). */

.ct-tz {
    --tz-lime: #A8D80B; --tz-cyan: #38BDF8; --tz-purple: #9146FF;
    --tz-d: 12s;
    position: relative; overflow: hidden;
    padding: 110px 24px 120px;
    border-top: 1px solid var(--ct-border-soft);
    background: radial-gradient(ellipse at 50% 0%, rgba(145, 70, 255, .10), transparent 60%), var(--ct-bg);
}
.ct-tz__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ct-tz__bg { position: absolute; inset: 0; pointer-events: none; }
.ct-tz__glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(110px); opacity: .22; }
.ct-tz__glow--a { top: 18%; left: -260px; background: var(--tz-lime); }
.ct-tz__glow--b { top: 55%; right: -260px; background: var(--tz-cyan); }
.ct-tz__inner { position: relative; max-width: 1180px; margin: 0 auto; }

/* Kopf */
.ct-tz__head { text-align: center; max-width: 720px; margin: 0 auto 80px; }
.ct-tz__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
    background: rgba(56, 189, 248, .10); border: 1px solid rgba(56, 189, 248, .45); color: var(--tz-cyan);
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.ct-tz__head h2 { margin: 20px 0 14px; font-size: clamp(34px, 6vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -.02em; }
.ct-tz__head h2 span, .ct-tz__final h2 {
    background: linear-gradient(90deg, var(--tz-lime), var(--tz-cyan), var(--tz-purple), var(--tz-lime)); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: ctTzGradient 7s linear infinite;
}
.ct-tz__head p { margin: 0; color: var(--ct-text-muted); font-size: 18px; line-height: 1.6; }

/* Kapitel */
.ct-tz__chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-bottom: 120px; }
.ct-tz__chapter.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ct-tz__chapter.is-flip .ct-tz__copy { order: 2; }
.ct-tz__kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--tz-lime); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ct-tz__kicker b {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: rgba(168, 216, 11, .12); border: 1px solid rgba(168, 216, 11, .45); font-size: 13px; letter-spacing: 0;
}
.ct-tz__copy h3 { margin: 16px 0 14px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.ct-tz__copy p { margin: 0 0 20px; color: var(--ct-text-muted); font-size: 16.5px; line-height: 1.7; }
.ct-tz__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ct-tz__tags li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ct-border-soft); color: var(--ct-text); font-size: 13px; }

/* Fenster */
.ct-tz__screen {
    position: relative; container-type: inline-size; border-radius: 16px; overflow: hidden;
    background: #0b0c10; border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(168, 216, 11, .06), 0 0 70px rgba(56, 189, 248, .08);
    transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .6s ease;
}
.ct-tz__chapter.is-flip .ct-tz__screen { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); }
.ct-tz__chapter .ct-tz__screen:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.ct-tz__bar { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 36px; background: #15171e; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 12px; color: var(--ct-text-muted); }
.ct-tz__dots { display: flex; gap: 6px; }
.ct-tz__dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3d48; }
.ct-tz__dots i:first-child { background: #ff5f57; } .ct-tz__dots i:nth-child(2) { background: #febc2e; } .ct-tz__dots i:nth-child(3) { background: #28c840; }
.ct-tz__wtitle { flex: 1; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-tz__rec { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ct-tz__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: ctTzBlink 1.4s ease-in-out infinite; }
.ct-tz__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0f1016; font-size: 1.6cqw; color: #fff; }
.tz-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ───── Szene 1: Layout-Editor ───── */
.tz-l-tabs { position: absolute; left: 2%; top: 3.5%; display: flex; gap: .6cqw; }
.tz-l-tabs span { padding: .45cqw 1.1cqw; border-radius: .6cqw; background: rgba(255, 255, 255, .06); color: #9aa0ad; font-size: 1.25cqw; font-weight: 600; }
.tz-l-tabs .is-on { background: var(--tz-lime); color: #111; }
.tz-l-stage { position: absolute; left: 2%; top: 15%; width: 70%; height: 70%; border-radius: .8cqw; overflow: hidden; outline: 1px solid rgba(255, 255, 255, .12); }
.tz-l-cam {
    position: absolute; left: 68%; top: 58%; width: 29%; height: 38%; border-radius: .8cqw; overflow: hidden;
    outline: .25cqw solid var(--tz-lime); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .5);
    animation: tzLCam var(--tz-d) cubic-bezier(.5, 0, .3, 1) infinite;
}
.tz-cursor { position: absolute; left: 82%; top: 77%; width: 2.6cqw; height: 2.6cqw; filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .5)); opacity: 0; animation: tzLCursor var(--tz-d) cubic-bezier(.5, 0, .3, 1) infinite; }
.tz-l-alert {
    position: absolute; left: 50%; top: 5%; transform: translateX(-50%); white-space: nowrap;
    padding: .9cqw 1.6cqw; border-radius: 99px; background: linear-gradient(90deg, var(--tz-purple), #c026d3); font-size: 1.4cqw;
    box-shadow: 0 0 2cqw rgba(145, 70, 255, .6);
    --tz-from: translate(-50%, -160%); animation: tzIn36 var(--tz-d) cubic-bezier(.3, 1.4, .5, 1) infinite;
}
.tz-l-alert i { color: #fda4af; }
.tz-l-chat { position: absolute; left: 3%; top: 30%; width: 24%; height: 50%; padding: 1cqw; border-radius: .8cqw; background: rgba(10, 10, 16, .72); display: flex; flex-direction: column; justify-content: flex-end; gap: .7cqw; --tz-from: translateX(-130%); animation: tzIn46 var(--tz-d) ease-out infinite; }
.tz-l-chat i { display: block; height: .9cqw; border-radius: 99px; background: rgba(255, 255, 255, .28); }
.tz-l-chat i:nth-child(1) { width: 70%; } .tz-l-chat i:nth-child(2) { width: 90%; background: rgba(56, 189, 248, .6); } .tz-l-chat i:nth-child(3) { width: 55%; } .tz-l-chat i:nth-child(4) { width: 80%; background: rgba(168, 216, 11, .6); }
.tz-l-ticker { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1cqw; height: 9%; padding: 0 1cqw; background: rgba(8, 8, 12, .85); font-size: 1.2cqw; white-space: nowrap; overflow: hidden; --tz-from: translateY(110%); animation: tzIn56 var(--tz-d) ease-out infinite; }
.tz-l-ticker b { padding: .1cqw .7cqw; border-radius: .4cqw; background: #ef4444; font-size: 1cqw; }
.tz-l-ticker span { color: #d1d5db; }
.tz-l-panel { position: absolute; right: 2%; top: 6%; width: 24%; height: 88%; padding: 1cqw; border-radius: .8cqw; background: #16181f; border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: .6cqw; }
.tz-l-panel__head { font-size: 1.2cqw; font-weight: 700; color: #9aa0ad; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4cqw; }
.tz-l-row { display: flex; align-items: center; gap: .8cqw; padding: .8cqw 1cqw; border-radius: .6cqw; background: rgba(255, 255, 255, .04); border: 1px solid transparent; font-size: 1.3cqw; }
.tz-l-row i { width: 1.6cqw; color: var(--tz-lime); }
.tz-l-row--cam { --tz-from: translateX(40%); animation: tzRow08 var(--tz-d) ease-out infinite; }
.tz-l-row--alert { --tz-from: translateX(40%); animation: tzRow36 var(--tz-d) ease-out infinite; }
.tz-l-row--chat { --tz-from: translateX(40%); animation: tzRow46 var(--tz-d) ease-out infinite; }
.tz-l-row--ticker { --tz-from: translateX(40%); animation: tzRow56 var(--tz-d) ease-out infinite; }
.tz-l-row.is-base { margin-top: auto; opacity: .7; }
.tz-toast {
    position: absolute; left: 37%; bottom: 3.5%; transform: translateX(-50%); white-space: nowrap;
    padding: .8cqw 1.6cqw; border-radius: 99px; background: rgba(168, 216, 11, .15); border: 1px solid var(--tz-lime); color: var(--tz-lime);
    font-size: 1.3cqw; font-weight: 700; --tz-from: translate(-50%, 70%); animation: tzIn66 var(--tz-d) ease-out infinite;
}

@keyframes tzLCam {
    0%, 6%   { left: 36%; top: 30%; opacity: 0; transform: scale(.4); }
    10%, 13% { left: 36%; top: 30%; opacity: 1; transform: scale(1); }
    31%, 93% { left: 68%; top: 58%; opacity: 1; transform: none; }
    98%, 100% { left: 68%; top: 58%; opacity: 0; transform: none; }
}
@keyframes tzLCursor {
    0%, 7%  { left: 92%; top: 96%; opacity: 0; transform: none; }
    11%     { left: 51%; top: 49%; opacity: 1; transform: none; }
    13%     { left: 51%; top: 49%; opacity: 1; transform: scale(.82); }
    31%     { left: 83%; top: 77%; opacity: 1; transform: scale(.82); }
    34%     { left: 83%; top: 77%; opacity: 1; transform: none; }
    42%, 100% { left: 97%; top: 98%; opacity: 0; transform: none; }
}
/* Generisch: ab X % einblenden, bei 93 % für den nächsten Durchlauf ausblenden. Richtung über --tz-from. */
@keyframes tzIn36 { 0%, 34% { opacity: 0; transform: var(--tz-from); } 40%, 93% { opacity: 1; transform: translateX(-50%); } 98%, 100% { opacity: 0; } }
@keyframes tzIn46 { 0%, 44% { opacity: 0; transform: var(--tz-from); } 50%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzIn56 { 0%, 54% { opacity: 0; transform: var(--tz-from); } 60%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzIn66 { 0%, 64% { opacity: 0; transform: var(--tz-from); } 69%, 88% { opacity: 1; transform: translateX(-50%); } 93%, 100% { opacity: 0; transform: translateX(-50%); } }
@keyframes tzRow08 { 0%, 8% { opacity: 0; transform: var(--tz-from); } 11% { opacity: 1; transform: none; border-color: var(--tz-lime); background: rgba(168, 216, 11, .14); } 33% { border-color: var(--tz-lime); background: rgba(168, 216, 11, .14); } 36%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzRow36 { 0%, 35% { opacity: 0; transform: var(--tz-from); } 38%, 44% { opacity: 1; transform: none; border-color: var(--tz-lime); background: rgba(168, 216, 11, .14); } 47%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzRow46 { 0%, 45% { opacity: 0; transform: var(--tz-from); } 48%, 54% { opacity: 1; transform: none; border-color: var(--tz-lime); background: rgba(168, 216, 11, .14); } 57%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzRow56 { 0%, 55% { opacity: 0; transform: var(--tz-from); } 58%, 64% { opacity: 1; transform: none; border-color: var(--tz-lime); background: rgba(168, 216, 11, .14); } 67%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* ───── Szene 2: Kamera zuschneiden ───── */
.tz-c-frame {
    position: absolute; left: 30.3%; top: 12%; width: 39.4%; height: 70%; border-radius: 50%;
    outline: .25cqw solid var(--tz-lime); box-shadow: 0 0 0 200cqw rgba(6, 7, 11, .74);
    animation: tzCFrame var(--tz-d) cubic-bezier(.6, 0, .25, 1) infinite;
}
.tz-c-frame i { position: absolute; width: 1.6cqw; height: 1.6cqw; background: #fff; border: .25cqw solid var(--tz-lime); border-radius: .3cqw; animation: tzCHandle var(--tz-d) linear infinite; }
.tz-c-frame i:nth-child(1) { left: -.8cqw; top: -.8cqw; } .tz-c-frame i:nth-child(2) { right: -.8cqw; top: -.8cqw; }
.tz-c-frame i:nth-child(3) { left: -.8cqw; bottom: -.8cqw; } .tz-c-frame i:nth-child(4) { right: -.8cqw; bottom: -.8cqw; }
.tz-c-chips { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); display: flex; gap: .6cqw; padding: .6cqw; border-radius: 99px; background: rgba(20, 22, 30, .9); border: 1px solid rgba(255, 255, 255, .1); }
.tz-c-chip { padding: .5cqw 1.3cqw; border-radius: 99px; font-size: 1.3cqw; font-weight: 600; color: #9aa0ad; white-space: nowrap; }
.tz-c-chip--1 { animation: tzCChip1 var(--tz-d) linear infinite; }
.tz-c-chip--2 { animation: tzCChip2 var(--tz-d) linear infinite; }
.tz-c-chip--3 { animation: tzCChip3 var(--tz-d) linear infinite; }
.tz-c-chip--4 { animation: tzCChip4 var(--tz-d) linear infinite; }
.tz-c-chip--5 { background: var(--tz-lime); color: #111; animation: tzCChip5 var(--tz-d) linear infinite; }
@keyframes tzCFrame {
    0%, 12%  { left: 3%; top: 5%; width: 94%; height: 90%; border-radius: 0; }
    22%, 32% { left: 18%; top: 8%; width: 64%; height: 84%; border-radius: 0; }
    42%, 52% { left: 30.3%; top: 12%; width: 39.4%; height: 70%; border-radius: 0; }
    60%, 70% { left: 30.3%; top: 12%; width: 39.4%; height: 70%; border-radius: 3cqw; }
    78%, 92% { left: 30.3%; top: 12%; width: 39.4%; height: 70%; border-radius: 50%; }
    100%     { left: 3%; top: 5%; width: 94%; height: 90%; border-radius: 0; }
}
@keyframes tzCHandle { 0%, 70% { opacity: 1; } 76%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tzCChip1 { 0%, 16% { background: var(--tz-lime); color: #111; } 17%, 100% { background: transparent; color: #9aa0ad; } }
@keyframes tzCChip2 { 0%, 16% { background: transparent; color: #9aa0ad; } 17%, 36% { background: var(--tz-lime); color: #111; } 37%, 100% { background: transparent; color: #9aa0ad; } }
@keyframes tzCChip3 { 0%, 36% { background: transparent; color: #9aa0ad; } 37%, 55% { background: var(--tz-lime); color: #111; } 56%, 100% { background: transparent; color: #9aa0ad; } }
@keyframes tzCChip4 { 0%, 55% { background: transparent; color: #9aa0ad; } 56%, 73% { background: var(--tz-lime); color: #111; } 74%, 100% { background: transparent; color: #9aa0ad; } }
@keyframes tzCChip5 { 0%, 73% { background: transparent; color: #9aa0ad; } 74%, 97% { background: var(--tz-lime); color: #111; } 98%, 100% { background: transparent; color: #9aa0ad; } }

/* ───── Szene 3: Bild & Farben ───── */
.tz-k-img { position: absolute; left: 2%; top: 5%; width: 66%; height: 90%; border-radius: .8cqw; overflow: hidden; outline: 1px solid rgba(255, 255, 255, .12); }
.tz-k-before { filter: saturate(.35) brightness(.72) contrast(.85); }
.tz-k-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); filter: saturate(1.35) contrast(1.08) brightness(1.05); animation: tzKClip 8s ease-in-out infinite; }
.tz-k-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: .3cqw; margin-left: -.15cqw; background: #fff; box-shadow: 0 0 1.2cqw rgba(255, 255, 255, .7); animation: tzKLeft 8s ease-in-out infinite; }
.tz-k-handle span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #111; font-size: 1.5cqw; }
.tz-k-lbl { position: absolute; top: 3%; padding: .3cqw .9cqw; border-radius: .4cqw; background: rgba(0, 0, 0, .55); font-size: 1.15cqw; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tz-k-lbl--a { right: 3%; color: var(--tz-lime); } .tz-k-lbl--b { left: 3%; color: #cbd5e1; }
.tz-k-panel { position: absolute; right: 2%; top: 5%; width: 28%; height: 90%; padding: 1.4cqw; border-radius: .8cqw; background: #16181f; border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; justify-content: center; gap: 1.5cqw; }
.tz-k-slider span { display: block; margin-bottom: .5cqw; font-size: 1.2cqw; color: #cbd5e1; }
.tz-k-slider b { position: relative; display: block; height: .5cqw; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.tz-k-slider b i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 99px; background: linear-gradient(90deg, var(--tz-cyan), var(--tz-lime)); animation: tzKSlide 8s ease-in-out infinite; }
.tz-k-slider b i::after { content: ""; position: absolute; right: -.8cqw; top: 50%; width: 1.6cqw; height: 1.6cqw; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 .8cqw rgba(168, 216, 11, .8); }
.tz-k-slider:nth-child(2) b i { animation-delay: .15s; } .tz-k-slider:nth-child(3) b i { animation-delay: .3s; } .tz-k-slider:nth-child(4) b i { animation-delay: .45s; } .tz-k-slider:nth-child(5) b i { animation-delay: .6s; }
.tz-k-key { display: flex; align-items: center; gap: .8cqw; margin-top: .4cqw; font-size: 1.2cqw; color: #cbd5e1; }
.tz-k-sw { position: relative; width: 3.2cqw; height: 1.8cqw; border-radius: 99px; background: var(--tz-lime); }
.tz-k-sw::after { content: ""; position: absolute; right: .25cqw; top: .25cqw; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #111; }
@keyframes tzKClip { 0%, 100% { clip-path: inset(0 0 0 88%); } 50% { clip-path: inset(0 0 0 12%); } }
@keyframes tzKLeft { 0%, 100% { left: 88%; } 50% { left: 12%; } }
@keyframes tzKSlide { 0%, 100% { width: 18%; } 50% { width: var(--v); } }

/* ───── Szene 4: Szenen & OBS ───── */
.tz-s-tabs { position: absolute; left: 3%; right: 3%; top: 5%; display: flex; gap: .8cqw; padding: .6cqw; border-radius: 1cqw; background: #16181f; border: 1px solid rgba(255, 255, 255, .07); }
.tz-s-tabs span { flex: 1; padding: .8cqw 0; border-radius: .6cqw; text-align: center; font-size: 1.35cqw; font-weight: 700; color: #9aa0ad; white-space: nowrap; }
.tz-s-obs { position: absolute; left: 3%; right: 3%; top: 21%; bottom: 5%; border-radius: 1cqw; overflow: hidden; background: #1e1f26; border: 1px solid rgba(255, 255, 255, .08); }
.tz-s-obs__bar { height: 9%; display: flex; align-items: center; gap: .5cqw; padding: 0 1.2cqw; background: #2a2b33; font-size: 1.15cqw; color: #9aa0ad; white-space: nowrap; }
.tz-s-obs__bar b { color: #fff; }
.tz-s-obs__body { position: absolute; top: 9%; left: 0; right: 0; bottom: 0; display: flex; gap: 1.2cqw; padding: 1.2cqw; }
.tz-s-prog { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 9; border-radius: .5cqw; overflow: hidden; background: #000; }
.tz-s-pane { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .6cqw; }
.tz-s-pane--soon { background: radial-gradient(circle at 50% 40%, #2d1b69, #0b0b14); }
.tz-s-pane--soon small { font-size: 1.4cqw; color: #c4b5fd; letter-spacing: .1em; text-transform: uppercase; }
.tz-s-pane--soon strong { font-size: 4.2cqw; font-weight: 700; color: var(--tz-lime); }
.tz-s-bubble { position: absolute; right: 4%; bottom: 7%; width: 24%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; outline: .25cqw solid var(--tz-lime); }
.tz-s-pane--chat .tz-s-side { position: absolute; right: 3%; top: 8%; bottom: 8%; width: 28%; padding: .8cqw; border-radius: .6cqw; background: rgba(8, 8, 12, .75); display: flex; flex-direction: column; justify-content: flex-end; gap: .6cqw; }
.tz-s-side i { display: block; height: .8cqw; border-radius: 99px; background: rgba(255, 255, 255, .3); }
.tz-s-side i:nth-child(2) { width: 70%; background: rgba(56, 189, 248, .7); } .tz-s-side i:nth-child(3) { width: 85%; background: rgba(168, 216, 11, .7); }
.tz-s-pane--pause { background: linear-gradient(135deg, #0f2027, #203a43); }
.tz-s-pane--pause i { font-size: 4cqw; color: var(--tz-cyan); }
.tz-s-pane--pause strong { font-size: 2.2cqw; font-weight: 700; }
.tz-s-live { position: absolute; left: 3%; top: 5%; padding: .2cqw .8cqw; border-radius: .4cqw; background: #ef4444; font-size: 1cqw; font-weight: 700; }
.tz-s-stinger {
    position: absolute; top: -10%; bottom: -10%; left: -20%; width: 140%; display: grid; place-items: center;
    background: linear-gradient(100deg, transparent 0 18%, var(--tz-lime) 18% 40%, var(--tz-cyan) 40% 60%, var(--tz-purple) 60% 82%, transparent 82%);
    transform: translateX(-110%); animation: tzSSting calc(var(--tz-d) / 4) cubic-bezier(.7, 0, .3, 1) infinite;
}
.tz-s-stinger img { width: 12%; filter: drop-shadow(0 0 1cqw rgba(0, 0, 0, .5)); }
.tz-s-list { flex: 1; display: flex; flex-direction: column; gap: .5cqw; min-width: 0; }
.tz-s-list small { font-size: 1.1cqw; color: #9aa0ad; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3cqw; }
.tz-s-list span { padding: .6cqw .9cqw; border-radius: .4cqw; font-size: 1.2cqw; color: #cbd5e1; background: rgba(255, 255, 255, .04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Vier Szenen je 3 s: gleiche Keyframes, zeitversetzt über negative Verzögerung. */
.tz-q { animation: var(--tz-q-anim) var(--tz-d) step-end infinite; }
.tz-q--1 { animation-delay: calc(var(--tz-d) * -.75); }
.tz-q--2 { animation-delay: calc(var(--tz-d) * -.5); }
.tz-q--3 { animation-delay: calc(var(--tz-d) * -.25); }
.tz-s-tabs .tz-q { --tz-q-anim: tzQTab; }
.tz-s-list .tz-q { --tz-q-anim: tzQList; }
.tz-s-pane.tz-q { --tz-q-anim: tzQPane; }
.tz-s-pane.tz-q--0 { z-index: 1; }
@keyframes tzQTab { 0% { background: var(--tz-lime); color: #111; box-shadow: 0 0 1.4cqw rgba(168, 216, 11, .45); } 25%, 100% { background: transparent; color: #9aa0ad; box-shadow: none; } }
@keyframes tzQList { 0% { background: rgba(56, 189, 248, .25); color: #fff; } 25%, 100% { background: rgba(255, 255, 255, .04); color: #cbd5e1; } }
@keyframes tzQPane { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes tzSSting { 0% { transform: translateX(0); } 12%, 88% { transform: translateX(110%); } 88.01% { transform: translateX(-110%); } 100% { transform: translateX(0); } }

/* ───── Szene 5: Live ───── */
.tz-v-cam { position: absolute; right: 3%; bottom: 5%; width: 22%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; outline: .3cqw solid var(--tz-lime); box-shadow: 0 0 2cqw rgba(168, 216, 11, .4); }
.tz-v-alert {
    position: absolute; left: 50%; top: 10%; display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 2.4cqw 1.2cqw 1.4cqw; border-radius: 1.4cqw;
    background: linear-gradient(135deg, var(--tz-purple), #c026d3); box-shadow: 0 1cqw 3cqw rgba(145, 70, 255, .6); white-space: nowrap;
    transform: translateX(-50%); animation: tzVAlert var(--tz-d) cubic-bezier(.3, 1.5, .5, 1) infinite;
}
.tz-v-alert > i { font-size: 2.6cqw; color: #fda4af; animation: tzVHeart .6s ease-in-out infinite alternate; }
.tz-v-alert small { display: block; font-size: 1.1cqw; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tz-v-alert b { font-size: 2.2cqw; }
.tz-v-burst { position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .18) 0 6deg, transparent 6deg 18deg); border-radius: 50%; animation: ctTzSpin 6s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 65%); }
.tz-v-give { position: absolute; right: 3%; top: 5%; width: 24%; padding: 1cqw 1.2cqw; border-radius: 1cqw; background: rgba(10, 10, 16, .8); border: 1px solid rgba(168, 216, 11, .5); font-size: 1.2cqw; }
.tz-v-give i { color: var(--tz-lime); }
.tz-v-give small { margin-left: .4cqw; padding: .1cqw .5cqw; border-radius: .3cqw; background: rgba(168, 216, 11, .2); color: var(--tz-lime); font-size: 1cqw; }
.tz-v-count { display: block; margin: .5cqw 0; font-size: 2.6cqw; font-weight: 700; counter-reset: tzn var(--tz-n); animation: tzVCount var(--tz-d) linear infinite; }
.tz-v-count::after { content: counter(tzn) " dabei"; }
.tz-v-give > span { display: block; height: .5cqw; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.tz-v-give > span i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, var(--tz-cyan), var(--tz-lime)); animation: tzVBar var(--tz-d) linear infinite; }
.tz-v-chat { position: absolute; left: 3%; bottom: 5%; width: 38%; padding: 1cqw; border-radius: 1cqw; background: rgba(10, 10, 16, .78); display: flex; flex-direction: column; gap: .7cqw; }
.tz-v-m { margin: 0; font-size: 1.3cqw; line-height: 1.35; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-v-m b { margin-right: .4cqw; }
.tz-v-m--1 { animation: tzVM1 var(--tz-d) ease-out infinite; }
.tz-v-m--2 { animation: tzVM2 var(--tz-d) ease-out infinite; }
.tz-v-m--3 { animation: tzVM3 var(--tz-d) ease-out infinite; }
.tz-v-m--4 { animation: tzVM4 var(--tz-d) ease-out infinite; }
.tz-v-m--5 { animation: tzVM5 var(--tz-d) ease-out infinite; }
.tz-v-spam__wrap { position: relative; }
.tz-v-spam__txt { animation: tzVSpamTxt var(--tz-d) linear infinite; opacity: 0; }
.tz-v-spam__gone { position: absolute; left: 0; top: 0; color: var(--tz-lime); font-style: italic; animation: tzVSpamGone var(--tz-d) linear infinite; }
.tz-v-bot { padding: .4cqw .7cqw; border-radius: .5cqw; background: rgba(168, 216, 11, .14); border-left: .3cqw solid var(--tz-lime); }
.tz-v-bot b { color: var(--tz-lime); }

@property --tz-n { syntax: "<integer>"; inherits: false; initial-value: 131; }
@keyframes tzVCount { 0%, 30% { --tz-n: 128; } 40% { --tz-n: 129; } 70% { --tz-n: 130; } 84%, 100% { --tz-n: 131; } }
@keyframes tzVBar { 0%, 30% { width: 60%; } 84%, 100% { width: 72%; } }
@keyframes tzVAlert { 0%, 4% { opacity: 0; transform: translateX(-50%) scale(.3); } 9% { opacity: 1; transform: translateX(-50%) scale(1); } 30% { opacity: 1; transform: translateX(-50%) scale(1); } 35%, 100% { opacity: 0; transform: translateX(-50%) translateY(-120%); } }
@keyframes tzVHeart { to { transform: scale(1.2); } }
@keyframes tzVM1 { 0%, 14% { opacity: 0; transform: translateY(60%); } 18%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzVM2 { 0%, 28% { opacity: 0; transform: translateY(60%); } 32%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzVM3 { 0%, 42% { opacity: 0; transform: translateY(60%); } 46%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzVM4 { 0%, 66% { opacity: 0; transform: translateY(60%); } 70%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzVM5 { 0%, 78% { opacity: 0; transform: translateY(60%); } 82%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes tzVSpamTxt { 0%, 42% { opacity: 1; text-decoration: none; } 50% { opacity: 1; text-decoration: line-through; color: #ef4444; } 55%, 100% { opacity: 0; } }
@keyframes tzVSpamGone { 0%, 55% { opacity: 0; } 60%, 100% { opacity: 1; } }

/* Roadmap */
.ct-tz__road { margin-top: 40px; }
.ct-tz__road-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ct-tz__road-grid::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: -26px; height: 3px; border-radius: 99px;
    background: linear-gradient(90deg, var(--tz-lime), var(--tz-cyan), var(--tz-purple), var(--tz-lime)); background-size: 300% 100%; animation: ctTzGradient 7s linear infinite; opacity: .8;
}
.ct-tz__road-col { position: relative; padding: 26px 24px; border-radius: var(--ct-radius-lg); background: var(--ct-bg-card); border: 1px solid var(--ct-border-soft); }
.ct-tz__road-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; font-weight: 700; }
.ct-tz__road-col .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.ct-tz__road-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-tz__road-col li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--ct-radius-md); background: rgba(255, 255, 255, .03); border: 1px solid var(--ct-border-soft); font-size: 14.5px; }
.ct-tz__road-col li i { width: 18px; text-align: center; color: var(--c); }
.ct-tz__road-col--now { --c: var(--tz-lime); border-color: rgba(168, 216, 11, .4); box-shadow: 0 0 40px rgba(168, 216, 11, .08); }
.ct-tz__road-col--next { --c: var(--tz-cyan); }
.ct-tz__road-col--later { --c: var(--tz-purple); }
.ct-tz__road-col--now .dot { animation: ctTzBlink 1.4s ease-in-out infinite; }
.ct-tz__road-col--later li { color: var(--ct-text-muted); }

/* Link zur Time-Line unter der Roadmap */
.ct-tz__road-more { margin-top: 34px; text-align: center; }
.ct-tz__ghost {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px;
    border: 1px solid var(--ct-border); color: var(--ct-text); font-size: 15px; font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.ct-tz__ghost i { color: var(--tz-lime); }
.ct-tz__ghost:hover { border-color: var(--tz-lime); color: var(--tz-lime); transform: translateY(-2px); }

/* Abschluss */
.ct-tz__final { margin-top: 110px; text-align: center; }
.ct-tz__final h2 { display: inline-block; margin: 0 0 12px; font-size: clamp(30px, 5vw, 52px); font-weight: 700; letter-spacing: -.02em; }
.ct-tz__final p { margin: 0 0 30px; color: var(--ct-text-muted); font-size: 17px; }
.ct-tz__cta {
    position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 20px 36px; border-radius: 999px;
    background: linear-gradient(90deg, var(--tz-lime), #d4f24a); color: #111; font-size: 18px; font-weight: 700; text-decoration: none;
    box-shadow: 0 0 0 6px rgba(168, 216, 11, .15), 0 16px 50px rgba(168, 216, 11, .35); transition: transform .2s ease, box-shadow .2s ease;
}
.ct-tz__cta:hover { transform: translateY(-3px) scale(1.02); color: #111; box-shadow: 0 0 0 8px rgba(168, 216, 11, .2), 0 22px 60px rgba(168, 216, 11, .45); }
.ct-tz__cta i { animation: ctTzRocket 1.6s ease-in-out infinite; }

/* Einblenden beim Scrollen (nur mit JS; ohne JS ist alles sofort sichtbar) */
.ct-tz.is-ready .ct-tz-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ct-tz.is-ready .ct-tz__chapter.is-flip .ct-tz__screen.ct-tz-reveal, .ct-tz.is-ready .ct-tz__chapter .ct-tz__screen.ct-tz-reveal { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.ct-tz.is-ready .ct-tz-reveal.is-in { opacity: 1; transform: none; }
.ct-tz.is-ready .ct-tz__screen.ct-tz-reveal.is-in { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); }
.ct-tz.is-ready .ct-tz__chapter.is-flip .ct-tz__screen.ct-tz-reveal.is-in { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); }
.ct-tz.is-ready .ct-tz__chapter .ct-tz__screen.ct-tz-reveal.is-in:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.ct-tz.is-ready .ct-tz__road-col.ct-tz-reveal:nth-child(2) { transition-delay: .12s; }
.ct-tz.is-ready .ct-tz__road-col.ct-tz-reveal:nth-child(3) { transition-delay: .24s; }

/* Szenen laufen nur, solange sie sichtbar sind */
.ct-tz.is-ready .ct-tz__screen:not(.is-visible) .ct-tz__view,
.ct-tz.is-ready .ct-tz__screen:not(.is-visible) .ct-tz__view * { animation-play-state: paused; }

@keyframes ctTzGradient { to { background-position: 300% 0; } }
@keyframes ctTzBlink { 50% { opacity: .35; } }
@keyframes ctTzSpin { to { transform: rotate(360deg); } }
@keyframes ctTzRocket { 50% { transform: translate(3px, -3px); } }

@media (max-width: 960px) {
    .ct-tz { padding: 80px 18px 90px; }
    .ct-tz__head { margin-bottom: 56px; }
    .ct-tz__chapter, .ct-tz__chapter.is-flip { grid-template-columns: 1fr; gap: 28px; margin-bottom: 84px; }
    .ct-tz__chapter.is-flip .ct-tz__copy { order: 0; }
    .ct-tz__screen, .ct-tz__chapter.is-flip .ct-tz__screen,
    .ct-tz.is-ready .ct-tz__screen.ct-tz-reveal.is-in, .ct-tz.is-ready .ct-tz__chapter.is-flip .ct-tz__screen.ct-tz-reveal.is-in { transform: none; }
    .ct-tz__road-grid { grid-template-columns: 1fr; }
    .ct-tz__road-grid::before { display: none; }
}
@media (max-width: 520px) {
    .ct-tz__head p { font-size: 16px; }
    .ct-tz__bar { height: 30px; font-size: 11px; }
    .ct-tz__rec { display: none; }
    .ct-tz__cta { padding: 17px 24px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-tz *, .ct-tz *::before, .ct-tz *::after { animation: none !important; transition: none !important; }
    .ct-tz.is-ready .ct-tz-reveal { opacity: 1; transform: none; }
}