/* OneQrew v7 — Schicht 1: Kern.
   Raster, Abstaende, Umbruchpunkte, Zustaende, Fokusring.
   Enthaelt bewusst KEINE Farb- und keine Schriftwerte — die stehen in
   dist/css/v7/pakete/<paket>.css. Aenderungen immer auch in kern.min.css. */

/* Schriftauslieferung fuer die zwei Hausfamilien, auf die
   --oq-schrift-text/-display/-akzent im Paket per Name verweisen (siehe
   dist/css/v7/pakete/standard.css). Kein Schriftwert im Sinne des
   Kommentars oben — hier wird keine Familie festgelegt, nur die zwei
   Dateien geladen, auf die die Paket-Tokens zeigen. kern.css ist immer die
   erste geladene v7-Datei (StyleLoader::IMMER), also der einzige Ort, an
   dem das garantiert genau einmal pro Seite passiert. Genau zwei Familien
   nach docs/v7/performance.md ("Schriften als woff2 preloaden, hoechstens
   zwei Familien"); WOFF2-only wie im v6-Pendant
   (src/assets/scss/base/fonts.css) — jeder Zielbrowser unterstuetzt WOFF2,
   ein TTF-Fallback wird nie angefragt. */
@font-face {
  font-family: 'AcidGrotesk-OneQrew-Book';
  src: url('../../../src/assets/fonts/AcidGrotesk-OneQrew-Book.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'AcidGrotesk-OneQrew-Bold';
  src: url('../../../src/assets/fonts/AcidGrotesk-OneQrew-Bold.woff2') format('woff2');
  font-display: swap;
}

/* Basis-Schriftfamilie auf dem body-Scope: jede Sektionsinhalt-Komponente
   (.oq-inhalt__text/-headline/-roofline weiter unten) referenziert
   --oq-schrift-text/-display explizit selbst, aber Chrome (Element 16,
   dist/css/v7/chrome.css) tut das an mehreren Stellen bewusst NICHT — z. B.
   .oq-kopf__punkt setzt ausdruecklich "font-family: inherit", .oq-kopf__melde
   (News-Ticker, Label, Eintraege) gar keinen eigenen Wert. Beide gingen
   damit von einer Basis-Schriftfamilie hier aus, die es nie gab: Tailwinds
   Preflight (nur auf Seiten mit Legacy-Fallback geladen, siehe
   EnqueueProvider::enqueueStyles()) setzt html{font-family:ui-sans-serif,…},
   auf einer reinen v7-Seite ohne Fallback fehlte jede Basis komplett — in
   beiden Faellen rendern Hauptmenue und Ticker in der System-/Tailwind-
   Schrift statt AcidGrotesk, obwohl @font-face oben laengst laedt. Nur der
   Token, keine Literalschrift — bleibt im Sinne des Dateikopf-Kommentars
   ("kein Schriftwert", siehe oben), Farbe/Schrift-Werte selbst stehen
   weiterhin ausschliesslich in pakete/standard.css. */
.oq-v7 {
  font-family: var(--oq-schrift-text);
}

:root {
  /* Abstandsskala */
  --oq-space-3xs: 0.25rem;
  --oq-space-2xs: 0.5rem;
  --oq-space-xs: 0.75rem;
  --oq-space-s: 1rem;
  --oq-space-m: 1.5rem;
  --oq-space-l: 2.5rem;
  --oq-space-xl: 4rem;
  --oq-space-2xl: 6rem;
  --oq-space-3xl: 8rem;

  /* Raster */
  --oq-container: 1600px;
  --oq-container-text: 72ch;
  --oq-gutter: var(--oq-space-m);
  --oq-columns: 12;

  /* Zustaende */
  --oq-focus-width: 2px;
  --oq-focus-offset: 3px;
  --oq-transition: 150ms ease-in-out;
  --oq-tap-min: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* kern.css laedt nur in v7 (StyleLoader::enqueue() bricht sonst ab), aber
   die alten Tailwind-Bundles laden nur noch, solange
   StyleLoader::needsLegacyFallback() true ist. Eine Seite, deren Bloecke
   vollstaendig in ElementRegistry stehen, bekam deshalb bisher WEDER
   Tailwinds Preflight-Reset NOCH einen eigenen: Ueberschriften fielen auf
   die Browser-Vorgabe zurueck (riesig, fett, mit Aussenabstand), Listen
   zeigten wieder ihre Aufzaehlungspunkte. kern.css haengte sich hier still
   an ein Bundle, das v7 eigentlich ablösen soll. Minimaler, aus Tailwinds
   Preflight uebernommener Ausschnitt (nur die Werte, die diese Faelle
   abdecken), dauerhaft hier statt einer stillen Abhaengigkeit. Laedt
   Tailwind auf einer Seite zusaetzlich (Fallback noch noetig), setzen beide
   Regelsaetze exakt dieselben Werte — keine Kollision.

   Zwingend :where(): eine blanke Kombination aus Klasse und Elementtyp
   (".oq-v7 h2") waere spezifischer als spaetere Komponentenklassen wie
   ".oq-inhalt__headline" (nur eine Klasse) und wuerde deren
   margin-block-end trotz spaeterer Reihenfolge im Stylesheet schlagen.
   :where() traegt null Spezifitaet bei, die Regel bleibt bei ".oq-v7"
   allein (0,1,0) — gleichauf mit den Komponentenklassen, sodass deren
   spaetere Position im Stylesheet wie gewohnt gewinnt. Gleiches Muster wie
   ".oq-v7 :where(img, picture, video, svg)" weiter unten in dieser Datei. */
.oq-v7 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.oq-v7 :where(p, blockquote, dl, dd, figure, hr, pre) {
  margin: 0;
}

.oq-v7 :where(menu, ol, ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* tailwind-responsive-core.css setzt "main ul :not(.glide ul):not(.wpform
   ul) li{list-style-type:disc}" direkt auf jedem li (nicht vererbt) — das
   schlaegt die :where()-Reset oben (Spezifitaet null), solange
   StyleLoader::needsLegacyFallback() das Tailwind-Bundle noch mitlaedt.
   Betraf bereits redaktionelle Listen in Fliesstext, das Logo-Band und
   Featured Links, je einzeln nachgeruestet — hier stattdessen einmal
   global fuer jedes li in v7: "inherit" uebernimmt list-style-type vom
   Elternelement (dank der Reset-Regel oben "none"), "!important" gewinnt
   hart gegen Tailwinds nicht-!important-Regel unabhaengig von Spezifitaet. */
.oq-v7 li {
  list-style-type: inherit !important;
}

.oq-v7 .oq-container {
  width: 100%;
  max-width: var(--oq-container);
  margin-inline: auto;
  padding-inline: var(--oq-gutter);
}

.oq-v7 .oq-container--text {
  max-width: var(--oq-container-text);
}

.oq-v7 .oq-section {
  padding-block: var(--oq-space-2xl);
}

/* Alles unterhalb des Falzes darf spaet rendern. contain-intrinsic-size ist
   Pflicht — ohne die Reservierung handelt man sich Layout Shift ein. */
.oq-v7 .oq-defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.oq-v7 :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--oq-focus-width) solid var(--oq-focus-ring, currentColor);
  outline-offset: var(--oq-focus-offset);
}

