:root {
    --primary: #0d6efd;
    --primary-hover: #0a58ca;
    --border-color: #dee2e6;
    --bg-light: #f8f9fa;
  /*  --radius: 0.375rem;*/
	--radius: 0rem;
	--border-radius-input: 0.375rem;
    --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	
	--nav-bg: #ffffff;           /* Hintergrundfarbe der Menüs */
    --nav-hover: #f8f9fa;        /* Hover-Farbe für mainmenü sub*/
    --nav-text: #333333;         /* Textfarbe */
    --nav-icon-size: 20px;       /* Größe der Icons */

	--custom-dropdown-hover: #6e89b5;
}

/* --- BASIS & GRID (BS3 Logik, modern umgesetzt) --- */
* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; color: #212529; margin: 0; }

/* --- BOOTSTRAP v3 TYPOGRAFIE (h1 bis h6) --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

/* Margins für große Überschriften */
h1, .h1, 
h2, .h2, 
h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Margins für kleine Überschriften */
h4, .h4, 
h5, .h5, 
h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Exakte Bootstrap v3 Schriftgrößen */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; }
.small { font-size: 85%; }
.text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; }
.text-muted { color: #777; }
.text-primary { color: #337ab7; } .text-success { color: #3c763d; } .text-info { color: #31708f; } .text-warning { color: #8a6d3b; } .text-danger { color: #a94442; }
.bg-primary { background-color: #337ab7; color: #fff; } .bg-success { background-color: #dff0d8; } .bg-info { background-color: #d9edf7; } .bg-warning { background-color: #fcf8e3; } .bg-danger { background-color: #f2dede; }

.pull-right { float: right !important; } .pull-left { float: left !important; }
.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.hide { display: none !important; } .show { display: block !important; } .invisible { visibility: hidden; }


hr {
    border: none;               /* Entfernt alle Standard-Ränder und Schatten */
    border-top: 1px solid #ddd; /* Erzeugt eine exakt 1px dünne, solide Linie */
    height: 0;                  /* Verhindert, dass das Element zusätzliche Höhe einnimmt */
    margin: 20px 0;             /* Optional: Abstand nach oben und unten (beliebig anpassbar) */
}


blockquote {
    margin: 20px 0;               /* Abstand nach oben und unten */
    padding: 10px 20px;           /* Innenabstand (links/rechts und oben/unten) */
    border-left: 5px solid #d9534f; /* Der rote Balken am linken Rand (passend zu deiner .btn-danger Farbe) */
    background-color: #f8f9fa;    /* Optional: Ein leicht grauer Hintergrund, damit es sich abhebt */
    font-style: italic;           /* Optional: Kursiver Text für Zitate */
}

/* Verhindert, dass das p-Tag innerhalb des blockquotes zusätzliche ungewollte Abstände erzeugt */
blockquote p {
    margin: 0;
    line-height: 1.6;
}

/* --- 2. GRID SYSTEM (BS3 Logik) --- */
.container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.row { 
    margin-left: -15px; 
    margin-right: -15px; 
    display: block; 
}
/* Verhindert das Ineinanderhaken von gefloateten Kindelementen */
.row::before,
.row::after { 
    content: " "; 
    display: table; 
} 
.row::after { 
    clear: both; 
}

[class*="col-"] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; }

/* XS Grid */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }
.col-xs-12 { width: 100%; } .col-xs-6 { width: 50%; }

/* SM / MD / LG Grid (Auszug) */
/* --- SM GRID SYSTEM (Vollständige Bootstrap v3 Logik ab 768px) --- */
@media (min-width: 768px) {
    /* Alle SM-Spaltenbreiten (1 bis 12) */
    .col-sm-1  { width: 8.33333333%; }
    .col-sm-2  { width: 16.66666667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.33333333%; }
    .col-sm-5  { width: 41.66666667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.33333333%; }
    .col-sm-8  { width: 66.66666667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-12 { width: 100%; }

    /* Grid-Offsets (Spalten nach rechts verschieben) */
    .col-sm-offset-1  { margin-left: 8.33333333%; }
    .col-sm-offset-2  { margin-left: 16.66666667%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-4  { margin-left: 33.33333333%; }
    .col-sm-offset-5  { margin-left: 41.66666667%; }
    .col-sm-offset-6  { margin-left: 50%; }
    .col-sm-offset-7  { margin-left: 58.33333333%; }
    .col-sm-offset-8  { margin-left: 66.66666667%; }
    .col-sm-offset-9  { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
    .col-sm-offset-12 { margin-left: 100%; }

    /* Grid-Push (Spalten visuell nach rechts schieben) */
    .col-sm-push-1  { left: 8.33333333%; }
    .col-sm-push-2  { left: 16.66666667%; }
    .col-sm-push-3  { left: 25%; }
    .col-sm-push-4  { left: 33.33333333%; }
    .col-sm-push-5  { left: 41.66666667%; }
    .col-sm-push-6  { left: 50%; }
    .col-sm-push-7  { left: 58.33333333%; }
    .col-sm-push-8  { left: 66.66666667%; }
    .col-sm-push-9  { left: 75%; }
    .col-sm-push-10 { left: 83.33333333%; }
    .col-sm-push-11 { left: 91.66666667%; }
    .col-sm-push-12 { left: 100%; }

    /* Grid-Pull (Spalten visuell nach links ziehen) */
    .col-sm-pull-1  { right: 8.33333333%; }
    .col-sm-pull-2  { right: 16.66666667%; }
    .col-sm-pull-3  { right: 25%; }
    .col-sm-pull-4  { right: 33.33333333%; }
    .col-sm-pull-5  { right: 41.66666667%; }
    .col-sm-pull-6  { right: 50%; }
    .col-sm-pull-7  { right: 58.33333333%; }
    .col-sm-pull-8  { right: 66.66666667%; }
    .col-sm-pull-9  { right: 75%; }
    .col-sm-pull-10 { right: 83.33333333%; }
    .col-sm-pull-11 { right: 91.66666667%; }
    .col-sm-pull-12 { right: 100%; }

    /* Sichtbarkeiten für SM */
    .hidden-sm { display: none !important; } 
    .visible-sm { display: block !important; }
}



/* --- MD GRID SYSTEM (Vollständige Bootstrap v3 Logik ab 992px) --- */
@media (min-width: 992px) {
    /* Alle MD-Spaltenbreiten (1 bis 12) */
    .col-md-1  { width: 8.33333333%; }
    .col-md-2  { width: 16.66666667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.33333333%; }
    .col-md-5  { width: 41.66666667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.33333333%; }
    .col-md-8  { width: 66.66666667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-12 { width: 100%; }

    /* Grid-Offsets (Spalten nach rechts verschieben) */
    .col-md-offset-1  { margin-left: 8.33333333%; }
    .col-md-offset-2  { margin-left: 16.66666667%; }
    .col-md-offset-3  { margin-left: 25%; }
    .col-md-offset-4  { margin-left: 33.33333333%; }
    .col-md-offset-5  { margin-left: 41.66666667%; }
    .col-md-offset-6  { margin-left: 50%; }
    .col-md-offset-7  { margin-left: 58.33333333%; }
    .col-md-offset-8  { margin-left: 66.66666667%; }
    .col-md-offset-9  { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
    .col-md-offset-12 { margin-left: 100%; }

    /* Grid-Push (Spalten visuell nach rechts schieben) */
    .col-md-push-1  { left: 8.33333333%; }
    .col-md-push-2  { left: 16.66666667%; }
    .col-md-push-3  { left: 25%; }
    .col-md-push-4  { left: 33.33333333%; }
    .col-md-push-5  { left: 41.66666667%; }
    .col-md-push-6  { left: 50%; }
    .col-md-push-7  { left: 58.33333333%; }
    .col-md-push-8  { left: 66.66666667%; }
    .col-md-push-9  { left: 75%; }
    .col-md-push-10 { left: 83.33333333%; }
    .col-md-push-11 { left: 91.66666667%; }
    .col-md-push-12 { left: 100%; }

    /* Grid-Pull (Spalten visuell nach links ziehen) */
    .col-md-pull-1  { right: 8.33333333%; }
    .col-md-pull-2  { right: 16.66666667%; }
    .col-md-pull-3  { right: 25%; }
    .col-md-pull-4  { right: 33.33333333%; }
    .col-md-pull-5  { right: 41.66666667%; }
    .col-md-pull-6  { right: 50%; }
    .col-md-pull-7  { right: 58.33333333%; }
    .col-md-pull-8  { right: 66.66666667%; }
    .col-md-pull-9  { right: 75%; }
    .col-md-pull-10 { right: 83.33333333%; }
    .col-md-pull-11 { right: 91.66666667%; }
    .col-md-pull-12 { right: 100%; }

    /* Sichtbarkeiten für MD */
    .hidden-md { display: none !important; } 
    .visible-md { display: block !important; }
}


/* --- LG GRID SYSTEM (Vollständige Bootstrap v3 Logik ab 1200px) --- */
@media (min-width: 1200px) {
    /* Alle LG-Spaltenbreiten (1 bis 12) */
    .col-lg-1  { width: 8.33333333%; }
    .col-lg-2  { width: 16.66666667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.33333333%; }
    .col-lg-5  { width: 41.66666667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.33333333%; }
    .col-lg-8  { width: 66.66666667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-12 { width: 100%; }

    /* Grid-Offsets (Spalten nach rechts verschieben) */
    .col-lg-offset-1  { margin-left: 8.33333333%; }
    .col-lg-offset-2  { margin-left: 16.66666667%; }
    .col-lg-offset-3  { margin-left: 25%; }
    .col-lg-offset-4  { margin-left: 33.33333333%; }
    .col-lg-offset-5  { margin-left: 41.66666667%; }
    .col-lg-offset-6  { margin-left: 50%; }
    .col-lg-offset-7  { margin-left: 58.33333333%; }
    .col-lg-offset-8  { margin-left: 66.66666667%; }
    .col-lg-offset-9  { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
    .col-lg-offset-12 { margin-left: 100%; }

    /* Grid-Push (Spalten visuell nach rechts schieben) */
    .col-lg-push-1  { left: 8.33333333%; }
    .col-lg-push-2  { left: 16.66666667%; }
    .col-lg-push-3  { left: 25%; }
    .col-lg-push-4  { left: 33.33333333%; }
    .col-lg-push-5  { left: 41.66666667%; }
    .col-lg-push-6  { left: 50%; }
    .col-lg-push-7  { left: 58.33333333%; }
    .col-lg-push-8  { left: 66.66666667%; }
    .col-lg-push-9  { left: 75%; }
    .col-lg-push-10 { left: 83.33333333%; }
    .col-lg-push-11 { left: 91.66666667%; }
    .col-lg-push-12 { left: 100%; }

    /* Grid-Pull (Spalten visuell nach links ziehen) */
    .col-lg-pull-1  { right: 8.33333333%; }
    .col-lg-pull-2  { right: 16.66666667%; }
    .col-lg-pull-3  { right: 25%; }
    .col-lg-pull-4  { right: 33.33333333%; }
    .col-lg-pull-5  { right: 41.66666667%; }
    .col-lg-pull-6  { right: 50%; }
    .col-lg-pull-7  { right: 58.33333333%; }
    .col-lg-pull-8  { right: 66.66666667%; }
    .col-lg-pull-9  { right: 75%; }
    .col-lg-pull-10 { right: 83.33333333%; }
    .col-lg-pull-11 { right: 91.66666667%; }
    .col-lg-pull-12 { right: 100%; }

    /* Sichtbarkeiten für LG */
    .hidden-lg { display: none !important; } 
    .visible-lg { display: block !important; }
}





/* --- 3. TABELLEN --- */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.table th, .table td { padding: 8px; line-height: 1.4; border-top: 1px solid #ddd; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #f9f9f9; }
.table-bordered { border: 1px solid #ddd; }
.table-hover tbody tr:hover { background-color: #f5f5f5; }
.table-condensed th, .table-condensed td { padding: 5px; }




/* --- MODERN BUTTONS --- */
/* --- 4. FORMULARE & BUTTONS --- */

.input-group { 
    display: flex; 
    align-items: stretch; 
    width: 100%;
    margin-bottom: 1rem; 
}
.input-group-text { 
    background: var(--bg-light); border: 1px solid var(--border-color); 
    padding: 0.375rem 0.75rem; 
	border-radius: var(--border-radius-input) 0 0 var(--border-radius-input); /* Korrigiert */
    border-right: none; display: flex; align-items: center;
}

/* Das Addon (Icon-Behälter) */
.input-group-addon { 
    background: var(--bg-light); 
    border: 1px solid var(--border-color); 
    padding: 0.375rem 0.75rem; 
    display: flex; 
    align-items: center;
    white-space: nowrap;
}


/* Das Eingabefeld nimmt den restlichen Platz ein */
/*
.form-control { 
    flex: 1; 
    border: 1px solid var(--border-color); 
	 border-radius: var(--border-radius-input);
    padding: 0.5rem 0.75rem;
    outline: none; 
    transition: border-color 0.2s;
}
*/

/* 1. Standardverhalten: Immer 100% Breite */
.form-control { 
    display: block;
    width: 100%;
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius-input);
    padding: 0.5rem 0.75rem;
    outline: none; 
    transition: border-color 0.2s;
}

/* 2. Flexibilitäts-Ausnahme: Wenn das Feld in einer .input-group liegt */
.input-group .form-control {
    flex: 1 1 auto;
    width: 1%;        /* Bootstrap-Trick: Zwingt Flexbox zum korrekten Schrumpfen */
    min-width: 0;     /* Verhindert, dass das Input-Feld aus dem Container ausbricht */
}


.form-control:focus { 
    border-color: var(--primary); 
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15); 
}


/* --- AUTOMATISCHE ECKEN-STEUERUNG (Intelligente BS3 Logik via CSS) --- */

/* Wenn das Addon LINKS steht */
/* Wenn das Addon LINKS steht */
.input-group > .input-group-addon:first-child {
    border-radius: var(--border-radius-input) 0 0 var(--border-radius-input); /* Korrigiert */
    border-right: none; /* Verhindert doppelten Rahmen */
}
.input-group > .input-group-addon:first-child + .form-control {
    border-radius: 0 var(--border-radius-input) var(--border-radius-input) 0; /* Korrigiert */
}

/* Wenn das Addon RECHTS steht */
.input-group > .form-control:first-child {
    border-radius: var(--border-radius-input) 0 0 var(--border-radius-input); /* Korrigiert */
}
.input-group > .form-control:first-child + .input-group-addon {
    border-radius: 0 var(--border-radius-input) var(--border-radius-input) 0; /* Korrigiert */
    border-left: none; /* Verhindert doppelten Rahmen */
}


/* --- TEXTAREAS (Bootstrap v3 Style) --- */
textarea.form-control {
    display: block;
    width: 100%;
    max-width: 100%; /* Zwingend nötig, damit die Tabelle nicht gesprengt wird */
    height: auto;
    resize: vertical; /* Erlaubt nur das Vergrößern nach unten, nicht zur Seite */
    padding: 6px 12px;
    line-height: 1.42857143;
}

/* Fallback: Greift bei Textareas in Tabellen auch ohne explizite .form-control Klasse */
.table textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* --- SELECT BOXES (Bootstrap 3 Style) --- */
select.form-control {
    display: block;
    width: 100%;
    height: 34px; /* Standard-Höhe für BS3 Formulare */
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-input);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    /* Optional: Falls ein Standard-Dropdown-Pfeil gewünscht ist */
    appearance: menulist; 
}

/* Fokus-Zustand für Select-Boxen */
select.form-control:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Disabled-Zustand */
select.form-control[disabled],
select.form-control[readonly] {
    background-color: var(--bg-light);
    cursor: not-allowed;
}



.has-error .form-control { border-color: #a94442; }
.has-success .form-control { border-color: #3c763d; }

.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; }
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.btn-sm { padding: 5px 10px; font-size: 12px; } .btn-xs { padding: 1px 5px; font-size: 12px; }
.btn-lg { padding: 0.5rem 1rem; font-size: 1.1rem; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

/* --- CHECKBOX & RADIO CONTROLS --- */
.checkbox, .radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 24px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}


/* ==========================================================================
   NEU / ANGEPASST: Standard-Checkboxen im Tree-Look stylen
   ========================================================================== */
/* ==========================================================================
   NEU / ANGEPASST: Standard-Checkboxen im Tree-Look (inkl. Inline-Fix)
   ========================================================================== */

/* 1. Basis-Styling für ALLE Custom-Checkboxen */
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    box-sizing: border-box;
    width: 16px; 
    height: 16px; 
    border: 1px solid #ccc; 
    background: #fff;
    position: absolute;
    margin-left: -20px; /* Leicht angepasst für harmonischen Abstand */
    margin-top: 2px;    /* Drückt die Box leicht nach unten, damit sie mittig zum Text steht */
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. Spezifische Anpassung für INLINE Checkboxen und Radios */
.checkbox-inline,
.radio-inline {
    position: relative;
    display: inline-flex;     /* Aktiviert Flexbox */
    align-items: center;      /* Zentriert Text und Checkbox vertikal perfekt */
    padding-left: 22px;       /* Platz für die absolut positionierte Box auf der linken Seite */
    margin-right: 20px;       /* Das ist der Mindestabstand zum NÄCHSTEN Element */
    margin-bottom: 5px;       /* Falls die Zeile umbricht, kleben sie nicht untereinander */
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;      /* Verhindert unschöne Zeilenumbrüche INNERHALB eines Labels */
}

/* Setzt alte Bootstrap-Abstände zurück, damit Flexbox sauber greift */
.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
    margin-left: 0;
}

/* Die Checkbox selbst (Bleibt links verankert) */
.checkbox-inline input[type="checkbox"],
.radio-inline input[type="radio"] {
    position: absolute;
    left: 0;                  /* Setzt die Box fest ganz links in den Padding-Bereich */
    margin-left: 0;           /* Entfernt negative Margins */
    margin-top: 0;            /* Zentrierung übernimmt jetzt align-items: center */
}

/* 3. Checked Zustand */
.checkbox input[type="checkbox"]:checked,
.checkbox-inline input[type="checkbox"]:checked { 
    background: #6e89b5; 
    border-color: #6e89b5; 
}

/* Das Häkchen */
.checkbox input[type="checkbox"]:checked::after,
.checkbox-inline input[type="checkbox"]:checked::after { 
    content: '✓'; 
    color: #fff; 
    font-size: 11px; 
    font-weight: bold;
    line-height: 1;
}

/* 4. Indeterminate (Teilweise ausgewählt) */
.checkbox input[type="checkbox"]:indeterminate,
.checkbox-inline input[type="checkbox"]:indeterminate { 
    background: #fff; 
    border: 2px solid #333; 
}

.checkbox input[type="checkbox"]:indeterminate::after,
.checkbox-inline input[type="checkbox"]:indeterminate::after { 
    content: ''; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;       
    height: 6px; 
    background: #333; 
}

/* Bestehender Disabled Status (angepasst, damit die Opacity auch für die Custom Box gilt) */
input[disabled], .disabled label {
    cursor: not-allowed;
    opacity: 0.6;
}



/* ==========================================================================
   NEU / ANGEPASST: Standard-Radios im passenden Look (Farbe: #6e89b5)
   ========================================================================== */

/* 1. Basis-Styling für ALLE Custom-Radios */
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    box-sizing: border-box;
    width: 16px; 
    height: 16px; 
    border: 1px solid #ccc; 
    border-radius: 50%; /* Macht das Element kreisrund */
    background: #fff;
    position: absolute;
    left: 0;            /* Perfekt links verankert für die Inline-Variante */
    margin-left: 0;
    margin-top: 0;      /* Zentrierung übernimmt align-items: center des Labels */
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. Ausgewählter Zustand (Checked) -> Hintergrund & Rahmen ändern */
.radio input[type="radio"]:checked,
.radio-inline input[type="radio"]:checked { 
    background: #6e89b5; 
    border-color: #6e89b5; 
}

/* 3. Der weiße Punkt in der Mitte des ausgewählten Radio-Buttons */
.radio input[type="radio"]:checked::after,
.radio-inline input[type="radio"]:checked::after { 
    content: ''; 
    width: 6px;       
    height: 6px; 
    background: #fff; /* Weißer Punkt auf blauem Grund */
    border-radius: 50%;
    display: block;
}





/*
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px;
    cursor: pointer;
}


.checkbox-inline, .radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 15px;
}

.checkbox-inline input[type="checkbox"],
.radio-inline input[type="radio"] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px;
}


input[disabled], .disabled label {
    cursor: not-allowed;
    opacity: 0.6;
}
*/


/* --- 5. PANELS & WELLS --- */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; background-color: #f5f5f5; }
.panel-body { padding: 15px; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }


/* --- 7. BILDER (Bootstrap v3 Kompatibilität) --- */

/* Macht Bilder responsiv (nimmt max. 100% Breite ein, Höhe passt sich an) */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Abgerundete Ecken (6px ist der BS3 Standard für Bilder) */
.img-rounded {
    border-radius: 6px;
}

/* Macht das Bild kreisrund */
.img-circle {
    border-radius: 50%;
}

/* Thumbnail-Look mit Rahmen und Padding */
.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


/* --- MODALS (V5 Style) --- */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; display: none; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.modal.in { display: flex; align-items: center; justify-content: center; }
.modal-dialog { width: 90%; max-width: 500px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: none; }
.modal-content { padding: 20px; }

/* --- LIST GROUP & DRAG & DROP --- */
.list-group { border-radius: var(--radius); border: 1px solid var(--border-color); padding: 0; }
.list-group-item { 
    list-style: none; padding: 0.75rem 1.25rem; background: #fff; 
    border-bottom: 1px solid var(--border-color); cursor: grab; display: flex; align-items: center;
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item.dragging { opacity: 0.4; background: var(--bg-light); }





/* --- NAVBAR --- */
/* --- COMPACT MULTI-LEVEL NAVBAR --- */
/* --- MULTI-LEVEL NAVBAR FIX --- */
/* --- FINALE MULTI-LEVEL NAVBAR --- */
/* --- FINALE MULTI-LEVEL NAVBAR STYLES --- */
/* --- NAVBAR BASIS --- */

/* --- SCROLLABLE NAVBAR WRAPPER --- */
/* --- FIXED MULTI-LEVEL SCROLL NAVBAR --- */
/* --- NAVBAR CONTAINER (VERHINDERT ABSCHNEIDEN) --- */
/* Der äußere Rahmen */
.nav-scroll-container {
    position: relative;
    width: 100%;
    
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
	/* NEU: Verhindert, dass Framework-Styles das Menü nach unten drücken */
    margin-top: 0 !important;
    padding-top: 0 !important;
	
	
		
   
}

/* HORIZONTALES SCROLLEN */
/* Der Bereich, der scrollt */
.nav-scroll-content {
    display: flex;
	align-items: stretch !important; /* NEU: Zwingt die Navbar-Inhalte auf volle Höhe */
    overflow-x: auto;
    overflow-y: visible !important; /* DAS HIER IST DER FIX FÜR DIE SUBMENÜS */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
	width:100%;
	/* FIX: Erzeugt Platz für die Dropdowns, ohne den Rest der Seite zu verschieben */
     padding-bottom: 700px;  
		margin-bottom: -700px; 
	
	/* --- NEU: Kompletter Fix gegen die Scrollleiste unten --- */
    scrollbar-width: none;          /* Versteckt Scrollleiste in Firefox */
    -ms-overflow-style: none;       /* Versteckt Scrollleiste in IE und älterem Edge */
	

	
}
.nav-scroll-content::-webkit-scrollbar { 
display: none !important; 
    width: 0 !important;
    height: 0 !important; }

/* NAVBAR NAVIGATION */
.navbar-nav {
    display: flex;
   flex-direction: row !important;   /* WICHTIG: Rettet die horizontale Ausrichtung */
   align-items: stretch !important; /* NEU: Streckt die li-Elemente */
    white-space: nowrap;
	
	
	
	
}

/* Entfernt die Bullets global für die Navbar */
.navbar-nav, 
.navbar-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}



.navbar-nav > li {
    position: relative; /* Basis für Dropdown Ebene 1 */
	display: flex !important;          /* NEU */
	flex-direction: column !important; /* WICHTIG: Dropdropdown-Menüs bleiben so unter dem Link */
    align-items: stretch !important;   /* NEU: Zwingt den Link ganz nach oben */
}

/* LINKS MIT ICONS ÜBER DEM TEXT */
/* LINKS MIT ICONS ÜBER DEM TEXT */
/* LINKS MIT ICONS ÜBER DEM TEXT - REPARIERT FÜR EINE LINIE */
.navbar-nav a {
    display: flex !important;
    flex-direction: row !important;      /* Alles nebeneinander */
    align-items: center !important;      /* Zentriert alles auf der vertikalen Mitte */
    justify-content: flex-start !important; /* Alles linksbündig starten */
    padding: 10px 15px !important;  
    gap: 8px !important;                 /* Einheitlicher Abstand zwischen Icon und Text */
    color: var(--nav-text, #333);
    text-decoration: none;
    height: 100% !important;        
    min-height: 45px;
    transition: background 0.2s;
    white-space: nowrap;                 /* Verhindert Textumbruch */
}

/* Erzwingt, dass die Spans aller Menüpunkte exakt dieselbe Höhe haben */
/* Sicherstellen, dass Text-Container nicht aus der Reihe tanzen */
.navbar-nav a span {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Icons und Pfeile strikt auf die gleiche Größe zwingen */
.navbar-nav a i, 
.navbar-nav a .icon,
.navbar-nav a ion-icon,
.navbar-nav a .caret {                   /* Füge hier auch den Pfeil hinzu */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;              /* Feste Breite für das Icon/Pfeil */
    height: 20px !important;
    margin: 0 !important;                /* Außenabstände entfernen */
    flex-shrink: 0;                      /* Icon darf nicht schrumpfen */
}

/* DROPDOWN MENÜS (EBENE 1) */
/* Die Dropdowns selbst */
.navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999 !important; /* Muss über allem liegen */
    background: white;
    border: 1px solid #ccc;
    box-shadow: var(--shadow);
	text-align: left !important;
}






/* Styling der Links im Dropdown für bessere Lesbarkeit */
.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    clear: both;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background-color: var(--nav-hover);
    color: var(--primary);
	display: block; /* Stellt sicher, dass das A-Tag den ganzen Platz füllt, ohne zu überlaufen */
    width: 100%;    /* Sollte sich an das Padding des Parents anpassen */
	
}

/* Die Trennlinie (Divider) */
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: var(--border-color, #dee2e6);
}


/* 1. Keine Standard-Borders unter den Links */
.navbar-nav .dropdown-menu li a, 
.dropdown-menu li a {
    border-bottom: none !important; 
}



/* Die Überschrift (Header) */
.dropdown-menu .dropdown-header {
    display: block;
    padding: 8px 15px; /* Gleiches Padding wie die Items für die Ausrichtung */
    font-size: 11px;    /* Kleiner als der Standard-Text */
    line-height: 1.42857143;
    color: #777;       /* Hellgrau */
    white-space: nowrap;
    text-transform: uppercase; /* Optional: Wirkt oft professioneller für Header */
    letter-spacing: 0.5px;
    font-weight: bold;
}



/* UNTERMENÜS (EBENE 2 & 3) */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* Positioniert das Submenü rechts vom Hauptpunkt */
    margin-top: -1px;
    min-width: 200px; /* Breite nach Bedarf anpassen */
}

/* ANZEIGE BEI KLICK */
.dropdown.open > .dropdown-menu,
.dropdown-submenu.open > .dropdown-menu {
    display: block !important;
}

/* SCROLL BUTTONS */
/* Die Pfeil-Buttons */
.nav-scroll-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    background: white; /* Kein transparent, damit man den Text darunter nicht sieht */
    border: none;
    z-index: 1010;
    cursor: pointer;
    display: none; /* Wird per JS auf 'flex' gesetzt */
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    font-weight: bold;
}

.nav-scroll-btn.left { left: 0; border-right: 1px solid #eee; }
.nav-scroll-btn.right { right: 0; border-left: 1px solid #eee; }





/* --- Linksbündige Ausrichtung für Dropdowns (FIXED) --- */

/* 1. Den Container selbst linksbündig ausrichten */
.navbar-nav .dropdown-menu {
    text-align: left !important;
    min-width: 220px; /* Ein bisschen breiter für bessere Lesbarkeit */
}

/* 2. Die Links im Dropdown: Überschreibt das "Column-Zentriert" Design der Hauptleiste */
.navbar-nav .dropdown-menu li a {
    display: flex !important;
    flex-direction: row !important;    /* NEU: Erzwingt Nebeneinander statt Übereinander */
    align-items: center !important;    /* Vertikal mittig */
    justify-content: flex-start !important; /* Horizontal linksbündig */
    text-align: left !important;
    padding: 10px 15px !important;
    width: 100% !important;
    min-height: auto !important;       /* Entfernt die 65px Höhe aus der Hauptleiste */
}

/* 3. Icons in Dropdowns: Abstand korrigieren */
.navbar-nav .dropdown-menu a i, 
.navbar-nav .dropdown-menu a .icon,
.navbar-nav .dropdown-menu a ion-icon {
    display: inline-block !important;
    margin-bottom: 0 !important;       /* Entfernt den unteren Abstand */
    margin-right: 10px !important;      /* Erzeugt Abstand nach rechts zum Text */
    font-size: 18px !important;
    flex-shrink: 0;
    width: 20px;                       /* Einheitliche Breite für die Icon-Spalte */
    text-align: center;
}

/* 4. Text-Span im Dropdown */
.navbar-nav .dropdown-menu a span {
    margin: 0 !important;
    display: inline-block !important;
    white-space: nowrap;
}

/* 5. Pfeil für Submenüs (Ebene 2) richtig positionieren */
.dropdown-submenu > .dropdown-toggle::after {
    content: '▶';
    font-size: 10px;
    margin-left: auto; /* Schiebt den Pfeil ganz nach rechts */
    padding-left: 10px;
    opacity: 0.5;
}






/* Pfeil nach unten für das Hauptmenü */
/* --- PFEILE FÜR HAUPTMENÜ (EBENE 1) --- */

/* --- PFEILE FÜR HAUPTMENÜ (EBENE 1) --- */

/* 1. Gleiches Padding wie normale Links, damit Flexbox alles exakt gleich zentriert */
.navbar-nav > li.dropdown > .dropdown-toggle,
.navbar-nav > li.dropdown > [data-toggle="dropdown"] {
   display: flex !important;
    align-items: center !important; /* Vertically centers icon/text/arrow */
    justify-content: center !important;
    padding-right: 10px !important; /* Add space for the arrow */
    position: relative;
    cursor: pointer;
}

/* 2. VERHINDERT DEN FEHLER: Überschreibt das störende inline-block zurück auf inline-flex */
.navbar-nav > li.dropdown > .dropdown-toggle span {
    display: inline-flex !important; 
    position: static;
}

/* 3. Den Pfeil schwebend im rechten Padding-Bereich platzieren */
.navbar-nav > li.dropdown > .dropdown-toggle::after,
.navbar-nav > li.dropdown > [data-toggle="dropdown"]::after {
    content: '▼';
    font-size: 8px; /* Slightly smaller looks better */
    opacity: 0.5;
    position: absolute; /* Kept absolute but centered via transform */
    right: 10px;        /* Distance from right edge */
	padding-top:20px;
    top: 50%;           /* Align with vertical center */
    transform: translateY(-50%); /* The 'magic' to perfectly center it */
    transition: transform 0.2s;
    pointer-events: none;
}

/* Drehung bei geöffnetem Zustand beibehalten */
.navbar-nav > li.dropdown.open > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* --- PFEILE FÜR UNTERMENÜS (EBENE 2+) --- */

/* Hier soll der Pfeil ganz rechts im Balken stehen */
.dropdown-submenu > .dropdown-toggle,
.dropdown-submenu > [data-toggle="dropdown"] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Verteilt Text links und Pfeil rechts */
    align-items: center;
}

.dropdown-submenu > .dropdown-toggle::after,
.dropdown-submenu > [data-toggle="dropdown"]::after {
    content: '▶';
    font-size: 10px;
    margin-left: auto; /* Schiebt den Pfeil an den rechten Rand */
    padding-left: 15px;
    opacity: 0.5;
}


/* Erlaubt das Ausklappen nach links */
.dropdown-submenu.open-left > .dropdown-menu {
    left: auto;
    right: 100%;
    margin-right: -1px; /* Korrektur für die Überlappung */
}



/*
 simple Dropdown menü  like Bootstrap
*/
/* Namensraum-Container */
.bt-dropdown {
    position: relative;
    display: inline-block;
}

.bt-dropdown.open-left .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    max-width: 100vw; 
}

.bt-dropdown .dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: background 0.2s;
	text-decoration: none;
}

.bt-dropdown .dropdown-toggle:hover {
    background: var(--nav-hover);
}

.bt-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none; /* JS steuert die Sichtbarkeit */
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    list-style: none;
}

/* WICHTIG: Die Klasse .is-active schaltet das Menü sichtbar */
.bt-dropdown.is-active .dropdown-menu {
    display: block;
}

.bt-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 15px;
    clear: both;
    color: var(--nav-text);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box; /* Verhindert, dass Padding über den Rand geht */
}

.bt-dropdown .dropdown-item:hover {
    background-color: var(--nav-hover);
    color: var(--primary);
}

/* --- Fix für überlappende Hover-Farben im Dropdown --- */

.bt-dropdown .dropdown-menu,
#bt_top_right_menu_user .dropdown-menu {
    padding: 0 !important; /* Entfernt den Standard-Abstand der Liste */
    overflow: hidden; /* Das ist der wichtigste Befehl: Schneidet alles ab, was über den Rand geht */
}

.bt-dropdown .dropdown-menu li,
#bt_top_right_menu_user .dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-dropdown .dropdown-menu li a,
#bt_top_right_menu_user .dropdown-menu li a {
    display: block; /* Sorgt dafür, dass der Link die volle Breite einnimmt */
    width: 100%; 
    box-sizing: border-box; /* Zwingt das Element, Rahmen und Padding in die 100% einzurechnen */
    /* padding: 8px 16px; (Falls du die Innenabstände noch anpassen willst, mach es hier auf dem <a> Tag) */
}



/* Eigener Namensraum zur Vermeidung von Kollisionen 
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown.open-left .dropdown-menu {
    left: auto !important;
    right: 0 !important;

    max-width: 100vw; 
}

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: background 0.2s;
}

.dropdown-toggle:hover {
    background: var(--nav-hover);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none; 
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    list-style: none;
	
}


.dropdown.is-active .custom-dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 15px;
    clear: both;
    color: var(--nav-text);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: var(--nav-hover);
    color: var(--primary);
}
*/
/*
  Ende simple dropdown menu 
*/





/* FIX DA komponenten nach der navbar ncht mehr klickbar waren wegen margin-bottom:500px 
1. Die unsichtbare Glasscheibe für Klicks durchlässig machen */
.nav-scroll-container,
.nav-scroll-content {
    pointer-events: none;
}

/* 2. Die echten Links und Knöpfe INNERHALB der Navbar MÜSSEN klickbar bleiben */
.navbar-nav a,
.navbar-nav button,
.dropdown-menu,
.menu-toggle,
.nav-scroll-btn {
    pointer-events: auto !important;
}






/* ==========================================================================
   VERTICAL TABS (Kompatibel mit dbtek/bootstrap-vertical-tabs)
   ========================================================================== */

/* --- 1. BASIS NAV-TABS (Wird als Grundgerüst benötigt) --- */
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav > li {
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--nav-text);
}
.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: var(--nav-hover);
}

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}
.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
}
.nav-tabs > li > a:hover {
    border-color: var(--nav-hover) var(--nav-hover) var(--border-color);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-bottom-color: transparent;
}

