/* ============================================================ W6 - Web | Stylesheet Gestaltung nach Vorlage: rote Kopf-/Fußzeile, helle Fläche, weiße Karten mit weichen Rändern, rote Akzente. ============================================================ */ :root { --rot: #c30b0c; --rot-dunkel: #9c0809; --rot-hell: #fceaea; --rot-rand: #f5d4d4; --flaeche: #f6f6f7; --karte: #ffffff; --rand: #ebebee; --rand-stark: #e1e1e6; --text: #1a1a1e; --text-grau: #8c8c94; --text-mittel: #55555c; --gruen: #1d8a4b; --gruen-hell: #f3faf5; --gruen-rand: #cdead6; --gruen-flaeche: #d9f2e1; --eingabe: #ffffff; --hover: #f4f4f6; --einlage: #f1f1f4; --tabellen-kopf: #fafafb; --zeile-hover: #fcf8f8; --rand-zart: #f1f1f4; --text-blass: #c2c2c8; --schatten: 0 1px 2px rgba(20, 20, 25, .05), 0 6px 18px rgba(20, 20, 25, .05); --radius: 14px; --fokus: 0 0 0 3px rgba(195, 11, 12, .22); } /* Dunkles Farbschema - wird per Einstellungen-Dialog geschaltet (app.js setzt data-thema="dunkel" auf ). */ :root[data-thema="dunkel"] { --rot-hell: #3a1617; --rot-rand: #5a2222; --flaeche: #131316; --karte: #1e1e23; --rand: #2b2b32; --rand-stark: #383840; --text: #e8e8ec; --text-grau: #8f8f99; --text-mittel: #b8b8c1; --gruen-hell: #16241b; --gruen-rand: #245c39; --gruen-flaeche: #1c3627; --eingabe: #26262c; --hover: #2a2a31; --einlage: #2e2e35; --tabellen-kopf: #232329; --zeile-hover: #29242a; --rand-zart: #26262c; --text-blass: #5b5b64; --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--flaeche); color: var(--text); display: flex; flex-direction: column; min-height: 100vh; font-size: 14px; } button { font-family: inherit; } :focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------------- Kopfzeile ---------------- Aussehen (Hoehe, Farbe, Logo, Titel, Avatar, Hilfe-Knopf) steht in css/kopfzeile.css - EINE Datei fuer SPA und MVC-Seiten, damit die Leiste ueberall gleich aussieht. Hier bleibt nur, was die SPA anders braucht: Die Seite scrollt als Ganzes, deshalb klebt die Kopfzeile oben. */ .kopf { position: sticky; top: 0; z-index: 50; } .benutzer-menue { position: absolute; top: calc(100% + 8px); right: 0; background: var(--karte); color: var(--text); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schatten); min-width: 185px; padding: 6px; z-index: 60; } .benutzer-menue .menue-kopf { padding: 8px 10px 9px; border-bottom: 1px solid var(--rand); margin-bottom: 5px; } .benutzer-menue .menue-kopf .mk-name { font-weight: 700; font-size: 13px; } .benutzer-menue .menue-kopf .mk-rolle { font-size: 11px; color: var(--text-grau); margin-top: 1px; } .benutzer-menue button { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; text-align: left; font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--text); } .benutzer-menue button:hover { background: var(--hover); } .benutzer-menue button.gefahr { color: var(--rot); } .benutzer-menue button svg { width: 15px; height: 15px; flex-shrink: 0; } /* ---------------- Inhalt ---------------- */ .inhalt { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 24px 44px; } /* Willkommens-Karte */ .willkommen { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); text-align: center; padding: 34px 28px; margin-bottom: 26px; } .willkommen h1 { margin: 0; font-size: clamp(20px, 3.2vw, 29px); font-weight: 800; letter-spacing: -.2px; } /* Modul-Karten */ .modul-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 20px; } .modul-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 15px 15px 14px; cursor: pointer; text-align: left; position: relative; display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; font: inherit; color: inherit; } .modul-karte:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(20, 20, 25, .06), 0 14px 30px rgba(20, 20, 25, .09); border-color: var(--rand-stark); } .modul-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--rot-hell); border: 1px solid var(--rot-rand); display: flex; align-items: center; justify-content: center; color: var(--rot); } .modul-icon svg { width: 21px; height: 21px; } .modul-pill { position: absolute; top: 15px; right: 15px; font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--rot); color: #fff; letter-spacing: .2px; } .modul-titel { font-size: 15.5px; font-weight: 800; margin-top: 14px; } .modul-text { font-size: 11.5px; color: var(--text-grau); line-height: 1.45; margin-top: 4px; min-height: 33px; } .modul-vorschau { margin-top: 13px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 11px; height: 88px; display: flex; align-items: center; justify-content: center; } .modul-nr { background: var(--karte); border: 1px solid var(--rand); border-radius: 9px; box-shadow: 0 1px 2px rgba(20, 20, 25, .06); padding: 8px 15px; font-weight: 700; font-size: 13px; color: var(--text-mittel); } /* ---------------- Editor-Reiter (z. B. Kunden-Dialog) ---------------- */ .editor-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--rand); } .editor-tab { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rand); background: var(--karte); color: var(--text-mittel); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .editor-tab:hover { border-color: var(--rand-stark); } .editor-tab.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; } .editor-tab-flaeche.verborgen { display: none; } /* Illustration in der Kachel-Vorschau (statt Nummer) */ .modul-bild { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rot); padding: 4px 8px; } .modul-bild svg { width: 100%; height: 78px; display: block; } /* ---------------- Anmeldung ---------------- */ .anmelde-flaeche { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; } .anmelde-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schatten); width: 100%; max-width: 392px; padding: 34px 32px 30px; text-align: center; } /* Das grosse Logo der Anmeldekarte kommt aus css/kopfzeile.css (.w6-logo.w6-logo--gross). */ .anmelde-karte h1 { font-size: 21px; font-weight: 800; margin: 0 0 4px; } .anmelde-karte .anmelde-unter { color: var(--text-grau); font-size: 12.5px; margin-bottom: 22px; } .anmelde-karte form { text-align: left; } .anmelde-fehler { background: var(--rot-hell); border: 1px solid var(--rot-rand); color: var(--rot-dunkel); font-size: 12.5px; border-radius: 9px; padding: 9px 12px; margin-bottom: 14px; } .anmelde-hinweis { background: var(--gruen-hell); border: 1px solid var(--gruen-rand); color: var(--gruen); font-size: 12.5px; border-radius: 9px; padding: 9px 12px; margin-bottom: 14px; text-align: left; } .anmelde-links { margin-top: 14px; text-align: center; } .verweis-knopf { background: none; border: none; color: var(--rot); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .verweis-knopf:hover { text-decoration: underline; } /* ---------------- Formulare ---------------- */ .feld { margin-bottom: 14px; } .feld label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-mittel); margin-bottom: 5px; letter-spacing: .2px; } .feld .feld-hinweis { font-size: 10.5px; color: var(--text-grau); margin-top: 4px; } .eingabe, select.eingabe, textarea.eingabe { width: 100%; border: 1px solid var(--rand-stark); border-radius: 9px; padding: 9px 12px; font-size: 13.5px; font-family: inherit; background: var(--eingabe); color: var(--text); transition: border-color .12s ease, box-shadow .12s ease; } .eingabe:focus { outline: none; border-color: var(--rot); box-shadow: var(--fokus); } .eingabe:disabled { background: var(--einlage); color: var(--text-grau); cursor: not-allowed; } textarea.eingabe { resize: vertical; min-height: 74px; } .kontrollfeld { display: flex; align-items: center; gap: 9px; padding: 8px 0 2px; } .kontrollfeld input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--rot); cursor: pointer; } .kontrollfeld span { font-size: 13px; } /* ---------------- Schaltflächen ---------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: 13px; font-weight: 700; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; transition: background .12s ease, transform .1s ease, border-color .12s ease; white-space: nowrap; } .knopf svg { width: 15px; height: 15px; } .knopf:active { transform: translateY(1px); } .knopf:disabled { opacity: .55; cursor: not-allowed; } .knopf-rot { background: var(--rot); color: #fff; } .knopf-rot:hover:not(:disabled) { background: var(--rot-dunkel); } .knopf-hell { background: var(--karte); border-color: var(--rand-stark); color: var(--text-mittel); } .knopf-hell:hover:not(:disabled) { background: var(--hover); } .knopf-breit { width: 100%; padding: 11px 16px; font-size: 14px; } .symbol-knopf { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: none; background: transparent; color: var(--text-grau); cursor: pointer; transition: background .12s ease, color .12s ease; } .symbol-knopf svg { width: 15.5px; height: 15.5px; } .symbol-knopf:hover { background: var(--hover); color: var(--text); } .symbol-knopf.gefahr:hover { background: var(--rot-hell); color: var(--rot); } /* ---------------- Tabellen-Ansicht ---------------- */ .zurueck-zeile { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .zurueck-knopf { display: inline-flex; align-items: center; gap: 7px; background: var(--karte); border: 1px solid var(--rand-stark); border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-mittel); cursor: pointer; } .zurueck-knopf:hover { background: var(--hover); } .zurueck-knopf svg { width: 14px; height: 14px; } .tab-kopfzeile { display: flex; align-items: center; gap: 12px; min-width: 0; } .tab-kopf-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--rot-hell); border: 1px solid var(--rot-rand); color: var(--rot); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tab-kopf-icon svg { width: 18px; height: 18px; } .tab-kopf-titel { font-size: 17px; font-weight: 800; line-height: 1.2; } .tab-kopf-sub { font-size: 11.5px; color: var(--text-grau); } .werkzeuge { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 13px 15px; display: flex; align-items: flex-end; gap: 11px; flex-wrap: wrap; margin-bottom: 18px; } .werkzeuge .feld { margin: 0; } .werkzeuge .feld label { margin-bottom: 4px; font-size: 10.5px; } .werkzeuge .eingabe { padding: 8px 11px; font-size: 13px; } /* .wz-top entfallen (2026-08-04): Das Eingabefeld "Top (max.)" gibt es nicht mehr, geladen wird immer der ganze Bestand. */ .wz-strecker { flex: 1; } .tabellen-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; } .tabellen-rahmen { overflow: auto; max-height: calc(100vh - 330px); min-height: 160px; } table.daten { border-collapse: collapse; width: 100%; font-size: 12.8px; } table.daten th, table.daten td { padding: 9px 13px; border-bottom: 1px solid var(--rand-zart); text-align: left; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; } table.daten th { position: sticky; top: 0; background: var(--tabellen-kopf); font-size: 11px; font-weight: 700; letter-spacing: .2px; color: var(--text-mittel); border-bottom: 1px solid var(--rand); cursor: pointer; user-select: none; z-index: 5; } table.daten th:hover { background: var(--hover); } table.daten th .sortier { color: var(--rot); margin-left: 4px; font-size: 9px; } /* ---- Excel-artiger Spaltenfilter: Trichter im Kopf + Filterzeile ---- */ /* Kopfzelle: Titel (sortiert) links, Trichter rechts. */ table.daten th .th-inhalt { display: flex; align-items: center; gap: 6px; justify-content: space-between; } table.daten th .th-titel { cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .filter-knopf { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text-blass); cursor: pointer; } .filter-knopf svg { width: 12px; height: 12px; } .filter-knopf:hover { background: var(--hover); color: var(--text-mittel); } .filter-knopf.aktiv { color: var(--rot); background: var(--rot-hell); } /* Zweite Kopfreihe: je Spalte ein Eingabefeld. Klebt unter der ersten Reihe. "top" ist hier nur ein Notnagel - den echten Wert setzt tabelleZeichnen zur Laufzeit als Inline-Stil (gemessene Hoehe der ersten Kopfzeile). */ table.daten tr.filter-reihe th { top: 39px; padding: 4px 8px; cursor: default; background: var(--tabellen-kopf); border-bottom: 1px solid var(--rand); } table.daten tr.filter-reihe th:hover { background: var(--tabellen-kopf); } .filter-eingabe { width: 100%; min-width: 60px; padding: 3px 7px; font-size: 11.5px; font-family: inherit; border: 1px solid var(--rand); border-radius: 6px; background: var(--karte); color: var(--text); } .filter-eingabe:focus { outline: none; border-color: var(--rot); } .filter-eingabe::placeholder { color: var(--text-blass); } table.daten td.keine-treffer { padding: 26px 13px; text-align: center; color: var(--text-grau); white-space: normal; } /* Trichter-Menue: schwebt ueber der Tabelle (position: fixed -> unabhaengig vom Scrollcontainer der Tabelle). */ .filter-menue { position: fixed; z-index: 60; width: 250px; max-width: calc(100vw - 16px); background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); overflow: hidden; } .filter-menue .fm-kopf { padding: 8px; border-bottom: 1px solid var(--rand-zart); } .filter-menue .fm-suche { width: 100%; font-size: 12.5px; padding: 5px 8px; } .filter-menue .fm-liste { max-height: 240px; overflow-y: auto; padding: 4px 0; } .filter-menue .fm-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; } .filter-menue .fm-zeile:hover { background: var(--hover); } .filter-menue .fm-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-menue .fm-alle { font-weight: 700; border-bottom: 1px solid var(--rand-zart); } .filter-menue .fm-leer { padding: 14px 10px; font-size: 12.5px; color: var(--text-grau); text-align: center; } .filter-menue .fm-fuss { display: flex; gap: 8px; justify-content: flex-end; padding: 8px; border-top: 1px solid var(--rand-zart); } .filter-menue .fm-fuss .knopf { padding: 5px 11px; font-size: 12px; } table.daten tbody tr:hover td { background: var(--zeile-hover); } table.daten td.leer { color: var(--text-blass); } table.daten td.zahl { font-variant-numeric: tabular-nums; } /* Sync-Status als Icon: -1 lokal/Standalone, 0 wird hochgeladen, 1 Cloud */ table.daten td.sync-zelle { text-align: center; } .sync-icon { display: inline-flex; align-items: center; justify-content: center; } .sync-icon svg { width: 17px; height: 17px; } /* Farbe = Verbreitung des Satzes (unveraendert): grau = nur Standalone, gruen = auch in der LO-DB. Die Klassennamen heissen jetzt nach dem ZUSTAND (sa/lo) und nicht mehr nach dem Symbol - die Symbole wurden getauscht (SA = Wolke, LO = Server), siehe syncSpan in app.js. */ .sync-icon.sync-sa { color: var(--text-grau); } .sync-icon.sync-lo { color: var(--gruen); } .sync-icon.sync-laeuft { color: #2563eb; } /* In der Zuordnungsliste das Sync-Icon (oder den Platzhalter) rechts ausrichten */ .zu-zeile .sync-icon, .zu-zeile .zu-sync-leer { margin-left: auto; } .zu-zeile .zu-sync-leer { color: var(--text-blass); } table.daten th.aktionen, table.daten td.aktionen { position: sticky; right: 0; background: var(--karte); border-left: 1px solid var(--rand-zart); text-align: right; width: 86px; cursor: default; z-index: 4; } table.daten th.aktionen { background: var(--tabellen-kopf); z-index: 6; } table.daten tbody tr:hover td.aktionen { background: var(--zeile-hover); } /* Deaktivierte Projekte: ausgegraut */ table.daten tr.zeile-inaktiv td { color: var(--text-blass); } table.daten tr.zeile-inaktiv td.aktionen { color: inherit; } .tab-fusszeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; border-top: 1px solid var(--rand); font-size: 11.8px; color: var(--text-grau); flex-wrap: wrap; } .leer-hinweis { padding: 44px 20px; text-align: center; color: var(--text-grau); font-size: 13px; } .leer-hinweis .gross { font-size: 15px; font-weight: 700; color: var(--text-mittel); margin-bottom: 5px; } .leer-hinweis .knopf { margin-top: 16px; } /* ---------------- Detail-Ansicht (z. B. Firmendaten) ---------------- */ .detail-liste { display: flex; flex-direction: column; gap: 14px; padding: 15px; } .detail-karte { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; } .detail-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--flaeche); border-bottom: 1px solid var(--rand); } .detail-titel { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .detail-aktionen { display: flex; align-items: center; gap: 8px; } .detail-felder { display: grid; grid-template-columns: 1fr; } .detail-zeile { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 9px 16px; font-size: 12.8px; border-bottom: 1px solid var(--rand); } .detail-zeile:last-child { border-bottom: none; } .detail-label { color: var(--text-grau); font-weight: 600; } .detail-wert { color: var(--text); word-break: break-word; } .detail-wert .leer { color: var(--text-grau); } @media (max-width: 640px) { .detail-zeile { grid-template-columns: 1fr; gap: 2px; } } .laden { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 48px 20px; color: var(--text-grau); font-size: 13px; } .spinner { width: 20px; height: 20px; border: 2.5px solid var(--rot-hell); border-top-color: var(--rot); border-radius: 50%; animation: drehen .75s linear infinite; } @keyframes drehen { to { transform: rotate(360deg); } } /* Kleine Ausfuehrung fuer die Anzeige IN einem Knopf (Schonfrist beim Entsperren, siehe SperreSchonfrist in app.js). Die Farbe kommt vom Knopf selbst (currentColor), damit der Kringel auf hellen wie dunklen Knoepfen zu sehen ist. Steht bewusst NACH .spinner - gleiche Spezifitaet, spaeter gewinnt, so ueberschreibt es Groesse und Farbe. */ .spinner-klein { width: 13px; height: 13px; border: 2px solid rgba(0, 0, 0, .18); border-top-color: currentColor; display: inline-block; vertical-align: -2px; } /* ---------------- Modale ---------------- */ .modal-hintergrund { position: fixed; inset: 0; background: rgba(18, 18, 22, .46); display: flex; align-items: center; justify-content: center; padding: 22px; z-index: 100; animation: einblenden .14s ease; } @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--karte); border-radius: 16px; box-shadow: 0 24px 70px rgba(15, 15, 20, .3); width: 100%; max-width: 1040px; max-height: 92vh; display: flex; flex-direction: column; animation: hochkommen .16s ease; } @keyframes hochkommen { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .modal.schmal { max-width: 560px; } .modal.breit { max-width: 1200px; } .modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px 14px; border-bottom: 1px solid var(--rand); } .modal-kopf .modal-titel { font-size: 15.5px; font-weight: 800; } .modal-kopf .modal-sub { font-size: 11.5px; color: var(--text-grau); margin-top: 2px; } .modal-koerper { padding: 18px 20px; overflow: auto; } /* Ladebalken der Schonfrist beim Entsperren (siehe sperreBalkenZeigen in app.js). Sitzt direkt unter der Kopfzeile des Dialogs und laeuft einmal durch. Die Hoehe ist bewusst klein - er soll auffallen, aber den Dialog nicht auseinanderschieben. */ .sperre-balken { height: 3px; background: var(--rot-hell); overflow: hidden; flex: none; } .sperre-balken i { display: block; height: 100%; width: 0; background: var(--rot); } /* ---- Bearbeitungssperre (Projekte / Kunden) ---- */ .modal-kopf-aktionen { display: flex; align-items: center; gap: 8px; } .modal-kopf-aktionen .knopf svg { width: 15px; height: 15px; } /* Gesperrt = gelb, entsperrt = gruen. Die beiden Zustaende sollen sich auf einen Blick unterscheiden, deshalb Farbe UND Schloss-Symbol wechseln. */ #sperreKnopf.gesperrt { border-color: rgba(217, 119, 6, .45); background: rgba(245, 158, 11, .20); color: #92400e; } #sperreKnopf.gesperrt:hover { background: rgba(245, 158, 11, .32); } /* Entsperrt ist KEIN Endzustand mehr: ein weiterer Klick sperrt wieder. Deshalb Zeigefinger und Hover-Effekt wie bei jedem anderen Knopf. */ #sperreKnopf.entsperrt { border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .10); color: #047857; opacity: 1; cursor: pointer; } #sperreKnopf.entsperrt:hover { background: rgba(16, 185, 129, .22); } /* Beim Entsperren nur ausgeblendet - beim Zuruecksperren kommt er wieder. */ .sperre-hinweis.verborgen { display: none; } .sperre-hinweis { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; padding: 9px 12px; border: 1px solid rgba(217, 119, 6, .38); border-radius: 9px; background: rgba(245, 158, 11, .17); color: #92400e; font-size: 12px; } .sperre-hinweis svg { width: 16px; height: 16px; flex: 0 0 auto; } /* Gelber Schleier ueber dem gesperrten Formular: leicht genug, um alles lesen zu koennen, aber deutlich genug, dass der Zustand aufaellt. */ .modal-koerper.editor-gesperrt { background: rgba(245, 158, 11, .12); } /* Gesperrte Felder klar als "nicht jetzt" lesbar halten. */ .modal-koerper input:disabled, .modal-koerper select:disabled, .modal-koerper textarea:disabled { background: var(--flaeche); color: var(--text-grau); cursor: not-allowed; } /* Im gesperrten Zustand die Felder mit in den Gelbton ziehen, sonst wirken sie wie Loecher im Schleier. */ .modal-koerper.editor-gesperrt input:disabled, .modal-koerper.editor-gesperrt select:disabled, .modal-koerper.editor-gesperrt textarea:disabled { background: rgba(255, 247, 237, .80); border-color: rgba(217, 119, 6, .25); } /* Dunkles Schema: derselbe Gelbton, aber heller Text statt Braun. */ :root[data-thema="dunkel"] #sperreKnopf.gesperrt, :root[data-thema="dunkel"] .sperre-hinweis { color: #fbbf24; } :root[data-thema="dunkel"] .modal-koerper.editor-gesperrt input:disabled, :root[data-thema="dunkel"] .modal-koerper.editor-gesperrt select:disabled, :root[data-thema="dunkel"] .modal-koerper.editor-gesperrt textarea:disabled { background: rgba(124, 76, 8, .26); } .formular-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 13px 16px; } .formular-raster .feld { margin: 0; } .formular-raster .feld.voll { grid-column: 1 / -1; } .modal-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 20px 16px; border-top: 1px solid var(--rand); } .modal-fuss .links { margin-right: auto; font-size: 11.5px; color: var(--text-grau); } /* ---------------- Toasts ---------------- */ .toasts { position: fixed; top: 76px; right: 18px; display: flex; flex-direction: column; gap: 9px; z-index: 200; max-width: 360px; } .toast { background: var(--karte); border: 1px solid var(--rand); border-left: 4px solid var(--gruen); border-radius: 11px; box-shadow: var(--schatten); padding: 11px 14px; font-size: 12.8px; display: flex; gap: 10px; align-items: flex-start; animation: toast-rein .18s ease; word-break: break-word; } .toast.fehler { border-left-color: var(--rot); } .toast .toast-titel { font-weight: 700; margin-bottom: 1px; } .toast .toast-text { color: var(--text-mittel); } @keyframes toast-rein { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------------- Fußzeile ---------------- */ .fuss { background: var(--rot); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: 13px 16px; flex-shrink: 0; } /* ---------------- Modul-Gruppen (Startseite) ---------------- */ .gruppen-raster { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .gruppen-karte .modul-icon { width: 54px; height: 54px; border-radius: 15px; } .gruppen-karte .modul-icon svg { width: 25px; height: 25px; } .gruppen-karte .modul-titel { font-size: 18px; } .gruppen-karte .modul-text { font-size: 12.5px; min-height: 36px; } .gruppen-karte .modul-vorschau { height: auto; min-height: 88px; flex-direction: column; gap: 8px; padding: 14px 12px; } .gruppen-karte .modul-inhalt { font-size: 11px; color: var(--text-grau); text-align: center; line-height: 1.5; } /* ---------------- Auswertung (Dashboards) ---------------- */ .aw-werkzeuge .feld { width: 150px; } .aw-schnell { display: flex; gap: 7px; flex-wrap: wrap; } .aw-schnell .knopf { padding: 8px 12px; font-size: 12px; } .aw-tabs { display: flex; gap: 4px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 5px; margin-bottom: 18px; width: fit-content; max-width: 100%; overflow-x: auto; } .aw-tab { border: none; background: transparent; border-radius: 9px; padding: 9px 20px; font-size: 13px; font-weight: 700; color: var(--text-mittel); cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; } .aw-tab:hover { background: var(--hover); } .aw-tab.aktiv { background: var(--rot); color: #fff; } .aw-kpi-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 18px; } .aw-kpi { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 15px 17px 13px; min-width: 0; } .aw-kpi-wert { font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--rot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aw-kpi-label { font-size: 12px; font-weight: 700; color: var(--text-mittel); margin-top: 3px; } .aw-kpi-sub { font-size: 10.5px; color: var(--text-grau); margin-top: 2px; } .aw-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-bottom: 18px; } .aw-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 18px; min-width: 0; } .aw-karte.breit { grid-column: 1 / -1; } .aw-karte-titel { font-size: 13px; font-weight: 800; margin-bottom: 13px; letter-spacing: .2px; } .aw-leer { color: var(--text-grau); font-size: 12.5px; padding: 18px 0; } /* Säulendiagramm */ .aw-saeulen { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-top: 6px; } .aw-saeule { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; cursor: default; } .aw-saeule-stapel { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: hidden; background: linear-gradient(to top, var(--flaeche), var(--tabellen-kopf)); } .aw-sa { background: var(--rot); border-radius: 3px 3px 0 0; min-height: 0; transition: height .25s ease; } .aw-sp { background: var(--gruen); opacity: .85; min-height: 0; } .aw-saeule:hover .aw-sa { background: var(--rot-dunkel); } .aw-saeule-label { font-size: 9.5px; color: var(--text-grau); text-align: center; margin-top: 4px; height: 13px; white-space: nowrap; overflow: visible; } .aw-legende { display: flex; gap: 16px; margin-top: 10px; } .aw-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-mittel); font-weight: 600; } .aw-lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* Donut */ .aw-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .aw-donut svg { width: 158px; height: 158px; flex-shrink: 0; transform: rotate(0deg); } .aw-donut circle { transition: stroke-width .12s ease; } .aw-donut circle:hover { stroke-width: 6.4; } .aw-donut-zahl { font-size: 5.4px; font-weight: 800; fill: var(--text); text-anchor: middle; } .aw-donut-text { font-size: 2.8px; font-weight: 700; fill: var(--text-grau); text-anchor: middle; letter-spacing: .1px; } .aw-donut-legende { flex: 1; min-width: 175px; display: flex; flex-direction: column; gap: 7px; } .aw-donut-lg { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; } .aw-donut-lg i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .aw-donut-lg .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .aw-donut-lg .w { color: var(--text-grau); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Horizontale Balkenliste */ .aw-balken-liste { display: flex; flex-direction: column; gap: 12px; } .aw-bl { min-width: 0; } .aw-bl-kopf { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .aw-bl-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .aw-bl-wert { font-size: 11.5px; color: var(--text-mittel); white-space: nowrap; font-variant-numeric: tabular-nums; } .aw-bl-track { background: var(--einlage); border-radius: 99px; height: 9px; overflow: hidden; } .aw-bl-fuell { height: 100%; border-radius: 99px; transition: width .25s ease; } .aw-bl-sub { font-size: 10.5px; color: var(--text-grau); margin-top: 3px; } /* Heatmap */ .aw-hm-rahmen { overflow-x: auto; } .aw-heatmap { border-collapse: separate; border-spacing: 3px; width: 100%; } .aw-heatmap th { font-size: 10.5px; font-weight: 700; color: var(--text-mittel); text-align: left; padding: 2px 6px 2px 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aw-heatmap thead th, .aw-heatmap tr:first-child th { text-align: center; padding: 0 0 3px; } .aw-hm-zelle { min-width: 34px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-mittel); background: var(--einlage); } .aw-hm-zelle.hell { color: #fff; } .aw-detail-wahl { max-width: 360px; margin-bottom: 14px; } /* ---------------- Zuordnungen ---------------- */ .zu-hinweis { font-size: 12.5px; color: var(--text-mittel); line-height: 1.55; } .zu-raster { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: start; } @media (max-width: 760px) { .zu-raster { grid-template-columns: 1fr; } } .zu-zaehler { font-size: 12px; color: var(--text-grau); margin-top: 2px; } .zu-liste { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 420px); min-height: 120px; overflow-y: auto; padding-right: 4px; } .zu-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--rand); border-radius: 9px; cursor: pointer; transition: background .1s ease, border-color .1s ease; font-size: 13px; } .zu-zeile:hover { background: var(--hover); } .zu-zeile.aktiv { background: var(--rot-hell); border-color: var(--rot-rand); } .zu-zeile input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--rot); cursor: pointer; flex-shrink: 0; } .zu-zeile .zu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .zu-zeile .zu-zusatz { font-size: 10.5px; color: var(--text-grau); white-space: nowrap; } /* Zuordnungen: Tab "Gesamt" */ .zu-gkopf, .zu-gzeile { display: grid; grid-template-columns: 1fr 78px 76px 96px; gap: 8px; align-items: center; } .zu-gkopf { font-size: 10px; font-weight: 700; color: var(--text-grau); letter-spacing: .2px; padding: 0 11px 5px; text-align: center; } .zu-gkopf span:first-child { text-align: left; } .zu-gzeile { border: 1px solid var(--rand); border-radius: 9px; padding: 7px 11px; font-size: 13px; } .zu-gzeile.an { background: var(--gruen-hell); border-color: var(--gruen-rand); } .zu-gzeile .zu-gname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zu-gzeile .zu-mini { display: flex; justify-content: center; } .zu-gzeile .zu-mini input { width: 16px; height: 16px; accent-color: var(--rot); cursor: pointer; } .zu-status { font-size: 10.5px; font-weight: 700; text-align: center; border-radius: 999px; padding: 3px 0; background: var(--einlage); color: var(--text-grau); } .zu-status.gruen { background: var(--gruen-flaeche); color: var(--gruen); } /* ---------------- Responsiv ---------------- */ @media (max-width: 640px) { .inhalt { padding: 18px 14px 34px; } .willkommen { padding: 24px 18px; } .toasts { left: 14px; right: 14px; max-width: none; } .tabellen-rahmen { max-height: calc(100vh - 380px); } .aw-werkzeuge .feld { width: calc(50% - 6px); } .aw-saeulen { height: 150px; } .aw-donut svg { width: 130px; height: 130px; } }