/* =====================================================
   GRUNDEINSTELLUNGEN FÜR DIE GANZE SEITE
   ===================================================== */

/* Seite soll immer die volle Bildschirmhöhe nutzen,
   damit der Footer unten bleibt (Sticky Footer) */
html,
body {
  height: 100%;
  margin: 0;
}

/* body wird zur Spalte: Header oben, Content in der Mitte,
   Footer unten */
body {
  display: flex;
  flex-direction: column;
}

/* Standard-Schriftart für die ganze Seite */
html {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Verhindert horizontales Scrollen / Überlaufen von Inhalten
   über den Bildschirmrand hinaus */
html,
body {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* box-sizing wird an alle Elemente vererbt,
   damit Padding/Border nicht die Breite sprengen */
*,
*::before,
*::after {
  box-sizing: inherit;
}


/* =====================================================
   NAVIGATION (HEADER)
   ===================================================== */

/* Abstand der Navigation zum oberen Rand und zum Inhalt,
   außerdem horizontal zentriert */
nav.main-nav {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  align-self: center;
}

/* Menü-Liste: Einträge nebeneinander statt untereinander */
nav.main-nav ul.menu {
  display: flex;
  gap: 0.8rem;          /* Abstand zwischen den Buttons */
  list-style: none;     /* keine Punkte vor den Listeneinträgen */
  padding: 0;
  margin: 0;
}

/* Optik der einzelnen Menü-Buttons */
nav.main-nav ul.menu li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #000000;
  border-radius: 0.5rem;      /* abgerundete Ecken */
  text-decoration: none;      /* keine Unterstreichung */
  transition: background-color 0.2s ease;  /* sanfter Farbwechsel */
}

/* Farbe der Buttons beim Überfahren mit der Maus */
nav.main-nav ul.menu li a:hover {
  background-color: #00646e;
}

/* Auf schmalen Bildschirmen (z. B. Smartphone) dürfen die
   Menü-Buttons in die nächste Zeile umbrechen */
@media (max-width: 480px) {
  nav.main-nav ul.menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  nav.main-nav ul.menu li a {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}


/* =====================================================
   PROFILBILD (Bereich #picture)
   ===================================================== */

#picture {
  margin: 0 auto;         /* horizontal zentriert */
  max-width: 520px;       /* maximale Breite des Bereichs */
  padding: 1rem 1rem;     /* Innenabstand, Bild klebt nicht am Rand */
  text-align: center;
  line-height: 1;
  flex: 0 auto;           /* nimmt nur so viel Platz wie nötig */
}

/* Rundes Profilbild (Avatar) – gilt für #picture UND #content,
   da .avatar an beiden Stellen benutzt werden kann */
.avatar {
  border-radius: 50%;    /* macht das Bild rund */
  width: 180px;          /* feste Bildbreite */
}


/* =====================================================
   HAUPTINHALT (Bereich #content)
   ===================================================== */

#content {
  margin: 0 auto;         /* horizontal zentriert */
  max-width: 520px;       /* maximale Breite des Textbereichs */
  padding: 1rem 1rem;     /* Innenabstand zu den Rändern */
  text-align: left;
  line-height: 1.35;
  flex: 1 0 auto;         /* füllt restlichen Platz, drückt Footer nach unten */
}


/* =====================================================
   SOCIAL-MEDIA-ICONS
   ===================================================== */

/* Reihe von Icons, gleichmäßig verteilt */
.icons {
  list-style-type: none;
  font-size: xx-large;
  padding: 0;
  display: flex;
  justify-content: space-between;
  width: 90%;
  max-width: 320px;
  margin: 1em auto;
}

/* Feste Breite pro Icon, damit der Abstand gleichmäßig bleibt */
.icons li {
  width: 42px;
}

/* Standardfarbe der Icon-Links */
.icons a {
  color: black;
}

/* Farbe beim Überfahren mit der Maus */
.icons a:hover {
  color: #00646e;
}

