/* Bilanx Faktura — Basis-Stylesheet. Bewusst schlicht und ohne Framework: der portierte Faktura-Code bringt eigene Klassen mit, die hier andocken koennen. */ :root { --bg: #f1f3f7; --surface: #ffffff; --surface2: #f8fafc; --border: #e5e9f0; --text: #1f2937; --text-mut: #6b7280; --text-mut2: #9ca3af; --primary: #2b73ca; --primary-d: #2460a8; /* Markenton und Akzent setzt src/marke.js zur Laufzeit auf . Die Werte hier sind nur der Rueckfall, falls das Skript nicht laeuft — die Oberflaeche soll auch dann nicht farblos sein. */ --marke: #2c4e77; /* Logo-Quadrat, Hauptknopf */ --marke-d: #3a669c; /* derselbe Ton fuer :hover */ --danger: #dc2626; --ok: #059669; --warn: #d97706; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; } /* --- Boot ---------------------------------------------------------- */ .app-boot { display: grid; place-items: center; min-height: 100vh; } .boot-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Auth ---------------------------------------------------------- */ .auth-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; box-shadow: var(--shadow); } .auth-card__brand { margin: 0 0 4px; font-size: 22px; } .auth-card__sub { margin: 0 0 24px; color: var(--text-mut); } .auth-card__links { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .auth-card__links a { color: var(--primary); text-decoration: none; } .auth-card__links a:hover { text-decoration: underline; } /* --- Felder -------------------------------------------------------- */ .field { display: block; margin-bottom: 16px; } .field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; } .field input, .field select, .field textarea { width: 100%; font: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--text); } /* Groesse getrennt von Aussehen: der rechte Innenabstand gehoert dem Pfeil und wird weiter unten EINMAL fuer alle Auswahlfelder gesetzt. Wer hier `padding: 9px 11px` schreibt, schiebt den Text unter den Pfeil — genau das war vorher an drei Stellen passiert. */ .field input, .field textarea { padding: 9px 11px; } .field select { padding-block: 9px; padding-left: 11px; } .field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--bg); color: var(--text-mut); } .field__hint { display: block; margin-top: 4px; color: var(--text-mut); font-size: 12px; } /* Ein Hinweis, der eine Entscheidung verlangt — nicht bloss erklaert. Bewusst Warnfarbe und nicht Rot: es ist kein Fehler im Feld, sondern ein Widerspruch zum uebrigen Belegbestand. */ .field__hint--warn { color: var(--warn); font-weight: 500; } .fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 20px; } .fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text-mut); } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; } /* --- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; font: inherit; font-weight: 500; /* Gleicher Radius wie Eingabe- und Auswahlfelder: In der Werkzeugleiste stehen Knopf und Auswahlfeld nebeneinander, und zwei Rundungen nebeneinander sieht man sofort — auch wenn man nicht sagen kann, was stoert. Die grosse Rundung bleibt den Flaechen (Panel, Karte). */ border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; } .btn:hover:not(:disabled) { background: var(--bg); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn--primary:hover:not(:disabled) { background: var(--primary-d); } .btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-mut); } .btn--ghost:hover:not(:disabled) { background: var(--bg); color: var(--text); } .btn--block { width: 100%; } .btn--sm { padding: 5px 10px; font-size: 13px; } /* --- Shell --------------------------------------------------------- */ .topbar { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 56px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar__brand { font-weight: 600; } .topbar__spacer { flex: 1; } .topbar__org { font-size: 14px; color: var(--text-mut); } .topbar__role { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--bg); font-size: 12px; } .badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; } .badge--test { background: #fef3c7; color: var(--warn); } .layout { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - 56px); } .sidenav { padding: 16px 12px; border-right: 1px solid var(--border); background: var(--surface); } .sidenav__item { display: block; padding: 8px 12px; margin-bottom: 2px; border-radius: var(--radius); color: var(--text-mut); text-decoration: none; font-size: 14px; } .sidenav__item:hover { background: var(--bg); color: var(--text); } .sidenav__item.is-active { background: var(--primary); color: #fff; font-weight: 500; } .view { padding: 24px 28px; overflow: auto; } .page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .page-head__title { margin: 0; font-size: 22px; } .page-head__actions { margin-left: auto; } /* --- Panels / Tabellen --------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); } .panel h2 { margin: 0 0 14px; font-size: 16px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .card__label { font-size: 13px; color: var(--text-mut); margin-bottom: 6px; } .card__value { font-size: 22px; font-weight: 600; } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th, .tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); } .tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-mut); font-weight: 600; } .tbl tbody tr:hover { background: var(--bg); } .tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl__actions { text-align: right; } .is-inaktiv { opacity: .5; } .deflist { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 14px; } .deflist dt { color: var(--text-mut); } .deflist dd { margin: 0; } .status { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--bg); color: var(--text-mut); } .status--offen { background: #dbeafe; color: #1d4ed8; } .status--bezahlt { background: #dcfce7; color: var(--ok); } .status--teilbezahlt { background: #fef3c7; color: var(--warn); } .status--storniert { background: #fee2e2; color: var(--danger); } .leer, .hinweis { color: var(--text-mut); font-size: 14px; margin: 0; } .vorschau { font-size: 13px; color: var(--text-mut); } .placeholder { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 40px; text-align: center; } .placeholder h2 { margin: 0 0 8px; font-size: 17px; } .placeholder p { margin: 0; color: var(--text-mut); font-size: 14px; } /* --- Toast --------------------------------------------------------- */ .toast-host { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .toast { padding: 11px 16px; border-radius: var(--radius); background: #1f2937; color: #fff; font-size: 14px; max-width: 380px; box-shadow: 0 4px 12px rgba(0,0,0,.15); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; } .toast.is-in { opacity: 1; transform: none; } .toast--success { background: var(--ok); } .toast--error { background: var(--danger); } .toast--warn { background: var(--warn); } /* --- Modal --------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: grid; place-items: center; z-index: 300; padding: 20px; } .modal { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 20px 40px rgba(0,0,0,.2); } .modal__title { margin: 0 0 8px; font-size: 17px; } .modal__text { margin: 0 0 20px; color: var(--text-mut); } .modal__actions { display: flex; justify-content: flex-end; gap: 8px; } /* --- Formular-Dialog ------------------------------------------------ */ .modal--breit { max-width: 720px; } .modal__form .grid2 { gap: 0 18px; } .field--voll { grid-column: 1 / -1; } .field--check { display: flex; align-items: center; gap: 8px; } .field--check > span { margin: 0; } .field--check input { width: auto; } .field textarea { resize: vertical; font: inherit; } .is-fehler { border-color: var(--danger) !important; outline: 2px solid var(--danger); outline-offset: -1px; } /* --- Panel-Kopfzeile ------------------------------------------------ */ .panel__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .panel__kopf h2 { margin: 0; } .panel__aktionen { margin-left: auto; display: flex; gap: 8px; align-items: center; } .panel__aktionen select { padding-block: 6px; padding-left: 10px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); } /* --- Positionstabelle ----------------------------------------------- */ .tbl--pos td { padding: 4px 6px; vertical-align: middle; } .tbl--pos input, .tbl--pos select { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); } .tbl--pos input { padding: 6px 8px; } .tbl--pos select { padding-block: 6px; padding-left: 8px; } .tbl--pos input.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl--pos input:focus, .tbl--pos select:focus { outline: 2px solid var(--primary); outline-offset: -1px; } .tbl--pos .pos-nr { color: var(--text-mut); font-size: 13px; text-align: right; } .tbl--pos .pos-netto { font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl--klickbar tbody tr { cursor: pointer; } .entwurf-nr { color: var(--text-mut); font-size: 13px; font-style: italic; } /* --- Summenblock ---------------------------------------------------- */ .summen { margin-top: 18px; margin-left: auto; width: 320px; } .summen__zeile { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; } .summen__zeile span:last-child { font-variant-numeric: tabular-nums; } .summen__zeile--gesamt { border-top: 2px solid var(--text); margin-top: 6px; padding-top: 8px; font-size: 17px; font-weight: 600; } .summen__hinweis { margin: 10px 0 0; font-size: 12px; color: var(--text-mut); text-align: right; } @media (max-width: 900px) { .summen { width: 100%; } .tbl--pos { display: block; overflow-x: auto; } } /* --- Mailversand-Einstellungen -------------------------------------- */ .smtp-fehler { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; background: #fee2e2; color: #991b1b; border-radius: var(--radius); } /* --- Kennzahlen und Überfälligkeit ---------------------------------- */ .card__unter { margin-top: 4px; font-size: 12px; color: var(--text-mut); } .card--warnung { border-color: #fca5a5; background: #fef2f2; } .card--warnung .card__value { color: var(--danger); } .status--ueberfaellig { background: #fee2e2; color: #991b1b; } /* --- Angebotsstatus -------------------------------------------------- */ .status--versendet { background: #dbeafe; color: #1d4ed8; } .status--angenommen { background: #dcfce7; color: var(--ok); } .status--abgelehnt { background: #fee2e2; color: var(--danger); } .status--abgelaufen { background: #fef3c7; color: var(--warn); } .status--umgewandelt { background: #ede9fe; color: #6d28d9; } /* --- Bank-Abgleich --------------------------------------------------- */ .zweck { max-width: 320px; font-size: 13px; color: var(--text-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl select { padding-block: 5px; padding-left: 8px; font: inherit; font-size: 13px; max-width: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); } .tbl input[type="checkbox"] { width: auto; } /* --- Textbausteine --------------------------------------------------- */ .link-knopf { background: none; border: 0; padding: 0; margin-right: 10px; font: inherit; font-size: 12px; color: var(--primary); text-decoration: underline; cursor: pointer; } .link-knopf:hover { color: var(--primary-d); } /* --- Export ----------------------------------------------------------- */ .filterleiste { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; } .filterleiste label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-mut); } .filterleiste select, .filterleiste input[type="date"] { font: inherit; font-size: 14px; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); } .filterleiste input[type="date"] { padding: 8px 10px; } .filterleiste select { padding-block: 8px; padding-left: 10px; } .filterleiste label.chk { flex-direction: row; align-items: center; gap: 7px; } .filterleiste label.chk input { width: auto; } .tbl tfoot th { border-top: 2px solid var(--border); border-bottom: 0; color: var(--text); font-size: 14px; text-transform: none; letter-spacing: 0; } /* --- Symbole in Knoepfen ---------------------------------------------- */ .btn__icon { vertical-align: -2px; margin-right: 6px; opacity: .75; } .btn:hover .btn__icon { opacity: 1; } .btn--sm .btn__icon { margin-right: 4px; } /* --- Korrekturbelege --------------------------------------------------- */ .status--korrektur { background: #ede9fe; color: #6d28d9; } .panel--bezug { padding: 12px 16px; display: grid; gap: 6px; } .panel--bezug .hinweis { margin: 0; } .hinweis--warnung { color: var(--danger); font-weight: 500; } /* --- USt-Prognose ----------------------------------------------------- */ .balken { display: block; height: 8px; border-radius: 99px; background: var(--primary); opacity: .7; min-width: 2px; } .tbl tr.is-aktuell { background: #eff6ff; font-weight: 500; } .card--frist { border-color: #fcd34d; background: #fffbeb; } .panel--warnung { border-color: #fcd34d; background: #fffbeb; } .panel--warnung h2 { color: var(--warn); } /* --- Bauabrechnung ---------------------------------------------------- */ .summen__zeile--abzug { color: var(--warn); } .summen__zeile--abzug span:last-child { font-variant-numeric: tabular-nums; } /* ===================================================================== Optik nach dem Vorbild des Kanzleitools ===================================================================== Kopfzeile mit Logo-Quadrat, waagrechte Tabs statt Seitenleiste, Filter-Chips mit Zaehlern, ruhige Tabellen mit Icon-Aktionen. Die alten Klassennamen bleiben gueltig — hier wird nur nachgeschaerft, damit nicht jede View angefasst werden muss. */ /* --- Seitenleiste ------------------------------------------------------ Ersetzt die waagrechte Reiterleiste. Der Grund steht in src/ui/layout.js: die Reihe war mit zwoelf Punkten voll, gemessen 1219 zu 1104 Pixel. Die Leiste traegt Gruppen und Zaehler; beides ging waagrecht nicht. Sie laesst sich auf eine Symbolspalte schmal stellen, weil die Belegmaske jede Breite braucht, die sie bekommen kann. */ .schale { display: flex; align-items: stretch; min-height: 100vh; } .nav { width: 216px; flex: none; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .nav__kopf { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; } .nav__logo { width: 32px; height: 32px; border-radius: 6px; background: var(--marke); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; } .nav__name { font-size: 15px; font-weight: 700; white-space: nowrap; } .nav__klapp { margin-left: auto; background: none; border: 0; color: var(--text-mut2); cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; } .nav__klapp:hover { background: var(--bg); color: var(--text); } .nav__klapp:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .nav__liste { flex: 1; overflow-y: auto; padding: 4px 10px 12px; } .nav__gruppe { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--text-mut2); padding: 14px 8px 5px; } .nav__eintrag { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; color: var(--text-mut); font-size: 13.5px; text-decoration: none; white-space: nowrap; position: relative; } .nav__eintrag:hover { background: var(--bg); color: var(--text); } .nav__eintrag:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .nav__eintrag.is-aktiv { background: rgba(59,130,246,.10); color: var(--primary-d); font-weight: 600; } .nav__eintrag svg { flex: none; } .nav__text { overflow: hidden; text-overflow: ellipsis; } .nav__zahl { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--bg); color: var(--text-mut); border-radius: 99px; padding: 1px 7px; font-variant-numeric: tabular-nums; } .nav__eintrag.is-aktiv .nav__zahl { background: #fff; color: var(--primary-d); } .nav__zahl--warn { background: #fee2e2; color: #991b1b; } .nav__fuss { border-top: 1px solid var(--border); padding: 12px 14px; } .nav__fusslabel { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--text-mut2); } .nav__org { font-size: 12.5px; font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav__rolle { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mut2); font-weight: 700; } .nav__fussreihe { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .nav__fussreihe .btn { margin-left: auto; } /* --- Schmal gestellt: nur Symbole ------------------------------------ */ .ist-schmal .nav { width: 60px; } .ist-schmal .nav__name, .ist-schmal .nav__gruppe span, .ist-schmal .nav__text, .ist-schmal .nav__zahl, .ist-schmal .nav__org, .ist-schmal .nav__fusslabel, .ist-schmal .nav__fuss .btn { display: none; } /* Der Knopf bleibt in der Symbolspalte sichtbar — er ist der einzige Weg zurueck. Versteckt man ihn, ist die Leiste eine Einbahnstrasse, und die Einstellung ueberlebt auch noch den Neustart. Er rutscht unter das Zeichen, weil daneben kein Platz mehr ist. */ .ist-schmal .nav__kopf { flex-direction: column; gap: 6px; padding: 14px 8px 10px; } .ist-schmal .nav__kopf .nav__klapp { margin-left: 0; } .ist-schmal .nav__liste { padding: 4px 8px; } .ist-schmal .nav__eintrag { justify-content: center; padding: 9px 0; } /* Die Gruppenueberschrift wird zum Trennstrich — die Gliederung bleibt sichtbar, auch wo kein Wort mehr hinpasst. */ .ist-schmal .nav__gruppe { padding: 12px 0 4px; } .ist-schmal .nav__gruppe::after { content: ""; display: block; height: 1px; background: var(--border); margin: 0 6px; } .ist-schmal .nav__fuss { text-align: center; padding: 10px 6px; } .ist-schmal .nav__fussreihe { justify-content: center; margin: 0; } /* Ohne Zahl bleibt ein Punkt. Sonst verloere das Einklappen genau die Auskunft, fuer die die Zaehler da sind. */ .ist-schmal .nav__eintrag.hat-offenes::after { content: ""; position: absolute; top: 6px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-mut2); } .ist-schmal .nav__eintrag.hat-offenes:has(.nav__zahl--warn)::after { background: var(--danger); } /* --- Buehne ----------------------------------------------------------- */ .buehne { flex: 1; min-width: 0; } .buehne .view { max-width: 1240px; margin: 0 auto; padding: 22px 26px 48px; } /* Schmale Leiste am oberen Rand — nur auf kleinen Bildschirmen sichtbar, dort ist sie der einzige Weg zum Menue. */ .minileiste { display: none; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 90; } .minileiste__name { font-size: 14px; font-weight: 700; } /* `margin-left: auto` der Leiste gilt hier nicht: der Menue-Knopf ist das Erste, wonach man am Handy greift, und steht links. */ .minileiste .nav__klapp { margin-left: 0; } .nav__logo--klein { width: 26px; height: 26px; font-size: 10px; border-radius: 5px; } .nav__schatten { display: none; } @media (max-width: 1000px) { /* Die Leiste verdraengt den Inhalt nicht mehr, sie faehrt darueber. Auf einem schmalen Schirm ist Breite zu kostbar, um sie dauerhaft an eine Navigation zu geben, die man nur beim Wechseln braucht. */ .minileiste { display: flex; } .nav { position: fixed; z-index: 120; width: 232px; transform: translateX(-100%); transition: transform .18s ease-out; } .nav-offen .nav { transform: none; box-shadow: 0 0 40px rgba(15,23,42,.18); } .ist-schmal .nav { width: 232px; } .ist-schmal .nav__name, .ist-schmal .nav__gruppe span, .ist-schmal .nav__text, .ist-schmal .nav__zahl, .ist-schmal .nav__org, .ist-schmal .nav__fusslabel, .ist-schmal .nav__fuss .btn { display: revert; } .ist-schmal .nav__eintrag { justify-content: flex-start; padding: 7px 8px; } /* Auch der Schmuck der Symbolspalte faellt weg: Trennstrich statt Gruppentitel und Punkt statt Zahl sind Ersatz fuer Fehlendes — hier steht beides wieder da, und beides zugleich waere doppelt. */ .ist-schmal .nav__gruppe { padding: 14px 8px 5px; } .ist-schmal .nav__gruppe::after, .ist-schmal .nav__eintrag.hat-offenes::after { display: none; } .ist-schmal .nav__fuss { text-align: left; padding: 12px 14px; } .ist-schmal .nav__fussreihe { justify-content: flex-start; margin-top: 8px; } .nav-offen .nav__schatten { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 110; } .buehne .view { padding: 18px 16px 40px; } } @media (prefers-reduced-motion: reduce) { .nav { transition: none; } } .view { padding: 22px 28px 60px; } /* --- Filterleiste mit Chips ------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text-mut); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; } .chip:hover { color: var(--text); border-color: var(--text-mut2); } .chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .chip__zahl { font-family: var(--mono); font-size: 10px; font-weight: 700; background: var(--surface2); color: var(--text-mut2); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; } .chip.is-active .chip__zahl { background: rgba(255,255,255,.25); color: #fff; } .chips__spacer { flex: 1; } .suche { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; font: inherit; font-size: 13px; width: 230px; background: var(--surface); } .suche:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); } /* --- Tabellen --------------------------------------------------------- */ .panel { border-radius: var(--radius); } .tbl th { font-size: 10.5px; letter-spacing: .07em; color: var(--text-mut2); padding-top: 12px; padding-bottom: 12px; } .tbl td { padding: 13px 10px; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl code { font-family: var(--mono); font-weight: 700; letter-spacing: -.02em; } .tbl .betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl .betrag--klein { font-weight: 400; color: var(--text-mut); font-size: 13px; } .tbl .ueberfaellig { color: var(--danger); font-weight: 600; } /* --- Statusmarken ----------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 10px; } .status--entwurf { background: #f1f5f9; color: #64748b; } .status--offen { background: #fef3c7; color: #b45309; } .status--teilbezahlt { background: #dbeafe; color: #1d4ed8; } .status--bezahlt { background: #d1fae5; color: var(--ok); } /* --- Aktions-Icons in der Zeile --------------------------------------- */ .zeilen-aktionen { display: flex; gap: 4px; justify-content: flex-end; } .iknopf { width: 30px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-mut); cursor: pointer; padding: 0; transition: all .12s; } .iknopf:hover { background: var(--surface2); color: var(--text); border-color: var(--text-mut2); } .iknopf--gefahr:hover { background: #fef2f2; color: var(--danger); border-color: #fca5a5; } .iknopf .btn__icon { margin: 0; opacity: 1; } /* --- Karten ----------------------------------------------------------- */ .card { border-radius: var(--radius); padding: 15px 17px; } .card__label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mut2); font-weight: 600; } .card__value { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; } .btn { border-radius: var(--radius-sm); } .btn--primary { box-shadow: 0 1px 2px rgba(37,99,235,.25); } /* --- Schnellzugriff und Mahnblock ------------------------------------- */ .schnellzugriff { display: flex; flex-wrap: wrap; gap: 10px; } .panel--mahnen { border-color: #fecaca; background: #fffbfb; } .panel--mahnen h2 { color: var(--danger); } .panel--mahnen .tbl td { border-bottom-color: #fee2e2; } /* --- Bedienelemente, einheitlich ------------------------------------ Vorher gab es fuenf Select-Regeln (.field, .panel__aktionen, .tbl--pos, .tbl, .filterleiste) mit drei verschiedenen Eckenradien und jeweils eigener Fokus-Behandlung — teils gar keiner. Auf einer Seite fiel das nicht auf, im Durchklicken schon. Hier steht ab jetzt EINE Regel fuer das Aussehen; die Regeln oben bestimmen nur noch die Groesse (Innenabstand, Schriftgroesse). Wer ein neues Auswahlfeld einbaut, bekommt das richtige Aussehen geschenkt und muss nichts kopieren. Der Pfeil ist ein eigenes SVG statt des Browser-Pfeils: Safari zeichnet zwei Dreiecke uebereinander, Chrome eines, Firefox ein drittes. Ein Buchhaltungsprogramm, das auf jedem Rechner anders aussieht, wirkt unfertig. Das Zeichen ist derselbe Haken wie in src/ui/icons.js. */ select { appearance: none; -webkit-appearance: none; /* Chevron nach unten, Strichfarbe --text-mut (#6b7280). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px; /* Platz fuer den Pfeil, damit kein langer Eintrag darunter laeuft. */ padding-right: 30px; cursor: pointer; } /* --- Modernes Auswahlfeld (src/ui/auswahl.js) ------------------------ Der Knopf ersetzt das native Feld nur OPTISCH und muss deshalb Pixel fuer Pixel so aussehen wie es — sonst springt die Zeile, sobald ein Feld aufgewertet ist und das daneben (noch) nicht. Alle Masse kommen aus denselben Regeln wie fuer `select`; hier steht nur, was ein Knopf zusaetzlich braucht (Textausrichtung, Abschneiden, kein Fettdruck). Das native Feld bleibt im Dokument — es haelt den Wert. Es wird nicht mit `display:none` entfernt, damit Formular-Semantik und ein etwaiges `required` erhalten bleiben. */ .auswahl { position: relative; display: block; } .auswahl > select[data-auswahl="auf"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; } .auswahl__knopf { width: 100%; font: inherit; text-align: left; font-weight: 400; color: var(--text); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; /* Ein langer Eintrag darf die Spalte nicht sprengen. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Derselbe Pfeil wie am nativen Feld, aus derselben Quelle. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px; padding-left: 11px; padding-right: 30px; transition: border-color .12s; } .auswahl__knopf.is-leer { color: var(--text-mut); } .auswahl__knopf:hover:not(:disabled) { border-color: #cbd2de; } .auswahl__knopf:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); } .auswahl.is-offen .auswahl__knopf { border-color: var(--primary); } .auswahl__knopf:disabled { cursor: not-allowed; opacity: .6; background-image: none; background-color: var(--bg); color: var(--text-mut); } /* Groessen: genau die Stufen, die auch fuer `select` gelten. */ .field .auswahl__knopf { height: var(--h-feld); } .panel__aktionen .auswahl__knopf, .filterleiste .auswahl__knopf { height: var(--h-leiste); } .tbl--pos .auswahl__knopf, .tbl .auswahl__knopf { height: var(--h-zeile); } .beleg-kopf .field .auswahl__knopf { height: 36px; } /* Die Liste haengt am Ansichtsfenster, nicht im Fluss — sonst schneiden Tabellen und Karten mit eigenem Ueberlauf sie ab. */ .auswahl__panel { position: fixed; z-index: 400; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; /* Zwei Schatten: ein weicher fuer die Hoehe, ein harter Haarrand fuer die Kante. Ein einzelner grosser Schatten wirkt wattig. */ box-shadow: 0 12px 32px rgba(15, 23, 42, .13), 0 0 0 1px rgba(15, 23, 42, .03); animation: auswahlAuf .12s ease-out; } @keyframes auswahlAuf { from { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .auswahl__panel { animation: none; } } .auswahl__suchzeile { padding: 8px; border-bottom: 1px solid var(--border); background: var(--bg); } .auswahl__suche { width: 100%; font: inherit; font-size: 13px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .auswahl__suche:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; } .auswahl__liste { max-height: 320px; overflow-y: auto; padding: 5px; } .auswahl__eintrag { padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Der aktive Eintrag ist der unter Zeiger ODER Pfeiltaste — eine einzige Hervorhebung fuer beide Wege, sonst leuchten zwei Zeilen gleichzeitig. */ .auswahl__eintrag.is-aktiv { background: rgba(59, 130, 246, .09); } /* Der gewaehlte traegt keine Flaeche, sondern Gewicht und einen Haken: auf einer Liste aus weissen Zeilen ist das ruhiger und bleibt auch dann erkennbar, wenn er gerade der aktive ist. */ .auswahl__eintrag.is-gewaehlt { font-weight: 600; padding-right: 26px; position: relative; } .auswahl__eintrag.is-gewaehlt::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 10px; margin-top: -6px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); } .auswahl__eintrag.is-aus { color: var(--text-mut2); cursor: not-allowed; } .auswahl__leer { padding: 14px 10px; color: var(--text-mut); font-size: 13px; text-align: center; } /* Mehrfachauswahl und aufgeklappte Listen haben keinen Pfeil. */ select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 11px; cursor: auto; } /* Ein Fokusrahmen fuer alle drei Feldarten. Vorher hatte ihn nur `.field input` — wer sich mit der Tabulatortaste durch ein Formular bewegte, verlor beim ersten Auswahlfeld die Spur. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); } /* Maus-Klick auf ein Auswahlfeld: nur der Rahmen faerbt sich, kein dicker Ring — das ist der „dezente" Teil. */ select:focus:not(:focus-visible) { outline: none; border-color: var(--primary); } /* Zeigefinger-Rueckmeldung, gleich stark wie bei den Knoepfen. */ select:hover:not(:disabled), input:hover:not(:disabled):not([readonly]) { border-color: #cbd2de; } select:disabled { cursor: not-allowed; opacity: .6; background-image: none; } /* Betraege und Belegnummern ueberall gleich ausrichten: gleich breite Ziffern, damit Spalten untereinander vergleichbar sind. */ .num, .card__value, .summen__zeile span:last-child { font-variant-numeric: tabular-nums; } /* Einheitliche Hoehen. Gemessen war vorher: Suchfeld 36, Auswahlfeld 34, Knopf 32 — in EINER Leiste nebeneinander. Jede Zahl fuer sich ist vertretbar, zusammen ergeben sie eine Treppe. Ursache war, dass die Hoehe aus Innenabstand plus Schriftgroesse entstand und beide je Bauteil anders waren. Deshalb jetzt drei Stufen mit fester Hoehe. Der Innenabstand oben und unten faellt weg; senkrecht zentriert der Browser selbst. Textfelder (textarea) bleiben aussen vor, die duerfen wachsen. */ :root { --h-feld: 40px; --h-leiste: 34px; --h-zeile: 30px; } .field input:not([type="checkbox"]):not([type="radio"]), .field select { height: var(--h-feld); padding-block: 0; } .panel__aktionen input, .panel__aktionen select, .panel__aktionen .btn, .filterleiste input:not([type="checkbox"]), .filterleiste select { height: var(--h-leiste); padding-block: 0; } .tbl--pos input, .tbl--pos select, .tbl select { height: var(--h-zeile); padding-block: 0; } /* Der Kalenderknopf im Datumsfeld ist tiefschwarz und zieht mehr Aufmerksamkeit auf sich als das Datum daneben. Etwas zurueckgenommen passt er zu den grauen Pfeilen der Auswahlfelder. */ input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; } input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .75; } /* ===================================================================== Optik "Ruhige Linie" (15.08.2026) ===================================================================== Vorgeschichte: Zuerst kam ein Entwurf von v0 mit weichen Karten, Schatten und farbigen Akzentstreifen. Er war moderner als der Stand davor, aber unruhig — und vor allem nicht kompakt: bis die Rechnungsliste anfing, waren 1046 Pixel verbraucht. Diese Fassung dreht das um. Gemessen an derselben Stelle: 758 Pixel. Erreicht ohne die Schrift kleiner zu machen, sondern durch Weglassen — keine Schatten, keine Kacheln, keine grossen Rundungen, kein grauer Hintergrund. Getrennt wird durch duenne Linien und Weissraum. Die Regel dahinter: Farbe traegt Bedeutung, nicht Schmuck. Rot heisst ueberfaellig, gruen heisst bezahlt, das eine Blau gehoert der Haupthandlung. Alles andere ist Grau. Die Bloecke davor bleiben unveraendert stehen; hier wird nur nachgeschaerft, damit keine View angefasst werden muss. ===================================================================== */ :root { --bg: #ffffff; --surface: #ffffff; --surface2: #fafafa; --border: #e6e8ec; --radius: 6px; --radius-sm: 5px; --shadow-1: none; --shadow-2: 0 8px 24px rgba(16,24,40,.10); --h-feld: 34px; --h-leiste: 30px; --h-zeile: 28px; } body { font-size: 14px; background: var(--bg); } /* Rahmen des Inhalts */ /* `margin: 0 auto` nicht vergessen: ohne das begrenzt max-width zwar die Breite, der Inhalt klebt aber am linken Rand und rechts bleibt auf einem breiten Schirm die halbe Flaeche leer. Genau das war nach dem Umbau live zu sehen. */ .app { max-width: 1240px; margin: 0 auto; padding: 0 22px 40px; } .view { padding: 0; } /* Flaechen: Linie statt Karte */ .panel { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 0 6px; margin-bottom: 6px; } .panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); font-weight: 600; } /* Kennzahlen: eine Zeile, kein Kartenbeet */ .cards { gap: 0; grid-template-columns: repeat(4, 1fr); margin-bottom: 4px; border-top: 1px solid var(--border); } .card { background: transparent; border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 14px 18px 14px 0; } .card:last-child { border-right: 0; } .card::before { display: none; } /* die farbigen Streifen entfallen */ .card__label { font-size: 11px; } .card__value { font-size: 20px; color: var(--text); } .cards .card:nth-child(2) .card__value { color: var(--danger); } .cards .card:nth-child(3) .card__value { color: var(--text); } /* Mahnblock: nur die Ueberschrift ist rot */ .panel--mahnen { border: 0; border-top: 1px solid var(--border); background: transparent; } .panel--mahnen::before { display: none; } /* Tabellen enger */ .tbl { font-size: 13px; } .tbl th { padding: 6px 8px; font-size: 10.5px; } .tbl td { padding: 7px 8px; } .tbl tbody tr:hover { background: var(--surface2); } /* Statusmarken: Punkt und Wort, kein farbiger Grund. Jede Variante einzeln zuruecksetzen statt mit !important — die Ausnahmeregel wuerde spaeter jeden legitimen Sonderfall mitreissen, und irgendwann schreibt dann jemand ein zweites !important dagegen. */ .status { padding: 0; font-weight: 500; font-size: 12px; background: transparent; color: var(--text-mut); } .status--entwurf, .status--offen, .status--teilbezahlt, .status--bezahlt, .status--ueberfaellig, .status--storniert, .status--korrektur, .status--abgelaufen, .status--umgewandelt { background: transparent; } .status--entwurf { color: var(--text-mut); } .status--offen { color: #92500a; } .status--teilbezahlt { color: #1d4ed8; } .status--bezahlt { color: #056a4a; } .status--ueberfaellig { color: #a11414; } .status--storniert { color: var(--text-mut2); } .status--korrektur { color: #4338ca; } /* Regieberichte. Dieselbe Logik wie oben: der Zustand wird ueber die Farbe des Wortes gezeigt, nicht ueber einen bunten Kasten. */ .status--bestaetigt { background: transparent; color: #056a4a; } /* Zwei Zustaende nebeneinander („Offen" + „verspaetet") brauchen Luft, sonst liest sich das als EIN Wort. Die Statusbadges haben seit dem flachen Stil kein Padding mehr, das den Abstand nebenbei erledigt. */ .status + .status { margin-left: 8px; } .status--abgerechnet { background: transparent; color: var(--text-mut2); } tr.is-gewaehlt > td { background: #f5f7fb; } /* Chips flacher */ .chip { height: 28px; font-size: 12.5px; padding: 0 11px; border-radius: 4px; } .chip.is-active { background: var(--text); border-color: var(--text); color: #fff; } .chip.is-active .chip__zahl { background: rgba(255,255,255,.22); color: #fff; } .chip__zahl { background: transparent; color: var(--text-mut2); font-size: 11px; padding: 0; } /* Knoepfe schmaler */ .btn { height: var(--h-leiste); padding: 0 12px; font-size: 13px; font-weight: 500; } .btn--sm { height: 26px; font-size: 12px; } .iknopf { width: 26px; height: 26px; border-color: transparent; } .iknopf:hover { border-color: var(--border); } .page-head { margin-bottom: 12px; } .page-head__title { font-size: 17px; } .summen { width: 300px; } .summen__zeile { padding: 5px 0; } .summen__zeile--gesamt { font-size: 15px; } .balken { height: 6px; } /* --- Bausteine der Uebersicht --------------------------------------- Wenige und im Stil der ruhigen Linie: keine Kacheln, keine Schatten, Trennung durch Linien. */ .uebersicht-oben { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .karte-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); font-weight: 600; margin-bottom: 8px; } /* Kartentitel mit einer Handlung rechts daneben (z.B. „+ Neuer Kunde"). Der Knopf muss aus der Versalschrift des Titels ausbrechen, sonst liest er sich als Teil der Ueberschrift statt als Knopf. */ .karte-titel--reihe { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Negativer Aussenabstand, damit der 26 px hohe Knopf die Titelzeile nicht hoeher macht — sonst stuende „Empfaenger" tiefer als „Belegdaten" daneben, und die beiden Spalten liefen auseinander. */ .karte-titel--reihe .btn { text-transform: none; letter-spacing: 0; font-weight: 500; margin-block: -7px; } /* Aufgabenliste. Die Zahl steht links und rechtsbuendig, weil man die Spalte senkrecht abtastet — dafuer muessen die Ziffern uebereinander stehen. Jede Zeile ist ein Knopf, keine Zeile mit einem Knopf darin: die ganze Breite ist anklickbar. */ .aufgaben { display: grid; } .aufgabe { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 4px 9px 0; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; } .aufgabe:last-child { border-bottom: 0; } .aufgabe:hover { background: var(--surface2); } .aufgabe__zahl { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .aufgabe__zahl--null { color: var(--text-mut2); font-weight: 400; } .aufgabe__text { flex: 1; } .aufgabe__frist { color: var(--text-mut); font-size: 12.5px; } .aufgabe--dringend .aufgabe__zahl { color: var(--danger); } .aufgabe__pfeil { color: var(--text-mut2); font-size: 12px; } /* Frist */ .frist { display: flex; align-items: baseline; gap: 10px; } .frist__zahl { font-size: 28px; font-weight: 700; letter-spacing: -.02em; } .frist__zahl--klein { font-size: 21px; } .frist__datum { color: var(--text-mut); font-size: 13px; } /* Zwei Diagramme nebeneinander */ .diagramme { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; } /* Saeulen: Umsatz je Monat */ .saeulen { display: flex; align-items: flex-end; gap: 6px; height: 128px; border-bottom: 1px solid var(--border); } .saeule { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .saeule i { display: block; background: #9ec5f4; border-radius: 4px 4px 0 0; } .saeule--jetzt i { background: #2a78d6; } .saeulen-achse { display: flex; gap: 6px; margin-top: 5px; } .saeulen-achse span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-mut2); } .saeulen-achse span.ist { color: var(--text); font-weight: 600; } /* Altersstruktur der offenen Posten */ .alter { display: grid; gap: 7px; } .alter__zeile { display: grid; grid-template-columns: 92px 1fr max-content; gap: 10px; align-items: center; font-size: 12.5px; } .alter__label { color: var(--text-mut); white-space: nowrap; } .alter__spur { display: block; } .alter__band { display: block; height: 14px; border-radius: 3px; min-width: 2px; } .alter__wert { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Auf- und Abwaerts-Vergleiche */ .delta { font-size: 12px; } .delta--auf { color: #056a4a; } .delta--ab { color: #a11414; } /* Stammdaten in der Kundenakte: zweispaltig, damit die sieben Zeilen nicht als schmale Saeule dastehen und der halbe Bildschirm leer bleibt. */ .deflist--breit { grid-template-columns: max-content 1fr max-content 1fr; gap: 9px 20px; } @media (max-width: 900px) { .deflist--breit { grid-template-columns: max-content 1fr; } } /* --- Belegmaske ----------------------------------------------------- Vorher lagen alle Kopffelder in EINEM `.grid2`. Das ist ein auto-fit-Raster: auf einem breiten Schirm wurden daraus fuenf Spalten, und „Faellig am" stand allein in einer sechsten Zeile — ein Umbruch, der aussieht wie ein Fehler, weil er einer ist. Jetzt zwei Bloecke mit klarer Aufgabe: links wer, rechts was. */ .beleg-kopf { display: grid; grid-template-columns: minmax(230px, 1fr) 2fr; gap: 30px; align-items: start; margin-bottom: 4px; } /* Genau drei Spalten, nicht auto-fit. Mit auto-fit wurden es vier, das Feld „USt-Behandlung" schnitt seinen laengsten Eintrag ab, und die Waehrung landete allein in einer zweiten Zeile. Drei ergibt zwei volle Zeilen: Belegart/Datum/Faellig und USt/Waehrung/Standort. */ .feldraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; } @media (max-width: 1100px) { .feldraster { grid-template-columns: repeat(2, 1fr); } } .beleg-kopf .field { margin-bottom: 12px; } .kundeninfo { font-size: 12.5px; color: var(--text-mut); line-height: 1.55; border-left: 2px solid var(--border); padding-left: 10px; margin-top: -4px; } /* Einleitungs- und Schlusstext: eingeklappt, weil sie aus den Standardtexten kommen und selten geaendert werden. */ .texte { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; } .texte > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-mut); list-style: none; display: flex; align-items: center; gap: 7px; } .texte > summary::-webkit-details-marker { display: none; } .texte > summary::before { content: "›"; display: inline-block; transition: transform .12s; color: var(--text-mut2); font-size: 14px; } .texte[open] > summary::before { transform: rotate(90deg); } .texte > summary:hover { color: var(--text); } .texte__inhalt { padding-top: 12px; } /* --- Summenblock als dunkle Karte ----------------------------------- Aus der Vorlage uebernommen und der Grund, warum sie modern wirkt: Auf einer Seite aus Weiss und duennen Linien ist EINE dunkle Flaeche das staerkste Mittel, das es gibt — und der Betrag ist die Zahl, auf die am Ende alles zulaeuft. Genau deshalb bleibt sie die einzige. Zwei dunkle Karten heben sich gegenseitig auf. */ .summen { background: var(--marke); color: #fff; border-radius: var(--radius); padding: 16px 18px; width: 340px; margin-left: auto; margin-top: 20px; } .summen__zeile { padding: 5px 0; color: rgba(255,255,255,.72); } .summen__zeile span:last-child { color: #fff; font-variant-numeric: tabular-nums; } .summen__zeile--abzug span:last-child { color: #fca5a5; } .summen__zeile--gesamt { margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; border-top: 1px solid rgba(255,255,255,.18); color: #fff; } .summen__zeile--gesamt span:last-child { letter-spacing: -.01em; } .summen__hinweis { margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.6); } /* --- Seitenkopf mit Metazeile ---------------------------------------- */ .page-head__links { min-width: 0; } .page-head__unter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--text-mut); } .page-head__punkt { color: var(--text-mut2); } /* --- Belegmaske: kompakter ------------------------------------------ Die Maske hat mehr Felder als jede andere Seite. Bei 40 Pixel Hoehe und 12 Pixel Abstand kostet sie fast zwei Bildschirme, bevor die erste Position sichtbar ist. Hier gilt deshalb eine Stufe kleiner — nur hier, damit die uebrigen Masken luftig bleiben. */ .beleg-kopf .field, .beleg-kopf .field input, .beleg-kopf .field select { --h-feld: 36px; } .beleg-kopf .field { margin-bottom: 10px; } .beleg-kopf .field > span { font-size: 12px; margin-bottom: 4px; } .beleg-kopf .field__hint { font-size: 11.5px; margin-top: 2px; } .beleg-kopf + .field { margin-top: 4px; } /* --- Arbeitsflaeche der Belegmasken ---------------------------------- In der ruhigen Linie ist alles weiss auf weiss. Fuer Listen ist das richtig — sie sind Dokumente. Eine Belegmaske ist aber eine Werkbank: dort will man sehen, worauf man arbeitet. Deshalb bekommen genau die Bearbeitungsmasken einen leicht grauen Grund, und die Bloecke darauf werden wieder zu weissen Flaechen mit Haarrand. Das ist derselbe Trick wie ein Blatt Papier auf einem Schreibtisch: nicht der Rahmen macht das Blatt sichtbar, sondern der Unterschied zur Unterlage. Gesteuert ueber `body[data-view]`, gesetzt vom Router. */ body[data-view="rechnung"], body[data-view="angebot"], body[data-view="abo"] { background: #f4f5f7; } body[data-view="rechnung"] .panel, body[data-view="angebot"] .panel, body[data-view="abo"] .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; } /* Die dunkle Summenkarte behaelt ihre Farbe — sie ist die Ausnahme. */ body[data-view="rechnung"] .summen { border: 0; } /* Der Kopf der Maske bleibt auf dem grauen Grund stehen, ohne Kasten: Titel und Knopfleiste sind keine Arbeitsflaeche. */ body[data-view="rechnung"] .page-head, body[data-view="angebot"] .page-head, body[data-view="abo"] .page-head { margin-bottom: 16px; } /* --- Knoepfe und Chips: eine starke Farbe, nicht drei ---------------- Vorher hatte die Oberflaeche drei kraeftige Toene nebeneinander: einen hellblauen Hauptknopf, einen fast schwarzen aktiven Filter-Chip und die dunkelblaue Summenkarte. Drei starke Toene heben sich gegenseitig auf — das Auge weiss nicht mehr, was wichtig ist. Jetzt gibt es genau EINEN: das Dunkelblau der Marke. Es traegt den Hauptknopf, den aktiven Chip und die Summenkarte. Das Hellblau bleibt fuer Verweise und den Tastaturfokus — also fuer Dinge, die man anklickt, nicht fuer Flaechen. */ .btn--primary { background: var(--marke); border-color: var(--marke); color: #fff; box-shadow: none; font-weight: 500; } .btn--primary:hover:not(:disabled) { background: var(--marke-d); border-color: var(--marke-d); } .btn { font-weight: 500; } /* Filterchips als ruhige Leiste: die inaktiven ohne Rahmen, nur Text. Ein Rahmen um jeden Chip macht aus fuenf Filtern fuenf Kaesten, und die Leiste wiegt dann mehr als die Tabelle darunter. */ .chip { border-color: transparent; background: transparent; color: var(--text-mut); font-weight: 500; padding: 0 12px; } .chip:hover { background: var(--surface2); border-color: transparent; color: var(--text); } .chip.is-active { background: var(--marke); border-color: var(--marke); color: #fff; font-weight: 600; } .chip__zahl { background: transparent; color: var(--text-mut2); font-family: inherit; font-size: 12px; font-weight: 500; padding: 0; } .chip.is-active .chip__zahl { background: transparent; color: rgba(255,255,255,.7); } /* Kleine Bildschirme — MUSS am Ende der Datei stehen. Beim ersten Anlauf stand dieser Block dort, wo frueher die alte Seitenleisten-Regel lag: vor den neuen Bauteilen. Bei gleicher Spezifitaet gewinnt die spaetere Regel, also hat er nichts bewirkt. Der Fehler war im Browser sichtbar, im Quelltext nicht. Ausgangspunkt: Die Regeln zeigten bis 15.08.2026 auf .layout und .sidenav — beides gab es seit dem Redesign nicht mehr, die Seite war auf dem Handy also unbehandelt. Ein Beispiel dafuer, dass ein Umbau die Sonderfaelle mitnehmen muss, nicht nur den Normalfall. */ @media (max-width: 860px) { .app { padding: 12px 10px 40px; } .buehne .view { padding: 12px 12px 40px; } /* Organisation und Rolle sind auf dem Handy Ballast — wer dort arbeitet, hat ohnehin nur eine. Der Abmelden-Knopf bleibt. */ .nav__fusslabel, .nav__org { display: none; } .page-head { flex-wrap: wrap; gap: 10px; } .page-head__actions { margin-left: 0; width: 100%; } .page-head__actions .btn { width: 100%; } /* Zwei Kennzahlen nebeneinander. Die senkrechte Trennlinie der zweiten Spalte laege sonst genau am Bildschirmrand und sieht dort aus wie ein abgeschnittener Inhalt. */ .uebersicht-oben, .diagramme, .beleg-kopf { grid-template-columns: 1fr; gap: 22px; } .feldraster { grid-template-columns: 1fr 1fr; } .summen { width: 100%; } .saeulen { height: 100px; } .cards { grid-template-columns: 1fr 1fr; gap: 0; } .cards .card { padding: 12px 12px 12px 0; } .cards .card:nth-child(2n) { border-right: 0; } .cards .card:nth-child(-n+2) { border-bottom: 1px solid var(--border); } .card__value { font-size: 19px; } .chips { gap: 6px; } .chips__spacer { display: none; } .suche { width: 100%; } /* Tabellen waagrecht schiebbar statt gequetscht: eine Rechnungszeile mit acht Spalten wird auf 390 Pixeln nicht lesbarer, wenn man sie umbricht. */ .panel { overflow-x: auto; } .tbl { min-width: 640px; } .filterleiste { gap: 10px; } .filterleiste label { flex: 1 1 140px; } .schnellzugriff .btn { flex: 1 1 46%; } } /* --- Logo in den Einstellungen --------------------------------------- Die Vorschau hat eine feste Hoehe und ein Karomuster im Hintergrund: ein PNG mit transparentem Rand sieht sonst je nach Bildschirm aus wie ein weisser Kasten, und man merkt nicht, wo das Logo aufhoert. */ .logo-reihe { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .logo-vorschau { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 220px; height: 90px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background-color: #fff; background-image: linear-gradient(45deg, #f1f3f6 25%, transparent 25%, transparent 75%, #f1f3f6 75%), linear-gradient(45deg, #f1f3f6 25%, transparent 25%, transparent 75%, #f1f3f6 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; } .logo-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-vorschau .leer { font-size: 13px; text-align: center; } .logo-aktionen { flex: 1 1 240px; min-width: 240px; } .logo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .logo-aktionen .field__hint { margin-top: 6px; max-width: 46ch; } /* --- Kundenakte: kompakte Kennzahlen, eine Belegtabelle --------------- Die vier Kacheln sind hier Beiwerk, nicht die Hauptsache — die steht in der Tabelle darunter. Also leiser als auf der Übersicht. */ .cards--kompakt { margin-bottom: 14px; } .cards--kompakt .card { padding: 11px 14px; } .cards--kompakt .card__value { font-size: 17px; } .cards--kompakt .card__unter { font-size: 11px; } /* Nummern sehen aus wie Links, weil die Zeile eine ist. */ .tbl__link { border-bottom: 1px solid transparent; } .tbl--klickbar tbody tr:hover .tbl__link { border-bottom-color: currentColor; } /* Überfällige Zeile: nur ein Strich am linken Rand. Die ganze Zeile einzufärben macht die Tabelle unruhig, sobald mehr als zwei rot sind. */ .tbl tbody tr.ist-ueberfaellig td:first-child { box-shadow: inset 2px 0 0 var(--danger); } .card__value.ueberfaellig { color: var(--danger); } /* Markenlogo statt Kuerzel: dasselbe Quadrat, nur mit Bild darin. */ .nav__logo--bild { background: transparent; padding: 2px; } .nav__logo--bild img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ===================================================================== Seitenleiste in den Markenfarben --------------------------------------------------------------------- Wie bei Bilanx Beleg: die Leiste traegt den Markenton als Flaeche, der Inhalt bleibt weiss. Das hat einen praktischen Nutzen ueber die Optik hinaus — Navigation und Arbeitsflaeche sind auf den ersten Blick zwei verschiedene Dinge, und die Marke steht einmal da statt in jedem Knopf. Die Werte sind Weiss mit Deckkraft statt fester Farben: so traegt der Ton, und ein Markenwechsel zieht die ganze Leiste mit. ===================================================================== */ .nav { background: var(--marke); border-right: 0; color: rgba(255, 255, 255, .82); } .nav__kopf { display: block; padding: 20px 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, .13); position: relative; } /* Die Wortmarke und darunter das Produktwort — an genau der Stelle, an der im Original „RT Buchhaltung GmbH" steht: buendig mit dem B von BILANX, gesperrt, klein. Deshalb traegt .nav__marke die Breite des Bildes, und die 27,1 % sind aus der Logodatei gemessen, nicht geraten. Die Zeile aus dem Original ist weggeschnitten: bei einer fremden Kanzlei staende dort sonst der falsche Name. */ .nav__marke { position: relative; display: block; width: 100%; max-width: 172px; } .nav__wortmarke { display: block; width: 100%; height: auto; } /* Das Produktwort liegt IM Zeichen, nicht darunter: der senkrechte Strich laeuft im Original unter der Linie weiter, und rechts davon steht die Zeile. Die 27,1 % und die 79 % sind aus der Logodatei gemessen. */ .nav__produkt { position: absolute; left: 27.1%; top: 79%; margin: 0; font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; } /* Das Zeichen fuer die schmale Leiste liegt schon im Markup und wartet. */ .nav__logo--rail { display: none; } .nav__kopf .nav__klapp { position: absolute; top: 18px; right: 12px; margin-left: 0; } .nav__klapp { color: rgba(255, 255, 255, .55); } .nav__klapp:hover { background: rgba(255, 255, 255, .12); color: #fff; } .nav__gruppe { color: rgba(255, 255, 255, .45); } .nav__eintrag { color: rgba(255, 255, 255, .80); } .nav__eintrag:hover { background: rgba(255, 255, 255, .09); color: #fff; } .nav__eintrag.is-aktiv { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600; } .nav__eintrag:focus-visible { outline: 2px solid rgba(255, 255, 255, .65); outline-offset: -2px; } .nav__zahl { background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .92); } .nav__eintrag.is-aktiv .nav__zahl { background: rgba(255, 255, 255, .24); color: #fff; } /* Der Mahnzaehler bleibt rot — er ist eine Warnung, keine Verzierung. */ .nav__zahl--warn { background: #fca5a5; color: #7f1d1d; } .nav__fuss { border-top: 1px solid rgba(255, 255, 255, .13); } .nav__fusslabel, .nav__rolle { color: rgba(255, 255, 255, .45); } .nav__org { color: #fff; } .nav__fuss .btn--ghost { color: rgba(255, 255, 255, .72); } .nav__fuss .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; } /* Schmal gestellt: die Wortmarke weicht dem Zeichen. */ .ist-schmal .nav__marke { display: none; } .ist-schmal .nav__logo--rail { display: grid; } .ist-schmal .nav__kopf { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; } .ist-schmal .nav__kopf .nav__klapp { position: static; } .ist-schmal .nav__gruppe::after { background: rgba(255, 255, 255, .16); } .nav__schatten { background: rgba(16, 24, 40, .45); } /* Die Fusszeile darf umbrechen: mit Testmodus-Abzeichen, Rolle und Abmelden passen drei Dinge nicht in 190 px, und der Abmeldeknopf war angeschnitten. */ .nav__fussreihe { flex-wrap: wrap; row-gap: 6px; } .nav__fussreihe .btn { margin-left: auto; } /* In der Symbolspalte ist fuer Abzeichen und Rolle kein Platz — sie standen bisher halb ueber dem Rand. Sichtbar bleibt, was dort eine Funktion hat. */ .ist-schmal .nav__fussreihe { display: none; } .ist-schmal .nav__fuss { padding: 10px 8px; } /* ===================================================================== Anmeldeseite — dieselbe Handschrift wie Bilanx Beleg --------------------------------------------------------------------- Eine Karte auf einer ruhigen Flaeche, das Zeichen oben, sonst nichts. Hier entscheidet sich der erste Eindruck, und der soll bei allen Produkten der Familie derselbe sein. ===================================================================== */ .auth-page { background: radial-gradient(120% 90% at 50% 0%, #fdfefe 0%, rgba(253,254,254,0) 60%), linear-gradient(170deg, #f7f9fb 0%, #eef2f7 55%, #e6ecf3 100%); } .auth-card { max-width: 392px; padding: 34px 34px 28px; border: 1px solid rgba(16, 24, 40, .06); border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.08); } .auth__marke { position: relative; width: 176px; margin: 2px auto 22px; } .auth__wortmarke { display: block; width: 100%; height: auto; } .auth__produkt { position: absolute; left: 27.1%; top: 79%; margin: 0; font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; font-weight: 500; color: rgba(44, 78, 119, .62); white-space: nowrap; } .auth-card__titel { margin: 0 0 22px; font-size: 20px; font-weight: 700; text-align: center; letter-spacing: -.01em; } .auth-card .field { margin-bottom: 14px; } .auth-card .btn--block { margin-top: 6px; height: 42px; font-size: 14.5px; } /* Die Verweise sind Beiwerk, kein zweiter Knopf: eine Haarlinie darueber, damit sie nicht mit dem Anmelden-Knopf um Aufmerksamkeit streiten. */ .auth-card__links { margin-top: 20px; padding-top: 16px; align-items: center; border-top: 1px solid var(--border); font-size: 13px; } .auth-card__links a { color: var(--text-mut); } .auth-card__links a:hover { color: var(--primary-d); text-decoration: underline; } /* ===================================================================== Übersicht — leiser --------------------------------------------------------------------- Vorher trug die Seite vier gesättigte Blautöne, drei Rottöne und lauter fette Zahlen. Auf einer Startseite, die man jeden Morgen aufschlägt, ist das anstrengend: wenn alles laut ist, führt nichts mehr. Jetzt führen die Zahlen, die Flächen sind Abstufungen EINES Tons, und Rot bleibt der Ausnahme vorbehalten — überfällig. ===================================================================== */ .cards .card__value { font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .cards .card__label { color: var(--text-mut2); } .card__value.ueberfaellig { color: var(--danger); font-weight: 600; } .frist__zahl { font-size: 25px; font-weight: 600; } .frist__zahl--klein { font-size: 19px; } .aufgabe__zahl { font-weight: 600; } .aufgabe { padding-block: 11px; } /* Säulen: schmaler, ruhiger, und der laufende Monat ist der einzige, der den vollen Markenton bekommt. */ .saeulen { gap: 10px; } .saeule i { background: var(--marke-t1); border-radius: 3px 3px 0 0; } .saeule--jetzt i { background: var(--marke); } .saeulen-achse { gap: 10px; } .alter__band { height: 10px; border-radius: 2px; } .alter__zeile { font-size: 13px; } .uebersicht-oben { gap: 40px; } .diagramme { gap: 40px; } /* Die Statuszeile ist die Warnung — der Betrag daneben muss sie nicht wiederholen. Er bleibt rot, aber nicht fett obendrein. */ .tbl .betrag.ueberfaellig { font-weight: 600; } /* --- Fehlendes Pflichtfeld ------------------------------------------- Rot am Feld, Meldung darunter, und die Maske springt hin. Ein Hinweis am Bildschirmrand sagt zwar, WAS fehlt, aber nicht WO — und er ist weg, bevor man ihn gelesen hat. */ .field.ist-fehler > input, .field.ist-fehler > select, .field.ist-fehler > textarea, .field.ist-fehler .auswahl__knopf { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); } .feld-fehler { display: block; margin-top: 5px; color: var(--danger); font-size: 12px; font-weight: 500; }