/* OneQrew v7 — Simple Table (simple-table), Element 30.

   Umsetzung der Design-Vorgabe "taifun-element-30-simple-table.html".
   Eigener Handle "tabelle", nicht Element 15 Pricing Table (Handle
   "pricing"): dort werden Pakete mit Zeichen und Buttons verglichen, hier
   stehen reine Werte. Neue Felder st_v7.* (Bildunterschrift, Spalten mit
   optionalem Rechtsbuendig-/Hervorheben-Schalter, Zeilen mit optionaler
   Gruppenzeile, Fussnote) — additiv, der Bestandsblock trug bisher nur
   spaltenweise Repeater ohne Zeilenkoepfe, Gruppierung oder Caption.
   Aenderungen immer auch in tabelle.min.css. */

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

  --oq-tabelle-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-tabelle-text-leiser: color-mix(in oklab, var(--oq-farbe-text) 58%, var(--oq-farbe-flaeche));
  --oq-tabelle-linie-stark: color-mix(in oklab, var(--oq-farbe-text) 30%, var(--oq-farbe-flaeche));
  --oq-tabelle-box: color-mix(in oklab, var(--oq-farbe-flaeche) 94%, var(--oq-farbe-text));

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

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

.oq-v7 .oq-tabelle__kopf {
  max-width: 52ch;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.oq-v7 .oq-tabelle__dachzeile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--oq-space-2xs);
  font-size: 1rem;
  font-weight: 600;
  color: var(--oq-farbe-marke);
}

.oq-v7 .oq-tabelle__dachzeile::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.oq-v7 .oq-tabelle__headline {
  margin-bottom: var(--oq-space-s);
  font-family: var(--oq-schrift-display);
  font-weight: var(--oq-display-gewicht);
  font-size: clamp(1.9rem, 3.5cqw, 2.9rem);
  line-height: 1.08;
  letter-spacing: var(--oq-display-laufweite);
}

.oq-v7 .oq-tabelle__text {
  color: var(--oq-tabelle-text-leise);
  font-size: 1.06rem;
  line-height: var(--oq-dichte-text);
}

/* --- Die vier Flaechenrollen, siehe tokens.md ---------------------------- */
.oq-v7 .oq-tabelle.variant-dark,
.oq-v7 .oq-tabelle.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
  --oq-tabelle-box: var(--oq-farbe-dunkel-kachel);
}

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

.oq-v7 .oq-tabelle.variant-neutral,
.oq-v7 .oq-tabelle.variant-neutral-alt {
  --oq-farbe-flaeche: var(--oq-farbe-flaeche-alt);
  --oq-tabelle-box: var(--oq-farbe-flaeche-hell, #fff);
}

.oq-v7 .oq-tabelle.variant-branded,
.oq-v7 .oq-tabelle.variant-branded-alt {
  --oq-farbe-flaeche: var(--oq-farbe-marke);
  --oq-farbe-text: var(--oq-farbe-marke-kontrast);
  --oq-tabelle-box: color-mix(in oklab, var(--oq-farbe-marke) 65%, var(--oq-farbe-dunkel));
}

.oq-v7 .oq-tabelle.variant-accent,
.oq-v7 .oq-tabelle.variant-accent-alt {
  --oq-farbe-flaeche: var(--oq-farbe-akzent);
  --oq-farbe-text: var(--oq-farbe-akzent-kontrast);
  --oq-tabelle-box: color-mix(in oklab, var(--oq-farbe-akzent) 65%, var(--oq-farbe-dunkel));
}

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

/* --- Der Rahmen: waagerecht scrollbar, role=region traegt den Namen ------- */
.oq-v7 .oq-tabelle__rahmen {
  border: 1px solid var(--oq-farbe-linie);
  border-radius: var(--oq-radius-gross);
  background: var(--oq-tabelle-box);
  overflow-x: auto;
  scrollbar-width: thin;
}

.oq-v7 .oq-tabelle__rahmen:focus-visible {
  outline: var(--oq-focus-width) solid var(--oq-focus-ring, currentColor);
  outline-offset: var(--oq-focus-offset);
}

.oq-v7 .oq-tabelle__table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  text-align: left;
  font-size: .98rem;
}

.oq-v7 .oq-tabelle__table caption {
  text-align: left;
  padding: 20px clamp(18px, 2.2vw, 26px) 0;
  font-size: .92rem;
  color: var(--oq-tabelle-text-leise);
  max-width: 74ch;
}

.oq-v7 .oq-tabelle__table th,
.oq-v7 .oq-tabelle__table td {
  padding: 14px clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--oq-farbe-linie);
  vertical-align: top;
}

.oq-v7 .oq-tabelle__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--oq-tabelle-box);
  border-bottom: 2px solid var(--oq-tabelle-linie-stark);
  font-size: .79rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--oq-tabelle-text-leise);
}

.oq-v7 .oq-tabelle__table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.oq-v7 .oq-tabelle__table td {
  color: var(--oq-tabelle-text-leise);
}

.oq-v7 .oq-tabelle__table tbody tr:last-child th,
.oq-v7 .oq-tabelle__table tbody tr:last-child td {
  border-bottom: 0;
}

.oq-v7 .oq-tabelle__table tbody tr:hover {
  background: color-mix(in oklab, var(--oq-farbe-text) 4%, transparent);
}

.oq-v7 .oq-tabelle__zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--oq-farbe-text);
  font-weight: 600;
  white-space: nowrap;
}

.oq-v7 .oq-tabelle__gruppenzeile th {
  padding-top: 24px;
  border-bottom: 1px solid var(--oq-tabelle-linie-stark);
  background: transparent;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--oq-tabelle-text-leise);
}

.oq-v7 .oq-tabelle__hervor {
  background: color-mix(in oklab, var(--oq-farbe-marke) 7%, transparent);
}

.oq-v7 .oq-tabelle__fuss {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--oq-tabelle-text-leiser);
  max-width: 74ch;
}

/* --- Umbrueche -------------------------------------------------------------
   Nur die Schriftgroesse weicht unter 620px, das Scrollen uebernimmt der
   Rahmen — kein Umbruch in Bloecke, das zerstoert den Spaltenvergleich. */
@container (max-width: 620px) {
  .oq-v7 .oq-tabelle__table {
    font-size: .92rem;
  }
}