/* --- DESIGN-FIXES --- */
body {
    font-size: 1.1em; 
}

/* Hintergrund, Abstände und Rundungen für Header und Footer */
header, footer {
    background: rgba(150, 150, 150, 0.1); 
    padding: 15px 20px;
    border-radius: 8px;
}

/* --- HEADER LAYOUT --- */
header { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    /* align-items: flex-end sorgt dafür, dass die Elemente unten am Rand kleben */
    align-items: flex-end; 
    gap: 15px;
    margin-bottom: 10px; 
}

header h1 {
    margin: 0;
    margin-bottom: 12px; /* Schafft etwas Abstand zur Navigation darunter */
}

/* --- NAVIGATION ALS BUTTONS --- */
header nav {
    display: flex;
    gap: 10px; /* Abstand zwischen den Buttons */
    flex-wrap: wrap;
}

header nav a {
    text-decoration: none;
    background-color: rgba(130, 150, 170, 0.2); 
    color: inherit;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    
    /* --- NEU: EINHEITLICHE GRÖSSE --- */
    display: inline-block; /* Erlaubt es, eine feste Breite zu vergeben */
    width: 120px;          /* Die gewünschte Breite für alle Buttons */
    text-align: center;    /* Zentriert den Text im Button */
    box-sizing: border-box; /* Verhindert, dass das Padding den Button breiter macht */
}
header nav a:hover {
    /* Beim Darüberfahren mit der Maus wird der Button etwas kräftiger */
    background-color: rgba(130, 150, 170, 0.4); 
}


/* --- SUCHLEISTE & LUPENSYMBOL --- */
.search-form { 
    margin: 0; 
}

/* Ein Wrapper (Verpackung) um Eingabefeld und Button, um beides übereinanderzulegen */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrapper input[type="text"] { 
    margin: 0; 
    padding: 6px 35px 6px 15px; /* Rechts (35px) extra Platz für die Lupe gelassen! */
    width: 140px; 
    border-radius: 20px; /* Macht das Suchfeld etwas runder */
}

/* Der Button wird unsichtbar gemacht und frei schwebend (absolute) im Suchfeld platziert */
.search-wrapper button { 
    position: absolute;
    right: 10px; /* 10 Pixel vom rechten Rand des Eingabefeldes entfernt */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6; /* Lupe ist leicht transparent */
    transition: opacity 0.2s ease;
}

.search-wrapper button:hover {
    opacity: 1; /* Lupe wird voll sichtbar, wenn man mit der Maus darüberfährt */
}

.search-icon {
    width: 18px;
    height: 18px;
}

/* --- FOOTER --- */
footer {
    background: rgba(150, 150, 150, 0.1); 
    padding: 5px 20px; /* Deutlich weniger Abstand oben und unten (5px statt 15px) */
    border-radius: 8px;
    margin-top: 30px; /* Schiebt den Footer etwas weiter vom Textbereich (main) weg */
    text-align: center;
    font-size: 0.85em; /* Macht die Schrift im Footer etwas kleiner und dezenter */
}

/* Entfernt den unsichtbaren Standard-Abstand des Absatzes (<p>) im Footer */
footer p {
    margin: 5px 0; 
}
main img {
    max-width: 300px;
    height: auto;
    border-radius: 5px;
    margin: 10px 15px 10px 0;
    float: left;
}
/* --- STARTSEITEN EINLEITUNG --- */
.homepage-intro {
    background: rgba(150, 150, 150, 0.05); /* Ganz dezent dunkler Hintergrund */
    /* border-left: 4px solid rgba(130, 150, 170, 0.6); Schicke farbige Linie links (passend zu den Buttons) */
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Du kannst sogar die Abstände der Überschriften in der Box kontrollieren */
.homepage-intro h2 {
    margin-top: 0;
    color: inherit;
}
.homepage-intro h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}
#lightbox {
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 9999; 
    text-align: center; 
    padding-top: 5vh; 
    cursor: pointer;
}

#lightbox-img {
    max-width: 90%; 
    max-height: 90vh; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}