body {
    font-family: 'Baskerville';
    background-color: rgb(246, 246, 239);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Verhindert normales Scrollen */
}

.container {
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Falls Inhalte übereinander gestapelt werden sollen */
    justify-content: center; /* Vertikale Zentrierung */
    align-items: center; /* Horizontale Zentrierung */
    height: 100vh; /* Container nimmt die gesamte Höhe des Viewports ein */
    text-align: center; /* Text innerhalb des Containers zentrieren */
    padding: 3rem; /* Innenabstand */
    box-sizing: border-box; /* Verhindert Überlauf */
}

.container-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem;
    max-width: 950px; /* Begrenzte Breite für bessere Lesbarkeit */
    margin: 0 auto; /* Zentriert den Inhalt */
    
    max-height: 90vh; /* Begrenzung der maximalen Höhe */
    overflow-y: auto; /* Scrollen ermöglichen, falls der Inhalt zu groß ist */
}

/* Chart-Container: Flexbox aktivieren */
#chart {
    display: flex; /* Flexbox-Layout aktivieren */
    justify-content: center; /* Zentriert die Elemente horizontal */
    align-items: center; /* Zentriert die Elemente vertikal (optional) */
    gap: 20px; /* Abstand zwischen den Elementen */
    flex-wrap: nowrap; /* Elemente sollen nicht umbrechen */
    margin-top: 20px;
}

/* Bilder anpassen */
#chart div {
    flex: 1; /* Flexibles Verhalten: verteilt den verfügbaren Platz */
    max-width: 600px; /* Maximale Breite pro Bild-Container */
    text-align: center; /* Zentriert den Inhalt innerhalb des Containers */
}

#chart img {
    width: 100%; /* Passt das Bild an die Containerbreite an */
    height: auto; /* Proportionale Höhe */
    border-radius: 8px; /* Abgerundete Ecken */
    transition: transform 0.3s ease-in-out;
}

#chart img:hover {
    transform: scale(1.05); /* Zoom-Effekt beim Hover */
}

#chart2 img {
    width: 80%; /* Passt das Bild an die Containerbreite an */
    height: auto; /* Proportionale Höhe */
    border-radius: 8px; /* Abgerundete Ecken */
    transition: transform 0.3s ease-in-out;
}

/*-------------Typo---------------------------------*/

h1 {
    color: black;
    text-align: center;
    font-weight: 100;
    font-size: 5rem;;
    margin-bottom: 0.5rem; /* Abstand unter dem Haupttitel verringern */

}

h2 {
    color: black;
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 3.5rem; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    max-width: 1000px; /* Maximale Breite des Textes */
    line-height: 1.1; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 1rem;
}

h3 {
    color: black;
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 1.4rem; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    max-width: 600px; /* Maximale Breite des Textes */
    line-height: 1.9rem; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}

h4 {
    color: black;
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 1.rem; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    max-width: 600px; /* Maximale Breite des Textes */
    line-height: 1.2rem; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}

h5 {   /* nur für den Text "But in the end" */
    color: black;
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 1.4rem; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    max-width: 600px; /* Maximale Breite des Textes */
    line-height: 1.9rem; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 10px;
}

p {
    color: rgba(123, 123, 123, 0.837);
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 0.9em; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    margin-top: 2rem;
    max-width: 400px; /* Maximale Breite des Textes */
    line-height: 1.4; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}

#special-paragraph {
    color: rgba(123, 123, 123, 0.837);
    text-align: left; /* Zentriert den Text */
    font-weight: 100;
    font-size: 0.8em; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    margin-top: 1rem;
    max-width: 700px; /* Maximale Breite des Textes */
    min-width: 150px;
    line-height: 1.5; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}

#special-paragraph-about {
    color: black ;
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 1.2em; /* Überschriftengröße */
    margin: 0 auto; /* Zentriert das Element horizontal */
    margin-top: 1rem;
    max-width: 700px; /* Maximale Breite des Textes */
    line-height: 1.5; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}

