:root {
  --blue: rgb(105, 19, 13);
  --blue_low_opacity_background: rgba(30, 73, 153, 0.9);
  --lachs: rgb(255, 190, 179);
  --light_yellow: rgb(255, 244, 221);
  --grey: rgb(211, 206, 211)
}

#active_link {
  color: var(--blue_low_opacity_background);
}

.undertitle_wie_funktionierts {
  color: var(--lachs);
  text-align: center;
  font-size: 20px;
  margin-left: 30px;
}

.paragraph_wiefunktionierts{
  text-align: center;
  list-style-type: decimal; /* Nummerierte Liste */
  margin-bottom: 10px;
  list-style-position: inside;
}

.paragraph_wiefunktionierts li{
  margin: 10px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.paragraph_wiefunktionierts li a{
  color: var(--lachs);
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.custom-button {
  text-align: center;
}

.custom-button div {
  background-color: var(--lachs);  /* Graue Hintergrundfarbe */
  color: var(--blue_low_opacity_background);
  border: none;                /* Kein Rand */
  padding: 10px 20px;          /* Abstand innerhalb des Buttons */
  border-radius: 20px;          /* Abgerundete Ecken */
  text-align: center;          /* Text zentrieren */
  margin: 30px;
  font-size: 15px;
  display: inline-block;
}

/* Optional: Hover-Effekt für den gesamten Button */
.custom-button div:hover {
  transform: scale(1.1);
}

.granny {
  border-radius: 20px;
  width: 75%;

  display: block;
  margin-left: auto;
  margin-right: auto;

  margin-bottom: 50px;
}

.back_to_button {
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.20);
  text-shadow: 2px 2px #1E4999;
  padding: 15px;
  margin: 50px;
  width: 200px;

  display: block;
  margin-left: auto;
  margin-right: auto;
}

.back_to_button a div { 
  font-size: 15px;
  text-align: center;
  color: var(--lachs);  
}

.back_to_button:hover {
  transform: scale(1.1);
}

@media(min-width:1000px) {

  #active_link {
    color: var(--lachs);
  }

  .undertitle_wie_funktionierts {
    font-size: 40px;
  }

  .paragraph_wiefunktionierts {
    color: var(--light_yellow);
    font-size: 20px;

    display: flex;
    margin: auto;
  }
  .paragraph_wiefunktionierts li{
    font-size: 20px;
    text-align: left;
    margin-left: 100px;
    max-width: 450px;
  }

  .paragraph_wiefunktionierts li a{
    font-size: 20px;
  }

  ol.paragraph_wiefunktionierts {
 
    list-style-position:outside;
   
  }

  .custom-button button{
    font-size: 20px;
  }

  .back_to_button {
    margin: 50px;
    width: auto;
  }

  .two_buttons {
    display: flex;
    justify-content: center;
  }

  .back_to_button a div { 
    text-align: center;
  }

}