@import url('genericons/genericons.css');

@font-face {
        font-family: "Roboto";
        font-display: swap;
        src: url("../fonts/Roboto-Regular.ttf");
}


@font-face {
        font-family: "Roboto Bold";
        font-display: swap;
        src: url("../fonts/Roboto-Bold.ttf");
}


@media screen {

	*, html {
		margin:0;
		padding:0;
	}

	body {
		width: 90vw;
		margin: auto;
		padding: 1em;
		color:#000000;
		font-size: 0.9em;
		font-family: "Roboto", "Helvetica", sans-serif;
		line-height: 1.5;
		font-size: 1em;
	}	

	li {
		list-style-type: disc;
	}

	li li {
		list-style-type: square;
	}

    	ol li, ul li { 
		margin-left: 2em; 
		padding: 0.5em 0;
    	}
	
	    -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;

        /*
                Micro-Clearfix-Hack
                nicolasgallagher.com/micro-clearfix-hack/
        */
        .cf:before, .cf:after { content: " "; display: table; }
        .cf:after, .clear { clear: both; }

	a:link { font-weight: bold; color: #71b127; text-decoration: none;}
	a:visited { font-weight: bold; color: #71b127; text-decoration: none; }
	a:hover { font-weight: bold; color: #932c7e; text-decoration: none; }
	a:active { font-weight: bold; color: #71b127; text-decoration: none; }
	a:focus { background-color: #932c7e; color: #fff !important; text-decoration: none; padding: 0.25em 0.5em;}
	
	a[href^="http"]:after {
	    content: '\f442';
		font-family: "Genericons";
		font-size: 16px;
		vertical-align: middle;
		-webkit-font-smoothing: antialiased;
		padding-left: 0.3em;
    }

	a[href^="http"].link_ohne:after {
         content: '';
    }
	
	h1 {
		font-size: 1.6em;
		text-transform: uppercase;
		/*margin-bottom: 2em;*/
	}	

	h2 {
		background-color: #71b127;
		color: #000;
		padding: 20px 50px;
		min-width: 30%;
		height: 40px;
		text-align: center;
		font-size: 1.5em;
		margin: 0.5em 0;
        }

	div.mitte {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.links {
                display: flex;
                justify-content: flex-start;
                align-items: center;
        }

	div.rechts {
                display: flex;
                justify-content: flex-end;
                align-items: center;
        }


/*	h3 {		
		font-size: 1.1em;
		margin-bottom: 1em;
		margin-top: 2em;
		color: #017D99;
	}
	
	h4 {
		font-size: 1em;
		padding: 1em 0;
	}*/

	.breite_600 {
                width: 600px;	
	}
	
	p {
		padding: 0.5em 1em 0.5em 0.5em;
	}
	
	.skip {
		position:absolute;
		top:0;
		left:-9999px;
    }

	.askip {
		position:absolute;
		top:0;
		left:-9999px;
	}

	.skip .askip:focus, .skip .askip:active {
		width: 130px;
		position: absolute;
		left: 9999px;
		margin-left: 600px;
		padding: 5px 5px 5px 15px;
		color: white;
		z-index: 10000;
	}

	figure {
		margin: 1em 0;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
		
/* Navigation */	
	#mobile-nav {
                display: none;
        }

	nav#navigation {
		width: 100%;
		background-color: #71b127;
		margin-bottom: 2em;
		display: flex;
		justify-content: space-between;
	}

	nav#navigation figure {
		width: 150px;
		margin-left: 1em;
	}

	nav#navigation ul#menu {
		width: 85%;
		height: 40px;
		text-align: right;
		margin-right: 1em;
		text-transform: uppercase;
		align-self: center;
		display: flex;
		justify-content: flex-end;
	}

	nav#navigation ul#menu li {
		list-style-type: none;
		border-right: 0.2em #000 solid;
	}

	nav#navigation ul#menu li:last-child {
		border-right: none;
	}

	nav#navigation ul#menu li a {
		font-family: "Roboto Bold", "Helvetica", sans-serif;
		color: #000;
		font-size: 1.3em;
		font-weight: 800 !important;
		margin-right: 15px;
	}

	nav#navigation ul#menu li a:hover {
		color: #932c7e;
	}

	nav#navigation ul#menu li a.current {
                color: #932c7e !important;
        }

	nav#navigation ul#menu li a.current:hover,
	nav#navigation ul#menu li a.current:active,
	nav#navigation ul#menu li a.current:focus {
                color: #fff !important;
        }

	nav#navigation ul#menu ul {
		padding: 0 1em 1em 0;
		left: -99999px;
		display: block;
		position: absolute;
		width: 200px;
		background-color: white;
		border-bottom: 2px solid #dbb523;
		border-left: 2px solid #dbb523;
	}

	nav#navigation ul#menu ul li {
		display: block;
		font-size: 1em;
		text-align: left;
	}

	nav#navigation ul#menu ul li a.subcurrent {
		font-size: 1.2em;
		font-weight: bold;
		color: #353641;
	}

	nav#navigation ul#menu > li:hover > ul,
        nav#navigation ul#menu > li:focus > ul,
        nav#navigation ul#menu > li:active > ul {
		left: 0;
	    z-index: 2000;
    }
/* Navigation Ende */	

	main {
		padding-bottom: 1em;
	}

	/* Slider */
	
	div#slider {
		position: relative;
		width: 90vw;
		height: 420px;
		margin-bottom: 2em;
	}

	div#slideshow ul {
         	display: flex;
		height:420px;
        }
	
	div#slider img {
		width: 90vw;
		height: 420px;      /* gleiche feste Höhe */
		object-fit: cover;
	}

        a#prev {
                position: absolute;
                top: 150px;
                left: 0;
                content: '\f430';
                z-index: 2000;
                font-size: 76px;
                color: #fff;
        }

        a#next {
                position: absolute;
                top: 150px;
                right: 0;
                content: '\f429';
                z-index: 2000;
                font-size: 76px;
                color: #fff;
        }

	div.kasten {
                position: absolute;
                bottom: 50px;
                left: 30px;
                z-index: 2000;
                width: 200px;
                color: #fff;
                background-color: #932c7e;
                padding: 1em 1em 1em 3em;
                font-size: 1.2;
                font-weight: bold;
        }

	div#slideshow ul#slides li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	/* Bild und Text nebeneinander */
	
	div.bildmittext {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 5em 0 3em 0;
        }

	.hoeher {
		margin-top: -7em !important;
	}

        div.bildrechts {
                flex-direction: row-reverse;
        }

        div.bildmittext figure {
                width: 40%;
                text-align: center;
        }

	div.bildmittext div.textoben {
		align-self: flex-start;
	}

	div.bildmittext div.textunten {
                align-self: flex-end;
        }
	
	div.bildmittext div.textunten p {
		text-align: right;
	}
	
	div.bildmittext div.text {
                width: 50%;
                padding: 0.5em 1em;
        }

        div.bildmittext .text p {
                padding: 0.5em 0.5em 0.5em 2.5em;
        }

	div.schriftgross p {
		font-size: 1.4em;
	}

	div.bildmittext .text h2 {
                padding-left: 2em;
		width: 50%;
        }

        div.bildrechts .text p,
        div.bildrechts .text h2 {
                padding: 0.5em 1em 0.5em 0;
        }
	
	/* H2 mit Block */
	
	div.h2mitblock {
		width: 100%;
		min-height: 150px;
		margin-top: 2em;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	div.h2mitblock div {
		width: 300px;
		align-self: flex-end;
		margin-right: 20%;
		background-color: #000;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.4em;
		text-transform: uppercase;
		font-weight: bold;
		padding: 0.5em;
	}

	        
	/* Countdown, Ort, Zeit und Karte */

	h1.countdown {
		font-size: 2em;
		color: #000;
	}

	div#ortzeit {
		display: flex;
		justify-content: space-between;
		margin: 5em 0;
		
	}

	div#ortzeit h2 {
		font-size: 1.8em;
		background-color: #000;
		min-width: 240px;
		height: 40px;
		color: #fff;
/*		padding: 10px 0 0 20px;*/
	}

	div#ortzeit div#wann,
	div#ortzeit div#wo {
		min-width: 240px;		
	}

	div#ortzeit p {
		font-size: 1.2em;
		font-weight: bold;
		padding: 0;
		margin-left: 20px;
	}

	div#map {
		width: 220px;
		height: 190px;
		margin-top: 20px;
	}

	/* Veranstaltungsankündigungen */

	div#dreiboxen {
		display: flex;
		justify-content: space-between;
		width: 100%;	
		margin-top: 2em;
	}

	div#dreiboxen div.box {
		display: flex;
		flex-direction: column;
		width: 30%;
	}

	div#dreiboxen figure {
		position: relative;
		margin: 0;
	}
	
	div#dreiboxen figure img {
		margin: 0;
	}
	
	div#dreiboxen div.datumzeit {
		position: absolute;
		left: 0;
		bottom: 0.4em;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;		
	}

	div#dreiboxen div.datum {
		width: 60%;
		background-color: #000;
		color: #fff;
		padding: 1em;
		font-size: 1em;
		font-weight: bold;
	}

	div#dreiboxen div.zeit {
		width: 40%;
		background-color: #fff;
		color: #000;
		padding: 1em 0.5em;
		align-self: flex-end;
		font-size: 1em;
		font-weight: bold;
	}

	div#dreiboxen div.text {
		background-color: #71b127;
		min-height: 150px;
		color: #000;
		padding: 1em;
	}

	div#dreiboxen div.text h3 {
		font-size: 1.3em;
		padding-bottom: 1em;
	}

	div#dreiboxen div.text p {
		font-size: 1.1em;
		font-weight: normal;
		padding: 0;
	}
		

	div.startseite_link {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 50px;
		min-width: 400px;
		background-color: #000;
		color: #fff;
		margin-top: 2em;
		padding: 0.5em;
		font-size: 1.2em;
		text-decoration: underline;
	}

	/* Galerie */
	
	div.galerie {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	div.galerie div.gbox {
		width: 30%;
	}

	div.galerie div.gbox figure img {
		width: 70%;
	}

/* Footer */
	
	footer {
		width: 90vw;
		padding: 1em 0;
		border-top: #71b127 solid 1em;
	}
	
	div.footeroben {
		display: flex;
		justify-content: center;                
	}

	div.footeroben div.logoleiste {
		margin-right: 2em;
		display: flex;
		justify-content: center;		
		align-items: center;
		border-right: #71b127 solid 0.2em;
		margin-bottom: 20px;
		width: 80%;
	}

	div.footeroben figure.wj {
		width: 30%;
	}

	div.footeroben div.partner {
		width: 70%;
	}

	div.footeroben div.logos {
		display: flex;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
	}
	
	div.footeroben div.logos figure  {
		margin-right: 30px;
	}

	div.footeroben div.logos img.bmftr {
                width: 180px;
		margin-top: 1em;
        }

	div.footeroben div.logos img.wipa,
	div.footeroben div.logos img.wh {
                width: 150px;
        }
	
	div.footeroben div.logos img.iat {
                width: 70px;
        }

	div.footeroben div.social {
		width: 15%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: #71b127 solid 0.2em;
		height: 220px;
	}

	div.footeroben img.tiktok {
		width: 50px;
	}

	div.footerunten {
		background-color: #71b127;
		height: 2.5em;
		text-align: right;
		padding-top: 1em;
	}

	div.footerunten a {
		color: #000;
		margin-right: 3em;
	}
	
/* Footer Ende */

/* Matomo */
	div#matomo-opt-out input {
		margin-right: 0.5em;
	}
}

@media screen and (max-width: 1024px) {
	
	#mobile-nav {
                width: 240px;
                display: block;
		margin: 1em;
		align-self: flex-end;
        }

        ul#menu {
                display: none !important;
        }

	ul.slicknav_nav {
                display: block;
                background-color: #000;
                padding: 1em 2em 1em 0em;
        }

        a.slicknav_btn:hover,
        a.slicknav_btn:active,
        a.slicknav_btn:focus {
                background-color: #c33d6b;
                color: #000;
        }

	.slicknav_nav a:hover {
		padding: 0.2em;
	}

	.slicknav_nav a.current {
		color: #c33d6b;
	}

	h2 {
		width: 100%;
	}

	div#ortzeit {
                flex-direction: column;
		margin: 2em 0;
        }

        div#ortzeit div#wann,
	div#ortzeit div#wo {
                margin-top: 2em;
		width: 100%;
        }

	div#ortzeit div#wo {
		margin-bottom: 2em;
	}

	div.bildmittext {
		flex-direction: column;
		margin: 0;
	}

	div.bildmittext figure {
		width: 100%;
	}

	div.bildmittext div.text {
		width: 100%;
		padding: 0;
	}

	div.bildmittext .text h2 {
		width: 100%;
	}	

	.hoeher {
		margin-top: 0 !important;
	}

	div.h2mitblock {
		width: 100%;
		margin-bottom: 2em;
	}

	div.h2mitblock h2 {
		padding: 20px 0;
	}

	div.h2mitblock div {
		width: 90%;
		align-self: center;
		margin-right: 0;
	}

	div.footeroben div.logos {
		flex-direction: column;
	}
}

@media screen and (max-width: 780px) {
	
	div#dreiboxen {
		flex-direction: column;
	}

	div#dreiboxen div.box {
		width: 100%;
		margin-top: 1em;
	}	
}

@media screen and (max-width: 640px) {

	div.galerie {
                flex-direction: column;
		justify-content: center;
        }

        div.galerie div.gbox {
                width: 100%;
        }

	footer {
		padding: 0;
	}

	div.footeroben,
	div.footeroben div.logoleiste {
		flex-direction: column;
	}

	div.footeroben div.logoleiste {
		width: 100%;
		border-right: none;
		border-bottom: #71b127 solid 0.2em;
	}

	div.footeroben figure.wj {
		width: 300px;
		margin: 0;
	}
	
	div.footeroben div.partner {
		width: 100%;
		margin-top: -4em;
	}

	div.footeroben div.logos img.bmftr {
		width: 260px;
	}
	
	div.footeroben div.logos img.wipa {
		width: 200px;
	}

	div.footeroben div.logos img.wh {
                width: 200px;
		margin-top: 1em;
        }

	div.footeroben div.logos img.iat {
		width: 100px;
		margin-top: 1em;
	}

	div.kontakt {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

}

@media screen and (max-width: 480px) {

}