/* Szene K "Kurswechsel" (Hero, Abb. 1). Nur Klassen mit Präfix kw-, keine Element-Selektoren.
   Zeitfunktion ausschließlich ease-in-out. Endlosbewegung nur im Canvas.

   Stellschrauben für die Seite (auf .kw oder einem Vorfahren setzen):
   --kw-x, --kw-y   Lage der Rudernabe im Hero (Desktop in Prozent, mobil y in px)
   --kw-mass        Maßstab der Ruderzeichnung (große Bildschirme)
   --kw-bild-pos    Ausrichtung des Standbilds (object-position), sollte der Nabe entsprechen
   Querformat ab 1024 px: Ruder unten rechts neben Lead und Knöpfen, unterhalb der breiten H1-Zeile 2. So bleibt es
   während der ganzen Scroll-Abbildung im Bild. Hochformat und schmale Fenster: Ruder über dem Text, der Auftakt
   führt dort den ganzen Kurswechsel aus (das Skript misst den freien Platz und wählt den Ablauf selbst). */

.kw {
  --kw-x: 64%;
  --kw-y: 82%;
  --kw-mass: 1;
  --kw-bild-pos: 64% 82%;
  --kw-blende: 300ms;
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--auf-nacht);
  contain: layout paint;
}

/* Standbild: nur ohne JavaScript und bei reduzierter Bewegung (über die media-Attribute der Quellen) */
.kw-bild,
.kw-bild-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kw-bild-img {
  object-fit: cover;
  object-position: var(--kw-bild-pos);
}
.kw--bewegt .kw-bild,
.kw--still-bereit .kw-bild { display: none; }

/* Strömung */
.kw-feld {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 750ms ease-in-out;
}
.kw--an .kw-feld { opacity: 1; }
.kw--still .kw-feld { transition: none; }
.kw-gravur,
.kw-partikel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.kw-gravur {
  opacity: 0;
  transition: opacity var(--kw-blende) ease-in-out;
}
.kw-gravur.kw-sichtbar { opacity: 1; }

