/* WS Mietwerk – Schaufenster. Farben/Spalten/Radius aus den Einstellungen (CSS-Variablen am Baustein). */
.wsm-sf {
	--sf-line: #e1e1e1;
	--sf-muted: #5f6b65;
	--sf-tint: color-mix(in srgb, var(--wsm-accent) 12%, #fff);
	color: #1d2420;
	line-height: 1.5;
	container-type: inline-size;
}
.wsm-sf *, .wsm-sf *::before, .wsm-sf *::after { box-sizing: border-box; }
.wsm-sf a, .wsm-sf a:hover, .wsm-sf button:hover { text-decoration: none !important; }

/* Wochenenden */
.wsm-sf-when { margin: 0 0 20px; padding: 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-r); background: #fff; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .45); }
.wsm-sf-when-t { margin: 0 0 10px; }
.wsm-sf-when-t b { font-size: 1.25em; margin-right: 8px; }
.wsm-sf-when-t small { color: var(--sf-muted); }
.wsm-sf-chiprow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.wsm-sf-chips { display: flex; gap: 6px; min-width: 0; }
.wsm-sf .wsm-sf-chip { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; text-align: center; min-height: 52px; padding: 7px 4px; border: 1.5px solid var(--sf-line) !important; border-radius: 10px; background: #fff; color: inherit; font: inherit; line-height: 1.2; cursor: pointer; }
.wsm-sf .wsm-sf-chip[hidden] { display: none; }
.wsm-sf .wsm-sf-chip:hover { border-color: var(--wsm-accent) !important; }
.wsm-sf .wsm-sf-chip b { font-size: .95em; white-space: nowrap; }
.wsm-sf .wsm-sf-chip small { font-size: .72em; color: var(--sf-muted); }
.wsm-sf .wsm-sf-chip[aria-pressed="true"] { background: var(--wsm-accent); border-color: var(--wsm-accent) !important; color: var(--wsm-on-accent, #fff); }
.wsm-sf .wsm-sf-chip[aria-pressed="true"] small { color: inherit; opacity: .85; }
.wsm-sf .wsm-sf-nav { width: 36px; height: 36px; border: 1px solid var(--sf-line); border-radius: 50%; background: #fff; color: inherit; font: inherit; font-size: 1.2em; line-height: 1; cursor: pointer; }
.wsm-sf .wsm-sf-nav:disabled { opacity: .35; cursor: default; }

/* Karten */
.wsm-sf-grid { display: grid; grid-template-columns: repeat(var(--sf-m), minmax(0, 1fr)); gap: 16px; }
@container (min-width: 560px) { .wsm-sf-grid { grid-template-columns: repeat(var(--sf-t), minmax(0, 1fr)); } }
@container (min-width: 960px) { .wsm-sf-grid { grid-template-columns: repeat(var(--sf-d), minmax(0, 1fr)); } }
.wsm-sf-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-r); overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.wsm-sf-card:hover { border-color: color-mix(in srgb, var(--wsm-accent) 45%, var(--sf-line)); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .45); }
.wsm-sf-card.is-busy { opacity: .62; }
.wsm-sf-pic { display: block; aspect-ratio: 4 / 3; background: #f4f7f5; }
.wsm-sf-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wsm-sf-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 14px; }
.wsm-sf-src { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .75em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-src, var(--wsm-accent-text, var(--wsm-accent))); }
.wsm-sf-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }
.wsm-sf-body h3 { margin: 0; font-size: 1.05em; line-height: 1.3; }
.wsm-sf-body h3 a { color: inherit; }
.wsm-sf-body h3 a:hover { color: var(--wsm-accent-text, var(--wsm-accent)); }
.wsm-sf-text { margin: 0; font-size: .88em; color: var(--sf-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wsm-sf-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 6px; }
.wsm-sf-price { margin: 0; font-size: .88em; color: var(--sf-muted); }
.wsm-sf-price b { font-size: 1.35em; color: #1d2420; }
.wsm-sf-state { margin: 0; justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: .78em; font-weight: 600; background: var(--sf-tint); color: var(--wsm-accent-text, var(--wsm-accent)); }
.wsm-sf-state.is-angefragt { background: #fff6e8; color: #8a5a12; }
.wsm-sf-state.is-belegt { background: #f1f1f1; color: #6b6b6b; }
.wsm-sf .wsm-sf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; border-radius: 10px; background: var(--wsm-accent); color: var(--wsm-on-accent, #fff) !important; font-weight: 700; text-align: center; transition: background .15s; }
.wsm-sf .wsm-sf-btn:hover { background: color-mix(in srgb, var(--wsm-accent) 86%, #000); }
.wsm-sf-card.is-busy .wsm-sf-btn { background: #fff; border: 1.5px solid var(--sf-line); color: #1d2420 !important; }
.wsm-sf-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff6e8; color: #8a5a12; font-size: .92em; }
.wsm-sf-note a { color: inherit; font-weight: 700; }
.wsm-sf-stand { margin: 12px 0 0; font-size: .8em; color: var(--sf-muted); text-align: right; }
.wsm-sf .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
@media (prefers-reduced-motion: reduce) { .wsm-sf-card { transition: none; } }