/* Darkmode*/
:root {
    --dark-background-color: #003652;
    --dark-text-color: #ffffff;
    --dark-link-color: #ffffff;
    --dark-link-hover-color: #fe9d0b;
    --dark-border-color: #143448; 
}

/* Allgemeine Reset-Einstellungen für Listen */

/* Horizontale Navigation für Header und Footer */

[data-theme="dark"] header {
    background-color: #414141; /* Dunklere Hintergrundfarbe */
    color: #888; /* Helle Schriftfarbe */
    font-family: 'roboto-condensedBold';
}

/* Link Farbe im Header */
[data-theme="dark"] header a {
    color: #888;
}

[data-theme="dark"] footer {
    background-color: #414141; /* Dunklere Farbe für Darkmode */
    color: #888;
}

[data-theme="dark"] footer a {
    color: #888;
}

[data-theme="dark"] main {
    flex: 1;  /* Erlaubt dem Hauptbereich, den verfügbaren Raum auszufüllen */
    padding: 20px;
    background-color: var(--dark-background-color);
    color: var(--dark-text-color)
}

 
[data-theme="dark"] body {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
}

[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] #id_share_technologies {
    background-color: #333;
    color: var(--dark-text-color)
}

[data-theme="dark"] #banner-img-left {
    content: url("/static/images/Dark_banner_left.362b470e5e4c.png");
}

[data-theme="dark"] #banner-img-right {
    content: url("/static/images/Dark_banner_right.a64d4c2ea9ec.png");
}

[data-theme="dark"] #banner_background {
    background-color: var(--dark-background-color);
}

[data-theme="dark"] .view_mode_icon {
    content: url("../images/moon_icon.409a0f3580d1.png");
}

[data-theme="dark"] .burger_line {
    background-color: #888888;
}

/* Suchfeld */
[data-theme="dark"] input[type="text"], 
[data-theme="dark"] input[type="search"] {
    background-color: #333; /* Dunkler Hintergrund */
    color: #ffffff; /* Helle Schrift */
    border: 1px solid #777; /* Graue Umrandung */
}

/* Suchfeld bei Fokus (wenn angeklickt) */
[data-theme="dark"] input[type="text"]:focus, 
[data-theme="dark"] input[type="search"]:focus {
    background-color: #222; /* Noch dunklerer Hintergrund */
    border-color: #182c44 !important; /* Umrandung im Darkmode */
    outline: 2px solid #182c44 !important; /* Falls Browser `outline` nutzt */
}

/* Styling für das Feld */
[data-theme="dark"] .search-container {
    background-color: var(--dark-background-color);
    box-shadow: 0 1px 5px #cccccc;
}

/* Button */
[data-theme="dark"] button {
    background-color: #182c44;
    color: white;
    border: 1px solid #888;
}

/* Hover-Farbe des Buttons */
[data-theme="dark"] button:hover {
    background-color: #66aaff;
    color: #fff;
}

/* Link Datenschutzerklärung */
[data-theme="dark"] .privacy-link {
    color: var(--dark-link-color); /* Helle Farbe für Darkmode */
}

[data-theme="dark"] .privacy-link:hover {
    color: var(--dark-link-hover-color); /* Noch hellere Farbe beim Hover */
}

/* Checkbox */
[data-theme="dark"] input[type="checkbox"] {
    border: 2px solid #666;
    background-color: transparent;
}

/* Hakenfarbe anpassen */
[data-theme="dark"] input[type="checkbox"]:checked::after {
    color: #66aaff;
}

/* Links */
[data-theme="dark"] a {
    color: #66aaff; /* Helle Standardfarbe */
}

/* Hover */
[data-theme="dark"] a:hover {
    color: #fe9d0b;
}

/* Anwendung der Variablen */

/* Design Prozesskettenbuilder */
[data-theme="dark"] #process-chain {
    border: 2px dashed #888; /* Graue Umrandung */
    background-color: #222; /* Dunkler Hintergrund */
}

[data-theme="dark"] .draggable {
    background-color: #444; /* Dunkles Grau */
    color: #ddd; /* Hellere Schrift für bessere Lesbarkeit */
}

[data-theme="dark"] .flow-step {
    background-color: #005f73; /* Dunkles Blau für die Prozessschritte */
    color: #ffffff; /* Weiße Schrift */
    border: 1px solid #66aaff; /* Blaue Umrandung */
}

/* Styling für das Zahlenfeld */
[data-theme="dark"] input[type="number"] {
    background-color: #333; /* Dunkler Hintergrund */
    color: white; /* Weiße Schrift */
    border: 1px solid #777; /* Graue Umrandung */
}

/* Fokus-Stil beim Klicken */
[data-theme="dark"] input[type="number"]:focus {
    border-color: #66aaff; /* Helle blaue Umrandung */
    outline: none;
}

/* Freitextfelder */
[data-theme="dark"] textarea {
    background-color: #333333;
    color: var(--dark-text-color);
}

/* Feld zur Auswahl der Freigegebenen Technologien */
[data-theme="dark"] #id_share_technologies {
    background-color: #333333;
    color: var(--dark-text-color);
}

[data-theme="dark"] .availability-bar {
    width: 100%;
    height: 18px;
    background: linear-gradient(90deg, #e6e6e6 0%, #e6e6e6 100%);
    border-radius: 10px;
    overflow: visible; /* allow handle to be fully visible at edges */
    border: 1px solid #ffffff;
}