@font-face {
	font-family: 'URWDIN';
	src: url( ../fonts/Regular/URWDIN-Regular.eot);
	src: url('../fonts/Regular/URWDIN-Regular.woff') format('woff'), /* Moderne Browser */
		 url('../fonts/Regular/URWDIN-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/Regular/URWDIN-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/Regular/URWDIN-Regular.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}

@font-face {
	font-family: 'URWDINBold';
	src: url( ../fonts/Bold/URWDIN-Bold.eot);
   	src: url('../fonts/Bold/URWDIN-Bold.woff') format('woff'), /* Moderne Browser */
		 url('../fonts/Bold/URWDIN-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/Bold/URWDIN-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
	     url('../fonts/Bold/URWDIN-Bold.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}

@font-face {
	font-family: 'BetterFly';
	src: url( ../fonts/betterfly/betterfly-draft-webfont.eot);
   	src: url('../fonts/betterfly/betterfly-draft-webfont.woff') format('woff'), /* Moderne Browser */
		 url('../fonts/betterfly/betterfly-draft-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/betterfly/betterfly-draft-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
	     url('../fonts/betterfly/betterfly-draft-webfont.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/source-serif-4-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/source-serif-4-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

:root {
    /* -- Farbvariablen Cookieman -- */
    /* --cookiemanneutral: #fff;
    --cookiemanmain: #637F25;
    --cookiemanbgdark:;
    --cookiemanhellgrau:;
    --mapsoverlay:; */

    --outline: #990000;

    --hellgruen: #a8df31;
    --gruen: #637F25;
    --golfgruen:#004D00;
    --dunkelgruen:#001b00;
    --hellbraun: #CEB798;
    --lightbraun: #eecda3;
    --apartmentbraun: #8b5e45;
    --hotelrot:#990000;
    --ferienhausbraun: #734D39;
    --refugiumblau: #007d84;
    /* --freizeitgelb: #fbba20; -- zu geringer Kontrast */
    --freizeitgelb: #b48510;
    --schriftfarbe: #202020;
    --hellgrau: #e4e4e4;
    --weiss: #fff;
    --schwarz: #000;

    --schwarztrans06: rgba(0, 0, 0, 0.6);
    --schwarztrans04: rgba(0, 0, 0, 0.4);
    --schwarztrans02: rgba(0, 0, 0, 0.2);
    --weisstrans02: rgba(255, 255, 255, 0.2);
    --weisstrans04: rgba(255, 255, 255, 0.4);

    --hoben: 76px;
    --navbg: #fff;
    --navischriftfarbe: #fff;
    --navischatten: rgba(0, 0, 0, 0.3);

    --standardtransition: all 0.3s ease;

    --cn_multigap: 30px;
}

:focus-visible,
a:focus-visible {
    outline: var(--outline) auto 2px;
	outline-offset: 1px;
}

a:focus-visible img {
    border: 3px solid var(--outline);
    /* border-style: outset; */
}

.btn,
.btn-secondary,
.mediaconsent .btn {
    color: var(--weiss);
    background-color: var(--gruen);
    border-color: var(--gruen);
}

.btn:hover,
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--dunkelgruen);
    border-color: var(--dunkelgruen);
}

.modal-content a {
    color: var(--gruen);
}

.modal-content a:hover {
    color: var(--dunkelgruen);
}

.mediaconsent {
    min-height: 600px;
}

.mapsoverlay {
    min-height: 600px;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    clear: both;
    font-family: 'URWDIN', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5em;
    color: var(--schriftfarbe);
}

p {
    margin: 0 0 10px 0;
}

.p_zimmer {
    font-size: 24px;
    margin-bottom: 30px;
}

#inhaltsbereich a {
    background: linear-gradient(90deg, var(--gruen) 20%, var(--dunkelgruen) 30%, rgba(161, 213, 166, 0) 30%),
                linear-gradient(90deg, var(--hellgruen) 20%, var(--gruen) 30%, var(--golfgruen) 60%, var(--dunkelgruen) 100%);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
    text-decoration: none;
    color:var(--gruen);
    display: inline-block;
    min-height: 24px;
}

#inhaltsbereich a:hover {
    background-size: 0 2px, 100% 2px;
    color: var(--schriftfarbe);
}

#inhaltsbereich a.more,
#inhaltsbereich a.more-braun,
#inhaltsbereich a.more-rot,
#inhaltsbereich a.more-apartmentbraun {
    font-family: 'URWDIN', Arial, sans-serif;
    font-size: 18px;
    color: var(--weiss);
    background: var(--schriftfarbe);
    /* padding: 15px 25px 15px 15px; */
    padding: 12px 25px 12px 15px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: var(--standardtransition);
    position: relative;
}

#inhaltsbereich a.more-braun {
    background: var(--hellbraun);
    color: var(--schriftfarbe);
}

#inhaltsbereich a.more-rot {
    background: var(--hotelrot);
    color: var(--weiss);
    border: 2px solid var(--hotelrot);
}

#inhaltsbereich a.more:hover {
    background: var(--gruen);
}

#inhaltsbereich a.more-rot:hover {
    background: var(--weiss);
    border: 2px solid var(--hotelrot);
    color: var(--hotelrot);
}

#inhaltsbereich a.more-braun:hover {
    background: var(--hotelrot);
    color: var(--weiss);
}

#inhaltsbereich a.more-apartmentbraun {
    background: var(--apartmentbraun);
    color: var(--weiss);
    border: 2px solid var(--apartmentbraun);
}


#inhaltsbereich a.more-apartmentbraun:hover {
    background: var(--weiss);
    color: var(--apartmentbraun);
    border: 2px solid var(--apartmentbraun);
}

#inhaltsbereich a.more::after,
#inhaltsbereich a.more-braun::after,
#inhaltsbereich a.more-rot::after,
#inhaltsbereich a.more-apartmentbraun::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: url(../images/aufzaehlungszeichen_weiss.svg) no-repeat;
    position: absolute;
    /* top: calc(50% + 2px); */
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    transition: var(--standardtransition);
}

#inhaltsbereich a.more-braun::after {
    background: url(../images/aufzaehlungszeichen_grau.svg) no-repeat;
}

#inhaltsbereich a.more-braun:hover::after {
    background: url(../images/aufzaehlungszeichen_weiss.svg) no-repeat;
}

#inhaltsbereich a.more-rot:hover::after,
#inhaltsbereich a.more-apartmentbraun:hover::after {
    background: url(../images/aufzaehlungszeichen_grau.svg) no-repeat;
}

#inhaltsbereich a.ankerlink {
    color: var(--hotelrot);
    background: linear-gradient(90deg, var(--hotelrot) 20%, var(--hotelrot) 30%, rgba(161, 213, 166, 0) 30%), linear-gradient(90deg, var(--hotelrot) 20%, var(--hotelrot) 100%);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
    position: relative;
}

#inhaltsbereich a.ankerlink:hover {
    background-size: 0 2px, 100% 2px;
}

#inhaltsbereich a.ankerlink::after {
    content: '';
    background: url(../images/aufzaehlungszeichen_grau.svg) no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 6px;
    right: -25px;
    transform: rotate(90deg);
}

