/* ===========================================================================
   Kalender - Organisation -> Kalender
   Etappe 2: Monatsraster, Chips, Tages-Drawer
   ===========================================================================
   Alle Masse und Farben stammen aus dem Prototyp (Kalender.dc.html), im
   Browser ausgemessen - nicht geschaetzt. Wo hier eine Zahl steht, stand
   sie dort auch: Zellen 133px hoch, Chips 19px, Wochentagskopf 28px,
   Chip-Balken 2.4px.

   Keine neuen Farben. Alles kommt aus den Tokens des Bestands.
   =========================================================================== */

/* ── Die Seite selbst ──────────────────────────────────────────────────────
   Dieselbe Ausnahme wie bei Messenger, Aufgaben und Postfach: die
   generische Regel .page ist fuer schmale Formularseiten gedacht
   (max-width 680px, zentriert). Ein Modul mit Spalten braucht die ganze
   Breite. Das !important ist Absicht und kein Notnagel - ohne setzt sich
   die Ausnahme gegen die generische Regel nicht durch.

   display:block statt flex aus demselben Grund wie dort: bei flex haengt
   die Breite davon ab, wie sich das Flex-Item verhaelt, und das ergab
   volle Hoehe bei rund 600px Breite. */
#page-kalender {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
#page-kalender.active { display: block !important; }

/* Im Browser gemessen: ohne diese Zeile war die Flaeche 2084 statt 2048
   Pixel breit - die 18px Innenabstand links und rechts kamen zur Breite
   dazu, statt in ihr zu stecken. Der Knopf "Neuer Eintrag" und der rechte
   Rand des Drawers standen dadurch ausserhalb des Bildes.

   Bewusst im Modul und nicht darauf vertrauend, dass die Anwendung es
   global setzt: dann stimmt es auch, wenn dort einmal etwas anderes gilt. */
.kal-wrap, .kal-wrap *, .kal-overlay, .kal-overlay * { box-sizing: border-box; }

.kal-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: calc(100vh - 52px);
  padding: 14px 18px 18px;
  gap: 12px;
  background: #F4F6FA;
  overflow: hidden;
  font-size: 13px;
  color: #1a1a18;
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.kal-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 32px;
}
.kal-monat {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a18;
  /* KEINE feste Breite mehr. Die stand hier, damit die Pfeile beim
     Monatswechsel nicht wandern - der Name stand ja zwischen ihnen.
     168 px waren geschaetzt, nicht gemessen; bei "Mai 2026" blieben
     rechts rund 70 px Luft, und der rechte Pfeil sah abgehaengt aus.
     Jetzt stehen beide Pfeile davor, und die Frage stellt sich nicht. */
  white-space: nowrap;
}