/* Tab Content Steuerung */
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

/* --- 2. VERTICAL TABS ERWEITERUNG (dbtek Logik) --- */
.tabs-left, .tabs-right {
    border-bottom: none;
    padding-top: 2px;
}
.tabs-left {
    border-right: 1px solid var(--border-color);
}
.tabs-right {
    border-left: 1px solid var(--border-color);
}
.tabs-left > li, .tabs-right > li {
    float: none;
    margin-bottom: 2px;
}
.tabs-left > li {
    margin-right: -1px;
}
.tabs-right > li {
    margin-left: -1px;
}
.tabs-left > li.active > a,
.tabs-left > li.active > a:hover,
.tabs-left > li.active > a:focus {
    border-bottom-color: var(--border-color);
    border-right-color: transparent;
}
.tabs-right > li.active > a,
.tabs-right > li.active > a:hover,
.tabs-right > li.active > a:focus {
    border-bottom-color: var(--border-color);
    border-left-color: transparent;
}
.tabs-left > li > a {
    border-radius: var(--radius) 0 0 var(--radius);
    margin-right: 0;
    display: block;
}
.tabs-right > li > a {
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-right: 0;
    display: block;
}

/* --- 3. SIDEWAYS TABS (Optionales Feature aus dem dbtek Repo) --- */
.tabs-left.sideways > li, .tabs-right.sideways > li {
    float: left;
}
.tabs-left.sideways > li {
    transform: rotate(-90deg);
    transform-origin: left top;
}
.tabs-right.sideways > li {
    transform: rotate(90deg);
    transform-origin: right top;
}

/* ENDE vertical tabs*/



/* Zeigt das Dropdown-Menü an, wenn das Elternelement die Klasse .open hat */
/* Definiert den Ankerpunkt für das absolut positionierte Menü */
.btn-group {
    position: relative !important;
    display: inline-block; /* Sorgt dafür, dass sich die Box exakt an die Button-Größe anschmiegt */
}

/* Richtet das Menü korrekt unterhalb des Buttons aus */
.btn-group .dropdown-menu {
    position: absolute !important;
    top: 100% !important; /* Setzt das Menü exakt unter die Unterkante des Buttons */
    left: 0 !important;   /* Richtet es linksbündig am Button aus */
    display: none;        /* Standardmäßig ausblenden */
    z-index: 1050 !important; /* Sorgt dafür, dass es über den Tabellenzeilen schwebt */
}

/* Schaltet die Sichtbarkeit ein, wenn geöffnet */
.btn-group.open .dropdown-menu {
    display: block !important;
}




/* desktio ansicht, menüpunkte komplett im durnkeln balnen anzeigen*/
/* Erzwinge, dass die Links die volle Höhe des Menü-Containers ausfüllen */
@media (min-width: 768px) {
    .navbar-nav > li > a {
        display: flex !important;
        align-items: center !important; /* Zentriert Icon/Text im Link selbst */
        justify-content: center !important;
        height: 70px !important;       /* Passt sich deiner li-Höhe an */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* Entferne Zentrierung auf dem li-Element selbst */
    .bt_navbar_sidebar > li, 
    .navbar-nav > li {
        vertical-align: top !important; /* Ändert das Verhalten von table-cell */
    }
}


/* Erst ab hier wird es mobil  für auflösungen kleine 768px wird baumstruktur vertikal des menüs angezeigt */
/* --- MOBILE NAVIGATION (BAUMSTRUKTUR) --- */
/* ==========================================================================
   MOBILE NAVIGATION (BAUMSTRUKTUR) - Greift NUR bis 768px
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Das horizontale Scrollen komplett abschalten */
    .nav-scroll-content {
        display: none !important; 
        flex-direction: column !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important; 
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    /* Wenn der Button geklickt wurde */
    .nav-scroll-content.mobile-open {
        display: block !important;
    }

    /* 2. Die Liste untereinander stapeln */
    .navbar-nav {
        display: block !important; 
        width: 100% !important;
    }

    .navbar-nav > li {
        display: block !important;
        width: 100% !important;
        position: relative;
    }

    /* 4. Dropdowns als echte Baumzweige */
    .navbar-nav .dropdown-menu {
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background: #f9f9f9 !important;
        padding-left: 20px !important; 
    }

    /* Unter-Untermenüs noch weiter einrücken */
    .dropdown-submenu > .dropdown-menu {
        padding-left: 20px !important;
    }

    /* 5. Scroll-Pfeile verstecken */
    .nav-scroll-btn {
        display: none !important;
    }

    /* 6. Hamburger Button Styling */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 15px;
        background: none;
        border: none;
        cursor: pointer;
    }
    .hamburger-bar {
        width: 25px;
        height: 3px;
        background: #333;
    }
	
    .navbar-nav .dropdown-menu .dropdown-header {
        padding-left: 15px !important;
        background-color: transparent !important; 
    }
} /* <-- SCHLIESST MAX-WIDTH: 768px SAUBER AB */

/* Desktop-Sicht: Hamburger verstecken */
/* ==========================================================================
   DESKTOP-ERZWINGUNG (NUR AB 769px BREITE)
   ========================================================================== */
@media (min-width: 769px) {
	
	/* 1. HAMBURGER-BUTTON AUF DESKTOP ABSOLUT VERSTECKEN */
    .menu-toggle,
    [class*="menu-toggle"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
	
	
    /* Erzwingt das horizontale Nebeneinander auf großen Bildschirmen */
    .nav-scroll-content {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;  /* Horizontal ausrichten */
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .navbar-nav > li {
        display: flex !important;
        flex-direction: row !important;  /* Links nebeneinander */
        align-items: center !important;
        position: relative !important;
    }
}

/* --- SCROLLABLE NAVBAR WRAPPER --- */
.nav-scroll-container {
    position: relative;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* HORIZONTALES SCROLLEN */
.nav-scroll-content {
    display: flex;
    align-items: stretch !important;
    overflow-x: auto;
    overflow-y: visible !important; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 700px;  
    margin-bottom: -700px; 
    scrollbar-width: none;          
    -ms-overflow-style: none;       
}
.nav-scroll-content::-webkit-scrollbar { 
    display: none !important; 
    width: 0 !important;
    height: 0 !important; 
}

/* Entfernt die Bullets global für die Navbar */
.navbar-nav, 
.navbar-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* LINKS MIT ICONS ÜBER DEM TEXT */
.navbar-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; 
    padding: 10px 20px !important;  
    gap: 0 !important; 
    color: var(--nav-text, #333);
    text-decoration: none;
    height: 100% !important;        
    min-height: 45px;
    transition: background 0.2s;
    flex-grow: 1; 
}

/* Erzwingt, dass die Spans aller Menüpunkte exakt dieselbe Höhe haben */
.navbar-nav a span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 16px; 
    line-height: 1;
}

.navbar-nav a i, 
.navbar-nav a .icon,
.navbar-nav a ion-icon {
    font-size: 20px;
    margin-bottom: 4px; 
    display: block;
}

/* DROPDOWN MENÜS (EBENE 1) */
.navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999 !important; 
    background: white;
    border: 1px solid #ccc;
    box-shadow: var(--shadow);
    text-align: left !important;
}

/* Styling der Links im Dropdown */
.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    clear: both;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background-color: var(--nav-hover);
    color: var(--primary);
	background-color: var(--nav-hover) !important; /* HIER die Hellblaue Farbe */
	display: block; /* Stellt sicher, dass das A-Tag den ganzen Platz füllt, ohne zu überlaufen */
    width: 100%;    /* Sollte sich an das Padding des Parents anpassen */
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: var(--border-color, #dee2e6);
}

.navbar-nav .dropdown-menu li a, 
.dropdown-menu li a {
    border-bottom: none !important; 
}

.dropdown-menu .dropdown-header {
    display: block;
    padding: 8px 15px; 
    font-size: 11px;    
    line-height: 1.42857143;
    color: #777;       
    white-space: nowrap;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    font-weight: bold;
}

/* UNTERMENÜS (EBENE 2 & 3) */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; 
    margin-top: -1px;
    min-width: 200px; 
}

