/* Vertriebs-Assistent — mobil-first PWA. Design: Sun-Garden-Wortmarke: helles Markengrün + Graphit, viel Weißraum, klare Typo. Warnfarben bleiben semantisch. Kein Build, keine externen Fonts/Assets (CSP-konform). Light + Dark, dezente Bewegung, sichtbarer Fokus. */ :root { --brand-lime: #80BA26; --brand-graphite: #646363; --brand-lime-soft: #EEF6DF; --focus: #527A11; --on-action: #FFFFFF; --leaf: #527A11; --leaf-600: #3F5F0D; --sun: #F2A65A; /* warmer Sonnen-Akzent, sparsam */ --sun-soft: #FBE7C6; --paper: #F5F6F3; --card: #FFFFFF; --ink: #303231; --muted: #646363; --rand: #DFE3DA; --user-bg: linear-gradient(135deg, #686B69, #4E514F); --shadow: 0 1px 2px rgba(49,52,50,.05), 0 8px 24px rgba(49,52,50,.06); --radius: 18px; /* Diagramm-Serien (Validator-geprüft auf Weiß: CVD-unterscheidbar, >=3:1). Marke führt. */ --c1: #1E6B3C; --c2: #B08114; --c3: #2E6FB0; --c4: #739F15; --c5: #A3441F; --c6: #7C4292; --c-other: #6E7D72; --neg: #B3261E; --vorplan: #F7DE93; --vorplan-line: #C99A2E; /* Vorplanbedarf: leichtes Gelb statt Schraffur */ /* Aufräumaktion — konsistente Skalen (4er-Raster, 3 Radien, 6 Typo-Stufen) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .95rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.55rem; } @media (prefers-color-scheme: dark) { :root { --brand-lime:#80BA26; --brand-graphite:#DDE0DB; --brand-lime-soft:#27351A; --focus:#A8D85A; --on-action:#0F1712; --leaf: #A8D85A; --leaf-600: #80BA26; --sun: #F2A65A; --sun-soft: #3a3320; --paper: #0F1712; --card: #16211B; --ink: #E7EEE8; --muted: #93A399; --rand: #26332B; --user-bg: linear-gradient(135deg, #2E7D57, #24623F); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); /* Diagramm-Serien, geprüft auf Karten-Dunkel #16211B */ --c1: #2E8A50; --c2: #BD8814; --c3: #5B8FD9; --c4: #74A21E; --c5: #B45227; --c6: #A578D4; --c-other: #7E8F84; --neg: #F2555A; --vorplan: #C7B057; --vorplan-line: #E4D081; } } /* ===== Wählbare Gesamt-Looks (Peter: 6 Varianten, gespeichert). data-look auf . ===== „auto" (kein Attribut) = folgt dem Betriebssystem (Standard oben). Jeder Look setzt ALLE Tokens explizit, damit er unabhängig vom OS-Hell/Dunkel wirkt. Spezifität html[data-look] (0,1,1) schlägt :root (0,1,0), auch die Dark-@media-Regel. */ html[data-look="hell"] { --brand-lime:#80BA26; --brand-graphite:#646363; --brand-lime-soft:#EEF6DF; --focus:#527A11; --on-action:#FFFFFF; --leaf:#527A11; --leaf-600:#3F5F0D; --sun:#F2A65A; --sun-soft:#FBE7C6; --paper:#F5F6F3; --card:#FFFFFF; --ink:#303231; --muted:#646363; --rand:#DFE3DA; --user-bg:linear-gradient(135deg,#686B69,#4E514F); --shadow:0 1px 2px rgba(49,52,50,.05),0 8px 24px rgba(49,52,50,.06); --c1:#1E6B3C; --c2:#B08114; --c3:#2E6FB0; --c4:#739F15; --c5:#A3441F; --c6:#7C4292; --c-other:#6E7D72; --neg:#B3261E; } html[data-look="dunkel"] { --brand-lime:#80BA26; --brand-graphite:#DDE0DB; --brand-lime-soft:#27351A; --focus:#A8D85A; --on-action:#0F1712; --leaf:#A8D85A; --leaf-600:#80BA26; --sun:#F2A65A; --sun-soft:#3a3320; --paper:#0F1712; --card:#16211B; --ink:#E7EEE8; --muted:#93A399; --rand:#26332B; --user-bg:linear-gradient(135deg,#2E7D57,#24623F); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --c1:#2E8A50; --c2:#BD8814; --c3:#5B8FD9; --c4:#74A21E; --c5:#B45227; --c6:#A578D4; --c-other:#7E8F84; --neg:#F2555A; } html[data-look="nacht"] { /* kühle blaue Farbwelt, dunkel */ --brand-lime:#80BA26; --brand-graphite:#DDE0DB; --brand-lime-soft:#27351A; --focus:#A8D85A; --on-action:#0F1712; --leaf:#5FA8FF; --leaf-600:#3D8AE0; --sun:#FFC24B; --sun-soft:#2a2f3a; --paper:#0C1220; --card:#141C2E; --ink:#E6ECF5; --muted:#93A0B8; --rand:#243149; --user-bg:linear-gradient(135deg,#2f5fa8,#254a86); --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.4); --c1:#5B8FD9; --c2:#C79A2A; --c3:#49C0C0; --c4:#8F7CE0; --c5:#E0743C; --c6:#57B36B; --c-other:#7E8A9E; --neg:#FF6470; } html[data-look="warm"] { /* warme Sonnen-Farbwelt, hell */ --brand-lime:#80BA26; --brand-graphite:#646363; --brand-lime-soft:#EEF6DF; --focus:#12694E; --on-action:#FFFFFF; --leaf:#12694E; --leaf-600:#0d5540; --sun:#E8873A; --sun-soft:#FBE1C2; --paper:#FBF3E9; --card:#FFFDFA; --ink:#2A2016; --muted:#7A6A57; --rand:#ECDFCC; --user-bg:linear-gradient(135deg,#E8873A,#C96A22); --shadow:0 1px 2px rgba(80,50,20,.08),0 8px 24px rgba(80,50,20,.08); --c1:#C96A22; --c2:#12694E; --c3:#2E6FB0; --c4:#9A7B12; --c5:#A3441F; --c6:#7C4292; --c-other:#8A7A64; --neg:#B3261E; } html[data-look="kontrast"] { /* maximale Lesbarkeit, kräftige Kanten */ --brand-lime:#80BA26; --brand-graphite:#000000; --brand-lime-soft:#EEF6DF; --focus:#0A5A2C; --on-action:#FFFFFF; --leaf:#0A5A2C; --leaf-600:#063f1e; --sun:#9A4E00; --sun-soft:#FFE9C7; --paper:#FFFFFF; --card:#FFFFFF; --ink:#000000; --muted:#2A2A2A; --rand:#111111; --user-bg:#0A5A2C; --shadow:none; --c1:#006400; --c2:#8a5a00; --c3:#00478f; --c4:#3f5c00; --c5:#8f2400; --c6:#5a1a7a; --c-other:#2A2A2A; --neg:#C40000; } html[data-look="kontrast"] body { font-weight:500; } html[data-look="fahrt"] { /* dunkel + große Schrift/Abstände fürs Auto */ font-size:118%; --brand-lime:#80BA26; --brand-graphite:#F2F7F3; --brand-lime-soft:#27351A; --focus:#A8D85A; --on-action:#0F1712; --leaf:#6FD79E; --leaf-600:#4FBE83; --sun:#FFB765; --sun-soft:#3a3320; --paper:#0F1712; --card:#16211B; --ink:#F2F7F3; --muted:#A6B6AC; --rand:#2C3B31; --user-bg:linear-gradient(135deg,#2E7D57,#24623F); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --c1:#3AA55F; --c2:#CE9A1E; --c3:#6BA0E8; --c4:#84B028; --c5:#C6612F; --c6:#B488E0; --c-other:#8A9B90; --neg:#FF6A6A; } /* Look-Auswahl (Sheet mit 6 Karten) */ .look-sheet { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.4); animation: fade .15s ease; padding: 16px; } .look-sheet-inner { width: min(520px, 100%); max-height: 90dvh; overflow: auto; background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-5); } .look-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .look-head span { font-weight: 680; font-size: var(--fs-md); } .look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .look-card { text-align: left; cursor: pointer; border-radius: var(--r-md); padding: var(--sp-3); border: 2px solid var(--rand); background: var(--card); color: var(--ink); font: inherit; } .look-card[aria-pressed="true"] { border-color: var(--leaf); } .look-card .lc-name { display: block; font-weight: 640; font-size: var(--fs-base); } .look-card .lc-sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; } .look-prev { display: flex; gap: 5px; margin-top: 8px; align-items: center; } .look-prev i { display: block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); } /* Mini-Vorschau je Look (Papier / Marke / Sonne / Serie) */ .lp-auto i:nth-child(1){background:#F5F6F3} .lp-auto i:nth-child(2){background:#80BA26} .lp-auto i:nth-child(3){background:#646363} .lp-auto i:nth-child(4){background:#2E6FB0} .lp-hell i:nth-child(1){background:#F5F6F3} .lp-hell i:nth-child(2){background:#80BA26} .lp-hell i:nth-child(3){background:#646363} .lp-hell i:nth-child(4){background:#2E6FB0} .lp-dunkel i:nth-child(1){background:#16211B} .lp-dunkel i:nth-child(2){background:#6FD79E} .lp-dunkel i:nth-child(3){background:#F2A65A} .lp-dunkel i:nth-child(4){background:#5B8FD9} .lp-nacht i:nth-child(1){background:#141C2E} .lp-nacht i:nth-child(2){background:#5FA8FF} .lp-nacht i:nth-child(3){background:#FFC24B} .lp-nacht i:nth-child(4){background:#49C0C0} .lp-warm i:nth-child(1){background:#FBF3E9} .lp-warm i:nth-child(2){background:#12694E} .lp-warm i:nth-child(3){background:#E8873A} .lp-warm i:nth-child(4){background:#C96A22} .lp-kontrast i:nth-child(1){background:#FFFFFF} .lp-kontrast i:nth-child(2){background:#000000} .lp-kontrast i:nth-child(3){background:#9A4E00} .lp-kontrast i:nth-child(4){background:#00478f} .lp-fahrt i:nth-child(1){background:#0F1712} .lp-fahrt i:nth-child(2){background:#6FD79E} .lp-fahrt i:nth-child(3){background:#FFB765} .lp-fahrt i:nth-child(4){background:#6BA0E8} * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-feature-settings: "cv01","ss01"; -webkit-font-smoothing: antialiased; color: var(--ink); background: var(--paper); display: flex; flex-direction: column; height: 100dvh; } /* Header — leicht durchscheinend, ruhig */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top) + 9px) 16px 9px; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 3px solid var(--brand-lime); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 9px; flex: none; min-width: 0; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid #E4E5E1; padding: 3px 5px; } /* Offizielles SG-Logo (frontend/assets/sg-logo.png). Standard versteckt; app.js blendet es ein, sobald es lädt, und blendet dann die Fallback-Marke aus. Fehlt die Datei -> Fallback bleibt. */ .brand-logo { display: none; height: 36px; width: auto; max-width: 108px; object-fit: contain; } .brand-mark:has(.brand-logo.on) { width: auto; height: auto; background: #fff; border-radius: 10px; } .brand-logo.on { display: block; } .brand-mark .brand-fallback.off { display: none; } .brand-text { font-weight: 720; letter-spacing: -.02em; font-size: 17px; color: var(--brand-graphite); } .login { background: transparent; color: var(--leaf); border: 1px solid var(--rand); border-radius: 999px; padding: 7px 14px; min-height: 44px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; } .login:hover, .login:focus-visible { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 8%, transparent); } /* --- Desktop-Schnelllinks (oben Mitte): Datei/Website in neuem Tab --- */ .toplinks { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .toplinks a.tl-link { display: inline-flex; align-items: center; max-width: 20ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: transparent; color: var(--leaf); border: 1px solid var(--rand); border-radius: 999px; padding: 6px 13px; font-size: .8rem; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; } .toplinks a.tl-link:hover, .toplinks a.tl-link:focus-visible { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 8%, transparent); } .tl-edit { flex: none; } /* Nur Desktop: auf schmalen Screens ist oben kein Platz -> ausblenden. */ @media (max-width: 900px) { .toplinks { display: none; } } .tl-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; animation: fade .15s ease; } .tl-modal { position: fixed; z-index: 61; top: 70px; left: 50%; transform: translateX(-50%); width: min(560px, 92vw); max-height: calc(100vh - 100px); overflow: auto; background: var(--card); border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; animation: rise .18s ease; } .tl-modal h2 { font-size: 1.06rem; margin: 0; letter-spacing: -.01em; } .tl-hint { font-size: .78rem; color: var(--muted); line-height: 1.5; } /* Gestapelt: Anzeigetext oben, Link darunter — je Feld beschriftet. */ .tl-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rand); } .tl-row:last-of-type { border-bottom: none; } .tl-field { display: flex; flex-direction: column; gap: 3px; } .tl-cap { font-size: 12px; color: var(--muted); letter-spacing: .01em; } .tl-row input { border: 1px solid var(--rand); border-radius: 10px; padding: 9px 11px; font-size: 15px; font-family: inherit; background: var(--paper); color: var(--ink); min-width: 0; } .tl-row input.tl-label, .tl-row input.tl-url { width: 100%; } .tl-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* Chat */ .chat { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 14px 8px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; } .msg { max-width: min(86%, 820px); padding: 11px 14px; border-radius: var(--radius); line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; font-size: 15.5px; animation: rise .28s cubic-bezier(.2,.7,.2,1) both; } .msg.user { align-self: flex-end; background: var(--user-bg); color: #fff; border-bottom-right-radius: 6px; box-shadow: var(--shadow); } .msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--rand); border-left: 4px solid var(--brand-lime); border-bottom-left-radius: 6px; box-shadow: var(--shadow); } .msg.system { align-self: center; max-width: 92%; background: color-mix(in srgb, var(--sun) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--sun) 40%, var(--rand)); color: var(--ink); font-size: 13.5px; border-radius: 12px; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Tipp-Indikator (drei Punkte) */ .typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; } .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: blink 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%,80%,100% { transform: scale(.7); opacity: .35; } 40% { transform: scale(1); opacity: .9; } } /* Produktkarten (Basis; die tappbare Variante steht weiter unten) */ .products { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .product .pt { font-weight: 650; margin-bottom: 3px; letter-spacing: -.01em; } .product .pf { color: var(--muted); line-height: 1.4; } /* Empty-State / Beispielfragen — der Willkommens-Moment */ .suggestions { align-self: center; max-width: 720px; width: 100%; margin: auto 0; text-align: center; padding: 12px 4px; animation: rise .4s ease both; } .hero { position: relative; margin-bottom: 18px; padding: 22px 20px 20px; overflow: hidden; border: 1px solid var(--rand); border-top: 5px solid var(--brand-lime); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); } .hero::before { content: ""; position: absolute; width: 150px; height: 150px; right: -68px; top: -82px; border-radius: 50%; background: var(--brand-lime-soft); pointer-events: none; } .hero > * { position: relative; } .hero-kicker { position: relative; color: var(--focus); font-size: .68rem; line-height: 1.2; letter-spacing: .14em; font-weight: 800; margin-bottom: 7px; } .hero h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.2; } .hero p { color: var(--muted); font-size: 14.5px; margin: 0; } .hero-fs { min-height: 48px; margin: 16px auto 0; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--leaf), var(--leaf-600)); color: var(--on-action); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--leaf) 25%, transparent); } .hero-fs:active { transform: scale(.97); } .sug-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; } .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .chip { background: var(--card); color: var(--ink); border: 1px solid var(--rand); border-left: 4px solid var(--brand-lime); border-radius: var(--r-md); padding: 12px 14px; min-height: 52px; font-size: 14px; cursor: pointer; text-align: left; line-height: 1.3; box-shadow: 0 1px 2px rgba(49,52,50,.04); transition: transform .12s, border-color .15s, color .15s, background .15s; } .chip:hover, .chip:focus-visible { border-color: var(--focus); color: var(--ink); background: var(--brand-lime-soft); transform: translateY(-1px); } .chip:active { transform: scale(.97); } /* Angedockte Vorschläge: nach der ersten Frage bleiben die Chips oben im Chat sichtbar (sticky), als schmale, horizontal scrollbare Leiste statt großem 2-Spalten-Raster. */ .suggestions.docked { position: sticky; top: 0; z-index: 6; max-width: none; width: 100%; margin: 0 0 8px; padding: 8px 4px; background: var(--card); border-bottom: 1px solid var(--rand); animation: none; text-align: left; } .suggestions.docked .chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; } .suggestions.docked .chip { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; font-size: 13px; max-width: 78vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left-width: 3px; } /* Composer — schwebende Eingabeleiste, Sprache prominent */ .composer { display: flex; align-items: center; gap: 9px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px); background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: saturate(140%) blur(12px); border-top: 3px solid var(--brand-lime); } .input { flex: 1; padding: 13px 16px; border: 1px solid var(--rand); border-radius: 999px; font-size: 16px; background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .input::placeholder { color: var(--muted); } .input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 15%, transparent); } .mic, .send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; } .mic { background: color-mix(in srgb, var(--leaf) 10%, var(--card)); color: var(--leaf); border: 1px solid var(--rand); } .mic:active, .send:active { transform: scale(.92); } .mic.rec { background: #E5484D; color: #fff; border-color: #E5484D; animation: pulse 1.3s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.45); } 70% { box-shadow: 0 0 0 12px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } } .send { background: linear-gradient(135deg, var(--leaf), var(--leaf-600)); color: var(--on-action); box-shadow: 0 6px 16px color-mix(in srgb, var(--leaf) 34%, transparent); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } button:disabled { opacity: .45; cursor: default; box-shadow: none; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* --- Usability-/A11y-Review-Fixes --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .top-actions { display: flex; align-items: center; gap: 8px; } .identity-demo { flex: none; padding: 6px 14px; background: var(--card); border-bottom: 1px solid var(--rand); } .identity-demo[hidden], .identity-panel[hidden] { display: none; } .identity-toggle { min-height: 44px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--rand); border-radius: 999px; background: var(--brand-lime-soft); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 650; cursor: pointer; } .identity-toggle:hover, .identity-toggle:focus-visible { border-color: var(--leaf); } .identity-toggle.identity-status { opacity: 1; cursor: default; box-shadow: none; } .identity-toggle.identity-status:hover { border-color: var(--rand); } .identity-toggle.identity-status .chev { display: none; } .identity-toggle .chev { color: var(--muted); transition: transform .15s ease; } .identity-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .identity-panel { width: min(620px, 100%); margin: 8px auto 2px; padding: 12px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; align-items: end; gap: 10px; border: 1px solid var(--rand); border-radius: var(--r-md); background: var(--paper); } .identity-panel label { display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; } .identity-panel select, .identity-panel input { width: 100%; min-height: 44px; border: 1px solid var(--rand); border-radius: var(--r-sm); padding: 8px 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; } .identity-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; } .identity-hint.error { color: var(--neg); font-weight: 650; } @media (max-width: 620px) { .identity-demo { padding: 5px 10px; } .identity-panel { grid-template-columns: 1fr; } .identity-hint { grid-column: auto; } .identity-panel .btn-primary { width: 100%; min-height: 48px; } } .ghost { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-lime-soft); color: var(--brand-graphite); border: 1px solid color-mix(in srgb, var(--brand-lime) 35%, var(--rand)); border-radius: 12px; padding: 7px 12px; min-width: 44px; min-height: 44px; justify-content: center; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; } .ghost:hover, .ghost:focus-visible { border-color: var(--focus); background: color-mix(in srgb, var(--brand-lime) 24%, var(--card)); } .actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .act { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--rand); border-radius: 999px; background: transparent; color: var(--muted); font-size: .8rem; cursor: pointer; transition: color .15s, border-color .15s, transform .1s; } .act:hover, .act:focus-visible { color: var(--leaf); border-color: var(--leaf); } .act:active { transform: scale(.94); } .more { margin-top: 2px; align-self: flex-start; background: transparent; color: var(--leaf); border: 1px solid var(--rand); border-radius: 999px; padding: 8px 14px; min-height: 44px; font-size: .82rem; cursor: pointer; } .more:hover, .more:focus-visible { border-color: var(--leaf); } .retry { margin-top: 8px; background: var(--leaf); color: var(--on-action); border: none; border-radius: 999px; padding: 8px 14px; min-height: 44px; font-size: .82rem; font-weight: 600; cursor: pointer; } .product-ph { width: 76px; height: 100px; border-radius: 10px; flex: none; display: grid; place-items: center; color: color-mix(in srgb, var(--leaf) 55%, var(--muted)); background: color-mix(in srgb, var(--leaf) 12%, var(--card)); } .send.stop { background: var(--card); color: var(--muted); border: 1px solid var(--rand); box-shadow: none; } /* rem statt px → respektiert System-/Browser-Schriftgröße */ .brand-text { font-size: 1.06rem; } .msg { font-size: .97rem; } .hero h1 { font-size: 1.55rem; } .hero p { font-size: .9rem; } .sug-title { font-size: .72rem; } .chip { font-size: .875rem; padding: 12px 16px; } .product .pf { font-size: .78rem; } .input { font-size: 1rem; } /* Enger Header auf schmalen Handys: „Neu" nur als Icon, Titel einzeilig */ .brand-text { white-space: nowrap; } @media (max-width: 520px) { .ghost { padding: 6px 4px; } .topbar { gap: 8px; } .brand-text { display: none; } .brand-logo.on { width: auto; height: 28px; max-width: 64px; object-fit: contain; } } /* Fünf direkte Aktionen passen auf eine iPhone-Zeile; Sekundärfunktionen und Login liegen unter „Mehr“. Kein mehrzeiliger Sticky-Kopf und keine horizontale Verschiebung. */ .top-actions { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; row-gap: 6px; } html, body { overflow-x: hidden; } @media (max-width: 350px) { .topbar { padding-left: 10px; padding-right: 10px; gap: 4px; } .top-actions { gap: 4px; } } /* Auf kleinen Displays bekommt die Marke eine eigene Zeile. So bleiben das vollständige Logo, ein verständlicher Produktname und fünf 44-px-Aktionen auch bei 320 px ohne Überlauf erhalten. */ @media (max-width: 620px) { .topbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: calc(env(safe-area-inset-top) + 7px) 10px 7px; } .brand { width: 100%; justify-content: center; gap: 8px; } .brand-text { display: block; font-size: .92rem; } .brand-logo.on { width: auto; height: 34px; max-width: 96px; object-fit: contain; } .top-actions { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .top-actions > .ghost, .more-wrap > .ghost { width: 100%; padding: 8px; } .top-actions > .ghost, .more-wrap > .ghost { min-height: 52px; flex-direction: column; gap: 2px; line-height: 1; } .top-actions > .ghost span, .more-wrap > .ghost span { display: block; max-width: 100%; font-size: .62rem; white-space: nowrap; } .more-wrap { min-width: 0; } .chips { grid-template-columns: 1fr; } .hero { padding: 19px 16px 17px; } } /* Topbar-Überlaufmenü (Aufräumaktion): sekundäre Aktionen hinter „Mehr" */ .more-wrap { position: relative; } .more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 6px; max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-md); box-shadow: var(--shadow); animation: rise .16s ease both; } .more-menu[hidden] { display: none; } .more-menu .ghost { border: none; border-radius: var(--r-sm); width: 100%; justify-content: flex-start; gap: 10px; padding: 10px 12px; font-size: var(--fs-sm); color: var(--ink); } .more-menu .ghost span { display: inline !important; } /* im Menü immer Text zeigen */ .more-menu .ghost:hover, .more-menu .ghost:focus-visible { background: color-mix(in srgb, var(--leaf) 8%, transparent); } .more-menu .ghost.km-on { background: color-mix(in srgb, var(--sun) 22%, var(--card)); color: var(--ink); } .more-menu .login { width: 100%; text-align: left; border: none; border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); } /* --- Kacheln (tappbar) + Detail-Sheet --- */ .product { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); -webkit-appearance: none; border: 1px solid var(--rand); border-radius: var(--r-md); padding: 10px; cursor: pointer; background: color-mix(in srgb, var(--card) 70%, var(--paper)); transition: transform .1s, border-color .15s; } .product:hover, .product:focus-visible { border-color: var(--leaf); } .product:active { transform: scale(.99); } .product img, .product-ph { width: 88px; height: 116px; border-radius: 10px; flex: none; } .product img { object-fit: cover; background: var(--rand); } .pmeta { flex: 1; min-width: 0; } .product .pt { white-space: normal; } .chev { flex: none; color: var(--muted); display: grid; place-items: center; } .img-badge { position: absolute; left: 16px; top: 16px; background: rgba(0,0,0,.6); color: #fff; font-size: .66rem; padding: 2px 7px; border-radius: 7px; } .no-scroll { overflow: hidden; } .sheet-backdrop { position: fixed; inset: 0; background: rgba(10,20,14,.5); z-index: 40; animation: fade .2s ease both; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card); /* Auf lesbare Spaltenbreite begrenzt und zentriert: am Handy voll, am breiten Monitor kein Über-die-ganze-Breite-Springen mehr (Beschriftung und Wert bleiben nah beieinander). */ max-width: 680px; margin-inline: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(env(safe-area-inset-bottom) + 18px); max-height: 88dvh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(0,0,0,.28); animation: slideup .28s cubic-bezier(.2,.7,.2,1) both; } .sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--rand); margin: 0 auto 14px; } .sheet-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: var(--card); color: var(--muted); font-size: 1rem; cursor: pointer; } .gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: 14px; -webkit-overflow-scrolling: touch; } .gallery img { flex: none; width: 78%; max-width: 300px; height: 300px; object-fit: contain; scroll-snap-align: center; border-radius: 12px; background: color-mix(in srgb, var(--leaf) 6%, var(--card)); } .sheet-ph { height: 180px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 14px; color: color-mix(in srgb, var(--leaf) 55%, var(--muted)); background: color-mix(in srgb, var(--leaf) 10%, var(--card)); } .sheet-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; } .fields { display: flex; flex-direction: column; gap: 0; } /* Zwei-Spalten-Raster: Beschriftung links, Wert direkt daneben (linksbündig) statt ganz rechts. Prozent-Spalte => alle Werte fluchten in einer Spalte, lange Texte (Beschreibung) brechen im Wert-Feld um. */ .field { display: grid; grid-template-columns: minmax(9rem, 38%) 1fr; column-gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--rand); font-size: .92rem; align-items: baseline; } .field:last-child { border-bottom: none; } .fc { color: var(--muted); } .fv { text-align: left; font-weight: 600; overflow-wrap: anywhere; } .sheet-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .btn-primary, .btn-secondary { flex: 1; min-width: 130px; text-align: center; padding: 13px 16px; min-height: 44px; border-radius: 12px; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--leaf); color: var(--on-action); border: none; } .btn-secondary { background: transparent; color: var(--leaf); border: 1px solid var(--rand); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideup { from { transform: translateY(100%); } to { transform: none; } } /* Desktop/breiter Bildschirm: das Produktdetail ist ein ZENTRIERTES, breiteres Fenster (nicht die am unteren Rand klebende Schublade, die unten aus dem Monitor lief). Felder in ZWEI Spalten (spart vertikale Höhe), lange Werte spannen über beide. Am Handy bleibt die Schublade. */ @media (min-width: 760px) { .sheet { max-width: 900px; left: 0; right: 0; bottom: auto; top: 50%; transform: translateY(-50%); margin: 0 auto; border-radius: 20px; max-height: 90vh; animation: fade .2s ease both; padding: 20px 24px; } .sheet::before { display: none; } /* Zieh-Griff nur bei der Schublade sinnvoll */ .fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; } .field { break-inside: avoid; } .field.field-wide { grid-column: 1 / -1; } .gallery img { height: 340px; } } /* --- Feinschliff: Sheet-Kopf, Galerie-Punkte, Auto-Senden, Nach-unten, Installier-Hinweis --- */ .login { white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; } .pf { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sheet, .gallery { overscroll-behavior: contain; } .sheet { padding-top: 8px; } .sheet-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; background: var(--card); padding: 2px 0 6px; } .sheet-close { position: static; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: var(--card); color: var(--muted); font-size: 1rem; cursor: pointer; } .gallery-dots { display: flex; gap: 6px; justify-content: center; margin: -6px 0 14px; } .gallery-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rand); transition: background .15s; } .gallery-dots .dot.active { background: var(--leaf); } .autosend { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 78px); z-index: 30; display: flex; align-items: center; gap: 12px; background: var(--leaf); color: var(--on-action); padding: 9px 12px 9px 16px; border-radius: 999px; box-shadow: var(--shadow); font-size: .9rem; animation: rise .2s ease both; } .autosend button { background: rgba(255,255,255,.22); color: inherit; border: none; border-radius: 999px; padding: 6px 12px; min-height: 44px; min-width: 44px; font-size: .85rem; font-weight: 600; cursor: pointer; } .autosend.hidden, .scrolldown.hidden, .install.hidden { display: none; } .scrolldown { position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 82px); z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: var(--card); color: var(--leaf); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); } .install { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 82px); z-index: 25; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--rand); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); font-size: .9rem; animation: rise .25s ease both; } .install span { flex: 1; } .install-go { background: var(--leaf); color: var(--on-action); border: none; border-radius: 999px; padding: 8px 14px; min-height: 44px; font-weight: 600; cursor: pointer; } .install-x { background: transparent; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 6px; min-width: 44px; min-height: 44px; } /* --- Briefing/Podcast-Ansicht --- */ .briefing-view { flex: 1; overflow-y: auto; padding: 14px max(16px, calc((100vw - 1120px) / 2)) calc(env(safe-area-inset-bottom) + 20px); } .bf-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 5; margin: 0 -16px 12px; padding: 8px 16px 10px; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--rand); } .bf-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; } /* Umsatz/Auftragseingang: Kopf soll mitlaufen statt fixiert das Diagramm zu überlagern (Peter 2026-07-27: „Umsatz ist falsch fixiert. läuft nicht mit."). */ #vertrieb .bf-head { position: static; background: var(--paper); backdrop-filter: none; } .bf-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; } .seg button { border: none; background: transparent; color: var(--muted); padding: 9px 16px; min-width: 44px; min-height: 44px; font-size: .9rem; cursor: pointer; } .seg button.on { background: var(--leaf); color: var(--on-action); } .seg button:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; } .chart-list { margin-top: 10px; border-top: 1px solid var(--rand); text-align: left; } .chart-list summary { min-height: 44px; display: flex; align-items: center; color: var(--leaf); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; } .chart-list-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; padding-bottom: 10px; } .chart-list-row { min-height: 44px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; text-align: left; } button.chart-list-row { cursor: pointer; } button.chart-list-row:hover, button.chart-list-row:focus-visible { border-color: var(--leaf); background: var(--brand-lime-soft); } @media (max-width: 520px) { .chart-list-rows { grid-template-columns: 1fr; } } .bf-role { font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; max-width: 260px; } .bf-role select { font-size: .95rem; padding: 9px 10px; min-height: 44px; border: 1px solid var(--rand); border-radius: 10px; background: var(--card); color: var(--ink); } .bf-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .bf-buttons .btn-primary, .bf-buttons .btn-secondary { flex: 0 1 auto; min-width: 140px; } /* Status als schlanker Chip (statt Vollbreiten-Banderole) — hugt den Inhalt, bricht bei langem Text. */ .bf-demo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); line-height: 1.35; background: color-mix(in srgb, var(--sun) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--sun) 30%, var(--rand)); border-radius: var(--r-sm); padding: 5px 11px; margin-bottom: 12px; } .bf-demo:empty { display: none; } .bf-text { font-size: 1.02rem; line-height: 1.5; background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: 16px; white-space: pre-wrap; box-shadow: var(--shadow); } .bf-sec { margin-bottom: 14px; } .bf-sec-title { font-weight: 650; margin-bottom: 6px; letter-spacing: -.01em; } .bf-pt { font-size: .92rem; color: var(--muted); padding: 5px 0; border-bottom: 1px solid var(--rand); } .bf-pt:last-child { border-bottom: none; } .bf-exact { font-size: .8rem; color: var(--muted); padding-top: 5px; } /* Wahrheitsbeleg unter Trefferantworten: Quelle + Abrufzeit */ .source-note { font-size: .75rem; color: var(--muted); margin-top: 6px; } /* Sofort-Vorspann (Stufe 1): dezente, kurz sichtbare „ich hole das gerade …"-Zeile */ .msg.ack { opacity: .8; font-style: italic; } /* --- Kundenbrief: Terminnotiz-Bereich --- */ .kb-notiz { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } #kbNotizForm { width: 100%; display: flex; flex-direction: column; gap: 10px; } #kbNotizForm textarea { width: 100%; border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-family: inherit; background: var(--card); color: var(--ink); } #kbNotizErgebnis { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* --- Bedarf/Rückstand P0: kompakter Plankunden-Filter (kein vertikaler Verschnitt) --- */ /* Zugeklappt = eine Zeile (Chip). Aufgeklappt = Suche + Liste. Spart ggü. der alten Dauer-Checkbox-Wand ~280px vertikal (Peter: "nicht die halbe Seite"). */ .bd-filter { border: 1px solid var(--rand); border-radius: var(--r-sm); background: var(--card); } .bd-filter-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; } .bd-filter-sum::-webkit-details-marker { display: none; } .bd-filter-sum .chev { color: var(--muted); transition: transform .15s; } .bd-filter[open] .bd-filter-sum .chev { transform: rotate(180deg); } .bd-filter-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; } .bd-filter-suche { padding: 8px 12px; min-height: 44px; } .bd-stackseg { align-self: center; margin-top: var(--sp-3); } .ve-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 var(--sp-3); } .ve-controls .seg { align-self: center; } .ve-controls .seg button { min-height: 44px; min-width: 64px; font-weight: 650; } .ve-controls #vePeriodSeg button { min-width: 88px; } #vertrieb[aria-busy="true"] #veCard { opacity: .72; } .ve-retry { align-self: center; min-height: 44px; } .bd-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 14px; max-height: 42dvh; overflow: auto; padding: 4px 2px; } .bd-group-opt[hidden] { display: none; } /* Auftraggeber-Filter (Suche -> Treffer -> Chips) im Umsatz */ .ve-ag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ve-ag-chip { border: 1px solid var(--rand); background: var(--brand-lime-soft); color: var(--ink); border-radius: 999px; padding: 5px 10px; min-height: 32px; font-size: .82rem; cursor: pointer; } .ve-ag-treffer { display: flex; flex-direction: column; max-height: 34dvh; overflow: auto; } .ve-ag-treffer-row { text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--rand); color: var(--ink); padding: 9px 6px; min-height: 40px; cursor: pointer; font-size: .86rem; } .ve-ag-treffer-row:hover, .ve-ag-treffer-row:focus-visible { background: var(--brand-lime-soft); outline: none; } .ve-ag-leer { color: var(--muted); font-size: .84rem; padding: 6px 2px; } .bd-group-opt { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .95rem; cursor: pointer; } .bd-group-opt input { accent-color: var(--leaf); flex: none; } /* Aktionsleiste unter der Plankundenauswahl: erst "Anwenden" laedt (mehrere waehlbar) */ .bd-filter-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding-top: var(--sp-2); border-top: 1px solid var(--rand); } .bd-filter-actions .btn-primary, .bd-filter-actions .btn-secondary { padding: 8px 18px; min-height: 44px; } .bd-card { display: flex; flex-direction: column; gap: 12px; } .bd-block { background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow); } .bd-block-title { font-weight: 650; margin-bottom: 8px; letter-spacing: -.01em; } .bd-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rand); } .bd-stat:last-child { border-bottom: none; } .bd-stat-label { color: var(--muted); font-size: .92rem; } .bd-stat-value { font-weight: 650; font-size: var(--fs-md); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; } .bd-group { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rand); font-size: .95rem; } .bd-group:last-child { border-bottom: none; } .bd-group-val { color: var(--muted); white-space: nowrap; } .bd-meta { font-size: .78rem; color: var(--muted); line-height: 1.7; } .bd-meta b { color: var(--ink); font-weight: 600; } .bd-empty { color: var(--muted); font-size: .95rem; padding: 8px 0; } /* Arbeitsindikator: unübersehbar zeigen, dass gerade gegen SAP gearbeitet wird */ .bd-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .95rem; padding: 12px 2px; } .bd-spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--rand); border-top-color: var(--leaf); animation: bd-spin .8s linear infinite; } @keyframes bd-spin { to { transform: rotate(360deg); } } #bedarf[aria-busy="true"] .seg button { opacity: .5; cursor: progress; } #bedarf[aria-busy="true"] .bd-groups { opacity: .6; } @media (prefers-reduced-motion: reduce) { .bd-spinner { animation-duration: 2.4s; } } /* Kennzahl-Kachel: Anhören-Knopf + inline Grafik (Balken / gestapelt), CSP-safe */ .bd-audiobar { display: flex; } .bd-audio { display: inline-flex; align-items: center; gap: 4px; } .bd-chart { display: flex; flex-direction: column; gap: 8px; } .bd-chart-row { display: grid; align-items: center; gap: 10px; font-size: .9rem; } .bd-chart-row.bd-bars { grid-template-columns: minmax(72px, 34%) 1fr auto; } .bd-chart-row:not(.bd-bars) { grid-template-columns: 1fr auto; } /* Legende (stacked) */ .bd-chart-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 7px; } .bd-chart-val { font-weight: 680; white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .bd-bar-track { position: relative; height: 20px; background: var(--rand); border-radius: 6px; overflow: hidden; } .bd-bar-track.bd-stacked { display: flex; height: 24px; } .bd-bar { height: 100%; background: var(--c1); border-radius: 6px; min-width: 0; } .bd-seg { height: 100%; } .bd-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; } /* Hierarchie-/Segmentfarben: theme-aware, Validator-geprüft (CVD/Kontrast). Marke (Grün) führt. */ .bd-seg.s0, .bd-dot.s0 { background: var(--c1); } .bd-seg.s1, .bd-dot.s1 { background: var(--c2); } .bd-seg.s2, .bd-dot.s2 { background: var(--c3); } .bd-seg.s3, .bd-dot.s3 { background: var(--c4); } .bd-seg.s4, .bd-dot.s4 { background: var(--c5); } .bd-seg.s5, .bd-dot.s5 { background: var(--c6); } .bd-seg.sother, .bd-dot.sother { background: var(--c-other); } /* Erweiterte Palette (s6..s15): bei vielen Plankunden/Hierarchien waren vorher fast alle grau. Feste, kontrastreiche Zusatzfarben (Peter 2026-07-27). */ .bd-seg.s6, .bd-dot.s6 { background: #00897b; } .bd-seg.s7, .bd-dot.s7 { background: #C2185B; } .bd-seg.s8, .bd-dot.s8 { background: #6D4C41; } .bd-seg.s9, .bd-dot.s9 { background: #5E35B1; } .bd-seg.s10, .bd-dot.s10 { background: #F4511E; } .bd-seg.s11, .bd-dot.s11 { background: #0288D1; } .bd-seg.s12, .bd-dot.s12 { background: #7CB342; } .bd-seg.s13, .bd-dot.s13 { background: #455A64; } .bd-seg.s14, .bd-dot.s14 { background: #C79A2A; } .bd-seg.s15, .bd-dot.s15 { background: #AD1457; } /* Bedarfssituation (Verlauf): Zeit-Eimer-Zeilen + Vorplan (schraffiert) + Legende */ .bd-sit-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; font-size: .9rem; } .bd-sit-row .bd-chart-label.bd-overdue { color: var(--neg); font-weight: 700; } .bd-seg.bd-vorplan { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--leaf) 48%, transparent) 0 5px, color-mix(in srgb, var(--leaf) 14%, transparent) 5px 10px); } .bd-dot.bd-vorplan { background: var(--vorplan); border: 1px solid var(--vorplan-line); } .bd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 2px 0; } .bd-lg { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); } @media (max-width: 560px) { .bd-sit-row { grid-template-columns: 76px 1fr auto; gap: 7px; font-size: .82rem; } } /* --- Hero: 12-Wochen-Säulendiagramm (Bedarf/Rückstand) --- */ .bd-hero { position: relative; background: var(--card); border: 1px solid var(--rand); border-radius: 16px; padding: 14px 12px 8px; box-shadow: var(--shadow); } .bd-hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px 8px; } .bd-hero-title { font-weight: 650; letter-spacing: -.01em; } .bd-hero-scope { font-size: .74rem; color: var(--muted); white-space: nowrap; } .bd-chart-svg { display: block; width: 100%; height: auto; overflow: visible; } .bd-chart-svg .grid { stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 1; } .bd-chart-svg .grid.zero { stroke: color-mix(in srgb, var(--ink) 26%, transparent); } .bd-chart-svg .ytick { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; } .bd-chart-svg .yunit { fill: var(--muted); font-size: 10px; font-weight: 600; } .bd-chart-svg .xlab { fill: var(--muted); font-size: 10.5px; text-anchor: middle; } .bd-chart-svg .xlab.over { fill: var(--neg); font-weight: 650; } .bd-chart-svg .xlab.now { fill: var(--ink); font-weight: 650; } .bd-chart-svg .cap { fill: var(--ink); font-size: 10.5px; font-weight: 650; text-anchor: middle; font-variant-numeric: tabular-nums; } .bd-chart-svg .seg { stroke: var(--card); stroke-width: 2; } /* 2px-Fugen zwischen Stapeln */ .bd-chart-svg .seg.s0 { fill: var(--c1); } .bd-chart-svg .seg.s1 { fill: var(--c2); } .bd-chart-svg .seg.s2 { fill: var(--c3); } .bd-chart-svg .seg.s3 { fill: var(--c4); } .bd-chart-svg .seg.s4 { fill: var(--c5); } .bd-chart-svg .seg.s5 { fill: var(--c6); } .bd-chart-svg .seg.sother { fill: var(--c-other); } .bd-chart-svg .seg.s6 { fill: #00897b; } .bd-chart-svg .seg.s7 { fill: #C2185B; } .bd-chart-svg .seg.s8 { fill: #6D4C41; } .bd-chart-svg .seg.s9 { fill: #5E35B1; } .bd-chart-svg .seg.s10 { fill: #F4511E; } .bd-chart-svg .seg.s11 { fill: #0288D1; } .bd-chart-svg .seg.s12 { fill: #7CB342; } .bd-chart-svg .seg.s13 { fill: #455A64; } .bd-chart-svg .seg.s14 { fill: #C79A2A; } .bd-chart-svg .seg.s15 { fill: #AD1457; } .bd-chart-svg .seg-vorplan { fill: var(--vorplan); stroke: var(--vorplan-line); stroke-width: 1.5; } .bd-chart-svg .hit { fill: transparent; cursor: pointer; } /* Klick-Absprung: Detail-Aufschlüsselung einer Woche */ .bd-drill { margin-top: var(--sp-3); background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow); } .bd-drill-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); } .bd-drill-title { font-weight: 660; font-size: var(--fs-md); } .bd-drill-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--rand); font-size: var(--fs-base); } .bd-drill-row:first-of-type { border-top: none; } .bd-drill-name { flex: 1 1 auto; min-width: 0; } .bd-drill-val { font-weight: 620; white-space: nowrap; } .bd-drill-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); } .bd-drill-seg { margin: var(--sp-2) 0; } /* Wochen-Matrix: Zeilen = Dimension, Spalten = Wochen; horizontal scrollbar, erste Spalte klebt, angeklickte Woche hervorgehoben. */ .bd-mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--sp-2); /* Kein dicker grauer Scrollbalken unter der Tabelle (Peter): weg-blenden, Wischen/Shift-Rad scrollt weiterhin. Alternativ steht darüber „Werte als Liste". */ scrollbar-width: none; -ms-overflow-style: none; } .bd-mx-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } .bd-mx-table { border-collapse: collapse; font-size: var(--fs-xs); white-space: nowrap; min-width: 100%; } .bd-mx-table th, .bd-mx-table td { padding: 6px 10px; border-bottom: 1px solid var(--rand); text-align: right; } .bd-mx-table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); } .bd-mx-table .bd-mx-name { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .bd-mx-table thead .bd-mx-name { z-index: 2; } .bd-mx-table .num { font-variant-numeric: tabular-nums; } .bd-mx-table .bd-mx-sum { font-weight: 660; border-left: 1px solid var(--rand); } .bd-mx-table .bd-mx-sel { background: var(--brand-lime-soft); } /* Anklickbare Matrix-Zahl -> Material-Detail (Peter 2026-07-27). */ .bd-mx-table td.bd-mx-clk { cursor: pointer; color: var(--leaf); font-weight: 650; text-decoration: underline dotted; } .bd-mx-table td.bd-mx-clk:hover, .bd-mx-table td.bd-mx-clk:focus-visible { background: var(--brand-lime-soft); outline: none; } .bd-mx-table .bd-mx-total td { font-weight: 700; border-top: 2px solid var(--rand); } /* Stückliste (ZBOM) durchklickbar */ .bd-bom-open { background: transparent; border: none; color: var(--leaf); font-weight: 650; cursor: pointer; text-decoration: underline dotted; padding: 0; font: inherit; } .bd-bom-panel:not(:empty) { margin-top: 10px; border-top: 1px solid var(--rand); padding-top: 8px; } .bd-bom-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650; font-size: .9rem; margin-bottom: 6px; } .bd-bom-tree { list-style: none; margin: 0; padding-left: 14px; border-left: 1px solid var(--rand); } .bd-bom-panel > .bd-bom-tree { padding-left: 0; border-left: none; } .bd-bom-zeile { display: flex; align-items: center; gap: 6px; min-height: 34px; } .bd-bom-tog { background: transparent; border: 1px solid var(--rand); border-radius: 6px; width: 26px; height: 26px; flex: none; cursor: pointer; color: var(--muted); } .bd-bom-txt { font-size: .85rem; } .bd-bom-leer { color: var(--muted); font-size: .82rem; padding: 4px 0; } .bd-chart-svg .zone-neg { fill: var(--neg); opacity: .07; } .bd-chart-svg .zone-now { fill: var(--leaf); opacity: .07; } .bd-chart-svg .hit { fill: transparent; cursor: default; } .bd-chart-svg .hit:hover + .colgroup, .bd-chart-svg g.col:hover .colgroup { filter: brightness(1.06); } .bd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } @media (max-width: 380px) { .bd-kpis { grid-template-columns: 1fr 1fr; } } .bd-kpi { text-align: left; background: var(--card); border: 1px solid var(--rand); border-radius: 16px; padding: 11px 13px; box-shadow: var(--shadow); } .bd-kpi-label { font-size: .72rem; color: var(--muted); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px; } .bd-kpi-value { display: block; font-size: 1.32rem; font-weight: 680; letter-spacing: -.02em; margin-top: 3px; } .bd-kpi-value small { font-size: .72rem; font-weight: 600; color: var(--muted); margin-left: 3px; } .bd-kpi.neg .bd-kpi-value { color: var(--neg); } .bd-kpi.neg .bd-kpi-label::before { content: "▲"; font-size: .66rem; color: var(--neg); } /* --- Systemstatus-Banner: die App sagt, was konfiguriert ist / fehlt --- */ .sys-banner { position: relative; margin: 0; padding: 10px 42px 11px 16px; font-size: var(--fs-sm); color: var(--ink); background: color-mix(in srgb, var(--neg) 9%, var(--card)); border-bottom: 1px solid color-mix(in srgb, var(--neg) 28%, var(--rand)); } .sys-banner.sys-demo { background: color-mix(in srgb, var(--sun) 13%, var(--card)); border-bottom-color: color-mix(in srgb, var(--sun) 38%, var(--rand)); } .sys-head { font-weight: 650; cursor: pointer; min-height: 44px; display: flex; align-items: center; } .sys-details[open] .sys-head { margin-bottom: 4px; } .sys-list { margin: 5px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); } .sys-list b { color: var(--ink); font-weight: 600; } .sys-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: var(--card); color: var(--muted); font-size: .9rem; cursor: pointer; } /* --- Zentrale Administration: Personen, Rollen, Rechte und Fragenprotokoll --- */ .ad-tabs { margin-bottom: 12px; } .ad-intro { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } .ad-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px; margin-bottom: 12px; border: 1px solid var(--rand); border-radius: 14px; background: var(--card); } .ad-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; } .ad-toolbar select, .ad-field input, .ad-field select { min-height: 44px; width: 100%; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; color: var(--ink); background: var(--paper); font: inherit; } .ad-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ad-toolbar-actions button, .ad-remove { min-height: 44px; border-radius: 10px; padding: 8px 13px; border: 1px solid var(--rand); background: var(--card); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; } .ad-toolbar-actions .primary { border-color: var(--leaf); background: var(--leaf); color: var(--on-action); } .ad-toolbar-actions button:disabled, .ad-person :disabled { opacity: .55; cursor: not-allowed; } .ad-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ad-person { min-width: 0; padding: 14px; border: 1px solid var(--rand); border-radius: 16px; background: var(--card); box-shadow: 0 3px 14px color-mix(in srgb, var(--ink) 5%, transparent); } .ad-person-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .ad-person-head strong { overflow-wrap: anywhere; } .ad-remove { flex: none; color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, var(--rand)); } .ad-person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .ad-field { display: grid; align-content: start; gap: 4px; min-width: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 620; } .ad-field-login, .ad-field-kdgrp, .ad-field-kunag { grid-column: 1 / -1; } .ad-person-hint { min-height: 1.3em; margin: 9px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; } .ad-roles { margin-top: 14px; border: 1px solid var(--rand); border-radius: 14px; background: var(--card); } .ad-roles > summary { min-height: 48px; display: flex; align-items: center; padding: 0 13px; cursor: pointer; color: var(--ink); font-weight: 650; } #adRoleInfo { padding: 0 13px 10px; } .ad-role-row { display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); font-size: var(--fs-sm); } .ad-role-row span { color: var(--muted); } .bf-demo.ad-error { color: var(--neg); } .bf-demo.ad-warn { color: color-mix(in srgb, var(--sun) 72%, var(--ink)); } .bf-demo.ad-ok { color: var(--leaf-600); } .ad-row { padding: 10px 0; border-bottom: 1px solid var(--rand); } .ad-row:last-child { border-bottom: none; } .ad-q { font-size: var(--fs-base); color: var(--ink); } .ad-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .ad-badge { font-size: .66rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; } .ad-badge.ok { color: var(--leaf); background: color-mix(in srgb, var(--leaf) 14%, var(--card)); } .ad-badge.no { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--card)); } @media (max-width: 760px) { .ad-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; } .ad-tabs button { padding-inline: 8px; } .ad-toolbar { align-items: stretch; } .ad-toolbar label, .ad-toolbar-actions { width: 100%; } .ad-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; } .ad-toolbar-actions .primary { grid-column: 1 / -1; } .ad-people { grid-template-columns: 1fr; } .ad-person-grid { grid-template-columns: 1fr; } .ad-field-login, .ad-field-kdgrp, .ad-field-kunag { grid-column: auto; } .ad-role-row { grid-template-columns: 1fr; gap: 3px; } } /* --- Verladung: gestern/heute/morgen je Kunde (in-car lesbar, große Zahlen) --- */ .vl-bucket { background: var(--card); border: 1px solid var(--rand); border-radius: 16px; padding: 12px 14px; margin-top: 10px; } .vl-bucket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .vl-bucket-title { font-size: var(--fs-base); font-weight: 640; color: var(--ink); } .vl-bucket-sum { font-size: 1.24rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .vl-bucket-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; } .vl-kunden { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .vl-kunde { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid var(--rand); } .vl-kunde:first-child { border-top: none; } .vl-kunde-name { font-size: var(--fs-base); color: var(--ink); } .vl-kunde-m3 { font-size: var(--fs-base); font-weight: 620; color: var(--ink); white-space: nowrap; } /* Plankunde-Zeile als anklickbarer Drilldown (Materialien des Tages). */ .vl-kunde-btn { width: 100%; text-align: left; background: none; cursor: pointer; min-height: 34px; border-radius: 6px; } .vl-kunde-btn:hover { background: var(--hover, rgba(0,0,0,.04)); } .vl-kunde-btn .vl-kunde-name { text-decoration: underline; text-decoration-color: var(--rand); text-underline-offset: 2px; } .vl-drill-anchor:not(:empty) { margin-top: 8px; } .vl-none { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; } /* --- Rückstands-Pille (proaktive Ampel über dem Verlauf): eine Zeile, tap -> zum Diagramm --- */ .rs-pille { display: block; width: 100%; text-align: left; cursor: pointer; margin: 6px 0 2px; padding: 9px 13px; min-height: 44px; border-radius: 999px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--rand); letter-spacing: -.01em; } .rs-pille[data-sev="rot"] { background: color-mix(in srgb, var(--neg) 14%, var(--card)); border-color: color-mix(in srgb, var(--neg) 45%, var(--rand)); } .rs-pille[data-sev="gelb"] { background: color-mix(in srgb, var(--sun) 20%, var(--card)); border-color: color-mix(in srgb, var(--sun) 55%, var(--rand)); } .rs-pille[data-sev="gruen"] { background: color-mix(in srgb, var(--leaf) 12%, var(--card)); border-color: color-mix(in srgb, var(--leaf) 40%, var(--rand)); } /* --- Kundenmodus (D21): unübersehbarer Zustand --- */ .km-banner { padding: 8px 16px; text-align: center; font-size: .85rem; font-weight: 600; background: color-mix(in srgb, var(--sun) 22%, var(--card)); border-bottom: 1px solid color-mix(in srgb, var(--sun) 45%, var(--rand)); color: var(--ink); } .ghost.km-on { background: color-mix(in srgb, var(--sun) 25%, var(--card)); border-color: color-mix(in srgb, var(--sun) 60%, var(--rand)); color: var(--ink); } /* --- Freisprech-/Auto-Modus (Paket 3): Vollbild, große Tap-Ziele, minimaler Text --- */ .fs-view { flex: 1; display: flex; flex-direction: column; padding: 12px 18px calc(env(safe-area-inset-bottom) + 22px); background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--leaf) 12%, var(--paper)), var(--paper)); } .fs-head { display: flex; align-items: center; gap: 10px; } .fs-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--muted); } .fs-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 8px; } .fs-head .sheet-close { width: 56px; height: 56px; font-size: 1.3rem; } /* Auto: großes Beenden-Ziel */ .fs-status { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; } .fs-transcript { font-size: 1.15rem; color: var(--ink); min-height: 1.4em; margin: 0; max-width: 22ch; } .fs-answer { font-size: 1.05rem; color: var(--muted); line-height: 1.5; margin: 0; max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fs-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; } .fs-main { width: 108px; height: 108px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--on-action); background: linear-gradient(135deg, var(--leaf), var(--leaf-600)); box-shadow: 0 8px 30px color-mix(in srgb, var(--leaf) 40%, transparent); transition: transform .12s, box-shadow .2s; } .fs-main:active { transform: scale(.96); } .fs-hint { font-size: .875rem; color: var(--ink); max-width: 32ch; text-align: center; margin: 0; } /* Zustands-Färbung des großen Knopfes + pulsierender Ring beim Hören */ .fs-view[data-state="HOEREN"] .fs-main { background: linear-gradient(135deg, var(--sun), #E98B44); color: #3a1e06; box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 60%, transparent); animation: fs-pulse 1.6s ease-out infinite; } .fs-view[data-state="DENKEN"] .fs-main { filter: saturate(.55) brightness(.92); } .fs-view[data-state="SPRECHEN"] .fs-main { background: linear-gradient(135deg, var(--leaf), var(--leaf-600)); } @keyframes fs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 55%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } } @media (prefers-reduced-motion: reduce) { .fs-view[data-state="HOEREN"] .fs-main { animation: none; } } /* [hidden] muss display:flex-Regeln schlagen (Ansichts-Umschaltung Chat<->Briefing) */ [hidden] { display: none !important; } /* SILO — gestapelte Säulen (Kategorie × Plankunde) + Segment-Drilldown (#25/#26) */ .si-kpi { font-size: .9rem; color: var(--muted); margin: 2px 0 8px; } .si-kpi-glt { margin-top: -4px; } .si-seg { margin: 0 0 8px; } .si-metric-seg { margin-top: 2px; } /* Horizont-Leiste (Überbestand): Bedarf-Abzug bis zu einer kumulativen Stufe wählen. */ .si-horizont { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; } .si-horizont-lead { font-size: .85rem; color: var(--muted); margin-right: 2px; } .si-hz-btn { min-height: 34px; padding: 4px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--card); color: var(--text); font-size: .85rem; cursor: pointer; } .si-hz-btn:hover { border-color: var(--sg-gruen); } .si-hz-btn.on { background: var(--sg-gruen); border-color: var(--sg-gruen); color: #fff; } .si-chart { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 2px; } .si-svg { width: auto; min-width: 100%; max-width: none; height: auto; display: block; } .si-grid { stroke: var(--rand); stroke-width: 1; } .si-ytick { fill: var(--muted); font-size: 11px; } .si-xtick { fill: var(--ink); font-size: 11px; } .si-val { fill: var(--ink); font-size: 10px; font-weight: 650; } .si-axis { fill: var(--muted); font-size: 11px; font-weight: 650; } .si-stack { cursor: pointer; stroke: color-mix(in srgb, var(--card) 82%, transparent); stroke-width: 1; transition: filter .12s, stroke-width .12s; } .si-stack:hover { filter: brightness(1.08); stroke-width: 2; } .si-stack:focus { outline: none; stroke: var(--ink); stroke-width: 3; } .si-c0 { fill: #2e7d32; background: #2e7d32; } .si-c1 { fill: #f2a900; background: #f2a900; } .si-c2 { fill: #1976d2; background: #1976d2; } .si-c3 { fill: #8e44ad; background: #8e44ad; } .si-c4 { fill: #e05a47; background: #e05a47; } .si-c5 { fill: #00897b; background: #00897b; } .si-c6 { fill: #6d4c41; background: #6d4c41; } .si-c7 { fill: #c2185b; background: #c2185b; } .si-c8 { fill: #5e35b1; background: #5e35b1; } .si-c9 { fill: #7cb342; background: #7cb342; } .si-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 4px 0; } .si-legend-item { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: var(--muted); font-size: .78rem; } .si-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); flex: 0 0 auto; } .si-actions { margin-top: 6px; } .si-actions > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--leaf-600); font-size: .84rem; font-weight: 650; } .si-action-list { display: grid; gap: 6px; padding: 2px 0 6px; } .si-action { min-height: 44px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .si-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--leaf) 45%, transparent); outline-offset: 2px; } .si-limit, .si-field-note { font-size: .78rem; color: var(--muted); margin-top: 6px; } .si-meta { font-size: .8rem; color: var(--muted); margin-top: 8px; } .si-ueber-btn { margin-top: 10px; flex: none; display: inline-flex; width: auto; } .si-tbl-filter { margin: 6px 0 2px; } .si-tbl-filter input { width: 100%; max-width: 360px; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 11px; font: inherit; font-size: .9rem; background: var(--paper, var(--card)); color: var(--ink); } .si-tbl th[role="button"]:hover { color: var(--ink); } .si-tbl-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } .si-tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .85rem; margin-top: 4px; } .si-tbl th, .si-tbl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--rand); } .si-tbl th { color: var(--muted); font-weight: 600; } .si-tbl td.num, .si-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } .si-tbl tr.si-rest td { opacity: .65; font-style: italic; } .si-tbl tr.si-subtotal td { font-weight: 700; background: var(--flaeche-2, rgba(0,0,0,.04)); border-top: 1px solid var(--rand); border-bottom: 2px solid var(--rand); } /* --- Drilldown Auftragseingang/Umsatz: Klick auf einen Balken -> Tabelle darunter ------------- */ .hit-click { cursor: pointer; } .hit-click:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .ve-drill { margin-top: var(--sp-4); background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow); } .ve-drill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .ve-drill-title { font-weight: 650; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; } .ve-drill-up, .ve-drill-x { min-height: 44px; min-width: 44px; flex: 0 0 auto; } .ve-drill-status, .ve-drill-hint { color: var(--muted); font-size: .94rem; margin: 4px 0 0; } .ve-drill-table { width: 100%; border-collapse: collapse; } .ve-drill-table th, .ve-drill-table td { text-align: left; padding: 0; border-bottom: 1px solid var(--rand); } .ve-drill-table th { color: var(--muted); font-weight: 600; font-size: .9rem; padding: 6px 4px; } .ve-drill-table td { padding: 4px; vertical-align: middle; } .ve-drill-table tr:last-child td { border-bottom: none; } .ve-drill-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ve-drill-table th.num { text-align: right; } /* Aufklappbare Zeile: volle Breite, mindestens 44 px hoch (Fingerbedienung). */ .ve-drill-cell { display: block; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; padding: 10px 6px; border-radius: var(--r-sm); cursor: pointer; } .ve-drill-cell::after { content: " ›"; color: var(--muted); } .ve-drill-cell:hover { background: var(--brand-lime-soft); } .ve-drill-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } /* Legende zum Stapeldiagramm: ohne sie sind die Farben wertlos. */ .ve-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; } .ve-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink); } .ve-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } .ve-legend-dot.s0 { background: var(--c1); } .ve-legend-dot.s1 { background: var(--c2); } .ve-legend-dot.s2 { background: var(--c3); } .ve-legend-dot.s3 { background: var(--c4); } .ve-legend-dot.s4 { background: var(--c5); } .ve-legend-dot.s5 { background: var(--c6); } /* Sammelposten bleibt neutral, damit er nicht wie eine echte Gruppe wirkt. */ .ve-legend-dot.rest, .bd-chart-svg .seg.rest { background: var(--muted); fill: var(--muted); } .bd-chart-svg .seg-click { cursor: pointer; } .bd-chart-svg .seg-click:hover { opacity: .82; } .bd-chart-svg .seg-click:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* --- SAP-Nachschlagen in der Topbar: auf dem Desktop immer sichtbar ------------------------- */ .topsearch { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 0; } .topsearch-input { width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-sm); } .topsearch-input::placeholder { color: var(--muted); } .topsearch-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .topsearch-box { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: min(60vh, 420px); overflow-y: auto; background: var(--card); border: 1px solid var(--rand); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; } .topsearch-group { color: var(--muted); font-size: .82rem; font-weight: 650; padding: 6px 8px 2px; text-transform: uppercase; letter-spacing: .04em; } .topsearch-hit { display: block; width: 100%; min-height: 44px; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; } .topsearch-hit:hover { background: var(--brand-lime-soft); } .topsearch-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .topsearch-hit b { font-weight: 650; } .topsearch-sub { display: block; color: var(--muted); font-size: .88rem; } .topsearch-note { color: var(--muted); font-size: .88rem; padding: 8px 10px; } /* Auf schmalen Geräten weglassen: dort ist der Chat der Weg, und die Topbar braucht den Platz. */ @media (max-width: 860px) { .topsearch { display: none; } } /* --- Kundenbriefing (E4-R3): Auswahl und Viererbild ------------------------------ Mobile-first: die Auswahl ist ein grosses Tap-Ziel, jede Kennzahl steht in einer eigenen Zeile. Die Zeitbasis steht unter dem Titel und nicht neben der Zahl, damit beim Ueberfliegen kein gemeinsamer Zeitraum suggeriert wird. */ .bf-kunde-wahl { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; } .pilot-mode #composer, .pilot-mode #sapSucheForm, .pilot-mode #topLinks, .pilot-mode #chatBtn, .pilot-mode #moreBtn, .pilot-mode #moreMenu { display: none !important; } .pilot-mode .top-actions { display: flex; justify-content: flex-end; gap: 10px; } .pilot-mode .login { min-height: 48px; min-width: 110px; max-width: none; flex: 0 0 auto; padding: 10px 18px; overflow: visible; text-overflow: clip; white-space: nowrap; } .bf-filter-details { margin: 8px 0; border: 1px solid var(--rand); border-radius: 10px; padding: 0 12px; } .bf-filter-details summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 600; } .bf-filter-details[open] .bf-filter-grid { margin-top: 8px; } .pilot-start { max-width: 540px; margin: 40px auto; padding: 24px; } .pilot-start h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; } .pilot-start p { line-height: 1.6; color: var(--muted); } .pilot-start button { margin-top: 16px; min-height: 48px; width: 100%; } .bf-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .bf-filter-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: .86rem; } .bf-kunde-wahl button { min-height: 48px; } .bf-kunde-wahl input, .bf-kunde-wahl select { min-width: 0; max-width: 100%; box-sizing: border-box; } .bf-kunde-label { font-size: .82rem; color: var(--muted); } .bf-kunde-select { min-height: 48px; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: inherit; width: 100%; } .bf-kunde { display: flex; flex-direction: column; gap: 10px; } .bf-kunde .bf-sec { border: 1px solid var(--rand); border-radius: 10px; background: var(--card); padding: 12px; } .bf-kunde-status { margin: 10px 0 8px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); font-size: .9rem; } .bf-kunde-status.loading { color: var(--muted); } .bf-kunde-status.ready, .bf-kunde-status.complete { border-left: 4px solid var(--brand-lime); } .bf-kunde-status.partial, .bf-kunde-status.warning { border-left: 4px solid #b78300; } .bf-kunde-status.error, .bf-kunde-status.unavailable { border-left: 4px solid #b53a3a; } .bf-kunde-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); margin: 10px 0 6px; } .bf-kunde-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8rem; color: var(--muted); margin-bottom: 10px; } .bf-kunde .bf-sec-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .bf-status-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--flaeche); color: var(--muted); max-width: 100%; overflow-wrap: anywhere; } .bf-status-badge.complete { background: color-mix(in srgb, var(--brand-lime) 18%, var(--card)); color: var(--ink); } .bf-status-badge.partial { background: color-mix(in srgb, #d59d10 18%, var(--card)); color: var(--ink); } .bf-status-badge.unavailable { background: color-mix(in srgb, #b53a3a 13%, var(--card)); color: var(--ink); } .bf-sec-zeit { font-size: .78rem; color: var(--muted); margin: -2px 0 6px; } .bf-sec-quelle { font-size: .74rem; color: var(--muted); margin: -2px 0 6px; overflow-wrap: anywhere; } .bf-pt.incomplete { color: var(--muted); font-style: italic; } /* Ein nicht verfuegbarer Abschnitt bleibt sichtbar und wird nur zurueckgenommen. Er darf nie aussehen wie eine Null. */ .bf-sec-weg { opacity: .72; border-left: 3px solid var(--rand); padding-left: 10px; } .bf-kunde-fehler { font-size: .92rem; padding: 10px 0; } .bf-kunde-frei { display: flex; gap: 8px; align-items: stretch; } .bf-kunde-frei .bf-kunde-select { flex: 1 1 auto; } .bf-kunde-frei button { min-height: 48px; padding: 0 16px; white-space: nowrap; } @media (max-width: 520px) { .bf-kunde-kopf { align-items: flex-start; flex-direction: column; gap: 6px; } .bf-kunde-meta { flex-direction: column; gap: 3px; } .bf-kunde .bf-sec-title { align-items: flex-start; } }