﻿
/* Chat ausblenden */

@media screen and (min-width:768px) 
{
    .crisp-client .cc-kv6t .cc-1xry .cc-unoo .cc-7doi { display: none !important; visibility: hidden !important; }
    .crisp-client .cc-kv6t[data-last-operator-face=false] .cc-1xry .cc-unoo .cc-7doi .cc-1iv2 .cc-15mo[data-is-ongoing=false] { display: none !important; visibility: hidden !important; }
}

.grid-item 
{
        overflow-wrap: break-word;
        word-wrap: break-word;       
}

.norecords { text-align:center; margin: 5rem 0;  }

.default        { padding-top:2.7rem; }
.start          { margin-bottom:1rem; }
.start__main    { float:left; width:calc(100% - 45rem); margin-right:1rem; position:relative; top:0rem; left:0rem;  }
.start__aside   { float:left; width:44rem; }
.start__pic     { min-height:73.9rem; padding:3.6rem; background-image:url(/images/headerpics/startbild-1.jpg); background-size:cover; background-position:top center; position:relative; top:0rem; left:0rem; }
.start__topics  { width:100%; margin-top:0.5rem; }
.start__picbgvert { z-index:0; position:absolute; top:0rem; left:0rem; width:100%; height:100%; background-image:url(/images/start-header-verlauf-vertikal.png); background-position:left bottom; background-repeat:repeat-y; }
        
.topics__link           { width:calc(25% - 0.4rem); display:table-cell; vertical-align:middle; float:left; height:11.1rem; line-height:11.1rem; text-align:center; background-color:var(--colBoxBack); background-position:center center; background-repeat:no-repeat; background-size:contain; }
.topics__link + .topics__link { margin-left:0.5rem; }
.topics__link img       { display:inline; vertical-align:middle; max-width:70%; max-height:100%; }

.start__wetter      { position:absolute; bottom:0rem; left:0rem; width:100%; z-index:1;    }
.wetter             { width:100%; height:100%; padding:5.2rem 3.6rem; color:white;  background-image:url(/images/start-header-verlauf-horizontal.png); background-position:bottom center; background-repeat:repeat-x; }
.wetter__headline   { color:var(--colMain1); font-size:3rem; line-height:4rem; margin:0rem 0rem 0.5rem 0rem; }
.wetter__image      { margin:3rem 0rem 0rem 0rem; position:relative; left-:2rem; width:15rem; }
.wetter__todaydeg   { font-size:4rem; line-height:5.5rem; font-weight:600; margin:1.5rem 0rem; }
.wetter__tabs       { }
.wetter__tab        { padding-bottom:0.2rem; display:inline-block; margin-right:1.8rem; }
.wetter__tablink    { font-size:1.5rem; color:white; line-height:2rem; }
.wetter__tab--sel   { font-weight:700; border-bottom:solid 0.2rem var(--colMain1); }
.wetter__data       { }
.wetter__dataitem   { display:inline-block; margin-right:2rem; }
.wetter__dataicon   { height:1.4rem; margin-right:1rem; vertical-align:top; }
.wetter__dataval    { color:white; font-size:1.4rem; line-height:1.4rem; vertical-align:top; }

.wetter__times      { position:absolute; bottom:3.6rem; right:5.2rem; }
.wetter__time       { display:inline-block; margin-left:3rem; text-align:center; }
.wetter__timedegree { display:block; font-size:1.6rem; line-height:2.2rem; }
.wetter__timeicon   { height:5rem; margin:0.5rem 0rem; }
.wetter__timeclock  { display:block; font-size:1.4rem; line-height:1.9rem; }

.searchbox              { background-color:var(--colMain1); text-align:center; padding:2.3rem 4rem 2rem 4rem; }
.searchbox__question    { font-size:2.6rem; line-height:4rem; font-weight:700; margin:0rem 0rem 1rem 0rem; display:block; }
.searchbox__input       { width:100%; outline:0;  }
.searchbox__hints       { margin-top:2.5rem; width:100%; text-align:left; min-height:18.1rem; }
.searchbox__hintslabel  { font-size:1.4rem; line-height:3rem; font-weight:600; }
.searchbox__hintsitem   { font-size:1.2rem; font-weight:600; border:solid 1px var(--colMain2); display:inline-block; margin:0.3rem 0rem 0rem 0rem; padding:0.3rem 1rem; text-align:center; cursor:pointer; }
.searchbox__hintsitem:hover { background-color:var(--colMain2); color:var(--colMain1); }

