/* =========== FuchsiaCSS2Modern =========== */
/* ===== BASIS ===== */
:root {
--cassiopeia-color-primary: #C154C1;
--cassiopeia-color-link: #9c3d9c;
--cassiopeia-color-hover: #7a2e7a;
--background-main: #faf7fb;
--text-main: #2b2b2b;
--border-soft: #ead8ea;
--accent-secondary: #4cc9f0;
}
/* ===== BODY ===== */
body {
background-color: var(--background-main);
color: var(--text-main);
font-family: system-ui, Arial, sans-serif;
}
/* ===== HEADER ===== */
/* Nur die Hauptmenü-Links (1. Ebene) & Logo weiß färben */
.navbar .navbar-nav > .nav-item > .nav-link,
.navbar .navbar-brand {
    color: #fff !important;
    font-weight: 500;
}

/* Dropdown-Menü: Einheitliche Farbpalette, aber funktional klar */
.navbar .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid var(--border-soft);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Standard-Text im Dropdown: Gedämpftes Lila (besser als reines Grau) */
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a {
    color: #5a2a5a !important; /* Dunklere Variante von #9c3d9c */
}

/* Hover im Dropdown: Springt auf deine helle Link-Farbe */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu a:hover {
    background-color: var(--background-main);
    color: var(--cassiopeia-color-link) !important;
}
/* ===== CONTENT ===== */
.container-component {
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(193,84,193,0.1);
}
/* ===== SIDEBAR ===== */
.sidebar {
background: #fff;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--border-soft);
}
/* ===== BUTTONS ===== */
/*.btn {
/*padding: 10px 20px;
/*border-radius: 8px;
/*border: none;
/*cursor: pointer;
/*}

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

.btn-secondary { background: var(--secondary); color: white; }
/* ===== LINKS ===== */
a {
color: var(--cassiopeia-color-link);
}
a:hover {
color: var(--cassiopeia-color-hover);
}
/* ===== FOOTER ===== */
.footer {
background: #2b2b2b;
color: #ddd;
padding: 30px;
text-align: center;
}
/* ===== HIGHLIGHT BOX ===== */
.highlight-box {
    background: #f3e6f3; /* Dein helles Fuchsia */
    border-left: 5px solid #C154C1; /* Dein kräftiges Fuchsia */
    padding: 15px 20px; /* Etwas mehr seitlicher Abstand */
    margin: 20px 0;
    border-radius: 0 8px 8px 0; /* Runde Ecken nur auf der rechten Seite */
    box-shadow: 0 2px 8px rgba(193, 84, 193, 0.15); /* Sanfter Fuchsia-Schatten */
    font-size: 0.95em; /* Leicht kleiner als der Haupttext, wirkt eleganter */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.container-component {
padding: 15px;
}
}