/* ==========================================================================
   Volt-Gas · Desktop-Variante C für den Wunschtarif-Rechner
   Wird nur ab 1200 px geladen (<link media="(min-width: 1200px)">), alle Regeln
   hängen an html.dkc. Handy und Tablet bleiben unverändert. Rechenlogik, Daten
   und Abläufe bleiben in calculator.js – hier wird nur gestaltet.
   ========================================================================== */
.dkc {
  --dk-ink: #0F1C3A;
  --dk-ink-2: #3C4A66;
  --dk-muted: #5F6B85;
  --dk-navy: #1A1F36;
  --dk-amber: #F5A500;
  --dk-amber-2: #E39A00;
  --dk-amber-soft: #FFF6E0;
  --dk-bg: #F4F6FA;
  --dk-card: #fff;
  --dk-line: #E3E8F0;
  --dk-line-2: #D2D9E5;
  --dk-green: #0F8A5F;
  --dk-green-2: #22A06B;
  --dk-red: #C62828;
  --dk-radius: 24px;
  --dk-shadow: 0 1px 2px rgba(15,28,58,.04), 0 22px 50px -24px rgba(15,28,58,.20);
  --dk-shadow-sm: 0 1px 2px rgba(15,28,58,.05), 0 8px 20px -12px rgba(15,28,58,.16);
  --dk-ease: cubic-bezier(.2,.7,.2,1);
}
.dkc .dk-only { display: revert; }
.dkc .dk-only[hidden] { display: none; }

/* ── Bühne ─────────────────────────────────────────────────────────────────── */
.dkc #rechner {
  padding: 80px 0 104px;
  background:
    radial-gradient(700px 380px at 84% 150px, rgba(245,165,0,.10), transparent 70%),
    linear-gradient(180deg, #EDF1F8 0, var(--dk-bg) 520px);
}
.dkc #rechner.section > .container { max-width: 1288px !important; padding-left: 24px !important; padding-right: 24px !important; }

/* Kopf: Überschrift links, Volti rechts */
.dkc #rechner .section__header {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 24px;
  max-width: none; margin: 0; padding: 0; text-align: left;
}
.dkc #rechner .section__header > h2 {
  grid-column: 1; margin: 0; font-size: 64px; line-height: 1.02; font-weight: 800; letter-spacing: -.04em; color: var(--dk-ink);
}
.dkc #rechner .section__header > h2::after { display: none; }
.dkc #rechner .section__header > p {
  grid-column: 1; margin: 16px 0 0; max-width: 640px; font-size: 19px; line-height: 1.5; color: var(--dk-ink-2);
}
/* Vertrauenszeile wie in der Vorlage: runde Symbole, zweizeilige Aussagen */
.dkc #rechner .dk-trust {
  grid-column: 1; display: grid; grid-template-columns: repeat(4, max-content); gap: 14px 30px; margin: 34px 0 46px; padding: 0; list-style: none;
}
.dkc #rechner .dk-trust li { display: flex; align-items: center; gap: 12px; margin: 0; }
.dkc #rechner .dk-trust svg {
  width: 48px; height: 48px; padding: 12px; flex: none; border-radius: 50%; background: #fff; color: var(--dk-navy);
  box-shadow: 0 0 0 1px var(--dk-line), 0 8px 18px -12px rgba(15,28,58,.35);
}
.dkc #rechner .dk-trust span { display: block; font-size: 13.5px; line-height: 1.35; color: var(--dk-ink-2); }
.dkc #rechner .dk-trust strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--dk-ink); }
/* Volti groß rechts, runde Sprechblase wie in der Vorlage */
.dkc #rechner .dk-hero-volti { grid-column: 2; grid-row: 1 / span 3; position: relative; display: block; min-height: 260px; }
.dkc #rechner .dk-hero-volti::before {
  content: ""; position: absolute; right: 70px; bottom: -40px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,165,0,.28), rgba(245,165,0,0));
}
.dkc #rechner .dk-hero-volti img {
  position: absolute; right: 120px; bottom: -58px; width: 290px; height: auto; max-width: none;
  filter: drop-shadow(0 30px 30px rgba(15,28,58,.26));
}
.dkc #rechner .dk-hero-volti::after {
  content: ""; position: absolute; right: 64px; bottom: 74px; width: 54px; height: 54px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23F5A500' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 30 22 22M12 46l16-4M10 14l12 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dkc #rechner .dk-bubble {
  position: absolute; right: 0; top: -40px; display: grid; place-items: center; width: 196px; height: 196px; margin: 0; padding: 30px 26px;
  border-radius: 50%; background: var(--dk-amber); color: var(--dk-navy); text-align: center;
  font-size: 17px; line-height: 1.24; font-weight: 800; letter-spacing: -.015em;
  transform: rotate(-9deg); box-shadow: 0 20px 34px -18px rgba(227,154,0,.95);
}
.dkc #rechner .dk-bubble::after {
  content: ""; position: absolute; left: 10px; bottom: 18px; width: 34px; height: 30px; background: var(--dk-amber);
  clip-path: polygon(100% 0, 0 100%, 62% 30%);
}

/* Hinweis nach Rechnungs-Upload: in der Inhaltsspalte, Häkchen statt zweitem Volti */
.dkc #rechner > #vgEpBanner {
  box-sizing: border-box; width: calc(100% - 48px); max-width: 1240px; margin: 0 auto 32px; padding: 14px 18px; gap: 14px;
  border: 1px solid #BFE6CF; border-radius: 16px; background: #EFFAF3;
}
.dkc #rechner > #vgEpBanner img { display: none; }
.dkc #rechner > #vgEpBanner::before {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--dk-green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ── Rechner-Hülle: Fortschritt als eigene Leiste, Inhalte als Karten ────────── */
.dkc #rechner #calculator {
  position: relative; z-index: 1; max-width: none !important; width: 100%; margin: 0;
  background: transparent !important; border: 0; border-radius: 0; box-shadow: none; overflow: visible !important;
}
.dkc #rechner #calculator .calc-volti-buddy { display: none !important; }

