:root {
    --bh-footer-background: #f8f8f8;
    --bh-footer-info: #ffffff;
    --bh-footer-copyright: #ffffff;
    --bh-background-white: #ffffff;


    --bh-color-primary: #ffb300;
    --bh-color-success: #28a745;
    --bh-color-danger: #E03B31;
    --bh-color-warning: #ffc107;
    --bh-color-info: #17a2b8;
    --bh-color-dark: #222;
    --bh-color-white: #fff;
    --bh-color-light: #f8f8f8;
}

.validation {
    padding-left: 0.2rem;
    padding-top: 0.2rem;
}

.validation-error {
    color: var(--bh-color-danger);
}

.validation-success {
    color: var(--bh-color-success);
}

.validation-warning {
    color: var(--bh-color-warning);
}

.validation-info {
    color: var(--bh-color-info);
}

.validation-default {
    color: var(--bh-color-dark);
}

#yaspa-wrapper {
    background-color: var(--bh-background-white);
    display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header#yaspa-header-wrapper {
       padding: 0 24px;
}

div#yaspa-navigation-wrapper {
    padding: 0 24px;
    background-color: var(--bh-navigation-background) !important;
}

#yaspa-content-wrapper {
    padding: 0 24px;
    background-color: var(--bh-background-white);
    flex-grow: 1;
}

#yaspa-content-frontpage {
    margin-top: 24px !important;
}

#yaspa-toolbar-wrapper, #yaspa-toolbar-wrapper section{
    max-height: 42px;
    padding: 0 24px;
}

#yaspa-wrapper #yaspa-footer-wrapper {
    margin-top: 24px !important;
    padding: 0 24px;
    border-top: 1px solid var(--bh-color-light);
    min-height: 42px;
    background-color: var(--bh-footer-background);

    display: flex;
    align-items: center;
}

.yaspa-footer-info, .yaspa-footer-copyright {
    padding: 5px 12px;
    line-height: 1.5;
    width: 100%;
}

.bh-plugin-card-state-deactive {
    width:  0.8rem;
    height:  0.8rem;
    background-color: var(--bh-color-danger);
}

.bh-plugin-card-state-deactive-uninstalled {
    width:  0.8rem;
    height:  0.8rem;
    border: 1px solid var(--bh-color-danger);
}

.bh-plugin-card-state-active {
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--bh-color-success);
}

/* =================================================================== */
/* ===== BEGINN: MODIFIKATIONEN FÜR DAS FOOTER-LAYOUT (23.09.2025) ===== */
/* =================================================================== */

/* 1. Haupt-Layout des Footers (Info-Bereich links, Copyright rechts)
----------------------------------------------------------------------*/

/* Der linke Info-Bereich soll den verfügbaren Platz füllen.
   Die ID überschreibt die Klasse .yaspa-footer-info. */
#yaspa-footer-info {
    flex-grow: 1;      /* Erlaubt diesem Element, zu wachsen und den leeren Raum zu füllen */
    width: auto;       /* WICHTIG: Überschreibt die alte 'width: 100%'-Regel */
}

/* Der rechte Copyright-Bereich soll nur seinen benötigten Platz einnehmen.
   Die ID überschreibt die Klasse .yaspa-footer-copyright. */
#yaspa-footer-copyright {
    flex-shrink: 0;    /* Verhindert, dass das Element bei Platzmangel schrumpft */
    white-space: nowrap; /* Hält den Copyright-Text in einer Zeile */
    width: auto;       /* WICHTIG: Überschreibt die alte 'width: 100%'-Regel */
}


/* 2. Grid-Layout IM Info-Bereich des Footers
----------------------------------------------------------------------*/

/* Diese Regel korrigiert das Spalten-Layout im Info-Bereich für alle Bildschirmgrößen.
   Sie verhindert das Stapeln auf Mobilgeräten und richtet den Inhalt jeder Spalte korrekt aus. */

/* Regel für ein 4-Spalten-Layout (4 x bh-col-3) */
.bh-plugin-footer .bh-grid .bh-col-3 {
    /* Verhindert das Stapeln der Spalten auf kleinen Bildschirmen */
    grid-column: span 3 / auto;

    /* Ordnet Label und Wert IN der Spalte nebeneinander an */
    display: flex;
    align-items: center;
}

/* Regel für ein 3-Spalten-Layout (3 x bh-col-4) */
.bh-plugin-footer .bh-grid .bh-col-4 {
    /* Verhindert das Stapeln der Spalten auf kleinen Bildschirmen */
    grid-column: span 4 / auto;

    /* Ordnet Label und Wert IN der Spalte nebeneinander an */
    display: flex;
    align-items: center;
}

.yaspa-hide {
    display: none !important;
}
/* =================================================================== */
/* ===== ENDE: MODIFIKATIONEN FÜR DAS FOOTER-LAYOUT                ===== */
/* =================================================================== */

@media (max-width: 768px) {

     #yaspa-wrapper {
        margin: 0;
        padding: 0;
    }

    /* BEGINN: Footer-Anpassungen für mobile Geräte */
    #yaspa-wrapper #yaspa-footer-wrapper {
        flex-direction: column; /* Stellt die Elemente (Info & Copyright) untereinander */
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #yaspa-footer-info,
    #yaspa-footer-copyright {
        text-align: center;     /* Zentriert den Text für eine bessere mobile Ansicht */
        width: 100%;
    }

    #yaspa-footer-copyright {
        margin-top: 1rem;       /* Fügt Abstand zwischen den beiden Blöcken hinzu */
        white-space: normal;    /* Erlaubt dem Copyright-Text einen Zeilenumbruch */
    }
    /* ENDE: Footer-Anpassungen für mobile Geräte */

}