/* ============================================================
   Avison Studios Dashboard — Teil 2: Dashboard & To-dos
   Briefing („Wichtig"), Kalender, Termine, Tagesfokus, To-do-Liste
   (farbcodiert nach Kunde und Dringlichkeit), Projektplanung.
   Die Reihenfolge der <link>-Tags in index.html muss so bleiben.
   ============================================================ */

/* ============ Briefing („Wichtig") ============ */
.card-alerts { background: var(--charcoal); color: var(--almond); }
.card-alerts h2 { color: var(--almond); }
.card-alerts .kicker { color: var(--orange-soft); }
.alerts-sub { font-size: 13px; color: rgba(233,218,197,0.5); }
.alerts-list { display: flex; flex-direction: column; gap: 6px; }
.alert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(233,218,197,0.05);
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.alert-row:hover { background: rgba(233,218,197,0.11); }
.alert-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.alert-bad .alert-badge { background: var(--orange); color: #FFF3E8; }
.alert-warn .alert-badge { background: var(--almond); color: var(--charcoal); }
.alert-good .alert-badge { background: var(--moss); color: #F5F5E6; }
.alert-text { flex: 1; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.alert-text strong, .alert-text b { font-weight: 600; }
.alert-client {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(233,218,197,0.7);
    flex-shrink: 0;
    white-space: nowrap;
}
.alert-client::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--client-color, var(--powder)); }
.alert-client img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--white); }
.alert-dismiss { color: rgba(233,218,197,0.4); flex-shrink: 0; }
.alert-dismiss:hover { color: var(--almond); background: rgba(233,218,197,0.12); }
.alerts-empty { font-size: 13px; color: #A6B85A; margin: 2px 0; }
.card-alerts .who-chip.static { border-color: transparent; }

/* ============ Kalender (eigene Monatsansicht) ============ */
.calendar-embed { flex: 1; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-title { font-weight: 600; font-size: 14px; text-transform: none; letter-spacing: 0; }
.cal-nav { display: inline-flex; gap: 4px; }
.cal-nav .btn { background: none; color: var(--ink-2); padding: 4px 8px; font-size: 13px; }
.cal-nav .btn:hover { background: var(--surface-2); color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dows { margin-bottom: 4px; }
.cal-dow { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); text-align: center; padding: 2px 0; }
.cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 38px;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 9px;
    padding: 6px 2px 4px;
    cursor: pointer;
    font-family: var(--font-display);
    color: var(--ink);
    transition: background 0.12s;
}
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.out { color: var(--ink-3); }
.cal-cell.out .cal-num { font-weight: 400; }
.cal-cell.today { background: var(--charcoal); color: var(--almond); box-shadow: none; }
.cal-cell.today .cal-num { color: var(--almond); font-weight: 600; }
.cal-cell.selected { background: var(--tone-blue); }
.cal-cell.today.selected { background: var(--charcoal); outline: 2px solid var(--powder); outline-offset: 1px; }
.cal-num { font-weight: 500; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
/* Kompakt: Punkte statt Chips – die Details stehen in der Tagesliste darunter */
.cal-chips, .cal-more { display: none; }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 5px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--charcoal); }
.cal-dot.own { background: var(--client-color, var(--charcoal)); }
.cal-dot.gcal { background: #7f95b8; }
.cal-dot.deadline { background: var(--orange); }
.cal-cell.today .cal-dot { background: var(--almond); }
.cal-daylist { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.cal-dayrow {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.cal-dayrow:last-child { border-bottom: none; }
.cal-daytime { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-daytitle { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.cal-daykind { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); }
.cal-dayrow.deadline .cal-daykind { color: var(--orange); }
.cal-dayrow.gcal .cal-daykind { color: #7f95b8; }
.cal-hint { margin: 10px 0 0; font-size: 12px; }
.cal-daylist h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }

/* ============ Termine ============ */
.events-list { display: flex; flex-direction: column; gap: 6px; }
.event-row {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--surface-2);
    border: none;
    border-radius: 10px;
    box-shadow: none;
    padding: 10px 12px;
}
.event-row.has-client { background: color-mix(in srgb, var(--client-color) 14%, var(--surface)); }
.event-row.editable { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.event-row.editable:hover { box-shadow: var(--shadow-card); transform: none; }
.event-row.editable:active { transform: translateY(1px); box-shadow: none; }
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    background: var(--surface);
    color: var(--ink);
    border: none;
    border-radius: 8px;
    padding: 6px 6px;
    flex-shrink: 0;
}
.event-date span { font-weight: 600; font-size: 13px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.event-date small { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.event-row.has-client .event-date { color: var(--client-color); }
.event-title { font-weight: 600; font-size: 13px; line-height: 1.3; }
.event-info { min-width: 0; flex: 1; }
.event-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.event-client { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--client-color, var(--orange)); }
.badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border: none;
    background: rgba(35,36,37,0.08);
    color: var(--ink-2);
    border-radius: 6px;
    margin-right: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-block;
    transform: none;
}
.event-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ============ To-dos ============ */
.card-todos { background: var(--surface); }
.progress-label { font-size: 13px; color: var(--tone-moss-ink); font-weight: 500; }
.progress-track { height: 6px; border: none; border-radius: 3px; background: rgba(35,36,37,0.10); margin-bottom: 16px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--moss); border-radius: 3px; transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---- Tagesfokus: „Heute" ---- */
.focus-box {
    background: var(--tone-almond);
    border: none;
    border-radius: 12px;
    box-shadow: none;
    padding: 14px 16px 12px;
    margin-bottom: 16px;
}
.focus-box.empty { background: var(--surface-2); }
.focus-box.geschafft { background: var(--tone-moss); }
.focus-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.focus-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.focus-head h3 .ico { color: var(--orange); width: 14px; height: 14px; }
.focus-count { font-size: 12px; color: var(--ink-2); }
.focus-box.geschafft .focus-count { color: var(--tone-moss-ink); }
.focus-track { height: 5px; background: rgba(35,36,37,0.10); border-radius: 3px; overflow: hidden; margin: 10px 0 6px; }
.focus-track span { display: block; height: 100%; background: var(--moss); border-radius: 3px; transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.focus-empty { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); max-width: 70ch; line-height: 1.5; }
.focus-star-demo { color: var(--orange); font-size: 15px; }
.focus-done-note { margin: 8px 0 0; font-size: 12px; font-weight: 500; color: var(--tone-moss-ink); }
.focus-hint { margin: 8px 0 0; }
.focus-list { column-count: 1 !important; column-width: auto !important; margin-top: 4px; }
.focus-list .todo { background: var(--surface); }
.focus-list .todo.has-client { background: color-mix(in srgb, var(--client-color) 16%, var(--surface)); }

/* ---- Filterleiste ---- */
.todo-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.todo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    background: var(--surface-2);
    border: none;
    border-radius: var(--r-pill);
    padding: 6px 12px;
    cursor: pointer;
    color: var(--ink-2);
    transition: background 0.15s, color 0.15s;
}
.todo-chip:hover { color: var(--ink); transform: none; }
.todo-chip img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; background: var(--white); }
.todo-chip.has-color { border-left: none; background: color-mix(in srgb, var(--client-color) 14%, var(--surface-2)); color: var(--ink); }
.todo-chip.has-color::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--client-color); flex-shrink: 0; }
.todo-chip.has-color img + *, .todo-chip.has-color img { margin-left: -2px; }
.todo-chip.active { background: var(--charcoal); color: var(--almond); box-shadow: none; }
.todo-chip.has-color.active { background: var(--client-color); color: #fff; }
.todo-chip.has-color.active::before { background: rgba(255,255,255,0.7); }
.chip-count { font-size: 11px; font-weight: 600; opacity: 0.7; padding: 0; min-width: 0; background: none; border-radius: 0; }
.todo-chip.active .chip-count { background: none; opacity: 0.8; }

/* ---- Werkzeugzeile ---- */
.todo-toolbar {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    padding: 4px 2px 10px;
    border-bottom: none;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--ink-2);
}
.toolbar-group { display: inline-flex; align-items: center; gap: 6px; }
.toolbar-label, .toolbar-check { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-2); font-weight: 500; }
.toolbar-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.toolbar-check input { width: 15px; height: 15px; accent-color: var(--moss); cursor: pointer; }
.toolbar-select {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 26px 4px 8px;
    border: none;
    border-radius: 8px;
    background-color: var(--surface-2);
    width: auto;
    color: var(--ink);
}
.toolbar-count { margin-left: auto; font-size: 12px; letter-spacing: 0; color: var(--ink-3); }
#todoWhoFilter .who-chip { cursor: pointer; }
#todoWhoFilter .who-chip.dim { opacity: 0.35; }
#todoWhoFilter .who-chip.picked { outline: 2px solid var(--charcoal); outline-offset: 2px; }