/* ANZEIGE BEI KLICK */
.dropdown.open > .dropdown-menu,
.dropdown-submenu.open > .dropdown-menu {
    display: block !important;
}

/* SCROLL BUTTONS */
.nav-scroll-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    background: white; 
    border: none;
    z-index: 1010;
    cursor: pointer;
    display: none; 
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    font-weight: bold;
}

.nav-scroll-btn.left { left: 0; border-right: 1px solid #eee; }
.nav-scroll-btn.right { right: 0; border-left: 1px solid #eee; }

/* Linksbündige Ausrichtung für Dropdowns */
.navbar-nav .dropdown-menu {
    text-align: left !important;
    min-width: 220px; 
}

.navbar-nav .dropdown-menu li a {
    display: flex !important;
    flex-direction: row !important;    
    align-items: center !important;    
    justify-content: flex-start !important; 
    text-align: left !important;
    padding: 10px 15px !important;
    width: 100% !important;
    min-height: auto !important;       
}

.navbar-nav .dropdown-menu a i, 
.navbar-nav .dropdown-menu a .icon,
.navbar-nav .dropdown-menu a ion-icon {
    display: inline-block !important;
    margin-bottom: 0 !important;       
    margin-right: 10px !important;      
    font-size: 18px !important;
    flex-shrink: 0;
    width: 20px;                       
    text-align: center;
}

.navbar-nav .dropdown-menu a span {
    margin: 0 !important;
    display: inline-block !important;
    white-space: nowrap;
}

/* ==========================================================================
   SIMPLE DROPDOWN MENÜ (Eigener Namensraum zur Konfliktvermeidung)
   ========================================================================== */
.custom-dropdown-container {
    position: relative;
    display: inline-block;
}

.custom-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: background 0.2s;
}

.custom-dropdown-toggle:hover {
    background: var(--nav-hover);
}

/* Umbenannt, damit es NIEMALS die Navbar zerstört */
.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none; 
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    list-style: none;
}

