/* =====================================================================
 mehrwert Dashboard – UI-Update und Button-Styleguide (Stand 21.10.2026)
 Einbinden NACH style.css:
 (templates/link_stylesheet.html, als letztes Stylesheet)
 Montserrat liegt lokal unter /static/fonts (datenschutzfreundlich).
 ===================================================================== */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Montserrat-500.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Montserrat-600.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Montserrat-700.woff2) format('woff2'); }

/* ---------- 1 · Farb-Tokens ---------- */
:root {
 /* bestehende Variablen angepasst */
 --bg-page: #F5F5F5;
 --text-muted: #666666;
 --text-faint: #666666;
 --nav-active-bg: rgba(255, 255, 255, .06);

 /* CD-Farben, die in style.css noch fehlen */
 --brand-aqua: #63FFFF;
 --brand-neon-mint: #05FEA9;
 --brand-ice-mint: #EAF7F0;
 --brand-royal: #4169E1;
 --brand-violet: #7656FF;

 /* Grundregel Schrift in Buttons:
 helle Fläche -> immer Tannenschwarz
 kräftige/dunkle Fläche -> immer Weiß */
 --on-light: var(--brand-dark);
 --on-dark: #FFFFFF;

 --btn-border: #D0D0D0;
 --btn-radius: 8px;
 --pill-radius: 999px;
}

/* ---------- 2 · Allgemein ---------- */
.topbar-meta { color: rgba(255, 255, 255, .6); }
.table-card, .card { box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }

.topbar-title,
#view-start h2,
.table-card h2,
.table-card h3,
.start-tile__title {
 font-family: 'Montserrat', 'Open Sans', sans-serif;
 font-weight: 600;
 letter-spacing: -.005em;
}

thead { background: var(--brand-light); color: var(--brand-charcoal); }
th {
 font-family: 'Open Sans', sans-serif;
 font-size: 8.5pt;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: .04em;
 border-bottom: 0;
}
p a, .update-desc a { color: var(--brand-teal); }

/* ---------- 3 · Navigation ---------- */
.nav-item { color: rgba(255, 255, 255, .7); }
.nav-item.active { box-shadow: inset 3px 0 0 var(--brand-lime); }
.sidebar-label { text-transform: none; font-size: 10pt; font-weight: 600; letter-spacing: 0; }
.nav-brand-icon { width: 16px; height: 16px; flex: 0 0 16px; filter: invert(1); opacity: .75; }
.nav-item.active .nav-brand-icon,
.nav-item:hover .nav-brand-icon { opacity: 1; }
/* Hover: Text und Icon grün (Lime), nicht beim ausgewählten Eintrag; Abmelden bleibt rot */
.nav-item:not(.active):not(.log-out):hover,
.nav-item:not(.active):not(.log-out):hover .material-icons { color: var(--brand-lime); }
.collapsible-label:hover,
.collapsible-label:hover .material-icons,
.collapsible-label:hover .collapse-arrow { color: var(--brand-lime); }

/* ---------- 4 · Startseite ---------- */
.start-tile__icon { transition: background .15s; }
.start-tile:hover .start-tile__icon { background: var(--brand-lime); color: var(--brand-dark); }

/* =====================================================================
 5 · BUTTON-STYLEGUIDE – Aktions-Buttons
 ===================================================================== */
.btn-primary,
.btn-secondary,
.btn-danger {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 height: 40px;
 padding: 0 16px;
 border-radius: var(--btn-radius);
 font: 600 13px 'Open Sans', sans-serif;
 line-height: 1;
 cursor: pointer;
 transition: background .12s, border-color .12s;
}
.btn-primary.small,
.btn-secondary.small,
.btn-danger.small { height: 32px; padding: 0 12px; font-size: 12px; }

/* Primär: genau eine Hauptaktion pro Bereich */
.btn-primary { background: var(--brand-lime); color: var(--on-light); border: 1px solid var(--brand-lime); }
.btn-primary:hover { background: #C4EA00; border-color: #C4EA00; border-radius: var(--btn-radius); }

/* Sekundär: Nebenaktionen (Abbrechen, Excel Import, Alle zeigen) */
.btn-secondary { background: #FFFFFF; color: var(--on-light); border: 1px solid var(--btn-border); }
.btn-secondary:hover { background: var(--brand-light); }

/* Gefahr: Löschen – dezent, Bestätigung im Dialog */
.btn-danger { background: #FFFFFF; color: var(--brand-red); border: 1px solid transparent; }
.btn-danger:hover { background: rgba(230, 45, 53, .08); }
.btn-danger.confirm { background: var(--brand-red); color: var(--on-dark); }

/* Icon-Buttons: Schließen, Glocke, Einstellungen, Abmelden, Tabellen-Aktionen */
.btn-icon {
 display: inline-flex; align-items: center; justify-content: center;
 width: 32px; height: 32px; padding: 0;
 border: 0; border-radius: var(--btn-radius);
 background: transparent; color: var(--on-light);
}
.btn-icon:hover { background: var(--brand-light); }
.btn-icon.delete { color: var(--brand-red); background: transparent; }
.btn-icon.delete:hover { background: rgba(230, 45, 53, .08); }
.topbar .btn-icon { color: var(--on-dark); }
.topbar .btn-icon:hover { background: rgba(255, 255, 255, .1); }

/* Filter und Tabs */
.filter-btn {
 height: 32px; padding: 0 12px;
 border-radius: var(--pill-radius);
 border: 1px solid var(--btn-border);
 background: #FFFFFF; color: var(--on-light);
 font: 600 12px 'Open Sans', sans-serif;
}
.filter-btn.active,
.filter-btn.active:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-dark); }

/* Zähler-Badges */
.count-badge,
#view-start .start-badge {
 display: inline-block; min-width: 22px; padding: 1px 7px;
 border-radius: var(--pill-radius);
 background: var(--brand-dark); color: var(--on-dark);
 font: 600 11px 'Open Sans', sans-serif; text-align: center;
}
.count-badge.is-zero,
#view-start .start-badge.is-zero { background: var(--brand-light); color: var(--on-light); }
.filter-count, #aa-count { background: none; color: #666; padding: 0; font-weight: 600; }

/* =====================================================================
 6 · BUTTON-STYLEGUIDE – Status-Badges (Kampagnen und Anzeigen)
 ===================================================================== */
.phase-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 2px 10px;
 border-radius: var(--pill-radius);
 font: 600 12px 'Open Sans', sans-serif;
 line-height: 1.5;
 white-space: nowrap;
}
.phase-badge .status-dot { display: none; }

/* Kampagnen: briefing · angebot · freigegeben · live · monitoring · abgeschlossen
 Anzeigen: vorbereitung · review · aktiv · pausiert · abgeschlossen */