/* ---- Liste ---- */
.todo-list { list-style: none; margin: 0; padding: 0; }
/* Mehrspaltig erst ab breiten Schirmen, damit die farbigen Zeilen ruhig bleiben */
.card-todos .todo-list { column-width: 420px; column-count: 2; column-gap: 24px; }
@media (max-width: 1100px) { .card-todos .todo-list { column-count: 1; column-width: auto; } }

.todo-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--client-color, var(--ink-3));
    padding: 14px 2px 6px;
    break-inside: avoid;
    break-after: avoid;
}
.todo-group img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; background: var(--white); }
.todo-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Gruppenköpfe: Überfällig · Heute · Diese Woche · Später · Ohne Termin */
.todo-sect { list-style: none; break-inside: avoid; break-after: avoid; padding: 14px 0 4px; }
.todo-sect:first-child { padding-top: 2px; }
.todo-sect-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px 6px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
}
.todo-sect-head:hover { color: var(--ink); }
.todo-sect-caret { font-size: 9px; width: 10px; flex-shrink: 0; }
.todo-sect-label { flex: 1; }
.todo-sect-n { font-size: 11px; background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 8px; min-width: 22px; text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.todo-sect.g-over .todo-sect-head { color: var(--danger); }
.todo-sect.g-over .todo-sect-n { background: var(--tone-red); color: var(--tone-red-ink); }
.todo-sect.g-today .todo-sect-head { color: var(--tone-orange-ink); }
.todo-sect.g-today .todo-sect-n { background: var(--tone-orange); color: var(--tone-orange-ink); }
.todo-sect.g-week .todo-sect-head { color: var(--tone-blue-ink); }
.todo-sect.g-week .todo-sect-n { background: var(--tone-blue); color: var(--tone-blue-ink); }
.todo-sect.g-done .todo-sect-head { opacity: 0.6; }

/* ---- Zeile: Farbe trägt die Zuordnung ----
   Jede Aufgabe ist eine Tonfläche in der Kundenfarbe. Ohne Kunde bleibt die
   Zeile neutral; hohe Dringlichkeit färbt sie orange, Überfälliges rot. */
.todo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding: 10px 12px 10px 10px;
    margin-bottom: 6px;
    border: none;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 15px;
    break-inside: avoid;
    transition: box-shadow 0.15s, background 0.15s;
    position: relative;
}
.todo:hover { box-shadow: var(--shadow-card); }
.todo.has-client { background: color-mix(in srgb, var(--client-color) 16%, var(--surface)); border-left: none; padding-left: 10px; margin-left: 0; }
.todo.has-client:hover { background: color-mix(in srgb, var(--client-color) 22%, var(--surface)); }
.todo.wichtig:not(.has-client) { background: var(--tone-orange); border-left: none; padding-left: 10px; margin-left: 0; }
.todo.wichtig .todo-text { font-weight: 600; }
.todo.ueberfaellig { box-shadow: inset 0 0 0 1.5px rgba(179,39,27,0.35); }
.todo label, .todo-head { display: flex; align-items: center; gap: 11px; cursor: pointer; flex: 1; min-width: 0; }
.todo-text { line-height: 1.3; overflow-wrap: break-word; hyphens: auto; font-weight: 500; }
.detail-dot { margin-left: 6px; font-size: 12px; color: var(--ink-3); }
.todo-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 10px; }
.todo-sub { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding-left: 33px; }

