/* ===================================================================
   epora — Studio (Cream / Weiß / Ink, Terrakotta-Akzent, Fraunces+Inter)
   =================================================================== */
:root{
  --ink:#0B0B0C; --ink-soft:#26262A;
  --paper:#FFFFFF; --cream:#F4F0E7; --cream-2:#ECE6DA; --cream-3:#E3DCCB;
  --gray:#8C887E; --gray-2:#6F6B61;
  --line:rgba(11,11,12,.12); --line-soft:rgba(11,11,12,.07); --line-strong:rgba(11,11,12,.26);
  --accent:#B5532E; --accent-deep:#9A4426; --accent-soft:rgba(181,83,46,.1);
  --ok:#3B6D11; --err:#A32D2D;
  --glass:rgba(244,240,231,.88); --glass-line:rgba(11,11,12,.1);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:18px; --radius-sm:12px;
  --shadow:0 24px 60px -18px rgba(11,11,12,.22); --shadow-sm:0 10px 30px -12px rgba(11,11,12,.16);
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--ink); font-size:14px; line-height:1.55;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  background:var(--cream);
}
button,input,textarea{font-family:inherit; font-size:14px; color:inherit}
.hidden{display:none !important}
.muted{color:var(--gray-2)} .small{font-size:12px}
em{font-style:italic; font-family:var(--serif); font-weight:440; color:var(--accent)}
::selection{background:var(--accent); color:var(--cream)}

.kicker{font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--accent)}
.kicker.mt{margin-top:20px; display:block; color:var(--gray)}
h1{font-family:var(--serif); font-weight:380; font-size:clamp(30px,4.4vw,52px); line-height:1.06; letter-spacing:-.01em}
h2{font-family:var(--serif); font-weight:420; font-size:26px; line-height:1.12; letter-spacing:-.01em}
h3{font-family:var(--serif); font-weight:440; font-size:18px; letter-spacing:0}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition-duration:.001s !important; animation-duration:.001s !important} }

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; line-height:1;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:11px 19px; font-size:13px; font-weight:500; letter-spacing:0;
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .3s,color .25s; white-space:nowrap}
.btn:hover{border-color:var(--line-strong); box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn.primary{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.btn.primary:hover{background:var(--ink-soft)}
.btn.accent{background:var(--accent); border-color:var(--accent); color:#FDF9F1}
.btn.accent:hover{background:var(--accent-deep)}
.btn.ghost{background:transparent; border-color:var(--line)}
.btn.ghost:hover{background:rgba(11,11,12,.04); box-shadow:none; border-color:var(--line-strong)}
.btn.small{padding:8px 14px; font-size:12px}
.btn.wide{width:100%}
.arr{display:inline-block; transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.cost{font-size:10.5px; opacity:.75; font-weight:500; letter-spacing:.04em}
.cost::before{content:"· "}

/* ---------------- Inputs ---------------- */
input[type=text],input[type=email],input[type=password],input:not([type]),textarea{
  width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; outline:none; transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--gray)}
textarea{resize:vertical; line-height:1.5}
input[type=range]{accent-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent)}

/* ---------------- Segmented ---------------- */
.seg{display:inline-flex; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:999px; padding:3px; gap:2px}
.seg button{flex:1; background:transparent; border:none; color:var(--gray-2); padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:500; cursor:pointer; transition:.2s; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(11,11,12,.1)}
.seg.big{width:100%} .seg.big button{padding:12px}
.seg.small button{padding:6px 12px; font-size:11.5px}

/* ---------------- Auth ---------------- */
.auth-screen{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; background:var(--cream)}
.auth-glow{position:absolute; inset:0; background:
  radial-gradient(720px 460px at 50% -10%, rgba(181,83,46,.07), transparent 70%),
  radial-gradient(560px 380px at 85% 100%, rgba(11,11,12,.05), transparent 70%)}
.auth-card{position:relative; width:min(420px,100%); background:var(--paper); border:1px solid var(--line-soft); border-radius:24px; padding:44px 40px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:13px}
.auth-card .kicker{text-align:center}
.auth-brand{font-family:var(--serif); font-size:34px; font-weight:500; text-align:center; letter-spacing:-.01em}
.dot{color:var(--accent); font-weight:440}
.auth-sub{font-family:var(--serif); font-size:17px; font-weight:380; font-style:italic; text-align:center; color:var(--gray-2); margin-bottom:12px}
.auth-tabs{display:flex; gap:4px; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:999px; padding:4px}
.auth-tab{flex:1; background:transparent; border:none; color:var(--gray-2); padding:10px; border-radius:999px; font-weight:500; cursor:pointer; transition:.2s}
.auth-tab.on{background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(11,11,12,.08)}
.auth-error{color:var(--err); font-size:12.5px; min-height:16px; text-align:center}

/* ---------------- Shell ---------------- */
#app{display:flex; flex-direction:column; height:100vh; overflow:hidden}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex:0 0 auto; padding:13px 22px;
  border-bottom:1px solid var(--line-soft); background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.brand{display:flex; align-items:baseline; gap:14px; min-width:0}
.logo{font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; cursor:pointer}
.proj-name{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--gray-2); border-left:1px solid var(--line); padding-left:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}
.top-right{display:flex; align-items:center; gap:13px}
.tokens-pill{display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:var(--paper); border:1px solid var(--line); color:var(--ink); padding:8px 16px; border-radius:999px; font-weight:600; font-size:13px; transition:.25s}
.tokens-pill .tlabel{font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--gray)}
.tokens-pill:hover{border-color:var(--accent); box-shadow:var(--shadow-sm)}
.tokens-pill .tdot{width:7px; height:7px; border-radius:50%; background:var(--accent)}
.acct-email{font-size:12px; color:var(--gray-2); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------------- Home ---------------- */
.home{flex:1 1 auto; min-height:0; overflow-y:auto; padding:60px 44px; max-width:1180px; width:100%; margin:0 auto}
.home-hero{margin-bottom:38px}
.home-hero h1{margin-top:16px}
.new-row{display:flex; gap:12px; align-items:center; margin-bottom:40px; max-width:560px}
.new-row #new-name{flex:1; border-radius:999px; padding:12px 20px}
.project-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px}
.proj-card{position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px 24px; cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.proj-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--line)}
.proj-card h3{margin-bottom:10px; font-size:19px}
.proj-card .meta{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--accent);
  display:flex; align-items:center; justify-content:space-between; gap:10px}
.proj-card .pc-size{color:var(--gray); letter-spacing:.06em; font-weight:600; text-transform:none}
.proj-card .pc-del{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--gray); font-size:15px; line-height:1;
  cursor:pointer; opacity:0; transition:opacity .25s,border-color .2s,color .2s; z-index:2}
.proj-card:hover .pc-del{opacity:1}
.proj-card .pc-del:hover{border-color:#B3402A; color:#B3402A}
.proj-card .pc-edit{position:absolute; top:10px; right:42px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--gray); font-size:12px; line-height:1;
  cursor:pointer; opacity:0; transition:opacity .25s,border-color .2s,color .2s; z-index:2}
.proj-card:hover .pc-edit{opacity:1}
.proj-card .pc-edit:hover{border-color:var(--accent); color:var(--accent)}
.proj-card .pc-rename{display:block; width:100%; margin-bottom:10px; font-size:18px; font-weight:600; font-family:inherit;
  color:var(--ink); background:var(--cream-2); border:1px solid var(--accent); border-radius:8px; padding:5px 9px; outline:none}
.home-storage{margin-top:18px; text-align:center}
.home-storage b{color:var(--gray-2)}

/* ---------------- Editor ---------------- */
/* Vollflächen-Layout: der 360°-Viewport füllt den gesamten Editor, alle Panels schweben darüber.
   Vorteil: „Vollbild" blendet nur Overlays aus — der Viewport springt nie. */
.editor{flex:1 1 auto; min-height:0; position:relative; display:block}
.stage{position:absolute; inset:0; overflow:hidden; background:#0B0B0C}
#viewer{position:absolute; inset:0}
#viewer canvas{display:block}

/* Phasen-Rail: einzelne Blasen im Seg-Stil (Umwandung + innen liegende Pille) */
.phase-rail{position:absolute; top:16px; left:calc((100% - var(--sidew, 424px)) / 2); transform:translateX(-50%); z-index:8;
  display:flex; align-items:center; gap:8px}
.pstep{display:inline-flex; background:var(--cream-2); border:1px solid var(--line-soft);
  border-radius:999px; padding:3px; box-shadow:0 4px 16px rgba(11,11,12,.14); transition:opacity .25s}
.pstep:has(.locked){opacity:.45}
.prail{background:transparent; border:none; color:var(--gray-2); padding:7px 15px; border-radius:999px;
  font-size:12.5px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:8px; transition:.2s}
.prail b{font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--gray)}
.prail:not(.on):not(.locked):hover{background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(11,11,12,.1)}
.prail.on{background:var(--ink); color:var(--cream); box-shadow:0 2px 10px rgba(11,11,12,.3)} .prail.on b{color:#D9805C}
.prail.locked{cursor:not-allowed}
.rail-sep{width:14px; height:1.5px; background:var(--gray); opacity:.55; border-radius:1px}

/* Weiche: nach 02 teilt sich der Pfad sichtbar in Tour | Animation */
.rail-branch{position:relative; display:flex; align-items:center; margin:0 -3px}
.rail-branch svg{display:block}
.rail-branch .bp{stroke:var(--gray); stroke-width:1.6; stroke-linecap:round; opacity:.75;
  transition:stroke .3s, opacity .3s}
.rail-branch .bp-node{fill:var(--gray); transition:fill .3s}
.phase-rail.br-tour .bp-tour, .phase-rail.br-anim .bp-anim{stroke:var(--accent); stroke-width:2; opacity:1}
.phase-rail.br-tour .bp-anim, .phase-rail.br-anim .bp-tour{opacity:.3}
.phase-rail.br-tour .bp-node, .phase-rail.br-anim .bp-node{fill:var(--accent)}
.rail-fork-col{display:flex; flex-direction:column; gap:8px; align-items:flex-start}

.paint-bar{position:absolute; top:16px; left:16px; z-index:8; display:flex; align-items:center; gap:12px;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-line); border-radius:999px; padding:8px 12px; box-shadow:var(--shadow-sm)}
.pbtn{display:inline-flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--line); color:var(--gray-2); padding:7px 14px; border-radius:999px; font-size:12px; font-weight:500; cursor:pointer; transition:.2s}
.pbtn:hover{color:var(--ink); border-color:var(--line-strong)}
.pbtn .pdot{width:7px; height:7px; border-radius:50%; background:var(--gray)}
.pbtn.on{color:var(--accent-deep); border-color:var(--accent); background:var(--accent-soft)} .pbtn.on .pdot{background:var(--accent)}
/* Zwei Pinsel: Behalten (blau) / Entfernen (orange) */
.pbtn.brush-keep .pdot{background:#5a8fe8}
.pbtn.brush-remove .pdot{background:#e8945a}
.pbtn.brush-keep.on{color:#2f6fd6; border-color:#5a8fe8; background:rgba(90,143,232,.12)} .pbtn.brush-keep.on .pdot{background:#5a8fe8}
.pbtn.brush-remove.on{color:#b5532e; border-color:#e8945a; background:rgba(232,148,90,.14)} .pbtn.brush-remove.on .pdot{background:#e8945a}
.pbtn.dim{opacity:.4; pointer-events:none}
.pbtn.ba-toggle.on{color:#2f6fd6; border-color:#5a8fe8; background:rgba(90,143,232,.12)}

/* 02-Bild: Versionsliste des Settings (Original + Generierungen) */
.img-versions{margin-bottom:14px}
.img-versions.hidden{display:none}
.img-versions .iv-h{font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--gray-2); margin-bottom:8px}
.img-versions .iv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.iv-item{position:relative; border:1px solid var(--cream-3); border-radius:9px; overflow:hidden; background:var(--paper); cursor:pointer; padding:0; aspect-ratio:2/1}
.iv-item img{width:100%; height:100%; object-fit:cover; display:block}
.iv-item.active{border:2px solid var(--accent)}
.iv-item.orig{border-style:dashed}
.iv-item .iv-lab{position:absolute; left:0; right:0; bottom:0; font-size:9px; line-height:1.3; color:#fff; background:linear-gradient(transparent,rgba(11,11,12,.66)); padding:8px 5px 3px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.iv-item.orig .iv-lab{background:linear-gradient(transparent,rgba(47,111,214,.7))}
.brush-lbl{font-size:11px; color:var(--gray-2); display:flex; align-items:center; gap:8px; font-weight:500}
.brush-lbl input{width:90px}

.guide-toggle{position:absolute; top:16px; right:calc(var(--sidew, 424px) + 10px); z-index:7; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-line); color:var(--gray-2); padding:9px 15px; border-radius:999px; font-size:12px; font-weight:500; box-shadow:var(--shadow-sm);
  transition:color .2s, border-color .2s, right .5s var(--ease)}
.guide-toggle:hover{color:var(--ink)}
.guide-toggle .gdot{width:7px; height:7px; border-radius:50%; background:var(--gray)}
.guide-toggle.on{color:var(--accent-deep); border-color:rgba(181,83,46,.4)} .guide-toggle.on .gdot{background:var(--accent)}

/* Guides-Einstellpanel */
.guides-panel{position:absolute; top:60px; right:calc(var(--sidew, 424px) + 10px); z-index:9; width:252px;
}
.cinema .guide-toggle,.cinema .guides-panel{right:16px}
.guides-panel{
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:11px;
  transition:right .5s var(--ease)}
.guides-panel .gp-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--gray-2)}
.guides-panel .gp-row input[type=range]{flex:1; max-width:120px}
.gp-chk{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gray-2); cursor:pointer}
.gp-chk input{width:auto}
.gp-chk.master{font-weight:600; color:var(--ink); padding-bottom:9px; border-bottom:1px solid var(--line-soft)}
.crosshair{position:absolute; top:50%; left:50%; width:30px; height:30px; transform:translate(-50%,-50%); z-index:6; pointer-events:none}
.crosshair::before,.crosshair::after{content:""; position:absolute; background:var(--accent); opacity:.9}
.crosshair::before{left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%)}
.crosshair::after{top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%)}

