/*******************************/
/*  gesamte Seite vergroeßern  */
/*******************************/
html {
  font-size: 11px;
}

/****************************************/
/* Umstellen auf serifenfreie Schrift   */
/****************************************/
/* foundation.css */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* small.css */
.navBreadcrumbsVertical .level1 a {
  font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.navBreadcrumbsVertical > strong {
  font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.sitemap > li > a {
  font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.teaser-switcher .teaser span {
  font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* medium.css */
@media only screen and (min-width: 37.563em), print {
  .timeline__date {
    font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  }
}


/* large.css */
@media only screen and (min-width: 64em) {
  .c-nav-primary__link {
    font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  }

  .navPrimary > ul > li a,
  .navPrimary > ul > li strong {
    font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  }

  .servicebox .social a em,
  .servicebox .social strong em {
    font-family: "bundessansweb", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  }
}

/* ###################################################################################################### */
/* ############################################## small  ################################################## */
/* ###################################################################################################### */
.navServiceMeta li {
    font-size: 1.4rem;
}


/**********************************/
/*      BA-Buttons (fuer Cookie-Dialog)    */
/**********************************/
.ba-btn, .btn {
    min-width: 200px;
    height: 40px;
    padding: 9.333px 19px 8px 19px;
    border: 2px solid;
    border-radius: 4px;
    font-size: 14px;
    /*font-family: Roboto Medium,sans-serif;*/
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    line-height: 14px;
    text-transform: uppercase;
    background-color: var(--main-color);
    border-color: var(--main-color);
    cursor: pointer;
}

.ba-btn-primary:focus:not(:disabled), .ba-btn-primary:hover:not(:disabled), .btn-primary:focus:not(:disabled), .btn-primary:hover:not(:disabled) {
    border-color: var(--text-color);
    background-color: var(--main-color);
}

/**********************/
/*   Cookie-Dialog    */
/**********************/
.modal {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal .modal-dialog {
    margin: 10px;
}

.modal-content {
    position: relative;
    background-color: var(--background-color);
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0;
    top: 195px;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-header .modal-title {
    font-size: 2rem;
    margin-bottom: 0;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-body form legend {
    margin-bottom: 10px;
}

.modal-body h2, .modal-body label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    padding-right: 50px;
}

.modal-body p, .modal-body a, .modal-body legend {
    font-size: 1.5rem;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
    
}

.modal-body .tabs-container .heading {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--link-color);
}

.modal-body .tabs-container .heading::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 10px;
    margin-left: 10px;
    margin-top: 12px;
}

.modal-body .tabs-container .heading.active-control::after {
    background: url(/SiteGlobals/Frontend/Images/icons/sprite.png?__blob=normal) no-repeat -1372px -604px;
}

.modal-body .tabs-container .heading.inactive-control::after {
    background: url(/SiteGlobals/Frontend/Images/icons/sprite.png?__blob=normal) no-repeat -1372px -712px;
}

.modal-body input[type="checkbox"] {
    margin-top: 5px;
}

.modal-footer {
    padding: 15px;
}

.modal-footer .ba-btn {
    width: 100%;
    margin-left: 0;
    text-decoration: none;
    display: inline;
}

.modal-footer .ba-btn-contrast {
    border: 2px solid #595959;
    background-color: transparent;
    color: var(--text-color);
    margin-bottom: 20px;
}

.modal-footer .ba-btn-contrast:hover, .modal-footer .ba-btn-contrast:focus {
    background-color: #595959;
    color: #FFFFFF;
}

/*---------------------------------*/
/*   Externer Link im Footer    */
/*---------------------------------*/
.footer a.external::before {
    top: 13px;
    left: -14px;
}
/* Spezialfall: Textbaustein im Footer (z.B. JC Emden) */
.footer a.ExternalLink::before {
    top: 19px;
}


/* ###################################################################################################### */
/* ############################################## medium  ################################################ */
/* ###################################################################################################### */
@media only screen and (min-width: 37.563em) {
    /**********************/
    /*   Cookie-Dialog    */
    /**********************/
    .modal .modal-dialog {
        width: auto;
        margin: 30px 10px;
    }

    .modal-footer {
        padding: 15px;
        text-align: right;
    }

    .modal-footer .ba-btn {
        width: auto;
        margin-left: 10px !important;
        min-width: 0;
        margin-bottom: 0;
    }
}

/* ###################################################################################################### */
/* ############################################## large ################################################### */
/* ###################################################################################################### */
@media only screen and (min-width: 64em) {
    /* Schriftgroesse der Top-Service-Navigation erhoehen */
    .navServiceMeta li {
        font-size: 1.4rem;
    }

    /**********************/
    /*   Cookie-Dialog    */
    /**********************/
    .modal-content {
        top: 110px;
    }

    .modal .modal-dialog {
        max-width: 760px;
        margin: 30px auto;
    }

    .cookie-form .cookie-checkboxes {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }


    /* der Primaer-Navigation automatisch mehr Platz geben, falls diese zu viele Menuepunkte enthaelt */
    .c-nav-primary{
        min-height: 57px;
        height: auto;
    }

    /* Verdeckung der dotted line zum Karussell bzw. Breadcrumb durch zu lange Marginalspalten verhindern */
    .wrapperDivisions .supplement{
        margin-bottom: 2px;
    }

    /* Barrierefreiheit: Weissflaechen im Hochkontrastmodus vermeiden       */
    /* (ersetzt die Hintergrund-Bilder durch einen definierten Farbverlauf) */
    .wrapperDivisions {
        background: linear-gradient(to right, #fff calc(50% + 177px), #eee calc(50% + 177px));
    }
    @media only screen and (max-width: 1085px){
        .wrapperDivisions {
            background: linear-gradient(to right, #fff 66.6666666667%, #eee 66.6666666667%);
        }
    } 
    .main {
        background-image: none;
    }

    /*---------------------------------*/
    /*   Externer Link im Footer    */
    /*---------------------------------*/
    .footer a.external::before {
        top: 15px;
        background-position: -1242px -478px;
    }
    /* Spezialfall: Textbaustein im Footer (z.B. JC Emden) */
    .footer a.ExternalLink::before, .footer a.ExternalLink:hover::before, .footer a.ExternalLink:focus::before, .footer a.ExternalLink:active::before {
        background-image: none;
    }
}