/* ++++ Basics ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

* { margin: 0; padding: 0; border: 0; text-decoration: none; outline: none; color: black; }
html { height: 100%; }
body { background: white; height: 100%; font-family: 'Asap', Verdana, Arial, sans-serif; font-weight: normal; font-size: 16px; line-height: 1.5em; /* 16/24 */  }
.clear { clear: both; width: 0; height: 0; float: none; }
.inv { display: none; }
a:hover { cursor: pointer; }
img { display: block; }


/* ++++ Layout ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ---- Header -------------------------------------------------------------------------- */
.c-header { position: fixed; width: 100%; height: 100px; z-index: 999; background: rgba(255,255,255,0.85); height: 110px; }
header { 
	width: 1100px;  position: absolute; top: 0; left: 50%; margin: 0 0 0 -550px; text-transform: uppercase; letter-spacing: 0.04em;
}
header a.logo { position: absolute; width: 392px; padding: 32px 0 30px 0; font-size: 1.125em; line-height: 1.0em; /* 18/18 */
	background: url(/css_gfx/buero_6b_logo_desktop.png) right 29px no-repeat; background-size: 59px 259px; 
}
header a.logo strong { font-size: 1.028em; }
header a.logo span { display: block; text-align: right; }
header a.logo span.all { display: inline-block; }
header a.logo:hover { background-position: right -71px; }

header nav { position: absolute; right: 0; line-height: 1.0em; }
header nav ul.l-nav { }
header nav ul.l-nav li { display: inline; }
header nav ul.l-nav li a { display: block; float: left; padding: 34px 0 30px 0; margin: 0 0 0 30px; }
header nav ul.l-nav li a:hover { color: rgb(50,110,180); }
header nav ul.l-nav li a.active { padding-bottom: 25px; border-bottom: 8px solid rgb(110,170,220); }
.navswitch { display: none; } /* erst ab < 600 */

/* ---- Content ------------------------------------------------------------------------- */
.c-wrapper { width: 100%; height: 100%; margin: 0 auto 0 auto; position: relative; }
section { width: 1100px; height: 100%; margin: 0 auto 0 auto; position: relative; overflow: visible; /* background: red; */ }
.c-wrapper.intro { background: url(/css_gfx/bg_intro.jpg) center center no-repeat; }

/* section.s-portfolio { background: lime; }
section.s-kontakt { background: pink; }  */

/* ++++ Typografie ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

p, ul, ol { letter-spacing: 0.01em; padding: 0 0 0.75em 0; /* 12 */ }
ul li { list-style-type: none; }

h1 { color: rgb(50,110,180); font-family: 'Bitter', Georgia, serif; padding: 0 0 1.0em 0; font-size: 2.0em; font-weight: normal; line-height: 1.0em; /* 32/32 */}
h2 { text-transform: uppercase;  padding: 0 0 0.75em 0; color: rgb(50,110,180); font-size: 1.0em; line-height: 1.0em; /* 16/16 */ }
h2.weit { padding: 1.0em 0 0.75em 0;}
h1 span, h2 span { font-weight: normal; }

strong, b { font-weight: bold; }
em, i { font-style: italic; }
span.caps { text-transform: uppercase; font-size: 0.95em; }

section a { color: black; text-decoration: underline; }
section a:hover { color: rgb(50,110,180); }
section a:hover { text-decoration: underline; }


/* ++++ Startseite ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.c-intro, .c-portfolio, .c-kontakt { 
	width: 100%; position: absolute; 
	top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);	
}
.c-intro { width: 50%; margin: 0 0 0 50%; }

/* ---- Intro --------------------------------------------------------------------------- */ 
p.intro { font-family: 'Bitter', Georgia, serif; padding: 0 0 1.5em 0; font-size: 1.5em; font-weight: normal; line-height: 1.5em; /* 24/36 */}

/* ---- Portfolio, Matrix --------------------------------------------------------------- */
h1#h-portfolio { display: none; }
.c-matrix-thumbs {  }
.l-matrix {  width: 100%; height: auto; padding: 0; border-top: 4px solid rgb(214,231,245); }
.l-matrix li { display: inline; }
 .l-matrix li a { 
	display: block; float: left; width: 220px; height: 140px; 
	background: transparent 0 0 no-repeat; background-size: cover; border-bottom: 4px solid rgb(214,231,245);
}
.l-matrix li a:hover { background-position: 0 -140px; }
.l-matrix li a span { display: block; width: 0; height: 0; overflow: hidden; }

