/*** Allgemeines ***********************************************************/

/*
 * Seitenstil
 */

@font-face {
   font-family: 'Roboto';
   src: url('Roboto-Regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Roboto';
   src: url('Roboto-Bold-webfont.woff') format('woff');
   font-weight: bold;
   font-style: normal;
}
@font-face {
   font-family: 'Roboto';
   src: url('Roboto-Italic-webfont.woff') format('woff');
   font-weight: normal;
   font-style: italic;
}

@font-face {
   font-family: 'Roboto Condensed';
   src: url('RobotoCondensed-Regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Roboto Condensed';
   src: url('RobotoCondensed-Italic-webfont.woff') format('woff');
   font-weight: normal;
   font-style: italic;
}
@font-face {
   font-family: 'Roboto Condensed';
   src: url('RobotoCondensed-Bold-webfont.woff') format('woff');
   font-weight: bold;
   font-style: normal;
}

body {
        background: white url("hintergrund.jpg") repeat-y center top;
        font: normal 101%/normal 'Roboto Condensed',sans-serif;
        text-align: center;
}
#wrapper {
        width: 950px;
        margin: 0 auto;
}
.only-phone, .only-tablet {
        display: none;
}

/*
 * Links
 */
a {
        font-weight: bold;
        text-decoration: none;
        color: #27A;
}
a:hover {
        background-color: yellow;
}
a img, a {
        border: 0 none;
}
a.mail, a.link {
        background-position: 0 0;
        background-repeat: no-repeat;
}
a.mail {
        padding-left: 30px;
        min-height: 24px;
}
a.link {
        padding-left: 20px;
        min-height: 16px;
        background-image: url(www.png);
}
#inhalt h3 a.link {
        background-position: 0 4px;
}

/*
 * Diverses
 */
.rot {
        color: red;
}
p.mail {
        min-height: 24px;
}
.l {
        text-align: left !important;
}

/*
 * Kleine Navigation (Orteliste, Menü auf Statseite, unten auf den Seiten)
 */
.mininav {
        margin-top:2em;
        clear:both;
        text-align:center !important;
        font-size: x-small;
}


/*** Titelbereich **********************************************************/

#titel {
        font-family: 'Roboto Condensed',sans-serif;
        text-align: center;
        margin-bottom: 4em;
        font-size: 90%;
        color: #666;
    padding-left: 10em;
    padding-right: 10em;
}
#titel strong {
        font-weight: 600;
}

/*
 * Accessibility
 */
#titel h1, #inhaltslink {
        display: none;
}

/*
 * Motto und Einleitung
 */
#motto p {
        text-align: justify;
        font-size: 95%;
}

/*
 * Telefonnummern
 */
#titel p.telefon {
        font-size: 110%;
        font-weight: bold;
}

/*
 * Orte
 */
#titel .mininav a {
        font-weight: normal;
}

/*
 * E-Mail
 */
#titel p.mail a.mail {
        padding-top: 3px;
        padding-bottom: 10px;
}

/*** Sales *****************************************************************/

#saleslogo {
        margin: 1em 0;
        color: #056800;
        font: bold 14pt sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.15em;
}
.sales #inhalt .c {
        font-size: 115%;
}
body.sales {
        background-image: none;
}
body.sales #inhalt b, body.sales #titel a, body.sales #inhalt a, body.sales #inhalt h4 {
        color: #056800;
}
body.sales #titel a:visited, body.sales #inhalt a:visited {
        color: #045200;
}
body.sales #titel .tel { color: #333 }
body.sales #titel .tel span.tel { color: #056800 }


/*** Seiteninhalt **********************************************************/

#inhalt {
        font: normal 80% 'Roboto',sans-serif;
        /*width: 75%;*/
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        overflow: visible;
        padding: 0;
}

#inhalt {
        color: #777;
}
#inhalt h2, #inhalt h3, #inhalt h4 {
        color: #5F7BA4;
}
#inhalt h2 {
        font-weight: normal;
        font-size: 150%;
}
#inhalt h3 {
        font-weight: normal;
        font-size: 140%;
        text-align: left;
        margin: 3em 0 0 0;
}
#inhalt h3 strong {
        color: #666;
}
#inhalt h4 {
        font-size: 100%;
        font-weight: bold;
}
#inhalt p {
        text-align: justify;
        color: #777;
        font-size: 110%;
}
#inhalt .c, #inhalt .c p, #inhalt h2, #inhalt h3 {
        text-align: center;
}
#inhalt h2 small {
        color: #999;
}
#inhalt li {
        /*font-weight: bold;*/
        color: #777;
}
#inhalt .rot, #inhalt span.rot {
        color: #F00;
}
#inhalt ul {
        margin-top: 1em;
        margin-bottom: 1em;
        list-style: circle;
}
#inhalt p b {
        color: #000;
}
#inhalt .text {
        font-weight: bold;
}
#inhalt .text strong {
        color: #333;
}