/* Vollbild / Kino-Modus */
.topbar,.side,#anim-bottom{transition:transform .5s var(--ease), opacity .4s}
.paint-bar,.viewer-hud{transition:opacity .4s}
.phase-rail{transition:opacity .4s, left .5s var(--ease)}
.cinema .topbar{transform:translateY(-110%); opacity:0; pointer-events:none}
.cinema .side{transform:translateX(115%); opacity:0; pointer-events:none}
.cinema #anim-bottom{transform:translateY(130%); opacity:0; pointer-events:none}
.cinema .genbar,.cinema .chatbar,.cinema .paint-bar,.cinema .phase-rail,.cinema .viewer-hud{opacity:0; pointer-events:none}
.cinema-exit{position:absolute; top:16px; left:16px; z-index:62; display:inline-flex; align-items:center; gap:8px;
  background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--glass-line); color:var(--gray-2);
  padding:9px 15px; border-radius:999px; font-size:12px; font-weight:500; cursor:pointer; box-shadow:var(--shadow-sm)}
.cinema-exit:hover{color:var(--ink)}

.wizard{display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px; margin:12px 0 4px}
.wizard label{display:flex; flex-direction:column; gap:7px; font-size:11.5px; color:var(--gray-2); font-weight:500}
.chk{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gray-2); cursor:pointer} .chk input{width:auto}
.upload-btn{cursor:pointer}

/* Generierungs-/Chat-Leisten: unten mittig im freien Bereich (links der Sidebar) */
.genbar{position:absolute; left:calc((100% - var(--sidew, 424px)) / 2); bottom:22px; transform:translateX(-50%); z-index:8;
  width:min(760px,calc(100% - var(--sidew, 424px) - 36px)); background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line); border-radius:22px; padding:14px; box-shadow:var(--shadow);
  transition:opacity .45s var(--ease), bottom .35s var(--ease), left .5s var(--ease), width .5s var(--ease), transform .5s var(--ease); will-change:transform, opacity}
.chatbar .btn{white-space:nowrap}
.genbar-opts{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px}
.genbar-opts .ol{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gray)}
.genbar .wizard{grid-template-columns:repeat(3,1fr); margin:0 0 12px}
.genbar .wizard input{background:rgba(255,255,255,.85)}
.genbar .status{margin-top:8px}

/* Galerie */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px}
.gallery .cand{position:relative; aspect-ratio:2/1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-soft); cursor:pointer; background:var(--cream-2); transition:transform .3s var(--ease),box-shadow .3s,border-color .25s}
.gallery .cand img{width:100%; height:100%; object-fit:cover}
.gallery .cand:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.gallery .cand.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.gallery .cand-info{position:absolute; left:6px; bottom:6px; font-size:8.5px; letter-spacing:.08em; font-weight:600;
  text-transform:uppercase; color:var(--cream); background:rgba(11,11,12,.66); backdrop-filter:blur(6px);
  padding:3px 8px; border-radius:999px; pointer-events:none}
.gallery-empty{grid-column:1 / -1}

.viewer-hud{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; pointer-events:none; display:flex; align-items:flex-end; justify-content:space-between; background:linear-gradient(to top,rgba(11,11,12,.55),transparent)}
.chip{background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--glass-line); color:var(--ink); padding:6px 14px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.06em}
.hint{font-size:11.5px; color:rgba(244,240,231,.8)}

/* ---------------- Seitenpanel: schwebendes Glas-Panel über dem Viewport ---------------- */
.side{position:absolute; top:14px; right:14px; bottom:14px; width:396px; z-index:10;
  background:rgba(244,240,231,.94); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-line); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow-y:auto; padding:20px; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), opacity .4s}
.side-body{display:flex; flex-direction:column; flex:1 0 auto}
/* „Nächster Schritt": immer am unteren Ende der Sidebar, klar abgesetzt */
.next-step{margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:11px}
.next-step::before{content:""; display:block; height:14px; margin-top:-18px}
.next-step .kicker{color:var(--gray)}
.side .kicker{margin-bottom:16px; display:block}
.stack{display:flex; flex-direction:column; gap:11px}
.field{display:block; font-size:12px; color:var(--gray-2); margin-bottom:2px; font-weight:500}
.field textarea{margin-top:7px}
.tip{font-size:11.5px; color:var(--gray-2); line-height:1.6; padding:12px 14px; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-sm)}
.tip b{color:var(--accent-deep); font-weight:600}
.preview{position:relative; width:100%; aspect-ratio:2/1; border-radius:var(--radius-sm); overflow:hidden; background:var(--cream-2); border:1px solid var(--line-soft); margin-bottom:14px; display:flex; align-items:center; justify-content:center}
/* Vollbild-Knopf im Video-Preview (Sidebar) — öffnet das große Vorschau-Modal */
.pv-expand{position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:9px;
  background:rgba(11,11,12,.55); color:#fff; border:none; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:.75; transition:opacity .2s, background .2s, transform .2s}
.preview:hover .pv-expand{opacity:1}
.pv-expand:hover{background:var(--accent); transform:scale(1.06)}
.preview img,.preview video{width:100%; height:100%; object-fit:cover}
.preview .ph{color:var(--gray); font-size:12px}
.insp-head{display:flex; align-items:center; justify-content:space-between; margin:14px 0}
.badge{font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--cream-2); border:1px solid var(--line-soft); color:var(--gray-2)}
.badge.video{color:var(--accent-deep); border-color:rgba(181,83,46,.35); background:var(--accent-soft)}
.row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; flex-wrap:wrap}
.row2{display:flex; gap:10px} .row2 .btn{flex:1} .row2 .seg{flex:1}

.status{font-size:12.5px; color:var(--gray-2); min-height:18px; display:flex; align-items:center; gap:8px; margin-top:10px}
.status.busy{color:var(--accent-deep)} .status.ok{color:var(--ok)} .status.err{color:var(--err)}
.spinner{width:13px; height:13px; border:2px solid rgba(181,83,46,.25); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- Timeline + Filmstreifen: schwebendes Bottom-Panel ---------------- */
#anim-bottom{position:absolute; left:14px; right:var(--sidew, 424px); bottom:14px; z-index:9;
  display:flex; flex-direction:column; min-width:0;
  background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-line); border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .5s var(--ease), opacity .4s, right .5s var(--ease)}
.filmstrip{display:flex; gap:12px; padding:14px 18px; border-top:1px solid var(--line-soft); background:transparent; overflow-x:auto}

.timeline-wrap{padding:12px 18px 4px}
.timeline-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.tl-total{font-size:11px; color:var(--gray-2); font-weight:500; letter-spacing:.04em}
.timeline-row{display:flex; align-items:stretch; gap:12px}
.timeline{display:flex; gap:10px; overflow-x:auto; flex:1 1 auto; min-width:0; padding-bottom:4px}
.tl-slot{flex:0 0 auto; width:134px; cursor:pointer; border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:10px 12px;
  background:var(--paper); transition:transform .3s var(--ease),box-shadow .3s,border-color .25s; display:flex; flex-direction:column; gap:7px}
.tl-slot:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.tl-slot.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.tl-slot.last .tl-no::after{content:" ·"; color:var(--accent)}
.tl-top{display:flex; align-items:center; justify-content:space-between}
.tl-no{font-family:var(--serif); font-weight:440; font-size:13.5px}
.tl-dur{font-size:11px; color:var(--accent-deep); font-weight:600}
.tl-dots{display:flex; flex-wrap:wrap; gap:4px}
.tl-dot{width:11px; height:11px; border-radius:4px; background:var(--cream-2); border:1px solid var(--line-soft)}
.tl-dot.on{background:var(--accent); border-color:var(--accent-deep)}
.tl-foot{font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gray)}
.timeline-add{flex:0 0 auto; display:flex; flex-direction:column; gap:7px; justify-content:center; align-items:stretch;
  border-left:1px dashed var(--line); padding-left:12px}
.timeline-add .seg{width:100%}
.lock-note{font-size:12px; color:var(--accent-deep); background:var(--accent-soft); border:1px solid rgba(181,83,46,.25);
  border-radius:var(--radius-sm); padding:10px 12px; margin:4px 0 2px; line-height:1.5}
.dur-lbl{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--gray-2); font-weight:600}
.btn.disabled,.seg.disabled{opacity:.4; pointer-events:none}
.face-thumb{flex:0 0 auto; width:120px; cursor:pointer; border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden; background:var(--paper); transition:transform .3s var(--ease),box-shadow .3s,border-color .25s}
.face-thumb:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.face-thumb.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.face-thumb .thumb{width:100%; aspect-ratio:1/1; background:var(--cream-2); position:relative}
.face-thumb .thumb img,.face-thumb .thumb video{width:100%; height:100%; object-fit:cover}
.face-thumb .thumb .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:11px}
.face-thumb .meta{padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:4px}
.face-thumb .meta .nm{font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.face-thumb .meta .st{font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--gray)}
.face-thumb .meta .st.video{color:var(--accent-deep)}
.res-badge{position:absolute; top:6px; right:6px; display:inline-flex; align-items:center; gap:3px;
  background:rgba(11,11,12,.72); color:var(--cream); font-size:9px; font-weight:700; letter-spacing:.03em;
  padding:3px 6px; border-radius:7px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.res-badge .snd{color:var(--accent); font-size:10px; line-height:1}

/* ---------------- Auflösungs-/Toggle-Reihen (Inspector) ---------------- */
/* Dezente Sidebar-Navigation (Textlinks statt Buttons) + Unter-Kicker für Gruppen */
.side-nav{margin-bottom:4px}
.linklike{background:none; border:none; padding:4px 0; font-size:12px; font-weight:600; color:var(--gray-2);
  cursor:pointer; letter-spacing:.01em; transition:color .15s var(--ease)}
.linklike:hover{color:var(--ink)}
.kicker.sub{font-size:9px; color:var(--gray); margin-bottom:-2px}
.field-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.field-row .fr-label{font-size:12px; font-weight:600; color:var(--gray-2)}
.field-row .seg{flex:0 0 auto}
.toggle-row{display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--cream-2)}
.toggle-row .toggle-text{display:flex; flex-direction:column; line-height:1.25; flex:1 1 auto}
.toggle-row .tg-title{font-size:13px; font-weight:600; color:var(--ink)}
.toggle-row .tg-sub{font-size:10.5px; color:var(--gray-2)}
.toggle-row .cost{flex:0 0 auto; color:var(--accent-deep)}
.switch{position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; cursor:pointer}
.switch input{opacity:0; width:0; height:0; position:absolute}
.switch .slider{position:absolute; inset:0; border-radius:999px; background:var(--cream-3);
  border:1px solid var(--line-strong); transition:background .2s var(--ease)}
.switch .slider::before{content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; border-radius:50%; background:var(--paper); box-shadow:var(--shadow-sm); transition:left .2s var(--ease)}
.switch input:checked + .slider{background:var(--accent); border-color:var(--accent-deep)}
.switch input:checked + .slider::before{left:21px}
.switch input:focus-visible + .slider{outline:2px solid var(--accent); outline-offset:2px}

/* ---------------- Start-Overlay (leeres Projekt) ---------------- */
.start-overlay{position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
  padding:24px; padding-right:calc(var(--sidew, 424px) + 10px);
  background:radial-gradient(820px 520px at 50% 38%, rgba(244,240,231,.1), transparent 70%);
  transition:padding .5s var(--ease)}
