/*Sidebar - Layout*/
.sidebar {
    background-color: #F9FAFF; /* Weißer Hintergrund für Sidebar */
    padding: 2rem 3rem;
    width: 170px;
    height: 100vh; /* Beispiel: Füllt Höhe unter dem Header */
    border-right: 1px solid #e0e0e0;
    position: fixed;
    margin-top: 120px;
}

/*Sidebar - Listendarstellung*/
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

/*Sidebar - Überschriften Layout*/
.sidebar li {
    font-size: 19px;
    margin: 0.5rem 0;
    cursor: pointer;
}

/*Sidebar - Überschriften Linie beim Hover*/
.sidebar-link:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: black;
}

.active-link {
    font-weight: bold;
    color: #29214a; /*Akzentfarbe */
    border-left: 3px solid #29214a; /* Markierung links*/
    /* Wichtig: Padding muss angepasst werden, damit der Text nicht in den Border rutscht */
    padding-left: calc(1.5rem - 9px);
}

.admin-sidebar .sidebar-link {
    text-decoration: none;
    color: #333; /* Standardfarbe für Links */
    position: fixed; /* Für eventuelle Pseudo-Elemente, falls du noch Hover-Effekte willst */
}

/* Styling für den "Geheim"-Link selbst */
.geheim-link a {
    font-size: 17px; /* Etwas kleiner als die Hauptlinks in der Sidebar */
    color: #444;      /* Eine etwas dezentere Farbe */
    text-decoration: none;
    display: block;    /* Macht den gesamten Bereich klickbar */
    padding: 4px 0;  /* Etwas Padding für bessere Klickbarkeit */
    transition: color 0.2s ease, font-weight 0.2s ease; /* Sanfter Übergang für Hover-Effekte */
}

/* Hover-Effekt für den "Geheim"-Link */
.geheim-link a:hover {
    color: #29214a; /* Ihre Akzentfarbe für Hover */
    font-weight: bold;
}

/*Admin-Easter-Egg*/
/* Styling für das Untermenü, das "Geheim" enthält */
.datenschutz-li .submenu {
    list-style: none; /* Entfernt Aufzählungszeichen */
    padding-left: 20px; /* Leichte Einrückung für das Untermenü */
    margin-top: 5px;    /* Kleiner Abstand zum "Datenschutz"-Link */
    display: none;      /* Standardmäßig ausgeblendet */
}

/* Macht das Untermenü sichtbar, wenn über das "Datenschutz" <li> gehovert wird */
.datenschutz-li:hover .submenu {
    display: block;
}

/* Optional: Sicherstellen, dass die Sidebar-Links relativ positioniert sind,
   falls Sie komplexere Hover-Effekte oder Pseudo-Elemente verwenden möchten.
   Dies ist möglicherweise nicht notwendig, basierend auf Ihrem aktuellen CSS. */
.sidebar .sidebar-link {
    position: relative;
}

/*SidebarErweitert - Suchfeld Größe*/
.search-container-newSidebar [type="text"] {
    padding: 0.5rem;
    width: 95%;
    max-width: 400px;
    border-radius: 50px;
    border: 1px solid #ccc; /* Helle graue Umrandung */
    margin-top: 10px;     /* Abstand nach oben */
    margin-bottom: 10px;  /* Abstand nach unten */
}

/*SidebarErweitert - Grid mit zwei Spalten und beliebig vielen Zeilen*/
.extendedSidebar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    gap: 12px 24px; /* Zeilen- und Spaltenabstand */
}

/*SidebarErweitert - Grid mit einer Spalte und beliebig vielen Zeilen*/
.extendedSidebar-singlegrid {
    display: grid;
    gap: 12px 24px; /* Zeilen- und Spaltenabstand */
}

/*SidebarErweitert - Inhaltsformatierung*/
.extendedSidebar-item {
    display: grid;
    font-size: 10px;
    grid-template-columns: auto auto 1fr; /* Icon, Checkbox, Label */
    align-items: center;
    gap: 6px;
}

/*SidebarErweitert - Negativfiltersymbol*/
.negative-icon {
    font-size: 16px;
    color: #cc0000;
}

/*SidebarErweitert - Checkbox für Auswahl*/
input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/*SidebarErweitert - Abstand zu Trennlinie oben und unten*/
details.accordion-item > .extendedSidebar-grid {
    margin-top: 12px; /* Oder ein Wert, der für dich gut aussieht */
    margin-bottom: 12px; /* Abstand nach unten */
}

/*SidebarErweitert - Abstand zu Trennlinie oben und unten*/
details.accordion-item > .extendedSidebar-singlegrid {
    margin-top: 12px; /* Oder ein Wert, der für dich gut aussieht */
    margin-bottom: 12px; /* Abstand nach unten */
}

/*SidebarErweitert - Datumcontainer Formatierung*/
.datum-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

/*SidebarErweitert - Datumcontainer Layout*/
.datum-container input[type="number"] {
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 50px;
    width: 100%;
}

/*SidebarErweitert - Anwenden Button*/
.datum-button {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #29214a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: fit-content;
}

/*SidebarErweitert - Anwenden-Button hover*/
.datum-button:hover {
    background-color: #005fa3;
}

/*SidebarErweitert - Filter Formatierung*/
.filter-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    margin-bottom: 30px;
}

/*SidebarErweitert - Abstand unter Sortieren nach*/
.sortieren-nach {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

/*SidebarErweitert - Sortieren nach Layout*/
.sort-label {
    font-weight: bold;
    font-size: 16px;
}

/*SidebarErweitert - Dropdown Menü Formatierung*/
.dropdown {
    position: relative;
    font-size: 14px;
}

/*SidebarErweitert - Dropdown Menü Formatierung*/
.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    width: 120px;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    z-index: 1000;
}

/*SidebarErweitert - Dropdown Menü Optionen Layout*/
.dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
}

/*SidebarErweitert - Dropdown Menü Optionen hover*/
.dropdown-option:hover {
    background-color: #003366; /* Blau wie Header */
    color: white;
}

/*SidebarErweitert - Relevanz Link-Umwandlung*/
.no-link {
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    color: inherit; /* Erbt die Textfarbe des umgebenden Elements */
}