/* ============================================================
   Designsprache (#215) - die Formsprache der Zentrale (#214) fuer
   die ganze App. Wird NACH site.css geladen und hebt die gemeinsamen
   Bausteine an: Tafel/Karte, Tabelle, Formular, Knoepfe, Reiter,
   Popup, Menue. Funktion aendert sich nirgends, nur das Aussehen.

   Regeln (siehe DESIGN.md):
   - Arbeitsflaechen sind helle Tafeln: Weiss, 1px Linie, grosse
     Rundung, ein weicher, tiefer Schatten statt harter Kanten.
   - Zahlen in Geist Mono. Betraege rechtsbuendig.
   - Farbe nur mit Bedeutung: Petrol = Struktur und Bestaetigen,
     Glut-Orange = die eine Hauptaktion einer Seite ("Neu", "Projekt
     erstellen"), Gruen = Geld (nur Zentrale/Summen), ox = Frist.
   - Keine Deko-Verlaeufe auf Arbeitsflaechen. Verlaeufe nur dort, wo
     sie Licht spielen: Knoepfe, Kopf-Icons, Fortschritt.
   ============================================================ */

:root {
    --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --glut: #FF7A2F;
    --gold: #FFB547;
    --ink: #0A2225;

    --radius: 14px;
    --radius-lg: 20px;

    /* Tafel: kaum Kante, tiefer weicher Schatten - liegt auf dem Papier statt darin. */
    --shadow-panel: 0 1px 2px rgba(18, 62, 67, .04), 0 22px 44px -32px rgba(18, 62, 67, .34);
    /* Schwebend: Menues, Popups. */
    --shadow-float: 0 2px 6px rgba(18, 62, 67, .06), 0 28px 64px -24px rgba(10, 34, 37, .42);
    --ring: 0 0 0 4px rgba(18, 62, 67, .10);
}

/* ---------- Typografie ---------- */
.content h1 { font-weight: 650; letter-spacing: -.02em; }
.content h2 { letter-spacing: -.01em; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 26px; line-height: 1.15; }
.page-head .subtitle { color: var(--t2); font-size: 14px; margin-top: 4px; }
/* Mono nur fuer Kennungen (Nummern), nicht fuer Betraege - die bleiben in Geist mit festen Ziffern. */
.cell-nr, .cell-sub, .pd-number, .todo-nr { font-family: var(--mono); letter-spacing: -.01em; }
.cell-amt { font-weight: 600; }

/* ---------- Tafeln ---------- */
.data-card, .card, .surface, .surface-pad, .settings-window, .dash-card {
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel); background: var(--white);
}
.data-card { overflow: hidden; }
.data-card.white { overflow-x: auto; }
.settings-window { border-radius: 22px; }
.settings-window-head { padding: 20px 26px; border-bottom-color: var(--rule2); }
.settings-window-head h1 { font-size: 20px; letter-spacing: -.015em; }
.settings-window-icon, .po-sec-icon {
    border-radius: 13px; color: var(--ink);
    background: linear-gradient(140deg, var(--glut), var(--gold));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -8px rgba(255, 122, 47, .7);
}
.settings-window-foot { border-top-color: var(--rule2); background: linear-gradient(180deg, var(--white), #FBFBF9); }

/* ---------- Tabellen ---------- */
.table { font-size: 14.5px; }
.table thead th, .data-card.white .table thead th {
    background: transparent; color: var(--t3);
    font-size: 11px; font-weight: 600; letter-spacing: .09em;
    border-bottom: 1px solid var(--rule2); padding-block: 12px;
}
.table tbody td { padding-block: 12px; border-bottom-color: var(--rule2); }
.table-hover tbody tr, .data-card.white .table tbody tr { transition: background .12s ease; }
/* Hover auf der ganzen Zeile, nicht je Zelle: Bootstrap faerbt sonst jede Zelle per
   Schatten ein, und die Glut-Kante der ersten Zelle stach als heller Fleck heraus. */
.table { --bs-table-hover-bg: transparent; --bs-table-hover-color: var(--t1); }
.table-hover > tbody > tr:hover, .data-card.white .table-hover > tbody > tr:hover { background: rgba(18, 62, 67, .03); }
.table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--glut); }
[dir="rtl"] .table-hover tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--glut); }
.th-sort.on i { color: var(--glut); }

