/* ──────────────────────────────────────────────────────────────────────────
   Kalender-Baustein (kalender.js), 11.10.2026. Optik wie das Anfrageformular (.af-*): weiß, 6 px Ecken,
   Haarlinien, Tage 40 px, gewählter Tag blau mit weißer Schrift, gesperrte Tage hellgrau.
   Alles hängt an .kal und .kal-hinweis: Seiten ohne Kalender bleiben unverändert.
   ────────────────────────────────────────────────────────────────────────── */
.kal { --kal-tag: 40px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; margin: 4px 0 0; color: var(--tinte, #101820); }
.kal__blatt { flex: 0 0 auto; padding: 12px 12px 10px; background: #fff; border: 1px solid var(--linie, #d3dce8); border-radius: 6px; }
.kal__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.kal__monat { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--tinte, #101820); }
.kal__blaettern { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; color: var(--tinte, #101820); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.kal__blaettern svg { width: 16px; height: 16px; }
.kal__blaettern:hover { background: var(--band-hell, #f2f6fb); border-color: var(--linie, #d3dce8); }
.kal__blaettern[aria-disabled="true"] { color: #b6c0cc; background: none; border-color: transparent; cursor: default; }

.kal__raster { border-collapse: separate; border-spacing: 2px; margin: 0 -2px; }
.kal__raster th { width: var(--kal-tag); height: 28px; padding: 0; font-size: .875rem; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; text-align: center; color: var(--leise, #586474); }
.kal__raster td { padding: 0; text-align: center; }
.kal__unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.kal__tag { display: grid; place-items: center; width: var(--kal-tag); height: var(--kal-tag); margin: 0; padding: 0; font: inherit; font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--tinte, #101820); background: #fff; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.kal__tag:hover { background: var(--band-hell, #f2f6fb); border-color: var(--linie, #d3dce8); }
.kal__tag[aria-current="date"] { text-decoration: underline; text-underline-offset: 4px; }
.kal__tag[aria-disabled="true"] { color: #b6c0cc; background: none; border-color: transparent; cursor: default; }
.kal__tag[aria-pressed="true"] { color: #fff; font-weight: 600; background: #1058c0; border-color: #1058c0; }
.kal__tag[aria-pressed="true"]:hover { background: var(--akzent-dunkel, #0b4496); border-color: var(--akzent-dunkel, #0b4496); }
.kal button:focus-visible { outline: 2px solid var(--akzent, #1058c0); outline-offset: 2px; }

.kal__wahl { flex: 1 1 15rem; min-width: min(15rem, 100%); display: grid; gap: 10px; align-content: start; }
.kal__gewaehlt { display: grid; gap: 8px; }
.kal__leer { margin: 0; font-size: .9375rem; color: var(--leise, #586474); }
.kal__frage { margin: 0; font-size: .9375rem; font-weight: 550; color: var(--tinte, #101820); }
.kal__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kal__liste li { margin: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--linie, #d3dce8); border-radius: 6px; }
.kal__eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.kal__rolle { min-width: 6.2em; font-size: .875rem; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--leise, #586474); }
.kal__datum { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinte, #101820); }
.kal__weg { min-height: 32px; margin: 0 0 0 auto; padding: 4px 2px; font: inherit; font-size: .875rem; color: var(--akzent, #1058c0); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kal__weg:hover { color: var(--akzent-dunkel, #0b4496); }
.kal__zeiten { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.kal__zeit { min-height: 36px; min-width: 60px; margin: 0; padding: 6px 10px; font: inherit; font-size: .875rem; color: var(--tinte, #101820); background: #fff; border: 1px solid var(--linie, #d3dce8); border-radius: 6px; cursor: pointer; }
.kal__zeit:hover { border-color: #8a9bb0; }
.kal__zeit[aria-pressed="true"] { color: #fff; background: #1058c0; border-color: #1058c0; }
.kal__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.kal__knopf { min-height: 40px; margin: 0; padding: 8px 14px; font: inherit; font-size: .875rem; font-weight: 500; color: var(--akzent, #1058c0); background: #fff; border: 1px solid var(--linie, #d3dce8); border-radius: 6px; cursor: pointer; }
.kal__knopf:hover { border-color: var(--akzent, #1058c0); }
.kal__knopf[aria-pressed="true"] { background: var(--band-hell, #f2f6fb); border-color: var(--akzent, #1058c0); }
.kal__knopf[hidden] { display: none; }
.kal__status { margin: 0; font-size: .875rem; color: var(--akzent-dunkel, #0b4496); }
.kal__status:not([data-sichtbar]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Hülle, Hinweis unter dem Kalender und Hilfetext darüber (stehen im HTML der Seite) */
.af__termin { margin: 14px 0 0; }
.af-frist { margin: 0 0 8px; padding: 0; border: 0; }
.af-frist__text[hidden] { display: none; }
.af-frist__text { margin-top: 16px; }
.kal-hilfe { margin: 0 0 10px; max-width: 40em; font-size: .9375rem; line-height: 1.5; color: var(--leise, #586474); }
.kal-hinweis { margin: 12px 0 0; max-width: 40em; font-size: .875rem; line-height: 1.5; color: var(--leise, #586474); }

@media (max-width: 640px) {
  .kal { --kal-tag: 44px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .kal__blatt { padding: 10px 8px 8px; }
  .kal__raster { width: 100%; table-layout: fixed; margin: 0; }
  .kal__raster th { width: auto; }
  .kal__tag { width: 100%; }
  .kal__blaettern { width: 44px; height: 44px; }
  .kal__weg, .kal__knopf { min-height: 44px; }
  .kal__zeit { flex: 1 1 calc(25% - 6px); min-height: 44px; padding: 6px 4px; min-width: 0; }
  .kal__aktionen .kal__knopf { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .kal__tag { transition: none; } }