p, li, .abo .login {
  font-weight: 500;
}

.breadcrumb li {
  font-weight: 100;
}

header, header h2 {
  margin: 0; 
}

header h2 {
  font-family: 'Roboto';
  color: var(--ink);
  font-weight: 500;
  font-size: 36px; 
  line-height: 1.5;
}

.slab {
  font-family: 'Roboto Slab';
  font-weight: 700; 
}

@media screen and (max-width: 767px) {
  header h2 {
    font-size: 24px;
  }
  
  .slab {
    margin-left: 3%;
  }
}

/*MEINE VORTEILSWELT*/
.content-container.isarblue {
  margin-top: 120px; 
  height: 300px
}

.vorteilswelt {
  display: grid; 
}

.vorteilswelt.intro {
  grid-template-columns: 1fr 1fr;
}

.vorteilswelt.intro .images {
  grid-column: 1;
  display: grid;
  margin-top: -50px;
}

.vorteilswelt.intro .stock {
    grid-column: 1;
    width: 450px;
    top: -10px;
    margin-top: -90px;
}

.vorteilswelt.intro .text  {
  grid-column: 2;
  padding: 15% 15% 15% 3%;
  max-height: 300px;
  align-content: center;
  height: 100%; 
}

@media screen and (max-width: 767px) {
  .content-container.isarblue {
    margin-top: 230px; 
    height: 330px;
  }
  
  .vorteilswelt.intro .text {
    margin-bottom: 24px;
    align-content: end;
  }
}


/*TOPTEASER*/
.teaserbox.topaufmacherbox {
 margin-top: 56px; 

}

.teaserbox.topaufmacherbox.first {
 row-gap: 0px;
}

/*RABATTE*/
.vorteilswelt.rabatte {
  position: relative; 
  overflow: hidden; 
  padding: 3%;
}

.rabatte .text {
  grid-column: 1; 
  grid-row: 1; 
}

.rabatte .logos {
  grid-column: 2; 
  grid-row: span 2; 
  position: relative; 
}

.rabatte .logos .icon {
  width: 120px; 
  z-index: 2; 
  top: 70px;
}

.rabatte .logos .icons-hor {
  max-width: 300px;
  z-index: 2;
  position: absolute;
  left: -180px;
  top: 90px;
}

.rabatte .logos .icons-vert {
  display: none; 
}

.rabatte .logos .bubble {
  width: 320px; 
  left:-75px; 
  top: -90px;
}

.rabatte .logos img {
  position: absolute; 
}

.rabatte .newsletter {
  grid-column: 1; 
  grid-row: 2; 
}

.rabatte .newsletter form {
  display: flex; 
  width: 80%; 
  align-items: flex-end; 
}

.rabatte .newsletter input {
  background: white; 
  border: none; 
  margin-right: 10px; 
}

.rabatte .newsletter .newsletter-button {
  background-color: var(--az-red); 
  color: white; 
}

/*GENERIC*/
.subhead {
  font-family: Roboto;
  font-weight: 500;
  margin: 0;
  font-size: larger;
}

.btn  {
  margin-top: 20px;
}

/*VORTEILSWELT ABO*/
.vorteilswelt.abo {
 grid-template-columns: 1fr 1fr 1fr;
 padding: 3%;
 overflow: hidden; 
}

.abo .text {
 grid-column: 1 / span 2;
}

.abo .images {
  position: relative;
}

.abo .images img {
  position: absolute; 
}

.abo .images .smartphone {
  width: 270px; z-index: 1; right: -5px; top: -15px; 
}

.abo .images .bubble {
  top: -65px; left: -92px; width: 270px; z-index: 0;
}

.abo ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-top: 20px;
}

.abo li {
  padding-left: 1em;
  text-indent: -1em;
}

.abo li:before {
  content: "+";
  padding-right: 5px;
  font-weight: 500;
  color: var(--az-red);
}

.abo .boxes {
  margin-top: 10px; 
  grid-row: 2; 
  grid-column: span 2; 
  display: grid;
  z-index: 2;
}

.abo .boxes .box {
 background-color: white;
 display: flex;
 flex-direction: column; 
 width: 75%;
 text-align: center;
 padding: 5px;
}

.abo .boxes .box {
  margin: auto; 
  height: 100%; 
}

.abo .boxes .box.year {
  grid-column: 1; 
}

.abo .boxes .box.month {
  grid-column: 2
}

.abo .login {
  grid-row: 3; 
  grid-column: span 2; 
  text-align: center; 
  margin-top: 20px; 
}

.abo .login .red-fat {
  font-weight: 700; 
  color: var(--az-red);
}

.abo .boxes header {
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 20px; 
  margin-top: 10px;
}

.abo .boxes div {
  margin: auto;
  margin-bottom: 10px;
}

/*NOCH FRAGEN*/
.vorteilswelt.fragen {
  grid-template-columns: 1fr 1fr; 
}

.vorteilswelt.fragen .stock {
  width: 375px;
}

.fragen .text {
  grid-row: 1;
  grid-column: 2; 
}

.fragen .images {
  position: relative; 
  grid-row: 1;
  grid-column: 1; 
}

.fragen .questionmark {
  width: 150px; 
  position: absolute; 
  top: -40px; 
  width: 130px; 
  left: 300px;
}

/*FÜNFERBLOCK*/
.topaufmacherbox.vorteilswelt-fuenfer {
  grid-template-columns: 1fr 1fr 1fr; 
  margin-top: 0;
}

