/* OneQrew v7 — Element 02 Text-Media.

   Drei Aufteilungen (50/50, 30/70, 70/30), umkehrbare Bildseite, drei
   Medienvarianten (Aufsatz, Video mit Lightbox, Bildpaar). Vorgabe:
   taifun-element-02-textmedia.html, siehe docs/superpowers/specs/
   2026-08-19-v7-element-02-text-media-design.md. Aenderungen immer auch in
   text-media.min.css.

   Farbwerte kommen aus der Theme-Palette wie bei stage.css — siehe dortigen
   Kommentarkopf fuer die Begruendung. Aufsatz- und Flaechenregeln sind 1:1
   von stage.css uebernommen (dieselbe Vorgabe, dieselbe Rechnung). */

.oq-v7 .oq-textmedia {
  /* Masse aus der Vorgabe, keine Entsprechung in der Abstandsskala */
  --oq-textmedia-breite: 1320px;
  --oq-textmedia-innen-block: clamp(52px, 6.5vw, 92px);
  --oq-textmedia-innen-inline: clamp(20px, 4vw, 56px);
  --oq-textmedia-spalten-abstand: clamp(32px, 4.5vw, 72px);
  --oq-textmedia-bild-radius: 18px;
  --oq-textmedia-bild-format: 4 / 3;
  --oq-textmedia-bild-format-mobil: 4 / 3;

  --oq-farbe-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-farbe-linie: color-mix(in oklab, var(--oq-farbe-text) 18%, var(--oq-farbe-flaeche));

  position: relative;
  container-type: inline-size;
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
}

/* --- Die vier Flaechenrollen ----------------------------------------------
   Identisch zu stage.css — dieselbe Vorgabe, dieselbe Zuordnung von
   v6-Klassen auf Rollen. Siehe dort fuer die ausfuehrliche Begruendung. */

.oq-v7 .oq-textmedia.variant-dark {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-textmedia.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel-alt);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
}

.oq-v7 .oq-textmedia.variant-dark,
.oq-v7 .oq-textmedia.variant-dark-alt {
  /* Pur #fff statt der aufgehellten Markenstufe, siehe stage.css. */
  --oq-farbe-marke-text: #fff;
}

.oq-v7 .oq-textmedia.variant-branded,
.oq-v7 .oq-textmedia.variant-branded-alt {
  --oq-farbe-flaeche: var(--oq-farbe-marke);
  --oq-farbe-text: var(--oq-farbe-marke-kontrast);
}

.oq-v7 .oq-textmedia.variant-neutral,
.oq-v7 .oq-textmedia.variant-neutral-alt {
  --oq-farbe-flaeche: var(--oq-farbe-flaeche-alt);
}

.oq-v7 .oq-textmedia.variant-accent,
.oq-v7 .oq-textmedia.variant-accent-alt {
  --oq-farbe-flaeche: var(--oq-farbe-akzent);
  --oq-farbe-text: var(--oq-farbe-marke-kontrast);
}

/* Pflichtregel aus docs/v7/tokens.md, Abschnitt "Token-Umschrieb auf der
   Markenflaeche": ohne diesen Tausch verschwindet die Markenfarbe auf der
   eigenen Flaeche. Gescoped auf __raster, nicht auf die Section — sonst
   zoege --oq-farbe-flaeche denselben neuen Wert ein. */
.oq-v7 .oq-textmedia.variant-branded .oq-textmedia__raster,
.oq-v7 .oq-textmedia.variant-branded-alt .oq-textmedia__raster,
.oq-v7 .oq-textmedia.variant-accent .oq-textmedia__raster,
.oq-v7 .oq-textmedia.variant-accent-alt .oq-textmedia__raster {
  --oq-farbe-marke: var(--oq-farbe-text);
  --oq-farbe-marke-kontrast: var(--oq-farbe-flaeche);
}

.oq-v7 .oq-textmedia.variant-branded .oq-inhalt__btn--primaer:hover,
.oq-v7 .oq-textmedia.variant-branded-alt .oq-inhalt__btn--primaer:hover,
.oq-v7 .oq-textmedia.variant-accent .oq-inhalt__btn--primaer:hover,
.oq-v7 .oq-textmedia.variant-accent-alt .oq-inhalt__btn--primaer:hover {
  background: color-mix(in oklab, var(--oq-farbe-marke) 88%, var(--oq-farbe-flaeche));
}

