/*
 * Gemeinsame Farb-Tokens für Light/Dark Mode — von index.php und history.php
 * per <link> eingebunden. Neue Töne nur HIER anpassen, nicht in den
 * einzelnen Seiten (die referenzieren ausschliesslich var(--token)).
 *
 * Reihenfolge der Geltung (wie vom Browser ausgewertet):
 *   1. :root                                    -> Light-Werte (Default)
 *   2. @media (prefers-color-scheme: dark)       -> Dark-Werte, WENN der User
 *      :root:not([data-theme="light"])             nicht explizit "hell" gewählt hat
 *   3. :root[data-theme="dark"]                  -> Dark-Werte, WENN der User
 *                                                    explizit "dunkel" gewählt hat
 * data-theme wird von assets/theme.js gesetzt (System-Erkennung + manueller
 * Umschalter, persistiert in localStorage).
 */

:root {
    --footer-text: #6B7075;
    --logo-grey-bar: #6B7075; --logo-grey-seal: #3C4043; --logo-grey-check: #ffffff;
    --bg: #fafafa;
    --surface: #ffffff;
    --border: #ddd;
    --border-soft: #e5e5e5;
    --text: #222222;
    --text-2: #555555;
    --text-3: #888888;
    /* --accent: Text/Link/Outline-Ton (muss auf --bg/--surface lesbar sein).
       --accent-fill: Hintergrund gefüllter Buttons/aktiver Zustände (bleibt in
       beiden Themes dunkel genug für weissen Text) + --on-accent als dessen
       Textfarbe. Getrennt von --accent, weil ein im Dark Mode aufgehellter
       Akzentton als Button-Füllung zu wenig Kontrast zu weisser Schrift hätte.
       Markenfarben (Logo/Favicon/Spinner, Round 2 des Logo-Brainstorms):
       Petrol (--accent) & Gold (--accent-2) statt generischem Blau. */
    --accent: #0F6B72;
    --accent-fill: #0F6B72;
    --accent-fill-hover: #0c5459;
    --on-accent: #ffffff;
    --accent-soft: #e3eeee;
    --accent-soft-2: #edf5f4;
    /* --accent-2: die zweite Markenfarbe (Gold). Nur für gezielte Akzente
       (Logo-Siegel, Spinner, "empfohlen"/Highlight-Badges) - nicht als
       Ersatz für --accent in Links/aktiven Zuständen gedacht. */
    --accent-2: #D9A62B;
    --accent-2-fill: #D9A62B;
    --on-accent-2: #241c05;
    --accent-2-soft: #faf1da;
    --table-head: #f2f2f2;
    --table-head-2: #f7f9fb;
    --success-bg: #e2f3e6; --success-text: #1e7d34;
    --error-bg: #fdecea;   --error-text: #a12622; --error-border: #f5c2c0;
    --warning-bg: #fdf3e2; --warning-text: #a1651f;
    --neutral-bg: #eeeeee; --neutral-text: #666666;
    --tooltip-bg: #222222; --tooltip-text: #ffffff;
    /* Chart.js-Palette (10 Kurvenfarben), light. Erste zwei Töne = Markenfarben,
       Rest bleibt divers (gut unterscheidbare Kurven bei Mehrfachauswahl). */
    --chart-palette: #0F6B72, #D9A62B, #1e7d34, #a12622, #7a4fb5, #0f9aa8, #c2185b, #5d6d7e, #e08e0b, #2e8b8b;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --footer-text: #8B929A;
    --logo-grey-bar: #9AA0A6; --logo-grey-seal: #D0D3D6; --logo-grey-check: #202124;
    --bg: #14181d;
        --surface: #1c222a;
        --border: #333c47;
        --border-soft: #2a313a;
        --text: #e8eaed;
        --text-2: #b8bfc7;
        --text-3: #7c8591;
        --accent: #4FB8AE;
        --accent-fill: #14807a;
        --accent-fill-hover: #1a948c;
        --on-accent: #ffffff;
        --accent-soft: #1b3a3a;
        --accent-soft-2: #203f3e;
        --accent-2: #E8B93E;
        --accent-2-fill: #E8B93E;
        --on-accent-2: #241c05;
        --accent-2-soft: #3a3012;
        --table-head: #232a33;
        --table-head-2: #1f2730;
        --success-bg: #16301f; --success-text: #6bdb87;
        --error-bg: #3a1f1d;   --error-text: #f0948e; --error-border: #5c2e2a;
        --warning-bg: #3a2c10; --warning-text: #e8b84b;
        --neutral-bg: #2a2f36; --neutral-text: #aab1ba;
        --tooltip-bg: #f0f2f5; --tooltip-text: #14181d;
        --chart-palette: #4FB8AE, #E8B93E, #6bdb87, #f0948e, #b79af0, #4fd0dd, #f06fa0, #9aa7b5, #f0a94a, #5fc9c9;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --footer-text: #8B929A;
    --logo-grey-bar: #9AA0A6; --logo-grey-seal: #D0D3D6; --logo-grey-check: #202124;
    --bg: #14181d;
    --surface: #1c222a;
    --border: #333c47;
    --border-soft: #2a313a;
    --text: #e8eaed;
    --text-2: #b8bfc7;
    --text-3: #7c8591;
    --accent: #4FB8AE;
    --accent-fill: #14807a;
    --accent-fill-hover: #1a948c;
    --on-accent: #ffffff;
    --accent-soft: #1b3a3a;
    --accent-soft-2: #203f3e;
    --accent-2: #E8B93E;
    --accent-2-fill: #E8B93E;
    --on-accent-2: #241c05;
    --accent-2-soft: #3a3012;
    --table-head: #232a33;
    --table-head-2: #1f2730;
    --success-bg: #16301f; --success-text: #6bdb87;
    --error-bg: #3a1f1d;   --error-text: #f0948e; --error-border: #5c2e2a;
    --warning-bg: #3a2c10; --warning-text: #e8b84b;
    --neutral-bg: #2a2f36; --neutral-text: #aab1ba;
    --tooltip-bg: #f0f2f5; --tooltip-text: #14181d;
    --chart-palette: #4FB8AE, #E8B93E, #6bdb87, #f0948e, #b79af0, #4fd0dd, #f06fa0, #9aa7b5, #f0a94a, #5fc9c9;
    color-scheme: dark;
}

