/* ============================================================ Retro Nerd Redaktionszentrale – zentrales Stylesheet Die Abschnitts-Reihenfolge entspricht der früheren Lade- Reihenfolge (externe Datei, dann drei Inline-Blöcke) und darf nicht vertauscht werden, da spätere Abschnitte frühere gezielt überschreiben (Kaskade). 1) Pipeline-Board & Edit-Modal 2) Basis-Layout 3) Operate-Redesign-Overrides 4) Einstellungs-Seite 5) Async-Aktionen (Spinner) 6) Editor-Dichte (kompakter Detail-Editor) 7) Inspirationen-Redesign, Toasts, Meme-Editor ============================================================ */ /* ---- 1) Pipeline-Board & Edit-Modal ---- */ .pipeline-board-section{margin-top:0}.kanban-board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;align-items:start;overflow-x:auto;padding:2px 2px 20px;scrollbar-width:thin}.kanban-column{min-width:0;border:1px solid var(--line);border-radius:12px;background:rgba(var(--tint),.018);overflow:hidden}.kanban-column-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line)}.kanban-column-head h2{margin:0;font-size:15px;font-weight:590;letter-spacing:-.15px}.kanban-column-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.kanban-column-head>span{min-width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}.kanban-stack{display:grid;gap:10px;padding:10px}.kanban-card{display:block;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:rgba(var(--tint),.025);transition:border-color .16s,transform .16s,box-shadow .16s}.kanban-card:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 10px 26px rgba(0,0,0,.28)}.kanban-card:focus-visible{outline:2px solid var(--acid);outline-offset:2px}.kanban-card-media{position:relative;aspect-ratio:4/5;background:var(--sunken);overflow:hidden}.kanban-card-media img,.kanban-card-media video{display:block;width:100%;height:100%;object-fit:cover}.kanban-card-media>span{height:100%;display:grid;place-items:center;color:var(--faint);font-size:12px;text-align:center;padding:0 14px}.kanban-card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:10px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%)}.kanban-card-overlay-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.kanban-card-overlay-top .status{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.kanban-card-overlay-bottom{color:#fff;font-size:11.5px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.65)}.kanban-empty{padding:28px 14px;text-align:center;color:var(--faint);font-size:13px} .edit-modal{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:clamp(12px,2vw,28px);border:0;background:transparent;color:var(--text);overflow:auto}.edit-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}.edit-modal-panel{width:min(1180px,100%);margin:auto;border:1px solid var(--line2);border-radius:14px;background:var(--field);box-shadow:0 32px 100px rgba(0,0,0,.65)}.edit-modal-header{position:sticky;top:0;z-index:4;min-height:78px;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(16,16,20,.96);backdrop-filter:blur(18px);border-radius:14px 14px 0 0}.edit-modal-header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.edit-modal-header-actions form{margin:0}.modal-close{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(var(--tint),.03);font-size:24px;line-height:1}.modal-close:hover{background:rgba(var(--tint),.08)}.edit-modal-layout{display:grid;grid-template-columns:minmax(350px,.9fr) minmax(480px,1.1fr);min-height:650px}.edit-modal-media{padding:20px;border-right:1px solid var(--line);background:#0b0b0e;border-radius:0 0 0 14px}.modal-preview{position:relative;width:100%;margin:0 0 16px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--sunken)} /* Bild-Menü oben rechts auf der Vorschau: ersetzen oder herunterladen. Ersetzen daneben ist absichtlich kein Klick mehr auf das ganze Bild -- der Text darüber lässt sich jetzt direkt anfassen. */ .preview-menu{position:absolute;top:8px;right:8px;z-index:4} .preview-menu>summary{width:32px;height:32px;display:grid;place-items:center;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:16px;line-height:1;cursor:pointer;list-style:none;border:1px solid rgba(var(--tint),.35)} .preview-menu>summary::-webkit-details-marker{display:none} .preview-menu>summary:hover{background:rgba(0,0,0,.7)} .preview-menu-body{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;display:grid;padding:5px;border:1px solid var(--line2);border-radius:9px;background:var(--field);box-shadow:0 18px 40px rgba(0,0,0,.5)} .preview-menu-body .menu-item{text-decoration:none}.modal-preview img,.modal-preview video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:#000}.edit-modal-copy{min-width:0;padding:24px;overflow:auto;border-radius:0 0 14px 0}.modal-copy-intro>span{color:var(--pink);font:600 11px ui-monospace,monospace;letter-spacing:.12em}.modal-copy-intro h3{margin:5px 0 4px;font-size:22px;font-weight:590}.modal-copy-intro p{margin:0;color:var(--muted);font-size:14px}.copy-editor{display:grid;gap:16px;margin-top:22px}.caption-editor{min-height:220px}.hashtags-editor{min-height:86px}.readonly-copy{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:9px;background:rgba(var(--tint),.02)}.readonly-copy>strong{font-size:17px}.readonly-copy p{white-space:pre-wrap;color:var(--soft);font-size:14px}.modal-disclosure{margin-top:16px;border:1px solid var(--line);border-radius:9px;background:rgba(var(--tint),.018);overflow:hidden}.modal-disclosure>summary{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;list-style:none;cursor:pointer}.modal-disclosure>summary::-webkit-details-marker{display:none}.modal-disclosure>summary strong{display:block;font-size:14px}.modal-disclosure>summary small{display:block;margin-top:2px;color:var(--muted);font-size:12px}.modal-disclosure>summary>span:last-child{color:var(--accent-text);font-size:20px;transition:transform .16s}.modal-disclosure[open]>summary>span:last-child{transform:rotate(90deg)}.modal-disclosure-body{padding:15px;border-top:1px solid var(--line)}.modal-compact-grid{margin:14px 0}.modal-actions{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}.modal-safety{margin-bottom:14px;padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--tint),.025)}.modal-safety.warn{border-color:rgba(255,179,46,.35);background:rgba(255,179,46,.06)} .modal-safety.warn a{color:var(--accent-text)} .modal-safety.success{border-color:rgba(57,217,138,.25);background:rgba(57,217,138,.05)}.modal-safety strong{font-size:14px}.modal-safety p{margin:3px 0 0;color:var(--muted);font-size:13px}.reject-drawer{flex:1;margin:0!important}.reject-drawer>summary{min-height:44px!important}.edit-modal-copy>.modal-disclosure{margin-top:20px} body:has(.edit-modal[open]),body:has(.form-modal[open]){overflow:hidden} @media(max-width:1180px){.kanban-board{grid-template-columns:repeat(4,minmax(270px,1fr))}.edit-modal-layout{grid-template-columns:minmax(310px,.82fr) minmax(430px,1.18fr)}} @media(max-width:820px){.edit-modal{padding:0}.edit-modal-panel{border-radius:0;border-left:0;border-right:0;min-height:100%}.edit-modal-header{padding:14px 16px;border-radius:0}.edit-modal-layout{grid-template-columns:1fr}.edit-modal-media{border-right:0;border-bottom:1px solid var(--line);padding:16px;border-radius:0}.edit-modal-copy{padding:20px;border-radius:0}.kanban-board{margin-right:-14px;padding-right:14px} } @media(max-width:520px){.kanban-board{grid-template-columns:repeat(4,minmax(82vw,1fr))}.edit-modal-copy{padding:18px 16px}.form-grid{grid-template-columns:1fr}.caption-editor{min-height:180px}} .pipeline-tabs{display:flex;gap:6px;margin-bottom:18px;padding:5px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--tint),.018);overflow-x:auto}.pipeline-tabs a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 15px;border-radius:7px;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}.pipeline-tabs a:hover{background:rgba(var(--tint),.035);color:var(--soft)}.pipeline-tabs a.active{background:var(--raised);color:var(--text);box-shadow:inset 0 -2px var(--acid)}.pipeline-tabs b{min-width:24px;padding:2px 7px;border:1px solid var(--line2);border-radius:999px;color:var(--soft);font-size:11px;text-align:center}.kanban-board{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));overflow:visible}.kanban-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:10px} @media(max-width:620px){.pipeline-tabs a{flex:1 0 auto;padding-inline:12px}.kanban-board{grid-template-columns:1fr}.kanban-board{margin-right:0;padding-right:2px}} /* ---- 2) Basis-Layout ---- */ :root{--bg:#08090a;--side:#0d0e11;--panel:#111216;--raised:#17181d;--hover:#1d1e24;--line:rgba(var(--tint),.075);--line2:rgba(var(--tint),.13);--text:#f7f8f8;--soft:#d0d2d7;--muted:#858993;--faint:#5b5f68;--acid:#c8ff3d;--pink:#ff3b70;--green:#39d98a;--orange:#ffad42;--blue:#73a7ff;--r:10px;--shadow:0 20px 60px rgba(0,0,0,.34)} *{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter,Avenir,"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv01","ss03"}button,input,textarea{font:inherit}button,a,summary{touch-action:manipulation}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}button{color:inherit}.shell{display:grid;grid-template-columns:226px minmax(0,1fr);min-height:100vh} .sidebar{position:sticky;top:0;height:100vh;padding:18px 13px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30}.logo{display:flex;align-items:center;gap:11px;padding:5px 8px 21px}.logo-mark{width:35px;height:35px;display:grid;place-items:center;border:2px solid var(--pink);box-shadow:3px 3px 0 var(--acid);font:900 13px Impact,"Arial Black",sans-serif;letter-spacing:.03em}.logo strong{display:block;font-size:13px;letter-spacing:.08em}.logo small{color:var(--muted);font-size:10px}.nav-label{padding:17px 10px 7px;color:var(--faint);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.nav{display:grid;gap:2px}.nav a{display:flex;align-items:center;gap:10px;min-height:39px;padding:8px 10px;border-radius:7px;color:var(--muted);font-size:13px;font-weight:520}.nav a:hover{background:rgba(var(--tint),.035);color:var(--soft)}.nav a.active{background:rgba(200,255,61,.08);color:var(--text)}.nav a.active .ico{color:var(--accent-text)}.ico{width:18px;text-align:center;color:var(--faint);font:12px ui-monospace,monospace}.nav .count{margin-left:auto;min-width:20px;padding:1px 6px;border:1px solid var(--line);border-radius:999px;text-align:center;color:var(--muted);font-size:10px}.account{margin-top:auto;padding:13px 10px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}.avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--pink),#7c4dff);font-size:10px;font-weight:800}.account strong{display:block;font-size:11px}.account small{color:var(--muted);font-size:10px}.mobile-toggle{display:none} .main{min-width:0}.topbar{position:sticky;top:0;z-index:20;height:64px;padding:0 clamp(18px,3vw,40px);display:flex;align-items:center;gap:16px;background:var(--topbar);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.crumb{color:var(--muted);font-size:12px}.crumb b{color:var(--soft);font-weight:550}.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.health-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(57,217,138,.1)}.topbar:has(.top-actions:empty){height:0;border:0;background:transparent;backdrop-filter:none}.workspace{max-width:1580px;margin:auto;padding:30px clamp(18px,3vw,40px) 80px}.flash{position:relative;margin-bottom:18px;padding:12px 15px 12px 42px;border:1px solid var(--flash-line);border-radius:8px;background:var(--flash-bg);color:var(--flash-text)}.flash:before{content:"✓";position:absolute;left:15px;color:var(--accent-text);font-weight:800} .page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:25px}.overline{color:var(--pink);font:700 10px/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase}.page-head h1{margin:7px 0 4px;font-size:clamp(27px,3vw,38px);line-height:1.04;letter-spacing:-.8px;font-weight:590}.page-head p{margin:0;color:var(--muted);font-size:13px}.date-chip{padding:8px 11px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font:11px ui-monospace,monospace} .kpis{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;margin-bottom:30px}.kpi{position:relative;overflow:hidden;min-height:112px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:rgba(var(--tint),.018)}.kpi:after{content:"";position:absolute;inset:auto -20px -45px auto;width:100px;height:100px;border-radius:50%;background:var(--glow,var(--acid));opacity:.045;filter:blur(2px)}.kpi-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.kpi-icon{font:12px ui-monospace,monospace;color:var(--accent,var(--acid))}.kpi b{display:block;margin-top:14px;font-size:29px;line-height:1;font-weight:550;letter-spacing:-1px}.kpi small{display:block;margin-top:7px;color:var(--faint);font-size:10px} .section{scroll-margin-top:82px;margin-top:34px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:13px}.section-head h2{margin:0;font-size:17px;font-weight:570;letter-spacing:-.2px}.section-head p{margin:3px 0 0;color:var(--muted);font-size:11px}.panel{border:1px solid var(--line);border-radius:var(--r);background:rgba(var(--tint),.018);overflow:hidden}.panel-head{min-height:54px;padding:11px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0;font-size:12px;font-weight:570}.panel-head .spacer{margin-left:auto}.filters{display:flex;gap:5px;overflow:auto}.filter{padding:6px 9px;border:1px solid transparent;border-radius:6px;color:var(--muted);font-size:10px;white-space:nowrap}.filter:hover{color:var(--soft);background:rgba(var(--tint),.03)}.filter.active{border-color:var(--line2);background:rgba(var(--tint),.04);color:var(--text)} .pipeline-list{display:grid}.post-row{display:grid;grid-template-columns:44px minmax(160px,1.7fr) minmax(100px,.8fr) minmax(120px,.8fr) auto;align-items:center;gap:13px;padding:10px 14px;border-bottom:1px solid var(--line);transition:.15s}.post-row:last-child{border-bottom:0}.post-row:hover,.post-row.selected{background:rgba(var(--tint),.035)}.post-row.selected{box-shadow:inset 2px 0 var(--acid)}.thumb{width:40px;height:50px;border-radius:4px;object-fit:cover;background:var(--sunken)}.post-title{min-width:0}.post-title strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:550}.post-title small,.cell-meta{color:var(--muted);font-size:10px}.status{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:4px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px;font-weight:600}.status i{width:5px;height:5px;border-radius:50%;background:currentColor}.status.review{color:var(--orange)}.status.approved{color:var(--green)}.status.scheduled{color:var(--blue)}.status.live{color:var(--accent-text)}.status.rejected{color:var(--pink)}.open-arrow{color:var(--faint);font-size:16px}.empty-row{padding:28px;text-align:center;color:var(--muted)} .studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,410px);gap:16px;align-items:start}.studio-main{min-width:0}.studio-header{padding:18px 19px;border-bottom:1px solid var(--line)}.studio-header-top{display:flex;gap:12px;justify-content:space-between;align-items:start}.studio-header h2{max-width:820px;margin:6px 0 4px;font-size:clamp(20px,2vw,28px);line-height:1.12;letter-spacing:-.45px;font-weight:570}.meta-line{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:10px}.meta-line span:not(:last-child):after{content:"·";margin-left:8px}.stagebar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}.stage{position:relative;padding-top:11px;border-top:2px solid var(--line);color:var(--faint);font-size:9px}.stage.done{border-color:var(--accent-text);color:var(--soft)}.stage.current{border-color:var(--pink);color:var(--text)}.stage:before{content:"";position:absolute;top:-5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--panel);border:2px solid currentColor} .studio-block{padding:18px 19px;border-bottom:1px solid var(--line)}.studio-block:last-child{border-bottom:0}.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}.block-head h3{margin:0;font-size:12px;font-weight:570}.hint{color:var(--muted);font-size:10px} details.drawer{margin-top:11px;border:1px solid var(--line);border-radius:7px;background:rgba(var(--tint),.015)}details.drawer>summary{display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:9px 12px;list-style:none;cursor:pointer;font-size:11px;font-weight:550}details.drawer>summary::-webkit-details-marker{display:none}details.drawer>summary:after{content:"+";color:var(--accent-text);font-size:17px}details.drawer[open]>summary:after{content:"−"}.drawer-body{padding:13px;border-top:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:grid;gap:5px}.field.full{grid-column:1/-1}.field[hidden]{display:none}label{color:var(--muted);font-size:10px}input[type=text],input[type=url],input[type=datetime-local],textarea,select{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--text);padding:9px 10px;outline:0}input:focus,textarea:focus,select:focus{border-color:rgba(200,255,61,.65);box-shadow:0 0 0 3px rgba(200,255,61,.06)}textarea{min-height:82px;resize:vertical}input[type=file]{max-width:100%;color:var(--muted);font-size:10px}input[type=range]{width:100%;accent-color:var(--accent-text)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.image-swap-summary{cursor:pointer}.rights-check{display:flex;gap:8px;align-items:flex-start;margin:10px 0;color:var(--soft);font-size:10px}.btn{min-height:38px;padding:8px 12px;border:1px solid transparent;border-radius:6px;background:var(--acid);color:var(--on-accent);font-size:10px;font-weight:700;cursor:pointer}.btn:hover{filter:brightness(1.06)}.btn.secondary{background:rgba(var(--tint),.035);border-color:var(--line2);color:var(--soft)}.btn.danger{background:rgba(255,59,112,.09);border-color:rgba(255,59,112,.28);color:#ff7a9c}.btn.publish{background:var(--pink);color:#fff}.btn.full{width:100%}.btn:disabled{opacity:.35;cursor:not-allowed}.button-row{display:flex;flex-wrap:wrap;gap:8px}.render-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}.risk{margin-top:9px;padding:10px;border:1px solid rgba(255,173,66,.28);border-radius:6px;background:rgba(255,173,66,.06);color:var(--muted);font-size:10px;white-space:pre-wrap} details.studio-disclosure{border-bottom:1px solid var(--line)}details.studio-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:14px 19px;list-style:none;cursor:pointer}details.studio-disclosure>summary::-webkit-details-marker{display:none}details.studio-disclosure>summary:after{content:"+";margin-left:8px;color:var(--accent-text);font-size:18px}details.studio-disclosure[open]>summary:after{content:"−"}details.studio-disclosure>summary strong{font-size:12px}details.studio-disclosure>summary small{display:block;margin-top:2px;color:var(--muted);font-size:9px}.disclosure-body{padding:0 19px 18px}.disclosure-state{margin-left:auto;color:var(--green);font-size:9px;white-space:nowrap} .preview-panel{position:sticky;top:80px}.preview-head{height:48px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.preview-head h3{margin:0;font-size:11px}.ratio{color:var(--accent-text);font:9px ui-monospace,monospace}.preview-wrap{padding:10px;background:var(--sunken)}.preview-wrap img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}.action-box{padding:13px;border-top:1px solid var(--line)}.action-box p{margin:3px 0 10px;color:var(--muted);font-size:9px}.action-box form+form{margin-top:8px}.schedule-current{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;margin-bottom:9px;border:1px solid rgba(115,167,255,.22);border-radius:6px;background:rgba(115,167,255,.05);color:var(--blue);font-size:9px}.confirmation{display:flex;gap:7px;align-items:flex-start;margin:9px 0;color:var(--muted);font-size:9px}.copy-preview{padding:0 13px 13px}.copy-preview summary{padding:10px 0;cursor:pointer;color:var(--soft);font-size:10px}.copy-preview p{color:var(--muted);font-size:10px;white-space:pre-wrap}.hashtags{color:var(--accent-text)!important} .focus-grid{display:grid;grid-template-columns:1fr;gap:14px}.focus-list{display:grid}.focus-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line)}.focus-item:last-child{border-bottom:0}.focus-item:hover{background:rgba(var(--tint),.025)}.focus-copy{min-width:0}.focus-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.focus-copy small{color:var(--muted);font-size:9px}.focus-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:var(--accent-text);font:14px ui-monospace,monospace}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px}.quick-action{min-height:92px;padding:13px;border:1px solid var(--line);border-radius:7px;background:rgba(var(--tint),.015)}.quick-action:hover{border-color:var(--line2);background:rgba(var(--tint),.03)}.quick-action b{display:block;margin-bottom:5px;font-size:11px}.quick-action small{color:var(--muted);font-size:9px}.quick-action .ico{display:block;margin-bottom:10px;color:var(--accent-text);text-align:left}.view-only{animation:reveal .18s ease-out}@keyframes reveal{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}} .lower-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.schedule-list,.source-list{display:grid}.schedule-item,.source-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.schedule-item:last-child,.source-item:last-child:last-child{border-bottom:0}.calendar-date{width:44px;padding:5px;border:1px solid var(--line);border-radius:6px;text-align:center}.calendar-date b{display:block;font-size:15px}.calendar-date small{color:var(--muted);font-size:8px}.item-main{min-width:0}.item-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.item-main small{color:var(--muted);font-size:9px}.item-actions{display:flex;gap:5px}.mini{min-height:29px;padding:5px 8px;font-size:9px}.inspiration-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:0}.source-column{border-right:1px solid var(--line)}.idea-list{max-height:410px;overflow:auto}.idea{display:block;padding:11px 13px;border-bottom:1px solid var(--line)}.idea:hover{background:rgba(var(--tint),.025)}.idea strong{display:block;font-size:10px;font-weight:520}.idea small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.system-item{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.system-item:nth-child(3n){border-right:0}.system-item b{display:flex;align-items:center;gap:7px;font-size:10px}.system-item p{margin:5px 0 0;color:var(--muted);font-size:9px}.signal{width:7px;height:7px;border-radius:50%;background:var(--green)}.signal.warn{background:var(--orange)}.signal.off{background:var(--pink)}.external{color:var(--accent-text);font-size:9px}.footer-note{margin-top:28px;text-align:center;color:var(--faint);font-size:9px} @media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}.focus-grid{grid-template-columns:1fr}.studio{grid-template-columns:minmax(0,1fr) 350px}.post-row{grid-template-columns:44px minmax(150px,1fr) minmax(100px,.6fr) auto}.post-row .hide-md{display:none}.lower-grid{grid-template-columns:1fr}} @media(max-width:900px){.shell{grid-template-columns:1fr}.topbar:has(.top-actions:empty){height:64px;background:var(--topbar);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.sidebar{position:fixed;inset:0 auto 0 0;width:226px;transform:translateX(-100%);transition:.2s;box-shadow:var(--shadow)}body.menu-open .sidebar{transform:none}.mobile-toggle{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.studio{grid-template-columns:1fr}.preview-panel{position:relative;top:auto;max-width:520px;grid-row:1}.system-grid{grid-template-columns:repeat(2,1fr)}.system-item:nth-child(3n){border-right:1px solid var(--line)}.system-item:nth-child(2n){border-right:0}} @media(max-width:650px){.workspace{padding:22px 13px 60px}.topbar{padding:0 13px}.page-head{align-items:start;flex-direction:column}.date-chip{display:none}.kpis{grid-template-columns:1fr 1fr}.kpi{min-height:98px}.kpi:last-child{grid-column:1/-1}.post-row{grid-template-columns:40px minmax(0,1fr) auto;padding:9px}.post-row .cell-meta,.post-row .hide-mobile{display:none}.studio-header,.studio-block{padding:15px}.form-grid,.render-grid{grid-template-columns:1fr}.inspiration-grid{grid-template-columns:1fr}.source-column{border-right:0;border-bottom:1px solid var(--line)}.system-grid{grid-template-columns:1fr}.system-item,.system-item:nth-child(3n){border-right:0}.top-actions .health-label{display:none}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}} /* ---- 3) Operate-Redesign-Overrides ---- */ :root{--font-body:16px;--font-small:14px;--font-caption:12px;--bg:#09090b;--side:#0d0d10;--panel:#111114;--raised:#18181d;--hover:#202026;--line:rgba(var(--tint),.08);--line2:rgba(var(--tint),.14);--text:#f5f5f6;--soft:#d5d5d8;--muted:#9a9aa2;--faint:#70717a;--r:10px} body{font-size:var(--font-body);line-height:1.55}.shell{grid-template-columns:248px minmax(0,1fr)} .sidebar{padding:22px 16px}.logo{gap:13px;padding:4px 8px 28px}.logo-mark{width:42px;height:42px;font-size:15px}.logo strong{font-size:14px}.logo small,.account small{font-size:12px}.nav-label{padding:20px 12px 8px;font-size:var(--font-caption)}.nav a{min-height:46px;padding:10px 12px;font-size:var(--font-small)}.nav .count{min-width:24px;font-size:12px}.account{padding:16px 10px 4px}.account strong{font-size:14px}.avatar{width:36px;height:36px} .topbar{height:68px;padding:0 clamp(20px,3vw,48px)}.workspace{max-width:1480px;padding:42px clamp(20px,3vw,48px) 96px}.flash{padding:15px 18px;font-size:var(--font-small)}.page-head{margin-bottom:32px}.page-head h1{font-size:clamp(32px,4vw,46px);letter-spacing:-1.1px}.page-head p{font-size:var(--font-body)}.section{margin-top:38px}.section-head{margin-bottom:16px}.section-head h2{font-size:24px}.section-head p{margin-top:6px;font-size:var(--font-small);max-width:740px}.panel-head{min-height:62px;padding:14px 18px}.panel-head h3{font-size:16px} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;font-size:var(--font-small);border-radius:7px}.btn.secondary{background:rgba(var(--tint),.04)}.btn.danger{background:transparent;color:#ff8fab}.mini{min-height:40px;padding:8px 11px;font-size:13px}.filter{min-height:40px;padding:9px 12px;font-size:var(--font-small)}.status{padding:6px 9px;font-size:12px}.empty-row{padding:38px 24px;font-size:var(--font-small)} .work-queue{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.72fr);gap:18px}.work-primary{min-width:0}.work-aside{display:grid;align-content:start;gap:14px}.work-summary{display:grid;padding:10px}.summary-chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 10px;border-radius:7px;color:var(--muted);font-size:var(--font-small)}.summary-chip:hover{background:rgba(var(--tint),.035);color:var(--soft)}.summary-chip b{min-width:28px;color:var(--text);font-size:19px}.focus-item{grid-template-columns:64px minmax(0,1fr) auto;gap:16px;min-height:94px;padding:14px 18px}.focus-copy strong{font-size:16px}.focus-copy small{font-size:var(--font-small)} .post-row{grid-template-columns:64px minmax(220px,1.35fr) minmax(125px,.5fr) minmax(130px,.5fr) auto;gap:16px;min-height:96px;padding:14px 18px}.thumb{width:58px;height:72px;border-radius:6px}.post-title strong{font-size:16px;white-space:normal;line-height:1.35}.post-title small,.cell-meta{display:block;margin-top:4px;font-size:var(--font-small)}.post-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.post-row-actions form{margin:0}.row-more{position:relative}.row-more>summary{list-style:none}.row-more>summary::-webkit-details-marker{display:none}.row-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:12;width:330px;padding:16px;border:1px solid var(--line2);border-radius:10px;background:var(--raised);box-shadow:0 24px 70px rgba(0,0,0,.48)}.row-popover form+form{margin-top:12px} .studio{grid-template-columns:minmax(0,1fr) minmax(360px,430px);gap:22px}.studio-header{padding:24px 26px}.studio-header h2{font-size:clamp(25px,3vw,34px)}.meta-line{font-size:var(--font-small)}.stagebar{display:flex;gap:8px;margin-top:20px}.stage{padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px}.stage:before{display:none}.studio-block{padding:24px 26px}.block-head h3{font-size:18px}.hint{font-size:var(--font-small)}details.studio-disclosure>summary{min-height:68px;padding:16px 26px}details.studio-disclosure>summary strong{font-size:16px}details.studio-disclosure>summary small{font-size:var(--font-small)}.disclosure-body{padding:0 26px 24px}.disclosure-state{font-size:13px}.form-grid{gap:14px}.field{gap:7px}label{font-size:var(--font-small);color:var(--soft)}input[type=text],input[type=url],input[type=datetime-local],textarea,select{min-height:46px;padding:11px 12px;font-size:var(--font-body)}textarea{min-height:112px}input[type=file],.rights-check,.confirmation,.risk{font-size:var(--font-small)}.preview-head{height:58px;padding:0 16px}.preview-head h3{font-size:16px}.ratio{font-size:12px}.preview-wrap{padding:14px}.action-box{padding:18px}.action-box p,.schedule-current,.copy-preview summary,.copy-preview p{font-size:var(--font-small)} .schedule-item,.source-item{gap:16px;padding:16px 18px}.calendar-date{width:54px;padding:8px}.calendar-date b{font-size:20px}.calendar-date small{font-size:12px}.item-main strong{font-size:15px}.item-main small{font-size:var(--font-small)}.item-actions{display:flex;gap:8px;flex-wrap:wrap}.inspiration-intro{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-bottom:18px;padding:18px;border:1px solid rgba(200,255,61,.2);border-radius:10px;background:rgba(200,255,61,.045)}.inspiration-intro b{font-size:16px}.inspiration-intro p{margin:4px 0 0;font-size:var(--font-small);color:var(--muted)}.inspiration-intro code{color:var(--accent-text)}.inspiration-grid{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr)}.idea-list{max-height:560px}.idea{padding:16px 18px}.idea strong{font-size:15px}.idea small{font-size:var(--font-small)}.system-grid{grid-template-columns:repeat(2,1fr)}.system-item:nth-child(3n){border-right:1px solid var(--line)}.system-item:nth-child(2n){border-right:0}.system-item{padding:20px}.system-item b{font-size:15px}.system-item p{font-size:var(--font-small)}.topic-composer{margin-bottom:18px}.composer-body{padding:16px 18px}.composer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.idea-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.manual-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid rgba(200,255,61,.35);background:rgba(200,255,61,.08);color:var(--accent-text);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}.idea-note{font-style:italic} .automation-promise{margin:14px 0 0;color:var(--muted);font-size:var(--font-small);line-height:1.55} .automation-promise code{color:var(--accent-text)} @media(max-width:1180px){.work-queue{grid-template-columns:1fr}.post-row{grid-template-columns:64px minmax(180px,1fr) minmax(120px,.5fr) auto}.post-row .hide-md{display:none}.inspiration-grid{grid-template-columns:1fr}.source-column{border-right:0;border-bottom:1px solid var(--line)}} @media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{width:248px}.studio{grid-template-columns:1fr}.post-row{grid-template-columns:58px minmax(0,1fr) auto}.post-row .cell-meta,.post-row>.hide-mobile{display:none}.post-row-actions{grid-column:2/-1;justify-content:flex-start}.row-popover{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto}.system-grid{grid-template-columns:1fr}.system-item{border-right:0!important}} @media(max-width:650px){.workspace{padding:28px 14px 72px}.topbar{padding:0 14px}.page-head h1{font-size:32px}.panel-head{align-items:flex-start;flex-direction:column}.panel-head .spacer{display:none}.post-row{padding:14px;gap:12px}.post-row-actions .btn{flex:1}.studio-header,.studio-block{padding:20px}details.studio-disclosure>summary{padding:16px 20px}.disclosure-body{padding:0 20px 20px}.source-item,.schedule-item{grid-template-columns:auto minmax(0,1fr)}.item-actions{grid-column:1/-1;justify-content:flex-start}} /* ---- 4) Einstellungs-Seite ---- */ .logo-mark{object-fit:contain}.settings-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}.settings-block{padding:24px}.settings-block+.settings-block{border-left:1px solid var(--line)}.settings-block h3{font-size:18px}.settings-help{color:var(--muted);font-size:14px}.settings-grid input[type=password]{width:100%;min-height:46px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--text);padding:11px 12px;outline:0}.secret-state{color:var(--green);font-size:12px}.brand-preview{display:grid;place-items:center;min-height:180px;margin:16px 0;border:1px dashed var(--line2);border-radius:8px;background:var(--field)}.brand-preview img{max-width:220px;max-height:130px;object-fit:contain}@media(max-width:800px){.settings-grid{grid-template-columns:1fr}.settings-block+.settings-block{border-left:0;border-top:1px solid var(--line)}} /* ---- 5) Async-Aktionen (Spinner für langlaufende Requests) ---- */ .btn.is-busy{opacity:.75;cursor:progress;pointer-events:none} .btn.is-busy:after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .7s linear infinite} @keyframes btn-spin{to{transform:rotate(1turn)}} /* Bild-Austausch im Editor: Vorschau/Ersatzblock ist klickbar */ .image-swap > summary.image-swap-summary { list-style: none; cursor: pointer; padding: 0; } .image-swap > summary.image-swap-summary::-webkit-details-marker { display: none; } .image-swap .modal-preview { position: relative; } .image-swap-hint { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; opacity: 0; transition: opacity .15s ease; } .image-swap:hover .image-swap-hint, .image-swap[open] .image-swap-hint { opacity: 1; } .kanban-empty.image-missing { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 24px; } .kanban-empty.image-missing strong { color: #d98b00; } .kanban-empty.image-missing small { opacity: 0.7; } .card-image-missing { color: #d98b00; font-weight: 600; } /* ---- 6) Editor-Dichte ---- Alles hier ist auf .edit-modal gescoped: Der Rest der App behält den großzügigen Maßstab aus Abschnitt 3, nur der Detail-Editor wird dichter, damit Caption, Hashtags und Alt-Text ohne Scrollen erreichbar sind. */ .edit-modal-panel{width:min(1100px,100%)}.edit-modal-layout{min-height:0}.edit-modal-header{min-height:56px;padding:10px 16px;gap:14px}.edit-modal-header-actions{gap:8px} .edit-modal .btn{min-height:34px;padding:7px 11px;font-size:13px} .edit-modal input[type=text],.edit-modal input[type=url],.edit-modal input[type=datetime-local], .edit-modal select,.edit-modal textarea{min-height:36px;padding:7px 10px;font-size:14px;border-radius:6px} .edit-modal textarea{min-height:64px;line-height:1.5;resize:vertical;overflow:hidden} .edit-modal .caption-editor{min-height:150px} .edit-modal .hashtags-editor{min-height:64px} .edit-modal input[type=file]{font-size:12px} .edit-modal label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px} /* Felder behalten ihre Inhaltshöhe – sonst dehnt das Grid sie auf die Zeilenhöhe und die mitwachsenden Textfelder messen diese Dehnung mit. */ .edit-modal .field{gap:4px;align-content:start} .edit-modal .copy-editor{gap:12px;margin:0;align-content:start} .copy-row,.design-grid{align-items:start} .copy-row{display:grid;gap:12px;grid-template-columns:minmax(0,2fr) minmax(150px,1fr)} .copy-row.even{grid-template-columns:1fr 1fr} .design-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:10px} .field-count{flex:none;color:var(--faint);font:11px ui-monospace,monospace;font-variant-numeric:tabular-nums}.field-count.over{color:var(--pink)} .save-state{color:var(--faint);font-size:12px;white-space:nowrap;opacity:1;transition:opacity .6s ease}.save-state.faded{opacity:0}.save-state.dirty{color:var(--orange)}.save-state.saved{color:var(--green)} .save-state.error{color:var(--pink);white-space:normal;max-width:280px;text-align:right} .edit-modal .modal-disclosure{margin-top:12px;border-radius:8px}.edit-modal .modal-disclosure>summary{min-height:44px;padding:9px 12px} .edit-modal .modal-disclosure>summary strong{font-size:13px}.edit-modal .modal-disclosure>summary small{font-size:11px} .edit-modal .modal-disclosure-body{padding:12px}.edit-modal-copy>.modal-disclosure{margin-top:14px}.edit-modal-media{padding:16px}.edit-modal-copy{padding:18px} .modal-preview{width:100%;margin-bottom:0;padding:6px;border-radius:8px} .design-disclosure{margin-top:14px} @media(max-width:820px){.copy-row,.copy-row.even,.design-grid{grid-template-columns:1fr} .edit-modal-header-actions{gap:6px}.save-state.error{max-width:none;text-align:left}} .edit-modal label small{margin-left:4px;font-weight:400;color:var(--faint)} .field-input-icon{position:relative}.field-input-icon input{padding-right:36px}.field-input-icon .icon-btn{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:26px;height:26px;padding:0;display:grid;place-items:center;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--tint),.04);color:var(--soft);font-size:15px;line-height:1;cursor:pointer}.field-input-icon .icon-btn:hover{background:rgba(var(--tint),.08);color:var(--text)}.field-input-icon .icon-btn.is-busy{opacity:.5;cursor:progress;pointer-events:none} .teaser-suggestions{display:grid;gap:6px;margin-bottom:14px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--tint),.02)} .teaser-suggestions[hidden]{display:none} .teaser-suggestion{display:block;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(var(--tint),.02);color:var(--soft);font-size:13px;line-height:1.4;text-align:left;cursor:pointer} .teaser-suggestion:hover{border-color:var(--line2);background:rgba(var(--tint),.05);color:var(--text)} .carousel-widget{margin-bottom:16px} .carousel-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .carousel-tab{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(var(--tint),.02);color:var(--muted);font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}.carousel-tab:hover{color:var(--soft);background:rgba(var(--tint),.04)}.carousel-tab.active{border-color:var(--line2);background:rgba(var(--tint),.06);color:var(--text)}.carousel-tab-add{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:999px;font-size:16px;line-height:1;border-style:dashed;list-style:none;cursor:pointer}.carousel-tab-add::-webkit-details-marker{display:none} /* Pfeile zum Umsortieren: nur an der angeklickten (aktiven) Slide sichtbar, sonst stünden zehn Pfeilpaare nebeneinander in der Leiste. */ .carousel-tab-group{display:inline-flex;align-items:center;gap:2px} .carousel-tab-group form{margin:0;display:contents} .carousel-tab-arrow{display:none;width:22px;height:22px;padding:0;border:1px solid var(--line2);border-radius:999px;background:rgba(var(--tint),.04);color:var(--soft);font-size:10px;line-height:1;cursor:pointer;align-items:center;justify-content:center} .carousel-tab-arrow:hover{background:rgba(var(--tint),.09);color:var(--text)} .carousel-tab-group:has(.carousel-tab.active) .carousel-tab-arrow{display:inline-flex} /* Reiterleiste als schmale Spalte links neben statt über der Bühne, bewusst mit negativem left über den Rand des Editor-Panels hinaus -- dafür verliert .edit-modal-panel sein overflow:hidden (Ausgleich per border-radius dort). Unter 820px (siehe Media Query) fehlt der Platz, sie bleibt dort eine Zeile über der Bühne. */ .carousel-widget{position:relative} .carousel-widget .carousel-tabs{position:absolute;top:0;bottom:0;left:-70px;flex-direction:column;flex-wrap:nowrap;width:60px;gap:10px;margin-bottom:0;z-index:2} /* Bühnenhöhe begrenzt, eigenständig scrollbar -- die "+"-Schaltfläche sitzt als eigenes Flex-Element danach und bleibt so immer sichtbar, auch wenn die Liste selbst länger ist als die Bühne. */ .carousel-widget .carousel-tab-list{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:2px 0} .carousel-widget .carousel-add-menu-tab{flex-shrink:0} .carousel-widget .carousel-tab-group{flex-direction:column;align-items:center;gap:4px} .carousel-widget .carousel-tab{position:relative;display:flex;width:60px;padding:0;border:2px solid transparent;border-radius:8px;background:none;text-transform:none;letter-spacing:normal;overflow:hidden} .carousel-widget .carousel-tab.active{border-color:var(--acid)} .carousel-widget .carousel-tab-add{display:grid;place-items:center;width:60px;height:36px;border-radius:8px;font-size:18px} .carousel-widget .carousel-tab-thumb{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:5px;background:var(--sunken)} .carousel-widget .carousel-tab-thumb img,.carousel-widget .carousel-tab-thumb video{width:100%;height:100%;object-fit:cover;display:block}.carousel-widget .carousel-tab-thumb-empty{display:block;width:100%;height:100%}.carousel-widget .carousel-tab-num{position:absolute;left:4px;bottom:4px;padding:1px 5px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:9px;font-weight:700;line-height:1.5}.carousel-widget .carousel-tab-arrow{width:32px} /* "+"-Menü: Datei-Upload oder Link, siehe carousel_add_menu-Makro. */ .carousel-add-menu{position:relative}.carousel-add-menu>summary{list-style:none;cursor:pointer}.carousel-add-menu>summary::-webkit-details-marker{display:none}.carousel-add-menu-standalone{display:inline-block;margin-top:10px} .carousel-add-menu-body{position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:260px;display:grid;gap:4px;padding:6px;border:1px solid var(--line2);border-radius:9px;background:var(--field);box-shadow:0 18px 40px rgba(0,0,0,.5)} .carousel-add-link-form{display:flex;gap:6px;padding:4px;align-items:center}.carousel-add-link-form input[type=url]{flex:1;min-width:0;padding:7px 9px;font-size:11px}.carousel-add-link-form .menu-item{width:auto;white-space:nowrap} /* ---- Editor: links steht, rechts scrollt ---- Das Panel füllt die Fensterhöhe; statt des Dialogs scrollen die Spalten je für sich (links nur, wenn das Fenster für die Bühne zu niedrig ist). Die Kopfzeile ist das erste Kind der rechten Spalte und klebt dort oben -- so kostet sie die Bühne keine Höhe. Der Scroll-Behälter links reicht um die Reiterleiste über die Spalte hinaus: Die hängt mit negativem left außerhalb des Panels, ein overflow direkt auf .edit-modal-media schnitte sie ab. Das "+"-Menü öffnet dort nach rechts oben, sonst läge es unter dem Scrollrand. */ .edit-modal-copy{padding-top:0}.edit-modal-copy>.edit-modal-header{position:sticky;top:0;z-index:4;margin:0 0 14px;padding:10px 0;border-radius:0;background:var(--field);backdrop-filter:none} @media(min-width:821px){.edit-modal{overflow:hidden}.edit-modal-panel{height:100%;display:flex;flex-direction:column}.edit-modal-layout{flex:1;min-height:0} /* Die Leinwand füllt die Höhe: Die linke Spalte ist so breit, wie eine 4:5-Bühne in der Fensterhöhe braucht (--stage-chrome = alles über/unter der Bühne, 51px = Ränder seitlich), das Panel wächst mit. Im Editor wird die Höhe bis zur Bühnen-Zelle durchgereicht, die Bühne nimmt dort min(Breite, Höhe*0.8): Bricht eine Leiste um, schrumpft nur sie etwas, nichts scrollt. 136px = beide Leisten einzeilig. */ .edit-modal{--modal-pad:clamp(12px,2vw,28px);--stage-chrome:56px;--media-w:calc((100dvh - 2*var(--modal-pad) - var(--stage-chrome))*.8 + 51px)} .edit-modal .carousel-widget:has([data-slide-editor]),.edit-modal .carousel-widget:has([data-slide-editor]) .carousel-panels,.edit-modal .carousel-slide:has([data-slide-editor]),.edit-modal .slide-editor{height:100%} .edit-modal .slide-editor{grid-template-rows:auto auto minmax(240px,1fr)}.edit-modal .slide-stage-cell{min-height:0;container-type:size;display:grid;place-items:start center}.edit-modal .slide-stage-cell>*{width:min(100cqw,80cqh)} .edit-modal:has([data-slide-editor]){--stage-chrome:136px}.edit-modal:has([data-slide-editor]) .edit-modal-media-scroll{padding-top:12px;padding-bottom:12px}.edit-modal-media-scroll>:last-child{margin-bottom:0} .edit-modal-panel{width:min(100%,calc(var(--media-w) + 620px))}.edit-modal-layout{grid-template-columns:minmax(320px,var(--media-w)) minmax(380px,1fr)} .edit-modal-media{display:flex;flex-direction:column;min-height:0;padding:0;border-radius:14px 0 0 14px}.edit-modal-copy{min-height:0;overflow-y:auto;border-radius:0 14px 14px 0} .edit-modal-media-scroll{flex:1;min-height:0;margin-left:-86px;padding:16px 16px 16px 102px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin} .carousel-add-menu-tab .carousel-add-menu-body{top:auto;bottom:0;left:calc(100% + 8px)}} /* Schmal scrollt der Dialog als Ganzes. Die rechte Spalte löst sich auf, damit die Kopfzeile per order nach oben kann; Flex statt Grid, weil ein klebendes Grid-Kind seine eigene Zeile nie verlässt. */ @media(max-width:820px){.edit-modal-layout{display:flex;flex-direction:column}.edit-modal-copy{display:contents} .edit-modal .edit-modal-copy>*{margin-left:16px;margin-right:16px}.edit-modal .edit-modal-copy>:last-child{margin-bottom:20px} .edit-modal .edit-modal-copy>.edit-modal-header{order:-1;margin:0;padding:10px 16px} /* Kein Platz links für die seitliche Reiterleiste: Sie bleibt eine Zeile über der Bühne und wächst mit der Seite mit (display:contents statt eigenem Scrollen). Muss NACH den Regeln der Seitenleiste oben stehen -- weiter vorn in der Datei verlor dieselbe Regel gegen sie. */ .carousel-widget .carousel-tabs{position:static;flex-direction:row;flex-wrap:wrap;width:auto;left:auto;margin-bottom:10px} .carousel-widget .carousel-tab-list{display:contents}.carousel-widget .carousel-tab-group{flex-direction:row}.carousel-widget .carousel-tab{width:46px}} .carousel-panels{position:relative} .carousel-slide{display:none;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--sunken)}.carousel-slide.active{display:block} /* Werkzeugleiste an der Slide: sichtbar bleibt, was man wirklich tut (zuschneiden); Reihenfolge und Loeschen liegen hinter dem Menue. */ /* Die Slide-Aktionen stehen rechts in der Werkzeugzeile der Bühne (siehe slide_editor-Makro); wird es eng, bricht die Zeile um statt zu überlappen. Die Löschen-Rückfrage legt sich über die Nachbarknöpfe, statt die Zeile umzubrechen -- sonst spränge die Bühne beim ersten Klick auf Löschen. */ .slide-bar{position:relative;display:flex;align-items:center;gap:4px;margin-left:auto}.slide-bar form{margin:0;min-width:30px;height:30px} .slide-stage-tools .icon-btn.is-danger{color:var(--pink);border-color:rgba(255,59,112,.35)} .slide-stage-tools .icon-btn.is-armed{position:absolute;top:0;right:0;z-index:1;width:auto;padding:0 10px;font-size:12px;white-space:nowrap} .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .menu-item{width:100%;min-height:36px;padding:8px 10px;display:flex;align-items:center;border:0;border-radius:6px;background:0 0;color:var(--soft);font-size:12px;text-align:left;cursor:pointer} /* display:flex oben schlägt sonst das UA-[hidden] -- Autor-CSS gewinnt in der Kaskade immer gegen UA-Regeln, unabhängig von der Spezifität. */ .menu-item[hidden]{display:none} .menu-item:hover:not(:disabled){background:rgba(var(--tint),.07);color:var(--text)} .menu-item:disabled{opacity:.35;cursor:not-allowed} .menu-item.is-danger{color:var(--pink)}.menu-item.is-danger:hover:not(:disabled){background:rgba(255,59,112,.1)} /* Der Zuschnitt sitzt an der Stelle der Slide, nicht darunter. */ .clip-panel{padding:8px;border:1px solid var(--line2);border-radius:8px;background:var(--sunken)} .clip-actions{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:10px} .carousel-slide>video,.carousel-slide>img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:6px;background:#000} /* Ohne color-scheme rendert Safari die native Bedienleiste hell/weiß auf dem sonst durchgängig dunklen Hintergrund -- das sah wie ein Darstellungsfehler (weißer Balken) statt wie Videosteuerung aus. */ .carousel-slide>video{color-scheme:dark} .carousel-slide>video::-webkit-media-controls-panel{background-color:rgba(10,10,14,.86)} .clip-editor{margin-bottom:12px} .clip-source{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:6px;background:#000;margin-bottom:10px} .clip-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:end;margin-bottom:8px} .clip-fields label{display:grid;gap:4px;font-size:12px;color:var(--muted)} .clip-fields input{width:100%} .clip-hint{display:block;color:var(--muted);margin-bottom:8px} /* ---- 7) Inspirationen-Redesign, Toasts, Meme-Editor ---- Muss nach Abschnitt 3 stehen: dort definierte Inspirationen-Regeln (Grid, Composer, Source-Rows) werden hier gezielt ersetzt. */ /* Untereinander statt nebeneinander: Die Quellen stehen oben, weil sie die Warteschlange darunter füllen. */ .inspiration-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start} .source-column{border-right:0} .composer{margin-bottom:18px} /* Formular-Dialoge (Composer, neue Quelle) – gleicher Aufbau wie der Editor, nur schmaler: hier steht ein Formular, kein Bild daneben. */ .pipeline-tabs{position:relative} .form-modal{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:clamp(12px,2vw,28px);border:0;background:transparent;color:var(--text);overflow:hidden} .form-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(8px)} /* Kopf und Aktionen stehen fest, gescrollt wird nur das Formular dazwischen – sonst rutschen die Knöpfe aus dem Bild und der Dialog wirkt abgeschnitten. */ .form-modal-panel{display:flex;flex-direction:column;width:min(680px,100%);max-height:100%;margin:auto;border:1px solid var(--line2);border-radius:14px;background:var(--field);box-shadow:0 32px 100px rgba(0,0,0,.65);overflow:hidden} .form-modal-header{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)} .form-modal-header h2{margin:0;margin-right:auto;font-size:17px;font-weight:590;letter-spacing:-.15px} .form-modal-header .status{flex:0 0 auto} .form-modal .modal-close{flex:0 0 auto;width:32px;height:32px;font-size:19px;cursor:pointer;color:inherit} .form-modal .composer-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:16px 20px 0} .form-modal .composer-body[hidden]{display:none} /* Dichte wie im Editor: kleine Labels, flache Felder, enge Reihen. */ .form-modal .form-grid{gap:12px} .form-modal .field{gap:5px} .form-modal label{color:var(--muted);font-size:12px} .form-modal input[type=text],.form-modal input[type=url],.form-modal select,.form-modal textarea{min-height:38px;padding:8px 11px;font-size:14px;border-radius:7px} .form-modal textarea{min-height:76px;line-height:1.5;resize:vertical} .form-modal .dropzone{min-height:112px} .form-modal .platform-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px} .form-modal .platform-option{font-size:12px} .form-modal .platform-option .status{white-space:nowrap} .form-modal .settings-help{font-size:12px} /* Aktionsleiste klebt am unteren Rand des Dialogs, nicht am Ende des Textes. */ .form-modal .composer-actions{position:sticky;bottom:0;z-index:2;margin:18px -20px 0;padding:13px 20px;border-top:1px solid var(--line);background:var(--field)} .form-modal .composer-hint{font-size:12px} @media(max-width:820px){.form-modal{padding:0}.form-modal-panel{width:100%;max-height:100%;border-radius:0;border-left:0;border-right:0}} .composer-body{padding:16px 18px 18px} .composer-body[hidden]{display:none} .composer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px} .composer-hint{flex:1 1 220px;min-width:180px;color:var(--muted);font-size:var(--font-caption)} .dropzone{display:grid;place-items:center;gap:8px;min-height:132px;padding:16px;border:1px dashed var(--line2);border-radius:9px;background:rgba(var(--tint),.02);color:var(--muted);font-size:var(--font-small);text-align:center;cursor:pointer} .dropzone:hover,.dropzone.is-hovered{border-color:var(--accent-text);color:var(--soft);background:rgba(200,255,61,.05)} .dropzone-preview{max-height:190px;max-width:100%;border-radius:7px} .composer-or{display:flex;align-items:center;gap:10px;margin:2px 0;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em} .composer-or:before,.composer-or:after{content:"";flex:1 1 auto;height:1px;background:var(--line)} .idea-list{max-height:none} .idea{display:grid;gap:7px;padding:16px 18px} .idea:last-child{border-bottom:0} .idea-meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted)} .idea-note{color:var(--soft);font-style:italic} .source-item{align-items:start} .source-item .item-main{display:grid;gap:3px;min-width:0} .source-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint)} .source-more{position:relative} .source-more>summary{list-style:none;cursor:pointer} .source-more>summary::-webkit-details-marker{display:none} .source-more-body{position:absolute;right:0;top:calc(100% + 6px);z-index:14;display:grid;gap:10px;width:230px;padding:14px;border:1px solid var(--line2);border-radius:9px;background:var(--raised);box-shadow:0 20px 50px rgba(0,0,0,.5)} .source-more-body .btn.full{width:100%} .btn.is-armed{border-color:var(--pink);background:rgba(255,59,112,.16);color:#ffd7e1} .toast-stack{position:fixed;right:18px;bottom:18px;z-index:2147483000;display:grid;gap:10px;width:min(390px,calc(100vw - 36px))} .toast{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line2);border-radius:9px;background:var(--raised);color:var(--text);font-size:var(--font-small);line-height:1.4;box-shadow:0 18px 46px rgba(0,0,0,.55);animation:toast-in .18s ease-out} .toast span{flex:1;min-width:0} .toast.error{border-color:rgba(255,59,112,.5);background:#2a1119} .toast.leaving{opacity:0;transform:translateY(6px);transition:.2s} .toast.progress{flex-wrap:wrap} .toast.progress span{flex:1 1 100%} .toast-bar{flex:1 1 100%;height:6px;border-radius:3px;background:rgba(var(--tint),.12);overflow:hidden} .toast-bar-fill{height:100%;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .15s linear} .toast.progress.is-waiting:after{content:"";display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .7s linear infinite} .toast-undo{padding:6px 10px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--tint),.05);color:var(--accent-text);font-size:13px;cursor:pointer;white-space:nowrap} .toast-undo:hover{background:rgba(var(--tint),.1)} .toast-close{padding:0 4px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer} .toast-close:hover{color:var(--text)} @keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .youtube-guide{margin-top:4px} .youtube-steps{margin:0;padding-left:20px;display:grid;gap:9px;color:var(--soft);font-size:13px;line-height:1.5} .youtube-steps em{color:var(--text);font-style:normal;font-weight:560} /* Die Schriften stehen nicht mehr hier: sie gehoeren einer Marke und werden deshalb je Kanal erzeugt (/fonts.css, web/routes/fonts.py) -- @font-face und die [data-font=...]-Regeln der Tippansicht gleichermassen. Eine feste Liste an dieser Stelle koennte eine hochgeladene Schrift nie enthalten. */ .slide-editor{position:relative;display:grid;gap:8px} .slide-stage{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--sunken);touch-action:none} /* Macht das Einrasten beim Ziehen sichtbar -- vorher gab es zum Raster-Umschalter (GRID_STEP in slide-editor.js) gar keine Linien zu sehen, nur ein unsichtbares Einrasten, das sich "unsauber" anfühlte, weil nicht zu erkennen war, ob und woran gerade ausgerichtet wird. Die feinen Linien sitzen -- wie snap() -- an Vielfachen von GRID_STEP ab der oberen linken Ecke (background-position bleibt Standard 0 0), die betonten Mittellinien markieren zusätzlich die Bildmitte als häufigsten Ausrichtungspunkt. */ .slide-stage-grid{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s; background-image: linear-gradient(to right, rgba(var(--tint),.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--tint),.18) 1px, transparent 1px); background-size:5% 5%} .slide-stage-grid.is-visible{opacity:1} .slide-stage-grid:before,.slide-stage-grid:after{content:"";position:absolute;background:rgba(200,255,61,.6)} .slide-stage-grid:before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)} .slide-stage-grid:after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)} .slide-element{position:absolute;transform:translate(-50%,-50%);min-width:24px;min-height:20px;border:1px dashed rgba(var(--tint),.4);border-radius:4px;cursor:grab;-webkit-user-select:none;user-select:none} /* Ohne das griff ein Zug quer über den Text als native Textauswahl statt als Verschieben der Box -- sichtbar u.a. daran, dass der Browser den markierten Text als Drag-Geist aus der Box zieht. Beim Bearbeiten (is-editing) muss Auswahl wieder gehen, sonst ließe sich im Text nichts markieren. */ .slide-element.is-editing .slide-element-body{-webkit-user-select:text;user-select:text} .slide-element.is-auto-height{height:auto} .slide-element.is-selected{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid)} .slide-element-body{display:block;width:100%;height:100%;overflow:hidden;color:var(--accent-text);font-size:13px;line-height:1.3;text-align:center;padding:4px;box-sizing:border-box} /* Unausgewählt soll nur das Motiv zu sehen sein, keine Bearbeitungsfläche darüber -- Rahmen, Abdunklung und Griffe blenden erst beim Hovern/ Auswählen/Bearbeiten ein. Gilt für Text immer, für ein randfüllendes Bild/Video (is-full-bleed) genauso -- das ist ja der Hintergrund selbst. Ein verkleinertes Bild/Video behält seinen Rahmen. */ .slide-element-text,.slide-element.is-full-bleed,.slide-element-fade{border-color:transparent} .slide-element-fade{cursor:default} .slide-element-fade:hover:not(.is-selected){border-color:rgba(var(--tint),.4)} .slide-element-fade .slide-element-body{padding:0} .slide-element-fade .slide-element-grip,.slide-element-fade .slide-element-resize{display:none} .slide-element-text:hover:not(.is-selected),.slide-element.is-full-bleed:hover:not(.is-selected){border-color:rgba(var(--tint),.4)} .slide-element-text .slide-element-body{padding:0;background:transparent;white-space:pre-wrap;overflow-wrap:break-word;transition:background .12s} .slide-element-text:hover .slide-element-body,.slide-element-text.is-selected .slide-element-body,.slide-element-text.is-editing .slide-element-body{background:rgba(0,0,0,.35)} /* "Fett" heißt bei einer einschnittigen Schrift wie Impact: die kräftige schwarze Kontur an (siehe render._draw_meme_text/style_preset meme_stroke) -- weder ein anderer Schriftschnitt noch erzwungene Großschreibung/eine andere Größe, sonst wirkte es wie eine zweite, fremde Schriftart statt derselben Schrift, nur fett. */ .slide-element-body[data-outline=true]{-webkit-text-stroke:.12em #000;paint-order:stroke fill} /* Harter Versatzschatten, dieselbe Formel wie Pillow und das Canvas (render_primitives.SHADOW_RATIO = 0.06 der Schriftgroesse) -- nur fuer die Tippphase, danach malt das Canvas. */ .slide-element-body[data-shadow=true]{text-shadow:.06em .06em 0 #000} .slide-element-body[data-style=meme_stroke]{-webkit-text-stroke:.18em #000;paint-order:stroke fill}.slide-element.is-editing{cursor:text}.slide-element.is-editing .slide-element-body{cursor:text;outline:2px solid var(--acid)} .slide-element-image .slide-element-body,.slide-element-video .slide-element-body{object-fit:contain;padding:0} .slide-element-grip{position:absolute;top:-11px;left:-11px;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;background:var(--field);color:var(--text);font-size:12px;cursor:grab;touch-action:none} .slide-element-grip:active{cursor:grabbing} .slide-element-resize{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:50%;background:var(--acid);cursor:nwse-resize;touch-action:none} .slide-element-text .slide-element-resize{bottom:50%;transform:translateY(50%);cursor:ew-resize} .slide-element-text .slide-element-grip,.slide-element-text .slide-element-resize,.slide-element.is-full-bleed .slide-element-grip,.slide-element.is-full-bleed .slide-element-resize{opacity:0;pointer-events:none;transition:opacity .12s} .slide-element-text:hover .slide-element-grip,.slide-element-text.is-selected .slide-element-grip,.slide-element-text.is-editing .slide-element-grip,.slide-element.is-full-bleed:hover .slide-element-grip,.slide-element.is-full-bleed.is-selected .slide-element-grip, .slide-element-text:hover .slide-element-resize,.slide-element-text.is-selected .slide-element-resize,.slide-element-text.is-editing .slide-element-resize,.slide-element.is-full-bleed:hover .slide-element-resize,.slide-element.is-full-bleed.is-selected .slide-element-resize{opacity:1;pointer-events:auto} /* Die Leiste des ausgewaehlten Elements steht ausserhalb der Buehne, in einer festen Zeile unter den Slide-Werkzeugen (_macros.html). Schwebend ueber dem Bild war sie je nach Motiv kaum lesbar, wurde am Rand abgeschnitten und deckte -- sobald sie umbrach -- das Element zu, zu dem sie gehoert. Dieselbe Lehre wie bei .slide-stage-tools, die aus denselben Gruenden dort steht. */ .slide-element-bar{display:flex;align-items:center;min-height:44px;padding:0 2px}.slide-element-bar.is-empty{color:var(--faint)}.slide-element-bar-hint{font-size:12px;color:var(--faint)}.slide-element-bar:not(.is-empty) .slide-element-bar-hint{display:none} .slide-element-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:3px 4px;border:1px solid var(--line2);border-radius:8px;background:var(--field)} .slide-element-toolbar button,.slide-element-swap{width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:var(--text);font-size:13px;cursor:pointer} .slide-element-toolbar button:hover,.slide-element-swap:hover{background:rgba(var(--tint),.08)} /* Duenne Gruppentrenner statt gleichmaessiger Abstaende: sie kosten 4px und ersparen das Absuchen einer elfteiligen Reihe. */ .slide-toolbar-sep{flex:0 0 auto;width:1px;height:16px;margin:0 4px;background:var(--line2);border-radius:1px} /* Notnagel fuer sehr schmale Fenster: lieber zwei Reihen als eine, die aus der Buehne ragt (slide-editor.js keepToolbarInsideStage). */ /* Schriftauswahl: schmal genug, dass die Toolbar über einem kleinen Textelement nicht breiter wird als die Bühne. Die Einträge zeigen sich in ihrer eigenen Schrift (slide-editor.js setzt font-family je