/* ClipFactory Design-System (E43). Dunkel als Standard (Studio-Gefühl), hell umschaltbar. Farben je Format als Verläufe.
   Akzent seit 24.10.2026 „Glut“ (Orange) mit Türkis als Partner (Teal & Orange aus der Filmfarbkorrektur), statt Higgsfield-Lime;
   Vorschau und Begründung: docs/farbe-vorschau.html. Akzent-Farben nur über die Tokens unten (--accent*), nie als Hex im Code. Keine externen Schriften (DSGVO: kein Google-Fonts-Abruf), Systemschrift. */
:root,[data-theme="dark"]{
  --bg:#0a0a0f;--bg2:#101018;--card:#15151f;--card2:#1c1c29;--hover:#232333;--ink:#f2f2f7;--ink2:#c9c9d6;--muted:#8a8aa0;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--shadow:0 10px 40px rgba(0,0,0,.45);
  --accent:#ff6a2b;--accent-hover:#ff8450;--accent-ink:#140a05;--accent-2:#22d3ee;--accent-glow:rgba(255,106,43,.28);
  --accent-text:var(--accent);--accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);--ok:#34d399;--warn:#fbbf24;--err:#f87171;--info:#60a5fa;--gate:#c084fc;
  --g-vo:linear-gradient(135deg,#8b5cf6,#ec4899);--g-song:linear-gradient(135deg,#f97316,#facc15);--g-broll:linear-gradient(135deg,#06b6d4,#3b82f6);
  --g-podcast:linear-gradient(135deg,#4ade80,#059669);
--g-talkinghead:linear-gradient(135deg,#f472b6,#e11d48);--g-swipe:linear-gradient(135deg,#f43f5e,#fb923c);--g-iteration:linear-gradient(135deg,#6366f1,#22d3ee);
  --g-eigen:linear-gradient(135deg,#0d9488,#22d3ee);--g-mcp:linear-gradient(135deg,#d946ef,#6366f1 55%,#06b6d4);--g-accent:linear-gradient(135deg,#ff6a2b,#ffa53d);
  --mcp-soft:linear-gradient(135deg,rgba(217,70,239,.18),rgba(99,102,241,.16) 55%,rgba(6,182,212,.16));
  --r:16px;--toph:62px;--r2:12px;--side:248px;--assist:380px;color-scheme:dark}
[data-theme="light"]{--bg:#f5f5f8;--bg2:#ececf2;--card:#fff;--card2:#f6f6fa;--hover:#ececf3;--ink:#14141c;--ink2:#3a3a4a;--muted:#6c6c80;
  --line:rgba(10,10,30,.09);--line2:rgba(10,10,30,.16);--shadow:0 10px 30px rgba(20,20,60,.12);--accent:#c7400c;--accent-hover:#a63509;--accent-ink:#fff;--accent-2:#0e7490;--accent-glow:rgba(199,64,12,.22);--accent-text:#a63509;
  --g-accent:linear-gradient(135deg,#c7400c,#e0700f);--mcp-soft:linear-gradient(135deg,rgba(192,38,211,.10),rgba(79,70,229,.09) 55%,rgba(8,145,178,.09));color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}img,video{display:block}
::selection{background:var(--accent);color:var(--accent-ink)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid transparent;background-clip:content-box}

/* ---------- Shell ---------- */
#shell{display:flex;flex-direction:column;min-height:100vh}#body{display:flex;flex:1;min-height:0}
#side{position:sticky;top:var(--toph);height:calc(100vh - var(--toph));width:var(--side);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:var(--bg2);border-right:1px solid var(--line);z-index:20;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em;flex:none}
/* E93: Logo „Der Schnitt“. Wortmarke als Pfad (Buchstaben in Schriftfarbe, Doppel-L in --logo-a/--logo-b), Signet nur, wo die Wortmarke keinen Platz hat */
.logo{--logo-a:var(--accent);--logo-b:var(--accent-2);color:var(--ink)}.login-art .logo{--logo-a:#ff6a2b;--logo-b:#22d3ee;color:#fff}
.logo-txt{display:flex}.logo-txt .wm{height:25px;width:auto;display:block}
.logo-mark{display:none;width:30px;height:30px}.logo-mark svg{width:100%;height:100%;display:block}
.create-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 4px 10px;padding:11px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:700;transition:.15s}
.create-btn:hover{transform:translateY(-1px);background:var(--accent-hover);box-shadow:0 8px 24px var(--accent-glow)}
#nav{display:flex;flex-direction:column;gap:2px}
#nav .sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:14px 10px 4px}
#nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ink2);font-size:14px;position:relative}
#nav a .ic{width:20px;text-align:center;opacity:.9}#nav a:hover{background:var(--hover);color:var(--ink)}
#nav a.active{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
#nav a.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
#nav .cnt{margin-left:auto;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--gate);color:#160a24;font-weight:700}
#nav .dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--muted)}#nav .dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.wallet{display:block;padding:12px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent));border:1px solid var(--line2)}
.wallet b{font-size:18px}.wallet .small{display:block}
.me{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px;color:var(--muted)}.me .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--g-vo);color:#fff;font-weight:700;font-size:12px}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
#top{position:sticky;top:0;z-index:25;height:var(--toph);display:flex;align-items:center;gap:14px;padding:0 18px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.search{width:200px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;text-align:left}
.search kbd{margin-left:auto;font-size:11px;padding:2px 6px;border-radius:6px;border:1px solid var(--line2)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
#areas{display:flex;gap:2px;height:100%;align-items:stretch;margin-left:12px}#areas a{display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--muted);font-weight:650;border-bottom:2px solid transparent;margin-bottom:-1px}#areas a:hover{color:var(--ink)}#areas a.on{color:var(--ink);border-bottom-color:var(--accent)}#areas a .cnt{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--gate);color:#160a24;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--line2);background:var(--card);font-size:13px;font-weight:650;white-space:nowrap}.pill:hover{background:var(--hover)}.pill .c{color:var(--accent-text)}
.pill.mcp{background:linear-gradient(135deg,rgba(217,70,239,.16),rgba(99,102,241,.16));border-color:rgba(167,139,250,.4)}.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.pill .dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}
#nav .back{color:var(--muted);font-size:13px}#nav .item-sub{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap;flex:none}#nav .blogo{width:22px;height:22px;border-radius:7px;font-size:10px}#nav .tag{margin-left:auto}
#nav .hdr{padding:6px 10px 2px;display:flex;align-items:center;gap:10px}#nav .hdr b{font-size:14.5px;line-height:1.2}#nav .hdr .tiny{display:block}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--card);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--hover)}#bellDot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--gate);display:none;box-shadow:0 0 10px var(--gate)}#bellDot.on{display:block}
.assist-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;border:1px solid transparent;background:var(--g-mcp);color:#fff;font-weight:650;cursor:pointer}
.spark{display:inline-block;animation:spark 3s ease-in-out infinite}@keyframes spark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(25deg) scale(1.15)}}
main#app{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:26px 28px 40px}
.foot{padding:18px;text-align:center;font-size:12.5px;color:var(--muted)}.foot a:hover{color:var(--ink)}
.only-mobile{display:none}
body.assist-open #assist{transform:none}body.assist-open #main{margin-right:var(--assist)}
#assist{top:var(--toph)}
@media (min-width:901px){.tabs.dup{display:none}}
#assist{position:fixed;top:0;right:0;bottom:0;width:var(--assist);z-index:30;display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .22s ease;box-shadow:var(--shadow)}
.assist-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.assist-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;font-size:13.5px;line-height:1.5}.msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:4px}.msg .tools{margin-top:6px;font-size:11.5px;color:var(--muted)}
.assist-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}.assist-sugg button{font-size:12px;padding:6px 10px;border-radius:99px;border:1px solid var(--line2);background:var(--card);cursor:pointer}.assist-sugg button:hover{border-color:var(--accent)}
.assist-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}.assist-form textarea{flex:1;resize:none;min-height:44px}.assist-form .btn{align-self:stretch;width:44px;font-size:18px;padding:0}
.assist-note{padding:0 14px 12px}

/* ---------- Bausteine ---------- */
h1{font-size:28px;line-height:1.15;margin:0 0 6px;letter-spacing:-.02em}h2{font-size:19px;margin:30px 0 12px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}h3{font-size:15px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 20px;max-width:760px}
.muted{color:var(--muted)}.small{font-size:12.5px}.tiny{font-size:11.5px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.b{font-weight:700}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1}.col-flex{display:flex;flex-direction:column;gap:12px}.right{margin-left:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}.card.pad0{padding:0;overflow:hidden;overflow-x:auto}.card.soft{background:var(--card2)}
.card h3{display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.sticky{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} /* Mitdenk 22.10.: Starten bleibt auf Laptop-Höhe erreichbar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line2);background:var(--card2);padding:9px 15px;border-radius:11px;cursor:pointer;font-weight:550;transition:.12s;white-space:nowrap}
.btn:hover{background:var(--hover)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}.btn.primary:hover{background:var(--accent-hover);box-shadow:0 6px 20px var(--accent-glow)}
.btn.grad{background:var(--g-mcp);color:#fff;border-color:transparent}.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--hover)}
.btn.danger{color:var(--err)}.btn.sm{padding:6px 11px;font-size:13px;border-radius:9px}.btn.lg{padding:13px 22px;font-size:15.5px;border-radius:13px}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
label.f{display:block;margin:12px 0}label.f>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:550}
input:not([type]),input[type=text],input[type=search],input[type=password],input[type=email],input[type=number],input[type=url],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--bg2);outline:none;transition:.12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea{min-height:120px;resize:vertical;line-height:1.55}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{width:42px;height:36px;border:0;background:none;padding:0;cursor:pointer}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:650;background:var(--hover);color:var(--ink2);white-space:nowrap}
.badge.ok{background:rgba(52,211,153,.14);color:var(--ok)}.badge.warn{background:rgba(251,191,36,.14);color:var(--warn)}.badge.err{background:rgba(248,113,113,.14);color:var(--err)}
.badge.info{background:rgba(96,165,250,.14);color:var(--info)}.badge.gate{background:rgba(192,132,252,.16);color:var(--gate)}.badge.acc{background:var(--accent-soft);color:var(--accent-text)}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:12px;padding:8px 12px;cursor:pointer;background:var(--card2);transition:.12s;user-select:none}
.chip:hover{border-color:var(--muted)}.chip.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card2));box-shadow:0 0 0 1px var(--accent) inset}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:600}.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line2)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0}.tabs a{padding:10px 14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}.tabs a.on{color:var(--ink);border-color:var(--accent)}.tabs a:hover{color:var(--ink)}
details.adv{border:1px solid var(--line);border-radius:14px;background:var(--card2);margin-top:14px}details.adv>summary{cursor:pointer;padding:13px 16px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details.adv>summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:.15s}details.adv[open]>summary::after{transform:rotate(180deg)}details.adv>.in{padding:0 16px 14px}
details.adv>summary::-webkit-details-marker{display:none}
.sw{display:inline-flex;align-items:center;cursor:pointer;gap:10px}.sw input{display:none}.sw i{width:40px;height:23px;border-radius:99px;background:var(--line2);position:relative;transition:.15s;flex:none}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}.sw input:checked+i{background:var(--accent)}.sw input:checked+i::after{left:20px;background:var(--accent-ink)}
table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}
:where(div,section):has(> table){overflow-x:auto}
.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--r)}.empty .big{font-size:34px;margin-bottom:6px}
.loading{display:grid;place-items:center;padding:80px}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--card2),var(--hover),var(--card2));background-size:200% 100%;animation:sk 1.2s infinite}@keyframes sk{to{background-position:-200% 0}}
.fmt-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.gtext{background:var(--g-accent);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Startseite ---------- */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:34px;background:radial-gradient(1200px 400px at 10% -20%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),radial-gradient(900px 400px at 100% 0%,color-mix(in srgb,var(--accent-2) 24%,transparent),transparent 60%),radial-gradient(700px 300px at 60% 120%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--card);border:1px solid var(--line)}
.hero h1{font-size:38px;max-width:780px}.hero .sub{font-size:15.5px;color:var(--ink2)}
.composer{margin-top:18px;border-radius:18px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line2);padding:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.composer textarea{border:0;background:transparent;min-height:84px;font-size:15.5px;box-shadow:none;padding:8px 10px}.composer textarea:focus{box-shadow:none}
.composer .bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 4px 0}
/* E66: Kacheln haben das Format ihrer Loops (9:16), die breite Kachel = zwei 9:16-Loops nebeneinander. Nie hineinzoomen. */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tile{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:9/16;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff;isolation:isolate;border:1px solid var(--line);cursor:pointer;transition:transform .2s,box-shadow .2s}
.tile.wide{grid-column:span 2;aspect-ratio:auto}.tile.tile-vorschau{max-width:300px;width:100%;margin:0 auto}.tile.tall{grid-row:span 2;min-height:520px}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile video,.tile img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.78) 100%)}
.tile .pans{position:absolute;inset:0;z-index:-2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}.tile .pan{position:relative;overflow:hidden}.tile .pan video{z-index:0}
.tile .kicker{position:absolute;top:14px;left:14px;display:flex;gap:6px}.tile .kicker span{font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15)}
.tile .kicker span.hot{background:var(--accent);color:var(--accent-ink);border:0}
.tile p{padding-right:40px}.tile h3{font-size:21px;margin:0 0 4px;letter-spacing:-.01em}.tile p{margin:0;font-size:13px;opacity:.85;max-width:420px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tile .meta{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:10px;font-size:12px;opacity:.85;padding-right:46px}.tile .go{position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.2s}.tile:hover .go{background:var(--accent);color:var(--accent-ink)}
.tile.noimg{background:var(--tg)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}.kpi b{display:block;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kpi span{font-size:12.5px;color:var(--muted)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--kg,var(--g-accent));opacity:.18;filter:blur(6px)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,190px);gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.strip>*{scroll-snap-align:start}
.checklist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.step-c{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card2)}.step-c .n{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid var(--line2);font-weight:700;font-size:13px}
.step-c.done{opacity:.6}.step-c.done .n{background:var(--ok);color:#06210f;border:0}.step-c b{display:block;font-size:13.5px}.step-c span{font-size:12px;color:var(--muted)}
.banner{border-radius:20px;padding:24px;position:relative;overflow:hidden;color:#fff;background:var(--g-mcp);display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.banner h3{font-size:20px;margin:0 0 4px}.banner p{margin:0;opacity:.9;max-width:560px}.banner .code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:rgba(0,0,0,.35);padding:10px 12px;border-radius:10px;max-width:100%;overflow:auto;white-space:nowrap}
.banner .btn{background:#fff;color:#14141c;border:0}

/* ---------- Ad-Karten (Galerie, Board) ---------- */
.ad{position:relative;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:block;transition:.15s}
.ad:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow)}
.ad .media{position:relative;aspect-ratio:9/16;background:var(--card2);overflow:hidden}
.ad .media img,.ad .media video{width:100%;height:100%;object-fit:cover}
.ad .media .ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--tg,var(--g-vo));opacity:.85;color:#fff;font-size:30px}
.ad .top{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:6px}.ad .top .badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(0,0,0,.55);color:#fff}
.ad .top .badge.ok{color:#6ee7b7}.ad .top .badge.gate{color:#e9d5ff}.ad .top .badge.err{color:#fecaca}.ad .top .badge.info{color:#bfdbfe}
.ad .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)}.ad .bar i{display:block;height:100%;background:var(--accent)}
.ad .cap{padding:10px 12px}.ad .cap .t{font-weight:650;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad .cap .m{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.board{display:grid;grid-template-columns:repeat(6,minmax(172px,1fr));gap:10px;align-items:start;overflow-x:auto;padding-bottom:10px}
.bcol{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:10px;min-height:160px}
.bcol h4{margin:2px 4px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:8px}.bcol h4 .n{margin-left:auto;color:var(--ink2)}
.bcol.off{opacity:.55}
.bcard{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:8px;transition:.12s}.bcard:hover{border-color:var(--line2)}
.bcard .th{width:46px;height:82px;border-radius:8px;overflow:hidden;flex:none;background:var(--tg,var(--g-vo))}.bcard .th img{width:100%;height:100%;object-fit:cover}
.bcard .t{font-weight:600;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bcard .m{font-size:11.5px;color:var(--muted);margin-top:3px}
.prog{height:5px;background:var(--line2);border-radius:3px;overflow:hidden;margin-top:6px}.prog i{display:block;height:100%;background:var(--g-accent)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.filters select,.filters input{width:auto;min-width:150px;padding:8px 10px}

/* ---------- Studio (Erstellen) ---------- */
.fmt-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;margin-bottom:18px}
.fmt{position:relative;border-radius:14px;overflow:hidden;height:92px;cursor:pointer;border:2px solid var(--line);background:var(--card2);color:var(--ink);isolation:isolate;padding:7px 10px 7px 7px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:10px;transition:.15s}
.fmt>b{grid-column:2;grid-row:2}.fmt>small{grid-column:2;grid-row:3}
.fmt video,.fmt img{grid-row:1/-1;grid-column:1;height:100%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:9px;background:var(--tg)}
.fmt.noimg{background:var(--tg);color:#fff;border-color:transparent;grid-template-columns:minmax(0,1fr);padding:10px 12px}.fmt.noimg>b,.fmt.noimg>small{grid-column:1}.fmt b{font-size:13.5px;line-height:1.2}.fmt small{font-size:11px;opacity:.8}.fmt.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.fmt.add{background:var(--card2);color:var(--ink);border:2px dashed var(--line2);align-items:center;justify-content:center;text-align:center}.fmt.add::before{display:none}
.step-h{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-weight:700;font-size:15px}.step-h .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--card2);border:1px solid var(--line2);font-size:12px}
.step-h.ok .n{background:var(--accent);color:var(--accent-ink);border:0}
.script-box{position:relative}.script-box textarea{min-height:220px;font-size:15px;padding:14px 16px;border-radius:14px}
.script-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.brands-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.bpick{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;transition:.12s}.bpick:hover{border-color:var(--muted)}.bpick.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.blogo{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;font-weight:800;color:#fff;overflow:hidden;background:var(--bc,var(--g-vo))}.blogo img{width:100%;height:100%;object-fit:contain}
.blogo.lg{width:72px;height:72px;border-radius:18px;font-size:26px;box-shadow:var(--shadow)}
.ppick{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;border:1px solid var(--line2);background:var(--card2);cursor:pointer}.ppick img,.ppick .noi{width:34px;height:34px;border-radius:8px;object-fit:contain;background:var(--hover);display:grid;place-items:center}
.ppick.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.sty{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;cursor:pointer;border:2px solid transparent;color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 9px;transition:.12s}
.sty video,.sty img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.sty::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8))}
.sty.noimg{background:var(--tg)}.sty small{display:none}.sty.noimg small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sty b{font-size:12.5px;line-height:1.2}.sty small{font-size:10.5px;opacity:.8;line-height:1.25}.sty.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.sty .star{position:absolute;top:6px;right:6px;font-size:10px;padding:2px 6px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-weight:800}
.summary .head{height:120px;position:relative;overflow:hidden;border-radius:14px;margin:-4px -4px 14px;isolation:isolate;display:flex;align-items:center;gap:12px;padding:8px;color:#fff}
.summary .head video,.summary .head img{height:100%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;flex:none}
.price{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}.price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.lines{margin:12px 0;display:flex;flex-direction:column;gap:2px}.line{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}.line:last-child{border:0}.line .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.need{display:flex;flex-direction:column;gap:6px;margin:10px 0}.need div{display:flex;gap:8px;align-items:center;font-size:13px}.need .ok{color:var(--ok)}.need .no{color:var(--muted)}
.need .no[data-goto]{color:var(--warn);cursor:pointer}.need .no[data-goto]:hover{text-decoration:underline}.warnc{color:var(--warn)}
.fehlt{outline:2px solid var(--warn);outline-offset:3px;border-radius:12px;animation:fehltPuls .8s ease-in-out 2}@keyframes fehltPuls{50%{outline-color:transparent}}
.models{display:flex;flex-direction:column;gap:6px}.mrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;background:var(--card2);font-size:13px}.mrow .ic{width:22px;text-align:center}.mrow .v{margin-left:auto;font-size:12px;color:var(--muted);text-align:right}

