/* Tokens und Grundlayout stammen aus /zugang/theme.css (design/tokens.json).
   WOFF2 fehlt noch: vertragliche lokale Fallback-Schriften, kein CDN. */
body { min-height: 100vh; background: var(--deep-lake) url('/assets/brand/pi-blox-lake.png') center/cover fixed; }
.homepage { margin: var(--space-3); }
.site-header { padding: 4px var(--space-3); min-height: 0; flex-wrap: nowrap; background: transparent; border-bottom: 1px solid rgba(250, 249, 244, 0.35); }
.site-header a:not(.button-link) { color: var(--surface); }
.site-header .brand { display: block; line-height: 0; }
.site-header .logo { width: 96px; height: 96px; display: block; }
.account { gap: var(--space-2); justify-content: flex-end; }
.account-guest, .account-user { display: flex; align-items: center; gap: var(--space-2); }
.account-guest[hidden], .account-user[hidden] { display: none; }
.account-user { flex-direction: column; align-items: flex-end; gap: 2px; }
.account-user form { margin: 0; }
.account button, .account .button-link { padding: 4px var(--space-2); font-size: 14px; line-height: 1.4; border-color: rgba(250, 249, 244, 0.7); }
.account-name { margin: 0; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--surface); opacity: 0.85; font-size: 12px; line-height: 1.2; }
.js .account:not(.is-ready) { visibility: hidden; }
.price-preview { background: transparent; padding: var(--space-2); }
.price-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.price-preview h2 { margin: 0 0 var(--space-1); font-size: clamp(28px, 3vw, 40px); color: var(--surface); }
.price-subtitle { margin: 0; color: var(--surface); }
.data-status { text-align: right; color: var(--surface); font-size: 12px; }
.data-status p { margin: 0; }
.availability-line { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Vom Maintainer gewünschtes Statuslicht: lokaler Glanz/Schein, keine neue Palette. */
.data-light { --signal-color: var(--homepage-price-high); flex: 0 0 auto; width: calc(var(--space-1) * 1.25); height: calc(var(--space-1) * 1.25); box-sizing: border-box; border-radius: 50%; border: var(--blox-seam) solid color-mix(in srgb, var(--signal-color) 75%, var(--pi-ink)); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--surface) 75%, var(--signal-color)) 0%, var(--signal-color) 45%, color-mix(in srgb, var(--signal-color) 70%, var(--pi-ink)) 100%); box-shadow: 0 0 calc(var(--space-1) / 2) color-mix(in srgb, var(--signal-color) 45%, transparent); }
.data-light.is-green { --signal-color: var(--homepage-price-low); }
.data-light.is-yellow { --signal-color: var(--energy-gold); }
.data-light.is-red { --signal-color: var(--homepage-price-high); }
.draft-note { margin: 0 0 var(--space-2); color: var(--muted); font-size: 14px; }
.kpi-day + .kpi-day { margin-top: var(--space-2); }
.kpi-day[hidden] { display: none; }
.kpi-day-title { margin: 0 0 var(--space-1); color: var(--surface); font: 700 16px/1.2 "Latin Modern Sans", "Segoe UI", sans-serif; }
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.kpi-container { position: relative; min-width: 0; box-sizing: border-box; background: var(--surface); border: var(--blox-seam) solid var(--sea-mist); padding: calc(var(--space-1) * 1.5); padding-left: calc(var(--space-1) * 5); display: grid; grid-template-rows: 20px auto auto 1fr; row-gap: calc(var(--space-1) / 2); align-content: start; }
.kpi-icon { position: absolute; top: calc(var(--space-1) * 1.5); left: var(--space-1); width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-low .kpi-icon, .kpi-period .kpi-icon { color: var(--homepage-price-low); }
.kpi-high .kpi-icon, .kpi-expensive .kpi-icon { color: var(--homepage-price-high); }
.kpi-container.blox-20 { min-height: 0; aspect-ratio: 2.4 / 1; border-radius: var(--radius-card); }
.kpi-container h3 { font: 700 13px/1.2 "Latin Modern Sans", "Segoe UI", sans-serif; margin: 0; }
.kpi-container p { margin: 0; }
#expensive-periods { grid-row: 2 / 4; display: grid; gap: var(--space-1); align-self: start; }
#expensive-periods .kpi-meta { margin-top: calc(var(--space-1) / 2); }
#expensive-periods.two-periods .kpi-value { font-size: 18px; }
.kpi-value { font: 700 clamp(20px, 1.7vw, 32px)/1.1 "Latin Modern Sans", "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-unit { font-size: .65em; font-weight: 600; }
.kpi-current .kpi-number { font-size: 1.495em; }
.kpi-meta { color: var(--muted); font-size: 12px; line-height: 1.2; }
.kpi-current { background: var(--sand-white); color: var(--deep-lake); border-color: var(--soc-sky); }
.kpi-low { background: color-mix(in srgb, var(--homepage-price-low) var(--homepage-price-edge-opacity), var(--surface)); }
.kpi-high { background: color-mix(in srgb, var(--homepage-price-high) var(--homepage-price-edge-opacity), var(--surface)); }
.kpi-container.has-price-color { background: color-mix(in srgb, var(--period-price-color) var(--homepage-price-edge-opacity), var(--surface)); }
.product-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-3) var(--space-2); }
.product-link.blox-40 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); min-width: 0; min-height: 0; aspect-ratio: 4.8 / 1; box-sizing: border-box; padding: var(--space-1) var(--space-2); background: var(--surface); color: var(--deep-lake); border: var(--blox-seam) solid var(--sea-mist); border-radius: var(--radius-card); font: 700 14px/1.25 "Latin Modern Sans", "Segoe UI", sans-serif; text-decoration: none; }
.link-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--blox-forest); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-link .link-icon + span { margin-right: auto; }
@media (max-width: 1099px) { .link-icon { display: none; } }
.product-link:hover { background: var(--sand-white); border-color: var(--deep-lake); }
.product-link:focus-visible { outline: 2px solid var(--deep-lake); outline-offset: 2px; }
.time-plan-card { position: relative; margin: var(--space-3) var(--space-2); padding: var(--space-2); background: var(--surface); border: var(--blox-seam) solid var(--sea-mist); border-radius: var(--radius-surface); }
.time-plan-card h2 { margin: 0 0 var(--space-1); font: 700 18px/1.2 "Latin Modern Sans", "Segoe UI", sans-serif; }
.time-plan-note { color: var(--muted); font-size: 12px; margin: var(--space-1) 0; }
.time-plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.time-plan-head h2 { margin: 0; }
.time-plan-head .time-plan-note, .time-plan-head .time-plan-legend { margin: 0; max-width: none; }
.time-plan-head .time-plan-legend { margin-left: auto; }
@media (min-width: 1100px) {
  .time-plan-card { box-sizing: border-box; aspect-ratio: 4.8 / 1; display: flex; flex-direction: column; }
  #time-plan, #price-history { flex: 1; min-height: 0; aspect-ratio: auto; margin-top: 4px; }
}
#time-plan, #price-history { width: 100%; aspect-ratio: 4.8 / 1; }
#time-plan svg, #price-history svg { display: block; width: 100%; height: 100%; }
.plan-lane, .plan-grid { stroke: var(--grid); stroke-width: 1; }
.plan-now-title { fill: var(--pi-ink); font: 700 14px "Latin Modern Sans", "Segoe UI", sans-serif; }
.plan-tick { fill: var(--pi-ink); font: 12px "Latin Modern Sans", "Segoe UI", sans-serif; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.plan-day-grid { stroke: var(--muted); stroke-opacity: 0.6; stroke-width: 1; }
.history-zero { stroke: var(--muted); stroke-opacity: 0.6; stroke-width: 1; }
.plan-day-label { fill: var(--pi-ink); font: 700 12px "Latin Modern Sans", "Segoe UI", sans-serif; }
.plan-cheap-mark { fill: var(--homepage-price-low); }
.plan-expensive-mark { fill: var(--homepage-price-high); }
.plan-neutral-mark { fill: var(--energy-gold); }
.plan-high25-mark { fill: var(--homepage-plan-high25); }
.plan-low25-mark { fill: var(--homepage-plan-low25); }
.plan-lane-label { fill: var(--pi-ink); font: 12px "Latin Modern Sans", "Segoe UI", sans-serif; }
.plan-price-label, .plan-transition-label { font: 300 10px "Latin Modern Sans", "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
.plan-price-label { fill: #fff; }
.plan-transition-label { fill: #000; }
.plan-interactive-mark { cursor: help; }
.plan-interactive-mark:focus-visible { outline: 2px solid var(--deep-lake); outline-offset: 2px; }
.plan-tooltip { position: absolute; z-index: 2; display: grid; gap: calc(var(--space-1) / 2); width: max-content; max-width: calc(100% - var(--space-4)); box-sizing: border-box; padding: var(--space-1) var(--space-2); border: var(--blox-seam) solid var(--sea-mist); border-radius: var(--radius-surface); background: var(--surface); color: var(--pi-ink); font: 14px/1.4 "Latin Modern Sans", "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.plan-tooltip[hidden] { display: none; }
.time-plan-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 12px; max-width: none; margin: var(--space-1) 0; }
.plan-cheap { color: var(--homepage-price-low); }
.plan-expensive { color: var(--homepage-price-high); }
.plan-neutral { color: var(--muted); }
p { max-width: 65ch; }
nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
footer { background: transparent; color: var(--surface); }
footer a { color: inherit; }
@media (max-width: 959px) {
  .product-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .kpi-container { padding: 4px 4px 4px 32px; grid-template-rows: 14px auto auto 1fr; row-gap: 2px; }
  .kpi-icon { top: 4px; left: 5px; width: 18px; height: 18px; }
  .kpi-container h3 { font-size: 11px; line-height: 1.1; }
  .kpi-value { font-size: 16px; line-height: 1.05; }
  .kpi-current .kpi-number { font-size: 1.25em; }
  .kpi-meta { font-size: 9px; line-height: 1.1; }
  #expensive-periods { gap: 1px; }
  #expensive-periods .kpi-value { font-size: 12px; line-height: 1; }
  #expensive-periods .kpi-meta { margin-top: 1px; font-size: 8px; line-height: 1; }
}
@media (max-width: 899px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .homepage { margin: var(--space-2); }
  .site-header { padding: 4px var(--space-2); gap: var(--space-1); }
  .site-header .logo { width: 64px; height: 64px; }
  .account-name { max-width: 24ch; }
  .product-links { grid-template-columns: 1fr; }
  .data-status { text-align: left; }
}
@media (max-width: 419px) {
  .kpi-row { grid-template-columns: 1fr; }
}

.history-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.history-now { stroke: var(--pi-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.history-now-dot { fill: var(--pi-ink); stroke: var(--surface); stroke-width: 1.5; }
.history-cursor { stroke: var(--muted); stroke-width: 1; }
.history-readout-box { fill: var(--surface); stroke: var(--sea-mist); stroke-width: 1; }
.history-readout-value { fill: var(--pi-ink); font: 700 12px "Latin Modern Sans", "Segoe UI", sans-serif; }
#price-history rect[fill="transparent"] { cursor: crosshair; }
@media (max-width: 1099px) {
  #price-history { aspect-ratio: 2.4 / 1; }
}

.time-plan-head .range-toggle { margin-left: auto; display: flex; gap: 4px; }
.range-toggle button { padding: 2px var(--space-1); font-size: 12px; line-height: 1.4; background: transparent; color: var(--pi-ink); border: 1px solid var(--sea-mist); }
.range-toggle button:hover { background: var(--sand-white); }
.range-toggle button[aria-pressed="true"] { background: var(--blox-forest); color: var(--surface); border-color: var(--blox-forest); }

.plan-lane-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }