/* ==========================================================================
   SVG illustrations – all colours come from theme tokens (currentColor or
   CSS custom properties), so every drawing follows Light/Dark automatically.
   Infinite animations are switched off for prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------- Energy line */

.energy-line { display: block; }
.energy-line__trace { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.energy-line__vias circle { fill: var(--navy-950); stroke: var(--border-strong); stroke-width: 1.5; }
.energy-line__pulse {
  fill: none;
  stroke: var(--lime-400);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 70 930;
  animation: pulse-run 7s linear infinite;
}
@keyframes pulse-run { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------- Energy flow */

.energy-flow {
  display: grid;
  gap: 1.25rem;
  padding: clamp(.75rem, 2.5vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--ef-shell);
  box-shadow: var(--shadow-sm);
}
.energy-flow__stage {
  position: relative;
  border-radius: calc(var(--radius-xl) - 8px);
  background: var(--ef-stage);
  border: 1px solid var(--border);
  padding: 3.75rem .5rem .5rem;
}
.energy-flow__mode {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 1;
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
}
.energy-flow__svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }

.ef-grid-dot { fill: var(--grid-dot); }
.ef-trace__base { fill: none; stroke: var(--border-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ef-trace__flow {
  fill: none;
  stroke: var(--ef-energy);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0 18;
  animation: ef-flow 1.1s linear infinite;
  transition: opacity var(--dur-3), stroke-width var(--dur-2);
}
@keyframes ef-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } }
.ef-vias circle { fill: var(--ef-node); stroke: var(--border-strong); stroke-width: 2; }
.ef-trace { transition: opacity var(--dur-3); }

.ef-node { cursor: pointer; }
.ef-node__hit { fill: transparent; }
.ef-node__halo { opacity: 0; transition: opacity var(--dur-3); }
.ef-node__ring { fill: var(--ef-node); stroke: var(--border-strong); stroke-width: 2; transition: stroke var(--dur-2), stroke-width var(--dur-2); }
.ef-node__inner { fill: var(--ef-node-inner); stroke: var(--border); stroke-width: 1; }
.ef-node__icon { fill: none; stroke: var(--text); stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-2); }
.ef-node--hub .ef-node__ring { stroke: var(--ef-energy); stroke-width: 2.5; }
.ef-node--hub .ef-node__icon { stroke: var(--ef-energy); }
.ef-node--hub .ef-node__halo { opacity: .8; }
.ef-label { fill: var(--text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ef-sub { fill: var(--text-3); font-size: 12.5px; font-weight: 550; }
.ef-node:hover .ef-node__ring { stroke: var(--text-2); }
.ef-node.is-active .ef-node__ring { stroke: var(--ef-energy); stroke-width: 3; }
.ef-node.is-active .ef-node__halo { opacity: 1; }
.ef-node.is-active .ef-node__icon { stroke: var(--ef-energy); }

/* Dim traces that are not related to the selected component */
.energy-flow[data-selected="pv"] .ef-trace:not([data-trace="pv"]),
.energy-flow[data-selected="battery"] .ef-trace:not([data-trace="battery"]),
.energy-flow[data-selected="home"] .ef-trace:not([data-trace="home"]),
.energy-flow[data-selected="wallbox"] .ef-trace:not([data-trace="wallbox"]),
.energy-flow[data-selected="heatpump"] .ef-trace:not([data-trace="heatpump"]) { opacity: .4; }

/* Battery glyph */
.ef-battery__body { fill: none; stroke: var(--text); stroke-width: 2.2; }
.ef-battery__cap { fill: var(--text); }
.ef-battery__level {
  fill: var(--ef-energy);
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(.88);
  transition: transform 1.6s var(--ease-in-out);
}
.energy-flow[data-mode="evening"] .ef-battery__level { transform: scaleX(.32); }

/* Sky */
.ef-sun circle { fill: var(--sun); }
.ef-sun__rays line { stroke: var(--sun); stroke-width: 2.5; stroke-linecap: round; }
.ef-sun__rays { animation: spin 18s linear infinite; transform-origin: 0 0; }
.ef-sun, .ef-moon, .ef-beam { transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-out); }
.ef-moon { fill: var(--ef-moon); opacity: 0; transform: translateY(8px); }
.ef-beam { fill: none; stroke: var(--sun); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 5; animation: ef-flow 1.4s linear infinite; }

/* Day / evening states */
.energy-flow[data-mode="day"] .ef-sub--evening,
.energy-flow[data-mode="evening"] .ef-sub--day { display: none; }
.energy-flow[data-mode="evening"] .ef-sun { opacity: 0; transform: translateY(8px); }
.energy-flow[data-mode="evening"] .ef-beam { opacity: 0; }
.energy-flow[data-mode="evening"] .ef-moon { opacity: 1; transform: none; }
.energy-flow[data-mode="evening"] [data-trace="pv"] .ef-trace__flow { opacity: 0; }
.energy-flow[data-mode="evening"] [data-trace="battery"] .ef-trace__flow { animation-direction: reverse; }
.energy-flow[data-mode="evening"] .ef-node--pv .ef-node__icon { stroke: var(--text-3); }

/* Side panel */
.energy-flow__panel { display: grid; align-content: start; gap: 1.25rem; padding: .25rem .25rem .5rem; }
.energy-flow__tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.ef-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .45rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.ef-tab .icon { width: 18px; height: 18px; }
.ef-tab:hover { color: var(--text); border-color: var(--border-strong); }
.ef-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ef-panel { padding: 1.35rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--ef-panel); }
.ef-panel:focus-visible { outline-offset: 2px; }
.ef-panel__title { margin-bottom: .35rem; font-size: var(--fs-h3); font-weight: 720; }
.ef-panel__status { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; color: var(--accent-text); font-size: var(--fs-sm); font-weight: 650; }
.ef-panel__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ef-energy); box-shadow: 0 0 0 0 var(--ef-energy); animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(199 236 80 / .6); } 100% { box-shadow: 0 0 0 10px rgb(199 236 80 / 0); } }
.energy-flow[data-mode="day"] .ef-panel .ef-sub--evening,
.energy-flow[data-mode="evening"] .ef-panel .ef-sub--day { display: none; }
.ef-panel p { color: var(--text-2); }
.ef-panel .link-arrow { margin-top: .9rem; }
html:not(.js) .energy-flow__tabs, html:not(.js) .energy-flow__mode { display: none; }
html:not(.js) .energy-flow__stage { padding-top: .5rem; }

