body { font-family: 'Open Sans', sans-serif; background-color: #F8FAFC; color: #1E293B; } .card-light { background-color: #FFFFFF; border: 1px solid #E2E8F0; } /* Ausklappbare Einstellungs-Bereiche (details/summary) - kompaktes, sauberes Layout mit drehbarem Pfeil-Indikator, damit im zugeklappten Zustand kein "leerer" Eindruck entsteht. */ details.settings-accordion > summary { list-style: none; position: relative; padding-right: 2.5rem; } details.settings-accordion > summary::-webkit-details-marker { display: none; } details.settings-accordion > summary::after { content: "\f078"; /* fa-chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 0.8rem; transition: transform 0.2s ease; } details.settings-accordion[open] > summary::after { transform: translateY(-50%) rotate(180deg); } details.settings-accordion[open] > summary { border-bottom: 1px solid #F1F5F9; } .custom-shadow { box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.03); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #F1F5F9; } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #94A3B8; } /* Mobile-Menü: Desktop-Navigation bleibt exakt wie sie ist (ab md sichtbar über die normale Tailwind-Klasse). Auf kleinen Screens ist #headerNavBar per Default hidden; der Hamburger-Button togglet diese Klasse, um das Menü als Dropdown einzublenden. */ @media (max-width: 767px) { #headerNavBar.mobile-open { display: flex !important; } } /* Platzhaltertext für leere contenteditable-Felder (Rich-Text-Editoren im Ticketcenter) */ [contenteditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: #94A3B8; pointer-events: none; } /* Eingebettete Bilder in Rich-Text-Inhalten (Beschreibung/Kommentare) nie breiter als der verfügbare Platz darstellen */ .rich-content img, [contenteditable] img { max-width: 100%; height: auto; border-radius: 6px; } /* iOS-Safari-Fix: "position: sticky" kann bei Momentum-Scrolling auf iPhones zu einem Rendering-Fehler führen, bei dem der Header-Inhalt kurzzeitig doppelt/überlagert mit darunterliegendem Content gezeichnet wird ("Ghosting"). Erzwingt eine eigene Compositing-Ebene für den Header, was dieses bekannte WebKit-Problem zuverlässig behebt. */ header.sticky { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; isolation: isolate; } /* PDF-Export einer Wiki-Seite: nutzt den normalen Browser-Druckdialog ("Als PDF speichern"), kein externes JS/Bibliothek nötig. wikiPrintExportActive wird nur kurzzeitig per JS auf gesetzt (siehe exportWikiPageAsPdf()) - blendet dabei ALLES außer dem eigentlichen Seiteninhalt aus, inkl. Navigation, Seitenleiste und Bearbeiten-Buttons. */ body.wikiPrintExportActive > *:not(#wikiPrintExportRoot) { display: none !important; } #wikiPrintExportRoot { display: none; } body.wikiPrintExportActive #wikiPrintExportRoot { display: block !important; max-width: 800px; margin: 0 auto; padding: 24px; font-family: 'Open Sans', sans-serif; color: #1E293B; } @media print { body.wikiPrintExportActive #wikiPrintExportRoot img { max-width: 100% !important; } } /* Generisches Gegenstück für die Ticketabrechnung (PDF je Firma) - gleiches Muster wie beim Wiki-Export, nur mit eigener Aktivierungsklasse/eigenem Root, damit beide unabhängig voneinander funktionieren. */ body.ticketabrechnungPrintActive > *:not(#ticketabrechnungPrintRoot) { display: none !important; } #ticketabrechnungPrintRoot { display: none; } body.ticketabrechnungPrintActive #ticketabrechnungPrintRoot { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; padding: 24px; font-family: 'Open Sans', sans-serif; color: #1E293B; } /* Defensiv: falls / beim Drucken selbst noch irgendeine Breiten-Beschränkung mitbringen (z.B. durch Browser-Druckeinstellungen wie "Skalierung"), wird das hier zusätzlich explizit aufgehoben - verhindert, dass die Druck-Vorlage trotz eigenem width:100% nur einen schmalen mittigen Ausschnitt der Seite einnimmt. */ body.ticketabrechnungPrintActive, body.ticketabrechnungPrintActive html { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } @media print { @page { margin: 12mm; size: auto; } body.ticketabrechnungPrintActive #ticketabrechnungPrintRoot { width: 100% !important; max-width: none !important; } } /* Generisches Print-Root für Tabellen-PDFs (Zeiten/Fahrtenbuch) - identisches Muster wie die Ticketabrechnung, nur eigene Aktivierungsklasse/eigenes Root. */ body.genericPdfPrintActive > *:not(#genericPdfPrintRoot) { display: none !important; } #genericPdfPrintRoot { display: none; } body.genericPdfPrintActive #genericPdfPrintRoot { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; padding: 24px; font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 1.5; color: #1E293B; } /* Body-Text im PDF nicht zu groß (Fahrtenbuch/Zeitenexport nutzen normale

/

) */ body.genericPdfPrintActive #genericPdfPrintRoot p, body.genericPdfPrintActive #genericPdfPrintRoot div, body.genericPdfPrintActive #genericPdfPrintRoot td, body.genericPdfPrintActive #genericPdfPrintRoot li { font-size: 12px; } body.genericPdfPrintActive, body.genericPdfPrintActive html { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } @media print { body.genericPdfPrintActive #genericPdfPrintRoot { width: 100% !important; max-width: none !important; } } /* Tabelle im PDF-Export (ordentliche Rahmen wie bei der Ticketabrechnung). */ .pdf-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11px; } .pdf-table th, .pdf-table td { border: 1px solid #CBD5E1; padding: 6px 8px; text-align: left; vertical-align: top; } .pdf-table th { background: #F1F5F9; font-weight: 700; text-transform: uppercase; font-size: 9px; color: #475569; } .pdf-table td.num, .pdf-table th.num { text-align: right; white-space: nowrap; } .pdf-table tfoot td { font-weight: 700; background: #F8FAFC; } .pdf-table .pdf-sub { color: #64748B; font-size: 9px; } /* Listen/Nummerierung in allen Rich-Text-Editoren (Wiki, Ticket-Beschreibung, Ticket-Kommentare, CRM-Interaktionen, Abrechnungs-Notiz). Normale Aufzählungen (Punkte/Striche/Buchstaben) nutzen das native CSS list-style-type - dafür reicht die JS-Zuweisung in richSetListStyle() bereits aus. Die hierarchische Zahlen-Nummerierung ("1, 1.1, 1.2, 2, 2.1, ...") braucht dagegen CSS counters(), da HTML/execCommand bei verschachtelten
    -Listen sonst jede Ebene wieder bei "1" neu beginnen würde, statt die Elternebene mit einzubeziehen. .rich-list-decimal wird von richSetListStyle() gesetzt (list-style-type:none, die eigentliche Zahl kommt komplett aus ::before/counters()). */ .rich-list-decimal, .rich-list-decimal ol { counter-reset: rich-item; padding-left: 1.8em; list-style-type: none; } .rich-list-decimal > li { counter-increment: rich-item; position: relative; } .rich-list-decimal > li::before { content: counters(rich-item, ".") ". "; position: absolute; left: -1.8em; font-weight: 700; color: #64748B; } /* Verschachtelte Listen (jeder Ebene über "Einrücken" erzeugt) bekommen etwas Abstand nach links, damit die Hierarchie auch optisch erkennbar ist - unabhängig vom gewählten Listen-Stil. Bewusst GLOBAL (nicht an einen bestimmten Wrapper gebunden), damit dieselbe Formatierung auch dort greift, wo Inhalte nur ANGEZEIGT werden (Ticket-Beschreibung, Kommentare, Wiki-Seiten-Ansicht), nicht nur im Editor selbst - der gespeicherte HTML-Inhalt enthält Listen-Tags ja unabhängig vom Kontext. Tailwinds Basis-Reset entfernt list-style/padding von