/* Wasserlinie (seit 10.10.2026 auf allen Seiten): große Überschriften liegen halb im
   Wasser. Aufbau und Gründe im Kopf von static/js/wasserlinie.js. */

:root {
  --wl-wasser: #16c8ff;
  --wl-licht: rgba(255, 255, 255, .92);
}
.wl-kopf { position: relative; }

/* Die Linie läuft über die ganze Spalte hinaus und flimmert leicht. */
.wl-kopf::after {
  content: ""; position: absolute; left: -4vw; right: -12vw; top: var(--wl-linie, 70%);
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--wl-wasser) 70%, white) 4vw, color-mix(in srgb, var(--wl-wasser) 40%, transparent) 60%, transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--wl-wasser) 55%, transparent);
  opacity: 0; transition: opacity 1s ease .4s;
}
.wl-flut::after { opacity: .9; animation: wl-glitzer 7s linear infinite; }
@keyframes wl-glitzer { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* Unter der Linie: getrübt, wasserfarben, gewellt. */
.wl-wasser {
  position: absolute; display: block; pointer-events: none; overflow: hidden; z-index: 1;
  -webkit-backdrop-filter: blur(2.5px) brightness(.9) saturate(1.4);
  backdrop-filter: blur(2.5px) brightness(.9) saturate(1.4);
  /* seitlich und nach unten auslaufen, sonst zeichnet sich ein Kasten ab */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
  mask-composite: intersect;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--wl-wasser) 16%, transparent) 0,
    color-mix(in srgb, var(--wl-wasser) 10%, transparent) 55%,
    color-mix(in srgb, var(--wl-wasser) 2%, transparent) 100%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s cubic-bezier(.22, 1, .36, 1);
}
.wl-flut > .wl-wasser { clip-path: inset(0 0 0 0); }
.wl-text {
  position: absolute; white-space: pre; margin: 0;
  color: color-mix(in srgb, var(--wl-wasser) 55%, white);
  opacity: .62; filter: url(#wl-welle);
}
.wl-text::after { content: attr(data-t); }

@media (prefers-reduced-motion: reduce) {
  .wl-wasser { transition: none; clip-path: none; }
  .wl-flut::after { animation: none; }
}