/* Destex Energy – Komponenten-Stylesheet. Lädt nach tokens.css. */
.dx {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.dx *, .dx *::before, .dx *::after { box-sizing: border-box; }
.dx :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dx-on-blau :focus-visible { outline-color: var(--on-blau); }

.dx-gradient {
  background: linear-gradient(135deg, var(--brand-blau) 0%, var(--brand-blau-hell) 100%);
  color: var(--on-blau);
}

/* Buttons */
.dx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: var(--space-3) 28px;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  font: 600 17px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}
.dx-btn:active { transform: translateY(1px); }
.dx-btn--primary { background: var(--energie-orange); color: var(--on-orange); }
.dx-btn--primary:hover { background: var(--orange-hover); }
.dx-btn--secondary { background: var(--brand-blau); color: var(--on-blau); }
.dx-btn--secondary:hover { background: var(--brand-blau-dunkel); }
.dx-btn--outline { background: transparent; color: var(--brand-blau); border-color: var(--border-strong); }
.dx-btn--outline:hover { border-color: var(--brand-blau); background: var(--blau-050); }
.dx-btn--ghost { background: transparent; color: var(--brand-blau); padding-inline: var(--space-3); }
.dx-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.dx-on-blau .dx-btn--outline { color: var(--on-blau); border-color: var(--on-blau); }
.dx-on-blau .dx-btn--outline:hover { background: rgba(255,255,255,0.12); }
.dx-btn--sm { min-height: 40px; padding: var(--space-2) 18px; font-size: 15px; }
.dx-btn[disabled], .dx-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dx-btn svg { width: 20px; height: 20px; flex: none; }

/* Icon */
.dx-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dx-icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--blau-100); color: var(--brand-blau);
}
.dx-icon-circle--orange { background: var(--orange-100); color: var(--orange-text); }

/* Eyebrow + Headlines */
.dx-eyebrow { display: block; font: 600 13px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-blau); margin-bottom: var(--space-3); }
.dx-on-blau .dx-eyebrow { color: var(--on-blau); opacity: .85; }
.dx-h1 { font: 800 60px/1.04 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 0; text-wrap: balance; }
.dx-h2 { font: 700 44px/1.08 var(--font-display); letter-spacing: -.015em; color: var(--ink); margin: 0; text-wrap: balance; }
.dx-h3 { font: 600 28px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.dx-h4 { font: 600 20px/1.3 var(--font-display); color: var(--ink); margin: 0; }
.dx-lead { font: 400 19px/1.5 var(--font-body); color: var(--ink-muted); max-width: 36em; margin: 0; }
.dx-body { font: 400 16px/1.6 var(--font-body); max-width: 40em; margin: 0; }
.dx-small { font: 400 15px/1.5 var(--font-body); color: var(--ink-muted); margin: 0; }
.dx-on-blau .dx-h1, .dx-on-blau .dx-h2, .dx-on-blau .dx-h3, .dx-on-blau .dx-h4, .dx-on-blau .dx-lead, .dx-on-blau .dx-small { color: var(--on-blau); }
.dx-num { font: 700 56px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--orange-text); }
@media (max-width: 640px) { .dx-h1 { font-size: 40px; } .dx-h2 { font-size: 32px; } .dx-lead { font-size: 19px; } .dx-num { font-size: 44px; } }

/* Card */
.dx-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.dx-card--shadow { border-color: transparent; box-shadow: var(--shadow-card); }
.dx-card--raised { border-color: transparent; box-shadow: var(--shadow-raised); }
@media (min-width: 720px) { .dx-card { padding: var(--space-8); } }

/* Vorteil (Icon + Text) */
.dx-vorteil { display: flex; gap: var(--space-4); align-items: flex-start; }
.dx-vorteil__title { font: 600 20px/1.3 var(--font-display); margin: 0 0 var(--space-1); color: var(--ink); }
.dx-vorteil__text { font: 400 17px/1.6 var(--font-body); color: var(--ink-muted); margin: 0; }
.dx-on-blau .dx-vorteil__title { color: var(--on-blau); }
.dx-on-blau .dx-vorteil__text { color: var(--on-blau); opacity: .85; }
.dx-on-blau .dx-icon-circle { background: rgba(255,255,255,0.16); color: var(--on-blau); }

/* Schritt */
.dx-schritt { position: relative; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.dx-schritt__nr { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-blau); color: var(--on-blau); font: 700 20px/1 var(--font-display); margin-bottom: var(--space-4); }
.dx-schritt__nr--orange { background: var(--energie-orange); color: var(--on-orange); }
.dx-schritt__title { font: 600 20px/1.3 var(--font-display); margin: 0 0 var(--space-2); }
.dx-schritt__text { font: 400 17px/1.6 var(--font-body); color: var(--ink-muted); margin: 0; }