.oq-v7 :where(a, button)[data-oq-tap] {
  min-width: var(--oq-tap-min);
  min-height: var(--oq-tap-min);
}

.oq-v7 :where(img, picture, video, svg) {
  max-width: 100%;
  height: auto;
}

.oq-v7 .oq-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .oq-v7 *,
  .oq-v7 *::before,
  .oq-v7 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Sektionsinhalt ------------------------------------------------------
   Der gemeinsame Contract aller v7-Elemente: Dachzeile, Headline,
   Fliesstext, ein Modul, Aktionen, Trustsignal. Steht im Kern, weil er auf
   jeder Seite vorkommt und damit immer vor dem Element-CSS geladen wird —
   die alphabetische Ladereihenfolge der Elementdateien spielt fuer ihn
   keine Rolle. Ein Element ueberschreibt hier nur, was bei ihm abweicht. */

/* --- Die Marke als Schrift ------------------------------------------------

   --oq-farbe-marke-text ist die Marke dort, wo sie als Schrift oder als feine
   Marke auftritt statt als Flaeche: Dachzeile, Headline-Akzent, der Punkt der
   Prozesskette. Der Unterschied ist der Kontrastbedarf. Eine Flaeche traegt
   ihren eigenen Text und braucht gegen den Grund nur erkennbar zu sein; ein
   Schriftzug muss selbst lesbar sein.

   Bewusst ohne eigene Deklaration: die Rolle existiert nur als Rueckfall in
   den Regeln unten. Damit gilt auf jeder gewoehnlichen Flaeche die Marke
   selbst, und auf branded/accent greift automatisch der Tausch, den das
   Element auf --oq-farbe-marke gelegt hat — der Rueckfall loest am
   verbrauchenden Element auf, nicht an der Stelle der Deklaration.

   Ueberschrieben wird sie dort, wo die Marke pur nicht mehr traegt. Auf dem
   dunklen Grund tut das dist/css/v7/elemente/stage.css. */

/* Dachzeile nach Fassung 9: kein Versalsatz, kein Monospace, sondern ein
   halbfetter Satz in Akzentfarbe mit vorangestelltem Punkt. Der Punkt ist
   Dekoration und entsteht deshalb in CSS, nicht im Markup. */
.oq-v7 .oq-inhalt__roofline {
  display: inline-flex;
  align-items: center;
  gap: var(--oq-space-2xs);
  margin-block-end: var(--oq-space-m);
  font-family: var(--oq-schrift-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

/* Der Punkt traegt die volle Marke, nicht die aufgehellte Schriftfarbe: er ist
   eine kleine Flaeche und kein Buchstabe. Deshalb ausdruecklich
   --oq-farbe-marke statt currentColor — sonst uebernaehme er die Farbe der
   Dachzeile, die auf dunklem Grund aufgehellt ist. */
.oq-v7 .oq-inhalt__roofline::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oq-farbe-marke);
}

