/*Grundfarben*/
:root {
    --hintergrund: rgba(179, 228, 255, 1);
    --dunkelblau: rgba(0, 34, 99, 1);
    --mittelblau: rgba(87, 153, 209, 1);
    --anfängerblau: rgba(78, 152, 209, 0.4);
  }

/*Font/Schrift*/
@font-face {
  font-family: 'mighty-souly';
  src: url('font/mighty-souly/mighty-souly.otf') format('truetype');
  }
  @font-face {
    font-family: 'mina-bold';
    src: url('font/mina/Mina-Bold.ttf') format('truetype');
  }
   @font-face {
    font-family: 'mina-regular';
    src: url('font/mina/Mina-Regular.ttf') format('truetype');
  }

  /*basics------------------------------------*/
  @media (min-width: 1024px) { /*wenn kleiner als Desktopgrösse, dann wechselt es auf Mobile-Layout */
  body {
    background-color: var(--hintergrund);
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* Inhalte untereinander anordnen */
    align-items: center;    /* horizontal zentrieren */
    justify-content: center;  /* horizontal zentrieren */
    overflow: auto; /*Scrillen auf mobile erlauben*/
  }

  .titel {
    text-align: center;
    margin-top: -20px;
  }
  
  .h1_wellenradar {
    font-family: 'mighty-souly'; /* Beispiel-Schrift für Wellenradar */
    font-size: 40px;                        
    color: var(--dunkelblau);
    margin-top: -20px;
  }
  
  .h2_california {
    font-family: 'mina-regular';          /* andere Schrift für California */
    font-size: 20px;                      
    margin-top: -55px;
    color: var(--dunkelblau);
  }

  .h3 {
        font-family: 'mighty-souly'; /* Beispiel-Schrift für Wellenradar */
    font-size: 20px;                        
    color: var(--dunkelblau);
  }


  .inhalt {
    width: 100%;
    display: flex;
    justify-content: right;
    margin-right: 5%;
    margin-top: -40px;
  }
  
  .insel {
  position: relative;
  display: block;
  justify-content: left;
   height: 380px;
   width: 260px;
   margin-top: 40px;
   margin-right: 180px;
   /*z-index: 2;*/

  }
  .insel.hidden {
    display: none;
  }
  
  .advanced {
    position: absolute;
    height: 290px;
    width: auto;
    margin-top: 108px;
    margin-right: 937px;
    transform: rotate(2deg);
  }
  .advanced.cta {
    transition: ease-in 0.5 s; /* Weicher Übergang beim Hover */
  }

  .advanced.cta:hover {
      width: auto;
      height: 298px;
      margin-top:106px;
  }

  .beginner {
    position: absolute;
    height: 210px;
    width: auto;
    margin-top: 90px;
    margin-right: 850px;
    transform: rotate(4deg);
  }

  .beginner.cta {
    transition: ease-in 0.5 s; /* Weicher Übergang beim Hover */
  }

  .beginner.cta:hover {
      width: auto;
      height: 218px;
      margin-top:87px;
  }

  .map {
    position: relative; /* macht das Bild zum Bezugspunkt für absolute Positionierung */
    width: 100%;
    max-width: 600px;
  }
  
  .map img.background-image {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1; /* Bild bleibt unten */
  }
  
  /* Icons */
  .welle {
    position: absolute;
    width: 8%; /* skalierbar mit dem Bild */
    z-index: 2; /* Icons über dem Bild */
    cursor: pointer;
  }

  /* Positionen relativ zum Bild */
  .welle_1 { 
    top: 25%;
    left: 13%; 
    width: 55px;
    height: 55px;
  }
  .welle_2 {
    top: 49%;
    left: 25%; 
    width: 55px;
    height: 55px; }
  .welle_3 { 
    top: 60%;
    left: 33%; 
    width: 55px;
    height: 55px;
  }
  .welle_4 { 
    top: 78%;
    left: 51%; 
    width: 55px;
    height: 55px;
  }
  .welle_5 { 
    top: 84%;
    left: 62%; 
    width: 55px;
    height: 55px;
  }
  
  .welle.cta {
    transition: ease-in 0.5 s; /* Weicher Übergang beim Hover */
  }

  .welle.cta:hover {
      width: 65px;
      height: 65px;
  }
}

