/* -----------------------------------------------------------------------------

 FARBSCHEMA  /  ROOT
  
----------------------------------------------------------------------------- */

:root {
	--font-size_p:	1em;
	--font-size_h1: 1.875em;
	--font-size_h2: 1.75em;
	--font-size_h3: 1.625em;
	--font-size_h4: 1.5em;
	--font-size_h5: 1.25em;
	--font-size_h6: 1.125em;
	--max-width:95%;
	--width:800px;
}

/*@media all and (max-width: 720px) {
	:root {
		--font-size_p: 115%;
		--font-size_h2: 120;
		--font-size_h3: 150%;
		--font-size_h4: 115%;
		--font-size_h5: 115%;
		--font-size_h6: 115%;
	}
} */

@media (prefers-color-scheme: dark) {
	:root {
		/*  Farbschema */
		--hintergrund:#001824;
		--haupttext: #DDE7E9;
		--absetzfarbe:#b1cfd5;
		--footer-hintergrund: #024959;

		/*  Links  */
		--haupttext_links: #b1cfd5;
		--haupttext_links-hover: #F26800; 
		--footer_links:#DDE7E9;
		--footer_links-hover: #fca665;

		/* Kontaktformular */
		--hintergrund_felder: #E9EDED;
		--hintergrund_felder_hover: #c9d9dc;
		--unterstrich: #ffffff;
		
		/* menu*/
		--menu-hintergrund:#00131D;
		--opacity: 0.6;
		--navbar:#00131D;
	}
}
	

@media (prefers-color-scheme: light) {
	:root {
		/*  Farbschema */
		--hintergrund:#EDF3F4;
		--haupttext: #024959;
		--absetzfarbe:#024959;
		--footer-hintergrund: #024959;

		/*  Links  */
		--haupttext_links: #024959;
		--haupttext_links-hover: #F26800;
		--footer_links:#DDE7E9;
		--footer_links-hover: #fca665;

		/* Kontaktformular */
		--hintergrund_felder: #f9f9f9;
		--hintergrund_felder_hover: #DDE7E9;
		--unterstrich: #48565a;
		
		/* menu*/
		--menu-hintergrund:#F8FAFA;
		--opacity: 0.2;
		--navbar:#DDE7E9;
	}
}

/* -----------------------------------------------------------------------------

  SCHRIFTFAMILIE
  
----------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------

  FONTS
  
----------------------------------------------------------------------------- */

/* kanit-200 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Kanit';
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/kanit-v15-latin/kanit-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* kanit-500 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Kanit';
	font-weight: 500;
	font-style: normal;
	
	src: url('../fonts/kanit-v15-latin/kanit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* kanit-800 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Kanit';
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/kanit-v15-latin/kanit-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


/* -----------------------------------------------------------------------------

  ICONSET
  
----------------------------------------------------------------------------- */



@font-face {
  font-family: 'iconset';
  src:
    url('../fonts/iconset.ttf?v=5.12') format('truetype'),
    url('../fonts/iconset.woff?v=5.12') format('woff'),
    url('../fonts/iconset.svg?v=5.12#iconset') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconset' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-iconset::before,
.xl-iconset::before,
.iconset::before {
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'iconset';
	-webkit-font-smoothing: antialiased;
}

.nav-iconset::before {
	font-size:1.25em;
	line-height:35px;
}

.xl-iconset::before {
	font-size: 3.125em;
	line-height:1;
	margin-top:-6px;
}

  .icon-ok:before {
	content: "\e902";
	font-size:5.625em;
	color:#339933;
  }

  .icon-nok:before {
	content: "\e903";
	font-size:5.625em;
	color:#d11b24;
  }

  .icon-up:before {
	content: "\e900";
  }
  .icon-ort:before {
	content: "\e901";
  }
  .icon-link:before {
	content: "\e904";
  }
  .icon-kontakt:before {
	content: "\e905";
  }
  .icon-impressum:before {
	content: "\e906";
  }
  .icon-hoerer:before {
	content: "\e907";
  }
  .icon-datenschutz:before {
	content: "\e908";
  }
  .icon-linkedin .path1:before {
	content: "\e909";
	color: rgb(255, 255, 255);
  }
  .icon-linkedin .path2:before {
	content: "\e90a";
	margin-left: -1em;
	color: rgb(0, 126, 187);
  }
  .icon-facebook .path1:before {
	content: "\e90b";
	color: rgb(255, 255, 255);
  }
  .icon-facebook .path2:before {
	content: "\e90c";
	margin-left: -1em;
	color: rgb(49, 111, 246);
  }
  .icon-instagram .path1:before {
	content: "\e90d";
	color: rgb(255, 255, 255);
  }
  .icon-instagram .path2:before {
	content: "\e90e";
	margin-left: -1em;
	color: rgb(0, 0, 0);
  }
  .icon-bars_standard-nav:before {
	content: "\e90f";
  }
  


/* -----------------------------------------------------------------------------

  ROOT ELEMENTS
  
----------------------------------------------------------------------------- */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--hintergrund);
	color: var(--haupttext);
	font-family: 'Kanit', sans-serif;
	font-weight: 200;
	font-size: var(--font-size_p);
}

