:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#15141a; --muted:#77737f; --line:#e7e3da;
  --orange:#ff5b2e; --lav:#ebe5ff; --lav-d:#6d4aff; --mint:#d8f4e4; --mint-d:#139a5b; --butter:#fff0c2; --butter-d:#b7860b; --peach:#ffe1d6; --sky:#dcebff; --sky-d:#2f6fe0;
  --r:22px; --shadow:0 1px 0 rgba(0,0,0,.03),0 10px 30px -12px rgba(30,20,10,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);font-size:14px;min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.serif{font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;letter-spacing:-.01em}
.badge-variant{position:fixed;bottom:14px;left:14px;z-index:60;font-size:11px;padding:6px 10px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--muted)}

/* Topbar */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:14px 28px;background:rgba(246,244,239,.8);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:.3s}
header.scrolled{border-color:var(--line)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.03em}
.logo-mark{width:32px;height:32px;border-radius:10px;background:var(--ink);display:grid;place-items:center;position:relative}
.logo-mark span{width:12px;height:12px;border-radius:50%;background:var(--orange);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.6);border-radius:3px}}
.tabs{margin:0 auto;display:flex;gap:2px;padding:5px;border-radius:16px;background:#fff;border:1px solid var(--line);position:relative;box-shadow:var(--shadow)}
.tabs .pill{position:absolute;top:5px;bottom:5px;border-radius:11px;background:var(--ink);transition:.45s cubic-bezier(.5,1.5,.45,1);z-index:0}
.tab{position:relative;z-index:1;padding:9px 16px;border-radius:11px;font-weight:600;color:var(--muted);transition:color .3s;white-space:nowrap}
.tab.active{color:#fff}
.pilot-pill{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:30px;background:var(--mint);color:var(--mint-d);font-weight:700;font-size:13px}
.pilot-pill.off{background:#eee;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}

main{max-width:1320px;margin:0 auto;padding:26px 28px 80px}
.view{display:none}
.view.active{display:block}
.view.active .rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.view.active .rise:nth-child(2){animation-delay:.08s}.view.active .rise:nth-child(3){animation-delay:.16s}.view.active .rise:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:10px 0 26px;flex-wrap:wrap}
.hero h1{font-size:46px;font-weight:800;letter-spacing:-.045em;line-height:1.02}
.hero h1 .serif{font-size:54px;color:var(--orange)}
.hero p{color:var(--muted);margin-top:10px;font-size:15px;max-width:560px;line-height:1.5}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;font-weight:700;transition:.25s}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.45)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(255,91,46,.7)}
.btn-orange:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-light{background:#fff;border:1px solid var(--line)}
.btn-light:hover{border-color:#cfc9bc}
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);padding:20px}

