/* titillium-web-italic - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/titillium-web-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v15-latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v15-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-600 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/titillium-web-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v15-latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v15-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

:root {
    /* -- Farbvariablen Cookieman -- */
    
    --cookiemanneutral: #f7f7f7;
    --cookiemanmain: #a72c31;
    --cookiemanbgdark: #252525;
    --cookiemanhellgrau: #c5c5c5;
    --mapsoverlay: #f7f7f7;

    --pinfarbe: #a72c31;
    --pinkreis: #6e1114;
    --pinpuls: #f7f7f7;
    --pinschatten: #6c757d;

    --hoben: 60px;
    --navischriftfarbe: #000;
    --outline: #a72c31;
    --weiss: #ffffff;
    --schrift: #252525;
    --hellgrau: #f7f7f7;
    --grau: #6c757d;
    --navbg: #bbbebf;
    --rot: #a72c31;

    --standardtransition:  all 0.3s ease;
   
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    clear: both;
    font-family: 'Titillium Web', arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

html a{
    color: var(--rot);
}

:focus-visible {
    outline: var(--outline) auto 2px;
}

.ce-column {
    margin-bottom: 10px;
}

#oben {
    background: rgba(255,255,255,0.9);
    position: fixed;
    z-index: 10;
    top: 0;
    box-shadow: 0 0 10px #666;
    width: 100%;
}

.logo{
    float: left;
    margin-top: 20px;
}

.navi{
    float: right;
    margin-top: 15px;
}

#oben > .rahmen,
#inhaltsbereich > .frame-style-1column > .rahmen .col-100 > .frame > .rahmen,
#inhaltsbereich > .frame:not(.frame-style-1column) > .rahmen,
#footer > .rahmen > .frame > .rahmen{
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

#inhaltsbereich > .frame:first-child:not(.frame-layout-20){
    margin-top: 150px;
}

.ce-gallery img{
    max-width: 100%;
    height: auto;
}

/* -- Navi -- */
#mobnav, 
ul.ebene1 input[name="togglesub"] {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden; 
}

label[for="mobnav"] {
    float: right;
    display: block;
}

label[for="mobnav"] .mob_button {
    float: left;
    position: relative;
    z-index: 5;
    margin: 4px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: none;
    border-radius: 50%;
    background: var(--rot);
}

label[for="mobnav"] .mob_button span {
    background-color: var(--weiss);
    height: 3px;
    left: calc(50% - 12px);
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 25px;
    transition: all 0.3s ease 0.3s;
}

label[for="mobnav"] .mob_button span::after, 
label[for="mobnav"] .mob_button span::before {
    backface-visibility: hidden;
    background-color: var(--weiss);
    content: "";
    height: 3px;
    position: absolute;
    transform: translateZ(0px);
    transition: all 0.3s ease 0.3s;
    width: 100%;
    display: block;
}

label[for="mobnav"] .mob_button span::before {
    transform: translateY(-8px);
}

label[for="mobnav"] .mob_button span::after {
    transform: translateY(8px);
}

#mobnav:checked + label .mob_button span {
    background-color: transparent;
}

#mobnav:checked + label .mob_button span::before {
    transform: translateY(0px) rotate(-45deg);
}

#mobnav:checked + label .mob_button span::after {
    transform: translateY(0px) rotate(45deg);;
}

ul.ebene1 {
    list-style: none;
    margin: 0;
    padding: 0;
    --linkfarbe: var(--navischriftfarbe);
}

ul.ebene1 > li {
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 5px;
    padding: 0;
    position: relative;
}

ul.ebene1 > li > a{
    display: block;
    background: none;
    margin: 0;
    padding: 30px 25px;
    color: #000000;
    text-decoration: none;
    transition: var(--standardtransition);
    font-size: 20px;
    text-transform: uppercase;
}

@media (hover: hover){
    ul.ebene1 > li > a:hover{
        background: #a72c31;
        color: #FFFFFF;
    }
}

ul.ebene1 > li.act > a {
    background: #a72c31;
    color: #FFFFFF;
}

ul.ebene1 > li:last-child {
    margin: 0 0 0 5px;
}

ul.ebene1 .navtoggle::before,
ul.ebene1 .navtoggle::after {
    content: '';
    display: block;
    width: 10px;
    height: 1px;
    background: var(--navischriftfarbe);
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 2px;
}

