@charset "utf-8";
/* CSS Document */
    .container {
      display: flex; /* Ordnet die Elemente nebeneinander und gleichmäßig an */
      align-items: stretch; /* Sorgt dafür, dass die Elemente die gleiche Höhe bekommen */
    }

    .box {
      flex: 1; /* Sorgt für eine gleichmäßige Aufteilung des verfügbaren Platzes */
      /* Optional: Fügen Sie hier weitere Stile für die einzelnen Boxen hinzu, wie z.B. eine Border */
      border: 1px solid rgb(204,204,204);
      padding: 10px;
      margin: 5px;
	  border-radius: 5px;
    }
	
	    .box3 {
	flex: 1; /* Sorgt für eine gleichmäßige Aufteilung des verfügbaren Platzes */
	/* Optional: Fügen Sie hier weitere Stile für die einzelnen Boxen hinzu, wie z.B. eine Border */
	border: 1px solid rgb(102,102,102);
	background: -webkit-linear-gradient(#EEE, #AAA);
	background: linear-gradient(#EEE, #AAA);
	background-color: #DDD;
	padding: 10px;
	margin: 5px;
	border-radius: 5px;
	text-align: center;
    }

        @media (max-width: 768px) { /* Beispiel für Bildschirmbreite bis 768px */
          .container {
            flex-direction: column; /* Stapelt die Elemente vertikal */
          }
          .div1, .div2 {
            flex: none; /* Deaktiviert das Teilen des Platzes */
            width: 100%; /* Nimmt die volle Breite ein */
          }
        }