/*Überschrift*/
h2 {
    text-align: center;        /* Zentriert den Text */
}
.header-tech {
    margin-bottom: 0px; /* Kleineren Abstand unter dem h2 */
    text-align: center;        /* Zentriert den Text */
}

/*Reiter*/
.tab-container {
	padding-top: 20px; /* Abstand oben hinzufügen */
    width: 100%;
    max-width: 1200px; /* Maximale Breite für größere Bildschirme */
    margin: 0 auto; /* Zentriert den Container auf der Seite */
}

.tabs {
    display: flex;
    justify-content: center; /* Zentriert die Tab-Reiter horizontal */
    list-style: none;
    padding: 0;
    margin: 0;
}

.tabs li {
    flex: 1; /* Optional: sorgt dafür, dass die Tab-Reiter gleichmäßig verteilt sind */
    text-align: center;
    cursor: pointer;
    background: #f0f0f0;
    margin: 0 5px; /* Fügt einen kleinen Abstand zwischen den Tab-Reitern hinzu */
    transition: background-color 0.3s, transform 0.3s; /* Sanfte Übergänge */
}

.tab-container .tabs li.active {
    background: #d8613c;
    color: white;
    margin: 0 auto; /* Zentriert den Container auf der Seite */
    transform: scale(1.05); /* Vergrößert den aktiven Tab leicht */
}

