/* CSS Document */

/* dosis-regular - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/dosis-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/dosis-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/dosis-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/dosis-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/dosis-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/dosis-v12-latin-regular.svg#Dosis') format('svg'); /* Legacy iOS */
}
/* dosis-700 - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/dosis-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/dosis-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/dosis-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/dosis-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/dosis-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/dosis-v12-latin-700.svg#Dosis') format('svg'); /* Legacy iOS */
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 	margin: 0; padding: 0; border: 0;  font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* {margin: 0; padding: 0; }
.clear {overflow:hidden; clear: both;}
.trenner {overflow:hidden; clear: both;border-bottom: 1px solid #ccc;}
* html .clear {height:1%}
img {border: none; max-width: 100%; height: auto;}

body { font-family: 'Dosis', sans-serif; font-weight: 400; font-size: 100%; color: #000; text-align: center; }
strong, b { font-weight: 700; }

/********************************
   Weiche Übergänge
********************************/
#navigation ul li a, #fuss ul li a, #ref1 a, #ref2 a, #kontaktinhalt a { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }

/********************************
   Kopf
********************************/
#logo { position: relative; width: 578px; height: 176px; margin: 40px auto 20px auto; }

/********************************
   Navigation
********************************/
#navigation { position: relative; width: 1120px; margin: 0 auto 20px auto; height: auto; overflow: visible; }
#navigation ul { display: table; margin: auto; }
#navigation ul li { float: left; display: inline; line-height: 1.4em; }
#navigation ul li a { font-size: 1.4em; color: #666; text-decoration: none; padding: 5px 40px; }
#navigation ul li a:hover { color: #91c024; }
#navigation ul li.aktiv a { color: #91c024; }
#ref1 { position: absolute; top: 27px; right: 183px; font-size: 0.6em; }
#ref2 { position: absolute; top: 27px; right: 107px; font-size: 0.6em; }
#ref1 a, #ref2 a { text-decoration: none; color: #666; }
#ref1 a:hover, #ref2 a:hover { color: #91c024; }
#ref1 a.aktiv, #ref2 a.aktiv { color: #91c024; }

/********************************
   Inhalt
********************************/
#inhalt { position: relative; width: 1120px; height: 712px; margin: auto; }
#inhalt p { margin: 0 0 20px 0; }
#inhalt.startseite { background-image: url(../bilder/hg_startseite.jpg); }
#inhalt.qualifizierung { background-image: url(../bilder/hg_qualifizierung.jpg); }
#inhalt.angebot { background-image: url(../bilder/hg_angebot.jpg); }
#inhalt.referenzen { background-image: url(../bilder/hg_referenzen.jpg); }
#inhalt.geschaeftskunden { background-image: url(../bilder/hg_referenzen_geschaeftskunden.jpg); }
#inhalt.kontakt { background-image: url(../bilder/hg_kontakt.jpg); }
#inhalt.impressum { background-image: url(../bilder/hg_kontakt.jpg); background-position: bottom; background-color: #636466; height: auto; background-repeat: no-repeat; padding-bottom: 50px; }
#startseitebox { position: absolute; top: 460px; text-align: center; color: #fff; font-size: 1.2em; left: 0; width: 100%; height: auto; line-height: 1.4em; }
#qualifizierungbox1 { position: absolute; top: 140px; text-align: left; color: #333; font-size: 1em; left: 90px; width: 450px; height: auto; line-height: 1.4em; }
#qualifizierungbox2 { position: absolute; top: 140px; text-align: left; color: #333; font-size: 1em; right: 90px; width: 450px; height: auto; line-height: 1.4em; }
#qualifizierungclaim { position: absolute; top: 225px; right: 25px; width: 353px; height: 343px; line-height: 1.4em; background-image: url(../bilder/qualifikation_stoerer.png); text-align: left; }
#qualifizierungclaim p { padding: 58px 0 0 95px; font-size: 1.31em; line-height: 1.5em; color: #666; }
#angebot1 { position: absolute; top: 40px; left: 40px; width: 460px; text-align: left; color: #fff; line-height: 1.4em; }
#angebot2 { position: absolute; top: 40px; right: 40px; width: 460px; text-align: left; color: #fff; line-height: 1.4em; }
#angebot1 h2, #angebot2 h2 { margin: 0 0 30px 0; }
#angebot1 h1, #angebot2 h1 { margin: 0 0 30px 0; font-size: 1.2em; text-transform: uppercase; }
#angebot1 ul li, #angebot2 ul li { list-style: disc; margin: 0 0 0 20px; }
#referenz1 { position: absolute; color: #fff; font-size: 0.85em; line-height: 1.4em; top: 60px; left: 10px; width: 350px; height: auto; }
#referenz2 { position: absolute; color: #fff; font-size: 0.85em; line-height: 1.4em; top: 437px; left: 12px; width: 350px; height: auto; }
#referenz3 { position: absolute; color: #fff; font-size: 0.85em; line-height: 1.4em; top: 56px; right: 38px; width: 350px; height: auto; }
#referenz4 { position: absolute; color: #fff; font-size: 0.85em; line-height: 1.4em; top: 390px; right: 40px; width: 400px; height: auto; }
#referenz1 .kleiner, #referenz2 .kleiner, #referenz3 .kleiner, #referenz4 .kleiner { font-size: 0.75em; }
#referenzg1 { position: absolute; color: #fff; width: 70%; top: 40px; padding: 0 15%; line-height: 1.4em; text-align: left; font-size: 1.2em; }
#referenzg2 { position: absolute; color: #666; width: 80%; top: 180px; padding: 0 5% 0 15%; line-height: 1.4em; text-align: left; font-size: 1em; }
#referenzg2 .spalte { float: left; display: inline; width: 25%; }
#kontaktinhalt { color: #fff; text-align: left; padding: 40px 60px 0 60px; line-height: 1.4em; font-size: 0.9em; }
#kontaktinhalt h1 { margin: 0 0 20px 0; font-size: 1.25em; }
#kontaktinhalt a { color: #fff; }
#kontaktinhalt a:hover { color: #91c024; }

/********************************
   Fuss
********************************/
#fuss { position: relative; margin: 10px auto 30px auto; background-color: #636466; overflow: hidden; max-width: 1120px; }
#fuss ul { position: relative; margin: 0 0 0 20px; }
#fuss ul li { float: left; display: inline; }
#fuss ul li a { color: #fff; font-size: 0.875em; text-decoration: none; padding: 10px 15px; display: block; }
#fuss ul li a:hover { color: #000; }
#fuss ul li.aktiv a { color: #000; }