.start__contact > span { clear:both; display:block; font-size:0.5px; }
.start__cbox  { width:50%; float:left; border-bottom:solid 0rem white; border-top:solid 0.5rem white; }
.start__cbox + .start__cbox { border-left:solid 0.5rem white; }
.cbox           { background-color:var(--colMain1); width:100%; padding:2.4rem 2rem 2.2rem 2rem; text-align:left; }
.cbox--phone    { width:100%; padding:2.3rem 2rem 2.1rem 2rem; }
.cbox__icon     { height:1.5rem; margin-right:1.6rem; vertical-align:middle; }
.cbox__text     { font-size:1.6rem; line-height:2rem; font-weight:700; vertical-align:middle; }
.cbox--phone .cbox__icon { height:2.2rem; }
.cbox--email .cbox__icon { margin-right:1.2rem; }
.cbox--email .cbox__text { position:relative; top:0.1rem; }
  
.start__chat        { margin:0.5rem 0rem 0rem 0rem; cursor:pointer; }
.chatbox            { background-color:var(--colMain1); width:100%; padding:2.2rem 3rem 2rem 3rem;  }
.chatbox__label     { float:left; }
.chatbox__state     { float:right; }
.chatbox__labelicon { display:inline-block; vertical-align:middle; height:2rem; margin-right:0.8rem; }
.chatbox__labeltext { display:inline-block; vertical-align:middle; font-size:1.8rem; line-height:2.2rem; font-weight:600; }
.chatbox__statedot  { display:inline-block; vertical-align:middle; border-radius:50%; width:1.2rem; height:1.2rem; background-color:var(--colYes);  margin-right:0.8rem;  }
.chatbox__statetext { display:inline-block; vertical-align:middle; font-size:1.4rem; line-height:2.2rem; font-weight:600; }

.start__quicklinks  { padding-top:0.5rem; }
.start__quicklink   { display:block; float:left; background-color:var(--colBoxBack); width:25%; min-height:11.1rem; text-align:center; padding:2rem 0.4rem 0rem 0.4rem; margin:0rem; border-right:solid 0.4rem white; border-bottom:solid 0.4rem white; }
.start__quickicon   { display:inline-block; height:2.8rem; margin-bottom:1rem; }
.start__quicktext   { display:block; font-size:1.3rem; line-height:1.6rem; font-weight:500; text-align:center; }
.start__quicklink:nth-child(4n) { border-right:solid 0rem white; }
.start__quicklink:hover { background-color:var(--colLight); }
.start__quicklink:hover .start__quickicon { animation: quickicon-stretch 0.2s ease-out 0s; animation-fill-mode: forwards; }

.start__quicklink--16 .start__quickicon { height:3.5rem; margin-bottom:0.3rem; }

.default__area          { max-width:var(--innerMaxW); margin:10rem auto 0rem auto; }
.default__area--long    { max-width:100%; }
.area__more             { width:100%; text-align:center; clear:both; }
.areahead               { text-align:left; padding:0rem 0rem 2.9rem 0rem; clear:both;  }
.areahead__title        { font-size:4rem; line-height:4rem; }
.areahead__titleicon    { margin-left:1rem; vertical-align:middle; }
.areahead__label        { font-size:1.8rem; line-height:4rem; }

.default__newsarea      { margin-left:auto; margin-right:auto; text-align:left; }
.newsarea__items        { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1.5rem; margin-bottom:1.5rem; }
.newsarea__item         {  }
.newsteaser             { width:100%; max-width:100%; }

.default__eventsarea     { margin-left:auto; margin-right:auto; text-align:left; }
.eventsarea__items       { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1.5rem; margin-bottom:1.5rem;  }
.eventsarea__item        { min-height:35.5rem;  }

