
/* --------------------------------------------- */
/* Globals */

body { 
    /* font-family: 'Source Sans Pro', sans-serif;  */
    font-family: Helvetica, Arial, sans-serif;

    font-size: 18px; color: #4a4a4a; line-height: 1.6; font-weight: 400;
    cursor: default; }

h1, h2, h3, h4 { line-height: 1.1; font-weight: 600; margin: 1em 0 0.6em; text-transform: uppercase; }
h1, h2 { color: #4a4a4a; font-size: 2.5em; }
h3 { color: #4a4a4a; font-size: 2em; font-weight: 300; text-transform: none; }
h4 { color: #4a4a4a; font-size: 1.4em; font-weight: 300;text-transform: none;  }
h5 { color: #4a4a4a; font-size: 1em; font-weight: 600;text-transform: none;  }

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 1em 0; }
blockquote { border: none; padding: 0; font-size: inherit; font-style: italic; font-weight: 400; }

img { max-width: 100%; height: auto; }

a { color: #68074f; text-decoration: none; transition: color 0.2s linear; }
a:hover { color: #68074f; text-decoration: none; }
.content-section a:hover { border-bottom: 1px solid #68074f;  }
a:active, a:focus { text-decoration: none; }

@media(min-width: 768px)
{
    h1, h2, h3, h4 { margin: 1.6em 0 1em; }
}

@media(min-width: 1200px)
{
}

@media(min-width: 1600px)
{
}



/* --------------------------------------------- */
/* Components */

.blue { color: #68074f; }
.green { color: #68074f; }

.content-section { margin: 30px 0; }
.content-section.pad { padding: 30px 0; }

@media(min-width: 768px)
{
    .content-section { margin: 60px 0; }
    .content-section.pad { padding: 60px 0; }
}

@media(min-width: 1200px)
{
    .content-section { margin: 80px 0; }
    .content-section.pad { padding: 80px 0; }
}

@media(min-width: 1600px)
{
    .content-section { margin: 120px 0; }
    .content-section.pad { padding: 120px 0; }
}

.form-control { border: none; border-radius: 0; background: transparent; border-bottom: 1px solid #fff;
    box-shadow: none; font-size: inherit; padding: 20px 10px; height: auto; color: #fff; }
.form-control:focus { box-shadow: none; outline: none; border-color: #fff; }

.btn { width: 100%; height: auto; border: none; border-radius: 0; font-weight: 600; padding: 20px 0;
    text-transform: uppercase; transition: opacity 0.15s linear; }
.btn-primary, .btn-primary:active, .btn-primary:focus{ background: #fff; color: #68074f; }
.btn-primary:hover {
    opacity: 1; background: rgba(255, 255, 255, 0.9) !important;  color: #68074f; border: none; box-shadow: none; outline: none !important; }

.anchor { position: relative; top: -75px; } /* Nav height + content-section margin */
@media(min-width: 768px) { .anchor { top: -90px; } }
@media(min-width: 992px) { .anchor { top: -115px; } }
@media(min-width: 1600px) { .anchor { top: -140px; } }

.contact-link { font-weight: 600; }


/* --------------------------------------------- */
/* Layout */

header { position: fixed; top: 0; width: 100%; z-index: 20; padding: 20px 0; transition: all 0.4s ease-out;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
}
body.subpage header, header.fixed { background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); }


#brand { display: block; height: 40px; width: auto; float: left; position: relative; z-index: 10; line-height: 1; }
#brand img { height: 100%; width: auto; }
#brand img.inv { display: none; }
header.fixed #brand img, body.menu-open #brand img { display: none; }
header.fixed #brand img.inv, body.menu-open #brand img.inv { display: block; }

/* Mobile nav button */
#menu-btn { display: block; height: 40px; width: 30px; float: right; z-index: 11; position: relative; margin-top: -5px; }
#menu-btn span, #menu-btn:before, #menu-btn:after { display: block; height: 2px;
    background: #fff; position: absolute; width: 100%; }
#menu-btn:before, #menu-btn:after { content: ""; transition: all 0.15s ease-out;
    transform-origin: 50% 50%; }
#menu-btn span { top: 50%; margin-top: -1px; }
#menu-btn:before { top: 10px; }
#menu-btn:after { bottom: 10px; }

/* nav button is blue on fixed header and open nav */
header.fixed #menu-btn span, header.fixed #menu-btn:before, header.fixed #menu-btn:after,
body.menu-open #menu-btn span, body.menu-open #menu-btn:before, body.menu-open #menu-btn:after
{ background: #68074f; }

body.menu-open #menu-btn:before { transform: rotate(-135deg); top: 50%; margin-top: -1px; }
body.menu-open #menu-btn:after { transform: rotate(135deg); bottom: 50%; margin-bottom: -1px; }
body.menu-open #menu-btn span { opacity: 0; }

/* General nav settings */
nav a { position: relative; color: #4a4a4a; }

nav #lang-nav a { width: 30px; height: 30px; padding: 0; line-height: 30px; text-align: center; font-size: 13px; font-weight: 600; color: #68074f; background: rgba(213,220,228,0.8);
    transition: all 0.15s linear; border-radius: 1px; }
nav #lang-nav a:hover { background: #b2bfce; color: #fff; }

/* Nav underline */
nav a span { background: #fff; height: 2px; position: absolute; bottom: 0; width: 100%; left: 0;
    transition: opacity, transform 0.2s ease-out; transform: scaleX(0); opacity: 0; }
nav li.active a span, nav li a:hover span { display: block; transform: scaleX(1); opacity: 0.8; }

/* Blue underline on mobile and fixed nav */
header.fixed nav li.active span, header.fixed nav li a:hover span,
body.menu-open nav li.active span, body.menu-open nav li a:hover span { background: #68074f; }

/* header.fixed nav li.active a span, header.fixed nav li a:hover span { opacity: 0.2; } */


@media(max-width: 991px)
{
    nav { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #fff; z-index: 0;
        opacity: 0; transform: scaleY(0); transition: all ease-out 0.3s; transform-origin: 50% 0; }
    nav > div { display: table; width: 100%; height: 100%; }
    nav > div > div { display: table-cell; vertical-align: middle; }
    nav ul { margin: 0; padding: 0; list-style: none; text-align: center; }
    nav li { margin: 10px 0; }
    nav a { display: inline-block; padding: 10px; text-transform: uppercase; font-weight: 600; }
    nav a:hover { color: #68074f; }

    nav #lang-nav { margin-top: 50px; }

    body.menu-open nav { transform: scaleY(1); opacity: 1; }
}

@media(min-width: 768px)
{
    #brand { height: 50px; }
    #menu-btn { margin-top: -2px; }
}

@media(min-width: 992px)
{
    header { padding: 20px 0; }
    #menu-btn { display: none; }
    nav { float: right; }
    nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { float: left; margin-left: 20px; }
    nav a { text-transform: uppercase; font-weight: 600; color: #fff; display: block; float: left; height: 40px; line-height: 40px; }
    nav a:hover { color: #fff; }

    nav #lang-nav { margin-left: 50px; margin-top: 5px; }

    header.fixed nav a { color: #4a4a4a; }
    header.fixed nav li.active a span, header.fixed nav a:hover span { }
}

@media(min-width: 1200px)
{
    nav #lang-nav { margin-left: 70px; }
}

@media(min-width: 1600px)
{
    #brand { height: 50px; }
    nav li { margin-left: 35px; }
    nav a { height: 50px; line-height: 50px; }
    nav #lang-nav { margin-top: 10px; }
}

#hero { background: url(images/hero.jpg) no-repeat 30% top; background-size: cover; height: 100vh; max-height: 600px; position: relative; }
#hero .container { height: 100%; position: relative; }
#hero .text { position: absolute; bottom: 20px; left: 15px; right: 15px; }
#hero .text * { color: #fff; }
#hero .text h1 { font-size: 36px; margin: 0; text-align: right; }
#hero .text h2 { font-size: 28px; margin: 10px 0 0 0; text-align: right; line-height: 1.4; }
#hero .text h3 { font-weight: 600; text-transform: uppercase; font-size: 24px; margin: 8px 0 0 0; text-align: right; line-height: 1.4; }
#hero .text h1 span,
#hero .text h2 span,
#hero .text h3 span{ background: #68074f; padding: 0 4px; }
#hero .link-it { display: none; }
#hero .link-it a { font-size: 1.2em; font-weight: 400; line-height: 1.1; }
#hero .link-it span { margin-left: 8px; font-size: 0.8em; line-height: inherit; }

@keyframes pulse2 {
    0%, 50% {
        transform: scale3d(1, 1, 1);
        animation-timing-function: ease-out;
    }
    75% {
        transform: scale3d(1.15, 1.15, 1.15);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale3d(1, 1, 1);
        animation-timing-function: ease-out;
    }
}

#scroll-down { display: none; position: absolute; bottom: 20px; left: 50%; color: #fff; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; border: 1px solid #fff;
    text-align: center; line-height: 50px; animation: pulse2 2s infinite; opacity: 0.6; }
#scroll-down { transition: all 0.15s linear; }
#scroll-down span { transition: color 0.1s linear; }
/* #scroll-down:hover { color: #68074f; border-color: #68074f; } */
#scroll-down:hover { opacity: 1; border: 2px solid #fff; }

@media(min-width: 768px)
{
    #hero { max-height: none; }
    #hero .text { bottom: 20%; }
    #hero .text h1 { font-size: 38px; }
    #hero .text h2 { font-size: 28px; }
    #scroll-down { display: block; }
    #hero .link-it { display: block; }
}

@media(min-width: 992px)
{
    #hero .text h1 { font-size: 60px; }
    #hero .text h2 { font-size: 38px; }
    #hero .link-it { display: block; }
}


#section-intro { margin-top: 0; }
#boxes { margin: 30px 0 15px 0; }
#boxes > .box { padding: 1px; }
#boxes > .box > div { background: #f1f1f1; padding: 20px 15px; opacity: 0.95; height: 100%; }
#boxes > .box .t { display: table; height: 100%; }
#boxes > .box .t > * { display: table-cell; vertical-align: middle; }
#boxes > .box .t > span { color: #68074f; font-size: 30px; padding-right: 15px; }

@media(min-width: 768px)
{
    #boxes .box { width: 50%; float: left; }
    #boxes .box:nth-child(2n+1) { clear: left; }
    #boxes > .box > div { padding: 25px; }
    #boxes > .box .t > span { padding-right: 25px; }
}

@media(min-width: 992px)
{
    #boxes .box { width: 33.33333%; float: left; }
    #boxes .box:nth-child(2n+1) { clear: none; }
    #boxes .box:nth-child(3n+1) { clear: left; }
}

@media(min-width: 1600px)
{
    #boxes { margin: 60px 0 0 0; }
}

#services {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

#section-leistungen {
}

#section-leistungen h2 {
    text-align: center;
}

#services .item {
    flex: 0 0 auto;
    width: 100%;
    padding: 15px;
}

#services .item > div {
    background: #68074f;
    color: #fff;
    padding: 45px 15px 15px 15px;
    height: 100%;
    position: relative;
}

#services .item h3  {
    color: #fff;
    text-align: center;
    margin: 0 0 20px;
    font-size: 32px;
}

#services .item i.fa {
    display: inline-block;
    background: #fff;
    color: #68074f;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    position: absolute;
    top: -25px;
    left: 50%;
    margin-left: -25px;
}

#services .item h4 {
    margin-top: 0;
}

@media(min-width: 768px) {
    #services .item {
        width: 50%;
    }
}

@media(min-width: 1200px) {
    #services .item {
        width: 25%;
    }
}

/*
#services {}
#services .item { margin: 20px 0;  }

#services .item > a { display: block; font-weight: 400; }
#services .item > a span { color: #68074f; display: inline-block; transition: transform linear 0.1s; transform-origin: 50% 50%; font-size: 18px; width: 6px; margin-right: 14px; }
#services .item .content { overflow: hidden; max-height: 0; transition: all ease-out 0.3s; max-width: 940px; }
#services .item .content > div { padding: 10px 0 10px 0; }
#services .item .content h4:first-child { margin-top: 1em; }

#services .item.active > a { color: #68074f; }
#services .item.active > a span { transform: rotate(-90deg); }
#services .item.active .content { max-height: 990px; }

@media(min-width: 992px)
{
    #services .item .content > div { padding-left: 20px; }
    #services .item.active .content { max-height: 700px; }
}
*/

#section-vertrauen { background: url(images/vertrauen.jpg) no-repeat center center; background-size: cover;
    text-align: center; color: #fff; }
#section-vertrauen .s01 { font-size: 20px; opacity: 0.8; }
#section-vertrauen h2 { font-weight: 700; text-transform: uppercase; color: #fff; margin: 20px 0; }
#section-vertrauen blockquote { opacity: 0.8; }


#section-anwaelte {}
#section-anwaelte h2 {}
.anw-item { margin-bottom: 30px; }
.anw-item .img img { width: 100%; height: auto; }
.anw-item .img-desktop { display: none; }
.anw-item span.fa { color: #aaa; width: 20px; }
.anw-item .text span.year { font-weight: 600; display: inline-block; width: 100px; text-align: right; margin-right: 8px; }

@media(min-width: 992px)
{
    #section-anwaelte .container { width: 100%; padding: 0; }
    .anw-item { display: table; width: 100%; margin-bottom: 0; }
    .anw-item > div { display: table-cell; width: 50%; vertical-align: middle; }

    .anw-item .img-desktop { display: table-cell; }
    .anw-item .img-mobile { display: none; }

    .anw-item .text > div { padding: 0 30px 0 50px; }
    .anw-item .name { margin-top: 0; }
}

@media(min-width: 1650px)
{
    .anw-item .text > div { padding: 0; width: 720px; margin: 0 auto; }
}

#section-team .container {
    display: flex;
    justify-content: center;
}

.team-item .text {
    margin-top: 20px;
}

.team-item img {
    width: 300px;
}

@media(min-width: 768px) {
    .team-item {
        display: flex;
        align-items: center;
    }

    .team-item .text {
        margin-top: 0;
        order: 1;
    }

    .team-item .img {
        margin-left: 30px;
        order: 2;
    }

}


/* Contact bg image */
/* body { background: url(images/contact.jpg) no-repeat center bottom; background-size: 100% auto; } */
#section-kontakt { margin-bottom: 0; background: #68074f; color: #fff; }
#section-kontakt h2 { color: #fff; text-align: center; }
#section-kontakt h4 { color: #fff; }
#section-kontakt .contact { font-weight: 400; margin: 30px 0; }
#section-kontakt .contact > div { margin: 8px 0; }
#section-kontakt .contact span.fa { color: #fff; margin-right: 4px; }
#section-kontakt a { color: #fff; }

#section-kontakt .col-xs-12:nth-child(2) { margin-top: 30px; }
#section-kontakt .status { margin-top: 20px; color: #fff; }

footer {  text-align: center; font-size: 16px; padding: 30px 0; }
body.subpage footer { text-align: left; }
footer a { color: #999; margin: 0 8px; }

@media(min-width: 992px)
{
    #section-kontakt .col-xs-12:nth-child(2) { margin-top: 0; }
    #section-kontakt form { max-width: 600px; }
}

#maps > div {
    height: 400px;
    position: relative;
}

#maps iframe,
#maps > div > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent no-repeat center center / cover;
}


/* Cookie consent */

.cc_div {
  color: #000;
  font-family: inherit; }
  .cc_div p {
    margin-top: 15px !important; }
  .cc_div .cc-link {
    color: #68074f;
    border: none; }
    .cc_div .cc-link:hover {
      text-decoration: underline; }
  .cc_div .c-bn {
    background: #f6f6f6; }

#c-bns button:first-child, #s-bns button:first-child {
  background: #68074f;
  color: #fff; }
  #c-bns button:first-child:hover, #s-bns button:first-child:hover {
    background: #68074f; }

div[data-service] {
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
  min-width: 0;
  color: #fff; }

div[data-service] .cll .c-nt {
  background: var(--color-muted); }
  div[data-service] .cll .c-nt a {
    color: #fff;
    text-decoration: underline;
    border: none; }

div[data-service] .cll .c-n-t {
  color: #fff; }

div[data-service] .cll .c-n-a {
  flex-wrap: wrap; }

div[data-service] .cll .c-l-b, div[data-service] .cll .c-la-b {
  box-shadow: none; }

div[data-service] .cll .c-l-b {
  background: #68074f;
  color: #fff; }
  div[data-service] .cll .c-l-b:before {
    display: none; }
  div[data-service] .cll .c-l-b:hover {
    background: #68074f; }

div[data-service] .cll .c-la-b {
  background: #eee; }
  div[data-service] .cll .c-la-b:hover {
    background: #f6f6f6; }

:root {
  --im-overlay-bg: rgba(0, 0, 0, 0.8);
}