/* -------------------------------------------------
   GLOBAL / BASIC
   ------------------------------------------------- */
html,
body {
  height: 100%;               /* für den Sticky‑Footer */
  margin: 0;
}

/* Flex‑Container: Header → Content → Footer */
body {
  display: flex;
  flex-direction: column;
}

html {
    font-family: 'Krub', Arial, Helvetica, sans-serif;
}

/* -------------------------------------------------
   HEADER (Navigation)
   ------------------------------------------------- */
nav.main-nav {
  /* Abstand zum oberen Rand des Fensters */
  margin-top: 1.5rem;          /* du kannst den Wert anpassen */
  margin-bottom: 1rem;        /* Abstand zum Content */
  align-self: center;         /* zentriert das <nav> horizontal */
}

/* Menü‑Styling – Buttons mit abgerundeten Rechtecken */
nav.main-nav ul.menu {
  display: flex;               /* nebeneinander */
  gap: 0.8rem;                 /* Abstand zwischen den Buttons */
  list-style: none;            /* keine Aufzählungszeichen */
  padding: 0;
  margin: 0;
}

/* Einzelner Menü‑Eintrag */
nav.main-nav ul.menu li a {
  display: inline-block;
  padding: 0.5rem 1rem;        /* Innenabstand */
  font-weight: bold;           /* Fett */
  color: #fff;                 /* Textfarbe */
  background-color: #000000;   /* Hintergrundfarbe – nach Wunsch ändern */
  border-radius: 0.5rem;       /* Abgerundete Ecken */
  text-decoration: none;       /* Keine Unterstreichung */
  transition: background-color 0.2s ease;
}

/* Hover‑Effekt für die Menü‑Buttons */
nav.main-nav ul.menu li a:hover {
  background-color: #240d58;   /* dunkleres Blau beim Überfahren */
}

/* -------------------------------------------------
   PICTURE (Hauptbereich)
   ------------------------------------------------- */
   
#picture {
  position: static;
  margin: 0 auto;               /* zentriert innerhalb des Flex‑Containers */
  max-width: 520px;             /* Breite wie zuvor */
  padding: 2rem 1rem;           /* Innenabstand, damit es nicht an den Rändern klebt */
  text-align: center;
  line-height: 1;
  flex: 0 auto;               /* nimmt den verfügbaren Platz ein → Footer nach unten schieben */
}

/* Avatar‑Bild */
.avatar {
  border-radius: 50%;
  width: 150px;
}


/* -------------------------------------------------
   CONTENT (Hauptbereich)
   ------------------------------------------------- */
#content {
  position: static;
  margin: 0 auto;               /* zentriert innerhalb des Flex‑Containers */
  max-width: 520px;             /* Breite wie zuvor */
  padding: 2rem 1rem;           /* Innenabstand, damit es nicht an den Rändern klebt */
  text-align: left;
  line-height: 1.35;
  flex: 1 0 auto;               /* nimmt den verfügbaren Platz ein → Footer nach unten schieben */
}

/* Avatar‑Bild */
.avatar {
  border-radius: 50%;
  width: 150px;
}

/* -------------------------------------------------
   ICONS (Social‑Media‑Links)
   ------------------------------------------------- */
.icons {
  list-style-type: none;
  font-size: xx-large;
  padding: 0;
  display: flex;
  justify-content: space-between;
  width: 80%;
  max-width: 320px;
  margin: 1em auto;
}

.icons li {
  width: 42px;
}

/* Standard‑Icon‑Farbe */
.icons a {
  color: black;
}

/* Hover‑Farbe für Icons */
.icons a:hover {
  color: #240d58;
}

/* Custom‑Icon‑Styling – für dein PNG‑Bild */
.icons img.custom-icon {
  width: 1.5em;               /* gleiche Höhe wie Font‑Awesome‑Icons */
  height: auto;
  vertical-align: middle;
}

/* -------------------------------------------------
   FOOTER (Sticky Footer)
   ------------------------------------------------- */
.site-footer {
  flex-shrink: 0;                /* verhindert, dass er schrumpft */
  background-color: #f2f2f2;     /* hellgrauer Hintergrund – nach Wunsch ändern */
  text-align: center;
  padding: 0.8rem;
  font-size: 0.75rem;            /* kleinerer Text */
  color: #555;
}

/* Footer‑Links */
.site-footer .footer-links a {
  color: #555;
  text-decoration: underline;
  font-size: 0.85rem;            /* etwas größer als normaler Fließtext, aber immer noch klein */
}

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

/* -------------------------------------------------
   GLOBAL LINK STYLE (optional – bereits in deinem Original)
   ------------------------------------------------- */
a {
  text-decoration: none;
  color: #240d58;
}

a:hover {
  color: #240d58;
}

/* -------------------------------------------------
   RESPONSIVE FEINABSTIMMUNG (optional)
   ------------------------------------------------- */
@media (max-width: 480px) {
  nav.main-nav ul.menu {
    flex-wrap: wrap;          /* Zeilenumbruch bei wenig Platz */
    justify-content: center;
  }

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

/* -------------------------------------------------
   GALLERY – 2 Spalten, unabhängige Abstände
   ------------------------------------------------- */
.gallery {
  display: grid;
  /* exakt 2 Spalten – bei zu wenig Platz scrollt horizontal */
  grid-template-columns: repeat(1, 1fr);

  /* Abstand zwischen den Zeilen (vertikal) */
  row-gap: 0rem;

  /* Abstand zwischen den Spalten (horizontal) – kleiner, damit die Bilder größer werden */
  column-gap: 0rem;

  margin: 0rem 0;               /* Abstand zum übrigen Seiteninhalt */
}

/* Einzelnes Bild‑Item */
.gallery-item {
  background: #fdfdfd;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0px 0px rgba(0,0,0,0.1);
  position: relative;           /* wichtig für das Overlay */
  padding: 0.25rem;             /* kleiner Innenabstand – kann weggelassen werden */
}

/* Bild selbst – füllt die komplette Zelle */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: default;              /* kein Link‑Cursor */
}

/* -------------------------------------------------
   CAPTION – erst beim Hover sichtbar
   ------------------------------------------------- */

/* Grundzustand: unsichtbar, leicht transparent hinter dem Bild */
.gallery-item figcaption {
  position: absolute;
  bottom: 0;                     /* unten am Bild ausrichten */
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);   /* halbtransparentes Schwarz */
  color: #fff;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.2;
  opacity: 0;                    /* unsichtbar */
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;          /* verhindert, dass das Caption selbst den Hover „unterbricht“ */
}

/* Beim Überfahren des Bild‑Containers wird das Caption eingeblendet */
.gallery-item:hover figcaption {
  opacity: 1;                    /* sichtbar */
}

/* Optional: leichtes Aufblitzen, wenn du das Caption etwas nach oben schieben willst */
.gallery-item:hover figcaption {
  transform: translateY(0);
}