:root
{
	--color-itouring:           hsla(215, 84%,  22%, 1.0);
	--color-itouring-brighter:  hsla(215, 84%,  28%, 1.0);

	--color-vis-tour:           hsla(200, 100%, 20%, 1);
	--color-vis-tour-09:        hsla(200, 100%, 20%, 0.9);
	--color-vis-tour-08:        hsla(200, 100%, 20%, 0.8);
	--color-vis-tour-07:        hsla(200, 100%, 20%, 0.7);
	--color-vis-tour-05:        hsla(200, 100%, 20%, 0.5);
	--color-vis-tour-02:        hsla(200, 100%, 20%, 0.2);
	--color-vis-tour-01:        hsla(200, 100%, 20%, 0.1);

	--color-vis-navigator:      hsla(204, 100%, 50%, 1);
	--color-vis-navigator-08:   hsla(204, 100%, 50%, 0.8);
	--color-vis-navigator-05:   hsla(204, 100%, 50%, 0.5);
	--color-vis-navigator-02:   hsla(204, 100%, 50%, 0.2);
	--color-vis-navigator-01:   hsla(204, 100%, 50%, 0.1);

	--color-vis-trip:           hsla(202, 100%, 37%, 1);
	--color-vis-trip-08:        hsla(202, 100%, 37%, 0.8);
	--color-vis-trip-05:        hsla(202, 100%, 37%, 0.5);
	--color-vis-trip-02:        hsla(202, 100%, 37%, 0.2);

	--color-vis-explorer:       hsla(120, 100%, 20%, 1);
	--color-vis-explorer-08:    hsla(120, 100%, 20%, 0.8);
	--color-vis-explorer-05:    hsla(120, 100%, 20%, 0.5);
	--color-vis-explorer-03:    hsla(120, 100%, 20%, 0.3);
	--color-vis-explorer-02:    hsla(120, 100%, 20%, 0.2);

	--color-vis-gis:            hsla(300, 50%, 40%, 1);
	--color-vis-gis-08:         hsla(300, 50%, 40%, 0.8);
	--color-vis-gis-05:         hsla(300, 50%, 40%, 0.5);
	--color-vis-gis-02:         hsla(300, 50%, 40%, 0.2);

	--color-vis-player:         hsla(197, 78%, 30%, 1);
	--color-vis-player-08:      hsla(197, 78%, 30%, 0.8);
	--color-vis-player-05:      hsla(197, 78%, 30%, 0.5);
	--color-vis-player-02:      hsla(197, 78%, 30%, 0.2);

	--color-white:              rgba(255, 255, 255, 1);
	--color-white-08:           rgba(255, 255, 255, 0.8);
	--color-white-05:           rgba(255, 255, 255, 0.5);
	--color-white-02:           rgba(255, 255, 255, 0.2);

    --color-orange:             hsla( 35, 100%,  50%, 1.0);
    --color-orange-08:          hsla( 35, 100%,  50%, 0.8);
    --color-orange-05:          hsla( 35, 100%,  50%, 0.5);
    --color-orange-02:          hsla( 35, 100%,  50%, 0.2);
    --color-orange-dark:        hsla( 35, 100%,  40%, 1.0);

	--map-filter-brightness: 80%;
	--map-adressbox-background-color: #888;

    --impressum-background-color: #777;
    --dse-background-color: #666;
}

body
{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: sourcesanspro-light, Arial, Helvetica, sand-serif;
    font-size: calc(12px + 0.7vw);
    color: #FFF;
    overflow: hidden;  /* will be set to overflow-y:scroll after splashscreen */
    -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 640px)
{
    body
    {
        font-size: calc(12px + 1.2vw);
    }
}
@media (min-width: 1280px)
{
    body
    {
        font-size: 22px;
    }
}

* { box-sizing: border-box;}

h1,h2,h3
{
    margin: 0px;
    color: var(--headline-color);
    font-family: sourcesanspro-thin;
    user-select: none;
    word-wrap: break-word;
}

p
{
    margin: 5px;
    color: var(--text-color);
    user-select: none;
}