.custom-dropdown-container.is-active .custom-dropdown-menu {
    display: block !important;
}

.custom-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 15px;
    clear: both;
    color: var(--nav-text);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.custom-dropdown-item:hover {
    background-color: var(--nav-hover);
    color: var(--primary);
}

/* ENDE MOBILE ANSUCT MIT BAUMSTURKTUR  */



/* ==========================================================================
   JUMBOTRON (Bootstrap v3 Logik)
   ========================================================================== */
.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: var(--bg-light, #f8f9fa); 
}

.jumbotron h1,
.jumbotron .h1 {
    color: inherit;
    margin-top: 0;
}

.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
}

.jumbotron > hr {
    border-top-color: #d5d5d5;
}

/* Container-Handling innerhalb oder außerhalb des Jumbotrons */
.container .jumbotron,
.container-fluid .jumbotron {
    border-radius: var(--radius, 6px); 
    padding-left: 15px;
    padding-right: 15px;
}

.jumbotron .container {
    max-width: 100%;
}

/* Desktop-Optimierung ab SM-Breakpoint (768px) */
@media screen and (min-width: 768px) {
    .jumbotron {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    
    .container .jumbotron,
    .container-fluid .jumbotron {
        padding-left: 60px;
        padding-right: 60px;
    }

    .jumbotron h1,
    .jumbotron .h1 {
        font-size: 63px;
    }
} /* <-- SCHLIESST MIN-WIDTH: 768px SAUBER AB (KEINE WEITERE KLAMMER) */









/* 1. Die gesamte Kette auf volle Höhe erzwingen */
#bt_main_menu

 
 {
	 width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important; /* Wichtig: Füllt die Box von oben bis unten */
    margin: 0 !important;
    padding: 0 !important;

}


/* 1. Abstand für die Icons und den Text nach oben */
.bt_navbar_sidebar > li > a {
    display: flex !important;
    flex-direction: column !important; /* Stapelt Icon über Text */
    align-items: center !important;    /* Zentriert horizontal */
    justify-content: flex-start !important; /* Startet weiter oben */
    
    /* HIER den Abstand nach oben einstellen */
    padding-top: 15px !important; 
    padding-bottom: 0 !important;
    
    height: 100% !important;
    width: 100% !important;
}

/* 1. Pfeil-Positionierung fixen */
.navbar-nav > li.dropdown > .dropdown-toggle::after {
    content: '▼';
    font-size: 8px;
    opacity: 0.5;
    position: absolute;
    
    /* WICHTIG: Wir zentrieren den Pfeil nicht mehr zum 70px-Container, 
       sondern setzen ihn relativ zum unteren Bereich (dort wo der Text steht) */
    top: auto !important; /* Entfernt die Zentrierung des Containers */
    bottom: 12px !important; /* Hier kannst du den Abstand von unten feinjustieren */
    right: 10px !important;
    transform: none !important; /* Entfernt das vertikale Zentrieren */
}

/* 2. Damit das nicht mit dem Icon-Stapeln kollidiert: */
.navbar-nav > li > a {
    position: relative !important; /* Sorgt dafür, dass der Pfeil sich am Link orientiert */
}


/* 1. Stelle sicher, dass der Container des Pull-Downs gestapelt werden kann */
.navbar-custom {
    position: relative !important;
    z-index: 10000 !important; /* Sehr hoch setzen, damit es oben ist */
}

/* 2. Das Dropdown-Menü selbst nach vorne bringen */
#bt_top_right_menu_user .dropdown-menu {
    position: absolute !important;
    z-index: 10001 !important; /* Höher als der Container */
    display: none;             /* Standard versteckt */
}