/* Eigene PNG/WebP-Icons genauso groß wie Font-Awesome-Icons anzeigen */
.icons img.custom-icon {
  width: 1.5em;
  height: auto;
  vertical-align: middle;
}


/* =====================================================
   FOOTER (Sticky Footer, bleibt unten)
   ===================================================== */

.site-footer {
  flex-shrink: 0;              /* Footer wird nie zusammengedrückt */
  background-color: #2e2e2e;
  text-align: center;
  padding: 0.8rem;
  font-size: 0.75rem;
  color: #848484;
}

/* Links im Footer (z. B. "Impressum") */
.site-footer .footer-links a {
  color: #848484;
  text-decoration: underline;
  font-size: 0.85rem;
}

.site-footer .footer-links a:hover {
  color: #4e4d4d;
}


/* =====================================================
   ALLGEMEINE LINK-FARBEN (für Links außerhalb von Footer/Icons)
   ===================================================== */

a {
  text-decoration: none;
  color: #00646e;
}

a:hover {
  color: #00646e;
}


/* =====================================================
   BILDERGALERIE
   ===================================================== */

/* Grundgerüst der Galerie: aktuell 1 Spalte
   (Wert in repeat() bei Bedarf erhöhen für mehr Spalten) */
.gallery {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 0rem;       /* Abstand zwischen den Zeilen */
  column-gap: 0rem;    /* Abstand zwischen den Spalten */
  margin: 0rem 0;
}

/* Einzelne Kachel in der Galerie */
.gallery-item {
  background: #fdfdfd;
  border-radius: 0.5rem;
  overflow: hidden;         /* schneidet Bildecken sauber ab */
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  position: relative;       /* nötig, damit die Bildunterschrift (Caption) korrekt positioniert wird */
  padding: 0.25rem;
}

/* Bild füllt die komplette Kachel aus */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: default;
}

/* Bildunterschrift: standardmäßig unsichtbar,
   liegt halbtransparent über dem unteren Bildrand */
.gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.2;
  opacity: 0;                          /* unsichtbar im Normalzustand */
  transition: opacity 0.2s ease-in-out; /* weiches Ein-/Ausblenden */
  pointer-events: none;                /* Caption blockiert den Hover nicht */
}

/* Bildunterschrift erscheint erst, wenn man mit der Maus
   über das Bild fährt */
.gallery-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   TERMINE-SEITE
   ===================================================== */

/* Container, der alle Termin-Kästen enthält */
.termine-container {
  width: 100%;
  max-width: 520px;
  margin: 1.5rem auto 0;
}

/* Einzelner Termin-Kasten: Datum links, Info rechts */
.termin-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  background-color: #f2f2f2;
  border-radius: 1rem;        /* abgerundete Ecken */
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;        /* Abstand zum nächsten Kasten */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  width: 100%;
}

/* Datum links im Kasten, mit Trennlinie zum Text */
.termin-datum {
  flex: 0 0 90px;      /* feste Breite: schrumpft/wächst nicht, egal wie lang das Datum ist */
  width: 90px;         /* Breite an den längsten Eintrag (z. B. "14. September") angepasst */
  font-weight: bold;
  font-size: 1.15rem;
  color: #00646e;
  text-align: center;
  border-right: 2px solid #00646e;
  padding-right: 1rem;
}

/* Beschreibungstext rechts im Kasten */
.termin-info {
  flex: 1 1 auto;      /* nimmt den restlichen Platz ein */
  min-width: 0;        /* verhindert, dass langer Text den Kasten sprengt */
  text-align: left;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Auf kleinen Bildschirmen (Smartphone): etwas kompakter */
@media (max-width: 480px) {
  .termin-box {
    padding: 0.8rem 1rem;
    gap: 0.7rem;
  }

  .termin-datum {
    flex: 0 0 75px;      /* etwas schmalere feste Breite auf dem Smartphone */
    width: 75px;
    font-size: 1rem;
    padding-right: 0.7rem;
  }

  .termin-info {
    font-size: 0.9rem;
  }
}