/* Swipe */
.drop{border:2px dashed var(--line2);border-radius:18px;padding:28px;text-align:center;background:var(--card2);transition:.15s;cursor:pointer}.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card2))}
.drop .big{font-size:34px}
.levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.lvl{padding:12px;border-radius:14px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;transition:.12s}
.lvl b{display:block;font-size:14px}.lvl .pc{font-size:22px;font-weight:800;letter-spacing:-.02em}.lvl small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35}.lvl.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card2))}
.meter{height:12px;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#a3e635,#facc15,#fb923c,#f43f5e);position:relative;margin:18px 4px 6px}.meter i{position:absolute;top:-6px;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--bg);transform:translateX(-50%);box-shadow:var(--shadow)}
.takes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.takes>div{padding:12px;border-radius:12px;background:var(--card2);font-size:12.5px}.takes b{display:block;margin-bottom:4px}

/* Auftrag */
.job-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:18px 0}
.ph{padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}.ph b{display:block;font-size:13.5px}.ph span{font-size:11.5px;color:var(--muted)}
.ph .ico{font-size:18px;margin-bottom:4px;display:block}.ph.done{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.ph.done .ico::after{content:" ✓";color:var(--ok);font-size:13px}
.ph.run{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.ph.run::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:var(--g-accent);animation:slide 1.4s infinite}
.ph.wait{border-color:var(--gate);box-shadow:0 0 0 1px var(--gate) inset}.ph.fail{border-color:var(--err)}
@keyframes slide{0%{left:-40%}100%{left:100%}}
.gatebar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px;border-radius:18px;background:linear-gradient(135deg,rgba(192,132,252,.18),rgba(99,102,241,.12));border:1px solid color-mix(in srgb,var(--gate) 45%,transparent);margin:16px 0}
.gatebar .ic{font-size:28px}
.player{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:22px;align-items:start}
video.big{width:100%;aspect-ratio:9/16;background:#000;border-radius:18px;box-shadow:var(--shadow)}
.story{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.frame{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}.frame img,.frame video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--card2)}
.frame .cap{padding:8px 10px;font-size:12.5px}.frame .cap b{display:flex;gap:6px;align-items:center;color:var(--muted);font-weight:650;font-size:11px;margin-bottom:3px}.frame .idea{color:var(--muted);font-size:11.5px;margin-top:4px}
.frame .ph2{aspect-ratio:9/16;display:grid;place-items:center;color:var(--muted);font-size:12px;background:var(--card2)}
.events{max-height:420px;overflow:auto;background:#07070b;color:#d4d4e0;border-radius:14px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.6;border:1px solid var(--line)}
.events .e-error{color:#ff8a8a}.events .e-warn{color:#ffd37a}.events .e-step{color:#9fd3ff}.events .e-gate{color:#d2b4ff}.events .ts{color:#666;margin-right:8px}
/* Cut-Review überall (25.10.2026, web/cutreview.js): dunkle Vorlage im Shadow-DOM, Leiste mit Hook-Umschalter und MP4 */
.cr-block{margin:4px 0 18px;background:#0e0f13;border:1px solid var(--line);border-radius:16px;padding:10px 16px 4px;color:#f2f3f5}.cr-leiste{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0 6px}.cr-leiste b{color:#f2f3f5}.cr-solo video{width:100%;max-height:70vh;background:#000;border-radius:10px;display:block}.cr-unten{margin-top:4px}
@media (max-width:600px){.cr-block{margin:4px -16px 18px;border-radius:0;border-left:0;border-right:0;padding:8px 12px 4px}}
.gateframe{width:100%;height:78vh;border:1px solid var(--line);border-radius:14px;background:#fff;display:block} /* Mitdenk 22.10.: Höhe setzt rahmenVoll() auf den Inhalt */
.steps{display:flex;flex-wrap:wrap;gap:6px}.stp{padding:4px 10px;border-radius:8px;font-size:12px;background:var(--card2);color:var(--muted)}.stp.done{color:var(--ok)}.stp.running{color:var(--info);animation:pulse 1.4s infinite}.stp.failed{color:var(--err)}
.frage{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.35);border-radius:12px;padding:11px 14px;margin:8px 0;font-size:13.5px}
.frage.err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35)}

/* Brands */
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.bc{border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:.15s;display:block}.bc:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.bc .cover{height:120px;background:var(--bc,var(--g-vo));position:relative}.bc .cover .clip{position:absolute;inset:0;overflow:hidden;border-radius:18px 18px 0 0}.bc .cover img.pimg{position:absolute;right:12px;bottom:-10px;height:120px;width:auto;border-radius:12px;transform:rotate(6deg);box-shadow:var(--shadow)}
.bc .cover .blogo{position:absolute;left:16px;bottom:-22px;width:56px;height:56px;border-radius:16px;border:3px solid var(--card);font-size:20px}
.bc .body{padding:30px 16px 16px}.bc .body b{font-size:16px}
.brand-hero{border-radius:22px;padding:26px;display:flex;gap:20px;align-items:center;color:#fff;background:var(--bc,var(--g-vo));position:relative;overflow:hidden}
.brand-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 90% 0,rgba(255,255,255,.25),transparent)}
.brand-hero h1{color:#fff}.brand-hero .btn{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.25)}
.refs{display:flex;flex-wrap:wrap;gap:10px}.ref{width:104px}.ref img{width:104px;height:104px;object-fit:contain;background:var(--card2);border-radius:12px;border:1px solid var(--line)}.ref .v{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between}
.ref .add{width:104px;height:104px;border:1.5px dashed var(--line2);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;cursor:pointer}

/* Modelle, Preise */
.mcard{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;position:relative}
.mcard .pr{font-size:22px;font-weight:800;letter-spacing:-.02em}.mcard .pr small{font-size:12px;color:var(--muted);font-weight:600}
.mcard.rec{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.mcard .rb{position:absolute;top:12px;right:12px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.plan{padding:20px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.plan.hot{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 20px 50px color-mix(in srgb,var(--accent) 8%,transparent)}.plan .badge{align-self:flex-start}.plan .p{font-size:30px;font-weight:800;letter-spacing:-.03em}.plan ul{margin:6px 0;padding-left:18px;color:var(--ink2);font-size:13px;line-height:1.7}
.bars{display:flex;flex-direction:column;gap:8px}.barrow{display:grid;grid-template-columns:130px 1fr 80px;gap:10px;align-items:center;font-size:13px}.barrow .tr{height:10px;border-radius:99px;background:var(--card2);overflow:hidden}.barrow .tr i{display:block;height:100%;border-radius:99px;background:var(--g-accent)}

/* KI verbinden */
.clients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.client{padding:14px;border-radius:14px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;text-align:center}.client.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.client .lg{font-size:26px;height:34px;display:grid;place-items:center;margin-bottom:6px;color:var(--ink)}
pre.code{background:#07070b;color:#e5e7eb;padding:14px;border-radius:12px;overflow:auto;font-size:12.5px;border:1px solid var(--line);white-space:pre-wrap;word-break:break-all;position:relative}
.copy{position:absolute;top:8px;right:8px}
.prompts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pr-c{padding:14px;border-radius:14px;background:var(--card2);border:1px solid var(--line);font-size:13px;cursor:pointer}.pr-c:hover{border-color:var(--accent)}

/* Palette, Modal, Toast, Pop */
.modal-bg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}.modal-bg.on{display:flex}
.palette,.modal{width:min(640px,100%);background:var(--bg2);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.modal{padding:22px;max-height:80vh;overflow:auto}
.palette input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 18px;font-size:16px;background:transparent}.palette input:focus{box-shadow:none}
#palList{max-height:50vh;overflow:auto;padding:6px}.pal-i{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;cursor:pointer}.pal-i.on,.pal-i:hover{background:var(--hover)}.pal-i .k{margin-left:auto;font-size:11px;color:var(--muted)}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:60}#toast div{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow);font-weight:550}#toast div.err{background:var(--err);color:#fff}
.bell-wrap{position:relative}.pop{display:none;position:absolute;right:0;top:46px;width:340px;max-height:60vh;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);padding:8px}.pop.on{display:block}
.pop a{display:flex;gap:10px;padding:10px;border-radius:10px;font-size:13px}.pop a:hover{background:var(--hover)}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}.login-art{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;padding:40px;color:#fff}
.login-art .grid4{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);align-content:start;gap:6px;padding:6px;z-index:-2}.login-art .grid4 video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
.login-art::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,15,0) 45%,rgba(10,10,15,.9))}
.login-box{display:grid;place-items:center;padding:30px}.login-box .card{width:min(400px,100%);padding:28px}
body.bare #side,body.bare #top,body.bare .foot{display:none}body.bare main#app{padding:0;max-width:none}

