/* AD-Cockpit — App-Shell & Screens (baut auf design-system.css auf) */

/* ---- Topbar ----------------------------------------------------------- */
.topbar { position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-xs); }
.topbar-inner { max-width:none; margin:0; padding:0 var(--container-pad);
    height:60px; display:flex; align-items:center; gap:var(--space-5); }
.brand { display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-display);
    font-weight:var(--fw-bold); color:var(--text-strong); font-size:var(--fs-h4); letter-spacing:var(--ls-display); }
.brand .logo { height:26px; width:auto; display:block; }
.brand .sep { width:1px; height:22px; background:var(--border); }
.brand .app { color:var(--color-brand); }
.topbar-spacer { flex:1; }
.topbar-user { display:flex; align-items:center; gap:var(--space-3); font-size:var(--fs-sm); color:var(--text-muted); }
.topbar-user .who { font-weight:var(--fw-semibold); color:var(--text-strong); }

.page { max-width:none; margin:0; padding:var(--space-6) var(--container-pad); }
.page-head { margin-bottom:var(--space-6); }
.page-head .kicker { margin-bottom:var(--space-2); }
.page-head h1 { margin:0; }
.muted { color:var(--text-muted); }

/* ---- Stat cards (Dashboard-Platzhalter) ------------------------------- */
.grid { display:grid; gap:var(--space-5); }
.grid-stats { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.stat { padding:var(--space-5); }
.stat .label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-label);
    color:var(--text-subtle); margin:0 0 var(--space-2); font-weight:var(--fw-bold); }
.stat .value { font-family:var(--font-display); font-size:2.25rem; font-weight:var(--fw-bold);
    color:var(--text-strong); line-height:1; }
.stat .value.brand { color:var(--color-brand); }
.stat .value.accent { color:var(--color-accent-deep); }

/* ---- Login ------------------------------------------------------------ */
.login-wrap { min-height:100vh; display:grid; grid-template-columns:1fr; place-items:center;
    background:
        radial-gradient(1200px 500px at 100% -10%, color-mix(in srgb,var(--color-brand) 8%,transparent), transparent),
        var(--surface-alt); padding:var(--space-5); }
.login-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.login-top { background:var(--color-brand); padding:var(--space-6) var(--space-6) var(--space-5); color:var(--white); }
.login-top .logo { height:30px; margin-bottom:var(--space-4); }
.login-top .kicker { color:rgba(255,255,255,.85); }
.login-top h1 { color:var(--white); font-size:var(--fs-h3); margin:var(--space-2) 0 0; }
.login-body { padding:var(--space-6); }
.login-slogan { text-align:center; font-size:var(--fs-xs); color:var(--text-subtle);
    letter-spacing:var(--ls-kicker); text-transform:uppercase; margin-top:var(--space-5); }

/* ---- Errors ----------------------------------------------------------- */
.error-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--space-6); text-align:center; }
.error-code { font-family:var(--font-display); font-size:5rem; color:var(--color-brand); line-height:1; margin:0; }

/* ---- Navigation -------------------------------------------------------- */
.mainnav { display:flex; gap:var(--space-2); margin-left:var(--space-5); }
.mainnav a { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-muted);
    padding:.45rem .8rem; border-radius:var(--radius-md); }
.mainnav a:hover { background:var(--gray-100); color:var(--text-strong); text-decoration:none; }

/* ---- Filter-Chips ------------------------------------------------------ */
.filterbar { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5); }
.chip { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-muted);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
    padding:.35rem .9rem; }
.chip:hover { border-color:var(--border-strong); text-decoration:none; }
.chip.active { background:var(--color-brand); border-color:var(--color-brand); color:var(--white); }

/* ---- Tabelle ----------------------------------------------------------- */
.table-card { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table th { text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-label);
    color:var(--text-subtle); font-weight:var(--fw-bold); padding:var(--space-3) var(--space-4);
    border-bottom:2px solid var(--border); background:var(--surface-alt); white-space:nowrap; }
