/* ---------- Kalender ---------- */
      
      .calendarHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--s4);
        flex-wrap: wrap;
        gap: var(--s3);
      }
      .calendarHeaderTitle {
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: 500;
      }
      .calendarHeaderNav {
        display: flex;
        align-items: center;
        gap: var(--s2);
        flex-wrap: wrap;
      }
      .calendarCard {
        padding: var(--s4);
      }
      .calendarWeekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        margin-bottom: 6px;
      }
      .calendarWeekdays div {
        text-align: center;
        font-size: var(--fs-xs);
        font-weight: 500;
        color: var(--ink-3);
        padding: var(--s1) 0;
      }
      .calendarGrid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
      }
      .calendarGrid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .calendarCell {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        min-height: 100px;
        padding: 6px;
        cursor: pointer;
        transition: border-color 0.15s ease;
        display: flex;
        flex-direction: column;
        gap: var(--s1);
        min-width: 0; /* verhindert, dass eine lange Chip-Beschriftung die 1fr-Grid-Spalte über ihren Anteil hinaus verbreitert (Grid-Items haben sonst min-width:auto) */
      }
      .calendarCell-tall {
        min-height: 180px;
      }
      .calendarCell:hover {
        border-color: var(--border-strong);
      }
      .calendarCellDim {
        opacity: 0.4;
      }
      .calendarCellToday {
        border-color: var(--primary);
        background: var(--primary-tint);
      }
      .calendarCellDate {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--ink);
      }
      .calendarCellToday .calendarCellDate {
        color: var(--primary);
      }
      .calendarCellChips {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      .calendarChip {
        font-size: var(--fs-xs);
        padding: 2px 6px;
        border-radius: var(--r-sm);
        font-weight: 500;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word; /* lange Titel brechen um statt die Zelle zu verlassen */
      }
      .calendarChip-event {
        background: var(--primary-tint);
        color: var(--primary);
      }
      .calendarChip-task {
        background: var(--warning-tint);
        color: var(--warning);
      }
      .calendarChip-more {
        background: var(--surface-3);
        color: var(--ink-3);
        text-align: center;
      }
      .calendarDetailHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s3);
        margin-bottom: var(--s2);
      }
      .calendarDetailHead h3 {
        margin: 0;
      }
      .calendarDetailRow {
        display: flex;
        align-items: flex-start;
        gap: var(--s3);
        padding: var(--s3) 0;
        border-top: 1px solid var(--border);
      }
      .calendarDetailRow:first-of-type {
        border-top: none;
      }
      .calendarDetailRow .calendarChip {
        flex-shrink: 0;
        padding: var(--s1) var(--s2);
        white-space: nowrap;
      }
      .calendarDetailText {
        flex: 1;
        min-width: 0;
        font-size: var(--fs-md);
      }
      .calendarDetailText .meta {
        color: var(--ink-3);
        font-size: var(--fs-xs);
        margin-top: 2px;
      }
      /* Datenfarben statt Signalfarben; im Normalfall überschreibt die Tag-Farbe
   (Inline-Style aus calendarSystemTagStyle()/CalendarTags) diese Fallbacks. */
      .calendarChip-birthday {
        background: color-mix(in srgb, var(--d1) 18%, transparent);
        color: var(--d1);
      }
      .calendarChip-nameday {
        background: color-mix(in srgb, var(--d5) 18%, transparent);
        color: var(--d5);
      }
      .calendarChip-memorial {
        background: color-mix(in srgb, var(--d7) 18%, transparent);
        color: var(--d7);
      }
      .calendarChip-holiday {
        background: color-mix(in srgb, var(--d4) 18%, transparent);
        color: var(--d4);
      }
      .calTagAdd,
      .calLink {
        flex-wrap: nowrap;
      }
      .calTagAdd {
        margin-bottom: var(--s4);
      }
      .calTagAdd .input,
      .calLink .input {
        flex: 1;
        min-width: 0;
      }
      .calFormAct {
        margin-top: var(--s4);
      }
      @media (max-width: 640px) {
        .calendarCard {
          padding: var(--s2);
        }
        .calendarGrid,
        .calendarWeekdays {
          gap: 3px;
        }
        .calendarCell {
          min-height: 64px;
          padding: 3px;
        }
        .calendarGrid-3 .calendarCell {
          min-height: 100px;
        }
        .calendarCellChips .calendarChip {
          padding: 1px 3px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }