:root {
    /* Farbvariablen */
    --primary-color: #2F3030;       /* Primärfarbe */
    --secondary-color: #717357;     /* Sekundärfarbe */
    --light-color: #F7F8F8;         /* Helle Farbe für Hintergrund */
    --hover-color: #5b5c60;         /* Farbe für Hover-Effekte */
    --font-color: #FFFFFF;          /* Schriftfarbe */
    --error-color: #ff4c4c;         /* Farbe für Fehler */
    --success-color: #4caf50;       /* Farbe für Erfolgsmeldungen */
    --info-color: #2196F3;          /* Farbe für Informationsmeldungen */
    --navbar-color: #343a40;        /* Dunkles Grau für die Navbar */
    --card-background: #FAFBFB;     /* Hellerer Hintergrund für die Karte */
    --input-background: #F0F4FF;    /* Hellerer Hintergrund für Input-Felder */
    --border-color: #dcdcdc;        /* Hellere Rahmenfarbe */
    --input-border-color: #b0b0b0;  /* Rahmenfarbe für Inputs */
    --button-color: #343a40;        /* Dunkles Grau für Buttons */
    --button-hover-color: #dcdcdc;  /* Dunkleres Grau für Button-Hover-Effekte */

    /* Abstandsvariablen */
    --padding-small: 5px;           /* Kleiner Abstand */
    --padding-medium: 10px;         /* Mittlerer Abstand */
    --padding-large: 20px;          /* Großer Abstand */
    --padding-xlarge: 30px;         /* Sehr großer Abstand */

    /* Schriftvariablen */
    --font-family-sans: 'Aeonik-Light';       /* Sans-serif Schriftfamilie */
    --font-family-serif: 'Aeonik-Bold';         /* Serif Schriftfamilie */
    --font-family-mono: 'Aeonik-Light';  /* Monospace Schriftfamilie */
}

/* Schriftarten */
@font-face {
    font-family: 'Aeonik-Light';
    src: url('/static/fonts/Aeonik-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Aeonik-Bold';
    src: url('/static/fonts/Aeonik-Bold.ttf') format('truetype');
}

.bold-font {
    font-weight: bold;
    font-family: var(--font-family-serif);
}

/* Allgemeine Stile */
body {
    font-family: var(--font-family-sans);          /* Standardschriftfamilie */
    line-height: 1.6;                              /* Zeilenhöhe */
    color: #333;                                   /* Schriftfarbe */
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;                     /* Hintergrundfarbe */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: var(--padding-large);              /* Abstand oben */
    margin-bottom: var(--padding-medium);          /* Abstand unten */
    font-family: var(--font-family-serif);         /* Serif Schriftfamilie */
}

p {
    margin-top: 0;
    margin-bottom: var(--padding-medium);          /* Abstand unten */
}

a {
    color: var(--primary-color);                   /* Linkfarbe */
    text-decoration: none;                         /* Keine Unterstreichung */
}

a:hover {
    text-decoration: underline;                    /* Unterstreichung bei Hover */
}

/* Container */
.container {
    width: 100%;                                   /* Volle Breite */
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-medium);          /* Innenabstand rechts */
    padding-left: var(--padding-medium);           /* Innenabstand links */
}


/* Grid System */
.row {
    display: flex;                                 /* Flexbox für Reihen */
    flex-wrap: wrap;                               /* Flexwrap für Zeilenumbruch */
    margin-right: -var(--padding-small);           /* Negativer Margin für Ausgleich */
    margin-left: -var(--padding-small);            /* Negativer Margin für Ausgleich */
}

.col {
    flex: 1;                                       /* Flexibles Wachstum */
    padding-right: var(--padding-small);           /* Innenabstand rechts */
    padding-left: var(--padding-small);            /* Innenabstand links */
}

/* Verschiedene Spaltenbreiten */
.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }

/* Navbar */
.navbar-custom {
    background-color: var(--navbar-color);         /* Dunkles Grau für die Navbar */
    position: sticky;                              /* Fixierte Position */
    top: 0;                                        /* Ganz oben */
    z-index: 1000;                                 /* Höchste Priorität */
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
    color: var(--font-color);                      /* Schriftfarbe */
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Damit Links nicht aussehen wie Links */
.no-underline {
    text-decoration: none !important;              /* Keine Unterstreichung */
}

/* Buttons */
.btn {
    display: inline-block;                         /* Inline-Block Anzeige */
    padding: var(--padding-medium) var(--padding-large); /* Innenabstand */
    font-size: 16px;                               /* Schriftgröße */
    font-weight: normal;                           /* Normale Schriftstärke */
    color: var(--font-color);                      /* Schriftfarbe */
    background-color: var(--button-color);         /* Dunkelgraue Hintergrundfarbe */
    border: none;                                  /* Kein Rahmen */
    border-radius: 4px;                            /* Abgerundete Ecken */
    text-align: center;                            /* Zentrierter Text */
    cursor: pointer;                               /* Mauszeiger als Hand */
    transition: background-color 0.3s;             /* Übergangseffekt bei Hintergrundfarbe */
}

.btn:hover {
    background-color: var(--button-hover-color);   /* Helleres Grau bei Hover */
}

/* Verschiedene Buttonfarben */
.btn-primary {
    background-color: var(--primary-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
}

.btn-success {
    background-color: var(--success-color);
}

.btn-danger {
    background-color: var(--error-color);
}

.btn-info {
    background-color: var(--info-color);
}

/* Forms */
.form-group {
    margin-bottom: var(--padding-large);           /* Abstand nach unten */
}

label {
    display: block;                                /* Block Anzeige */
    margin-bottom: var(--padding-small);           /* Abstand nach unten */
    color: var(--secondary-color);                 /* Schriftfarbe */
    font-size: 1rem;                               /* Schriftgröße */
}

input, select, textarea {
    display: block;                                /* Block Anzeige */
    width: 100%;                                   /* Volle Breite */
    padding: var(--padding-small);                 /* Innenabstand */
    font-size: 1rem;                               /* Schriftgröße */
    line-height: 1.5;                              /* Zeilenhöhe */
    color: #333;                                   /* Schriftfarbe */
    background-color: var(--input-background);     /* Hellblauer Hintergrund */
    border: 1px solid var(--input-border-color);   /* Rahmen */
    border-radius: 4px;                            /* Abgerundete Ecken */
    transition: border-color 0.3s;                 /* Übergangseffekt bei Rahmenfarbe */
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);            /* Rahmenfarbe bei Fokus */
}

/* Cards */
.card-custom {
    background-color: var(--card-background);      /* Hellerer Hintergrund für die Karte */
    border: 1px solid var(--border-color);         /* Rahmenfarbe */
    border-radius: 8px;                            /* Abgerundete Ecken */
    box-shadow: 5px 5px 10px rgba(113, 115, 87, 0.5); /* Schattenwurf */
    padding: var(--padding-medium);                /* Innenabstand */
}

.card-custom .card-title {
    color: var(--secondary-color);                 /* Farbe des Titels */
    margin-bottom: var(--padding-medium);          /* Abstand nach unten */
}

/* Alerts */
.alert {
    padding: var(--padding-medium);                /* Innenabstand */
    margin-bottom: var(--padding-large);           /* Abstand nach unten */
    border: 1px solid transparent;                 /* Transparenter Rahmen */
    border-radius: 4px;                            /* Abgerundete Ecken */
}

/* Verschiedene Alert-Farben */
.alert-primary {
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085;
}

.alert-secondary {
    background-color: #e2e3e5;
    border-color: #d6d8db;
    color: #383d41;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* Utility Classes */
.text-center {
    text-align: center;                            /* Zentrierter Text */
}

.text-right {
    text-align: right;                             /* Rechtsbündiger Text */
}

.text-left {
    text-align: left;                              /* Linksbündiger Text */
}

/* Abstände oben */
.mt-1 { margin-top: var(--padding-small); }
.mt-2 { margin-top: var(--padding-medium); }
.mt-3 { margin-top: var(--padding-large); }
.mt-4 { margin-top: var(--padding-xlarge); }

/* Abstände unten */
.mb-1 { margin-bottom: var(--padding-small); }
.mb-2 { margin-bottom: var(--padding-medium); }
.mb-3 { margin-bottom: var(--padding-large); }
.mb-4 { margin-bottom: var(--padding-xlarge); }

/* Innenabstände oben */
.pt-1 { padding-top: var(--padding-small); }
.pt-2 { padding-top: var(--padding-medium); }
.pt-3 { padding-top: var(--padding-large); }
.pt-4 { padding-top: var(--padding-xlarge); }

/* Innenabstände unten */
.pb-1 { padding-bottom: var(--padding-small); }
.pb-2 { padding-bottom: var (--padding-medium); }
.pb-3 { padding-bottom: var(--padding-large); }
.pb-4 { padding-bottom: var(--padding-xlarge); }

/* Flexbox Utilities */
.d-flex {
    display: flex;                                 /* Flexbox Anzeige */
}

.justify-content-center {
    justify-content: center;                       /* Zentrierter Inhalt */
}

.justify-content-between {
    justify-content: space-between;                /* Verteilung des Inhalts */
}

.align-items-center {
    align-items: center;                           /* Vertikale Zentrierung */
}

/* Custom Classes */
.no-underline {
    text-decoration: none !important;              /* Keine Unterstreichung */
}

/* Zusätzliche Klassen für spezifische Stile */
.mt-5 {
    margin-top: 3rem !important;
}

.card-body {
    padding: 1.25rem;
}

.text-center {
    text-align: center !important;
}

.table-container {
    flex: 1;
    border: 1px solid #555; /* Dunklerer Rahmen um die Tabellen hinzugefügt */
    border-radius: 8px; /* Abgerundete Ecken */
    max-height: 300px;  /* Maximale Höhe der Tabelle auf 100% des Containers */
    overflow-y: auto;   /* Vertikales Scrollen */
    overflow-x: auto;
    padding: 2px;
    margin: 30px;
    margin-bottom: 30px:
}

.table {
    width: 100%;
    margin-bottom: var(--padding-large);
    color: #212529;
    border-collapse: collapse;
    padding: 5px;
    font-size: 0.875rem; /* Schriftgröße kleiner gemacht (14px) */
}

.table th, .table td {
    padding: var(--padding-small);
    vertical-align: top;
    border-top: 1px solid var(--border-color);
    line-height: 2; /* Set line-height to increase the row height */
    font-size: 0.875rem; /* Schriftgröße kleiner gemacht (14px) */
}

.table thead th {
    position: sticky;                              /* Sticky Position */
    top: 0;                                        /* Oben fixiert */
    z-index: 10;                                   /* Über anderen Inhalten */
    background-color: var(--light-color);          /* Hintergrundfarbe für Header */
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color);
}

.table tbody + tbody {
    border-top: 2px solid var(--border-color);
}

.table .table {
    background-color: #fff;
}

/* Hervorhebung für ausgewählte Tabellenzeile */
.table tbody tr.highlighted {
    background-color: var(--hover-color); /* Farbvariable für Hover-Effekte */
}

/* Buttons in der Tabelle */
.table .btn {
    padding: var(--padding-small) var(--padding-medium);
    font-size: 0.75rem; /* Schriftgröße kleiner gemacht (12px) */
    background-color: var(--button-color);         /* Dunkelgraue Hintergrundfarbe */
    border: none;                                  /* Kein Rahmen */
}

.table .btn:hover {
    background-color: var(--button-hover-color);   /* Helleres Grau bei Hover */
}

/* Dropdown-Menü */
.dropdown-menu {
    background-color: var(--button-color);         /* Dunkelgraue Hintergrundfarbe */
    color: var(--font-color);
    border: none;                                  /* Kein Rahmen */
    border-radius: 4px;
    max-height: 400px;
}

.dropdown-menu .dropdown-item {
    color: var(--font-color);
    padding: var(--padding-small) var(--padding-medium);
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--button-hover-color);   /* Helleres Grau bei Hover */
    color: var(--font-color);
}

/* Dropdown Button */
.dropdown-toggle {
    display: inline-block;
    padding: var(--padding-medium) var(--padding-large);
    font-size: 16px;
    font-weight: normal;
    color: var(--font-color);
    background-color: var(--button-color);         /* Dunkelgraue Hintergrundfarbe */
    border: none;                                  /* Kein Rahmen */
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dropdown-toggle:hover {
    background-color: var(--button-hover-color);   /* Helleres Grau bei Hover */
}

/* Flexbox für Button-Filter-Container */
.btn-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-medium); /* Abstand zwischen den Elementen */
    align-items: center; /* Vertikale Zentrierung */
}

.form-control {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    min-width: 200px; /* Mindestbreite, anpassen nach Bedarf */
    height: 40px; /* Beispielhöhe, anpassen nach Bedarf */
}