.start-inner{width:min(760px,100%); text-align:center}
.start-inner .kicker{display:block; margin-bottom:12px; color:#D9805C}
.start-inner h2{color:var(--cream); font-size:clamp(24px,3vw,34px); margin-bottom:26px}
.start-inner h2 em{color:#D9805C}
.start-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.start-card{position:relative; text-align:left; cursor:pointer; border-radius:var(--radius);
  background:rgba(244,240,231,.94); backdrop-filter:blur(16px); border:1px solid var(--glass-line);
  padding:24px 24px 20px; transition:transform .35s var(--ease), box-shadow .35s; display:block}
.start-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.start-card .sc-num{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--accent)}
.start-card h3{margin:8px 0 8px}
.start-card p{font-size:12.5px; color:var(--gray-2); line-height:1.6; margin-bottom:14px}
.sc-go{font-size:12.5px; font-weight:600; color:var(--accent-deep)}
@media(max-width:760px){.start-cards{grid-template-columns:1fr}}

/* ---------------- Mediapool (Phase 01: Grid in der Stage-Mitte) ---------------- */
.pool-stage{position:absolute; inset:0; z-index:5; overflow-y:auto; background:var(--cream);
  padding:128px calc(var(--sidew, 424px) + 12px) 140px clamp(20px,4vw,48px);
  transition:padding .5s var(--ease)}
.pool-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  max-width:1080px; margin:0 auto 18px}
.pool-head .kicker{display:block; margin-bottom:6px}
.pool-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  max-width:1080px; margin:0 auto}
@media(max-width:900px){ .pool-grid{grid-template-columns:repeat(2,1fr)} }
/* Trenner im Mediapool: oben die als Setting genutzten Bilder, darunter die übrigen */
.mp-divider{grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin:8px 2px 2px;
  color:var(--gray); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:600}
.mp-divider::before,.mp-divider::after{content:""; flex:1; height:1px; background:var(--line-soft)}
.mp-divider span{flex:0 0 auto}
.mp-item{position:relative; aspect-ratio:2/1; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
  border:1px solid var(--line-soft); background:var(--cream-2); transition:transform .3s var(--ease), box-shadow .3s, border-color .25s}
.mp-item img{width:100%; height:100%; object-fit:cover}
.mp-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.mp-item.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.mp-item .mp-info{position:absolute; left:7px; bottom:7px; font-size:8.5px; letter-spacing:.08em; font-weight:600;
  text-transform:uppercase; color:var(--cream); background:rgba(11,11,12,.66); backdrop-filter:blur(6px);
  padding:3px 8px; border-radius:999px; pointer-events:none}
.mp-item .mp-qv{position:absolute; left:7px; top:7px; z-index:2; height:24px; padding:0 9px; border-radius:999px;
  border:none; background:rgba(11,11,12,.55); color:var(--cream); font-size:9.5px; font-weight:700;
  letter-spacing:.06em; line-height:1; cursor:pointer; font-family:inherit;
  backdrop-filter:blur(6px); opacity:0; transition:opacity .25s,background .2s}
.mp-item:hover .mp-qv{opacity:1}
.mp-item .mp-qv:hover{background:var(--accent)}
.mp-badge.sc{background:var(--ink); color:var(--cream)}
.mp-item .mp-use{position:absolute; right:7px; top:7px; font-size:10px; font-weight:600; color:var(--ink);
  background:rgba(244,240,231,.92); padding:4px 10px; border-radius:999px; opacity:0; transition:.25s; pointer-events:none}
.mp-item:hover .mp-use{opacity:1}

/* ---------------- Gabelung Tour | Animation ---------------- */
.fork-card{width:min(720px,100%)}
.fork-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.fork-opt{text-align:left; cursor:pointer; border-radius:var(--radius); border:1px solid var(--line-soft);
  background:var(--cream); padding:22px; transition:transform .3s var(--ease), box-shadow .3s, border-color .25s; font-family:inherit}
.fork-opt:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-sm)}
.fork-opt h3{margin:8px 0}
.fork-opt p{font-size:12.5px; color:var(--gray-2); line-height:1.6; margin-bottom:14px}
@media(max-width:640px){.fork-grid{grid-template-columns:1fr}}

/* ---------------- Tour: Setting-Kärtchen ---------------- */
.t-card{background:var(--paper); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden}
.setting-card{display:flex; margin:8px 0 4px; box-shadow:var(--shadow-sm)}
.setting-card .sc-thumb{flex:0 0 92px; background:var(--cream-2)}
.setting-card .sc-thumb img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.setting-card .sc-body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:9px; padding:11px 13px}
.setting-card .sc-name{font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.setting-card .sc-actions{display:flex; flex-wrap:wrap; gap:6px}
.chipx{background:var(--cream-2); border:1px solid var(--line-soft); color:var(--gray-2); border-radius:999px;
  padding:5px 11px; font-size:11px; font-weight:600; cursor:pointer; transition:.2s}
.chipx:hover{color:var(--ink); border-color:var(--accent); background:var(--paper)}
.chipx.danger{color:var(--err)}
.chipx.danger:hover{border-color:var(--err); background:rgba(163,45,45,.05)}

/* ---------------- Tour: Themen-Rahmen (Infopunkt · Reisepunkt · Traumfenster · Erzähler) ---------------- */
.t-frame{margin-top:14px; border:1px solid var(--line-soft); border-radius:16px; padding:13px 13px 14px;
  background:var(--paper); box-shadow:0 1px 2px rgba(11,11,12,.03)}
.t-frame-h{display:flex; align-items:center; gap:8px; margin:0 1px 10px}
.t-sec-h{display:flex; align-items:center; gap:8px; margin:0 2px 9px}
.t-sec-ic{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px;
  font-size:12px; background:var(--cream-2); color:var(--gray-2); flex:0 0 auto}
.t-sec-ic.info,.t-sec-ic.tvo{background:rgba(181,83,46,.12); color:var(--accent-deep)}
.t-sec-ic.portal{background:var(--ink); color:var(--cream)}
.t-sec-ic.dream{background:rgba(11,11,12,.06); color:var(--ink)}
.t-sec-t{flex:1; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink)}
.t-sec-n{min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--cream-2); border:1px solid var(--line-soft); color:var(--gray-2); font-size:10px; font-weight:700}
.t-sec-n:empty{display:none}
.t-sec .co-hint{margin:2px 2px 10px; line-height:1.45}
.t-frame .co-hint{margin:0 1px 10px; line-height:1.45}
.t-frame .co-cards:not(:empty){margin-bottom:11px}
/* einheitliche schwarze Buttons zum Erstellen (Infopunkt/Reisepunkt/Traumfenster/Erzähler) */
.t-add{display:block; width:100%; padding:11px 14px; border:0; border-radius:10px; background:var(--ink); color:var(--cream);
  font:inherit; font-size:13px; font-weight:600; letter-spacing:.01em; cursor:pointer; text-align:center; transition:background .2s, transform .08s}
.t-add:hover{background:#000}
.t-add:active{transform:translateY(1px)}

/* ---------------- Tour: Punkt-Kärtchen (Einstellungen IM Kärtchen) ---------------- */
.co-cards{display:flex; flex-direction:column; gap:9px; margin-bottom:10px}
.co-cards:empty{display:none}
.co-item{background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; overflow:visible; transition:border-color .2s, box-shadow .2s}
.co-item:hover{box-shadow:var(--shadow-sm)}
.co-item.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.co-item .ci-head{display:flex; align-items:center; gap:11px; padding:11px 13px; cursor:pointer}
.co-item .ci-dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto}
.co-item .ci-t{flex:1; min-width:0}
.co-item .ci-t b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co-item .ci-t span{font-size:11px; color:var(--gray-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.co-item .ci-media{font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-deep)}
.co-item .ci-x{flex:0 0 auto; color:var(--gray); font-size:11px}
.co-item.active .ci-x{color:var(--accent)}
.co-item>.co-form{margin:0; padding:12px 13px 14px; border-top:1px solid var(--line-soft); background:var(--cream-2);
  border-radius:0 0 11px 11px; animation:coBodyIn .22s var(--ease,ease) both}
.co-item>.co-form .kicker.mt{display:none}
@keyframes coBodyIn{from{opacity:0} to{opacity:1}}
.co-form{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft)}
.co-form .kicker.mt{margin-top:2px}
.t-inner-form{margin-top:10px; padding:12px; border:1px solid var(--line-soft); border-radius:12px; background:var(--cream-2)}
.file-btn{justify-content:center; margin-top:8px; font-weight:500}
.upload-side{justify-content:center; cursor:pointer}
.co-media-state{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px;
  color:var(--gray-2); background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:9px 12px}
.co-media-state span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btn.danger{color:var(--err); border-color:rgba(163,45,45,.3)}
.btn.danger:hover{background:rgba(163,45,45,.06); border-color:var(--err)}
.pubbox #pub-status{margin-top:0}
.copy-row{display:flex; gap:8px; margin-top:8px; align-items:stretch}
.copy-row input,.copy-row textarea{flex:1; min-width:0; font-size:12px; font-family:ui-monospace,monospace}
.copy-row .btn{flex:0 0 auto; min-width:104px; display:inline-flex; align-items:center; justify-content:center}
.copy-row:has(textarea) .btn{align-self:flex-start}
/* „Tour ist online“-Modal: gleichmäßige Abstände, gleich große Aktionen */
#publish-modal .field{margin-top:16px; display:block}
#publish-modal #pub-open{margin-top:18px; justify-content:center}
#publish-modal .copy-row textarea{line-height:1.55; resize:none}
.tip.small{font-size:10.5px; padding:9px 11px}

/* Callout-Marker im Studio-Viewer — vollständige Infokarte wie im Viewer der Besucher */
.co-layer-st{position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden}
.co-mark{position:absolute; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer}
.co-mark .cm-dot{width:18px; height:18px; border-radius:50%; background:rgba(244,240,231,.25); backdrop-filter:blur(4px);
  border:1.5px solid var(--cream); position:relative; transition:transform .25s; margin:0 auto}
.co-mark .cm-dot::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--accent)}
.co-mark:hover .cm-dot{transform:scale(1.2)}
.co-mark.active .cm-dot{box-shadow:0 0 0 4px rgba(181,83,46,.35), 0 0 18px rgba(181,83,46,.6)}
.co-mark .cm-card{position:absolute; left:50%; bottom:28px; transform:translateX(-50%) translateY(6px); width:248px;
  background:rgba(11,11,12,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(244,240,231,.22); border-radius:16px; padding:14px 15px; text-align:left;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease)}
.co-mark.open .cm-card{opacity:1; transform:translateX(-50%) translateY(0)}
.co-mark .cm-card h4{font-family:var(--serif); font-weight:440; font-size:15.5px; line-height:1.25; color:var(--cream); margin:0 0 5px}
.co-mark .cm-card p{font-size:11.5px; line-height:1.5; color:rgba(244,240,231,.78); margin:0}
.co-mark .cm-media{margin-top:9px; border-radius:9px; overflow:hidden; border:1px solid rgba(244,240,231,.15)}
.co-mark .cm-media img,.co-mark .cm-media video{display:block; width:100%; max-height:120px; object-fit:cover}
.place-hint{position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:9;
  background:var(--ink); color:var(--cream); font-size:12px; font-weight:500; padding:10px 18px; border-radius:999px; box-shadow:var(--shadow)}
.stage.placing #viewer{cursor:crosshair}

/* ---------------- Timeline v2: Spuren + Drill-in ---------------- */
.lane-head{display:flex; align-items:center; gap:12px; padding:10px 18px 8px}
.lane-spacer{flex:1}
.lane{display:flex; align-items:center; gap:10px; padding:0 18px 8px}
.lane-tag{flex:0 0 44px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gray)}
.lane-track{position:relative; flex:1; display:flex; gap:6px; align-items:center; min-height:38px;
  background:var(--cream-2); border:1px solid var(--line-soft); border-radius:10px; padding:4px 6px; overflow-x:auto}
