@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: 'Noto Sans Light';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: 'Noto Sans Bold';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Black';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-Black.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Light Condensed';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-CondensedLight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Bold Condensed';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-CondensedBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Black Condensed';
    src: url('../fonts/noto-fonts-20201206-phase3/NotoSans-CondensedBlack.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

  
:root {
    --start-alexianerrot: #ad2932;
    --start-alexianerrot90: rgba(173,41,50,.9);
    --start-mittelrot: #941b2b;
    --start-dunkelrot: #681417;
    --start-dunkelrot50: rgba(104,20,23,.5);
    --start-dunkelrot20: #94373f;
    --start-alexianerblau: #5ea0c3;
    --start-himmelblau: #8bb0cb;
    --start-blassblau: #dbe4ed;
    --start-graublau: #4078a1;
    --start-aschblau: #415b81;
    --start-dunkelblau: #2f2d4f;
    --start-hellgrau: #ececec;
    --start-mittelgrau: #c6c6c5;
    --start-dunkelgrau: #6f6f6e;
    --start-hellviolett: #837693;
    --start-violett: #6d5f80;
    --start-dunkelviolett: #5b4563;
    --start-hellflieder: #bf9dae;
    --start-flieder: #a07693;
    --start-dunkelflieder: #89516e;
    --body-fontsize: 18px;
    --body-color: #1d1d1b;
}

.et_pb_text {
    word-wrap: normal;
}

/*  ------------------------------------------------------------  
        Schmuckstreifen
        /?design=2
    ------------------------------------------------------------ */

.grafikstreifen {
    display: flex;
    height: 30px;
    position: relative;
    /* z-index: 999; */
    background-color: var(--start-blassblau);
}

/* .grafikstreifen.ellipse .item {
    height: 30px;
    width: 16.7%;
    padding: 0;
    border: 0;
} */

.grafikstreifen.circle .item {
    height: 30px;
    width: 132px;
    padding: 0;
    border: 0;
}

.spacer_l {
    height: 30px;
    width: 100px;
}

.spacer_r {
    height: 30px;
    flex-grow: 1;
}

.bg-blau {
    background-color: var(--start-graublau);
}

.bg-blau .clipit {
    background-color: var(--start-aschblau);
}

.bg-rot {
    background-color: var(--start-alexianerrot);
}

.bg-rot .clipit {
    background-color: var(--start-dunkelrot);
}

.bg-flieder {
    background-color: var(--start-hellflieder);
}

.bg-flieder .clipit {
    background-color: var(--start-flieder);
}

.bg-violett {
    background-color: var(--start-hellviolett);
}

.bg-violett .clipit {
    background-color: var(--start-violett);
}

.clipit {
    height: 100%;
}

/*  ------------------------------------------------------------  
        Nomenklatur Position Kreisausschnitte: 
        Quadranten analog zu Himmelsrichtungen:
        Nord-Ost bis Nord-West 
    ------------------------------------------------------------ */


/* .ellipse .clipit.n-o {
    clip-path: ellipse(100% 30px at 0 30px);
}

.ellipse .clipit.s-o {
    clip-path: ellipse(100% 30px at 0 0);
}

.ellipse .clipit.s-w {
    clip-path: ellipse(100% 30px at 100% 0);
}

.ellipse .clipit.n-w {
    clip-path: ellipse(100% 30px at 100% 30px);
} */

.circle .clipit.n-o {
    clip-path: circle(230px at 0 230px);
}

.circle .clipit.s-o {
    clip-path: circle(230px at 0 -200px);
}

.circle .clipit.s-w {
    clip-path: circle(230px at 100% -200px);
}

.circle .clipit.n-w {
    clip-path: circle(230px at 100% 230px);
    /* safari: clip-path: circle(240px at 114% 240px); */
}

/*  ------------------------------------------------------------  
        Anpassungen Grafikstreifen bei fixed Header
    ------------------------------------------------------------ */

.et-fixed-header .grafikstreifen,
.et-fixed-header .grafikstreifen.circle .item,
.et-fixed-header .spacer_l,
.et-fixed-header .spacer_r {
    height: 20px;
}

.et-fixed-header .grafikstreifen.circle .item {
    width: 112px;
}

.et-fixed-header .circle .clipit.s-w {
    clip-path: circle(220px at 100% -200px);
}

.et-fixed-header .circle .clipit.s-o {
    clip-path: circle(220px at 0 -200px);
}

/*  ------------------------------------------------------------  
        Anpassungen responsive
    ------------------------------------------------------------ */

@media all and (min-width: 980px) and (max-width: 1100px) {
    .spacer_l {
        width: 50px;
    }   
}

@media all and (min-width: 768px) and (max-width: 979px) {
    .spacer_l {
        width: 20px;
    }
}

@media all and (max-width: 767px) {
    .spacer_l {
        width: 5px;
    }
    .grafikstreifen,
    .grafikstreifen.circle .item,
    .spacer_l,
    .spacer_r {
        height: 20px;
    } 
    .grafikstreifen.circle .item {
        width: 42px;
    }
    .circle .clipit.n-w {
        clip-path: circle(50px at 100% 50px);
    }
    .circle .clipit.n-o {
        clip-path: circle(50px at 0 50px);
    }
    .circle .clipit.s-w {
        clip-path: circle(50px at 100% -25px);
    }
    .circle .clipit.s-o {
        clip-path: circle(50px at 0 -25px);
    }

}

/*  ------------------------------------------------------------  
        Landingpage /alexianer-start allgemein
    ------------------------------------------------------------ */

.halbkreis-r::after {
    content: '';
    position: absolute;
    height: 360px;
    width: 360px;
    right: 0;
    bottom: 0;
    clip-path: circle(360px at 360px 360px);
    background-color: var(--start-dunkelrot20); 
    z-index: -999;
}

.beammeup {
    z-index: 999;
}

.flexcontainer {
    display: flex;
}

.flexitem-50 {
    min-width: 50%;
}

.flexitem-50 .phone,
.flexitem-50 .mail {
    font-size: 16px;
    margin: 0;
}

.batch-mutmach-start {
    width: 280px;
}

@media (min-width: 1280px) {
    .batch-mutmach-start {
        left: 600px;
    }
}

/*  ------------------------------------------------------------  
        Landingpage /alexianer-start pageID 16423 
        (Instanz "Standort Köln")
    ------------------------------------------------------------ */

@media (min-width: 1440px) {
    body.page-id-16423 .et_pb_with_background:first-of-type {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

body.page-id-16423 .phone,
body.page-id-16423 .mail {
    font-size: 16px;
    margin: 0;
}

body.page-id-16423,
body.page-id-16423 p  {
    font-family: 'Noto Sans Light Condensed', sans-serif;
    /* font-weight: 400; */
    font-size: var(--body-fontsize);
    color: var(--body-color);
}

body.page-id-16423 .text-white,
body.page-id-16423 #main-content .text-white a,
body.page-id-16423 .text-white p,
body.page-id-16423 .text-white strong {
    color: #fff !important;
}

body.page-id-16423 strong {
    font-family: 'Noto Sans Bold Condensed', sans-serif;
    color: #000;
}

body.page-id-16423 h1, body.page-id-16423 h2, body.page-id-16423 h3 {
    font-family: 'Noto Sans Black', sans-serif;
    text-transform: uppercase;
    /* font-weight: 900; */
    letter-spacing: 2px;
    line-height: 1.7em;
}

body.page-id-16423 h1 {
    line-height: 2.3em;
}

body.page-id-16423 h2 {
    line-height: 2em;
}

body.page-id-16423 h3 {
    line-height: 2.1em;
}

body.page-id-16423 h4 {
    line-height: 1.5em;
}

body.page-id-16423 h4 {
    font-family: 'Noto Sans Black Condensed', sans-serif;
    font-size: var(--body-fontsize);
}

body.page-id-16423 h1 span, 
body.page-id-16423 h2 span, 
body.page-id-16423 h3 span, 
body.page-id-16423 h4 span {
    padding: 6px 12px;
    /* https://flaviocopes.com/css-padding-multiple-lines/ 
    https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break*/
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-id-16423 h1 span {
    color: #fff;
    background-color: #000;
    font-size: 40px;
}

body.page-id-16423 h2 span {
    color: #000;
    background-color: #fff;
}

body.page-id-16423 h3 span {
    color: #fff;
    background-color: #000;
}

body.page-id-16423 h3.bg-white span {
    color: #000;
    background-color: #fff;
}

body.page-id-16423 h3.bg-mittelrot span {
    color: #fff;
    background-color: transparent;
    padding-left: 0;
}

body.page-id-16423 .et_pb_text.bg-mittelrot {
    color: #fff;
    z-index: 999;
}

body.page-id-16423 #main-content .et_pb_button {
    font-family: 'Noto Sans Black', sans-serif;
    color: #fff !important;
    background-color: var(--start-alexianerrot);
    border-color:  var(--start-alexianerrot);
    text-transform: uppercase;
    line-height: 1.7em;
    border-radius: 0;
}

/*  ------------------------------------------------------------  
        Landingpage /alexianer-start pageID 15515 
        (Instanz "Standort Münster")
    ------------------------------------------------------------ */

@media (min-width: 1440px) {
    body.page-id-15515 .et_pb_with_background:first-of-type {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

body.page-id-15515 .phone,
body.page-id-15515 .mail {
    font-size: 16px;
    margin: 0;
}

body.page-id-15515,
body.page-id-15515 p  {
    font-family: 'Noto Sans Light Condensed', sans-serif;
    /* font-weight: 400; */
    font-size: var(--body-fontsize);
    color: var(--body-color);
}

body.page-id-15515 .text-white,
body.page-id-15515 #main-content .text-white a,
body.page-id-15515 .text-white p,
body.page-id-15515 .text-white strong {
    color: #fff !important;
}

body.page-id-15515 strong {
    font-family: 'Noto Sans Bold Condensed', sans-serif;
    color: #000;
}

body.page-id-15515 h1, body.page-id-15515 h2, body.page-id-15515 h3 {
    font-family: 'Noto Sans Black', sans-serif;
    text-transform: uppercase;
    /* font-weight: 900; */
    letter-spacing: 2px;
    line-height: 1.7em;
}

body.page-id-15515 h1 {
    line-height: 2.3em;
}

body.page-id-15515 h2 {
    line-height: 2em;
}

body.page-id-15515 h3 {
    line-height: 2.1em;
}

body.page-id-15515 h4 {
    line-height: 1.5em;
}

body.page-id-15515 h4 {
    font-family: 'Noto Sans Black Condensed', sans-serif;
    font-size: var(--body-fontsize);
}

body.page-id-15515 h1 span, 
body.page-id-15515 h2 span, 
body.page-id-15515 h3 span, 
body.page-id-15515 h4 span {
    padding: 6px 12px;
    /* https://flaviocopes.com/css-padding-multiple-lines/ 
    https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break*/
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-id-15515 h1 span {
    color: #fff;
    background-color: #000;
    font-size: 40px;
}

body.page-id-15515 h2 span {
    color: #000;
    background-color: #fff;
}

body.page-id-15515 h3 span {
    color: #fff;
    background-color: #000;
}

body.page-id-15515 h3.bg-white span {
    color: #000;
    background-color: #fff;
}

body.page-id-15515 h3.bg-mittelrot span {
    color: #fff;
    background-color: transparent;
    padding-left: 0;
}

body.page-id-15515 .et_pb_text.bg-mittelrot {
    color: #fff;
    z-index: 999;
}

body.page-id-15515 #main-content .et_pb_button {
    font-family: 'Noto Sans Black', sans-serif;
    color: #fff !important;
    background-color: var(--start-alexianerrot);
    border-color:  var(--start-alexianerrot);
    text-transform: uppercase;
    line-height: 1.7em;
    border-radius: 0;
}

/*  ------------------------------------------------------------  
        responsiver Schisl, mobile Ansicht
    ------------------------------------------------------------ */

@media all and (max-width: 767px) {

    body.page-id-16423 h1 {
        line-height: 1.7em;
    }

    body.page-id-16423 h2 {
        line-height: 1.4em;
    }

    body.page-id-16423 h3 {
        line-height: 2.1em;
    }

    body.page-id-16423 h3.bg-mittelrot {
        line-height: 1.2em;
    }

    body.page-id-16423 h4 {
        line-height: 1.5em;
    }

    body.page-id-16423 h1 span {
        font-size: 24px;
    }

    body.page-id-16423 .halbkreis-r::after {
        height: 180px;
        width: 180px;
        clip-path: circle(180px at 180px 180px);
    }
}

@media all and (max-width: 767px) {

    body.page-id-15515 h1 {
        line-height: 1.7em;
    }

    body.page-id-15515 h2 {
        line-height: 1.4em;
    }

    body.page-id-15515 h3 {
        line-height: 2.1em;
    }

    body.page-id-15515 h3.bg-mittelrot {
        line-height: 1.2em;
    }

    body.page-id-15515 h4 {
        line-height: 1.5em;
    }

    body.page-id-15515 h1 span {
        font-size: 24px;
    }

    body.page-id-15515 .halbkreis-r::after {
        height: 180px;
        width: 180px;
        clip-path: circle(180px at 180px 180px);
    }
}