.dkc #rechner .progress-bar {
  margin: 0 0 16px; padding: 18px 28px; background: #fff; border: 1px solid var(--dk-line); border-radius: 18px;
  box-shadow: var(--dk-shadow-sm);
}
.dkc #rechner .progress-bar__line { display: none; }
.dkc #rechner .progress-bar__steps { display: flex; align-items: center; justify-content: flex-start; gap: 0; }
.dkc #rechner .step-dot { flex: 1 1 0; min-width: 0; flex-direction: row; align-items: center; gap: 10px; }
.dkc #rechner .step-dot:last-child { flex: 0 0 auto; }
.dkc #rechner .step-dot::after {
  content: ""; flex: 1; height: 2px; margin: 0 18px 0 8px; border-radius: 2px; background: var(--dk-line);
}
.dkc #rechner .step-dot:last-child::after { display: none; }
.dkc #rechner .step-dot.done::after { background: var(--dk-amber); }
.dkc #rechner .step-dot span {
  width: 32px; height: 32px; flex: none; border: 1.5px solid var(--dk-line-2); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--dk-muted);
}
.dkc #rechner .step-dot label { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--dk-muted); white-space: nowrap; cursor: inherit; }
.dkc #rechner .step-dot.active span { background: var(--dk-navy); border-color: var(--dk-navy); color: #fff; box-shadow: 0 0 0 5px rgba(26,31,54,.09); }
.dkc #rechner .step-dot.active label { color: var(--dk-ink); font-weight: 700; }
.dkc #rechner .step-dot.done span {
  background: var(--dk-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1F36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-color: var(--dk-amber); color: transparent;
}
.dkc #rechner .step-dot.done label { color: var(--dk-ink); }
.dkc #rechner .step-dot.done:hover span { transform: none; box-shadow: 0 0 0 5px rgba(245,165,0,.18); }

/* Schritt-Karten 1–3 */
.dkc #rechner #step-1, .dkc #rechner #step-2, .dkc #rechner #step-3 {
  padding: 44px 48px 36px; background: #fff; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); box-shadow: var(--dk-shadow);
}
.dkc #rechner .calc-step__title { margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--dk-ink); }
.dkc #rechner .calc-step__sub { max-width: 720px; margin: 0 0 30px; font-size: 16.5px; line-height: 1.55; color: var(--dk-muted); }
.dkc #rechner .calc-step__sub-link :is(.d-only, .dk-hide) { display: none; }
.dkc #rechner .calc-step__sub-link { color: var(--dk-ink); font-weight: 650; text-decoration-color: var(--dk-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Felder */
.dkc #rechner .field-label { display: block; margin: 0 0 8px; font-size: 14.5px; font-weight: 650; color: var(--dk-ink); }
.dkc #rechner .field-hint { font-weight: 500; color: var(--dk-muted); }
.dkc #rechner .field-input {
  height: 56px; padding: 0 18px; border: 1.5px solid var(--dk-line-2); border-radius: 12px; background-color: #fff;
  font-size: 17px; color: var(--dk-ink); box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.dkc #rechner textarea.field-input { height: auto; padding: 14px 18px; }
.dkc #rechner .field-input::placeholder { color: #98A1B5; }
.dkc #rechner .field-input:hover { border-color: #B6C0D2; }
.dkc #rechner .field-input:focus { outline: none; border-color: var(--dk-amber); box-shadow: 0 0 0 4px rgba(245,165,0,.17); }
.dkc #rechner select.field-input {
  -webkit-appearance: none; appearance: none; padding-right: 48px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
}
/* Zustände (setzt desktop-c.js): gültig / fehlt */
.dkc #rechner .field-group.dk-ok .field-input { border-color: #3BB273; }
.dkc #rechner .field-group.dk-ok > .field-label::after {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; border-radius: 50%;
  background: #3BB273 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.dkc #rechner .field-group.dk-bad .field-input { border-color: var(--dk-red); box-shadow: 0 0 0 4px rgba(198,40,40,.12); }
.dkc #rechner .field-group.dk-bad > .field-label { color: var(--dk-red); }

/* Navigation */
.dkc #rechner .calc-nav { gap: 12px; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--dk-line); }
.dkc #rechner .calc-nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px;
  border-radius: 12px; font-size: 16px; font-weight: 700; letter-spacing: -.005em; transition: background .15s, transform .15s, box-shadow .15s;
}
.dkc #rechner .calc-nav .btn--primary { min-width: 220px; background: var(--dk-amber); border: 0; color: var(--dk-navy); box-shadow: 0 10px 22px -12px rgba(227,154,0,.95); }
.dkc #rechner .calc-nav .btn--primary:hover { background: var(--dk-amber-2); transform: translateY(-1px); }
.dkc #rechner .calc-nav .btn--ghost { background: #fff; border: 1.5px solid var(--dk-line-2); color: var(--dk-ink); }
.dkc #rechner .calc-nav .btn--ghost:hover { border-color: var(--dk-navy); }
.dkc #rechner .calc-nav .btn:focus-visible { outline: 3px solid rgba(245,165,0,.55); outline-offset: 2px; }

