@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;
}

/* ----------------------------------------------------------
    CI-Anpassungen Hauptenü, 
    Fix für verzerrtes Logo in mobiler Ansicht
   ---------------------------------------------------------- */

.topBorder {
    display: none;
}

#main-header #logo {
    max-height: 80px;
    height: 80px;
    margin-top: -60px;
}

@media (max-width: 980px) {
    #main-header #logo {
        height: auto !important;
        margin-top: 0;
    }
}

.et_pb_image_0.stoererstart {
    width: 36%;
    top: -460px;
    left: 50%;
    box-shadow: 0 0 40px 0 #000;
}

#top-menu li a,
.et-fixed-header #top-menu a {
    font-family: 'Noto Sans', sans-serif;
    color: var( --start-dunkelgrau) !important;
}

#top-menu li.covidlink a,
#top-menu li.current-menu-item.covidlink a,
.et-fixed-header #top-menu li.current-menu-item.covidlink > a {
    font-family: 'Noto Sans Black', sans-serif;
    text-transform: uppercase;
    color: #fff !important;
    padding: 8px !important;
}

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

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

.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 
    ------------------------------------------------------------ */


.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")
    ------------------------------------------------------------ */

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

body, .et_pb_column_1_2 .et_quote_content blockquote cite, .et_pb_column_1_2 .et_link_content a.et_link_main_url, .et_pb_column_1_3 .et_quote_content blockquote cite, .et_pb_column_3_8 .et_quote_content blockquote cite, .et_pb_column_1_4 .et_quote_content blockquote cite, .et_pb_blog_grid .et_quote_content blockquote cite, .et_pb_column_1_3 .et_link_content a.et_link_main_url, .et_pb_column_3_8 .et_link_content a.et_link_main_url, .et_pb_column_1_4 .et_link_content a.et_link_main_url, .et_pb_blog_grid .et_link_content a.et_link_main_url, body .et_pb_bg_layout_light .et_pb_post p, body .et_pb_bg_layout_dark .et_pb_post p  {
    font-family: 'Noto Sans', sans-serif;
    font-size: var(--body-fontsize) !important;
    color: var(--body-color);
}

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

strong {
    font-family: 'Noto Sans Bold Condensed', sans-serif;
    color: #000;
}

a,
.leaflet-container a {
    color: var(--start-alexianerrot);
    text-decoration: none;
}

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

h1 {
    line-height: 1.8em;
}

h2 {
    line-height: 2em;
}

h3 {
    line-height: 2.1em;
}

h4 {
    line-height: 1.5em;
}

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

h1 span, 
h2 span, 
h3 span, 
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;
}

h1 span {
    color: #fff;
    background-color: var(--start-alexianerrot);
    font-size: 40px;
}

#kopp h1 {
    line-height: 2.6em;
}

#kopp h1 span {
    font-size: 24px;
}

@media all and (min-width: 767px) {
    #kopp h1 {
        line-height: 1.5em;
    }
    #kopp h1 span {
        font-size: 32px;
    }
}



#kopp h1 span.display1 {
    font-size: 48px;
    line-height: 1.9em;
}

h2 span {
    color: #000;
    background-color: #fff;
}

h2.likeh1 span {
    color: #fff;
    background-color: #000;
}

h3 span {
    color: #fff;
    background-color: #000;
}

h3.bg-white span {
    color: #000;
    background-color: #fff;
}

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

.et_pb_text.bg-mittelrot {
    color: #fff;
    z-index: 999;
}

.sic {
    padding: 10px 20px;
    background-color: var(--start-alexianerrot);
}

#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;
}

/* -------------------------------------------------------
    Kontaktformular CF7
  ------------------------------------------------------- */

::placeholder {
  color: #777777 !important;
}

.wpcf7 input,
.wpcf7 input:focus,
.wpcf7 textarea,
.wpcf7 textarea:focus {
  border-radius: 0px;
  border: none;
}

input.form-control[type="email"],
input.form-control[type="password"],
input.form-control[type="tel"],
input.form-control[type="text"],
select.form-control,
textarea.form-control {
  height: auto;
  padding: 0.75rem;
}

.form-group {
  margin-bottom: 0.75rem;
}

.wpcf7 .ajax-loader {
  display: none;
}

.dsgvo {
  font-size: 12px;
}

.wpcf7 input.et_pb_button_gwg {
  padding: 10px 25px;
  margin-top: 20px;
  border: 1px solid #b5152b;
  border-radius: 0px;
  background-color: #b5152b;
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  font-family: 'Noto Sans Black', sans-serif;
}

input.et_pb_button_gwg:hover {
  background-color: #b5152b;
  color: #fff !important;
}

.et_pb_button:hover {
  text-decoration: none;
}

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
input[type=text], 
select, 
textarea, 
.form-control, 
.wpcf7 input, 
.wpcf7 input:focus, 
.wpcf7 textarea, 
.wpcf7 textarea:focus   {
    background-color: #ececec;
    border: 1px solid #d9d9d9;
    color: var(--body-color);
}

.form-group.acceptance {
    margin: 20px 0;
}

.wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0;
}

.wpcf7-list-item-label::before, .wpcf7-list-item-label::after {
    display: inline-block;
    width: 10px;
}

.kontaktdetails {
  position: relative;
  padding-left: 30px;
  padding-bottom: 10px;
}

.kontaktdetails::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px; 
  font-family: "fontawesome";
  content: '';
}

.kontaktdetails.adresse::before {
    content: "\f015";
}

.kontaktdetails.telefon::before {
    content: "\f095";
}

.kontaktdetails.oeffnungszeiten::before {
    content: "\f017";
}
/*  ------------------------------------------------------------  
        responsiver Schisl, mobile Ansicht
    ------------------------------------------------------------ */

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

    h1 {
        line-height: 1.7em;
    }

    h2 {
        line-height: 2em;
    }

    h3 {
        line-height: 2.1em;
    }

    h3.bg-mittelrot {
        line-height: 1.2em;
    }

    h4 {
        line-height: 1.5em;
    }

    h1 span {
        font-size: 24px;
    }

    .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);
    }
}