body {
  background-color: black;  /* schwarzer Hintergrund */
  color: white;             /* weiße Schrift */
  margin: 0;
  font-family: Georgia, ;
}

header {
  display: flex;            /* Flexbox für nebeneinander */
  align-items: center;      /* Zentriert die Elemente vertikal */
  padding: 10px;
  justify-content: space-between;
}

.logo {
  height: 135px;             /* Logo-Höhe */
  margin-right: 12px;       /* Abstand zwischen Logo und Links */
}

nav {
  display: flex;            /* Damit die Links nebeneinander sind */
}

nav a {
  text-decoration: none;    /* Keine Unterstreichung der Links */
  color: white;             /* Weiße Links */
  margin-right: 20px;       /* Abstand zwischen den Links *//* Grundlayout */
}


/* Gesamtbereich um die Boxen (Den ganzen box Bereich hab ich mit hilfe eines youtubevideos gemacht) */
.box-bereich {
  text-align: center;                  /* Text zentrieren */
  padding: 50px 20px;                  /* Innenabstand oben/unten 50px, links/rechts 20px */
  background-color: black;           /* Hellgrauer Hintergrund */
  font-family: Arial, sans-serif;      /* Schriftart für den ganzen Bereich */
}

/* Überschrift */
.box-bereich h1 {
  margin-bottom: 40px;                 /* Abstand nach unten zur nächsten Box */
  font-size: 50px;                      /* Schriftgröße doppelt so groß wie Standard */
  color: white;                         /* Dunkelgraue Schriftfarbe */
}

/* Container, der alle Boxen nebeneinander hält */
.boxen-container {
  display: flex;                       /* Boxen in eine Reihe stellen */
  flex-wrap: wrap;                     /* Wenn Platz nicht reicht, umbrechen */
  justify-content: center;            /* Boxen horizontal zentrieren */
  gap: 25px;                           /* Abstand zwischen den Boxen */
}

/* Eine einzelne Box */
.box {
  background-color: #333;              /*  Hintergrundfarbe */
  color: white;                        /* Weiße Schrift */
  padding: 30px 20px;                  /* Innenabstand: oben/unten 30px, links/rechts 20px */
  width: 220px;                        /* Feste Breite der Box */
  border-radius: 20px;                 /* Abgerundete Ecken */
  transition: transform 0.5s;          /* Sanfte Bewegung bei Hover */
}

/* Hover-Effekt: Box hebt sich leicht an */
.box:hover {
  transform: translateY(-5px);         /* Nach oben verschieben beim Drüberfahren (hilfe von chat gpt) */
}

/* Titel in der Box */
.box h2 {
  margin-bottom: 15px;                /* Abstand zum Text */
  font-size: 25px;                    /* Etwas größer als normaler Text */
}

/* Beschreibungstext in der Box */
.box p {
  font-size: 15px;                   /* Etwas kleinerer Fließtext */
}

/* Footer */
.site-footer {
  background-color: #333;       /* Dunkelgrauer Hintergrund */
  color: white;                 /* Weiße Schrift */
  padding: 20px;                /* Abstand oben, unten, links, rechts */
  text-align: center;           /* Zentrierter Text */
  margin-top: 132px;
}

.footer-column ul {
  list-style: none;             /* Keine Aufzählungszeichen */
  padding: 0;                   /* Kein innerer Abstand */
}

.footer-column a {
  color: #ccc;                  /* Linkfarbe */
  text-decoration: none;        /* Keine Unterstreichung */
}

.footer-column a:hover {
  text-decoration: underline;   /* Unterstrich bei Hover */
}