/* public/assets/styles.css — Design-System (Phase 1, T1.4). * * Token-Layer mit Dark- UND Light-Set. Theme via (Toggle: T1.5). * Bestehende Komponentenregeln referenzieren --tokens und bleiben unverändert; neue Arbeit * nutzt zusätzlich die Spacing-/Typo-/Shadow-Skalen unten. Brand-Akzent: Grün. */ /* ===== Tokens — Default = Dark ===== */ :root{ /* Flächen / Text */ --bg:#0d1018; --bg-2:#0a0d14; --surface:#141722; --surface-2:#1c2030; --surface-3:#252a3c; --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); --text:#f0f2f8; --muted:#a8adbd; --faint:#676d81; /* Akzente */ --green:#00e664; --green-ink:#001a0a; --green-soft:rgba(0,230,100,.14); --green-glow:rgba(0,230,100,.20); --green-line:rgba(0,230,100,.32); --amber:#d7b66e; --amber-soft:rgba(215,182,110,.14); --amber-glow:rgba(215,182,110,.20); --amber-line:rgba(215,182,110,.32); --red:#ff4d6a; --red-soft:rgba(255,77,106,.12); --red-line:rgba(255,77,106,.32); --cyan:#62d8e3; --purple:#a78bfa; /* Radii */ --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-full:999px; /* Spacing-Skala (4px-Basis) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; /* Typografie */ --font:'Inter',system-ui,sans-serif; --fs-xs:10.5px; --fs-sm:12px; --fs-base:15px; --fs-md:18px; --fs-lg:24px; --fs-xl:32px; --fs-2xl:44px; --fs-3xl:52px; /* Motion */ --t:200ms cubic-bezier(.16,1,.3,1); --t-fast:120ms cubic-bezier(.16,1,.3,1); --t-slow:360ms cubic-bezier(.16,1,.3,1); /* Schatten */ --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 8px 28px rgba(0,0,0,.35); --shadow-topbar:0 24px 70px rgba(0,0,0,.4); --shadow-pop:0 12px 40px rgba(0,0,0,.5); /* Hintergrund-Glows (body::before) */ --glow-a:rgba(0,230,100,.05); --glow-b:rgba(98,216,227,.03); color-scheme:dark; } /* ===== Light-Set ===== */ [data-theme="light"]{ --bg:#f5f7fb; --bg-2:#eef1f7; --surface:#ffffff; --surface-2:#f1f4f9; --surface-3:#e4e9f2; --border:rgba(15,20,35,.10); --border-2:rgba(15,20,35,.16); --text:#0e1220; --muted:#54607a; --faint:#8a93a8; --green:#00b050; --green-ink:#04240f; --green-soft:rgba(0,176,80,.14); --green-glow:rgba(0,176,80,.22); --green-line:rgba(0,176,80,.34); --amber:#9c7b3a; --amber-soft:rgba(156,123,58,.14); --amber-glow:rgba(156,123,58,.20); --amber-line:rgba(156,123,58,.32); --red:#d92a4e; --red-soft:rgba(217,42,78,.10); --red-line:rgba(217,42,78,.30); --cyan:#1597a3; --purple:#6d4ddb; --shadow-1:0 1px 2px rgba(15,20,35,.10); --shadow-2:0 8px 28px rgba(15,20,35,.12); --shadow-topbar:0 16px 50px rgba(15,20,35,.12); --shadow-pop:0 12px 40px rgba(15,20,35,.18); --glow-a:rgba(0,176,80,.06); --glow-b:rgba(21,151,163,.05); color-scheme:light; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important} /* hidden-Attribut muss display-Regeln (z.B. .auth-form{display:flex}) schlagen */ html{scroll-behavior:smooth;-webkit-text-size-adjust:none} body{min-height:100dvh;font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(ellipse 60% 40% at 88% -8%,var(--glow-a),transparent 60%), radial-gradient(ellipse 50% 40% at 4% 110%,var(--glow-b),transparent 65%)} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} input,select,textarea{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:var(--r-md)} h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.1} a{color:var(--green);text-decoration:none} :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .pos{color:var(--green)} .neg{color:var(--red)} .neu{color:var(--amber)} .hidden{display:none!important} .muted{color:var(--muted)} .faint{color:var(--faint)} .shell{position:relative;z-index:1;width:min(1480px,calc(100% - 32px));margin:0 auto;padding:18px 0 80px} /* Top bar */ .topbar{position:sticky;top:14px;z-index:30;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:10px 14px;margin-bottom:24px;background:color-mix(in oklab,var(--bg) 78%,transparent);backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-topbar)} .brand{display:flex;align-items:center;gap:10px;padding-right:8px} .brand-mark{width:36px;height:36px;border-radius:11px;background:var(--green);display:grid;place-items:center;color:var(--green-ink)} .brand strong{font-size:13px;line-height:1.2;display:block;font-weight:800;letter-spacing:-.01em} .brand small{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .tabs{display:flex;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);justify-self:center;overflow-x:auto;max-width:100%} .tabs button{padding:8px 18px;border-radius:var(--r-full);font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:var(--t)} .tabs button[aria-pressed=true]{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1px var(--green-line)} .tabs button:hover:not([aria-pressed=true]){color:var(--text)} .topright{display:flex;align-items:center;gap:10px} .chip{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full)} .chip .avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;border:1.5px solid var(--green);background:#000;display:grid;place-items:center;color:var(--green);font-weight:900;font-size:12px} .chip .avatar img{width:100%;height:100%;object-fit:cover} .chip strong{font-size:13px;font-weight:800} .chip span{font-size:10.5px;color:var(--muted);display:block;line-height:1;letter-spacing:.04em;text-transform:uppercase} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 22px;border-radius:var(--r-full);font-weight:800;font-size:13.5px;letter-spacing:.01em;transition:var(--t);border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .btn.primary{background:var(--green);color:var(--green-ink)} .btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px var(--green-glow)} .btn.ghost{background:transparent;border-color:var(--border-2);color:var(--text)} .btn.ghost:hover{border-color:var(--green-line);color:var(--green)} .btn.sm{min-height:34px;padding:6px 14px;font-size:12px} .theme-toggle{width:40px;height:40px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);color:var(--muted);display:grid;place-items:center;transition:var(--t);flex:0 0 auto} .theme-toggle:hover{color:var(--green);border-color:var(--green-line)} .theme-toggle:active{transform:scale(.94)} .lang-toggle{height:40px;min-width:40px;padding:0 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);color:var(--muted);font-weight:800;font-size:12.5px;letter-spacing:.04em;display:grid;place-items:center;transition:var(--t);flex:0 0 auto} .lang-toggle:hover{color:var(--green);border-color:var(--green-line)} .lang-toggle:active{transform:scale(.94)} .subtabs{display:inline-flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);margin-bottom:20px} .subtabs button{padding:6px 18px;border-radius:var(--r-full);font-size:12.5px;font-weight:700;color:var(--muted)} .subtabs button[aria-pressed=true]{background:var(--green-soft);color:var(--green)} /* Card */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;transition:var(--t)} .card.glow{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .section-label{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:10px} /* Badge */ .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border-2);background:var(--surface-2)} .badge.green{background:var(--green-soft);color:var(--green);border-color:var(--green-line)} .badge.red{background:var(--red-soft);color:var(--red);border-color:var(--red-line)} .badge.amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)} .badge.lg{padding:8px 16px;font-size:12.5px} .badge.xl{padding:11px 22px;font-size:15px;letter-spacing:.08em} /* Search */ .search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end} .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)} .field input,.field select,.field textarea{padding:11px 14px;border-radius:var(--r-md);min-height:44px;transition:var(--t)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-line);outline:none} .field textarea{min-height:110px;resize:vertical;font-family:inherit} .search-results{margin-top:10px;display:grid;gap:6px;max-height:240px;overflow:auto} .sr-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;text-align:left;width:100%;transition:var(--t)} .sr-item:hover{border-color:var(--green-line);background:var(--surface-2)} .sr-item small{color:var(--muted);font-size:12px} .sr-badge{display:inline-block;padding:1px 7px;border-radius:var(--r-full);font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line);vertical-align:middle} .usonly-hint{margin-top:12px;font-size:11.5px;color:var(--faint);line-height:1.45;display:flex;align-items:flex-start;gap:7px} .usonly-hint::before{content:"US";flex:0 0 auto;font-size:9px;font-weight:900;letter-spacing:.04em;padding:2px 6px;border-radius:var(--r-full);background:var(--green-soft);color:var(--green);border:1px solid var(--green-line)} /* ============ SNAPSHOT PANEL ============ */ .snap{display:grid;grid-template-columns:1.05fr 1.25fr 1.25fr;gap:18px} .snap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden} .snap-card.glow-tl::before{content:"";position:absolute;inset:auto auto -30% -20%;width:240px;height:240px;background:radial-gradient(circle,rgba(0,230,100,.10),transparent 70%);pointer-events:none} .snap-card .ticker{font-family:Inter,sans-serif;font-weight:900;font-size:52px;letter-spacing:-.04em;color:var(--green);line-height:1} .snap-card .company{font-size:18px;font-weight:500;color:var(--muted);margin-top:6px;line-height:1.25} .snap-card .price{font-size:44px;font-weight:900;letter-spacing:-.03em;margin-top:18px;line-height:1} .snap-card .delta-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .snap-card .meta-row{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--faint)} .range-track{position:relative;height:6px;border-radius:var(--r-full);background:linear-gradient(90deg,var(--red-soft),var(--surface-3),var(--green-soft));margin:30px 0 8px} .range-track .marker{position:absolute;top:-6px;width:3px;height:18px;background:var(--text);border-radius:2px;box-shadow:0 0 10px rgba(255,255,255,.4)} .range-track .marker::after{content:attr(data-label);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:800;color:var(--text);white-space:nowrap} .range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);font-weight:600} .rating-block{margin-top:22px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);display:flex;align-items:center;justify-content:space-between;gap:12px} .rating-block .pt{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .rating-block .pt-val{font-size:18px;font-weight:800;margin-top:2px} .risk-row{margin-top:18px;display:grid;gap:6px} .risk-row .lbl{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .risk-bar{position:relative;height:8px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden} .risk-bar .fill{height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--amber) 60%,var(--red) 100%);border-radius:var(--r-full);transition:width .6s ease} .provider{margin-top:18px;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--faint);font-weight:700;letter-spacing:.1em;text-transform:uppercase} .provider .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green-glow)} .chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px} .chart-head h3{font-size:14px;font-weight:800;letter-spacing:-.005em} .chart-legend{display:flex;gap:14px;font-size:11px;color:var(--muted);font-weight:600} .chart-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle} .chart-wrap{position:relative;height:260px} /* KPI grid */ .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px} .kpi{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);display:grid;gap:6px;transition:var(--t);position:relative;overflow:hidden} .kpi:hover{border-color:var(--green-line);box-shadow:inset 0 0 0 1px var(--green-soft)} .kpi-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)} .kpi-v{font-size:28px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kpi-n{font-size:12.5px;color:var(--muted);font-weight:600} /* ============ COMPARE ============ */ .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cmp-side{padding:22px;border-radius:var(--r-lg);border:1px solid var(--border);position:relative;overflow:hidden} .cmp-side.A{background:linear-gradient(180deg,rgba(0,230,100,.05),transparent 60%);border-color:var(--green-line)} .cmp-side.B{background:linear-gradient(180deg,rgba(215,182,110,.05),transparent 60%);border-color:var(--amber-line)} .cmp-side .ticker{font-size:38px;font-weight:900;letter-spacing:-.03em;line-height:1} .cmp-side.A .ticker{color:var(--green)} .cmp-side.B .ticker{color:var(--amber)} .cmp-side .company{color:var(--muted);font-size:14px;margin-top:4px} .cmp-side .price{font-size:30px;font-weight:900;margin-top:14px} .cmp-table{margin-top:16px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .ct-row{display:grid;grid-template-columns:1fr 1.4fr 1fr;padding:12px 18px;border-bottom:1px solid var(--border);align-items:center;font-size:13.5px;gap:10px} .ct-row:last-child{border-bottom:0} .ct-row.head{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);background:var(--surface-2)} .ct-row .lbl{text-align:center;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em} .ct-row .val{font-weight:700;font-variant-numeric:tabular-nums} .ct-row .val.A{text-align:right} .ct-row .val.B{text-align:left} .ct-row .val.win{color:var(--green);font-weight:900} .ct-row .val.lose{color:var(--muted)} /* Briefing */ .brief-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px} .consensus-donut{position:relative;width:200px;height:200px;margin:0 auto} .news-list{display:grid;gap:0} .news-item{padding:14px 0;border-top:1px solid var(--border)} .news-item:first-child{border-top:0} .cmp-trends{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cmp-modules{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px} .news-item h4{font-size:13.5px;font-weight:700;margin-bottom:4px;line-height:1.35} .news-item h4 a{color:var(--text)} .news-item h4 a:hover{color:var(--green);text-decoration:underline} .news-item .meta{font-size:11.5px;color:var(--faint)} /* Ranking */ .rank-table{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .rank-row{display:grid;grid-template-columns:56px 1fr 1.2fr 140px 100px 110px 110px;gap:12px;padding:14px 18px;align-items:center;border-bottom:1px solid var(--border);font-size:13.5px} .rank-row.head{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);background:var(--surface-2)} .rank-row.top{background:linear-gradient(90deg,var(--green-soft),transparent);box-shadow:inset 3px 0 0 var(--green)} .rank-num{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-weight:900} .rank-row.top .rank-num{background:var(--green);color:var(--green-ink)} .mini-bar{height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden} .mini-bar span{display:block;height:100%;background:var(--green);transition:width .6s ease} /* Portfolio */ .pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pf-table{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .pf-row{display:grid;grid-template-columns:80px 1fr 80px 100px 90px 90px 110px;gap:10px;padding:12px 16px;align-items:center;border-bottom:1px solid var(--border);font-size:13px} .pf-row.head{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);background:var(--surface-2);font-weight:800} /* Insights (P2): Beobachtungszeilen */ .ins-row{display:flex;align-items:flex-start;gap:10px} .ins-row[data-sym]:hover span{color:var(--text)} /* Creator */ .creator-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start} .tpl-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:4px} .tpl-item{padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;text-align:left;display:grid;gap:4px;transition:var(--t)} .tpl-item:hover{border-color:var(--border-2)} .tpl-item[aria-pressed=true]{background:var(--green-soft);border-color:var(--green-line);box-shadow:0 0 0 1px var(--green-line)} .tpl-item strong{font-size:13.5px;font-weight:800} .tpl-item small{font-size:11.5px;color:var(--muted)} .tpl-group-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);padding:14px 4px 6px} .tpl-subgroup{display:block} .tpl-subgroup>summary{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:6px 4px 2px;cursor:pointer;user-select:none} .tpl-subgroup[open]>summary,.tpl-subgroup>summary:hover{color:var(--text)} .tpl-subgroup::details-content{display:block} .tpl-subgroup>.tpl-item{width:100%;box-sizing:border-box;margin-top:8px} .sowhat{display:grid;gap:10px;margin:0 0 16px} .sowhat-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .sowhat-title{font-size:15px;font-weight:900;letter-spacing:.01em} .sowhat-list{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13.5px;line-height:1.45} .sowhat-list li::marker{color:var(--green)} .sowhat-disc{font-size:11px;color:var(--faint)} .risk-card{margin-top:16px} .risk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px} .risk-grid .kpi-v{font-size:24px} .risk-kpi{cursor:help} .risk-kpi .kpi-l::after{content:"ⓘ";margin-left:5px;color:var(--faint);font-size:10px;font-weight:700;opacity:.7} .risk-foot{margin-top:14px;font-size:11px;color:var(--faint);line-height:1.5} .radar-why-wrap{margin-top:16px} .radar-why{display:grid;gap:8px} .rw-item{padding:11px 13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);display:grid;gap:6px} .rw-head{display:flex;align-items:center;gap:10px} .rw-sym{font-weight:900;font-size:13px;color:var(--green);background:none;border:none;padding:0;cursor:pointer} .rw-sym:hover{text-decoration:underline} .rw-body{display:grid;gap:3px} .rw-headline{font-size:12.5px;line-height:1.4;color:var(--text);text-decoration:none} a.rw-headline:hover .rw-title{text-decoration:underline} .rw-meta{color:var(--muted);font-size:11.5px} .rw-fallback{color:var(--muted)} .rw-vol{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-line);padding:2px 8px;border-radius:999px} .preview-wrap{display:grid;gap:14px} .canvas-frame{background:#000;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;width:100%;display:grid;place-items:center;position:relative} .canvas-frame.r169{aspect-ratio:16/9} .canvas-frame.r11{aspect-ratio:1/1;max-width:680px;justify-self:center} .canvas-frame.r916{aspect-ratio:9/16;max-height:74vh;justify-self:center;width:auto;height:74vh} .canvas-frame canvas{width:100%;height:100%;display:block} .preview-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center} .story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:10px} .story-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;display:grid;gap:8px} .story-card .frame{aspect-ratio:9/16;background:#000;border-radius:var(--r-sm);overflow:hidden} .story-card canvas{width:100%;height:100%;display:block} .story-card .cap{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center} /* Creator Studio Controls (T2.4) */ .creator-controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;padding:14px 18px;margin-bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)} .cc-group{display:flex;align-items:center;gap:10px} .cc-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)} .cc-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full)} .cc-seg button{padding:6px 14px;border-radius:var(--r-full);font-size:12.5px;font-weight:700;color:var(--muted);transition:var(--t),transform var(--t-fast)} .cc-seg button:active{transform:scale(.96)} .cc-seg button[aria-pressed=true]{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1px var(--green-line)} .cc-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} .cc-toggle{padding:7px 14px;border-radius:var(--r-full);font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);transition:var(--t),transform var(--t-fast)} .cc-toggle::before{content:"○";margin-right:6px;opacity:.7;font-size:11px} .cc-toggle[aria-pressed=true]{background:var(--green-soft);color:var(--green);border-color:var(--green-line)} .cc-toggle[aria-pressed=true]::before{content:"●";opacity:1} .cc-toggle:active{transform:scale(.96)} /* Creator Ticker-Picker (T2.5) */ .creator-picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px} .cp-dropdown{position:relative} .cp-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:300px;max-height:360px;overflow:auto;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:10px} .cp-search{width:100%;padding:9px 12px;border-radius:var(--r-sm);min-height:auto;margin-bottom:8px} .cp-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding:8px 4px 5px} .cp-list{display:grid;gap:3px} .cp-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;text-align:left;width:100%;font-size:13px;font-weight:800;color:var(--text);transition:var(--t)} .cp-item:hover{background:var(--surface-3);color:var(--green)} .cp-item small{color:var(--muted);font-weight:600;font-size:11px} .cp-empty{font-size:12px;color:var(--faint);padding:6px 4px} .cp-recent-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cp-recent-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)} .cp-recent{display:flex;gap:6px;flex-wrap:wrap} .cp-chip{padding:5px 11px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:12px;font-weight:800;color:var(--muted);transition:var(--t),transform var(--t-fast)} .cp-chip:hover{color:var(--green);border-color:var(--green-line)} .cp-chip:active{transform:scale(.95)} /* Posts Generator */ .posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:20px} .post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;display:grid;gap:12px;position:relative;overflow:hidden;transition:var(--t)} .post-card:hover{border-color:var(--green-line)} .post-card.x{box-shadow:inset 0 1px 0 rgba(98,216,227,.06)} .post-card.tt{box-shadow:inset 0 1px 0 rgba(167,139,250,.08)} .post-card.ig{box-shadow:inset 0 1px 0 rgba(255,108,122,.06)} .post-head{display:flex;justify-content:space-between;align-items:center;gap:10px} .post-platform{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.02em} .post-platform .badge{font-size:10px;padding:4px 10px} .post-platform .icon{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-weight:900;font-size:13px} .post-card.x .icon{color:var(--cyan)} .post-card.tt .icon{color:var(--purple)} .post-card.ig .icon{color:#ff6c7a} .post-meta{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.04em} .post-body{font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--text);font-family:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;min-height:160px;resize:vertical;width:100%} .post-body:focus{outline:none;border-color:var(--green-line)} .post-actions{display:flex;gap:8px;justify-content:flex-end} /* Loading / empty */ .empty{padding:60px 24px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--r-md)} .empty h3{font-size:20px;color:var(--text);margin-bottom:8px;letter-spacing:-.01em} .empty p{font-size:14px;color:var(--muted);max-width:480px;margin:0 auto} .spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--green);animation:sp .8s linear infinite;margin:0 auto 14px} @keyframes sp{to{transform:rotate(360deg)}} .toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,16px);background:var(--text);color:var(--bg);padding:10px 22px;border-radius:var(--r-full);font-size:13px;font-weight:800;z-index:100;opacity:0;transition:opacity .25s,transform .25s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-pop);overflow:hidden} .toast.show{opacity:1;transform:translate(-50%,0)} .toast.show::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--green);transform-origin:left;animation:toastProg 2.2s linear forwards} @keyframes toastProg{from{transform:scaleX(1)}to{transform:scaleX(0)}} /* Responsive */ @media(max-width:1180px){ .snap{grid-template-columns:1fr 1fr} .snap-card.col-c{grid-column:1/-1} .kpis{grid-template-columns:repeat(4,1fr)} } @media(max-width:880px){ .snap{grid-template-columns:1fr} .snap-card.col-b,.snap-card.col-c{grid-column:auto} .kpis{grid-template-columns:repeat(2,1fr)} .creator-grid,.brief-grid,.pf-grid,.cmp-grid{grid-template-columns:1fr} .cmp-trends,.cmp-modules{grid-template-columns:1fr} .tpl-list{position:static;max-height:none} #previewArea{scroll-margin-top:80px;width:100%} .rank-row{grid-template-columns:48px 1fr 80px 90px;font-size:12px} .rank-row .hide-mob{display:none} .pf-row{grid-template-columns:70px 1fr 70px 90px;font-size:12px} .pf-row .hide-mob{display:none} } @media(max-width:720px){ /* Mobile: Topbar zweizeilig, Tab-Leiste volle Breite + horizontal wischbar (große Tap-Flächen) */ .topbar{grid-template-columns:1fr auto;grid-template-areas:"brand right" "tabs tabs";row-gap:10px;align-items:center;top:8px;padding:10px 12px} .brand{grid-area:brand;min-width:0} .brand small{display:none} .topright{grid-area:right} .user-meta{display:none} .tabs{grid-area:tabs;width:100%;justify-self:stretch;gap:6px;padding:5px;border-radius:var(--r-lg);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{padding:12px 18px;min-height:46px;font-size:14px;flex:0 0 auto;scroll-snap-align:center} } /* Micro-Interactions & Polish (T1.9) */ .btn{transition:var(--t),transform var(--t-fast)} .btn:active{transform:scale(.97)} .theme-toggle:active,.lang-toggle:active{transform:scale(.92)} .kpi{transition:var(--t),transform var(--t),box-shadow var(--t)} .kpi:hover{transform:translateY(-2px)} .tpl-item,.sr-item,.post-card{transition:var(--t),transform var(--t-fast)} .sr-item:active{transform:scale(.99)} .sr-item.sel{border-color:var(--green-line);background:var(--surface-2)} @keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tab-pane{animation:fadeSlideIn .28s cubic-bezier(.16,1,.3,1)} /* Skeleton shimmer (Loading) */ .skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-md)} .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--text) 9%,transparent),transparent);animation:shimmer 1.4s infinite} @keyframes shimmer{100%{transform:translateX(100%)}} .sk-wrap{padding:6px 2px} .sk-line{height:13px;margin:11px 0;border-radius:6px} .sk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px} .sk-tile{height:92px;border-radius:var(--r-md)} /* Landing Page (T3.1) */ .lp-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--border)} .lp-nav-right{display:flex;align-items:center;gap:10px} .lp-hero{max-width:980px;margin:0 auto;padding:90px 24px 56px;text-align:center} .lp-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);padding:7px 16px;border-radius:var(--r-full);margin-bottom:24px} .lp-headline{font-size:clamp(34px,6vw,68px);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:22px} .lp-sub{font-size:clamp(16px,2.2vw,21px);color:var(--muted);max-width:660px;margin:0 auto 32px;line-height:1.5} .lp-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .lp-cta-row .btn{min-height:52px;padding:12px 28px;font-size:15px} .lp-features{max-width:1120px;margin:0 auto;padding:30px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .lp-feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;transition:var(--t),transform var(--t)} .lp-feature:hover{transform:translateY(-3px);border-color:var(--green-line);box-shadow:var(--shadow-2)} .lp-feature-icon{width:48px;height:48px;border-radius:14px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin-bottom:16px;border:1px solid var(--green-line)} .lp-feature h3{font-size:18px;margin-bottom:8px;letter-spacing:-.01em} .lp-feature p{font-size:14px;color:var(--muted);line-height:1.55} .lp-section{max-width:1120px;margin:0 auto;padding:64px 24px;text-align:center} .lp-section h2{font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-.02em;margin:6px 0 14px} .lp-footer{border-top:1px solid var(--border);padding:30px 24px;text-align:center;font-size:12px;color:var(--faint);margin-top:30px} @keyframes lpFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .lp-hero>*{animation:lpFadeUp .6s cubic-bezier(.16,1,.3,1) backwards} .lp-hero>*:nth-child(2){animation-delay:.06s} .lp-hero>*:nth-child(3){animation-delay:.12s} .lp-hero>*:nth-child(4){animation-delay:.18s} .lp-hero>*:nth-child(5){animation-delay:.24s} /* NVDA-Demo-Showcase (T3.2) */ .demo-stage{position:relative;max-width:760px;margin:32px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-2);text-align:left} .demo-badge{position:absolute;top:16px;right:18px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-line);padding:4px 11px;border-radius:var(--r-full)} .demo-search{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)} .demo-search-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)} .demo-typed{font-size:20px;font-weight:900;color:var(--green);letter-spacing:.04em;min-width:8px} .demo-caret{width:2px;height:20px;background:var(--green);border-radius:2px;animation:demoBlink 1.05s step-end infinite} @keyframes demoBlink{50%{opacity:0}} .demo-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;min-height:78px} .demo-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;animation:lpFadeUp .5s cubic-bezier(.16,1,.3,1) backwards} .demo-kpi-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)} .demo-kpi-v{font-size:21px;font-weight:900;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums} .demo-graphic{margin-top:14px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)} .demo-graphic.demo-graphic-in{opacity:1;transform:none} @media (max-width:560px){.demo-kpis{grid-template-columns:repeat(2,1fr)}} /* Pricing cards (T3.3) */ .lp-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1080px;margin:34px auto 0;text-align:left} .price-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 26px;display:flex;flex-direction:column;gap:18px;transition:var(--t),transform var(--t)} .price-card.featured{border-color:var(--green-line);box-shadow:0 0 0 1px var(--green-line),var(--shadow-2)} .price-card:hover{transform:translateY(-3px)} .price-badge{position:absolute;top:-11px;left:26px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);background:var(--green);padding:4px 12px;border-radius:var(--r-full)} .price-name{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .price-tag{display:flex;align-items:baseline;gap:6px} .price-amt{font-size:42px;font-weight:900;letter-spacing:-.03em} .price-per{font-size:14px;color:var(--faint);font-weight:700} .price-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0;flex:1} .price-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4} .price-list li.muted{color:var(--faint)} .pi-check{color:var(--green);font-weight:900;flex:0 0 auto} .pi-x{color:var(--faint);font-weight:900;flex:0 0 auto} .btn.block{width:100%;justify-content:center} /* ===== Launch-Angebot: Preis-Umschaltung (normal ↔ reduziert) ===== */ .price-offer{display:none;align-items:baseline;gap:8px;flex-wrap:wrap} :root.offer-active .price-normal{display:none} :root.offer-active .price-offer{display:flex} .price-old{color:var(--faint);font-weight:800;font-size:22px;text-decoration:line-through;text-decoration-thickness:2px} .price-badge-offer{align-self:center;font-size:11px;font-weight:900;letter-spacing:.04em;color:var(--green-ink);background:var(--green);padding:2px 9px;border-radius:var(--r-full)} /* ===== Launch-Angebot: Sticky-Leiste + Countdown ===== */ .lp-offer-bar{display:none} :root.offer-active .lp-offer-bar{display:flex;position:sticky;top:0;z-index:60;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;min-height:44px;padding:8px 18px;text-decoration:none;color:var(--green-ink);background:linear-gradient(90deg,var(--green),color-mix(in oklab,var(--green) 80%,#000));border-bottom:1px solid var(--green-line)} .offer-txt{font-size:14px;font-weight:800} .offer-count{display:inline-flex;gap:6px;align-items:center} .offer-pill{display:inline-flex;align-items:baseline;gap:3px;background:color-mix(in oklab,var(--green-ink) 15%,transparent);border-radius:8px;padding:2px 7px;font-variant-numeric:tabular-nums} .offer-pill b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1} .offer-pill i{font-size:10px;font-style:normal;font-weight:800;opacity:.82;text-transform:uppercase;letter-spacing:.03em} .offer-cta{font-size:14px;font-weight:900;text-decoration:underline;text-underline-offset:3px} @media(max-width:640px){ :root.offer-active .lp-offer-bar{position:static} .offer-txt{flex-basis:100%;text-align:center} } /* Legal pages (T3.3) */ .legal-page{max-width:760px;margin:0 auto;padding:48px 24px 24px;text-align:left} .legal-back{display:inline-block;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;margin-bottom:22px;transition:var(--t)} .legal-back:hover{color:var(--green)} .legal-prose h1{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.02em;margin-bottom:18px} .legal-prose h2{font-size:18px;font-weight:800;margin:26px 0 8px} .legal-prose p,.legal-prose li{font-size:14.5px;line-height:1.65;color:var(--muted)} .legal-prose ul{margin:8px 0;padding-left:18px;display:flex;flex-direction:column;gap:9px} .legal-prose a{color:var(--green)} .legal-prose strong{color:var(--text);font-weight:700} .legal-note{margin-top:26px;padding:12px 14px;font-size:12.5px;border:1px dashed var(--border);border-radius:var(--r-md);color:var(--faint)} .lp-footer-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px} .lp-footer-links a{color:var(--muted);text-decoration:none;font-weight:600;transition:var(--t)} .lp-footer-links a:hover{color:var(--green)} html[lang="de"] [data-lang="en"]{display:none} html[lang="en"] [data-lang="de"]{display:none} /* Auth page (T3.5) */ .auth-wrap{max-width:440px;margin:0 auto;padding:52px 20px} .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 26px;box-shadow:var(--shadow-2)} .auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:5px;margin-bottom:22px} .auth-tab{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:13.5px;padding:9px;border-radius:8px;cursor:pointer;transition:var(--t)} .auth-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)} .auth-form{display:flex;flex-direction:column;gap:14px} .auth-form h1{font-size:24px;font-weight:900;letter-spacing:-.02em} .auth-sub{font-size:14px;color:var(--muted);margin-top:-6px;line-height:1.45} .auth-field{display:flex;flex-direction:column;gap:6px} .auth-field>span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em} .auth-field input{width:100%;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font:inherit;font-size:15px;transition:var(--t)} .auth-field input:focus{outline:none;border-color:var(--green-line);box-shadow:0 0 0 3px var(--green-soft)} .auth-hint{font-size:11.5px;color:var(--faint)} .auth-error{background:var(--red-soft,rgba(255,90,90,.12));border:1px solid var(--red-line,rgba(255,90,90,.32));color:var(--red,#ff5a5a);font-size:13px;font-weight:600;padding:10px 12px;border-radius:var(--r-md)} .auth-switch{appearance:none;border:0;background:transparent;color:var(--green);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px;margin-top:2px} .auth-switch:hover{text-decoration:underline} /* Header user menu + Branding-Settings modal (T3.6) */ .user-chip{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);cursor:pointer;font:inherit;color:var(--text);transition:var(--t)} .user-chip:hover{border-color:var(--green-line)} .user-chip .avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;border:1.5px solid var(--green);background:#000;display:grid;place-items:center;color:var(--green);font-weight:900;font-size:12px;flex:0 0 auto} .user-chip .avatar img{width:100%;height:100%;object-fit:cover} .user-meta{text-align:left;line-height:1.15} .user-meta strong{font-size:13px;font-weight:800;display:block} .user-meta>span{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:5px} .plan-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-full);border:1px solid var(--border)} .plan-badge.free{color:var(--muted);background:var(--surface-2)} .plan-badge.premium{color:var(--green-ink);background:var(--green);border-color:var(--green)} .quota-pill{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:5px 11px;border-radius:var(--r-full);white-space:nowrap} .icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:var(--t);flex:0 0 auto} .icon-btn:hover{color:var(--text);border-color:var(--green-line);background:var(--surface-2)} @media (max-width:720px){ .quota-pill{display:none} .user-meta>span{display:none} } .modal-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:lpFadeUp .2s ease} .modal-overlay[hidden]{display:none} body.modal-open{overflow:hidden} .modal{width:100%;max-width:480px;max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-2)} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px} .modal-head h2{font-size:19px;font-weight:900;letter-spacing:-.01em} .modal-body{padding:4px 22px 8px;display:flex;flex-direction:column;gap:16px} .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px 22px} .settings-account{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px} .settings-account>div{display:flex;flex-direction:column;gap:5px;align-items:flex-start} .set-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)} .settings-account strong{font-size:13.5px;font-weight:800} .set-field{display:flex;flex-direction:column;gap:6px} .set-field>span{font-size:12px;font-weight:700;color:var(--muted)} .set-field input{width:100%;padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font:inherit;font-size:15px;transition:var(--t)} .set-field input:focus{outline:none;border-color:var(--green-line);box-shadow:0 0 0 3px var(--green-soft)} .set-hint{font-size:11.5px;color:var(--faint)} .brand-preview{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)} .bp-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1.5px solid var(--green);background:#000;display:grid;place-items:center;color:var(--green);font-weight:900;font-size:15px;flex:0 0 auto} .bp-avatar img{width:100%;height:100%;object-fit:cover} .brand-preview strong{font-size:15px;font-weight:800;display:block} .brand-preview small{font-size:11.5px;color:var(--faint)} .set-presets{display:flex;flex-direction:column;gap:10px} .preset-line{display:flex;align-items:center;justify-content:space-between;gap:10px} .preset-line>span{font-size:13px;font-weight:600;color:var(--muted)} .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;gap:3px} .seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:7px;cursor:pointer;transition:var(--t)} .seg button.active{background:var(--green);color:var(--green-ink)} .set-billing{border-top:1px solid var(--border);padding-top:16px;display:flex;flex-direction:column;gap:8px} .set-billing .set-hint{margin:0} .set-billing .btn{margin-top:6px} #billingCodeRow{display:flex;flex-direction:column;gap:10px;margin-top:4px} .cc-locked{opacity:.5} /* Grafik-Light/Sprache = Premium (T3.9) */ /* Tiefenanalyse-Module (T4.1) */ .modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px} .mod-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px} .mod-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px} .mod-hint{font-size:10px;color:var(--faint);text-transform:none;letter-spacing:0;font-weight:700} .mod-badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:var(--r-full);border:1px solid var(--border);white-space:nowrap} .mod-badge.pos{color:var(--green);background:var(--green-soft);border-color:var(--green-line)} .mod-badge.neg{color:var(--red);background:var(--red-soft,rgba(255,90,90,.12));border-color:var(--red-line,rgba(255,90,90,.32))} .mod-badge.neu{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)} .mod-big{font-size:30px;font-weight:900;letter-spacing:-.02em} .mod-big.pos{color:var(--green)} .mod-big.neg{color:var(--red)} .mod-sub{font-size:11.5px;color:var(--faint);margin-top:6px} .mod-rows{display:flex;flex-direction:column;gap:9px} .mod-rows>div{display:flex;align-items:center;gap:8px;font-size:13px} .mod-k{flex:1;color:var(--muted);font-weight:600} .mod-rows .num.pos{color:var(--green)} .mod-rows .num.neg{color:var(--red)} .rsi-bar{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) 0 30%,var(--surface-3) 30% 70%,var(--red) 70% 100%);margin:3px 0} .rsi-mark{position:absolute;top:-3px;width:3px;height:12px;background:var(--text);border-radius:2px;transform:translateX(-50%)} .peer-chips{display:flex;flex-wrap:wrap;gap:8px} .peer-chip{appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;font-weight:800;font-size:13px;padding:7px 12px;border-radius:var(--r-md);cursor:pointer;transition:var(--t)} .peer-chip:hover{border-color:var(--green-line);color:var(--green);transform:translateY(-1px)} .mod-peers,.mod-earn{grid-column:span 2} .earn-row{display:flex;gap:8px;flex-wrap:wrap} .earn-q{flex:1;min-width:58px;text-align:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 6px} .earn-lbl{font-size:9.5px;color:var(--faint)} .earn-v{font-size:13px;font-weight:800;margin:2px 0} .earn-q.pos .earn-v{color:var(--green)} .earn-q.neg .earn-v{color:var(--red)} .earn-s{font-size:10.5px;color:var(--muted)} @media(max-width:640px){.mod-peers,.mod-earn{grid-column:span 1}} /* Watchlist (T4.3) */ .wl-strip{margin-bottom:20px} .wl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .wl-add{display:flex;gap:6px} .wl-add input{width:118px;padding:7px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font:inherit;font-size:13px;font-weight:700;text-transform:uppercase} .wl-add input:focus{outline:none;border-color:var(--green-line);box-shadow:0 0 0 3px var(--green-soft)} .wl-add .btn.sm{min-height:34px;padding:6px 14px} .wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .wl-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;transition:var(--t)} .wl-card:hover{border-color:var(--green-line)} .wl-remove{position:absolute;top:5px;right:7px;width:20px;height:20px;border:0;background:transparent;color:var(--faint);font-size:17px;line-height:1;cursor:pointer;border-radius:6px;transition:var(--t)} .wl-remove:hover{color:var(--red);background:var(--surface-2)} .wl-sym{display:block;border:0;background:transparent;color:var(--text);font:inherit;font-weight:900;font-size:16px;letter-spacing:.02em;cursor:pointer;padding:0;text-align:left} .wl-sym:hover{color:var(--green)} .wl-spark,.wl-spark-empty{width:100%;height:28px;margin:6px 0;display:block} .wl-spark{color:var(--muted)} .wl-spark.pos{color:var(--green)} .wl-spark.neg{color:var(--red)} .wl-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .wl-price{font-size:14px;font-weight:800} .wl-delta{font-size:12.5px;font-weight:800} .wl-delta.pos{color:var(--green)} .wl-delta.neg{color:var(--red)} .wl-delta.muted{color:var(--faint)} .wl-empty{grid-column:1/-1;color:var(--faint);font-size:13px;padding:8px 2px} /* Content-Radar (T4.4) */ .radar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px} .radar-title{font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:-.02em;margin-top:4px} /* Radar-Heatmap (Portfolio-Treemap) */ .radar-heatmap-wrap{margin-bottom:22px} .radar-hm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .rhm-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);font-weight:700} .rhm-leg-item{display:inline-flex;align-items:center;gap:6px} .rhm-leg-swatch{width:12px;height:12px;border-radius:3px;display:inline-block} .rhm-leg-swatch.pos{background:color-mix(in oklab,var(--green) 60%,var(--surface))} .rhm-leg-swatch.neg{background:color-mix(in oklab,var(--red) 60%,var(--surface))} .radar-heatmap{position:relative;width:100%;aspect-ratio:16/7;min-height:250px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)} .rhm-tile{position:absolute;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;text-align:center;border:1px solid var(--bg);border-radius:6px;cursor:pointer;color:var(--text);font:inherit;padding:2px;line-height:1.05;transition:filter var(--t),outline var(--t)} .rhm-tile:hover{filter:brightness(1.08);outline:2px solid var(--text);outline-offset:-2px;z-index:2} .rhm-sym{font-weight:900;letter-spacing:-.02em} .rhm-chg{font-size:11px;font-weight:800;opacity:.94} .rhm-wt{font-size:10px;font-weight:700;opacity:.7} .rhm-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;padding:16px;text-align:center} .wl-pf{position:absolute;top:6px;right:7px;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);border-radius:var(--r-full);padding:2px 7px;pointer-events:none} @media(max-width:760px){.radar-heatmap{aspect-ratio:auto;min-height:340px}} .radar-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .radar-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px} .radar-movers{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:10px} .rdr-mover{text-align:left;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-md);padding:11px 12px;cursor:pointer;transition:var(--t);font:inherit;color:var(--text)} .rdr-mover:hover{border-color:var(--green-line);transform:translateY(-1px)} .rdr-mover-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px} .rdr-sym{font-weight:900;font-size:15px} .rdr-price{font-size:13px;font-weight:700;color:var(--muted);margin-top:2px} .radar-earnings{display:flex;flex-direction:column;gap:10px;margin-top:10px} .rdr-earn{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-md);padding:11px 14px} .rdr-earn.soon{border-color:var(--green-line);box-shadow:inset 0 0 0 1px var(--green-line)} .rdr-earn-l{display:flex;flex-direction:column;gap:3px} .rdr-earn-date{font-size:12px;color:var(--muted)} .rdr-earn .btn{min-height:34px;padding:6px 14px;font-size:12.5px;white-space:nowrap} @media(max-width:760px){.radar-grid{grid-template-columns:1fr}} .radar-recent{margin-top:20px} .recent-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .recent-chip{appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;font-weight:800;font-size:13px;padding:7px 12px;border-radius:var(--r-md);cursor:pointer;transition:var(--t)} .recent-chip:hover{border-color:var(--green-line);color:var(--green)} .saved-cmp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px} .saved-cmp-list{display:flex;flex-wrap:wrap;gap:8px} .saved-cmp{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden} .saved-cmp-go{border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;font-size:13px;padding:7px 4px 7px 12px;cursor:pointer} .saved-cmp-go:hover{color:var(--green)} .saved-cmp-rm{border:0;background:transparent;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;padding:7px 10px 7px 6px} .saved-cmp-rm:hover{color:var(--red)} /* Portfolio import (T4.6) */ .pf-source{margin-bottom:4px;width:fit-content;max-width:100%;flex-wrap:wrap} .pf-field{display:flex;flex-direction:column;gap:6px;margin-top:14px} .pf-field>label{font-size:12px;font-weight:700;color:var(--muted)} .pf-field input:not([type=file]),.pf-field textarea{width:100%;padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font:inherit;font-size:14px;transition:var(--t)} .pf-field input:not([type=file]):focus,.pf-field textarea:focus{outline:none;border-color:var(--green-line);box-shadow:0 0 0 3px var(--green-soft)} .pf-field textarea{min-height:120px;resize:vertical} .pf-field input[type=file]{font:inherit;font-size:13px;color:var(--muted)} /* ============ Landing (story-fan + reveal hier; v2-Sektionen am Dateiende) ============ */ /* Story-Vorlagen als Fächer (9:16) */ .story-fan{display:flex;justify-content:center;align-items:flex-end;margin-top:44px;min-height:430px;perspective:1500px} .fan-card{width:210px;border:9px solid #14171c;border-radius:26px;overflow:hidden;background:#05070a;box-shadow:0 40px 80px -34px rgba(0,0,0,.8),0 0 0 1px var(--border);transition:transform .55s cubic-bezier(.16,1,.3,1);transform-origin:bottom center} .fan-card .canvas-frame.r916{width:100%;height:auto;max-height:none;border:0;border-radius:18px;background:#05070a} .fan-card.f1{transform:rotate(-11deg) translateX(46px) translateY(14px);z-index:1} .fan-card.f2{transform:translateY(-6px) scale(1.04);z-index:3} .fan-card.f3{transform:rotate(11deg) translateX(-46px) translateY(14px);z-index:2} .story-fan:hover .fan-card.f1{transform:rotate(-7deg) translateX(8px) translateY(0)} .story-fan:hover .fan-card.f2{transform:translateY(-16px) scale(1.05)} .story-fan:hover .fan-card.f3{transform:rotate(7deg) translateX(-8px) translateY(0)} @media(max-width:760px){ .story-fan{min-height:340px} .fan-card{width:140px;border-width:7px;border-radius:20px} .fan-card.f1{transform:rotate(-10deg) translateX(30px) translateY(10px)} .fan-card.f3{transform:rotate(10deg) translateX(-30px) translateY(10px)} } @media(max-width:440px){ .fan-card{width:108px} .fan-card.f1{transform:rotate(-9deg) translateX(20px)} .fan-card.f3{transform:rotate(9deg) translateX(-20px)} } /* Reveal: reine CSS-Einblendung, endet IMMER sichtbar (kein Specificity-Stuck mehr). */ [data-reveal]{animation:lpFadeUp .6s cubic-bezier(.16,1,.3,1) both} [data-reveal].in{opacity:1;transform:none} .auth-ok{color:var(--green);font-size:13.5px;font-weight:600;line-height:1.4;margin-top:2px} /* ============================================================ Redesign-Layer (Phase D1) — additive Modernisierung, CSS-only. Bewusst spät im Cascade; keine DOM/JS-Änderung, nur bekannte Selektoren (Buttons/Cards/Topbar/Tabs/KPI/Inputs). ============================================================ */ :root{ --r-md:14px; --r-lg:20px; --r-xl:28px; --grad-green:linear-gradient(135deg,#1bf071 0%,var(--green) 50%,#00c36e 100%); --shadow-2:0 12px 40px rgba(0,0,0,.42); --ring:0 0 0 3px var(--green-soft); } [data-theme="light"]{ --shadow-2:0 12px 36px rgba(15,23,42,.12); } /* Buttons: Verlauf, spürbarer Lift, Fokus-Ring */ .btn{transition:transform var(--t-fast),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t)} .btn.primary{background:var(--grad-green);box-shadow:0 6px 20px var(--green-glow)} .btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--green-glow)} .btn:active{transform:translateY(0) scale(.985)} .btn:focus-visible{outline:none;box-shadow:var(--ring)} /* Karten: Tiefe + Hover-Lift (kein transform → kein Reflow) */ .card{box-shadow:var(--shadow-1)} .card:hover{border-color:var(--border-2);box-shadow:var(--shadow-2)} /* Topbar: mehr Glas/Tiefe */ .topbar{box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.05)} /* Tabs: kräftigerer aktiver Zustand */ .tabs button[aria-pressed=true]{background:var(--grad-green);color:var(--green-ink);box-shadow:0 4px 14px var(--green-glow)} /* KPI-Kacheln: dezenter Hover-Lift */ .kpi{transition:transform var(--t),box-shadow var(--t),border-color var(--t)} .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)} /* Inputs: Fokus-Ring */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{box-shadow:var(--ring)} /* Regions-Badge nicht mehr „US" (jetzt US/UK/CA) */ .usonly-hint::before{content:"🌐";background:none;border:none;color:var(--muted);padding:0;font-size:14px;line-height:1} /* Mobile: schwebende Bottom-Nav statt Top-Tabs + größere Touch-Ziele */ @media (max-width:720px){ .btn{min-height:46px} .btn.sm{min-height:38px} .card{padding:18px} /* Top-Tabs → fixierte, schwebende Bottom-Nav (alle 6 sichtbar, kein Scroll). backdrop-filter am Topbar entfernen, sonst wird er Containing-Block für die fixe Nav. */ .topbar{grid-template-columns:1fr auto;grid-template-areas:"brand right";backdrop-filter:none;background:var(--bg)} .tabs{position:fixed;left:8px;right:8px;bottom:8px;z-index:40;width:auto;justify-self:auto; display:flex;gap:2px;padding:6px;overflow:visible; background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(22px) saturate(140%); border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-pop)} .tabs button{flex:1 1 0;min-width:0;display:grid;place-items:center; padding:9px 2px;min-height:48px;font-size:10.5px;letter-spacing:-.01em;white-space:nowrap} body:has(.tabs){padding-bottom:88px} .toast{bottom:100px} } @media (max-width:360px){ .tabs button{font-size:9.5px} } /* DYNA-Score™ Hero (B4) */ .dyna-hero{margin-bottom:20px} .dyna-head{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center} .dyna-green{--dyna-c:#00e664} .dyna-blue{--dyna-c:#62a8ff} .dyna-amber{--dyna-c:#d7b66e} .dyna-orange{--dyna-c:#ff9f43} .dyna-red{--dyna-c:#ff4d6a} .dyna-ring{width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid var(--dyna-c,#d7b66e);background:color-mix(in oklab,var(--dyna-c,#d7b66e) 14%,transparent);flex:0 0 auto} .dyna-num{font-size:40px;font-weight:900;line-height:1;letter-spacing:-1px} .dyna-of{font-size:11px;color:var(--muted);margin-top:2px} .dyna-band{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--dyna-c,#d7b66e);margin-top:2px} .dyna-tagline{font-size:12.5px;color:var(--muted);margin-top:4px} .dyna-radar-wrap{width:188px;height:150px;flex:0 0 auto} .dyna-radar-wrap canvas{width:100%!important;height:100%!important} .dyna-dims{margin-top:18px;display:grid;gap:9px} .dyna-dimrow{display:grid;grid-template-columns:116px 1fr 34px 64px;gap:12px;align-items:center;font-size:13px} .dyna-dimlbl{font-weight:700;color:var(--muted)} .dyna-dimbar{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden} .dyna-dimfill{display:block;height:100%;border-radius:4px;transition:width var(--t)} .dyna-dimval{font-weight:800;text-align:right} .dyna-dimconf{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:right;color:var(--faint)} .dc-data{color:var(--green)} .dc-partial{color:var(--amber)} .dc-low{color:var(--muted)} .dc-heuristik{color:var(--cyan)} .dc-none{color:var(--faint)} .dyna-note{margin-top:14px;font-size:11px;color:var(--faint);line-height:1.45} .dyna-overlays{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .dyna-ov{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)} .dyna-ov span{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800} .dyna-ov strong{font-size:14px;font-weight:800;letter-spacing:-.01em} @media(max-width:720px){ .dyna-head{grid-template-columns:auto 1fr} .dyna-radar-wrap{grid-column:1/-1;width:100%;max-width:280px;height:200px;margin:6px auto 0} .dyna-dimrow{grid-template-columns:84px 1fr 28px 52px;gap:8px;font-size:12px} .dyna-ring{width:88px;height:88px} .dyna-num{font-size:34px} } /* Reduced motion (Constraint 9 / vorbereitet für T1.9) */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* fix(mobile): Sprachauswahl verdeckt Logo */ @media (max-width: 640px) { .lp-nav { gap: 8px; } .brand { min-width: 0; flex-shrink: 1; overflow: hidden; } .brand strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-nav-right { flex-shrink: 0; gap: 4px; } .lang-toggle { min-width: 34px; padding: 0 8px; font-size: 10px; } } @media (max-width: 400px) { a[data-i18n="nav.openApp"], a[data-i18n="nav.login"] { display: none; } } /* ============================================================ Landing v2 (Branding-Rework) — Nav-Glass, Hero-Karussell, Marquee, Bento, Steps, Live-Demo, PI, FAQ, CTA-Band. Motion global via prefers-reduced-motion (oben) abgeschaltet. ============================================================ */ /* Hero */ /* Hero-Karussell */ /* Stat-Strip */ /* Marquee */ /* Feature-Bento */ /* How-it-works */ /* Live-Demo */ /* PI-Sektion */ /* FAQ */ /* CTA-Band + Featured-Pulse */ /* ============================================================ MOBILE-REWORK S1 · Typo-Fundament (Konzept A v3, Claude×GPT-gehärtet) Nur Mobile-Verhalten (<=720px) + globale Safe-Area-/A11y-Gates; Desktop unverändert. Am Dateiende, damit gleiche Spezifität die Alt-Regeln überschreibt (bewusst, statt Alt-Regeln anzufassen — minimalinvasiv und einzeln rollbackbar). ============================================================ */ /* Safe-Areas: EIN oberer Chrome-Offset als Token (env=0 auf Desktop ⇒ identisch zu heute). */ :root{ --chrome-top: calc(14px + env(safe-area-inset-top, 0px)); } .topbar{ top: var(--chrome-top); } @media (max-width:720px){ /* Bottom-Nav respektiert die iOS-Home-Bar */ .tabs{ bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } body:has(.tabs){ padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* --- Umbruch-Reparatur: Fließtext/Namen brechen sauber statt im overflow:hidden zu clippen --- */ .snap-card .company, .cmp-side .company, .kpi-n, .sowhat-list li, .mod-card p, .dyna-tagline, .dyna-note{ overflow-wrap:anywhere; } /* Harte Ausnahmen (GPT-Härtung): Ticker/Zahlen/Pills brechen NIE */ .num, .snap-card .ticker, .snap-card .price, .cmp-side .ticker, .kpi-v, .mod-big, .badge, .mod-badge, .quota-pill, .dyna-num{ white-space:nowrap; overflow-wrap:normal; word-break:normal; } /* --- Display-Zahlen: lineare clamp-Formeln (16px-Root; 320px ⇒ 32/28/17px, 719px ⇒ 52/44/21px) --- */ .snap-card .ticker{ font-size:clamp(2rem, calc(1rem + 5vw), 3.25rem); } .snap-card .price{ font-size:clamp(1.75rem, calc(.95rem + 4vw), 2.75rem); } .kpi-v{ font-size:clamp(1.0625rem, calc(.8625rem + 1vw), 1.3125rem); } .mod-big{ font-size:clamp(1.25rem, calc(1rem + 2vw), 1.875rem); } .snap-card .company{ font-size:clamp(.875rem, calc(.75rem + 1vw), 1.125rem); } .cmp-side .ticker{ font-size:clamp(1.5rem, calc(.9rem + 4vw), 2.375rem); } /* --- KPI-Labels: max. 2 Zeilen statt Uppercase-Clipping (ES-Längen!), Tracking reduziert --- */ .kpi-l{ letter-spacing:.06em; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; } /* --- Bottom-Nav-Labels: lesbar (min-height:48px-Targets bestehen bereits) --- */ .tabs button{ font-size:11.5px; letter-spacing:0; } } @media (max-width:360px){ /* Neutralisiert die alte 9.5px-Regel (spätere Quelle, gleiche Spezifität) */ .tabs button{ font-size:11px; } /* Held gestapelt: Preis auf eigener voller Zeile — nichts kollidiert bei 288px Innenbreite */ .snap-card .price{ display:block; margin-top:14px; } .snap-card .delta-row{ margin-top:6px; } } /* A11y-Gates (global): erzwungene Farben / Mehr-Kontrast ⇒ keine Glows, kräftigere Borders */ @media (forced-colors: active){ .kpi, .card, .snap-card, .tabs, .topbar{ box-shadow:none; } } @media (prefers-contrast: more){ :root{ --border:rgba(255,255,255,.28); --border-2:rgba(255,255,255,.42); } :root[data-theme="light"]{ --border:rgba(15,20,35,.34); --border-2:rgba(15,20,35,.5); } } /* ============================================================ MOBILE-REWORK S2 · Nav 5 Slots + „Mehr"-Sheet (Desktop: unverändert 6 Text-Tabs) ============================================================ */ .tab-ic{ display:none; } #moreTab{ display:none; } .radar-quick{ display:none; } @media (max-width:720px){ .tabs button{ display:grid; justify-items:center; align-content:center; gap:2px; padding:6px 2px; } .tab-ic{ display:block; width:20px; height:20px; } .tab-lb{ max-width:100%; overflow:hidden; text-overflow:ellipsis; } /* Briefing + Ranking wandern ins Sheet — Buttons bleiben im DOM (Routen/Deep-Links intakt) */ .tabs button[data-tab="briefing"], .tabs button[data-tab="ranking"]{ display:none; } #moreTab{ display:grid; } .tabs button[aria-pressed="true"]{ border-radius:var(--r-lg); background:var(--green-soft); } .radar-quick{ display:flex; gap:8px; margin:12px 0 2px; } .ms-overlay{ position:fixed; inset:0; z-index:60; background:rgba(5,7,12,.6); border:0; } .ms-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--surface-2); border:1px solid var(--border-2); border-bottom:0; border-radius:24px 24px 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow:var(--shadow-pop); } .ms-grab{ width:44px; height:4px; border-radius:var(--r-full); background:var(--faint); opacity:.5; margin:6px auto 10px; } .ms-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--border); color:var(--text); font:inherit; font-weight:700; font-size:14px; padding:13px 4px; min-height:48px; cursor:pointer; } .ms-row:first-of-type{ border-top:0; } .ms-ic{ width:30px; height:30px; border-radius:var(--r-sm); background:var(--surface-3); display:grid; place-items:center; font-size:14px; flex:0 0 auto; } .ms-div{ height:1px; background:var(--border); margin:2px 0; } } /* ============================================================ MOBILE-REWORK S3 · Analyse-Screen (<=720px) — Desktop komplett inert ============================================================ */ .mini-ctx{ display:none; } .kpis-more{ display:none; } .caro-meta{ display:none; } @media (max-width:720px){ /* Verdikt-Ambiente: Aura NUR im Held-Bereich, Zustaende nie erfunden (unrated = neutral-kalt) */ #singleView{ position:relative; } #singleView::before{ content:""; position:absolute; left:-14px; right:-14px; top:-8px; height:330px; pointer-events:none; background:radial-gradient(120% 80% at 82% 0%, var(--amb, transparent), transparent 62%); } #singleView[data-amb="positive"]{ --amb:rgba(0,230,100,.15); } #singleView[data-amb="neutral"]{ --amb:rgba(215,182,110,.09); } #singleView[data-amb="negative"]{ --amb:rgba(255,77,106,.09); } #singleView[data-amb="unrated"], #singleView[data-amb="loading"], #singleView[data-amb="stale"]{ --amb:rgba(98,216,227,.05); } #singleView[data-amb="error"]{ --amb:rgba(255,77,106,.05); } [data-theme="light"] #singleView[data-amb="positive"]{ --amb:rgba(0,176,80,.05); } [data-theme="light"] #singleView[data-amb="neutral"]{ --amb:rgba(156,123,58,.04); } [data-theme="light"] #singleView[data-amb="negative"]{ --amb:rgba(217,42,78,.04); } /* Verdikt-Wort: kursiv 900 mit Glow — die SIGNATURE-Sprache in der App */ .dyna-band{ font-style:italic; text-transform:uppercase; letter-spacing:.02em; text-shadow:0 0 16px color-mix(in oklab, var(--dyna-c,#d7b66e) 45%, transparent); } /* Mini-Kontext: fix unter dem Chrome, erscheint nach dem Held (IO togglet .show) */ .mini-ctx{ position:fixed; left:12px; right:12px; top:calc(var(--chrome-top) + 50px); z-index:45; display:flex; align-items:center; gap:8px; padding:8px 12px; background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:blur(14px) saturate(140%); border:1px solid var(--border-2); border-radius:var(--r-md); box-shadow:var(--shadow-2); transform:translateY(-140%); opacity:0; transition:transform var(--t), opacity var(--t); } .mini-ctx.show{ transform:translateY(0); opacity:1; } .mini-ctx .tk{ font-weight:900; letter-spacing:-.02em; font-size:15px; } .mini-dyna{ font-size:10.5px; font-weight:800; color:var(--green); background:var(--green-soft); border:1px solid var(--green-line); border-radius:var(--r-full); padding:2px 8px; } .mini-px{ margin-left:auto; font-weight:800; font-size:13.5px; } .mini-pro{ font-size:9.5px; font-weight:900; letter-spacing:.08em; color:var(--faint); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); padding:4px 9px; min-height:28px; cursor:pointer; } body[data-density="pro"] .mini-pro{ color:var(--green-ink); background:var(--green); border-color:var(--green); } /* KPI 4-von-8 + Aufklappen (Pro zeigt immer alle) */ .kpis:not(.open) .kpi:nth-child(n+5){ display:none; } body[data-density="pro"] .kpis .kpi{ display:grid; } .kpis-more{ display:block; grid-column:1 / -1; text-align:center; font-size:11.5px; font-weight:800; color:var(--green); background:var(--green-soft); border:1px solid var(--green-line); border-radius:var(--r-md); padding:10px; min-height:44px; cursor:pointer; } body[data-density="pro"] .kpis-more{ display:none; } .kpis:not(.open) .kpis-more .kl{ display:none; } .kpis.open .kpis-more .ka{ display:none; } /* Modul-Akkordeon: zugeklappt = Kopf + Kernzahl + Verdikt; Rail-FORM kodiert mit (A11y) */ .modules .mod-card{ position:relative; padding:0; overflow:hidden; } .modules .mod-card::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--faint); opacity:.65; } .modules .mod-card:has(.mod-badge.pos)::before{ background:var(--green); opacity:1; } .modules .mod-card:has(.mod-badge.neu)::before{ background:repeating-linear-gradient(180deg, var(--amber) 0 6px, transparent 6px 11px); opacity:1; } .modules .mod-card:has(.mod-badge.neg)::before{ background:linear-gradient(90deg, var(--red) 0 1px, transparent 1px 2px, var(--red) 2px 3px); opacity:1; } .modules .mod-h{ display:flex; align-items:center; gap:8px; padding:13px 34px 13px 16px; min-height:48px; cursor:pointer; position:relative; } .modules .mod-h::after{ content:"\25BE"; position:absolute; right:14px; color:var(--faint); font-size:11px; transition:transform var(--t); } .modules .mod-card.open .mod-h::after{ transform:rotate(180deg); } .modules .mod-card > *:not(.mod-h){ display:none; } .modules .mod-card.open > *:not(.mod-h){ display:block; } .modules .mod-card.open{ padding:0 16px 14px; } .modules .mod-card.open .mod-h{ padding-left:0; padding-right:18px; } .modules .mod-card.open .mod-h::after{ right:0; } /* Kernzahl auch zugeklappt sichtbar (GPT-Haertung): mod-big wandert kompakt in den Kopf */ .modules .mod-card:not(.open) .mod-big{ display:block; position:absolute; right:34px; top:50%; transform:translateY(-50%); font-size:14px; margin:0; } /* Chart-Carousel: .snap wird horizontale Snap-Flaeche (Company + 2 Charts = 3 Slides) */ .snap{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; gap:12px; padding:2px 2px 6px; margin:0 -2px; scrollbar-width:none; } .snap::-webkit-scrollbar{ display:none; } .snap > .snap-card{ flex:0 0 88%; scroll-snap-align:center; } .snap > .snap-card:last-child{ flex-basis:92%; } .chart-wrap{ height:190px; } .caro-meta{ display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 12px; } .caro-btn{ min-width:44px; min-height:44px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:18px; font-weight:800; cursor:pointer; } .caro-count{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; } .caro-dots{ display:flex; gap:6px; align-items:center; } .caro-dot{ width:10px; height:10px; padding:0; border-radius:var(--r-full); border:0; background:var(--faint); opacity:.45; cursor:pointer; } .caro-dot.on{ opacity:1; background:var(--green); width:20px; } } @media (max-width:720px) and (prefers-contrast: more){ #singleView::before{ display:none; } .dyna-band{ text-shadow:none; } } @media (forced-colors: active){ #singleView::before{ display:none; } .mini-ctx{ backdrop-filter:none; } } /* ============================================================ MOBILE-REWORK S3.1 · App-Gefühl (Nutzer-Feedback + Screenshot 5.8.): Watchlist-Strip weg, Held radikal schlank, Karten verkettet, Carousel = nur Charts, Mini-Kontext sauber UNTER der Kopfzeile (keine Überlagerung mehr). ============================================================ */ .snap-charts{ display:contents; } /* Desktop: Grid sieht unverändert 3 Karten */ @media (max-width:720px){ /* Watchlist-Strip verschwindet auf Mobile komplett (Radar deckt die Watchlist ab) */ [data-asub="single"] .wl-strip{ display:none; } /* Suche: eine kompakte Zeile statt Karte mit Label */ [data-asub="single"] > .card:has(.search-row){ padding:10px 12px; margin-bottom:12px; } .search-row .field label{ display:none; } .search-row .field{ min-width:0; } /* Held radikal schlank: Radar/Balken/Overlays/Note im Kompakt-Modus aus (PRO zeigt Balken & Co.) */ .dyna-radar-wrap{ display:none; } .dyna-dims, .dyna-overlays, .dyna-note{ display:none; } body[data-density="pro"] .dyna-dims{ display:grid; } body[data-density="pro"] .dyna-overlays{ display:grid; } body[data-density="pro"] .dyna-note{ display:block; } .dyna-hero{ padding:16px; } .dyna-head{ gap:14px; } .dyna-ring{ width:76px; height:76px; border-width:3px; } .dyna-num{ font-size:28px; } .dyna-band{ font-size:18px; } /* Risk-Karte kompakt aus (Risk-Score steht in der Preis-Karte); PRO zeigt sie */ .risk-card{ display:none; } body[data-density="pro"] .risk-card{ display:block; } /* Held-Kette: DYNA-Karte + So-What verschmelzen optisch zu EINEM Block */ .dyna-hero:has(+ .sowhat){ margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; } .dyna-hero + .sowhat{ margin-top:0; border-top-left-radius:0; border-top-right-radius:0; border-top:0; } .sowhat{ margin-bottom:12px; padding:14px 16px 16px; } /* Preis-Karte kompakt: Meta-Zeile + Rating-Block nur im PRO-Modus */ .snap > .col-a{ padding:16px; margin-bottom:10px; } .col-a .meta-row{ display:none; } .col-a .rating-block{ display:none; } body[data-density="pro"] .col-a .meta-row{ display:flex; } body[data-density="pro"] .col-a .rating-block{ display:flex; } .col-a .range-track{ margin:20px 0 6px; } /* Carousel = NUR die zwei Charts; Preis-Karte ist normaler Block darüber */ .snap{ display:block; overflow:visible; padding:0; margin:0; } .snap-charts{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; gap:12px; padding:2px 2px 6px; margin:0 -2px; scrollbar-width:none; } .snap-charts::-webkit-scrollbar{ display:none; } .snap-charts > .snap-card{ flex:0 0 90%; scroll-snap-align:center; } /* Mini-Kontext: sicher UNTER der (sticky) Kopfzeile, nie überlappend */ .topbar{ z-index:46; } .mini-ctx{ top:calc(var(--chrome-top) + 56px); z-index:44; } /* Dichter gesetzt */ .section-label{ margin-top:18px; } .subtabs{ margin-bottom:10px; } } /* ============================================================ MOBILE-REWORK S3.2 · Konzept-treuer Held; Mini-Kontext entfernt (Nutzer-Feedback: Kollision mit Topbar/Logout). PRO lebt jetzt als Zeile im „Mehr"-Sheet. ============================================================ */ .mini-ctx{ display:none !important; } /* Altlast-Sicherung — Element existiert nicht mehr */ .m-hero{ display:none; } @media (max-width:720px){ .m-hero{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; margin-bottom:10px; } .m-hero-top{ display:flex; gap:14px; align-items:center; } .m-ring{ width:72px; height:72px; border-radius:50%; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid var(--mh-c, var(--faint)); background:color-mix(in oklab, var(--mh-c, var(--faint)) 14%, transparent); } .m-ring b{ font-size:24px; font-weight:900; letter-spacing:-.03em; line-height:1; } .m-ring span{ font-size:9px; font-weight:800; letter-spacing:.08em; color:var(--muted); margin-top:2px; } .m-hd{ min-width:0; flex:1; } .m-co{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; } .m-tk{ font-size:clamp(1.5rem, calc(1rem + 4vw), 1.875rem); font-weight:900; letter-spacing:-.04em; line-height:1.1; } .m-px{ font-size:clamp(1.125rem, calc(.9rem + 3vw), 1.375rem); font-weight:800; letter-spacing:-.02em; margin-top:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .m-verdict{ margin-top:10px; font-style:italic; font-weight:900; text-transform:uppercase; font-size:15px; letter-spacing:.02em; color:var(--mh-c, var(--muted)); text-shadow:0 0 16px color-mix(in oklab, var(--mh-c, transparent) 40%, transparent); } .m-verdict small{ font-style:normal; font-weight:800; color:var(--muted); font-size:9px; letter-spacing:.08em; margin-left:7px; } .m-sowhat{ margin-top:10px; font-size:12.5px; line-height:1.6; color:var(--muted); border-left:3px solid var(--mh-c, var(--border-2)); padding-left:10px; display:grid; gap:3px; } /* ERSETZEN statt stapeln: Desktop-Bloecke mobil aus — PRO holt sie zurueck */ .dyna-hero, .sowhat, .risk-card, .snap > .col-a, .ai-box{ display:none; } body[data-density="pro"] .dyna-hero{ display:block; } body[data-density="pro"] .sowhat{ display:grid; } body[data-density="pro"] .risk-card{ display:block; } body[data-density="pro"] .snap > .col-a{ display:block; } body[data-density="pro"] .ai-box{ display:block; } /* Sheet-Zeile Pro-Modus: Zustand ✓/— rechts */ .ms-state{ margin-left:auto; font-weight:900; font-size:14px; color:var(--faint); } .ms-state::after{ content:"—"; } body[data-density="pro"] #msProRow .ms-state{ color:var(--green); } body[data-density="pro"] #msProRow .ms-state::after{ content:"✓"; } } /* ============================================================ MOBILE-REWORK S3.3 · Dashboard aus einem Guss (<=720px) — Kacheln + Detail-Sheets ============================================================ */ .m-dash{ display:none; } .ds-overlay, .ds-sheet{ display:none; } @media (max-width:720px){ /* PRO-Doppel-Fix: Pro = klassische Vollansicht, Kompakt = Konzept-Held — NIE beide */ body[data-density="pro"] .m-hero{ display:none; } body[data-density="pro"] .m-dash{ display:none; } /* Kompakt: KPI-Grid, Modul-Stapel und Sektions-Label sind ERSETZT durchs Dashboard */ #singleView > .section-label{ display:none; } #singleView .kpis{ display:none; } #singleView .modules{ display:none; } body[data-density="pro"] #singleView > .section-label{ display:block; } body[data-density="pro"] #singleView .kpis{ display:grid; } body[data-density="pro"] #singleView .modules{ display:grid; } /* EIN einheitliches Kachel-System */ .m-dash{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; } .m-tile{ display:grid; gap:3px; align-content:start; text-align:left; min-height:88px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:11px 12px; color:var(--text); font:inherit; cursor:pointer; position:relative; } .m-tile.stat{ cursor:default; } .m-tile:not(.stat)::after{ content:"›"; position:absolute; right:10px; top:9px; color:var(--faint); font-size:13px; font-weight:800; } .m-tile.more{ border-style:dashed; border-color:var(--border-2); } .m-tile.more .mt-v{ color:var(--faint); } .mt-l{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); line-height:1.35; padding-right:14px; } .mt-v{ font-size:clamp(1.0625rem, calc(.8625rem + 1vw), 1.3125rem); font-weight:900; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .mt-s{ min-height:16px; font-size:10.5px; color:var(--muted); } /* Chart kompakter, Meta-Zeilen der Chart-Karten weg */ .chart-wrap{ height:150px; } .snap-charts .meta-row{ display:none; } /* Detail-Bottom-Sheet (Muster Mehr-Sheet) */ .ds-overlay{ display:block; position:fixed; inset:0; z-index:60; background:rgba(5,7,12,.6); border:0; } .ds-overlay[hidden], .ds-sheet[hidden]{ display:none; } .ds-sheet{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--surface-2); border:1px solid var(--border-2); border-bottom:0; border-radius:24px 24px 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow:var(--shadow-pop); max-height:min(78dvh, 78vh); overflow-y:auto; } .ds-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 10px; } .ds-head strong{ font-size:15px; font-weight:900; letter-spacing:-.01em; } /* Klone im Sheet: volle Inhalte zeigen, Akkordeon-/Rail-Optik neutralisieren */ .ds-body .mod-card{ padding:0 !important; border:0; background:none; overflow:visible; } .ds-body .mod-card::before{ display:none; } .ds-body .mod-card > *{ display:block !important; } .ds-body .mod-card .mod-h{ padding:0 0 10px !important; cursor:default; min-height:0; } .ds-body .mod-card .mod-h::after{ display:none; } .ds-body .mod-card .mod-big{ position:static !important; transform:none !important; font-size:30px !important; margin:0 0 4px !important; } .ds-body .kpis{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; } .ds-body .kpis .kpi{ display:grid !important; } .ds-body .kpis-more{ display:none !important; } /* Vergleich aus einem Guss: kompakter Kopf + Kachel-Optik fuer die Metrikzeilen */ .cmp-grid{ grid-template-columns:1fr 1fr; gap:8px; } .cmp-side{ padding:12px; } .cmp-side .ticker{ font-size:clamp(1.25rem, calc(.9rem + 3vw), 1.75rem); } .cmp-side .company{ display:none; } .cmp-side .price{ font-size:15px; margin-top:4px; } .ct-row{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin-bottom:6px; min-height:52px; } .ct-row .lbl{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); text-align:center; white-space:normal; line-height:1.3; } .ct-row .val{ font-weight:800; font-size:13.5px; } .ct-row .val.B{ text-align:right; } } /* ============================================================ MOBILE-REWORK S3.4 · Feinschliff (<=720px): PRO gekillt, Harvey-Balls, So-What-Kopf, Kachel-Icons, Chart-UMSCHALTER statt Seitwaerts-Scroll. ============================================================ */ .m-chartseg{ display:none; } @media (max-width:720px){ /* Harvey-Balls: Teil-Scores F/S/P/N/Q als kleine gefuellte Kreise unter dem Verdikt */ .m-dims{ display:flex; gap:14px; margin-top:11px; } .m-dim{ display:grid; justify-items:center; gap:3px; } .m-dim i{ width:20px; height:20px; border-radius:50%; border:1px solid var(--border-2); display:block; } .m-dim i.na{ background:transparent; border-style:dashed; } .m-dim span{ font-size:8.5px; font-weight:800; letter-spacing:.06em; color:var(--faint); } /* So-What-Kopf: benannt + grafisch */ .m-sw-h{ display:flex; align-items:center; gap:6px; margin-bottom:5px; } .m-sw-h b{ font-size:10.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--text); } .m-sw-ic{ color:var(--mh-c, var(--green)); font-size:11px; } /* Kachel-Icons: kleine Chips vor dem Label — weniger nackte Kacheln, mehr App */ .mt-l{ display:flex; align-items:center; gap:7px; } .mt-ic{ width:22px; height:22px; flex:0 0 auto; border-radius:7px; background:var(--surface-3); display:grid; place-items:center; font-size:11px; color:var(--muted); } /* Chart-Umschalter: ein Chart sichtbar, Wechsel per Tap (kein Seitwaerts-Scroll mehr) */ .m-chartseg{ display:flex; gap:6px; margin:0 0 8px; } .m-chartseg button{ flex:1; min-height:38px; font-size:11px; font-weight:800; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full); cursor:pointer; } .m-chartseg button.on{ color:var(--green); background:var(--green-soft); border-color:var(--green-line); } .snap-charts{ display:block; overflow:visible; padding:0; margin:0; } .snap-charts > .snap-card{ flex:none; width:auto; } .snap-charts .col-b{ display:none; } .snap-charts .col-c{ display:block; } #singleView.chart-rev .snap-charts .col-b{ display:block; } #singleView.chart-rev .snap-charts .col-c{ display:none; } .caro-meta{ display:none !important; } } /* ============================================================ MOBILE-REWORK R2-B2 · "Ein Blick, ein Tap, ein Sheet" (<=720px) Teil-Score-Brackets, 8+1-Kachel-Dashboard, Charts NUR im Sheet, Dividenden-Sheet. ============================================================ */ .m-scores{ display:none; } @media (max-width:720px){ /* Teil-Scores ausgeschrieben, Farbe je Band des EINZELWERTS (gruen nur >=80) */ .m-scores{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; } .m-sc{ display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:color-mix(in oklab, var(--sc) 12%, transparent); border:1px solid color-mix(in oklab, var(--sc) 38%, transparent); border-left:3px solid var(--sc); border-radius:7px; padding:4px 8px; } .m-sc b{ font-size:12px; color:var(--sc); letter-spacing:0; } /* Charts verlassen den Screen komplett — sie leben im Kurs-Sheet */ #singleView .snap{ display:none; } #singleView .m-chartseg{ display:none; } /* Kurs-Kachel mit Sparkline */ .m-tile.chart .mt-spark{ width:100%; height:26px; display:block; margin:1px 0 0; color:var(--green); opacity:.9; } .m-tile.chart.neg .mt-spark{ color:var(--red); } .m-tile.na .mt-v{ color:var(--faint); } .m-tile.wide{ grid-column:1 / -1; min-height:52px; grid-template-columns:1fr auto; grid-auto-flow:column; align-items:center; } .m-tile.wide .mt-s{ display:none; } /* Sheet-Kontext: umgezogene Charts + Segment voll sichtbar */ .ds-body .m-chartseg{ display:flex; margin-bottom:8px; } .ds-body .snap-charts{ display:block; } .ds-body .snap-charts .snap-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; } .ds-body .snap-charts .col-b{ display:none; } .ds-body .snap-charts .col-c{ display:block; } .ds-body .snap-charts.rev .col-b{ display:block; } .ds-body .snap-charts.rev .col-c{ display:none; } .ds-body .chart-wrap{ height:220px; } .snap-charts.rev .col-b{ display:block; } .snap-charts.rev .col-c{ display:none; } /* Dividenden-Sheet */ .mdv-lbl{ margin-top:12px; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); } .mdv-lbl b{ color:var(--text); font-size:11px; } .mdv-amp{ height:8px; border-radius:999px; margin:7px 0 4px; position:relative; opacity:.92; background:linear-gradient(90deg, var(--green) 0 61%, var(--amber) 61% 77%, var(--red) 77% 100%); } .mdv-amp .mk{ position:absolute; top:-4px; bottom:-4px; width:3px; border-radius:2px; background:var(--text); } .mdv-zones{ display:flex; justify-content:space-between; font-size:8px; font-weight:800; letter-spacing:.04em; color:var(--faint); } .mdv-bars{ display:flex; align-items:flex-end; gap:4px; height:54px; margin-top:12px; } .mdv-bars i{ flex:1; background:var(--green-soft); border:1px solid var(--green-line); border-radius:3px 3px 0 0; display:block; min-height:6px; } .mdv-sub{ display:flex; justify-content:space-between; font-size:9px; color:var(--faint); margin-top:4px; } .mdv-why{ display:grid; gap:7px; margin-top:12px; } .mdv-why div{ display:flex; gap:8px; font-size:12px; line-height:1.5; color:var(--muted); } .mdv-why i{ font-style:normal; flex:0 0 auto; } .mdv-why i.pos{ color:var(--green); } .mdv-why i.neg{ color:var(--amber); } .mdv-why i.mut{ color:var(--faint); } .mdv-meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11px; color:var(--muted); } } /* ============================================================ MOBILE-REWORK R2-B2.1/B3 · Ausklappen statt Overlay + Vergleich-Punktestand ============================================================ */ .m-expand{ display:none; } .vs-score{ display:none; } .ct-detail{ display:none; } @media (max-width:720px){ /* Expansion-Panel: volle Breite im Dashboard-Grid, direkt unter der getappten Kachel */ .m-expand{ display:block; grid-column:1 / -1; position:relative; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-md); padding:14px 14px 16px; } .mx-close{ position:absolute; right:8px; top:6px; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:16px; font-weight:800; cursor:pointer; z-index:2; } .m-tile.open{ border-color:var(--green-line); box-shadow:inset 0 0 0 1px var(--green-soft); } .m-tile.open::after{ content:"\25be"; } .m-expand .chart-wrap{ height:200px; } /* Altes Overlay-Sheet fuers Dashboard stillgelegt (Vergleich nutzt es nicht mehr) */ .ds-overlay, .ds-sheet{ display:none !important; } /* Vergleich: Punktestand (nur gewertete Metriken) + ausklappbare Zeilen */ .vs-score{ display:block; text-align:center; font-size:11px; font-weight:800; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:9px 12px; margin-bottom:8px; } .vs-score b{ font-size:14px; color:var(--text); letter-spacing:.02em; } .ct-row{ cursor:pointer; } .ct-row.open{ border-color:var(--border-2); background:var(--surface-2); } .ct-detail{ display:none; } .ct-row .ct-detail:not([hidden]){ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); } .ctd{ display:grid; gap:2px; } .ctd b{ font-size:20px; font-weight:900; } .ctd span{ font-size:9px; font-weight:800; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; } .ctd.b{ text-align:right; } .ctd.win b{ color:var(--green); } } /* R2-B4.1 (Nutzer): Vergleich ohne Einzel-Deep-Dives — mobil sind die gestapelten renderModules(left/right) unnoetig; der Vergleich ist Duell-Kopf + Punktestand + Zeilen + Overlay-Charts. Desktop (2 Spalten nebeneinander) bleibt unveraendert. */ @media (max-width:720px){ #compareView .cmp-modules{ display:none !important; } } /* ============================================================ MOBILE-REWORK R3-B1 · Radar "Markt-Puls" (<=720px) Heatmap-Hero + Kachel-Trio mit Ausklapp-Panels (Original-Listen ziehen um). ============================================================ */ .r-dash{ display:none; } @media (max-width:720px){ .r-dash{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .m-tile.wide-r{ grid-column:1 / -1; min-height:54px; grid-template-columns:1fr auto; grid-auto-flow:column; align-items:center; } /* Desktop-Sektionen weichen den Kacheln; Recent faellt mobil weg (Konzept-Entscheid) */ [data-pane="radar"] .radar-grid, [data-pane="radar"] .radar-why-wrap, [data-pane="radar"] .radar-recent{ display:none; } /* Im Panel umgezogene Original-Listen sichtbar + kompakt */ .r-dash .m-expand #radarMovers, .r-dash .m-expand #radarEarnings, .r-dash .m-expand #radarWhy{ display:grid; gap:8px; } .r-dash .m-expand .rdr-mover{ width:100%; } .radar-heatmap{ height:190px; } .rhm-more .rhm-sym{ color:var(--muted); } } /* ============================================================ MOBILE-REWORK R3-B2 · Portfolio "Depot-Cockpit" (<=720px) Hero (YTD fuehrt) + 4 Kacheln (DOM-Move-Panels) + Positions-Zeilenkarten. ============================================================ */ .pf-mhero, .pf-dash, .pf-cards{ display:none; } @media (max-width:720px){ /* Import-Karte: sichtbar nur im Empty-State; sonst hinter der Utility-Zeile. (Ohne :has-Support bleibt sie sichtbar — sichere Richtung.) */ [data-pane="portfolio"]:has(#pfView:not(.empty)) #pfImportCard{ display:none; } [data-pane="portfolio"] .dyna-hero, [data-pane="portfolio"] .pf-overview, [data-pane="portfolio"] .risk-card, [data-pane="portfolio"] #pfInsightsCard, [data-pane="portfolio"] .pf-positions, [data-pane="portfolio"] .ai-portfolio-box{ display:none; } /* In Panels umgezogene Bloecke wieder sichtbar */ .m-expand.pfx .risk-card, .m-expand.pfx #pfInsightsCard, .m-expand.pfx .ai-portfolio-box, .m-expand.pfx #pfImportCard{ display:block; margin:0; } .pf-mhero{ display:flex; gap:12px; align-items:center; margin-bottom:6px; background:linear-gradient(170deg, rgba(0,230,100,.06), transparent 55%), var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; } .pfm-ring{ width:56px; height:56px; border-radius:50%; flex:0 0 56px; display:grid; place-items:center; position:relative; background:conic-gradient(var(--rc) calc(var(--pct)*1%), var(--surface-3) 0); } .pfm-ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--surface); } .pfm-ring b{ position:relative; font-size:15px; font-weight:900; } .pfm-main{ flex:1; min-width:0; } .pfm-eyebrow{ font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .pfm-big{ font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1.05; } .pfm-brk{ display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; } .pf-dash{ display:grid; } .pf-dash .mt-v{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .pf-cards{ display:block; margin-top:14px; } .seclbl-m{ font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:2px 2px 8px; } .pf-lc{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 11px; margin-top:6px; } .pf-lc.on{ border-color:rgba(0,230,100,.3); } .pf-lc-h{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left; padding:0; cursor:pointer; min-height:32px; } .pf-lc-h .sym{ font-weight:900; font-size:12.5px; } .pf-lc-h .nm{ flex:1; min-width:0; font-size:9.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pf-lc-h .wt{ font-size:10px; color:var(--muted); } .pf-lc-h .sb{ font-weight:900; font-size:12.5px; } .pf-wbar{ height:4px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin-top:7px; } .pf-wbar i{ display:block; height:100%; background:var(--green); opacity:.75; } .pf-lc-x{ margin-top:9px; padding-top:9px; border-top:1px solid var(--border); display:grid; gap:9px; } .kv3m{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; text-align:center; } .kv3m span{ display:block; font-size:8px; font-weight:800; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; } .kv3m b{ font-size:12.5px; font-weight:900; } .pf-an{ width:100%; } .pf-sugg{ margin-top:10px; font-size:11.5px; display:grid; gap:5px; } .pf-utils{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; } .pf-util{ flex:1 1 45%; display:inline-flex; justify-content:center; gap:6px; align-items:center; border:1px solid var(--border-2); border-radius:10px; background:var(--surface); color:var(--muted); font-size:11px; font-weight:800; padding:10px; cursor:pointer; min-height:44px; } .pf-util.open{ border-color:rgba(0,230,100,.35); color:var(--text); } .pf-utils .m-expand{ flex:1 1 100%; } } /* ============================================================ MOBILE-REWORK R3-B3 · Ranking-Zeilenkarten + Briefing-Signal-Duo (<=720px) ============================================================ */ .bf-dash, .rk-cards{ display:none; } @media (max-width:720px){ /* Briefing: Kachel-Duo ersetzt die gestapelten Karten; Panels sind Klone */ .bf-dash{ display:grid; margin-top:14px; } #briefView .brief-grid{ display:none; } .bf-dash .mt-v{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .m-expand.bfx .card{ border:0; background:none; padding:0; margin:0; box-shadow:none; } /* Ranking: Zeilenkarten ersetzen die gestauchte Tabelle */ .rk-cards{ display:block; } #rankView .rank-table{ display:none; } .rk-lc{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 11px; margin-top:6px; } .rk-lc.top{ border-color:rgba(0,230,100,.35); } .rk-lc.on{ background:var(--surface-2); } .rk-lc-h{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left; padding:0; cursor:pointer; min-height:34px; } .rk-lc-h .rk{ flex:0 0 18px; font-size:13px; font-weight:900; color:var(--faint); text-align:center; } .rk-lc.top .rk{ color:var(--green); } .rk-lc-h .sym{ font-weight:900; font-size:12.5px; } .rk-lc-h .nm{ flex:1; min-width:0; font-size:9.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rk-lc-h .mod-badge.neu{ color:var(--muted); border-color:var(--border-2); } .rk-lc-h .up{ font-weight:900; font-size:13px; } .rk-lc-x{ margin-top:9px; padding-top:9px; border-top:1px solid var(--border); display:grid; gap:9px; } .rk-buy .rk-lbl{ display:block; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; } .rk-buy .rk-lbl b{ color:var(--text); font-size:11px; } } /* ============================================================ MOBILE-REWORK R3-B4 · Creator One-Pager (<=720px) Chip-Feld + Portfolio-Knopf (Modus folgt Eingabe), Vorlagen-Kachel -> Poster-Grid-Panel. ============================================================ */ .cr-mobile, .cr-tilerow{ display:none; } #tplList .tpl-item.mode-hidden{ } /* Desktop: Filter laeuft nie (crIsMobile-Guard) */ @media (max-width:720px){ .cr-mobile{ display:block; } .cr-mrow{ display:flex; gap:6px; } .cr-chipfield{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border-2); border-radius:12px; padding:6px 10px; min-height:44px; } #crChips{ display:flex; gap:6px; flex-wrap:wrap; } .cr-chip{ display:inline-flex; align-items:center; gap:4px; background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); border-radius:8px; padding:3px 5px 3px 9px; font-size:11px; font-weight:900; } .cr-chip button{ background:none; border:0; color:inherit; font-size:13px; cursor:pointer; padding:2px 4px; line-height:1; } #crChipInput{ flex:1; min-width:64px; background:none; border:0; color:var(--text); font:inherit; font-size:12.5px; outline:none; padding:4px 0; } .cr-pfbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border-2); border-radius:12px; background:var(--surface); color:var(--muted); font-size:11px; font-weight:800; padding:0 12px; cursor:pointer; min-height:44px; } .cr-pfbtn.on{ color:var(--green); border-color:rgba(0,230,100,.4); background:var(--green-soft); } .cr-suggest{ display:grid; gap:4px; margin-top:6px; } .cr-sug{ text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:9px; color:var(--muted); font-size:11.5px; padding:9px 10px; cursor:pointer; } .cr-sug b{ color:var(--text); } .cr-modehint{ font-size:9px; color:var(--faint); margin:7px 2px 0; } .cr-tilerow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; } .cr-tilerow .mt-v{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .cr-tpl-tile .mt-v{ font-size:13px; } /* Desktop-Picker/Controls/Rail verlassen den Fluss (leben in Panels weiter) */ [data-pane="creator"] .search-row, [data-pane="creator"] #crAResults, [data-pane="creator"] .creator-picker, [data-pane="creator"] #creatorControls, [data-pane="creator"] .creator-grid aside.tpl-list{ display:none; } /* Panel: Vorlagen als 2-spaltiges Karten-Grid (details-Gruppen bleiben) */ .m-expand.crx #tplList{ display:grid; grid-template-columns:1fr 1fr; gap:6px; position:static; max-height:none; overflow:visible; width:auto; } .m-expand.crx .tpl-group-label{ grid-column:1 / -1; margin:6px 0 0; } .m-expand.crx .tpl-subgroup{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:6px; border:0; padding:0; margin:0; } .m-expand.crx summary.tpl-subhead{ grid-column:1 / -1; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:6px 0 0; cursor:pointer; } .m-expand.crx .tpl-item{ display:grid; gap:3px; align-content:start; width:auto; margin:0; background:linear-gradient(150deg, var(--surface-2), var(--surface)); border:1px solid var(--border-2); border-radius:10px; padding:11px 10px; min-height:64px; text-align:left; } .m-expand.crx .tpl-item strong{ font-size:11px; font-weight:900; line-height:1.25; } .m-expand.crx .tpl-item small{ font-size:8.5px; color:var(--faint); line-height:1.35; } .m-expand.crx .tpl-item[aria-pressed="true"]{ outline:2px solid var(--green); } .m-expand.crx .tpl-item.mode-hidden{ display:none; } .m-expand.crx #creatorControls{ display:flex; flex-wrap:wrap; gap:12px; margin:0; } } /* ============================================================ MOBILE-REWORK R4-B1 · Creator "Schaufenster + Werkbank" (<=720px) Heller Scope NUR im Creator-Pane (GPT-Konzept, Nutzer-Wahl): warmweiss + Akzentblau — Topbar/Bottom-Nav behalten den App-Look. ============================================================ */ .wb, .wbk{ display:none; } @media (max-width:720px){ [data-pane="creator"] .wb, [data-pane="creator"] .wbk{ /* feste helle Tokens, unabhängig vom App-Theme */ /* TS3-H3: dunkler Drucktisch — App-Neutrals; Interaktions-Akzent = Marken-Gruen (Daten-Ampel-Semantik unberuehrt; das helle R4-Experiment ist beendet) */ --wbg:#0d1017; --wcard:#12161f; --wborder:#232a38; --wborder2:#2e3648; --wtext:#e8ebf2; --wmut:#a8adbd; --wfaint:#6b7280; --wblue:#00e664; --wblue-soft:rgba(0,230,100,.1); display:block; color:var(--wtext); background:var(--wbg); border-radius:16px; padding:12px 12px 14px; margin:0 -2px 14px; } .wb[hidden], .wbk[hidden]{ display:none; } /* Verworfene R3-B4-Mobile-UI + Desktop-Reste im Creator ausblenden (Code-Entfernung folgt in B3) */ [data-pane="creator"] .cr-mobile, [data-pane="creator"] .cr-tilerow, [data-pane="creator"] .creator-grid, [data-pane="creator"] .creator-upsell{ display:none; } [data-pane="creator"] .caption-opts, [data-pane="creator"] .live-opts{ display:none; } .wb-title{ font-size:19px; font-weight:900; letter-spacing:-.01em; padding:2px 2px 10px; } .wb-pult{ background:var(--wcard); border:1px solid var(--wborder); border-radius:14px; padding:8px; display:grid; gap:7px; position:relative; } .wb-tickrow{ display:flex; gap:6px; } .wb-tick{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; background:var(--wbg); border:1px solid var(--wborder2); border-radius:10px; padding:9px 11px; min-height:44px; font:inherit; color:var(--wtext); font-size:12px; font-weight:800; cursor:pointer; text-align:left; } .wb-tick .wb-co{ color:var(--wmut); font-weight:600; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } .wb-tick .wb-mag{ color:var(--wfaint); } .wb-tick input{ flex:1; min-width:0; background:none; border:0; outline:none; font:inherit; font-size:12.5px; color:var(--wtext); } .wb-segrow{ display:flex; gap:6px; } .wb-anchor{ flex:1; display:flex; } /* umgezogene Original-cc-Segmente hell umgestylt (IDs/Bindings unverändert) */ .wb-anchor .cc-seg{ flex:1; display:flex; background:var(--wbg); border:1px solid var(--wborder2); border-radius:10px; overflow:hidden; margin:0; } .wb-anchor .cc-seg button{ flex:1; background:none; border:0; padding:9px 4px; font-size:9.5px; font-weight:800; color:var(--wfaint); cursor:pointer; min-height:38px; } .wb-anchor .cc-seg button.active, .wb-anchor .cc-seg button[aria-pressed="true"]{ background:var(--wblue); color:#04140a; } .wb-suggest{ position:absolute; left:8px; right:8px; top:100%; margin-top:6px; z-index:6; background:var(--wcard); border:1px solid var(--wborder2); border-radius:12px; padding:6px; display:grid; gap:4px; box-shadow:0 16px 36px rgba(0,0,0,.5); } .wb-suggest[hidden]{ display:none; } .wb-sug{ text-align:left; background:var(--wbg); border:1px solid var(--wborder); border-radius:8px; color:var(--wmut); font-size:11.5px; padding:9px 10px; cursor:pointer; font:inherit; } .wb-sug b{ color:var(--wtext); } .wb-sug .wb-ex{ color:var(--wfaint); } .wb-sug.focus{ outline:2px solid var(--wblue); } .wb-stage{ margin-top:9px; position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--wborder2); background:#0b0e14; min-height:120px; } .wb-stagehost{ transition:opacity .1s linear; } .wb-stagehost.flash{ opacity:.35; } @media (prefers-reduced-motion: reduce){ .wb-stagehost{ transition:none; } .wb-stagehost.flash{ opacity:1; } } .wb-live{ position:absolute; top:7px; right:9px; z-index:3; display:inline-flex; gap:4px; align-items:center; font-size:7.5px; font-weight:800; letter-spacing:.08em; color:#9fe8bf; } .wb-live i{ width:6px; height:6px; border-radius:50%; background:#00e664; } .wb-live.pulse i{ animation:wbPulse .9s ease 1; } @keyframes wbPulse{ 0%{ box-shadow:0 0 0 0 rgba(0,230,100,.55);} 100%{ box-shadow:0 0 0 8px rgba(0,230,100,0);} } @media (prefers-reduced-motion: reduce){ .wb-live.pulse i{ animation:none; } } /* Bühne: der umgezogene previewArea-Inhalt (dunkles Canvas) kompakt */ .wb-stagehost #previewArea{ padding:10px; } .wb-stagehost #previewArea.empty{ color:#a8adbd; padding:22px 14px; } .wb-stagehost #previewArea.empty h3{ color:#e8ebf2; } .wb-tplrow{ margin-top:9px; width:100%; display:flex; gap:9px; align-items:center; background:var(--wcard); border:1px solid var(--wborder); border-radius:12px; padding:8px 10px; font:inherit; color:var(--wtext); cursor:pointer; text-align:left; min-height:50px; } .wb-mini{ width:56px; height:32px; flex:0 0 56px; border-radius:6px; overflow:hidden; background:#0d1119; display:grid; place-items:center; color:#6b7280; font-size:12px; } .wb-tplmeta{ flex:1; min-width:0; display:grid; gap:1px; } .wb-tplmeta b{ font-size:11.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wb-tplsum{ font-size:9px; color:var(--wmut); } .wb-sw{ font-size:10px; font-weight:800; color:var(--wblue); white-space:nowrap; } .wbk-head{ font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wfaint); margin:0 2px 8px; } .wbk-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; } .wbk-card{ background:var(--wcard); border:1px solid var(--wborder); border-radius:10px; overflow:hidden; padding:0; font:inherit; color:var(--wtext); cursor:pointer; text-align:left; } .wbk-card.on{ border:2px solid var(--wblue); } .wbk-thumb{ display:grid; place-items:center; height:52px; background:linear-gradient(150deg,#141925,#0b0f18); color:#6b7280; font-size:13px; } .wbk-nm{ display:block; padding:5px 7px; font-size:8.5px; font-weight:800; line-height:1.25; } } /* ============================================================ MOBILE-REWORK R4-B2 · Katalog: Suche, Filter, echte Thumbnails ============================================================ */ @media (max-width:720px){ .wbk-search{ display:flex; align-items:center; gap:8px; background:var(--wcard); border:1px solid var(--wborder2); border-radius:12px; padding:10px 12px; color:var(--wfaint); } .wbk-search input{ flex:1; min-width:0; background:none; border:0; outline:none; font:inherit; font-size:12px; color:var(--wtext); } .wbk-search b{ font-size:10px; color:var(--wfaint); } .wbk-filters{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:8px; } .wbk-f{ text-align:center; background:var(--wcard); border:1px solid var(--wborder); border-radius:10px; padding:8px 4px; font-size:10px; font-weight:800; color:var(--wmut); font-family:inherit; cursor:pointer; min-height:34px; } .wbk-f.on{ background:var(--wblue); border-color:var(--wblue); color:#04140a; } .wbk-grid{ margin-top:10px; } .wbk-card{ position:relative; } .wbk-thumb{ position:relative; overflow:hidden; } .wbk-thumb.tall{ height:64px; background:#0a0d13; } .wbk-thumb.skel{ background:linear-gradient(100deg, #161b26 40%, #1c2230 50%, #161b26 60%); background-size:200% 100%; animation:wbkSkel 1.1s linear infinite; color:transparent; } @media (prefers-reduced-motion: reduce){ .wbk-thumb.skel{ animation:none; } } @keyframes wbkSkel{ to{ background-position:-200% 0; } } .wbk-scrim{ position:absolute; inset:0 0 0 50%; display:grid; place-items:center; background:rgba(13,16,23,.72); backdrop-filter:blur(1px); font-style:normal; } .wbk-scrim span{ font-size:7px; font-weight:800; letter-spacing:.04em; color:var(--wmut); border:1px dashed var(--wborder2); border-radius:6px; padding:2px 5px; background:var(--wcard); } .wbk-badge{ position:absolute; top:4px; right:4px; z-index:2; font-size:7.5px; font-weight:800; background:rgba(13,16,23,.92); color:var(--wmut); border:1px solid var(--wborder); border-radius:4px; padding:1px 5px; } .wbk-nm{ min-height:24px; } } /* ============================================================ TS3 · tasteskill-Overhaul Hebel 1-4 (Typo-Floor, Rhythmus, Motion light) Sammel-Overrides nach der kv-Tokenskala; keine Struktur-Aenderungen. Screen-Recompositions (Hebel 5) folgen je Screen mit eigenem Render. ============================================================ */ @media (max-width:720px){ /* H1: Wert-Typografie der Rest-Screens auf lesbare Groessen (>=13px) */ .pf-lc-h .sb, .rk-lc-h .up, .brow .p{ font-size:15px; } .pf-lc-h .sym, .rk-lc-h .sym, .brow .sym{ font-size:13.5px; } .m-tile .mt-v{ font-size:17px; } .mini .s{ font-size:12px; } .mini .d{ font-size:12.5px; } .stick b{ font-size:12.5px; } .stick{ font-size:11px; } .kv3m b{ font-size:13.5px; } .pf-lc-h .nm, .rk-lc-h .nm, .brow .nm{ font-size:10.5px; } .pf-lc-h .wt, .brow .w{ font-size:11px; } .mt-l, .tl{ font-size:10px; } .seclbl-m{ font-size:10.5px; } .vs-score{ font-size:12px; } .vs-score b{ font-size:15px; } .rw-item, .rdr-earn{ font-size:12.5px; } /* H2: Rhythmus-Angleich der Screen-Koepfe an das kv-Raster */ [data-pane="radar"] .radar-head{ padding-block:2px 8px; } .pf-mhero{ margin-block-end:var(--kv-space-2); } .m-dash, .r-dash, .pf-dash, .bf-dash{ gap:var(--kv-space-2); } .pf-cards{ margin-block-start:var(--kv-space-3); } /* H4: Katalog-Thumbs blenden beim Mount ein (einziger neuer Motion-Moment) */ .wbk-thumb canvas, .wb-mini canvas{ opacity:0; transition:opacity .18s ease-out; } .wbk-thumb canvas.in, .wb-mini canvas.in{ opacity:1; } @media (prefers-reduced-motion: reduce){ .wbk-thumb canvas, .wb-mini canvas{ transition:none; opacity:1; } } } /* ============================================================ SD-0 · SIGNAL DESK — Fundament (Spez: GPT-Mockups a6462404, Plan v2) Alles im Scope [data-ui="sd"]; inert bis SD-1 das Flag setzt. Werte 1:1 aus der Mockup-Datei destilliert (gruen getoente Neutrals, Signal- vs. Positiv-Gruen getrennt). Fonts: OFL, selbst gehostet, gepinnt in /assets/fonts/FONTS-PIN.md. ============================================================ */ @font-face{ font-family:"Schibsted Grotesk"; src:url("/assets/fonts/schibsted-normal-400-900.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Schibsted Grotesk"; src:url("/assets/fonts/schibsted-italic-400-900.woff2") format("woff2"); font-weight:400 900; font-style:italic; font-display:swap; } @font-face{ font-family:"Newsreader"; src:url("/assets/fonts/newsreader-normal-400-800.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:"Newsreader"; src:url("/assets/fonts/newsreader-italic-400-800.woff2") format("woff2"); font-weight:400 800; font-style:italic; font-display:swap; } @font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/plexmono-normal-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/plexmono-normal-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/plexmono-italic-400.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; } [data-ui="sd"]{ /* Flaechen + Linien (gruen getoent — die gewaehlte Neutralitaet der Welt) */ --sd-canvas:#080a08; --sd-surface:#0f120f; --sd-surface-2:#171b17; --sd-keyline:#343b34; --sd-keyline-subtle:#252b25; --sd-text:#f2f5ef; --sd-text-2:#abb3aa; --sd-text-3:#737c74; /* Signal (Aktion/Praesenz) getrennt von Daten-Semantik */ --sd-signal:#b7ff42; --sd-signal-ink:#081006; --sd-positive:#4dd397; --sd-negative:#ff746e; --sd-warning:#f1c45a; --sd-info:#7daeff; /* Skalen */ --sd-s1:4px; --sd-s2:8px; --sd-s3:12px; --sd-s4:16px; --sd-s5:24px; --sd-s6:32px; --sd-r:4px; --sd-touch:44px; --sd-fs-eyebrow:clamp(9.5px, 2.6vw, 10.5px); --sd-fs-body:clamp(13px, 3.5vw, 14.5px); --sd-fs-title:clamp(17px, 4.6vw, 20px); --sd-fs-hero:clamp(26px, 7vw, 32px); --sd-motion:160ms; --sd-ui:"Schibsted Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif; --sd-editorial:"Newsreader", Georgia, "Times New Roman", serif; --sd-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace; background:var(--sd-canvas); color:var(--sd-text); font-family:var(--sd-ui); line-height:1.5; color-scheme:dark; } [data-ui="sd"] *{ box-sizing:border-box; } [data-ui="sd"] .sd-mono, [data-ui="sd"] .sd-eyebrow, [data-ui="sd"] .sd-live, [data-ui="sd"] .sd-stamp, [data-ui="sd"] .sd-chip, [data-ui="sd"] .sd-ticker{ font-family:var(--sd-mono); font-variant-numeric:tabular-nums; } /* Semantik-Toene schlagen jede Komponenten-Textfarbe (Spezifitaets-Lock) */ [data-ui="sd"] .positive{ color:var(--sd-positive) !important; } [data-ui="sd"] .negative{ color:var(--sd-negative) !important; } [data-ui="sd"] .warning{ color:var(--sd-warning) !important; } [data-ui="sd"] .information{ color:var(--sd-info) !important; } /* Typo-Rollen */ [data-ui="sd"] .sd-hero{ font-size:var(--sd-fs-hero); font-weight:620; letter-spacing:-.035em; line-height:1.05; margin:0; } [data-ui="sd"] .sd-title{ font-size:var(--sd-fs-title); font-weight:610; letter-spacing:-.025em; margin:0; } [data-ui="sd"] .sd-editorial{ font-family:var(--sd-editorial); font-weight:400; color:var(--sd-text-2); font-size:calc(var(--sd-fs-body) + 1.5px); line-height:1.45; } [data-ui="sd"] .sd-eyebrow{ color:var(--sd-text-3); font-size:var(--sd-fs-eyebrow); letter-spacing:.09em; text-transform:uppercase; line-height:1.3; } [data-ui="sd"] .sd-eyebrow.bright{ color:var(--sd-text-2); } [data-ui="sd"] .sd-stamp{ color:var(--sd-text-3); font-size:9.5px; letter-spacing:.035em; text-transform:uppercase; line-height:1.35; } [data-ui="sd"] .sd-wordmark{ font-size:15px; font-weight:660; letter-spacing:-.035em; color:var(--sd-text); } /* Signal-Point (Kreis) + Live + Evidence-Rule */ [data-ui="sd"] .sd-point{ display:inline-block; flex:0 0 auto; inline-size:6px; block-size:6px; border-radius:50%; background:var(--sd-signal); vertical-align:2px; } [data-ui="sd"] .sd-live{ display:inline-flex; align-items:center; gap:6px; color:var(--sd-text-2); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; } [data-ui="sd"] .sd-evrule{ display:flex; align-items:center; gap:7px; margin-block:var(--sd-s3); } [data-ui="sd"] .sd-evrule::after{ content:""; flex:1; block-size:1px; background:var(--sd-keyline); } /* Flaechen: Baender statt schwebender Karten */ [data-ui="sd"] .sd-band{ background:var(--sd-surface); border-block:1px solid var(--sd-keyline-subtle); padding:var(--sd-s4); } [data-ui="sd"] .sd-card{ background:var(--sd-surface); border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); padding:var(--sd-s4); } /* Buttons + Icons */ [data-ui="sd"] .sd-btn, [data-ui="sd"] .sd-btn2{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-block-size:var(--sd-touch); inline-size:100%; border-radius:var(--sd-r); font:inherit; font-size:13px; font-weight:680; letter-spacing:-.01em; border:0; cursor:pointer; } [data-ui="sd"] .sd-btn{ background:var(--sd-signal); color:var(--sd-signal-ink); } [data-ui="sd"] .sd-btn2{ border:1px solid var(--sd-keyline); background:var(--sd-surface); color:var(--sd-text); } [data-ui="sd"] .sd-iconbtn{ display:grid; place-items:center; inline-size:40px; block-size:40px; border-radius:var(--sd-r); background:transparent; border:1px solid var(--sd-keyline); color:var(--sd-text-2); cursor:pointer; } [data-ui="sd"] .sd-icon{ inline-size:18px; block-size:18px; fill:none; stroke:currentColor; stroke-linecap:square; stroke-linejoin:miter; stroke-width:1.5; } /* Chips (Pill — bewusste Ausnahme vom 4px-Radius, aus der Spez) */ [data-ui="sd"] .sd-chip{ display:inline-flex; align-items:center; justify-content:center; min-block-size:24px; padding:0 9px; border:1px solid var(--sd-keyline); border-radius:99px; background:transparent; color:var(--sd-text-2); font-size:9.5px; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-inline-size:100%; } [data-ui="sd"] .sd-chip.active{ border-color:var(--sd-signal); color:var(--sd-text); } [data-ui="sd"] .sd-chip.warning-chip{ border-color:rgba(241,196,90,.5); color:var(--sd-warning); } [data-ui="sd"] .sd-chip.info-chip{ border-color:rgba(125,174,255,.5); color:var(--sd-info); } /* Metric-Tile */ [data-ui="sd"] .sd-metric{ display:grid; gap:2px; container-type:inline-size; } [data-ui="sd"] .sd-metric b{ font-family:var(--sd-mono); font-weight:600; font-size:16px; } [data-ui="sd"] .sd-metric .l{ color:var(--sd-text-3); font-size:10px; letter-spacing:.05em; text-transform:uppercase; } /* Skeleton (Echt-Geometrie) + Zustaende */ [data-ui="sd"] .sd-skel{ block-size:14px; border-radius:3px; background:linear-gradient(100deg, #10140f 40%, #1a201a 50%, #10140f 60%); background-size:200% 100%; animation:sdShimmer 1.2s linear infinite; } @keyframes sdShimmer{ to{ background-position:-200% 0; } } [data-ui="sd"] .sd-state{ display:grid; gap:10px; justify-items:center; text-align:center; padding:var(--sd-s5) var(--sd-s4); color:var(--sd-text-2); font-size:13px; } [data-ui="sd"] .sd-state .sd-btn2{ inline-size:auto; padding-inline:18px; } /* Sticky-Aktionen */ [data-ui="sd"] .sd-sticky{ position:sticky; inset-block-end:0; display:flex; gap:8px; padding:10px var(--sd-s4) calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(8,10,8,.92); border-block-start:1px solid var(--sd-keyline-subtle); } @supports (backdrop-filter: blur(8px)){ [data-ui="sd"] .sd-sticky{ background:rgba(8,10,8,.8); backdrop-filter:blur(8px); } } [data-ui="sd"] .sd-vh{ position:absolute; inline-size:1px; block-size:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } @media (prefers-reduced-motion: reduce){ [data-ui="sd"] .sd-skel{ animation:none; } [data-ui="sd"] *{ transition-duration:0s !important; } } /* Sampler-Gerüst (nur ?sd-preview, faellt in SD-9) */ .sdp{ min-block-size:100dvh; padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px)); max-inline-size:430px; margin-inline:auto; } .sdp section{ margin-block-start:22px; } .sdp .sw{ display:inline-block; inline-size:30px; block-size:18px; border:1px solid var(--sd-keyline); border-radius:3px; margin-inline-end:6px; vertical-align:middle; } .sdp .sdp-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } .sdp .sdp-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } /* ============================================================ SD-1 · SIGNAL DESK — Shell: Topbar, Bottom-Nav, Such-Sheet, Toast Scope [data-ui="sd"] (Body-Flag via matchMedia <=1024px). Desktop (>1024px) traegt das Flag nie und bleibt unveraendert. ============================================================ */ .tab-lb-sd{ display:none; } .sd-only{ display:none; } [data-ui="sd"] .sd-only{ display:grid; } body[data-ui="sd"]{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); background:var(--sd-canvas); } /* Topbar: Wortmarke + Signal-Point, ruhige Keyline */ [data-ui="sd"] .topbar{ background:var(--sd-canvas); border-block-end:1px solid var(--sd-keyline-subtle); box-shadow:none; } [data-ui="sd"] .brand-mark{ display:none; } [data-ui="sd"] .topbar .brand strong{ font-family:var(--sd-ui); font-size:15px; font-weight:660; letter-spacing:-.035em; color:var(--sd-text); } [data-ui="sd"] .topbar .brand strong::after{ content:""; display:inline-block; inline-size:6px; block-size:6px; border-radius:50%; background:var(--sd-signal); margin-inline-start:5px; vertical-align:2px; } /* Bottom-Nav: Suche GANZ LINKS als runder, abgesetzter Knopf (SD-S2, Nutzer-Feedback: „kein Menüpunkt, sondern ein Suchfeld") + 5 Tab-Slots (Desk · Analyse · Portfolio · Studio · Mehr). */ [data-ui="sd"] .tabs{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40; display:grid; grid-template-columns:56px repeat(5, 1fr); gap:0; width:auto; max-width:none; margin:0; justify-self:auto; overflow:visible; padding:5px 6px calc(7px + env(safe-area-inset-bottom, 0px)); border:0; border-block-start:1px solid var(--sd-keyline); border-radius:0; background:var(--sd-surface); box-shadow:none; } [data-ui="sd"] .tabs button{ display:grid; justify-items:center; align-content:center; gap:3px; position:relative; padding:9px 2px 4px; min-block-size:52px; min-width:0; border-radius:0; background:none; box-shadow:none; scroll-snap-align:none; color:var(--sd-text-3); font-family:var(--sd-ui); font-size:10px; font-weight:550; } [data-ui="sd"] .tabs button[aria-pressed="true"]{ background:none; box-shadow:none; color:var(--sd-text); font-weight:620; } [data-ui="sd"] .tabs button[aria-pressed="true"]::before{ content:""; position:absolute; inset-block-start:2px; left:50%; transform:translateX(-50%); inline-size:5px; block-size:5px; border-radius:50%; background:var(--sd-signal); } [data-ui="sd"] .tab-ic{ display:block; width:18px; height:18px; } [data-ui="sd"] .tab-lb{ max-width:100%; overflow:hidden; text-overflow:ellipsis; } [data-ui="sd"] .tabs button[data-tab="briefing"], [data-ui="sd"] .tabs button[data-tab="ranking"]{ display:none; } [data-ui="sd"] #moreTab{ display:grid; } /* SD-S2: der Such-Knopf — Kreis auf Fläche + Hairline-Trenner nach rechts = klar KEIN Tab */ [data-ui="sd"] #sdSearchTab{ position:relative; display:grid; place-items:center; padding:0; min-block-size:52px; } [data-ui="sd"] #sdSearchTab .tab-ic{ box-sizing:content-box; inline-size:17px; block-size:17px; padding:10px; border:1px solid var(--sd-keyline); border-radius:50%; background:var(--sd-surface-2); color:var(--sd-text-2); } [data-ui="sd"] #sdSearchTab::after{ content:""; position:absolute; inset-block:10px; inset-inline-end:0; inline-size:1px; background:var(--sd-keyline); } [data-ui="sd"] #sdSearchTab:active .tab-ic{ background:var(--sd-surface); color:var(--sd-text); } [data-ui="sd"] .tab-lb-sd{ display:block; } [data-ui="sd"] button[data-tab="radar"] .tab-lb:not(.tab-lb-sd), [data-ui="sd"] button[data-tab="creator"] .tab-lb:not(.tab-lb-sd){ display:none; } /* Such-Sheet: Huelle um die kx-Engine. SD-S: faehrt von UNTEN ein (Input direkt ueber der Tastatur, Treffer wachsen nach oben — Treffer 1 sitzt am Input). */ [data-ui="sd"] .sds-overlay{ position:fixed; inset:0; z-index:70; border:0; background:rgba(4, 6, 4, .6); } [data-ui="sd"] .sd-sheet{ position:fixed; inset-inline:0; inset-block-end:0; inset-block-start:auto; z-index:71; background:var(--sd-canvas); border-block-start:1px solid var(--sd-keyline); padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); max-block-size:82dvh; overflow-y:auto; overscroll-behavior:contain; } [data-ui="sd"] .sd-sheet:not([hidden]){ animation:sd-sheet-up .2s ease-out; } @keyframes sd-sheet-up{ from{ transform:translateY(14px); opacity:.5; } to{ transform:none; opacity:1; } } @media (prefers-reduced-motion: reduce){ [data-ui="sd"] .sd-sheet:not([hidden]){ animation:none; } } [data-ui="sd"] .sds-head{ display:flex; justify-content:space-between; align-items:center; margin-block-end:10px; } [data-ui="sd"] #sdSearch .kx{ display:flex; flex-direction:column; margin:0; } [data-ui="sd"] .kx-l{ display:block; font-family:var(--sd-mono); font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--sd-text-3); margin-block-end:6px; } [data-ui="sd"] .kx-row{ display:flex; align-items:center; gap:8px; min-block-size:var(--sd-touch); background:var(--sd-surface); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); padding-inline:12px; } [data-ui="sd"] .kx-row svg{ inline-size:16px; block-size:16px; stroke:var(--sd-text-3); fill:none; stroke-width:1.5; stroke-linecap:square; flex:0 0 auto; } [data-ui="sd"] .kx-row input{ flex:1; min-inline-size:0; background:none; border:0; outline:none; font:600 16px var(--sd-ui); color:var(--sd-text); letter-spacing:-.01em; } /* SD-9a: 16px gegen iOS-Zoom */ [data-ui="sd"] .kx-clear{ inline-size:32px; block-size:32px; display:grid; place-items:center; background:none; border:0; cursor:pointer; color:var(--sd-text-3); } [data-ui="sd"] .kx-clear svg{ inline-size:14px; block-size:14px; stroke:currentColor; } /* SD-S: Liste sitzt UEBER dem Input (order:-1) und stapelt rueckwaerts — der beste Treffer (erstes DOM-Kind) landet zuunterst, direkt am Eingabefeld/Daumen. */ [data-ui="sd"] .kx-list{ order:-1; margin-block-end:8px; display:flex; flex-direction:column-reverse; gap:0; border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); overflow:hidden; max-block-size:42vh; overflow-y:auto; background:var(--sd-surface); } [data-ui="sd"] .kx-list[hidden]{ display:none; } /* Autoren-display schlaegt sonst das UA-[hidden] */ /* TR-7: Portfolio-Schnellwahl im Such-Sheet (unter dem Eingabefeld = Daumenzone) */ [data-ui="sd"] .kx-quick{ margin-block-start:10px; } [data-ui="sd"] .kx-quick .sd-eyebrow{ display:block; margin-block-end:6px; } [data-ui="sd"] .kxq-row{ display:flex; flex-wrap:wrap; gap:6px; } [data-ui="sd"] .kxq{ min-block-size:36px; padding:0 12px; border:1px solid var(--sd-keyline-subtle); border-radius:999px; background:var(--sd-surface); color:var(--sd-text); font-size:12px; font-weight:600; } .kx-quick{ margin-top:10px; } .kxq-row{ display:flex; flex-wrap:wrap; gap:6px; } .kxq{ min-height:34px; padding:0 12px; border:1px solid var(--border, #333); border-radius:999px; background:var(--surface, #16181d); color:inherit; font-size:12px; font-weight:600; cursor:pointer; } /* SD-7 „Regieraum": Take-Chips, Akt-Liste */ .vtakes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .vtake{ min-height:34px; padding:6px 12px; border:1px solid var(--border, #333); border-radius:4px; background:var(--surface, #16181d); color:inherit; font-size:12px; font-style:italic; font-family:'Newsreader', Georgia, serif; cursor:pointer; text-align:left; } [data-ui="sd"] .vtake{ border-color:var(--sd-keyline-subtle); background:var(--sd-surface); color:var(--sd-text-2); } .sf-acts{ margin:6px 0 14px; max-width:520px; } .sf-acts-h{ display:flex; justify-content:space-between; font:600 10px 'IBM Plex Mono', monospace; letter-spacing:.08em; color:var(--sd-text-3, #8a93a8); text-transform:uppercase; padding-bottom:6px; border-bottom:1px solid var(--sd-keyline, #333); } .sf-act{ display:grid; grid-template-columns:26px 1fr auto auto; gap:10px; align-items:center; min-height:34px; border-bottom:1px solid var(--sd-keyline-subtle, #26292f); font-size:12px; } .sf-act b{ font-weight:700; letter-spacing:.04em; } .sf-actn{ font-size:9px; color:var(--sd-text-3, #8a93a8); } .sf-beats{ color:var(--sd-signal, #b7ff42); font-size:10px; letter-spacing:2px; } .sf-actd{ font-size:10px; color:var(--sd-text-3, #8a93a8); } /* ============================================================ SD-8 „Signal Desk" für Landing + Auth — Token-Umzug am Seiten-Scope. Struktur/SEO/Flows unberührt; Legacy-Klassen erben die neue CI über die Variablen. Acid ersetzt das Marken-Grün (CTAs/Badges); DATEN-Grün (Demo-Balken) bleibt Ampel-positiv. ============================================================ */ body.authpg{ --bg:#080a08; --bg-2:#0b0e0b; --surface:#0f120f; --surface-2:#171b17; --surface-3:#1d231d; --border:#252b25; --border-2:#343b34; --text:#f2f5ef; --muted:#abb3aa; --faint:#737c74; --green:#b7ff42; --green-ink:#0a0c0a; --green-soft:rgba(183,255,66,.09); --green-glow:rgba(183,255,66,.16); --green-line:rgba(183,255,66,.38); --amber:#f1c45a; --red:#ff746e; --cyan:#7daeff; --r-sm:5px; --r-md:8px; --r-lg:10px; --r-xl:14px; --font:'Schibsted Grotesk', Inter, system-ui, sans-serif; --shadow-1:none; --shadow-2:0 10px 34px rgba(0,0,0,.45); background:var(--bg); color:var(--text); font-family:var(--font); } /* GPT-Review W-E: Light-Token-Set für authpg (Auth + Legal) — vorher blieb die Seite trotz Theme-Toggle dunkel, weil die Body-Tokens die Root-Light-Tokens überschatteten. */ html[data-theme="light"] body.authpg{ --bg:#f4f6f1; --bg-2:#eef1ea; --surface:#ffffff; --surface-2:#e9ede4; --surface-3:#dde3d8; --border:#d9e0d4; --border-2:#c6cfc2; --text:#101410; --muted:#4c564c; --faint:#7d877d; --green:#578e00; --green-ink:#ffffff; --green-soft:rgba(87,142,0,.09); --green-glow:rgba(87,142,0,.14); --green-line:rgba(87,142,0,.4); --amber:#a97e17; --red:#d84a44; --cyan:#3b6fd0; --shadow-2:0 10px 34px rgba(20,30,20,.14); } body.authpg .num{ font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; } body.authpg .btn.primary{ background:var(--green); border-color:var(--green); color:#0a0c0a; } /* Demo-DYNA-Balken sind DATEN, nicht Marke — Ampel-positiv erzwingen (Inline-Style nutzt --green) */ body.authpg .auth-card{ background:var(--surface); border:1px solid var(--border-2); border-radius:12px; box-shadow:none; } body.authpg .auth-tab[aria-pressed="true"], body.authpg .auth-tab.active{ color:var(--green); box-shadow:inset 0 -2px var(--green); } body.authpg .auth-field input{ background:var(--bg-2); border:1px solid var(--border); border-radius:6px; color:var(--text); } body.authpg .auth-field input:focus{ border-color:var(--green-line); outline:none; } [data-ui="sd"] .kx-opt{ text-align:start; background:none; border:0; border-block-end:1px solid var(--sd-keyline-subtle); color:var(--sd-text-2); font:inherit; font-size:13px; padding:11px 12px; min-block-size:var(--sd-touch); cursor:pointer; flex:0 0 auto; } [data-ui="sd"] .kx-opt:first-child{ border-block-end:0; } [data-ui="sd"] .kx-opt b{ color:var(--sd-text); font-family:var(--sd-mono); font-weight:600; } [data-ui="sd"] .kx-opt .ex{ color:var(--sd-text-3); font-size:10px; } [data-ui="sd"] .kx-opt.focus{ outline:2px solid var(--sd-signal); outline-offset:-2px; } /* Toast */ [data-ui="sd"] #sdToast{ position:fixed; left:16px; right:16px; bottom:calc(86px + env(safe-area-inset-bottom, 0px)); z-index:80; background:var(--sd-surface-2); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); color:var(--sd-text); font:600 12.5px var(--sd-ui); padding:12px 14px; opacity:0; transform:translateY(6px); transition:opacity var(--sd-motion), transform var(--sd-motion); pointer-events:none; } [data-ui="sd"] #sdToast.on{ opacity:1; transform:none; } /* ============================================================ SD-2 · SIGNAL DESK — Analyse + DYNA, Topbar-Kontrollen, Light-Entwurf ============================================================ */ /* Topbar: dezente Kontrollzeile mit Safe-Area (Suche · Sprache · Theme · Profil) */ [data-ui="sd"] .topbar{ padding-block-start:calc(6px + env(safe-area-inset-top, 0px)); } [data-ui="sd"] .topright{ display:flex; align-items:center; gap:6px; } [data-ui="sd"] .topright .sd-iconbtn{ inline-size:32px; block-size:32px; border-color:var(--sd-keyline-subtle); } [data-ui="sd"] .lang-toggle{ min-inline-size:34px; block-size:32px; padding:0 8px; border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); background:none; color:var(--sd-text-2); font:600 10px var(--sd-mono); letter-spacing:.05em; box-shadow:none; } [data-ui="sd"] .theme-toggle{ inline-size:32px; block-size:32px; border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); background:none; color:var(--sd-text-2); box-shadow:none; } /* Light-Modus — ERSTER ENTWURF (finale Light-Phase folgt separat) */ html[data-theme="light"] body[data-ui="sd"]{ --sd-canvas:#f3f5f1; --sd-surface:#fbfcfa; --sd-surface-2:#e9ede7; --sd-keyline:#c6cdc4; --sd-keyline-subtle:#dde2db; --sd-text:#141814; --sd-text-2:#4b544b; --sd-text-3:#78817a; --sd-signal:#3e8500; --sd-signal-ink:#f4ffdd; --sd-positive:#0f8a5f; --sd-negative:#d2403c; --sd-warning:#9a6d00; --sd-info:#2f6fd0; color-scheme:light; } /* Analyse: Legacy-Module im sd-Scope aus (auch 721–1024px) */ [data-ui="sd"] #singleView .m-hero, [data-ui="sd"] #singleView .m-dash, [data-ui="sd"] #singleView .snap, [data-ui="sd"] #singleView .m-chartseg, [data-ui="sd"] #singleView .kpis, [data-ui="sd"] #singleView .modules, [data-ui="sd"] #singleView .dyna-hero, [data-ui="sd"] #singleView .sowhat, [data-ui="sd"] #singleView .risk-card, [data-ui="sd"] #singleView .spinner, [data-ui="sd"] #singleView .skeleton-note, [data-ui="sd"] #singleView .sk-wrap, [data-ui="sd"] [data-pane="analyse"] .subtabs, [data-ui="sd"] [data-pane="analyse"] [data-asub="single"] > .card, [data-ui="sd"] [data-pane="analyse"] .wl-strip{ display:none !important; } /* Der Analyse-Screen */ .sda, .sd-snapskel{ display:none; } [data-ui="sd"] .sda{ display:grid; gap:12px; padding:14px 16px 8px; } [data-ui="sd"] .sd-snapskel{ display:grid; gap:12px; padding:14px 16px; } [data-ui="sd"] .sda-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } [data-ui="sd"] .sda-id .sd-ticker{ font-size:12px; font-weight:650; letter-spacing:.05em; } [data-ui="sd"] .sda-name{ display:block; color:var(--sd-text-3); font-size:11px; margin-block-start:2px; } [data-ui="sd"] .sda-price{ text-align:end; flex:0 0 auto; } [data-ui="sd"] .sda-price b{ display:block; font-family:var(--sd-mono); font-weight:600; font-size:20px; } [data-ui="sd"] .sda-price span{ font-family:var(--sd-mono); font-size:11px; } [data-ui="sd"] .sd-pfhead{ display:grid; justify-items:end; gap:0; } [data-ui="sd"] .sd-pfhead > b{ font-family:var(--sd-mono); font-weight:600; font-size:26px; line-height:1.05; } [data-ui="sd"] .sd-pfytdlbl{ font-size:8.5px; letter-spacing:.14em; color:var(--sd-text-3); margin-block-end:2px; } [data-ui="sd"] .sd-pftv{ font-family:var(--sd-mono); font-size:12px; color:var(--sd-text-2); } [data-ui="sd"] .sd-pfsum{ margin-block-start:2px; } [data-ui="sd"] .sda-price .sda-dynatop{ display:block; margin-block-start:3px; font:600 10px var(--sd-mono); letter-spacing:.05em; color:var(--sd-text-3); } [data-ui="sd"] .sd-sowhat-list{ margin:6px 0 0; padding-inline-start:16px; display:grid; gap:5px; font-size:12.5px; line-height:1.5; color:var(--sd-text-2); } [data-ui="sd"] .sd-sowhat-list li::marker{ color:var(--sd-text-3); } [data-ui="sd"] .sda-thesis{ margin:0; font-family:var(--sd-editorial); font-weight:460; font-size:clamp(20px, 5.6vw, 24px); line-height:1.24; letter-spacing:-.005em; color:var(--sd-text); text-wrap:balance; } [data-ui="sd"] .sda-chart{ margin-inline:-16px; background:var(--sd-surface); border-block:1px solid var(--sd-keyline-subtle); padding:12px 16px 10px; } [data-ui="sd"] .sda-chart svg{ inline-size:100%; block-size:clamp(140px, 36vw, 180px); display:block; } [data-ui="sd"] .sd-rangerow{ display:flex; gap:1px; background:var(--sd-keyline-subtle); border:1px solid var(--sd-keyline-subtle); margin-block-end:10px; } [data-ui="sd"] .sd-rangerow button{ flex:1; min-block-size:36px; background:var(--sd-canvas); border:0; color:var(--sd-text-3); font:600 10.5px var(--sd-mono); letter-spacing:.05em; text-transform:uppercase; cursor:pointer; } [data-ui="sd"] .sd-rangerow button[aria-pressed="true"]{ color:var(--sd-text); box-shadow:inset 0 -2px 0 var(--sd-signal); } [data-ui="sd"] .sda-empty{ display:grid; place-items:center; block-size:120px; color:var(--sd-text-3); font-size:12px; } [data-ui="sd"] .sd-stampline{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-block-start:8px; } [data-ui="sd"] .sd-stampline b{ font-family:var(--sd-mono); font-weight:600; font-size:13px; } [data-ui="sd"] .sda-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--sd-keyline-subtle); border:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sda-grid .sd-metric{ background:var(--sd-canvas); padding:12px; } [data-ui="sd"] .sda-dyna{ border:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sda-dyna-head{ display:flex; align-items:baseline; gap:8px; padding:12px; } [data-ui="sd"] .sda-dyna-head b{ font-family:var(--sd-mono); font-weight:600; font-size:26px; } [data-ui="sd"] .sda-dyna-head .of{ color:var(--sd-text-3); font-size:11px; } [data-ui="sd"] .sda-dyna-head .sd-chip{ margin-inline-start:auto; } [data-ui="sd"] .sd-acc summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; min-block-size:var(--sd-touch); padding:10px 12px; font-family:var(--sd-mono); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--sd-text-2); } [data-ui="sd"] .sd-acc summary::-webkit-details-marker{ display:none; } [data-ui="sd"] .sd-acc summary span[aria-hidden]{ color:var(--sd-text-3); transition:transform var(--sd-motion); } [data-ui="sd"] .sd-acc[open] summary span[aria-hidden]{ transform:rotate(90deg); } [data-ui="sd"] .sda > .sd-acc{ border:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sd-acc-c{ padding:0 12px 12px; content-visibility:auto; contain-intrinsic-size:auto 120px; } [data-ui="sd"] .sd-row{ display:flex; justify-content:space-between; gap:10px; padding-block:9px; border-block-start:1px solid var(--sd-keyline-subtle); font-size:13px; color:var(--sd-text-2); } [data-ui="sd"] .sd-row:first-child{ border-block-start:0; } [data-ui="sd"] .sd-row b{ font-family:var(--sd-mono); font-weight:600; font-size:13px; color:var(--sd-text); } [data-ui="sd"] .sd-dim{ padding-block:8px; border-block-start:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sd-dim:first-child{ border-block-start:0; } [data-ui="sd"] .sd-dim-h{ display:flex; justify-content:space-between; gap:10px; font-family:var(--sd-mono); font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--sd-text-2); } [data-ui="sd"] .sd-bar{ block-size:4px; background:var(--sd-surface-2); margin-block-start:6px; position:relative; } [data-ui="sd"] .sd-bar i{ position:absolute; inset-block:0; inset-inline-start:0; } [data-ui="sd"] .sd-trend{ padding-block:10px; border-block-start:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sd-trend:first-child{ border-block-start:0; } [data-ui="sd"] .sd-trendsvg{ position:relative; margin-block-start:6px; } [data-ui="sd"] .sd-trendsvg svg{ inline-size:100%; block-size:76px; display:block; } [data-ui="sd"] .sd-ax{ position:absolute; inset-inline-start:0; z-index:1; font:600 9px var(--sd-mono); color:var(--sd-text-3); letter-spacing:.03em; background:color-mix(in srgb, var(--sd-canvas) 78%, transparent); padding:0 3px; } [data-ui="sd"] .sd-ax.hi{ inset-block-start:0; } [data-ui="sd"] .sd-ax.lo{ inset-block-end:0; } [data-ui="sd"] .sd-ax.zero{ inset-block-start:50%; transform:translateY(-50%); } [data-ui="sd"] .sd-years{ display:flex; justify-content:space-between; font:600 9px var(--sd-mono); color:var(--sd-text-3); margin-block-start:3px; } [data-ui="sd"] .sda-actions{ display:grid; } [data-ui="sd"] .sda-foot{ padding-block:2px 10px; } /* „Meine Boegen“-Liste im Mehr-Sheet: Signal-Desk-Satz (KZ-Skin ersetzt) */ [data-ui="sd"] .ms-sheets{ margin:4px 14px 10px; border:1px solid var(--sd-keyline); border-radius:var(--sd-r); overflow:hidden; background:var(--sd-surface); } [data-ui="sd"] .mss-row{ display:flex; gap:10px; align-items:baseline; inline-size:100%; text-align:start; background:none; border:0; border-block-start:1px solid var(--sd-keyline-subtle); color:var(--sd-text-2); font:600 13px var(--sd-ui); padding:12px; min-block-size:var(--sd-touch); cursor:pointer; } [data-ui="sd"] .mss-row:first-child{ border-block-start:0; } [data-ui="sd"] .mss-row b{ font:600 11px var(--sd-mono); color:var(--sd-text-3); letter-spacing:.05em; } [data-ui="sd"] .mss-row .mss-d{ margin-inline-start:auto; color:var(--sd-text-3); font-size:11px; } [data-ui="sd"] .mss-empty{ padding:12px; font-size:12px; color:var(--sd-text-3); } /* ============================================================ SD-3 · SIGNAL DESK — Desk (taeglicher Einstieg) ============================================================ */ #sdDesk{ display:none; } [data-ui="sd"] #sdDesk{ display:block; padding:14px 16px 8px; } [data-ui="sd"] [data-pane="radar"] > *:not(#sdDesk){ display:none !important; } [data-ui="sd"] .sdd-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-block-end:14px; } [data-ui="sd"] .sdd-title{ margin:2px 0 0; font-size:clamp(26px, 7vw, 30px); font-weight:620; letter-spacing:-.035em; line-height:1.04; } [data-ui="sd"] .sdd-mod{ margin-block-start:14px; } [data-ui="sd"] .sdd-mod .sd-band{ margin-inline:-16px; border-inline:0; } [data-ui="sd"] .sdd-heat{ position:relative; display:block; block-size:clamp(190px, 52vw, 250px); } [data-ui="sd"] .sdd-tile{ position:absolute; display:grid; gap:1px; align-content:start; justify-items:start; padding:7px 8px; overflow:hidden; box-sizing:border-box; border:2px solid var(--sd-canvas); border-radius:3px; background:var(--sd-surface); cursor:pointer; font:inherit; color:var(--sd-text); text-align:start; } [data-ui="sd"] .sdd-tile.sm em{ display:none; } [data-ui="sd"] .sdd-tile.xs em, [data-ui="sd"] .sdd-tile.xs span{ display:none; } [data-ui="sd"] .sdd-tile.xs{ padding:4px 5px; } [data-ui="sd"] .sdd-tile.xs b{ font-size:9px; } [data-ui="sd"] .sdd-tile b{ font-family:var(--sd-mono); font-size:11px; font-weight:650; letter-spacing:.04em; } [data-ui="sd"] .sdd-tile span{ font-family:var(--sd-mono); font-size:11.5px; } [data-ui="sd"] .sdd-tile em{ font-style:normal; font-family:var(--sd-mono); font-size:8.5px; color:var(--sd-text-3); letter-spacing:.04em; } [data-ui="sd"] .sdd-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; inline-size:calc(100% + 32px); text-align:start; cursor:pointer; font:inherit; color:var(--sd-text); } [data-ui="sd"] .sdd-row > span:first-child{ display:grid; gap:2px; min-inline-size:0; } [data-ui="sd"] .sdd-row b{ font-size:13.5px; font-weight:620; letter-spacing:-.01em; } [data-ui="sd"] .sdd-row small{ color:var(--sd-text-3); font-size:11px; } [data-ui="sd"] .sdd-chev{ color:var(--sd-text-3); flex:0 0 auto; } [data-ui="sd"] .sdd-pfband .sdd-pfytd{ text-align:end; font-weight:600; font-size:18px; flex:0 0 auto; } [data-ui="sd"] .sdd-pfytd em{ display:block; font-style:normal; font-size:9px; letter-spacing:.08em; color:var(--sd-text-3); } [data-ui="sd"] .sdd-sigrow{ inline-size:100%; text-align:start; background:none; border-inline:0; border-block-end:0; cursor:pointer; font:inherit; } [data-ui="sd"] .sdd-sigrow span [data-i18n]{ color:var(--sd-text-3); font-size:11px; } [data-ui="sd"] .sdd-chips{ display:flex; gap:6px; flex-wrap:wrap; } [data-ui="sd"] .sdd-chips .sd-chip{ min-block-size:32px; font-size:10.5px; cursor:pointer; } /* ============================================================ SD-4 · SIGNAL DESK — Portfolio (Prozent-Festung) ============================================================ */ .sd-pf{ display:none; } [data-ui="sd"] .sd-pf{ display:block; padding:14px 16px 8px; } [data-ui="sd"] #pfView > *:not(.sd-pf){ display:none !important; } [data-ui="sd"] [data-pane="portfolio"] > .card{ display:none !important; } [data-ui="sd"] [data-pane="portfolio"].sd-show-legacy > .card{ display:revert !important; } /* GPT-Review W-E: Escape zeigt NUR die Import-Karte — die frühere Pauschal-Freigabe aller #pfView-Kinder erzeugte doppelte Portfolio-Ausgaben neben der sd-Ansicht. */ [data-ui="sd"] .sd-pfwho{ display:flex; align-items:center; gap:10px; min-inline-size:0; } [data-ui="sd"] .sd-pfava{ inline-size:36px; block-size:36px; border-radius:50%; flex:0 0 auto; border:1px solid var(--sd-keyline); object-fit:cover; background:var(--sd-surface-2); } [data-ui="sd"] .sd-pfava-f{ display:grid; place-items:center; color:var(--sd-text-2); font-size:14px; font-weight:600; } [data-ui="sd"] .sd-pfwho-t{ display:grid; gap:2px; min-inline-size:0; } [data-ui="sd"] .sd-pfhandle{ font-size:14px; font-weight:620; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-inline-size:38vw; } [data-ui="sd"] .sd-pfsum{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } [data-ui="sd"] .sd-pfsum > b{ font-family:var(--sd-mono); font-weight:600; font-size:34px; letter-spacing:-.01em; } [data-ui="sd"] .sd-pfsub{ inline-size:100%; color:var(--sd-text-3); font-size:11px; } [data-ui="sd"] .sd-pfsub em{ font-style:normal; } [data-ui="sd"] .sd-pfmarks{ position:relative; block-size:30px; margin-block-start:4px; } [data-ui="sd"] .sd-pfmarks[data-lanes="2"]{ block-size:58px; } [data-ui="sd"] .sd-pfmark{ position:absolute; inset-block-start:calc(var(--lane, 0) * 28px); inline-size:24px; block-size:24px; transform:translateX(-12px); border-radius:50%; overflow:hidden; border:1px solid var(--sd-keyline); background:var(--sd-surface-2); } [data-ui="sd"] .sd-pfmark img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; } [data-ui="sd"] .sd-allocbar{ display:flex; block-size:14px; border-radius:3px; overflow:hidden; border:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sd-allocbar i{ display:block; } [data-ui="sd"] .sd-alloclegend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-block-start:8px; font-size:10.5px; color:var(--sd-text-2); } [data-ui="sd"] .sd-alloclegend i{ display:inline-block; inline-size:8px; block-size:8px; border-radius:2px; margin-inline-end:5px; vertical-align:0; } [data-ui="sd"] .sd-alloclegend b{ color:var(--sd-text-3); font-weight:600; } [data-ui="sd"] .sd-pfrows{ margin-inline:-4px; } [data-ui="sd"] .sd-pfrow{ inline-size:100%; display:flex; align-items:center; gap:10px; text-align:start; background:none; border:0; border-block-start:1px solid var(--sd-keyline-subtle); padding:10px 4px; min-block-size:var(--sd-touch); cursor:pointer; font:inherit; color:var(--sd-text); } [data-ui="sd"] .sd-pfrow:first-child{ border-block-start:0; } [data-ui="sd"] .sd-pfid{ display:grid; gap:1px; min-inline-size:0; flex:1; } [data-ui="sd"] .sd-pfid b{ font-family:var(--sd-mono); font-size:12px; font-weight:650; letter-spacing:.04em; } [data-ui="sd"] .sd-pfid small{ color:var(--sd-text-3); font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-ui="sd"] .sd-pfw{ flex:0 0 52px; text-align:end; color:var(--sd-text-3); font-size:12px; } [data-ui="sd"] .sd-pfrow > b{ flex:0 0 72px; text-align:end; font-family:var(--sd-mono); font-size:13px; font-weight:600; } /* ============================================================ SD-5 · SIGNAL DESK — Briefing + „Mehr“-Zielverzeichnis ============================================================ */ .sd-bf{ display:none; } [data-ui="sd"] .sd-bf{ display:block; padding:14px 16px 8px; } [data-ui="sd"] #briefView > *:not(.sd-bf){ display:none !important; } [data-ui="sd"] [data-pane="briefing"] > *:not(#briefView){ display:none !important; } [data-ui="sd"] [data-pane="radar"].sd-show-legacy > *:not(#sdDesk){ display:revert !important; } [data-ui="sd"] .sd-bfspan{ padding-block:4px; } [data-ui="sd"] .sd-bfline{ position:relative; block-size:6px; border-radius:3px; background:linear-gradient(90deg, var(--sd-surface-2), var(--sd-keyline)); } [data-ui="sd"] .sd-bfline .mk{ position:absolute; inset-block:-3px; inline-size:2px; background:var(--sd-text-2); transform:translateX(-1px); } [data-ui="sd"] .sd-bfline .mk.now{ inline-size:8px; block-size:12px; inset-block-start:-3px; border-radius:2px; background:var(--sd-signal); transform:translateX(-4px); } [data-ui="sd"] .sd-bflbl{ display:flex; justify-content:space-between; gap:8px; margin-block-start:6px; font-size:10.5px; color:var(--sd-text-3); } [data-ui="sd"] .sd-bfdot{ display:inline-block; inline-size:8px; block-size:8px; border-radius:2px; background:var(--sd-signal); vertical-align:-1px; } [data-ui="sd"] .sd-bfnews{ padding-block:9px; border-block-start:1px solid var(--sd-keyline-subtle); font-size:13px; line-height:1.45; } [data-ui="sd"] .sd-bfnews:first-child{ border-block-start:0; } [data-ui="sd"] .sd-bfnews a{ color:var(--sd-text); text-decoration:none; } [data-ui="sd"] .sd-bfnews .sd-stamp{ display:block; margin-block-start:3px; } /* Mehr-Sheet im Signal-Desk-Satz */ .sd-only-flex{ display:none; } [data-ui="sd"] .sd-only-flex{ display:flex; } [data-ui="sd"] .ms-sheet{ background:var(--sd-surface); border-start-start-radius:10px; border-start-end-radius:10px; border-block-start:1px solid var(--sd-keyline); } [data-ui="sd"] .ms-row{ font-family:var(--sd-ui); color:var(--sd-text); border-block-start:1px solid var(--sd-keyline-subtle); min-block-size:var(--sd-touch); } [data-ui="sd"] .ms-row:first-of-type{ border-block-start:0; } [data-ui="sd"] .ms-ic{ color:var(--sd-text-3); } [data-ui="sd"] .ms-legal{ justify-content:center; gap:18px; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size:11px; } [data-ui="sd"] .ms-legal a{ color:var(--sd-text-3); text-decoration:none; border-block-end:1px solid var(--sd-keyline); } /* ============================================================ SD-5e · Topbar-Politur: sticky, ein Profil-Knopf (Legacy-User-Chip im sd-Skin) ============================================================ */ [data-ui="sd"] .topbar{ position:sticky; inset-block-start:0; z-index:60; } [data-ui="sd"] .user-chip{ padding:0; background:none; border:0; box-shadow:none; } [data-ui="sd"] .user-chip .user-meta{ display:none; } [data-ui="sd"] .user-chip .avatar{ width:30px; height:30px; border:1px solid var(--sd-keyline); color:var(--sd-text-2); font:600 11px var(--sd-mono); background:var(--sd-surface-2); } /* ============================================================ SD-5f · Briefing-Ziel-Overlay + Portfolio-KPIs (Range + Kacheln) ============================================================ */ [data-ui="sd"] .sda-chart{ position:relative; } [data-ui="sd"] .sd-bftarget{ position:absolute; inset-inline-end:10px; transform:translateY(-50%); display:grid; gap:1px; justify-items:end; text-align:end; } [data-ui="sd"] .sd-bftarget b{ font:600 16px var(--sd-mono); letter-spacing:-.01em; line-height:1.1; } [data-ui="sd"] .sd-bftarget small{ font:600 10.5px var(--sd-mono); opacity:.85; } [data-ui="sd"] .sd-range{ border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); padding:10px 12px 8px; } [data-ui="sd"] .sd-range-bar{ position:relative; display:flex; block-size:8px; border-radius:3px; overflow:visible; margin-block-start:8px; } [data-ui="sd"] .sd-range-bar .z{ display:block; block-size:100%; opacity:.28; } [data-ui="sd"] .sd-range-bar .z.n{ flex:0 0 14.3%; background:var(--sd-negative); border-start-start-radius:3px; border-end-start-radius:3px; } [data-ui="sd"] .sd-range-bar .z.w{ flex:0 0 28.6%; background:var(--sd-warning); } [data-ui="sd"] .sd-range-bar .z.p{ flex:0 0 28.6%; background:var(--sd-positive); } [data-ui="sd"] .sd-range-bar .z.s{ flex:1; background:var(--sd-positive); opacity:.5; border-start-end-radius:3px; border-end-end-radius:3px; } [data-ui="sd"] .sd-range-bar em{ position:absolute; inset-block:-3px; inline-size:3px; background:var(--sd-text); border-radius:1px; transform:translateX(-1.5px); } [data-ui="sd"] .sd-range-lbl{ position:relative; display:flex; justify-content:space-between; font:600 9px var(--sd-mono); color:var(--sd-text-3); margin-block-start:5px; letter-spacing:.06em; text-transform:uppercase; block-size:12px; } [data-ui="sd"] .sd-range-lbl i{ position:absolute; font-style:normal; transform:translateX(-50%); } [data-ui="sd"] .sd-pfacc{ border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); margin-block-start:14px; } [data-ui="sd"] .sd-pfacc summary > span:first-child{ font-family:var(--sd-ui); font-size:13px; font-weight:620; letter-spacing:-.01em; text-transform:none; color:var(--sd-text); } /* ============================================================ SD-5g · Beat/Miss-Balken + Ziel-Chart-Praezision (Zeitachse, 52W-Marker) ============================================================ */ [data-ui="sd"] .sd-bftime{ position:relative; display:flex; justify-content:space-between; margin-block-start:5px; font:600 8.5px var(--sd-mono); color:var(--sd-text-3); letter-spacing:.06em; text-transform:uppercase; } [data-ui="sd"] .sd-bftime i{ position:absolute; font-style:normal; transform:translateX(-50%); } [data-ui="sd"] .sd-bmrow{ display:flex; gap:5px; margin-block-start:4px; } [data-ui="sd"] .sd-bm{ flex:1; display:grid; gap:3px; justify-items:center; min-inline-size:0; } [data-ui="sd"] .sd-bm > b{ font:600 9px var(--sd-mono); } [data-ui="sd"] .sd-bmbar{ position:relative; inline-size:100%; max-inline-size:26px; block-size:46px; } [data-ui="sd"] .sd-bmbar::before{ content:""; position:absolute; inset-inline:-2px; inset-block-start:50%; block-size:1px; background:var(--sd-keyline); } [data-ui="sd"] .sd-bmbar i{ position:absolute; inset-inline:22%; border-radius:2px; } [data-ui="sd"] .sd-bmbar i.positive{ background:var(--sd-positive); inset-block-end:50%; } [data-ui="sd"] .sd-bmbar i.negative{ background:var(--sd-negative); inset-block-start:50%; } [data-ui="sd"] .sd-bm > span{ font:600 8px var(--sd-mono); color:var(--sd-text-3); } /* SD-5i: 52W-Labels an X-Position, gefaerbt (dunkelgruen/dunkelrot) */ [data-ui="sd"] .sd-bfplot{ position:relative; block-size:clamp(150px, 40vw, 190px); } [data-ui="sd"] .sd-bfplot svg{ position:absolute; inset:0; inline-size:100%; block-size:100%; display:block; } [data-ui="sd"] .sd-bf52{ position:absolute; z-index:2; font:600 8.5px var(--sd-mono); letter-spacing:.04em; white-space:nowrap; max-inline-size:46%; overflow:hidden; text-overflow:ellipsis; background:color-mix(in srgb, var(--sd-canvas) 84%, transparent); padding:0 3px; border-radius:2px; } [data-ui="sd"] .sd-bf52.hi{ color:#3fae63; } [data-ui="sd"] .sd-bf52.lo{ color:#e26a63; } /* SD-C „Duell": Compare im Kanon — Legacy-Eingabekarte aus, cardDuel-Bausteine */ [data-ui="sd"] [data-pane="analyse"] [data-asub="compare"] > .card{ display:none !important; } [data-ui="sd"] #compareView{ background:none; border:0; padding:0; } [data-ui="sd"] .sd-duelhead{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:10px; padding-block:10px 4px; } [data-ui="sd"] .sd-duelside{ display:grid; gap:2px; min-width:0; justify-items:start; } [data-ui="sd"] .sd-duelside:last-child{ justify-items:end; text-align:end; } [data-ui="sd"] .sd-duelside .sd-ticker{ position:relative; padding-block-end:4px; } [data-ui="sd"] .sd-duelside .sd-ticker::after{ content:""; position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:18px; block-size:2px; background:var(--dcol); } [data-ui="sd"] .sd-duelside:last-child .sd-ticker::after{ inset-inline-start:auto; inset-inline-end:0; } [data-ui="sd"] .sd-duelside .sda-name{ font-size:11px; color:var(--sd-text-3); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-ui="sd"] .sd-duelside > b{ font-size:15px; } [data-ui="sd"] .sd-duelvs{ align-self:center; font-family:var(--sd-mono); font-size:9.5px; color:var(--sd-text-3); border:1px solid var(--sd-keyline); border-radius:50%; inline-size:28px; block-size:28px; display:grid; place-items:center; } [data-ui="sd"] .sd-duelleg{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--sd-text-2); margin-block-end:4px; } [data-ui="sd"] .sd-duelleg i{ display:inline-block; inline-size:8px; block-size:8px; border-radius:50%; margin-inline-end:5px; vertical-align:baseline; } [data-ui="sd"] .sd-duelscore{ display:flex; align-items:baseline; gap:10px; padding:10px 12px; margin-block-start:12px; border:1px solid var(--sd-keyline); border-radius:var(--sd-r); background:var(--sd-surface); } [data-ui="sd"] .sd-duelscore b{ font-size:20px; } [data-ui="sd"] .sd-duelscore span{ font-size:11.5px; color:var(--sd-text-2); } [data-ui="sd"] .sd-duelrow{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; min-block-size:40px; border-block-end:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sd-duelrow:last-child{ border-block-end:0; } [data-ui="sd"] .sd-duelrow .lbl{ font-family:var(--sd-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sd-text-3); text-align:center; } [data-ui="sd"] .sd-duelrow > b:first-child{ text-align:start; } [data-ui="sd"] .sd-duelrow > b:last-child{ text-align:end; } [data-ui="sd"] .sd-duelrow > b{ font-weight:560; color:var(--sd-text-2); font-size:13px; } [data-ui="sd"] .sd-duelrow > b.sd-win{ color:var(--sd-text); font-weight:660; } [data-ui="sd"] .sd-duelrow > b.sd-lose{ color:var(--sd-text-3); } [data-ui="sd"] .sd-duelrow.head > b{ font-family:var(--sd-mono); font-size:10px; font-weight:600; color:var(--sd-text-3); } [data-ui="sd"] .sd-dueldim{ margin-block-end:9px; } [data-ui="sd"] .sd-duelbar{ block-size:4px; background:var(--sd-surface-2); border-radius:2px; overflow:hidden; margin-block-start:3px; } [data-ui="sd"] .sd-duelbar i{ display:block; block-size:100%; } [data-ui="sd"] .sd-dueltrend{ margin-block-end:12px; } [data-ui="sd"] .sd-dueltrend svg{ inline-size:100%; block-size:64px; display:block; } [data-ui="sd"] .sd-duel .sda-actions{ grid-template-columns:1fr 1fr; gap:8px; } /* SD-6a „Storyroom": Studio im Kanon — R4/Legacy im sd-Scope komplett aus, sds-Shell an */ [data-ui="sd"] #wb, [data-ui="sd"] #wbKatalog{ display:none !important; } [data-ui="sd"] [data-pane="creator"] .creator-grid, [data-ui="sd"] [data-pane="creator"] .cr-mobile, [data-ui="sd"] [data-pane="creator"] .cr-tilerow, [data-ui="sd"] [data-pane="creator"] .creator-upsell{ display:none !important; } [data-ui="sd"] .sds .sds-title{ font-size:19px; font-weight:800; letter-spacing:-.01em; display:block; } [data-ui="sd"] .sds .sda-name{ display:block; font-size:11px; color:var(--sd-text-3); white-space:normal; } [data-ui="sd"] .sds-plan b{ font-size:15px; font-weight:750; display:block; } [data-ui="sd"] .sds-demo{ color:#f1c45a !important; } /* SD-6b/6d: Bühne randlos (größere Vorschau) + Höhen-Anker gegen Scroll-Springen — der Canvas-Slot behält sein Seitenverhältnis während ereignisgetriebener Re-Renders (Datenwechsel/Vorlagen-Pick). */ [data-ui="sd"] .sds-stage{ position:relative; margin-inline:-16px; border-block:1px solid var(--sd-keyline); overflow:hidden; background:var(--sd-surface); min-block-size:60vw; } [data-ui="sd"] .sds-stage[data-fmt="916"]{ min-block-size:120vw; } /* SD-6d: „GENERIERT…"-Overlay — alter Inhalt bleibt gedimmt stehen, Bühne bleibt größenstabil */ [data-ui="sd"] .sds-gen{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:color-mix(in srgb, var(--sd-canvas) 55%, transparent); } [data-ui="sd"] .sds-gen b{ font-family:var(--sd-mono); font-size:10px; letter-spacing:.14em; color:var(--sd-signal); border:1px solid var(--sd-signal); border-radius:3px; padding:6px 10px; background:var(--sd-canvas); animation:sdskel 1.1s linear infinite alternate; } @media (prefers-reduced-motion: reduce){ [data-ui="sd"] .sds-gen b{ animation:none; } } [data-ui="sd"] .sds-stage .canvas-frame{ margin:0; border:0; border-radius:0; } [data-ui="sd"] .sds-stage[data-fmt="169"] .canvas-frame{ aspect-ratio:16/9; } [data-ui="sd"] .sds-stage canvas{ inline-size:100% !important; block-size:auto !important; display:block; } /* Posts-/Caption-Bereich wächst asynchron — deckeln + intern scrollen statt Seitenhöhe ändern */ [data-ui="sd"] .sds-stage #postsArea{ max-block-size:220px; overflow-y:auto; padding-inline:16px; } [data-ui="sd"] .sds-tick{ display:flex; gap:8px; align-items:center; padding-block:10px; border-block-end:1px solid var(--sd-keyline-subtle); } [data-ui="sd"] .sds-tbtn{ display:inline-flex; gap:6px; align-items:center; min-block-size:38px; padding:0 12px; border:1px solid var(--sd-keyline); border-radius:var(--sd-r); background:var(--sd-surface); color:var(--sd-text); font-weight:600; font-size:13px; } [data-ui="sd"] .sds-tbtn span{ color:var(--sd-text-3); } [data-ui="sd"] .sds-vs{ font-size:9px; color:var(--sd-text-3); } [data-ui="sd"] .sds-obtn{ margin-inline-start:auto; min-block-size:38px; padding:0 12px; border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); background:none; color:var(--sd-signal); font-weight:600; font-size:12px; } [data-ui="sd"] .sds-gh{ display:flex; justify-content:space-between; align-items:center; margin:14px 0 4px; } [data-ui="sd"] .sds-clear{ background:none; border:1px solid var(--sd-keyline-subtle); border-radius:999px; color:var(--sd-text-2); font-size:10px; padding:3px 10px; } [data-ui="sd"] .sds-intents{ border-block-start:1px solid var(--sd-keyline); } [data-ui="sd"] .sds-int{ inline-size:100%; display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:8px; min-block-size:46px; background:none; border:0; border-block-end:1px solid var(--sd-keyline-subtle); text-align:start; color:var(--sd-text); font-size:12.5px; cursor:pointer; } [data-ui="sd"] .sds-int > span.num{ font-size:9px; color:var(--sd-text-3); } [data-ui="sd"] .sds-int b{ font-weight:600; } [data-ui="sd"] .sds-int.on b, [data-ui="sd"] .sds-int.on > span.num{ color:var(--sd-signal); } [data-ui="sd"] .sds-group{ margin-block-start:4px; } /* SD-6b: Matrix-Kacheln — 3 Spalten, Thumb oben (16:9-Box, 9:16-Poster contain-zentriert) */ [data-ui="sd"] .sds-tgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding-block:4px 8px; } [data-ui="sd"] .sds-tile{ display:grid; gap:4px; align-content:start; padding:0 0 7px; background:var(--sd-surface); border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); overflow:hidden; text-align:start; color:var(--sd-text); cursor:pointer; } [data-ui="sd"] .sds-tile.on{ border-color:var(--sd-signal); box-shadow:inset 0 0 0 1px var(--sd-signal); } [data-ui="sd"] .sds-tile.locked{ opacity:.45; cursor:default; } [data-ui="sd"] .sds-thumb{ inline-size:100%; aspect-ratio:16/9; border:0; border-block-end:1px solid var(--sd-keyline-subtle); overflow:hidden; background:var(--sd-canvas); display:grid; place-items:center; color:var(--sd-text-3); font-size:10px; } [data-ui="sd"] .sds-thumb.skel{ animation:sdskel 1.1s linear infinite alternate; } @keyframes sdskel{ from{ opacity:.45 } to{ opacity:.9 } } @media (prefers-reduced-motion: reduce){ [data-ui="sd"] .sds-thumb.skel{ animation:none; } } [data-ui="sd"] .sds-tnm{ font-size:10.5px; font-weight:600; line-height:1.25; padding-inline:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-block-size:2.5em; } [data-ui="sd"] .sds-tile.on .sds-tnm{ color:var(--sd-signal); } [data-ui="sd"] .sds-tft{ font-size:8.5px; color:var(--sd-text-3); letter-spacing:.06em; padding-inline:8px; } [data-ui="sd"] .sds-tft em{ color:#f1c45a; font-style:normal; } /* Studio-Favoriten (2026-08-12): Stern an der Kachel + Favoriten-Zeile über den Absichten. */ [data-ui="sd"] .sds-cell{ position:relative; display:block; min-inline-size:0; } [data-ui="sd"] .sds-cell .sds-tile{ inline-size:100%; } [data-ui="sd"] .sds-fav{ position:absolute; inset-block-start:2px; inset-inline-end:2px; z-index:2; inline-size:30px; block-size:30px; display:grid; place-items:center; padding:0; background:color-mix(in srgb, var(--sd-canvas) 78%, transparent); border:0; border-radius:6px; color:var(--sd-text-3); font-size:15px; line-height:1; cursor:pointer; } [data-ui="sd"] .sds-fav.on{ color:var(--sd-signal); } [data-ui="sd"] .sds-favh .num{ color:var(--sd-text-3); } [data-ui="sd"] .sds-favrow{ display:flex; flex-wrap:wrap; gap:8px; padding-block:4px 8px; } [data-ui="sd"] .sds-favchip{ display:inline-flex; align-items:center; gap:7px; padding:9px 12px; background:var(--sd-surface); border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); color:var(--sd-text); font:inherit; font-size:13px; font-weight:620; cursor:pointer; } [data-ui="sd"] .sds-favchip span{ color:var(--sd-signal); font-size:12px; } [data-ui="sd"] .sds-favchip.on{ border-color:var(--sd-signal); box-shadow:inset 0 0 0 1px var(--sd-signal); } /* Portfolio-Import-Karte im sd-Kanon (2026-08-12): das per „Import öffnen" ausgefahrene Menü trug noch das alte Seiten-Design — Flächen/Keylines/Mono-Labels/16px-Inputs statt Legacy-Card. */ [data-ui="sd"] #pfImportCard{ background:var(--sd-surface); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); box-shadow:none; padding:14px; margin-block-end:0; } [data-ui="sd"] #pfImportCard .seg{ display:flex; gap:6px; background:none; border:0; padding:0; } [data-ui="sd"] #pfImportCard .seg button{ flex:1; padding:10px 8px; background:var(--sd-canvas); border:1px solid var(--sd-keyline-subtle); border-radius:6px; color:var(--sd-text-2); font:inherit; font-size:12.5px; font-weight:620; letter-spacing:.02em; cursor:pointer; } [data-ui="sd"] #pfImportCard .seg button.active{ color:var(--sd-text); border-color:var(--sd-signal); box-shadow:inset 0 0 0 1px var(--sd-signal); } [data-ui="sd"] #pfImportCard label{ display:block; margin-block:12px 6px; font-family:var(--sd-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sd-text-3); } [data-ui="sd"] #pfImportCard input, [data-ui="sd"] #pfImportCard textarea{ inline-size:100%; box-sizing:border-box; background:var(--sd-canvas); border:1px solid var(--sd-keyline); border-radius:6px; color:var(--sd-text); font-family:var(--sd-mono); font-size:16px; padding:11px 12px; } [data-ui="sd"] #pfImportCard input:focus, [data-ui="sd"] #pfImportCard textarea:focus{ outline:none; border-color:var(--sd-text-3); } [data-ui="sd"] #pfImportCard input[type="file"]{ padding:9px 10px; font-size:12.5px; } [data-ui="sd"] #pfImportCard .set-hint{ display:block; margin-block-start:6px; font-size:11.5px; line-height:1.5; color:var(--sd-text-3); } [data-ui="sd"] #pfImportCard .btn.primary{ background:var(--sd-text); color:var(--sd-canvas); border:0; border-radius:6px; padding:12px 18px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; } [data-ui="sd"] .sds-gate{ border:1px solid color-mix(in srgb, var(--sd-signal) 40%, var(--sd-keyline)); border-radius:var(--sd-r); background:color-mix(in srgb, var(--sd-signal) 6%, var(--sd-surface)); padding:12px 13px; margin-block-start:12px; } [data-ui="sd"] .sds-gate b{ display:block; font-size:13.5px; margin-block-start:6px; } [data-ui="sd"] .sds-gate p{ margin:4px 0 10px; font-size:11.5px; color:var(--sd-text-2); line-height:1.45; } [data-ui="sd"] .sds-cta{ background:var(--sd-signal); color:#0a0c0a; border:0; border-radius:var(--sd-r); font-weight:700; font-size:12.5px; padding:10px 14px; cursor:pointer; } [data-ui="sd"] .sds-foot{ padding-block:12px; display:block; } [data-ui="sd"] .sds-ovl{ position:fixed; inset:0; z-index:70; background:rgba(4,6,4,.6); border:0; } [data-ui="sd"] .sds-sheet{ position:fixed; inset-inline:0; inset-block-end:0; z-index:71; background:var(--sd-canvas); border-block-start:1px solid var(--sd-keyline); border-radius:12px 12px 0 0; padding:8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); max-block-size:46vh; display:flex; flex-direction:column; } /* SD-9a: kompakter, Vorschau-Dock darüber */ [data-ui="sd"] .sds-sheet .grab{ inline-size:36px; block-size:4px; border-radius:2px; background:var(--sd-keyline); margin:0 auto 8px; } [data-ui="sd"] .sds-shead{ display:flex; justify-content:space-between; align-items:center; margin-block-end:6px; } [data-ui="sd"] .sds-shead b{ font-size:14px; } [data-ui="sd"] .sds-sbody{ overflow-y:auto; min-block-size:0; } [data-ui="sd"] .sds-sbody .creator-controls, [data-ui="sd"] .sds-sbody .caption-opts, [data-ui="sd"] .sds-sbody .live-opts{ display:block !important; margin-block-end:10px; } [data-ui="sd"] .sds-sbody .caption-opts[hidden], [data-ui="sd"] .sds-sbody .live-opts[hidden]{ display:none !important; } /* SD-6c: Legacy-Panels im Signal-Desk-Satz (Inline-Styles gezielt überschrieben) */ [data-ui="sd"] .sds-sbody .caption-opts, [data-ui="sd"] .sds-sbody .live-opts{ background:var(--sd-canvas) !important; border:0 !important; border-block-start:1px solid var(--sd-keyline) !important; border-radius:0 !important; padding:12px 0 !important; margin:0 0 2px !important; } [data-ui="sd"] .sds-sbody .creator-controls{ display:grid !important; gap:12px; border-block-start:1px solid var(--sd-keyline); padding-block-start:12px; background:none; border-radius:0; } [data-ui="sd"] .sds-sbody .cc-label{ font-family:var(--sd-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sd-text-3); } [data-ui="sd"] .sds-sbody .cc-group{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; } [data-ui="sd"] .sds-sbody .cc-seg{ display:flex; border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); overflow:hidden; background:var(--sd-surface); box-shadow:none; } [data-ui="sd"] .sds-sbody .cc-seg button{ background:none; border:0; border-inline-start:1px solid var(--sd-keyline-subtle); color:var(--sd-text-3); font:600 11px var(--sd-mono); padding:8px 12px; min-block-size:36px; border-radius:0; box-shadow:none; } [data-ui="sd"] .sds-sbody .cc-seg button:first-child{ border-inline-start:0; } [data-ui="sd"] .sds-sbody .cc-seg button[aria-pressed="true"], [data-ui="sd"] .sds-sbody .cc-seg button.on{ background:var(--sd-surface-2); color:var(--sd-text); } [data-ui="sd"] .sds-sbody .cc-toggles{ display:flex; flex-wrap:wrap; gap:8px; } [data-ui="sd"] .sds-sbody .cc-toggle{ background:var(--sd-surface); border:1px solid var(--sd-keyline-subtle); border-radius:999px; color:var(--sd-text-3); font-size:11.5px; font-weight:600; padding:8px 13px; min-block-size:36px; box-shadow:none; } [data-ui="sd"] .sds-sbody .cc-toggle[aria-pressed="true"]{ border-color:var(--sd-signal); color:var(--sd-text); } [data-ui="sd"] .sds-sbody .cc-locked{ opacity:.5; } [data-ui="sd"] .sds-sbody .field label{ display:block; font-family:var(--sd-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sd-text-3); margin-block-end:5px; } [data-ui="sd"] .sds-sbody .field input{ inline-size:100%; box-sizing:border-box; background:var(--sd-surface); border:1px solid var(--sd-keyline-subtle); border-radius:var(--sd-r); color:var(--sd-text); font-size:16px; padding:10px 11px; box-shadow:none; } /* SD-9a: >=16px = kein iOS-Auto-Zoom */ [data-ui="sd"] .sds-sbody .muted{ color:var(--sd-text-3) !important; font-size:11px !important; } /* Export-Leiste + Caption-Generator in der Bühne: Signal-Desk-Satz statt Alt-Buttons */ [data-ui="sd"] .sds-stage .preview-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 16px; border-block-start:1px solid var(--sd-keyline-subtle); background:var(--sd-canvas); } [data-ui="sd"] .sds-stage .preview-controls .muted{ flex:1 1 100%; font-family:var(--sd-mono) !important; font-size:9px !important; font-weight:600 !important; letter-spacing:.08em; text-transform:uppercase; color:var(--sd-text-3) !important; } [data-ui="sd"] .sds-stage .preview-controls .btn{ flex:1 1 auto; min-block-size:44px; border-radius:var(--sd-r); font-size:13px; font-weight:700; border:1px solid var(--sd-keyline); background:var(--sd-surface); color:var(--sd-text); box-shadow:none; padding:0 14px; } [data-ui="sd"] .sds-stage .preview-controls .btn.primary{ background:var(--sd-signal); border-color:var(--sd-signal); color:#0a0c0a; } [data-ui="sd"] .sds-stage .preview-controls .btn.ghost, [data-ui="sd"] .sds-stage .preview-controls .btn.sm{ background:var(--sd-surface); color:var(--sd-text-2); } [data-ui="sd"] .sds-stage .post-card{ background:var(--sd-surface) !important; border:1px solid var(--sd-keyline-subtle) !important; border-radius:var(--sd-r) !important; box-shadow:none !important; margin-block-end:8px; } [data-ui="sd"] .sds-stage .post-card textarea, [data-ui="sd"] .sds-stage .post-card pre{ background:var(--sd-canvas) !important; color:var(--sd-text-2) !important; border-color:var(--sd-keyline-subtle) !important; } [data-ui="sd"] .sds-stage .post-card .btn{ min-block-size:36px; border-radius:var(--sd-r); font-size:12px; border:1px solid var(--sd-keyline); background:var(--sd-surface-2); color:var(--sd-text); box-shadow:none; } /* SD-9a: Live-Vorschau-Dock — während das Options-Sheet offen ist, steht die Vorschau GROSS, vollständig und mittig darüber (ungedimmt); das Overlay ist nur noch unsichtbare Schließfläche. */ [data-ui="sd"] .sds-ovl.sds-ovl-clear{ background:transparent; } [data-ui="sd"] .sds-dock{ position:fixed; inset-inline:0; inset-block-start:calc(8px + env(safe-area-inset-top, 0px)); inset-block-end:46vh; z-index:72; display:grid; place-items:center; padding:10px 12px; pointer-events:none; } [data-ui="sd"] .sds-dock #previewArea{ pointer-events:auto; inline-size:100%; max-inline-size:560px; max-block-size:100%; overflow:hidden auto; background:var(--sd-canvas); border:1px solid var(--sd-keyline); border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,.55); } [data-ui="sd"] .sds-dock #previewArea canvas{ inline-size:100% !important; block-size:auto !important; } [data-ui="sd"] .sds-dock #postsArea{ display:none; } /* im Dock zählt nur die Grafik */ /* Fix 2026-08-12: Export-/Meta-Zeile (Maße · Share to X · Save) gehört nicht in die Live-Vorschau — Export läuft über die Studio-Buttons; im Dock zählt ausschließlich die Grafik. */ [data-ui="sd"] .sds-dock .preview-controls, [data-ui="sd"] .sds-dock #previewArea .set-field{ display:none; } /* Fixpack 3 (2026-08-12): Legacy-Reste + Logos in den Listen. */ /* Die alte Creator-Eingabekarte (crA/crB/Picker) ist im sd komplett ersetzt — ihre Kinder waren schon versteckt, die leere Kartenhülle blieb als Geister-Pill unter dem Studio-Disclaimer. */ [data-ui="sd"] [data-pane="creator"] > .card{ display:none !important; } /* GPT-Review W-E: die alte Theme-/Sprach-/Options-Leiste leckte ab 721px unter das SD-Studio — im Pane immer aus; sichtbar sind diese Knoten NUR im Produktionsdetails-Panel (DOM-Move). */ [data-ui="sd"] [data-pane="creator"] :is(#creatorControls,#verdictOpts,#captionOpts,#liveOpts,#pfSnapOpts,#positionOpts,#pfHeatOpts){ display:none !important; } /* Video-End-Caption im sd-Kanon: Mono-Eyebrow-Label + Flächen-Input (16px gegen iOS-Zoom). */ [data-ui="sd"] #previewArea .set-field{ display:grid; gap:6px; margin:10px 0 16px; max-inline-size:none; padding:0; background:none; border:0; } [data-ui="sd"] #previewArea .set-field > span{ font-family:var(--sd-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sd-text-3); } [data-ui="sd"] #previewArea .set-field input{ inline-size:100%; box-sizing:border-box; background:var(--sd-canvas); border:1px solid var(--sd-keyline); border-radius:6px; color:var(--sd-text); font-family:var(--sd-mono); font-size:16px; padding:11px 12px; } [data-ui="sd"] #previewArea .set-field input:focus{ outline:none; border-color:var(--sd-text-3); } /* Ticker-Logos (Peers-Muster) in Desk-Signalen, Ranking, Portfolio-Positionen, Briefing- und Analyse-Kopf. */ [data-ui="sd"] .sd-lgo{ inline-size:20px; block-size:20px; border-radius:5px; object-fit:contain; flex:0 0 auto; background:color-mix(in srgb, var(--sd-text) 8%, transparent); } [data-ui="sd"] .sd-lgo.lg{ inline-size:28px; block-size:28px; border-radius:6px; } [data-ui="sd"] .sd-idt{ display:grid; gap:2px; min-inline-size:0; } [data-ui="sd"] .sdd-sigrow > span:first-child{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-inline-size:0; } [data-ui="sd"] .sd-rkid{ display:flex; align-items:center; gap:9px; } [data-ui="sd"] .sd-pfid{ display:flex; align-items:center; gap:9px; } [data-ui="sd"] .sda-id.sd-haslgo{ display:flex; align-items:center; gap:10px; min-inline-size:0; } [data-ui="sd"] .sda-id.sd-haslgo .sda-name{ margin-block-start:0; } /* ============================================================ W-D „ALWAYS-SD" (2026-08-12): der Signal-Desk-Kanon gilt auf allen Breiten. Teil 1 — Settings-Modal im sd-Kanon (größte Basis-Lücke, gilt auch mobil). Teil 2 — Desktop-Schicht ≥1025px: Top-Nav, zentrierte Spalten, Dialog-Suche, Options-Seitenpanel, 2-Spalten-Desk/-Studio, Hover-/Fokus-Kanon. ============================================================ */ [data-ui="sd"] .modal-overlay{ background:rgba(4,6,4,.66); } [data-ui="sd"] .modal{ background:var(--sd-canvas); border:1px solid var(--sd-keyline); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.55); } [data-ui="sd"] .modal-head{ border-block-end:1px solid var(--sd-keyline); } [data-ui="sd"] .modal-head h2{ font-family:var(--sd-ui); font-size:16px; font-weight:660; letter-spacing:-.02em; } [data-ui="sd"] .modal .set-label{ font-family:var(--sd-mono); font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--sd-text-3); } [data-ui="sd"] .modal .set-hint{ color:var(--sd-text-2); } [data-ui="sd"] .modal .btn{ border-radius:var(--sd-r); box-shadow:none; text-shadow:none; } [data-ui="sd"] .modal .btn.primary{ background:var(--sd-signal); border:1px solid var(--sd-signal); color:var(--sd-canvas); } [data-ui="sd"] .modal .btn.ghost{ background:var(--sd-surface); border:1px solid var(--sd-keyline); color:var(--sd-text); } [data-ui="sd"] .modal input, [data-ui="sd"] .modal select, [data-ui="sd"] .modal textarea{ background:var(--sd-surface); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); color:var(--sd-text); box-shadow:none; } [data-ui="sd"] .modal .plan-badge{ border-radius:4px; font-family:var(--sd-mono); letter-spacing:.04em; } [data-ui="sd"] .modal .icon-btn{ background:var(--sd-surface); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); color:var(--sd-text-2); box-shadow:none; } /* Nutzer-Feedback 2026-08-12: Settings KOMPAKT — passt ohne Scrollen; Alt-Flächen (Navy-Karten, Grün-Pills) raus, alles auf sd-Flächen/Keylines/Mono. */ [data-ui="sd"] .modal-body.set-compact{ padding:2px 16px 6px; gap:12px; } [data-ui="sd"] .modal-head{ padding:14px 16px 10px; } [data-ui="sd"] .modal-head h2{ font-size:15px; } [data-ui="sd"] .set-compact .settings-account{ background:var(--sd-surface); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); padding:9px 12px; gap:8px; } [data-ui="sd"] .set-compact .settings-account strong{ font-size:12.5px; font-weight:650; } [data-ui="sd"] .modal .plan-badge{ background:none; border:1px solid var(--sd-signal); color:var(--sd-signal); font-family:var(--sd-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:3px; } [data-ui="sd"] .set-compact .set-billing{ border-top:1px solid var(--sd-keyline-subtle); padding-top:10px; gap:6px; } [data-ui="sd"] .set-row2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } [data-ui="sd"] .set-row2 .btn{ margin:0; } [data-ui="sd"] .modal .btn.sm{ min-block-size:34px; padding:6px 11px; font-size:12px; } [data-ui="sd"] .set-compact .set-etoro{ border-top:1px solid var(--sd-keyline-subtle); padding-top:10px; margin:0; } [data-ui="sd"] .set-compact .set-field{ gap:5px; } [data-ui="sd"] .set-compact .set-field > span{ font-size:12px; } [data-ui="sd"] .set-sub{ color:var(--sd-text-3); font-weight:500; } [data-ui="sd"] .set-compact .set-hint{ font-size:11px; line-height:1.4; margin:2px 0 0; color:var(--sd-text-3); } [data-ui="sd"] .set-compact input{ min-block-size:38px; font-size:16px; } /* 16px = kein iOS-Zoom */ [data-ui="sd"] .set-compact .set-presets{ border-top:1px solid var(--sd-keyline-subtle); padding-top:10px; gap:7px; } [data-ui="sd"] .preset-wrap{ display:flex; flex-direction:column; gap:7px; } [data-ui="sd"] .set-compact .preset-line > span{ font-size:12px; } /* Globaler Toast (46 Aufrufstellen, im sd sichtbar) trug noch das Alt-Design: invertierte weiße Pille + grüner Fortschritt — und saß bei bottom:20px HINTER der Bottom-Nav. Jetzt Kanon-Fläche über der Navigation; auf Desktop unten rechts wie der sd-eigene Toast. */ [data-ui="sd"] .toast{ background:var(--sd-surface-2); color:var(--sd-text); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); box-shadow:none; font:600 12.5px var(--sd-ui); letter-spacing:-.01em; padding:12px 16px; inset-block-end:calc(86px + env(safe-area-inset-bottom, 0px)); } [data-ui="sd"] .toast.show::after{ background:var(--sd-signal); } [data-ui="sd"] .ms-grab{ border-radius:2px; background:var(--sd-keyline); } @media (min-width:1025px){ [data-ui="sd"] .toast{ left:auto; right:24px; inset-block-end:24px; transform:translateY(16px); } [data-ui="sd"] .toast.show{ transform:none; } } [data-ui="sd"] .modal .seg{ background:none; border:0; padding:0; gap:6px; } [data-ui="sd"] .modal .seg button{ background:var(--sd-canvas); border:1px solid var(--sd-keyline-subtle); border-radius:6px; color:var(--sd-text-2); font-family:var(--sd-ui); font-weight:620; letter-spacing:.02em; } [data-ui="sd"] .modal .seg button.active{ background:var(--sd-surface-2); color:var(--sd-text); border-color:var(--sd-signal); box-shadow:inset 0 0 0 1px var(--sd-signal); } [data-ui="sd"] .set-compact .seg button{ min-block-size:32px; padding:5px 11px; font-size:12px; } [data-ui="sd"] .modal-foot{ padding:10px 16px 14px; border-top:1px solid var(--sd-keyline-subtle); display:flex; align-items:center; gap:8px; } [data-ui="sd"] .set-delete{ background:none; border:0; padding:6px 0; cursor:pointer; color:var(--sd-negative); font-size:11.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; } /* Topbar: Quota-Pill + User-Chip aus dem Alt-Look in den Kanon (Nutzer-Screenshot) */ [data-ui="sd"] .quota-pill{ background:var(--sd-surface); border:1px solid var(--sd-keyline); border-radius:var(--sd-r); font-family:var(--sd-mono); font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--sd-text-2); padding:5px 9px; } [data-ui="sd"] .user-chip .avatar{ inline-size:30px; block-size:30px; border-radius:6px; border:1px solid var(--sd-keyline); overflow:hidden; } [data-ui="sd"] .user-chip .avatar img{ inline-size:100%; block-size:100%; object-fit:cover; } [data-ui="sd"] .user-meta strong{ font-size:12px; font-weight:650; } [data-ui="sd"] .user-meta > span{ font-size:10.5px; color:var(--sd-text-3); } [data-ui="sd"] .user-chip .plan-badge{ background:none; border:1px solid var(--sd-signal); color:var(--sd-signal); font-family:var(--sd-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; padding:1px 5px; border-radius:3px; } @media (min-width:1025px){ /* (1) Grundgerüst: Bottom-Nav-Puffer weg, Inhalte als zentrierte Lese-Spalte */ body[data-ui="sd"]{ padding-bottom:32px; } [data-ui="sd"] .tab-pane{ inline-size:100%; max-inline-size:860px; margin-inline:auto; } [data-ui="sd"] .tab-pane[data-pane="radar"], [data-ui="sd"] .tab-pane[data-pane="creator"]{ max-inline-size:1200px; } [data-ui="sd"] .topbar{ padding-inline:24px; } /* bleibt sticky (Basis) — Tabs sind Teil des Headers */ /* (2) Tabs: Bottom-Nav → sticky Top-Leiste; Briefing/Ranking direkt, „Mehr" entfällt (Einstellungen erreicht der Desktop über den User-Chip in der Topbar). */ [data-ui="sd"] .tabs{ position:static; inset:auto; bottom:auto; display:flex; justify-content:center; gap:4px; padding:8px 16px; border-block-start:0; border-block-end:1px solid var(--sd-keyline); } [data-ui="sd"] .tabs button{ display:flex; align-items:center; gap:8px; padding:8px 14px; min-block-size:40px; border-radius:6px; font-size:13px; font-weight:600; } [data-ui="sd"] .tabs button[aria-pressed="true"]{ background:var(--sd-surface-2); color:var(--sd-text); } [data-ui="sd"] .tabs button[aria-pressed="true"]::before{ display:none; } [data-ui="sd"] .tabs button[data-tab="briefing"], [data-ui="sd"] .tabs button[data-tab="ranking"]{ display:flex; } [data-ui="sd"] #moreTab{ display:none; } [data-ui="sd"] .tab-ic{ width:16px; height:16px; } [data-ui="sd"] #sdSearchTab{ min-block-size:40px; padding:0 4px; } [data-ui="sd"] #sdSearchTab .tab-ic{ padding:8px; } [data-ui="sd"] #sdSearchTab::after{ display:none; } /* (3) Such-Sheet → zentrierter Dialog; Trefferliste in normaler Leserichtung. transform:none schlägt sdKbAdjust (Tastatur-Lift ist Mobile-Logik). */ [data-ui="sd"] .sd-sheet{ inset-inline:0; inset-block-start:9vh; inset-block-end:auto; margin-inline:auto; inline-size:min(560px, 92vw); transform:none !important; border:1px solid var(--sd-keyline); border-radius:12px; max-block-size:72vh; padding:14px 16px 16px; box-shadow:0 18px 50px rgba(0,0,0,.55); } [data-ui="sd"] .kx-list{ order:0; flex-direction:column; margin-block:8px 0; max-block-size:46vh; } /* (4) Studio-Produktionsdetails: Bottom-Sheet → rechtes Seitenpanel; die Vorschau bleibt in der sticky Bühne (JS überspringt den Dock-Move auf Desktop). */ [data-ui="sd"] .sds-sheet{ inset-block:0; inset-inline-end:0; inset-inline-start:auto; inline-size:min(400px, 92vw); max-block-size:none; border-radius:0; border-inline-start:1px solid var(--sd-keyline); border-block-start:0; padding:16px 18px 18px; box-shadow:-14px 0 40px rgba(0,0,0,.4); } /* GPT-Review W-E: offenes Panel reserviert Layoutplatz — die Live-Vorschau bleibt VOLL sichtbar */ body[data-ui="sd"].sds-open [data-pane="creator"]{ padding-inline-end:416px; } body[data-ui="sd"].sds-open #sdStudio{ grid-template-columns:minmax(0,1fr) minmax(240px, 420px); } body[data-ui="sd"].sds-open .sds-tgrid{ grid-template-columns:repeat(3, 1fr); } /* R2-Review R1: 1025–1200px nicht quetschen */ [data-ui="sd"] .sds-sheet .grab{ display:none; } [data-ui="sd"] .sds-ovl.sds-ovl-clear{ background:rgba(4,6,4,.28); } /* (5) Desk 2-spaltig: Kopf + Heatmap volle Breite, Module fließen in zwei Spalten */ [data-ui="sd"] #sdDesk{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 36px; align-items:start; padding-inline:20px; } [data-ui="sd"] #sdDesk > .sdd-head{ grid-column:1 / -1; } [data-ui="sd"] #sdDesk > .sdd-mod:first-of-type{ grid-column:1 / -1; } [data-ui="sd"] #sdDesk > footer{ grid-column:1 / -1; } /* GPT-Review W-E: nie in der Halbspalte */ /* (6) Studio 2-spaltig: Bühne sticky rechts, Auswahl/Chips links; Vorlagen-Grid 4-spaltig */ [data-ui="sd"] #sdStudio{ display:grid; grid-template-columns:minmax(0,1fr) minmax(420px, 500px); gap:0 36px; align-items:start; } [data-ui="sd"] #sdStudio > .sda-head, [data-ui="sd"] #sdStudio > .sd-live{ grid-column:1 / -1; } [data-ui="sd"] #sdStudio > .sds-stage{ grid-column:2; grid-row:3 / span 40; align-self:start; position:sticky; inset-block-start:68px; margin-inline:0; border:1px solid var(--sd-keyline); border-radius:8px; min-block-size:0; } /* GPT-Review W-E: 60vw/120vw-Minima sind Mobile-Logik */ [data-ui="sd"] #sdStudio > .sds-stage[data-fmt="916"]{ max-inline-size:min(100%, 46vh); justify-self:start; } [data-ui="sd"] #sdStudio > *:not(.sda-head):not(.sd-live):not(.sds-stage){ grid-column:1; } [data-ui="sd"] .sds-tgrid{ grid-template-columns:repeat(4, 1fr); } /* (7) Toast unten rechts statt über der (nicht mehr vorhandenen) Bottom-Nav */ [data-ui="sd"] #sdToast{ left:auto; right:24px; bottom:24px; inline-size:auto; max-inline-size:380px; } } /* (8) Hover- und Fokus-Kanon: sichtbare Zustände für Zeiger- und Tastatur-Bedienung */ @media (hover:hover){ [data-ui="sd"] .tabs button:hover, [data-ui="sd"] .sd-chip:hover, [data-ui="sd"] .kxq:hover, [data-ui="sd"] .sds-cell:hover, [data-ui="sd"] .sds-favchip:hover, [data-ui="sd"] .sds-tbtn:hover, [data-ui="sd"] .sds-obtn:hover, [data-ui="sd"] .sd-iconbtn:hover, [data-ui="sd"] .sd-rkchip:hover, [data-ui="sd"] button.sd-row:hover, [data-ui="sd"] .sd-rangerow button:hover, [data-ui="sd"] .sdd-chips .sd-chip:hover{ background:var(--sd-surface-2); } [data-ui="sd"] .kx-opt:hover{ background:var(--sd-surface-2); } } [data-ui="sd"] :is(button, a, input, select, textarea, summary):focus-visible{ outline:2px solid var(--sd-signal); outline-offset:2px; } /* SD-9a: Ranking im Kanon + Peers-Chips + Legacy-Ranking im sd-Scope aus */ [data-ui="sd"] [data-pane="ranking"] > .card, [data-ui="sd"] #rankView .rank-table, [data-ui="sd"] #rankView .rk-cards, [data-ui="sd"] #rankView > .card.glow > .rank-table{ display:none !important; } [data-ui="sd"] #rankView{ background:none; border:0; padding:0; } [data-ui="sd"] .sd-rkchips{ border-block-start:1px solid var(--sd-keyline); } [data-ui="sd"] .sd-rkchip b{ font-size:12.5px; } [data-ui="sd"] .sd-rkchip.on b{ color:var(--sd-signal); } [data-ui="sd"] .sd-rkrow > summary{ display:grid; grid-template-columns:26px 1fr auto auto 14px; gap:10px; align-items:center; min-block-size:56px; } [data-ui="sd"] .sd-rkrank{ font-size:11px; color:var(--sd-text-3); } [data-ui="sd"] .sd-rkid{ min-inline-size:0; } [data-ui="sd"] .sd-rkid b{ font-size:13.5px; } [data-ui="sd"] .sd-rkid small{ display:block; font-size:10.5px; color:var(--sd-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-ui="sd"] .sd-rkbadge{ font-family:var(--sd-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--sd-keyline-subtle); border-radius:3px; padding:3px 7px; color:var(--sd-text-2); } [data-ui="sd"] .sd-rkbadge.positive{ color:var(--sd-positive); border-color:color-mix(in srgb, var(--sd-positive) 45%, var(--sd-keyline-subtle)); } [data-ui="sd"] .sd-rkbadge.warning{ color:var(--sd-warning); border-color:color-mix(in srgb, var(--sd-warning) 45%, var(--sd-keyline-subtle)); } [data-ui="sd"] .sd-rkbadge.negative{ color:var(--sd-negative); border-color:color-mix(in srgb, var(--sd-negative) 45%, var(--sd-keyline-subtle)); } [data-ui="sd"] .sd-peerrow{ display:flex; flex-wrap:wrap; gap:8px; } [data-ui="sd"] .sd-peer{ display:inline-flex; align-items:center; gap:7px; min-block-size:40px; padding:0 12px; border:1px solid var(--sd-keyline-subtle); border-radius:999px; background:var(--sd-surface); color:var(--sd-text); font-size:12.5px; font-weight:600; cursor:pointer; } [data-ui="sd"] .sd-peer img{ inline-size:18px; block-size:18px; border-radius:4px; object-fit:cover; background:var(--sd-surface-2); } /* Free-Modus-Banner + Trinkgeld (2026-09-05) — sd-Kanon: Hairline, Mono-Uppercase, EIN Signal-Akzent */ [data-ui="sd"] .free-banner{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 12px; padding:9px 12px; border:1px solid var(--sd-keyline-subtle); background:var(--sd-surface); color:var(--sd-text-2); font:600 10.5px var(--sd-mono); letter-spacing:.06em; text-transform:uppercase; } [data-ui="sd"] .free-banner > span{ flex:1 1 240px; min-inline-size:0; } [data-ui="sd"] .free-banner b{ color:var(--sd-signal); font-weight:700; margin-inline-end:8px; } [data-ui="sd"] .free-banner .fb-tip{ min-block-size:30px; padding:0 10px; border:1px solid var(--sd-keyline); background:var(--sd-canvas); color:var(--sd-text); font:600 10.5px var(--sd-mono); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; } [data-ui="sd"] .free-banner .fb-x{ min-inline-size:30px; min-block-size:30px; border:0; background:none; color:var(--sd-text-3); font-size:18px; line-height:1; cursor:pointer; } [data-ui="sd"] .tip-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } [data-ui="sd"] .tip-row .set-label{ margin-inline-end:4px; } [data-ui="sd"] .tip-row .tip-custom{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; } [data-ui="sd"] .tip-row .tip-custom input{ inline-size:72px; min-block-size:32px; padding:0 8px; border:1px solid var(--sd-keyline); border-radius:4px; background:var(--sd-canvas); color:var(--sd-text); font:600 13px var(--sd-mono); text-align:end; } [data-ui="sd"] .tip-row .tip-cur{ color:var(--sd-text-3); font:600 12px var(--sd-mono); }