/* Basic Reset (Optional but Recommended) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling (Background and Centering) */
body {
  background-color: #222;
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

/* Logo Container */
.logo-container {
  display: flex;          /* Use flexbox for easy centering */
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically (if needed) */
  padding: 40px;          /* Add some padding around the logo */
  width: 100%;
}

/* Logo Image */
.logo-container img {
  max-width: 400px; /* Adjust the maximum width as needed */
  width: 100%; /* Hinzufügen: Passt das Bild an die Containerbreite an */
  height: auto;      /* Maintain aspect ratio */
  display: block;
}

h3 {
  font-size: 2em;
  font-weight: bold;
  margin: 1.2em 0;
}
/* Termin Box */
.termin-container {
  display: flex;          /* Use flexbox for easy centering */
  justify-content: center; /* Center horizontally */
  /* align-items: stretch; is the default and works well here */
  padding: 0 40px;          /* Add some padding around the logo */
  width: 100%;
  max-width: 450px;       /* Constrain the width to be similar to the logo */
  gap: 1.2em;             /* Use gap for spacing between items */
  margin-bottom: 1.2em;   /* Space below the container, preserves vertical spacing */
}
.termin {
  flex: 1;                /* Make items share space equally */
  display: flex;          /* Use flex to allow the child 'a' to fill the space */
}
.termin a{
  color: White;
  font-weight: bold;
  text-decoration: none;  /* Remove underline from link */
  width: 100%;            /* Make link fill the container's width */
  padding: 2em 1.5em;     /* Move padding to the link */
  border: 1px solid White;/* Move border to the link */
  text-align: center;     /* Center text within the link */
}


/* Boxes Container (Example - you'll need to adjust this based on the previous description) */
.boxes-container {
  display: flex;          /* Example: Horizontal layout */
  flex-wrap: wrap;        /* Allow boxes to wrap to the next line */
  justify-content: center; /* Center the boxes horizontally */
  gap: 20px;              /* Add spacing between boxes */
  padding: 20px;
}

/* Individual Box Styling (Example) */
.box {
  border-radius: 5px;
  width: 70px; /* Example box width */
  height: 70px;
  text-align: center;
}
.box img {
  max-width: 70px;
  height: auto;
  display: block;
  margin: auto;
  }

/* style.css */

.sub-text {
  font-size: 10px;
  text-align: center;
  padding: 2em;
  line-height: 1.8em;
  width: 100%; /* Hinzufügen */
}

.sub-text a {
  color: White;
  font-weight: bold;
}
.impressum {
  text-align: left;
  padding: 2em 5em;
  width: 100%; /* Hinzufügen */
}

/* Media Query für kleinere Bildschirme (z.B. unter 600px) */
@media (max-width: 600px) {
  body {
    justify-content: flex-start; /* Inhalt oben ausrichten, anstatt zu zentrieren */
  }

  .logo-container {
    /* padding: 0 20px 20px 20px; */ /* Alte Version aus Kommentar */
    padding: 15px 20px 20px; /* Oben 15px, Seiten 20px, Unten 20px */
  }

  .logo-container img {
     max-width: 90%;
  }

  .impressum {
     /* padding: 2em 1.5em; */ /* Alte Version aus Kommentar */
     padding: 2em 20px; /* Padding an Logo-Container anpassen (oben/unten 2em, links/rechts 20px) */
  }

  /* Optional: Auch für .sub-text anpassen, falls nötig */
  .sub-text {
    padding: 2em 20px;
  }
}
/* Styles for mobile view to make the Airtable iframe full width and height */
@media (max-width: 768px) { /* Sie können diesen Wert (768px) anpassen, falls nötig */
  .airtable-embed {
    width: 100%;    /* Nimmt die volle verfügbare Breite ein */
    height: 100vh;   /* Nimmt 100% der Ansichtsfensterhöhe ein */
    display: block; /* Stellt sicher, dass das iframe als Blockelement behandelt wird, was für die Größenanpassung vorteilhaft ist */
  }
}