/* Header-Section */
.header-section {
    background: linear-gradient(135deg, #eb8c04, #FFA500); /* Farbverlauf */
    width: 100%; /* Füllt die gesamte Breite */
    padding: 60px 20px; /* Innenabstand für den Header */
    border-radius: 0; /* Keine Abrundungen */
    position: relative; /* Positionierung bleibt */
    z-index: 1; /* Hintergrund bleibt unter dem Content */
    height: 250px; /* Höhe des Farbverlaufs */
    display: flex; /* Flexbox für Layout */
    flex-direction: column; /* Stapelelemente vertikal */
    align-items: flex-start; /* Richte Inhalt links aus */
}

.header-section h1 {
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); /* Leichter schwarzgrauer Schatten */
    font-size: 36px; /* Optional: Schriftgröße */
    font-weight: bold; /* Optional: Fettschrift */
    color: #fff; /* Weiße Schriftfarbe */
}


/* Überschrift */
.header-title {
    display: flex;
    align-items: center; /* Vertikale Ausrichtung von Icon und Text */
    gap: 10px; /* Abstand zwischen Icon und Text */
    font-size: 36px; /* Schriftgröße der Überschrift */
    font-weight: bold; /* Fettschrift */
    color: #fff; /* Weiße Schriftfarbe */
}

.material-icons {
    font-size: 36px !important; /* Gleiche Größe wie der Text */
    color: #fff; /* Farbe des Icons */
}

.header-subtitle {
    font-size: 18px; /* Kleinere Schriftgröße */
    font-weight: normal; /* Normale Schrift */
    color: #fff; /* Weiße Schriftfarbe */
    margin: 0; /* Kein zusätzlicher Abstand */
    text-align: left; /* Links ausgerichtet */
}


/* Wrapper mit Farbverlauf */
.content-wrapper {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Elemente */
    align-items: center; /* Zentriert die Elemente horizontal */
    width: 100%; /* Füllt die gesamte Breite */
    margin: 0;
    padding: 0;
}


/* Content-Bereich */
.content-area {
    background-color: #fff; /* Weißer Hintergrund */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten */
    padding: 20px; /* Innenabstand */
    margin: -60px auto 0; /* Überlappt den unteren Teil des Headers */
    /* max-width: 1200px; /* Maximale Breite des Inhalts */
    width: calc(100% - 40px); /* Passt sich kleineren Bildschirmbreiten an */
    position: relative;
    z-index: 2; /* Überlappt den Header */
}

.additional-content-area {
    background-color: #fff; /* Weißer Hintergrund */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten */
    padding: 20px; /* Innenabstand */
    margin: 30px auto 0; /* Positiver Abstand von 20px zum vorherigen Bereich */
    max-width: 1200px; /* Maximale Breite des Inhalts */
    width: calc(100% - 40px); /* Passt sich kleineren Bildschirmbreiten an */
}


/* Überschrift */
.content-area h1 {
    font-size: 24px;
    font-weight: bold;
    color: #363d47;
    margin-bottom: 15px;
}

/* Text */
.content-area p {
    font-size: 16px;
    color: #6c757d;
    line-height: 1.5;
}




.section-header {
    background-color: #2128320A; /* Hintergrund mit transparenter HEX-Farbe */
    margin: 0 -20px 20px -20px; /* Negative Margins kompensieren das Padding der .content-area */
    padding: 10px 15px; /* Innenabstand für den Text */
    width: calc(100% + 40px); /* Erweitert die Breite, um das Padding zu überschreiben */
    border-top: 1px solid #21283220; /* Dünner, dunkler Rand oben */
    border-bottom: 1px solid #21283220; /* Dünner, dunkler Rand unten */
    display: flex; /* Flexbox für horizontale Anordnung */
    justify-content: space-between; /* Überschrift links, Button rechts */
}


.section-header h2 {
    margin: 0; /* Kein zusätzlicher Abstand */
    font-size: 18px; /* Schriftgröße der Überschrift */
    font-weight: normal; /* Fettschrift */
    color: #FFA500; /* Rote Schriftfarbe */
}

.section-header button {
    background-color: #c6c6c6; /* Orange Hintergrundfarbe */
    color: white; /* Weißer Text */
    border: none; /* Keine Umrandung */
    border-radius: 5px; /* Abgerundete Kanten */
    padding: 6px; /* Innenabstand */
    cursor: pointer; /* Mauszeiger ändern bei Hover */
    font-size: 10px; /* Schriftgröße */
    text-transform: uppercase; /* Großbuchstaben */
    text-align: center; /* Zentriert den Text im Button */
    transition: background-color 0.3s ease;
    height: 25px;
}

.section-header button:hover {
    background-color: #e59400; /* Etwas dunkleres Orange bei Hover */
}

.section-header button a {
    color: white; /* Weißer Text im Link */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: inherit; /* Gleiche Schriftgröße wie der Button */
    display: block; /* Link füllt den Button vollständig aus */
}

.section-header .material-icons {
    font-size: 15px !important; /* Gleiche Größe wie der Text */
    color: #fff; /* Farbe des Icons */
}


/* Basis-Icon-Stil */
.home-category-item .material-icons {
    font-size: 80px !important;
    color: #ccc;
    transition: color 0.4s ease, transform 0.4s ease;
}

/* Farbvarianten */
.home-category-item.dashboard .material-icons.active { color: #007bff; transform: scale(1.2); }
.home-category-item.mdm .material-icons.active { color: #28a745; transform: scale(1.2); }
.home-category-item.einkauf .material-icons.active { color: #ffc107; transform: scale(1.2); }
.home-category-item.sonstiges .material-icons.active { color: #dc3545; transform: scale(1.2); }


.home-category-item {
    text-align: center;
    width: 150px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-weight: 600;
}

#home-category {
    display: flex;
    justify-content: center;     /* horizontal zentrieren */
    flex-wrap: wrap;             /* nächste Zeile bei Bedarf */
    gap: 20px;                   /* Abstand zwischen Boxen */
    padding: 20px;
    margin-top:20px;
    margin-bottom: 20px;
}



/* Leiste direkt unter dem Header */
.below-header-bar {
    /* position: fixed; */
    left: 0;
    top: 50px;
    width: calc(100% - 17px);
    background: linear-gradient(135deg, #eb8c04, #FFA500); /* Farbverlauf */
    color: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); /* Leichter schwarzgrauer Schatten */
}

.below-header-content {
    display: flex;
    align-items: center;
    width: calc(100% - 250px); /* Standardbreite der Sidebar berücksichtigen */
    margin-left: 250px; /* Standardwert für die Sidebar-Breite */
    transition: margin-left 0.3s ease, width 0.3s ease; /* Sanfte Anpassung */
}

.header-large-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}


.header-large-title h1,
.header-large-title span {
    font-size: 0.5rem;
}

.header-buttons {
    d-flex gap-3
}

.action-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
    position: absolute;
    right: 20px; /* Hält die Buttons rechts fest */
}

.action-buttons .btn {
    background-color: #fff;
    border: none;
    color: #FFA500;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.action-buttons .btn:hover {
    background-color: #5a6268;
}
.dark {
    color: #6c757d !important;
    fill: #6c757d !important;
}
.dark:hover{
    color: #fff !important;
    fill: #fff !important;
    background-color: #5a6268 !important;
}
.dark:hover svg{
    color: #fff !important;
    fill: #fff !important;
}


/************************************************/
/*                  xCR-Dashboard               */
/************************************************/
/* Standardmäßig ist die Nachricht ausgeblendet */
.iframe-placeholder {
    display: none;
    font-size: 16px;
    color: #dc3545; /* Rot für Hervorhebung */
    text-align: center;
    margin: 20px 0;
}

/* Standardmäßig ist der Iframe sichtbar */
.iframe {
    display: block;
}

/* Bei kleinerer Breite wird der Iframe ausgeblendet und die Nachricht angezeigt */
@media (max-width: 1500px) {
    .iframe {
        display: none;
    }

    .iframe-placeholder {
        display: block;
    }
}