/* =================================================================
   Wohntraum CRM — Apple-Theme Override-Layer
   Wird NACH app.css geladen → erbt alle Klassen, swapt Tokens & Look.
   Quelle: CMS.zip (dashboard.jsx, makler.jsx, landing-page.jsx)
   ================================================================= */

/* ---- Token-Swap (überschreibt :root aus app.css) ---- */
:root {
    --bg:        #F5F5F7;
    --paper:     #FFFFFF;
    --paper-2:   #FBFBFD;
    --ink:       #1D1D1F;
    --ink-2:     #424245;
    --ink-3:     #6E6E73;
    --ink-4:     #A1A1A6;
    --line:      #E5E5EA;
    --line-soft: #F2F2F4;
    --forest:    #1F3D2E;
    --forest-2:  #2E5740;
    --forest-3:  #2E7D5B;
    --amber:     #C28A2E;
    --pos:       #2E7D5B;
    --neg:       #C9472B;
    --hot:       #C76A3E;
    --hl:        #FCE8A4;
    --blue:      #3B6FAA;
    --blue-2:    #2A6FDB;
    --clay:      #C76A3E;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
}

/* ---- Font-Stack-Swap: SF Pro Display als Primärfont ---- */
body, body.app, body.auth,
.brand-title, .logo-row .brand-title,
.serif,
.card-head h2,
.dash-card-head h2,
.dash-head h1,
.kontakt-head h1,
.modal-head h2,
.conv-header h2,
.kpi-value,
.wert-price,
.obj-stat-val,
.obj-init,
.termin-day-h,
.audit-day h3,
.brand .logo, .sidebar .logo {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body, body.app {
    letter-spacing: -0.005em;
    color: var(--ink);
    background: var(--bg);
}
/* Robust gegen Browser-Extensions (DeepL/AI-Tools), die auf Inhaltsseiten
   per Inline-Style display:block auf den Body setzen → Sidebar+Inhalt würden
   sonst untereinander statt nebeneinander stehen (z. B. Posteingang). */
body.app { display: flex !important; }
.serif        { font-weight: 600; letter-spacing: -0.02em; }
.kpi-value    { font-weight: 600; letter-spacing: -0.03em; }
.wert-price   { font-weight: 600; letter-spacing: -0.03em; }
.dash-head h1 { font-weight: 600; letter-spacing: -0.025em; }
.kontakt-head h1, .modal-head h2, .conv-header h2,
.card-head h2, .dash-card-head h2, .audit-day h3,
.termin-day-h { font-weight: 600; letter-spacing: -0.015em; }

/* Mono → SF Mono */
.mono, .kbd, .conv-time, .auf-faellig,
.badge, .obj-tag, .act-obj,
.entity-tab .tab-cnt,
.kontakte-table .num,
.wert-bar-labels,
.termin-time-start,
.audit-time {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, "Roboto Mono", Menlo, monospace !important;
    font-feature-settings: "tnum" 1;
}

/* ---- Brand-Logo: monochrom statt Serif-Kursiv ---- */
.brand .logo, .sidebar .logo {
    background: var(--ink);
    color: #FFFFFF;
    font-style: normal;
    font-weight: 700;
    border-radius: 8px;
}
.logo-row .brand-title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }

/* =================================================================
   Sidebar — Apple-Stil mit SVG-Icons (kein Emoji-Bias mehr)
   ================================================================= */
.sidebar {
    width: 232px; flex: 0 0 232px;
    background: var(--paper);
    border-right: 1px solid var(--line);
    padding: 16px 12px;
}
.sidebar nav { gap: 2px; }
.sidebar nav a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    gap: 10px;
    transition: background .12s, color .12s;
}
.sidebar nav a:hover { background: var(--line-soft); color: var(--ink); }
.sidebar nav a.active {
    background: var(--line-soft);
    color: var(--ink);
    font-weight: 600;
    border-left: 0;
    padding-left: 10px;
    box-shadow: inset 2px 0 0 var(--ink);
}
.sidebar nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar nav .nav-ico {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: currentColor;
    opacity: 0.75;
}
.sidebar nav a.active .nav-ico { opacity: 1; color: var(--ink); }
.sidebar nav .nav-ico svg { width: 18px; height: 18px; display: block; }

.sidebar .nav-section {
    font-size: 10.5px; font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 14px 12px 6px;
}

.badge {
    background: var(--ink); color: #FFFFFF;
    padding: 1px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    min-width: 18px; text-align: center;
    font-family: ui-monospace, "SF Mono", monospace;
    font-feature-settings: "tnum" 1;
}
.badge.muted { background: var(--line); color: var(--ink-3); }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.user-chip { padding: 6px 8px; border-radius: 8px; }
.user-chip:hover { background: var(--line-soft); }
.user-name { font-size: 13px; font-weight: 600; }
.user-chip a.muted { font-size: 11.5px; color: var(--ink-3); }

