/* ALLGEMEINE GRUNDLAGEN */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Proxima Nova', sans-serif;
  background-color: #00008b;
  color: white;
  min-height: 100vh;
}

/* ------------------------------------------------------------------- */
/* 🚀 DYNAMISCHES LAYOUT: CSS GRID (HAUPTSTRUKTUR) */
/* ------------------------------------------------------------------- */

#main-wrapper {
  display: grid;
  /* Eine Spalte für alle Inhalte */
  grid-template-columns: 1fr;
  /* Zeilen: Header (auto), Description (1fr nimmt Rest), Footer (auto) */
  grid-template-rows: auto 1fr auto; 
  width: 100%;
  height: 100vh; 
  /* Abstand vom Viewport-Rand */
  padding: 80px;
  /* Vertikaler Abstand zwischen den Hauptblöcken (Header, Description, Footer) */
  gap: 80px 10px; 
  box-sizing: border-box;
  
  /* ✅ Zentriert alle Grid-Items (Header, Description, Footer) horizontal */
  justify-items: center; 
}

/* ------------------------------------------------------------------- */
/* 🚀 FLEXBOX FÜR DEN UMBRUCH (HEADER) */
/* ------------------------------------------------------------------- */

#header-nav {
  display: flex;
  /* Titel links, Menü rechts */
  justify-content: space-between; 
  align-items: center;
  /* ✅ Erlaubt Umbruch: Titel und Menü springen untereinander, wenn der Platz nicht reicht */
  flex-wrap: wrap; 
  gap: 20px 10px; 
  grid-area: 1 / 1 / 2 / 2;
  /* Sorgt dafür, dass justify-content: space-between die volle Breite nutzt */
  width: 100%;
}

/* ------------------------------------------------------------------- */
/* GRID-POSITIONIERUNG DER ÜBRIGEN ELEMENTE */
/* ------------------------------------------------------------------- */

#description {
  grid-area: 2 / 1 / 3 / 2;
  /* Klebt an der Unterseite der 1fr-Zeile */
  align-self: end;
  /* Behält die Breite, wird aber zentriert */
  max-width: 80%;
  justify-self: center;
}

#footer {
  grid-area: 3 / 1 / 4 / 2;
  align-self: end;
  justify-self: center;
}

/* Backlink bleibt fixed */
#backlink {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
}


/* ------------------------------------------------------------------- */
/* GEMEINSAME VISUELLE STILE (KÄSTEN) */
/* ------------------------------------------------------------------- */

/* 1. STILE FÜR CONTAINER MIT INNEN-LINKS (Title & Menu) */
/* Bekommen KEIN Padding, da die inneren Links es liefern. */
#title-container, #menu-container { 
  background-color: rgba(0, 0, 139, 0.85); 
  border-radius: 10px; 
  font-size: 1.5em; 
  font-weight: normal; 
  z-index: 99; 
  padding: 0; 
}

/* 2. STILE FÜR TEXT-CONTAINER (Description & Footer) */
/* Bekommen PADDING, da der Inhalt reiner Text ist. */
#description, #footer {
    background-color: rgba(0, 0, 139, 0.85); 
    border-radius: 10px; 
    font-size: 1.5em; 
    font-weight: normal; 
    z-index: 99; 
    /* ✅ Padding für Description und Footer */
    padding: 15px 20px; 
}

/* ------------------------------------------------------------------- */
/* GEMEINSAME INHALTS-STILE (LINKS & COPYRIGHT) */
/* ------------------------------------------------------------------- */

/* 1. LINKS (bekommen Padding für den Hover-Hintergrund) */
.nav-box-style a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  display: inline-block; 
  /* ✅ Padding für den vollständigen weißen Hover-Bereich */
  padding: 15px 20px; 
  transition: color 0.3s, background-color 0.3s; 
}

/* Menu Container muss Flex sein, damit die Links nebeneinander stehen */
#menu-container {
    display: flex;
    /* ✅ Erlaubt Umbruch INNERHALB der Menüleiste, wenn die Links nicht passen */
    flex-wrap: wrap; 
    gap: 10px;
}

/* Year Span Fix (für konsistente Schriftgröße) */
.nav-box-style.copyright-info span#year {
    font-size: 1em; 
    font-weight: normal; 
}

/* Hover-Stile */
.nav-box-style a:hover {
  background-color: #ffffff; 
  color: rgb(0, 0, 139);     
  border-radius: 10px; 
}

/* ------------------------------------------------------------------- */
/* 🚀 NEU: IFRAME-STYLING UND POSITIONIERUNG */
/* ------------------------------------------------------------------- */

#content-frame {
    /* Nimmt den Platz zwischen Header und Footer ein (die 1fr-Zeile im Grid) */
    grid-area: 2 / 1 / 3 / 2;
    width: 100%;
    /* Setze Höhe auf 100% des zugewiesenen Grid-Bereichs */
    height: 100%; 
    z-index: 50; 
    
    /* Starte mit display: none, damit das Iframe leer ist, bis ein Link geklickt wird. */
    /* Du kannst auch später per JavaScript die 'hidden' Klasse toggeln. */
    display: none; 
    
    /* Optional: Hintergrundfarbe für das Iframe selbst, falls der Inhalt nicht geladen wird. */
    background-color: rgba(0, 0, 139, 0.85); 
    border-radius: 10px;
    padding: 15px 20px; 
    border: none;
    
    /* 🚨 WICHTIG: Stellt sicher, dass das Iframe zentriert wird (wenn die Breite reduziert wird) */
    justify-self: center;
    align-self: start;
}

/* ------------------------------------------------------------------- */
/* ANPASSUNG DER DESCRIPTION */
/* ------------------------------------------------------------------- */

