/* ETRM-Styleguide: zentrale Farben, Schrift und Bausteine (siehe docs/styleguide.md).
   Bootstrap-Variablen werden hier überschrieben, damit Bootstrap-Klassen automatisch passen.
   Signalfarben (--etrm-signal-*) sind in jedem Farbschema gleich und werden nur als Plakette
   mit eigener Schriftfarbe verwendet. */

:root,
[data-bs-theme="light"] {
    /* Lesbarkeit: Links und Nebentext dunkler als Bootstrap-Standard (mind. 4,5:1 auch auf Grau) */
    --bs-link-color: #0a58ca;
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
    --bs-secondary-color: #5c636a;

    /* Flächen */
    --etrm-flaeche-seite: #f6f7f9;
    --etrm-flaeche-karte: #ffffff;
    --etrm-flaeche-kopf: #f1f3f5;
    --etrm-rand: #dee2e6;
    --etrm-schatten: 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] {
    --bs-link-color: #8bb9fe;
    --bs-link-color-rgb: 139, 185, 254;
    --bs-link-hover-color: #b6d4fe;
    --bs-link-hover-color-rgb: 182, 212, 254;
    --bs-secondary-color: #b0b7be;

    --etrm-flaeche-seite: #1a1d21;
    --etrm-flaeche-karte: #24282d;
    --etrm-flaeche-kopf: #2c3137;
    --etrm-rand: #3a4047;
    --etrm-schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Umriss-Knöpfe und farbiger Text mit mindestens 4,5:1 (Bootstrap-Standard liegt knapp darunter) */
[data-bs-theme="light"] .btn-outline-secondary { --bs-btn-color: #5c636a; }
[data-bs-theme="light"] .btn-outline-primary { --bs-btn-color: #0a58ca; }
[data-bs-theme="light"] .text-primary { color: #0a58ca !important; }
[data-bs-theme="light"] .text-success { color: #146c43 !important; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8bb9fe; --bs-btn-border-color: #6ea8fe; }
[data-bs-theme="dark"] .text-primary { color: #6ea8fe !important; }
[data-bs-theme="dark"] .text-success { color: #75b798 !important; }
[data-bs-theme="dark"] .text-danger { color: #ea868f !important; }

/* Nebenaktionen im dunklen Schema: Bootstrap färbt sie fest grau (#6c757d, nur 3,3:1) */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #c4cad0;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5c636a;
    --bs-btn-active-border-color: #6c757d;
}

[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ea868f; --bs-btn-border-color: #ea868f; }

/* Signalfarben: bewusst außerhalb der Farbschemata, überall identisch */
:root {
    --etrm-signal-verdaechtig: #e0a800;
    --etrm-signal-freigegeben: #2e9e5b;
    --etrm-signal-abgelehnt: #e35d55;
    --etrm-signal-pruefung: #3d8bfd;
    --etrm-signal-entwurf: #8f979e;
    --etrm-signal-hinweis: #e08e0b;
    --etrm-signal-schrift: #000000;
    --etrm-signal-rand: rgba(0, 0, 0, 0.45);

    /* Abo-Farben (Status-Logo) */
    --etrm-abo-team: #00bf63;
    --etrm-abo-single: #004aad;
    --etrm-abo-basis: #545454;
    --etrm-abo-gesponsert: #ff914d;

    /* Schriftstufen */
    --etrm-titel: 1.75rem;
    --etrm-abschnitt: 1.25rem;
    --etrm-kartentitel: 1rem;
}

body { background-color: var(--etrm-flaeche-seite); }
/* Kopfleiste ist in jedem Farbschema dunkel; gedämpfter Text dort mit 7:1 */
.etrm-nav-gedaempft { color: #adb5bd; }

/* --- Seitenkopf: Brotkrumen, Titel mit Aktionen rechts, Untertitel --- */
.etrm-seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.etrm-seitenkopf h1 { font-size: var(--etrm-titel); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.etrm-seitenkopf .etrm-untertitel { color: var(--bs-secondary-color); margin: 0.25rem 0 0; max-width: 60rem; }
.etrm-seitenkopf .etrm-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
h1.etrm-titel { font-size: var(--etrm-titel); font-weight: 600; }
h2.etrm-abschnitt, .etrm-abschnitt { font-size: var(--etrm-abschnitt); font-weight: 600; margin: 1.5rem 0 0.75rem; }

/* --- Karte und Formularkarte (ohne farbigen Kopf) --- */
.etrm-karte { background: var(--etrm-flaeche-karte); border: 1px solid var(--etrm-rand); border-radius: 0.5rem; box-shadow: var(--etrm-schatten); }
.etrm-karte > .etrm-karte-kopf { padding: 0.75rem 1rem; border-bottom: 1px solid var(--etrm-rand); background: var(--etrm-flaeche-kopf); border-radius: 0.5rem 0.5rem 0 0; }
.etrm-karte > .etrm-karte-kopf h2, .etrm-karte > .etrm-karte-kopf h3 { font-size: var(--etrm-kartentitel); font-weight: 600; margin: 0; }
.etrm-karte > .etrm-karte-inhalt { padding: 1rem; }

/* --- Signal-Plakette: Bedeutung immer mit Text (und bei Warnungen mit Symbol) --- */
.etrm-plakette { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 1rem;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    color: var(--etrm-signal-schrift); border: 1px solid transparent; }
.etrm-plakette--verdaechtig { background: var(--etrm-signal-verdaechtig); border-color: var(--etrm-signal-rand); }
.etrm-plakette--freigegeben { background: var(--etrm-signal-freigegeben); }
.etrm-plakette--abgelehnt { background: var(--etrm-signal-abgelehnt); }
.etrm-plakette--pruefung { background: var(--etrm-signal-pruefung); }
.etrm-plakette--entwurf { background: var(--etrm-signal-entwurf); }
.etrm-plakette--hinweis { background: var(--etrm-signal-hinweis); border-color: var(--etrm-signal-rand); }

/* --- Tabellen: auf schmalen Bildschirmen verschiebbar statt abgeschnitten --- */
.etrm-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.etrm-tabelle table { margin-bottom: 0; }
.etrm-tabelle td { hyphens: auto; }
/* Vergleich alt/neu: die beiden Fassungen bekommen den meisten Platz */
.etrm-vergleich { min-width: 42rem; } /* schmaler wird verschoben statt Wörter zu zerreißen */
.etrm-vergleich col.etrm-spalte-artefakt { width: 22%; }
.etrm-vergleich col.etrm-spalte-was { width: 10%; }
.etrm-vergleich col.etrm-spalte-fassung { width: 34%; }

/* --- Artefakt-Titel als Link: ganze Zeile anklickbar, nicht nur die kleine Nummer --- */
.etrm-titel-link { color: inherit; text-decoration: none; }
.etrm-titel-link:hover, .etrm-titel-link:focus-visible { color: var(--bs-link-hover-color); text-decoration: underline; }

/* --- Leerzustand --- */
.etrm-leer { text-align: center; color: var(--bs-secondary-color); padding: 2rem 1rem; border: 1px dashed var(--etrm-rand); border-radius: 0.5rem; }
.etrm-leer .bi { font-size: 2rem; display: block; margin-bottom: 0.5rem; }

/* --- Text: Überschriften ausgewogen umbrechen --- */
h1, h2, h3 { text-wrap: balance; }