/* ÜBERSTUNDE KLUB × K&R · Vortragsdeck
   Feste Bühne 1920×1080, wird per JS auf jedes Display skaliert. */


*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #060608;
  --ink: #f2f2f4;
  --ink-mid: #a3a3ad;
  --ink-dim: #5c5c66;
  --line: #1c1c22;
  --line-2: #26262e;
  --card: rgba(255,255,255,.025);

  --claude: #ff8a50;
  --github: #b49cff;
  --vercel: #f4f4f5;
  --domain: #ff3fb4;
  --supa: #3ecf8e;
  --plaus: #8b8cff;
  --brevo: #2fd6ff;
  --higgs: #ffd23f;
  --env: #ff4d6d;
  --kr: #3d8bff;

  --tint-a: rgba(61,139,255,.07);
  --tint-b: rgba(255,63,180,.04);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Author', 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; user-select:none; }

/* ─── Hintergrund: ruhig, statisch ─── */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 18% 20%, var(--tint-a), transparent 70%),
    radial-gradient(ellipse 60% 55% at 85% 85%, var(--tint-b), transparent 70%);
  transition: background 1.4s var(--ease); }
.grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { position:fixed; inset:0; z-index:55; pointer-events:none;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }

/* ─── Bühne ─── */
.canvas { position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--scale,1)); transform-origin:center; z-index:1; }

.slide { position:absolute; inset:0; padding:130px 160px 120px; opacity:0; visibility:hidden; transform:scale(.985); transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .7s; }
.slide.active { opacity:1; visibility:visible; transform:none; transition: opacity .7s var(--ease) .1s, transform .9s var(--ease) .1s, visibility 0s; }
.slide:not(.center):not(.bar-slide):not(.hero) { display:flex; flex-direction:column; justify-content:center; }
.slide.center { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.slide.vcenter { display:flex; flex-direction:column; justify-content:center; }

/* Reveal beim Betreten */
.r { opacity:0; transform:translateY(18px); }
.slide.active .r { animation: rin 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }
@keyframes rin { from { opacity:0; transform:translateY(18px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }

/* Schritte innerhalb einer Folie */
[data-in] { opacity:0; transform:translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s; filter:blur(3px); }
[data-in].on { opacity:1; transform:none; filter:none; }

/* ─── Kopf & Fuß ─── */
.topbar { position:absolute; top:0; left:0; right:0; height:110px; display:flex; align-items:center; justify-content:space-between; padding:0 160px; z-index:20; pointer-events:none; }
.chapter { font-size:12px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:14px; transition:opacity .5s; }
.chapter b { color:var(--ink-mid); font-weight:500; }
.chapter i { width:26px; height:1px; background:var(--ink-dim); }
.brand { display:flex; align-items:center; gap:14px; opacity:.75; }
.brand .ue { height:24px; }
.brand .x { font-family:var(--font-display); font-weight:300; font-size:14px; color:var(--ink-dim); }
.brand .kr { height:12px; opacity:.9; }
.is-hero .topbar .brand, .is-hero .topbar .chapter { opacity:0; }

.progress { position:absolute; left:160px; right:160px; bottom:52px; height:2px; background:var(--line); border-radius:2px; z-index:20; overflow:hidden; }
.progress span { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.7)); border-radius:2px; transition: width .8s var(--ease); }
.pageno { position:absolute; right:160px; bottom:68px; z-index:20; font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); letter-spacing:.1em; }

/* ─── Typo ─── */
.label { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--c, var(--ink-mid)); margin-bottom:26px; }
.label::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--c, var(--ink-mid)); box-shadow:0 0 10px var(--c, transparent), 0 0 24px var(--c, transparent); }
.label.plain::before { display:none; }

h1, h2, h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
p, .lead { text-wrap:pretty; }
h1 { font-size:60px; line-height:1.12; }
h2 { font-size:44px; line-height:1.16; margin-bottom:22px; }
h3 { font-size:24px; line-height:1.25; font-weight:500; }
.glow { color:var(--c, #fff); text-shadow: 0 0 18px color-mix(in srgb, var(--c, #fff) 40%, transparent), 0 0 50px color-mix(in srgb, var(--c, #fff) 15%, transparent); }
.mute { color:var(--ink-dim); }
.mid { color:var(--ink-mid); }
p, .lead { font-size:20px; line-height:1.6; color:var(--ink-mid); font-weight:300; }
.lead { font-size:23px; }
.small { font-size:16px; color:var(--ink-dim); line-height:1.5; }
.mono { font-family:var(--font-mono); }
kbd { font-family:var(--font-mono); font-size:13px; border:1px solid var(--line-2); border-radius:5px; padding:2px 7px; color:var(--ink-mid); }

/* Kapitel-Opener */
.opener .num { font-family:var(--font-display); font-weight:200; font-size:150px; line-height:.8; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.18); margin-bottom:34px; }
.opener h2 { font-size:58px; max-width:1200px; }
.opener p { max-width:820px; font-size:22px; text-wrap:balance; }

/* Karten */
.card { background:none; border:0; border-top:1px solid var(--line-2); border-radius:0; padding:28px 0 0; position:relative; }
.card.glowing { border-top-color: var(--c); }
.card.glowing::before { content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--c); box-shadow:0 0 10px var(--c), 0 0 24px color-mix(in srgb, var(--c) 50%, transparent); }