/* ── Schritt 1: Energie & Kundentyp nebeneinander ──────────────────────────── */
.dkc #rechner #step-1.active { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.dkc #rechner #step-1 > .calc-step__title, .dkc #rechner #step-1 > .calc-nav { grid-column: 1 / -1; }
.dkc #rechner #step-1 > .calc-step__title { margin-bottom: 28px; }
.dkc #rechner #step-1 > .field-group { grid-column: auto; margin: 0; }
.dkc #rechner #step-1 .tile-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.dkc #rechner #step-1 .tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px;
  min-height: 150px; padding: 22px; border: 1.5px solid var(--dk-line-2); border-radius: 18px; background: #fff;
  color: var(--dk-ink); text-align: left; box-shadow: none; transform: none;
  transition: border-color .15s, background .15s, box-shadow .2s, transform .2s var(--dk-ease);
}
.dkc #rechner #step-1 .tile:hover { border-color: var(--dk-navy); transform: translateY(-2px); box-shadow: var(--dk-shadow-sm); }
.dkc #rechner #step-1 .tile__icon { width: 48px; height: 48px; padding: 11px; margin: 0; border-radius: 14px; background: var(--dk-bg); color: var(--dk-ink-2); }
.dkc #rechner #step-1 .tile__label { font-size: 19px; font-weight: 750; letter-spacing: -.01em; color: inherit; }
.dkc #rechner #step-1 .tile::after {
  content: ""; position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--dk-line-2); background: #fff;
}
.dkc #rechner #step-1 .tile.active { background: var(--dk-navy); border-color: var(--dk-navy); color: #fff; box-shadow: 0 18px 34px -18px rgba(26,31,54,.65); }
.dkc #rechner #step-1 .tile.active .tile__icon { background: rgba(255,255,255,.1); color: var(--dk-amber); }
.dkc #rechner #step-1 .tile.active::after {
  border-color: var(--dk-amber);
  background: var(--dk-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1F36' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.dkc #rechner #step-1 .tile:focus-visible { outline: 3px solid rgba(245,165,0,.6); outline-offset: 3px; }

/* ── Schritt 2: Formular links, Hinweis rechts ─────────────────────────────── */
.dkc #rechner #step-2.active { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; align-items: start; }
.dkc #rechner #step-2 > * { grid-column: 1; }
.dkc #rechner #step-2 > .dk-tip { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 6px; }
.dkc #rechner #step-2 > .calc-nav { grid-column: 1 / -1; }
.dkc #rechner #step-2 .form-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px 20px; margin: 0; }
.dkc #rechner #step-2 .form-grid .field-group { grid-column: auto; width: auto; margin: 0; }
.dkc #rechner #step-2 .form-grid .field-group--combobox { grid-column: 1 / -1; }
.dkc #rechner .combobox__toggle { right: 10px; width: 36px; height: 36px; border-radius: 8px; color: var(--dk-muted); }
.dkc #rechner .combobox__toggle:hover { background: var(--dk-bg); color: var(--dk-ink); }
.dkc #rechner .combobox__dropdown { top: calc(100% + 6px); padding: 6px; border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(15,28,58,.35); }
.dkc #rechner .combobox__option, .dkc #rechner .combobox__empty { padding: 11px 14px; border-radius: 9px; font-size: 15.5px; }
.dkc #rechner .combobox__option:hover, .dkc #rechner .combobox__option.is-highlighted { background: var(--dk-amber-soft); }
.dkc #rechner .dk-tip { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--dk-line); border-radius: 18px; background: var(--dk-bg); }
.dkc #rechner .dk-tip svg { width: 42px; height: 42px; padding: 10px; flex: none; border-radius: 12px; background: #fff; color: var(--dk-amber-2); box-shadow: var(--dk-shadow-sm); }
.dkc #rechner .dk-tip strong { display: block; margin: 2px 0 6px; font-size: 15.5px; color: var(--dk-ink); }
.dkc #rechner .dk-tip p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--dk-ink-2); }

/* ── Schritt 3: Verbrauch links, Hilfe-Karte rechts ────────────────────────── */
.dkc #rechner #step-3.active { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; align-items: start; }
.dkc #rechner #step-3 > * { grid-column: 1; }
.dkc #rechner #step-3 > .dk-help { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
.dkc #rechner #step-3 > .calc-nav { grid-column: 1 / -1; }
.dkc #rechner #strom-fields > .field-group:first-child, .dkc #rechner #gas-fields > .field-group:first-child { position: relative; margin: 0; }
.dkc #rechner #stromverbrauch, .dkc #rechner #gasverbrauch {
  height: 68px; padding: 0 120px 0 22px; font-size: 26px; font-weight: 750; letter-spacing: -.01em; -moz-appearance: textfield; appearance: textfield;
}
.dkc #rechner #stromverbrauch::-webkit-outer-spin-button, .dkc #rechner #stromverbrauch::-webkit-inner-spin-button,
.dkc #rechner #gasverbrauch::-webkit-outer-spin-button, .dkc #rechner #gasverbrauch::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dkc #rechner #stromverbrauch::placeholder, .dkc #rechner #gasverbrauch::placeholder { font-weight: 500; }
.dkc #rechner .dk-unit {
  position: absolute; right: 22px; bottom: 0; display: flex; align-items: center; height: 68px;
  font-size: 16px; font-weight: 650; color: var(--dk-muted); pointer-events: none;
}
.dkc #rechner .richtwerte { margin: 26px 0 0; padding: 0; background: none; border: 0; }
.dkc #rechner .richtwerte__label { margin: 0 0 10px; font-size: 14.5px; font-weight: 650; color: var(--dk-ink); }
.dkc #rechner .richtwerte__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dkc #rechner #gas-fields .richtwerte__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dkc #rechner .richtwert-btn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  min-height: 112px; margin: 0; padding: 16px; border: 1.5px solid var(--dk-line-2); border-radius: 16px; background: #fff;
  font-size: 14px; font-weight: 550; line-height: 1.3; color: var(--dk-ink-2); text-align: left;
  transition: border-color .15s, background .15s, transform .2s var(--dk-ease), box-shadow .2s;
}
.dkc #rechner .richtwert-btn br { display: none; }
.dkc #rechner .richtwert-btn strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 750; color: var(--dk-ink); }
.dkc #rechner .richtwert-btn::before {
  content: ""; position: absolute; top: 16px; left: 16px; height: 22px; width: 14px; background: var(--dk-ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Ccircle cx='7' cy='5' r='3.6'/%3E%3Cpath d='M1 21v-4.5C1 12.9 3.7 11 7 11s6 1.9 6 5.5V21z'/%3E%3C/svg%3E") left center / 14px 22px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Ccircle cx='7' cy='5' r='3.6'/%3E%3Cpath d='M1 21v-4.5C1 12.9 3.7 11 7 11s6 1.9 6 5.5V21z'/%3E%3C/svg%3E") left center / 14px 22px repeat-x;
}
.dkc #rechner #strom-fields .richtwert-btn:nth-child(2)::before { width: 30px; }
.dkc #rechner #strom-fields .richtwert-btn:nth-child(3)::before { width: 46px; }
.dkc #rechner #strom-fields .richtwert-btn:nth-child(4)::before { width: 62px; }
.dkc #rechner #strom-fields .richtwert-btn:nth-child(5)::before { width: 78px; }
.dkc #rechner #strom-fields .richtwert-btn::before { -webkit-mask-size: 16px 22px; mask-size: 16px 22px; }
.dkc #rechner #gas-fields .richtwert-btn::before {
  width: 20px; -webkit-mask-size: 20px 22px; mask-size: 20px 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1c-1.3 2.6-4.5 4.6-4.5 10a4.5 4.5 0 0 0 9 0c0-2.7-1.4-4.5-2.7-6.3-.9 1.8-.9 3.6-1.8 3.6S10 4.6 10 1Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1c-1.3 2.6-4.5 4.6-4.5 10a4.5 4.5 0 0 0 9 0c0-2.7-1.4-4.5-2.7-6.3-.9 1.8-.9 3.6-1.8 3.6S10 4.6 10 1Z'/%3E%3C/svg%3E");
}
.dkc #rechner #gas-fields .richtwert-btn:nth-child(2)::before { width: 40px; }
.dkc #rechner #gas-fields .richtwert-btn:nth-child(3)::before { width: 60px; }
.dkc #rechner #gas-fields .richtwert-btn:nth-child(4)::before { width: 80px; }
.dkc #rechner .richtwert-btn:hover { border-color: var(--dk-navy); background: #fff; transform: translateY(-2px); box-shadow: var(--dk-shadow-sm); }
.dkc #rechner .richtwert-btn.is-active { background: var(--dk-navy); border-color: var(--dk-navy); color: #C9CEDD; box-shadow: 0 16px 30px -18px rgba(26,31,54,.7); }
.dkc #rechner .richtwert-btn.is-active strong { color: #fff; }
.dkc #rechner .richtwert-btn.is-active::before { background: var(--dk-amber); }
.dkc #rechner .richtwert-btn.is-active::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dk-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1F36' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.dkc #rechner #step-3 .checkbox-label {
  display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; font-size: 15.5px; font-weight: 550; color: var(--dk-ink); cursor: pointer;
}
.dkc #rechner #step-3 .checkbox-label input { width: 20px; height: 20px; margin: 0; accent-color: var(--dk-navy); }
.dkc #rechner #nt-field { margin-top: 14px !important; max-width: 420px; }
.dkc #rechner .savings-prompt { margin: 26px 0 0; border: 1px solid var(--dk-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; }
.dkc #rechner .savings-prompt__header { padding: 18px 20px; background: #fff; }
.dkc #rechner .savings-prompt__header:hover { background: #FBFCFE; }
.dkc #rechner .savings-prompt__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dk-amber-soft); font-size: 0; flex: none;
}
.dkc #rechner .savings-prompt__icon::before {
  content: ""; width: 20px; height: 20px; background: var(--dk-amber-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dkc #rechner .savings-prompt__title strong { font-size: 16px; color: var(--dk-ink); }
.dkc #rechner .savings-prompt__title span { font-size: 14px; color: var(--dk-muted); }
.dkc #rechner .savings-prompt__body { padding: 4px 20px 20px; border-top: 1px solid var(--dk-line); }
.dkc #rechner .dk-help {
  position: relative; display: block; padding: 24px; border: 1px solid #F3DFA9; border-radius: 20px;
  background: linear-gradient(170deg, #FFF8E6 0, #FFFDF8 100%); text-align: left;
}
.dkc #rechner .dk-help img { display: block; width: 132px; height: auto; margin: -4px auto 8px; filter: drop-shadow(0 14px 16px rgba(15,28,58,.18)); }
.dkc #rechner .dk-help strong { display: block; font-size: 18px; letter-spacing: -.01em; color: var(--dk-ink); }
.dkc #rechner .dk-help p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--dk-ink-2); }
.dkc #rechner .dk-help__btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 18px 0 0; border: 1.5px solid var(--dk-navy);
  border-radius: 12px; background: var(--dk-navy); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.dkc #rechner .dk-help__btn:hover { background: #262C4A; }
.dkc #rechner .dk-help__btn:focus-visible { outline: 3px solid rgba(245,165,0,.6); outline-offset: 2px; }
.dkc #rechner .dk-help .dk-help__note { margin-top: 12px; font-size: 13px; color: var(--dk-muted); }

/* ── Schritt 4: Ergebnis ───────────────────────────────────────────────────── */
.dkc #rechner #step-4 { padding: 0; background: transparent; border: 0; box-shadow: none; }
.dkc #rechner #tariffSection .results-main { max-width: none; margin: 0; }
/* Kopf: Ergebnis, Zusammenfassung, Suche anpassen (ohne schwere Karte, wie in der Vorlage) */
.dkc #rechner #tariffSection .results-topbar { margin: 8px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.dkc #rechner .v3h { align-items: flex-end; }
.dkc #rechner .v3h__title { font-size: 36px; line-height: 1.1; letter-spacing: -.03em; color: var(--dk-ink); }
.dkc #rechner .v3h__sub { margin-top: 8px; font-size: 17px; color: var(--dk-ink-2); }
.dkc #rechner .v3h__meta {
  display: inline-flex; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--dk-line);
  font-size: 14px; font-weight: 600; color: var(--dk-ink-2);
}
.dkc #rechner .v3h__edit { height: 46px; padding: 0 18px; border: 1.5px solid var(--dk-line-2); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: var(--dk-ink); }
.dkc #rechner .v3h__edit:hover, .dkc #rechner .v3h__edit[aria-expanded="true"] { border-color: var(--dk-navy); }
.dkc #rechner .v3h__editrow { margin-top: 16px; padding: 14px 16px; border-color: var(--dk-line); border-radius: 14px; background: #fff; }
/* Bisherige Leiste bleibt im DOM (Logik), am Desktop ersetzt durch die Filterleiste unten */
.dkc #rechner .results-topbar .v3bar { display: none; }

