/* ============================================================
   ERKLAERSTRECKE · zwei Sektionen im Dunkeln, mit Glow
   Warum: Lichtkante, nur die Linien gluehen.
   Disziplinen: Glasplatte, die Farbe liegt hinter dem Traeger.
   Loest den hellen Block ab, deshalb keine Lichtebene und keine
   Naht mehr: die Strecke bleibt im Dunkeln der uebrigen Seite.
   ============================================================ */

.erklaerstrecke { position: relative; }
.section.erk {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: none;
  padding-block: clamp(6rem, 14vh, 11rem);
}
.section.erk > .wrap { position: relative; z-index: 2; }

/* Redaktionelles Raster: zwoelf Spalten, Kopf und Copy versetzt */
.erk .raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
}
.erk .kicker { grid-column: 1 / -1; }
.erk .kicker::before {
  background: var(--ak, var(--c-blau));
  box-shadow: 0 0 12px var(--ak, var(--c-blau));
  width: 7px;
  height: 7px;
}
.kopfzeile {
  grid-column: 1 / -1;
  margin-top: clamp(1.1rem, 2.4vh, 1.9rem);
  font-size: clamp(1.55rem, 4.05vw, 3.3rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
}
/* ---------- Leitsatz: die Kopfzeile ist ein ganzer Satz ---------- */
/* Bleibt in Versalien wie alle Kopfzeilen, nur etwas kleiner und mit
   engerem Mass. Die Linie darunter laeuft auf voller Breite weiter,
   das Mass sitzt deshalb auf dem Span, nicht auf der Ueberschrift. */
.leitsatz .ls {
  display: block;
  max-width: 32ch;
  font-size: clamp(1.3rem, 2.95vw, 2.4rem);
  line-height: 1.08;
}

.erk .copy {
  grid-column: 5 / -1;
  margin-top: clamp(2.2rem, 5vh, 3.6rem);
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.62;
  color: rgba(243, 241, 237, 0.66);
}
.erk .copy strong { color: var(--c-text-hell); font-weight: 500; }
.schluss {
  display: block;
  margin-top: 1.1em;
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  text-transform: uppercase;
  color: var(--c-text-hell);
}
.merksatz {
  display: block;
  margin-block: 1.1em;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  text-transform: uppercase;
  line-height: 1.16;
  color: var(--c-text-hell);
}

/* ---------- Die Leiste zur Datenhoheit ---------- */
.hoheit {
  grid-column: 1 / -1;
  margin-top: clamp(2.6rem, 6vh, 4rem);
  padding: clamp(1.6rem, 3.4vh, 2.6rem) clamp(1.4rem, 3vw, 2.6rem);
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
  border: 1px solid rgba(245, 245, 243, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.hoheit::before {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
  background: var(--gradient-spektrum);
}
.h-marke {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-peach);
}
.h-satz {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.7rem);
  text-transform: uppercase;
  line-height: 1.12;
}
.h-text {
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.55;
  color: rgba(243, 241, 237, 0.62);
}

/* ---------- Warum: Lichtkante ---------- */
/* Nur die Linien gluehen, der Raum bleibt schwarz. */
#warum { --ak: var(--c-peach); }
#warum .licht {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 3;
  background: var(--gradient-spektrum);
  box-shadow: 0 0 40px 6px rgba(255, 214, 170, 0.22);
  transform-origin: left center;
}
#warum .kopfzeile {
  padding-bottom: clamp(1.6rem, 3.4vh, 2.6rem);
  border-bottom: 1px solid rgba(245, 245, 243, 0.14);
}
#warum .copy { position: relative; }
#warum .copy::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1rem, 2vw, 2rem));
  top: 0.4em;
  bottom: 0.4em;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-peach), var(--c-pink), var(--c-blau), var(--c-cyan));
  box-shadow: 0 0 24px rgba(105, 170, 255, 0.5);
}

