/* ===================================================================== THA-1 Design Tokens Abgeleitet aus dem Marken-Keyvisual (Silber/Gold-Logo, Dark-UI). Dark ist Default. .theme-light ist als Erweiterung vorbereitet. Jedes Modul bekomt eine eigene Farbwelt (--accent*) für Wiedererkennung. ===================================================================== */ :root { /* --- Flächen / Hintergrund (Dark) --- */ --bg-0: #080B14; /* tiefster Hintergrund */ --bg-1: #0C1120; /* Seiten-Hintergrund */ --bg-2: #10172A; /* Sektionen */ --surface: #121A2E; /* Karten */ --surface-2: #16203A; /* erhöhte Karten / Hover */ --surface-glass: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); /* --- Text --- */ --text: #F4F6FA; --text-muted: #AEB6C4; --text-dim: #6E7787; /* Claim / Captions, gespreizt */ /* --- Marken-Metalle (Logo) --- */ --silver-light: #F4F6F9; --silver: #CBD0D9; --silver-deep: #A7AEBB; --gold-light: #F8CC60; --gold: #E3A838; --gold-deep: #C5841B; /* --- Status / Ampel (4-Farben, exakt wie Excel-Logik) --- */ --gut: #2FD8A6; /* Grün */ --achtung: #F5C84B; /* Gelb */ --warnung: #F8943B; /* Orange */ --kritisch: #FB5B6B; /* Rot */ /* --- Default-Accent (= Forecast/Gold) --- */ --accent: var(--gold); --accent-light: var(--gold-light); --accent-soft: rgba(227, 168, 56, 0.14); --accent-border: rgba(227, 168, 56, 0.40); --accent-glow: rgba(227, 168, 56, 0.35); /* Überschriften: nachts in Modulfarbe (Goldthema), tags neutral schwarz */ --heading: var(--accent); /* --- Form --- */ --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; --shadow-card: 0 1px 0 var(--border), 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 24px var(--accent-glow); /* --- Typografie --- */ --font-display: "Michroma", "Saira", "Segoe UI", system-ui, sans-serif; /* Logo / Headlines */ --font-heading: "Saira", "Inter", system-ui, sans-serif; /* Sektionstitel */ --font-body: "Inter", system-ui, -apple-system, sans-serif; /* UI / Fließtext */ --tracking-wide: 0.14em; /* gespreizte Caps (Claim, Labels) */ } /* ===================== MODUL-FARBWELTEN ===================== Body/Container-Klasse setzen (z.B. ), alle .accent-* Utilities übernehmen automatisch die Modulfarbe. */ .mod-forecast { /* Liquiditätsplanung & Forecasting */ --accent: #F5B73E; --accent-light: #FFD27A; --accent-soft: rgba(245,183,62,.14); --accent-border: rgba(245,183,62,.40); --accent-glow: rgba(245,183,62,.35); } .mod-flow { /* Cashflow */ --accent: #34D9A6; --accent-light: #6FF0C8; --accent-soft: rgba(52,217,166,.14); --accent-border: rgba(52,217,166,.40); --accent-glow: rgba(52,217,166,.35); } .mod-insight { /* Jahresabschluss / Analyse */ --accent: #3D8BFF; --accent-light: #79B0FF; --accent-soft: rgba(61,139,255,.14); --accent-border: rgba(61,139,255,.40); --accent-glow: rgba(61,139,255,.35); } .mod-pricing { /* Preiskalkulation */ --accent: #A974F5; --accent-light: #C9A6FF; --accent-soft: rgba(169,116,245,.14); --accent-border: rgba(169,116,245,.40); --accent-glow: rgba(169,116,245,.35); } .mod-safe { /* Steuern & Rücklagen */ --accent: #F8943B; --accent-light: #FFB877; --accent-soft: rgba(248,148,59,.14); --accent-border: rgba(248,148,59,.40); --accent-glow: rgba(248,148,59,.35); } .mod-cfo { /* KI-CFO */ --accent: #2BD4E6; --accent-light: #74E8F4; --accent-soft: rgba(43,212,230,.14); --accent-border: rgba(43,212,230,.40); --accent-glow: rgba(43,212,230,.35); } /* ===================== BASIS-UTILITIES ===================== */ body.tha1 { background: radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,0.04), transparent 60%), var(--bg-1); color: var(--text); font-family: var(--font-body); } .tha1 .display { font-family: var(--font-display); letter-spacing: 0.04em; } .tha1 .claim { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); } .tha1 .card { background: linear-gradient(180deg, var(--surface-glass), transparent), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .tha1 .accent-text { color: var(--accent); } .tha1 .accent-bg { background: var(--accent); } .tha1 .accent-soft { background: var(--accent-soft); } .tha1 .accent-ring { box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-glow); } .tha1 .accent-bar { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } /* Ampel-Helfer */ .amp-gruen{color:var(--gut)} .amp-gelb{color:var(--achtung)} .amp-orange{color:var(--warnung)} .amp-rot{color:var(--kritisch)} .amp-gruen-bg{background:var(--gut)} .amp-gelb-bg{background:var(--achtung)} .amp-orange-bg{background:var(--warnung)} .amp-rot-bg{background:var(--kritisch)} /* ===================== LIGHT-THEME (vorbereitet) ===================== */ html.theme-light { --bg-0:#EEF1F6; --bg-1:#F5F7FA; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F5F9; --surface-glass: rgba(255,255,255,0.7); --border: rgba(15,23,42,0.10); --border-strong: rgba(15,23,42,0.16); --text:#0F172A; --text-muted:#475569; --text-dim:#7A8597; --heading: var(--text); /* Tagmodus: neutrale, schwarze Überschriften */ --glass-bg: rgba(255,255,255,0.66); --glass-brd: rgba(15,23,42,0.08); --shadow-card: 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(15,23,42,.08); } /* ===================== GLAS-DESIGN (Liquid Glass) ===================== */ :root{ --glass-bg: rgba(16,23,42,0.55); --glass-brd: rgba(255,255,255,0.12); --glass-blur: 20px; } /* Schwebende Glasleiste (Topbar, Sidebar-Panels, Badges) */ .glass{ background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-brd); } /* Topbar bekommt einen dezenten Modul-Farbschimmer */ .glass-topbar{ background: linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border-bottom: 1px solid var(--glass-brd); } /* Karten – modern, mit Hover-Feedback */ .tha1 .card{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 70%), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .tha1 .card.hoverable:hover, .tha1 a.card:hover{ transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 14px 44px rgba(0,0,0,.45), 0 0 0 1px var(--accent-border); } html.theme-light .tha1 .card.hoverable:hover, html.theme-light .tha1 a.card:hover{ box-shadow: 0 14px 36px rgba(15,23,42,.12), 0 0 0 1px var(--accent-border); } /* Modul-Sub-Logo / schwebendes Badge in der linken Spalte */ .module-badge{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background: linear-gradient(180deg, var(--accent-soft), transparent), var(--glass-bg); border:1px solid var(--accent-border); box-shadow: 0 8px 24px rgba(0,0,0,.25); } .module-badge .dot{ width:10px;height:10px;border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); } .module-badge .label{ font-family:var(--font-head); font-weight:600; color:var(--text); } .module-badge .sub{ font-size:11px; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; } /* Navigation (monochrom, kein Emoji) */ .tha1 .nav-link{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--text-muted); transition: background .15s, color .15s; } .tha1 .nav-link svg{ width:18px;height:18px;stroke:currentColor;flex:none; } .tha1 .nav-link:hover{ background: rgba(127,127,127,.10); color:var(--text); } .tha1 .nav-link.active{ background: var(--accent-soft); color:var(--text); box-shadow: inset 3px 0 0 var(--accent); } .tha1 .nav-link.active svg{ color:var(--accent); } /* Account-Dropdown */ .menu-pop{ background:var(--glass-bg); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--glass-brd); border-radius:14px; box-shadow:0 16px 50px rgba(0,0,0,.4); } .menu-pop a, .menu-pop button{ display:flex; align-items:center; gap:10px; padding:9px 14px; color:var(--text-muted); width:100%; text-align:left; } .menu-pop a:hover, .menu-pop button:hover{ background:rgba(127,127,127,.12); color:var(--text); } /* Akzent-Überschrift (Goldthema nachts / neutral tags) */ .tha1 .h-accent{ color:var(--heading); font-family:var(--font-head); } /* Theme-sichere Utilities (für View-Umstellung) */ .tha1 .text-ink{ color:var(--text) !important; } .tha1 .text-muted2{ color:var(--text-muted) !important; } .tha1 .text-dim2{ color:var(--text-dim) !important; } .tha1 .bd{ border-color:var(--border) !important; } .tha1 .surf2{ background:var(--surface-2) !important; } .tha1 .track{ background:var(--border) !important; } .tha1 [class*="divide-y"] > * + *{ border-color:var(--border) !important; } .tha1 .field{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 12px; width:100%; } .tha1 .field:focus{ outline:none; border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-soft); } .tha1 .btn-accent{ background:var(--accent); color:#0B1020; font-weight:600; border-radius:10px; padding:10px 16px; transition:filter .15s, transform .1s; } .tha1 .btn-accent:hover{ filter:brightness(1.08); } .tha1 .btn-accent:active{ transform:scale(.98); } .tha1 .btn-ghost{ background:rgba(127,127,127,.12); color:var(--text); border-radius:10px; padding:10px 16px; } html.theme-light .tha1 .btn-accent{ color:#fff; } /* ===================== GLAS-PILLEN & PULL-DOWN (v2) ===================== */ :root{ --glass-strong: rgba(13,19,34,0.92); } html.theme-light{ --glass-strong: rgba(255,255,255,0.95); } /* Schwebende Pille (Brand links / Tools rechts) */ .pill{ display:flex; align-items:center; gap:6px; border-radius:999px; padding:5px; background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); backdrop-filter:blur(var(--glass-blur)) saturate(150%); border:1px solid var(--glass-brd); box-shadow:0 8px 26px rgba(0,0,0,.28); } /* Buttons in der Pille: rund, randlos, formen sich ein */ .pill .pbtn{ display:flex; align-items:center; gap:8px; border-radius:999px; padding:7px 12px; color:var(--text-muted); transition:background .15s, color .15s; } .pill .pbtn:hover{ background:rgba(127,127,127,.14); color:var(--text); } .pill .pbtn.icon{ width:36px; height:36px; padding:0; justify-content:center; } .pill .seg{ display:flex; border-radius:999px; overflow:hidden; } .pill .seg a{ padding:7px 12px; font-size:12px; color:var(--text-muted); } .pill .seg a.on{ background:var(--accent-soft); color:var(--accent); font-weight:600; } /* Brand-Pille links – edel, zurückhaltend */ .brand-pill{ display:flex; align-items:center; gap:14px; border-radius:18px; padding:8px 14px; background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); backdrop-filter:blur(var(--glass-blur)) saturate(150%); border:1px solid var(--glass-brd); box-shadow:0 8px 26px rgba(0,0,0,.28); transition:border-color .18s, box-shadow .18s; } .brand-pill:hover{ border-color:var(--accent-border); } .brand-wordmark{ font-family:var(--font-display); font-size:17px; letter-spacing:.18em; color:var(--text); line-height:1; } .brand-wordmark .min{ color:var(--accent); } .brand-module{ font-family:var(--font-head); font-weight:300; font-size:12px; letter-spacing:.30em; text-transform:uppercase; color:var(--accent); margin-top:5px; line-height:1; } /* Diffuse, gut lesbare Dropdowns (Nav + Konto) */ .pop{ background:var(--glass-strong); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); border:1px solid var(--glass-brd); border-radius:16px; box-shadow:0 22px 60px rgba(0,0,0,.55); } html.theme-light .pop{ box-shadow:0 22px 60px rgba(15,23,42,.18); } .pop a, .pop button{ display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--text-muted); width:100%; text-align:left; border-radius:10px; } .pop a:hover, .pop button:hover{ background:rgba(127,127,127,.14); color:var(--text); } .pop a svg{ width:18px; height:18px; stroke:currentColor; flex:none; } .pop a.on{ background:var(--accent-soft); color:var(--text); } .pop a.on svg{ color:var(--accent); } /* ===================== HEADER-FEINSCHLIFF (v3) ===================== */ /* Pull-downs leichter & durchscheinend (geblurrt, nicht vollflächig) */ :root{ --glass-strong: rgba(13,19,34,0.66); } html.theme-light{ --glass-strong: rgba(255,255,255,0.74); } .pop{ -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); } /* Linke Brand-Pille: runde Ecken wie rechts */ .brand-pill{ border-radius:999px; } /* Modulname als klickbarer Akzent-Trigger (kein Extra-Rahmen). Hover = runde Akzent-Pille */ .module-trigger{ display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; color:var(--accent); font-family:var(--font-head); font-weight:300; font-size:12px; letter-spacing:.18em; text-transform:uppercase; transition:background .15s, box-shadow .15s; } .module-trigger:hover{ background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-border); } /* Seitentitel – edel, mittig in Leistenhöhe */ .page-title{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.24em; font-weight:400; font-size:14px; color:var(--heading); white-space:nowrap; } /* ===================== FEINSCHLIFF v4: Karten & Pull-downs ===================== */ /* KPI-Status: dezenter dünner Rahmen in Statusfarbe statt dickem Balken */ .tha1 .card.stat-gruen { border-color: rgba(47,216,166,.45); } .tha1 .card.stat-gelb { border-color: rgba(245,200,75,.45); } .tha1 .card.stat-orange { border-color: rgba(248,148,59,.45); } .tha1 .card.stat-rot { border-color: rgba(251,91,107,.50); } /* Hover ganz dezent – kein Anheben, nur feine Rahmen-/Schattenänderung */ .tha1 .card.hoverable:hover, .tha1 a.card:hover{ transform: none; border-color: var(--border-strong); box-shadow: 0 6px 20px rgba(0,0,0,.28); } html.theme-light .tha1 .card.hoverable:hover, html.theme-light .tha1 a.card:hover{ box-shadow: 0 6px 18px rgba(15,23,42,.10); } /* Status-Karten behalten beim Hover ihre Farbe (nur etwas kräftiger) */ .tha1 .card.stat-gruen.hoverable:hover { border-color: rgba(47,216,166,.80); } .tha1 .card.stat-gelb.hoverable:hover { border-color: rgba(245,200,75,.80); } .tha1 .card.stat-orange.hoverable:hover { border-color: rgba(248,148,59,.80); } .tha1 .card.stat-rot.hoverable:hover { border-color: rgba(251,91,107,.85); } /* Pull-downs deutlich transparenter (stark geblurrt, schwebend) */ :root{ --glass-strong: rgba(13,19,34,0.42); } html.theme-light{ --glass-strong: rgba(255,255,255,0.55); } .pop{ -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); } /* ===================== FEINSCHLIFF v5 ===================== */ /* Modulname: nah am Logo, kein Trenner, keine Hover-Pille – nur Lichtwechsel */ .brand-pill{ gap:8px; } .module-trigger{ padding:4px 6px; gap:5px; } .module-trigger:hover{ background:transparent; box-shadow:none; filter:brightness(1.25); } /* Status-Rahmen als Verlauf: oben + Seiten farbig, nach unten neutral/unsichtbar (wie von oben beleuchtet). Erhält die abgerundeten Ecken via Masken-Technik. */ .tha1 .card.stat-gruen { --stat:#2FD8A6; } .tha1 .card.stat-gelb { --stat:#F5C84B; } .tha1 .card.stat-orange { --stat:#F8943B; } .tha1 .card.stat-rot { --stat:#FB5B6B; } .tha1 .card[class*="stat-"]{ border-color: transparent; } .tha1 .card[class*="stat-"]::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(180deg, var(--stat) 0%, var(--border-strong) 50%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } /* dezenter Hover: Lichtkante oben etwas kräftiger, kein voller Rahmen */ .tha1 .card[class*="stat-"]:hover{ border-color: transparent; } .tha1 .card[class*="stat-"].hoverable:hover::before{ filter: brightness(1.3); } /* ===================== FEINSCHLIFF v6: Statusrahmen seitlich länger ===================== */ /* Farbe bleibt oben + an den Seiten deutlich sichtbar und fadet erst unten aus. (Oberkante voll, Seiten tragen die Farbe weit nach unten, Unterkante unsichtbar.) */ .tha1 .card[class*="stat-"]::before{ background: linear-gradient(180deg, var(--stat) 0%, var(--stat) 30%, color-mix(in srgb, var(--stat) 45%, transparent) 62%, transparent 100%); } /* ===================== FEINSCHLIFF v7 ===================== */ /* Linke & rechte Pille exakt gleich hoch */ .pill, .brand-pill{ min-height:46px; box-sizing:border-box; } /* Zentrale Info-Toasts (unten mittig, dezent animiert) */ .toast-wrap{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:200; pointer-events:none; width:max-content; max-width:92vw; } .toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-size:14px; color:var(--text); background:var(--glass-strong); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%); border:1px solid var(--glass-brd); box-shadow:0 16px 50px rgba(0,0,0,.45); opacity:0; transform:translateY(18px); transition:opacity .3s ease, transform .3s ease; } .toast.toast-show{ opacity:1; transform:translateY(0); } .toast .dot{ width:8px; height:8px; border-radius:50%; flex:none; } .toast.success .dot{ background:var(--gut); box-shadow:0 0 10px var(--gut); } .toast.warning .dot{ background:var(--warnung); box-shadow:0 0 10px var(--warnung); } .toast.error .dot{ background:var(--kritisch);box-shadow:0 0 10px var(--kritisch); } /* ===================== FEINSCHLIFF v8: Toast deutlicher ===================== */ .toast.success{ border-color: rgba(47,216,166,.55); box-shadow:0 16px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(47,216,166,.30); } .toast.warning{ border-color: rgba(248,148,59,.55); box-shadow:0 16px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(248,148,59,.30); } .toast.error { border-color: rgba(251,91,107,.60); box-shadow:0 16px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(251,91,107,.34); } html.theme-light .toast.success{ box-shadow:0 16px 40px rgba(15,23,42,.14), inset 0 0 0 1px rgba(47,216,166,.40); } html.theme-light .toast.warning{ box-shadow:0 16px 40px rgba(15,23,42,.14), inset 0 0 0 1px rgba(248,148,59,.40); } html.theme-light .toast.error { box-shadow:0 16px 40px rgba(15,23,42,.14), inset 0 0 0 1px rgba(251,91,107,.42); } /* ===================== KONTEXT-AKTIONEN (Seiten-Pille oben rechts) ===================== */ .actionbar{ display:inline-flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); backdrop-filter:blur(var(--glass-blur)) saturate(150%); border:1px solid var(--glass-brd); box-shadow:0 8px 26px rgba(0,0,0,.28); } .actionbar .act{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:999px; color:var(--text-muted); font-size:14px; transition:background .15s,color .15s; } .actionbar .act:hover{ background:rgba(127,127,127,.14); color:var(--text); } .actionbar .act svg{ width:18px; height:18px; stroke:currentColor; } .actionbar .act.icon{ width:36px; padding:0; justify-content:center; } .actionbar .act-primary{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border-radius:999px; background:var(--accent); color:#0B1020; font-weight:600; font-size:14px; transition:filter .15s, transform .1s; } .actionbar .act-primary svg{ width:18px; height:18px; stroke:currentColor; } .actionbar .act-primary:hover{ filter:brightness(1.08); } .actionbar .act-primary:active{ transform:scale(.98); } .actionbar .sep{ width:1px; height:22px; background:var(--border); margin:0 2px; } html.theme-light .actionbar .act-primary{ color:#fff; } /* ===================== FIXES WERKZEUG-ZAHNRAD (rechts, über dem Inhalt) ===================== */ .page-tools{ position:fixed; top:84px; right:20px; z-index:60; display:flex; align-items:center; gap:10px; } .page-tools-panel{ display:flex; align-items:center; transform:translateX(16px) scale(.98); transform-origin:right center; opacity:0; pointer-events:none; transition:transform .26s ease, opacity .26s ease; } .page-tools.is-open .page-tools-panel{ transform:none; opacity:1; pointer-events:auto; } .page-tools-gear{ flex:none; width:46px; height:46px; border-radius:999px; display:grid; place-items:center; background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); backdrop-filter:blur(var(--glass-blur)) saturate(150%); border:1px solid var(--glass-brd); box-shadow:0 8px 26px rgba(0,0,0,.30); color:var(--text-muted); transition:color .15s, border-color .15s, box-shadow .15s; } .page-tools-gear:hover{ color:var(--text); } .page-tools.is-open .page-tools-gear{ color:var(--accent); border-color:var(--accent-border); box-shadow:0 8px 26px rgba(0,0,0,.30), 0 0 0 1px var(--accent-border); } .page-tools-gear svg{ width:22px; height:22px; transition:transform .35s ease; } .page-tools.is-open .page-tools-gear svg{ transform:rotate(90deg); } @media (max-width:640px){ .page-tools{ top:auto; bottom:84px; right:14px; } } /* ===================== DRUCK-ANSICHT ===================== */ .print-logo{ display:none; } @media print { /* Weiß/Schwarz erzwingen, egal welches Theme */ html, body.tha1{ background:#fff !important; } body.tha1{ --text:#111; --text-muted:#222; --text-dim:#555; --border:rgba(0,0,0,.2); --surface:#fff; --surface-2:#fff; --glass-bg:#fff; --heading:#111; color:#111 !important; } /* Alles Navigatorische ausblenden */ header, .page-tools, .toast-wrap, footer, nav[role="navigation"], .lg\:hidden, [x-cloak]{ display:none !important; } main{ max-width:none !important; margin:0 !important; padding:0 !important; } /* Karten werden zur schlichten Fläche ohne Schatten/Glas */ .tha1 .card{ background:#fff !important; box-shadow:none !important; border:none !important; border-radius:0 !important; } .tha1 .card::before{ display:none !important; } /* Druckbare Tabelle über volle Seitenbreite, keine umbrechenden Beträge */ .tha1 table{ width:100% !important; border-collapse:collapse !important; font-size:11pt; } .tha1 table th, .tha1 table td{ white-space:nowrap !important; color:#111 !important; border-bottom:1px solid rgba(0,0,0,.18) !important; padding:6px 10px !important; } .tha1 table thead{ background:#f1f1f1 !important; } .tha1 .surf2{ background:#f1f1f1 !important; } a{ color:#111 !important; text-decoration:none !important; } /* Kleines Logo oben rechts */ .print-logo{ display:block !important; position:fixed; top:6px; right:8px; font-family:var(--font-display); font-size:15px; letter-spacing:3px; color:#111; } @page{ margin:14mm; } } /* ===================== FIX: Blur im Aktions-Untermenü ===================== */ /* Die Aktions-Pille darf KEIN eigener backdrop-filter sein, sonst kann das darin liegende Dropdown den Seiteninhalt nicht mehr blurren (verschachtelt). */ .actionbar{ background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Dropdown im Aktionsmenü blurrt jetzt wieder den Hintergrund */ .actionbar .pop{ -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); } /* ===================== SUPER-ADMIN-FARBWELT ===================== */ /* Neutrales Silber – klar von den Kundenmodulen unterscheidbar ("ich bin im Admin"). */ .mod-admin{ --accent:#9AA7BD; --accent-light:#C3CCDB; --accent-soft:rgba(154,167,189,.16); --accent-border:rgba(154,167,189,.45); --accent-glow:rgba(154,167,189,.35); } /* Impersonation-Banner */ .imp-banner{ position:sticky; top:0; z-index:70; display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 16px; font-size:13px; font-weight:500; background:linear-gradient(180deg, rgba(248,148,59,.92), rgba(248,148,59,.82)); color:#1a1206; } .imp-banner a{ color:#1a1206; text-decoration:underline; font-weight:700; } /* Admin-Tab-Navigation */ .admin-tabs{ display:flex; flex-wrap:wrap; gap:6px; } .admin-tabs a{ padding:8px 14px; border-radius:999px; font-size:14px; color:var(--text-muted); border:1px solid var(--border); } .admin-tabs a:hover{ background:rgba(127,127,127,.10); color:var(--text); } .admin-tabs a.on{ background:var(--accent-soft); color:var(--text); border-color:var(--accent-border); }