.phase-badge[data-phase="briefing"],
.phase-badge[data-phase="vorbereitung"] { background: #FFFFFF; color: var(--on-light); outline: 1.5px dashed #999; outline-offset: -1.5px; }
.phase-badge[data-phase="angebot"] { background: var(--brand-ice-mint); color: var(--on-light); box-shadow: inset 0 0 0 1px rgba(0, 80, 80, .35); }
.phase-badge[data-phase="freigegeben"] { background: var(--brand-aqua); color: var(--on-light); }
.phase-badge[data-phase="live"],
.phase-badge[data-phase="aktiv"] { background: var(--brand-neon-mint); color: var(--on-light); }
/* Review beim Kunden: Royal Blau wie in monday (Meeting 21.10.); „Angebot gesendet“ bleibt Ice Mint */
.phase-badge[data-phase="monitoring"],
.phase-badge[data-phase="review"],
.phase-badge[data-phase="kundenreview"] { background: var(--brand-royal); color: var(--on-dark); }
.phase-badge[data-phase="pausiert"] { background: var(--brand-violet); color: var(--on-dark); }
.phase-badge[data-phase="pausiert"]::before {
 content: ""; width: 7px; height: 9px; box-sizing: border-box;
 border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
}
.phase-badge[data-phase="abgeschlossen"] { background: var(--brand-dark); color: var(--on-dark); }

/* ---------- 7 · Fortschrittsspalte (Kampagnenliste) ---------- */
.cd-mini__step.is-done { background: var(--brand-dark); }
.cd-mini__step.is-current { width: 22px; box-shadow: none; }
.cd-mini[data-phase="briefing"] .cd-mini__step.is-current { background: #fff; outline: 1.5px dashed #999; outline-offset: -1.5px; }
.cd-mini[data-phase="angebot"] .cd-mini__step.is-current { background: var(--brand-ice-mint); box-shadow: inset 0 0 0 1.5px var(--brand-teal); }
.cd-mini[data-phase="freigegeben"] .cd-mini__step.is-current { background: var(--brand-aqua); }
.cd-mini[data-phase="live"] .cd-mini__step.is-current { background: var(--brand-neon-mint); }
.cd-mini[data-phase="monitoring"] .cd-mini__step.is-current,
.cd-mini[data-phase="kundenreview"] .cd-mini__step.is-current { background: var(--brand-royal); }
.cd-mini__label.is-complete { color: var(--brand-dark); font-weight: 700; }

/* ---------- 8 · Statusleiste (Kampagnen-Detailseite) ---------- */
.cd-timeline__step.is-done .cd-timeline__dot,
.cd-timeline__step.is-positive.is-done .cd-timeline__dot { border-color: var(--brand-dark); background: var(--brand-dark); }
.cd-timeline__step.is-done .cd-timeline__dot .material-icons,
.cd-timeline__step.is-positive.is-done .cd-timeline__dot .material-icons { color: #fff; }

.cd-timeline__step.is-current .cd-timeline__label { font-weight: 700; }
.cd-timeline__step.is-current .cd-timeline__dot .material-icons { color: var(--on-light); }
.cd-timeline__step.is-current[data-phase="briefing"] .cd-timeline__dot { background: #fff; border: 2px dashed #999; box-shadow: 0 0 0 5px rgba(0, 0, 0, .06); }
.cd-timeline__step.is-current[data-phase="angebot"] .cd-timeline__dot { background: var(--brand-ice-mint); border: 2px solid var(--brand-teal); box-shadow: 0 0 0 5px rgba(0, 0, 0, .06); }
.cd-timeline__step.is-current[data-phase="freigegeben"] .cd-timeline__dot { background: var(--brand-aqua); border: 2px solid var(--brand-aqua); box-shadow: 0 0 0 5px rgba(99, 255, 255, .3); }
.cd-timeline__step.is-current[data-phase="live"] .cd-timeline__dot { background: var(--brand-neon-mint); border: 2px solid var(--brand-neon-mint); box-shadow: 0 0 0 5px rgba(5, 254, 169, .28); }
.cd-timeline__step.is-current[data-phase="monitoring"] .cd-timeline__dot { background: var(--brand-royal); border: 2px solid var(--brand-royal); box-shadow: 0 0 0 5px rgba(65, 105, 225, .2); }
.cd-timeline__step.is-current[data-phase="monitoring"] .cd-timeline__dot .material-icons { color: var(--on-dark); }

/* Interne Ansicht: Status per Klick auf die Zeitleiste */
.cd-timeline__step.is-clickable { cursor: pointer; border-radius: 8px; }
.cd-timeline__step.is-clickable:hover .cd-timeline__dot,
.cd-timeline__step.is-clickable:focus-visible .cd-timeline__dot { box-shadow: 0 0 0 5px rgba(27, 32, 27, .12); }
.cd-timeline__step.is-clickable:hover .cd-timeline__label { text-decoration: underline; }
.cd-timeline__step.is-clickable:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; }
.cd-timeline__step.is-current[data-phase="offen"] .cd-timeline__dot { background: #fff; border: 2px solid var(--btn-border); }
.cd-timeline__step.is-current[data-phase="kundenreview"] .cd-timeline__dot { background: var(--brand-royal); border: 2px solid var(--brand-royal); }
.cd-timeline__step.is-current[data-phase="kundenreview"] .cd-timeline__dot .material-icons,
.cd-timeline__step.is-current[data-phase="pausiert"] .cd-timeline__dot .material-icons { color: var(--on-dark); }
.cd-timeline__step.is-current[data-phase="pausiert"] .cd-timeline__dot { background: var(--brand-violet); border: 2px solid var(--brand-violet); }
.cd-timeline.is-complete .cd-timeline__step:last-child .cd-timeline__dot {
 width: 34px; height: 34px; margin-top: -3px;
 border-color: var(--brand-dark); background: var(--brand-dark);
 box-shadow: 0 0 0 5px rgba(27, 32, 27, .12);
}
.cd-timeline.is-complete .cd-timeline__step:last-child .cd-timeline__dot .material-icons { font-size: 20px; color: #fff; }
.cd-timeline.is-complete .cd-timeline__step:last-child .cd-timeline__label { font-weight: 700; }
.cd-done-note {
 display: inline-flex; align-items: center; gap: 6px;
 margin-left: 12px; padding: 2px 10px; border-radius: var(--pill-radius);
 font: 600 12px 'Open Sans', sans-serif;
 color: var(--on-light); background: var(--brand-light);
 vertical-align: middle;
}

/* ---------- 9 · Aktive Werbeanzeigen ---------- */
/* Tabellen im Stil von „Kampagnen“ (cd-docs cd-list); erste Spalte bleibt beim Querscrollen stehen */
.aa-table thead th:first-child,
.aa-table tbody td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 #eee; }
.aa-table thead th:first-child { background: var(--brand-light); z-index: 2; }
.aa-table { table-layout: fixed; min-width: 1100px; }
.aa-table td { vertical-align: middle; }
.aa-table td, .aa-table th { overflow-wrap: anywhere; }
.aa-table td.aa-nowrap { white-space: nowrap; overflow-wrap: normal; }
.aa-reach { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 1.5rem; padding: 14px 16px; }
.aa-sum strong { display: block; font-variant-numeric: tabular-nums; }
.empty-state { text-align: center; padding: 48px 16px 56px; }
.empty-state .material-icons { font-size: 40px; color: #ccc; }
.empty-state p { margin: 8px 0 0; font: 600 15px 'Montserrat', 'Open Sans', sans-serif; color: var(--brand-dark); }
.empty-state p.empty-state__sub { font: 400 13px 'Open Sans', sans-serif; color: #666; }
.empty-state .btn-primary { margin-top: 16px; }

/* ---------- 10 · Fenster: weiße Fußleiste, Schließen als Icon-Button ---------- */
.modal-footer { background: #fff; }
.modal-close {
 display: inline-flex; align-items: center; justify-content: center;
 width: 32px; height: 32px; padding: 0;
 border-radius: var(--btn-radius);
 background: transparent; color: var(--on-light);
}
.modal-close:hover { background: var(--brand-light); color: var(--on-light); }


/* ---------- 12 · Kampagnen: Kurzname, Klick zeigt den vollen Titel ---------- */
.campaign-nick { cursor: help; border-bottom: 1px dotted #bbb; }
.campaign-nick.is-full { border-bottom-style: solid; }

/* ---------- 13 · Jahresbudget (Übersicht) ---------- */
.budget-card { margin-bottom: 1rem; }
.budget-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.budget-card__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 12px; }
.budget-card__kpis .kpi-value { display: flex; align-items: center; gap: 4px; }
.budget-card__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.budget-card__bar { height: 8px; border-radius: var(--pill-radius); background: var(--brand-light); overflow: hidden; }
.budget-card__bar span { display: block; height: 100%; background: var(--brand-dark); }
.budget-card__note { margin-top: 6px; font: 400 12px 'Open Sans', sans-serif; color: #666; }
.budget-card__history { display: block; list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid #eee; }
.budget-card__history li:not(:last-child)::after { content: none; } /* globale ul-Regel (Footer) aufheben */
.budget-card__history li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.budget-card__history li span:first-child { font-weight: 600; }
@media (max-width: 700px) { .budget-card__kpis { grid-template-columns: 1fr; } }

/* ---------- 14 · Abgelaufene Kampagnen: kein Erdbeerrot (nur Löschen und Fehler) ---------- */
.deadline-soon { color:var(--status-neutral-text); font-weight:600; }
.deadline-expired { display: inline-block; padding: 2px 10px; border-radius: var(--pill-radius); background: var(--brand-light); color: var(--on-light); font: 600 12px 'Open Sans', sans-serif; }

/* ---------- 15 · ToDos: neutraler Status (offen) und Pillen-Größe ---------- */
.phase-badge[data-phase="offen"] { background: #fff; color: var(--on-light); box-shadow: inset 0 0 0 1px var(--btn-border); }
.badge.todo.phase-badge { font-size: 11px; padding: 1px 9px; }

/* ---------- 16 · Aktive Werbeanzeigen: Personenfilter nicht abschneiden ---------- */
#aa-umsetzung, #aa-monitoring { width: auto; min-width: 160px; }

/* ---------- 17 · ToDos: eigene Status-Spalte nach dem Namen ---------- */
#view-todos table th.status { width: 9%; }

/* ---------- 18 · Startseite: Otto-Kachel ---------- */
#start-otto .otto-icon { width: 20px; height: 20px; }
/* Button im Feld unten rechts: in der kleinsten Höhe (44 px) passt er genau hinein (6 + 32 + 6) */
.start-otto__form { position: relative; margin: 16px; }
.start-otto__form textarea {
 display: block; width: 100%; box-sizing: border-box;
 height: 44px; min-height: 44px; resize: vertical;
 padding: 11px 104px 11px 12px; line-height: 20px; /* 11 + 20 + 11 + 2 Rand = 44 px */
 border: 1px solid var(--btn-border); border-radius: var(--btn-radius);
 font: 400 13px/20px 'Open Sans', sans-serif;
}
/* rechts Platz für den Zieh-Griff des Felds lassen */
.start-otto__form .btn-primary { position: absolute; right: 18px; bottom: 6px; margin: 0; }
.start-otto__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }

/* ---------- 19 · Benutzer: Rollen neutral (Erdbeerrot nur für Löschen und Fehler) ---------- */
.role-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--pill-radius); font: 600 12px 'Open Sans', sans-serif; }
.role-badge[data-role="admin"] { background: var(--brand-dark); color: var(--on-dark); }
.role-badge[data-role="employee"] { background: #fff; color: var(--on-light); box-shadow: inset 0 0 0 1px var(--btn-border); }
.role-badge[data-role="viewer"] { background: var(--brand-light); color: var(--on-light); }

/* ---------- 20 · Nachrichten: Posteingang/Gesendet als Filter-Pillen ---------- */
.messages-tabs { gap: 8px; }
.msg-tab { height: 32px; padding: 0 12px; border-radius: var(--pill-radius); border: 1px solid var(--btn-border); background: #fff; color: var(--on-light); font: 600 12px 'Open Sans', sans-serif; display: inline-flex; align-items: center; gap: 6px; }
.msg-tab.active { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-dark); }

/* ---------- 21 · Kampagnen (Demo): Zuständigkeit (Entwurf) ---------- */
.cd-team { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.cd-team__role { min-width: 74px; font: 600 10px 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #666; }

/* ---------- 22 · Kampagnen (Demo): Rechnung und Tabelle „Abgerechnet“ ---------- */
.cd-billed-header { margin-top: 1.5rem; }
.cd-invoice-no { font: 600 13px 'Open Sans', sans-serif; color: var(--on-light); }
.cd-invoice { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.cd-invoice input { width: 200px; max-width: none; height: 32px; }
.cd-invoice__btn { margin-top: 6px; }
/* Rechnung als letzter Eintrag der Key Facts, mit Trennlinie abgesetzt */
.cd-fact--invoice { border-top: 1px solid #eee; padding-top: 12px; }
.cd-fact--invoice dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cd-fact--invoice .cd-invoice { margin: 0; }
.cd-fact--invoice .cd-invoice__btn { margin: 0; }
/* Grüner Haken = abgerechnet (Rechnungsnummer eingetragen) */
.cd-billed-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; background: var(--brand-neon-mint); color: var(--on-light); vertical-align: middle; }
.cd-billed-check .material-icons { font-size: 14px; font-weight: 700; }
.cd-invoice-link { font: 600 16px 'Open Sans', sans-serif; color: var(--brand-teal); text-decoration: underline; }
.cd-invoice-row { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- 22b · Rechnungen ---------- */
#view-invoices .cd-invoice-link { font-size: 13px; }
.inv-campaigns-cell { line-height: 1.6; }
.inv-campaign { display: block; color: var(--on-light); text-decoration: none; font-size: 13px; }
.inv-campaign:hover { text-decoration: underline; }
.inv-campaigns { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; padding: 8px 10px; border: 0.5px solid var(--border); border-radius: var(--radius); }
.form-group .inv-campaign-option { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; cursor: pointer; }
#inv-filter-search { width: 220px; max-width: 100%; }
.inv-sum { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.form-group .inv-campaign-option input { width: auto; margin: 0; }

/* ---------- 23 · Kampagnen (neu) ---------- */
.cl-demo-btn { margin-left: auto; }
.cl-remaining { margin-top: 2px; font-size: 12px; }
.cl-table td { vertical-align: middle; }
/* Fortschritt: aktueller Schritt auch für interne Phasen einfärben */
.cd-mini[data-phase="vorbereitung"] .cd-mini__step.is-current { background: #fff; outline: 1.5px dashed #999; outline-offset: -1.5px; }
.cd-mini[data-phase="offen"] .cd-mini__step.is-current { background: #fff; box-shadow: inset 0 0 0 1.5px var(--btn-border); }
.cd-mini[data-phase="pausiert"] .cd-mini__step.is-current { background: var(--brand-violet); }
.cl-more td { text-align: center; padding: 12px; background: #fff; cursor: default; }
.cl-note-icon { font-size: 18px; color: var(--on-light); cursor: help; vertical-align: middle; }
.cl-static { cursor: default; }

/* ---------- 24 · Kampagne: Key Facts per Klick bearbeiten (intern) ---------- */
.cd-fact.is-editable { cursor: pointer; border-radius: 8px; margin: -6px; padding: 6px; transition: background .12s; }
.cd-fact.is-editable:hover,
.cd-fact.is-editable:focus-visible { background: #f3f4f3; outline: none; }
.cd-fact__pen { font-size: 14px !important; margin-left: 6px; color: #999; opacity: 0; transition: opacity .12s; }
.cd-fact.is-editable:hover .cd-fact__pen,
.cd-fact.is-editable:focus-visible .cd-fact__pen { opacity: 1; }
.cd-fact.is-editing { border-radius: 8px; margin: -6px; padding: 6px; background: #f3f4f3; }
.cd-fact__editor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; }
.cd-fact__editor input, .cd-fact__editor select { height: 32px; max-width: 100%; }
.cd-fact__editor input[type="number"] { width: 120px; }
.cd-fact__label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; }
.cd-fact__input { width: 100%; padding: 8px 10px; border: 0.5px solid var(--border); border-radius: var(--radius); font: 13px 'Open Sans', sans-serif; background: #fff; resize: vertical; }
.cd-fact__actions { display: flex; gap: 6px; margin-top: 8px; }
.cd-fact__text { font-size: 13px; white-space: pre-line; }
.cd-fact__wide-input { width: 360px; }
.cd-fact__ok { font-size: 14px !important; vertical-align: -2px; color: var(--brand-teal); }

/* ---------- 25 · Seitenleiste: alte Ansicht ausgegraut, Kampagnen sortierbar ---------- */
.nav-item--legacy { opacity: .5; }
.nav-item--legacy:hover, .nav-item--legacy.active { opacity: .85; }
.nav-legacy-badge { margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; }
.cl-sortable { cursor: pointer; user-select: none; }
.cl-sortable:hover { text-decoration: underline; }
.aa-table td:first-child, .aa-table td:first-child .cd-doc__title { white-space: normal; }

/* ---------- 26 · Budget: Verplant und Budget-Kachel der Kampagne ---------- */
.budget-card__kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.is-over { color: var(--brand-red) !important; }
.budget-card__bar.is-over span { background: var(--brand-red); }
.cd-budget-warn { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--brand-red); background: color-mix(in srgb, var(--brand-red) 10%, transparent); }
.cd-budget-warn .material-icons { font-size: 18px; }
.cd-budget-warn.is-slow { color: var(--brand-charcoal); background: #EFEFEF; }
.cd-budget { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 8px; }
.cd-budget > div { display: flex; flex-direction: column; }
.cd-fact .budget-card__bar { width: 100%; margin: 2px 0 4px; }
@media (max-width: 700px) { .budget-card__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 27 · Kampagne: Vorschau Kundenansicht ---------- */
.cd-head__right { display: flex; align-items: center; gap: 8px; }
.cd-preview-btn { display: inline-flex; align-items: center; gap: 6px; }
.cd-preview-btn .material-icons { font-size: 16px; }
.cd-preview-btn.active { background: var(--brand-royal); color: var(--on-dark); border-color: var(--brand-royal); }
.cd-preview-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1rem; padding: 10px 14px; border-radius: 8px; background: #eef1ff; border: 1px solid var(--brand-royal); font-size: 13px; color: var(--on-light); }
.cd-preview-banner.hidden { display: none; }
.cd-preview-banner .material-icons { color: var(--brand-royal); }
.cd-preview-banner .btn-secondary { margin-left: auto; }
#cd-detail.is-preview .cd-timeline-card,
#cd-detail.is-preview .cd-panel { outline: 2px dashed rgba(65, 90, 230, .35); outline-offset: 4px; }

/* ---------- 28 · Kampagne: Kommentare neben Otto ---------- */
.cd-side { display: flex; flex-direction: column; gap: 1rem; }
.cd-comments .chart-title { display: flex; align-items: center; gap: 8px; }
.cd-comments__list { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-comments__list li:not(:last-child)::after { content: none; }
.cd-comments__meta { font-size: 11px; color: #666; }
.cd-comments__text { font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
#cd-comments-btn { display: inline-flex; align-items: center; gap: 6px; }
#cd-comments-btn .material-icons { font-size: 16px; }

/* ---------- 29 · Kampagnen-Liste: Notiz, Kommentare, Aktionen ---------- */
.cl-col-icon { width: 1%; white-space: nowrap; text-align: center; }
.cl-col-actions { width: 1%; white-space: nowrap; }
.cl-actions { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid #eee; }
.cl-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: none; color: #666; cursor: pointer; }
.cl-icon-btn:hover { background: var(--brand-light); color: var(--on-light); }
.cl-icon-btn .material-icons { font-size: 20px; }
.cl-comment-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid #ddd; border-radius: var(--pill-radius); background: #fff; color: #666; font: 600 12px 'Open Sans', sans-serif; cursor: pointer; }
.cl-comment-pill .material-icons { font-size: 15px; }
.cl-comment-pill:hover { border-color: var(--on-light); color: var(--on-light); }
.cl-comment-pill.has-comments { background: var(--brand-light); border-color: transparent; color: var(--on-light); }
.cl-fav .material-icons { color: #bbb; }
.cl-fav.is-fav .material-icons, .cl-fav:hover .material-icons { color: var(--brand-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-actions .btn-icon { width: 32px; height: 32px; background: transparent; border: none; border-radius: 8px; }
.cl-actions .btn-icon:hover { background: var(--brand-light); }
.cl-actions .btn-icon .material-icons { font-size: 19px; }
.cl-icon-btn { color: #666; }
.cl-icon-btn .material-icons { color: inherit; }
/* Hover: Bearbeiten Neon-Grün mit dunklem Symbol, Löschen Rot mit weißem Symbol (auch Stift auf der Kampagnenseite) */
.cl-actions .btn-icon.edit:hover, #cd-edit-btn:hover { background: var(--brand-neon-mint); }
.cl-actions .btn-icon.edit:hover span, #cd-edit-btn:hover span { color: var(--on-light); }
.cl-actions .btn-icon.delete:hover { background: var(--brand-red); }
.cl-actions .btn-icon.delete:hover span { color: #fff; }

/* ---------- 30 · Kundenleiste: „Live geplant“ in Aqua ---------- */
.cd-timeline__step.is-current[data-phase="freigegeben"] .cd-timeline__dot { background: var(--brand-aqua); border: 2px solid var(--brand-aqua); }

/* ---------- 31 · Status seit … und Freigabe durch den Kunden ---------- */
/* Neutral mit Akzentkante: der Primär-Button (Lime, beim Kunden in seiner Farbe) beißt sich nicht mit einer farbigen Fläche */
.cd-approval { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 1.25rem; padding: 14px 18px; border-radius: 8px; background: #FFFFFF; border: 1px solid #D0D0D0; border-left: 4px solid var(--brand-dark); font-size: 14px; line-height: 1.5; color: var(--on-light); }
.cd-approval.hidden { display: none; }
.cd-approval__text { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; }
.cd-approval__text .material-icons { color: var(--brand-dark); }
.cd-approval__actions { display: flex; gap: 8px; }
.cd-approval__form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.cd-approval__form.hidden { display: none; }
.cd-approval__form textarea { flex: 1 1 320px; }

/* ---------- 32 · Startseite: Heute im Blick ---------- */
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.today-card { padding: 14px 16px; }
.today-card.is-empty { opacity: .7; }
.today-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.today-card__head .material-icons { font-size: 20px; color: var(--on-light); }
.today-card__title { font: 600 14px 'Montserrat', 'Open Sans', sans-serif; color: var(--brand-dark); flex: 1; }
.today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.today-list li::after { content: none !important; }
.today-item { display: flex; flex-direction: column; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; text-decoration: none; color: var(--on-light); }
.today-item:hover { background: var(--brand-light); }
.today-item__name { font-size: 13px; font-weight: 600; }
.today-item__meta { font-size: 11px; color: #666; }
/* Dringend: nur ein kleiner roter Punkt vor dem Namen, der Text bleibt grau (Ian 02.11.: kein roter Fließtext) */
.today-item.is-warn .today-item__name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--brand-red); vertical-align: middle; }
.today-empty { margin: 4px 0 0; font-size: 12px; color: #888; }
.today-more { display: inline-block; margin-top: 6px; font-size: 12px; }

/* ---------- 33 · Kampagnen: Jahresplan ---------- */
.cl-view-switch { display: inline-flex; gap: 4px; margin-left: auto; }
.cl-view-switch .filter-btn { display: inline-flex; align-items: center; gap: 4px; }
.cl-view-switch .material-icons { font-size: 16px; }
.cl-plan { padding: 12px 16px 16px; overflow-x: auto; }
.cl-plan.hidden, #cl-tables.hidden { display: none; }
.cl-plan__head, .cl-plan__row { display: grid; grid-template-columns: 240px minmax(560px, 1fr) 90px; align-items: center; gap: 12px; min-width: 900px; }
.cl-plan__head { padding-bottom: 8px; border-bottom: 1px solid #eee; }
.cl-plan__months { position: relative; height: 18px; font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; }
.cl-plan__months span { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid #e5e5e5; height: 18px; }
.cl-plan__row { padding: 6px 0; border-bottom: 1px solid #f3f3f3; cursor: pointer; }
.cl-plan__row:hover { background: #fafafa; }
.cl-plan__label { display: flex; flex-direction: column; min-width: 0; }
.cl-plan__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-plan__sub { font-size: 11px; color: #666; }
.cl-plan__track { position: relative; height: 18px; border-radius: 999px; background: #f4f5f4; }
.cl-plan__bar { position: absolute; top: 3px; height: 12px; border-radius: 999px; background: var(--brand-dark); }
.cl-plan__bar[data-phase="briefing"], .cl-plan__bar[data-phase="offen"] { background: #fff; box-shadow: inset 0 0 0 1.5px #999; }
.cl-plan__bar[data-phase="angebot"] { background: var(--brand-ice-mint); box-shadow: inset 0 0 0 1.5px var(--brand-teal); }
.cl-plan__bar[data-phase="kundenreview"] { background: var(--brand-royal); }
.cl-plan__bar[data-phase="freigegeben"] { background: var(--brand-aqua); }
.cl-plan__bar[data-phase="live"] { background: var(--brand-neon-mint); }
.cl-plan__bar[data-phase="pausiert"] { background: var(--brand-violet); }
.cl-plan__today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--brand-red); opacity: .6; z-index: 1; }
.cl-plan__budget { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.cl-plan__head .cl-plan__budget { font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; }
.cl-plan__foot { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: #666; }
.cl-plan__empty { padding: 16px 0; }
.cd-approval button:disabled { opacity: .55; cursor: not-allowed; }

/* Gesamtangebot auf der Kampagnenseite */
.cd-offer__title { font-weight: 700; font-size: 15px; margin-top: 4px; }
.cd-offer__list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cd-offer__list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.cd-offer__list li.is-current .cd-offer__name { font-weight: 700; }
.cd-offer .cd-invoice { margin-top: 8px; }

/* Kampagnenliste: Laufzeit und Budget mit Mini-Balken */
.cl-col-bar { min-width: 140px; font-variant-numeric: tabular-nums; }
.cl-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cl-bar .budget-card__bar { flex: 1; height: 6px; }
/* Kampagnenname mit fester Breite: lange Namen verschieben beim Aufklappen („Alle anzeigen“) die Spalten nicht */
.cl-table .cd-doc__title, .cl-table .cd-doc__file { width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-offer__list a.cd-offer__name { color: var(--text-primary, #111); background: none; text-decoration: underline dotted; }
.cd-offer__list a.cd-offer__name:hover { text-decoration: underline; }

/* Filterleisten ohne Schatten, wie die übrigen Karten */
.filter-bar.table-header { box-shadow: none; }
/* Icon in aktiven Umschaltern (Liste/Jahresplan) mit der Schriftfarbe */
.filter-btn.active .material-icons { color: inherit; }

/* Kundenleiste: Schritt mit Dokument ist ein Link (Angebot → Angebot, Abgeschlossen → Rechnung) */
.cd-timeline__link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px 4px; border: none; border-radius: 8px;  /* oben 0: Punkt bleibt auf der Verbindungslinie */ background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.cd-timeline__link:hover { background: var(--brand-light); }
.cd-timeline__link:hover .cd-timeline__doc { text-decoration: underline; }
.cd-timeline__doc { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--brand-teal); }
.cd-timeline__doc .material-icons { font-size: 14px; }
.cd-timeline__date { color: #555555; }
#cd-docs-body tr.is-highlight td { background: var(--brand-ice-mint, #E6FFF8); transition: background .3s; }

/* Sichtbarer Tastaturfokus auf der Kampagnenseite */
#cd-detail :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* ---------- 30 · Kampagnenseite: Lesbarkeit und Abstände (28.10.) ----------
   Überschriften dunkel und größer, Feldbezeichnungen nicht mehr winzig-grau, mehr Luft in und zwischen den Karten.
   Kontrast: #1B201B / #333 / #555 auf Weiß ≥ 7:1. Gilt intern und für Kunden. */
#cd-detail .chart-card { padding: 20px 24px; border: 1px solid #E2E2E2; margin-bottom: 20px; }
#cd-detail .chart-title { font-size: 18px; font-weight: 700; color: var(--brand-dark); margin-bottom: 16px; line-height: 1.3; }
#cd-detail .cd-overview, #cd-detail .cd-side { gap: 20px; }
#cd-detail .cd-side .chart-card { margin-bottom: 0; }
#cd-detail .cd-head__client { font-size: 12px; color: #555; letter-spacing: .04em; }
#cd-detail .cd-head__name { font-size: 22px; }

/* Status-Zeitleiste */
#cd-detail .cd-timeline { padding: 8px 0 4px; }
#cd-detail .cd-timeline__step { font-size: 14px; }
#cd-detail .cd-timeline__date { font-size: 12px; color: #555; }
#cd-detail .cd-timeline__step.is-upcoming .cd-timeline__label { color: #555; }

/* Key Facts */
#cd-detail .cd-facts__grid { gap: 28px 32px; }
#cd-detail .cd-fact dt { font-size: 13px; font-weight: 700; color: #333; letter-spacing: .04em; margin-bottom: 8px; }
#cd-detail .cd-fact dt .material-icons { font-size: 18px; color: #333; }
#cd-detail .cd-fact dd { font-size: 15px; line-height: 1.45; }
#cd-detail .cd-fact dd strong { font-size: 17px; font-weight: 600; }
#cd-detail .cd-fact__sub { font-size: 13px; color: #555; line-height: 1.45; margin-top: 3px; }
#cd-detail .cd-fact__text { font-size: 15px; }
#cd-detail .cd-budget { gap: 12px 28px; margin: 6px 0 10px; }

/* Seitenkarten */
#cd-detail .cd-otto__text, #cd-detail .cd-comments__list, #cd-detail .cd-offer p { font-size: 14px; line-height: 1.5; }
#cd-detail .cd-comments .cd-fact__sub, #cd-detail .cd-offer .cd-fact__sub { font-size: 13px; }

/* Dokumente */
#cd-detail #cd-tab-docs > .table-header { margin-bottom: 12px; }
#cd-detail #cd-tab-docs .table-title { font-size: 18px; font-weight: 700; }
#cd-detail .cd-docs__hint { font-size: 14px; color: #555; margin-top: 4px; }
#cd-detail .cd-docs th { font-size: 12px; color: #333; }
#cd-detail .cd-docs td { font-size: 14px; }
#cd-detail .cd-empty__text { font-size: 15px; color: #333; }

/* ---------- 31 · Jahresplanung ---------- */
#view-planning { --jp-planned: color-mix(in srgb, var(--brand-teal) 30%, #fff); --jp-spent: var(--brand-teal); --jp-over: var(--brand-red); }
.jp-head { flex-wrap: wrap; gap: 12px 24px; margin-bottom: 20px; }
.jp-head__title { display: flex; flex-direction: column; gap: 2px; }
.jp-head__title .table-title { font-size: 20px; font-weight: 700; }
.jp-head__sub { font-size: 14px; color: #555; }
.jp-head__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-left: auto; }
.jp-year { display: inline-flex; align-items: center; gap: 4px; }
.jp-year .btn-secondary { width: 32px; padding: 0; }
.jp-year select { min-width: 90px; font-weight: 700; }
#jp-search { width: 200px; }
.jp-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #333; cursor: pointer; }
.jp-toggle input { width: 16px; height: 16px; margin: 0; }

.jp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.jp-kpi { padding: 18px 20px; background: #fff; border: 1px solid #E2E2E2; border-radius: var(--radius); }
.jp-kpi__label { font-size: 13px; font-weight: 700; color: #333; letter-spacing: .02em; }
.jp-kpi__value { margin-top: 6px; font-size: 26px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.jp-kpi__sub { margin-top: 4px; font-size: 13px; color: #555; }
.jp-kpi.is-over .jp-kpi__value { color: var(--brand-red); }

.jp-alerts__box { margin-bottom: 20px; padding: 14px 18px; background: #fff; border: 1px solid #E2E2E2; border-left: 4px solid var(--brand-dark); border-radius: var(--radius); }
.jp-alerts__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; }
.jp-alerts__title .material-icons { color: var(--brand-dark); }
.jp-alerts__box ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #333; }
.jp-alerts__box li { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 12px; padding: 6px 0 6px 14px; border-top: 1px solid #F0F0F0; position: relative; }
.jp-alerts__box ul:first-of-type li:first-child { border-top: 0; }
.jp-alerts__text { color: #555; }
#view-planning .jp-alerts__box li.is-danger::before { content: "" !important; display: block !important; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); }
.jp-alerts__box a { font-weight: 600; color: var(--brand-dark); text-decoration: none; }
.jp-alerts__box a:hover { text-decoration: underline; }
.jp-alerts__more { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-dark); cursor: pointer; }
.jp-alerts__more:hover { text-decoration: underline; }

.jp-table { font-size: 14px; }
.jp-table th { font-size: 12px; color: #333; white-space: nowrap; }
.jp-table td { padding-top: 12px; padding-bottom: 12px; vertical-align: middle; }
.jp-table .jp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jp-table .is-over { color: var(--brand-red); font-weight: 700; }
.jp-table tfoot th, .jp-table tfoot td { padding-top: 12px; padding-bottom: 12px; border-top: 2px solid var(--brand-dark); font-weight: 700; font-size: 14px; color: var(--brand-dark); }
.jp-sortable { cursor: pointer; }
.jp-client { font-size: 15px; font-weight: 700; color: var(--brand-dark); text-decoration: none; }
.jp-client:hover { text-decoration: underline; }
.jp-sub { display: block; margin-top: 2px; font-size: 12px; color: #555; }
.jp-empty { padding: 32px 16px !important; text-align: center; font-size: 15px; color: #333; }

.jp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.jp-flags--block { margin: 0 0 16px; }
.jp-flag { display: inline-block; padding: 2px 8px; border-radius: var(--pill-radius); font-size: 12px; font-weight: 600; line-height: 1.5; }
.jp-flag.is-danger { background: var(--status-attention-bg); color: var(--status-attention-text); }
.jp-flag.is-warn { background: #EFEFEF; color: var(--brand-charcoal); }
.jp-flag.is-info { background: var(--brand-ice-mint); color: var(--brand-teal); }

.jp-col-bar { min-width: 200px; }
.jp-col-bar, td.jp-col-bar { white-space: nowrap; }
.jp-bar { position: relative; display: inline-block; vertical-align: middle; width: calc(100% - 76px); min-width: 120px; height: 12px; border-radius: 6px; background: #EFEFEF; overflow: visible; }
.jp-bar > span { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; }
.jp-bar__planned { background: var(--jp-planned); }
.jp-bar__planned.is-over { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--brand-red) 35%, #fff) 0 6px, color-mix(in srgb, var(--brand-red) 18%, #fff) 6px 12px); }
.jp-bar__spent { background: var(--jp-spent); height: 6px !important; top: 3px !important; }
.jp-bar__budget { width: 3px !important; height: 20px !important; top: -4px !important; margin-left: -1px; border-radius: 2px !important; background: var(--brand-dark); }
.jp-bar__pct { display: inline-block; width: 44px; margin-left: 8px; text-align: right; font-size: 13px; font-weight: 600; color: #333; font-variant-numeric: tabular-nums; }

.jp-budget-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin: -4px -8px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; }
.jp-budget-btn .material-icons { font-size: 16px; color: #555; }
.jp-budget-btn:hover { border-color: #D0D0D0; background: #fff; }
.jp-budget-form { display: inline-flex; gap: 6px; }
.jp-budget-form input { width: 120px; height: 32px; text-align: right; }

.jp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 12px 0 0; font-size: 13px; color: #555; line-height: 1.5; }
.jp-legend__item { display: inline-flex; align-items: center; gap: 6px; color: #333; font-weight: 600; }
.jp-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.jp-swatch.is-planned { background: var(--jp-planned); }
.jp-swatch.is-spent { background: var(--jp-spent); }
.jp-swatch.is-budget { width: 3px; height: 14px; background: var(--brand-dark); }
.jp-swatch.is-target { height: 0; border-top: 2px dashed var(--brand-dark); border-radius: 0; }
.jp-note { font-size: 14px; color: #555; margin: 8px 0 0; }

/* Kundendetail */
#jp-detail .chart-card { padding: 20px 24px; border: 1px solid #E2E2E2; margin-bottom: 20px; }
#jp-detail .chart-title { font-size: 18px; font-weight: 700; color: var(--brand-dark); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.jp-client-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.jp-client-head__left { display: flex; align-items: center; gap: 14px; }
.jp-client-head__eyebrow { font-size: 12px; font-weight: 600; color: #555; letter-spacing: .04em; text-transform: uppercase; }
.jp-client-head__name { margin: 2px 0 0; font-size: 24px; font-weight: 700; color: var(--brand-dark); }
.jp-client-head__name:focus { outline: none; }
.jp-client-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jp-client-head__budget { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #333; }
.jp-client-head__budget .jp-budget-btn { margin: 0; font-size: 16px; font-weight: 700; border-color: #D0D0D0; background: #fff; }
.jp-progress__bar .jp-bar { height: 16px; }
.jp-progress__bar .jp-bar__spent { height: 8px !important; top: 4px !important; }
.jp-progress__bar .jp-bar__budget { height: 26px !important; top: -5px !important; }
.jp-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
.jp-grid .chart-card { margin-bottom: 20px; }
@media (max-width: 1100px) { .jp-grid { grid-template-columns: 1fr; } }

.jp-months { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 200px; padding-top: 18px; }
.jp-month { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.jp-month__bars { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.jp-month__bars span { width: 42%; max-width: 18px; border-radius: 3px 3px 0 0; min-height: 0; }
.jp-month__planned { background: var(--jp-planned); }
.jp-month__spent { background: var(--jp-spent); }
.jp-month__label { text-align: center; font-size: 12px; font-weight: 600; color: #333; }
.jp-month.is-now .jp-month__label { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.jp-months__target { position: absolute; left: 0; right: 0; margin-bottom: 24px; border-top: 2px dashed var(--brand-dark); pointer-events: none; z-index: 1; }
.jp-months__target span { position: absolute; right: 0; top: -20px; padding: 0 4px; background: #fff; font-size: 12px; font-weight: 600; color: #333; }

.jp-channels { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.jp-channels li { display: grid; grid-template-columns: 1fr; gap: 6px; }
.jp-channels__name { font-size: 14px; font-weight: 700; color: var(--brand-dark); }
.jp-channels__bar { display: block; height: 10px; border-radius: 5px; background: #EFEFEF; overflow: hidden; }
.jp-channels__bar span { display: block; height: 100%; background: var(--jp-spent); }
.jp-channels__value { font-size: 14px; font-weight: 600; color: #333; font-variant-numeric: tabular-nums; }
.jp-channels__sub { margin-left: 8px; font-weight: 400; color: #555; font-size: 13px; }
.jp-campaigns td a { font-weight: 600; color: var(--brand-dark); text-decoration: none; }
.jp-campaigns td a:hover { text-decoration: underline; }
#view-planning :is(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
#view-planning .jp-alerts__box li::after, #view-planning .jp-alerts__box li:not(.is-danger)::before { content: none !important; display: none !important; }
.jp-bar__none { font-size: 13px; color: #555; }
.jp-bar__pct { width: 64px; line-height: 1.15; vertical-align: middle; }
.jp-bar__pct-sub { display: block; font-size: 11px; font-weight: 400; color: #555; }
.jp-note--top { margin: 0 0 14px; }

/* Jahresplanung: Budgettöpfe */
#jp-detail .chart-title .jp-pots__add { margin-left: auto; }
.jp-pot__title { font-size: 15px; color: var(--brand-dark); }
.jp-kind { display: inline-block; padding: 2px 8px; border-radius: var(--pill-radius); font-size: 12px; font-weight: 600; }
.jp-kind.is-media { background: var(--brand-ice-mint); color: var(--brand-teal); }
.jp-kind.is-leistung { background: color-mix(in srgb, var(--brand-violet) 14%, #fff); color: var(--brand-dark); }
.jp-actions { white-space: nowrap; text-align: right; }
.jp-pot-select { height: 32px; max-width: 220px; font-size: 13px; }
.jp-pot-form { display: grid; grid-template-columns: 2fr 1.4fr 1fr .8fr .8fr; gap: 12px 14px; align-items: end; margin: 0 0 18px; padding: 16px; background: #F6F7F6; border: 1px solid #E2E2E2; border-radius: var(--radius); }
.jp-pot-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #333; }
.jp-pot-form input, .jp-pot-form select { height: 36px; width: 100%; }
.jp-pot-form__note { grid-column: 1 / 4; }
.jp-pot-form__actions { grid-column: 4 / 6; display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 900px) { .jp-pot-form { grid-template-columns: 1fr 1fr; } .jp-pot-form__note, .jp-pot-form__actions { grid-column: 1 / -1; } }
.jp-campaigns td:first-child { min-width: 220px; white-space: normal; }
.jp-campaigns td { white-space: nowrap; }
.jp-campaigns .jp-pot-select { max-width: 180px; }
/* Jahresplanung: Kundenansicht – die Vorschau-Leiste wie auf der Kampagnenseite */
#jp-detail .cd-preview-banner { margin: 0 0 20px; font-size: 14px; }
#jp-detail .jp-bar__spent:only-child { height: 100% !important; top: 0 !important; }
.cd-timeline__doc { white-space: nowrap; }
@media (max-width: 640px) { .jp-alerts__box li { grid-template-columns: 1fr; gap: 2px; } }

/* Kopfleiste hell statt schwarz (Feedback Mira 30.10.: oben zu dominant) – nur die Sidebar bleibt dunkel */
.topbar { padding: 1rem 2rem 1rem 1rem; background: #fff; border-bottom: 1px solid #E2E2E2; }
.topbar-title { color: var(--brand-dark); font-size: 1.4rem; }
.topbar-meta { color: var(--text-muted); }
.topbar a.toolbar-btn span { color: var(--brand-dark); }
.topbar a.toolbar-btn:hover span { color: #555; }
.topbar .btn-icon { color: var(--brand-dark); }
.topbar .btn-icon:hover { background: #F0F0F0; }

/* ---------- ToDos im monday-Stil: klar getrennte Spalten, Status als Farbzelle (Feedback Mira 30.10.) ---------- */
#view-todos table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
#view-todos thead { background: #fff; }
#view-todos th, #view-todos td { border-right: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; }
#view-todos th { padding: 10px 12px; color: #555; text-align: center; border-top: 1px solid #E4E4E4; }
#view-todos th.name { text-align: left; }
#view-todos th:last-child, #view-todos td:last-child,
#view-todos th:nth-last-child(2), #view-todos td.todo-actions { border-right: 0; }
#view-todos td { padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
#view-todos tbody tr:hover td { background: var(--brand-light); }
/* Gruppenfarbe links wie bei monday */
#view-todos td.todo-name { border-left: 4px solid var(--brand-lime); font-weight: 600; }
#todos-done-table td.todo-name { border-left-color: var(--brand-neon-mint); font-weight: 400; color: #555; }
#view-todos td.desc { white-space: normal; display: table-cell; }
#view-todos td.todo-center { text-align: center; }
/* Feste Spaltenbreiten */
#view-todos table th.name:first-child { width: 22%; }
#view-todos table th.status { width: 130px; }
#view-todos table th.name.hide { width: 17%; }
#view-todos table th.customer { width: 9%; }
#view-todos table th.campaign { width: 14%; }
#view-todos table th.user { width: 10%; }
#view-todos table th.deadline { width: 100px; }
#view-todos table th.progress { width: 120px; }
#view-todos table th.icon:nth-last-child(2) { width: 130px; }
#view-todos table th.icon:last-child { width: 52px; }
/* kompakter: niedrigere Zeilen, kleinere Aktions-Buttons */
#view-todos th { padding: 7px 10px; }
#view-todos td { padding: 6px 10px; height: 38px; }
#view-todos td.muted { padding: 6px 10px; }
#view-todos td .desc.muted.bold { font-size: 11px; }
#view-todos td.todo-actions .btn-comment { padding: 3px 7px; min-height: 0; font-size: 12px; }
#view-todos td.todo-actions .btn-comment .material-icons { font-size: 15px; }
#view-todos td .btn-icon { width: 28px; height: 28px; }
#view-todos td .progress-bar { flex: 1; }
#view-todos table th.deadline { width: 130px; }
#view-todos .todo-client { font-weight: 600; color: var(--brand-dark); }
/* eine Zeile je ToDo, voller Text steht im Tooltip */
#view-todos td, #view-todos td.desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Streifen links nur bei überfälligen ToDos (statt Gruppenfarbe) */
#view-todos td.todo-name, #todos-done-table td.todo-name { border-left: 4px solid transparent; }
#view-todos tr.is-overdue td.todo-name { border-left-color: var(--brand-red); }
/* Gleich breite Spalten wie bei monday – nur Name und Beschreibung sind breiter */
#view-todos table th.name:first-child { width: auto; }
#view-todos table th.name.hide { width: 18%; }
#view-todos table th.status,
#view-todos table th.customer,
#view-todos table th.campaign,
#view-todos table th.user,
#view-todos table th.deadline,
#view-todos table th.progress { width: 140px; }
#view-todos table th.icon:nth-last-child(2) { width: 110px; }
#view-todos table th.icon:last-child { width: 48px; }
#view-todos td.todo-center .progress-bar { display: none; }
/* Textspalten (Beschreibung, Kunde / Kampagne) breiter und linksbündig, alle übrigen gleich breit */
#view-todos table th.name.hide { width: 16%; }
#view-todos table th.campaign { width: 16%; text-align: left; }
/* Aktions-Buttons: gleiche Größe, gleiche Abstände, mittig in ihrer Spalte */
#view-todos td.todo-actions, #view-todos td.todo-done { padding: 0 8px; text-align: center; }
#view-todos td.todo-actions > div { display: flex; justify-content: center; align-items: center; gap: 6px; }
#view-todos td.todo-actions .btn-comment { display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    width: 44px; height: 28px; margin: 0; padding: 0; box-sizing: border-box; }
#view-todos td.todo-done .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; }
#view-todos table th.icon:nth-last-child(2) { width: 112px; }
#view-todos table th.icon:last-child { width: 44px; }
#view-todos td.todo-actions .btn-comment, #view-todos td.todo-actions .btn-comment.check-list.none { flex: 0 0 44px; }
#view-todos td.todo-actions .btn-comment.check-list span { margin: 0; }
/* Deadline mit Fortschritt in einer Zelle */
#view-todos table th.deadline { width: 180px; }
#view-todos .todo-rel { color: var(--text-muted); }
#view-todos .todo-rel.is-overdue { color: var(--status-attention-text); font-weight: 600; }
#view-todos .todo-rel.is-soon { color: var(--brand-dark); font-weight: 600; }
/* Erledigen-Button im selben Format wie Kommentar/Checkliste */
#view-todos td.todo-done .todo-done-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; margin: 0; padding: 0; box-sizing: border-box; }
#view-todos td.todo-done .todo-done-btn:hover { background: var(--status-done-bg); color: var(--status-done-text); }
#view-todos td.todo-done .todo-done-btn .material-icons { font-size: 17px; }
#view-todos table th.icon:last-child { width: 60px; }
/* alle drei Aktionen in einer Spalte, gleiche Abstände */
#view-todos table th.icon:last-child { width: 168px; }
#view-todos td.todo-actions .todo-done-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 28px; margin: 0; padding: 0; box-sizing: border-box; }
#view-todos td.todo-actions .todo-done-btn:hover { background: var(--status-done-bg); color: var(--status-done-text); }
#view-todos td.todo-actions .todo-done-btn .material-icons { font-size: 17px; }
#view-todos .todo-done-placeholder { visibility: hidden; }

/* ---------- Kampagnen-Tabelle im ToDo-Stil (gleiche Linien, Status-Zellen, Aktionen) ---------- */
.cl-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.cl-table thead { background: #fff; }
.cl-table th, .cl-table td { border-right: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; }
.cl-table th { padding: 7px 10px; color: #555; text-align: center; border-top: 1px solid #E4E4E4; }
.cl-table th.cl-th-name, .cl-table th.cl-th-text { text-align: left; }
.cl-table th:last-child, .cl-table td:last-child { border-right: 0; }
.cl-table td { padding: 6px 10px; height: 38px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cl-table tbody tr:hover td { background: var(--brand-light); }
.cl-table td.cl-name { border-left: 4px solid transparent; font-weight: 600; }
.cl-table tr.is-overdue td.cl-name { border-left-color: var(--brand-red); }
.cl-table td.cl-name .cd-doc__title { width: auto; }
.cl-table td.todo-center { text-align: center; }
.cl-table .todo-rel { color: var(--text-muted); }
.cl-table .todo-rel.is-overdue { color: var(--status-attention-text); font-weight: 600; }
.cl-table .todo-rel.is-soon { color: var(--brand-dark); font-weight: 600; }
.cl-table .todo-client { font-weight: 600; color: var(--brand-dark); }
/* Mini-Balken für Budget */
.cl-minibar { display: inline-block; width: 36px; height: 6px; margin-right: 6px; border-radius: 3px; background: #E4E4E4; overflow: hidden; vertical-align: middle; }
.cl-minibar > span { display: block; height: 100%; background: var(--brand-dark); }
.cl-minibar.is-over > span { background: var(--brand-red); }
/* Spaltenbreiten: Name breit, Textspalte etwas breiter, Rest gleich */
.cl-table th.cl-th-name { width: auto; }
.cl-table th.cl-th-std { width: 160px; }
.cl-table th.cl-th-text { width: 18%; }
.cl-table th.cl-th-actions { width: 268px; }
/* Aktionen: gleich große Buttons wie bei den ToDos */
.cl-table td.todo-actions { padding: 0 8px; text-align: center; }
.cl-table td.todo-actions > div { display: flex; justify-content: center; align-items: center; gap: 6px; }
.cl-table .cl-act { display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: 0 0 44px; width: 44px; height: 28px; margin: 0; padding: 0; box-sizing: border-box; font-size: 12px; }
.cl-table .cl-act .material-icons { font-size: 16px; margin: 0; }
.cl-table .cl-act--empty { visibility: hidden; }
.cl-table .cl-fav.is-fav .material-icons { color: var(--brand-dark); }
.cl-table .cl-act--delete:hover { background: var(--status-attention-bg); color: var(--status-attention-text); }
.cl-table { width: 100%; }
.cl-table th.cl-th-std { width: 150px; }
.cl-table th.cl-th-std:nth-child(3) { width: 200px; }
.cl-table td.cd-list__progress .cd-mini__step { width: 10px; }
.cl-table td.cd-list__progress .cd-mini__step.is-current { width: 16px; }
.cl-table tr.cl-more td { text-align: center; height: auto; padding: 10px; }
.cl-table th.cl-th-std:nth-child(4) { width: 190px; }
.cl-table th.cl-th-actions--short { width: 120px; }
/* Kampagnen: nur Kommentare + Bearbeiten als Buttons; Favorit und Notiz am Namen */
.cl-table th.cl-th-actions { width: 118px; }
.cl-table th.cl-th-actions--short { width: 68px; }
.cl-name__inner { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cl-name__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cl-inline-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: #B0B0B0; cursor: pointer; }
.cl-inline-icon .material-icons { font-size: 18px; }
.cl-inline-icon:hover { background: #EBEBEB; color: var(--brand-dark); }
.cl-table .cl-fav:not(.is-fav) { opacity: 0; }
.cl-table tr:hover .cl-fav, .cl-table .cl-fav:focus-visible { opacity: 1; }
.cl-table .cl-fav.is-fav { color: var(--brand-dark); }
.cl-table .cl-note { color: #777; }

/* ---------- Kommentare/Notiz/Checkliste direkt hinter dem Namen (wie die Update-Blase bei monday) ---------- */
#view-todos table th.talk, .cl-table th.cl-th-talk { width: 92px; }
#view-todos td.row-talk, .cl-table td.row-talk { padding: 0 6px; }
.row-talk > div { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
.talk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 36px; height: 28px; padding: 0 4px;
    border: 0; border-radius: 4px; background: none; color: #B0B0B0; cursor: pointer; font: 600 11px 'Open Sans', sans-serif; }
.talk-btn .material-icons { font-size: 18px; }
.talk-btn:hover { background: #EBEBEB; color: var(--brand-dark); }
.talk-btn.has-comments { color: var(--brand-royal); }
.talk-btn.check-done { color: var(--status-done-text); }
.talk-btn.check-list:not(.none):not(.check-done) { color: var(--brand-dark); }
.talk-btn.cl-note { color: #777; }
.talk-btn--empty { visibility: hidden; }
.talk-count { font-variant-numeric: tabular-nums; }
/* am Ende nur noch eine Aktion */
#view-todos table th.icon:last-child { width: 64px; }
.cl-table th.cl-th-actions { width: 64px; }
.cl-table th.cl-th-actions--short { width: 0; padding: 0; }
.cl-table th.cl-th-std:nth-child(3), .cl-table th.cl-th-std:nth-child(4) { width: 150px; }
.cl-table th[data-cl-sort="end_date"] { width: 200px; }
.cl-table th[data-cl-sort="spend"] { width: 190px; }
.talk-btn.has-comments .material-icons { color: var(--brand-royal); }
.cl-table th.cl-th-std[data-cl-sort="end_date"] { width: 200px; }
.cl-table th.cl-th-std[data-cl-sort="spend"] { width: 190px; }
/* Icon bleibt an fester Position, egal ob eine Zahl dahinter steht */
.talk-btn { width: 46px; min-width: 46px; justify-content: flex-start; padding: 0 0 0 6px; }
.talk-btn .material-icons { flex: 0 0 18px; }
#view-todos table th.talk, .cl-table th.cl-th-talk { width: 112px; }

/* Status wieder als Pille, mittig in der Spalte */
#view-todos td.todo-status, .cl-table td.todo-status { text-align: center; }
/* Kommentare vorhanden: gefüllte Blase in Markendunkel statt Blau (CI) */
.talk-btn.has-comments, .talk-btn.has-comments .material-icons { color: var(--brand-dark); }

/* ---------- Rechnungen und Jahresplanung im ToDo-/Kampagnen-Stil (.grid-table) ---------- */
.grid-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.grid-table thead { background: #fff; }
.grid-table th, .grid-table td { border-right: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; }
.grid-table th { padding: 7px 10px; color: #555; font-size: 8.5pt; text-align: center; border-top: 1px solid #E4E4E4; }
.grid-table th.gt-name, .grid-table th.gt-text { text-align: left; }
.grid-table th:last-child, .grid-table td:last-child { border-right: 0; }
.grid-table td { padding: 6px 10px; height: 38px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.grid-table tbody tr:hover td { background: var(--brand-light); }
.grid-table td.gt-name-cell { border-left: 4px solid transparent; font-weight: 600; }
.grid-table tr.is-overdue td.gt-name-cell { border-left-color: var(--brand-red); }
.grid-table td.todo-center { text-align: center; }
.grid-table .todo-rel { color: var(--text-muted); font-weight: 400; }
.grid-table .todo-rel.is-overdue { color: var(--status-attention-text); font-weight: 600; }
.grid-table .todo-client { font-weight: 600; color: var(--brand-dark); }
.grid-table .gt-num { font-variant-numeric: tabular-nums; }
.grid-table th.gt-name { width: auto; }
.grid-table th.gt-talk { width: 64px; }
.grid-table th.gt-std { width: 140px; }
.grid-table th.gt-text { width: 18%; }
.grid-table th.gt-text.gt-wide { width: 26%; }
.grid-table th.gt-act { width: 64px; }
.grid-table th.gt-bar { width: 220px; }
.grid-table th.gt-small { width: 110px; }
.grid-table td.row-talk { padding: 0 6px; }
.grid-table td.todo-actions { padding: 0 8px; text-align: center; }
.grid-table td.todo-actions > div { display: flex; justify-content: center; }
.grid-table .cl-act { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; margin: 0; padding: 0; box-sizing: border-box; }
.grid-table .cl-act .material-icons { font-size: 16px; margin: 0; }
/* Jahresplanung: Zahlen rechtsbündig wie bisher, Hinweise klein hinter dem Kundennamen */
.jp-table.grid-table th.jp-num { text-align: right; }
.jp-table.grid-table td { padding-top: 6px; padding-bottom: 6px; }
.jp-table.grid-table .jp-client { font-size: 13px; }
.jp-table.grid-table td.gt-name-cell .jp-flag { margin-left: 6px; font-size: 11px; padding: 1px 7px; }
.jp-table.grid-table tfoot th, .jp-table.grid-table tfoot td { height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.jp-table.grid-table .jp-budget-btn { font-size: 13px; }
.jp-table.grid-table th[data-jp-sort="budget"] { width: 170px; }

/* ---------- Vertikale Spaltentrenner in allen Datentabellen (Ian 02.11.: visual clarity) ---------- */
.main .overflow-x-auto > table:not(.sr-only) th,
.main .overflow-x-auto > table:not(.sr-only) td { border-right: 1px solid #E4E4E4; }
.main .overflow-x-auto > table:not(.sr-only) th:last-child,
.main .overflow-x-auto > table:not(.sr-only) td:last-child,
.main .overflow-x-auto > table:not(.sr-only) td[colspan] { border-right: 0; }

/* Startseite: ToDo-Widget im selben Stil wie die ToDo-Seite */
.start-todo-table th.gt-talk-wide { width: 104px; }
.start-todo-table th.gt-status { width: 120px; }
.start-todo-table th.gt-deadline { width: 160px; }
.start-todo-table th.gt-user { width: 110px; }
.start-todo-table th.gt-act { width: 60px; }
.start-todo-table .talk-btn.check-done { color: var(--status-done-text); }
.start-todo-table .cl-act:hover { background: var(--status-done-bg); color: var(--status-done-text); }
.start-todo-table .todo-rel.is-soon { color: var(--brand-dark); font-weight: 600; }
#view-start .start-todo-table thead { display: table-header-group; }
/* Heute im Blick: Kopf immer zwei Zeilen hoch, damit die Einträge in allen Karten auf gleicher Höhe beginnen */
.today-card__head { align-items: flex-start; min-height: calc(2 * 1.3 * 14px); }
.today-card__title { line-height: 1.3; }
.today-card__head .material-icons, .today-card__head .start-badge { margin-top: 1px; }
.today-empty { margin: 0; padding: 6px 0 0; font-size: 13px; line-height: normal; }

/* ---------- Kein roter Fließtext (Ian 02.11.): Text dunkel, Rot nur für Betrag, Icon oder Markierung ---------- */
.budget-card__note--over { color: var(--brand-dark); }
.budget-card__note--over strong { color: var(--brand-red); }
.cd-budget-warn { color: var(--brand-dark); background: var(--brand-light); border-left: 3px solid var(--brand-red); border-radius: 0 6px 6px 0; }
.cd-budget-warn .material-icons { color: var(--brand-red); }
.cd-budget-warn.is-slow { border-left-color: #BDBDBD; }
.cd-budget-warn.is-slow .material-icons { color: var(--brand-charcoal); }
.chat-msg-error .chat-bubble { color: var(--brand-dark); border-left: 3px solid var(--brand-red); }
/* Kopfleiste schmaler (Ian 02.11.) */
.topbar { padding: .45rem 2rem .45rem 1rem; min-height: 52px; box-sizing: border-box; }
.topbar-title { font-size: 1.2rem; }
.topbar-meta { padding-top: 0; }
.topbar #logout { padding: .45rem .7rem; }
.topbar .topbar-icons { gap: 1.5rem; }
.topbar #logout { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 .6rem; box-sizing: border-box; }
.topbar #logout span { font-size: 16px; }