/* total reset */
* { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none;}

:root {
    --logoHeight:4.8mm;
    --textHeight:4.1mm;
    --buttonHeight:5.1mm;
    --marginWidth:5%;
    --vdaRed: rgb(102,0,0);
	--vdaYellow: rgb(248,248,80); 
    --vdaBlue: rgb(93,168,248);
    --vdaBlueLight: hsl(209, 95%, 85%);
	--vdaBlueDark: rgb(46,84,124);
    --bg1: #d4d4d0;
    --bg2: #eef2f9;
    --layerDark:hsla(0, 0%, 0%, 0.3);
    --layerLight: hsla(0, 0%, 100%, 0.3);
    --shadowCol: rgba(0,15,40, 0.5);
}
@font-face	{ font-family:text; src:url(media/nono-sc.txf); }		
@font-face	{ font-family:textBold; src:url(media/nono-sc-sb.txf); }		
@font-face	{ font-family:button; src:url(media/baba-sc-b.txf); }	

/* -------------------------------------------------------------------------------------------------*/

body { 
    font-family:text, sans-serif; 
    font-size:var(--textHeight);
}
p{
    margin-bottom:var(--textHeight);
    margin-top:var(--textHeight);
}

#header {
    visibility: visible;
    position: fixed;
    overflow: hidden;
    left:0px;
    top:0px;
    width:100%;
    height:calc((8 * var(--textHeight)) + var(--buttonHeight));
    z-index: 100;
    background-image:url("img/holz.jpg");
}
#logobar {
    position: absolute;
    overflow: hidden;
    left:0px;
    top:calc(0.8 * var(--textHeight));
    width:100%;
    height:calc((2 * var(--textHeight)) + (4.5 * var(--logoHeight)));
    margin-left:var(--marginWidth);
}
#logo {
    height:calc(4.5 * var(--logoHeight));
    cursor: pointer;
	}
#menubar {
    position: absolute;
    overflow: hidden;
    left:0px;
    top:calc(7 * var(--textHeight));
    width:100%;
    height:calc(var(--buttonHeight) + var(--textHeight));
    background-color: var(--vdaRed);
}
.buttonbar {
    margin-left:var(--marginWidth);
    margin-top:calc(0.3 * var(--textHeight));
}
button {
    font-family:button, sans-serif;
    font-size:var(--buttonHeight);
    background:none;
    color:white;
    padding-right:var(--buttonHeight);
    cursor:pointer;
}

/* -------------------------------------------------------------------------------------------------*/

#content {
    position: relative;
    overflow: auto;
}
.sectionTitle {
    font-family:button, sans-serif;
    font-size:calc(1.6 * var(--buttonHeight));
    width:auto;
    background:none;
    margin-left:var(--marginWidth);
    margin-top:calc(9 * var(--textHeight) - 1.6 * var(--buttonHeight));
}
.lesetext {
    margin-top:0px;
    margin-left:var(--marginWidth);
    margin-right:calc(0.8 * var(--marginWidth));
    max-width:500px;
    min-height:600px;
}
.illu {
    margin:var(--marginWidth);
    margin-left:0px;
    max-width:280px;
    border:calc(0.25 * var(--textHeight)) solid white;
    border-radius:var(--textHeight);
}
.illu2 {
    margin:var(--marginWidth);
    margin-left:0px;
    max-width:280px;
    border:calc(0.25 * var(--textHeight)) solid white;
    border-radius:var(--textHeight);
    filter: drop-shadow(4px 4px 10px var(--shadowCol));
}
.star {
    margin:0px;
    margin-left:120px;
    max-width:150px;
    cursor:pointer;
    filter: drop-shadow(4px 4px 10px var(--shadowCol));
}
.gleiss {
    margin:0px;
    margin-top:var(--marginWidth);
}
.section {
    background-image: linear-gradient(to bottom, var(--bg1), var(--bg2));
    position: relative;
    overflow: auto;
}

/* inline */
super { vertical-align:super; font-size:60%; }
b   { font-family:textBold, sans-serif; }
a   { font-family:textBold, sans-serif; text-decoration:underline; cursor:pointer; }
a:link { color:white;} 
a:visited { color:white;}

/* sections */
#home {
    color:var(--vdaRed);
    background-image: url("img/terrasse1920ccbb.jpg");
    background-position:left top;
    background-size:cover;
}
#project {
    color:white;
    background-image: url("img/picnic1920yr2.jpg");
    background-position:left bottom;
    background-size:cover;
}
#checkIn {
    color:var(--vdaRed);
    background-image: url("img/berge1920cc.jpg");
    background-position:left top;
    background-size:cover;
}
#information {
    color:white;
    background-image: url("img/lounge1920ryy.jpg");
    background-position:left bottom;
    background-size:cover;
}
#gleissenhorn {
    color:hsl(220, 100%, 40%);
    background-image: url("img/bergstat1920bbm.jpg");
    background-position:left bottom;
    background-size:cover;
}