/* Filterleiste wie in der Vorlage */
.dkc #rechner .dk-fbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; padding: 12px 14px; background: #fff;
  border: 1px solid var(--dk-line); border-radius: 18px; box-shadow: var(--dk-shadow-sm);
}
.dkc #rechner .dk-fbar__lbl {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--dk-bg);
  font-size: 15px; font-weight: 700; color: var(--dk-ink);
}
.dkc #rechner .dk-fbar__lbl svg { width: 18px; height: 18px; }
.dkc #rechner .dk-fbar__sp { flex: 1; }
.dkc #rechner .dk-dd { position: relative; }
.dkc #rechner .dk-dd__btn, .dkc #rechner .dk-fbar__sel select {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 16px; border: 1.5px solid var(--dk-line-2); border-radius: 12px;
  background: #fff; font: inherit; font-size: 14.5px; font-weight: 650; color: var(--dk-ink); cursor: pointer; transition: border-color .15s, background .15s;
}
.dkc #rechner .dk-dd__btn svg { width: 16px; height: 16px; color: var(--dk-muted); transition: transform .15s; }
.dkc #rechner .dk-dd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dkc #rechner .dk-dd__btn:hover, .dkc #rechner .dk-fbar__sel select:hover { border-color: var(--dk-navy); }
.dkc #rechner .dk-dd.is-set .dk-dd__btn { background: var(--dk-navy); border-color: var(--dk-navy); color: #fff; }
.dkc #rechner .dk-dd.is-set .dk-dd__btn svg { color: var(--dk-amber); }
.dkc #rechner .dk-dd__btn em { font-style: normal; font-weight: 600; color: var(--dk-amber); }
.dkc #rechner .dk-dd__pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 250px; padding: 8px; background: #fff;
  border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(15,28,58,.4);
}
.dkc #rechner .dk-dd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px;
  background: none; font: inherit; font-size: 15px; color: var(--dk-ink); text-align: left; cursor: pointer;
}
.dkc #rechner .dk-dd__opt:hover:not(:disabled) { background: var(--dk-bg); }
.dkc #rechner .dk-dd__opt[aria-checked="true"] { font-weight: 700; background: var(--dk-amber-soft); }
.dkc #rechner .dk-dd__opt:disabled { color: #A3ABBD; cursor: not-allowed; }
.dkc #rechner .dk-dd__opt small { font-size: 13px; font-weight: 600; color: var(--dk-muted); }
.dkc #rechner .dk-fbar__sel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dk-muted); white-space: nowrap; }
.dkc #rechner .dk-dd__btn { white-space: nowrap; }
.dkc #rechner .dk-fbar__lbl svg, .dkc #rechner .dk-dd__btn svg, .dkc #rechner .dk-fbar__mail svg { display: block; flex: none; }
.dkc #rechner .dk-fbar__sel select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.dkc #rechner .dk-fbar__mail {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--dk-line-2); border-radius: 12px; background: #fff; color: var(--dk-ink-2); cursor: pointer;
}
.dkc #rechner .dk-fbar__mail svg { width: 18px; height: 18px; }
.dkc #rechner .dk-fbar__mail:hover { border-color: var(--dk-navy); color: var(--dk-ink); }
.dkc #rechner :is(.dk-dd__btn, .dk-dd__opt, .dk-fbar__sel select, .dk-fbar__mail):focus-visible { outline: 3px solid rgba(245,165,0,.55); outline-offset: 2px; }
/* Trefferzeile mit aktiven Filtern */
.dkc #rechner .dk-fsum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; font-size: 14.5px; color: var(--dk-muted); }
.dkc #rechner .dk-fsum strong { margin-right: 4px; font-size: 15px; color: var(--dk-ink); }
.dkc #rechner .dk-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: var(--dk-amber-soft);
  font: inherit; font-size: 13.5px; font-weight: 650; color: #6E4A00; cursor: pointer;
}
.dkc #rechner .dk-chip svg { width: 14px; height: 14px; }
.dkc #rechner .dk-chip:hover { background: #FBE7B5; }
.dkc #rechner .dk-reset { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 650; color: var(--dk-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dkc #rechner .dk-empty { padding: 40px; border: 1px dashed var(--dk-line-2); border-radius: 20px; background: #fff; text-align: center; color: var(--dk-ink-2); }
.dkc #rechner .dk-empty strong { display: block; margin-bottom: 6px; font-size: 18px; color: var(--dk-ink); }
.dkc #rechner .dk-empty button { margin-top: 16px; height: 46px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--dk-amber); color: var(--dk-navy); font: inherit; font-weight: 700; cursor: pointer; }