/* --- Bildformat folgt der Aufteilung --------------------------------------
   50/50 bleibt beim Default 4/3 (Token oben). Ohne diesen Wechsel wird das
   Bild in der schmalen Spalte zum Streifen — Vorgabe aus dem Mockup. */
.oq-v7 .oq-textmedia--split-30-70 {
  --oq-textmedia-bild-format: 16 / 9;
}

.oq-v7 .oq-textmedia--split-70-30 {
  --oq-textmedia-bild-format: 3 / 4;
}

/* --- Spaltenbreiten folgen der Aufteilung ---------------------------------
   30-70 = Text schmal (30 %) / Medium breit (70 %); 70-30 umgekehrt — nach
   dem woertlichen Feldnamen und dem Mockup. Weicht bewusst davon ab, wie v6
   denselben gespeicherten Feldwert rendert (bekannte, abgesegnete
   Inkonsistenz, siehe docs/superpowers/specs/
   2026-08-19-v7-element-02-text-media-design.md). */
.oq-v7 .oq-textmedia--split-30-70 {
  --oq-textmedia-spalten: 3fr 7fr;
}

.oq-v7 .oq-textmedia--split-70-30 {
  --oq-textmedia-spalten: 7fr 3fr;
}

/* --dreh vertauscht per order, welche Spalte zuerst platziert wird (siehe
   unten) — nicht aber, welche Spurbreite an welcher Position liegt. Ohne
   diese beiden Kombi-Regeln wuerde --dreh mit einem Split die Breiten
   seitenverkehrt rendern, weil grid-template-columns an der Spurposition
   haengt, nicht am platzierten Element. */
.oq-v7 .oq-textmedia--dreh.oq-textmedia--split-30-70 {
  --oq-textmedia-spalten: 7fr 3fr;
}

.oq-v7 .oq-textmedia--dreh.oq-textmedia--split-70-30 {
  --oq-textmedia-spalten: 3fr 7fr;
}

/* --- Layout ---------------------------------------------------------------- */

.oq-v7 .oq-textmedia__raster {
  display: grid;
  grid-template-columns: var(--oq-textmedia-spalten, 1fr 1fr);
  gap: var(--oq-textmedia-spalten-abstand);
  align-items: center;
  width: 100%;
  max-width: var(--oq-textmedia-breite);
  margin-inline: auto;
  padding: var(--oq-textmedia-innen-block) var(--oq-textmedia-innen-inline);
}

.oq-v7 .oq-textmedia__spalte {
  min-width: 0;
}

/* Bildseite umkehren. Ueber "order" auf dem Grid-Item statt Quellreihenfolge
   im Markup — die Bildspalte bleibt im DOM immer an zweiter Stelle, das
   erhaelt die logische Lesereihenfolge fuer Screenreader und Tab-Fokus. */
.oq-v7 .oq-textmedia--dreh .oq-textmedia__spalte--medium {
  order: -1;
}

