/*	-------------------------------------------------------------- */
/*	CSS STYLESHEET COPYRIGHT WEBMULTIMEDIA GMBH, BERN - JAN CIBULA 
/*	-------------------------------------------------------------- */

/*	-------------------------------------------------------------- */
/*	SCHRIFTART											   
/*	-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Quicksand:wght@400;700');







/*	-------------------------------------------------------------- */
/*	BASICS 												   
/*	-------------------------------------------------------------- */



html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	width:100%;
	height:100%;
}

body {
	position:relative;
	width:100%;
	height:100%;
	overflow-y:scroll;
	color:rgba(250,250,250,1.00);
    font-size:18px;
}

/* CSS RESET */
* {
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}

img {
	border:none;
}


/* SCHRIFTARTEN */

body, input, textarea {
	font-family: 'Quicksand', Verdana, Arial, sans-serif;
    font-weight:400;
	color:black !important;
	background-color:white;
}

.borderradius {
    border-radius:0.2rem;
}
.schrift_gruen_hell {
    color:rgba(124,167,76,1.00);
}
.schrift_gruen {
    color:rgba(124,167,76,1.00);
}


.maxbreite {
	width:100%;
    max-width:1600px;
	margin:0 auto;
}

/*	-------------------------------------------------------------- */
/*	LAYOUT											  			   
/*	-------------------------------------------------------------- */

header{
    width:100%;
    height:6rem;
    padding:1rem;
    display:flex;
    justify-content:space-between;
    position:fixed;
    z-index:30;
    top:0;
    background-color:white;
    margin-bottom:0.5rem;
}
header .klein {
    font-size:0.8rem;
    opacity:1;
    margin-left:1rem;
    margin-top:0.2rem;
}


.logo {
    height:4rem;
    width:4rem;
    background:rgba(124,167,76,1.00);
    color:white;
    display:none !important;
    justify-content: center;
    align-items: center;
    transition:all ease-in-out 0.2s;
    cursor:pointer;
}

.logo a{
    color:white !important;
    transition:all ease-in-out 0.2s;
}
.logo:hover {
    background:white;
    transition:all ease-in-out 0.2s;
}
.logo:hover a{
    color:rgba(67,113,83,1.00);
    transition:all ease-in-out 0.2s;
}
.logoklein {
    width:1.5rem;
    height:1.5rem;
    border-radius:50%;
    background:red;
    color:white;
    padding:0.2rem 0.3rem;
    transition:all ease-in-out 0.2s;
    cursor:pointer;
}
.small {
    color:lightslategray;
    font-size:0.7rem;
}
nav {
    width:100%;
    max-width:1800px;
    margin:0 auto;
    z-index:20;
    position:fixed;
    top:6rem;
    height:6rem;
	display:flex;
    background-color:rgba(124,167,76,1.00);
    box-shadow:0px 0px 2px 1px rgba(33,33,33,0.3);
    justify-content:flex-start;
 
}
nav a,nav a:link  {
	color:white !important;
    font-weight:300;
	display:block;
}
nav a:last-child{
}
nav a:visited {
    color:white;
}
nav a:hover {
    color:white;
}
nav a.standpunkt {
	color:red;
    font-weight:700;
}

.button {
    border-right:1px solid white !important;
    transition:all ease-in-out 0.2s;
    cursor:pointer;
    opacity:1;
}
.button:hover .buttonicon, .button:hover .buttontext {
    background:white;
    color:rgba(50,55,49,1.00);
    transition:all ease-in-out 0.5s;
}
.buttonicon {
    width:6rem;
    height:6rem;
}
.buttontext {
    
    height:6rem;
    width:12rem;
    font-size:1.5rem;
}

.navaktiv {
    background:white;
    color:black !important;
}


/* MINI NAV */
#navmini {
    display:none;
    flex-direction: column;
    width:100%;
    position:fixed;
    margin-top:5rem;
    top:0;
    left:0;
    z-index:33;
    background:rgba(33,33,33,0.98);
}
.hamburger {
    background:rgba(67,113,83,1.00);
    height:4rem;
    width:4rem;
    justify-content: center;
    align-items: center;
    transition:all ease-in-out 0.2s;
    cursor:pointer;
    display:none;
}
.hamburger a{
    color:white !important;
    display:block;
    padding:1rem;
}
.copyright {
    display:inline;
}
/*
@media screen and (max-width:1280px){
    header{
        background:black;
    }
    .copyright {
        display:none;
    }
    .hamburger {
    display:flex;
        cursor:pointer;
    }
    #navmini {
    }
    nav {
        display:none !important;
    }  
    #navmini a{
        display:block;
        width:100%;
        text-align:center;
        padding:1rem 0rem;
        color:white;
        border-bottom:1px solid rgba(200,200,200,0.8);
    }    
    
    .navmini {
        border:1px solid red;
        display:block;
    }
}
*/



#container {
    position: relative;
}

.padding {
    padding:2rem;
}


main{
    margin-top:13rem;
}
    main .main_progress, main .main_question, main .main_infos  {
    min-height:12rem;
    }


    main .main_progress {
        min-height:auto;
        text-align:center;
        position: relative;
        width:100%;
        border:1px solid  rgba(124,167,76,1.00);
        margin:1rem 0rem;
    }
    main .main_progress_bar_line
    {
        max-width:0.4rem;
        height:222rem;
        position:absolute;
        left:2rem;
        top:0;
        z-index:3;
        flex-flow: column;
    }
    main .main_progress_bar
    {
        display:flex;
        flex-direction:row;
        justify-content: center;
        align-items: center;
    } 
    main .main_progress_bar div
    {
        background:rgba(124,167,76,1.00);
        color:white;
        cursor:pointer;
        width:3rem;
        height:3rem;
        margin-right:2rem;
        z-index:3;
        transform:scale(0.9);
        transition:all ease-in-out 0.3s;
    }
    main .main_progress_bar div:hover
    {
        color:white;
        background-color:rgba(124,167,76,1.00);
        opacity:0.6;
        transition:all ease-in-out 0.5s;
    }
    main .main_progress_bar div.aktiv {
        background-color:white;
        color:rgba(67,113,83,1.00);
        transform:scale(1.1);
    }

    main .main_content {
        width:100%;
        display:grid;
        grid-template-columns: 2fr 2fr;
        grid-gap:1rem;

    }

    main .main_question {
      border:1px solid rgba(124,167,76,1.00);
    }
    main .questions {
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;

    }
    main .question_container {
        font-size:1.8rem;
        margin-bottom:2rem;
    }
    main .answer_container {
        font-size:1.4rem;
        color:1px solid rgba(124,167,76,1.00);
        width:100%;
        display:flex;
        flex-direction:column;
        align-items: flex-start;
    }

    main .answer {
        cursor:pointer;
        padding:0.5rem;
        color:black;
        width:100%;
        margin-bottom:1rem;
        transition:all ease-in-out 0.3s;
    }
    main .answer:hover {
        background:rgba(124,167,76,1.00);
        color:white;
        width:100%;
        margin-bottom:1rem;
        transition:all ease-in-out 0.5s;
    }






    main .main_infos {
      background:rgba(255,255,255,0.6);
     color:rgba(26,45,33,1.00);
		border: 1px solid rgba(124,167,76,1.00);
    }
    main .main_infos h3 {
    border-bottom-color:rgba(26,45,33,1.00);
    }

    main .main_infos h4 {
        margin:1rem 0rem 0.5rem 0rem;
        padding:0rem 0rem 0.5rem 0rem;
        color:rgba(26,45,33,1.00);
        border-bottom:1px dashed rgba(26,45,33,1.00);
    }


    main .main_infos_bilder {
        width:100%;
        height:12rem;
        display:flex;
        flex-direction:row;
        justify-content: space-between;
        align-items: center;
    }
    main .main_infos_bildcontainer {
        border:1px solid black;
        width:10rem;
        height:10rem;
        overflow:hidden;
    }
    main .main_infos_bildcontainer img {
        width:100%;
        height:100%;
        object-fit: cover;
        transition:all ease-in-out 0.3s;
    }
    main .main_infos_bildcontainer:hover img {
        transform:scale(1.2);
        transition:all ease-in-out 0.5s;
    }




