/* ============================================================================ COCKPIT v4 — CEO-Ansicht fuer KI.News.Paul (30.08.2026) Wird als LETZTES Stylesheet geladen und gewinnt ueber style-v2 / editorial / design-v3. Alles unter dem Praefix .ck- — kein Altbestand wird angefasst, Revert = aus index.html entfernen. Farbaufteilung, vier Werte mit je EINER Aufgabe: --ck-act #CCFF00 "du bist dran" — Buttons, aktive Reiter, offene Entscheidungen --ck-up #3DDC91 Wachstum in Zahlen — nur Deltas, Sparklines, Balken --ck-down #FF8A73 Rueckgang in Zahlen --ck-stop #FF4438 Blocker — nur Balken links + Klartext ========================================================================== */ :root, body.ed { --ck-bg:#09090A; --ck-surface:#121214; --ck-raise:#17171A; --ck-line:#232328; --ck-line2:#2E2E35; --ck-txt:#F4F4F5; --ck-txt2:#9B9BA4; --ck-txt3:#75757E; --ck-act:#CCFF00; --ck-up:#3DDC91; --ck-down:#FF8A73; --ck-stop:#FF4438; --ck-head:'Oswald','IBM Plex Sans',sans-serif; --ck-body:'IBM Plex Sans',system-ui,sans-serif; --ck-mono:'JetBrains Mono',ui-monospace,monospace; } body.ed { background:var(--ck-bg); } /* --- Seitenrahmen ------------------------------------------------------- */ #main.app-page .ck { padding:22px 28px 96px; max-width:1360px; margin:0 auto; font-family:var(--ck-body); color:var(--ck-txt); } @media(max-width:820px){ #main.app-page .ck { padding:16px 14px 110px; } } /* Kopfzeile jeder Ansicht: EIN Satz, was jetzt zu tun ist. */ #main.app-page .ck-top { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:0 0 20px; } #main.app-page .ck-top h1 { font-family:var(--ck-head); font-weight:600; font-size:23px; letter-spacing:.005em; line-height:1.18; margin:0 0 5px; color:var(--ck-txt); text-transform:none; } #main.app-page .ck-top .ck-lede { font-size:14px; line-height:1.5; color:var(--ck-txt2); margin:0; max-width:70ch; } #main.app-page .ck-top .ck-lede b { color:var(--ck-txt); font-weight:600; } #main.app-page .ck-top .ck-lede .act { color:var(--ck-act); font-weight:600; } #main.app-page .ck-top .ck-lede .stop { color:var(--ck-stop); font-weight:600; } #main.app-page .ck-stamp { font-family:var(--ck-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ck-txt3); white-space:nowrap; padding-bottom:3px; } /* --- Kennzahlen-Kacheln ------------------------------------------------- */ #main.app-page .ck-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 26px; } @media(max-width:1080px){ #main.app-page .ck-kpis { grid-template-columns:repeat(2,1fr); } } @media(max-width:640px){ #main.app-page .ck-kpis { gap:8px; } } /* Am Handy bleiben es ZWEI Kacheln nebeneinander — einspaltig schob die Entscheidungen unter einen Bildschirm voller Zahlen. */ @media(max-width:520px){ #main.app-page .ck-kpi { padding:12px 12px 8px; min-height:118px; } #main.app-page .ck-kpi-val { font-size:21px; } #main.app-page .ck-kpi-name { font-size:9.5px; letter-spacing:.08em; } #main.app-page .ck-kpi-sub { font-size:11px; gap:5px; } #main.app-page .ck-kpi-spark svg { height:26px; } } #main.app-page .ck-kpi { position:relative; background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:12px; padding:15px 16px 10px; overflow:hidden; display:flex; flex-direction:column; min-height:132px; } #main.app-page .ck-kpi.click { cursor:pointer; transition:border-color .13s ease, background .13s ease; } #main.app-page .ck-kpi.click:hover { border-color:var(--ck-line2); background:var(--ck-raise); } #main.app-page .ck-kpi-top { display:flex; align-items:center; gap:8px; margin-bottom:9px; } #main.app-page .ck-kpi-name { font-family:var(--ck-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ck-txt2); } #main.app-page .ck-mark { width:19px; height:19px; border-radius:5px; display:grid; place-items:center; font-family:var(--ck-head); font-weight:600; font-size:10.5px; letter-spacing:0; color:#09090A; flex:0 0 auto; } #main.app-page .ck-mark.tiktok { background:#F4F4F5; } #main.app-page .ck-mark.instagram { background:#C6A4F0; } #main.app-page .ck-mark.youtube { background:#FFD166; } #main.app-page .ck-mark.all { background:var(--ck-act); } #main.app-page .ck-kpi-val { font-family:var(--ck-mono); font-weight:700; font-size:30px; line-height:1; letter-spacing:-.02em; color:var(--ck-txt); } @media(max-width:520px){ #main.app-page .ck-kpi-val { font-size:27px; } } #main.app-page .ck-kpi-unit { font-family:var(--ck-mono); font-size:11px; color:var(--ck-txt3); letter-spacing:.05em; margin-top:6px; } #main.app-page .ck-kpi-sub { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--ck-txt2); } #main.app-page .ck-kpi-spark { margin-top:auto; padding-top:10px; } #main.app-page .ck-kpi-spark svg { display:block; width:100%; height:32px; } #main.app-page .ck-delta { font-family:var(--ck-mono); font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:2px 6px; border-radius:4px; white-space:nowrap; } #main.app-page .ck-delta.up { color:var(--ck-up); background:rgba(61,220,145,.11); } #main.app-page .ck-delta.down { color:var(--ck-down); background:rgba(255,138,115,.11); } #main.app-page .ck-delta.flat { color:var(--ck-txt3); background:rgba(255,255,255,.05); } /* --- Abschnitte ---------------------------------------------------------- */ #main.app-page .ck-grid2 { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; align-items:start; } @media(max-width:1000px){ #main.app-page .ck-grid2 { grid-template-columns:1fr; } } #main.app-page .ck-sec { background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:12px; margin:0 0 12px; overflow:hidden; } #main.app-page .ck-sec-h { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px 12px; border-bottom:1px solid var(--ck-line); } #main.app-page .ck-sec-h h2 { font-family:var(--ck-head); font-weight:600; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; margin:0; color:var(--ck-txt); } #main.app-page .ck-sec-h p { margin:3px 0 0; font-size:12px; line-height:1.45; color:var(--ck-txt3); } #main.app-page .ck-sec-h .ck-more { flex:0 0 auto; background:none; border:1px solid var(--ck-line2); color:var(--ck-txt2); font-family:var(--ck-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:6px 11px; border-radius:6px; cursor:pointer; transition:.13s; } #main.app-page .ck-sec-h .ck-more:hover { color:var(--ck-txt); border-color:var(--ck-txt3); } #main.app-page .ck-sec-h .ck-more.act { color:#09090A; background:var(--ck-act); border-color:var(--ck-act); font-weight:700; } #main.app-page .ck-empty { padding:22px 16px; font-size:13px; color:var(--ck-txt3); } /* --- Zeilen -------------------------------------------------------------- */ #main.app-page .ck-list > * + * { border-top:1px solid var(--ck-line); } #main.app-page .ck-r { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 16px; position:relative; } #main.app-page .ck-r.click { cursor:pointer; transition:background .11s ease; } #main.app-page .ck-r.click:hover { background:var(--ck-raise); } #main.app-page .ck-r::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; } #main.app-page .ck-r.you::before { background:var(--ck-act); } #main.app-page .ck-r.stop::before { background:var(--ck-stop); } #main.app-page .ck-r.done::before { background:var(--ck-up); } #main.app-page .ck-r-main { min-width:0; } #main.app-page .ck-r-t { font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ck-txt); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #main.app-page .ck-r-m { display:block; margin-top:3px; font-family:var(--ck-mono); font-size:10.5px; letter-spacing:.05em; color:var(--ck-txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #main.app-page .ck-r-m .hi { color:var(--ck-txt2); } #main.app-page .ck-r-n { font-family:var(--ck-mono); font-size:13px; font-weight:700; color:var(--ck-txt); text-align:right; white-space:nowrap; } #main.app-page .ck-r-n small { display:block; font-weight:400; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ck-txt3); margin-top:2px; } #main.app-page .ck-tag { font-family:var(--ck-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:5px; background:rgba(255,255,255,.055); color:var(--ck-txt2); white-space:nowrap; } #main.app-page .ck-tag.you { background:rgba(204,255,0,.13); color:var(--ck-act); } #main.app-page .ck-tag.up { background:rgba(61,220,145,.12); color:var(--ck-up); } #main.app-page .ck-tag.stop { background:rgba(255,68,56,.13); color:var(--ck-stop); } #main.app-page .ck-tag.new { background:var(--ck-act); color:#09090A; font-weight:700; } #main.app-page .ck-btn { flex:0 0 auto; background:var(--ck-act); color:#09090A; border:none; font-family:var(--ck-head); font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:6px; cursor:pointer; } #main.app-page .ck-btn.ghost { background:none; color:var(--ck-txt2); border:1px solid var(--ck-line2); font-weight:500; } #main.app-page .ck-btn.ghost:hover { color:var(--ck-txt); border-color:var(--ck-txt3); } /* Balken in Ranglisten */ #main.app-page .ck-bar { height:3px; border-radius:2px; background:var(--ck-line2); margin-top:7px; overflow:hidden; } #main.app-page .ck-bar i { display:block; height:100%; background:var(--ck-up); border-radius:2px; } /* --- Kanalstreifen (Analytics) ------------------------------------------ */ #main.app-page .ck-chan { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 12px; } @media(max-width:900px){ #main.app-page .ck-chan { grid-template-columns:1fr; } } #main.app-page .ck-chan-c { background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:12px; padding:16px; } #main.app-page .ck-chan-h { display:flex; align-items:center; gap:9px; margin-bottom:14px; } #main.app-page .ck-chan-h b { font-family:var(--ck-head); font-weight:600; font-size:14px; letter-spacing:.03em; text-transform:uppercase; } #main.app-page .ck-chan-h span { margin-left:auto; font-family:var(--ck-mono); font-size:10px; letter-spacing:.07em; color:var(--ck-txt3); text-transform:uppercase; } #main.app-page .ck-chan-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 10px; } #main.app-page .ck-mini .v { font-family:var(--ck-mono); font-weight:700; font-size:17px; line-height:1.1; color:var(--ck-txt); } #main.app-page .ck-mini .l { font-size:11px; line-height:1.35; color:var(--ck-txt3); margin-top:4px; } #main.app-page .ck-mini .d { margin-left:6px; } /* --- Balkenverlauf ------------------------------------------------------- */ #main.app-page .ck-chart { padding:16px; } #main.app-page .ck-chart svg { display:block; width:100%; height:170px; } #main.app-page .ck-legend { display:flex; gap:16px; flex-wrap:wrap; padding:0 16px 14px; font-family:var(--ck-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ck-txt3); } #main.app-page .ck-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px; } /* --- Link-Eingabe (Produktion) ------------------------------------------ */ #main.app-page .ck-drop { background:var(--ck-surface); border:1px solid var(--ck-line2); border-radius:12px; padding:18px 18px 16px; margin:0 0 12px; } #main.app-page .ck-drop h2 { font-family:var(--ck-head); font-weight:600; font-size:15px; letter-spacing:.03em; margin:0 0 4px; color:var(--ck-txt); text-transform:none; } #main.app-page .ck-drop p { margin:0 0 13px; font-size:12.5px; color:var(--ck-txt3); line-height:1.5; } #main.app-page .ck-drop-row { display:flex; gap:9px; flex-wrap:wrap; } #main.app-page .ck-drop input[type=text] { flex:1 1 340px; min-width:0; background:var(--ck-bg); border:1px solid var(--ck-line2); border-radius:8px; padding:13px 14px; color:var(--ck-txt); font-family:var(--ck-body); font-size:14px; } #main.app-page .ck-drop input[type=text]:focus { outline:none; border-color:var(--ck-act); } #main.app-page .ck-drop input[type=text]::placeholder { color:var(--ck-txt3); } #main.app-page .ck-drop .ck-btn { padding:13px 20px; } #main.app-page .ck-seg { display:inline-flex; gap:2px; background:var(--ck-bg); border:1px solid var(--ck-line); border-radius:8px; padding:3px; margin:0 0 13px; } #main.app-page .ck-seg button { background:none; border:none; color:var(--ck-txt3); font-family:var(--ck-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; border-radius:5px; cursor:pointer; } #main.app-page .ck-seg button.on { background:var(--ck-raise); color:var(--ck-txt); } /* Filterleiste */ #main.app-page .ck-filters { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; } #main.app-page .ck-filters button { background:var(--ck-surface); border:1px solid var(--ck-line); color:var(--ck-txt2); font-family:var(--ck-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:8px 12px; border-radius:7px; cursor:pointer; transition:.13s; } #main.app-page .ck-filters button b { color:var(--ck-txt); margin-left:6px; font-weight:700; } #main.app-page .ck-filters button:hover { border-color:var(--ck-line2); color:var(--ck-txt); } #main.app-page .ck-filters button.on { background:var(--ck-act); border-color:var(--ck-act); color:#09090A; font-weight:600; } #main.app-page .ck-filters button.on b { color:#09090A; } /* Fliesstext-Block (Tagesangebot) */ #main.app-page .ck-prose { padding:15px 16px 18px; font-size:13.5px; line-height:1.62; color:var(--ck-txt2); white-space:pre-wrap; word-break:break-word; max-height:420px; overflow:auto; } #main.app-page .ck-prose b { color:var(--ck-txt); } /* Blocker-Banner */ #main.app-page .ck-alert { display:flex; gap:14px; align-items:flex-start; background:rgba(255,68,56,.07); border:1px solid rgba(255,68,56,.32); border-radius:12px; padding:15px 17px; margin:0 0 16px; } #main.app-page .ck-alert .m { width:22px; height:22px; border-radius:6px; background:var(--ck-stop); color:#09090A; font-weight:700; display:grid; place-items:center; flex:0 0 auto; font-family:var(--ck-mono); } #main.app-page .ck-alert h3 { margin:0 0 4px; font-family:var(--ck-head); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--ck-txt); } #main.app-page .ck-alert p { margin:0; font-size:12.5px; line-height:1.5; color:var(--ck-txt2); } /* Vorschaubild aus der fertigen MP4 (nur obere Zeilen der Videoliste) */ #main.app-page .ck-thumb { width:62px; height:36px; object-fit:cover; border-radius:5px; background:#000; border:1px solid var(--ck-line2); flex:0 0 auto; display:block; } /* Kein Doppel-Chrom: die alten Hero-/Streifen-Bausteine tauchen in den neuen Ansichten nicht mehr auf, bleiben aber fuer unveraenderte Tabs bestehen. */ #main.app-page .ck .workbench-hero, #main.app-page .ck .queue-truth-strip, #main.app-page .ck .dash-hero { display:none; } /* Kleine Vielfache im Reichweiten-Abschnitt */ #main.app-page .ck-r-chart { align-items:flex-start; padding-top:13px; padding-bottom:13px; } #main.app-page .ck-mini-bars { display:block; width:100%; max-width:340px; height:44px; margin-top:9px; } #main.app-page .ck-legend span { min-width:44px; } #main.app-page .ck-thumb.ph { display:grid; place-items:center; color:var(--ck-txt3); font-size:11px; } #main.app-page .ck-r-qc { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; max-width:210px; } #main.app-page .ck-r-qc:empty::after { content:'\203A'; font-family:var(--ck-mono); color:var(--ck-txt3); } /* Handy-Feinschliff */ @media(max-width:520px){ #main.app-page .ck-top h1 { font-size:20px; } #main.app-page .ck-top .ck-lede { font-size:13.5px; } #main.app-page .ck-r { padding:10px 12px; gap:9px; } #main.app-page .ck-r-t { font-size:13px; white-space:normal; } #main.app-page .ck-r-qc { max-width:96px; } #main.app-page .ck-chan-kpis { grid-template-columns:repeat(2,1fr); } #main.app-page .ck-sec-h { padding:12px 13px; } }