ul.ebene1 .navtoggle:hover::before,
ul.ebene1 .navtoggle:hover::after {
    height: 2px;
}

ul.ebene1 .navtoggle::after {    
    transform: rotate(-45deg);
    left: 9px;
}

ul.ebene1 li.ifsub:hover > .klappnavi,
ul.ebene1 li.ifsub:has(input[name="togglesub"]:checked) > .klappnavi {
    display: flex;
}

/* ul.ebene1 li > a:hover,
ul.ebene1 li.ifsub:hover > a,
ul.ebene1 li.act > a {
    text-decoration: underline;
} */

#inhaltsbereich > .frame-style-1column > .rahmen .col-100 > .frame-zwheader > .rahmen{
    max-width: 100%;
    width: 100%;
}

/* -- Header -- */

h1 {
    font-family: 'Titillium Web',arial,sans-serif;
    font-size: 28px;
    color: var(--rot);
}

h2 {
    font-family: 'Titillium Web',arial,sans-serif;
    font-size: 20px;
    color: var(--rot);
}

h3 {
    font-family: 'Titillium Web',arial,sans-serif;
    font-size: 28px;
}

h4 {
    font-family: 'Titillium Web',arial,sans-serif;
    font-size: 20px;
    font-weight: 300;
}

#inhaltsbereich > .tx_cn-multicontent .tx_cn-columns .row .col-100 > div {
    padding: 50px 0;
}

#inhaltsbereich i {
    font-style: normal;
    color: var(--rot);
    font-weight: 700;
}

#inhaltsbereich ul {
    margin: 0;
    padding: 0 0 0 15px;
}

#inhaltsbereich ul li {
    list-style: none;
    background: url('/fileadmin/cn_website/images/aufzaehlung.png') left 5px no-repeat;
    display: block;
    padding: 0 0 0 20px;
}

.frame-hintergrund{
    opacity: 0;
    background-size: cover;
    color: var(--weiss);
}

.ce-gallery .image {
    position: relative;
}


.ce-gallery .image figcaption {
    display: table-caption;
    caption-side: bottom;
    background: rgba(255,255,255,0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #a72c31;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
}

.frame-bildslider {
    background: url('/fileadmin/cn_website/images/Slider-Hintergund.jpg') left top no-repeat;
    width: 100%;
    height: auto;
    opacity: 0;
}

.frame-bildslider .ce-gallery {
    width: 92% !important;
    padding: 0 4%;
}

#inhaltsbereich .owl-nav .owl-next, #inhaltsbereich .owl-nav .owl-prev {
    position: absolute;
    background: url('/fileadmin/cn_website/images/owl-left.png') left top/contain no-repeat;
    left: 0;
    right: auto;
    bottom: 50%;
    margin-bottom: -25px;
    width: 25px;
    height: 50px;
    display: block;
    text-indent: 999px;
    overflow: hidden;
}

#inhaltsbereich .owl-nav .owl-next {
    background: url('/fileadmin/cn_website/images/owl-right.png') left top/contain no-repeat;
    left: auto;
    right: 0;
}

.frame-bildslider h3{
    color: var(--weiss);
}

.owl-carousel .owl-dots {
    text-align: center;
    width: 100%;
    float: left;
    clear: both;
    margin: 15px 0;
}

 .owl-carousel button.owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: var(--weiss);
    display: inline-block;
    vertical-align: top;
    margin: 0 2px;
}

.owl-carousel .owl-dot.active {
    background: var(--rot);
}

.frame-layout-1 {
    background: url('/fileadmin/cn_website/images/Kontakt-Hintergund.jpg') left top no-repeat;
    width: 100%;
    height: auto;
    color: #fff;
}

#inhaltsbereich .frame-layout-1 a{
    color: var(--weiss);
}

#footer{
    color: var(--weiss);
    padding: 30px 0;
    float: left;
    clear: both;
    width: 100%;
    background: #333333;
    background: -moz-linear-gradient(top,#333333 0%,#191919 100%);
    background: -webkit-linear-gradient(top,#333333 0%,#191919 100%);
    background: linear-gradient(to bottom,#333333 0%,#191919 100%);
}

#footer .frame-type-menu_sitemap_pages ul {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    text-align: right;
    list-style: none;
}

#footer p{
    margin: 0;
}

#footer a{
    color: var(--weiss);
}