/* Tarifkarten: alle senkrecht im Raster, Zeilen über die Karten einer Reihe ausgerichtet (subgrid) */
.dkc #rechner .v3-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; margin-top: 34px; }
.dkc #rechner .v3-list > * { grid-column: 1 / -1; margin: 0 0 18px; }
.dkc #rechner .v3-list > .vc {
  grid-column: auto; grid-row: span 9; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0;
  margin: 0 0 34px; padding: 30px 26px 12px; background: #fff; border: 1px solid var(--dk-line); border-radius: 22px; box-shadow: var(--dk-shadow-sm);
}
/* alle Teile in die eine Kartenspalte (sonst legt „Vergleichen“ eine zweite Spalte an) */
.dkc #rechner .v3-list > .vc .vc__prov, .dkc #rechner .v3-list > .vc .vc-facts, .dkc #rechner .v3-list > .vc .vc__price > *, .dkc #rechner .v3-list > .vc .vc__details { grid-column: 1; }
.dkc #rechner .v3-list > .vc:hover { border-color: #C9D2E0; box-shadow: 0 1px 2px rgba(15,28,58,.05), 0 22px 40px -22px rgba(15,28,58,.30); }
.dkc #rechner .v3-list > .vc > .vc__main, .dkc #rechner .v3-list > .vc .vc__price { display: contents; }
/* Kennzeichnung oben links */
.dkc #rechner .vc__label {
  top: -15px; left: 22px; height: 30px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--dk-line-2); background: #fff;
  font-size: 13.5px; font-weight: 750; color: var(--dk-ink);
}
.dkc #rechner .vc--reco .vc__label { background: var(--dk-amber); border-color: var(--dk-amber); color: var(--dk-navy); }
/* Kopf: Logo links, Name rechts, Ökostrom-Blatt oben rechts */
.dkc #rechner .v3-list > .vc .vc__prov {
  grid-row: 1; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 0 30px 0 0;
}
.dkc #rechner .vc__logo { width: 96px; height: 58px; border-color: var(--dk-line); border-radius: 12px; }
.dkc #rechner .vc__rate { font-size: 19px; line-height: 1.22; letter-spacing: -.015em; font-weight: 800; color: var(--dk-ink); }
.dkc #rechner .vc__provider { margin-top: 3px; font-size: 14px; color: var(--dk-muted); }
.dkc #rechner .v3-list > .vc .vc__tags { grid-column: 1 / -1; }
.dkc #rechner .v3-list > .vc .vc-tag--bonus { display: none; }
.dkc #rechner .vc-tag { padding: 4px 10px; font-size: 12.5px; }
.dkc #rechner .vc-tag--eco { color: #0B6B49; }
.dkc #rechner .v3-list > .vc:has(.vc-tag--eco)::before {
  content: ""; position: absolute; top: 24px; right: 22px; width: 30px; height: 30px; border-radius: 50%;
  background: #E5F5EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322A06B'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3C/svg%3E") center / 17px no-repeat;
}
/* Fakten: Häkchenliste (Laufzeit, Kündigung, Garantie) + Preis-Bausteine (Arbeits-/Grundpreis) */
.dkc #rechner .v3-list > .vc .vc-facts {
  grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 10px; margin: 20px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--dk-line);
}
.dkc #rechner .v3-list > .vc .vc-facts li { margin: 0; min-width: 0; font-size: 14.5px; color: var(--dk-ink-2); }
.dkc #rechner .v3-list > .vc .vc-facts li > svg { display: none; }
.dkc #rechner .v3-list > .vc .vc-facts li:nth-child(n+3) { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 10px; }
.dkc #rechner .v3-list > .vc .vc-facts li:nth-child(n+3)::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: #22A06B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.dkc #rechner .v3-list > .vc .vc-facts li:nth-child(n+3) strong { text-align: right; }
.dkc #rechner .v3-list > .vc .vc-facts li:nth-child(-n+2) {
  order: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--dk-bg); font-size: 12.5px;
}
.dkc #rechner .v3-list > .vc .vc-facts li:nth-child(-n+2) strong { font-size: 15px; }
.dkc #rechner .v3-list > .vc .vc-facts strong { color: var(--dk-ink); }
/* Preis: eigene Preisfläche, großer Monatsbetrag */
.dkc #rechner .v3-list > .vc .vc__price::before {
  content: ""; grid-row: 3 / 7; grid-column: 1; align-self: stretch; margin: 18px -12px 0; border-radius: 16px;
  background: var(--dk-bg); border: 1px solid var(--dk-line);
}
.dkc #rechner .v3-list > .vc :is(.vc__amount, .vc__per, .vc__alt, .vc__bonus) { position: relative; z-index: 1; text-align: left; margin-left: 4px; }
.dkc #rechner .v3-list > .vc .vc__amount { grid-row: 3; margin-top: 34px; font-size: 48px; font-weight: 850; line-height: 1; letter-spacing: -.045em; color: var(--dk-ink); font-variant-numeric: tabular-nums; }
.dkc #rechner .v3-list > .vc .vc__per { grid-row: 4; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--dk-ink-2); }
.dkc #rechner .v3-list > .vc .vc__alt {
  grid-row: 5; justify-self: start; margin: 10px 0 16px 4px; padding: 4px 10px; border-radius: 8px; background: #fff;
  font-size: 15px; font-weight: 700; color: var(--dk-ink);
}
.dkc #rechner .v3-list > .vc .vc__bonus { grid-row: 6; align-self: start; justify-self: start; margin: 0 0 16px 4px; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; }
.dkc #rechner .vc__cta {
  height: 50px; padding: 0 18px; border-radius: 12px; background: var(--dk-amber); color: var(--dk-navy); font-size: 16px; font-weight: 750;
  box-shadow: 0 10px 22px -14px rgba(227,154,0,.95);
}
.dkc #rechner .vc__cta:hover { background: var(--dk-amber-2); }
.dkc #rechner .vc__cta:focus-visible, .dkc #rechner .vc__more:focus-visible { outline: 3px solid rgba(245,165,0,.55); outline-offset: 2px; }
.dkc #rechner .v3-list > .vc .vc__cta { grid-row: 7; margin-top: 20px; width: 100%; }
.dkc #rechner .v3-list > .vc .vc__more { grid-row: 8; justify-self: end; margin: 6px 0 0; font-size: 14px; color: var(--dk-ink-2); }
.dkc #rechner .v3-list > .vc .vc__details { background: #FAFBFD; border-top-color: var(--dk-line); }
.dkc #rechner .v3-list > .vc .vc__details:not([hidden]) {
  grid-row: 9; display: flex; flex-direction: column; gap: 14px; margin: 10px -26px -12px; padding: 18px 26px 20px; border-radius: 0 0 22px 22px;
}
.dkc #rechner .v3-list > .vc .vc-det { grid-template-columns: 1fr; gap: 8px; }
.dkc #rechner .v3-list > .vc .vc-det > div { display: flex; justify-content: space-between; gap: 12px; }
.dkc #rechner .v3-list > .vc .vc-det dd { margin: 0; text-align: right; }
/* Vergleichen-Auswahl unten links */
.dkc #rechner .dk-cmp {
  grid-row: 8; justify-self: start; align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; min-height: 36px;
  font-size: 14px; font-weight: 600; color: var(--dk-ink-2); cursor: pointer; user-select: none;
}
.dkc #rechner .dk-cmp input { width: 18px; height: 18px; margin: 0; accent-color: var(--dk-navy); cursor: pointer; }
.dkc #rechner .dk-cmp:has(input:disabled) { color: #A3ABBD; cursor: not-allowed; }
.dkc #rechner .dk-cmp:has(input:checked) { color: var(--dk-ink); }
/* Empfehlung: gelber Rahmen, gelbe Preisfläche */
.dkc #rechner .v3-list > .vc--reco {
  border: 2px solid var(--dk-amber); background: linear-gradient(180deg, #FFFAEC 0, #fff 160px);
  box-shadow: 0 0 0 5px rgba(245,165,0,.10), 0 26px 46px -26px rgba(227,154,0,.6);
}
.dkc #rechner .v3-list > .vc--reco .vc__price::before { background: #FFF2CC; border-color: #F6D57E; }
/* Volti umarmt die Empfehlung: steht hinter der Karte (Kopf und Lächeln schauen oben heraus),
   seine Handschuhe greifen links und rechts um die Kartenkanten. Alles aus derselben
   Original-Grafik (volti-pointing): Körper ohne Arme per clip-path, Hände als Ausschnitte, gespiegelt. */
