@charset "utf-8";
/* CSS Document */

body {
  min-height: 100vh;
  background: linear-gradient(
    to top,
    #ff9a76,   /* sanftes Orange unten */
    #ffb347,   /* helles Orange */
    #ffe29f,   /* pastelliges Gelb */
    #ffffff    /* weißer Himmel */
  );
  background-attachment: fixed; /* Verlauf bleibt fixiert */
  background-repeat: no-repeat;
  background-size: cover;       /* verhindert Balken */
} 


.img-fluid {
  display: block;
  max-width: 100%;  /* Bild passt sich immer dem Container an */
  height: auto;     /* Proportionen bleiben */
  margin: 20px auto;
  border: none;
  opacity: 1; /* sofort sichtbar */
  transition: opacity 1s ease-in-out;
}



main {
  display: block;   
  max-width:1000px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding-bottom: 25px;
  background:rgba(253,253,253,1.00);
  color: #333;
  border-radius: 30px;
  border: thin solid #DDF721;
  box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
  height: auto;
}

.grid-container {
  display: grid;
  font-size: 1.1rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1F175C;
  grid-template-columns: auto;
}

/* Style the navigation menu */
.navbar {
  width: 100%;
  background-color: white;
}

/* Navigation links */
.navbar a {
    float: left;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    color: rgba(46,4,255,1.00);
    text-decoration: none;
    font-size: 1.6rem;
    text-align: left; /* If you want the text to be centered */
    font-weight: bold;
}


.item1 {
    grid-area: 1 / 1 /span 1 / span 1;
    padding: 40px;
    width: 400px;
    margin-top: 30px;
    margin-left: 50px;
    background-color: rgba(253,253,253,1.00);
}

.item2 {
  grid-area: 2 / 1 / span 1 / span 1;
  padding: 5px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 850px;     /* statt fester Breite */
  width: 100%;          /* Container füllt so viel Platz wie möglich */
  background-color: rgba(253,253,253,1.00);
  border-radius: 30px;
  border: thin solid #DDF721;
  box-shadow: -10px 0px 13px -7px #000000,
              10px 0px 13px -7px #000000,
              5px 5px 15px 5px rgba(0,0,0,0);
  height: auto;
  text-align: center;
}

@media only screen and (max-width: 900px) {
  .item1, .item2 {
    width: 95%;   /* fast volle Breite auf kleinen Bildschirmen */
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }
  .img-fluid {
    width: 100%;
    height: auto;
  }
}