/* ============================================
   GRUNDEINSTELLUNGEN FÜR DIE GANZE SEITE
   ============================================ */
html, body {
  height: 100%;           /* sorgt dafür, dass die Seite die volle Bildschirmhöhe einnimmt */
  margin: 0;               /* entfernt den Standardabstand des Browsers am Rand */
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;  /* Schriftart – hier bei Bedarf ändern */
}

/* ============================================
   HINTERGRUNDBILD
   ============================================
   Hier legst du fest, welches Bild im Hintergrund erscheinen soll.
   Ersetze "hintergrund.jpg" durch den Dateinamen deines eigenen Bildes
   und lege die Bilddatei in denselben Ordner wie diese CSS-Datei.
*/
body {
  background-image: url("images/hintergrund_1.jpg");
  background-size: cover;        /* Bild füllt den gesamten Bildschirm aus, ohne verzerrt zu werden */
  background-position: center;   /* Bild wird zentriert ausgerichtet */
  background-repeat: no-repeat;  /* Bild wird nicht gekachelt/wiederholt */
  background-attachment: fixed;  /* Bild bleibt beim Scrollen an Ort und Stelle (kann entfernt werden) */

  /* ---- ZENTRIERUNG DES INHALTS (Überschrift + Text) ----
     display: flex + die beiden folgenden Zeilen sorgen dafür,
     dass der ".container" (siehe unten) horizontal UND vertikal
     in der Mitte des Bildschirms erscheint. */
  display: flex;
  justify-content: center;   /* horizontale Zentrierung */
  align-items: center;       /* vertikale Zentrierung */

  height: 100vh;   /* Höhe des Body = volle Höhe des Browserfensters, wichtig für die vertikale Zentrierung */
}

/* ============================================
   INHALTSBOX (Überschrift + Text)
   ============================================
   Dieser Kasten liegt über dem Hintergrundbild.
   Hier kannst du Aussehen, Abstand, Hintergrundfarbe der Box
   und Textfarbe anpassen.
*/
.container {
  text-align: center;             /* zentriert den Text innerhalb der Box */
  color: #ffffff;                 /* Textfarbe – ggf. an dein Hintergrundbild anpassen */
  background-color: rgba(0, 0, 0, 0.5);  /* halbtransparenter dunkler Kasten, damit der Text lesbar bleibt */
  padding: 40px 50px;              /* Innenabstand rund um Überschrift/Text */
  border-radius: 12px;             /* abgerundete Ecken der Box (0 = eckig) */
  max-width: 600px;                /* maximale Breite der Box, damit lange Texte nicht zu breit werden */
}

/* Überschrift innerhalb der Box */
.container h1 {
  margin: 0 0 15px 0;   /* Abstand unterhalb der Überschrift zum Text */
  font-size: 2.2em;      /* Schriftgröße der Überschrift */
}

/* Text innerhalb der Box */
.container p {
  margin: 0;
  font-size: 1.1em;      /* Schriftgröße des Fließtexts */
  line-height: 1.5;      /* Zeilenabstand für bessere Lesbarkeit */
}