/* ============================================================
   Energiehaus (Startseite): Haus aus den Kunden-Entwuerfen,
   Texte/Umschalter/Infokasten als HTML. Masse in Entwurfs-Pixeln
   (1672 x 941) ueber --u, darunter (<= 1080 px) normaler Fluss.
   ============================================================ */
.ehx {
  --t: 0.9s;
  --orange: #f7931e;
  position: relative; overflow: hidden; isolation: isolate; padding: 0;
  background: #bcdcfb; color: var(--ink);
}

/* ---------- Himmel je Tageszeit (Farben aus den Entwuerfen gemessen) ---------- */
.ehx-himmel, .ehx-himmel > div { position: absolute; inset: 0; }
.ehx-himmel { z-index: -1; }
.ehx-himmel > div { opacity: 0; transition: opacity var(--t) ease; }
.ehx[data-modus="mittag"] .ehx-himmel-mittag,
.ehx[data-modus="nacht"] .ehx-himmel-nacht { opacity: 1; }
/* rechte Bildkante als Grundverlauf, linke Kante per Maske darueber */
.ehx-himmel > div::before, .ehx-himmel > div::after { content: ""; position: absolute; inset: 0; }
.ehx-himmel > div::before { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, transparent 62%); }
.ehx-himmel-mittag { background: linear-gradient(180deg, #82c6fd 0%, #8ecbfd 14%, #b2dbfd 38%, #c4e2fc 55%, #dbe8f6 68%, #e0e9f4 100%); }
.ehx-himmel-mittag::before { background: linear-gradient(180deg, #d9ecfd 0%, #cfe7fd 14%, #c3e2fd 38%, #cfe7fc 55%, #e5eff9 68%, #e9eff8 100%); }
.ehx-himmel-mittag::after { background: radial-gradient(circle at 0 0, #fffdf2 0, rgba(255, 253, 240, .85) 6%, rgba(255, 253, 240, 0) 22%); animation: ehx-atmen 7s ease-in-out infinite; }
.ehx-himmel-nacht { background: linear-gradient(180deg, #061f46 0%, #082249 14%, #0b244e 35%, #0c2550 55%, #132d5b 68%, #183261 80%, #163160 100%); }
.ehx-himmel-nacht::before { background: linear-gradient(180deg, #061f46 0%, #09244f 14%, #0b244e 35%, #0f2a58 50%, #183767 66%, #243e6d 80%, #1f3b6c 100%); }

.ehx-sterne { opacity: 0; transition: opacity var(--t) ease; }
.ehx[data-modus="nacht"] .ehx-sterne { opacity: 1; }
.ehx-sterne i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, .8);
  animation: ehx-funkeln 3.4s ease-in-out infinite;
}
@keyframes ehx-funkeln { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ehx-atmen { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ---------- Buehne ---------- */
.ehx-buehne {
  position: relative; max-width: 1672px; margin-inline: auto;
  aspect-ratio: 1672 / 941; container-type: inline-size;
}
.ehx-buehne > * { --u: calc(100cqw / 1672); position: absolute; margin: 0; }

.ehx-kopf { left: calc(72 * var(--u)); top: calc(31 * var(--u)); z-index: 2; }
.ehx-eyebrow {
  display: block; font-family: var(--mono); font-size: max(11px, calc(13 * var(--u)));
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-left: calc(2 * var(--u));
}
.ehx h2 {
  margin-top: calc(6 * var(--u)); max-width: none;
  font-size: calc(56.4 * var(--u)); line-height: .975; letter-spacing: -.02em; font-weight: 600;
  color: var(--ink); transition: color var(--t) ease;
}
.ehx[data-modus="nacht"] h2 { color: #fff; }
.ehx[data-modus="nacht"] .ehx-eyebrow { color: #dfe6f2; }

/* ---------- Umschalter (direkt ueber dem Infokasten, gleiche Breite) ---------- */
.ehx-tabs {
  left: calc(1152 * var(--u)); top: calc(52 * var(--u)); width: calc(469 * var(--u)); height: calc(65 * var(--u));
  z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); padding: calc(6 * var(--u));
  background: #1f2329; border-radius: calc(15 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) rgba(10, 20, 40, .35), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.ehx-tabs button {
  position: relative; display: grid; place-content: center; justify-items: center; gap: calc(8 * var(--u));
  border: 0; background: none; cursor: pointer; color: #fff; border-radius: calc(11 * var(--u));
  font-family: var(--font); transition: color .3s ease;
}
.ehx-tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255, 255, 255, .14);
}
.ehx-tabs button[aria-selected="true"]::before, .ehx-tabs button[aria-selected="true"] + button::before { opacity: 0; }
.ehx-tabs b { font-size: max(12px, calc(17 * var(--u))); font-weight: 600; line-height: 1; }
.ehx-tabs span { font-family: var(--mono); font-size: max(10px, calc(12 * var(--u))); letter-spacing: .06em; color: #c9cdd3; line-height: 1; }
.ehx-tabs button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, #ffcf86 0%, #ffb160 55%, #ff9c42 100%);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #f39234, 0 0 calc(18 * var(--u)) rgba(255, 150, 60, .55);
  transition: opacity .45s var(--ease);
}
.ehx-tabs button { z-index: 0; }
.ehx-tabs button[aria-selected="true"] { color: #1d1a16; }
.ehx-tabs button[aria-selected="true"] span { color: #3b2a18; }
.ehx-tabs button[aria-selected="true"]::after { opacity: 1; }
.ehx-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ehx-tabs button:not([aria-selected="true"]):hover b { color: var(--accent-bright); }

/* ---------- Haus ---------- */
.ehx-haus { left: calc(8 * var(--u)); top: calc(140 * var(--u)); width: calc(1136 * var(--u)); aspect-ratio: 1136 / 792; z-index: 1; }
/* ehx-bild = Koordinatensystem der viewBox (--vbw Entwurfs-Pixel breit); Etiketten skalieren darueber */
.ehx-bild { position: absolute; inset: 0; container-type: inline-size; }
.ehx-bild > [data-fuer], .ehx-bild picture img, .ehx-linien, .ehx-glut { position: absolute; inset: 0; width: 100%; height: 100%; }
.ehx-bild > [data-fuer] { opacity: 0; transition: opacity var(--t) ease; }
.ehx[data-modus="mittag"] .ehx-bild > [data-fuer="mittag"],
.ehx[data-modus="nacht"] .ehx-bild > [data-fuer="nacht"] { opacity: 1; }
.ehx-linien { overflow: visible; }
.ehx-linien path { fill: none; stroke: none; }

/* Stimmung im Bild: die Stehlampe glimmt in der Nacht */
.ehx-glut { pointer-events: none; opacity: 0; transition: opacity var(--t) ease; mix-blend-mode: screen; }
.ehx-glut-lampe { background: radial-gradient(circle at 78.4% 34.3%, rgba(255, 210, 130, .55) 0, rgba(255, 190, 110, .2) 3.5%, rgba(255, 190, 110, 0) 8%); }
.ehx[data-modus="nacht"] .ehx-glut-lampe { opacity: 1; animation: ehx-atmen 4.2s ease-in-out infinite; }

/* Teilchen und Hotspots */
.ehx-teilchen > g { opacity: 0; transition: opacity .6s ease; }
.ehx-teilchen > g.an { opacity: 1; }
.ehx-teilchen circle { fill: #fff4e2; filter: drop-shadow(0 0 3px #ff9a36) drop-shadow(0 0 7px rgba(255, 122, 26, .85)); }
.ehx-teilchen .schwach circle { fill: #ffd9a8; }
.ehx-hotspots circle {
  fill: none; stroke: #ff8a1f; stroke-width: 2.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.ehx-hotspots circle.an { animation: ehx-puls 2.2s ease-out infinite; }
@keyframes ehx-puls { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.4); } }

/* ---------- Infokasten ---------- */
.ehx-box {
  left: calc(1152 * var(--u)); top: calc(132 * var(--u)); width: calc(469 * var(--u)); min-height: calc(654 * var(--u));
  z-index: 2; padding: calc(28 * var(--u)) calc(35 * var(--u)) calc(30 * var(--u));
  background: rgba(24, 28, 34, .95); color: #fff; border-radius: calc(24 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(10, 20, 40, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: flex; flex-direction: column;
}
.ehx[data-modus="nacht"] .ehx-box { background: rgba(14, 20, 28, .95); }
.ehx-box h3 { font-size: max(19px, calc(32.5 * var(--u))); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.ehx-box-unter { margin-top: calc(3 * var(--u)); font-size: max(13px, calc(20 * var(--u))); font-weight: 500; color: var(--orange); }
/* Verbrauchsregler -> passende Anlage */
.ehx-regler { --p: 28.57%; margin-top: calc(14 * var(--u)); }
.ehx-regler label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: max(13px, calc(17 * var(--u))); color: #c9ced5; }
.ehx-regler output { font-size: max(15px, calc(20 * var(--u))); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ehx-regler input {
  display: block; width: 100%; height: max(32px, calc(34 * var(--u))); margin: calc(4 * var(--u)) 0 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer; touch-action: pan-y;
}
.ehx-regler input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #f7901f, #ffb257) 0 / var(--p) 100% no-repeat, #444b55; }
.ehx-regler input::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #f7901f, #ffb257) 0 / var(--p) 100% no-repeat, #444b55; }
.ehx-regler input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #ffb15e; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transition: transform .2s ease;
}
.ehx-regler input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ffb15e; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.ehx-regler input:active::-webkit-slider-thumb { transform: scale(1.15); }
.ehx-regler input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.ehx-regler p { font-size: max(12px, calc(16 * var(--u))); color: #c9ced5; }
.ehx-regler p b { font-weight: 600; color: #fff; white-space: nowrap; }

.ehx-solar {
  display: flex; align-items: center; gap: calc(26 * var(--u));
  margin-top: calc(17 * var(--u)); padding-block: calc(13 * var(--u)) calc(25 * var(--u));
  border-block: 1px solid rgba(255, 255, 255, .13);
}
.ehx-solar-icon { position: relative; width: calc(62 * var(--u)); height: calc(62 * var(--u)); flex: none; margin-left: calc(-6 * var(--u)); }
.ehx-solar-icon i { position: absolute; inset: 0; font-size: calc(68 * var(--u)); color: var(--orange); transition: opacity .5s ease, transform .6s var(--ease); }
.ehx-solar-icon .ph-moon { color: #b9c2d3; opacity: 0; transform: rotate(-30deg) scale(.7); }
.ehx[data-modus="nacht"] .ehx-solar-icon .ph-sun { opacity: 0; transform: rotate(60deg) scale(.7); }
.ehx[data-modus="nacht"] .ehx-solar-icon .ph-moon { opacity: 1; transform: none; }
.ehx-solar p { line-height: 1; }
.ehx-solar b { font-size: max(32px, calc(56 * var(--u))); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ehx-solar span { margin-left: calc(6 * var(--u)); font-size: max(18px, calc(31 * var(--u))); font-weight: 500; color: #e7eaee; }
.ehx-solar small { display: block; margin-top: calc(3 * var(--u)); font-size: max(12px, calc(17 * var(--u))); color: #b4bcc6; }

.ehx-werte > div {
  display: grid; grid-template-columns: 1fr calc(146 * var(--u)); align-items: center;
  min-height: calc(85 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.ehx-werte > div:nth-child(2) { min-height: calc(90 * var(--u)); }
.ehx-werte > div:nth-child(3) { min-height: calc(80 * var(--u)); }
.ehx-werte > div:nth-child(4) { min-height: calc(82 * var(--u)); }
.ehx-werte dt { display: flex; align-items: center; gap: calc(30 * var(--u)); font-size: max(13px, calc(18.5 * var(--u))); font-weight: 500; }
.ehx-werte dt > .ph, .ehx-mast { flex: none; text-align: center; width: calc(38 * var(--u)); font-size: calc(38 * var(--u)); color: var(--orange); }
.ehx-mast { height: calc(38 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ehx-werte dt small { display: block; margin-top: calc(5 * var(--u)); font-size: max(11px, calc(15 * var(--u))); font-weight: 400; color: #b4bcc6; }
.ehx-balken { position: relative; display: block; width: calc(112 * var(--u)); height: calc(10 * var(--u)); margin-top: calc(9 * var(--u)); border-radius: 99px; background: #444b55; overflow: hidden; }
.ehx-balken::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit;
  background: linear-gradient(90deg, #f7901f, #ffb257); transition: width 1s var(--ease);
}
/* Laufnummer vor der Zeilenbeschriftung (1 Haushalt ... 4 Netz); gehoert zur Karte, nicht zu den editierbaren Texten */
.ehx-nr { flex: none; width: 1.2em; margin-right: calc(-30 * var(--u) + 2px); font-size: calc(38 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-align: left; font-variant-numeric: tabular-nums; color: #fff; }
.ehx--real .ehx-nr { margin-right: calc(-28 * var(--u) + 2px); font-size: calc(44 * var(--u)); }
.ehx-pfeil { margin-left: calc(4 * var(--u)); transition: opacity .4s ease; }
.ehx-pfeil[data-netz-pfeil=""] { opacity: 0; }
.ehx-werte dd { font-size: max(12px, calc(19 * var(--u))); color: #e7eaee; line-height: 1; }
.ehx-werte dd b { font-size: max(17px, calc(25 * var(--u))); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.ehx-werte dd small { display: block; margin-top: calc(9 * var(--u)); font-size: max(11px, calc(15 * var(--u))); color: #b4bcc6; }
.ehx-fuss { margin-top: calc(16 * var(--u)); font-size: max(11px, calc(15.5 * var(--u))); line-height: 1.5; color: #b4bcc6; }

/* ---------- Legende + Link ---------- */
.ehx-legende {
  left: calc(66 * var(--u)); top: calc(873 * var(--u)); z-index: 2;
  display: flex; align-items: center; gap: calc(17 * var(--u)); font-size: max(12px, calc(16 * var(--u))); color: #2c3440;
  transition: color var(--t) ease;
}
.ehx-legende span {
  position: relative; width: calc(34 * var(--u)); height: 2px; background: #ff8a1f;
  box-shadow: 0 0 6px rgba(255, 138, 31, .6);
}
.ehx-legende span::before, .ehx-legende span::after {
  content: ""; position: absolute; top: 50%; width: calc(9 * var(--u)); height: calc(9 * var(--u));
  margin-top: calc(-4.5 * var(--u)); border-radius: 50%; background: #ff8a1f;
}
.ehx-legende span::before { left: 0; } .ehx-legende span::after { right: 0; }
.ehx-link {
  right: calc(58 * var(--u)); top: calc(870 * var(--u)); z-index: 2;
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  font-size: max(14px, calc(18 * var(--u))); font-weight: 600; color: var(--accent); text-decoration: none;
}
.ehx-link .ph { font-size: 1.25em; transition: transform .3s var(--ease); }
.ehx-link:hover .ph { transform: translateX(4px); }
.ehx[data-modus="nacht"] .ehx-legende { color: #dfe6f2; }
.ehx[data-modus="nacht"] .ehx-link { color: #ff8b4d; }

/* ---------- Tablet / Mobil: normaler Fluss ---------- */
@media (max-width: 1080px) {
  .ehx-buehne {
    aspect-ratio: auto; display: flex; flex-direction: column;
    padding: 64px clamp(20px, 4vw, 48px) 56px;
  }
  .ehx-buehne > * { --u: 1px; position: relative; inset: auto; }
  .ehx-kopf { order: 1; }
  /* Umschalter steht direkt ueber dem Infokasten (gleiche order, DOM-Reihenfolge entscheidet) */
  .ehx-tabs { order: 5; width: 100%; max-width: 560px; height: 64px; margin: 16px auto 0; left: auto; top: auto; }
  .ehx-haus {
    order: 4; width: calc(100% + 24px); max-width: 900px; margin: 18px auto 0; left: auto;
    /* Himmel im Bild passt hier nicht mehr exakt zum Verlauf dahinter: Raender staerker ausblenden */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 92%, transparent);
    mask-composite: intersect;
  }
  .ehx-box { order: 5; width: 100%; max-width: 560px; min-height: 0; margin: 10px auto 0; }
  .ehx-regler input { height: 44px; }
  .ehx-regler input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .ehx-regler input::-moz-range-thumb { width: 22px; height: 22px; }
  .ehx-fuss { margin-top: 18px; }
  .ehx-legende { order: 6; margin-top: 22px; }
  .ehx-link { order: 7; margin-top: 12px; align-self: flex-start; right: auto; }
  .ehx h2 { font-size: clamp(36px, 7vw, 58px); }
}
@media (max-width: 560px) {
  .ehx-buehne { padding-top: 56px; }
  .ehx-tabs { max-width: none; height: 60px; }
  .ehx-haus { width: calc(100% + 2 * clamp(20px, 4vw, 48px)); margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); max-width: none; }
  .ehx-box { --u: .84px; padding: 22px 20px 20px; }
  .ehx-werte > div { grid-template-columns: 1fr 118px; }
  .ehx-werte dt { gap: 16px; }
  .ehx-nr, .ehx--real .ehx-nr { margin-right: -14px; }
  .ehx-balken { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .ehx *, .ehx *::before, .ehx *::after { animation: none !important; }
  .ehx-hotspots circle.an { opacity: .8; transform: scale(1.3); }
}

/* ============================================================
   Etiketten am Haus (beide Varianten): HTML-Pillen liegen deckungsgleich
   ueber den im Bild eingebrannten - Klick zeigt die Erklaerung im Infokasten.
   Position/Groesse als Inline-% der viewBox, Schrift in Entwurfs-Pixeln (--hu).
   ============================================================ */
.ehx-etikett {
  --hu: calc(100cqw / var(--vbw));
  position: absolute; z-index: 3; box-sizing: border-box; translate: -50% -50%; padding: 0 calc(6 * var(--hu));
  display: grid; place-items: center; white-space: nowrap; cursor: pointer;
  font: 600 max(8px, calc(15.5 * var(--hu))) / 1 var(--font); letter-spacing: 0; color: #f4f5f6;
  background: #22262b; border: 1px solid rgba(214, 140, 70, .5); border-radius: calc(9 * var(--hu));
  box-shadow: 0 calc(3 * var(--hu)) calc(8 * var(--hu)) rgba(10, 20, 40, .18);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.ehx-etikett:hover { border-color: var(--orange); transform: translateY(-1px); }
.ehx-etikett:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ehx-etikett[aria-expanded="true"] { background: linear-gradient(180deg, #ffc27d, #ffa74f); color: #1d1a16; border-color: #f39234; }

/* Auswahl-Block im Infokasten */
.ehx-auswahl { position: relative; padding-block: calc(16 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .13); }
.ehx-auswahl:not([hidden]) { animation: ehx-rein .35s var(--ease); }
@keyframes ehx-rein { from { opacity: 0; transform: translateY(6px); } }
.ehx-auswahl-kopf {
  padding-right: calc(40 * var(--u)); font-family: var(--mono); font-size: max(11px, calc(14 * var(--u)));
  letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
}
.ehx-auswahl-zu {
  position: absolute; right: calc(-8 * var(--u)); top: calc(8 * var(--u)); display: grid; place-items: center;
  width: max(32px, calc(34 * var(--u))); height: max(32px, calc(34 * var(--u))); border: 0; border-radius: 50%;
  background: none; color: #fff; font-size: max(16px, calc(22 * var(--u))); cursor: pointer;
}
.ehx-auswahl-zu:hover { background: rgba(255, 255, 255, .08); }
.ehx-auswahl-zu:focus-visible, .ehx-auswahl-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ehx-auswahl-satz { margin-top: calc(10 * var(--u)); font-size: max(15px, calc(21.5 * var(--u))); line-height: 1.3; letter-spacing: -.01em; color: #e7eaee; }
.ehx-auswahl-satz b { font-weight: 600; color: #fff; }
.ehx-auswahl-link {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u));
  font-size: max(14px, calc(18 * var(--u))); font-weight: 500; color: #ff9a3c; text-decoration: none;
}
.ehx-auswahl-link .ph { font-size: 1.15em; transition: transform .3s var(--ease); }
.ehx-auswahl-link:hover .ph { transform: translateX(4px); }
.ehx-werte small:empty { display: none; }
/* ============================================================
   Variante "real": Foto-Rendering fuellt die ganze Sektion (Hintergrund aus
   tools/energiehaus/real_hintergrund.py), alle Texte liegen als HTML darueber.
   Masse aus den realistischen Entwuerfen (1672 x 941).
   ============================================================ */
.ehx--real .ehx-buehne { max-width: none; }
.ehx--real .ehx-haus { left: 0; top: 0; width: 100%; aspect-ratio: 1672 / 941; z-index: 1; }
.ehx--real .ehx-bild picture { position: absolute; inset: 0; }
.ehx--real .ehx-bild picture img { object-fit: cover; }
.ehx--real .ehx-etikett {
  font-size: max(8px, calc(15 * var(--hu))); font-weight: 500; background: #202428; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: calc(8 * var(--hu)); box-shadow: 0 calc(2 * var(--hu)) calc(8 * var(--hu)) rgba(0, 0, 0, .3);
}
.ehx--real .ehx-etikett:hover { border-color: rgba(255, 170, 90, .9); }
.ehx--real .ehx-etikett[aria-expanded="true"] { background: linear-gradient(180deg, #ffb96e, #ffa452); color: #1d1a16; border-color: #f7a04c; }

/* Bild ist sauber (ohne Beschriftung): Spur der Stromwege, Punkte und Fuehrungslinien zeichnet das SVG.
   Aktive Wege (JS: path.an) leuchten, inaktive bleiben als Hauch sichtbar. */
.ehx--real .ehx-linien path {
  stroke: #ffa24d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .18; transition: opacity .8s ease;
}
.ehx--real .ehx-linien path.an { opacity: .75; filter: drop-shadow(0 0 2px rgba(255, 138, 31, .6)); }
/* Glanz: ein weicher heller Abschnitt gleitet langsam in Flussrichtung ueber die Linie (JS klont die Pfade, pathLength=100) */
.ehx--real .ehx-linien path.glanz {
  stroke: #fff3e0; stroke-width: 2.6; stroke-dasharray: 22 78; opacity: 0; filter: blur(.6px) drop-shadow(0 0 4px rgba(255, 150, 50, .9));
  animation: ehx-fluss 4.5s linear infinite;
}
.ehx--real .ehx-linien path.glanz.an { opacity: .85; }
.ehx--real .ehx-linien path.glanz.rueck { animation-direction: reverse; }
.ehx--real .ehx-linien path.glanz.schwach { opacity: .35; animation-duration: 7s; }
@keyframes ehx-fluss { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ehx--real .ehx-linien path.glanz { display: none; } }
.ehx-fuehrung { filter: drop-shadow(0 0 1px rgba(10, 14, 20, .55)); }
.ehx-fuehrung line { stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; }
.ehx-knoten circle { fill: #ff9a3c; }
.ehx-knoten .ring { fill: rgba(255, 154, 60, .22); stroke: #ffb26b; stroke-width: 1.4; }

/* Himmel hinter dem Bild (nur Mobil sichtbar): oben = Bildoberkante, darunter Farbe der Ausschnitt-Oberkante */
.ehx--real .ehx-himmel > div::before, .ehx--real .ehx-himmel > div::after { content: none; }
.ehx--real .ehx-himmel-mittag { background: linear-gradient(180deg, #65a7ee 0%, #6babf0 10%, #7cb5f3 22%, #8bbdf4 30%, #c7ddf2 60%, #dfe7ef 100%); }
.ehx--real .ehx-himmel-nacht { background: linear-gradient(180deg, #000c28 0%, #000d2b 10%, #010f2f 22%, #021031 30%, #0b1424 60%, #121820 100%); }

@media (min-width: 1081px) {
  /* Texte direkt auf dem Foto (Farben aus den Entwuerfen gemessen) */
  .ehx--real .ehx-eyebrow { color: #f08a2a; }
  .ehx--real h2 { color: #0e1014; }
  /* Legende steht auf Hecke/Blueten: dunkle Pille wie der Link rechts */
  .ehx--real .ehx-legende {
    top: calc(856 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: 99px;
    color: #eef0f4; background: rgba(28, 31, 35, .88); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .25);
  }
  /* Mittag: Himmel ist mittelblau, Orange waere zu schwach */
  .ehx--real[data-modus="mittag"] .ehx-eyebrow { color: #13233d; }
  /* Link steht auf hellem Pflaster/Rasen: dunkle Pille wie Umschalter und Etiketten */
  .ehx--real .ehx-link {
    top: calc(856 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: 99px;
    color: #ffa24d; background: rgba(28, 31, 35, .88); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .25);
  }
  .ehx--real[data-modus="nacht"] .ehx-legende { color: #c0c8d6; }
  .ehx--real .ehx-tabs { left: calc(1151 * var(--u)); width: calc(467 * var(--u)); background: rgba(28, 31, 35, .92); }
  .ehx--real[data-modus="nacht"] .ehx-tabs { background: rgba(16, 22, 32, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

  /* Infokasten nach dem realistischen Entwurf: kompakter, Werte-Spalte rechts */
  .ehx--real .ehx-box {
    left: calc(1151 * var(--u)); top: calc(132 * var(--u)); width: calc(467 * var(--u)); min-height: 0;
    padding: calc(26 * var(--u)) calc(35 * var(--u)) calc(22 * var(--u));
    background: rgba(24, 26, 29, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);
  }
  .ehx--real[data-modus="nacht"] .ehx-box { background: rgba(14, 19, 26, .9); }
  .ehx--real .ehx-box h3 { font-size: calc(33 * var(--u)); }
  .ehx--real .ehx-box-unter { margin-top: calc(4 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 400; }
  .ehx--real .ehx-solar { gap: calc(30 * var(--u)); margin-top: calc(10 * var(--u)); padding-block: calc(9 * var(--u)) calc(12 * var(--u)); }
  .ehx--real .ehx-solar-icon { width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin-left: calc(4 * var(--u)); }
  .ehx--real .ehx-solar-icon i { font-size: calc(54 * var(--u)); }
  .ehx--real .ehx-solar-icon .ph-sun { color: #e9ecf0; }
  .ehx--real .ehx-solar b { font-size: calc(35 * var(--u)); }
  .ehx--real .ehx-solar span { margin-left: calc(4 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 400; }
  .ehx--real .ehx-solar small { margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); color: #c9ced5; }
  .ehx--real .ehx-werte > div { grid-template-columns: 1fr calc(110 * var(--u)); min-height: calc(60 * var(--u)); }
  .ehx--real .ehx-werte > div:nth-child(2) { min-height: calc(80 * var(--u)); }
  .ehx--real .ehx-werte > div:nth-child(3) { min-height: calc(60 * var(--u)); }
  .ehx--real .ehx-werte > div:nth-child(4) { min-height: calc(80 * var(--u)); }
  .ehx--real .ehx-werte dt { gap: calc(28 * var(--u)); padding-left: calc(4 * var(--u)); font-size: calc(18.5 * var(--u)); }
  .ehx--real .ehx-werte dt > .ph, .ehx--real .ehx-mast { width: calc(44 * var(--u)); font-size: calc(44 * var(--u)); }
  .ehx--real .ehx-mast { height: calc(40 * var(--u)); }
  .ehx--real .ehx-werte dt small { margin-top: calc(3 * var(--u)); }
  /* Netz: Label steht im Entwurf auf Hoehe des Werts, nicht mittig zur Zeile */
  .ehx--real .ehx-werte > div:last-child { align-items: start; padding-top: calc(14 * var(--u)); }
  .ehx--real .ehx-werte dt small { font-size: calc(16 * var(--u)); color: #c9ced5; }
  .ehx--real .ehx-auswahl { padding-bottom: calc(14 * var(--u)); }
  .ehx--real .ehx-auswahl-satz { margin-top: calc(7 * var(--u)); font-size: calc(21 * var(--u)); }
  .ehx--real .ehx-auswahl-satz b { font-weight: 500; }
  .ehx--real .ehx-auswahl-link { margin-top: calc(5 * var(--u)); }
  .ehx--real .ehx-balken { width: calc(171 * var(--u)); height: calc(9 * var(--u)); margin-top: calc(6 * var(--u)); }
  .ehx--real .ehx-werte dd { font-size: calc(22 * var(--u)); }
  .ehx--real .ehx-werte dd b { font-size: calc(26 * var(--u)); }
  .ehx--real .ehx-werte dd small { margin-top: calc(7 * var(--u)); font-size: calc(16 * var(--u)); color: #c9ced5; white-space: nowrap; }
  .ehx--real .ehx-werte > div:last-child { border-bottom: 0; }
  .ehx--real .ehx-pfeil { display: none; }
  .ehx--real .ehx-fuss { margin-top: 0; padding-top: calc(14 * var(--u)); border-top: 1px solid rgba(255, 255, 255, .13); font-size: calc(16 * var(--u)); color: #c9ced5; }
}

/* Realistisch, Tablet/Mobil: Himmelverlauf als Grund, Foto nur als Ausschnitt ums Haus */
@media (max-width: 1080px) {
  /* Heller Einstieg: oben Seitenfarbe, der Himmelverlauf blendet erst unter dem Textblock ein */
  .ehx--real { background: var(--paper); }
  .ehx--real .ehx-himmel > div {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0, #000 40%);
  }
  .ehx--real .ehx-haus {
    order: 4; left: auto; top: auto; aspect-ratio: 1111.1 / 602.7; overflow: hidden; border-radius: 0;
    width: calc(100% + 2 * clamp(20px, 4vw, 48px)); max-width: none; margin: 18px calc(-1 * clamp(20px, 4vw, 48px)) 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  }
  /* ehx-bild behaelt das volle Entwurfsformat, ehx-haus zeigt davon MOBIL = (39.8, 312.5, 1150.9, 915.2) = geometrie.real.mobil */
  .ehx--real .ehx-bild { inset: auto; left: calc(-39.8 / 1111.1 * 100%); top: calc(-312.5 / 602.7 * 100%); width: calc(1672 / 1111.1 * 100%); height: calc(941 / 602.7 * 100%); }
  .ehx--real .ehx-bild picture { inset: auto; left: calc(39.8 / 1672 * 100%); top: calc(312.5 / 941 * 100%); width: calc(1111.1 / 1672 * 100%); height: calc(602.7 / 941 * 100%); }
}

/* ============================================================
   Heller Fade oben (Variante "real"): die Sektion laeuft aus der Seitenfarbe
   ins Foto, statt mit einer harten Kante zu beginnen. Liegt ueber dem Bild,
   aber unter den Etiketten (z-index 3) und dem Infokasten.
   ============================================================ */
@media (min-width: 1081px) {
  .ehx--real .ehx-haus::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg,
      #f5f5f3 0%, rgba(245, 245, 243, .96) 14%, rgba(245, 245, 243, .82) 30%,
      rgba(245, 245, 243, .5) 52%, rgba(245, 245, 243, .2) 74%, rgba(245, 245, 243, 0) 100%);
  }
  /* Nacht: das Foto ist sehr dunkel, ein zu starker Fade wuerde die Sektion oben ausbleichen */
  .ehx--real[data-modus="nacht"] .ehx-haus::after { height: 34%; opacity: .88; }
}

/* ============================================================
   Etikett angeklickt: der ganze Kasten zeigt nur noch die Komponente
   (Name, Produktbild bzw. Satz, Button). Werte, Regler und Fussnote sind weg.
   ============================================================ */
.ehx-hat-auswahl .ehx-box > :not(.ehx-auswahl-live) { display: none; }
.ehx-hat-auswahl .ehx-auswahl-live { flex: 1; display: flex; flex-direction: column; }
.ehx-hat-auswahl .ehx-auswahl { flex: 1; display: flex; flex-direction: column; padding: 0; border: 0; }
.ehx-hat-auswahl .ehx-auswahl-kopf { padding-top: calc(4 * var(--u)); }
.ehx-hat-auswahl .ehx-auswahl-zu { top: calc(-8 * var(--u)); }
.ehx-auswahl-bild {
  display: block; flex: 1; width: 100%; min-height: 0; max-height: calc(470 * var(--u)); aspect-ratio: 800 / 840;
  margin-top: calc(16 * var(--u)); object-fit: cover; background: #eceae6; border-radius: calc(16 * var(--u));
}
.ehx-auswahl-bild[hidden] { display: none; }
.ehx-hat-auswahl .ehx-auswahl-link {
  align-self: stretch; justify-content: center; margin-top: calc(18 * var(--u)); padding: calc(15 * var(--u)) calc(20 * var(--u));
  border-radius: 999px; background: var(--orange); color: #1d1a16; font-weight: 600;
  transition: background-color .25s ease;
}
.ehx-hat-auswahl .ehx-auswahl-link:hover { background: #ffb066; }
.ehx-hat-auswahl .ehx-auswahl-satz:not([hidden]) + [hidden] + .ehx-auswahl-link { margin-top: auto; }
@media (max-width: 1080px) {
  .ehx-auswahl-bild { flex: none; max-height: 360px; margin-inline: auto; }
  .ehx-hat-auswahl .ehx-auswahl-link { padding: 13px 18px; }
  .ehx-hat-auswahl .ehx-box { min-height: 0 !important; } /* mobil darf der Kasten schrumpfen */
}

/* Kopfbereich der realen Variante steht durch den hellen Fade immer auf heller Flaeche -
   deshalb dort auch nachts dunkle Schrift (ueberschreibt die Nacht-Regeln oben). */
.ehx--real[data-modus] h2 { color: #0e1014; }
.ehx--real[data-modus] .ehx-eyebrow { color: #c74c09; }


/* ---------- Passt in ein Bildschirmfenster (Desktop, Variante "real") ----------
   Sektion = min(Bildhoehe, Fenster - Navigation). Zwei Ebenen:
   - Bildebene (.ehx-bild: Foto, Linien, Punkte, Etiketten) bleibt randlos volle Breite,
     --u aus der Breite, und wird nur vertikal beschnitten: zuerst unten Rasen bis knapp
     unter den Netzanschluss (Entwurfs-y 920), danach oben Himmel.
   - UI-Ebene (Kopf, Umschalter, Kasten, Legende, Link) haengt an den Sektionsecken und
     rechnet mit --u = min(Breite/1672, Hoehe/941), passt also immer komplett hinein.
   Untergrenze 756/941: flacher wuerde der Kopf aufs Dach rutschen (Dach ab Entwurfs-y ~310). */
@media (min-width: 1081px) {
  .ehx--real { container-type: inline-size; }
  .ehx--real .ehx-buehne {
    container-type: size; aspect-ratio: auto;
    height: max(calc(100cqw * 756 / 1672), min(calc(100cqw * 941 / 1672), calc(100svh - var(--nav-h))));
  }
  .ehx--real .ehx-haus { top: 0; height: 100%; aspect-ratio: auto; overflow: hidden; }
  .ehx--real .ehx-bild { inset: auto; left: 0; width: 100%; height: calc(941 * var(--u)); top: min(0px, calc(100cqh - 920 * var(--u))); }
  .ehx--real :is(.ehx-kopf, .ehx-tabs, .ehx-box, .ehx-legende, .ehx-link) { --u: min(calc(100cqw / 1672), calc(100cqh / 941)); }
  .ehx--real :is(.ehx-tabs, .ehx-box) { left: auto; right: calc(54 * var(--u)); }
  .ehx--real :is(.ehx-legende, .ehx-link) { top: calc(100cqh - 85 * var(--u)); }
}

/* Zeilen werden je Tageszeit nach Priorität sortiert (js/energiehaus.js) */
.ehx-werte { display: flex; flex-direction: column; }
.ehx-werte > div[data-zeile] { border-bottom: 1px solid rgba(255, 255, 255, .13) !important; }
.ehx-werte > div.ist-letzte { border-bottom: 0 !important; }