@media (max-width:1280px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr)}.sticky{position:static;max-height:none;overflow:visible}.plans,.clients{grid-template-columns:repeat(2,minmax(0,1fr))}body.assist-open #main{margin-right:0}}
/* Obere Leiste: volle Fassung braucht ~1580 px, darunter stufenweise kompakter (unter 900 übernimmt die mobile Leiste) */
@media (max-width:1600px){.search .lbl,.search kbd{display:none}.search{width:auto}.pill.mcp{font-size:0;gap:0;padding:0 12px}.pill.mcp .dot{width:10px;height:10px}}
@media (min-width:901px) and (max-width:1360px){#top{gap:10px}#areas{margin-left:4px}#areas a{padding:0 9px}.top-right{gap:6px}.assist-btn{width:38px;height:38px;padding:0;justify-content:center}.assist-btn .lbl{display:none}#wallet .lbl{display:none}}
@media (min-width:901px) and (max-width:1140px){#areas a{padding:0 7px}#areas a:not(.mcp-nav)>span:first-child{display:none}.logo-txt{display:none}.logo-mark{display:block}}
@media (max-width:900px){#top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}.tabs{overflow-x:auto;white-space:nowrap}#areas{position:fixed;left:0;right:0;bottom:0;top:auto;height:58px;margin:0;background:var(--bg2);border-top:1px solid var(--line);justify-content:space-around;z-index:26}#areas a{flex-direction:column;justify-content:center;gap:2px;font-size:11px;padding:0 6px;border-bottom:0;border-top:2px solid transparent}#areas a.on{border-top-color:var(--accent)}main#app{padding-bottom:80px}#wallet,#setBtn,#themeBtn{display:none}.assist-btn .lbl{display:none}#side{top:var(--toph);height:calc(100vh - var(--toph))}.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis,.checklist,.g3,.g4,.prompts{grid-template-columns:repeat(2,minmax(0,1fr))}.g2,.player{grid-template-columns:1fr}.phases{grid-template-columns:repeat(2,minmax(0,1fr))}.levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  #side{position:fixed;left:0;transform:translateX(-100%);transition:.2s;box-shadow:var(--shadow)}body.side-open #side{transform:none}.only-mobile{display:grid}.search kbd{display:none}.login-wrap{grid-template-columns:1fr}.login-art{display:none}
  main#app{padding:18px 16px 30px}#top{padding:10px 16px}.hero{padding:22px}.hero h1{font-size:28px}:root{--assist:100vw}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile.wide{aspect-ratio:9/8}.tile{padding:12px;border-radius:16px}.tile h3{font-size:16px}.tile p{-webkit-line-clamp:3;font-size:12px;padding-right:0}.tile .meta,.tile .kicker span+span{display:none}.tile .go{width:30px;height:30px;right:10px;bottom:10px}.kpis,.checklist,.g3,.g4,.plans,.clients,.prompts{grid-template-columns:1fr}.assist-btn span+*{display:none}.search{width:38px;height:38px;padding:0;justify-content:center;color:var(--ink)}.search>span:first-child{font-size:22px;line-height:1}}
.icon-btn.on{border-color:var(--accent);color:var(--accent-text)}
/* ---------- Bibliothek (E53) ---------- */
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.libc{border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}.libc.gesperrt{opacity:.7}
.libc .lm{position:relative;aspect-ratio:9/16;background:var(--card2)}.libc .lm{background:#000}.libc .lm video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.libc .lid{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff}
.libc .lfav{position:absolute;top:6px;right:6px;font-size:14px;color:var(--warn);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.libc .lb{padding:10px}
@media (max-width:900px){.libgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- Pakete (E56) ---------- */
.ad .top .selbox{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.4);color:transparent;font-size:13px;cursor:pointer}
.ad .top .selbox.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}

/* E66: Videos mit unbekanntem Format (Referenz-Video einer Vorlage) ganz zeigen statt beschneiden */
video.fremd{object-fit:contain !important;background:#000}
/* E67 Bild-Swipe: Vorlagen-Bibliothek, Ergebnis-Galerie (Bilder immer ganz, contain, Regel E66) */
.svl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.svt{position:relative;border:2px solid var(--line);border-radius:14px;background:var(--card2);padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:.15s}
.svt:hover{border-color:var(--muted)}
.svt .svimg{aspect-ratio:4/5;border-radius:9px;background:var(--card);overflow:hidden;display:flex;align-items:center;justify-content:center}
.svt .svimg img{width:100%;height:100%;object-fit:contain}
.svt b{font-size:13px;line-height:1.2}.svt small{font-size:11px;color:var(--muted);line-height:1.3}
.svt .badge{position:absolute;top:13px;right:13px}
.svt.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.svl.paare{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.svl.paare .svt>.badge{display:none} /* Format steht in der Beschriftung, das Badge verdeckte den Nachbau */
.svt .svimg.paar{aspect-ratio:8/5;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4px;background:none}
.svt .svimg.paar figure{margin:0;position:relative;min-width:0;min-height:0;height:100%;border-radius:9px;overflow:hidden;background:var(--card);display:flex;align-items:center;justify-content:center}
.svt .svimg.paar img{max-width:100%;max-height:100%}
.svt .svimg.paar figcaption{position:absolute;left:5px;bottom:5px;font-size:10px;font-weight:600;padding:2px 6px;border-radius:99px;background:rgba(11,11,16,.72);color:#fff}
.svt .svimg.paar figure+figure figcaption{background:var(--accent);color:var(--accent-ink)}
.sgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sbild img{width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:8px;display:block;background:var(--card2)}
.sbild.von{border-style:dashed}
.sgrid{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:18px;margin-top:16px;align-items:start}
@media (max-width:720px){.sgrid{grid-template-columns:1fr}.sgrid>div:first-child{max-width:260px}}
@media (max-width:560px){.svl{grid-template-columns:repeat(2,minmax(0,1fr))}.svl.paare{grid-template-columns:1fr}.sgal{grid-template-columns:1fr}}
/* E69 (14.10.2026): Brands & Produkte auf einer Seite, Produkte als kleine Karten in der Brand-Karte; eingerückte Produkte im Menü */
#nav a.ind{padding-left:28px;font-size:13px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.bc>.cover{display:block}
.pmini{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
.pm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-size:11.5px;text-align:center;color:var(--ink);transition:.15s;min-width:0}
.pm:hover{border-color:var(--accent)}
.pm img{height:52px;width:100%;object-fit:contain}
.pm .noi{height:52px;display:grid;place-items:center;font-size:20px;color:var(--ink2)}
.pm span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm.add{border-style:dashed;color:var(--ink2)}
/* E69: Kachel-Text passt sich der Kachelbreite an (Container-Query): kleine Kachel = kleinere Schrift, Beschreibung kürzer bzw. weg */
.tile{container-type:inline-size}
.tile h3{font-size:clamp(14px,9.5cqi,21px)}
.tile p{-webkit-line-clamp:2;font-size:clamp(11px,5.6cqi,13px)}
@container (max-width:230px){.tile p{-webkit-line-clamp:2}.tile .kicker span+span{display:none}}
@container (max-width:170px){.tile p{display:none}.tile .meta{font-size:11px;margin-top:4px}}
.tile h3{padding-right:42px;overflow-wrap:anywhere}
.sty .star.neu{background:linear-gradient(135deg,#ff3d81,#ff8a3d);color:#fff;letter-spacing:.02em;box-shadow:0 0 0 2px rgba(255,61,129,.25)}
/* E69: Studio-Schritt „Ausgabe“ (Seitenformat, Video-Modell, Prozess) */
.card.aus{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.aus-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin-bottom:8px;display:flex;gap:10px;align-items:baseline}
.seiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.seite{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font:inherit}
.seite i{grid-row:1/3;width:auto;height:34px;max-width:34px;justify-self:center;border-radius:4px;border:2px solid currentColor;opacity:.7}
.seite b{font-size:14px}.seite small{font-size:11px;color:var(--ink2)}
.seite.sel,.mod.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.mod{display:flex;flex-wrap:wrap;align-items:center;gap:6px;text-align:left;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font:inherit}
.mod b{font-size:14px}.mod small{flex-basis:100%;font-size:11.5px;color:var(--ink2);line-height:1.3}
.mod.add{border-style:dashed;color:var(--ink2)}
.fassungen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.fassungen .small{margin-right:4px}

/* ---------- E71 (Joel 14.10.2026): Sichtbar, dass etwas entsteht. Platzhalter steht schon dort, wo das Ergebnis hinkommt, mit
   wanderndem Schimmer + Ring. .gen = leerer Platzhalter, .gen-over = Schicht über einem Bild, das gerade weiterverarbeitet wird. ---------- */
.gen{position:relative;overflow:hidden;background:var(--card2);display:grid;place-items:center;color:var(--ink2);font-size:12px;text-align:center;border-radius:inherit}
.gen::before,.gen-over::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--accent) 16%,transparent) 44%,color-mix(in srgb,#fff 22%,transparent) 50%,color-mix(in srgb,var(--accent) 16%,transparent) 56%,transparent 70%);background-size:260% 100%;animation:genmove 1.7s linear infinite;pointer-events:none}
.gen::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%);animation:pulse 2.2s ease-in-out infinite;pointer-events:none}
@keyframes genmove{from{background-position:130% 0}to{background-position:-130% 0}}
.gen>span,.gen-over>span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;font-weight:600}
.gen .sp,.gen-over .sp{width:22px;height:22px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--ink) 18%,transparent);border-top-color:var(--accent);animation:spin .9s linear infinite;flex:none}
.gen-over{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;font-size:12px;text-align:center;background:rgba(10,10,15,.45);overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.gen-over .sp{border-color:rgba(255,255,255,.3);border-top-color:var(--accent)}
.gen-line{height:12px;border-radius:6px;margin:8px 0;position:relative;overflow:hidden;background:var(--card2)}.gen-line::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--accent) 20%,transparent) 50%,transparent 70%);background-size:260% 100%;animation:genmove 1.7s linear infinite}
.ad.running .media::after,.frame.running::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);background-size:260% 100%;animation:genmove 2s linear infinite;pointer-events:none}
.frame{position:relative}
@media (prefers-reduced-motion:reduce){.gen::before,.gen::after,.gen-over::before,.gen-line::before,.ad.running .media::after,.frame.running::after{animation-duration:6s}}

