/* Glaserei ERP/CRM – Stylesheet (v3 „Seriös & Corporate", Inter + Dark-Mode) ------------------------------------------------------------------------ Ruhige, gedämpfte Firmen-Optik: dunkle Navy-Kopfleiste, klare Kanten, dichte Tabellen, hochwertige Typografie (Inter), Akzentfarben nur mit Bedeutung. Farben/Abstände laufen über Design-Tokens; die alten Variablennamen (--blau, --grau-3 …) bleiben als Aliase erhalten und bekommen im Dark-Mode passende Werte – so adaptiert sich auch jeder Inline-Stil in den Vorlagen. Umschaltung: . ------------------------------------------------------------------------ */ :root { /* Marken-/Akzent-Palette (Glas & Co) – Slate + Blau */ --brand: #1b6fb8; --brand-strong: #155a97; --brand-tint: #e9f1fa; --brand-ink: #155a97; --navy: #0f172a; /* Neutrale (kühles Slate) */ --bg: #eef2f6; --surface: #ffffff; --surface-2: #f5f8fa; --border: #e2e8f0; --border-soft: #eef2f6; --ink: #1e293b; --muted: #64748b; --faint: #94a3b8; /* Status – ruhige Töne (Grün nur für echte Erfolge) */ --gruen: #2f7d55; --gruen-bg: #eaf3ee; --rot: #d0374e; --rot-bg: #fbe7ea; --orange: #b45309;--orange-bg: #fef3c7; --lila: #5b4bbf; --lila-bg: #ecebf8; --info: #1b6fb8; --info-bg: #e9f1fa; /* Kopfleiste – dunkles Slate (themenunabhängig) */ --hdr-bg: #0f172a; --hdr-ink: #e2e8f0; --hdr-muted: #8595ab; --hdr-line: #243043; --hdr-field: #1e293b; --hdr-accent: #6fb0dd; /* Tiefe – dezent, Kanten statt Schatten */ --shadow-sm: 0 1px 1px rgba(15,23,42,.04); --shadow: 0 1px 2px rgba(15,23,42,.05); --shadow-lg: 0 14px 34px rgba(15,23,42,.15); --radius: 6px; --topbar-bg: #0f172a; /* Legacy-Aliase – NICHT entfernen (von Templates/Inline-Styles genutzt) */ --blau: var(--brand); --blau-dunkel: var(--ink); --blau-hell: var(--brand-tint); --grau-1: var(--surface-2); --grau-2: var(--border); --grau-3: var(--muted); --text: var(--ink); } html[data-theme="dark"] { --brand: #4d9bf0; --brand-strong: #8fc2f0; --brand-tint: #12233b; --brand-ink: #8fc2f0; --navy: #0b1220; --bg: #0b1220; --surface: #111c30; --surface-2: #0e1626; --border: #22304a; --border-soft: #1a2740; --ink: #e5edf7; --muted: #8aa0bd; --faint: #63758f; --gruen: #34d399; --gruen-bg: #0f2a22; --rot: #f27488; --rot-bg: #3a1a22; --orange: #e0b13a;--orange-bg: #3a2f14; --lila: #b3a7f0; --lila-bg: #241a3d; --info: #4d9bf0; --info-bg: #12233b; --shadow-sm: 0 1px 1px rgba(0,0,0,.3); --shadow: 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 18px 44px rgba(0,0,0,.5); --hdr-bg: #0e1626; --hdr-ink: #e5edf7; --hdr-muted: #8aa0bd; --hdr-line: #1e2b42; --hdr-field: #0b1524; --hdr-accent: #4d9bf0; } * { box-sizing: border-box; } body { margin: 0; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .25s ease, color .25s ease; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* Zahlen in Mono für saubere, ausgerichtete Beträge */ .kpi-karte .kpi-wert, .kennzahl .wert, .tz-rechts, .num { font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", monospace; font-variant-numeric: tabular-nums; } /* --- Topbar (dunkel, corporate) ---------------------------------------- */ .topbar { background: var(--hdr-bg); color: var(--hdr-ink); display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 0 20px; min-height: 56px; border-bottom: 1px solid #0a1a28; } .topbar .logo { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: .4px; } .topbar nav { display: flex; gap: 2px; flex: 1; } .topbar nav a { color: var(--hdr-muted); padding: 7px 11px; border-radius: 4px; font-weight: 500; font-size: 13px; white-space: nowrap; } .topbar nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; } .topbar nav a.aktiv { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 -2px 0 var(--hdr-accent); } .topbar .benutzer { color: var(--hdr-muted); font-size: 13px; display: flex; align-items: center; gap: 12px; white-space: nowrap; margin-left: auto; } .topbar .benutzer a { color: var(--hdr-ink); } .topbar .benutzer form { display: inline; } .topbar .benutzer button { background: transparent; border: 1px solid var(--hdr-line); color: var(--hdr-ink); padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; } .topbar .benutzer button:hover { border-color: var(--hdr-accent); color: #fff; } /* Dark-Mode-Umschalter (in der dunklen Kopfleiste) */ .theme-toggle { width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--hdr-line); background: transparent; color: var(--hdr-muted); cursor: pointer; font-size: 15px; display: inline-grid; place-items: center; line-height: 1; padding: 0; } .theme-toggle:hover { border-color: var(--hdr-accent); color: #fff; } main { max-width: 1220px; margin: 0 auto; padding: 22px; } .seitenkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .seitenkopf h1 { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -.2px; } /* --- Karten ------------------------------------------------------------ */ .karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; margin-bottom: 14px; box-shadow: var(--shadow); } .karte h2 { font-size: 11.5px; margin: 0 0 12px; color: #455363; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; } html[data-theme="dark"] .karte h2 { color: var(--muted); } /* --- Kennzahlen (KPI) --------------------------------------------------- */ .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .kennzahl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow); position: relative; } .kennzahl .wert { font-size: 23px; font-weight: 700; color: var(--brand-strong); letter-spacing: -.4px; font-variant-numeric: tabular-nums; } html[data-theme="dark"] .kennzahl .wert { color: var(--ink); } .kennzahl .label { color: var(--muted); font-size: 10.5px; margin-top: 3px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; } /* --- Tabellen ---------------------------------------------------------- */ table.liste { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } table.liste:has(details[open]) { overflow: visible; } .karte:has(details[open]), .detail-raster > div:has(details[open]) { overflow: visible; } .plan-scroll { overflow-x: auto; } .plan-scroll:has(details[open]) { overflow: visible; } table.liste th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; } /* --- Durchsuchbare Auswahl (Combobox) ---------------------------------- */ .suchauswahl { position: relative; } .suchauswahl-liste { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 260px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border, #cbd5e1); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14); } .suchauswahl-eintrag { padding: 7px 11px; font-size: 13px; cursor: pointer; white-space: nowrap; } .suchauswahl-eintrag:hover, .suchauswahl-eintrag.aktiv { background: var(--brand, #1b5e93); color: #fff; } .suchauswahl-eintrag.gewaehlt { font-weight: 700; } .suchauswahl-eintrag.leer { color: var(--muted, #94a3b8); cursor: default; } .suchauswahl-eintrag.leer:hover { background: transparent; color: var(--muted, #94a3b8); } table.liste th.sortkopf { padding: 0; } table.liste th.sortkopf > a { display: block; padding: 8px 13px; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none; } table.liste th.sortkopf > a:hover { background: var(--border-soft); color: var(--text); } table.liste th.sortkopf.aktiv > a { color: var(--brand); } table.liste th.sortkopf .sort-pfeil { display: inline-block; width: 1em; font-size: 10px; } table.liste td { padding: 8px 13px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 13px; } table.liste tr:last-child td { border-bottom: none; } table.liste tbody tr { transition: background .1s; } table.liste tbody tr:hover { background: var(--surface-2); } .tz-rechts { text-align: right; font-variant-numeric: tabular-nums; } /* --- Badges (gedämpft, eckig) ------------------------------------------ */ .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); letter-spacing: .1px; } .kuerzel-badge { display: inline-block; min-width: 24px; text-align: center; padding: 1px 6px; border-radius: 4px; background: #25547e; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .3px; } /* Prozess-Übersicht */ .prozess-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .prozess-stufe-kopf { display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 6px 4px; } .prozess-nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 12px; } .prozess-name { font-size: 12.5px; font-weight: 600; margin-top: 3px; text-align: center; } .prozess-anzahl { font-size: 12px; color: var(--faint); } .prozess-pfeil { color: var(--faint); font-size: 16px; } .prozess-stepper { display: inline-flex; gap: 5px; align-items: center; } .prozess-punkt { width: 13px; height: 13px; border-radius: 50%; background: var(--surface-2); display: inline-block; border: 1px solid var(--border); } .prozess-punkt.erledigt { background: var(--gruen); border-color: var(--gruen); } .prozess-punkt.aktiv { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .badge.neu { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; } .badge.kontaktiert { background: var(--lila-bg); color: var(--lila); border-color: #d8d3f2; } .badge.besichtigung { background: var(--orange-bg); color: var(--orange); border-color: #ecdcba; } .badge.kalkulation { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; } .badge.angebot { background: var(--info-bg); color: var(--info); border-color: #cfe0ee; } .badge.gewonnen { background: var(--gruen-bg); color: var(--gruen); border-color: #cbe4d5; } .badge.verloren { background: var(--rot-bg); color: var(--rot); border-color: #f0cfcf; } .badge.privat { background: var(--surface-2); color: var(--muted); border-color: var(--border); } .badge.firma { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; } /* --- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 7px; background: var(--brand); color: #fff; border: 1px solid var(--brand); padding: 8px 14px; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; transition: filter .12s, transform .05s; } .btn:hover { filter: brightness(1.08); text-decoration: none; color: #fff; } .btn:active { transform: translateY(1px); } .btn.sekundaer { background: var(--surface); color: var(--brand); border: 1px solid var(--border); box-shadow: none; } .btn.sekundaer:hover { border-color: var(--brand); background: var(--brand-tint); filter: none; } .btn.klein { padding: 5px 10px; font-size: 12.5px; box-shadow: none; } /* --- Formulare --------------------------------------------------------- */ .form-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px 18px; } .feld { display: flex; flex-direction: column; gap: 5px; } .feld.breit { grid-column: 1 / -1; } .feld label { font-size: 12.5px; font-weight: 600; color: var(--muted); } .form-input, .form-select, .form-textarea { border: 1px solid var(--border); border-radius: 5px; padding: 8px 11px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .feld .fehler { color: var(--rot); font-size: 12.5px; } .feld .hilfe { color: var(--faint); font-size: 12.5px; } .suchleiste { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .suchleiste input[type="search"] { flex: 1; min-width: 240px; border: 1px solid var(--border); border-radius: 5px; padding: 9px 14px; font-size: 14px; background: var(--surface); color: var(--ink); } .suchleiste input[type="search"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .suchleiste select { border: 1px solid var(--border); border-radius: 5px; padding: 8px 11px; font-size: 14px; background: var(--surface); color: var(--ink); } /* --- Meldungen --------------------------------------------------------- */ .meldungen { margin-bottom: 16px; } .meldung { padding: 10px 14px; border-radius: 5px; margin-bottom: 8px; font-weight: 500; border: 1px solid transparent; } .meldung.success { background: var(--gruen-bg); color: var(--gruen); border-color: #cbe4d5; } .meldung.error { background: var(--rot-bg); color: var(--rot); border-color: #f0cfcf; } .meldung.warning { background: var(--orange-bg); color: var(--orange); border-color: #ecdcba; } .meldung.info { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; } .verlauf { list-style: none; margin: 0; padding: 0; } .verlauf li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .verlauf li:last-child { border-bottom: none; } .verlauf .meta { color: var(--faint); font-size: 12.5px; margin-top: 2px; } .detail-raster { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .detail-raster { grid-template-columns: 1fr; } } .eigenschaften { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; } .eigenschaften dt { color: var(--muted); } .eigenschaften dd { margin: 0; font-weight: 600; } .seiten { display: flex; gap: 6px; margin-top: 16px; } .seiten a, .seiten span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); } .seiten .aktuell { background: var(--brand); color: #fff; border-color: var(--brand); } /* --- Login ------------------------------------------------------------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--navy) 0%, #16466e 100%); } .login-box { background: var(--surface); padding: 34px; border-radius: 8px; width: 360px; box-shadow: var(--shadow-lg); } .login-box h1 { margin: 0 0 6px; font-size: 20px; color: var(--ink); } .login-box p.unter { color: var(--muted); margin: 0 0 20px; font-size: 14px; } .login-box .feld { margin-bottom: 14px; } .login-box .btn { width: 100%; justify-content: center; } .leer { color: var(--faint); padding: 22px; text-align: center; } /* --- Mobile Monteur-Ansicht -------------------------------------------- */ .einsatz-liste { display: grid; gap: 12px; } .einsatz-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); } .einsatz-karte h3 { margin: 8px 0 6px; font-size: 16px; } .einsatz-kopf { display: flex; justify-content: space-between; align-items: center; } .einsatz-info { margin: 0 0 12px; line-height: 1.7; color: var(--ink); } .einsatz-aktionen { display: flex; gap: 8px; flex-wrap: wrap; } .einsatz-aktionen .btn { min-height: 44px; display: inline-flex; align-items: center; } .einsatz-aktionen form { display: inline; } /* --- Responsive -------------------------------------------------------- */ @media (max-width: 760px) { .topbar { height: auto; flex-wrap: wrap; padding: 8px 14px; gap: 8px; } .topbar nav { flex-wrap: wrap; width: 100%; order: 3; gap: 2px; } .topbar nav a { padding: 8px 10px; font-size: 14px; } .topbar .benutzer { margin-left: auto; } main { padding: 14px; } .seitenkopf h1 { font-size: 18px; } table.liste { display: block; overflow-x: auto; white-space: nowrap; } .form-raster { grid-template-columns: 1fr; } .btn { min-height: 42px; display: inline-flex; align-items: center; } .kennzahlen { grid-template-columns: 1fr 1fr; } } /* --- Terminplan -------------------------------------------------------- */ table.plan { border-collapse: collapse; width: 100%; } table.plan td, table.plan th { vertical-align: top; } table.plan td, table.plan th { border-left: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } table.plan td:first-child, table.plan th:first-child { border-left: 2px solid var(--border); } table.plan td:last-child, table.plan th:last-child { border-right: 1px solid var(--border-soft); } table.plan tbody tr { border-bottom: 1px solid var(--border); } table.plan td:first-child { background: var(--surface-2); font-size: 13px; } .heute-spalte { background: var(--brand-tint) !important; } .frei-spalte { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--rot-bg) 6px, var(--rot-bg) 12px); } .plan-eintrag { display: block; background: var(--brand-tint); border-left: 3px solid var(--brand); border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); } .plan-eintrag span { font-weight: 400; color: var(--ink); } .plan-eintrag:hover { text-decoration: none; filter: brightness(0.97); } .plan-eintrag.in_arbeit { background: var(--orange-bg); border-left-color: var(--orange); color: var(--orange); } .plan-eintrag.erledigt { background: var(--gruen-bg); border-left-color: var(--gruen); color: var(--gruen); } .plan-eintrag.offen { background: var(--rot-bg); border-left-color: var(--rot); color: var(--rot); } .plan-eintrag.urlaub { background: var(--lila-bg); border-left-color: var(--lila); color: var(--lila); } /* --- Balkendiagramm (Auswertungen) ------------------------------------- */ .balken-diagramm { display: flex; align-items: flex-end; gap: 8px; height: 220px; padding-top: 20px; } .balken-spalte { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .balken { width: 100%; max-width: 56px; background: linear-gradient(180deg, var(--brand), var(--brand-strong)); border-radius: 4px 4px 0 0; min-height: 2px; } .balken-wert { font-size: 11px; color: var(--faint); margin-bottom: 3px; } .balken-label { font-size: 11px; color: var(--faint); margin-top: 6px; white-space: nowrap; } /* --- Nav-Dropdowns ----------------------------------------------------- */ .nav-gruppe { position: relative; } .nav-menue { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--navy); border-radius: 0 0 6px 6px; min-width: 200px; padding: 6px; box-shadow: var(--shadow-lg); } .nav-gruppe:hover .nav-menue, .nav-gruppe:focus-within .nav-menue { display: block; } .nav-menue a { display: block; padding: 9px 12px !important; color: #cfe0ee; } @media (max-width: 760px) { .nav-menue { position: static; display: block; background: transparent; box-shadow: none; padding: 0 0 0 14px; min-width: 0; } } .nav-suche input { background: var(--hdr-field); border: 1px solid var(--hdr-line); border-radius: 5px; color: var(--hdr-ink); padding: 7px 12px; font-size: 13px; width: 200px; } .nav-suche input::placeholder { color: var(--hdr-muted); } .nav-suche input:focus { background: var(--hdr-field); color: #fff; outline: none; width: 250px; border-color: var(--hdr-accent); box-shadow: 0 0 0 3px rgba(111,176,221,.18); } @media (max-width: 760px) { .detail-raster > div, .detail-raster > .karte, .kennzahlen > .kennzahl { min-width: 0; } .karte { overflow-x: auto; } .balken-diagramm { overflow-x: auto; } .balken-label { font-size: 9px; } .seitenkopf > div { display: flex; flex-wrap: wrap; gap: 6px; } .einsatz-karte { min-width: 0; } body { overflow-x: hidden; } } /* --- Checkliste, Wartung, Objekte -------------------------------------- */ .badge-gruen { background: var(--gruen-bg); color: var(--gruen); } .badge-rot { background: var(--rot-bg); color: var(--rot); } .btn-klein { padding: 5px 10px; font-size: 12.5px; } .btn-hell { background: var(--surface); color: var(--brand); border: 1px solid var(--border); } .btn-hell:hover { background: var(--brand-tint); } /* --- Sidebar-Layout (klassisches ERP-Menü) ----------------------------- */ body.mit-sidebar { display: block; } body.mit-sidebar .topbar { position: sticky; top: 0; z-index: 60; } .logo-zusatz { font-weight: 500; font-size: 11px; letter-spacing: 2px; color: var(--hdr-muted); } .menue-knopf { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 10px; } .sidebar { position: fixed; left: 0; top: 56px; bottom: 0; width: 232px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); padding: 12px 10px 30px; z-index: 50; } .sidebar nav { display: flex; flex-direction: column; gap: 1px; } .sb-titel { margin: 15px 8px 5px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); } .sb-link { display: block; padding: 7px 10px; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.4; font-weight: 500; transition: background .12s, color .12s; border-left: 2px solid transparent; } .sb-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .sb-link.aktiv { background: var(--brand-tint); color: var(--brand-ink); font-weight: 650; border-left-color: var(--brand); } body.mit-sidebar main { margin-left: 232px; padding: 20px 24px; max-width: none; } body.mit-sidebar .topbar nav, body.mit-sidebar .nav-gruppe { display: none; } @media (max-width: 980px) { .menue-knopf { display: block; } .sidebar { transform: translateX(-105%); transition: transform .2s ease; width: 262px; box-shadow: var(--shadow-lg); } body.sidebar-offen .sidebar { transform: translateX(0); } body.mit-sidebar main { margin-left: 0; padding: 14px; } } /* Formen-Galerie (Sonderform-Auswahl per Bild) */ .formen-galerie { display: flex; gap: 8px; flex-wrap: wrap; } .form-kachel { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface); border: 2px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 11.5px; color: var(--ink); } .form-kachel svg { width: 56px; height: 40px; } .form-kachel:hover { border-color: var(--brand); } .form-kachel.aktiv { border-color: var(--brand); background: var(--brand-tint); font-weight: 600; } @media (max-width: 980px) { .sidebar { top: 0; padding-top: 60px; z-index: 70; } } /* Terminplan-Board */ .plan-zelle { vertical-align: top; min-height: 60px; position: relative; } .plan-zelle.drop-ziel { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-tint); } .plan-eintrag[draggable="true"] { cursor: grab; } .zelle-plus { display: block; width: 100%; margin-top: 4px; border: 1px dashed var(--border); background: none; color: var(--faint); border-radius: 5px; cursor: pointer; font-size: 14px; line-height: 20px; opacity: 0; transition: opacity .12s; } .plan-zelle:hover .zelle-plus { opacity: 1; } .zelle-plus:hover { color: var(--brand); border-color: var(--brand); } .unverplant-zeile { cursor: grab; } dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } dialog::backdrop { background: rgba(15,34,51,.45); } /* Zeit-Stift im Terminplan */ .zeit-stift { border: none; background: none; cursor: pointer; font-size: 11px; color: inherit; opacity: .55; padding: 0 2px; } .zeit-stift:hover { opacity: 1; } /* Abwesenheitskalender */ .kalender { width: 100%; border-collapse: collapse; table-layout: fixed; } .kalender th { background: var(--navy); color: #fff; padding: 6px; font-size: 12.5px; } .kalender td { border: 1px solid var(--border-soft); vertical-align: top; height: 78px; padding: 3px; } .kalender td.kal-leer { background: var(--surface-2); } .kal-tag { font-size: 12px; color: var(--faint); text-align: right; } .kal-eintrag { font-size: 11px; border-radius: 4px; padding: 1px 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kal-eintrag.urlaub { background: var(--gruen-bg); color: var(--gruen); } .kal-eintrag.krank { background: var(--rot-bg); color: var(--rot); } .kal-eintrag.za { background: var(--orange-bg); color: var(--orange); } .kal-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; } .kal-punkt.urlaub { background: var(--gruen); } .kal-punkt.krank { background: var(--rot); } .kal-punkt.za { background: var(--orange); } /* Terminplan-Ansichten */ .ansicht-schalter { display: inline-flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .ansicht-schalter a { padding: 6px 13px; color: var(--muted); text-decoration: none; font-size: 14px; border-right: 1px solid var(--border-soft); } .ansicht-schalter a:last-child { border-right: none; } .ansicht-schalter a.aktiv { background: var(--brand); color: #fff; font-weight: 600; } .ansicht-schalter a:hover:not(.aktiv) { background: var(--brand-tint); } .feiertag-name { font-size: 10px; color: var(--rot); font-weight: 400; } .plan-eintrag.termin { background: var(--lila-bg); border-left: 3px solid var(--lila); color: var(--lila); } .mini-x { border: none; background: none; cursor: pointer; color: var(--lila); font-size: 11px; padding: 0 2px; } .termin-menu { position: relative; } .termin-menu > summary.mini-menu { list-style: none; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; padding: 0 3px; display: inline-block; } .termin-menu > summary.mini-menu::-webkit-details-marker { display: none; } .termin-menu[open] > summary.mini-menu { color: var(--brand); } /* Angebots-Editor */ .pos-zeile .drag-griff { cursor: grab; color: var(--border); user-select: none; } .pos-zeile:hover .drag-griff { color: var(--brand); } .pos-alternativ td { background: var(--surface-2); } .pos-alternativ strong { font-weight: 600; } /* Roter Verbergen-Button */ .btn-rot { background: var(--rot-bg); color: var(--rot); border: 1px solid var(--rot-bg); } .btn-rot:hover { filter: brightness(.97); } /* --- KPI-Leiste Dashboard (kompakt, viel Info auf einen Blick) --------- */ .kpi-leiste { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; } .kpi-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; position: relative; overflow: hidden; } .kpi-karte .kpi-tick { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #25547e; } .kpi-karte.rot .kpi-tick { background: var(--rot); } .kpi-karte.gruen .kpi-tick { background: var(--gruen); } .kpi-karte.orange .kpi-tick { background: var(--orange); } .kpi-karte .kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); padding-left: 8px; } .kpi-karte .kpi-wert { font-size: 21px; font-weight: 700; letter-spacing: -.4px; margin-top: 4px; color: var(--brand-strong); font-variant-numeric: tabular-nums; padding-left: 8px; } html[data-theme="dark"] .kpi-karte .kpi-wert { color: var(--ink); } .kpi-karte.rot .kpi-wert { color: var(--rot); } .kpi-karte.gruen .kpi-wert { color: var(--gruen); } .kpi-karte a.kpi-stretch { position: absolute; inset: 0; } .kpi-karte .kpi-meta { font-size: 11px; color: var(--muted); margin-top: 2px; padding-left: 8px; } @media (max-width: 980px) { .kpi-leiste { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .kpi-leiste { grid-template-columns: repeat(2, 1fr); } }