.oq-v7 .oq-inhalt__headline {
  margin-block-end: var(--oq-space-m);
  font-family: var(--oq-schrift-display);
  font-size: var(--oq-display-groesse);
  font-weight: var(--oq-display-gewicht);
  letter-spacing: var(--oq-display-laufweite);
  line-height: var(--oq-display-zeilenhoehe);
  /* Umbruchschutz fuer lange deutsche Komposita, wie im v6-Pendant per
     Inline-Style — hier als Klassenregel statt Inline-Style. */
  overflow-wrap: break-word;
}

/* Der Sternchen-Akzent der Redaktion, gesetzt von App\V7\Text::accent(). */
.oq-v7 .oq-inhalt__akzent {
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

.oq-v7 .oq-inhalt__text {
  font-family: var(--oq-schrift-text);
  line-height: var(--oq-dichte-text);
  max-width: var(--oq-container-text);
}

/* v7 hatte fuer Links im Fliesstext bisher gar keine eigene Regel — die
   Ausnahmen in EnqueueProvider::enqueueStyles() (DesignMode::isV7() ? '' :
   ...) schalteten das v6-Compat-CSS fuer v7 ab, ohne dass hier je ein
   Ersatz stand. Links im Fliesstext waren dadurch auf Browser-Standardblau
   zurueckgefallen. */
.oq-v7 .oq-inhalt__text 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-inhalt__text a:hover {
  color: color-mix(in oklab, var(--oq-farbe-marke-text, var(--oq-farbe-marke)) 85%, var(--oq-farbe-text));
}

/* Redaktionelle Listen im WYSIWYG-Fliesstext (TinyMCE liefert nacktes
   ul/ol/li ohne eigene Klasse) verloren durch den globalen :where(ul,ol)-
   Reset oben ihre Punkte/Nummerierung UND ihren Einzug. .oq-v7 li erbt
   list-style-type per !important vom Elternelement (siehe Kommentar dort) —
   die Wiederherstellung hier auf ul/ol selbst reicht deshalb aus. */
.oq-v7 .oq-inhalt__text ul,
.oq-v7 .oq-inhalt__text ol {
  margin-block: 1em;
  padding-inline-start: 1.5em;
}

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

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

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

/* Modifier fuer "Use Narrow Content Width" (inhalt.schmal): schraenkt
   Dachzeile, Headline und Fliesstext einzeln auf --oq-container-text (72ch)
   ein. KEINE Parität zum v6-Pendant: section-intro.twig (v6) packt Dachzeile,
   Headline, Fliesstext UND die Aktionen (Buttons) in einen gemeinsamen,
   zentrierten Container mit max-w-[700px] mx-auto — v7 zentriert nicht,
   bindet die Aktionen nicht ein und nutzt eine andere Breite (72ch statt
   700px). Als eigene Modifier-Klasse, damit der Default unangetastet bleibt
   — sektionskopf.twig haengt sie nur bei inhalt.schmal an. */
.oq-v7 .oq-inhalt__roofline--schmal,
.oq-v7 .oq-inhalt__headline--schmal,
.oq-v7 .oq-inhalt__text--schmal {
  max-width: var(--oq-container-text);
}

/* Scroll-Container: verhindert, dass eine breite Tabelle die halbbreite
   Spalte (und damit die ganze Section) aufschiebt. */
.oq-v7 .oq-inhalt__tabelle-scroll {
  margin-block-start: var(--oq-space-l);
  overflow-x: auto;
}

.oq-v7 .oq-inhalt__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--oq-schrift-text);
  line-height: var(--oq-dichte-text);
  text-align: start;
}

.oq-v7 .oq-inhalt__tabelle th,
.oq-v7 .oq-inhalt__tabelle td {
  padding-block: var(--oq-space-xs);
  padding-inline-end: var(--oq-space-s);
  border-block-end: 1px solid var(--oq-farbe-linie);
  text-align: start;
  vertical-align: baseline;
}

