@charset "utf-8";

@font-face {
  font-family: "Syncopate";
  src: url("fonts/Syncopate-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Syncopate-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Syncopate-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Syncopate-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Syncopate-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Syncopate-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "RubikDirt";
  src: url("fonts/RubikDirt-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/RubikDirt-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/RubikDirt-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/RubikDirt-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/RubikDirt-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/RubikDirt-Regular.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}
@font-face {
  font-family: "Mulish";
  src: url("fonts/Mulish-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Mulish-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Mulish-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Mulish-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Mulish-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Mulish-Regular.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

body,html { height:100%;margin:0;padding:0 }
body { font-family:'Mulish',sans-serif;font-size:16.5px;line-height:27px;min-height:100vh;color:#315151;/*-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto*/ }
button { background:none; border:none }
.menu-button { position:fixed; z-index:1000; top:20px; right:20px; width:32px; height:32px }
.schnecke { position:fixed; z-index:10; top:0; right:15vw; height:100vh; width:48.88vh; background:url('images/Bassonetic_Bassschnecke_web.webp') no-repeat; background-size:cover }
.schnecke::after { content:''; position:absolute; height:100vh; width:15vw; right:-15vw; background-color:#516e6d }
.menu-container { display:none; position:absolute }

.content-header { position:fixed; z-index:5; top:0; width:100%; height:67px; border-bottom:8px solid #516e6d; background-color:#fff }
.content-header::after { content:''; position:absolute; z-index:4; bottom:-58px; width:100%; height:50px; background-color:#fff }
h1 { position:relative; z-index:6; width:620px; margin:40px calc(100vw * 0.24 - 100px) 0; padding-left:10px; font-family:'RubikDirt'; font-size:68px; font-weight:normal; background-color:#fff }
h2 { font-family:'RubikDirt'; font-size:30.6px; font-weight:normal }
img { max-width:615px; box-shadow:3px 3px 5px rgba(0,0,0,0.5) }
.braun { color:#BC7513 }
.grau { color:#598081 }
.grgruen { color:#315151 }
.h1-sub { display:block; margin-top:20px; font-family:'Syncopate'; font-size:34.4px }
.content-block { position:relative; z-index:2; width:620px; padding-left:10px; margin:0 calc(100vw * 0.24 - 100px); background-color:#fff; overflow:auto }
.content-block.flex { margin-bottom:50px }
.content-block.flex h2 { width:100%; margin:10px 0 20px }
.content-block.flex div { width:300px; margin-bottom:5px }
main { margin-bottom:10px }
main section:first-of-type .content-block { margin-top:130px }
section { padding:20px 0 0 }
section.first p:first-of-type { font-size:20px }
section.bg-braun { color:#fff; background-color:#BC7513 }
section.bg-braun .content-block, section.bg-hellbraun .content-block { width:640px; background:none }
section.bg-hellbraun { padding-bottom:30px; background-color:#E1A332 }
section.bg-hellbraun p { color:#000 }
section.playal { padding-bottom:30px }
.playal { margin-bottom:0px }
.playal .content-block { margin-bottom:0 }
.syncopate { margin-top:0; font-family:'Syncopate'; font-size:22.36px }
h1.office { margin:40px 0 0; padding:0 }
.offc h2 { margin:35px 0 5px; font-size:26px; font-family:'Mulish',sans-serif; }
.offc h3 { margin:0; font-size:1em }
.offc p { margin-top:0 }
.offc a { color:#315151 }

.wb-strong { display:block; margin-top:-2px }
a.button { display:block; margin-left:220px; color:#fff; border:2px solid #fff; padding:5px 0; text-align:center; text-decoration:none; font-family:'RubikDirt';font-size:30.6px; font-weight:normal  }
a.button.wide { margin-left:0; width:615px  }
a.button.wide.braun { margin:15px 0; color:#BC7513; border-color:#BC7513  }
a.button.wide.gruen, a.button.narrow.gruen { margin:15px 0; color:#598081; border-color:#598081  }
a.button.narrow { width:290px }
a.button:hover, #close:hover, footer a:hover, .offc a:hover, .to-top:hover { opacity:0.7 }
.align-left { float:left; width:200px; margin-right:20px }
.img-grid { padding:12px 40px 0 0 }
.img-grid img { width:290px; margin-bottom:20px }
.img-grid img:hover { cursor:pointer }
.img-grid div { width:320px; margin:-5px 0 20px; hyphens:auto }
.scnd div { margin:15px 0 10px }
#close { position:absolute; top:5vh; right:5vw; width:40px; height:40px; background-image:url('images/Close_Icon.svg'); background-size:40px; cursor:pointer }
footer { height:40px; line-height:40px; color:#fff; background-color:#315151 }
footer .content-block { background-color:#315151 }
footer a { margin-left:30px; color:#fff; text-decoration:none; float:right }
.fullimg { position:fixed; z-index:100; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.8); padding:5vh 0; text-align:center; display:none }
.fullimg img { max-width:90vw; max-height:90vh }
.loading { position:fixed; z-index:120; left:calc(50% - 40px); top:calc(50% - 40px); height:80px; width:80px; display:none }
.loading img { height:80px; width:80px; box-shadow:none }
.to-top { position:fixed; z-index:200; right:50px; bottom:50px; width:45px; height:45px; background:#fff url(images/Pfeil_auf.svg) no-repeat center; border-radius:23px; cursor:pointer; display:none }

.flex { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-justify-content:space-between; -webkit-justify-content:space-between; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; 	flex-wrap:wrap }
.mt0 { margin-top:0 !important }
.mt20 { margin-top:20px !important }
.mt60 { margin-top:60px }
.mb10 { margin-bottom:10px }
.mb30 { margin-bottom:30px !important }

.schnecke_mobil { display:none }

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px) {
	.content-header { height:50px; width:100%; margin:0; padding-left:0; border-bottom:6px solid #516e6d }
	.content-header::after { height:5px; bottom:-11px }
	.content-block { width:94%; margin:0 3%; padding-left:0 }
	h1 { width:auto; margin:16px 3%; padding-left:0; font-size:11vw; background:none }
	.h1-sub { display:none }
	h2 { font-size:6vw; margin-bottom:5px }
	main section:first-of-type .content-block { margin-top:40px }
	.syncopate { font-size:18px }
	.mt60 { margin-top:40px }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px)
and (orientation : portrait) {
	.schnecke { display:none }
	.schnecke-mobil { display:block; position:fixed; z-index:10; bottom:0; height:40vh; width:100vw; background:url('images/Bassonetic_Bassschnecke_portrait.webp') no-repeat bottom; background-size:100vw; pointer-events:none }
	img { max-width:94vw }
	.bottom { height:200px }
	a.button.wide { width:100%; box-sizing:border-box; font-size:6vw }
	.align-left { margin:0 0 20px; float:none; width:auto }
	section.bg-braun .content-block, section.bg-hellbraun .content-block { width:94% }
	a.button { margin:0 0 40px 0 }
	.img-grid { padding-right:0 }
	.img-grid img { width:100% }
	footer { padding-bottom:250px }
	.to-top { right:auto; left:3vw; bottom:3vw }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px)
and (orientation : landscape) {
	h1 { font-size:7vw }
	h2 { font-size:4vw }
	.schnecke { right:0 }
	.content-block { width:64% }
	img { width:65vw }
	.to-top { right:3vw; bottom:3vw }
	section.bg-braun .content-block, section.bg-hellbraun .content-block { width:65% }
	a.button, a.button.wide { width:94%; margin-left:0; font-size:4vw }
	footer .content-block { margin:0; padding:0 3vw }
	footer a { margin:0 30px 0 0; float:none }
}