* {
    font-family: sans-serif;
    /* background-color: #70cfcc; */
    /* Farbe vom Flyer, Kontrast für Text nicht optimal */    
}

body {
    background-color: #f5f5dc;
}

.container {
     display: flex;
     flex-wrap: wrap;
 }
 .item, .legal {
     flex: 1 1 150px; /* Setzt eine Basisbreite und erlaubt Flexibilität */
     min-width: 150px; /* Mindestbreite für jedes Element */
     max-width: 550px; /* Maximale Breite für jedes Element */
     background-color: #c2a698;
     text-align: center;
     padding: 10px;
     margin: 5px;
     box-sizing: border-box;
     cursor: pointer;
     min-height: 20px; /* Stellt sicher, dass leere Elemente klickbar bleiben */
     border-radius: 5px; /* rounded corners */
 }
 .heading > .item {
     background-color: #463023;
     color: #ffffff;
     font-weight: bold;
 }

 .task1::before, .task2::before, .task3::before, .task4::before {
     content: "";
     display: inline-block;
     width: 37px;
     height: 25px;
     background-size: cover;
     margin-right: 5px; /* Abstand zum Text */
     color: #644e41;
 }

 .task4::before {
     background-image: url('cookies.svg');
     width: 28px;
 }

 .task1::before, .task2::before, .task3::before {
     background-image: url('coffee_and_talk.svg');
 }

 .placeholder {
     color: #ffffff; /* Farbe des Platzhaltertextes */
 }

 .rules, .claim {
     position: relative;
     padding-top: 180px; /* Schafft Platz für das Logo oben */
     max-width: 600px;
     left: 0.5%;
 }

 .rules::before, .claim::before {
     content: "";
     width: 200px; // 367px;
     height: 200px; // 301px;
     background-image: url('Caférad Logo.png');
     background-size: contain;
     background-repeat: no-repeat;
     position: absolute;
     top: 0px; /* Position über dem Element */
     left: 5%;
 }

 .rules > .subheading, .info > .subheading {
     font-weight: bold;
 }

 .info {
     left: 0.5%;
     position: relative;
     max-width: 600px;
 }

 .claim {
     font-size: x-large;
     margin-bottom: 1%;
 }

 .claim > span {
     color: #70d0cd;
     font-weight: bold;
 }

 .legal {
     color: white;
     background-color: #70cfcc;
     font-size: small;
 }

 a {
     text-decoration: none;
 }

 .legal a {
     font-weight: bolder;
     color: white;
 }

 @media (max-width: 800px) { /* Passt den Umbruchpunkt nach Bedarf an */
     .item .legal {
         flex: 1 1 100%;
         min-width: 100%; /* Jedes Element nimmt die volle Breite ein, wenn untereinander */
         max-width: 100%;
         margin: 2px;
     }
 }