/* Abstände */
#inhalt .vor0 { margin-top: 0 }
#inhalt .vor1 { margin-top: 1em }
#inhalt .vor2 { margin-top: 2em }
#inhalt .vor3 { margin-top: 3em }
#inhalt .vor4 { margin-top: 4em }
#inhalt .nach0 { margin-bottom: 0 }
#inhalt .nach1 { margin-bottom: 1em }
#inhalt .nach2 { margin-bottom: 2em }
#inhalt .nach3 { margin-bottom: 3em }
#inhalt .nach4 { margin-bottom: 4em }

/*** Orte ******************************************************************/

.orte #inhalt h3 {
        text-align: left;
        color: #666;
}
.orte #inhalt li {
        font-weight: normal;
        margin-bottom: 0.25em;
}
.orte #inhalt .fotos {
        float: right;
        margin:0 0 20px 20px;
}

/** Startseite **************************************************************/

body.startseite { background-image: none }

@media only screen and (min-width: 1024px) {
        .startseite #inhalt { margin-left: auto; margin-right: auto; width: 900px }
        .startseite #inhalt p { color: #888 }

        ul#baelle {
                margin: 2em auto;
                width: 800px; height: 294px;
                background: url(ball-hg.png) no-repeat 0 0;
                list-style: none;
                display: block;
                position: relative;
                font-family: 'Roboto Condensed',sans-serif;
        }
        ul#baelle li {
                display: block;
                list-style: none;
                position: absolute;
                top: 0; left: 0;
                font-size: 16px;
        }
        ul#baelle li small {
                font-size: 13px;
                color: #999;
                position: relative;
                top: -4px;
                font-weight: 600;
        }
        /* 1. Ball */
        ul#baelle #beratung {
                top: 65px;
                left: 40px;
                font-size: 130%;
        }
        ul#baelle #consulting {
                top: 105px;
                left: 50px;
        }
        /* 2. Ball */
        ul#baelle #knowhow {
                top: 110px;
                left: 400px;
        }
        ul#baelle #reporting {
                top: 160px;
                left: 380px;
        }
        /* 3. Ball */
        ul#baelle #produktbeschreibungen {
                top: 55px;
                left: 600px;
        }
        ul#baelle #sales {
                top: 125px;
                left: 620px;
        }
        ul#baelle #oeffentlich {
                top: 195px;
                left: 640px;
        }

        #inhalt #startseite_unten p { text-align: center; font-size: 80% }
}

/** Impressum ***********************************************************************/

#impressum {
        margin: 5em auto 4em auto;
}
#impressum p, #impressum h3 {
        text-align: center;
}
#impressum h2 {
        color: #666;
        margin-bottom: 0.5em;
}
#impressum h3 {
        margin-top: 0;
        font-size: 110%;
}
#disclaimer p {
        text-align: justify;
        font-size: 95%;
}

/** Produktbeschreibungen **************************************************/

.produktbeschreibungen #inhalt dl { margin-top: 0 }
.produktbeschreibungen #inhalt dl dt { color: #666; font-size: 115%; font-weight: bold }
.produktbeschreibungen #inhalt dl dd p + ul { margin-top: -1em }
.produktbeschreibungen #inhalt ul li, .produktbeschreibungen #inhalt ol li, .produktbeschreibungen #inhalt h3 { font-weight: normal }
.produktbeschreibungen #inhalt ul li, .produktbeschreibungen #inhalt ol li { margin-bottom: 0.75em }
.produktbeschreibungen #inhalt h3 { text-align: left }

/** Kontaktformular *******************************************************/

.kontaktformular {
        width: 66%;
        margin-left: auto;
        margin-right: auto;
}

/** Dienstleistungen-Block ************************************************/

#dienstleistungen h3 {
        text-align: left;
}
#dienstleistungen ul {
        font-size: 110%;
}

/** Media Query: Phone ****************************************************/

@media only screen and (max-width: 480px) {
        body {
                margin: 0;
                padding: 0;
                font: 300 24px/30px 'Roboto', sans-serif;
        }
        #inhalt {
                /*font: 300 14px/20px 'Roboto', sans-serif;*/
        }
        #inhalt p {
                font-size: inherit;
        }
        strong, a {
                font-weight: 500;
        }
        #wrapper {
                width: 100%;
                margin: 30px 0 0 0;
                padding: 0 0 0 0;
        }
        .hide-phone {
                display: none;
        }
        .only-phone, #inhaltslink {
                display: block;
        }
        #inhaltslink {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                background: #F0F0F0;
                margin: 0;
                padding: 0;
                box-shadow: 2px 0 5px rgba(33,33,33,.5);
                max-height: 30px;
                text-align: left;
        }
        #inhaltslink a {
                color: #000;
                font-size: 10px;
                background: none !important;
                padding-left: 10px
        }
        #titel, #inhalt {
                padding-left: 8px;
                padding-right: 8px;
        }
        #titel h2 {
                font-size: 18px;
                font-weight: 600;
                text-align: left;
                padding-left: 1.5em;
                text-indent: -1.5em;
                font: 14px/18px 400 'Roboto Condensed',sans-serif;
        }
        .startseite #titel {
                margin-bottom: 2em;
        }
        #motto p {
                line-height: 150%;
                font-size: 17px;
        }
        #motto p, #inhalt p {
                -moz-hyphens: auto;
                -o-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
        }
        #motto p strong {
                font-weight: 500;
        }
        #logo {
                text-align: left;
                margin-top: 0;
        }
        #logo.sticky {
                background: rgba(255,255,255,0.95);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                box-shadow: 0 5px 10px rgba(100,100,100,.5);
                margin-top: 0;
        }
        #logo.sticky img {
                margin-left: 8px;
        }
        #titel.sticky {
                padding-top: 140px;
        }
        #logo img {
                width: 100%;
                max-width: 300px
        }
        #titel p.telefon, .mininav, #titel p.mail {
                font-size: inherit;
                font-family: 'Roboto Condensed',sans-serif;
                font-weight: 400;
                margin-bottom: 0.25em;
        }
        #titel .mininav, #titel .mail {
                margin-top: 0;
        }
        .mininav {
                font-size: 15px;
                line-height: 30px;
        }
        ul#baelle {
                list-style: disc;
        }
        ul#baelle li {
                margin-bottom: 2em;
        }
        #startseite_unten p {
                font-size: 14px;
                line-height: 20px;
        }

        .kontaktformular {
                width: 100%;
        }
}