#inhaltsbereich .news a.ankerlink {
    font-family: 'URWDIN', Arial, sans-serif;
    font-size: 18px;
    color: var(--weiss);
    background: var(--schriftfarbe);
    padding: 12px 35px 12px 15px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: var(--standardtransition);
    position: relative;
}

#inhaltsbereich .news a.ankerlink:hover {
    background: var(--gruen);
}

#inhaltsbereich .news a.ankerlink::after {
    display: none;
}

#inhaltsbereich .news a.ankerlink::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: url(../images/aufzaehlungszeichen_weiss.svg) no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    right: 8px;
    transition: var(--standardtransition);
}

#inhaltsbereich a.link-phone,
#inhaltsbereich a.link-mail {
    background: none;
    font-size: 40px;
    font-weight: bold;
    position: relative;
    transition: var(--standardtransition);
    padding: 25px 0 25px 65px;
}

#inhaltsbereich a.link-phone:hover,
#inhaltsbereich a.link-mail:hover {
    color: var(--golfgruen);
}

#inhaltsbereich a.link-phone::before,
#inhaltsbereich a.link-mail::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: url(../images/phone-gruen.svg) no-repeat;
}

#inhaltsbereich a.link-mail::before {
    background: url(../images/link-mail.svg) no-repeat;
}

#inhaltsbereich a.link-phone:hover::before,
#inhaltsbereich a.link-mail:hover::before {
    filter: brightness(0) saturate(100%) invert(15%) sepia(65%) saturate(3381%) hue-rotate(100deg) brightness(92%) contrast(106%);
}

#inhaltsbereich .image > a,
#inhaltsbereich .ce-gridgallery > a {
    background: none;
    background-size: unset;
    background-position: unset;
    background-repeat: unset;
    transition: unset;
    color: unset;
    width: 100%;
}

#inhaltsbereich .image a.data-fancybox picture img,
#inhaltsbereich .ce-gridgallery a img {
    transform: scale(1);
    transition: var(--standardtransition);
}

#inhaltsbereich .image a.data-fancybox:hover picture img,
#inhaltsbereich .ce-gridgallery a:hover img {
    transform: scale(1.1);
}

#inhaltsbereich .ce-column {
    margin: 20px 0 0 0;
}

#inhaltsbereich .ce-column:first-child {
    margin: 0;
}

.ce-bodytext {
    position: relative;
    z-index: 2;
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    position: relative;
    padding: 0 0 0 20px;
    margin: 0 0 5px 0;
}

ul li:last-child {
    margin: 0;
}

ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    background: url(../images/aufzaehlungszeichen.svg) no-repeat;
    width: 15px;
    height: 15px;
}

/* ++ Inhaltsbereich ++ */
#inhaltsbereich {
    float: left;
    clear: both;
    width: 100%;
    padding-bottom: 130px;
    position: relative;
}

/* #inhaltsbereich::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, rgba(206, 183, 152, 1) 0%, rgba(238, 235, 233, 1) 25%, rgba(255, 255, 255, 1) 75%);
    z-index: -2;
} */

#inhaltsbereich > .frame {
    float: left;
    clear: both;
    width: 100%;
    margin-top: 80px;
}

.frame {
    width: 100%;
    float: left;
    clear: both;
}

#inhaltsbereich > .frame > .rahmen {
    width: 90%;
    margin: 0 auto;
}

#inhaltsbereich.sub::after {
    display: none;
}

/*  ++ Überschriften ++ */
h1, h2, h3 {
    font-family: 'Source Serif 4', Times, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 1000px;
}

h1 {
    margin-bottom: 60px;
}

h1.zweizeilig,
h2.zweizeilig {
    margin: 0 auto 10px auto;
}

h2 {
    font-size: 36px;
    margin: 0 auto 60px auto;
}

h2.schreibschrift {
    font-family: 'BetterFly', Arial, sans-serif;
    font-size: 44px;
    line-height: 1.3em;
    text-transform: unset;
    color: var(--hotelrot);
    padding: 10px 0;
    margin: 0 0 15px 0;
}

h2.folgt,
h3.folgt {
    font-family: 'URWDIN', Arial, sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: var(--gruen);
    text-transform: none;
    margin: 0 auto 60px auto;
}

h3, h3.folgt {
    font-size: 28px;
}

h3 {
    margin-bottom: 40px;
}


.ce-headline-left,
.ce-headline-right,
.ce-headline-left.zweizeilig,
.ce-headline-right.zweizeilig,
.ce-headline-left.folgt,
.ce-headline-right.folgt {
    margin-left: 0;
    margin-right: 0;
}

/*  ++ oben ++ */
#oben {
    float: left;
    clear: both;
    width: 100%;
    position: fixed;
    z-index: 5;
    transition: all 0.6s ease;
}

#oben > .rahmen {
    width: 90%;
    margin: 0 auto;
}

#oben .navi {
    float: right;
}

#oben.scrolled,
#oben.unterseite,
#oben.keyfacts {
    background: var(--weiss);
    box-shadow: 0 0 20px var(--schwarztrans02);
}

#oben.scrolled .navizeile_icons .ce-column,
#oben.scrolled label[for="mobnav"] .mob_button {
    background: none;
}

#oben.scrolled .logo .ce-gallery .ce-row:first-child {
    display: none;
}

#oben.scrolled .logo .ce-gallery .ce-row:last-child {
    display: block;
    width: 200px;
    margin: 10px 0;
}

#oben.scrolled .rahmen_rechts {
    margin-top: 10px;
}

#oben.keyfacts > div > .logo{
    margin-top: 20px;
}

#oben.keyfacts .logo .ce-bodytext {
    position: absolute;
    right: 5%;
    width: auto;
}

#oben.keyfacts .logo .ce-bodytext a {
    background: var(--gruen);
    padding: 7px 10px;
    color: var(--weiss);
    font-size: 20px;
    text-decoration: none;
    transition: var(--standardtransition);
    display: block;
}

#oben.keyfacts .logo .ce-bodytext p {
    margin: 0;
}

#oben.keyfacts.scrolled .logo .ce-bodytext a {
    background: var(--weiss);
    color: var(--gruen);
}

#oben.keyfacts .logo .ce-bodytext a:hover,
#oben.keyfacts.scrolled .logo .ce-bodytext a:hover {
    background: var(--schriftfarbe);
    color: var(--weiss);
}

#oben.keyfacts > div > .sprachen {
    margin: 20px 155px 0 0;
}

#oben .rahmen_rechts {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

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

ul.ebene1,
#oben:has(ul.ebene1 input[name="togglesub"]:checked) label[for="closenav"] {
    display: none;
}

label[for="mobnav"] .mob_button {
    float: right;
    position: relative;
    z-index: 10;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: block;
    margin: 0;
    background: var(--weiss);
    padding: 10px;
    border-radius: 100%;
}

#mobnav:checked + label .mob_button {
    background: none;
}

label[for="mobnav"] .mob_button span {
    background-color: var(--schwarz);
    height: 4px;
    right: 10px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 30px;
    transition: all 0.3s ease;
    border-radius: 5px;
}