.lane-track.audio{display:block}
.tl-chip{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:8px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line-soft); transition:.2s; white-space:nowrap}
.tl-chip:hover{box-shadow:var(--shadow-sm)}
.tl-chip.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.tl-chip .tc-no{font-family:var(--serif); font-weight:440; font-size:12.5px}
.tl-chip .tc-dur{font-size:10.5px; color:var(--accent-deep); font-weight:600}
.tl-chip .tc-dots{display:flex; gap:3px}
.tl-chip .tc-dot{width:7px; height:7px; border-radius:3px; background:var(--cream-2); border:1px solid var(--line-soft)}
.tl-chip .tc-dot.on{background:var(--accent); border-color:var(--accent-deep)}
/* „Stale": Startbild einer animierten Fläche hat sich durch eine frühere Slot-Änderung verändert */
.tl-chip .tc-dot.stale{background:#E0A040; border-color:#B5772A; animation:stalePulse 1.6s ease-in-out infinite}
.tl-chip.stale{border-color:#E0A040}
.face-thumb.stale{border-color:#E0A040; box-shadow:0 0 0 1px #E0A040}
.face-thumb .thumb .stale-flag{position:absolute; bottom:6px; left:6px; width:18px; height:18px; display:flex;
  align-items:center; justify-content:center; background:#E0A040; color:#fff; border-radius:50%; font-size:11px; line-height:1; box-shadow:var(--shadow-sm)}
@keyframes stalePulse{0%,100%{opacity:1}50%{opacity:.5}}
.tl-chip .tc-open{font-size:10px; color:var(--gray); font-weight:600}
.tl-chip.last .tc-no::after{content:" ·"; color:var(--accent)}
/* Löschen nur am letzten Slot, direkt im Chip — mit Warn-Dialog */
.tl-chip .tc-del{flex:0 0 auto; width:18px; height:18px; margin-left:2px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--gray); font-size:12px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s var(--ease)}
.tl-chip .tc-del:hover{border-color:#B3402A; color:#B3402A; background:rgba(179,64,42,.08)}
.vo-add{position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:2;
  background:var(--paper); border:1px dashed var(--line); color:var(--gray-2); border-radius:8px;
  padding:5px 11px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:.2s}
.vo-add:hover{color:var(--accent-deep); border-color:var(--accent)}
.vo-chip{position:absolute; top:4px; bottom:4px; min-width:64px; max-width:72%; display:flex; align-items:center; gap:6px;
  background:rgba(181,83,46,.12); border:1px solid rgba(181,83,46,.4); border-radius:8px; padding:0 9px;
  font-size:10.5px; font-weight:600; color:var(--accent-deep); cursor:grab; overflow:hidden; white-space:nowrap;
  touch-action:none; user-select:none; transition:box-shadow .15s var(--ease)}
.vo-chip:hover{background:rgba(181,83,46,.2)}
.vo-chip .vt{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.vo-chip .vo-time{flex:0 0 auto; margin-left:6px; font-size:9px; font-weight:700; color:var(--accent); opacity:.85; white-space:nowrap}
.vo-chip.dragging{cursor:grabbing; z-index:4; box-shadow:0 8px 22px -8px rgba(11,11,12,.4); background:rgba(181,83,46,.26)}
.vo-tick{position:absolute; top:3px; bottom:3px; width:1px; background:var(--line); opacity:.7; pointer-events:none}

/* ---------------- KI-Buttons + Prompt-Assistent ---------------- */
.ki-btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-deep);
  border-radius:12px; padding:8px 12px; font-size:12px; font-weight:600; font-family:inherit; white-space:nowrap; transition:.18s var(--ease)}
.ki-btn:hover{background:rgba(181,83,46,.18)}
.ki-btn.ghost-ki{display:flex; width:100%; justify-content:center; background:rgba(181,83,46,.07); margin-top:8px}
.ki-btn.hidden{display:none}

.assist-panel{position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center;
  padding:0 0 92px; pointer-events:none}
.assist-panel:not(.hidden){pointer-events:auto}
.assist-card{width:min(460px,calc(100% - 32px)); max-height:74vh; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  overflow:hidden; animation:assist-in .25s var(--ease)}
@keyframes assist-in{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.assist-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.assist-title{font-family:var(--serif); font-weight:440; font-size:16px; color:var(--ink)}
.assist-x{background:none; border:none; font-size:22px; line-height:1; color:var(--gray); cursor:pointer; font-family:inherit}
.assist-x:hover{color:var(--ink)}
.assist-msgs{flex:1 1 auto; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:9px; min-height:120px}
.am{max-width:88%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; white-space:pre-wrap}
.am.bot{align-self:flex-start; background:var(--cream-2); color:var(--ink); border-bottom-left-radius:5px}
.am.me{align-self:flex-end; background:var(--accent); color:var(--cream); border-bottom-right-radius:5px}
.assist-ready{padding:0 18px 6px}
.assist-ready .ar-label{font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:6px}
.assist-ready .ar-prompt{font-size:12.5px; line-height:1.55; color:var(--ink); background:var(--cream-2);
  border:1px solid var(--line-soft); border-radius:12px; padding:11px 13px; max-height:140px; overflow-y:auto; margin-bottom:10px}
.assist-input-row{display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--line-soft)}
.assist-input-row textarea{flex:1 1 auto; resize:none; max-height:120px}
.assist-foot{display:flex; align-items:center; gap:12px; padding:0 18px 14px}
.assist-foot .status{margin:0}

/* ---------------- Inline-Chat (KI fest in allen Bereichen) ----------------
   Eine Eingabezeile: Textfeld + Senden + Aktions-Button füllen die volle Breite.
   Der Nachrichten-Bereich erscheint erst, wenn es Nachrichten gibt (ein einziger Scrollbereich). */
.mini-chat{display:flex; flex-direction:column; gap:10px; min-width:0; width:100%}
.gen-chat{flex:1 1 auto}
.field-label{display:block; font-size:12px; font-weight:600; color:var(--gray-2); margin-bottom:8px}
.mc-msgs{display:flex; flex-direction:column; gap:7px; max-height:220px; overflow-y:auto; padding:2px 4px 2px 2px;
  scrollbar-width:thin; scrollbar-color:rgba(11,11,12,.22) transparent}
.mc-msgs::-webkit-scrollbar{width:6px}
.mc-msgs::-webkit-scrollbar-thumb{background:rgba(11,11,12,.22); border-radius:3px}
.mc-msgs::-webkit-scrollbar-track{background:transparent}
.mc-msgs:empty,.mc-msgs.empty{display:none}
.mc-m{max-width:88%; padding:8px 12px; border-radius:13px; font-size:12.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word}
.mc-m.bot{align-self:flex-start; background:var(--cream-2); color:var(--ink); border-bottom-left-radius:5px}
.mc-m.me{align-self:flex-end; background:var(--ink); color:var(--cream); border-bottom-right-radius:5px}
.mc-typing{display:inline-flex; gap:4px; align-items:center}
.mc-typing span{width:6px; height:6px; border-radius:50%; background:var(--gray); animation:mc-blink 1.2s infinite}
.mc-typing span:nth-child(2){animation-delay:.2s} .mc-typing span:nth-child(3){animation-delay:.4s}
@keyframes mc-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.mc-ready{align-self:stretch; margin-top:2px; border:1px solid rgba(181,83,46,.35); background:rgba(181,83,46,.07); border-radius:12px; padding:9px 11px}
.mc-ready-l{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--accent-deep); margin-bottom:5px}
.mc-ready-p{font-size:11.5px; line-height:1.5; color:var(--ink); cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.mc-ready-p.open{display:block; -webkit-line-clamp:unset; overflow:visible}
.mc-row{display:flex; gap:9px; align-items:stretch}
.mc-row textarea{flex:1 1 auto; resize:none; min-height:48px; height:48px; max-height:120px; overflow-y:hidden;
  padding:13px 15px; border-radius:14px; background:rgba(255,255,255,.85); line-height:1.45}
.mc-row .btn{flex:0 0 auto; white-space:nowrap; min-height:48px; border-radius:14px; align-self:flex-end}
.mc-send{flex:0 0 auto; width:48px; min-height:48px; align-self:flex-end; background:var(--ink); color:var(--cream);
  border:none; border-radius:14px; font-size:15px; cursor:pointer; transition:.15s var(--ease);
  display:inline-flex; align-items:center; justify-content:center}
.mc-send:hover{background:var(--accent); color:var(--cream); transform:translateY(-1px)}

/* ---------------- Upscaling (Phase 03) ---------------- */
.field-col{display:flex; flex-direction:column; gap:6px}
.field-col .fr-label{font-size:12px; font-weight:600; color:var(--gray-2)}
.up-text{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); color:var(--ink); font-family:inherit; font-size:13px}
.up-select{width:100%; padding:9px 30px 9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%238C887E' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center}
.up-select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.up-hint{font-size:11px; color:var(--gray-2); margin:-3px 0 0}
.up-saved{padding-top:10px; margin-top:4px; border-top:1px solid var(--line)}
/* Gespeicherte Upscalings — Kärtchen mit Thumbnail (Stil wie Tour-Sidebar) */
.upv-cards{display:flex; flex-direction:column; gap:8px}
.upv-card{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:8px; background:var(--surface,#fff); border:1px solid var(--line);
  border-radius:13px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .05s}
.upv-card:hover{border-color:var(--line-strong); box-shadow:0 3px 12px rgba(11,11,12,.07)}
.upv-card:active{transform:translateY(1px)}
.upv-card.active{border-color:var(--accent,#c17649); box-shadow:0 0 0 1px var(--accent,#c17649) inset}
.upv-th{flex:0 0 auto; width:58px; height:42px; border-radius:9px; overflow:hidden;
  background:var(--line-soft)}
.upv-th img{width:100%; height:100%; object-fit:cover; display:block}
.upv-meta{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.upv-title{font-size:13.5px; font-weight:600; color:var(--ink); display:flex; align-items:center;
  gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.upv-sub{font-size:11.5px; color:var(--gray-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.upv-badge{flex:0 0 auto; padding:1px 8px; border-radius:999px; font-size:10.5px; font-weight:600;
  background:rgba(40,140,90,.14); color:#2c7a52}
.upv-go{flex:0 0 auto; color:var(--gray-2); font-size:18px; line-height:1; padding-right:2px}
/* Upscaling-Version · Detail-Modal */
.upvar-card{max-width:460px}
.upvar-body{display:flex; flex-direction:column; gap:2px; margin:2px 0 14px}
.uv-hero{width:100%; aspect-ratio:2/1; border-radius:12px; overflow:hidden; margin-bottom:12px;
  background:var(--line-soft)}
.uv-hero img{width:100%; height:100%; object-fit:cover; display:block}
.uv-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 2px; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.uv-k{color:var(--gray-2); flex:0 0 auto}
.uv-v{color:var(--ink); text-align:right; font-weight:560}
.uv-tag{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px;
  font-size:11px; font-weight:600; vertical-align:middle}
.uv-tag.gen{background:rgba(193,118,73,.14); color:#9a5a32}
.uv-tag.treu{background:rgba(11,11,12,.07); color:var(--gray-1)}
.uv-tag.active{background:rgba(40,140,90,.14); color:#2c7a52}
.uv-desc{margin:10px 2px 0; font-size:12.5px; color:var(--gray-2); line-height:1.5}
.uv-sec{margin:16px 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-2)}
.uv-params{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.uv-p{display:flex; flex-direction:column; gap:2px; padding:8px 10px;
  background:var(--line-soft); border-radius:10px}
.uv-pk{font-size:11px; color:var(--gray-2)}
.uv-pv{font-size:14px; font-weight:600; color:var(--ink)}
.uv-none{margin:0; font-size:12.5px; color:var(--gray-2)}
.up-mcards{display:flex; flex-direction:column; gap:7px}
.up-mcard{text-align:left; display:flex; flex-direction:column; gap:4px; padding:11px 13px; cursor:pointer; width:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); transition:.15s var(--ease); font-family:inherit}
.up-mcard:hover{border-color:var(--line-strong)}
.up-mcard.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent); background:var(--accent-soft)}
.up-mcard .mc-name{font-size:13px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px}
.up-mcard .mc-tag{font-size:8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); padding:2px 6px; border-radius:6px}
.up-mcard .mc-desc{font-size:11px; line-height:1.45; color:var(--gray-2); font-weight:400}
.up-mcard .mc-tag.treu{color:#2f6f4f; background:rgba(47,111,79,.12)}
.up-mcard .mc-tag.gen{color:var(--accent-deep); background:var(--accent-soft)}
/* Schärfen-Panel im Animationsbereich (aufklappbar) */
.sharpen-panel{margin-top:12px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--paper)}
.sharpen-panel>summary{cursor:pointer; padding:11px 13px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); list-style:none}
.sharpen-panel>summary::-webkit-details-marker{display:none}
.sharpen-panel>summary::after{content:"▾"; float:right; transition:transform .2s}
.sharpen-panel[open]>summary::after{transform:rotate(180deg)}
.sharpen-panel>.stack{padding:0 13px 13px}
/* ===== Verlauf: ⟲-Knopf am Face-Bild + ausfahrendes Popover ===== */
.face-thumb .thumb .hist-btn{position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; gap:3px;
  font-size:9px; font-weight:700; color:var(--cream); background:rgba(11,11,12,.72); border:0; border-radius:7px;
  padding:3px 6px; cursor:pointer; line-height:1; letter-spacing:.03em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s,transform .15s}
.face-thumb .thumb .hist-btn b{font-size:10px}
.face-thumb .thumb .hist-btn:hover{background:var(--accent)}
.face-thumb .thumb .hist-btn.on{background:var(--accent); transform:scale(1.06)}
.hist-pop{position:fixed; z-index:120; background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-lg,0 18px 50px rgba(11,11,12,.22)); padding:12px; max-width:96vw}
.hist-pop.hidden{display:none}
.hist-pop .hp-head{font-size:12px; color:var(--gray-2); margin-bottom:9px; display:flex; align-items:center; gap:8px}
.hist-pop .hp-head b{color:var(--ink)}
.hist-pop .hp-hint{margin-left:auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep)}
.hist-pop .hp-row{display:flex; gap:9px; overflow-x:auto; padding-bottom:4px}
.hist-chip{position:relative; flex:0 0 auto; width:104px; display:flex; flex-direction:column; gap:5px; padding:7px; cursor:pointer;
  background:var(--cream-2); border:1.5px solid var(--line-soft); border-radius:var(--radius-sm); text-align:left;
  transition:border-color .2s,transform .2s,box-shadow .2s; transform-origin:bottom center;
  animation:histPop .28s var(--ease) both; animation-delay:calc(var(--i,1)*28ms)}
@keyframes histPop{from{opacity:0; transform:translateY(8px) scale(.94)}to{opacity:1; transform:none}}
.hist-chip:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.hist-chip.current{border-color:var(--accent); background:var(--accent-soft)}
.hist-chip .hc-no{position:absolute; z-index:2; top:4px; left:4px; width:20px; height:20px; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; background:var(--ink);
  border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hist-chip.current .hc-no{background:var(--accent)}
.hist-chip .hc-thumb{position:relative; width:100%; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:var(--cream)}
.hist-chip .hc-thumb img{width:100%; height:100%; object-fit:cover}
.hist-chip .hc-thumb .ph{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--gray); font-size:11px}
.hist-chip .hc-play{position:absolute; left:4px; bottom:4px; font-size:9px; color:#fff; background:rgba(11,11,12,.7); border-radius:3px; padding:0 4px; line-height:1.5}
.hist-chip .hc-cur{position:absolute; right:4px; top:4px; width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; background:var(--accent); border-radius:50%}
.hist-chip .hc-lab{display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--ink);
  text-align:left; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hist-chip .hc-ts{font-size:10px; color:var(--gray); text-align:left; line-height:1.2}
/* „Kette unterbrochen"-Hinweis + Filmstrip-Tipp */
.chain-break{display:flex; align-items:center; gap:10px; margin:8px 0 2px; padding:10px 12px; line-height:1.45;
  font-size:12px; color:#8a5a12; background:#fff6e6; border:1px solid #e7c98a; border-radius:var(--radius-sm)}
.chain-break .cb-ico{font-size:16px}
.chain-break .cb-x{margin-left:auto; border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:#8a5a12}
.filmstrip-hint{font-size:11px; color:var(--gray); margin:6px 0 4px}
/* 05 Premium Upscaling */
#prem-faces{display:flex; flex-direction:column; gap:8px}
.prem-face{display:flex; flex-direction:column; gap:6px; padding:8px; border:1.5px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--paper); transition:border-color .2s,box-shadow .2s,background .2s}
.prem-face.sel{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft)}
.prem-face .thumb{position:relative; width:100%; aspect-ratio:2/1; border-radius:6px; overflow:hidden; background:var(--cream-2); cursor:pointer}
.prem-face .thumb video{width:100%; height:100%; object-fit:cover}
.prem-face .pf-check{position:absolute; top:6px; left:6px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(11,11,12,.45); color:#fff; font-size:12px}
.prem-face.sel .pf-check{background:var(--accent)}
.prem-face .up-badge{position:absolute; top:6px; right:6px; font-size:9px; font-weight:700; color:#fff; background:rgba(11,11,12,.7); border-radius:6px; padding:1px 6px}
.prem-face .pf-meta{display:flex; align-items:center; justify-content:space-between; font-size:12px}
.prem-face .pf-meta .nm{font-weight:600}
.prem-face .pf-meta .pf-cost{color:var(--accent-deep); font-weight:600}
.prem-face .pf-actions{display:flex; gap:6px}
.prem-face .pf-actions .btn{flex:1}
.seg button.disabled{opacity:.35; pointer-events:none}
.prail-prem b{color:var(--accent-deep)}
/* 05 Premium hängt am Animations-Zweig: gleiche Zeile wie 04 Animation */
.rail-anim-row{display:flex; align-items:center; gap:8px}
.up-params{display:flex; flex-direction:column; gap:11px; margin:4px 0; padding:12px; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm)}
.up-p{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--gray-2); font-weight:600}
.up-p.col{flex-direction:column; align-items:stretch; gap:5px}
.up-p.chk{justify-content:flex-start; gap:8px; cursor:pointer}
.up-p input[type=range]{width:100%}
.up-p .pv{color:var(--accent-deep); font-weight:700}
.up-faces{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; margin:4px 0}
.up-face{cursor:pointer; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); transition:.15s var(--ease)}
.up-face:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.up-face.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.up-face .thumb{position:relative; width:100%; aspect-ratio:1/1; background:var(--cream-2)}
.up-face .thumb img{width:100%; height:100%; object-fit:cover}
.up-face .up-badge{position:absolute; top:5px; right:5px; background:var(--accent); color:var(--cream); font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px}
.up-face .up-nm{display:block; padding:5px 7px; font-size:10px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vo-chip .vx{margin-left:auto; background:none; border:none; cursor:pointer; color:var(--accent-deep); font-size:13px; line-height:1; padding:0}
.vo-chip .vp{background:none; border:none; cursor:pointer; color:var(--accent-deep); font-size:11px; padding:0}
.tl-detail-label{font-family:var(--serif); font-weight:440; font-size:14px}
#tl-overview,#tl-detail{min-width:0}

/* ---------------- Modal ---------------- */
.modal{position:fixed; inset:0; background:rgba(11,11,12,.45); backdrop-filter:blur(8px); z-index:90; display:flex; align-items:center; justify-content:center; padding:20px}
/* Bestätigungs-Modal IMMER über anderen Modals (Asset-/Quickview-/Publish-Modal usw.) */
#confirm-modal{z-index:140}
.modal-card{width:min(460px,100%); background:var(--paper); border:1px solid var(--line-soft); border-radius:24px; padding:32px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.modal-x{background:none; border:none; color:var(--gray); font-size:26px; cursor:pointer; line-height:1}
.modal-x:hover{color:var(--ink)}
/* Publish-Modal: QR-Block */
.pub-qr{display:flex; gap:16px; align-items:center; margin:16px 0 18px; padding:16px;
  background:var(--cream); border:1px solid var(--line-soft); border-radius:16px}
.pub-qr-box{flex:0 0 auto; width:118px; height:118px; background:#fff; border:1px solid var(--line-soft);
  border-radius:12px; padding:8px; display:flex; align-items:center; justify-content:center}
.pub-qr-box img{width:100%; height:100%; display:block}
.pub-qr-side{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px}
.pub-qr-dl{display:flex; gap:8px; margin-top:2px}
.pub-actions{display:flex; gap:8px; margin-top:4px}
.pub-actions .btn{flex:1 1 auto; text-align:center}
/* Statistik-Modal */
.stats-card{width:min(620px,100%)}
.stats-body{display:flex; flex-direction:column; gap:14px; margin-top:14px}
.scard{border:1px solid var(--line-soft); border-radius:16px; padding:16px; background:var(--paper)}
.scard-top{display:flex; gap:14px; align-items:center}
.scard-qr{flex:0 0 auto; width:62px; height:62px; background:#fff; border:1px solid var(--line-soft);
  border-radius:10px; padding:5px}
.scard-qr img{width:100%; height:100%; display:block}
.scard-meta{flex:1 1 auto; min-width:0}
.scard-meta h3{font-size:15px; margin:0 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.scard-nums{display:flex; flex-wrap:wrap; gap:8px 18px}
.snum{display:flex; flex-direction:column; line-height:1.1}
.snum b{font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums}
.snum span{font-size:10.5px; color:var(--gray-2); text-transform:uppercase; letter-spacing:.05em}
.snum.scan b{color:var(--accent-deep)}
.snum.rate b{color:#2c7a52}
.sbars{display:flex; align-items:flex-end; gap:3px; height:46px; margin:14px 0 4px;
  padding:6px 2px 0; border-top:1px solid var(--line-soft)}
.sbar{flex:1 1 0; height:100%; display:flex; align-items:flex-end}
.sbar-fill{position:relative; width:100%; min-height:2px; background:var(--cream-3); border-radius:3px 3px 0 0}
.sbar-scan{position:absolute; left:0; right:0; bottom:0; background:var(--accent); border-radius:0 0 3px 3px}
.scard-foot{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px}
.packs{display:flex; flex-direction:column; gap:11px; margin:18px 0}
.pack{display:flex; align-items:center; justify-content:space-between; padding:17px 19px; background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--radius); transition:.25s}
.pack:hover{border-color:var(--accent); box-shadow:var(--shadow-sm)}
.pack .info h4{font-family:var(--serif); font-weight:440; font-size:17px}
.pack .info span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gray)}
.pack .price{font-family:var(--serif); font-weight:440; font-size:19px; color:var(--ink); margin-right:12px}

.toast{position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:150; background:var(--ink); border:1px solid var(--ink); color:var(--cream); padding:12px 22px; border-radius:999px; font-size:13px; box-shadow:var(--shadow)}
.toast.err{background:#3A1410; border-color:#3A1410; color:#F6C9BB} .toast.ok{background:#15240B; border-color:#15240B; color:#D3E8BE}

@media(max-width:1000px){
  :root{--sidew:0px}
  .editor{--sidew:0px}   /* überschreibt die Desktop-Definition der Collapse-Logik */
  .tab-side,.ph-handle,.tab-bottom,.tab-prompt{display:none}
  .editor.p-side-off .side,.editor.p-tl-off #anim-bottom,.editor.p-prompt-off .genbar{transform:none; pointer-events:auto}
  .side{left:10px; right:10px; top:auto; bottom:10px; width:auto; max-height:46vh}
  #anim-bottom{left:10px; right:10px; bottom:calc(46vh + 20px)}
  .genbar{left:50%; width:min(760px,calc(100% - 24px)); bottom:calc(46vh + 20px)}
  .pool-stage{padding:80px clamp(16px,4vw,32px) calc(46vh + 30px)}
  .wizard{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .acct-email{display:none} .wizard{grid-template-columns:1fr} .phase-rail .prail{padding:8px 11px} .home{padding:40px 22px} }

/* ---------------- Job-Panel: bereichsübergreifende Aufgabenliste ---------------- */
/* unten in der Sidebar verankert UND beim Scrollen immer sichtbar (sticky am unteren Rand) */
.job-panel{flex:0 0 auto; position:sticky; bottom:0; z-index:6; margin:14px 0 0; padding:10px 12px;
  border-radius:var(--radius-sm); background:var(--paper); border:1px solid var(--line-soft);
  box-shadow:0 -10px 26px rgba(11,11,12,.10); display:flex; flex-direction:column; gap:8px}
.job-row{display:flex; flex-direction:column; gap:4px}
.job-top{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:var(--ink)}
.job-top .jp-pct{margin-left:auto; font-weight:600; color:var(--accent-deep); font-size:11px; white-space:nowrap}
.job-top .jp-ok{color:var(--ok)} .job-top .jp-err{color:var(--err)}
.job-stage{font-size:10.5px; color:var(--gray-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.job-bar{height:4px; border-radius:3px; background:var(--cream-2); overflow:hidden}
.job-bar i{display:block; height:100%; background:var(--accent); border-radius:3px;
  transition:width .6s var(--ease)}
.job-row.done .job-bar i{background:var(--ok)}
.job-row.err .job-bar i{background:var(--err)}

/* ---------------- Einklappbare Panels: Sidebar / Timeline / Promptleiste ---------------- */
.editor{--sidew:424px}
.editor.p-side-off{--sidew:34px}
.editor.p-side-off .side{transform:translateX(calc(100% + 22px))}
.editor.p-tl-off #anim-bottom,.editor.p-tl-off #tour-bottom{transform:translateY(calc(100% + 28px)); pointer-events:none}
.editor.p-prompt-off .genbar{transform:translate(-50%,calc(100% + 70px)); opacity:0; pointer-events:none}
/* Griff oben am Panel (Timeline + Promptleisten) */
.ph-handle{position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:3; width:44px; height:18px;
  border-radius:999px; background:var(--cream);
  border:1px solid var(--line-soft); box-shadow:0 2px 6px rgba(11,11,12,.08); color:var(--gray-2);
  font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .2s, transform .2s}
.ph-handle .pt-ch{font-size:11px; color:var(--accent-deep); transition:transform .45s var(--ease)}
.ph-handle:hover{color:var(--accent-deep); transform:translateX(-50%) translateY(-2px)}
/* Promptleisten-Griff filigraner als der Timeline-Griff */
.ph-handle.ph-prompt{width:40px; height:17px; top:-12px; font-size:10px; box-shadow:0 2px 6px rgba(11,11,12,.08)}
.ph-handle.ph-prompt:hover{transform:translateX(-50%) translateY(-1px)}
/* Timeline-Panel liegt left:14px/right:sidew -> sein Mittelpunkt ist 7px (halber 14px-Versatz)
   rechts der zentrierten Promptleiste. Den Timeline-Griff um diese 7px nach links holen,
   damit er exakt unter dem Prompt-Griff / „✦ Prompt"-Tab sitzt. */
#ph-tl, #ph-tour{left:calc(50% - 7px)}
/* Tabs zum Ein-/Ausklappen bzw. Wiederherstellen */
.panel-tab{position:absolute; z-index:11; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--cream);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-sm); color:var(--ink); cursor:pointer;
  font-size:12.5px; font-weight:600; transition:right .5s var(--ease), left .5s var(--ease), bottom .5s var(--ease), color .2s, opacity .3s}
.panel-tab:hover{color:var(--accent-deep)}
.panel-tab .pt-ch{font-size:12px; color:var(--accent-deep)}
/* Sidebar-Griff im filigranen Stil der Promptleisten-Griffe (.ph-prompt):
   schlankes, voll abgerundetes Pill, weicher Schatten, Akzent-Pfeil. */
/* Sidebar-Kante: .side liegt right:14px, width:396px -> linke Kante = sidew-14px.
   Zum mittigen Aufsitzen (50:50) zusätzlich die halbe Buttonbreite (9px) abziehen. */
.tab-side{top:50%; transform:translateY(-50%); right:calc(var(--sidew, 424px) - 23px); width:18px; height:44px;
  border-radius:999px; padding:0; background:var(--cream); border:1px solid var(--line-soft);
  box-shadow:0 2px 6px rgba(11,11,12,.08)}
.tab-side .pt-ch{font-size:11px; color:var(--gray-2); transition:transform .45s var(--ease), color .2s}
.tab-side:hover{transform:translateY(-50%) translateX(-2px); box-shadow:0 4px 11px rgba(11,11,12,.12)}
.tab-side:hover .pt-ch{color:var(--accent-deep)}
.tab-side.off .pt-ch{transform:rotate(180deg)}
.tab-bottom{left:calc((100% - var(--sidew, 424px)) / 2); transform:translateX(-50%); bottom:14px; border-radius:999px; padding:9px 16px}
.tab-prompt{left:calc((100% - var(--sidew, 424px)) / 2); transform:translateX(-50%); bottom:14px; border-radius:999px; padding:9px 16px}
/* Expand-Tabs sanft ein-/ausblenden statt hartem display:none (gleicht das Springen aus) */
.panel-tab.hidden{display:inline-flex; opacity:0; pointer-events:none}
.cinema .panel-tab{opacity:0; pointer-events:none}

/* ---------------- Reset-Warnpanel (Upscaling des Gesamtbildes) ---------------- */
.reset-card{max-width:440px}
.reset-ico{color:var(--accent); margin-bottom:6px}
.reset-title{font-family:var(--serif); font-weight:440; font-size:25px; margin:0 0 8px}
.reset-sub{font-size:13px; color:var(--gray-2); line-height:1.65; margin:0 0 12px}
.reset-list{list-style:disc; margin:0 0 14px; padding:13px 16px 13px 34px; background:var(--accent-soft);
  border:1px solid rgba(181,83,46,.28); border-radius:var(--radius-sm); font-size:13px; line-height:2; color:var(--ink)}
.reset-list b{color:var(--accent-deep)}
.reset-note{font-size:11.5px; color:var(--gray-2); line-height:1.6; margin:0 0 18px}
.reset-actions{display:flex; gap:10px; justify-content:flex-end}
#cm-text b{color:var(--accent-deep)}

/* ---------------- Tour v2: Settings, Übergänge, Reisepunkte ---------------- */
#tour-bottom{position:absolute; left:14px; right:var(--sidew, 424px); bottom:14px; z-index:9;
  display:flex; flex-direction:column; min-width:0;
  background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-line); border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .5s var(--ease), opacity .4s, right .5s var(--ease)}
.cinema #tour-bottom{transform:translateY(130%); opacity:0; pointer-events:none}
.tour-strip{display:flex; align-items:center; gap:10px; overflow-x:auto; padding:4px 2px 10px}
.tour-chip{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:7px 12px 7px 7px;
  border:1.5px solid var(--line-soft); border-radius:12px; background:var(--paper); cursor:pointer;
  transition:border-color .2s, box-shadow .2s, transform .2s}
.tour-chip:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px)}
.tour-chip.active{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent)}
.tour-chip.empty{border-style:dashed; opacity:.8}
.tour-chip.loose{border-style:dashed; border-color:var(--accent); background:var(--accent-soft)}
.tour-chip.loose .tch-meta span{color:var(--accent-deep); font-weight:600}
/* Setting mit Bild, aber noch nicht hochskaliert -> deutlich als „muss in 03" markieren */
.tour-chip.needs-up{border-color:#c98a1e; background:#fbf3e3}
.tour-chip.needs-up .tch-meta span{color:#9a6a12; font-weight:600}
.tch-thumb .tch-up{position:absolute; top:3px; right:3px; background:#c98a1e; color:#fff; font-size:10px; line-height:1; padding:2px 4px; border-radius:5px}
.up-face.done{border-color:var(--accent)}
.tour-loose-sep{flex:0 0 auto; align-self:center; color:var(--gray); padding:0 4px; letter-spacing:2px; font-size:11px}
.tch-thumb{position:relative; width:74px; height:37px; border-radius:7px; overflow:hidden;
  background:var(--cream-2); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.tch-thumb img{width:100%; height:100%; object-fit:cover}
.tch-thumb .tc-ph{color:var(--gray); font-size:14px}
.tch-audio{position:absolute; right:3px; bottom:3px; font-size:9px; font-weight:700; color:#fff;
  background:rgba(11,11,12,.65); border-radius:6px; padding:1px 5px}
.tch-meta{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.tch-meta b{font-family:var(--serif); font-weight:440; font-size:13px; white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis}
.tch-meta span{font-size:10px; color:var(--gray-2)}
.tch-del{flex:0 0 auto; width:18px; height:18px; margin-left:4px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--gray); font-size:12px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s var(--ease)}
.tch-del:hover{border-color:#B3402A; color:#B3402A; background:rgba(179,64,42,.08)}
.trans-node{flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1.5px dashed var(--line-strong);
  background:var(--cream-2); color:var(--gray-2); font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s var(--ease)}
.trans-node:hover{border-color:var(--accent); color:var(--accent-deep); transform:scale(1.08)}
.trans-node.set{border-style:solid; border-color:rgba(181,83,46,.5); background:var(--accent-soft); color:var(--accent-deep)}
.trans-pop{position:absolute; z-index:30; display:flex; align-items:center; gap:6px; padding:8px 10px;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow)}
.trans-pop .tp-title{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gray); margin-right:2px}
.tp-opt{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:transparent;
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; color:var(--gray-2); cursor:pointer; transition:.15s}
.tp-opt:hover{color:var(--ink); border-color:var(--line-strong)}
.tp-opt.on{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.tp-ico{font-size:13px}

/* Setting-Modal: drei Wege */
.setting-wide{width:min(640px,94vw)}
.sm-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.sm-card{text-align:left; cursor:pointer; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  background:var(--cream); padding:16px 15px 14px; transition:transform .25s var(--ease), box-shadow .25s, border-color .2s}
.sm-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:rgba(181,83,46,.4)}
.sm-card .sc-num{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--accent)}
.sm-card h3{font-size:15px; margin:6px 0 6px}
.sm-card p{font-size:11.5px; color:var(--gray-2); line-height:1.5}
.sm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:300px; overflow-y:auto; margin-top:8px}
.sm-item{border:1.5px solid var(--line-soft); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--cream-2);
  padding:0; display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.sm-item:hover{border-color:var(--accent); transform:translateY(-2px)}
.sm-item img{width:100%; aspect-ratio:2/1; object-fit:cover; display:block}
.sm-item span{font-size:10px; color:var(--gray-2); padding:5px 8px; text-align:left}
@media(max-width:760px){ .sm-cards{grid-template-columns:1fr} .sm-grid{grid-template-columns:1fr 1fr} }

/* Reisepunkt-Marker im Studio: Portal-Ring statt Punkt */
.co-mark.portal .cm-portal{position:relative; width:34px; height:34px; margin:0 auto; cursor:pointer}
.cp-ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--cream);
  background:rgba(181,83,46,.32); backdrop-filter:blur(4px); box-shadow:0 0 0 1px rgba(11,11,12,.25), 0 4px 14px rgba(11,11,12,.35)}
.cp-ring::before{content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1.5px solid rgba(244,240,231,.65); animation:coping 2.6s ease-out infinite}
.cp-arrow{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:15px; font-weight:700; text-shadow:0 1px 4px rgba(11,11,12,.6)}
.co-mark.portal:hover .cm-portal{transform:scale(1.12)}
.cm-portal-card .cm-go{margin-top:8px}
.ci-dot.portal{display:inline-flex; align-items:center; justify-content:center; background:var(--accent);
  color:var(--cream); font-size:10px; font-weight:700; border-radius:50%}

/* Erzähler-Clips (Tour) */
.tvo-item{display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line-soft);
  border-radius:12px; background:var(--paper); font-size:12px; transition:box-shadow .2s}
.tvo-item:hover{box-shadow:var(--shadow-sm)}
.tvo-play{flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:none; background:var(--ink);
  color:var(--cream); font-size:10px; cursor:pointer}
.tvo-play:hover{background:var(--accent)}
.tvo-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gray-2)}
.tvo-dur{flex:0 0 auto; font-size:10.5px; color:var(--accent-deep); font-weight:600}
.tvo-del{flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--gray); cursor:pointer; line-height:1}
.tvo-del:hover{border-color:#B3402A; color:#B3402A}
/* Reihenfolge der Erzähler-Clips (spielen nacheinander beim Betreten) */
.tvo-n{flex:0 0 auto; min-width:17px; height:17px; border-radius:50%; background:rgba(11,11,12,.07);
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--gray-2)}
.tvo-ord{flex:0 0 auto; display:flex; gap:3px}
.tvo-mv{width:20px; height:20px; border-radius:6px; border:1px solid var(--line); background:transparent;
  color:var(--gray-2); font-size:11px; line-height:1; padding:0; cursor:pointer;
  transition:border-color .2s,color .2s}