/* Häkchen: der Kreis trägt die Kundenfarbe */
.todo input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border: 2px solid var(--client-color, rgba(35,36,37,0.35));
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    padding: 0;
    margin: 0;
    transition: background 0.15s, border-color 0.15s;
}
.todo.wichtig:not(.has-client) input[type=checkbox] { border-color: var(--orange); }
.todo input[type=checkbox]:checked { background: var(--moss); border-color: var(--moss); }
.todo input[type=checkbox]:checked::after { content: '✓'; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; }
.todo input[type=checkbox]:focus { box-shadow: none; }
.todo.done { background: var(--surface-2); opacity: 0.75; }
.todo.done .todo-text { text-decoration: line-through; text-decoration-color: rgba(35,36,37,0.4); color: var(--ink-3); font-weight: 450; }
.todo.done .todo-sub { opacity: 0.6; }

/* Kundenschild in der Infozeile: voll in der Kundenfarbe */
.todo-client {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff;
    background: var(--client-color);
    border: none;
    border-radius: 6px;
    padding: 0 8px;
    height: 21px;
    flex-shrink: 0;
    white-space: nowrap;
}
.todo-client img { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; background: var(--white); }
.todo.done .todo-client { opacity: 0.5; }

/* Kleine Chips: Deadline, Person, Wiederholung, Ziel */
.sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 0 8px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.65);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.sub-chip:hover { background: var(--surface); color: var(--ink); }
.sub-chip.ghost { background: none; color: var(--ink-3); border: 1px dashed rgba(35,36,37,0.25); }
.sub-chip.ghost:hover { color: var(--orange); border-color: var(--orange); }
.sub-chip.icon { width: 21px; padding: 0; justify-content: center; font-size: 11px; }
.sub-chip.due { font-weight: 600; }
.sub-chip.due.overdue { background: var(--danger); color: #fff; }
.sub-chip.who i {
    display: inline-grid;
    place-content: center;
    width: 15px; height: 15px;
    margin-left: -3px;
    border-radius: 50%;
    background: rgba(35,36,37,0.12);
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
}
.sub-chip.who.simon i { background: var(--moss); color: #fff; }
.sub-chip.who.endrit i { background: var(--powder); color: var(--charcoal); }
.sub-chip.repeat.active { color: var(--tone-moss-ink); }
.sub-chip.prio.hoch { background: var(--orange); color: #FFF3E8; font-weight: 600; }
.sub-chip.carried { background: rgba(190,94,33,0.14); color: var(--tone-orange-ink); cursor: default; }
.sub-chip.goal { color: var(--tone-moss-ink); }
.sub-chip.star-plan { background: var(--tone-blue); color: var(--tone-blue-ink); }

/* Stern: für heute vornehmen */
.focus-star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 8px;
    color: rgba(35,36,37,0.25);
    transition: color 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.focus-star:hover { color: var(--orange); transform: scale(1.12); }
.focus-star.on { color: var(--orange); }
.todo.done .focus-star { opacity: 0.4; }

/* Was noch nicht gesetzt ist, erscheint erst beim Drüberfahren */
.only-hover { opacity: 0; transition: opacity 0.12s; }
.todo:hover .only-hover, .todo:focus-within .only-hover,
.pj-card:hover .only-hover, .pj-card:focus-within .only-hover,
.event-row:hover .only-hover, .event-row:focus-within .only-hover { opacity: 1; }
.todo-actions .icon-btn.only-hover { color: var(--ink-3); }
.todo-actions .icon-btn.only-hover:hover { color: var(--danger); }
@media (hover: none) { .only-hover { display: none; } }

/* Kompakte Variante (Kundenbereich, Dashboard-Auszug) */
.todo-list.small .todo { font-size: 14px; padding: 8px 10px 8px 8px; row-gap: 4px; margin-bottom: 5px; }
.todo-list.small .todo input[type=checkbox] { width: 20px; height: 20px; }
.todo-list.small .todo label, .todo-list.small .todo-head { gap: 9px; }
.todo-list.small .todo-sub { padding-left: 29px; gap: 4px; }
.todo-list.small .sub-chip, .todo-list.small .todo-client { height: 19px; font-size: 10.5px; padding: 0 7px; }

/* Person als Kreis */
.who-chip {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: inline-grid;
    place-content: center;
    color: var(--ink);
    flex-shrink: 0;
}
.who-chip.none { color: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(35,36,37,0.25); }
.who-chip.simon { background: var(--moss); color: #fff; }
.who-chip.endrit { background: var(--powder); color: var(--charcoal); }
.who-chip.static { cursor: default; }
.todo-legend { margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ---- Dashboard-Auszug: Fokus + Fälliges, Link zum Bereich ---- */
.dash-todos-empty { font-size: 13px; color: var(--ink-2); margin: 0; }
.dash-todos .todo-group { padding-top: 10px; }
.dash-todos .todo-group:first-child { padding-top: 0; }
.dash-todos-more { margin-top: 8px; }

/* ============ Projektplanung ============ */
.pj-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 2px; }
.pj-col {
    background: var(--surface-2);
    border: none;
    border-radius: 12px;
    padding: 12px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    transition: background 0.12s, box-shadow 0.12s;
}
.pj-col.drop-here { background: var(--tone-orange); box-shadow: inset 0 0 0 2px var(--orange); }
.pj-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pj-col-head h4 { margin: 0; flex: 1; font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; }
.pj-col-count { font-family: var(--font-display); font-weight: 600; font-size: 11px; background: var(--surface); color: var(--ink-2); border-radius: var(--r-pill); min-width: 22px; text-align: center; padding: 2px 8px; }
.pj-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pj-empty { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.pj-card {
    background: var(--surface);
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(35,36,37,0.04);
    padding: 9px 12px;
    cursor: grab;
    position: relative;
    transition: box-shadow 0.15s;
}
.pj-card:hover { box-shadow: var(--shadow-card); border-color: transparent; }
.pj-card.dragging { opacity: 0.45; cursor: grabbing; }
.pj-card-title { font-weight: 500; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; padding-right: 4px; }
.pj-dot { margin-left: 6px; color: var(--ink-3); font-size: 12px; }
.pj-card-sub { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.pj-card-sub:empty { display: none; }
.pj-card-sub .who-chip { width: 20px; height: 20px; font-size: 10px; }
.pj-card-actions { display: flex; gap: 0; justify-content: flex-end; margin-top: 2px; }
.pj-card-actions .icon-btn { font-size: 14px; padding: 1px 6px; opacity: 0.4; }
.pj-card:hover .pj-card-actions .icon-btn { opacity: 1; }
.pj-card-actions .icon-btn:disabled { opacity: 0.15; cursor: default; }
.pj-card-actions .icon-btn:disabled:hover { background: none; color: var(--ink-3); }
@media (hover: none) { .pj-card-actions .icon-btn { opacity: 0.8; font-size: 17px; padding: 3px 9px; } }
.pj-add { margin-top: 10px; }
.pj-add input { width: 100%; background: transparent; border: none; border-radius: 8px; padding: 7px 6px; font-family: var(--font-display); font-size: 13px; color: var(--ink); }
.pj-add input::placeholder { color: var(--ink-3); }
.pj-add input:focus { outline: none; background: var(--surface); box-shadow: none; }
@media (max-width: 900px) { .pj-board { grid-template-columns: minmax(0, 1fr); } }

/* ============ Mobil ============ */
@media (max-width: 720px) {
    .todo { font-size: 14px; }
    .focus-box { padding: 12px 12px 10px; margin-bottom: 14px; }
    .todo-sub { padding-left: 0; }
    .cal-daytime { font-size: 11px; }
}

/* Gruppen im Dashboard-Auszug */
.todo-group.g-over { color: var(--danger); }
.todo-group.g-today { color: var(--tone-orange-ink); }
.todo-group.g-focus { color: var(--tone-moss-ink); }

/* Infozeile nur zeigen, wenn sie etwas sagt: reine Platzhalter-Chips
   bleiben eingeklappt und kommen erst beim Drüberfahren. */
.todo-sub:not(:has(> :not(.only-hover))) { display: none; }
.todo:hover .todo-sub, .todo:focus-within .todo-sub { display: flex; }
@media (hover: none) { .todo-sub:not(:has(> :not(.only-hover))) { display: none !important; } }
.cal-daylist h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 4px; }

/* ============ Zeilenaufbau: Titel, darunter die Infozeile, rechts die Aktionen ============
   Wie im Entwurf: Häkchen | Titel + Infozeile | Dringlichkeit · Person · Stern.
   Farben und Schilder bleiben. Das Label wird per display:contents aufgelöst,
   damit Häkchen und Titel eigene Rasterzellen bekommen. */
.todo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "box title acts" "box sub acts";
    column-gap: 11px;
    row-gap: 3px;
    align-items: center;
    padding: 9px 12px 9px 10px;
    font-size: 14px;
}
.todo label, .todo-head { display: contents; }
.todo input[type=checkbox] { grid-area: box; align-self: center; }
.todo-text { grid-area: title; cursor: pointer; }
.todo-sub { grid-area: sub; flex: none; padding-left: 0; gap: 5px; font-size: 12px; }
.todo-sub:not(:has(> :not(.only-hover))) { display: none; }
.todo:hover .todo-sub, .todo:focus-within .todo-sub { display: flex; }
.todo-actions { grid-area: acts; margin-left: 6px; gap: 6px; }
.todo-actions .who-chip { width: 22px; height: 22px; font-size: 10px; }
.todo-actions .who-chip.none { background: none; box-shadow: inset 0 0 0 1px rgba(35,36,37,0.25); color: var(--ink-3); }
.todo-actions .who-chip.none:hover { color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.todo-actions .icon-btn { padding: 2px 5px; }
.sub-chip, .todo-client { height: 20px; font-size: 11px; }
.todo-list.small .todo { font-size: 13px; padding: 8px 10px 8px 8px; }
.todo-list.small .todo-sub { padding-left: 0; }
@media (max-width: 720px) {
    .todo-sub { padding-left: 0; }
}
/* Platzhalter-Chips in der Infozeile nehmen keinen Platz weg, solange man nicht drüberfährt */
.todo-sub .only-hover { display: none; }
.todo:hover .todo-sub .only-hover, .todo:focus-within .todo-sub .only-hover { display: inline-flex; opacity: 1; }

/* Kundenchips lassen sich ziehen – die Reihenfolge gilt überall (Tabs, Listen, Briefing) */
.todo-chip.has-color { cursor: grab; }
.todo-chip.dragging { opacity: 0.4; cursor: grabbing; }
.todo-chip.drop-before { box-shadow: -3px 0 0 var(--orange); }
/* Interne Einträge („Wir") bekommen einen kleinen Trenner vor sich */
.todo-chip.intern:first-of-type, .todo-chip:not(.intern) + .todo-chip.intern { margin-left: 10px; position: relative; }
.todo-chip:not(.intern) + .todo-chip.intern::after { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.cli-intern { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13px; }
.cli-intern input { width: 16px; height: 16px; accent-color: var(--orange); }

/* ============ E-Mails ============ */
.mail-stack { display: flex; flex-direction: column; gap: var(--gap); }
.mail-empty { max-width: 720px; gap: 10px; }
.mail-empty h2 { margin-bottom: 4px; }
.mail-empty .btn { align-self: flex-start; margin-top: 6px; }
.mail-head-r { display: flex; align-items: center; gap: 10px; }
.mail-count { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--tone-moss); color: var(--tone-moss-ink); }
.mail-count.hot { background: var(--tone-orange); color: var(--tone-orange-ink); }
.mail-count.bad { background: var(--tone-red); color: var(--tone-red-ink); }
.mail-list { display: flex; flex-direction: column; gap: 4px; }
.mail-row {
    display: grid;
    grid-template-columns: 8px minmax(120px, 220px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}
a.mail-row:hover { background: var(--tone-almond); box-shadow: var(--shadow-card); }
.mail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.mail-from { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-when { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail-error { display: flex; align-items: center; gap: 8px; background: var(--tone-red); color: var(--tone-red-ink); border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 13px; }
.mail-more { margin: 10px 2px 0; }
.mail-acc-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.mail-acc { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.mail-acc-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mail-acc-msg { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.mail-acc-msg.ok { background: var(--tone-moss); color: var(--tone-moss-ink); }
.mail-acc-msg.bad { background: var(--tone-red); color: var(--tone-red-ink); }
@media (max-width: 720px) {
    .mail-row { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "dot from when" "dot subj subj"; row-gap: 2px; }
    .mail-dot { grid-area: dot; align-self: start; margin-top: 6px; }
    .mail-from { grid-area: from; }
    .mail-subject { grid-area: subj; font-size: 13px; color: var(--ink-2); }
    .mail-when { grid-area: when; }
}

/* ============ Verschieben per Gedrückthalten (assets/sortable.js) ============ */
[data-sort-id] { -webkit-touch-callout: none; }
.client-tab[data-sort-id], .todo-chip[data-sort-id], .ci-chip[data-sort-id], .ci-file-tile, .widget-title { user-select: none; -webkit-user-select: none; }
.sort-pressing { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); transform: scale(0.97); }
.sort-placeholder { opacity: 0.3; outline: 1.5px dashed var(--line-strong); outline-offset: 2px; }
.sort-ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    box-shadow: 0 18px 40px -12px rgba(35, 36, 37, 0.35), 0 2px 6px rgba(35, 36, 37, 0.12);
    transform: scale(1.04) rotate(-1deg);
    opacity: 0.96;
    list-style: none;
}
body.sorting, body.sorting * { cursor: grabbing !important; user-select: none !important; }
.widget-title { cursor: grab; }

/* ============ Dateien in den CI-Bereich ziehen ============ */
.ci-drop { position: relative; border-radius: 12px; }
.ci-drop-hint {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tone-orange) 88%, transparent);
    box-shadow: inset 0 0 0 2px var(--orange);
    color: var(--tone-orange-ink);
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
    z-index: 5;
}
.ci-drop-hint .ico { width: 18px; height: 18px; }
.ci-drop.drop-over .ci-drop-hint { display: flex; }
.ci-file-tile.is-logo .ci-file-frame { box-shadow: inset 0 0 0 2px var(--client-color, var(--orange)); border-radius: 10px; }
.ci-logo-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--client-color, var(--orange));
    color: #fff;
    border-radius: 5px;
    padding: 1px 6px;
    margin-right: 6px;
    vertical-align: 1px;
}

/* ============ Kunden-Tabs mit Logo ============ */
.client-tab.logo-only { padding: 6px 14px; min-height: 42px; }
.client-tab.logo-only .tab-logo {
    width: auto;
    height: 28px;
    max-width: 120px;
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    outline: none;
}
.client-tab.logo-only.active {
    background: color-mix(in srgb, var(--client-color) 20%, var(--surface));
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--client-color);
}
.todo-chip img, .todo-client img, .alert-client img, .today-chip img, .todo-group img { object-fit: contain; border-radius: 4px; background: #fff; }

/* ============ Bereich „Wir" (assets/wir.js) ============ */
.wir-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
    margin-bottom: var(--gap);
}
.wir-empty { grid-column: 1 / -1; max-width: 720px; }
.wir-empty h2 { margin-bottom: 6px; }
.wir-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 12px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--client-color) 12%, var(--surface));
    box-shadow: var(--shadow-card);
    cursor: pointer;
    min-width: 0;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.wir-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.wir-tile.active { background: color-mix(in srgb, var(--client-color) 24%, var(--surface)); box-shadow: inset 0 0 0 2px var(--client-color), var(--shadow-card); }
.wir-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.wir-tile-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wir-logo { height: 26px; width: auto; max-width: 90px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }
.wir-mark {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--client-color); color: #fff;
    font-family: var(--font-title); font-size: 16px;
}
.wir-name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wir-edit { opacity: 0; flex-shrink: 0; }
.wir-tile:hover .wir-edit, .wir-tile:focus-within .wir-edit { opacity: 1; }
@media (hover: none) { .wir-edit { opacity: 0.7; } }
.wir-stat { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink-2); }
.wir-open b { font-family: var(--font-title); font-weight: 400; font-size: 26px; color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.wir-over { font-size: 12px; font-weight: 600; background: var(--tone-red); color: var(--tone-red-ink); border-radius: var(--r-pill); padding: 2px 8px; }
.wir-next { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wir-next .ico { width: 11px; height: 11px; }

.wir-add select { max-width: 180px; }
.wir-group + .wir-group { margin-top: 14px; }
.wir-group-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; padding: 4px 2px 8px; cursor: pointer;
    font-family: var(--font-display); font-size: 12px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); text-align: left;
}
.wir-group-head:hover { color: var(--ink); }
.wir-group-n { margin-left: auto; font-size: 11px; background: color-mix(in srgb, var(--client-color) 18%, var(--surface)); color: var(--ink); border-radius: var(--r-pill); padding: 2px 8px; letter-spacing: 0; }
.wir-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--client-color); flex-shrink: 0; display: inline-block; }
.wir-none { padding: 6px 2px; list-style: none; }