#oben.scrolled label[for="mobnav"] .mob_button span,
#oben.scrolled label[for="mobnav"] .mob_button span::after,
#oben.scrolled label[for="mobnav"] .mob_button span::before  {
    box-shadow: unset;
}

label[for="mobnav"] .mob_button span::after,
label[for="mobnav"] .mob_button span::before {
    backface-visibility: hidden;
    background-color: var(--schwarz);
    content: "";
    height: 4px;
    position: absolute;
    right: 0;
    transform: translateZ(0px);
    transition: all 0.3s ease;
    width: 40px;
    display: block;
    border-radius: 5px;
}

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

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

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

#mobnav:checked + label .mob_button span::before {
    transform: translateY(0px) rotate(-45deg);
    background-color: var(--weiss);
    box-shadow: unset;
}

#mobnav:checked + label .mob_button span::after {
    transform: translateY(0px) rotate(45deg);
    background-color: var(--weiss);
    box-shadow: unset;
}

#oben:has(ul.ebene1 input[name="togglesub"]:checked) label[for="closenav"] {
    display: block;
}

.ebene1 li.ifsub.clicked ul.ebene2 {
    display: block;
} 

#mobnav:checked ~ ul.ebene1 {
    display: block;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    padding: 80px 5% 30px 5%;
    background-image: url(/fileadmin/cn_website/images/navi_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh - 110px);
    /* min-height: 100vh; */
    overflow: auto;
    overflow-y: auto;
    z-index: 5;
    margin: 0;
}

ul.ebene1 ul {
    list-style: none;
}

ul.ebene1 > li {
    display: block;
    float: left;
    clear: both;
    margin: 0 0 30px 0;
    padding: 0 30px 0 0;
    width: calc(50% - 30px);
    position: relative;
}

ul.ebene1 > li:hover {
    /* background: var(--weisstrans02); */
    transition: var(--standardtransition);
}

ul.ebene1::after {
    content: '';
    display: block;
    width: 3px;
    height: 750px;
    background: var(--navischriftfarbe);
    position: absolute;
    top: 80px;
    left: 50%;
}

ul.ebene1 > li > a {
    font-family: 'URWDINBold';
    display: block;
    padding: 10px 60px 10px 100px;
    text-decoration: none;
    color: var(--weiss);
    font-size: 36px;
    line-height: 1.2em;
    transition: var(--standardtransition);
    text-shadow: 0px 0px 12px var(--schwarz);
    vertical-align: -webkit-baseline-middle;
    vertical-align: middle;
}

ul.ebene1 > .ifsub {
    padding: 0;
    margin: 0 30px 30px 0;
}

ul.ebene1 > .ifsub > label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

ul.ebene1 > .ifsub > label > .navtoggle {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 0;
    transform: translateY(-50%);
    /* transform: rotate(-90deg); */
    transform: translateY(-50%) rotate(-90deg);
    transition: var(--standardtransition);
}

ul.ebene1 > .ifsub.clicked > label > .navtoggle {
    transform: translateY(-50%) rotate(90deg);
}

/* ul.ebene1 > .ifsub:hover,
ul.ebene1 > .ifsub.clicked {
    background: var(--schwarztrans04);
} */

ul.ebene1 > .ifsub > a:hover {
    background: none;
}

ul.ebene1 .ifsub.clicked > a {
    background: none;
}

ul.ebene1 li.act.ifsub > a {
    background: none;
}

ul.ebene1 li.act.ifsub + li.ifsub.clicked {
    background: none;
}

ul.ebene1 li.act.ifsub.clicked {
    background: var(--schwarztrans04);
}

/* ul.ebene1 li.ifsub.clicked {
    background: var(--schwarztrans04);
} */

ul.ebene1 li.ifsub {
    background: none;
}

ul.ebene1 li.act.ifsub.clicked > a {
    background: none;
}

ul.ebene1 .navtoggle::before,
ul.ebene1 .navtoggle::after {
    content: '';
    display: block;
    width: 15px;
    height: 3px;
    background: var(--navischriftfarbe);
    transform: rotate(45deg);
    position: absolute;
    top: 25px;
    left: 10px;
    box-shadow: 0 0 10px var(--schwarz);
}

ul.ebene1 .navtoggle:hover::before,
ul.ebene1 .navtoggle:hover::after {
    background: var(--weiss);
}

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

ul.ebene1 li.ifsub:has(input[name="togglesub"]:checked) > ul.ebene2
.tab ul.ebene1 li.ifsub input[name="togglesub"]:checked ~ ul {
    display: block;
}

ul.ebene1 li > a:hover,
ul.ebene1 li.act > a {
    background: var(--schwarztrans04);
}

ul.ebene2 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: calc(100% - 60px);
    padding: 0 0 60px 30px;
    margin-left: 30px;
}
    
ul.ebene2 > li {
    float: left;
    padding: 0;
    display: block;
    margin: 0 0 15px 0;
    width: 100%;
}

ul.ebene2 li:last-child {
    margin: 0;
}

ul.ebene2 > li > a {
    font-family: 'URWDINBold';
    float: left;
    display: block;
    padding: 15px 30px;
    font-size: 36px;
    text-shadow: 0 0 10px var(--schwarz);
    line-height: 1.1em;
    text-decoration: none;
    color: var(--weiss);
    transition: var(--standardtransition);
}

ul.ebene2 > li > a:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.navi ul li::before {
    display: none;
}

/* ++++++++++++++++ */

/* ++ Logo ++ */
/* #oben .logo {
    float: left;
    clear: none;
    margin: 0 0 20px 0;
    width: 100%;
    transition: all 0.4s ease;
}

#oben .logo .ce-gallery {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
} */

#oben .logo {
    float: left;
    clear: none;
    margin: 0;
    width: auto;
    /* transition: all 0.4s ease; */
    transition: var(--standardtransition);
}

#oben .logo .ce-gallery .ce-row:first-child {
    position: absolute;
    left: -47px;
    margin-bottom: 0;
    width: 600px;
}

#oben .logo .ce-gallery .ce-row:last-child {
    display: none;
}

#oben.unterseite .logo .ce-gallery .ce-row,
#oben.keyfacts .logo .ce-gallery .ce-row {
    display: block;
    position: static;
    width: 200px;
}



/*  ++ Header ++ */
#header {
    width: 100%;
    max-width: 100%;
    float: left;
    clear: both;
    overflow: hidden;
    position: relative;
    max-height: 800px;
}

#header .ce-gallery {
    width: 100%;
    height: auto;
    margin: 0;
    max-width: 100%;
}

#header .ce-gallery .ce-column {
    width: 100%;
    height: auto;
}

#header .ce-gallery .ce-column figure {
    width: 100%;
    height: auto;
}

#header .ce-gallery .ce-column figure img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

#header .ce-bodytext {
    float: left;
    clear: both;
    width: 100%;
    position: absolute;
    bottom: 0;
    color: var(--weiss);
}

#header .ce-bodytext p {
    margin: 0;
}

#header .ce-bodytext .p_serif {
    position: absolute;
    bottom: -10px;
    color: var(--weisstrans04);
    left: 5%;
}

#header .ce-bodytext .p_serif .span_serif {
    font-family: 'Source Serif 4';
    font-size: 400px;
    font-weight: 600;
    line-height: 0;
}

