/*
Theme Name: hwbissen25
Description: Theme für hwbissen.lu
Version: 1.0
Author: JOHDA Webdesign
*/

	*
	{
		margin: 0;
		padding: 0;
		body: 0;
		min-width: 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		--def_mm: 0.5vw;
	}


	html
	{
		font-size: 10mm;
		line-height: 10mm;
	}

	body, html
	{
		width: 100%;
		height: 100%;
	}


	body
	{
		font-family: 'Vegur', sans-serif;
		font-weight: 400;
		color: rgb(100,100,100);
		font-size: 0.66rem;
		font-variant-ligatures: common-ligatures;
		font-feature-settings: 'onum';
		text-align: left;
		background-color: rgb(255,255,255);
	}


/* Header */


	header, footer
	{
		width: 100%;
		margin: 0 auto;
	}


	header > nav,
	#img > nav,
	#content,
	footer > nav
	{
		width: 90vw;
		max-width: 40rem;
		display: block;
		margin: 0 auto;
		position: relative;
	}


	header > nav
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		position: relative;
		padding: 1rem 0;
	}

	#logo
	{
		height: 1rem;
		width: auto;
		display: block;
		position: relative;
	}


	#logo > svg
	{
		height: 100%;
		width: auto;
	}

	header > nav > ul
	{
		display: flex;
		justify-content: flex-end;
		position: relative;
		list-style-type: none;
	}

	header > nav > ul > li
	{
		display: block;
		position: relative;
		margin-left: 1rem;
	}

	#img
	{
		width: 100%;
		height: 80vh;
		position: relative;
		overflow: hidden;
	}

	#img > img
	{
		width: 103%;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: -100;
	}

#mobile_menu
{
    display: none;
}

/* Seitenaufbau */

	#content
	{
		display: flex;
		justify-content: space-between;
		margin-top: -12rem;
		position: relative;
	}

	#content > section
	{
		width: calc(73% - 1rem);
		display: block;
		position: relative;
	}

	#content > section > article:not(.title)
	{
		display: block;
		width: 100%;
		padding: 1.5rem 2rem;
		background: rgb(255,255,255);
		margin-bottom: 1rem;
		position: relative;
	}


	#content > section > article.title
	{
		display: block;
		position: relative;
	}



/* Inhaltskorpus */


	#content > section > article > object
	{
		width: 100%;
	}

	div#toc_container
	{
		position: fixed;
		bottom: 0;
		z-index: +10000;
	}


	ul.toc_list
	{

		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		list-style-type: none;
		z-index: +700;
	}


	ul.toc_list > li
	{
		display: block;
		margin-right: 0.4em;
		background: rgb(0,179,255);
		position: relative;
		padding: 0.5rem 1rem;
		transition: background 0.5s;
	}


	ul.toc_list > li:hover
	{
		background: rgb(50,50,50);
		transition: background 0.5s;
	}

	ul.img_gallery
	{
		width: 100%;
		display: flex;
		position: relative;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 1rem;
	}

	ul.img_gallery > li
	{
		display: block;
		position: relative;
		margin: 0 1rem 1rem 0;
		padding: 0;
		list-style-type: none;
		width: calc((100% - 1.5rem) / 4);
		height: auto;
		min-height: 1vw;
	}

	ul.img_gallery > li:nth-of-type(4)
	{
		margin-right: 0;
	}

	ul.img_gallery > li > a
	{
		display: block;
		position: relative;
		width: 100%;
	}

	ul.img_gallery > li > a > img
	{
		display: block;
		position: relative;
		width: 100%;
		height: auto;
	}

	#content > section > article > div.wp-caption
	{
		display: block;
		position: relative;
		max-width: 100% !important;
		margin-top: 1rem;
	}

	#content > section > article > div.wp-caption > img
	{
		display: block;
		position: relative;
		max-width: 100% !important;
		max-height: auto;
	}

	img
	{
		border: none !important;
	}

	.wp-video
	{
		width: 100%;
		height: auto;
	}

