/* ==========================================================================
    TeaserCluster 1: curated cluster
   ========================================================================== */

.dm-teaserCluster--home-1 .dm-slot--mob_top:nth-of-type(1) {grid-area: mob_top1;}
.dm-teaserCluster--home-1 .dm-slot--mob_top:nth-of-type(2) {grid-area: mob_top2;}
.dm-teaserCluster--home-1 .dm-slot--mob_native { grid-area: mob_native; }
.dm-teaserCluster--home-1 .dm-slot--bb_top { grid-area: bb_top; }
.dm-teaserCluster--home-1 .dm-slot--little_local { grid-area: little_local; }
.dm-teaserCluster--home-1 .dm-teaser:first-of-type { grid-area: teaserL; }
.dm-teaserCluster--home-1 .dm-teaser:nth-of-type(8) { grid-area: teaserLEnd; }
.dm-teaserCluster--home-1 .dm-headlinesBox { grid-area: headlinesBox; }

.dm-teaserCluster--home-1 {
  grid-template-areas: "teaserL"
                       "mob_top1"
                       "headlinesBox"
                       "."
                       "."
                       "."
                       "mob_native"
                       "."
                       "."
                       "."
                       "teaserLEnd"
                       "mob_top2 "
                       ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--home-1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "teaserL    teaserL     headlinesBox"
      "bb_top     bb_top      bb_top"
      ".          .           ."
      "little_local  .           ."
      ".          teaserLEnd  teaserLEnd"
      ".          teaserLEnd  teaserLEnd"
      ;
  }
}


/* ==========================================================================
    TeaserCluster 2: Köln
   ========================================================================== */

.dm-teaserCluster--home-2 .dm-teaserClusterHeadline, .dm-teaserCluster--home-2 .dm-teaserClusterHeadlineHome { grid-area: hl; }
.dm-teaserCluster--home-2 .dm-teaserCluster__nav{ grid-area: nav; }
.dm-teaserCluster--home-2 .dm-slot--native { grid-area: native; }
.dm-teaserCluster--home-2 .dm-slot--mob_native { grid-area: mob_native; }
.dm-teaserCluster--home-2 .dm-teaser:first-of-type { grid-area: teaserL; }

.dm-teaserCluster--home-2 {
  grid-template-areas:  "hl"
                        "nav"
                        "teaserL"
                        "."
                        "."
                        "mob_native"
                        "."
                        "."
                        ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--home-2 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "hl       hl        hl"
      "nav      nav       nav"
      "teaserL  teaserL   native"
      "teaserL  teaserL   ."
      ".        .         ."
      ;
  }
}

/* ==========================================================================
    TeaserCluster 4
   ========================================================================== */

.dm-teaserCluster--home-4 .dm-teaserClusterHeadline, .dm-teaserCluster--home-4 .dm-teaserClusterHeadlineHome { grid-area: hl; }
.dm-teaserCluster--home-4 .dm-teaserCluster__nav{ grid-area: nav; }
.dm-teaserCluster--home-4 .dm-teaser:nth-of-type(1) { grid-area: teaserL; }
.dm-teaserCluster--home-4 .dm-slot--mob_top { grid-area: mob_top; }
.dm-teaserCluster--home-4 .dm-slot--middle { grid-area: middle; }


.dm-teaserCluster--home-4 {
  grid-template-areas: "hl"
                       "nav"
                       "teaserL"
                       "."
                       "."
                       "mob_top"
                       "."
                       "."
                       ;
}

@media (min-width: 768px) {

  .dm-teaserCluster--home-4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "hl         hl          hl"
      "nav        nav         nav"
      "teaserL    teaserL     middle"
      ".           .          middle"
      ".           .          ."
      ;
  }
}