.wir-links + .wir-links { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wir-links-name { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.wir-link-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wir-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink);
    background: var(--surface-2); border-radius: var(--r-pill); padding: 6px 12px;
    transition: background 0.15s;
}
.wir-link:hover { background: var(--tone-almond); }
.wir-link.main { background: color-mix(in srgb, var(--client-color) 16%, var(--surface)); }
.wir-link .ico { width: 12px; height: 12px; }
#wirDocs .docw-row .wir-dot { margin-left: auto; }
#wirDocs > .btn { margin-top: 10px; }
.wir-over { white-space: nowrap; }
@media (max-width: 720px) {
    .wir-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .wir-tile { padding: 12px; gap: 6px; }
    .wir-edit { display: none; }
    .wir-tile.active .wir-edit { display: inline-grid; }
    .wir-stat { flex-wrap: wrap; gap: 2px 8px; }
    .wir-open b { font-size: 22px; }
    .wir-over { font-size: 11px; padding: 1px 7px; }
    .add-row.wir-add { flex-wrap: wrap; }
    .add-row.wir-add input { flex: 1 1 100%; }
    .add-row.wir-add select { flex: 1; max-width: none; }
}

/* ---- „Wir": Übersicht eines Bereichs ---- */
.wir-tile-all { --client-color: var(--charcoal); background: var(--surface); }
.wir-tile-all.active { background: color-mix(in srgb, var(--charcoal) 8%, var(--surface)); }
.wir-mark.all { background: var(--charcoal); color: var(--almond); }
.wir-mark.all .ico { width: 14px; height: 14px; }
.wir-detail { display: flex; flex-direction: column; gap: var(--gap); }
.wir-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--client-color) 10%, var(--surface));
}
.wir-head-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wir-head .wir-logo { height: 44px; max-width: 140px; }
.wir-mark.big { width: 44px; height: 44px; border-radius: 12px; font-size: 24px; }
.wir-head h2 { font-size: 26px; }
.wir-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.wir-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wir-facts .bad, .wir-facts .bad b { color: var(--danger); }
.wir-facts .ico { width: 12px; height: 12px; }
.wir-head-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wir-card .widget-actions { justify-content: flex-start; }
.wir-card .todo-list.small { max-height: none; }
.wir-more {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 12px 14px; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-card);
}
.wir-more-label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.wir-chip {
    font-family: var(--font-display); font-size: 13px; font-weight: 500;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px dashed var(--line-strong); border-radius: var(--r-pill);
    padding: 6px 12px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wir-chip:hover { background: color-mix(in srgb, var(--client-color) 14%, var(--surface)); color: var(--ink); border-color: var(--client-color); border-style: solid; }
@media (max-width: 720px) {
    .wir-head h2 { font-size: 22px; }
    .wir-head .wir-logo { height: 34px; }
    .wir-mark.big { width: 36px; height: 36px; font-size: 20px; }
}
/* Bereiche immer in einer Reihe – bei vielen Bereichen seitlich scrollen */
.wir-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(158px, 1fr);
    overflow-x: auto;
    padding: 2px 2px 8px;
    margin: -2px -2px calc(var(--gap) - 8px);
    scrollbar-width: thin;
}
@media (max-width: 720px) {
    .wir-tiles { grid-template-columns: none; grid-auto-columns: 148px; }
}
.wir-tiles { grid-auto-columns: minmax(146px, 1fr); }
.wir-tile .wir-tile-top { gap: 8px; align-items: flex-start; }
.wir-tile .wir-mark { width: 24px; height: 24px; border-radius: 7px; font-size: 14px; }
.wir-tile .wir-logo { height: 22px; max-width: 56px; }
.wir-tile .wir-name {
    font-size: 14px; line-height: 1.25; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}


