@font-face {
    font-display: swap;
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    src: url('Fonts/jost-v15-latin-regular.woff2') format('woff2');
}

:root {
    --text-color:#333;
    --light-grey:#f9f9fb;
    --dark-grey:#dbdbdb;
    --grid-padding:min(5dvw,40px);
}

body { font-family:'Jost',sans-serif; color:var(--text-color); font-size:19px; letter-spacing:0.285px; line-height:1.7; margin:0; padding:0; }
h1 { font-size:38px; font-weight:normal; margin:50px 0 15px; line-height:1.2; }
h2 { font-size:32px; font-weight:normal; margin:40px 0 15px; line-height:1.2; }
h3,h4,h5,h6 { font-size:19px; margin:30px 0 15px; line-height:1.2; }
img { vertical-align:top; height:auto; max-width:100%; }
a, a:visited { color:var(--text-color); }
a[href^=http]:not(.noIcon)::before { content:''; display:inline-block; height:15px; width:15px; margin-right:10px; background:url(/typo3conf/ext/template/Resources/Public/Images/up-right-from-square.svg) center / contain; }
.pageFooter .top a[href^=http]::before { opacity:0.6; }

p { margin:0 0 15px 0; }
p:last-child { margin-bottom:0; }
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child { margin-top:0; }
h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child { margin-bottom:0; }
hr { border:0; margin:var(--grid-padding) 0; border-top:solid 3px var(--dark-grey);  }
* { box-sizing:border-box; }
.contentWidth { max-width:1280px; width:90%; margin-left:auto; margin-right:auto; position:relative; }

