/* -- FONTS ----------------------------------------------------------------- */
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../../../lib/fonts/open-sans/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* -- LAYOUT --------------------------------------------------------------- */

:root {
    --cl-logo: #363a93;
    --cl-text: #333333;

/* Maße */
    --w-page: 100%px;
    --page-top: 0px;
    --page-bottom: 10px;
    --w-cont: 1170px;


/* Überschriften */

    --cl-h1: #000000;
    --cl-h2: #333333;
    --cl-h3: #333333;
    --cl-h4: #333333;
    --cl-h5: #333333;
    --cl-h6: #333333;

    --fs-h1: 3.2rem;
    --fs-h2: 2.6rem;
    --fs-h3: 2.2rem;
    --fs-h4: 1.8rem;
    --fs-h5: 1.6rem;
    --fs-h6: 1.2rem;


    --cl-bg: #ffffff;
    --cl-body-bg: #dddddd;
    --cl-line: #555555;
    --cl-middle: #666666;
    --cl-light: #333333;

    --cl-link: var(--cl-logo);
    --cl-link-hover: var(--cl-text);

    --cl-navbg: var(--cl-bg);
    --cl-navlink: var(--cl-text);
    --cl-navlinkhover: var(--cl-bg);
    --cl-navlinkhoverbg: var(--cl-logo);

    --cl-highlight: #ff1c32;

    --footer-width: 1180px;
    --cl-footer-text: #ffffff;
    --cl-footer-bg: var(--cl-body-bg);

/* ersetzen */
    --cl-logolight: #ca1d2440;
    --cl-logodark: #ca1d24ff;
    --cl-bglight: #f*fffff;
    --cl-bgdark: #333333;
    --cl-border: #555555;
    --cl-borderlight: #555555;
    --cl-borderdark: #555555;
}

.white {
    color: white;
}

.recht-detail {
    margin-bottom: 30px;
    width: 100% !Important;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}
.recht-detail h2 { color: #000; font-size: 20px; font-weight: 600; margin-top: 60px; }
.recht-detail h3 { font-size: 20px; font-weight: 500; margin-top: 20px; }
.recht-detail h4 { font-size: 18px; font-weight: 500; margin-top: 20px; }

html { position: relative; min-height: 100%; margin: 0; padding: 0; }

body {
  font-size: 1.6rem;
  font-display: swap;
  color: var(--cl-text);
  height: 100%;
  min-height: 100%;
  background: #22255b;
  background: url('//www.immobilienbewertung-uder.de/userdata/7996/pages/designs/171/hintergrund/back1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}
header {
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: #fff;
    display: inline-block;
    width: 100%;
}

.header-wrapper { width: 100%; margin: 0 auto;  }

.header-info {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
    }

    .info-item {
        flex: 1;
        min-width: 150px;
    }

    .info-right {
        padding-right: 15px;
        font-size: 96%;
        min-width: 75%;
        text-align: left;
    }

    .info-left {
        max-width: 25%;
        text-align: left;
        padding-left: 15px;
        font-size: 96%;
    }

    .logo {
        text-align: center;
    }

    .logo a img {
        margin: 0 auto;
        margin-top: 10px;
    }

    .head-social { flex: 1; text-align: right; display: flex; justify-content: flex-end;}
    .head-social div { width: 300px; }

    /* Mobile Layout */

    @media (max-width: 768px) {
        .header-info {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .info-left,
        .info-right {
            order: unset;
            text-align: center;
        }

        .logo a.logo-img img {
            width: 180px;;
            margin-top: 0px;
        }

        .logo {
            order: 1;
        }

        .info-left {
            order: 2;
        }

        .info-right {
            order: 3;
        }
    }




/* -- NAVIGATION ------------------------------------------------------------ */

.navbar {
  margin-bottom: 0;
  padding: 0px 0px 0px 0px;
  border-radius:0;
  min-height: 0;
}
.navbar .container { }
.navbar .nav { padding-top: 20px; float: none; display:inline-block;}
.navbar-inner { text-align: right; }
.navbar ul li a { font-size: 110%;color: #fff; background-color: #5b5b5b; padding-top: 6px; padding-bottom: 6px; margin-right: 3px; margin-top: 3px;}
.navbar ul > li.active > a { color: #fff;  background: #363a93; }
.navbar ul > li > a:hover { color: #fafafa;  background: #363a93; }
.navbar ul > li.open > a:focus { color: #fafafa;  background: #363a93; }
.navbar .nav .open > a { color: #fafafa;  background: #afb0d4; }
.navbar ul.dropdown-menu { padding: 4px; background:#fafafa; color: #333; border: 1px solid #ddd;}
.navbar .navbar-collapse.in { position: fixed; top: 40px; left: 0; right: 0; width: 100%; }
.navbar .navbar-collapse.in .nav { width: 100%; z-index: 9999; background: #efefef; }
.navbar .navbar-toggle .icon-bar { background:#fafafa; }

ul.cart-nav li a  { padding: 6px; }
ul.cart-nav li a i { color: #333; font-size: 18px; }

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1170px) {}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
  .navbar .navbar-toggle { position: fixed; top: 10px; right: 10px; background: #363a93;  color:#fff; z-index: 9999; }
  .nav { width: 80%; }
  .navbar-inner { text-align: center; }
  .navbar ul li a { background: #efefef; color: #333; padding: 8px 0 !Important; font-size: 18px; margin-bottom: 5px; }
  .header-img-inner { height: 100px; }
  .side-collapse-container {
      background-color: #fff;
      width:100%;
      position:relative;
      left:0;
      transition:left .4s;
  }
  .side-collapse-container.out { left:200px; }
  .navbar .side-collapse {
      background-color: #ddd;
      z-index: 998;
      top: 0px;
      bottom:0;
      left:0;
      width: 100%;
      position:fixed;
      overflow:hidden;
      transition: width .4s;
  }
  .side-collapse.in { width:0; }
  .navbar-collapse { margin-top: 60px; }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}



#page {
    background: transparent;
    height: 100%;
    width: var(--w-page);
    margin: 0 auto;
    margin-top: var(--page-top);
    margin-bottom: var(--page-bottom);
    padding: 0;
    display: table;
    table-layout: fixed;
    display: flex;
    min-height: calc(100vH - 20px);
    flex-direction: column;
}

#wrapper {
    flex: 1;
    height: 100%;
    background-color: transparent;
    padding-bottom: 20px !Important;
}

.container {
    width: var(--w-cont);
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

.container div.se-cont.container { width: 100% !Important; }
.se-row { margin-right: -15px; margin-left: -15px; }


/* -- ÜBERSCHRIFTEN --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans","Lucida Sans","Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 0.25em;
}
h1 { color: var(--cl-h1); font-size: var(--fs-h1); }
h2 { color: var(--cl-h2); font-size: var(--fs-h2); }
h3 { color: var(--cl-h3); font-size: var(--fs-h3); }
h4 { color: var(--cl-h4); font-size: var(--fs-h4); }
h5 { color: var(--cl-h5); font-size: var(--fs-h5); }
h6 { color: var(--cl-h6); font-size: var(--fs-h6); }

.se-section h1, .se-section h2, .se-section h3, .se-section h4, .se-section h5 { margin-top: 0; }

a { color: #363a93; }
a:hover { color: #333; }

/* -- SOCIAL ---------------------------------------------------------------- */
.social {}
.social li a i { color: #333 }
.social li a:hover i { color: #363a93 }

/* -- RECHTLICHES ----------------------------------------------------------- */
.rechtliches p { margin: 0; padding: 0; }
.rechtliches p a { margin: 0; padding: 0; }

/* -- FOOTER ---------------------------------------------------------------- */
footer {
    background-color: #5b5b5b;
    color: #fff;
    font-size: 14px;
    width: 100%;
    height: auto;
}
footer .container { background: transparent; padding-top: 10px; }
footer h4 { color: #fff; border-bottom: 1px dotted #ddd; padding-bottom: 3px; }
footer .copyright { padding: 10px 0 2px 0; }
footer .copyright,
footer .copyright a,
footer a,
footer a:link,
footer a:active,
footer a:visited
{
    color: #fff;
    font-size: inherit;
}
footer .kontakt span { float:left; width: 55px; }

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    footer h4 { margin-top: 12px; }
}


/* -- MEDIA-QUERIES --------------------------------------------------------- */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    #page { width: 99%; margin: 0px auto; }
    .container { width: 100%; }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}

@media only screen and (min-width : 768px) {
  /* Make Navigation Toggle on Desktop Hover */
  .dropdown:hover .dropdown-menu {
      display: block;
  }
}