/* Fließband */
.belt{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:30px}
.belt svg.wire{position:absolute;left:0;top:50%;width:100%;height:4px;margin-top:-2px;z-index:0;overflow:visible}
.wire line{stroke:#d9d3c6;stroke-width:2;stroke-dasharray:6 8;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.packet{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,91,46,.18);z-index:1;animation:travel 6s cubic-bezier(.6,0,.4,1) infinite}
.packet.p2{animation-delay:-3s;background:var(--lav-d);box-shadow:0 0 0 5px rgba(109,74,255,.18)}
@keyframes travel{0%{left:2%;opacity:0}5%{opacity:1}95%{opacity:1}100%{left:97%;opacity:0}}
.agent{position:relative;z-index:2;border-radius:var(--r);padding:20px;background:var(--bg-c);border:1px solid rgba(0,0,0,.05);transition:transform .35s cubic-bezier(.4,1.6,.5,1),box-shadow .3s;cursor:pointer;overflow:hidden}
.agent:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 20px 40px -18px rgba(0,0,0,.25)}
.agent .face{width:50px;height:50px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 6px 14px -6px rgba(0,0,0,.2);margin-bottom:16px}
.agent .face.busy{animation:wiggle 1.4s ease-in-out infinite}
@keyframes wiggle{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.agent .role{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--fg-c)}
.agent h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.agent .now{margin-top:12px;font-size:13px;color:#4a4652;min-height:38px;line-height:1.45}
.agent .num{position:absolute;top:16px;right:18px;font-family:"Instrument Serif";font-style:italic;font-size:34px;color:var(--fg-c);opacity:.5}
.agent .prog{height:6px;background:rgba(255,255,255,.7);border-radius:6px;margin-top:12px;overflow:hidden}
.agent .prog i{display:block;height:100%;background:var(--fg-c);border-radius:6px;width:30%;transition:width .9s cubic-bezier(.2,.8,.2,1)}

/* Board */
.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.board-head h2{font-size:22px;font-weight:800;letter-spacing:-.03em}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter{padding:7px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:12.5px;color:var(--muted);transition:.2s}
.filter.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.col{background:#efece5;border-radius:var(--r);padding:12px;min-height:360px;transition:background .25s}
.col.over{background:#e6e1d5;box-shadow:inset 0 0 0 2px var(--orange)}
.col-h{display:flex;align-items:center;gap:8px;padding:6px 6px 12px;font-weight:800}
.col-h .cnt{margin-left:auto;font-size:12px;background:#fff;border-radius:20px;padding:2px 9px;color:var(--muted)}
.col-h .ic{width:10px;height:10px;border-radius:50%}
.pc{background:#fff;border-radius:16px;padding:10px;margin-bottom:10px;border:1px solid var(--line);cursor:grab;transition:transform .25s,box-shadow .25s;animation:pcIn .5s cubic-bezier(.2,.8,.2,1) both}
.pc:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(0,0,0,.3)}
.pc.dragging{opacity:.4;transform:rotate(3deg)}
@keyframes pcIn{from{opacity:0;transform:scale(.92) translateY(10px)}}
.pc .img{height:92px;border-radius:11px;margin-bottom:10px;position:relative;overflow:hidden}
.pc .img .kind{position:absolute;top:7px;left:7px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.88)}
.pc b{display:block;font-size:13.5px;line-height:1.35;letter-spacing:-.01em}
.pc .ft{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.pc .ft .time{margin-left:auto;font-weight:600}
.pf{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:9.5px;font-weight:800;color:#fff;flex:none}
.pf-ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.pf-tt{background:#111;color:#5ef1ee}.pf-li{background:#0a66c2}.pf-x{background:#111}.pf-fb{background:#1877f2}.pf-yt{background:#ff0033}.pf-th{background:#111}.pf-pi{background:#e60023}.pf-bs{background:#1185fe}
.writing{display:flex;gap:4px;align-items:center;font-size:11.5px;color:var(--lav-d);font-weight:600;margin-top:8px}
.writing i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:hop 1.1s infinite}
.writing i:nth-child(2){animation-delay:.15s}.writing i:nth-child(3){animation-delay:.3s}
@keyframes hop{30%{transform:translateY(-4px)}}
.add-idea{width:100%;padding:12px;border-radius:14px;border:1.5px dashed #cfc8b8;color:var(--muted);font-weight:700;transition:.2s}
.add-idea:hover{border-color:var(--orange);color:var(--orange);background:#fff}

/* Studio */
.studio{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.chat{display:flex;flex-direction:column;height:640px;padding:0;overflow:hidden}
.chat-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.stack{display:flex}
.stack span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;border:2px solid #fff;margin-left:-8px}
.stack span:first-child{margin-left:0}
.msgs{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.msg{display:flex;gap:10px;max-width:88%;animation:msgIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.97)}}
.msg .who{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:15px}
.msg .bubble{padding:12px 14px;border-radius:16px;background:#f3f1ec;line-height:1.5;font-size:13.5px}
.msg .bubble small{display:block;font-weight:700;font-size:11.5px;margin-bottom:3px;color:var(--muted)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:var(--ink);color:#fff}
.msg .gen{width:220px;height:160px;border-radius:12px;margin-top:8px;background:radial-gradient(circle at 75% 25%,#fff3b0 0 10%,transparent 11%),radial-gradient(ellipse at 30% 115%,#ff5b2e 0 45%,transparent 46%),linear-gradient(160deg,#c9b8ff,#ffc2a8);position:relative;overflow:hidden}
.msg .gen::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);animation:sweep 1.4s ease forwards}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.quick button{padding:6px 11px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;transition:.2s}
.quick button:hover{border-color:var(--ink)}
.composer{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);align-items:center}
.composer input{flex:1;padding:13px 15px;border-radius:14px;border:1px solid var(--line);background:#faf9f6;outline:0;transition:.2s}
.composer input:focus{border-color:var(--ink);background:#fff}
.preview-tabs{display:flex;gap:6px;margin-bottom:14px}
.preview-tabs button{padding:8px 13px;border-radius:12px;font-weight:700;font-size:12.5px;display:flex;gap:7px;align-items:center;border:1px solid var(--line);background:#fff;transition:.2s}
.preview-tabs button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.post{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#fff;transition:.4s}
.post .ph{display:flex;align-items:center;gap:10px;padding:12px 14px}
.post .ph .avatar{width:32px;height:32px;font-size:11px}
.post .ph small{display:block;color:var(--muted);font-size:11.5px}
.post .media{aspect-ratio:1;background:#f0ede6;position:relative;overflow:hidden;transition:aspect-ratio .5s}
.post.li .media{aspect-ratio:1.6}
.post.tt .media{aspect-ratio:.8}
.post .media .art{position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,#fff3b0 0 10%,transparent 11%),radial-gradient(ellipse at 30% 115%,#ff5b2e 0 45%,transparent 46%),linear-gradient(160deg,#c9b8ff,#ffc2a8);opacity:0;transform:scale(1.1);transition:1s cubic-bezier(.2,.8,.2,1)}
.post .media .art.show{opacity:1;transform:none}
.post .media .hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:600;font-size:13px}
.post .txt{padding:12px 14px 16px;font-size:13px;line-height:1.55;color:#36333b;min-height:80px}
.post .txt .h{color:var(--sky-d)}
.sched{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.sched .slot{flex:1;min-width:180px;padding:12px 14px;border-radius:14px;background:var(--butter);display:flex;align-items:center;gap:10px;font-weight:700}
.sched .slot small{display:block;font-weight:500;color:#7a6418;font-size:11.5px}

/* Kalender */
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.month .dn{font-size:12px;font-weight:700;color:var(--muted);text-align:center;padding:4px}
.cell{min-height:112px;border-radius:16px;background:#fff;border:1px solid var(--line);padding:9px;transition:.25s;position:relative}
.cell:hover{transform:scale(1.03);box-shadow:var(--shadow);z-index:2}
.cell.dim{background:transparent;border-style:dashed;opacity:.5}
.cell.today{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.cell .d{font-weight:800;font-size:13px}
.cell .ps{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cell .p{display:flex;align-items:center;gap:5px;font-size:11px;padding:3px 6px;border-radius:8px;background:var(--bgc);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .p .pf{width:15px;height:15px;font-size:7px;border-radius:4px}

/* Autopilot – Satz-Konfigurator */
.pilot{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
.sentence{font-size:32px;line-height:1.75;font-weight:700;letter-spacing:-.03em;padding:34px}
.sentence .slot{display:inline-flex;align-items:center;gap:6px;padding:0 14px;margin:0 2px;border-radius:14px;background:var(--bgc,var(--lav));color:var(--fgc,var(--lav-d));cursor:pointer;position:relative;transition:.25s;line-height:1.5;vertical-align:baseline}
.sentence .slot:hover{transform:translateY(-2px) rotate(-1deg)}
.sentence .slot::after{content:"▾";font-size:16px;opacity:.6}
.sentence .slot.changed{animation:jelly .5s}
@keyframes jelly{30%{transform:scale(1.12,.9)}60%{transform:scale(.95,1.05)}}
.pop{position:absolute;z-index:40;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -16px rgba(0,0,0,.3);padding:10px;min-width:230px;animation:popIn .3s cubic-bezier(.4,1.6,.5,1);font-size:14px;font-weight:600;letter-spacing:0;line-height:1.4}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.95)}}
.pop .o{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:11px;text-align:left;transition:.15s}
.pop .o:hover{background:#f3f1ec}
.pop .o.on{background:var(--ink);color:#fff}
.pop .chk{width:18px;height:18px;border-radius:6px;border:2px solid #cfc8b8;display:grid;place-items:center;font-size:11px;color:#fff}
.pop .o.on .chk{background:var(--orange);border-color:var(--orange)}
.pop .numrow{display:flex;align-items:center;justify-content:space-between;padding:6px}
.pop .numrow button{width:40px;height:40px;border-radius:12px;background:#f3f1ec;font-size:20px;font-weight:700}
.pop .numrow b{font-size:30px}
.pilot-toggle{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-top:1px solid var(--line)}
.big-sw{width:64px;height:36px;border-radius:30px;background:#ddd8cc;position:relative;transition:.35s}
.big-sw::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.2);transition:.4s cubic-bezier(.5,1.7,.4,1)}
.big-sw.on{background:var(--mint-d)}
.big-sw.on::after{left:32px}
.timeline h3{font-size:16px;font-weight:800;margin-bottom:4px}
.timeline .sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.tl-day{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);align-items:center}
.tl-day:last-child{border:0}
.tl-day .dl{width:44px;font-weight:800;font-size:13px}
.tl-day .dl small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.tl-slots{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.tl-slot{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:10px;background:var(--bgc);font-size:12px;font-weight:700;animation:pcIn .4s cubic-bezier(.4,1.6,.5,1) both}
.tl-slot .pf{width:16px;height:16px;font-size:7px;border-radius:5px}
.tl-off{color:#b9b3a6;font-size:12px;font-weight:600}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.stat{padding:14px;border-radius:16px;background:var(--bgc)}
.stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em}
.stat small{font-size:11.5px;font-weight:600;color:#55515c}

/* Kanäle */
.ch-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ch{display:flex;align-items:center;gap:14px;padding:18px;transition:.3s}
.ch:hover{transform:translateY(-3px)}
.ch .pf{width:46px;height:46px;border-radius:14px;font-size:15px}
.ch .info{flex:1}
.ch .info small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.ch.off{opacity:.6;filter:grayscale(.6)}
.sw{width:44px;height:26px;border-radius:20px;background:#ddd8cc;position:relative;transition:.3s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.35s cubic-bezier(.5,1.7,.4,1)}
.sw.on{background:var(--ink)}
.sw.on::after{left:21px}
.api-strip{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.api{flex:1;min-width:240px;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:var(--bgc)}
.api .ic{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:18px}
.api small{display:block;font-size:12px;color:#55515c}
.api .ok{margin-left:auto;font-weight:800;font-size:12px;color:var(--mint-d)}

/* Ideen-Drawer */
.fab{position:fixed;right:26px;bottom:26px;z-index:35;display:flex;align-items:center;gap:10px;padding:14px 20px 14px 16px;border-radius:40px;background:var(--ink);color:#fff;font-weight:700;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transition:.3s}
.fab:hover{transform:translateY(-3px) scale(1.03)}
.fab .spark{width:28px;height:28px;border-radius:50%;background:var(--butter);display:grid;place-items:center;animation:spinS 6s linear infinite}
@keyframes spinS{to{transform:rotate(360deg)}}
.scrim{position:fixed;inset:0;background:rgba(20,15,10,.25);backdrop-filter:blur(3px);z-index:44;opacity:0;pointer-events:none;transition:.35s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:12px;right:12px;bottom:12px;width:min(420px,calc(100vw - 24px));z-index:45;background:var(--bg);border-radius:26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);transform:translateX(110%);transition:.5s cubic-bezier(.3,1.2,.4,1);display:flex;flex-direction:column;overflow:hidden}
.drawer.show{transform:none}
.drawer-h{padding:22px 22px 12px;display:flex;align-items:flex-start;justify-content:space-between}
.drawer-h h2{font-size:26px;font-weight:800;letter-spacing:-.04em}
.drawer-body{flex:1;overflow:auto;padding:0 22px 22px;display:flex;flex-direction:column;gap:12px}
.idea{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);animation:pcIn .5s cubic-bezier(.2,.8,.2,1) both}
.idea .tag{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;background:var(--bgc)}
.idea b{display:block;margin:10px 0 6px;font-size:15px;letter-spacing:-.02em}
.idea p{font-size:13px;color:var(--muted);line-height:1.5}
.idea .row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.idea .heat{font-size:12px;font-weight:700;color:var(--orange)}
.idea .use{font-weight:800;font-size:13px;padding:7px 12px;border-radius:10px;background:var(--ink);color:#fff}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:70;background:var(--ink);color:#fff;padding:13px 18px;border-radius:16px;font-weight:600;display:flex;gap:10px;align-items:center;transition:.5s cubic-bezier(.4,1.6,.5,1);box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
.toast.show{transform:translate(-50%,0)}

/* ===== Gemeinsame Controls ===== */
.seg{display:inline-flex;padding:4px;border-radius:14px;background:#fff;border:1px solid var(--line);gap:2px;flex-wrap:wrap}
.seg button{padding:8px 15px;border-radius:10px;font-weight:700;color:var(--muted);font-size:13px;transition:.25s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff}
.seg.sm button{padding:6px 11px;font-size:12.5px}
.btn-sm{padding:8px 12px;font-size:12.5px;border-radius:11px}
.inp{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:#faf9f6;outline:0;transition:.2s;font-size:13.5px}
.inp:focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(21,20,26,.06)}
select.inp{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#77737f 50%),linear-gradient(135deg,#77737f 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
textarea.inp{resize:vertical;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.ct,.chip-s{padding:7px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:12.5px;color:var(--muted);transition:.2s}
.ct:hover{border-color:#cfc8b8}
.ct.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-s{background:var(--sky);color:var(--sky-d);border-color:transparent;font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:#e7e3da;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer;transition:.2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.rng{display:flex;align-items:center;gap:12px;width:280px;max-width:100%}
.rng output{min-width:58px;text-align:right;font-weight:800}
.muted{color:var(--muted)}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ===== Statistik ===== */
.period-line{display:flex;align-items:baseline;gap:12px;margin:-6px 0 16px;flex-wrap:wrap}
.period-line b{font-size:16px;font-weight:800}
.period-line span{color:var(--muted);font-size:13px}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}
.kpi{padding:16px;animation:pcIn .5s cubic-bezier(.2,.8,.2,1) both}
.kl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ki{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:13px}
.kv{font-size:26px;font-weight:800;letter-spacing:-.035em;margin:12px 0 8px}
.kd{display:flex;flex-direction:column;gap:5px}
.kd small{font-size:11.5px;color:var(--muted)}
.delta{display:inline-flex;align-self:flex-start;gap:4px;font-size:12px;font-weight:800;padding:3px 8px;border-radius:20px;white-space:nowrap}
.delta.up{background:var(--mint);color:#0d7a47}
.delta.down{background:#ffe3dd;color:#b4321c}
.stats-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:start}
.side-col{display:flex;flex-direction:column;gap:20px}
.chart-card h3,.side-col h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.cap{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45;max-width:560px}
.ch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.series{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.stg{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:12px;border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--muted);transition:.2s;background:#fff}
.stg .box{width:18px;height:18px;border-radius:6px;border:2px solid var(--sc);display:grid;place-items:center;font-size:11px;color:#fff;transition:.2s}
.stg.on{color:var(--ink);border-color:#d8d2c5}
.stg.on .box{background:var(--sc)}
.chart-wrap{position:relative;margin-top:8px}
.chart-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.gl{stroke:#eeeae2;stroke-width:1}
.zero{stroke:#c9c2b4;stroke-width:1}
.ax{font-size:11px;fill:#8a8590;font-family:inherit}
.el{font-size:12px;fill:var(--ink);font-family:inherit}
.ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.xh{stroke:#b9b2a4;stroke-width:1;stroke-dasharray:3 3;transition:opacity .15s}
.bar{fill:#2a78d6;transform-box:fill-box;transform-origin:bottom;animation:grow .6s cubic-bezier(.3,1.3,.5,1) both;transition:fill .2s}
.bar:hover{fill:#1d5fae}
@keyframes grow{from{transform:scaleY(0)}}
.tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.3);font-size:12.5px;min-width:180px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:5}
.tip.show{opacity:1;transform:none}
.tip b{display:block;margin-bottom:6px}
.tip div{display:flex;align-items:center;gap:7px;padding:2px 0;color:#4a4652}
.tip em{margin-left:auto;font-style:normal;font-weight:800;color:var(--ink);padding-left:14px;white-space:nowrap}
.sd{width:9px;height:9px;border-radius:3px;flex:none}
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.tbl th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line);background:#fff}
.tbl td{padding:10px 6px;border-bottom:1px solid #f1eee7;font-weight:600;white-space:nowrap}
.tbl td .pf{vertical-align:middle;margin-right:4px;width:20px;height:20px;font-size:8px}
.tbl-wrap{display:none;max-height:340px;overflow:auto}
.tbl-wrap th{position:sticky;top:0}

/* ===== Einstellungen ===== */
.settings{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.snav{position:sticky;top:86px;display:flex;flex-direction:column;gap:2px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.snav-l{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a8a29a;padding:12px 10px 6px}
.snav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-weight:700;color:#55515c;text-align:left;transition:.2s}
.snav button i{font-style:normal;width:22px;text-align:center}
.snav button:hover{background:#f3f1ec}
.snav button.on{background:var(--ink);color:#fff}
.spanel{display:none}
.spanel.active{display:block;animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.ph2{margin-bottom:8px}
.ph2 h2{font-size:24px;font-weight:800;letter-spacing:-.035em}
.ph2 p{color:var(--muted);margin-top:4px;line-height:1.5;max-width:640px}
.fr{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #f0ece4}
.fr:last-child{border-bottom:0}
.fr.col{flex-direction:column;align-items:stretch;gap:10px}
.fr .l b{display:block;font-weight:700}
.fr .l small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.fr>.inp{max-width:300px}
.h3s{font-size:15px;font-weight:800;margin:22px 0 10px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.h3s .cnt{font-size:11.5px;font-weight:700;color:var(--muted);background:#f3f1ec;padding:2px 8px;border-radius:20px}
.api-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #f0ece4;flex-wrap:wrap}
.api-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:18px}
.api-row .l{flex:1;min-width:180px}
.api-row .l small{display:block;color:var(--muted);font-size:12.5px}
.key{display:flex;gap:6px;align-items:center;width:440px;max-width:100%}
.okb{background:var(--mint-d)!important}
.member{display:flex;align-items:center;gap:12px;padding:10px 0}
.member .avatar{width:34px;height:34px;font-size:12px}
.member .l{flex:1}.member .l small{display:block;color:var(--muted);font-size:12px}
.member select{width:160px}
.invite{display:grid;grid-template-columns:1fr 160px auto;gap:8px;margin-top:12px}
.hint{margin-top:12px;font-size:12.5px;color:var(--muted);background:#faf9f6;border-radius:12px;padding:10px 12px;line-height:1.5}
.fmt-head,.fmt-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 90px;gap:10px;align-items:center}
.fmt-head{font-size:11px;font-weight:800;color:var(--muted);padding:14px 0 8px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.06em}
.fmt-row{padding:12px 0;border-bottom:1px solid #f0ece4}
.fc{display:flex;align-items:center;gap:10px}
.fc .pf{width:30px;height:30px;border-radius:9px;font-size:11px}
.ratios{display:flex;gap:8px;align-items:center;height:38px}
.rb{display:grid;place-items:center;border-radius:5px;background:var(--peach);border:1.5px solid var(--orange);transition:.45s cubic-bezier(.4,1.5,.5,1);font-size:8px;color:var(--orange)}
.rb-vid{background:var(--lav);border-color:var(--lav-d);color:var(--lav-d)}
.ag-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ag-tabs button{padding:10px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font-weight:700;transition:.25s}
.ag-tabs button.on{background:var(--bgc);border-color:transparent;box-shadow:0 0 0 2px var(--ink);transform:translateY(-2px)}
.agpanel{display:none}
.agpanel.on{display:block;animation:rise .45s cubic-bezier(.2,.8,.2,1)}
.ag-top{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ag-top .face{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;flex:none}
.ag-top h2{font-size:21px;font-weight:800;letter-spacing:-.03em}
.ag-top p{color:var(--muted);font-size:13px;margin-top:2px}
.ag-top>div:nth-child(2){flex:1}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px;border:2px dashed #d6cfbf;border-radius:20px;text-align:center;cursor:pointer;transition:.25s;background:#fcfbf8}
.drop:hover,.drop.over{border-color:var(--orange);background:#fff6f2}
.drop.over{transform:scale(1.01)}
.drop-ic{font-size:28px;margin-bottom:4px;transition:.3s}
.drop:hover .drop-ic{transform:translateY(-4px) rotate(-6deg)}
.drop small{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.gitem{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#eee;animation:pcIn .4s cubic-bezier(.2,.8,.2,1) both}
.gitem img,.gitem video{width:100%;height:100%;object-fit:cover;display:block}
.gitem .vb{position:absolute;left:7px;bottom:7px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.9)}
.gitem .rm{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(21,20,26,.75);color:#fff;font-size:14px;line-height:1;opacity:0;transition:.2s}
.gitem:hover .rm{opacity:1}
.play-s{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.dna{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px;border-radius:16px;background:var(--lav)}
.dna b{width:100%;font-size:11.5px;color:var(--lav-d);letter-spacing:.08em;text-transform:uppercase}
.dna span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;background:#fff;padding:6px 10px;border-radius:20px}
.dna i{width:10px;height:10px;border-radius:50%}
.brand-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.logo-drop{display:flex;align-items:center;gap:16px;padding:14px;border:2px dashed #d6cfbf;border-radius:18px;cursor:pointer;transition:.2s}
.logo-drop:hover{border-color:var(--orange)}
.logo-drop small{display:block;color:var(--muted);font-size:12px}
.logo-slot{display:grid;place-items:center;overflow:hidden;font-weight:800}
.logo-slot img{max-width:80%;max-height:80%;object-fit:contain}
#logoPrev{width:64px;height:64px;border-radius:16px;background:var(--orange);color:#fff;font-size:20px;flex:none}
.logo-bgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lb{height:70px;border-radius:14px;font-size:18px;border:1px solid var(--line)}
.lb.light{background:#fff;color:var(--orange)}
.lb.dark{background:var(--ink);color:#fff}
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.swc{position:relative;width:104px;display:flex;flex-direction:column;gap:6px;animation:pcIn .35s both}
.sw-col{height:74px;border-radius:16px;border:1px solid rgba(0,0,0,.08);cursor:pointer;position:relative;overflow:hidden;transition:.2s}
.sw-col:hover{transform:translateY(-3px);box-shadow:0 10px 20px -10px rgba(0,0,0,.35)}
.sw-col input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sw-name{border:0;background:none;font-weight:700;font-size:13px;outline:0;width:100%}
.swc code{font-size:11.5px;color:var(--muted)}
.rm2{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px}
.swc.add{height:74px;border:2px dashed #d6cfbf;border-radius:16px;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:12.5px;gap:2px}
.swc.add span{font-size:20px}
.brand-post{--b1:#ff5b2e;--b2:#15141a;--b3:#ebe5ff;aspect-ratio:4/5;border-radius:22px;background:var(--b3);padding:26px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .4s;box-shadow:var(--shadow);max-width:380px}
.brand-post::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:var(--b1);right:-20%;bottom:-15%;transition:background .4s;opacity:.9}
.bp-logo{width:44px;height:44px;border-radius:12px;background:var(--b2);color:#fff;font-size:14px;position:relative}
.bp-k{margin-top:auto;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--b2);opacity:.6;position:relative}
.bp-t{font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--b2);margin:8px 0 18px;position:relative;max-width:85%}
.bp-cta{align-self:flex-start;background:var(--b2);color:#fff;padding:9px 14px;border-radius:12px;font-weight:700;font-size:13px;position:relative}
.url-row{display:flex;gap:10px;align-items:center;margin:14px 0 4px;flex-wrap:wrap}
.url-row .inp{flex:1;min-width:220px}
.an-steps{display:none;flex-direction:column;gap:10px;margin:14px 0;padding:16px;border-radius:16px;background:#faf9f6}
.an-steps.show{display:flex}
.an-step{display:flex;align-items:center;gap:10px;font-weight:600;color:#b0aa9e;transition:.3s}
.an-step.run{color:var(--ink)}
.an-step.done{color:var(--mint-d)}
.si{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;flex:none;display:grid;place-items:center;font-size:11px}
.an-step.run .si{border-color:var(--orange) transparent var(--orange) transparent;animation:spinS .8s linear infinite}
.an-step.done .si{background:var(--mint-d);border-color:var(--mint-d)}
.an-step.done .si::after{content:"✓";color:#fff}
.an-result{display:none}
.an-result.show{display:block;animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.an-meta{font-size:12.5px;font-weight:700;color:var(--mint-d);margin:14px 0 10px}
.an-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.an-box{padding:16px;border-radius:16px;background:var(--bgc)}
.an-box small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#55515c}
.an-box p{margin-top:6px;line-height:1.5;font-weight:600}
.topics{display:flex;flex-direction:column;gap:8px}
.topic{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);transition:.2s}
.topic:hover{border-color:#cfc8b8;transform:translateX(3px)}
.topic .tt{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;background:var(--butter);color:var(--butter-d);white-space:nowrap}
.topic b{flex:1;font-size:13.5px}
.addt{font-weight:800;font-size:12.5px;padding:7px 11px;border-radius:10px;background:var(--ink);color:#fff;white-space:nowrap}
.addt:disabled{background:var(--mint);color:var(--mint-d)}
.neg-group{padding:4px 0 14px;border-bottom:1px solid #f0ece4}
.neg-group .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ntag{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;border-radius:20px;background:#ffe3dd;color:#9b2a17;font-weight:700;font-size:12.5px;animation:pcIn .3s both}
.ntag button{width:18px;height:18px;border-radius:50%;background:rgba(155,42,23,.15);font-size:12px;line-height:1}
.ntag button:hover{background:#9b2a17;color:#fff}
.neg-sugg{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.sugg{padding:6px 11px;border-radius:20px;border:1px dashed #cfc8b8;font-weight:600;font-size:12.5px;color:var(--muted);transition:.2s}
.sugg:hover{border-color:#9b2a17;color:#9b2a17}

/* ===== Studio: Medium & Video-Modus ===== */
.media-card{padding:16px;margin-bottom:14px}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mc-head b{font-weight:800}
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.collapse>div{overflow:hidden;min-height:0}
.collapse.open{grid-template-rows:1fr}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border-radius:16px;border:1.5px solid var(--line);text-align:left;transition:.25s;background:#fff}
.mode:hover{border-color:#cfc8b8}
.mode .mi{font-size:20px;margin-bottom:4px;transition:.3s}
.mode small{font-size:12px;color:var(--muted);line-height:1.4}
.mode.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#faf9f6}
.mode.on .mi{transform:scale(1.15) rotate(-6deg)}
.manual-in{padding:14px 2px 2px;display:flex;flex-direction:column;gap:12px}
.lbl{display:block;font-size:12px;font-weight:800;color:#55515c;margin-bottom:6px}
.vo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prompt-help{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prompt-help button{font-weight:800;color:var(--lav-d)}
.post.vmode .media{aspect-ratio:.8}
.vid{position:absolute;inset:0;opacity:0;transition:opacity .8s;background:linear-gradient(120deg,#ffc2a8,#c9b8ff,#ff5b2e,#fff0c2);background-size:300% 300%;animation:vidmove 6s ease-in-out infinite}
.vid.show{opacity:1}
@keyframes vidmove{50%{background-position:100% 50%}}
.vid .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:20px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);animation:breathe2 2s ease-in-out infinite}
@keyframes breathe2{50%{transform:scale(1.08)}}
.vid .dur{position:absolute;right:10px;top:10px;font-size:11px;font-weight:800;background:rgba(21,20,26,.7);color:#fff;padding:3px 8px;border-radius:20px}
.vid .vtxt{position:absolute;left:14px;right:14px;bottom:26px;font-weight:800;font-size:20px;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.vid .vbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.4)}
.vid .vbar i{display:block;height:100%;width:0;background:#fff;animation:vprog 8s linear infinite}
@keyframes vprog{to{width:100%}}
.msg .gen.vgen{display:grid;place-items:center;width:150px;height:200px;background:linear-gradient(120deg,#ffc2a8,#c9b8ff,#ff5b2e,#fff0c2);background-size:300% 300%;animation:vidmove 6s infinite}
.msg .gen.vgen span{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;position:relative;z-index:1}
.scenes{margin:8px 0 0 18px;font-size:13px;line-height:1.6}

@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:1fr}.settings{grid-template-columns:1fr}.snav{position:static;flex-direction:row;overflow-x:auto}.snav-l{display:none}.snav button{white-space:nowrap}.brand-grid{grid-template-columns:1fr}.pilot-pill .t{display:none}}
@media (max-width:760px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.fmt-head{display:none}.fmt-row{grid-template-columns:1fr 1fr}.fmt-row .fc{grid-column:1/-1}.fr{flex-direction:column;align-items:stretch}.fr>.inp{max-width:none}.rng{width:100%}.an-grid,.modes,.vo-row,.invite{grid-template-columns:1fr}.key{width:100%}}

/* ===== Studio: Vorschau pro Kanal ===== */
.studio-side{display:flex;flex-direction:column;gap:14px}
.studio-side .media-card{margin:0}
.plan-card{padding:16px}
.plan-card .chips{margin:12px 0}
.plan-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#planInfo{flex:1;font-size:12.5px;color:var(--muted);font-weight:600;min-width:160px}
.pv-section{margin-top:28px}
.pv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.pv-head h2,.top-head h2{font-size:22px;font-weight:800;letter-spacing:-.03em}
.pv-head p,.top-head p{font-size:13px;margin-top:4px}
.pv-head a{color:var(--lav-d);font-weight:700;cursor:pointer}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:start}
.pv-grid .post{animation:pcIn .5s cubic-bezier(.2,.8,.2,1) both;box-shadow:var(--shadow)}
.pv-grid .post:hover{transform:translateY(-4px)}
.post .ph>div:nth-child(2){min-width:0}
.post .ph b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-pf{margin-left:auto}
.post .acts{display:flex;gap:14px;padding:10px 14px 0;font-size:17px}
.post .acts .bm{margin-left:auto}
.li-react{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;font-size:12px;color:var(--muted);border-top:1px solid #f0ece4}
.li-btns{display:flex;justify-content:space-around;padding:8px;border-top:1px solid #f0ece4;font-size:12px;font-weight:700;color:#55515c}
.x-media{margin:0 14px 10px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.post.p-tt{background:#000;border-color:#000;width:min(100%,330px);justify-self:center}
.post.p-tt .media{background:#121212}
.post.p-tt .hint{color:rgba(255,255,255,.6)}
.tt-side{position:absolute;right:10px;bottom:96px;display:flex;flex-direction:column;gap:14px;z-index:2;color:#fff;font-size:20px;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.tt-side small{display:block;font-size:10px;font-weight:700}
.tt-cap{position:absolute;left:12px;right:58px;bottom:14px;z-index:2;color:#fff;font-size:12.5px;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.post .tt-cap .txt{padding:4px 0 0;min-height:0;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .tt-cap .txt .h{color:#fff;font-weight:700}
.tt-cap .muted{color:rgba(255,255,255,.7)!important}
.tt-badge{position:absolute;top:10px;left:10px;z-index:2}
.post .media .art.show{animation:mediaIn .9s cubic-bezier(.2,.8,.2,1)}
.post .media .vid.show{animation:mediaIn .9s cubic-bezier(.2,.8,.2,1),vidmove 6s ease-in-out infinite}
@keyframes mediaIn{from{opacity:0;transform:scale(1.06)}}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
.dots i.on{background:#fff}

.studio{align-items:stretch}
.prog-card{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}
.pbar{height:6px;border-radius:6px;background:#efece5;overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--orange),var(--lav-d));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.psteps{display:flex;flex-direction:column;gap:8px}
.pstep{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);transition:.3s}
.pstep>div{flex:1}
.pstep b{display:block;font-size:13px}
.pstep small{color:var(--muted);font-size:11.5px}
.pi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none}
.ps{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:20px;background:#f3f1ec;color:var(--muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pstep.run{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,91,46,.12);transform:translateX(4px)}
.pstep.run .ps{background:var(--peach);color:var(--orange)}
.pstep.run .pi{animation:wiggle 1.2s ease-in-out infinite}
.pstep.done .ps{background:var(--mint);color:var(--mint-d)}
/* ===== Statistik: Top-Performer ===== */
.top-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:32px 0 14px;flex-wrap:wrap}
.top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.top-card{display:flex;flex-direction:column;gap:14px;animation:pcIn .5s cubic-bezier(.2,.8,.2,1) both}
.top-ch{display:flex;align-items:center;gap:8px}
.top-ch .muted{margin-left:auto;font-size:12px;font-weight:600}
.top-img{height:150px;border-radius:16px;position:relative;overflow:hidden;transition:transform .4s}
.top-card:hover .top-img{transform:scale(1.02)}
.top-img .kind{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.9)}
.crown{position:absolute;top:10px;right:10px;font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;background:var(--ink);color:#fff}
.top-t{display:block;font-size:15px;letter-spacing:-.02em;margin:12px 0 10px;line-height:1.35}
.top-m{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.top-m div{padding:8px;border-radius:12px;background:#faf9f6;transition:.25s;min-width:0}
.top-m small{display:block;font-size:10.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.top-m b{font-size:14px;font-weight:800;white-space:nowrap}
.top-m .hl{background:var(--ink);color:#fff}
.top-m .hl small{color:rgba(255,255,255,.7)}
.top-rest{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.top-row{display:flex;align-items:center;gap:10px}
.rk{font-weight:800;color:var(--muted);font-size:12px;width:22px}
.th{width:36px;height:36px;border-radius:10px;flex:none}
.tr-m{flex:1;min-width:0}
.tr-m b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar{height:5px;border-radius:5px;background:#efece5;margin-top:5px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--ink);border-radius:5px}
.top-row em{font-style:normal;font-weight:800;font-size:12.5px;white-space:nowrap}
.top-ins{font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--butter);color:#6b5208;font-weight:600}
.top-make{align-self:flex-start}
@media (max-width:1100px){.top-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.top-grid{grid-template-columns:1fr}}

@media (max-width:1100px){.belt,.board{grid-template-columns:repeat(2,1fr)}.belt svg.wire,.packet{display:none}.studio,.pilot{grid-template-columns:1fr}.ch-list{grid-template-columns:repeat(2,1fr)}.sentence{font-size:26px}}
@media (max-width:760px){
  header{padding:12px 16px;flex-wrap:wrap}.tabs{order:3;width:100%;overflow-x:auto;margin:0}.pilot-pill span.t{display:none}
  main{padding:18px 16px 100px}.hero h1{font-size:34px}.hero h1 .serif{font-size:40px}
  .belt,.board,.ch-list{grid-template-columns:1fr}.month{gap:4px}.cell{min-height:70px;padding:5px}.cell .p span.t{display:none}.sentence{font-size:21px;padding:22px}.stat-row{grid-template-columns:1fr 1fr 1fr}
  .badge-variant{display:none}.fab span.t{display:none}.fab{padding:14px}
}

/* ===== Ergänzungen der echten App ===== */
.logout{display:contents}
.logout .avatar{border:0;cursor:pointer;transition:.2s}
.logout .avatar:hover{transform:scale(1.06);box-shadow:0 0 0 3px rgba(255,91,46,.25)}
.demo-hint{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;background:var(--butter);color:var(--butter-d);white-space:nowrap}
.chat-h .demo-hint{margin-left:auto}
.ok-t{color:var(--mint-d);font-weight:700}
.err-t{color:#b4321c;font-weight:700}
.api .ok.aus{color:var(--muted)}
.leer{padding:18px 10px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5}
.eigene-idee{display:flex;gap:8px;padding:0 22px 12px}
.eigene-idee .inp{flex:1}
.key .btn{white-space:nowrap}

/* ===== Post-Editor ===== */
.editor{width:min(560px,calc(100vw - 24px));z-index:47}
#edScrim{z-index:46}
.editor .drawer-body{gap:8px;padding-top:6px}
.editor .lbl{margin:10px 0 2px}
.ed-kicker{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.ed-titel{width:100%;border:0;background:none;font:inherit;font-size:24px;font-weight:800;letter-spacing:-.035em;outline:0;padding:2px 0;color:var(--ink)}
.ed-titel:focus{box-shadow:inset 0 -2px 0 var(--orange)}
.ed-zaehler{font-size:11.5px;color:var(--muted);text-align:right}
.ed-zaehler .zu-lang{color:#b4321c;font-weight:800}
.ed-drop{padding:16px}
.ed-medien{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ed-medien:empty{display:none}
.ed-zeit{display:flex;gap:8px;align-items:center}
.ed-zeit .inp{flex:1}
.ed-hinweise{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ed-hinweis{font-size:12.5px;padding:9px 11px;border-radius:12px;background:var(--butter);color:#6b5208;font-weight:600;line-height:1.45}
.ed-ziele{display:flex;flex-direction:column;gap:8px}
.ed-ziele:empty{display:none}
.ed-ziel{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13px;animation:pcIn .4s both}
.ed-ziel>div{flex:1;min-width:0}
.ed-ziel small{display:block;color:#b4321c;font-weight:600;line-height:1.4}
.ed-ziel a{font-size:12px;font-weight:700;color:var(--sky-d)}
.ed-ziel .zs{font-weight:800;font-size:11.5px;padding:4px 10px;border-radius:20px;background:#f3f1ec;color:var(--muted);white-space:nowrap}
.ed-ziel.published .zs{background:var(--mint);color:var(--mint-d)}
.ed-ziel.failed .zs{background:#ffe3dd;color:#b4321c}
.ed-ziel.scheduled .zs{background:var(--sky);color:var(--sky-d)}
.ed-ziel.in-progress .zs,.ed-ziel.pending .zs{background:var(--peach);color:var(--orange)}
.ed-fuss{display:flex;gap:8px;align-items:center;padding:14px 22px;border-top:1px solid var(--line)}
.ed-fuss .spacer{flex:1}
.editor[data-gesperrt] .inp:disabled{opacity:.75;cursor:not-allowed}
.editor .ct:disabled{cursor:not-allowed}
.pc{cursor:pointer}
[hidden]{display:none!important}

/* ===== Studio: echte Medien ===== */
.post .media>img,.post .media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:mediaIn .9s cubic-bezier(.2,.8,.2,1)}
.msg .gen-echt{display:block;width:220px;max-height:280px;object-fit:cover;border-radius:12px;margin-top:8px;background:#eee}
.msg small.muted{font-size:11.5px}
.stimme-wahl{display:flex;gap:6px;align-items:center;width:340px;max-width:100%}
.stimme-wahl .inp{flex:1}
.stimme-wahl [data-hoerprobe].spielt{background:var(--ink);color:#fff}