im Brief explizit hell */ body.era-e4 #gameover-modal [style*="#fdf6e3"] p, body.era-e4 #gameover-modal [style*="#fdf6e3"] b, body.era-e4 #gameover-modal [style*="#fdf6e3"] i { color: #e2e8f0 !important; } body.era-e4 #gameover-modal [style*="#fdf6e3"] b { color: #f1f5f9 !important; } /* Abschlussbilanz-Innenbox (war background:#fff) */ body.era-e4 #gameover-modal [style*="background:#fff"], body.era-e4 #gameover-modal [style*="background: #fff"] { background: rgba(15, 23, 42, 0.6) !important; border-left: 3px solid #ef4444 !important; color: #e2e8f0 !important; border-radius: 0 6px 6px 0; } body.era-e4 #gameover-modal table { color: #e2e8f0 !important; } body.era-e4 #gameover-modal table td { color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.2) !important; } body.era-e4 #gameover-modal table td b { color: #f1f5f9 !important; } /* Endstand Konto rot bleibt */ body.era-e4 #gameover-modal [style*="color:#7a0000"], body.era-e4 #gameover-modal [style*="color: #7a0000"] { color: #fca5a5 !important; } /* Trennlinien */ body.era-e4 #gameover-modal [style*="border-bottom:1px solid #888"], body.era-e4 #gameover-modal [style*="border-bottom: 1px solid #888"], body.era-e4 #gameover-modal [style*="border-top:1px solid #888"], body.era-e4 #gameover-modal [style*="border-top: 1px solid #888"] { border-color: rgba(148, 163, 184, 0.3) !important; } /* Buttons */ body.era-e4 #gameover-modal button.w95 { background: rgba(30, 41, 59, 0.8) !important; color: #e2e8f0 !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; border-radius: 8px !important; padding: 10px 22px !important; font-family: "Inter", sans-serif !important; font-weight: 600; transition: all 0.2s; } body.era-e4 #gameover-modal button.w95:hover { background: rgba(167, 139, 250, 0.2) !important; border-color: rgba(167, 139, 250, 0.7) !important; box-shadow: 0 0 16px rgba(167, 139, 250, 0.3); } body.era-e4 #gameover-modal #gameover-restart-btn { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1)) !important; border-color: rgba(16, 185, 129, 0.5) !important; color: #86efac !important; } body.era-e4 #gameover-modal #gameover-restart-btn:hover { background: rgba(16, 185, 129, 0.3) !important; box-shadow: 0 0 16px rgba(16, 185, 129, 0.4); } /* Insolvenz-Bild etwas einbetten */ body.era-e4 #gameover-modal img { border: 1px solid rgba(148, 163, 184, 0.3) !important; border-radius: 8px !important; image-rendering: auto !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* ------------------------------------------------------------ FIX 2 — Mail-Body-Text: muted grau → lesbarer Der Mail-Body wird häufig mit color:#333 o.ä. gerendert, das era-4-CSS setzt das pauschal auf #cbd5e1 — auf dem dunklen Mail-Panel wirkt das zu blass. Body-Text kräftiger. ------------------------------------------------------------ */ body.era-e4 .mail-body, body.era-e4 .mail-content, body.era-e4 .mail-reading-pane, body.era-e4 #mail-body, body.era-e4 [class*="mail-body"], body.era-e4 [class*="mail-reading"] { color: #e2e8f0 !important; } body.era-e4 .mail-body p, body.era-e4 .mail-body li, body.era-e4 .mail-body span, body.era-e4 .mail-body div, body.era-e4 .mail-content p, body.era-e4 .mail-content li, body.era-e4 .mail-content span, body.era-e4 .mail-content div { color: #e2e8f0 !important; } body.era-e4 .mail-body b, body.era-e4 .mail-body strong, body.era-e4 .mail-content b, body.era-e4 .mail-content strong { color: #f8fafc !important; font-weight: 600; } body.era-e4 .mail-body a, body.era-e4 .mail-content a { color: #67e8f9 !important; } /* Listen-Item Zeiten/Absender muted aber lesbar */ body.era-e4 .mail-list-item .mail-date, body.era-e4 .mail-list-item .mail-time, body.era-e4 .mail-list-item time { color: #a5b4fc !important; font-size: 11px; } /* Mail-Subject stärker */ body.era-e4 .mail-list-item .mail-subject { color: #cbd5e1 !important; } body.era-e4 .mail-list-item.active .mail-subject { color: #f8fafc !important; } body.era-e4 .mail-list-item .mail-from { color: #e2e8f0 !important; font-weight: 500; } /* ------------------------------------------------------------ FIX 3 — Lead-Modal Warning-Box ("Team-Fehlende Fähigkeit") Die amber-Warning wird mit #fff3cd o.ä. gesetzt und landet im amber-glass (siehe Zeile 2329) — aber der Text wird auch auf #fde68a (amber-300) forciert, damit: goldon gold. Wir erhöhen den Text-Kontrast und das Icon. ------------------------------------------------------------ */ body.era-e4 .lead-skill-warning, body.era-e4 .lead-warning-box, body.era-e4 [class*="warning"][class*="lead"], body.era-e4 .lead-modal [style*="fff3cd"], body.era-e4 .lead-modal [style*="fff4d0"], body.era-e4 .lead-modal [style*="fff4e1"], body.era-e4 .lead-modal [style*="fff8e1"] { background: rgba(251, 191, 36, 0.14) !important; color: #fef3c7 !important; border: 1px solid rgba(251, 191, 36, 0.45) !important; border-radius: 8px !important; padding: 10px 12px !important; } body.era-e4 .lead-skill-warning *, body.era-e4 .lead-warning-box *, body.era-e4 .lead-modal [style*="fff3cd"] *, body.era-e4 .lead-modal [style*="fff4d0"] *, body.era-e4 .lead-modal [style*="fff4e1"] *, body.era-e4 .lead-modal [style*="fff8e1"] * { color: #fef3c7 !important; } body.era-e4 .lead-skill-warning b, body.era-e4 .lead-warning-box b, body.era-e4 .lead-modal [style*="fff3cd"] b, body.era-e4 .lead-modal [style*="fff4d0"] b, body.era-e4 .lead-modal [style*="fff4e1"] b, body.era-e4 .lead-modal [style*="fff8e1"] b { color: #fff !important; font-weight: 700; } /* "Niemand im Team" Badges — Rot-auf-Rot vermeiden */ body.era-e4 .lead-modal .skill-missing, body.era-e4 .lead-modal .team-none, body.era-e4 .lead-modal [class*="no-team"], body.era-e4 .lead-modal [style*="color:#a00"], body.era-e4 .lead-modal [style*="color: #a00"], body.era-e4 .lead-modal [style*="color:#c00"], body.era-e4 .lead-modal [style*="color: #c00"], body.era-e4 .lead-modal [style*="color:#800"], body.era-e4 .lead-modal [style*="color: #800"] { color: #fca5a5 !important; font-weight: 600; } /* Frist-Kachel: falls amber-on-amber Ton-in-Ton */ body.era-e4 .lead-modal .frist, body.era-e4 .lead-modal .deadline-tile, body.era-e4 .lead-modal [class*="frist"], body.era-e4 .lead-modal [class*="deadline"] { color: #fef3c7 !important; } body.era-e4 .lead-modal .frist b, body.era-e4 .lead-modal .deadline-tile b { color: #fff !important; } /* ------------------------------------------------------------ FIX 4 — Bank-Kredit-Kalkulator Labels Labels waren dunkelgrau-auf-dunkelgrau. ------------------------------------------------------------ */ body.era-e4 .credit-calculator label, body.era-e4 .credit-calculator .kalk-label, body.era-e4 .credit-calculator .row-label, body.era-e4 .bank-panel label, body.era-e4 .bank-tab label, body.era-e4 [class*="credit"] label, body.era-e4 [class*="kredit"] label, body.era-e4 [class*="prepayment"] label { color: #cbd5e1 !important; font-weight: 500; } body.era-e4 .credit-calculator .kalk-value, body.era-e4 .credit-calculator strong, body.era-e4 .bank-panel strong, body.era-e4 [class*="credit"] strong { color: #f8fafc !important; font-weight: 600; } /* Info-Karten Labels (Kontostand, Kreditrahmen frei...) */ body.era-e4 .bank-info-card .label, body.era-e4 .bank-info-card .card-label, body.era-e4 .finance-info-card .label { color: #94a3b8 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.5px; } body.era-e4 .bank-info-card .value, body.era-e4 .bank-info-card .card-value, body.era-e4 .finance-info-card .value { color: #f8fafc !important; font-size: 18px !important; font-weight: 600; } /* Prepayment-Modal Input dunkel mit sichtbarem Border */ body.era-e4 #prepayment-modal input[type="number"], body.era-e4 .prepayment-modal input[type="number"], body.era-e4 [class*="prepay"] input[type="number"] { background: rgba(15, 23, 42, 0.7) !important; color: #f8fafc !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; border-radius: 6px !important; padding: 8px 10px !important; font-family: "Inter", sans-serif !important; } body.era-e4 #prepayment-modal input[type="number"]:focus, body.era-e4 .prepayment-modal input[type="number"]:focus, body.era-e4 [class*="prepay"] input[type="number"]:focus { outline: none !important; border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2); } body.era-e4 #prepayment-modal input::placeholder, body.era-e4 .prepayment-modal input::placeholder, body.era-e4 [class*="prepay"] input::placeholder { color: #64748b !important; } /* ------------------------------------------------------------ FIX 5 — Settings Warning-Box: Text kräftiger Amber-box bei i18n-Hinweis und Sandbox-Warnungen. ------------------------------------------------------------ */ body.era-e4 .settings-body .warning, body.era-e4 .settings-body .hint-box, body.era-e4 .settings-body .info-box, body.era-e4 .settings-modal .warning, body.era-e4 .settings-modal [class*="warning"], body.era-e4 .settings-modal [class*="notice"] { background: rgba(251, 191, 36, 0.12) !important; color: #fef3c7 !important; border: 1px solid rgba(251, 191, 36, 0.4) !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 13px !important; line-height: 1.5 !important; } body.era-e4 .settings-body .warning *, body.era-e4 .settings-body .hint-box *, body.era-e4 .settings-body .info-box * { color: inherit !important; } /* Settings Section-Header mit mehr Kontrast */ body.era-e4 .settings-body .section-header, body.era-e4 .settings-body h4, body.era-e4 .settings-body h5, body.era-e4 .settings-modal .section-title { color: #f1f5f9 !important; font-weight: 600; font-size: 13px !important; letter-spacing: 0.3px; padding: 8px 0 4px !important; } /* Slider-Tracks im Dark sichtbar machen */ body.era-e4 .settings-body input[type="range"] { accent-color: #22d3ee !important; height: 6px; } body.era-e4 .settings-body input[type="range"]::-webkit-slider-runnable-track { background: rgba(148, 163, 184, 0.25) !important; border-radius: 3px; height: 6px; } body.era-e4 .settings-body input[type="range"]::-moz-range-track { background: rgba(148, 163, 184, 0.25) !important; border-radius: 3px; height: 6px; } /* ------------------------------------------------------------ FIX 6 — Monthly-Overview Modal: Chance-Spalte kräftiger, Info-Banner lesbarer ------------------------------------------------------------ */ body.era-e4 .monthly-leads-modal .info-banner, body.era-e4 .monthly-leads-modal .hint, body.era-e4 #monthly-leads-modal .info-banner, body.era-e4 #monthly-leads-modal .hint { background: rgba(30, 41, 59, 0.6) !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, 0.2) !important; border-radius: 6px; padding: 8px 10px; font-size: 12px; } /* Chance-Werte kräftig grün/rot */ body.era-e4 .monthly-leads-modal .chance-high, body.era-e4 #monthly-leads-modal .chance-high, body.era-e4 .monthly-leads-modal [data-chance="high"] { color: #4ade80 !important; font-weight: 600; } body.era-e4 .monthly-leads-modal .chance-low, body.era-e4 #monthly-leads-modal .chance-low, body.era-e4 .monthly-leads-modal [data-chance="low"] { color: #fca5a5 !important; font-weight: 600; } /* ------------------------------------------------------------ FIX 7 — Generic: Hardcoded Light-Grey BG auf Dark-Glass Für alle noch nicht erfassten inline-styles. ------------------------------------------------------------ */ body.era-e4 [style*="background:#f5f5f5"], body.era-e4 [style*="background: #f5f5f5"], body.era-e4 [style*="background:#f8f8f8"], body.era-e4 [style*="background: #f8f8f8"], body.era-e4 [style*="background:#eee"], body.era-e4 [style*="background: #eee"], body.era-e4 [style*="background:#eeeeee"], body.era-e4 [style*="background: #eeeeee"], body.era-e4 [style*="background:#e0e0e0"], body.era-e4 [style*="background: #e0e0e0"] { background: rgba(30, 41, 59, 0.7) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.2) !important; } /* Helle Borders auf dark-subtle */ body.era-e4 [style*="border:1px solid #8b7"], body.era-e4 [style*="border: 1px solid #8b7"], body.era-e4 [style*="border:1px solid #888"], body.era-e4 [style*="border: 1px solid #888"], body.era-e4 [style*="border:1px solid #aaa"], body.era-e4 [style*="border: 1px solid #aaa"], body.era-e4 [style*="border:1px solid #ccc"], body.era-e4 [style*="border: 1px solid #ccc"] { border-color: rgba(148, 163, 184, 0.25) !important; } /* Ende v0.9.4.23 Readability Patch */ /* ------------------------------------------------------------ FIX 8 — Desktop-Icon-Labels: "Posteingag" Text-Overflow Breite von 78px auf 88px, Schrift leicht größer. Gilt nur für Era 4. ------------------------------------------------------------ */ body.era-e4 .desktop-shortcuts { grid-template-columns: repeat(2, 90px) !important; grid-auto-rows: 88px !important; gap: 8px !important; } body.era-e4 .desktop-shortcut { width: 88px !important; min-height: 82px !important; padding: 8px 2px 6px 2px !important; } body.era-e4 .desktop-shortcut-label { font-size: 11px !important; line-height: 1.15 !important; max-width: 86px !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6) !important; } /* Ende v0.9.4.23 Readability Patch — inkl. foundedYear + desktop-icons */ /* ============================================================ v0.9.4.23c — Follow-up Fixes (2026-04-22 nach Verify-Run) ============================================================ */ /* FIX 9 — Amber Warning-Box in Lead-Modal (fieldset mit inline #fff8e1) Mein vorheriger Fix traf den fieldset, aber der innere

