/*------------------------------------------------------------------------------*/
/*     Farbschema auf iXNet Farbcode (a2185b) umstellen -                       */
/*------------------------------------------------------------------------------*/
:root {
  --main-color: #a2185b;
  --link-color: #a2185b;
  --link-hover-color: #000000;
  --link-decoration-color: #a2185b;
  --link-focus-outline-color: #a2185b;
  --headline-color: #a2185b;
  --text-color: #000000;
  --primary-color: #a2185b;
  --border-color: #a2185b;
  --background-color: #FFFFFF;
  --box-shadow-color: #a2185b;
  --box-shadow-color2: #FFFFFF;
  --focus-outline-color: #000000;
  --blockquote-color: var(--text-color);
  --blockquote-background-color: #EEEEEE;
  --picture-background-color: #FFFFFF;
  --table-row-even-color: #fdffa7;
  --logo-background-color: transparent;
  --footer-background-color: #00478e;
}

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

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

/*******************************************/
/* Umstellen auf spezielle iXNet-Schrift   */
/*******************************************/
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/ibm-plex/ibm-plex-sans-v7-latin-regular.woff2") format("woff2"), url("/static/fonts/ibm-plex/ibm-plex-sans-v7-latin-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/ibm-plex/ibm-plex-sans-v7-latin-italic.woff2") format("woff2"), url("/static/fonts/ibm-plex/ibm-plex-sans-v7-latin-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/ibm-plex/ibm-plex-sans-v7-latin-700.woff2") format("woff2"), url("/static/fonts/ibm-plex/ibm-plex-sans-v7-latin-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("/static/fonts/ibm-plex/ibm-plex-sans-condensed-v6-latin-600.woff2") format("woff2"), url("/static/fonts/ibm-plex/ibm-plex-sans-condensed-v6-latin-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("/static/fonts/ibm-plex/ibm-plex-sans-condensed-v6-latin-700.woff2") format("woff2"), url("/static/fonts/ibm-plex/ibm-plex-sans-condensed-v6-latin-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

/* foundation.css */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: "IBM Plex Sans Condensed", Calibri, "Droid Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}


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

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

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

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


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


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

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

    .servicebox .social a em,
    .servicebox .social strong em {
        font-family: "IBM Plex Sans Condensed", 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;
}

.footer {
  background-color: var(--footer-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;
}

/* REHADAT-Suchformular auf der Startseite */
form[name="rehadatform"],
form[name="rehadatform"] .formHandle,
form[name="rehadatform"] .submit {
    margin-bottom: 0;
}

/* LinkedIn-Icon im mobilen Menue */
.c-mobile-nav__meta-item.navLinkedIn > a, .c-mobile-nav__meta-item.navLinkedIn > strong {
    position: relative;
    padding-left: 40px;
}

.c-mobile-nav__meta-item.navLinkedIn > a::before, .c-mobile-nav__meta-item.navLinkedIn > a:hover::before{
    width: 20px;
    height: 17px;
    background: url(/SiteGlobals/Frontend/Images/icons/linkedIn-white.png?__blob=normal) no-repeat;
    top: 12px;
    left: 10px;
}

/* LinkedIn-Linktext im mobilen Menue ("abonnieren" entfernen) */
.c-mobile-nav__meta-item.navLinkedIn em {
    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;
}

/*----------------------------------------------------*/
/* Darstellung eines eingebetteteten Audio-Dokuments  */
/*----------------------------------------------------*/
.mejs-wrapper.audio {
  padding-bottom: 30px;
}

.mejs__container.mejs__audio, .mejs-container.mejs-audio {
  min-height: 0;
}

/* Ueberschrift der Aktuelles-Tabelle auf der Startseite vergroessern (war im GSB 7.2 mit h1 ausgezeichnet...) */
.gsb.startseite .content #newsHead {
    padding-top: 20px;
    font-size: 2.2rem;
}

/*---------------------------------*/
/*   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 Primaer-Navigation in Euroguidance Farbe */
	.c-nav-primary__link {
	    --link-color: revert;
	}
	/* Farbe der Flyout-Navigation in Euroguidance Farbe */
	.c-flyout {
	    --link-color: revert;
    }
    
    /* LinkedIn-Icon im Service-Footer */
    .servicebox .navLinkedIn a::before {
        width: 36px;
        height: 36px;
        background: url(/SiteGlobals/Frontend/Images/icons/linkedIn-purple.png?__blob=normal) no-repeat;
    }

    .servicebox .navLinkedIn a:active::before, .servicebox .navLinkedIn a:focus::before, .servicebox .navLinkedIn a:hover::before {
        background: url(/SiteGlobals/Frontend/Images/icons/linkedIn-black.png?__blob=normal) no-repeat;
    }

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

    /* 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;
    }
    
    /*---------------------------------------------------------------------*/
    /*   Externer Link im Footer                                           */
    /*   (Achtung: der Pfeil war vorher schwarz, aber unklar,              */
    /*   ob das ueberhaupt verwendet wird, daher auf weiss umgefaerbt)     */
    /*---------------------------------------------------------------------*/
    .footer a.external::before {
        top: 15px;
        background-position: -158px -1213px;
    }
    
    /* 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;
    }
}