.tvo-mv:hover:not(:disabled){border-color:var(--ink); color:var(--ink)}
.tvo-mv:disabled{opacity:.28; cursor:default}
/* Sprecher eines Infopunkts */
#co-audio-state span{flex:1 1 auto; text-align:left}

/* ---------------- Mediapool v3: Filter, Badges, Expand-Panel ---------------- */
.pool-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.mp-item video{width:100%; height:100%; object-fit:cover; display:block}
.pool-grid{position:relative}
/* Die Karten liegen ÜBER dem Detail-Träger (sein Tab ragt hinter der gewählten Karte hoch) */
.pool-grid .mp-item{z-index:1}
.mp-item.sel{box-shadow:none}
.mp-badges{position:absolute; right:8px; bottom:7px; display:flex; gap:5px; z-index:2}
.mp-badge{border-radius:999px; padding:3px 9px; font-size:10px; font-weight:700; color:#fff;
  background:rgba(11,11,12,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.mp-badge.up{background:rgba(181,83,46,.85)}
/* Mediapool-Detail = zentrierte Lightbox (#asset-modal) — Transform/Opacity statt Höhe */
#asset-modal{transition:opacity .18s ease}
#asset-modal.hidden{opacity:0}
.am-card{width:min(900px,100%); padding:0; animation:am-in .22s var(--ease)}
@keyframes am-in{from{transform:scale(.97); opacity:0} to{transform:none; opacity:1}}
.am-head{position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:12px;
  padding:18px 20px; background:var(--paper); border-bottom:1px solid var(--line-soft); border-radius:24px 24px 0 0}
.am-title{flex:1 1 auto; min-width:0}
.am-name{width:100%; max-width:340px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
  padding:9px 15px; font-size:13.5px; font-family:inherit; color:var(--ink); transition:border-color .2s}
.am-name:focus{outline:none; border-color:var(--ink)}
.am-name::placeholder{color:var(--gray)}
.am-actions{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.am-actions .modal-x{font-size:24px}
.am-body{padding:16px 20px 22px}
.am-hero{position:relative; border-radius:var(--radius-sm); overflow:hidden; background:var(--cream-2)}
.am-hero img{display:block; width:100%; aspect-ratio:2/1; object-fit:cover}
.am-badge{position:absolute; left:12px; bottom:12px; background:rgba(11,11,12,.66); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.06em; border-radius:999px; padding:4px 11px; backdrop-filter:blur(6px)}
.am-360{position:absolute; right:12px; bottom:12px; background:rgba(244,240,231,.92); color:var(--ink);
  border:none; font-size:12px; font-weight:600; border-radius:999px; padding:7px 14px; cursor:pointer;
  backdrop-filter:blur(8px); transition:background .2s}
.am-360:hover{background:#fff}
.am-seg{display:flex; flex-wrap:wrap; gap:5px; margin:16px 0 12px}
.am-seg button{flex:0 0 auto}
.am-seg b{font-weight:700; opacity:.5; margin-left:5px; font-size:10.5px}
.am-seg button.on b{opacity:.6}
.am-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.am-grid .mpd-item{width:auto}
.mpd-del{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; cursor:pointer; transition:border-color .2s; flex:0 0 auto}
.mpd-del{color:var(--gray-2)}
.mpd-del:hover:not(:disabled){border-color:#B3402A; color:#B3402A}
.mpd-del:disabled{opacity:.35; cursor:not-allowed}
/* 360°-Schnellansicht (Quickview) */
.qv-modal{position:fixed; inset:0; z-index:90; background:rgba(11,11,12,.92); backdrop-filter:blur(8px)}
.qv-stage{position:absolute; inset:0; cursor:grab}
.qv-stage.grabbing{cursor:grabbing}
.qv-stage canvas{display:block}
.qv-top{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 20px; background:linear-gradient(to bottom,rgba(11,11,12,.55),transparent); z-index:2}
.qv-title{font-family:var(--serif); font-size:17px; color:var(--cream); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0}
.qv-tools{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.qv-top .seg{background:rgba(244,240,231,.12); border:1px solid rgba(244,240,231,.25)}
.qv-top .seg button{color:rgba(244,240,231,.75)}
.qv-top .seg button.on{background:var(--cream); color:var(--ink)}
.qv-btn{border:1px solid rgba(244,240,231,.3); background:rgba(244,240,231,.1); color:var(--cream);
  border-radius:999px; padding:8px 14px; font-size:12px; font-weight:500; cursor:pointer; font-family:inherit;
  backdrop-filter:blur(8px); transition:background .2s,border-color .2s}
.qv-btn:hover{background:rgba(244,240,231,.22)}
.qv-btn.on{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.qv-btn.use{background:var(--accent); border-color:var(--accent)}
.qv-btn.use:hover{background:var(--accent-deep,#8F3E20)}
.qv-hint{position:absolute; bottom:24px; left:0; right:0; text-align:center; pointer-events:none;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,240,231,.6)}
.qv-hint .d{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent);
  margin-right:9px; vertical-align:1px}
/* Prompt-Box im KI-Chat-Stil (Terrakotta) — im Asset-Modal wiederverwendet */
.mpd-prompt{margin:14px 0 0; border:1px solid rgba(181,83,46,.35); background:rgba(181,83,46,.07);
  border-radius:12px; padding:9px 12px}
.mpd-prompt-t{font-size:11.5px; line-height:1.55; color:var(--ink); max-height:62px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent)}
.mpd-prompt.open .mpd-prompt-t{max-height:none; -webkit-mask-image:none; mask-image:none}
.mpd-prompt-h{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:0 0 4px; background:none; border:none; cursor:pointer; font:inherit; color:inherit}
.mpd-prompt-x{font-size:11px; color:var(--accent-deep); transition:transform .2s}
.mpd-prompt.open .mpd-prompt-x{transform:rotate(180deg)}
.mpd-prompt.no-x .mpd-prompt-x{display:none}
.mpd-prompt.no-x .mpd-prompt-h{cursor:default}
.mpd-prompt.no-x .mpd-prompt-t{-webkit-mask-image:none; mask-image:none}
.mpd-item.mpd-tour span{color:var(--accent-deep); font-weight:600; white-space:normal}
.mpd-item{flex:0 0 auto; width:158px; border:1.5px solid var(--line-soft); border-radius:10px; overflow:hidden;
  background:var(--cream-2); cursor:pointer; padding:0; display:flex; flex-direction:column; text-align:left;
  transition:border-color .2s, transform .2s}
.mpd-item:hover{border-color:var(--accent); transform:translateY(-2px)}
.mpd-item img,.mpd-item video{width:100%; aspect-ratio:2/1; object-fit:cover; display:block}
.mpd-item span{font-size:10px; color:var(--gray-2); padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mpd-empty{font-size:11.5px; color:var(--gray); padding:6px 0}

/* Tour-Sidebar: klare Gruppen-Rhythmik (Abstände zwischen Blöcken) */
#side-tour>.kicker.sub{margin:18px 0 10px}
#side-tour>.co-list{margin:12px 0 4px}
#side-tour>#co-form{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft)}
#side-tour>.stack{margin-bottom:4px}

/* Setting-Bild in der Tour-Sidebar (mit Tausch-Funktion) */
.tour-thumb{position:relative; margin-bottom:12px; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line-soft); background:var(--cream-2)}
.tour-thumb img{display:block; width:100%; aspect-ratio:2/1; object-fit:cover}
.tour-thumb .btn{position:absolute; right:8px; bottom:8px; background:rgba(244,240,231,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.sm-item.cur{border-color:var(--accent); opacity:.65; cursor:default}

/* Traumfenster-Marker im Studio */
.co-mark.dream .cm-dream{position:relative; width:38px; height:38px; margin:0 auto; cursor:pointer; transition:transform .25s var(--ease)}
.co-mark.dream:hover .cm-dream{transform:scale(1.12)}
.cd-ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--cream);
  background:rgba(11,11,12,.5); backdrop-filter:blur(5px); box-shadow:0 4px 16px rgba(11,11,12,.45)}
.cd-ring::before{content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1.5px dashed rgba(244,240,231,.55); animation:spin 9s linear infinite}
.cd-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:14px; text-shadow:0 1px 4px rgba(11,11,12,.6)}
.cm-dream.on .cd-ring{background:rgba(181,83,46,.55); border-color:#fff}
.ci-dot.dream{display:inline-flex; align-items:center; justify-content:center; background:var(--ink);
  color:var(--cream); font-size:9px; border-radius:50%}

/* ---------------- Face-Vorschau-Modal (großes Video einer Fläche) ---------------- */
.face-modal-card{width:min(1060px,94vw); padding:22px}
.face-modal-card .modal-head{gap:12px}
.face-modal-card .modal-head h2{margin-right:auto}
.face-modal-card video{display:block; width:100%; max-height:74vh; border-radius:14px; background:#000; margin-top:8px}
.face-modal-card img{display:block; width:100%; max-height:74vh; object-fit:contain; border-radius:14px; background:#000; margin-top:8px}

/* ===================== Epora-Dropdown (ersetzt native Selects) ===================== */
.eside{position:relative; display:block}
.eside-native{position:absolute!important; width:0; height:0; opacity:0; pointer-events:none; margin:0}
.eside-btn{display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px;
  font:inherit; font-size:13px; color:var(--ink); transition:border-color .2s, box-shadow .2s}
.eside-btn:hover{border-color:var(--line)}
.eside.open .eside-btn{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft,rgba(181,83,46,.12))}
.eside-lbl{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eside-ch{flex:0 0 auto; color:var(--gray); font-size:11px; transition:transform .2s,color .2s}
.eside.open .eside-ch{transform:rotate(180deg); color:var(--accent)}
.eside-menu{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; max-height:264px; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line-strong,var(--line)); border-radius:12px; padding:6px;
  box-shadow:var(--shadow-lg,0 18px 50px rgba(11,11,12,.22)); animation:esideIn .16s var(--ease,ease) both}
.eside-menu.hidden{display:none}
@keyframes esideIn{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.eside-grp{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); font-weight:700; padding:8px 11px 4px}
.eside-item{display:block; width:100%; text-align:left; background:transparent; border:0; border-radius:8px;
  padding:9px 11px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; transition:background .15s,color .15s}
.eside-item:hover{background:var(--cream-2)}
.eside-item.on{background:var(--accent-soft,rgba(181,83,46,.1)); color:var(--accent-deep); font-weight:600}
.eside-item:disabled{opacity:.5; cursor:default}

/* ===================== Zeitreise-Datumszähler (Odometer) ===================== */
#date-counter{position:fixed; left:50%; top:46%; transform:translate(-50%,-50%) scale(.96); z-index:9000;
  display:flex; flex-direction:column; align-items:center; gap:.12em; pointer-events:none; opacity:0; transition:opacity .5s ease, transform .5s ease;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); font-variant-numeric:tabular-nums}
#date-counter.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
.date-counter .dc-head{font-size:.4em; line-height:1.15; letter-spacing:.03em; text-align:center; max-width:92vw}
.date-counter .dc-row{display:flex; gap:1px}
/* feste Zellenbreite je Schrift -> Ziffern wackeln beim Drehen nicht horizontal */
.date-counter .dc-d{display:inline-block; overflow:hidden; height:1.18em; line-height:1.18; text-align:center}
.dc-font-0 .dc-d{width:.60em} .dc-font-1 .dc-d{width:.58em} .dc-font-2 .dc-d{width:.62em} .dc-font-3 .dc-d{width:.50em}
.date-counter .dc-num{display:block}
.date-counter .dc-num.roll{animation:dcRoll .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes dcRoll{0%{transform:translateY(78%); opacity:.1} 60%{opacity:1} 100%{transform:translateY(0); opacity:1}}
.dc-font-0{font-family:'Fraunces',Georgia,serif; font-size:96px; font-weight:500; letter-spacing:.02em}
.dc-font-1{font-family:'Inter',system-ui,sans-serif; font-size:92px; font-weight:700; letter-spacing:-.01em}
.dc-font-2{font-family:ui-monospace,'SF Mono','Roboto Mono',monospace; font-size:84px; font-weight:600; letter-spacing:.04em}
.dc-font-3{font-family:'Oswald',Impact,sans-serif; font-size:106px; font-weight:600; letter-spacing:.05em}
@media(max-width:640px){ .dc-font-0,.dc-font-1,.dc-font-2,.dc-font-3{font-size:54px} }
/* Übergangs-Popover (erweitert um Datum + Schrift) */
.trans-pop.wide{width:236px; display:block; padding:13px; max-height:min(72vh,560px); overflow-y:auto}
.trans-pop.wide .tp-title{display:block; margin:0 0 7px}
.trans-pop .tp-styles{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.trans-pop .tp-styles .tp-opt{justify-content:center}
.trans-pop.wide .tp-title.mt{margin-top:13px}
.trans-pop .tp-hint{font-size:9px; color:var(--gray); font-weight:500; text-transform:none; letter-spacing:0}
.trans-pop .tp-dates{display:flex; align-items:center; gap:6px; margin:7px 0}
.trans-pop .tp-dates input{flex:1; min-width:0; font:inherit; font-size:12px; padding:7px 8px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); color:var(--ink)}
.trans-pop .tp-arrow{color:var(--gray)}
.trans-pop .tp-fonts{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:6px 0 11px}
.trans-pop .tp-font{padding:7px 2px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); cursor:pointer; font-size:12px; color:var(--ink); line-height:1}
.trans-pop .tp-font.on{border-color:var(--accent); background:var(--accent-soft,rgba(181,83,46,.1)); color:var(--accent-deep)}
.trans-pop .tp-font.dc-font-0{font-family:'Fraunces',serif; font-size:13px}
.trans-pop .tp-font.dc-font-1{font-family:'Inter',sans-serif}
.trans-pop .tp-font.dc-font-2{font-family:ui-monospace,monospace; font-size:11px}
.trans-pop .tp-font.dc-font-3{font-family:'Oswald',Impact,sans-serif}
.trans-pop .tp-save{width:100%}

/* Voller Prompt als Dropdown in der Mediapool-360°-Vorschau (dunkles Overlay) */
.qv-prompt{position:absolute; left:16px; bottom:16px; z-index:6; width:min(380px,calc(100% - 32px)); margin:0;
  background:rgba(11,11,12,.72); border-color:rgba(244,240,231,.25);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.qv-prompt .mpd-prompt-h .mc-ready-l{color:#F4F0E7}
.qv-prompt .mpd-prompt-x{color:#E0A36A}
.qv-prompt .mpd-prompt-t{color:rgba(244,240,231,.9)}
.qv-prompt.open .mpd-prompt-t{max-height:46vh; overflow-y:auto}

/* Zeitreise-Datum/Schrift im Reisepunkt-Editor der Sidebar (gleiche Optik wie im Übergangs-Popover) */
#co-portal-fields .tp-dates{display:flex; align-items:center; gap:6px; margin-top:6px}
#co-portal-fields .tp-dates input{flex:1; min-width:0; font:inherit; font-size:12px; padding:8px 9px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); color:var(--ink)}
#co-portal-fields .tp-arrow{color:var(--gray)}
#co-portal-fields .tp-fonts{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:8px 0 2px}
#co-portal-fields .tp-font{padding:7px 2px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper); cursor:pointer; font-size:12px; color:var(--ink); line-height:1}
#co-portal-fields .tp-font.on{border-color:var(--accent); background:var(--accent-soft,rgba(181,83,46,.1)); color:var(--accent-deep)}
#co-portal-fields .tp-font.dc-font-0{font-family:'Fraunces',serif; font-size:13px}
#co-portal-fields .tp-font.dc-font-1{font-family:'Inter',sans-serif}
#co-portal-fields .tp-font.dc-font-2{font-family:ui-monospace,monospace; font-size:11px}
#co-portal-fields .tp-font.dc-font-3{font-family:'Oswald',Impact,sans-serif}

/* ---- KI-Video-Übergang (Reisepunkt) ---- */
.ai-panel{margin-top:10px; border:1px dashed var(--cream-3); border-radius:var(--radius-sm); padding:12px; background:#FBF8F2}
.ai-panel.hidden{display:none}
.ai-panel .ai-lab{font-size:11px; font-weight:600; color:var(--gray-2); margin-bottom:7px}
.ai-vstrip{display:flex; flex-wrap:wrap; gap:7px}
.ai-vcard{position:relative; width:84px; border:1px solid var(--cream-3); border-radius:9px; overflow:hidden; background:var(--paper); cursor:pointer}
.ai-vcard.active{border:2px solid var(--accent)}
.ai-vcard.stale{opacity:.6}
.ai-vthumb{position:relative; height:48px; background:var(--cream-2)}
.ai-vthumb img{width:100%; height:100%; object-fit:cover; display:block}
.ai-vplay{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.88); color:var(--ink); font-size:9px; display:flex; align-items:center; justify-content:center}
.ai-vbadge{position:absolute; top:3px; left:3px; background:var(--accent); color:#fff; font-size:8px; font-weight:700; border-radius:999px; padding:1px 6px}
.ai-vmeta{font-size:9px; color:var(--gray); padding:3px 5px; text-align:center}
.ai-vx{position:absolute; top:2px; right:2px; width:16px; height:16px; border:none; border-radius:50%; background:rgba(11,11,12,.55); color:#fff; font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center}
.ai-vx:hover{background:var(--accent-deep)}
.ai-vempty{font-size:11px; color:var(--gray); padding:6px 2px}
.ai-divider{height:1px; background:var(--cream-3); margin:12px 0}
.ai-subh{font-size:11px; font-weight:700; color:var(--accent-deep); margin-bottom:9px}
.ai-step{display:flex; gap:9px; align-items:center; margin-bottom:9px}
.ai-num{flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center}
.ai-st b{font-size:11px; display:block}
.ai-aim{font-size:11px; color:var(--accent-deep); cursor:pointer; text-decoration:none}
.ai-aim:hover{text-decoration:underline}
.ai-row{display:flex; gap:10px; align-items:center; margin:10px 0}
.ai-tog{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gray-2); cursor:pointer}
.ai-tog input{position:absolute; opacity:0; width:0; height:0}
.ai-sw{width:32px; height:18px; border-radius:999px; background:var(--cream-3); position:relative; transition:.2s}
.ai-sw:after{content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:.2s}
.ai-tog input:checked + .ai-sw{background:var(--accent)}
.ai-tog input:checked + .ai-sw:after{left:16px}
.ai-tip{margin-top:9px; font-size:11px; color:var(--gray-2); background:var(--cream); border-left:2.5px solid var(--accent); border-radius:0 7px 7px 0; padding:7px 9px}

/* KI-Übergang: vollwertiges Prompt-Fenster wie genbar/chatbar (Breite/Position identisch),
   Höhe nach Inhalt mit Scroll; bottom wird per JS über die Timeline gesetzt (placeTransWindow). */
.trans-window{position:absolute; left:calc((100% - var(--sidew, 424px)) / 2); bottom:118px; transform:translateX(-50%); z-index:8;
  width:min(760px, calc(100% - var(--sidew, 424px) - 36px)); max-height:62vh; overflow-y:auto;
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line); border-radius:22px; padding:16px 18px; box-shadow:var(--shadow);
  transition:opacity .35s var(--ease), bottom .35s var(--ease)}
.trans-window.hidden{display:none}
.trans-window .tw-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.trans-window .tw-title{font-size:13px; font-weight:600; color:var(--accent-deep)}
.trans-window .tw-x{background:transparent; border:none; font-size:18px; line-height:1; color:var(--gray); cursor:pointer; padding:0 4px}
.trans-window .tw-x:hover{color:var(--ink)}
.trans-window .tw-chat{margin:10px 0}
.trans-window .tw-warn{font-size:11px; color:var(--accent-deep); background:var(--accent-soft); border-radius:8px; padding:7px 9px; margin:8px 0}
.trans-window .tw-warn.hidden{display:none}
.trans-window .tw-opts{margin:12px 0}
.trans-window .tw-opts .ai-tog{margin-left:auto}

/* Start-/Zielframe als Thumbnail-Karten */
.ai-frames{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.ai-frame{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:var(--paper);
  border:1px solid var(--cream-3); border-radius:10px; padding:8px; cursor:pointer; position:relative; transition:.15s}
.ai-frame:hover{border-color:var(--accent); box-shadow:var(--shadow-sm)}
.ai-fnum{position:absolute; top:6px; left:6px; width:17px; height:17px; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; z-index:2}
.ai-fthumb{position:relative; width:100%; aspect-ratio:16/9; background:var(--cream-2); border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.ai-fthumb img{width:100%; height:100%; object-fit:cover; display:block}
.ai-fcross{position:absolute; color:rgba(255,255,255,.92); font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.6); pointer-events:none}
.ai-flab{font-size:11px; font-weight:600; color:var(--ink); display:flex; flex-direction:column; align-items:center; line-height:1.3}
.ai-flab small{font-size:9.5px; font-weight:500; color:var(--accent-deep)}
.ai-farrow{flex:0 0 auto; color:var(--gray); font-size:14px}
.ai-qual{display:flex; align-items:center; gap:10px; margin:10px 0}
.ai-qlab{font-size:12px; font-weight:600; color:var(--gray-2)}
.ai-qual .seg{flex:1}

/* Aim-Modal: Mini-Viewer mit Fadenkreuz */
.aim-card{width:min(760px,94vw); max-width:760px}
.aim-settings{display:flex; flex-wrap:wrap; gap:6px; padding:0 2px 10px}
.aim-settings.hidden{display:none}
.aim-chip{font-size:12px; padding:6px 12px; border-radius:999px; background:var(--cream-2); color:var(--gray-2); border:1px solid transparent; cursor:pointer}
.aim-chip.on{background:var(--accent); color:#fff; font-weight:600}
.aim-stage{position:relative; width:100%; aspect-ratio:16/9; background:#0c0c10; border-radius:12px; overflow:hidden; touch-action:none; cursor:grab}
.aim-stage.grab{cursor:grabbing}
.aim-stage canvas{display:block; width:100%; height:100%}
.aim-cross{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.9); font-size:24px; text-shadow:0 1px 4px rgba(0,0,0,.7); pointer-events:none; z-index:2}
.aim-frame-guide{position:absolute; inset:7%; border:1.5px dashed rgba(255,255,255,.5); border-radius:6px; pointer-events:none; z-index:2}
.aim-hint{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); background:rgba(11,11,12,.6); color:#F4F0E7; font-size:11px; padding:5px 12px; border-radius:999px; pointer-events:none; z-index:2; white-space:nowrap; max-width:94%; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.aim-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}

/* ---- Seedance-FPV-Übergang: Modellwahl, Panel, Routen-Modal ---- */
.tw-engine{width:100%; margin:0 0 10px}
.tw-engine button{flex:1}
.tw-seedance{margin:2px 0 10px; padding:10px 12px; border:1px solid var(--line,#E3DCCB); border-radius:10px; background:rgba(181,83,46,.04)}
.tw-sd-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tw-sd-hint{margin:8px 0 0}
#route-state{font-weight:600}
#route-state.on{color:var(--accent,#B5532E)}
.route-card{width:min(900px,94vw); max-width:900px}
.route-stage{position:relative; width:100%; max-height:62vh; overflow:hidden; border-radius:10px; background:#0B0B0C; display:flex; justify-content:center}
#route-img{max-width:100%; max-height:62vh; display:block; -webkit-user-select:none; user-select:none; pointer-events:none}
#route-canvas{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); cursor:crosshair; touch-action:none}
.route-foot{display:flex; align-items:center; gap:10px; margin-top:14px}
.route-size{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink,#0B0B0C)}

/* ---- „Neuer Blickwinkel": Referenz-Pille, Akzent, Stammbaum ---- */
.vantage-pill{display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:6px 8px;
  border:1px solid var(--accent,#B5532E); border-radius:10px; background:rgba(181,83,46,.06)}
.vantage-pill img{width:48px; height:28px; object-fit:cover; border-radius:5px; flex:none}
.vantage-pill .vp-txt{flex:1; font-size:12.5px; font-weight:600; color:var(--accent,#B5532E)}
.vantage-pill .vp-x{border:none; background:transparent; cursor:pointer; font-size:14px; color:var(--gray,#8C887E); padding:2px 6px; border-radius:6px}
.vantage-pill .vp-x:hover{background:rgba(0,0,0,.06); color:var(--ink,#0B0B0C)}
.genbar.vantage-on .gen-chat{box-shadow:0 0 0 2px rgba(181,83,46,.25); border-radius:12px}
.mp-badge.va{background:rgba(181,83,46,.12); color:var(--accent,#B5532E)}
/* Stammbaum im Asset-Modal */
.vtree{display:flex; flex-direction:column; gap:8px; width:100%}
.vt-node{display:flex; align-items:center; gap:12px; padding:7px 9px; border:1px solid var(--line,#E3DCCB);
  border-radius:10px; background:#fff; position:relative}
.vt-node.cur{border-color:var(--accent,#B5532E); box-shadow:0 0 0 1px var(--accent,#B5532E) inset}
.vt-node .vt-thumb{width:84px; height:48px; object-fit:cover; border-radius:6px; flex:none; cursor:pointer}
.vt-meta{display:flex; flex-direction:column; gap:5px; min-width:0; flex:1}
.vt-info{font-size:13px; font-weight:600; color:var(--ink,#0B0B0C); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vt-acts{display:flex; gap:8px}
.vt-acts button{font-size:12px; padding:3px 9px; border:1px solid var(--line,#E3DCCB); border-radius:999px;
  background:#fff; cursor:pointer; color:var(--ink,#0B0B0C)}
.vt-acts button:hover{border-color:var(--accent,#B5532E); color:var(--accent,#B5532E)}
.vt-node[style*="margin-left"]::before{content:"⤷"; position:absolute; left:-14px; color:var(--gray,#8C887E); font-size:13px}

/* ---- Datum/Uhrzeit auf generierten Bildern ---- */
.mp-item .mp-date{position:absolute; left:7px; top:7px; z-index:2; font-size:9px; font-weight:600;
  letter-spacing:.03em; color:#fff; background:rgba(11,11,12,.55); border-radius:999px; padding:2px 7px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); pointer-events:none; max-width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am-date{position:absolute; left:12px; top:12px; background:rgba(11,11,12,.66); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:4px 11px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.vt-date{font-size:11px; color:var(--gray,#8C887E)}
.vt-acts .vt-del{color:var(--accent,#B5532E); font-size:13px; padding:3px 8px}
.vt-acts .vt-del:hover{border-color:var(--accent,#B5532E); background:rgba(181,83,46,.08)}
/* ---- Asset-Modal: Header/Buttons aufgeräumt ---- */
.am-head{flex-wrap:wrap}
.am-actions{flex-wrap:wrap; justify-content:flex-end}
.am-actions .btn{height:38px; display:inline-flex; align-items:center; white-space:nowrap; padding:0 15px; font-size:13px; line-height:1}
#am-vantage{border:1px solid var(--accent,#B5532E); color:var(--accent,#B5532E); background:rgba(181,83,46,.05)}
#am-vantage:hover{background:rgba(181,83,46,.12)}
#am-vantage.hidden{display:none}