/* Grundlayout */

body {

  background-color: #000;

  color: #fff;

  font-family: 'Segoe UI', sans-serif;

  margin: 0;

  padding: 20px;

  text-align: center;

}

h1, h2 {

  color: #e3873a;

  margin-bottom: 20px;

}

nav {

  margin-bottom: 20px;

}

nav a {

  background-color: #e3873a;

  color: #000;

  text-decoration: none;

  font-weight: bold;

  padding: 8px 12px;

  margin: 0 5px;

  border-radius: 6px;

  transition: background 0.3s ease;

  display: inline-block;

}

nav a:hover {

  background-color: #ffa85e;

}

/* Galerie */

.galerie {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

}

.bild {

  background-color: #111;

  padding: 10px;

  border-radius: 8px;

  width: 220px;

  box-shadow: 0 0 8px rgba(227,135,58,0.3);

  transition: transform 0.3s ease;

}

.bild:hover {

  transform: scale(1.04);

}

.bild img {

  width: 100%;

  height: auto;

  object-fit: cover;

  border-radius: 6px;

  border: 2px solid #444;

}

.loeschen {

  margin-top: 10px;

  background-color: #e3873a;

  color: #000;

  font-weight: bold;

  border: none;

  padding: 8px 12px;

  border-radius: 6px;

  cursor: pointer;

  transition: background 0.3s ease;

}

.loeschen:hover {

  background-color: #ffa85e;

}

/* Formulare & Eingabefelder */

form {

  background-color: #111;

  padding: 25px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(227,135,58,0.3);

  margin: 30px auto;

  max-width: 400px;

  width: 90%;

}

input, select, button {

  width: 100%;

  padding: 10px;

  margin-top: 10px;

  background: #1a1a1a;

  border: 1px solid #444;

  color: #fff;

  border-radius: 6px;

  font-size: 1em;

}

button {

  background-color: #e3873a;

  color: #000;

  font-weight: bold;

  border: none;

  cursor: pointer;

  transition: background 0.3s ease;

}

button:hover {

  background-color: #ffa85e;

}

.meldung {

  color: #ffa85e;

  font-weight: bold;

  margin-top: 15px;

}

/* Slideshow */

.slideshow-container {

  position: relative;

  max-width: 600px;

  margin: 40px auto;

  overflow: hidden;

}

.slide {

  display: none;

}

.slide img {

  width: 100%;

  border-radius: 8px;

}

.caption {

  background-color: rgba(0,0,0,0.7);

  color: #e3873a;

  padding: 8px;

  font-weight: bold;

}

/* Responsive Design */

@media (max-width: 768px) {

  .galerie {

    flex-direction: column;

    align-items: center;

  }

  .bild {

    width: 90%;

  }

  form {

    width: 95%;

  }

  nav a {

    display: block;

    margin: 10px auto;

  }

}

@media (max-width: 480px) {

  h1 {

    font-size: 1.6em;

  }

  .caption {

    font-size: 0.9em;

  }

  button, input, select {

    font-size: 0.95em;

  }

}