*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;   
}

/* Global Vars------------------------ */
:root{

   /* Colors */
   --bgColor:   #F1F1F1;
   --fgColor:   #2C6777;
   --fgColor2:  #C7D7E4;
   --btnColor:  rgb(74, 74, 74);
   --bordColor: black;
   --txtColor1: black;
   --txtColor2: white;

   /* Standard, font-size, border ,padding, margin usw. */
   --micro:      0.125rem;  
   --mini:       calc( var(--micro) * 1.5 );
   --mini-x:     calc( var(--micro) * 2 );
   --small:      calc( var(--micro) * 4 );
   --small-x:    calc( var(--micro) * 6 );
   --normal:     calc( var(--micro) * 8 );
   --normal-x:   calc( var(--micro) * 9 );
   --large:      calc( var(--micro) * 10 );
   --large-x:      calc( var(--micro) * 14 );
   --big:        calc( var(--micro) * 16 );
   --big-x:      calc( var(--micro) * 20 );
   --huge:       calc( var(--micro) * 30 );
}

/* Flex-Classes  */
.flex{
   display: flex;
}

.column{
   flex-direction: column;
}

.ju-co-ce{
   justify-content: center;
}

.al-it-ce{
   align-items: center;
}

.ju-co-sp{
   justify-content: space-between;
}

.al-it-sp{
   align-items: space-between;
}

.gap-small{
   gap: var(--small);
}

.gap-normal{
   gap: var(--normal);
}

.gap-large{
   gap: var(--large);
}

.gap-big{
   gap: var(--big);
}

.wrap{
   flex-wrap: wrap;
}

/* Text Classes */
.small-text{
   font-size: var(--small);
}

.small-x-text{
   font-size: var(--small-x);
}

.normal-text{
   font-size: var(--normal);
}

.normal-text-x{
   font-size: var(--normal);
}

.large-text{
   font-size: var(--large);
}

.big-text{
   font-size: var(--big);
}

.more-big-text{
   font-size: var(--big-x);
}

.scroll{
   overflow-y: scroll;
}

.min-height{
   min-height: var(--huge);
   max-height: 70vh;
}

/* nur Typselektoren ---------------------------------*/
body{
   background-color: var(--bgColor);
   font-family: Arial, Helvetica, sans-serif;
}

h2{
   font-size: var(--normal-x);
}

header{
   height:var(--huge);
   align-items: center;
   color: var(--txtColor2);
   background-color: var(--fgColor);
   padding: var(--small);
   box-shadow: 0 var(--mini) var(--mini) var(--bordColor);

   button{
      background-color: transparent;
      border:none;
      color: var(--txtColor2);
   }

   span{
      background-color: var(--fgColor2);
      color: var(--txtColor1);
      padding: var(--mini) var(--small-x);
      margin-right: var(--large);
      border-radius: var(--huge);
   }
}

dialog{
   margin: var(--normal) auto;
   border-radius: var(--small);
   border: var(--micro) solid var(--bordColor);
   background-color: var(--fgColor2);
   width: 40rem;
   transition: margin .4s ease-out;
   overflow-x: hidden;
   z-index:10000;
   
   &[open] {
     margin: var(--normal) auto;
      
     @starting-style {
      margin: -100vh auto;
     }
   }
 


   input{ 
      width:100%; 
      padding: var(--mini-x); 
      font-size: var(--normal);
   }

   h3{
      color: var(--txtColor2);
      width:100%;
      background-color: var(--fgColor);
      padding: var(--small);
   }

   div{
      padding: var(--small);
   }
   &::backdrop{
      background-color: rgba(0, 0, 0, 0.533);
   }

}

button{
   border: 1px solid black;
   border-radius: var(--mini);
   font-size: var(--normal);
   padding: var(--mini-x)
}


fieldset{
   border: none;

   legend{
      color: var(--txtColor2);
      background-color: var(--fgColor);
      border-radius: var(--big);
      padding: var(--mini) var(--normal);
   }
}

[type=number]{
   width: var(--huge);
}

