body {
    font-family: 'Noto Sans', sans-serif;
}

.container {
    display: flex;
    flex-direction: column; /* Stapelt Elemente horizontal */
    align-items: flex-start; /* Zentriert Elemente horizontal */
    padding: 100px;
}

.page-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.container_quiz {
    flex: 1;    
    display: flex;
    flex-direction: row; /* Stapelt Elemente vertikal */
    align-items: flex-start; /* Zentriert Elemente horizontal */
    justify-content: space-between;
    padding: 100px;
    max-width: 1500px; /* oder ein anderer geeigneter Wert */
    margin: 0 auto; /* zentriert den Container */
}

.main-content {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    margin-right: 20px; /* Abstand zum Handlungsfeld-Container */
    max-width: calc(100% - 220px);
}

.container_Auss_bearbeiten {
    display: flex;
    flex-direction: column; /* Stapelt Elemente vertikal */
    align-items: flex-start; /* Zentriert Elemente horizontal */
    padding: 100px;
    width: 100%; /* Volle Breite des umgebenden Elements */
    max-width: 800px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container horizontal */
}

.container_basisaussagen_anzeigen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 50px;
    max-width: 800px;
    margin: 0 auto;
}

.abschluss-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Elemente horizontal in der Mitte, falls das gewünscht ist */
    padding: 50px;
    max-width: 600px; /* Legt eine maximale Breite für den Container fest */
    margin: 0 auto; /* Zentriert den Container horizontal auf der Seite */
}



.text-input {
    width: 100%; /* Volle Breite des umgebenden Elements */
}

.textarea-input1 {
    width: 700px;
    height: 80px; /* Feste Höhe */
    resize: both; /* Ermöglicht das Anpassen der Größe durch den Benutzer */
    overflow: auto; /* Fügt Scrollleisten hinzu, falls der Inhalt größer ist als der Textbereich */
}

.textarea-input2 {
    width: 100%;
    height: 100px; /* Feste Höhe */
 }

.navigation-container {
            display: flex;
            justify-content: center; /* Center the navigation buttons */
            margin-top: 20px;
}

.button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    color: #fff;
    background-color: #000000;
    border: 2px solid #68E5FA;;
    border-radius: 5px;
    box-shadow: 0 5px #D3D3D3;
    height: 50px; /* Set the height to match the .bewertungs-info */
    line-height: 30px; /* Adjust line-height to vertically align text */
    box-sizing: border-box; /* Ensure padding is included in the height */

}

.button-group {
    margin-bottom: 20px; /* Fügt Abstand zwischen den Gruppen hinzu */
    padding: 10px; /* Fügt Innenabstand hinzu */
    border: 1px solid #68E5FA;; /* Optional: Fügt einen Rahmen um die Gruppe hinzu */
    border-radius: 8px; /* Optional: Rundet die Ecken des Rahmens ab */
    background-color: #f9f9f9; /* Optional: Setzt eine Hintergrundfarbe für die Gruppe */
}

.button-group h2 {
    margin-bottom: 10px; /* Fügt Abstand unter der Überschrift hinzu */
    font-size: 18px; /* Setzt die Schriftgröße der Überschrift */
    color: #333; /* Setzt die Schriftfarbe der Überschrift */
}

.button-group .button {
    margin-bottom: 10px; /* Fügt 10px Abstand zwischen den Buttons hinzu */
}

