/* OneQrew v7 — Boxed Text (bordered-text) + Boxed List (bordered-list).

   Umsetzung der Design-Vorgabe "taifun-element-10-boxed-neu.html" ("Kaesten
   mit echtem Rahmen"), die die vorherige Fassung ("taifun-element-10-
   boxedtext.html") ablaest. Eigener Handle statt Element 02 Text-Media:
   die Vorgabe fuer text-media schliesst bordered-text ausdruecklich aus
   ("Nicht in diesem Element", 2026-08-19-v7-element-02-text-media-
   design.md) — das Boxenraster hat kein Bild und keine Spaltenaufteilung
   und teilt sich deshalb kein Markup mit oq-textmedia. bordered-list nutzt
   denselben Handle/dieselben Klassen (siehe bordered-list.v7.twig,
   "orientiert sich an bordered-text"). Siehe docs/v7/elemente.md fuer die
   Begruendung. Aenderungen immer auch in boxtext.min.css.

   Kasten statt Karte: die Vorgabe unterscheidet jetzt zwischen Karte
   (gefuellte Flaeche, eigenes Klickziel — Kartenraster, Archiv, Cards
   Filter u.a.) und Kasten (ungefuellt, kraeftiger Rahmen, kein Klickziel —
   Boxed Text/List). Die Box war vorher eine gefuellte Flaeche mit duennem
   Rand (--oq-boxtext-box/--oq-boxtext-box-rand bei 1px) — auf dunkler
   Flaeche praktisch unsichtbar, deshalb schon einmal auf 32% Randmischung
   angehoben (siehe CHANGELOG "Rahmen praktisch unsichtbar"). Die neue
   Vorgabe loest das nicht ueber mehr Randkontrast bei gleicher Fuellung,
   sondern ueber den Verzicht auf die Fuellung selbst: --oq-boxtext-box-rand
   bleibt (der 32%-Wert war schon fuer genau diesen Kontrastfall berechnet,
   siehe Kommentar dort), nur --oq-boxtext-box (Fuellung) entfaellt komplett
   und der Rand wird auf 1,5px verstaerkt, wie in der Vorgabe.

   Farbwerte kommen aus der Theme-Palette. --oq-farbe-text-leise steht nicht
   global in kern.css, deshalb lokal berechnet, wie bei kennzahlen.css. */

.oq-v7 .oq-boxtext {
  --oq-boxtext-breite: 1320px;
  --oq-boxtext-innen-block: clamp(72px, 9vw, 132px);
  --oq-boxtext-innen-inline: clamp(20px, 4vw, 56px);

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

  /* Randfarbe des ungefuellten Kastens, direkt gegen die Sektionsflaeche
     gerechnet (kein Box-Fuellton mehr dazwischen). 32% ist der Wert, den
     archiv.css/faq.css/iconkarten.css/pricing.css unter --oq-farbe-linie-
     stark fuer denselben Kontrastfall (kraeftiger Rand auf eigener Flaeche)
     fuehren. */
  --oq-boxtext-box-rand: color-mix(in oklab, var(--oq-farbe-text) 32%, var(--oq-farbe-flaeche));
  --oq-boxtext-marke-flaeche: color-mix(in oklab, var(--oq-farbe-marke) 18%, transparent);

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

.oq-v7 .oq-boxtext__in {
  max-width: var(--oq-boxtext-breite);
  margin-inline: auto;
  padding-inline: var(--oq-boxtext-innen-inline);
}

.oq-v7 .oq-boxtext__kopf {
  max-width: 52ch;
  margin-bottom: clamp(28px, 3.6vw, 46px);
}

/* Rueckfall ohne gepflegte bt_v7_boxen: v6 kannte kein Boxenraster, sondern
   genau einen Kasten mit linker Akzentkante (bordered-text.twig,
   "border-l-[3px] ... border-primary-color-500/border-white"). 1:1-Nachbau
   mit v7-Token statt der alten Tailwind-Klassen, damit Bestandsinhalte ohne
   Boxen nicht unstyled bleiben. */
.oq-v7 .oq-boxtext__leer {
  border-left: 3px solid var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  padding-inline: clamp(18px, 2.6vw, 33px);
}

/* --- Die vier Flaechenrollen, siehe tokens.md ---------------------------- */
.oq-v7 .oq-boxtext.variant-dark,
.oq-v7 .oq-boxtext.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
  --oq-boxtext-box-rand: color-mix(in oklab, var(--oq-farbe-dunkel-text) 32%, var(--oq-farbe-dunkel));

  /* Die Marke als Schrift traegt auf dunklem Grund nicht (rund 2,8:1), siehe
     stage.css/text-media.css "Der Akzent je Variante" — deshalb hier pur
     #fff statt der aufgehellten Markenstufe. */
  --oq-farbe-marke-text: #fff;
}

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

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

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

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

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