#header .ce-bodytext .p_schreibschrift {
    position: absolute;
    bottom: 80px;
    padding: 0 0px 0 calc(200px + 5%);
    margin: 0;
}

#header.sub .ce-bodytext .p_schreibschrift {
    bottom: 120px;
}

#header .ce-bodytext .p_schreibschrift span {
    font-family: 'Betterfly';
    font-size: 100px;
    line-height: 0;
}

#header.sub .ce-bodytext .p_schreibschrift span {
    text-shadow: 0px 0px 6px var(--schwarz);
}

/* ++ Slidein ++ */
#slidein {
    position: fixed;
    right: 0;
    top: 15%;
    z-index: 3;
    rotate: -90deg;
    transform-origin: right bottom;
    background: var(--hotelrot);
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: scaleX(0);
    overflow: hidden;
}


#slidein[data-toggled="on"] {
    opacity: 1;
    transform: scaleX(1);
}

#slidein p {
    margin: 0;
}

#slidein p a {
    font-family: 'URWDINBold';
    padding: 15px 20px;
    margin: 0;
    color: var(--weiss);
    font-size: 25px;
    text-transform: uppercase;
    display: block;
}

#slidein p a:hover {
    text-decoration-color: var(--weiss);
    text-decoration-thickness: 4px;
}

/* ++ Sprachen ++ */

/* .sprachen {
    float: left;
    clear: both;
    margin: 0 5px 0 0;
    display: block;
    height: 40px;
    padding: 0;
    position: relative;
    width: 230px;
    z-index: 2;
    font-size: 12px;
    line-height: 1em;
    color: #999;
    z-index: 3;
    margin: 20px 40px 0 0;
} */

.sprachen{
    float: right;
    clear: none;
    display: block;
    height: 40px;
    padding: 0;
    position: relative;
    width: 135px;
    font-size: 12px;
    line-height: 1em;
    color: var(--schwarz);
    z-index: 3;
    margin: 0 30px 0 0;
    transition: var(--standardtransition);
    border-radius: 40px;
    background: var(--weiss);
}

.sprachen:hover,
.sprachen[data-toggled="on"]{
    background: var(--weiss);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 5px var(--schwarztrans04);
    width: 230px;
    border-radius: 20px 20px 0 0;
}

.sprachen:hover label .navtoggle,
.sprachen[data-toggled="on"] label .navtoggle {
    right: 48%;
}

.sprachen:hover .language-menu {
    display: block;
}

.sprachen ul{
    display: none;
    margin: 0px;
    padding: 5px;
    list-style: none;
    background: var(--weiss);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 5px 5px var(--schwarztrans04);
    width: 220px;
}

.sprachen ul li {
    background: none;
    border-bottom: 0px;
    z-index: 0;
    border-radius: 20px;
    position: relative;
    padding: 0 15px 0 15px;
}

.sprachen ul li a {
    width: 100%;
}

.sprachen ul li:first-child > a {
    padding: 7px 0 13px 0;
}

.sprachen ul li:hover {
    background: var(--hellgrau);
}

.sprachen ul li:first-child:hover a::before,
.sprachen ul li:first-child:hover a::after {
    background: var(--schwarz);
}

.sprachen ul li:before {
	display: none;
}

.sprachen a {
    font-family: 'URWDIN', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--schwarz);
    text-decoration: none;
    display: inline-block;
    padding: 12px 0;
    line-height: auto;
}

.sprachen label{
    font-size: 18px;
    color: var(--schwarz);
    padding: 12px 15px;
    display: block;
    width: calc(100% - 30px);
    line-height: auto;
}

.sprachen ul li:first-child:hover {
    color: var(--schriftfarbe);
}

/* .sprachen ul li:first-child a::before,
.sprachen ul li:first-child a::after {
    content: '';
    display: block;
    width: 10px;
    height: 2px;
    background: var(--weiss);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: -15px;
}

.sprachen ul li:first-child a::after {
    transform: rotate(-45deg);
    right: -21px;
} */

.sprachen img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px 0 0;
}

.sprachen input[name="togglesub"] {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
}

/* .sprachen label {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    right: 15px;
} */

.sprachen label .navtoggle {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 35px;
    height: 35px;
    cursor: pointer;
    margin: 0;
    transition: var(--standardtransition);
    float: right;
    top: -12px;
}

.sprachen label .navtoggle::before,
.sprachen label .navtoggle::after {
    content: '';
    display: block;
    width: 10px;
    height: 2px;
    background: var(--schwarz);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    left: unset;
}

.sprachen label .navtoggle::after {
    transform: rotate(-45deg);
    right: 9px;
}

.sprachen ul li:hover label .navtoggle::before,
.sprachen ul li:hover label .navtoggle::after {
    background: var(--schwarz);
}

/* ++ Navizeile Icons ++ */
/* .navizeile_icons {
    float: left;
    clear: none;
    margin-top: 25px;
} */

.navizeile_icons {
    float: right;
    clear: none;
    margin-top: 0;
}

.navizeile_icons .ce-gallery {
    margin: 0;
}

.navizeile_icons .ce-column {
    margin-right: 10px;
    background: var(--weiss);
    padding: 5px;
    border-radius: 100%;
}

.navizeile_icons .ce-column:last-child {
    margin-right: 30px;
}

/*  ++ Gridgallery ++ */
/* #inhaltsbereich .ce-gridgallery a {

} */

/*  ++ News und Zimmer Slider (gleiche Optik) ++ */
.news .news-angeboteslider-container .owl-stage-outer .owl-stage .owl-item,
.frame-zimmer-slider .owl-stage-outer .owl-stage .owl-item  {
    margin-top: 40px;
}


.news .news-angeboteslider-container .owl-stage-outer .owl-stage .owl-item.active.center,
.frame-zimmer-slider .owl-stage-outer .owl-stage .owl-item.active.center {
    margin-top: 0;
}

.news .news-angeboteslider-container .owl-nav button.owl-prev,
.news .news-angeboteslider-container .owl-nav button.owl-next,
.frame-zimmer-slider .owl-nav button.owl-prev,
.frame-zimmer-slider .owl-nav button.owl-next {
    position: absolute;
    left: 25%;
    top: -10px;
    width: 60px;
    height: 40px;
}

.news .news-angeboteslider-container .owl-nav button.owl-prev::before,
.news .news-angeboteslider-container .owl-nav button.owl-next::before,
.frame-zimmer-slider .owl-nav button.owl-prev::before,
.frame-zimmer-slider .owl-nav button.owl-next::before  {
    content: '';
    position: absolute;
    width: 55px;
    height: 4px;
    background: var(--schriftfarbe);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: var(--standardtransition);
}

.news .news-angeboteslider-container .owl-nav button.owl-prev:hover::before,
.news .news-angeboteslider-container .owl-nav button.owl-next:hover::before,
.frame-zimmer-slider .owl-nav button.owl-prev:hover::before,
.frame-zimmer-slider .owl-nav button.owl-next:hover::before {
    background: var(--gruen);
}

