:root {
  --ds: #750037; /* Dunkles Rot */
  --ls: #bf2f7f; /* Helles Rot */
  --ols: #c65d97; /* Noch helleres Rot */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Stellt sicher, dass der Footer unten bleibt */
  background-color: #7500372f; /* Heller Hintergrund */
  color: #333; /* Textfarbe */
  line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
  padding: 20px;
}

h1 {
  text-align: center; /* Zentriert den Haupttitel */
  margin: 20px 0;
  color: var(--ds); /* Verwendung der benutzerdefinierten Farbe */
}

p {
  text-align: center; /* Zentriert den Absatz */
  max-width: 600px; /* Begrenzung der Breite */
  margin: 0 auto 20px; /* Zentriert den Absatz und fügt Abstand hinzu */
}

/* Styling für die Links */
.button-link {
  display: flex;
  flex-direction: column; /* Macht den Inhalt vertikal */
  align-items: center; /* Zentriert den Text horizontal */
  justify-content: center; /* Zentriert den Inhalt vertikal */
  background-color: var(--ds); /* Hintergrundfarbe */
  color: white; /* Textfarbe */
  font-size: 20px; /* Schriftgröße */
  padding: 20px; /* Innenabstand */
  text-align: center; /* Text zentrieren */
  text-decoration: none; /* Entfernt Unterstreichung */
  border-radius: 5px; /* Abgerundete Ecken */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Sanfte Übergänge */
  cursor: pointer; /* Zeigt einen Zeiger an */
  margin: 10px; /* Abstand zwischen den Buttons */
  flex: 1 1 200px; /* Flexibilität der Buttons */
  min-height: 80px; /* Mindesthöhe */
}

.name {
  font-weight: bold; /* Hebt den Namen hervor */
  margin-bottom: 5px; /* Abstand zur Beschreibung */
}

.description {
  font-size: 16px; /* Kleinere Schriftgröße für Beschreibung */
}

.button-link:hover {
  background-color: var(--ls); /* Helle Farbe bei Hover */
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.493); /* Schatteneffekt */
  transform: scale(1.05); /* Leichte Vergrößerung */
}

.button-link:active {
  background-color: var(--ols); /* Noch hellere Farbe bei Klick */
  transform: scale(0.98); /* Leichte Verkleinerung */
}

img {
  border-radius: 10px; /* Abgerundete Ecken */
}

#button-container {
  display: flex; /* Flexbox für die Buttons */
  flex-wrap: wrap; /* Ermöglicht Umbrechen */
  justify-content: center; /* Zentriert die Buttons */
  margin-bottom: 20px; /* Abstand zum nächsten Element */
  max-width: 1000px; /* Maximale Breite des Containers */
  margin-left: auto; /* Zentriert den Container */
  margin-right: auto; /* Zentriert den Container */
  padding: 0 10px; /* Innerer Abstand */
}

footer {
  text-align: center; /* Zentriert den Footer-Text */
  padding: 10px; /* Innenabstand */
  width: 100%; /* Volle Breite */
  margin-top: auto; /* Drückt den Footer nach unten */
}

.od {
  color: var(--ls);
}

.od:hover {
  color: var(--ols);
}
.od:active {
  color: #c65d97ae;
}
.Rahmen {
    position: relative;
    left: 0%;
    margin: 20px auto;
    width: 90%;
    max-width: 800px;
    aspect-ratio: 1.405/1; /*1.405 / 1;*/
    */border: 1px solid #000;/*
}
.Ueberschrift {

  position:absolute;
  padding: 20px;
  left:15%;
  background-image: url(Brief.png);
  /*background-color: #f44336;  Red */
  color: black;
  font-weight: bold; /* normal, bold, lighter, bolder, 100,900*/
  margin-bottom: 15px;
  font-size: 30px; /* same as 'line-height:'*/
  z-index:2000;
}
.text{
color: black;
font-size: 20px;

}
.box {
  margin-left: 15px;
  color: white;
  font-weight: bold; /* normal, bold, lighter, bolder, 100,900*/
  float: right; */left*/
  font-size: 40px;
  line-height: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.Person{
    position:absolute;
    width:100% ;
    height:100%;
    z-index:500;
    object-fit:contain;
    opacity:1;
}
#Sophie {
    position:absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: auto;
    z-index:100;
    object-fit:contain;
    opacity:1;
}
.Hintergrundbild {
    position:absolute;
    width:100% ;
    height:100%;
    z-index:-100;
    object-fit:contain;
    opacity:1;
  }
#ForumBild{
    position:absolute;
    top: 0;
    width:100% ;
    height:100%;
    z-index:-100;
    object-fit:contain;
    opacity:1;
    }
#ring {
	fill: none;
	stroke: gold;
}
#full {
	fill: transparent;
	stroke: gold;
	pointer-events: visibleFill;
}
#full:hover {
	stroke: #337599;
}
rect:hover {
	stroke: #337599;
	stroke-width: .5;
}
/*
#SophieAuswahl:hover
{
fill-opacity: 0.5;
}
#Person2Auswahl:hover
{
fill-opacity: 0.5;
}
#Person3Auswahl:hover
{
fill-opacity: 0.5;
}
#Person4Auswahl:hover
{
fill-opacity: 0.5;
}
#AutorAuswahl:hover
{
fill-opacity: 0.5;
}
*/
.Auswahl:hover
{
fill-opacity:0.5;
}

.Auswahl
{
fill:black;
stroke:var(--ls);
stroke-width:10;
fill-opacity:0;
}

/* Anpassung für den speziellen Bildungsgerechtigkeits-Button */
.special-button {
  background-color: var(--ls); /* Hintergrundfarbe */
  color: white; /* Textfarbe */
  font-size: 21px; /* Größere Schriftgröße */
  padding: 0; /* Kein zusätzliches Padding, um die Höhe eines Buttons zu bewahren */
  border: 2px solid var(--ds); /* Rahmen */
  border-radius: 8px; /* Abgerundete Ecken */
  display: flex; /* Flexbox für die Textzentrierung */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  height: 80px; /* Gleiche Höhe wie die anderen Buttons */
  width: calc(100% - 40px); /* Nimmt die volle Breite ein, minus etwas Padding */
  max-width: 1000px; /* Maximale Breite auf großen Bildschirmen */
  margin: 20px auto; /* Zentrierung mit etwas Abstand */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekte */
}

/* Hover-Effekt für den speziellen Button */
.special-button:hover {
  background-color: var(--ols); /* Hellerer Hintergrund bei Hover */
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.4); /* Schatteneffekt bei Hover */
  transform: scale(1.03); /* Leichte Vergrößerung bei Hover */
}

/* Fokuszustand für Barrierefreiheit */
.special-button:focus {
  outline: 3px solid var(--ls); /* Rand bei Fokus für Barrierefreiheit */
}