@media (min-width: 1040px) {
  .energy-flow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; }
  .energy-flow__panel { padding: 1rem .5rem 1rem 0; }
}
@media (max-width: 599px) {
  .ef-label, .ef-sub { display: none; }
  .energy-flow__stage { padding-top: 3.5rem; }
}

/* Gradient stops are styled here (not via presentation attributes) so the
   theme variables work in every browser. */
.ef-halo-stop { stop-color: var(--ef-energy); }
.sh-light-stop { stop-color: var(--ill-lamp); }

/* ------------------------------------------------------ Illustrations */

.illustration { width: 100%; height: auto; }
.ill-sun circle { fill: var(--sun); }
.ill-sun__rays line { stroke: var(--sun); stroke-width: 3; stroke-linecap: round; }
.ill-sun__rays { animation: spin 24s linear infinite; transform-origin: 0 0; }
.ill-beam { fill: none; stroke: var(--sun); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 6; animation: ef-flow 1.4s linear infinite; }
.ill-wall { fill: var(--ill-wall); stroke: var(--ill-line); stroke-width: 2; }
.ill-roof-edge { fill: var(--ill-line); }
.ill-glass { fill: var(--ill-glass); stroke: var(--ill-line); stroke-width: 2; stroke-linejoin: round; }
.ill-frame { fill: none; stroke: var(--ill-line); stroke-width: 2; }
.ill-slab { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: 2; stroke-linejoin: round; }
.ill-pv { fill: var(--ill-pv); stroke: var(--ill-line); stroke-width: 1.5; stroke-linejoin: round; }
.ill-pv-cell { fill: none; stroke: var(--ill-pv-line); stroke-width: 1; }
.ill-post { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: 2; }
.ill-trace { fill: none; stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.ill-flow { fill: none; stroke: var(--ill-energy); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 12; animation: ef-flow 1s linear infinite; }
.ill-device { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: 2.2; }
.ill-screen { fill: var(--ill-energy); opacity: .9; }
.ill-led { fill: none; stroke: var(--ill-energy); stroke-width: 3; animation: blink 2.4s ease-in-out infinite; }
.ill-cable { fill: none; stroke: var(--ill-line); stroke-width: 5; stroke-linecap: round; }
.ill-flow--cable { stroke-width: 3; stroke: var(--lime-300); }
.ill-car__body { fill: var(--ill-body); stroke: var(--ill-line); stroke-width: 2.2; stroke-linejoin: round; }
.ill-car__line { fill: none; stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.ill-car__lamp { fill: var(--ill-lamp); }
.ill-car__tail { fill: #e0483e; }
.ill-arch { fill: var(--ill-wall); }
.illustration-frame .ill-arch, .example__media .ill-arch { fill: var(--surface); }
.ill-tire { fill: var(--ill-tire); }
.ill-rim { fill: var(--ill-rim); }
.ill-port { fill: var(--ill-energy); }
.ill-badge__bg { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: 1.5; }
.ill-badge__bolt { fill: var(--ill-energy); stroke: var(--ill-line); stroke-width: 1; stroke-linejoin: round; }
.ill-badge__track { fill: var(--ill-wall); }
.ill-badge__fill { fill: var(--ill-energy); transform-box: fill-box; transform-origin: left center; animation: charge 4.5s var(--ease-in-out) infinite; }
.ill-ground { fill: none; stroke: var(--ill-line); stroke-width: 2.2; stroke-linecap: round; }
.ill-ground-dash { fill: none; stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; opacity: .25; }
@keyframes charge { 0% { transform: scaleX(.18); } 80%, 100% { transform: scaleX(1); } }
@keyframes blink { 50% { opacity: .35; } }

/* Smart home */
.smarthome { display: grid; gap: 1rem; }
.smarthome__controls { display: grid; gap: .6rem; justify-items: start; }
.smarthome__scenes { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.smarthome__status { margin: 0 0 0 .5rem; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
html:not(.js) .smarthome__controls { display: none; }
.sh-roof { fill: var(--ill-pv); stroke: var(--ill-line); stroke-width: 2.2; stroke-linejoin: round; }
.sh-body { fill: var(--ill-wall); stroke: var(--ill-line); stroke-width: 2.2; }
.sh-slab { fill: var(--ill-line); opacity: .85; }
.sh-wall { stroke: var(--ill-line); stroke-width: 2; opacity: .5; }
.sh-glass { fill: var(--ill-glass); transition: fill var(--dur-3); }
.sh-frame { fill: none; stroke: var(--ill-line); stroke-width: 2.2; }
.sh-box { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: 1.6; }
.sh-blind rect { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: .8; }
.sh-blind { transform-box: fill-box; transform-origin: top; transform: scaleY(.06); transition: transform 1.2s var(--ease-in-out); }
.sh-cord { stroke: var(--ill-line); stroke-width: 2; }
.sh-shade { fill: var(--ill-line); }
.sh-bulb { fill: var(--ill-rim); transition: fill var(--dur-3); }
.sh-glow { opacity: 0; transition: opacity .9s var(--ease-out); }
.sh-furniture { fill: none; stroke: var(--ill-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.sh-panel__body { fill: var(--ill-surface); stroke: var(--ill-line); stroke-width: 2; }
.sh-key { fill: var(--ill-wall); stroke: var(--ill-line); stroke-width: 1.2; transition: fill var(--dur-2); }
.sh-key--static { opacity: .6; }
.sh-moon { fill: #dfe7f2; stroke: var(--ill-line); stroke-width: 1.5; opacity: 0; transition: opacity var(--dur-3); }
.sh-sky .ill-sun { transition: opacity var(--dur-3); }

.smarthome[data-scene="abend"] .sh-blind,
.smarthome[data-scene="abwesend"] .sh-blind { transform: scaleY(1); }
.smarthome[data-scene="abend"] .sh-glow { opacity: 1; }
.smarthome[data-scene="abend"] .sh-bulb { fill: var(--ill-lamp); }
.smarthome[data-scene="abend"] .sh-sky .ill-sun { opacity: 0; }
.smarthome[data-scene="abend"] .sh-moon { opacity: 1; }
.smarthome[data-scene="morgen"] .sh-key[data-key="morgen"],
.smarthome[data-scene="abend"] .sh-key[data-key="abend"],
.smarthome[data-scene="abwesend"] .sh-key[data-key="abwesend"] { fill: var(--ill-energy); }

/* Location graphic */
.location-graphic { width: 100%; height: auto; }
.loc-grid { stroke: var(--grid-dot); stroke-width: 1; }
.loc-contour { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.loc-road { fill: none; stroke: var(--text-3); stroke-width: 5; stroke-linecap: round; opacity: .35; }
.loc-road--minor { stroke-width: 3; }
.loc-ring { fill: none; stroke: var(--accent-text); stroke-width: 1.5; stroke-dasharray: 4 6; }
.loc-ring--1 { opacity: .7; }
.loc-ring--2 { opacity: .45; }
.loc-ring--3 { opacity: .25; }
.loc-pulse { fill: var(--accent); opacity: .5; transform-box: fill-box; transform-origin: center; animation: loc-pulse 2.4s var(--ease-out) infinite; }
.loc-pin { fill: var(--navy-800); stroke: #fff; stroke-width: 2.5; }
:root[data-theme="dark"] .loc-pin { fill: var(--lime-400); stroke: var(--navy-900); }
.loc-pin-dot { fill: var(--lime-400); }
:root[data-theme="dark"] .loc-pin-dot { fill: var(--navy-900); }
.loc-label rect { fill: var(--surface); stroke: var(--border-strong); }
.loc-label text { fill: var(--text); font-family: var(--font-sans); font-size: 15px; font-weight: 700; }
@keyframes loc-pulse { 0% { transform: scale(.4); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

/* 404 */
.nf-cable { fill: none; stroke: var(--text-2); stroke-width: 6; stroke-linecap: round; }
.nf-plug, .nf-socket { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.nf-pin { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.nf-hole { fill: var(--text); }
.nf-spark path { fill: none; stroke: var(--sun); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.nf-spark { animation: flicker 2.2s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .2; } 12% { opacity: 1; } 55% { opacity: .5; } 60% { opacity: 1; } }

/* ---------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .energy-line__pulse, .ef-trace__flow, .ef-beam, .ef-sun__rays, .ef-panel__pulse,
  .ill-sun__rays, .ill-beam, .ill-flow, .ill-led, .ill-badge__fill,
  .loc-pulse, .nf-spark, .hero__orbit-spin { animation: none !important; }
  .ill-badge__fill { transform: scaleX(.7); }
  .energy-line__pulse { stroke-dasharray: none; opacity: .5; }
}