/* ============================================================
   BLOCK: Tabelle — Design Tokens
   Datei: page-builder/components/organisms/table/block.css
   Strukturierte Tabelle (ACF-Block as-schoendienst/table): optionaler
   Kopf (Eyebrow + Headline + Intro, section-head-Molekül), dann
   Spaltenkopfzeile (thead) und Zeilen mit frei definierbaren
   Textzellen (tbody). Ersetzt den ungestylten Gutenberg-Standard-
   Block wp-block-table (Prüfpflichten-, Daten- und Vergleichstabellen).

   Layout-Entscheidungen:
   - table-layout: auto + overflow-x-auto-Wrapper: lange Texte (z. B.
     Maßnahmen-Spalte) atmen, auf Mobile scrollt die Tabelle horizontal,
     das Layout bricht nicht (kein has-fixed-layout).
   - Nur horizontale Trennlinien (keine vertikalen Linien) — moderner
     Look; Kopfzeile als navy-Band mit weißer Schrift.
   - Erste Tabellenspalte semibold in navy-deep (Label-Spalte links,
     z. B. "Gefahrenbereich" / "Kühlschmierstoffe (KSS)").
   - Zebra-Streifen dezent (--as-color-light) für Zeilenführung.
   - Hintergrund dark: Tabelle als weiße Karte (dunkler Text), damit
     der Inhalt auf Navy immer kontrastreich bleibt.

   Fluid-Formeln exakt nach Theme-Funktion fluid-size($min,$max)
   (assets/scss/abstracts/_mixins.scss): clamp(min, min-20*f +
   100vw*f, max) mit f = (max-min)/100 [rem]. $customEase =
   cubic-bezier(0.22, 1, 0.36, 1) = Token var(--as-ease).
   Bootstrap-Breakpoints: lg = 992px, md = 768px.
   ============================================================ */
@import "../../../assets/tokens.css" layer(sdc-tokens);

/* ============================================================
   .as-table — Sektion
   space-top/bottom-padding-large = fluid-size(50,100):
   clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem)  (50–100px)
   ============================================================ */
.as-table {
    background: var(--as-color-white);
    padding-top: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
    padding-bottom: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
}

/* Hintergrund-Modifier (Schöndienst-Farbwelt) */
.as-table--bg-neutral {
    background: var(--as-color-neutral);
}
.as-table--bg-dark {
    background: var(--as-color-navy);
}

/* Kopfbereich (section-head-Molekül) auf dunklem Grund — Overrides
   für den Navy-Hintergrund (Muster: faq/block.css). */
.as-table--bg-dark .as-eyebrow {
    color: var(--as-color-accent-light);
}
.as-table--bg-dark .as-headline {
    color: var(--as-color-white);
}
.as-table--bg-dark .as-section-head__intro {
    color: var(--as-color-light);
}

/* ============================================================
   Scroll-Wrapper — horizontales Scrollen auf Mobile, kein
   Zerbrechen des Layouts bei schmalen Viewports.
   ============================================================ */
.as-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Tabelle
   table-layout auto: Spaltenbreiten nach Inhalt, lange Texte
   (letzte Spalte) bekommen den Raum, den sie brauchen.
   ============================================================ */
.as-table__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-family: var(--as-font-body);
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem); /* fluid-size(14,16) */
    line-height: 1.7;
    color: var(--as-color-text);
}

/* Zellen: dezente horizontale Trennlinien (Token), Text oben
   ausgerichtet (lange Texte neben kurzen Labels), lange Wörter
   brechen um statt das Layout zu sprengen. */
.as-table__table th,
.as-table__table td {
    padding: 0.875rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--as-color-border);
    overflow-wrap: break-word;
}

/* Kopfzeile: navy-Band mit weißer Schrift, klar hervorgehoben.
   Keine Trennlinie unter der Kopfzeile (harter Übergang navy→weiß). */
.as-table__table thead th {
    background: var(--as-color-navy-deep);
    color: var(--as-color-white);
    font-family: var(--as-font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: none;
}

/* Label-Spalte links (z. B. "Gefahrenbereich"): semibold in navy-deep,
   damit die Zeilen auf einen Blick scannbar sind. */
.as-table__table tbody td:first-child {
    font-weight: 600;
    color: var(--as-color-navy-deep);
}

/* Zebra-Streifen: dezent, nur im Datenbereich (Zellen erben den
   transparenten Grund vom tr). */
.as-table__table tbody tr:nth-child(even) {
    background: var(--as-color-light);
}

/* ============================================================
   Dunkler Hintergrund (--bg-dark): Tabelle als weiße Karte.
   Die Karte ist der Scroll-Wrapper selbst — weißer Grund, Rahmen,
   Radius und Schatten aus Tokens; die Tabelle bleibt damit immer
   hell mit dunklem Text (Kontrast auf Navy).
   ============================================================ */
.as-table--bg-dark .as-table__scroll {
    background: var(--as-color-white);
    border: 1px solid var(--as-color-border);
    border-radius: var(--as-radius);
    padding: clamp(1rem, 0.8579rem + 0.4375vw, 1.375rem); /* fluid-size(16,22) */
    box-shadow: var(--as-shadow);
}

/* ============================================================
   Responsive (Bootstrap-Breakpoints: md = 768px)
   ============================================================ */
@media (max-width: 767.98px) {
    .as-table__table th,
    .as-table__table td {
        padding: 0.625rem 0.75rem;
    }
    .as-table--bg-dark .as-table__scroll {
        padding: 0.75rem;
    }
}