/* ---- Kontakt ------------------------------------------------------------------------- */ 
h1#h-kontakt { padding: 0.5em 0 1.0em 15px; }
.c-kontakt .re.w33.text p { padding: 0 0 0.75em 15px; }
@media (min-height: 700px) {  
	h1#h-kontakt { padding: 4.0em 0 1.0em 30px; }
	.c-kontakt .re.w33.text p { padding: 0 0 0.75em 30px; }
}


/* ++++ Portfolio, Detail +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

section.s-portfolio-detail { padding: 200px 0 0 0; height: auto; }

div.c-portfolio-jobprofil { width: 300px; /* float: left; */ margin: 0 800px 25px 0; line-height: 1.5em; /* 24 */ }
div.c-portfolio-jobprofil p.kunde  { text-align: right; }
div.c-portfolio-jobprofil p span.label { font-size: 0.688em; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; color: rgb(50,110,180); }
div.c-portfolio-jobprofil p span.label.kunde { background: none; padding: none; color: rgb(50,110,180); }
div.c-portfolio-jobprofil h1 { color: black; font-size: 1.5em; padding: 20px 0 0 0; border-top: 8px solid rgb(110,170,220); /* 24/24 */}
div.c-portfolio-jobprofil h1 span { font-size: 0.667em; }
div.c-portfolio-jobprofil ul li { background: url(/css_gfx/bul_website.png) 0 center no-repeat; background-size: 15px 8px; padding: 0 0 0 21px; }

div.c-portfolio-bild-text.jobprofil div.w66,
div.c-portfolio-bild-text.jobprofil div.w50 { float: right; }

div.c-portfolio-bild-text { margin: 0; overflow: hidden; }
div.c-portfolio-bild-text.steg-1 { margin: 0 0 25px 0; }
div.c-portfolio-bild-text.steg-2 { margin: 0 0 50px 0; }

div.c-portfolio-bild-text div.li { float: left; overflow: hidden; }
div.c-portfolio-bild-text div.re { float: none; overflow: hidden; }
div.c-portfolio-bild-text div.w75 { width: 819px; }
div.c-portfolio-bild-text div.w66 { width: 725px; }
div.c-portfolio-bild-text div.w50 { width: 538px; }
div.c-portfolio-bild-text div.w33 { width: 350px; }
div.c-portfolio-bild-text div.w25 { width: 257px; }
div.c-portfolio-bild-text div.w75.re { margin: 0 0 0 281px; }
div.c-portfolio-bild-text div.w66.re { margin: 0 0 0 375px; }
div.c-portfolio-bild-text div.w50.re { margin: 0 0 0 562px; }
div.c-portfolio-bild-text div.w33.re { margin: 0 0 0 750px; }
div.c-portfolio-bild-text div.w25.re { margin: 0 0 0 843px; }

div.c-portfolio-bild-text div.li img,
div.c-portfolio-bild-text div.re img { margin: 0 0 25px 0; width: auto; height: auto !important; }
div.c-portfolio-bild-text div.re img { float: right; }
div.c-portfolio-bild-text img { height: auto !important; }

div.c-portfolio-bild-text img.w100 { max-width: 1100px; margin: 0 0 25px 0; }
div.c-portfolio-bild-text img.w75 { float: left; max-width: 819px; margin: 0 24px 24px 0; }
div.c-portfolio-bild-text img.w66 { float: left; max-width: 725px; margin: 0 25px 25px 0; }
div.c-portfolio-bild-text img.w50 { float: left; max-width: 538px; margin: 0 24px 25px 0; }
div.c-portfolio-bild-text img.w33 { float: left; max-width: 350px; margin: 0 25px 25px 0; }
div.c-portfolio-bild-text img.w25 { float: left; max-width: 257px; margin: 0 24px 25px 0; }
div.c-portfolio-bild-text img.last, div.c-portfolio-bild-text img.re { margin-right: 0 !important; float: right; }

.c-portfolio-bild-text.mix p:first-child { background: url(/css_gfx/bul_lauftext.png) 0 0.5em no-repeat; background-size: 40px 10px; text-indent: 50px; }
p.credit { font-style: italic; letter-spacing: 0.02em; max-width: 725px; font-size: 0.938em; line-height: 1.2em; border-top: 4px solid rgb(214,231,245); padding-top: 0.5em; margin-top: 1.0em; }

