/* Static price pages (ops/build_strompreis.py): /strompreis-heute/, /strompreis-morgen/ and the EN/IT versions.
   No script. Follows the site theme variables. Price level is always text + symbol (▼ ● ▲), colour only supports it. */
.strompreis { --sp-0: #4fd08a; --sp-1: #f1bf5b; --sp-2: #ff7a6b; overflow-x: clip; }
html[data-theme="light"] .strompreis { --sp-0: #17794a; --sp-1: #8a5f00; --sp-2: #c0362c; }
.strompreis * { min-width: 0; }
.strompreis .dim { color: var(--muted); }
.strompreis b { font-weight: 700; }

.sp-hero .h2 { font-size: clamp(28px, 4.4vw, 46px); text-wrap: balance; line-height: 1.08; letter-spacing: -.01em; }
.sp-live { margin: 0 0 10px; font: 600 13px var(--font-m); letter-spacing: .06em; color: var(--muted); }
.sp-hero .post-lead { font-size: clamp(18px, 2.3vw, 22px); line-height: 1.5; color: var(--text); }
.sp-sub { margin-top: 8px; font-size: 15px; }

.sp-wait { margin: 20px 0 4px; padding: 16px 20px; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 12px; background: var(--panel); }
.sp-wait h2 { margin: 0 0 6px; font: 700 clamp(19px, 2.6vw, 24px)/1.25 var(--font-d, var(--font-b)); color: var(--text); }
.sp-wait p { margin: 0; line-height: 1.6; }

.sp-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.sp-chip { padding: 14px 16px; border: 1px solid var(--line); border-top: 4px solid var(--line-2, var(--line)); border-radius: 12px; background: var(--panel); }
.sp-chip.sp-t0 { border-top-color: var(--sp-0); }
.sp-chip.sp-t1 { border-top-color: var(--sp-1); }
.sp-chip.sp-t2 { border-top-color: var(--sp-2); }
.sp-chip dt { font: 600 12px var(--font-m); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sp-chip dd { margin-top: 6px; }
.sp-chip dd b { display: block; font: 700 clamp(19px, 2.4vw, 24px)/1.2 var(--font-m); color: var(--text); white-space: nowrap; }
.sp-chip dd span { display: block; margin-top: 2px; font: 500 13.5px var(--font-m); color: var(--muted); }

.strompreis .sp-sec { margin: 44px 0 0; padding: 0; }
.sp-sec > h2, .sp-more h2 { margin: 0 0 16px; font: 700 clamp(22px, 3.2vw, 30px)/1.18 var(--font-d, var(--font-b)); color: var(--text); }
.sp-sec p { max-width: 78ch; line-height: 1.7; }
.sp-sec p + p { margin-top: 12px; }
.sp-note { margin-top: 12px; font-size: 14.5px; }

.sp-fig { margin: 0; padding: 14px 12px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.sp-chart { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
.sp-fig figcaption { margin-top: 8px; font-size: 14px; line-height: 1.55; }
.sp-grid { stroke: var(--line); stroke-width: 1; }
.sp-grid.sp-zero { stroke: var(--muted); }
.sp-ax { fill: var(--muted); font: 500 11px var(--font-m); }
.sp-val { fill: var(--text); font: 700 11.5px var(--font-m); }
.sp-bar.sp-t0 { fill: var(--sp-0); }
.sp-bar.sp-t1 { fill: var(--sp-1); }
.sp-bar.sp-t2 { fill: var(--sp-2); }
.sp-bar.sp-neg { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 2; }
.sp-avg { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .75; }

.sp-wins { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.sp-wins li { padding: 14px 16px; border: 1px solid var(--line); border-left: 5px solid var(--sp-0); border-radius: 12px; background: var(--panel); }
.sp-wins span { display: block; }
.sp-wn { font: 600 12.5px var(--font-m); color: var(--muted); }
.sp-wins b { display: block; margin: 4px 0 2px; font: 700 clamp(18px, 2.2vw, 22px)/1.2 var(--font-m); color: var(--text); white-space: nowrap; }
.sp-wv { font: 500 13.5px var(--font-m); color: var(--muted); }

.sp-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.sp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sp-table caption { white-space: normal; line-height: 1.4; caption-side: top; padding: 12px 14px; text-align: left; font: 600 13px var(--font-m); color: var(--muted); border-bottom: 1px solid var(--line); }
.sp-table th, .sp-table td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sp-table tbody tr:last-child th, .sp-table tbody tr:last-child td { border-bottom: 0; }
.sp-table thead th { font: 600 12px var(--font-m); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--panel-2, var(--panel)); }
.sp-table tbody th { font: 600 14.5px var(--font-m); color: var(--text); }
.sp-table .sp-n { text-align: right; font-family: var(--font-m); font-variant-numeric: tabular-nums; }
.sp-table tr.sp-now th, .sp-table tr.sp-now td { background: var(--accent-soft); }
.sp-cmp th, .sp-cmp td { white-space: normal; }
.sp-tier { font: 600 13.5px var(--font-m); }
.sp-tier.sp-t0 { color: var(--sp-0); }
.sp-tier.sp-t1 { color: var(--sp-1); }
.sp-tier.sp-t2 { color: var(--sp-2); }
.sp-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line-2, var(--line)); border-radius: 999px; font: 600 11.5px var(--font-m); color: var(--text); }
.sp-tag.sp-cur { border-color: var(--accent); }

.sp-devs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sp-dev { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.sp-dev h3 { margin: 0; font: 700 20px/1.2 var(--font-d, var(--font-b)); color: var(--text); }
.sp-dev .sp-spec { margin: 2px 0 12px; font: 500 13px var(--font-m); }
.sp-dev dl > div { padding: 10px 0 10px 12px; border-left: 4px solid var(--line); }
.sp-dev dl > div + div { margin-top: 10px; }
.sp-dev dl > .sp-t0 { border-left-color: var(--sp-0); }
.sp-dev dl > .sp-t2 { border-left-color: var(--sp-2); }
.sp-dev dt { font: 600 12.5px var(--font-m); color: var(--muted); }
.sp-dev dd b { display: block; margin-top: 2px; font: 700 18px/1.25 var(--font-m); color: var(--text); }
.sp-dev dd span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sp-dev .sp-diff { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text); }

.sp-faq h3 { margin: 22px 0 6px; font: 700 18.5px/1.3 var(--font-b); color: var(--text); }
.sp-faq h3:first-child { margin-top: 0; }

.sp-legal { margin: 44px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-left: 5px solid #f1bf5b; border-radius: 12px; background: var(--panel); }
.sp-legal h2 { margin: 0 0 6px; font: 700 14px var(--font-m); letter-spacing: .09em; text-transform: uppercase; color: var(--text); }
.sp-legal p { margin: 0 0 6px; line-height: 1.55; font-size: 15.5px; color: var(--text); }
.sp-legal .sp-attr { margin: 0; font-size: 14px; color: var(--muted); }

.sp-more { margin: 40px 0 0; }
.sp-more ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sp-more a { display: block; height: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); line-height: 1.4; }
.sp-more a:hover { border-color: var(--accent); text-decoration: none; }

@media (max-width: 860px) {
  .sp-chips, .sp-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-devs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-more ul { grid-template-columns: 1fr; }
  .sp-table th, .sp-table td { padding: 7px 6px; }
  .sp-table th:first-child { padding-left: 10px; }
  .sp-table, .sp-table tbody th { font-size: 13px; }
  .sp-table thead th { white-space: normal; letter-spacing: 0; font-size: 11px; line-height: 1.3; vertical-align: bottom; }
  .sp-tier { font-size: 12.5px; }
  .sp-tag { margin-left: 2px; padding: 0 5px; font-size: 10.5px; }
  .sp-fig { padding: 10px 4px 10px; }
  .sp-fig figcaption { padding: 0 8px; }
  .sp-chip, .sp-wins li { padding: 12px; }
}
@media print {
  .sp-more { display: none; }
  .sp-tablewrap { overflow: visible; }
}