/* ---------- Knoepfe ---------- */
.btn {
    font-weight: 500; border-radius: 11px;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:focus-visible { box-shadow: var(--ring) !important; }
.btn-primary {
    background: linear-gradient(180deg, #18545B, var(--t1)); border-color: var(--t1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgba(18, 62, 67, .75) !important;
}
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #1B5E66, #154A50); border-color: var(--t1); }
.btn-primary:active { transform: translateY(1px) !important; }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-light, .btn-white, .btn-icon {
    background: var(--white); border-color: var(--rule);
    box-shadow: 0 1px 2px rgba(18, 62, 67, .06) !important;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-danger:hover, .btn-light:hover, .btn-white:hover, .btn-icon:hover {
    background: var(--white); border-color: rgba(18, 62, 67, .28); color: var(--t1);
    box-shadow: 0 6px 14px -8px rgba(18, 62, 67, .35) !important;
}
/* Die eine Hauptaktion einer Seite: "Neu" im Seitenkopf - Glut wie in der Zentrale. */
.page-head .btn-primary, .page-head-actions .btn-primary, .pd-head-actions .btn-primary {
    color: var(--ink); border-color: transparent; font-weight: 600;
    background: linear-gradient(135deg, var(--glut), var(--gold));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(255, 122, 47, .75) !important;
}
.page-head .btn-primary:hover, .page-head-actions .btn-primary:hover, .pd-head-actions .btn-primary:hover {
    color: var(--ink); background: linear-gradient(135deg, #FF8A45, #FFC56A); transform: translateY(-1px) !important;
}
/* "Weiter" in der Belegmaske (#305): solange noch eine Unterseite kommt, ist das die
   Hauptaktion des Popups - Glut wie die Nummer der aktiven Unterseite links. */
.btn-dark.btn-next {
    color: var(--ink); border-color: transparent; font-weight: 600;
    background: linear-gradient(135deg, var(--glut), var(--gold));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(255, 122, 47, .75);
    transition: transform .15s ease, background .15s ease;
}
.btn-dark.btn-next:hover { color: var(--ink); background: linear-gradient(135deg, #FF8A45, #FFC56A); transform: translateY(-1px); }
.btn-next .btn-next-step { font-weight: 500; opacity: .72; }
.btn-next .btn-next-step::before { content: "· "; }

/* ---------- Filterpillen und Suche ---------- */
.filter-pill { background: var(--white); border-color: var(--rule); box-shadow: 0 1px 2px rgba(18, 62, 67, .05); }
.filter-pill:hover { background: var(--white); border-color: rgba(18, 62, 67, .3); }
.filter-pill.on {
    background: linear-gradient(180deg, #18545B, var(--t1)); border-color: var(--t1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -8px rgba(18, 62, 67, .7);
}
.filter-pill .n { font-family: var(--mono); }
.list-search .form-control { border-radius: 999px; box-shadow: 0 1px 2px rgba(18, 62, 67, .05); }

/* ---------- Formulare ---------- */
.form-label {
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--t3); margin-bottom: 6px;
}
.form-control, .form-select, .rz-kontakt-select.rz-dropdown {
    background-color: var(--white); border-color: var(--rule); border-radius: 11px;
    box-shadow: inset 0 1px 2px rgba(18, 62, 67, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover { border-color: rgba(18, 62, 67, .28); }
.form-control:focus, .form-select:focus, .rz-kontakt-select.rz-dropdown.rz-state-focused {
    border-color: var(--t1); box-shadow: var(--ring);
}
.form-check-input { border-color: rgba(18, 62, 67, .3); }
.form-check-input:checked { background-color: var(--t1); }
.form-section-title { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin: 14px 0 10px; }

/* Unterseiten-Leiste (Popups, Einstellungen, Endbericht): aktive Seite als weisse Kachel. */
.form-steps { border-inline-end-color: var(--rule2); }
.form-step { border-radius: 12px; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.form-step:hover { background: rgba(18, 62, 67, .04); }
.form-step.on { background: var(--white); color: var(--t1); box-shadow: 0 1px 2px rgba(18, 62, 67, .06), 0 10px 22px -14px rgba(18, 62, 67, .45); }
.form-step .num { background: rgba(18, 62, 67, .07); }
.form-step.on .num { background: linear-gradient(140deg, var(--glut), var(--gold)); color: var(--ink); box-shadow: 0 4px 12px -4px rgba(255, 122, 47, .7); }
.form-step .n { font-family: var(--mono); }

/* ---------- Reiter: Segmente statt Unterstrich ---------- */
.pd-tabs, .tabs {
    display: inline-flex; max-width: 100%; gap: 2px; padding: 4px;
    border: 0; border-radius: 14px; background: rgba(18, 62, 67, .055);
}
.pd-tab, .tab {
    border: 0; margin: 0; min-height: 0; padding: 8px 14px; border-radius: 10px;
    font-size: 14px; color: var(--t2); transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pd-tab:hover, .tab:hover { color: var(--t1); background: rgba(255, 255, 255, .55); }
.pd-tab.active, .pd-tab.on, .tab.active {
    color: var(--t1); background: var(--white);
    box-shadow: 0 1px 2px rgba(18, 62, 67, .08), 0 6px 14px -8px rgba(18, 62, 67, .4);
}
.seg-switch { border-radius: 12px; }

/* ---------- Popups ---------- */
.dlg-backdrop, .modal-backdrop.show { background: rgba(10, 34, 37, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-backdrop.show { opacity: 1; }
.dlg, .modal-content {
    border: 1px solid rgba(18, 62, 67, .08); border-radius: 22px;
    box-shadow: var(--shadow-float); background: var(--white);
}
.dlg-head, .modal-header { padding: 20px 26px 14px; border-bottom: 1px solid var(--rule2); }
.dlg-head h2, .modal-title { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.dlg-body { padding: 20px 26px 10px; }
.modal-body { padding: 20px 26px; }
.dlg-foot, .modal-footer { padding: 14px 26px 18px; border-top: 1px solid var(--rule2); background: linear-gradient(180deg, var(--white), #FBFBF9); border-radius: 0 0 22px 22px; }
.dlg-x { border-radius: 11px; }

/* ---------- Menues, Hinweise ---------- */
.dropdown-menu {
    border: 1px solid rgba(18, 62, 67, .08); border-radius: 16px; padding: 6px;
    box-shadow: var(--shadow-float);
}
.dropdown-item { border-radius: 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(18, 62, 67, .055); }
.dropdown-item > .bi { color: var(--t3); margin-inline-end: 4px; }
.dropdown-divider { border-color: var(--rule2); margin: 4px 6px; }
.alert { border-radius: 14px; border-color: var(--rule); box-shadow: var(--shadow-panel); }
.alert-danger { border-inline-start-color: var(--ox); }
.alert-success { border-inline-start-color: #0E9F6E; }

/* Sidebar: aktiver Punkt als Kachel mit Glut-Kante. */
.sidebar-link { border-radius: 11px; }
.sidebar-link.active { background: var(--white); box-shadow: 0 1px 2px rgba(18, 62, 67, .06), 0 10px 22px -16px rgba(18, 62, 67, .5); }

/* Duenne Scrollleisten ueberall. */
* { scrollbar-width: thin; scrollbar-color: rgba(18, 62, 67, .18) transparent; }

    min-width: 0; padding: 16px 18px; border-radius: var(--radius-lg);
    background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-panel);
}

/* ---------- Projektansicht (#215) ---------- */
.pd-name { font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
/* Eckdaten, Kennzahlen und Abschnitte bleiben ohne Kasten (#215) - sie stehen
   direkt auf dem Papier, die Typografie traegt: kleine Versalien-Beschriftung,
   kraeftiger Wert, feine Linien dazwischen. */
.pd-fact span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pd-tabs { margin-bottom: 12px; }
.po-kpi { border-radius: 12px; transition: background .15s ease; }
.po-kpi:hover { background: rgba(18, 62, 67, .035); }
.po-kpi:hover .po-kpi-name { text-decoration: underline; text-decoration-color: var(--glut); text-underline-offset: 4px; }
.po-sec-head h3 { font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.po-row { border-top-color: var(--rule2); }

/* ---------- Boards (Projekte, Aufgaben) ---------- */
.board-col { background: rgba(18, 62, 67, .035); border: 1px solid transparent; border-radius: var(--radius-lg); }
.board-col.drop { background: rgba(255, 122, 47, .07); border-color: rgba(255, 122, 47, .45); }
.board-col-head b { font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.board-col-head .todo-count { font-family: var(--mono); background: var(--white); padding: 1px 8px; border-radius: 999px; box-shadow: 0 1px 2px rgba(18, 62, 67, .06); }
.board-cards { gap: 8px; }
.board-card {
    border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
    box-shadow: 0 1px 2px rgba(18, 62, 67, .05), 0 12px 24px -20px rgba(18, 62, 67, .45);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.board-card:hover { border-color: rgba(18, 62, 67, .2); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(18, 62, 67, .05), 0 20px 34px -22px rgba(18, 62, 67, .55); }
.pj-card-name { display: flex; align-items: center; gap: 10px; }
.pj-card-name .pj-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; flex-shrink: 0; }
.pj-card-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------- Belegansicht (#215) ----------
   Der Beleg ist ein Dokument - also EIN Blatt: Einleitung, Positionen und
   Summen (unten rechts, wie auf jeder Rechnung) liegen gemeinsam darauf, und
   das Blatt ist nur so hoch wie sein Inhalt. Rechts daneben stehen Kunde,
   Verlauf und Todos ohne Kasten direkt auf dem Papier, durch feine Linien
   getrennt. Alles passt auf einen Bildschirm; viele Positionen scrollen im Blatt. */
.doc-head { margin-bottom: 18px !important; }
.doc-head h1 { font-size: 26px; line-height: 1.15; margin-bottom: 4px !important; }
.doc-head .text-muted { color: var(--t2) !important; font-size: 14px; }
.doc-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start;
    height: calc(100vh - var(--nav-h) - 196px); min-height: 420px;
}
.doc-main {
    grid-column: 1; grid-row: 1; max-height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
    box-shadow: var(--shadow-panel); overflow: hidden;
}
.doc-note { flex: none; margin: 0; padding: 20px 26px 4px; color: var(--t2); font-size: 14.5px; }
/* Die Tabelle ist Teil des Blatts, keine Karte in der Karte. */
.doc-main .doc-positions { flex: 1 1 auto; min-height: 0; overflow: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.doc-positions .table thead th { position: sticky; top: 0; z-index: 1; background: var(--white); }
.doc-positions .table thead th:first-child, .doc-positions .table tbody td:first-child { padding-inline-start: 26px; }
.doc-positions .table thead th:last-child, .doc-positions .table tbody td:last-child { padding-inline-end: 26px; }
.doc-positions .table tbody tr:last-child td { border-bottom: 1px solid var(--rule2); }
.doc-positions .pos-co-row td { background: transparent; color: #A24A12; font-weight: 600; font-size: 12.5px; letter-spacing: .02em; padding-top: 16px; border-bottom-color: rgba(255, 122, 47, .25); }
.doc-positions .pos-co-row .bi { color: var(--glut); margin-inline-end: 4px; }
.doc-main .doc-photos { flex: none; padding: 4px 26px 0; }
.doc-main > .form-section-title { padding-inline: 26px; }
/* Fuss des Blatts: Schlusstext links, Summen rechts wie auf der Rechnung. */
.doc-foot { flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 18px 26px 22px; }
.doc-foot-note { min-width: 0; max-width: 46ch; color: var(--t2); font-size: 13.5px; }
.doc-foot-note p { margin: 0; }
.doc-totals { width: 300px; flex-shrink: 0; }
.doc-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 14px; color: var(--t2); }
.doc-total-row .text-money { color: var(--t1); font-weight: 500; }
.doc-total-sum { margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--t1); color: var(--t1); font-weight: 650; }
.doc-total-sum .text-money { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.doc-total-margin { margin-top: 6px; font-size: 12.5px; color: var(--t3); }
.doc-total-margin .margin-positive { color: #0E9F6E; font-weight: 600; }
.doc-total-margin .margin-negative { color: var(--ox); font-weight: 600; }

/* Rechte Spalte: Abschnitte auf dem Papier statt Kaesten. */
.doc-side { grid-column: 2; grid-row: 1; max-height: 100%; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.doc-tile-cell + .doc-tile-cell { border-top: 1px solid var(--rule); }
.doc-tile { padding: 4px 0 18px; font-size: 14px; color: var(--t1); height: auto !important; }
.doc-tile-cell + .doc-tile-cell .doc-tile { padding-top: 16px; }
.doc-tile-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.doc-tile-label .bi { color: var(--glut); font-size: 12px; }
.doc-tile .doc-name { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 2px; }
.doc-tile .text-muted { color: var(--t2) !important; }
.doc-tile hr { margin: 10px 0; border-color: var(--rule2); opacity: 1; }
.doc-tile a { color: var(--t1); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(18, 62, 67, .25); text-underline-offset: 3px; }
.doc-tile a:hover { text-decoration-color: var(--glut); }
.doc-tile .row-item.todo-mini { margin: 0 -8px; padding: 7px 8px; border-color: var(--rule2); flex-direction: column; gap: 2px; border-radius: 10px; }
.doc-tile .row-item.todo-mini:last-child { border-bottom: 0; }
.doc-tile .row-item.todo-mini:hover { background: rgba(18, 62, 67, .04); }

@media (max-width: 1100px) {
    .doc-layout { grid-template-columns: 1fr; height: auto; gap: 20px; }
    .doc-main, .doc-side { grid-column: 1; grid-row: auto; max-height: none; }
    .doc-foot { flex-wrap: wrap; }
    .doc-totals { width: 100%; }
}

/* ---------- Seitenleiste in Nacht-Petrol (#215, Vorschau) ----------
   Ueber die volle Hoehe: das Logo-Feld der Kopfleiste und die Sidebar teilen
   denselben, am Fenster festgemachten Verlauf (background-attachment: fixed) -
   so laufen sie ohne Kante ineinander. Die Kopfleiste rechts bleibt hell. */
.topnav-brand, .sidebar {
    background: linear-gradient(180deg, #164C52 0%, #0F3539 48%, #0A2225 100%) fixed;
}
.topnav-brand-logo { filter: brightness(0) invert(1); opacity: .95; }
.app-divider { display: none; }
.sidebar { color: rgba(234, 244, 242, .72); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04); }
.sidebar-link, .sidebar-group { color: rgba(234, 244, 242, .72); }
.sidebar-link i { color: rgba(234, 244, 242, .45); }
.sidebar-link:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
.sidebar-link:hover i { color: rgba(234, 244, 242, .8); }
.sidebar-link.active {
    color: #FFFFFF; font-weight: 600; border-inline-start-color: var(--glut);
    background: linear-gradient(90deg, rgba(255, 122, 47, .22), rgba(255, 122, 47, .04));
    box-shadow: none;
}
.sidebar-link.active i { color: var(--glut); filter: drop-shadow(0 0 6px rgba(255, 122, 47, .6)); }
.sidebar-sub { border-inline-start-color: rgba(255, 255, 255, .1); }
.sidebar-divider { background: linear-gradient(to right, transparent, rgba(255, 255, 255, .14) 20%, rgba(255, 255, 255, .14) 80%, transparent); height: 1px; }
.sidebar-tenant { border-top-color: rgba(255, 255, 255, .08); }
.sidebar-tenant-name { color: rgba(234, 244, 242, .7); }
.sidebar-tenant .topnav-logo { background: linear-gradient(140deg, var(--glut), var(--gold)); color: var(--ink); }
.sidebar * { scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.topnav-burger { color: var(--t1); }
/* Am Handy ist die Sidebar eine Schublade - die Kopfleiste bleibt dort ganz hell. */
@media (max-width: 960px) {
    .topnav-brand { background: none; }
    .topnav-brand-logo { filter: none; opacity: 1; }
}

/* ---------- Rote Filterpille (#299) ----------
   Genau die Belege, die in der Navigation den roten Punkt ausloesen. Eigene
   Regeln nach .filter-pill.on, damit der Petrol-Verlauf sie nicht uebermalt. */
.filter-pill.alert { color: var(--ox); border-color: rgba(164, 54, 42, .45); background: var(--ox-soft); box-shadow: none; }
.filter-pill.alert::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #FF3B3B; box-shadow: 0 0 6px rgba(255, 59, 59, .7);
}
.filter-pill.alert:hover { background: var(--ox-soft); border-color: var(--ox); }
.filter-pill.alert.on {
    color: var(--white); background: linear-gradient(180deg, #C0443A, var(--ox)); border-color: var(--ox);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -8px rgba(164, 54, 42, .7);
}
.filter-pill.alert.on::before { background: var(--white); box-shadow: none; }


/* ---------- Zaehler (#299): ein schlichter roter Kreis um die Zahl ---------- */
.count-dot {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #E5322D; color: var(--white);
    font: 700 10.5px var(--mono); font-variant-numeric: tabular-nums; line-height: 1;
}

/* ---------- "Mail"-Knopf der Topbar (#299): genau wie "Projekt erstellen" ---------- */
.topnav-mail {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 16px; border-radius: var(--radius-sm); text-decoration: none;
    color: var(--white); font: 600 14.5px var(--font); line-height: 1; border: 0;
    background: linear-gradient(180deg, #18545B, var(--t1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: background .15s ease, border-color .15s ease;
}
.topnav-mail:hover, .topnav-mail.active { color: var(--white); background: linear-gradient(180deg, #1B5E66, #154A50); }
.topnav-mail i { font-size: 16px; }
.topnav-mail .count-dot { position: absolute; top: -6px; inset-inline-end: -6px; }
@media (max-width: 720px) { .topnav-mail span:not(.count-dot) { display: none; } .topnav-mail { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .topnav-mail { transition: none; } }

/* =====================================================================
   Postfach (#300) - aufgeraeumt wie iCloud Mail, im Richtfest-Look:
   Liste links mit Avataren und Ungelesen-Punkt in Glut, rechts die Mail.
   Ordner und Filter stecken in kleinen Menues, nichts stapelt sich.
   ===================================================================== */
.mx {
    display: grid; grid-template-columns: 372px minmax(0, 1fr); min-height: 0;
    background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel); overflow: hidden;
}
.mx-page { height: calc(100vh - var(--nav-h) - 150px); min-height: 480px; }
.mx-embedded { height: calc(100vh - var(--nav-h) - 300px); min-height: 420px; }
.mx-spacer { flex: 1; }

/* ---- Liste ---- */
.mx-list { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--rule2); background: var(--white); }
.mx-list-head { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.mx-title-row, .mx-search-row { display: flex; align-items: center; gap: 8px; }
.mx-title { margin: 0; font: 700 20px var(--font); color: var(--t1); }
.mx-count { font: 500 13px var(--mono); color: var(--t3); }
.mx-folder {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 0; border: 0; background: transparent;
    font: 700 20px var(--font); color: var(--t1); cursor: pointer; border-radius: var(--radius-xs);
}
.mx-folder i { font-size: 12px; color: var(--t3); }
.mx-folder:hover i { color: var(--t1); }
.mx-icon-btn {
    position: relative; width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--t2); font-size: 17px; cursor: pointer;
}
.mx-icon-btn:hover { background: var(--t1-soft); color: var(--t1); }
.mx-icon-btn.active { color: var(--glut); background: var(--accent-orange-soft); }
.mx-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.mx-search i { position: absolute; inset-inline-start: 11px; color: var(--t3); font-size: 14px; pointer-events: none; }
.mx-search input {
    width: 100%; height: 36px; padding: 0 12px 0 34px; border: 0; border-radius: var(--radius-sm);
    background: rgba(18, 62, 67, .06); color: var(--t1); font: 400 14.5px var(--font); outline: none;
    transition: background .12s ease, box-shadow .12s ease;
}
.mx-search input::placeholder { color: var(--t3); }
.mx-search input:focus { background: var(--white); box-shadow: 0 0 0 2px rgba(18, 62, 67, .22); }

/* Menues (Ordner, Filter) */
.mx-menu-wrap { position: relative; }
.mx-menu {
    position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline-start: 0; min-width: 210px; padding: 5px;
    background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-float);
    animation: menu-in .14s cubic-bezier(.2, .8, .2, 1) both;
}
.mx-menu-end { inset-inline-start: auto; inset-inline-end: 0; }
.mx-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-xs);
    background: transparent; color: var(--t1); font: 500 14.5px var(--font); text-align: start; cursor: pointer;
}
.mx-menu-item:hover { background: var(--t1-soft); }
.mx-menu-item > .bi:first-child { color: var(--t2); width: 18px; text-align: center; }
.mx-menu-n { margin-inline-start: auto; font: 500 12.5px var(--mono); color: var(--t3); }
.mx-menu-check { margin-inline-start: auto; color: var(--glut); }
.mx-menu-n + .mx-menu-check { margin-inline-start: 8px; }
.mx-backdrop { position: fixed; inset: 0; z-index: 30; border: 0; background: transparent; cursor: default; }

/* Zeilen */
.mx-items { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 12px; }
.mx-row {
    position: relative; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 11px 18px;
    border: 0; border-radius: var(--radius); background: transparent; text-align: start; cursor: pointer; color: var(--t1);
}
.mx-row + .mx-row::before { content: ""; position: absolute; top: 0; inset-inline: 66px 10px; height: 1px; background: var(--rule2); }
.mx-row:hover { background: rgba(18, 62, 67, .045); }
.mx-row.on { background: linear-gradient(135deg, rgba(255, 122, 47, .16), rgba(255, 181, 71, .12)); }
.mx-row.on::before, .mx-row.on + .mx-row::before { opacity: 0; }
.mx-unread-dot {
    position: absolute; inset-inline-start: 6px; top: 24px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--glut); opacity: 0; transform: scale(.4); transition: opacity .12s ease, transform .12s ease;
}
.mx-row.unread .mx-unread-dot { opacity: 1; transform: none; }
.mx-row .avatar { flex-shrink: 0; margin-top: 1px; }
.mx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-row-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mx-from { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 15px var(--font); }
.mx-row.unread .mx-from { font-weight: 700; }
.mx-clip { font-size: 12px; color: var(--t3); flex-shrink: 0; }
.mx-time { font: 400 12.5px var(--mono); color: var(--t3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mx-subject { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 14px var(--font); color: var(--t1); }
.mx-row.unread .mx-subject { font-weight: 600; }
.mx-preview {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13.5px; line-height: 1.4; color: var(--t2);
}
.mx-refs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.mx-ref { font: 500 11.5px var(--mono); color: var(--t2); background: rgba(18, 62, 67, .06); border-radius: var(--radius-xs); padding: 1px 6px; }
.mx-empty { font-size: 14px; color: var(--t3); text-align: center; margin: 32px 12px; }

/* ---- Lesebereich ---- */
.mx-read { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--white); }
.mx-read-bar { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--rule2); }
.mx-bar-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--t1); font: 500 14px var(--font); text-decoration: none; cursor: pointer;
}
.mx-bar-btn:hover { background: var(--t1-soft); color: var(--t1); }
.mx-bar-btn i { font-size: 16px; color: var(--t2); }
.mx-read-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.mx-msg { max-width: 820px; margin: 0 auto; padding: 26px 40px 40px; display: flex; flex-direction: column; gap: 16px; }
.mx-msg-subject { margin: 0; font: 700 24px/1.25 var(--font); color: var(--t1); text-wrap: balance; }
.mx-msg-head { display: flex; align-items: flex-start; gap: 12px; }
.mx-msg-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mx-msg-from { font-size: 15px; overflow-wrap: anywhere; }
.mx-msg-from b { font-weight: 600; }
.mx-msg-from span, .mx-msg-to { color: var(--t2); font-size: 13.5px; }
.mx-msg-to { overflow-wrap: anywhere; }
.mx-msg-date { font: 400 12.5px var(--mono); color: var(--t3); white-space: nowrap; padding-top: 3px; }
.mx-chips, .mx-files { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
    background: rgba(18, 62, 67, .06); color: var(--t1); font: 500 13px var(--font); text-decoration: none;
}
.mx-chip.link:hover { background: rgba(18, 62, 67, .12); color: var(--t1); }
.mx-chip i { color: var(--t2); }
.mx-file {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 14px 0 12px;
    border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--white); color: var(--t1); text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.mx-file:hover { color: var(--t1); border-color: rgba(18, 62, 67, .3); box-shadow: 0 6px 14px -10px rgba(18, 62, 67, .4); }
.mx-file i { font-size: 18px; color: var(--glut); }
.mx-file-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.mx-file-size { font: 400 12px var(--mono); color: var(--t3); flex-shrink: 0; }
.mx-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: var(--t1); padding-top: 4px; }

.mx-reply {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; margin-top: 8px; border: 1px solid var(--rule);
    border-radius: var(--radius); background: var(--white); color: var(--t3); font: 400 14.5px var(--font); text-align: start; cursor: text;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.mx-reply:hover { border-color: rgba(18, 62, 67, .3); box-shadow: 0 6px 16px -12px rgba(18, 62, 67, .4); }
.mx-reply.open { flex-direction: column; align-items: stretch; gap: 10px; cursor: default; color: var(--t1); box-shadow: var(--shadow-panel); }
.mx-reply-to { font-size: 13px; color: var(--t2); }
.mx-reply-text { width: 100%; border: 0; outline: none; resize: vertical; min-height: 120px; font: 400 15px/1.55 var(--font); color: var(--t1); background: transparent; }
.mx-reply-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mx-note { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.mx-note.ok { background: rgba(18, 62, 67, .07); color: var(--t1); }
.mx-note.error { background: var(--ox-soft); color: var(--ox); }

.mx-blank { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--t2); text-align: center; padding: 40px; }
.mx-blank-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-orange-soft); color: var(--glut); font-size: 28px; }
.mx-blank b { font-weight: 500; font-size: 16px; }
.mx-blank-sub { font-size: 13.5px; color: var(--t3); max-width: 340px; }

/* ---- Neue Mail ---- */
.mx-compose { display: flex; flex-direction: column; gap: 10px; }
.mx-compose-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin: 0; }
.mx-compose-row span { font-size: 13.5px; color: var(--t2); }
.mx-compose-body { min-height: 260px; resize: vertical; }

@media (max-width: 860px) {
    .mx, .mx-page, .mx-embedded { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .mx-list { max-height: 420px; border-inline-end: 0; border-bottom: 1px solid var(--rule2); }
    .mx-msg { padding: 20px 18px 28px; }
}
@media (prefers-reduced-motion: reduce) { .mx-menu { animation: none; } .mx-unread-dot { transition: none; } }

/* ---- Postfach ohne Rahmen (#300): fuellt die ganze Seite, kein Fenster im Fenster ---- */
.content:has(.mx-page) { padding: 0; max-width: none; overflow: hidden; }
.mx-page { height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--white); }
.mx-new {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: var(--radius-sm);
    color: var(--ink); font: 600 14px var(--font); line-height: 1; cursor: pointer;
    background: linear-gradient(135deg, var(--glut), var(--gold));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(255, 122, 47, .75);
    transition: transform .15s ease;
}
.mx-new:hover { background: linear-gradient(135deg, #FF8A45, #FFC56A); transform: translateY(-1px); }
.mx-new i { font-size: 15px; }
.mx-menu-label { padding: 8px 10px 6px; font-size: 12.5px; color: var(--t3); overflow-wrap: anywhere; border-bottom: 1px solid var(--rule2); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .mx-new { transition: none; } .mx-new:hover { transform: none; } }

/* ---- Schwebende Rueckmeldung (#300): schiebt nichts, verschwindet von selbst ---- */
.float-note {
    position: fixed; z-index: 90; top: calc(var(--nav-h) + 14px); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 11px 12px 11px 16px;
    border-radius: 999px; background: var(--t1); color: var(--white); font: 500 14.5px var(--font);
    box-shadow: var(--shadow-float); animation: float-note-in .22s cubic-bezier(.2, .8, .2, 1) both;
}
.float-note > i { font-size: 17px; color: var(--gold); flex-shrink: 0; }
.float-note.error { background: var(--ox); }
.float-note.error > i { color: var(--white); }
.float-note-x { border: 0; background: transparent; color: rgba(255, 255, 255, .7); width: 24px; height: 24px; border-radius: 50%; font-size: 11px; cursor: pointer; flex-shrink: 0; }
.float-note-x:hover { background: rgba(255, 255, 255, .16); color: var(--white); }
@keyframes float-note-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .float-note { animation: none; } }

/* ---- Beleg-Pille im Projekt-Reiter (#302): Betrag bricht nie um, der Titel kuerzt zuerst ---- */
.filter-pill.pb-doc-pill { max-width: min(420px, 100%); gap: 10px; padding: 0 16px; }
.pb-doc-pill .pb-doc-name { flex: 1 1 auto; }
.pb-doc-pill .n { flex: 0 0 auto; white-space: nowrap; font-size: 13px; opacity: .8; padding-inline-start: 10px; border-inline-start: 1px solid currentColor; line-height: 1.1; }
.filter-pill.on.pb-doc-pill .n { opacity: .9; }

/* ---- Erweiterte Suche und Suchordner (#301) ---- */
.mx-menu-sep { height: 1px; background: var(--rule2); margin: 5px 4px; }
.mx-menu-line { position: relative; display: flex; align-items: center; }
.mx-menu-line .mx-menu-item { flex: 1; min-width: 0; }
.mx-menu-edit {
    position: absolute; inset-inline-end: 34px; width: 26px; height: 26px; display: grid; place-items: center;
    border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--t3); font-size: 12px; cursor: pointer; opacity: 0;
}
.mx-menu-line:hover .mx-menu-edit, .mx-menu-edit:focus-visible { opacity: 1; }
.mx-menu-edit:hover { background: var(--t1-soft); color: var(--t1); }
.mx-menu-new { color: var(--t2); }
.mx-menu-item.on { font-weight: 600; }

.mx-summary { display: flex; align-items: center; gap: 4px; padding: 7px 4px 7px 10px; border-radius: var(--radius-sm); background: var(--accent-orange-soft); }
.mx-summary-text {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent;
    color: var(--t1); font: 500 13px var(--font); text-align: start; cursor: pointer;
}
.mx-summary-text i { color: var(--glut); flex-shrink: 0; }
.mx-summary-text span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-summary-btn { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--t2); font-size: 13px; cursor: pointer; }
.mx-summary-btn:hover { background: rgba(255, 255, 255, .7); color: var(--t1); }


/* ---- Erweiterte Suche im Einstellungen-Aufbau (#301): Unterseiten links, Inhalt rechts ---- */
.mx-rule-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
.mx-rule-layout .form-pane { height: min(58vh, 560px); overflow-y: auto; padding-inline-end: 6px; }
.mx-rule-layout .form-step { position: relative; }
.mx-step-n {
    margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--accent-orange-soft); color: var(--glut); font: 700 11.5px var(--mono);
}
.form-step.on .mx-step-n { background: var(--white); }
.mx-rule-name { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mx-rule-name .form-control { height: 44px; font-size: 16px; font-weight: 600; }

/* Ein Feld mit drei Gruppen */
.mx-terms { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px 10px; margin-bottom: 14px; background: var(--white); }
.mx-terms-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mx-terms-head > i { color: var(--t2); font-size: 15px; }
.mx-terms-title { font: 600 15px var(--font); color: var(--t1); }
.mx-terms-n { font: 600 12px var(--mono); color: var(--t3); }
.mx-group { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: start; gap: 10px; padding: 5px 0; }
.mx-group + .mx-group { border-top: 1px dashed var(--rule2); }
.mx-group-label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; font: 500 13.5px var(--font); color: var(--t2); }
.mx-group-all .mx-group-label i { color: var(--t1); }
.mx-group-any .mx-group-label i { color: var(--glut); }
.mx-group-none .mx-group-label i { color: var(--ox); }
.mx-chipbox {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 6px; margin: 0;
    border: 1px solid transparent; border-radius: var(--radius-sm); background: rgba(18, 62, 67, .045);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; cursor: text;
}
.mx-chipbox:focus-within { background: var(--white); border-color: rgba(18, 62, 67, .3); box-shadow: 0 0 0 3px rgba(18, 62, 67, .08); }
.mx-chipbox input { flex: 1; min-width: 120px; height: 26px; border: 0; outline: none; background: transparent; font: 400 14px var(--font); color: var(--t1); }
.mx-chipbox input::placeholder { color: var(--t3); }
.mx-word {
    display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 3px 0 10px; border-radius: 999px;
    font: 600 13px var(--font); line-height: 1; animation: menu-in .14s ease both;
}
.mx-word button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .7; cursor: pointer; font-size: 14px; }
.mx-word button:hover { opacity: 1; background: rgba(255, 255, 255, .25); }
.mx-group-all .mx-word { background: var(--t1); color: var(--white); }
.mx-group-any .mx-word { background: linear-gradient(135deg, var(--glut), var(--gold)); color: var(--ink); }
.mx-group-none .mx-word { background: var(--ox-soft); color: var(--ox); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mx-group-none .mx-word button { text-decoration: none; }

/* Schalter wie in den Einstellungen */
.mx-switch {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; margin: 0 0 12px; cursor: pointer;
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
}
.mx-switch:has(input:checked) { border-color: rgba(18, 62, 67, .35); background: var(--t1-soft); }
.mx-switch input {
    appearance: none; flex-shrink: 0; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px; position: relative; cursor: pointer;
    background: var(--rule); transition: background .15s ease;
}
.mx-switch input::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease;
}
.mx-switch input:checked { background: var(--t1); }
.mx-switch input:checked::after { transform: translateX(16px); }
.mx-switch span { display: flex; flex-direction: column; gap: 2px; }
.mx-switch b { font: 600 14.5px var(--font); color: var(--t1); }
.mx-switch small { font-size: 13px; color: var(--t2); }

/* Zeitraum und Ordner als Kacheln */
.mx-period { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mx-period-card, .mx-where-card {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--white); color: var(--t1); font: 500 14.5px var(--font); text-align: start; cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.mx-period-card i, .mx-where-card i { font-size: 18px; color: var(--t2); }
.mx-period-card:hover, .mx-where-card:hover { border-color: rgba(18, 62, 67, .3); box-shadow: 0 6px 16px -12px rgba(18, 62, 67, .45); }
.mx-period-card.on, .mx-where-card.on { border-color: var(--t1); background: var(--t1-soft); font-weight: 600; box-shadow: inset 0 0 0 1px var(--t1); }
.mx-period-card.on i, .mx-where-card.on i { color: var(--glut); }
.mx-where { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mx-where-card { flex-direction: column; align-items: flex-start; gap: 4px; }
.mx-where-card i { font-size: 22px; margin-bottom: 4px; }
.mx-where-card small { font-size: 13px; color: var(--t2); font-weight: 400; }
.mx-range { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.mx-range label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--t2); }

/* Ein Satz, was gesucht wird */
.mx-rule-preview {
    display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px; border-radius: var(--radius-sm);
    background: var(--accent-orange-soft); color: var(--t1); font: 500 14px var(--font);
}
.mx-rule-preview i { color: var(--glut); flex-shrink: 0; }

@media (max-width: 760px) {
    .mx-rule-layout { grid-template-columns: 1fr; }
    .mx-rule-layout .form-pane { height: auto; }
    .mx-group { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .mx-word { animation: none; } .mx-switch input, .mx-switch input::after { transition: none; } }


/* ---- Erinnerungen senden neben der roten Pille (#252, #299) ---- */
/* Erinnern / Mahnen neben "Neu" (#305): umrandeter Knopf, die Anzahl als kleine Glut-Marke. */
.reminder-btn { display: inline-flex; align-items: center; gap: 8px; }
.reminder-btn .bi { color: var(--glut); }
.reminder-btn-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font: 600 11.5px var(--mono); color: var(--ink); background: linear-gradient(135deg, var(--glut), var(--gold)); }
/* ============================================================
   Usability-Runde (#305)
   ============================================================ */

/* Projekt-Reiter: ab dem Auftrag geht's ums Geld - ein feiner Strich davor. */
.pd-tab-sep { flex: 0 0 1px; align-self: center; width: 1px; height: 18px; margin: 0 5px; background: rgba(18, 62, 67, .2); border-radius: 1px; }

/* Plantafel: die eigenen Aufgaben stehen als weisse, erhabene Karte mit Petrol-Kante;
   die anderer Projekte sind nur ein schraffierter Platzhalter ("da ist jemand verplant"). */
.pb-todo.mine {
    background: var(--white);
    box-shadow: inset 3px 0 0 var(--t1), inset 0 0 0 1px rgba(18, 62, 67, .16), 0 3px 8px -4px rgba(18, 62, 67, .4);
}
.pb-todo.mine.status-inarbeit { box-shadow: inset 3px 0 0 #F0A01E, inset 0 0 0 1px rgba(18, 62, 67, .16), 0 3px 8px -4px rgba(18, 62, 67, .4); }
.pb-todo.mine.overdue { box-shadow: inset 3px 0 0 var(--ox), inset 0 0 0 1px rgba(18, 62, 67, .16), 0 3px 8px -4px rgba(18, 62, 67, .4); }
.pb-todo.other {
    background: repeating-linear-gradient(135deg, rgba(18, 62, 67, .04) 0 5px, rgba(18, 62, 67, .09) 5px 10px);
    box-shadow: inset 0 0 0 1px rgba(18, 62, 67, .12);
}
.pb-todo.other .pb-todo-title { color: var(--t2); font-weight: 500; }
.pb-todo.other .pb-todo-time { color: var(--t3); }
.pb-todo.other:hover { filter: none; background: repeating-linear-gradient(135deg, rgba(18, 62, 67, .06) 0 5px, rgba(18, 62, 67, .12) 5px 10px); }
.pb-dot.mine { background: var(--white); box-shadow: inset 3px 0 0 var(--t1), inset 0 0 0 1px rgba(18, 62, 67, .25); }
.pb-dot.other { background: repeating-linear-gradient(135deg, rgba(18, 62, 67, .08) 0 2px, rgba(18, 62, 67, .22) 2px 4px); box-shadow: inset 0 0 0 1px rgba(18, 62, 67, .2); }

/* Legende als Schalter: "Andere Projekte" blendet deren Aufgaben aus und wieder ein. */
.pb-legend-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
    border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--white);
    color: var(--t2); font: 500 12.5px var(--font); cursor: pointer;
    transition: border-color .12s ease, color .12s ease, opacity .12s ease;
}
.pb-legend-toggle:hover { border-color: rgba(18, 62, 67, .3); color: var(--t1); }
.pb-legend-toggle .bi { font-size: 13px; color: var(--t3); }
.pb-legend-toggle.off { color: var(--t3); background: transparent; border-style: dashed; }
.pb-legend-toggle.off .pb-dot { opacity: .35; }

/* Aufgaben-Kanban, Zeilen je Mitarbeiter: links die Person, rechts die Status-Spalten. */
.kb-lanes {
    flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start;
    display: grid; grid-template-columns: 190px repeat(var(--kb-cols), minmax(240px, 1fr));
    background: var(--white); border: 1px solid rgba(18, 62, 67, .08); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
}
.kb-corner, .kb-head {
    position: sticky; top: 0; z-index: 2; background: var(--white);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--rule);
}
.kb-corner { inset-inline-start: 0; z-index: 3; border-inline-end: 1px solid var(--rule); border-start-start-radius: var(--radius-lg); }
.kb-head .todo-count { font-family: var(--mono); font-size: 12px; color: var(--t3); }
.kb-person {
    position: sticky; inset-inline-start: 0; z-index: 1; background: var(--white);
    display: flex; align-items: flex-start; gap: 8px; padding: 12px;
    border-top: 1px solid var(--rule2); border-inline-end: 1px solid var(--rule);
    font-size: 13.5px; font-weight: 600; color: var(--t1);
}
.kb-person-name { flex: 1; min-width: 0; padding-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-person-n { margin-top: 5px; font: 500 11px var(--mono); color: var(--t3); background: var(--rule2); border-radius: 999px; padding: 1px 7px; }
.kb-cell {
    display: flex; flex-direction: column; gap: 8px; min-height: 68px; padding: 8px;
    border-top: 1px solid var(--rule2); border-inline-start: 1px solid var(--rule2);
    background: rgba(18, 62, 67, .018); transition: background .12s ease, box-shadow .12s ease;
}
.kb-cell.drop { background: rgba(255, 122, 47, .07); box-shadow: inset 0 0 0 1px rgba(255, 122, 47, .45); }
.pt-caret { font-size: 10px; opacity: .6; }

/* ============================================================
   Listen (#318): am Desktop scrollt nur die Tabelle - Seitenkopf, Filterpillen
   und Suche bleiben stehen, der Spaltenkopf klebt oben. Eine kurze Liste bleibt
   so hoch wie ihr Inhalt. Am Handy scrollt weiter die ganze Seite.
   ============================================================ */
@media (min-width: 961px) {
    .content:has(> .list-toolbar ~ .data-card.white) {
        display: flex; flex-direction: column; overflow: hidden; padding-bottom: 24px;
    }
    .content:has(> .list-toolbar ~ .data-card.white) > * { flex-shrink: 0; }
    .content:has(> .list-toolbar ~ .data-card.white) > .data-card.white { flex: 0 1 auto; min-height: 0; overflow: auto; }
    .content > .list-toolbar ~ .data-card.white > .table > thead > tr > th {
        position: sticky; top: 0; z-index: 2; background: var(--white); box-shadow: inset 0 -1px 0 var(--rule);
    }
}