@media (orientation: landscape) {
  :root {
    --edge: calc(100vw/12);
    --topOff: calc(0.75*var(--edge));
  }
}

@media (orientation: portrait) {
  :root {
    --edge: calc(100vw/7);
    --topOff: calc(1.75*var(--edge));
  }
}

body {
    background-color: lightblue;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px; 
  }
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;  
  }
  
  .modal-content p {
    font-size: 12px; /* Schriftgröße für Absätze */
  } 
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  
  #anleitung {
      background-color: white;
      color: gray; 
      font-size: 2vh;     
      font-weight: bold;      
      text-decoration: none;
      display: inline-block;
      padding: 0.1em;
      border: none;
      cursor: pointer;
      position: absolute;
      width: 50%; 
         
  }
 


  /* Blockiert den Rechtsklick-Effekt beim Touch auf mobile devices */
img{
  -webkit-touch-callout: none !important; 
}

html * {
  font-family: "Source Sans Pro", sans-serif;
}

  p {
    font-family: verdana;
  }

  [class*="col-"] {
    float: left;
    padding: 2vh;
    /* border: 1px solid red; */
  }
  
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}


  
  
    #puzzleImage, #puzzleCanvas {
      width: calc(5*var(--edge));
      height: calc(5*var(--edge));
      position: absolute;
      background-repeat: no-repeat;
    }

    @media (orientation: landscape) { 
      
    p.title_main {
      text-align: center;
      color: white;
      font-weight: bold;
      font-style: italic;
      font-size: 6vh;
    }
  
    p.title_sub1 {
      text-align: center;
      color: white;
      font-weight: bold;
      font-style: italic;
      font-size: 4vh;
    }
  
    #nameInput [type=text] {
      height: 5.3vh;
      font-size: 3.2vh;
      padding: 1.2vh 1.2vh;          
      border: 0.3vh solid red;
      border-radius: 0.2vh;
    }
    #nameButton {
      height: 5.3vh;
      font-size: 2.6vh;
      padding: 1.2vh 1.2vh;          
      border: 0.3vh solid black;
      color:white;
      background-color: blue;      
    }

    .grid1 {
      display: grid;
      grid-template: var(--edge) var(--edge) var(--edge)  var(--edge) / var(--edge) var(--edge) var(--edge);
      grid-gap: 0px;
      background-color: #ffffff;
      padding: none;
      border: solid;
      margin: none;
      left: 0vw;
      top: calc(var(--topOff) + var(--edge));
      width: calc(3.05*var(--edge));
      height: calc(4.05*var(--edge));
      position: absolute;
      z-index: 1;
    }

    #fancy_land_left {
      left: calc(-3.5*var(--edge));
      top: var(--edge);
      width: calc(3.05*var(--edge));
      height: calc(4.05*var(--edge));
      position: absolute;
      z-index: 4;
    }
    
    .grid2 {
      display: grid;
      grid-template: var(--edge) var(--edge) var(--edge) var(--edge) var(--edge) / var(--edge) var(--edge) var(--edge) var(--edge) var(--edge);
      grid-gap: 0px;
      background-color: #ffffff;
      padding: 0px;
      margin: none;
      border: solid black;    
      left: calc(3.5*var(--edge));
      top: calc(var(--topOff));
      width: calc(5*var(--edge)+1);
      height: calc(5*var(--edge)+1);
      position: absolute;
      z-index: 1;
    }
    
    .grid3 {
      display: grid;
      grid-template: var(--edge) var(--edge) var(--edge) var(--edge) / var(--edge) var(--edge) var(--edge);
      grid-gap: 0px;
      background-color: #ffffff;
      padding: none;
      border: solid;
      margin: none;
      left: calc(9*var(--edge));
      top: calc(var(--topOff) + var(--edge));
      width: calc(3.05*var(--edge));
      height: calc(4.05*var(--edge));
      position: absolute;
      z-index: 1;
    }

    #fancy_land_right {
      left: calc(5.5*var(--edge));
      top: var(--edge);
      width: calc(3.05*var(--edge));
      height: calc(4.05*var(--edge));
      position: absolute;
      z-index: 4;
    }

    #welcome {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: calc(var(--topOff));
      left: calc(0*var(--edge));
      width: calc(3*var(--edge));
      height: calc(0.75*var(--edge));
      padding: none;          
      margin: none;     
      text-align: center;
      color: whitesmoke;
      font-weight: bold;
      font-size: 1.7vw;
      background-color: lightblue;
    }
    
    .puzzle2come {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: calc(var(--topOff));
      left: calc(9*var(--edge));
      width: calc(3*var(--edge));
      height: calc(0.75*var(--edge));
      padding: none;
      border: solid black;    
      margin: none;     
      text-align: center;
      color: rgb(100, 150, 115);
      font-weight: bold;
      font-size: 1.4vw;
      background-color: white;
      cursor: pointer;      
    }
  }
  
  #container {    
    grid-template: 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh /10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw;      
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 0;
  }

  /* Hier kommen die pic-tiles für das drag and drop */
  .draggable {    
    position: absolute;
    width: var(--edge);
    height: var(--edge);
    padding-left: 0px; 
    padding-right: 0px; 
    margin: none;
    border: none;
    touch-action: none;
    z-index: 2;    
  }

  .draggable2 {    
    position: absolute;
    width: var(--edge);
    height: var(--edge);
    padding-left: 0px; 
    padding-right: 0px; 
    margin: none;
    border: none;
    touch-action: none;
    z-index: 2;    
  }


   /*das sind die Tagestürchen im Adventskalender*/
  .adv-btn {  
    background-color: rgb(228, 59, 59);
    color: white;
    font-family: "brush script mt", cursive;
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
    border: 0.5vh solid rgb(100, 150, 115);   
    padding: none;
    margin: none;  
    cursor: pointer;    
    width: calc(1.01*var(--edge));
    height: calc(1.01*var(--edge));
    position: absolute;  
    z-index: 3; 
  }

  #resetButton {
    position: absolute; 
    top: -4vh; 
    left: 37vh; 
    height: 2.2vh; 
    width:auto; 
    font-size: 1.4vh
  }

  #config {
    position: absolute; 
    top: -4vh; 
    left: 0vh
  }
  #endSave {
    display: flex;
    align-items: center;    
    justify-content: center;
    position: absolute;
    top: calc(var(--edge));
    left: calc(9*var(--edge));
    width: calc(3*var(--edge));
    height: calc(0.75*var(--edge));
    border-radius: calc(0.1*var(--edge));
    padding: none;
    border: solid black;    
    margin: none;   
    color: whitesmoke;
    font-weight: bold;
    background-color: lightblue;
    font-size: 1.5vw;
    cursor: pointer;
  } 

  #santa {
    position: absolute; 
    left: 0vw; 
    top: 0vh; 
    width: calc(5*var(--edge));
    height: calc(5*var(--edge));
    position: absolute;
  } 

  #santa img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Optional: Passt das Bild an, um das gesamte Feld auszufüllen */
}

  #servus {
    position: absolute;     
    top: calc(0.8*var(--edge)); 
    left: calc(3.5*var(--edge))    
  }

  h2 {
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 3vh;
  }

  #exitSign {
    position: absolute; 
    top: calc(4.5*var(--edge)); 
    left: calc(5.2*var(--edge));
    width: calc(0.5*var(--edge)); 
    height: calc(0.5*var(--edge)); 
    object-fit: cover; 
  }

  @media (orientation: portrait) {

    p.title_main {
      text-align: center;
      color: white;
      font-weight: bold;
      font-style: italic;
      font-size: 6vw;
    }
  
    p.title_sub1 {
      text-align: center;
      color: white;
      font-weight: bold;
      font-style: italic;
      font-size: 4vw;
    }
  
    #nameInput [type=text] {
      height: 5.3vw;
      font-size: 3.2vw;
      padding: 1.2vw 1.2vw;
          
      border: 0.3vw solid red;
      border-radius: 0.2vw;
    }
    #nameButton {
      height: 5.3vw;
      font-size: 2.6vw;
      padding: 1.2vw 1.2vw;          
      border: 0.3vw solid black;
      color:white;
      background-color: blue;      
    }

    #welcome {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: calc(0.5*var(--topOff));
      left: calc(1*var(--edge));
      width: calc(5*var(--edge));
      height: calc(0.5*var(--edge));
      padding: none;          
      margin: none;     
      text-align: center;
      color: whitesmoke;
      font-weight: bold;
      font-size: 2.5vh;
      background-color: lightblue;
    }

  /* Hier kommen die grids für das drag and drop */
  #container {    
    grid-template: 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh /10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw;
    background-color: #f38e8e;   
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    position: absolute;
  }

  .grid1 {
    display: grid;
    grid-template: var(--edge) var(--edge) var(--edge)  var(--edge) / var(--edge) var(--edge) var(--edge);
    grid-gap: 0px;
    background-color: #ffffff;
    padding: none;
    border: solid;
    border-right: none;
    margin: none;
    left: calc(0.5*var(--edge));
    top: calc(var(--topOff) + 5.5*var(--edge));
    width: calc(3*var(--edge));
    height: calc(4*var(--edge));
    position: absolute;
    z-index: 1;
  }
  
  .grid2 {
    display: grid;
    grid-template: var(--edge) var(--edge) var(--edge) var(--edge) var(--edge) / var(--edge) var(--edge) var(--edge) var(--edge) var(--edge);
    grid-gap: 0px;
    background-color: #ffffff;
    padding: 0px;
    margin: none;
    border: solid black;    
    left: calc(1*var(--edge));
    top: calc(var(--topOff));
    width: calc(5*var(--edge));
    height: calc(5*var(--edge));
    position: absolute;
    z-index: 1;
  }
  
  .grid3 {
    display: grid;
    grid-template: var(--edge) var(--edge) var(--edge) var(--edge) / var(--edge) var(--edge) var(--edge);
    grid-gap: 0px;
    background-color: #ffffff;
    padding: none;
    border: solid;
    border-left: none;
    margin: none;
    left:  calc(3.5*var(--edge));
    top: calc(var(--topOff) + 5.5*var(--edge));
    width: calc(3*var(--edge));
    height: calc(4*var(--edge));
    position: absolute;
    z-index: 1;
  }

  #fancy_quer {
    left: calc(-0.5*var(--edge));
    top: calc(5.5*var(--edge));
    width: calc(6*var(--edge));
    height: calc(4*var(--edge));
    position: absolute;
    z-index: 4;
  }

  .adv-btn {      
    background-color: rgb(228, 59, 59);
    color: white;
    font-family: "brush script mt", cursive;
    text-align: center;
    font-size: 2.5vh;
    font-weight: bold;
    border: 0.5vh solid rgb(100, 150, 115);   
    padding: none;
    margin: none;  
    cursor: pointer;    
    width: calc(1*var(--edge));
    height: calc(1*var(--edge));
    position: absolute;  
    z-index: 3; 
    }

  .draggable {    
    position: absolute;
    width: var(--edge);
    height: var(--edge);
    padding-left: 0px; 
    padding-right: 0px; 
    margin: none;
    border: none;
    touch-action: none;
    z-index: 2;    
  }

  #endSave {
    display: flex;
    align-items: center;    
    justify-content: center;
    position: absolute;
    top: calc(10.5*var(--edge) + var(--topOff));
    left: calc(1*var(--edge));
    width: calc(5*var(--edge));
    height: calc(1*var(--edge));
    border-radius: calc(0.1*var(--edge));
    padding: none;    
    margin: none;   
    height: calc(0.5*var(--edge));
    color: whitesmoke;
    font-weight: bold;
    background-color: lightblue;
    font-size: 2.5vh;
    cursor: pointer;
  } 

  .puzzle2come {
    display: flex;
    align-items: center;    
    justify-content: center;
    position: absolute;
    top: calc(10*var(--edge) + var(--topOff));
    left: calc(1*var(--edge));
    width: calc(5*var(--edge));
    height: calc(1*var(--edge));
    padding: none;
    border: solid black;    
    margin: none;     
    text-align: center;
    color: rgb(100, 150, 115);
    font-weight: bold;
    font-size: 1.8vh;
    background-color: white;      
  }

  #santa {
    position: absolute; 
    left: 0vw; 
    top: 0vh; 
    width: calc(5*var(--edge));
    height: calc(5*var(--edge));
    position: absolute;
  } 

  #santa img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Optional: Passt das Bild an, um das gesamte Feld auszufüllen */
}

  #servus {
    position: absolute;     
    top: calc(0.8*var(--edge)); 
    left: calc(3.5*var(--edge))    
  }

  h2 {
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 3vw;
  }

  #exitSign {
    position: absolute; 
    top: calc(4.5*var(--edge)); 
    left: calc(5.2*var(--edge));
    width: calc(0.5*var(--edge)); 
    height: calc(0.5*var(--edge)); 
    object-fit: cover; 
  }
  }