/* SML-Substanzen. Gleiche Gestaltung wie Permeations- und Alterungsrechner
   (permeation-calculator.css) - dieselben Marken, Radien und Schatten, damit
   die drei umgezogenen Werkzeuge als eine Familie auftreten. */
.inno-sml-block {
    --sml-accent: #3dc1d3;
    --sml-accent-dark: #001c46;
    --sml-bg: #ffffff;
    --sml-surface: #f6f8fb;
    --sml-border: #e3e8ef;
    --sml-border-strong: #c8d1dc;
    --sml-text: #1a2540;
    --sml-text-muted: #6b7689;
    --sml-radius: 16px;
    --sml-radius-sm: 10px;
    --sml-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);

    max-width: 1040px;
    margin: 0 auto;
    color: var(--sml-text);
    font-family: inherit;
}

.inno-sml-block [hidden] {
    display: none !important;
}

/* ---------- Suche und Index ---------- */

.inno-sml-steuerung {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.15rem 1.35rem;
    background: var(--sml-bg);
    border: 1px solid var(--sml-border);
    border-radius: var(--sml-radius);
    box-shadow: var(--sml-shadow);
}

.inno-sml-suche {
    position: relative;
    display: flex;
    align-items: center;
}

.inno-sml-lupe {
    position: absolute;
    left: 0.9rem;
    display: flex;
    color: var(--sml-text-muted);
    pointer-events: none;
}

.inno-sml-suchfeld {
    width: 100%;
    padding: 0.75rem 2.6rem 0.75rem 2.75rem;
    font-size: 1.05rem;
    font-family: inherit;
    color: var(--sml-text);
    background: var(--sml-surface);
    border: 1px solid var(--sml-border-strong);
    border-radius: var(--sml-radius-sm);
    appearance: none;
}

.inno-sml-suchfeld::-webkit-search-cancel-button { display: none; }

.inno-sml-suchfeld:focus {
    outline: none;
    border-color: var(--sml-accent);
    box-shadow: 0 0 0 3px rgba(61, 193, 211, 0.25);
    background: var(--sml-bg);
}

.inno-sml-loeschen {
    position: absolute;
    right: 0.6rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--sml-text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.inno-sml-loeschen:hover { background: var(--sml-surface); color: var(--sml-text); }

.inno-sml-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.inno-sml-buchstabe {
    min-width: 2rem;
    padding: 0.32rem 0.55rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sml-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sml-radius-sm);
    cursor: pointer;
}

.inno-sml-buchstabe:hover {
    color: var(--sml-accent-dark);
    background: var(--sml-surface);
}

.inno-sml-buchstabe.is-aktiv {
    color: #fff;
    background: var(--sml-accent-dark);
    border-color: var(--sml-accent-dark);
}

.inno-sml-zaehler {
    margin: 0.85rem 0 0.6rem;
    font-size: 0.95rem;
    color: var(--sml-text-muted);
}

/* ---------- Tabelle ---------- */

.inno-sml-tabellenrahmen {
    overflow-x: auto;
    background: var(--sml-bg);
    border: 1px solid var(--sml-border);
    border-radius: var(--sml-radius);
    box-shadow: var(--sml-shadow);
}

.inno-sml-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.inno-sml-tabelle th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sml-text-muted);
    background: var(--sml-surface);
    border-bottom: 1px solid var(--sml-border);
    white-space: nowrap;
}

.inno-sml-tabelle td {
    padding: 0.62rem 0.9rem;
    border-bottom: 1px solid var(--sml-border);
    vertical-align: top;
}

.inno-sml-tabelle tr:last-child td { border-bottom: 0; }

.inno-sml-tabelle tbody tr:hover td { background: #fafcfe; }

/* Spalten ueber ihre Position ansprechen: Bei 615 Zeilen spart jede
   eingesparte Klasse im Markup mehrere Kilobyte. */
.inno-sml-tabelle td:first-child {
    font-weight: 600;
    min-width: 16rem;
}

/* Die Bezeichnung in der anderen Sprache - mitgesucht, aber zurückhaltend. */
.inno-sml-tabelle td:first-child span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--sml-text-muted);
}

/* Zahlen untereinander lesbar halten - CAS-Nummern vergleicht man spaltenweise. */
.inno-sml-tabelle td:nth-child(2),
.inno-sml-tabelle td:nth-child(3),
.inno-sml-tabelle td:nth-child(4),
.inno-sml-tabelle td:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inno-sml-tabelle td:last-child b { color: var(--sml-accent-dark); }

/* "kein SML" ist eine Auskunft, keine Lücke - aber leiser als ein Grenzwert. */
.inno-sml-tabelle td:last-child i {
    font-style: normal;
    color: var(--sml-text-muted);
}

/* ---------- Leermeldung ---------- */

.inno-sml-leermeldung {
    margin-top: 1rem;
    padding: 1.35rem 1.5rem;
    text-align: center;
    background: var(--sml-surface);
    border: 1px solid var(--sml-border);
    border-radius: var(--sml-radius);
}

.inno-sml-leer-titel {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.inno-sml-leermeldung p { margin: 0 0 0.9rem; color: var(--sml-text-muted); }

.inno-sml-knopf {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: var(--sml-accent-dark);
    border-radius: var(--sml-radius-sm);
}

.inno-sml-knopf:hover { background: #0d4978; color: #fff; }

.inno-sml-hinweis {
    padding: 1rem 1.2rem;
    color: var(--sml-text-muted);
    background: var(--sml-surface);
    border: 1px solid var(--sml-border);
    border-radius: var(--sml-radius);
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 720px) {
    /* FCM und Ref-Nr sind Nachschlagewerte, kein Suchkriterium am Telefon -
       auf schmalen Schirmen weichen sie, damit Name, CAS und Grenzwert
       nebeneinander lesbar bleiben. Gesucht wird weiterhin auch darüber. */
    .sml-schmal,
    .inno-sml-tabelle td:nth-child(3),
    .inno-sml-tabelle td:nth-child(4) { display: none; }
    .inno-sml-tabelle td:first-child { min-width: 10rem; }
    .inno-sml-tabelle { font-size: 0.9rem; }
}

/* ---------- Detailseite einer Substanz (/sml/<slug>/) ---------- */

.inno-sml-detail-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3dc1d3;
}

.inno-sml-detail {
    --sml-accent-dark: #001c46;
    --sml-surface: #f6f8fb;
    --sml-border: #e3e8ef;
    --sml-text-muted: #6b7689;
    --sml-radius: 16px;
    --sml-radius-sm: 10px;
    max-width: 760px;
}

.inno-sml-detail-intro { margin: 0 0 1.2rem; }

/* Der Grenzwert ist die Angabe, wegen der die Seite aufgerufen wird -
   deshalb steht er über der Tabelle und nicht als eine Zeile darin. */
.inno-sml-detail-grenzwert {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    margin: 0 0 1.4rem;
    padding: 1rem 1.3rem;
    background: var(--sml-surface);
    border: 1px solid var(--sml-border);
    border-left: 3px solid #3dc1d3;
    border-radius: var(--sml-radius);
}

.inno-sml-detail-grenzwert-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sml-text-muted);
}

.inno-sml-detail-grenzwert-wert {
    font-size: 1.5rem;
    color: var(--sml-accent-dark);
    font-variant-numeric: tabular-nums;
}

.inno-sml-detail-art-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #004d61;
    background: #e1f5f8;
    border: 1px solid #bde7ed;
    border-radius: 6px;
    align-self: center;
}

.inno-sml-detail-kein {
    margin: 0 0 1.4rem;
    padding: 1rem 1.3rem;
    color: var(--sml-text);
    background: var(--sml-surface);
    border: 1px solid var(--sml-border);
    border-radius: var(--sml-radius);
    line-height: 1.5;
}

.inno-sml-detail-ohne-grenzwert {
    border-left: 4px solid #3dc1d3;
}

.inno-sml-detail-nicht-gelistet {
    border-left: 4px solid #d97706;
}

.inno-sml-detail-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.6rem;
}

.inno-sml-detail-tabelle th {
    width: 38%;
    padding: 0.6rem 0.9rem 0.6rem 0;
    text-align: left;
    font-weight: 600;
    color: var(--sml-text-muted);
    border-bottom: 1px solid var(--sml-border);
    vertical-align: top;
}

.inno-sml-detail-tabelle td {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--sml-border);
}

.inno-sml-detail-aktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}

/* Zweiter Knopf: gleich groß, aber als Umriss - zwei gefüllte Flächen
   nebeneinander streiten um dieselbe Aufmerksamkeit, und dann trifft der
   Leser gar keine Wahl. */
.inno-sml-knopf-zweit {
    color: var(--sml-accent-dark);
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--sml-accent-dark);
}

.inno-sml-knopf-zweit:hover {
    color: #fff;
    background: var(--sml-accent-dark);
}

.inno-sml-detail-fuss { margin-top: 1.4rem; }

.inno-sml-zurueck { font-weight: 600; }

@media (max-width: 600px) {
    .inno-sml-detail-tabelle th { width: 45%; }
}