/* cmsms stylesheet: Wedding Music 2026 modified: Dienstag, 10. März 2026 22:07:30 */

html { background: #F0E8D7 url(/img/bg.png); color: #37393F; }
body {
font-family: "adobe-garamond-pro", serif; font-size: 16px; line-height: 22px;
background: #F0E8D7 url(/img/bg.png); color: #37393F;
margin: 0; padding: 0;
-webkit-text-size-adjust: none;
}

p { margin: 0 0 11px 0 }
a, a:hover { color: #37393F; text-decoration: none; }
a img { border: none }
a:focus { outline: none }
a:hover { color: #af2a2a; -webkit-transition: color linear 0.1s; -moz-transition: color linear 0.1s; }
h1 { font-family: "adobe-garamond-pro", serif; font-style: italic; font-weight: normal; font-size: 20px; line-height: 25px; margin: 0 0 11px 0; }
h2 { font-family: "adobe-garamond-pro", serif; text-transform: uppercase; font-weight: 600; font-size: 14px; margin: 0 }
.button, .button a { height: 25px; display: inline; background: #858575; color: #F0E8D7; padding: 2px 3px; border-radius: 3px }
.button a:hover { color: #24325b; -webkit-transition: color linear 0.1s; -moz-transition: color linear 0.1s; }

em { color: #37393F }

table { vertical-align: top; border: none; border-collapse: collapse; width: 640px; }
tr, td { padding: 2px; margin: 0 }
td { width: 156px }

#container { margin: auto; width: 980px; background: #F0E8D7; padding-bottom: 40px }
#header { position: relative; height: 250px; background: #000 url('/uploads/images/header/home.jpg') no-repeat; background: black; background-position: right -100px center; margin: 0; overflow: hidden }
#header p { margin: 0 }

#header.header-de, #header.header-en { background: url('/uploads/images/header/home.jpg') }
#header.header-kontakt, #header.header-contact { background: url('/uploads/images/header/kontakt.jpg') }
#header.header-infos, #header.header-info { background: url('/uploads/images/header/infos.jpg') }
#header.header-referenzen, #header.header-references { background: url('/uploads/images/header/referenzen.jpg') }



#logo { position: absolute; top: 100px; left: 35px; margin: 10px; z-index: 10 }

/*
*html #logo img { behavior: url(/lib/pngfix/iepngfix.htc) }
*/

#navi { margin: 40px 50px 0 50px; padding: 0 30px; height: 25px; }
#navi ul { list-style: none; margin: 0; padding: 0; font-size: 15px; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; }
#navi ul li { display: inline; float: left; margin: 0 25px 0 0; padding: 0; }
#navi ul li a { text-decoration: none; color: #858575 }
#navi ul li a.currentpage, #navi1 ul li a.activeparent { color: #24325b }
#navi ul li a:hover { color: #24325b; -webkit-transition: color linear 0.3s; -moz-transition: color linear 0.3s; }

#subnavi { margin: 1px 20px 40px 20px; padding: 0 30px; height: 25px; }
#subnavi ul { list-style: none; margin: auto; padding: 0 30px; text-transform: capitalize; font-weight: 400; letter-spacing:1px; border-top: 1px solid #858575; }
#subnavi ul li { display: inline; float: left; margin: 7px 20px 0 0; padding: 0; }
#subnavi ul li a { text-decoration: none; color: #858575 }
#subnavi ul li a.currentpage, #navi ul li a.activeparent { color: #24325b }
#subnavi ul li a:hover { color: #24325b; -webkit-transition: color linear 0.3s; -moz-transition: color linear 0.3s; }

#lang { float: right; margin: -4px 0 0 0; padding: 0; }
#lang ul { list-style: none; margin: 0; padding: 0; }
#lang ul li { margin: 0; }
#lang ul li a, #lang ul li a:hover { text-decoration: none; }
#lang ul li a.active { color: #24325b }
#lang ul li:before { content: "|"; margin: 0 10px; color: #37393F; font-weight: 400 }
#lang ul li:first-child:before { content: none; }
*html #lang ul li { margin: 0 0 0 20px }
*+html #lang ul li { margin: 0 0 0 20px }
#lang { list-style: none; margin: 0; padding: 0; font-size: 15px; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; }
#lang a { text-decoration: none; color: #858575 }

#title { margin: 0 80px 10px 80px; width: 700px }
#col1 { display: inline; width: 330px; margin: 0 40px 0 80px; float: left }
#col2 { display: inline; width: 330px; margin: 0; float: left }
#player { clear: both; display: block; margin: 20px 80px 0 80px }
#footer { margin: 5px auto; padding: 0; color: #F0E8D7; width: 980px; 
letter-spacing: 1px; font-size: 11px; white-space: nowrap; text-align: center; text-transform: uppercase; }
#footer a { color: #F0E8D7 }


#audioplayer { margin: 0 0 20px 0; width: 300px; padding: 20px; background: #C6C6B9; text-align: center }
#audioplayer ol { clear: both; list-style: none; padding: 0; margin: 0 0 0 20px; color: #37393F; text-align: left }
#audioplayer ol li { position: relative; margin: 0; padding: 2px 0 2px 10px; cursor: pointer }
#audioplayer ol li.playing { color: #24325b; text-decoration: none; font-weight: bold }
#audioplayer ol li a { color: #37393F; text-decoration: none } 
#audioplayer ol li.playing a { color: #24325b; text-decoration: none } 
#audioplayer ol li.playing:before { content: '»'; width: 20px; font-size: 25px; margin: -3px 0 0 0; position: absolute; left: -12px; color: #37393F }

.audiojs { background: none; box-shadow: none; border: none; width: 290px; float: left; margin: 0 20px 0 0 }
.audiojs .play-pause { height: 25px; padding: 0; margin: 0 5px 0 0; border: none; }
.audiojs p { margin: 0; height: 25px; }
.audiojs .scrubber { height: 8px; background: #F0E8D7; width: 260px; margin: 7px 0; padding: 0; border: none; }
.audiojs .progress { height: 8px; background: #24325b; margin: 0; padding: 0 }
.audiojs .loaded { height: 8px; background: #858575; margin: 0 }
.audiojs .time { display: none; float: left; height: 20px; line-height: 20px; color: #858575; border: none; }


form { width: 300px; }
input, select, textarea { font: normal 16px "adobe-garamond-pro"; line-height: 20px; padding: 2px 4px; margin: 5px 0 0 0; color: #37393F; background: #C6C6B9; border-radius: 0; border: none; }
input[type=text], input[type=email], textarea { width: 280px }
select { -webkit-appearance: none; }
input::-webkit-input-placeholder { color: #37393F }
label { background: none; display: block; margin-top: 15px }

input#place { margin: 15px 0 10px 0 }
.events label { margin: 15px 0 3px 0 }
.events div { float: left; display: inline; margin: 2px 0 0 0 }
.events .cms_checkbox { clear: both; float: left; display: inline; margin: 1px 5px 0 10px; background: none }
.events div label { float: left; display: inline; width: 110px; margin: 2px 0 0 0 }
textarea { margin: 15px 0 0 0 }
.submit input { min-width: 50px; margin 10px 0 0 0; padding: 2px 6px; height: 25px; background: #858575; color: #F0E8D7; -webkit-appearance: none; border-radius: 3px }
.submit input:hover { cursor: pointer; color: #24325b; -webkit-transition: color linear 0.1s; -moz-transition: color linear 0.1s; }

input:focus, select:focus, textarea:focus, button:focus { outline: none }
.error_message { color: #900 }
.fb_invalid { overflow: hidden }




.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}












.desktop { display: block }
.mobile { display: none }

@media screen and (min-width:640px) {
#header { background-position: center !important }
}

@media screen and (max-width:639px) {
.desktop { display: none }
.mobile { display: block }

#header { width: 100vw; margin-bottom:20px; background-position: right !important }
#logo { left: 0; top: 120px }
#logo img { width:280px }

#lang { position: absolute; top: 15px; right: 15px; z-index: 20; color: #F0E8D7; }
#lang a { text-decoration: none; color: #858575 }

#navi, #subnavi { margin: 5px 15px; padding: 0; height: auto }
#navi ul, #subnavi ul { letter-spacing: 0.08em }

#navi ul li { float: none; display: inline-block; margin-right: 15px }
#navi ul li:last-child { margin-right: 0 }

#subnavi ul { padding: 7px 0 0 0; margin: 0; }
#subnavi ul li { float: none; display: inline-block; margin-top: 0 !important }

#subnavi { margin-bottom: 30px }

#container { width:auto; max-width: 100vw }
#title { width: calc(100vw - 30px); margin: 15px }
#col1, #col2 { display: block; width: calc(100vw - 30px); margin: 0; padding: 0 15px; float: none; }
#footer { width: calc(100vw - 30px); padding: 15px 0 }
}