/* Bausteine des Plugins. Farben kommen aus dem Theme (Variablen), mit Rückfallwerten. */
.wh-kalender, .wh-abfuhr, .wh-verzeichnis, .wh-formular, .wh-liste, .wh-karten, .wh-eckdaten, .wh-belegung {
	--wh-a: var(--wh-blau, #1f4e8c);
	--wh-t: var(--wh-text, #1b2430);
	--wh-t2: var(--wh-text-leise, #5a6574);
	--wh-f: var(--wh-flaeche, #ffffff);
	--wh-f2: var(--wh-flaeche-2, #f2f5f9);
	--wh-r: var(--wh-rand, #d8dee8);
	--wh-rad: var(--wh-radius, 10px);
}

[hidden] { display: none !important; }

.wh-btn {
	display: inline-flex; align-items: center; gap: .4em;
	background: var(--wh-a, #1f4e8c); color: #fff !important; text-decoration: none !important;
	border: 2px solid var(--wh-a, #1f4e8c); border-radius: 999px;
	padding: .55em 1.1em; font-weight: 600; font-size: .95rem; line-height: 1.2; cursor: pointer;
}
.wh-btn:hover { filter: brightness(1.1); }
.wh-btn--hell { background: transparent; color: var(--wh-a, #1f4e8c) !important; }
.wh-btn--klein { padding: .35em .8em; font-size: .85rem; }
.wh-klein { font-size: .85rem; color: var(--wh-t2, #5a6574); }
.wh-leer { color: var(--wh-t2, #5a6574); font-style: italic; }

/* Filter */
.wh-legende { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; }
.wh-legende__titel { font-weight: 600; margin-right: .25rem; }
.wh-legende__chip, .wh-legende__alle {
	display: inline-flex; align-items: center; gap: .4em; font: inherit; font-size: .85rem;
	background: var(--wh-f); color: var(--wh-t); border: 1px solid var(--wh-r); border-radius: 999px;
	padding: .3em .75em; cursor: pointer;
}
.wh-legende__chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.wh-legende__alle { border-style: dashed; }
.wh-punkt { width: .7em; height: .7em; border-radius: 50%; display: inline-block; flex: none; }

/* Kalender */
.wh-kalender__leiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.wh-kalender__monat { font-size: 1.25rem; min-width: 10ch; text-align: center; }
.wh-kalender__umschalter { margin-left: auto; font-size: .9rem; }
.wh-kalender__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.wh-monat { border: 1px solid var(--wh-r); border-radius: var(--wh-rad); overflow: hidden; background: var(--wh-f); }
.wh-monat__kopf, .wh-monat__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wh-monat__kopf div { padding: .45rem; font-size: .8rem; font-weight: 600; text-align: center; background: var(--wh-f2); color: var(--wh-t2); }
.wh-monat__kopf .wh-wochenende { color: #b42318; }
.wh-tag { min-height: 6.2rem; border-top: 1px solid var(--wh-r); border-left: 1px solid var(--wh-r); padding: .3rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wh-tag:nth-child(7n+1) { border-left: 0; }
.wh-tag--leer { background: var(--wh-f2); }
.wh-tag__nr { font-size: .85rem; color: var(--wh-t2); }
.wh-tag.wh-wochenende .wh-tag__nr { color: #b42318; }
.wh-tag--heute { background: #fff8db; }
.wh-tag--heute .wh-tag__nr { font-weight: 700; color: var(--wh-t); }
.wh-ereignis {
	display: block; font-size: .78rem; line-height: 1.25; text-decoration: none !important; color: var(--wh-t) !important;
	background: color-mix(in srgb, var(--farbe) 14%, white); border-left: 3px solid var(--farbe);
	border-radius: 4px; padding: .15rem .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-ereignis:hover { background: color-mix(in srgb, var(--farbe) 26%, white); }
.wh-ereignis__zeit { font-variant-numeric: tabular-nums; color: var(--wh-t2); }
.wh-nur-mobil { display: none; }

@media (max-width: 720px) {
	.wh-monat__kopf { display: none; }
	.wh-monat__raster { display: block; }
	.wh-tag { min-height: 0; border-left: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; padding: .5rem .6rem; }
	.wh-tag--leer, .wh-tag--frei { display: none; }
	.wh-tag__nr { width: 5.5em; flex: none; font-weight: 600; color: var(--wh-t); }
	.wh-ereignis { white-space: normal; flex: 1 1 60%; font-size: .9rem; }
	.wh-ereignis + .wh-ereignis { margin-left: 5.5em; }
	.wh-nur-mobil { display: inline; }
	.wh-monat:not(:has(.wh-ereignis:not([hidden])))::after { content: "In diesem Monat sind keine Termine eingetragen."; display: block; padding: 1rem; color: var(--wh-t2); font-style: italic; }
}

/* Liste */
.wh-liste { list-style: none; margin: 0; padding: 0; }
.wh-liste__monat { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wh-t2); margin: 1.25rem 0 .4rem; }
.wh-liste__eintrag { display: flex; gap: .9rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--wh-r); }
.wh-datum {
	flex: none; width: 3.4rem; height: 3.4rem; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--farbe, #1f4e8c) 14%, white); border-top: 4px solid var(--farbe, #1f4e8c);
}
.wh-datum__tag { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.wh-datum__monat { font-size: .75rem; text-transform: uppercase; }
.wh-liste__text { display: flex; flex-direction: column; min-width: 0; }
.wh-liste__text a { font-weight: 600; color: var(--wh-t); text-decoration: none; }
.wh-liste__text a:hover { text-decoration: underline; }
.wh-liste__meta { font-size: .85rem; color: var(--wh-t2); }

/* Eckdaten / Kontaktkasten */
.wh-eckdaten {
	display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1.5rem;
	background: var(--wh-f2); border-left: 4px solid var(--farbe, var(--wh-a)); border-radius: var(--wh-rad); padding: 1rem 1.25rem;
}
.wh-eckdaten dt { font-weight: 600; }
.wh-eckdaten dd { margin: 0; }

/* Abfuhr */
.wh-tonnen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.wh-tonne { background: var(--wh-f); border: 1px solid var(--wh-r); border-top: 6px solid var(--farbe); border-radius: var(--wh-rad); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.wh-tonne__art { font-weight: 700; }
.wh-tonne__datum { font-size: 1.05rem; }
.wh-tonne__bis { font-size: .85rem; color: var(--wh-t2); }
.wh-abfuhr__aktionen { margin: 1.25rem 0; }
.wh-naechste-abfuhr { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wh-naechste-abfuhr__wann { font-weight: 600; margin-right: .3rem; }
.wh-chip { display: inline-block; font-size: .85rem; padding: .2em .7em; border-radius: 999px; background: color-mix(in srgb, var(--farbe) 16%, white); border: 1px solid var(--farbe); }

/* Karten (Unternehmen, Räume, Vereine) */
.wh-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.wh-karte { background: var(--wh-f); border: 1px solid var(--wh-r); border-radius: var(--wh-rad); overflow: hidden; display: flex; flex-direction: column; }
.wh-karte__bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--wh-f2); overflow: hidden; }
.wh-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.wh-karte__bild--logo img { object-fit: contain; padding: 1rem; }
.wh-karte__initial { font-size: 2.5rem; font-weight: 700; color: var(--wh-a); }
.wh-karte__text { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.wh-karte__text h3 { margin: 0; font-size: 1.1rem; }
.wh-karte__text h3 a { color: var(--wh-t); text-decoration: none; }
.wh-karte__text p { margin: 0; }
.wh-karte__dach { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wh-a); font-weight: 700; }
.wh-kontakt { list-style: none; padding: 0; margin: auto 0 0; font-size: .9rem; color: var(--wh-t2); }
.wh-karten--vereine { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wh-verein { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; text-align: center; text-decoration: none !important; color: var(--wh-t) !important; background: var(--wh-f); border: 1px solid var(--wh-r); border-radius: var(--wh-rad); }
.wh-verein img { height: 90px; width: auto; max-width: 100%; object-fit: contain; }
.wh-verein:hover { border-color: var(--wh-a); }
.wh-verein__name { font-weight: 600; font-size: .95rem; }

/* Belegung */
.wh-belegung { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.wh-mini h4 { margin: 0 0 .4rem; }
.wh-mini__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: .85rem; }
.wh-mini__kopf { font-weight: 600; color: var(--wh-t2); font-size: .75rem; }
.wh-mini__tag { padding: .3rem 0; border-radius: 4px; background: #e7f6ec; }
.wh-mini__tag.is-belegt { background: #b42318; color: #fff; font-weight: 600; }
.wh-mini__tag.is-vorbei { opacity: .4; }
.wh-mini__tag.is-heute { outline: 2px solid var(--wh-a); }
.wh-mini__muster { display: inline-block; width: 1.6em; }

/* Formulare */
.wh-formular { background: var(--wh-f2); border-radius: var(--wh-rad); padding: 1.25rem; margin: 1.5rem 0; }
.wh-formular h2, .wh-formular h3 { margin-top: 0; }
.wh-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.wh-raster .wh-voll { grid-column: 1 / -1; }
.wh-formular label { display: block; font-weight: 600; margin-bottom: .25rem; }
.wh-formular label.wh-check, .wh-arten label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.wh-arten { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.wh-arten legend { font-weight: 600; margin-bottom: .3rem; }
.wh-formular input[type=text], .wh-formular input[type=email], .wh-formular input[type=date], .wh-formular input[type=time],
.wh-formular input[type=tel], .wh-formular input[type=number], .wh-formular select, .wh-formular textarea {
	width: 100%; box-sizing: border-box; font: inherit; padding: .55rem .7rem; border: 1px solid var(--wh-r); border-radius: 6px; background: #fff; color: var(--wh-t);
}
.wh-formular input:focus, .wh-formular select:focus, .wh-formular textarea:focus { outline: 2px solid var(--wh-a); outline-offset: 1px; }
.wh-meldung { background: #e7f6ec; border-left: 4px solid #1a7f37; padding: .7rem 1rem; border-radius: 6px; }
.wh-meldung--fehler { background: #fdecea; border-left-color: #b42318; }
.wh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Filter einklappbar (auf dem Handy standardmäßig zu) */
.wh-legende-box { margin: 0 0 1rem; }
.wh-legende-box > summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
@media (min-width: 721px) { .wh-legende-box > summary { list-style: none; pointer-events: none; } .wh-legende-box > summary::-webkit-details-marker { display: none; } }
.wh-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.wh-danach { list-style: none; margin: .9rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--wh-rand, #d8dee8); display: grid; gap: .3rem; }
.wh-danach li { display: flex; align-items: center; gap: .5rem; }
.wh-danach li span:last-child { margin-left: auto; color: var(--wh-text-leise, #5a6574); font-size: .9rem; }