/* ============================================================
   „Wir" – die Avison-Bühne
   Der Rest des Dashboards ist hell und neutral. „Wir" ist das eigene
   Studio: dunkle Charcoal-Bühne, Almond-Schrift, Burnt Orange als
   einziger Akzent, Clash Grotesk als Aussage, Secret Service Typewriter
   als Beobachter, die drei Striche aus dem Logo als Markierung und
   Sucher-Ecken um das, was gerade im Fokus steht.
   Die Farb-Tokens werden nur innerhalb von #viewWir umgestellt – alle
   Bausteine (Aufgaben, Zeit, CI …) passen sich dadurch von selbst an.
   ============================================================ */
body.view-wir { background: var(--charcoal); }
body.view-wir .content { background: var(--charcoal); }
body.view-wir .side { box-shadow: inset -1px 0 0 rgba(233, 218, 197, 0.08); }
body.view-wir .footer { color: rgba(233, 218, 197, 0.4); }
body.view-wir .overdue-banner { background: #4E2C29; color: #F2B3A8; }
body.view-wir ::selection { background: var(--orange); color: var(--almond); }

#viewWir {
    --wir-striche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='89.5 95.2 161.5 43.5'%3E%3Cpath d='M-5.284,-15.1815 h10.568 a3.825,3.825 0 0 1 3.825,3.825 v22.713 a3.825,3.825 0 0 1 -3.825,3.825 h-10.568 a3.825,3.825 0 0 1 -3.825,-3.825 v-22.713 a3.825,3.825 0 0 1 3.825,-3.825Z' transform='translate(105.67,122.30) rotate(-45)'/%3E%3Cpath d='M-5.284,-15.1815 h10.568 a3.825,3.825 0 0 1 3.825,3.825 v22.713 a3.825,3.825 0 0 1 -3.825,3.825 h-10.568 a3.825,3.825 0 0 1 -3.825,-3.825 v-22.713 a3.825,3.825 0 0 1 3.825,-3.825Z' transform='translate(170.08,111.51)'/%3E%3Cpath d='M-5.284,-15.1815 h10.568 a3.825,3.825 0 0 1 3.825,3.825 v22.713 a3.825,3.825 0 0 1 -3.825,3.825 h-10.568 a3.825,3.825 0 0 1 -3.825,-3.825 v-22.713 a3.825,3.825 0 0 1 3.825,-3.825Z' transform='translate(234.49,122.30) rotate(45)'/%3E%3C/svg%3E");
    --canvas: #232425;
    --surface: #2C2D2E;
    --surface-2: #363636;
    --ink: #E9DAC5;
    --ink-2: rgba(233, 218, 197, 0.7);
    --ink-3: rgba(233, 218, 197, 0.5);
    --muted: var(--ink-2);
    --faint: var(--ink-3);
    --line: rgba(233, 218, 197, 0.12);
    --line-strong: rgba(233, 218, 197, 0.24);
    --danger: #E47A68;
    --tone-orange: #51392B;  --tone-orange-ink: #F2AE82;
    --tone-red: #4E2C29;     --tone-red-ink: #F2B3A8;
    --tone-moss: #454634;    --tone-moss-ink: #CFCF93;
    --tone-blue: #464B52;    --tone-blue-ink: #C8D4E6;
    --tone-almond: #434240;
    --shadow-card: inset 0 1px 0 rgba(233, 218, 197, 0.05), 0 14px 32px -18px rgba(0, 0, 0, 0.7);
    --shadow-hover: inset 0 1px 0 rgba(233, 218, 197, 0.07), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
    --font-title: 'Clash Grotesk', 'Chillax', system-ui, sans-serif;
    --font-beobachter: 'Secret Service Typewriter', 'Courier New', monospace;
    color: var(--ink);
}

