/*********************************
** Written by Leonhard Schüller **
**      LMS Sound Service       **
*********************************/
@font-face {
    font-family: 'Caudex';
    src: url('fonts/caudex-regular-webfont.woff2') format('woff2'),
         url('fonts/caudex-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}
body,div,span,h1,h2,h3,h4,h5,h6,p,a,img,ol,ul,li { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; }
body { font: normal 15px/27px "Raleway",sans-serif; letter-spacing: 0.5px; color:#3c3c3c; background-color:#ffffff; }
#startseite h1 { display: none; }
noscript h6 { margin: 50px 25%; padding: 4px; text-align: center; color: red; }
h2 { padding: 25px 0 25px 130px; }
h3 { font-weight: normal; }
ul { list-style-type: none; }
a { text-decoration: none; color:#3c3c3c; }
a:hover { text-decoration: underline; }
a.rauf { position: absolute; right: 0; top: 14px; padding: 25px; }
a.ziel { display: block; }
hr { display: inline-block; width: 10px; margin: 0 10px; border: none; border-bottom: 1px solid #3c3c3c; }
.klein h2 { padding-left: 10%; }

/* Startseite */
div#startseite { position: relative; overflow: hidden; }
div#navigation { position: absolute; width: 100%; height: 100%; top: 10%; text-align: center; }
div#nlinks a { display: inline-block; height: 26px; overflow: hidden; margin: 0 32px; }
div#nlinks a:hover img { margin-top:-26px; }
a#btn_about { width: 135px; }
a#btn_about img { }
a#btn_leistungen { width: 166px; }
a#btn_leistungen img { margin-left:-135px; }
a#btn_technik { width: 116px; }
a#btn_technik img { margin-left:-301px; }
a#btn_kontakt { width: 121px; }
a#btn_kontakt img { margin-left:-417px; }
img#logo { margin:-35px 30px; }
img#wortmarke { margin-top: 15%; max-width: 95%; }
img.bg_image { position: absolute; z-index:-1; }
.gross div#startseite { overflow: hidden; }
.gross div#nlinks { white-space: nowrap; }
.gross div#nlinks a { margin: 0 40px; }
.klein div#nlinks img#logo { display: none; }
.klein div#nlinks span { display: inline-block; }

/* 2020: Neue Links und Inhalte */
#subnavigation { position: absolute; bottom: 28%; width: 100%; padding-left: 33px; text-align: center; }
#subnavigation li { display: inline-block; margin: 0 6px; }
.kontaktspalte { float: left; }
.kontaktspalte a:before { content: "> "; }

/* Über uns */
div#about { position: relative; width: 100%; overflow: hidden; }
div#about_info { position: absolute; bottom: 10%; width: 100%; padding: 25px 0; background: transparent url(img/blind80.png) 0 0 repeat; z-index: 1; }
div.zweispaltig p{ vertical-align: top; margin: 0 50px 20px 0; }
div#about_info a.rauf { top: 36px; }
div#about hr { vertical-align: middle; }
.klein div.zweispaltig { margin-left: 10%; }
.gross div.zweispaltig { margin-left: 130px; }
.klein div#about_info { bottom: 0; }
.gross div.zweispaltig p { display: inline-block; width: 40%; }
.klein div.zweispaltig p { width: 80%; }

/* Leistungen */
div#leistungen { position: relative; color:#ffecab; background:#78776e url(img/bg_leistungen.png) 0 0 repeat; overflow: hidden; }
div#bg_leistungen { width: 100%; height: 100%; background: transparent url(img/scanner.png) 640px 349px no-repeat; }
div#leistungen h2 { background-color:#78776e; color:#d0cfc7; }
div#leistungen h3 { font-variant: small-caps; white-space: nowrap; width: 0; }
div#leistungen hr { border-color:#d0cfc7; }
div#leistungen ul { padding: 64px 0 80px 200px; display: block; overflow: hidden; }
div#leistungen li { font: normal 32px "Caudex",serif; cursor: pointer; margin: 22px 0; }
div#leistungen li span { font-size: 20px; }
div#leistungen li p { display: none; margin: 20px 32px; font-size: 16px; max-width: 380px; }
div.toggle_icon { display: inline-block; width: 20px; height: 20px; overflow: hidden; background: transparent url(img/toggle_icon.png) 0 0 no-repeat; }
.klein div#bg_leistungen { background-image: none; }
.klein div#leistungen ul { padding-left: 10%; }

/* Technik */
div#technik { position: relative; background-color: transparent; overflow: hidden; }
div.technik_bg { position: absolute; width: 100%; z-index:-1; }
div#technik_bg_top { top: 0; height: 90px; background-color:#e0dfd9; }
div#technik_bg_middle { top: 90px; height: 360px; background-color:#e8e7de; }
div#technik_bg_bottom { top: 450px; height: 100%; background-color:#9d9172; }
div#technik_bg_muster { top: 0; height: 100%; background: transparent url(img/bg_technik.png) 0 0 repeat; }
div#fortschritt { position: absolute; display: none; right: 143px; top: 122px; width: 144px; height: 18px; overflow: hidden; }
div.jcarousel-container { margin: 35px 0 210px; }
div.jcarousel-clip { overflow: hidden; width: 100%; }
ul#features { font: normal 14px/21px "Caudex",serif; display: none; }
ul#features li { padding-bottom: 20px; display: none; }
ul#features h3 { font-size: 34px; line-height: 38px; margin-bottom: 20px; color:#434343; }
ul#features p { min-width: 200px; max-width: 360px; margin-right: 40px; margin-bottom: 2px; padding: 10px 25px; color:#ffecab; background-color:#9C9171; }
ul#maschinen { margin-left: 210px !important; display: none; height: 497px; }
ul#maschinen img { cursor: url(img/pause.png),wait; }
div#alt_slide { font: normal 15px/22px "Caudex",serif; padding: 80px 0 10px 10%; }
div#alt_slide div { margin-left: 33%; color:#434343; font-size: 13px; }
div#alt_slide h3 { font-size: 24px; }
div#alt_slide img { margin-top:-74px; }
div#alt_slide p { max-width: 450px; padding: 20px 120px 20px 40px; margin-bottom: 20px; color:#ffecab; background-color:#9C9171; }
div.slide ul#features { position: absolute; display: block; height: 200px; cursor: normal; left: 770px; top: 380px; }
div.slide div#alt_slide { display: none; }
.jcarousel-next { position: absolute; left: 770px; top: 160px; width: 17px; height: 40px; cursor: pointer; background: transparent url("img/next.png") no-repeat 0 0; }
.jcarousel-prev { position: absolute; left: 148px; top: 160px; width: 17px; height: 40px; cursor: pointer; background: transparent url("img/prev.png") no-repeat 0 0; }

/* Kontakt */
div#kontakt { position: relative; min-height: 500px; overflow: hidden; }
div#kontakt img.bg_image { min-height: 500px; min-width: 741px; }
div#milk { position: absolute; top: 90px; width: 100%; height: 450px; opacity: 0.55; filter: alpha(opacity=55); background-color:#ffffdf; z-index:-1; }
div#kontakt h2 { margin-top: 130px; }
div#kontakt p { padding: 18px 0 0 210px; font-size: 16px; }
code { padding-right: 2px; }
.klein div#kontakt p { padding-left: 10%; }

/*******************************************
** 2020: Seiten Impressum und Datenschutz **
*******************************************/
.extra { background: transparent url(img/bg_home.jpg) fixed center / cover; }
.extra .content { max-width: 800px; padding: 3.125%; margin: 80px auto; }
.extra h1 { font-size: 38px; }
.extra #logo { margin-top: -38px; }
.extra h2 { padding: 0; margin: 120px 0 40px; }
.extra h3 { margin: 35px 0 5px; }
.extra h4 { margin: 20px 0 10px; }
.extra ul { list-style-type: disc; padding-left: 15px; }
.extra article a { text-decoration: underline; }
.backtohome { margin-top: 35px; }
.backtohome a:before { content: "> "; }
#direktwerbung { padding: 5px 10px; border: 1px solid #878787; margin-top: 15px; }
#direktwerbung h4 { margin-top: 0; }

/************************************
** 2020: rudimentäre media queries **
************************************/
@media only screen and (max-width: 800px) {
#subnavigation { bottom: 10%; padding-left: 0; }
div#kontakt { min-height: 740px; }
}