:root {
/* Blau/Orange-Farbschema: Blau als strukturierende Farbe (Sidebar, Kopfzeile, Überschriften),
Orange als Aktionsfarbe (Buttons, aktive Zustände, Hervorhebungen). Der Lesebereich (Cards,
Tabellen) bleibt durchgängig weiß, siehe --card. */
--primary: #1a1a1a;
--primary-light: #3a3a3a;
--primary-dark: #000000;
--accent: #e30613;
--accent-dark: #b1050f;
/* Von Stephan gewünscht: Haupthintergrundfarbe auf #f0ede7 geändert (vorher #f4f6fa). */
--bg: #f0ede7;
--card: #ffffff;
--border: #dfe3ea;
--text: #222;
--text-muted: #666;
--success: #2e7d32;
--warning: #b8860b;
--danger: #c02b3f;
--radius: 8px;
}
/* Punkt 2 (Software-Liste Runde AG): Erkennung von Browser-Autofill per CSS-Trick. Manche Browser
(v.a. Chrome/Edge, wenn eine komplette gespeicherte Adresse auf einmal in ein leeres Formular
eingetragen wird - z.B. beim neuen Auftrag anlegen) lösen dabei KEIN input/change-Event pro Feld
aus, wodurch z.B. die PLZ->Ort-Automatik nie greift. Eine leere CSS-Animation, die nur bei
:-webkit-autofill (Chrome/Edge/Safari) aktiv wird, lässt sich per "animationstart"-JS-Event
trotzdem zuverlässig erkennen - rein technischer Trick ohne sichtbaren visuellen Effekt.
Siehe views/projects/form.ejs und views/projects/show.ejs (PLZ-Feld). */
@keyframes whtk-autofill-detect { from {} to {} }
input:-webkit-autofill { animation-name: whtk-autofill-detect; animation-duration: 0.001s; }
* { box-sizing: border-box; }
/* Schriftart Archivo (von Stephan aus der Schriften-Vorschau vom 14.08.2026
ausgewählt). Wird mit der App ausgeliefert (public/fonts/, woff2 mit vollem deutschen
Zeichensatz inkl. Umlaute/ß/€) - kein Download/keine Installation für die Nutzer nötig,
kein externer Dienst (funktioniert auch offline). Der SemiBold-Schnitt ist zusätzlich für
font-weight 700 registriert, damit "bold" nicht künstlich verbreitert wird. */
/* Pfade RELATIV zur CSS-Datei (../fonts/ -> /public/fonts/): die App liefert statische Dateien
unter /public aus (server.js express.static) - ein absoluter /fonts/-Pfad liefe ins Leere (404)
und die Schrift bliebe unsichtbar (Browser fällt still auf die Systemschrift zurück). */
@font-face {
font-family: 'Archivo';
src: url('../fonts/Archivo-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Archivo';
src: url('../fonts/Archivo-SemiBold.woff2') format('woff2');
font-weight: 600 700;
font-style: normal;
font-display: swap;
}
body {
margin: 0;
font-family: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}
a { color: var(--primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============================================================
Layout: linke Sidebar + obere Kopfzeile mit globaler Suche
============================================================ */
:root {
--sidebar-width: 230px;
--sidebar-width-collapsed: 64px;
--header-height: 58px;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width);
background: linear-gradient(180deg, var(--primary), var(--primary-dark));
color: #fff;
display: flex;
flex-direction: column;
z-index: 60;
overflow-y: auto;
}
.sidebar .brand {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
padding: 16px 16px;
font-weight: 700;
font-size: 0.92rem;
line-height: 1.25;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.sidebar .brand-text { font-size: 1.1rem; letter-spacing: 0.02em; }
/* Von Stephan gewünscht ("Navigationsleiste, den Abstand zwischen den verschiedenen Blöcken
belassen, nur innerhalb den Abstand verringern"): die Einträge INNERHALB eines Blocks rücken
enger zusammen (Zeilenabstand 2 -> 1 px, Innenabstand je Eintrag 10 -> 6 px). Der Abstand
ZWISCHEN den Blöcken bleibt exakt gleich - dafür sind die Werte bei .sidenav-heading und
.sidenav-divider unten genau um das erhöht, was die Einträge jetzt weniger brauchen. */
.sidenav { display: flex; flex-direction: column; padding: 10px 8px; gap: 1px; flex: 1; }
.sidenav a {
display: flex;
align-items: center;
gap: 10px;
color: #c3cde0;
padding: 6px 12px;
border-radius: var(--radius);
font-size: 0.88rem;
white-space: nowrap;
}
.sidenav a .ic { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidenav a:hover, .sidenav a.active {
background: rgba(255,255,255,0.12);
color: #fff;
text-decoration: none;
}
.sidenav a.active { background: var(--accent); color: #fff; font-weight: 600; }
/* Abstand zum Block darüber/darunter bewusst von 8 auf 13 px erhöht - genau um die 5 px, die die
Einträge oben durch den kleineren Innenabstand verloren haben. Der sichtbare Abstand zwischen
den Blöcken bleibt dadurch derselbe wie vorher. */
.sidenav-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 13px 10px; }
/* Punkt 5 (Software-Liste): Gruppen-Überschriften zwischen den Navigationsblöcken. */
.sidenav-heading {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.45);
/* Oben 14 -> 19 px: gleicht die 5 px aus, die die Einträge durch den kleineren Innenabstand
verloren haben, damit der Abstand zwischen den Blöcken unverändert bleibt. */
padding: 19px 12px 4px;
font-weight: 600;
}
.sidenav-heading:first-child { padding-top: 4px; }
.sidenav-footer {
padding: 12px 16px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
gap: 8px;
}
.sidenav-footer .user-name { color: #d9dee8; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidenav-footer-link { color: #d9dee8; font-size: 0.78rem; text-decoration: none; opacity: 0.85; }
.sidenav-footer-link:hover, .sidenav-footer-link.active { color: #fff; opacity: 1; text-decoration: underline; }
.sidenav-version { color: #8791a3; font-size: 0.7rem; margin-top: 6px; }
/* Von Stephan gewünscht: der Teil nach dem Punkt eine Stufe kleiner und kursiv. */
.sidenav-version-klein { font-size: 0.62rem; font-style: italic; }
/* Abmelden in eigener Zeile unter den Fußzeilen-Links (von Stephan so gewählt, nachdem die Zeile
mit dem vierten Eintrag "Unterschrift" zu breit wurde und der Knopf aus der Leiste ragte). */
.btn-mini-breit { width: 100%; text-align: center; }
.btn-mini {
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
padding: 6px 10px;
border-radius: var(--radius);
cursor: pointer;
font-size: 0.8rem;
flex-shrink: 0;
}
.btn-mini:hover { background: rgba(255,255,255,0.25); }
.topheader {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: linear-gradient(90deg, var(--primary), var(--primary-light));
border-bottom: 1px solid var(--primary-dark);
display: flex;
align-items: center;
gap: 16px;
padding: 0 20px;
z-index: 55;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
color: #fff;
padding: 4px 6px;
}
.topheader-title {
color: #fff;
font-weight: 600;
font-size: 1rem;
white-space: nowrap;
flex-shrink: 0;
}
.topheader-title-link { color: inherit; text-decoration: none; }
.topheader-title-link:hover { text-decoration: underline; opacity: 0.9; }
/* Von Stephan gewünscht: Breadcrumb-Kopfzeile (siehe views/partials/nav.ejs) - die aktuelle Seite
(letzte, nicht verlinkte Station) darf lang sein (z.B. ein Bauvorhaben-Titel), daher hier per
Ellipsis gekürzt statt den Header zu sprengen/das Suchfeld zu verdrängen. */
.topheader-breadcrumb { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.topheader-breadcrumb-sep { opacity: 0.6; flex-shrink: 0; }
.topheader-title-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
/* Punkt 1 (Software-Liste): Suchfeld oben rechts in der Ecke statt mittig gestreckt -
"margin-left:auto" schiebt es im Flex-Header (.topheader) ganz nach rechts, "flex:0 0 auto" statt
des bisherigen "flex:1" verhindert das Strecken über die Restbreite. */
/* Die Suche schrumpft mit, wenn der Platz knapp wird. Vorher war sie starr (flex: 0 0 auto) und
drückte den Notizbuch-Knopf rechts aus der Leiste heraus (von Stephan gemeldet). */
/* Notizbuch-Knopf und Suche stehen zusammen in .topheader-rechts - dieser Block wandert als
Ganzes nach rechts. Vorher hatten Knopf und Suche je ein margin-left:auto und teilten sich den
Freiraum, dadurch stand die Suche mitten in der Leiste (von Stephan gemeldet). */
.topheader-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.topheader-search { position: relative; flex: 0 0 auto; max-width: none; margin-left: 0; }
/* Von Stephan (15.08.2026): "Suche im blauen Feld oben dem Standard anpassen. Sie soll genauso
aussehen wie auf der Seite" - die globale Suche in der Kopfleiste sieht jetzt exakt aus wie das
Suchfeld der Listen (.al2 .suche in listen.css): weißes Feld, 6px Radius, gleicher Rahmen,
gleiche Schriftgröße und dasselbe SVG-Lupensymbol links. Das alte Emoji entfällt dafür. */
.search-form { display: flex; align-items: center; background: transparent; border: 0; border-radius: 0; padding: 0; }
.search-icon { display: none; }
.search-form input[type="search"] {
border: 1px solid #cdd3db;
border-radius: 6px;
padding: 6px 10px 6px 28px;
font: inherit;
font-size: 0.82rem;
box-shadow: none;
color: #1f2733;
width: 260px;
min-width: 230px;
background: #fff url("data:image/svg+xml;utf8,") no-repeat 7px center/14px;
}
.search-form input[type="search"]::placeholder { color: #8a93a0; }
.search-form input[type="search"]:focus { outline: none; }
.search-results {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 340px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 30px rgba(20,40,80,0.15);
max-height: 420px;
overflow-y: auto;
padding: 6px 0;
}
.search-results.open { display: block; }
.search-group-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); padding: 8px 14px 4px; }
.search-results a { display: flex; flex-direction: column; padding: 7px 14px; color: var(--text); font-size: 0.88rem; }
.search-results a:hover { background: var(--bg); text-decoration: none; }
.search-results .sr-sub { font-size: 0.75rem; color: var(--text-muted); }
.search-empty { padding: 14px; color: var(--text-muted); font-size: 0.85rem; }
.sidebar-overlay { display: none; }
.container {
/* Kein festes max-width mehr, damit sich die Anzeige immer der Bildschirmbreite anpasst
(schmale Notebooks bis große Ultrawide-Monitore) statt in der Mitte eines breiten
Bildschirms schmal stehen zu bleiben. WICHTIG: width muss die Sidebar-Breite abziehen,
da margin-left sonst zusätzlich zu 100% Breite addiert und über den Bildschirmrand
hinausragt (führte zu horizontalem Overflow).
*/
width: calc(100% - var(--sidebar-width));
margin-left: var(--sidebar-width);
padding: calc(var(--header-height) + 24px) 28px 60px;
/* Bugfix (von Stephan gemeldet: "warum scrollt sie mit? warum ist sie nicht fixiert?"):
Hier stand "overflow-x: auto". Der Browser macht daraus automatisch auch "overflow-y: auto" -
damit ist der Container ein eigener Scrollkasten, und eine fixierte Tabellenkopfzeile klebt an
diesem Kasten statt am Fenster. Genau deshalb scrollte die Überschrift mit.
"clip" begrenzt weiterhin seitlich (breite Tabellen laufen also nicht aus der Seite), macht den
Container aber NICHT zum Scrollkasten - die Kopfzeile klebt dadurch wieder am Fenster.
Im Browser nachgemessen: die feste blaue Kopfleiste ist 58 px hoch, siehe --header-height. */
overflow-x: clip;
overflow-clip-margin: 8px;
}
/* Bugfix (von Stephan gemeldet, Baustellen-Übersicht auf TV-Bildschirm "sieht nicht sauber aus"):
.topheader/.container reservieren oben immer --sidebar-width für die linke Navigationsleiste -
für Benutzer mit nur_baustellen_dashboard=1 wird diese aber komplett ausgeblendet (siehe
views/partials/nav.ejs), wodurch links ein leerer, ungenutzter Streifen stehen blieb. Die Klasse
"no-sidebar" (siehe Toggle ganz oben in nav.ejs) hebt den Versatz für genau diesen Fall auf. */
html.no-sidebar .topheader { left: 0; }
html.no-sidebar .container { width: 100%; margin-left: 0; }
@media (max-width: 900px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: 4px 0 20px rgba(0,0,0,0.2);
}
body.sidebar-open .sidebar { transform: translateX(0); }
.topheader { left: 0; }
.menu-toggle { display: inline-block; }
.container { width: 100%; margin-left: 0; padding-left: 16px; padding-right: 16px; }
body.sidebar-open .sidebar-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(10,15,30,0.45);
z-index: 59;
}
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
flex-wrap: wrap;
gap: 10px;
}
.page-header h1 { margin: 0; font-size: 1.4rem; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Auftragsstatus-Stepper (siehe partials/project-status-stepper.ejs): Punkte mit verbindender
Linie direkt unter der Bezeichnung, Klick speichert den Status sofort per AJAX. */
.status-stepper {
display: flex;
align-items: flex-start;
gap: 0;
margin: -6px 0 18px;
overflow-x: auto;
padding: 4px 2px 8px;
}
.status-stepper.is-saving { opacity: 0.6; pointer-events: none; }
.status-step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-width: 84px;
position: relative;
}
.status-step:not(:last-child)::after {
content: '';
position: absolute;
top: 8px;
left: calc(50% + 12px);
right: calc(-50% + 12px);
height: 2px;
background: var(--border);
}
.status-step.is-past:not(:last-child)::after { background: #b9c0cc; }
.status-step-dot {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--border);
background: #fff;
cursor: pointer;
padding: 0;
z-index: 1;
transition: transform 0.1s ease;
}
.status-step-dot:hover { transform: scale(1.15); }
.status-step.is-current .status-step-dot { box-shadow: 0 0 0 3px rgba(240,124,46,0.15); }
/* "Aktiviert"/"Aktiviert o. Gen."-Abzweigung (von Stephan gewünscht, siehe
partials/project-status-stepper.ejs) - zwei Punkte an derselben Stelle statt zweier
aufeinanderfolgender Schritte in der Reihenfolge, der zweite (kleinere) Punkt steht für die
Alternative "ohne Genehmigung". */
.status-step-branch { display: flex; align-items: center; gap: 5px; }
.status-step-dot-branch {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--border);
background: #fff;
cursor: pointer;
padding: 0;
z-index: 1;
transition: transform 0.1s ease;
}
.status-step-dot-branch:hover { transform: scale(1.2); }
.status-step-sublabel {
margin-top: 1px;
font-size: 0.62rem;
color: var(--text-muted);
white-space: nowrap;
}
.status-step-label {
margin-top: 6px;
font-size: 0.72rem;
color: var(--text-muted);
text-align: center;
line-height: 1.2;
padding: 0 4px;
}
/* Einstellungen-Übersicht: farbige Kategorie-Kacheln als Schnellnavigation über den eigentlichen
(weiter unten liegenden) Detail-Karten, damit die lange Einstellungsseite übersichtlicher wirkt. */
.settings-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
@media (max-width: 900px) {
.settings-overview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.settings-overview { grid-template-columns: 1fr; }
}
.settings-cat {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
background: var(--card);
box-shadow: 0 1px 2px rgba(20,30,50,0.04);
}
.settings-cat-header {
padding: 12px 16px;
font-weight: 700;
font-size: 0.95rem;
}
.settings-cat-body {
display: flex;
flex-direction: column;
padding: 10px 16px 14px;
}
.settings-cat-body a {
padding: 6px 0;
color: var(--text);
text-decoration: none;
font-size: 0.88rem;
border-bottom: 1px solid #f0f1f4;
}
.settings-cat-body a:last-child { border-bottom: none; }
.settings-cat-body a:hover { color: var(--accent); text-decoration: underline; }
.settings-cat.cat-neutral .settings-cat-header { background: #f3f4f6; color: #1f2937; }
.settings-cat.cat-teal .settings-cat-header { background: #0f9b8e; color: #fff; }
.settings-cat.cat-indigo .settings-cat-header { background: #828282; color: #fff; }
.settings-cat.cat-purple .settings-cat-header { background: #7c3aed; color: #fff; }
.settings-cat.cat-slate .settings-cat-header { background: #334155; color: #fff; }
/* Auftragsformular: Auto-Save-Statusanzeige (siehe views/projects/show.ejs) statt eines
"Speichern"-Buttons. */
.autosave-status { font-size: 0.82rem; color: var(--text-muted); }
.autosave-status.is-saving { color: var(--text-muted); }
.autosave-status.is-saved { color: var(--success); font-weight: 600; }
.autosave-status.is-error { color: var(--danger); font-weight: 600; }
.import-card { max-width: 640px; }
.import-dropzone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 24px;
text-align: center;
margin-bottom: 16px;
}
.import-result { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.92rem; }
.import-result.ok { background: #e9f7ef; border: 1px solid #a3d9b6; color: #1e6b3c; }
.import-result.error { background: #fbeaec; border: 1px solid #e3a3ac; color: #8a2331; }
.import-columns-hint { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
}
/* Von Stephan gewünscht (Screenshot Auftragsseite: "Dokumente"-Übersichtskarte wird bei vielen
E-Mail-Anhängen sehr lang) - begrenzt die Liste auf eine feste Höhe mit eigenem Scrollbalken,
damit die Karte nicht mehr die ganze Seite in die Länge zieht. Wird u.a. in
views/projects/show.ejs bei der oberen "Dokumente"-Karte verwendet. */
.card-scroll-list {
max-height: 260px;
overflow-y: auto;
padding-right: 4px;
}
/* Bugfix (echter Fehler, von Stephan gemeldet: "Und Menü sieht man nicht"): die Schnellauswahl des
Angebotsstatus in der Angebote-Karte klappt nach unten auf - der eigene Scrollbalken dieser Liste
(overflow-y: auto) hat das Klappmenü aber am unteren Rand abgeschnitten, bei nur einem Angebot war
praktisch nichts davon zu sehen. Solange ein Menü offen ist, darf die Liste deshalb überstehen -
exakt dasselbe Vorgehen wie bei den Aufgabenblöcken (siehe .aufgaben-block:has(details[open])). */
.card-scroll-list:has(details[open]) { overflow: visible; max-height: none; }
/* Eine Zeile der Angebote- bzw. Debitoren/Kreditoren-Karte: Beleg-Link, Status-Schnellauswahl und
Briefumschlag stehen nebeneinander auf einer Höhe (siehe views/projects/show.ejs und
views/deals/show.ejs).
Von Stephan nachgereicht ("Button unter Button setzen, es soll gleichmäßig aussehen - der Button
von Gutschrift soll genau unter Button Rechnung sein" und "Mail Button bei Angebot und
Debitoren/Kreditoren-Kachel ebenfalls sauber untereinander in einer Reihe"): deshalb ein RASTER
statt einer einfachen Reihe - der Beleg-Link nimmt die erste, mitwachsende Spalte ein, Status und
Briefumschlag stehen in eigenen, festen Spalten. Dadurch beginnen die Knöpfe in jeder Zeile an
exakt derselben Stelle, egal wie lang "Angebot 2026-001", "Rechnung 2026-014" oder
"Gutschrift 26-001" gerade ist. */
/* Von Stephan gewünscht ("Hinterlege je Eintrag in der Kachel einen Hintergrund - selbe
Hintergrundfarbe wie bei Aufgaben-Kachel. Also Hintergrund Eintrag, nicht Hintergrund Kachel"):
jeder Eintrag liegt jetzt als eigene helle Karte in der Kachel - exakt dieselben Werte wie eine
Aufgabenzeile (siehe .aufgaben-block-inhalt .task-row.task-row-kompakt weiter unten: Fläche
#faf8f4, Rahmen #ece7de, 5 px Radius). Eine Zeile umfasst dabei genau das, was Stephan benannt
hat: "Angebot 2026-001" + Status-Knopf + Mail-Knopf. Gilt für die Angebote- und die
Debitoren/Kreditoren-Kachel (dort auch für die Eingangsrechnungs- und Bestellzeilen, damit die
Kachel einheitlich aussieht). */
/* Von Stephan gewünscht ("Neues Feld für Eingangsrechnung - Feld setzen (Größe 7 Zeichen, 26-120)
neben Belegnummer. Belegnummer Feld Größe anpassen, dass es eine Zeile ist. Name Interne BH
Nr."): Beleg-Nr. und die neue interne Nummer stehen gemeinsam in EINER Zeile - die Beleg-Nr.
nimmt den freien Platz ein, das BH-Feld ist genau 7 Zeichen breit und wächst nicht mit.
Eingebunden in views/projects/show.ejs, views/deals/show.ejs und views/businessFolders/show.ejs. */
/* Von Stephan gemeldet ("Interne BH Nr. und Belegnummer ist verrutscht"): die beiden Felder lagen
in einer flex-Zeile, deren rechtes Element eine eigene Beschriftung mitbrachte - dadurch saßen
Beschriftung und Eingabefeld auf unterschiedlichen Höhen. Jetzt ein Raster mit zwei Spalten:
links die Beleg-Nr. über die volle Restbreite, rechts das feste BH-Feld; beide Beschriftungen
stehen exakt auf einer Linie, beide Felder ebenso. */
.erg-beleg-felder {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: end;
}
.erg-beleg-felder .erg-belegnummer { width: 100%; min-width: 0; }
.erg-bh-nr-label {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
font-size: 0.72rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Von Stephan korrigiert ("Interne BH Nummer sollte 7 Zeichen breit sein und nicht 6"): Platz für
volle 7 Zeichen plus Innenabstand und Rahmen des Feldes. */
.erg-bh-nr { width: calc(7ch + 22px); flex: none; }
/* Von Stephan gemeldet ("Feld Lieferant / Behörde / Beleg-Nr. / Interne BH Nr. nicht in einer
Zeile"): eigene Zeile mit drei echten Spalten - die beiden Textfelder teilen sich den Platz,
die interne Nummer steht rechts in fester Breite. Auf schmalen Fenstern bricht die Zeile
geordnet um, statt die Felder zu quetschen. */
.erg-kopf-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
}
.erg-kopf-zeile .form-row { margin-bottom: 12px; min-width: 0; }
@media (max-width: 900px) { .erg-kopf-zeile { grid-template-columns: minmax(0, 1fr); } }
/* Von Stephan gewünscht ("Feld vor Freigabe Sachliche Prüfung: Fällig am (Datumsfeld). Freigabe
Sachliche Prüfung in der Breite anpassen, sodass alles in einer Zeile ist"): Datumsfeld schmal,
die Prüfer-Auswahl nimmt den Rest der Zeile ein. */
.erg-faellig-zeile {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.erg-faellig-zeile .form-row { margin-bottom: 0; }
.erg-faellig-zeile .erg-pruefer-feld select { width: 100%; }
/* Von Stephan gewünscht ("Fällig am Spalte in /eingangsrechnungen nach Beschreibung. Schrift
Kursiv."). */
.erg-faellig-spalte { font-style: italic; }
/* Von Stephan gemeldet ("Spalte wird 2-zeilig, da Lieferantenname zu lang ist"): der Lieferantenname
bleibt einzeilig und wird bei Bedarf mit … gekürzt - sonst wächst die gesamte Tabellenzeile in die
Höhe, sobald ein einziger langer Name dabei ist. Der vollständige Name steht im Tooltip.
Die Begrenzung sitzt auf .erg-lieferant-text INNERHALB der Zelle (siehe dort) - eine Tabellenzelle
selbst darf dafür nicht umgestellt werden. */
/* Balken der Speicherplatz-Übersicht (siehe views/settings/speicherplatz.ejs). Ampel: bis 75 %
grün, bis 90 % gelb, darüber rot - so ist auf einen Blick klar, ob es eng wird. */
.speicher-balken {
height: 22px;
border-radius: 4px;
background: #e6eaf0;
border: 1px solid var(--border);
overflow: hidden;
}
.speicher-balken-fuellung { height: 100%; }
.speicher-gruen { background: linear-gradient(180deg, #63c07a, #2e7d32); }
.speicher-gelb { background: linear-gradient(180deg, #ffc75a, #e8a11a); }
.speicher-rot { background: linear-gradient(180deg, #ef6a7c, #c02b3f); }
/* Bugfix (von Stephan gemeldet: "Lieferanten Spalte ist absolut nicht in der Zeile und komplett
verrutscht"): Hier stand vorher display:block AUF DER ZELLE. Damit ist die Zelle keine
Tabellenzelle mehr - sie fällt aus der Zeile heraus und schiebt alle folgenden Spalten
durcheinander. Das Kürzen langer Lieferantennamen passiert deshalb jetzt in einem eigenen
Element INNERHALB der Zelle; die Zelle selbst bleibt eine ganz normale Tabellenzelle. */
.erg-lieferant-text {
display: block;
max-width: 190px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Rückfrage-Fenster des BH-Knopfes (von Stephan gewünscht: "Kannst du das Popup in Mauszeiger-Nähe
öffnen?"): das Fenster wird per JavaScript direkt neben den Zeiger gesetzt (siehe
partials/erg-bh-knopf.ejs) - die sonst übliche Zentrierung und der Innenabstand der
Overlay-Ebene würden dabei stören, deshalb hier ausgeschaltet. Der abdunkelnde Hintergrund
bleibt, damit klar ist, dass eine Antwort erwartet wird. */
.erg-bh-frage-overlay { padding: 0; align-items: flex-start; justify-content: flex-start; }
.erg-bh-frage-box { box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
/* Buchhaltungs-Vermerk (von Stephan gewünscht: grüner Haken / rotes Kreuz hinter dem Papierkorb) -
ein Umschalt-Knopf, siehe partials/erg-bh-knopf.ejs. Die Farbe steckt im Symbol selbst; hier nur
feste Breite, damit die Knopfreihe beim Umschalten nicht springt, und ein deutlicherer
Mauszeiger-Hinweis. */
.erg-bh-knopf { width: 24px; text-align: center; line-height: 1; }
.erg-bh-knopf:disabled { opacity: 0.5; cursor: default; }
/* Eigene schmale Spalte für den Download-Haken (von Stephan gewünscht: "Setze für den Download-
Haken folgende Überschrift - Symbol Pfeil nach oben"). Feste Breite, damit die Spalte bei
gesetztem wie bei leerem Haken gleich breit bleibt. */
.erg-dl-spalte { width: 28px; text-align: center; }
/* Von Stephan gewünscht ("in der Kachel Debitoren/Kreditoren: wenn Beleg angezeigt wird, dann Text
in Kursiv 'Beleg in der BH am 12.08.2026' und Datum in Grün färben"): Hinweiszeile unter dem
Belegnamen in der Debitoren/Kreditoren-Kachel (siehe views/projects/show.ejs). */
/* Von Stephan nachgereicht ("Text hinter Beleg"): steht in derselben Zeile direkt hinter dem
Belegnamen, nicht mehr als eigene Zeile darunter. */
.erg-bh-hinweis {
font-style: italic;
font-size: 0.72rem;
color: var(--text-muted);
margin-left: 6px;
white-space: nowrap;
}
.erg-bh-hinweis-datum { color: var(--success); font-weight: 600; font-style: italic; }
.kachel-eintrag {
background: #faf8f4;
border: 1px solid #ece7de;
border-radius: 5px;
padding: 5px 8px;
margin: 0 0 4px;
}
.kachel-eintrag:last-child { margin-bottom: 0; }
.angebot-kachel-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) 132px 28px;
align-items: center;
gap: 8px;
margin: 0 0 4px;
}
.angebot-kachel-zeile > a:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Status füllt seine Rasterspalte komplett aus - dadurch sind die Knöpfe aller Zeilen exakt
gleich breit und stehen bündig untereinander. */
.angebot-kachel-zeile .status-picker { min-width: 0; }
.angebot-kachel-zeile .status-picker summary .badge {
width: 100%;
height: 24px;
padding: 0 8px;
border-radius: 4px;
box-sizing: border-box;
}
.angebot-kachel-zeile > .btn-icon { justify-self: center; }
.grid { display: grid; gap: 16px; }
/* .grid-5 (Software-Liste, "Vorname/Nachname statt einem Namensfeld"): für das Ansprechpartner-
Formular in views/customers/show.ejs, das durch die Aufteilung von "Name" in Vorname/Nachname
jetzt eine Spalte mehr braucht. */
/* .grid-6 (von Stephan gewünscht, /kunden/159): zusätzliches "Mobil"-Feld im selben Ansprechpartner-
Formular - eine Spalte mehr als .grid-5. */
/* .grid-7 (von Stephan gewünscht: "auch bei Ansprechpartner Herr und Frau Hinzufügen"): zusätzliches
Anrede-Feld im selben Ansprechpartner-Formular - eine Spalte mehr als .grid-6. */
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
.grid-7, .grid-6, .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
}
/* Punkt 2 (Software-Liste): frei anordenbare Dashboard-Kacheln, siehe utils/dashboardWidgets.js +
views/dashboard.ejs. 12-Spalten-Raster, jede Kachel belegt "span" Spalten (Klasse dw-span-N). */
.dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-bottom: 20px; }
.dashboard-widget { min-width: 0; position: relative; }
.dashboard-widget > .card, .dashboard-widget > .stat-card { margin-bottom: 0; height: 100%; }
.dw-span-3 { grid-column: span 3; }
.dw-span-4 { grid-column: span 4; }
.dw-span-6 { grid-column: span 6; }
.dw-span-12 { grid-column: span 12; }
@media (max-width: 900px) {
.dw-span-3, .dw-span-4, .dw-span-6, .dw-span-12 { grid-column: span 12; }
}
/* Von Stephan gewünscht: feste erste Kachelzeile im VSS Dashboard (Umsatz-/OPOS-Kennzahlen, siehe
views/dashboard-vss.ejs) - bewusst eigenes 5-Spalten-Raster statt des dw-span-Systems oben, da
diese Zeile NICHT per Drag & Drop anpassbar/entfernbar ist. */
.vss-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .vss-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .vss-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vss-kpi-row { grid-template-columns: 1fr; } }
/* Punkt 1 (Software-Liste Runde AS): kompakter Monats-Kalender in der "Kalender"-Kachel des
Baustellen-Dashboards, siehe views/dashboard-baustellen.ejs. */
.dashboard-mini-calendar { border-collapse: collapse; width: 100%; }
.dashboard-mini-calendar th { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 2px; }
.dashboard-mini-calendar td { text-align: center; padding: 1px; }
.dashboard-mini-calendar-day {
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 1; border-radius: 6px; text-decoration: none; color: inherit;
font-size: 0.78rem; position: relative;
}
.dashboard-mini-calendar-day:hover { background: rgba(20,40,80,0.06); }
.dashboard-mini-calendar-day.is-outside { color: var(--muted); opacity: 0.5; }
.dashboard-mini-calendar-day.is-today { background: var(--accent, #8e8e8e); color: #fff; font-weight: 700; }
.dashboard-mini-calendar-day .day-dot {
width: 4px; height: 4px; border-radius: 50%; background: var(--accent, #8e8e8e); margin-top: 2px;
}
.dashboard-mini-calendar-day.is-today .day-dot { background: #fff; }
/* Punkt 4 (Software-Liste Runde AU): Wochen-Kalender-Kachel im Baustellen-Dashboard (ersetzt den
bisherigen Monats-Mini-Kalender, siehe views/dashboard-baustellen.ejs) - zeigt die Verkehrs-
sicherung-Aufträge der aktuellen Woche inkl. Kunde. "min-width: 0" auf den Spalten aus demselben
Grund wie bei .cal-cell (siehe Bugfix Punkt 5 oben) - verhindert, dass ein langer Auftragsname
trotz Ellipsis eine einzelne Spalte breiter zieht als die übrigen 6.
*/
/* Von Stephan gewünscht (Baustellen-Dashboard, Beispielbild): Einträge je Tag nicht mehr als
schmale einzeilige Badges, sondern als größere, farbige Balken mit Adresse (fett), Kunde
(kursiv) und Beginn-Uhrzeit (groß, rechtsbündig) - siehe views/dashboard-baustellen.ejs. Die
Kachel darf dafür insgesamt etwas höher sein ("Fenster kann etwas größer nach unten skaliert
werden") - min-height/max-height gegenüber vorher deutlich vergrößert, mit Scrollbalken als
Sicherheitsnetz für sehr volle Tage. */
/* Von Stephan gewünscht ("Kalender Vorschau bitte auf 14 Tage erweitern. Bitte anpassen, sodass
alles auf dem Bildschirm draufpasst" - Baustellen-Übersicht auf einem Fernseher): 14 Tage werden
als zwei Reihen à sieben Tage dargestellt. Die Tageskacheln waren mit min-height 260px auf zwei
Reihen viel zu hoch (über 520px allein für den Kalender) - jetzt deutlich flacher, sie wachsen
aber weiterhin mit, wenn an einem Tag mehrere Aufträge liegen. Die Wochentagsbezeichnung steht
einmal als Kopfzeile darüber (siehe .dashboard-week-weekdays) statt in jeder Kachel. */
.dashboard-week-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; margin-bottom: 4px;
}
.dashboard-week-weekdays span {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding-left: 6px;
}
.dashboard-week-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dashboard-week-day {
min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius);
padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 64px;
}
.dashboard-week-day.is-today { background: #ffeaed; border-color: var(--accent, #8e8e8e); }
.dashboard-week-day-header { display: flex; align-items: baseline; justify-content: space-between; }
.dashboard-week-day-header .weekday { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.dashboard-week-day-header .daynum { font-size: 0.85rem; font-weight: 700; }
.dashboard-week-day.is-today .daynum { color: var(--accent, #8e8e8e); }
.dashboard-week-day-items { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; max-height: 220px; min-width: 0; }
.dashboard-week-badge {
display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; max-width: 100%;
box-sizing: border-box; background: #f2a71b; color: #1a1a1a; border-radius: 6px; padding: 6px 8px;
text-decoration: none;
}
.dashboard-week-badge:hover { background: #e0980f; }
/* Von Stephan gewünscht ("Wenn Kunde monea im Kalender angezeigt wird, dann bitte die Farbe auf
#e5bbf6 als Hintergrund setzen"): eigene Hintergrundfarbe für Aufträge dieses Kunden im
Baustellen-Kalender. Die dunkle Schrift der Kachel bleibt unverändert - auf dem hellen Flieder
ist sie gut lesbar; die Hover-Farbe ist eine Spur kräftiger, damit die Kachel auch hier
erkennbar reagiert. */
.dashboard-week-badge.badge-monea { background: #e5bbf6; }
.dashboard-week-badge.badge-monea:hover { background: #d79fee; }
.dashboard-week-badge-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dashboard-week-badge-adresse { font-weight: 700; font-size: 0.72rem; line-height: 1.2; overflow-wrap: break-word; }
.dashboard-week-badge-kunde { font-style: italic; font-size: 0.66rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-week-badge-zeit { font-weight: 700; font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 900px) {
/* Auf schmalen Geräten bleiben die sieben Spalten erhalten und werden waagerecht scrollbar - die
Wochentags-Kopfzeile muss dabei mitscrollen, sonst stünde sie über den falschen Tagen. */
.dashboard-week-calendar,
.dashboard-week-weekdays { grid-template-columns: repeat(7, minmax(140px, 1fr)); overflow-x: auto; }
}
/* Von Stephan gewünscht (Baustellen-Dashboard): "Aktive Aufträge - Verkehrssicherung/Halteverbot"
und "Anstehende Aufbauten" stehen jetzt nebeneinander (je dw-span-4) statt untereinander - siehe
views/dashboard-baustellen.ejs. Die bisherige breite 4-Spalten-Tabelle (Bezeichnung/Kunde/
Beginn/Ende) passt in ein Drittel der Breite nicht mehr sauber, daher hier eine kompakte,
zweizeilige Listen-Darstellung je Auftrag statt einer Tabelle - "der Größe angepasst", wie von
Stephan gewünscht. Über den optionalen "compact"-Parameter der partials/dashboard-widgets/
aktive_vs.ejs/aktive_hv.ejs aktiviert, damit das Standard-Dashboard (dort weiterhin volle Breite/
Tabelle) unverändert bleibt. */
.dash-compact-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dash-compact-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
min-width: 0;
}
.dash-compact-row:last-child { border-bottom: none; }
.dash-compact-row:hover { background: rgba(20,40,80,0.05); }
.dash-compact-main { min-width: 0; flex: 1; }
.dash-compact-title {
display: block; font-weight: 600; font-size: 0.86rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.dash-compact-sub { display: block; font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-compact-meta { flex-shrink: 0; text-align: right; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.dash-compact-meta .badge { font-size: 0.68rem; padding: 2px 7px; }
.dashboard-widget-handle {
display: none;
align-items: center;
justify-content: space-between;
background: rgba(20,40,80,0.06);
border-radius: var(--radius) var(--radius) 0 0;
padding: 4px 10px;
font-size: 0.85rem;
}
.dw-drag { cursor: grab; opacity: 0.6; }
.dw-remove { background: none; border: none; cursor: pointer; color: var(--danger); font-size: 0.85rem; padding: 2px 6px; }
.dashboard-widget.dw-editing { outline: 2px dashed var(--border); border-radius: var(--radius); }
.dashboard-widget.dw-editing[draggable="true"] { cursor: grab; }
@media (max-width: 600px) {
.grid-7, .grid-6, .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
.topbar-inner { gap: 8px; }
}
.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
.stat-card .label { color: var(--text-muted); font-size: 0.85rem; }
.stat-card .value { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr:hover td { background: #fcfcfc; }
/* Von Stephan gewünscht ("Überall wo die Leiste Erstellt Titel Lieferant Netto MwSt Brutto Status
ist, hier eine Sortierfunktion einbauen, aufsteigend, absteigend. wie bei Rechnungen. Das soll
immer Standard eingebaut werden! überall bitte aktualisieren"): klickbare Spaltenüberschriften.
Optik der Überschrift bleibt unverändert - nur Mauszeiger, Unterstreichung beim Überfahren und
der Richtungspfeil kommen dazu (genau wie in der Rechnungsliste, .sort-th-link). */
.sortier-kopf { cursor: pointer; user-select: none; }
.sortier-kopf:hover { text-decoration: underline; }
.sortier-pfeil { font-size: 0.85em; }
.btn {
display: inline-block;
background: var(--primary);
color: #fff;
border: none;
padding: 9px 16px;
border-radius: var(--radius);
cursor: pointer;
font-size: 0.9rem;
text-align: center;
}
.btn:hover { background: var(--primary-light); text-decoration: none; }
.btn-secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn-secondary:hover { background: #eef1f7; }
.btn-danger { background: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 0.82rem; }
/* Stift-Knopf neben den Antrags-Knöpfen ("alle Werte vor dem Erstellen anpassen"). Vorher ein
Emoji in einem eigenen kleinen Kasten - von Stephan bemängelt. Jetzt derselbe Rahmen und dieselbe
Höhe wie der Knopf daneben, nur schmaler, mit gezeichnetem Stift statt Emoji. */
.btn-stift {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
}
.btn-stift svg { width: 14px; height: 14px; display: block; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
/* "Kunde sperren"/"Entsperren"-Button: bewusst schwarz mit weißer Schrift, unterscheidet sich
damit klar von den übrigen (blauen/roten) Aktions-Buttons - siehe views/customers/show.ejs. */
.btn-sperren { background: #111; color: #fff; }
.btn-sperren:hover { background: #000; }
form .form-row { margin-bottom: 14px; }
form label { display: block; margin-bottom: 5px; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
input, select, textarea {
width: 100%;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.92rem;
font-family: inherit;
background: #fff;
}
textarea { resize: vertical; min-height: 70px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.badge {
display: inline-block;
padding: 3px 9px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
}
/* Größerer, eckiger Status-Badge speziell für Aufgaben (statt der sonst runden Pill-Badges) */
.badge.badge-task { border-radius: 4px; padding: 6px 14px; font-size: 0.9rem; font-weight: 700; }
.badge-gray { background: #e5e7eb; color: #444; }
.badge-green { background: #dcf3df; color: var(--success); }
.badge-yellow { background: #fdf1d6; color: var(--warning); }
.badge-red { background: #fbdde1; color: var(--danger); }
.badge-blue { background: #ebebeb; color: var(--primary-light); }
.badge-accent { background: #fdd0d6; color: var(--accent-dark); }
/* "Gesperrt"/"Deaktiviert"-Hinweis: schwarz mit weißer Schrift (analog zum Sperren-Button),
damit der Status im Kunden-/Lieferanten-Titel sofort ins Auge fällt. */
.badge-gesperrt { background: #111; color: #fff; margin-left: 6px; }
/* Item 9 (Software-Liste, "Rechnungen: Status-Badges fetter/Viereck-Stil"): kräftigerer,
eckigerer "Chip"-Stil statt der sonst üblichen leichten Pill-Badges - bewusst eine eigene
Modifier-Klasse (statt .badge global zu ändern), da .badge auch in vielen anderen Modulen
(Aufträge, Angebote, Aufgaben, Antragsstatus, Gutschriften) im bisherigen Pill-Stil verwendet
wird; wird gezielt nur bei den Rechnungs-Status-Badges eingebunden (views/invoices/list.ejs +
show.ejs, partials/status-picker.ejs badgeClass-Parameter). Schriftgröße bleibt unverändert,
nur Deckkraft/Sättigung des Hintergrunds, Eckenradius und Schriftgewicht ändern sich. */
.badge.badge-solid { border-radius: 4px; padding: 4px 10px; font-weight: 700; }
.badge-solid.badge-green { background: var(--success); color: #fff; }
.badge-solid.badge-yellow { background: var(--warning); color: #fff; }
.badge-solid.badge-red { background: var(--danger); color: #fff; }
.badge-solid.badge-blue { background: var(--primary-light); color: #fff; }
.badge-solid.badge-accent { background: var(--accent-dark); color: #fff; }
.badge-solid.badge-gray { background: #6b7280; color: #fff; }
/* Item 8 (Software-Liste, "Rechnungen: überfällige Zeilen komplett rot"): gesamte Zeile (nicht nur
die Fälligkeits-Spalte) in der Rechnungsübersicht rot einfärben, wenn die Rechnung noch offen und
bereits überfällig ist (siehe views/invoices/list.ejs
+ routes/invoices.js istUeberfaellig
- bereits bezahlte/stornierte Rechnungen werden dort bewusst ausgenommen). Höhere Spezifität als
das globale "a { color: ... }" (siehe oben), daher wirkt es auch auf verlinkte Zellen (Nr.,
Auftrag) mit.
Der Status-Badge selbst behält seine eigene Farbe (Badges setzen ihre Farbe inline/über eigene
Klassen mit höherer Spezifität als diese Zeilenregel). */
tr.row-overdue td { color: var(--danger); }
/* Bugfix (echter Fehler, von Stephan gemeldet): neuer Rechnungsstatus "Ausgebucht" (siehe
views/invoices/list.ejs
+ routes/invoices.js) - die Rechnung bleibt in der Liste sichtbar,
wird aber visuell durchgestrichen und abgeblendet dargestellt (analog zu row-overdue oben).
Letzte Spalte (Aktionen: PDF-Button/⋮-Menü) bewusst ausgenommen, damit deren Buttons nicht
ebenfalls durchgestrichen wirken. */
tr.row-ausgebucht td:not(:last-child) { text-decoration: line-through; color: var(--text-muted); opacity: 0.75; }
/* Auftragsstatus-Farbverwaltung (Einstellungen -> Auftragsstatus): Farbpalette + Hex-Code-Feld
neben dem nativen Farbwähler, siehe views/settings.ejs. */
.project-status-preview { white-space: nowrap; }
.color-field { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.color-field input[type="color"] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; background: none; }
.color-field input[type="text"] { font-family: monospace; }
.color-palette { display: flex; gap: 4px; flex-wrap: wrap; max-width: 190px; }
.color-swatch {
width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15);
cursor: pointer; padding: 0;
}
.color-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }
/* Status-Schnellauswahl: klickbarer Badge (details/summary), Popup mit den übrigen
Status-Optionen zum direkten Umschalten per Klick (siehe partials/status-picker.ejs). */
.status-picker { display: inline-block; position: relative; }
.status-picker summary { list-style: none; cursor: pointer; }
.status-picker summary::-webkit-details-marker { display: none; }
/* Von Stephan gewünscht ("Statusbutton in gleicher Breite anzeigen lassen. Keine Veränderung der
Breite. Selbige bei Antrag in Aufträge"): die Status-Badges in den Listenübersichten (Aufträge
Status/Antrag, Angebote, Rechnungen, Gutschriften) waren bisher exakt so breit wie ihr jeweiliger
Text - je nach Status (z.B. "Offen" vs. "In Beantragung") ergaben sich dadurch unterschiedlich
breite, unruhig wirkende Badges innerhalb derselben Spalte. Jetzt feste, einheitliche Breite,
Text zentriert; ein (z.B. individuell umbenannter, ungewöhnlich langer) Status wird zur
Sicherheit abgeschnitten (Ellipsis) statt die Breite zu sprengen.
.status-picker summary .badge: aufklappbare Schnellauswahl (Angebote/Rechnungen/Gutschriften).
td[data-col] .badge: reine Anzeige-Badges ohne Popup (Aufträge Status/Antrag, siehe
partials/project-status-badge.ejs bzw. antrag-status-badge.ejs in views/projects/list.ejs). */
.status-picker summary .badge {
display: inline-flex; align-items: center; justify-content: center; gap: 3px;
width: 128px; box-sizing: border-box;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Von Stephan gemeldet ("/auftraege - und Status Button wie offen einheitlich machen"): die Breite
war zwar schon einheitlich, Höhe und Innenabstand aber nicht - der Auftragsstatus kommt als
einfacher Badge (partials/project-status-badge.ejs, Innenabstand 3px/9px, 21 px hoch), der
Antragsstatus dagegen als "badge-solid" bzw. als aufklappbare Schnellauswahl (4px/10px, 22-23 px
hoch). Nebeneinander in derselben Zeile fielen die unterschiedlich hohen Kästchen sofort auf.
Beide Spalten bekommen deshalb jetzt exakt dieselbe Box: gleiche Breite, gleiche Höhe, Text
mittig - unabhängig davon, welcher der beiden Bausteine die Farbe liefert. */
/* Von Stephan gemeldet ("Status Button, Antrag Button solltest du anpassen. Die müssen eckiger
werden, einheitlich wie der Offen Button. Es sieht alles bunt und durcheinander aus"):
gemessen war der Auftragsstatus eine RUNDE Pille (Eckenradius 100 px, 21 px hoch,
Schriftstärke 600), der Antragsstatus daneben ein ECKIGER Kasten (Radius 4 px, 22-23 px hoch,
Schriftstärke 700) - zwei verschiedene Formen direkt nebeneinander in derselben Zeile.
Auf Rückfrage festgelegt: beide eckig wie der "Offen"-Knopf in der Antrag-Spalte. Gleiche Form,
gleiche Höhe, gleiche Schriftstärke, gleiche Breite. Gilt ausdrücklich NUR in dieser Tabelle -
die Badges in Angebots-, Rechnungs- und Gutschriftlisten bleiben unverändert. */
td[data-col="status"] .badge, td[data-col="antrag"] .badge {
display: inline-flex; align-items: center; justify-content: center; gap: 3px;
/* Füllt die fest zugeteilte Spaltenbreite aus - dadurch sind beide Knöpfe in jeder Zeile exakt
gleich groß, egal wie breit das Fenster ist. */
width: 100%; max-width: 140px; height: 24px; padding: 0 8px; box-sizing: border-box;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-align: center; line-height: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
td[data-col="antrag"] .status-picker { display: block; }
/* Die Schnellauswahl in der Antrag-Spalte sitzt in einem - damit die Box dort identisch
bleibt, gilt dieselbe Höhe auch für den darin liegenden Badge (siehe .status-picker summary
.badge oben, das nur die Breite setzt). */
td[data-col="antrag"] .status-picker summary .badge { height: 24px; padding: 0 10px; }
/* Von Stephan gewünscht ("Haken, wenn nicht gedownloadet wurde dann leer lassen. Wenn die Datei
gedownloadet wurde einen Haken"): kleines, fest breites Häkchen-Symbol vor dem PDF-Button in
Angebote/Rechnungen (siehe views/quotes/list.ejs, views/invoices/list.ejs) - feste Breite, damit
der PDF-Button nicht je nach gesetztem/leerem Haken seine Position verschiebt. */
.pdf-downloaded-check {
display: inline-block; width: 16px; text-align: center; color: var(--success); font-weight: 700;
}
/* Von Stephan gewünscht ("neben Download haken E-Mail Symbol einbauen"): analog zum Download-Haken
oben, feste Breite damit nachfolgende Buttons nicht springen. Nur sichtbar, wenn die Rechnung
tatsächlich per E-Mail versendet wurde (siehe views/invoices/list.ejs). */
.email-versendet-check {
display: inline-block; width: 16px; text-align: center;
}
.status-picker-caret { font-size: 0.65em; opacity: 0.7; }
.status-picker-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 30;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px;
min-width: 150px;
box-shadow: 0 8px 24px rgba(0,0,0,0.14);
display: flex;
flex-direction: column;
gap: 2px;
}
/* Bugfix (Software-Liste Runde AU, Punkt 2): das Aktionsmenü (⋮) bei Zeilen nahe dem unteren
Fensterrand - z.B. die letzten Zeilen einer langen Tabelle in Angebote/Lieferscheine/
Rechnungen/Eingangsrechnungen - ragte nach unten aus dem sichtbaren Fenster bzw. wurde vom
umgebenden ".container" (overflow-x:auto, siehe oben im Layout-Abschnitt) abgeschnitten, da
dort unterhalb der Tabelle kein Platz mehr war. Die vorherige Korrektur (Punkt 142, Runde AS)
hatte nur das horizontale Abschneiden am rechten Rand behoben (siehe .task-menu-picker /
.assignee-picker-menu unten), nicht dieses vertikale Problem. Die Klasse "flip-up" wird per
JavaScript (siehe partials/nav.ejs, Status-Schnellauswahl-Skript) automatisch gesetzt, sobald
beim Öffnen nicht genug Platz nach unten vorhanden ist - dasselbe Menü klappt dann stattdessen
nach oben auf. Zentral hier definiert, damit alle status-picker-menu-Varianten (Aktionsmenü,
einfache Status-Auswahl, Mitarbeiter-/Deadline-Picker) automatisch denselben Mechanismus nutzen. */
.status-picker-menu.flip-up { top: auto; bottom: calc(100% + 4px); }
/* Von Stephan gewünscht ("Dropdown-Menü bei Rechnungen geht über den Fensterrand hinaus"): analog
zu .flip-up oben, aber für die horizontale Richtung - wird per JavaScript (siehe partials/nav.ejs,
selbe Status-Schnellauswahl-Toggle-Logik) automatisch gesetzt, sobald das Menü beim Öffnen über
den RECHTEN Fensterrand hinausragen würde (z.B. Status-Spalte in der breiten Rechnungen-/Angebote-/
Gutschriften-Tabelle, die je nach Fensterbreite/Zoomstufe nah am rechten Rand liegt). Klappt dann
stattdessen rechtsbündig zum Auslöser auf (nach links), statt vom umgebenden ".container"
(overflow-x:auto) oder dem Fensterrand abgeschnitten/unsichtbar zu werden. */
.status-picker-menu.flip-left { left: auto; right: 0; }
.status-picker-menu form { margin: 0; }
.status-picker-menu button {
display: block;
width: 100%;
background: none;
border: none;
padding: 5px 6px;
cursor: pointer;
border-radius: 4px;
text-align: left;
}
.status-picker-menu button:hover { background: var(--bg); }
.flash {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 0.9rem;
}
.flash-error { background: #fbdde1; color: var(--danger); }
.flash-success { background: #dcf3df; color: var(--success); }
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
}
/* Von Stephan gewünscht: eigenes Hintergrundbild NUR auf der eigentlichen Login-Seite (views/
login.ejs) - NICHT auf views/set-password.ejs ("Passwort erstellen" über den Einladungslink),
das denselben .login-wrap-Grundcontainer wiederverwendet. Daher eine eigene, nur dort gesetzte
Zusatzklasse statt die Regel direkt an .login-wrap zu hängen. "Selbst skalieren" = background-
size: cover füllt die komplette Fläche unabhängig von der Bildschirmgröße, background-position:
center sorgt dafür, dass dabei immer der Bildmittelpunkt (hier: das VSS-Logo) sichtbar bleibt
statt zufällig ab- oder weggeschnitten zu werden. */
/* WHTK (19.08.2026, Stephans Vorgabe "Hintergrund wie im Screenshot"): derselbe dunkle
Radialverlauf wie auf whtk.de (Elementor-Hero: #0a1a2e innen nach #050a14 außen) statt des
bisherigen Hintergrundbilds - dadurch entfällt auch das Laden des JPG. */
.login-wrap.login-bg {
background-image: radial-gradient(at center center, #0a1a2e 0%, #050a14 150%);
}
/* Breites Kirsten-Logo auf der Anmeldeseite (statt des quadratischen App-Symbols). */
.login-logo.login-logo-breit { width: 232px; height: auto; border-radius: 0; }
.login-untertitel { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: -2px; }
.login-box {
background: #fff;
padding: 36px;
border-radius: 12px;
width: 100%;
max-width: 380px;
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.login-box h1 { margin-top: 0; font-size: 1.3rem; text-align: center; color: var(--primary); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.login-logo { width: 64px; height: 64px; border-radius: 14px; }
.login-brand h1 { margin: 0; }
.item-table input { padding: 6px 8px; }
.item-table td { vertical-align: top; }
.remove-row { color: var(--danger); cursor: pointer; background: none; border: none; font-size: 1.1rem; }
.edit-row { color: var(--primary-light); cursor: pointer; background: none; border: none; font-size: 1rem; margin-right: 6px; }
/* Von Stephan gewünscht: Positionen (Angebote/Rechnungen/Gutschriften/Angebotsvorlagen) sollen sich
per Klick 1:1 duplizieren lassen - eigene Farbe (Akzent-Orange) zur klaren Unterscheidung von
Bearbeiten (Blau) und Löschen (Rot), siehe duplicatePositionRow() in public/js/artikel-suche.js. */
.duplicate-row { color: var(--accent-dark); cursor: pointer; background: none; border: none; font-size: 1rem; margin-right: 6px; }
/* Positionen per Drag & Drop sortierbar (Angebote/Rechnungen/Aufgabenvorlagen), siehe
makeItemsSortable() in public/js/item-table.js. */
.item-table td.drag-handle { width: 22px; text-align: center; color: var(--text-muted); cursor: grab; user-select: none; padding: 6px 2px; }
.item-table td.drag-handle:active { cursor: grabbing; }
.item-table tr.dragging-row { opacity: 0.4; }
/* Zusatztext-Vorschau unter der Position (Angebote/Rechnungen/Gutschriften/Vorlagen), siehe
updateRowBeschreibungPreview() in public/js/item-table.js. */
.beschreibung-zusatz-preview { font-size: 10px; color: var(--text-muted); margin-top: 3px; white-space: pre-line; }
/* Von Stephan gewünscht ("Vorschau Zusatztext 10 Zeilen anzeigen lassen sonst mehr anzeigen button
klickbar machen"): Link zum Aus-/Einklappen bei mehr als 10 Zeilen Zusatztext, siehe
renderBeschreibungPreviewText() in public/js/item-table.js. */
.beschreibung-zusatz-preview-toggle { font-size: 10px; color: var(--primary); text-decoration: underline; cursor: pointer; display: inline-block; margin-top: 2px; }
/* Zusatztext-Live-Vorschau im "Position bearbeiten"-Popup (Angebote), siehe public/js/artikel-suche.js */
.pos-zusatztext-preview {
margin-top: 6px; font-size: 0.82rem; color: var(--text-muted); background: var(--bg);
border-radius: var(--radius); padding: 6px 10px; white-space: pre-wrap;
}
.pos-zusatztext-preview-label { font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.02em; }
.chat-wrap { display: flex; gap: 20px; height: 70vh; }
.chat-channels { width: 220px; border-right: 1px solid var(--border); padding-right: 16px; overflow-y: auto; }
.chat-channels a { display: block; padding: 8px 10px; border-radius: var(--radius); margin-bottom: 4px; color: var(--text); }
.chat-channels a.active, .chat-channels a:hover { background: var(--bg); text-decoration: none; }
.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: 10px; background: var(--bg); border-radius: var(--radius); margin-bottom: 12px; }
.chat-msg { margin-bottom: 12px; }
.chat-msg .meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 2px; }
.chat-msg .bubble { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: inline-block; max-width: 80%; }
.chat-msg.own .bubble { background: var(--primary); color: #fff; border-color: var(--primary); }
.chat-form { display: flex; gap: 8px; }
/* Punkt 6 (Software-Liste Runde AU): Löschen-Icon je eigener Nachricht (bzw. jeder Nachricht für
Nutzer mit dem Recht "loeschen"), siehe views/chat/index.ejs. */
.chat-msg-delete {
background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem;
padding: 0 3px; margin-left: 4px; line-height: 1; vertical-align: middle;
}
.chat-msg-delete:hover { color: #ef445b; }
/* Punkt 6 (Software-Liste Runde AU): blinkender Punkt neben "Chat" in der Seitenleiste, solange der
Mitarbeiter eine @Mention hat, die er noch nicht gesehen hat (siehe server.js
res.locals.unreadMentionCount, db/schema.sql mention_notifications, routes/chat.js). Bewusst eine
eigene, auffällige Animation statt eines statischen Badges, da es aktuell keine andere sichtbare
Benachrichtigungs-Anzeige in der App gibt, die man stattdessen mitnutzen könnte. */
.chat-mention-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef445b;
margin-left: 6px; vertical-align: middle; animation: whtk-mention-blink 1.1s ease-in-out infinite;
}
/* Von Stephan gewünscht ("zusätzlich zur Chat Erwähnung Sprechblasen mit Ausrufezeichen Symbol links
neben Suche aufblinken lassen"): zweiter, größerer Hinweis auf ungelesene Chat-Erwähnungen direkt
im Kopfbereich neben der Suche - nutzt dieselbe whtk-mention-blink-Animation wie .chat-mention-dot
oben, damit beide Indikatoren optisch im Gleichklang blinken. */
.mention-alert-icon {
font-size: 20px; line-height: 1; margin-right: 10px; text-decoration: none; cursor: pointer;
animation: whtk-mention-blink 1.1s ease-in-out infinite;
}
/* Von Stephan gewünscht (Rechnungssperre/Freigabe-Workflow, siehe routes/invoices.js): Zähler-Badge
neben "Rechnungen" im Menü, nur für Admin/Buchhaltung sichtbar - zeigt die Anzahl offener
Freigabe-Anfragen (invoices.freigabe_status = 'angefragt'), analog zum Blink-Punkt bei "Chat",
aber als Zahl statt reinem Hinweispunkt, da hier mehrere Anfragen gleichzeitig offen sein können. */
.nav-count-badge {
display: inline-block; min-width: 16px; padding: 0 4px; height: 16px; line-height: 16px;
border-radius: 8px; background: #ef445b; color: #fff; font-size: 10px; font-weight: 700;
text-align: center; margin-left: 6px; vertical-align: middle;
}
/* Von Stephan gewünscht ("Freigabe anfrage für Admin und buchhalter auch in der Rechnungsliste mit
rotem Kreis und ausrufezeichen anzeigen lassen"): Zeilen-Indikator neben der Rechnungsnummer in
views/invoices/list.ejs - bewusst statisch (kein Blinken) wie andere dauerhafte Status-Hinweise in
Listen (z.B. row-overdue), da es sich um viele gleichzeitig sichtbare Zeilen statt eine einzelne
Benachrichtigung handelt. */
.freigabe-alert-dot {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%; background: #ef445b; color: #fff;
font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: middle;
}
@keyframes whtk-mention-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.7); }
}
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.photo-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.photo-item { position: relative; }
.photo-item form { position: absolute; top: 4px; right: 4px; margin: 0; }
.photo-item .photo-delete { background: rgba(255,255,255,0.9); }
.mobile-capture { max-width: 480px; margin: 0 auto; padding: 20px; }
.mobile-capture h1 { font-size: 1.2rem; }
/* Punkt 2 (Software-Liste Runde AF): Mini-Vorschau-Kacheln für Aufgaben-Dokumente (views/tasks/
form.ejs) - kompakter als .photo-grid, da hier auch Nicht-Bild-Dateien (PDF etc.) mit generischem
Symbol dargestellt werden müssen. */
.doc-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 4px; }
.doc-mini-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; text-align: center; }
.doc-mini-thumb { display: flex; align-items: center; justify-content: center; height: 70px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.doc-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-mini-icon { font-size: 1.8rem; }
.doc-mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.doc-mini-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.doc-mini-actions form { margin: 0; }
.btn-icon-sm { border: none; background: none; cursor: pointer; color: var(--danger); font-size: 0.9rem; padding: 0; }
.camera-preview { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 12px; background: #000; }
/* Sammelrechnung: Titelzeile (Auftrags-Betreff) über den Positionen eines Angebots */
.invoice-heading-row td {
background: #e8e8e8;
color: #111111;
font-weight: 700;
font-size: 0.85rem;
}
.invoice-heading-row:hover td { background: #e8e8e8; }
.totals-box { max-width: 320px; margin-left: auto; }
.totals-box .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.totals-box .row.total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
/* Ausgaben-Übersicht (Lieferanten/Behörden-Detailseite): 3 Spalten - Gesamt / aktuelles Jahr /
Vorjahr, siehe views/suppliers/show.ejs. */
.expenses-col { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.expenses-col-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.expenses-col-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.9rem; }
.muted { color: var(--text-muted); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.small { font-size: 0.82rem; }
/* ============================================================
"Auftrag für Halteverbot"-Fensteroptik, angelehnt an klassische
Formularmasken (emis.halteverbot) – Titelleiste, hellblaue
Kästen, Checklisten, kompakte Icon-Buttons, Korrespondenztabelle
============================================================ */
.hv-window {
background: #e8e8e8;
border: 1px solid #7f93b8;
border-radius: 4px;
padding: 0 0 14px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(30,50,90,0.12);
}
.hv-titlebar {
background: linear-gradient(180deg, #818181, #575757);
color: #fff;
padding: 8px 14px;
border-radius: 3px 3px 0 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 600;
}
.hv-titlebar .hv-titlebar-fields {
display: flex;
gap: 16px;
align-items: center;
flex: 1;
font-weight: 400;
font-size: 0.78rem;
}
.hv-titlebar .hv-titlebar-fields label { color: #e3e3e3; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.03em; display: block; margin-bottom: 2px; }
.hv-titlebar .hv-titlebar-fields input {
background: #fff;
border: 1px solid #111111;
border-radius: 2px;
padding: 3px 6px;
font-size: 0.8rem;
color: #111111;
}
.hv-body { padding: 12px 14px 0; }
.fieldset-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 12px;
align-items: start;
}
@media (max-width: 1100px) { .fieldset-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fieldset-grid { grid-template-columns: 1fr; } }
.fieldset-box {
border: 1px solid #97a9c8;
border-radius: 3px;
background: #f4f4f4;
padding: 8px 10px 10px;
margin: 0;
min-width: 0;
}
.fieldset-box legend {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #575757;
padding: 0 6px;
display: flex;
align-items: center;
gap: 6px;
}
/* Auftraggeber / Sachbearbeiter+Routenplanung / Behörde sollen gleich hoch sein, die Maßnahmen
Details daneben aber NICHT mitgestreckt werden (von Stephan so verlangt). Deshalb liegen die
ersten drei Spalten in einer eigenen Gruppe: innerhalb der Gruppe richten sie sich aneinander
aus, nach außen zählt die Gruppe als eine Zelle. Die Spaltenbreiten bleiben exakt gleich, weil
die Gruppe drei der vier Rasterspalten samt der beiden Abstände dazwischen einnimmt. */
.fieldset-dreiergruppe {
grid-column: span 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: stretch;
min-width: 0;
}
/* Die mittlere Spalte trägt zwei Kästen untereinander (Sachbearbeiter, Routenplanung). */
.fieldset-spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fieldset-spalte > .fieldset-box:first-child { flex: 1; }
@media (max-width: 1100px) {
.fieldset-dreiergruppe { grid-column: span 2; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.fieldset-dreiergruppe { grid-column: span 1; grid-template-columns: 1fr; }
}
/* Logo statt Überschrift in der Routenplanungs-Kachel (von Stephan gewünscht: 20 px hoch). */
.xrouten-logo { height: 20px; width: auto; display: block; }
/* Gelber Knopf mit schwarzer Schrift (von Stephan für "Abbau in Xrouten einplanen" gewünscht). */
/* Das xRouten-Zeichen ersetzt in den drei Einplanen-Knöpfen das bisherige Kalender-Symbol
(von Stephan mit der Bilddatei vorgegeben). */
.xrouten-knopf-icon { height: 14px; width: 14px; object-fit: contain; vertical-align: -2px; }
.btn-gelb { background: #f2c200; color: #1c1c1c; border-color: #d8ae00; }
.btn-gelb:hover { background: #dcb000; color: #1c1c1c; }
.hv-xrouten-status { font-size: 0.72rem; margin: 2px 0 4px; line-height: 1.35; }
.fieldset-box .form-row { margin-bottom: 6px; }
.fieldset-box label { font-size: 0.65rem; margin-bottom: 2px; color: #4c5f80; text-transform: uppercase; letter-spacing: 0.02em; }
.fieldset-box input,
.fieldset-box select,
.fieldset-box textarea {
padding: 3px 6px;
font-size: 0.78rem;
border-radius: 2px;
border: 1px solid #9fb0cc;
background: #fff;
box-shadow: inset 1px 1px 2px rgba(20,40,80,0.08);
}
.fieldset-box textarea { min-height: 40px; }
.fieldset-box .readonly-line { font-size: 0.78rem; margin-bottom: 6px; word-break: break-word; }
.fieldset-box .readonly-line strong { display: block; font-size: 0.82rem; }
.fieldset-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
/* Checklisten (angehakte Arbeitsschritte je Bereich) */
.hv-checklist { list-style: none; margin: 6px 0; padding: 0; border-top: 1px solid #d8d8d8; padding-top: 6px; }
.hv-checklist li { margin-bottom: 3px; }
.hv-checklist label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
text-transform: none;
color: #33425e;
cursor: pointer;
}
.hv-checklist input[type="checkbox"] { width: auto; box-shadow: none; margin: 0; }
/* Kleine quadratische Icon-Buttons statt großer Textbuttons */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border-radius: 3px;
border: 1px solid #9fb0cc;
background: #fff;
color: var(--primary);
cursor: pointer;
font-size: 0.8rem;
text-decoration: none;
line-height: 1;
}
.btn-icon:hover { background: var(--bg); text-decoration: none; }
/* Von Stephan gewünscht (Aufgabenstatus-Sortierung "einheitlich aussehen lassen"): deaktivierte
Auf/Ab-Buttons (erster/letzter Status) bleiben sichtbar (feste Spaltenbreite/Ausrichtung),
wirken aber klar unklickbar statt wie ein normaler Button. */
.btn-icon:disabled { opacity: 0.3; cursor: default; }
.btn-icon:disabled:hover { background: #fff; }
.btn-icon.btn-icon-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-icon.btn-icon-danger { color: var(--danger); border-color: #f2bfc6; }
/* Von Stephan gewünscht ("Buttons anderster Anordnung, Spalte wird zu hoch"): mehrere Icon-Buttons
in einer schmalen Tabellenspalte (z.B. Eingangsrechnungen-Zeile, siehe views/projects/show.ejs)
sollen nebeneinander bleiben statt umzubrechen und dadurch die Zeile aufzublähen. */
.er-row-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
/* Gold-Buttons für PDF-Antrag / Negativlisten / Schildzettel etc. */
.btn-gold {
display: inline-block;
background: linear-gradient(180deg, #f6d382, #e0a83a);
border: 1px solid #a97c22;
color: #4a3510;
font-size: 0.72rem;
font-weight: 600;
padding: 4px 9px;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
}
.btn-gold:hover { background: linear-gradient(180deg, #f8dc9c, #eab84f); text-decoration: none; }
/* Roter Knopf, der NICHTS mit Löschen zu tun hat (für "BAST in Xrouten einplanen").
Wichtig: nicht .btn-danger verwenden - die Regel weiter unten blendet für Rollen ohne
Löschrecht sämtliche .btn-danger aus, weil Rot dort für "Löschen" steht. Von Stephan gemeldet:
"bei sachbearbeiter fehlt BAST in Xrouten einplanen?" - genau das war der Grund. */
.btn-rot { background: var(--danger); color: #fff; }
.btn-rot:hover { background: var(--danger); filter: brightness(1.08); color: #fff; }
/* Gleiche Form wie der goldene Knopf daneben, nur in Blau (von Stephan für "Online-Antrag"
gewünscht: "Blauer Hintergrund und Form wie der Orangene"). */
.btn-blau {
display: inline-block;
background: linear-gradient(180deg, #969696, #575757);
border: 1px solid #414141;
color: #fff;
font-size: 0.72rem;
font-weight: 600;
padding: 4px 9px;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
}
.btn-blau:hover { background: linear-gradient(180deg, #a4a4a4, #646464); color: #fff; text-decoration: none; }
/* Von Stephan vorgegeben ("BAST Online Antrag - Button Farbe Orange Verlauf"): gleiche Form und
Größe wie der blaue HV-Knopf daneben, nur im orangen Verlauf - dieselbe Machart wie .btn-gold,
damit die Knopfreihe einheitlich wirkt. */
.btn-orange {
display: inline-block;
background: linear-gradient(180deg, #ffb04a, #e81a35);
border: 1px solid #b41026;
color: #fff;
font-size: 0.72rem;
font-weight: 600;
padding: 4px 9px;
border-radius: 3px;
text-decoration: none;
line-height: 1.35;
}
.btn-orange:hover { background: linear-gradient(180deg, #ffc06a, #f28f26); color: #fff; text-decoration: none; }
/* Kompakte Tabelle für die Historie ("Tabelle der Korrespondenz") */
.table-compact th, .table-compact td { padding: 5px 8px; font-size: 0.8rem; }
.table-compact td.col-betreff { font-weight: 600; }
.table-compact td.col-inhalt { color: var(--text-muted); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corr-table { background: #fff; border: 1px solid #b9c2d0; border-radius: 3px; overflow: hidden; }
.corr-table th { background: #f4f4f4; color: #33425e; }
/* Von Stephan gewünscht ("Umsatzanzeige erstellen gemäß Bild"): Kategorie-x-Monat-Tabelle (14
Spalten) braucht horizontales Scrollen auf schmalen Bildschirmen, siehe
views/partials/dashboard-widgets/umsatzanzeige.ejs. */
.table-responsive { overflow-x: auto; }
.umsatz-tabelle { min-width: 900px; }
.umsatz-summenzeile { font-weight: 600; background: #f4f6fa; }
.umsatz-chart-titel { margin: 18px 0 10px; font-size: 0.95rem; }
/* Reines CSS-Balkendiagramm (bewusst ohne Chart.js/CDN, siehe Kommentar im Partial) für den
Jahresvergleich 2024/2025/2026. */
.umsatz-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 0 4px; border-bottom: 1px solid var(--border); }
.umsatz-chart-monat { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.umsatz-chart-balken { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.umsatz-chart-balken-jahr { width: 8px; min-height: 0; border-radius: 2px 2px 0 0; }
.umsatz-chart-jahr-0 { background: #b7c3d6; }
.umsatz-chart-jahr-1 { background: var(--primary-light); }
.umsatz-chart-jahr-2 { background: var(--accent); }
.umsatz-chart-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.umsatz-chart-legende { display: flex; gap: 14px; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); }
.umsatz-chart-legende-eintrag { display: flex; align-items: center; gap: 5px; }
.umsatz-chart-legende-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
/* Historie / Verlauf */
.quick-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
/* Bugfix (Software-Liste, "Erledigte Aufträge einklappbar"): eigener, per Klick auf-/zuklappbarer
Bereich für archivierte ("erledigt") Aufträge unten in der Kundenauftragsliste. */
.customer-erledigt-details {
margin-top: 14px;
border-top: 1px solid var(--border);
padding-top: 10px;
}
.customer-erledigt-summary {
list-style: none;
cursor: pointer;
font-weight: 600;
color: var(--text-muted, #6b7280);
user-select: none;
}
.customer-erledigt-summary::-webkit-details-marker { display: none; }
.customer-erledigt-summary::before {
content: '▶';
display: inline-block;
margin-right: 6px;
font-size: 0.7em;
transition: transform 0.15s ease;
}
.customer-erledigt-details[open] .customer-erledigt-summary::before {
transform: rotate(90deg);
}
/* Von Stephan gewünscht (/kunden/149): "Aufträge/Baustellen"-Kachel auf der Kontaktseite auf 10
sichtbare Zeilen begrenzen und darüber hinaus scrollen lassen statt die Karte beliebig lang
werden zu lassen - Kopfzeile (~38px) + 10 Datenzeilen (~40px) ergibt die max-height unten. */
.customer-projects-scroll {
max-height: 438px;
overflow-y: auto;
}
/* Von Stephan gewünscht (/kunden/159): "Angebote"- und "Rechnungen"-Kacheln auf der Kontaktseite
ebenso wie .customer-projects-scroll oben auf sichtbare Zeilen begrenzen und scrollbar machen -
hier 8 Zeilen statt 10 (Kopfzeile ~38px + 8 Datenzeilen ~40px). */
.customer-list-scroll-8 {
max-height: 358px;
overflow-y: auto;
}
/* Von Stephan gewünscht (/suche?q=...): alle Ergebnis-Kacheln der Suchergebnisseite auf 5 sichtbare
Zeilen begrenzen und darüber hinaus scrollbar machen (gleiches Muster wie
.customer-projects-scroll/.customer-list-scroll-8 oben) - bei häufigen Suchbegriffen (z.B.
Firmennamen, die in vielen Aufträgen/Rechnungen vorkommen) wurde die Seite sonst sehr lang.
Etwas kompakter als die 8-Zeilen-Variante, da views/search.ejs' Tabellen ohne auskommen
und .table-compact eine kleinere Zeilenhöhe hat (siehe .table-compact th/td padding). */
.search-result-scroll {
max-height: 190px;
overflow-y: auto;
}
/* Von Stephan gewünscht (/lieferanten/147): "Eingangsrechnungen"-Kachel auf der Lieferanten-/
Behörden-Seite auf 20 sichtbare Zeilen begrenzen und scrollbar machen (gleiches Muster wie
.customer-list-scroll-8 oben) - .table-compact-Zeilen sind mit ~38px etwas niedriger als normale
Tabellenzeilen (40px), siehe Kommentar bei .search-result-scroll. Kopfzeile ~38px + 20 Datenzeilen
~38px. */
.supplier-purchase-invoices-scroll {
max-height: 798px;
overflow-y: auto;
}
/* Von Stephan gewünscht (/lieferanten/147): "Verwendung"-Kachel (zwei einfache Link-Listen statt
einer Tabelle, daher EIN kartenweiter Scrollbereich statt je Liste) auf rund 10 sichtbare Zeilen
begrenzt und scrollbar -