/* ---- Kopf: „Wir" mit den drei Strichen darüber ---- */
#viewWir .view-head { padding-top: 34px; }
#viewWir .wir-title {
    position: relative;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(44px, 5vw, 64px);
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--almond);
}
#viewWir .wir-striche {
    position: absolute;
    left: 0.04em;
    bottom: calc(100% + 0.08em);
    width: 0.9em;
    aspect-ratio: 161.5 / 43.5;
    background: var(--orange);
    -webkit-mask: var(--wir-striche) no-repeat center / contain;
    mask: var(--wir-striche) no-repeat center / contain;
}
#viewWir .day-sub,
#viewWir .card-sub,
#viewWir .wir-next,
#viewWir .wir-facts,
#viewWir .wir-more-label,
#viewWir .wir-links-name {
    font-family: var(--font-beobachter);
    letter-spacing: 0.02em;
}
#viewWir .day-sub { font-size: 13px; color: var(--ink-3); }

/* ---- Überschriften und Zahlen in Clash Grotesk ---- */
#viewWir .card h2 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.01em; color: var(--almond); }
#viewWir .wir-head h2 { font-size: 30px; }
#viewWir .wir-open b,
#viewWir .zeit-total strong,
#viewWir .counter-value { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; }
#viewWir .wir-name { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.005em; }
#viewWir .wir-mark { font-family: var(--font-title); font-weight: 600; }