.news .news-angeboteslider-container .owl-nav button.owl-prev::after,
.news .news-angeboteslider-container .owl-nav button.owl-next::after,
.frame-zimmer-slider .owl-nav button.owl-prev::after,
.frame-zimmer-slider .owl-nav button.owl-next::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-left: 4px solid var(--schriftfarbe);
    border-bottom: 4px solid var(--schriftfarbe);
    transform: rotate(45deg) translateY(-50%);
    transform-origin: center;
    left: 0;
    top: calc(50% - 2px);
    transition: var(--standardtransition);
}

.news .news-angeboteslider-container .owl-nav button.owl-prev:hover::after,
.news .news-angeboteslider-container .owl-nav button.owl-next:hover::after,
.frame-zimmer-slider .owl-nav button.owl-prev:hover::after,
.frame-zimmer-slider .owl-nav button.owl-next:hover::after {
    border-left: 4px solid var(--gruen);
    border-bottom: 4px solid var(--gruen);
}

.news .news-angeboteslider-container .owl-nav button.owl-next,
.frame-zimmer-slider .owl-nav button.owl-next {
    left: unset;
    right: 25%;
}

.news .news-angeboteslider-container .owl-nav button.owl-next:before,
.frame-zimmer-slider .owl-nav button.owl-next:before {
    left: 0;
}

.news .news-angeboteslider-container .owl-nav button.owl-next::after,
.frame-zimmer-slider .owl-nav button.owl-next::after {
    border-left: unset;
    border-right: 4px solid var(--schriftfarbe);
    border-bottom: 4px solid var(--schriftfarbe);
    transform: rotate(-45deg) translateY(-50%);
    right: 0;
    left: unset;
}

.news .news-angeboteslider-container .owl-nav button.owl-next:hover::after,
.frame-zimmer-slider .owl-nav button.owl-next:hover::after {
    border-left: unset;
    border-right: 4px solid var(--gruen);
    border-bottom: 4px solid var(--gruen);
}

.news .news-angeboteslider-container .owl-nav button > span,
.frame-zimmer-slider .owl-nav button > span {
    display: none;
}

.news .news-angeboteslider-container .article {
    background: var(--weiss);
    box-shadow: 0 0 15px var(--schwarztrans06);
    margin: 0 15px 30px 15px;
    position: relative;
    min-height: 900px;
}

.news .news-angeboteslider-container .article .news-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 20px;
}

.news .news-angeboteslider-container .article .news-content {
    padding: 0 20px;
}

.news .news-angeboteslider-container .article .news-content .newstextbox > h3 {
    font-family: 'URWDIN', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2em;
    color: var(--gruen);
    text-transform: unset;
    text-align: left;
    margin-bottom: 20px;
}

#inhaltsbereich .news .news-angeboteslider-container .article .news-content a.more {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.news .news-angeboteslider-container.owl-carousel .owl-nav.disabled {
    display: block !important;
}

/*  ++ News Listenansicht ++ */
.frame-type-news_pi1 .news {
    float: left;
    clear: both;
    width: 80%;
    margin: 0 10%;
}

.news .news-list-container {
    float: left;
    clear: both;
    width: 100%;
}

.news .news-list-container .article {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 60px;
    background: var(--hellbraun);
}

.news .news-list-container .article:nth-child(2),
.news .news-list-container .article:nth-child(4),
.news .news-list-container .article:nth-child(6) {
    display: flex;
}

.news .news-list-container .article .news-img-wrap {
    float: right;
    width: 60%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.news .news-list-container .article .news-img-wrap img {
    width: auto;
    height: 100%;
}

.news .news-list-container .article .news-content {
    float: left;
    width: calc(40% - 60px);
    padding: 30px;
}

.news .news-list-container .article .news-content h3 {
    hyphens: auto;
}

#inhaltsbereich .news .news-list-container .article .news-content a.more {
    margin-top: 30px;
}

#inhaltsbereich .news .news-list-container .article .news-content .news-text a {
    color: var(--schriftfarbe);
    background: linear-gradient(90deg, var(--schriftfarbe) 30%, rgba(161, 213, 166, 0) 30%), linear-gradient(90deg, var(--schriftfarbe) 30%, var(--schriftfarbe) 100%);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
    text-decoration: none;
    display: inline-block;
    min-height: 24px;
}

#inhaltsbereich .news .news-list-container .article .news-content .news-text a:hover {
    background-size: 0 2px, 100% 2px;
}


/*  ++ News Detailansicht ++ */
.frame-type-news_newsdetail .news,
.frame-type-news_newsdetail .news .article {
    float: left;
    clear: both;
    width: 100%;
}

.frame-type-news_newsdetail .news .article .news-text-wrap {
    float: left;
    clear: both;
    width: calc(60% - 60px);
    margin-right: 60px;
}

.frame-type-news_newsdetail .news .article .news-img-wrap {
    float: right;
    width: 40%;
}

.frame-type-news_newsdetail .news .article .news-backlink-wrap {
    float: left;
    clear: both;
    margin-top: 100px;
}

#inhaltsbereich .frame-type-news_newsdetail .news .article .news-backlink-wrap a {
    color: var(--gruen);
    background: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    display: inline-block;
    transition: 0.2s;
}

#inhaltsbereich .frame-type-news_newsdetail .news .article .news-backlink-wrap a:hover {
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

#inhaltsbereich .news-img-wrap a {
    background: none;
    width: 100%;
}

.frame-type-news_newsdetail .news .article .news-img-wrap picture {
    width: 100%;
    display: block;
}

.frame-type-news_newsdetail .news .article .news-img-wrap picture img {
    width: 100%;
    height: auto;
}

.zusatzcontent .frame-claimnews .ce-bodytext {
    background: var(--gruen);
    color: var(--weiss);
    padding: 20px;
}

/*  ++ Powermail ++ */
.tx-powermail {
    float: left;
    clear: both;
    width: calc(100% - 20%);
    background: var(--weiss);
    padding: 40px 10%;
    border: 2px dotted var(--gruen);
    --outline: var(--gruen);
    z-index: 2;
    position: relative;
}

.powermail_form {
    float: left;
    clear: both;
    width: 100%;
}

.powermail_fieldset {
    border: 0;
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
}

.powermail_legend.nolabel {
    display: block;
    width: 0px;
    height: 0px;
    overflow: hidden;
    text-indent: -999px;
    white-space: nowrap;
    margin: 0;
    border: 0;
}

.powermail_fieldwrap {
    width: 100%;
    margin: 0 0 15px 0;
    float: left;
    clear: both;
}

.powermail_label {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 5px;
}

.powermail_field {
    width: 100%;
    float: left;
}

.powermail_field input, .powermail_field textarea, .powermail_select {
    width: calc(100% - 10px);
    float: left;
    clear: both;
    padding: 10px 5px 10px 5px;
    background: var(--hellgrau);
    border: none;
    box-sizing: initial;
    color: var(--schriftfarbe);
    font-family: 'URWDIN', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4em;
}

.powermail_field textarea {
    resize: unset;
}

.powermail_fieldwrap_anreise {
    width: calc(50% - 15px);
    margin-right: 15px;
    clear: none;
}

.powermail_fieldwrap_abreise {
    width: calc(50% - 15px);
    margin-left: 15px;
    clear: none;
}