.default__mediasarea            { margin-left:auto; margin-right:auto; text-align:center; background-color:var(--colDark); color:white; }
.mediasarea                     { max-width:var(--innerMaxW); margin:auto; text-align:left; padding-top:5.5rem; padding-bottom:5.5rem; }
.mediasarea .areahead__title    { color:white; }
.mediasarea__item               { width:25%; float:left; padding-right:1.5rem; margin-bottom:1.5rem; }
.mediasarea__item:nth-child(1)  { width:50%; }
.mediasarea__item:nth-child(2)  { width:50%; }

.default__mapsarea      { background-color:var(--colLight); text-align:center; padding-top:5rem; padding-bottom:5rem; }
.mapsarea               { max-width:var(--innerMaxW); text-align:left; margin:auto; position:relative; top:0rem; left:0rem; }
.mapsarea__head         { position:relative; top:0rem; left:0rem; padding-bottom:0rem; }
.mapsarea__label        { font-size:2.2rem; line-height:2.2rem; vertical-align:bottom; }
.mapsarea__labellicon   { height:2.2rem; margin-right:0.6rem;  vertical-align:bottom;  }
.mapsarea__title        { margin-top:0.8rem; }
.mapsarea__more         { position:absolute; bottom:0rem; right:1.5rem; }
.mapsarea__more .button--small { padding-left:4.5rem; background-image:url(/images/icons-schwarz/link-extern.svg); background-position:left 2rem center; background-size:1.3rem; background-repeat:no-repeat; }
.mapsarea__items        { margin-top:4.5rem;  }
.mapsarea__item         { display:block; width:calc(25% - 1.5rem); height:13.5rem; float:left; text-align:center; margin:0rem 1.5rem 1.5rem 0rem; border:solid 2px var(--colDark); }
.mapsarea__itemnr       { display:block; width:5.5rem; height:5.5rem; text-align:center; background-color:var(--colDark); color:var(--colLight); font-size:2.2rem; line-height:5.5rem; font-weight:500; vertical-align:middle; margin:auto;  }
.mapsarea__itemtext     { display:block; font-size:2.2rem; line-height:3.0rem; font-weight:600; margin-top:0.8rem; }
.mapsarea__item:hover   {  background-color:var(--colDark);  border:solid 2px var(--colDark); }
.mapsarea__item:hover .mapsarea__itemnr       { background-color:var(--colLight); color:var(--colDark); }
.mapsarea__item:hover .mapsarea__itemtext     { color:var(--colLight); }

.video-container { height: auto;  width: 100%;}


@media screen and (min-width:1281px) and (max-width:1440px)
{
    .newsteaser__title  { font-size:1.8rem; line-height:2.8rem; }
    .newsteaser__date   { font-size:1.2rem; }
}

@media screen and (max-width:1280px)
{
    .newsarea__items        { grid-template-columns: 1fr 1fr 1fr; }
    .eventsarea__items      { grid-template-columns: 1fr 1fr 1fr; }
}

@media screen and (max-width:1023px)
{
    .start__main    { width:100%; margin-bottom:0.5rem; }
    .start__aside   { width:100%; }

    .start__contact { display:inline-block; vertical-align:top; width:calc(66.6% - 0.5rem); margin-right:0.3rem; }
    .start__chat    { display:inline-block; vertical-align:top; width:calc(33.3% - 0.1rem); }

    .cbox__text     { font-size:1.6rem; }

    .start__quicklink { width:16.6%; }
    .start__quicklink:nth-child(4n) { border-right:solid 0.4rem white; }
    .start__quicklink:nth-child(6n) { border-right:solid 0rem white; }

    .mediasarea__items  { margin-right: -1.5rem; }
    .mapsarea__item     { width:calc(33.3% - 1.5rem); }
}

