/* === Grundlayout === */

body {

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

  background: linear-gradient(to right, #111, #333);

  color: #f0f0f0;

  margin: 0;

  padding: 20px;

}

/* === Überschriften === */

h1, h2, h3 {

  color: #ffcc00;

  text-align: center;

  margin-bottom: 20px;

}

/* === Login-Link oben rechts === */

.login-link {

  text-align: right;

  margin-bottom: 10px;

}

.login-link a {

  font-size: 0.9em;

  color: #ffcc00;

  text-decoration: none;

  padding: 6px 12px;

  border: 1px solid #ffcc00;

  border-radius: 4px;

  background-color: #222;

  transition: background-color 0.3s ease;

}

.login-link a:hover {

  background-color: #444;

}

/* === Navigation (optional) === */

nav {

  text-align: center;

  margin-bottom: 30px;

}

nav a {

  color: #ffcc00;

  text-decoration: none;

  margin: 0 15px;

  font-weight: bold;

  transition: color 0.3s ease;

}

nav a:hover {

  color: #e6b800;

}

/* === Werbung-Boxen === */

.werbung-box {

  background-color: #222;

  border-radius: 8px;

  padding: 20px;

  margin: 20px auto;

  max-width: 600px;

  box-shadow: 0 0 10px #000;

  text-align: center;

}

.werbung-box img {

  max-width: 100%;

  height: auto;

  margin-bottom: 15px;

  border-radius: 8px;

  box-shadow: 0 0 10px #000;

}

.werbung-box h3 {

  font-size: 1.3em;

  color: #ffcc00;

  margin-bottom: 10px;

}

.werbung-box p {

  font-size: 1em;

  color: #ddd;

  margin-bottom: 10px;

}

.werbung-box a.button {

  display: inline-block;

  margin-top: 10px;

  padding: 10px 20px;

  background-color: #ffcc00;

  color: #000;

  text-decoration: none;

  border-radius: 4px;

  font-weight: bold;

  transition: background-color 0.3s ease;

}

.werbung-box a.button:hover {

  background-color: #e6b800;

}

/* === Formularfelder (für index.php) === */

form {

  max-width: 600px;

  margin: 0 auto;

  background-color: #222;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 0 10px #000;

}

form label {

  display: block;

  margin-bottom: 8px;

  color: #ffcc00;

  font-weight: bold;

}

form input[type="text"],

form input[type="url"],

form input[type="file"],

form textarea {

  width: 100%;

  padding: 10px;

  margin-bottom: 15px;

  border: 1px solid #444;

  border-radius: 4px;

  background-color: #111;

  color: #f0f0f0;

}

form input[type="submit"] {

  background-color: #ffcc00;

  color: #000;

  border: none;

  padding: 10px 20px;

  border-radius: 4px;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.3s ease;

}

form input[type="submit"]:hover {

  background-color: #e6b800;

}

/* === Responsive Anpassung === */

@media (max-width: 600px) {

  body {

    padding: 10px;

  }

  .werbung-box,

  form {

    padding: 15px;

    margin: 15px 0;

  }

  .login-link {

    text-align: center;

    margin-bottom: 20px;

  }

  nav a {

    display: block;

    margin: 10px 0;

  }

}