/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* inter-regular - 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/inter-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-serif-regular - 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: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ibm-plex-serif-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-serif-600 - 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: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/ibm-plex-serif-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* lato-regular - 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: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-700 - 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: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
  --cnvs-themecolor:	#0097b2;
  --cnvs-themecolor-rgb:	0, 151, 178;
  --bs-link-color:	var(--cnvs-themecolor);
  --bs-link-color-rgb:	var(--cnvs-themecolor-rgb);
  --bs-link-hover-color:	var(--cnvs-heading-color);
  --cnvs-headings-font-weight:	400;
  /* Font Families */
  --cnvs-body-font:	"Lato';
  --cnvs-primary-font:	"Lato";
 --cnvs-secondary-font:	"Lato";
  --bs-body-color: #191919;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;    
    --cnvs-side-header-width: 500px;
}

:root,
.not-dark {
    --cnvs-contrast-bg-offset:	#fff;
}


.cnvs-cursor {
  --cnvs-cursor-size: 2rem;
  --cnvs-cursor-bg: #52b7c1;
  --cnvs-cursor-opacity: 0.7;
  --cnvs-cursor-action-size: 3rem;
  --cnvs-cursor-action-bg: var(--cnvs-themecolor);
  --cnvs-cursor-action-opacity: 0.4;
}

.cnvs-hamburger {
  --cnvs-hamburger-size: 2.1rem;
  --cnvs-hamburger-width: 4px;
}
.cnvs-hamburger .cnvs-hamburger-inner, .cnvs-hamburger .cnvs-hamburger-inner::before, .cnvs-hamburger .cnvs-hamburger-inner::after {
  background-color: #52b7c1; 
}

body {
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: left;
	font-family: Lato';
	/* word-wrap: break-word; */
	-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
    font-weight: 400;    
}

.font-body { font-family: 'IBM Plex Serif', serif; }
.font-primary { font-family: 'IBM Plex Serif', serif; }
.font-secondary { font-family: 'IBM Plex Serif', serif;}

::selection {background: #009bad;color: #fff;	text-shadow: none;}
::-moz-selection {background: #009bad; /* Firefox */color: #fff;	text-shadow: none;}
::-webkit-selection {background: #009bad; /* Safari */color: #fff;text-shadow: none;}

a { text-decoration: none !important; color: #009bad;}
a:hover { text-decoration: none!important; color: #009bad!important;}
a:active { text-decoration: none!important; color: #009bad!important;}

strong { font-weight: 500;}

p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form {
  margin-bottom: 20px;
}

.lead { font-size: 1.5rem;}

h1, h2, h3, h4, h5 {
	color: #333;
	font-weight: 800;
	line-height: 1.3;
	margin: 15px 0 20px 0;	
    font-family: 'Lato';
	text-transform: none;
    /*font-style: italic;*/
}

h1 {font-size: 70px; }
h2 { font-size: 50px;}
h3 { font-size: 30px;}
h4 { font-size: 26px;}

h3.zitate { font-size: 36px; text-transform: none; margin: 15px 0px 15px 0px;}
h2 mark { 
    color: #333; 
    background-color: #fff; 
    padding: 0px 3px 0px 3px; 
    line-height: 5.3rem;
    font-size: 4rem;
}

mark, .mark { color: #333; background-color: #fff;}

.modal-body h2 { font-size: 40px!important;}
.modal-body h4 { font-size: 24px!important; }

.emphasis-title {
  --cnvs-emphasis-title-font-size: 64px;
  margin: 50px 0 30px;}


.heading-block h1, .heading-block h2, .heading-block h3, .heading-block h4, .emphasis-title h1, .emphasis-title h2 {
  font-weight: 800;
  letter-spacing: 0px;
  color: #2d3c4b;
  text-transform: none;
}

.heading-block h1 {  font-size: 70px;}
.heading-block h2 {  font-size: 50px;}
.heading-block h3 {  font-size: 40px;}

.heading-block::after { display: none;}

.heading-block > span:not(.before-heading) {
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: #e74610;
  font-family: 'Lato';
    font-size: 26px;
}

/****************************  header und navigation  ***************/

#header { height: 200px;}

#header-wrap #logo img { height: 220px;}

#page-menu-wrap { background-color: #fff;}

#page-menu-trigger { 
  width: 60px;
  height: 60px; 
  color: #009bad;
  font-size: 44px;
}


.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
  height: 130px;
}

.is-expanded-menu .full-header #logo {
  padding-right: 30px;
  border-right: none;
}

.is-expanded-menu .full-header .primary-menu .menu-container { border-right: none;}

#header-wrap {border-bottom:none;}

.is-expanded-pagemenu #page-menu.dots-menu {
  position: fixed;
  top: 20%;
  right: 20px;
  width: 100px;
}
#page-menu {
  --cnvs-page-submenu-sticky-offset: var(--cnvs-header-height-shrink);
  --cnvs-page-submenu-link-size: 1.5rem;
  --cnvs-page-submenu-link-marging-x: 4px;
  --cnvs-page-submenu-link-marging-y: 10px;
  --cnvs-page-submenu-link-rounded: 14px;
  --cnvs-page-submenu-dropdown-width: 150px;
  --cnvs-page-submenu-trigger: 44px;
  --cnvs-page-dotsmenu-size: 20px;
  --cnvs-page-dotsmenu-gutters: 10px;
  --cnvs-page-dotsmenu-rounded: 50%;
}
.is-expanded-pagemenu #page-menu.dots-menu .page-menu-item > a {
  background-color: #e7460f;
  color: var(--cnvs-contrast-600);  
}

.is-expanded-pagemenu #page-menu.dots-menu .page-menu-item div {
  font-size: 1.5rem;
  letter-spacing: 0px;
  color: #FFF;
}
.page-menu-item > a {
  position: relative;
  line-height: 28px;
}
.is-expanded-pagemenu #page-menu.dots-menu .page-menu-item div {
  text-transform: none;
  letter-spacing: 0px;
}  