.oq-v7 .oq-inhalt__tabelle thead th {
  font-family: var(--oq-schrift-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__marker {
  font-family: var(--oq-schrift-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--oq-farbe-text-leise);
  white-space: nowrap;
}

/* Der Pfeil ist CSS, kein Zeichen im Markup. */
.oq-v7 .oq-inhalt__ziel {
  position: relative;
  padding-inline-start: var(--oq-space-l);
  font-weight: 600;
}

.oq-v7 .oq-inhalt__ziel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  /* Absicht: Mitte der ERSTEN Zeile, nicht der Zelle — der Strich fuehrt in
     den Text hinein. Bricht der Zieltext um, waechst die Zelle, aber dieser
     Offset bleibt an der ersten Zeile. Nicht auf Zellmitte "korrigieren". */
  inset-block-start: calc(var(--oq-dichte-text) * 1em / 2);
  width: var(--oq-space-m);
  height: 1px;
  background: var(--oq-farbe-marke);
}

.oq-v7 .oq-inhalt__liste {
  margin-block-start: var(--oq-space-l);
  padding: 0;
  list-style: none;
  font-family: var(--oq-schrift-text);
}

.oq-v7 .oq-inhalt__eintrag {
  display: flex;
  gap: var(--oq-space-s);
  align-items: baseline;
  padding-block: var(--oq-space-xs);
  border-block-end: 1px solid var(--oq-farbe-linie);
}

/* Nur belegt, wenn eine Zeile eine Zusatzzeile traegt — sonst bleibt der
   Textinhalt genau das unformatierte <span> von vorher, keine optische
   Aenderung an bestehenden Checklisten ohne Zusatzzeile. */
.oq-v7 .oq-inhalt__eintrag-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.oq-v7 .oq-inhalt__eintrag-text b {
  font-weight: 600;
}

.oq-v7 .oq-inhalt__eintrag-zusatz {
  display: block;
  font-size: 0.9em;
  color: var(--oq-farbe-text-leise);
}

/* Raster: dieselben Zeilen wie einspaltig, nur als Grid statt Liste
   untereinander — fuer viele kurze Punkte ohne Zusatzzeile. */
.oq-v7 .oq-inhalt__liste--raster {
  display: grid;
  grid-template-columns: repeat(var(--oq-inhalt-liste-spalten, 2), minmax(0, 1fr));
  gap: var(--oq-space-2xs) clamp(20px, 2.6vw, 40px);
}

.oq-v7 .oq-inhalt__liste--raster .oq-inhalt__eintrag {
  border-block-end: 0;
}

/* --- Zustand (3-Zustaende-Marker) ----------------------------------------
   Kein Rot fuer "nicht enthalten" — es ist kein Fehler, sondern eine
   Abgrenzung. "ja" nutzt dieselbe Hakenfarbe wie der Trust-Haken, "extra"
   die Akzentfarbe, "nein" bleibt neutral (Kontur, keine Flaeche). */
.oq-v7 .oq-inhalt__zustand {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  flex: none;
  transform: translateY(0.15em);
}

.oq-v7 .oq-inhalt__zustand--ja {
  background: var(--oq-farbe-haken, var(--oq-farbe-bestaetigung));
}

.oq-v7 .oq-inhalt__zustand--ja::after {
  content: "";
  position: absolute;
  left: 27%;
  top: 27%;
  width: 42%;
  height: 24%;
  border: 2px solid var(--oq-farbe-haken-strich, var(--oq-farbe-akzent-kontrast));
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.oq-v7 .oq-inhalt__zustand--nein {
  border: 2px solid color-mix(in oklab, var(--oq-farbe-text) 30%, transparent);
}

.oq-v7 .oq-inhalt__zustand--nein::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 42%;
  width: 56%;
  height: 2px;
  background: color-mix(in oklab, var(--oq-farbe-text) 42%, transparent);
}

.oq-v7 .oq-inhalt__zustand--extra {
  border: 2px solid var(--oq-farbe-akzent);
  color: var(--oq-farbe-akzent);
}

.oq-v7 .oq-inhalt__zustand--extra::before,
.oq-v7 .oq-inhalt__zustand--extra::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.oq-v7 .oq-inhalt__zustand--extra::before {
  width: 2px;
  height: 44%;
}

.oq-v7 .oq-inhalt__zustand--extra::after {
  width: 44%;
  height: 2px;
}

.oq-v7 .oq-inhalt__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-block-start: var(--oq-space-m);
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__legende li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.oq-v7 .oq-inhalt__legende .oq-inhalt__zustand {
  width: 1.1em;
  height: 1.1em;
  transform: none;
}

/* --- Haken -------------------------------------------------------------- */

/* Bestaetigung ist gruen, nicht Marke: ein Haken sagt "erledigt, stimmt,
   inklusive" und das ist eine Statusaussage. Deshalb steht --oq-farbe-haken
   per Rueckfall auf --oq-farbe-bestaetigung, einer festen Statusfarbe aus dem
   Paket, und nicht in der Theme-Palette.

   Die Farbe laesst sich ueberschreiben, ohne diese Regeln anzufassen: eine
   der Modifier-Klassen weiter unten an einem beliebigen Vorfahren, oder bei
   freier Wahl --oq-farbe-haken direkt im style-Attribut. Custom Properties
   vererben, die Klasse darf also an der Section haengen und wirkt auf jeden
   Haken darin.

   Zwei Rollen, weil es zwei Haken gibt: --oq-farbe-haken ist die Scheibe des
   Trust-Hakens und zugleich die Strichfarbe des freistehenden Hakens,
   --oq-farbe-haken-strich das Haekchen INNERHALB der Scheibe. Wer eine eigene
   Farbe setzt, muss den Strich mitsetzen, sonst bleibt er auf der dunklen
   Tinte — auf einer dunklen Wunschfarbe waere er dann unsichtbar. CSS kann
   die Helligkeit einer Farbe nicht abfragen, das entscheidet der Picker. */
.oq-v7 .oq-inhalt__haken {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  color: var(--oq-farbe-haken, var(--oq-farbe-bestaetigung));
  transform: translateY(0.125em);
}

.oq-v7 .oq-haken--gruen {
  --oq-farbe-haken: var(--oq-farbe-bestaetigung);
  --oq-farbe-haken-strich: var(--oq-farbe-akzent-kontrast);
}

.oq-v7 .oq-haken--marke {
  --oq-farbe-haken: var(--oq-farbe-marke);
  --oq-farbe-haken-strich: var(--oq-farbe-marke-kontrast);
}

/* Der Strich steht hier auf --oq-farbe-marke-kontrast und nicht auf
   --oq-farbe-akzent-kontrast: letzteres ist trotz seines Namens die dunkle
   Tinte, und die Akzentfarbe der Palette ist ein gesaettigter Mittelton.
   Bei einer hellen Akzentfarbe muesste das umgekehrt werden. */
.oq-v7 .oq-haken--akzent {
  --oq-farbe-haken: var(--oq-farbe-akzent);
  --oq-farbe-haken-strich: var(--oq-farbe-marke-kontrast);
}

.oq-v7 .oq-inhalt__kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oq-space-l);
  margin-block: var(--oq-space-l) 0;
}

