/* CSS Document */
@charset "utf-8";
@font-face {font-family:'OpenSans'; src:url('../fonts/OpenSans-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap;}
@font-face {font-family:'OpenSans'; src:url('../fonts/OpenSans-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap;}
@font-face {font-family:'OpenSans'; src:url('../fonts/OpenSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'OpenSans'; src:url('../fonts/OpenSans-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}
@font-face {font-family:'OpenSans'; src:url('../fonts/OpenSans-Bold.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 {height:100vh; min-height:100%; width:100%; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; padding:0; margin:0;}
html, body, div, iframe, video, img, p, ul, ol, table, label {position:relative; display:block; box-sizing:border-box;}
audio, canvas, video {display:block; *zoom:1;}
audio:not([controls]) {display:none}
[hidden]{display:none}

* {scroll-behavior:smooth;}

html body *:focus {outline:none;}
*, *::before, *::after {box-sizing:border-box;outline:none;}
a, a:focus, a:hover, a:active{outline:none; cursor:pointer; font-weight:400;}
body {padding:0; margin:0; color:#888; font-size:16px; line-height:24px; font-family:'Open Sans', Helvetica, Arial,sans-serif; font-weight:400;
background:#faf8f6 url(../images/peeling_silver.gif) fixed;}

h1, h2, h3, h4, h5, h6 {font-weight:300; font-style:normal;}
h1 {font-size:36px; line-height:48px; padding:0; margin:18px 0 32px;}
h2 {font-size:48px; line-height:56px; padding:0; margin:24px 0 32px; color:#666;}
h3 {font-size:30px; line-height:42px; padding:0; margin:18px 0 24px; font-weight:400; color:#a98;}
h4 {font-size:48px; line-height:52px; padding:0; margin:0 auto; color:rgba(255,255,255,0.9); font-weight:600; text-shadow:-1px -1px #ddc;}
h5 {font-size:22px; line-height:32px; padding:0; margin:18px 0; font-weight:400;}
h6 {font-size:18px; line-height:28px; padding:0; margin:18px 0; font-weight:400;}

a:link, a:visited {color:#a98; text-decoration:none;}
a:hover, a:active {color:#ba8; text-decoration:none;}

a.weiter {display:inline-block;}
a.weiter:hover {color:#488; background:#dff; padding:0 8px; transition:padding 0.2s;}

p, li {margin-bottom:24px;}
ul, li {text-align:left;}
strong {font-weight:600; font-size:110%;}

iframe, video {width:100%; margin:0 auto; padding:0; owerflow:hidden; dispaly:block; clear:both;}
table {width:100%; padding:0; margin:0 0 24px; border-collapse:collapse; text-align:left;}
td {vertical-align:top; padding:0 20px 10px 0; text-align:left;}
td.tag {width:30px; font-weight:600;}

img.logo {padding:0; margin:0 20px; width:100%; max-width:273px; float:left;}
img.portrait {padding:7px; margin:0 auto; width:90%; max-width:400px; background:#fff; border:1px solid #eee; border-radius:50%;}

.gallery {padding:0; mardin:0; text-align:center;}
.gallery li {padding:0; margin:0; list-style-type:none; display:inline-block; box-sizing:border-box; width:16%;}
.gallery a {display:block; padding:5px; margin:10px; background:#fff; border:1px solid #a95;}
.gallery a:hover {border:1px solid #bb5;}
.gallery img {width:100%;}

.left {text-align:left;}
.center {text-align:center;}
.floatleft {float:left;}
.floatright {float:right;}
.clear {clear:both;}

.drittel {width:32.5%; margin:0 1.25% 0 0; float:left;}
.halb {width:48%; margin:0 4% 0 0; float:left;}
.w100 {width:100%; margin:0;}
.last {margin-right:0;}

.banner {width:100%; background:#8b887f; text-align:center;}
.banner img {width:100%; max-width:1125px; margin:0 auto;}

.space {padding:40px 0; margin:0 auto; width:auto; height:auto;}
.bigspace {padding:70px 0 80px; margin:0 auto; width:auto; height:auto;}
.content {padding:0; margin:0 auto; width:92%; max-width:1000px; height:auto;}

.achtung {background:#ba8e41; color:#fff;}
.achtung h2, .achtung h3, .achtung h4 {color:#fff;}
.achtung a {color:#fff; text-decoration:underline;}

.light {background:#faf8f6;}
.dark {background:#e0d0d0;}
.gold {background:#cc7;}
.darkgold {background:#761;}
.lightgray {background:#9b9c91;}
.darkgray {background:#6c7464;}

.white {background:#fff;}
.pearl {margin:0; padding:10px 0; text-align:center; background-image:linear-gradient(90deg, rgba(124,108,108,0.1), rgba(255,255,255,1) 50%, rgba(124,108,108,0.1) 100%);}
.ozean {margin:0; padding:30px 0 25px; text-align:center; background:#6de; background-image:linear-gradient(#8ee, #6de); color:#fff;}
.ozean h2, .ozean h3, .ozean h4, .ozean p, .ozean a {color:#fff;}
.footer {margin:0; padding:20px 40px 10px; font-size:14px; line-height:32px; text-align:center; clear:both;}

.navi {width:100%; height:auto; padding:20px 0 0; margin:10px 0; text-align:center; font-size:15px; text-transform:uppercase; z-index:100;}
.navi ul {padding:0; margin:0; list-style:none; display:inline;} 
.navi ul li {padding:0; margin:0; list-style:none; display:inline; cursor:pointer;}
.navi ul li a {padding:0 12px 4px; margin:0; height:30px; display:inline-block; cursor:pointer; color:#a98; text-decoration:none;}
.navi ul li a:hover {color:#976; text-decoration:none;}

.goldline {width:100%; height:2px; padding:0; margin:0 0 10px; display:block; background:#f2c455; 
background-image:linear-gradient(90deg, #fe9, #a96, #fe9, #a96, #fe9); border-bottom:1px solid #ffe;}
.square, .bigsquare {padding:0; margin:0 20px -2px 0; display:inline-block; 
background:#db6; background-image:linear-gradient(#cb4, #fff8aa 80%); border-bottom:1px solid #ed9; border-right:1px solid #ed9;}
.square {width:25px; height:25px; border-top-left-radius:15px; border-bottom-right-radius:15px;}
.bigsquare {width:36px; height:36px; border-top-left-radius:18px; border-bottom-right-radius:18px;}

.social {margin:0 auto; text-align:center;}
.social ul {padding:0; margin:0 auto; display:inline;}
.social ul li {padding:0px; margin:10px; width:40px; height:40px; list-style-type:none; display:inline-block; border-radius:50%; 
opacity: 0.7; filter: alpha(opacity=70);}
.social ul li:hover {opacity: 0.9; filter: alpha(opacity=90);}
.social ul li img {width:40px; height:40px;}

.totop {position:fixed; bottom:30px; right:30px; width:2px; height:2px; padding:16px 21px 24px 19px; margin:0 auto; 
	border-radius:50%; background:#6de; z-index:100; opacity:0.8; 
 filter: alpha(opacity=80);} /* For IE8 and earlier */
.totop:hover {opacity:1;
 filter: alpha(opacity=100);} /* For IE8 and earlier */
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#fff; width:3px; height:9px;}
.totop i:before {
 -ms-transform: translate(-2px, 0) rotate(45deg); /* IE 9 */
 -webkit-transform: translate(-2px, 0) rotate(45deg); /* Chrome, Safari, Opera */
 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);
}

form {margin:30px 0 0;}
select {height:24px; border:0; padding:0 10px 2px; margin-bottom:12px; border-radius:4px;}
textarea, input.zeile {width:100%; padding:10px; margin:0 auto 12px; border:0 none; border-radius:4px;
	background:#fff; color:#6c7464; font-size:16px; line-height:24px; font-weight:300;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
	-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
textarea {height:auto; min-height:200px; resize:vertical;}
input.zeile {height:50px;}

.zeile:focus::-webkit-input-placeholder {color:transparent;}
.zeile:focus::-moz-placeholder {color:transparent;}
.zeile:-moz-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:-moz-placeholder {color:transparent;}

input.honey {visibility:hidden; display:none;}

input.checky {display:none;}
input.checky + label span {position:relative; display:inline-block; margin:-2px 10px 0 0; vertical-align:middle; cursor:pointer;
width:25px; height:25px; background:#fff; border-radius:5px;}
input.checky:checked + label {position:relative; cursor:pointer;}
input.checky:checked + label span {position:relative; box-shadow:inset 0px 0px 0px 2px #fff;}
input.checky:checked + label span::after {position:absolute; left:1px; top:-1px; opacity:1; content:"✔"; color:#8cd; font-size:24px; font-weight:700; text-align:center;}

select, textarea, input.zeile, input.checky + label span {border-top:1px solid #ddd; border-left:1px solid #ddd;}

input.button, a.button, a.goldbutton {width:max-content; max-width:80%; height:auto; padding:12px 30px; margin:30px auto; cursor:pointer; display:block;
font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-weight:600; font-size:20px; line-height:28px; border:0 none; text-decoration:none;}
input.button, a.button {border-radius:10px; color:#fff; background:#6de; background-image:linear-gradient(#8ff, #6de);}
input.button:hover, a.button:hover {background-image:linear-gradient(#aff, #6de);}
a.goldbutton {color:#983; text-shadow: 1px 1px #fea; background:#db6; background-image:linear-gradient(#ffb 20%, #cb4); 
border-bottom:1px solid #bba; border-right:1px solid #cba; border-top-left-radius:15px; border-bottom-right-radius:15px;}
a.goldbutton:hover {background-image:linear-gradient(#ffb 48%, #dc5);}

.button br {display:none;}
a.goldbutton.leftbutton {margin-left:0;}

/*///////////////////// IMAGE LIGHTBOX /////////////////////////*/

#imagelightbox {
cursor:pointer; position:fixed; z-index:202;
-ms-touch-action: none; touch-action: none;
-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); /* 50 */
box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); /* 50 */
}
#imagelightbox-overlay {
background-color:#faf7fa; background-color:rgba(255,255,255,.9);
position:fixed; z-index:201; top:0; right:0; bottom:0; left:0;
}
#imagelightbox-loading, #imagelightbox-loading div {border-radius:50%;}
#imagelightbox-loading {
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
background-color:#a95; background-color:rgba(170,153,85,.6);
position:fixed; z-index:203; top:50%; left:50%; 
padding:0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
}
#imagelightbox-loading div {
width: 1.25em; /* 20 */
height: 1.25em; /* 20 */
background-color: #faf7fa;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading {
from { opacity: .5;	-webkit-transform: scale( .75 ); }
50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
from { opacity: .5;	transform: scale( .75 ); }
50%	 { opacity: 1;	transform: scale( 1 ); }
to	 { opacity: .5;	transform: scale( .75 ); }
}

/*///////////////////// RESPONSIVE ////////////////////*/

@media (max-width: 960px) { 
.navi {padding:0; text-transform:none;}
h5 br {display:none;}
}

@media (max-width: 860px) { 
p, li, textarea, input.zeile {font-size:14px; line-height:22px;}
h1 {font-size:30px; line-height:38px;}
h2 {font-size:36px; line-height:42px; padding:20px 0;}
h3 {font-size:30px; line-height:38px; margin:18px 0;}
h4 {font-size:22px; line-height:30px; margin:18px 0 0 0;}
h5 {font-size:18px; line-height:28px;}
h6 {margin:10px 0 0;}
input.button, a.button, a.goldbutton {font-size:18px; line-height:24px;}
.bigspace {padding:40px 0;}
.gallery li {width:30%;}
.halb, .drittel, .w100 {width:100%; margin:0 auto; padding:0; float:none;}
.floatleft, .floatright {float:none; margin:0 auto; padding:0;} 
.totop {bottom:10px; right:10px; opacity:0.3; filter:alpha(opacity=30);}
}
@media (max-width: 500px) { 
body { 
-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;
}
h4,h5,h6,a {hyphens: none;}
.button br {display:block;}
.gallery li {width:48%;}
}
@media (max-width: 360px) { 
input.button, a.button, a.goldbutton {padding:12px 20px;}
.nodis {display:none;}
.gallery li {width:90%;}
}