/* Das Schalterpaar: ein Rahmen um beide, ein Haarstrich dazwischen. */
.kal-nav {
  display: inline-flex; align-items: center;
  border: 0.5px solid #e0dfd7; border-radius: 9px;
  overflow: hidden; background: #fff;
  flex-shrink: 0;
}
.kal-nav-strich {
  width: 0.5px; height: 18px; background: #e0dfd7; flex-shrink: 0;
}
.kal-pfeil {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #888; cursor: pointer;
  padding: 0;
}
.kal-pfeil:hover { background: #f5f4f0; color: #3F96FE; }

.kal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 0.5px solid #e0dfd7; border-radius: 8px;
  background: #fff; color: #666;
  font-size: 12px; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.kal-btn:hover { background: #f5f4f0; color: #1a1a18; }
.kal-btn.aktiv { border-color: #C7DEF7; background: #EBF4FF; color: #185FA5; }
.kal-btn.primaer {
  background: #3F96FE; border-color: #3F96FE; color: #fff; font-weight: 500;
}
.kal-btn.primaer:hover { background: #0A67EA; border-color: #0A67EA; }
.kal-rechts { margin-left: auto; }

/* ── Die Karte mit Raster und Drawer ───────────────────────────────────── */
.kal-flaeche {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  gap: 12px;
  /* Bezug fuer das Fenster, waehrend es sich schliesst. */
  position: relative;
}
.kal-karte {
  flex: 1;
  min-width: 504px;      /* darunter wird eine Woche unleserlich */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 12px;
  overflow: hidden;
}

/* ── Wochentagskopf ────────────────────────────────────────────────────── */
.kal-wochentage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafaf8;
  border-bottom: 0.5px solid #f0efe8;
  flex-shrink: 0;
}
.kal-wochentag {
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #888;
  letter-spacing: .02em;
}
.kal-wochentag.we { color: #c4c3bb; }

/* ── Das Monatsraster ──────────────────────────────────────────────────── */
.kal-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  flex: 1;
  min-height: 0;
}
.kal-zelle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 6px 6px;
  background: #fff;
  border-right: 0.5px solid #f0efe8;
  border-bottom: 0.5px solid #f0efe8;
  min-height: 0;
  overflow: hidden;      /* Chips duerfen die Zelle nicht sprengen */
  cursor: pointer;
}
.kal-zelle:nth-child(7n) { border-right: 0; }
.kal-zelle.we { background: #fafaf8; }
.kal-zelle.fremd .kal-tagzahl { color: #c4c3bb; }
.kal-zelle.frei { background: #FAEEDA; }        /* Feiertag / Schliesstag */
.kal-zelle.gewaehlt { box-shadow: inset 0 0 0 2px #3F96FE; }
.kal-zelle:hover { background: #f5f4f0; }
.kal-zelle.we:hover { background: #f0efe8; }

.kal-tagkopf {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.kal-tagzahl {
  font-size: 12px; color: #666;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kal-tagzahl.heute {
  background: #3F96FE; color: #fff; border-radius: 50%; font-weight: 500;
}
.kal-pill {
  font-size: 9.5px; padding: 1px 6px; border-radius: 10px;
  background: #FAEEDA; color: #854F0B; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.kal-chip {
  display: flex; align-items: center; gap: 5px;
  height: 19px; padding: 2px 6px;
  border-radius: 6px;
  border-left: 2.4px solid #c4c3bb;
  background: #f0efe8; color: #666;
  font-size: 11px; line-height: 1;
  overflow: hidden;      /* der Titel darf die Zelle nicht aufdehnen */
  flex-shrink: 0;
  cursor: pointer;
}
.kal-chip.aufgabe   { background: #EBF4FF; color: #185FA5; border-left-color: #3F96FE; }
.kal-chip.termin    { background: #EAF3DE; color: #3B6D11; border-left-color: #97C459; }
.kal-chip.abwesend  { background: #FAEEDA; color: #854F0B; border-left-color: #EF9F27; cursor: default; }
.kal-chip.eilt      { background: #FCEBEB; color: #A32D2D; border-left-color: #A32D2D; }
.kal-chip-zeit {
  font-variant-numeric: tabular-nums;   /* sonst tanzen die Ziffern */
  flex-shrink: 0; opacity: .85;
}
.kal-chip-titel {
  flex: 1; min-width: 0;                /* ohne das klippt die Ellipse nicht */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-chip-av {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 600; flex-shrink: 0;
  background: rgba(255,255,255,.7);
}
.kal-chip-wdh { flex-shrink: 0; opacity: .7; font-size: 9px; }
.kal-mehr {
  font-size: 10px; color: #888; padding: 1px 4px; cursor: pointer;
  flex-shrink: 0;
}
.kal-mehr:hover { color: #185FA5; }

/* ── Tages-Drawer ──────────────────────────────────────────────────────── */
.kal-drawer {
  width: min(400px, 38vw);
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.kal-drawer-kopf {
  padding: 14px 16px 12px;
  border-bottom: 0.5px solid #f0efe8;
  flex-shrink: 0;
  position: relative;
}
.kal-drawer-tag { font-size: 15px; font-weight: 500; color: #1a1a18; }
.kal-drawer-sub { font-size: 11.5px; color: #888; margin-top: 2px; }
.kal-drawer-x {
  position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; border: 0; background: none;
  font-size: 18px; line-height: 1; color: #aaa; cursor: pointer; padding: 0;
}
.kal-drawer-x:hover { color: #1a1a18; }
.kal-drawer-koerper {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
/* Steht ueber dem Knopf im Filterfenster: ohne Auswahl zeigt der
   Kalender alle - das ist nicht selbstverstaendlich, wenn kein Haken
   gesetzt ist. */
/* Kennzeichnung als Knoepfe - dieselbe Form wie im Aufgaben-Modul.
   Zwei Haken haetten zugelassen, beides zu setzen; gespeichert wurde
   dann still nur eines. */
.kal-kenn-btn {
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  font-size: 12.5px;
}
.kal-kenn-btn:hover { background: #f5f4f0; }
.kal-kenn-btn.wichtig.aktiv {
  background: #FCEBEB; border-color: #E8B4B4; color: #A32D2D;
  font-weight: 500;
}
.kal-kenn-btn.eilt.aktiv {
  background: #A32D2D; border-color: #A32D2D; color: #fff;
  font-weight: 500;
}

.kal-panel-hinweis {
  font-size: 11.5px; color: #888; padding: 0 14px 8px;
}

.kal-drawer-fuss {
  flex-shrink: 0; padding: 10px 16px;
  border-top: 0.5px solid #f0efe8; background: #fafaf8;
}

/* Das Fenster ist nicht fest verbaut: es erscheint, wenn ein Tag
   geoeffnet wird, und geht wieder. Ohne es hat der Monat die ganze
   Breite.

   Beim Schliessen faellt es SOFORT aus dem Fluss - so bekommt der Monat
   seine Breite in derselben Bewegung zurueck, statt am Ende zu
   springen. */
@keyframes kal-drawer-auf {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kal-drawer-weg {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(14px); }
}
.kal-drawer.kal-auf { animation: kal-drawer-auf .18s ease; }
.kal-drawer.kal-zu {
  position: absolute; top: 0; right: 0; bottom: 0;
  animation: kal-drawer-weg .17s ease forwards;
}
/* Wer Bewegung abgestellt hat, bekommt keine. Das Fenster geht dann
   ohne Uebergang zu - im Code steht dafuer ein eigener Zweig. */
@media (prefers-reduced-motion: reduce) {
  .kal-drawer.kal-auf, .kal-drawer.kal-zu { animation: none; }
}

.kal-abwesend-block {
  background: #FAEEDA; border-radius: 10px; padding: 10px 12px;
  font-size: 12px; color: #854F0B;
}
.kal-abwesend-kopf { font-weight: 600; margin-bottom: 5px; font-size: 11.5px; }
.kal-abwesend-zeile {
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
}
.kal-abwesend-status {
  font-size: 9.5px; padding: 1px 6px; border-radius: 10px;
  background: rgba(255,255,255,.65); white-space: nowrap;
}

.kal-karte-eintrag {
  border: 0.5px solid #e0dfd7; border-radius: 10px;
  padding: 10px 12px; background: #fff; cursor: pointer;
}
.kal-karte-eintrag:hover { background: #f5f4f0; }
.kal-ke-kopf { display: flex; align-items: center; gap: 7px; }
.kal-ke-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #c4c3bb;
}
.kal-ke-punkt.aufgabe { background: #3F96FE; }
.kal-ke-punkt.termin  { background: #97C459; }
.kal-ke-zeit { font-size: 11.5px; color: #666; font-variant-numeric: tabular-nums; }
.kal-ke-titel { font-size: 13px; color: #1a1a18; flex: 1; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-ke-fuss { display: flex; align-items: center; gap: 6px; margin-top: 6px;
               flex-wrap: wrap; }
.kal-ke-person { font-size: 11px; color: #888; display: flex;
                 align-items: center; gap: 4px; }

.kal-tag-pill {
  font-size: 9.5px; padding: 1px 7px; border-radius: 10px;
  background: #f0efe8; color: #666; white-space: nowrap;
}
.kal-tag-pill.eilt      { background: #FCEBEB; color: #A32D2D; }
.kal-tag-pill.wichtig   { background: #FAEEDA; color: #854F0B; }
.kal-tag-pill.faellig   { background: #FCEBEB; color: #A32D2D; font-weight: 600; }
.kal-tag-pill.aus_mail  { background: #EBF4FF; color: #185FA5; }

.kal-av {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 600; flex-shrink: 0;
}

.kal-leer { font-size: 12px; color: #aaa; text-align: center; padding: 24px 0; }
.kal-fehler {
  font-size: 12px; color: #A32D2D; background: #FCEBEB;
  border-radius: 8px; padding: 10px 12px;
}

/* ── Rollbalken: schmal, wie im ganzen Haus ────────────────────────────── */
/* Wie im Postfach: der Platz bleibt reserviert, sonst zuckt die Breite
   bei jedem Neuzeichnen - in Firefox sichtbar, in Chromium nicht.
   scrollbar-width/-color sind die Angaben, die Firefox ueberhaupt
   versteht; ::-webkit-scrollbar wirkt dort nicht. */
.kal-drawer-koerper, .kal-raster, .kal-personen, .kal-modal-koerper {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #d8d7cf transparent;
}

.kal-drawer-koerper::-webkit-scrollbar { width: 7px; }
.kal-drawer-koerper::-webkit-scrollbar-track { background: transparent; }
.kal-drawer-koerper::-webkit-scrollbar-thumb {
  background: #dcdbd3; border-radius: 4px;
}
.kal-drawer-koerper::-webkit-scrollbar-thumb:hover { background: #b9b8b0; }

/* Schmaler wird es unbrauchbar: dann faellt der Drawer weg und das
   Raster nimmt die Breite. */
@media (max-width: 900px) {
  .kal-drawer { display: none; }
  .kal-karte { min-width: 0; }
}

/* ── Anlege-Dialog ─────────────────────────────────────────────────────────
   Er haengt am body, nicht unter #kal-root: zeichnen() ersetzt dort das
   gesamte innerHTML, und ein halb ausgefuellter Dialog waere beim
   naechsten Nachladen weg. */
.kal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26,26,24,.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  overflow-y: auto; overflow-x: hidden;
}
.kal-modal {
  background: #fff; border-radius: 12px;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(26,26,24,.20);
  overflow: hidden;
}
.kal-modal-kopf {
  padding: 16px 46px 14px 18px;
  border-bottom: 0.5px solid #e0dfd7; position: relative; flex-shrink: 0;
}
.kal-modal-titel { font-size: 17px; font-weight: 500; color: #1a1a18; }
.kal-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: #aaa; cursor: pointer; padding: 0;
}
.kal-modal-x:hover { color: #1a1a18; }
.kal-modal-koerper {
  padding: 14px 18px; overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.kal-modal-fuss {
  flex-shrink: 0; padding: 12px 18px;
  border-top: 0.5px solid #e0dfd7; background: #fafaf8;
  display: flex; align-items: center; gap: 10px;
}
.kal-modal-fehler { flex: 1; font-size: 11.5px; color: #A32D2D; }

/* Art-Umschalter */
.kal-seg {
  display: flex; gap: 0; border: 1.5px solid #e0dfd7; border-radius: 8px;
  overflow: hidden;
}
.kal-seg-btn {
  flex: 1; padding: 7px 10px; border: 0; background: #fff;
  font-size: 12.5px; font-family: inherit; color: #666; cursor: pointer;
}
.kal-seg-btn + .kal-seg-btn { border-left: 1.5px solid #e0dfd7; }
.kal-seg-btn:hover { background: #f5f4f0; }
.kal-seg-btn.aktiv { background: #EBF4FF; color: #185FA5; font-weight: 500; }

.kal-hinweis-zeile { font-size: 11.5px; color: #888; line-height: 1.45; }

.kal-feld { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kal-feld > span { font-size: 11.5px; color: #666; }
.kal-feld.schmal { flex: 0 0 110px; }
.kal-feld input[type="text"], .kal-feld input[type="date"],
.kal-feld input[type="time"], .kal-feld select, .kal-feld textarea {
  border: 1.5px solid #e0dfd7; border-radius: 8px;
  padding: 7px 9px; font-size: 13px; font-family: inherit; color: #1a1a18;
  background: #fff; width: 100%; box-sizing: border-box;
}
.kal-feld input:focus, .kal-feld select:focus, .kal-feld textarea:focus {
  outline: none; border-color: #85B7EB;
}
.kal-feld textarea { resize: vertical; min-height: 40px; }
.kal-zeile { display: flex; gap: 10px; align-items: flex-end; }

.kal-kennz { display: flex; gap: 16px; }
.kal-haken, .kal-person {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #1a1a18; cursor: pointer;
}
.kal-personen {
  border: 0.5px solid #e0dfd7; border-radius: 8px;
  max-height: 180px; overflow-y: auto; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.kal-person { padding: 4px 2px; }
.kal-person:hover { background: #f5f4f0; border-radius: 6px; }
.kal-personen::-webkit-scrollbar { width: 7px; }
.kal-personen::-webkit-scrollbar-thumb { background: #dcdbd3; border-radius: 4px; }

/* Konflikt-Hinweis: in-flow, nie als Overlay ueber dem Inhalt. */
.kal-konflikt {
  background: #FAEEDA; color: #854F0B; border-radius: 8px;
  padding: 9px 11px; font-size: 11.5px; line-height: 1.45;
}

/* ── Aendern und Loeschen an der Karte ─────────────────────────────────── */
.kal-ke-knoepfe { margin-left: auto; display: flex; gap: 4px; }
.kal-ke-btn {
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid #e0dfd7; border-radius: 6px;
  background: #fff; color: #888; cursor: pointer;
}
.kal-ke-btn:hover { border-color: #85B7EB; color: #185FA5; background: #EBF4FF; }
.kal-ke-btn.weg:hover { border-color: #F09595; color: #A32D2D; background: #FCEBEB; }

/* ── Verschieben per Ziehen ────────────────────────────────────────────── */
.kal-chip[draggable="true"] { cursor: grab; }
.kal-chip.zieht { opacity: .45; cursor: grabbing; }
/* Das Ziel hebt sich hervor - sonst raet man, wo der Eintrag landet. */
.kal-zelle.ziel { background: #EBF4FF; box-shadow: inset 0 0 0 2px #3F96FE; }

/* Die Serienfrage nutzt den Dialograhmen; ihre Knoepfe stehen
   untereinander, weil drei Antworten nebeneinander nicht lesbar sind. */
.kal-modal-koerper > .kal-btn { width: 100%; justify-content: center; height: 34px; }

/* ── Filter-Panel ──────────────────────────────────────────────────────────
   Klappt IN-FLOW auf, nie als Overlay: ein Panel ueber dem Raster
   verdeckt genau die Tage, wegen derer man es geoeffnet hat. */
.kal-panel {
  background: #F7FBFF; border: 0.5px solid #C7DEF7; border-radius: 10px;
  padding: 12px 14px; flex-shrink: 0;
}
.kal-panel-kopf {
  font-size: 11.5px; font-weight: 600; color: #185FA5;
  margin-bottom: 9px; position: relative;
}
.kal-panel-x {
  position: absolute; top: -4px; right: 0;
  border: 0; background: none; font-size: 18px; line-height: 1;
  color: #aaa; cursor: pointer; padding: 0;
}
.kal-panel-x:hover { color: #1a1a18; }
.kal-panel-personen { display: flex; flex-wrap: wrap; gap: 7px; }
.kal-pchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; border-radius: 20px;
  border: 0.5px solid #e0dfd7; background: #fff;
  font-size: 11.5px; font-family: inherit; color: #aaa; cursor: pointer;
}
/* Ausgeblendete Namen bleiben lesbar, aber sichtbar aus: sonst raet man,
   wen man gerade nicht sieht. */
.kal-pchip .kal-av { opacity: .4; }
.kal-pchip.an { border-color: #C7DEF7; background: #EBF4FF; color: #185FA5; }
.kal-pchip.an .kal-av { opacity: 1; }
.kal-pchip:hover { border-color: #85B7EB; }

.kal-panel-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px; border-top: 0.5px solid #C7DEF7;
}
.kal-legende { display: flex; flex-wrap: wrap; gap: 12px; }
.kal-leg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #666;
}
.kal-leg-punkt {
  width: 9px; height: 9px; border-radius: 2px; background: #c4c3bb;
}
.kal-leg-punkt.aufgabe  { background: #3F96FE; }
.kal-leg-punkt.termin   { background: #97C459; }
.kal-leg-punkt.abwesend { background: #EF9F27; }
.kal-leg-punkt.eilt     { background: #A32D2D; }

/* ── Nachweis-Block ────────────────────────────────────────────────────── */
.kal-nw-arten { display: flex; gap: 7px; flex-wrap: wrap; }
.kal-nw-art {
  padding: 4px 11px; border-radius: 20px;
  border: 0.5px solid #e0dfd7; background: #fff;
  font-size: 11.5px; font-family: inherit; color: #666; cursor: pointer;
}
.kal-nw-art:hover { border-color: #85B7EB; }
.kal-nw-art.an { border-color: #C7DEF7; background: #EBF4FF; color: #185FA5; }
.kal-nw-art.fest {
  background: #EAF3DE; border-color: #97C459; color: #3B6D11; cursor: default;
}
.kal-nw-mengen {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; font-size: 11.5px; color: #666;
}
.kal-nw-chip {
  width: 26px; height: 24px; border-radius: 6px;
  border: 0.5px solid #e0dfd7; background: #fff;
  font-size: 11.5px; font-family: inherit; color: #666; cursor: pointer;
}
.kal-nw-chip.an { border-color: #C7DEF7; background: #EBF4FF; color: #185FA5; }

/* ── Herkunft aus dem Postfach ─────────────────────────────────────────── */
.kal-ausmail {
  display: flex; align-items: center; gap: 7px;
  background: #EBF4FF; color: #185FA5;
  border-radius: 8px; padding: 8px 11px; font-size: 11.5px;
}

/* ── Das kleine i ──────────────────────────────────────────────────────────
   16px, kursiv, aktiv blau - wie im Aufgaben-Modul und im Postfach. */
.kal-i {
  width: 16px; height: 16px; margin-left: 6px;
  border-radius: 50%; border: 0.5px solid #e0dfd7; background: #fff;
  color: #aaa; font-size: 10px; font-weight: 600; font-style: italic;
  font-family: inherit; line-height: 1; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; flex-shrink: 0;
}
.kal-i:hover { border-color: #3F96FE; color: #3F96FE; }
.kal-i.an { border-color: #C7DEF7; background: #EBF4FF; color: #185FA5; }

/* Klappt in-flow auf, wie alle Panels in diesem Modul. */
.kal-i-panel {
  background: #F7FBFF; border: 0.5px solid #C7DEF7; border-radius: 8px;
  padding: 8px 11px; font-size: 11.5px; color: #185FA5; line-height: 1.5;
}
.kal-feld-kopf {
  font-size: 11.5px; color: #666;
  display: flex; align-items: center;
}