:root {
  color-scheme: dark;
  --nacht: #020913;
  --tief: #041a2d;
  --licht: #e3fbf7;
  --leis: #b5dfe0;
  --orange: #ef7f36;
  --koralle: #ffb06d;
  --fokus: #fff3a8;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  background: var(--nacht);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--licht);
  font-size: clamp(1rem, .95rem + .25vw, 1.2rem);
  line-height: 1.65;
}

a { color: #c5fff6; }
a:hover { color: white; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 5px;
}

.sprung {
  position: fixed;
  z-index: 30;
  top: .75rem;
  left: .75rem;
  transform: translateY(-160%);
  padding: .7rem 1rem;
  color: #071626;
  background: var(--fokus);
  border-radius: 999px;
}

.sprung:focus { transform: translateY(0); }

.meer-eingang {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background-color: #052139;
}

.meer-eingang::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(1, 9, 18, .43) 0%, rgba(1, 10, 20, .02) 44%, rgba(1, 8, 16, .67) 100%),
    image-set(
      url("assets/wassermuseum-eingang.webp") type("image/webp"),
      url("assets/wassermuseum-eingang.png") type("image/png")
    );
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  animation: wasseratmen 18s ease-in-out infinite alternate;
}

.meer-eingang::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 46% 18%, rgba(176, 236, 239, .13), transparent 25%),
    radial-gradient(ellipse at 34% 58%, rgba(80, 188, 198, .1), transparent 31%),
    radial-gradient(circle at 86% 74%, rgba(238, 91, 27, .12), transparent 25%),
    linear-gradient(0deg, rgba(1, 7, 14, .5), transparent 42%);
  background-size: 108% 108%;
  animation: lichtatmen 15s ease-in-out infinite alternate;
}

.kopfzeile {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: min(92%, 92rem);
  margin: 0 auto;
  padding: 1rem 0;
  font-family: system-ui, sans-serif;
  font-size: .92rem;
  letter-spacing: .05em;
  text-shadow: 0 2px 10px #000;
}

.kopfzeile span { color: rgba(227, 252, 248, .84); }

.zurueck {
  display: inline-block;
  padding: .55rem .85rem;
  border: 1px solid rgba(219, 252, 247, .44);
  border-radius: 999px;
  color: white;
  background: rgba(2, 17, 31, .62);
  text-decoration: none;
}

.eingangstext {
  position: absolute;
  z-index: 2;
  left: max(5vw, calc((100vw - 92rem) / 2));
  bottom: clamp(3.6rem, 8vh, 6.5rem);
  width: min(86%, 40rem);
  text-shadow: 0 2px 18px #000, 0 0 4px #001;
  pointer-events: none;
}

h1 {
  margin: 0;
  font-size: clamp(3.8rem, 9vw, 7.5rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.045em;
}

.leitsatz {
  max-width: 36rem;
  margin: 1rem 0 0;
  font-size: clamp(1.05rem, .95rem + .42vw, 1.45rem);
  line-height: 1.42;
}

.ki-tuer {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
  text-align: left;
  text-shadow: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: color .35s ease, text-shadow .35s ease;
}

.ki-tuer:hover {
  color: #f3ffff;
  text-shadow: 0 2px 18px #000, 0 0 18px rgba(155, 237, 237, .48);
}

.wesen {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.wesenname {
  position: absolute;
  width: clamp(4.5rem, 7vw, 7.5rem);
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(190, 247, 242, .14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 255, 251, .38) 0 3%, rgba(127, 224, 220, .08) 18%, transparent 68%);
  cursor: pointer;
  pointer-events: auto;
  opacity: .46;
  transition: opacity .4s ease, scale .4s ease, border-color .4s ease, box-shadow .4s ease;
  animation: fundlicht 9s ease-in-out infinite;
}

.wesenname::before,
.wesenname::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(195, 252, 246, .38);
  border-radius: 48% 52% 43% 57% / 56% 44% 56% 44%;
  transform: rotate(-9deg);
}

.wesenname::after {
  inset: 46%;
  border: 0;
  background: rgba(224, 255, 250, .72);
  box-shadow: 0 0 1.05rem rgba(146, 240, 235, .9);
}

.wesenname:hover,
.wesenname:focus-visible {
  border-color: rgba(205, 255, 249, .45);
  box-shadow: 0 0 1.5rem rgba(116, 224, 220, .22), inset 0 0 1.2rem rgba(142, 231, 225, .12);
  opacity: .9;
  scale: 1.08;
}

.qualle { left: 8%; top: 10%; rotate: -4deg; animation-delay: -1s; }
.nautilus { left: 7%; top: 42%; rotate: 3deg; animation-delay: -3s; }
.fetzenfisch { left: 27%; top: 28%; rotate: -6deg; animation-delay: -5s; }
.krake { left: 43%; top: 12%; rotate: 4deg; animation-delay: -2s; }
.schnecke { left: 58%; top: 68%; rotate: -3deg; animation-delay: -4s; }
.seepferd { right: 13%; top: 51%; rotate: 5deg; animation-delay: -6s; }

@keyframes fundlicht {
  0%, 62%, 100% { opacity: .34; }
  12% { opacity: .78; }
  25% { opacity: .46; }
}

.rochenweg {
  position: absolute;
  z-index: 3;
  top: 12%;
  right: 7%;
  width: clamp(11rem, 21vw, 23rem);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .78;
  filter: drop-shadow(0 0 .55rem rgba(65, 225, 235, .55));
  animation: rochenschweben 13s ease-in-out infinite, rochenleuchten 6s ease-in-out infinite;
  transition: opacity .4s ease, scale .4s ease, filter .4s ease;
}

.rochenweg picture,
.rochenweg img {
  display: block;
  width: 100%;
}

.rochenweg:hover,
.rochenweg:focus-visible {
  opacity: 1;
  scale: 1.06;
  filter: drop-shadow(0 0 1.25rem rgba(91, 242, 246, .92));
}

@keyframes rochenschweben {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: -.45rem .38rem; rotate: 1deg; }
}

@keyframes rochenleuchten {
  0%, 100% { opacity: .7; }
  50% { opacity: .94; }
}

@keyframes wasseratmen {
  0% {
    transform: scale(1.01) translate3d(-.16%, .1%, 0);
  }
  50% {
    transform: scale(1.026) translate3d(.11%, -.14%, 0);
  }
  100% {
    transform: scale(1.014) translate3d(.18%, .08%, 0);
  }
}