.powermail_fieldwrap_type_check .powermail_field .powermail_checkwrap .powermail_checkbox,
.powermail_fieldwrap_type_radio .radio .powermail_radio,
.tarifrechner_container input[type="radio"],
.tarifrechner_container input[type="checkbox"] {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 15px;
}

.powermail-errors-list {
    font-family: 'URWDINBold';
    font-size: 16px;
    line-height: 2.2em;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--schriftfarbe);
    text-align: left;
    display: inline-block;
}

.powermail-errors-list li {
    padding: 0 0 0 15px;
}

.powermail-errors-list li::before{
    bottom: 10px;
    top: unset;
}

.powermail_field_error:not(.powermail_field_error_container) {
    outline: var(--gruen) solid 4px;
    padding: 5px;
    margin-top: 15px;
}

/*  ++ Kontaktdaten ++ */
.powermail_fieldset:nth-of-type(1),
.powermail_fieldset:nth-of-type(4) {
    width: calc(50% - 30px);
    margin-right: 30px;
}

.powermail_fieldset:nth-of-type(2),
.powermail_fieldset:nth-of-type(5) {
    width: calc(50% - 30px);
    margin-left: 30px;
}

/*  ++ Betreff und Nachricht ++ */
.powermail_fieldset:nth-of-type(3),
.powermail_fieldset:nth-of-type(4),
.powermail_fieldset:nth-of-type(5) {
    margin-top: 30px;
}

/*  ++ Captcha ++ */
.powermail_fieldwrap_type_captcha .powermail_field input {
    margin-bottom: 10px;
}

/*  ++ Absenden ++ */
.powermail_fieldset:last-of-type {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.powermail_fieldwrap_type_submit {
    text-align: center;
    margin: 0;
    width: 30%;
}

.powermail_fieldwrap_type_submit .powermail_field input.powermail_submit {
    display: block;
    padding: 10px 2%;
    -webkit-appearance: none;
    border-radius: 0;
    background: var(--gruen);
    border: 2px solid var(--gruen);
    color: var(--weiss);
    cursor: pointer;
    transition: var(--standardtransition);
}

.powermail_fieldwrap_type_submit .powermail_field input.powermail_submit:hover {
    background: var(--weiss);
    color: var(--schriftfarbe);
    border: 2px solid var(--gruen);
}

.powermail_submit:focus-visible {
    outline: 2px solid var(--hotelrot);
}

/*  ++ Powermail Gutscheinanfrage ++ */
.frame-gutschein .powermail_fieldset:nth-of-type(3) {
    display: flex;
}

.frame-gutschein .powermail_fieldwrap_gewuenschterbetrag,
.frame-gutschein .powermail_fieldwrap_zahlungsart,
.frame-gutschein .powermail_fieldset:nth-of-type(5),
.frame-gutschein .powermail_fieldset:nth-of-type(6) {
    width: calc(50% - 30px);
    margin-right: 30px;
}

.frame-gutschein .powermail_fieldwrap_zahlungsar,
.frame-gutschein .powermail_fieldset:nth-of-type(6) {
    margin: 0 0 0 30px;
}

.frame-gutschein .powermail_fieldset:nth-of-type(4) {
    width: 100%;
    margin-right: 0;
}

.frame-gutschein .powermail_fieldset:nth-of-type(5) {
    margin-left: 0;
}

/*  ++ Layout 1 Textmedia ++ */
.frame-layout-1 .ce-bodytext {
    max-width: 950px;
}

/*  ++ Layout 2 Textmedia ++ */
.frame-iconsstart.frame-layout-2 .ce-gallery img {
    filter: brightness(0) saturate(100%) invert(39%) sepia(59%) saturate(373%) hue-rotate(338deg) brightness(87%) contrast(84%);
}

/*  ++ Layout 1 Multicontent ++ */
#inhaltsbereich .frame-layout-1.frame-type-cn_multicontent {
    background: var(--apartmentbraun);
    padding: 60px 0;
    color: var(--weiss);
}

/*  ++ Layout 2 Multicontent ++ */