.table td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); vertical-align:top; }
.table tbody tr:hover { background:var(--surface-alt); }
.table tr.unread td { background:color-mix(in srgb, var(--color-brand-tint) 45%, var(--surface)); }
.table tr.unread:hover td { background:var(--color-brand-tint); }
.nowrap { white-space:nowrap; }
.sm { font-size:var(--fs-sm); }

/* ---- Pills ------------------------------------------------------------- */
.pill { display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-bold);
    letter-spacing:var(--ls-label); padding:.2em .65em; border-radius:var(--radius-pill); line-height:1.5; }
.pill-privat { background:#e8effc; color:#1d4ed8; }
.pill-fach { background:var(--color-accent-tint); color:var(--color-accent-deep); }
.pill-status { background:var(--gray-100); color:var(--text-muted); }

/* ---- Pagination / Stat-Links / Alerts ---------------------------------- */
.pagination { display:flex; align-items:center; gap:var(--space-4); justify-content:center; margin-top:var(--space-5); }
.statlink { display:block; }
.statlink:hover { text-decoration:none; box-shadow:var(--shadow-md); }
.alert-success { background:var(--color-accent-tint); color:var(--color-accent-deep); border:1px solid var(--green-100); }

/* ---- Ansicht-als (Admin) ------------------------------------------------ */
.viewas-form { margin-right:var(--space-3); }
.viewas-select { width:auto; padding:.4rem .6rem; font-size:var(--fs-sm); }
.viewas-banner { background:var(--color-brand); color:var(--white); }
.viewas-banner-inner { max-width:none; margin:0; padding:var(--space-2) var(--container-pad);
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); font-size:var(--fs-sm); }
.btn-onbrand { color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-onbrand:hover { background:rgba(255,255,255,.12); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.strong-brand { color:var(--color-brand); font-weight:var(--fw-bold); }

/* ---- Vollbreite & Anfragen-Seite --------------------------------------- */
.xs { font-size:var(--fs-xs); }
.input-auto { width:auto; padding:.45rem .6rem; font-size:var(--fs-sm); }
.filter-active { border-color:var(--color-brand); }
.filter-toolbar { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
    padding:var(--space-3) var(--space-5); margin-bottom:var(--space-4); }
.filter-label { font-size:var(--fs-xs); color:var(--text-subtle); text-transform:uppercase;
    letter-spacing:var(--ls-label); font-weight:var(--fw-bold); }

/* Diagramm-Karte */
.chart-card { margin-bottom:var(--space-4); padding:var(--space-5); }
.chart-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
    margin-bottom:var(--space-4); }
.chart-grid { display:grid; grid-template-columns:1fr 300px; gap:var(--space-5); }
.chart-main { height:380px; position:relative; }
.chart-side { display:flex; flex-direction:column; gap:var(--space-4); }
.chart-small { height:180px; position:relative; }
@media (max-width: 1100px) { .chart-grid { grid-template-columns:1fr; } .chart-main { height:300px; } }

/* Typ-Badges (Farben wie im alten Cockpit / Diagramm) */
.type-badge { display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-bold);
    letter-spacing:var(--ls-label); padding:.25em .6em; border-radius:var(--radius-sm);
    color:#fff; line-height:1.5; }
.type-Kurzanfrage { background:#16a34a; } .type-Musterpaket { background:#d97706; }
.type-Anfrage { background:#dc2626; } .type-Instagram { background:#9333ea; }
.type-Google { background:#1d4ed8; } .type-Beratung { background:#0e7490; }
.type-Telefonberatung { background:#4338ca; } .type-Chatbot { background:#0891b2; }
.type-Partneranfrage { background:#7c3aed; }

/* Quelle-Pill + AD-Pill */
.source-pill { display:inline-block; font-size:10px; font-weight:var(--fw-bold); color:#fff;
    padding:.15em .5em; border-radius:var(--radius-pill); margin-left:.35em; vertical-align:middle; }
.ad-pill { display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:#fff;
    padding:.25em .7em; border-radius:var(--radius-pill); }

/* Status-Pills */
.pill-info { background:#e0f2fe; color:#0369a1; }
.pill-neu { background:#16a34a; color:#fff; }

/* Nachricht */
.msg-cell { max-width:280px; }
.show-more { font-size:var(--fs-xs); font-weight:var(--fw-semibold); margin-left:.3em; white-space:nowrap; }

/* Aktionen */
.actions-cell { text-align:right; }
.btn-icon { padding:.3rem .5rem; font-size:var(--fs-body); line-height:1; }

/* Pagination-Nummern */
.page-num { display:inline-flex; min-width:2rem; height:2rem; align-items:center; justify-content:center;
    border-radius:var(--radius-md); font-size:var(--fs-sm); font-weight:var(--fw-semibold);
    color:var(--text-muted); border:1px solid var(--border); background:var(--surface); }
.page-num:hover { border-color:var(--border-strong); text-decoration:none; }
.page-num.current { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }

/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(28,28,28,.5); z-index:50;
    display:flex; align-items:center; justify-content:center; padding:var(--space-5); }
.modal { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    max-width:640px; width:100%; max-height:80vh; display:flex; flex-direction:column; }
.modal-head { display:flex; align-items:center; justify-content:space-between;
    padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.modal-body { padding:var(--space-5); overflow-y:auto; white-space:pre-wrap; color:var(--text-body); }
.modal-backdrop[hidden] { display:none; }

/* ==========================================================================
   MOBILE — ADs arbeiten hauptsächlich am Handy.
   Anfragenliste wird zur Karten-Ansicht, Kontakt = Tap-Buttons.
   ========================================================================== */
@media (max-width: 860px) {

    /* ---- Topbar kompakt ---- */
    .topbar-inner { height:auto; flex-wrap:wrap; padding:var(--space-2) var(--space-3); gap:var(--space-2) var(--space-3); }
    .brand { font-size:var(--fs-body); }
    .brand .logo { height:20px; }
    .mainnav { margin-left:0; order:3; width:100%; overflow-x:auto; padding-bottom:2px; }
    .mainnav a { white-space:nowrap; padding:.55rem .8rem; }
    .topbar-user .who { display:none; }
    .viewas-select { max-width:150px; }

    .page { padding:var(--space-4) var(--space-3); }
    .page-head h1 { font-size:var(--fs-h3); }

    /* ---- Diagramme: nur der Verlauf, kompakt ---- */
    .chart-card { padding:var(--space-4); }
    .chart-main { height:220px; }
    .chart-side { display:none; }

    /* ---- Filter: Selects volle Breite, untereinander ---- */
    .filter-toolbar { padding:var(--space-3); }
    .filter-toolbar .input-auto { flex:1 1 45%; min-width:0; }
    .filter-label { display:none; }

    /* ---- Tabelle → Karten ---- */
    .table-card { overflow-x:visible; }
    .table thead { display:none; }
    .table, .table tbody { display:block; }
    .table tr {
        display:grid;
        grid-template-columns:auto 1fr auto;
        grid-template-areas:
            "typ    status  eingang"
            "kontakt kontakt kontakt"
            "ort    ort     ort"
            "msg    msg     msg"
            "ad     kunde   actions";
        gap:var(--space-2) var(--space-3);
        align-items:center;
        padding:var(--space-4) var(--space-4);
        border-bottom:1px solid var(--border);
    }
    .table td { display:block; padding:0; border:none; }
    .table tr:hover, .table tbody tr:hover { background:inherit; }
    .table tr.unread { background:color-mix(in srgb, var(--color-brand-tint) 45%, var(--surface)); }

    .td-typ     { grid-area:typ; }
    .td-status  { grid-area:status; }
    .td-eingang { grid-area:eingang; text-align:right; }
    .td-eingang .xs { display:inline; margin-left:.35em; }
    .td-eingang div { display:inline; }
    .td-kontakt { grid-area:kontakt; }
    .td-ort     { grid-area:ort; }
    .td-msg     { grid-area:msg; max-width:none; }
    .td-ad      { grid-area:ad; }
    .td-kunde   { grid-area:kunde; }
    .actions-cell { grid-area:actions; text-align:right; }

    /* Sekundäres ausblenden: Quelle-Pill; in der AD-Sicht auch die (redundante) AD-Pill */
    .td-typ .source-pill { display:none; }
    .scoped .td-ad { display:none; }

    /* Kontakt als Tap-Buttons (Anrufen / Mailen) */
    .td-kontakt .xs { font-size:var(--fs-sm); display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
    .td-kontakt .xs a {
        display:inline-flex; align-items:center; min-height:40px; padding:.45rem .9rem;
        border:1px solid var(--border-strong); border-radius:var(--radius-pill);
        font-weight:var(--fw-semibold); background:var(--surface); max-width:100%;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .td-kontakt .xs a[href^="tel:"] { border-color:var(--color-accent); color:var(--color-accent-deep); }

    /* Touch-Targets */
    .btn-icon { min-width:44px; min-height:40px; }
    .show-more { display:inline-block; padding:.3rem .5rem; }
    .page-num { min-width:2.5rem; height:2.5rem; }
    .pagination { flex-wrap:wrap; }

    /* Statistik-Karten & Übersicht */
    .grid-stats { grid-template-columns:repeat(2, 1fr); gap:var(--space-3); }
    .stat { padding:var(--space-4); }
    .stat .value { font-size:1.75rem; }
}
@media (max-width: 860px) { .contact-sep { display:none; } }

/* ==========================================================================
   ANFRAGE-DETAIL — mobile-first, für nicht-technikaffine Nutzer:
   große Flächen, klare Beschriftung, ein Klick pro Aktion.
   ========================================================================== */
.detail-page { max-width:1100px; }
.back-link { display:inline-block; font-weight:var(--fw-semibold); margin-bottom:var(--space-4);
    padding:.5rem .25rem; font-size:var(--fs-body); }

.flash-big { background:var(--color-accent-tint); border:2px solid var(--color-accent);
    color:var(--color-accent-deep); font-size:var(--fs-body); font-weight:var(--fw-semibold);
    border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4); }

.detail-head { padding:var(--space-5); margin-bottom:var(--space-5); }
.detail-head-badges { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
.detail-name { margin:0 0 var(--space-1); font-size:var(--fs-h2); }
.pill-lead { background:#fff7ed; color:#c2410c; }

.big-actions { display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.big-btn { flex:1 1 30%; min-height:58px; display:inline-flex; align-items:center; justify-content:center;
    gap:.5em; font-size:var(--fs-h4); font-weight:var(--fw-bold); border-radius:var(--radius-lg);
    border:2px solid transparent; text-decoration:none !important; }
.big-btn-call { background:var(--color-accent); color:#fff; }
.big-btn-call:hover { background:var(--green-600); }
.big-btn-mail { background:var(--color-brand); color:#fff; }
.big-btn-mail:hover { background:var(--color-brand-hover); }
.big-btn-map { background:var(--surface); color:var(--text-strong); border-color:var(--border-strong); }

.detail-grid { display:grid; grid-template-columns:1fr 420px; gap:var(--space-5); align-items:start; }
@media (max-width: 980px) { .detail-grid { grid-template-columns:1fr; } }

.detail-card { padding:var(--space-5); margin-bottom:var(--space-5); }
.detail-card h3 { margin:0 0 var(--space-4); font-size:var(--fs-h4); }

/* Kontaktdaten — große, gut lesbare Zeilen */
.contact-list { margin:0; }
.contact-list > div { display:flex; flex-direction:column; gap:2px; padding:var(--space-3) 0;
    border-bottom:1px solid var(--border); }
.contact-list > div:last-child { border-bottom:none; }
.contact-list dt { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-label);
    color:var(--text-subtle); font-weight:var(--fw-bold); }
.contact-list dd { margin:0; font-size:var(--fs-h4); }
.contact-list dd a { word-break:break-word; }

.kunden-nachricht { background:var(--surface-alt); border-left:4px solid var(--color-brand);
    border-radius:var(--radius-sm); padding:var(--space-4); font-size:var(--fs-body); }
.produkt-liste { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--space-3); margin:var(--space-4) 0 0; }
.produkt-liste > div { background:var(--surface-alt); border-radius:var(--radius-md); padding:var(--space-3); }
.produkt-liste dt { font-size:var(--fs-xs); color:var(--text-subtle); text-transform:uppercase; letter-spacing:var(--ls-label); font-weight:var(--fw-bold); }
.produkt-liste dd { margin:2px 0 0; font-weight:var(--fw-semibold); color:var(--text-strong); }

/* Status: große untereinanderstehende Buttons */
.status-buttons { display:flex; flex-direction:column; gap:var(--space-2); }
.status-btn { text-align:left; font-size:var(--fs-body); font-weight:var(--fw-semibold);
    padding:.85rem 1rem; min-height:50px; border-radius:var(--radius-md);
    border:2px solid var(--border); background:var(--surface); color:var(--text-body); cursor:pointer; }
.status-btn:hover { border-color:var(--border-strong); }
.status-btn.current { border-color:var(--color-brand); background:var(--color-brand-tint);
    color:var(--color-brand-press); }

/* Lead-Qualität: drei große Kacheln */
.lead-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.lead-btn { font-size:var(--fs-body); font-weight:var(--fw-bold); padding:var(--space-3);
    min-height:74px; border-radius:var(--radius-lg); border:2px solid var(--border);
    background:var(--surface); cursor:pointer; line-height:1.5; }
.lead-btn:hover { border-color:var(--border-strong); }
.lead-btn.current { border-color:var(--color-brand); background:var(--color-brand-tint); }

/* Aufgabenliste + Formular */
.task-list { list-style:none; margin:0 0 var(--space-5); padding:0; }
.task-list li { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.task-info { display:flex; align-items:center; gap:var(--space-3); }
.task-icon { font-size:1.4rem; }
.task-title { font-weight:var(--fw-semibold); color:var(--text-strong); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.seg-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.seg input { position:absolute; opacity:0; }
.seg span { display:flex; align-items:center; justify-content:center; min-height:48px;
    border:2px solid var(--border); border-radius:var(--radius-md); font-weight:var(--fw-semibold);
    cursor:pointer; background:var(--surface); }
.seg input:checked + span { border-color:var(--color-brand); background:var(--color-brand-tint);
    color:var(--color-brand-press); }

/* Timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { display:flex; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.tl-icon { flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:var(--surface-alt); border-radius:var(--radius-pill); }
.tl-text { color:var(--text-body); white-space:pre-line; }
.tl-meta { font-size:var(--fs-xs); color:var(--text-subtle); margin-top:2px; }
.tl-first { padding-top:var(--space-3); }

@media (max-width: 860px) {
    .detail-head { padding:var(--space-4); }
    .detail-name { font-size:var(--fs-h3); }
    .big-btn { flex:1 1 100%; }
    .detail-card { padding:var(--space-4); }
    .contact-list dd { font-size:var(--fs-body); }
    .field-row { grid-template-columns:1fr; }
    .lead-buttons { gap:var(--space-2); }
}
.table tbody tr[data-id] { cursor:pointer; }

/* ==========================================================================
   DASHBOARD — Agenda (Termine) + letzte Anfragen
   ========================================================================== */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-6); align-items:start; }
@media (max-width: 980px) { .dash-grid { grid-template-columns:1fr; } }

.agenda-card, .recent-card { margin:0; }

/* Agenda */
.agenda-group { margin-bottom:var(--space-4); }
.agenda-group:last-child { margin-bottom:0; }
.agenda-group-head { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-label);
    font-weight:var(--fw-bold); color:var(--text-subtle); padding:var(--space-2) 0;
    display:flex; align-items:center; gap:var(--space-2); }
.agenda-group-head.overdue { color:var(--color-brand); }
.agenda-group-head.today { color:var(--color-accent-deep); }
.agenda-count { background:var(--gray-100); color:var(--text-muted); border-radius:var(--radius-pill);
    padding:0 .5em; font-size:10px; }
.agenda-group-head.overdue .agenda-count { background:var(--color-brand-tint); color:var(--color-brand-press); }
.agenda-list { list-style:none; margin:0; padding:0; }
.agenda-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3);
    border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:var(--space-2);
    text-decoration:none !important; background:var(--surface); }
.agenda-item:hover { border-color:var(--border-strong); background:var(--surface-alt); }
.agenda-icon { font-size:1.3rem; flex:0 0 auto; }
.agenda-main { flex:1; min-width:0; }
.agenda-title { display:block; font-weight:var(--fw-semibold); color:var(--text-strong);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agenda-sub { display:block; font-size:var(--fs-sm); color:var(--text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agenda-when { flex:0 0 auto; text-align:right; font-weight:var(--fw-bold); color:var(--text-strong);
    font-size:var(--fs-sm); line-height:1.2; }
.agenda-when.overdue { color:var(--color-brand); }
.agenda-time { font-weight:var(--fw-regular); color:var(--text-subtle); font-size:var(--fs-xs); }

/* Letzte Anfragen */
.recent-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.recent-list { list-style:none; margin:0; padding:0; }
.recent-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3);
    border-bottom:1px solid var(--border); text-decoration:none !important; }
.recent-item:hover { background:var(--surface-alt); }
.recent-item.unread { background:color-mix(in srgb, var(--color-brand-tint) 40%, var(--surface)); }
.recent-main { flex:1; min-width:0; }
.recent-name { display:block; font-weight:var(--fw-semibold); color:var(--text-strong);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-lead { margin-left:.3em; }
.recent-sub { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm);
    color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.recent-right { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.recent-date { font-size:var(--fs-xs); color:var(--text-subtle); }

@media (max-width: 860px) {
    .dash-grid { gap:var(--space-4); margin-top:var(--space-4); }
    .agenda-title, .recent-name { white-space:normal; }
}

/* ---- Fachbetrieb beauftragen ------------------------------------------- */
.fb-card { border:2px solid var(--color-brand); }
.fb-card h3 { color:var(--color-brand); }
.fb-assigned { background:var(--color-brand-tint); border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); }
.fb-assigned-label { font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--color-brand-press);
    text-transform:uppercase; letter-spacing:var(--ls-label); margin-bottom:var(--space-1); }
.fb-assigned-body { font-weight:var(--fw-semibold); color:var(--text-strong); line-height:1.4; }

.fb-search { margin-bottom:var(--space-3); }
.fb-results { list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto;
    border:1px solid var(--border); border-radius:var(--radius-md); }
.fb-result { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); cursor:pointer; min-height:56px; }
.fb-result:last-child { border-bottom:none; }
.fb-result:hover { background:var(--surface-alt); }
.fb-result.no-mail { opacity:.55; cursor:not-allowed; }
.fb-r-name { display:block; font-weight:var(--fw-semibold); color:var(--text-strong); }
.fb-r-sub { display:block; font-size:var(--fs-sm); color:var(--text-muted); }
.fb-r-go { flex:0 0 auto; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--color-brand); }
.fb-empty { padding:var(--space-4); text-align:center; }

.fb-confirm { background:var(--surface-alt); border:2px solid var(--color-brand); border-radius:var(--radius-md);
    padding:var(--space-4); margin-top:var(--space-3); }
.fb-confirm-text { margin:0 0 var(--space-3); font-size:var(--fs-body); }

/* Fachbetrieb-Compose */
.fb-compose { border-top:2px solid var(--color-brand); margin-top:var(--space-3); padding-top:var(--space-4); }
.fb-compose-to { background:var(--surface-alt); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
    margin-bottom:var(--space-4); display:flex; flex-direction:column; gap:2px; }
.fb-compose-to strong { color:var(--text-strong); font-size:var(--fs-body); }
.fb-preview { margin-bottom:var(--space-3); }
.fb-preview summary { cursor:pointer; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--color-brand);
    padding:var(--space-2) 0; }
.fb-preview-body { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:var(--space-4); font-family:var(--font-body); font-size:var(--fs-sm); color:var(--text-body);
    white-space:pre-wrap; word-break:break-word; max-height:340px; overflow-y:auto; margin:var(--space-2) 0 0; }