.fade-text {
    opacity: 0; /* Unsichtbar zu Beginn */
    transition: opacity 1s ease-in-out;
}

button {
    margin-top: 2em;
    padding: 10px 30px; /* Innenabstand: größer für bessere Proportionen */
    font-size: 1.4rem; /* Schriftgröße */
    font-family: 'Baskerville'; /* Schriftart */
    color: black; /* Textfarbe */
    background-color: transparent; /* Transparenter Hintergrund */
    border: 1px solid black; /* Schwarzer Rand mit 2px Breite */
    border-radius: 10px; /* Runde Ecken für den ovalen Look */
    cursor: pointer; /* Zeiger bei Hover */
    transition: all 0.3s ease; /* Sanfte Übergänge bei Hover */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.03); /* Leichter Schatten */

}

button:hover {
    color: white;
    background-color: rgb(209, 22, 91);
    border: 2px rgb(209, 22, 91);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); /* Leichter Schatten */


}

/*-------------Scroll Pfeil---------------------------------*/

#scroll-arrow {
    width: 30px; /* Passe die Größe an */
    height: auto; /* Höhe proportional */
    position: absolute; /* Position fixieren */
    bottom: 60px; /* Abstand vom unteren Rand */
    right: 50%; /* Zentrieren */
    transform: translateX(50%);
    opacity: 0; /* Unsichtbar zu Beginn */
    transition: opacity 1s ease-in-out; /* Sanftes Einblenden */
    animation: bounce 1.5s infinite; /* Bounce-Animation */
}

/* Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Ausgangsposition */
    }
    50% {
        transform: translateY(10px); /* Bewegung nach unten */
    }
}

#scroll-arrow {
    opacity: 0; /* Unsichtbar zu Beginn */
    transition: opacity 1s ease-in-out; /* Sanftes Einblenden */
}


.footer-container {
    width: 100%;
    position: relative;
    bottom: 0;
    background-color: transparent;
    text-align: center;
    padding: 20px 0;
    color: black;
}

/*
footer a {
    font-size: 1.2rem;
    text-decoration: none;
    color: black;
    font-weight: 400;
}

footer a:hover {
    font-weight: 500; 
    text-decoration: underline; 

}
*/


/*-------------Fortschrittsanzeige---------------------------------*/

#progress-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.progress-dot {
    width: 5px;
    height: 5px;
    background-color: gray;
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    opacity: 0.4; 
}

.progress-dot.active {
    background-color: gray;
    transform: scale(1.5);
    opacity: 0.6;
    
}


/* About Page */
.link {
    margin-top: 6rem;
    font-size: 1.2rem;
    text-decoration: none;
    color: rgba(123, 123, 123, 0.837);
    font-weight: 400;
    transition: all 0.3s ease; /* Weiche Übergänge */

}

.link:hover {
    color: E91E63;
    text-decoration: none;
}



/*-----------------VIDEO--------------------/*

/* Stellt sicher, dass das Video den gesamten Container bedeckt */
.last-container {
    position: relative;
    overflow: hidden;
}

/* Video-Hintergrund */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Volle Bildschirmhöhe */
    object-fit: cover; /* Stellt sicher, dass das Video skaliert */
    z-index: -1; /* Lässt das Video im Hintergrund */
}

/*-----------------Interaktiver Container--------------------*/

#interactive-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; 
    width: 100vw; 
    padding: 20px;
    box-sizing: border-box;
    gap: 0px; 
}


.interaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding-left: 50px;
    padding-top: 0px;
    padding-right: 50px;
    padding-bottom: 0px;
}

#controls {
    display: grid;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    justify-items: center ;
}

#slider {
    margin-top: 10px;
    margin-bottom: 0px;
}

/*-------------------Legend---------------------------*/

/* Controls bleiben unverändert */
.controlsKay {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

/* Wrapper für Grafik und Bild */
#chart-und-legende {
    display: flex;
    justify-content: center; /* Zentriert die Inhalte */
    align-items: center; /* Vertikale Ausrichtung */
    gap: 20px; /* Abstand zwischen Grafik und Legende */
}