/*  ++ Rahmen ++ */
/*  ++ Startseite Bildslider Text im Bild ++ */
#inhaltsbereich .frame-bildslidertext > .rahmen {
    width: 100%;
    margin: 0;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-gallery,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-gallery {
    width: 100%;
    margin: 60px 0 0 0;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-gallery .ce-row .ce-column,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-gallery .ce-row .ce-column,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-gallery .ce-row .ce-column .image,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-gallery .ce-row .ce-column .image {
    width: 100%;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-bodytext {
    background: var(--weiss);
    width: 350px;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 195px;
    padding: 0 20px 0 20px;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext {
    left: 0;
    right: unset;
    margin-left: 195px;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext p:first-child,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-bodytext p:first-child {
    padding-top: 85px;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext p:nth-child(3),
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-bodytext p:nth-child(3) {
    margin-bottom: 60px;
}

#inhaltsbereich .frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext p:last-child ,
#inhaltsbereich .frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-bodytext p:last-child {
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: -30px;
    margin: 0;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext .span_grossbuchstabe,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-bodytext .span_grossbuchstabe {
    font-family: 'Source Serif 4', Times, serif;
    font-size: 300px;
    font-weight: 800;
}

.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-links .ce-textpic .ce-bodytext .span_fett,
.frame-bildslidertext .owl-stage-outer .frame-bildslidertext-rechts .ce-textpic .ce-bodytext .span_fett {
    font-family: 'Source Serif 4', Times, serif;
    font-size: 55px;
    font-weight: 800;
    line-height: 1em;
    text-align: center;
}

/* ++ Nav und Dots Bildslider ++ */
.frame-bildslidertext .owl-nav button.owl-prev,
.frame-bildslidertext .owl-nav button.owl-next {
    position: absolute;
    left: 5%;
    width: 60px;
    height: 40px;
    bottom: -60px;
}

.frame-bildslidertext .owl-nav button.owl-next {
    left: unset;
    right: 5%;
}

.frame-bildslidertext .owl-nav button.owl-prev::before,
.frame-bildslidertext .owl-nav button.owl-next::before {
    content: '';
    position: absolute;
    width: 55px;
    height: 4px;
    background: var(--schriftfarbe);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: var(--standardtransition);
}

.frame-bildslidertext .owl-nav button.owl-prev:hover::before,
.frame-bildslidertext .owl-nav button.owl-next:hover::before {
    background: var(--gruen);
}

.frame-bildslidertext .owl-nav button.owl-prev::after,
.frame-bildslidertext .owl-nav button.owl-next::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-left: 4px solid var(--schriftfarbe);
    border-bottom: 4px solid var(--schriftfarbe);
    transform: rotate(45deg) translateY(-50%);
    transform-origin: center;
    left: 0;
    top: calc(50% - 2px);
    transition: var(--standardtransition);
}

.frame-bildslidertext .owl-nav button.owl-prev:hover::after,
.frame-bildslidertext .owl-nav button.owl-next:hover::after {
    border-left: 4px solid var(--gruen);
    border-bottom: 4px solid var(--gruen);
}

.frame-bildslidertext .owl-nav button.owl-next:before {
    left: 0;
}

.frame-bildslidertext .owl-nav button.owl-next::after {
    border-left: unset;
    border-right: 4px solid var(--schriftfarbe);
    border-bottom: 4px solid var(--schriftfarbe);
    transform: rotate(-45deg) translateY(-50%);
    right: 0;
    left: unset;
}

.frame-bildslidertext .owl-nav button.owl-next:hover::after {
    border-left: unset;
    border-right: 4px solid var(--gruen);
    border-bottom: 4px solid var(--gruen);
}

.frame-bildslidertext .owl-nav button.owl-prev > span,
.frame-bildslidertext .owl-nav button.owl-next > span {
    display: none;
}

.frame-bildslidertext .owl-carousel .owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -47.5px;
    margin: 0;
    height: 25px;
    width: auto;
}

.frame-bildslidertext .owl-carousel .owl-dots button {
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
    position: relative;
}

.frame-bildslidertext .owl-carousel .owl-dots button:last-child {
    margin-right: 0;
}

.frame-bildslidertext .owl-carousel .owl-dots button::before {
    content: '';
    width: 25px;
    height: 6px;
    background: var(--schriftfarbe);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.frame-bildslidertext .owl-carousel .owl-dots button.owl-dot.active::before {
    background: var(--gruen);
}

/*  ++ Frame Bild neben Text bis ganz am Rand ++ */
#inhaltsbereich .frame-bildnebentextaussen > .rahmen {
    width: 100%;
    margin: 0;
}

.frame-bildnebentextaussen .ce-textpic.ce-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.frame-bildnebentextaussen .ce-textpic.ce-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.frame-bildnebentextaussen .ce-intext.ce-right .ce-gallery,
.frame-bildnebentextaussen .ce-intext.ce-left .ce-gallery {
    width: calc(50% - 30px);
    margin: 0 0 0 30px;
}

.frame-bildnebentextaussen .ce-intext.ce-left .ce-gallery {
    margin: 0 30px 0 0;
}

.frame-bildnebentextaussen .ce-intext.ce-right .ce-gallery .ce-column,
.frame-bildnebentextaussen .ce-intext.ce-left .ce-gallery .ce-column {
    width: 100%;
}

.frame-bildnebentextaussen .ce-intext.ce-right .ce-gallery .ce-column .image,
.frame-bildnebentextaussen .ce-intext.ce-left .ce-gallery .ce-column .image {
    width: 100%;
}

.frame-bildnebentextaussen .ce-intext.ce-right .ce-gallery .ce-column .image img,
.frame-bildnebentextaussen .ce-intext.ce-left .ce-gallery .ce-column .image img {
    width: 100%;
    height: auto;
}

.frame-bildnebentextaussen .ce-intext.ce-right .ce-bodytext,
.frame-bildnebentextaussen .ce-intext.ce-left .ce-bodytext {
    width: calc(50% - 5% - 30px);
    margin: 0 30px 0 5%;
}

.frame-bildnebentextaussen .ce-intext.ce-left .ce-bodytext {
    width: calc(50% - 5% - 30px);
    margin: 0 5% 0 30px;
}

/* ++ Frame Iconsstart ++ */
#inhaltsbereich .col-100 > .frame-iconsstart {
    margin: 60px 0 0 0;
}

#inhaltsbereich .tx_cn-columns .row .col-100 > div {
    width: 100%;
}

.frame-iconsstart .ce-gallery {
    margin: 0;
}

.frame-iconsstart .ce-outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    left: unset;
    right: unset;
    /* column-gap: 30px; */
    gap: 50px;
    transform: unset;
    max-width: unset;
}

.frame-iconsstart .ce-row {
    width: calc(20% - 30px);
    margin: 0;
    position: relative;
    z-index: 2;
}

.frame-iconsstart .ce-row .ce-column {
    width: 100%;
    text-align: center;
    margin: 0 0 60px 0;
}

.frame-iconsstart .ce-row .ce-column:last-child {
    margin: 0;
}

.frame-iconsstart .image {
    width: 100%;
    text-align: center;
}

.frame-iconsstart .image img {
    margin: 0 auto;
}

.frame-iconsstart .image-caption {
    text-align: center;
    margin-top: 10px;
}

/*  ++ Frame Galerie ++ */
.frame-startgalerie {
    --cn_multigap: 5px;
}

#inhaltsbereich .frame-startgalerie > .rahmen {
    width: 100%;
    margin: 0;
}

.frame-startgalerie .row .col-40 .ce-column,
.frame-startgalerie .row .col-60 .ce-column,
.frame-startgalerie .row .col-40 .ce-column .image,
.frame-startgalerie .row .col-60 .ce-column .image {
    width: 100%;
}

#inhaltsbereich .frame-startgalerie .row .col-40 .ce-column .image > a,
#inhaltsbereich .frame-startgalerie .row .col-60 .ce-column .image > a {
    background: unset;
    transition: unset;
    display: block;
    min-height: unset;
}

.frame-startgalerie .row .col-40 img,
.frame-startgalerie .row .col-60 img {
    width: 100%;
    height: 100%;
}

.frame-startgalerie .row .col-40 .ce-gallery .ce-row:last-child {
    margin-left: 75px;
}

.frame-startgalerie .row .col-60 .ce-gallery .ce-row:first-child {
    margin-right: 200px;
}

.frame-startgalerie .row .col-60 .ce-gallery .ce-row:last-child {
    margin-right: 280px;
}

/* ++ Frame Spalteankerlink ++ */
.frame-spalten .tx_cn-columns[data-cols="3"] .row > div > div {
    width: 100%;
}

.frame-spalten .tx_cn-columns[data-cols="3"] .row > div:nth-child(3n+0) > div {
    margin: 60px 0 0 0;
}

ul.ul_nebeneinander {
    text-align: center;
    margin-top: -15px;
}

ul.ul_nebeneinander li {
    display: inline-block;
    padding: 0;
    margin: 15px 30px 0 30px;
}

ul.ul_nebeneinander li:last-child {
    margin-right: 0;
}

ul.ul_nebeneinander li::before {
    display: none;
}

/*  ++ Frame Welle im Hintergrund ++ */
#inhaltsbereich .frame-wellehg > .rahmen {
    width: 100%;
    margin: 0;
}

#inhaltsbereich > .frame-wellehg {
    padding-bottom: 60px;
}

.frame-wellehg > .rahmen > header {
    width: 90%;
    margin: 0 5%;
}

.frame-wellehg .col-50:first-child {
    width: 45%;
    margin-left: 5%;
}

.frame-wellehg .col-50:last-child > div {
    position: relative;
}

.frame-wellehg .col-50:last-child > div::after {
    content: '';
    width: 100%;
    height: auto;
    background: url(../images/welle-hintergrund.svg) no-repeat;
    position: absolute;
    left: unset;
    right: 0;
    bottom: -60px;
    background-position: 100% 100%;
    aspect-ratio: 5 / 2;
    z-index: -1;
}

.frame-wellehg .col-50:last-child > div > .rahmen {
    width: 90%;
    margin-right: 10%;
}

/*  ++ Frame Zimmer Slider ++ */
.frame-zimmer-slider .ce-gallery {
    position: relative;
    margin: 0;
}

