/* Grundlegende Einstellungen */
body {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 21px;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    color: #fff;
    text-align: center;
  background-color: #384f71;
  background-image: url('IMG_5927.png');
  background-size: cover; /* Bild füllt Container, Seitenverhältnis bleibt */
  background-repeat: no-repeat; /* Bild wird nicht gekachelt */
  background-position: center; /* Bild zentrieren */
  margin: 0; /* Wichtig, um Ränder zu entfernen */
  height: 100vh;
}

h1{
   font-size: 5.0em;
   font-weight: 300; /* Light */
   text-align: center;
   line-height: 1.2;
   text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.7); /* Horiz Vert Blur Farbe */
   margin: 3.0rem auto 9rem auto;    /* Horizontal zentrieren */
   padding: 0;
}

h2{
   font-size: 1.2em;
   font-weight: 400; /* Regular */
   text-decoration: underline;
   text-decoration-thickness: 2px; /* Dicke */
   text-underline-offset: 4px; /* Abstand zum Text */
   text-align: center;
   line-height: 1.0;
}

h3{
   font-size: 1.2em;
   font-weight: 400; /* Regular */
   text-align: center;
   line-height: 0.9;
   margin: 0;
   padding: 0;	
}

h4 {
   font-size: 0.8em;
   font-weight: 300;
   text-align: center;
   line-height: 2.0;
   color: #FF0000;
   margin: 0;
   padding: 0;	
}

h5 {
   font-size: 0.8em;
   font-weight: 300;
   text-align: center;
   line-height: 1.2;
   margin: 0;
   padding: 0;	
}


p {
    margin-top: 0.4rem;    /* Kleinerer oberer Abstand */
    margin-bottom: 0.4rem; /* Kleinerer unterer Abstand */
}
	
.logo {
  width: 35%;      /* Breite anpassen */
  height: auto;      /* Proportional bleiben */
  display: block;    /* Ermöglicht Zentrierung */
  margin: 2.5rem auto 0 auto;    /* Horizontal zentrieren */
}

.headline {
   margin: 0;
   padding: 0;
}

.container {
    display: flex; /* Aktiviert Flexbox */
    gap: 0rem;    /* Abstand zwischen den Boxen */
    width: 100%;  /* Container füllt die Breite */
    background-color: rgba(255, 255, 255, 0.8); 
  }

  .box {
    color: white;
    text-align: center;
  }

  .hafenmeister {
    flex: 1; /* Nimmt 1 Teil des Platzes ein */
    color: #000;
    margin: 0.7rem auto 2.0rem 5.0rem;
  }

  .tankstelle {
    flex: 1; /* Nimmt 2 Teile des Platzes ein (doppelt so breit) */
   color: #000;
   margin: 0.7rem 5.0rem 2.0rem auto;

}

footer {
    color: #fff;
    text-align: center;
    padding: 1.5rem;
    width: 100%;
}