/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Swiper-Styling Data App */
.fixed-size-data-swiper {
    width: 600px;
    height: 400px; 
    object-fit: fill; /* Bild zuschneiden, um den Container zu füllen */
}
.fixed-size-data-swiper-cards {
    
    height: 200px; /* Feste Höhe für kleine Medien */
    
}
.fixed-size-data-swiper-klein {
    width: 100%;
    height: 200px; /* Feste Höhe für kleine Medien */
    object-fit: fill; /* Bild zuschneiden, um den Container zu füllen */
}
.fixed-size-data-swiper-klein-cards {
    height: 80px; /* Feste Höhe für kleine Medien */
}
.fixed-size-data-normal-swiper {
    height: 200px; 
}
.fixed-size-data-normal-swiper-cards {
    height: 80px; 
}

/* Das CSS für das "Telefonbuch-Layout" */
.glossary-container {
    /* Erstellt Spalten wie in der Zeitung */
    column-count: 1; 
    column-gap: 2rem;
}

.glossary-list li {
    /* Verhindert, dass ein Eintrag zwischen zwei Spalten zerrissen wird */
    break-inside: avoid; 
    page-break-inside: avoid;
}

.glossary-list a:hover span {
    text-decoration: underline;
    color: var(--bs-primary-dark);
}

.sticky-glossary {
    position: sticky;
    top: 90px;
    z-index: 1020;
}

.my-card-body {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
	padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    color: var(--bs-body-color);
}

/* Spezifisches Styling für Wiki/Datenbank Popovers */
.my-popover {
    color: var(--bs-dark);
    border: 2px solid var(--bs-gray-300);
    border-radius: .25rem;
    background: var(--bs-light);
}

/* Falls du tiefere Änderungen brauchst, die Variablen nicht abdecken: */
.my-popover .popover-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    background: var(--bs-card-bg);
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-gray-300);
}

.my-popover .popover-body {
    font-size: 0.85rem;
    padding: 10px;
    background: var(--bs-light);
    color: var(--bs-dark);
    border-radius: .25rem;
}


.quillshow img {
    max-width: 100%;
    height: auto;
    }