/* Ruder als technische Zeichnung (Zeichensprache aus B) */
.kw-ruder {
  position: absolute;
  overflow: visible;
  left: calc(var(--kw-x) - 86px);
  top: calc(var(--kw-y) - 150px);
}
.kw-ruder--l {
  transform-origin: 86px 150px;
  transform: scale(var(--kw-mass));
}
.kw-ruder--s { display: none; }
.kw-ruder path,
.kw-ruder circle { vector-effect: non-scaling-stroke; }
.kw-flaeche { fill: var(--nacht); }
.kw-umriss {
  fill: none;
  stroke: var(--auf-nacht);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.kw-schraffur {
  fill: none;
  stroke: var(--auf-nacht-2);
  stroke-width: 0.75;
  opacity: 0.5;
}
.kw-nabe {
  fill: var(--nacht);
  stroke: var(--auf-nacht);
  stroke-width: 1.5;
}
.kw-nabe-punkt { fill: var(--auf-nacht); }
.kw-mitte {
  fill: none;
  stroke: var(--signal-nacht);
  stroke-width: 1.25;
  stroke-dasharray: 18 3 2 3;
}
.kw-bezug {
  fill: none;
  stroke: var(--auf-nacht-2);
  stroke-width: 1;
  stroke-dasharray: 18 3 2 3;
  opacity: 0.6;
}
.kw-bogen {
  fill: none;
  stroke: var(--auf-nacht-2);
  stroke-width: 1;
  opacity: 0.7;
}
.kw-teilung {
  fill: none;
  stroke: var(--auf-nacht-2);
  stroke-width: 1;
  opacity: 0.6;
}
/* Sollbereich (Optimum): Messing wie die ruhige Strömung, leuchtet, solange das Ruder darin steht */
.kw-soll {
  fill: none;
  stroke: var(--messing);
  stroke-width: 3.5;
  opacity: 0.5;
  transition: opacity 400ms ease-in-out, stroke 400ms ease-in-out;
}
.kw--optimum .kw-soll,
.kw:not(.kw--js) .kw-soll { stroke: var(--messing-hell); opacity: 1; }
.kw-mass {
  fill: none;
  stroke: var(--signal-nacht);
  stroke-width: 1.5;
}
.kw-mass-ende {
  fill: none;
  stroke: var(--signal-nacht);
  stroke-width: 1.25;
}

/* Steuerung: nach dem Auftakt lässt sich das Ruder drehen (Zeiger, Touch, Pfeiltasten).
   Trefferfläche ist ein unsichtbarer, breiter Strich entlang der Sehne, der mit dem Blatt dreht. */
.kw-griff {
  fill: none;
  stroke: transparent;
  stroke-width: 36;
  pointer-events: none;
}
.kw--steuerbar .kw-griff { pointer-events: stroke; cursor: grab; }
.kw--steuerbar .kw-ruder { touch-action: none; }
.kw--ziehen .kw-griff { cursor: grabbing; }
.kw-ruder:focus { outline: none; }
.kw-fokus {
  fill: none;
  stroke: var(--signal-nacht);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0;
}
.kw-ruder:focus-visible .kw-fokus { opacity: 1; }
.kw-umriss { transition: stroke-width var(--t-micro) ease-in-out, stroke var(--t-micro) ease-in-out; }
.kw-bogen,
.kw-teilung { transition: opacity var(--t-micro) ease-in-out; }
.kw--steuerbar .kw-ruder:hover .kw-umriss,
.kw--ziehen .kw-umriss { stroke-width: 1.75; }
.kw-ruder:focus-visible .kw-umriss { stroke: var(--signal-nacht); stroke-width: 1.75; }
.kw--steuerbar .kw-ruder:hover .kw-bogen,
.kw--ziehen .kw-bogen,
.kw-ruder:focus-visible .kw-bogen { opacity: 1; }
.kw--steuerbar .kw-ruder:hover .kw-teilung,
.kw--ziehen .kw-teilung,
.kw-ruder:focus-visible .kw-teilung { opacity: 0.95; }

/* Hinweis unter den Messwerten: erscheint, sobald das Ruder steuerbar ist, und geht nach dem ersten Drehen */
.kw-hinweis {
  position: absolute;
  left: calc(var(--kw-x) + 252px * var(--kw-mass));
  top: calc(var(--kw-y) + 42px);
  margin: 0;
  white-space: nowrap;
  color: var(--auf-nacht-2);
  font-weight: 450;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease-in-out, visibility 0s ease-in-out 600ms;
}
.kw--steuerbar:not(.kw--gesteuert) .kw-hinweis {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease-in-out, visibility 0s ease-in-out 0s;
}

/* Messwerte: Archivo schmal, Tabellenziffern (Klasse .mess aus basis.css) */
.kw-werte {
  position: absolute;
  left: calc(var(--kw-x) + 252px * var(--kw-mass));
  top: calc(var(--kw-y) - 6px);
  margin: 0;
  display: grid;
  gap: 3px;
  white-space: nowrap;
  color: var(--auf-nacht);
  transition: opacity 600ms ease-in-out;
}
.kw-wert { display: flex; gap: 0.45em; }
.kw-name,
.kw-zahl { margin: 0; }
.kw-name { font-weight: 450; }
.kw-zahl {
  min-width: 4.6ch;
  color: var(--auf-nacht);
  font-weight: 640;
}

/* Bildunterschrift und Knopf */
.kw-fuss {
  position: absolute;
  right: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand)));
  bottom: 18px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 22px;
  color: var(--auf-nacht);
  pointer-events: auto;
  transition: opacity 750ms ease-in-out;
}
.kw-knopf {
  margin: -10px -6px;
  padding: 10px 6px;
  border: 0;
  background: none;
  color: var(--auf-nacht);
  font-family: var(--schrift);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: rgba(238, 242, 248, 0.42);
  transition: color var(--t-micro) ease-in-out, text-decoration-color var(--t-micro) ease-in-out;
}
.kw-knopf:hover { text-decoration-color: currentColor; }
.kw-knopf:focus-visible {
  outline: 2px solid var(--signal-nacht);
  outline-offset: 2px;
  border-radius: 2px;
}
.kw-knopf[hidden] { display: none; }

/* Ablauf: ein orchestrierter Moment. Vor dem Zeichnen ist das Ruder verborgen. */
.kw--bewegt:not(.kw--zeichnen) .kw-ruder { visibility: hidden; }
.kw--bewegt:not(.kw--werte-an) .kw-werte { opacity: 0; }
.kw--bewegt:not(.kw--an) .kw-fuss { opacity: 0; }

