/* ==========================================================================
   Run 11: Shopify-Kostenrechner (templates/partials/kostenrechner.html, static/js/rechner.js).
   Asynchron geladen (pages.json → tool_css; im Artikel nur mit Marker). Nur Tokens aus tokens.css, Felder/Buttons/
   Tabelle aus components.css. Ohne diese Datei bleibt alles lesbar (native Felder, Tabelle aus components.css).
   Keine Bewegung: Balken ändern ihre Breite ohne Übergang; Hover nur als Farbwechsel.
   ========================================================================== */
.calc { display: grid; gap: var(--space-5); min-width: 0; }
.calc[data-calc] .calc__form[hidden], .calc [hidden] { display: none; }
.calc__form { display: grid; gap: var(--space-6); align-items: start; }
.calc__in { display: grid; gap: var(--space-5); min-width: 0; }
@media (min-width: 64rem) {
  .calc:not(.calc--kompakt) .calc__form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); }
  .calc:not(.calc--kompakt) .calc__res { position: sticky; top: 6rem; }
}

/* Gruppen und Auswahl-Chips (Radio): ganze Fläche ist Tap-Ziel, 48 px hoch, Auswahl = Rand in Textfarbe + Fläche */
.calc__set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.calc__set > legend { padding: 0; margin-bottom: var(--space-2); }
.calc__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 40rem) { .calc__chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc__chip { position: relative; display: block; cursor: pointer; }
.calc__chip input { position: absolute; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); overflow: hidden; }
.calc__chip span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); text-align: center;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.calc__chip:hover span { border-color: var(--text); }
.calc__chip input:checked + span { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--raised); }
.calc__chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.calc__row { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .calc__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc__unit { position: relative; }
.calc__unit .input { padding-right: var(--space-7); }
.calc__unit .cur { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.calc__lab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.calc__val { font-size: var(--fs-base); }
.calc__range { width: 100%; min-height: 44px; margin: 0; accent-color: var(--text); cursor: pointer; touch-action: manipulation; }
.calc__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc__check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; font-size: var(--fs-base); }
.calc__check input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--text); }
.calc__check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc__opt .input[disabled] { opacity: .5; cursor: not-allowed; }

/* Ergebnis: Fläche wie .mini-cta/.kpi (Rand, --r-3) */
.calc__res { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); border: var(--border); border-radius: var(--r-3); background: var(--surface); min-width: 0; }
.tone-surface .calc__res { background: var(--bg); }
.calc__kicker, .calc__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); margin: 0; }
.calc__title { font-size: var(--fs-md); color: var(--text); }
.calc__tot { display: grid; gap: var(--space-4); margin: 0; }
.calc__tot dt { font-size: var(--fs-sm); color: var(--text-2); }
.calc__tot dd { margin: 0; }
.calc__big, .calc__yr { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.calc__big { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.calc__yr { font-size: var(--fs-lg); }
.calc__big .num, .calc__yr .num { font-weight: 500; letter-spacing: -.02em; }
.calc__meta { font-size: var(--fs-sm); color: var(--text-2); margin: 0; }

/* Aufschlüsselung als horizontale Balken (dataviz: Größenvergleich → Balken, eine Achse, Wert als Text daneben).
   Shopify/Drittanbieter: Daten-Blau gefüllt. EcomVorsprung: gleicher Ton als Kontur (zweite Kodierung, nicht nur Farbe). */
.calc__chart { margin: 0; display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border); }
.calc__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.calc__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1); align-items: baseline; margin: 0; }
.calc__bl { font-size: var(--fs-sm); min-width: 0; }
.calc__bl small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.calc__bv { font-size: var(--fs-sm); white-space: nowrap; text-align: right; }
.calc__track { grid-column: 1 / -1; display: block; height: 10px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.calc__fill { display: block; height: 100%; width: 0; border-radius: 2px 4px 4px 2px; background: var(--data); }
.calc__bar--ev .calc__fill { background: var(--data-soft); box-shadow: inset 0 0 0 2px var(--data); }
.calc__legend { font-size: var(--fs-xs); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0; }
.calc__li { display: inline-flex; align-items: center; gap: var(--space-2); }
.calc__key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--data); }
.calc__key--ev { background: var(--data-soft); box-shadow: inset 0 0 0 2px var(--data); }
.calc__res .source { margin: 0; }
.calc__static { display: grid; gap: var(--space-3); }
.calc__static .source { margin: 0; }
.calc__cta { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border); }
.calc__cta p { margin: 0; font-size: var(--fs-base); }

/* Im Artikel (.prose): Fließtext-Regeln der Prosa nicht auf den Rechner anwenden */
.prose .calc { margin-block: var(--space-6); padding: var(--space-5); border: var(--border); border-radius: var(--r-3); }
.prose .calc ul, .prose .calc li { list-style: none; padding: 0; margin: 0; }
.prose .calc p, .prose .calc dl, .prose .calc figure { margin: 0; max-width: none; }
.prose .calc .calc__res { padding: var(--space-5) var(--space-4); }
.prose .calc a.btn { text-decoration: none; color: var(--btn-fg); background-image: none; padding-bottom: 0; }
@media (max-width: 40rem) { .prose .calc a.btn { padding-block: var(--space-2); } }  /* wie .btn mobil (components.css), .prose a setzt sonst padding-bottom 1px */

@media (prefers-reduced-motion: reduce) { .calc__chip span { transition: none; } }