@media screen and (max-width:768px)
{
    .master__main           { padding-left:0rem; padding-right:0rem; }

    .start__pic             { padding:2rem; min-height:45rem; }
    .wetter                 { width:100%; height:100%; padding:3rem; }
    .topics__link           { line-height:8.1rem; height:8.1rem; }
    .searchbox__hints       { min-height:auto; }

    .start__yellow          { width:100%; clear:both; }
    .start__contact         { width:66.2%; display:inline-block; vertical-align:top;  margin-right:0rem; }
    .start__chat            { width:33.4%; display:inline-block; vertical-align:top;  border-left:solid 0.3rem white; }
    .start__quicklinks      { width:100%; clear:both; }
    .chatbox                { min-height:6.6rem; }
  
    .default__area          { margin-top:10rem; }
    .default__area--long    { max-width:100%; margin-left:0rem; }

    .newsarea__items        { grid-template-columns: 1fr 1fr 1fr; }
    .eventsarea__items      { grid-template-columns: 1fr 1fr; }

    .inserat        { width:100%; clear:both; max-width:100%; display:flex;   align-items:stretch; flex-direction:row;  flex-wrap:nowrap; flex:1; }
    .inserat-img    { }
    .inserat-text   { }
}

@media screen and (max-width:767px)
{
    .default { padding-top:0rem; }
    .start__sonnenschein        { display:none; }
    .wetter__times              { display:none; }
    .wetter__time:first-child   { margin-left:0rem; }

    .searchbox { padding:2.4rem 1.6rem; }

    .start__contact         { width:100%; display:inline-block; vertical-align:top;  margin-right:0rem; }
    .start__chat            { width:33.4%; display:inline-block; vertical-align:top;  border-left:solid 0.3rem white; display:none; }
    .start__quicklinks      { width:100%; clear:both; }
    .chatbox                { min-height:6.6rem; }

    .cbox       { padding:3rem 1rem 1rem 1rem; min-height:12rem; text-align:center; }
    .cbox__icon { width:auto; clear:both; text-align:center; margin:1.2rem auto; display:block; }
    .cbox__text { width:100%; clear:both; text-align:center; font-size:1.3rem; line-height:1.6rem; display:block; }
    .cbox--email .cbox__icon { margin-right:auto; }
    .start__quicklink               { width:33.3%; }
    .start__quicklink:nth-child(3n) { border-right: solid 0.0rem white; }
    .start__quicklink:nth-child(6n) { border-right: solid 0.0rem white; }

    .newsarea__items        { grid-template-columns: 1fr; }
    .eventsarea__items      { grid-template-columns: 1fr; }

    .newsarea__item     { width:100%; }
    .eventsarea__item   { width:100%; min-height:auto; }
    .eventprev__attributes { position: relative;  bottom: 0rem; left: 0rem; }
    .mediasarea__item   { width:100%; }
    .mediaprev__type    { display:none; }

    .mapsarea__title    { font-size:3.5rem; }
    .mapsarea__item     { width:100%; margin-right:0rem; }
    .mapsarea__more     { position:relative; bottom:0rem; right:auto; margin-top:1.5rem; }
    .mapsarea__more .button { width:100%; }
    .mapsarea__items    { margin-top:1.5rem; }
}


/* Animationen */

@keyframes quickicon-stretch
{
  from  { height:2.8rem; }
  to    { height:3.4rem; }
}



/* IMMOBILIEN UND JOBS */

.default__immobilien {
    background-color:#EEEEEE;
    color: #000000;
}
.default__immobilien .areahead__title {
    color: #000000;
}
.immobilien__main {
    max-width:810px;
    margin: 0 auto;           
    position:relative;
}
.areahead-right {
    padding-bottom:2em;
    padding-left:8em;
    text-align:right;
    font-size:22px;        
    margin-top: -7rem;
    margin-bottom: 4rem;
}
.areahead-right .active,  .areahead-right a:hover{
    border-bottom: #000000 solid 3px;
    font-weight:bold;
}
        
@media only screen and (max-width: 700px) {
    .immobilien__main {
        max-width:600px;
    }
}

@media only screen and (max-width: 1080px) {
    .areahead-right {               
        padding-left:0.5em;
        text-align:left;
        margin-top: 0rem;
        margin-bottom: 0;
        padding-bottom:0.4em;
    }
}

