/* === Startseite ==========================================================
   Nur auf der Startseite geladen (_partials/head.tpl, Block stylesheets) --
   Variablen und Grundstile kommen aus custom.css, das vorher geladen wird.
   Nach Aenderungen ?v=N in head.tpl hochzaehlen.

   templates/index.tpl + _partials/home-energy.tpl + assets/js/home-energy.js.
   Aufbau: Energiefluss mit H1 -> Einstieg nach Wohnsituation ->
   Produktreihe -> Fakten -> Ratgeber -> FAQ.                              */

/* ~ statt +: zwischen Kopf und naechstem Abschnitt steht das <script>. */
.sam-home > section ~ section,
.sam-home + .ps-featuredproducts,
.ps-featuredproducts + .sam-home { margin-top: 3.5rem; }

.sam-home h2 { margin-bottom: 1rem; }

/* --- Kopf: H1 links, Szene rechts; unter 992 px untereinander ---------- */
.sam-hero {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
  padding-top: 1.5rem;
}

@media (min-width: 992px) {
  .sam-hero { grid-template-columns: 5fr 7fr; }
}

.sam-hero__title { margin-bottom: .75rem; }
.sam-hero__lead { max-width: 38ch; color: var(--sam-muted); margin: 0; }

/* --- Szene ---------------------------------------------------------------
   SVG-Illustration (viewBox 800 x 500) mit HTML-Beschriftungen. Die Farben
   der Fluesse stehen einmal als Variablen und gelten fuer Leitungen,
   Speicherfuellung und Legende gleich.                                   */
.sam-flow {
  --sam-f-sonne: #e3a91c;
  --sam-f-laden: #3f9d5c;
  --sam-f-entladen: #2f86c6;
  --sam-f-netz: #8b98a3;
  background: var(--sam-surface);
  border: 1px solid var(--sam-line);
  border-radius: var(--bs-border-radius-xl);
  padding: 1rem;
}

@media (min-width: 768px) { .sam-flow { padding: 1.25rem 1.5rem; } }

/* Bedienelemente ohne JavaScript unsichtbar, aber mit reserviertem Platz --
   sonst springt die Seite, sobald das Skript sie freigibt.               */
.sam-flow:not(.is-ready) .sam-flow__js { visibility: hidden; }

.sam-icons { position: absolute; width: 0; height: 0; overflow: hidden; }

.sam-flow__switch { display: flex; flex-wrap: wrap; gap: .5rem; }

.sam-flow__scene {
  min-height: 44px;
  padding: .45rem 1rem;
  border: 1px solid var(--sam-petrol);
  border-radius: 999px;
  background: transparent;
  color: var(--sam-petrol);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.sam-flow__scene[aria-pressed="true"] { background: var(--sam-petrol); color: #fff; }
.sam-flow__scene:hover { border-color: var(--sam-petrol-d); }

.sam-flow__status {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .9rem 0 1rem;
  min-height: 3em;               /* zwei Zeilen: der Satz wechselt die Laenge */
  font-size: .95rem;
  line-height: 1.5;
}

.sam-flow__sky {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--sam-amber-d);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-night .sam-flow__sky { stroke: var(--sam-muted); }

.sam-flow__clock {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3.1em;
}

/* Unter 768 px 4:3 mit beschnittenen Raendern (slice) -- das Wesentliche
   liegt zwischen x 67 und 733. Ab 768 px das volle Bild, 16:10.          */
.sam-flow__stage { position: relative; }

.sam-flow__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--bs-border-radius-lg);
  background: #c9dbe0;
}
@media (min-width: 768px) {
  .sam-flow__art { aspect-ratio: 16 / 10; }
}

.sam-art__scene { transition: opacity .6s ease; }
.sam-flow[data-scene="balkon"] [data-art-scene="haus"],
.sam-flow[data-scene="haus"] [data-art-scene="balkon"] { opacity: 0; pointer-events: none; }