.alert-normal {
	--bs-alert-color: var(--bs-primary-text-emphasis);
	--bs-alert-bg: var(--bs-card-bg);
	--bs-alert-border-color: var(--bs-card-border-color);
	--bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alertify .ajs-header {
	color: var(--bs-primary-text-emphasis);
	font-weight: 700;
	background: #fafafa;
	border-bottom: #eee 1px solid;
	border-radius: 2px 2px 0 0;
}

.nav-link-with-badge {
    position: relative;
}

.nav-link-with-badge .badge {
    position: absolute;
    top: -5px;      /* Etwas nach oben */
    right: 15px;   /* Etwas nach rechts außen */
}
.feed-img {
    max-height: 170px;
    max-width: 220px;
}

.feed-item img {
    max-height: 170px;
    max-width: 220px;
}

.datacardimage {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.ql-syntax {
        background-color: #23241f;
        color: #f8f8f2;
        overflow: visible;
        white-space: pre-wrap;
        margin-bottom: 5px;
        margin-top: 5px;
        padding: 5px 10px;
        border-radius: 3px;
    	display: block;
		font-size: 87.5%;
		direction: ltr;
	    unicode-bidi: bidi-override;
    }
    
    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .overlay-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bs-card-bg);
        opacity: 0.7; /* Stelle die Transparenz hier ein */
    }

    .spinner {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .labelx, a.labelx {
        background-color: var(--bs-primary);
        color: #fff;
        border-radius: 2px;
        display: inline-block;
        line-height: 1.28;
        padding: 2px 6px;
        position: relative;
        vertical-align: middle;
        white-space: nowrap;
        word-wrap: normal;
        font-weight: 400;
    }
    .labelx-secondary, a.labelx-secondary {
        background-color: var(--bs-secondary);
        color: #fff;
    }
    .labelx-primary, a.labelx-primary {
        background-color: var(--bs-primary);
        color: #fff;
    }
    .labelx-success, a.labelx-success {
        background-color: var(--bs-success);
        color: #000000ff;
    }
    .labelx-danger, a.labelx-danger {
        background-color: #99101dff;
        color: #fff;
    }
    .labelx-warning, a.labelx-warning {
        background-color: var(--bs-warning);
        color: #000000ff;
    }
    .labelx-info, a.labelx-info {
        background-color: var(--bs-info);
        color: #000000ff;
    }
    .labelx-light, a.labelx-light {
        background-color: var(--bs-light);
        color: var(--bs-primary);
    }
    .labelx-dark, a.labelx-dark {
        background-color: var(--bs-dark);
        color: var(--bs-primary);
    }
    .labelx-purple, a.labelx-purple {
        background-color: var(--bs-purple);
        color: #fff;
    }
    .labelx-blue, a.labelx-blue {
        background-color: #064b8bff;
        color: #fff;
    }
    .labelx-lila, a.labelx-lila {
        background-color: #570370ff;
        color: #fff;
    }
    .labelx-darkgreen, a.labelx-darkgreen {
        background-color: #035e2cff;
        color: #fff;
    }
    .labelx-neutral, a.labelx-neutral {
        background-color: var(--bs-card-bg);
        color: var(--bs-gray-500);
    }
    .labelx-dunkelgelb, a.labelx-dunkelgelb {
        background-color: #b58900ff;
        color: #000000;
    }
    .labelx-dunkel, a.labelx-dunkel {
        background-color: rgb(4, 0, 20);
        color: #c5c3c3;
    }
    .labelx-dunkelblau, a.labelx-dunkelblau {
        background-color:  var(--bs-boxed-body-bg);
        color: #fff;
    }

    .karte-verschieben-modus {
        position: fixed;
        bottom: 5%;
        right: 39px;
        z-index: 1031;
    }

    .karte-verschieben-modus .btn {
        box-shadow: 0 1px 20px 1px rgb(245, 185, 4) !important;
    }

    .karte-verschieben-modus-user {
        position: fixed;
        bottom: 5%;
        right: 39px;
        z-index: 1031;
    }

    .karte-verschieben-modus-user .btn {
        box-shadow: 0 1px 20px 1px rgb(5, 136, 64) !important;
    }

    /* ======= Custom Select2 Styles ======= */

    /* Den Hintergrund des Hauptfeldes ändern */
    .select2-container--bootstrap-5 .select2-selection--multiple {
        background-color: var(--bs-input-border);
        border: 1px solid var(--bs-input-border);
    }

    /* Die ausgewählten "Pillen" kleiner machen und stylen */
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
        font-size: 0.8rem; /* Kleinere Schrift */
        padding: 2px 6px;   /* Weniger Innenabstand */
        margin-top: 4px !important; /* Etwas vertikalen Abstand anpassen */
        background-color: var(--bs-primary);/* Hintergrund der Pille */
        border: 1px solid var(--bs-primary);
    }

    /* Das "x" zum Entfernen anpassen */
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
        font-size: 1rem;
        margin-right: 2px;
    }

    /* Die Schriftgröße in den Suchergebnissen (Dropdown) verkleinern */
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
        border-color: var(--bs-input-border);
        box-shadow: 0 0 0 0.25rem var(--bs-input-border);
    }

    .select2-container--bootstrap-5 .select2-dropdown {
        z-index: 1056;
        overflow: hidden;
        color: var(--bs-gray-700);
        background-color: var(--bs-input-border);
        border-color: var(--bs-input-border);
        border-radius: .25rem;
    }
    .select2-container--bootstrap-5 .select2-selection__placeholder {
        color: var(--bs-gray-600) !important; /* Ändern Sie #888 zu Ihrer Wunschfarbe */
    }

    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .35em .65em;
        margin-right: .375rem;
        margin-bottom: .375rem;
        font-size: 1rem;
        color: var(--bs-gray-700);
        cursor: auto;
        border: 1px solid var(--bs-primary);
        border-radius: .25rem;
    }

    .form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
        width: .5rem;
        height: .5rem;
        padding: .125rem;
        background: #ffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.5rem auto no-repeat;
    }

    /* Farbe des markierten Suchergebnisses ändern */
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
        background-color: var(--bs-input-border);
        color: var(--bs-gray-700);
    }

    .tox-tinymce {
        border: 1px solid var(--bs-input-border);
        border-radius: .25rem;
        box-shadow: none;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        overflow: hidden;
        position: relative;
        visibility: inherit !important;
    }
    .tox-statusbar__branding {
        display: none !important;
    }
    .tox .tox-statusbar {
        background-color: var(--bs-card-bg);
    }
    .tox:not(.tox-tinymce-inline) .tox-editor-header {
        background-color: var(--bs-input-border);
    }
    .tox .tox-menubar {
        background-color: var(--bs-card-bg);
    }
    .tox .tox-mbtn {
        background: var(--bs-input-border);
        color: var(--bs-body-color);
    }
    .tox:not(.tox-tinymce-inline) .tox-editor-header {
        background-color: var(--bs-card-bg);
    }
    .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {
        background-color: var(--bs-card-bg);
    }
    .tox .tox-tbtn svg {
        display: block;
        fill: var(--bs-body-color);
    }
    .tox .tox-tbtn--disabled, .tox .tox-tbtn--disabled:hover, .tox .tox-tbtn:disabled, .tox .tox-tbtn:disabled:hover {
        background: var(--bs-input-border);
    }
    .tox .tox-tbtn {
        background: var(--bs-input-border);
        color: var(--bs-body-color);
    }
    .tox .tox-promotion {
        background-color: var(--bs-card-bg);
        display: none !important;
    }
    .tox:not(.tox-tinymce-inline) .tox-editor-header {
        background-color: var(--bs-card-bg);
    }
    .tox:not(.tox-tinymce-inline) .tox-editor-header {
        border-bottom: 1px solid var(--bs-input-border);
    }
    .tox .tox-toolbar-overlord {
        background-color: var(--bs-input-border);
    }
    .tox .tox-menu {
        background-color: var(--bs-input-border);
        border: 1px solid rgba(255,255,255,.15);
    }
    .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
        background-color: var(--bs-dropdown-link-hover-bg);
        color: var(--bs-dropdown-link-hover-color);
    }
    .tox .tox-collection__item {
        color: var(--bs-body-color);
    }
    .tox .tox-collection--list .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) {
        background-color: var(--bs-primary);
        color: var(--bs-dropdown-link-hover-color);
    }
   .tox.tox-edit-focus .tox-iframe-container {
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .tox .tox-edit-area::before {
        border: 1px solid var(--bs-primary);
        border-radius: 3px;
    }
    .form-select:disabled {
        color: #959396;
        background-color: var(--bs-input-bg);
    }

     /* Grundlegende Karten-Styles */
        /* --- NEU (KORRIGIERT) --- */
    .grid-stack-item-content {
        color: #2c3e50;
        overflow: hidden !important; /* Verhindert das Überlaufen und den äußeren Scrollbalken */
        display: flex;               /* Stellt sicher, dass das Flexbox-Layout angewendet wird */
        flex-direction: column;
    }
    
    .grid-stack-item-content .card-header { padding: 0.5rem 1rem; }
    .grid-stack-item-content .card-body { padding: 1rem; }

    /* Styles für die Seitenleiste (Sidebar) */
    .sidebar-action-item {
        border: 2px dashed #ccc;
        border-radius: 6px;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
        cursor: grab;
        transition: background-color 0.2s, border-color 0.2s;
    }
    .sidebar-action-item .icon {
        font-size: 3rem; /* Größere Icons */
        color: #7f8c8d;
    }
    .sidebar-action-item .text {
        margin-top: 10px;
        color: #34495e;
        font-weight: 500;
    }
    .sidebar-action-item:hover {
        background-color: #f0f3f4;
        border-color: #bdc3c7;
    }

    /* Papierkorb-Styling */
    #trash-can { 
        cursor: default; 
        position: relative;
        z-index: 10;
    }
    #trash-can.gs-accept { /* Klasse wird von Gridstack hinzugefügt, wenn man darüber schwebt */
        background-color: #e74c3c;
        border-color: #c0392b;
    }
    #trash-can.gs-accept .icon,
    #trash-can.gs-accept .text {
        color: white;
    }

    /* Zustand, wenn Bearbeiten AN ist (body hat die Klasse) */
    body.grid-edit-mode-active .js-edit-card-btn {
        display: inline-block; /* Mache die Editier-Buttons sichtbar */
    }

    body.grid-edit-mode-active .grid-editmodus {
        display: inline-block; /* Mache die Editier-Buttons sichtbar */
    }

    body.grid-edit-mode-active .bewegen,
    body.grid-edit-mode-active .notiz-griff {
        cursor: move !important; /* Zeige den "Verschieben"-Cursor an */
        pointer-events: auto; /* NEU: Aktiviere Maus-Interaktionen wieder */
    }
    body.grid-edit-mode-active .grid-stack-item .ui-resizable-handle {
        display: flex !important; /* Mache das Icon zur Größenänderung sichtbar */
    }

    /* Standard-Zustand: Bearbeiten ist AUS */
    .js-edit-card-btn {
        display: none; /* Alle Editier-Buttons sind unsichtbar */
    }
    
    .grid-editmodus {
        display: none; /* Alle Editier-Buttons sind unsichtbar */
    }

    .bewegen,
    .notiz-griff {
        cursor: default !important; /* Der "Verschieben"-Cursor ist aus */
        pointer-events: none; /* NEU: Deaktiviere alle Maus-Interaktionen auf dem Griff */
    }
    /* WICHTIG: Erlaube aber Interaktionen auf den Kind-Elementen des Griffs (Buttons, Links etc.) */
    .bewegen > * {
        pointer-events: auto;
    }
    .grid-stack-item .ui-resizable-handle {
        display: none !important; /* Das Icon zur Größenänderung ist unsichtbar */
    }

    /* Styling für entfernte Elemente */
    .grid-stack-item-removing {
        opacity: 0.5;
        filter: blur(3px);
    }

    .grid-stack-item .ui-resizable-handle {
        position: absolute; width: 20px; height: 20px; bottom: 0; right: 0;
        /* Das alte SVG-Bild wird entfernt, damit es nicht stört */
        background-image: none; 
        cursor: se-resize; 
        z-index: 2;
        /* Wir stellen sicher, dass das Icon-Element richtig positioniert werden kann */
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    /* Das Pseudo-Element, das unser Font Awesome Icon enthält */
    .grid-stack-item .ui-resizable-handle::after {
        /* Wichtig: Hier geben wir an, welches Icon wir wollen */
        content: '\f065'; /* Das ist der Unicode für das "arrows-up-down-left-right" Icon */
        
        /* Wichtig: Font Awesome 6 Free Solid als Schriftart definieren */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900; /* Für "solid" Icons erforderlich */
        
        color: rgba(255, 255, 255, 0.7); /* Die gewünschte Farbe */
        font-size: 14px; /* Passende Größe für die Ecke */
        
        /* Verhindert, dass der Benutzer das Icon-Symbol selbst markieren kann */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .grid-stack-item-content .card-header {
        flex-shrink: 0; /* Verhindert, dass der Header schrumpft */
    }

    .card-footer-spacer {
        height: 20px;         /* Feste Höhe */
        flex-shrink: 0;      /* Verhindert, dass er schrumpft */
    }

    .grid-stack-item {
        /* Diese Regel zwingt den Inhalt, innerhalb des vom Grid
        berechneten Rahmens zu bleiben. Kein Überlaufen mehr. */
        overflow: hidden;
    }

    .grid-stack-item-content .card {
        margin: 0 !important;
    }

    .grid-stack-item-content,
    .grid-stack-item-content .card {
        display: flex;
        flex-direction: column;
        height: 100%; /* Stellt sicher, dass die Karte die volle Höhe der Zelle einnimmt */
    }

    .grid-stack-item-content > .card.h-100 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .grid-stack-item-content .card-body {
        flex-grow: 1; /* Erlaubt dem Body-Bereich, zu wachsen und den Platz zu füllen */
        overflow-y: auto; /* Fügt eine Scrollbar hinzu, wenn der Inhalt zu lang wird */
        overflow-x: hidden;
    }

    /* Diese Klasse wird dem Grid-Container während des Ladens hinzugefügt */
    .grid-loading {
        position: relative; /* Wichtig, damit der Spinner sich daran ausrichten kann */
        min-height: 150px;  /* Verhindert, dass der leere Container zusammenfällt */
        transition: min-height 0.2s;
    }

    /* Der Spinner selbst */
    .grid-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        
        /* Reines CSS-Spinner-Design - keine Bilder oder Icon-Fonts nötig */
        border: 5px solid #f3f3f3; /* Light grey */
        border-top: 5px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    .grid-text {
        color: var(--bs-gray-700);
    }

    /*
    * Universelle Logik für responsive Widget-Inhalte
    */

    /* 1. Definieren Sie den Container */
    /* Jedes Element, das seine Kinder basierend auf seiner eigenen Größe anpassen soll, wird zum Container. */
    .content-container {
        container-type: inline-size;
        container-name: widget-content;
    }

    /* 2. Definieren Sie die Reihen- und Element-Klassen */
    /* Wir verwenden Flexbox für maximale Flexibilität. */
    .responsive-row {
        display: flex;
        flex-wrap: wrap;
        margin: -0.4rem; /* Optional, um den Abstand anzupassen */
    }
    .responsive-item {
        padding: 0.5rem; /* Optional, für den Abstand */
        width: 100%;     /* Standard: 1 Spalte (volle Breite) */
        flex-shrink: 0;
    }


    /* 3. Definieren Sie die Breakpoints mit @container */

    /* Wenn der Container (dessen Name 'widget-content' ist) mindestens 400px breit ist... */
    @container widget-content (min-width: 900px) {
        /* ...dann sollen die Elemente nur noch 50% breit sein (2 Spalten). */
        .responsive-item {
            width: 50%;
        }
    }

    /* Wenn der Container mindestens 650px breit ist... */
    @container widget-content (min-width: 1250px) {
        /* ...dann sollen die Elemente nur noch 33.33% breit sein (3 Spalten). */
        .responsive-item {
            width: 33.33%;
        }
    }

    @container widget-content (min-width: 1550px) {
        /* ...dann sollen die Elemente nur noch 25% breit sein (4 Spalten). */
        .responsive-item {
            width: 25%;
        }
    }

    @container widget-content (min-width: 1850px) {
        /* ...dann sollen die Elemente nur noch 25% breit sein (4 Spalten). */
        .responsive-item {
            width: 20%;
        }
    }

    /* Die Animation für die Drehung */
    @keyframes spin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    /* Wir zielen auf jedes .note-content Div, das gerade editierbar ist */
    .note-content[contenteditable="true"] {
        /* Zuerst den harten Standard-Rahmen entfernen */
        outline: none !important; 
        
        /* Dann den modernen "Glow"-Effekt hinzufügen (empfohlene Variante) */
        box-shadow: 0 0 0 0.2rem var(--bs-card-bg) !important;
        
     
    }
    .note-content:focus {
        outline: none !important;
        box-shadow: 0 0 0 0.2rem var(--bs-card-bg) !important;
    }

    .note-content p {
        margin-top: 0;
        margin-bottom: 0;
    }


    /* ubuntu-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-condensed-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

    /* Stile für das Woltlab-inspirierte Forenlayout */

    .forum-container .card-header {
        background-color: var(--bs-body-bg);
        color: var(--bs-purple);
        padding-top: 1.2rem;
        padding-bottom: 0.4rem;
        padding-left: 0.2rem;
        margin-bottom: 0;
        border-bottom: 5px solid var(--bs-purple);
        border-top: none;
    }
    
    /* Der Haupt-Container für eine einzelne Foren-Zeile */
    .forum-node {
        gap: 1rem; /* Abstand zwischen den Flex-Items (Icon, Inhalt, etc.) */
    }

    /* Icon-Bereich */
    .forum-node-icon {
        flex-shrink: 0;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Inhalts-Bereich (flex-grow-1 ist schon im HTML) */
    .forum-node-content .h6 a {
        color: var(--bs-body-color);
    }
    .forum-node-content .h6 a:hover {
        color: var(--bs-primary);
    }
    .forum-node-subforums a {
        font-size: 0.9em;
    }


    /* Statistik-Bereich */
    .forum-node-stats {
        flex-shrink: 0;
        width: 180px; /* Feste Breite für die Statistik-Spalte */
        border-left: 1px solid var(--bs-border-color);
        align-items: center;
    }

    /* Letzter-Beitrag-Bereich */
    .forum-node-lastpost {
        flex-shrink: 0;
        width: 280px; /* Feste Breite für die Spalte des letzten Beitrags */
        border-left: 1px solid var(--bs-border-color);
        padding-left: 1rem;
    }

    /* Collapse-Button Icon anpassen */
    .btn[data-bs-toggle="collapse"][aria-expanded="false"] .fa-chevron-up {
        transform: rotate(180deg);
    }
    .btn[data-bs-toggle="collapse"] .fa-chevron-up {
        transition: transform 0.2s ease-in-out;
    }

    .topnav .navbar-nav .nav-item {
        margin: 0 .4rem;
    }
    
    @media (min-width: 991px) and (max-width: 1300px) {
        .topnav .navbar-nav .nav-link i {
            margin-right: 2px;
        }
        .nav-link-title {
            font-size: 10px;
        }
        .logo-txt-horizontal {
            font-weight: 700;
            font-size: 10px;
        }
    }

    /* Responsive Anpassungen */
    /* Auf Tablets (md) wird der letzte Beitrag angezeigt, Stats noch nicht */
    
    
    .thread-list {
        background-color: var(--bs-card-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }
    .thread-row {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--bs-border-color);
        gap: 1rem;
    }
    .thread-list > div:last-child { border-bottom: none; }

    .thread-row.is-sticky { background-color: var(--bs-boxed-body-bg); }
    .thread-row.is-unread .thread-title a { font-weight: bold; }
    .thread-row.is-closed { opacity: 0.9; }


    .thread-row__icon {
        flex-shrink: 0;
        position: relative;
    }
    .avatar {
        width: 48px; height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }
    .avatar-sm { width: 32px; height: 32px; }

    /* Angepasste Regeln */
    .thread-status-icon {
        position: absolute;
        bottom: -2px; /* Standardposition: unten */
        right: -2px;  /* Standardposition: rechts */
        background-color: #6c757d;
        color: white;
        width: 20px; height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        border: 2px solid white;
        z-index: 2; /* Stellt sicher, dass die Icons über dem Avatar liegen */
    }

    /* Spezifische Position für das Sticky-Icon: oben rechts */
    .thread-status-icon.sticky {
        top: -2px;
        left: -2px;   /* Geändert von 'right' zu 'left' */
        bottom: auto;
        right: auto;  /* Wichtig: Hebt die Standardposition 'right' auf */
        background-color: #c09e3e;
    }

    /* Das 'closed'-Icon nutzt die Standardposition (unten rechts) */
    .thread-status-icon.closed {
        background-color: #99101dff;
    }
    
    .thread-row__subject { flex: 1 1 auto; min-width: 200px; }
    .thread-title { margin-bottom: 0.25rem; color: var(--bs-primary); }
    .thread-title a { color: var(--bs-body-color); }
    .thread-title a:hover { color: var(--bs-primary); }
    
    .thread-row__stats, .thread-row__lastpost {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .thread-row.is-unread .thread-title .show-thema a {
        font-weight: bold;
        color: rgb(132, 116, 233) !important;
    }

    .text-primary-high {
        --bs-text-opacity: 1;
        color: rgb(157, 142, 255) !important;
    }

    .thread-row__stats {
        width: 180px;
        font-size: 0.9em;
        color: #6c757d;
        border-left: 1px solid var(--bs-border-color);
        padding-left: 1rem;
    }
    .stat-item { text-align: center; flex: 1; }
    .stat-count { display: block; font-weight: bold; color: var(--bs-body-color); }

    .thread-row__lastpost {
        width: 240px;
        gap: 0.75rem;
        font-size: 0.9em;
        border-left: 1px solid var(--bs-border-color);
        padding-left: 1rem;
    }

    .media-klein {
        display: none;
    }

   .thread-row__votes {
        flex-shrink: 0;
        width: 100px;
        font-size: 0.9em;
        display: flex;
        flex-direction: column;      /* NEU: Richtet die Elemente untereinander aus */
        align-items: flex-start;   /* Richtet die Elemente linksbündig aus */
        justify-content: center;   /* Zentriert den Block vertikal in der Zelle */
        gap: 0.25rem;              /* Kleinerer Abstand für die vertikale Anordnung */
        border-left: 1px solid var(--bs-border-color);
        padding: 0 0.5rem;
    }

    .thread-row__votes .stat-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .forum-anhang {
        max-height: 200px;
    }

    .thread-small-screen-tags {
        display: none;
    }
    .thread-big-screen-tags {
        display: inline;
    }

    .xsidebar-block {
        padding: 1rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .card .xsidebar-block:last-child {
        border-bottom: none;
    }
    .xsidebar-title {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }
    .xsidebar-list li {
        margin-bottom: 0.5rem;
    }
    .xsidebar-list a {
        text-decoration: none;
        color: var(--bs-body-color);
        display: block;
    }
    .xsidebar-list a:hover .title {
        color: var(--bs-primary);
    }
    .xsidebar-list .title {
        display: block;
        color: var(--primary);
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.2s ease;
        font-size: 1.1em;
    }
    .xsidebar-list .meta {
        color: var(--bs-secondary-color);
    }

    /* Responsive Anpassungen */
    @media (max-width: 991.98px) {
        .thread-row__label { display: none; }
        .thread-row__stats { display: none;}
        .thread-row__lastpost { width: 100%; }
        .media-gross { display: none;}
        .media-klein { 
            display: block; 
            padding-bottom: 0.01rem;
        }
    }
    @media (max-width: 767.98px) {
        .thread-row__subject .thread-title .media-klein .thread-meta { /* Wende es auf den ganzen Container an */
            font-family: 'Ubuntu Condensed', sans-serif !important; /* Kompaktere Schriftart für Mobilgeräte */
        }
        .thread-row__votes { display: none; }
        .thread-title  { /* Wende es auf den ganzen Container an */
            font-family: 'Ubuntu Condensed', sans-serif !important; /* Kompaktere Schriftart für Mobilgeräte */
        }
        .thread-meta {
            font-family: 'Ubuntu Condensed', sans-serif !important; /* Kompaktere Schriftart für Mobilgeräte */
        }
        .thread-row { flex-wrap: wrap; }
        .thread-row__icon { flex-basis: 100%; display: none; /* Auf ganz kleinen Screens meist überflüssig */ }
        .thread-row__subject { flex-basis: 100%; margin-bottom: 0.75rem; }
        .thread-row__lastpost {
            display: none;
        }
        .thread-row__subject {
            margin-bottom: 0.01rem;
        }
        .thread-row {
            display: flex;
            align-items: center;
            padding: 0.35rem 0.25rem;
            border-bottom: 1px solid var(--bs-border-color);
            gap: 1rem;
        }
        .thread-kat-name {
            font-size: 14px;
        }
        .thread-small-screen-tags {
            display: inline;
        }
        .thread-big-screen-tags {
            display: none;
        }
    }    

    .post-card-hinweis {
        border: 1px solid var(--bs-border-color);
    }

    .post-card-hinweis .card-body {
        font-style: italic; /* Kursivschrift, um den Hinweis-Charakter zu betonen */
    }

    /* Sorge dafür, dass die Badges im Hinweis korrekt angezeigt werden */
    .post-card-hinweis .labelx {
        font-style: normal; /* Hebt die Kursivschrift für die Badges wieder auf */
        vertical-align: middle;
    }

    /* Stile für die Beitragsansicht */
    .post-list .post-card {
        border: 1px solid var(--bs-border-color);
    }

    .post-sidebar {
        height: 100%;
    }
    .sidebar-user {
        background-color: var(--bs-input-bg);
        padding: 1.2rem;
        
    }
    .sidebar-user-karte {
        display: flex;
        text-align: left !important;
        height: auto;
        border-bottom: 1px solid var(--bs-border-color);
        padding-top: 0.2rem;
        padding-right: 1.2rem;
        padding-bottom: 0.2rem;
        padding-left: 1.2rem;
        background-color: var(--bs-input-bg);
    }

    .sidebar-user-karte .rounded-circle {
        width: 48px !important;
        height: 48px !important;
        margin-right: 0.75rem;
    }

    .post-sidebar .user-stats dt {
        float: left;
        clear: left;
        width: 60%;
    }
    .post-sidebar .user-stats dd {
        font-weight: bold;
    }

    .post-main {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .post-body {
        flex-grow: 1;
    }

    .post-body p {
        margin-bottom: 0rem !important;
        margin-top: 0rem !important;
    }

    /* Styling für das Voten */
    .post-actions .vote-btn .fa-solid {
        display: none; /* Verstecke das fette Icon standardmäßig */
    }

    .post-actions .vote-btn.voted {
        color: var(--bs-primary); /* Farbe für aktiven Vote */
        border-color: var(--bs-primary);
    }

    .post-actions .vote-btn.voted .fa-regular {
        display: none; /* Verstecke das normale Icon, wenn gevotet wurde */
    }

    .post-actions .vote-btn.voted .fa-solid {
        display: inline-block; /* Zeige das fette Icon, wenn gevotet wurde */
    }

    /* Die Klick-Animation */
    @keyframes pop {
        50% { transform: scale(1.4); }
    }

    .vote-pop {
        animation: pop 0.3s ease-out;
    }

    .vote-summary span {
        margin-right: 0.75rem;
    }

    .my-block {
        color: rgb(209, 210, 211);
        border-color: rgb(54, 55, 59);
        background-color: rgb(26, 29, 33);
    }
    .my-block-title {
        color: rgb(138, 140, 143);
    }
    .my-block-title a {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }
    .my-block-title a:hover {
        color: var(--bs-primary);
    }
    .my-block-content {
        color: rgb(209, 210, 211);
    }

    .menu-footer {
        display: none !important;
    }

    /* Responsive Anpassung für Beiträge */
    @media (max-width: 767.98px) {
       .sidebar-user {
            /* Bleibt ein Flex-Container, um Avatar und User-Info nebeneinander zu legen */
            display: flex;
            text-align: left !important;
            height: auto;
            border-bottom: 1px solid var(--bs-border-color);
            padding-top: 0.2rem;
            padding-right: 1.2rem;
            padding-bottom: 0.2rem;
            padding-left: 1.2rem;
        }
        .sidebar-user .rounded-circle {
            width: 48px !important;
            height: 48px !important;
            margin-right: 0.75rem;
        }

        /* KORRIGIERT: Wir verstecken nur noch den Trennstrich und die Statistiken */
        .sidebar-user hr, .sidebar-user .user-stats {
            display: none; 
        }
        
        .content-header {
            /* Erlaubt den Flex-Items, in die nächste Zeile umzubrechen */
            flex-wrap: wrap;
        }

        .content-header-icon img {
            /* Den Avatar auf mobilen Geräten etwas verkleinern */
            width: 44px;
            height: 44px;
        }

        .content-header .content-title {
            font-family: 'Ubuntu Condensed', sans-serif !important;
            font-size: 1.25rem; 
        }

        .content-header-nav {
            /* Nimmt die volle Breite ein und erzwingt so den Zeilenumbruch */
            
            /* Fügt etwas Abstand zum Titel darüber hinzu */
            margin-top: 0.75rem; 
            /* Richtet die Buttons innerhalb der Navigationsleiste rechts aus */
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem; /* NEU: Fügt einen Abstand von 8px zwischen den Buttons hinzu */
        }
        .list-inline {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }

        .xsidebar-title {
            font-size: 1rem;
            margin-bottom: 0.75rem;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }
        .xsidebar-list li {
            margin-bottom: 0.5rem;
        }
        .xsidebar-list a {
            text-decoration: none;
            color: var(--bs-body-color);
            display: block;
        }
        .xsidebar-list a:hover .title {
            color: var(--bs-primary);
        }
        .xsidebar-list .title {
            display: block;
            color: var(--primary);
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.2s ease;
        }
        .xsidebar-list .meta {
            font-size: 0.8em;
            color: var(--bs-secondary-color);
        }

        .grid-stack-item {
            /* Gridstack nutzt CSS-Variablen für den Abstand. Wir überschreiben sie hier. */
            --gs-item-margin-top: 15px !important;
            --gs-item-margin-bottom: 15px !important;
            --gs-item-margin-left: 1px !important; /* Optional: Links/Rechts anpassen */
            --gs-item-margin-right: 1px !important;
        }
    }

    
    @media (max-width: 575.98px) {

        .page-content {
            padding: calc(65px - 33px) calc(2px / 1) 65px calc(2px / 1)  !important;
        }

        .row {
            --bs-gutter-x: 1px;
            --bs-gutter-y: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-top: calc(-1 * var(--bs-gutter-y));
            margin-right: calc(-.5 * var(--bs-gutter-x));
            margin-left: calc(-.5 * var(--bs-gutter-x));
        }

        .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            width: 100%;
            padding-right: var(--bs-gutter-x,1px);
            padding-left: var(--bs-gutter-x,1px);
            margin-right: auto;
            margin-left: auto;
        }
        
        .benachrichtigungen {
            padding-left: 1rem  !important; 
            
        }

        .benachrichtigungen-icon {
            font-size: 24px;  /* oder eine andere gewünschte Größe */
            background-color: var(--bg-soft-primary);  /* oder eine andere gewünschte Farbe */   
        }
        
        .navbar-brand-box {
            padding: 0 0.8rem;
            z-index: 1;
        }

        .my-card-body {
            /* 1. Weist den Body an, den gesamten verfügbaren Platz auszufüllen. */
            flex-grow: 1;

            /* 2. Der entscheidende Befehl: Fügt einen Scrollbalken hinzu, wenn der Inhalt zu groß ist. */
            overflow-y: auto;

            /* 3. Ein Flexbox-Fix, um sicherzustellen, dass das Schrumpfen korrekt funktioniert. */
            min-height: 0;

            /* Ihre bestehenden Padding-Werte */
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
            padding-left: 0.1rem;
            padding-right: 0.1rem;
        }

        .card-header {
            padding-top: 0.8rem;
            padding-bottom: 0.2rem;
            padding-left: 0.4rem;
            padding-right: 0.4rem;
            margin-bottom: 0;
            background-color: var(--bs-card-cap-bg);
            border-bottom: 1px solid var(--bs-card-border-color);
        }

        .card-body {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
            padding-left: 0.4rem;
            padding-right: 0.4rem;
        }

        .normal-footer {
            display: none !important;
        }
        .menu-footer {
            display: flex !important;
            bottom: 0;
            left: 0; /* Hinzufügen, um die linke Kante zu definieren */
            right: 0; /* Stellt sicher, dass es die volle Breite einnimmt */
            position: fixed; /* Die entscheidende Änderung */
            padding: 4px calc(22px / 2);
            color: var(--bs-footer-color);
            background-color: var(--bs-sidebar-dark-menu-item-active-bg-color);
            border-top: 2px solid var(--bs-border-color);
            height: 50px;
            -webkit-box-shadow: 0 0 4px rgba(15,34,58,.12);
            box-shadow: 0 0 4px rgba(15,34,58,.12);
            z-index: 1030; /* Wichtig, damit es über anderen Inhalten liegt */
        }
        
        .menu-footer-link {
            color: var(--bs-footer-color);
            font-size: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%; /* Wichtig, damit die vertikale Zentrierung funktioniert */
        }
        .menu-footer-link:hover {
            color: var(--bs-primary);
            transition: color 0.2s ease-in-out;
        }

        .menu-footer-link span {
            font-size: 10px; /* Kleinere Schrift für den Text */
            margin-top: 2px;
        }

        .navbar-header {
            height: 50px;
            padding: 0 calc(22px / 2) 0 0;
        }

        #page-topbar .navbar-header .navbar-brand-box {
            height: 50px;
        }

        #page-topbar .navbar-header .vertical-menu-btn {
            display: inline-block;
            height: 50px;
        }
        .logo {
            line-height: 50px;
        }
        .header-item {
            height: 50px;
        }
        .smart-text {
            font-family: 'Ubuntu Condensed', sans-serif !important; /* Kompaktere Schriftart für Mobilgeräte */
        }
        .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }
        .btn {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }
        p {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }
        .card {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }
        .card-body {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }
        .tox-tinymce {
            font-family: 'Ubuntu Condensed', sans-serif !important;
        }
        .forum-anhang {
            max-height: 100px;
        }
        .feed-img {
            max-height: 70px;
            max-width: 120px;
        }

        .feed-item img {
            max-height: 100px;
            max-width: 120px;
        }

        /* Swiper-Styling */
        .fixed-size-data-swiper {
            width: 100%;
            height: 200px; /* Feste Höhe für kleine Medien */
            object-fit: fill; /* Bild zuschneiden, um den Container zu füllen */
        }
        .fixed-size-data-swiper-cards {
            width: 100%;
            height: 200px; /* Feste Höhe für kleine Medien */
            object-fit: fill; /* Bild zuschneiden, um den Container zu füllen */
        }
        .fixed-size-data-swiper-klein {
            width: 100%;
            height: 200px; /* Feste Höhe für kleine Medien */
            object-fit: fill; /* Bild zuschneiden, um den Container zu füllen */
        }
        .fixed-size-data-swiper-klein-cards {
            height: 80px; /* Feste Höhe für kleine Medien */
        }
        .fixed-size-data-normal-swiper {
            height: 100px; 
        }
        .fixed-size-data-normal-swiper-cards {
            height: 50px; 
        }

        .sticky-glossary {
            position: sticky;
            top: 52px;
            z-index: 1020;
        }

    }