/* CSS-Styleguide Spree */
/* Stand: 19.1.2021 15:06 Uhr Chr. */

:root{
	--nav_link_color: #eee;
	--head_color: #323232;
	--navi_color: #323232;
	--link_color: #2da397;
	--hover_color2: #205a54;
	--focus_color: #2da397;
	--body_color: #eee;
	--hxx_color: #2da397;
	--color:#205a54;
	--hover_color: #cd5038; /* Hover Farbe für Textlinks */
	--hover_color2: #3cdccc; /* Hover Farbe für hauptnav */
	--text_color: #323232; /* Allgemeine Textfarbe */
	--color_gen: #2da397; /* Grundfarbe General Site */
	--color_gen2: #205a54; /* Grundfarbe General Site */
	--color_t1: #a01f8e; /* Grundfarbe Theme 1 */
	--color_t2: #64a62b; /* Grundfarbe Theme 2 */
	--color_t3: #544dec; /* Grundfarbe Theme 3 */
	--color_t4: #dea418; /* Grundfarbe Theme 4 */
}


html{
	font-family: 'Source Sans Pro', 'roboto-regular', Verdana, Helvetica, sans-serif;
	font-size: 1em; 
	font-weight: normal;
}

body{  
	background: #ddd;
	background: var(--body_color, #eee);
	color: #323232;
	color: var(--text_color, #323232);
}

.wrapper{
	margin: 2em auto; 
	max-width: 900px; 
	/* overflow: hidden; */
}

h1, h2, h3, h4, h5, h6{
	color: #2da397;
	color: var(--hxx_color, #2da397);
}

/* Hauptnavigation */

.mainnav{
	margin-top:0;
	padding:0;
	background-color: #5e6064;
	background-color:var(--navi_color,  #5e6064);
  }

.mainnav a:hover{
color: #3cdccc;
color: var(--hxx_color2, #3cdccc);
}

  .mainnav ul{
	padding:0;
	list-style:none;
  }

  .mainnav li{
	  padding:0;
	  border-right: solid 4px #000;
	  display:inline-block;
  }

  .mainnav li:nth-child(5){
	  border:0;
  }

  .mainnav a{
	  display:inline-block;
	  width: 100%;
	  height: 30px;
	  text-align: center;
	  padding-top: 15px;
	  color: #eee;
	  color: var(--nav_link_color, #eee);
	  text-decoration: none;
  }

  .col20{width:20%;}
  .col20.mar{width:18%;}

  #open, #close{display:none;}

    nav img{width:40px;
    height: auto;}

    #open img{
        position:relative;
        top:-3px;
	  }
	    

/* Header */

header h1{
	font-variant: small-caps;
	position:relative;
	font-size: 4em;
}
header h1 span{position:absolute;}
header h1 span{
	top:-200px;
	left: 195px;
	color: #205a54;
}
header h1 span+span{
	top:-180px;
	left: 300px;
}
header h1 span+span+span{
	top:-140px;
	left: 200px;
}
header h1 span+span+span+span{
	top:-95px;
	left: 240px;
}

/*zweite Nav Impressum und Kontakt*/
.topnav ul{list-style-type: none;}

.topnav a{
	margin-right: 1em;
	color: #323232;
}


/* Theme 1 - Wahrnehmbarkeit */
.theme1_background{background-color: #a01f8e;}
.theme1_font{color: #a01f8e}
.theme1_border{border-color: #a01f8e;}


/* Theme 2 - Bedienbarkeit */
.theme2_background{background-color: #64a62b;}
.theme2_font{color: #64a62b;}
.theme2_border{border-color: #64a62b;}
dt{font-weight: 900;}



/* Theme 3 - Verständlichkeit */
.theme3_background{background-color: #544dec;}
.theme3_font{color: #544dec;}
.theme2_border{border-color: #544dec;}
#link_fail{
	color:#1755C3;
	font-family:alegreya-sc;
	text-decoration:underline;
	cursor:pointer;
}

/* Theme 4 - Kompatibilität */
.theme4_background{background-color: #dea418;}
.theme4_font{color: #dea418;}
.theme2_border{border-color: #dea418;}





/* content and info classes */
.example{
	border:1px solid #000;
	padding:1%;
	background:rgb(255, 255, 255);
	font-size: 0.9em;
	font-family:Consolas, 'Courier New', monospace;
  }

.introduction{
	background: #eee; 
	border: 2px solid #205a54;;
	border: 2px solid var(--color_gen2, #205a54);
	margin-top: 1em;
	padding: 0 1em;
}

.content{
	background: #fff; 
	border: 2px solid #205a54;
	border: 2px solid var(--color_gen2, #205a54);
	margin-top: 1em;
	padding: 0 1em;
	padding: 3%;
}

.infobox{
    float:right;
    display:block;
    width:30%;
    margin-left:3%;
    margin-top:1%;
    margin-right: 1%;
    padding:0 2% 0% 2%;
    background:rgb(236, 236, 236);
    font-size: 0.9em;
    border: 1px solid #2da397; 
  }

/* Links */

a:hover{
	color: #cd5038;
	color: var(--hover_color, #cd5038);
}

a{

	color: #2da397;
	color: var(--link_color, #2da397);
	transition: color 0.2s ease;
}

.active{
	color: inherit;
}

.active:after{
	content:"";
	border-bottom: 8px solid #205a54;
	border-bottom: 8px solid var(--link_color, #205a54);
	display:block;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	top: 0px;
}

.activeli{background:#ccc;}


.linktext a,
.linktext a:visited{
	text-decoration: none;
	color:#cd7766;
	border-bottom: 0.1em solid #cd7766;
}

.linktext{
	text-decoration: none;
	color:#cd7766;
	border-bottom: 0.1em solid #cd7766;
}

.linktext:hover, .linktext:focus{
	border-bottom: 3px solid #cd5038;
	color: #cd5038;
}



/* Buttons */

a.btn-1{
	background: #cd5038 ;
	color: #fff;
	padding: 7px 20px 5px;
	border-radius: 20px;
	text-decoration: none;
	transition: background 0.2s ease;
	margin-right: 20px;
	
}
a.btn-1:hover{
	background: #2da397;
	border-bottom: 0.35em solid #cd5038;
}

a.btn-2{
	background:#205a54;
	color: #fff;
	padding: 7px 20px 5px;
	border-radius: 20px;
	text-decoration: none;
	transition: background 0.2s ease;
	margin-right: 20px;
}
a.btn-2:hover{
	background: #2da397;
	border-bottom: 0.35em solid #205a54;
}

blockquote {
	margin: 1em 40px; 
	font-style: italic;
}

/* Kontaktseite */

.required label:after{
	content: " " "*";
}
.kontaktinhalt{
	margin: 10px 0;
	width: 50%;
}
label{
	display: inline-block;
	min-width: 100px;
}
input{
	border: 1px solid #205a54;
}
input:hover,
input:focus{
	border:1px solid #cd5038;
}
fieldset{
	display: inline;
	margin: 10px 0;
	border:2px solid #2da397;
	width: 100%;
	border-radius: 8px;
}
legend{
	text-decoration: underline;
	text-decoration-color: #2da397;
}
.anrede{
	margin-bottom: 0;
}


/*Footer*/
footer{
	background: #323232;
	background: var(--head_color,#323232);  
	color: #ddd;
	color: var(--body_color, #ddd);
	padding: 1%;
}


/* Media */
@media screen and (max-width:53em){
	#open{display:inline-block;}
	.mainnav ul, #mainnav:target #open{display:none;}
	#mainnav:target ul{display:block;}
	#mainnav:target{
	  max-height: 60em;
	  width: 160px;
	  border-radius:0%;
	  transition: all 0.3s ease-out;

	}
	.mainnav li{
	  border:0;
	  border-bottom:4px solid #000;
	}
	#mainnav:target #close{display:inline-block;}
    .mainnav{
        overflow:hidden;
        position:fixed;
        top:1em;
        left: 2em;
        width: 50px;
        max-height: 50px;
        min-height:50px;
        border-radius:50%;
      }
  }

  /* bitte den jeweiligen schnipsel in euren themenseiten stylebereich einfügen Danke*/

  /* Wahrnehmbarkeit: Farben für Border */
/*
  .introduction{
    border-color: #a01f8e;;
    border-color: var(--color_t1, #a01f8e;)
    }

    .content{
	border-color: #a01f8e;;
	border-color: var(--color_t1, #a01f8e;)
	}

	.active:after{
	border-color: #a01f8e;;
	border-color: var(--color_t1, #a01f8e;)
	}
*/

	/* Bedienbarkeit: Farben für Border */
/*
	.introduction{
	border-color: #64a62b;;
	border-color: var(--color_t2, #64a62b;)
	}

	.content{
	border-color: #64a62b;;
	border-color: var(--color_t2, #64a62b;)
	}

	.active:after{
	border-color: #64a62b;;
	border-color: var(--color_t2, #64a62b;)
	}
*/	

	/* Verständlichkeit: Farben für Border */
/*
    .introduction{
    border-color: #544dec;
    border-color: var(--color_t3, #544dec)
    }

    .content{
    border-color: #544dec;
    border-color: var(--color_t3, #544dec)
	}
	
	.active:after{
    content:"";
    border-color: #544dec;
    border-color: var(--color_t3, #544dec);
    }
*/	


	/* Kompatibilität: Farben für Border */
/*
    .introduction{
	border-color: #dea418;
	border-color: var(--color_t4, #dea418)
	}
	
	.content{
	border-color: #dea418;
	border-color: var(--color_t4, #dea418)
	}

	.active:after{
	content:"";
	border-color: #dea418;
	border-color: var(--color_t4, #dea418)
	}
*/