/* ==========================================================================
   Main Stylesheet for Extrawelt
   ========================================================================== */

/* --- Normalize & Base Reset (for cross-browser consistency) --- */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:100%
}



a {
    background:0 0
}

a:active, a:hover {
    outline:0
}



html {
    background: #122427;
    touch-action: manipulation;
    font-size: 15px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style:preserve-3d
}

body {
    background: #122427;
    font-family: apertura, "Helvetica Neue", Arial, sans-serif;
    color: #fbf7f0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    fill: currentColor;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
    -webkit-perspective: 0;
    perspective: 0;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin:0 0
   
}

  .page-frame {
    margin: 20px; /* Abstand zum Bildschirmrand */
    border: 1px solid #b2a794; /* Dünner Rahmen */
    border-radius: 16px; /* Abgerundete Ecken */
    padding: 20px; /* Innenabstand */
    background-color: #fbf7f0; /* Optional: dunkler Hintergrund innen */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05); /* Optional: weicher Schatten */
  }

body * {
    -webkit-user-drag: none;
    -moz-user-drag: -moz-none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default
}



a, a:active, a:visited {
    color: #b2a794;
    text-decoration:none
}

a:active, a:hover {
    color:#b2a794
}


@media only screen and (max-width: 600px) {
    html {
        font-size:14px
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size:13px
    }
}


.close-btn {
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(-50px, -50px, 0);
    transform: translate3d(-50px, -50px, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    width: 40px;
    height: 40px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    z-index: 3001;
    cursor: pointer;
    color:#1E7A86
}

.close-btn .icon {
    display: block;
    width: 30px;
    height: 30px;
    fill: #1E7A86;
    cursor: pointer;
    margin-left: 5px;
    margin-top: 5px;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transform: translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}

.close-btn:after {
    content: '';
    position: absolute;
    display: block;
    left: -5px;
    top: -5px;
    width: 40px;
    height:40px
}

.close-btn.active {
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
    -webkit-transform: translate3d(20px, 20px, 0);
    transform:translate3d(20px, 20px, 0)
}

.close-btn.active:active .icon, .close-btn.active:hover .icon {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    margin-left: 0;
    margin-top:0
}


.about-btn {
    position: absolute;
    right: 0;
    top: 10px;
    width: 10%;
    max-width: 60px;
    height: 120px;
    z-index:550
}

.about-btn a {
    display: block;
    position: absolute;
    left: 50%;
    top: 45px;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(90deg);
    transform: translate3d(-50%, 0, 0) rotate(90deg);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 40px;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05rem;
    z-index: 50;
    cursor: pointer;
    width: 90px;
    border-radius: 4px;
    color: #b3b3b3;
    -webkit-transition-duration: .3s;
    transition-duration:.3s
}

.about-btn a:hover {
    color: #1E7A86;
    text-shadow:0 0 1px rgba(0, 0, 0, .1)
}



.copyright {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 10%;
    max-width: 60px;
    height: 80px;
    z-index:550
}

.copyright span {
    font-family: HelveticaNeue, Arial, sans-serif;
    text-align: right;
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 50;
    cursor: default;
    line-height: 40px;
    width: 70px;
    height: 40px;
    color: #fbf7f0;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translate3d(-50%, 0, 0) rotate(90deg);
    transform:translate3d(-50%, 0, 0) rotate(90deg)
}

.copyright.dark-mode span {
    color:rgba(255, 255, 255, .3)
}

.copyright.light-mode span {
    color:rgba(0, 0, 0, .3)
}




/* HEX */
/* Kontraste */
$myColor-01: #607b89 // Lynch
$myColor-02: #597380 // Cutty Sark
$myColor-03: #cfdee6 // Botticelli
$myColor-04: #60a0bf // Fountain Blue
$myColor-05: #ccac8f // Sorrell Brown
$myColor-06: #806b59 // Cement
$myColor-07: #e6d9cf // Pearl Bush
$myColor-08: #bf8d60 // Twine
$myColor-09: #fbf7f0 // Bianca
$myColor-10: #f5f3ef // Penguin White
$myColor-11: #f4f0ec // Isabelline
$myColor-12: #738678 // Xanadu
$myColor-13: #738276 // Smoke
$myColor-14: #004225 // British racing green
$myColor-15: #f4f0ec // 
$myColor-16: #E7FEFF // Crayola Baby Blue


/* RGBA */
/* Kontraste */
$myColor-1: rgba(7,184,9,1) // Lynch
$myColor-2: rgba(151,56,0,1) // Cutty Sark
$myColor-3: rgba(253,238,6,1) // Botticelli
$myColor-4: rgba(10,11,15,1) // Fountain Blue
$myColor-5: rgba(202,200,15,1) // Sorrell Brown
$myColor-6: rgba(6,181,9,1) // Cement
$myColor-7: rgba(109,156,15,1) // Pearl Bush
$myColor-8: rgba(248,214,0,1) // Twine

/* HSL */
/* Kontraste */


$myColor-1: hsla(85,236,95,1) // Lynch
$myColor-2: hsla(15,255,75,1) // Cutty Sark
$myColor-3: hsla(39,250,129,1) // Botticelli
$myColor-4: hsla(161,51,12,1) // Fountain Blue
$myColor-5: hsla(42,219,108,1) // Sorrell Brown
$myColor-6: hsla(85,238,93,1) // Cement
$myColor-7: hsla(56,210,85,1) // Pearl Bush
$myColor-8: hsla(36,255,124,1) // Twine