/* Haelt dt (Label) und dd (Wert) als sichtbares Paar zusammen. Im Markup
   steht dt vor dd (gueltige dl-Gruppe), die visuelle Reihenfolge wird hier
   per "order" zurueckgetauscht, damit der Wert weiterhin gross oben und das
   Label klein darunter erscheint. */
.oq-v7 .oq-inhalt__kennzahl {
  display: flex;
  flex-direction: column;
}

.oq-v7 .oq-inhalt__kennzahl-wert {
  order: -1;
  font-family: var(--oq-schrift-display);
  font-size: 2rem;
  font-weight: var(--oq-display-gewicht);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--oq-farbe-marke);
}

.oq-v7 .oq-inhalt__kennzahl-label {
  order: 1;
  margin-block-start: var(--oq-space-3xs);
  font-family: var(--oq-schrift-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oq-space-xs);
  margin-block-start: var(--oq-space-m);
}

/* Custom-Button-HTML: der Wrapper selbst traegt kein eigenes Erscheinungsbild
   und reicht das Redaktions-Markup 1:1 als Flex-Item an .oq-inhalt__aktionen
   weiter, damit Abstand/Ausrichtung mit den regulaeren Buttons uebereinstimmt. */
.oq-v7 .oq-inhalt__custom-btn {
  display: contents;
}

/* Masse aus Fassung 9: 52 Pixel Mindesthoehe, 8 Pixel Radius, 2 Pixel Rand.
   Der Radius haengt an --oq-radius-mittel und damit am Paket, die anderen
   beiden Werte kennt keine Skala. */
.oq-v7 .oq-inhalt__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oq-space-2xs);
  min-height: 52px;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: var(--oq-radius-mittel);
  font-family: var(--oq-schrift-text);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color var(--oq-transition), color var(--oq-transition), border-color var(--oq-transition);
}

.oq-v7 .oq-inhalt__btn--primaer {
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
}

/* Fassung 9 hellt den Akzent im Hover auf dunklem Grund auf und dunkelt ihn
   auf hellem ab. Beides ist dieselbe Bewegung: ein Stueck in Richtung der
   Textfarbe der Sektion, die auf jeder Flaeche den groessten Abstand zur
   Flaeche selbst hat. Auf der Markenflaeche faellt das zusammen — dort
   ueberschreibt das Element den Hover (siehe elemente/stage.css). */
.oq-v7 .oq-inhalt__btn--primaer:hover {
  background-color: color-mix(in oklab, var(--oq-farbe-marke) 85%, var(--oq-farbe-text));
}