/* ---- Kacheln: eine im Fokus, der Rest tritt zurück ---- */
#viewWir .wir-tile {
    position: relative;
    background: color-mix(in srgb, var(--client-color) 10%, var(--surface));
    box-shadow: none;
    opacity: 0.62;
    transition: opacity 0.35s cubic-bezier(.16, .84, .34, 1), background 0.35s, transform 0.35s cubic-bezier(.16, .84, .34, 1);
}
#viewWir .wir-tile:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: none; }
#viewWir .wir-tile.active {
    opacity: 1;
    background: color-mix(in srgb, var(--client-color) 16%, var(--surface));
    box-shadow: none;
}
/* Sucher-Ecken um das Element im Fokus */
#viewWir .wir-tile.active::after,
#viewWir .wir-head::after {
    content: '';
    position: absolute;
    inset: -5px;
    pointer-events: none;
    border-radius: 4px;
    background:
        linear-gradient(var(--orange), var(--orange)) top left / 14px 2px no-repeat,
        linear-gradient(var(--orange), var(--orange)) top left / 2px 14px no-repeat,
        linear-gradient(var(--orange), var(--orange)) top right / 14px 2px no-repeat,
        linear-gradient(var(--orange), var(--orange)) top right / 2px 14px no-repeat,
        linear-gradient(var(--orange), var(--orange)) bottom left / 14px 2px no-repeat,
        linear-gradient(var(--orange), var(--orange)) bottom left / 2px 14px no-repeat,
        linear-gradient(var(--orange), var(--orange)) bottom right / 14px 2px no-repeat,
        linear-gradient(var(--orange), var(--orange)) bottom right / 2px 14px no-repeat;
}
#viewWir .wir-tile-all { background: var(--surface); }
#viewWir .wir-tile-all .wir-mark.all { background: var(--almond); color: var(--charcoal); }
#viewWir .wir-over { font-family: var(--font-beobachter); letter-spacing: 0.02em; }