/** Media Query: Phone und Tablet *****************************************/

@media only screen and (max-width:1023px) {
        /* Dropdown-Menü */
        #nav-wrap {
                position: fixed;
                top: 0;
                right: 0;
                z-index: 10000;
        }
        #menu-icon {
                color: #FFF;
                width: 50px;
                height: 50px;
                background: rgba(200,200,200,.75);
                cursor: pointer;
                display: block;
                top: 0;
                right: 0;
                position: absolute;
                box-shadow: 2px 2px 5px rgba(33,33,33,0.25);
                z-index: 1000;
        }
        #menu-icon:before {
                content: "";
                position: absolute;
                left: 6px;
                top: 10px;
                width: 40px;
                height: 5px;
                background: #FFF;
                box-shadow:
                        0 11px 0 0 #FFF,
                        0 22px 0 0 #FFF;
        }
        #menu-icon:hover {
                background-color: rgba(150,150,150,.75);
        }
        #menu-icon.active {
                background-color: rgba(245,245,245,0.95);
        }
        #nav {
                position: absolute;
                top: 50px;
                right: 0px;
                z-index: 10000;
                padding: 5px;
                background: rgba(245,245,245,0.95);
                display: none; /* visibility will be toggled with jquery */
                box-shadow: 2px 2px 5px rgba(33,33,33,0.5);
                list-style: none;
                padding: 0;
                margin: 0;
                overflow-y: scroll;
                max-height: 100%;
        }
        #nav li {
                font: 300 24px/24px 'Roboto Condensed',sans-serif;
                list-style: none;
                margin: 0;
                padding: 15px;
                border-bottom: 1px solid #ddd;
        }
        #nav a {
                padding: 0;
                color: #666;
        }
        #nav a:hover {
                background: none;
                color: #000;
        }
}

/** Media Query: Tablet ***************************************************/

@media only screen and (min-width:481px) and (max-width:1023px) {
        #logo img {
                width: 300px !important;
        }
        .only-tablet {
                display: block;
        }
        #motto p, #inhalt p {
                -moz-hyphens: auto;
                -o-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
        }
        body {
                margin: 0;
                padding: 0;
                font: 300 24px/30px 'Roboto', sans-serif;
        }
        #wrapper {
                width: 100%;
                margin: 0;
                padding: 0;
        }
        #titel, #inhalt {
                padding-left: 5%;
                padding-right: 5%;
                font-family: inherit;
        }
        ul#baelle li {
                margin-bottom: 1em;
        }
        #titel .telefon {
                margin-bottom: 0;
        }
        #titel .mininav, #titel .mail {
                margin-top: 0;
                margin-bottom: 0.5em;
        }
        .mininav {
                font-size: 18px;
                line-height: 30px;
                font-family: 'Roboto Condensed',sans-serif;
                font-weight: 400;
        }
}

/** Media Query: Desktop ****************************************/

@media only screen and (min-width:1024px) {
        #logo img {
                width: 300px !important;
        }
}

@media only screen and (min-width:1024px) and (-webkit-min-device-pixel-ratio: 1.3),
                only screen and (min-width:1024px) and (-o-min-device-pixel-ratio: 13/10),
                only screen and (min-width:1024px) and (min-resolution: 120dpi) {
        #motto p {
                font-size: 15px;
                line-height: 24px;
        }
        #motto {
                margin-bottom: 3em;
        }
        #titel .telefon {
                line-height: 150%;
        }
        #titel .mininav {
                font-size: 14px;
                margin-top: 0;
        }
        #startseite_unten {
                font-size: 14px;
                line-height: 22px;
        }
        #inhalt p, #inhalt li {
                line-height: 1.5em;
                font-weight: 400;
        }
        #inhalt strong {
                font-weight: 700;
        }
}