@keyframes kw-zieh {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes kw-ein {
  from { opacity: 0; }
}
.kw--bewegt.kw--zeichnen .kw-zieh {
  stroke-dasharray: 1 1;
  animation: kw-zieh 900ms ease-in-out both;
}
.kw--bewegt.kw--zeichnen .kw-z1 { animation-duration: 900ms; animation-delay: 0ms; }
.kw--bewegt.kw--zeichnen .kw-z2 { animation-duration: 800ms; animation-delay: 120ms; }
.kw--bewegt.kw--zeichnen .kw-z3 { animation-duration: 760ms; animation-delay: 220ms; }
.kw--bewegt.kw--zeichnen .kw-z4 { animation-duration: 700ms; animation-delay: 60ms; }
.kw--bewegt.kw--zeichnen .kw-z5 { animation-duration: 600ms; animation-delay: 300ms; }
.kw--bewegt.kw--zeichnen .kw-z6 { animation-duration: 420ms; animation-delay: 420ms; }
.kw--bewegt.kw--zeichnen .kw-flaeche { animation: kw-ein 500ms ease-in-out 80ms both; }
.kw--bewegt.kw--zeichnen .kw-schraffur { animation: kw-ein 420ms ease-in-out 420ms both; }
.kw--bewegt.kw--zeichnen .kw-nabe-punkt { animation: kw-ein 300ms ease-in-out 700ms both; }
.kw--bewegt.kw--zeichnen .kw-mass,
.kw--bewegt.kw--zeichnen .kw-mass-ende { animation: kw-ein 300ms ease-in-out 640ms both; }

/* Tablet: Messwerte unter das Ruder */
/* Querformat 1100 bis 1279 px: Ruder weiter nach rechts, Abstand zum Lead */
@media (min-width: 1100px) and (max-width: 1279px) and (min-aspect-ratio: 1/1) { .kw { --kw-x: 70%; --kw-bild-pos: 70% 82%; } }

/* Ab 1280 px wächst das Ruder mit (Sehne mindestens 17 % der Breite bei 1920 px) */
@media (min-width: 1280px) and (min-aspect-ratio: 1/1) { .kw { --kw-mass: 1.15; } }
@media (min-width: 1600px) and (min-aspect-ratio: 1/1) { .kw { --kw-mass: 1.2; } }
@media (min-width: 1800px) and (min-aspect-ratio: 1/1) { .kw { --kw-mass: 1.4; } }
@media (min-width: 2200px) and (min-aspect-ratio: 1/1) { .kw { --kw-mass: 1.6; } }

/* Querformat 1024 bis 1099 px: Messwerte unter das Ruder */
@media (max-width: 1099px) {
  .kw { --kw-x: 74%; --kw-bild-pos: 74% 82%; }
  .kw-werte {
    left: calc(var(--kw-x) - 40px);
    top: calc(var(--kw-y) + 40px);
    grid-auto-flow: column;
    gap: 22px;
  }
  .kw-hinweis {
    left: calc(var(--kw-x) - 40px);
    top: calc(var(--kw-y) + 64px);
  }
}

/* Hochformat und schmale Fenster: Ruder oben über dem Text */
@media (max-width: 1023px), (max-aspect-ratio: 1/1) {
  .kw { --kw-x: 58%; --kw-y: max(27%, 214px); --kw-mass: 1; --kw-bild-pos: 58% 27%; }
  .kw-werte {
    left: calc(var(--kw-x) - 40px);
    top: calc(var(--kw-y) + 40px);
    grid-auto-flow: column;
    gap: 22px;
  }
  .kw-hinweis {
    left: calc(var(--kw-x) - 40px);
    top: calc(var(--kw-y) + 64px);
  }
}

/* Mobil: Ruder oben rechts über der Headline, ein Messwert darunter */
@media (max-width: 719px) {
  .kw { --kw-x: 45%; --kw-y: 174px; --kw-bild-pos: 45% 20%; }
  .kw-ruder--l { display: none; }
  .kw-ruder--s {
    display: block;
    left: calc(var(--kw-x) - 56px);
    top: calc(var(--kw-y) - 96px);
  }
  .kw-werte {
    left: calc(var(--kw-x) - 38px);
    top: calc(var(--kw-y) + 28px);
  }
  .kw-wert[data-kw-wert="winkel"] { display: none; }
  .kw-griff { stroke-width: 44; }
  .kw-hinweis {
    left: calc(var(--kw-x) + 96px);
    top: calc(var(--kw-y) + 28px);
  }
  .kw-fuss {
    left: var(--rand);
    right: auto;
    bottom: 14px;
  }
}