.oq-v7 .oq-inhalt__btn--sekundaer {
  border-color: var(--oq-farbe-linie);
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-inhalt__btn--sekundaer:hover {
  border-color: var(--oq-farbe-text);
}

/* Dritte Stufe: reiner Link, keine Flaeche und kein Rahmen. Setzt die
   Buttonmasse der Basis wieder zurueck — 52 Pixel Hoehe und 28 Pixel Polster
   wuerden einen Textlink im Fliesstext wie einen verungluecken Button
   aussehen lassen. Bleibt bei 44 Pixel, dem Mindestmass fuer Touchziele.

   Der Unterstrich haengt an .oq-inhalt__btn-text und nicht am Element selbst:
   als inline-flex-Container wuerde die Dekoration sonst quer ueber Luecke und
   Pfeil laufen. Fehlt der Wrapper im Markup, greift der Rueckfall darunter
   und unterstreicht das Element — dann eben inklusive Luecke. */
.oq-v7 .oq-inhalt__btn--tertiaer {
  min-height: var(--oq-tap-min);
  padding: 0;
  border: 0;
  background: none;
  /* Schrift, keine Flaeche — deshalb dieselbe Rolle wie Dachzeile und
     Headline-Akzent, nicht die Marke selbst. */
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

.oq-v7 .oq-inhalt__btn--tertiaer .oq-inhalt__btn-text,
.oq-v7 .oq-inhalt__btn--tertiaer:not(:has(.oq-inhalt__btn-text)) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Dieselbe Bewegung wie beim primaeren Button: ein Stueck in Richtung der
   Textfarbe der Sektion. Der Pfeil wandert ueber die Basisregel mit. */
.oq-v7 .oq-inhalt__btn--tertiaer:hover {
  color: color-mix(in oklab, var(--oq-farbe-marke-text, var(--oq-farbe-marke)) 85%, var(--oq-farbe-text));
}

/* Der Pfeil des primaeren Buttons ist CSS, kein Zeichen im Markup — sonst
   laese ihn ein Screenreader als Text mit. */
.oq-v7 .oq-inhalt__pfeil {
  position: relative;
  flex: none;
  width: 17px;
  height: 10px;
  transition: transform var(--oq-transition);
}

.oq-v7 .oq-inhalt__pfeil::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 4.5px;
  width: 17px;
  height: 2px;
  background: currentColor;
}

.oq-v7 .oq-inhalt__pfeil::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 1.5px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.oq-v7 .oq-inhalt__btn:hover .oq-inhalt__pfeil {
  transform: translateX(6px);
}

/* Zitat-Modul */
.oq-v7 .oq-inhalt__zitat {
  margin-block: var(--oq-space-m);
  padding-inline-start: var(--oq-space-s);
  border-inline-start: 2px solid var(--oq-farbe-marke);
}

.oq-v7 .oq-inhalt__zitat-text {
  margin: 0;
  font-family: var(--oq-schrift-akzent);
  line-height: var(--oq-dichte-text);
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-inhalt__zitat-quelle {
  display: flex;
  gap: var(--oq-space-2xs);
  align-items: center;
  margin-block-start: var(--oq-space-xs);
  font-size: 0.875em;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__zitat-bild {
  flex: none;
  width: var(--oq-space-l);
  height: var(--oq-space-l);
  object-fit: cover;
  border-radius: 50%;
}

/* Shortcode-Modul: der eingebettete Inhalt bringt sein eigenes Layout mit,
   hier wird nur der Abstand nach oben und unten gesetzt. */
.oq-v7 .oq-inhalt__shortcode {
  margin-block: var(--oq-space-m);
}

/* Nur im Block-Editor sichtbar: Hinweis, dass Shortcode-Vorschauen in
   ACF-Block-Previews eingeschraenkt sind. */
.oq-v7 .oq-inhalt__editor-hinweis {
  margin: 0;
  padding: var(--oq-space-xs);
  border: 1px dashed var(--oq-farbe-linie);
  border-radius: var(--oq-radius-klein);
  font-size: 0.875em;
  color: var(--oq-farbe-text-leise);
}

/* Trustsignal-Zeile — der "Beleg" aus Fassung 9. Eine Zeile unter den
   Buttons, ruhig gesetzt, mit dem gruenen Haken als einzigem Farbakzent. */
.oq-v7 .oq-inhalt__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oq-space-2xs) var(--oq-space-m);
  max-width: 46ch;
  margin: var(--oq-space-m) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__trust-eintrag {
  display: flex;
  gap: var(--oq-space-2xs);
  align-items: center;
}

.oq-v7 .oq-inhalt__trust-icon {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--oq-farbe-marke);
}

/* Der Haken sitzt als einziges Icon in einer gefuellten Scheibe. Farben siehe
   Haken-Block weiter oben: gruen als Standard, umstellbar per Modifier oder
   --oq-farbe-haken im style-Attribut. */
.oq-v7 .oq-inhalt__trust-icon--haken {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: var(--oq-farbe-haken, var(--oq-farbe-bestaetigung));
  color: var(--oq-farbe-haken-strich, var(--oq-farbe-akzent-kontrast));
}

/* Aufklapper-Modul. Das +/−-Zeichen ist reines CSS, kein Icon-Font, kein
   SVG — zwei Balken, der senkrechte verschwindet im geöffneten Zustand. */
.oq-v7 .oq-inhalt__aufklapper {
  margin-block-start: var(--oq-space-l);
  border: 1px solid var(--oq-farbe-linie);
  border-radius: var(--oq-radius-mittel);
}

.oq-v7 .oq-inhalt__aufklapper-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oq-space-s);
  min-height: var(--oq-tap-min);
  padding: var(--oq-space-s) var(--oq-space-m);
  list-style: none;
  font-family: var(--oq-schrift-text);
  font-weight: 650;
  cursor: pointer;
}

.oq-v7 .oq-inhalt__aufklapper-titel::-webkit-details-marker {
  display: none;
}

.oq-v7 .oq-inhalt__aufklapper-zeichen {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--oq-radius-klein);
  background: color-mix(in oklab, var(--oq-farbe-text) 12%, transparent);
  transition: background-color var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-inhalt__aufklapper-zeichen::before,
.oq-v7 .oq-inhalt__aufklapper-zeichen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.oq-v7 .oq-inhalt__aufklapper-zeichen::before {
  width: 11px;
  height: 2px;
}