main{
   padding: var(--small);

   section{
      padding: var(--small);
      overflow-y: scroll;
      overflow-x: hidden;
      height: calc( 100vh - var(--big) - var(--big-x) - var(--small) );
   }

   section:nth-of-type(1){
      width: 32rem;
   }

   section:nth-of-type(2){
      width: 100%;
   }

   section:nth-of-type(3){
      width: 320px;
   }

   textarea{
      width:100%;
      resize : none;
      height:3rem;
   }

   input[type="text"]{
      flex-basis: 100%;
   }

   label, fieldset{
      padding: var(--mini-x);
      background-color: var(--fgColor2);   
      border-radius: var(--mini-x);
      gap:var(--mini-x);
      font-weight: bold;
      font-size: var(--normal);
   }
}

/* Pseudoklassen -----------------------------*/
button:hover{
   transform: scale(1.05);
   color: var(--txtColor2);
   background-color: var(--fgColor);
   font-weight: 900;
   transition: all 0.1s ease-in-out;
}

[contenteditable]{
   background-color: #f1f1f17b;
}


/* Klassen und Ids ---------------------------*/

#point-list{
     
}

#qr-code{
   width: 230px;
}

.firework{
   position:absolute;
   display:none;
   top:3rem;
   left:-25%;
   width:150%;
   z-index: 10000;
   overflow-x: hidden;
}

.help-panel{
   background-color: var(--fgColor);
   color: var(--bgColor);
   font-size: var(--normal);
   border-radius: var(--normal);
   margin-top:2rem;
   padding: var(--small);

   &[open] summary{
      margin-bottom: var(--small);

      @starting-style {
         margin-bottom: 0;
      }
   }
}

.fixed{  
   top:0;
   z-index: 1000;
   position: fixed;
   width:100%;
}

.point{
   border: 1px solid black;
   padding: var(--mini-x);
   border-radius: var(--mini-x);

   label
   {
      font-size: var(--small-x);
      
   }



   details{
      display: flex;
      flex-direction: column;
      font-size: small;
      gap: var(--small);
    

      *{

         width:100%;
         margin-bottom: var(--mini-x);
      }
      
   }

}

.panel{
   background-color: #2880CA; 
   padding: var(--micro);
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   
}

.number-coord{
   background-color: black;
   color: var(--txtColor2);
   border-radius: var(--normal);
   font-size: var(--normal-x);
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--large);
   height: var(--large);
   padding: var(--mini-x);
}

.panel-number{
   margin-left: -1rem;
   margin-top: -.5rem;
}

.panel-img{
   width:100%;
}

#options > button{
   background-color: var(--fgColor);
   color: var(--txtColor2);
}

img, video, audio{
      width:100%;
}

.fa-btn{
   background-color: transparent;
   border:none;
   color: var(--txtColor2);
   font-size: var(--large);
   color: var(--txtColor1);
   width: var(--large-x);
}

#info-modal, #wait-modal{
   padding:var(--small);
}

#wait-modal{
   img{
      width:2rem;
   }
}

.type-select{
   max-width: calc( 100% - 6rem);
}

.content-options{
   background-color: var(--fgColor2);
   padding-right: var(--mini-x);
}

.wrong-input{
   border: 2px solid red;
   animation: shake 1s ease-out; 
}

@keyframes shake {
   0%{ transform: rotate(2deg);}
   10%{ transform: rotate(-3deg);}
   20%{ transform: rotate(3deg);}
   30%{ transform: rotate(-2deg);}
   40%{ transform: rotate(2deg);}
   50%{ transform: rotate(-1.5deg);}
   60%{ transform: rotate(1.5deg);}
   70%{ transform: rotate(-1deg);}
   80%{ transform: rotate(1deg);}
   90%{ transform: rotate(0.5deg);}
   100%{ transform: rotate(0deg);}
}

#viewer-map{
   width: 100%; height:calc(100vh - 3rem); margin-top: 3rem;
}

[disabled]:hover{
  transform: scale(1);
  opacity:0.05;
}

[disabled]{
   opacity:0.3;
 }

/* Responsive / Adaptive ---------------------*/
/* Tablet */
@media only screen and (max-width: 1024px) {

    main{

       flex-direction: column;

       section:nth-of-type(1){
           width: 100%;
       }

       section:nth-of-type(3){
         width: 100%;
      }
   }

   header{

      height: initial;
   }

   dialog{ width: 80%}
}

/* Phone */
@media only screen and (max-width: 800px) {
   dialog{ width: 100%; max-width: 98%; max-height: 98% }
}