a
{
    font-family: "sourcesanspro-regular";
    text-decoration: none;
    cursor: pointer;
}
a:hover
{
    text-decoration: underline;
}

b
{
    font-family: 'sourcesanspro-regular' !important;
}

/* ====== splashscreen ======= */
.splashscreen
{
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-itouring);
    background-color: var(--splashscreen-background-color);
    z-index: 10000;
    transition: opacity 1s ease-in-out;
}
.splashscreen.fadeout
{
    opacity: 0;
}

.splashscreen img
{
    width: 50%;
    max-height: 50%;
    transition: all .5s ease-in-out;
    opacity: 0;
}
.splashscreen img.fadein
{
    opacity: 1;
}
.splashscreen img.fadeout
{
    opacity: 0;
}
@media (max-width: 480px)
{
    .splashscreen img
    {
        width: 80vw;
    }
}

/* ====== logo ======= */
.img.logo
{
    position: absolute;
    left: 20px;
    top: 20px;
    height: 70px;
    width: 100%;
    max-width: 40vw;
    z-index: 1000;
	background-repeat: no-repeat;
    background-size: contain;
}
@media (max-width: 800px)
{
    .img.logo
    {
        left: 10px;
        top: 10px;
    }
}
@media (max-width: 480px)
{
    .img.logo
    {
        left: 10px;
        top: 10px;
        max-width: 50vw;
    }
}


/* ====== boxes ======= */
.box
{
    position: relative;
    width: 100vw;
    xoverflow-x: hidden;
    xoverflow-y: visible;
}

/* === contact box with map*/

.box.contact
{
    width: 100vw;
    height: 60vh;
    min-height: 400px;
	background-color: var(--contact-box-background-color);
    clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
}
/* === map ==== */
#map
{
    position: absolute;
    right: 0px;
    width: 75vw;
    max-width: calc(100vw - 180px);
    min-width: calc(100vw - 350px);
    height: 100%;
}
#map .leaflet-tile-pane
{
  -webkit-filter: grayscale(100%) brightness(var(--map-filter-brightness));
  filter: grayscale(100%) brightness(var(--map-filter-brightness));
}
#map-adressbox
{
    position: absolute;
    height: 100%;
    width: 25vw;
    min-width: 180px;
    max-width: 350px;
    bottom: 0px;
    float: left;
    text-align: right;
    padding: 10vh 2vw 0vh 0vw;
    z-index: 1000;
    overflow: hidden;
	background-color: var(--map-adressbox-background-color);
}
#map-adressbox img
{
    width: 70%;
    max-width: 200px;
}
#map-adressbox *
{
	color: #FFF;
    font-size: 80%;
    line-height: 100%;
}
#map-adressbox a
{
    font-family: "sourcesanspro-regular";
    display: block;
    line-height: 140%;
}


/* === impressum box */

.box.impressum
{
    padding: 0 5vw 0 7vw;
    width: 100vw;
	max-height: 0px;
	overflow: hidden;
	transition-duration: 0.5s;
	background-color: var(--impressum-background-color);
	margin-top: -2px;
}
.box.impressum *
{
    color: #FFF;
    font-size: 90%;
}

.box.impressum p
{
    margin-left: 0px;
    margin-right: 0px;
}

.box.impressum h1
{
    font-family: "sourcesanspro-regular";
    font-size: 120%;
    margin-bottom: 10px;
    margin-left: -2vw;
}
.box.impressum h2
{
    font-family: "sourcesanspro-regular";
}

.box.impressum.open
{
    padding: 1vh 5vw 1vh 7vw;
    max-height: 700px;
}

/* === dse box */

.box.dse
{
    padding: 0 5vw 0 7vw;
    width: 100vw;
	max-height: 0px;
	overflow: hidden;
	transition-duration: 0.5s;
	background-color: var(--dse-background-color);
}
.box.dse p
{
    color: #FFF;
    font-size: 90%;
}
.box.dse h1
{
    color: #FFF;
    font-size: 120%;
    font-family: "sourcesanspro-regular";
    margin-bottom: 10px;
    margin-left: -2vw;
}
.box.dse h2
{
    color: #FFF;
    font-size: 100%;
    font-family: "sourcesanspro-regular";
}
.box.dse h3
{
    color: #FFF;
    font-size: 90%;
    font-family: "sourcesanspro-regular";
    text-align: left;
}

