.attribution { 
  font-size: 11px; 
  text-align: center; 
  margin: 1rem;
}
.attribution a {
   color: hsl(228, 45%, 44%); 
}

@font-face {
    font-family: 'DMSans';
    src: url('assets/fonts/static/DMSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('assets/fonts/static/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('assets/fonts/static/DMSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

* {
  box-sizing: border-box;
}

:root {
    --Purple-1: hsl(254, 88%, 90%);
    --Purple-2: hsl(256, 67%, 59%);
    
    --Yellow-1: hsl(31, 66%, 93%);
    --Yellow-2: hsl(39, 100%, 71%);
    
    --White: hsl(0, 0%, 100%);
    --Black: hsl(0, 0%, 7%);

    /* Schriftgrößen */
    --font-size-large: 40px; /* für große Schrift */
    --font-size-medium: 25px; /* für mittlere Schrift */
    --font-size-small: 15px; /* für kleine Schrift */
}

body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

#grid-bento {
  font-family: 'DMSans';
  font-weight: 500;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 5 gleich breite Spalten */
  grid-template-rows: repeat(10, 1fr); /* 10 automatische Zeilen */
  gap: 20px; 
  grid-template-areas: 
    "grid-item-7 grid-item-1 grid-item-1 grid-item-4"
    "grid-item-7 grid-item-1 grid-item-1 grid-item-4"
    "grid-item-7 grid-item-1 grid-item-1 grid-item-4"
    "grid-item-7 grid-item-1 grid-item-1 grid-item-4"
    "grid-item-7 grid-item-2 grid-item-3 grid-item-4"
    "grid-item-8 grid-item-2 grid-item-3 grid-item-4"
    "grid-item-8 grid-item-2 grid-item-3 grid-item-4"
    "grid-item-8 grid-item-6 grid-item-5 grid-item-5"
    "grid-item-8 grid-item-6 grid-item-5 grid-item-5"
    "grid-item-8 grid-item-6 grid-item-5 grid-item-5";
    max-width: 1000px;
    max-height: 800px;
    width: 90%;
    margin: 3rem auto;
}

/* Standardstil für alle Grid-Items */
.grid-item {
  border-radius: 0.3rem;
  overflow: hidden;
  background-color: white;
  color: black;
  font-size: var(--font-size-medium);
  line-height: 0.9;
  letter-spacing: -0.5px;
}


/* Zuweisung der Grid-Bereiche */
.grid-item-1 {
  background-color: var(--Purple-2);
  color: var(--White);
  text-align: center;
  font-size: 46px;
  grid-area: grid-item-1;
  padding: 0.7rem;
}

.grid-item-1 img {
  padding: 0.1rem 0.1rem 0 0.1rem;
}


.grid-item-1 p {
  padding: 0;
  margin: 2rem 0 1rem 0;
}

.grid-item-2 {
  background-color: var(--White);
  grid-area: grid-item-2;
  padding: 1rem;
}

.grid-item-2 img {
  padding: 0.1rem 0 1rem 2rem;
}

.grid-item-2 span {
  padding: 0.1rem 0.1rem 0.1rem 0.1rem;
}


.grid-item-3 {
  background-color: var(--Yellow-2);
  grid-area: grid-item-3;
  padding: 1.5rem 1rem 0 1rem;
}


.grid-item-3 img {
  padding: 2.5rem 0.1rem 0 0.1rem;
}

.grid-item-4 {
  background-color: var(--Purple-1);
  color: var(--Black);
  grid-area: grid-item-4;
  padding: 2rem 0 3rem 2rem;
}

.grid-item-5 {
  background-color: var(--Purple-2);
  color: var(--White);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: grid-item-5;
 
}


.grid-item-6 {
  background-color: var(--White);
  grid-area: grid-item-6;
  padding: 1.5rem;
  font-size: 40px;
}

.grid-item-6 span {
  padding: 1rem 0.1rem 1rem 0.1rem;
}

.grid-item-7 {
  background-color: var(--Yellow-1); 
  grid-area: grid-item-7;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding: 0;
  text-align: left;
  gap: 0.6rem; 
}


.grid-item-7 p {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-medium); 
  color: var(--Black); 
}

.grid-item-7 .button-container {
  margin-top: 1rem;
}


.grid-item-7 .button-image {
  width: auto; 
  max-width: 150px; 
}

.grid-item-7 .button-image {
  width: auto; 
  max-width: 150px; 
}

.grid-item-8 {
  background-color: var(--Yellow-2);
  grid-area: grid-item-8;
  padding: 1rem;
}

.grid-item-8 img {
  padding: 1rem 0 0 0 0;
}

.grid-item-8 p {

}

/*words in different colors in the middle of text*/

.yellow-word {
  color: var(--Yellow-2);
}

.purple-word {
  color: var(--Purple-2);
  font-family: 'DMSans';
  font-style: italic;
}

.small-font {
  font-size: var(--font-size-small); /* Kleine Schrift */
  color: white;
  font-weight: normal;
}

.small-font2 {
  font-size: 15px;
  color: black;
  display: block;
  font-weight: normal;
  font-style: normal;
  padding: 0.5rem;
}

.italic-style-font {
  font-family: 'DMSans';
  font-style: italic;
}


@media (max-width: 800px) {

  * {
    margin: 0;
    padding: 0;
}


  html, body {
    height: 100%; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; /* Padding und Border einrechnen */
    overflow-x: hidden;
  }
  
  #grid-bento {
    display: flex; 
    flex-direction: column; /* Items untereinander anordnen */
    gap: 15px; 
    max-width: 100%; 
    max-height: none;
    width: 90%; 
    margin: 1rem 1rem;
  }


  .grid-item {
    width: 100%; 
    height: auto;
  }

  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto; 
  }

  .grid-item-3 {
    display: flex;
    flex-direction: column; /* Text und Bild untereinander */
    align-items: center; /* Zentriert Text und Bild */
    text-align: center; /* Zentriert den Text */
  }

  .grid-item-3 img {
    padding: 1rem 0 0 ; /* Optimiert Abstand zum Text */
    max-width: 100%; /* Bild passt sich dem Container an */
    height: auto;
  }

  .grid-item-7 p {
    padding: 0.5rem;
        }

  .grid-item-8 p {
  padding: 0.5rem;
      }

  .grid-item-5 img {
padding: 0.5rem;
  }

  .grid-item-4 p {
padding: 1rem;
  }

  br {
    display: none;
}