/* Sidebar */

	#content > nav
	{
		width: 27%;
		display: block;
		position: relative;
		z-index: +1000;
	}


	#content > nav > article,
	#content > nav > ul
	{
		display: block;
		width: 100%;
		position: relative;
		z-index: +1000;
	}


	#content > nav > article
	{
		padding: 1rem;
		background: rgb(255,255,255);
		margin-bottom: 0.5vw;
		position: relative;
		z-index: +1000;
	}


	#content > nav > ul,
	#content > nav > article > ul
	{
		overflow: hidden;
		display: flex;
		align-items: space-between;
		flex-wrap: wrap;
		position: relative;
		z-index: +1000;
	}


	#content > nav > ul > li
	{
		display: block;
		width: 100%;
		margin-bottom: 0.5rem;
		padding: 0.5rem 1rem;
		background: rgb(255,255,255);
		list-style-type: none;
	}

	#content > nav > article > ul > li
	{
		display: block;
		width: 100%;
		list-style-type: none;
		margin-bottom: 1rem;
	}

	#content > nav > ul > li:last-of-type
	{
		margin-bottom: 1rem;
	}

	.sidebox
	{
		background: rgb(255,255,255);
	}

	.sidebox > *
	{
		color: rgb(150,150,150);
	}

/* Fußzeile */


	footer
	{
		padding: 0;
		background: rgb(0,179,255);		
	}


	footer > nav
	{
		padding: 1.5rem 2rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		position: relative;
		z-index: +100;
	}


	footer > nav > section
	{
		width: calc( (100% - 3rem ) /4 );
		display: block;
	}

	footer > nav > section > img
	{
		height: 10vw;
		margin: 0;
	}


