:root {
  --orange: #ffae00;
  --schrift: chocolate;
  --headline: rgb(2, 10, 21);
  --grau: #d0d0d0;
  --hover: rgb(228, 207, 160);
  --hoverfooter: #b0b0b0;
  --headernav: rgb(2, 10, 21);
  --grau-mittel: #ccc;
  --grau-hell: #f0f0f0;
  --footerbg: #efece8db;
  --tabelle-kopf-bg: #f0f0f0;
  --tabelle-grau-hell: #f0f0f0;
  --input-border: #999999;
  --hamburger: #999999;
  --hintergrund-hell-gelb:#fbf6d9;
  --header-height: 40px;
}

@font-face {
  font-family: 'inter-v18-latin';
  src: url(../Schriften/inter-v18-latin/inter-v18-latin-regular.woff2) format('woff2'),
       url(../Schriften/inter-v18-latin/inter-v18-latin-100.woff2) format('woff2'),
       url(../Schriften/inter-v18-latin/inter-v18-latin-400.woff2) format('woff2'),
       url(../Schriften/inter-v18-latin/inter-v18-latin-700.woff2) format('woff2');
  font-weight: 100 700;
  font-style: normal;
}


html {
  font-family: 'inter-v18-latin', Arial, Helvetica, sans-serif;
  /* --------------------------Algemein-------------------------- */
p {
  color: var(--schrift);
  font-size: 1em;
  line-height: 2.5em;
}


h1 {
  font-family: 'inter-v18-latin', Arial, Helvetica, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.0rem); /* skaliert dynamisch */
  font-weight: 300;
  color: var(--headline);
  line-height: 1.0;
}

h2 {
  font-family: 'inter-v18-latin', Arial, Helvetica, sans-serif;
  font-size: clamp(1.2rem, 3.5vw, 1.7rem);
  font-weight: 500;
  color: var(--headline);
  line-height: 1.4;
}

h3 {
  font-family: 'inter-v18-latin', Arial, Helvetica, sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 600;
  color: var(--headline);
  line-height: 1.4;
}


h4 {
  font-family: 'inter-v18-latin', Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 500;
  color: var(--headline);
  line-height: 1.4;
}

section[id] {
  scroll-margin-top: var(--header-height);
}
@media (max-width: 600px) {
  section[id] {
    scroll-margin-top: 40px;
  }
}


}
html, body {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth; /* optional für sanftes Scrollen */
}
body {
  scroll-behavior: smooth;
  overscroll-behavior: none; /* verhindert Überscroll auf Mobilgeräten */
}








section:nth-of-type(odd) {
  background-color: #f7f7f7;
}

section:nth-of-type(even) {
  background-color: #ffffff;
}

@media print {
  section {
    page-break-before: always;
  }
  section:first-of-type {
    page-break-before: auto;
  }
}

/* Abschnitt */
/* Abschnitte passen sich dynamisch an, kein fixed height */
section {
  padding: 60px 20px 80px 20px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  clear: both; /* Falls float verwendet wurde */
}

/* Seite 3 */
#seite3 {
  padding-top: 60px;
  padding-bottom: 150px; /* viel Abstand für Inhalt */
  position: relative;
  min-height: auto; /* Höhe passt sich an */
  overflow: visible;
  clear: both;
}

/* Seite 4 */
#seite4 {
  padding-top: 100px; /* größerer Abstand nach oben */
  padding-bottom: 100px;
  background-color: var(--footerbg);
  position: relative;
  min-height: auto;
  overflow: visible;
  clear: both;
}

/* Andere Seiten (optional) */
#seite2, #seite5 {
  padding-top: 60px;
  padding-bottom: 80px;
}


/* Grundstruktur */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--schrift);
  background-color: #fff;
}

header {
  background-color: var(--orange);
  color: var(--headernav);
  padding: 1rem;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 1rem; /* Optional: damit der Inhalt nicht ganz am Rand klebt */
}

.logo img {
  height: 50px;
  border-radius: 6px;
}

/* Hamburger-Menü immer sichtbar */
.menu-toggle {
  background: none;
  border: none;
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  width: 35px;
  height: 25px;
  margin-right: 120px;
  position: relative;
  z-index: 11000;
}

