:root {
--cal-border: #ddd;
--cal-muted: #666;
--cal-free: #e8f5e9;
--cal-busy: #ffcdd2;
--cal-focus: #000;
}
.cal { font-family: system-ui, Arial, sans-serif; max-width: 1200px; }
.cal__navwrap { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.cal__inner { flex:1; }
.cal__btn { padding:.25rem .5rem; cursor:pointer; }
.cal__header { display:flex; align-items:center; justify-content:space-between; margin: 0 0 1rem; }
.cal__h1 { font-size:1.2rem; margin:0; }
.cal__grid { display:grid; grid-template-columns: repeat(7, 1fr); border:1px
solid var(--cal-border); }
.cal__row { display: contents; }
.cal__dow, .cal__cell { border:1px solid var(--cal-border); padding:.5rem;
min-height:3rem; }
.cal__dow { background:#f7f7f7; font-weight:600; text-align:center; }
.cal__cell { position:relative; }
.cal__cell { display:flex; flex-direction:column; }
.cal__cell[aria-disabled="true"] { background:#fafafa; color:var(--cal-muted); }
.cal__day { font-size:.9rem; }
.cal__cell.past .cal__day { color: #b3b3b3; }
.cal__cell.past .cal__label, .cal__cell.past .cal__link { color: #b3b3b3; }
.cal__badge { position:absolute; inset:auto .25rem .25rem auto; width:.7rem;
height:.7rem; border-radius:50%; background:#bbb; }
/* Objektfarben als Ringe */
.cal__badge[data-obj] { box-shadow: 0 0 0 2px #fff inset; }
/* Legende */
.cal__legend { display:flex; gap:.75rem; flex-wrap:wrap; margin:.75rem 0; }
.cal__legend i { display:inline-block; width:.75rem; height:.75rem; border-radius:50%; margin-right:.35rem; vertical-align:middle; }
/* Matrix: Balken sollen die gesamte Zellenfläche nutzen */
.cal__matrix { display:grid; grid-template-rows: repeat(3, 1fr); gap:2px; flex:1; }
.cal__objbar { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cal__link, .cal__label { display:inline-block; padding:.1rem .25rem; font-size:.75rem; }
/* Fokus & Tastatur */
.cal__cell:focus { outline: 2px solid var(--cal-focus); outline-offset:
2px; }
/* Responsiv */
@media (max-width: 640px) {
.cal__dow { font-size:.8rem; padding:.4rem; }
.cal__cell { padding:.4rem; min-height:2.5rem; }
}
/* Zwei Monate nebeneinander */
.calpair { display:flex; gap:1rem; align-items:stretch; }
.calpair > .cal { flex:1; min-width:0; }
@media (max-width: 768px) {
.calpair { flex-direction: column; }
}

/* Zusätzliche Mobile-Optimierungen */
@media (max-width: 768px) {
	.cal { padding: .5rem; }
	.cal__header { flex-wrap: wrap; gap: .5rem; }
	.cal__h1 { font-size: 1rem; }
	.cal__btn { padding: .5rem .6rem; }
	.cal__legend { font-size: .85rem; }
	.cal__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cal__grid { grid-template-columns: repeat(7, minmax(44px, 1fr)); min-width: 308px; }
	.cal__dow, .cal__cell { padding: .35rem; }
	.cal__day { font-size: .85rem; }
	.cal__matrix { grid-template-rows: repeat(3, 1.25rem); }
	.cal__link, .cal__label { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; hyphens: none; }

/* Mobile: Pfeile über/unter dem Kalender anordnen */
	.cal__navwrap { flex-direction: column; align-items: stretch; }
	.cal__navwrap > .cal__btn { width: 30%; }
	.cal__navwrap > .cal__btn:first-child { order: 0; margin-bottom: .5rem; }
	.cal__navwrap > .cal__inner { order: 1; }
	.cal__navwrap > .cal__btn:last-child { order: 2; margin-top: .5rem; }

}

@media (max-width: 420px) {
	.cal__h1 { font-size: .95rem; }
	.cal__legend { font-size: .8rem; }
	.cal__grid { grid-template-columns: repeat(7, minmax(42px, 1fr)); }
	.cal__matrix { grid-template-rows: repeat(3, 1.1rem); }
}

/* Screenreader-only Utility */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}