element; each | needs a
matching `data-label` attribute (columns with no header, e.g. actions,
can omit it). */
@media (max-width: 720px) {
.card:has(table.responsive-table) { padding: var(--space-3); }
table.responsive-table thead { display: none; }
table.responsive-table, table.responsive-table tbody, table.responsive-table tr { display: block; width: 100%; }
table.responsive-table tr {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
padding: var(--space-3);
}
table.responsive-table tbody tr:last-child { margin-bottom: 0; }
table.responsive-table tbody tr:hover { background: var(--color-surface); }
table.responsive-table td {
display: block;
border-bottom: 1px solid var(--color-border);
padding: 9px 0;
}
table.responsive-table td:first-child { padding-top: 0; }
table.responsive-table td:last-child { border-bottom: none; padding-bottom: 0; }
table.responsive-table td.text-right { text-align: left; }
table.responsive-table td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
margin-bottom: 5px;
}
}
/* ---------- Badges / progress ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
}
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.badge-neutral { background: var(--color-bg-alt); color: var(--color-text-muted); }
.badge-rental { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-warning); font-weight: 700; }
/* iOS-artiger An/Aus-Schalter (siehe clients.js statusSwitch()) - ein
verstecktes Checkbox-Input treibt den Zustand, .switch-slider ist die
sichtbare Pille. Grün fürs "an" ist hier bewusst kein Bruch mit der
sonst grün-freien Kanban-/Kalender-Optik (siehe Nutzer-Feedback dort) -
Status-"Aktiv" nutzt an anderer Stelle (Badges) schon dieselbe Farbe,
ein Wechsel der Darstellungsform sollte die Bedeutung nicht ändern. */
.switch-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 21px; flex-shrink: 0; }
.switch input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.switch-slider {
position: absolute;
inset: 0;
background: var(--color-border-strong);
border-radius: 999px;
transition: background 0.16s ease;
pointer-events: none;
}
.switch-slider::before {
content: '';
position: absolute;
width: 17px;
height: 17px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 0.16s ease;
}
.switch input:checked + .switch-slider { background: var(--color-success); }
.switch input:checked + .switch-slider::before { transform: translateX(15px); }
.switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; }
.switch-label { font-size: 12.5px; color: var(--color-text-muted); }
.progress-track {
width: 100%;
height: 7px;
border-radius: 999px;
background: var(--color-bg-alt);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
border-radius: 999px;
transition: width 0.2s ease;
}
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger { background: var(--color-danger); }
.progress-fill.success { background: var(--color-success); }
.progress-fill.neutral { background: var(--color-text-faint); }
/* ---------- Status stepper (Productions) ---------- */
.status-cell { min-width: 180px; }
.status-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 7px;
}
.status-percent { font-size: 11.5px; font-weight: 700; color: var(--color-text-faint); }
.status-stepper {
display: inline-flex;
align-items: center;
gap: 2px;
margin-top: 8px;
}
.status-stepper button {
border: none;
background: transparent;
color: var(--color-text-faint);
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.12s ease, color 0.12s ease;
}
.status-stepper button:hover:not(:disabled) { background: var(--color-bg-alt); color: var(--color-text); }
.status-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.status-stepper button svg { width: 11px; height: 11px; }
.status-stepper-divider { width: 1px; height: 12px; background: var(--color-border); }
/* ---------- Modal ---------- */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(14, 15, 30, 0.5);
backdrop-filter: blur(2px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--space-8) var(--space-4);
overflow-y: auto;
z-index: 100;
animation: fade-in 0.14s ease;
}
.modal {
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 560px;
padding: var(--space-5);
animation: modal-in 0.16s ease;
}
/* Wider variant for content that needs side-by-side columns (e.g. the
Buchungen material catalog + added-items picker) - opt-in via
openModal({ wide: true }) so every other modal keeps its compact width.
Sized to fill the main content area (viewport minus the sidebar), not
just "a bit wider" - the backdrop shifts its centering column over by
--sidebar-width so the modal lines up with (and fills) the content area
instead of also spanning under the sidebar. */
.modal-backdrop.is-wide {
padding-top: var(--space-4);
padding-bottom: var(--space-4);
padding-right: var(--space-3);
/* Exactly the sidebar's width, no extra gap - the modal starts right
where the content area starts and fills every pixel out to the right
edge of the viewport (minus the small breathing margin above). */
padding-left: calc(var(--sidebar-width) + var(--space-3));
}
@media (max-width: 900px) {
.modal-backdrop.is-wide { padding-left: var(--space-3); }
}
.modal.is-wide { max-width: none; width: 100%; margin: 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
/* ---------- Toast ---------- */
.toast-container {
position: fixed;
bottom: var(--space-5);
right: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: 200;
}
.toast {
background: var(--color-text);
color: #fff;
padding: 11px 16px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow-lg);
animation: toast-in 0.16s ease;
}
.toast.error { background: var(--color-danger); }
.toast.success { background: var(--color-success); }
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Login ---------- */
.login-screen {
min-height: 100vh;
display: grid;
grid-template-columns: 1.1fr 1fr;
background: var(--color-surface);
}
.login-hero {
background: var(--sidebar-bg);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-8);
color: #fff;
overflow: hidden;
}
.login-hero::before {
content: '';
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 113, 227, 0.35), transparent 70%);
top: -160px;
right: -160px;
}
.login-hero::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(6, 182, 212, 0.25), transparent 70%);
bottom: -140px;
left: -100px;
}
.login-hero-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.login-hero-quote {
position: relative;
z-index: 1;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.4;
max-width: 420px;
}
.login-hero-quote span { color: #67e8f9; }
.login-hero-foot { position: relative; z-index: 1; font-size: 12.5px; color: var(--sidebar-text); }
.login-form-side {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.login-card {
width: 100%;
max-width: 360px;
}
.login-card h1 { margin-bottom: 4px; }
.login-card p.subtitle { color: var(--color-text-muted); margin-bottom: var(--space-6); }
@media (max-width: 860px) {
.login-screen { grid-template-columns: 1fr; }
.login-hero { display: none; }
}
.form-error {
display: flex;
align-items: center;
gap: 8px;
background: var(--color-danger-soft);
color: var(--color-danger);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 12.5px;
font-weight: 500;
margin-bottom: var(--space-3);
}
.form-error svg { width: 15px; height: 15px; flex-shrink: 0; }
/* ---------- Misc ---------- */
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
/* ---------- Music / LTO status indicators (Productions table) ---------- */
.music-indicator, .lto-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
cursor: help;
}
.music-indicator svg, .lto-indicator svg { width: 15px; height: 15px; }
.lto-indicator.is-on { color: var(--color-success); }
/* ---------- Kunde-Feedback indicators (Buchungen table) ---------- */
.feedback-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
}
.feedback-indicator svg { width: 15px; height: 15px; }
.feedback-indicator.is-confirmed { color: var(--color-success); }
.feedback-indicator.is-note { color: var(--color-accent); }
/* ---------- Custom hover tooltip (data-tooltip="...") -----------
Native `title` tooltips are slow to appear and unstyled, so anywhere we
want a reliable, on-brand tooltip (Music/LTO indicators, etc.) we use
this instead: a small dark bubble with an arrow, positioned above the
element and shown on hover or keyboard focus. */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%);
background: var(--color-text);
color: #fff;
padding: 7px 11px;
border-radius: var(--radius-sm);
font-size: 11.5px;
font-weight: 500;
line-height: 1.4;
width: max-content;
max-width: 240px;
white-space: normal;
text-align: left;
box-shadow: var(--shadow-md);
z-index: 60;
pointer-events: none;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
content: '';
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--color-text);
z-index: 60;
pointer-events: none;
}
[data-tooltip]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.empty-state {
text-align: center;
padding: var(--space-8) var(--space-4);
color: var(--color-text-muted);
}
.empty-state svg { width: 32px; height: 32px; color: var(--color-text-faint); margin-bottom: var(--space-3); }
.spinner {
width: 22px;
height: 22px;
border: 2.5px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin: var(--space-6) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; margin: var(--space-3) auto; }
/* ---------- Expandable table rows (dataTable expandable option) ---------- */
.expand-col { width: 32px; }
.expand-chevron { display: inline-flex; color: var(--color-text-faint); transition: transform 0.16s ease; }
.expand-chevron svg { width: 14px; height: 14px; }
.expand-chevron.is-open { transform: rotate(180deg); color: var(--color-accent); }
.is-expandable-row { cursor: pointer; }
.is-expandable-row:hover { background: var(--color-bg-alt); }
.is-expandable-row.is-expanded { background: var(--color-accent-soft); }
.datatable-expanded-row { background: var(--color-surface-2); }
.datatable-expanded-row:hover { background: var(--color-surface-2); }
.datatable-expanded-cell { padding: var(--space-5) var(--space-5) !important; border-top: 1px solid var(--color-border); }
.expand-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.expand-panel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-4);
}
.expand-panel-field { min-width: 0; }
.expand-panel-field-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin-bottom: 3px;
}
.expand-panel-field-value { font-size: 13px; color: var(--color-text); overflow-wrap: break-word; }
.expand-panel-field-value.is-empty { color: var(--color-text-faint); }
.expand-panel-section h3 {
font-size: 13px;
font-weight: 700;
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: 6px;
}
.expand-panel-section h3 svg { width: 14px; height: 14px; color: var(--color-text-faint); }
.expand-documents-list { display: flex; flex-direction: column; gap: 6px; }
.expand-documents-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
cursor: pointer;
}
.expand-documents-row:hover { border-color: var(--color-accent); }
.expand-documents-row svg { width: 14px; height: 14px; color: var(--color-text-faint); flex-shrink: 0; }
.expand-documents-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-documents-sub { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-todo-list { display: flex; flex-direction: column; gap: 6px; }
.expand-todo-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.expand-todo-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-todo-due { color: var(--color-text-muted); font-size: 11.5px; flex-shrink: 0; }
.expand-todo-due.is-overdue { color: var(--color-danger); font-weight: 600; }
.expand-todo-assignee {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.expand-time-list { display: flex; flex-direction: column; gap: 6px; }
.expand-time-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.expand-time-total { font-weight: 700; color: var(--color-text); }
/* Category groups for the read-only Packliste (see itemsSection() in
bookings.js) - same top-level-category grouping as the editable booking
form's groupedItemsPanel(), just without any drag/collapse controls here
since this view is read-only. */
.expand-item-groups { display: flex; flex-direction: column; gap: 14px; }
.expand-item-group-header {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin-bottom: 6px;
}
.expand-item-list { display: flex; flex-direction: column; gap: 6px; }
.expand-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.expand-item-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.expand-item-name-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-item-client-note {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11.5px; font-style: italic;
color: var(--color-text-muted); white-space: normal;
}
.expand-item-client-note svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Erledigt-Kennzeichnung für Kundenanmerkungen (siehe
migration_booking_client_notes_resolved.sql) - note text stays visible
(never deleted), just visually de-emphasized once staff have dealt with
it, on both the global note (.is-resolved-note on the summary field's
span) and each per-item note. */
.is-resolved-note { color: var(--color-text-faint); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.expand-panel-field-value span.is-empty { color: var(--color-text-faint); }
.expand-item-status { flex-shrink: 0; display: flex; gap: 6px; }
/* Read-only "Inhalt" list for a Physische-Kombination (kit) row here too -
same content as itemRow()'s kitContents in the booking form, just
visually attached under the item card instead of its own row. */
.expand-item-block:has(.expand-item-kit-contents) .expand-item-row {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.expand-item-kit-contents {
padding: 6px 10px 8px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-top: none;
border-bottom-left-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
font-size: 11px;
color: var(--color-text-faint);
}
.expand-item-kit-contents-label { font-weight: 600; color: var(--color-text-muted); margin-bottom: 2px; }
.expand-item-kit-contents-list { margin: 0; padding-left: 16px; list-style: disc; }
.expand-item-kit-contents-list li { padding: 1px 0; }
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.tab {
padding: var(--space-2) var(--space-3);
font-weight: 600;
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.12s ease;
}
.tab.active { color: var(--color-accent); border-color: var(--color-accent); }
.year-pills { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.year-pill {
padding: 7px 15px;
border-radius: 999px;
font-weight: 600;
font-size: 12.5px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-text-muted);
transition: all 0.14s ease;
}
.year-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.year-pill.active {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 130%);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 14px -4px rgba(0, 113, 227, 0.38);
}
/* ---------- To-Do Kanban board ---------- */
/* Nutzt die verfügbare Bildschirmhöhe statt nur so hoch wie der Inhalt zu
sein - auf großen Monitoren wirkte das Board davor sehr "abgeschnitten"
mit viel Leerraum darunter. Der Offset ist eine Annäherung an Header +
Main-Padding (kein exaktes Messen möglich ohne JS/ResizeObserver, siehe
chart.js-Kommentar zu warum das hier bewusst vermieden wird); min-height
statt height, damit der Bereich bei vielen Karten trotzdem mitwächst. */
.kanban-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
align-items: stretch;
min-height: calc(100vh - 260px);
}
@media (max-width: 900px) {
.main .kanban-board { grid-template-columns: 1fr; min-height: 0; }
}
.kanban-column {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: 3px solid var(--kanban-accent, var(--color-border-strong));
border-radius: var(--radius-lg);
padding: var(--space-3);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.kanban-column-open { --kanban-accent: var(--color-text-faint); }
.kanban-column-progress { --kanban-accent: var(--color-accent); }
.kanban-column-done { --kanban-accent: var(--color-accent-2); }
.kanban-column-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-2) var(--space-3);
font-weight: 700;
font-size: 13.5px;
color: var(--color-text);
}
.kanban-column-count {
background: var(--color-bg-alt);
border: 1px solid var(--color-border-strong);
color: var(--color-text-muted);
font-size: 11.5px;
font-weight: 700;
padding: 1px 8px;
border-radius: 999px;
}
/* flex: 1 lässt jede Spalte die volle Board-Höhe ausfüllen (statt am
kürzesten Inhalt auszurichten) und scrollt bei vielen Karten intern,
statt die ganze Seite in die Länge zu ziehen. */
.kanban-column-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
min-height: 40px;
overflow-y: auto;
padding-right: 2px;
}
.kanban-column-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text-faint);
font-size: 12.5px;
padding: var(--space-4) 0;
}
.kanban-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
box-shadow: var(--shadow-sm);
cursor: grab;
transition: box-shadow 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}
.kanban-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.kanban-card.is-dragging { opacity: 0.4; }
/* OS-Datei-Drop direkt auf die Karte (siehe todos.js todoCard()) - bewusst
ein eigener Zustand statt is-dragging wiederzuverwenden: is-dragging
markiert die *Quelle* eines internen Reorder-Drags (halbtransparent),
is-file-dragover das *Ziel* eines externen OS-Datei-Drags (Akzent-Rahmen). */
.kanban-card.is-file-dragover { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.kanban-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.kanban-card-delete {
background: none;
border: none;
color: var(--color-text-faint);
cursor: pointer;
padding: 2px;
display: inline-flex;
border-radius: var(--radius-sm);
opacity: 0;
transition: opacity 0.14s ease, color 0.14s ease;
}
.kanban-card:hover .kanban-card-delete { opacity: 1; }
.kanban-card-delete:hover { color: var(--color-danger); }
.kanban-card-delete svg { width: 14px; height: 14px; }
.kanban-card-title {
font-weight: 600;
font-size: 13.5px;
color: var(--color-text);
margin-bottom: var(--space-2);
line-height: 1.35;
}
.kanban-card-production {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.kanban-card-production svg { width: 12px; height: 12px; flex-shrink: 0; }
.todo-checklist-progress {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.todo-checklist-progress svg { width: 12px; height: 12px; }
.todo-checklist-items { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-2); }
.todo-checklist-item {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 11.5px;
color: var(--color-text-muted);
cursor: pointer;
}
.todo-checklist-item input[type="checkbox"] { width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }
.todo-checklist-item .is-done { text-decoration: line-through; color: var(--color-text-faint); }
.kanban-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-1);
}
.kanban-card-bottom-left { display: flex; align-items: center; gap: 10px; }
.todo-due {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--color-text-faint);
}
.todo-due svg { width: 12px; height: 12px; }
.todo-due.is-overdue { color: var(--color-danger); font-weight: 600; }
.todo-files-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--color-text-faint);
}
.todo-files-badge svg { width: 12px; height: 12px; }
.todo-assignee {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-size: 10.5px;
font-weight: 700;
}
.todo-priority {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
}
.todo-priority-dot { width: 6px; height: 6px; border-radius: 50%; }
/* Quick-complete Kreis (Board-Karte + Kalender-Chip) - bewusst dezent
(leerer Kreis) bis man ihn hovert, damit er die Karte nicht dominiert. */
.kanban-card-check {
background: none;
border: 1.5px solid var(--color-border-strong);
color: transparent;
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.kanban-card-check svg { width: 11px; height: 11px; stroke-width: 3; }
.kanban-card-check:hover { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
/* ---- Board/Kalender-Umschalter (Aufgaben) ------------------------- */
.view-toggle {
display: inline-flex;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 3px;
gap: 2px;
}
.view-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: var(--color-text-muted);
font-size: 12.5px;
font-weight: 600;
padding: 7px 12px;
border-radius: calc(var(--radius-md) - 3px);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.view-toggle-btn svg { width: 14px; height: 14px; }
.view-toggle-btn:hover { color: var(--color-text); }
.view-toggle-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
/* ---- Kalenderansicht (Aufgaben) ------------------------------------ */
.cal-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.cal-mode-switch {
display: inline-flex;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 3px;
gap: 2px;
}
.cal-mode-btn {
background: none;
border: none;
color: var(--color-text-muted);
font-size: 12.5px;
font-weight: 600;
padding: 7px 14px;
border-radius: calc(var(--radius-md) - 3px);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.cal-mode-btn:hover { color: var(--color-text); }
.cal-mode-btn.is-active { background: var(--color-surface); color: var(--color-accent-strong); box-shadow: var(--shadow-sm); }
.cal-nav { display: flex; align-items: center; gap: var(--space-2); }
.cal-nav svg { width: 15px; height: 15px; }
.cal-range-label { font-weight: 700; font-size: 14px; color: var(--color-text); margin-left: 6px; min-width: 150px; }
/* Füllt die Höhe genau wie das Board (siehe .kanban-board) - Zellen wirkten
vorher gedrungen, weil die Grid-Reihen sich nur am Inhalt orientierten. */
.cal-body { display: grid; grid-template-columns: 1fr 240px; gap: var(--space-4); align-items: stretch; min-height: calc(100vh - 340px); }
.cal-body-day { grid-template-columns: 1fr 280px; }
.cal-month, .cal-week, .cal-day-view {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cal-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--color-border); flex: 0 0 auto; }
.cal-weekday { padding: 9px 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-month-row { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; }
.cal-month-row + .cal-month-row { border-top: 1px solid var(--color-border); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr; }
.cal-day {
border-right: 1px solid var(--color-border);
padding: 8px 7px;
min-height: 100px;
display: flex;
flex-direction: column;
gap: 4px;
transition: background 0.12s ease;
}
.cal-day:last-child { border-right: none; }
.cal-week .cal-day { min-height: 420px; padding: 12px 10px; gap: 6px; }
.cal-day.is-muted { background: var(--color-bg-alt); }
.cal-day.is-muted .cal-day-number { color: var(--color-text-faint); }
.cal-day.is-dragover { background: var(--color-accent-soft); }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.cal-day-weekday { font-size: 10.5px; font-weight: 700; color: var(--color-text-faint); text-transform: uppercase; }
.cal-day-number { font-size: 13px; font-weight: 700; color: var(--color-text); }
.cal-day.is-today .cal-day-number {
background: var(--color-accent);
color: #fff;
width: 21px; height: 21px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.cal-day-chips { display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; }
.cal-day-empty { color: var(--color-text-faint); font-size: 11px; }
.cal-day-more { font-size: 10.5px; color: var(--color-text-muted); font-weight: 600; padding: 1px 2px; }
/* Gleiche Sprache wie die Kanban-Karte: weiße Fläche, dezenter Rahmen,
Farbe nur als Akzent (linker Rand) statt vollflächig eingefärbt - genau
das Feedback ("zu grün, passt nicht zum restlichen Look"). */
.cal-chip {
--chip-color: var(--color-accent);
display: flex;
align-items: center;
gap: 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--chip-color);
border-radius: 8px;
padding: 10px 9px;
min-height: 44px;
box-sizing: border-box;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
cursor: grab;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}
.cal-chip:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); border-left-color: var(--chip-color); }
.cal-chip.is-dragging { opacity: 0.4; }
/* Monatsansicht: bewusst wieder kompakt (siehe Feedback) - hier geht es um
die Übersicht über viele Tage, nicht ums präzise Greifen einzelner
Chips wie in Wochen-/Tagesansicht oder der "Ohne Datum"-Ablage. */
.cal-chip.is-sm { gap: 5px; padding: 4px 6px; min-height: 0; border-left-width: 3px; font-size: 11px; }
.cal-chip.is-sm .cal-chip-check { width: 14px; height: 14px; }
.cal-chip.is-sm .cal-chip-check svg { width: 8px; height: 8px; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cal-chip-check {
background: none;
border: 1.5px solid var(--color-border-strong);
color: transparent;
width: 19px;
height: 19px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
cursor: pointer;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.cal-chip-check svg { width: 11px; height: 11px; stroke-width: 3.5; }
.cal-chip-check:hover { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.cal-day-view { padding: var(--space-4); flex: 1; }
.cal-day-list { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-height: 120px; border-radius: var(--radius-md); transition: background 0.12s ease; }
.cal-day-list.is-dragover { background: var(--color-accent-soft); }
.cal-day-empty-state { text-align: center; color: var(--color-text-faint); font-size: 12.5px; padding: var(--space-6) 0; }
.cal-unscheduled {
background: var(--color-bg-alt);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
padding: var(--space-3);
display: flex;
flex-direction: column;
}
.cal-unscheduled-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; margin-bottom: 6px; flex: 0 0 auto; }
.cal-unscheduled-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 60px; border-radius: var(--radius-md); transition: background 0.12s ease; overflow-y: auto; }
.cal-unscheduled-list.is-dragover { background: var(--color-accent-soft); }
@media (max-width: 900px) {
.cal-body, .cal-body-day { grid-template-columns: 1fr; min-height: 0; }
.cal-week { grid-template-columns: repeat(7, minmax(130px, 1fr)); overflow-x: auto; }
}
.todo-checklist-editor { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.todo-checklist-row { display: flex; align-items: center; gap: var(--space-2); }
.todo-checklist-row input[type="text"] { flex: 1; }
.todo-checklist-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-accent); }
/* ---------- Arbeitszeit (time tracking) ---------- */
.timer-card.is-running { border-color: var(--color-accent); box-shadow: var(--shadow-glow), var(--shadow-sm); }
.timer-elapsed {
font-size: 40px;
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-accent-strong);
}
.field-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); }
/* ---------- Vermietung: Verfügbarkeitskalender ---------- */
.avail-months {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
}
.avail-month-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.avail-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
margin-bottom: 3px;
}
.avail-weekdays span { text-align: center; font-size: 10px; color: var(--color-text-faint); font-weight: 600; }
.avail-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.avail-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 10.5px;
font-weight: 600;
cursor: default;
}
.avail-day.is-empty { visibility: hidden; }
.avail-booking-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-3);
align-items: center;
padding: 7px 0;
border-bottom: 1px solid var(--color-border);
font-size: 12px;
}
.avail-booking-row:last-child { border-bottom: none; }
/* ---------- Vermietung: Buchungspositionen (Packliste) ---------- */
.booking-items-list {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
max-height: 58vh;
overflow-y: auto;
}
/* Fixed shared column template - header and every item row (saved or not)
use this exact grid, emitting an empty cell where a column doesn't apply
(e.g. Gepackt/Raus/Zurück for a not-yet-saved item), so all 9 columns
always line up regardless of which cells a given row actually fills in. */
.booking-item-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 50px 40px 68px 76px 56px 50px 50px 30px;
align-items: center;
gap: var(--space-2);
padding: 9px 12px;
/* No border here anymore - see .booking-item-block below, which now owns
it so the border sits correctly whether or not this row has a
kit-contents block underneath it. */
}
.booking-item-row input[type="number"] { width: 100%; padding: 5px 6px; font-size: 12px; text-align: center; }
.booking-item-row input[type="checkbox"] { cursor: pointer; }
/* margin:0 auto on the checkbox alone wasn't reliably centering it under
the "Gepackt" header - flex-centering the whole cell instead guarantees
it regardless of the checkbox's own intrinsic/rendered size. */
.booking-item-packed-cell { display: flex; align-items: center; justify-content: center; }
.booking-item-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; font-size: 12.5px; }
.booking-item-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-item-group-price { text-align: right; font-size: 12px; font-weight: 600; }
.booking-item-row > div:last-child { text-align: center; }
/* Drag&Drop-Sortierung (Positionen innerhalb einer Gruppe, siehe
groupedItemsPanel()/itemRow() in bookings.js). Border moves onto the
wrapper block itself (owns both the row and any kit-contents beneath it)
instead of living on the row/kit-contents individually, so it stays
correct regardless of which of the two happens to be visually last. */
.booking-item-block {
border-bottom: 1px solid var(--color-border);
cursor: grab;
}
.booking-item-block:active { cursor: grabbing; }
.booking-item-block:last-child { border-bottom: none; }
.booking-item-block.is-dragging { opacity: 0.4; }
.booking-item-grip {
flex-shrink: 0;
display: inline-flex;
color: var(--color-text-faint);
}
.booking-item-grip svg { width: 13px; height: 13px; }
.booking-item-row.is-header {
background: var(--color-bg-alt);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
padding: 7px 12px;
text-align: center;
}
.booking-item-row.is-header > div:first-child { text-align: left; }
/* All other header cells (Menge/Tage/Preis/Stk/Gruppe/Gepackt/Raus/Zurück)
stay centered above their column via the inherited text-align: center
above - including "Gruppe", even though its data cells below are
right-aligned (.booking-item-group-price) to line up with the €
amounts. A dedicated right-align override used to sit here for that
column, but it made the header visibly hug the right edge instead of
sitting centered over the column like every other header label. */
/* Read-only "Inhalt" reference list for a Physische-Kombination (kit) line -
see itemRow() in bookings.js. Sits directly under the kit's own row,
inside the same .booking-item-block, which owns the border between
consecutive lines (see above). */
.booking-item-kit-contents {
padding: 0 12px 9px 12px;
font-size: 11px;
line-height: 1.5;
color: var(--color-text-faint);
}
.booking-item-kit-contents-label { font-weight: 600; color: var(--color-text-muted); margin-bottom: 2px; }
.booking-item-kit-contents-list { margin: 0; padding-left: 16px; list-style: disc; }
.booking-item-kit-contents-list li { padding: 1px 0; }
.booking-items-total {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-top: 2px solid var(--color-border-strong);
background: var(--color-bg-alt);
font-size: 13px;
font-weight: 700;
color: var(--color-text);
}
/* Zwischensumme / Versicherung / Rabatt / Gesamtpreis stack beneath the
line items - only the final Gesamtpreis row is emphasized like the old
single-row .booking-items-total was. */
.booking-items-totals {
display: flex;
flex-direction: column;
border-top: 2px solid var(--color-border-strong);
background: var(--color-bg-alt);
}
.booking-items-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
font-size: 13px;
color: var(--color-text-faint);
}
.booking-items-total-row.is-grand {
font-weight: 700;
color: var(--color-text);
font-size: 14px;
border-top: 1px solid var(--color-border);
padding-top: 10px;
}
.booking-items-total-row.is-discount input {
width: 56px;
text-align: right;
margin: 0 4px;
display: inline-block;
}
/* Booking form's material picker: left = full catalog browsable by
category, right = this booking's added items, same category grouping on
both sides (see materialCatalogPanel()/groupedItemsPanel() in bookings.js). */
.booking-material-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 900px) {
.booking-material-layout { grid-template-columns: 1fr; }
}
.material-panel { display: flex; flex-direction: column; min-width: 0; }
.material-panel h3 {
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.material-panel-count { color: var(--color-text-faint); font-weight: 500; }
.material-panel-collapse-links {
margin-left: auto;
display: flex;
gap: 10px;
font-size: 11px;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
}
.material-panel-collapse-link { color: var(--color-text-faint); text-decoration: none; cursor: pointer; }
.material-panel-collapse-link:hover { color: var(--color-text); text-decoration: underline; }
.material-catalog {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
max-height: 58vh;
overflow: hidden;
}
.material-catalog-search { position: relative; padding: 8px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.material-catalog-search svg {
position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--color-text-faint); pointer-events: none;
}
.material-catalog-search input {
width: 100%;
padding: 8px 10px 8px 32px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
font-size: 13px;
font-family: inherit;
color: var(--color-text);
}
.material-catalog-list { flex: 1; overflow-y: auto; padding: 4px; }
.material-catalog-group summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 9px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
}
.material-catalog-group summary::-webkit-details-marker { display: none; }
.material-catalog-group summary:hover { background: var(--color-bg-alt); }
.material-catalog-count { font-weight: 600; color: var(--color-text-faint); text-transform: none; letter-spacing: normal; }
.material-catalog-items { padding-left: 6px; }
.material-catalog-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 9px;
border: none;
background: none;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-family: inherit;
color: var(--color-text);
text-align: left;
cursor: pointer;
}
.material-catalog-item:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.material-catalog-item svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--color-text-faint); }
.material-catalog-item:hover svg { color: var(--color-accent-strong); }
.booking-items-groups { display: flex; flex-direction: column; }
/* Drag&Drop-Sortierung ganzer Gruppen (siehe groupedItemsPanel() in
bookings.js) - draggable lives on .booking-items-group itself (dragstart
only actually starts if the gesture began inside the header, see there),
dragged via the header's grip handle. */
.booking-items-group.is-dragging { opacity: 0.4; }
.booking-items-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-text-muted);
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
cursor: grab;
}
.booking-items-group-header:active { cursor: grabbing; }
.booking-items-group-grip {
display: inline-flex;
vertical-align: middle;
margin-right: 6px;
color: var(--color-text-faint);
}
.booking-items-group-grip svg { width: 13px; height: 13px; }
.booking-items-group-meta { display: flex; align-items: center; gap: 10px; }
.booking-items-group-count { font-weight: 600; color: var(--color-text-faint); text-transform: none; letter-spacing: normal; }
.booking-items-group-subtotal { font-weight: 700; color: var(--color-text); text-transform: none; letter-spacing: normal; }
/* Auf-/zuklappbar (siehe groupedItemsPanel() in bookings.js) - the chevron
rotates to point right while collapsed, .booking-items-group-body itself
is simply hidden (still in the DOM, so drag&drop item-order reads via
readDomOrder() keep working even for a currently-collapsed group). */
.booking-items-group-toggle {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-right: 4px;
padding: 0;
border: none;
background: none;
color: var(--color-text-faint);
cursor: pointer;
}
.booking-items-group-toggle svg { width: 14px; height: 14px; transition: transform 0.15s; }
.booking-items-group-toggle:hover { color: var(--color-text); }
.booking-items-group.is-collapsed .booking-items-group-toggle svg { transform: rotate(-90deg); }
.booking-items-group.is-collapsed .booking-items-group-body { display: none; }
/* ---------- searchSelect: searchable dropdown (replaces plain |