/*	-------------------------------------------------------------- */
/*	LINKS											  			   
/*	-------------------------------------------------------------- */

a {
	text-decoration: none;
    font-weight:300;
	color:rgba(124,167,76,1.00);
    transition:all ease-in-out 0.3s;
}
a:link, 
a:visited {
    transition:all ease-in-out 0.2s;
	color:rgba(124,167,76,1.00);
    transition:all ease-in-out 0.3s;
} 
a:hover, 
a:active {
    transition:all ease-in-out 0.4s;
	color:rgba(33,33,33,1.00);
        transition:all ease-in-out 0.3s;
}
.linkdeaktiviert {
	pointer-events: none;
   	cursor: default;
	color:#ccc !important;
}
.not-active {
  /* pointer-events: none;*/
   cursor: default;
   opacity:0.5;
}


/*	-------------------------------------------------------------- */
/*	NAVIGATION											  			   
/*	-------------------------------------------------------------- */





.bildergalerie {
    display:grid;
    grid-template-columns: repeat(8,1fr);
    grid-auto-rows:200px 250px;
    grid-gap:10px;
    grid-auto-flow: dense;
}

@media screen and (max-width:1280px){
    .bildergalerie {
    grid-template-columns: repeat(4,1fr);
    }
    .bc_w_1, .bc_w_2, .bc_w_3{
        grid-column: span 1;
    }
    .bc_h_1, .bc_h_2, .bc_h_3{
        grid-row: span 1;
    }
}

@media screen and (max-width:760px){
    .bildergalerie {
    	grid-template-columns: repeat(1,1fr);
    	grid-column-gap: 10px;
    }
    .bc_w_1, .bc_w_2, .bc_w_3{
        grid-column: span 1;
    }
    .bc_h_1, .bc_h_2, .bc_h_3{
        grid-row: span 1;
    }
}




.bildercontainer {
    position:relative;
    height:100%;
    width:100%;
    animation: move-up .5s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes move-up {
	0% {
		transform:translateY(22px);
		opacity:0;
	}
	
	100% {
		transform:translateY(0px);
		opacity:1;
	}
}

/* verschiedene breiten im grid */
/* spannen ueber mehrere Spalten */
.bc_w_1 { 
    grid-column: span 1;
}
.bc_w_2 { 
    grid-column: span 2;
}
.bc_w_3 { 
    grid-column: span 3;
}
/* verschiedene hoehen im grid */
/* spannen ueber mehrere zeilen */
.bc_h_1 { 
    grid-row: span 1;
}
.bc_h_2 { 
    grid-row: span 2;
}
.bc_h_3 { 
    grid-row: span 3;
}

.bilderinhalt {
    overflow:hidden;
    height:100%;
    width:100%;
}
.bilderinhalt a{
    outline:0;
    width:100%;
    height:100%;
    display:block;
    padding:0;
}

.bilderinhalt img {
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: 50% 50%;
    padding:0;
    line-height:0;
    cursor:pointer;
    transition:0.5s ease-in-out; 
}

.bilderinhalt:hover .bilderinhalt_bild  {
    transform:scale(1.2);
    transition:0.5s ease-in-out; 
    /*object-fit: contain;*/
}

.bilderinhalt_titel {
    opacity:0;
    color:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events: none;
    z-index:4;
    text-shadow: 0px 0px 3px black;
    font-size:0.8rem;
}
.bilderinhalt:hover .bilderinhalt_titel  {
    opacity:1;
    transition:0.3s ease-in-out; 
    animation:movedown 0.3s linear;
}
@keyframes movedown{
    0%{
        top:0%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
    
}


/*	-------------------------------------------------------------- */
/*	TITEL, ABSATZ, FORMULARE										  			   
/*	-------------------------------------------------------------- */

.seriftitel {
	font-family: 'Arvo', serif;
    font-weight:300;
}
.schriftgross {
    font-size:2rem;
}
h1, h2, h3, h4 {
	margin:1rem 0rem;
	font-family: 'Arvo', serif;
    font-weight:300;
}

h1 {
	font-size: 1.8em;
	-webkit-margin-before: 0.67em;
	-webkit-margin-after: 0.67em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-family: 'Arvo', serif;
	}

h2 {
	margin:2rem 0rem 0.5rem 0rem;
	font-size: 1.6em;
	font-family: 'Arvo', serif;
	}
h3 {
	font-family: 'Arvo', serif;
    border-bottom:1px solid white;
    text-align:center;
    padding-bottom: 1rem;
    margin:1rem 0rem 2rem 0rem;
}

hr {
	border:1px solid #fff;
}


input, select, textarea {
	line-height: 1.625em;
}

/* LISTEN */

ul {
	padding-start: 20px;
	-moz-padding-start: 20px;
    -webkit-padding-start: 20px;
	line-height:1.5em;
}
ul li li {
	line-height:1.5em;
}
ol {
	padding-start: 20px;
	-moz-padding-start: 20px;
    -webkit-padding-start: 20px;
}
ol li {
	padding-bottom:15px;
}


/*	-------------------------------------------------------------- */
/*	LAYOUT ELEMENTE		(EIGENES DESIGN FRAMEWORK)								  			   
/*	-------------------------------------------------------------- */

.ausblenden {
	display:none !important;	
}

.einblenden {
	display:block !important;	
}
/* AUSRICHTUNGEN */

.overflow_fix {
	overflow:hidden;	
}
.clear_fix {
	clear:both;
	height:1px;
	width:100%;	
}

/* DIVERSES */

.scroll_overflow {
	overflow: auto;
}
.easy_clearfix {
	clear:both;	
	height:1px;
}
.zentriert {
    display:flex;
    align-items: center;
    justify-content: center;
}
.vertikal_zentriert {
    display:flex;
    align-items: center;
}

.klein {
	font-size:0.8em !important;
}
.sehrklein {
	font-size:0.5em !important;
}
.erfolg {
	/*padding:30px;*/
	color:#669966 !important;
}
.fehler {
	color:#f00;
}




.totop {
	position:fixed;
	display:none;
    bottom:1.2rem;
    right:1.2rem;
    width:2.5rem;
    height:2.5rem;
    background:rgba(67,113,83,1.00);
    color:white;
    justify-content: center;
    align-items: center;
    transition:all ease-in-out 0.2s;
    cursor:pointer;
		
}
























/*	===================================================== MEDIA QUERIES =============================================== */
/*	===================================================== MEDIA QUERIES =============================================== */
/*	===================================================== MEDIA QUERIES =============================================== */
/*	===================================================== MEDIA QUERIES =============================================== */
/*	===================================================== MEDIA QUERIES =============================================== */
/*	===================================================== MEDIA QUERIES =============================================== */





 /* ---------------------------- 1020px ---------------------------- */
 /* ---------------------------- 1020px ---------------------------- */
 /* ---------------------------- 1020px ---------------------------- */

@media(max-width: 1100px) { 

html {
}
body {
}
	
h1 {
}

.einblenden {
		display:block !important;
		width:100%;	
}

.ausblenden {
	display:none !important;	
}

.zweispalten {
	flex-direction:column;
    height:auto;
}

    
    
    
} /* ENDE MEDIAQUERY */