.box.dse h2:first-child
{
    margin-left: -2vw;
}
.box.dse ul h2:first-child
{
    margin-left: unset;
}

.box.dse.open
{
    padding: 1vh 5vw 1vh 7vw;
    max-height: 2000px;
}

/* ===== box footer ====== */

.box.footer
{
    width: 100vw;
    height: fit-content;
	background-color: var(--contact-box-background-color);
}



/*  === gui elements ================================================ */
/*  ================================================================= */

/* ====== buttons ======= */

.button
{
	display: inline-block;
    position: relative;
    padding: 0px 20px 0px 20px;
    height: 30px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(33,33,33,.1);
    transition: box-shadow .2s; 
}
.button:hover
{
    box-shadow: 0 0 20px rgba(33,33,33,.4);
}
.button:active
{
    transition: box-shadow .01s;
    box-shadow: 0 0 10px rgba(33,33,33,.8);
}

/*
.button.more
{
    position: absolute;
    right: -20px;
    bottom: -20px;
    height: 50px;
    width: 200px;
    border-radius: 20px;
}
.button.more:hover
{
    box-shadow: 0 0 0 0;
}
.button.more:active
{
    box-shadow: 0 0 0 0;
}
.card.vis-tour .button.more
{
    background-color: var(--color-vis-tour);
    color: #FFF;
}
.card.vis-trip .button.more
{
    background-color: var(--color-vis-trip);
    color: #FFF;
}
.card.vis-navigator .button.more
{
    background-color: var(--color-vis-navigator);
    color: #FFF;
}
.card.vis-gis .button.more
{
    background-color: var(--color-vis-gis);
    color: #FFF;
}
.card.vis-explorer .button.more
{
    background-color: var(--color-vis-explorer);
    color: #FFF;
}
.card.vis-player .button.more
{
    background-color: var(--color-vis-player);
    color: #FFF;
}
*/


/* ====== lists ======== */

ul
{
    list-style-position: inside;
    text-align: left;
    margin-left: 10vw;
}

li
{
    line-height: 1.4em;
    margin-bottom: 1em;
}

/* checkmark list */
ul.checkmark
{
    list-style: none;
    margin-left: -3vw;
    line-height: 2em;
    text-align: center;
}
ul.checkmark li:before
{
  font-size: 120%;
  font-weight: bold;
  content: "\2713";
  margin-right: 10px;
}

/* folding list */
ul.folding
{
    list-style: none;
    list-style-position: inside;
    padding-left: 0px;
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
}

ul.folding li
{
    overflow: hidden;
    max-height: 30px;
    transition-duration: 1s;
    margin-bottom: 5px;
}
ul.folding li:before
{
    transition-duration: 1s;
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path style="fill:white" d="M0 128.032v255.93c0 28.425 34.488 42.767 54.627 22.627l128-127.962c12.496-12.496 12.497-32.758 0-45.255l-128-127.968C34.528 85.305 0 99.55 0 128.032zM160 256L32 384V128l128 128z"/></svg>');
    display: block;
    width: 10px;
    height: 20px;
    position:relative;
    left: 10px;
    margin-top: -5px;
}

ul.folding li.open
{
    max-height: 800px;  /* workaround as height:auto does not work */
}
ul.folding li.open:before
{
    transition-duration: 0.5s;
    transform: rotate(90deg);
    transform-origin: 5px 13px;
}
 
ul.folding li *
{
    margin-left: 30px;
}
ul.folding li h2:first-child
{
    margin: -20px 0 5px 30px !important;
}



/* ======  grid ======= */

.grid
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

.grid-cell
{
    flex: 0 0 auto;
    margin: 10px;
}

.grid-cell.header
{
    width: 1100px;
}
@media (max-width: 1140px)
{
    .grid-cell.header
    {
        width: 760px;
    }
}
@media (max-width: 750px)
{
    .grid-cell.header
    {
        width: 380px;
    }
}


/* ====== speech bubble ====== */