@keyframes lichtatmen {
  0% { background-position: 48% 49%; opacity: .78; }
  50% { background-position: 51% 47%; opacity: 1; }
  100% { background-position: 49% 52%; opacity: .84; }
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bildbeschreibung {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fusslinks {
  position: absolute;
  z-index: 5;
  right: 2.5%;
  bottom: 1rem;
  display: flex;
  gap: .55rem;
  color: rgba(210, 239, 237, .66);
  font-family: system-ui, sans-serif;
  font-size: .75rem;
}

.fusslinks a { color: inherit; }

.fundraum {
  width: min(92vw, 48rem);
  max-height: min(88svh, 52rem);
  padding: 0;
  border: 1px solid rgba(161, 229, 220, .52);
  border-radius: 3rem 2.2rem 3.4rem 2.5rem;
  color: var(--licht);
  background:
    radial-gradient(circle at 12% 7%, rgba(38, 129, 141, .32), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(226, 87, 31, .18), transparent 30%),
    rgba(2, 20, 34, .97);
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, .7), inset 0 0 4rem rgba(54, 169, 168, .08);
  overflow: auto;
}

.fundraum::backdrop {
  background: rgba(0, 5, 12, .78);
  backdrop-filter: blur(5px);
}

.ki-fundraum { width: min(95vw, 72rem); }

.comic-fundraum {
  width: min(96vw, 78rem);
  max-height: 92svh;
  border-radius: 2.4rem 3rem 2.6rem 3.4rem;
}

.comic-kopf { padding-bottom: 1.2rem; }

.comicbild {
  position: relative;
  width: 100%;
  background: #05213a;
}

.comicbild picture,
.comicbild img {
  display: block;
  width: 100%;
}

.comicpunkt {
  position: absolute;
  padding: 0;
  border: 1px solid rgba(200, 255, 249, .16);
  border-radius: 48% 52% 46% 54% / 54% 45% 55% 46%;
  background: rgba(109, 226, 225, .015);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.comicpunkt:hover,
.comicpunkt:focus-visible,
.comicpunkt.aktiv {
  border-color: rgba(219, 255, 250, .72);
  background: rgba(124, 239, 235, .08);
  box-shadow: inset 0 0 2.5rem rgba(97, 224, 222, .18), 0 0 1.1rem rgba(128, 236, 232, .22);
}

.comic-oberflaeche { left: 0; top: 0; width: 20%; height: 45%; }
.comic-zusammenhalt { left: 20%; top: 0; width: 19%; height: 45%; }
.comic-kapillare { left: 39%; top: 0; width: 18%; height: 48%; }
.comic-eis { left: 57%; top: 0; width: 19%; height: 44%; }
.comic-waerme { left: 76%; top: 0; width: 24%; height: 48%; }
.comic-verdunstung { left: 0; top: 45%; width: 29%; height: 55%; }
.comic-kreislauf { left: 29%; top: 48%; width: 32%; height: 52%; }
.comic-loesung { left: 61%; top: 48%; width: 39%; height: 52%; }

.comic-leseplatz { padding: clamp(1.7rem, 5vw, 3.5rem); }

.comic-leseplatz h3 {
  margin: 0 0 .8rem;
  color: white;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
}

.ki-bildrahmen {
  overflow: hidden;
  border-radius: 3rem 2.2rem 0 0;
  background: #03101c;
}

.ki-bildrahmen img {
  display: block;
  width: 100%;
  max-height: 52svh;
  object-fit: cover;
}

.ki-inhalt { padding-top: clamp(1.5rem, 4vw, 2.8rem); }

.ki-poesie p { margin: 0 0 1.15rem; }

.fundinhalt { padding: clamp(1.8rem, 6vw, 4rem); }

.fundwesen {
  margin: 0 0 .4rem;
  color: var(--koralle);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-weight: 700;
  rotate: -2deg;
}

.fundraum h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1.04;
}

.poesie {
  margin: 0;
  color: white;
  font-size: clamp(1.18rem, 1rem + .65vw, 1.72rem);
  line-height: 1.55;
}

.wissen {
  margin-top: 1.5rem;
  padding: 1.15rem 1.3rem 1.25rem;
  border-left: 2px solid var(--orange);
  border-radius: 0 2rem 2rem 0;
  color: #c9e9e7;
  background: linear-gradient(90deg, rgba(5, 55, 69, .7), rgba(4, 28, 44, .3));
  font-family: system-ui, sans-serif;
  font-size: .96rem;
}

.wissen h3,
.wissen h4 {
  margin: 0 0 .4rem;
  color: var(--koralle);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wissen p { margin: .45rem 0 0; }

.schliessen {
  margin-top: 1.8rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(212, 250, 243, .55);
  border-radius: 999px;
  color: white;
  background: rgba(6, 57, 72, .78);
  font: 600 .92rem system-ui, sans-serif;
  cursor: pointer;
}

.schliessen:hover { background: rgba(15, 88, 100, .92); }

.keinjs {
  position: fixed;
  z-index: 20;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: 1rem;
  color: white;
  background: #442314;
  font-family: system-ui, sans-serif;
}

@media (max-width: 760px) {
  .meer-eingang {
    min-height: 100svh;
    overflow: auto;
  }

  .meer-eingang::before { background-position: 62% center; }

  .kopfzeile span { display: none; }

  .eingangstext {
    position: relative;
    left: auto;
    bottom: auto;
    width: 88%;
    margin: 55svh auto 1.4rem;
  }

  h1 { font-size: clamp(4rem, 22vw, 7rem); }

  .wesen {
    position: relative;
    inset: auto;
    display: grid;
    width: 90%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem .7rem;
    margin: 0 auto 4.5rem;
    pointer-events: auto;
  }

  .wesenname,
  .qualle,
  .nautilus,
  .fetzenfisch,
  .krake,
  .schnecke,
  .seepferd {
    position: relative;
    inset: auto;
    justify-self: center;
    rotate: var(--mobile-drehung, -2deg);
    width: clamp(3.6rem, 18vw, 5.5rem);
  }

  .rochenweg {
    top: 17svh;
    right: 3%;
    width: clamp(9rem, 38vw, 14rem);
  }

  .fusslinks { right: 5%; }
}

@media (max-width: 410px) {
  .wesen { grid-template-columns: 1fr; }
  .leitsatz br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .wesenname { opacity: .58; }
  .rochenweg { opacity: .9; }
}

@media (prefers-contrast: more) {
  .meer-eingang::after { background: rgba(0, 8, 17, .28); }
  .wesenname {
    border-color: rgba(255, 255, 255, .72);
    background: radial-gradient(circle, white 0 4%, rgba(191, 255, 246, .2) 14%, transparent 65%);
    opacity: .85;
  }
  .fundraum { border-width: 2px; }
  .wissen { color: white; background: #062f40; }
}


/* WANDSCHATTEN: Wasser -> Blume */
/* Ein stiller Wasserwirbel am Ende des Raums – kein sichtbarer Button. */
body { position: relative; }

.ws-blumenleck {
  position: absolute;
  right: clamp(18px, 6vw, 92px);
  bottom: clamp(34px, 8vh, 120px);
  width: clamp(74px, 9vw, 126px);
  aspect-ratio: 1;
  z-index: 80;
  border-radius: 50%;
  text-decoration: none;
  opacity: .16;
  transform: rotate(-8deg) scale(.96);
  transition: opacity 2.4s ease, transform 2.4s ease, filter 2.4s ease;
  filter: blur(.15px) drop-shadow(0 0 8px rgba(105,205,220,.10));
  background:
    radial-gradient(circle at 47% 49%, transparent 0 19%, rgba(194,240,238,.10) 20% 21%, transparent 23% 31%, rgba(82,176,194,.11) 32% 33%, transparent 35% 47%, rgba(29,111,145,.14) 48% 50%, transparent 52%),
    conic-gradient(from 18deg,
      transparent 0 13%, rgba(154,229,223,.10) 17%, transparent 25% 44%,
      rgba(45,139,166,.16) 49%, transparent 58% 77%, rgba(218,184,107,.055) 82%, transparent 91%);
  mix-blend-mode: screen;
  animation: wsLeckAtmet 13s ease-in-out infinite alternate;
}

.ws-blumenleck::before,
.ws-blumenleck::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ws-blumenleck::before {
  inset: 13%;
  border: 1px solid rgba(164,222,223,.10);
  box-shadow: 0 0 18px rgba(102,190,205,.08), inset 0 0 24px rgba(15,93,127,.11);
  animation: wsLeckDreht 24s linear infinite;
}

.ws-blumenleck::after {
  inset: 32%;
  background: radial-gradient(circle,
    rgba(225,235,217,.08) 0 4%,
    rgba(59,151,169,.12) 12%,
    rgba(5,36,60,.17) 36%,
    transparent 68%);
  box-shadow: 0 0 18px rgba(55,156,183,.09);
}

.ws-blumenleck:hover,
.ws-blumenleck:focus-visible {
  opacity: .70;
  transform: rotate(3deg) scale(1.08);
  filter: drop-shadow(0 0 16px rgba(119,214,221,.27));
  outline: none;
}

.ws-blumenleck:focus-visible::before { border-color: rgba(229,218,163,.46); }

@keyframes wsLeckAtmet {
  0%   { opacity: .13; transform: rotate(-8deg) scale(.94); }
  52%  { opacity: .21; }
  100% { opacity: .16; transform: rotate(5deg) scale(1.02); }
}

@keyframes wsLeckDreht { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .ws-blumenleck {
    right: 5vw;
    bottom: 42px;
    width: 82px;
    opacity: .26;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-blumenleck,
  .ws-blumenleck::before { animation: none !important; }
}