/* Fonts */
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/merriweather-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v30-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/merriweather-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/merriweather-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v30-latin-italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-700 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/merriweather-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v30-latin-700.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-300 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/merriweather-sans-v22-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/merriweather-sans-v22-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-sans-v22-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-sans-v22-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-sans-v22-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-sans-v22-latin-300.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-regular - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-sans-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/merriweather-sans-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-sans-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-sans-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-sans-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-sans-v22-latin-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-700 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-sans-v22-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/merriweather-sans-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-sans-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-sans-v22-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-sans-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-sans-v22-latin-700.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* sedgwick-ave-regular - latin */
@font-face {
  font-family: 'Sedgwick Ave';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sedgwick-ave-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/sedgwick-ave-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/sedgwick-ave-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/sedgwick-ave-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/sedgwick-ave-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/sedgwick-ave-v12-latin-regular.svg#SedgwickAve') format('svg'); /* Legacy iOS */
}


/* Layout */

body, html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
}

body {
	overflow-y: scroll; /* = Erzwingen des Scroll-Balkens, damit Seite nicht springt. */
}

.container {
	padding: 0 4em;
}

@media (max-width:767px) {
.container {
	padding: 0 2em;
}
}

.hero-container {
	padding: 0;
}


/* Layout Header */

header .container {
	border-top: 18px solid #f0b314;
}

div.logo {
	padding-top: 4em;
	padding-bottom: 2.125em;
}

@media (max-width:480px) {
div.logo {
	padding-top: 5em;
	padding-top: 80px;
	padding-bottom: 0;
}
}

.slogan img {
	padding-top: 20px;
	padding-top: 1.25em;
}

/* Footer */

#footer .container {
	border-top: 1px dashed #776a5c;
	padding-top: 64px;
	padding-top: 4em;
	padding-bottom: 64px;
	padding-bottom: 4em;
}

/* main */

#main .container {
	padding-bottom: 64px;
	padding-bottom: 4em;
}

/* Hintergrundfarben */

body {
	background-color: #6e737d;
}

.container {
	background-color: #ffffff;
}

/* Typo */

body {
	color: #242729;
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.66;
}

h1, h2, p, .ce_text ul {
	font-family: 'Merriweather', serif;
	font-weight: 400;
}

h1 {
	font-size: 2.875em;
	line-height: 1.375;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 2.5em;
	line-height: 1.375;
	margin-bottom: 0.5em;
}

h3, h4, h5, h6 {
	font-size: 1.5em;
	line-height: 1.25;
	font-weight: 700;
	margin-bottom: 0.5em;
}

p, .ce_text ul {
	font-size: 1.35em;
	line-height: 1.75;
	margin-bottom: 1.75em;
}

@media (min-width:992px) and (max-width:1040px) {

h1, h2 {
	font-size: 2.125em;
	line-height: 1;
	margin-bottom: 0.5em;
}

h3, h4, h5, h6 {
	font-size: 1.5em;
	line-height: 1;
	font-weight: 700;
	margin-bottom: 0.5em;
}

p, .ce_text ul {
	font-size: 1.125em;
}

}

@media (max-width:767px) {

h1, h2 {
	font-size: 2.125em;
	line-height: 1;
	margin-bottom: 0.5em;
}

h3, h4, h5, h6 {
	font-size: 1.5em;
	line-height: 1;
	font-weight: 700;
	margin-bottom: 0.5em;
}

p, .ce_text ul {
	font-size: 1.125em;
}
}

.ce_text ul {
	margin-left: 22px;
}

.ce_text li, .download-element a {
	list-style-image: url(../img/list-style-icon.png);
}

p + ul {
	margin-top: -1.5em;
}

/* Listenzeichen vor Download-Links */

.download-element a {
	background: url(../img/list-style-icon.png) no-repeat 0 8px;
	padding-left: 22px;
}

@media (min-width:992px) and (max-width:1040px) {

.download-element a {
	background: url(../img/list-style-icon.png) no-repeat 0 4px;
	padding-left: 22px;
}

}

@media (max-width:767px) {

.download-element a {
	background: url(../img/list-style-icon.png) no-repeat 0 4px;
	padding-left: 22px;
}

}