/* 3. Wenn offen, anzeigen */
#bt_top_right_menu_user.open .dropdown-menu {
    display: block !important;
}

/* 4. Das Hauptmenü, das bisher im Weg war, etwas 'zurückstufen' */
#bt_main_menu {
    position: relative;
    z-index: 100 !important; /* Deutlich niedriger als 10000 */
}

/* Spezifische Korrektur für das Benutzer-Dropdown */
#g-account-menu li a {
    /* Padding verringern, um die Höhe der Zeilen zu reduzieren */
    padding: 6px 15px !important; 
    
    /* Sicherstellen, dass keine unnötige Mindesthöhe erzwungen wird */
    min-height: auto !important;
    
    /* Flex-Eigenschaften für eine kompakte Zeile */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Icons im Benutzer-Dropdown etwas kleiner und besser platziert */
#g-account-menu li a i {
    font-size: 14px !important; /* Etwas kleiner als die 18px-Regel oben */
    width: 25px !important;     /* Feste Breite, damit die Texte bündig sind */
    margin-bottom: 0 !important;
    margin-right: 8px !important;
}

#bt_top_right_menu_user {line-height:60px;}

/* Statt: .navbar-header { line-height: 60px; } */

/* Besser: */
#bt_top_right_menu_user > ul > li,
.navbar-header > .navbar-nav > li > a {
    line-height: 20px;
}