main {
	content: "";
	display: table;
	clear: both;
	display:block;
	margin:0 auto;
	margin-bottom:300px;
	width:var(--width);
	max-width:var(--max-width);
	margin-top:7px;
	padding-bottom:10px;
	text-align:left;
	/*text-align:justify;*/
	line-height: 1.4;
}


main li {margin-left:20px;}
main ul {margin-bottom:20px;}

p, a { margin-top:0px; }

a { color:var(--haupttext_links); text-decoration: none;}
a:hover { color:var(--haupttext_links-hover); }


strong, b { font-weight: 500; }
.red { font-weight: 800; }

ul { margin:0; padding: 0px; font-size: var(--font-size_p) }

h1,
h2,
h3,
h4,
h5,
h6 { text-align:center; line-height:1.3; font-weight: 200; margin:0; padding:0;}

h1 { font-size: var(--font-size_h1);}
h2,
h3 { font-size: var(--font-size_h3);}
h4 { font-size: var(--font-size_h4);}
h5 { font-size: var(--font-size_h5);}
h6 { font-size: var(--font-size_h6);}

/* h2 {color:var(--absetzfarbe);background-color: var(--h2_balken); padding: 10px 0 10px; margin:80px 0 20px 0} */
h2, h3 {padding: 0 0 0 0; margin:0px 0 10px 0}
h1 { font-weight: 200; margin-top:60px;}

/* -----------------------------------------------------------------------------

  HEADER
  
----------------------------------------------------------------------------- */
header {
	content: "";
	display: table;
	clear: both;
	display:block;
	margin:0 auto;
	width:var(--width);
	max-width:var(--max-width);
	margin-top:7px;
	padding-bottom:10px;
	text-align:left;
	/*text-align:justify;*/
}

/* -----------------------------------------------------------------------------

  MEDIA ELEMENTS
  
----------------------------------------------------------------------------- */

.hide640px { display: inline; width: 100%; }
.hide900px { display: inline; width: 100%; }
.hidden{ display:none; }


/* -----------------------------------------------------------------------------

Trennlinie
  
----------------------------------------------------------------------------- */ 

.zwischenlinie_wrapper {width:100%; display:flex; justify-content:center;}
.zwischenlinie { margin:0 0 20px 0; width:400px; max-width:60%; border-bottom:0.2px solid var(--haupttext)}
.zwischenlinie2 { margin:60px 0 10px 0; width:500px; max-width:70%; border-bottom:0.2px solid var(--haupttext)}


/* -----------------------------------------------------------------------------

iFRAME
  
----------------------------------------------------------------------------- */

iframe { display:block; text-align:center; margin: 0 auto; border:0 ; width:var(--width); max-width: 100%; margin-bottom:100px; }
.footer { background-color: var(--footer-hintergrund); overflow-y: hidden;}

/* -----------------------------------------------------------------------------

Button nach oben und anrufen
  
----------------------------------------------------------------------------- */ 

#scrolltop,
#anrufen {
	position:fixed;
	top:-200px;
}


/* -----------------------------------------------------------------------------

  MEDIA EINSTELLUNGEN
  
----------------------------------------------------------------------------- */

@media all and (max-width: 900px) {
	.hide900px { display: none; }
}

@media all and (max-width: 720px) {

	/*-- KNOPF 'NACH OBEN' UND ANRUFEN -----------------------*/

	#anrufen,
	#scrolltop  {
		border-radius: 100%;
		bottom:25px;
		max-height:60px;
		max-width:60px;
		outline: 0;
		position: fixed;
		top:auto;
		z-index:1010;
	}
	
	#anrufen a,
	#scrolltop a {
		border-radius: 100%;
		color:#fff;
		display:block;
		font-size:40px;
		height:60px;
		max-height:60px;
		text-align:center;
		text-decoration:none;
		width:60px;
	}
	
	#anrufen a:hover,
	#anrufen a:active,
	#scrolltop a:hover,
	#scrolltop a:active {
		overflow:hidden;
		color:#fff;
		text-decoration: none;
		-webkit-touch-callout: none;
	}
	
	#scrolltop {
		background-color:rgba(0, 0, 0, 0.3);
		right:25px;
	}
	
	#anrufen {
		background-color: #40e35c;
		left:25px;
	}
	
	#scrolltop a {
		line-height:50px;
	}
	
	#anrufen a {
		line-height:50px;
	}
	
	#scrolltop a:hover,
	#scrolltop a:active {
		background-color: rgba(0, 0, 0, 0.7);
	}
	
	#anrufen a:hover,
	#anrufen a:active {
		background-color: #0a891f;
	}

	/*-- SACHEN AUSBLENDEN -----------------------*/
	.hide640px { display: none; }

	/*-- TEXTAUSZEICHNUNGEN MediaEvent----------------*/
	main { margin:0 auto; max-width:95%; text-align: justify; font-size: 115%;}
	p { -webkit-hyphenate-limit-before:4;/*ForSafari*/ -webkit-hyphenate-limit-after:4;/*ForSafari*/ -ms-hyphenate-limit-chars:1044; hyphenate-limit-chars:1044; hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto;}
	li { text-align:left; margin-bottom:5px; }	
	
	
}