/* icons */
.meto-icon{
    height: 15px;
    width: 15px;
}


.tm-header-overlay,
.tm-header{
    background: rgba(255,255,255,.91);

}

/* Startslider */

.meto-head-slogan .uk-flex > div{
  width: 75%;

}

.meto-head-slogan h3{
  text-align: left;
  color: black !important;
}


.meto-head-slider .uk-dotnav {
  margin-top: -50px;
}

/* Abstände */

.meto-padding-50 .uk-card-body{
  padding: 50px;
}

.meto-red-kachel{
  z-index: 1200;
}

.meto-kachel-rot{
  background-color: #df0000;
}

.meto-siegeltext {
  font-size: 12px;
}

/* Hintergrundfarben */

.meto-bg-orange{
  background-color: #ff964f !important;
}

.meto-kids .uk-grid .el-item {
    background-color: #ff964f !important;
}

.meto-kids .uk-first-column .el-item {
      background-color: #FD8249 !important;
}

.meto-kiefergelenk .uk-first-column .el-item {
      background-color: #d8c7d0 !important;
}

.meto-bg-pink{
  background-color: #ff8b8c !important;
}

.meto-bg-pink .uk-grid .el-item {
  background-color: #ff8b8c !important;
}

.meto-bg-pink .uk-first-column > .el-item {
      background-color: #ff6364 !important;
}

.meto-bg-grau {
  background-color: #f6f6f6 !important;
}

.meto-bg-rose{
  background-color: #FCEADF !important;
}

.meto-bg-rot {
  background-color: #DF0000 !important;
}

.meto-bg-dunkelgrau{
   background-color: #b0b9be !important;
}

.meto-bg-hellgrau{
    background-color: #f2f2f2 !important;
}

.meto-bg-beige{
    background-color: #e1e1e1 !important;
}

.meto-bg-no{
    background: none;
}

.meto-bg-grau-next > div > div > div{
    background-color: #f2f2f2 !important;
}


.meto-zwei-bild > div > div:nth-child(2){
    padding-top: 200px;

}


/* Textfarben */

a.meto-txt-rot,
.meto-txt-rot{
    color: #df0000 !important;
}

.meto-txt-pink{
  color: 	#ff8b8c !important;
}

.meto-txt-weiss{
  color: 	#ffffff !important;
}


.meto-title-small .uk-heading-medium {
    font-size: 3.6rem;
}

.uk-card-primary.meto-kachel-rot h2.uk-heading-medium{
  font-size: 3.4rem;
  line-height: 1em;
}



  .uk-card-large.meto-red-kachel {
    padding: 50px;
}


@media only screen and (max-width: 1600px) {


    .uk-heading-2xlarge {
        font-size: 8rem;
    }

    .uk-heading-medium{
        font-size: 3.5rem;
    }

    .uk-text-meta{
        font-size: 37px;
    }

    .meto-title-small .uk-heading-medium {
        font-size: 3.3rem;
    }

   .meto-bg-bilder-1-2 .uk-background-norepeat{
       background-size: 50% !important;
    }
}



@media only screen and (max-width: 1550px) {




    .uk-heading-medium{
        font-size: 3rem;
    }

    .meto-red-kachel h3.uk-heading-medium{
        font-size: 2.5rem;
    }


    .meto-title-small .uk-heading-medium {
        font-size: 2.6rem;
    }

    .uk-heading-small{
        font-size: 40px;
    }





}

@media only screen and (max-width: 1350px) {

    .uk-heading-medium{
        font-size: 2.5rem;
    }

    .meto-red-kachel h3.uk-heading-medium{
        font-size: 2rem;
    }



    .uk-text-meta{
        font-size: 30px;
    }

    .meto-title-small .uk-heading-medium {
        font-size: 2.2rem;
    }

    .uk-heading-small{
        font-size: 30px;
    }

}



@media only screen and (max-width: 1300px) {


  .uk-container{
    padding-left: 30px;
    padding-right: 30px;
  }

  .uk-h1, h1{
    font-size: 45px;
  }

  .uk-h2, h2 {
    font-size: 40px;
  }


}


@media only screen and (max-width: 1200px) {
    .uk-heading-2xlarge {
        font-size: 6rem;
    }

    .uk-card{
        padding: 40px;
    }
}


@media only screen and (max-width: 1024px) {

    .uk-heading-2xlarge {
        font-size: 6rem;
    }

    .uk-text-meta{
        font-size: 27px;
    }

  .uk-h1, h1{
    font-size: 35px;
  }

  .uk-h2, h2 {
    font-size: 32px;
  }

  .tm-page .meto-content-top.uk-section{
    padding-top: 30px;
  }


}


@media only screen and (max-width: 959px) {

     .uk-heading-2xlarge {
        font-size: 4rem;
    }

    .meto-padding-left-50{
        padding-left: 300px;
    }

    .meto-padding-left-50 .uk-heading-large{
        font-size: 2.4rem;
    }

    .uk-offcanvas-bar .uk-nav-primary > li > a,
    .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a{
        color: white !important;
    }

    .uk-nav-primary > li > a{
        font-size: 22px;
    }

    .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a{
        font-size: 16px;
    }
    
    .meto-small-wrapper .uk-h3, .meto-small-wrapper h3{
      font-size: 20px;
    }
    
    .uk-heading-small{
      font-size: 54px;
    }

}

