@import url("reset.css");
/* merriweather-300 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/merriweather-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Light'), local('Merriweather-Light'),
       url('../fonts/merriweather-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v19-latin-300.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Regular'), local('Merriweather-Regular'),
       url('../fonts/merriweather-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v19-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-700 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Bold'), local('Merriweather-Bold'),
       url('../fonts/merriweather-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/merriweather-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v19-latin-700.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Oswald Regular'), local('Oswald-Regular'),
       url('../fonts/oswald-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v16-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* oswald-700 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oswald-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Oswald Bold'), local('Oswald-Bold'),
       url('../fonts/oswald-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v16-latin-700.svg#Oswald') format('svg'); /* Legacy iOS */
}

.clear {
    clear: both;
}

body {
    font: 300 16px/24px arial, helvetica; /* Schriftschitt/Größe/Zeilenabstand/Art*/
    vertical-align: top;
    overflow-x: hidden;
}

* {box-sizing: border-box;}

p {font-family: 'Merriweather'; color: #412429;}
.red {color: #9f0e18; font-weight: 700;}
strong {font-weight: 700;}
i {font-style: italic;}

h1, h2, h3, h4, nav ul li, .logo p, .slogan p, footer a, footer p {font-family: 'Oswald';}
.col1 ul li, .col2 ul li, .col3 ul li, .kontaktdaten a, .g04 ul li, .g06 ul li, .g12 ul li {font-family: 'Merriweather';}
h1, h2, h3, .logo p, .slogan p {font-size: 35px;}
h3, .white, .box p, .kontaktdaten a, .g12.white p, .col1.white p, .col2.white p, .col3.white p {color: #fff;}
.wrapper {padding: 8% 5% 5% 5%;}
.col2 ul, .col3.white ul, .g04 ul, .g12 ul, .box2 ul {margin-left: 20px;}
.background-resp {display: none;}


header {background-image: url(../images/rechtsanwalt-mietrecht-gelsenkirchen2.jpg); background-position: center; width: 100%; height: 50vw; background-size: cover; background-repeat: no-repeat; position: relative; background-attachment: fixed;}
.flaeche1 {position: absolute; left: 0; top: 0;}
.flaeche2, .flaeche5 {position: absolute; left: 0; bottom: 0;}
.flaeche3 {position: absolute; right: 0; bottom: 0;}
nav {position: fixed; right: 5%; z-index: 99;}
nav ul {margin-top: 50px;}
nav ul li {color: #fff; background-color: #a7222b; padding: 8px; display: inline-block; margin-right: 10px;}
nav ul li a {text-decoration: none; color: #fff; font-size: 18px; font-weight: 400;}
.sidenav, .header-navi span {display: none;}

.waage {position: absolute; left: 20px; top: 20px;}
.logo {position: absolute; top: 180px; left: 8%;}
.logo p {font-weight: 700; color: #a00e19; line-height: 3rem;}
.name {font-weight: 400; color: #41242b;}
.small {font-weight: 400; font-size: 20px;}
.slogan {position: absolute; bottom: 3%; right: 5%;}
.slogan p {color: #fff; z-index: 2; font-weight: 400;}

.col1, .col2, .col3 {width: 33%; display: inline-block; vertical-align: top;}
.col1, .col2 {padding-right: 50px;}
.col1 p, .col2 p {margin-bottom: 1rem;}

#uebermich {background-image: url(../images/background-uebermich.png), url(../images/background-uebermich2.png); background-position: top left, bottom right; width: 100%; background-repeat: no-repeat; height: auto; background-color: #efedeb;}
.fehler404 {padding-bottom: 200px;}
.g12 {width: 100%; margin-bottom: 50px;}
h1, h2 {color: #a00e19; font-weight: 400;}
h3 {font-weight: 400;}
.headline {background-color: #9f0e18; color: #fff; padding: 5px 0 5px 10px;}
.col1 img, .zitat {display: inline-block;}
.col1 img {margin-right: 20px; width: 12%; min-width: 64px;}
.icon-auszeichnung{height: auto;}
.zitat-container{display: flex;align-items: flex-start; margin-top: 30px;}
.zitat {font-weight: 700;}
.col2 ul li.li-red, .g04 ul li.li-red, .g12 ul li.li-red {list-style-image: url(../images/li-punkt-red.png)}
.box {background-color: #9f0e18; padding: 5%; position: relative;}
.anwalt {position: absolute; right: 10%; top: -68px;}
.kontaktdaten a:hover {font-weight: bold;}
.kontaktdaten img, .kontaktdaten p {display: inline-block;}
.kontaktdaten img {margin-right: 5px;}
.col3 .red {margin-bottom: 10px;}

#service {background-image: url(../images/flaeche-service-rechts.png), url(../images/flaeche-service-links.png); background-position: top right, bottom left; width: 100%; background-repeat: no-repeat; height: auto; background-color: #fff; padding-top: 100px; padding-bottom: 100px;}
.g08, .g04 {display: inline-block;}
.g08 {width: 60%; padding-right: 50px;}
.g04 {width: 38%; vertical-align: top;}
.g04 ul li {margin-bottom: 1rem;}
.couch {width: 90%; height: auto;}
.font-big {font-size: 20px;}

#mietrecht {background-color: #9f0e18; background-image: url(../images/background-uebermich.png), url(../images/flaeche-mietrecht-rechts.png); background-position: top left, bottom right; width: 100%; background-repeat: no-repeat; height: auto; padding-bottom: 100px;}
.box2 {background-color: #900c15; padding: 5% 5% 5% 25px;}
h4 {font-size: 28px; margin-bottom: 20px; font-weight: 400;}
.col1 ul li.li-white, .col2 ul li.li-white, .col3 ul li.li-white {list-style-image: url(../images/li-punkt.png)}

#publikationen {background-image: url(../images/background-buch.jpg), url(../images/flaeche-service-links.png); background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; height: 800px; background-position: top right, bottom left; position: relative;}
.g06.trans {width: 45%; margin-right: 50px; background: rgba(241 ,240, 238, 0.7); display: inline-block; vertical-align: top; padding: 40px;}
.g06 {width: 45%; margin-right: 50px; display: inline-block; vertical-align: top;}
.g06 a {color: #412429;}
.g06 a:hover {font-size: bold;}
.g06 ul li {margin-bottom: 1rem;}
.g06 ul li.li-zahl1 {list-style-image: url(../images/eins.png);}
.g06 ul li.li-zahl2 {list-style-image: url(../images/zwei.png);}
.g06 ul li.li-zahl3 {list-style-image: url(../images/drei.png);}
.g06 ul li.li-zahl1, .g06 ul li.li-zahl2, .g06 ul li.li-zahl3 {margin-left: -9px;}
.flaeche4 {position: absolute; right: 0; top: 0;}

#kooperationen {background-color: #efedeb; background-image: url(../images/background-uebermich.png), url(../images/kooperationen-partnerschaften.png); background-position: left top, bottom right; background-repeat: no-repeat;}

#kontakt {background-image: url(../images/flaeche-service-rechts.png), url(../images/flaeche-service-links.png), url(../images/icon-ort.png); background-position: top right, bottom left, 80% 200px; width: 100%; background-repeat: no-repeat; height: auto; padding-bottom: 100px;}
.maps {width: 100%; height: 400px;}

#impressum {background-color: #9f0e18; background-image: url(../images/background-uebermich.png), url(../images/flaeche-mietrecht-rechts.png); background-position: top left, bottom right; width: 100%; background-repeat: no-repeat; height: auto; padding-bottom: 100px;}
.headline2 {background-color: #fff; color: #9f0e18 !important; padding: 5px 0 5px 10px;}
.col1.white a, .col2.white a, .col3.white a, #impressum a {color: #fff; text-decoration: none;}
.col1.white a:hover, .col2.white a:hover, .col3.white a:hover, #impressum a:hover {font-weight: bold;}
.col3.white ul li {list-style-type: disc;}

footer {width: 100%; position: fixed; height: 35px; background-color: #900c15; bottom: 0; padding: 5px 5% 0 5%; }
footer a {color: #fff; text-decoration: none;}
footer p {vertical-align: right; color: #fff; float: right;}
.li-white2 {padding-bottom: 2px; padding-left: 2px; padding-right: 2px;}


/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1450px) {
 #publikationen {background-attachment: scroll; background-size: cover; height: auto; padding-bottom: 100px;}
}

@media screen and (max-width: 1280px) {
    .waage {top: 13px; width: 65px;}
    .flaeche1, .flaeche2, .flaeche3 {width: 40%;}
    .flaeche4, .flaeche5 {width: 80%;}
    .slogan {bottom: 7%;}
    #uebermich, #mietrecht, #kooperationen, #impressum {background-size: 80%;}
    #service, #kontakt {background-size: 40%;}
    .anwalt {right: 7%; bottom: 218px;}
    .col1, .col2 {width: 48%;}
    .col3 {width: 100%;}
    .col1 {margin-bottom: 50px;}
    .couch {width: 100%; margin-bottom: 50px;}
}

@media screen and (max-width: 1160px) {
    h1, h2, h3, .logo p, .slogan p {font-size: 32px;}
    h1, h2, h3, .slogan p {line-height: 2.5rem;}
    .logo {top: 140px;}
    .maps {margin-bottom: 50px;}
    .g06.trans, .g06, .g08, .g04 {width: 100%;}
    .g06.trans.pad-bo-no {padding-bottom: 0;}
    header {background-attachment: scroll;}
}

@media screen and (max-width: 990px) {
    #uebermich {padding-bottom: 100px;}
    #kooperationen {background-color: #efedeb; background-image: url(../images/background-uebermich.png); background-position: left top; background-repeat: no-repeat; position: relative;}
    .waage {left: 10px;}
    nav {display: none;}
    .sidenav {background-color: #a7222b; display: block;height: 100%; width: 0; position: fixed; z-index: 1000;top: 0; right: 0; overflow-x: hidden; transition: 0.5s; padding-top: 15px;}
    .sidenav a {padding: 8px 8px 8px 32px; text-transform: uppercase; text-decoration: none; font-size: 18px; color: #fff; display: block; transition: 0.3s; font-family: "Oswald"; white-space: nowrap; font-weight: 400;}
    .sidenav a:hover, .offcanvas a:focus {color: #ddd; font-weight: bold; text-decoration: none;}
    .sidenav .closebtn {position: absolute; top: 0;right: 25px; font-size: 36px;margin-left: 50px;}
    .header-navi span {display: block; position: fixed; top: 0%; right: 0%; background: #a7222b; width: 56px; height: 50px; cursor: pointer; z-index: 99;}
    .header-navi span:hover {background: #900c15;}
    .header-navi span img {width: 41px; height: 31px; position: absolute; top: 9px; left: 7px;}
    .farbe2 {color: #deb250;}
    .menu {background-color: #a7222b;}
    .sidenav .closebtn {font-size: 36px; margin-left: 50px; position: absolute; right: 25px; top: 0;}
    .logo {top: 90px;}
    .background-resp {display: block; position: absolute; right: 0; bottom: 0; width: 80%;}
}

@media screen and (max-width: 790px) {
    h1, h2, h3, .logo p, .slogan p {font-size: 28px;}
    .waage {width: 45px;}
    .logo {top: 70px;}
    .logo p {line-height: 2rem; font-size: 24px;}
    .col1, .col2 {width: 100%; padding-right: 0;}
    .col2 {margin-bottom: 50px;}
    .g06.trans, .g06 {margin-right: 0px;}
}

@media screen and (max-width: 640px) {
    .logo {top: 70px; background: rgba(255,255,255,0.4); padding: 15px;}
    .flaeche1 {width: 50%}
h1, h2, h3, .slogan p {font-size: 26px;}
    .g06 ul li.li-zahl1, .g06 ul li.li-zahl2, .g06 ul li.li-zahl3 {
        margin-left: 30px;}
}

@media screen and (max-width: 480px) {
    .flaeche1 {width: 70%; z-index: 90;}
    .waage {z-index: 99;}
    .g12 {margin-bottom: 20px;}
    .slogan {display: none;}
    .logo {left: 60px;}
    .logo p {line-height: 1.7rem; font-size: 20px;}
    .anwalt {width: 110px; top: -54px;}
}

@media screen and (max-width: 400px) {
    .anwalt {right: 0;}
    .col3 .red {margin-bottom: 30px;}
}

@media screen and (max-width: 360px) {
    .logo {left: 40px; top: 58px;}
    .box {padding: 17% 5% 5% 5%;}
    .col3 .red {margin-bottom: 60px;}
}