/* ---------- Disziplinen: Glasplatte ---------- */
#system { --ak: var(--c-blau); }
#system .licht {
  position: absolute;
  inset: 6% 8%;
  z-index: 0;
  background:
    radial-gradient(46% 52% at 26% 34%, rgba(255, 70, 155, 0.34), transparent 70%),
    radial-gradient(50% 54% at 76% 66%, rgba(29, 189, 212, 0.30), transparent 70%);
  filter: blur(50px);
}
.platte {
  padding: clamp(2.2rem, 5vh, 4rem) clamp(1.6rem, 3.4vw, 3rem);
  border: 1px solid rgba(245, 245, 243, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

@media (max-width: 899px) {
  .erk .copy { grid-column: 1 / -1; }
  .hoheit { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  #warum .copy::before { display: none; }
  .platte { padding-inline: clamp(1rem, 4vw, 1.6rem); }
}
@media (max-width: 520px) {
  .kopfzeile { font-size: clamp(1.1rem, 5.6vw, 1.8rem); }
  .leitsatz .ls { font-size: clamp(1.1rem, 5.6vw, 1.8rem); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  #warum .licht { transform: none !important; }
}

/* ================= Querbalken unter der Warum-Copy =================
   Vier Lichtschaechte fuer die vier Disziplinen, ein waagrechter
   Strahl wandert beim Scrollen hindurch und zuendet jeden beim
   Kreuzen. Die Spur hinter dem Kopf bleibt hell, davor bleibt sie
   matt: man sieht, wie weit er ist. Lauf steht in js/erklaer.js. */
.querbalken {
  grid-column: 1 / -1;
  position: relative;
  margin-top: clamp(3.4rem, 9vh, 6rem);
  height: clamp(150px, 24vh, 240px);
}
.qb-schacht {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(245, 245, 243, 0.2), transparent);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.qb-schacht span {
  position: absolute;
  bottom: -1.9rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.82rem, 1.15vw, 1.02rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(243, 241, 237, 0.46);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.qb-schacht.wach { background: linear-gradient(to bottom, transparent, var(--f), transparent); box-shadow: 0 0 34px var(--f); }
.qb-schacht.wach span { color: var(--c-text-hell); text-shadow: 0 0 26px color-mix(in srgb, var(--f) 75%, transparent); }
.qb-strahl {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(245, 245, 243, 0.13);
  overflow: hidden;
}
/* Die Fuellung traegt das ganze Spektrum, nicht nur den Teil, der
   gerade sichtbar ist: sie wird beschnitten, nicht gestaucht.
   Deshalb liegt der Verlauf auf voller Breite und clip-path schneidet
   ihn ab. Ein skalierter Verlauf wuerde die Farben mitziehen. */
.qb-fuellung {
  position: absolute;
  inset: 0;
  background: var(--gradient-spektrum);
  box-shadow: 0 0 22px rgba(105, 170, 255, 0.45);
  clip-path: inset(0 calc(100% - var(--qb-lauf, 0%)) 0 0);
  will-change: clip-path;
}
.qb-kopf {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--c-text-hell);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.75);
  opacity: 0;
}
@media (max-width: 899px) {
  /* Vier waagrechte Woerter passen auf 326 Punkten nicht nebeneinander,
     gemessen blieben zwischen ihnen sechs Punkte Luft. Sie stellen sich
     deshalb an ihren Schacht, gelesen von oben nach unten. So duerfen
     sie groesser sein statt kleiner. */
  .querbalken { height: clamp(210px, 32vh, 300px); margin-top: clamp(2.6rem, 7vh, 4rem); }
  .qb-schacht span {
    writing-mode: vertical-rl;
    top: calc(50% + 0.9rem);
    bottom: auto;
    left: 0;
    transform: translateX(7px);
    font-size: 0.8rem;
    letter-spacing: 0.13em;
  }
}
/* Ohne Bewegung steht das Bild fertig da */
@media (prefers-reduced-motion: reduce) {
  .qb-schacht { background: linear-gradient(to bottom, transparent, var(--f), transparent); }
  .qb-schacht span { color: var(--c-text-hell); }
  .qb-kopf { display: none; }
  .qb-fuellung { clip-path: none; }
}

/* ================= Kette: Briefing bis Ergebnis =================
   Vier Stationen auf demselben Prinzip wie der Querbalken oben: ein
   Strahl laeuft am Scrollweg durch, jede Station zuendet beim Kreuzen.
   Die Station "Mensch entscheidet" liegt eine Groesse ueber den anderen,
   sie ist die Stelle, an der die Kette haelt. Lauf steht in js/erklaer.js. */
.kette {
  grid-column: 1 / -1;
  position: relative;
  margin-top: clamp(3.2rem, 8vh, 5.6rem);
  height: clamp(180px, 24vh, 230px);
}
.kt-strahl {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(245, 245, 243, 0.13);
  overflow: hidden;
}
.kt-fuellung {
  position: absolute;
  inset: 0;
  background: var(--gradient-spektrum);
  box-shadow: 0 0 22px rgba(105, 170, 255, 0.4);
  clip-path: inset(0 calc(100% - var(--kt-lauf, 0%)) 0 0);
  will-change: clip-path;
}
.kt-kopf {
  position: absolute;
  top: 50%; left: 0;
  width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-text-hell);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.75);
  opacity: 0;
}
.kt-stationen { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.kt-station {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kt-punkt {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(245, 245, 243, 0.14);
  border: 1px solid rgba(245, 245, 243, 0.3);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.kt-station.wach .kt-punkt {
  background: var(--f);
  border-color: var(--f);
  box-shadow: 0 0 30px var(--f);
  transform: scale(1.15);
}
.kt-mensch .kt-punkt { width: 20px; height: 20px; }
.kt-mensch.wach .kt-punkt {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--f) 16%, transparent), 0 0 34px var(--f);
}
.kt-label {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.72rem, 0.95vw, 0.86rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: rgba(243, 241, 237, 0.46);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.kt-station.wach .kt-label {
  color: var(--c-text-hell);
  text-shadow: 0 0 20px color-mix(in srgb, var(--f) 65%, transparent);
}
.kt-label small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-copy);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  max-width: 17ch;
  color: rgba(243, 241, 237, 0.4);
}
@media (max-width: 899px) {
  .kette { height: auto; padding-left: 1.7rem; margin-top: clamp(2.6rem, 7vh, 4rem); }
  .kt-strahl { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: none; }
  .kt-fuellung { clip-path: inset(calc(100% - var(--kt-lauf, 0%)) 0 0 0); }
  .kt-kopf { left: 7px; top: 0; }
  .kt-stationen { position: static; display: flex; flex-direction: column; gap: 1.7rem; }
  .kt-station {
    position: relative;
    top: auto;
    transform: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  .kt-punkt { flex: 0 0 auto; margin-top: 0.15rem; }
  .kt-label, .kt-station.wach .kt-label { text-align: left; }
  .kt-label small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-kopf { display: none; }
  .kt-fuellung { clip-path: none; }
  .kt-punkt { background: var(--f); border-color: var(--f); box-shadow: 0 0 30px var(--f); }
  .kt-mensch .kt-punkt { box-shadow: 0 0 0 7px color-mix(in srgb, var(--f) 16%, transparent), 0 0 34px var(--f); }
  .kt-label { color: var(--c-text-hell); text-shadow: 0 0 20px color-mix(in srgb, var(--f) 65%, transparent); }
}