body {
/*  border: 5px solid green !important; /* Test-Effekt */  
}

/*
 * Überschreibt die im Joomla-Backend und Cassiopeia definierten Template-Variablen
 * Beispiel: Ein dunkles Farbschema
 */
/* ==========================================================
   SCHRITT 1: Globale Variablen NEU definieren (OHNE !important)
   ========================================================== */
:root {
    /* Hintergrundfarbe des Templates (Dunkel) */
    --template-bg-light: #2c3e50; 
	
    
    /* Haupt-Textfarbe (Hell) */
    --template-text-dark: #ecf0f1; 
    
    /* Haupt-Textfarbe (Dunkel) - oft für Header/Footer-Text */
    --template-text-light: #2c3e50; 
    
    /* Spezielle Farbe/Akzentfarbe (Dunkel) */
    --template-special-color: #1a242f;  
    	
    /* Link-Farbe */
    --template-link-color: #3498db; 
	
	/* Primaerfarbe  */
	--cassiopeia-color-primary: #e3be70; 
    
    /* ... andere Variablen ... */
}


/* Erzwungene Überschreibung des Body und der Hauptcontainer */
/* Wir zielen auf die Elemente, die den Hintergrund setzen */

html body,
.site-grid,
.grid-child.container-main,
/* Fügt den Container hinzu, der den größten Content-Bereich umgibt */
.container-component {
    /* Hier verwenden wir den DIREKTEN Farbcode + !important,
       um die von HTML überschriebene Variable zu umgehen. */
    background-color: #eba934 !important; /* Ihr NEUER Wert: gold */
    color: var(--template-text-dark) !important; /* Textfarbe weiterhin hell */
}

/* Auch wenn Sie die Farbe der "cards" oder Module ändern wollen,
   müssen Sie diese direkt überschreiben: */
.card, .card-body, .bg-light {
    background-color: #eba934 !important; /* Ihr NEUER Wert:gold */
}

/* ==========================================================
   SCHRITT 2: Spezifische Bereiche mit !important überschreiben
   ========================================================== */

/* Setzt den globalen Hintergrund und die Standard-Textfarbe des Bodys */
body {
    background-color: var(--template-bg-light) !important; /* HIer wirkt !important */
    color: var(--template-text-dark) !important;
}

/* Header-Hintergrund und Textfarbe */
.container-header {
    background-color: var(--template-special-color) !important; 
    color: var(--template-text-dark) !important;
}

/* Footer-Hintergrund und Textfarbe */
.footer {
	
    background-color: var(--template-special-color) !important;
    color: var(--template-text-dark) !important;
}

/* Anpassung der Content-Boxen (z.B. Modul-Hintergründe) */
.card, .card-body {
    background-color: var(--template-bg-light) !important;
    color: var(--template-text-dark) !important;
}

/* Wichtig: Buttons (die oft direkt die Bootstrap-Variable nutzen) */
.btn-primary {
    background-color: var(--template-link-color) !important;
    border-color: var(--template-link-color) !important;
}

/* ==========================================================
   SCHRITT 3: Anpassung von Hyperlinks im Content-Bereich
   (Stellt Kontrast sicher)
   ========================================================== */

/* Allgemeine Linkfarbe (im Text) */ 
a {
    color: var(--template-link-color) !important; /* Nutzt das helle Blau */
}

/* Link-Zustand beim Hover (wichtig für Feedback) */
a:hover {
    color: #4dc3ff !important; /* Etwas helleres Blau beim Darüberfahren */
    text-decoration: underline !important; /* Unterstreichung hinzufügen */
}

/* Anpassung für Links, die bereits besucht wurden */
a:visited {
    color: #578d51 !important; /* Ein sanftes Violett für besuchte Links */
}


/* ==========================================================
   SCHRITT 4: Anpassung von Formularfeldern und Eingaben
   (Wichtig für die Sichtbarkeit auf dunklem Hintergrund)
   ========================================================== */

/* Generelle Formularfelder (Input, Textarea, Select) */
input[type="text"], 
input[type="email"], 
input[type="password"],
textarea, 
select {
    background-color: #a0a5ab !important; /* Ein etwas helleres Dunkelgrau vorher #3f5165  !important*/
    color: #292a2b !important; /* Helle Schriftfarbe für die Eingabe alt #ecf0f1 */
    border: 1px solid #4a657c !important; /* Rahmen, damit das Feld sichtbar ist */
}

/* Zustand, wenn das Formularfeld fokussiert wird (angeklickt) */
input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus {
    background-color: #4a657c !important; /* Wird nochmals heller */
    border-color: var(--template-link-color) !important; /* Rahmen in Akzentfarbe */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5) !important; /* Leichter leuchtender Effekt */
}

/* Anpassung der Labels (Text vor dem Formularfeld) */
label {
    color: var(--template-text-dark) !important; /* Nutzt die helle Standard-Textfarbe */
}

/* ==========================================================
   SCHRITT 5: Anpassung des Modalen Login-Fensters (Bootstrap Modal)
   ========================================================== */