.oq-v7 .oq-textmedia .oq-inhalt__headline {
  font-size: clamp(2rem, 3.6cqw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.oq-v7 .oq-textmedia--split-30-70 .oq-inhalt__headline {
  font-size: clamp(1.7rem, 2.6cqw, 2.3rem);
}

.oq-v7 .oq-textmedia .oq-inhalt__text {
  font-size: 1.06rem;
  max-width: none;
}

/* --- Medium ----------------------------------------------------------------- */

.oq-v7 .oq-textmedia__medium {
  position: relative;
  margin: 0;
}

.oq-v7 .oq-textmedia__bild {
  display: block;
  width: 100%;
  aspect-ratio: var(--oq-textmedia-bild-format);
  object-fit: cover;
  border-radius: var(--oq-textmedia-bild-radius);
}

/* --- Betonte Ecke (optional) ------------------------------------------
   1:1 aus stage.css uebernommen (dieselbe Vorgabe, dieselbe Rechnung).
   Deckt Bild, Video-Standbild, eingebettetes Video/Audio/Datei ab — eine
   Klasse auf der <figure> statt je Medienzweig im Markup. Wirkt bei der
   Variante "Bildpaar" (zwei Bilder in .oq-textmedia__paar, beide innerhalb
   von .oq-textmedia__medium) auf BEIDE Bilder gleichermassen — bewusst
   keine Spiegelung zwischen den beiden Bildern. */
.oq-v7 .oq-textmedia__medium--ecke-ol :is(.oq-textmedia__bild, picture.oq-textmedia__bild, .oq-textmedia__video, .oq-textmedia__custom-media iframe, .oq-textmedia__custom-media video, .oq-textmedia__audio, .oq-textmedia__datei) {
  border-top-left-radius: var(--oq-radius-akzent);
}

.oq-v7 .oq-textmedia__medium--ecke-or :is(.oq-textmedia__bild, picture.oq-textmedia__bild, .oq-textmedia__video, .oq-textmedia__custom-media iframe, .oq-textmedia__custom-media video, .oq-textmedia__audio, .oq-textmedia__datei) {
  border-top-right-radius: var(--oq-radius-akzent);
}

.oq-v7 .oq-textmedia__medium--ecke-ul :is(.oq-textmedia__bild, picture.oq-textmedia__bild, .oq-textmedia__video, .oq-textmedia__custom-media iframe, .oq-textmedia__custom-media video, .oq-textmedia__audio, .oq-textmedia__datei) {
  border-bottom-left-radius: var(--oq-radius-akzent);
}

.oq-v7 .oq-textmedia__medium--ecke-ur :is(.oq-textmedia__bild, picture.oq-textmedia__bild, .oq-textmedia__video, .oq-textmedia__custom-media iframe, .oq-textmedia__custom-media video, .oq-textmedia__audio, .oq-textmedia__datei) {
  border-bottom-right-radius: var(--oq-radius-akzent);
}

/* --- Imagify-Kompatibilitaet ------------------------------------------------
   Dieselbe Absicherung wie stage.css: Imagify laeuft live im
   "<picture>-Tags"-Modus und wrappt ein nacktes <img>, verschiebt dabei
   Klasse und style-Attribut aufs <picture>. Diese Regeln lesen die
   verschobene Klasse zurueck. Siehe auch die Stage-Fixes in der Git-Historie
   (fix(v7): Stage-Bilder gegen Imagifys picture-Wrap absichern). */
.oq-v7 picture.oq-textmedia__bild {
  display: block;
  width: 100%;
  aspect-ratio: var(--oq-textmedia-bild-format);
  border-radius: var(--oq-textmedia-bild-radius);
  overflow: hidden;
}

.oq-v7 picture.oq-textmedia__bild > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.oq-v7 .oq-textmedia__custom-media {
  display: block;
  width: 100%;
}

.oq-v7 .oq-textmedia__custom-media iframe,
.oq-v7 .oq-textmedia__custom-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--oq-textmedia-bild-radius);
  object-fit: cover;
}

.oq-v7 .oq-textmedia__audio,
.oq-v7 .oq-textmedia__datei {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--oq-space-l);
  border-radius: var(--oq-textmedia-bild-radius);
  background: var(--oq-farbe-flaeche-alt);
}

.oq-v7 .oq-textmedia__audio audio {
  width: 100%;
}

/* --- Video-Trigger ----------------------------------------------------------
   Baut auf src/assets/js/v7-lightbox.js: der Play-Knopf ist ein <button>
   mit data-oq-lightbox-trigger, das Overlay selbst liegt in kern.css. */

.oq-v7 .oq-textmedia__video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--oq-textmedia-bild-radius);
}

.oq-v7 .oq-textmedia__abspielen {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
  display: grid;
  place-items: center;
  transition: background-color var(--oq-transition), transform var(--oq-transition);
}

.oq-v7 .oq-textmedia__video:hover .oq-textmedia__abspielen {
  background: color-mix(in oklab, var(--oq-farbe-marke) 85%, var(--oq-farbe-text));
  transform: scale(1.06);
}

.oq-v7 .oq-textmedia__abspielen svg {
  width: 24px;
  height: 24px;
  margin-inline-start: 3px;
}