.is-expanded-menu #header.full-header.transparent-header #header-wrap { border-bottom: none;}

/****
.menu-link {
  line-height: 30px;
  color: #52b7c1;
  font-weight: 400;
  font-size: 26px;
  font-family: 'Lato';
  text-transform: none;
  letter-spacing: normal;
}

****/

.slider-caption, .flex-caption {
  justify-content: center;
  z-index: 20;
  max-width: 670px;
}
.slider-caption h2, .slider-caption .h2 {
  color: #e7460f;
    margin-top: 300px;
}

.slider-arrow-right i,  .slider-arrow-left i{
  line-height: var(--cnvs-slider-arrows-size);
  color: #fff;
  font-size: 66px;
  text-align: center;
}

.slider-arrow-right, .slider-arrow-left {
  background-color: transparent;
}

.slider-arrow-left:hover,
.slider-arrow-right:hover,
.flex-prev:hover,
.flex-next:hover,
.slider-arrow-top-sm:hover,
.slider-arrow-bottom-sm:hover {
  background-color: transparent!important;
}

/*******************  content und allgemien auszeichnungen **************/

.bg-tuerkis {background-color: #009bad;}
.bg-gelb {background-color: #fdcc02;}
.bg-orange {background-color: #e74610;}
.bg-rot {background-color: #cd171a;}
.bg-gruen {background-color: #3ea535;}

.bg-stadtkontur {background-color: #ff6d4d;}


.tuerkis {color: #009bad;} 
.gold {color: #ffa600;}
.rot {color: #e74610;}


.rounded-5 {
  border-radius: 1.5rem !important;
}

.button {  
  margin: 5px;
  margin-top: 5px;
  padding: var(--cnvs-btn-padding-y) var(--cnvs-btn-padding-x);
  font-size: 20px;
  line-height: var(--cnvs-btn-lineheight);
  text-align: center;
  background-color: #009bad;
  color: #fff;
  font-weight: 400;
  border: 2px solid #fff;    
}

.pfeil-weiss {background-image: url('../images/icons/pfeil-weiss.png'); background-position: center center; background-size: 100%; background-repeat: no-repeat;}

.iconlist > li i:first-child, .iconlist > li img:first-child {
  text-align: center;
  color: #009bad;
}
.iconlist li { font-size: 1.3rem;}

blockquote { 
    padding: 10px 20px;
    font-weight: 400;
    line-height: 1.5;
    margin: 20px 0 20px 0;
    font-family: 'Lato';
	text-transform: none;
    border-left: none;
}


.ticker a { color: #fff;}


/******************************  floating button mit Formular ************/

#wrapper::after {
			content: "";
			opacity: 0;
			/***  position: absolute;  macht das der Hintergrund verdunkelt wenn das Formular geöffnet ist ***/ 
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #fff;
			transition: opacity 0.3s, background-color 0.2s ease;
		}

		.floating-btn-open #wrapper::after {
			opacity: 1;
			background-color: rgba(0, 0, 0, 0.75);
		}

		.floating-btn-wrap {
			--cnvs-floating-btn-size: 4rem;
			--cnvs-floating-btn-pos-right: var(--cnvs-floating-btn-size);
			--cnvs-floating-btn-pos-bottom: var(--cnvs-floating-btn-size);
			--cnvs-floating-btn-transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			background-color: transparent;
			--cnvs-floating-btn-icon-color: #FFF;
			--cnvs-floating-btn-bg-active-color: var(--bs-dark);
			--cnvs-floating-btn-box-width: 25rem;
			--cnvs-floating-btn-box-padding: 2rem;
			--cnvs-floating-btn-box-radius: 0;
			--cnvs-floating-btn-box-bg: #FFF;
			--cnvs-floating-btn-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.07);

			position: fixed;
			right: var(--cnvs-floating-btn-pos-right);
			bottom: 60%;
			z-index: 199;
		}

		.floating-btn-wrap .floating-btn {
			position: absolute;
			left: 0;
			top: 0;
			width: var(--cnvs-floating-btn-size);
			height: var(--cnvs-floating-btn-size);
			border-radius: var(--cnvs-floating-btn-size);
			background-color: #009bad;
			color: #fff;
			cursor: pointer;
			z-index: 3;
			transform: translate(-50%, -50%);
			transition: transform .3s ease;
		}

		.floating-btn-wrap .floating-btn:hover,
		.floating-btn-open .floating-btn-wrap .floating-btn {
			transform: translate(-50%, -50%) scale(1.1);
			background-color: #009bad;
		}

		.floating-btn-wrap .floating-btn .floating-btn-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			font-size: calc(var(--cnvs-floating-btn-size) * .5);
			-webkit-transition: var(--cnvs-floating-btn-transition);
			transition: var(--cnvs-floating-btn-transition);
			-webkit-transition-property: opacity, -webkit-transform;
			transition-property: opacity, transform;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			-webkit-backface-visibility: hidden;
		}

		.floating-btn-wrap .floating-btn .floating-btn-icon.btn-active,
		.floating-btn-open .floating-btn-wrap .floating-btn .floating-btn-icon {
			opacity: 0;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

		.floating-btn-open .floating-btn-wrap .floating-btn .floating-btn-icon.btn-active {
			opacity: 1;
			-webkit-transform: translate(-50%, -50%) rotate(-45deg);
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		.floating-btn-wrap .floating-btn-box {
			opacity: 0;
			position: absolute;
			right: 0;
			bottom: 0;
			width: var(--cnvs-floating-btn-box-width);
			background-color: #fff;
			border-radius:30px;
			z-index: 1;
			padding: var(--cnvs-floating-btn-box-padding);
			-webkit-transform-origin: right bottom;
			transform-origin: right bottom;
			box-shadow: var(--cnvs-floating-btn-box-shadow);
			-webkit-transform: scale(.01);
			transform: scale(.01);
			-webkit-transition: all var(--cnvs-floating-btn-transition);
			transition: all var(--cnvs-floating-btn-transition);
			-webkit-backface-visibility: hidden;
		}

		.floating-btn-open .floating-btn-wrap .floating-btn-box {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}



/***************** footer *******/

#section-kontakt {
  position: relative;
  background-color: #fff;
  border-top: none;
  margin: auto;
    color: #333;
}



#copyrights {
  background-color: #f4f4f4;
  font-size: var(--cnvs-copyrights-font-size);
}


#gotoTop {
			--cnvs-gotoTop-stroke-color: var(--cnvs-themecolor);
			--cnvs-gotoTop-stroke-width: 4px;
			--cnvs-gotoTop-scroll: 260;
			background-color: transparent !important;
		}

		#gotoTop::before {
			/* font-icons.css */
			content: "\F286";
			font-family: 'bootstrap-icons';

			position: absolute;
			left: 50%;
			top: 50%;
			width: calc(32px + calc(var(--cnvs-gotoTop-stroke-width) * .5));
			height: calc(32px + calc(var(--cnvs-gotoTop-stroke-width) * .5));
			line-height: calc(32px - 1px);
			font-size: 1rem;
			color: #222;
			transform: translate(-50%, -50%);
			border: 2px solid rgba(0,0,0,0.1);
			border-radius: 50%;
			z-index: -1;
		}

		#gotoTop circle {
			stroke: var(--cnvs-gotoTop-stroke-color);
			stroke-width: var(--cnvs-gotoTop-stroke-width);
			transform: rotate(-90deg);
			transform-origin: center;
			stroke-dashoffset: var(--cnvs-gotoTop-scroll);
			stroke-dasharray: 255 255;
			z-index: 1;
		}



/*******************  responsive *******************************/


@media (min-width: 992px) {
	
    .is-expanded-menu.side-header.open-header #header-trigger {
      --cnvs-header-trigger-size: 7rem;
    }
    .bi-list::before { content: "\f479"; color: #52b7c1; }
    .bi-x-lg::before { content: "\f659"; color: #52b7c1;}

	.side-header #header-wrap {
		width: calc( 100% + 40px );
		padding-bottom: 40px;
		padding-left: 40px;
		margin: 0 auto;
		position: relative;
	}

	.side-header #header-wrap .container { width: auto; }


	.side-header .header-title {
		opacity: 0;
		padding: 0;
		margin-bottom: 25px;
		font-size: 10px;
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: 4px;
	}

	
    .is-expanded-menu.side-header.side-header-right.open-header #header-trigger,
    .is-expanded-menu.side-header.side-header-right.open-header.side-header-open #header-trigger {
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border: none;
        text-align: center;
        z-index: 399;
    }

    .is-expanded-menu.side-header.side-header-right.open-header #header-trigger i { margin-top: 20px; margin-left: -30px;}
    
    .w-50 { width: 80% !important;}


}


/* ----------2560  ----------*/

@media (min-width: 2700px) {
    
    .section { max-width: 2560px; margin: auto; }
   
    
}


/* --------- 1220  ----------*/

@media  (max-width: 1220px) {	
    
    .section {
        margin: 10px;
        padding: 10px;
    }
    .emphasis-title h1, .emphasis-title .h1, .emphasis-title h2, .emphasis-title .h2 {font-size: 54px;}
    
    .w-50 { width: 85% !important;
    
}

/* --------- 1024  ----------*/

@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait) {	    
 
    
}


/* ---------- bis 992  ----------*/

@media  (max-width: 991.98px) {
    
    #header-wrap { background-color: transparent;}
    
    #header { height: 130px;}
    #header-wrap #logo img { height: 150px;}
    
    .page-menu-nav { width: 225px;}
    
    .section { margin: 10px; padding: 10px;}
    .emphasis-title {  margin: 10px 0 10px;}
    
    .emphasis-title h1, .emphasis-title .h1, .emphasis-title h2, .emphasis-title .h2 {font-size: 50px;}
    
    .heading-block h2 { font-size: 40px;}
    .heading-block > span:not(.before-heading) {
        font-weight: 400;
        font-size: 22px;}
    h3 { font-size: 30px;}
    
    .w-50 { width: 30% !important;}
        
    
}

/* ---------- bis 768  ----------*/

@media  (max-width: 768px)  {
    
    h2 mark { 
        font-size: 2.3rem; 
        line-height: 3.5rem;
    }   
    
    h2 { font-size: 40px;}
    
    .w-50 { width: 75% !important;
}
   
}	

/* ---------- bis 440  ----------*/

@media  (max-width: 440px) {   
    
    .floating-btn-wrap { display: none;}
    
    .min-vh-100 { min-height: 60vh !important;}
   
   
}