/* OneQrew v7 — Element 25 Beitrags-Stage (beitragsstage).

   Umsetzung der Design-Vorgabe "taifun-element-25-beitrag-stage.html" fuer
   den Block oneqrew/blog-simple-stage sowie die umgebenden Regeln des
   Beitrags selbst (oq-beitrag__*, aus single.twig). Nicht Teil der
   urspruenglichen 10 Systemelemente, additiv umgebaut wie Video/Pricing
   Table, siehe docs/v7/elemente.md.

   Farbwerte kommen aus der Theme-Palette. --oq-farbe-text-leise/-linie lokal
   berechnet, wie bei faq.css/liste.css. Aenderungen immer auch in
   beitragsstage.min.css. */

.oq-v7 .oq-beitragsstage {
  --oq-farbe-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-farbe-text-schwach: color-mix(in oklab, var(--oq-farbe-text) 58%, var(--oq-farbe-flaeche));
  --oq-farbe-linie: color-mix(in oklab, var(--oq-farbe-text) 18%, var(--oq-farbe-flaeche));

  container-type: inline-size;
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
  padding-block: clamp(26px, 3vw, 40px) clamp(34px, 4vw, 56px);
}

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

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

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

.oq-v7 .oq-beitragsstage__in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.oq-v7 .oq-beitragsstage__satz {
  max-width: min(100%, 46rem);
}

.oq-v7 .oq-beitragsstage__kat-zeile {
  margin-bottom: 16px;
}

.oq-v7 .oq-beitragsstage__kat {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  background: color-mix(in oklab, var(--oq-farbe-marke-text, var(--oq-farbe-marke)) 16%, transparent);
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  padding: 6px 13px;
  min-height: 36px;
  border-radius: var(--oq-radius-klein);
}

.oq-v7 .oq-beitragsstage h1 {
  font-family: var(--oq-schrift-display);
  font-weight: var(--oq-display-gewicht);
  font-size: clamp(2rem, 4cqw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

.oq-v7 .oq-beitragsstage__vorspann {
  font-size: clamp(1.1rem, 1.6cqw, 1.3rem);
  line-height: 1.48;
  color: var(--oq-farbe-text-leise);
  margin-top: 18px;
}

.oq-v7 .oq-beitragsstage__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: 20px;
  border-top: 1px solid var(--oq-farbe-linie);
  font-size: 0.93rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-beitragsstage__meta b {
  color: var(--oq-farbe-text);
  font-weight: 650;
}

.oq-v7 .oq-beitragsstage__aktuell {
  color: var(--oq-farbe-text);
  font-weight: 600;
}

.oq-v7 .oq-beitragsstage__verfasser {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
}

.oq-v7 .oq-beitragsstage__verfasser img {
  width: 46px;
  height: 46px;
  border-radius: var(--oq-radius-mittel);
  object-fit: cover;
  flex: none;
  aspect-ratio: 1;
}

.oq-v7 .oq-beitragsstage__wer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.95rem;
}

.oq-v7 .oq-beitragsstage__wer b {
  font-weight: 650;
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-beitragsstage__wer span {
  font-size: 0.87rem;
  color: var(--oq-farbe-text-schwach);
}

.oq-v7 .oq-beitragsstage__teilen {
  display: flex;
  align-items: center;
  gap: 6px;
}

.oq-v7 .oq-beitragsstage__teilen button,
.oq-v7 .oq-beitragsstage__teilen a {
  width: 44px;
  height: 44px;
  border-radius: var(--oq-radius-klein);
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid var(--oq-farbe-linie);
  color: var(--oq-farbe-text-leise);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--oq-transition), border-color var(--oq-transition);
}

.oq-v7 .oq-beitragsstage__teilen button:hover,
.oq-v7 .oq-beitragsstage__teilen a:hover {
  color: var(--oq-farbe-text);
  border-color: var(--oq-farbe-text-schwach);
}

.oq-v7 .oq-beitragsstage__gemeldet {
  font-size: 0.86rem;
  color: var(--oq-farbe-bestaetigung);
  font-weight: 600;
}

.oq-v7 .oq-beitragsstage__bild {
  margin-top: clamp(26px, 3vw, 40px);
}

.oq-v7 .oq-beitragsstage__bild figure {
  margin: 0;
}

.oq-v7 .oq-beitragsstage__bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--oq-radius-gross, var(--oq-radius-mittel));
  background: color-mix(in oklab, var(--oq-farbe-flaeche) 94%, var(--oq-farbe-text));
}

.oq-v7 .oq-beitragsstage__bild figcaption {
  margin-top: 11px;
  font-size: 0.88rem;
  color: var(--oq-farbe-text-schwach);
  max-width: min(100%, 46rem);
}

.oq-v7 .oq-beitragsstage__iv {
  margin-top: clamp(26px, 3vw, 38px);
  max-width: min(100%, 46rem);
  background: color-mix(in oklab, var(--oq-farbe-flaeche) 94%, var(--oq-farbe-text));
  border: 1px solid var(--oq-farbe-linie);
  border-radius: var(--oq-radius-gross, var(--oq-radius-mittel));
}

.oq-v7 .oq-beitragsstage__iv summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  min-height: 58px;
  font-weight: 650;
  font-size: 1rem;
}

.oq-v7 .oq-beitragsstage__iv summary::-webkit-details-marker {
  display: none;
}