.menu-toggle span {
  display:block;
  width: 100%;
  height: 3px;
  background-color: var(--hamburger);
  border-radius: 2px;
}
@media (max-width: 480px) {
  .menu-toggle {
    width: 25px;
    height: 20px;
  }

  .menu-toggle span {
    height: 2px;
  }
}


/* Optional – Mobilnavigation sichtbar bei „open“ */
#mobilnav {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: var(--orange);
  z-index: 1000;
  flex-direction: column;
  text-align: left;
}

#mobilnav.open {
  display: flex;
}


/* Hauptinhalt */
main {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  padding-top: var(--header-height);
  padding-bottom: 60px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.5;
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Mobile Navigation */
.mobilnav {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  position: fixed;
  top: 60px;
  left: 2rem;
  max-width: 280px;
  background-color: var(--orange);
  padding: 1rem 1.5rem;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  border-radius: 0 0 8px 8px;
  font-size: 0.6rem;
}

.mobilnav.open {
  display: flex;
}

.mobilnav a {
  color: var(--headernav);
  text-decoration: none;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--headernav);
  border-radius: 4px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.mobilnav a:hover,
.mobilnav a:focus {
  background-color: var(--hover);
}


/* Überschriften */
h1 {
  text-align: center;
  font-size: 2rem;
  color: var(--headline);
  font-weight: 500;
}

/* Bilder und Textblöcke */
.image-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  max-width: 820px;
  margin: 0 auto;
}

.image-row img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.textblock {
  max-width: 820px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: var(--grau-hell);
  border-left: 4px solid var(--orange);
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Grid für Bilder */
.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 820px;
  margin: 2rem auto;
  padding: 0 1rem;
  border-radius: 8px;
  box-sizing: border-box;

  /* Zusatz: feste Zeilenhöhe, damit alle Items in der Höhe gleich sind */
  grid-auto-rows: 200px;
}

/* Bilder */
.image-grid img {
  width: 100%;
  height: 100%;      /* Vollflächig in der Zelle */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: block;
}

/* Video */
.grid-item-video {
  width: 100%;
  height: 100%;       /* Vollflächig in der Zelle */
  object-fit: fill;   /* Verzerrung */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: block;
}





/* Impressum spezifisches Styling */
.seite-impressum main {
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
}
.impressum-textblock section {
  all: unset;
  display: block;
  margin-bottom: 1.5rem;
}

.textblock.impressum-textblock {
  background-color: var(--grau-hell);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 700px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  color: var(--headernav);
}

.textblock.impressum-textblock h1,
.textblock.impressum-textblock h2 {
  color: var(--headline);
  text-align: center;
  margin-bottom: 1rem;
}

.textblock.impressum-textblock p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: center;
}

.textblock.impressum-textblock a {
  color: var(--schrift);
  text-decoration: underline;
}

.textblock.impressum-textblock .quelle {
  font-size: 0.9rem;
  color: #666;

}

.seite-datenschutz main.textblock h1 {
  margin-top: 3rem;  /* Abstand nach oben */
}



/* Footer */
footer {
  background-color: #ccc;
  padding: 1rem;
  color: var(--schrift);
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

footer .footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 820px;
  margin: 0 auto;
}

footer .footer-content img.footer-logo {
  order: -1;
  max-height: 40px;
  margin-right: 1rem;
  border-radius: 4px;
}

footer .footer-content .footer-textnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

footer .footer-content p,
footer .footer-content a {
  margin: 0;
  color: var(--schrift);
  text-decoration: none;
  font-weight: normal;
  transition: color 0.3s ease, background-color 0.3s ease;
}

footer .footer-content a:hover {
  color: var(--hoverfooter);
}

footer .footernav {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0;
}

footer .footernav a {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--schrift);
  border-radius: 4px;
  color: var(--schrift);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

footer .footernav a:hover,
footer .footernav a:focus {
  background-color: var(--hoverfooter);
  color: var(--schrift);
}

/* --- Seite 3 --- */

/* Text-Container (Farbfelder) */
.content-section {
  max-width: 1000px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
  box-sizing: border-box;
}

.farbfeld {
  position: relative;
  border-left: 6px solid var(--orange);
  background-color: var(--grau-hell); /* Fallback für Browser ohne Background-Image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--headline);
  overflow: hidden;
}

/* Halbtransparente Overlay-Ebene für bessere Lesbarkeit */
.farbfeld::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7); /* Weiß mit 70% Deckkraft */
  z-index: 0;
  border-radius: 8px;
}