/* ---------- E71: Produkt-Ansichten als Kacheln (Ansicht wählen = Kachel anklicken) ---------- */
.pslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.pslot{position:relative;border:1.5px dashed var(--line2);border-radius:14px;background:var(--card);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.15s}
.pslot:hover{border-color:var(--accent);background:var(--hover)}.pslot.full{border-style:solid;border-color:var(--line2);cursor:default}
.pslot .pic{aspect-ratio:1;display:grid;place-items:center;background:var(--card2);position:relative}.pslot .pic img{width:100%;height:100%;object-fit:contain}
.pslot .pic .plus{font-size:26px;opacity:.55;line-height:1}.pslot:hover .pic .plus{opacity:1;color:var(--accent-text)}
.pslot .lbl{padding:7px 9px;font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:6px}.pslot .lbl .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pslot .sub{padding:0 9px 8px;font-size:11px;color:var(--muted);line-height:1.35}
.pslot .x{position:absolute;top:6px;right:6px;z-index:3;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px}
.pslot .tag{position:absolute;top:6px;left:6px;z-index:3}.pslot .cnt{position:absolute;bottom:6px;right:6px;z-index:3}
.pslot.empfohlen{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.pslot.empfohlen .lbl::after{content:"empfohlen";margin-left:auto;font-size:10px;font-weight:700;color:var(--accent-text)}
.pslot.drop{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.pslot .act{display:flex;gap:6px;padding:0 8px 8px;flex-wrap:wrap}.pslot .act .btn{flex:1;justify-content:center;padding:5px 6px;font-size:11.5px}
/* Zwei-Schritt-Anlage (Brand → Produkt) */
.wsteps{display:flex;align-items:center;gap:10px;margin:0 0 18px}.wsteps .ws{display:flex;align-items:center;gap:8px;font-weight:650;color:var(--muted)}
.wsteps .ws .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:var(--card2);font-size:12px}
.wsteps .ws.on{color:var(--ink)}.wsteps .ws.on .n{background:var(--accent);color:var(--accent-ink);border:0}.wsteps .ws.ok .n{background:var(--ok);color:#0b0b10;border:0}
.wsteps .ln{flex:1;height:2px;background:var(--line2);border-radius:2px}
.pfokus{border:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--line2));background:color-mix(in srgb,var(--accent) 6%,var(--card));border-radius:16px;padding:16px}
.spi{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:7px;flex:none}
.modal .pslots{grid-template-columns:repeat(4,minmax(0,1fr))}.pslot .lbl .grow{white-space:normal;line-height:1.25}
@media (max-width:560px){.modal .pslots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pslots{align-items:start}

/* E72: Studio-Schritt „Sprecher“ (Podcast, Talking Head) */
.sp-filter{gap:6px;flex-wrap:wrap;align-items:center}
.sp-filter .chip{padding:5px 10px;font-size:12px}
.sp-sep{width:1px;height:18px;background:var(--line2);margin:0 4px}
.sp-plaetze{display:flex;gap:10px;flex-wrap:wrap}
.sp-platz{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:99px;border:2px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font:inherit;text-align:left}
.sp-platz .noi,.sp-platz-kopf{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hover) center 30%/220% no-repeat;flex:none}
.sp-platz.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
/* Galerie 25.10.2026: eine Karte je Situation, Personen als Köpfe-Reihe, Wechsel beim Darüberfahren */
.sp-wege{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sp-auto{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px dashed var(--line2);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.sp-auto-ic{font-size:20px}
.spg-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.spg-karte{display:flex;flex-direction:column;gap:6px;padding:6px 6px 10px;border-radius:16px;border:2px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font:inherit;text-align:left;min-width:0}
.spg-karte:hover{border-color:var(--muted)}.spg-karte.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.spg-karte b{font-size:13.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spg-karte small{font-size:11.5px;color:var(--ink2);padding:0 4px}
.spg-bild{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000}
.spg-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.spg-bild img.on{opacity:1}
.spg-badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.spg-koepfe{position:absolute;left:8px;bottom:8px;display:flex}
.spg-kopf{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#222 center 30%/220% no-repeat;margin-right:-10px;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .2s}
.spg-kopf.on,.spg-kopf:hover{transform:translateY(-3px) scale(1.08);z-index:1}
.sp-vorschlag{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.spg-detail{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:6px 18px;align-items:start}
.spg-gross{position:relative;grid-row:span 2}
.spg-gross img,.spg-gross video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#000;display:block}
.spg-info{min-width:0}
.sp-regel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.sp-regel span{padding:3px 9px;border-radius:99px;background:var(--hover);color:var(--ink2)}
.spg-varianten{display:flex;gap:10px;flex-wrap:wrap}
.spg-var{padding:3px;border-radius:50%;border:2px solid var(--line);background:none;cursor:pointer}
.spg-var.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.spg-var-kopf{display:block;width:52px;height:52px;border-radius:50%;background:#222 center 30%/220% no-repeat}
.sp-anpassen{min-width:0}.sp-aendern{gap:6px}.sp-aendern .chip{padding:7px 11px;font-size:13px;gap:6px}
.sp-anpassen textarea{min-height:52px;resize:vertical}
.sp-gratis{color:var(--ok,#1a7f37);font-weight:600}
@media (max-width:700px){.spg-galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spg-detail{grid-template-columns:120px 1fr}.spg-gross{grid-row:auto}.spg-detail .sp-anpassen{grid-column:1/-1}.spg-var-kopf{width:40px;height:40px}.spg-varianten{gap:6px}.spg-kopf{width:28px;height:28px}.spg-info .btn{padding:5px 9px}.sp-anpassen .aus-h{flex-wrap:wrap;gap:2px 10px}}
.sp-eigen{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:18px;align-items:start}
.sp-drop{aspect-ratio:9/16;display:grid;place-items:center;text-align:center;overflow:hidden;padding:12px}
.sp-drop img{width:100%;height:100%;object-fit:contain}
.sp-vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:14px}
.sp-vergleich figure{margin:0}.sp-vergleich img{width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:12px;background:#000}
.sp-vergleich figcaption{font-size:12px;color:var(--ink2);margin-top:4px}
@media (max-width:700px){.sp-eigen{grid-template-columns:1fr}}
.sp-wer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.sp-wer-p{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;background:var(--card2);border:1px solid var(--line)}
.sp-wer-p img{width:24px;height:24px;border-radius:50%;object-fit:cover}
/* SEL-Trial: Personen-Bild aus Szenen-Foto + Wunsch-Person */
.fb-zeile{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fb-person{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:8px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
.fb-bild{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:96px;text-align:center}
.fb-bild img{width:54px;height:72px;border-radius:10px;object-fit:cover;flex:none}
.fb-plus{color:var(--muted);font-weight:600;margin-top:28px}
.fb-hinweis{flex-basis:100%}
.sp-szene .sp-eigen{grid-template-columns:minmax(0,150px) 1fr}
.sp-szene .sp-drop{max-width:150px;aspect-ratio:3/4}
@media (max-width:700px){.sp-szene .sp-eigen{grid-template-columns:110px 1fr}.sp-szene .sp-drop{max-width:110px}}
/* E76: „Läuft gerade“ oben im Auftrag */
.jobnow{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;margin:14px 0 4px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.jobnow .spi{margin-top:3px;color:var(--accent-text)}
.jobnow b{display:block}
/* E77: Stimme mit Kommentar am Storyboard */
.gate-audio{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.gate-audio input{width:100%}
/* E78: Löschen auf Auftragskarten */
.jdel{margin-left:auto;cursor:pointer;font-size:12px;line-height:1;padding:4px 6px;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .15s}
.ad:hover .jdel,.bcard:hover .jdel,.jdel:focus{opacity:1}
.jdel:hover{background:var(--err,#dc2626)}
.bcard{position:relative}.bcard .jdel{position:absolute;top:6px;right:6px}
@media (hover:none){.jdel{opacity:1}}

/* ---------- E79 (Joel 15.10.2026): Karten sind überall gleich groß. Mehr oder weniger Inhalt ändert nie die Kartengröße;
   kurzer Text wird mit Platz aufgefüllt, langer Text wird gekürzt (Titel, Meta-Zeilen) oder scrollt IN der Karte
   (Board-Spalte, Storyboard-Text, Produkte an der Brand). Neue Karten-Sammlungen hier eintragen, nicht einzeln fixen. ---------- */
.gallery,.bcards,.pcards,.libgrid,.svl,.sgal,.story,.styles,.mods,.seiten,.pslots,.plans,.clients,.prompts,.kpis,.checklist,
.levels,.phases,.brands-pick,.takes,.karten,.grid:has(>.mcard),.grid:has(>.plan),.grid:has(>.lvl){grid-auto-rows:1fr;align-items:stretch}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,200px));gap:12px}
.scroll-in,.bcol,.frame .cap,.bc .pmini,.libc .lb{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}

/* Board: alle Spalten gleich hoch (höchste Spalte, gedeckelt), Kopf immer zwei Zeilen hoch, jede Karte gleich hoch; volle Spalte scrollt */
.board{align-items:stretch}
.bcol{display:flex;flex-direction:column;max-height:calc(100vh - 250px);min-height:200px;overflow-y:auto;overscroll-behavior:contain}
.bcol h4{flex:none;height:34px;margin:0 0 8px;padding:0 4px;position:sticky;top:-10px;z-index:1;background:var(--bg2);box-shadow:0 -10px 0 var(--bg2)}
.bcol h4 .bn{min-width:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcol h4 .sw,.bcol h4 .n{flex:none}
.bcol .bcard{flex:none;height:100px;overflow:hidden}
.bcard .t{min-height:0}
.bcard .m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Video-Karte (Galerie, Zuletzt, Iteration): Bild 9:16, Unterzeile fest zwei Titelzeilen + eine Meta-Zeile */
.ad{display:flex;flex-direction:column}
.ad .media{flex:none}
.ad .cap{flex:1;height:84px;min-height:84px;overflow:hidden}
.ad .cap .t{min-height:calc(2em * 1.3)}
.ad .cap .m{flex-wrap:nowrap;white-space:nowrap;min-width:0}
.ad .cap .m .ell{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ad .cap .m .fmt-dot{flex:none}

/* Storyboard-Frames: Text unter dem Bild hat feste Höhe, mehr Text scrollt im Frame */
.story .frame,.strip .frame{display:flex;flex-direction:column}
.frame .cap{height:132px;overflow-y:auto;flex:none}

/* Brand- und Produkt-Karten: gleiche Höhe, Zielgruppe max. 2 Zeilen, viele Produkte scrollen in der Karte, Fußzeile unten */
.bc{display:flex;flex-direction:column}
.bc .body{flex:1;display:flex;flex-direction:column;min-height:0}
.bc .body>.small.muted:not(.row){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc .body>.row:last-child{margin-top:auto !important;padding-top:10px}
.bc .pmini{max-height:196px;overflow-y:auto}
.bc .body b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Bibliothek, Bild-Vorlagen, Bild-Ergebnisse, Modelle, Pakete-Preise: Inhalt füllt die Karte, Knöpfe sitzen unten */
.libc .lb{flex:1;max-height:120px;overflow-y:auto}
.svt small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sbild{display:flex;flex-direction:column}
.sbild>.row:last-child{margin-top:auto !important;padding-top:8px}
.plan .btn:last-child,.mcard .btn:last-child{margin-top:auto}
.pslot .act{margin-top:auto}
/* E81 (Bau-Auftrag 09): Cut und Create als zwei gleich große Hauptkacheln; jede zeigt zwei 9:16-Loops nebeneinander (nie gezoomt). */
.haupt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.haupt .tile.wide{grid-column:auto;aspect-ratio:18/16}
.haupt .tile h3{font-size:clamp(20px,6cqi,30px)}.haupt .tile p{-webkit-line-clamp:3;font-size:clamp(12px,3cqi,15px)}
.create-row{margin-top:14px}.create-row[hidden]{display:none}
@media (max-width:560px){.haupt{grid-template-columns:minmax(0,1fr)}}
.flash{animation:flash 1.6s ease 2}@keyframes flash{50%{box-shadow:0 0 0 3px var(--accent)}}
/* E80: Stimme + Hauptkommentar unter dem Storyboard */
.card.gk{margin-top:14px}
.gk-kom{width:100%;margin-top:10px}
.btn.ghost{background:transparent}
.fcard .row select{flex:1;min-width:0}.fcard .row{flex-wrap:nowrap !important}

/* ---------- E82 (Joel 15.10.2026): ein Auftrag = eine Karte. Mini-Storyboard + Stand auf der Karte, Übersicht nach Stand gegliedert,
   im laufenden Auftrag Wege zur Übersicht und zum nächsten Auftrag. ---------- */
.ad .mosaik{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--line)}
.ad .mosaik.m1{grid-template-columns:1fr;grid-template-rows:1fr}
.ad .mosaik.m2{grid-template-rows:1fr}
.ad .mosaik.m3>:first-child{grid-row:span 2}
.ad .mosaik>img,.ad .mosaik>div{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:0}
.ad .mosaik .ph3{background:var(--card2)}
.ad .stand{position:absolute;left:8px;right:8px;bottom:12px;z-index:2;padding:5px 9px;border-radius:10px;font-size:11.5px;font-weight:650;color:#fff;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jgruppe+.jgruppe{margin-top:6px}
.jgruppe h2{display:flex;align-items:center;gap:8px}
.jobnow{flex-wrap:wrap}
.jobnow>div:not(.jobnow-acts){flex:1;min-width:220px}
.jobnow-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-self:center}
.jobnow-fuss{flex-basis:100%;padding-left:28px}
@media (max-width:640px){.jobnow-acts{margin-left:0}.jobnow-fuss{padding-left:0}}
pre.plan{white-space:pre-wrap;font:13px/1.55 ui-monospace,Menlo,monospace;margin:8px 0 0;max-height:360px;overflow:auto}
/* E85 Look und Ton */
.lookton .lt-zeile{margin-left:8px}.lookton .lt-zeile .badge{font-size:10px;padding:1px 6px}
.lt-sec{padding:12px 0;border-top:1px solid var(--line)}.lt-sec:first-child{border-top:0}.lt-sec>b{margin-right:6px}
.lt-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:8px;max-height:340px;overflow:auto;padding-right:4px}
.lt-stil{border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--card2);text-align:center}
.lt-stil img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}.lt-stil span{display:block;font-size:11px;padding:4px 2px}
.lt-stil.sel{border-color:var(--accent)}.lt-stil:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.lt-stimmen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin-top:8px;max-height:280px;overflow:auto}
.lt-stimme{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.lt-stimme.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.badge.tiny{font-size:10px;padding:1px 6px;vertical-align:middle}
/* E92 (Kritik-Notizen 21.10.2026): Übersichts-Karten je Bereich, Phasen anklickbar, Streifen-Pfeile, Board bricht um, Suche in Gruppen */
.ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ovc{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);transition:.15s;min-width:0}
.ovc:hover{border-color:var(--line2);transform:translateY(-1px);box-shadow:var(--shadow)}
.ovc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card2);font-size:19px;font-weight:800;flex:none}
.ovc-th{width:48px;height:60px;border-radius:8px;overflow:hidden;flex:none;background:var(--card2)}.ovc-th img{width:100%;height:100%;object-fit:contain}
.ovc-b{flex:1;min-width:0}.ovc-b b{display:block;font-size:14px}.ovc-b span{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
.ovc .cnt{min-width:24px;height:22px;padding:0 7px;border-radius:99px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--accent);color:var(--accent-ink);flex:none}
.ovc-go{color:var(--muted);flex:none}
.phases button.ph{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:block}
.phases button.ph:hover{border-color:var(--line2);background:var(--card2)}
.phases button.ph:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.board{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow-x:visible}
.strip-wrap{position:relative}
.strip-pf{position:absolute;top:calc(50% - 26px);width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);z-index:3}
.strip-pf.l{left:-12px}.strip-pf.r{right:-12px}.strip-pf[hidden]{display:none}
@media (hover:none){.strip-pf{display:none}}
.pal-tabs{display:flex;gap:4px;padding:8px 10px 0;border-top:1px solid var(--line)}
.pal-tabs button{font:inherit;font-size:12.5px;padding:5px 10px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink2);cursor:pointer}
.pal-tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.pal-sec{padding:10px 14px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.selrow{width:34px}
/* Auswahl-Kästchen außerhalb der Galerie-Karten (Liste, Board, Freigaben, Bilder) */
.selbox{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:transparent;border:1.5px solid var(--line2);color:transparent;font-size:13px;cursor:pointer;flex:none}
.selbox:hover{border-color:var(--muted)}.selbox.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.assist-mcp{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--g-mcp);color:#fff;margin-bottom:10px}.assist-mcp span{font-size:12.5px;opacity:.92;line-height:1.4}.assist-mcp .btn{align-self:flex-start;margin-top:4px}
.login-art .logo .wm{height:38px}.ul-logo .wm{height:28px}
.hpk{cursor:pointer;padding:12px}.hpk:hover{border-color:var(--muted)}.hpk.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

/* Glocke: Fenster passt aufs Handy */
.pop{width:min(340px,calc(100vw - 24px))}
@media (max-width:900px){.pop{position:fixed;left:12px;right:12px;top:calc(var(--toph) + 8px);width:auto;max-height:70vh}}
.prodlib{margin-bottom:8px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.fcard .row.fact{flex-wrap:wrap !important}.fcard .row.fact select{min-width:96px}
.bcards .fcard{padding:14px}
/* Produkt-Clips der Produktions-Bibliothek: Lade-Schimmer bis das erste Bild da ist, Hinweis statt schwarzem Kasten bei Formaten, die der Browser nicht abspielt */
.libc .lm.lade{background:linear-gradient(90deg,var(--card2),var(--hover),var(--card2));background-size:200% 100%;animation:lmLade 1.4s linear infinite}
@keyframes lmLade{to{background-position:-200% 0}}
.lm-fehl{display:grid;place-items:center;text-align:center;height:100%;min-height:120px;font-size:12px;color:var(--muted);padding:10px}
.libc .lm .lm-vs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}.libc .lm{position:relative}
/* E94 Produktwahl: Automatisch / Manuell (Suche, Gruppen, Mehrfachauswahl) */
.pw-box{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card)}
.pw-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:3px 10px 3px 3px;background:var(--card2);font-size:13px;max-width:100%}
.pw-chip img,.pw-chip .noi{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff;flex:none;display:grid;place-items:center;font-size:12px}
.pw-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-chip.k{border-style:dashed}
.pw-chip button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 0 0 2px;font-size:12px}
.pw-box input[type=search]{width:100%;margin:2px 0 8px}
.pw-grp{border-top:1px solid var(--line);padding:8px 0 0;margin-top:6px}.pw-grp summary{cursor:pointer;padding:4px 0}
.pw-list{max-height:300px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-top:6px}
.pw-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;cursor:pointer;background:var(--card2);min-width:0}
.pw-row input{width:auto;flex:none;margin:0}.pw-row img,.pw-row .noi{width:32px;height:32px;object-fit:contain;border-radius:6px;background:#fff;flex:none;display:grid;place-items:center}
.pw-row .grow{min-width:0}.pw-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-row:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card2))}
@media (max-width:640px){.pw-list{grid-template-columns:1fr;max-height:260px}}
/* Joel 22.10.2026: Umschalter „Ein Video / Mehrere auf einmal“ als Links */
.seg a{border-radius:9px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}.seg a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.serien{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:8px}.serie{display:block;transition:.15s}.serie:hover{border-color:var(--line2);transform:translateY(-1px)}
@media (max-width:560px){.ovgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ovc{padding:10px;gap:8px}.ovc-ic{width:32px;height:32px;font-size:16px}.ovc-b span{display:none}}
/* E95 Schriftauswahl mit Vorschau in der eigenen Schrift */
.lt-font{position:relative}.lt-fontbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid var(--line2);border-radius:10px;background:var(--card2);color:var(--ink);padding:8px 10px;cursor:pointer;font-size:15px;min-height:38px}
.lt-fontliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:6px;max-height:300px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.lt-fontopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--line);border-radius:10px;background:var(--card2);color:var(--ink);padding:8px 10px;cursor:pointer;text-align:left}
.lt-fontopt b{font-size:17px;line-height:1.15}.lt-fontopt small{font-size:12px;color:var(--muted)}.lt-fontopt.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.lt-fontprobe{margin-top:10px;padding:10px 14px;border-radius:10px;background:#111;color:#fff;font-size:22px;text-align:center;-webkit-text-stroke:.5px #000}
@media (max-width:640px){.lt-fontliste{grid-template-columns:1fr 1fr}}
.lt-font:has(.lt-fontliste){grid-column:1/-1}
/* E95 Custom-Avatare */
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.av-karte{display:flex;gap:12px;align-items:flex-start;min-width:0}
.av-wahl .av-karte{border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--card2);cursor:pointer}
.av-wahl .av-karte.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:color-mix(in srgb,var(--accent) 10%,var(--card2))}
.av-bild{width:56px;height:56px;border-radius:14px;overflow:hidden;flex:none;background:var(--hover);display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--muted)}
.av-bild img{width:100%;height:100%;object-fit:cover}
.av-text{min-width:0}.av-besch{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;color:var(--ink)}
.av-mini{display:inline-flex}.av-mini i,.av-mini img{width:28px;height:28px;border-radius:50%;margin-left:-6px;border:2px solid var(--card);background:var(--hover);display:inline-grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;object-fit:cover}
.av-mini>:first-child{margin-left:0}
@media (max-width:640px){.av-grid{grid-template-columns:1fr}}
.av-text>.tiny{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.av-text .badge{display:inline-flex;width:fit-content;vertical-align:middle;margin-left:4px}
/* Mitdenk 22.10.2026: „Automatisch“-Kacheln (Format, Stil) und Handy-Leiste im Studio (P2-14) */
.fmt.auto small,.sty.auto small{opacity:.95;font-weight:600}
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:58px;z-index:40;padding:10px 16px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .mbar .btn{flex:none}
  main#app:has(.mbar){padding-bottom:150px}
}
/* Mitdenk 22.10.2026 (P2-15): Handy-Auftrag: Phasen als schmale Leiste (nur Symbol + Status), die Freigabe steht davor */
@media (max-width:700px){.phases{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:12px 0}.phases .ph{padding:6px 4px;text-align:center;border-radius:10px}.phases .ph b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phases .ph span:not(.ico){display:none}.phases .ph .ico{font-size:16px;margin:0}.phases .ph.done .ico::after{font-size:10px}}
@media (max-width:700px){.gatebar,#gatebox>.row{flex-wrap:wrap}.gatebar>.ic,#gatebox .ic{display:none}.gatebar>.btn,.gatebar>a.btn,#gatebox .row>.btn{width:100%;justify-content:center}}
/* Joel 22.10.2026: MCP als Text-Menüpunkt, grüner Punkt = deine KI ist verbunden.
   Joel 24.10.2026: hervorgehoben als Pill im MCP-Verlauf (eigene Farbe, nicht der Akzent: MCP ist „deine KI“, wie Assistent und MCP-Seite).
   Nicht verbunden = leerer Ring + „verbinden“, verbunden = grüner Punkt, offen = voller Verlauf. */
.mcp-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;box-sizing:border-box;border:1.5px solid var(--muted);background:transparent}
.mcp-dot.on{border:0;background:var(--ok);box-shadow:0 0 8px var(--ok)}
#areas a.mcp-nav{padding:0 8px;border-bottom-color:transparent}
.mcp-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:99px;color:var(--ink);font-weight:750;letter-spacing:.02em;border:1.5px solid transparent;
  background:var(--mcp-soft) padding-box,linear-gradient(var(--bg),var(--bg)) padding-box,var(--g-mcp) border-box;transition:box-shadow .15s,transform .15s}
