.custom-navbar {
    background-color: #8677de; /* Bootstrap Primary Color */
}


/* Logo größer */
.logo-icon {
    width: 90px;
    height: 90px;
}

body {
    padding-top: 80px; /* Platz für die Navbar schaffen */
}

/* Darkmode Styles */
.dark-mode {
    background-color: #252528;
    color: #f1f1f1;
}

.dark-mode a {
    color: #ddd !important;
}

:root{
  --bg: #ffffff;
  --text: #000000;
  --link: #0066cc;

  /* PSE-spezifisch (Default für Light) */
  --pse-on-swatch-text: #000000;   /* Text auf bunten Kästchen / Headern */
  --pse-card-body-bg: #ffffff;     /* Kartenkörper Hintergrund */
  --pse-card-body-text: #000000;   /* Kartenkörper Text */
}

/* Globaler Darkmode - setzt die generellen Variablen */
.dark-mode{
  --bg: #121212;
  --text: #f1f1f1;
  --link: #ddd;

  /* PSE Defaults in Dark (kann pro Seite spezifiziert werden) */
  --pse-on-swatch-text: #000000;   /* wir wollen weiterhin schwarz auf den bunten Flächen */
  --pse-card-body-bg: #252528;
  --pse-card-body-text: #ffffff;
}

/* allgemeine Nutzung */
body{ background-color: var(--bg); color: var(--text); }
a{ color: var(--link); }

/* falls du global cards benutzt */
.element-card{ background-color: var(--pse-card-body-bg); color: var(--pse-card-body-text); }



/* Aktiver Sprachbutton */
.btn-outline-light.active {
    background-color: #ffffff !important; /* heller Hintergrund */
    color: #000000 !important;           /* dunkler Text */
    font-weight: bold;
    border-color: #ffffff !important;
}

.btn-outline-light.active:hover {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}

/* Allgmein (wird vom Darkmode überschrieben) */
.text-muted {
    color: #6c757d !important; /* Standard Bootstrap-Grau */
}

/* Anpassung für den Darkmode */
.dark-mode .text-muted {
    color: #b0b0b0 !important; /* Ein helleres Grau für den dunklen Hintergrund */
}

  /* Bootstrap Dropdown Anpassung */
  /* Farbe für das Dropdown-Menü selbst (Hintergrund) */
  --bs-dropdown-bg: var(--pse-card-body-bg);
  /* Farbe für den Text in den Dropdown-Items */
  --bs-dropdown-color: var(--text);
  /* Farbe beim Hovern über ein Item */
  --bs-dropdown-link-hover-bg: #333333;
  --bs-dropdown-link-hover-color: #ffffff;

/* Link Styles */

/* Custom Button Style for links */
.btn-link {
    background-color: #8677de;
    border-color: #8677de;
    color: #fff; /* Heller Text für gute Lesbarkeit */
    font-weight: bold;
}

}

/* Dark Mode Anpassung für den Button */
.dark-mode .btn-link {
    background-color: #8677de;
    border-color: #9393ba;
    color: #252528; /* Dunklerer Text für Kontrast */
}

.btn-link:hover {
    background-color: #a4a4d4;
    border-color: #a4a4d4;
    color: #252528;
}


.cookie-banner {
  position: fixed;           /* fixiert am Viewport */
  top: 50%;                  /* vertikale Mitte */
  left: 50%;                 /* horizontale Mitte */
  transform: translate(-50%, -50%); /* exakte Mitte */
  z-index: 99999;
  width: 90%;
  max-width: 600px;
}

.banner-content {
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;   /* Buttons unter Text */
  gap: 15px;                /* Abstand zwischen Text und Buttons */
}

/* Overlay blockiert alle Interaktionen */
.cookie-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* halbtransparent schwarz */
  z-index: 99998;  /* direkt unter dem Banner */

}
/* CSS für Sub-Dropdowns (unbedingt beibehalten!) */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%; /* Menü öffnet sich rechts vom Hauptelement */
    margin-top: -1px;
    display: none; /* Standardmäßig versteckt */
}
.dropdown-submenu .dropdown-menu.show {
    display: block; /* Zeigt das Menü an, wenn die 'show'-Klasse hinzugefügt wird */
}

/* CSS für das Scrolling des Untermenüs */
.dropdown-scroll {
    max-height: 40vh; /* Setzt die maximale Höhe (z.B. 40% der Bildschirmhöhe) */
    overflow-y: auto; /* Aktiviert die vertikale Scrollbar */
}