/* -----------------------------------------
    Meerbusch
-------------------------------------------- */

:root {
  --blau: #004077;
  --hellblau: #c9e9fb;
  --gelb: #ffd400;
  --gruen: #4daf46;
  --bg: #edebe3;
  --pink: #a861a4;
  --dunkelgrau: #333333;
}


@font-face {
  font-family: 'TheSans';
  src: url('./fonts/TheSansC5-Plain.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TheSans';
  src: url('./fonts/TheSansC5-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TheSans';
  src: url('./fonts/TheSansC5-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TheSans';
  src: url('./fonts/TheSansC5-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html, body {
  font-family: 'TheSans', sans-serif;
}

a:hover { text-decoration: none;}

.bg_dunkelgrau {   background-color: var(--dunkelgrau) !important; }
.bg_hellblau  {   background-color: var(--hellblau) !important; }
.bg_gelb      {   background-color: var(--gelb) !important; }
.bg_gruen     {   background-color: var(--gruen) !important; }
.bg_gruen     {   background-color: var(--gruen) !important; }

/* -----------------------------------------
    Footer
-------------------------------------------- */
footer {
  background:#333; 
  color: white; 
  padding: 90px;
}

footer img { width: 100%;}

@media (max-width: 800px) {
  
  footer {
    padding: 20px;
  }
 
  footer * {
    text-align: center;
  }
}


/* -----------------------------------------
    01 Navigation 
-------------------------------------------- */
.navigation {
   position:relative;
   z-index: 100;
}

.navigation .uk-navbar-nav a {
   color: var(--blau);
   font-size: clamp(15px, 1.5vw, 17px);
}

.navigation-logo { 
   height: 120px;
}

.navigation-mobile-logo {
   width: 80%;
}

header.navigation { 

   padding: 15px;
}

.navigation-termin-banner {
    position: absolute;
    right: 5%;
    bottom: -40px;
    transform: translateY(50%);
    width: 150px;
}


@media (max-width: 800px) {
    .navigation-logo { 
        height: auto;
        width: 90%;
        object-fit: cover;
        object-position: center;
        
    }

}


/* -----------------------------------------
    Termin vereinbaren
-------------------------------------------- */

.terminteaser {
  position:relative;
}
.terminteaser .uk-card {
   background-color:#c9e9fb;
   box-shadow: none;
}
.terminteaser-topline {
   padding: 6px 36px;
   background-color: var(--blau);
    font-size: 19px;
    font-weight: 900;
   color: white;
}
.terminteaser-text {
   padding-top: 1em;
   font-size: 16px;
   color:#484847; 
}
.terminteaser-topline-gelb {
   background-color: #FFD400;
   font-size: 19px;
   ont-weight: 900;
   color: var(--blau);
}
.terminteaser-layer {
   width: 180px;
   height: auto;
   z-index: 100;
   top: -20px;
}

a.terminteaser-link {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMCwwaDI0djI0aC0yNHYtMjRaIiBmaWxsPSJub25lIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwM0M3NSIgZD0iTTEyLDRsLTEuNDEsMS40MWw1LjU4LDUuNTloLTEyLjE3djJoMTIuMTdsLTUuNTgsNS41OWwxLjQxLDEuNDFsOCwtOGwtOCwtOFoiPjwvcGF0aD48L3N2Zz4=');
    background-repeat: no-repeat;
    padding-left: 25px;
    color: #003C75;
    font-weight: 600;
    font-size: 16px;
}


@media (max-width: 800px) {

   .terminteaser-layer {
       position: relative !important;
       top: 0px;
       margin-bottom: 2em;
       margin-top: -4em;
    }

    
}

/* -----------------------------------------
    50/50 Text
-------------------------------------------- */

@media (max-width: 800px) {
  /* .text5050 * { text-align: center;}  */
}



/* -----------------------------------------
    Intro text
-------------------------------------------- */
.intro * {color: var(--blau);}

@media (max-width: 800px) {
    .intro * {
        text-align: center;
    }
}


/* -----------------------------------------
    Zitat
-------------------------------------------- */

.zitat {  }
.zitat-text p { 
  font-size: clamp(21px, 23px, 28px);
  font-style: italic; 

}
.zitat-autor p { font-size: 15px; letter-spacing: 2px;}
img.zitat-portrait {
   object-fit: cover;
   width: 100%;
   max-width: 360px;
   height: auto;
   border-radius: 50%;
}


@media (max-width: 800px) {
    
    
    .zitat-text p { 
        font-size: 17px;
    }
    
    .zitat-autor p { 
        font-size: 15px; 
        letter-spacing: 2px;
    }
    
    img.zitat-portrait {
        object-fit: cover;
        width: 100%;
        max-width: 260px;
        height: auto;
        border-radius: 50%;
    }

    section.zitat .uk-card {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 0;
        padding-top: 0;

    }
}


/* -----------------------------------------
    Ikonbar
-------------------------------------------- */

.ikonbar {
  background-color: #EFEFEF;
}

.ikonbar h2 {
  background-color:var(--gelb);
  color: var(--blau);
  margin-bottom: 1em;
}

.ikonbar-text p:last-child {
  margin-bottom: 0;
  
}

@media (max-width: 800px) {
  
    section.ikonbar {
      text-align: center;
    }
    
    .ikonbar .uk-card,
    .ikonbar .uk-grid { 

        padding: 0;
        margin:0;
    }
    
    .ikonbar .uk-card {
        margin-bottom: 4em;
    }
    
    .ikonbar .uk-grid  * {
        padding-left:0px;
        text-align: center;

    }
    
    .ikonbar .uk-grid .uk-flex-middle > div {
        width: 100%
    }
 
    .ikonbar .uk-grid .uk-flex-middle > div > img {
        max-width: 150px;
    }
    
}







/* -----------------------------------------
    News
-------------------------------------------- */
.news-teaserlist {
  background-color: var(--hellblau);
}
.news-teaserlist  h3 a { 
    color:var(--blau);
    font-size: 22px;
    
}
.news-teaserlist h1 { color:var(--blau); }
a.news-teaser-more { color:var(--pink);}


@media (max-width: 800px) {
 
    .news-teaserlist h1 {
        font-size: 24px;
        text-align: center !important;
    }
    
    .news-teaserlist h2 {
        font-size: 20px;
         text-align: center !important;
    }
    
    .news-teaserlist .uk-text-right {
        text-align: center !important;
        margin-bottom: 2em !important;
    }
    
    .news-teaserlist .news-list-entry {
        margin-bottom: 3em;
    }
    
}



/* -----------------------------------------
    Consent Manager
-------------------------------------------- */

.consent_manager-save-selection, .consent_manager-accept-all {

    background: #161 !important;
    border: 1px solid #161 !important;
    
}


/* -----------------------------------------
     RESET
-------------------------------------------- */
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
    font-family: 'TheSans', sans-serif;
}

a.more-ikon {

   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMCwwaDI0djI0aC0yNHYtMjRaIiBmaWxsPSJub25lIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwM0M3NSIgZD0iTTEyLDRsLTEuNDEsMS40MWw1LjU4LDUuNTloLTEyLjE3djJoMTIuMTdsLTUuNTgsNS41OWwxLjQxLDEuNDFsOCwtOGwtOCwtOFoiPjwvcGF0aD48L3N2Zz4=');
   background-repeat: no-repeat;
   padding-left: 25px;
   color: #003C75;
   font-weight: 600;
   font-size: 16px;
}



/* -----------------------------------------
    News
-------------------------------------------- */
.news {background-color: #ffeba2;}
.news h2 {
   color: var(--blau);
   font-weight: 900;
}

.news a {color: var(--blau);}



/* -----------------------------------------
  Artikel
-------------------------------------------- */


.artintro-topline {
   border-bottom: 1px dotted var(--blau);
   font-weight: 300;
   text-transform: uppercase;
   font-size: 19px;
   letter-spacing: 2px;
   color: var(--blau);
   margin-bottom: 2em;
   padding-bottom: 8px;
}

section.artintro { 
   
   color: black;
   background-repeat: no-repeat;
   background-position: right 5% bottom;
   background-size: 200px;
}




section.artintro h1,
section.artintro h2,
section.artintro h3 { 
   color: #003d76;
   /* width: 75%; */
}

img.intro-image-overflow {
   position:absolute;
   top:0;
   left: 0;
   right: 0;
}

@media (min-width: 110px) {

  img.intro-image-overflow {
    position: relative !important;
    display: block;
    top:0;
    left: 0;
    right: 0;
   }

 
}




/* -----------------------------------------
    Slider 
-------------------------------------------- */

.coverslider {
   margin-bottom: 3em;
}

.coverslider-teaser {
   background-color: rgba(255, 212, 0, 0.85);
   padding: 30px;
   max-width: 40vw;
}

.coverslider-teaser * {
   padding:0;
   margin:0;
   color: #003d76 !important;
}

.coverslider-teaser h3 {
   font-size: clamp(1.5rem, 2.5vw, 4rem);
    line-height: 1.3em !important;
    margin-bottom: 0.5rem;
}

.coverslider-teaser p {
   font-size: clamp(16px, 19px, 22px); 
}


.uk-position-center-right.coverslider-teaser {
   padding-right: 60px;
}

.uk-position-center-left.coverslider-teaser {
   padding-left: 60px;
}

.coverslider .uk-dotnav {
   margin-top: 16px
}

.coverslider .uk-dotnav a {
   border: 1px solid #003d76 !important;
}

.coverslider .uk-dotnav li.uk-active a {
   background-color: #003d76 !important;
}

@media (max-width: 800px) {
    
    .coverslider-teaser h3 {
        font-size: 15px;
        margin-bottom: 0.25rem;
    }
    
    .coverslider-teaser p {
        display:none 
    }

    .coverslider-teaser {
        padding: 15px 20px;
    }

    .uk-position-center-left.coverslider-teaser {
         padding-left: 30px;
     }
    
 
}



/* -----------------------------------------
    Siegel
-------------------------------------------- */

section.siegel {margin-bottom: clamp(2em, 4em, 6em);}
.siegel-image { 
   object-fit: contain;
   height: 160px;
   width: 160px;
}

.siegel-mobil { margin-top: 1.5em;}