.av { width: 30px; height: 30px; font-size: 12px; font-weight: 600; background: var(--line); color: var(--ink); }
.av.forest { background: var(--ink); color: #FFFFFF; }
.av.amber  { background: var(--amber); color: #fff; }

/* Sidebar-Suchbutton */
.sidebar .btn.ghost.sm {
    background: var(--line-soft);
    border: 1px solid transparent;
    color: var(--ink-2);
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-bottom: 14px;
}
.sidebar .btn.ghost.sm:hover { background: var(--line); color: var(--ink); }
.sidebar .btn.ghost.sm .kbd {
    font-size: 10.5px; padding: 1px 5px;
    background: var(--paper); color: var(--ink-3);
    border: 1px solid var(--line); border-radius: 4px;
}

/* =================================================================
   Buttons — Apple-Style (sanftere Radii, klarere States)
   ================================================================= */
.btn {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.btn:hover { background: var(--line-soft); border-color: var(--line); }
.btn:active { transform: scale(0.98); }
.btn.forest, .btn.primary {
    background: var(--ink);
    color: #FFFFFF;
    border-color: var(--ink);
    font-weight: 600;
}
.btn.forest:hover, .btn.primary:hover { background: #000000; border-color: #000000; }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn.sm { padding: 5px 9px; font-size: 11.5px; }

button.primary {
    background: var(--ink); color: #FFFFFF;
    border-radius: 8px; padding: 9px 18px; font-weight: 600;
}
button.primary:hover { background: #000000; }
button.ghost { color: var(--ink-2); border-radius: 8px; }

/* =================================================================
   Cards / Surfaces — sanftere Radien, Apple-Schatten
   ================================================================= */
.card, .dash-card, .kpi-card,
.obj-list-wrap, .termin-list-items,
.aufgabe-item, .vorlagen-list, .vorlagen-editor,
.vl-platzhalter, .modal-box,
.kontakte-table-wrap, .kontakte-toolbar,
.vl-preview, .mc-preview, .mc-card, .mc-pop,
.act-body, .quar-card, .auth-card {
    border-radius: var(--r-lg);
    background: var(--paper);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
.card-head, .dash-card-head, .conv-header {
    border-bottom-color: var(--line-soft);
}
.card-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dash-card-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.conv-header h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

/* KPI-Karten — größer, ruhiger */
.kpi-card {
    padding: 20px 22px 22px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--ink-4);
}
.kpi-label {
    font-size: 11px; font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.kpi-value {
    font-size: 44px; font-weight: 600;
    letter-spacing: -0.03em; line-height: 1;
    margin: 6px 0 4px;
    color: var(--ink);
    font-feature-settings: "tnum" 1;
}
.kpi-sub { font-size: 12px; color: var(--ink-3); }

/* Wert-Karte (Objekt-Detail Hero) */
.wert-card {
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.wert-price { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.wert-bar {
    background: var(--line-soft);
    height: 6px;
}
.wert-bar-marker {
    background: var(--ink); border-color: #fff;
    width: 14px; height: 14px;
}

/* =================================================================
   Pills — Apple-Statusfarben (saubere Palette)
   ================================================================= */
.pill {
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}
.pill.live, .pill.aktiv         { background: rgba(46,125,91,0.12); color: #2E7D5B; border: 1px solid rgba(46,125,91,0.25); }
.pill.draft                     { background: var(--line-soft); color: var(--ink-2); border: 1px solid var(--line); }
.pill.sold, .pill.verkauft, .pill.vermittelt
                                { background: var(--ink); color: #FFFFFF; }
.pill.reserved, .pill.reserviert{ background: rgba(199,106,62,0.12); color: var(--hot); border: 1px solid rgba(199,106,62,0.3); }
.pill.hot                       { background: var(--neg); color: #fff; }
.pill.warm                      { background: rgba(194,138,46,0.12); color: var(--amber); border: 1px solid rgba(194,138,46,0.3); }
.pill.cold                      { background: var(--line-soft); color: var(--ink-3); border: 1px solid var(--line); }
.pill.ghost                     { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
.pill.akquise                   { background: rgba(59,111,170,0.10); color: var(--blue); border: 1px solid rgba(59,111,170,0.25); }
.pill.vorbereitung              { background: rgba(194,138,46,0.10); color: var(--amber); border: 1px solid rgba(194,138,46,0.25); }
.pill.beurkundet                { background: rgba(194,138,46,0.18); color: var(--amber); border: 1px solid rgba(194,138,46,0.3); }
.pill.vermietet                 { background: rgba(30,143,75,0.12); color: #1E8F4B; border: 1px solid rgba(30,143,75,0.25); }
.pill.inaktiv, .pill.archiviert { background: var(--line-soft); color: var(--ink-3); border: 1px solid var(--line); }
.pill.geplant                   { background: rgba(194,138,46,0.12); color: var(--amber); border: 1px solid rgba(194,138,46,0.3); }
.pill.bestaetigt                { background: rgba(46,125,91,0.12); color: #2E7D5B; border: 1px solid rgba(46,125,91,0.25); }
.pill.durchgefuehrt             { background: var(--line-soft); color: var(--ink-3); border: 1px solid var(--line); }
.pill.abgesagt                  { background: rgba(201,71,43,0.12); color: var(--neg); border: 1px solid rgba(201,71,43,0.3); }
.pill.no_show                   { background: rgba(0,0,0,0.06); color: var(--ink); border: 1px solid var(--line); }
.pill.scout                     { background: rgba(30,88,198,0.12); color: #1E58C6; border: 1px solid rgba(30,88,198,0.3); }
.pill.kleinanz                  { background: rgba(30,143,75,0.12); color: #1E8F4B; border: 1px solid rgba(30,143,75,0.3); }
.pill.wa                        { background: rgba(18,140,126,0.12); color: #128C7E; border: 1px solid rgba(18,140,126,0.3); }
.pill.sms                       { background: var(--line-soft); color: var(--ink-2); border: 1px solid var(--line); }
.pill.email                     { background: var(--line-soft); color: var(--ink-2); border: 1px solid var(--line); }

.filter-pills .pill {
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 500;
}
.filter-pills .pill:hover { background: var(--line-soft); }
.filter-pills .pill.on {
    background: var(--ink); color: #FFFFFF; border-color: var(--ink);
}

/* State-Tags (kontakt/inbox) */
.state-tag {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 600;
    background: var(--line-soft); color: var(--ink-2);
}
.state-tag.s-neu                 { background: rgba(59,111,170,0.12); color: var(--blue); }
.state-tag.s-erstkontakt         { background: rgba(124,91,164,0.12); color: #7C5BA4; }
.state-tag.s-qualifiziert        { background: rgba(46,125,91,0.12); color: #2E7D5B; }
.state-tag.s-termin_geplant      { background: rgba(194,138,46,0.12); color: var(--amber); }
.state-tag.s-termin_durchgefuehrt{ background: rgba(199,106,62,0.12); color: var(--hot); }
.state-tag.s-verkauft            { background: var(--ink); color: #fff; }
.state-tag.s-abgesagt            { background: var(--line-soft); color: var(--ink-3); }

/* Kanal-Tags monochrom (mit Akzent-Punkt) */
.kanal-tag {
    background: var(--line-soft); color: var(--ink-2);
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 5px;
}
.kanal-tag::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5;
}
.kanal-whatsapp .kanal-tag { color: #128C7E; background: rgba(18,140,126,0.10); }
.kanal-mail     .kanal-tag { color: var(--ink-2); background: var(--line-soft); }
.kanal-webform  .kanal-tag { color: var(--amber); background: rgba(194,138,46,0.10); }
.kanal-calcom   .kanal-tag { color: #6D28D9; background: rgba(109,40,217,0.10); }
.kanal-immowelt .kanal-tag { color: #B47A00; background: rgba(255,171,0,0.12); }
.kanal-immoscout .kanal-tag{ color: #1E58C6; background: rgba(30,88,198,0.10); }
.kanal-kleinanzeigen .kanal-tag { color: #1E8F4B; background: rgba(30,143,75,0.10); }

/* Obj-Tag (WT-Nr-Marker) */
.obj-tag, .obj-nr {
    background: var(--line-soft);
    color: var(--ink-2);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10.5px; font-weight: 600;
}

/* =================================================================
   Auth (Login)
   ================================================================= */
body.auth { background: var(--bg); }
.auth-card {
    border-radius: 16px;
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
    padding: 36px 32px;
}
.auth-card input {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 13px;
    font-size: 14px;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.auth-card button {
    background: var(--ink); color: #FFFFFF;
    border-radius: 8px; padding: 12px;
    font-weight: 600;
}
.auth-card button:hover { background: #000000; }
.alert { background: rgba(201,71,43,0.08); color: var(--neg); border: 1px solid rgba(201,71,43,0.2); border-radius: 8px; }

/* =================================================================
   Konversations-Liste & Detail (Inbox)
   ================================================================= */
.three-cols { background: var(--bg); }
.conv-list, .context-panel { background: var(--paper); }
.conv-list { border-right-color: var(--line); }
.context-panel { border-left-color: var(--line); }

.conv-head input[type=search],
.kontakte-toolbar input[type=search],
.vl-form input, .vl-form textarea, .vl-form select,
.mc-flv input[type=text], .mc-flv input[type=email], .mc-flv input[type=search], .mc-flv select,
.notiz-quick textarea,
.note-form textarea,
.bulk-grid input, .bulk-grid select,
.form-grid input, .form-grid textarea, .form-grid select,
.quar-form input, .quar-form select {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.conv-head input[type=search]:focus,
.kontakte-toolbar input[type=search]:focus,
.vl-form input:focus, .vl-form textarea:focus, .vl-form select:focus,
.mc-flv input:focus, .mc-flv select:focus,
.notiz-quick textarea:focus,
.note-form textarea:focus,
.bulk-grid input:focus, .bulk-grid select:focus,
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus,
.quar-form input:focus, .quar-form select:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.conv-items li.on {
    background: var(--line-soft);
    border-left: 3px solid var(--ink);
}
.conv-name { font-weight: 600; }
.conv-time { color: var(--ink-3); }

/* Mail-Vorschau Body — verhindert Layoutbruch durch Newsletter-HTML */
.mail-body {
    max-width: 100%;
    overflow-x: auto;
}
.mail-body img { max-width: 100%; height: auto; }
.mail-body table { max-width: 100% !important; height: auto !important; }
.mail-body * { max-width: 100% !important; }

/* =================================================================
   Tables
   ================================================================= */
.kontakte-table th {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.kontakte-table td { border-bottom-color: var(--line-soft); }
.kontakte-table tr:hover { background: var(--paper-2); }
.kontakte-table .kontakt-name:hover { color: var(--ink); }

/* =================================================================
   Entity-Tabs
   ================================================================= */
.entity-tab {
    color: var(--ink-3);
    font-weight: 500;
    padding: 10px 14px;
}
.entity-tab:hover { color: var(--ink); }
.entity-tab.on {
    color: var(--ink);
    border-bottom-color: var(--ink);
    font-weight: 600;
}
.entity-tab .tab-cnt {
    background: var(--line-soft); color: var(--ink-3);
    border-radius: 999px; padding: 1px 7px;
    font-size: 10.5px;
}
.entity-tab.on .tab-cnt { background: var(--ink); color: #fff; }

/* =================================================================
   Aufgaben — Apple-Style Checkbox-Kreis
   ================================================================= */
.aufgabe-item {
    border-radius: var(--r-lg);
    border-left: 0;
    box-shadow: none;
}
.aufgabe-item.prio-dringend { box-shadow: inset 4px 0 0 var(--neg); }
.aufgabe-item.prio-hoch     { box-shadow: inset 4px 0 0 var(--hot); }
.aufgabe-item.prio-normal   { box-shadow: inset 4px 0 0 var(--ink); }
.aufgabe-item.prio-niedrig  { box-shadow: inset 4px 0 0 var(--ink-4); }
.aufgabe-check {
    border-color: var(--ink-4);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.aufgabe-check:hover { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.aufgabe-check.done { background: var(--ink); border-color: var(--ink); }
.aufgabe-check.done::after { color: #fff; }

/* =================================================================
   Termine — Status-Streifen Apple-Style
   ================================================================= */
.termin-list-items { border-radius: var(--r-lg); }
.termin-item.status-bestaetigt   { border-left-color: #2E7D5B; }
.termin-item.status-geplant      { border-left-color: var(--amber); }
.termin-item.status-durchgefuehrt{ border-left-color: var(--ink-4); }

/* =================================================================
   Dashboard — Apple Hintergrund egal weil vom Body übernommen
   ================================================================= */
.dashboard {
    background: var(--bg);
    max-width: 1280px;
}
.dash-greet { color: var(--ink-3); font-weight: 500; }
.dash-head h1 { font-size: 32px; }

/* =================================================================
   Vorlagen / Mail-Composer
   ================================================================= */
.vorlagen-item.on a {
    background: var(--line-soft);
    border-left-color: var(--ink);
}
#vl-quill-wrap, #mc-quill-wrap { border-radius: var(--r-lg); }
#vl-quill-wrap .ql-toolbar.ql-snow,
#mc-quill-wrap .ql-toolbar.ql-snow {
    background: var(--paper-2);
    border-color: var(--line);
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
}
#vl-quill-wrap .ql-container.ql-snow,
#mc-quill-wrap .ql-container.ql-snow {
    border-color: var(--line);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
}
.mc-chip {
    background: var(--line-soft); color: var(--ink);
    border: 1px solid var(--line);
}
.mc-chip .muted { color: var(--ink-3); }
.mc-search-wrap input[type=search] {
    border: 1px solid var(--line);
    border-radius: 8px;
}
.mc-search-wrap input[type=search]:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); outline: none; }
.mc-search-results, .mc-search-wrap input[type=search]:focus + .mc-search-results { border-color: var(--line); border-radius: 8px; }
.mc-search-item.mc-search-freemail { background: rgba(46,125,91,0.06); }
.mc-search-item.mc-search-freemail strong { color: #2E7D5B; }

/* =================================================================
   Bulk-Bar — Apple Schwarz statt Beige
   ================================================================= */
.bulk-bar {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.bulk-bar.has-selection {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* =================================================================
   Cmd+K — Apple-Backdrop
   ================================================================= */
.cmdk-backdrop { background: rgba(0,0,0,0.32); backdrop-filter: blur(6px); }
.cmdk { border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.22); }
.cmdk-input-row { border-bottom-color: var(--line-soft); }
.cmdk input { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.cmdk-item.on, .cmdk-item:hover { background: var(--line-soft); }
.cmdk-item.on .ico { background: var(--ink); color: #fff; }

/* =================================================================
   Aktivitäten-Timeline — Apple-Punkte
   ================================================================= */
.act-item .act-icon { background: var(--paper); border: 2px solid var(--line); }
.act-item.act-q-inbox     .act-icon { border-color: rgba(59,111,170,0.4); background: rgba(59,111,170,0.08); }
.act-item.act-q-termin    .act-icon { border-color: rgba(124,91,164,0.4); background: rgba(124,91,164,0.08); }
.act-item.act-q-aufgabe   .act-icon { border-color: rgba(194,138,46,0.4); background: rgba(194,138,46,0.08); }
.act-item.act-q-aktivitaet .act-icon{ border-color: rgba(46,125,91,0.4); background: rgba(46,125,91,0.08); }
.act-body { border-radius: var(--r-lg); }
.act-obj { background: var(--line-soft); color: var(--ink); border-color: var(--line); }
.act-obj:hover { background: var(--line); }

/* =================================================================
   Page-Head Refinements
   ================================================================= */
.app-page .page-head h1 {
    font-size: 26px; font-weight: 600;
    letter-spacing: -0.02em;
}
.app-page { padding: 32px 40px 60px; }
@media (max-width: 780px) { .app-page { padding: 20px 18px 40px; } }

/* =================================================================
   Donut-Chart-Wrap (für Dashboard-Redesign)
   ================================================================= */
.donut-wrap {
    position: relative;
    display: grid; place-items: center;
    width: 100%;
}
.donut-wrap svg { display: block; max-width: 100%; height: auto; }
.donut-center {
    position: absolute; inset: 0;
    display: grid; place-items: center; text-align: center;
    pointer-events: none;
}
.donut-center .donut-label {
    font-size: 11px; font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.donut-center .donut-value {
    font-size: 44px; font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink); margin-top: 4px;
    font-feature-settings: "tnum" 1;
}
.donut-center .donut-sub {
    font-size: 12px; color: var(--ink-3); margin-top: 4px;
}

.donut-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.donut-legend li {
    display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px;
    align-items: center; padding: 8px 10px; border-radius: 10px;
    transition: background .12s;
}
.donut-legend li:hover { background: var(--line-soft); }
.donut-legend .dot { width: 12px; height: 12px; border-radius: 3px; }
.donut-legend .lg-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.donut-legend .lg-sub   { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.donut-legend .lg-val   { font-size: 14px; font-weight: 600; color: var(--ink); font-feature-settings: "tnum" 1; text-align: right; }
.donut-legend .lg-pct   { font-size: 11px; color: var(--ink-3); font-feature-settings: "tnum" 1; min-width: 36px; text-align: right; }

/* =================================================================
   Stream-Cards (Umsatz / Activity)
   ================================================================= */
.stream-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.stream-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px 20px;
}
.stream-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.stream-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.stream-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; }
.stream-sub   { font-size: 12.5px; color: var(--ink-3); }
.stream-spark { margin-top: 14px; height: 48px; width: 100%; }
.stream-spark svg { width: 100%; height: 100%; display: block; }

/* =================================================================
   Status-Karten (oben in Objekte-Liste, nach makler.jsx Mockup)
   Active-Card = DARK (schwarzer Hintergrund, weiße Schrift) wie im Mockup
   ================================================================= */
.status-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 22px;
}
@media (max-width: 980px) { .status-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .status-cards { grid-template-columns: 1fr; } }
.status-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; padding: 18px 20px 20px;
    display: flex; flex-direction: column; gap: 5px;
    text-decoration: none; color: inherit;
    transition: transform .12s, box-shadow .12s, border-color .12s;
    position: relative; overflow: hidden;
    min-height: 130px;
}
.status-card::before {
    content: ''; position: absolute; top: 14px; left: 18px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent, var(--ink));
}
.status-card .sc-label {
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    text-transform: none; letter-spacing: -0.005em;
    margin-left: 16px;
}
.status-card .sc-value {
    font-size: 38px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--ink); margin: 8px 0 2px; font-feature-settings: "tnum" 1; line-height: 1;
}
.status-card .sc-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.status-card .sc-delta { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; font-weight: 500; }
.status-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    border-color: var(--ink-4);
    text-decoration: none;
}
/* Active = DARK card (Mockup: "Aktiv" ist dunkel selektiert) */
.status-card.on {
    background: var(--ink); color: #fff; border-color: var(--ink);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.status-card.on .sc-label { color: rgba(255,255,255,0.85); }
.status-card.on .sc-value { color: #fff; }
.status-card.on .sc-sub   { color: rgba(255,255,255,0.65); border-top-color: rgba(255,255,255,0.12); }
.status-card.on .sc-delta { color: rgba(255,255,255,0.85); }
.status-card.on::before   { background: #fff; opacity: 0.85; }
.status-card.on .sc-tag   { background: rgba(255,255,255,0.18); color: #fff; }
.status-card .sc-tag {
    position: absolute; top: 14px; right: 14px;
    font-size: 10.5px; font-weight: 600;
    background: var(--line-soft); color: var(--ink-3);
    padding: 3px 9px; border-radius: 999px;
    letter-spacing: 0;
}

/* obj-link Grid muss 6 Spalten haben (Thumb / Main / Stats / Perf / Anfr / Meta) */
.obj-link {
    display: grid !important;
    grid-template-columns: 64px 1fr auto 130px 64px auto !important;
    gap: 18px !important;
    align-items: center;
}
@media (max-width: 1180px) {
    .obj-link { grid-template-columns: 56px 1fr auto !important; }
    .obj-perf, .obj-anfr, .obj-meta { display: none !important; }
}

/* ===== Performance-Bar + Anfragen-Counter in Objekte-Liste ===== */
.obj-perf {
    display: flex; flex-direction: column; align-items: stretch;
    min-width: 110px; gap: 4px;
}
.obj-perf-bar {
    height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden;
    position: relative;
}
.obj-perf-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #2E7D5B 0%, #2E7D5B 100%);
    transition: width .25s;
}
.obj-perf-bar-fill.warm { background: linear-gradient(90deg, #C28A2E 0%, #C76A3E 100%); }
.obj-perf-bar-fill.cold { background: linear-gradient(90deg, #A1A1A6 0%, #6E6E73 100%); }
.obj-perf-lbl { font-size: 10.5px; color: var(--ink-3); text-align: right; font-feature-settings: "tnum" 1; }

.obj-anfr {
    display: flex; flex-direction: column; align-items: flex-end;
    min-width: 64px; padding-right: 4px;
}
.obj-anfr-v { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; font-feature-settings: "tnum" 1; }
.obj-anfr-l { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

/* HOT-Badge im Title */
.obj-hot-badge {
    background: rgba(199,71,43,0.10); color: #C9472B;
    font-size: 9.5px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.04em; text-transform: uppercase;
}

/* Filter-Chip-Bar */
.filter-chips {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 10px;
}
.filter-chip {
    background: var(--paper); border: 1px solid var(--line);
    color: var(--ink-2); padding: 6px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.filter-chip:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.filter-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-chip .chip-cnt { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.7; }

/* Status-Filter-Reihe (objekte.php) */
.status-chips { margin-top: 8px; }
.status-chips .chips-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-3); font-weight: 600; margin-right: 2px;
}
/* Farbige Aktiv-Zustände je Status */
.filter-chip.chip-s-aktiv.on     { background: var(--forest-3); border-color: var(--forest-3); }
.filter-chip.chip-s-vermietet.on { background: #1E8F4B; border-color: #1E8F4B; }
.filter-chip.chip-s-verkauft.on  { background: var(--ink); border-color: var(--ink); }
.filter-chip.chip-s-inaktiv.on,
.filter-chip.chip-s-archiviert.on{ background: var(--ink-3); border-color: var(--ink-3); }

/* View-mode tabs (Liste/Galerie/Karte) */
.view-tabs {
    display: inline-flex; background: var(--paper-2); border: 1px solid var(--line);
    border-radius: 9px; padding: 2px; gap: 2px;
}
.view-tab {
    background: transparent; border: 0; padding: 5px 12px; border-radius: 7px;
    font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.view-tab:hover { color: var(--ink); }
.view-tab.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* =================================================================
   Landing-Page (Expose) — Sticky-Sidebar-Stil
   ================================================================= */
.lp-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; max-width: 1180px; margin: 0 auto; padding: 24px; }
@media (max-width: 980px) { .lp-layout { grid-template-columns: 1fr; } }
.lp-side { position: sticky; top: 24px; align-self: start; }
.lp-card-sticky {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px;
    box-shadow: var(--shadow-md);
}

/* =================================================================
   Misc Tweaks
   ================================================================= */
a { color: var(--ink); }
a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.link { color: var(--ink); border-bottom: 1px solid var(--ink-4); padding-bottom: 1px; }
a.link:hover { border-bottom-color: var(--ink); text-decoration: none; }

.muted { color: var(--ink-3); }
.up, .up-b {
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 11px; font-weight: 600;
}
.up { color: var(--ink-3); }
.up-b { color: var(--ink); }

.flash {
    border-radius: 10px; padding: 12px 16px;
    border: 1px solid var(--line);
}
.flash-ok  { background: rgba(46,125,91,0.08); color: #2E7D5B; border-color: rgba(46,125,91,0.25); }
.flash-err { background: rgba(201,71,43,0.08); color: var(--neg); border-color: rgba(201,71,43,0.25); }

.modal-backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); }
.modal-box { border-radius: 16px; box-shadow: var(--shadow-lg); }
.modal-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

/* ===== Mobile-Navigation: Off-Canvas-Drawer + Topbar (<700px) ===== */
.m-topbar { display: none; }
.m-nav-backdrop { display: none; }
@media (max-width: 700px) {
  /* Sidebar wird zum einschiebbaren Drawer (statt display:none) */
  .sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; z-index: 1001;
    height: 100dvh; width: 264px; max-width: 84vw;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.18); overflow-y: auto;
  }
  body.nav-open .sidebar { transform: none; }

  /* Mobile-Topbar (Hamburger + Marke + Schnellzugriff) */
  .m-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 900;
    height: 54px; padding: 0 12px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .m-topbar .m-burger, .m-topbar .m-search {
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink);
    border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  }
  .m-topbar .m-burger svg, .m-topbar .m-search svg { width: 20px; height: 20px; }
  .m-topbar .m-brand { font-family: "IBM Plex Serif", serif; font-size: 17px; font-weight: 500; flex: 1; }
  .m-topbar .m-search { margin-left: auto; }

  /* Backdrop */
  .m-nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35);
    z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  body.nav-open .m-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* Layout auf Mobil: Topbar oben, Inhalt volle Breite */
  body.app { flex-direction: column; }
  .app-page { width: 100%; max-width: 100%; }
}

/* =================================================================
   Inline-Icon-Klasse (.ic) — für überall im UI inline-SVG ersatz
   für bunte Emojis. Erbt currentColor.
   ================================================================= */
.ic {
    width: 14px; height: 14px;
    display: inline-block; vertical-align: -2px;
    margin-right: 4px;
    flex-shrink: 0;
    color: currentColor;
}
.ic.ic-sm { width: 12px; height: 12px; }
.ic.ic-md { width: 16px; height: 16px; vertical-align: -3px; }
.ic.ic-lg { width: 20px; height: 20px; vertical-align: -4px; }
.ic.ic-no-mr { margin-right: 0; }

/* Force text-presentation für alle Glyphen (kein Emoji-Color) */
html, body, .app, * {
    font-variant-emoji: text;
}

/* =================================================================
   Aktivitäten-Sektion — Apple-Refresh (kontakt.php / objekt.php)
   Lädt nach app.css; rein additive, gescopte Overrides.
   ================================================================= */

/* --- Toolbar-Buttons (Neue Mail / Termin / Aufgabe) --- */
.act-head .btn.ghost.sm {
    border-radius: 999px;
    padding: 6px 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--paper);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.act-head .btn.ghost.sm:hover {
    background: var(--paper-2);
    border-color: var(--ink-4);
    box-shadow: var(--shadow-sm);
}
.act-head .btn.ghost.sm:active { transform: scale(0.97); }

/* --- Filter-Chips (segmented, iOS-style) --- */
.act-filter {
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}
.act-filter .pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--paper-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px; font-weight: 500; line-height: 1;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.act-filter .pill .ic { margin-right: 0; width: 14px; height: 14px; opacity: .85; }
.act-filter .pill:hover {
    background: var(--paper);
    border-color: var(--ink-4);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.act-filter .pill.on {
    background: var(--ink); color: #fff; border-color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.act-filter .pill.on .ic { opacity: 1; }
.act-filter .pill-cnt {
    margin-left: 1px;
    background: rgba(0,0,0,.06);
    color: var(--ink-3);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px; font-weight: 600;
    font-family: "IBM Plex Mono", monospace;
}
.act-filter .pill.on .pill-cnt { background: rgba(255,255,255,.22); color: #fff; }

/* --- Schnell-Notiz-Box --- */
.notiz-quick {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}
.notiz-quick textarea {
    border-radius: var(--r-sm);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.notiz-quick textarea:focus {
    outline: none;
    border-color: var(--forest-3);
    box-shadow: 0 0 0 3px rgba(46,125,91,.15);
}

/* --- Timeline-Karten --- */
.act-body {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.act-item:hover .act-body {
    box-shadow: var(--shadow-md);
    border-color: var(--ink-4);
}
.act-item .act-icon { box-shadow: var(--shadow-sm); }

/* --- Verknüpfte-Objekt-Chips --- */
.vo-chip {
    border-radius: var(--r-md);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vo-chip:hover { box-shadow: var(--shadow-sm); }
.vo-item { display: inline-flex; align-items: center; gap: 4px; }
.vo-expose {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: var(--r-md);
    font-size: 11.5px; font-weight: 500; line-height: 1;
    color: var(--ink-2); text-decoration: none;
    background: var(--paper-2); border: 1px solid var(--line);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.vo-expose .ic { width: 13px; height: 13px; margin-right: 0; }
.vo-expose:hover { background: var(--forest-3); color: #fff; border-color: var(--forest-3); }

/* --- Mobile / iOS (iPhone) --- */
@media (max-width: 700px) {
    /* Toolbar: Titel oben, Buttons als volle Reihe darunter */
    .act-head { gap: 8px; }
    .act-head h2 { flex: 1 1 100%; }
    .act-head .btn.ghost.sm {
        flex: 1 1 0; justify-content: center;
        min-height: 40px; padding: 8px 10px;
    }

    /* Filter-Chips: horizontal scrollbar statt 2-3 Zeilen Umbruch */
    .act-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -16px; margin-right: -16px;
        padding-left: 16px; padding-right: 16px;
    }
    .act-filter::-webkit-scrollbar { display: none; }
    .act-filter .pill {
        flex: 0 0 auto;
        min-height: 38px; padding: 8px 14px;
        font-size: 13px;
    }

    /* Schnell-Notiz: 16px verhindert iOS-Auto-Zoom beim Fokus */
    .notiz-quick textarea { font-size: 16px; }

    /* Timeline kompakter, Karten randlos-bündiger */
    .act-item { gap: 10px; }
    .act-item .act-icon { width: 34px; height: 34px; }
    .act-body { padding: 10px 12px; }
    .act-timeline::before { left: 16px; }
    .act-day-header { padding-left: 40px; }
    .vo-chip small { max-width: 150px; }
}

/* iOS: kein grauer Tap-Blitz, sauberes Touch-Feedback */
.act-head .btn, .act-filter .pill, .vo-chip,
.notiz-quick .btn, .act-notiz-del {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* iOS: untere Safe-Area (Home-Indicator) nicht überlappen */
@supports (padding: max(0px)) {
    .app-page { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}

/* =================================================================
   Termine — View-Toggle (Liste/Kalender) + Monatskalender
   ================================================================= */
.termine-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin: 4px 0 18px;
}
.view-toggle {
    display: inline-flex; gap: 2px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 999px; padding: 3px;
}
.view-toggle .vt-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    text-decoration: none; line-height: 1;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.view-toggle .vt-btn .ic { margin-right: 0; width: 14px; height: 14px; }
.view-toggle .vt-btn:hover { color: var(--ink); }
.view-toggle .vt-btn.on {
    background: var(--paper); color: var(--ink);
    box-shadow: var(--shadow-sm); font-weight: 600;
}

.cal-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cal-nav-label {
    font-family: "IBM Plex Serif", serif; font-size: 15px;
    min-width: 150px; text-align: center; color: var(--ink);
}
.cal-nav .btn.sm { min-width: 34px; text-align: center; }

.cal-wrap {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-sm);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { margin-bottom: 6px; }
.cal-wd {
    text-align: center; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
    padding: 2px 0;
}
.cal-cell {
    min-height: 104px; padding: 6px;
    background: var(--paper-2); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    display: flex; flex-direction: column; gap: 3px;
}
.cal-cell.cal-empty { background: transparent; border-color: transparent; }
.cal-cell.cal-today { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 1px; }
.cal-cell.cal-today .cal-daynum {
    color: #fff; background: var(--ink);
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; align-self: flex-start;
}
.cal-ev {
    display: flex; align-items: baseline; gap: 4px;
    padding: 2px 6px; border-radius: 5px;
    font-size: 11px; line-height: 1.35; text-decoration: none;
    color: var(--ink); background: var(--line-soft);
    border-left: 3px solid var(--ink-4);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}
.cal-ev:hover { background: var(--line); }
.cal-ev-time { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-3); flex-shrink: 0; }
.cal-ev-titel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Status-Akzente (Linksbalken) */
.cal-ev.status-geplant      { border-left-color: var(--amber); }
.cal-ev.status-bestaetigt   { border-left-color: var(--forest-3); }
.cal-ev.status-durchgefuehrt{ border-left-color: var(--ink-4); opacity: .75; }
.cal-ev.status-abgesagt     { border-left-color: var(--neg); opacity: .6; text-decoration: line-through; }
.cal-ev.status-no_show      { border-left-color: var(--ink); opacity: .6; }

/* Kalender mobil/iOS */
@media (max-width: 700px) {
    .cal-nav { margin-left: 0; }
    .cal-nav-label { min-width: 110px; font-size: 14px; }
    .cal-wrap { padding: 8px; }
    .cal-grid { gap: 3px; }
    .cal-cell { min-height: 64px; padding: 4px; }
    .cal-wd { font-size: 9.5px; }
    .cal-ev { padding: 1px 4px; font-size: 10px; }
    .cal-ev-time { display: none; }   /* Platz sparen: nur Titel */
}

/* =================================================================
   Sidebar Mail-Unterpunkte (Posteingang/Gesendet/Spam/Gelöscht)
   ================================================================= */
.nav-sub {
    display: flex; flex-direction: column;
    margin: 2px 0 6px; padding-left: 30px; gap: 1px;
}
.nav-sub a {
    display: block; padding: 6px 10px;
    font-size: 12.5px; color: var(--ink-3);
    border-radius: var(--r-sm); text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.nav-sub a:hover { background: var(--line-soft); color: var(--ink); }
.nav-sub a.active { background: var(--line-soft); color: var(--ink); font-weight: 600; }

/* =================================================================
   Inbox — Auswahl-Checkboxen + Bulk-Löschen-Bar
   ================================================================= */
.conv-items li { position: relative; }
.conv-check {
    position: absolute; left: 11px; top: 13px; z-index: 2;
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--forest-3);
    -webkit-tap-highlight-color: transparent;
}
.conv-items li a { padding-left: 36px; }

.bulk-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 14px;
    background: var(--paper-2); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.bulk-bar .bulk-all {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.bulk-bar .bulk-all input { accent-color: var(--forest-3); }
.bulk-bar .bulk-count { font-size: 12px; color: var(--ink-3); margin-right: auto; }
.bulk-bar .btn.danger {
    color: #fff; background: var(--neg); border-color: var(--neg);
}
.bulk-bar .btn.danger:hover { background: #9f2f22; border-color: #9f2f22; }
.bulk-bar .btn.danger:disabled {
    background: var(--line); color: var(--ink-4); border-color: var(--line);
    cursor: not-allowed;
}

/* ============================================================
   Such-Combobox (Kontakt-/Objekt-Picker) — ersetzt Scroll-Selects
   ============================================================ */
.combo { position: relative; }
.combo .combo-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 8px);
    background: var(--paper, #fff);
    color: var(--ink, #1d1d1f);
    font: inherit;
    box-sizing: border-box;
}
.combo .combo-search:focus {
    outline: none;
    border-color: var(--ink, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.combo-results {
    position: absolute;
    z-index: 60;
    left: 0; right: 0;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--paper, #fff);
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16));
    padding: 4px;
    -webkit-overflow-scrolling: touch;
}
.combo-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: var(--r-sm, 8px);
    cursor: pointer;
    line-height: 1.25;
}
.combo-item strong { font-weight: 600; font-size: 13.5px; }
.combo-item small { color: var(--ink-4, #86868b); font-size: 12px; }
.combo-item:hover, .combo-item.on { background: var(--hl, rgba(0,0,0,.05)); }
.combo-empty { padding: 10px 12px; color: var(--ink-4, #86868b); font-size: 13px; }
.combo-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 8px);
    background: var(--bg, #f5f5f7);
}
.combo-chip-in { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-chip-in strong { font-weight: 600; font-size: 13.5px; }
.combo-chip-open { text-decoration: none; color: var(--ink-4, #86868b); font-size: 14px; padding: 2px 4px; }
.combo-chip-open:hover { color: var(--ink, #1d1d1f); }
.combo-chip-x {
    border: 0; background: transparent; cursor: pointer;
    color: var(--ink-4, #86868b); font-size: 18px; line-height: 1; padding: 0 4px;
}
.combo-chip-x:hover { color: var(--neg, #c0392b); }

/* Mobile: größere Tap-Targets, kein iOS-Auto-Zoom */
@media (max-width: 700px) {
    .combo .combo-search { font-size: 16px; padding: 10px 12px; }
    .combo-item { padding: 11px 12px; }
    .combo-results { max-height: 50vh; }
}

/* Kalender-Abo-Panel (Termine) */
.cal-subscribe { position: relative; }
.cal-subscribe > summary { list-style: none; cursor: pointer; }
.cal-subscribe > summary::-webkit-details-marker { display: none; }
.cal-subscribe-pop {
    position: absolute; right: 0; z-index: 70; margin-top: 6px;
    width: 320px; max-width: 90vw; padding: 14px; text-align: left;
    background: var(--paper, #fff); border: 1px solid var(--line);
    border-radius: var(--r-md, 12px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16));
}
.cal-subscribe-pop .btn { margin: 0 6px 6px 0; }
@media (max-width: 700px) { .cal-subscribe-pop { width: 92vw; } }