/* Leitung: feine Spur, darauf die wandernden Punkte (Laenge 0, runde Enden) */
.sam-edge {
  fill: none;
  stroke: #1e2422;
  stroke-opacity: .16;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.is-night .sam-edge { stroke: #fff; stroke-opacity: .14; }

.sam-edge__flow {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 0 13;
  transition: opacity .3s ease, stroke .4s ease;
}
[data-art="sonne"].sam-edge__flow    { stroke: var(--sam-f-sonne); }
[data-art="laden"].sam-edge__flow    { stroke: var(--sam-f-laden); }
[data-art="entladen"].sam-edge__flow { stroke: var(--sam-f-entladen); }
[data-art="netz"].sam-edge__flow     { stroke: var(--sam-f-netz); }

.sam-level { fill: #9db3ab; transition: fill .4s ease; }
.sam-level[data-art="laden"]    { fill: var(--sam-f-laden); }
.sam-level[data-art="entladen"] { fill: var(--sam-f-entladen); }

/* Prozentzahl am Speicher; px sind hier viewBox-Einheiten. */
.sam-pct {
  font: 600 13px/1 var(--bs-body-font-family);
  fill: var(--sam-ink);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.sam-pct--klein { font-size: 10px; }

.sam-led { fill: #c9c4b8; }
.sam-led[data-art="sonne"]    { fill: var(--sam-f-sonne); }
.sam-led[data-art="entladen"] { fill: var(--sam-f-entladen); }
.sam-led[data-art="netz"]     { fill: var(--sam-f-netz); }

/* --- Beschriftungen ------------------------------------------------------
   Nur die Kategorienamen als Links -- was gerade passiert, zeigen Leitungen
   und Speicherfuellung. Unter 768 px eine Zeile Chips unter dem Bild, ab 768 px Pillen an den
   Ankerpunkten (home-energy.js setzt left/top in Prozent und data-align). */
.sam-flow[data-scene="balkon"] [data-only="haus"],
.sam-flow[data-scene="haus"] [data-only="balkon"] { display: none; }

.sam-flow__labels {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}

.sam-node {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .25rem .65rem;
  border: 1px solid var(--sam-line);
  border-radius: 999px;
  background: var(--sam-surface);
  color: var(--sam-ink);
  font-size: .85rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
a.sam-node:hover,
a.sam-node:focus-visible { border-color: var(--sam-petrol); color: var(--sam-petrol); }
a.sam-node:focus-visible { outline: 2px solid var(--sam-petrol); outline-offset: 2px; }

.sam-node__label { font-weight: 600; }
a.sam-node .sam-node__label { text-decoration: underline; text-decoration-color: var(--sam-line); text-underline-offset: .2em; }

@media (min-width: 768px) {
  .sam-flow__labels { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .sam-node {
    position: absolute;
    pointer-events: auto;
    border-color: transparent;
    background: rgba(251, 248, 242, .94);
    box-shadow: 0 1px 2px rgba(12, 24, 34, .18), 0 4px 12px rgba(12, 24, 34, .08);
    transform: translate(-50%, -100%);
    transition: left .6s ease, top .6s ease;
  }
  .sam-node[data-align="r"] { transform: translate(-100%, -100%); }
  .sam-node[data-align="u"] { transform: translate(-50%, 0); }
  /* Ohne Skript gibt es keine Anker: dann als Zeile unter dem Bild. */
  .sam-flow:not(.is-ready) .sam-flow__labels { position: static; display: flex; margin-top: .75rem; }
  .sam-flow:not(.is-ready) .sam-node { position: static; transform: none; }
}

.sam-flow__controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}

.sam-flow__play {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sam-line);
  border-radius: 50%;
  background: var(--sam-sand);
  color: var(--sam-petrol);
  cursor: pointer;
}
.sam-flow__play svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sam-flow__play:hover { border-color: var(--sam-petrol); }

/* Nur die Leiste nimmt Wischgesten an; die Szene selbst scrollt normal.  */
.sam-flow__time {
  flex: 1;
  min-width: 0;
  height: 44px;
  accent-color: var(--sam-petrol);
  touch-action: pan-x;
  cursor: pointer;
}

.sam-flow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  margin: .5rem 0 0;
  padding: 0;
  font-size: .8rem;
  color: var(--sam-muted);
}
.sam-flow__legend li::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .35rem;
  border-radius: 50%;
  vertical-align: .02em;
}
.sam-flow__legend [data-art="sonne"]::before    { background: var(--sam-f-sonne); }
.sam-flow__legend [data-art="laden"]::before    { background: var(--sam-f-laden); }
.sam-flow__legend [data-art="entladen"]::before { background: var(--sam-f-entladen); }
.sam-flow__legend [data-art="netz"]::before     { background: var(--sam-f-netz); }

.sam-flow__note { margin: .35rem 0 0; font-size: .8rem; color: var(--sam-muted); }

@media (prefers-reduced-motion: reduce) {
  .sam-art__scene, .sam-edge__flow, .sam-node { transition: none; }
}

/* --- Einstieg nach Wohnsituation ----------------------------------------- */
.sam-home-paths__grid { display: grid; gap: 1.5rem; }

@media (min-width: 992px) {
  .sam-home-paths__grid { grid-template-columns: 1fr 2fr; }
}

.sam-path {
  background: var(--sam-surface);
  border: 1px solid var(--sam-line);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem;
}
.sam-path--balkon { display: flex; flex-direction: column; align-items: flex-start; }
.sam-path--balkon .btn { margin-top: auto; }
.sam-path p { color: var(--sam-muted); max-width: 60ch; }

.sam-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--sam-line);
  border: 1px solid var(--sam-line);
}

/* Fest 2 x 2: auto-fit ergab bei vier Kacheln drei Spalten und eine Waise. */
@media (min-width: 576px) {
  .sam-tiles { grid-template-columns: 1fr 1fr; }
}

.sam-tile {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--sam-sand);
  color: var(--sam-ink);
  text-decoration: none;
}
.sam-tile:hover, .sam-tile:focus-visible { background: #efe8dc; }
.sam-tile__title {
  display: block;
  font-family: var(--sam-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sam-petrol);
}
.sam-tile__text { display: block; margin-top: .25rem; font-size: .9rem; color: var(--sam-muted); }

/* --- Ratgeber ------------------------------------------------------------ */
.sam-home-guide p { max-width: 62ch; }