.dkc #rechner .v3-list:has(> .vc--reco) { margin-top: 128px; }
.dkc #rechner .v3-list > .vc--reco > .vc__main::before {
  content: ""; position: absolute; z-index: -1; top: -148px; left: calc(68% - 120px); width: 240px; height: 203px; pointer-events: none;
  background: url("/images/volti/volti-pointing.webp") left top / 240px auto no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 116px, 191px 116px, 191px 100%, 49px 100%, 49px 116px, 0 116px);
}
.dkc #rechner .v3-list > .vc--reco > .vc__main::after,
.dkc #rechner .v3-list > .vc--reco::after {
  content: ""; position: absolute; z-index: 3; top: 22px; width: 42px; height: 32px; pointer-events: none;
  background: url("/images/volti/volti-pointing.webp") no-repeat; background-size: 240px auto;
  transform: scaleX(-1); filter: drop-shadow(0 3px 4px rgba(15,28,58,.25));
}
.dkc #rechner .v3-list > .vc--reco > .vc__main::after { left: -17px; background-position: 0 -114px; }
.dkc #rechner .v3-list > .vc--reco::after { right: -17px; background-position: -198px -114px; }
/* Blatt-Symbol an der Empfehlung weglassen (dort liegt Voltis Hand; „100 % Ökostrom“ steht als Etikett darunter) */
.dkc #rechner .v3-list > .vc.vc--reco:has(.vc-tag--eco)::before { display: none; }
.dkc #rechner .v3-divider { margin: 6px 0 26px; font-size: 13px; color: var(--dk-ink); }
.dkc #rechner .v3-more { margin: 0 0 26px; }
.dkc #rechner .v3-more__btn { height: 48px; padding: 0 22px; border: 1.5px solid var(--dk-line-2); border-radius: 12px; }