/* Info-Box */
.info-box {
  position: absolute;
  width: 400px;
  min-height: 450px;
  max-height: 500px;
  height: 100%;
  background: white;
  border-radius: 10px;
  padding: 10px 15px;
  font-family: 'mighty-souly';
  font-size: 30px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  color: var(--dunkelblau);
}

.info-box.visible {
  opacity: 1;
  pointer-events: all;
}

.info-box.hidden {
  opacity: 0;
  pointer-events: none;
} 

.info-box .back-button {
 display: none; /* auf Desktop unsichtbar */
 }


/* ----- Inhalt: Titel über Bild, alles zentriert ----- */
.box-content {
  display: flex;
  flex-direction: column; /* untereinander */
  align-items: center;     /* horizontal zentriert */
  gap: 10px;
  height: 100%;
}

#infoBoxContent {
  width: 95%;
}


/* Titel */
.info-text {
  display: flex;
  flex-direction: column; /* untereinander */
  margin-top: -5%;
  font-size: 35px;
  color: var(--dunkelblau);
  font-weight: 600;
  align-items: center;
  justify-content: center;
}

/* Bild Surfergirl & Pfeil Windrichtung*/
.info-image {
  margin-top: -25px;
  height: 150px;
  border-radius: 8px;
  display: block;
}
.wind-image {
  margin-top: -25px;
  height: 150px;
  width: auto;
  display: block;
}

.bildpfeil{
display:flex;
flex-direction: row;
gap:20px;
}
.chartContainer {
  height: 100%;
  width: 100%;
}