.text-hervorheben {
	background: #efe4d2 url(../img/pfeilchen.png) no-repeat 18px 18px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size: 2em;
	line-height: 1.375;
	margin-bottom: 1.75em;
	min-height: 121px;
	padding: 48px;
	padding: 1.5em;
}

@media (max-width:767px) {

.text-hervorheben {
	font-size: 1.5em;
}

}

blockquote {
	border-top: 1px dashed #776a5c;
	border-bottom: 1px dashed #776a5c;
	color: #6e737d;
	margin-bottom: 1.75em;
	padding: 24px 24px 32px 24px;
}

blockquote p {
	
	font-family: 'Merriweather', serif;
	font-size: 1.375em;
	font-style: italic;
	font-weight: 400;
	line-height: 1.375;
	letter-spacing: 1px;
	margin-bottom: 1em;
}

blockquote .zitat-quelle {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-size: 0.75em;
	letter-spacing: 0;
	text-align: right;
	margin-bottom: 0;
}

/* Akkordeons */

.ce_accordion {
	margin: 0 2px 2px 0;
}

.ui-accordion-header:focus {
	outline: none;
}

.ui-accordion-header {
	background: #f0b314;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size: 1.125em;
	padding: 0.75em;
	text-align: center;
	text-transform: uppercase;
}

ui-accordion-header-active {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;	
}

.last-element .ui-accordion-header-collapsed {
	margin-bottom: 1.75em;
}

.last-element  .ui-accordion-header-active {
	margin-bottom: 0;
}

.ui-accordion-content {
	border: 1px solid #f0b314;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;	padding: 12px;
}

.ui-accordion-content-active {
	border-top: none;
	margin-bottom: 1.75em;
	margin-top: -2px;
}

hr {
    display: block;
    border: 0;
    border-top: 1px dashed #776a5c;
    height: 1px;
    margin: 0 0 2em 0;
    padding: 0;
}

/* Blog-Styles */

.layout_latest {
	border-bottom: 1px dashed #776a5c;
	margin-bottom: 64px;
	margin-bottom: 4em;
}

p.info {
	color: #6e737d;
	line-height: 1.5;
	font-size: 1.25em;
	font-style: italic;
	margin-bottom: 1em;
}

p.back {
	border-top: 1px dashed #776a5c;
	border-bottom: 1px dashed #776a5c;
	color: #6e737d;
	line-height: 1.5;
	font-size: 1.25em;
	padding: 16px 0;
	padding: 1em 0;
}

.ce_comments h3:first-child {
	border-bottom: 1px dashed #776a5c;
	font-size: 2em;
	margin-bottom: 32px;
	margin-bottom: 2em;
}

.comment_default {
	border-bottom: 1px dashed #776a5c;
	margin-bottom: 32px;
	margin-bottom: 2em;
}

/* Bilder */

figure { margin-bottom: 1.75em; }

figure.float_left {
	margin-right: 32px !important;
	margin-right: 2em !important;
}

figure.float_left {
	margin-right: 32px !important;
	margin-right: 2em !important;
}

.caption {
	border-bottom: 1px dashed #776a5c;
	font-style: italic;
	margin-top: 0.25em;
}

.flexible, .flexible img, .ce_image img, .image_container img,
figure img {
	height: auto;
	max-width: 100%;
}

.logo img { max-width: 400px; }

@media (max-width:400px) {
	.logo img { max-width: 100%; }	
}

@media (min-width:401px) and (max-width:600px) {
	.logo img { max-width: 325px; }	
}

@media (min-width:601px) and (max-width:1200px) {
	.logo img { max-width: 350px; }	
}

/* Links */

a, a:link, a:visited {
	color: #022651 !important;
}

a:hover, a:active, a:focus {
	color: #e68f03 !important;
}

/* Formular */

.ce_form, .form {
	background-color: #efe4d2;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	padding: 32px;
	padding: 2em;
}

.ce_form h1, .ce_form h2, .ce_form h3, .ce_form h4, .ce_form h5, .ce_form h6 {
	margin-bottom: 20px;
	margin-bottom: 1.25em;
}

.ce_form .widget .form .widget {
	margin-bottom: 32px;
	margin-bottom: 2em;
}

.widget-submit {
	margin-top: 16px;
	margin-bottom: 1em;
}