#description {
    /* Wenn das Iframe sichtbar ist, soll die Description (die darunter liegt) 
       nicht interaktiv sein oder sollte ausgeblendet werden. 
       Für den Anfang lassen wir es, aber wir müssen daran denken, 
       dass es sich im selben Grid-Bereich wie das Iframe befindet. */
    
    /* Setze z-index der Description niedriger als das Iframe (50) */
    z-index: 40; 
}

/* ------------------------------------------------------------------- */
/* Galerie-Container (mit Grid für ein schönes Layout) */
/* ------------------------------------------------------------------- */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Anpassbare Spalten */
    gap: 20px;
    padding: 20px 0;
}

/* ------------------------------------------------------------------- */
/* 🚀 GALERIE HOVER-EFFEKT: BLAUES OVERLAY & WEISSE BESCHREIBUNG */
/* ------------------------------------------------------------------- */

/* 1. Der Container für jedes Bild */
.gallery-item {
    position: relative; /* Ermöglicht absolute Positionierung der Beschreibung darin */
    overflow: hidden;   /* Schneidet alles ab, was über den Rand ragt */
    border-radius: 8px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease; /* Sanfter Zoom-Effekt beim Hover */
}

/* 2. Das blaue transparente Overlay (erscheint beim Hover) */
.gallery-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 139, 0.1); /* Blau mit 10% Deckkraft */
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* 3. Die Beschreibung (figcaption) */
.gallery-item figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%); /* Zentriert, startet etwas tiefer für Animation */
    width: 80%;
    
    /* Deine gewünschten Farben */
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #00008b;           /* Blaue Schrift */
    
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
    
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: all 0.4s ease;
    z-index: 2; /* Liegt über dem blauen Overlay */
}

/* ------------------------------------------------------------------- */
/* 🚀 HOVER-EFFEKTE */
/* ------------------------------------------------------------------- */

/* Blaues Overlay einblenden */
.gallery-item:hover::after {
    opacity: 1;
}

/* Beschreibung einblenden und nach oben gleiten lassen */
.gallery-item:hover figcaption {
    opacity: 1;
    transform: translate(-50%, -50%); /* Bewegt sich zur Mitte */
}

/* Optional: Bild leicht vergrößern */
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Lade-Anzeige */
.loader {
    text-align: center;
    padding: 20px;
    font-size: 1.2em;
    color: rgb(0, 0, 139);
    display: none; /* Standardmäßig ausgeblendet */
}

/* Das Modal (Hintergrund) */
#image-modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed; 
    z-index: 1000; /* Muss über allem anderen liegen */
    padding-top: 50px; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 139, 0.85); /* Schwarzer, leicht transparenter Hintergrund */
    
    /* Für das Zentrieren des Inhalts */
    align-items: center; 
    justify-content: center;
    flex-direction: column;

    /* 🚀 NEU: Mauszeiger ändern, um Schließen zu signalisieren */
    cursor: pointer;
}

/* Modal Inhalt / Das Bild */
#modal-image {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    height: auto;
    max-height: 80vh; /* Maximale Höhe des sichtbaren Bereichs */

    /* 🚀 KORREKTUR: Mauszeiger über dem Bild auf Standard zurücksetzen */
    cursor: default;
}

/* Beschreibung / Caption */
#modal-caption {
    margin: 10px auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ffffff;
    padding: 10px 0;
}

/* Schließen-Button */
.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #ffffff;
}

/* Ändert den Cursor, wenn er über einem anklickbaren Galerieteil schwebt */
.gallery-item {
    cursor: pointer; /* Zeigt eine Hand, um Klickbarkeit zu signalisieren */
}

/* ------------------------------------------------------------------- */
/* 📱 RESPONSIVE KORREKTUREN FÜR MENÜ (HAMBURGER) */
/* ------------------------------------------------------------------- */

/* Standard-Ansicht (Großer Bildschirm): */

/* 1. Hamburger-Button standardmäßig verstecken */
#menu-toggle {
    display: none;
    background-color: rgba(0, 0, 139, 0.85); 
    border: none;
    color: white;
    font-size: 1.5em; 
    cursor: pointer;
    z-index: 100; 
    border-radius: 10px; 
    padding: 15px 20px; 
    font-weight: bold; 
    align-items: center;
    justify-content: center;
}

/* 2. Menü-Container standardmäßig anzeigen (für große Bildschirme) */
#menu-container {
    /* 🚨 KORRIGIERT: Muss auf Flex gesetzt sein, da es auf großen Bildschirmen sichtbar ist */
    display: flex; 
    flex-direction: row; /* Links nebeneinander */
    width: auto;
    order: 0; 
}


/* ------------------------------------------------------------------- */
/* MEDIA QUERY: KLEINE BILDSCHIRME (z.B. unter 800px) */
/* ------------------------------------------------------------------- */

@media (max-width: 800px) {
    
    /* Hamburger-Button anzeigen */
    #menu-toggle {
        display: flex; 
        order: 2; 
        /* Match den Hover-Effekt, wenn es die einzige Box ist */
        background-color: rgba(0, 0, 139, 0.85); 
        color: #ffffff;     
    }
    
    /* Hover-Effekt für das Hamburger-Icon */
    #menu-toggle:hover {
        background-color: #ffffff; 
        color: rgb(0, 0, 139);     
    }

    /* Menü verstecken */
    #menu-container {
        width: 100%; 
        order: 3; 
        /* 🚨 KORRIGIERT: Menü auf kleinen Bildschirmen standardmäßig verstecken */
        display: none; 
        /* Links untereinander für Mobil */
        flex-direction: column; 
        gap: 5px;
    }
    
    /* Klasse für sichtbares Menü (durch JS getoggelt) */
    .menu-active {
        display: flex !important; 
    }
}