/*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE *//*RESET CODE ABOVE */



:root {

    --dark-text: hsl(236, 14%, 40%);
    --middle-text: hsl(236, 11%, 50%); 
    --light-text: hsl(236, 9%, 52%);
    --ultra-light-text: hsl(0, 0%, 60%); 
    --comment-text: hsl(0, 0%, 40%);

    --ultra-dark-background: hsl(0, 0%, 77%);
    --dark-background: hsl(0, 0%, 79%);
    --middle-background: hsl(0, 0%, 81%);
    --light-background: hsl(0, 0%, 83%);

    --image-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000'><filter id='roughpaper'><feTurbulence type='fractalNoise' baseFrequency='0.0005' result='noise' numOctaves='7' /><feDiffuseLighting in='noise' lighting-color='hsl(0, 0%, 100%)' surfaceScale='10'><feDistantLight azimuth='90' elevation='40' /></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23roughpaper)' /></svg>");

    --dark-alpha: hsla(35, 0%, 85%, 0.9);
    --light-alpha: hsla(210, 22%, 70%, 0.9);
    --bevel-alpha: hsla(210, 22%, 15%, 0.5);
    
    --ultra-dark-shadow:rgba(0, 0, 0, 0.45);
    --dark-shadow:rgba(0, 0, 0, 0.400);
    --middle-shadow:rgba(0, 0, 0, 0.200);
    --light-shadow:rgba(0, 0, 0, 0.150);

    --dark-glow:rgba(255, 255, 255, 0.8);
    --light-glow:rgba(255, 255, 255, 0.9);

    --bevel-top: hsl(0, 0%, 89%, .7);
    --bevel-bottom: hsla(0, 0%, 70%, .7);
    --bevel-left: hsla(0, 0%, 65%, .7);
    --bevel-right:hsla(0, 0%, 90%, 0.7);
    
    --header-height: 110px;
    --header-scale: 1;
    --hide-value-header: -210px;
    --hide-value-nav: -100px;
    --hide-value-preview: -180px;
    --hide-value-about: -320px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {

        --dark-text: hsl(240, 3%, 60%);
        --middle-text: hsl(240, 10%, 50%);
        --light-text: hsl(240, 4%, 49%);
        --ultra-light-text: hsl(225, 6%, 6%);
        --comment-text: hsl(0, 0%, 30%);

        --ultra-dark-background: hsl(228, 12%, 12%);
        --dark-background: hsl(228, 12%, 13%);
        --middle-background: hsl(228, 12.5%, 14%);
        --light-background: hsl(228, 13%, 15%);

        --image-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000'><filter id='roughpaper'><feTurbulence type='fractalNoise' baseFrequency='0.06' result='noise' numOctaves='5' /><feDiffuseLighting in='noise' lighting-color='hsl(0, 0%, 100%)' surfaceScale='.05'><feDistantLight azimuth='100' elevation='1' /></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23roughpaper)' /></svg>");

        --dark-alpha: hsla(210, 12%, 3%, 0.8);
        --light-alpha: hsla(213, 12%, 4%, 0.8);
        --bevel-alpha: hsla(210, 20%, 35%, 0.6);
        
        --ultra-dark-shadow:rgba(0, 0, 0, 0.700);
        --dark-shadow:rgba(0, 0, 0, 0.500);
        --middle-shadow:rgba(0, 0, 0, 0.400);
        --light-shadow:rgba(0, 0, 0, 0.150);

        --dark-glow:rgba(255, 255, 255, 0.1);
        --light-glow:rgba(255, 255, 255, 0.2);
        --ultra-light-glow:rgba(255, 255, 255, 0.5);
        
        --bevel-top: hsla(213, 18%, 25%, .3);
        --bevel-bottom: hsl(229, 10%, 5%, .3);
        --bevel-left: hsla(229, 9%, 5%, .3);
        --bevel-right:hsla(213, 18%, 35%, .3);
           
    }
}


h1 {
    
    font-family: 'Roboto', sans-serif;
    font-Size: 35px;
    -webkit-font-smoothing: antialiased;  /* für WebKit/Edge */
    -moz-osx-font-smoothing: grayscale;   /* für Firefox */
    font-weight: 200;
    color: var(--dark-text);
    text-transform: uppercase;   
    z-index: 0; 
}
h2 {
    font-family: 'Roboto', sans-serif;
    font-Size: 20px;
    font-weight: 400;
    color: var(--ultra-light-text);
    text-transform:uppercase;   
    cursor: pointer;    
}