.ce_form label, .form label {
	display: block;
	font-style: italic;
}

.ce_form .text, .ce_form .textarea, .form .text, .form .textarea {
	font-family: 'Merriweather', serif;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 2;
	padding: 12px;
	padding: 0.75em;
	width: 100%;
}

/* 6 Buttons */

button.button, button.submit {
  background-image: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: "Merriweather Sans", Arial, Helvetica, Verdana, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 0;
	letter-spacing: 0.5px;
	letter-spacing: 0.03125rem;
  line-height: 1.42857143;
  padding: 6px 12px;
  padding: 0.375rem 0.75rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

button.button, button.submit {
  color: #ffffff;
  background-color: #f0b314;
  border: 0px solid #664900;
}
button.button:focus, button.submit:focus {
  color: #ffffff;
  background-color: #ffc42e;
  border: 0px solid #664900;
}
button.button:hover, button.submit:hover {
  color: #ffffff;
  background-color: #ffc42e;
  border: 0px solid #664900;
}
button.button:active, button.submit:active {
  color: #ffffff;
  background-color: #ffc42e;
  border: 0px solid #664900;
}


/*** Navigationen ***/

nav, .mod_navigation {
	font-family: 'Merriweather Sans', sans-serif;
}

nav ul, nav li {
	margin: 0;
	padding: 0;
}

nav a, nav a:visited, nav a:hover, nav:active, nav a:focus {
	text-decoration: none;
}

/* Main Nav */

.main-nav-box {
	margin-bottom: 1.75em;
}

.main-nav a.active, .main-nav a.trail, .main-nav strong {
	border-bottom: 6px solid #013275;
	font-weight: 700;
}

/* Sub Nav */

.sub-nav li {
	padding: 6px 0;
	padding: 0.375em 0;
}

.sub-nav .submenu .level_2 {
	margin-left: 24px;
	margin-left: 1.5em;
}

.sub-nav a.active, .sub-nav strong {
	font-weight: 700;
}

.sub-nav .level_1 li { border-top: 1px dashed #53585d; }

.sub-nav .level_1 li.first { border-top: 1px solid #53585d; }

.sub-nav .level_1 li.last { border-bottom: 1px solid #53585d; }

.sub-nav .level_2 li, .sub-nav .level_2 li.first { border-top: 0; }

.sub-nav .level_2 li.last { border-bottom: 0; }

/* Mobile Nav */

.mod_mobile_menu {
	position: absolute;
	top: 3rem;
	right: 1.875rem;
	z-index: 5000;
}

.mobile_menu {
	cursor: pointer;
	display: block;
	z-index: 5000;
}

.mobile_menu .inner {
	height: 100%;
	overflow-y: auto;
}

.mobile_menu_trigger { cursor: pointer; }

.mobile_menu_trigger .nav-icon {
	cursor: pointer;
	height: 45px;
	position: relative;
	width: 50px;
}

.mobile_menu_trigger .nav-icon span {
	background: #53585d;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	height: 5px;
	left: 0;
	opacity: 1;
	position: absolute;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
	width: 50px;
}

.mobile_menu_trigger .nav-icon span:nth-child(1) {
	background: #53585d;
	top: 0px;
}

.mobile_menu_trigger .nav-icon span:nth-child(2) {
	background: #53585d;
	top: 15px;
}

.mobile_menu_trigger .nav-icon span:nth-child(3) {
	background: #53585d;
	top: 30px;
}

.mobile_menu_trigger.active .nav-icon span:nth-child(1) {
	background: #53585d;
	top: 10px;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}

.mobile_menu_trigger.active .nav-icon span:nth-child(2) { display: none; }

.mobile_menu_trigger.active .nav-icon span:nth-child(3) {
	background: #53585d;
	top: 10px;
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg);
}

.mobile_menu_overlay { background: rgba(158,159,161,0.8) !important; }

.mobile_menu .inner {
    background-color: rgba(238,238,238,0.95);
    height: 100%;
    padding-top: 32px;
    padding-top: 2rem;
    overflow-y: auto;
}

.mobile_menu nav {
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.5;
	text-transform: uppercase;
}

.mobile_menu ul {
	text-align: left;
}

.mobile_menu .level_2 li {
	border-bottom: 0;
	text-transform: uppercase;
}

.mobile_menu .level_2 li {
	border-bottom: 0;
	text-transform: none;
}

.mobile_menu li {
	border-bottom: 1px dotted #796442;
	float: none;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.mobile_menu .mobile-nav-start li.first { border-top: 1px dotted #475c7a; }

.mobile_menu a, .mobile_menu a:visited, .mobile_menu a:hover, .mobile_menu a:active {
	display: block;
	text-decoration: none;
}

.mobile_menu li.active a, .mobile_menu li.active span {
	display: block;
}

.mobile_menu li.active span {
	font-weight: 700;
}

.mobile-menu nav a, .mobile-menu nav a:link, .mobile-menu nav a:visited {
	color: #022651;
}

.mobile-menu nav a:hover, .mobile-menu nav a:active, .mobile-menu nav a:focus {
	color: #e68f03;
}


/* Einrückungen mobile menu */

.mobile_menu .level_1 a, .mobile_menu .level_1 strong {
	padding-left: 30px;
}

.mobile_menu .level_2 a, .mobile_menu .level_2 strong {
	padding-left: 50px;
}

.mobile_menu .level_3 a, .mobile_menu .level_3 span {
	padding-left: 40px;
}

.mobile_menu .level_4 a, .mobile_menu .level_4 span {
	padding-left: 40px;
}

@media (max-width:991px) {
.main-nav, .footer-nav, .sub-nav {
	display: none;
}
}

@media (min-width:992px) {
.mobile_menu {
	display: none;
}
}

/* Headernav */

header nav {
	font-size: 1.125em;
}

header nav a,
header nav a:link,
header nav a:visited {
	color: #022651;
}

header nav a:hover, header nav a:active, header nav a:focus {
	color: #e68f03;
}

header nav li, footer nav li {
	float: left;
	text-transform: uppercase;
}

header nav .level_1 li:after, footer nav .level_1 li:after {
	content: "|";
	padding-left: 16px;
	padding-left: 1rem;
	padding-right: 16px;
	padding-right: 1rem;
}

header nav .level_1 li.last:after, footer nav .level_1 li.last:after {
	content: "";
	padding-left: 0;
	padding-right: 0;
}

/* Hilfsklassen */

.block:before, .block:after {
    content: "";
    display: table;
}

.invisible {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* Contao Float classes */
.float_left { float:left; }
.float_right { float:right; }


/* Tooltip */
$dark-color: #000;
$border-radius: 10px;
$light-color: #fff;
$font-size-sm: 14px;
$control-width-sm: 200px;
$unit-1: 5px;
$unit-2: 4px;
$zindex: 100;
$zindex-3: 101;

.tooltip {
  position: relative;
  &::after {
    background: rgba($dark-color, .95);
    border-radius: $border-radius;
    bottom: 100%;
    color: $light-color;
    content: attr(data-tooltip);
    display: block;
    font-size: $font-size-sm;
    left: 50%;
    max-width: $control-width-sm;
    opacity: 0;
    overflow: hidden;
    padding: $unit-1 $unit-2;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    transform: translate(-50%, $unit-2);
    transition: opacity .2s, transform .2s;
    white-space: pre;
    z-index: $zindex-3;
  }
  &:focus,
  &:hover {
    &::after {
      opacity: 1;
      transform: translate(-50%, -$unit-1);
    }
  }
  &[disabled],
  &.disabled {
    pointer-events: auto;
  }

  &.tooltip-right {
    &::after {
      bottom: 50%;
      left: 100%;
      transform: translate(-$unit-1, 50%);
    }
    &:focus,
    &:hover {
      &::after {
        transform: translate($unit-1, 50%);
      }
    }
  }

  &.tooltip-bottom {
    &::after {
      bottom: auto;
      top: 100%;
      transform: translate(-50%, -$unit-2);
    }
    &:focus,
    &:hover {
      &::after {
        transform: translate(-50%, $unit-1);
      }
    }
  }
  
  &.tooltip-left {
    &::after {
      bottom: 50%;
      left: auto;
      right: 100%;
      transform: translate($unit-2, 50%);
    }
    &:focus,
    &:hover {
      &::after {
        transform: translate(-$unit-1, 50%);
      }
    }
  }
}
