/* V4 „Tag“: Gegenstück zu „Nacht“. Heller Morgenhimmel, Papiersonne und Wolken, dunkle Zahlenleiste. */
html[data-variant="v4"] {
  --page-bg: #fffdf8; --page-tex: none;
  --kopf-bg: #fff9ec; --kopf-ink: #1a171b;
  --hero-bg: linear-gradient(180deg, #fff3d6 0%, #fffaf0 55%, #fffdf8 100%);
  --hero-ink: #1a171b; --hero-muted: #3f3a43;
  --mark-bg: transparent; --mark-ink: #c4005c;
  --land-hinten: #fde4a6; --land-mitte: #ffcd57;
  --zahlen-bg: #1a171b; --zahlen-ink: #f3efe8; --zahlen-num: #ffb400;
  --sektion-weiss: #fff6e0;
}
html[data-variant="v4"] .hero::before {
  /* Papiersonne hinter Lisa, geht hinter den Hügeln auf */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  /* mobil: im Bildbereich unter dem Text, breit: oben rechts */
  width: 130px; aspect-ratio: 1; right: 4%; bottom: calc(var(--land-h) + var(--lisa-h) * .9);
  background: url("../img/deko/sonne.svg") center / contain no-repeat;
}
html[data-variant="v4"] .hero::after {
  /* Zwei Papierwolken */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("../img/deko/wolke.svg") 8% 74% / 90px auto no-repeat,
    url("../img/deko/wolke.svg") 94% 88% / 70px auto no-repeat;
}
@media (min-width: 52rem) {
  html[data-variant="v4"] .hero::before { width: clamp(220px, 28vw, 420px); right: clamp(-40px, 3vw, 80px); top: clamp(10px, 3vw, 40px); bottom: auto; }
  html[data-variant="v4"] .hero::after { background-position: 61% 7%, 97% 46%; background-size: clamp(90px, 9vw, 150px) auto, clamp(70px, 7vw, 110px) auto; }
}
html[data-variant="v4"][data-motion="an"] .hero::after { animation: wolken 18s ease-in-out infinite alternate; }
@keyframes wolken { from { translate: 0 0; } to { translate: 26px 0; } }
html[data-variant="v4"][data-contrast="hoch"] .hero::before, html[data-variant="v4"][data-contrast="hoch"] .hero::after { display: none; }
/* Unterseiten: kleine Papiersonne hinter Lisa */
html[data-variant="v4"] .seitenkopf::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; width: clamp(110px, 16vw, 220px); aspect-ratio: 1; right: clamp(-30px, 2vw, 60px); top: clamp(-20px, 1vw, 20px);
  background: url("../img/deko/sonne.svg") center / contain no-repeat;
}
html[data-variant="v4"][data-contrast="hoch"] .seitenkopf::before { display: none; }

@media (prefers-color-scheme: dark) {
  /* „Tag“ bleibt im Hero hell, auch im Dunkelmodus; der Rest der Seite wird dunkel. */
  html[data-variant="v4"]:not([data-contrast]) {
    --kopf-bg: #fff9ec; --kopf-ink: #1a171b;
    --hero-bg: linear-gradient(180deg, #fff3d6 0%, #fffaf0 55%, #fffdf8 100%);
    --hero-ink: #1a171b; --hero-muted: #3f3a43; --mark-bg: transparent; --mark-ink: #c4005c;
    --land-hinten: #fde4a6; --land-mitte: #ffcd57; --denkmal: #1a171b; --denkmal-fill: #ffffff;
    --sek-rand: #1a171b; --sek-ink: #1a171b; --focus: #1a171b;
    --zahlen-bg: #1a171b; --zahlen-ink: #f3efe8; --zahlen-num: #ffb400;
  }
  html[data-variant="v4"]:not([data-contrast]) .seitenkopf { --link: #c4005c; --muted: #3f3a43; --focus: #1a171b; }
}
/* Die Sonne trägt das Gelb; der blaue Punkt rückt von ihr weg */
html[data-variant="v4"] .deko--gelb { display: none; }
html[data-variant="v4"] .deko--blau { right: auto; left: 12%; top: 6%; }