.oq-v7 .oq-inhalt__aufklapper-zeichen::after {
  width: 2px;
  height: 11px;
  transition: opacity var(--oq-transition);
}

.oq-v7 details[open] > .oq-inhalt__aufklapper-titel .oq-inhalt__aufklapper-zeichen {
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
}

.oq-v7 details[open] > .oq-inhalt__aufklapper-titel .oq-inhalt__aufklapper-zeichen::after {
  opacity: 0;
}

.oq-v7 .oq-inhalt__aufklapper-liste {
  display: grid;
  gap: var(--oq-space-2xs);
  margin: 0;
  padding: 0 var(--oq-space-m) var(--oq-space-m);
  list-style: none;
  font-size: 0.95rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__aufklapper-liste li {
  position: relative;
  padding-inline-start: var(--oq-space-s);
}

/* Freie Aufklapper-Inhalte (WYSIWYG-Text statt Liste), z.B. Float Image
   Text "Full Text". Gleiches Innenmass wie -liste, ohne Listensemantik. */
.oq-v7 .oq-inhalt__aufklapper-inhalt {
  padding: 0 var(--oq-space-m) var(--oq-space-m);
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-inhalt__aufklapper-liste li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oq-farbe-marke);
}

/* Modifier "--einfach": Aufklapper ohne Box/Rahmen und ohne +/−-Zeichen,
   nur ein unterstrichener Link (Float Image Text "Weiterlesen"). Der
   Volltext soll nach dem Aufklappen wie eine Fortsetzung des Absatzes
   wirken, nicht wie ein separat abgesetzter Akkordeon-Block — daher auch
   .oq-inhalt__text auf dem Inhalt statt der gedaempften Aufklapper-Farbe. */
.oq-v7 .oq-inhalt__aufklapper--einfach {
  margin-block-start: var(--oq-space-m);
  border: 0;
  border-radius: 0;
}

.oq-v7 .oq-inhalt__aufklapper--einfach > .oq-inhalt__aufklapper-titel {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.oq-v7 .oq-inhalt__aufklapper--einfach > .oq-inhalt__aufklapper-inhalt {
  padding: var(--oq-space-s) 0 0;
}

/* Modifier fuer JS-gesteuertes Ausblenden vor dem Entfernen aus dem Baum
   (siehe FAQ-Textfilter, v7-faq.js): kurzes Fade statt hartem [hidden]. */
.oq-v7 .oq-inhalt__aufklapper--ausblenden {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .oq-v7 .oq-inhalt__aufklapper {
    transition: opacity 160ms ease-out;
  }
}

/* Sanfter Hoehen-Uebergang beim Auf-/Zuklappen, wo der Browser
   ::details-content unterstuetzt (Chrome/Edge/Firefox). Ohne Unterstuetzung
   bleibt das native Sofort-Umschalten -- sichere Rueckfalloption, kein
   Bruch, kein zusaetzliches Wrapper-Markup noetig. Deckt alle Nutzer von
   .oq-inhalt__aufklapper ab (FAQ, Link-List, Bordered-List, Float Image
   Text "Weiterlesen"), auch die --einfach-Variante traegt dieselbe
   Basisklasse. */
@supports selector(::details-content) {
  .oq-v7 details.oq-inhalt__aufklapper {
    interpolate-size: allow-keywords;
  }

  .oq-v7 details.oq-inhalt__aufklapper::details-content {
    block-size: 0;
    overflow: clip;
  }

  .oq-v7 details[open].oq-inhalt__aufklapper::details-content {
    block-size: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .oq-v7 details.oq-inhalt__aufklapper::details-content {
      transition: block-size 200ms cubic-bezier(0.33, 1, 0.68, 1), content-visibility 200ms allow-discrete;
    }
  }
}

/* --- Lightbox ----------------------------------------------------------
   Geteilte Overlay-Infrastruktur, gebaut von src/assets/js/v7-lightbox.js.
   Erste JS-Komponente von v7, siehe docs/superpowers/specs/
   2026-08-19-v7-element-02-text-media-design.md. Traegt bewusst keine
   Element-Farben: der Hintergrund ist ein fester, dunkler Schleier
   unabhaengig von der Flaechenvariante der aufrufenden Sektion, weil das
   Overlay ueber der gesamten Seite liegt, nicht innerhalb einer Sektion.

   z-index als Festwert, nicht als Token: kern.css fuehrt bislang keine
   Stapel-Skala, und ein einzelner Wert fuer eine Seitenweite Komponente
   rechtfertigt noch keine eigene Skala.

   Aus demselben Grund wie der Schleier tragen auch der Rahmen-Hintergrund
   (#000, Letterbox hinter Video/Iframe) und der Schliessen-Knopf (#fff auf
   rgba(255,255,255,.12)) feste statt Token-Farben: beide sitzen auf dem
   Schleier, nicht auf einer Elementflaeche, und muessten sonst gegen jede
   der fuenf Flaechenrollen einzeln geprueft werden, obwohl sie visuell
   immer auf demselben dunklen Grund liegen. */
.oq-v7 .oq-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--oq-space-m);
  background: rgba(9, 15, 22, 0.86);
  opacity: 0;
}

