body {
    font-family: 'FT88-Regular', Arial, Helvetica;
    background-color: black;
    color: white;
}
.about {
  background-color: black; /* Schwarzer Hintergrund */
  color: white; /* Weißer Text */
}

a {
text-decoration: underline;
  text-underline-offset: 5px;
  color: white;
}



a:hover {
  color: blue;

}

@media screen and (max-width:39.9999rem) {
.about_text {
font-size: 10px;
margin:1rem;
}}
@media screen and (min-width:40rem) {
.about_text  {
font-size: 15px;
margin:1rem;
}}
@media screen and (min-width:64rem) {
.about_text  {
font-size: 20px;
margin:1rem;
}}



@media screen and (max-width:39.9999rem) {
.impressum_text {
  padding-top:4rem;
font-size: 10px;
margin:1rem;
}}

@media screen and (min-width:40rem) {
.impressum_text  {
    padding-top:4rem;
font-size: 12px;
margin:1rem;
}}

@media screen and (min-width:64rem) {
.impressum_text {
    padding-top:4rem;
font-size: 12px;
margin:1rem;
}}









.header-content {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Elemente untereinander anordnen */
  align-items: center; /* Inhalte horizontal zentrieren */
  justify-content: center; /* Inhalte vertikal zentrieren (falls nötig) */
  text-align: center; /* Text zentrieren */
  padding: 1rem;
  min-height: 150px;
}

.header-content .site-logo {
  width: auto; /* Automatische Breite */
  align-items: center;
  margin-bottom: 0.5rem; 
}

.header-content .site-name {
  font-family: 'FT88-Regular', Arial, Helvetica;
  position: relative;
}



@media screen and (max-width:39.9999rem) {
.header-content {
  height: 10rem;
}
.header-content .site-name {
  font-size: 17px;
}
.header-content .site-logo {
  height: 7rem; 
}}


@media screen and (min-width:40rem) {
.header-content  {
  height: 15rem;
}
.header-content .site-name {
    font-size: 20px;
      padding: 2rem;
}
.header-content .site-logo {
  height: 10rem; 
  padding-top: 1rem;
}}


@media screen and (min-width:64rem) {
.header-content  {
  height: 25rem;
}
.header-content .site-name {
  font-size: 27px;
}
.header-content .site-logo {
  height: 17rem; /* Höhe des Logos */
  padding-top: 1rem;
}}



.header-content-about {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Elemente untereinander anordnen */
  align-items: center; /* Inhalte horizontal zentrieren */
  justify-content: center; /* Inhalte vertikal zentrieren (falls nötig) */
  text-align: center; /* Text zentrieren */
  padding: 1rem;
  background-color: ; /* Hintergrundfarbe */
  min-height: 70px;
}



.round-button {
  position: absolute; /* Positioniert den Button unabhängig vom Layout */
  top: 2rem; /* Abstand vom oberen Rand */
  right: 2rem; /* Abstand vom rechten Rand */
  width: 2rem; /* Breite des Buttons */
  height: 2rem; /* Höhe des Buttons (gleicht Breite für Rundung aus) */
  border-radius: 50%; /* Macht den Button rund */
  background-color: white; /* Hintergrundfarbe */
  transition:  all 500ms ease;
}

.round-button:hover {
-webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
}


.round-button-about {
  position: absolute; /* Positioniert den Button unabhängig vom Layout */
  top: 2rem; /* Abstand vom oberen Rand */
  right: 2rem; /* Abstand vom rechten Rand */
  width: 2rem; /* Breite des Buttons */
  height: 2rem; /* Höhe des Buttons (gleicht Breite für Rundung aus) */
  border-radius: 50%; /* Macht den Button rund */
  background-color: white; /* Hintergrundfarbe */
  transition:  all 500ms ease;
}

.round-button-about:hover {
  -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
}








.footer {
	font-size: 12px;
  margin-top: 2rem;
  text-align: center; /* Zentrierter Text */
  height: 30px;
}

.footer a {
    color: black; /* schwarze Links */
}

.footer a:hover {
color: red;
}



#container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - 132px);
  width: 100%;
}




@media screen and (max-width:39.9999rem) {
.woche_text {
	display:grid;
	grid-template-columns: 1fr;
	gap:0rem;
	padding-bottom: 1rem;
	font-size: 13.5px;
	padding-top: 1rem;
}}
@media screen and (min-width:40rem) {
.woche_text  {
	display:grid;
	grid-template-columns: 1fr 1fr ;
	gap:2rem 1.5rem;
	padding-bottom: 1rem;
	padding-top: 2rem;
}}
@media screen and (min-width:64rem) {
.woche_text  {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:3rem 2rem;
	padding-bottom: 1rem;
	padding-top: 3rem;
}}

/* Erste Spalte */
.woche_text :first-child {
  text-align: left; /* Optional, wenn es explizit sein soll */
}

/* Zweite Spalte */
.woche_text :last-child {
  text-align: right;
}




@media screen and (max-width:39.9999rem) {
.woche_text :last-child {
  text-align: left;
}}
@media screen and (min-width:40rem) {
.woche_text :last-child {
  text-align: right;
}}
@media screen and (min-width:64rem) {
.woche_text :last-child {
  text-align: right;
}}





.layout-about {
  padding-right: 1rem;
  padding-left: 1rem;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}



.grid-container-standard {
  padding-right: 1rem;
  padding-left: 1rem;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}



@media screen and (max-width:39.9999rem) {
.grid-container-woche {
	display:grid;
	grid-template-columns: 1fr;
	gap:1.5rem;
}}
@media screen and (min-width:40rem) {
.grid-container-woche  {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:1.5rem 2rem;
}}
@media screen and (min-width:64rem) {
.grid-container-woche  {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:2rem 3rem;
}}