/* Direktvergleich: Leiste unten + Vergleichstabelle */
.dkc .dk-tray {
  position: fixed; z-index: 1200; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 48px); padding: 12px 12px 12px 20px; background: var(--dk-navy); color: #fff; border-radius: 18px;
  box-shadow: 0 24px 50px -16px rgba(10,14,32,.55); font-family: inherit;
}
.dkc .dk-tray__t { font-size: 15px; font-weight: 700; white-space: nowrap; }
.dkc .dk-tray__items { display: flex; gap: 8px; }
.dkc .dk-tray__item {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 36px; padding: 0 8px 0 12px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13.5px; cursor: pointer;
}
.dkc .dk-tray__item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dkc .dk-tray__item svg { width: 14px; height: 14px; flex: none; opacity: .8; }
.dkc .dk-tray__item:hover { background: rgba(255,255,255,.18); }
.dkc .dk-tray__go {
  height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--dk-amber); color: var(--dk-navy); font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; white-space: nowrap;
}
.dkc .dk-tray__go:disabled { background: #4A5072; color: #B9BED0; cursor: not-allowed; }
.dkc .dk-tray__clear { height: 44px; padding: 0 10px; border: 0; background: none; color: #C9CEDD; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.dkc :is(.dk-tray__item, .dk-tray__go, .dk-tray__clear):focus-visible { outline: 3px solid rgba(245,165,0,.7); outline-offset: 2px; }
.dkc .dk-cmpm { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 32px; background: rgba(15,20,40,.55); font-family: inherit; }
.dkc .dk-cmpm__box {
  position: relative; width: min(1180px, 100%); max-height: calc(100vh - 64px); overflow: auto; padding: 30px 32px 28px; background: #fff; border-radius: 24px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
}
.dkc .dk-cmpm__h { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--dk-ink); }
.dkc .dk-cmpm__sub { margin: 0 0 22px; font-size: 15px; color: var(--dk-muted); }
.dkc .dk-cmpm__x {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--dk-bg); color: var(--dk-ink); cursor: pointer; font-size: 24px; line-height: 1;
}
.dkc .dk-cmpm__x:hover { background: #E7EBF2; }
.dkc .dk-cmpt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; color: var(--dk-ink-2); }
.dkc .dk-cmpt th, .dkc .dk-cmpt td { padding: 12px 16px; border-bottom: 1px solid var(--dk-line); text-align: left; vertical-align: top; }
.dkc .dk-cmpt tbody th { width: 210px; font-size: 14px; font-weight: 600; color: var(--dk-muted); }
.dkc .dk-cmpt td strong { color: var(--dk-ink); }
.dkc .dk-cmpt thead th { padding-bottom: 18px; vertical-align: bottom; border-bottom: 2px solid var(--dk-line); }
.dkc .dk-cmpt .dk-cmpt__logo { width: 96px; height: 58px; margin-bottom: 10px; }
.dkc .dk-cmpt .dk-cmpt__lab { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 8px; background: var(--dk-bg); font-size: 12.5px; font-weight: 700; color: var(--dk-ink); }
.dkc .dk-cmpt .dk-cmpt__lab--reco { background: var(--dk-amber); color: var(--dk-navy); }
.dkc .dk-cmpt .dk-cmpt__name { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--dk-ink); }
.dkc .dk-cmpt .dk-cmpt__prov { display: block; margin-top: 2px; font-size: 13.5px; color: var(--dk-muted); }
.dkc .dk-cmpt .dk-cmpt__big { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--dk-ink); }
.dkc .dk-cmpt .dk-best { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #E5F5EC; color: #0B6B49; font-size: 12px; font-weight: 700; vertical-align: 3px; }
.dkc .dk-cmpt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.dkc .dk-cmpt ul li { display: flex; gap: 8px; }
.dkc .dk-cmpt ul li::before { content: "✓"; color: #22A06B; font-weight: 800; }
.dkc .dk-cmpt tfoot td { border-bottom: 0; padding-top: 20px; }
.dkc .dk-cmpt__cta {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 0; border-radius: 12px; background: var(--dk-amber); color: var(--dk-navy);
  font: inherit; font-size: 16px; font-weight: 750; cursor: pointer;
}
.dkc .dk-cmpt__cta:hover { background: var(--dk-amber-2); }
.dkc .dk-cmpt__rm { display: block; margin: 10px auto 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--dk-muted); text-decoration: underline; cursor: pointer; }
.dkc :is(.dk-cmpm__x, .dk-cmpt__cta, .dk-cmpt__rm):focus-visible { outline: 3px solid rgba(245,165,0,.6); outline-offset: 2px; }
.dkc .dk-cmpm__note { margin: 18px 0 0; font-size: 13px; color: var(--dk-muted); }

/* Beratung: WhatsApp-Symbol statt zweitem Volti (Volti steht schon an der Empfehlung) */
.dkc #rechner #tariffList .wa-help { margin: 0 0 16px; padding: 18px 22px; border-radius: 18px; border-color: var(--dk-line); background: #fff; }
.dkc #rechner #tariffList .wa-help__volti { display: none; }
.dkc #rechner #tariffList .wa-help::before {
  content: ""; flex: none; width: 48px; height: 48px; border-radius: 14px;
  background: #E8F8EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23128C4A'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.470-.88-.79-1.480-1.760-1.650-2.060-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.41-.08-.13-.28-.2-.57-.35M12.05 22a9.9 9.9 0 0 1-5.31-1.450l-.36-.21-3.74.98 1-3.650-.24-.37A9.86 9.86 0 0 1 2 12C2 6.55 6.44 2.12 11.89 2.12c2.64 0 5.12 1.03 6.99 2.9A9.82 9.82 0 0 1 21.77 12C21.77 17.44 17.33 22 12.05 22'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.dkc #rechner #tariffList .wa-help__text strong { font-size: 16.5px; color: var(--dk-ink); }
.dkc #rechner #tariffList .wa-help__text span { font-size: 14.5px; color: var(--dk-ink-2); }
.dkc #rechner #tariffList .wa-help__btn { height: 46px; padding: 0 20px; border-radius: 12px; }
/* Tarife per Mail sichern */
.dkc #rechner .tariff-lead-capture { margin-top: 12px; padding: 22px 26px; border: 1px solid var(--dk-line); border-radius: 20px; background: #fff; box-shadow: none; }
.dkc #rechner .tariff-lead-capture__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--dk-amber-soft); font-size: 0; flex: none;
}
.dkc #rechner .tariff-lead-capture__icon::before {
  content: ""; width: 22px; height: 22px; background: var(--dk-amber-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dkc #rechner .tariff-lead-capture__body h4 { font-size: 17px; color: var(--dk-ink); }
.dkc #rechner .tariff-lead-capture .btn--primary { height: 48px; padding: 0 22px; border-radius: 12px; background: var(--dk-amber); color: var(--dk-navy); border: 0; font-weight: 700; }
.dkc #rechner #step-4 .calc-nav { border-top: 0; padding-top: 0; }

/* ── Schritt 5: Abschluss ──────────────────────────────────────────────────── */
.dkc #rechner #step-5 { padding: 0; background: transparent; border: 0; box-shadow: none; }
.dkc #rechner #step-5 .ck4 { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
.dkc #rechner #step-5 .ck4__main { padding: 36px 44px 32px; background: #fff; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); box-shadow: var(--dk-shadow); }
.dkc #rechner #step-5 .ck4__aside { top: 96px; grid-row: 1 / span 2; grid-column: 2; }
.dkc #rechner #step-5 .ck4__main { grid-row: 1; grid-column: 1; }
.dkc #rechner #step-5 .volti-check__ttl { color: #0B7A50; }
.dkc #rechner #step-5 .ck4__aside-body { gap: 16px; }
.dkc #rechner #step-5 :is(#selectedTariffSummary, #voltiCheck, #checkoutTrust) {
  background: #fff; border: 1px solid var(--dk-line); border-radius: 20px; box-shadow: var(--dk-shadow-sm);
}
.dkc #rechner #step-5 #selectedTariffSummary { border: 2px solid var(--dk-amber); box-shadow: 0 0 0 5px rgba(245,165,0,.08), var(--dk-shadow-sm); }
/* Teilschritte als ruhige Segmentleiste */
.dkc #rechner #step-5 .ck4-head { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--dk-line); }
.dkc #rechner #step-5 .ck4-head::after { content: "Mit * gekennzeichnete Felder sind Pflichtangaben."; display: block; margin-top: 14px; padding-left: 50px; font-size: 13.5px; color: var(--dk-muted); }
.dkc #rechner #step-5 .ck4-steps { display: flex; gap: 4px; margin: 0 0 28px; padding: 5px; background: var(--dk-bg); border-radius: 14px; }
.dkc #rechner #step-5 .ck4-steps__item { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 10px; height: 46px; border-radius: 10px; }
.dkc #rechner #step-5 .ck4-steps__item::before { display: none; }
.dkc #rechner #step-5 .ck4-steps__item.is-active { background: #fff; box-shadow: var(--dk-shadow-sm); }
.dkc #rechner #step-5 .ck4-steps__dot { width: 26px; height: 26px; font-size: 12.5px; border-width: 1.5px; }
.dkc #rechner #step-5 .ck4-steps__item.is-active .ck4-steps__dot { background: var(--dk-navy); border-color: var(--dk-navy); color: #fff; box-shadow: none; }
.dkc #rechner #step-5 .ck4-steps__item.is-done .ck4-steps__dot { background: var(--dk-amber); border-color: var(--dk-amber); color: var(--dk-navy); }
.dkc #rechner #step-5 .ck4-steps__lbl { font-size: 14px; font-weight: 650; color: var(--dk-muted); }
.dkc #rechner #step-5 .ck4-steps__item.is-active .ck4-steps__lbl, .dkc #rechner #step-5 .ck4-steps__item.is-done .ck4-steps__lbl { color: var(--dk-ink); }
.dkc #rechner #step-5 .ck4-title__num { width: 36px; height: 36px; background: var(--dk-amber); color: var(--dk-navy); }
.dkc #rechner #step-5 .ck4-title__h { font-size: 28px; letter-spacing: -.025em; color: var(--dk-ink); }
.dkc #rechner #step-5 .ck4-title__sub { margin-top: 6px; font-size: 16px; color: var(--dk-muted); }
/* Felder wie in Schritt 1–3, Fehler direkt am Feld */
.dkc #rechner #step-5 .field-label { font-size: 14.5px; font-weight: 650; color: var(--dk-ink); }
.dkc #rechner #step-5 .field-input { height: 54px; border: 1.5px solid var(--dk-line-2); border-radius: 12px; background-color: #fff; font-size: 16.5px; color: var(--dk-ink); }
.dkc #rechner #step-5 textarea.field-input { height: auto; }
.dkc #rechner #step-5 .field-input:hover { border-color: #B6C0D2; }
.dkc #rechner #step-5 .field-input:focus { border-color: var(--dk-amber); box-shadow: 0 0 0 4px rgba(245,165,0,.17); background-color: #fff; }
.dkc #rechner #step-5 .field-input.field-invalid { border-color: var(--dk-red); background-color: #FFF8F8; box-shadow: 0 0 0 4px rgba(198,40,40,.10); }
.dkc #rechner #step-5 select.field-input, .dkc #rechner #step-5 select.field-input.field-invalid {
  -webkit-appearance: none; appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.dkc #rechner .field-error-msg { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--dk-red); }
