/* CSS Document */
@charset "utf-8";
@font-face {font-family:'Gloock'; src:url('../fonts/Gloock-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}

html { /* killing 300ms touch delay in IE */
-ms-touch-action: manipulation;
touch-action: manipulation;}
html {font-size:100%; scroll-behavior:smooth;}
html, body {margin:0; padding:0; height:100vh; min-height:100%; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; background:#fbfbfb;}
html, body, button, input, select, textarea, table {font-family:'Montserrat', Arial, sans-serif; font-size:16px; line-height:26px; font-weight:400; color:#444;}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main,summary,
iframe,vedeo,form,input,select,textarea,div,table,h1,h2,h3,h4,h5,h6,p,ul,ol,hr,img {position:relative; display:block; box-sizing:border-box;}
audio,canvas,video{display:block;*zoom:1;}
audio:not([controls]){display:none}
[hidden]{display:none}

*, *::before, *::after {box-sizing:border-box;}
html body *:focus {outline:none;}
a {color:inherit; text-decoration:none;}
a:focus{outline:none}
a:hover,a:active{outline:0}

div {padding:0; margin:0; width:100%; height:auto;}
hr {widt:100%; height:1px; border:0 none; margin-bottom:52px; border-top:1px dotted #aaa; clear:both;}

p, ul, ol, table {margin:0 auto 26px;}

table {padding:0; margin:0 0 29px; width:100%; border-collapse:collapse;}
td {padding:7px 0; vertical-align:top; border-bottom:1px dotted #aaa; text-align:left;}
td.tag {font-weight:600; padding:7px 20px 7px 0;}

h1 {text-align:center;}
h1, h2, h3 {font-family:'Gloock', 'Times New Roman', serif; font-weight:400;}
h1, h2 {font-size:42px; line-height:60px; margin:36px auto; color:#22aaaa;}
h3 {font-size:30px; line-height:42px; padding:0; margin:0 0 36px; color:#22aaaa;}
h4 {font-size:24px; line-height:36px; font-weight:600; padding:0; margin:0 0 26px; color:#22aaaa;}
h5 {font-size:20px; line-height:30px; font-weight:600; padding:0; margin:0 0 26px;}
h6 {position:absolute; bottom:0; left:0; width:100%; padding:20px; margin:0; display:block; box-sizing:border-box; z-index:auto; 
font-size:16px; line-height:26px; font-weight:600; color:#444; background:rgba(255,255,255,0.85); transition:padding 0.4s, color 0.4s, background 0.4s;}
a:hover h6 {padding:30px 20px; color:#007788; background:rgba(255,255,255,0.95); transition:padding 0.2s, color 0.2s, background 0.2s;}

.minitext {font-size:75%;}
strong {font-weight:600;}

img {padding:0; margin:0 auto; width:100%; height:auto;}
.bannerbild {max-width:1200px;}
.portrait {padding:0; margin:40px auto 0; width:80%; max-width:400px; border-radius:50%;}
.live {width:20px; margin:0 4px -1px; display:inline-block;}

.stars {margin:20px auto; width:max-content;}
.stars img {width:25px; margin:0 1px; display:inline-block;}

.highlights {text-align:center;}
.highlight {padding:40px 20px; margin:20px 0.5%; width:240px; text-align:center; background-image:linear-gradient(30deg,#ddaa11, #ffcc44);
box-shadow: 0 5px 15px #00000011; display:inline-block;}
.highlight h3 {font-size:42px; line-height:60px; margin:20px auto; color:#fff;}
.highlight h5 {color:#fff;}

.sea {color:#22aaaa;}
.deepsea {color:#007788;}
.dark {color:#444;}
.light {color:#f8f8f8;}
.gold {color:#ffbb22;}

.bunt {background:#f8f8f8; box-shadow: inset 0 0 15px #00000011;}
.paper {width:100%; padding:60px 80px 40px; margin:40px 0; background:#fff; box-shadow: 0 5px 15px #00000011;}

.topline {margin:0; padding:20px 4%; font-family:'Gloock', 'Times New Roman', serif; font-size:28px; line-height:36px; letter-spacing:0.05em; color:#fff; 
background-image:linear-gradient(90deg,#22aaaa, #00334422);}
.logo {width:max-content;}
.logonodis {width:max-content; display:inline;}
.icons {width:max-content; float:right;}
.icons a {color:#fff; opacity:0.85;}
.icons a:hover {opacity:1;}
.icons a img {padding:0; margin:0 0 0 20px; display:inline; width:36px;}
.termin {background:url(../images/icons/termin.svg) top left no-repeat;}
.phone {background:url(../images/icons/phone.svg) top left no-repeat;}

.header {margin:0; padding:80px 4% 20px; text-align:center; font-size:16px; line-height:26px; background:#fff; box-shadow:0 0 15px 0 #00000011; z-index:100;}

.navi {margin:0 auto; padding:0; text-align:center;}
.navi ul {margin:0 auto; padding:0; display:block; text-transform:uppercase; font-weight:600;}
.navi ul li {display:inline-block; margin:0 10px; padding:0; list-style-type:none; text-align:left;}
.navi ul li a {padding:10px; margin:0; height:50px; color:#00334455; text-decoration:none; display:block; box-sizing:border-box; transition:color 0.3s;}
.navi ul li a:hover, .navi ul li.active a {color:#007788;}

.megaWrap {position:relative; display:flex;}
.megaInnerCol {position:relative; width:320px; /* display:flex; flex-direction:row; */ }

input[type="checkbox"].opennavi:checked ~ .navi {transform:translateX(0);}
input[type=checkbox].opennavi {transition:all 0.3s; box-sizing:border-box; display:none;}
.sidebarIconToggle {width:22px; height:22px; margin:0 6px 0 auto; box-sizing:border-box; z-index:99; cursor:pointer; display:none;
transition:all 0.3s; z-index:999;}
.spinner {position:absolute; width:100%; height:3px; background:#007788; box-sizing:border-box; transition:all 0.3s;}
.horizontal {position:relative; float:left; margin-top:3px; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-1 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-2 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s; margin-top:3px;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .horizontal {box-sizing:border-box; transition:all 0.3s; opacity:0;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-1 {box-sizing:border-box; transition: all 0.3s; margin-top:8px; transform: rotate(135deg);}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-2 {box-sizing:border-box; transition:all 0.3s; margin-top:-9px; transform: rotate(-135deg);}

.banner {width:100%; max-width:1800px; height:800px; padding:0; margin:0 auto;}
.event1, .event2, .event3 {position:absolute; top:0; left:0; width:100%; height:800px; margin:0; padding:0; display:block; 
background-size:cover; background-position:right; background-repeat:no-repeat;
opacity:0; animation: 12s autoplay infinite linear;}
@keyframes autoplay {
  0% {opacity: 0.0}
  6% {opacity: 1.0}
  33.33% {opacity: 1.0}
  39.33% {opacity: 0.0}
  100% {opacity: 0.0}
}
.event1 {background-image:url(../images/event1.jpg); animation-delay:0s;}
.event2 {background-image:url(../images/event2.jpg); animation-delay:4s;}
.event3 {background-image:url(../images/event3.jpg); animation-delay:8s;}

.bannertext {position:absolute; top:160px; left:8%; width:max-content;}
.bannertext h1, .bannertext h4 {padding:10px 40px; width:max-content; color:#111; background:#ffffffaa; text-align:left; display:block;}
.bannertext h1 {margin:0 0 36px;}
.bannertext h4 {margin:0 0 10px;}
.ani1 {animation:insert1 6s;}
@keyframes insert1 {
 0% {transform: translate(-200%);}
 10% {transform: translate(-200%);}
 25% {transform: translate(0);}
100% {transform: translate(0);}
}
.ani2 {animation:insert2 6s;}
@keyframes insert2 {
 0% {transform: translate(-200%);}
 35% {transform: translate(-200%);}
 50% {transform: translate(0);}
100% {transform: translate(0);}
}
.ani3 {animation:insert3 6s;}
@keyframes insert3 {
 0% {transform: translate(-200%);}
 50% {transform: translate(-200%);}
 65% {transform: translate(0);}
100% {transform: translate(0);}
}
.ani4 {animation:insert4 6s;}
@keyframes insert4 {
 0% {transform: translate(-200%);}
 80% {transform: translate(-200%);}
 90% {transform: translate(0);}
100% {transform: translate(0);}
}
.bannerbutton {margin:60px 6px 0; padding:15px 40px; width:max-content; color:#111; background:#ffbb22; font-size:18px; font-weight:600; text-align:left; 
display:block; outline: 1px solid #ffbb22; outline-offset:5px;}

.main {width:92%; max-width:900px; padding:0; margin:0 auto;}
.bigmain {width:92%; max-width:1400px; padding:0; margin:0 auto;}
.big {padding-top:90px; padding-bottom:90px;}
.halb {width:48%; padding:0; margin:0 4% 0 0; float:left; display:inline-block;}
.doppel {width:66%; padding:0; margin:0 2% 0 0; float:left; display:inline-block;}
.drittel {width:32%; padding:0; margin:0 2% 0 0; float:left; display:inline-block;}
.last {margin-right:0;}
.clear {width:100%; clear:both;}
.space {height:30px; clear:both;}
.bigspace {height:180px; clear:both;}
.topspace {padding-top:26px;}

.left {float:left; display:block;}
.right {float:right; display:block;}
.center {text-align:center;}

.gallery {text-align:center;}

.container {display:flex; padding:20px 0 0;}
.column50 {display:flex; width:50%;}
.column {align-content:flex-start; flex-wrap:wrap; margin:0 auto; padding:80px 10%; background-size:cover;}
.textfeld {width:80%; margin: 0 auto; padding:40px 0 30px;}

.angebot {display:inline-block; width:32%; margin:0 0.5% 26px; padding:0; vertical-align:top; background:#fff; box-shadow: 0 5px 15px #00001111;}
.angebot img {margin:0 auto; padding:0;}

.profil {display:inline-block; width:100%; max-width:400px; margin:0 0.5% 26px; padding:48px 20px 48px; text-align:center; vertical-align:top;
background:#fff; box-shadow: 0 5px 15px #00001111;}
.profil img {width:80%; max-width:400px; margin:0 auto 34px; padding:0; background:#fff; border-radius:50%;}

.footer {padding:20px 0 17px; margin:0 auto; font-size:14px; line-height:26px; background:#00334411; color:#666; text-align:center;}
.footer p {margin:0 auto;}
.footer a {color:#666; text-decoration:none;}
.footer a:hover {color:#444; text-decoration:none;}

.drittelbildleft, .drittelbildright {width:43%; padding:0;}
.drittelbildleft {margin:0 57% 0 0;}
.drittelbildright {margin:0 0 0 57%;}
.overtextright, .overtextleft {width:50%; padding:80px 80px 50px; background:#ffffffdd; box-shadow: 0 5px 15px #00001111;}
.overtextright {margin:-400px auto 0 40%;}
.overtextleft {margin:-400px 40% 0 auto;}

.aktuelles {padding-top:180px; background:#00000088; color:#fff; transition:all 0.4s;}
.aktuelles:hover {background:#00000022; cursor:pointer;}
.aktuelles h3, .aktuelles h4, .aktuelles h5 {color:#fff;}
.akt1, .akt2, .akt3 {background-position:center center; background-size:auto 100%; background-repeat:no-repeat;}
.akt1 {background-image:url(../images/aktuelles/akt1.jpg);}
.akt2 {background-image:url(../images/aktuelles/akt2.jpg);}
.akt3 {background-image:url(../images/aktuelles/akt3.jpg);}

iframe {width:100%; height:600px; padding:0; margin:0; clear:both;}
video {width:100%; margin-bottom:24px;}
.videodiv {width:100%; height:0; padding-bottom:56.25%;}
.videoframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.totop {position:fixed; bottom:10px; right:10px; width:3px; height:3px; padding:12px 19px 22px 16px; margin:0; 
text-align:center; border-radius:50%; border:3px solid #999; background:rgba(255,255,255,0.5); z-index:100; opacity:0.3; 
 filter: alpha(opacity=30);}
.totop:hover {opacity:0.6;
 filter: alpha(opacity=60);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#999; width:3px; height:9px;}
.totop i:before {
 -ms-transform: translate(-2px, 0) rotate(45deg);
 -webkit-transform: translate(-2px, 0) rotate(45deg);
 transform: translate(-2px, 0) rotate(45deg);
}
.totop i:after {
 -ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);
}

.button {width:max-content; height:auto; display:block; padding:12px 34px; margin:40px auto 40px; cursor:pointer;
font-size:16px; line-height:24px; font-weight:600; color:#fff; text-align:center; text-decoration:none; border:0 none; border-radius:24px; 
background:#007788; background-image:linear-gradient(90deg,#007788,#22aaaa);}
.button:hover {letter-spacing:0.01em; transition: letter-spacing 0.15s;}

.readmore {display:block; padding:16px 24px; margin:40px 0 20px; width:max-content; background:#007788; background-image:linear-gradient(90deg,#007788,#22aaaa); 
font-size:16px; line-height:24px; font-weight:600; color:#fff; text-align:center; text-decoration:none; border:0 none; opacity:0.6; transition:all 0.2s;}
.readmore:hover {padding:16px 24px 16px 30px; opacity:1;}

.album {line-height:0px; display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-flow:row; grid-gap:4px;}
.album a {display:block; box-sizing:border-box; max-width:100%; height:auto; overflow:hidden;}
.album a img {width:100%; margin:0; padding:0; transition: width 0.12s, margin 0.12s;}
.album a:hover img {margin:-1%; width:102%;}

/*///////////////////// IMAGE LIGHTBOX /////////////////////////*/

#imagelightbox {position:fixed; z-index:1002; cursor:pointer; 
-ms-touch-action: none; touch-action: none;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3 ); /* 50 */
box-shadow: 0 0 10px rgba(0,0,0,0.3); /* 50 */
}
#imagelightbox-overlay {position:fixed; top:0; right:0; bottom:0; left:0; z-index:1001; 
background-color:#fff; background-color:rgba(255,255,255,.9);
}
#imagelightbox-loading, #imagelightbox-loading div {border-radius:50%;}
#imagelightbox-loading {position:fixed; top:50%; left:50%; z-index:903; 
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
padding:0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
background-color:#203030;
}
#imagelightbox-loading div {
width: 1.25em; /* 20 */
height: 1.25em; /* 20 */
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
#imagelightbox-caption {position:fixed; left:0; right:0; bottom:0; z-index:904;
text-align:center; color:#fff; background-color: rgba(0,0,0,0.3);
padding: 0; /* 10 */
}
@-webkit-keyframes imagelightbox-loading {
from {opacity:0.5;	-webkit-transform: scale(0.75);}
50%	 {opacity:1;	-webkit-transform: scale(1);}
to	 {opacity:0.5;	-webkit-transform: scale(0.75);}
}
@keyframes imagelightbox-loading {
from {opacity:0.5;	transform: scale(0.75);}
50%	 {opacity: 1;	transform: scale(1);}
to	 {opacity:0.5;	transform: scale(0.75);}
}


/*///////////// RESPONSIVE /////////////*/

@media screen and (min-width: 1100px) {
.event1 {background-image:url(../images/event1.jpg);}
.event2 {background-image:url(../images/event2.jpg);}
.event3 {background-image:url(../images/event3.jpg);}
}

@media screen and (min-width: 480px) {
.button br {display:none;}
}

@media screen and (max-width: 1400px) {
.banner {height:700px;}
.event1, .event2, .event3 {height:700px;}
.bannertext {top:120px;}
}
@media screen and (max-width: 1200px) {
.banner {height:600px;}
.event1, .event2, .event3 {height:600px;}
.bannertext {top:80px;}
.container {display:block;}
.angebot {display:flex; width:100%; margin:0 0 26px;}
.angebot img {display:block; margin:0; width:350px;}
.textfeld {width:auto; margin:0; padding:40px 40px 20px;}
.overtextright, .overtextleft {width:60%;}
}
@media screen and (max-width: 1100px) {
html, body, button, input, select, textarea, table {font-size:15px; line-height:24px;}
.banner {height:500px;}
.event1, .event2, .event3 {height:500px;}
.bannertext {top:60px; left:6%;}
.angebot img {height:400px; width:auto;}
.overtextright, .overtextleft {margin-top:-360px;}
}
@media screen and (max-width: 940px) {
.angebot {display:block;}
.angebot img {width:100%; height:auto;}
.angebot h4 {font-size:20px; line-height:28px; margin:0 0 12px;}
.textfeld {width:100%; padding:30px 4%px 20px;}
.overtextright, .overtextleft {margin-top:-280px; padding:60px 40px 40px;}
.bigspace {height:80px;}
}
@media screen and (max-width: 800px) {
.banner {height:400px;}
.event1, .event2, .event3 {height:400px;}
.bannertext {top:40px; left:4%;}
.bannertext h1 {margin:8px 0 24px;}
.bannertext h4 {font-size:20px; line-height:30px;}
.bannerbutton {margin:30px 6px 0;}
html, body {overflow-x:hidden;}
.header {padding:20px 4% 12px;}
.sidebarIconToggle {display:block;}
.navi {position:absolute; top:54px; left:auto; right:0; width:100%; max-width:240px; padding:0; margin:0; display:block; box-sizing:border-box; 
background:#007788; background-image:linear-gradient(90deg,#007788,#22aaaa); transform:translateX(380px); transition:transform 600ms ease-in-out;}
.navi ul li {display:block; padding:0; margin:0; color:#fff; text-transform:uppercase;}
.navi ul li a {display:block; box-sizing:border-box; width:100%; padding:10px 24px !important; height:auto; color:#fff; border-bottom:1px solid #ffffff22;}
.navi ul li:last-child a {border-bottom:0 none;}
.navi ul li:hover a {color:#fff; transition:color 0s; background:#ffffff22;}
.navi ul li.active a {color:#fff;}
.halb, .doppel, .drittel {width:100%; margin-left:0; margin-right:0;}
.halb ul, .drittel ul, .halb ol, .drittel ol {margin-bottom:0;}
.last ul, .last ol {margin-bottom:26px;}
.gallery .halb {margin-bottom:30px;}
.button {margin-bottom:2px;}
.banner {padding:0;}
.big {padding:40px 0 40px;}
.overtextright, .overtextleft {margin-top:-200px;}
.album {grid-template-columns:repeat(2, 1fr);}
ul.accord li.accor i {margin-top:36px;}
h1, h2 {font-size:32px; line-height:48px;}
p, ul, ol {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-moz-hyphenate-limit-chars: auto 5;
-o-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-chars: auto 5;
hyphenate-limit-chars: auto 5;
-moz-hyphenate-limit-lines: 2;
-o-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
}
.nohyp, a.button, .navi ul {
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;}
}

@media screen and (max-width: 600px) {
.logonodis {display:none;}
.gallery li {width:100%;}
.drittelbildleft, .drittelbildright {width:100%; margin:0;}
.overtextright, .overtextleft {width:100%; margin:20px 0 0; padding:40px 4% 20px;}
}

@media screen and (max-width: 480px) {
.bannertext h1, .bannertext h4 {width:80%; padding:10px 20px; margin:0;}
.bannertext h4 {font-size:18px;}
}

@media screen and (max-width: 420px) {
.icons {display:none;}
}