/* Vertikale Zentrierung im Navbar-Header 
.navbar-header {
    display: flex !important;
    align-items: center !important;       
    justify-content: flex-start !important; 
    height: 100% !important;               
}*/

/* Verhindert, dass das Bild oder der Link ungewollte Abstände hat */
.navbar-header .bt_logo {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px 15px !important;            /* Optional: Ein schöner Seitenabstand */
}

.navbar-header .bt_logo img {
    display: block !important;
    max-height: 100% !important;           /* Verhindert, dass ein zu großes Logo die Navbar sprengt */
    width: auto !important;
}



/* Spezifische Regel für die Hover-Farbe im Benutzer-Dropdown */
#bt_top_right_menu_user .dropdown-menu li a:hover {
    background-color: var(--custom-dropdown-hover) !important;
    color: #ffffff !important; /* Optional: Weiße Schrift bei Hover sieht meist besser aus */
}

/* Menü nach links statt nach rechts ausrichten */
#bt_top_right_menu_user .dropdown-menu {
    left: auto !important;  /* Hebt die Standard-Ausrichtung nach links auf */
    right: 0 !important;    /* Richtet das Menü an der rechten Kante des Elternelements aus */
    
    /* Optional: Falls es zu nah am Rand klebt, fügen Sie einen kleinen Abstand hinzu */
    margin-right: 0px !important;
}



/* ==========================================================================
   BADGES (Ergänzung für runde Text-Flächen)
   ========================================================================== */
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777; /* Standard-Grau, wenn keine Farbe definiert ist */
    border-radius: 10px;    /* Sorgt für die typisch runde Form */
}

/* Automatisch ausblenden, wenn das Badge leer ist (Bootstrap-Logik) */
.badge:empty {
    display: none;
}

/* Kontext-Farben (nutzen deine bestehenden Variablen) */
.badge-primary { background-color: var(--primary); }
.badge-success { background-color: #5cb85c; }
.badge-info    { background-color: #5bc0de; }
.badge-warning { background-color: #f0ad4e; }
.badge-danger  { background-color: #d9534f; }

/* Optionale "Pillen"-Form (stärker abgerundet für längere Texte) */
.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
}


/* ==========================================================================
   RADIKAL-FIX: PFEILE FÜR ALLE MENÜS (Ersetzt alle alten Fehler)
   ========================================================================== */

/* 1. Zwingend verhindern, dass doppelte Text-Pfeile (▼) im Hauptmenü auftauchen */
.navbar-nav > li.dropdown > .dropdown-toggle::after,
.navbar-nav > li.dropdown > [data-toggle="dropdown"]::after {
    display: none !important;
    content: none !important;
}

/* 2. Die 20x20px Box im Hauptmenü reparieren (Kein weißer Rahmen, kein Hochspringen!) */
.navbar-nav a .caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;            
    background: transparent !important; 
    transform: none !important;         
}

/* 3. Wir zeichnen das makellose Dreieck geschützt im Inneren der Box */
.navbar-nav a .caret::before {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 4px solid currentColor !important; 
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    border-bottom: 0 !important;
    transition: transform 0.2s ease !important; /* Bereitet Animation vor */
}

/* 4. Wenn geklickt wird (.open auf dem Elternelement), dreht sich das Dreieck */
/* 4. Wenn geklickt wird (.open auf dem Elternelement), dreht sich das Dreieck */
.navbar-nav li.open a .caret::before,
.navbar-nav li.show a .caret::before,
.navbar-nav li.active a .caret::before,
.navbar-nav li.dropdown.open a .caret::before {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   BENUTZERMENÜ OBEN RECHTS (Bleibt stabil & unabhängig)
   ========================================================================== */
#bt_top_right_menu_user .caret {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    border-top: 4px solid currentColor !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    border-bottom: 0 !important;
    transition: transform 0.2s ease !important;
}

#bt_top_right_menu_user.open .caret {
    transform: rotate(180deg) !important;
}


/* Korrigierter Disabled Status für Buttons, Inputs und Klassen */
button[disabled], 
input[disabled], 
.btn[disabled], 
.btn.disabled, 
.disabled {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important; /* Verhindert jegliche Klicks und Hover-Effekte */
}





/* Sichtbarkeit der Submenüs im mobilen/vertikalen Menü verbessern */
@media (max-width: 991px) {
    /* Hintergrund des Submenü-Containers anpassen */
    .navbar-nav .dropdown-menu {
        background-color: #ffffff !important; /* Weißer Hintergrund */
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    /* Textfarbe der Submenü-Links erzwingen */
    .navbar-nav .dropdown-menu > li > a {
        color: #333333 !important; /* Dunkle Schrift für Kontrast */
        padding: 10px 20px;
    }

    /* Hover-Effekt für bessere Benutzerführung */
    .navbar-nav .dropdown-menu > li > a:hover {
        background-color: var(--nav-hover) !important;
        color: var(--primary) !important;
    }
}