/* Header - Logo - Navigation */
.pageHeader { position:fixed; background-color:#fff; box-shadow:rgba(0,0,0,0) 0 1px 3px; top:0; left:0; width:100%; max-height:100dvh; overflow:auto; z-index:100; }
.stickyNaviHeader .pageHeader { box-shadow:rgba(0,0,0,.117647) 0 1px 3px; }
.pageHeader .logo { padding:20px 0; margin-left:5%; display:inline-block; }
.pageHeader .logo .mobile { height:55px; width:auto; }
.pageHeader .logo .desktop { display:none; }

#mobileOpener { display:inline-block; height:41px; width:41px; position:absolute; top:25px; right:7vw; vertical-align:bottom; cursor:pointer; }
#mobileOpener span,
#mobileOpener span:after,
#mobileOpener span:before { display:block; width:18px; height:3px; background-color:#434549; position:absolute; transition:0.3s ease; }
#mobileOpener span { top:20px; left:12px; }
#mobileOpener span:after { content:''; top:-6px; left:0; }
#mobileOpener span:before { content:''; top:6px; left:0; }
#mobileOpener.open span { transform:rotate(-45deg); transition:0.3s ease; }
#mobileOpener.open span:after { transform:rotate(-90deg); top:0; }
#mobileOpener.open span:before { opacity:0; }

@media (max-width: 1023px) {
    .pageHeader { transition:all 1.5s; }
    .pageHeader .contentWidth { width:100%; }
    ul#mainNavi { display:none; list-style-type:none; margin:0; padding:0; border-top:solid 1px var(--dark-grey); }
    ul#mainNavi li { display:block; border-bottom:solid 1px var(--dark-grey); }
    ul#mainNavi a { display:block; line-height:22px; padding:12px 5%; text-decoration:none!important; }
}

@media (min-width: 1024px) {
    .pageHeader { height:80px; overflow:visible; }
    .pageHeader .logo { margin-left:0; padding:0; }
    .pageHeader .logo .mobile { position:absolute; top:13px; left:0; opacity:0; transition:all 1s; }
    .stickyNaviHeader .pageHeader .logo .mobile { opacity:1; }
    .pageHeader .logo .desktop { display:block; width:180px; height:180px; position:absolute; top:20px; left:0; transition:all 1s; }
    .stickyNaviHeader .pageHeader .logo .desktop { width:55px; height:55px; opacity:0; transition:all 0s; }
    #mobileOpener { display:none; }
    ul#mainNavi { display:flex!important; justify-content:space-between; list-style-type:none; margin:0; padding:0; position:absolute; top:0; right:0; margin-right:max(-1.7vw,-24px); }
    ul#mainNavi li {  }
    ul#mainNavi a { display:inline-block; padding:0 min(1.7vw,24px); text-decoration:none!important; white-space:nowrap; position:relative; }
    body.start #mainNavi-71 a,
    ul#mainNavi .active > a,
    ul#mainNavi a:hover { color:var(--dark-grey); }
    ul#mainNavi span { display:inline-block; border-top:3px solid #fff; line-height:81px; transition:all 0.5s; }
    body.start #mainNavi-71 a span,
    ul#mainNavi .active > a span,
    ul#mainNavi a:hover span { border-color:var(--dark-grey); }
}

/* Main Content */
.mainContent { margin-top:120px; }
.teaserContainer,
.mainContent .frame-default { margin:var(--grid-padding) 0; }
.stickyFrame .teaserContainer,
.stickyFrame .frame-default { margin-top:0; }
.teaserContainer > .frame-default,
.mainContent .col > .frame-default { margin:0; }
.mainContent .col > .frame-default + .frame-default { margin-top:var(--grid-padding); }

.mainContent .frame-default.frame-space-before-extra-small { margin-top:10px; }
.mainContent .frame-default.frame-space-before-extra-large { margin-top:calc(2 * var(--grid-padding)); }
.mainContent .frame-default.frame-space-after-extra-small { margin-bottom:10px; }
.mainContent .frame-default.frame-space-after-extra-large { margin-bottom:calc(2 * var(--grid-padding)); }

.headlineBox,
.frame-type-text.frame-layout-1 { line-height:1.8; border-left:solid 3px var(--dark-grey); padding:var(--grid-padding) calc(var(--grid-padding)*0.75); background-color:var(--light-grey); }
.frame-type-text.frame-layout-2 { padding:var(--grid-padding) calc(var(--grid-padding)*0.75); background-color:var(--light-grey); }
.col25 .frame-type-text.frame-layout-2 { padding:calc(var(--grid-padding)*0.75) calc(var(--grid-padding)*0.5); }
.colBox7525,.colBox5050,.colBox333333 { display:flex; gap:var(--grid-padding); }
.col25,.col33,.col50,.col75 { width:100%; }
.container.frame-layout-2 .col { padding:calc(var(--grid-padding)*0.75) calc(var(--grid-padding)*0.5); background-color:var(--light-grey); }
.ce-image.ce-center { text-align:center; }
.ce-image.ce-right { text-align:right; }

@media (max-width: 767px) {
    .colBox7525,.colBox5050,.colBox333333 { flex-wrap:wrap; }
}

@media (min-width: 768px) {
    .mainContent { margin-top:250px; }
    .col25 { width:25%; }
    .col25 .stickyFrame { position:sticky; top:120px; }
    .col33 { width:33.3333%; }
    .col50 { width:50%; }
    .col75 { width:75%; }
}

.gastgebGuestTeaserList { display:flex; flex-wrap:wrap; gap:var(--grid-padding); }
.gastgebGuestTeaserItem { position:relative; width:100%; }
.gastgebGuestTeaserItem a { display:block; }
.gastgebGuestTeaserItem .image { overflow:hidden; }
.gastgebGuestTeaserItem .image img { object-fit:cover; transition:all 0.6s; }
.gastgebGuestTeaserItem a:hover .image img { opacity:.5; transform: scale3d(1.1,1.1,1); }
.gastgebGuestTeaserItem .textBox { position:absolute; top:calc(var(--grid-padding) * 0.5); left:0; padding:10px var(--grid-padding); background-color:#fff8; width:100%; }
.gastgebGuestTeaserItem h2.headline { font-size:22px; font-weight:400; text-transform:uppercase; color:#fff; margin-bottom:15px; transition:all 0.6s; }
.gastgebGuestTeaserItem a:hover h2.headline { text-shadow:0 0 8px #0002; }
.gastgebGuestTeaserItem .text { font-size:14px; color:#666; background-color:rgba(255,255,255,.9); padding:10px calc(var(--grid-padding) * 0.5); margin:0 calc(var(--grid-padding) * -0.5); transition:all 0.6s; }
.gastgebGuestTeaserItem a:hover .text { color:#111; }

@media (min-width: 768px) {
    .gastgebGuestTeaserItem h3.headline { font-size:19px; }
}
@media (min-width: 1024px) {
    .gastgebGuestTeaserItem { width:calc((100% - var(--grid-padding)) / 2); }
}
@media (min-width: 1280px) {
    .gastgebGuestTeaserItem h3.headline { font-size:21px; }
} 

.guestDetail .headlineBox { margin-bottom:var(--grid-padding); }
.guestDetail .news-img-wrap { display:flex; flex-wrap:wrap; gap:var(--grid-padding); margin:var(--grid-padding) 0; }
.guestDetail .news-img-wrap > div { width:calc((100% - var(--grid-padding)) / 2); }
.guestDetail .news-img-caption { font-size:16px; margin-top:0; padding:10px 15px; background-color:var(--light-grey); }
.guestDetail .col25 > div { position:sticky; top:120px; }

.gastgebTerminList { background-color:var(--light-grey); padding:calc(var(--grid-padding)*0.25); }
.gastgebTerminItem { position:relative; }
.gastgebTerminItem + .gastgebTerminItem { margin-top:calc(var(--grid-padding)*0.5); }
.gastgebTerminItem a { text-decoration:none; }
.gastgebTerminItem .textBox { background:transparent; padding:calc(var(--grid-padding)*0.25); transition:all 0.5s; }
.gastgebTerminItem a:hover .textBox { background-color:#fff9; }
.gastgebTerminItem h3 { font-size:20px; margin:0 0 6px; text-decoration:underline; letter-spacing:-0.3px; }
.calendarBox .gastgebTerminItem h3 { margin-bottom:0; }
.gastgebTerminItem .teasertext { text-decoration:underline; letter-spacing:-0.3px; }
.gastgebTerminItem p { font-size:16px; margin:0; }
@media (max-width: 767px) {
    .gastgebTerminList { padding:calc(var(--grid-padding)*0.5); }
}

.calendarBox { background-color:var(--light-grey); padding:calc(var(--grid-padding)*0.5); }
.calendarBox .pager { display:flex; justify-content:space-between; list-style-type:none; padding:calc(var(--grid-padding)*0.5) 0; }
.calendarBox .pager a { display:inline-block; padding:calc(var(--grid-padding)*0.25); margin:calc(var(--grid-padding)*-0.25); transition:all 0.5s; }
.calendarBox .pager a:hover { background-color:#fff9; }
.calendarBox .pager svg { height:25px; width:25px; fill:#999; vertical-align:middle; }
.calendarBox table { border-collapse:collapse; width:100%; }
.calendarBox td { border:solid 1px #fff; vertical-align:top; width:calc(100% / 7); padding:0; }
.calendarBox td .inner { min-height:min(8dvw,120px); padding:calc(var(--grid-padding)*0.25); }
.calendarBox .calendarWeekday { font-size:26px; color:#999; letter-spacing:-0.45px; text-transform:uppercase; font-weight:400; text-align:left; padding:calc(var(--grid-padding)*0.5) calc(var(--grid-padding)*0.25) 0; }
.calendarBox .calendarDay { font-size:30px; letter-spacing:-0.45px; color:#999; }
.calendarBox .calendarEvent { font-size:14px; line-height:1.2; }
.calendarBox .calendarEvent .title { text-decoration:underline; }
.calendarBox .calendarEvent a { display:block; text-decoration:none; margin:0 calc(var(--grid-padding)*-0.25); padding:calc(var(--grid-padding)*0.25); transition:all 0.5s; }
.calendarBox .calendarEvent a:hover { background-color:#fff9; }
.calendarBox .gastgebTerminItem { margin:var(--grid-padding) 0; }
@media (max-width: 459px) {
    .calendarBox .calendarWeekday,
    .calendarBox .calendarDay { font-size:20px; }
    .calendarBox .calendarEvent { font-size:10px; }
    .calendarBox .calendarEvent .title { max-width:10dvw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

.ce-gallery figure { margin:0; }

.teaserContainer { display:flex; flex-wrap:wrap; gap:var(--grid-padding); }
.teaserContainer > div { width:100%; }
.col25 .teaserContainer > div { width:100%; }
.teaserContainer .iconTextTeaser { height:100%; position:relative; padding-bottom:42px; }
.teaserContainer .iconTextTeaser a { height:100%; }
.teaserContainer .iconTextTeaser .more { position:absolute; bottom:0; left:0; width:100%; }

@media (min-width: 520px) {
    .teaserContainer > div { width:calc((100% - var(--grid-padding)) / 2); }
}
@media (min-width: 920px) {
    .teaserContainer > div { width:calc((100% - (2 * var(--grid-padding))) / 3); }
}
@media (min-width: 1180px) {
    .teaserContainer > div { width:calc((100% - (3 * var(--grid-padding))) / 4); }
}


/* Footer */
.pageFooter { color:#888; background-color:#f5f5f5; }
.pageFooter .top { padding:60px 0; }
.pageFooter .top img { margin-bottom:20px; width:100%; }
.pageFooter .top h4 { color:#434549; font-size:22px; margin-top:12px; }
.pageFooter .top a,
.pageFooter .top a:visited { color:#68696c; }
.pageFooter .top a:hover { color:#3c3d3f; }
.pageFooter .bottom { background-color:var(--text-color); padding:20px 30px; color:#777; text-align:center; font-size:13px; }
.pageFooter .bottom a { color:#fff!important; }

@media (min-width: 1024px) {
    .pageFooter .bottom { font-size:17px; }
}
@media (min-width: 1200px) {
    .pageFooter .top .col:nth-child(2) { padding-left:40px; }
}
@media (min-width: 1280px) {
    .pageFooter .top img { max-width:unset; }
}