mit inline color:#6a4a00 wurde vom generischen [style*="color:#6"]-Override auf #cbd5e1 hellgrau gezwungen → dunkelgrau auf amber-BG = unlesbar. Hier: auf amber-BG soll der Text KRÄFTIG amber-hell sein. */ body.era-e4 fieldset[style*="#fff8e1"], body.era-e4 fieldset[style*="#fff3cd"], body.era-e4 fieldset[style*="#fff4e1"], body.era-e4 fieldset[style*="#fff4d0"] { background: rgba(251, 191, 36, 0.14) !important; border: 1px solid rgba(251, 191, 36, 0.5) !important; border-radius: 8px !important; color: #fef3c7 !important; } body.era-e4 fieldset[style*="#fff8e1"] > legend, body.era-e4 fieldset[style*="#fff3cd"] > legend, body.era-e4 fieldset[style*="#fff4e1"] > legend, body.era-e4 fieldset[style*="#fff4d0"] > legend { color: #fcd34d !important; font-weight: 600 !important; padding: 0 6px !important; background: transparent !important; } body.era-e4 fieldset[style*="#fff8e1"] *, body.era-e4 fieldset[style*="#fff3cd"] *, body.era-e4 fieldset[style*="#fff4e1"] *, body.era-e4 fieldset[style*="#fff4d0"] * { color: #fef3c7 !important; } body.era-e4 fieldset[style*="#fff8e1"] strong, body.era-e4 fieldset[style*="#fff3cd"] strong, body.era-e4 fieldset[style*="#fff4e1"] strong, body.era-e4 fieldset[style*="#fff4d0"] strong, body.era-e4 fieldset[style*="#fff8e1"] b, body.era-e4 fieldset[style*="#fff3cd"] b, body.era-e4 fieldset[style*="#fff4e1"] b, body.era-e4 fieldset[style*="#fff4d0"] b { color: #fff !important; font-weight: 700 !important; } /* FIX 10 — Ausrichtung-Buttons im Lead-Modal Die Tiles "Standard/Geschwindigkeit/Qualität/Nachlass/Aufschlag" sind dunkel-transparent ohne Border, der aktive ist kaum hervorgehoben. */ body.era-e4 .lead-modal .orient-tile, body.era-e4 .lead-modal .alignment-tile, body.era-e4 .lead-modal [data-alignment], body.era-e4 .lead-modal button[class*="orient"], body.era-e4 .lead-modal button[class*="align"] { background: rgba(30, 41, 59, 0.6) !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; color: #e2e8f0 !important; border-radius: 6px !important; transition: all 0.15s; } body.era-e4 .lead-modal .orient-tile:hover, body.era-e4 .lead-modal .alignment-tile:hover, body.era-e4 .lead-modal [data-alignment]:hover, body.era-e4 .lead-modal button[class*="orient"]:hover, body.era-e4 .lead-modal button[class*="align"]:hover { background: rgba(51, 65, 85, 0.8) !important; border-color: rgba(167, 139, 250, 0.5) !important; } body.era-e4 .lead-modal .orient-tile.active, body.era-e4 .lead-modal .alignment-tile.active, body.era-e4 .lead-modal [data-alignment].active, body.era-e4 .lead-modal [data-alignment][aria-pressed="true"], body.era-e4 .lead-modal button[class*="orient"].active, body.era-e4 .lead-modal button[class*="align"].active { background: rgba(167, 139, 250, 0.25) !important; border-color: #a78bfa !important; color: #fff !important; box-shadow: 0 0 12px rgba(167, 139, 250, 0.3) inset; } /* FIX 11 — Frist/Budget-Kacheln im Lead-Header Die kleinen Kacheln mit UMFANG/FRIST/SCHÄTZUNG/BUDGET sind Ton-in-Ton wenn der Inhalt farbig ist (rot bei Frist knapp, grün bei Budget hoch). */ body.era-e4 .lead-modal .info-tile, body.era-e4 .lead-modal .lead-tile, body.era-e4 .lead-modal .header-tile { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(148, 163, 184, 0.2) !important; border-radius: 8px !important; padding: 8px 10px !important; color: #e2e8f0 !important; } body.era-e4 .lead-modal .info-tile .label, body.era-e4 .lead-modal .lead-tile .label, body.era-e4 .lead-modal .header-tile .label { color: #94a3b8 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } body.era-e4 .lead-modal .info-tile .value, body.era-e4 .lead-modal .lead-tile .value, body.era-e4 .lead-modal .header-tile .value { color: #f8fafc !important; font-size: 14px !important; font-weight: 600; } /* Semantische Farben innerhalb der Tiles */ body.era-e4 .lead-modal .info-tile .value.neg, body.era-e4 .lead-modal .info-tile [style*="color:#a00"], body.era-e4 .lead-modal .info-tile [style*="color:#c00"] { color: #fca5a5 !important; } body.era-e4 .lead-modal .info-tile .value.pos, body.era-e4 .lead-modal .info-tile [style*="color:#070"], body.era-e4 .lead-modal .info-tile [style*="color:#080"] { color: #86efac !important; } /* Ende v0.9.4.23c */ /* ============================================================ v0.9.4.23d — Lead-KPI Tiles (2026-04-22 nach verify-2) ============================================================ */ /* Die Lead-KPI-Kacheln sind inline gestyled mit #fafafa/#fff4e6/#e8f4e8 BGs und #2c6a2c/#7a3c00/#666 Text-Colors. Der BG wird schon umgefärbt, aber die Text-Colors nicht — Ton-in-Ton. */ body.era-e4 .lead-kpi { background: rgba(30, 41, 59, 0.65) !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; border-radius: 8px !important; color: #e2e8f0 !important; } /* Frist-Kachel (amber-Variante): bg + text kräftig amber */ body.era-e4 .lead-kpi[style*="#fff4e6"], body.era-e4 .lead-kpi[style*="#FFF4E6"] { background: rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.4) !important; } body.era-e4 .lead-kpi[style*="#fff4e6"] *, body.era-e4 .lead-kpi[style*="#FFF4E6"] * { color: #fde68a !important; } /* Budget-Kachel (grün-Variante): bg + text kräftig grün */ body.era-e4 .lead-kpi[style*="#e8f4e8"], body.era-e4 .lead-kpi[style*="#E8F4E8"] { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.4) !important; } body.era-e4 .lead-kpi[style*="#e8f4e8"] *, body.era-e4 .lead-kpi[style*="#E8F4E8"] * { color: #86efac !important; } /* Uppercase-Label in allen Kacheln muted */ body.era-e4 .lead-kpi > div:first-child { color: inherit !important; opacity: 0.75; } /* Value-Zeile (2. div) fett + volle Farbe */ body.era-e4 .lead-kpi > div:last-child { color: inherit !important; opacity: 1; } /* "Std."/"Wochen"-Suffix slightly gedimmt */ body.era-e4 .lead-kpi > div:last-child > span { opacity: 0.75; } /* Bereich-Leiste (#f2f5f9 BG, #666 color) — Text kräftiger */ body.era-e4 [style*="background:#f2f5f9"] [style*="color:#666"], body.era-e4 [style*="background: #f2f5f9"] [style*="color:#666"] { color: #94a3b8 !important; } /* Ende v0.9.4.23d */ /* FIX 12 — Setup-Choice Cards (Ausrichtung) in Era 4 Selected: bg=#e0f0ff (hellblau) + border=#3060b0 + innershadow. Text bleibt im Override auf Hell-Grau → schlechter Kontrast. */ body.era-e4 .setup-choice-card { color: #e2e8f0 !important; } body.era-e4 .setup-choice-card[style*="#e0f0ff"], body.era-e4 .setup-choice-card[style*="#E0F0FF"] { background: rgba(103, 126, 234, 0.25) !important; border-color: #a78bfa !important; box-shadow: inset 0 0 0 2px #a78bfa, 0 0 12px rgba(167, 139, 250, 0.3) !important; color: #fff !important; } body.era-e4 .setup-choice-card[style*="#e0f0ff"] *, body.era-e4 .setup-choice-card[style*="#E0F0FF"] * { color: #fff !important; font-weight: 600 !important; } body.era-e4 .setup-choice-card[style*="#fafafa"], body.era-e4 .setup-choice-card[style*="#FAFAFA"] { background: rgba(30, 41, 59, 0.6) !important; border-color: rgba(148, 163, 184, 0.25) !important; color: #e2e8f0 !important; } body.era-e4 .setup-choice-card[style*="#fafafa"]:hover, body.era-e4 .setup-choice-card[style*="#FAFAFA"]:hover { background: rgba(51, 65, 85, 0.8) !important; border-color: rgba(167, 139, 250, 0.5) !important; } body.era-e4 .setup-choice-card[style*="#fafafa"] *, body.era-e4 .setup-choice-card[style*="#FAFAFA"] * { color: #e2e8f0 !important; } /* Ende v0.9.4.23e */ /* ============================================================ v0.9.6.0 — Hybrid Sub-Skill-System (Agentur-Kompetenz + Spezialisten) Era-Overrides für neue UI-Klassen. ============================================================ */ /* ---------- Basis / Ära 1 (Win95 classic, default) ---------- */ .v096-hint-info { font-size: 11px; color: #444; margin: 4px 0 8px 0; padding: 6px 8px; background: #f5f8ff; border: 1px solid #b8c8e0; } .v096-hint-spec { font-size: 11px; color: #6a4a00; margin: 4px 0 8px 0; padding: 6px 8px; background: #fff8e6; border: 1px solid #d4b060; } .v096-skill-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: 11px; border-bottom: 1px dashed #ddd; } .v096-skill-row:last-child { border-bottom: none; } .v096-skill-row .skill-name { min-width: 140px; } .v096-skill-row .skill-short { flex: 1; color: #666; font-size: 10px; } .v096-skill-row .skill-status { min-width: 110px; text-align: right; } .v096-skill-row .skill-action { min-width: 100px; text-align: right; } .v096-status-ok { color: #070; font-weight: bold; } .v096-status-training { color: #b37a00; } .v096-status-missing { color: #a00; } .v096-status-locked { color: #999; } .v096-status-none { color: #888; font-size: 10px; } .v096-spec-chip { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 11px; background: #f5fff5; border: 1px solid #b0d8b0; margin: 1px 0; } .v096-spec-chip .chip-name { flex: 1; } .v096-training-badge { padding: 3px 5px; font-size: 10px; color: #b37a00; background: #fff9e6; border: 1px solid #e0c070; margin-top: 3px; } .v096-inline-hint { color: #888; font-size: 10px; margin-top: 3px; } /* Lead-Mail-Fähigkeits-Zeile */ .v096-req-line { font-size: 10px; line-height: 1.5; padding: 2px 4px; } .v096-req-label { min-width: 80px; display: inline-block; font-weight: bold; } .v096-req-tail { font-size: 10px; margin-left: 6px; } .v096-req-item { display: inline-block; margin-right: 6px; } .v096-req-ok { color: #070; } .v096-req-missing { color: #b00; } .v096-spec-box { margin-top: 3px; background: #fffbe6; border-color: #d8b060; } .v096-spec-row { font-size: 10px; padding: 2px 4px; } .v096-spec-row .spec-label { min-width: 110px; display: inline-block; color: #555; } /* Kanban-Badges */ .kanban-card-spec { background: #fff0c0; border: 1px solid #d8a040; color: #7a4a00; padding: 0 4px; font-size: 9px; border-radius: 2px; margin-left: 3px; display: inline-block; } .kanban-card-qlabel { font-size: 9px; color: #555; margin-left: 3px; } /* Training-Tab "Einführen"-Button */ .v096-btn-primary { background: #d8e8d8 !important; } /* ============================================================ ÄRA 2 (Windows XP Luna) ============================================================ */ body.era-e2 .v096-hint-info { background: #eaf3ff; border: 1px solid #7daee3; color: #1a3b66; } body.era-e2 .v096-hint-spec { background: #fff4d0; border: 1px solid #d4a72c; color: #5a3d00; } body.era-e2 .v096-skill-row { border-bottom: 1px dashed #c9c3a5; } body.era-e2 .v096-status-ok { color: #2e7d32; } body.era-e2 .v096-status-training { color: #9c6d00; } body.era-e2 .v096-status-missing { color: #c21406; } body.era-e2 .v096-spec-chip { background: #e8f5e8; border: 1px solid #7cb87c; } body.era-e2 .v096-training-badge { background: #fff4d0; border-color: #d4a72c; color: #7a5400; } body.era-e2 .v096-req-ok { color: #2e7d32; } body.era-e2 .v096-req-missing { color: #c21406; } body.era-e2 .v096-spec-box { background: #fff4d0; border-color: #d4a72c !important; } body.era-e2 .kanban-card-spec { background: #fff4cc; border: 1px solid #d4a72c; color: #5a3d00; border-radius: 3px; } body.era-e2 .kanban-card-qlabel { color: #555; } body.era-e2 .v096-btn-primary { background: linear-gradient(180deg, #94c54a 0%, #5a9d2b 100%) !important; color: #fff !important; border: 1px solid #3d7a1e !important; } /* ============================================================ ÄRA 3 (Flat / iOS-inspired ~2010-2015) ============================================================ */ body.era-e3 .v096-hint-info { background: rgba(0, 122, 255, 0.08); border: 1px solid rgba(0, 122, 255, 0.25); color: #1c1c1e; border-radius: 6px; } body.era-e3 .v096-hint-spec { background: rgba(255, 149, 0, 0.08); border: 1px solid rgba(255, 149, 0, 0.3); color: #3d2800; border-radius: 6px; } body.era-e3 .v096-skill-row { border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 5px 8px; } body.era-e3 .v096-status-ok { color: #34c759; } body.era-e3 .v096-status-training { color: #ff9500; } body.era-e3 .v096-status-missing { color: #ff3b30; } body.era-e3 .v096-status-locked { color: #8e8e93; } body.era-e3 .v096-spec-chip { background: rgba(52, 199, 89, 0.1); border: 1px solid rgba(52, 199, 89, 0.3); border-radius: 6px; } body.era-e3 .v096-training-badge { background: rgba(255, 149, 0, 0.1); border: 1px solid rgba(255, 149, 0, 0.3); color: #b26500; border-radius: 4px; } body.era-e3 .v096-req-ok { color: #34c759; } body.era-e3 .v096-req-missing { color: #ff3b30; } body.era-e3 .v096-spec-box { background: rgba(255, 149, 0, 0.08) !important; border: 1px solid rgba(255, 149, 0, 0.3) !important; border-radius: 6px; } body.era-e3 .kanban-card-spec { background: rgba(255, 149, 0, 0.15); border: 1px solid rgba(255, 149, 0, 0.4); color: #b26500; border-radius: 8px; font-weight: 600; } body.era-e3 .kanban-card-qlabel { color: #666; } body.era-e3 .v096-btn-primary { background: linear-gradient(180deg, #34c759 0%, #28a745 100%) !important; color: #fff !important; border: none !important; border-radius: 6px !important; } /* ============================================================ ÄRA 4 (Dark-glass / 2020+) ============================================================ */ body.era-e4 .v096-hint-info { background: rgba(102, 126, 234, 0.18) !important; border: 1px solid rgba(102, 126, 234, 0.4) !important; color: #e2e8f0 !important; border-radius: 8px; backdrop-filter: blur(6px); } body.era-e4 .v096-hint-spec { background: rgba(251, 191, 36, 0.15) !important; border: 1px solid rgba(251, 191, 36, 0.4) !important; color: #fde68a !important; border-radius: 8px; backdrop-filter: blur(6px); } body.era-e4 .v096-skill-row { border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important; color: #e2e8f0; padding: 5px 8px; } body.era-e4 .v096-skill-row .skill-short { color: #94a3b8; } body.era-e4 .v096-status-ok { color: #10b981; } body.era-e4 .v096-status-training { color: #fbbf24; } body.era-e4 .v096-status-missing { color: #f87171; } body.era-e4 .v096-status-locked { color: #64748b; } body.era-e4 .v096-status-none { color: #64748b; } body.era-e4 .v096-spec-chip { background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; color: #e2e8f0 !important; border-radius: 6px; } body.era-e4 .v096-training-badge { background: rgba(251, 191, 36, 0.15) !important; border: 1px solid rgba(251, 191, 36, 0.35) !important; color: #fcd34d !important; border-radius: 4px; } body.era-e4 .v096-inline-hint { color: #94a3b8 !important; } body.era-e4 .v096-req-ok { color: #10b981 !important; } body.era-e4 .v096-req-missing { color: #f87171 !important; } body.era-e4 .v096-req-line { color: #e2e8f0; } body.era-e4 .v096-spec-box { background: rgba(251, 191, 36, 0.12) !important; border: 1px solid rgba(251, 191, 36, 0.35) !important; border-radius: 8px; color: #e2e8f0 !important; } body.era-e4 .v096-spec-row .spec-label { color: #94a3b8 !important; } body.era-e4 .kanban-card-spec { background: rgba(251, 191, 36, 0.2) !important; border: 1px solid rgba(251, 191, 36, 0.45) !important; color: #fde68a !important; border-radius: 999px; font-weight: 600; padding: 1px 6px; } body.era-e4 .kanban-card-qlabel { color: #94a3b8 !important; } body.era-e4 .v096-btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; border: none !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4); } /* Ende v0.9.6.0 */ /* ============================================================ v0.9.7.12: Gründer-Skill-Bars in Ära 2 ausblenden. Master Chief Vorgabe (2026-04-25): die XP-Luna-Progress-Fills wirken in der Skill-Row störend (kleine Werte sehen kaputt aus). Wir blenden den Bar-Container in den Gründer-Skills aus, die Zahl rechts daneben bleibt sichtbar. Andere Progress-Bars (Training, XP, etc.) sind nicht betroffen, da .skill-row nur in der Gründer-Skill-Sektion verwendet wird. ============================================================ */ body.era-e2 .skill-row .progress { display: none !important; } /* ============================================================ v0.9.10.2 — Era-2 (XP) UI Fix (2026-04-27) Autor: Googli Problem 1: Lead-Modal & Retainer-Verhandlung — sicherstellen, dass der Outer-Wrapper (.modal-overlay mit id) keinen versehentlichen XP-Chrome-Background hat. Problem 2: Cat-Bar Stalled/Slow Stripes & Track-Backgrounds gehen in Era 2 verloren. Defensiv-Override (Variante B nicht eindeutig bestimmbar — kein direkter cat-bar Era-2 Override gefunden, daher defensiver Re-Assert mit !important auf die Stripe-Backgrounds und die inline-styled Tracks). ============================================================ */ /* Problem 1: Outer-Wrapper für Lead-/Retainer-Modal soll ohne XP-Chrome bleiben (das Inner .window.modal kümmert sich selbst ums Styling via .modal:not(.settings-modal) Regel). */ body.era-e2 #lead-modal, body.era-e2 #retainer-modal { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* .modal-overlay-Default (rgba(0,0,0,0.3) Dim) gilt weiter, da .modal-overlay Klassen-Selektor schwächer ist als id-Selektor: wir reaktivieren den Dim explizit als Fallback. */ body.era-e2 #lead-modal.modal-overlay, body.era-e2 #retainer-modal.modal-overlay { background: rgba(0, 0, 0, 0.3) !important; } /* Problem 2: Cat-Bar Stalled/Slow Stripes & Track-BGs in Era 2 wieder sichtbar machen. Defensive Re-Assert. */ body.era-e2 .cat-bar-stripes { background-image: repeating-linear-gradient(45deg, #c44 0 8px, #a22 8px 16px) !important; background-size: 22.627px 22.627px !important; background-color: transparent !important; } body.era-e2 .cat-bar-stripes-slow { background-image: repeating-linear-gradient(45deg, #e0a800 0 8px, #b37700 8px 16px) !important; background-size: 22.627px 22.627px !important; background-color: transparent !important; } /* Track-Backgrounds (inline-styled #fde0e0 / #fff8e1) explizit zementieren, falls ein Era-2 Override sie überdeckt. */ body.era-e2 .cat-bar-stalled > div[style*="background:#fde0e0"], body.era-e2 .cat-bar-stalled .cat-track-stalled { background: #fde0e0 !important; } body.era-e2 .cat-bar-slow > div[style*="background:#fff8e1"], body.era-e2 .cat-bar-slow .cat-track-slow { background: #fff8e1 !important; } /* ============================================================ Ende v0.9.10.2 Era-2 UI Fix ============================================================ */ /* v091136era2 */ /* ============================================================ v0.9.11.36 — ÄRA 2 (Windows XP Luna 2005) AAA-Polish Glossy Buttons, Aero-Glow, XP-Blau-Verlaufstitle-Bar, grüner Start-Button, glossy Reflections, semantic colors. Strikt nur body.era-e2 Selektoren. ============================================================ */ /* ---------- Aero-Glow für focused windows ---------- */ body.era-e2 .window { transition: box-shadow 0.20s ease, transform 0.18s ease; } body.era-e2 .window.focused { box-shadow: 0 0 0 1px rgba(36, 94, 219, 0.55), 0 0 14px 2px rgba(58, 147, 255, 0.45), 4px 6px 18px rgba(0, 0, 0, 0.45) !important; } /* ---------- Glossy Title-Bar: subtle horizontal sheen ---------- */ body.era-e2 .title-bar { position: relative; } body.era-e2 .title-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 70%, rgba(255,255,255,0.0) 100%); pointer-events: none; border-radius: 5px 5px 0 0; } /* ---------- Glossy Buttons mit subtler Reflection ---------- */ body.era-e2 button { position: relative; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.08); } body.era-e2 button::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 100%); border-radius: 2px 2px 6px 6px / 2px 2px 4px 4px; pointer-events: none; } body.era-e2 button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(120, 180, 240, 0.45), 0 0 6px rgba(58, 147, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.08); } body.era-e2 button:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(0, 60, 130, 0.30) !important; } body.era-e2 button:active::after { opacity: 0.35; } /* Disabled-Buttons sauber ausgrauen */ body.era-e2 button:disabled, body.era-e2 button[disabled] { background: linear-gradient(180deg, #f0eee5 0%, #d8d4c4 100%) !important; color: #908b78 !important; border-color: #aca899 !important; box-shadow: none !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6); cursor: not-allowed; } body.era-e2 button:disabled::after, body.era-e2 button[disabled]::after { display: none; } /* ---------- Start-Button glossy reflection ---------- */ body.era-e2 .taskbar .start-btn, body.era-e2 .taskbar .start-button, body.era-e2 .taskbar .taskbar-start, body.era-e2 .taskbar button.start { position: relative; transition: background 0.15s ease, box-shadow 0.15s ease; } body.era-e2 .taskbar .start-btn::before, body.era-e2 .taskbar .start-button::before, body.era-e2 .taskbar .taskbar-start::before, body.era-e2 .taskbar button.start::before { content: ""; position: absolute; left: 4px; right: 8px; top: 2px; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 100%); border-radius: 4px 14px 14px 4px; pointer-events: none; } body.era-e2 .taskbar .start-btn:hover, body.era-e2 .taskbar .start-button:hover, body.era-e2 .taskbar .taskbar-start:hover, body.era-e2 .taskbar button.start:hover { box-shadow: inset 1px 1px 1px rgba(255,255,255,0.55), 0 0 8px rgba(95, 201, 79, 0.55) !important; } /* ---------- Topbar: glossy XP-Beige + cells separator ---------- */ body.era-e2 .topbar { background: linear-gradient(180deg, #f7f5e9 0%, #ece9d8 45%, #ddd9c4 100%) !important; border-bottom: 1px solid #aca899 !important; border-top: 1px solid rgba(255,255,255,0.85) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.10) !important; color: #000 !important; font-family: "Tahoma", "Verdana", sans-serif !important; } body.era-e2 .topbar .topbar-cell, body.era-e2 .topbar .cell, body.era-e2 .topbar > div { border-right: 1px solid rgba(0,0,0,0.10); box-shadow: 1px 0 0 rgba(255,255,255,0.65); } body.era-e2 .topbar .topbar-cell:last-child, body.era-e2 .topbar > div:last-child { border-right: none; box-shadow: none; } /* Mono-Font für Numbers */ body.era-e2 .topbar .val, body.era-e2 .topbar .num, body.era-e2 .topbar .money, body.era-e2 .topbar .runway, body.era-e2 .topbar .reputation { font-family: "Lucida Console", "Consolas", "Courier New", monospace; font-weight: bold; letter-spacing: 0.3px; } /* ---------- Semantic colors: pos / neg / warn ---------- */ body.era-e2 .topbar-cell .val.pos, body.era-e2 .topbar .val.pos, body.era-e2 .topbar .pos { color: #2e7d32 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.6); } body.era-e2 .topbar-cell .val.neg, body.era-e2 .topbar .val.neg, body.era-e2 .topbar .neg { color: #c21406 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.6); } body.era-e2 .topbar-cell .val.warn, body.era-e2 .topbar .val.warn, body.era-e2 .topbar .warn { color: #b56400 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.6); } /* Reputation-Bar: thresholds */ body.era-e2 .rep-bar.crit, body.era-e2 .reputation-bar.crit, body.era-e2 .topbar .rep-bar.lvl-crit { background: #c21406 !important; } body.era-e2 .rep-bar.low, body.era-e2 .topbar .rep-bar.lvl-low { background: #e0a800 !important; } body.era-e2 .rep-bar.mid, body.era-e2 .topbar .rep-bar.lvl-mid { background: #2e7d32 !important; } body.era-e2 .rep-bar.high, body.era-e2 .topbar .rep-bar.lvl-high { background: linear-gradient(180deg, #ffd54f 0%, #f5b417 60%, #c98800 100%) !important; box-shadow: 0 0 6px rgba(255,200,0,0.55) !important; } /* Critical runway / cash → orange-pulsing wie XP-Battery-Low */ body.era-e2 .topbar-cell.crit, body.era-e2 .topbar .cell.crit, body.era-e2 .runway-warn { animation: era-e2-runway-pulse 1.4s ease-in-out infinite; background: linear-gradient(180deg, rgba(255, 224, 130, 0.55) 0%, rgba(255, 180, 60, 0.55) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.15); } /* Money cash-pulse (auf .cash-up Klasse, falls JS sie setzt) */ body.era-e2 .cash-up, body.era-e2 .topbar .val.cash-up { animation: era-e2-cash-pulse 0.9s ease-out 1; } body.era-e2 .rep-up { animation: era-e2-rep-glow 1.6s ease-in-out 1; } /* ---------- Keyframes ---------- */ @keyframes era-e2-cash-pulse { 0% { background: rgba(56,142,60,0.0); } 50% { background: rgba(56,142,60,0.30); } 100% { background: rgba(56,142,60,0.0); } } @keyframes era-e2-runway-pulse { 0%, 100% { color: #c21406; } 50% { color: #ff6b6b; } } @keyframes era-e2-rep-glow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 8px rgba(255,215,0,0.85); } } @keyframes era-e2-modal-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1.0); } } /* ---------- Modal-Open Transition (XP zoom-in) ---------- */ body.era-e2 .modal, body.era-e2 .settings-window, body.era-e2 .modal-overlay > .modal, body.era-e2 #lead-modal .modal-content, body.era-e2 #retainer-modal .modal-content { animation: era-e2-modal-in 0.22s ease-out; } /* ---------- Inputs: XP focus-ring polished ---------- */ body.era-e2 input[type="text"], body.era-e2 input[type="number"], body.era-e2 select, body.era-e2 textarea { background: #ffffff !important; border: 1px solid #7f9db9 !important; border-radius: 2px !important; padding: 3px 5px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.era-e2 input[type="text"]:focus, body.era-e2 input[type="number"]:focus, body.era-e2 select:focus, body.era-e2 textarea:focus { outline: none !important; border-color: #245edb !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px rgba(36, 94, 219, 0.40) !important; } /* ---------- Close-Button (X) glossy enhancement ---------- */ body.era-e2 .title-bar .close, body.era-e2 .title-bar button[title*="lie\u00dfen"], body.era-e2 .title-bar button[title*="Close"] { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.25) !important; transition: background 0.12s ease, box-shadow 0.12s ease; } body.era-e2 .title-bar .close:hover, body.era-e2 .title-bar button[title*="lie\u00dfen"]:hover, body.era-e2 .title-bar button[title*="Close"]:hover { background: linear-gradient(180deg, #ffaa90 0%, #f57053 50%, #d52a14 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 0 6px rgba(255, 60, 30, 0.55) !important; } /* ---------- Progress: subtle outer glow on full ---------- */ body.era-e2 .progress { transition: box-shadow 0.2s ease; } body.era-e2 .progress.full, body.era-e2 .progress[data-full="1"] { box-shadow: inset 0 1px 2px rgba(0,0,0,0.12), 0 0 6px rgba(48, 125, 241, 0.55); } /* ---------- Hover-glow auf clickbaren Elementen (ohne Buttons-Doppel) ---------- */ body.era-e2 a:hover, body.era-e2 .clickable:hover { text-shadow: 0 0 4px rgba(36, 94, 219, 0.45); transition: text-shadow 0.15s ease; } /* ============================================================ Ende v0.9.11.36 Era-e2 AAA-Polish ============================================================ */ /* === v0.9.11.36 Era-e3 AAA-Polish === */ /* v091136era3 */ /* Material Design / iOS 7+ Flat — Polish Pass. Scope: NUR body.era-e3 Selektoren. Ziel: smooth shadows, Material-Ripple, iOS-Blue accents, flat white backgrounds, smooth transitions, Mono-Numbers, semantic colors für money/runway/rep, animated states. Additiv — bricht keine bestehenden Regeln. ============================================================ */ /* -- Token-Härtung: Material/iOS-Akzente + Mono-Font -- */ body.era-e3 { --accent-gold: #ffcc00; --font-mono: "SF Mono", "Roboto Mono", "Menlo", "Consolas", monospace; --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); --shadow-2: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08); --shadow-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12); --shadow-4: 0 8px 16px rgba(0,0,0,0.10), 0 16px 40px rgba(0,0,0,0.18); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* -- Smooth-Everything: Transitions auf häufige UI-Elemente -- */ body.era-e3 button, body.era-e3 .window, body.era-e3 .topbar-cell, body.era-e3 .start-btn, body.era-e3 .taskbar-btn, body.era-e3 input, body.era-e3 textarea, body.era-e3 select, body.era-e3 a { transition: background-color 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), color 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), box-shadow 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), transform 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), border-color 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), opacity 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)); } /* -- Material Ripple auf Buttons (CSS-only) -- */ body.era-e3 button { position: relative; overflow: hidden; isolation: isolate; } body.era-e3 button::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 65%); opacity: 0; transform: scale(0); transition: opacity 0.45s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), transform 0.45s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)); pointer-events: none; border-radius: inherit; z-index: 0; } body.era-e3 button:active::after { opacity: 1; transform: scale(2.3); transition: 0s; } /* Sicherstellen dass Button-Inhalt über Ripple liegt */ body.era-e3 button > * { position: relative; z-index: 1; } /* Secondary/Outlined: dezenterer Ripple in Akzent-Farbe */ body.era-e3 button.btn-secondary::after, body.era-e3 button.w95::after { background: radial-gradient(circle at center, rgba(0,122,255,0.18) 0%, rgba(0,122,255,0) 65%); } /* -- Primary-Button-Polish: subtile Elevation auf Hover -- */ body.era-e3 button:not(.btn-secondary):not(.w95):not(:disabled):hover { box-shadow: 0 2px 8px rgba(0, 122, 255, 0.30), 0 1px 3px rgba(0, 122, 255, 0.18); transform: translateY(-1px); } body.era-e3 button:not(.btn-secondary):not(.w95):not(:disabled):active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 122, 255, 0.25); } /* -- Window: smoothere Card-Optik mit Material-Elevation -- */ body.era-e3 .window { box-shadow: var(--shadow-2); border-radius: var(--radius, 10px); overflow: hidden; /* damit border-radius greift */ } body.era-e3 .window.floating { box-shadow: var(--shadow-4); } body.era-e3 .window:hover:not(:focus-within):not(.focused) { box-shadow: var(--shadow-3); } /* -- Topbar-Polish: Mono für Numbers, semantische Status-Farben -- */ body.era-e3 .topbar { box-shadow: 0 1px 3px rgba(0,0,0,0.06); } body.era-e3 .topbar-cell .val { font-family: var(--font-mono, "SF Mono", "Roboto Mono", monospace); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.01em; font-weight: 600; } body.era-e3 .topbar-cell .label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 600; opacity: 0.6; } /* -- Semantic Status-Klassen (additiv, kollidiert nicht mit existing .pos/.neg) -- */ body.era-e3 .topbar-cell .val.pos, body.era-e3 .pos { color: var(--accent-green); } body.era-e3 .topbar-cell .val.neg, body.era-e3 .neg { color: var(--accent-red); } body.era-e3 .warn { color: var(--accent-orange); font-weight: 600; } body.era-e3 .crit { color: var(--accent-red); font-weight: 700; animation: era-e3-runway-pulse 1.4s ease-in-out infinite; } body.era-e3 .gold, body.era-e3 .topbar-cell .val.gold { color: var(--accent-gold); font-weight: 700; } /* -- Cash-Pulse für Geldzuwächse (JS muss .cash-pulse Klasse togglen) -- */ body.era-e3 .cash-pulse { animation: era-e3-cash-pulse 1.0s ease-in-out 1; } /* -- Rep-Glow für Reputation-Up-Events -- */ body.era-e3 .rep-glow { animation: era-e3-rep-glow 1.6s ease-in-out 1; } /* -- Keyframes -- */ @keyframes era-e3-cash-pulse { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(52,199,89,0.18); } } @keyframes era-e3-runway-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.04); } } @keyframes era-e3-rep-glow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 12px rgba(255,204,0,0.7); } } @keyframes era-e3-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes era-e3-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes era-e3-progress-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } /* -- Modals: weiße Card mit big shadow + blur backdrop -- */ body.era-e3 .modal, body.era-e3 .modal-content, body.era-e3 .v096-modal, body.era-e3 .modal-card, body.era-e3 .dialog { background: #ffffff !important; border-radius: 12px !important; border: none !important; box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.08) !important; animation: era-e3-modal-in 0.22s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) both; } body.era-e3 .modal-backdrop, body.era-e3 .backdrop, body.era-e3 .overlay { background: rgba(0,0,0,0.42) !important; backdrop-filter: blur(3px) saturate(1.1); -webkit-backdrop-filter: blur(3px) saturate(1.1); animation: era-e3-fade-in 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) both; } /* -- Inputs: Material-Underline-Stil -- */ body.era-e3 input[type="text"], body.era-e3 input[type="number"], body.era-e3 input[type="email"], body.era-e3 input[type="password"], body.era-e3 input[type="search"], body.era-e3 textarea { background: transparent; border: none; border-bottom: 1.5px solid #e5e7eb; border-radius: 0; padding: 6px 2px; outline: none; color: #1c1c1e; font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", sans-serif); box-shadow: none; } body.era-e3 input[type="text"]:focus, body.era-e3 input[type="number"]:focus, body.era-e3 input[type="email"]:focus, body.era-e3 input[type="password"]:focus, body.era-e3 input[type="search"]:focus, body.era-e3 textarea:focus { border-bottom: 2px solid var(--accent-blue, #007aff); box-shadow: 0 1px 0 0 var(--accent-blue, #007aff); outline: none; } body.era-e3 select { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 10px; color: #1c1c1e; outline: none; font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", sans-serif); } body.era-e3 select:focus { border-color: var(--accent-blue, #007aff); box-shadow: 0 0 0 3px rgba(0,122,255,0.18); } /* -- Progress-Bars: flat & smooth -- */ body.era-e3 progress, body.era-e3 .progress-bar, body.era-e3 .progressbar { height: 4px; border-radius: 2px; background: #e5e7eb; overflow: hidden; border: none; appearance: none; -webkit-appearance: none; } body.era-e3 progress::-webkit-progress-bar { background: #e5e7eb; border-radius: 2px; } body.era-e3 progress::-webkit-progress-value { background: var(--accent-blue, #007aff); border-radius: 2px; transition: width 0.3s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)); } body.era-e3 progress::-moz-progress-bar { background: var(--accent-blue, #007aff); border-radius: 2px; } body.era-e3 .progress-bar.success > *, body.era-e3 .progress-bar.pos > * { background: var(--accent-green, #34c759) !important; } body.era-e3 .progress-bar.critical > *, body.era-e3 .progress-bar.crit > * { background: var(--accent-red, #ff3b30) !important; } body.era-e3 .progress-bar.indet::before { content: ''; display: block; height: 100%; width: 30%; background: var(--accent-blue, #007aff); border-radius: 2px; animation: era-e3-progress-indet 1.4s ease-in-out infinite; } /* -- Cards / Hover-Lift -- */ body.era-e3 .card, body.era-e3 .kanban-card { border-radius: 8px; box-shadow: var(--shadow-1); transition: box-shadow 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)), transform 0.2s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)); } body.era-e3 .card:hover, body.era-e3 .kanban-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } /* -- Taskbar-Polish: subtle Active-Indicator (iOS dock-like) -- */ body.era-e3 .taskbar-btn { border-radius: 6px; border: none; background: rgba(0,0,0,0.04); color: #1c1c1e; } body.era-e3 .taskbar-btn.active, body.era-e3 .taskbar-btn:active { background: rgba(0,122,255,0.12); color: var(--accent-blue, #007aff); } body.era-e3 .taskbar-btn:hover { background: rgba(0,0,0,0.08); } /* -- Disabled-States lesbar halten -- */ body.era-e3 button:disabled, body.era-e3 button[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; } body.era-e3 button:disabled:hover, body.era-e3 button[disabled]:hover { transform: none; box-shadow: none; } body.era-e3 button:disabled::after, body.era-e3 button[disabled]::after { display: none; } /* -- Title-Bar: Title in dunkelgrau, Buttons sauber -- */ body.era-e3 .title-bar .title { color: #212121; letter-spacing: 0.005em; } /* -- Focus-Ring (a11y) — iOS-Blue -- */ body.era-e3 button:focus-visible, body.era-e3 a:focus-visible, body.era-e3 [tabindex]:focus-visible { outline: 2px solid rgba(0,122,255,0.55); outline-offset: 2px; } /* -- Reduce-Motion: Animationen abschalten falls User es will -- */ @media (prefers-reduced-motion: reduce) { body.era-e3 button, body.era-e3 .window, body.era-e3 .card, body.era-e3 .kanban-card, body.era-e3 .modal, body.era-e3 .modal-content { transition: none !important; animation: none !important; } body.era-e3 .crit, body.era-e3 .cash-pulse, body.era-e3 .rep-glow { animation: none !important; } } /* === Ende v0.9.11.36 Era-e3 AAA-Polish === */ /* === v0.9.11.36 Era-e4 AAA-Polish === */ /* v091136era4 */ /* ============================================================ Era 4 (2025) — Glassmorphism / AI-Era AAA Polish Autor: Googli Sub-Agent (2026-04-29) Scope: NUR body.era-e4 Selektoren. Additiv. Ziel: iOS Vision Pro / macOS Sonoma / Linear-Vibe - Live-Aurora-Backdrop (sehr subtil) - Springy elastic transitions - Glass-Shimmer auf Cards - AI-Purple-Gradient Akzente - Animated Money/Runway/Rep states (Keyframes + Hooks) - Modal Open Animation (fade + scale + blur-clear) - Tabular-nums für mono-Numbers - Haptic-Feel auf Buttons (scale-down on active) ============================================================ */ /* --- Erweitertes Token-Set (additiv, überschreibt bestehende --accent-* nur leicht-erweiternd; respektiert vorhandene). --- */ body.era-e4 { --accent-green-soft: #34d399; --accent-red-soft: #f87171; --accent-orange: #fb923c; --accent-gold: #fbbf24; --accent-pink: #ec4899; --gradient-primary: linear-gradient(135deg, #007aff 0%, #5856d6 100%); --gradient-ai: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); --gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%); --gradient-danger: linear-gradient(135deg, #f87171 0%, #dc2626 100%); --gradient-aurora: linear-gradient(135deg, rgba(167, 139, 250, 0.18) 0%, rgba(102, 126, 234, 0.12) 25%, rgba(34, 211, 238, 0.10) 50%, rgba(236, 72, 153, 0.12) 75%, rgba(167, 139, 250, 0.18) 100%); --bezier-springy: cubic-bezier(0.34, 1.56, 0.64, 1); --bezier-smooth: cubic-bezier(0.4, 0, 0.2, 1); --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- Live Aurora-Backdrop: sehr subtiler animierter Verlauf über dem Wallpaper, lebendig aber nicht ablenkend. --- */ body.era-e4 .desktop::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--gradient-aurora); background-size: 300% 300%; animation: era-e4-aurora-shift 24s ease-in-out infinite; mix-blend-mode: screen; opacity: 0.85; z-index: 0; } /* v0.9.11.42 (2026-04-29): ENTFERNT — diese Regel zwingt .window.floating und .desktop-shortcuts auf position:relative, was ihre native position:absolute bricht. Floating-Windows fallen in den Layout-Flow, JS-style.left/top wirken nicht mehr, Stacking via z-index per JS funktioniert auch nicht weil alle auf z-index:1 genagelt sind. Aurora ::before liegt ohnehin unter den positionierten Geschwistern (Stacking-Order: pseudo-element :: before mit z-index:0 + positionierte Children mit z-index:auto → children gewinnen via DOM-Reihenfolge). Lift unnoetig. */ /* body.era-e4 .desktop > * { position: relative; z-index: 1; } -- removed v0.9.11.42 */ @keyframes era-e4-aurora-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- Tabular Numbers: Money/Reputation/Runway dürfen nicht springen. Wir setzen Mono-Font + tabular-nums auf alle relevanten Werte. --- */ body.era-e4 .topbar-cell .val, body.era-e4 .topbar .val, body.era-e4 .topbar-cell .label, body.era-e4 .money, body.era-e4 .money-pos, body.era-e4 .money-neg, body.era-e4 .pos, body.era-e4 .neg, body.era-e4 .warn, body.era-e4 .crit, body.era-e4 .info-tile .value, body.era-e4 .topbar-cell .runway, body.era-e4 [data-money], body.era-e4 [data-runway], body.era-e4 [data-reputation] { font-family: var(--font-mono) !important; font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; } /* --- Semantic Color Hooks (zusätzlich zu bestehenden) --- */ body.era-e4 .pos, body.era-e4 .money-pos { color: var(--accent-green-soft) !important; font-weight: 600; } body.era-e4 .neg, body.era-e4 .money-neg { color: var(--accent-red-soft) !important; font-weight: 600; } body.era-e4 .warn { color: var(--accent-orange) !important; font-weight: 600; } body.era-e4 .crit { background: var(--gradient-danger); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; animation: era-e4-runway-pulse 1.6s ease-in-out infinite; } /* --- Money / Runway / Reputation Keyframe-Animations (CSS Hooks). JS kann diese Klassen toggeln: .cash-pulse / .runway-low / .rep-up. --- */ @keyframes era-e4-cash-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); transform: scale(1); } 50% { box-shadow: 0 0 24px 4px rgba(52, 211, 153, 0.45); transform: scale(1.03); } } @keyframes era-e4-runway-pulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.85; filter: brightness(1.3); } } @keyframes era-e4-rep-glow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 16px rgba(251, 191, 36, 0.85), 0 0 32px rgba(251, 191, 36, 0.4); } } body.era-e4 .cash-pulse, body.era-e4 .topbar-cell .val.cash-pulse { animation: era-e4-cash-pulse 1.2s var(--bezier-springy) 1; border-radius: 8px; } body.era-e4 .runway-low, body.era-e4 .topbar-cell .val.runway-low, body.era-e4 .topbar-cell .val.crit { background: var(--gradient-danger); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: era-e4-runway-pulse 1.6s ease-in-out infinite; text-shadow: none !important; } body.era-e4 .rep-up, body.era-e4 .topbar-cell .val.rep-up { color: var(--accent-gold) !important; animation: era-e4-rep-glow 1.5s ease-in-out 2; } /* --- Glass-Shimmer Keyframe (animated diagonal sheen) --- */ @keyframes era-e4-glass-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } body.era-e4 .shimmer, body.era-e4 .important-card.shimmer { position: relative; overflow: hidden; } body.era-e4 .shimmer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); background-size: 200% 100%; animation: era-e4-glass-shimmer 3.5s linear infinite; } /* --- Modal Open Animation: fade + scale + blur-clear --- */ @keyframes era-e4-modal-pop { 0% { opacity: 0; transform: scale(0.94); filter: blur(6px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } body.era-e4 .modal, body.era-e4 .settings-window, body.era-e4 .milestone-card { animation: era-e4-modal-pop 0.32s var(--bezier-springy); } @keyframes era-e4-overlay-fade { 0% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } 100% { opacity: 1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } body.era-e4 .modal-overlay { animation: era-e4-overlay-fade 0.22s var(--bezier-smooth); } /* --- Buttons: Springy haptic feel + erweiterte Transitions --- */ body.era-e4 button { transition: background 0.2s var(--bezier-smooth), border-color 0.2s var(--bezier-smooth), box-shadow 0.2s var(--bezier-smooth), color 0.2s var(--bezier-smooth), transform 0.18s var(--bezier-springy); will-change: transform; } body.era-e4 button:hover:not(:disabled) { transform: translateY(-1px); } body.era-e4 button:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.08s; } /* --- AI-Themed Button-Variant: für AI-Features (purple-pink gradient). Hooks: .ai-btn / .btn-ai / [data-ai="true"]. JS kann opt-in. --- */ body.era-e4 button.ai-btn, body.era-e4 button.btn-ai, body.era-e4 button[data-ai="true"], body.era-e4 .ai-action { background: var(--gradient-ai) !important; border: 1px solid rgba(236, 72, 153, 0.55) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), inset 0 1px 0 rgba(255,255,255,0.18); background-size: 200% 200% !important; animation: era-e4-gradient-shift 6s ease-in-out infinite; position: relative; } body.era-e4 button.ai-btn:hover, body.era-e4 button.btn-ai:hover, body.era-e4 button[data-ai="true"]:hover, body.era-e4 .ai-action:hover { box-shadow: 0 0 24px 4px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255,255,255,0.28) !important; transform: translateY(-1px) scale(1.02); } @keyframes era-e4-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- CTA-Glow: kritische Confirm/Save Buttons bekommen pulsierenden Aura-Glow, falls .cta-glow Klasse oder .primary mit data-cta. --- */ @keyframes era-e4-cta-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234, 0), inset 0 1px 0 rgba(255,255,255,0.18); } 50% { box-shadow: 0 0 26px 4px rgba(167,139,250, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); } } body.era-e4 button.cta-glow, body.era-e4 button[data-cta="primary"], body.era-e4 .modal-actions button.primary, body.era-e4 .modal-actions button.confirm { animation: era-e4-cta-glow 2.6s ease-in-out infinite; } /* --- Inputs: zusätzlicher Inset-Highlight + Springy Focus --- */ body.era-e4 input[type="text"], body.era-e4 input[type="number"], body.era-e4 input[type="search"], body.era-e4 input[type="password"], body.era-e4 input[type="email"], body.era-e4 select, body.era-e4 textarea { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: background 0.2s var(--bezier-smooth), border-color 0.2s var(--bezier-smooth), box-shadow 0.2s var(--bezier-smooth); } body.era-e4 input[type="text"]:focus, body.era-e4 input[type="number"]:focus, body.era-e4 input[type="search"]:focus, body.era-e4 input[type="password"]:focus, body.era-e4 input[type="email"]:focus, body.era-e4 select:focus, body.era-e4 textarea:focus { transform: translateY(-1px); transition: transform 0.18s var(--bezier-springy), box-shadow 0.2s var(--bezier-smooth), border-color 0.2s var(--bezier-smooth); } /* --- Window Hover: subtile Lift-Animation für Floating-Windows --- */ body.era-e4 .window.floating { transition: box-shadow 0.3s var(--bezier-smooth), transform 0.25s var(--bezier-springy); } body.era-e4 .window.floating:hover { box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 0 30px rgba(102,126,234,0.22), 0 0 0 1px rgba(167,139,250,0.25) inset; } /* --- Title-Bar: subtiler Aero-Sheen on focus --- */ body.era-e4 .window.focused .title-bar { background-image: linear-gradient(135deg, rgba(102,126,234,0.40) 0%, rgba(167,139,250,0.38) 100%), linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%); background-blend-mode: normal, screen; } /* --- Topbar: glow-line am Bottom + tabular numbers shimmer (nur subtil) --- */ body.era-e4 .topbar { border-bottom: 1px solid rgba(102,126,234,0.22); box-shadow: 0 1px 0 rgba(102,126,234,0.18), 0 2px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04); } /* --- Table Hover: smooth row highlight --- */ body.era-e4 table tr { transition: background 0.18s var(--bezier-smooth); } /* --- Scrollbars: Glass-Style (WebKit) --- */ body.era-e4 ::-webkit-scrollbar { width: 10px; height: 10px; } body.era-e4 ::-webkit-scrollbar-track { background: rgba(15,23,42,0.4); border-radius: 8px; } body.era-e4 ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(102,126,234,0.5), rgba(167,139,250,0.5)); border-radius: 8px; border: 2px solid rgba(15,23,42,0.4); } body.era-e4 ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(102,126,234,0.75), rgba(167,139,250,0.75)); } /* --- Selection: AI-Purple --- */ body.era-e4 ::selection { background: rgba(167, 139, 250, 0.45); color: #f8fafc; } /* --- Reduced Motion: Respekt vor User-Preference --- */ @media (prefers-reduced-motion: reduce) { body.era-e4 .desktop::before, body.era-e4 button.ai-btn, body.era-e4 button.btn-ai, body.era-e4 button[data-ai="true"], body.era-e4 .ai-action, body.era-e4 .shimmer::after, body.era-e4 .crit, body.era-e4 .runway-low, body.era-e4 button.cta-glow, body.era-e4 button[data-cta="primary"] { animation: none !important; } body.era-e4 .modal, body.era-e4 .settings-window, body.era-e4 .milestone-card, body.era-e4 .modal-overlay { animation: none !important; } } /* === Ende v0.9.11.36 Era-e4 AAA-Polish === */ /* ============================================================ v091136era1 === v0.9.11.36 Era-e1 AAA-Polish — Authentic Win95 === Sub-Agent: era1-polish Date: 2026-04-29 Scope: NUR body.era-e1 Selektoren — kein Übergreifen auf andere Ären. ============================================================ */ /* --- Era-1 Color & Font Tokens --- */ body.era-e1 { --accent-orange: #ff8c00; --accent-gold: #ffd700; --win-hover: #d4d0c8; --win-darker: #404040; --font-mono-e1: "VT323", "Courier New", "Lucida Console", monospace; font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif; font-size: 11px; color: #000; } /* --- Body & Desktop Background (klassisches Win95-Teal) --- */ /* WICHTIG: NICHT auf #screen-main-menu .desktop anwenden, sonst überlagert es das Foto-Wallpaper im Hauptmenü (style.css). */ body.era-e1 .desktop:not(#screen-main-menu .desktop):not(#screen-main-menu *), body.era-e1 #desktop { background-color: #008080 !important; background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.04) 1px, transparent 0) !important; background-size: 3px 3px !important; } /* Hauptmenü-Override: Foto-Hintergrund aus style.css behalten (höhere Spezifität als era-e1 .desktop) */ body.era-e1 #screen-main-menu .desktop, body.main-menu-active.era-e1 #screen-main-menu .desktop { background: linear-gradient(180deg, rgba(12,18,32,0.55) 0%, rgba(12,18,32,0.35) 45%, rgba(12,18,32,0.70) 100%), url('../images/menu/mainmenu-collage.jpg') center center / cover no-repeat, #0c1220 !important; background-image: linear-gradient(180deg, rgba(12,18,32,0.55) 0%, rgba(12,18,32,0.35) 45%, rgba(12,18,32,0.70) 100%), url('../images/menu/mainmenu-collage.jpg') !important; background-size: cover, cover !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color: #0c1220 !important; } /* --- Selection-Color --- */ body.era-e1 ::selection { background: #000080; color: #fff; } /* --- Subtle CRT-Scanline-Overlay --- */ body.era-e1::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.025) 0px, rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 3px ); mix-blend-mode: multiply; opacity: 0.45; } /* --- Window Frame (raised 3D-Bevel) --- */ body.era-e1 .window { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000000; border-bottom: 2px solid #000000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 2px 2px 0 #000; border-radius: 0; padding: 2px; color: #000; } /* --- Title-Bar --- */ body.era-e1 .window .title-bar, body.era-e1 .window .titlebar, body.era-e1 .window .window-title, body.era-e1 .window > .title, body.era-e1 .window > header { background: linear-gradient(90deg, #000080 0%, #1084d0 100%) !important; color: #fff !important; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; font-weight: bold; height: 22px; line-height: 22px; padding: 0 2px 0 4px !important; /* rechts schmaler, damit Controls näher am Rand */ display: flex; align-items: center; justify-content: space-between; border-radius: 0 !important; text-shadow: none; letter-spacing: 0; } /* Inactive-Title-Bar: NUR für Floating-Game-Windows (vom window-manager erzeugt). Statische Windows wie Hauptmenü-Fenster (#main-menu-window) und Char-Creation (#create-window, #screen-create) haben keine .active/.focused-Klasse, sind aber immer "aktiv" — dürfen also nicht inactive-grau gerendert werden. */ body.era-e1 .window.floating:not(.active):not(.focused) .title-bar, body.era-e1 .window.floating.inactive .title-bar { background: linear-gradient(90deg, #808080 0%, #c0c0c0 100%) !important; color: #dfdfdf !important; } /* Title-Bar Controls Buttons (Win95 Classic — Min/Max/Close) */ /* SCOPE-EINGRENZUNG: NUR Buttons innerhalb von .title-bar > .controls (Min/Max/Close). NICHT alle Buttons in der Title-Bar (sonst werden Modal-X-Buttons o.ä. zerquetscht). */ body.era-e1 .title-bar .controls > button, body.era-e1 .title-bar .controls > .btn-close, body.era-e1 .title-bar .controls > .btn-minimize, body.era-e1 .title-bar .controls > .btn-maximize { background: #c0c0c0 !important; color: #000 !important; border-top: 1px solid #ffffff !important; border-left: 1px solid #ffffff !important; border-right: 2px solid #000 !important; border-bottom: 2px solid #000 !important; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf !important; border-radius: 0 !important; box-sizing: border-box !important; width: 22px !important; height: 20px !important; min-width: 22px !important; min-height: 0 !important; /* override gen. button min-height: 26px */ padding: 0 !important; margin: 0 !important; font-size: 11px !important; line-height: 1 !important; font-weight: bold !important; cursor: default !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Erster Button bekommt minimalen Abstand vom Title-Text */ body.era-e1 .title-bar .controls > button:first-child { margin-left: 4px !important; } /* :active drückt nur die Borders um — Gesamtgröße bleibt gleich dank box-sizing */ body.era-e1 .title-bar .controls > button:active { border-top: 2px solid #000 !important; border-left: 2px solid #000 !important; border-right: 1px solid #fff !important; border-bottom: 1px solid #fff !important; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf !important; } /* Title-Bar Controls Container: rechtsbündig, ohne Extra-Margin am rechten Rand */ body.era-e1 .title-bar .controls { display: inline-flex !important; gap: 0 !important; align-items: center !important; margin-right: 0 !important; margin-left: auto !important; padding: 0 !important; flex-shrink: 0 !important; } /* --- Buttons (raised 3D-Bevel) --- */ body.era-e1 button, body.era-e1 .btn, body.era-e1 input[type="button"], body.era-e1 input[type="submit"], body.era-e1 input[type="reset"] { background: #c0c0c0; color: #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000000; border-bottom: 2px solid #000000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; border-radius: 0; padding: 3px 12px; cursor: default; text-shadow: none; transition: none; min-height: 26px; } body.era-e1 button:hover:not(:disabled), body.era-e1 .btn:hover:not(:disabled) { background: #d4d0c8; } body.era-e1 button:active:not(:disabled), body.era-e1 .btn:active:not(:disabled), body.era-e1 button.active, body.era-e1 .btn.active { border-top: 2px solid #000000; border-left: 2px solid #000000; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf; padding: 4px 11px 2px 13px; } body.era-e1 button:focus, body.era-e1 .btn:focus { outline: 1px dotted #000; outline-offset: -4px; } body.era-e1 button:disabled, body.era-e1 .btn:disabled, body.era-e1 .btn.disabled { color: #808080 !important; text-shadow: 1px 1px 0 #ffffff !important; background: #c0c0c0 !important; cursor: default !important; } body.era-e1 .btn-primary, body.era-e1 button.primary { font-weight: bold; } /* --- Form-Inputs (sunken/inset 3D-Bevel) --- */ body.era-e1 input[type="text"], body.era-e1 input[type="number"], body.era-e1 input[type="email"], body.era-e1 input[type="password"], body.era-e1 input[type="search"], body.era-e1 input[type="url"], body.era-e1 input[type="tel"], body.era-e1 select, body.era-e1 textarea { background: #ffffff; color: #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; border-top: 2px solid #000000; border-left: 2px solid #000000; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf; border-radius: 0; padding: 3px 5px; outline: none; } body.era-e1 input:focus, body.era-e1 select:focus, body.era-e1 textarea:focus { outline: 1px dotted #000; outline-offset: 1px; } body.era-e1 input:disabled, body.era-e1 select:disabled, body.era-e1 textarea:disabled { background: #c0c0c0; color: #808080; } body.era-e1 input[type="checkbox"], body.era-e1 input[type="radio"] { background: #ffffff; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #000; border-radius: 0; width: 13px; height: 13px; cursor: default; } /* --- Topbar (sunken status-bar look) --- */ body.era-e1 .topbar, body.era-e1 #topbar, body.era-e1 .top-bar { background: #c0c0c0; color: #000; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf; border-radius: 0; padding: 4px 6px; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; } body.era-e1 .topbar > *, body.era-e1 .topbar .cell, body.era-e1 .topbar .topbar-cell, body.era-e1 .topbar .stat, body.era-e1 .topbar .topbar-item { border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #c0c0c0; padding: 2px 8px; margin: 0 2px; } body.era-e1 .topbar .money, body.era-e1 .topbar .cash, body.era-e1 .topbar [data-stat="money"], body.era-e1 .topbar [data-stat="cash"], body.era-e1 .money-display, body.era-e1 .cash-display { font-family: var(--font-mono-e1); font-weight: bold; font-size: 14px; color: var(--accent-green); letter-spacing: 0.5px; } body.era-e1 .topbar .money.neg, body.era-e1 .topbar .cash.neg, body.era-e1 .money-display.neg { color: var(--accent-red); } body.era-e1 .rep, body.era-e1 .reputation, body.era-e1 .topbar .rep { font-family: var(--font-mono-e1); font-weight: bold; } /* --- Progress Bars --- */ body.era-e1 .progress, body.era-e1 .progress-bar, body.era-e1 .bar { background: #c0c0c0; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #404040; border-radius: 0; padding: 1px; overflow: hidden; height: 16px; } body.era-e1 .progress > .fill, body.era-e1 .progress-bar .fill, body.era-e1 .progress .progress-fill, body.era-e1 .bar > .fill { background-image: repeating-linear-gradient( 90deg, #000080 0px, #000080 6px, #0000a0 6px, #0000a0 8px ); border-radius: 0; height: 100%; } /* --- Taskbar --- */ body.era-e1 .taskbar, body.era-e1 #taskbar { background: #c0c0c0; border-top: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #dfdfdf; border-bottom: 1px solid #404040; border-radius: 0; padding: 2px 4px; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; height: 36px; } /* Taskbar-Buttons: 32px Innenhöhe passend zu 36px Bar (2px padding oben/unten) */ body.era-e1 .taskbar-btn { height: 32px !important; } /* Start-Menu links auf 0 (vorher 4px) */ body.era-e1 .start-menu { left: 0 !important; } body.era-e1 .taskbar .start-button, body.era-e1 .taskbar .start-btn, body.era-e1 .taskbar .btn-start, body.era-e1 #start-button { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; border-radius: 0; padding: 2px 8px; font-weight: bold; font-size: 11px; cursor: default; min-height: 22px; } body.era-e1 .taskbar .task-button, body.era-e1 .taskbar .task-btn { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; border-radius: 0; padding: 2px 6px; font-size: 11px; margin: 0 1px; cursor: default; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.era-e1 .taskbar .task-button.active, body.era-e1 .taskbar .task-btn.active { border-top: 2px solid #000; border-left: 2px solid #000; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf; background-image: linear-gradient( 45deg, #c0c0c0 25%, #a0a0a0 25%, #a0a0a0 50%, #c0c0c0 50%, #c0c0c0 75%, #a0a0a0 75% ); background-size: 2px 2px; } /* --- Modals --- */ body.era-e1 .modal, body.era-e1 .modal-content, body.era-e1 .dialog { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 2px 2px 4px rgba(0, 0, 0, 0.5); border-radius: 0; padding: 8px; color: #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; } body.era-e1 .modal-overlay, body.era-e1 .overlay, body.era-e1 .backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: none; } /* --- Panels & Cards --- */ body.era-e1 .panel, body.era-e1 .card, body.era-e1 .group-box, body.era-e1 fieldset { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #808080; border-bottom: 1px solid #808080; box-shadow: inset -1px -1px 0 #404040; border-radius: 0; padding: 8px; color: #000; } body.era-e1 fieldset legend { background: #c0c0c0; color: #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; font-weight: bold; padding: 0 4px; } /* --- Tabs --- */ body.era-e1 .tab, body.era-e1 .tabs .tab, body.era-e1 .tab-button { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: none; box-shadow: inset 1px 1px 0 #dfdfdf; border-radius: 0; padding: 4px 12px; font-size: 11px; color: #000; cursor: default; margin-right: -2px; position: relative; bottom: -2px; } body.era-e1 .tab.active, body.era-e1 .tabs .tab.active, body.era-e1 .tab-button.active { background: #c0c0c0; z-index: 2; padding-bottom: 6px; bottom: 0; } /* --- Tables --- */ body.era-e1 table, body.era-e1 .table { background: #ffffff; color: #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; border-collapse: collapse; border: 1px solid #808080; } body.era-e1 table th, body.era-e1 .table th { background: #c0c0c0; color: #000; font-weight: bold; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #808080; border-bottom: 1px solid #808080; padding: 2px 6px; text-align: left; } body.era-e1 table td, body.era-e1 .table td { border-bottom: 1px dotted #c0c0c0; padding: 2px 6px; } body.era-e1 table tr:hover td { background: #000080; color: #ffffff; } /* --- Scrollbars (Win95-style chunky) --- */ /* Pfeile als Inline-SVG, NUR single-button (kein Doppel-Pfeil oben/unten). */ body.era-e1 ::-webkit-scrollbar { width: 16px; height: 16px; background: #c0c0c0; } body.era-e1 ::-webkit-scrollbar-track { background: repeating-linear-gradient( 45deg, #c0c0c0 0px, #c0c0c0 1px, #dfdfdf 1px, #dfdfdf 2px ); } body.era-e1 ::-webkit-scrollbar-thumb { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; } /* Default: Buttons mit Bevel-Frame */ body.era-e1 ::-webkit-scrollbar-button { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; } /* NUR die einzeln auftretenden Buttons (oben/unten/links/rechts) anzeigen — verhindert Doppel-Pfeile (start+end). */ body.era-e1 ::-webkit-scrollbar-button:single-button:vertical:decrement { /* Pfeil nach oben ▲ als SVG (schwarz auf grau) */ background-image: url("data:image/svg+xml;utf8,"); display: block; } body.era-e1 ::-webkit-scrollbar-button:single-button:vertical:increment { /* Pfeil nach unten ▼ */ background-image: url("data:image/svg+xml;utf8,"); display: block; } body.era-e1 ::-webkit-scrollbar-button:single-button:horizontal:decrement { /* Pfeil nach links ◀ */ background-image: url("data:image/svg+xml;utf8,"); display: block; } body.era-e1 ::-webkit-scrollbar-button:single-button:horizontal:increment { /* Pfeil nach rechts ▶ */ background-image: url("data:image/svg+xml;utf8,"); display: block; } /* ============================================================ Resize-Handle: eigene Footer-Box (statt absolute Overlay) Win95-Style: Diagonal-Grip in eigener 14px-Höhe-Zeile unter dem Body. Specificity: body.era-e1 .window > .resize-handle (gewinnt gegen style.css Default-Definition position:absolute). ============================================================ */ body.era-e1 .window > .resize-handle { position: relative !important; /* aus absolute holen — jetzt Flex-Item */ right: auto !important; bottom: auto !important; width: auto !important; /* volle Breite */ height: 14px !important; min-height: 14px !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: stretch !important; margin: 0 !important; /* keine Lücke zum Body drüber */ background: #c0c0c0 !important; border-top: 1px solid #808080 !important; /* trennt vom Body wie Status-Bar */ box-shadow: inset 0 1px 0 #dfdfdf !important; cursor: nwse-resize !important; /* Diagonal-Grip nur ganz rechts (Win95-Klassiker) */ background-image: linear-gradient(135deg, transparent 0 calc(100% - 14px), #808080 calc(100% - 14px) calc(100% - 12px), transparent calc(100% - 12px) calc(100% - 10px), #808080 calc(100% - 10px) calc(100% - 8px), transparent calc(100% - 8px) calc(100% - 6px), #808080 calc(100% - 6px) calc(100% - 4px), transparent calc(100% - 4px) 100% ) !important; /* Pointer-Events explizit auf die ganze Box — jeder Punkt der Bottom-Bar triggert Resize */ pointer-events: auto !important; user-select: none !important; -webkit-user-select: none !important; } /* Window-Body: kein Bottom-Margin/Padding, damit Body direkt an Bottom-Bar stößt */ body.era-e1 .window > .window-body { margin-bottom: 0 !important; /* Padding bleibt wie default, aber kein extra Bottom-Padding der eine Lücke macht */ } /* Window selbst: Padding entfernen für direkte Anbindung Body-Bottom an Bar-Top */ body.era-e1 .window { padding: 0 !important; } /* Doppel-Pfeile (start+end): ausblenden — sonst hätten wir 2 oben/unten */ body.era-e1 ::-webkit-scrollbar-button:double-button, body.era-e1 ::-webkit-scrollbar-button:start:decrement:double, body.era-e1 ::-webkit-scrollbar-button:end:increment:double, body.era-e1 ::-webkit-scrollbar-button:vertical:start:increment, body.era-e1 ::-webkit-scrollbar-button:vertical:end:decrement, body.era-e1 ::-webkit-scrollbar-button:horizontal:start:increment, body.era-e1 ::-webkit-scrollbar-button:horizontal:end:decrement { display: none !important; } body.era-e1 ::-webkit-scrollbar-button:active { border-top: 2px solid #000; border-left: 2px solid #000; border-right: 1px solid #fff; border-bottom: 1px solid #fff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf; } body.era-e1 ::-webkit-scrollbar-corner { background: #c0c0c0; } /* --- Tooltips --- */ body.era-e1 .tooltip, body.era-e1 [role="tooltip"] { background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; padding: 2px 5px; border-radius: 0; } /* --- Notifications / Mail / Inbox Items --- */ body.era-e1 .notification, body.era-e1 .mail-item, body.era-e1 .inbox-item, body.era-e1 .toast { background: #c0c0c0; color: #000; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; border-radius: 0; padding: 6px 8px; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; } /* --- Headings --- */ body.era-e1 h1, body.era-e1 h2, body.era-e1 h3, body.era-e1 h4 { font-family: "MS Sans Serif", Tahoma, sans-serif; color: #000; font-weight: bold; margin: 8px 0 4px; } body.era-e1 h1 { font-size: 16px; } body.era-e1 h2 { font-size: 14px; } body.era-e1 h3 { font-size: 12px; } body.era-e1 h4 { font-size: 11px; } /* --- Helper Classes (.pos / .neg / .warn / .crit) --- */ body.era-e1 .pos { color: var(--accent-green); font-weight: bold; } body.era-e1 .neg { color: var(--accent-red); font-weight: bold; } body.era-e1 .warn { color: var(--accent-orange); font-weight: bold; } body.era-e1 .crit { color: var(--accent-red); font-weight: bold; animation: era-e1-runway-pulse 1s ease-in-out infinite; } /* --- Animations / Keyframes --- */ @keyframes era-e1-cash-pulse { 0% { background-color: transparent; color: var(--accent-green); transform: scale(1); } 30% { background-color: #c0ffc0; color: #006400; transform: scale(1.08); } 100% { background-color: transparent; color: var(--accent-green); transform: scale(1); } } @keyframes era-e1-runway-pulse { 0% { color: var(--accent-red); opacity: 1; } 50% { color: #ff0000; opacity: 0.65; text-shadow: 0 0 4px rgba(255, 0, 0, 0.8); } 100% { color: var(--accent-red); opacity: 1; } } @keyframes era-e1-rep-glow { 0% { color: inherit; text-shadow: none; } 50% { color: var(--accent-gold); text-shadow: 0 0 6px rgba(255, 215, 0, 0.9); } 100% { color: inherit; text-shadow: none; } } body.era-e1 .cash-pulse { animation: era-e1-cash-pulse 0.8s ease-out; } body.era-e1 .rep-glow { animation: era-e1-rep-glow 1.2s ease-out; } /* Runway-Cell Auto-Pulse bei kritischem State (.runway-critical via JS) */ body.era-e1 .runway.critical, body.era-e1 .runway-cell.critical, body.era-e1 [data-runway-critical="1"] { animation: era-e1-runway-pulse 1s ease-in-out infinite; color: var(--accent-red); font-weight: bold; } /* --- Cursor (Win95 default arrow, kein hand-pointer) --- */ body.era-e1 button, body.era-e1 .btn, body.era-e1 a, body.era-e1 input[type="button"], body.era-e1 input[type="submit"], body.era-e1 .clickable { cursor: default; } /* --- Links --- */ body.era-e1 a { color: #0000ee; text-decoration: underline; } body.era-e1 a:visited { color: #800080; } body.era-e1 a:hover { color: #0000aa; } /* --- Disabled-State Override (greyed out look) --- */ body.era-e1 .disabled, body.era-e1 [disabled] { color: #808080 !important; text-shadow: 1px 1px 0 #ffffff !important; cursor: default !important; } /* --- HR (klassische Win95 sunken line) --- */ body.era-e1 hr { border: none; border-top: 1px solid #808080; border-bottom: 1px solid #ffffff; height: 0; margin: 6px 0; } /* --- Code/Pre (Mono font) --- */ body.era-e1 code, body.era-e1 pre, body.era-e1 kbd { font-family: "Courier New", "Lucida Console", monospace; font-size: 11px; background: #ffffff; color: #000; padding: 1px 3px; border: 1px solid #808080; } /* --- Mail / Email window content authentic look --- */ body.era-e1 .mail-list, body.era-e1 .mail-list-item { background: #ffffff; color: #000; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; } body.era-e1 .mail-list-item.selected, body.era-e1 .mail-list-item.active { background: #000080; color: #ffffff; } body.era-e1 .mail-body, body.era-e1 .mail-content { background: #ffffff; color: #000; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; box-shadow: inset 1px 1px 0 #404040; padding: 6px; } /* --- Stat indicators / KPI tiles (raised cards) --- */ body.era-e1 .kpi, body.era-e1 .stat-tile, body.era-e1 .metric { background: #c0c0c0; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 2px solid #000; border-bottom: 2px solid #000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; padding: 6px; color: #000; } body.era-e1 .kpi-value, body.era-e1 .stat-value, body.era-e1 .metric-value { font-family: var(--font-mono-e1); font-weight: bold; font-size: 16px; color: var(--accent-blue); } /* === Ende v0.9.11.36 Era-e1 AAA-Polish === */ /* v091136era4-readability-fix */ /* 1. Backdrop-Blur massiv erhöhen & 4. Glas-Elemente bekommen klare Kanten */ body.era-e4 .window, body.era-e4 .modal, body.era-e4 .topbar, body.era-e4 #taskbar, body.era-e4 .taskbar { backdrop-filter: blur(28px) saturate(140%) !important; -webkit-backdrop-filter: blur(28px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 32px rgba(0, 0, 0, 0.4) !important; } /* 2. Hintergrund-Dimmer-Layer auf desktop */ body.era-e4 .desktop::before, body.era-e4 #desktop::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.35); z-index: 0; pointer-events: none; } /* v0.9.11.42 (2026-04-29): ENTFERNT — selbe Begruendung wie oben. Forciert position:relative auf .window.floating und .desktop-shortcuts und bricht das absolute-Layout dieser Elemente. Aurora/Dimmer ::before liegt automatisch unter den positionierten Children. */ /* body.era-e4 .desktop > *, body.era-e4 #desktop > * { position: relative; z-index: 1; } -- removed v0.9.11.42 */ /* 3. Schrift verstärken */ body.era-e4 { font-weight: 500 !important; } body.era-e4 .topbar { font-weight: 600 !important; } body.era-e4 .money, body.era-e4 .stat-money { font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important; } body.era-e4 .modal-title, body.era-e4 .window-title { font-weight: 600 !important; } /* 5. Kontrast-Lock auf Modal-Inhalten */ body.era-e4 .window .window-content, body.era-e4 .modal .modal-content { background: rgba(15, 15, 30, 0.55) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; } /* 6 & 7. Topbar-Trenner sichtbar machen & Hierarchie */ body.era-e4 .topbar-stat, body.era-e4 .stat-item { padding: 0 14px !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; } body.era-e4 .topbar-stat:last-child, body.era-e4 .stat-item:last-child { border-right: none !important; } body.era-e4 .stat-money, body.era-e4 .stat-reputation, body.era-e4 .money-display { font-size: 14px !important; font-weight: 700 !important; } body.era-e4 .stat-rate, body.era-e4 .stat-projects { font-size: 12px !important; color: rgba(255, 255, 255, 0.7) !important; } /* 8. Tabs-Active-State verstärken */ body.era-e4 .tab, body.era-e4 .window-tab { color: rgba(255, 255, 255, 0.55) !important; background: transparent !important; } body.era-e4 .tab.active, body.era-e4 .window-tab.active { color: #ffffff !important; border-bottom: 2px solid #8e44ad !important; text-shadow: 0 0 8px rgba(142, 68, 173, 0.6) !important; } /* 9. PAUSED-Indicator */ body.era-e4.paused #paused-indicator, body.era-e4.paused .paused-indicator, body.era-e4 .paused-overlay { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(15, 15, 30, 0.6) !important; backdrop-filter: blur(16px) saturate(120%) !important; -webkit-backdrop-filter: blur(16px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; padding: 20px 40px !important; border-radius: 12px !important; font-size: 24px !important; font-weight: 700 !important; color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; z-index: 9999 !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; } /* 10. Era-Badge unten rechts */ body.era-e4 #era-badge, body.era-e4 .era-badge { border-radius: 8px !important; margin-bottom: 60px !important; } /* v091136era4-readability-pass2 */ /* 1. Backdrop-Blur ZU SCHWACH */ body.era-e4 .window, body.era-e4 .window.floating, body.era-e4 .window.focused, body.era-e4 .modal, body.era-e4 .modal-content, body.era-e4 .window > .window-content, body.era-e4 .window > .content { background: rgba(15, 18, 35, 0.78) !important; backdrop-filter: blur(32px) saturate(160%) !important; -webkit-backdrop-filter: blur(32px) saturate(160%) !important; } /* 2. Tab-Kontrast zu gering */ /* Inactive tabs gedimmt */ body.era-e4 .tabs button, body.era-e4 .window-tabs button, body.era-e4 [role="tab"]:not([aria-selected="true"]) { background: transparent !important; color: rgba(255, 255, 255, 0.55) !important; border-bottom: 2px solid transparent !important; font-weight: 500 !important; } /* Active tab — pill background + AI-purple underline + glow */ body.era-e4 .tabs button.active, body.era-e4 .window-tabs button.active, body.era-e4 [role="tab"][aria-selected="true"], body.era-e4 .tab-active, body.era-e4 .tab.active { background: rgba(139, 92, 246, 0.18) !important; color: #fff !important; border-bottom: 2px solid #a78bfa !important; border-radius: 8px 8px 0 0 !important; box-shadow: 0 -2px 12px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; font-weight: 700 !important; } /* Hover state */ body.era-e4 .tabs button:not(.active):hover, body.era-e4 .window-tabs button:not(.active):hover { color: rgba(255, 255, 255, 0.85) !important; background: rgba(255, 255, 255, 0.05) !important; } /* 3. Modal-Border zu subtil */ body.era-e4 .window, body.era-e4 .window.floating, body.era-e4 .modal, body.era-e4 .modal-content { border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important; } /* Active/focused window: extra glow */ body.era-e4 .window.focused { border-color: rgba(167, 139, 250, 0.45) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 1px rgba(167, 139, 250, 0.25) !important; }/* === v091136era4-readability-pass3 === */ /* Tabs: hardcoded inline-styled .w95 buttons override */ body.era-e4 .window-body button.w95 { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.65) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px 8px 0 0 !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 14px !important; margin-bottom: 0 !important; box-shadow: none !important; text-shadow: none !important; transition: all 0.18s ease !important; } body.era-e4 .window-body button.w95:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.9) !important; } /* Active tab — bold + AI-purple underline */ body.era-e4 .window-body button.w95[style*="font-weight:bold"], body.era-e4 .window-body button.w95[style*="background:#e8e8e8"] { background: rgba(139, 92, 246, 0.22) !important; color: #fff !important; border-color: rgba(167, 139, 250, 0.45) !important; border-bottom: 2px solid #a78bfa !important; font-weight: 700 !important; box-shadow: 0 -2px 12px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } /* Tab-Container (the inline-styled div with border-bottom:2px solid var(--win-dark)) */ body.era-e4 .window-body > div[style*="border-bottom"] { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; padding-bottom: 0 !important; margin-bottom: 12px !important; gap: 4px !important; } /* Window-Body: tighten readability with backdrop layer */ body.era-e4 .window-body { background: rgba(15, 18, 35, 0.45) !important; padding: 14px !important; border-radius: 0 0 12px 12px !important; color: rgba(255, 255, 255, 0.92) !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; overflow-y: auto !important; } /* Fieldsets get glass-card treatment */ body.era-e4 .window-body fieldset { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; padding: 10px 14px !important; margin: 8px 0 !important; color: rgba(255, 255, 255, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } body.era-e4 .window-body fieldset > legend { color: rgba(167, 139, 250, 0.95) !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; padding: 0 8px !important; background: transparent !important; } /* Stat rows: better visual rhythm */ body.era-e4 .window-body .stat-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 4px 0 !important; border-bottom: 1px dashed rgba(255, 255, 255, 0.06) !important; font-size: 13px !important; } body.era-e4 .window-body .stat-row:last-child { border-bottom: none !important; } body.era-e4 .window-body .stat-row strong { color: #fff !important; font-weight: 700 !important; } body.era-e4 .window-body .stat-row span:last-child { font-variant-numeric: tabular-nums !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.95) !important; } /* Title-bar: focused state already glows from pass2, just upgrade typography */ body.era-e4 .window > .title-bar { background: linear-gradient(180deg, rgba(139, 92, 246, 0.22) 0%, rgba(99, 102, 241, 0.15) 100%) !important; border-bottom: 1px solid rgba(167, 139, 250, 0.3) !important; padding: 8px 12px !important; border-radius: 12px 12px 0 0 !important; } body.era-e4 .window > .title-bar .title { color: #fff !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.02em !important; } body.era-e4 .window > .title-bar .controls button { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 6px !important; width: 22px !important; height: 22px !important; font-size: 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.15s ease !important; } body.era-e4 .window > .title-bar .controls button:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; } /* Inputs/selects in modal */ body.era-e4 .window-body input, body.era-e4 .window-body select, body.era-e4 .window-body textarea { background: rgba(0, 0, 0, 0.25) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 6px !important; padding: 4px 8px !important; font-size: 12px !important; font-family: 'Inter', system-ui, sans-serif !important; } body.era-e4 .window-body input:focus, body.era-e4 .window-body select:focus { outline: none !important; border-color: rgba(167, 139, 250, 0.6) !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important; } /* Labels */ body.era-e4 .window-body label { color: rgba(255, 255, 255, 0.85) !important; } /* v091136era2-modal-pass2 */ /* === Era 2 — Inline-styled .w95 buttons → XP Luna treatment === */ body.era-e2 .window-body button.w95 { background: linear-gradient(180deg, #fdfdfd 0%, #ece9d8 100%) !important; border: 1px solid #003c74 !important; border-radius: 3px 3px 0 0 !important; color: #000 !important; font-family: "Tahoma", "MS Sans Serif", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; padding: 4px 14px !important; margin: 0 1px 0 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important; text-shadow: none !important; cursor: pointer !important; transition: all 0.12s ease !important; } body.era-e2 .window-body button.w95:hover { background: linear-gradient(180deg, #fff 0%, #ffeec0 100%) !important; border-color: #f8b800 !important; } /* Active tab — XP-style raised + thicker bottom-line */ body.era-e2 .window-body button.w95[style*="font-weight:bold"], body.era-e2 .window-body button.w95[style*="background:#e8e8e8"] { background: linear-gradient(180deg, #ffffff 0%, #d4e7f8 100%) !important; border-color: #316ac5 !important; border-bottom: 3px solid #316ac5 !important; color: #000 !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 -1px 4px rgba(49, 106, 197, 0.3) !important; z-index: 2 !important; position: relative !important; } /* Tab-container row */ body.era-e2 .window-body > div[style*="border-bottom"] { border-bottom: 1px solid #316ac5 !important; padding-bottom: 0 !important; margin-bottom: 10px !important; gap: 0 !important; } /* Window-body — XP beige */ body.era-e2 .window-body { background: linear-gradient(180deg, #f6f5e9 0%, #ece9d8 100%) !important; padding: 12px !important; color: #000 !important; font-family: "Tahoma", "MS Sans Serif", sans-serif !important; font-size: 11px !important; line-height: 1.5 !important; } /* Fieldsets — XP groove */ body.era-e2 .window-body fieldset { background: rgba(255,255,255,0.55) !important; border: 1px solid #b0b0b0 !important; border-radius: 4px !important; padding: 8px 12px !important; margin: 6px 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.05) !important; } body.era-e2 .window-body fieldset > legend { color: #003c74 !important; font-weight: 700 !important; font-size: 11px !important; background: linear-gradient(180deg, #fff 0%, #d4e7f8 100%) !important; padding: 2px 8px !important; border: 1px solid #316ac5 !important; border-radius: 3px !important; text-transform: none !important; letter-spacing: 0 !important; } /* Stat rows */ body.era-e2 .window-body .stat-row { display: flex !important; justify-content: space-between !important; padding: 3px 0 !important; border-bottom: 1px dotted rgba(0,0,0,0.1) !important; font-size: 11px !important; } body.era-e2 .window-body .stat-row:last-child { border-bottom: none !important; } body.era-e2 .window-body .stat-row strong { color: #003c74 !important; font-weight: 700 !important; } body.era-e2 .window-body .stat-row span:last-child { font-variant-numeric: tabular-nums !important; font-weight: 600 !important; color: #000 !important; } /* Inputs/Selects in modal — XP sunken */ body.era-e2 .window-body input, body.era-e2 .window-body select, body.era-e2 .window-body textarea { background: #fff !important; color: #000 !important; border: 1px solid #7f9db9 !important; border-radius: 2px !important; padding: 3px 6px !important; font-size: 11px !important; font-family: "Tahoma", sans-serif !important; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1) !important; } body.era-e2 .window-body input:focus, body.era-e2 .window-body select:focus { outline: none !important; border-color: #316ac5 !important; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1), 0 0 0 1px #316ac5 !important; } /* v091136era3-modal-pass2 */ /* === Era 3 — Material/Flat treatment for inline-styled .w95 === */ body.era-e3 .window-body button.w95 { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 4px 4px 0 0 !important; color: rgba(0,0,0,0.65) !important; font-family: 'Roboto', 'Helvetica Neue', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px 18px !important; margin: 0 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease !important; position: relative !important; } body.era-e3 .window-body button.w95:hover { background: rgba(33,150,243,0.06) !important; color: rgba(0,0,0,0.87) !important; } /* Active tab — Material iOS-blue underline */ body.era-e3 .window-body button.w95[style*="font-weight:bold"], body.era-e3 .window-body button.w95[style*="background:#e8e8e8"] { background: transparent !important; color: #2196f3 !important; border-bottom: 2px solid #2196f3 !important; font-weight: 600 !important; box-shadow: none !important; } /* Tab-container row */ body.era-e3 .window-body > div[style*="border-bottom"] { border-bottom: 1px solid rgba(0,0,0,0.08) !important; padding-bottom: 0 !important; margin-bottom: 16px !important; gap: 0 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important; } /* Window-body — flat white */ body.era-e3 .window-body { background: #fff !important; padding: 16px !important; color: rgba(0,0,0,0.87) !important; font-family: 'Roboto', 'Helvetica Neue', sans-serif !important; font-size: 13px !important; line-height: 1.6 !important; } /* Fieldsets — flat cards with subtle elevation */ body.era-e3 .window-body fieldset { background: #fafafa !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 6px !important; padding: 12px 16px !important; margin: 10px 0 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.06) !important; } body.era-e3 .window-body fieldset > legend { color: rgba(0,0,0,0.54) !important; font-weight: 500 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; background: transparent !important; border: none !important; padding: 0 8px !important; } /* Stat rows */ body.era-e3 .window-body .stat-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 6px 0 !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; font-size: 13px !important; } body.era-e3 .window-body .stat-row:last-child { border-bottom: none !important; } body.era-e3 .window-body .stat-row strong { color: rgba(0,0,0,0.87) !important; font-weight: 600 !important; } body.era-e3 .window-body .stat-row span:last-child { font-variant-numeric: tabular-nums !important; font-weight: 500 !important; color: rgba(0,0,0,0.87) !important; } /* Inputs — Material underline */ body.era-e3 .window-body input, body.era-e3 .window-body select, body.era-e3 .window-body textarea { background: transparent !important; color: rgba(0,0,0,0.87) !important; border: none !important; border-bottom: 1px solid rgba(0,0,0,0.42) !important; border-radius: 0 !important; padding: 4px 0 !important; font-size: 13px !important; font-family: 'Roboto', sans-serif !important; box-shadow: none !important; transition: border-color 0.18s ease !important; } body.era-e3 .window-body input:focus, body.era-e3 .window-body select:focus { outline: none !important; border-bottom: 2px solid #2196f3 !important; padding-bottom: 3px !important; } body.era-e3 .window-body select { background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 4px !important; padding: 6px 10px !important; } /* Title-bar — Material primary color */ body.era-e3 .window > .title-bar { background: linear-gradient(180deg, #2196f3 0%, #1976d2 100%) !important; color: #fff !important; padding: 10px 16px !important; border: none !important; border-radius: 4px 4px 0 0 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important; } body.era-e3 .window > .title-bar .title { color: #fff !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0.02em !important; } body.era-e3 .window > .title-bar .controls button { background: transparent !important; color: rgba(255,255,255,0.85) !important; border: none !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 0.15s ease !important; } body.era-e3 .window > .title-bar .controls button:hover { background: rgba(255,255,255,0.18) !important; } /* Window frame — flat with shadow */ body.era-e3 .window { border-radius: 6px !important; border: 1px solid rgba(0,0,0,0.12) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.16), 0 8px 32px rgba(0,0,0,0.08) !important; overflow: hidden !important; } /* v091136era4-final-polish */ /* === Era 4 Final Polish — Dimmer + Animation Refinement === */ /* 1. Wallpaper-Dimmer: dunkler Layer über dem Aurora-Image */ body.era-e4 .desktop::before, body.era-e4 #desktop::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(102, 51, 153, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(51, 102, 204, 0.2) 0%, transparent 60%), linear-gradient(180deg, rgba(15, 12, 35, 0.55) 0%, rgba(20, 18, 45, 0.75) 100%); pointer-events: none; z-index: 1; mix-blend-mode: multiply; animation: e4-dimmer-cycle 30s ease-in-out infinite alternate; } @keyframes e4-dimmer-cycle { 0% { opacity: 0.85; } 50% { opacity: 0.95; } 100% { opacity: 0.85; } } /* v0.9.11.41 (2026-04-29): Komplette Entfernung der "Ensure UI elements"-Regel. Begruendung: - .topbar / .taskbar sind global position: fixed (style.css). position:relative zerlegt sie. - .window.floating ist global position: absolute (style.css) — wird per JS via el.style.left/top in Pixelkoordinaten gesetzt. position:relative zerlegt das ebenfalls, alle Fenster fallen in den Layout-Flow und stapeln sich rechts unten. - .modal ist Kind von .modal-overlay (z-index:500 fixed). Override unnoetig. - Aurora-::before ist NUR auf .desktop (z-index:0). Die existierende Regel weiter oben "body.era-e4 .desktop > * { position: relative; z-index: 1 }" liftet Desktop-Kinder bereits sauber. .desktop-shortcuts und .window.floating sind innerhalb .desktop, also abgedeckt. - Diese Regel hier hatte mehr Probleme verursacht als geloest. Komplett entfernt. */ /* 2. Stronger active-tab purple glow (override pass3 — more visible) */ body.era-e4 .window-body button.w95[style*="font-weight:bold"], body.era-e4 .window-body button.w95[style*="background:#e8e8e8"] { background: linear-gradient(180deg, rgba(167, 139, 250, 0.32) 0%, rgba(139, 92, 246, 0.22) 100%) !important; border: 1px solid rgba(167, 139, 250, 0.5) !important; border-bottom: 2px solid #c4b5fd !important; color: #fff !important; box-shadow: 0 0 18px rgba(167, 139, 250, 0.55), 0 -2px 8px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; text-shadow: 0 0 8px rgba(167, 139, 250, 0.6) !important; } /* 3. Title-bar with stronger gradient + animated shimmer */ body.era-e4 .window > .title-bar { background: linear-gradient(135deg, rgba(91, 33, 182, 0.55) 0%, rgba(124, 58, 237, 0.5) 35%, rgba(99, 102, 241, 0.5) 70%, rgba(67, 56, 202, 0.55) 100%) !important; border-bottom: 1px solid rgba(167, 139, 250, 0.45) !important; position: relative !important; overflow: hidden !important; } body.era-e4 .window > .title-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%); animation: e4-titlebar-shimmer 8s ease-in-out infinite; pointer-events: none; } @keyframes e4-titlebar-shimmer { 0%, 100% { left: -100%; } 50% { left: 200%; } } /* 4. Window glow when focused */ body.era-e4 .window.focused { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 4px 24px rgba(139, 92, 246, 0.35), 0 0 0 1px rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* 5. Stronger fieldset glass effect */ body.era-e4 .window-body fieldset { background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.15) !important; } /* 6. Legend with stronger purple presence */ body.era-e4 .window-body fieldset > legend { color: #c4b5fd !important; text-shadow: 0 0 12px rgba(167, 139, 250, 0.5) !important; background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%) !important; padding: 3px 10px !important; border-radius: 4px !important; border: 1px solid rgba(167, 139, 250, 0.2) !important; } /* 7. Topbar glass enhancement */ body.era-e4 .topbar { background: linear-gradient(180deg, rgba(15, 18, 35, 0.55) 0%, rgba(20, 22, 40, 0.65) 100%) !important; border-bottom: 1px solid rgba(167, 139, 250, 0.18) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: inset 0 -1px 0 rgba(167, 139, 250, 0.1), 0 2px 12px rgba(0, 0, 0, 0.3) !important; } /* 8. Desktop icons — give them 3D-glass treatment */ body.era-e4 .desktop-icon { border-radius: 12px !important; background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 12px 8px !important; transition: all 0.2s ease !important; } body.era-e4 .desktop-icon:hover { background: rgba(167, 139, 250, 0.12) !important; border-color: rgba(167, 139, 250, 0.35) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25) !important; } /* 9. PAUSED-Indicator reposition: zentral statt vertikal */ body.era-e4 .paused-indicator, body.era-e4 #paused-indicator, body.era-e4 [class*="paused"] { /* Falls vertikal: in horizontal-zentrierten Banner verwandeln */ writing-mode: horizontal-tb !important; text-orientation: mixed !important; } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { body.era-e4 .desktop::before, body.era-e4 .window > .title-bar::after { animation: none !important; } } /* v091136-topbar-hierarchy */ /* === Topbar Visual Hierarchy === */ :root { --tb-primary-size: 15px; --tb-primary-weight: 700; --tb-secondary-size: 13px; --tb-secondary-weight: 600; --tb-tertiary-size: 11px; --tb-tertiary-weight: 500; --tb-tertiary-opacity: 0.75; } /* PRIMARY: money + reputation */ .topbar-cell[data-ctxmenu="topbar-money"] .val, .topbar-cell[data-ctxmenu="topbar-rep"] .val, #tb-money, #tb-rep { font-size: var(--tb-primary-size) !important; font-weight: var(--tb-primary-weight) !important; letter-spacing: -0.01em !important; } /* SECONDARY: active projects + retainer */ .topbar-cell[data-ctxmenu="topbar-projects"] .val, .topbar-cell[data-ctxmenu="topbar-retainer"] .val, #tb-projects, #tb-retainer { font-size: var(--tb-secondary-size) !important; font-weight: var(--tb-secondary-weight) !important; } /* TERTIARY: status, staff, hourly rate */ .topbar-cell[data-ctxmenu="topbar-status"] .val, .topbar-cell[data-ctxmenu="topbar-employees"] .val, .topbar-cell[data-ctxmenu="topbar-rate"] .val, #tb-tier, #tb-staff, #tb-rate { font-size: var(--tb-tertiary-size) !important; font-weight: var(--tb-tertiary-weight) !important; } .topbar-cell[data-ctxmenu="topbar-status"], .topbar-cell[data-ctxmenu="topbar-employees"], .topbar-cell[data-ctxmenu="topbar-rate"] { opacity: var(--tb-tertiary-opacity) !important; } /* === Era-spezifische Overrides === */ body.era-e1 { --tb-primary-size: 12px; --tb-primary-weight: 700; --tb-secondary-size: 11px; --tb-secondary-weight: 600; --tb-tertiary-size: 11px; --tb-tertiary-opacity: 0.85; } body.era-e2 { --tb-primary-size: 14px; --tb-secondary-size: 12px; --tb-tertiary-size: 11px; --tb-tertiary-opacity: 0.7; } body.era-e3 { --tb-primary-size: 16px; --tb-primary-weight: 600; --tb-secondary-size: 13px; --tb-tertiary-size: 12px; --tb-tertiary-opacity: 0.6; } body.era-e4 { --tb-primary-size: 17px; --tb-primary-weight: 700; --tb-secondary-size: 14px; --tb-tertiary-size: 12px; --tb-tertiary-opacity: 0.55; } /* === Desktop-Icons Era-spezifische Treatment === */ /* v091136-pixel-icons */ /* Base */ .desktop-shortcut { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; cursor: pointer !important; transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease !important; } /* === ERA 1 — Win95 (pixelated, contrast) === */ body.era-e1 .desktop-shortcut { padding: 4px !important; } body.era-e1 .desktop-shortcut-icon, body.era-e1 .desktop-shortcut img, body.era-e1 .desktop-shortcut > span:first-child { font-size: 28px !important; image-rendering: pixelated !important; filter: contrast(1.2) saturate(1.15) drop-shadow(1px 1px 0 rgba(0,0,0,0.5)) !important; line-height: 1 !important; } body.era-e1 .desktop-shortcut span:not(:first-child), body.era-e1 .desktop-shortcut-label { color: #fff !important; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important; font-family: "MS Sans Serif", Tahoma, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; } body.era-e1 .desktop-shortcut:hover { background: rgba(0, 0, 128, 0.35) !important; border: 1px dotted #fff !important; } /* === ERA 2 — XP Luna (vibrant glossy) === */ body.era-e2 .desktop-shortcut { padding: 6px 4px !important; border-radius: 4px !important; } body.era-e2 .desktop-shortcut-icon, body.era-e2 .desktop-shortcut img, body.era-e2 .desktop-shortcut > span:first-child { font-size: 36px !important; filter: contrast(1.1) saturate(1.25) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) !important; line-height: 1 !important; } body.era-e2 .desktop-shortcut span:not(:first-child), body.era-e2 .desktop-shortcut-label { color: #fff !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85) !important; font-family: "Tahoma", "MS Sans Serif", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; } body.era-e2 .desktop-shortcut:hover { background: rgba(64, 130, 230, 0.25) !important; border-radius: 6px !important; } body.era-e2 .desktop-shortcut:hover .desktop-shortcut-icon, body.era-e2 .desktop-shortcut:hover img, body.era-e2 .desktop-shortcut:hover > span:first-child { filter: contrast(1.1) saturate(1.4) brightness(1.1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) !important; } /* === ERA 3 — Material (clean flat) === */ body.era-e3 .desktop-shortcut { padding: 12px 6px !important; border-radius: 8px !important; } body.era-e3 .desktop-shortcut-icon, body.era-e3 .desktop-shortcut img, body.era-e3 .desktop-shortcut > span:first-child { font-size: 40px !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important; line-height: 1 !important; } body.era-e3 .desktop-shortcut span:not(:first-child), body.era-e3 .desktop-shortcut-label { color: rgba(255, 255, 255, 0.95) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; font-family: 'Roboto', 'Helvetica Neue', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; } body.era-e3 .desktop-shortcut:hover { background: rgba(33, 150, 243, 0.18) !important; transform: translateY(-1px) !important; } body.era-e3 .desktop-shortcut:hover .desktop-shortcut-icon, body.era-e3 .desktop-shortcut:hover img, body.era-e3 .desktop-shortcut:hover > span:first-child { filter: drop-shadow(0 4px 8px rgba(33, 150, 243, 0.35)) !important; } /* === ERA 4 — Glass / AI (glassmorphic glow) === */ body.era-e4 .desktop-shortcut { padding: 14px 8px !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.era-e4 .desktop-shortcut-icon, body.era-e4 .desktop-shortcut img, body.era-e4 .desktop-shortcut > span:first-child { font-size: 42px !important; filter: drop-shadow(0 4px 12px rgba(167, 139, 250, 0.4)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.15)) !important; line-height: 1 !important; } body.era-e4 .desktop-shortcut span:not(:first-child), body.era-e4 .desktop-shortcut-label { color: rgba(255, 255, 255, 0.95) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; } body.era-e4 .desktop-shortcut:hover { background: rgba(167, 139, 250, 0.15) !important; border-color: rgba(167, 139, 250, 0.4) !important; transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 12px 28px rgba(139, 92, 246, 0.3) !important; } body.era-e4 .desktop-shortcut:hover .desktop-shortcut-icon, body.era-e4 .desktop-shortcut:hover img, body.era-e4 .desktop-shortcut:hover > span:first-child { filter: drop-shadow(0 6px 16px rgba(167, 139, 250, 0.6)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.3)) brightness(1.1) !important; } /* === v091136-topbar-hierarchy-fix2 — Real font-size hierarchy === */ /* The .topbar-cell wrapper had font-size set, but inner spans inherit nothing. We now target the value-spans inside cells directly. */ /* Era 4: strong hierarchy */ body.era-e4 [data-ctxmenu="topbar-money"] span:last-child, body.era-e4 [data-ctxmenu="topbar-rep"] span:last-child { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.era-e4 [data-ctxmenu="topbar-projects"] span:last-child, body.era-e4 [data-ctxmenu="topbar-retainer"] span:last-child { font-size: 13px !important; font-weight: 600 !important; } body.era-e4 [data-ctxmenu="topbar-status"] span:last-child, body.era-e4 [data-ctxmenu="topbar-employees"] span:last-child, body.era-e4 [data-ctxmenu="topbar-rate"] span:last-child { font-size: 11px !important; font-weight: 500 !important; } /* Era 3: medium hierarchy */ body.era-e3 [data-ctxmenu="topbar-money"] span:last-child, body.era-e3 [data-ctxmenu="topbar-rep"] span:last-child { font-size: 15px !important; font-weight: 600 !important; } body.era-e3 [data-ctxmenu="topbar-projects"] span:last-child, body.era-e3 [data-ctxmenu="topbar-retainer"] span:last-child { font-size: 12px !important; font-weight: 500 !important; } /* Era 2: light hierarchy (XP) */ body.era-e2 [data-ctxmenu="topbar-money"] span:last-child, body.era-e2 [data-ctxmenu="topbar-rep"] span:last-child { font-size: 13px !important; font-weight: 700 !important; } body.era-e2 [data-ctxmenu="topbar-projects"] span:last-child, body.era-e2 [data-ctxmenu="topbar-retainer"] span:last-child { font-size: 11px !important; font-weight: 600 !important; } /* Era 1: minimal hierarchy (Win95 stays equal-weight) */ body.era-e1 [data-ctxmenu="topbar-money"] span:last-child, body.era-e1 [data-ctxmenu="topbar-rep"] span:last-child { font-weight: 700 !important; } /* Tertiary cells: smaller secondary opacity boost */ body.era-e3 [data-ctxmenu="topbar-status"], body.era-e3 [data-ctxmenu="topbar-employees"], body.era-e3 [data-ctxmenu="topbar-rate"], body.era-e4 [data-ctxmenu="topbar-status"], body.era-e4 [data-ctxmenu="topbar-employees"], body.era-e4 [data-ctxmenu="topbar-rate"] { opacity: 0.5 !important; } /* === END v091136-topbar-hierarchy-fix2 === */ /* ============================================================ * v0.9.11.43 — ERA 4 POLISH PASS + Multi-Era Skill-Sidedock * 2026-04-29 — Master Chief Era-4-Backlog * ============================================================ * Themen: * 1. Kanban (Spalten + Karten Glass-Dark) * 2. Mail (Posteingang) — modern mail program look * 3. Finanzen / Bank (Cards, Header, Credit-Calculator) * 4. Slider — Wertanzeige unterhalb des Sliders * 5. Startmenü "Agency 95" — Brand-Text aus Banner heraus * 6. Skill-Sidedock — Era-aware (E2/E3/E4 Themes) * 8. Number-Inputs — Spinner aus, Scroll bleibt aktiv * 9. Call-Events (.pip-call-card) — Era-4-Variante * * Nicht hier: Item 7 (Lexikon + Lead-Tray) — Subagent in * encyclopaedia.css und lead-tray.css. * ============================================================ */ /* ============================================================ #1 KANBAN — Glass-Dark ============================================================ */ body.era-e4 .kanban-col { background: rgba(15, 23, 42, 0.55) !important; border: 1px solid rgba(102, 126, 234, 0.2) !important; border-top-width: 3px !important; border-radius: 10px !important; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 4px 16px rgba(0,0,0,0.3); color: #e2e8f0 !important; } body.era-e4 .kanban-col-head { background: rgba(30, 41, 59, 0.55) !important; color: #e2e8f0 !important; border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important; border-radius: 8px 8px 0 0 !important; font-weight: 600; letter-spacing: 0.3px; } body.era-e4 .kanban-col-head .count { background: rgba(102, 126, 234, 0.3) !important; color: #f1f5f9 !important; border: 1px solid rgba(102, 126, 234, 0.4) !important; border-radius: 999px; padding: 1px 8px; } body.era-e4 .kanban-col-empty { color: #64748b !important; font-style: italic; } body.era-e4 .kanban-col[data-stage="pitch"] { border-top-color: #94a3b8 !important; } body.era-e4 .kanban-col[data-stage="sprint1"] { border-top-color: #60a5fa !important; } body.era-e4 .kanban-col[data-stage="sprint2"] { border-top-color: #a78bfa !important; } body.era-e4 .kanban-col[data-stage="final"] { border-top-color: #fbbf24 !important; } body.era-e4 .kanban-col[data-stage="invoice"] { border-top-color: #34d399 !important; } body.era-e4 .kanban-card { background: rgba(30, 41, 59, 0.85) !important; border: 1px solid rgba(102, 126, 234, 0.25) !important; border-left-width: 3px !important; border-radius: 8px !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: all 0.15s ease; } body.era-e4 .kanban-card:hover { background: rgba(30, 41, 59, 0.95) !important; border-color: rgba(102, 126, 234, 0.5) !important; box-shadow: 0 4px 14px rgba(102, 126, 234, 0.2), 0 2px 6px rgba(0,0,0,0.4) !important; transform: translateY(-1px); } body.era-e4 .kanban-card.tier-common { border-left-color: #94a3b8 !important; } body.era-e4 .kanban-card.tier-rare { border-left-color: #60a5fa !important; } body.era-e4 .kanban-card.tier-epic { border-left-color: #c084fc !important; } body.era-e4 .kanban-card.tier-legendary { border-left-color: #fbbf24 !important; } body.era-e4 .kanban-card.blocked { opacity: 0.55; filter: grayscale(0.4); } body.era-e4 .kanban-card.overdue { border-color: rgba(239, 68, 68, 0.5) !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.25); } body.era-e4 .kanban-card-title { color: #f1f5f9 !important; font-weight: 600; } body.era-e4 .kanban-card-client { color: #94a3b8 !important; } body.era-e4 .kanban-card-bar { background: rgba(148, 163, 184, 0.18) !important; } body.era-e4 .kanban-card-bar[data-cat="dev"] .kanban-card-bar-fill { background: linear-gradient(90deg, #60a5fa, #3b82f6) !important; } body.era-e4 .kanban-card-bar[data-cat="design"] .kanban-card-bar-fill { background: linear-gradient(90deg, #34d399, #10b981) !important; } body.era-e4 .kanban-card-bar[data-cat="marketing"] .kanban-card-bar-fill { background: linear-gradient(90deg, #fb7185, #ef4444) !important; } body.era-e4 .kanban-card-bar[data-cat="marketing-live"] .kanban-card-bar-fill { background: linear-gradient(90deg, #f0abfc, #d946ef) !important; } body.era-e4 .kanban-card-meta { color: #94a3b8 !important; } body.era-e4 .kanban-card-q { color: #cbd5e1 !important; } body.era-e4 .kanban-card-deadline.ok { color: #34d399 !important; } body.era-e4 .kanban-card-deadline.warn { color: #fbbf24 !important; } body.era-e4 .kanban-card-deadline.danger { color: #f87171 !important; } /* ============================================================ #2 MAIL — modernes Mailprogramm-Layout ============================================================ */ body.era-e4 .mail-app { background: rgba(15, 23, 42, 0.6) !important; color: #e2e8f0 !important; } body.era-e4 .mail-layout { background: transparent !important; } body.era-e4 .mail-sidebar { background: rgba(10, 15, 28, 0.7) !important; border-right: 1px solid rgba(102, 126, 234, 0.18) !important; padding: 8px 0 !important; } body.era-e4 .mail-folder { margin: 1px 8px !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: all 0.12s ease; } body.era-e4 .mail-folder-icon { font-size: 14px; opacity: 0.85; } body.era-e4 .mail-folder-name { flex: 1; } body.era-e4 .mail-folder-count { background: rgba(102, 126, 234, 0.22); color: #e2e8f0 !important; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 22px; text-align: center; } body.era-e4 .mail-folder.active { background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(167, 139, 250, 0.4) 100%) !important; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); } body.era-e4 .mail-folder.active .mail-folder-count { background: rgba(255, 255, 255, 0.22); color: #fff !important; } body.era-e4 .mail-list { background: rgba(15, 23, 42, 0.5) !important; border-right: 1px solid rgba(102, 126, 234, 0.12) !important; } body.era-e4 .mail-list-item { padding: 12px 14px !important; border-bottom: 1px solid rgba(102, 126, 234, 0.08) !important; cursor: pointer; transition: background 0.1s ease; position: relative; } body.era-e4 .mail-list-item.mail-unread { background: rgba(102, 126, 234, 0.05) !important; } body.era-e4 .mail-list-item.mail-unread::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); } body.era-e4 .mail-list-item.mail-unread .mail-row-from { color: #f8fafc !important; font-weight: 700 !important; } body.era-e4 .mail-list-item.mail-unread .mail-row-subject { color: #cbd5e1 !important; font-weight: 500 !important; } body.era-e4 .mail-list-item .mail-row-icon { font-size: 18px; opacity: 0.85; } body.era-e4 .mail-list-item .mail-row-from { color: #cbd5e1 !important; font-weight: 500; font-size: 13px; } body.era-e4 .mail-list-item .mail-row-time { color: #64748b !important; font-size: 11px; font-variant-numeric: tabular-nums; } body.era-e4 .mail-list-item.active { background: linear-gradient(90deg, rgba(102, 126, 234, 0.3) 0%, rgba(167, 139, 250, 0.18) 100%) !important; box-shadow: inset 3px 0 0 #a78bfa; } body.era-e4 .mail-list-item.mail-golden { background: linear-gradient(90deg, rgba(251, 191, 36, 0.12) 0%, transparent 60%) !important; } body.era-e4 .mail-list-item.mail-golden::after { content: "★"; position: absolute; right: 8px; top: 8px; color: #fbbf24; font-size: 12px; text-shadow: 0 0 6px rgba(251, 191, 36, 0.5); } body.era-e4 .mail-preview { background: rgba(15, 23, 42, 0.4) !important; color: #e2e8f0 !important; } body.era-e4 .mail-preview-toolbar { background: rgba(15, 23, 42, 0.5) !important; border-bottom: 1px solid rgba(102, 126, 234, 0.18) !important; padding: 8px 12px !important; display: flex; gap: 6px; flex-wrap: wrap; } body.era-e4 .mail-preview-toolbar button.w95, body.era-e4 .mail-preview-toolbar button { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid rgba(102, 126, 234, 0.3) !important; color: #e2e8f0 !important; border-radius: 6px !important; padding: 5px 10px !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif) !important; font-size: 12px !important; transition: all 0.12s ease; box-shadow: none !important; } body.era-e4 .mail-preview-toolbar button:hover { background: rgba(102, 126, 234, 0.25) !important; border-color: rgba(102, 126, 234, 0.55) !important; transform: translateY(-1px); } body.era-e4 .mail-preview-toolbar button.mail-fav-active { background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 146, 60, 0.3)) !important; border-color: rgba(251, 191, 36, 0.6) !important; color: #fef3c7 !important; } body.era-e4 .mail-preview-header { padding: 14px 18px 10px !important; border-bottom: 1px solid rgba(102, 126, 234, 0.15) !important; } body.era-e4 .mail-preview-subject { font-size: 18px !important; font-weight: 700 !important; color: #f8fafc !important; margin-bottom: 6px; line-height: 1.3; } body.era-e4 .mail-preview-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8 !important; } body.era-e4 .mail-preview-from { color: #e2e8f0 !important; font-weight: 500; } body.era-e4 .mail-preview-body { padding: 16px 18px !important; line-height: 1.6 !important; font-size: 13.5px !important; color: #cbd5e1 !important; } body.era-e4 .mail-preview-empty { color: #64748b !important; font-style: italic; text-align: center; padding: 60px 20px !important; } body.era-e4 .mail-folder-tools button.w95 { background: linear-gradient(135deg, #667eea, #764ba2) !important; color: #fff !important; border: none !important; border-radius: 7px !important; padding: 8px 12px !important; font-weight: 600 !important; margin: 6px 8px !important; font-size: 12px !important; } /* ============================================================ #3 FINANZEN / BANK — Glass-Dark Cards ============================================================ */ body.era-e4 .fin-tabs { background: transparent !important; border-bottom: 1px solid rgba(102, 126, 234, 0.18) !important; margin-bottom: 12px; padding-bottom: 0; gap: 4px; } body.era-e4 .fin-tab-panel { color: #e2e8f0 !important; } body.era-e4 .bank-header { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(102, 126, 234, 0.18) !important; border-radius: 10px !important; padding: 14px !important; gap: 10px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.era-e4 .bank-header-item { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid rgba(102, 126, 234, 0.22) !important; border-radius: 10px !important; padding: 12px 14px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } body.era-e4 .bank-header-label { color: #94a3b8 !important; font-size: 11px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px !important; } body.era-e4 .bank-header-value { color: #f8fafc !important; font-size: 18px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; } body.era-e4 .bank-header-value.money-neg { color: #fca5a5 !important; } body.era-e4 .bank-header-value.money-pos { color: #86efac !important; } body.era-e4 .bank-credit-preview { background: rgba(30, 41, 59, 0.7) !important; border: 1px solid rgba(102, 126, 234, 0.25) !important; border-radius: 10px !important; padding: 12px 14px !important; color: #e2e8f0 !important; } body.era-e4 .bank-preview-row { color: #cbd5e1 !important; padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums; } body.era-e4 .bank-preview-row strong { color: #f8fafc !important; } body.era-e4 .bank-preview-row .money-neg { color: #fca5a5 !important; } body.era-e4 .bank-preview-row .money-pos { color: #86efac !important; } body.era-e4 input.bank-credit-input, body.era-e4 input.bank-credit-term { background: rgba(15, 23, 42, 0.7) !important; color: #f8fafc !important; border: 1px solid rgba(102, 126, 234, 0.35) !important; border-radius: 7px !important; padding: 6px 10px !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif) !important; font-variant-numeric: tabular-nums; } body.era-e4 input.bank-credit-input:focus, body.era-e4 input.bank-credit-term:focus { outline: none !important; border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18) !important; } body.era-e4 button.bank-take-credit-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 600 !important; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: all 0.12s ease; } body.era-e4 button.bank-take-credit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.45); } body.era-e4 button.bank-take-credit-btn:disabled, body.era-e4 button.bank-take-credit-btn[disabled] { background: rgba(71, 85, 105, 0.5) !important; color: #94a3b8 !important; box-shadow: none; cursor: not-allowed; } body.era-e4 .bank-prepay-btn { background: rgba(30, 41, 59, 0.8) !important; color: #e2e8f0 !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; border-radius: 7px !important; padding: 6px 12px !important; font-weight: 500 !important; transition: all 0.12s ease; } body.era-e4 .bank-prepay-btn:hover { background: rgba(167, 139, 250, 0.2) !important; border-color: rgba(167, 139, 250, 0.7) !important; } /* Tabellen in BWA / Tax-Report / Finanzen */ body.era-e4 .fin-tab-panel table, body.era-e4 .fin-tab-panel table th, body.era-e4 .fin-tab-panel table td { background: transparent !important; color: #e2e8f0 !important; border-color: rgba(102, 126, 234, 0.15) !important; font-variant-numeric: tabular-nums; } body.era-e4 .fin-tab-panel table thead th { background: rgba(15, 23, 42, 0.6) !important; color: #cbd5e1 !important; border-bottom: 1px solid rgba(102, 126, 234, 0.3) !important; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; font-weight: 600; } body.era-e4 .fin-tab-panel table tbody tr:hover { background: rgba(102, 126, 234, 0.08) !important; } body.era-e4 .fin-tab-panel table tbody tr.fin-row-total td, body.era-e4 .fin-tab-panel table tbody tr.total td { background: rgba(102, 126, 234, 0.12) !important; color: #f8fafc !important; font-weight: 700 !important; border-top: 1px solid rgba(102, 126, 234, 0.4) !important; } /* ============================================================ #4 SLIDER — Wertanzeige unterhalb des Sliders (Era 4) ============================================================ Pattern: …XX Wir stapeln den Slider-Row vertikal in Era 4. Slider stretcht auf volle Breite. Das Wert-Span (>span:nth-child(3)) rutscht unter den Slider und wird zentriert. Gilt vor allem für die Lead-Pitch-Slider in der Sales-Modal. ============================================================ */ body.era-e4 .slider-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; padding: 6px 0 !important; margin-bottom: 10px !important; } body.era-e4 .slider-row > span:first-child { color: #cbd5e1 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.5px; text-align: left !important; min-width: 0 !important; } body.era-e4 .slider-row > input[type="range"] { width: 100% !important; margin: 4px 0 !important; flex: none !important; } body.era-e4 .slider-row > span[id$="-val"], body.era-e4 .slider-row > span:last-child { text-align: center !important; color: #f8fafc !important; font-weight: 600 !important; font-size: 13px !important; background: rgba(102, 126, 234, 0.18); border: 1px solid rgba(102, 126, 234, 0.35); border-radius: 6px; padding: 2px 8px !important; align-self: center !important; min-width: 50px !important; font-variant-numeric: tabular-nums; } /* ============================================================ #5 STARTMENÜ — "Agency 95"-Brand außerhalb des Banners ============================================================ In Era 4 verstecken wir den vertikalen Brand-Streifen komplett und blenden den Text als horizontale, dezente Footer-Zeile am unteren Rand des Start-Menüs ein. Das passt besser zu modernen App-Launchers (Win11 / macOS Spotlight). ============================================================ */ body.era-e4 .start-menu { flex-direction: column !important; } /* Vertikaler Brand-Streifen wird in Era 4 zur dünnen, horizontalen Footer-Leiste mit Brand-Text */ body.era-e4 .start-menu-stripe { width: auto !important; background: linear-gradient(90deg, rgba(102, 126, 234, 0.4) 0%, rgba(167, 139, 250, 0.4) 50%, rgba(34, 211, 238, 0.4) 100%) !important; color: #f1f5f9 !important; writing-mode: horizontal-tb !important; -webkit-writing-mode: horizontal-tb !important; transform: none !important; text-align: center !important; padding: 6px 12px !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: 1.5px !important; text-transform: uppercase; order: 99 !important; /* nach unten reihen */ border-top: 1px solid rgba(102, 126, 234, 0.3); text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; opacity: 0.85; } body.era-e4 .start-menu-items { order: 1 !important; padding: 6px 0 !important; } /* ============================================================ #6 SKILL-SIDEDOCK — Era-aware Theming ============================================================ Hover-Popup für Sub-Skills aus dem Firma-Fenster. Aktuell hardcoded Win95 in skill-sidedock.css. Wir overriden für E2/E3/E4. ============================================================ */ body.era-e2 .skill-sidedock { background: linear-gradient(180deg, #ece9d8 0%, #d6d2c2 100%); border: 1px solid #aca899; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 40, 120, 0.35), inset 0 1px 0 rgba(255,255,255,0.6); font-family: "Tahoma", sans-serif; color: #000; padding: 8px 10px; } body.era-e3 .skill-sidedock { background: #fff; border: 1px solid #d8dde6; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-family: "Helvetica Neue", "SF Pro Text", -apple-system, sans-serif; color: #1d1d1f; padding: 10px 12px; } body.era-e4 .skill-sidedock { background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(102, 126, 234, 0.3) !important; border-radius: 12px !important; box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 18px rgba(102, 126, 234, 0.2) !important; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); color: #e2e8f0 !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif) !important; padding: 10px 14px !important; } body.era-e4 .skill-sidedock * { color: #e2e8f0 !important; } body.era-e4 .skill-sidedock strong, body.era-e4 .skill-sidedock b { color: #f8fafc !important; } /* ============================================================ #8 NUMBER-INPUTS — Spinner-Buttons aus, Scroll-Wheel bleibt ============================================================ Master Chief: in Team-Allocation soll keine Hoch/Runter-Pfeile zeigen, nur Texteingabe + Mausrad. Wir blenden die nativen Spinners aus (alle Era-en). Mausrad funktioniert nativ weiter. ============================================================ */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; display: none !important; } input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; } /* ============================================================ #9 CALL-EVENTS — Pip-Klöckner Call (Era 4 Glass-Dark) ============================================================ Default-Style ist dunkel-gold; wir geben Era 4 jetzt einen eigenen Glass-Akzent, damit es sich vom Rest der Eras unterscheidet (Pass durch zur AI-Era). ============================================================ */ body.era-e4 .pip-call-modal, body.era-e4 .awards-gala-v2-modal { background: rgba(8, 12, 24, 0.75) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body.era-e4 .pip-call-card { background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.92) 100%) !important; border: 1px solid rgba(102, 126, 234, 0.35) !important; border-radius: 16px !important; color: #e2e8f0 !important; box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 40px rgba(102, 126, 234, 0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); font-family: var(--font-ui, "Inter", system-ui, sans-serif); } body.era-e4 .pip-avatar { border: 3px solid rgba(167, 139, 250, 0.6) !important; box-shadow: 0 0 24px rgba(167, 139, 250, 0.35), 0 4px 14px rgba(0,0,0,0.4) !important; } body.era-e4 .pip-name { color: #fbbf24 !important; text-shadow: 0 0 12px rgba(251, 191, 36, 0.35); font-weight: 700; } body.era-e4 .pip-role { color: #94a3b8 !important; } body.era-e4 .pip-quote { background: rgba(15, 23, 42, 0.6) !important; border-left: 3px solid #a78bfa !important; color: #cbd5e1 !important; border-radius: 0 8px 8px 0 !important; font-style: italic; } body.era-e4 .pip-btn { border-radius: 9px !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; font-family: inherit !important; font-weight: 600 !important; transition: all 0.15s ease; } body.era-e4 .pip-btn-accept { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; border-color: rgba(16, 185, 129, 0.6) !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important; } body.era-e4 .pip-btn-accept:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important; } body.era-e4 .pip-btn-reject { background: rgba(71, 85, 105, 0.5) !important; color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.3) !important; } body.era-e4 .pip-btn-reject:hover { background: rgba(71, 85, 105, 0.7) !important; color: #f1f5f9 !important; } /* Awards-Gala (Era 4) */ body.era-e4 .awards-gala-v2 { background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.92) 100%) !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; border-radius: 16px !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 60px rgba(167, 139, 250, 0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); color: #e2e8f0 !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif); } body.era-e4 .awards-gala-v2 .gala-title { color: #fbbf24 !important; text-shadow: 0 0 16px rgba(251, 191, 36, 0.4); font-weight: 700; } body.era-e4 .awards-gala-v2 .gala-year { color: #a78bfa !important; letter-spacing: 1px; } body.era-e4 .awards-gala-v2 .gala-content { color: #e2e8f0 !important; } body.era-e4 .gala-item { background: rgba(102, 126, 234, 0.1) !important; border: 1px solid rgba(102, 126, 234, 0.25) !important; border-radius: 10px !important; color: #e2e8f0 !important; transition: all 0.15s ease; } body.era-e4 .gala-item:hover { background: rgba(102, 126, 234, 0.18) !important; border-color: rgba(102, 126, 234, 0.45) !important; } body.era-e4 .gala-item.player-win { background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%) !important; border-color: rgba(251, 191, 36, 0.55) !important; box-shadow: 0 0 24px rgba(251, 191, 36, 0.25); color: #fef3c7 !important; } body.era-e4 .gala-item.player-win .gi-effect { color: #bbf7d0 !important; } body.era-e4 .awards-gala-v2 .gala-close { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 18px !important; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4); transition: all 0.15s ease; } body.era-e4 .awards-gala-v2 .gala-close:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.55); } /* === Ende v0.9.11.43 ERA 4 POLISH PASS === */ /* ============================================================ * v0.9.11.45 — ERA 4 Polish Fixes (3-Pack) * 2026-04-29 — Master Chief Bug-Report nach v0.9.11.43 * ============================================================ * A) Finanzen/Bank — Kontobewegungen-Tabelle Era-4-styled * B) Slider — Range-Thumb mittig auf Track (war leicht unterhalb) * C) Startmenü — vertikaler Brand-Streifen wie in Ära 1/2/3, * Firmenname linksbündig (oben am Stripe) * ============================================================ */ /* ============================================================ A) BANK-LEDGER — Kontobewegungen ============================================================ */ body.era-e4 .bank-ledger-wrap { background: rgba(15, 23, 42, 0.55) !important; border: 1px solid rgba(102, 126, 234, 0.25) !important; border-radius: 10px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.era-e4 .bank-ledger-table, body.era-e4 .bank-credits-table { background: transparent !important; color: #e2e8f0 !important; font-family: var(--font-ui, "Inter", system-ui, sans-serif) !important; font-variant-numeric: tabular-nums; } body.era-e4 .bank-ledger-table th, body.era-e4 .bank-credits-table th { background: rgba(15, 23, 42, 0.85) !important; color: #cbd5e1 !important; border-bottom: 1px solid rgba(102, 126, 234, 0.35) !important; text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px !important; font-weight: 600 !important; padding: 8px 10px !important; } body.era-e4 .bank-ledger-table td, body.era-e4 .bank-credits-table td { color: #e2e8f0 !important; border-bottom: 1px solid rgba(102, 126, 234, 0.10) !important; padding: 6px 10px !important; font-size: 12px !important; } body.era-e4 .bank-ledger-table tr:nth-child(even) td, body.era-e4 .bank-credits-table tr:nth-child(even) td { background: rgba(102, 126, 234, 0.05) !important; } body.era-e4 .bank-ledger-table tbody tr:hover td, body.era-e4 .bank-credits-table tbody tr:hover td { background: rgba(102, 126, 234, 0.12) !important; } body.era-e4 .bank-ledger-table .money-pos { color: #86efac !important; } body.era-e4 .bank-ledger-table .money-neg { color: #fca5a5 !important; } /* Saldo-Spalte (war hardcoded color:#555 inline) */ body.era-e4 .bank-ledger-table td[style*="color:#555"], body.era-e4 .bank-ledger-table td[style*="color: #555"] { color: #94a3b8 !important; } /* Fieldset, das die Kontobewegungs-Tabelle umschließt */ body.era-e4 .fin-tab-panel fieldset, body.era-e4 fieldset:has(> .bank-ledger-wrap), body.era-e4 fieldset:has(.bank-ledger-table) { background: rgba(15, 23, 42, 0.4) !important; border: 1px solid rgba(102, 126, 234, 0.2) !important; border-radius: 10px !important; color: #e2e8f0 !important; padding: 10px 12px !important; } body.era-e4 .fin-tab-panel fieldset > legend, body.era-e4 fieldset:has(> .bank-ledger-wrap) > legend, body.era-e4 fieldset:has(.bank-ledger-table) > legend { color: #cbd5e1 !important; background: transparent !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 8px !important; } /* "Noch keine Buchungen erfasst." Empty-State (war hardcoded color:#666) */ body.era-e4 .fin-tab-panel fieldset > div[style*="color:#666"], body.era-e4 .fin-tab-panel fieldset > div[style*="color: #666"] { color: #94a3b8 !important; background: transparent !important; } /* ============================================================ B) SLIDER — Thumb mittig auf Track (war leicht unterhalb) ============================================================ Ursache: ::-webkit-slider-runnable-track ist 4px hoch, der Thumb ist 18px hoch. Chrome positioniert den Thumb relativ zum Track-Top — er fällt unterhalb der Mitte. Fix: margin-top = (track-height - thumb-height) / 2 = (4 - 18) / 2 = -7px ============================================================ */ body.era-e4 input[type="range"]::-webkit-slider-thumb { margin-top: -7px !important; } /* Firefox positioniert ::-moz-range-thumb von Haus aus mittig — kein Fix nötig. */ /* ============================================================ C) STARTMENÜ — Vertikaler Stripe wie in Ära 1/2/3 ============================================================ Revertiert v0.9.11.43-Versuch (horizontale Footer-Leiste). Era 4 nutzt jetzt wieder den vertikalen Brand-Streifen wie alle anderen Epochen, nur mit Glass-Dark-Farbe. Firmenname sitzt linksbündig (= oben am Stripe). ============================================================ */ body.era-e4 .start-menu { /* flex-direction: column hatte v0.9.11.43 gesetzt — zurück zu row (Default). */ flex-direction: row !important; } body.era-e4 .start-menu-stripe { /* Vertikalen Win95-Stripe-Layout aus style.css beibehalten, nur Farben + Font für Era 4 anpassen. */ width: 26px !important; writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; text-align: start !important; /* linksbündig — Firmenname oben am Stripe */ padding: 8px 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: none !important; order: 0 !important; background: linear-gradient(180deg, #667eea 0%, #a78bfa 50%, #22d3ee 100%) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; opacity: 1 !important; border-top: none !important; } body.era-e4 .start-menu-items { order: 0 !important; } /* Ära 1/2/3 — Firmenname auch hier linksbündig (oben am Stripe) statt zentriert. Konsistenz mit Era 4. */ body.era-e1 .start-menu-stripe, body.era-e2 .start-menu-stripe, body.era-e3 .start-menu-stripe { text-align: start !important; } /* === Ende v0.9.11.45 === */