.oq-v7 .oq-beitragsstage__iv-pm {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--oq-radius-mittel);
  display: grid;
  place-items: center;
  position: relative;
  background: color-mix(in oklab, var(--oq-farbe-text) 12%, transparent);
}

.oq-v7 .oq-beitragsstage__iv-pm::before {
  content: "";
  width: 11px;
  height: 2px;
  background: currentColor;
}

.oq-v7 .oq-beitragsstage__iv-pm::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 11px;
  background: currentColor;
  transition: opacity var(--oq-transition);
}

.oq-v7 .oq-beitragsstage__iv[open] summary .oq-beitragsstage__iv-pm {
  background: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  color: var(--oq-farbe-flaeche);
}

.oq-v7 .oq-beitragsstage__iv[open] summary .oq-beitragsstage__iv-pm::after {
  opacity: 0;
}

.oq-v7 .oq-beitragsstage__iv ol {
  list-style: none;
  counter-reset: oq-toc;
  padding: 0 20px 18px;
  display: grid;
  gap: 2px;
}

.oq-v7 .oq-beitragsstage__iv li {
  counter-increment: oq-toc;
}

.oq-v7 .oq-beitragsstage__iv a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 10px;
  margin-inline: -10px;
  border-radius: var(--oq-radius-klein);
  font-size: 0.99rem;
  color: var(--oq-farbe-text-leise);
  text-decoration: none;
  min-height: 44px;
}

.oq-v7 .oq-beitragsstage__iv a::before {
  content: counter(oq-toc);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  font-variant-numeric: tabular-nums;
  min-width: 1.4ch;
}

.oq-v7 .oq-beitragsstage__iv a:hover {
  background: color-mix(in oklab, var(--oq-farbe-flaeche) 88%, var(--oq-farbe-text));
  color: var(--oq-farbe-text);
}

@container (max-width: 640px) {
  .oq-v7 .oq-beitragsstage__meta {
    gap: 14px;
  }

  .oq-v7 .oq-beitragsstage__verfasser {
    margin-right: 0;
    width: 100%;
  }

  .oq-v7 .oq-beitragsstage__teilen {
    width: 100%;
  }
}

/* --- Beitragskoerper (aus single.twig) ------------------------------------
   Lesebreite fuer Text, Bild darf breiter sein. */
.oq-v7 .oq-beitrag {
  background: var(--oq-farbe-flaeche);
}

.oq-v7 .oq-beitrag__inhalt {
  max-width: min(100%, 46rem);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  padding-block: clamp(26px, 3vw, 40px);
  color: var(--oq-farbe-text);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Wie kern.css .oq-inhalt__text a: dieselbe Luecke, dieselbe Regel — der
   Beitragskoerper ist ein eigener TinyMCE-Container, erbt die
   kern.css-Regel nicht. */
.oq-v7 .oq-beitrag__inhalt a {
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}

.oq-v7 .oq-beitrag__inhalt a:hover {
  color: color-mix(in oklab, var(--oq-farbe-marke-text, var(--oq-farbe-marke)) 85%, var(--oq-farbe-text));
}

/* Wie kern.css .oq-inhalt__text: der globale :where(ul,ol)-Reset nimmt dem
   nackten TinyMCE-Beitragstext Punkte/Nummerierung und Einzug. */
.oq-v7 .oq-beitrag__inhalt ul,
.oq-v7 .oq-beitrag__inhalt ol {
  margin-block: 1em;
  padding-inline-start: 1.5em;
}

.oq-v7 .oq-beitrag__inhalt ul {
  list-style-type: disc;
}

.oq-v7 .oq-beitrag__inhalt ol {
  list-style-type: decimal;
}

.oq-v7 .oq-beitrag__inhalt li + li {
  margin-block-start: 0.35em;
}

.oq-v7 .oq-beitrag__inhalt h2 {
  font-family: var(--oq-schrift-display);
  font-weight: var(--oq-display-gewicht);
  font-size: 1.5rem;
  letter-spacing: -0.024em;
  margin-block: 2em 0.6em;
  /* Element 34 Sprungmarken: Versatz, damit die Ueberschrift nach einem
     Sprung aus dem Inhaltsverzeichnis nicht unter der klebenden Kopfleiste
     liegt. Der genaue Wert steht nicht fest — die v7-Kopfleiste ist noch
     inaktiv (StyleLoader::CHROME_IS_V7), live steht die v6-Kopfleiste mit
     wechselnder Hoehe (Ticker/Top-Menu je Bildschirmbreite). v7-toc.js misst
     die tatsaechliche Hoehe zur Laufzeit und setzt --oq-toc-versatz; ohne
     Skript greift der Rueckfall. */
  scroll-margin-top: var(--oq-toc-versatz, 90px);
}

.oq-v7 .oq-beitrag__weitere {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(30px, 3.6vw, 46px) clamp(20px, 4vw, 56px);
  border-top: 1px solid color-mix(in oklab, var(--oq-farbe-text) 14%, transparent);
}

.oq-v7 .oq-beitrag__weitere h2 {
  font-family: var(--oq-schrift-display);
  font-weight: var(--oq-display-gewicht);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.oq-v7 .oq-beitrag__weitere-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.oq-v7 .oq-beitrag__weitere-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--oq-farbe-text);
  font-weight: 650;
}

.oq-v7 .oq-beitrag__weitere-karte img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--oq-radius-mittel);
}

@media (max-width: 760px) {
  .oq-v7 .oq-beitrag__weitere-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}