/* ===========================================================================
   marke.css - zieht Bootstrap auf die Tokens.

   Bootstrap wird nicht ueberschrieben, sondern umparametriert: Wir setzen die
   --bs-*-Variablen auf unsere --mp-*-Werte. Damit bleiben alle Bootstrap-
   Komponenten benutzbar und tragen trotzdem die Marke - und ein spaeteres
   Bootstrap-Update ueberschreibt nichts, was wir per Hand nachgezogen haetten.

   Hier steht kein einziger Farbwert. Alles kommt aus tokens.css.
   =========================================================================== */

:root {
    --bs-primary: var(--mp-marke-700);
    --bs-primary-rgb: 22, 101, 52;

    --bs-body-bg: var(--mp-grund);
    --bs-body-color: var(--mp-text);
    --bs-secondary-color: var(--mp-text-leise);
    --bs-emphasis-color: var(--mp-text);

    --bs-border-color: var(--mp-linie);
    --bs-border-radius: var(--mp-radius);
    --bs-border-radius-sm: var(--mp-radius-klein);

    --bs-body-font-family: var(--mp-schrift);
    --bs-body-font-size: var(--mp-schrift-m);
    --bs-body-line-height: var(--mp-zeilenhoehe);

    --bs-link-color: var(--mp-marke-700);
    --bs-link-hover-color: var(--mp-marke-600);
    --bs-link-color-rgb: 22, 101, 52;

    --bs-code-color: var(--mp-text);
}

/* --- Grundlagen -------------------------------------------------------- */

html,
body {
    font-family: var(--mp-schrift);
    background-color: var(--mp-grund);
    color: var(--mp-text);
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--mp-zeilenhoehe-ueberschrift);
    font-weight: 600;
    color: var(--mp-text);
}

h1 { font-size: var(--mp-schrift-2xl); }
h2 { font-size: var(--mp-schrift-xl); }
h3 { font-size: var(--mp-schrift-l); }

/* Ohne tabular-nums verrutschen die Stellen gegeneinander - und genau daran
   prueft jemand eine Abrechnung nach. */
td, th, .mp-zahl {
    font-variant-numeric: tabular-nums;
}

/* --- Fokus -------------------------------------------------------------
   Sichtbarer Fokus ist Pflicht (Abschnitt 7). outline: none ohne
   gleichwertigen Ersatz ist verboten - deshalb steht der Ring hier zentral
   und nicht je Komponente. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mp-marke-600);
    outline-offset: 2px;
    box-shadow: none;
}

/* Bootstrap setzt einen eigenen, blauen Fokusschatten. Der wird ersetzt,
   nicht ergaenzt. */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: none;
    border-color: var(--mp-marke-600);
}

/* --- Schaltflaechen ----------------------------------------------------- */

.btn {
    border-radius: var(--mp-radius-klein);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--mp-marke-700);
    border-color: var(--mp-marke-700);
    color: var(--mp-text-invers);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--mp-marke-600);
    border-color: var(--mp-marke-600);
    color: var(--mp-text-invers);
}

.btn-outline-secondary {
    border-color: var(--mp-marke-700);
    color: var(--mp-marke-700);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--mp-marke-100);
    border-color: var(--mp-marke-600);
    color: var(--mp-marke-700);
}

.btn-outline-danger {
    border-color: var(--mp-fehler-rand);
    color: var(--mp-fehler-text);
    background-color: transparent;
}

.btn-outline-danger:hover {
    background-color: var(--mp-fehler-rand);
    color: var(--mp-text-invers);
}

/* --- Formulare ---------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--mp-flaeche);
    color: var(--mp-text);
    /* --mp-linie erreicht nur 1.39:1 und darf niemals Feldrand sein. */
    border-color: var(--mp-feldrand);
    border-radius: var(--mp-radius-klein);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--mp-flaeche-leise);
    color: var(--mp-text-leise);
}

.form-label {
    font-weight: 600;
    margin-bottom: var(--mp-abstand-1);
}

.form-text {
    color: var(--mp-text-leise);
    font-size: var(--mp-schrift-s);
}

.form-check-input {
    border-color: var(--mp-feldrand);
}

.form-check-input:checked {
    background-color: var(--mp-marke-700);
    border-color: var(--mp-marke-700);
}

/* --- Flaechen und Tabellen ---------------------------------------------- */

.card,
.table {
    background-color: var(--mp-flaeche);
    color: var(--mp-text);
}

/* Trennlinien statt Zebrastreifen: Zebra bei Messwerttabellen erzeugt genau
   den Eindruck, den man nicht will - dass Zeilen gruppiert waeren. */
.table > :not(caption) > * > * {
    background-color: var(--mp-flaeche);
    border-bottom-color: var(--mp-linie);
    padding: var(--mp-abstand-3);
}

.table > thead > tr > th {
    background-color: var(--mp-flaeche-leise);
    font-weight: 600;
}

code {
    color: var(--mp-text);
    background-color: var(--mp-flaeche-leise);
    border-radius: var(--mp-radius-klein);
    padding: 0 var(--mp-abstand-1);
}