/* ==========================================================================
    TeaserCluster 5
   ========================================================================== */

   .dm-teaserCluster--home-5 .dm-teaserClusterHeadline, .dm-teaserCluster--home-5 .dm-teaserClusterHeadlineHome { grid-area: hl; }
   .dm-teaserCluster--home-5 .dm-teaserCluster__nav{ grid-area: nav; }
   .dm-teaserCluster--home-5 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-5 .dm-slot--mob_native { grid-area: mob_native; }


   .dm-teaserCluster--home-5 {
     grid-template-areas: "hl"
                          "nav"
                          "."
                          "mob_native"
                          "."
                          ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-5 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl         hl          hl"
         "nav        nav         nav"
         ".          native     ."
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 6
   ========================================================================== */

   .dm-teaserCluster--home-6 .dm-teaserClusterHeadline, .dm-teaserCluster--home-6 .dm-teaserClusterHeadlineHome { grid-area: hl; }
   .dm-teaserCluster--home-6 .dm-teaserCluster__nav{ grid-area: nav; }
   .dm-teaserCluster--home-6 .dm-slot--mob_native { grid-area: mob_native; }


   .dm-teaserCluster--home-6 {
     grid-template-areas: "hl"
                         "nav"
                         "."
                         "."
                         "."
                         "mob_native"
                         ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-6 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl         hl          hl"
         "nav        nav         nav"
         ".          .            ."
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 7
   ========================================================================== */

   .dm-teaserCluster--home-7 .dm-teaserClusterHeadline, .dm-teaserCluster--home-7 .dm-teaserClusterHeadlineHome { grid-area: hl; }
   .dm-teaserCluster--home-7 .dm-teaserCluster__nav{ grid-area: nav; }
   .dm-teaserCluster--home-7 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-7 .dm-slot--mob_native { grid-area: mob_native; }
   .dm-teaserCluster--home-7 .dm-teaser:first-of-type { grid-area: teaserL; }

   .dm-teaserCluster--home-7 {
     grid-template-areas:  "hl"
                           "nav"
                           "teaserL"
                           "."
                           "."
                           "."
                           "mob_native"
                           "."
                           ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-7 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl       hl        hl"
         "nav      nav       nav"
         "teaserL  teaserL   ."
         "teaserL  teaserL   native"
         ".        .         ."
         ;
     }
   }

/* ==========================================================================
    TeaserCluster 8
   ========================================================================== */

   .dm-teaserCluster--home-8 .dm-teaserClusterHeadline, .dm-teaserCluster--home-8 .dm-teaserClusterHeadlineHome { grid-area: hl; }
   .dm-teaserCluster--home-8 .dm-teaserCluster__nav{ grid-area: nav; }
   .dm-teaserCluster--home-8 .dm-slot--mob_native { grid-area: mob_native; }
   .dm-teaserCluster--home-8 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-8 .dm-teaser:first-of-type { grid-area: teaserL; }

   .dm-teaserCluster--home-8 {
     grid-template-areas:  "hl"
                           "nav"
                           "teaserL"
                           "mob_native"
                           "."
                           "."
                           "."
                           "."
                           ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-8 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl       hl        hl"
         "nav      nav       nav"
         "teaserL  teaserL   ."
         "teaserL  teaserL   ."
         "native   .         ."
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 9
   ========================================================================== */

   .dm-teaserCluster--home-9 .dm-teaserClusterHeadline, .dm-teaserCluster--home-9 .dm-teaserClusterHeadlineHome { grid-area: hl; }
   .dm-teaserCluster--home-9 .dm-teaserCluster__nav{ grid-area: nav; }
   .dm-teaserCluster--home-9 .dm-slot--mob_native { grid-area: mob_native; }
   .dm-teaserCluster--home-9 .dm-slot--native { grid-area: native; }
   .dm-teaserCluster--home-9 .dm-teaser:first-of-type { grid-area: teaserL; }

   .dm-teaserCluster--home-9 {
     grid-template-areas:  "hl"
                           "nav"
                           "teaserL"
                           "."
                           "."
                           "."
                           "."
                           "mob_native"
                           ;
   }

   @media (min-width: 768px) {

     .dm-teaserCluster--home-9 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl       hl        hl"
         "nav      nav       nav"
         "teaserL  teaserL   ."
         "teaserL  teaserL   ."
         ".        .         native"
         ;
     }
   }


/* ==========================================================================
    TeaserCluster 10
   ========================================================================== */

   .dm-teaserCluster--home-10 .dm-teaserClusterHeadline, .dm-teaserCluster--home-10 .dm-teaserClusterHeadlineHome { grid-area: hl; }
   .dm-teaserCluster--home-10 .dm-teaserCluster__nav{ grid-area: nav; }
   .dm-teaserCluster--home-10 {
     grid-template-areas: "hl"
                          "nav"
                          "."
                          "."
                          "."
                          ;
   }
   @media (min-width: 768px) {
     .dm-teaserCluster--home-10 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl         hl          hl"
         "nav        nav         nav"
         ".          .            ."
         ;
     }
   }