/* Sicherstellen, dass Text über dem Overlay liegt */
.farbfeld > *,
.farbfeld .textblock {
  position: relative;
  z-index: 1;
}
.farbfeld.schule-bg {
  position: relative;
  background-image: url("medien/schule_hintergrund_2.jpeg"); /* Hier Bildpfad einsetzen */
  background-size: cover;
  background-position: center;
  color: white; /* Text kontrastreich */
}

.farbfeld.strand-bg {
  position: relative;
  background-image: url("medien/strand_hintergrund.jpg");
  background-size: cover;
  background-position: center;
  color: white; /* Text kontrastreich */
}

.farbfeld.ausfluege-bg {
  position: relative;
  background-image: url("medien/malerei.jpg");
  background-size: cover;
  background-position: center;
  color: white;
}

.farbfeld.safari-bg {
  position: relative;
  background-image: url("medien/safari_hintergrund.jpeg");
  background-size: cover;
  background-position: center;
  color: white;
}


.farbfeld h3 {
  margin-top: 0;
}

.farbfeld .content p {
  margin: 0.5rem 0;
  line-height: 1.4;
  font-size: 1rem;
}


/* Bilderreihe */
.bilderreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 1rem auto 1rem auto;
  box-sizing: border-box;
  padding: 0;
}

.flex-item-25 {
  box-sizing: border-box;
}

.flex-item-25 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


/* Responsive Verhalten */
@media (max-width: 600px) {
  .flex-item-25 {
    flex: 1 1 calc(50% - 12px);
  }
}

@media (max-width: 400px) {
  .flex-item-25 {
    flex: 1 1 100%;
  }
}

/* Sektionen über/unter der Bilderreihe */
#seite3 {
  margin-bottom: -6.5rem; /* angenehmer Abstand zur nächsten Section */
}

#seite4 {
  margin-top: -50rem; /* angenehmer Übergang */
}




.farbfeld a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}

.farbfeld a:hover,
.farbfeld a:focus {
  color: var(--hover);
  text-decoration: underline;
}
#seite3 {
  margin-bottom: 0rem !important;
}

#seite4 {
  margin-top: 0 !important;
}
/* Responsive Anpassung */


  .farbfeld,
  .flex-item-25 {
    max-width: 100%;
    flex-basis: 100%;
  }


/* Tabellen Seite 4 mit sichtbarem Zeilenabstand */
table {
  border-collapse: separate;
  border-spacing: 0 10px; /* vertikaler Abstand */
  width: 100%;
  margin-bottom: 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--headline);
}

thead th,
tbody td {
  background-color: var(--hintergrund-hell-gelb); /* jede Zelle hellgelb */
  padding: 0.75rem 1rem;
  text-align: left;
}

thead th {
  font-weight: 400;
  border-bottom: 4px solid var(--grau-mittel); /* Trennung zum Body */
}

tbody tr {
  box-shadow: 0 2px 0 var(--grau-mittel); /* "Linie" unter jeder Zeile */
  border-radius: 8px;
}

tbody td {
  border-top: none;
  transition: background-color 0.3s ease;
  border-radius: 0;
}

tbody tr:hover td {
  background-color: var(--grau-hell); /* Hover-Effekt */
}




/* Formularfelder */
input,
select,
textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 1rem;
  background-color: #fff;
  color: var(--headline);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 4px rgba(255, 174, 0, 0.5);
}


  .farbfeld,
  .flex-item-25 {
    max-width: 100%;
    flex-basis: 100%;
  }

/* Grundgestaltung aller Tabellen */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--headline);
  box-shadow: 0 0 8px rgb(0 0 0 / 0.1);
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

/* Tabellenkopf */
thead {
  background-color: var(--tabelle-kopf-bg);
}

thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--grau-mittel);
  color: var(--headline);
}