/* ---- Kopf des Bereichs ---- */
#viewWir .wir-head {
    position: relative;
    overflow: visible;
    background: color-mix(in srgb, var(--client-color) 12%, var(--surface));
}
#viewWir .wir-facts b { color: var(--almond); font-family: var(--font-title); font-weight: 600; letter-spacing: 0; }

/* ---- Bedienelemente auf dunklem Grund ---- */
#viewWir .btn { background: var(--almond); color: var(--charcoal); }
#viewWir .btn:hover { background: #F4EADA; }
#viewWir .btn.ghost { background: var(--surface-2); color: var(--almond); }
#viewWir .btn.ghost:hover { background: var(--tone-almond); }
#viewWir .btn.round { background: var(--orange); color: var(--almond); }
#viewWir .icon-btn { color: var(--ink-3); }
#viewWir .icon-btn:hover { color: var(--orange-soft); background: rgba(190, 94, 33, 0.16); }
#viewWir .sub-chip { background: rgba(233, 218, 197, 0.1); color: var(--ink-2); }
#viewWir .sub-chip:hover { background: rgba(233, 218, 197, 0.18); color: var(--ink); }
#viewWir .sub-chip.due.overdue { background: var(--danger); color: #1E1E1F; }
#viewWir .focus-star { color: rgba(233, 218, 197, 0.3); }
#viewWir .focus-star.on, #viewWir .focus-star:hover { color: var(--orange-soft); }
#viewWir .todo input[type=checkbox] { background: transparent; border-color: var(--client-color, rgba(233, 218, 197, 0.4)); }
#viewWir .todo.done { background: var(--surface-2); }
#viewWir .who-chip.endrit { color: var(--charcoal); }
#viewWir .link-btn, #viewWir .card-link, #viewWir .more-link { color: var(--orange-soft); }
#viewWir input::placeholder, #viewWir textarea::placeholder { color: var(--ink-3); }
#viewWir select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9DAC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#viewWir .wir-link { color: var(--almond); }
#viewWir .wir-link.main { background: color-mix(in srgb, var(--client-color) 26%, var(--surface)); }
#viewWir .wir-chip { color: var(--ink-2); }
#viewWir .wir-chip:hover { color: var(--almond); background: color-mix(in srgb, var(--client-color) 20%, var(--surface)); }
#viewWir .ci-drop-hint { background: color-mix(in srgb, var(--orange) 30%, var(--charcoal)); color: var(--almond); }
#viewWir .ci-logo-badge { font-family: var(--font-beobachter); letter-spacing: 0.04em; text-transform: none; }
#viewWir .wir-empty h2 { color: var(--almond); }

@media (prefers-reduced-motion: reduce) {
    #viewWir .wir-tile { transition: none; }
}
/* Farbfelder auf der dunklen Bühne: feiner Rand, damit auch Charcoal sichtbar bleibt */
#viewWir .ci-chip { box-shadow: inset 0 0 0 1px rgba(233, 218, 197, 0.22); }