.bubble
{
    position: absolute;
    top: 25vh;
    left: 10vw;
    width: 200px;
    color: #FFF;
    background: rgba(255,255,255,0.8);
    padding: 10px 20px 10px 20px;
    text-align: center;
    border-radius: 10px;
}

.bubble::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 30px;
    top: 20px;
    left: 100%;
    background: rgba(255,255,255,0.8);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
}


/* ====== call for action bubble ======== */

.bubble.action
{
    position: relative;
    top: unset;
    width: 40vw;
    height: 25vh;
    min-width: 350px;
    min-height: 250px;
    left: 20%;
    font-size: 100%;
    background: var(--color-orange);
    border-radius: 50%;
    padding-top: 3vh;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    margin: -5vh 0 -10vh 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bubble.action::after
{
    height: 100px;
    width: 100px;
    left: 0px;
    top: calc(100% - 100px);
    background: var(--color-orange);
    clip-path: polygon(100% 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(100% 0, 100% 50%, 0 100%);
    z-index: -1;
}
.bubble.action a
{
    color: #FFF;
    margin: 0px;
    font-size: 90%;
    line-height: 100%;
}
.bubble.action h2
{
    color: #FFF;
    margin: 0px !important;
    line-height: 110% !important;
    font-size: 180%;
}
.bubble.action h3
{
    color: #FFF !important;
    font-family: "sourcesanspro-regular";
    margin: 10px 0 5px 0;
}

@media (max-width: 480px)
{
    .bubble.action
    {
        left: 2vw;
        font-size: 90%;
    }
    .bubble.action a
    {
        font-size: 120%;
        line-height: 120%;
    }
}



/*  === fonts ====================================================== */
/*  ================================================================= */


/*  sourcesanspro ======== */

@font-face {
    font-family: 'sourcesanspro-regular';
    src: url('fonts/sourcesanspro.eot');
    src: url('fonts/sourcesanspro.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-bold';
    src: url('fonts/sourcesanspro-bold.eot');
    src: url('fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-light';
    src: url('fonts/sourcesanspro-light.eot');
    src: url('fonts/sourcesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-thin';
    src: url('fonts/sourcesanspro-extralight.eot');
    src: url('fonts/sourcesanspro-extralight.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*  mosk =========== */

@font-face {
    font-family: 'mosk-regular';
    src: url('fonts/MoskNormal400.eot');
    src: url('fonts/MoskNormal400.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskNormal400.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-bold';
    src: url('fonts/MoskBold700.eot');
    src: url('fonts/MoskBold700.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskBold700.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-light';
    src: url('fonts/MoskLight300.eot');
    src: url('fonts/MoskLight300.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskLight300.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-thin';
    src: url('fonts/MoskThin100.eot');
    src: url('sMoskThin100.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskThin100.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*  FontAwesome =========== */

@font-face {
  font-family: 'awesome-light';
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url("fonts/fa-light-300.eot");
  src: url("fonts/fa-light-300.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-light-300.woff") format("woff"); 
}

@font-face {
  font-family: 'awesome-regular';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/fonts/fa-regular-400.eot");
  src: url("fonts/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: 'awesome-solid';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("fonts/fonts/fa-solid-900.eot");
  src: url("fonts/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-solid-900.woff") format("woff");
}

@font-face {
  font-family: 'awesome-brands';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/fa-brands-400.eot");
  src: url("fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-brands-400.woff") format("woff");
}

@font-face {
  font-family: 'awesome-duotone';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("fonts/fa-duotone-900.eot");
  src: url("fonts/fa-duotone-900.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-duotone-900.woff") format("woff");
}

/*  Nasalization =========== */

@font-face {
  font-family: 'nasalization';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/nasalization.eot");
  src: url("fonts/nasalization.eot?#iefix") format("embedded-opentype"),
       url("fonts/nasalization.woff") format("woff"); 
}

/*  Lucida Handwrite =========== */

@font-face {
  font-family: 'lucida';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/LucidaHandwrite.eot");
  src: url("fonts/LucidaHandwrite.eot?#iefix") format("embedded-opentype"),
       url("fonts/LucidaHandwrite.woff") format("woff"); 
}