/* Tabellenkörper */
tbody tr {
  border-bottom: 1px solid var(--grau-hell);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody td {
  padding: 0.65rem 1rem;
  vertical-align: top;
}

/* Hover-Effekt auf Zeilen */
tbody tr:hover {
  background-color: var(--hoverfooter);
  cursor: default;
}

/* Spezielle Farben für Preise (optional) */
tbody td:nth-child(4) {
  font-weight: 600;
  color: var(--schrift);
}

/* Container für alle Tabellen */
.tabellen-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Überschriften über Tabellen */
.tabelle-wrapper h2 {
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  font-family: 'Inter', sans-serif;
  text-align: center;
}


/* ===== Responsives Verhalten: Hochformat bei kleinen Bildschirmen ===== */

/* --------------------Seite 3----------------- 





/* Responsive: Bei kleinen Bildschirmen (Smartphones) 2 Bilder pro Reihe */


@media (max-width: 600px) {

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    width: 100%;
  }

  thead tr {
    /* Verstecke Kopfzeile */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tbody tr {
    margin-bottom: 1.5rem;
    border: 1px solid var(--grau-mittel);
    border-radius: 8px;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 6px rgb(0 0 0 / 0.1);
  }

  tbody td {
    /* Für jedes Feld "Label: Wert" anzeigen */
    position: relative;
    padding-left: 50%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--grau-hell);
  }

  tbody td:last-child {
    border-bottom: none;
  }

  /* Labels aus den th-Texten via data-attribute anzeigen */
  tbody td:nth-of-type(1):before { content: attr(data-label-name); font-weight: 600; color: var(--orange); position: absolute; left: 1rem; top: 0.65rem; }
  tbody td:nth-of-type(2):before { content: attr(data-label-wo); font-weight: 600; color: var(--orange); position: absolute; left: 1rem; top: 0.65rem; }
  tbody td:nth-of-type(3):before { content: attr(data-label-angebot); font-weight: 600; color: var(--orange); position: absolute; left: 1rem; top: 0.65rem; }
  tbody td:nth-of-type(4):before { content: attr(data-label-preise); font-weight: 600; color: var(--orange); position: absolute; left: 1rem; top: 0.65rem; }

  /* Für Telefonnummern-Tabelle (2 Spalten) */
  tbody td:nth-of-type(1):before { content: attr(data-label-name); }
  tbody td:nth-of-type(2):before { content: attr(data-label-telefonnummer); }

}

/* Zentrierung der Tabelle und Wrapper bei kleinen Bildschirmen */
@media (max-width: 600px) {
  .tabellen-container,
  .tabelle-wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
  }
}
/* === Seite 4: Tabellen und Inhalte === */

/* Tabellen-Wrapper für Seite 4 */
.seite4-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Überschrift für Seite 4 Tabellen */
.seite4-container h2 {
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

/* Tabelle zentriert in Seite 4 */
.seite4-container table {
  margin: 0 auto 2rem;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Abwechselnde Zeilenfarbe in hellem Orange */
.seite4-container tbody tr:nth-child(even) {
  background-color: #ffefd5;
}

/* Hochformat-Layout bei kleinen Bildschirmen für Seite 4 Tabellen */
@media (max-width: 600px) {
  .seite4-container table,
  .seite4-container thead,
  .seite4-container tbody,
  .seite4-container th,
  .seite4-container td,
  .seite4-container tr {
    display: block;
    width: 100%;
  }

  .seite4-container thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .seite4-container tbody tr {
    border: 1px solid var(--grau-mittel);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: white;
    box-shadow: 0 0 6px rgb(0 0 0 / 0.1);
  }

  .seite4-container tbody td {
    padding-left: 50%;
    position: relative;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--grau-hell);
  }

  .seite4-container tbody td:last-child {
    border-bottom: none;
  }

  /* Label-Einblendungen via data-label-Attribute */
  .seite4-container tbody td:nth-of-type(1)::before {
    content: attr(data-label-name);
    font-weight: 600;
    color: var(--orange);
    position: absolute;
    left: 1rem;
    top: 0.65rem;
  }
  .seite4-container tbody td:nth-of-type(2)::before {
    content: attr(data-label-wo);
    font-weight: 600;
    color: var(--orange);
    position: absolute;
    left: 1rem;
    top: 0.65rem;
  }
  .seite4-container tbody td:nth-of-type(3)::before {
    content: attr(data-label-angebot);
    font-weight: 600;
    color: var(--orange);
    position: absolute;
    left: 1rem;
    top: 0.65rem;
  }
  .seite4-container tbody td:nth-of-type(4)::before {
    content: attr(data-label-preise);
    font-weight: 600;
    color: var(--orange);
    position: absolute;
    left: 1rem;
    top: 0.65rem;
  }
}

/* Spezielle Hervorhebung für Preise */
.seite4-container tbody td:nth-child(4) {
  font-weight: 600;
  color: var(--schrift);
}

/* Optional: Responsive Schriftgröße in Tabellen */
@media (max-width: 400px) {
  .seite4-container table {
    font-size: 0.9rem;
  }
}

/* Für größere Bildschirme: Tabelle wieder normal darstellen */
@media (min-width: 601px) {
  .seite4-container table,
  .seite4-container thead,
  .seite4-container tbody,
  .seite4-container th,
  .seite4-container td,
  .seite4-container tr {
    display: table-row-group;
    width: auto;
  }

  .seite4-container thead tr {
    position: static;
  }

  .seite4-container tbody tr {
    border: none;
    padding: 0;
    margin-bottom: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .seite4-container tbody td {
    display: table-cell;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--grau-mittel);
    text-align: left;
    position: static;
    padding-left: 1rem;
  }

  .seite4-container tbody td::before {
    content: none;
  }
}
/* === Seite 5: Watoto Projekt === */

.seite5 {
  background-color: var(--grau-hell);
  color: var(--headline);
  font-family: 'Inter', sans-serif;
  padding-bottom: 3rem;
}

.seite5 main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.seite5 h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--orange);
  text-align: center;
  margin-bottom: 2rem;
}

