/* Allgemeine Styles für alle Controls */
body {
    background-color: var(--background);
    color: var(--text);
}

/* Buttons */
button {
    background-color: var(--background);
    color: var(--text);
    border: 1px solid var(--border);
}

button:hover {
    background-color: var(--hover);
}

/* Inputs, Textareas */
input, textarea {
    background-color: var(--background);
    color: var(--text);
    border: 1px solid var(--border);
}

    input:focus, textarea:focus {
        border-color: var(--border);
    }

/* Select-Dropdowns */
select {
    background-color: var(--background);
    color: var(--text);
    border: 1px solid var(--border);
}

    select:focus {
        border-color: var(--focus-border);
    }

    select:hover {
        background-color: var(--hover);
    }



/* Checkbox & Radio */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--accent-text);
}

    /* Toggle-Switches */
    input[type="checkbox"].toggle {
        background-color: var(--border);
    }

        input[type="checkbox"].toggle:checked {
            background-color: var(--background);
        }

        input[type="checkbox"].toggle::before {
            background-color: var(--background);
        }

/* Links */
a,
a:link,
a:visited {
    color: var(--link-text);
    text-decoration: none; /* Kein Unterstrich im Normalzustand */
}

a:hover,
a:focus,
a:active {
    color: var(--link-hover-text);
    text-decoration: underline; /* Unterstrich bei Hover */
}




/* Karten / Panels */
.card {
    background-color: var(--background);
    border: 1px solid var(--border);
    padding: 16px;
    border-radius: 8px;
}

.top-menu {
    background-color: var(--footer-background); /* Hintergrundfarbe */
    color: #00ff21; /* Textfarbe */
    border: transparent;
}

.toolbar {
    background-color: var(--footer-background); /* Hintergrundfarbe */
    color: #00ff21; /* Textfarbe */
    border: transparent;
}

.groupbox {
    border: 1px solid var(--border);
}
/* ----------------------------------------------------------------------------- */


/* -------------------------- Header und Footer -------------------------------- */
header {
    background: var(--footer-background);
    color: var(--footer-text);
}

    header a:link,
    header a:visited {
        color: var(--footer-link-text);
        text-decoration: none; /* Kein Unterstrich im Normalzustand */
    }

    header a:hover,
    header a:active {
        color: var(--footer-link-hover-text);
        text-decoration: underline; /* Unterstrich bei Hover */
    }



footer {
    background: var(--footer-background);
    color: var(--footer-text);
}

footer a:link,
footer a:visited {
    color: var(--footer-link-text);
    text-decoration: none; /* Kein Unterstrich im Normalzustand */
}

footer a:hover,
footer a:active {
    color: var(--footer-link-hover-text);
    text-decoration: underline; /* Unterstrich bei Hover */
}



    footer select {
        background-color: var(--footer-background);
        color: var(--footer-select-text);
        border-color: var(--footer-select-border);
    }

        footer select:focus {
            border-color: var(--footer-select-border);
        }

        footer select:hover {
            background-color: var(--footer-hover);
        }

    footer button {
        background-color: var(--footer-button-background);
        color: var(--footer-button-text);
        border-color: var(--footer-button-border);
    }

        footer button:hover {
            background-color: var(--footer-hover);
        }

/* ----------------------------------------------------------------------------- */



/* ------------- Sektionen mit einem einfachen Border und Abstand --------------*/
.section {
    border: 1px solid var(--border);
    box-shadow: 0 0 10px var(--border);
}

/* Grid-Elemente */
.section-grid-item {
    background-color: transparent;
}
/* ----------------------------------------------------------------------------- */


/* --------------------------------- Tabellen-Elemente ------------------------- */
/* Optional: Breite der Tabelle, um Scroll zu triggern */
.table {
    border: 2px solid var(--border);
}


.table-column-header {
    background-color: var(--background-soft);
    border-right: 1px solid var(--border);
    color: var(--text);
}

.table-cell {
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
}



/* Tabellen */
table {
    background-color: var(--background);
    color: var(--text);
    border-collapse: collapse;
    width: 100%;
}

.table-cell {
    padding: 6px;
    text-align: center;
    color: var(--text);
}

th, td {
    border: 1px solid var(--border);
    padding: 8px;
}

th {
    background-color: var(--background-soft);
    color: var(--text);
}
/* ----------------------------------------------------------------------------- */