/* --- Bildpaar ---------------------------------------------------------------
   Nur bei Split 30/70 gewaehlt (siehe Render-Bruecke), die breite
   Medienspalte traegt zwei quadratische Aufnahmen nebeneinander. */
.oq-v7 .oq-textmedia__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oq-space-s);
}

.oq-v7 .oq-textmedia__paar .oq-textmedia__bild {
  aspect-ratio: 1 / 1;
}

/* --- Aufsatz ------------------------------------------------------------
   1:1 aus stage.css uebernommen (dieselbe Vorgabe, dasselbe Bauteil). */
.oq-v7 .oq-textmedia__aufsatz {
  position: absolute;
  inset-inline-start: calc(var(--oq-space-m) * -1);
  inset-block-end: calc(var(--oq-space-m) * -1);
  max-width: 15rem;
  padding: var(--oq-space-s) var(--oq-space-m);
  border-radius: var(--oq-radius-mittel);
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
}

.oq-v7 .oq-textmedia__aufsatz-wert {
  display: block;
  font-family: var(--oq-schrift-display);
  font-size: 2.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.oq-v7 .oq-textmedia__aufsatz-label {
  display: block;
  margin-block-start: var(--oq-space-3xs);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

/* --- Folge ------------------------------------------------------------------
   Zwei Text-Media-Sektionen direkt hintereinander verschmelzen optisch zu
   einem Abschnitt mit Trennlinie statt doppeltem Sektionsabstand — die
   zweite bekommt aber weiterhin einen reduzierten Eigenabstand
   (--oq-space-xl) ueber der Trennlinie, sonst kleben Inhalt und Linie
   aneinander. BlockRenderer::render() (app/Utils/BlockRenderer.php) wrappt jeden Block in
   ein eigenes <div class="oneqrew-block-wrapper">, die <section> selbst sind
   also nie direkte Geschwister — deshalb :has() auf den Wrapper-Divs statt
   eines direkten Adjacent-Sibling-Selektors auf .oq-textmedia. Braucht
   :has()-Unterstuetzung (Chrome/Edge 105+, Safari 15.4+, Firefox 121+) —
   v7 setzt bereits an anderer Stelle auf moderne CSS-Features
   (color-mix, Container-Queries), das ist keine neue Grenze. */
.oq-v7 .oneqrew-block-wrapper:has(> .oq-textmedia) + .oneqrew-block-wrapper:has(> .oq-textmedia) > .oq-textmedia {
  padding-block-start: 0;
}

.oq-v7 .oneqrew-block-wrapper:has(> .oq-textmedia) + .oneqrew-block-wrapper:has(> .oq-textmedia) > .oq-textmedia .oq-textmedia__raster {
  padding-block-start: var(--oq-space-xl);
  border-top: 1px solid var(--oq-farbe-linie);
}

/* --- Umbrueche --------------------------------------------------------------
   Container-Queries statt Media-Queries, wie bei der Stage: Text-Media kann
   in einer Spalte stehen. */

@container (max-width: 900px) {
  .oq-v7 .oq-textmedia__raster {
    grid-template-columns: 1fr;
  }

  /* Die Split-Regeln oben setzen nur noch die Custom Property
     --oq-textmedia-spalten auf der Section, nicht mehr grid-template-columns
     direkt — die Spurbreite kommt hier oben immer aus genau dieser einen
     Regel, unabhaengig vom Split, daher keine Spezifitaetsfrage mehr. */

  /* Bild immer oben, unabhaengig von --dreh — Vorgabe aus dem Mockup. */
  .oq-v7 .oq-textmedia__spalte--medium {
    order: -1;
  }

  .oq-v7 .oq-textmedia__aufsatz {
    inset-inline-start: var(--oq-space-s);
    inset-block-end: calc(var(--oq-space-s) * -1);
  }
}

@container (max-width: 560px) {
  .oq-v7 .oq-textmedia .oq-inhalt__btn {
    width: 100%;
  }

  .oq-v7 .oq-textmedia__bild,
  .oq-v7 picture.oq-textmedia__bild {
    aspect-ratio: var(--oq-textmedia-bild-format-mobil);
  }

  .oq-v7 .oq-textmedia__paar {
    gap: var(--oq-space-2xs);
  }
}