* { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: sans-serif;
      background: #1c1c1c;
	  font-family: "Alexandria", serif;
 		font-optical-sizing: auto;
		font-size: clamp(1rem, 1vw, 1.5rem); /* dynamische Basis-Schriftgröße */
    }
h1 {
    font-size: clamp(2rem, 3vw, 4rem); /* passt sich an Bildschirmbreite an */
    margin-bottom: 1rem;
	 text-align: left;
}
a{
	  font-family: "Alexandria", serif;
 		font-optical-sizing: auto;
		font-size: clamp(.8rem, .5vw, 1.0rem); /* dynamische Basis-Schriftgröße */

}
    img {
      max-width: 100%;
      height: auto;
    }
.link-container {
    display: flex;
  flex-wrap: wrap; /* Falls responsive gewünscht */
      gap: 1rem; /* Abstand zwischen den Links */
    justify-content: center; /* zentriert die Links horizontal */
    padding: 1rem;
}

.link-container a {
    text-decoration: none;
     background-color: #e00029;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.link-container a:hover {
    background-color: #8b000f;
}

    .container {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1rem;
	  display: flex;
  flex-wrap: wrap; /* Falls responsive gewünscht */
    }
 .ganze-breite {
 	flex: 0 0 100%;
	padding: 1rem;
	background-color: lightcoral;
	box-sizing: border-box;
	display: flex;
	justify-content: center; /* Horizontal zentrieren */
	align-items: center;     /* Vertikal zentrieren */
	margin: .8rem auto;
	 border-radius: 10px;
    }
.halbe-breite {
  flex: 0 0 50%; /* Je 50% der Breite */
  padding: 1rem;
  background-color: lightcoral;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* Inhalt horizontal zentrieren */
  align-items: center;      /* Inhalt vertikal zentrieren */
}
.halbe-breite-links {
  flex: 0 0 50%; /* Je 50% der Breite */
  padding: 1rem;
  background-color: lightcoral;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* Inhalt horizontal zentrieren */
  align-items: center;      /* Inhalt vertikal zentrieren */
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.halbe-breite-rechts {
  flex: 0 0 50%; /* Je 50% der Breite */
  padding: 1rem;
  background-color: lightcoral;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* Inhalt horizontal zentrieren */
  align-items: center;      /* Inhalt vertikal zentrieren */
  border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 }
    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .col {
      background: #f0f0f0;
      padding: 1rem;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      flex: 1 1 calc(25% - 1rem); /* 4 Spalten */
      display: flex;
      flex-direction: column;
      position: relative;
      min-width: 250px;
    }

    .bild-unten {
      width: 100%;
      object-fit: cover;
      display: none;
      border-radius: 6px;
    }

a.rounded-link {
      width: 50%;
      padding: 1rem;
      background-color: #e00029;
      color: white;
      font-size: 1rem;
      border: none;
      border-radius: 9999px; /* Rund an beiden Seiten */
      cursor: pointer;
	  display:block;
	  text-align: center;
	  text-decoration: none;
    }
a.rounded-link-video {
      width: 90%;
      padding: 1rem;
      background-color: #e00029;
      color: white;
      font-size: 1rem;
      border: none;
      border-radius: 9999px; /* Rund an beiden Seiten */
      cursor: pointer;
	  display:block;
	  text-align: center;
	  margin-top:1rem;
	  text-decoration: none;
    }
    a.rounded-link:hover {
      background-color: #8b000f;
    }
    a.rounded-link-video:hover {
      background-color: #8b000f;
    }
    footer {
      background: #222;
      color: white;
      text-align: center;
      padding: 1rem;
      margin: 2rem;
    }

    .leer {
      height: 100%;
    }
.left {
    text-align: left;
    display: inline-block; /* sorgt dafür, dass der Text nur so breit wie nötig ist */
    width: 100%;            /* oder lasse es weg, je nach gewünschter Wirkung */
    margin: 0 auto;         /* optional: zentriert den Block horizontal */
}
.link-footer{
	float: left;
	width: 32%;
	background-color:#2929A5;
	background-image:linear-gradient( #800000 20%,#A21A1A 95%);
	padding: 2%;
	color:white;
	margin: 3px;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 90%;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border: 0.5px solid #ffffff;
	text-align: center;
	padding: 3px;
}



    /* 2 Spalten bei max 992px */
    @media (max-width: 992px) {
      .col {
        flex: 1 1 calc(50% - 1rem);
      }
    }

    /* 1 Spalte bei max 768px */
    @media (max-width: 768px) {
      .col {
        flex: 1 1 100%;
      }
.halbe-breite-links {
  flex: 0 0 100%; /* Je 50% der Breite */
  padding: 1rem;
  background-color: lightcoral;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* Inhalt horizontal zentrieren */
  align-items: center;      /* Inhalt vertikal zentrieren */
border-radius: 10px; /* alle Ecken abrunden */
	margin: .8rem auto;

}
.halbe-breite-rechts {
  flex: 0 0 100%; /* Je 50% der Breite */
  padding: 1rem;
  background-color: lightcoral;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* Inhalt horizontal zentrieren */
  align-items: center;      /* Inhalt vertikal zentrieren */
	border-radius: 10px; /* alle Ecken abrunden */	 
	}
.link-footer{
	float: left;
	width: 45%;
	background-color:#2929A5;
	background-image:linear-gradient( #800000 20%,#A21A1A 95%);
	padding: 2%;
	color:white;
	margin: 3px;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 90%;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border: 0.5px solid #ffffff;
	text-align: center;
	padding: 3px;
}}