/* Beck360 · Werkzeuge im Blog (Preis-Rechner, Spekulationsfrist-Rechner)
   Ergänzt beck.css, nutzt nur dessen Tokens. Heller Kopf, keine Endlos-Animation. */

/* ---------- Kopf ---------- */
.wz-head .lead { max-width: 52ch; }
.wz-head h1 { max-width: 14ch; }
.wz-crumbs { margin-bottom: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.wz-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.wz-crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.wz-crumbs li + li::before { content: "/"; color: var(--color-muted); }
.wz-crumbs a { text-decoration: underline; text-decoration-color: var(--color-rule-strong); }
.wz-crumbs a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.wz-crumbs [aria-current] { color: var(--color-ink); font-weight: var(--weight-strong); }
.wz-warn {
  margin-top: var(--space-lg); max-width: 60ch; padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-accent); background: var(--color-accent-soft);
  border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--color-ink);
}

/* ---------- Rechner ---------- */
.wz-sec { padding-block: var(--section-gap-s); }
.wz-grid { display: grid; gap: var(--space-lg) var(--gap-columns); align-items: start; }
.wz-card { min-width: 0; background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
@media (min-width: 40rem) { .wz-card { padding: var(--space-xl); } }
@media (min-width: 64rem) {
  .wz-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .wz-form { grid-column: 1 / 8; }
  .wz-out { grid-column: 8 / 13; position: sticky; top: calc(var(--header) + var(--space-md)); }
}
.wz-step + .wz-step, [data-preis-schritte] > .wz-step:first-child { margin-top: var(--space-xl); }
.wz-form .grp > legend { font-size: var(--text-md); }
.wz-form .grp > legend .opt { font-size: var(--text-sm); }
.wz-tiles--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .wz-tiles--one { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 40rem) { .wz-tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wz-form .chips .tile span { min-height: 44px; }
.wz-date { max-width: 20rem; }
.wz-actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- Ergebnis ---------- */
.wz-out__h { font-size: var(--text-title); max-width: none; }
.wz-empty { margin-top: var(--space-md); color: var(--color-ink-2); }
.wz-out__kind { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.wz-out__pkg { margin-top: var(--space-xs); font-size: var(--text-lg); }
.wz-price { margin-top: var(--space-xs); font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.wz-price__tax { font-size: var(--text-md); font-weight: 400; letter-spacing: 0; color: var(--color-ink-2); }
.wz-price--ask { font-size: var(--text-xl); }
.wz-list { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.wz-list li { position: relative; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.wz-list li::before { content: ""; position: absolute; left: 4px; top: calc(var(--space-xs) + 0.6em); width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.wz-list strong { color: var(--color-ink); }
.wz-list--plus li::before { content: "+"; top: var(--space-xs); width: auto; height: auto; background: none; color: var(--color-accent); font-weight: var(--weight-strong); }
.wz-list--ask li::before { content: "?"; top: var(--space-xs); width: auto; height: auto; background: none; color: var(--color-ink); font-weight: var(--weight-strong); }
.wz-out__sub { margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.wz-out__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.wz-out__honest { margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink); }
.wz-out__cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.wz-out__cta .lnk { font-size: var(--text-sm); }

/* Spekulationsfrist: Status nur als Rand, Text trägt die Aussage */
.wz-res { margin-top: var(--space-md); padding-left: var(--space-md); border-left: 3px solid var(--color-rule-strong); }
.wz-res[data-status="frei"] { border-left-color: var(--color-accent); }
.wz-res[data-status="frist"] { border-left-color: var(--color-error); }
.wz-res[data-status="pruefen"] { border-left-color: var(--color-ink); }
.wz-res__title { font-size: var(--text-lg); line-height: 1.25; }
.wz-dates { margin-top: var(--space-md); border-top: 1px solid var(--color-rule-strong); }
.wz-dates div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.wz-dates dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.wz-dates dd { font-weight: var(--weight-strong); white-space: nowrap; }

/* ---------- Text darunter ---------- */
.wz-prose { max-width: 60ch; }
.wz-prose + .wz-prose { margin-top: var(--space-md); }
.wz-rules { display: grid; gap: var(--space-xl) var(--gap-columns); counter-reset: rule; }
.wz-rules li { counter-increment: rule; border-top: 1px solid var(--color-rule-strong); padding-top: var(--space-md); }
.wz-rules h3 { font-size: var(--text-lg); }
.wz-rules h3::before { content: counter(rule) ". "; color: var(--color-accent); }
.wz-rules p { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 65ch; }
@media (min-width: 60rem) { .wz-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wz-sources { margin-top: var(--space-2xl); max-width: 80ch; }
.wz-sources h3 { font-size: var(--text-lg); }
.wz-sources ul { margin-top: var(--space-sm); display: grid; gap: var(--space-xs); }
.wz-sources li { color: var(--color-ink-2); overflow-wrap: anywhere; }
.wz-small { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.wz-form .fld { align-content: start; }