.info-inhalt {
  display: flex;
  flex-direction: column; /* untereinander */
  font-size: 21px;
  font-family:mina-regular;
  color: var(--dunkelblau);
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 5px;
  gap: 15px;
}
.info-inhaltboards {
  display: flex;
  flex-direction: column; /* untereinander */
  font-size: 21px;
  font-family:mina-regular;
  color: var(--dunkelblau);
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-top: -25px;
  margin-bottom: 5px;
  gap: 15px;
}


       @media (max-width: 1023px) { /*wenn grösser als mobile-Layout, dann wechselt es auf Desktop (tablet-layout wird übersprungen)*/
          body {
            background-color: var(--hintergrund);
            margin: 0;
            padding: 0;
            width: 100%;
            display: flex;
            flex-direction: column; /* Inhalte untereinander anordnen */
            align-items: center;    /* horizontal zentrieren */
            justify-content: flex-start;  /* horizontal zentrieren */
            overflow:hidden; /*Scrillen auf mobile erlauben*/
          }
        
          .titel {
            text-align: center;
            margin-top: 1%;
          }
          
          .h1_wellenradar {
            font-family: 'mighty-souly'; /* Beispiel-Schrift für Wellenradar */
            font-size: 30px;                        
            margin: 0px;
            color: var(--dunkelblau);
            margin-top: -30px;
          }
          
          .h2_california {
            font-family: 'mina-regular';  /* andere Schrift für California */
            font-size: 20px;                      
            margin: 0px;
            color: var(--dunkelblau);
            margin-top: -50px;
          }
        
          .inhalt {
          width: 100%;
          display: flex;
          flex-direction: column; /* Insel über Map */
          align-items: center;
          justify-content: center;
          margin-top: 0;
          }
          
          .insel {
          position: relative;
          display: block;
          justify-content: center;
          align-items: center;
          width: 175px;
          height: auto;
          margin-top: -8px;
          margin-bottom: -5px;
          }
 
          .insel.hidden {
            display: none;
          }

          .advanced {
            position: fixed;
            display: block;
            height: 175px;
            width: auto;
            margin-top: -100px;
            margin-right: 45px;
            transform: rotate(1deg);
          }
          .advanced.cta {
            transition: ease-in 0.5 s; /* Weicher Übergang beim Hover */
          }
        
          .advanced.cta:hover {
              width: auto;
              height: 180px;
          }
        
          .beginner {
            position: fixed;
            display: block;
            height: 120px;
            width: auto;
            margin-top: -131px;
            margin-right: -40px;
          }
          .beginner.cta {
            transition: ease-in 0.5 s; /* Weicher Übergang beim Hover */
          }
          .beginner.cta:hover {
              width: auto;
              height: 125px;
          }
          .map {
            position: relative;
            width: 90%;
            max-width: 600px;
            margin-top: 0;
            display: flex;
            justify-content: center;
            }
          
          .map img.background-image {
            width: 400px;
            height: auto;
            display: block;
            position: relative;
            z-index: 1; /* Bild bleibt unten */
            margin-left: 85px;
          }
          
          /* Icons */
          .welle {
            position: absolute;
            width: 8%; /* skalierbar mit dem Bild */
            z-index: 2; /* Icons über dem Bild */
            cursor: pointer;    
            margin-left: 85px;
          }
        
          /* Positionen relativ zum Bild (anpassen nach Bedarf) */
          .welle_1 { 
            top: 25%;
            left: 6%; 
            width: 40px;
            height: 40px;
          }
          .welle_2 {
            top: 49%;
            left: 15%; 
            width: 40px;
            height: 40px;
          }
          .welle_3 { 
            top: 60%;
            left: 22%; 
            width: 40px;
            height: 40px;
          }
          .welle_4 { 
            top: 77%;
            left: 39%; 
            width: 40px;
            height: 40px;
          }
          .welle_5 { 
            top: 83%;
            left: 51%; 
            width: 40px;
            height: 40px;
          }
          .welle.cta {
            transition: ease-in 0.5 s; /* Weicher Übergang beim Hover */
          }
        
          .welle.cta:hover {
              width: 55px;
              height: 55px;
          }

          /* Info-Box Wellen mobile-friendly */
          .box-content {
            display: flex;
            flex-direction: column; /* untereinander */
            align-items: center;     /* horizontal zentriert */
            gap: 10px;
            height: 100%;
          }
          .info-box {
            position: absolute;
            top: 50%; /* mittig auf dem Bildschirm */
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 360px;
            /*overflow-y: auto;*/
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            font-family: 'mighty-souly';
            font-size: 18px;
            color: var(--dunkelblau);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          /* Info-Box Boards mobile-friendly */
          .info-inhaltboards {
            position: absolute;
            top: 46%; /* mittig auf dem Bildschirm */
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            font-size:18px;
            max-width: 360px;
            margin-top:15px;
            /*overflow-y: auto; */
            z-index: 2;
          }

          .box-contentboards {
            display: flex;
            flex-direction: column; /* untereinander */
            align-items: center;     /* horizontal zentriert */
            gap: 10px;
            height: 50%;
          }
            /* Kleine Animation/Feedback beim Öffnen */
            .info-box.visible {
              opacity: 1;
              transition: all 0.3s ease;
              left:10%;
              top:60%;
              margin-top:-50px;
              margin-left:-25px;
            }

            .info-box.hidden {
              opacity: 0;
              pointer-events: none;
              transform: translate(-50%, -50%) scale(0.95);
            }

          /* Info-Box Inhalt */
          .info-text {
            text-align: center;
            font-size: 30px;
            margin-bottom: 10px;
            margin-top:-20px;
          }

          .info-image {
            width: auto;
            height: 150px;
            display: block;
            margin-top:-15px ;

          }
          .wind-image {
            margin-top: -25px;
            height: 150px;
            width: auto;
            display: block;
            margin-top:-15px ;

          }
          
          .bildpfeil{
          display:flex;
          flex-direction: row;
          gap:20px;
          }

          /* ✅ Chart kleiner & responsiv */
          #wellenChart {
            width: 100%;
            height: 250px;
            max-height: 342px;
            margin-bottom: -100px;
          }

            /* Zurück-Button in Info-Box - mobile */
            .back-button {
              display: block;
              margin: 15px auto 0 auto; /* mittig */
              background-color: #cdea8f; 
              color: white;
              border: none;
              border-radius: 30px; 
              padding: 6px 20px; 
              font-family: 'mighty-souly';
              font-size: 22px;
              cursor: pointer;
              text-align: center;
              transition: background 0.3s ease, transform 0.2s ease;
            }
          }