/* ============================================================================
   VDM – Schema "Stahl": Typografie und Feinschliff
   ----------------------------------------------------------------------------
   Ergänzt die Palette aus vdm-styles.css um das Schriftbild des Kochblock-
   Entwurfs vom 2026-08-20:

     Barlow Condensed  Überschriften und Uhrzeiten — schmale Signaturschrift,
                       wie sie auf Betriebsbeschilderung üblich ist
     IBM Plex Sans     Fließtext — technische Anmutung mit Charakter
     IBM Plex Mono     Zahlen, Codes, Zeiten — Tabellenziffern für saubere Spalten

   Es gibt zwei Paletten: "stahl" (dunkel, reitet auf dem Schema "Metall") und
   "stahlhell" (hell, reitet auf dem Standardschema). Die Typografie ist in
   beiden identisch — deshalb hängen alle Regeln hier am Präfix des
   Palette-Attributs (data-vdm-palette^="stahl") und nicht am Schema.

   Wird in App.razor NACH vdm-styles.css eingebunden.
   Die Schriften kommen über Google Fonts; fällt das aus, greifen die
   Ersatzstapel und die Oberfläche bleibt vollständig benutzbar.
   ============================================================================ */

html[data-vdm-palette^="stahl"] {
    --vdm-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --vdm-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vdm-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

    --vdm-radius-card: 10px;
    --vdm-radius-sm: 8px;
    /* Fokusring aus der jeweiligen Palette, nicht fest verdrahtet. */
    --vdm-focus-ring: var(--primary-50);
}

/* ---------- Fließtext ---------- */
html[data-vdm-palette^="stahl"] body {
    font-family: var(--vdm-font-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Überschriften: schmal, kräftig, ruhig ---------- */
html[data-vdm-palette^="stahl"] h1,
html[data-vdm-palette^="stahl"] h2,
html[data-vdm-palette^="stahl"] h3,
html[data-vdm-palette^="stahl"] .page-title,
html[data-vdm-palette^="stahl"] .entity-page-title {
    font-family: var(--vdm-font-display);
    font-weight: 600;
    letter-spacing: .01em;
    text-wrap: balance;
}

html[data-vdm-palette^="stahl"] h1,
html[data-vdm-palette^="stahl"] .page-title {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.05;
}

/* ---------- Zahlen in Spalten: Tabellenziffern ---------- */
html[data-vdm-palette^="stahl"] table,
html[data-vdm-palette^="stahl"] .dxbl-grid,
html[data-vdm-palette^="stahl"] input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* Kopfzeilen von Tabellen als ruhige Beschriftung, nicht als zweite Überschrift */
html[data-vdm-palette^="stahl"] th,
html[data-vdm-palette^="stahl"] .dxbl-grid-header-content {
    font-family: var(--vdm-font-mono);
    font-size: 0.73333rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Kennzahlen und Codes ---------- */
html[data-vdm-palette^="stahl"] code,
html[data-vdm-palette^="stahl"] kbd,
html[data-vdm-palette^="stahl"] .vdm-kennzahl,
html[data-vdm-palette^="stahl"] .vdm-code {
    font-family: var(--vdm-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- Fokus sichtbar halten ---------- */
html[data-vdm-palette^="stahl"] :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Inhaltslinks auf den Akzent der jeweiligen Palette ----------
   Bewusst var(--accent) statt eines festen Werts: hell und dunkel brauchen
   verschiedene Teal-Toene, sonst blendet der eine oder verschwindet der andere. */
html[data-vdm-palette^="stahl"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):not(.evp-knopf) {
    color: var(--accent);
}

/* ---------- Kochstation: Uhrzeiten in der Signaturschrift ---------- */
html[data-vdm-palette^="stahl"] .ks-blk-zeit b,
html[data-vdm-palette^="stahl"] .ks-abf-zeit {
    font-family: var(--vdm-font-display);
    letter-spacing: .01em;
}