/* ==========================================================================
    TeaserCluster 11: Ratgeber
  ========================================================================== */

    .dm-teaserCluster--home-11 .dm-teaserClusterHeadline, .dm-teaserCluster--home-11 .dm-teaserClusterHeadlineHome { grid-area: hl; }
    .dm-teaserCluster--home-11 .dm-teaserCluster__nav{ grid-area: nav; }
    .dm-teaserCluster--home-11 .dm-slot--native:nth-of-type(1) { grid-area: native; }
    .dm-teaserCluster--home-11 .dm-slot--native:nth-of-type(2) { grid-area: native2; }
    .dm-teaserCluster--home-11 .dm-slot--mob_native { grid-area: mob_native; }
    .dm-teaserCluster--home-11 .dm-slot--mob_top { grid-area: mob_top; }
    .dm-teaserCluster--home-11 .dm-teaser:first-of-type { grid-area: teaserL; }

    .dm-teaserCluster--home-11 {
      grid-template-areas:  "hl"
                            "nav"
                            "teaserL"
                            "mob_native"
                            "."
                            "."
                            "mob_top"
                            "."
                            ;
    }

    @media (min-width: 768px) {

      .dm-teaserCluster--home-11 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
                 "hl       hl        hl"
                 "nav      nav       nav"
                 "teaserL  teaserL   native"
                 "teaserL  teaserL   ."
                 "native2  .         ."
      ;
      }
    }

/* ==========================================================================
    TeaserCluster 12: Witz des Tages
   ========================================================================== */

    .dm-teaserCluster--home-12 .dm-teaserClusterHeadline, .dm-teaserCluster--home-12 .dm-teaserClusterHeadlineHome { grid-area: hl; }
    .dm-teaserCluster--home-12 .dm-teaserCluster__nav{ grid-area: nav; }
    .dm-teaserCluster--home-12 .dm-teaser:first-of-type { grid-area: teaserXL; }

    .dm-teaserCluster--home-12 {
      grid-template-areas:  "hl"
                            "nav"
                            "teaserXL"
                            ;
    }

    @media (min-width: 768px) {

      .dm-teaserCluster--home-12 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
                     "hl        hl        hl"
                     "nav       nav       nav"
                     "teaserXL  teaserXL  teaserXL"
      ;
      }
    }
/* ==========================================================================
    TeaserCluster 13: Sonderthemen
   ========================================================================== */

    .dm-teaserCluster--home-13 .dm-teaserClusterHeadline, .dm-teaserCluster--home-13 .dm-teaserClusterHeadlineHome { grid-area: hl; }
    .dm-teaserCluster--home-13 .dm-teaserCluster__nav{ grid-area: nav; }

    .dm-teaserCluster--home-13 {
        grid-template-areas:  "hl"
                              "nav"
                              ;
    ;
    }

    @media (min-width: 768px) {

        .dm-teaserCluster--home-13 {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas:
                         "hl        hl        hl"
                         "nav      nav       nav"
        ;
        }
    }
/* ==========================================================================
    TeaserCluster 14
   ========================================================================== */

    .dm-teaserCluster--home-14 .dm-teaserClusterHeadline, .dm-teaserCluster--home-14 .dm-teaserClusterHeadlineHome { grid-area: hl; }
    .dm-teaserCluster--home-14 .dm-teaserCluster__nav{ grid-area: nav; }
    .dm-teaserCluster--home-14 .dm-couponTeaser { grid-area: couponTeaser; }
    .dm-teaserCluster--home-14 {
     grid-template-areas: "hl"
                          "nav"
                          "."
                          "."
                          "couponTeaser"
                          ;
   }
   @media (min-width: 768px) {
     .dm-teaserCluster--home-14 {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas:
         "hl        hl          hl"
         "nav       nav         nav"
         ".         .           couponTeaser"
         ;
     }
   }



/* ==========================================================================
    SuperCluster Example that combines 2 teaserClusters
   ========================================================================== */

   /*
   .dm-teaserCluster--2 { grid-area: tc2; }
   .dm-teaserCluster--3 { grid-area: tc3; }

   .dm-superCluster--A {
     grid-template-areas:
     "tc3"
     "tc2"
     ;
   }

   @media (min-width: 768px) {
     .dm-superCluster--A {
       grid-template-columns: 2fr 1fr;
       grid-template-areas:
         "tc2 tc3"
         ;
     }
   }

   */