#chart2 {
    flex-shrink: 0; /* Verhindert Größenänderung der Grafik */
}

.legend-container {
    display: flex; /* Flexbox aktivieren */
    justify-content: flex-end; /* Inhalt vertikal unten ausrichten */
    align-items: flex-end; /* Optional: Inhalt horizontal zentrieren */
    height: 100%; /* Sicherstellen, dass die Flexbox die volle Höhe des Containers hat */
    padding: 10px; /* Optional: Abstand innerhalb des Containers */
    box-sizing: border-box;
    max-width: 200px;
}

.legend-container img {
    max-width: 150px; /* Passe die maximale Breite des Bildes an */
    height: auto; /* Beibehaltung der Proportionen */
    display: block; /* Entfernt unerwünschte Leerzeichen */
}

/*-------------------RADAR CHART---------------------------*/


#controls {
    display: grid;
    grid-template-columns: 2fr 2fr; /* Inhalt wird in zwei Spalten unterteilt */
    column-gap: 30px;  
    margin-top: 20px;  
}


#dropdown {
    appearance: none; /* Entfernt Standard-Styling */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    font-family: Baskerville !important;
    display: inline-block;
    padding: 10px 30px; /* Innenabstand: größer für bessere Proportionen */
    margin-top: 0em;
    margin-left: 60px;
    text-align: center;
    max-width: 200px;
    max-height: 50px;

    background-color: rgb(246, 246, 239);
    border: 1.5px solid black !important;
    color: black;
    margin-right: 20px;
    font-size: 1.2rem;
    border-radius: 10px; /* Rounded corners */
    grid-column: 1 / 1; /* Erster Text geht über die erste Spalte */
    cursor: pointer;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.03); /* Leichter Schatten */

}



/* Styling der Dropdown-Liste */
/* #dropdown select {
    background-color: #222; 
    color: #3f0cb5; 
    border: none; 
}
*/

/* Styling der Dropdown-Liste */
#dropdown option {
    background-color: #222; /* Dunkler Hintergrund für die Dropdown-Optionen */
    color: #280cb5; /* Weiße Schriftfarbe für die Optionen */
    border: none; /* Entfernt die Umrandung von den Optionen */
}

#dropdown:hover {
    background-color: #444; /* Hintergrundfarbe beim Hover */
    border-color: #ddd; /* Weiße Outline beim Hover */
}

#dropdown:focus {
    background-color: #f0f0f0 !important;
    color: black !important;
}

.slider {
    fill: #888;
    grid-column: 3 / 3; /* Zweiter Text geht in die zweite Spalte */
    
}

.slider .track {
    stroke: #888;
    stroke-width: 8px;
    stroke-linecap: round;
}

.slider .track-inset {
    stroke: #555;
    stroke-width: 8px;
    stroke-linecap: round;
    
}

.slider .track-overlay {
    fill: none;
    pointer-events: stroke;
    stroke-width: 50px;
    stroke: transparent;
    cursor: pointer;
}

.slider .tick line {
    stroke: #fff;
    stroke-width: 1px;
}

.slider .tick text {
    fill: #fff;
    font-size: 12px;
}

.slider .handle {
    fill: #fff;
    stroke: #888;
    stroke-width: 2px;
    cursor: grab;
    r: 8; /* Circle radius for the handle */
}

.slider .label {
    fill: #fff;
    font-size: 14px;
}

#slider text {
    font-family: Baskerville; /* Ändere die Schriftart */
    font-size: 12px; /* Schriftgröße */
    fill: #333; /* Textfarbe */
}

#radarChart {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7); /* Skalierung auf 70% */
    transform-origin: center; /* Verhindert Verzerrungen */
    margin-top: -100px;
    margin-bottom: -80px;
    padding-left: 120px;
}


.controlsKay { 
    display: flex; 
    gap: 12px; 
    justify-content: center; 
    margin: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    align-items: center;
}

