/* ─── Desktop-Komponenten (Desktop-Overhaul 2026-09-29) ───────────────────── Bausteine des neuen Desktop-Designs. Maße 1:1 aus dem Master (docs/desktop overhaul/uebergabepaket-cursor/Master Desktop.dc.html), Werte nur über d-tokens.css. Präfix `d-` = neues System; app.css enthält das alte, das Seite für Seite abgelöst wird. Keine Inline-Styles in umgebauten Views — Layout gehört hierher. Inhalt: Gerüst (Sidebar, Hauptbereich) · Seitenkopf · Karte mit Kicker · Zeilen · Liste (380px) · Chips · Badges · Segmented Switch · Prozessleiste (3 Größen) · Banner · Knöpfe · Tabellen · Felder · Kennzahl-Kacheln. */ /* `hidden` muss auch gegen display:flex der Bausteine gewinnen (Skripte blenden per .hidden aus). */ [class*="d-"][hidden] { display: none !important; } /* ─── Grundschrift ─────────────────────────────────────────────────────── */ body { font-family: var(--d-font); font-size: var(--d-fs-body); background: var(--d-bg); color: var(--d-text); } .d-num, .d-table td.num, .d-table th.num { font-variant-numeric: tabular-nums; } /* ─── Gerüst ───────────────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } .d-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: var(--d-sidebar-w); display: flex; flex-direction: column; padding: 18px 12px 14px; background: var(--d-bg); border-right: 1px solid var(--d-line); overflow-y: auto; line-height: normal; /* Master rechnet mit „normal", nicht mit dem alten body-Wert 1.6 */ } .main-content { margin-left: var(--d-sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .main-content.is-popup { margin-left: 0; } .d-brand { display: flex; align-items: flex-start; gap: 6px; padding: 0 0 14px 10px; } .d-brand__text { flex: 1; min-width: 0; color: var(--d-text); text-decoration: none; } .d-brand__text:hover { text-decoration: none; } .d-brand__name { display: block; font-family: var(--d-font-title); font-size: 17px; line-height: 1.2; } .d-brand__sub { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--d-text-3); margin-top: 2px; } .d-collapse-btn { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--d-text-4); cursor: pointer; font: 600 13px/1 var(--d-font); } .d-collapse-btn:hover { background: var(--d-surface); border-color: var(--d-line-control); color: var(--d-accent); } .d-search { display: flex; align-items: center; gap: 8px; margin: 0 4px 14px; padding: 7px 10px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 9px; color: var(--d-text-search); font: 400 12.5px/1.3 var(--d-font); text-align: left; cursor: pointer; } .d-search:hover { border-color: var(--d-line-control); } .d-search__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d-kbd { font-size: 10.5px; font-weight: 600; background: var(--d-kbd-bg); border-radius: 5px; padding: 2px 5px; color: var(--d-accent); white-space: nowrap; } .d-nav-group { display: flex; flex-direction: column; gap: 1px; } .d-nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: var(--d-text-4); padding: 18px 10px 6px; text-transform: uppercase; } .d-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-weight: 500; color: var(--d-text-nav); text-decoration: none; } .d-nav-item:hover { background: var(--d-surface); color: var(--d-text); text-decoration: none; } .d-nav-item.is-active { background: var(--d-accent-soft); color: var(--d-accent-soft-text); font-weight: 600; } .d-nav-item__label { flex: 1; min-width: 0; } .d-nav-count { font-size: 11px; font-weight: 700; color: var(--d-accent); } .d-nav-badge { font-size: 11px; font-weight: 700; background: var(--d-accent); color: #fff; border-radius: var(--d-r-pill); padding: 1px 7px; line-height: 1.45; } .d-nav-badge[hidden], .d-nav-count[hidden] { display: none; } /* Posteingang-Ordner als Unterpunkte (Entscheidung Arthur: Sidebar bleibt überall) */ .d-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 3px; } .d-nav-subitem { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 22px; border-radius: 7px; font-size: 12.5px; color: var(--d-text-2); text-decoration: none; } .d-nav-subitem:hover { background: var(--d-surface); color: var(--d-text); text-decoration: none; } .d-nav-subitem.is-active { color: var(--d-accent-soft-text); font-weight: 600; background: var(--d-accent-soft); } .d-nav-subitem .d-nav-count { font-size: 10.5px; } .d-sidebar__spacer { flex: 1; min-height: 16px; } .d-sidebar__foot { display: flex; flex-direction: column; gap: 1px; } .d-user { display: flex; align-items: center; gap: 9px; padding: 10px 10px 0; margin-top: 8px; border-top: 1px solid var(--d-line); } .d-avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--d-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .d-avatar--soft { background: #E6D2CC; color: var(--d-accent-soft-text); } .d-user__name { font-weight: 600; font-size: 12.5px; flex: 1; min-width: 0; color: var(--d-text); text-decoration: none; } .d-user__name:hover { color: var(--d-accent); text-decoration: none; } .d-foot-link { font: 400 12px/1.3 var(--d-font); color: var(--d-text-4); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; } .d-user__logout { margin: 0; display: flex; } .d-user__logout .d-nav-item { width: 100%; text-align: left; border: none; background: none; font-family: inherit; cursor: pointer; } .d-user__logout .d-nav-item:hover { background: var(--d-surface); } .d-nav-item--small { font-size: 12.5px; padding: 5px 10px; color: var(--d-text-2); } .d-user__name.is-active { color: var(--d-accent); } /* Laufende Version unter der Person (Produkt-Paket B) — leise, nur zum Nachsehen. */ .d-version { padding: 6px 10px 0; font-size: 11px; color: var(--d-text-3); font-variant-numeric: tabular-nums; } .d-foot-link:hover, .d-foot-link.is-active { color: var(--d-accent); text-decoration: none; } /* Eingeklappt: schmale Leiste, nur der Aufklapp-Knopf (Zustand in localStorage, header.ejs). */ .nav-collapsed .d-sidebar { width: var(--d-sidebar-rail); padding: 18px 9px; overflow: hidden; } .nav-collapsed .d-sidebar > :not(.d-brand) { display: none; } .nav-collapsed .d-brand { padding: 0; } .nav-collapsed .d-brand__text { display: none; } .nav-collapsed .main-content { margin-left: var(--d-sidebar-rail); } .nav-collapsed .d-collapse-btn { transform: scaleX(-1); } /* ─── Seitenkopf ───────────────────────────────────────────────────────── */ .d-page { padding: var(--d-page-y) var(--d-page-x) 24px; display: flex; flex-direction: column; gap: 14px; line-height: normal; } .d-head { display: flex; flex-direction: column; } .d-head__top { display: flex; align-items: baseline; gap: 8px; min-height: 0; } .d-head__kicker { font-size: var(--d-fs-sub); color: var(--d-text-3); font-weight: 600; } .d-head__spacer { flex: 1; } .d-head__row { display: flex; align-items: center; gap: 12px; } .d-head__top + .d-head__row { margin-top: 4px; } .d-head__meta { font-size: 13px; color: var(--d-text-2); margin-top: 4px; } .d-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .d-h1 { font-family: var(--d-font-title); font-weight: 400; font-size: var(--d-fs-h1); line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--d-text); flex: 1; min-width: 0; } .d-h1--detail { font-size: var(--d-fs-h1-detail); } .d-h1--list { font-size: var(--d-fs-h1-list); } .d-h1--work { font-size: 21px; flex: none; } .d-h1--inline { flex: none; } .d-head__lead { font-size: 13px; color: var(--d-text-2); } /* „Zuletzt geändert" — immer oben rechts im Kopf (design-master §2) */ .d-last-change { display: inline; font-size: var(--d-fs-sub); color: var(--d-text-3); text-decoration: none; white-space: nowrap; border-bottom: none; } .d-last-change:hover { text-decoration: none; color: var(--d-text-2); } .d-last-change__link { color: var(--d-accent); font-weight: 600; } /* Arbeitsmasken-Kopf (Planung, Angebot, Abrechnung): Zurück-Anker + Titel + Chip-Kette */ .d-workhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--d-line); background: var(--d-panel); } .d-back { font-size: 13px; font-weight: 600; color: var(--d-accent); white-space: nowrap; text-decoration: none; } .d-back:hover { text-decoration: none; color: var(--d-accent-dark); } .d-vsep { border-left: 1px solid var(--d-line); height: 20px; } .d-workhead__meta { font-size: 12px; color: var(--d-text-3); } /* ─── Karten ───────────────────────────────────────────────────────────── */ .d-card { background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); overflow: hidden; } .d-card--pad { padding: 14px 15px; } .d-card--panel { background: var(--d-panel); } .d-card__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; } .d-card--pad > .d-card__head { padding: 0 0 8px; } .d-kicker { font-size: var(--d-fs-kicker); font-weight: 700; letter-spacing: .07em; color: var(--d-text-3); text-transform: uppercase; flex: 1; min-width: 0; } .d-kicker__note { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--d-text-3); } .d-card__action { font-size: 12px; font-weight: 600; color: var(--d-accent); text-decoration: none; white-space: nowrap; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; } .d-card__action:hover { text-decoration: none; color: var(--d-accent-dark); } /* „+ " unter einer Liste in einer Karte (Pro-Kopf-Zeile, Abschnitt, Rechnungsposition) — EIN Baustein. Zeilen-Variante in Abrechnungstabellen: .d-bill-add (d-planning.css). */ .d-add { align-self: flex-start; background: none; border: none; padding: 4px 0; font: 600 12.5px/1.3 var(--d-font); color: var(--d-accent); cursor: pointer; } .d-add:hover { color: var(--d-accent-dark); } .d-add:disabled { color: var(--d-text-3); cursor: not-allowed; } .d-card__body { padding: 0 16px 14px; } .d-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .d-grid-2--tight { gap: 10px; } .d-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Zeile in einer Karte: Titel + Sub-Zeile, Aktion rechts (Parallele zur App: ›) */ .d-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--d-line-fine); color: inherit; text-decoration: none; } a.d-row:hover { background: var(--d-panel); text-decoration: none; } .d-row--warn { background: var(--d-warn-row); } .d-row--bad { background: var(--d-bad-bg); } .d-row__main { flex: 1; min-width: 0; } .d-row__title { display: block; font-weight: 600; font-size: var(--d-fs-row); } .d-row__sub { display: block; font-size: var(--d-fs-sub); color: var(--d-text-3); } .d-row--warn .d-row__sub { color: var(--d-warn); } .d-row--bad .d-row__sub { color: var(--d-bad); } .d-row__action { font-size: var(--d-fs-small); font-weight: 600; color: var(--d-accent); white-space: nowrap; } .d-row__amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .d-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--d-text-4); } .d-chev { color: var(--d-later-text); font-size: 14px; } .d-empty { padding: 14px 16px; border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-small); color: var(--d-text-3); } .d-foot-note { font-size: 12px; color: var(--d-text-2); } .d-foot-note a { font-weight: 600; } /* ─── Liste links (380px) + Detail ─────────────────────────────────────── */ .d-ld { display: grid; grid-template-columns: var(--d-list-w) minmax(0, 1fr); flex: 1; min-height: 100vh; } .d-ld__list { display: flex; flex-direction: column; min-height: 0; background: var(--d-panel); border-right: 1px solid var(--d-line); } .d-ld__listhead { display: flex; align-items: center; gap: 10px; padding: 18px 18px 10px; } .d-ld__filters { display: flex; gap: 5px; padding: 0 18px 12px; flex-wrap: wrap; } .d-ld__items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; } .d-ld__detail { min-width: 0; display: flex; flex-direction: column; } .d-ld__placeholder { margin: auto; color: var(--d-text-3); font-size: var(--d-fs-small); } .d-item { display: block; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); padding: 11px 14px; color: inherit; text-decoration: none; } .d-item:hover { border-color: var(--d-line-control); text-decoration: none; } .d-item.is-active { border-color: var(--d-line-active); box-shadow: var(--d-shadow-active); } .d-item.is-muted { opacity: .75; } .d-item__top { display: flex; align-items: center; gap: 8px; } .d-item__title { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; } .d-item__meta { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font-size: var(--d-fs-small); color: var(--d-text-2); } .d-item__meta > :first-child { flex: 1; min-width: 0; } .d-item__sub { font-size: 12px; color: var(--d-text-3); margin-top: 1px; } .d-item__amount { font-weight: 600; color: var(--d-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .d-item__amount--none { font-weight: 400; color: var(--d-text-4); } /* ─── Chips ────────────────────────────────────────────────────────────── */ .d-chip { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.4 var(--d-font); color: var(--d-text-nav); background: var(--d-surface); border: 1px solid var(--d-line-control); border-radius: var(--d-r-pill); padding: 4px 11px; text-decoration: none; cursor: pointer; white-space: nowrap; } .d-chip:hover { text-decoration: none; border-color: var(--d-line-active); } .d-chip.is-active { background: var(--d-accent); border-color: var(--d-accent); color: #fff; font-weight: 600; } .d-chip__n { font-weight: 700; } /* Anker-Chips auf Detailseiten (springen zu Karten, statt Reitern) */ .d-anchors { display: flex; gap: 5px; flex-wrap: wrap; } .d-anchor { font: 500 11.5px/1.4 var(--d-font); color: var(--d-text-nav); background: var(--d-surface); border: 1px solid var(--d-line-control); border-radius: var(--d-r-pill); padding: 3px 10px; text-decoration: none; white-space: nowrap; } .d-anchor:hover { text-decoration: none; border-color: var(--d-line-active); } .d-anchor.is-active { background: var(--d-accent-soft); border-color: var(--d-accent-soft); color: var(--d-accent-soft-text); font-weight: 600; } /* ─── Badges ───────────────────────────────────────────────────────────── */ .d-badge { display: inline-block; font-size: var(--d-fs-badge); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--d-r-badge); padding: 2px 7px; line-height: 1.5; white-space: nowrap; align-self: center; background: var(--d-neutral-bg); color: var(--d-neutral); } .d-badge--lg { font-size: 10.5px; border-radius: 7px; padding: 3px 9px; } .d-badge--ok { background: var(--d-ok-bg); color: var(--d-ok); } .d-badge--warn { background: var(--d-warn-bg); color: var(--d-warn); } .d-badge--info { background: var(--d-info-bg); color: var(--d-info); } .d-badge--bad { background: var(--d-bad-bg); color: var(--d-bad); } .d-badge--neutral { background: var(--d-neutral-bg); color: var(--d-neutral); } .d-badge--accent { background: var(--d-accent-soft); color: var(--d-accent-soft-text); } .d-badge--plain { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 600; } button.d-badge { border: none; cursor: pointer; font-family: inherit; } .d-tag { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; background: var(--d-accent-soft); color: var(--d-accent-soft-text); } .d-tag--ok { background: var(--d-ok-bg); color: var(--d-ok); font-weight: 700; } /* ─── Segmented Switch (aus der App) — für alle 2–4 festen Optionen ─────── */ .d-seg { display: inline-flex; background: var(--d-line-card); border-radius: 8px; padding: 2px; gap: 0; vertical-align: middle; } .d-seg__opt, .d-seg > button, .d-seg > a, .d-seg > label > span { display: inline-block; font: 500 12px/1.4 var(--d-font); color: var(--d-text-2); padding: 4px 12px; border-radius: 6px; border: none; background: none; cursor: pointer; text-decoration: none; white-space: nowrap; } .d-seg > label { display: inline-flex; margin: 0; position: relative; } .d-seg > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .d-seg__opt.is-active, .d-seg > button.is-active, .d-seg > a.is-active, .d-seg > label > input:checked + span { background: var(--d-surface); color: var(--d-text); font-weight: 600; box-shadow: var(--d-shadow-seg); } .d-seg > label > input:focus-visible + span { outline: 2px solid var(--d-accent); outline-offset: 1px; } .d-seg--sm .d-seg__opt, .d-seg--sm > button, .d-seg--sm > a, .d-seg--sm > label > span { font-size: 11px; padding: 2px 8px; } .d-seg.is-disabled { opacity: .6; pointer-events: none; } /* ─── Prozessleiste (13a/14b) — Karten · Mini-Karten · Chip-Kette ───────── */ .d-proc { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; align-items: stretch; } .d-proc--3 { grid-template-columns: 1fr 22px 1fr 22px 1fr; } .d-proc--5 { grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr; } .d-proc--mini { grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr; } .d-proc__arrow { text-align: center; color: var(--d-arrow); align-self: center; font-size: 12px; } .d-proc__step { display: block; border-radius: var(--d-r-card); padding: 10px 14px; text-decoration: none; color: inherit; background: var(--d-panel); border: 1px dashed var(--d-later-line); } .d-proc__step:hover { text-decoration: none; } .d-proc__title { display: flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--d-text-3); } .d-proc__title > span:first-child { flex: 1; min-width: 0; } .d-proc__chev { color: var(--d-later-text); } .d-proc__sub { font-size: var(--d-fs-sub); color: var(--d-text-4); margin-top: 2px; } .d-proc__step.is-done { background: var(--d-ok-soft); border: 1px solid var(--d-ok-line); } .d-proc__step.is-done .d-proc__title { color: var(--d-ok); } .d-proc__step.is-done .d-proc__chev { color: var(--d-ok-3); } .d-proc__step.is-done .d-proc__sub { color: var(--d-ok-2); } .d-proc__step.is-wait { background: var(--d-warn-soft); border: 1.5px solid var(--d-warn-ring); box-shadow: 0 1px 3px rgba(217,166,46,.15); } .d-proc__step.is-wait .d-proc__title, .d-proc__step.is-wait .d-proc__sub { color: var(--d-warn); } .d-proc__step.is-wait .d-proc__chev { color: #C9A24B; } .d-proc__step.is-active { background: #FBEDEA; border: 1.5px solid var(--d-accent); box-shadow: var(--d-shadow-active); } .d-proc__step.is-active .d-proc__title { color: var(--d-accent-soft-text); } .d-proc__step.is-active .d-proc__sub { color: var(--d-accent); } .d-proc__step.is-active .d-proc__chev { color: var(--d-accent); } .d-proc--mini .d-proc__step { border-radius: var(--d-r-proc); padding: 7px 11px; } .d-proc--mini .d-proc__title { font-size: var(--d-fs-sub); } .d-proc--mini .d-proc__sub { font-size: 10.5px; margin-top: 0; } .d-proc__hint { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--d-text-3); } .d-chain { display: flex; align-items: center; gap: 5px; font-size: 11px; flex-wrap: wrap; } .d-chain__arrow { color: var(--d-arrow); } .d-chain__step { border-radius: var(--d-r-pill); padding: 3px 10px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--d-text-3); border: 1px dashed var(--d-later-line); background: none; } .d-chain__step:hover { text-decoration: none; } .d-chain__step.is-done { color: var(--d-ok); background: var(--d-ok-soft); border: 1px solid transparent; } .d-chain__step.is-wait { color: var(--d-warn); background: var(--d-warn-soft); border: 1px solid transparent; } .d-chain__step.is-active { color: var(--d-accent-soft-text); background: var(--d-accent-soft); border: 1px solid transparent; box-shadow: 0 0 0 1.5px var(--d-accent); font-weight: 700; } /* ─── Hinweis-Banner (gelb = Zustand · blau = Δ/Drift · rot = Sperre) ───── */ .d-banner { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px 14px; font-size: var(--d-fs-small); background: var(--d-warn-soft); border: 1px solid var(--d-warn-line); color: var(--d-warn-text); } .d-banner__text { flex: 1; min-width: 0; } .d-banner__action { font-weight: 700; color: var(--d-warn); white-space: nowrap; text-decoration: none; background: none; border: none; padding: 0; font: inherit; font-weight: 700; cursor: pointer; } .d-banner__action:hover { text-decoration: none; } .d-banner--info { background: var(--d-info-soft); border-color: var(--d-info-line); color: var(--d-info); } .d-banner--info .d-banner__action { color: var(--d-info); } .d-banner--bad { background: var(--d-bad-bg); border-color: var(--d-bad-line); color: var(--d-bad); } .d-banner--bad .d-banner__action { color: var(--d-bad); } .d-banner--ok { background: var(--d-ok-soft); border-color: var(--d-ok-line); color: var(--d-ok); } .d-banner--ok .d-banner__action { color: var(--d-ok); } /* Randlos unter einem Arbeitsmasken-Kopf */ .d-banner--bar { border-radius: 0; border-width: 0 0 1px; padding: 9px 24px; } /* ─── Knöpfe ───────────────────────────────────────────────────────────── */ .d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 12.5px/1.3 var(--d-font); color: var(--d-text-nav); background: var(--d-surface); border: 1px solid var(--d-line-control); border-radius: var(--d-r-btn); padding: 6px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; } .d-btn:hover { text-decoration: none; border-color: var(--d-line-active); color: var(--d-text); } .d-btn--primary { background: var(--d-accent); border-color: var(--d-accent); color: #fff; } .d-btn--primary:hover { background: var(--d-accent-dark); border-color: var(--d-accent-dark); color: #fff; } .d-btn--danger { background: #8B1A1A; border-color: #8B1A1A; color: #fff; } .d-btn--danger:hover { background: #6E1414; border-color: #6E1414; color: #fff; } .d-btn--ghost { background: none; border-color: transparent; color: var(--d-accent); } .d-btn--icon { padding: 6px 11px; letter-spacing: .05em; } .d-btn--cta { padding: 9px 16px; border-radius: var(--d-r-cta); font-size: 13.5px; } .d-btn--block { display: flex; width: 100%; } .d-btn[disabled], .d-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .d-link-danger { color: var(--d-bad); font-weight: 600; font-size: 12.5px; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; } /* ─── Tabellen (nur bei echten Spaltendaten) ───────────────────────────── */ .d-table { width: 100%; border-collapse: collapse; font-size: var(--d-fs-row); } .d-table th { text-align: left; font-size: var(--d-fs-kicker); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--d-text-3); padding: 8px 16px; border-bottom: 1px solid var(--d-line-fine); white-space: nowrap; background: none; } .d-table td { padding: 9px 16px; border-top: 1px solid var(--d-line-fine); vertical-align: middle; } .d-table tr:first-child td { border-top: none; } .d-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .d-table tfoot td { font-weight: 700; border-top: 1px solid var(--d-line-card); } /* ─── Felder ───────────────────────────────────────────────────────────── */ .d-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .d-label { font-size: 12px; font-weight: 500; color: var(--d-text-2); } .d-label__note { color: var(--d-text-3); font-weight: 400; } .d-input, .d-select, .d-textarea { font: 400 13px/1.4 var(--d-font); color: var(--d-text); background: var(--d-surface); border: 1px solid var(--d-line-control); border-radius: var(--d-r-btn); padding: 7px 10px; width: 100%; } .d-input:focus, .d-select:focus, .d-textarea:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(139,74,74,.10); } .d-textarea { resize: vertical; min-height: 64px; } .d-hint { font-size: 11px; color: var(--d-text-3); } /* ─── Kennzahl-Kacheln (Gastakte, Belegung) ────────────────────────────── */ .d-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .d-stat { background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); padding: 12px 15px; color: inherit; text-decoration: none; } a.d-stat:hover { border-color: var(--d-line-control); text-decoration: none; } .d-stat.is-active { border-color: var(--d-line-active); box-shadow: var(--d-shadow-active); } .d-stat.is-alert { background: var(--d-bad-bg); border-color: var(--d-bad-line); } .d-stat__value { font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .d-stat__label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; color: var(--d-text-3); text-transform: uppercase; margin-top: 2px; } /* Zahlenspalte fester Breite (Betragsspalte 90px, design-master §2) */ .d-amount { width: var(--d-amount-w); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ─── Unter 1280px: Zweispalter werden einspaltig ──────────────────────── */ @media (max-width: 1180px) { .d-grid-2 { grid-template-columns: 1fr; } } /* ─── Listen-Detail-Seite: Liste fest, Detail scrollt ──────────────────── */ .d-ld { min-height: 100vh; align-items: start; /* Listenfläche + Trennlinie reichen bis ganz unten, auch wenn das Detail länger ist als die Liste */ background: linear-gradient(to right, var(--d-panel) calc(var(--d-list-w) - 1px), var(--d-line) calc(var(--d-list-w) - 1px) var(--d-list-w), transparent var(--d-list-w)); } .d-fields__row .d-badge { vertical-align: 1px; } .d-ld__list { position: sticky; top: 0; height: 100vh; } .d-ld__pager { padding: 6px 4px; } .d-ld__placeholder { padding: 40px 20px; text-align: center; } .d-ld__detail > .d-ld__placeholder { margin-top: 30vh; } /* Filter-Popover in der Chipzeile */ .d-filter { position: relative; } .d-filter > summary { list-style: none; } .d-filter > summary::-webkit-details-marker { display: none; } .d-filter__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 240px; max-height: 60vh; overflow-y: auto; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(44,24,16,.12); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .d-filter__panel .d-kicker { margin-top: 6px; } .d-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--d-text-nav); cursor: pointer; } .d-filter__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; } /* ─── Detailseite (Kopf + Karten) ──────────────────────────────────────── */ .d-detail { line-height: normal; } .d-detail__head { padding: 18px 26px 0; } .d-detail__proc { margin-top: 14px; } .d-detail__anchors { margin-top: 14px; } .d-detail__body { padding: 16px 26px 28px; display: flex; flex-direction: column; gap: 12px; } .d-detail__body > section { scroll-margin-top: 12px; } .d-h2 { font-family: var(--d-font-title); font-weight: 400; font-size: 20px; letter-spacing: -.01em; margin: 6px 0 0; } .d-section-head { display: flex; align-items: baseline; gap: 10px; } .d-block { display: flex; flex-direction: column; gap: 1px; } .d-strong { font-size: var(--d-fs-body); font-weight: 600; color: var(--d-text); } a.d-strong { color: var(--d-text); } .d-block a { color: inherit; } .d-sub { font-size: var(--d-fs-small); color: var(--d-text-2); margin-top: 1px; } .d-sub-inline { font-size: 11px; color: var(--d-text-3); } .d-divider { border-top: 1px solid var(--d-line-fine); margin: 10px 0 8px; } .d-card--pad > .d-card__head:not(:first-child) { padding-top: 0; } .d-switches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; } .d-seg > button { font-family: var(--d-font); } .d-seg-pop { position: relative; } .d-seg-pop > summary { list-style: none; cursor: pointer; } .d-seg-pop > summary::-webkit-details-marker { display: none; } .d-seg-pop__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 260px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(44,24,16,.12); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .d-person { padding: 7px 0; border-bottom: 1px solid var(--d-line-fine); } .d-person:last-child { border-bottom: none; padding-bottom: 0; } .d-person__top { display: flex; align-items: center; gap: 8px; } .d-person__top .d-strong { flex: 1; min-width: 0; } .d-kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: var(--d-fs-small); padding: 2px 0; } .d-kv > span:first-child { color: var(--d-text-3); } .d-note { white-space: pre-wrap; font-size: var(--d-fs-small); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--d-line-fine); } .d-form-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .d-actions { display: flex; gap: 8px; } .d-inline { display: inline; margin: 0; } .d-icon-btn { background: none; border: none; color: var(--d-text-4); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 5px; } .d-icon-btn:hover { color: var(--d-bad); background: var(--d-bad-bg); } /* Aufgaben (Checkbox-Zeilen wie Screenshot 08) */ .d-todo { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-top: 1px solid var(--d-line-fine); } .d-todo input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--d-accent); flex: none; cursor: pointer; } .d-todo__text { flex: 1; min-width: 0; font-size: var(--d-fs-row); cursor: pointer; } .d-todo__text.is-done { text-decoration: line-through; color: var(--d-text-3); } .d-todo form { margin: 0; } .d-todo--new { padding: 9px 16px 12px; } .d-todo--new .d-input { flex: 1; } /* Status-/Aktions-Popover (details) */ .d-pop { position: relative; } .d-pop > summary { list-style: none; cursor: pointer; } .d-pop > summary::-webkit-details-marker { display: none; } .d-pop__panel { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; min-width: 190px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(44,24,16,.12); padding: 5px; display: flex; flex-direction: column; } .d-pop--right .d-pop__panel { left: auto; right: 0; } .d-pop__panel form { margin: 0; } .d-pop__item { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px; border: none; background: none; font: 500 13px/1.3 var(--d-font); color: var(--d-text-nav); text-decoration: none; cursor: pointer; } .d-pop__item:hover { background: var(--d-accent-soft); color: var(--d-accent-soft-text); text-decoration: none; } .d-pop__item.is-active { font-weight: 700; color: var(--d-text); } .d-pop__item--danger { color: var(--d-bad); } .d-pop__item--danger:hover { background: var(--d-bad-bg); color: var(--d-bad); } /* Karten-Fuß/-Einschub */ .d-card__foot { padding: 10px 16px 12px; border-top: 1px solid var(--d-line-fine); display: flex; flex-direction: column; gap: 6px; } .d-card__inset { padding: 0 16px 10px; } .d-card__note { padding: 8px 16px 12px; font-size: 11.5px; color: var(--d-text-3); } .d-chips-inline { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .d-subhead { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--d-text-4); padding: 12px 16px 4px; border-top: 1px solid var(--d-line-fine); } .d-typeahead { position: relative; max-width: 520px; margin-top: 10px; } .d-row.is-cancelled .d-row__title, .d-row.is-cancelled .d-row__amount { text-decoration: line-through; color: var(--d-text-3); } .d-row__title.is-read { font-weight: 500; } .d-dir { font-weight: 600; color: var(--d-text-3); } .d-dir.is-out { color: var(--d-accent); } /* Zahlen (Screenshot 16) */ .d-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .d-box { background: var(--d-panel); border: 1px solid var(--d-line-card); border-radius: 10px; padding: 10px 12px; } .d-box__label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--d-text-3); } .d-box__value { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; } .d-box__sub { font-size: 11.5px; color: var(--d-text-2); margin-top: 1px; } .d-box__label > span { text-transform: none; letter-spacing: 0; font-weight: 600; } .d-table--compact th, .d-table--compact td { padding-left: 10px; padding-right: 10px; } .d-table--compact th:first-child, .d-table--compact td:first-child { padding-left: 16px; } .d-table .d-wrap { white-space: normal; max-width: 120px; } .d-lines { display: flex; flex-direction: column; } .d-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-row); } .d-line:first-child { border-top: none; } .d-line--total { font-weight: 700; font-size: 14.5px; border-top: 1px solid var(--d-line-card); } .d-line--total.d-line--plain { font-size: var(--d-fs-body); } .d-line--sub { border-top: none; padding-top: 0; font-size: 11.5px; color: var(--d-text-2); } .d-num { font-variant-numeric: tabular-nums; white-space: nowrap; } .d-pos { color: var(--d-ok-strong); } .d-neg { color: var(--d-bad); } /* ─── Detailseiten-Muster (Arthur 2026-09-29): Reiter, Pfeil, inline, Luft ─ */ .d-pane { min-width: 0; } .d-pane[hidden] { display: none !important; } .d-detail .d-grid-2 { gap: 16px; } .d-detail__body { gap: 16px; padding-top: 18px; } .d-detail .d-card--pad { padding: 16px 18px; } .d-detail .d-card__head { padding: 14px 18px 10px; } .d-detail .d-card--pad > .d-card__head { padding: 0 0 10px; } .d-detail .d-row { padding: 11px 18px; } .d-detail .d-todo { padding: 9px 18px; } .d-detail .d-table th, .d-detail .d-table td { padding-left: 18px; padding-right: 18px; } .d-detail .d-empty { padding: 16px 18px; } .d-detail .d-block { gap: 2px; } .d-span-2 { grid-column: 1 / -1; } .d-detail .d-row__title { font-size: var(--d-fs-body); } .d-detail .d-row__sub { font-size: var(--d-fs-small); color: var(--d-text-2); margin-top: 1px; } /* Ganze Karte als Link (Pfeil im Kopf statt „Bearbeiten") */ .d-card--link { display: block; color: inherit; text-decoration: none; } .d-card--link:hover { border-color: var(--d-line-control); text-decoration: none; } .d-card--link .d-card__head .d-chev { margin-left: auto; } .d-muted { color: var(--d-text-3); } .d-row__title--muted { font-weight: 500; color: var(--d-text-2); } /* Aufklappen an Ort und Stelle (Pfeil dreht) */ .d-disclose > summary { list-style: none; cursor: pointer; } .d-disclose > summary::-webkit-details-marker { display: none; } .d-disclose > summary:hover { background: var(--d-panel); } .d-disclose__chev { transition: transform .15s ease; } .d-disclose[open] .d-disclose__chev { transform: rotate(90deg); } .d-disclose__body { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 16px; } @media (prefers-reduced-motion: reduce) { .d-disclose__chev { transition: none; } } /* Inline-Eingabe unter einem Schalter (statt Popup) */ .d-inline-form { display: flex; gap: 8px; margin-top: 10px; } .d-inline-form .d-input { flex: 1; min-width: 0; } /* Feldzeilen „Bezeichnung → Wert" (Eckdaten, Kontakt, Empfänger) */ .d-fields { display: flex; flex-direction: column; padding: 0 18px 8px; } .d-fields__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-body); align-items: baseline; } .d-fields__row:first-child { border-top: none; padding-top: 2px; } .d-fields__row > span:first-child { color: var(--d-text-3); font-size: var(--d-fs-small); } .d-fields__row a { color: var(--d-text); text-decoration: none; border-bottom: 1px solid var(--d-line-control); } .d-fields__row a:hover { color: var(--d-accent); } .d-card__text { padding: 0 18px 12px; font-size: var(--d-fs-body); line-height: 1.55; white-space: pre-wrap; } .d-card .d-card__body { padding: 4px 18px 16px; } /* Spaltenzeilen mit Aufklappen (Catering/Personal) */ .d-colhead { display: grid; gap: 12px; padding: 8px 18px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--d-text-3); border-bottom: 1px solid var(--d-line-fine); } .d-cols-cat { display: grid; grid-template-columns: minmax(0, 1fr) 80px 90px 90px 110px 16px; gap: 12px; align-items: center; } .d-cols-staff { display: grid; grid-template-columns: minmax(0, 1fr) 160px 80px 110px 16px; gap: 12px; align-items: center; } .d-colhead .num, .d-cols-cat .num, .d-cols-staff .num { text-align: right; font-variant-numeric: tabular-nums; } .d-detail .d-disclose > summary.d-row { border-top: 1px solid var(--d-line-fine); } .d-colhead + .d-disclose > summary.d-row { border-top: none; } .d-row--total { font-weight: 700; background: var(--d-panel); } .d-row__title--accent { color: var(--d-accent); font-weight: 600; } .d-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; } .d-form-grid .d-span-2 { grid-column: span 2; } .d-span-all { grid-column: 1 / -1; } .d-disclose__body > form + form { margin-top: 2px; } .d-select { appearance: auto; } /* ─── Formularseiten (Muster „Beleg bearbeiten", Screenshot 13) ─────────── */ /* .d-form-page ohne max-width: volle Breite, auch bei eingeklappter Leiste (Arthur 2026-09-29) */ .d-form-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .d-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d-form-page .d-card--pad { padding: 16px 18px 18px; } .d-form-page .d-card--pad > .d-card__head { padding: 0 0 12px; } .d-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding-top: 4px; } .d-typeahead-field { position: relative; } .d-hint--ok { color: var(--d-ok-strong); font-weight: 600; } .d-form-page .d-form-grid { align-items: start; } .d-field > .d-seg { align-self: flex-start; } .d-seg { flex-wrap: wrap; } @media (max-width: 1180px) { .d-form-cols { grid-template-columns: 1fr; } } /* ─── Befehlspalette (⌘K, d-shell.js) ──────────────────────────────────── */ .d-palette { border: none; padding: 0; background: transparent; margin: 12vh auto auto; width: 560px; max-width: calc(100vw - 32px); } .d-palette::backdrop { background: rgba(44,24,16,.18); } .d-palette__box { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 12px; box-shadow: 0 12px 40px rgba(44,24,16,.18); overflow: hidden; font-family: var(--d-font); } .d-palette__input { width: 100%; border: none; border-bottom: 1px solid var(--d-line-fine); padding: 14px 16px; font: 400 15px/1.4 var(--d-font); color: var(--d-text); outline: none; } .d-palette__list { max-height: 50vh; overflow-y: auto; padding: 6px; } .d-palette__group { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--d-text-4); padding: 10px 10px 4px; } .d-palette__item { display: block; padding: 7px 10px; border-radius: 8px; color: var(--d-text-nav); font-size: 13px; font-weight: 500; text-decoration: none; } .d-palette__item:hover, .d-palette__item.is-active { background: var(--d-accent-soft); color: var(--d-accent-soft-text); text-decoration: none; } .d-palette__empty { padding: 14px 10px; color: var(--d-text-3); font-size: 12.5px; } .d-palette__foot { border-top: 1px solid var(--d-line-fine); padding: 8px 16px; font-size: 11px; color: var(--d-text-4); } /* ─── Anmeldung ────────────────────────────────────────────────────────── */ .d-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--d-bg); } .d-login__card { width: 100%; max-width: 360px; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: 14px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 16px; } .d-login__brand { text-align: center; margin-bottom: 6px; } .d-login__brand .d-brand__name { font-size: 24px; } .d-login__brand .d-brand__sub { margin-top: 4px; } .d-login__form { display: flex; flex-direction: column; gap: 12px; } .d-login__form .d-btn { margin-top: 6px; } .d-login__or { text-align: center; font-size: 12px; color: var(--d-text-3); } .d-login__error { font-size: 12.5px; color: var(--d-bad); } /* ─── Druck: Navigation nie mitdrucken ─────────────────────────────────── */ @media print { .d-sidebar { display: none !important; } .main-content, .nav-collapsed .main-content { margin-left: 0 !important; } } /* ─── Absage (Screenshot 07) ───────────────────────────────────────────── */ .d-cancel .d-head__row { align-items: baseline; gap: 14px; } .d-cancel__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; } .d-choice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--d-line-control); border-radius: 10px; padding: 12px 14px; margin-top: 8px; cursor: pointer; font-size: 13.5px; } .d-choice:has(input:checked) { border-color: var(--d-accent); background: #FBEDEA; } .d-choice input { width: 18px; height: 18px; accent-color: var(--d-accent); margin-top: 1px; flex: none; } .d-choice__body { display: block; line-height: 1.45; } .d-choice__sub { display: block; font-size: 12px; color: var(--d-text-2); margin-top: 2px; } .d-cancel__paid { margin-top: 10px; } .d-cancel__invoice { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .d-cancel__invoice .d-check { font-size: 13px; color: var(--d-text); } .d-cancel__invoice .d-check input { accent-color: var(--d-accent); width: 16px; height: 16px; } .d-cancel__calc { position: sticky; top: 18px; } .d-cancel__note { margin: 10px 0 0; line-height: 1.5; } @media (max-width: 1100px) { .d-cancel__grid { grid-template-columns: 1fr; } } /* ─── Rechnung (Screenshot 12) ─────────────────────────────────────────── */ .d-h1__count { font-family: var(--d-font); font-size: 13px; font-weight: 600; } .d-ld__search { padding: 0 18px 12px; } .d-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .d-toolbar form { margin: 0; } button.d-proc__step { font: inherit; text-align: left; width: 100%; cursor: pointer; } div.d-proc__step { cursor: default; } .d-head__ctx { color: inherit; text-decoration: none; } .d-head__ctx:hover { color: var(--d-accent); text-decoration: none; } .d-inv-sum { gap: 0; } .d-inv-sum .d-line--sub { padding: 2px 0; } .d-inv-sum .d-line--total { padding: 6px 0 2px; } .d-inv-sum a { color: inherit; } .d-inv-hint { font-size: var(--d-fs-small); color: var(--d-text-2); line-height: 1.55; } .d-inv-storno > summary { cursor: pointer; } .d-fields--compact .d-fields__row { grid-template-columns: 90px minmax(0, 1fr); padding: 4px 0; border-top: none; font-size: var(--d-fs-row); } /* Rechnungsentwurf bearbeiten: Positionstabelle mit Eingabefeldern */ .d-form-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .d-input--num { text-align: right; font-variant-numeric: tabular-nums; } .d-draft-table td { padding-top: 6px; padding-bottom: 6px; } .d-draft-table td:nth-child(2) { width: 72px; } .d-draft-table td:nth-child(3) { width: 96px; } .d-draft-table td:nth-child(4) { width: 150px; } .d-draft-table .net, .d-draft-table .gross { width: 88px; } .d-row-remove { background: none; border: none; padding: 0; font: 600 11px/1 var(--d-font); color: var(--d-text-4); cursor: pointer; visibility: hidden; } .d-draft-table tr:hover .d-row-remove, .d-row-remove:focus-visible { visibility: visible; } .d-row-remove:hover { color: var(--d-bad); } .d-draft-sum { max-width: 300px; margin-left: auto; width: 100%; } @media (max-width: 1180px) { .d-form-cols--even { grid-template-columns: 1fr; } } .d-draft-table { table-layout: fixed; } .d-draft-table th:nth-child(2) { width: 72px; } .d-draft-table th:nth-child(3) { width: 96px; } .d-draft-table th:nth-child(4) { width: 190px; } .d-draft-table th:nth-child(5), .d-draft-table th:nth-child(6) { width: 92px; } .d-draft-table th:nth-child(7) { width: 70px; } /* Rechnung/Anzahlung erstellen: Erstellen-Karte rechts */ .d-create { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; } .d-create .d-lines a { color: inherit; } .d-create__due { max-width: 220px; margin-top: 4px; } .d-create__clause { white-space: pre-wrap; font-size: var(--d-fs-small); color: var(--d-text-2); line-height: 1.6; } .d-input--price { width: 100px; display: inline-block; } .d-select--sm { width: 90px; padding: 5px 8px; } .d-item__ctx { color: var(--d-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Rechnung: Positionen volle Breite (Menge × EP · Satz · Betrag als Spalten), Summen rechtsbündig */ .d-inv-pos__qty { width: 150px; text-align: right; font-size: var(--d-fs-small); color: var(--d-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .d-inv-pos__rate { width: 56px; text-align: right; font-size: var(--d-fs-small); color: var(--d-text-3); white-space: nowrap; } .d-inv-pos__amount { width: 110px; text-align: right; } .d-inv-sum { align-items: flex-end; } .d-inv-sum > .d-line { width: 100%; max-width: 360px; } /* Schnelleinstellungen (Rechnungsentwurf) */ .d-quick { display: flex; flex-direction: column; gap: 12px; } .d-quick > .d-card__head { padding-bottom: 0; } .d-quick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .d-quick__row > .d-label { width: 120px; flex: none; } .d-quick__row .d-seg { flex-wrap: nowrap; white-space: nowrap; } .d-quick__date { max-width: 180px; } .d-quick__status { font-size: 11.5px; font-weight: 600; color: var(--d-ok); white-space: nowrap; } .d-quick__status.is-error { color: var(--d-bad); } .d-quick__foot { display: flex; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px solid var(--d-line-fine); padding-top: 12px; } /* ─── Anfrage (Screenshot 08) ─────────────────────────────────────────── */ .d-inq-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .d-inq-actions .d-chain { font-size: 12px; } .d-inq-actions .d-chain__step { padding: 5px 12px; } button.d-chain__step { font: inherit; font-weight: 600; cursor: pointer; } .d-btn--dangerline { color: var(--d-bad); } .d-btn--dangerline:hover { color: var(--d-bad); border-color: var(--d-bad-line); } /* Verfügbarkeitskasten: Zeilen mit Aktion rechts (grün frei, rot Konflikt) */ .d-avail { border-radius: 10px; border: 1px solid var(--d-ok-line); background: var(--d-ok-soft); color: var(--d-ok); font-size: var(--d-fs-small); } .d-avail.is-bad { border-color: var(--d-bad-line); background: var(--d-bad-bg); color: var(--d-bad); } .d-avail__row { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-top: 1px solid rgba(0,0,0,.05); color: inherit; text-decoration: none; } .d-avail__row:first-child { border-top: none; } .d-avail__row > span:first-child { flex: 1; min-width: 0; } .d-avail__item:hover { text-decoration: none; background: rgba(255,255,255,.35); } .d-avail__action { font-weight: 700; color: inherit; white-space: nowrap; text-decoration: none; } .d-avail__action:hover { text-decoration: none; } .d-inq-wish { gap: 3px; font-size: var(--d-fs-body); } .d-inq-raw { font-style: normal; color: var(--d-text-2); } .d-inq-rawmore > summary { list-style: none; cursor: pointer; } .d-inq-rawmore > summary::-webkit-details-marker { display: none; } .d-inq-rawmore[open] > summary { display: none; } .d-inq-rawmore__hint { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--d-accent); white-space: normal; } .d-inq-draft { display: flex; flex-direction: column; gap: 10px; border-color: var(--d-line-active); box-shadow: var(--d-shadow-active); } .d-inq-draft__body { min-height: 260px; line-height: 1.6; } .d-inq-draft__status { font-size: 12px; color: var(--d-bad); min-height: 1em; } .d-table tr.is-taken td { color: var(--d-text-3); } /* ─── Übernachtung (Screenshot 09) ────────────────────────────────────── */ .d-fields__row--total > span:last-child { font-weight: 700; } .d-kicker--bad { color: var(--d-bad); } .d-bk-fee { max-width: 200px; } .d-bk-reg-actions { margin-top: 10px; align-items: center; flex-wrap: wrap; } .d-bk-token { font-family: ui-monospace, monospace; font-size: 11px; } .d-bk-finnote { font-size: var(--d-fs-small); margin-bottom: 8px; } .d-bk-vat { padding-left: 0; margin-top: 10px; } .d-bk-via { font-weight: 400; font-size: var(--d-fs-small); } .d-card__body.d-lines .d-line--sub { padding: 3px 0; font-size: var(--d-fs-row); color: var(--d-text); } /* Übernachtungsangebot aus Anfrage */ .d-form-cols--offer { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .d-offer-cb { width: 16px; height: 16px; accent-color: var(--d-accent); } .d-offer-bf { max-width: 160px; margin-top: 10px; } .d-offer-send { display: flex; flex-direction: column; gap: 12px; } .d-offer-body { font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.6; min-height: 420px; } @media (max-width: 1180px) { .d-form-cols--offer { grid-template-columns: 1fr; } } /* Übernachtung anlegen/bearbeiten: Zimmer je Haus */ .d-bkf-newguest { margin-top: 10px; } .d-bkf-rooms { display: flex; flex-direction: column; gap: 12px; } .d-bkf-house { display: flex; flex-direction: column; gap: 5px; } .d-bkf-house__head { display: flex; align-items: center; justify-content: space-between; } .d-bkf-house__head .d-subhead { padding: 0; border: none; } .d-bkf-room { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--d-line-card); border-radius: 9px; cursor: pointer; font-size: var(--d-fs-row); } .d-bkf-room:hover { background: var(--d-panel); } .d-bkf-room.is-taken { opacity: .5; background: var(--d-panel); } .d-bkf-room > input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--d-accent); flex: none; } .d-bkf-room__name { flex: 1; min-width: 0; } .d-bkf-room__price { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--d-text-3); white-space: nowrap; } .d-bkf-room__input { width: 84px; padding: 4px 7px; font-size: 12px; } .d-bkf-room__max { font-size: 11.5px; white-space: nowrap; } .d-bkf-override { margin-top: 4px; } .d-bkf-vewarn .d-banner__text { display: flex; flex-direction: column; gap: 6px; } .d-bkf-vewarn__confirm { color: var(--d-text); } /* Einheitlicher Listenfilter (_d-listfilter.ejs) */ .d-ld__note { padding: 0 18px 10px; font-size: 11px; color: var(--d-text-3); } /* Gemeinsame Kacheln (views/layout/partials/d/) */ .d-fields--wide .d-fields__row { grid-template-columns: 170px minmax(0, 1fr); } .d-note-meta { display: block; margin-top: 3px; font-size: 11px; color: var(--d-text-3); white-space: normal; } /* Suche + „Filter ▾" in einer Zeile unter den Status-Chips */ .d-ld__searchrow { display: flex; align-items: center; gap: 6px; padding: 0 18px 12px; } .d-ld__searchrow .d-ld__search { flex: 1; min-width: 0; padding: 0; } .d-filter--right .d-filter__panel { left: auto; right: 0; } /* Status-Chips der Listen: einzelne Chips, dürfen in eine zweite Zeile umbrechen, aber flach (Arthur 2026-09-29: keine Schalterleiste, „zwei Zeilen mit Umbruch, aber nicht so hoch"). */ .d-ld__filters.d-chiprow { flex-wrap: wrap; gap: 4px; padding: 0 14px 8px; } .d-chiprow .d-chip { font-size: 11.5px; line-height: 1.25; padding: 2px 9px; } .d-ld__searchrow { padding: 0 14px 12px; } /* ─── Heute (Screenshot 01) ───────────────────────────────────────────── */ .d-today__head { align-items: baseline; gap: 14px; } .d-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--d-text-4); } .d-dot--ok { background: var(--d-ok-strong, #3E7B4F); } .d-dot--warn { background: #B8912F; } .d-dot--bad { background: var(--d-bad); } .d-dot--info { background: #4A5FA8; } .d-dot--accent { background: var(--d-accent); } .d-dot--neutral { background: var(--d-text-4); } .d-today__mail { font-size: var(--d-fs-small); color: var(--d-text-3); } .d-today__mail a { color: var(--d-accent); font-weight: 600; text-decoration: none; } .d-occ { display: grid; grid-template-columns: 120px 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 4px 18px 16px; } .d-occ__donut { width: 120px; height: 120px; } .d-occ__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--d-fs-small); color: var(--d-text-2); } .d-occ__legend strong { color: var(--d-text); margin-left: 4px; } .d-occ__kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .d-occ__kpi { text-align: left; cursor: pointer; font-family: inherit; } .d-occ__kpi.active { border-color: var(--d-line-active); box-shadow: var(--d-shadow-active); } .d-occ__fchead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .d-occ__fchead .d-kicker { flex: none; } @media (max-width: 1180px) { .d-occ { grid-template-columns: 120px minmax(0, 1fr); } .d-occ__kpis { grid-column: 1 / -1; } } /* ─── Posteingang (Screenshot 11) — nur innerhalb .d-mail, bestehende Mail-Klassen neu eingekleidet ── */ .d-link-accent { background: none; border: none; padding: 0; font: 600 11.5px/1.3 var(--d-font); color: var(--d-accent); cursor: pointer; } .d-mail .list-detail.mail-client { --ld-list-width: 380px; background: var(--d-bg, #FBF5F3); } .d-mail .mail-list-panel { background: var(--d-panel); border-right: 1px solid var(--d-line); } .d-mail .mail-search-bar.d-mail__top { padding: 0; background: var(--d-panel); border-bottom: 1px solid var(--d-line-fine); } .d-mail__head { padding: 16px 14px 10px; gap: 6px; } .d-mail__head .d-h1 { flex: 1; } .d-mail .mail-readall { margin: -4px 14px 8px; } .d-mail .d-ld__searchrow { padding: 0 14px 12px; } .d-mail .d-ld__search input { width: 100%; } .d-mail__bulk { align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--d-line-fine); background: var(--d-surface); } .d-mail__bulkcount { flex: 1; font-size: var(--d-fs-small); color: var(--d-text-2); } /* Listenzeilen: Absender fett, Zeit rechts, Betreff, Kennzeichen */ .d-mail .mail-list-item-wrap { background: transparent; border-bottom: 1px solid var(--d-line-fine); } .d-mail .mail-list-item { padding: 11px 6px 11px 14px; border-bottom: none; } /* Hintergrund malt NUR die Hülle — sonst hat der Streifen mit ○/Papierkorb (ausserhalb des ) beim Überfahren und bei ungelesenen Mails eine andere Farbe als die Zeile (alte app.css-Regeln am , Fund Arthur 2026-09-30). */ .d-mail .mail-list-item, .d-mail .mail-list-item:hover, .d-mail .mail-list-item.unread { background: transparent; } .d-mail .mail-list-item-wrap:hover { background: rgba(255,255,255,.55); } .d-mail .mail-list-item-wrap:has(.mail-list-item.unread) { background: transparent; } .d-mail .mail-list-item-wrap:has(.mail-list-item.active) { background: var(--d-accent-soft); box-shadow: inset 3px 0 0 var(--d-accent); } .d-mail .mail-list-item.active { background: transparent; border-left: none; padding-left: 14px; } .d-mail .mail-list-item-from { font-size: var(--d-fs-body); font-weight: 500; color: var(--d-text); } .d-mail .mail-list-item.unread .mail-list-item-from { font-weight: 700; } .d-mail .mail-list-item-subject { font-size: var(--d-fs-row); color: var(--d-text-2); margin-top: 2px; } .d-mail .mail-list-item-meta { font-size: 11px; color: var(--d-text-3); margin-top: 4px; } .d-mail .mail-list-item-meta .badge { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 1px 6px; } .d-mail .mail-unread-dot { width: 7px; height: 7px; background: var(--d-accent); } .d-mail .mail-list-delete { border-bottom: none; padding-top: 10px; } /* Mail-Kopf */ .d-mail .mail-detail-panel { background: var(--d-bg, #FBF5F3); } .d-mail .mail-detail-header.d-mail__dhead { background: transparent; border-bottom: none; padding: 16px 24px 8px; } .d-mail__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .d-mail__titlerow .d-h1 { flex: 1 1 320px; min-width: 0; } .d-mail__when { font-size: 12px; white-space: nowrap; } .d-mail__actions { display: flex; gap: 6px; margin-left: 0; } .d-mail__actions form { margin: 0; } .d-mail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: var(--d-fs-small); color: var(--d-text-2); } .d-mail__meta a { color: var(--d-accent); text-decoration: none; } .d-mail__ki > summary { cursor: pointer; list-style: none; color: var(--d-text-2); } .d-mail__ki > summary::-webkit-details-marker { display: none; } .d-mail__ki pre { font-size: 11px; max-height: 140px; overflow: auto; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: 8px; padding: 8px; margin: 6px 0 0; } .d-mail__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; } .d-mail__att { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: 7px; color: inherit; text-decoration: none; } /* Vorgangs-Leiste (eine Zeile) + Einordnen (_vorgang_panel.ejs, Arthur 2026-09-29: „smarter") */ .d-vg { display: flex; align-items: center; gap: 10px; margin: 8px 24px 0; padding: 8px 14px; min-height: 40px; background: var(--d-accent-soft); border: 1px solid var(--d-line-active); border-radius: 10px; font-size: var(--d-fs-row); } .d-vg.is-open-case { background: var(--d-surface); border-color: var(--d-line-card); } .d-vg__kind { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--d-surface); color: var(--d-accent-soft-text); border-radius: 5px; padding: 2px 7px; } .d-vg__kind--none { background: var(--d-panel); color: var(--d-text-3); } .d-vg__main { flex: none; color: var(--d-text); text-decoration: none; white-space: nowrap; } .d-vg__main:hover { color: var(--d-accent); text-decoration: none; } .d-vg__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d-text-2); } .d-vg__meta a { color: var(--d-accent); } .d-vg__status { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--d-accent-soft-text); } .d-vg__spacer { flex: 1; } .d-vg__actions { flex: none; display: flex; align-items: center; gap: 14px; } .d-vg__actions form { margin: 0; } .d-vg__act { background: none; border: none; padding: 0; font: 600 12.5px/1.3 var(--d-font); color: var(--d-accent); cursor: pointer; text-decoration: none; white-space: nowrap; } .d-vg__act:hover { color: var(--d-accent-dark); text-decoration: none; } .d-vg__act--primary { color: var(--d-surface); background: var(--d-accent); border-radius: 7px; padding: 4px 11px; } .d-vg__act--primary:hover { color: #fff; background: var(--d-accent-dark); } .d-ein { margin: 8px 24px 0; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; } .d-ein__head { display: flex; align-items: center; } .d-ein__close { background: none; border: none; color: var(--d-text-3); cursor: pointer; font-size: 13px; padding: 4px; } .d-ein__close:hover { color: var(--d-text); } .d-ein form { margin: 0; } .d-ein__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .d-ein__row--sub { padding: 2px 0 2px 94px; } .d-ein__label { flex: none; width: 84px; font-size: 12px; color: var(--d-text-2); white-space: nowrap; } .d-ein__field { position: relative; flex: 0 1 220px; } .d-ein__field--wide { flex: 1 1 320px; max-width: 520px; } .d-ein__field .d-input { width: 100%; } .d-ein__select { width: auto; min-width: 200px; max-width: 320px; } .d-ein__hint { flex: 1; min-width: 160px; font-size: 11.5px; color: var(--d-text-3); } .d-ein__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } .d-ein__chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-text); border-radius: 999px; padding: 4px 12px; font: 500 12.5px/1.35 var(--d-font); cursor: pointer; text-align: left; } .d-ein__chip:hover, .d-ein__chip:focus-visible { border-color: var(--d-line-active); background: var(--d-accent-soft); outline: none; } .d-ein__chip-art { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-accent-soft-text); } .d-ein__chip-grund { font-size: 11px; color: var(--d-text-3); } .d-ein__chip-grund::before { content: "· "; } .d-ein__chip--new { color: var(--d-accent); font-weight: 600; border-style: dashed; } .d-ein__chip.is-on { border-color: var(--d-line-active); background: var(--d-accent-soft); font-weight: 600; } .d-ein__results { margin-left: 94px; max-width: 620px; border: 1px solid var(--d-line-fine); border-radius: 9px; overflow: hidden; } .d-ein__hit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; width: 100%; background: none; border: none; border-top: 1px solid var(--d-line-fine); padding: 7px 12px; font: 13px/1.35 var(--d-font); color: var(--d-text); text-align: left; cursor: pointer; } .d-ein__hit:first-child { border-top: none; } .d-ein__hit:hover, .d-ein__hit:focus-visible { background: var(--d-accent-soft); outline: none; } .d-ein__hit-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-ein__hit-sub { grid-column: 2; font-size: 11.5px; color: var(--d-text-3); } .d-ein__hit-go { grid-column: 3; grid-row: 1; font-size: 12px; font-weight: 600; color: var(--d-accent); } .d-ein__none { padding: 8px 12px; font-size: 12.5px; color: var(--d-text-3); } .d-ein__foot { border-top: 1px solid var(--d-line-fine); padding-top: 8px; } .d-ein__skip { background: none; border: none; padding: 0; font: 12px/1.3 var(--d-font); color: var(--d-text-3); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .d-ein__skip:hover { color: var(--d-text); } .d-vg__act--quiet { color: var(--d-text-3); font-weight: 500; } #vorgang-id-input.is-valid { border-color: var(--d-ok-line); } #vorgang-id-input.is-invalid { border-color: var(--d-bad-line); } /* Mailtext, Verlauf, Antwort als Karten */ .d-mail .mail-thread { margin: 10px 24px 0; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); } .d-mail .mail-detail-body { font-size: var(--d-fs-body); color: var(--d-text); } .d-mail .mail-quote-toggle { color: var(--d-accent); font-weight: 600; } .d-mail .mail-reply-panel { margin: 10px 24px 0; background: var(--d-surface); border: 1px solid var(--d-line-card); border-top: 1px solid var(--d-line-card); border-radius: var(--d-r-card); } .d-mail .mail-actions-bar { margin: 10px 24px 16px; border-top: none; background: transparent; padding: 0; } .d-mail .mail-actions-bar:not(:has(*)) { display: none; } @media (max-width: 1180px) { .d-mail .list-detail.mail-client { --ld-list-width: 340px; } } /* ─── Kalender (Screenshot 10) — neuer Kopf, Monatsraster eingekleidet, Woche/Liste, Ziehen ─────── */ .d-cal__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .d-cal__label { font-family: var(--d-font-title); font-size: 18px; padding: 0 4px; } .d-cal .d-seg > a { font-size: 12px; font-weight: 600; padding: 4px 13px; border-radius: 6px; color: var(--d-text-2); text-decoration: none; } .d-cal .cal-legend { margin: 0; font-size: 12px; color: var(--d-text-2); gap: 6px 16px; } .d-cal .cal-chip { width: 10px; height: 10px; border-radius: 3px; } .d-cal .cal-card { padding: 0; } .d-cal .cal-head { border-bottom: 1px solid var(--d-line-card); } .d-cal .cal-head-day { text-align: left; padding: 8px 10px; font-size: 10.5px; color: var(--d-text-3); letter-spacing: .07em; } .d-cal .cal-week { min-height: 96px; border-bottom: 1px solid var(--d-line-fine); } /* Monat füllt die Fensterhöhe (Arthur 2026-09-29): Seite, Karte und Raster wachsen mit, die Wochen teilen sich den Platz. */ .d-cal.d-page:has(.cal-grid[data-cal-month]) { flex: 1 0 auto; } .d-cal > .cal-card:has(.cal-grid[data-cal-month]) { flex: 1 0 auto; display: flex; flex-direction: column; } .d-cal .cal-grid[data-cal-month] { flex: 1 0 auto; display: flex; flex-direction: column; } .d-cal .cal-grid[data-cal-month] > .cal-week { flex: 1 0 auto; } .d-cal .cal-day { border-right: 1px solid var(--d-line-fine); padding: 8px 10px; position: relative; } .d-cal .cal-day.is-weekend { background: #FDF6F4; } .d-cal .cal-day.is-other-month .cal-day-num { color: var(--d-text-4); opacity: 1; } .d-cal .cal-day-num { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--d-text); } .d-cal .cal-day.is-today .cal-day-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--d-accent); color: #fff; padding: 0 5px; margin: -3px 0 0 -4px; } .d-cal .cal-day.is-today { background: transparent; } .d-cal .cal-day:hover { background: var(--d-panel); } .cal-day-new { display: none; position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 12px 0; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--d-accent); border: 1px dashed var(--d-line-active); border-radius: 8px; background: var(--d-surface); } .d-cal .cal-day:hover .cal-day-new { display: block; } .is-cal-dragging .cal-day:hover .cal-day-new { display: none; } .d-cal .cal-lanes { padding-top: 30px; --cal-lane-height: 22px; row-gap: 4px; } .d-cal .cal-bar-text { line-height: 1.3; } .d-cal .cal-bar { border-radius: 10px; font-size: 11.5px; font-weight: 600; margin: 0 3px; padding: 0 10px; } .d-cal .cal-bar.is-cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; } .d-cal .cal-bar.is-cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; } .d-cal .cal-bar.is-outline { border-radius: 6px; } .d-cal__hint { margin: -4px 0 0; font-size: 11.5px; color: var(--d-text-3); } /* Ziehen */ .cal-bar.is-draggable { cursor: grab; position: relative; touch-action: none; } .is-cal-dragging, .is-cal-dragging * { cursor: grabbing !important; user-select: none; } .cal-bar-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; cursor: ew-resize; } .cal-bar-grip::after { content: ''; position: absolute; right: 3px; top: 5px; bottom: 5px; width: 2px; border-radius: 1px; background: rgba(255,255,255,.7); } .d-cal .cal-day.is-drag-preview { background: repeating-linear-gradient(135deg, rgba(139,74,74,.07) 0 6px, rgba(139,74,74,.12) 6px 12px); box-shadow: inset 0 0 0 1.5px rgba(139,74,74,.35); } .d-cal__drag-tip { position: fixed; z-index: 60; background: #2C1810; color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 7px; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; white-space: nowrap; } .d-cal__drag-tip strong { color: #fff; } /* Woche: Zeile je Einheit */ .d-calweek__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--d-line-fine); } .d-calweek__row:last-child { border-bottom: none; } .d-calweek__row--head { border-bottom: 1px solid var(--d-line-card); } .d-calweek__row--head .cal-head { border-bottom: none; } .d-calweek__label { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border-right: 1px solid var(--d-line-fine); font-size: var(--d-fs-row); background: var(--d-panel); } .d-calweek__label span { font-size: 10.5px; color: var(--d-text-3); } .d-calweek__date { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--d-text-2); margin-left: 4px; } .d-cal .cal-head-day.is-today { color: var(--d-accent); } .d-cal .d-calweek__track.cal-week { min-height: 52px; border-bottom: none; } .d-cal .d-calweek__track .cal-lanes { padding: 8px 0; } /* Liste */ .d-callist { padding: 4px 0; } .d-callist__day { padding: 14px 18px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-text-3); } .d-callist__day.is-today { color: var(--d-accent); } .d-callist__item { width: 100%; background: none; border: none; border-top: 1px solid var(--d-line-fine); font: inherit; text-align: left; cursor: pointer; color: inherit; text-decoration: none; } .d-callist__item:hover { background: var(--d-panel); text-decoration: none; } .d-callist__item .cal-chip { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* Schnell-Neuanlage im Kalender (Arthur 2026-09-29: kleines Fenster, große Kacheln) */ .d-quick-new { margin: auto; inset: 0; max-height: calc(100vh - 48px); overflow: auto; width: min(560px, calc(100vw - 32px)); border: 1px solid var(--d-line); border-radius: 14px; padding: 18px 20px 20px; background: var(--d-surface); box-shadow: 0 18px 50px rgba(44,24,16,.22); color: var(--d-text); } .d-cal-move { width: min(440px, calc(100vw - 32px)); } .d-cal-move__facts { display: grid; grid-template-columns: 70px 1fr; gap: 6px 12px; margin: 0; font-variant-numeric: tabular-nums; } .d-cal-move__facts dt { color: var(--d-text-3); font-size: 12px; padding-top: 1px; } .d-cal-move__facts dd { margin: 0; } .d-cal-move__hints { margin: 0; padding-left: 18px; color: var(--d-text-2); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; } .d-quick-new::backdrop { background: rgba(44,24,16,.28); } .d-quick-new__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .d-quick-new__head .d-h2 { flex: 1; margin: 0; font-size: 20px; } .d-quick-new__back, .d-quick-new__close { background: none; border: none; font-size: 16px; color: var(--d-text-3); cursor: pointer; padding: 4px 6px; border-radius: 6px; } .d-quick-new__back:hover, .d-quick-new__close:hover { background: var(--d-panel); color: var(--d-text); } .d-quick-new__step { display: flex; flex-direction: column; gap: 14px; } .d-quick-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .d-quick-tile { display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; text-align: left; padding: 16px 16px; min-height: 76px; background: var(--d-panel); border: 1px solid var(--d-line-card); border-radius: 11px; font: inherit; color: inherit; cursor: pointer; } .d-quick-tile:hover, .d-quick-tile:focus-visible { border-color: var(--d-line-active); background: var(--d-accent-soft); outline: none; } .d-quick-tile .cal-chip { width: 12px; height: 12px; border-radius: 4px; grid-row: 1 / span 2; } .d-quick-tile strong { font-size: 14px; } .d-quick-tile span:last-child { grid-column: 2; font-size: 11.5px; color: var(--d-text-3); } .d-quick-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ─── Belege & Ausgaben (Phase 7, Screenshot 14) ─────────────────────────── */ .d-belege .d-ld__filters { padding: 0 0 8px; } .d-belege__filter .d-ld__searchrow { padding: 0; } .d-belege__filter .d-filter__panel { width: 340px; max-height: 70vh; overflow-y: auto; } .d-belege__bar { display: flex; align-items: center; gap: 12px; } .d-belege__bar .d-muted { margin-left: auto; font-size: var(--d-fs-small); } .d-belege .d-card > .d-row:first-child { border-top: none; } .d-belege .d-card__head + .d-row { border-top: 1px solid var(--d-line-fine); } .d-beleg { padding: 11px 16px; gap: 14px; } .d-beleg.is-muted .d-row__title { color: var(--d-text-2); } .d-beleg__titel { font-weight: 400; color: var(--d-text-3); font-size: var(--d-fs-small); margin-left: 4px; } .d-beleg__state { display: flex; align-items: center; gap: 4px; flex: none; } .d-beleg__note { flex: none; width: 190px; font-size: 12px; color: var(--d-text-3); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-beleg__note.is-warn { color: var(--d-warn); } .d-belege__blocktitle { flex: 1; min-width: 0; font-size: var(--d-fs-row); } .d-belege__sums { max-width: 560px; margin-left: auto; width: 100%; } .d-belege__sumtable th:first-child, .d-belege__sumtable td:first-child { width: 40%; } .d-belege__empty { border-top: none; padding: 28px 16px; text-align: center; } .d-belege__close { width: 300px; display: flex; flex-direction: column; gap: 8px; } .d-belege__closerow { display: flex; gap: 6px; } .d-belege__closerow .d-input { width: auto; min-width: 0; flex: 1; } .d-belege__cc { position: relative; } .d-belege__ccres { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: 8px; box-shadow: var(--d-shadow-active); max-height: 220px; overflow-y: auto; padding: 4px; } .d-belege__ccopt { display: block; width: 100%; text-align: left; background: none; border: none; padding: 6px 8px; border-radius: 6px; font: 400 12.5px/1.4 var(--d-font); color: var(--d-text); cursor: pointer; } .d-belege__ccopt:hover { background: var(--d-panel); } .d-belege__range { display: flex; align-items: center; gap: 6px; } .d-belege__range .d-input { flex: 1; min-width: 0; } @media (max-width: 1100px) { .d-beleg__note { width: 130px; } } /* ─── Beleg bearbeiten (Phase 7, Screenshot 13): Beleg links, Daten rechts ─── */ .d-page.d-bedit { padding: 0; } .d-bedit__grid { display: grid; grid-template-columns: minmax(320px, 0.62fr) minmax(0, 1fr); flex: 1; min-height: 100vh; } .d-bedit__side { background: var(--d-panel); border-right: 1px solid var(--d-line); padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .d-bedit__main { padding: var(--d-page-y) var(--d-page-x) 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .d-bedit__meta { font-size: 11.5px; color: var(--d-text-3); line-height: 1.5; } .d-bviewer { position: sticky; top: 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .d-bviewer__bar { display: flex; align-items: center; gap: 6px; } .d-bviewer__page { font-size: 12px; font-weight: 600; color: var(--d-text-2); margin-right: 2px; } .d-bviewer__bar .d-btn { padding: 4px 9px; font-size: 12px; } .d-bviewer__bar .d-seg button[data-v-zoom] { cursor: default; color: var(--d-text); min-width: 46px; } .d-bviewer .d-bviewer__sheet { height: 68vh; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); box-shadow: var(--d-shadow-active); } .d-bviewer__links { display: flex; gap: 14px; } .d-bviewer__info { font-size: 11.5px; color: var(--d-text-3); } .d-bdrop .d-card__body { display: flex; flex-direction: column; gap: 8px; } .d-bdrop__zone { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1.5px dashed var(--d-line-control); border-radius: 10px; text-align: center; font-size: 12px; color: var(--d-text-3); cursor: pointer; background: var(--d-surface); } .d-bdrop__zone strong { color: var(--d-accent); font-size: 13px; } .d-bdrop__zone:hover { border-color: var(--d-accent); } .d-bdrop--big .d-bdrop__zone { padding: 56px 18px; } .d-bdrop.is-drop .d-bdrop__zone { border-color: var(--d-accent); background: var(--d-accent-soft); } .d-bdrop__chips { display: flex; flex-direction: column; gap: 6px; } .d-bdrop__chips:empty { display: none; } .d-bdrop .beleg-chip { background: var(--d-panel); font-size: 12.5px; } .d-bdrop__ai { background: var(--d-panel); border: 1px solid var(--d-line-card); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .d-bdrop__aitext { font-size: 12.5px; line-height: 1.6; } .d-bdrop__savedhead { margin-top: 6px; } .d-bpage { padding: 7px 0; border-top: 1px solid var(--d-line-fine); } .d-bpage__row { display: flex; align-items: center; gap: 8px; } .d-bpage__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--d-text); } .d-bpage__acts { display: flex; gap: 8px; } .d-bpage__meta { font-size: 11px; color: var(--d-text-3); margin-top: 2px; } .d-bedit .d-h1 { white-space: nowrap; } .d-bedit__chain { font-size: 12px; color: var(--d-text-3); text-align: right; } .d-bedit__chain .is-done { color: var(--d-ok); } .d-bedit__chain .is-now { color: var(--d-text); font-weight: 700; } .d-bedit__fs { border: none; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .d-bedit__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start; } .d-bedit__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-bedit__fields .d-field--wide { grid-column: 1 / -1; } .d-bedit__fields .d-hint { margin-top: 2px; } .d-blines .d-card__head { flex-wrap: wrap; } .d-blines__adds { font-size: 12px; color: var(--d-text-4); white-space: nowrap; } .d-blines__table td { padding: 6px 10px; } .d-blines__table th { padding: 8px 10px; } .d-blines__table td:first-child, .d-blines__table th:first-child { padding-left: 16px; } .d-blines__table .d-input { padding: 5px 8px; } .d-blines__table { table-layout: fixed; } .d-blines__table col.c-art { width: 21%; } .d-blines__table col.c-satz { width: 13%; } .d-blines__table col.c-eur { width: 17%; } .d-blines__table col.c-ust { width: 11%; } .d-blines__table col.c-del { width: 40px; } .d-blines__table td:last-child, .d-blines__table th:last-child { padding-left: 0; padding-right: 10px; text-align: center; } .d-blines__table [data-line-remove] { color: var(--d-text-4); } .d-blines__table [data-line-remove]:hover { color: var(--d-bad); } .d-input--num { text-align: right; font-variant-numeric: tabular-nums; } .d-blines__table td[data-line-vat] { color: var(--d-text-2); } .d-blines__pfand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--d-line-fine); } .d-blines__pfand .d-foot-note { flex: 1; min-width: 220px; } .d-blines__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--d-line-fine); background: var(--d-panel); } .d-blines__total { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--d-text-2); margin: 0; } .d-blines__total .d-input { width: 120px; font-weight: 700; } .d-blines__summary { flex: 1; font-size: 12.5px; line-height: 1.6; text-align: right; } .d-bedit__pay { display: flex; flex-direction: column; gap: 12px; padding-top: 14px !important; } .d-bedit__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .d-bedit__line > .d-label { min-width: 84px; } .d-seg--wrap { flex-wrap: wrap; } .d-bedit__inline { display: flex; align-items: center; gap: 6px; margin: 0; } .d-bedit__inline .d-input { width: auto; } .d-bedit__gwg > summary { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--d-text-2); padding: 6px 0; } .d-bedit__gwg[open] > summary .d-disclose__chev { transform: rotate(90deg); } .d-bedit__gwg > :not(summary) { margin-top: 8px; } .d-bedit__gwghint.is-warn { color: var(--d-warn); font-weight: 600; } .d-bedit__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .d-bedit__actions .d-foot-note { flex: 1; min-width: 200px; } .d-bedit__log { align-items: flex-start; } .d-bedit__danger { align-self: flex-start; color: var(--d-bad); border-color: var(--d-bad-line); } .d-bedit .d-disclose__body .d-input { width: 100%; } @media (max-width: 1180px) { .d-bedit__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ─── Export für den Steuerberater (Phase 7, Screenshot 15) ──────────────── */ .d-bexport .d-head__row { flex-wrap: wrap; row-gap: 8px; } .d-bexport__period { display: flex; gap: 6px; margin: 0; } .d-bexport__period .d-input { width: auto; font-weight: 600; } .d-bexport__konten { font-size: 12.5px; margin-left: 6px; } .d-bexport__foot { display: block; font-size: var(--d-fs-small); color: var(--d-text-2); line-height: 1.6; } .d-bexport__info { font-size: var(--d-fs-small); color: var(--d-text-2); line-height: 1.6; background: var(--d-panel); } .d-bexport .d-row__title--muted { font-weight: 500; } .d-warn-text { color: var(--d-warn); } .d-bexport .d-btn--block { justify-content: center; } .d-bexport .d-btn[disabled] { opacity: .5; cursor: not-allowed; } .d-bexport .d-h1 { white-space: nowrap; } /* ─── Auswertungen (Phase 7, Screenshot 17) ──────────────────────────────── */ .d-an__year { display: inline; margin: 0 0 0 4px; } .d-an__yearsel { font: inherit; color: inherit; background: none; border: none; border-bottom: 1.5px dashed var(--d-line-control); padding: 0 2px; cursor: pointer; } .d-an__yearsel:focus { outline: none; border-bottom-color: var(--d-accent); } .d-an__top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; } .d-an__cols { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 12px; align-items: baseline; padding: 9px 18px; } .d-an__cols .num, .d-an__ev .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .d-an__colhead { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--d-text-3); padding-top: 4px; padding-bottom: 6px; } .d-an__line { border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-body); } .d-an__line > span:first-child .d-muted { font-size: 12px; } .d-an__sub { padding-top: 4px; padding-bottom: 4px; font-size: 12px; color: var(--d-text-3); border-top: none; } .d-an__sub > span:first-child { padding-left: 14px; } .d-an__result { border-top: 1px solid var(--d-line-card); font-weight: 700; font-size: 15px; padding-top: 12px; padding-bottom: 12px; } .d-an__result .num:nth-child(2) { font-size: 18px; } .d-an__pos { color: var(--d-ok); } .d-an__neg { color: var(--d-bad); } .d-an__sort { width: 210px; display: flex; flex-direction: column; gap: 2px; } .d-an__sortopt { padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--d-text); text-decoration: none; } .d-an__sortopt:hover { background: var(--d-panel); text-decoration: none; } .d-an__sortopt.is-active { font-weight: 700; color: var(--d-accent); } .d-an__ev { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 80px 14px; gap: 10px; align-items: center; padding: 9px 16px; } .d-an__evrow > summary { list-style: none; cursor: pointer; border-top: 1px solid var(--d-line-fine); } .d-an__evrow > summary::-webkit-details-marker { display: none; } .d-an__evrow > summary:hover { background: var(--d-panel); } .d-an__evtitle { min-width: 0; font-size: var(--d-fs-body); line-height: 1.5; } .d-an__evtitle .d-badge { margin-left: 6px; } .d-an__evdetail { padding: 2px 16px 12px 28px; background: var(--d-panel); } .d-an__evsum { border-top: 1px solid var(--d-line-card); font-size: var(--d-fs-small); color: var(--d-text-2); padding-top: 11px; padding-bottom: 11px; } .d-an__mid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; } .d-an__low { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .d-an__chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 6px 16px 14px; height: 190px; } .d-an__col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .d-an__val { font-size: 10.5px; color: var(--d-text-3); font-variant-numeric: tabular-nums; } .d-an__track { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; background: var(--d-panel); border-radius: 5px; overflow: hidden; } .d-an__bar { display: block; width: 100%; background: var(--d-accent); border-radius: 5px 5px 0 0; } .d-an__mon { font-size: 11px; color: var(--d-text-2); } .d-an__meter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) 76px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-small); } .d-an__meter .num { text-align: right; font-variant-numeric: tabular-nums; } .d-an__prog { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: none; border-radius: 3px; background: var(--d-line-card); overflow: hidden; } .d-an__prog::-webkit-progress-bar { background: var(--d-line-card); border-radius: 3px; } .d-an__prog::-webkit-progress-value { background: var(--d-accent); border-radius: 3px; } .d-an__prog::-moz-progress-bar { background: var(--d-accent); border-radius: 3px; } @media (max-width: 1240px) { .d-an__top, .d-an__mid { grid-template-columns: minmax(0, 1fr); } .d-an__low { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .d-an__bar--0 { height: 0%; } .d-an__bar--5 { height: 5%; } .d-an__bar--10 { height: 10%; } .d-an__bar--15 { height: 15%; } .d-an__bar--20 { height: 20%; } .d-an__bar--25 { height: 25%; } .d-an__bar--30 { height: 30%; } .d-an__bar--35 { height: 35%; } .d-an__bar--40 { height: 40%; } .d-an__bar--45 { height: 45%; } .d-an__bar--50 { height: 50%; } .d-an__bar--55 { height: 55%; } .d-an__bar--60 { height: 60%; } .d-an__bar--65 { height: 65%; } .d-an__bar--70 { height: 70%; } .d-an__bar--75 { height: 75%; } .d-an__bar--80 { height: 80%; } .d-an__bar--85 { height: 85%; } .d-an__bar--90 { height: 90%; } .d-an__bar--95 { height: 95%; } .d-an__bar--100 { height: 100%; } .d-an .d-h1 { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; } .d-an__meta { display: block; font-size: 11.5px; color: var(--d-text-3); } .d-an__subtotal { font-weight: 600; background: var(--d-panel); } /* ─── Kontakte (Phase 8): Reiter, Gäste-Liste mit A–Z, Kurzdetail, Gastakte ─── */ .d-ld__tabs { padding: 0 18px 10px; } .d-kontakte-tabs { display: flex; } .d-kontakte-tabs .d-seg__opt { flex: 1; text-align: center; } .d-azwrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } .d-azwrap .d-ld__items { padding-right: 26px; } .d-azwrap .guest-az-index { top: 4px; bottom: 4px; right: 4px; width: 18px; } .d-azwrap .guest-az-letter { color: var(--d-accent); font-size: 9.5px; } .d-azwrap .guest-az-letter.is-empty { color: var(--d-line-control); } .d-az.guest-az-header { padding: 6px 4px 2px; background: none; border: none; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--d-text-3); } .d-ld__foot { padding: 8px 18px 14px; } .d-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d-gast .d-head__meta { color: var(--d-text-2); } .d-vgrow { gap: 12px; } .d-vgrow .d-badge { flex: none; min-width: 70px; text-align: center; } .d-vgrow__meta { font-size: 12px; white-space: nowrap; } .d-vgrow__amount { min-width: 86px; text-align: right; } .d-card > .d-vgrow:first-child, .d-card > .d-empty:first-child { border-top: none; } .d-gast__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 14px; align-items: start; } .d-gast__state { font-size: 12px; font-weight: 600; color: var(--d-text-3); } .d-gast__state.is-ok { color: var(--d-ok); } .d-gast__state.is-bad { color: var(--d-bad); } .d-gast__form { display: flex; flex-direction: column; gap: 4px; } .d-gast__form .d-input { padding: 5px 10px; } .d-gast__row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; } .d-gast__row--top { align-items: start; } .d-gast__row--top .d-label { padding-top: 8px; } .d-gast__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .d-gast__pair--ort { grid-template-columns: 72px 1fr 48px; } .d-gast__form .d-input { background: var(--d-panel); border-color: transparent; } .d-gast__form .d-input:hover { border-color: var(--d-line-control); } .d-gast__form .d-input:focus { background: var(--d-surface); } .d-gast__prefs { display: flex; flex-wrap: wrap; gap: 6px; } .d-pref { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 6px 4px 11px; border-radius: 999px; font-size: 12.5px; background: var(--d-panel); border: 1px solid var(--d-line-card); color: var(--d-text-2); } .d-pref--bad { background: var(--d-bad-bg); border-color: var(--d-bad-line); color: var(--d-bad); } .d-pref--accent { background: var(--d-accent-soft); border-color: transparent; color: var(--d-accent-soft-text); } .d-pref button { border: none; background: none; cursor: pointer; color: inherit; padding: 0 4px; font-size: 11px; opacity: .7; } .d-pref button:hover { opacity: 1; } .d-gast__addpref { margin-top: 10px; } .d-gast__addpref > summary { list-style: none; cursor: pointer; } .d-gast__addpref > summary::-webkit-details-marker { display: none; } .d-gast__preftype { max-width: 140px; } .d-gast__del { display: inline; margin: 0; } .d-gast__delbtn { color: var(--d-bad); } @media (max-width: 1180px) { .d-gast__grid { grid-template-columns: minmax(0, 1fr); } } .d-narrow { max-width: 760px; } .d-vendor__prices { display: flex; gap: 20px; align-items: baseline; font-size: var(--d-fs-body); margin-bottom: 6px; } .d-vendor__price { display: inline-block; margin-left: 6px; padding: 3px 10px; border: 1px solid var(--d-line-control); border-radius: 8px; font-variant-numeric: tabular-nums; } .d-vendor__planist { font-size: var(--d-fs-body); line-height: 1.6; margin-bottom: 6px; } .d-vendor__years { display: flex; gap: 10px; margin-left: auto; } .d-vendor__years a { font-size: 14px; } .d-vendor__meta { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .d-vendor__ist { min-width: 120px; text-align: right; font-size: 12.5px; color: var(--d-text-3); font-variant-numeric: tabular-nums; } .d-vendor__ist.is-ok { color: var(--d-ok); font-weight: 600; } .d-row.is-muted { opacity: .65; } .d-ld__searchrow--solo .d-ld__search { flex: 1; } .d-staff__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .d-strong { font-weight: 600; color: var(--d-text); text-decoration: none; } /* Stundenzettel (druckbar) */ .d-sheet { max-width: 900px; } .d-sheet__tools { display: flex; align-items: center; gap: 10px; } .d-sheet__paper { padding: 28px 32px 34px; display: flex; flex-direction: column; gap: 18px; } .d-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .d-sheet__brand { font-family: var(--d-font-title); font-size: 18px; color: var(--d-accent); } .d-sheet__paper .d-table th:first-child, .d-sheet__paper .d-table td:first-child { padding-left: 0; } .d-sheet__paper .d-table th:last-child, .d-sheet__paper .d-table td:last-child { padding-right: 0; } .d-sheet__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; font-size: 11.5px; color: var(--d-text-3); } .d-sheet__sign span { display: block; border-top: 1px solid var(--d-text-2); margin-bottom: 6px; } @media print { .d-no-print, .flash, .d-flash { display: none !important; } .d-sheet { max-width: none; padding: 0; } .d-sheet__paper { border: none; box-shadow: none; padding: 0; } body { background: #fff; } } /* ─── Programm-Detail (Phase 8, Screenshot 19) ───────────────────────────── */ .d-prog__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; } .d-prog__reg { gap: 12px; } .d-prog__reg .d-row__title { color: var(--d-text); text-decoration: none; display: inline; } .d-prog__reg--note { background: #FDF3F0; } .d-prog__diet { font-size: 11.5px; font-weight: 700; color: var(--d-bad); margin-left: 6px; } .d-prog__size { font-size: 12.5px; color: var(--d-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; } .reg-stage form { display: flex; margin: 0; } .d-prog__mail { background: var(--d-panel); } .d-prog__seats { font-size: var(--d-fs-body); color: var(--d-text-2); margin-bottom: 8px; } .d-prog__seats strong { font-size: 22px; color: var(--d-text); margin-right: 4px; } .d-prog__bar { height: 8px; border-radius: 4px; } .d-prog__bar::-webkit-progress-bar, .d-prog__bar::-webkit-progress-value { border-radius: 4px; } .d-prog__hint { font-size: var(--d-fs-body); line-height: 1.55; } .d-prog__desc { margin-top: 8px; font-size: 12.5px; color: var(--d-text-2); white-space: pre-wrap; line-height: 1.55; } @media (max-width: 1240px) { .d-prog__grid { grid-template-columns: minmax(0, 1fr); } } /* ─── Reinigung & Wartung (Phase 8, Screenshot 21) ───────────────────────── */ .d-hk__warn { color: var(--d-warn); } .d-hk__filters { align-items: center; } .d-hk__sep { width: 1px; height: 20px; background: var(--d-line-control); margin: 0 6px; } .d-hk__cols { display: grid; grid-template-columns: 110px minmax(0, 0.9fr) minmax(0, 1.4fr) 120px 230px 20px; gap: 12px; align-items: center; padding: 11px 18px; } .d-hk__cols--w { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) 90px 120px 230px; } .d-hk__colhead { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--d-text-3); padding-top: 12px; padding-bottom: 8px; } .d-hk__row { border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-body); } .d-hk__row[data-status="DONE"] { color: var(--d-text-3); } .d-hk__row[data-status="DONE"] a { color: var(--d-text-3); } .d-hk__date { font-weight: 600; } .d-hk__row[data-status="DONE"] .d-hk__date { font-weight: 400; } .d-hk__anlass { min-width: 0; } .d-hk__anlass .d-row__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-hk__anlass a { font-weight: 600; color: var(--d-accent); text-decoration: none; } .d-hk__seg form { display: flex; margin: 0; } .d-hk__seg.is-busy { opacity: .5; } .d-hk__more { border: none; background: none; cursor: pointer; font-size: 16px; padding: 0; transition: transform .15s ease; } .d-hk__more.is-open { transform: rotate(90deg); } .d-hk__edit > summary { display: none; } .d-hk__edit form { padding: 0 18px 12px 140px; margin: 0; } .d-hk__who { max-width: 200px; } .d-hk__rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; } @media (prefers-reduced-motion: reduce) { .d-hk__more { transition: none; } } /* ─── Änderungsprotokoll (Phase 8, Screenshot 20) ────────────────────────── */ .d-cl__filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .d-cl__filter { position: relative; display: inline-flex; align-items: center; } .d-cl__filter .d-chip { list-style: none; cursor: pointer; } .d-cl__filter summary::-webkit-details-marker { display: none; } .d-cl__filter .d-chip.is-active { padding-right: 26px; } .d-cl__x { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #fff; text-decoration: none; } .d-cl__panel { min-width: 220px; max-height: 60vh; overflow-y: auto; } .d-cl__group { display: flex; flex-direction: column; gap: 6px; } .d-cl__day { padding-left: 2px; } .d-cl__entry { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--d-line-fine); } .d-card > .d-cl__entry:first-child { border-top: none; } .d-cl__time { font-size: 12.5px; color: var(--d-text-3); font-variant-numeric: tabular-nums; padding-top: 4px; } .d-cl__av { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .d-cl__av--0 { background: var(--d-accent); color: #fff; } .d-cl__av--1 { background: var(--d-accent-soft); color: var(--d-accent-soft-text); } .d-cl__av--2 { background: var(--d-line-card); color: var(--d-text-2); } .d-cl__head { font-size: var(--d-fs-body); line-height: 1.6; } .d-cl__head .d-badge { vertical-align: 1px; } .d-cl__entity { font-weight: 600; color: var(--d-accent); text-decoration: none; } .d-cl__lines { font-size: 12.5px; color: var(--d-text-2); line-height: 1.5; } .d-cl__more > summary { list-style: none; cursor: pointer; display: inline; } .d-cl__more > summary::-webkit-details-marker { display: none; } .d-cl__list { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--d-text-2); line-height: 1.55; } .d-cl__link { font-size: 12.5px; font-weight: 600; color: var(--d-accent); text-decoration: none; padding-top: 4px; } .d-cl__older { text-align: center; padding: 6px 0 12px; } .d-cl__older .d-link-accent { font-size: 13px; } .d-cl__empty { border-top: none; padding: 28px 18px; text-align: center; } .d-cl__lines, .d-cl__list { overflow-wrap: anywhere; } /* Aufklapper, der erst über einen Knopf erscheint ([data-open-details]) — z. B. „Bearbeiten", „+ Aufgabe". */ .d-disclose--onopen:not([open]) { display: none; } .d-js [data-autosave-fallback] { display: none; } .d-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .d-gast .d-gast__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .d-gast__row { grid-template-columns: 92px minmax(0, 1fr); } .d-vendor__pricebar { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 11px 16px; font-size: var(--d-fs-body); } .d-vendor__pricebar .d-muted { font-size: 11.5px; margin-left: auto; } .d-pre { white-space: pre-wrap; } .d-fields__row > span:first-child { white-space: nowrap; } .d-staff__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; } .d-staff__tags { margin-top: 0; } @media (max-width: 1240px) { .d-staff__grid { grid-template-columns: minmax(0, 1fr); } } .d-hk .d-head__row > .d-seg { margin-left: 8px; } .d-hk .d-head__row > .d-h1 { flex: none; } /* ─── Einstellungen (Phase 9, Screenshots 22/26): linke Unternavigation ──── */ .d-set { display: grid; grid-template-columns: 210px minmax(0, 1fr); flex: 1; min-height: 100vh; } .d-set__nav { background: var(--d-panel); border-right: 1px solid var(--d-line); padding: 22px 12px; display: flex; flex-direction: column; gap: 2px; } .d-set__title { font-family: var(--d-font-title); font-size: 21px; padding: 0 10px 14px; } .d-set__item { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--d-text); text-decoration: none; } .d-set__item:hover { background: var(--d-line-fine); text-decoration: none; } .d-set__item.is-active { background: var(--d-accent-soft); color: var(--d-accent-soft-text); font-weight: 600; } .d-set__sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 8px; border-left: 1.5px solid var(--d-line-control); } .d-set__subitem { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--d-text-2); text-decoration: none; } .d-set__subitem:hover { background: var(--d-line-fine); text-decoration: none; } .d-set__subitem.is-active { color: var(--d-text); font-weight: 700; background: var(--d-surface); } .d-set__main { min-width: 0; } .d-set__main.d-page { padding-top: var(--d-page-y); } .d-set .d-head__lead { max-width: 760px; } /* Vorgaben (26) */ .d-vg-list { display: flex; flex-direction: column; } .d-vg-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 18px; border-top: 1px solid var(--d-line-fine); font-size: var(--d-fs-body); } .d-vg-row:first-child { border-top: none; } .d-vg-row__val { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .d-vg-row__val .d-muted { font-size: 12px; } .d-vg-num { width: 58px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 8px; } .d-vg-unit { font-weight: 600; font-size: 12.5px; color: var(--d-text-2); margin-left: -4px; } .d-vg-actions { padding: 10px 18px 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--d-line-fine); } /* Schalter-Zeilen (Allgemein) */ .d-sw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--d-line-fine); } .d-card__head + .d-sw-row { border-top: 1px solid var(--d-line-fine); } .d-sw-row__title { font-weight: 600; font-size: var(--d-fs-body); } .d-sw-row__hint { font-size: 12px; color: var(--d-text-3); line-height: 1.5; margin-top: 2px; } .d-sw-row .d-seg form { display: flex; margin: 0; } .d-sw-row .d-seg.is-busy { opacity: .5; } .d-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } @media (max-width: 1100px) { .d-set { grid-template-columns: 180px minmax(0, 1fr); } } .d-set__company { display: flex; flex-direction: column; gap: 4px; font-size: var(--d-fs-body); padding-bottom: 10px !important; } .d-set__rawform { margin: 0; max-width: 340px; } .d-set__rawform .d-input { padding: 4px 8px; } /* Leistungskatalog (22) */ .d-cat__group { margin-top: 6px; padding-left: 2px; } .d-cat.is-inactive { opacity: .6; } .d-cat__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; } .d-cat__name { font-size: 14px; } .d-cat__vat { font-size: 11px; font-weight: 600; color: var(--d-text-2); border: 1px solid var(--d-line-control); border-radius: 6px; padding: 2px 7px; } .d-cat__price { font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .d-cat__meta { font-size: 12px; } .d-cat__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 1px solid var(--d-line-fine); } .d-cat__tier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 8px; border-left: 1px solid var(--d-line-fine); font-variant-numeric: tabular-nums; } .d-cat__tier:first-child { border-left: none; } .d-cat__tier span { font-size: 11px; color: var(--d-text-3); text-transform: uppercase; letter-spacing: .05em; } .d-cat__tier strong { font-size: 14px; } .d-cat__sub { padding: 9px 16px 11px; border-top: 1px solid var(--d-line-fine); font-size: 12.5px; color: var(--d-text-2); } .d-cat .d-pop form { margin: 0; } a.d-cat__name { font-weight: 700; color: var(--d-text); text-decoration: none; } a.d-cat__name:hover { color: var(--d-accent); } .d-cat__actions { margin-left: 4px; } /* Symbol-Leiste in Einstellungslisten (2026-10-03): Aktiv-Schalter (_aktiv-schalter.ejs) · ✕ Löschen · › Bearbeiten */ .d-acts { display: inline-flex; align-items: center; gap: 2px; } .d-acts form { margin: 0; display: inline-flex; } .d-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 13px; } .d-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .d-act-open { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 18px; line-height: 1; padding-bottom: 2px; text-decoration: none; border-radius: 6px; } .d-act-open:hover { color: var(--d-accent); background: var(--d-accent-soft); } /* Umgestellte Einstellungsseiten: alte Formularabstände im neuen Muster */ .d-set .d-set__fg { margin-bottom: 12px; } .d-set .d-card--pad > .d-card__head { padding: 0 0 12px; display: flex; align-items: center; gap: 10px; } .d-set .d-card + .d-card, .d-set form + .d-card { margin-top: 0; } .d-set .d-card--pad .d-table th:first-child, .d-set .d-card--pad .d-table td:first-child { padding-left: 0; } .d-set .d-card--pad .d-table th:last-child, .d-set .d-card--pad .d-table td:last-child { padding-right: 0; } .d-set .d-card--pad > h3, .d-set .d-card--pad > h4 { font-family: var(--d-font); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--d-text-3); margin: 0 0 12px; } .d-set h2.d-kicker, .d-set h3.d-kicker, .d-set h4.d-kicker { font-family: var(--d-font); font-size: 11px; line-height: 1.4; margin: 0; } .d-set .d-card--pad > div[style*="padding"] { padding: 0 !important; } .d-set__split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; } .d-disclose--onopen > summary[hidden] { display: none; } .d-cl__bar { display: flex; align-items: flex-start; gap: 10px; } .d-cl__bar .d-chiprow { flex: 1; min-width: 0; align-items: center; } .d-cl__bar .d-filter__panel { width: 300px; display: flex; flex-direction: column; gap: 10px; } .d-cl__range { display: flex; align-items: center; gap: 6px; } .d-cl__range .d-input { flex: 1; min-width: 0; } .d-cl__aktiv { display: flex; gap: 6px; flex-wrap: wrap; } .d-btn--withicon { display: inline-flex; align-items: center; gap: 6px; } .d-btn--withicon .d-icon { flex: none; } .d-btn--iconly { padding: 6px 9px; } .d-palette__sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--d-text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-palette__list { max-height: 60vh; overflow-y: auto; } /* Fehlerseiten (Phase 10) */ .d-error { align-items: center; justify-content: center; min-height: 70vh; } .d-error__box { max-width: 520px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--d-surface); border: 1px solid var(--d-line-card); border-radius: var(--d-r-card); padding: 28px 32px; } .d-error__msg { font-size: 12px; color: var(--d-bad); white-space: pre-wrap; background: var(--d-bad-bg); border-radius: 8px; padding: 10px 12px; max-width: 100%; overflow-x: auto; } /* Restseiten mit altem Gerüst (Phase 10): Kopf und Rumpf im neuen Muster — wie .d-head/.d-page */ .page-header.d-legacy-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: var(--d-page-y) var(--d-page-x) 0; background: none; border: none; } .page-header.d-legacy-head h1 { font-family: var(--d-font-title); font-size: var(--d-fs-h1, 26px); font-weight: 400; margin: 0; flex: 1; min-width: 0; } .page-header.d-legacy-head > div:last-child:not(:first-child) { display: flex; gap: 8px; align-items: center; } .page-body.d-legacy-body { padding: 14px var(--d-page-x) 28px; display: flex; flex-direction: column; gap: 14px; } .d-legacy-body .d-card--pad > .d-card__head { padding: 0 0 12px; display: flex; align-items: center; gap: 10px; } .d-legacy-body h2.d-kicker, .d-legacy-body h3.d-kicker, .d-legacy-body h4.d-kicker { font-family: var(--d-font); font-size: 11px; line-height: 1.4; margin: 0; } .d-legacy-body .d-set__fg { margin-bottom: 12px; } .d-legacy-head > .d-back { order: -1; flex-basis: 100%; } .d-icon-btn--plain:hover { color: var(--d-accent); background: var(--d-accent-soft); } .d-set__editrow td { padding-top: 0 !important; border-top: none !important; } .d-set__editrow:has(> td > details:not([open])) { display: none; } .d-set__editrow .d-inline-form { margin: 2px 0 10px; } .d-set__num { max-width: 90px; } .d-set__rowtoggle { border: none; background: none; cursor: pointer; font-size: 16px; padding: 0 6px; transition: transform .15s ease; } .d-set__rowtoggle.is-open { transform: rotate(90deg); } .d-btn--xs { padding: 2px 8px; font-size: 12px; line-height: 1.4; } .d-vendor__years { gap: 4px; } /* ─── Hilfsklassen für abgelöste Inline-Styles (2026-09-29) ────────────────────────────────── Umgebaute Views tragen keine style="…" mehr. Wiederkehrende Kleinigkeiten stehen hier, seitenspezifisches darunter mit Seitenpräfix. Werte absichtlich wie die früheren Inline-Werte (Rem-Basis 16 px). */ .d-nowrap { white-space: nowrap; } .d-w-full { width: 100%; } .d-input--auto { width: auto; } .d-text-right { text-align: right; } .d-text-center { text-align: center; } .d-text-bad { color: var(--d-bad); } .d-text-3 { color: var(--d-text-3); } .d-text-sm { font-size: 0.8125rem; } .d-text-xs { font-size: 0.75rem; } .d-fw-600 { font-weight: 600; } .d-m-0 { margin: 0; } .d-mt-xs { margin-top: 0.25rem; } .d-mt-s { margin-top: 0.5rem; } .d-mt-m { margin-top: 1rem; } .d-mb-0 { margin-bottom: 0; } .d-mb-xs { margin-bottom: 0.25rem; } .d-mb-s { margin-bottom: 0.5rem; } .d-mb-sm { margin-bottom: 0.75rem; } .d-mb-m { margin-bottom: 1rem; } .d-mb-ml { margin-bottom: 1.25rem; } .d-mb-l { margin-bottom: 1.5rem; } .d-pad-m { padding: 1.25rem; } .d-hrow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .d-hrow--between { justify-content: space-between; } .d-hrow--end { justify-content: flex-end; } .d-hrow--top { align-items: flex-start; } .d-hrow--gap-m { gap: 0.75rem; } .d-hrow--gap-l { gap: 1rem; } .d-grow { flex: 1; min-width: 0; } .d-vstack { display: flex; flex-direction: column; gap: 1rem; } .d-vstack--s { gap: 0.5rem; } .d-vstack--l { gap: 1.25rem; } .d-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .d-cols2--s { gap: 0.75rem; } .d-rel { position: relative; } .d-disp-block { display: block; } .d-pointer { cursor: pointer; } .d-hr { border: none; border-top: 1px solid var(--d-line-fine); } /* Einstellungen: Vorlagen-Seiten */ .d-set__intro { margin-bottom: 1.5rem; } .d-set__fieldnote { margin-top: 0.25rem; } .d-set__filter { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: center; } .d-set__count { margin-left: auto; color: var(--d-text-3); font-size: 0.85rem; } .d-set .d-card.is-inactive { opacity: .7; } .d-pop__panel form { margin: 0; } /* ─── Seitenklassen aus der Inline-Style-Ablösung (2026-09-29) ───────────────────────────── */ /* Einstellungen → Leistungskatalog, Formular (views/settings/billing-catalog/form.ejs) */ .d-bcf__layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; } .d-bcf__req { color: var(--color-danger); } .d-bcf__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* nicht .d-grid-2: dessen Altregel setzt align-items:start + Media-Query */ /* #location-card bewusst OHNE Flex-Stapel: das Skript setzte style.display='' und löschte damit das frühere Inline-display:flex — sichtbar war immer display:block */ .d-set h3.d-bcf__h { margin: 0; font-size: 0.9rem; font-weight: 600; } /* schlägt .d-set .d-card--pad > h3 (Spez. gleich, später) */ .d-set h3.d-bcf__h.d-bcf__h--mb { margin: 0 0 0.75rem; } .d-bcf__grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .d-set .d-bcf__eur-in { padding-right: 2rem; } .d-bcf__eur { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--d-text-3); pointer-events: none; } .d-set .d-bcf__row { display: flex; align-items: center; gap: 0.5rem; } .d-set .d-bcf__pct { max-width: 6rem; } .d-bcf__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .d-set .d-bcf__fs { border: 1px solid var(--color-border-light); border-radius: 6px; padding: 0.75rem; min-width: 0; } .d-set .d-bcf__legend { font-size: 0.8rem; font-weight: 600; padding: 0 0.4rem; } .d-bcf__typerow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .d-set .d-bcf__typelbl { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 45%; } .d-set .d-bcf__typelbl--bold { font-weight: 600; } .d-set .d-bcf__typein { flex: 1; min-width: 0; font-size: 0.8rem; } .d-set .d-bcf__toggle { width: 1rem; height: 1rem; cursor: pointer; } .d-set .d-bcf__togglbl { cursor: pointer; margin: 0; } .d-bcf__note { font-size: 0.82rem; color: var(--d-text-3); line-height: 1.5; } .d-bcf__note-h { display: block; margin-bottom: 0.5rem; color: var(--color-text); } .d-bcf__note-p { margin-top: 0.4rem; } .d-bcf__actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; } .d-set .d-card.d-bcf__tiers { margin-top: 1.25rem; max-width: 640px; } /* schlägt .d-set form + .d-card { margin-top: 0 } */ .d-bcf__tiertable { width: 100%; border-collapse: collapse; } .d-bcf__tierhead { font-size: 0.78rem; color: var(--d-text-3); text-align: left; } .d-set .d-bcf__th { padding: 0.3rem 0.4rem; } .d-set .d-bcf__th--b { font-weight: 600; } .d-set .d-bcf__tiercell { padding: 0.2rem 0; } .d-set .d-bcf__tierform { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: 0.4rem; align-items: center; margin: 0; } .d-set .d-bcf__tiernew { padding: 0.5rem 0 0; border-top: 1px solid var(--color-border-light); } .d-bcf__tiernote { margin-top: 0.75rem; line-height: 1.5; } .d-bcf__bandhint { margin-top: 1.25rem; } /* Einstellungen → Kanäle (views/settings/channels.ejs) */ .d-set .d-chan__intro { line-height: 1.6; margin-bottom: 0; } .d-set .d-chan__src { font-size: 0.65rem; } .d-chan__headacts { display: flex; gap: 0.4rem; align-items: center; } .d-set .d-chan__in-name { max-width: 340px; } .d-set .d-chan__in-num { max-width: 120px; } .d-set .d-chan__in-slug { max-width: 220px; } .d-set .d-chan__in-src { max-width: 200px; } .d-set .d-chan__url { width: 100%; font-family: monospace; font-size: 0.78rem; } .d-chan__rooms { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .d-set .d-chan__room { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; } .d-set .d-chan__active { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; } /* padding-top 0: der frühere Inline-Wert 0.7rem wurde von .d-set .d-card--pad > div[style*="padding"] (!important) genullt */ .d-chan__foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-top: 1px solid var(--color-border-light); margin-top: 0.3rem; } .d-chan__status { flex: 1; min-width: 220px; } .d-chan__err { color: var(--color-danger); } /* Einstellungen → Preis-Parameter (views/settings/venue-pricing.ejs) */ .d-set .d-vp__intro { line-height: 1.5; margin-bottom: 0; } .d-set .d-vp__hint { line-height: 1.5; margin-top: 0; } .d-vp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .d-set .d-vp__num { max-width: 10rem; } .d-set .d-vp__text { margin-top: 0; } .d-set .d-vp__text--after { margin-top: 1rem; } .d-set .d-vp__ta { font-family: inherit; line-height: 1.5; } /* Einstellungen → Mein Profil (views/settings/profile.ejs) */ .d-set .d-prof__pw { max-width: 480px; } .d-set .d-card.d-prof__cal { max-width: 640px; margin-top: 1.5rem; } /* schlägt .d-set .d-card + .d-card { margin-top: 0 } */ .d-set .d-card--pad > h3.d-prof__h { margin-bottom: 1rem; } /* schlägt .d-set .d-card--pad > h3 */ .d-set .d-card--pad > h3.d-prof__h--s { margin-bottom: 0.5rem; } .d-set .d-prof__feed { font-family: monospace; font-size: 0.85rem; } .d-prof__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Einstellungen → Kostenstellen (views/settings/cost-centres.ejs) */ .d-set .d-cc__intro { margin: 0 0 1rem; max-width: 70ch; } .d-cc__new { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; } .d-set .d-cc__f-name { margin-bottom: 0; flex: 1; min-width: 200px; } /* schlägt .d-set .d-set__fg (Spez. gleich, später) */ .d-set .d-cc__f-order { margin-bottom: 0; width: 120px; } .d-set .d-cc__w90 { width: 90px; } .d-set .d-cc__w110 { width: 110px; } .d-set .d-cc__sort { width: 70px; } .d-set .d-cc__active { display: flex; align-items: center; gap: 0.4rem; } /* Einstellungen → Tätigkeiten (views/settings/staff-roles.ejs) */ .d-sr__new { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; } .d-set .d-sr__f-name { margin-bottom: 0; flex: 1; min-width: 200px; } .d-set .d-sr__f-order { margin-bottom: 0; width: 120px; } .d-set .d-sr__w90 { width: 90px; } .d-set .d-sr__name { font-weight: 600; } /* nicht .d-strong: dessen Altregel setzt auch font-size/color */ .d-set .d-sr__del { display: inline; margin-left: 0.35rem; } /* Einstellungen → Benutzer (views/settings/users.ejs) */ .d-set .d-card--pad > h3.d-usr__h { margin-bottom: 1rem; } /* schlägt .d-set .d-card--pad > h3 */ /* Einstellungen → Antwort-Vorlage bearbeiten (settings/inquiry-template-form.ejs) */ .d-itf__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; } .d-itf__grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; } .d-itf__note { color: var(--d-text-3); font-weight: 400; font-size: 0.8rem; } .d-itf__check { display: flex; align-items: center; gap: 0.5rem; } .d-input.d-itf__body { font-family: monospace; font-size: 0.85rem; line-height: 1.6; resize: vertical; } .d-itf__actions { display: flex; justify-content: flex-end; gap: 0.75rem; } .d-itf__aside { position: sticky; top: 1rem; } .d-itf__chips { display: flex; flex-direction: column; gap: 0.35rem; } .d-itf__chiprow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .d-itf__chipdesc { font-size: 0.78rem; color: var(--d-text-3); flex: 1; } .d-itf__chip { font-family: monospace; font-size: 0.75rem; padding: 0.15rem 0.5rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; white-space: nowrap; } .d-itf__psubj { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; min-height: 1.2em; color: var(--d-text-3); } .d-itf__pbody { white-space: pre-wrap; font-family: inherit; font-size: 0.82rem; line-height: 1.6; margin: 0; background: var(--color-bg); padding: 0.75rem; border-radius: 4px; max-height: 400px; overflow-y: auto; } /* Einstellungen → Paket bearbeiten (settings/venue-package-form.ejs) und Textbaustein bearbeiten (settings/venue-event-text-form.ejs). Das frühere Inline-Padding der Raster-Divs griff nie: `.d-set .d-card--pad > div[style*="padding"]` setzte es auf 0 — deshalb hier bewusst ohne padding. */ .d-pkg__grid, .d-vet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; } .d-pkg__grid12 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; } .d-pkg__full, .d-vet__full { grid-column: 1 / -1; } .d-pkg__w8 { max-width: 8rem; } .d-pkg__w6, .d-vet__w6 { max-width: 6rem; } .d-pkg__check, .d-vet__check { display: flex; align-items: center; gap: 0.5rem; } .d-pkg__daylabel { display: flex; align-items: center; gap: 0.5rem; margin: 0; font: inherit; } .d-pkg__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .d-pkg__cb { width: 0.9rem; height: 0.9rem; } .d-input.d-vet__body { font-family: inherit; line-height: 1.5; } /* Einstellungen → Pakete / Angebotstexte, Listen (settings/venue-packages.ejs, settings/venue-event-texts.ejs). th braucht .d-table th.… — `.d-table th { text-align: left }` schlägt sonst eine einfache Klasse. */ .d-pkgs__lh, .d-vets__lh { line-height: 1.5; } .d-table th.d-pkgs__r { text-align: right; } /* Programm: Anmeldung (Detail) — views/events/registration-detail.ejs */ .d-regd__meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; } .d-regd__headactions { display: flex; gap: 0.5rem; } .d-regd__cols { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; } .d-regd__table { width: 100%; font-size: 0.875rem; border-collapse: collapse; } .d-regd__k { color: var(--d-text-3); padding: 0.25rem 0; } .d-regd__k--w { width: 35%; } .d-regd__hr { border: none; border-top: 1px solid var(--color-border-light); } .d-regd__hr--m { margin: 0.75rem 0; } .d-regd__warn { color: var(--color-warning); } .d-regd__pre { white-space: pre-wrap; } .d-regd__cardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .d-regd__row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light); } .d-regd__mail { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.85rem; } .d-regd__mailhead { display: flex; justify-content: space-between; } .d-regd__actions { display: flex; flex-direction: column; gap: 0.625rem; } .d-regd__fullbtn { width: 100%; box-sizing: border-box; } .d-regd__summary { cursor: pointer; font-size: 0.82rem; color: var(--d-text-3); list-style: none; } .d-regd__override { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; } .d-regd__select { flex: 1; font-size: 0.85rem; } .ld-overlay .d-regd__cols { grid-template-columns: 1fr !important; } /* Programm: Anmeldung anlegen/bearbeiten — views/events/registration-form.ejs + registration-edit.ejs */ .d-regf__wrap { max-width: 600px; } .d-regf__badge { margin-left: 0.5rem; } .d-regf__note { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.875rem; } .d-regf__note--ok { background: var(--color-confirmed-bg); border: 1px solid var(--color-confirmed-border); } .d-regf__note--info { background: var(--color-info-bg); border: 1px solid var(--color-info); } .d-regf__note--sm { padding: 0.6rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.85rem; } .d-regf__num { width: 120px; } .d-regf__actions { display: flex; gap: 0.75rem; margin-top: 1rem; } .ld-overlay .d-regf__g2 { grid-template-columns: 1fr !important; } /* Programm: Vorbereitungsblatt — views/events/prep.ejs (Druckregeln im