/* Hero-Szene der Startseite (#94). Wand und Platte aus CSS, darauf die freigestellten Objekte, im gestanzten Bildschirm die
   Galerie als echtes HTML. Holz- und Wandfarben stehen bewusst außerhalb der Farbtabelle (Ausnahme nur für diese Datei,
   Spec #64). Alle Lagen in % der Szene, je Bild gemessen. Darkmode ohne JavaScript: Das Kästchen steht vor Kopf und Inhalt,
   die dunklen Bilder stehen nur in Regeln für den eingeschalteten Zustand und laden deshalb erst dann. */

.abend-schalter { position: absolute; top: 1.25rem; right: 1rem; width: 1px; height: 1px; opacity: 0; }

/* Kopf auf der Wand: Die Farbe ist der obere Rand des Wandverlaufs, der Übergang bleibt unsichtbar */
.kopf { background: var(--wand-oben); color: var(--wand-text); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; padding: 0.625rem 2rem; }
.kopf-marke { display: block; line-height: 0; background: center / contain no-repeat; }
.kopf-marke img { width: 160px; height: auto; }
.kopf-navigation { margin-left: auto; }
.kopf-navigation ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.kopf-navigation a, .abend-knopf { color: var(--wand-text); font-weight: 500; }
.kopf-navigation a:hover { color: var(--wand-text); }
.kopf :focus-visible { outline-color: #d0452f; }
.abend-knopf { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; cursor: pointer; }
.abend-knopf::before { content: ""; width: 0.9rem; height: 0.9rem; border: 2px solid var(--wand-text); border-radius: 2px; }
.abend-schalter:checked ~ .kopf .abend-knopf::before { background: var(--wand-text); }
.abend-schalter:focus-visible ~ .kopf .abend-knopf { outline: 3px solid #d0452f; outline-offset: 2px; }

.buehne { position: relative; overflow: hidden; background: var(--wand); color: var(--wand-text); }
.buehne-text { position: relative; z-index: 2; padding: 0.5rem 2rem 0; text-align: center; }
.buehne h1 { font-size: 2.75rem; line-height: 1.08; margin: 0 0 0.625rem; text-wrap: balance; }
.unterzeile { font-size: 1.25rem; line-height: 1.3; margin: 0 0 1rem; }
.buehne-text .knopf {
  background: #d0452f;
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  padding: 0.6875rem 1.25rem;
}
.buehne-text .knopf:hover { background: #d0452f; color: #ffffff; text-decoration: underline; }

/* Szene: etwa 70 % Breite, höchstens 900 px; Wand und Platte laufen über die volle Breite */
.szene {
  position: relative;
  width: min(900px, 70%);
  margin: calc(min(900px, 70vw) * -0.086) auto 0;
  aspect-ratio: var(--breite) / var(--hoehe);
}
.szene > * { position: absolute; }
.platte, .stirn { left: -200vw; right: -200vw; }
.platte {
  top: var(--oberkante);
  height: calc(var(--vorderkante) - var(--oberkante));
  background: url("bilder/hero/holz.svg") 0 0 / 2400px auto, var(--licht), var(--holz);
}
.stirn {
  top: var(--vorderkante);
  height: calc(100% - var(--vorderkante) + 400px);
  background: url("bilder/hero/holz.svg") 0 0 / 2400px auto, var(--stirn);
}
.schatten {
  z-index: 1;
  left: var(--links);
  width: calc(var(--rechts) - var(--links));
  top: calc(var(--unten) - 1.5%);
  height: 3%;
  background: radial-gradient(closest-side, var(--schattenfarbe), transparent);
  filter: blur(5px);
}
.s1 { --links: 5.6%; --rechts: 18%; --unten: 80.4%; }
.s2 { --links: 38.4%; --rechts: 60.4%; --unten: 84.05%; }
.s3 { --links: 77.2%; --rechts: 88%; --unten: 83.57%; }
.s4 { --links: 91.2%; --rechts: 98.4%; --unten: 88.67%; }
.s5, .s6 { display: none; }

/* Die Objekte liegen über Bildschirm und Handy, Klicks gehen durch die gestanzten Flächen hindurch */
.objekte { inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; background: center / 100% 100% no-repeat; }
.objekte img { display: block; width: 100%; height: 100%; max-width: none; }

/* Das Handy zeigt das aktuelle Bild in Handybreite, galerie.js wechselt es mit. Auf schmalen Bildschirmen ist die
   Galerie selbst im Handy, dann entfällt es. */
.handy { z-index: 2; overflow: hidden; left: var(--hl); top: var(--ht); width: var(--hw); height: var(--hh); background: #ffffff; }
.handy img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Galerie im Bildschirm */
.galerie-bilder {
  z-index: 2;
  left: var(--ml);
  top: var(--mt);
  width: var(--mw);
  height: var(--mh);
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.galerie-bilder::-webkit-scrollbar { display: none; }
.galerie-bilder:focus-visible, .galerie-bilder a:focus-visible { outline-offset: -3px; }
.galerie-bilder > li { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.galerie-bilder a, .galerie-bilder picture { display: block; height: 100%; line-height: 0; }
/* Der hochformatige Energiebericht zeigt den Kopf seiner ersten Seite, voll beim Anklicken */
.galerie-bilder img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: no-preference) {
  .galerie-bilder { scroll-behavior: smooth; }
}

/* Punkte mittig unten im Bildschirm auf heller Fläche: je Bild ein Link, 24 px Trefferfläche um einen kleinen Kreis */
.galerie-punkte {
  z-index: 2;
  left: calc(var(--ml) + var(--mw) / 2);
  top: calc(var(--mt) + var(--mh));
  display: flex;
  margin: 0;
  padding: 0 0.25rem;
  list-style: none;
  background: rgb(255 255 255 / 0.9);
  border-radius: 0.75rem 0.75rem 0 0;
  transform: translate(-50%, -100%);
}
.galerie-punkte a { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; }
.galerie-punkte a::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px #0d2033;
}
.galerie-punkte a[aria-current="true"]::before { background: #0d2033; }
.galerie-punkte a:focus-visible { outline: 3px solid #d0452f; outline-offset: -3px; }
.punkt-text, .galerie-stand { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }

/* Steuerleiste unter der Szene */
.galerie-leiste { position: relative; z-index: 4; background: #0d2033; color: #ffffff; text-align: center; }
.galerie-steuerung { display: flex; justify-content: center; align-items: stretch; }
.galerie-marken { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.galerie-marken a, .galerie-knopf {
  display: block;
  min-height: 2.75rem;
  padding: 0.5625rem 1.25rem;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.galerie-knopf { font-weight: 700; }
.galerie-marken a[aria-current="true"] { box-shadow: inset 0 -3px #e8b100; }
.galerie-marken a:hover, .galerie-knopf:hover { color: #e8b100; }
.galerie-leiste :focus-visible { outline: 3px solid #e8b100; outline-offset: -3px; }

/* Bild in voller Größe auf der Seite (nur mit JavaScript, sonst öffnet der Link das Bild) */
.gross { width: min(1280px, 95vw); max-width: none; max-height: 95vh; padding: 0; border: 0; border-radius: 2px; background: #ffffff; overflow: auto; }
.gross::backdrop { background: rgb(13 32 51 / 0.85); }
.gross img { display: block; width: 100%; height: auto; }
.gross-zu {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  height: 2.75rem;
  margin: 0 0 -2.75rem auto;
  padding: 0.5rem 1rem;
  border: 0;
  background: #0d2033;
  color: #ffffff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.galerie-erklaerung { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.galerie-erklaerung li { margin-top: 0.5rem; }

/* Hell ist der Standard, auch bei dunkel eingestelltem System */
:root {
  color-scheme: light;
  --wand-oben: #cfcfcf;
  --wand-text: #163049;
  --wand: radial-gradient(50% 58% at 0 60%, #f3ece5, transparent), linear-gradient(#cfcfcf, #d2d2d2 60%, #c1c2c3);
  --schattenfarbe: rgb(60 32 14 / 0.75);
  --breite: 2880;
  --hoehe: 1668;
  --oberkante: 77.6%;
  --vorderkante: 97.2%;
  --holz: linear-gradient(#b8906f, #d1a27e 22%, #d1a27e 80%, #cb9d78);
  --licht: linear-gradient(90deg, rgb(255 225 190 / 0.55), transparent 18%);
  --stirn: #815539;
  --ml: 24.9%;
  --mt: 19.8%;
  --mw: 48.5%;
  --mh: 47.1%;
  --hl: 78.9%;
  --ht: 51.4%;
  --hw: 7.6%;
  --hh: 28.3%;
}

/* Darkmode (Abend) */
.abend-schalter:checked ~ * {
  --wand-oben: #0f283c;
  --wand-text: #ffffff;
  --wand: radial-gradient(30% 62% at 0 76%, rgb(198 142 96 / 0.95), rgb(112 76 54 / 0.6) 45%, rgb(40 40 50 / 0.2) 78%, transparent), linear-gradient(#0f283c, #162a3b 55%, #102230);
  --schattenfarbe: rgb(10 3 1 / 0.9);
  --hoehe: 1629;
  --oberkante: 79.93%;
  --vorderkante: 99.26%;
  --holz: linear-gradient(#5a2c1c, #894425 25%, #894425 75%, #7e4126);
  --licht: linear-gradient(90deg, rgb(235 130 40 / 0.95), rgb(205 95 30 / 0.35) 14%, transparent 34%);
  --stirn: #25130c;
  --ml: 24.85%;
  --mt: 20.6%;
  --mw: 48.55%;
  --mh: 49.1%;
  --hl: 78.8%;
  --ht: 52.9%;
  --hw: 7.55%;
  --hh: 29.2%;
}
.abend-schalter:checked ~ * .s1 { --unten: 82.75%; }
.abend-schalter:checked ~ * .s2 { --unten: 86.19%; }
.abend-schalter:checked ~ * .s3 { --unten: 86%; }
.abend-schalter:checked ~ * .s4 { --unten: 91.16%; }
.abend-schalter:checked ~ .kopf .kopf-marke { background-image: url("marke/svg/komliv-liegend-dunkel.svg"); }
.abend-schalter:checked ~ .kopf .kopf-marke img { opacity: 0; }
.abend-schalter:checked ~ main .objekte { background-image: url("bilder/hero/abend-desktop.webp"); }
.abend-schalter:checked ~ main .objekte img { opacity: 0; }

/* Handy: eigene Fassung mit Handy und Pflanze, die Galerie liegt im Handy und zeigt die Bilder in Handybreite */
@media (max-width: 700px) {
  :root {
    --breite: 1290;
    --hoehe: 1026;
    --oberkante: 77.9%;
    --vorderkante: 97%;
    --holz: linear-gradient(#cba381, #d0a684 40%, #d1a581);
    --licht: linear-gradient(90deg, transparent, transparent);
    --stirn: #a1744f;
    --hl: 40.5%;
    --ht: 25.8%;
    --hw: 20.2%;
    --hh: 56%;
  }
  .abend-schalter:checked ~ * {
    --hoehe: 1002;
    --oberkante: 75.05%;
    --vorderkante: 99.6%;
    --holz: linear-gradient(#5d3426, #7b4027 35%, #914c2a);
    --licht: linear-gradient(90deg, transparent, transparent);
    --stirn: #1b1819;
    --hl: 40.1%;
    --ht: 25.6%;
    --hw: 20.5%;
    --hh: 57.9%;
  }
  .abend-schalter:checked ~ main .objekte { background-image: url("bilder/hero/abend-mobil.webp"); }
  .s1, .s2, .s3, .s4 { display: none; }
  .s5, .s6 { display: block; }
  .s5 { --links: 38%; --rechts: 63%; --unten: 87.23%; }
  .s6 { --links: 32%; --rechts: 68%; --unten: 81.4%; }
  .abend-schalter:checked ~ * .s5 { --unten: 88.82%; }
  .abend-schalter:checked ~ * .s6 { --unten: 80.4%; }

  /* Kopf, Text und Handy der Szene passen zusammen auf den ersten Bildschirm (Rückmeldung RB zu #95) */
  .kopf-innen { padding: 0.375rem 1rem; }
  .kopf-marke img { width: 120px; }
  .kopf-navigation { margin-left: 0; order: 3; flex: 1 1 100%; font-size: 0.9375rem; }
  .kopf-navigation ul { justify-content: center; gap: 0 0.875rem; }
  .kopf-navigation a { display: inline-block; padding: 0.25rem 0; }
  .abend-knopf { margin-left: auto; min-height: 2.25rem; font-size: 0.9375rem; }
  .buehne-text { padding: 0.25rem 1rem 0; }
  .buehne h1 { font-size: 1.5rem; margin-bottom: 0.375rem; }
  .unterzeile { font-size: 1rem; margin-bottom: 0.75rem; }
  .buehne-text .knopf { font-size: 1rem; padding: 0.5rem 1rem; }
  /* Szene so verschoben, dass das Handy (Mitte bei 50,6 % der Szene) mittig steht, der leere Raum über der Pflanze
     liegt hinter dem Knopf */
  .szene { width: 210%; margin: -3rem 0 0 calc(50% - 0.506 * 210%); }
  .handy { display: none; }
  .galerie-bilder { left: var(--hl); top: var(--ht); width: var(--hw); height: var(--hh); }
  .galerie-punkte { left: calc(var(--hl) + var(--hw) / 2); top: calc(var(--ht) + var(--hh)); }
  .galerie-steuerung { font-size: 1rem; }
  .galerie-marken a, .galerie-knopf { padding: 0.625rem 0.4rem; }
}