/* ===== Harmonic Dogs – Wochenplan ===== */
.hdb.hdb-cal-wrap { width: 100%; max-width: 1180px; }

.hdb-cal { --hdb-hour-h: 96px; --hdb-ink: #2b2a27; --hdb-muted: #77726a; --hdb-line: #ece8e0; --hdb-bg: #faf8f4; color: var(--hdb-ink); }

/* Kopfzeile */
.hdb-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 0 0 1rem; }
.hdb-cal-title { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.hdb-cal-kw { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #3d6b4f; padding: .25rem .6rem; border-radius: 999px; }
.hdb-cal-range { font-size: 1.15rem; font-weight: 600; }
.hdb-cal-nav { display: flex; gap: .4rem; }
.hdb-cal-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .8rem; border-radius: 10px; background: #fff; color: var(--hdb-ink) !important; text-decoration: none !important; font-weight: 600; font-size: 1rem; line-height: 1; border: 1px solid var(--hdb-line); box-shadow: 0 1px 0 #fff inset, 0 2px 0 #e2ddd3, 0 3px 8px -4px rgba(0,0,0,.15); transition: transform .12s ease, box-shadow .12s ease; }
.hdb-cal-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 #fff inset, 0 3px 0 #e2ddd3, 0 6px 12px -6px rgba(0,0,0,.2); }
.hdb-cal-btn:focus-visible { outline: 3px solid #3d6b4f; outline-offset: 2px; }
.hdb-cal-btn.is-disabled { opacity: .35; pointer-events: none; }
.hdb-cal-btn:not(.hdb-cal-today) { font-size: 1.4rem; padding: 0; }
.hdb-cal-empty { background: var(--hdb-bg); border-radius: 10px; padding: .9rem 1.1rem; color: var(--hdb-muted); }

/* Raster */
.hdb-cal-grid { display: grid; grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid var(--hdb-line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(40,35,25,.35); }
.hdb-cal-dayhead { font-family: inherit !important; letter-spacing: 0; margin: 0; height: 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; font-size: .95rem; font-weight: 600; border-bottom: 1px solid var(--hdb-line); background: var(--hdb-bg); }
.hdb-cal-wd { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--hdb-muted); }
.hdb-cal-date { font-size: 1rem; }
.hdb-cal-day { border-left: 1px solid var(--hdb-line); min-width: 0; }
.hdb-cal-day.is-weekend .hdb-cal-col { background-color: #fcfbf8; }
.hdb-cal-day.is-today .hdb-cal-dayhead { background: #eef4ef; }
.hdb-cal-day.is-today .hdb-cal-date { background: #3d6b4f; color: #fff; border-radius: 999px; padding: 0 .55rem; }
.hdb-cal-col { position: relative; height: calc(var(--hdb-hours) * var(--hdb-hour-h)); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hdb-hour-h) - 1px), var(--hdb-line) calc(var(--hdb-hour-h) - 1px), var(--hdb-line) var(--hdb-hour-h)); }
.hdb-cal-times .hdb-cal-col { background: none; }
.hdb-cal-times span { position: absolute; top: calc(var(--hdb-row) * var(--hdb-hour-h)); right: .4rem; transform: translateY(-50%); font-size: .72rem; color: var(--hdb-muted); font-variant-numeric: tabular-nums; }
.hdb-cal-times span:first-child { transform: translateY(2px); }

/* Kacheln – heller, getönter Hintergrund + dunkle Schrift im Gruppenfarbton (Kontrast ≥ 7:1, vom Plugin berechnet) */
.hdb-tile { position: absolute; z-index: 1; box-sizing: border-box; overflow: hidden;
	top: calc(var(--hdb-top) * var(--hdb-hour-h) + 3px);
	height: calc(var(--hdb-len) * var(--hdb-hour-h) - 6px);
	min-height: 2.6rem;
	left: calc(var(--hdb-lane) / var(--hdb-lanes) * 100% + 4px);
	width: calc(100% / var(--hdb-lanes) - 8px);
	display: flex; flex-direction: column; gap: .1rem; padding: .45rem .55rem .5rem .75rem;
	border-radius: 12px; color: var(--hdb-tile-ink) !important; text-decoration: none !important;
	background: linear-gradient(170deg, var(--hdb-bg1) 0%, var(--hdb-bg2) 100%);
	border: 1px solid var(--hdb-edge);
	box-shadow:
		inset 4px 0 0 var(--hdb-accent),
		inset 0 1px 0 rgba(255,255,255,.9),
		inset 0 -2px 0 color-mix(in srgb, var(--hdb-accent) 22%, transparent),
		0 1px 2px rgba(0,0,0,.08),
		0 8px 16px -10px var(--hdb-shadow);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hdb-tile::before { content: ""; position: absolute; inset: 0 0 auto 4px; height: 45%; border-radius: 0 12px 40% 40% / 0 12px 14px 14px; background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
a.hdb-tile:hover { transform: translateY(-2px); z-index: 2; box-shadow: inset 4px 0 0 var(--hdb-accent), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 color-mix(in srgb, var(--hdb-accent) 22%, transparent), 0 3px 5px rgba(0,0,0,.08), 0 14px 22px -12px var(--hdb-shadow); }
a.hdb-tile:active { transform: translateY(1px); }
a.hdb-tile:focus-visible { outline: 3px solid var(--hdb-tile-ink); outline-offset: 2px; }
.hdb-tile > span { position: relative; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hdb-tile-time { font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdb-tile-title { font-size: .9rem; font-weight: 700; line-height: 1.2; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: clip !important; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.hdb-tile.is-short { padding-top: .35rem; padding-bottom: .4rem; gap: 0; }
.hdb-tile.is-short .hdb-tile-info { display: none; }
.hdb-tile.is-short .hdb-tile-status { margin-top: .2rem; }
.hdb-tile.is-narrow { padding-left: .6rem; padding-right: .35rem; }
.hdb-tile.is-narrow .hdb-tile-title { font-size: .8rem; overflow-wrap: anywhere; }
.hdb-tile.is-narrow .hdb-tile-time { font-size: .68rem; }
.hdb-tile.is-narrow .hdb-tile-status { font-size: .64rem; padding: .08rem .35rem; }
.hdb-tile-info { font-size: .74rem; white-space: nowrap; }
/* Status als dunkles Etikett mit weißer Schrift */
.hdb-tile-status { margin-top: auto; align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .01em; padding: .12rem .5rem; border-radius: 999px; background: var(--hdb-tile-ink); color: #fff; white-space: nowrap; }
.hdb-tile.is-full { filter: saturate(.3); }
.hdb-tile.is-full .hdb-tile-status { background: #5c5852; }
.hdb-tile.is-past { filter: grayscale(.8); opacity: .5; }
.hdb-tile.is-cancelled { filter: grayscale(.9); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 8px, transparent 8px 16px), linear-gradient(170deg, var(--hdb-bg1), var(--hdb-bg2)); }
.hdb-tile.is-cancelled .hdb-tile-title { text-decoration: line-through; }
.hdb-tile.is-cancelled .hdb-tile-status { background: #5c5852; }

/* Freie Zeiten „nach Absprache“ – helle, gestrichelte Felder hinter den Terminen */
.hdb-slot { position: absolute; z-index: 0; box-sizing: border-box; overflow: hidden;
	top: calc(var(--hdb-top) * var(--hdb-hour-h) + 3px); height: calc(var(--hdb-len) * var(--hdb-hour-h) - 6px);
	left: 4px; right: 4px; display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem;
	border: 1.5px dashed #cfc8bb; border-radius: 12px; color: #4f4a43 !important; text-decoration: none !important;
	background: repeating-linear-gradient(135deg, #fbfaf7 0 10px, #f6f3ee 10px 20px);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.hdb-slot-time { font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #6f6a62; }
.hdb-slot-label { font-size: .8rem; font-weight: 600; line-height: 1.25; }
.hdb-slot-cta { margin-top: auto; align-self: flex-start; font-size: .72rem; font-weight: 700; color: #3d6b4f; padding: .1rem .5rem; border-radius: 999px; background: #fff; border: 1px solid #d9e6dd; }
.hdb-slot.is-short { padding: .35rem .55rem; gap: 0; }
.hdb-slot.is-short .hdb-slot-label { display: none; }
.hdb-slot.is-short .hdb-slot-cta { margin-top: .25rem; }
a.hdb-slot:hover, a.hdb-slot:focus-visible { border-color: #3d6b4f; background: #f1f7f2; box-shadow: 0 6px 14px -10px rgba(61,107,79,.6); }
a.hdb-slot:hover .hdb-slot-cta { background: #3d6b4f; color: #fff; border-color: #3d6b4f; }
a.hdb-slot:focus-visible { outline: 3px solid #3d6b4f; outline-offset: 2px; }
.hdb-cal-dot-free { background: repeating-linear-gradient(135deg, #fbfaf7 0 3px, #e9e4da 3px 6px) !important; border: 1.5px dashed #b9b1a3; box-shadow: none !important; }

/* Legende */
.hdb-cal-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--hdb-muted); }
.hdb-cal-legend li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.hdb-cal-dot { width: .95rem; height: .95rem; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2); }

/* Nach Absprache */
.hdb-cal-request { margin: 2rem 0 0; }
.hdb-cal-request h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.hdb-cal-request .hdb-small { margin: 0 0 .9rem; }
.hdb-cal-request-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.hdb-tile.hdb-tile-request { position: relative; inset: auto; top: auto; left: auto; width: auto; height: auto; min-height: 6.5rem; padding: .8rem .95rem; gap: .25rem; }
.hdb-tile-request .hdb-tile-title { font-size: 1.02rem; }

/* ===== Schmale Spalte / Handy: Tagesliste ===== */
@media (max-width: 760px) {
	.hdb-cal-grid { display: block; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
	.hdb-cal-times, .hdb-cal-day.is-empty { display: none; }
	.hdb-cal-day { border: 0; margin: 0 0 1.1rem; }
	.hdb-cal-dayhead { flex-direction: row; justify-content: flex-start; gap: .5rem; height: auto; padding: 0 0 .5rem; background: none !important; border: 0; }
	.hdb-cal-wd { font-size: .8rem; }
	.hdb-cal-col { height: auto; background: none !important; display: grid; gap: .6rem; }
	.hdb-tile { position: relative; inset: auto; top: auto; left: auto; width: auto; height: auto; min-height: 0; padding: .75rem .95rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "time status" "title title" "info info"; align-items: center; column-gap: .75rem; row-gap: .15rem; }
	.hdb-tile-time { grid-area: time; font-size: .85rem; }
	.hdb-tile-title { grid-area: title; font-size: 1.05rem; -webkit-line-clamp: 3; overflow-wrap: normal; }
	.hdb-tile-info { grid-area: info; }
	.hdb-tile-status { grid-area: status; margin: 0; align-self: center; font-size: .75rem; }
	a.hdb-tile:hover { transform: translateY(-1px); }
	.hdb-tile.is-short, .hdb-tile.is-narrow { padding: .75rem .95rem; }
	.hdb-tile.is-narrow .hdb-tile-title { font-size: 1rem; }
	.hdb-tile.is-narrow .hdb-tile-time { font-size: .85rem; }
	.hdb-tile.is-narrow .hdb-tile-status { font-size: .75rem; padding: .1rem .45rem; }
	.hdb-tile.is-short .hdb-tile-info { display: block; }
	.hdb-slot { position: relative; top: auto; left: auto; right: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .6rem .9rem; }
	.hdb-slot-time { font-size: .82rem; }
	.hdb-slot-label { flex: 1 1 10rem; }
	.hdb-slot-cta { margin: 0; align-self: center; }
	.hdb-slot.is-short .hdb-slot-label { display: block; }
}
@media (prefers-reduced-motion: reduce) { .hdb-tile, .hdb-cal-btn { transition: none; } }