/*****************************/
/*  Farbe auf rot umstellen  */
/*****************************/
:root {
  --main-color: #00388c;
  --link-color: #00388c;
  --link-hover-color: #000000;
  --link-decoration-color: #00388c;
  --link-focus-outline-color: #00388c;
  --headline-color: #00388c;
  --text-color: #000000;
  --primary-color: #00388c;
  --border-color: #00388c;
  --background-color: #FFFFFF;
  --box-shadow-color: #00388c;
  --box-shadow-color2: #FFFFFF;
  --focus-outline-color: #000000;
  --blockquote-color: var(--text-color);
  --blockquote-background-color: #EEEEEE;
  --picture-background-color: #FFFFFF;
  --dienstleister-background-color: #f2f5f9;
  --table-row-even-color: #fdffa7;
  --logo-background-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #00388c;
    --link-color: #EEEEEE;
    --link-hover-color: #EEEEEE;
    --link-decoration-color: #EEEEEE;
    --headline-color: #EEEEEE;
    --text-color: #EEEEEE;
    --primary-color: #00388c;
    --border-color: #EEEEEE;
    --background-color: #333333;
    --focus-outline-color: #EEEEEE;
    --blockquote-color: var(--text-color);
    --blockquote-background-color: #666666;
    --picture-background-color: #333333;
    --dienstleister-background-color: #444;
    --table-row-even-color: #666;
    --logo-background-color: #999;
  }
}

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

/****************************************/
/* 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  ################################################## */
/* ###################################################################################################### */
/* Silbentrennung zusaetzlich in Tabellenzellen verwenden */
.gsb td {
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

/* Hintergrundfarbe fuer Logo definieren (wegen Dark-Mode!) */
.header .logo {
    background-color: var(--logo-background-color);
}

/**********************************/
/*      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;
}

/* Mindesthoehe der Startseiten-Buehne wegen Nichtnutzung vorerst reduzieren */
.stage {
    min-height: 40px;
}

/* Farbe der Ueberschriften in EURES blau */
.content h1, .content h2, .content h3, .content h4, .content h5 {
    color: var(--link-color);
}

/*  Unterueberschrift in hellblau  */
.content .subheadline p {
    color: #007bff;
    font-size: 2em;
}

/*  gelber Unterstrich unter den Ueberschriften der zweiten Ebene 
     beim Dienstleistungswegweiser entspricht dies der h4   */
.content h2::after,
.searchresult .Location h4::after {
    background-color: #ffe800;
    content: "";
    display: block;
    float: left;
    height: .1875rem;
    margin-top: .4375rem;
    position: absolute;
    width: 4.0625rem;
}

/*  bei h2 groeßeren Abstand nach unten lassen wegen dem gelben Unterstrich (Ausnahme: Akkordeon) */
.content h2:not(.gsb-toggle) {
    margin-bottom: 1em; 
}

/*  Marginalspalte: grauer Unterstrich unter den Ueberschriften der zweiten und dritten Ebene beim Doctype TextFragment  */
.supplement .addContent .TextFragment h2::after,
.supplement .addContent .TextFragment h3::after {
    background-color: #cacaca;
    content: "";
    display: block;
    float: left;
    height: .1rem;
    margin-top: .4375rem;
    position: absolute;
    width: 97%;
}

/*  gerade Tabellenzeilen gelb hinterlegen  */
.gsb table .even {
    background-color: var(--table-row-even-color)
}

/*  Tabellenheader: weisse Schrift auf EURES-blauen Grund  */
.gsb th {
    background-color: #00388c;
    color: #ffffff;
}



/* FAQ / Glossar: Ueberschrift auch bei mehrzeiligem Text linksbuendig darstellen */
.gsb-toggle .tabs-container .heading button {
  text-align: left;
}

/************************************************/
/*  Dienstleister-Visitenkarte im Suchergebnis  */
/************************************************/
.searchresult .Location {
    background-color: var(--dienstleister-background-color);
    margin-bottom: 20px;
    padding: 10px;
}

/*  Dienstleister-Visitenkarte Ueberschrift h3 soll wie h1 aussehen  */
.searchresult .Location h3 {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1rem; 
}

/*  Dienstleister-Visitenkarte Ueberschrift h4 soll wie h2 aussehen  */
.searchresult .Location h4 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding: 8px 0;
}

/*  Dienstleister-Visitenkarte bei h4 groesseren Abstand nach unten lassen wegen dem gelben Unterstrich */
.searchresult .Location .toggleEntry h4 {
    padding: 8px 0;
    margin-bottom: 0.4em;
}

.searchresult .Location .serviceProviderType {
    float:right;
    font-weight:bold;
    color: var(--link-color);
    text-transform:uppercase;
    margin-bottom: 10px;
}

.searchresult .Location .serviceProviderFacets {
    margin-bottom: 10px;
}

.searchresult .Location .contact{
    margin-top: 15px;
}

/* Abstand fuer Download-Links in der Teaser-Listen-Darstellung */
.teaser .columns > .downloadLink {
    margin-bottom: 20px;
}

/*  Karussell soll auf allen Seiten im bottom-Bereich einbindbar sein, nicht nur auf der Startseite  */
.bottom {
    outline-style: dotted;
    outline-color: #7f7f7f;
    outline-width: 2px;
    background: var(--background-color);
    padding-top: 20px;
}

.bottom .generictable h1.isFirstInSlot {
    display: none;
}

/*------------------------*/
/*          Facetten        */
/*------------------------*/
/* keine zweite Checkbox bei ausgewaehltem Facettenwert anzeigen */
.supplement .box.toggleFacet li.selectedFacet a::before {
    background: none;
}

/* bei fehlender zweiter Checkbox muss auch nicht eingerueckt werden */
.supplement .box.toggleFacet li.selectedFacet a {
    padding-left: 0px;
}

/*------------------------*/
/*  Marginalspalte        */
/*------------------------*/
/* Dialog fuer Video-Consent muss in der Marginalspalte etwas kleiner sein */
.supplement .consent-wrapper {
    padding: 15px;
}

.supplement .consent-container::before {
    font-size: 2.3rem;
}

/*---------------------------------*/
/*   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.3rem;
    }
    /* Farbe der Top-Service-Navigation in EURES blau */
    .navServiceMeta li a, .navServiceMeta li strong {
		color: var(--link-color);
	}
	/* Farbe der Primaer-Navigation in EURES blau */
	.c-nav-primary__link {
	    --link-color: revert;
	}
	/* Farbe der Flyout-Navigation in EURES blau */
	.c-flyout {
	    --link-color: revert;
    }

    /**********************/
    /*   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;
    }
    
    /* Mindesthoehe der Startseiten-Buehne wegen Nichtnutzung vorerst reduzieren */
    .stage {
        min-height: 80px;
    }

    /* 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% + 195px), #eee calc(50% + 195px));
    }
    @media only screen and (max-width: 1085px){
        .wrapperDivisions {
            background: linear-gradient(to right, #fff 66.6666666667%, #eee 66.6666666667%);
        }
    } 
    .main {
        background-image: none;
    }
    
    /************************************************/
    /*  Dienstleister-Visitenkarte im Suchergebnis  */
    /************************************************/
    .searchresult .Location {
        margin-right: 5px;
    }

    /*---------------------------------*/
    /*   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;
    }
}