/* modul-kalender.css, Modul Kalender (17.10.2026): das Widget in drei Darstellungen nach Platz.
   Die Leib-Fläche ist ein Container: Was zu sehen ist, entscheidet ihre Größe, nicht ein Neuzeichnen. */

.kalFeld0 { container-type: size; height: 100%; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.kalKurz { display: none; flex-direction: column; align-items: flex-start; gap: 2px; }
.kalZahl { font-size: 34px; font-weight: 700; line-height: 1; color: var(--kopf, var(--text)); }
.kalZahlWort { font-size: 12px; color: var(--dim); }
.kalNaechster { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; }

.kalMonat { display: none; }
.kalMonatName { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; text-transform: capitalize; }
.kalGitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kalWoTag { font-size: 10.5px; color: var(--dim); text-align: center; }
.kalFeld { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; padding: 4px 0;
  border-radius: 6px; cursor: pointer; position: relative; }
.kalFeld:hover { background: var(--linie); }
.kalFeld.fremd { color: var(--dim); opacity: .55; }
.kalFeld.heute { color: var(--goldText); font-weight: 700; }
.kalFeld.belegt::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--gold); }
.kalFeld.gewaehlt { outline: 1px solid var(--gold); }

.kalListe { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; }
.kalTag { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em;
  margin: 6px 0 2px; }
.kalTag:first-child { margin-top: 0; }
.kalTermin { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 4px 6px; border-radius: 6px;
  cursor: pointer; font-size: 13px; }
.kalTermin:hover, .kalTermin:focus-visible { background: var(--linie); outline: none; }
.kalZeit { color: var(--goldText); font-variant-numeric: tabular-nums; }
.kalTitel { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalOrt { grid-column: 2; font-size: 11.5px; color: var(--dim); }
.kalLeer { font-size: 12.5px; color: var(--dim); padding: 4px 0; }
.kalNeu { align-self: flex-start; border: 1px dashed var(--linie); background: transparent; color: var(--dim);
  border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.kalNeu:hover { color: var(--text); border-color: var(--gold); }
[data-dk-bearbeiten] .kalNeu, [data-dk-bearbeiten] .kalTermin, [data-dk-bearbeiten] .kalFeld { pointer-events: none; }

/* Sehr klein: nur die Zahl von heute und der nächste Termin. */
@container (max-height: 150px), (max-width: 170px) {
  .kalKurz { display: flex; }
  .kalListe, .kalNeu { display: none; }
}
/* Groß: dazu der Monat, neben der Liste, wenn es breit ist, sonst darüber. */
@container (min-width: 300px) and (min-height: 300px) {
  .kalMonat { display: block; }
}
@container (min-width: 520px) and (min-height: 300px) {
  .kalFeld0 { display: grid; grid-template-columns: minmax(240px, 1fr) 1fr; grid-template-rows: 1fr auto; }
  .kalMonat { grid-row: 1 / span 2; }
}

/* Der Dialog „Neuer Termin“. */
.kalEingabe { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.kalEingabe input, .kalEingabe select { border: 1px solid var(--linie); background: var(--grund, transparent); color: var(--text);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; }
.kalZeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kalZeiten[hidden] { display: none; }
.kalGanz { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }