/* Feinschliff für Funktionsseiten (Kauf, Demo, Rechner).
   Wird nach dem seiteninternen Stil geladen und zieht die Reste der alten
   Farbwelt auf das Design-System. Nur Ergänzungen, keine neuen Komponenten. */

body,
h1, h2, h3, h4,
button, input, select, textarea {
  font-family: var(--f-sans);
}

body { color: var(--c-ink); }
h1 { letter-spacing: -.03em; line-height: 1.06; font-weight: 800; }
h2 { letter-spacing: -.02em; }
.lead { font-size: var(--t-lead); color: var(--c-text-2); line-height: 1.5; }
.thin { color: var(--c-text-3); }

/* Kopfzeile der Funktionsseiten liegt über dem alten Sticky-Header */
header { position: static; border: 0; background: transparent; }

/* Kauf-Konfigurator */
.kfgsec { margin-top: var(--s-6); }
.kfg { border-color: var(--c-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-float); }
.kfg-sum { background: var(--c-bg-soft); border-left-color: var(--c-line); }
.kfg-sum .lab { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-text-3); }
.kfg-total { font-weight: 800; letter-spacing: -.035em; }
.kfg-trial { color: var(--c-brand); font-weight: 600; }
.kfg-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.kfg-plan .card { border-color: var(--c-line); border-radius: var(--r-md); background: #fff; }
.kfg-plan .nm { font-size: 14px; color: var(--c-text-2); letter-spacing: 0; }
.kfg-plan .pr { font-weight: 800; letter-spacing: -.03em; }
.kfg-plan input:checked + .card { border-color: var(--c-brand); background: var(--c-brand-tint); box-shadow: inset 0 0 0 1px var(--c-brand); }
.kfg-plan .badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--c-brand); color: #fff; border-radius: var(--r-pill); padding: 3px 9px;
}
.kfg-addon { border-color: var(--c-line); border-radius: var(--r-md); background: #fff; }
.kfg-addon.on { border-color: var(--c-brand-light); background: var(--c-brand-tint); }
.kfg-chips button { border-radius: var(--r-pill); border-color: var(--c-line); color: var(--c-text-2); }
.kfg-chips button.on { color: var(--c-brand); border-color: var(--c-brand); background: var(--c-brand-tint); }
.kfg-step button { border-radius: 10px; border-color: var(--c-line); color: var(--c-ink); }
.kfg-switch input:checked + .track { background: var(--c-brand); border-color: var(--c-brand); }
.kfg-switch input:checked + .track::after { background: #fff; }
.kfg-emp input { border-radius: 10px; border-color: var(--c-line); }

/* Kaufknopf: alter Stil setzte dunkle Schrift auf dunklen Grund */
.kfg .kfg-buy {
  border-radius: var(--r-pill); background: var(--c-brand); color: #fff;
  font-weight: 600; font-size: 16px; min-height: 52px;
}
.kfg .kfg-buy:hover:not(:disabled) { background: var(--c-brand-deep); filter: none; }
.kfg .kfg-buy:disabled { background: var(--c-line); color: var(--c-text-3); }
.kfg-err { color: #A23B30; }

/* Preisübersicht im HTML (ohne JavaScript sichtbar) */
.ssr-priceblock {
  margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-line);
  max-width: 820px;
}
.ssr-priceblock h2 { font-size: 32px; font-weight: 800; margin-bottom: var(--s-2); }
.ssr-priceblock .ssr-lead { font-size: var(--t-body); color: var(--c-text-2); margin-bottom: var(--s-5); }
.ssr-priceblock h3 { font-size: 20px; font-weight: 700; margin: var(--s-5) 0 var(--s-3); }
.ssr-prices {
  width: 100%; border-collapse: collapse; font-size: var(--t-ui);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
}
.ssr-prices th, .ssr-prices td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-line);
}
.ssr-prices th { font-size: var(--t-xs); font-weight: 600; color: var(--c-text-3); background: var(--c-bg-soft); }
.ssr-prices tr:last-child td { border-bottom: 0; }
.ssr-prices td.nr { text-align: right; font-weight: 700; white-space: nowrap; }
.ssr-priceblock .stand, .ssr-priceblock small { font-size: var(--t-xs); color: var(--c-text-3); }
.ssr-priceblock ul { margin: 0 0 var(--s-3); padding-left: 20px; color: var(--c-text-2); font-size: var(--t-ui); }

/* Rückmeldungen */
.hint { border-radius: var(--r-md); }

/* Rechner und Demo: Karten und Felder an die Tokens ziehen */
.card { border-radius: var(--r-lg); }
.field label { font-size: var(--t-ui); font-weight: 600; }
.field input[type="number"], .field input[type="text"], .field select {
  border-radius: 10px; border-color: var(--c-line); font-family: var(--f-sans);
}
input[type="range"] { accent-color: var(--c-brand); }

/* Antworten/Akkordeon */
details { border-radius: var(--r-md); border-color: var(--c-line); }
summary { font-weight: 600; }

/* Keine Etiketten in Großbuchstaben (Vorgabe des Design-Systems) */
.notes-h, .picks-h, .proto h2, .proto-meta, .turn b,
.lbl-upper, .eyebrow {
  text-transform: none; letter-spacing: 0; font-size: var(--t-xs); font-weight: 600;
  color: var(--c-text-3);
}

/* Namenskollisionen mit fs.css auflösen */
.assume .steps { display: inline; }
.assume .steps b, .assume .steps span { display: inline; font-weight: inherit; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: var(--s-5); }
.actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600;
}
.pkg { border-radius: var(--r-md); }

/* Etiketten nicht in Großbuchstaben (auch .badge/.eyebrow der Altseiten) */
.badge, .eyebrow, .head .eyebrow, .tag, .label {
  text-transform: none; letter-spacing: 0;
}
.badge { font-weight: 600; }

/* Altseiten: ol.steps ist eine numerierte Liste, keine Preiszeile */
ol.steps { display: block; }
ol.steps > li { display: block; justify-content: initial; gap: 0; }
ol.steps > li::before { position: absolute; }

/* Abstand unter der schwebenden Kopfzeile (Altseiten brachten ihren eigenen Header mit) */
main.wrap { padding-top: 46px; }
@media (max-width: 900px) { main.wrap { padding-top: 26px; } }