/* --- Das Boxenraster -------------------------------------------------------
   Vorgabe: zwei Spalten als Grundfall, drei bei entsprechend gewaehlter
   ButtonGroup. Ueberschriften stehen fuer sich, kein Doppelpunkt — siehe
   Hilfetext im ACF-Feld. */
.oq-v7 .oq-boxtext__boxen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.oq-v7 .oq-boxtext__boxen--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oq-v7 .oq-boxtext__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: 1.5px solid var(--oq-boxtext-box-rand);
  border-radius: var(--oq-radius-gross);
  padding: clamp(22px, 2.6vw, 32px);
}

.oq-v7 .oq-boxtext__box h3 {
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.oq-v7 .oq-boxtext__box p {
  color: var(--oq-farbe-text-leise);
  font-size: 1rem;
}

/* Beleg: kurzer Nachweis unter dem Text, durch eine Linie in der Rahmenfarbe
   abgesetzt, damit er sichtbar zur Box gehoert statt darunter zu schweben
   (Vorgabe Abschnitt B). margin-top:auto schiebt ihn ans Boxenende, auch
   wenn Nachbarboxen unterschiedlich viel Text haben. */
.oq-v7 .oq-boxtext__box .oq-boxtext__beleg {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--oq-boxtext-box-rand);
  font-size: .84rem;
  color: var(--oq-farbe-text-leise);
}

/* Ton (Hinweis/Wichtig): betonte Kante links, 4px statt 1,5, nur bei
   einzelnen Boxen mit gesetztem Ton (Vorgabe Abschnitt C). Blau ("aufpassen")
   folgt demselben Marke-Textkontrast wie die Links oben; Gruen ("ist schon
   so") ist --oq-farbe-bestaetigung, dieselbe feste Statusfarbe wie beim Haken
   (.oq-haken--gruen, kern.css) — kein eigener Gruenton fuer boxtext. Kein
   Rot: es geht nie um einen Fehler. */
.oq-v7 .oq-boxtext__box--hinweis {
  border-left-width: 4px;
  border-left-color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
}

.oq-v7 .oq-boxtext__box--wichtig {
  border-left-width: 4px;
  border-left-color: var(--oq-farbe-bestaetigung);
}

/* Links im WYSIWYG-Fliesstext der Boxen (row.item aus bordered-list, reines
   TinyMCE-Feld ohne eigene Textklasse) — derselbe Vertrag wie .oq-inhalt__text
   a in kern.css. Marke als Schrift: auf dunklem Grund automatisch aufgehellt
   ueber --oq-farbe-marke-text (Variantenblock oben), auf Marken-/Akzentflaeche
   automatisch weiss, weil --oq-farbe-marke dort am .oq-boxtext__in auf die
   Textfarbe getauscht ist (ebenfalls oben) — kein eigener variant-Selektor
   noetig. variant-neutral/-white bleiben unveraendert, dort ist die reine
   Markenfarbe auf heller Flaeche bereits kontrastreich genug. */
.oq-v7 .oq-boxtext__box 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-boxtext__box a:hover {
  color: color-mix(in oklab, var(--oq-farbe-marke-text, var(--oq-farbe-marke)) 85%, var(--oq-farbe-text));
}

.oq-v7 .oq-boxtext__marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: var(--oq-radius-mittel);
  background: var(--oq-boxtext-marke-flaeche);
  color: var(--oq-farbe-marke);
  font-weight: 800;
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}

.oq-v7 .oq-boxtext__fuss {
  margin-top: var(--oq-space-l);
  font-size: .8125rem;
  color: var(--oq-farbe-text-leise);
  line-height: 1;
}

/* --- Kastenliste (bordered-list) -------------------------------------------
   Ein Aussenrahmen, Trennlinien innen — die Liste ist EIN Gegenstand mit N
   Zeilen, nicht N einzelne Kaesten nebeneinander (Vorgabe, Abschnitt D).
   Dieselbe Randfarbe wie .oq-boxtext__box (--oq-boxtext-box-rand), nur als
   durchgehender Rahmen samt innerer Trennlinien statt je Box einzeln. */