/* 1. Hintergrund für den gesamten Modal-Inhalt (dunkel setzen) */
.modal-content {
    background-color: var(--template-bg-light) !important; 
    color: var(--template-text-dark) !important; /* Helle Textfarbe für den Inhalt */
}

/* 2. Header-Bereich (z.B. für den Titel "Anmelden") anpassen */
.modal-header {
    /* Nutzt die Akzentfarbe für einen visuellen Kontrast */
    background-color: var(--template-special-color) !important; 
    color: var(--template-text-dark) !important; 
    /* Trennlinie zum Body anpassen */
    border-bottom-color: var(--template-text-dark) !important;
}

/* 3. Body-Bereich (dort wo die Felder sind) anpassen */
.modal-body {
    color: var(--template-text-dark) !important; 
}

/* 4. Footer-Bereich (falls vorhanden) anpassen */
.modal-footer {
    background-color: var(--template-special-color) !important; 
    border-top-color: var(--template-text-dark) !important;
}

/* WICHTIG: Überschreibung der Close-Buttons (X-Symbol) */
/* Stellt sicher, dass das X-Symbol im dunklen Header sichtbar ist */
.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ecf0f1'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
    opacity: 1 !important;
}

/* ==========================================================
   SCHRITT 6: Anpassung der Hauptnavigation und Dropdowns
   ========================================================== */

/* 1. Haupt-Navigationsleiste (falls sie einen eigenen Hintergrund hat) */
.navbar-expand-lg {
    /* Setzt den Hintergrund der gesamten Leiste auf die Akzentfarbe (falls sie nicht schon vom Header übernommen wird) */
    background-color: var(--template-special-color) !important; 
}

/* 2. Farbe der Links in der Hauptnavigation */
.navbar-nav .nav-link {
    color: var(--template-text-dark) !important; /* Helle Textfarbe */
}

/* 3. Farbe der Links im Hover-Zustand (wenn die Maus darüberfährt) */
.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link:focus {
    color: var(--template-link-color) !important; /* Akzentfarbe für Hover */
}

/* 4. Dropdown-Menü (der Container, der beim Klicken erscheint) */
.dropdown-menu {
    /* Setzt den Hintergrund der Dropdown-Liste auf die dunkle Template-Farbe */
    background-color: var(--template-bg-light) !important; 
    border-color: var(--template-special-color) !important; /* Rahmen in Akzentfarbe */
}

/* 5. Die einzelnen Links im Dropdown-Menü */
.dropdown-menu .dropdown-item {
    color: var(--template-text-dark) !important; /* Helle Textfarbe */
}

/* 6. Hover-Zustand der Links im Dropdown-Menü */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    /* Setzt den Hintergrund beim Hover auf die Akzentfarbe */
    background-color: var(--template-special-color) !important; 
    color: var(--template-text-dark) !important; /* Helle Textfarbe beibehalten */
}
/* ==========================================================
   SCHRITT 7: Anpassung von Titeln, Paginierung und Breadcrumbs
   ========================================================== */

/* 1. Modul-Titel (Hervorhebung) */
/* Diese Klasse steuert in Cassiopeia die Überschriften der Module (z.B. "Anmelden", "Suchen") */
.card-header, 
.card-header h3 {
    background-color: var(--template-special-color) !important; 
    color: var(--template-text-dark) !important; /* Helle Textfarbe für den Titel */
    border-bottom: 1px solid var(--template-text-dark) !important;
}

/* 2. Breadcrumbs (Brotkrümelnavigation) */
/* Der Container für die gesamte Breadcrumb-Leiste */
.breadcrumb {
    background-color: transparent !important; /* Passt sich dem Body-Hintergrund an */
    /* Fügt eine leichte Trennlinie hinzu, falls gewünscht */
    border-bottom: 1px solid #4a657c; 
    padding: 0.75rem 0 !important;
}

/* Die einzelnen Breadcrumb-Links und Texte */
.breadcrumb-item a,
.breadcrumb-item.active {
    color: var(--template-text-dark) !important; /* Helle Textfarbe */
}

/* 3. Paginierung (Seitennavigation wie "Zurück", "Weiter" oder Seitenzahlen) */
/* Der Container der Paginierungsleiste */
.pagination {
    --bs-pagination-bg: var(--template-bg-light); /* Setzt den Hintergrund der Paginierungsleiste */
}

/* Die einzelnen Paginierungs-Elemente (Zahlen, Pfeile) */
.page-item .page-link {
    background-color: var(--template-bg-light) !important; 
    color: var(--template-text-dark) !important; /* Helle Textfarbe für die Zahlen */
    border-color: #4a657c !important; /* Dunkler Rahmen zur Abgrenzung */
}

/* Aktives Paginierungs-Element (die aktuelle Seite) */
.page-item.active .page-link {
    background-color: var(--template-link-color) !important; /* Akzentfarbe für die aktuelle Seite */
    color: var(--template-special-color) !important; /* Text in der Akzentfarbe */
    border-color: var(--template-link-color) !important;
}