/* Neon-Linie / Icons */
.neon { stroke:var(--c, #fff); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter: drop-shadow(0 0 4px var(--c, #fff)) drop-shadow(0 0 14px color-mix(in srgb, var(--c, #fff) 50%, transparent)); }
.neon-fill { fill:var(--c, #fff); filter: drop-shadow(0 0 4px var(--c, #fff)) drop-shadow(0 0 14px color-mix(in srgb, var(--c, #fff) 50%, transparent)); }

.flicker-on.active .flick, .slide.active .flick { animation: flicker 1.6s linear both; animation-delay: var(--fd, .3s); }
@keyframes flicker { 0%{opacity:.08} 6%{opacity:.9} 9%{opacity:.15} 16%{opacity:1} 19%{opacity:.3} 24%{opacity:1} 58%{opacity:.85} 61%{opacity:1} 100%{opacity:1} }

/* ─── Live-Overlay ─── */
.live-pill { position:fixed; top:24px; right:24px; z-index:70; display:none; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); background:rgba(10,10,14,.7); border:1px solid var(--line-2); border-radius:100px; padding:7px 13px; backdrop-filter:blur(8px); }
.live-pill i { width:7px; height:7px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 10px #ff4d6d; animation: pulse 1.6s ease-in-out infinite; }
.live-pill.on { display:flex; }
.live-pill.presenter::after { content:'Presenter'; color:var(--supa); margin-left:6px; }
@keyframes pulse { 50% { opacity:.35; } }

.reactions-layer { position:fixed; inset:0; z-index:65; pointer-events:none; overflow:hidden; }
.react { position:absolute; bottom:-60px; font-size:44px; animation: rise 3.6s cubic-bezier(.2,.6,.3,1) forwards; filter: drop-shadow(0 0 12px rgba(255,255,255,.25)); }
@keyframes rise {
  0% { transform: translate(0,0) scale(.6); opacity:0; }
  10% { opacity:1; transform: translate(var(--x1), -12vh) scale(1.1); }
  60% { opacity:1; }
  100% { transform: translate(var(--x2), -95vh) scale(.9); opacity:0; }
}

.modal { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); user-select:text; }
.modal.on { display:flex; }
.modal form { width:380px; background:#0d0d11; border:1px solid var(--line-2); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:12px; }
.modal h4 { font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:4px; }
.modal input { background:#08080b; border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; color:var(--ink); font:inherit; font-size:15px; outline:none; }
.modal input:focus { border-color:#44444f; }
.modal button { background:var(--ink); color:#000; border:0; border-radius:10px; padding:12px; font:inherit; font-weight:600; cursor:pointer; }
.modal .msg { font-size:13px; color:var(--ink-dim); min-height:18px; }

.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:75; background:rgba(14,14,18,.9); border:1px solid var(--line-2); border-radius:100px; padding:9px 16px; font-size:13px; color:var(--ink-mid); opacity:0; transition: all .5s var(--ease); pointer-events:none; }
.toast.on { opacity:1; transform:translateX(-50%); }

/* QR */
.qr-card { background:#fff; border-radius:26px; padding:22px; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 50px rgba(255,255,255,.18), 0 0 120px rgba(255,255,255,.08); }
.qr-card svg { display:block; width:100%; height:100%; }
.qr-url { font-family:var(--font-mono); font-size:17px; color:var(--ink-mid); margin-top:22px; letter-spacing:.02em; }

/* ============================================================
   FOLIEN-SPEZIFISCH
   ============================================================ */

/* Hero */
.hero .logos { display:flex; align-items:center; gap:24px; margin-bottom:70px; }
.hero .logos .ue { height:52px; }
.hero .logos .klub { font-family:var(--font-display); font-weight:500; font-size:16px; letter-spacing:.42em; color:var(--ink-mid); margin-left:-6px; }
.hero .logos .x { font-family:var(--font-display); font-weight:300; font-size:20px; color:var(--ink-dim); }
.hero .logos .kr { height:20px; }
.hero .eyebrow { font-size:13px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:30px; }
.hero h1 { font-size:54px; line-height:1.22; font-weight:500; letter-spacing:-.015em; max-width:1200px; }
.hero h1 .l2 { display:block; color:var(--ink-mid); font-weight:300; margin-top:4px; }
.hero .welcome { margin-top:60px; font-family:var(--font-body); font-size:19px; font-weight:300; font-weight:400; color:var(--ink-mid); display:flex; align-items:center; gap:14px; }
.hero .glass { position:absolute; width:150px; right:150px; top:150px; opacity:.9; }

/* Mitmachen */
.join { display:grid; grid-template-columns: 1fr 420px; gap:110px; align-items:center; }
.join .qr-card { width:380px; height:380px; }
.join .count { margin-top:40px; display:flex; align-items:baseline; gap:16px; }
.join .count b { font-family:var(--font-display); font-weight:400; font-size:64px; color:#fff; text-shadow:0 0 30px rgba(255,255,255,.3); min-width:60px; }
.join .count span { font-size:20px; color:var(--ink-mid); }
.join .emojis { display:flex; gap:14px; margin-top:28px; font-size:34px; }

/* Wir */
.about-photo { position:absolute; inset:0; overflow:hidden; }
.about-photo img { position:absolute; right:-230px; top:0; height:100%; width:auto; object-fit:cover; opacity:.95; }
.about-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 24%, rgba(6,6,8,.7) 36%, rgba(6,6,8,.12) 52%, rgba(6,6,8,0) 70%, rgba(6,6,8,.25) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 22%); }
.about-text { position:relative; max-width:560px; }
.about-text .note { margin-top:34px; display:flex; gap:14px; align-items:center; font-size:17px; color:var(--ink-dim); }
.about-text .note b { color:var(--kr); font-weight:500; text-shadow:0 0 14px rgba(61,139,255,.6); }

/* Awards */
.awards-bg { position:absolute; inset:0; overflow:hidden; }
.awards-bg img { width:100%; height:100%; object-fit:cover; opacity:.22; filter:saturate(.6); }
.awards-bg::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(6,6,8,.75), var(--bg) 100%); }
.awards-row { display:flex; gap:60px; align-items:center; justify-content:center; margin:30px 0 34px; }
.awards-row img { height:120px; }
.award-badge { height:120px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 34px; border:1px solid rgba(255,255,255,.18); border-radius:16px; font-family:var(--font-display); }
.award-badge b { font-size:26px; font-weight:500; letter-spacing:-.01em; }
.award-badge span { font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mid); margin-top:6px; }

/* Kunden */
.clients { display:grid; grid-template-columns: repeat(4, 1fr); justify-items:center; align-items:center; gap:56px 60px; width:1300px; margin-top:56px; }
.clients div { height:70px; display:flex; align-items:center; justify-content:center; }
.clients img { max-width:240px; max-height:44px; filter: brightness(0) invert(1); opacity:.75; }

/* Leistungen */
.services { display:flex; gap:22px; justify-content:center; margin:40px 0 46px; }
.service { width:150px; display:flex; flex-direction:column; align-items:center; gap:14px; font-size:16px; color:var(--ink-mid); }
.service svg { width:64px; height:64px; }
.service .ic { width:72px; height:60px; display:flex; align-items:center; justify-content:center; }
.service .ic svg { width:44px; height:44px; }
.facts { display:flex; justify-content:center; gap:40px; align-items:center; }
.fact { display:flex; flex-direction:column; align-items:center; gap:6px; }
.fact b { font-family:var(--font-display); font-size:38px; font-weight:400; letter-spacing:-.02em; }
.fact span { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }
.fact .stars { color:#f5b731; font-size:13px; letter-spacing:.1em; position:absolute; margin-top:-20px; }
.fact { position:relative; }
.facts .sep { width:1px; height:60px; background:var(--line-2); }
.kr-turn { margin-top:56px; font-family:var(--font-display); font-size:28px; font-weight:400; }

/* Agenda als Getränkekarte */
.menu { width:1040px; margin-top:20px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:10px 0; position:relative; }
.menu::before { content:'Die Karte für heute Abend'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--bg); padding:0 18px; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
.menu-item { display:grid; grid-template-columns: 70px 1fr auto; align-items:baseline; gap:18px; padding:20px 0; border-bottom:1px dashed var(--line-2); text-align:left; }
.menu-item:last-child { border-bottom:0; }
.menu-item .n { font-family:var(--font-display); font-weight:300; font-size:36px; color:var(--c); text-shadow:0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.menu-item h3 { font-size:26px; font-weight:400; }
.menu-item h3 small { display:block; font-family:var(--font-body); font-size:17px; font-weight:400; color:var(--ink-dim); letter-spacing:0; margin-top:6px; }
.menu-item .min { font-family:var(--font-mono); font-size:14px; color:var(--ink-dim); }

/* Zeitstrahl */
.eras { display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; margin-top:34px; }
.era { height:440px; display:flex; flex-direction:column; transition: opacity .8s var(--ease), border-color .8s, box-shadow .8s; }
.era .yr { font-family:var(--font-mono); font-size:14px; color:var(--ink-dim); letter-spacing:.08em; margin-bottom:14px; }
.era h3 { font-size:32px; font-weight:400; margin-bottom:14px; }
.era p { font-size:19px; }
.era .vis { flex:1; display:flex; align-items:center; justify-content:center; }
.era .vis svg { width:200px; height:150px; }
.subs { position:relative; width:220px; height:150px; }
.subs span { position:absolute; left:50%; width:190px; height:38px; margin-left:-95px; border-radius:9px; border:1.5px solid var(--c); box-shadow:0 0 12px color-mix(in srgb, var(--c) 40%, transparent); display:flex; align-items:center; justify-content:space-between; padding:0 12px; font-size:12px; font-family:var(--font-mono); color:var(--c); background:var(--bg); }
.abo-sum { font-family:var(--font-mono); font-size:15px; color:var(--env); margin-top:6px; text-shadow:0 0 12px rgba(255,77,109,.5); }
.eras-foot { margin-top:34px; text-align:center; font-family:var(--font-display); font-size:26px; font-weight:400; }

/* Vibe Coding */
.vibe-word { font-family:var(--font-display); font-weight:400; font-size:120px; letter-spacing:-.04em; line-height:1; margin-bottom:30px; }
.vibe-demo { display:flex; align-items:center; gap:40px; margin-top:46px; }
.bubble { background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:22px 22px 22px 6px; padding:22px 26px; font-size:21px; color:var(--ink); text-align:left; max-width:520px; line-height:1.45; }
.arrow-neon { width:90px; height:30px; }
.mini-app { width:330px; height:200px; border-radius:16px; border:1px solid rgba(255,255,255,.2); background:#0b0b0f; overflow:hidden; text-align:left; box-shadow:0 0 50px rgba(255,138,80,.12); }
.mini-app .bar { height:26px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:6px; padding:0 10px; }
.mini-app .bar i { width:7px; height:7px; border-radius:50%; background:#2a2a32; }
.mini-app .body { padding:16px; display:grid; grid-template-columns: 1.2fr 1fr; gap:12px; }
.mini-app .blk { border-radius:6px; background:#18181e; }
.mini-app .cm { display:flex; flex-direction:column; gap:8px; }
.mini-app .cm div { height:26px; border-radius:8px; background:rgba(255,138,80,.14); border:1px solid rgba(255,138,80,.35); font-size:11px; color:var(--claude); display:flex; align-items:center; padding:0 9px; }

/* Chat vs Agent */
.versus { display:grid; grid-template-columns: 1fr 1fr; gap:44px; margin-top:28px; }
.win { border:1px solid var(--line-2); border-radius:20px; background:#0a0a0d; overflow:hidden; height:430px; display:flex; flex-direction:column; }
.win .bar { height:40px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding:0 16px; font-size:13px; color:var(--ink-dim); }
.win .bar i { width:10px; height:10px; border-radius:50%; background:#24242b; }
.win .bar span { margin-left:10px; }
.win .content { padding:26px; display:flex; flex-direction:column; gap:14px; flex:1; font-size:18px; }
.msg-u { align-self:flex-end; background:#1a1a20; border-radius:16px 16px 4px 16px; padding:12px 16px; max-width:80%; color:var(--ink); }
.msg-a { align-self:flex-start; background:transparent; border:1px solid var(--line-2); border-radius:16px 16px 16px 4px; padding:12px 16px; max-width:85%; color:var(--ink-mid); line-height:1.5; }
.msg-a code { font-family:var(--font-mono); font-size:13px; display:block; margin-top:8px; color:var(--ink-dim); white-space:pre; }
.term { font-family:var(--font-mono); font-size:16px; line-height:1.9; color:var(--ink-mid); }
.term .p { color:var(--claude); }
.term .ok { color:var(--supa); }
.term .dim { color:var(--ink-dim); }
.term div { opacity:0; transform:translateX(-8px); transition: all .5s var(--ease); }
.term.run div { opacity:1; transform:none; }
.versus h3 { margin-top:22px; font-size:28px; font-weight:400; }
.versus h3 span { font-weight:400; color:var(--ink-dim); }

/* Bauherr */
.builder { display:grid; grid-template-columns: 560px 1fr; gap:90px; align-items:center; }
.blueprint { width:560px; height:440px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); background-color:transparent; background-image: linear-gradient(rgba(47,214,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(47,214,255,.07) 1px, transparent 1px); background-size:28px 28px; position:relative; overflow:hidden; }
.blueprint svg { position:absolute; inset:0; width:100%; height:100%; }
.roles { display:flex; flex-direction:column; gap:20px; margin-top:34px; }
.role { display:grid; grid-template-columns: 170px 1fr; gap:20px; align-items:baseline; padding:20px 0; border-top:1px solid var(--line); }
.role b { font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--c); text-shadow:0 0 16px color-mix(in srgb, var(--c) 50%, transparent); }
.role span { font-size:21px; color:var(--ink-mid); }

/* Chat vs Ordner */
.folder-vs { display:grid; grid-template-columns: 1fr 1fr; gap:60px; margin-top:30px; }
.fv-panel { height:470px; position:relative; overflow:hidden; border-top:1px solid var(--line-2); }
.fv-panel .tag { position:absolute; top:22px; left:24px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); }
.fv-panel svg { position:absolute; inset:0; width:100%; height:100%; }
.fv-cap { margin-top:22px; font-family:var(--font-display); font-size:26px; font-weight:400; }
.fv-cap span { color:var(--ink-dim); font-weight:400; }
.loop-tag { font-family:var(--font-mono); font-size:13px; }
.files { position:absolute; right:40px; top:84px; display:flex; flex-direction:column; gap:12px; width:250px; }
.file { display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:16px; color:var(--ink); padding:10px 14px; border-radius:10px; border:1px solid rgba(255,138,80,.3); background:rgba(255,138,80,.06); opacity:0; transform:translateX(30px) scale(.96); }
.file i { width:8px; height:8px; border-radius:50%; background:var(--claude); box-shadow:0 0 8px var(--claude); }
.file em { margin-left:auto; font-style:normal; color:var(--supa); font-size:14px; }
.slide[data-step="2"] .file { animation: filein .7s var(--ease) forwards; animation-delay: calc(var(--i) * 450ms + 600ms); }
@keyframes filein { to { opacity:1; transform:none; } }

/* Kreislauf */
.cycle-wrap { display:grid; grid-template-columns: 1fr 620px; gap:60px; align-items:center; }
.cycle { width:620px; height:620px; position:relative; }
.cycle svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cycle .node { position:absolute; width:170px; margin-left:-85px; margin-top:-30px; text-align:center; }
.cycle .node b { display:block; font-family:var(--font-display); font-size:22px; font-weight:500; }
.cycle .node span { font-size:15px; color:var(--ink-dim); }
.cycle .core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }
.cycle .core b { font-family:var(--font-display); font-size:28px; font-weight:400; display:block; }
.cycle .core span { font-size:16px; color:var(--ink-dim); }

/* CLAUDE.md */
.md-wrap { display:grid; grid-template-columns: 1fr 640px; gap:80px; align-items:center; }
.md-file { border-radius:20px; border:1px solid rgba(255,138,80,.35); background:#0b0a09; box-shadow:0 0 60px rgba(255,138,80,.08); overflow:hidden; }
.md-file .bar { height:44px; border-bottom:1px solid rgba(255,138,80,.18); display:flex; align-items:center; gap:10px; padding:0 18px; font-family:var(--font-mono); font-size:14px; color:var(--claude); }
.md-file pre { font-family:var(--font-mono); font-size:19px; line-height:1.85; padding:26px 30px; color:var(--ink-mid); white-space:pre-wrap; min-height:400px; }
.md-file pre .h { color:var(--ink); font-weight:500; }
.md-file pre .c { color:var(--claude); }
.caret { display:inline-block; width:10px; height:22px; background:var(--claude); vertical-align:-4px; animation: blink 1s steps(2) infinite; box-shadow:0 0 10px var(--claude); }
@keyframes blink { 50% { opacity:0; } }

/* Terminal */
.big-term { width:1140px; border-radius:22px; border:1px solid var(--line-2); background:#09090b; overflow:hidden; text-align:left; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 80px rgba(255,138,80,.06); }
.big-term .bar { height:44px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 18px; }
.big-term .bar i { width:11px; height:11px; border-radius:50%; background:#26262d; }
.big-term .bar span { margin-left:12px; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }
.big-term pre { font-family:var(--font-mono); font-size:21px; line-height:1.8; padding:30px 34px; min-height:380px; color:var(--ink-mid); white-space:pre-wrap; }
.big-term .p { color:var(--claude); }
.big-term .u { color:var(--ink); }
.big-term .ok { color:var(--supa); }
.big-term .dim { color:var(--ink-dim); }
.term-foot { margin-top:30px; display:flex; gap:40px; justify-content:center; font-size:19px; color:var(--ink-dim); }
.term-foot b { color:var(--ink-mid); font-weight:500; }

/* Neon-Bar */
.bar-slide { display:grid; grid-template-columns: 1120px 1fr; gap:40px; align-items:center; padding:110px 120px 100px 60px; }
.bar-scene svg { width:1120px; height:auto; overflow:visible; display:block; }
.bar-scene .base { stroke:#1d1d23; stroke-width:1.5; fill:none; }
.bar-scene .ground-fill { fill:#0b0b0e; }
.bar-scene .el { color:var(--c); stroke:var(--c); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.12; transition: opacity .8s var(--ease); }
.bar-scene .el .spill { fill:var(--c); stroke:none; opacity:0; transition:opacity 1.4s var(--ease); }
.bar-scene .el .lbl { fill:var(--c); stroke:none; font-family:var(--font-body); font-size:10px; font-weight:500; letter-spacing:.2em; opacity:0; transition:opacity .8s var(--ease) .3s; }
.bar-scene .el .solid { fill:var(--c); stroke:none; }
.bar-scene .el .neon-text { fill:var(--c); stroke:none; font-family:var(--font-display); font-weight:600; }
.bar-scene .el.lit { opacity:1; filter:url(#glow); animation: barflicker 1.1s linear backwards; }
.bar-scene .el.lit .spill { opacity:.09; }
.bar-scene .el.lit .lbl { opacity:.9; }
.bar-scene .el.lit.past { opacity:.4; }
.bar-scene .el.lit.past .spill { opacity:.03; }
.bar-scene.all .el.lit.past { opacity:1; }
.bar-scene.all .el.lit.past .spill { opacity:.07; }
@keyframes barflicker { 0%{opacity:.12} 8%{opacity:.9} 10%{opacity:.2} 18%{opacity:1} 21%{opacity:.35} 26%{opacity:1} 60%{opacity:.85} 64%{opacity:1} 100%{opacity:1} }
.bar-scene .row { fill:var(--supa); stroke:none; opacity:0; }
.bar-scene .el.lit .row { animation: rowin .5s var(--ease) forwards; }
.bar-scene .el.lit .row:nth-child(2){animation-delay:.6s} .bar-scene .el.lit .row:nth-child(3){animation-delay:.9s}
.bar-scene .el.lit .row:nth-child(4){animation-delay:1.2s} .bar-scene .el.lit .row:nth-child(5){animation-delay:1.5s}
@keyframes rowin { to { opacity:.55; } }
.bar-scene .float { animation: float 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes float { 50% { transform: translateY(-6px); } }
.bar-scene .flows { opacity:0; transition:opacity 1s var(--ease); }
.bar-scene.flowing .flows { opacity:1; }
.bar-scene .flow-path { fill:none; stroke-width:1; stroke-dasharray:2 6; opacity:.35; }
.bar-scene .liquid { transform: translateY(26px); transition: transform 2.4s cubic-bezier(.3,.7,.3,1) .9s; }
.bar-scene .el.lit .liquid { transform:none; }

.bar-caps { position:relative; height:440px; }
.bar-cap { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(14px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.bar-cap.on { opacity:1; transform:none; transition-delay:.15s; }
.bar-cap h2 { font-size:34px; font-weight:600; line-height:1.1; margin-bottom:18px; }
.bar-cap h2 span { color:var(--c); text-shadow:0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.bar-cap p { font-size:20px; max-width:470px; }
.bar-cap .real { margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:16px; color:var(--ink-dim); max-width:470px; }
.bar-cap .real b { color:var(--ink-mid); font-weight:500; }
.crew { display:flex; flex-direction:column; gap:12px; }
.crew div { display:flex; align-items:baseline; gap:14px; font-size:20px; color:var(--ink-mid); }
.crew div b { font-weight:500; color:var(--c); min-width:118px; text-shadow:0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }

/* Zutaten */
.ingredients { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px; margin-top:12px; }
.ing { padding:24px 0 0; display:flex; flex-direction:column; min-height:290px; }
.ing .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ing .logo { height:38px; display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:21px; white-space:nowrap; }
.ing .logo img { height:26px; width:26px; filter: brightness(0) invert(1); }
.ing .logo .wm { font-family:var(--font-body); font-weight:600; font-size:24px; letter-spacing:-.01em; }
.ing .role { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--c); text-align:right; line-height:1.4; }
.ing p { font-size:17px; line-height:1.45; color:var(--ink-mid); flex:1; }
.ing .price { font-size:14px; color:var(--ink); margin-top:12px; }
.ing .url { font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); margin-top:6px; }
.ing { border-top:1px solid color-mix(in srgb, var(--c) 70%, transparent); }

/* Domain */
.steps3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; margin-top:30px; }
.step3 { min-height:390px; display:flex; flex-direction:column; }
.step3 .n { font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); letter-spacing:.1em; margin-bottom:12px; }
.step3 h3 { font-size:28px; margin-bottom:22px; }
.step3 .ui { flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.fake-input { display:flex; gap:10px; }
.fake-input div { flex:1; border:1px solid var(--line-2); border-radius:10px; padding:13px 14px; font-family:var(--font-mono); font-size:15px; color:var(--ink); background:#08080b; }
.fake-input span { background:var(--ink); color:#000; border-radius:10px; padding:13px 16px; font-weight:600; font-size:15px; }
.dns { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:14px; }
.dns th { text-align:left; color:var(--ink-dim); font-weight:500; padding:8px 8px; border-bottom:1px solid var(--line-2); font-size:12px; letter-spacing:.1em; }
.dns td { padding:12px 8px; color:var(--ink); border-bottom:1px solid var(--line); }
.dns td.hl { color:var(--domain); text-shadow:0 0 10px rgba(255,63,180,.5); }
.urlbar { display:flex; align-items:center; gap:12px; border:1px solid var(--line-2); border-radius:100px; padding:14px 20px; font-family:var(--font-mono); font-size:17px; color:var(--ink); background:#08080b; }
.urlbar svg { width:18px; height:18px; }
.sign-mini { margin-top:22px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--domain); border:2px solid var(--domain); border-radius:14px; padding:14px; text-shadow:0 0 14px var(--domain), 0 0 34px rgba(255,63,180,.5); box-shadow:0 0 18px rgba(255,63,180,.45), inset 0 0 18px rgba(255,63,180,.2); }
.domain-foot { margin-top:30px; font-size:20px; color:var(--ink-dim); text-align:center; }
.domain-foot b { color:var(--ink-mid); font-weight:500; }

/* Supabase */
.supa-wrap { display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; margin-top:20px; align-items:start; }
.dbt { border:1px solid rgba(62,207,142,.35); border-radius:18px; overflow:hidden; background:#07100c; box-shadow:0 0 50px rgba(62,207,142,.08); }
.dbt .bar { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid rgba(62,207,142,.2); font-family:var(--font-mono); font-size:14px; color:var(--supa); }
.dbt table { width:100%; border-collapse:collapse; font-size:16px; }
.dbt th { text-align:left; font-family:var(--font-mono); font-weight:500; font-size:12px; color:var(--ink-dim); padding:12px 18px; border-bottom:1px solid rgba(62,207,142,.12); letter-spacing:.08em; }
.dbt td { padding:15px 18px; border-bottom:1px solid rgba(62,207,142,.08); color:var(--ink-mid); }
.dbt td:first-child { color:var(--ink); }
.dbt tr[data-in] td { transition: inherit; }
.rules { display:flex; flex-direction:column; gap:16px; }
.rule { display:flex; gap:18px; align-items:center; padding:18px 0; border-top:1px solid var(--line-2); font-size:20px; color:var(--ink); }
.rule .ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.rule.yes .ic { background:rgba(62,207,142,.12); color:var(--supa); }
.rule.no .ic { background:rgba(255,77,109,.12); color:var(--env); }
.rule small { display:block; font-size:15px; color:var(--ink-dim); margin-top:3px; }
.supa-extras { display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.chip { font-size:15px; padding:8px 14px; border-radius:100px; border:1px solid var(--line-2); color:var(--ink-mid); }

/* API CLI MCP */
.trio { display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; margin-top:24px; }
.trio .card { min-height:380px; display:flex; flex-direction:column; }
.trio .icon { height:110px; display:flex; align-items:center; }
.trio .icon svg { height:90px; width:auto; }
.trio .what { font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--c); margin:6px 0 10px; }
.trio h3 { font-size:28px; font-weight:400; margin-bottom:14px; }
.trio p { font-size:19px; }
.trio code { display:block; margin-top:auto; padding-top:18px; font-family:var(--font-mono); font-size:14px; color:var(--ink-dim); line-height:1.7; }
.trio-foot { margin-top:30px; padding:22px 28px; border-radius:18px; border:1px solid rgba(255,138,80,.35); background:rgba(255,138,80,.05); font-size:22px; color:var(--ink); display:flex; align-items:center; gap:18px; }
.trio-foot svg { width:34px; height:34px; flex:none; }

/* Orbit */
.orbit-wrap { display:grid; grid-template-columns: 1fr 700px; gap:40px; align-items:center; }
.orbit { width:700px; height:700px; position:relative; margin-top:-40px; }
.orbit .ring { position:absolute; left:50%; top:50%; border:1px dashed rgba(255,255,255,.08); border-radius:50%; transform:translate(-50%,-50%); }
.orbit .spin { position:absolute; inset:0; animation: spin 80s linear infinite; }
.orbit .spin.rev { animation-direction: reverse; animation-duration: 110s; }
.orbit .logo { position:absolute; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:18px; background:#0d0d11; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; }
.orbit .spin .logo > * { animation: spin 80s linear infinite reverse; }
.orbit .spin.rev .logo > * { animation: spin 110s linear infinite; }
.orbit .logo img { width:28px; height:28px; filter: brightness(0) invert(1); opacity:.85; }
.orbit .logo .wm { font-size:11px; font-weight:600; color:var(--higgs); letter-spacing:.02em; }
.orbit .center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:200px; height:200px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1.5px solid rgba(255,138,80,.6); box-shadow:0 0 40px rgba(255,138,80,.25), inset 0 0 40px rgba(255,138,80,.1); }
.orbit .center b { font-family:var(--font-display); font-size:26px; font-weight:600; }
.orbit .center span { font-size:14px; color:var(--ink-dim); margin-top:4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.example { margin-top:34px; padding:22px 24px; border-radius:18px; border:1px solid rgba(255,210,63,.3); background:rgba(255,210,63,.04); }
.example .who { font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--higgs); margin-bottom:10px; }
.example p { font-size:20px; color:var(--ink); }
.example p span { color:var(--ink-dim); }

/* Tresor */
.vault { display:grid; grid-template-columns: 1fr 1fr; gap:50px; margin-top:24px; }
.vault .side { min-height:410px; display:flex; flex-direction:column; }
.vault .verdict { display:flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; }
.vault .wrong .verdict { color:var(--env); }
.vault .right .verdict { color:var(--supa); }
.leak { position:relative; }
.leak .bubble { max-width:100%; font-family:var(--font-mono); font-size:17px; border-color:rgba(255,77,109,.35); }
.leak .strike { position:absolute; left:-10px; right:-10px; top:50%; height:3px; background:var(--env); box-shadow:0 0 14px var(--env); transform:rotate(-4deg) scaleX(0); transform-origin:left; transition: transform .6s var(--ease) .5s; }
.slide[data-step="1"] .leak .strike, .slide[data-step="2"] .leak .strike { transform:rotate(-4deg) scaleX(1); }
.envs { border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:#0a0a0d; }
.envs .bar { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-mid); }
.envs .bar svg { width:16px; height:16px; }
.envs .row { display:grid; grid-template-columns: 1fr 1fr 90px; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:15px; align-items:center; }
.envs .row:last-child { border-bottom:0; }
.envs .row span:first-child { color:var(--ink); }
.envs .row span:nth-child(2) { color:var(--ink-dim); letter-spacing:.15em; }
.envs .row em { font-style:normal; font-size:12px; color:var(--supa); text-align:right; }
.vault-note { margin-top:20px; font-size:18px; color:var(--ink-dim); line-height:1.5; }
.vault-note b { color:var(--ink-mid); font-weight:500; }

/* Mail-Chaos */
.chaos { position:relative; height:520px; margin-top:10px; }
.mail { position:absolute; width:560px; padding:18px 22px; border-radius:16px; border:1px solid var(--line-2); background:#0c0c10; box-shadow:0 20px 40px rgba(0,0,0,.4); display:flex; gap:16px; align-items:flex-start; }
.mail .av { width:40px; height:40px; border-radius:50%; background:#1d1d24; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--ink-mid); }
.mail b { display:block; font-size:16px; color:var(--ink); font-weight:500; }
.mail span { font-size:15px; color:var(--ink-dim); }
.mail .att { display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--env); border:1px solid rgba(255,77,109,.35); border-radius:6px; padding:3px 8px; }
.chaos-count { position:absolute; right:0; bottom:20px; text-align:right; }
.chaos-count div { font-family:var(--font-display); font-size:40px; font-weight:400; line-height:1.15; }
.chaos-count div span { color:var(--env); text-shadow:0 0 18px rgba(255,77,109,.5); }

/* Lösung */
.solution { position:relative; height:600px; margin-top:-10px; }
.browser { position:absolute; left:50%; top:30px; width:820px; height:500px; margin-left:-410px; border-radius:18px; border:1px solid rgba(255,255,255,.18); background:#f6f1ea; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(255,255,255,.05); }
.browser .bar { height:42px; background:#ebe4da; display:flex; align-items:center; gap:7px; padding:0 14px; }
.browser .bar i { width:10px; height:10px; border-radius:50%; background:#d3c9bc; }
.browser .bar .u { margin-left:16px; flex:1; height:26px; border-radius:7px; background:#fff; display:flex; align-items:center; gap:8px; padding:0 12px; font-family:var(--font-mono); font-size:12px; color:#6b5f52; }
.browser .page { position:absolute; inset:42px 0 0 0; padding:44px 54px; color:#2b211a; }
.browser .page .k { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#a0714b; }
.browser .page h4 { font-family:Georgia, 'Times New Roman', serif; font-weight:400; font-size:54px; line-height:1.05; margin-top:16px; letter-spacing:-.01em; }
.browser .page .sw { display:flex; gap:10px; margin-top:34px; }
.browser .page .sw i { width:70px; height:70px; border-radius:12px; }
.browser .page .bag { position:absolute; right:60px; top:70px; width:190px; height:270px; border-radius:16px 16px 10px 10px; background:linear-gradient(160deg,#3a2a20,#1d140f); box-shadow: 0 20px 40px rgba(60,40,20,.35); display:flex; align-items:flex-end; justify-content:center; padding-bottom:36px; color:#f3e3cc; font-family:Georgia, serif; font-size:24px; }
.callout { position:absolute; display:flex; align-items:center; gap:14px; padding:10px 0; font-size:19px; color:var(--ink); white-space:nowrap; }
.callout .ic { width:28px; display:flex; align-items:center; justify-content:center; color:var(--c); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 70%, transparent)); }
.callout .ic svg { width:20px; height:20px; }
.callout small { display:block; font-size:14px; color:var(--ink-dim); }
.solution-foot { position:absolute; left:0; right:0; bottom:-6px; text-align:center; font-family:var(--font-display); font-size:28px; font-weight:400; }

/* Demo */
.demo { display:grid; grid-template-columns: 1fr 420px; gap:100px; align-items:center; }
.demo .qr-card { width:380px; height:380px; }
.pw-hint { margin-top:30px; display:inline-flex; align-items:center; gap:14px; padding:16px 22px; border-radius:16px; border:1px solid rgba(255,63,180,.4); background:rgba(255,63,180,.06); font-size:20px; color:var(--ink); }
.pw-hint svg { width:22px; height:22px; color:var(--domain); }
.demo-steps { display:flex; flex-direction:column; gap:14px; margin-top:34px; }
.demo-steps div { display:flex; gap:16px; align-items:center; font-size:21px; color:var(--ink-mid); }
.demo-steps b { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink); font-weight:500; flex:none; }

.dash-frame { position:absolute; left:80px; right:80px; top:96px; bottom:80px; border-radius:22px; border:1px solid var(--line-2); overflow:hidden; background:#08080b; }
.dash-frame iframe { width:100%; height:100%; border:0; display:block; }
.dash-frame .fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; color:var(--ink-dim); font-size:18px; }

/* Prompts */
.prompts { display:grid; grid-template-columns: 1fr 1fr; gap:20px 34px; margin-top:24px; }
.prompt { display:flex; gap:18px; align-items:flex-start; }
.prompt .n { font-family:var(--font-display); font-size:44px; font-weight:300; line-height:1; color:var(--claude); text-shadow:0 0 18px rgba(255,138,80,.5); width:40px; flex:none; }
.prompt .bubble { font-size:19px; max-width:none; border-radius:18px 18px 18px 6px; }
.prompt .bubble small { display:block; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px; }
.prompts-foot { margin-top:30px; display:flex; align-items:center; gap:18px; font-size:20px; color:var(--ink-mid); }
.prompts-foot b { color:var(--ink); font-weight:500; }

/* Ideen */
.ideas { display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; margin-top:20px; }
.idea { padding:22px 0 0; min-height:200px; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--line-2); }
.idea .ic { display:flex; align-items:center; height:30px; }
.idea .ic svg { width:26px; height:26px; }
.idea h3 { font-size:23px; }
.idea p { font-size:16px; line-height:1.45; }

/* Rechnung */
.bill-wrap { display:grid; grid-template-columns: 1fr 560px; gap:80px; align-items:center; }
.bill { background:#f3efe8; color:#1c1a17; border-radius:6px; padding:40px 40px 30px; font-family:var(--font-mono); position:relative; box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(255,255,255,.06); transform:rotate(1.2deg); }
.bill::after { content:''; position:absolute; left:0; right:0; bottom:-14px; height:14px; background: radial-gradient(circle at 10px -4px, transparent 12px, #f3efe8 13px) 0 0 / 20px 14px repeat-x; }
.bill h4 { text-align:center; font-size:20px; letter-spacing:.2em; margin-bottom:4px; }
.bill .sub { text-align:center; font-size:12px; color:#6f685e; margin-bottom:22px; letter-spacing:.1em; }
.bill .line { display:flex; justify-content:space-between; font-size:16px; padding:8px 0; border-bottom:1px dashed #c9c1b5; }
.bill .line span:last-child { white-space:nowrap; }
.bill .line small { display:block; font-size:11px; color:#857d71; }
.bill .total { display:flex; justify-content:space-between; font-size:22px; font-weight:500; padding:16px 0 6px; }
.bill .foot { font-size:11px; color:#857d71; margin-top:12px; line-height:1.6; text-align:center; }

/* Mitnehmen */
.takeaway { display:grid; grid-template-columns: 1fr 420px; gap:100px; align-items:center; }
.takeaway .qr-card { width:380px; height:380px; }
.take-list { display:flex; flex-direction:column; gap:16px; margin-top:34px; }
.take-list div { display:flex; gap:16px; align-items:center; font-size:22px; color:var(--ink-mid); }
.take-list svg { width:26px; height:26px; flex:none; }

/* Fragen */
.qa { display:grid; grid-template-columns: 520px 1fr; gap:70px; align-items:center; height:100%; }
.qa-big { font-family:var(--font-display); font-weight:400; font-size:110px; letter-spacing:-.04em; line-height:1; }
.qa-wall { display:flex; flex-direction:column; gap:14px; max-height:620px; overflow:hidden; mask-image:linear-gradient(180deg, #000 80%, transparent); }
.qa-item { padding:18px 0; border-top:1px solid var(--line-2); font-size:22px; color:var(--ink); line-height:1.4; animation: rin .8s var(--ease) both; }
.qa-item small { display:block; font-size:14px; color:var(--ink-dim); margin-top:8px; letter-spacing:.04em; }
.qa-empty { font-size:20px; color:var(--ink-dim); }
.qa-mini { display:flex; align-items:center; gap:22px; margin-top:40px; }
.qa-mini .qr-card { width:150px; height:150px; padding:12px; border-radius:16px; }
.qa-mini span { font-size:19px; color:var(--ink-mid); line-height:1.45; }

/* Cheers */
.cheers-word { font-family:var(--font-display); font-weight:400; font-size:150px; letter-spacing:-.04em; line-height:1; margin-top:10px; }
.cheers-glasses { width:420px; height:260px; }
.cheers-glasses .gl-l { transform-box:view-box; transform-origin: 140px 228px; animation: clinkL 2.8s var(--ease) infinite; }
.cheers-glasses .gl-r { transform-box:view-box; transform-origin: 280px 228px; animation: clinkR 2.8s var(--ease) infinite; }
@keyframes clinkL { 0%,100% { transform: rotate(-6deg); } 40%,55% { transform: rotate(7deg); } }
@keyframes clinkR { 0%,100% { transform: rotate(6deg); } 40%,55% { transform: rotate(-7deg); } }
.cheers-glasses .spark { opacity:0; animation: spark 2.8s ease-out infinite; }
@keyframes spark { 0%,40% { opacity:0; } 48% { opacity:1; } 70%,100% { opacity:0; } }
.thanks { margin-top:30px; font-size:24px; color:var(--ink-mid); }
.contact { margin-top:40px; display:flex; gap:40px; justify-content:center; align-items:center; font-size:17px; color:var(--ink-dim); }
.contact img { height:16px; opacity:.8; }


/* ─── Gefüllte Icons (Phosphor Fill, per Maske eingefärbt) ─── */
.ico { display:inline-block; width:1em; height:1em; flex:none; background:currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ico.glowing { filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 70%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, currentColor 35%, transparent)); }
.service .ic .ico { font-size:38px; color:var(--c); }
.idea .ic .ico { font-size:24px; color:var(--c); }
.take-list .ico { font-size:24px; }
.callout .ic .ico { font-size:19px; }
.pw-hint .ico { font-size:22px; color:var(--domain); }

/* ─── Startfolie: mehr Farbe ─── */
.hero-glow { position:absolute; inset:-10%; pointer-events:none; filter: blur(70px); opacity:.85; }
.hero-glow i { position:absolute; border-radius:50%; }
.hero-glow i:nth-child(1) { width:900px; height:700px; left:-6%; top:6%; background: radial-gradient(circle, rgba(255,63,180,.30), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.hero-glow i:nth-child(2) { width:1000px; height:760px; right:-8%; top:-10%; background: radial-gradient(circle, rgba(61,139,255,.30), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.hero-glow i:nth-child(3) { width:900px; height:640px; left:30%; bottom:-22%; background: radial-gradient(circle, rgba(255,138,80,.26), transparent 65%); animation: drift3 29s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(140px, 80px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-160px, 90px) scale(1.05); } }
@keyframes drift3 { to { transform: translate(-120px, -70px) scale(1.12); } }
.hero > *:not(.hero-glow) { position:relative; }

/* ─── Fußzeile ─── */
.copyright { position:absolute; left:160px; bottom:68px; z-index:20; font-size:11px; letter-spacing:.06em; color:var(--ink-dim); }
.hero-foot { position:absolute !important; left:160px; right:160px; bottom:84px; display:flex; align-items:center; justify-content:space-between; }
.hero-foot .logos-mini { display:flex; align-items:center; gap:16px; opacity:.8; }
.hero-foot .logos-mini .ue { height:22px; }
.hero-foot .logos-mini .x { color:var(--ink-dim); font-size:14px; }
.hero-foot .logos-mini .kr { height:11px; }
.hero-foot span { font-size:12px; letter-spacing:.06em; color:var(--ink-dim); }
.is-hero .copyright { opacity:0; }

/* ─── Über uns: Timeline ─── */
.timeline { margin-top:48px; width:460px; }
.tl-track { display:flex; align-items:center; }
.tl-dot { width:9px; height:9px; border-radius:50%; background:var(--ink-mid); flex:none; }
.tl-dot.now { width:11px; height:11px; background:var(--kr); box-shadow:0 0 10px var(--kr), 0 0 24px rgba(61,139,255,.5); }
.tl-line { flex:1; height:1px; background: linear-gradient(90deg, rgba(255,255,255,.35), var(--kr)); position:relative; }
.tl-line::after { content:''; position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; animation: tlrun 3.6s ease-in-out infinite; }
@keyframes tlrun { 0% { left:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left:calc(100% - 5px); opacity:0; } }
.tl-labels { display:flex; justify-content:space-between; margin-top:18px; }
.tl-labels div { display:flex; flex-direction:column; gap:6px; }
.tl-labels .now { text-align:right; }
.tl-labels b { font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:-.01em; }
.tl-labels .now b { color:#fff; text-shadow:0 0 18px rgba(61,139,255,.45); }
.tl-labels span { font-size:14px; color:var(--ink-dim); line-height:1.45; }

/* ─── Awards ─── */
.award-card { display:flex; align-items:center; gap:22px; padding:26px 34px 26px 26px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); backdrop-filter: blur(6px); text-align:left; }
.award-card .pokal { height:96px; }
.award-card small { display:block; font-size:18px; color:var(--ink); margin-bottom:10px; font-weight:400; }
.award-card .da { height:40px; display:block; }
.award-card .gwa { font-family:var(--font-display); font-size:30px; line-height:1.05; letter-spacing:.01em; color:#d8c49a; text-transform:uppercase; font-weight:400; }
.award-card .gwa-w { width:70px; height:70px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:52px; color:#d8c49a; border:1.5px solid rgba(216,196,154,.5); border-radius:14px; }

/* ─── Mitmachen: Live-Bühne mit Ballons ─── */
.balloons { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.balloon { position:absolute; bottom:-160px; display:flex; align-items:center; gap:12px; will-change: transform, opacity, filter; }
.balloon.name { padding:12px 22px 12px 12px; border-radius:100px; background:rgba(12,12,16,.72); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--c) 28%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 10%, transparent); backdrop-filter: blur(8px); font-size:22px; color:var(--ink); white-space:nowrap; }
.balloon.name .av { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c) 22%, transparent); color:var(--c); font-family:var(--font-display); font-size:18px; font-weight:500; }
.balloon.name em { font-style:normal; color:var(--ink-dim); font-size:17px; }
.balloon.name::after { content:''; position:absolute; left:50%; top:100%; width:1px; height:70px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), transparent); }
.balloon.emoji { flex-direction:column; gap:6px; font-size:64px; line-height:1; filter: drop-shadow(0 0 18px rgba(255,255,255,.18)); }
.balloon.emoji small { font-size:15px; color:var(--ink-mid); letter-spacing:.04em; background:rgba(12,12,16,.6); padding:4px 10px; border-radius:100px; }
.balloon.question { max-width:420px; flex-direction:column; align-items:flex-start; gap:8px; padding:18px 22px; border-radius:20px 20px 20px 6px; background:rgba(12,12,16,.78); border:1px solid rgba(139,140,255,.5); box-shadow: 0 0 30px rgba(139,140,255,.22); backdrop-filter: blur(8px); font-size:20px; line-height:1.4; color:var(--ink); }
.balloon.question small { font-size:14px; color:var(--plaus); letter-spacing:.06em; text-transform:uppercase; }
.join-names { margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; max-width:640px; min-height:34px; }
.join-names span { font-size:14px; color:var(--ink-mid); padding:6px 12px; border-radius:100px; border:1px solid var(--line-2); animation: rin .8s var(--ease) both; }

/* Test-Modus (?static): alle Übergänge sofort im Endzustand – nur für Screenshots */
.static *, .static *::before, .static *::after { transition-duration:0s !important; transition-delay:0s !important; animation-duration:0s !important; animation-delay:0s !important; }

/* Awards ohne Kästen */
.award-da { display:flex; align-items:center; gap:22px; text-align:left; }
.award-da .pokal { height:110px; }
.award-da small { display:block; font-size:20px; color:var(--ink); margin-bottom:10px; font-weight:400; }
.award-da .da { height:46px; display:block; }
.gwa-logo { height:130px; }
.awards-row { gap:110px; margin:44px 0 40px; }
/* Linie wie im SSC-Deck */
.hline { width:100%; height:1px; margin-top:44px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent); }
.clients { margin-top:60px; }

/* Freisteller Photoshop-Kartons */
.era .ps-box { width:330px; height:auto; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 97%); mask-image: linear-gradient(180deg, #000 86%, transparent 97%); filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(61,139,255,.12)); }

/* Awards: erst die Collage, dann abdunkeln und Auszeichnungen einblenden */
#awards .awards-bg img { opacity:1; filter:none; transform:scale(1.04); transition: opacity 1.4s var(--ease), filter 1.4s var(--ease), transform 1.6s var(--ease); }
#awards.active .awards-bg img { animation: kenburns 18s ease-out both; }
#awards .awards-bg::after { opacity:0; transition: opacity 1.4s var(--ease); }
#awards[data-step="1"] .awards-bg img { opacity:.22; filter:saturate(.6) blur(2px); }
#awards[data-step="1"] .awards-bg::after { opacity:1; }
#awards [data-in] { transition-delay: calc(var(--sd, 0) * 140ms + 350ms); }
@keyframes kenburns { from { transform:scale(1.04); } to { transform:scale(1.1); } }
#awards .awards-bg::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(6,6,8,.7) 0%, rgba(6,6,8,0) 16%, rgba(6,6,8,0) 82%, rgba(6,6,8,.75) 100%); }

/* Kundenfolie: blaue Lichtwellen */
#clients > *:not(.waves) { position:relative; z-index:1; }
.waves { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.waves svg { position:absolute; left:0; right:0; top:150px; width:100%; height:100%; filter: drop-shadow(0 0 6px rgba(61,139,255,.6)) drop-shadow(0 0 22px rgba(47,214,255,.25)); }
.waves path { animation: wavedrift 22s ease-in-out infinite alternate; }
.waves .w2 { animation-duration: 30s; animation-direction: alternate-reverse; }
.waves .w3 { animation-duration: 26s; }
.waves .w4 { animation-duration: 36s; animation-direction: alternate-reverse; }
@keyframes wavedrift { from { transform: translateX(0); } to { transform: translateX(-420px); } }
.wglow { position:absolute; border-radius:50%; filter: blur(80px); }
.wglow.g1 { width:900px; height:420px; left:10%; bottom:4%; background: radial-gradient(circle, rgba(61,139,255,.28), transparent 70%); animation: drift1 24s ease-in-out infinite alternate; }
.wglow.g2 { width:700px; height:360px; right:6%; bottom:14%; background: radial-gradient(circle, rgba(47,214,255,.18), transparent 70%); animation: drift2 30s ease-in-out infinite alternate; }

/* Leistungen: drei leuchtende Säulen */
.pillars { display:grid; grid-template-columns: 1fr 60px 1fr 60px 1.15fr; align-items:start; width:1560px; margin:46px 0 54px; text-align:left; }
.pillar { position:relative; padding-top:30px; border-top:1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.pillar::before { content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--c); box-shadow:0 0 12px var(--c), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent); opacity:.85; }
.pillar::after { content:''; position:absolute; left:-10%; right:-10%; top:-120px; height:240px; background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); pointer-events:none; z-index:-1; }
.p-icon { width:58px; height:58px; display:flex; align-items:center; justify-content:center; color:var(--c); font-size:40px; margin-bottom:18px; filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 22px color-mix(in srgb, var(--c) 60%, transparent)); }
.pillar h3 { font-size:28px; font-weight:600; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.pillar h3 em { font-style:normal; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--c); border-bottom:1px solid var(--c); padding-bottom:2px; text-shadow:0 0 10px var(--c); }
.pillar ul { list-style:none; display:flex; flex-direction:column; gap:14px; }
.pillar li { display:flex; align-items:center; gap:14px; font-size:20px; color:var(--ink-mid); font-weight:300; }
.pillar li .ico { font-size:22px; color:var(--c); filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) 45%, transparent)); }
.pillar li.hl { color:var(--ink); font-weight:400; }
.pillar li.hl::after { content:''; height:1px; flex:1; max-width:120px; background: linear-gradient(90deg, var(--c), transparent); box-shadow:0 0 8px var(--c); }
.p-join { align-self:start; text-align:center; font-family:var(--font-display); font-weight:200; font-size:54px; line-height:1; color:var(--ink-mid); margin-top:34px; }
@keyframes perfpulse { 50% { filter: drop-shadow(0 0 12px var(--c)) drop-shadow(0 0 34px color-mix(in srgb, var(--c) 75%, transparent)); } }
.ico.glowing { filter: drop-shadow(0 0 7px currentColor) drop-shadow(0 0 20px color-mix(in srgb, currentColor 50%, transparent)); }

/* Kapitel-Auftakte: zentriert mit Neon-Illustration */
.opener h2 { margin-left:auto; margin-right:auto; }
.opener p { margin:0 auto; }
.op-ill { width:560px; height:240px; margin-bottom:44px; overflow:visible; }
.op-ill .axis { stroke:var(--line-2); stroke-width:1.5; fill:none; }
.op-ill .ticks path { stroke:var(--ink-dim); stroke-width:1.5; }
.op-ill .tick-l { fill:var(--ink-dim); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; }
.op-ill .draw { stroke-dasharray:1; stroke-dashoffset:1; }
.slide.active .op-ill .draw { animation: draw 1.8s cubic-bezier(.5,0,.2,1) forwards; animation-delay: calc(var(--dd, 0s) + .4s); }
.op-ill .end { opacity:0; }
.slide.active .op-ill .end { animation: endpop .6s ease-out 2.1s forwards, pulse 1.8s ease-in-out 2.7s infinite; }
.op-ill .spark, .op-ill .fly { opacity:0; }
.slide.active .op-ill .spark { animation: sparkin 1s var(--ease) 1.4s both; }
@keyframes sparkin { from { opacity:0; } to { opacity:1; } }
.slide.active .op-ill .fly { animation: flyin 1.2s var(--ease) 1.8s both; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes endpop { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:none; } }
@keyframes flyin { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
.op-ill .end { transform-box: fill-box; transform-origin:center; }
.static .op-ill .draw { stroke-dashoffset:0; }
.static .op-ill .end, .static .op-ill .spark, .static .op-ill .fly { opacity:1; }

.era .boxart { width:290px; height:218px; overflow:visible; }
.era .boxart .tag-t { fill:#ff4d6d; font-family:var(--font-mono); font-size:11px; transform: rotate(-12deg); transform-box: fill-box; transform-origin:center; }

/* Chat vs. Agent: Wer macht die Arbeit? */
#agent { align-items:center; text-align:center; }
.mode-switch { position:relative; display:inline-flex; gap:0; margin:10px 0 40px; font-family:var(--font-display); font-size:22px; font-weight:500; border-bottom:1px solid var(--line-2); }
.mode-switch span { width:150px; padding:10px 0 14px; color:var(--ink-dim); transition: color .6s var(--ease); }
.mode-switch .m-chat { color:var(--ink); }
.mode-switch .m-ind { position:absolute; left:0; bottom:-1px; width:150px; height:2px; background:var(--ink); box-shadow:0 0 12px rgba(255,255,255,.6); transition: transform .8s var(--ease), background .6s, box-shadow .6s; }
#agent[data-step="1"] .mode-switch .m-chat { color:var(--ink-dim); }
#agent[data-step="1"] .mode-switch .m-agent { color:var(--claude); text-shadow:0 0 14px rgba(255,138,80,.6); }
#agent[data-step="1"] .mode-switch .m-ind { transform:translateX(150px); background:var(--claude); box-shadow:0 0 14px var(--claude); }

.workstage { position:relative; width:1500px; height:500px; text-align:left; }
.col-h { position:absolute; top:0; width:560px; display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-size:26px; font-weight:600; padding-bottom:18px; border-bottom:1px solid var(--line-2); }
.col-h .ico { font-size:26px; }
.col-h .cnt { margin-left:auto; position:relative; font-family:var(--font-mono); font-size:14px; font-weight:400; color:var(--ink-dim); width:110px; text-align:right; }
.col-h .cnt span { position:absolute; right:0; top:-8px; transition: opacity .5s var(--ease) .6s; white-space:nowrap; }
.col-h .cnt .b, #agent[data-step="1"] .col-h .cnt .a { opacity:0; transition-delay:0s; }
#agent[data-step="1"] .col-h .cnt .b { opacity:1; }
.human-h { left:120px; color:var(--ink); }
.human-h .ico { color:var(--kr); filter: drop-shadow(0 0 8px var(--kr)); }
.ai-h { left:860px; color:var(--ink); }
.ai-h .ico { color:var(--claude); filter: drop-shadow(0 0 8px var(--claude)); }
.ws-divider { position:absolute; left:750px; top:0; bottom:0; width:1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent); }
.tasks { position:absolute; left:0; right:0; top:84px; }
.task { position:absolute; left:var(--x0); top:var(--y0); display:flex; align-items:center; gap:16px; font-size:22px; font-weight:300; color:var(--ink-mid); white-space:nowrap;
  transition: left 1.1s cubic-bezier(.65,0,.25,1), top 1.1s cubic-bezier(.65,0,.25,1), color .8s, opacity .6s; transition-delay: calc(var(--i) * 120ms + 250ms); }
.task .ico { font-size:24px; color:var(--kr); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kr) 70%, transparent)); transition: color .8s; transition-delay: inherit; }
.task.ai .ico { color:var(--claude); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--claude) 70%, transparent)); }
.task .lab { position:relative; display:inline-grid; }
.task .lab span { grid-area:1/1; transition: opacity .5s var(--ease); transition-delay: inherit; }
.task .lab .b, .task .ib { opacity:0; }
.task .ib { position:absolute; }
.task.swap .ico.ia, .task.swap .ico.ib { transition: opacity .5s; transition-delay: inherit; }
.task.agentonly { opacity:0; }
.task.chatonly { transition-delay: 0s; }
#agent[data-step="1"] .task { left:var(--x1); top:var(--y1); }
#agent[data-step="1"] .task.move { color:var(--ink); }
#agent[data-step="1"] .task.move .ico { color:var(--claude); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--claude) 70%, transparent)); }
#agent[data-step="1"] .task.swap .lab .a, #agent[data-step="1"] .task.iswap .ia { opacity:0; }
#agent[data-step="1"] .task.swap .lab .b, #agent[data-step="1"] .task.iswap .ib { opacity:1; }
#agent[data-step="1"] .task.chatonly { opacity:0; }
#agent[data-step="1"] .task.agentonly { opacity:1; transition-delay:1.4s; color:var(--ink); }
#agent[data-step="1"] .task.human.stay { color:var(--ink); }
.ws-cap { position:relative; height:40px; font-family:var(--font-display); font-size:26px; font-weight:500; margin-top:6px; width:1500px; }
.ws-cap span { position:absolute; left:0; right:0; transition: opacity .6s var(--ease); }
.ws-cap em { font-style:normal; color:var(--ink-dim); font-weight:400; }
.ws-cap .b, #agent[data-step="1"] .ws-cap .a { opacity:0; }
#agent[data-step="1"] .ws-cap .b { opacity:1; transition-delay:1.2s; }

.key-ill { opacity:0; }
.slide.active .key-ill { animation: keyin 1s var(--ease) 1.6s forwards; }
@keyframes keyin { from { opacity:0; transform: translate(430px, 300px) rotate(-20deg); } to { opacity:1; transform: translate(400px, 300px) rotate(0deg); } }
.static .key-ill { opacity:1; }
.role { grid-template-columns: 190px 1fr; }

/* Chat vs. Ordner */
#folder { align-items:center; text-align:center; }
#folder .mode-switch span { width:170px; }
#folder .mode-switch .m-ind { width:170px; }
#folder[data-step="1"] .mode-switch .m-chat { color:var(--ink-dim); }
#folder[data-step="1"] .mode-switch .m-agent { color:var(--claude); text-shadow:0 0 14px rgba(255,138,80,.6); }
#folder[data-step="1"] .mode-switch .m-ind { transform:translateX(170px); background:var(--claude); box-shadow:0 0 14px var(--claude); }
.fstage { position:relative; width:1060px; height:500px; text-align:left; }
.win2 { position:absolute; inset:0; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:#0b0b0e; overflow:hidden; box-shadow: 0 40px 90px rgba(0,0,0,.55); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s; }
.w2bar { height:44px; display:flex; align-items:center; gap:8px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.07); background:#111116; }
.w2bar > i { width:11px; height:11px; border-radius:50%; background:#2a2a31; }
.w2bar span { margin-left:14px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-mid); }
.w2bar span .ico { font-size:16px; color:#8fb2ff; }
/* Chatfenster */
.w2body { padding:28px 40px; display:flex; flex-direction:column; gap:18px; height:calc(100% - 44px); position:relative; }
.cb-u { align-self:flex-end; background:#1d1d24; border-radius:18px 18px 4px 18px; padding:13px 18px; font-size:18px; color:var(--ink); }
.cb-a { align-self:flex-start; width:78%; }
.cb-a p { font-size:18px; color:var(--ink); margin-bottom:12px; }
.codeblock { position:relative; border-radius:12px; background:#050507; border:1px solid rgba(255,255,255,.08); padding:18px 20px; }
.codeblock pre { font-family:var(--font-mono); font-size:15px; line-height:1.7; color:#9aa3b5; white-space:pre; }
.copybtn { position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); padding:6px 11px; border-radius:8px; border:1px solid rgba(255,77,109,.7); box-shadow:0 0 0 0 rgba(255,77,109,.5); animation: copypulse 1.8s ease-in-out infinite; }
.copybtn .ico { font-size:14px; color:var(--env); }
@keyframes copypulse { 50% { box-shadow:0 0 18px 2px rgba(255,77,109,.45); } }
.cb-input { position:absolute; left:40px; right:40px; bottom:24px; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px 18px; font-size:16px; color:var(--ink-dim); }
/* Finder */
.finder { opacity:0; transform: translateY(30px) scale(.97); pointer-events:none; border-color:rgba(255,138,80,.4); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(255,138,80,.1); }
.fbody { display:grid; grid-template-columns: 210px 1fr; height:calc(100% - 44px - 64px); }
.fside { border-right:1px solid rgba(255,255,255,.06); background:#0e0e12; padding:22px 18px; display:flex; flex-direction:column; gap:12px; font-size:15px; color:var(--ink-mid); }
.fside b { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); font-weight:500; }
.fside .on { color:var(--ink); display:flex; align-items:center; gap:8px; padding:6px 8px; margin:0 -8px; border-radius:8px; background:rgba(255,138,80,.12); }
.fside .on .ico { font-size:16px; color:var(--claude); }
.fgrid { padding:34px 40px; display:grid; grid-template-columns: repeat(3, 1fr); gap:34px 20px; align-content:start; }
.fi { display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-mono); font-size:14px; color:var(--ink); opacity:0; transform: scale(.7) translateY(10px); }
.fi .ico { font-size:58px; color:var(--c); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent)); }
.cc-strip { position:absolute; left:0; right:0; bottom:0; height:64px; display:flex; align-items:center; gap:14px; padding:0 22px; border-top:1px solid rgba(255,138,80,.25); background:rgba(255,138,80,.05); font-family:var(--font-mono); font-size:14px; color:var(--ink-mid); white-space:nowrap; }
.cc-strip .spark { color:var(--claude); font-size:20px; text-shadow:0 0 10px var(--claude); }
.cc-strip b { color:var(--claude); font-weight:500; }
.cc-strip .ok { margin-left:auto; color:var(--supa); opacity:0; transition: opacity .6s 3.4s; }
#folder[data-step="1"] .chatwin { opacity:0; transform: translateY(-20px) scale(.95); filter: blur(6px); }
#folder[data-step="1"] .finder { opacity:1; transform:none; transition-delay:.25s; }
#folder[data-step="1"] .fi { animation: fipop .6s var(--ease) forwards; animation-delay: calc(var(--i) * 380ms + 900ms); }
#folder[data-step="1"] .cc-strip .ok { opacity:1; }
@keyframes fipop { to { opacity:1; transform:none; } }
.fcap { width:1060px; margin-top:28px; font-size:22px; }
.fcap .a b { color:var(--env); font-weight:500; }
.fcap span { position:absolute; left:0; right:0; }
#folder .ws-cap .b, #folder[data-step="1"] .ws-cap .a { opacity:0; }
#folder[data-step="1"] .ws-cap .b { opacity:1; transition-delay:1s; }
.static #folder[data-step="1"] .fi { opacity:1; transform:none; }

/* Kreislauf zentriert mit Icons */
#cycle .cycle { width:620px; height:620px; margin-top:20px; }
.cnode { position:absolute; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#0a0a0d; border:1.5px solid var(--claude); box-shadow:0 0 14px rgba(255,138,80,.55), inset 0 0 10px rgba(255,138,80,.2); color:var(--claude); font-size:26px; }
.cnode .ico { filter: drop-shadow(0 0 6px var(--claude)); }
#cycle .node { width:220px; margin-left:-110px; }

/* Systemkarte */
#sysmap { justify-content:flex-start; padding-top:120px; }
.sysmap { position:relative; width:1600px; height:620px; margin:6px auto 0; }
.sm-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sysmap svg [data-in] { transform:none; filter:none; opacity:1; }
.se { fill:none; stroke:var(--c); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; opacity:.75; filter: drop-shadow(0 0 4px var(--c)); transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.3,1) .35s; }
.se.on { stroke-dashoffset:0; }
.se.dashed { stroke-dasharray:1; opacity:.5; }
.se.dashed.on { stroke-dasharray: .012 .012; stroke-dashoffset:0; }
.sel { fill:var(--ink-dim); font-family:var(--font-body); font-size:15px; letter-spacing:.04em; opacity:0 !important; transition: opacity .6s .9s !important; }
.sel.on { opacity:1 !important; }
.sp { fill:var(--c); filter: drop-shadow(0 0 6px var(--c)); opacity:0 !important; transition: opacity .6s 1.3s !important; }
.sp.on { opacity:1 !important; }
.sn { position:absolute; width:200px; margin-left:-100px; margin-top:-50px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.sn .ring { width:100px; height:100px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle, color-mix(in srgb, var(--c) 16%, #08080b), #08080b 70%); border:1.5px solid var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); margin-bottom:8px; }
.sn .ring img { width:44px; height:44px; filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.4)); }
.sn .ring .ico { font-size:44px; color:var(--c); filter: drop-shadow(0 0 8px var(--c)); }
.sn b { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); }
.sn span { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--c); text-shadow:0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.sn[data-in] { transform: scale(.85); }
.sn[data-in].on { transform:none; }
.sm-cap { position:relative; height:34px; margin-top:34px; text-align:center; font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--ink); }
.sm-cap .sc { position:absolute; left:0; right:0; opacity:0; transition: opacity .6s var(--ease); }
#sysmap[data-step="0"] .sc[data-only="0"] { opacity:1; transition-delay:.4s; }
#sysmap[data-step="1"] .sc[data-only="1"] { opacity:1; transition-delay:.4s; }
#sysmap[data-step="2"] .sc[data-only="2"] { opacity:1; transition-delay:.4s; }
#sysmap[data-step="3"] .sc[data-only="3"] { opacity:1; transition-delay:.4s; }
#sysmap[data-step="4"] .sc[data-only="4"] { opacity:1; transition-delay:.4s; }
#sysmap[data-step="5"] .sc[data-only="5"] { opacity:1; transition-delay:.4s; }
#sysmap[data-step="6"] .sc[data-only="6"] { opacity:1; transition-delay:.4s; }
.static .se { stroke-dashoffset:0; }

/* Datenbank-Erklärung */
#database { justify-content:flex-start; padding-top:130px; }
.dbstage { position:relative; width:1600px; height:520px; margin:24px auto 0; }
.db-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dbstage svg [data-in] { transform:none; filter:none; }
.db-line { fill:none; stroke:var(--supa); stroke-width:1.6; opacity:.55; filter: drop-shadow(0 0 4px var(--supa)); }
.db-line.out { stroke:var(--claude); filter: drop-shadow(0 0 4px var(--claude)); }
.db-p { fill:var(--supa); filter: drop-shadow(0 0 6px var(--supa)); }
.db-p.out { fill:var(--claude); filter: drop-shadow(0 0 6px var(--claude)); }
.db-surface-l { position:absolute; left:40px; top:30px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mid); }
.db-ev { position:absolute; left:60px; height:36px; margin-top:-18px; display:flex; align-items:center; gap:16px; font-size:21px; font-weight:300; color:var(--ink); }
.db-ev .ico { font-size:24px; color:var(--supa); filter: drop-shadow(0 0 6px var(--supa)); }
.db-cyl-l { position:absolute; left:860px; width:240px; top:212px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.db-cyl-l img { width:40px; height:40px; filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(62,207,142,.8)); margin-bottom:6px; }
.db-cyl-l b { font-family:var(--font-display); font-size:22px; font-weight:600; }
.db-cyl-l span { font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--supa); }
.db-tables { position:absolute; left:860px; width:240px; top:450px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-family:var(--font-mono); font-size:13px; color:var(--supa); opacity:.85; }
.db-out { position:absolute; left:1280px; top:440px; display:flex; flex-direction:column; gap:6px; }
.db-out b { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--claude); text-shadow:0 0 14px rgba(255,138,80,.5); }
.db-out span { font-size:18px; font-weight:300; color:var(--ink-mid); }
.db-cap { margin-top:24px; }
#database[data-step="0"] .sc[data-only="0"] { opacity:1; transition-delay:.4s; }
#database[data-step="1"] .sc[data-only="1"] { opacity:1; transition-delay:.4s; }
#database[data-step="2"] .sc[data-only="2"] { opacity:1; transition-delay:.4s; }

/* ─── Maskottchen: das kleine Claude-Funkeln ─── */
.copyright { bottom:22px !important; }
.mascot { position:absolute; left:0; top:0; width:84px; height:84px; z-index:30; pointer-events:none;
  transform: translate(calc(var(--mx, 160px) - 42px), 955px); transition: transform 1.4s cubic-bezier(.45,0,.25,1), opacity .6s; }
.mascot.hide { opacity:0; }
.m-body { width:84px; height:84px; overflow:visible; filter: drop-shadow(0 0 6px rgba(255,138,80,.8)) drop-shadow(0 0 18px rgba(255,138,80,.35)); }
.m-rays path, .m-legs path, .m-core { fill:#ff8a50; }
.m-eyes ellipse { fill:#1a0d06; }
.m-eyes .hl { fill:#fff; }
.m-eyes { transform-origin: 0 -2px; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.m-body { animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes breathe { 50% { transform: scale(1.03, .98); } }
.mascot.left .m-body { scale: -1 1; }
.mascot.walking .m-body { animation: bob .28s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-4px) rotate(3deg); } }
.leg { transform-origin: 0 0; }
.mascot.walking .leg:nth-child(1) { animation: legA .28s ease-in-out infinite alternate; }
.mascot.walking .leg:nth-child(2) { animation: legB .28s ease-in-out infinite alternate; }
.mascot.walking .leg:nth-child(3) { animation: legA .28s ease-in-out infinite alternate-reverse; }
@keyframes legA { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes legB { from { transform: rotate(10deg) scaleY(.9); } to { transform: rotate(-10deg) scaleY(1); } }
.m-arm { transform-origin: 0 0; }
.mascot[data-act="wave"] .m-arm { animation: wave .9s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
.mascot[data-act="cheer"] .m-body { animation: cheer .9s ease-in-out infinite; }
@keyframes cheer { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-4deg); } }
.mascot[data-act="work"] .m-body { animation: work .22s ease-in-out infinite alternate; }
@keyframes work { to { transform: rotate(-6deg) translateX(-2px); } }
.m-prop { opacity:0; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.m-hold { position:absolute; left:64px; top:30px; width:44px; height:auto; transform: scale(.4) rotate(-20deg); filter: drop-shadow(0 0 6px currentColor); }
.m-hold[data-p="key"] { color:#ffd23f; width:46px; top:36px; }
.m-hold[data-p="folder"] { color:#8fb2ff; width:36px; top:34px; }
.m-hold[data-p="glass"] { color:#ff6a9a; width:24px; top:18px; left:68px; }
.mascot[data-prop~="key"] .m-hold[data-p="key"], .mascot[data-prop~="folder"] .m-hold[data-p="folder"], .mascot[data-prop~="glass"] .m-hold[data-p="glass"] { opacity:1; transform:none; transition-delay:.5s; }
.mascot[data-prop~="helmet"] .m-prop[data-p="helmet"] { opacity:1; }
.mascot.left .m-hold { left:-24px; }
.m-bubble { position:absolute; bottom:96px; left:42px; transform: translate(-50%, 8px); white-space:nowrap; font-size:16px; font-weight:400; color:var(--ink); padding:9px 15px; border-radius:14px; background:rgba(14,12,12,.92); border:1px solid rgba(255,138,80,.5); box-shadow:0 0 22px rgba(255,138,80,.18); opacity:0; transition: opacity .4s, transform .5s var(--ease); }
.m-bubble::after { content:''; position:absolute; left:50%; bottom:-6px; width:10px; height:10px; margin-left:-5px; background:rgba(14,12,12,.92); border-right:1px solid rgba(255,138,80,.5); border-bottom:1px solid rgba(255,138,80,.5); transform: rotate(45deg); }
.mascot.talk .m-bubble { opacity:1; transform: translate(-50%, 0); transition-delay:.9s; }
.mascot.edge-r .m-bubble { left:auto; right:0; transform: translate(0, 8px); }
.mascot.edge-r.talk .m-bubble { transform:none; }
.mascot.edge-r .m-bubble::after { left:auto; right:30px; }
.mascot.edge-l .m-bubble { left:0; transform: translate(0, 8px); }
.mascot.edge-l.talk .m-bubble { transform:none; }
.mascot.edge-l .m-bubble::after { left:30px; }

/* API · CLI · MCP (neu) */
.trio2 { display:grid; grid-template-columns: repeat(3, 1fr); gap:60px; margin-top:30px; }
.t2 { border-top:1px solid color-mix(in srgb, var(--c) 55%, transparent); padding-top:26px; position:relative; }
.t2::before { content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--c); box-shadow:0 0 12px var(--c); opacity:.7; }
.t2-ill { width:100%; height:180px; overflow:visible; margin-bottom:14px; }
.t2 .what { font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--c); margin-bottom:10px; }
.t2 h3 { font-size:30px; font-weight:600; margin-bottom:14px; }
.t2 p { font-size:19px; }
.t2-sign { fill:var(--ink-dim); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; }
.t2-code { fill:var(--ink); font-family:var(--font-mono); font-size:19px; }
.t2-code.ok { fill:var(--supa); font-size:16px; }
.t2-caret { animation: blink 1s steps(2) infinite; }
.api-key { transition: opacity .6s var(--ease) .3s, transform .9s var(--ease) .3s; }
#apis[data-step="1"] .api-key, #apis[data-step="2"] .api-key, #apis[data-step="3"] .api-key, #apis[data-step="4"] .api-key { opacity:0; transform: translate(-40px, 120px) scale(.6); }

/* Vollflächige Hintergründe über den 16:9-Rahmen hinaus verlängern */
.awards-bleed { position:absolute; inset:-400px -900px; overflow:hidden; }
.awards-bleed img { width:100%; height:100%; object-fit:cover; filter: blur(50px) brightness(.45) saturate(.8); transition: opacity 1.4s var(--ease); }
#awards[data-step="1"] .awards-bleed img { opacity:.25; }
#awards.active .awards-bg img { animation: kenburns2 18s ease-out both; transform-origin: 50% 35%; }
@keyframes kenburns2 { from { transform:scale(1); } to { transform:scale(1.035); } }
#awards .awards-bg img { transform:none; }
.waves { inset:-200px -600px; }
.waves svg { filter: blur(7px) !important; opacity:.9; left:600px !important; right:600px !important; top:350px !important; width:auto !important; height:1080px !important; }
.wglow { filter: blur(110px); }

/* Leistungen: Zahlenleiste klar abgesetzt */
.facts-wrap { position:relative; width:1560px; margin-top:14px; padding:44px 0 6px; }
.facts-wrap::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 15%, rgba(255,255,255,.16) 85%, transparent); }
.facts-label { position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:0 18px; background:var(--bg); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
#services .pillars { margin-bottom:40px; }

/* Epochen-Illustrationen: gefüllt, plastisch */
.era .ill { width:300px; height:auto; overflow:visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.era:nth-child(1) .ill { filter: drop-shadow(0 0 24px rgba(91,124,255,.35)) drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.era:nth-child(2) .ill { filter: drop-shadow(0 0 20px rgba(255,77,109,.25)); }
.era:nth-child(3) .ill { width:320px; filter: drop-shadow(0 0 26px rgba(255,138,80,.35)); }
.vflow { animation: vflow 1s linear infinite; }
@keyframes vflow { to { stroke-dashoffset:-20; } }

/* gefüllte Illustrationen: Einblenden */
.op-ill .pop { opacity:0; transform: scale(.85) translateY(8px); transform-box: fill-box; transform-origin: center; }
.slide.active .op-ill .pop { animation: popin .9s var(--ease) forwards; animation-delay: var(--pd, .4s); }
@keyframes popin { to { opacity:1; transform:none; } }
.static .op-ill .pop { opacity:1; transform:none; }
.slide.active .op-ill .spark { animation: popin .9s var(--ease) forwards; animation-delay: var(--pd, 1.6s); }
.t2-code.ok2 { fill:#06140d; font-size:15px; font-weight:500; }
.blueprint { background-image: linear-gradient(rgba(47,214,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(47,214,255,.06) 1px, transparent 1px); }

/* Folien ohne Kopf- und Fußzeile */
.topbar, .progress, .pageno, .copyright { transition: opacity .6s var(--ease); }
.chrome-off .topbar, .chrome-off .progress, .chrome-off .pageno, .chrome-off .copyright { opacity:0; }

/* 4,7 Sterne: letzter Stern zu 70 % gefüllt */
.fact .stars-47 { background: linear-gradient(90deg, #f5b731 0%, #f5b731 94%, #3a3a44 94%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Abo-Karten größer */
.era:nth-child(2) .ill { width:360px; margin-top:24px; }
.era:nth-child(1) .ill { width:340px; }
.era:nth-child(3) .ill { width:360px; }
.abo-sum { font-size:20px; margin-top:14px; }
.era .vis svg.ill { height:auto; }
.era .vis { min-height:0; }

/* Sprechblase neben dem Maskottchen (bleibt im unteren Streifen) */
.m-bubble { bottom:auto; top:22px; left:96px; transform: translate(-8px, 0); font-size:15px; padding:8px 14px; }
.m-bubble::after { left:-6px; bottom:auto; top:50%; margin:-5px 0 0 0; border-right:0; border-bottom:1px solid rgba(255,138,80,.5); border-left:1px solid rgba(255,138,80,.5); transform: rotate(45deg); }
.mascot.talk .m-bubble { transform:none; }
.mascot[data-prop~="key"] .m-bubble, .mascot[data-prop~="folder"] .m-bubble, .mascot[data-prop~="glass"] .m-bubble { left:118px; }
.mascot.edge-r .m-bubble { left:auto; right:96px; transform: translate(8px, 0); }
.mascot.edge-r.talk .m-bubble { transform:none; }
.mascot.edge-r .m-bubble::after { left:auto; right:-6px; border-left:0; border-bottom:0; border-top:1px solid rgba(255,138,80,.5); border-right:1px solid rgba(255,138,80,.5); }
.mascot.edge-r[data-prop~="key"] .m-bubble, .mascot.edge-r[data-prop~="folder"] .m-bubble, .mascot.edge-r[data-prop~="glass"] .m-bubble { right:96px; }
.mascot.edge-l .m-bubble { left:96px; transform: translate(-8px, 0); }
.mascot.edge-l .m-bubble::after { left:-6px; }

/* ─── Maskottchen: Comic-Leben ─── */
.m-cheeks ellipse { fill:#ff4d6d; opacity:.45; }
.m-mouth { fill:none; stroke:#1a0d06; stroke-width:1.4; stroke-linecap:round; }
.m-happy path { fill:none; stroke:#1a0d06; stroke-width:1.8; stroke-linecap:round; }
.m-happy { opacity:0; }
.m-sweat path { fill:#9fe0ff; }
.m-sweat { opacity:0; }
.m-eyes { animation:none; transform-box: fill-box; transform-origin:center; }
.m-look { transition: transform .35s var(--ease); }
.m-wrap-anim { transform-origin: 50% 90%; }

/* Blinzeln (doppelt, süß) */
.mascot.i-blink .m-eyes { animation: blink2 .5s ease-in-out; }
@keyframes blink2 { 0%,100% { transform:scaleY(1); } 20% { transform:scaleY(.08); } 40% { transform:scaleY(1); } 60% { transform:scaleY(.08); } 80% { transform:scaleY(1); } }
/* Hüpfer */
.mascot.i-hop .m-body { animation: hop .7s cubic-bezier(.3,.7,.4,1); }
@keyframes hop { 0% { transform:none; } 18% { transform: scale(1.12,.84); } 45% { transform: translateY(-26px) scale(.92,1.1) rotate(-6deg); } 70% { transform: translateY(0) scale(1.1,.88); } 85% { transform: scale(.97,1.04); } 100% { transform:none; } }
/* Kratzen */
.mascot.i-scratch .m-arm { animation: scratch 1.2s ease-in-out; }
@keyframes scratch { 0%,100% { transform:rotate(0); } 15% { transform:rotate(-120deg); } 25%,45%,65% { transform:rotate(-135deg); } 35%,55%,75% { transform:rotate(-112deg); } 90% { transform:rotate(-120deg); } }
.mascot.i-scratch .m-body { animation: lean 1.2s ease-in-out; }
@keyframes lean { 0%,100% { transform:none; } 20%,85% { transform: rotate(8deg); } }
.mascot.i-scratch .m-eyes { transform: scaleY(.55); }
/* Hibbelig */
.mascot.i-fidget .m-body { animation: fidget .9s linear; }
@keyframes fidget { 0%,100% { transform:none; } 10% { transform: translateX(-2px) rotate(-4deg); } 20% { transform: translateX(2px) rotate(4deg); } 30% { transform: translateX(-2px) rotate(-3deg); } 40% { transform: translateX(2px) rotate(3deg); } 50% { transform: translateY(-3px); } 60% { transform: translateX(-2px) rotate(-4deg); } 70% { transform: translateX(2px) rotate(4deg); } 80% { transform: translateY(-2px); } }
.mascot.i-fidget .leg { animation: legA .15s ease-in-out infinite alternate; }
/* Umschauen */
.mascot.i-look .m-look { animation: look 1.8s ease-in-out; }
@keyframes look { 0%,100% { transform:none; } 20%,40% { transform: translateX(-2.6px); } 60%,80% { transform: translateX(2.6px) translateY(-1px); } }
/* Freuen */
.mascot.i-happy .m-eyes { opacity:0; }
.mascot.i-happy .m-happy { opacity:1; }
.mascot.i-happy .m-cheeks ellipse { opacity:.8; }
.mascot.i-happy .m-body { animation: wiggle .8s ease-in-out; }
@keyframes wiggle { 0%,100% { transform:none; } 25% { transform: rotate(-9deg); } 50% { transform: rotate(9deg) translateY(-4px); } 75% { transform: rotate(-5deg); } }
/* Puh – Schweißtropfen */
.mascot.i-phew .m-sweat { animation: sweat 1.4s ease-in forwards; }
@keyframes sweat { 0% { opacity:0; transform:none; } 20% { opacity:1; } 100% { opacity:0; transform: translateY(14px); } }
/* Drehen */
.mascot.i-spin .m-body { animation: spinm .8s cubic-bezier(.5,0,.3,1); }
@keyframes spinm { 0% { transform:none; } 30% { transform: translateY(-14px); } 100% { transform: rotate(360deg); } }

/* Deep Dive */
.book-contact { margin-top:34px; display:flex; gap:28px; align-items:center; font-size:19px; color:var(--ink-mid); }
.book-contact b { font-family:var(--font-display); font-weight:600; color:var(--ink); }
.book-contact span { padding-left:28px; border-left:1px solid var(--line-2); }
.studio-ill { width:560px; height:260px; }

/* Showcase: eigene Software in echt */
.showcase { display:grid; grid-template-columns: 560px 1fr; gap:70px; align-items:center; }
.sc-text h2 { font-size:46px; }
.sc-text p { font-size:20px; max-width:520px; }
.sc-feats { list-style:none; display:flex; flex-direction:column; margin-top:30px; }
.sc-feats li { display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line-2); }
.sc-feats li:last-child { border-bottom:1px solid var(--line-2); }
.sc-feats .ico { font-size:26px; color:var(--c); margin-top:2px; filter: drop-shadow(0 0 8px var(--c)); }
.sc-feats b { display:block; font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--ink); }
.sc-feats span { font-size:17px; color:var(--ink-mid); font-weight:300; }
.sc-shots { position:relative; height:640px; }
.shot { position:absolute; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--c) 18%, transparent); background:#0b0b0e; }
.shot img { display:block; width:100%; height:auto; }
.shot.back { width:780px; right:0; top:0; opacity:.55; transform: perspective(1600px) rotateY(-8deg); transform-origin: right center; filter: saturate(.8); }
.shot.front { width:860px; left:0; bottom:20px; transform: perspective(1600px) rotateY(-4deg); transform-origin: left center; }
.slide.active .shot.front { animation: shotin 1.2s var(--ease) .4s both; }
.slide.active .shot.back { animation: shotin2 1.2s var(--ease) .2s both; }
@keyframes shotin { from { opacity:0; transform: perspective(1600px) rotateY(-4deg) translateY(40px); } to { opacity:1; transform: perspective(1600px) rotateY(-4deg); } }
@keyframes shotin2 { from { opacity:0; transform: perspective(1600px) rotateY(-8deg) translateY(-30px); } to { opacity:.55; transform: perspective(1600px) rotateY(-8deg); } }
.static .shot.front, .static .shot.back { animation:none; }

/* Vollflächiges Foto hinter der Bühne (Awards-Collage) */
.stage-photo { position:fixed; inset:0; z-index:0; overflow:hidden; opacity:0; pointer-events:none; transition: opacity 1s var(--ease); }
.stage-photo img { width:100%; height:100%; object-fit:cover; object-position: 50% 30%; transition: opacity 1.4s var(--ease), filter 1.4s var(--ease); }
.photo-on .stage-photo { opacity:1; }
.photo-on .stage-photo img { animation: kenburns2 18s ease-out both; }
.photo-dim .stage-photo img { opacity:.22; filter: saturate(.6) blur(3px); }
.photo-dim .stage-photo::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(6,6,8,.6), var(--bg) 100%); }

/* Zahlenleiste: fünf gleiche Spalten */
.facts2 { display:grid; grid-template-columns: repeat(5, 1fr); width:100%; }
.f2 { display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 0; position:relative; }
.f2 + .f2::before { content:''; position:absolute; left:0; top:22px; bottom:6px; width:1px; background:var(--line-2); }
.f2-top { height:16px; font-size:15px; letter-spacing:.12em; line-height:16px; }
.f2-top.stars { color:#f5b731; }
.f2-top.stars-47 { background: linear-gradient(90deg, #f5b731 0%, #f5b731 94%, #3a3a44 94%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.f2 b { font-family:var(--font-display); font-size:42px; font-weight:400; letter-spacing:-.02em; line-height:1.1; }
.f2-l { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }

/* Mail-Chaos: Dateien-Wust rechts */
.chaos-side { position:absolute; left:900px; width:700px; top:0; bottom:0; }
.vstack { position:relative; height:430px; }
.vfile { position:absolute; left:calc(60px + var(--x)); top:calc(var(--y) + 10px); width:520px; display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:14px; background:linear-gradient(180deg,#17171d,#0f0f13); border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 36px rgba(0,0,0,.5); transform: rotate(var(--r)); }
.vfile[data-in] { transform: rotate(var(--r)) translateY(14px); }
.vfile[data-in].on { transform: rotate(var(--r)); }
.vf-badge { flex:none; width:58px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; font-weight:500; color:#fff; background:var(--fc); box-shadow:0 0 16px color-mix(in srgb, var(--fc) 50%, transparent); }
.vf-name { font-family:var(--font-mono); font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vf-size { margin-left:auto; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }
.vfile:last-of-type .vf-name { color:var(--ink-dim); text-decoration:line-through; }
.vq { position:absolute; right:-10px; top:140px; padding:12px 18px; border-radius:16px 16px 4px 16px; background:linear-gradient(135deg,#ff6a83,#e2234a); color:#fff; font-family:var(--font-display); font-weight:600; font-size:20px; transform: rotate(4deg); box-shadow:0 0 28px rgba(255,77,109,.45); z-index:3; }
.vq[data-in] { transform: rotate(4deg) scale(.8); }
.vq[data-in].on { transform: rotate(4deg); }
.chaos-stats { position:absolute; left:60px; right:0; bottom:10px; display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; border-top:1px solid var(--line-2); padding-top:22px; }
.chaos-stats div { display:flex; flex-direction:column; gap:4px; }
.chaos-stats b { font-family:var(--font-display); font-size:48px; font-weight:400; color:var(--env); text-shadow:0 0 18px rgba(255,77,109,.45); line-height:1; }
.chaos-stats span { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); line-height:1.4; }

/* Screenshots tauschen per Pfeiltaste */
.shot { transition: left 1s cubic-bezier(.65,0,.25,1), top 1s cubic-bezier(.65,0,.25,1), width 1s cubic-bezier(.65,0,.25,1), opacity .8s, transform 1s cubic-bezier(.65,0,.25,1), filter .8s; z-index:1; }
.shot.back { right:auto; left:200px; top:0; }
.shot.front { bottom:auto; left:0; top:110px; z-index:2; }
.slide[data-step="1"] .shot.front { left:200px; top:0; width:780px; opacity:.55; filter:saturate(.8); transform: perspective(1600px) rotateY(-8deg); z-index:1; }
.slide[data-step="1"] .shot.back { left:0; top:110px; width:860px; opacity:1; filter:none; transform: perspective(1600px) rotateY(-4deg); z-index:2; }
.slide[data-step="1"] .shot.back, .slide[data-step="1"] .shot.front { animation:none; }
.sc-feats li { padding:15px 0; }

/* Barchef in der Küche = das Maskottchen */
.bar-scene .chef .solid path, .bar-scene .chef .solid circle { fill:var(--c); stroke:none; }
.bar-scene .el.lit .chef { animation: chefbob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes chefbob { 50% { transform: translate(300px, 349px) scale(.95) rotate(-4deg); } 0%,100% { transform: translate(300px, 352px) scale(.95); } }

/* Website-Fenster: gleichmäßige Zeilen */
.db-ev { left:44px; width:352px; height:90px; margin-top:-45px; padding-left:20px; border-bottom:1px solid rgba(255,255,255,.07); }
.db-ev:last-of-type { border-bottom:0; }

/* Live-Zähler oben rechts: grün blinkend */
.live-pill { top:auto; right:auto; position:fixed; }
.live-pill { left:50%; top:22px; transform:translateX(-50%); color:var(--ink); border-color:rgba(62,207,142,.45); background:rgba(8,20,14,.75); box-shadow:0 0 22px rgba(62,207,142,.18); font-size:13px; letter-spacing:.08em; text-transform:none; }
.live-pill i { background:#3ecf8e; box-shadow:0 0 8px #3ecf8e, 0 0 18px rgba(62,207,142,.6); }
.live-pill.presenter::after { content:'· Presenter'; color:var(--ink-dim); margin-left:4px; }