/*
 * Gestaltungswerte (Design-Tokens) der Website – die eine Quelle für Farben, Flächen, Schrift und Formen.
 * Wird vor allen anderen Theme-Stylesheets geladen. Übersicht und Regeln: Styleguide (/impressum/?trx-styleguide=1, nur angemeldet).
 *
 * Änderungen hier wirken auf alle Seiten. Ablauf: lokal ändern → Styleguide und Vergleichsbilder prüfen → Freigabe Martin →
 * Release. Zur Vorschau auf live kann eine Entwurfsdatei tokens-entwurf.css hochgeladen werden; sie wirkt nur für angemeldete
 * Redakteure mit ?trx-entwurf=1 (siehe includes/styleguide.php).
 *
 * Eingeführt am 23.10.2026; vorher standen die Werte doppelt und teils widersprüchlich in custom.css und prototype-parity.css.
 */

:root {
    /* Dunkle Flächen */
    --trx-navy: #071427;            /* Einstieg, Abschluss, Footer, dunkler Beleg-Abschnitt */
    --trx-navy-2: #0d2444;          /* Karten und Felder auf dunklem Grund */
    --trx-navy-deep: #132240;
    --trx-navy-mid: #1b2d4a;

    /* Helle Flächen */
    --trx-white: #fff;
    --trx-paper: #f7f9fc;           /* Karten und Kästen auf weißem Grund */
    --trx-surface-grau: #f1f4f8;    /* graue Abschnitte im Wechsel mit Weiß */
    --trx-light-bg: #f8fafc;
    --trx-sky: #eaf6ff;

    /* Abschnittsfarben (Regel: Einstieg/Abschluss dunkel, dazwischen Weiß und Grau im Wechsel, ein dunkler Beleg-Abschnitt) */
    --trx-section-weiss: var(--trx-white);
    --trx-section-grau: var(--trx-surface-grau);
    --trx-section-dunkel: var(--trx-navy);

    /* Schrift */
    --trx-ink: #0f172a;             /* Überschriften und Text auf hellem Grund */
    --trx-muted: #5b6b82;           /* Nebentext auf hellem Grund */
    --trx-muted-strong: #475569;    /* Einleitungs- und Fließtext in Grau auf hellem Grund (besser lesbar) */
    --trx-muted-on-dark: #b9c7d8;   /* Nebentext auf dunklem Grund */
    --trx-grey: #94a3b8;
    --trx-grey-light: #cbd5e1;

    /* Linien */
    --trx-line: #d9e3ef;
    --trx-line-strong: #c6d3e1;
    --trx-line-on-dark: #22344d;

    /* Blau */
    --trx-blue: #3192f4;
    --trx-blue-text: #1769aa;       /* Blau als Schrift auf hellem Grund, z. B. Status-Kästchen */
    --trx-blue-soft: #eaf3fc;       /* Fläche für blaue Kästchen */
    --trx-blue-soft-line: #b9d4ee;
    --trx-cyan: #00d4ff;

    /* Akzent: helles Grün. Nur als Fläche oder Strich, auf hellem Grund nie als Schriftfarbe (Martin, 23.10.2026). */
    --trx-accent: #c7f43d;
    --trx-accent-hover: #dafb77;
    --trx-accent-strong: #b4e12d;
    --trx-accent-line: #a6d61f;     /* Strich vor Überzeilen und Unterstrich von Links auf hellem Grund */
    --trx-on-accent: #142113;       /* Schrift auf grüner Fläche (Schaltflächen) */
    --trx-lime: var(--trx-accent);

    /* Schriftarten */
    --trx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --trx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Überschriften: sechs Stufen, am Handy (bis 760 px) eigene Werte weiter unten */
    --trx-type-display: clamp(44px, 4.7vw, 70px);   /* Einstieg der Startseite und der Insights */
    --trx-type-hero: clamp(42px, 4.2vw, 60px);      /* H1 im Einstieg aller anderen Seiten */
    --trx-type-hero-lang: clamp(36px, 3.2vw, 46px); /* H1 mit sehr langen Wörtern neben einem Kasten (Immobilien) */
    --trx-type-section: clamp(36px, 4vw, 54px);     /* H2 eines Abschnitts */
    --trx-type-panel: clamp(28px, 2.8vw, 40px);     /* H2 in Kästen, Formularen, Beitragstext */
    --trx-type-card: clamp(21px, 2vw, 28px);        /* H3 von Karten */

    /* Text: zehn Stufen. Nie kleiner als 13 px (Martin, 23.10.2026). Große Zahlen (Ergebnisse, Belege) stehen bei ihrem Baustein. */
    --trx-text-2xs: 13px;   /* Beschriftungen, Chips, Überzeilen */
    --trx-text-xs: 14px;    /* Hinweise, Fußzeile, Metaangaben */
    --trx-text-sm: 15px;    /* Schaltflächen, Navigation */
    --trx-text-base: 16px;  /* Lesetext */
    --trx-text-md: 17px;    /* Lesetext in Abschnitten */
    --trx-text-lg: 18px;
    --trx-text-xl: 20px;
    --trx-text-2xl: 22px;
    --trx-text-3xl: 24px;
    --trx-text-lead: clamp(18px, 2vw, 21px); /* Einleitung unter der H1 */

    /* Formen und Abstände */
    --trx-radius: 8px;
    --trx-radius-sm: 8px;
    --trx-card-pad: 28px;           /* Innenabstand jeder Karte, auch am Handy */
    --trx-link-line: 3px;           /* Unterstrich von Textlinks */
    --trx-link-offset: 7px;         /* Abstand des Unterstrichs zur Schrift */
    --trx-shadow: 0 24px 80px rgba(7, 20, 39, .14);
    --trx-shadow-glow: 0 0 30px rgba(45, 127, 249, .15);
    --trx-page-max: 1700px;
    --trx-content-gutter: clamp(20px, 5vw, 72px);
    --trx-transition: all .3s cubic-bezier(.4, 0, .2, 1);

    /* Verläufe */
    --trx-gradient-accent: linear-gradient(135deg, var(--trx-blue), var(--trx-cyan));
    --trx-gradient-dark: linear-gradient(180deg, var(--trx-navy) 0%, var(--trx-navy-deep) 100%);

    /* Ältere Namen aus dem Insights-Bereich */
    --trx-editorial-blue: var(--trx-blue);
    --trx-editorial-line: var(--trx-line);
}

@media (max-width: 760px) {
    :root {
        --trx-type-display: min(44px, 9.4vw);
        --trx-type-hero: 33px;
        --trx-type-hero-lang: 28px;
        --trx-type-section: 31px;
        --trx-type-panel: 28px;
        --trx-type-card: 21px;
    }
}