.tab-container .tabs li img {
    width: 10vw; /* Breite anpassen */
    max-width: 150px; /* Maximale Breite für größere Bildschirme */
    height: auto; /* Höhe anpassen */
    object-fit: cover;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ddd;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

/*Tooltip*/

.tooltip {
    display: inline-block;
    position: relative;
}

.tooltip:hover::after {
    content: attr(data-tooltip);
    background: #333;
    color: white;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: -40px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.tooltip:hover::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.tooltip-box {
    display: none;
    position: absolute;
    z-index: 1000;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
}

.option {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.option input[type="radio"] {
    margin: 5px 0;
    transform: scale(1.5);
    display: none; /* Versteckt die Radio-Buttons, da sie nicht interaktiv sind */
}

.option label {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    white-space: nowrap;
    position: relative; /* Ermöglicht das Positionieren des Tooltips */
}


.tooltip-box a {
    color: #0073aa; /* Linkfarbe */
    text-decoration: underline; /* Unterstreichen des Links */
}

.tooltiptext {
    visibility: hidden;
    width: 800px; /* Breite des Tooltips */
    background-color: #555;
    color: #fff;
    text-align: left; /* Links ausgerichteter Text */
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Positioniert das Tooltip über dem Label */
    left: 100%;
    margin-left: -110px; /* Negative Hälfte der Breite des Tooltip-Containers */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.stars {
    display: flex;
    justify-content: left;
    margin-top: 5px;
}

.star {
    cursor: default; /* Zeigt, dass die Sterne nicht interaktiv sind */
    color: white; /* Farbe der Sterne */
    font-size: 12px; /* Größe der Sterne */
    margin: 0 2px; /* Abstand zwischen den Sternen */
}

.filled {
    color: gold; /* Färbt die gefüllten Sterne gold */
}

/* Link-Stil im Tooltip */
.tooltiptext a {
    color: #fff; /* Linkfarbe auf weiß setzen */
    text-decoration: underline; /* Unterstreicht den Link */
    outline: none; /* Entfernt den Fokusrahmen */
}


.tooltiptext a:hover {
    text-decoration: none; /* Keine Unterstreichung beim Hover */
}

/*-----------------------------------------------------------------------------------*/

/*Likert-Skala*/

.label {
    font-size: 14px;
    font-weight: bold;           /* Macht den Text fett */
    padding: 5px;
    text-align: center;          /* Horizontales Zentrieren des Textes */
    width: 18%;                  /* Breite anpassen, um den Platz für den Umbruch zu sichern */ 
    border-radius: 5px;
    word-wrap: break-word;       /* Wortumbruch bei langen Texten */
    white-space: normal;         /* Erlaubt den Textumbruch */
    display: flex;				/* Flexbox-Zentrierung */
    justify-content: center;     /* Horizontale Zentrierung */
    align-items: center;         /* Vertikale Zentrierung */
    margin: 0 2.5px;            /* 5px Abstand: 2.5px links und 2.5px rechts */
}

.label[data-value="0"] { 
    background-color: #d8613c; 
    color: white; 
    font-size: 18px; /* Größere Schriftgröße */
    text-align: left; /* Setzt die Textausrichtung auf links */
    justify-content: flex-start; /* Startet die Flex-Ausrichtung von links */
}
.label[data-value="1"] { background-color: LightGray; color: black; }
.label[data-value="2"] { background-color: #F6E3CE; color: black; }
.label[data-value="3"] { background-color: #F5D0A9; color: black; }
.label[data-value="4"] { background-color: #F7BE81; color: black; }
.label[data-value="5"] { background-color: #FAAC58; color: black; }

.likert-scale {
    width: 100%;
    margin: 20px 0; /* Abstand nach oben und unten */
}

.likert-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.item-with-radio {
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Zentrierung */
    position: relative; /* Für absolute Positionierung der Checkmark */
    margin-top: 15px; /* Abstand zu allen Seiten */
}
/* Item 1 erhält 1/6 des Platzes */
.tooltip {
    width: 23%;  /* Gleiche Breite wie die Labels */
    text-align: left;
    white-space: normal; /* Textumbruch aktivieren */
    font-size: 15px; /* Schriftgröße reduzieren */
}

/* Radio-Buttons erhalten den restlichen Platz (5/6) */
.radio-buttons {
    width: 100%;  /* Radio-Buttons bekommen 66% der Gesamtbreite */
    display: flex;
    justify-content: space-between;
    margin-right: 5%;
    margin-left: 7%;
}

/* Versteckt den Standard-Radio-Button */
.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Stil für den "Checkmark"-Container */
.custom-radio {
    position: relative;
    padding-left: 35px;
    margin-right: 10px;
    cursor: pointer;
    user-select: none;
}

/* Das visuelle Häkchen - Basis-Stil */
.checkmark {
    position: absolute; /* Positionierung relativ zum nächsten positionierten Vorfahren */
    top: 50%; /* 50% von der Höhe des Vorfahren */
    left: 0; /* Abstand von der linken Kante des Vorfahren */
    transform: translateY(-50%); /* Vertikale Zentrierung */
    height: 25px; /* Höhe des Häkchen-Elements */
    width: 25px; /* Breite des Häkchen-Elements */
    background-color: #eee; /* Hintergrundfarbe des Häkchens */
    border-radius: 50%; /* Macht die Ecken des Häkchens rund (hier also ein Kreis) */
    border: 2px solid #ccc; /* Rahmen um das Häkchen */
}

/* Hover-Effekt für den "Checkmark"-Container */
.custom-radio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* Wenn der Radio-Button ausgewählt ist, wird das Häkchen sichtbar */
.custom-radio input:checked ~ .checkmark {
    background-color: #4CAF50; /* Hintergrundfarbe für das Häkchen (grün) */
    border-color: #4CAF50; /* Randfarbe, um das grüne Häkchen deutlicher zu machen */
}

/* Stil für das grüne Häkchen-Symbol */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-radio input:checked ~ .checkmark:after {
    display: block;
}

/* Die Form des Häkchens */
.custom-radio .checkmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}


/* "Technologie Inventar" */

#tile-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.tile {
    display: block; /* oder inline-block */
    padding: 10px; /* oder gewünschte Werte */
    border: 1px solid #ccc; /* Beispiel für Rahmen */
    margin: 5px; /* Beispiel für Abstand */
}

.tile h3, .tile span {
    text-align: center;
    font-weight: bold;
}

.tile:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* "Spinnennetzdiagramm" */

.tab-container3 {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung */
    gap: 20px; /* Optionaler Abstand zwischen den Elementen */
}

.result {
    padding: 10px; /* Innenabstand */
    position: relative; /* Für das Positionieren von bar-container */
    overflow: hidden; /* Verhindert das Überlappen */
}

.bar-container {
    border: 3px solid #000; 
    border-radius: 5px; 
    padding: 0; 
    width: calc(100% - 20%); /* Breite anpassen */
    max-width: 300px; /* Maximale Breite */
    margin: 10px 0; /* Abstand oben und unten */
    overflow: hidden; /* Verhindert das Überlappen */
}

.flex-container {
    display: flex; 
    align-items: center; 
    margin-bottom: 20px; 
    margin: 0 auto; 
    width: 100%;
}

.result2 {
    padding: 10px; /* Innenabstand */
    position: relative; /* Für die eigene Positionierung */
    overflow: hidden; /* Verhindert das Überlappen */
}

.result4 {
    padding: 10px; /* Innenabstand */
    position: relative; /* Für die eigene Positionierung */
    overflow: hidden; /* Verhindert das Überlappen */
}

.chart-container {
    width: 100%; /* Setzt die Breite des Containers auf 100% */
    display: flex; /* Verwendet Flexbox für einfaches Zentrieren */
    justify-content: center; /* Zentriert den Inhalt horizontal */
}

#radarChart {
    width: 50%; /* 50% der Breite des Containers */
    height: auto; /* Die Höhe passt sich entsprechend an */
    display: block; /* Stellt sicher, dass es nicht inline ist */
    margin: 0 auto; /* Zentriert das Diagramm horizontal */
    margin-top: 2%;
    background-color: #f9f9f9;
}

/* "Balkendiagramm" */
#barChart {
    width: 50%; /* 50% der Breite des Containers */
    height: auto; /* Die Höhe passt sich entsprechend an */
    display: block; /* Stellt sicher, dass es nicht inline ist */
    margin: 0 auto; /* Zentriert das Diagramm horizontal */
}


.progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin: 10px 0; /* Abstand oben und unten */
}

.progress-bar {
    width: 0;
    height: 30px;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px; /* Vertikale Zentrierung des Textes */
    color: white;
    transition: width 0.5s; /* Animation für die Breite */
}


/* Container für die Buttons */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    gap: 2vw; /* 1/50 der Breite des Viewports als Abstand zwischen den Buttons */
}

/* Gemeinsame Stile für alle Buttons */
.styled-button {
    background-color: #d8613c;
    color: white;
    border: none;
    padding: 15px;
    font-size: 1.2em;
    cursor: pointer;
    width: 80%;
    max-width: 400px;
    transition: box-shadow 0.3s;
}

/* Optional: Hover-Effekt für alle Buttons */
.styled-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Animation für den Leuchteffekt */
@keyframes glow {
    0% {
        box-shadow: 0 0 3px #d8613c, 0 0 5px #d8613c, 0 0 8px #d8613c; /* Reduziere die Werte */
    }
    100% {
        box-shadow: 0 0 5px #d8613c, 0 0 10px #d8613c, 0 0 15px #d8613c; /* Reduziere die Werte */
    }
}

.glow {
    animation: glow 1s infinite alternate; /* Animation aktivieren */
}

/*Slider?
---------------------------------------------------------------

.likert-scale-slider {
    width: 100%;
}

input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: #ddd;
    outline: none;
    border-radius: 5px;
    margin: 0;
    padding: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #0073aa;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #0073aa;
    border-radius: 50%;
    cursor: pointer;
}
*/

/* ---------------------------------------------------------- */
/* 
Grundlegendes Styling
.likert-scale {
    margin: 20px 0;
}

.item {
    margin-bottom: 20px;
}

.accordion {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f1f1f1;
}

.panel {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fafafa;
    margin-top: 10px;
}

.slider-container {
    margin-top: 10px;
}

.slider {
    width: 100%;
    margin: 5px 0;
}

Zentrierung der Slider-Werte
label {
    display: block;
    text-align: center;
}

 */


/*Reiter*/
.tab-container2 {
	padding-top: 20px; /* Abstand oben hinzufügen */
    width: 100%;
    max-width: 1200px; /* Maximale Breite für größere Bildschirme */
    margin: 0 auto; /* Zentriert den Container auf der Seite */
    display: none;
}

.tabs2 {
    display: flex;
    justify-content: center; /* Zentriert die Tab-Reiter horizontal */
    list-style: none;
    padding: 0;
    margin: 0;
}

.tabs2 li {
    flex: 1; /* Optional: sorgt dafür, dass die Tab-Reiter gleichmäßig verteilt sind */
    text-align: center;
    cursor: pointer;
    background: #f0f0f0;
    margin: 0 5px; /* Fügt einen kleinen Abstand zwischen den Tab-Reitern hinzu */
    transition: background-color 0.3s, transform 0.3s; /* Sanfte Übergänge */
}

.tab-container2 .tabs2 li.active2 {
    background: #d8613c;
    color: white;
    margin: 0 auto; /* Zentriert den Container auf der Seite */
    transform: scale(1.05); /* Vergrößert den aktiven Tab leicht */
}

.tab-container2 .tabs2 li img {
    width: 10vw; /* Breite anpassen */
    max-width: 150px; /* Maximale Breite für größere Bildschirme */
    height: auto; /* Höhe anpassen */
    object-fit: cover;
}

.tab-content2 {
    padding: 20px;
    border: 1px solid #ddd;
}

.tab2 {
    display: none;
}

.tab2.active2 {
    display: block;
}


body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

td {
    text-align: center;
}

input[type="radio"] {
    transform: scale(1.5);
    margin: 10px;
}

form {
    margin: 20px;
}

table, th, td {
    border: 1px solid #dddddd;
}

th {
    text-align: center;
}

/*Buttons*/
.tab-container3{
    display: none;
}


/* Radio Button Styling */
.radio-questions {
    appearance: none; /* Entfernt das Standard-Radio-Button-Design */
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #eee;
    position: relative;
    cursor: pointer;
    outline: none; /* Entfernt die Umrandung beim Fokussieren */
}

/* Styling für den ausgewählten Zustand */
.radio-questions:checked {
    background-color: #4CAF50; /* Grün für den gefüllten Zustand */
    border-color: #4CAF50;
}

/* Styling für das Häkchen */
.radio-questions:checked::before {
    content: '\2713'; /* Unicode für Häkchen */
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hover-Effekt nur auf nicht ausgewählte (unchecked) Radio-Buttons anwenden */
.radio-questions:not(:checked):hover {
    background-color: #ccc;
}

/* Entfernt die Umrandung auch bei Fokus (z.B. über Tastatur) */
.radio-questions:focus {
    outline: none; /* Entfernt den Fokusrahmen */
}


#downloadPDFButton {
    margin-top: 20px; /* Abstand zum RadarChart */
    padding: 10px 15px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    background-color: #d8613c; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Rahmen entfernen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger ändern */
}

#downloadPDFButton:hover {
    background-color: #c8523c; /* Dunklere Farbe beim Hover */
}

#result3 {
    display: none; /* Versteckt den Container */
}