/* Regenbogen-Spline im Seitenkopf.

   Eine einzelne, durchgehend gleich dicke Linie, die sich beim Laden von oben
   nach unten zeichnet und dabei einen entlang ihrer Laenge flieszenden
   Regenbogen traegt. Aufbau, Zeichnen und Farbverlauf laufen vollstaendig in
   js/spline.js — das CSS uebernimmt nur die Platzierung im Seitenkopf. */

/* overflow: hidden schneidet die Linie an den Kanten der Flaeche ab. Das
   Skript verlaengert beide Enden darueber hinaus, sodass die runden Kappen
   ausserhalb liegen: Die Linie laeuft oben in die Navigation und unten in die
   Trennlinie, statt sichtbar abgerundet aufzuhoeren. */
.spline {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

/* Absolut positioniert, damit das SVG die Hoehe des Containers nicht selbst
   mitbestimmt: Im Fluss leitet es seine Hoehe sonst aus dem Seitenverhaeltnis
   der viewBox ab, und das Skript setzt die viewBox aus der Containerhoehe —
   die Flaeche wuerde sich dadurch selbst aufschaukeln. */
.spline svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Seitenkopf: rechts neben Ueberschrift und Lead, von der Navigation bis zur
   Trennlinie. Die negativen Aussenabstaende heben den Innenabstand von
   .sec--head auf und entsprechen dessen padding in main.css. */
@media (min-width: 961px) {
  .sec--head .grid > .h1 { grid-row: 1; }
  .sec--head .grid > .lead { grid-row: 2; }

  .hero-spline {
    grid-row: 1 / span 2;
    align-self: stretch;
    margin-top: -120px;
    margin-bottom: -96px;
    min-height: 640px;
  }
}

/* Flache Fenster: dort ist der Innenabstand des Kopfbereichs kleiner. */
@media (min-width: 961px) and (max-height: 880px) {
  .hero-spline {
    margin-top: -80px;
    margin-bottom: -64px;
    min-height: 520px;
  }
}

/* Unter 960px faellt das Raster auf eine Spalte zurueck; neben dem Text ist
   dann kein Platz mehr, deshalb entfaellt die Linie dort ganz. */
@media (max-width: 960px) {
  .hero-spline { display: none; }
}

/* Reduzierte Bewegung: js/spline.js erkennt die Einstellung selbst, zeichnet
   die Linie einmal fertig und haelt Form wie Farbe danach unbewegt. */