main {
  background-color: #B0BF9B;
}
.aktuellesSection {
  height: 700px;
  background-color: #B0BF9B;
  display: flex;
  flex-direction: column;
}

.top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 20px;
}

.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom {
  display: flex;
  width: 100%;
  height: 400px;
}

.bottom div {
  margin-left: 50px;
  margin-right: 50px;
}

.bottom h1 {
  font-size: 32px;
  margin: 0;
  margin-bottom: 20px;
}



.bottom p {
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.5;
}

.bottom a {
  margin-top: 20px;
  font-size: 34px;
}

.leftBox {
  width: 55%;
}

.rightBox {
  width: 45%;
}

.rightBox img {
  margin: -7px;
  margin-right: 10px;
  height: 40px;
  width: 40px;                            
}

.rightBox a {
  color: black;
  margin: 0;
  margin-left: 45px;
  font-size: 24px;
  line-height: 1.5;
}

.rightBox h2 {
  margin-bottom: 20px;
}
/* Beeinflusst h1 in .center und .leftBox */
h1 {
  font-size: 40px;
}

/* Beeinflusst "AKTUELLES" oben und "STANDORT" rechts */
h2 {
  font-size: 32px;
  color: #AF1A23;
  font-weight: 600;
}

/* Beeinflusst den Untertitel in .center */
h3 {
  font-size: 20px;
  color: #AF1A23;
  margin-top: 10px;
}




.splitBox p{
    margin-left: 30px;
    margin-bottom: 15px;
    font-size: 30px;
}
.splitBox p img {
  margin-right: 5px;
  height: 20px;
  width: 20px;
}
.splitBox {
    padding-top: 50px;
  display: flex;
  width: 100%;
  height: 300px; /* kannst du anpassen */
}
.bla  {
  margin-left: 55px;
}
.top {
 margin: 0;
 margin-bottom: 20px;
}
.textSide {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertikal mittig */
  padding-left: 40px;
}
.imageRow {
  display: flex;
  width: 100%;
  overflow: hidden; /* wichtig fürs Abschneiden */
}
.splitBox h2 {
  margin: 40px;
  color: #AF1A23;
     font-size: 40px;
}
.imageRow img {
  flex: 1; /* alle Bilder gleich breit */
  aspect-ratio: 1 / 1; /* macht sie quadratisch */
  object-fit: cover; /* schneidet statt zu verzerren */
  width: 100%;
}

/* Container für den gesamten Bereich */
.termine-container {
    padding: 60px 20px;
    background-color: transparent; /* Main-Hintergrund bleibt sichtbar */
    display: flex;
    justify-content: center; /* Zentriert den gesamten Inhalt */
}

/* Die Box, die die zwei Monate nebeneinander hält */
.monats-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 80px; /* Großer Abstand in der Mitte, damit sie nicht kleben */
    width: 95%;
    max-width: 1400px; /* Verhindert, dass es auf Riesenmonitoren zu weit auseinander driftet */
}

/* Ein einzelner Monats-Block */
.monats-block {
    flex: 1; /* Beide Blöcke nehmen gleich viel Platz ein */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Titel und Tabelle innerhalb des Blocks */
}

.monat-titel {
    color: #AF1A23;
    text-align: center;
    font-size: 36px;
    margin-bottom: 30px;
}

/* Die Reihe für die Tabelle */
.tabellen-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

table {
    border-collapse: collapse;
    width: 100%; /* Füllt den Platz im monats-block aus */
    max-width: 500px; /* Verhindert, dass die Tabelle zu breit und hässlich wird */
    font-family: 'Delius', cursive;
    background-color: rgba(255, 255, 255, 0.5); /* Optional: leichter weißer Schimmer, damit Text lesbar ist */
}

/* Deine restlichen Tabellen-Styles bleiben gleich */
th {
    background-color: #4E7229;
    color: white;
    padding: 12px;
    text-align: left;
    font-size: 20px;
}

td {
    padding: 10px;
    border-bottom: 1px solid #B0BF9B;
    font-size: 18px;
    color: #333;
}

tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05); /* Dezentes Zebra-Muster */
}

td:first-child {
    font-weight: bold;
    color: #4E7229;
}
.imageRow {
  display: flex;
  width: 100%;
  overflow: hidden; /* wichtig fürs Abschneiden */
}
.imageRow img {
  flex: 1; /* alle Bilder gleich breit */
  aspect-ratio: 1 / 1; /* macht sie quadratisch */
  object-fit: cover; /* schneidet statt zu verzerren */
  width: 100%;
}
/* ===== DESKTOP STYLES (Deine Originale) ===== */
main { background-color: #B0BF9B; }

.aktuellesSection {
  height: 700px;
  background-color: #B0BF9B;
  display: flex;
  flex-direction: column;
}

.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom { display: flex; width: 100%; height: 400px; }
.bottom div { margin-left: 50px; margin-right: 50px; }
.bottom h1 { font-size: 32px; margin-bottom: 20px; }
.bottom p { margin-bottom: 20px; font-size: 24px; line-height: 1.5; }
.leftBox { width: 55%; }
.rightBox { width: 45%; }
.rightBox a { color: black; margin-left: 45px; font-size: 24px; line-height: 1.5; }

.splitBox {
  padding-top: 50px;
  display: flex;
  width: 100%;
  height: 300px;
}
.textSide { width: 50%; display: flex; flex-direction: column; padding-left: 40px; }
.splitBox p { margin-left: 30px; margin-bottom: 15px; font-size: 30px; }

.termine-container {
  padding: 60px 20px;
  display: flex;
  flex-direction: column; /* Standardmäßig untereinander, wenn wrapper fehlt */
  align-items: center;
  gap: 40px;
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.5);
}

th { background-color: #4E7229; color: white; padding: 12px; text-align: left; font-size: 20px; }
td { padding: 10px; border-bottom: 1px solid #B0BF9B; font-size: 18px; }

.imageRow { display: flex; width: 100%; overflow: hidden; }
.imageRow img { flex: 1; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* ===== MEDIA QUERY FÜR HANDYS ===== */
@media (max-width: 768px) {
  /* Aktuelles Bereich */
  .aktuellesSection { height: auto; padding: 30px 15px; }
  .center h1 { font-size: 26px; }
  .center h3 { font-size: 16px; }
  
  .bottom { flex-direction: column; height: auto; }
  .leftBox, .rightBox { width: 100%; margin: 0 !important; text-align: center; }
  .bottom h1 { font-size: 22px; margin-top: 20px; }
  .bottom p { font-size: 17px; }
  .rightBox a { margin-left: 0; font-size: 18px; }
  .rightBox img { height: 25px; width: 25px; }

  /* Angebot im Freiluftcafé */
  .angebot-header { margin-left: 20px !important; font-size: 24px !important; text-align: center; }
  
  .splitBox { flex-direction: column; height: auto; padding-top: 20px; }
  .textSide { width: 100%; padding-left: 20px; }
  .splitBox p { font-size: 18px; margin-left: 10px; margin-bottom: 10px; }
  .splitBox p img { height: 16px; width: 16px; }

  /* Tabellen / Termine */
  .termine-container { padding: 30px 10px; gap: 50px; }
  .monat-titel { font-size: 28px; margin-bottom: 15px; }
  
  table { font-size: 14px; }
  th { padding: 8px; font-size: 16px; }
  td { padding: 8px; font-size: 14px; }

  /* Bildergalerie unten */
  .imageRow { flex-wrap: wrap; }
  .imageRow img { width: 50%; flex: none; }
}