body, html { margin: 0; font-family: Verdana, sans-serif; line-height: 1.6}
header, footer, nav, article, section { display: block; }
a, a:link, a:visited, a:active { text-decoration: none; }
.link:hover { text-decoration: underline; }

a { color: #000000; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.clear { clear: both; }
.white { color: #ffffff; }


.topbar { line-height: 20px; color: #000000; text-align: right; background-color: #ffffff; position: fixed; width: 100%; z-index: 100; font-size: 16px;
    padding: 10px 5px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); top: 0; left: 0;}
.topbar a { color: #000000; }
.topbar a, .topbar span {margin: 0px 9px;}
.topbar img {position: absolute;left: 20px;top: 50%;transform: translateY(-50%);}


nav.menu { font-size: 19px; margin: 40px auto 30px; cursor: pointer; text-align: right; font-weight: 600; font-family: Montserrat, sans-serif;}
nav.menu a.inner { color: #000; margin-right: 30px; padding-bottom: 5px; position: relative; }
nav.menu a.inner::after {content: '';position: absolute;width: 100%;height: 2px;background-color: #444444;bottom: 0;left: 0;opacity: 0;transform: translateY(5px);transition: opacity 0.3s ease-out, transform 0.3s ease-out;}
nav.menu a.inner:hover::after {opacity: 1;transform: translateY(0);}


ul.bullet-none { list-style: none; }
li {margin-bottom: 5px;}

.ref-main {position: absolute; margin-top: -70px; }
.ref {position: absolute; margin-top: -50px; }

.bgimg-1 a, .bgimg-3 a { border: none; font-style: normal;}

.logo { margin-top: 80px; transition: filter 1s; opacity: 1.0; max-width: 450px; filter: drop-shadow(0px 0px 8px #777); }
/* filter: drop-shadow(0px 0px 8px #999); */
.logo:hover { filter: drop-shadow(0px 0px 8px #000); }

.bgsmall { min-height: inherit; padding-bottom: 5px; }
.bgsmall .slogan { font-size: 1em; }
.bgsmall .logo { max-width: 400px; }

div.inline { display: inline-block; }
div.float-left, div.float-center, div.float-right { line-height: 35px; margin-right: 0px; float: left; margin-left: 20px; min-width: 300px;}


#to-top-button { position: fixed; border: 2px solid #fff; background-color: #444444; bottom: 20px; right: 20px; padding: 10px 15px 15px 15px;
    cursor: pointer; font-weight: bold; color: #fff;  transition: background 0.25s; }
#to-top-button:hover { background-color: #666; }


footer { color: #fff; line-height: 25px; background-color: #444444; text-align: center; padding: 35px 0; font-size: 14px; }
footer b {display: inline-block; margin-bottom: 5px;}
footer a { color: #ffffff; }
footer a, footer span {margin: 0;}

footer a:hover { border-bottom: solid 1px #ffffff; }
footer div {vertical-align: top; display: inline-block; text-align: left; margin-left: 100px}

.content {color: #000; background-color: #fff; text-align: left; max-width: 1080px; margin: 150px auto;}
.content-with-img {margin-top: 165px}


h1 { font-weight: bold; font-size: 36px; font-family: 'Montserrat', sans-serif;}

.left-container, .right-container {display: inline-block; vertical-align: top; text-align: left;}
.left-container {width: 47%; margin-right: 29px;}
.right-container {width: 47%; margin-left: 29px;}
.right-container h1, .left-container h1 {margin-top: -15px}
.right-container h2, .left-container h2 {margin-top: -10px}

.website-link {border: #444444 3px solid; padding: 10px; text-align: center; width: 200px; transition: background-color 0.3s, border-color 0.3s;}
.website-link:hover {background-color: #eeeeee;border-color: #000000;cursor: pointer; }
.website-link a {display: block; text-decoration: none;color: inherit;}

.img {width: 100%; height: auto; display: block;}
.spacer {height: 80px;}
p {margin-top: -6px}
ul {list-style-type: square; padding-left: 14px }

.rechtsgebiete-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;}
.box {background-color: #ffffff;padding: 30px; padding-top: 10px}
.box-image {width: 7%; position: absolute; top: 0px; left: 0px; opacity: 0.73}

.rechtsgebiet h1 {position: absolute; top: 30px; left:30px; line-height: 1.3}
.rechtsgebiet p, .rechtsgebiet ul {margin-left: 30px}

.rechtsgebiete-small h3 {text-align: center;}
.rechtsgebiete-small .box {padding: 5px; height: 110px; align-content: center; border: 1px solid #dddddd;}

.contact-header { color: #aaa; font-size: small; margin: -10px 0px 0px -5px; padding: 5px; }



/*img { border: 0; }*/
/*img.preview { cursor: zoom-in; float: right; transition: filter 0.5s; margin-left: 10px; margin-bottom: 10px; }*/
/*img.preview:hover { filter: brightness(110%); }*/


html { overflow-y: scroll; }


/* iPhone 5  750, 720, 640, 540, 480, 320, 412 (Nexus 5x) */

/* --------- 1650px --------- */
@media only screen and (max-width: 1800px) {

}





.fade-image img {
    width: 100%;
    height: auto;

    /* Use WebKit mask for better browser support */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}