p.legende { clear: both; font-style: italic; letter-spacing: 0.02em; max-width: 725px; font-size: 0.938em; line-height: 1.2em; /* 15/18 */}
p.legende.w100.re { width: 100% !important; max-width: none; text-align: right; }
div.c-portfolio-bild-text p.legende { position: relative; top: -15px; }
p.legende span.meta { font-size: 0.733em; text-transform: uppercase; letter-spacing: 0.1em; font-style: normal; }
p.legende span.li:before { content: "Links"; }
p.legende span.re:before { content: "Rechts"; }
p.legende span.ob:before { content: "Oben"; }
p.legende span.un:before { content: "Unten"; }


/* ---- Subnavi Portfolio (und Impressum) ----------------------------------------------- */
nav.n-sub { clear: both; width: 1100px; height: 43px; margin: 30px auto 0 auto; padding-bottom: 100px; position: relative; }
nav.n-sub ul.l-sub { padding: 0; }
nav.n-sub ul.l-sub li { display: inline; }
nav.n-sub ul.l-sub li a { 
	display: block; float: left; width: 75px; height: 43px; margin: 0 10px 0 0; background: url(/css_gfx/but_forw.png) 0 0 no-repeat; background-size: 100% 300%; position: relative; 
}
nav.n-sub ul.l-sub li.navi-forw a { float: none; position: absolute; right: 0; margin: 0; }
nav.n-sub ul.l-sub li.navi-back a { background-image: url(/css_gfx/but_back.png); }
nav.n-sub ul.l-sub li.navi-list a { background-image: url(/css_gfx/but_list.png); }
nav.n-sub ul.l-sub li a span { display: block; width: 0; height: 0; overflow: hidden; }
nav.n-sub ul.l-sub li a:hover { background-position: 0 -86px; }

nav.n-sub.portfolio { margin: 50px auto 0 auto; }

.l-sub li a:after   { 
	background: #333; background: rgba(0,0,0,.8); color: white; position: absolute; bottom: 53px; left: 0; border-radius: 5px; opacity: 0; visibility: hidden;
    width: 200px; padding: 5px 10px; z-index: 98; content: attr(data-tooltip); font-style: italic; font-size: 0.938em; line-height: 1.2em; /* 15/18 */
}
.l-sub li a:before  { 
	border: solid; border-color: rgb(51,51,51) transparent; border-width: 8px 8px 0 8px; opacity: 0; visibility: hidden;
    bottom: 45px; content: ""; left: 10px; position: absolute; z-index: 99;
}
.l-sub li.navi-forw a:after { left: -145px; text-align: right; }
.l-sub li.navi-forw a:before { left: 45px; }

.l-sub li a:hover:after  { opacity: 1.0; visibility: visible; transition: opacity 0.25s ease-in; }
.l-sub li a:hover:before  { opacity: 1.0; visibility: visible; transition: opacity 0.25s ease-in; }


/* ++++ Impressum +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

section.s-impressum { padding: 150px 0 0 0; height: auto; min-height: 0; }
@media (min-height: 700px) {  
	section.s-impressum { padding: 250px 0 0 0; }
}
.c-impr-col { width: 30%; margin: 0 5% 0 0; float: left; }
.c-impr-col.i3 { margin: 0; }
h1#h-impressum { color: black; padding-bottom: 3.0em; }


.c-page-loader { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 888; background: white url(/css_gfx/preloader.gif) center center no-repeat; }

/* ++++ Bürosuche +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Start */
.c-wrapper.intro.buerosuche { background-image: url(/css_gfx/bg_intro_buerosuche.jpg); }
.s-intro.buerosuche { position: relative; }
div.link-buerosuche { position: absolute; top: 240px; height: 400px; width: 450px;}
div.link-buerosuche a { display: block; width: 100%; height: 100%; }

/* Einzelseite */
body.buerosuche { background: rgb(225,225,225);}
body.buerosuche .c-header { background: white; }
section.s-buerosuche { height: auto; min-height: 0; padding: 180px 0 0 0; }
section.s-buerosuche article { height: 520px; padding: 50px 20px 50px 400px; background: transparent url(/css_gfx/bg_buerosuche.svg); background-size: cover; }
section.s-buerosuche h1 { display: none; }
section.s-buerosuche p { font-family: 'Bitter', Georgia, serif; padding: 0 0 0.75em 0; font-size: 1.25rem; font-weight: normal; line-height: 1.5em; /* 20/30 */}
section.s-buerosuche p a { text-decoration: none; color: rgb(50,110,180); }
section.s-buerosuche p a:hover { text-decoration: underline; color: black; }