/* Entwurf C · Teich: der stille Teich, in dem man sich sieht. Ein Bild, eine Frage, ein Knopf.
   Übernimmt das Prinzip des Fenster-Entwurfs. Bewegung: Dunst zieht langsam über das Wasser. */
.bild{background-image:url(bilder/hell.jpg);background-image:image-set(url(bilder/hell.webp) type("image/webp"),url(bilder/hell.jpg) type("image/jpeg"));animation:ruhe 30s ease-in-out infinite alternate}
:root[data-thema="dunkel"] .bild{background-image:url(bilder/dunkel.jpg);background-image:image-set(url(bilder/dunkel.webp) type("image/webp"),url(bilder/dunkel.jpg) type("image/jpeg"))}
@keyframes ruhe{from{transform:scale(1.04)}to{transform:scale(1)}}
.dunst{position:absolute;inset:-10% -30%;z-index:-1;pointer-events:none;opacity:.75;
  background:radial-gradient(38% 30% at 30% 62%,color-mix(in srgb,var(--bg) 78%,transparent) 0%,transparent 70%),radial-gradient(34% 26% at 68% 70%,color-mix(in srgb,var(--bg) 60%,transparent) 0%,transparent 72%);
  animation:ziehen 46s linear infinite alternate}
@keyframes ziehen{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.schleier{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 86%,transparent) 0%,color-mix(in srgb,var(--bg) 58%,transparent) 34%,transparent 62%)}
:root[data-thema="dunkel"] .schleier{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 66%,transparent) 38%,transparent 66%)}
.hero-main{max-width:640px}

@media (max-width:820px){
  .bild{background-image:url(bilder/hell-m.jpg);background-image:image-set(url(bilder/hell-m.webp) type("image/webp"),url(bilder/hell-m.jpg) type("image/jpeg"));background-position:center top;inset:0 0 40% 0;animation:none}
  :root[data-thema="dunkel"] .bild{background-image:url(bilder/dunkel-m.jpg);background-image:image-set(url(bilder/dunkel-m.webp) type("image/webp"),url(bilder/dunkel-m.jpg) type("image/jpeg"))}
  .dunst{display:none}
  .schleier,:root[data-thema="dunkel"] .schleier{background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 50%,color-mix(in srgb,var(--bg) 80%,transparent) 60%,transparent 80%)}
}