/*
select { 
    padding: 8px; 
    min-width: 200px; 
}
*/

.axis-line {
    stroke: #CDCDCD;
    stroke-width: 0.5;
}
.grid-line {
    stroke: #CDCDCD;
    stroke-width: 0.5;
}
.axis-text {
    fill: #666;
    font-size: 14px;
}
.value-text {
    fill: #999;
    font-size: 10px;
}

/*  CHart */

select {
    appearance: none; /* Entfernt das Standard-Styling des Browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: rgb(246, 246, 239);
    border: 1px solid #000000; /* Farbe des Rahmens */
    border-radius: 10px;
    padding: 10px;
    font-size: 1.4rem;
    color: black;
    cursor: pointer;
    outline: none;
    width: 170px;
    text-align: -webkit-center;
    transition: all 0.3s ease-in-out;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.03); /* Leichter Schatten */

    font-family: 'Baskerville'
  }

  #genderSelect {
    width: 93px; /* Schmalere Breite */
    padding: 10px;
    font-size: 1.4rem;

  }

  #ratedValue {
    width: 50px; /* Schmalere Breite */
    padding: 10px;
    font-size: 1.4rem;
  }

  select:hover {
    background-color: #f8e8ee;
  }
  
  select:focus {
    border-color: black;
    box-shadow: 0 0 5px rgba(82, 82, 82, 0.5);
  }
  
  option {
    background: white;
    color: #333;
    padding: 10px;
  }

  label {
    font-family: "Baskerville";
    font-size: 1.4rem;
    color: black;
    margin-right: 9px; /* Abstand zwischen Label und Button/Dropdown */
  }


  /* Link */
  
  a {

    color: rgba(123, 123, 123, 0.837);
    text-align: center; /* Zentriert den Text */
    font-weight: 100;
    font-size: 0.9em; /* Überschriftengröße */
    margin-top: 2em;
    font-family: 'Baskerville'; 
    text-decoration: underline;
    cursor: pointer; 
}

a:hover {
    color: rgb(209, 22, 91);

}


/*
.back-link {
    position: fixed;
    top: 20px; 
    right: 20px; 
    font-size: 16px;
    color: rgba(123, 123, 123, 0.837);; 
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.back-link:hover {
    color: E91E63;
    text-decoration: none;
}

*/

.back-link {
margin-top: 2em;
padding: 10px 30px; /* Innenabstand: größer für bessere Proportionen */
font-size: 1.4rem; /* Schriftgröße */
font-family: 'Baskerville'; /* Schriftart */
color: black; /* Textfarbe */
background-color: transparent; /* Transparenter Hintergrund */
border: 1px solid black; /* Schwarzer Rand mit 2px Breite */
border-radius: 10px; /* Runde Ecken für den ovalen Look */
cursor: pointer; /* Zeiger bei Hover */
transition: all 0.3s ease; /* Sanfte Übergänge bei Hover */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.03); /* Leichter Schatten */

}

.back-link:hover {
color: white;
background-color: rgb(209, 22, 91);
border: 2px rgb(209, 22, 91);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); /* Leichter Schatten */

}

.project-button {
margin-top: 2em;
padding: 10px 30px; /* Innenabstand: größer für bessere Proportionen */
font-size: 1.4rem; /* Schriftgröße */
font-family: 'Baskerville'; /* Schriftart */
text-decoration: none;
color: black; /* Textfarbe */
border: 1px solid black; /* Schwarzer Rand mit 2px Breite */
border-radius: 10px; /* Runde Ecken für den ovalen Look */
cursor: pointer; /* Zeiger bei Hover */
transition: all 0.3s ease; /* Sanfte Übergänge bei Hover */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.03); /* Leichter Schatten */
background-color: rgb(246, 246, 239);
}

.project-button:hover {
    color: white;
    background-color: rgb(209, 22, 91);
    border: 2px rgb(209, 22, 91);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); /* Leichter Schatten */
    
    }