body {
    font-family: Oswald, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #005454;
    text-align: center; /* Zentriert den Text auf kleineren Bildschirmen */
}

.dsgvo { font-family: 'Arial', sans serif; }

.container {
    font-family: Oswald, sans-serif;
    max-width: 1200px; /* Maximale Breite für den Inhalt */
    margin: 0 auto; /* Zentriert den Container */
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.container2 {
    font-family: Arial, sans-serif;
    text-align: left;
    max-width: 1200px; /* Maximale Breite für den Inhalt */
    margin: 0 auto; /* Zentriert den Container */
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.footer {
    font-family: Oswald, sans-serif;
    max-width: 1200px; /* Maximale Breite für den Inhalt */
    margin: 0 auto; /* Zentriert den Container */
}

.responsive-image {
    font-family: Oswald, sans-serif;
    max-width: 100%; /* Bild wird maximal so breit wie der Container (max 1200px) */
    height: auto;    /* Höhe passt sich automatisch an die Breite an */
    display: block;  /* Verhindert zusätzlichen Abstand unter dem Bild */
    margin: 0 auto 20px auto; /* Zentriert das Bild und gibt Abstand nach unten */
    border-radius: 5px;
}

.responsive-image-bu {
    font-family: Oswald, sans-serif;
    max-width: 100%; /* Bild wird maximal so breit wie der Container (max 1200px) */
    height: auto;    /* Höhe passt sich automatisch an die Breite an */
    display: block;  /* Verhindert zusätzlichen Abstand unter dem Bild */
    margin: 0 auto 0px auto; /* Zentriert das Bild und gibt Abstand nach unten */
    border-radius: 5px;
}

.image-text {
    font-family: Oswald, sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
    padding: 0 15px; /* Kleiner Rand für Text auf sehr kleinen Bildschirmen */
}

/* Media Query für kleinere Bildschirme (optional, für noch bessere Anpassung) */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    .image-text {
       font-family: Oswald, sans-serif;
       font-size: 1em;
    }
}

/* Für alle normalen Links */
a {
    font-family: Oswald, sans-serif;  
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #005454;        /* Setzt die Farbe auf ein leuchtendes Blau (Beispiel) */
}

/* Optional: Für Links, die bereits besucht wurden */
a:visited {
      font-family: Oswald, sans-serif;
      color: #005454;        /* Andere Farbe für besuchte Links (z.B. Lila) */
}

/* Optional: Für Links, wenn man mit der Maus darüberfährt (Hover) */
a:hover {
  font-family: Oswald, sans-serif;
  color: #005454;        /* Farbe ändert sich zu Tomatenrot beim Hovern */
  text-decoration: underline; /* Optional: Unterstreichung beim Hovern anzeigen */
}

/* Optional: Für Links, die gerade fokussiert sind (z.B. per Tab-Taste) */
a:focus {
  font-family: Oswald, sans-serif;
  color: #2f7474;        /* Farbe ändert sich zu Grün bei Fokus */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Oswald, sans-serif; }



/* Grundstil für den Button */
.hamburger-menu-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  padding: 0;
}

/* Die Linien des Burgers */
.bar {
  width: 100%;
  height: 3px;
  background-color: #333;
  transition: transform 0.3s ease-in-out; /* Für die Animation */
}

/* Das Menü, standardmäßig versteckt */
.menu-links {
  display: none; /* Wird erst durch JS oder :target eingeblendet */
  position: absolute;
  max-width: 300px; /* Maximale Breite für den Inhalt */
  top: 40px;
  margin: 0 auto; /* Zentriert den Container */
  width: 100%;
    padding: 10px;
    background-color: #fdfdfd;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.menu-links a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}

/* Das Menü, standardmäßig versteckt */
.menu2-links {
  display: none; /* Wird erst durch JS oder :target eingeblendet */
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #f9f9f9;
  padding: 20px;
}

.menu2-links a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}


/* Aktivklasse (wird per JavaScript hinzugefügt) */
.hamburger-menu-button.active .bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger-menu-button.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu-button.active .bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

.hamburger-menu-button.active + .menu-links {
  display: block;
}

/* Breite auf max. 1200 Pixel festlegen */
hr.small {
  max-width: 1200px; /* Maximale Breite für den Inhalt */
  margin: 0 auto;
  border: none;
  height: 2px; /* Höhe der Linie */
  background-color: #005454; /* Farbe der Linie */
}

.dsgvo {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
.h1 {
    font-family: Oswald;
  }

 .h2 {
    font-family: Oswald;
  }

ul {
  list-style-type: none;
  padding: 0; /* Entfernt oft auch den linken Einzug */
  margin: 0;
}

.image-container {
  position: relative; /* Container für die absolute Positionierung */
  display: inline-block; /* Passt sich der Bildgröße an */
}

.image-container img {
  display: block; /* Verhindert Abstände unter dem Bild */
  max-width: 100%;
}

.copyright {
  font-family: Arial, sans serif;
  font-size: 10px;
}

dialog:modal {
  padding: 2rem;
  transition: opacity 0.5s;
  opacity: 1;
  border: none;
  background: white;

  &::backdrop {
    backdrop-filter: blur(3px);
    background: rgba(0,0,0,0.5);
    transition: opacity 0.5s;
    opacity: 1;
  }

  @starting-style {
    opacity: 0;

    &::backdrop {
      opacity: 0;
    }
  }
}

dialog {
    width: 500px;        /* Breite festlegen */
    max-width: 90%;      /* Responsiv machen */
    border: none;        /* Standard-Rahmen entfernen */
    outline: none;       /* Fokus-Linie entfernen */
    padding: 20px;
}

dialog1 {
    width: 500px;        /* Breite festlegen */
    max-width: 90%;      /* Responsiv machen */
    border: none;        /* Standard-Rahmen entfernen */
    outline: none;       /* Fokus-Linie entfernen */
    padding: 20px;
}


dialog2 {
    width: 500px;        /* Breite festlegen */
    max-width: 90%;      /* Responsiv machen */
    border: none;        /* Standard-Rahmen entfernen */
    outline: none;       /* Fokus-Linie entfernen */
    padding: 20px;
}

dialog3 {
    width: 500px;        /* Breite festlegen */
    max-width: 90%;      /* Responsiv machen */
    border: none;        /* Standard-Rahmen entfernen */
    outline: none;       /* Fokus-Linie entfernen */
    padding: 20px;
}