.frame-zimmer-slider .ce-gallery .image-caption {
    position: absolute;
    top: 0;
    background: var(--hellbraun);
    left: 0;
    width: calc(100% - 10px);
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}

#inhaltsbereich .frame-zimmer-slider {
    margin-top: 20px;
}

/*  ++ Frame Jobs ++ */
#inhaltsbereich .frame-jobs .col-50 > div {
    background: var(--gruen);
    width: calc(100% - var(--cn_multigap) - 60px);
    padding: 30px;
    color: var(--weiss);
}

#inhaltsbereich .frame-jobs .col-50 h3 {
    font-family: 'URWDIN', Arial, Helvetica, sans-serif;
}


/*  ++ Frame Claimbild ++ */
#inhaltsbereich .frame-claimbild {
    position: relative;
}

#inhaltsbereich .frame-claimbild > .rahmen {
    width: 100%;
    margin: 0;
}

.frame-claimbild h2 {
    background: var(--apartmentbraun);
    margin: 0px 0 0 5%;
    width: auto;
    max-width: unset;
    text-align: left;
    display: inline-block;
    padding: 15px;
    position: absolute;
    transform: rotate(-5deg);
    color: var(--weiss);
}

.frame-claimbild h2::before {
    content: '+';
    position: absolute;
    left: -70px;
    top: -50px;
    font-size: 250px;
    color: var(--apartmentbraun);
}

.frame-claimbild .ce-bodytext {
    position: absolute;
    left: 5%;
    top: 100px;
    background: var(--apartmentbraun);
    padding: 40px 20px 40px 20px;
    font-size: 25px;
    color: var(--weiss);
}

.frame-claimbild .ce-bodytext li {
    margin: 0 0 20px 0;
}

.frame-claimbild .ce-bodytext li:last-child {
    margin: 0;
}

.frame-claimbild .ce-bodytext li::before {
    background: url(../images/aufzaehlungszeichen_weiss.svg) no-repeat;
}

/* ++ Headerclaim ++ */
#header.sub:has(.frame-claimheader) {
    overflow: unset;
    margin-bottom: 90px;
}

#header.sub .frame-claimheader .ce-gallery {
    max-height: 90vh;
}

#header.sub .frame-claimheader .ce-bodytext {
    position: absolute;
    background: var(--apartmentbraun);
    width: auto;
    padding: 20px 40px 20px 20px;
    right: 5%;
    bottom: -60px;
    transform: rotate(-7deg);
    font-size: 20px;
    line-height: 1.6em;
}

#header.sub .frame-claimheader .ce-bodytext strong {
    font-size: 36px;
}

#header.subheader_keyfacts .ce-bodytext .p_serif .span_serif {
    font-size: 300px;
}

#header.subheader_keyfacts .ce-bodytext .p_schreibschrift {
    bottom: 60px;
}

#header.subheader_keyfacts .ce-bodytext .p_schreibschrift span {
    font-size: 80px;
}

#header .ce-bodytext .p_serif:lang(cs) {
    bottom: 50px;
}

#header.subheader_keyfacts .ce-bodytext .p_schreibschrift:lang(cs) {
    bottom: 100px;
}

/*  ++ Tabelle ++ */
#inhaltsbereich .table {
    margin: 30px 0 0 0;
}

#inhaltsbereich .contenttable {
    border: 0;
    width: 100%;
    border-spacing: unset;
}

#inhaltsbereich tr {
    border: 0;
    background: var(--hellbraun);
    width: 100%;
}

#inhaltsbereich tr:nth-child(2n) {
    background-color: var(--weiss);
}

#inhaltsbereich td {
    padding: 10px 10px;
}

/*  ++ Welle als Abschluss über Bildern ++ */
/* .tx_cn-multicontent.frame-layout-2,
.frame-type-textmedia .frame-layout-3 {
    position: relative;
}

.tx_cn-multicontent.frame-layout-2::after,
.frame-type-textmedia .frame-layout-3::after {
    content: '';
    background: url(../images/welle-weiss.svg) left 10px no-repeat;
    display: block;
    width: 100%;
    height: 175px;
    position: absolute;
    left: 0;
    bottom: 10px;
} */

/*  ++ Footer ++ */
#footer {
    float: left;
    clear: both;
    width: 100%;
    height: auto;
    position: relative;
    padding: 15px 0 30px 0;
    z-index: 1;
    background: var(--hellbraun);
}

/* #footer::after {
    content: '';
    width: 100%;
    height: 565px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: url(../images/bg-footer.svg) no-repeat;
    background-size: 100%;
} */

#footer::after {
    content: '';
    width: 100%;
    height: 700px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: url(../images/bg-footer2.svg) no-repeat;
    background-size: 100%;
}

/* #footer::before {
content: '';
    width: 100%;
    height: 250px;
    position: absolute;
    left: 0;
    top: -250px;
    z-index: 1;
    background: url(../images/welle-weiss.svg) no-repeat;
    background-size: 100%;
} */

#footer a {
    color: var(--schriftfarbe);
    background: linear-gradient(90deg, var(--schriftfarbe) 30%, rgba(161, 213, 166, 0) 30%),
                linear-gradient(90deg, var(--schriftfarbe) 30%, var(--schriftfarbe) 100%);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
    text-decoration: none;
    display: inline-block;
    min-height: 24px;
}

#footer a:hover {
    background-size: 0 2px, 100% 2px;
}

#footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#footer ul li::before {
    background: url(../images/aufzaehlungszeichen_grau.svg) no-repeat;
}

#footer .footer_oben,
#footer .footer_unten {
    float: left;
    clear: both;
    width: 100%;
}

#footer .footer_oben > .rahmen,
#footer .footer_unten > .rahmen {
    width: 90%;
    margin: 0 5%;
}

#footer .footer_oben {
    padding-bottom: 30px;
}

#footer .footer_unten {
    padding-top: 30px;
    position: relative;
}

#footer .footer_unten ul li::before {
    display: none;
}

#footer .footer_unten::before {
    content: '';
    width: 90%;
    height: 2px;
    background: var(--schriftfarbe);
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
}

#footer .footer_unten .ce-column {
    margin-right: 35px;
}

#footer .footer_unten .ce-column:last-child {
    margin-right: 0;
}

#footer .footer_unten .tx_cn-columns .row .col-20:last-child > div {
    text-align: right;
}

#footer .footer_unten .image a {
    background: none;
}

/*  Footer Keyfacts ++ */
#footer.footer_keyfacts > .rahmen {
    width: 90%;
    margin: 0 auto;
}

#footer.footer_keyfacts::before,
#footer.footer_keyfacts::after {
    display: none;
}

#footer.footer_keyfacts .tx_cn-columns .row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

#footer.footer_keyfacts ul {
    text-align: right;
}

#footer.footer_keyfacts ul li {
    padding-left: 0;
}

#footer.footer_keyfacts ul li::before {
    display: none;
}

#footer.footer_keyfacts ul li a,
#footer.footer_keyfacts .tx_cn-columns .row .col-:first-child a {
    background: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: 0.2s;
}

#footer.footer_keyfacts ul li a:hover,
#footer.footer_keyfacts .tx_cn-columns .row .col-:first-child a:hover {
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}