/* WS Mietwerk – Bestätigung nach dem Absenden. Farben über --wsm-accent, Schrift vom Theme. */
.wsm-confirm {
	--cf-text: #1d2420;
	--cf-muted: #5f6b65;
	--cf-line: #e3e8e5;
	--cf-soft: #f4f7f5;
	--cf-tint: color-mix(in srgb, var(--wsm-accent, #1f6f5c) 10%, #fff);
	color: var(--cf-text);
	line-height: 1.5;
	container-type: inline-size;
	outline: none;
}
.wsm-confirm *, .wsm-confirm *::before, .wsm-confirm *::after { box-sizing: border-box; }
.wsm-cf-hero { text-align: center; padding: 28px 16px 30px; border-radius: 22px; background: var(--cf-tint); margin-bottom: 22px; }
.wsm-cf-check { width: 72px; height: 72px; margin: 0 auto 14px; }
.wsm-cf-check svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wsm-cf-check circle { fill: var(--wsm-accent, #1f6f5c); stroke: none; transform-origin: center; animation: wsm-cf-pop .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.wsm-cf-check path { stroke: var(--wsm-on-accent, #fff); stroke-dasharray: 40; stroke-dashoffset: 40; animation: wsm-cf-draw .35s .25s ease-out forwards; }
@keyframes wsm-cf-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wsm-cf-draw { to { stroke-dashoffset: 0; } }
.wsm-cf-kicker { margin: 0 0 4px; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wsm-accent-text, var(--wsm-accent, #1f6f5c)); }
.wsm-cf-hero h2 { margin: 0 0 8px; font-size: clamp(1.6em, 4vw, 2.3em); line-height: 1.15; letter-spacing: -.01em; }
.wsm-cf-lead { max-width: 560px; margin: 0 auto 8px; font-size: 1.05em; }
.wsm-cf-mail { margin: 0; font-size: .88em; color: var(--cf-muted); }

.wsm-cf-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@container (max-width: 720px) { .wsm-cf-grid { grid-template-columns: 1fr; } }
.wsm-cf-card { border: 1px solid var(--cf-line); border-radius: 18px; overflow: hidden; background: #fff; }
.wsm-cf-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wsm-cf-card-in { padding: 18px 20px 20px; }
.wsm-cf-label { margin: 0; font-size: .78em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wsm-accent-text, var(--wsm-accent, #1f6f5c)); }
.wsm-cf-title { margin: 2px 0 12px; font-size: 1.3em; font-weight: 800; line-height: 1.25; }
.wsm-cf-facts { display: grid; gap: 4px; margin: 0 0 14px; }
.wsm-cf-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.wsm-cf-facts dt { font-size: .85em; color: var(--cf-muted); }
.wsm-cf-facts dd { margin: 0; }
.wsm-cf-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-line); }
.wsm-cf-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cf-line); font-size: .95em; }
.wsm-cf-lines b { white-space: nowrap; font-weight: 600; }
.wsm-cf-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 2px; font-weight: 700; }
.wsm-cf-total small { display: block; font-weight: 400; color: var(--cf-muted); font-size: .8em; }
.wsm-cf-total b { font-size: 1.7em; color: var(--wsm-accent-text, var(--wsm-accent, #1f6f5c)); }
.wsm-cf-small { margin: 0; font-size: .82em; color: var(--cf-muted); }

.wsm-cf-side { display: grid; gap: 14px; }
.wsm-cf-box { padding: 18px 20px; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
.wsm-cf-box.is-tint { background: var(--cf-tint); border-color: transparent; }
.wsm-cf-box h3 { margin: 0 0 10px; font-size: 1.08em; }
.wsm-cf-box p { margin: 0 0 12px; color: var(--cf-muted); font-size: .93em; }
.wsm-cf-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.wsm-cf-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: .95em; }
.wsm-cf-steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wsm-accent, #1f6f5c); color: var(--wsm-on-accent, #fff); font-size: .8em; font-weight: 700; }
.wsm-cf-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }

.wsm-confirm .wsm-cf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 2px solid var(--wsm-accent, #1f6f5c); border-radius: 12px; background: var(--wsm-accent, #1f6f5c); color: var(--wsm-on-accent, #fff); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .15s, transform .1s; }
.wsm-confirm .wsm-cf-btn:hover { filter: brightness(1.06); }
.wsm-confirm .wsm-cf-btn:active { transform: scale(.98); }
.wsm-confirm .wsm-cf-btn.is-ghost { background: #fff; color: var(--wsm-accent-text, var(--wsm-accent, #1f6f5c)); }
.wsm-cf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; }
@media (prefers-reduced-motion: reduce) { .wsm-cf-check circle, .wsm-cf-check path { animation: none; stroke-dashoffset: 0; } }