h3 {
    font-family: 'Source Code Pro', monospace;
    font-size: 23px;
    font-weight: 200;
    word-spacing: -2px;
    text-shadow:
     0px 0px 1px hsla(var(--index), 40%, 30%, .5); /* blurred shadow for depth */
    color: hsl(var(--index), 60%, 47%);
    opacity: 1;
    transform: scale(1);
    transition: transform .8s ease-out;
    margin: 10px 0;   

    @media (prefers-color-scheme: dark) {
        color:hsl(var(--index), 85%, 50%);
        opacity: .77; 
       text-shadow:
        none;
    }
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 30px;
    color:hsl(var(--index), 65%, 47%);
    text-shadow:
     0px 0px 2px hsla(var(--index), 40%, 35%, .4); /* blurred shadow for depth */
    text-transform: uppercase;

    @media (prefers-color-scheme: dark) {
        color:hsl(var(--index), 80%, 60%);
        text-shadow:
        0px 0px 15px hsl(var(--index), 85%, 50%, 0.7); 
    }
 
    pointer-events: none;
}
/*
@media (prefers-color-scheme: dark) {
    h4 {
    
    --shadow-radius: 1;
    --flood-opacity: 0.35;
    --color-saturation: 60%;
    --color-lightness: 15%;
    
    /*    
    text-shadow:   
        0px 1px 2px var(--light-shadow), /*unten*/
       /* 0px -1px 1px var(--dark-glow),  /*oben*/
       /* -1px 0px 1px var(--dark-shadow), /*links*/
       /* 1px -1px 1px var(--light-glow); /*rechts*/
    /*}*/
/*}*/


h5 {
    font-family:'Source Code Pro', monospace;
    font-size:23px;
    font-weight: 200;
    transform: scale(1);
    color:var(--light-text);
    word-spacing: -2px;
    transition: transform 1s ease-out;
    margin: 0;
    padding: 0;   
}

a {
    font-family: 'Source Code Pro', monospace;
    text-decoration: none;   
    transition: color .3s ease;
}

p {
    font-family: 'Source Code Pro', monospace;
    color:var(--middle-text);
    font-size:18px;
    font-weight: 300;
    line-height: 1.6;   
}


.tooltip {
  position: fixed;

  background-color: var(--light-alpha);
  color: var(--light-text);

  /* Größe passt sich dem Inhalt an */
  display: inline-block;
  width: fit-content;        /* Box passt sich exakt dem Text an */
  max-width: 220px;
              /* bricht bei zu langem Text um */
  height: auto;
  white-space: normal; /* Text darf umbrechen */
  overflow-wrap: break-word; /* lange Wörter umbrechen */
  word-break: break-word;     /* zusätzliche Sicherheit */

  border-radius: 10px;
  border: 10px solid;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-color: var(--light-alpha);
  box-shadow: 0 0 13px var(--dark-shadow);
  
  pointer-events: none;
  
  transform: scale(0);
  transform-origin: left top;
  transition: transform 0.25s ease;
  
  font-family:'Source Code Pro', monospace;
  font-size: 14px;
  font-weight: 200;
  color:var(--middle-text);
  word-spacing: -2px;
  text-align: left;

  z-index: 9999;
}  

.comment 
{
    color:var(--comment-text);
}

.icon 
{
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 40px;
    transform-origin: center;
    color:var(--light-text);
    cursor:pointer;
    transition: color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
.icon:hover
{
    transform: scale(1.15);
    transition: transform .3s ease-out;
}   
a h2:hover {
    color: var(--middle-text);
    cursor:pointer;
}
}

a.active h2{ 
        color:var(--middle-text); 
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);    
}

a h2:active{
    color: var(--middle-text);
    transition: color .1s ease;
}
@media (hover: hover) and (pointer: fine) {
a h3:hover {
    transform: scale(1.15);
    transition: transform .3s ease-out;
    cursor:pointer;
}

a h5:hover {
    transform: scale(1.15);
    transition: transform .5s ease-out;
    cursor:pointer;   
}
}

body {
    overscroll-behavior-y: contain;
    overflow: hidden;
    touch-action: none;
    display: flex;
    flex-direction: column;
    justify-content: center; /* horizontale Zentrierung */
    align-content: center; 
    background-color: none;
    background-image: var(--image-background), linear-gradient(var(--light-background), var(--light-background));
    background-blend-mode:normal;
    background-repeat: repeat;
    transform-origin: center;
    height: 100%;
    width: 100%;   
    visibility: hidden; /*wird durch main.js sichtbar gesetzt nachdem die skalierung berechnet wurde*/
    z-index: -99;
    @media (prefers-color-scheme: dark) {
        background-color: var(--light-background);
        background-image: none;
    }
}

.noselect {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}

.scrollable {
  overscroll-behavior-y:auto;
  overflow: auto;
  touch-action: auto;
  background-image: none;
  background-color: var(--middle-background);
  flex-direction: row;
}