.button:hover {background-color: #808080}

.button:active {
    background-color: #808080;
    box-shadow: 0 5px #D3D3D3;
    transform: translateY(4px);
}

.button.disabled {
    background-color: #808080; /* Dunkelgrau, um Deaktivierung anzuzeigen */
    cursor: not-allowed; /* Cursor-Stil ändern, um Deaktivierung anzudeuten */
    opacity: 0.5; /* Halb transparent, um visuell zu deaktivieren */
}

.button-text-container {
    display: flex;
    align-items: center;
    gap: 220px; /* Passen Sie den Abstand nach Bedarf an */
}

.abmelde-button {
    /* Weitere Styling-Optionen für den Button */
    padding: 5px 10px;
    background-color: #f44336; /* Roter Hintergrund */
    color: white; /* Weiße Schrift */
    outline: none;
    color: #fff;
    background-color: #000000;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px #D3D3D3;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between; /* Verteilt die Buttons gleichmäßig im Container */
    width: 80%; /* Optional: Anpassung der Breite des Containers */
    padding: 20px; /* Optional: Fügt etwas Abstand innerhalb des Containers hinzu */
    align-items: center; /* Vertically align items */
    margin-top: 20px;
}

.button-gruppen {
    display: flex;
    justify-content: space-between; /* Verteilt den verfügbaren Raum gleichmäßig zwischen den Buttons */
    gap: 10px;
}

.top-right {
    position: absolute;  /* oder 'fixed', wenn der Button beim Scrollen sichtbar bleiben soll */
    right: 10px;  /* Abstand zum rechten Rand */
    top: 10px;   /* Abstand zum oberen Rand */
}

.handlungsfelder-buttons {
    display: flex;
    padding: 4px 7px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    color: #fff;
    background-color: #000000;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px #D3D3D3;
    height: 30px;
    line-height: 15px;
    box-sizing: border-box;
    margin-bottom: 15px;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2.5px;
    min-width: 200px; /* Minimale Breite für die Buttons */
}

.handlungsfelder-buttons:hover {background-color: #808080}

.handlungsfelder-buttons:active {
    background-color: #808080;
    box-shadow: 0 5px #D3D3D3;
    transform: translateY(4px);
}

.button-group-handlungsfelder {
    display: flex;
    flex-direction: column;
    margin-top:100px;
    margin-bottom: 20px;
    position: sticky;
    top: 800px; /* Abstand von oben, wenn fixiert */
    flex: 0 0 auto; /* Verhindert das Schrumpfen und Wachsen */
    width: 200px; /* oder eine andere geeignete feste Breite */
    align-self: flex-start; /* Ausrichtung am Anfang des Flex-Containers */
    max-height: calc(100vh - 40px); /* Maximale Höhe, um Platz für Padding zu lassen */
}

.handlungsfeld-button {
    margin-bottom: 10px;
    white-space: nowrap; /* Verhindert Umbruch des Buttontextes */
}



.abmelde-form, .abmelde-button {
    position: fixed; /* oder absolute, abhängig vom Elternelement */
    top: 0;
    right: 0;
    margin: 10px;
}


.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-left, .logo-right {
    flex: 1;
}

.logo-right {
    display: flex;
    justify-content: flex-end;
}

.logo {
    max-height: 100px;  /* Passen Sie dies nach Bedarf an */
    width: auto;
}

.customer-logo {
    max-height: 100px;  /* Passen Sie dies nach Bedarf an */
    width: auto;
}

.fslq-logo {
   max-height: 50px;  /* Passen Sie dies nach Bedarf an */
    width: auto;
}

.input-readonly {
    width: 20px; /* oder eine andere Breite, die zu deinem Design passt */
    background-color: #e9e9e9; /* optional, um das Feld visuell als nicht bearbeitbar zu kennzeichnen */
}

.text-input-content {
    font-size: 18px;
    font-weight: regular;
    font-family: 'Noto Sans', italic;
}

/* Container für die gesamte Bewertungseinheit */
.bewertungseinheit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Rahmen für die Aussage */
.aussage-rahmen {
    padding: 5px;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 600px;
    height: 120px;
    text-align: left;
   justify-content: center;
    overflow: auto; /* Versteckt überfließenden Text */
}
.aussage-text {
    font-size: 20px;
    font-weight: bold;
    font-family: 'Noto Sans';
    padding: 10px; /* Fügt innen etwas Platz hinzu */
    text-align: justify; /* Sorgt für einen gleichmäßigen Randausgleich */
    overflow-wrap: break-word; /* Stellt sicher, dass Wörter umgebrochen werden, um in den Container zu passen */
}
/* Rahmen für die Optionen */
.optionen-rahmen {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 600px;
    sflex-wrap: wrap;  /*Erlaubt den Optionen, in einer neuen Zeile zu erscheinen, falls nicht genug Platz vorhanden ist */
}

.option {
   /* Passt die Basisbreite der Optionen an */
    text-align: center;
    margin: 5px; /* Fügt einen kleinen Abstand um jede Option hinzu */
}

.option input[type="radio"] {
    margin-bottom: 5px; /* Fügt etwas Abstand unter dem Radio-Button hinzu */
    cursor: pointer; /* Zeigt den Cursor als Pointer, um die Interaktivität zu betonen */
}

@media (max-width: 600px) {
    .option {
        flex-basis: 100%; /* Unter einer Fensterbreite von 600px nimmt jede Option die volle Breite ein */
    }
}

.option label {
    font-family: 'Noto Sans', sans-serif; /* Verwende Noto Sans für die Labels der Optionen */
    font-size: 12px; /* Optional: Stelle die Größe nach Bedarf ein */
    text-align: center; /* Zentriert den Text */
    display: block; /* Stellt sicher, dass das Label als Blockelement behandelt wird, was den Text unter den Button setzt */
}


.container-gruppen {
    font-family: 'Noto Sans', sans-serif; /* Verwende Noto Sans für die Labels der Optionen */
    font-size: 12px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    align-items: flex-start;
}

.aussage-container-gruppen {
    font-family: 'Noto Sans', sans-serif; /* Verwende Noto Sans für die Labels der Optionen */
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 15px;
    padding-top: 2px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.table-container {
    display: flex;
    flex-wrap: wrap;
}

.table-half {
    flex-basis: 50%; /* Jede Hälfte nimmt 50% der Breite ein */
    box-sizing: border-box; /* Um Padding und Border in der Breite einzuschließen */
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px 5px
}

th, td {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.answer-low { /* Für Werte 1-3 */
    color: #FF0000; /* Rot */
}

.answer-high { /* Für Werte 4-6 */
    color: #008000; /* Grün */
}


.aussage-text-gruppen {
    height: auto;
    overflow: visible;
    display: block;
    margin-bottom: 10px; /* ← GUT, damit Abstand zu nächsten Elementen bleibt */
}

.aussage-text-gruppen .label {
    display: block;
    margin-bottom: 8px; /* Erhöht den Abstand nach dem Zeilenumbruch */

}

.aussage-info {
    display: flex;
    align-items: center; /* Zentriert die Inhalte vertikal */
    gap: 10px; /* Fügt etwas Abstand zwischen der Aussage und dem Icon hinzu */
}

.info-icon.custom-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.info-icon.custom-tooltip .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/images/info-icon.svg'); /* Pfad zum Icon-Bild */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    text-indent: -9999px; /* Versteckt den Text "i" */
}

.info-icon.custom-tooltip .tooltip-text {
    position: absolute;
    background: rgba(51, 51, 51, 0.9);
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px; /* Setzen Sie hier die gewünschte Schriftgröße */
    line-height: 1.4;
    width: max-content;
    max-width: 300px;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.info-icon.custom-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.success-indicator, .danger-indicator {
    display: flex;
    align-items: center;
    gap: 10px; /* Stellt einen kleinen Abstand zwischen Text und Bild sicher */
}

.success-indicator img, .danger-indicator img {
    width: 20px; /* Passt die Größe des Bildes an */
    height: auto;
}


.answer-high-green, .answer-low-green {
    color: #0072BB; /* Grün */
}

.answer-high-red, .answer-low-red {
    color: #D55E00; /* Rot */
}


.flash {
    display: block;
    width: 29%;          /* Stellen Sie die Breite nach Bedarf ein */
    margin: 10px auto;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    color: green;
}
.flash.success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #cd2626;
}
.flash.warning {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
.flash.info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}


.flash.danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}


.select-style {
    width: 40%;        /* Volle Breite des Containers */
    height: 40px;       /* Genug Höhe für leichtere Klickbarkeit */
    padding: 5px;       /* Etwas Innenabstand */
    font-size: 16px;    /* Lesbare Schriftgröße */
    border: 1px solid #ccc; /* Diskreter Rand */
    border-radius: 4px; /* Leicht gerundete Ecken */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Leichter Schatten für mehr Tiefe */
    background-color: white; /* Hintergrundfarbe */
}


.bewertungs-info {
            font-family: 'Noto Sans', sans-serif;
            display: inline-block;
            border: 1px solid #000;
            border-radius: 5px;
            padding: 10px;
            margin: 0 20px; /* Adjusted margin for horizontal spacing */
            text-align: center;
            white-space: nowrap;
            color: #00B0F0;
            background-color: #000000;
            height: 50px; /* Set the height to match the buttons */
            line-height: 30px; /* Adjust line-height to vertically align text */
            box-sizing: border-box; /* Ensure padding is included in the height */
            display: flex;
            display: flex;
            align-items: center;
        }

        /* Doppellinien zwischen den Handlungsfeldern */
.handlungsfeld-trenner {
    border-top: 4px double #00B0F0;
    margin: 20px 0; /* Abstand oben und unten */
}

/* Dicke Linie zwischen erwünscht und nicht erwünscht */
.erwuenscht-trenner {
    border-top: 4px solid #00B0F0;
    margin: 10px 0; /* Abstand oben und unten */
}

/* Feine Linie zwischen den einzelnen Aussagen */
.aussage-trenner {
    border-top: 1px solid #00B0F0;
    margin: 5px 0; /* Abstand oben und unten */
}