.mcp-pill .mcp-st{font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:0;padding-left:7px;border-left:1px solid var(--line2)}
#areas a.mcp-nav:hover .mcp-pill{transform:translateY(-1px);box-shadow:0 6px 18px rgba(168,85,247,.28)}
#areas a.mcp-nav.on .mcp-pill{background:var(--g-mcp) border-box;color:#fff}#areas a.mcp-nav.on .mcp-st{color:rgba(255,255,255,.88);border-left-color:rgba(255,255,255,.35)}
#areas a.mcp-nav.on .mcp-dot{border-color:rgba(255,255,255,.85)}#areas a.mcp-nav.on .mcp-dot.on{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 8px var(--ok)}
@media (max-width:1360px){.mcp-pill .mcp-st{display:none}}
/* Seitenmenü und Handy-„Mehr“: derselbe Verlauf als Hinterlegung, Zustand als Punkt bzw. Zeile */
#nav a.mcp-item{background:var(--mcp-soft);box-shadow:inset 0 0 0 1px rgba(168,85,247,.32);color:var(--ink)}#nav a.mcp-item .mcp-dot{margin-left:auto}
#nav a.mcp-item.active{background:var(--mcp-soft);box-shadow:inset 0 0 0 1.5px rgba(168,85,247,.6)}#nav a.mcp-item.active::before{background:var(--g-mcp)}
.mehr-menu .mcp-ovc{border:1.5px solid transparent;background:var(--mcp-soft) padding-box,linear-gradient(var(--card),var(--card)) padding-box,var(--g-mcp) border-box}
.mehr-menu .mcp-ovc .ovc-ic{background:var(--g-mcp)}.mehr-menu .mcp-st{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);margin-top:2px}
/* Handy: untere Leiste ohne MCP (steht im Menü ☰ unter „KI verbinden“), „Brands“ statt „Brands & Produkte“, nichts bricht um */
#areas a .t-kurz{display:none}
@media (max-width:900px){#areas a[href="#/connect"]{display:none}#areas a.hat-kurz .t-lang{display:none}#areas a.hat-kurz .t-kurz{display:inline}#areas a{white-space:nowrap}}
/* k01 (Joel 22.10.2026): MCP-Seite verkauft zuerst (Hero + Fähigkeiten), die Verbindung in 3 Schritten steht darunter */
.mcpp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;padding:34px;border-radius:24px;background:var(--g-mcp);color:#fff;overflow:hidden}
.mcpp-hero h1{font-size:36px;line-height:1.12;letter-spacing:-.02em;margin:14px 0 12px;color:#fff;max-width:620px}
.mcpp-hero p{font-size:16px;line-height:1.55;opacity:.93;margin:0;max-width:560px}
.mcpp-logos{display:flex;gap:8px;align-items:center}.mcpp-logos span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;color:#000}
.mcpp-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}.mcpp-acts .btn{background:#fff;color:#14141c;border:0}
.mcpp-stat{font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.18)}.mcpp-stat.on{background:rgba(255,255,255,.95);color:#15803d}
.mcpp-chat{background:rgba(8,8,16,.5);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px}
.mcpp-chat .m{max-width:88%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.mcpp-chat .m.u{align-self:flex-end;background:#fff;color:#14141c;border-bottom-right-radius:4px}.mcpp-chat .m.a{align-self:flex-start;background:rgba(255,255,255,.14);border-bottom-left-radius:4px}
.mcpp-chat .lbl{font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.mcpp-bsel{display:flex;align-items:center;gap:8px;font-weight:400;letter-spacing:0}.mcpp-bsel select{width:auto;padding:6px 10px}
.mcpp-caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mcpp-cap{display:flex;flex-direction:column;gap:8px}.mcpp-cap h3{margin:0}.mcpp-cap p{margin:0 0 4px;line-height:1.5}.mcpp-cap .pr-c{margin-top:auto}
.mcpp .adv{margin-top:14px}
.mcpp-steps{display:flex;flex-direction:column;gap:14px}
.mcpp-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px}.mcpp-step h3{margin:6px 0 10px;font-size:17px}
.mcpp-num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--g-mcp);color:#fff;font-weight:700}
.mcpp-toks{display:flex;flex-direction:column;gap:6px}.mcpp-tok{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.mcpp .clients{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.mcpp-hero{grid-template-columns:minmax(0,1fr)}.mcpp-caps{grid-template-columns:repeat(2,minmax(0,1fr))}.mcpp .clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mcpp-hero{padding:20px;border-radius:18px;gap:18px}.mcpp-hero h1{font-size:26px}.mcpp-hero p{font-size:15px}.mcpp-acts .btn{flex:1 1 100%;justify-content:center}
  .mcpp-caps,.mcpp .prompts,.mcpp-darf{grid-template-columns:minmax(0,1fr)}.mcpp-step{grid-template-columns:minmax(0,1fr);gap:4px}.mcpp-step h3{margin-top:0}
  .mcpp h2{flex-wrap:wrap}.mcpp-bsel{width:100%}.mcpp-bsel select{flex:1}.mcpp pre.code{padding-top:48px}}
/* Listen, Unterordner, Bibliothek, Layout (Joel 22.10.2026) */
.mehr-zeile{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.monat{grid-column:1/-1;margin:14px 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.monat:first-child{margin-top:0}
.nowrap{white-space:nowrap}
.ell2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.kopfzeile{flex-wrap:wrap;gap:12px}.kopfzeile>div:first-child{min-width:0;flex:1 1 260px}
.wrap-gap{flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tabelle-scroll{overflow-x:auto}.tabelle-scroll table{min-width:640px}
.jliste{min-width:860px}
th.sortierbar a{color:inherit;white-space:nowrap}th.sortierbar a:hover{color:var(--ink)}th.sortierbar.on a{color:var(--ink)}
/* Board: feste Mindestbreite je Spalte, waagrecht scrollbar statt gequetschter Titel (P2-05) */
.board-scroll{overflow-x:auto;padding-bottom:10px;margin:0 -2px}
.board-scroll .board{grid-template-columns:repeat(6,minmax(232px,1fr));overflow:visible;min-width:min-content}
.bcol .bcard .th{width:44px;height:56px;flex:none}
.bcol-mehr{flex:none;justify-content:center;margin-top:4px}
/* Bibliothek: Raster aus Einzelbildern, kein Video (Joel 22.10.2026) */
.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fr-k{position:relative;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.fr-k.gesperrt{opacity:.6}
.fr-b{position:relative;display:block;aspect-ratio:9/16;background:var(--card2);overflow:hidden}
.fr-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fr-leer{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center;padding:8px}
.fr-ic{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font-size:13px;opacity:0;transition:opacity .15s}
a.fr-b:hover .fr-ic,a.fr-b:focus-visible .fr-ic{opacity:1}
@media (hover:none){.fr-ic{opacity:.85}}
.fr-k .lid{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
.fr-k .lfav{position:absolute;top:6px;right:6px;font-size:14px;color:var(--warn);text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.fr-st{position:absolute;top:30px;left:6px;pointer-events:none}
.fr-m{display:flex;align-items:center;gap:6px;padding:7px 8px;min-width:0}.fr-m .ell{flex:1;min-width:0}
.fr-a{display:flex;gap:2px;flex:none}
.ib{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink2);cursor:pointer;font-size:12px;display:grid;place-items:center;padding:0}
.ib:hover{background:var(--hover);color:var(--ink)}
@media (max-width:560px){.frames{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fr-m{padding:5px 6px}.fr-a .ib{width:22px;height:22px}.fr-k .fr-m .ell{display:none}}
.ovc[data-pq]{cursor:pointer}
/* Produkte mit Mehrfachauswahl (P1-11) */
.bc.wahl{position:relative}.bc.wahl .selbox{position:absolute;top:8px;left:8px;z-index:2;background:var(--card)}.bc.wahl.on{outline:2px solid var(--accent);outline-offset:-2px}
/* P2-16: Handy-Leiste Start · Freigaben · Aufträge · Mehr */
#areas a.nur-handy{display:none}
.mehr-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:900px){#areas a.nur-gross{display:none}#areas a.nur-handy{display:flex}#areas a.h-start{order:1}#areas a.h-frei{order:2}#areas a.h-auftraege{order:3}#areas a.h-mehr{order:4}#areas a{flex:1 1 0;min-width:0;position:relative}#areas a .cnt{position:absolute;top:4px;left:calc(50% + 6px);margin:0}}
@media (max-width:900px){#areas a.h-auftraege .cnt{display:none}}
/* Monats-Überschrift und „N weitere zeigen“ stehen im Raster: dort keine gleich hohen Reihen, sonst wird die Zeile so hoch wie eine Karte */
:is(.gallery,.bcards,.pcards,.libgrid,.frames,.serien,.karten):has(>.monat,>.mehr-zeile){grid-auto-rows:auto}
td.num,th.num{white-space:nowrap}
.prodlib .ovgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}.prodlib .ovc-b{min-width:0}
.fr-m .ell{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-m{flex-wrap:wrap;row-gap:4px}.fr-m .ell{flex:1 0 100%}.fr-a{margin-left:auto}
/* Layout-Durchgang 22.10.2026 (1440 bis 375 px): nichts abgeschnitten, nichts verschoben, kein waagrechtes Scrollen */
input[type=search]{-webkit-appearance:none;appearance:none;color:var(--ink)}
/* Karten-Kopf: Status-Badge darf kürzen, Serie/Iteration/Löschen bleiben ganz sichtbar */
.ad .top{min-width:0}.ad .top>*{flex:none}.ad .top>.selbox+.badge{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-st{max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Überschrift mit Hinweis: Hinweis rechts, am Handy in eigener Zeile */
.h2-hint{font-size:12.5px;font-weight:500;color:var(--muted)}
@media (max-width:560px){h2:has(>.h2-hint){flex-wrap:wrap;row-gap:2px}.h2-hint{flex-basis:100%}}
/* Brand-Kopf: am Handy umbrechen statt den Knopf abschneiden */
@media (max-width:700px){.brand-hero{flex-wrap:wrap;padding:18px;gap:14px}.brand-hero>.grow{flex:1 1 200px;min-width:0}.brand-hero>.row{width:100%}.brand-hero>.row .btn{width:100%;justify-content:center}}
/* Zeilen mit Text und Knöpfen (Learnings): am Handy Knöpfe unter den Text */
@media (max-width:560px){.lrow{flex-wrap:wrap}.lrow>.grow{flex:1 1 calc(100% - 44px);min-width:0}.lrow>.grow+.btn{margin-left:auto}}
/* Tabellen: Spalten je Breite ausblenden statt waagrecht scrollen; am Handy steht das Wichtigste unter dem Titel */
.nur-schmal{display:none}
.jliste td:nth-child(2){min-width:200px}
.tabelle-scroll{container-type:inline-size}
@container (max-width:1000px){.s-1300{display:none}.jliste{min-width:0}}
@container (max-width:920px){.tabelle-scroll table,.jliste{min-width:0}.s-900{display:none}.nur-schmal{display:block}.jliste td:nth-child(2){min-width:0}}
/* Galerie am Handy zweispaltig (vorher eine Karte je Bildschirmhöhe) */
@media (max-width:560px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ad .cap{padding:8px 9px;height:74px;min-height:74px}.ad .cap .t{font-size:12.5px}}
/* Kopfzeilen am Handy: Ansicht-Umschalter über die ganze Breite, Suche ganz breit */
@media (max-width:560px){.kopfzeile>.wrap-gap{justify-content:flex-start;width:100%}.filters input[type=search]{flex:1 1 100%;width:100%}.filters select{flex:1 1 calc(50% - 4px);min-width:0}}
@media (max-width:560px){.tabelle-scroll td.nowrap{white-space:normal}.tabelle-scroll th,.tabelle-scroll td{padding-left:8px;padding-right:8px}}
.nur-handy-z{display:none}
@container (max-width:560px){.s-560{display:none}.nur-handy-z{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}}
.mehr-menu .ovc{padding:10px 12px;gap:6px;min-width:0;flex-direction:column;align-items:flex-start}.mehr-menu .ovc-ic{width:30px;height:30px;font-size:15px;flex:none}.mehr-menu .ovc-b{min-width:0}.mehr-menu .ovc-b b{overflow-wrap:break-word}
@media (max-width:700px){.gatebar>.btn,.gatebar>a.btn,#gatebox .row>.btn{white-space:normal;text-align:center;height:auto;min-height:38px;line-height:1.3}}
/* Datenschutz sichtbar (25.10.2026): kleiner Hinweis an Upload-Stellen, Vertrauens-Block in der Übersicht, Seite „Deine Daten“ */
.datenhinweis{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--muted)}.datenhinweis a{color:var(--accent-text);white-space:nowrap}.datenhinweis a:hover{text-decoration:underline}
.mcpp-hero .datenhinweis{color:inherit;opacity:.85}.mcpp-hero .datenhinweis a{color:inherit;text-decoration:underline}
.login-box .datenhinweis{justify-content:center;text-align:left}
.vertrauen{margin:22px 0 4px;background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 9%,var(--card)),var(--card))}.vertrauen .vt-kopf{display:flex;gap:10px;align-items:center}.vertrauen .vt-kopf a{margin-left:auto}.vertrauen .vt-ic{font-size:18px}
.vertrauen ul{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;color:var(--ink2);font-size:13.5px}
.daten-seite{max-width:900px;margin:0 auto}.daten-z{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0 6px}.daten-z .card p{margin:6px 0 0}.dz-ic{font-size:22px;margin-bottom:6px}
.daten-seite table td:first-child{color:var(--ink2);width:46%}
body.bare .daten-seite{padding:28px 16px}

/* 25.10.2026 Server-Push: Prüf-Stand je Storyboard-Karte. Ungeprüft = gestrichelter Rahmen + Hinweis im Bild, Neubau = altes Bild gedimmt mit
   Schimmer (gen-over), geprüft ok = Haken in der Zeile. Neue Karten blenden kurz ein (kein Flackern beim Tausch, siehe karteErsetzen). */
.frame.ungeprueft{border-style:dashed;border-color:color-mix(in srgb,var(--info,#38bdf8) 55%,var(--line))}
.frame.neubau{border-color:color-mix(in srgb,var(--warn,#f59e0b) 60%,var(--line))}
.pruef-chip{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:650;color:#fff;background:rgba(10,10,15,.62);backdrop-filter:blur(4px)}
.pruef-chip::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--info,#38bdf8);animation:pulse 1.2s infinite}
.frame .badge.pruef{font-weight:600}
.frame.neubau .gen-over{background:rgba(10,10,15,.32)}
@keyframes karte-ein{from{opacity:.55}to{opacity:1}}
.frame.frisch{animation:karte-ein .35s ease-out}
.live-aus{display:none;margin-top:4px}
.live-aus.an{display:block}
/* Schrift-/Untertitel-Vorschau groß (25.10.2026, vorschauGross in app.js): Bühne in 9:16, Pfeile, Fuß mit „… nehmen“ */
html.lb-offen{overflow:hidden}
.lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;overscroll-behavior:contain}
.lb-box{position:relative;display:flex;flex-direction:column;gap:12px;width:min(460px,100%);max-height:100%}
.lb-buehne{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.lb-bild,.lb-probe{display:block;height:min(72vh,780px);max-width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:16px;background:#111;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-probe{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:18px;padding:0 34px 22%;text-align:center;color:#fff;background:linear-gradient(180deg,#3a3f4b 0%,#20232b 55%,#111 100%);overflow:hidden}
.lb-probe-cap{max-width:100%;overflow-wrap:anywhere;font-size:clamp(22px,min(7vh,8.5vw),46px);line-height:1.1;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:0 3px 10px rgba(0,0,0,.6)}
.lb-probe-abc{font-size:clamp(15px,2.6vh,20px);line-height:1.35;opacity:.85}
.lb-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-pfeil.l{left:-6px}.lb-pfeil.r{right:-6px}.lb-pfeil:hover{background:rgba(0,0,0,.7)}
.lb-x{position:absolute;top:-6px;right:-6px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#fff;font-size:24px;cursor:pointer}
.lb-fuss{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:10px 12px}
.lb-fuss b{font-size:17px}
@media (max-width:640px){.lb{padding:10px}.lb-bild,.lb-probe{height:min(64vh,640px)}.lb-pfeil{width:40px;height:40px}.lb-pfeil.l{left:2px}.lb-pfeil.r{right:2px}.lb-x{top:2px;right:2px}.lb-fuss{flex-wrap:wrap}.lb-fuss .btn{width:100%}}
.lt-stil{position:relative}.lt-stil::after{content:"⤢";position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:20px;opacity:.8;pointer-events:none}
.lt-fontprobe[data-ltfontgross]{cursor:zoom-in}
.frame .idea.kette{color:var(--accent-text,var(--accent));font-weight:600}