/* ==========================================================================
   50 kernsatz · Owner: wdf-section-builder (Auftrag P7-50)
   Reiner Satz auf Stein (Ton 3), Ruhepunkt zwischen Problem (40) und Lösung (60).
   Keine Bildfläche, keine bedienbaren Elemente. Zwei Zeilen als Block-Spans (Umbruch nach dem
   Komma fest), jedes Wort ein eigener Span (.kernsatz__wort) für den Wort-Reveal in Phase 8:
   dort wechselt nur die Farbe, Wortabstand und Umbruch bleiben. Jetzt alles voll sichtbar.
   Abschnittsabstand und Größen kommen aus .section und .heading-2 (base.css).
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

.kernsatz__inner { display: grid; gap: var(--s-4); }

/* ---------- Satz ---------- */
/* Mobil .heading-2 (31 px): „Erst Prozess verstehen,“ füllt bei 390 die Spalte in einer Zeile;
   bei 320 bricht jede Zeile in zwei. Ab 1024 Display-Größe (komponenten.md, Kernsatz). */
@media (min-width: 1024px) {
  .kernsatz__satz {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
  }
}
/* Zeilen als Block: der Umbruch nach dem Komma steht fest; balance verhindert ein einzelnes Wort am Zeilenende */
.kernsatz__zeile { display: block; text-wrap: balance; }
/* Wörter bleiben inline (natürlicher Umbruch); später wechselt nur color */
.kernsatz__wort { color: var(--color-text); }

/* ---------- Urheber ---------- */
.kernsatz__urheber { color: var(--color-text-muted); text-wrap: balance; }

/* ---------- Bild (Bildwelt W2, Baustein .media): mobil Band 390 x 150 unter dem Satz, bündig, oben in den Stein
   ausgeblendet. Der Abschnitt endet am Band (kein Abstand darunter). Fokus oben, damit die Fingerspitzen
   nicht in der Ausblendung verschwinden. ---------- */
.kernsatz { padding-bottom: 0; }
.kernsatz__inner { overflow-x: clip; }
.kernsatz__bild { --media-fade-y: 22%; --media-focus: 50% 12%; margin-top: var(--s-2); }

/* ---------- Ab 768: mehr Luft zwischen Satz und Urheber ---------- */
@media (min-width: 768px) {
  .kernsatz__inner { gap: var(--s-5); }
}

/* 768 bis 1023: Bild läuft über beide Seitenränder (Band), links in den Stein ausgeblendet */
@media (min-width: 768px) and (max-width: 1023px) {
  .kernsatz__bild { margin-inline: calc(-1 * var(--page-pad)); border-radius: 0; }
}

/* ---------- Ab 1024: Satz links (ruhiger Grund), Bild rechts bis an den Fensterrand, nach links in den Stein
   ausgeblendet; Text liegt nie über dem Bild. Ausblendung links kurz (Glaskachel im Ausschnitt halten). ---------- */
@media (min-width: 1024px) {
  .kernsatz { padding-block: var(--space-section); }
  .kernsatz__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: var(--s-6);
    overflow-x: visible;
  }
  .kernsatz__satz { grid-column: 1; align-self: end; }
  .kernsatz__urheber { grid-column: 1; align-self: start; }
  .kernsatz__bild {
    --media-ratio-l: 16 / 9;
    --media-fade-x: 14%;
    --media-fade-y: 16%;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    margin-inline-end: calc(-1 * max(var(--page-pad), (100vw - var(--content-max)) / 2));
  }
}

/* motion — Owner: wdf-motion-designer (P8-S), Bewegung kernsatz-reveal (motion.js)
   Wort für Wort gedämpft → voll, nur Deckkraft; Wortabstand und Umbruch bleiben.
   data-motion setzt nur motion.js (nicht unter Reduced Motion, nicht ohne JS): sonst steht der Satz voll.
   „dim“ dämpft ohne Übergang, „ready“ schaltet den Übergang ein, .is-on = Wort ist voll (nur vorwärts).
   --motion-dim fehlt noch in tokens.css (Anfrage an den Lead), bis dahin 0.3 als Ersatzwert. */
html.js .kernsatz__satz[data-motion] .kernsatz__wort { opacity: var(--motion-dim, 0.3); }
html.js .kernsatz__satz[data-motion="ready"] .kernsatz__wort { transition: opacity var(--dur-reveal) var(--ease-out); }
html.js .kernsatz__satz[data-motion] .kernsatz__wort.is-on { opacity: 1; }

/* motion — Owner: wdf-motion-designer (P18-M), Bewegung kernsatz-video (motion.js)
   Das Video liegt in derselben figure.media wie das Standbild: dieselbe Maske (media--fade-*), derselbe Zuschnitt
   (object-fit cover, --media-focus). Die Dateien haben das Seitenverhältnis ihres Standbilds (1600 × 898, mobil 1200 × 600).
   Ohne JS und unter Reduced Motion gibt es kein Video, das Standbild steht (Reduced Motion: Endbild, setzt motion.js).
   Sichtbar erst mit .is-ready (erstes Bild dekodiert), bis dahin liegt das Standbild darunter. */
.kernsatz__video { display: none; }
html.js .kernsatz__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focus);
  opacity: 0;
  pointer-events: none;
}
html.js .kernsatz__video.is-ready { opacity: 1; transition: opacity var(--dur-reveal) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html.js .kernsatz__video { display: none; }
}