/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-condensed-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('fonts/roboto-condensed-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v18-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('fonts/roboto-condensed-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v18-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('fonts/roboto-condensed-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v18-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/**************************
  Reset Styles
**************************/
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; }


/**************************
  Weiche Übergänge
**************************/
a { transition: color 0.4s ease-in-out; -webkit-transition: color 0.4s ease-in-out; }


/**************************
  Basic Styles
**************************/
* { margin: 0; padding: 0; }
.clear { overflow: hidden; clear: both; }
* html .clear { height: 1% }
img { border: none; max-width: 100%; height: auto; }
body { font-family: 'Roboto Condensed', sans-serif; font-size: 100%; font-weight: 400; text-align: left; line-height: 1.5em; color: #333; }
strong, b { color: #666; font-weight: 700; }
a { color: #333; }


/**************************
  Seite
**************************/
.container { position: relative; max-width: 1400px; width: auto; margin: 0px auto 10px auto; }
.logo { position: absolute; top: 30px; width: 200px; left: calc(50% - 100px); }
.logo.folgeseite { width: 140px; left: calc(50% - 70px); }
.folgeseitenkopf { background-image: url("../img/leistungen-kopf.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 230px; }
.folgeseitenkopf.keinBild { background: none; }
.navigation { position: absolute; top: 30px; right: 20px; }
.navigation ul li { position: relative; display: inline-block; }
.navigation ul li a { text-decoration: none; color: #333; margin: 0 25px; border-bottom: 1px solid rgba(0,0,0,0); }
.navigation ul li a:hover { border-bottom: 1px solid rgba(0,0,0,1); }
.claim { position: absolute; top: 250px; width: 800px; margin: 0 calc(50% - 400px); }
.zitat { text-align: right; font-size: 0.875rem; }
.footer { position: relative; background-color: #333; width: auto; max-width: 1400px; margin: 0 auto 50px; }
.footer nav ul li { display: inline-block; }
.footer nav ul li a { color: #ccc; text-decoration: none; margin: 10px 0px 10px 40px; display: inline-block; }
.footer nav ul li a:hover { color: #fff; }
.textinhalt { position: relative; padding: 50px 0; display: flex; flex-wrap: wrap; line-height: 1.8rem; }
.links { display: inline-block; width: calc(30% - 80px); padding: 0 40px; text-align: right; }
.rechts { display: inline-block; width: calc(70% - 80px); padding: 0 40px; }
.textinhalt h1 { font-size: 1.6rem; }
.textinhalt h2 { font-size: 1.3rem; margin: 0 0 20px 0; }
.textinhalt p { margin: 0 0 20px 0; font-size: 1.1rem; }
.textinhalt ul { margin: 0 0 20px 0; font-size: 1.1rem; }
.textinhalt ul li { list-style: circle; margin: 0 0 0 25px; }
.textinhalt ol { margin: 0 0 20px 0; font-size: 1.1rem; }
.textinhalt.kontakt { background-color: #333; color: #fff; border-radius: 0 0 20px 20px; }
.textinhalt.kontakt .links { width: calc(50% - 80px); padding: 0 40px; text-align: left; }
.textinhalt.kontakt .rechts { width: calc(50% - 80px); padding: 0 40px;  }
.kontakt-box { border: 1px solid #fff; border-radius: 10px; display: flex; flex-wrap: wrap; overflow: hidden; }
.kontakt-bild { width: 220px; border-radius: 10px; background-image: url("../img/patricia-wenske.jpg"); background-size: cover; background-position: center; }
.kontakt-text { width: calc(100% - 260px); padding: 20px; }
.kontakt-text a { color: #fff; }
.kontakt-text a:hover { color: #999; }


/**************************
  Responsive Anpassung
**************************/
@media only screen and (max-width: 1280px) {
	.logo { top: 20px; width: 140px; left: calc(50% - 70px); }
	.claim { top: 200px; }
	.logo.folgeseite { width: 120px; left: calc(50% - 60px); }
	.folgeseitenkopf { height: 150px; }
}
@media only screen and (max-width: 1023px) {
	.claim { width: 60%; margin: 0 20%; }
	.logo { width: 120px; left: calc(50% - 60px); }
	.claim { top: 150px; }
	.logo.folgeseite { width: 90px; left: calc(50% - 45px); }
	.folgeseitenkopf { height: 120px; }
	.textinhalt.kontakt .links { width: calc(100% - 80px); margin: 0 0 30px 0; }
	.textinhalt.kontakt .rechts { width: calc(100% - 80px); }
}
@media only screen and (max-width: 767px) {
	.logo { left: 40px; }
	.logo.folgeseite { left: 40px; }
	.claim { background-color: rgba(255,255,255,0.8); padding: 20px; width: calc(100% - 40px); text-align: center; left: 0; margin: 0; top: 200px; }
	.claim img { width: 80%; }
	.mobNo { opacity: 0; }
	.links { width: calc(100% - 80px); text-align: left; }
	.rechts { width: calc(100% - 80px); }
	.kontakt-bild { width: 140px; border-radius: 10px; background-image: url("../img/patricia-wenske.jpg"); background-size: cover; background-position: center; }
	.kontakt-text { width: calc(100% - 180px); padding: 20px; }
}
@media only screen and (max-width: 500px) {
	.navigation ul li a { margin: 0 10px; font-size: 0.75rem; }
	.footer nav ul li a { font-size: 0.75rem; margin: 10px 0px 10px 20px; }
	.kontakt-bild { width: 100%; height: 50vh; background-image: url("../img/patricia-wenske.jpg"); background-size: cover; background-position: center top; }
	.kontakt-text { width: calc(100% - 40px); padding: 20px; }
	.textinhalt p { font-size: 0.75rem; }
	.textinhalt ul { font-size: 0.75rem; }
	.textinhalt ol { font-size: 0.75rem; }
	.claim { position: relative; top: auto; left: auto; padding: 50px 20px; }
	.claim img { width: 100%; }
	.startseitenbild { margin-top: 100px; }
}