.inserat {
    position:relative;
    width:100%;
    max-width:260px;
    height: 534px;
    float:left;

    margin: 0.5em 0.5em 2.5em 0.5em; 
    border: 1px solid #e6e6e6;

    background: #FFFFFF url('/images/icons-schwarz/link-extern.svg') 96% 98%/16px 16px no-repeat;
}
.inserat:hover {
    background-image: url('/images/icons-gelb/link-extern.svg');          
}
.inserat-img {
    background-size:cover;
    background-position: center center;
    background-color: #f2f2f2;
    width:100%;
    height:235px;
}
.inserat .title {
    color:#000000;
    font-size: 19px;
    font-weight:bold;
    min-height:110px;
}
.inserat-text {
    padding: 1em 1.2em;
    font-size:  14px;
    color: #707171;
}
.link-extern {
    position: absolute;
    right:0;
    bottom:0;
    display:block;
    width:14px;
    height:14px;           
}
.inserat-tb {
    width:100%;           
}
.bold {
    font-weight:bold;
}
.clearDiv {
    clear:both;
}
.showMoreButton {            
    display:block;
    margin:0 auto;
    padding: 0.5em 1em;
    max-width:150px;

    font-size:15px;
    font-weight:bold;
    text-align: center;
    color:#000000;
    border: 2px solid #000000;
}


@media screen and (max-width:768px)
{
    .inserat        { width:100%; height:auto; clear:both; max-width:100%; display:flex;   align-items:stretch; flex-direction:row;  flex-wrap:nowrap; flex:1; background: none; }
    .inserat-img    { width:50%; height:auto; }
    .inserat-text   { }
}

@media screen and (max-width:767px)
{
    .inserat        { width:100%; height:auto; clear:both; max-width:100%; display:block;  }
    .inserat-img    { width:100%; height:65vw; clear:both; }
    .inserat-text   { }
}



/* SOCIAL WALL */

.grid {
        padding: 3em 0em 3em 0em;
        margin: 0 auto;
        clear: both;
        position: relative;
    }

    .grid .grid-item {
        width: calc(100% / 4 - 50px);
        max-width: calc(100% / 4 - 50px);
        margin: 5px;
           
        font-size: 16px;
        line-height: 1.5em;
        border: 1px solid #FADF00;
        transition: filter .25s ease-in-out;
    }

    .grid .grid-item > a > div div:not(:empty) {
        padding: 1em;
    }

    .grid .grid-item .timestamp {
        background: url('images/logos/logo-nur-bild.svg')  1.1em center / 32px 32px no-repeat;

        padding-left: 55px!important;
        text-align: left;
        font-size: 15px;
        font-weight:bold;
    }

    .grid .grid-item .timestamp > span {
           color: #878787;
        font-size: 14px;
        font-weight: normal;
        margin-top: -2px;
        padding: 0;
        display: block;
    }

    .grid .img {
        display:block;
        width: 100%;
    }

    @supports not (-ms-high-contrast: none) {
        .grid .img {
            opacity: 0.9;
        }
    }


    @media screen and (max-width:2200px) {
        .grid .grid-item {
            width: calc(100% / 4 - 40px);
            max-width: calc(100% / 4 - 40px);
        }
    }

    @media screen and (max-width:1400px) {
        .grid .grid-item {
            width: calc(100% / 3 - 30px);
            max-width: calc(100% / 3 - 30px);
        }
    }

   @media screen and (max-width:1023px) {
        .grid .grid-item {
            width: calc(100% / 2 - 30px);
            max-width: calc(100% / 2 - 30px);
        }
    }

    @media screen and (max-width:767px) {
        .grid .grid-item {
            max-width: 100%;
            width: 100%;
        }

        .default__social .noscroll main {
            overflow: auto;
        }
    }

    @media screen and (max-height:810px) {
        .col-left .subnav {
            position: relative;
            margin-top: 8em;
        }
    }


    .default__social .mediasarea {
        max-width: 1300px;
    }

    .default__social .areahead__title {
        color:#000000;
    }

    .default__social .text-area {
        text-align:left;
        padding: 0.8em;    
    }

    .default__social .fb {
           display: block;
           margin-bottom: 1em;
    }