/* Toggle-Button: gleiche Pill-Reihe wie .top-nav a, aber quadratisch (Icon only) */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    width: 40px; padding: 6px; font-size: 16px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 20px;
    background: var(--surface); color: var(--text-2);
    cursor: pointer; font-family: inherit;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Sprach-Umschalter: gleiche Pill-Reihe, zwei Segmente in einem gemeinsamen
   abgerundeten Rahmen statt zweier separater Pills. */
.lang-switch {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    box-sizing: border-box; height: 32px;
}
.lang-btn {
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    padding: 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
    text-decoration: none; color: var(--text-2); background: var(--surface);
}
.lang-btn:not(:last-child) { border-right: 1px solid var(--border); }
.lang-btn:hover:not(.active) { color: var(--accent); }
.lang-btn.active { background: var(--accent-fill); color: var(--on-accent); }

/* ---------------------------------------------------------------------
 * Logo (statisch, im Header) & Spinner (animiert, beim Laden).
 * Beide zeichnen dasselbe "Registry-Stapel"-Motiv, gefüllt über
 * var(--accent)/var(--accent-2) - zieht Theme-Wechsel automatisch mit.
 * --------------------------------------------------------------------- */
/* Badge, das nur auf der Preview-Instanz neben dem Titel erscheint. */
.env-badge { background: var(--accent-2-fill); color: var(--on-accent-2); font: 700 .7em Arial, sans-serif; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.tre-logo { flex-shrink: 0; }
/* Preview-Instanz (body.is-preview): Logo und Spinner eingegraut, >= 4.5:1 gegen --bg */
.is-preview .tre-logo .tre-bar, .is-preview .tre-spinner .tre-bar { fill: var(--logo-grey-bar); }
.is-preview .tre-logo .tre-seal, .is-preview .tre-spinner .tre-seal { fill: var(--logo-grey-seal); }
.is-preview .tre-logo .tre-check, .is-preview .tre-spinner .tre-check { stroke: var(--logo-grey-check); }
.tre-logo .tre-bar { fill: var(--accent); }
.tre-logo .tre-seal { fill: var(--accent-2); }
.tre-logo .tre-check { stroke: var(--on-accent-2); }

@keyframes tre-bar-pulse { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
@keyframes tre-seal-pop {
    0%, 40%  { transform: scale(0.55); opacity: 0; }
    55%      { transform: scale(1.18); opacity: 1; }
    72%      { transform: scale(0.92); }
    85%, 100% { transform: scale(1); opacity: 1; }
}
.tre-spinner .tre-bar { fill: var(--accent); animation: tre-bar-pulse 1.5s ease-in-out infinite; }
/* Feste Klassen statt :nth-of-type, damit die Zuordnung Balken->Delay in
   jedem Browser eindeutig ist. */
.tre-spinner .tre-bar-1 { animation-delay: 0s; }
.tre-spinner .tre-bar-2 { animation-delay: .18s; }
.tre-spinner .tre-bar-3 { animation-delay: .36s; }
.tre-spinner .tre-seal-group {
    animation: tre-seal-pop 1.5s ease-in-out infinite;
    /* Explizite Koordinaten (Siegel-Mittelpunkt im 100x100-viewBox) statt
       transform-box:fill-box + center - Safari berechnet die fill-box-Mitte
       für ein <g> mit Kind-Elementen nicht immer zuverlässig. */
    transform-box: view-box;
    transform-origin: 76px 74px;
}
.tre-spinner .tre-seal { fill: var(--accent-2); }
.tre-spinner .tre-check { stroke: var(--on-accent-2); }
@media (prefers-reduced-motion: reduce) {
    .tre-spinner .tre-bar, .tre-spinner .tre-seal-group { animation: none; opacity: 1; transform: scale(1); }
}

/* Dezenter Lade-Banner, oben an den Ergebnisbereich (Tabelle/Chart) angepinnt
 * - nicht mittig über der ganzen (u.U. langen) Tabelle, sondern genau dort,
 * wo die Tabelle beginnt. Wird von theme.js ein-/ausgeblendet
 * (TrustExplorer.attachLoadingOverlay). Bleibt layout-technisch IMMER ein
 * flex-Container (nur über visibility/opacity versteckt, nie via
 * display:none) - Safari startet eine CSS-Animation auf einem Kind sonst
 * nicht zuverlässig neu, wenn der Container erst im Moment des Einblendens
 * von display:none auf sichtbar wechselt. */
.tre-loading-host { position: relative; }
.tre-loading-overlay {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex;
    align-items: center; justify-content: center; gap: 10px;
    padding: 16px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(1px);
    z-index: 5;
    border-radius: 8px 8px 0 0;
    font-size: 13px; color: var(--text-2);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
.tre-loading-overlay.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }

/* Fusszeile: Version + Repository-Link. Klein, gedämpft (>= 4.5:1 gegen --bg),
   steht über margin-top:auto immer am unteren Rand des sichtbaren Bereichs
   (body ist in den Seiten ein Flex-Container mit min-height). */
.app-footer { margin-top: auto; padding-top: 2em; font-size: .7em; line-height: 1.4; color: var(--footer-text); text-align: center; }
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { color: var(--accent); text-decoration: underline; }

/* "?"-Button im Seitenkopf (startet die geführte Tour, siehe assets/tour.js).
   Selektor mit .top-nav a, damit die Pill-Regeln der Navigation überstimmt werden. */
.top-nav a.tour-help {
    flex: 0 0 auto; width: 32px; height: 32px; padding: 0; font-size: 14px; font-weight: bold;
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.top-nav a.tour-help:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }