/* die Variablen für diese Site */

:root {
	--zeichensatz_art: system-ui, sans-serif;
	--zeichensatz_size: 1.2rem;
	--zeichensatz_weight: 500;
	--zeilenhoehe: 1.4rem;

	--body_max_weite: 1300px;
	--umschalt_weite_pc: 901px;
	--umschaltweite_mobil: 900px;

	--linkcolor: darkred;
	--flexkopf_verlauf_start: #858585;
	--flexkopf_verlauf_ende: #ABABAB;

	--flexkopf_bild_verlauf_start: #ABABAB;
	--flexkopf_bild_verlauf_ende: #CBCBCB;

	--alle_box_shadow: 5px 5px 10px rgb(0,0,0,0.5);

	--alle_border_radius:5px;


/* Für das PC- Menü */

	--navi_main_BG_color: grey;
	--navi_main_BG_verlauf_start: #858585;
	--navi_main_BG_verlauf_ende: #ABABAB;
	--navi_main_font_size: 1.5rem;
	--navi_main_active_color: white;

	--navi_foot_font_size: 1rem;

	--hover_color: orange;

}

body
{
  background-image:url("/files/Imkerseite/Content/grafiken/imkerverein-hintergrund.png");
  background-position:center;
  background-repeat:repeat;
  background-attachment: fixed;
  font-family: Lato, sans-serif;
}


#headerLogo
{
	margin-left:10px;
	margin-top:10px;
}

#container, #header
{
	background-color: GhostWhite;
	padding:20px;
}

.layout_upcoming {
	line-height: 1.5em;
}

@media only screen and (min-width: 901px)
{
	body
	{
		margin: 20px;
	}

	#header
	{
		height:175px;
	}

	#container
	{
    width:auto;
    margin:0;
	}

	#MobilMenuStarter
	{
		display:none;
	}

	hr.ausblenden
	{
		display:none;
	}
	#header .mod_navigation
	{
    margin-bottom:10px;
    background-color:#f6ca17;
	}

/* Formatierung der Liste */
	#header .mod_navigation ul {
    /* width:auto;
    margin:0;
    padding:0;
    list-style-type:none; */
    margin-top:10px;
    font-size:1.6em;
    display: flex;
    justify-content: center;

}

/* Formatierung des Listenelements */
	#header .mod_navigation li
	{
    /* float:left;
    width:auto;
    margin:0;*/
		float:left;
    padding-right:7px;
    padding-left:7px;
	}

/* Menüpunkte gestalten */
#header .mod_navigation a,
#header .mod_navigation span {
    display:block;
    margin-left:5px;
    line-height:44px;
    font-size:18px;
    text-decoration:none;
    color:#000;
}
#header .mod_navigation .active,
#header .mod_navigation .trail
{

    margin-left:5px;
    line-height:44px;
    font-weight:normal;
    font-size:18px;
    color:#f00;
}

/* Rollover und Focus */
	#header .mod_navigation a:hover,
	#header .mod_navigation a:focus
	{
    	text-decoration:underline;
    	color:#c17013;
	}


}

@media only screen and (max-width: 900px)
{
	body
	{
		margin:5px;
	}

	#headerLogo
	{
		margin-left:10px;
		margin-top:10px;
		width: 180px;
	}

	#header .mod_navigation
	{
		display: none;
	}

	#MobilMenuStarter
	{
		position: absolute;
		top: 40px;
		right: 20px;
	}
}

/* Allgemeine Formatierungen */

	#kontaktformular
	{
		width:95%;
		margin:0 auto;
		font-size:1.2em;
		line-height: 1.2;
		margin-bottom: 2em;
		border-top: 1px solid #000
	}

	#kontaktformular label
	{
		display: block;
		cursor: pointer;
		margin: 1em 0 0.25em 0;
	}

	#kontaktformular .checkbox_container label
	{
		display: inline;
	}

		#kontaktformular .checkbox_container
	{
		margin-top: 1.5em;
		margin-bottom: 1em;
	}

	#kontaktformular input[type="text"],
	#kontaktformular input[type="email"],
	#kontaktformular textarea
	{
		width: 100%;
	}



/* Formatierung des Akkordions */
.ce_accordion {
    border:1px solid #000;
    border-spacing:5px;
}

/* Formatierung des Akkordions */
.ce_accordion .accordion div
{
    padding:.5em;
}

/* Formatierung der Schalter */
.ce_accordion .toggler
{
    padding:.25em .5em .25em 1.5em;
    background:#f6c916 url("/files/Imkerseite/Content/grafiken/plus.gif") left center no-repeat;
    cursor: pointer;
    outline: none;
}

/* Formatierung der Schalter */
.ce_accordion .toggler.active
{
    background:#f6c916 url("/files/Imkerseite/Content/grafiken/minus.gif") left center no-repeat;
}


/* Formatierung der Fließtexte im Inhalt */
#main h1 {
    margin-top:0;
    line-height:1;
}

/* Formatierung der Paragrafen im Inhalt */
#main p {
    margin-bottom:1em;
    line-height:1.5em;
}

/* Formatierung der Links in main */
#main a {
    font-weight:bold;
    text-decoration:none;
    color:#c17013;
}

/* Formatierung der Links in main */
#main a:hover {
    font-weight:bold;
    text-decoration:underline;
    color:#f6a315;
}
#main video {
    width: 100% !important;
    height: auto !important;
}
	.error {
    color:#f00;
    text-transform:uppercase;
}
.mittig_250 {
    width:250px;
    margin:0 auto;
    text-align:center;
}
.mittig {
    width:100%;
    margin:0 auto;
    text-align:center;
}
#main .h3_mittig {
    margin:0 auto;
    text-align:center;
}

#main video {
    width: 100% !important;
    height: auto !important;
}

#toTop
{
	background-color: #c17013;
	font-size: 20px;
	z-index:20;
	border: #000 solid 1px;
}

.flexcontainer,
#bericht-flex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	align-items: center;

}

.flexbild {
		padding: 1rem;
		margin: 1rem 0;
		display: block;
		background-image: linear-gradient(to bottom, var(--flexkopf_bild_verlauf_start), var(--flexkopf_bild_verlauf_ende));;
		border-radius: var(--alle_border_radius);
		box-shadow: var(--alle_box_shadow);
	}

.flexbild figcaption {
	padding-top: 0.5rem;
	text-align: center;
}