/* 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; } /* Punkt 47: Knoepfe, die etwas unwiderruflich aendern, duerfen nicht wie ihre harmlosen Nachbarn aussehen. */ .btn.gefahr { background: var(--surface); color: var(--rot); border: 1px solid var(--rot); box-shadow: none; } .btn.gefahr:hover { background: var(--rot); color: #fff; filter: 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; /* Wunsch Paul 10.08.2026: „je nachdem wo sich meine Maus befindet soll sich auch die Seite bewegen". Ohne diese Zeile gibt der Browser das Mausrad an die Seite DAHINTER weiter, sobald im Menue nichts mehr zu scrollen ist - man scrollt ueber dem Menue und die Hauptseite laeuft. */ overscroll-behavior: contain; 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; } /* #84: Auch einzelne Knoepfe (z. B. Aufgaben Meine/Alle) muessen ihren aktiven Zustand zeigen - dafuer gab es bisher keine Regel. */ .btn.aktiv { background: var(--brand); color: #fff; border-color: var(--brand); 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; } /* #100: Zwischenüberschrift – abgesetzte Gliederungszeile ohne Betrag */ .pos-ueberschrift td { border-top: 1px solid var(--border, #d8dee6); } .pos-ueberschrift td:first-child { border-top-color: transparent; } .block-teil .drag-griff { cursor: grab; color: var(--border); user-select: none; } .block-teil:hover .drag-griff { color: var(--brand); } /* #104c: Menü „Verschieben nach …" (an den Anfang / ans Ende / hinter Pos. …) */ .verschieben-menue { display: inline-block; position: relative; } .verschieben-menue > summary::-webkit-details-marker { display: none; } .verschieben-menue > .verschieben-box { position: absolute; right: 0; top: 100%; z-index: 6; background: var(--surface, #fff); border: 1px solid var(--border, #d8dee6); border-radius: 8px; padding: 8px; display: grid; gap: 4px; min-width: 235px; text-align: left; box-shadow: 0 10px 26px rgba(15, 23, 42, .16); } .verschieben-menue > .verschieben-box form { margin: 0; } /* #104b: kurz hervorheben, wohin die Seite nach dem Speichern gesprungen ist */ .pos-angesprungen, .pos-angesprungen > td { animation: pos-anker 2.2s ease-out; } @keyframes pos-anker { 0%, 55% { background: var(--brand-tint); } 100% { background: transparent; } } /* #82: Auf Tablets/Handys (Touch ohne Maus) funktioniert Ziehen & Ablegen nicht – das ist eine Einschränkung von iPadOS/iOS. Dort blenden wir die Ziehgriffe aus und weisen stattdessen auf die Pfeiltasten hin. */ .touch-hinweis { display: none; } @media (hover: none) and (pointer: coarse) { /* Nur in der Angebots-Positionsliste ausblenden - dort gibt es die Pfeiltasten als Ersatz. Anderswo (Skizzen, Menuereihenfolge) waere die Funktion sonst unsichtbar statt nur unbedienbar. */ #pos-tabelle .drag-griff { display: none !important; } /* Fingerfreundliche Knoepfe auch auf Tablets (Befund 07.08.2026): Handys unter 760px hatten schon 42px, Touch-Geraete DARUEBER (iPad quer auf der Baustelle) behielten die 34-px-Knoepfe. */ .btn { min-height: 44px; } .touch-hinweis { display: block; margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #f4f6f9); color: var(--grau-3, #666); font-size: 12.5px; } } /* 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); } } /* Schlichte Kennzahlen-Tabellen (Monatsbericht, Tilgungs-Karte) – Nachtpaket 30.07. */ table.tabelle { border-collapse: collapse; } table.tabelle td, table.tabelle th { padding: 5px 6px; border-bottom: 1px solid var(--grau-1, #e3e9ef); } table.tabelle tr:last-child td { border-bottom: none; } /* --- Am Telefon bedienbar ------------------------------------------------ Befund aus dem Handy-Durchgang vom 11.08.2026, gemessen bei 400 x 824: Eingabefelder 37 bis 39 Pixel hoch (Empfehlung 44), der Menueknopf 40 x 38, und auf der Zeiterfassung 17 Textstellen unter 13 Pixel. Das ist keine Schoenheitsfrage. Ein Monteur bedient das mit Arbeitshandschuhen, im Stehen, oft in der Sonne. Wer daneben tippt, traegt die Zeit auf dem falschen Auftrag ein. Die Schriftgroesse 16px bei Eingabefeldern hat einen zweiten Grund: iPhones zoomen beim Antippen automatisch hinein, wenn ein Feld kleiner als 16px schreibt - danach steht die Seite verschoben und man muss wieder herauswischen. Mit 16px passiert das nicht. Bewusst nur unter 640px: Am Schreibtisch bleibt alles, wie es war. */ @media (max-width: 640px) { .form-input, .form-select, .form-textarea, .suchleiste input[type="search"] { min-height: 44px; padding: 11px 12px; font-size: 16px; } input[type="date"].form-input, input[type="time"].form-input { min-height: 44px; } .btn, button.btn, a.btn { min-height: 44px; padding: 11px 16px; font-size: 15px; } .btn.klein, .btn.sekundaer.klein { min-height: 38px; } .menue-knopf { min-width: 48px; min-height: 48px; font-size: 26px; } /* Nichts unter 13px: darunter liest es im Freien niemand mehr. */ .feld label, .feld .hilfe, .feld .fehler, .hilfe, .sb-titel { font-size: 13px; } .sb-link { font-size: 15px; padding: 11px 12px; } label { font-size: 13px; } /* Kontrollkaestchen und Auswahlknoepfe sind am Telefon die kleinsten Ziele ueberhaupt - hier hilft schon die halbe Groesse mehr. */ input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; } }