* {
  font-family: sans-serif;
  padding: 12px;
  color: grey;
}
.home {
  background-color: lightgray; 
	background-image: linear-gradient(white, lightgray);
	color: midnightblue;
	
  /**
  background-color: #ccc; 
        background-image:
            linear-gradient(#bbb 1px, transparent 1px),
            linear-gradient(90deg, #bbb 1px, transparent 1px);
        background-size: 80px 80px; 
        */
}

body>header {
  background: url("../images/himmel.jpg");
  border-radius: 10px;  
  box-shadow: 5px 5px 9px gray;
}
.container {
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  justify-content: flex-start; /* Links ausrichten */
  padding: 10px;
}

img {
  width: 200px; /* Breite des Logos anpassen */
  height: auto;
}

.home-container {
    display: flex;           /* Elemente nebeneinander */
    align-items: center;     /* Vertikal zentrieren */
    gap: 15px;               /* Abstand zwischen Bild und Text */
  }
  .partnerlogo {
    max-width: 150px;        /* Bildgröße begrenzen */
    height: auto;
  }

body>header>.container>h1 {
  margin: 0;
  color: lightgrey; 
}
.ueberschrift {
  font-size: 1.5em;
  margin-left: 50px;
}
nav>a {
  color: white;
  text-decoration: none;
}
nav>a:hover, h1.title {
  color: white;
  text-shadow: 0 0 10px white, 0 0 20px white;
  background-color: deepskyblue;
}
.text {
    color: black;
    text-align: left;
    margin-left:10px;
}
form {
   margin-left: 0;   
}
fieldset {
      
      margin-left: 10px;
      border: 1px solid #ccc;
      padding: 10px;
      max-width: 1000px;
      
    }

    legend {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr; /* Zwei Spalten */
      gap: 15px; /* Abstand zwischen den Feldern */
    }

    .form-grid label {
      text-align: left;
      display: block;
      margin-bottom: 5px;
    }

    .form-grid input, .form-grid checkbox, .form-grid select {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }
    
    .message label {
       font-weight: bold;
       color: red;
        
    }
    
    .blue a, .blue label, .blue p{
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: white;
        background-color: rgb(41, 82, 163); 
        text-decoration: none;
        border-radius: 5px;
        border: none;
        text-align: center;
        cursor: pointer;
        /**
        font-weight: bold;
        color: blue;
        */
    }
    .blue a:hover, .blue label:hover {
        background-color: deepskyblue;
    }
    textarea, select, option {
      color: black;
    }
    dt {
        font-weight: bold;
    }
    
    dd {
        color: black;
        font-weight: bold;
    }

    input[type="submit"], input[type="reset"] {
        background-color:  rgb(41, 82, 163); 
        color: white;
        padding: 10px;
    }
    
    input[type="submit"]:hover, input[type="reset"]:hover {
       background-color: deepskyblue;
    }
    #selectField {
      background-color:deepskyblue;
      font-weight: 700;
    } 
    ul li {
      margin-left: 90px;
      color: blue;
      font-weight: bold;

    } 
    h1 {
      margin-left: 50px;
    }
    h2 {
      margin-left: 50px;
    }
    h3 {
      color: darkblue;
    }
    iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
            border: none;
        }
.product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
        grid-gap: 20px; /* Abstand zwischen den Elementen */
        max-width: 100%;
        margin: auto;
    }

    .product {
        background: lightcyan;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        text-align: left;
    }

    /* Das Einzelprodukt soll über beide Spalten gehen */
    .product.single {
        grid-column: span 2;
    }

    /* Responsive: Untereinander auf kleinen Bildschirmen */
    @media (max-width: 600px) {
        .product-grid {
            grid-template-columns: 1fr;
        }
        .product.single {
            grid-column: span 1;
        }
    }