.topaufmacherbox.vorteilswelt-fuenfer .topteaser.nummer-4 .teaser-content, .topaufmacherbox.vorteilswelt-fuenfer .topteaser.nummer-5 .teaser-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: -20px;
  margin-left: 10px;
  margin-right: 10px;
}

.topaufmacherbox.vorteilswelt-fuenfer .topteaser.nummer-4 .teaser-content h3, .topaufmacherbox.vorteilswelt-fuenfer .topteaser.nummer-5 .teaser-content h3 {
  font-family: Roboto Slab;
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink);
  margin-top: 10px;
  font-weight: 700;
  margin-bottom: 10px;
}

.fotocredit {
  color: var(--grey40); 
  font-size: 10px;
}

@media screen and (max-width: 1023px) {
  .teaserbox.topaufmacherbox {
   margin-top: 112px; 
  }
  
  .vorteilswelt-fuenfer {
     grid-template-columns: 1fr 1fr !important;
     margin-top: 0 !important;
   }
   
  .teaserbox.topaufmacherbox.vorteilswelt-fuenfer .topteaser {
     margin-left: 0;
     margin-right: 0;
   }
  
  .vorteilswelt.intro .text {
    padding: 3%;
  }
  
  .rabatte .logos .icons-hor {
    display: none; 
}

  .rabatte .logos .icons-vert {
    display: block;
    width: 90px;
    z-index: 2;
    top: -5px;
}
  
  .rabatte .logos .bubble {
    left: -50px; 
  }
  
  .fragen .text {
    text-align: center;
  }
  
  .fragen .questionmark {
    left: 270px;
  }
  
  .vorteilswelt.abo .images .smartphone {
    width: 220px;
  }
}

@media screen and (max-width: 767px) { 
  .vorteilswelt.intro {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  
  .vorteilswelt.intro .text  {
    grid-column: 1; 
  }
  
  .rabatte .logos {
    grid-row: 2;
    grid-column: 1;
  }
  
  .rabatte .logos .bubble {
    left: 380px;
    width: 400px;
    top: -250px;
  }
  
  .rabatte .newsletter {
    grid-row: 3;
  }
  
  .rabatte .logos .icons-hor {
    display: block; 
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 15px;
}

  .rabatte .newsletter form {
    align-items: center;
  }

  .rabatte .logos .icons-vert {
    display: none;
}
  
  .vorteilswelt.intro .stock {
    grid-column: 1;
    width: 300px;
    margin-top: -200px;
    padding-left: 3%;
  }
  
  .content-container.grey {
    margin-top: 250px;
  }
  
  .vorteilswelt.intro .text .section-header {
    margin-top: 10px;
  }
  
  .vorteilswelt.abo .images .smartphone {
    display: none; 
  }
  
  .vorteilswelt.abo {
    grid-template-columns: 1fr;  
  }
  
  .vorteilswelt.abo .bubble {
    top: -620px;
    left: 460px;
    width: 300px; 
  }
  
  .vorteilswelt.abo .boxes {
    gap: 20px;
  }
  
  .vorteilswelt.abo .boxes .box.month {
    grid-column: 1; 
  }
  
  .topaufmacherbox.vorteilswelt-fuenfer .topteaser .teaser-content h3 {
	font-size: 18px !important;
  }
  
    .topaufmacherbox.vorteilswelt-fuenfer .topteaser.nummer-1 .teaser-content h3 {
	font-size: 22px !important;
  }
  
  .topaufmacherbox {
    margin-top: 0 !important;
  }
  
  article, .teaser-content {
    padding: 0 10px;
  }
  
  .vorteilswelt.fragen {
    grid-template-columns: 1fr; 
    text-align: center
  }
  
  .vorteilswelt.fragen .stock {
    width: 100%;
    max-width: 375px;
  }
  
  .vorteilswelt.fragen .questionmark {
    display: none; 
  }
  
  .vorteilswelt.fragen .text {
    grid-row: 2; 
    grid-column: 1;
  }
  
  .vorteilswelt.intro img {
    width: 100% !important;
    max-width: 300px;
  }
  
  .vorteilswelt.rabatte, .vorteilswelt.abo, .vorteilswelt.intro {
  	margin: 36px 0;
  }
  
  .fotocredit {
    text-align: center;
    display: block;
  }
}

@media screen and (max-width: 850px) and (min-width: 766px) {
  .rabatte .logos .bubble {
    left: -90px;
  }
  
  .rabatte .logos .icons-vert {
    left: -40px;
}
}

@media screen and (max-width: 630px) {
  .rabatte .logos .bubble {
    left: 250px;
  }
  
  .vorteilswelt.abo .bubble {
    left: 400px;
  }
}

@media screen and (max-width: 500px) {
  .rabatte .logos .bubble {
    left: 150px;
  }
  
  .rabatte .logos .icons-hor {
    max-width: 250px;
}

  .vorteilswelt.abo .bubble, .rabatte .logos .bubble {
    display: none; 
  }
  
  .rabatte .newsletter form {
    display: grid; 
    grid-template-columns: 1fr; 
    width: 100%; 
  }
}

.badge-vorteilswelt {
  border-radius: 120px 120px;
  background: var(--az-red);
  padding: 4px 16px 4px 8px;
  height: 40px;
  display: flex;
  align-items: center;
  color: white;
  font-weight: 500;
}

.badge-vorteilswelt img {
  display: inline;
  position: relative;
  bottom: -2px;
  height: auto !important;
  width: 40px !important;
}