.dkc #rechner .field-error-msg::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-red); color: #fff; font-size: 11px; font-weight: 800;
}
.dkc #rechner #step-5 .calc-nav .btn { white-space: nowrap; }
.dkc #rechner #step-5 .calc-nav .btn--success, .dkc #rechner #step-5 .calc-nav .btn--primary {
  flex: 1; background: var(--dk-amber); border: 0; color: var(--dk-navy); box-shadow: 0 10px 22px -12px rgba(227,154,0,.95);
}
.dkc #rechner #step-5 .calc-nav .btn--success:hover, .dkc #rechner #step-5 .calc-nav .btn--primary:hover { background: var(--dk-amber-2); }

/* Abschluss: nächster Schritt, Sicherheit, „So geht es weiter“ */
.dkc #rechner .dk-ckfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 0; font-size: 14px; color: var(--dk-muted); }
.dkc #rechner .dk-ckfoot__sec li { white-space: nowrap; }
.dkc #rechner .dk-ckfoot__next { margin: 0; }
.dkc #rechner .dk-ckfoot__next strong { color: var(--dk-ink); }
.dkc #rechner .dk-ckfoot__sec { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.dkc #rechner .dk-ckfoot__sec li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--dk-ink-2); }
.dkc #rechner .dk-ckfoot__sec svg { width: 16px; height: 16px; color: var(--dk-green-2); }
.dkc #rechner #step-5 .dk-next {
  grid-column: 1; grid-row: 2; padding: 28px 32px 30px; background: #fff; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); box-shadow: var(--dk-shadow-sm);
}
.dkc #rechner .dk-next__h { margin: 0 0 20px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--dk-ink); }
.dkc #rechner .dk-next__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.dkc #rechner .dk-next__list li { position: relative; margin: 0; }
.dkc #rechner .dk-next__list li::after { content: ''; position: absolute; top: 22px; left: 60px; right: -14px; height: 2px; border-radius: 2px; background: var(--dk-line); }
.dkc #rechner .dk-next__list li:last-child::after { display: none; }
.dkc #rechner .dk-next__ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 0 14px; border-radius: 14px; background: var(--dk-amber-soft); color: var(--dk-amber-2); }
.dkc #rechner .dk-next__ic svg { width: 22px; height: 22px; }
.dkc #rechner .dk-next__ic b {
  position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dk-navy); color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 3px #fff;
}
.dkc #rechner .dk-next__list strong { display: block; margin: 0 0 6px; font-size: 15px; line-height: 1.3; color: var(--dk-ink); }
.dkc #rechner .dk-next__list p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dk-ink-2); }
.dkc .dk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }