/* CLAUDE: Stile der KI-Fakten-Seite (/ki-fakten/)
   CLAUDE: Warum eigene Datei: wird nur auf dieser einen Seite geladen (inc/assets.php),
   CLAUDE: belastet also keine andere Seite.
   CLAUDE: Anpassen: Farben/Abstaende kommen aus den Tokens in assets/css/base.css. */

/* CLAUDE: Aeussere Sektion - begrenzte Lesebreite, damit lange Werte nicht ausufern */
.lhi-ki-fakten {
    max-width: 56rem;
    margin-inline: auto;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* CLAUDE: Ueberschrift der Faktenliste - Serifenschrift wie die uebrigen Titel */
.lhi-ki-fakten__title {
    font-family: var(--lhi-font-serif);
    color: var(--lhi-color-text);
    margin-block-end: clamp(1rem, 3vw, 1.75rem);
}

/* CLAUDE: Die Definitionsliste selbst - Rahmen als ruhige Tabellenanmutung */
.lhi-ki-fakten__list {
    margin: 0;
    border-block-start: 1px solid var(--lhi-color-border);
}

/* CLAUDE: Eine Faktenzeile - zweispaltig ab Tablet, gestapelt auf dem Telefon.
   CLAUDE: Anpassen: Die 16rem steuern die Breite der Begriffsspalte. */
.lhi-ki-fakten__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem 1.5rem;
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--lhi-color-border);
}

@media (min-width: 48em) {
    .lhi-ki-fakten__row {
        grid-template-columns: 16rem 1fr;
        gap: 1.5rem;
    }
}

/* CLAUDE: Der Begriff - etwas kraeftiger, damit das Auge die Spalte findet */
.lhi-ki-fakten__term {
    font-family: var(--lhi-font-sans);
    font-weight: 600;
    color: var(--lhi-color-graphite);
    margin: 0;
}

/* CLAUDE: Der Wert - normale Laufschrift; overflow-wrap bricht lange E-Mails/URLs um */
.lhi-ki-fakten__value {
    font-family: var(--lhi-font-sans);
    color: var(--lhi-color-text);
    margin: 0;
    overflow-wrap: anywhere;
}

/* CLAUDE: Pruefvermerk - abgesetzt, aber nicht versteckt. Er ist ein Vertrauenssignal
   CLAUDE: und muss deshalb lesbar bleiben (Kontrast >= 4.5:1 gegen den Hintergrund). */
.lhi-ki-fakten__review {
    margin-block-start: clamp(1.25rem, 3vw, 2rem);
    padding: 0.9rem 1.1rem;
    border-inline-start: 3px solid var(--lhi-color-gold);
    background: rgba(var(--lhi-color-gold-rgb), 0.07);
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-sm);
    color: var(--lhi-color-graphite);
}

/* CLAUDE: Auf schmalen Schirmen Trennzeichen ausblenden und untereinander setzen */
@media (max-width: 30em) {
    .lhi-ki-fakten__review-sep {
        display: none;
    }

    .lhi-ki-fakten__review-by,
    .lhi-ki-fakten__review-date {
        display: block;
    }
}