/* Grundlegende Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Sora", sans-serif;
}



html, body {
    height: 100dvh;
    overflow: auto; /* Standardmäßig soll gescrollt werden können */
}
  
  @supports (-webkit-touch-callout: none) {
    @media all and (display-mode: standalone) {
      html, body {
        overflow: hidden; /* Entferne den Scrollbalken im Vollbildmodus */
      }
    }
  }



.header-buttons {
  gap:16px;
  display: flex;
  align-items: baseline;
    align-content: center;
    flex-wrap: wrap;
}
.back-icon{
  width:43px;
}

html, body {
  /*height: 100%;  Stellt sicher, dass der gesamte Viewport genutzt wird */
  width: 100vw;
  height: 100vh;
  height: var(--app-height);
  display: flex;
  flex-direction: column;
}



main {
  flex: 1;
 /*  min-height: 100dvh; Verhindert abgeschnittenen Inhalt */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}


/* Header */
.header {
    pointer-events: auto;
  max-height:80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.headTextContainer {
  display:flex;  
  flex-direction: row;
  margin-left: 24px;
}
.headTextContainer img{
  width:347px;
  height:27px;
}

.headTextContainer p{
  color:black;
  font-size:14px;

}

.main-title {
  font-size: 24px;
  color: #2e3b4e;
  text-align: left;
}

.leftheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.leftheader h1{

}

/* Kalkulator-Bereiche */
.calculator {


    flex-wrap: nowrap; /* Verhindert Umbruch */



  height:100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 20px;
  /*background: #f3f5fa;*/
  background:white;
  border-radius: 16px;
  margin: 20px;
}





.calculator-box {
   

    min-width: 200px;


    width: 470px;
    height: 470px;


  background: white;
  border-radius: 16px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

@media screen and (max-width: 1024px) {
    .calculator-box {
        
    }
}






.fade-out main {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fade-out .header {
  opacity: 1 !important;
}
.fade-out footer {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
/*
Klick Effekt 
*/
.calculator-box:active {
  transform: scale(0.95);
  transition: transform 0.1s ease-in-out;
  
}
.active-touch {
  transform: scale(0.95);
  transition: transform 0.1s ease-in-out;
}





a {
   text-decoration: none;
}

.calculator a{
  color:#2E3B4E;
}
.calculator-logo {
  width: 70px;
  height:auto;
}

/* Bounce Effekt
.calculator-box:active {
  animation: bounce 0.3s ease-in-out;
}

@keyframes bounce {
  0% { transform: scale(1); }
  20% {transform:scale(0.9)}
  40% {transform:scale(1)}
  60% { transform: scale(0.9); }
  80% {transform:scale(1)}
  100% { transform: scale(0.9); }
}

/*
Schatteneffekt
.calculator-box:active {
  transform: translateY(3px);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}
*/

.box-image{
  max-width: 100%; /* Bild bleibt innerhalb der Box */
  max-height: 100%; /* Verhindert, dass das Bild größer als die Box wird */
  object-fit: cover; /* Stellt sicher, dass das Bild skaliert wird, ohne verzerrt zu werden */
  object-position: top;
  display: block;
  margin: auto; /* Zentriert das Bild */
  width:100%;
  height:252px;
  border-top-left-radius: 16px; /* Abgerundete Ecken oben links */
  border-top-right-radius: 16px; /* Abgerundete Ecken oben rechts */
  overflow:hidden;
}
.sub-box {
  margin-left:24px;
  margin-right:24px;
  margin-top:60px;
}

.sub-box h2 {
  margin-bottom:10px;

}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background: #2e3b4e;
  color: white;
}

.fullscreen-icon {
    pointer-events: auto !important;
  cursor: pointer;
  width: 40px; /* Falls Größe angepasst werden muss */
  height: 40px;
}




/*--------------------*/


/* Anpassung für iPad 6 im Querformat */
@media screen and (max-width: 1024px) {
  .calculator {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .calculator-box {
    width: 90%; /* Breite reduzieren */
    max-width: 400px; /* Maximal 400px */
    height: auto;
    padding-bottom:24px;
  }

  .box-image {
    width: 100%; /* Bilder skalieren */
    height: auto;
  }

  .sub-box h2 {
    font-size: 18px; /* Schriftgröße anpassen */
  }

  .sub-box p {
    font-size: 14px;
  }

  .main-title {
    font-size: 24px; /* Titel kleiner machen */
  }

  .fullscreen-icon {
    width: 30px; /* Fullscreen-Icon verkleinern */
  }
}

/*Querformat erzwingen*/
@media screen and (orientation: portrait) {
    body {
        transform: rotate(90deg);
        transform-origin: center;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}