/*
 * base.css
 * Gemeinsame CSS-Variablen, Grundtypografie und Utilities
 * Ziel: zentrale Farb-/Abstandswerte, Button- und Modal-Utilities,
 * damit wiederholte Werte in anderen Stylesheets ersetzt werden können.
 */

:root {
    /* Typografie */
    --font-family: "Georgia", "Times New Roman", Times, serif;
    --font-size-base: 16px;

    /* Farben (aus bestehenden Stylesheets zusammengeführt) */
    --primary: #1B3C59; 
    --secondary: #8C3C38;
    --tertiary: #DAA520;
    --quaternary: #591B50;
    --quinary: #29591B;
    --links: #26547f;
    --rdblinks: #3D87CC;
    --rdbmultilinks: #8B008B;
    --highlight: #cb8614;
    --muted: #bbb;

    /* UI */
    --modal-width: 840px;
    --transition-fast: 0.2s;
    --transition-default: 0.5s;
}

/* Box model & base */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: black;
    background: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Typographie-Grundregeln */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }
h1, h2 { text-align: center; }

/* Utility classes */
.u-hidden { display: none !important; }
.u-visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.u-text-center { text-align: center !important; }
.u-mb-0 { margin-bottom: 0 !important; }

/* Buttons: Basisklasse und thematische Modifikatoren */
.btn {
    display: inline-block;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    transition: background-color var(--transition-default), color var(--transition-default), border-color var(--transition-default);
    text-decoration: none;
    color: inherit;
    background: transparent;
}

.btn--primary { background: var(--primary); border-color: var(--primary); color: white; }
.btn--primary:hover { background: white; color: var(--primary); }

.btn--secondary { background: var(--secondary); border-color: var(--secondary); color: white; }
.btn--secondary:hover { background: white; color: var(--secondary); }

.btn--tertiary { background: var(--teritary); border-color: var(--tertiary); color: white; }
.btn--tertiary:hover { background: white; color: var(--tertiary); }

.btn--quaternary { background: var(--quaternary); border-color: var(--quaternary); color: white; }
.btn--quaternary:hover { background: white; color: var(--quaternary); }


/* Modal-Basisbreite (kann in Komponenten via Media-Queries überschrieben werden) */
:root { --bs-modal-width: var(--modal-width); }
.modal { z-index: 20000; }

/* Form-Elemente erben Schrift */
input, textarea, select, button { font-family: inherit; font-size: inherit; }

/* Hilfen */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.container-fluid { padding-left: 15px; padding-right: 15px; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Mobile-Override für Modalbreite (konsequent an einer Stelle definieren) */
@media (max-width: 767px) {
    :root { --bs-modal-width: 95%; }
}

/* Kurze Erklärung:
   - Ziel ist, Farben/Buttons/Modal-Grundwerte zentral zu halten.
   - Folge: andere CSS-Dateien sollten Farben/Buttons auf diese Klassen/Variablen umstellen.
*/