:root{
  --navy:#12153F; --navy-2:#1B1F52; --indigo:#5B4FE5; --indigo-dark:#4638C2; --indigo-light:#EEEBFD;
  --ink:#1E2233; --grey:#6B7280; --line:#E5E7EB; --card:#F7F8FC; --bg:#F4F5FA;
  --green:#1E9E5A; --green-bg:#E8F8EF; --orange:#E08B1F; --orange-bg:#FDF2E1;
  --red:#D8443C; --red-bg:#FCEAE9; --blue:#3B7DDB; --blue-bg:#EAF2FC;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Helvetica,Arial,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}

/* ================= App Shell: vertikale Sidebar + Content ================= */
.app-shell{display:flex;min-height:100vh}

/* ---- Sidebar (dunkel, fixiert, volle Höhe) ---- */
.sidebar-v{width:250px;flex-shrink:0;background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{padding:22px 20px 16px}
.sb-logo .name{font-size:16px;font-weight:800;letter-spacing:.3px}
.sb-logo .claim{font-size:10.5px;color:#9CA3D4;margin-top:2px}

.sb-user{margin:4px 14px 14px;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:10px;display:flex;align-items:center;gap:10px}
.sb-avatar{width:34px;height:34px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.sb-user-info{flex:1;min-width:0}
.sb-user-info .role{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-info select{width:100%;background:transparent;border:none;color:#AEB4E8;font-size:10.5px;font-family:inherit;padding:1px 0}
.sb-user-info select option{color:#1E2233}
/* „Abmelden" steht an derselben Stelle wie die Demo-Rollenwahl und sieht darum gleich aus.
   Ohne eigene Regel war es der nackte Systemknopf des Browsers — grauer Kasten, Arial,
   Aussenrand — mitten in der dunklen Karte. Er erscheint nur mit signiertem Zugang, also
   genau dem Fall, den die Marke zu sehen bekommt. */
.sb-user-info #sessionOut{display:block;background:transparent;border:none;color:#AEB4E8;
  font-size:10.5px;font-family:inherit;padding:1px 0;cursor:pointer;text-align:left}
.sb-user-info #sessionOut:hover{color:#fff;text-decoration:underline}

.sb-nav{flex:1;padding:6px 12px}
.sb-nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:#C6CAEC;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;margin-bottom:2px}
.sb-nav button .ic{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.sb-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-nav button.active{background:var(--indigo);color:#fff}

.sb-footer{padding:14px 20px 20px;margin-top:auto}
.sb-footer .q{font-size:12.5px;font-weight:700;color:#fff}
.sb-footer .a{font-size:11px;color:#9CA3D4;margin:2px 0 8px}
.sb-footer button{background:rgba(255,255,255,.08);border:none;color:#fff;font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:7px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px}
.sb-footer button:hover{background:rgba(255,255,255,.15)}

/* ---- Content-Bereich ---- */
.content-area{flex:1;min-width:0;display:flex;flex-direction:column}
.util-bar{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:12px 26px;border-bottom:1px solid var(--line);background:#fff}
/* Fokus-Modus-Schalter (nur lokal): links in der Kopfzeile */
.focus-toggles{margin-right:auto;display:flex;gap:6px}
.focus-tgl{display:flex;align-items:center;gap:5px;background:none;border:1px dashed var(--line);cursor:pointer;padding:5px 10px;border-radius:16px;font-family:inherit;color:var(--grey)}
.focus-tgl .ic{font-size:13px}
.focus-tgl .lbl{font-size:10.5px;font-weight:700}
.focus-tgl:hover{background:var(--card)}
.focus-tgl.active{border-style:solid;border-color:var(--green);color:var(--green);background:var(--green-bg)}
/* Modul-Status-Badge in der Sidebar */
.mod-badge{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:1px 5px;border-radius:6px}
.mod-badge.alpha{background:var(--orange-bg);color:var(--orange)}
.mod-badge.beta{background:var(--green-bg);color:var(--green)}
.mod-badge.draft{background:var(--card);color:var(--grey);border:0.5px solid var(--line)}
.util-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;padding:4px 10px;border-radius:8px;font-family:inherit}
.util-btn:hover{background:var(--card)}
.util-btn .ic{font-size:16px;color:var(--ink)}
.util-btn .lbl{font-size:9px;color:var(--grey);font-weight:600}
.util-btn .badge{position:absolute;top:0;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.util-ctx{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:20px;background:var(--card);cursor:pointer;margin-left:8px}
.util-ctx .dot{width:26px;height:26px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.util-ctx .txt{font-size:11.5px;line-height:1.3}
.util-ctx .txt b{display:block;font-size:12px}
.util-ctx .txt span{color:var(--grey);font-size:10.5px}

.dropdown-panel{position:absolute;right:26px;top:58px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(18,21,63,.15);min-width:220px;padding:8px;display:none;z-index:300}
.dropdown-panel.open{display:block}
.dropdown-panel button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 10px;font-size:12.5px;color:var(--ink);border-radius:6px;cursor:pointer;font-family:inherit}
.dropdown-panel button:hover{background:var(--card)}
.dropdown-panel .divider{border-top:1px solid var(--line);margin:4px 0}
.dropdown-panel .notif-item{padding:8px 10px;border-radius:6px;font-size:12px;border-bottom:1px solid var(--line)}
.dropdown-panel .notif-item:last-child{border-bottom:none}
.dropdown-panel .notif-item b{display:block;font-size:10.5px;color:var(--indigo);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}

.quick-actions{display:flex;gap:8px;flex-wrap:wrap;padding:10px 26px;background:#fff;border-bottom:1px solid var(--line)}
.qa-btn{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:6px 13px;border-radius:16px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px}
.qa-btn:hover{border-color:var(--indigo);color:var(--indigo)}

.main{flex:1;min-width:0;padding:22px 26px 30px}

/* ================= Section-Header ================= */
section{display:none}
section.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h2.sec{color:var(--ink);font-size:21px;font-weight:800;margin:0 0 3px}
p.lead{color:var(--grey);font-size:12.5px;margin-bottom:16px}

/* ================= Tabs (Sub-Navigation innerhalb Modul) ================= */
.subtabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.subtab{background:none;border:none;padding:9px 15px;font-size:12.5px;font-weight:700;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
.subtab:hover{color:var(--indigo)}
.subtab.active{color:var(--indigo);border-bottom-color:var(--indigo)}

/* ================= KPI-Karten mit Sparkline ================= */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(18,21,63,.04)}
.kpi .lbl{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--grey);text-transform:uppercase}
.kpi .val{font-size:24px;font-weight:800;color:var(--ink);margin:4px 0 3px}
.kpi .trend{font-size:11px;font-weight:700}
.kpi .trend.up{color:var(--green)}.kpi .trend.down{color:var(--red)}
.kpi .spark{height:28px;margin-top:8px}
.kpi.link{cursor:pointer}
.gated{color:var(--grey);font-style:italic;font-size:11.5px}

/* ================= Panels / Cards ================= */
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid1{display:grid;grid-template-columns:1fr;gap:14px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:0 1px 3px rgba(18,21,63,.04)}
.panel .phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.panel h3{font-size:13.5px;color:var(--ink);font-weight:800}
.panel .ph{font-size:11px;color:var(--grey);margin-bottom:9px}
.panel select{font-family:inherit;font-size:11px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--grey);background:#fff}
.panel .flink{font-size:11.5px;color:var(--indigo);font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;margin-top:8px}
.chartbox{position:relative;height:200px}
.chartbox.sm{height:150px}
.chartbox.donut{height:170px}
.chartbox.xs{height:90px}

/* ================= Fortschrittsbalken ================= */
.progress-track{background:var(--line);border-radius:6px;height:6px;overflow:hidden;flex:1;min-width:60px}
.progress-fill{height:100%;border-radius:6px}

/* ================= Gantt (Activation Planner: Jahreskalender) ================= */
.gantt{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.gantt-headrow{display:flex;background:var(--card);border-bottom:1px solid var(--line)}
.gantt-label-head{width:150px;flex-shrink:0;border-right:1px solid var(--line)}
.gantt-months{flex:1;display:grid;grid-template-columns:repeat(12,1fr)}
.gantt-months span{text-align:center;font-size:10px;font-weight:700;color:var(--grey);padding:8px 2px}
.gantt-row{display:flex;border-bottom:1px solid var(--line)}
.gantt-row:last-child{border-bottom:none}
.gantt-label{width:150px;flex-shrink:0;border-right:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;font-weight:700;color:var(--ink)}
.gantt-track{flex:1;display:grid;grid-template-columns:repeat(12,1fr);gap:2px;padding:6px 3px;align-items:center;min-height:44px}
.gantt-bar{border-radius:6px;padding:4px 7px;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.gantt-bar span{display:block;font-size:8px;font-weight:400;opacity:.85}
.gantt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ================= Kanban (Activation Planner: Quartalsplanung) ================= */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kanban-col-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;margin-bottom:8px}
.kanban-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;box-shadow:0 1px 3px rgba(18,21,63,.04)}
.kanban-card .name{font-size:12px;font-weight:700;margin-bottom:2px}
.kanban-add{width:100%;background:none;border:1px dashed var(--line);border-radius:10px;padding:9px;font-size:11.5px;color:var(--grey);font-family:inherit;cursor:pointer}
.kanban-add:hover{border-color:var(--indigo);color:var(--indigo)}

/* ================= Wochenkalender (Leads & Appointments: Terminverwaltung) ================= */
.wcal{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.wcal-hours{width:48px;flex-shrink:0;background:var(--card)}
.wcal-hours .h{height:50px;border-top:1px solid var(--line);font-size:9px;color:var(--grey);text-align:right;padding:2px 6px;box-sizing:border-box}
.wcal-hours .h:first-child{border-top:none}
.wcal-daycol{flex:1;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.wcal-daycol-head{text-align:center;font-size:10px;font-weight:700;color:var(--grey);padding:8px 2px;border-bottom:1px solid var(--line);background:var(--card)}
.wcal-daycol-head.today{color:var(--indigo)}
.wcal-daycol-head b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:9.5px}
.wcal-daycol-head.today b{background:var(--indigo);color:#fff}
.wcal-daycol-body{position:relative}
.wcal-daycol-body .h{height:50px;border-top:1px solid var(--line);box-sizing:border-box}
.wcal-daycol-body .h:first-child{border-top:none}
.wcal-appt{position:absolute;left:2px;right:2px;border-radius:6px;padding:3px 5px;font-size:9px;font-weight:700;overflow:hidden;line-height:1.3;cursor:pointer}
.wcal-appt span{display:block;font-size:8px;font-weight:400;opacity:.85}
.wcal-appt-selected{outline:2px solid var(--indigo);outline-offset:-2px}

/* ================= Toggle-Switch (Leads & Appointments: Status-Konfiguration) ================= */
.switch{position:relative;display:inline-block;width:34px;height:19px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--line);border-radius:19px;transition:.15s}
.switch .slider::before{content:'';position:absolute;width:15px;height:15px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked + .slider{background:var(--indigo)}
.switch input:checked + .slider::before{transform:translateX(15px)}

/* ================= POS Platform: Hero + Tool-Karten + Video-Karten ================= */
.pos-hero{background:var(--indigo-light);border-radius:14px;padding:28px;display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:center;margin-bottom:18px}
.pos-hero h2{font-size:24px;color:var(--ink);margin-bottom:8px}
.pos-hero p{font-size:13px;color:var(--ink);opacity:.8;line-height:1.6;margin-bottom:16px;max-width:480px}
.pos-hero img{width:100%;border-radius:10px;display:block;box-shadow:0 8px 24px rgba(18,21,63,.12)}
.tool-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.tool-ic{width:42px;height:42px;border-radius:10px;background:var(--indigo-light);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}
.tool-card b{display:block;font-size:13.5px;margin-bottom:5px}
.tool-card p{font-size:11.5px;color:var(--grey);line-height:1.5;margin-bottom:10px}
.video-dur{position:absolute;bottom:6px;right:6px;background:rgba(18,21,63,.75);color:#fff;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px}

/* ================= Tabellen ================= */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--grey);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
tbody tr:hover{background:var(--card)}
tbody tr.row-selected{background:var(--indigo-light)}
td.num,th.num{text-align:right}

/* ================= Pills / Status ================= */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:11px;font-size:10.5px;font-weight:700}
.pill.g{background:var(--green-bg);color:var(--green)}
.pill.o{background:var(--orange-bg);color:var(--orange)}
.pill.r{background:var(--red-bg);color:var(--red)}
.pill.b{background:var(--blue-bg);color:var(--blue)}
.pill.n{background:var(--card);color:var(--grey)}
.pill.i{background:var(--indigo-light);color:var(--indigo)}

/* ================= Ranking-Listen ================= */
.rank-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.rank-row:last-child{border-bottom:none}
.rank-name{width:150px;flex-shrink:0;font-size:12px}
.rank-name small{display:block;color:var(--grey);font-size:10px}
.rank-bar-track{flex:1;height:8px;background:var(--card);border-radius:4px;overflow:hidden}
.rank-bar-fill{height:100%;background:var(--indigo);border-radius:4px}
.rank-val{width:52px;text-align:right;font-size:11.5px;font-weight:700;flex-shrink:0}

/* ================= Fortschrittsbalken ================= */
.progress-track{height:7px;background:var(--card);border-radius:4px;overflow:hidden;flex:1}
.progress-fill{height:100%;background:var(--indigo);border-radius:4px}
.progress-fill.green{background:var(--green)}
.progress-row{display:flex;align-items:center;gap:8px;font-size:11px}

/* ================= Stepper (Kampagnen-Fortschritt) ================= */
.stepper{display:flex;align-items:center;margin:10px 0 4px}
.step-node{width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--grey);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.step-node.done{background:var(--green);color:#fff}
.step-node.now{background:var(--indigo);color:#fff}
.step-line{flex:1;height:2px;background:var(--line)}
.step-line.done{background:var(--green)}
.step-labels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--grey);margin-top:4px}

/* ================= Legende (Donuts) ================= */
.legend{display:flex;flex-direction:column;gap:6px}
.legend-row{display:flex;align-items:center;gap:8px;font-size:11.5px}
.legend-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.legend-row .lv{margin-left:auto;font-weight:700}
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut-center-val{text-align:center}

/* ================= Karten-Grid (Assets/Kampagnen) ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.card:hover{box-shadow:0 6px 18px rgba(18,21,63,.1);transform:translateY(-2px)}
.card .cover{height:110px;background:linear-gradient(135deg,var(--indigo),var(--navy-2));position:relative}
.card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.card .cover .status{position:absolute;top:8px;left:8px}
.card .body{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1}
.card .title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.card .meta{font-size:10.5px;color:var(--grey);margin-bottom:8px;flex:1}
.card .actions{display:flex;gap:6px;margin-top:auto}
.card.dim{opacity:.6}
.card .cover .fav-btn{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--red);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.card .cover .fav-btn.active{background:#fff}
.badges-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.badge-chip{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:9px}
.badge-chip.featured{background:var(--orange-bg);color:var(--orange)}
.badge-chip.candidate{background:var(--indigo-light);color:var(--indigo)}
/* Finanzierungs-Layer: Modell der Produktionsfinanzierung (für alle Rollen sichtbar) */
.badge-chip.fin-sponsored{background:#e7f4ec;color:#1f7a44}
.badge-chip.fin-crowd{background:#fdf1de;color:#a06a1e}
.badge-chip.fin-self{background:#eef1f4;color:#51606e}
.tags-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.tag-chip{font-size:9.5px;color:var(--grey);background:var(--card);border:1px solid var(--line);padding:2px 7px;border-radius:8px}
.tag-chip.tag-g{background:var(--green-bg);color:var(--green);border-color:transparent}
.tag-chip.tag-i{background:var(--indigo-light);color:var(--indigo);border-color:transparent}
.tag-chip.tag-b{background:var(--blue-bg);color:var(--blue);border-color:transparent}
.tag-chip.tag-o{background:var(--orange-bg);color:var(--orange);border-color:transparent}
.filter-chip{cursor:pointer;font-family:inherit;font-size:11px;padding:5px 11px}
.filter-chip.active{background:var(--indigo-light);color:var(--indigo);border-color:var(--indigo)}
.step-labels span{flex:1;text-align:center;padding:0 2px}
.step-labels span:first-child{text-align:left}
.step-labels span:last-child{text-align:right}
.interest-progress{font-size:10.5px;color:var(--grey);margin-bottom:8px}
.interest-progress .progress-row{margin-bottom:3px}

/* ================= Ansicht-Umschalter (Grid/Liste) ================= */
.filter-spacer{flex:1 0 auto}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.view-toggle .view-btn{background:#fff;border:none;padding:7px 11px;cursor:pointer;color:var(--grey);font-size:13px;line-height:1}
.view-toggle .view-btn.active{background:var(--indigo-light);color:var(--indigo)}
.cards.list-view{grid-template-columns:1fr}
.cards.list-view .card{flex-direction:row}
.cards.list-view .card .cover{width:150px;height:auto;flex-shrink:0}
.cards.list-view .card .body{flex-direction:column;justify-content:center}

/* ================= Footer-CTA (Marketplace) ================= */
.footer-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:14px 18px;background:var(--card);border:1px dashed var(--line);border-radius:12px}

/* ================= Kampagnendetail-Header (geteilt über alle Tabs) ================= */
.breadcrumb{font-size:11.5px;color:var(--grey);margin-bottom:10px}
.breadcrumb a{color:var(--grey);text-decoration:none;cursor:pointer}
.breadcrumb a:hover{color:var(--indigo)}
.breadcrumb span{margin:0 5px}
.detail-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.detail-hero-row{display:grid;grid-template-columns:260px 1fr 300px;gap:18px;margin-bottom:18px}
.hero-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.hero-cover{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--indigo),var(--navy-2));min-height:170px}
.hero-cover img,.hero-cover video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.hero-cover .hero-badge{position:absolute;top:8px;left:8px;z-index:1}
.hero-cover .fav-btn{position:absolute;top:8px;right:8px;z-index:1}
.hero-info h2{margin-bottom:4px}
.hero-subtitle{font-size:13px;color:var(--grey);margin:0 0 8px}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--grey);margin:9px 0}
.hero-desc{font-size:12.8px;line-height:1.6;color:var(--ink);margin:0}
.hero-overview h3{margin-bottom:8px}
.detail-footer-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(18,21,63,.04)}
.asset-preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.asset-preview-grid .thumb{border-radius:9px;overflow:hidden;aspect-ratio:1;background:var(--card);position:relative}
.asset-preview-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.asset-preview-grid .thumb.more{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--indigo);background:var(--indigo-light);cursor:pointer;font-size:13px}

@media(max-width:1100px){.detail-hero-row{grid-template-columns:1fr}}

/* ================= Buttons ================= */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid transparent}
.btn.primary{background:var(--indigo);color:#fff}
.btn.primary:hover{background:var(--indigo-dark)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--indigo);color:var(--indigo)}
.btn.gold{background:var(--orange);color:#fff}
.btn.gold:hover{filter:brightness(.92)}
.btn.sm{padding:5px 11px;font-size:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ================= Filter-/Suchleiste ================= */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters select,.filters input{font-family:inherit;font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.filters input[type=text],.filters input[type=search]{min-width:220px}
.filter-field{display:flex;flex-direction:column;gap:4px}
.filter-field label{font-size:10px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;padding-left:1px}
.filter-reset{align-self:flex-end;font-size:11.5px;font-weight:700;color:var(--indigo);text-decoration:none;cursor:pointer;padding:8px 2px;white-space:nowrap}
.filter-reset:hover{text-decoration:underline}
.filter-search{align-self:flex-end}

/* ================= Katalog-Header ================= */
.catalog-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.catalog-head h3{font-size:15px;font-weight:800;color:var(--ink)}
.catalog-head span{font-size:12px;color:var(--grey)}
.footer-cta-icon{font-size:20px;flex-shrink:0}

/* ================= Asset-Karten (Kampagnendetail-Assets-Tab) ================= */
.asset-cat-label{font-size:9.5px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;display:flex;align-items:center;gap:5px}
/* Content-Herkunfts-Tag (13.07.2026): unterscheidet echte PIM-Inhalte (seit Onboarding-Migration,
   z.B. Vinz) von Dummy-Content aus dem ersten Marketplace-Prototyp — bewusst nicht automatisch
   entfernt, siehe contentTag() in marketplace.js. */
.content-tag{font-size:8.5px;font-weight:700;text-transform:none;letter-spacing:0;padding:1px 6px;border-radius:999px;white-space:nowrap}
.content-tag-live{background:var(--green-bg);color:var(--green)}
.content-tag-proto{background:var(--indigo-light);color:var(--indigo-dark)}
/* Seitliche Facetten-Navigation über die Klassifikationsmerkmale im Assets-Tab (13.07.2026) —
   gleiches Muster wie das Onboarding-Vorbild (assets/onboarding.css .onb-facets): sticky Sidebar
   mit Zähler je Rubrik, ersetzt die vorherige horizontale Filter-Chip-Reihe. */
.mp-assets-layout{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.mp-facets{width:190px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;position:sticky;top:16px}
.mp-facet-group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--grey);padding:6px 10px 2px}
.mp-facet-group-title-sub{margin-top:4px;border-top:1px solid var(--line);padding-top:8px}
.mp-facet{display:flex;justify-content:space-between;align-items:center;width:100%;border:none;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink);text-align:left}
.mp-facet:hover{background:var(--card)}
.mp-facet.active{background:var(--indigo-light);color:var(--indigo-dark);font-weight:700}
.mp-subfacet{padding-left:20px;font-size:12px}
.mp-facet-count{color:var(--grey);font-size:11px}
.mp-facet.active .mp-facet-count{color:var(--indigo-dark)}
/* Schnellvorschau-Lightbox (identisch zum Onboarding .onb-lightbox) — "Anzeigen" öffnet keinen
   neuen Tab mehr, sondern dieses Overlay. Bild mit Zoom/Pan, Video/PDF ohne Zoom-Toolbar. */
.mp-lightbox-trigger{cursor:zoom-in}
.mp-lightbox{position:fixed;inset:0;background:rgba(10,10,12,.92);z-index:9999;display:none;flex-direction:column}
.mp-lightbox.open{display:flex}
.mp-lightbox-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;flex-shrink:0}
.mp-lightbox-toolbar button{background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:8px;padding:6px 12px;font-size:15px;cursor:pointer;line-height:1;font-family:inherit}
.mp-lightbox-toolbar button:hover{background:rgba(255,255,255,.22)}
.mp-lightbox-toolbar .mp-lightbox-close{font-size:14px}
.mp-lightbox-zoom-label{color:#e8e8e8;font-size:12.5px;min-width:44px;text-align:center}
/* Bei Video/PDF sind die Zoom-Bedienelemente sinnlos — nur Schließen bleibt sichtbar. */
.mp-lightbox.mp-lightbox-media .mp-lightbox-zoom-out,.mp-lightbox.mp-lightbox-media .mp-lightbox-zoom-in,.mp-lightbox.mp-lightbox-media .mp-lightbox-zoom-label,.mp-lightbox.mp-lightbox-media .mp-lightbox-reset{display:none}
.mp-lightbox-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-out}
.mp-lightbox-img{max-width:92vw;max-height:82vh;object-fit:contain;transition:transform .06s linear;user-select:none;-webkit-user-drag:none}
.mp-lightbox-video{max-width:92vw;max-height:82vh}
.mp-lightbox-embed{width:92vw;height:82vh;border:none;background:#fff}
.mp-assets-main{flex:1 1 320px;min-width:0}
.mp-assets-side{width:260px;flex-shrink:0}
/* Tablet (Nutzer-Report 14.07.2026): früher zog die Klassifikation im Spaltenlayout auf volle
   Breite, Bilder rutschten darunter. Jetzt bleibt die Facetten-Sidebar schmal und die Bilder
   stehen rechts daneben — nur die rechte Info-Spalte wandert per flex-wrap auf eine eigene Zeile. */
@media(max-width:900px){.mp-assets-side{flex-basis:100%;width:100%}}
/* Echtes Mobil: erst hier die Facetten oben über die Bilder stapeln. */
@media(max-width:560px){.mp-facets{position:static;width:100%}.mp-assets-main{flex-basis:100%}}
/* Attribut-Zeile Ambientebilder (Klassifikation/Lead-Quelle/Größe/Stilrichtung), 13.07.2026 */
.asset-attrs{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}
.asset-attr{font-size:9.5px;color:var(--grey);background:var(--card);border:1px solid var(--line);padding:2px 6px;border-radius:6px;white-space:nowrap}
.card .cover .asset-menu{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:6px;border:none;background:rgba(255,255,255,.9);color:var(--ink);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.card .cover .asset-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(18,21,63,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}

/* ================= Umsetzungsschritte Icon-Kette (Empfohlene Aktionen) ================= */
.step-tiles{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:10px}
.step-tile{flex:1;min-width:140px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
.step-tile-icon{width:26px;height:26px;border-radius:8px;background:var(--indigo-light);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.step-tile b{font-size:12px}
.step-tile span{font-size:11px;color:var(--grey);line-height:1.4}
.step-tile-arrow{display:flex;align-items:center;color:var(--line);font-size:16px}
@media(max-width:820px){.step-tile-arrow{display:none}}

/* ================= Performance-Tab Erweiterungen ================= */
.kpi-ic{font-size:15px;margin-bottom:4px}
.info-ic{font-size:10px;color:var(--grey);cursor:help;margin-left:3px}
.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.donut-center b{display:block;font-size:15px;color:var(--ink)}
.donut-center span{font-size:9px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em}
.insight-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}
.insight-row:last-of-type{border-bottom:none}
.insight-row p{margin:0;color:var(--ink)}

/* ================= Aktivierungsanleitung-Akkordeon ================= */
.anleitung-step-row{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.anleitung-step-head{width:100%;display:flex;align-items:center;gap:10px;padding:13px 16px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink);text-align:left}
.anleitung-step-head .chevron{color:var(--grey);font-size:11px;width:12px}
.anleitung-step-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:0 16px 14px}

/* ================= Aktivierungs-Modal Erweiterungen ================= */
.hint-box{display:flex;flex-direction:column;gap:2px;background:var(--indigo-light);border-radius:8px;padding:10px 12px;font-size:11.5px;color:var(--indigo-dark)}
.hint-box b{font-size:12px}
.summary-card{background:var(--card);border-radius:10px;overflow:hidden}
.summary-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.summary-row:last-child{border-bottom:none}
.summary-ic{font-size:15px;flex-shrink:0}
.summary-row div{flex:1;display:flex;flex-direction:column;gap:1px}
.summary-row div b{font-size:11.5px}
.summary-row div span{font-size:12px;color:var(--ink)}
.summary-edit{background:none;border:none;color:var(--grey);cursor:pointer;font-size:13px;padding:2px 4px;flex-shrink:0}
.summary-edit:hover{color:var(--indigo)}

/* ================= Kategorie-/Icon-Kacheln ================= */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.icon-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;cursor:default}
.icon-tile .ic{width:38px;height:38px;border-radius:10px;background:var(--indigo-light);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:9px}
.icon-tile .name{font-weight:700;font-size:12.5px;color:var(--ink)}
.icon-tile .cnt{font-size:10.5px;color:var(--indigo);font-weight:700;margin-top:2px}
.icon-tile .desc{font-size:10px;color:var(--grey);margin-top:2px}
.icon-tile .flink{font-size:11px;margin-top:8px}

/* ================= Kalender ================= */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cal-dow{background:var(--card);padding:6px;font-size:10px;font-weight:700;color:var(--grey);text-align:center}
.cal-cell{background:#fff;min-height:74px;padding:5px;font-size:10px}
.cal-cell.cal-cell-muted{background:var(--card)}
.cal-cell.cal-cell-muted .dnum{color:#C3C6D4}
.cal-cell .dnum{font-size:10.5px;font-weight:700;color:var(--grey);margin-bottom:3px}
.cal-chip{display:flex;flex-direction:column;gap:0;font-size:9px;font-weight:700;padding:3px 5px;border-radius:5px;margin-bottom:2px;overflow:hidden}
.cal-chip .cal-chip-ic{font-size:9px;margin-bottom:1px}
.cal-chip b{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip span:last-child{font-size:8px;font-weight:400;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.cal-legend-item{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--grey)}
.cal-legend-dot{width:9px;height:9px;border-radius:3px}
.cal-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cal-nav select{font-family:inherit;font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}

/* ================= Insight-Karten ================= */
.insight-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:10px}
.insight-ic{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.insight-body b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:2px}
.insight-body p{font-size:11px;color:var(--grey);margin-bottom:4px}
.insight-body .rec{font-size:11px;font-weight:700;color:var(--indigo)}

/* ================= Deutschland-Ranking (statt echter Karte) ================= */
.region-bar-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.region-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ================= Modal (Aktivierungs-Flow) ================= */
.modal-backdrop{position:fixed;inset:0;background:rgba(18,21,63,.5);display:none;align-items:center;justify-content:center;z-index:500}
.modal-backdrop.open{display:flex}
.modal{background:#fff;border-radius:14px;max-width:560px;width:92%;max-height:86vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{background:var(--navy);color:#fff;padding:16px 20px;border-radius:14px 14px 0 0;display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:15px;display:flex;flex-direction:column;gap:2px}
.modal-subtitle{font-size:11px;font-weight:400;color:#B8B3F5}
.modal-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;opacity:.8}
.modal-close:hover{opacity:1}
.modal-body{padding:18px 20px}
.modal-steps{display:flex;gap:6px;margin-bottom:16px}
.modal-steps .step{flex:1;height:4px;border-radius:2px;background:var(--line)}
.modal-steps .step.done{background:var(--indigo)}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between}
.check-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.check-row:last-child{border-bottom:none}

/* ================= Placeholder-Module ================= */
.placeholder-hero{background:linear-gradient(135deg,var(--indigo),var(--navy-2));color:#fff;border-radius:12px;padding:26px 28px;margin-bottom:18px}
.placeholder-hero h2{color:#fff;font-size:20px}
.placeholder-hero p{color:#DCD9FA;font-size:12.5px;margin-top:4px}
.ph-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ph-tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px;text-align:center}
.ph-tile .icon{font-size:24px;margin-bottom:6px}
.ph-tile .name{font-weight:700;font-size:12.5px;color:var(--ink)}
.ph-tile .tag{font-size:10px;color:var(--grey);margin-top:3px}

.note{font-size:10.5px;color:var(--grey);margin-top:10px;line-height:1.55;border-left:3px solid var(--indigo);padding-left:12px}
footer{text-align:center;font-size:10.5px;color:var(--grey);margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}

@media(max-width:1100px){.grid2,.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.sidebar-v{width:70px}.sb-logo .claim,.sb-user-info,.sb-nav button span.lbl-text{display:none}}

/* ================= TEMPORÄRE BEHELFSFUNKTION: Mockup-Gegenkontrolle-Panel =================
   Später wieder ausbauen (siehe CLAUDE.md, assets/review-panel.js). */
.review-tab{position:fixed;right:0;top:45%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  background:var(--indigo);color:#fff;border:none;padding:14px 8px;border-radius:8px 0 0 8px;
  font-size:12px;font-weight:700;cursor:pointer;z-index:450;box-shadow:-2px 0 8px rgba(18,21,63,.15);letter-spacing:.3px}
.review-tab:hover{background:var(--indigo-dark)}
.review-tab.open{right:420px}
.review-panel{position:fixed;top:0;right:-440px;width:420px;height:100vh;background:#fff;
  box-shadow:-6px 0 24px rgba(18,21,63,.18);z-index:440;display:flex;flex-direction:column;
  transition:right .22s ease}
.review-panel.open{right:0}
.review-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;background:var(--navy);color:#fff;flex-shrink:0}
.review-panel-title{font-size:13px;font-weight:700}
.review-panel-head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.review-panel-overview-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;cursor:pointer}
.review-panel-overview-btn:hover{background:rgba(255,255,255,.22)}
.review-panel-overview-btn.active{background:#fff;color:var(--navy)}
.review-panel-close{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.8}
.review-panel-close:hover{opacity:1}
.review-panel-mockup{flex-shrink:0;height:42vh;background:var(--card);border-bottom:1px solid var(--line);
  position:relative;display:flex;flex-direction:column}
.review-embed{width:100%;flex:1;border:none}
.review-img{width:100%;flex:1;object-fit:contain;background:#fff;padding:6px}
.review-fallback-link{display:block;text-align:center;font-size:10.5px;padding:5px;background:#fff;
  color:var(--indigo);text-decoration:none;border-top:1px solid var(--line)}
.review-empty{padding:16px;font-size:12px;color:var(--grey);font-style:italic}
.review-panel-body{flex:1;overflow-y:auto;padding:12px 16px}
.review-todo-head{font-size:11px;font-weight:700;color:var(--grey);text-transform:uppercase;
  letter-spacing:.3px;margin-bottom:8px}
.review-todo{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.review-todo:last-child{border-bottom:none}
.review-todo.done .review-todo-text{color:var(--grey);text-decoration:line-through}
.review-todo.deferred .review-todo-text{color:var(--orange)}
.review-todo-icon{flex-shrink:0}
.review-todo-text{flex:1;line-height:1.5}
.review-todo-actions{display:flex;gap:3px;flex-shrink:0}
.review-todo-actions button{background:var(--card);border:1px solid var(--line);border-radius:5px;
  width:22px;height:22px;font-size:11px;cursor:pointer;padding:0}
.review-todo-actions button:hover{border-color:var(--indigo);color:var(--indigo)}
/* Eigene, frei anlegbare Notizen (Fragen/Aufgaben, mit Person) + zentrale Übersicht (13.07.2026) */
.review-task-meta{display:block;font-size:10px;color:var(--grey);font-weight:700;margin-bottom:2px}
.review-task-context-link{color:var(--indigo);font-weight:700;text-decoration:none;cursor:pointer}
.review-task-context-link:hover{text-decoration:underline}
.review-task-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.review-task-form-row{display:flex;gap:6px}
.review-task-form-row select,.review-task-form-row input{font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;flex:1;min-width:0}
.review-task-form-row select{flex:0 0 100px}
.review-task-form-row button{flex-shrink:0;background:var(--indigo);color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.review-task-form-row button:hover{background:var(--indigo-dark)}
.review-person-filter{display:flex;align-items:center;gap:8px;padding:8px 0 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.review-person-filter label{font-size:11px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.review-person-filter select{flex:1;min-width:0;font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
.review-task-editing{align-items:stretch}
.review-task-edit-save,.review-task-edit-cancel{flex:0 0 auto;width:34px;padding:6px 0}
.review-task-edit-cancel{background:var(--card);color:var(--grey);border:1px solid var(--line)}
.review-task-edit-cancel:hover{background:var(--line)}

/* Landingpage-Bausteine (Assets & Brand Library — DIVA Portal Live-Widget-Embeds) */
.lp-org-select{font-size:12px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:260px}
.lp-widget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.lp-widget-card .lp-widget-preview{height:140px;overflow:hidden;background:#f5f5f7;border-bottom:1px solid var(--line)}
.lp-widget-preview iframe{width:200%;height:280px;border:none;transform:scale(.5);transform-origin:top left}
.lp-hero-block{margin:10px 0 16px;display:flex;flex-direction:column;gap:8px;max-width:520px}
.lp-hero-preview{position:relative;height:180px;overflow:hidden;background:#f5f5f7;border:1px solid var(--line);border-radius:10px}
.lp-hero-preview img{width:100%;height:100%;object-fit:cover;display:block}
.lp-hero-preview .lp-hero-fallback{display:none;align-items:center;justify-content:center;height:100%;color:var(--muted,#888);font-size:12px}
.lp-hero-preview.lp-hero-missing img{display:none}
.lp-hero-preview.lp-hero-missing .lp-hero-fallback{display:flex}
.lp-hero-block > a.btn{align-self:flex-start}
.lp-section{margin-top:14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lp-section-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;user-select:none;background:#fafafa}
.lp-section-summary::-webkit-details-marker{display:none}
.lp-section-summary::before{content:'▸';font-size:12px;color:var(--grey);margin-right:8px;transition:transform .15s}
.lp-section[open] .lp-section-summary::before{transform:rotate(90deg)}
.lp-section-title{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.lp-pkg-badge{font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fff3d6;color:#8a5a00;border:1px solid #f0d089;border-radius:999px;padding:2px 9px}
.lp-section-hint{font-size:11px;color:var(--grey);text-align:right}
.lp-section > p.ph, .lp-section > .lp-widget-grid{margin-left:14px;margin-right:14px}
.lp-section > .lp-widget-grid{margin-bottom:14px}

/* ===== Content-Studio (Modul-Namensraum cs-) ===== */
.cs-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.cs-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;font-size:13px;font-weight:700;color:var(--grey);cursor:pointer;font-family:inherit}
.cs-tab:hover{color:var(--indigo)}
.cs-tab.active{color:var(--indigo);border-bottom-color:var(--indigo)}
.cs-schicht-kopf h3{margin:0 0 2px;font-size:16px}
.cs-schicht-kopf .note{margin-top:8px}
.cs-stufen{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.cs-stufen-label{align-self:center;font-size:12px;font-weight:700;color:var(--grey);margin-right:2px}
.cs-stufe-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;min-width:132px}
.cs-stufe-btn b{font-size:13px;color:var(--ink)}
.cs-stufe-btn span{font-size:10.5px;color:var(--grey)}
.cs-stufe-btn:hover{border-color:var(--indigo)}
.cs-stufe-btn.active{border-color:var(--indigo);background:var(--indigo-light);box-shadow:0 1px 4px rgba(91,79,229,.15)}
.cs-preis-hinweis{font-size:11px;color:var(--grey);margin:4px 0 16px;line-height:1.5}
.cs-gruppe{font-size:13px;margin:18px 0 8px;color:var(--ink)}
.cs-gruppe-sub{font-weight:400;color:var(--grey);font-size:11.5px}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cs-card{position:relative;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;display:flex;flex-direction:column}
.cs-card-paket{border-color:#e0b568;background:#fffdf8}
.cs-badge{position:absolute;top:10px;right:12px;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:9px;background:#fdf1de;color:#a06a1e}
.cs-card-name{font-size:13.5px;font-weight:800;margin-bottom:4px;padding-right:52px}
.cs-card-desc{font-size:12px;color:var(--grey);line-height:1.5;flex:1}
.cs-inhalt{margin:8px 0 0;padding-left:16px;font-size:11.5px;color:var(--grey)}
.cs-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.cs-preis{font-size:15px;font-weight:800;color:var(--ink)}
.cs-preis-anfrage{font-size:12px;font-weight:700;color:#a06a1e;background:#fdf1de;padding:2px 8px;border-radius:9px}
.cs-einheit{font-size:10.5px;color:var(--grey)}
.cs-tablewrap{overflow-x:auto}
.cs-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cs-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);padding:6px 10px;border-bottom:1px solid var(--line)}
.cs-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cs-summe{margin:14px 0 12px}
.cs-summe > div{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.cs-summe b{font-size:16px}
.cs-summe-offen{font-size:11.5px;color:#a06a1e;margin-top:4px;justify-content:flex-start !important}

/* ===== Prompt-Bibliothek (Modul-Namensraum pl-) ===== */
.pl-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.pl-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;font-size:13px;font-weight:700;color:var(--grey);cursor:pointer;font-family:inherit}
.pl-tab:hover{color:var(--indigo)}
.pl-tab.active{color:var(--indigo);border-bottom-color:var(--indigo)}
.pl-layout{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.pl-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;max-height:70vh;overflow:auto}
.pl-side-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);font-weight:800;padding:6px 8px}
.pl-kat{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;text-align:left;background:none;border:none;padding:7px 9px;border-radius:7px;font-size:12.5px;color:var(--ink);cursor:pointer;font-family:inherit}
.pl-kat:hover{background:var(--card)}
.pl-kat.active{background:var(--indigo-light);color:var(--indigo);font-weight:700}
.pl-kat-count{font-size:10px;color:var(--grey);background:var(--card);padding:1px 6px;border-radius:9px}
.pl-main{min-width:0}
.pl-kopf{margin-bottom:10px}
.pl-kopf h3{font-size:16px;margin:0 0 3px}
.pl-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--grey)}
.pl-stil{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px;overflow:hidden}
.pl-stil-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:10px 14px;cursor:pointer;font-family:inherit;text-align:left}
.pl-stil-head:hover{background:var(--card)}
.pl-stil-name{font-size:13px;font-weight:800;color:var(--ink);flex:1}
.pl-quelle{font-size:10px;font-weight:800;padding:2px 8px;border-radius:9px;background:var(--card);color:var(--grey)}
.pl-quelle-overlay{background:var(--indigo-light);color:var(--indigo)}
.pl-chev{color:var(--grey);font-size:11px}
.pl-prompt{margin:0;padding:12px 14px;border-top:1px solid var(--line);background:#fbfbfd;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto;color:var(--ink)}
.pl-stil-foot{padding:8px 14px;border-top:1px solid var(--line)}
.pl-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:10px}
.pl-form label,.pl-full{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:700;color:var(--grey)}
.pl-full{margin-bottom:10px}
.pl-form input,.pl-form select,.pl-full input,.pl-full textarea{font-family:inherit;font-size:12.5px;padding:7px;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-weight:400}
.pl-full textarea{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.6}
.pl-hint{font-weight:400;color:var(--grey);font-size:10.5px}
.pl-actions{display:flex;align-items:center;gap:8px}
.pl-status{font-size:11.5px;color:var(--grey)}
.pl-stil-check{display:flex;gap:12px;flex-wrap:wrap;padding:6px 0}
.pl-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:400;color:var(--ink)}
.pl-tablewrap{overflow-x:auto}
.pl-table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
.pl-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);padding:8px 10px;border-bottom:1px solid var(--line)}
.pl-table td{padding:9px 10px;border-bottom:1px solid var(--line)}
.pl-global{font-size:11px;color:var(--grey);font-style:italic}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pl-job{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px}
.pl-job-name{font-size:13.5px;font-weight:800;margin-bottom:6px}
.pl-job-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--grey);margin-bottom:8px}
.pl-job-stile{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.pl-chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:9px;background:var(--indigo-light);color:var(--indigo)}
.pl-job-notiz{font-size:11.5px;color:var(--grey);line-height:1.5;padding-top:8px;border-top:1px solid var(--line);margin-bottom:8px}
.pl-job-foot{display:flex;gap:6px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line)}

/* ===== Kandidaten-Interessensschwelle (GAP 2.3) ===== */
.progress-fill-done{background:var(--green) !important}
.schwelle-box{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:9px;background:var(--green-bg);border:1px solid #b9e3cc;margin-bottom:10px}
.schwelle-box b{font-size:12.5px;color:var(--green)}
.schwelle-box span{font-size:11.5px;color:var(--ink);line-height:1.5}
.signup-liste{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.signup-titel{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);font-weight:800;margin-bottom:6px}
.signup-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid var(--line)}
.signup-row:last-child{border-bottom:none}
.signup-row span{color:var(--grey);font-size:11px}

/* ---- Reifegrad-Modell: kompakter Karten-Strip + Legende + Detail-Panel (Strategiepapier Abschnitt 4) ---- */
.rg-strip{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 4px}
.rg-grp{display:flex;flex-direction:column;gap:3px}
.rg-grp-lab{font-size:9.5px;color:var(--grey);letter-spacing:.4px;text-transform:uppercase;font-weight:700}
.rg-grp-syms{display:flex;gap:4px}
.rg-sym{height:22px;min-width:30px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;border:0.5px solid var(--line);color:var(--grey);font-size:11.5px;font-weight:700;background:transparent}
.rg-sym.on{background:var(--green-bg);color:var(--green);border-color:transparent}
.rg-sym.demand{border-color:var(--orange);color:var(--orange)}
.rg-legend{background:var(--card);border:0.5px solid var(--line);border-radius:8px;padding:9px 12px;margin:0 0 12px;font-size:11.5px;color:var(--ink);line-height:1.8}
.rg-legend b{font-weight:800}
.rg-legend-keys{margin-bottom:6px}
.rg-legend-states{display:flex;gap:16px;flex-wrap:wrap;align-items:center;color:var(--grey)}
.rg-legend-states>span{display:inline-flex;align-items:center;gap:6px}

/* Übersichtsliste (Scan) = kompakte Form der Füllstandsanzeige, Design-Spezifikation Abschnitt 9.4:
   beschriftete Segment-Kürzel statt stummer Balken + Sorten-Akzent als dünner Tick links.
   Grün AUSSCHLIESSLICH „vorhanden"; Sorten-Akzente nur am Tick (Content violett · Creative magenta ·
   Catalog koralle). Reihenfolge immer Content → Creative → Catalog. */
.rgbar-strip{margin:10px 0 4px;padding:8px 10px;background:var(--card);border:0.5px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:6px}
.rgbar-line{display:flex;align-items:center;gap:8px;padding-left:7px;border-left:3px solid var(--line)}
.rgbar-line.rgb-cf{border-left-color:#7F77DD}
.rgbar-line.rgb-kf{border-left-color:#D4537E}
.rgbar-line.rgb-cc{border-left-color:#D85A30}
.rgbar-lab{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--grey);width:56px;flex-shrink:0}
.rgbar-track{display:flex;gap:4px;flex:1}
.rgbar-seg{flex:1;font-size:10.5px;font-weight:700;text-align:center;padding:3px 2px;border-radius:4px;border:0.5px solid var(--line);color:var(--grey);background:#fff}
.rgbar-seg.on{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.rgbar-chip{font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;letter-spacing:.2px}
.rgbar-chip.stock{background:var(--green-bg);color:var(--green)}
.rgbar-chip.demand{background:var(--orange-bg);color:var(--orange)}
/* Mini-Bedarf je Zeile + vollständig-Häkchen */
.rgbar-bedarf{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:10px;border:1px solid var(--indigo);color:var(--indigo);background:none;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.rgbar-bedarf:hover{background:var(--indigo-light)}
.rgbar-bedarf.done{border-color:var(--green);color:var(--green);cursor:default}
.rgbar-ok{font-size:12px;color:var(--green);flex-shrink:0;width:auto}
/* Karten-Auswahl + Sammelleiste */
.card .cover .sel-btn{position:absolute;top:6px;right:38px;width:26px;height:26px;border-radius:6px;border:1.5px solid rgba(255,255,255,.9);background:rgba(255,255,255,.5);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.card .cover .sel-btn.active{background:var(--indigo);border-color:var(--indigo)}
.card.rg-selected{outline:2px solid var(--indigo);outline-offset:-1px}
.catalog-head .rg-selall{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--indigo);background:none;border:none;cursor:pointer;font-family:inherit;padding:4px 6px}
.rg-bulkbar{display:flex;align-items:center;gap:10px;background:var(--indigo-light);border:1px solid var(--indigo);border-radius:10px;padding:9px 14px;margin-bottom:12px}
.rg-bulkbar .ic{font-size:16px;color:var(--indigo)}
.rg-bulk-count{font-size:13px;font-weight:700;color:var(--indigo)}
.rg-bulk-actions{margin-left:auto;display:flex;gap:8px}
/* Aktivierungs-Zustände vorhandener Bausteine (Detail-Kachel) */
.rg-sym.rg-activate{cursor:pointer;font-family:inherit;border:1px solid var(--green);color:var(--green);background:transparent}
.rg-sym.rg-activate:hover{background:var(--green-bg)}
.rg-sym.rg-pending{border:1px solid var(--orange);color:var(--orange);background:var(--orange-bg)}
.rg-sym.rg-rejected{cursor:pointer;font-family:inherit;border:1px solid var(--red);color:var(--red);background:transparent}
.rg-sym.rg-rejected:hover{background:var(--red-bg,#fdecec)}
/* „in Vertretung" (Admin) = gestrichelt; read-only (Gast) = nicht klickbar, gedämpft */
.rg-sym.iv{border-style:dashed}
.rgbar-bedarf.iv{border-style:dashed}
.rg-sym.ro{cursor:default;opacity:.7}
.rgside-iv{font-size:10px;line-height:1.5;margin-top:8px;padding:7px 9px;border-radius:7px;background:var(--orange-bg);color:var(--orange)}
.rgside-iv.ro{background:var(--card);color:var(--grey)}
/* Modul „DIVA Connect Freigaben": Genehmigungs-Inbox */
.fg-list{display:flex;flex-direction:column}
.fg-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:0.5px solid var(--line)}
.fg-row:last-child{border-bottom:none}
.fg-info{flex:1;min-width:0}
.fg-info b{font-size:13px;color:var(--ink);display:block}
.fg-info span{font-size:11.5px;color:var(--grey)}
.fg-actions{display:flex;gap:8px;flex-shrink:0}
.fg-row.done{opacity:.85}
.fg-state{font-size:11.5px;font-weight:700;flex-shrink:0}
.fg-state.ok{color:var(--green)}
.fg-state.no{color:var(--red)}
/* Modul „Meine Anträge": Status-Chips + Vertretungs-Badge */
.ma-status{font-size:11px;font-weight:700;padding:2px 10px;border-radius:11px;flex-shrink:0}
.ma-status.pending{background:var(--orange-bg);color:var(--orange)}
.ma-status.ok{background:var(--green-bg);color:var(--green)}
.ma-status.no{background:var(--red-bg);color:var(--red)}
.ma-status.bedarf{background:var(--indigo-light);color:var(--indigo)}
.ma-iv{font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;background:var(--orange-bg);color:var(--orange);margin-left:4px}
/* Modul „Application-Center" (Super-Admin, Phase-1-Sim) */
.ac-note{font-size:11.5px;color:var(--grey);line-height:1.5;background:var(--orange-bg);border-radius:8px;padding:9px 12px}
.ac-org{padding:12px 2px;border-bottom:0.5px solid var(--line)}
.ac-org:last-child{border-bottom:none}
.ac-head{display:flex;align-items:center;gap:12px}
.ac-info{flex:1;min-width:0}
.ac-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.ac-sub{font-size:11.5px;color:var(--grey)}
.ac-status{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:12px;flex-shrink:0}
.ac-status.muted{background:var(--card);color:var(--grey)}
.ac-status.pending{background:var(--orange-bg);color:var(--orange)}
.ac-status.ok{background:var(--green-bg);color:var(--green)}
.ac-actions{display:flex;gap:8px;flex-shrink:0}
.ac-modlabel{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);font-weight:700;margin:9px 0 5px}
.ac-mods{display:flex;gap:6px;flex-wrap:wrap}
.ac-modchip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:11px;border:1px dashed var(--line);color:var(--grey);background:none;cursor:pointer;font-family:inherit}
.ac-modchip:hover{border-color:var(--grey)}
.ac-modchip.on{background:var(--green-bg);color:var(--green);border:1px solid var(--green)}

.rg2 .rg2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 10px}
.rg2 .rg2-grid3{grid-template-columns:1fr 1fr 1fr}
.rg2-syms{margin-bottom:8px}
.rg2-cap{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);margin-bottom:6px}
.rg2-bar{display:flex;gap:6px;margin-bottom:8px}
.rg2-seg{flex:1;text-align:center;font-size:11px;font-weight:700;padding:7px 4px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--grey)}
.rg2-seg.on{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.rg2-tool{font-size:11.5px;font-weight:800;padding:6px 10px;border-radius:16px;text-align:center}
.rg2-tool.ready{background:var(--green-bg);color:var(--green);border:1px solid var(--green)}
.rg2-tool.aufbau{border:1px dashed var(--line);color:var(--grey)}
.rg2-creative{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:8px;margin-top:2px;background:var(--card)}
.rg2-creative .rg2-cap{margin:0}
.rg2-citem{font-size:12px;font-weight:800;padding:3px 10px;border-radius:12px}
.rg2-citem.stock{background:var(--green-bg);color:var(--green)}
.rg2-citem.demand{background:var(--orange-bg);color:var(--orange)}
.rg2-note{font-size:10.5px;color:var(--grey);line-height:1.5;margin:8px 0 0}
@media(max-width:640px){.rg2 .rg2-grid{grid-template-columns:1fr}}

/* Kompakte Reifegrad-Kachel in der Detail-Sidebar */
.rgside h3{margin-bottom:6px}
.rgside-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.rgside-lab{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--grey);width:66px;flex-shrink:0}
.rgside-ready{font-size:10.5px;font-weight:700;color:var(--grey);margin:3px 0 0 74px}
.rgside-ready.ok{color:var(--green)}
.rgside-legend{font-size:10px;color:var(--grey);line-height:1.5;margin-top:9px;border-top:0.5px solid var(--line);padding-top:8px}
/* fehlender Baustein = klickbarer Umriss-Button (Bedarf/Bestellung) */
.rg-sym.rg-miss{cursor:pointer;font-family:inherit;border:1px dashed var(--indigo);color:var(--indigo);background:transparent}
.rg-sym.rg-miss:hover{background:var(--indigo-light)}
/* Baustein-Modal: Optionen (Bedarf / Bestellweg) */
.bf-opt{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:9px;cursor:pointer;font-family:inherit}
.bf-opt:hover{background:var(--card)}
.bf-opt.accent{border:2px solid var(--indigo)}
.bf-opt .ic{font-size:18px;line-height:1.3;flex-shrink:0}
.bf-opt b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.bf-opt .sub{display:block;font-size:11px;color:var(--grey);line-height:1.45;font-weight:400}


/* ---------- Meine Widgets: Bausteinliste in der Detailsicht ----------
   Sechs Spalten: WAS ist es · WIE sieht es aus · und vier Wertespalten, die untereinander
   fluchten — nur so sind die Bausteine vergleichbar. Sortiert wird über die Spaltenköpfe.
   Die Wertespalten tragen später zusätzlich Abnahme und Rollout. */
.mw-liste{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(18,21,63,.04)}
.mw-kopf,.mw-zeile{display:grid;grid-template-columns:minmax(150px,1fr) minmax(160px,1.15fr) repeat(4,minmax(68px,.46fr)) minmax(205px,1.15fr)}
.mw-kopf{background:var(--card);border-bottom:1px solid var(--line)}
.mw-kopf>span,.mw-kopf>button{padding:8px 11px;font-size:10px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--grey);text-align:left;background:none;border:0;font-family:inherit}
.mw-kopf>button{cursor:pointer;display:block;width:100%}
.mw-kopf>*:nth-child(n+3){text-align:right}
.mw-kopf>*:last-child{text-align:left}
.mw-kopf>button:hover{color:var(--indigo)}
.mw-kopf>button.an{color:var(--indigo)}
.mw-kopf .mw-pf{opacity:.4;margin-left:2px}
.mw-kopf>button.an .mw-pf{opacity:1}
.mw-kopf>* small{display:block;font-size:9px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--grey);margin-top:1px}
.mw-zeile{border-top:1px solid var(--line)}
.mw-zelle{padding:11px 10px;min-width:0}
.mw-zelle+.mw-zelle{border-left:1px solid var(--line)}
.mw-nr{font-size:10px;color:var(--grey);font-weight:700;margin-right:6px}
.mw-name{font-weight:800;font-size:13.5px;color:var(--ink);margin:0 0 3px}
.mw-nutzen{color:var(--grey);font-size:11.5px;line-height:1.5;margin:0}
.mw-shot{width:100%;display:block;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.mw-vor{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.mw-vor-kopf{font-size:9.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--grey);
  padding:6px 9px;border-bottom:1px solid var(--line);background:var(--card);font-weight:700}
.mw-buehne{position:relative;overflow:hidden;height:190px;transition:height .2s}
.mw-vor iframe{display:block;border:0;width:1180px;height:800px;transform-origin:top left;position:absolute;top:0;left:0}
/* Wertespalte: Zahl gross und rechtsbündig — sie wird von Zeile zu Zeile gelesen, nicht innerhalb. */
.mw-w{text-align:right}
.mw-w{padding:11px 8px}
.mw-w b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.2px}
.mw-w b.leer{font-size:10.5px;font-weight:600;color:var(--grey);line-height:1.35}
.mw-w small{display:block;font-size:9px;color:var(--grey);margin-top:1px;line-height:1.3}
@media(max-width:1180px){
  .mw-kopf{display:none}
  .mw-zeile{grid-template-columns:1fr 1fr}
  .mw-zelle{grid-column:span 2}
  .mw-zelle+.mw-zelle{border-left:0;border-top:1px solid var(--line)}
  .mw-w{grid-column:span 1;text-align:left;display:flex;flex-direction:column}
  .mw-w:nth-child(odd){border-left:1px solid var(--line)}
  .mw-w::before{content:attr(data-k);font-size:9.5px;font-weight:700;letter-spacing:.3px;
    text-transform:uppercase;color:var(--grey);margin-bottom:3px}
}

/* Zweite Gliederungsebene: Modellseiten unter dem Showroom */
.mw-zeile[hidden]{display:none}
.mw-showroom{background:var(--indigo-bg)}
.mw-auf{margin-top:9px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 9px;color:var(--indigo)}
.mw-auf:hover{border-color:var(--indigo)}
.mw-fuehrt{margin:9px 0 0;font-size:11px;line-height:1.45;color:var(--ink-2,var(--ink))}
.mw-fuehrt.ohne{color:var(--grey);font-style:italic}
.mw-platz{border:1px dashed var(--line);border-radius:8px;padding:14px;font-size:11.5px;
  line-height:1.5;color:var(--grey);background:var(--card)}
.mw-w b.ziel{font-size:10px;font-weight:800;color:var(--indigo);background:var(--indigo-light);
  border-radius:6px;padding:2px 6px;display:inline-block;line-height:1.3}
.mw-w b.alt{font-size:12.5px;color:var(--grey);text-decoration:line-through;text-decoration-thickness:1px}

.mw-bruecke{display:block;margin-top:7px;font-size:10.5px;color:var(--grey);font-style:italic}
.mw-welten{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mw-welten .mw-auf{margin-top:0}

/* Showroom-Overlay im Portal (statt neuem Tab, der den Platz in „Meine Widgets" kostet) */
.mw-overlay{position:fixed;inset:0;z-index:9000;background:#151413;display:flex;flex-direction:column}
.mw-ol-leiste{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#1f1e1c;
  color:#f3efe9;font-size:12px;flex:0 0 auto}
.mw-ol-leiste b{font-size:13px}
.mw-ol-leiste span{color:#a29b91;font-size:11px;margin-left:auto;text-align:right}
.mw-ol-leiste button{font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;background:#332f2b;border:1px solid #4a443e;border-radius:7px;
  padding:5px 11px;color:#f3efe9}
.mw-ol-leiste button:hover{background:#433d37}
.mw-overlay iframe{flex:1 1 auto;width:100%;border:0;display:block}

/* Drei Gliederungsebenen als Reiter im Tabellenkopf */
.mw-ebenen{display:flex;flex-wrap:wrap;gap:2px;background:var(--card);border-bottom:1px solid var(--line);padding:0 4px}
.mw-ebenen button{font-family:inherit;cursor:pointer;background:none;border:0;
  border-bottom:3px solid transparent;padding:10px 16px 8px;text-align:left;color:var(--grey)}
.mw-ebenen button b{display:block;font-size:13.5px;font-weight:800;line-height:1.25}
.mw-ebenen button span{display:block;font-size:10.5px;margin-top:2px}
.mw-ebenen button:hover{color:var(--indigo)}
.mw-ebenen button.an{color:var(--indigo);border-bottom-color:var(--indigo);background:#fff}
.mw-ehinweis{margin:0;padding:11px 13px;border-bottom:1px solid var(--line);
  font-size:11.5px;line-height:1.55;color:var(--grey);background:#fff}
.mw-ehinweis b{color:var(--ink)}
.mw-leer{padding:22px 16px;text-align:center;color:var(--grey)}
.mw-leer b{display:block;font-size:14px;color:var(--ink);margin-bottom:6px}
.mw-leer p{margin:0 auto;max-width:74ch;font-size:12px;line-height:1.6}
.mw-leer code{background:var(--card);padding:1px 5px;border-radius:5px;font-size:11px}

/* Abnahme als letzte SPALTE der Zeile — sie fluchtet mit den Kennzahlen */
.mw-ab{display:flex;flex-direction:column;gap:6px;background:var(--card)}
.mw-ab-kopf{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mw-ab-zeit{font-size:9.5px;color:var(--grey)}
.mw-ab-knoepfe{display:flex;gap:4px;flex-wrap:wrap}
.mw-ab button{font-family:inherit;font-size:10.5px;font-weight:700;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:4px 7px;color:var(--grey);line-height:1.2}
.mw-ab button:hover{color:var(--indigo);border-color:var(--indigo)}
.mw-ab button.an{background:var(--indigo-light);border-color:transparent;color:var(--indigo)}
.mw-ab-k{width:100%;font-family:inherit;font-size:11px;padding:5px 7px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.mw-ab-k::placeholder{color:#a6a099}
.mw-ab-kopfzelle{text-align:left!important}
.mw-ab-zaehler{margin-left:auto;align-self:center;padding:0 14px;font-size:11.5px;color:var(--grey)}
.mw-ab-zaehler b{color:var(--ink)}

/* Die Abspruenge der Galerie in die zweite Ebene */
.mw-ziele{margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}
.mw-ziele-kopf{margin:0 0 6px;font-size:10px;font-weight:700;letter-spacing:.2px;
  text-transform:uppercase;color:var(--grey)}
.mw-ziele-kopf em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0}
.mw-ziele-welt{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.mw-zl{font-size:10.5px;line-height:1.2;padding:3px 7px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--grey);text-decoration:none}
.mw-zl:hover{color:var(--indigo);border-color:var(--indigo)}
.mw-zl.kachel{background:var(--indigo-light);border-color:transparent;color:var(--indigo);
  font-weight:700;text-transform:capitalize}
.mw-zl.luecke{border-style:dashed;color:var(--orange)}

/* Abschnitts-Trenner in der Bausteinliste */
.mw-abschnitt{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 13px;background:var(--card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.mw-abschnitt b{font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:var(--ink)}
.mw-abschnitt span{font-size:11px;color:var(--grey)}
.mw-storyzeile{background:var(--indigo-bg)}

.mw-ol-bild{flex:1 1 auto;overflow:auto;background:#151413;display:flex;justify-content:center;
  align-items:flex-start;padding:18px}
.mw-ol-bild img{max-width:1180px;width:100%;height:auto;display:block;border-radius:8px}

/* ---------- Die Buehne: ein Baustein, inszeniert ----------
   Fliegendes Fenster statt randlos. Eine Folie je Baustein, vertikal gewischt
   (scroll-snap), jede mit Zwischentitel. Klick neben die Karte schliesst. */
.mw-bu{position:fixed;inset:0;z-index:9200;background:rgba(14,13,12,.86);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column}
/* `position:relative`, damit offsetTop der Folien gegen den LAUF gemessen wird und
   nicht gegen das Overlay — sonst haengt die Sprungrechnung am Zufall des Aufbaus. */
.mw-bu-lauf{position:relative;flex:1 1 auto;overflow-y:auto;scroll-snap-type:y mandatory;
  overscroll-behavior:contain;cursor:zoom-out}
/* `start`, nicht `center`: gesprungen wird mit scrollIntoView({block:'start'}) — bei
   center-Ausrichtung zieht der Snap den Sprung sofort auf dieselbe Folie zurueck,
   die Pfeiltasten bewegen dann nichts. */
/* FESTE Hoehe, nicht min-height: eine Folie = ein Bildschirm. Nur so bleiben die
   Folienpositionen stehen, waehrend die Rahmen nachladen — sonst wandert das Sprungziel. */
.mw-bu-folie{scroll-snap-align:start;scroll-snap-stop:always;height:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;padding:30px 22px}
.mw-bu-karte{width:100%;max-width:1120px;max-height:100%;background:#fff;border-radius:14px;
  overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.5);cursor:auto;
  display:flex;flex-direction:column}
.mw-bu-titel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;
  background:var(--card);border-bottom:1px solid var(--line)}
.mw-bu-titel .nr{font-family:inherit;font-size:11px;font-weight:800;color:var(--grey);
  letter-spacing:.5px}
.mw-bu-titel b{font-size:15px;color:var(--ink)}
.mw-bu-titel em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--grey)}
.mw-bu-titel .pill{margin-left:auto}
.mw-bu-karte img{display:block;width:100%;height:auto;object-fit:contain;min-height:0}
.mw-bu-rahmen{position:relative;overflow:hidden;height:60vh;background:#fff;flex:0 0 auto}
.mw-bu-rahmen iframe{display:block;border:0;width:1180px;height:800px;
  transform-origin:top left;position:absolute;top:0;left:0}
/* ⚠ z-index wie der Abnahme-Knopf (4), NICHT darunter: das Panel liegt auf 3 und deckte
   das Schliessen-Kreuz zu, sobald es offen war. Esc und ein Klick neben die Karte trugen
   noch — aber der Griff, den man sieht, war tot. */
.mw-bu-zu{position:absolute;top:14px;right:16px;z-index:4;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(28,26,24,.75);
  color:#f3efe9;font-size:15px;cursor:pointer;line-height:1}
.mw-bu-zu:hover{background:rgba(60,55,50,.9)}
.mw-bu-zaehler{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  padding:5px 13px;border-radius:999px;background:rgba(28,26,24,.75);color:#f3efe9;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;pointer-events:none}
button.mw-auf{font-family:inherit}

/* Abnahme-Verlauf: ein Gespraechsfaden je Flaeche. Neuestes unten und im Blick,
   Aelteres durch Hochscrollen — dieselbe Richtung wie in jedem Nachrichtenverlauf. */
/* Der Faden nimmt, was die Zeile hergibt: die Zellen eines Rasters sind gleich hoch,
   und die Hoehe bestimmt fast immer die Vorschau nebenan. `flex:1 1 0` laesst ihn den
   Rest der Zelle fuellen, statt bei einer festen Hoehe abzuschneiden, obwohl darunter
   Platz frei bleibt. `min-height:0` ist noetig, damit er ueberhaupt schrumpfen und
   damit intern scrollen kann. ⚠ NICHT 0: in der schmalen Ansicht (<1180px) stapeln die
   Zellen untereinander, die Zelle hat dann keine ueberschuessige Hoehe zu verteilen — mit
   `min-height:0` fiel der Faden dort auf 14px zusammen. Der Sockel haelt ihn lesbar,
   `flex:1` laesst ihn im breiten Raster trotzdem mitwachsen. */
.mw-ab-verlauf{flex:1 1 0;min-height:78px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:5px;padding:6px 7px;border-radius:7px;
  background:#fff;border:1px solid var(--line)}
.mw-ab-e{font-size:11px;line-height:1.4;position:relative;padding-right:34px}
.mw-ab-e p{margin:0;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.mw-ab-e span{display:block;font-size:9.5px;color:var(--grey);margin-top:1px}
.mw-ab-e + .mw-ab-e{border-top:1px dashed var(--line);padding-top:5px}

/* Der Rueckweg steht in der Ueberschrift: „Meine Widgets › Paket". */
.mw-pfad a{color:var(--indigo);cursor:pointer;text-decoration:none}
.mw-pfad a:hover{text-decoration:underline}
.mw-pfad i{font-style:normal;color:var(--grey);margin:0 8px;font-weight:400}
/* Ganze Seiten auf der Buehne: sie bringen ihr Layout mit, wir skalieren nicht daran herum. */
.mw-bu-rahmen.voll{height:min(70vh,660px);flex:1 1 auto}
.mw-bu-rahmen.voll iframe{position:static;width:100%;height:100%;transform:none}

/* Ablösung: welches alte Widget von welchem neuen — in beide Richtungen lesbar.
   Der letzte Inhalt, den nur die Anlass-Seite trug. */
.mw-abl{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--ink)}
.mw-abl b{font-weight:800}
.mw-abl span{display:block;color:var(--grey);font-size:10px;margin-top:1px}
.mw-abl.weg{color:var(--grey);font-style:italic}

.mw-ab-wer{font-size:9.5px;color:var(--grey);font-weight:700}
.mw-ab-fehlt{margin:0;font-size:10.5px;font-weight:700;color:var(--orange);line-height:1.3}
.mw-ab-zaehler b.warn{color:var(--orange)}

/* Die Art des Beitrags haengt am Beitrag, nicht als Ueberschrift ueber allem, was folgt. */
.mw-ab-e.wunsch{border-left:2px solid var(--orange);padding-left:6px;margin-left:-2px}
.mw-ab-e.frei{border-left:2px solid var(--green);padding-left:6px;margin-left:-2px}
.mw-ab-e.frei p{font-weight:700;color:var(--green)}
.mw-ab-tun{position:absolute!important;top:0;right:0;display:flex;gap:2px;margin:0!important}
.mw-ab-x,.mw-ab-haken{width:15px;height:15px;padding:0;line-height:1;border:0;background:none;
  color:#c3bcb3;font-size:10px;cursor:pointer;font-family:inherit}
.mw-ab-x:hover{color:var(--red)}
.mw-ab-haken:hover{color:var(--green)}
.mw-ab-haken.an{color:var(--green)}
.mw-ab-e.erledigt p{text-decoration:line-through;color:var(--grey)}
.mw-ab-e.erledigt{border-left-color:var(--green)!important;opacity:.75}
.mw-ab-knoepfe .tf{border-color:var(--green);color:var(--green)}
.mw-ab-knoepfe .tf:hover{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.mw-ab-knoepfe .tw:hover{color:var(--orange);border-color:var(--orange)}
.mw-ab-knoepfe .tw.an{background:var(--orange-bg);color:var(--orange)}
.mw-ab-k.wunsch{border-color:var(--orange)}
.mw-ab-k.wunsch::placeholder{color:var(--orange)}

/* ---------- Abnahme-Panel auf der Buehne ----------
   Derselbe Dialog wie in der Liste, von rechts eingeblendet. Die Karte rueckt per
   `transform` nach links statt das Raster zu aendern: eine Layout-Aenderung wuerde die
   Folienhoehen und damit die Sprungziele verschieben, und die eingepassten Rahmen
   muessten neu gerechnet werden. */
.mw-bu-panel{position:absolute;top:0;right:0;bottom:0;width:340px;z-index:3;
  background:var(--card);border-left:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.35)}
.mw-bu-panel[hidden]{display:none}
.mw-bu-panel-kopf{padding:12px 14px;border-bottom:1px solid var(--line);background:#fff}
.mw-bu-panel-kopf b{display:block;font-size:14px;color:var(--ink)}
.mw-bu-panel-kopf span{display:block;font-size:10px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--grey);margin-top:2px}
.mw-bu-panel-leib{flex:1 1 auto;display:flex;min-height:0;padding:10px}
.mw-bu-panel-leib .mw-ab{flex:1 1 auto;border:0;padding:0;background:none;min-height:0}
.mw-bu-panel-auf{position:absolute;top:14px;right:64px;z-index:4;height:38px;padding:0 15px;
  border-radius:19px;border:1px solid rgba(255,255,255,.28);background:rgba(28,26,24,.75);
  color:#f3efe9;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.mw-bu-panel-auf:hover{background:rgba(60,55,50,.9)}
.mw-bu-panel-auf.an{background:#f3efe9;color:#1f1e1c;border-color:transparent}
.mw-bu.mit-panel .mw-bu-lauf{transform:translateX(-170px);transition:transform .18s}
.mw-bu-lauf{transition:transform .18s}
@media(max-width:900px){
  /* Kein Platz zum Ausweichen: das Panel legt sich ueber die ganze Breite. */
  .mw-bu-panel{width:100%;border-left:0}
  .mw-bu.mit-panel .mw-bu-lauf{transform:none}
}