.oq-v7 .oq-lightbox[hidden] {
  display: none;
}

/* Ein-/Ausblenden ueber eine Klasse statt direkt ueber [hidden]: das JS
   entfernt [hidden] sofort, setzt die Klasse erst im naechsten Frame (fuer
   den Enter) bzw. entfernt sie zuerst und setzt [hidden] erst nach Ablauf
   der Transition (fuer den Exit) -- siehe v7-lightbox.js. Exit bewusst
   kuerzer/ohne Versatz als der Enter (Jakub: Exits unauffaelliger). */
.oq-v7 .oq-lightbox--sichtbar {
  opacity: 1;
}

.oq-v7 .oq-lightbox__box {
  position: relative;
  width: 100%;
  max-width: 960px;
  transform: translateY(14px) scale(0.97);
}

.oq-v7 .oq-lightbox--sichtbar .oq-lightbox__box {
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .oq-v7 .oq-lightbox {
    transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .oq-v7 .oq-lightbox--sichtbar {
    transition-duration: 220ms;
  }

  .oq-v7 .oq-lightbox__box {
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .oq-v7 .oq-lightbox--sichtbar .oq-lightbox__box {
    transition-duration: 220ms;
  }
}

.oq-v7 .oq-lightbox__rahmen {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--oq-radius-mittel);
  overflow: hidden;
}

.oq-v7 .oq-lightbox__rahmen iframe,
.oq-v7 .oq-lightbox__rahmen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.oq-v7 .oq-lightbox__schliessen {
  position: absolute;
  inset-block-start: calc(var(--oq-space-l) * -1);
  inset-inline-end: 0;
  width: var(--oq-tap-min);
  height: var(--oq-tap-min);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.oq-v7 .oq-lightbox__schliessen::before,
.oq-v7 .oq-lightbox__schliessen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.oq-v7 .oq-lightbox__schliessen::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.oq-v7 .oq-lightbox__schliessen::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- Breadcrumb (Element 23) ---------------------------------------------
   Steht im Kern statt in einer Elementdatei: kein Block traegt einen
   eigenen Slug dafuer, die Komponente wird aus mehreren v7-Vorlagen
   eingebunden (Beitrags-Stage, 404, spaeter weitere Stage-Bloecke). Nutzt
   breadcrumb_trail (App\V7\Breadcrumbs), Markup in
   components/v7/breadcrumb.twig. Trenner gezeichnet und stumm, letzte Stufe
   ohne Verweis. Unter 640px nur der Rueckweg eine Stufe nach oben — ein
   dreizeilig umbrechender Pfad kostet mehr Platz, als er nuetzt.

   --oq-farbe-text-leise/--oq-farbe-linie lokal aus --oq-farbe-text berechnet
   statt global gelesen — derselbe Grund wie in elemente/faq.css: die
   Komponente steckt in Sektionen mit wechselnder Flaeche (variant-dark,
   variant-branded, …), ein fester Palette-Wert wuerde auf dunklem Grund
   nicht mitziehen, --oq-farbe-text dagegen ist dort bereits umgebogen. */
.oq-v7 .oq-bc {
  --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));
  margin-block-end: var(--oq-space-m);
}

.oq-v7 .oq-bc--linie {
  padding-block-end: var(--oq-space-s);
  border-bottom: 1px solid var(--oq-farbe-linie);
}

.oq-v7 .oq-bc ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-bc li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.oq-v7 .oq-bc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--oq-tap-min);
  padding: 6px 2px;
  color: var(--oq-farbe-text-leise);
  text-decoration: none;
  border-radius: 2px;
  transition: color var(--oq-transition);
}

.oq-v7 .oq-bc a:hover {
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  box-shadow: inset 0 -1.5px 0 currentColor;
}

.oq-v7 .oq-bc [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--oq-tap-min);
  max-width: 34ch;
  padding: 6px 2px;
  overflow: hidden;
  color: var(--oq-farbe-text);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oq-v7 .oq-bc__tr {
  position: relative;
  width: 16px;
  height: var(--oq-tap-min);
  flex: none;
}

.oq-v7 .oq-bc__tr::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--oq-farbe-text-leise);
  border-width: 1.5px 1.5px 0 0;
  border-radius: 2px;
  transform: rotate(45deg);
}

.oq-v7 .oq-bc__zurueck {
  display: none;
  align-items: center;
  gap: var(--oq-space-2xs);
  min-height: var(--oq-tap-min);
  padding: 6px 2px;
  color: var(--oq-farbe-text-leise);
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
}

.oq-v7 .oq-bc__pf {
  position: relative;
  width: 15px;
  height: 9px;
  flex: none;
  transform: scaleX(-1);
}

.oq-v7 .oq-bc__pf::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.oq-v7 .oq-bc__pf::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-width: 2px 2px 0 0;
  border-radius: 2px;
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .oq-v7 .oq-bc ol {
    display: none;
  }

  .oq-v7 .oq-bc__zurueck {
    display: inline-flex;
  }
}