:root { color-scheme: dark; --bg: #07111f; --panel: rgba(var(--panel-tint-rgb), 0.9); --panel-2: rgba(30, 41, 59, 0.95); /* Vollständig deckende Variante von --panel-2 (gleicher Blauton, ohne Alpha) - für Flächen, bei denen NICHTS durchscheinen darf (Bug-Report: mobiles Hamburger-Menü, siehe .nav-links unten). Eigene Variable statt eines hart codierten rgb(...)-Werts direkt in .nav-links, damit ein Farbschema wie "gold" sie zusammen mit --panel-2 mit überschreiben kann (sonst hätte das Hamburger-Menü im Schwarz/Gold-Schema weiterhin bläulich statt grau gewirkt). */ --panel-2-solid: rgb(30, 41, 59); --text: #f8fafc; --muted: #94a3b8; --accent: #38bdf8; --accent-2: #8b5cf6; --danger: #fb7185; /* Nutzerwunsch: die Rot/Grün-Töne bei überfälligen/heutigen Aufgaben-Badges wirkten "sehr grell" - --success ist ein zu --danger stilistisch passendes, gedämpftes Pastellgrün (siehe .task-badge-* unten), analog zum bereits bestehenden gedämpften --danger statt eines kräftigen Basis-Rots. */ --success: #86efac; --border: rgba(148, 163, 184, 0.25); /* Basisfarbe (ohne Alpha) für die vielen einzelnen Box-Hintergründe unten (Regel-/Konnektor-/ Agenten-Karten, Kalenderzellen, ...), die alle denselben Blauton mit unterschiedlicher Deckkraft nutzen - als eigene Variable, damit ein Farbschema wie "gold" diese TÖNUNG mit überschreiben kann, nicht nur --panel/--panel-2. */ --panel-tint-rgb: 15, 23, 42; } /* * Firmen-Farbschema-Preset "Schwarz/Gold metallisch" (settings.php > Firma > Firmendaten, * settings.theme). Überschreibt NUR die oben in :root definierten Variablen - der Rest des * Stylesheets baut praktisch überall auf var(--accent) usw. auf, ein zweites komplettes * Stylesheet ist deshalb nicht nötig. body[data-theme] wird von views/header.php gesetzt. * --border und --panel-tint-rgb bewusst NEUTRAL grau (nicht golden) - Trennlinien/Rahmen und die * vielen Karten-Hintergründe sollen nicht mitfärben, nur --accent/--accent-2 tragen den Goldton. * --panel/--panel-2 mit ähnlich hoher Deckkraft wie im Standard-Theme (vorher deutlich * transparenter als Blau/Schwarz - Nutzer-Feedback: Dropdowns/Modals wirkten dadurch zu * durchsichtig). Graubasis --panel/--panel-tint-rgb (#333, Container-Hintergründe) und --panel-2 * (#444, Eingabefeld-Hintergründe) einmal nachträglich noch etwas verdunkelt (Nutzerwunsch). */ body[data-theme="gold"] { --bg: #282A2B; --panel: rgba(51, 51, 51, 0.85); --panel-2: rgba(68, 68, 68, 0.95); --panel-2-solid: rgb(68, 68, 68); --accent: #E0B054; --accent-2: #bd9548; --border: rgba(200, 200, 200, 0.25); --panel-tint-rgb: 51, 51, 51; } body[data-theme="gold"] { background: radial-gradient(circle at top, #3a3d3e 0%, var(--bg) 40%, #1a1b1c 100%); } * { box-sizing: border-box; } /* Bug-Report: das "hidden"-Attribut hat dieselbe Selektor-Spezifitaet (0,1,0) wie eine einzelne Klasse - eine spaetere Regel wie ".button-row { display: flex }" gewinnt sonst gegen die UA-Default- Regel "[hidden] { display: none }" und das Element bleibt trotz hidden sichtbar (passiert bei jedem Element, dessen Klasse selbst einen display-Wert setzt: .button-row/.stats-grid/... kombiniert mit data-collapse-toggle o.ae.). Erzwingt hidden IMMER als Sieger, unabhaengig von der Klasse. */ [hidden] { display: none !important; } body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background: radial-gradient(circle at top, #10233d 0%, var(--bg) 40%, #020617 100%); color: var(--text); min-height: 100vh; } a { color: var(--accent); text-decoration: none; } /* iOS-Bug-Report: Hamburger/Logo verschwanden im Hochformat unter der Kamera-/Notch-Aussparung, im Querformat wurde der Inhalt links vom Kamera-Ausschnitt verdeckt - viewport-fit=cover (views/header.php) allein reicht nicht, die App muss den sicheren Bereich selbst per env() einrechnen. max() kombiniert mit dem bisherigen Padding, damit auf Geräten ohne Notch (env() liefert dort 0) nichts schmaler wird als vorher. */ /* Nutzerwunsch: "am PC genutzt, gerade bei Buchhaltung darf es breiter sein ... am besten eigentlich volle width" - kein max-width-Deckel mehr, nur noch das Padding begrenzt den Abstand zum Viewport-Rand (einzige globale Breiten-Stellschraube, wirkt dank views/header.php/footer.php auf jede Seite konsistent - Komponenten wie .modal-box/.auth-card/.print-report haben bewusst eigene, unverändert schmale max-width-Werte und sind hiervon nicht betroffen). */ .app-shell { max-width: none; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left)); } /* Bug-Report: das Kopfzeilen-Menü (Konto-/Navigations-Dropdowns) verschwand hinter dem Seiteninhalt auf Seiten mit einem eigenen umrandeten Container direkt darunter (z. B. .task-desktop-page, Aufgabenverwaltung) - Ursache: backdrop-filter erzeugt einen eigenen Stacking-Context, .topbar selbst war aber position:static (z-index wirkt dort NICHT), wodurch der gesamte Dropdown-Inhalt trotz seines eigenen z-index als Einheit ganz normal in Dokumentreihenfolge einsortiert wurde - ein SPÄTERER, ebenfalls unpositionierter Container (z. B. .task-desktop-page) landete dadurch einfach optisch darüber. Fix: .topbar selbst bekommt jetzt position+z-index, wodurch ihr kompletter Inhalt (inkl. der bereits vorhandenen z-index:50-Dropdowns) als Einheit zuverlässig über JEDEM späteren Seiteninhalt liegt - unterhalb von .modal-overlay (100), oberhalb von allem anderen (Seiten-eigene fixe Elemente wie .task-fab/.task-bottom-nav bleiben bei 55/60). */ /* Nutzerwunsch: "Menü ganz oben soll fix sein, mit runterscrollt" (wie das bereits bestehende .task-bottom-nav) - position:sticky statt fixed, damit .topbar in normalem Layout-Fluss bleibt (kein kompensierendes Top-Padding an .content nötig) und trotzdem beim Scrollen oben kleben bleibt, auf Mobile UND Desktop gleichermaßen. */ .topbar { position: sticky; top: max(12px, env(safe-area-inset-top)); z-index: 90; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(18px); } .brand { font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; } .brand-logo { max-height: 36px; max-width: 220px; display: block; } .person-search-results { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; } /* Ergebnis-Einträge in Such-Dropdowns (Personen-/Konto-Suche, Buchungsassistent) erben sonst die pillenförmige .button-Form (border-radius: 999px) - bei vollbreiten Einträgen mit längerem Text (z. B. "1200 Bank") sieht das durch die starke Rundung an beiden Enden abgeschnitten aus. */ .person-search-result { text-align: left; border-radius: 10px; } .person-search-widget { position: relative; z-index: 10; margin-bottom: 12px; } .person-search-widget .person-search-results { position: absolute; z-index: 30; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 6px; width: 100%; box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35); } .membership-filter-form { margin-bottom: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(var(--panel-tint-rgb), 0.35); } /* Bug-Report: ".membership-filter-form" (die dominante Nicht-Popup-Formular-Klasse app-weit - u. a. jedes kleine "X anlegen"-Formular in settings.php/rechnungswesen_*.php) hatte nie display:flex/grid gesetzt, dadurch stapelten ihre Kind-Elemente (Label, abschliessender Button/button-row) als normale Blockboxen MIT NULL ABSTAND ineinander - per Messung (getBoundingClientRect) bestaetigt: jedes Feld beruehrte buendig das naechste, der "Speichern"/"Anlegen"-Button klebte direkt unter dem letzten Feld. Popups nutzen dagegen ".stack" (display:grid, siehe unten), das dieses Problem nie hatte - daher betraf der Bug ausschliesslich Nicht-Popup-Formulare. Bewusst ueber margin-bottom statt display:flex auf dem Formular selbst geloest: viele dieser Formulare tragen ein bereits bestehendes, bislang wirkungsloses (da der Elternkontext nie flex/grid war) "style='align-self: end'" auf ihrem Button-Wrapper - ein display:flex auf .membership-filter-form haette das plötzlich reaktiviert und Buttons ungewollt an den rechten Rand geschoben. */ .membership-filter-form > label, .membership-filter-form > .membership-filter-grid { margin-bottom: 14px; } .membership-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: start; } /* Bug-Report: .person-search-widgets eigenes margin-bottom (fuer Abstand in Stack-Formularen gedacht) verschob NUR dieses eine Feld innerhalb einer Filter-Grid-Zeile nach unten - hier gezielt aufgehoben, andere Kontexte (z. B. "Neue Mitgliedschaft") behalten den Abstand. */ .membership-filter-grid > .person-search-widget { margin-bottom: 0; } /* Dezentere/kleinere Variante der Filter-Leiste (Nutzerwunsch, gruppen.php: "sehr viel dezenter") - bewusst eine ZUSAETZLICHE Modifier-Klasse statt .membership-filter-form/-grid selbst zu aendern, die app-weit von vielen anderen Seiten in ihrer normalen Groesse genutzt werden. */ .filter-form-compact { padding: 10px 12px; } .filter-form-compact .membership-filter-grid { gap: 8px; } .filter-form-compact label, .filter-form-compact .form-field { font-size: 0.8rem; gap: 4px; } /* Wochentag-Unterueberschrift in der Gruppen-Uebersicht (gruppen.php, Nutzerwunsch: Sortierung nach Wochentag "im Idealfall mit Unterueberschriften") - eine volle, ueberspannende Tabellenzeile. */ .table-group-heading { background: rgba(var(--panel-tint-rgb), 0.35); font-weight: 600; color: var(--accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; } .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; } /* Dichte Tabellenvariante fuers Buchhaltungsmodul (Nutzerwunsch: professionelles, tastaturfreundliches Power-User-Erlebnis wie Taxpool/BuchhaltungsButler statt der sonst ueberall spacious .data-table). */ .data-table.compact th, .data-table.compact td { padding: 4px 8px; font-size: 0.9rem; } /* Umbrechende Tabelle fuer schmale Bildschirme (.data-table.stack-mobile). Eine vierspaltige Tabelle wird im Hochformat zu vier sehr schmalen Spalten, in denen jedes Wort einzeln umbricht (real gemeldet auf der Probestunden-Seite). Unter 760px wird deshalb jede Zeile zu einer eigenen Karte und jede Zelle zu einer vollbreiten Zeile darin. Die Kopfzeile entfaellt - sie liesse sich nur ueber data-label je Zelle retten, und die Inhalte sind hier selbsterklaerend. BEWUSST eine eigene Modifier-Klasse: .data-table wird app-weit von Dutzenden Tabellen benutzt, von denen viele (Buchhaltungs-Journal, Kontenbuch) gerade NICHT umbrechen sollen. */ @media (max-width: 760px) { .data-table.stack-mobile thead { display: none; } .data-table.stack-mobile tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: rgba(var(--panel-tint-rgb), 0.4); } .data-table.stack-mobile td { display: block; width: 100%; padding: 3px 0; border-bottom: 0; } /* Die Aktionsspalte bekommt eine sichtbare Trennung und darf umbrechen. */ .data-table.stack-mobile td:last-child { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .data-table.stack-mobile td:last-child .button-row { flex-wrap: wrap; } } .sort-header-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .sort-header-link:hover { text-decoration: underline; } /* Journal-Filterzeile (buchhaltung.php, Nutzerwunsch: "viel Dezenter ... in einer Reihe") - bewusst ohne die umrandete Box von .membership-filter-form, damit sie neben dem "Neue Buchung"-Popup nicht mit der Hauptaktion konkurriert. */ .accounting-journal-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-bottom: 16px; } .accounting-journal-filter label { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; color: var(--muted); } .accounting-journal-filter input, .accounting-journal-filter select { font-size: 0.85rem; padding: 5px 8px; } .accounting-journal-filter input[name="text"] { width: 220px; } .accounting-journal-filter input[name="amount"] { width: 110px; } .accounting-journal-filter input[type="date"] { width: 140px; } .accounting-journal-filter .accounting-account-search { width: 260px; } .accounting-journal-filter .accounting-account-search input[type="text"] { width: 100%; } /* Generische, wiederverwendbare Variante von .accounting-journal-filter (Nutzerwunsch: "Filter dezenter in einer Zeile", vertraege.php) - bewusst ein eigener, modul-neutraler Klassenname statt des accounting-spezifischen oben (identische Regeln, aber nicht sinnvoll modulübergreifend über einen "accounting-*"-Namen zu teilen). */ .filter-bar-inline { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-bottom: 16px; } .filter-bar-inline label { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; color: var(--muted); } .filter-bar-inline input, .filter-bar-inline select { font-size: 0.85rem; padding: 5px 8px; } .filter-bar-inline input[name="text"] { width: 220px; } /* Belege zu Buchungen (Nutzerwunsch: "per Drag and Drop einen neuen hochladen") - erste Drag-and-Drop-Upload-Fläche dieser App, siehe initDragDropUpload() in assets/js/app.js. */ .accounting-document-dropzone { position: relative; border: 2px dashed var(--border); border-radius: 10px; padding: 18px 12px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .accounting-document-dropzone:hover { border-color: var(--accent); } .accounting-document-dropzone-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .accounting-document-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .accounting-document-booking-diff-error { color: #ef4444; } .accounting-journal-custom-range { display: flex; flex-wrap: wrap; gap: 10px 14px; } /* Journal-Tabelle noch dichter als .data-table.compact (Nutzerwunsch: "Allgemein kann die Schrift in der Tabelle kleiner sein, damit man mehr sieht") - eigene Klasse statt .compact selbst zu ändern, damit andere Buchhaltungs-Tabellen (Kontenrahmen, Anlagen, ...) unverändert bleiben. */ .data-table.compact.accounting-journal-table th, .data-table.compact.accounting-journal-table td { font-size: 0.78rem; padding: 3px 6px; } .accounting-journal-table .nowrap-cell { white-space: nowrap; } .accounting-journal-table tbody tr[data-posting-row]:hover { background: rgba(var(--panel-tint-rgb), 0.35); } /* Kontennachweis (Nutzerwunsch: GuV/EÜR "hübsch" wie ein DATEV/Taxpool-Export - je amtlicher Zeile die einzelnen einfließenden Konten aufführen statt nur die nackte Summe, app/accounting_report_ helpers.php get_guv_report()/get_euer_report()). Bewusst NICHT nur auf .print-report beschränkt (anders als .print-sum-row) - soll auch in der normalen App-Ansicht direkt lesbar sein. */ .kontennachweis-table .kontennachweis-line-header td { font-weight: 700; padding-top: 14px; border-bottom: none; } .kontennachweis-table .kontennachweis-line-account td { border-bottom: none; } .kontennachweis-table .kontennachweis-line-account td:nth-child(2) { padding-left: 24px; color: var(--muted); } /* Nutzerwunsch: "Summe"-Bezeichnungen der Zwischensummen entfallen (Kontext macht bereits klar, dass es die Summe ist) + "nur den Border-Top auf Zellenebene machen, nicht die ganze Zeile" - border-top sitzt deshalb NUR noch auf der Betragszelle, nicht auf jeder (teils jetzt leeren) Zelle der Zeile. */ .kontennachweis-table .kontennachweis-line-subtotal td { font-weight: 700; } .kontennachweis-table .kontennachweis-line-subtotal td.num { border-top: 1px solid var(--border); } /* Untergliederung der GuV-Position 8 "Sonstige betriebliche Aufwendungen" (Nutzerwunsch: "wie in der alten Buchhaltung ausführlicher" - siehe get_guv_position_8_subgroups()) - eine zusätzliche Verschachtelungsebene zwischen der amtlichen Kennziffer-Kopfzeile und den einzelnen Konten. */ .kontennachweis-table .kontennachweis-subgroup-header td { font-weight: 600; padding-top: 10px; padding-left: 12px; border-bottom: none; } .kontennachweis-table .kontennachweis-line-account-nested td:nth-child(2) { padding-left: 36px; } .kontennachweis-table .kontennachweis-subgroup-subtotal td { font-weight: 600; } .kontennachweis-table .kontennachweis-subgroup-subtotal td.num { border-top: 1px dashed var(--border); } /* Bilanzgliederung nach § 266 HGB (Nutzerwunsch: "ähnlich wie in der GuV auch die Bilanzen Kategorien in Aktiva und Passiva haben") - eine zusätzliche Sektions-Ebene (A./B./C.) ÜBER der bereits bestehenden .kontennachweis-line-header-Ebene (hier für die römische I./II./III.- Unterebene wiederverwendet), Konten selbst rutschen dadurch eine Stufe tiefer als bei GuV/EÜR - siehe app/accounting_report_helpers.php accounting_build_bilanz_lines(). */ .kontennachweis-table .kontennachweis-section-header td { font-weight: 700; font-size: 1.02em; padding-top: 20px; border-bottom: none; } .kontennachweis-table .kontennachweis-section-subtotal td { font-weight: 700; } .kontennachweis-table .kontennachweis-section-subtotal td.num { border-top: 2px solid var(--border); } /* Nutzerwunsch (Auswertungen): "Zahlen in der rechten Spalte alle rechtsbündig" - gilt für alle views/auswertungen_report_content.php-Tabellen (Journal/Summen&Salden/Kontenblatt/Kontennachweis/ Bilanz/BWA), nicht nur den Druck-/PDF-Kontext (dort zusätzlich `white-space: nowrap`, siehe app/accounting_report_pdf_helpers.php - verhindert, dass das Eurozeichen umbricht). */ th.num, td.num { text-align: right; } .accounting-journal-table .account-cell-name { display: block; font-size: 0.85em; color: var(--muted); } /* Zahlungskonten-Kontoauszug (buchhaltung_zahlungskonten.php, Nutzerwunsch: "negative Zahlen rot, positive Zahlen normal"). */ .accounting-journal-table .amount-negative { color: var(--danger); } .accounting-journal-table .journal-lock-cell { text-align: center; } /* Benachrichtigungs-Kanäle in "Mein Profil" (Nutzerwunsch: "Header sind die 3 Optionen, erste Reihe besteht dann aus den 3 Checkboxes, jeweils zentriert darunter") - Checkbox-Zellen zentriert statt der App-weit üblichen Linksbündigkeit. */ .notification-channel-table th, .notification-channel-table td { text-align: center; } .accounting-journal-table td { vertical-align: middle; } /* Ersetzt die frühere "Journal"-Überschrift (Nutzerwunsch: irreführend, da hier auch noch nicht festgeschriebene Stapelbuchungen stehen). Feste Mindesthöhe + visibility (statt hidden/display:none) hält den Platz IMMER reserviert - die Tabelle darunter rutscht beim Auswählen von Zeilen nicht nach unten, die Gruppenaktionen blenden nur innerhalb dieser Zeile ein/aus. */ .accounting-journal-bulk-bar { display: flex; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 8px; visibility: hidden; } .accounting-journal-bulk-bar.is-active { visibility: visible; } /* Zeilenfarben im Journal (Nutzerwunsch: "Zeilen sollen farblich etwas abgehoben werden") - bewusst drei unabhängige, kombinierbare Zustände statt nur einer Klasse: stornierte Buchungen (dunklere/ gedämpfte Schrift, sie sind durch ihre Gegenbuchung ohnehin nicht mehr relevant), noch nicht festgeschriebene Buchungen (minimal hellerer Hintergrund, "Stapel") und unvollständige/ungültige Buchungen (dezent roter Hintergrund - gewinnt optisch, da am wichtigsten für die Verwaltung). */ .accounting-journal-table tr.posting-row-open td { background: rgba(255, 255, 255, 0.035); } .accounting-journal-table tr.posting-row-voided td { color: var(--muted); } .accounting-journal-table tr.posting-row-invalid td { background: rgba(251, 113, 133, 0.1); } /* Bug-Report: Splitbuchungen (mehrere Journalzeilen mit gemeinsamer split_group_id, z. B. aus einem DATEV-Import) waren nicht als zusammengehörig erkennbar - "Teil x/y"-Badge + ein farbiger Rahmen links an der ersten Spalte verbindet sie optisch, OHNE die Zeilen aufklappbar/kollabiert zu machen (Nutzerwunsch: "wäre nervig, wenn man immer aufklappen müsste") - jede Zeile bleibt einzeln auswähl-/bearbeitbar wie bisher. */ .accounting-journal-table tr.posting-row-split td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* "Belege neu durchnummerieren" (Nutzerwunsch, Vorbild-Screenshot: geänderte Zeilen farblich markiert) - generische Tabellenzeilen-Markierung, nicht auf .accounting-journal-table beschränkt. */ .data-table tr.beleg-renumber-changed td { background: rgba(34, 197, 94, 0.12); } /* "Geplante Buchungen" (Nutzerwunsch: AfA/Saldenvortrag/unfertige Rechnungen als Vorschau im Journal zeigen, siehe app/accounting_planned_posting_helpers.php) - existieren nie real in accounting_ postings, deshalb deutlich gedämpfter als selbst eine offene Stapel-Zeile (kursiv statt nur heller Hintergrund) und ohne den linken Rahmen der Split-Kennzeichnung. */ .accounting-journal-table tr.posting-row-planned td { color: var(--muted); font-style: italic; } .split-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(56, 189, 248, 0.16); color: var(--accent); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } /* Beleg-Massenzuordnung (buchhaltung_belege_massenzuordnung.php) - eine Karte je Datei aus der hochgeladenen ZIP, Kopfzeile mit Dateiname/Trefferzahl/Überspringen-Toggle, 0-Treffer-Zeile gedämpft. also-matched-by-files ist seit der Mehrfach-Beleg-Ausbaustufe (Nutzerwunsch: "eine Buchung muss auch mehrere Belege bekommen können") bewusst neutral/informativ statt Warnfarbe - kein Konflikt mehr. */ .beleg-matching-file-group { margin-bottom: 16px; } .beleg-matching-file-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .beleg-matching-no-match { margin: 0; } .beleg-matching-multi-assign-hint { color: var(--muted); font-size: 0.82rem; } /* Journal-Belegsymbol (buchhaltung.php) - kleine Trefferzahl-Ecke, wenn eine Buchung mehr als einen Beleg hat (Mehrfach-Beleg-Ausbaustufe). */ .beleg-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; margin-left: 2px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: #04121f; font-size: 0.62rem; font-weight: 700; vertical-align: super; } /* Bearbeiten-Symbol im Journal (Nutzerwunsch: "Symbol zum Editieren der Buchung" links vom Schloss-Symbol) - bewusst kein .button (zu groß/aufdringlich neben dem reinen Anzeige-Icon daneben), reines minimalistisches Icon mit Klickfläche. */ .icon-link-button { background: none; border: none; padding: 2px 5px; margin-right: 2px; cursor: pointer; color: inherit; font-size: inherit; } .icon-link-button:hover { color: var(--accent); } /* Jahresauswahl/Journal-Stapel-Auswahl/Ungueltig-Checkbox/"Neue Buchung" sollen auf Desktop immer in einer Zeile bleiben und dabei deutlich kompakter als die Standard-.button-row-Elemente sein (Nutzerwunsch: "immer noch viel zu groß und mit Zeilenumbruch ... kleiner und nebeneinander") - der Selektor ist bewusst ".button-row.accounting-journal-header-actions" (statt nur die einzelne Klasse), da .button-row selbst WEITER UNTEN in dieser Datei steht und mit gleicher Spezifität sein `flex-wrap: wrap` sonst gewinnen würde - genau das war der eigentliche Grund, warum die Zeile trotz einer bereits vorhandenen früheren nowrap-Regel weiterhin umgebrochen ist. */ .button-row.accounting-journal-header-actions { flex-wrap: nowrap; gap: 8px; } .accounting-journal-header-actions select { font-size: 0.8rem; padding: 4px 24px 4px 6px; width: auto; } .accounting-journal-header-actions label.inline-checkbox { font-size: 0.85rem; white-space: nowrap; } @media (max-width: 760px) { .button-row.accounting-journal-header-actions { flex-wrap: wrap; } } /* Kassenbuch (buchhaltung_kasse.php, Nutzerwunsch: "Auswahl Einnahme/Ausgabe am besten kein Dropdown, sondern horizontales 2-fach-Selekt" / Gegenkonto "am besten ein expanded dropdown, wo man nur ein Feld selektieren kann, wenn es bis zu 7 Optionen gibt") - Radiobuttons visuell als anklickbare Kacheln statt selbst entzog dem Browser den nötigen Hinweis, das native Dropdown im dunklen Farbschema zu rendern (der App-weite `:root { color-scheme: dark }` allein reicht dafür nicht, sobald ein Element seine eigene background-color explizit auf "transparent" setzt statt eine echte Farbe zu nennen - andere ` app-weit (z. B. `.inline-checkbox`/die Beauftragte-Personen-Liste im Aufgaben- Detailsheet), nicht nur die Aufgabenverwaltung. Eigenes, `appearance:none`-basiertes Erscheinungsbild passend zum sonstigen abgerundeten App-Stil - ersetzt die native Darstellung komplett, funktioniert dadurch identisch in hell/dunkel und auf jeder Plattform. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; border: 2px solid var(--border); border-radius: 6px; background: var(--panel-2); display: inline-grid; place-content: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } input[type="checkbox"]::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px) scale(0); transition: transform 0.12s ease; } input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } input[type="checkbox"]:checked::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); } input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input[type="radio"] { width: auto; flex-shrink: 0; accent-color: var(--accent); } /* Gleiches Problem wie bei Checkboxen (siehe CLAUDE.md): die globale input{width:100%}-Regel samt 12px/14px-Padding presst den nativen Farb-Swatch eines type="color"-Felds auf einen duennen, kaum sichtbaren Streifen zusammen (Saal-/Raeumlichkeits-Farbfeld in saalverwaltung.php). Eigene, kompakte Groesse ohne das Text-Padding - der Swatch selbst braucht keinen Rahmen-Innenabstand. */ input[type="color"] { width: 64px; height: 44px; padding: 4px; flex-shrink: 0; } .alert { padding: 12px 14px; border-radius: 12px; background: rgba(251, 113, 133, 0.18); color: #fecdd3; } .alert.success { background: rgba(34, 197, 94, 0.16); color: #bbf7d0; } .alert.error { background: rgba(251, 113, 133, 0.18); color: #fecdd3; } .alert.info { background: rgba(56, 189, 248, 0.16); color: #bae6fd; } .alert.warning { background: rgba(251, 191, 36, 0.18); color: #fde68a; } .highlight-total { padding: 12px 14px; border-radius: 12px; background: rgba(var(--panel-tint-rgb), 0.5); font-size: 1.05rem; } .highlight-total strong { font-size: 1.3rem; color: var(--accent-2); } .field-error { color: #fecdd3; } .input-error { border-color: #fb7185 !important; box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.2); } .muted { color: var(--muted); } .section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .pill { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(56, 189, 248, 0.18); color: var(--accent); font-size: 0.85rem; } .knowledge-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .knowledge-item { padding: 10px 0; border-bottom: 1px dashed var(--border); } .knowledge-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .knowledge-item-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .knowledge-scope-tag { justify-self: start; font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; background: rgba(56, 189, 248, 0.14); color: var(--accent); white-space: nowrap; } .knowledge-delete-form { flex-shrink: 0; } /* Wird mal als
, mal als