/* iPad / Tablet: eigenständige Headerproportionen für Hoch- und Querformat.
   Der Bereich endet bei 1024px; Smartphone und Desktop bleiben separat. */
@media only screen and (min-width: 641px) and (max-width: 1024px) {

    .meto-mobile-hero {
        box-sizing: border-box;
        min-height: clamp(360px, 48vw, 520px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-attachment: scroll !important;
    }

    /* Bildschirmhohe Bildköpfe mit eingeblendeten Texten, z. B. Jobs. */
    .meto-mobile-hero--viewport {
        min-height: clamp(520px, 68svh, 720px) !important;
        padding-top: clamp(70px, 9vw, 110px) !important;
        padding-bottom: clamp(70px, 9vw, 110px) !important;
    }

    /* Slider der Start- und Datenschutzseite. */
    .meto-mobile-hero-slides {
        height: clamp(400px, 52vw, 560px) !important;
        min-height: clamp(400px, 52vw, 560px) !important;
    }

    .meto-mobile-hero-slides img[uk-cover] {
        object-fit: cover;
        object-position: center center;
    }
}

@media only screen and (max-width: 670px) {

    .uk-heading-2xlarge {
        font-size: 3rem;
    }

    .meto-padding-left-50{
        padding-left: 300px;
    }

    .meto-padding-left-50 .uk-heading-large{
        font-size: 2rem;
    }
    
    .uk-h1, h1 {
      font-size: 30px;
    }
    
    .uk-card.meto-padding-20{
      padding: 0;
    }
    
    .meto-padding-20 .uk-card-body{
      padding-left: 26px;
      padding-right: 26px;
    }


}

@media only screen and (max-width: 640px) {

    /* Mobile Headerbilder: kompakte, fingerfreundliche Bildfläche ohne
       Auswirkungen auf Desktop oder Bilder im eigentlichen Seiteninhalt. */
    .meto-mobile-hero {
        box-sizing: border-box;
        min-height: clamp(260px, 72vw, 420px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-attachment: scroll !important;
    }

    /* Header mit Text im Bild (z. B. Jobs) brauchen mehr vertikalen Raum. */
    .meto-mobile-hero--viewport {
        min-height: clamp(460px, 68svh, 620px) !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Startseiten- und Datenschutz-Header als Slider. */
    .meto-mobile-hero-slides {
        height: clamp(300px, 78vw, 420px) !important;
        min-height: clamp(300px, 78vw, 420px) !important;
    }

    .meto-mobile-hero-slides img[uk-cover] {
        object-fit: cover;
        object-position: center center;
    }

    .uk-heading-large{
    font-size: 2.5rem;
    line-height: 3rem;
  }
  
  .uk-container{
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .meto-small-wrapper .meto-small-teaser:nth-child(2n){
    background: #f7f7f7;
    
  }
  
  
  .meto-small-wrapper .meto-small-teaser:nth-child(2n+1){
    background: rgb(233, 233, 232);
    
  }
  
  .meto-small-wrapper .meto-small-teaser{
    padding: 10px;
  }
  
  .meto-small-wrapper .uk-width-large{
    width: 100%;
  }
  
  
}


/* Mobil */

@media only screen and (max-width: 580px) {


  .uk-h1, h1{
    font-size: 30px;
  }

  .uk-h2, h2 {
    font-size: 25px;
  }

  .uk-h3, h3 {
    font-size: 23px;
  }

  .uk-h4, h4 {
    font-size: 18px;
  }

  .uk-heading-2xlarge {
    font-size: 3rem;
  }


  
}


/* Mobil */

@media only screen and (max-width: 460px) {


  .uk-h1, h1{
    font-size: 25px;
  }

  .uk-h2, h2 {
    font-size: 20px;
  }

  .uk-h3, h3 {
    font-size: 18px;
  }

  .uk-h4, h4 {
    font-size: 16px;
  }

  .uk-heading-2xlarge {
    font-size: 2.5rem;
  }

  .uk-heading-large{
    line-height: 3rem;
  }

}

@media only screen and (max-width: 400px) {
  .uk-heading-large{
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
  
}

/* Smartphone-Typografie: Lange deutsche Überschriften bleiben innerhalb
   des sichtbaren Bereichs. Desktop und Tablet ab 641px sind nicht betroffen. */
@media only screen and (max-width: 640px) {

  /* Ein alter mobiler Versatz von 300px hat Überschriften unnötig eingeengt. */
  .meto-padding-left-50 {
    padding-left: 0 !important;
  }

  h1,
  h2,
  h3,
  h4,
  .uk-h1,
  .uk-h2,
  .uk-h3,
  .uk-h4,
  .uk-heading-large,
  .uk-heading-medium,
  .uk-heading-small,
  .uk-heading-2xlarge {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: balance;
  }

  /* Auf breiteren Smartphones bleibt die bisherige Zielgröße von 2.5rem
     erhalten; auf schmalen Geräten wird nur so weit wie nötig verkleinert. */
  .uk-heading-large {
    font-size: clamp(2.1rem, 10vw, 2.5rem);
    line-height: 1.06;
  }

  .uk-heading-medium {
    font-size: clamp(2rem, 9.5vw, 2.35rem);
    line-height: 1.1;
  }

  .uk-heading-small {
    font-size: clamp(1.8rem, 8.5vw, 2.15rem);
    line-height: 1.12;
  }

  .uk-heading-2xlarge {
    font-size: clamp(2.1rem, 10vw, 2.5rem);
    line-height: 1.06;
  }
}