.oq-v7 .oq-boxtext__liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1.5px solid var(--oq-boxtext-box-rand);
  border-radius: var(--oq-radius-gross);
  overflow: hidden;
}

.oq-v7 .oq-boxtext__zeile-item {
  position: relative;
  border-top: 1.5px solid var(--oq-boxtext-box-rand);
}

.oq-v7 .oq-boxtext__zeile-item:nth-child(-n+2) {
  border-top: 0;
}

.oq-v7 .oq-boxtext__zeile-item:nth-child(even) {
  border-left: 1.5px solid var(--oq-boxtext-box-rand);
}

.oq-v7 .oq-boxtext__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: clamp(15px, 1.7vw, 19px) clamp(19px, 2.1vw, 25px);
  transition: background-color var(--oq-transition);
}

.oq-v7 .oq-boxtext__zeile-item:hover .oq-boxtext__zeile {
  background: color-mix(in oklab, var(--oq-farbe-text) 6%, transparent);
}

.oq-v7 .oq-boxtext__zeile-item:focus-within {
  outline: var(--oq-focus-width) solid var(--oq-focus-ring, currentColor);
  outline-offset: calc(-1 * var(--oq-focus-offset));
}

.oq-v7 .oq-boxtext__zeile-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.oq-v7 .oq-boxtext__zeile-titel {
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -0.014em;
}

/* Klickflaeche ueber die ganze Zeile, wie .cards-filter__card-link
   (filterkarten.css) — hier per ::after auf dem sichtbaren Linktext statt
   eines Geschwister-Links, identisch zur Vorgabe (.kastenliste .text b
   a::after). Braucht position:relative auf .oq-boxtext__zeile-item (oben). */
.oq-v7 .oq-boxtext__zeile-titel a {
  color: inherit;
  text-decoration: none;
}

.oq-v7 .oq-boxtext__zeile-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.oq-v7 .oq-boxtext__zeile-titel a:focus-visible {
  outline: 0;
}

.oq-v7 .oq-boxtext__zeile-unter {
  font-size: .91rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-boxtext__zeile-item:hover .oq-inhalt__pfeil {
  transform: translateX(5px);
}

/* Rueckfall ohne gepflegte bll_v7_items (altes Feld "item", freies WYSIWYG):
   einspaltiger Fliesstext, kein Link/Pfeil/Untertitel. Immer eine Spalte,
   deshalb die nth-child-Rechnung der zwei Spalten oben (Kein Rand oben bei
   den ersten ZWEI Zeilen, linker Rand bei jeder GERADEN) neu aufgesetzt —
   sonst stuenden bei einspaltigem Rueckfall Zeile 2/4/6 faelschlich mit
   linkem Rand da, wie bei einer Luecke in der zweiten Spalte. */
.oq-v7 .oq-boxtext__liste--einfach {
  grid-template-columns: minmax(0, 1fr);
}

.oq-v7 .oq-boxtext__liste--einfach .oq-boxtext__zeile-item:nth-child(-n+1) {
  border-top: 0;
}

.oq-v7 .oq-boxtext__liste--einfach .oq-boxtext__zeile-item:nth-child(n+2) {
  border-top: 1.5px solid var(--oq-boxtext-box-rand);
}

.oq-v7 .oq-boxtext__liste--einfach .oq-boxtext__zeile-item:nth-child(even) {
  border-left: 0;
}

.oq-v7 .oq-boxtext__zeile--einfach {
  display: block;
}

/* --- Umbrueche -------------------------------------------------------------
   Drei Spalten werden zu zwei ab 900px, alles einspaltig ab 640px. */
@container (max-width: 900px) {
  .oq-v7 .oq-boxtext__boxen--drei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 640px) {
  .oq-v7 .oq-boxtext__boxen,
  .oq-v7 .oq-boxtext__boxen--drei {
    grid-template-columns: minmax(0, 1fr);
  }

  .oq-v7 .oq-boxtext__liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .oq-v7 .oq-boxtext__zeile-item:nth-child(2) {
    border-top: 1.5px solid var(--oq-boxtext-box-rand);
  }

  .oq-v7 .oq-boxtext__zeile-item:nth-child(even) {
    border-left: 0;
  }
}