/* === Allgemeines Layout === */
body {
  background-color: maroon;        /* Dunkelroter Hintergrund */
  color: yellow;                   /* Standard-Schriftfarbe */
  font-family: Arial, sans-serif;  /* Klare, serifenlose Schrift */
  margin: 0;                       /* Kein Außenabstand */
  padding: 20px;                   /* Innenabstand für Luft */
}

/* === Überschriften === */
h1 {
  text-align: center;              /* Zentrierte Hauptüberschrift */
  font-size: 2em;                  /* Größere Schriftgröße */
  margin-bottom: 0.5em;            /* Abstand nach unten */
}

h2 {
  text-align: center;              /* Zentrierte Unterüberschrift */
  font-size: 1.5em;                /* Etwas kleiner als h1 */
  margin-bottom: 0.5em;
}

/* === Nachrichtentext === */
p.message {
  font-weight: bold;              /* Fett für Hervorhebung */
  font-size: 1em;
  margin-bottom: 1em;
}

/* === Horizontale Linie === */
hr {
  border: none;
  border-top: 2px solid yellow;   /* Gelbe Linie oben */
  margin: 20px 0;
}

/* === Button-Grundstil (wird durch Position ergänzt) === */
.braun-button-l,
.braun-button-c,
.braun-button-r {
  background-color: orange;      /* SaddleBrown als Hintergrund */
  color: yellow;                  /* Gelbe Schrift */
  border: 2px solid yellow;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 12px;             /* Abgerundete Ecken */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Button-Hover-Effekt === */
.braun-button-l:hover,
.braun-button-c:hover,
.braun-button-r:hover {
  background-color: #5a2d0c;      /* Dunkleres Braun beim Hover */
  color: gold;                    /* Goldene Schrift beim Hover */
}

/* === Positionierung der Buttons (optional) === */
.braun-button-l {
  text-align: left;               /* Linksbündig */
}

.braun-button-c {
  text-align: center;             /* Zentriert */
}

.braun-button-r {
  text-align: right;              /* Rechtsbündig */
}
/* Container für rechtsbündige Buttons */
.button-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1em;
}