.watoto-flexcontainer {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.watoto-textbox {
  flex: 1 1 400px;
  background-color: white;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
  line-height: 1.5;
  color: var(--headline);
}

.watoto-textbox h2 {
  color: var(--orange);
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.watoto-textbox p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.watoto-textbox strong {
  color: var(--schrift);
}

.button-watoto {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1.4rem;
  background-color: var(--orange);
  color: white;
  font-weight: 700;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  box-shadow: 0 3px 6px rgb(255 174 0 / 0.6);
}

.button-watoto:hover,
.button-watoto:focus {
  background-color: var(--hover);
  color: var(--headline);
  outline: none;
  box-shadow: 0 3px 6px var(--hover);
}

.watoto-bildcontainer {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
}

.watoto-bildcontainer img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

/* Responsive Anpassungen */

@media (max-width: 800px) {
  .watoto-flexcontainer {
    flex-direction: column;
    align-items: center;
  }

  .watoto-textbox,
  .watoto-bildcontainer {
    flex: 1 1 100%;
    max-width: 600px;
  }
}

@media (max-width: 400px) {
  .seite5 h1 {
    font-size: 1.8rem;
  }

  .watoto-textbox h2 {
    font-size: 1.3rem;
  }

  .watoto-textbox p {
    font-size: 0.9rem;
  }

  .button-watoto {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}
/* Impressum Seite - Hauptbereich */
body.seite-impressum {
  font-family: 'Inter', sans-serif;
  color: var(--headline);
  background-color: var(--grau-hell);
  margin: 0;
  padding: 0;
}

main {
  max-width: 900px;
  margin: 2rem auto 4rem auto;
  padding: 0 1rem;
}

.textblock {
  background-color: white;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
  border-radius: 8px;
  line-height: 1.6;
}

.textblock h1,
.textblock h2 {
  font-weight: 700;
  color: var(--headline);
  margin-bottom: 1rem;
}

.textblock h1 {
  font-size: 2.25rem;
  margin-top: 0;
}

.textblock h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
}

.textblock p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--schrift);
}

.textblock a {
  color: var(--orange);
  text-decoration: none;
  transition: color 0.3s ease;
}

.textblock a:hover,
.textblock a:focus {
  color: var(--hover);
  text-decoration: underline;
}

/* Grid für größere Bildschirme */
.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  grid-auto-rows: 200px; /* Einheitliche Höhe */
}

/* Bilder */
.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: block;
}

/* Video */
.image-grid video {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Video wird verzerrt, um Höhe 1:1 zu matchen */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: block;
}

/* Für Tablets und kleinere Geräte */
@media (max-width: 1024px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
}

/* Für Smartphones */
@media (max-width: 600px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 10px;
  }
}

/* Medienverhalten ab 601px – Fallbacks für größere Screens */
@media (min-width: 601px) {
  .image-grid img,
  .image-grid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-grid video {
    object-fit: fill;
  }
}