/* Gestaltung der Website */
body {
  /* anpassbar */
    font-family: Arial, sans-serif;
    line-height: 1.6; /* Zeilenabstand für alle Elemente im body */
    margin: 0px;
    padding: 0px;
    background-color: #f4f4f4;
}

header {
  /* anpassbar */
    background-color: #0a5c0a;
    text-align: center;
    padding: 20px 20px;
    width: 100%;
    margin-bottom: 40px; /* Abstand nur nach unten */
  
  /* so lassen */
    box-sizing: border-box;
}

h1 {
  /* anpassbar */
    color: #fff;
    margin: 0;
    margin-bottom: 10px; 
}

/* Navbar Styling */
.navbar {
  /* anpassbar */
    background-color: #333;
    padding: 10px;
  
  /* so lassen */
    overflow: hidden;

}

.navbar ul {
  /* anpassbar */
    margin: 0;
    list-style: none; /* keine Aufzählungszeichen (Punkte) vor den Wörtern */
    text-align: center;
    
}

.navbar li {
  /* anpassbar */
    display: inline; /* ohne inline: ELemente untereinander */
    margin: 0 15px; /* fügt horizontal Abstand zwischen die Elemente ein */
}

.navbar a {
    text-decoration: none; /* entfernt die unterstrichene Linie bei Links */
    color: #fff;
    font-size: 18px;
}

.navbar a:hover {
    color: #0a5c0a; /* Farbe, die die Wörter beim darüber-Hovern bekommen */
}

/* main-Abschnitt bearbeiten */
main {
  /* anpassbar */
    padding: 20px;
    padding-top: 5px; /* Abstand nach oben nur 5px */
    margin: 20px auto; /* auto sorgt dafür, dass der Text mittig dargestellt wird */
    background-color: #fff;
    border-radius: 8px; /* rundet die Ecken ab */
    box-shadow: 0px /* Verschiebung des Schattens nach links oder rechts */
                0px /* Verschiebung des Schattens nach oben oder unten */
                10px /* Unschärfe des Schattens */ 
                rgba(0, 0, 0, 0.2); /* die ersten 3 Zahlen ergeben die Farbe des Schatten, die vierte                                Zahl die Transparenz */
  
  /* so lassen */
    max-width: 800px;
}

h2 {
  /* anpassbar */
    color: #333;
    
}

h3 {
  /* anpassbar */
    color: #555;
}

p {
  /* anpassbar */
    color: #666;
}

/* Galerie-Styling */
.gallery {
  /* anpassbar */
    gap: 10px; /* Abstand zwischen den Bildern */
    justify-content: center; /* Ausrichtung der Bilder zentriert - Alternativen: "flex-start" für linksbündig, "flex-end" für rechtsbündig */
  /* so lassen */
    display: flex;
    flex-wrap: wrap;
}

.gallery img {
  /* anpassbar */
    width: 150px; /* Breite der Bilder */
    height: auto; /* Höhe proportional zur Breite, alternativ einen Pixelwert angeben */
    cursor: pointer; /* Ändert Mauszeiger zu der "Klick-Hand", womit man etwas anklicken kann */
    border: 2px solid #ddd;
    border-radius: 5px; /* Abrundung der Ecken */
    transition: transform 0.3s; /* Dauer der Animation, wenn über das Bild gehovert wird */
}

.gallery img:hover {
  /* anpassbar */
    transform: scale(1.05); /* vergrößert das Bild beim hovern um 5% */
    border-color: #0a5c0a; /* Farbe des Randes um das Bild, wenn über das Bild gehovert wird */ 
}

footer {
  /* anpassbar */
    text-align: center;
    padding: 10px;
    background-color: #333;
    width: 100%;
    margin-top: 40px; /* Abstand nach oben*/
    font-size: 15px;
  
  /* so lassen */
    box-sizing: border-box;
    position: relative;
}

footer p {
  /* anpassbar */
    color: #999;
}


/* Verschiedene Klassen, die ihr einbinden könnt: */
/*1. Buttons - wenn ihr einen Link zu einer Website habt oder zu einem Abschnitt auf eurer Website verlinken wollt, könnt ihr den Link als Button darstellen, auf den man klicken kann. Das geht indem ihr class="button" in den Link (<a>) schreibt. */
.button {
  /* anpassbar */
    padding: 10px 20px; /* erste Zahl: Abstand oben/unten, zweite Zahl: Abstand links/rechts */
    font-size: 16px;
    color: white;
    background-color: #007BFF;
    border: none; /* kein Rahmen - alternativ: z.B. "1px solid black" - schwarzer Rahmen */
    border-radius: 5px; /* Abrundung Ecken */
    cursor: pointer; /* Ändert Mauszeiger zu der "Klick-Hand", womit man etwas anklicken kann */
    text-align: center;
    text-decoration: none; /* kein Unterstreichung des Textes - alternativ: z.B: "underline" */
    
  /* so lassen */
    display: inline-block;
  }

/* Hover-Effekt, wenn man mit der Maus über den Button fährt */
.button:hover {
  /* anpassbar */
    background-color: #0056b3;
  }

/*2. Cards - stellen Text in einem schönen Rahmen dar. Um ein Element als Card darzustellen class="card" in das HTML-Element schreiben.*/
.card {
 /* anpassbar */
  border: 1px solid #ddd;
  border-radius: 8px; /* Abrundung Ecken */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */
  padding: 20px;
  background-color: #fff;
  margin: 10px;
  max-width: 800px; /* maximale Breite */
}

.card-title {
 /* anpassbar */
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-text {
 /* anpassbar */
  font-size: 16px;
  color: #555;
}

/*3. Info-Boxen - kann eine besondere Information enthalten. Um sie anzuwenden class="info-box info" bzw. class="info-box warning" in das HTML-Element schreiben */

/* nur grobe Einstellungen, nicht als Klasse verwenden */
.info-box {
  padding: 15px;
  border-radius: 5px; /* Abrundung Ecken */
  margin: 10px 0;
}

/* als Klasse für eine normale besondere Info benutzen */
.info-box.info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* als Klasse für eine Warnung nutzen */
.info-box.warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}












/* Modal-Styling - NICHT RELEVANT*/
.modal { /* das Modal-Fenster */
    display: none; /* Versteckt, bis es aktiviert wird */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content { /* das Bild */
    display: block;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
    border-radius: 8px;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover,
.close:focus {
    color: #ccc;
}

#caption {
    margin-top: 15px;
    text-align: center;
    color: #ccc;
    font-size: 1.2em;
}