/* Hover-Zustand für Paginierungs-Elemente */
.page-item .page-link:hover {
    background-color: var(--template-special-color) !important; /* Dunklere Akzentfarbe beim Hover */
    color: var(--template-text-dark) !important;
}

/* ==========================================================
   SCHRITT 8: Anpassung der Systemmeldungen (Alerts)
   ========================================================== */

/* Allgemeine Alert-Basis (Für alle Meldungen) */
.alert {
    background-color: var(--template-bg-light) !important; /* Dunkler Hintergrund */
    color: var(--template-text-dark) !important; /* Helle Textfarbe */
    border-color: #4a657c !important; /* Dunkler Rahmen zur Abgrenzung */
}

/* 1. Erfolgsmeldung (z.B. "Speichern erfolgreich") */
.alert-success {
    background-color: #1a4f32 !important; /* Dunkelgrüner Hintergrund */
    border-color: #157347 !important; 
    color: #ccffdd !important; /* Sehr heller, leicht grüner Text */
}

/* 2. Fehlermeldung (z.B. "Fehler beim Speichern") */
.alert-danger {
    background-color: #4a191c !important; /* Dunkelroter Hintergrund */
    border-color: #b02a37 !important; 
    color: #ffd8d8 !important; /* Sehr heller, leicht roter Text */
}

/* 3. Warnmeldung (z.B. "Achtung: Funktion veraltet") */
.alert-warning {
    background-color: #5d4013 !important; /* Dunkelgelber/Oranger Hintergrund */
    border-color: #ffc107 !important;
    color: #fff3cd !important; /* Sehr heller Text */
}

/* 4. Infomeldung (z.B. allgemeine Hinweise) */
.alert-info {
    background-color: #113c54 !important; /* Dunkelblauer Hintergrund */
    border-color: #0d6efd !important;
    color: #e0f2ff !important; /* Sehr heller Text */
}

/* Farbe des "Schließen"-Buttons im Alert-Feld */
.alert .btn-close {
    /* Setzt das X-Symbol auf eine helle Farbe, damit es sichtbar ist */
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ecf0f1'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
    opacity: 1 !important;
}


/* Ende Farbanpassungen */

#site-grid {
    /* Überschreiben der display-Eigenschaft, falls notwendig */
    display: grid;
    /* Redefinition der Spalten. Hier wird die linke Spalte (sidebar-left)
       auf 0 gesetzt, wenn sie leer ist. */
    /* Prüfen Sie die Standard-Definition des Templates und passen Sie diese an! */
    grid-template-columns: 
        [sidebar-left-start] 0
        [component-start] 1fr 
        [component-end sidebar-right-start] 
        minmax(0, 300px) 
        [sidebar-right-end];
}

/* Styling für Listen


/* Erzeugt Abstand zwischen den Listeneinträgen */
.list-unstyled li {
    margin-bottom: 0.5rem; /* Das entspricht ca. 8px Abstand */
}

/* Optional: Verhindert, dass der allerletzte Punkt auch einen Abstand nach unten hat */
.list-unstyled li:last-child {
    margin-bottom: 0;
}


/* Styling für die Glossar-Navigation */
.glossar-navigation {
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f9fa;  /* Leichter Hintergrund #f8f9fa;*/
    border-radius: 5px;
}

.glossar-navigation a {
    text-decoration: none;
    color: #333;
    padding: 0 5px;
}

.glossar-navigation a:hover {
    color: #007bff; /* Farbe bei Mausberührung */
    text-decoration: underline;
}

/* Verhindert das Problem der bleibenden Farbe nach Klick */
.glossar-navigation a:visited {
    color: #333;
}

/* Glossar-Links in der Navigation neutral halten a bedeutet anchor*/
.glossar-navigation a, 

.glossar-navigation a:visited {
    color: #444444;           /* Ein schönes Dunkelgrau */
    text-decoration: none;    /* Keine Unterstreichung */
    font-weight: bold;        /* Fett gedruckt für bessere Lesbarkeit */
    padding: 0 5px;           /* Ein wenig Abstand zwischen den Buchstaben */
}
/* Farbe ändern, wenn man mit der Maus drüberfährt */
.glossar-navigation a:hover {
    color: #007bff;           /* Ein schönes Blau beim Drüberfahren */
    text-decoration: underline;
}

.glossar-navigation a:active {
    color: #000000 !important;
    text-decoration: none;
    background-color: transparent;
}


/* eigene Tabelle definieren für com_bracs */
.mything-detail {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

/* Tabellenabstände */
.mything-detail table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.mything-detail th,
.mything-detail td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

/* Tabellenkopf hervorheben */
.mything-detail th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Zeilen-Hover */
.mything-detail tbody tr:hover {
    background-color: #f9f9f9;
}

/* Pagination etwas absetzen */
.mything-detail + nav.pagination {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ccc;
}