/* Störer */
.dx-stoerer { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 132px; height: 132px; border-radius: 50%; background: var(--energie-orange); color: var(--on-orange); transform: rotate(-8deg); box-shadow: var(--shadow-card); }
.dx-stoerer__top { font: 600 13px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.dx-stoerer__num { font: 700 34px/1 var(--font-display); font-variant-numeric: tabular-nums; margin: 2px 0; }
.dx-stoerer__bottom { font: 600 13px/1.2 var(--font-body); }
.dx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font: 600 13px/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.dx-badge--blau { background: var(--blau-100); color: var(--brand-blau); }
.dx-badge--orange { background: var(--orange-100); color: var(--orange-text); }
.dx-badge--gruen { background: var(--gruen-100); color: var(--spar-gruen); }

/* Felder */
.dx-field { display: flex; flex-direction: column; gap: var(--space-2); }
.dx-label { font: 600 13px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.dx-input { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 17px/1.4 var(--font-body); transition: border-color 180ms ease-out; }
.dx-input::placeholder { color: var(--ink-subtle); }
.dx-input:hover { border-color: var(--brand-blau); }
.dx-input:focus { border-color: var(--brand-blau); outline: 3px solid var(--focus); outline-offset: 1px; }
.dx-input--error { border-color: var(--warn-rot); }
.dx-hint { font: 400 15px/1.5 var(--font-body); color: var(--ink-muted); }
.dx-error { font: 600 15px/1.5 var(--font-body); color: var(--warn-rot); }
.dx-input-unit { position: relative; }
.dx-input-unit .dx-input { padding-right: 84px; }
.dx-input-unit__unit { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); font: 600 15px/1 var(--font-body); color: var(--ink-muted); pointer-events: none; }

/* Segment (Strom / Gas) */
.dx-segment { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--blau-100); border: 1px solid var(--border); }
.dx-segment__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--brand-blau); font: 600 15px/1 var(--font-body); cursor: pointer; transition: background-color 180ms ease-out, color 180ms ease-out; }
.dx-segment__btn[aria-pressed="true"] { background: var(--brand-blau); color: var(--on-blau); }
.dx-segment__btn svg { width: 18px; height: 18px; }

/* Tarifrechner */
.dx-rechner { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); max-width: 440px; }
.dx-rechner__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dx-rechner__title { font: 600 20px/1.3 var(--font-display); margin: 0; }
.dx-rechner__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 420px) { .dx-rechner__row { grid-template-columns: 1fr; } }
.dx-rechner__result { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); background: var(--orange-100); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.dx-rechner__result-label { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.dx-rechner__result-num { font: 700 32px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--orange-text); }
.dx-rechner .dx-btn { width: 100%; }
.dx-rechner__foot { font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); margin: 0; }

/* FAQ */
.dx-faq { border-top: 1px solid var(--border); }
.dx-faq__item { border-bottom: 1px solid var(--border); }
.dx-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; background: none; border: 0; text-align: left; cursor: pointer; font: 600 20px/1.3 var(--font-display); color: var(--ink); }
.dx-faq__q svg { flex: none; width: 24px; height: 24px; color: var(--brand-blau); transition: transform 320ms ease-out; }
.dx-faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.dx-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease-out; }
.dx-faq__a > div { overflow: hidden; }
.dx-faq__a p { font: 400 17px/1.6 var(--font-body); color: var(--ink-muted); margin: 0 0 var(--space-4); max-width: 40em; }
.dx-faq__q[aria-expanded="true"] + .dx-faq__a { grid-template-rows: 1fr; }

/* Listen mit Apricot-Quadrat */
.dx-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dx-list li { position: relative; padding-left: 22px; font: 400 17px/1.6 var(--font-body); }
.dx-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; background: var(--apricot); border-radius: 2px; }
.dx-list--check li::before { background: none; width: 18px; height: 18px; top: .35em; border-radius: 0; background-color: transparent; }
.dx-list--check li { padding-left: 28px; }
.dx-list--check li svg { position: absolute; left: 0; top: .3em; width: 20px; height: 20px; color: var(--spar-gruen); }

/* Bewegung */
@keyframes dx-float { 0%,100% { transform: translateY(0) rotate(var(--dx-rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--dx-rot, 0deg)); } }
.dx-float { animation: dx-float 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dx-float { animation: none; } .dx *, .dx *::before { transition: none !important; } }