/* Typografie */


	h1
	{
		font-size: 2rem;
		line-height: 2rem;
		font-weight: 700;
		letter-spacing: 0;
		color: rgb(255,255,255);
		display: block;
		position: relative;
	}


	h2
	{
		font-size: 0.8rem;
		color: rgb(0,179,255);
		font-weight: 700;
		letter-spacing: 0.01em;
	}

	h3
	{
		margin-top: 1rem;
		font-weight: 400;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	* + h2
	{
		margin-top: 2rem;
	}

	h5
	{
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 0.5rem 1rem;
		margin-bottom: 0.5rem;
		color: rgb(255,255,255);
		background: rgb(0,179,255);
	}


	h6
	{
		font-size: 0.8rem;
	}


	h6 > span,
	h6 + p
	{
		font-size: 0.55rem;
		font-weight: 300;
		line-height: 0.75rem;
	}

	#content > section > article > p
	{
		hyphens: auto;
	}

	p + p, ul + p
	{
		margin-top: 1rem;	
	}

	p.teaser
	{
		font-size: 0.8rem;
		color: rgb(0,179,255);
	}
	blockquote > p
	{

		font-weight: 300;
		font-style: oblique;
		letter-spacing: 0.01em;
		color: rgb(70,70,70);
		padding: 0 5vw;
		border-left: 0.3em solid rgb(235,235,235);
	}

	ul.toc_list > li
	{
		letter-spacing: 0.01em;
	}

	object
	{
		margin-top: 1rem;
	}

	#content > section > article > h2 + p,
	#content > section > article > h3 + p
	{
		margin-top: 1rem;
	}

	p > img
	{
		max-width: 100%;
	}

	#content > section > article > ul:not(.img_gallery)
	{
		list-style-position: outside;
		margin-top: 1rem;
	}

	#content > section > article > ul:not(.img_gallery) > li
	{
		margin-left: 1rem;
		padding-left: 1rem;
		text-indent: -0.025vw;
	}

	footer > nav > section > p
	{
		font-weight: 300;
		color: rgb(255,255,255);
	}

/* Verweise */


	a
	{
		color: rgb(0,0,0);
		transition: color 0.3s;
	}

	footer > nav > section > p > a
	{
		color: rgb(255,255,255);
	}
	
	a:hover
	{
		color: rgb(255,0,255);
		transition: color 0.3s;
	}

	header > nav > ul > li > a
	{
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 0.05em;
		text-decoration: none;
		color: rgb(0,179,255);
		transition: color 0.5s;
	}

	header > nav > ul > li.lang > a
	{
		background: rgba(0,179,255,0.35);
		color: rgb(255,255,255);
		padding: 0.1em 0.5em;
		border-radius: 1em;
		transition: background 0.5s;
		text-transform: none;
		font-size: 0.8em;
	}

	header > nav > ul > li:hover > a
	{
		color: rgb(0,0,0);	
		transition: color 0.5s;	
	}

	header > nav > ul > li.lang > a:hover
	{
		background: rgba(0,179,255,1);
		color: rgb(255,255,255);
	}

	h6 > a:hover,
	ul.toc_list > li:hover > a,
	.sidebox > p > a:hover,
	footer > nav > section > p > a:hover
	{
		color: rgb(255,0,255);
		transition: color 0.3s;
		text-decoration: none;
	}

	ul.toc_list > li > a
	{
		color: rgb(255,255,255);
	}

	.more-link
	{
		background: rgb(245,245,245);
		position: relative;
		padding: 0.15em 0.5em 0.3em 0.5em;
		transition: color 0.3s, background 0.5s;
	}

	.more-link:hover
	{
		color: rgb(153,0,0);
		background: rgb(220,220,220);
		transition: color 0.3s, background 0.5s;
	}


/* Andere Displaygrößen */

@media only screen and (max-width: 1560px)
{
	   #flyout {
        background: #fff;
        flex-direction: column;
        margin: 0;
        width: min(200px,90%)%;
        position: absolute;
        left: 50%;
        top: -1500px;
        transform: translate(-50%,0);
        transition: all 0.15s ease-in-out;
        z-index: 2000;
        padding: 3rem;
        text-align: center;
	   	height: initial;
	   	opacity: 0;
    }
	
	   #main_nav {
        flex-direction: column;
        font-size: 1.5em;
        line-height: 1.75em;
        text-align: center;
	   height: initial;
    }
   
    #flyout.active {
        top: 0;
        transition: all 0.15s ease-in-out;
		opacity: 1;
		z-index: 2000;
		padding: 1.5rem;
    }
	
	#flyout.active li
	{
		margin: 0;
	}
	
    #mobile_menu {
       width: 1rem;
       height: 0.75rem;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       order: 2;
       cursor: pointer;
   }
   
    .navbar_toggle .bar {
        width: 1rem;
        height: 0.15rem;
        transition: all 0.15s ease-in-out;
        background: #000;
    }
   
    .navbar_item {
        width: 100%;
        padding: 2.5rem;
        text-align: center;
        margin: 0;
    }
   
    .navbar_links {
        font-size: 3.5rem;
    }
   
   
    #mobile_menu.is-active .bar:nth-child(1) {
        transform: translateY(.31rem) rotate(45deg);
     }
   
    #mobile_menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
   
     #mobile_menu.is-active .bar:nth-child(3) {
        transform: translateY(-.31rem) rotate(-45deg);
     }
}


@media only screen and (max-width: 1000px)
{
	
	#toc_container, ul.img_gallery
	{
		display: none;
	}
	

	/* Größenangaben */

	body
	{
		font-size: 4.16vw;
		line-height: 6.4vw;
	}
	
	header, footer
	{
		box-shadow: 0 1.6 3.2vw rgba(0,0,0,0.2);
	}

	header > nav, #img > nav, #content, footer > nav
	{
		width: 90vw;
	}

	header > nav > ul > li
	{
		padding: 1.6vw 3.2vw;
	}

	#img
	{
		padding-bottom: 6.4vw;
	}

	#orte_liste
	{
		margin: 1.6vw 0 auto auto;
	}

	#orte_liste > li
	{
		padding: 1.6vw 3.2vw;
		margin: 0 1.6vw 1.6vw 0;
	}


	#content
	{
		margin-top: -19.2vw;
	}

	#content > section
	{
		width: calc(73% - 3.2vw);
	}

	#content > section > article:not(.title)
	{
		padding: 6.4vw;
		margin-bottom: 3.2vw;
	}

	#content > section > article.title + article
	{
		padding-bottom: 3.2vw;
	}


	ul.toc_list > li
	{
		padding: 1.6vw 6.4vw;
	}

	ul.img_gallery
	{
		margin-top: 6.4vw;
	}

	ul.img_gallery > li
	{
		margin: 0 1vw 1vw 0;
		width: calc((100% - 3vw) / 4);
		min-height: 1vw;
	}

	#content > section > article > div.wp-caption
	{
		margin-top: 4.8vw;
	}


	#content > nav > article
	{
		padding: 3.2vw 4.8vw;
		margin-bottom: 0.5vw;
	}

	#content > nav > ul > li
	{
		margin-bottom: 1.6vw;
		padding: 1vw 1.5vw;
	}


	#content > nav > article > ul > li
	{
		margin-bottom: 4.8vw;
	}

	#content > nav > ul > li:last-of-type
	{
		margin-bottom: 4.85vw;
	}

	footer
	{
		padding: 6.4vw 0;
	}

	footer > nav
	{
		padding: 0 6.4vw;
	}

	footer > nav > section
	{
		width: calc( (100% - 6.4vw ) /4 );
	}

	footer > nav > section > img
	{
		height: 32vw;
	}

	h1
	{
		font-size: 7.68vw;
		line-height: 9.6vw;
	}

	h1 > span
	{
		font-size: 4vw;
		line-height: 3.2vw;
	}

	h2
	{
		font-size: 5.6vw;
		line-height: 6.4vw;
	}

	h5
	{
		padding: 1.6vw 4.8vw;
	}

	h6
	{
		font-size: 4vw;
		line-height: 4.8vw;
	}
	
	p + p, ul + p
	{
		margin-top: 6.4vw;	
	}

	p.teaser
	{
		line-height: 8vw;
		font-size: 5.6vw;
	}

	blockquote > p
	{
		padding: 0 16vw;
	}

	ul.toc_list > li
	{
		line-height: 3.2vw;
		font-size: 3.2vw;
	}

	#content > section > article > h2 + p, #content > section > article > h3 + p
	{
		margin-top: 1.6vw;
	}

	#content > section > article > ul:not(.img_gallery)
	{
		margin-top: 3.2vw;
	}

	#content > section > article > ul:not(.img_gallery) > li
	{
		margin-left: 4.8vw;
		padding-left: 3.2vw;
		text-indent: -0.08vw;
	}

	#content > nav > article > p
	{
		font-size: 3.52vw;
		line-height: 4.8vw;
	}
	
	/* Änderungen */


	#img > nav, #content, footer > nav
	{
		width: 100%;
		max-width: inherit;
	}
	
	header > nav
	{
		flex-wrap: wrap;
		justify-content: space-between
	}
	
	header > nav > ul > li
	{
		margin-bottom: 3.2vw;
	}
	
	
	header > nav > ul > li:first-of-type
	{
		display: block;
	}
	
	#orte_liste
	{
		width: 100%;
	}


	#img
	{
		height: initial;
		min-height: 30vh;
	}
	
	#img > img
	{
		height: 103%;
		width: auto;
		min-width: 103%;
		min-height: auto;
		top: 50%;
		left: 50%;
	}


	#content
	{
		display: block;
		margin-top: 0;
	}	
	
	
	#content > section, #content > nav
	{
		width: 100%;
	}

	
	#content > section > article.orte > div:first-of-type
	{
		width: 100%;
	}

	#content > nav > ul > li, #content > nav > article
	{
		padding: 4.8vw;
	}

	
	#content > section > article > div.wp-caption, #content > section > article > div.wp-caption > a, #content > section > article > div.wp-caption > a > img
	{
		width: 80% !important;
		height: auto;
	}	

	
	ul.img_gallery > li
	{
		width: calc((100% - 12.8)) / 3);
	}	

	
	ul.img_gallery > li:nth-of-type(4)
	{
		margin-right: 6.4;
	}
	
	
	ul.img_gallery > li:nth-of-type(3)
	{
		margin-right: 0;
	}
	
	footer > nav
	{
		flex-flow: column;
	}
	
	footer > nav > section
	{
		width: 100%;
		margin-bottom: 12.8vw;
	}
	
}