/* ===================================================== CSS VARIABLES & RESET ===================================================== */ :root { /* ══ LESBARKEIT IM DUNKELMODUS, korrigiert am 11.09.2026 ══ Kris: "in dunkel modus sieht man die schriften nicht so gut und das ist in juno ueberall so." Nachgemessen statt geraten, mit dem WCAG-Kontrastverhaeltnis. Gefordert sind 4,5:1 fuer normalen Text. Gemessen wurde gegen alle vier Flaechen, die in JUNO vorkommen: --bg #030812, surface (4% Weiss), surface2 (7% Weiss) und die Panels #0d1117. Der schlechteste Wert zaehlt. DREI URSACHEN, alle belegt: 1. --text-secondary und --text-primary werden 57mal benutzt (40 + 16 davon OHNE Ersatzwert) — waren aber NIRGENDS definiert. Eine var()-Angabe auf eine unbekannte Variable ohne Ersatzwert macht die ganze Regel ungueltig; die Schrift erbt dann die Farbe des Elternelements statt der gemeinten. Das ist der Hauptgrund, warum es "ueberall" auffiel und nicht nur an einer Stelle. 2. --text-muted war #5a7a96 und schafft nur 4,45:1 auf dem dunkelsten Grund und 3,90:1 auf den Flaechen — unter der Anforderung. Dabei steht damit sehr viel Kleingedrucktes, teils in 9 bis 11 px. 3. color-scheme fehlte ganz. Ohne diese Zeile zeichnet der Browser seine EIGENEN Bedienelemente hell: die aufgeklappte Auswahlliste, die Datums- und Uhrzeitfelder, die Bildlaufleisten. Genau das war auf Kris' Bildschirmfoto zu sehen — die Ortsauswahl im Fahrten-Fenster war kaum zu entziffern. Eine Zeile, die alle nativen Elemente auf einmal richtigstellt. Die neue Stufenleiter (schlechtester Wert ueber allen vier Flaechen): --text-primary #e6edf3 14,87:1 --text #e2e8f0 14,25:1 --text-secondary #a3b2c0 8,10:1 --text-muted #8aa5bf 6,87:1 Die Abstufung bleibt also deutlich sichtbar — nur eben lesbar. */ color-scheme: dark; --primary: #2d6a4f; --primary-h: #245840; --accent: #22c55e; --accent-2: #06b6d4; --accent-d: #16a34a; --bg: #030812; --surface: rgba(255,255,255,0.04); --surface2: rgba(255,255,255,0.07); --surface3: rgba(255,255,255,0.11); --surface-1: rgba(255,255,255,0.04); --text: #e2e8f0; --text-primary: #e6edf3; --text-secondary: #a3b2c0; --text-muted: #8aa5bf; --border: rgba(34,197,94,0.15); --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; --radius: 14px; --radius-sm: 10px; --shadow: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4); --neon-glow: 0 0 10px rgba(34,197,94,0.5), 0 0 30px rgba(34,197,94,0.2); --neon-hover-shadow: 0 20px 40px rgba(34,197,94,0.2); } body.light { /* Auch hier nachgemessen: --text-muted #64748b kam auf 4,23:1 und lag damit ebenfalls knapp unter der Anforderung. */ color-scheme: light; --bg: #eef2f7; --surface: rgba(255,255,255,0.75); --surface2: rgba(240,244,249,0.8); --surface3: rgba(226,232,244,0.7); --surface-1: rgba(255,255,255,0.75); --text: #1a2940; --text-primary: #111827; --text-secondary: #475569; --text-muted:#556478; --border: rgba(45,106,79,0.18); --shadow: 0 4px 24px rgba(0,0,0,0.1); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html,body { height:100%; overflow:hidden; } body { font-family:'DM Sans',sans-serif; background:#030812; color:var(--text); display:flex; flex-direction:column; transition:color .3s; position:relative; } /* ══════════════════════════════════════════════════════════════════ HINTERGRUND — zwei Varianten, umschaltbar Bis 09.09.2026 gab es nur eine: die animierte. Sie besteht aus drei Lagen (Farbverlauf-Gitter, Sternenfeld, zwei schwebende Kugeln) und war fest verdrahtet — genau deshalb liess sie sich nicht gegen ein Bild tauschen. Jetzt entscheidet eine Klasse am -Element: ohne Klasse → die animierte Variante wie bisher .hg-bild → ein festes Bild, Animation komplett aus Das Bild selbst steht in der Variablen --hg-bild und wird beim Laden aus der Auswahl gesetzt. Die Animation wird dabei nicht nur uebermalt, sondern abgeschaltet: eine Animation, die unsichtbar weiterlaeuft, kostet auf einem Laptop ohne Grafikchip trotzdem Rechenzeit. ══════════════════════════════════════════════════════════════════ */ html.hg-bild body::before, html.hg-bild body::after { animation:none!important; } html.hg-bild body::after { display:none; } /* Sternenfeld weg */ html.hg-bild .orb { display:none!important; } /* schwebende Kugeln weg */ html.hg-bild body::before { background: linear-gradient(rgba(3,8,18,.72), rgba(3,8,18,.72)), var(--hg-bild, none) center center / cover no-repeat fixed, linear-gradient(135deg, #030812 0%, #050d1a 50%, #040a16 100%)!important; background-size:auto, cover, auto!important; opacity:1!important; } /* Das J-Wasserzeichen hinter dem Chat waere neben einem Bildhintergrund doppelt gemoppelt — bei Bildhintergrund also aus. */ html.hg-bild #messages::before { display:none; } /* Deep space animated background + holographic grid */ body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(45,106,79,0.13) 0%, transparent 60%), radial-gradient(ellipse 60% 70% at 85% 80%, rgba(6,182,212,0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(34,197,94,0.04) 0%, transparent 70%), linear-gradient(rgba(34,197,94,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(34,197,94,0.03) 1px, transparent 1px), linear-gradient(135deg, #030812 0%, #050d1a 50%, #040a16 100%); background-size:auto,auto,auto,40px 40px,40px 40px,auto; animation:bgShift 16s ease-in-out infinite alternate; } /* Starfield / particle layer */ body::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: radial-gradient(1px 1px at 8% 12%, rgba(34,197,94,0.55) 0%,transparent 100%), radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.18) 0%,transparent 100%), radial-gradient(1.5px 1.5px at 43% 18%, rgba(6,182,212,0.4) 0%,transparent 100%), radial-gradient(1px 1px at 61% 52%, rgba(34,197,94,0.3) 0%,transparent 100%), radial-gradient(1px 1px at 77% 28%, rgba(255,255,255,0.14) 0%,transparent 100%), radial-gradient(1px 1px at 89% 68%, rgba(6,182,212,0.25) 0%,transparent 100%), radial-gradient(1.5px 1.5px at 33% 74%, rgba(34,197,94,0.35) 0%,transparent 100%), radial-gradient(1px 1px at 53% 88%, rgba(255,255,255,0.16) 0%,transparent 100%), radial-gradient(1px 1px at 14% 63%, rgba(34,197,94,0.22) 0%,transparent 100%), radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,0.18) 0%,transparent 100%), radial-gradient(1px 1px at 95% 44%, rgba(34,197,94,0.18) 0%,transparent 100%), radial-gradient(1px 1px at 38% 55%, rgba(6,182,212,0.2) 0%,transparent 100%); animation:starDrift 40s linear infinite; } @keyframes bgShift { 0%{opacity:.75} 100%{opacity:1} } @keyframes starDrift{ 0%{transform:translateY(0) translateX(0)} 100%{transform:translateY(-18px) translateX(8px)} } /* Floating holographic orbs */ .orb { position:fixed; border-radius:50%; filter:blur(80px); opacity:0.15; pointer-events:none; z-index:0; animation:orbFloat 20s ease-in-out infinite; } .orb-1 { width:600px; height:600px; background:radial-gradient(circle, #22c55e, transparent); top:-200px; left:-200px; animation-delay:0s; } .orb-2 { width:400px; height:400px; background:radial-gradient(circle, #06b6d4, transparent); bottom:-100px; right:-100px; animation-delay:-10s; } @keyframes orbFloat { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(30px,-30px) scale(1.05); } 66% { transform:translate(-20px,20px) scale(0.95); } } body.light .orb { display:none; } /* Lift everything above the background */ #topbar,#layout,#toast,.overlay,#mic-error-banner { position:relative; z-index:1; } /* Light theme overrides */ body.light { background:#eef2f7; } body.light::before,body.light::after { display:none; } /* ===================================================== SCROLLBAR ===================================================== */ ::-webkit-scrollbar { width:4px; height:4px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(34,197,94,0.3); border-radius:2px; } ::-webkit-scrollbar-thumb:hover { background:rgba(34,197,94,0.55); } /* ===================================================== TOP STATUS BAR ===================================================== */ #topbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:54px; background:rgba(3,8,18,0.8); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border-bottom:1px solid rgba(34,197,94,0.2); flex-shrink:0; gap:12px; z-index:10; position:relative; overflow:visible; box-shadow:0 4px 32px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(34,197,94,0.08); } body.light #topbar { background:rgba(238,242,247,0.92); border-bottom-color:rgba(45,106,79,0.18); } .topbar-left { display:flex; align-items:center; gap:10px; flex-shrink:0; } @keyframes shimmer { 0%{background-position:0% center} 100%{background-position:200% center} } .topbar-center { display:flex; align-items:center; gap:14px; flex:1; justify-content:center; } /* Centered JUNO title block */ .juno-title-block { display:flex; align-items:center; gap:12px; } .juno-logo-img { height:40px; width:auto; display:block; } .juno-logo-img, .juno-logo-fallback { animation:logoGlow 3s ease-in-out infinite; } @keyframes logoGlow { 0%,100% { filter:drop-shadow(0 0 8px rgba(34,197,94,0.6)); } 50% { filter:drop-shadow(0 0 20px rgba(34,197,94,0.9)); } } .juno-logo-fallback { width:40px; height:40px; background:linear-gradient(135deg,#2d6a4f,#163d2c); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:20px; font-weight:900; color:#22c55e; box-shadow:0 0 18px rgba(34,197,94,0.45); flex-shrink:0; } .juno-name { font-size:36px; font-weight:700; background:linear-gradient(135deg,#22c55e,#06b6d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 20px rgba(34,197,94,0.5)); font-family:'DM Sans',sans-serif; letter-spacing:1px; line-height:1; flex-shrink:0; } body.light .juno-name { background:linear-gradient(135deg,#16a34a,#0891b2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:none; } .juno-subtitles { display:flex; flex-direction:column; justify-content:center; gap:1px; } .juno-sub1 { font-size:13px; color:#e2e8f0; white-space:nowrap; } .juno-sub2 { font-size:11px; color:#94a3b8; white-space:nowrap; } .status-pill { display:flex; align-items:center; gap:7px; padding:5px 14px; background:rgba(255,255,255,0.05); backdrop-filter:blur(12px); border:1px solid rgba(34,197,94,0.12); border-radius:20px; font-size:11.5px; color:var(--text-muted); white-space:nowrap; } body.light .status-pill { background:rgba(255,255,255,0.6); border-color:rgba(45,106,79,0.15); } .dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex-shrink:0; transition:background .4s,box-shadow .4s; } .dot.green { background:var(--accent); animation:neonPulse 1.8s infinite; } .dot.red { background:var(--danger); box-shadow:0 0 8px rgba(239,68,68,0.8); } .dot.orange { background:var(--warning); animation:pulseRing 1.5s infinite; } @keyframes pulseRing { 0% { box-shadow:0 0 0 0 rgba(245,158,11,.8); } 70% { box-shadow:0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow:0 0 0 0 rgba(245,158,11,0); } } /* Neon pulse – used on active mic / listening indicators */ @keyframes neonPulse { 0%,100% { box-shadow:0 0 5px #22c55e, 0 0 10px #22c55e; } 50% { box-shadow:0 0 20px #22c55e, 0 0 40px #22c55e, 0 0 60px #22c55e; } } /* Keep old pulse-dot name alive for any remaining references */ @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} } .topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; } /* Teil D: FlowMind/Werkstatt Kopfzeilen-Buttons — "besondere Eingänge". Gradient-Border-Trick: zwei Hintergrund-Ebenen (padding-box = Füllung, border-box = Gradient), kein extra Wrapper-Element nötig. Farbe/Glow pro Variante über CSS-Variablen, damit Keyframes/Hover eine Regel bedienen. */ .header-entry-btn { position:relative; display:inline-flex; align-items:center; gap:6px; padding:7px 16px 7px 12px; border-radius:999px; border:1.5px solid transparent; background: linear-gradient(rgba(8,12,22,0.78),rgba(8,12,22,0.78)) padding-box, var(--header-entry-gradient) border-box; color:#fff; font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; animation:headerEntryPulse 2.5s ease-in-out infinite; } .header-entry-btn .header-entry-icon { font-size:15px; line-height:1; } .header-entry-btn.flowmind { --header-entry-gradient:linear-gradient(135deg,#3b82f6,#8b5cf6); --header-entry-glow:rgba(139,92,246,0.55); } .header-entry-btn.werkstatt { --header-entry-gradient:linear-gradient(135deg,#f59e0b,#f97316); --header-entry-glow:rgba(249,115,22,0.55); } .header-entry-btn.leitstand { --header-entry-gradient:linear-gradient(135deg,#2E7D32,#2AA8A0); --header-entry-glow:rgba(42,168,160,0.55); } .header-entry-btn.glowmind { --header-entry-gradient:linear-gradient(135deg,#8B5CF6,#EC4899,#F43F5E); --header-entry-glow:rgba(236,72,153,0.65); } .topbar-divider { width:1px; align-self:stretch; margin:6px 4px; background:rgba(255,255,255,0.12); border-radius:1px; } body.light .topbar-divider { background:rgba(0,0,0,0.12); } @keyframes headerEntryPulse { 0%,100% { box-shadow:0 0 0 0 var(--header-entry-glow); } 50% { box-shadow:0 0 12px 3px var(--header-entry-glow); } } .header-entry-btn:hover, .header-entry-btn:focus-visible { animation-play-state:paused; box-shadow:0 0 14px 2px var(--header-entry-glow); transform:scale(1.04); } .header-entry-btn:active { transform:scale(0.98); } @media (prefers-reduced-motion:reduce) { .header-entry-btn { animation:none; } } body.light .header-entry-btn { background: linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)) padding-box, var(--header-entry-gradient) border-box; color:#1a2940; } @media (max-width:600px) { .header-entry-btn .header-entry-label { display:none; } .header-entry-btn { padding:8px 10px; gap:0; } } .top-btn { padding:6px 13px; background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); border:1px solid rgba(34,197,94,0.14); border-radius:9px; transform-style:preserve-3d; color:var(--text); font-family:'DM Sans',sans-serif; font-size:12px; cursor:pointer; transition:all .22s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; } .top-btn:hover { background:linear-gradient(135deg,rgba(45,106,79,0.55),rgba(34,197,94,0.18)); border-color:rgba(34,197,94,0.5); color:#fff; box-shadow:0 20px 40px rgba(34,197,94,0.2); transform:translateY(-3px) rotateX(5deg); } .top-btn:active { transform:translateY(1px); box-shadow:none; } body.light .top-btn { background:rgba(255,255,255,0.7); border-color:rgba(45,106,79,0.2); color:#1a2940; } body.light .top-btn:hover { background:rgba(45,106,79,0.12); color:#1a2940; } /* ── ⚙ Menu (2026-08-18): sammelt Design/Health/Einstellungen/Vollbild/ Mikrofon-Mute/Anordnen hinter einem Knopf statt sie einzeln in der Kopfzeile aufzureihen. Gleiche Farb-/Blur-Sprache wie #topbar selbst. */ .top-menu-wrap { position:relative; } .top-menu-dropdown { position:absolute; top:calc(100% + 8px); right:0; z-index:50; display:flex; flex-direction:column; gap:3px; min-width:210px; padding:8px; background:rgba(3,8,18,0.97); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(34,197,94,0.25); border-radius:12px; box-shadow:0 16px 44px -16px rgba(0,0,0,.85); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), visibility .18s; } .top-menu-dropdown.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); } body.light .top-menu-dropdown { background:rgba(238,242,247,0.98); border-color:rgba(45,106,79,0.25); } .top-menu-item { display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px; border-radius:8px; border:none; background:transparent; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px; text-align:left; cursor:pointer; white-space:nowrap; min-height:38px; transition:background .15s; } .top-menu-item:hover { background:rgba(34,197,94,0.14); } body.light .top-menu-item:hover { background:rgba(45,106,79,0.12); } @media (max-width:600px) { .top-menu-dropdown { position:fixed; left:8px; right:8px; top:54px; width:auto; min-width:0; transform-origin:top center; } } #mute-btn { padding:5px 11px; font-size:13px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.25); transition:all .2s; } #mute-btn.muted { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.5); color:#f87171; box-shadow:0 0 10px rgba(239,68,68,0.25); } /* Model switcher dropdown */ .model-switcher { position:relative; } .model-btn { padding:5px 11px; font-size:11px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.25); border-radius:9px; color:var(--text); cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; display:flex; align-items:center; gap:5px; transition:all .2s; } .model-btn:hover { background:rgba(34,197,94,0.18); border-color:rgba(34,197,94,0.5); } .model-menu { position:absolute; top:calc(100% + 6px); left:0; background:rgba(5,13,26,0.97); border:1px solid rgba(34,197,94,0.2); border-radius:10px; padding:4px; min-width:170px; display:none; flex-direction:column; gap:2px; z-index:999; box-shadow:0 8px 32px rgba(0,0,0,0.5); } .model-menu.open { display:flex; } .model-opt { padding:7px 12px; border-radius:7px; text-align:left; background:transparent; border:none; color:var(--text); font-size:12px; font-family:'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; } .model-opt:hover { background:rgba(34,197,94,0.12); } .model-opt.active-model { background:rgba(34,197,94,0.15); color:#22c55e; } body.light .model-btn { background:rgba(45,106,79,0.06); border-color:rgba(45,106,79,0.25); color:#1a2940; } body.light .model-menu { background:rgba(238,242,247,0.98); border-color:rgba(45,106,79,0.2); } body.light .model-opt:hover { background:rgba(45,106,79,0.1); } #mute-btn.muted:hover { background:rgba(239,68,68,0.28); border-color:rgba(239,68,68,0.7); color:#fff; } /* ===================================================== MAIN LAYOUT ===================================================== */ #layout { display:grid; grid-template-columns:252px 1fr 278px; flex:1; overflow:hidden; } /* ===================================================== LEFT SIDEBAR ===================================================== */ #sidebar { background:rgba(255,255,255,0.02); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-right:1px solid rgba(34,197,94,0.15); border-left:2px solid rgba(34,197,94,0.3); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } body.light #sidebar { background:rgba(255,255,255,0.82); border-right-color:rgba(45,106,79,0.15); border-left-color:rgba(45,106,79,0.3); } .sidebar-inner { padding:14px; display:flex; flex-direction:column; gap:14px; } .section-title { font-size:9.5px; text-transform:uppercase; letter-spacing:1.8px; color:rgba(34,197,94,0.6); font-weight:700; padding:0 2px; margin-bottom:6px; } body.light .section-title { color:rgba(45,106,79,0.7); } /* Mini calendar widget (sidebar, replaces the old Kalender quick tile) */ .mini-cal { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; cursor:pointer; max-height:260px; overflow-y:auto; transition:border-color .2s; } .mini-cal:hover { border-color:rgba(34,197,94,0.4); } .mini-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .mini-cal-title { font-size:12px; font-weight:700; color:var(--text); text-transform:capitalize; } .mini-cal-nav { background:none; border:none; color:var(--text-muted); font-size:14px; line-height:1; padding:2px 6px; border-radius:6px; cursor:pointer; } .mini-cal-nav:hover { background:rgba(34,197,94,0.15); color:var(--accent); } .mini-cal-daynames { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px; } .mini-cal-daynames span { font-size:9px; color:var(--text-muted); text-align:center; } .mini-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .mini-cal-day { position:relative; display:flex; align-items:center; justify-content:center; height:22px; font-size:11px; color:var(--text); border-radius:6px; cursor:pointer; } .mini-cal-day:hover { background:rgba(34,197,94,0.15); } .mini-cal-day.other-month { opacity:0.3; } .mini-cal-day.today { background:var(--accent); color:#fff; font-weight:700; } .mini-cal-day-dot { position:absolute; bottom:2px; width:4px; height:4px; border-radius:50%; background:var(--accent); } .mini-cal-day.today .mini-cal-day-dot { background:#fff; } /* Quick buttons */ .qbtn { width:100%; display:flex; align-items:center; gap:9px; padding:9px 12px; background:rgba(34,197,94,0.05); border:1px solid rgba(34,197,94,0.1); border-left:3px solid transparent; border-radius:12px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:12.5px; cursor:pointer; text-align:left; transition:all .3s cubic-bezier(.34,1.56,.64,1); transform-style:preserve-3d; margin-bottom:5px; position:relative; overflow:hidden; } .qbtn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(34,197,94,0.1),transparent); opacity:0; transition:opacity .2s; } .qbtn:hover { background:rgba(34,197,94,0.15); border-color:rgba(34,197,94,0.4); color:#fff; transform:translateY(-3px) rotateX(5deg); box-shadow:0 20px 40px rgba(34,197,94,0.2); } .qbtn:hover::before { opacity:1; } .qbtn:active { transform:translateY(-1px) scale(0.98); } .qbtn.active { background:rgba(34,197,94,0.2); border-left-color:#22c55e; box-shadow:var(--neon-glow); } .qbtn .qemoji { font-size:15px; flex-shrink:0; } .qbtn-biz { border-color:rgba(184,134,11,0.2); background:rgba(184,134,11,0.05); } .qbtn-biz:hover { background:rgba(184,134,11,0.18); border-color:rgba(240,192,64,0.45); box-shadow:0 4px 16px rgba(184,134,11,0.2); } body.light .qbtn { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.08); color:#1a2940; } body.light .qbtn:hover { background:rgba(45,106,79,0.1); color:#1a2940; box-shadow:none; } /* Custom command list */ .cmd-item { display:flex; align-items:center; gap:6px; padding:7px 10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:10px; margin-bottom:4px; font-size:12px; transition:all .2s; } .cmd-item:hover { border-color:rgba(34,197,94,0.22); background:rgba(34,197,94,0.04); } .cmd-name { flex:1; cursor:pointer; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cmd-name:hover { color:var(--accent); } .cmd-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; padding:2px 4px; border-radius:4px; flex-shrink:0; } .cmd-del:hover { color:var(--danger); background:rgba(239,68,68,.1); } /* Memory section in sidebar */ .mem-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; } .cat-tag { padding:2px 8px; border-radius:6px; font-size:10px; cursor:pointer; font-weight:600; transition:all .2s; backdrop-filter:blur(4px); } .cat-tag:hover { opacity:.75; transform:scale(1.06); } .cat-kunden { background:rgba(30,58,95,0.6); color:#60a5fa; border:1px solid rgba(96,165,250,0.2); } .cat-mitarbeiter { background:rgba(42,30,95,0.6); color:#a78bfa; border:1px solid rgba(167,139,250,0.2); } .cat-tarife { background:rgba(26,53,32,0.6); color:#4ade80; border:1px solid rgba(74,222,128,0.2); } .cat-aufgaben { background:rgba(61,24,0,0.6); color:#fb923c; border:1px solid rgba(251,146,60,0.2); } .cat-notizen { background:rgba(45,45,0,0.6); color:#fbbf24; border:1px solid rgba(251,191,36,0.2); } .cat-alle { background:rgba(255,255,255,0.06); color:var(--text-muted); border:1px solid rgba(255,255,255,0.1); } .mem-scroll { max-height:180px; overflow-y:auto; } .mem-entry { display:flex; align-items:flex-start; gap:6px; padding:7px 9px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:10px; margin-bottom:4px; font-size:11px; line-height:1.4; transition:all .2s; } .mem-entry:hover { border-color:rgba(34,197,94,0.22); } .mem-text { flex:1; } .mem-meta { font-size:10px; color:var(--text-muted); margin-top:2px; } .mem-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:11px; flex-shrink:0; } .mem-del:hover { color:var(--danger); } /* ===================================================== CHAT AREA ===================================================== */ #chat-area { display:flex; flex-direction:column; overflow:hidden; background:transparent; position:relative; } #messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth; position:relative; } #messages::before { content:''; position:absolute; inset:0; background-image:url('/public/logo.svg'); background-repeat:no-repeat; background-position:center center; background-size:60% auto; background-attachment:fixed; opacity:0.06; pointer-events:none; z-index:0; } #messages > * { position:relative; z-index:1; } /* Message bubbles */ .msg { display:flex; gap:10px; max-width:780px; animation:fadein .3s ease; } .msg.user { flex-direction:row-reverse; align-self:flex-end; } .msg.asst { align-self:flex-start; } @keyframes fadein { from { opacity:0; transform:translateY(12px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } } .msg-av { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; margin-top:2px; transition:transform .2s; } .msg-av:hover { transform:scale(1.1) rotate(-4deg); } .msg.user .msg-av { background:linear-gradient(135deg,#2d6a4f,#163d2c); box-shadow:0 0 14px rgba(34,197,94,0.35); } .msg.asst .msg-av { background:rgba(255,255,255,0.06); border:1px solid rgba(34,197,94,0.16); box-shadow:0 0 10px rgba(34,197,94,0.1); } .msg-body { max-width:88%; } .msg-bubble { background:rgba(255,255,255,0.06); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:12px 16px; font-size:13.5px; line-height:1.65; word-break:break-word; box-shadow:0 4px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.07); transition:box-shadow .2s, transform .2s; } .msg-bubble:hover { box-shadow:0 8px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.1); transform:translateY(-1px); } .msg.user .msg-bubble { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.2); border-radius:16px 16px 4px 16px; box-shadow:0 4px 18px rgba(34,197,94,0.14), 0 0 0 1px rgba(34,197,94,0.08); } .msg.asst .msg-bubble { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.08); border-radius:4px 16px 16px 16px; border-left:3px solid rgba(34,197,94,0.6); } body.light .msg-bubble { background:rgba(255,255,255,0.72); border-color:rgba(0,0,0,0.08); box-shadow:0 2px 12px rgba(0,0,0,0.08); } body.light .msg.user .msg-bubble { background:linear-gradient(135deg,rgba(45,106,79,0.12),rgba(34,197,94,0.05)); } .msg.system-reminder .msg-av { background:rgba(245,158,11,0.15); border-color:rgba(245,158,11,0.35); box-shadow:0 0 10px rgba(245,158,11,0.15); } .msg.system-reminder .msg-bubble { border-left:3px solid #f59e0b; background:rgba(245,158,11,0.07); border-color:rgba(245,158,11,0.22); } body.light .msg.system-reminder .msg-bubble { background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.3); } /* Image preview inside chat bubble */ .msg-img-preview { max-width:220px; border-radius:10px; margin-bottom:8px; border:1px solid rgba(34,197,94,0.25); box-shadow:0 4px 16px rgba(0,0,0,0.4); display:block; } .msg-meta { display:flex; align-items:center; gap:8px; margin-top:6px; padding:0 2px; } .msg-time { font-size:10.5px; color:var(--text-muted); } .fb-row { display:flex; gap:5px; } .fb-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:7px; padding:3px 9px; cursor:pointer; font-size:13px; transition:all .2s; color:var(--text-muted); backdrop-filter:blur(8px); } .fb-btn:hover { background:rgba(255,255,255,0.1); transform:scale(1.14) translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3); } .fb-btn.active { background:linear-gradient(135deg,rgba(45,106,79,0.5),rgba(34,197,94,0.2)); border-color:rgba(34,197,94,0.4); color:#fff; box-shadow:0 0 12px rgba(34,197,94,0.3); } /* Typing indicator */ .typing-bubble { display:flex; gap:6px; padding:13px 18px; background:rgba(255,255,255,0.06); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,0.1); border-radius:4px 16px 16px 16px; width:fit-content; } .typing-bubble span { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:bounce .9s infinite, neonPulse 1.8s infinite; } .typing-bubble span:nth-child(2) { animation-delay:.2s; } .typing-bubble span:nth-child(3) { animation-delay:.4s; } @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } /* ===================================================== CHAT MINIMIZE + FUTURISTIC HOMEPAGE ===================================================== */ .chat-toggle-btn { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:5; padding:6px 16px; background:rgba(255,255,255,0.04); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(34,197,94,0.3); border-radius:20px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:600; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(34,197,94,0.05); transition:all .25s cubic-bezier(.34,1.56,.64,1); } .chat-toggle-btn:hover { background:rgba(34,197,94,0.14); border-color:rgba(34,197,94,0.55); box-shadow:0 0 18px rgba(34,197,94,0.3), 0 4px 16px rgba(0,0,0,0.3); transform:translateX(-50%) translateY(-2px); } body.light .chat-toggle-btn { background:rgba(255,255,255,0.75); color:#1a2940; } .chat-panel { flex:1; min-height:0; display:flex; flex-direction:column; transition:all .4s cubic-bezier(0.4,0,0.2,1); overflow:hidden; } .chat-panel.minimized { flex:0 0 0; max-height:0; opacity:0; } .homepage-view { display:none; } /* NICHT ÄNDERN — Mikrofon-Icon-Layout, siehe Fix Juli 2026. Ursache des wiederholten Bugs: html/body/#chat-area sind überall overflow:hidden, und dieser Container zentrierte seinen Inhalt (Begrüßung + beide Kachel-Gruppen + Mic-Button) ohne eigenes Overflow-Handling. Sobald deren Summenhöhe die verfügbare Höhe übersteigt (z.B. durch neu hinzugekommene Kacheln), wurden obere/untere Icons unsichtbar abgeschnitten UND waren nicht scrollbar erreichbar — auf Laptop, iPhone Safari und PC-Vollbild gleichermaßen, je nach Viewport-Höhe. Fix: overflow-y:auto macht den Bereich bei Bedarf scrollbar; "safe center" zentriert weiterhin wenn genug Platz ist, richtet aber automatisch oben aus statt abzuschneiden, sobald der Inhalt nicht mehr hineinpasst (mit Fallback auf Start-Ausrichtung in Browsern ohne "safe"-Unterstützung — nie wieder unsichtbares Abschneiden). */ .homepage-view.visible { display:flex; flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:safe center; gap:36px; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:fadeIn .4s ease; position:relative; z-index:1; /* Nur additiver Freiraum am Scroll-Ende (Uren-Knopf soll nicht am Rand kleben) — rührt NICHTS an der oben dokumentierten Overflow/Zentrier- Logik an. */ padding-bottom:48px; } .home-greeting { text-align:center; } .home-greeting-text { font-size:32px; font-weight:700; background:linear-gradient(135deg,#22c55e,#06b6d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 20px rgba(34,197,94,0.6)); font-family:'DM Sans',sans-serif; } body.light .home-greeting-text { filter:none; } .home-greeting-datetime { font-size:13px; color:var(--text-muted); margin-top:6px; letter-spacing:.3px; } /* Homepage tile layout: a single grid holds every tile (grid-auto-flow fills cells left-to-right, row by row, so an incomplete last row just stays short — no filler cells, no hardcoded row count). The mic is a flex sibling BEFORE the grid, not a grid cell itself, so it's always centered above the tiles by .homepage-tiles-wrap's own flex centering, independent of tile count or row count. */ .homepage-tiles-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; } .home-tiles-group { display:grid; grid-auto-flow:row; grid-template-columns:repeat(3, 140px); gap:20px; justify-content:center; } .home-tile { width:140px; height:140px; flex-shrink:0; background:rgba(255,255,255,0.03); border:1px solid rgba(34,197,94,0.2); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-align:center; padding:8px; transform-style:preserve-3d; transition:all .3s cubic-bezier(.34,1.56,.64,1); } .home-tile:hover { transform:translateY(-4px) rotateX(5deg); border-color:rgba(34,197,94,0.55); box-shadow:0 20px 40px rgba(34,197,94,0.2); background:rgba(34,197,94,0.06); } .home-tile-icon { font-size:42px; line-height:1; } .home-tile-name { font-size:13.5px; font-weight:700; color:var(--text); } .home-tile-status { font-size:10.5px; color:var(--accent); opacity:0.85; } body.light .home-tile { background:rgba(255,255,255,0.7); } /* Teil E: Homepage-Kategorien — E4 gilt hier: keine .home-tile wird entfernt oder umgeschrieben, nur per Klasse ein-/ausgeblendet (Ebene 1) bzw. kurz hervorgehoben (Suche/Sprung-Ziel). */ .home-tile-kat-hidden { display:none !important; } @keyframes homeTileHighlight { 0%,100% { box-shadow:none; } 30%,70% { box-shadow:0 0 0 3px rgba(34,197,94,0.6), 0 0 24px rgba(34,197,94,0.35); } } .home-tile-highlight { animation:homeTileHighlight 1.6s ease-in-out; } /* "Heute"-Streifen — E1: max. 4 Einträge, nur sichtbar wenn nicht leer (JS toggelt display:none/''), niemals ein eigener Fehlerzustand. */ .home-heute-strip { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:900px; } .home-heute-item { display:flex; align-items:center; gap:6px; padding:8px 14px; min-height:44px; box-sizing:border-box; border-radius:20px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); font-size:12.5px; color:var(--text-muted); white-space:nowrap; cursor:pointer; transition:background .2s, color .2s; } .home-heute-item:hover { background:rgba(34,197,94,0.1); color:var(--text); } /* Kachel-Suche */ .home-tile-search-wrap { position:relative; width:100%; max-width:420px; } .home-tile-search-input { width:100%; box-sizing:border-box; min-height:44px; padding:10px 16px; border-radius:22px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); color:var(--text); font-size:13.5px; font-family:'DM Sans',sans-serif; } .home-tile-search-input:focus { outline:none; border-color:rgba(34,197,94,0.5); } body.light .home-tile-search-input { background:rgba(255,255,255,0.75); color:#1a2940; } .home-tile-search-results { position:absolute; top:calc(100% + 8px); left:0; right:0; background:rgba(5,13,26,0.98); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:6px; z-index:60; max-height:340px; overflow-y:auto; box-shadow:0 16px 40px rgba(0,0,0,0.45); } body.light .home-tile-search-results { background:rgba(255,255,255,0.98); } .home-tile-search-result { display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:44px; box-sizing:border-box; border-radius:9px; cursor:pointer; font-size:13px; color:var(--text); } .home-tile-search-result:hover { background:rgba(34,197,94,0.1); } .home-tile-search-result-kat { margin-left:auto; font-size:10.5px; color:var(--text-muted); white-space:nowrap; } .home-tile-search-empty { padding:12px; font-size:12.5px; color:var(--text-muted); text-align:center; } /* Ebene 0: Kategorie-Karten. Akzentfarbe pro Kategorie sparsam über eine CSS-Variable (--kat-farbe, von JS pro Karte gesetzt) — nur Rahmen, sonst bleibt es dunkel/ruhig wie der Rest der App (E3: "kein Farb-Zirkus"). */ .home-kategorien-grid { display:grid; grid-template-columns:repeat(5, minmax(150px, 1fr)); gap:16px; width:100%; max-width:1100px; } .home-kategorie-karte { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 14px; min-height:44px; box-sizing:border-box; border-radius:18px; background:rgba(255,255,255,0.035); border:1px solid color-mix(in srgb, var(--kat-farbe, #666) 35%, transparent); border-left:3px solid var(--kat-farbe, rgba(255,255,255,0.3)); cursor:pointer; transition:transform .2s, background .2s; } .home-kategorie-karte:hover { background:color-mix(in srgb, var(--kat-farbe, #666) 10%, rgba(255,255,255,0.04)); transform:translateY(-3px); } body.light .home-kategorie-karte { background:rgba(255,255,255,0.7); } .home-kategorie-karte-icon { font-size:34px; line-height:1; } .home-kategorie-karte-name { font-size:14px; font-weight:700; color:var(--text); text-align:center; } .home-kategorie-karte-status { font-size:10.5px; color:var(--text-muted); text-align:center; min-height:14px; } /* Ebene 1: geöffnete Kategorie */ .home-kategorie-detail { width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; } .home-breadcrumb { display:flex; align-items:center; gap:6px; width:100%; max-width:1100px; font-size:13px; color:var(--text-muted); } .home-breadcrumb button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; font-family:'DM Sans',sans-serif; padding:6px 10px; min-height:44px; border-radius:8px; display:flex; align-items:center; gap:4px; } .home-breadcrumb button:hover { background:rgba(255,255,255,0.07); color:var(--text); } .home-breadcrumb-current { color:var(--kat-farbe, var(--text)); font-weight:700; } @media (max-width:600px) { .home-kategorien-grid { grid-template-columns:repeat(2, 1fr); gap:10px; } .home-kategorie-karte { padding:18px 8px; } .home-kategorie-karte-icon { font-size:28px; } .home-tiles-group { grid-template-columns:repeat(2, 1fr); } } /* KI-Zentrale big tile in the right sidebar: same border/radius/glow as .home-tile, just full-width instead of a fixed 140x140 square. */ .rp-ai-tile { width:100%; height:auto; min-height:100px; padding:14px; } .rp-ai-tile.turbo-active { border-color:rgba(56,189,248,0.55); background:rgba(56,189,248,0.07); } .rp-ai-tile.turbo-active:hover { border-color:rgba(56,189,248,0.75); box-shadow:0 20px 40px rgba(56,189,248,0.2); background:rgba(56,189,248,0.1); } .rp-ai-tile.turbo-active .home-tile-status { color:#7dd3fc; } .rp-ai-tile.superturbo-active { border-color:rgba(245,158,11,0.55); background:linear-gradient(135deg,rgba(245,158,11,0.09),rgba(168,85,247,0.09)); } .rp-ai-tile.superturbo-active:hover { border-color:rgba(245,158,11,0.8); box-shadow:0 20px 40px rgba(245,158,11,0.22); background:linear-gradient(135deg,rgba(245,158,11,0.13),rgba(168,85,247,0.13)); } .rp-ai-tile.superturbo-active .home-tile-status { color:#fbbf24; } #rp-ki-kette-section { padding:10px 12px; } .ki-row { display:flex; align-items:flex-start; gap:6px; padding:1px 0; } .ki-row-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px; } .ki-dot-ok { background:#4ade80; } .ki-dot-warn { background:#f59e0b; } .ki-dot-fehler { background:#ef4444; } .ki-dot-leer { background:#6b7280; } .ki-row-body { flex:1;min-width:0; } .ki-row-name { font-weight:600; color:var(--text); } .ki-row-detail { color:var(--text-muted);font-size:10px;line-height:1.4; } .ki-row-limit { color:var(--text-muted);font-size:9.5px;font-style:italic; } /* App's grid – small preview cards (not full-size home tiles) */ .apps-card { width:100%; height:120px; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; cursor:pointer; text-align:center; padding:10px; transition:all .2s ease; } .apps-card:hover { border-color:rgba(34,197,94,0.5); background:rgba(34,197,94,0.08); transform:translateY(-2px); } .apps-card-icon { font-size:26px; line-height:1; } .apps-card-name { font-size:12.5px; font-weight:600; color:var(--text); } .apps-card-desc { font-size:10.5px; color:var(--text-muted); } .apps-card-del { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--red,#ff4d6a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:1; } .apps-card-edit { position:absolute; top:-6px; left:-6px; width:22px; height:22px; border-radius:50%; background:var(--accent,#4b9fff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:1; } .apps-card-order { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); display:flex; gap:2px; } .apps-card-order button { width:20px; height:18px; border-radius:5px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:10px; cursor:pointer; line-height:1; padding:0; } body.light .apps-card { background:rgba(255,255,255,0.7); } .home-mic { width:150px; height:150px; flex-shrink:0; border-radius:50%; background:#000; border:2px solid rgba(34,197,94,0.5); box-shadow:0 0 30px rgba(34,197,94,0.4); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; padding:0; overflow:hidden; transition:box-shadow .3s, border-color .3s; } .home-mic:hover { box-shadow:0 0 40px rgba(34,197,94,0.6); } .home-mic::after { content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background:linear-gradient(180deg, transparent, rgba(34,197,94,0.6), rgba(6,182,212,0.5), transparent); animation:micLaserSweep 4s linear infinite; pointer-events:none; opacity:0.5; } @keyframes micLaserSweep { 0% { left:0; opacity:0; } 10% { opacity:0.5; } 90% { opacity:0.5; } 100% { left:100%; opacity:0; } } .home-mic.mic-listening::after { display:none; } @keyframes micListenGlow { 0% { box-shadow:0 0 30px rgba(34,197,94,0.4); } 100% { box-shadow:0 0 55px rgba(34,197,94,0.8); } } .home-mic.mic-listening { animation:micListenGlow 1.2s ease-in-out infinite alternate; } @keyframes micSpeakGlow { 0% { box-shadow:0 0 30px rgba(6,182,212,0.4); } 100% { box-shadow:0 0 55px rgba(6,182,212,0.85); } } .home-mic.mic-speaking { border-color:rgba(6,182,212,0.6); animation:micSpeakGlow 1.2s ease-in-out infinite alternate; } .mic-laser { display:block; width:75%; height:2px; background:#22c55e; border-radius:2px; animation:laserIdle 2s ease-in-out infinite; } @keyframes laserIdle { 0%,100% { opacity:0.5; transform:scaleX(1); box-shadow:0 0 6px #22c55e; } 50% { opacity:1; transform:scaleX(1.05); box-shadow:0 0 20px #22c55e, 0 0 40px #22c55e; } } @keyframes laserSpeak { 0% { transform:translateY(0) scaleX(1); } 20% { transform:translateY(-10px) scaleX(0.7); } 40% { transform:translateY(5px) scaleX(1.2); } 60% { transform:translateY(-6px) scaleX(0.85); } 80% { transform:translateY(8px) scaleX(1.1); } 100% { transform:translateY(0) scaleX(1); } } .home-mic.juno-speaking .mic-laser { animation:laserSpeak 0.5s ease-in-out infinite; box-shadow:0 0 20px #22c55e, 0 0 40px #22c55e; } .mic-eq { display:none; align-items:flex-end; justify-content:center; height:32px; } .home-mic.mic-listening .mic-laser { display:none; } .home-mic.mic-listening .mic-eq { display:flex; } .eq-bar { display:inline-block; width:4px; height:14px; background:#22c55e; border-radius:2px; box-shadow:0 0 6px #22c55e; margin:0 2px; animation:eqBar 0.4s ease-in-out infinite alternate; } .eq-bar:nth-child(1) { animation-delay:0s; height:10px; } .eq-bar:nth-child(2) { animation-delay:0.1s; height:22px; } .eq-bar:nth-child(3) { animation-delay:0.2s; height:30px; } .eq-bar:nth-child(4) { animation-delay:0.1s; height:18px; } .eq-bar:nth-child(5) { animation-delay:0s; height:12px; } @keyframes eqBar { 0% { height:8px; opacity:0.6; } 100% { height:30px; opacity:1; } } /* ── Uren Start/Stopp-Knopf (2026-08, v2) ────────────────────────────── Geometrisch identisch zu .home-mic (150px/110px Kreis, schwarzer Grund, Glow-Rand, Laser-Sweep) — nur Farbe (JUNO-Grün/Rot) und Inhalt (Icon + ggf. Timer statt Mikrofon-EQ) unterscheiden sich. .home-mic selbst wird nicht angefasst. */ .home-uren-btn { width:150px; height:150px; flex-shrink:0; border-radius:50%; background:#000; border:2px solid rgba(63,174,99,0.5); box-shadow:0 0 30px rgba(63,174,99,0.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; position:relative; padding:0; overflow:hidden; transition:box-shadow .3s, border-color .3s; margin:24px auto 0; /* Abstand zu den Kacheln darüber + horizontal zentriert */ } .home-uren-btn:hover { box-shadow:0 0 40px rgba(63,174,99,0.6); } .home-uren-btn::after { content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background:linear-gradient(180deg, transparent, rgba(63,174,99,0.6), transparent); animation:urenLaserSweep 4s linear infinite; pointer-events:none; opacity:0.5; } @keyframes urenLaserSweep { 0% { left:0; opacity:0; } 10% { opacity:0.5; } 90% { opacity:0.5; } 100% { left:100%; opacity:0; } } .home-uren-btn-icon { font-size:44px; color:#3FAE63; line-height:1; } .home-uren-btn-timer { font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:700; color:#EDEFEC; } .home-uren-btn.aktief { border-color:rgba(192,57,43,0.6); box-shadow:0 0 30px rgba(192,57,43,0.4); } .home-uren-btn.aktief:hover { box-shadow:0 0 40px rgba(192,57,43,0.6); } .home-uren-btn.aktief::after { display:none; } /* Timer soll ruhig/lesbar bleiben, kein Sweep drüber */ .home-uren-btn.aktief .home-uren-btn-icon { font-size:22px; color:#C0392B; } @media (max-width:768px) { .home-uren-btn { width:110px; height:110px; } .home-uren-btn-icon { font-size:32px; } .home-uren-btn.aktief .home-uren-btn-icon { font-size:17px; } .home-uren-btn-timer { font-size:16px; } } @media (max-width:480px) { .homepage-view.visible { padding-bottom:32px; } /* etwas weniger Luft als Desktop (48px) */ } /* ── Uren-Locatie-Auswahl-Modal (2026-08) — Klick auf .home-uren-btn im Ruhezustand. Desktop: zentriert. Handy (≤480px): Bottom-Sheet. ──────── */ .uren-locatie-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:500; opacity:0; pointer-events:none; transition:opacity .2s; } .uren-locatie-modal-backdrop.open { opacity:1; pointer-events:auto; } .uren-locatie-modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.95); width:92vw; max-width:420px; max-height:80vh; background:var(--surface-1,#0d1117); border:1px solid var(--border); border-radius:16px; z-index:501; display:flex; flex-direction:column; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; } .uren-locatie-modal.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); } .ulm-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; } .ulm-title { font-weight:700; font-size:15px; color:var(--text-primary); } .ulm-close { background:transparent; border:none; color:var(--text-secondary); font-size:18px; cursor:pointer; width:36px; height:36px; } .ulm-list { overflow-y:auto; flex:1; } .ulm-item { display:flex; align-items:center; gap:10px; width:100%; min-height:60px; padding:0 18px; background:none; border:none; border-bottom:1px solid var(--border); color:var(--text-primary); font-size:14px; font-family:inherit; cursor:pointer; text-align:left; } .ulm-item:last-child { border-bottom:none; } .ulm-item:hover, .ulm-item:active { background:rgba(63,174,99,.08); } .ulm-empty { padding:20px 18px; color:var(--text-secondary); font-size:13px; } .ulm-cancel { margin:14px 18px 18px; padding:12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0; } @media (max-width:480px) { .uren-locatie-modal { left:0; top:auto; bottom:0; transform:translateY(100%); width:100%; max-width:100%; max-height:75vh; border-radius:20px 20px 0 0; } .uren-locatie-modal.open { transform:translateY(0); } } @keyframes fadeIn { from{opacity:0} to{opacity:1} } /* ===================================================== INPUT AREA ===================================================== */ #input-area { display:none; padding:14px 18px; border-top:1px solid rgba(34,197,94,0.15); background:rgba(255,255,255,0.02); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); flex-shrink:0; box-shadow:0 -8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } #input-area.visible { display:block; } body.light #input-area { background:rgba(238,242,247,0.92); border-top-color:rgba(45,106,79,0.15); } /* Image preview strip above input */ #img-preview-strip { display:none; align-items:center; gap:10px; margin-bottom:10px; padding:8px 12px; background:rgba(34,197,94,0.06); border:1px solid rgba(34,197,94,0.2); border-radius:11px; animation:fadein .25s ease; } #img-preview-strip.show { display:flex; } #img-preview-thumb { width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid rgba(34,197,94,0.3); } #img-preview-name { font-size:12px; color:var(--text-muted); flex:1; } #img-preview-remove { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:2px 6px; border-radius:6px; transition:all .2s; } #img-preview-remove:hover { color:var(--danger); background:rgba(239,68,68,0.1); } .input-row { display:flex; align-items:flex-end; gap:8px; } #chat-input { flex:1; background:rgba(255,255,255,0.03); backdrop-filter:blur(12px); border:1px solid rgba(34,197,94,0.2); border-radius:16px; padding:12px 16px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13.5px; resize:none; min-height:48px; max-height:140px; outline:none; line-height:1.5; transition:border-color .25s, box-shadow .25s; box-shadow:inset 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); } #chat-input:focus { border-color:#22c55e; box-shadow:0 0 20px rgba(34,197,94,0.2), inset 0 2px 8px rgba(0,0,0,0.2); } #chat-input::placeholder { color:var(--text-muted); } body.light #chat-input { background:rgba(255,255,255,0.8); border-color:rgba(45,106,79,0.2); color:#1a2940; box-shadow:0 2px 8px rgba(0,0,0,0.06); } body.light #chat-input:focus { border-color:rgba(45,106,79,0.45); box-shadow:0 0 0 3px rgba(45,106,79,0.08); } .ic-btn { width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); backdrop-filter:blur(12px); color:var(--text); cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; transition:all .22s cubic-bezier(.34,1.56,.64,1); flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } .ic-btn:hover { background:rgba(45,106,79,0.38); border-color:rgba(34,197,94,0.5); box-shadow:0 0 18px rgba(34,197,94,0.3), 0 4px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); transform:translateY(-2px) scale(1.06); } .ic-btn:active { transform:translateY(1px) scale(0.96); box-shadow:0 1px 4px rgba(0,0,0,0.3); } .ic-btn.active { background:rgba(34,197,94,0.22); border-color:rgba(34,197,94,0.6); animation:neonPulse 1.4s infinite; } .ic-btn.send { background:linear-gradient(135deg,rgba(45,106,79,0.6),rgba(34,197,94,0.22)); border-color:rgba(34,197,94,0.4); box-shadow:0 0 14px rgba(34,197,94,0.22), 0 4px 12px rgba(0,0,0,0.3); } .ic-btn.send:hover { background:linear-gradient(135deg,#22c55e,#16a34a); color:#000; box-shadow:0 0 28px rgba(34,197,94,0.55), 0 8px 18px rgba(0,0,0,0.3); } .ic-btn.tts-on { background:linear-gradient(135deg,rgba(45,106,79,0.5),rgba(34,197,94,0.15)); border-color:rgba(34,197,94,0.4); box-shadow:0 0 12px rgba(34,197,94,0.2); } /* ── Mic recording state ── */ .ic-btn.recording { background:linear-gradient(135deg,rgba(153,27,27,0.7),rgba(239,68,68,0.35)); border-color:rgba(239,68,68,0.7); color:#fca5a5; animation:pulseRing 1s infinite; } #rec-timer { display:none; font-size:11px; font-family:monospace; color:#fca5a5; font-weight:600; min-width:34px; text-align:center; letter-spacing:.5px; } /* ── Always-visible Stopp button ── */ .ic-btn.stopp-btn { width:auto; padding:0 12px; font-size:11.5px; font-weight:600; letter-spacing:0.02em; background:linear-gradient(135deg,rgba(153,27,27,0.55),rgba(239,68,68,0.25)); border-color:rgba(239,68,68,0.4); color:#fca5a5; } .ic-btn.stopp-btn:hover { background:linear-gradient(135deg,#b91c1c,#ef4444); color:#fff; box-shadow:0 0 18px rgba(239,68,68,0.5); } .ic-btn.stopp-btn.stopp-active { background:linear-gradient(135deg,#b91c1c,#ef4444); color:#fff; box-shadow:0 0 22px rgba(239,68,68,0.6); animation:pulseRing 1s infinite; } body.light .ic-btn { background:rgba(255,255,255,0.7); border-color:rgba(45,106,79,0.2); color:#1a2940; box-shadow:0 2px 6px rgba(0,0,0,0.08); } .vlang { background:rgba(255,255,255,0.06); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:var(--text); padding:5px 8px; font-size:11.5px; font-family:'DM Sans',sans-serif; cursor:pointer; outline:none; height:44px; box-shadow:0 2px 8px rgba(0,0,0,0.2); transition:all .2s; } .vlang:focus { border-color:rgba(34,197,94,0.4); } /* ===================================================== RIGHT PANEL ===================================================== */ #right-panel { background:rgba(255,255,255,0.02); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-left:1px solid rgba(34,197,94,0.15); overflow-y:auto; display:flex; flex-direction:column; gap:0; box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } body.light #right-panel { background:rgba(255,255,255,0.82); border-left-color:rgba(45,106,79,0.15); } /* ===================================================== MOBILE RESPONSIVE (sidebars become slide-in drawers) ===================================================== */ .mobile-toggle-btn { display:none; } #mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:190; } @media (max-width:768px) { #layout { display:flex; flex-direction:column; } #chat-area { width:100%; } #sidebar, #right-panel { position:fixed; top:54px; bottom:0; z-index:200; transition:transform 0.25s ease; } #sidebar { left:0; width:80vw; max-width:300px; transform:translateX(-100%); } #right-panel { right:0; width:80vw; max-width:320px; transform:translateX(100%); } #sidebar.mobile-open { transform:translateX(0); } #right-panel.mobile-open { transform:translateX(0); } .mobile-toggle-btn { display:flex; } #mobile-overlay.show { display:block; } body { overflow-x:hidden; } /* Topbar: was designed for a wide desktop row (logo + title + subtitles on the left/center, ~8 action buttons on the right) — none of that fits a 390px screen at once. Shrink the title, drop the subtitles, and let the left/right button clusters scroll horizontally instead of clipping. */ #topbar { min-height:54px; height:auto; padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top)); flex-wrap:nowrap; } .juno-name { font-size:20px; } .juno-subtitles { display:none; } .topbar-left, .topbar-right { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .topbar-left::-webkit-scrollbar, .topbar-right::-webkit-scrollbar { display:none; } .top-btn { min-height:40px; padding:8px 12px; } .model-menu { max-width:calc(100vw - 24px); } /* Homepage quick-action tiles: fixed 140px cells overflow a 390px screen and get clipped by body's overflow:hidden. Shrink to a fluid 3-column grid (still exactly 3 per row, matching desktop); the mic keeps its own fixed size (it's a flex sibling of the grid, not a grid cell, so it never stretches to fill a cell — see .homepage-tiles-wrap). */ .homepage-tiles-wrap { gap:16px; padding:0 12px; max-width:100%; } .home-tiles-group { grid-template-columns:repeat(3, 1fr); gap:8px; max-width:100%; width:100%; } .home-tile { width:100%; height:auto; aspect-ratio:1; padding:5px; } .home-tile-icon { font-size:22px; } .home-tile-name { font-size:9.5px; line-height:1.2; } .home-tile-status { font-size:8px; } .home-mic { width:110px; height:110px; } /* Input area: thumb-reachable, safe-area aware */ #input-area { padding-bottom:calc(14px + env(safe-area-inset-bottom)); } /* Modals: full screen instead of a centered floating box */ .modal-box { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; padding:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); } } .rp-section { padding:15px 17px; border-bottom:1px solid rgba(255,255,255,0.04); transition:background .2s; } .rp-section:last-child { border-bottom:none; } .rp-section:hover { background:rgba(255,255,255,0.015); } body.light .rp-section { border-bottom-color:rgba(0,0,0,0.06); } .rp-title { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; background:linear-gradient(135deg,#22c55e,#86efac); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:11px; } body.light .rp-title { background:linear-gradient(135deg,#16a34a,#2d6a4f); -webkit-background-clip:text; background-clip:text; } /* ===================================================== GROK — Header-Button-Badge, Live-Panel (Chat + Aktivitäten), Mobile-FAB ===================================================== */ .header-entry-btn.grok { --header-entry-gradient:linear-gradient(135deg,#a855f7,#7c3aed); --header-entry-glow:rgba(168,85,247,0.55); } .grok-header-badge { display:flex; align-items:center; gap:4px; font-size:9px; font-weight:600; opacity:.85; margin-left:2px; } @media (max-width:600px) { .grok-header-badge { display:none; } } .grok-panel-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; margin-bottom:10px; user-select:none; } #grok-panel-toggle-arrow { font-size:11px; color:var(--text-muted); transition:transform .2s; } .grok-mini-chat { background:#0d1020; border:1px solid rgba(34,197,94,0.2); border-top:2px solid #22c55e; border-radius:10px; padding:10px; margin-bottom:12px; box-shadow:0 4px 14px rgba(0,0,0,0.3); } .grok-mini-chat-head { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#e2e8f0; margin-bottom:8px; } .grok-mini-model-badge { font-size:9px; background:rgba(168,85,247,0.16); color:#a855f7; padding:2px 6px; border-radius:8px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; } .grok-mini-fullscreen { margin-left:auto; font-size:10px; color:#4b9fff; text-decoration:none; font-weight:600; flex-shrink:0; } .grok-mini-fullscreen:hover { text-decoration:underline; } .grok-mini-msgs { max-height:170px; min-height:50px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:8px; } .grok-mini-empty { font-size:10.5px; color:var(--text-muted); padding:8px 0; text-align:center; } .grok-mini-msg { font-size:11px; line-height:1.4; padding:6px 8px; border-radius:8px; max-width:92%; word-break:break-word; white-space:pre-wrap; } .grok-mini-msg.user { align-self:flex-end; background:rgba(168,85,247,0.14); color:#e2e8f0; } .grok-mini-msg.asst { align-self:flex-start; background:rgba(255,255,255,0.05); color:#e2e8f0; } .grok-mini-msg-meta { font-size:9px; color:var(--text-muted); margin-top:3px; } .grok-mini-input-row { display:flex; gap:6px; } .grok-mini-input-row input { flex:1; min-width:0; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text); border-radius:8px; padding:7px 9px; font-size:11px; font-family:inherit; } .grok-mini-input-row input:focus { outline:none; border-color:#a855f7; } .grok-mini-input-row button { background:#a855f7; border:none; color:#fff; width:32px; flex-shrink:0; border-radius:8px; cursor:pointer; font-size:13px; } .grok-mini-input-row button:hover { background:#9333ea; } .grok-mini-input-row button:disabled { opacity:.5; cursor:default; } .grok-activity-monitor { background:#0a0f1a; border:1px solid rgba(34,197,94,0.2); border-top:2px solid #22c55e; border-radius:10px; padding:10px; box-shadow:0 4px 14px rgba(0,0,0,0.3); } .grok-activity-head { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; color:#e2e8f0; margin-bottom:8px; } .grok-activity-pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:#22c55e; margin-left:5px; animation:neonPulse 1.8s infinite; } .grok-activity-pulse.idle { animation:none; background:#4b5563; box-shadow:none; } .grok-activity-updated { font-size:9px; color:var(--text-muted); font-weight:400; } .grok-activity-feed { max-height:230px; overflow-y:auto; font-family:'Courier New',monospace; font-size:10px; line-height:1.6; background:#0a0f1a; border-radius:6px; } .grok-activity-line { white-space:pre-wrap; word-break:break-word; } .grok-activity-line.normal { color:#4ade80; } .grok-activity-line.warn { color:#f0c040; } .grok-activity-line.error { color:#ff4d6a; } .grok-activity-stats { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.08); font-size:9.5px; color:var(--text-muted); } #grok-mobile-fab { display:none; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#a855f7,#7c3aed); border:none; color:#fff; font-size:22px; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(168,85,247,0.5); z-index:195; cursor:pointer; } @media (max-width:768px) { #grok-mobile-fab { display:flex; } } @media (max-width:819px) { #btn-vollbild { display:none; } } /* ── JUNO Orchestrator: Ampel + Header-Badge ─────────────────────── ("chefwaechter-*" = interne CSS-/ID-Namen, bleiben unverändert.) Rot pulsiert dauerhaft (auffälliges "Leuchten"), Gelb nur, solange gerade ein Sweep läuft. Grau = noch nicht aktiviert (keine Prüfer-KI erreichbar oder Schalter aus) und bleibt bewusst ruhig — kein Alarm. */ @keyframes chefwaechter-pulse { 0%,100%{opacity:1} 50%{opacity:.4} } .chefwaechter-ampel-punkt { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; } .chefwaechter-ampel-gruen { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.7); } .chefwaechter-ampel-gelb { background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,.7); } .chefwaechter-ampel-rot { background:#ef4444; box-shadow:0 0 9px rgba(239,68,68,.95); animation: chefwaechter-pulse 1.2s ease-in-out infinite; } .chefwaechter-ampel-grau { background:#6b7280; box-shadow:none; } .chefwaechter-ampel-gelb.sweep-aktiv { animation: chefwaechter-pulse 2.4s ease-in-out infinite; } /* Header-Badge: auf JEDER Seite neben dem JUNO-Titel, standardmäßig unsichtbar — erscheint nur bei Rot (und dezent bei Gelb). Kein eigener Netzwerk-Request: gespeist aus demselben Status-Poll wie das Widget. */ #chefwaechter-header-badge { display:none; width:9px; height:9px; border-radius:50%; margin-left:7px; background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.95); vertical-align:middle; animation: chefwaechter-pulse 1.2s ease-in-out infinite; cursor:pointer; } #chefwaechter-header-badge.zeigen { display:inline-block; } #chefwaechter-header-badge.gelb { background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,.8); animation:none; } /* ── Live-Aktivität: wer arbeitet gerade, woran ─────────────────────── Ersetzt die frühere rohe JSON-Anzeige. Gespeist aus demselben SSE-Kanal (/werkstatt/orchester-stream) wie der Werkstatt-Monitor, hier nur in der schmalen Sidebar-Variante: eine Zeile pro Agent statt Karten. */ #chefw-live { background:rgba(0,0,0,0.25); border-radius:6px; padding:7px 8px; margin:0; min-height:38px; max-height:210px; overflow-y:auto; } #chefw-live-aufgabe { font-size:10px; color:var(--accent); margin-bottom:6px; line-height:1.35; display:none; word-break:break-word; } #chefw-live-leer { font-size:10.5px; color:var(--text-muted); } .chefw-agent { display:flex; align-items:flex-start; gap:6px; padding:3px 0; font-size:10.5px; border-top:1px solid rgba(255,255,255,0.05); } .chefw-agent:first-child { border-top:none; } .chefw-agent-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:5px; background:#6b7280; } .chefw-agent.aktiv .chefw-agent-dot { background:#4ade80; animation: chefwaechter-pulse 1s ease-in-out infinite; } .chefw-agent.fertig .chefw-agent-dot { background:#4ade80; } .chefw-agent.fehler .chefw-agent-dot { background:#ef4444; } .chefw-agent-body { flex:1; min-width:0; } .chefw-agent-name { font-weight:600; color:var(--text); } .chefw-agent-meta { font-size:9px; color:var(--text-muted); } .chefw-agent-text { font-size:9.5px; color:var(--text-muted); line-height:1.4; margin-top:2px; max-height:34px; overflow:hidden; white-space:pre-wrap; word-break:break-word; } .chefw-agent.fertig .chefw-agent-text, .chefw-agent.fehler .chefw-agent-text { max-height:none; } /* ── Mini-Chat mit dem Orchestrator ──────────────────────────────────── */ #chefwaechter-chat-verlauf { display:none; max-height:190px; overflow-y:auto; margin:7px 0 6px; display:flex; flex-direction:column; gap:6px; } .chefw-bubble { max-width:88%; border-radius:10px; padding:5px 8px; font-size:10.5px; line-height:1.45; word-break:break-word; } .chefw-bubble-wrap { display:flex; flex-direction:column; gap:2px; } .chefw-bubble-wrap.ich { align-items:flex-end; } .chefw-bubble-wrap.ki { align-items:flex-start; } .chefw-bubble.ich { background:var(--accent); color:#fff; border-bottom-right-radius:3px; } .chefw-bubble.ki { background:rgba(255,255,255,0.07); color:var(--text); border-bottom-left-radius:3px; } .chefw-bubble-wer { font-size:8.5px; color:var(--text-muted); padding:0 3px; letter-spacing:.02em; } .chefw-bubble-system { align-self:center; font-size:9px; color:var(--text-muted); background:rgba(255,255,255,0.05); border-radius:8px; padding:2px 8px; } .chefw-tippt { display:flex; gap:3px; padding:7px 9px; } .chefw-tippt span { width:5px; height:5px; border-radius:50%; background:var(--text-muted); animation: chefw-tippt-hupf 1.3s ease-in-out infinite; } .chefw-tippt span:nth-child(2) { animation-delay:.18s; } .chefw-tippt span:nth-child(3) { animation-delay:.36s; } @keyframes chefw-tippt-hupf { 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} } #chefwaechter-chat-eingabe { display:none; gap:5px; align-items:flex-end; } #chefwaechter-chat-input { flex:1; font-size:11px; resize:none; min-height:30px; max-height:80px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:var(--text); padding:6px 8px; font-family:inherit; line-height:1.4; } #chefwaechter-chat-input:focus { outline:none; border-color:var(--accent); } #chefw-chat-send { background:var(--accent); border:none; color:#fff; border-radius:8px; width:30px; height:30px; font-size:13px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; } #chefw-chat-send:disabled { opacity:.4; cursor:default; } /* Info card */ .info-card { background:rgba(255,255,255,0.04); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.07); border-radius:11px; padding:11px 13px; font-size:12px; line-height:1.9; margin-bottom:7px; box-shadow:0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); transition:all .22s; } .info-card:hover { border-color:rgba(34,197,94,0.16); box-shadow:0 8px 26px rgba(0,0,0,0.3), 0 0 0 1px rgba(34,197,94,0.06); transform:translateY(-1px); } .il { font-size:10.5px; color:var(--text-muted); } .iv { font-weight:600; color:var(--text); } body.light .info-card { background:rgba(255,255,255,0.65); border-color:rgba(0,0,0,0.07); } /* DE/EN pill toggle */ .lang-toggle { display:flex; background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); border-radius:10px; overflow:hidden; flex-shrink:0; } .lt-btn { padding:5px 13px; background:transparent; border:none; color:var(--text-muted); font-size:12.5px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .2s; white-space:nowrap; } .lt-btn:hover:not(.active) { background:rgba(255,255,255,0.08); color:var(--text); } .lt-btn.active { background:linear-gradient(135deg,rgba(45,106,79,0.7),rgba(34,197,94,0.28)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); } /* Toggle switch */ .setting-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:12.5px; } .toggle { width:40px; height:22px; background:rgba(255,255,255,0.1); border-radius:11px; cursor:pointer; border:1px solid rgba(255,255,255,0.1); position:relative; transition:all .3s; flex-shrink:0; box-shadow:inset 0 2px 4px rgba(0,0,0,0.3); } .toggle::after { content:''; width:16px; height:16px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); box-shadow:0 2px 4px rgba(0,0,0,0.3); } .toggle.on { background:linear-gradient(135deg,#2d6a4f,#22c55e); border-color:rgba(34,197,94,0.4); box-shadow:0 0 14px rgba(34,197,94,0.3), inset 0 2px 4px rgba(0,0,0,0.1); } .toggle.on::after { transform:translateX(18px); } /* Connection items */ .conn-item { display:flex; align-items:center; justify-content:space-between; padding:9px 11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:10px; margin-bottom:5px; font-size:12px; transition:all .2s; } .conn-item:hover { border-color:rgba(34,197,94,0.16); background:rgba(34,197,94,0.03); } .conn-label { font-weight:600; } .conn-sub { font-size:10.5px; color:var(--text-muted); margin-top:1px; } .test-btn { padding:4px 12px; background:linear-gradient(135deg,rgba(45,106,79,0.5),rgba(34,197,94,0.14)); border:1px solid rgba(34,197,94,0.3); border-radius:7px; color:#fff; cursor:pointer; font-size:11px; font-family:'DM Sans',sans-serif; transition:all .2s; flex-shrink:0; box-shadow:0 0 8px rgba(34,197,94,0.14); } .test-btn:hover { background:linear-gradient(135deg,#22c55e,#16a34a); color:#000; box-shadow:0 0 18px rgba(34,197,94,0.42); transform:translateY(-1px); } .test-btn:active { transform:translateY(0); } /* API inputs */ .api-label { font-size:10.5px; color:var(--text-muted); display:block; margin:8px 0 3px; } .api-inp { width:100%; background:rgba(255,255,255,0.05); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); border-radius:9px; padding:8px 11px; color:var(--text); font-size:12px; font-family:'DM Sans',sans-serif; outline:none; transition:all .2s; box-shadow:inset 0 2px 6px rgba(0,0,0,0.2); } .api-inp:focus { border-color:rgba(34,197,94,0.4); box-shadow:0 0 12px rgba(34,197,94,0.1),inset 0 2px 6px rgba(0,0,0,0.2); } .api-inp::placeholder { color:var(--text-muted); } /* Action row */ .act-row { display:flex; gap:5px; margin-top:8px; } .sm-btn { padding:6px 11px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:8px; color:var(--text); cursor:pointer; font-size:11.5px; transform-style:preserve-3d; font-family:'DM Sans',sans-serif; transition:all .3s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; } .sm-btn:hover { background:rgba(45,106,79,0.28); border-color:rgba(34,197,94,0.4); color:#fff; box-shadow:0 20px 40px rgba(34,197,94,0.2); transform:translateY(-3px) rotateX(5deg); } .sm-btn:active { transform:translateY(0); } .sm-btn.danger:hover { background:rgba(239,68,68,0.22); border-color:rgba(239,68,68,0.5); box-shadow:0 0 12px rgba(239,68,68,0.2); } body.light .sm-btn { background:rgba(255,255,255,0.7); border-color:rgba(45,106,79,0.2); color:#1a2940; } body.light .sm-btn:hover { background:rgba(45,106,79,0.1); box-shadow:none; } /* ===================================================== MODALS ===================================================== */ .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); z-index:200; align-items:center; justify-content:center; } .overlay.show { display:flex; } .modal-box { background:rgba(3,8,18,0.95); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%); border:1px solid rgba(34,197,94,0.2); border-radius:20px; padding:26px; width:90%; max-width:500px; max-height:88vh; overflow-y:auto; position:relative; box-shadow:0 25px 50px rgba(0,0,0,0.8), 0 0 0 1px rgba(34,197,94,0.1), inset 0 1px 0 rgba(255,255,255,0.07); animation:modalIn .3s cubic-bezier(.34,1.56,.64,1); } body.light .modal-box { background:rgba(240,244,249,0.97); border-color:rgba(45,106,79,0.15); } @keyframes modalIn { from { opacity:0; transform:scale(0.9) translateY(22px); } to { opacity:1; transform:scale(1) translateY(0); } } .modal-title { font-family:'Playfair Display',serif; font-size:19px; background:linear-gradient(135deg,#22c55e,#86efac); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:15px; filter:drop-shadow(0 0 14px rgba(34,197,94,0.45)); } body.light .modal-title { background:linear-gradient(135deg,#16a34a,#2d6a4f); -webkit-background-clip:text; background-clip:text; filter:none; } .modal-close { position:absolute; top:15px; right:17px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:7px; color:var(--text-muted); font-size:16px; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; transition:all .2s; } .modal-close:hover { color:var(--text); background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.3); } /* Shared header row for modals whose header carries extra action buttons next to the title — keeps the close button in-flow so it never overlaps a right-aligned action on narrow screens (see modal-close, which is absolutely positioned and only safe for plain single-line titles). */ .modal-header-row { display:flex; align-items:center; justify-content:space-between; gap:8px 10px; flex-wrap:wrap; margin-bottom:15px; } .modal-header-row .modal-title { margin:0; flex:1 1 140px; min-width:0; } .modal-header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; } .modal-close.inline { position:static; flex-shrink:0; } .modal-input { width:100%; background:rgba(255,255,255,0.05); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:10px 13px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px; outline:none; margin-bottom:8px; box-shadow:inset 0 2px 6px rgba(0,0,0,0.2); transition:all .2s; } .modal-input:focus { border-color:rgba(34,197,94,0.4); box-shadow:0 0 16px rgba(34,197,94,0.1),inset 0 2px 6px rgba(0,0,0,0.2); } /* ══ AUFGEKLAPPTE AUSWAHLLISTEN, 11.09.2026 ══ Kris' zweites Bildschirmfoto: die Ortsauswahl im Fahrten-Fenster war auch nach color-scheme noch blass. Der Grund: die aufgeklappte Liste zeichnet der Browser SELBST, in einem eigenen Fenster ausserhalb der Seite. Dorthin reicht weder das backdrop-filter noch der rgba-Hintergrund des erbt