* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

a {
  display  : block;
  margin   : 0 auto;
  max-width: 994px;
}

@font-face {
  font-family : "GoodCondUltra";
  src         : url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-CondUltra.eot) format("eot");
  src         : local(☺︎), url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-CondUltra.woff) format("woff");
  src         : local(☺︎), url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-CondUltra.woff2) format("woff2");
  font-display: swap;
  font-style  : normal;
  font-weight : 900;
}

@font-face {
  font-family : "Good";
  src         : url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-Regular.eot) format("eot");
  src         : local(☺︎), url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-Regular.woff) format("woff");
  src         : local(☺︎), url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-Regular.woff2) format("woff2");
  font-display: swap;
  font-style  : normal;
  font-weight : 400
}

@font-face {
  font-family : "Good";
  src         : url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-Ultra.eot) format("eot");
  src         : local(☺︎), url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-Ultra.woff) format("woff");
  src         : local(☺︎), url(https://storytelling.blick.ch/infografik/resources/fonts/Good/GoodW05-Ultra.woff2) format("woff2");
  font-display: swap;
  font-style  : normal;
  font-weight : 900;
}

/* Desktop */

.teaser {
  position   : relative;
  padding-top: 100%;
  height     : 0;
  overflow   : hidden;
  background : #f55;
  width      : 100%;
  padding-top: 50%;
}

.teaserImg {
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  object-fit: cover;
}

.teaserImg.quadrat {
  display: none;
}

.teaserGradient {
  position      : absolute;
  left          : 0;
  bottom        : 0;
  width         : 100%;
  background    : radial-gradient(ellipse 60% 70% at 0 70%, rgba(31, 31, 31, 0.75), rgba(31, 31, 31, 0.75) 60%, rgba(31, 31, 31, 0));
  padding-bottom: 24px;
  display       : flex;
  flex-direction: column;
}

.right .teaserGradient {
  background: radial-gradient(ellipse 60% 70% at 100% 70%, rgba(31, 31, 31, 0.75), rgba(31, 31, 31, 0.75) 60%, rgba(31, 31, 31, 0));
}

.teaserinfo {
  position: relative;
  color   : #fff;
  width   : 55%;
  padding : 0 24px 0 24px;
}

.right .teaserinfo {
  align-self: flex-end;
  text-align: right;
}

.label {
  display       : inline-block;
  font-family   : "Good", "Arial", sans-serif;
  font-weight   : 900;
  font-size     : 24.6px;
  text-transform: uppercase;
  background    : rgb(84, 84, 84);
  padding       : 0.1em 0.2em 0.08em;
  margin-bottom : 0.3em;
}

.catchword {
  font-size    : 25.4px;
  font-family  : "Good", "Arial", sans-serif;
  font-weight  : 400;
  margin-bottom: 0.2em;
  text-shadow  : 0 0 5px #000000,
    0 0 7px #000000;
}

.title {
  font-size     : 75.7px;
  font-family   : "GoodCondUltra", "Arial Narrow", Impact, sans-serif;
  font-weight   : 900;
  letter-spacing: 0.01em;
  text-shadow   : 0 0 5px #000000,
    0 0 7px #000000;
  line-height: 1;
}

.lang-fr .title {
  font-size: 65.9px
}

.promoframe {
  position             : absolute;
  top                  : 0;
  bottom               : 0;
  left                 : 0;
  right                : 0;
  height               : calc(100% - 16px);
  margin               : 8px;
  display              : grid;
  grid-template-columns: auto max-content;
  grid-template-rows   : min-content min-content auto;
}

.right .promoframe {
  direction: rtl;
}

.promoframe-t,
.promoframe-r,
.promoframe-ll,
.promoframe-b {
  border: 0 solid #fff;
}

.promoframe-t {
  border-top-width: 2px;
}

.promoframe-r {
  border-right-width: 2px;
}

.right .promoframe-r {
  border-right-width: 0;
  border-left-width : 2px;
}

.promoframe-l {
  border-left-width: 2px;
}

.right .promoframe-l {
  border-left-width : 0;
  border-right-width: 2px;
}
.right .promoframe-l.promoframe-r {
  border-left-width : 2px;
  border-right-width: 2px;
}
.promoframe-b {
  border-bottom-width: 2px;
}


.promoframe-logorow {
  grid-column    : span 2;
  display        : flex;
  justify-content: flex-end;
}

.promo-label {
  margin        : 0 0.7em;
  color         : #fff;
  text-transform: uppercase;
  font-size     : 12px;
  font-family   : "GoodRegular", "Arial Narrow", Impact, sans-serif;
  font-weight   : 400;
  letter-spacing: 0.1em;
  text-align    : center;
  text-shadow   : 0 0 5px #000000,
    0 0 7px #000000;
  white-space: nowrap;
}

.promo-logo {
  width       : 120px;
  height      : intrinsic;
  margin: 8px;
}


.countdown-balken {
  position        : relative;
  width           : 100%;
  font-size       : 26.7px;
  height          : 1.2em;
  background-color: #333333;

  box-shadow     : 0 0 1.5vw #000000;
  overflow       : hidden;
  margin-top     : 8px;
  padding        : 0 25.4px;
  display        : flex;
  justify-content: space-between;
}

.countdown-balken p,
.countdown-balken #clock {
  position      : relative;
  color         : #f1f1f1;
  font-family   : "Good", "Arial", Impact, sans-serif;
  letter-spacing: 0.03em;
}

.countdown-balken p strong,
#clock .hours,
#clock .minutes,
#clock .seconds {
  font-weight: 900;
}

#bar {
  position  : absolute;
  top       : 0;
  right     : 100vw;
  background: linear-gradient(to right, rgba(226, 0, 0, 0) 50%, rgba(226, 0, 0, 1)), rgba(226, 0, 0, 0.6);
  height    : 50px;
  width     : 100%;
}

#verdealt {
  display: none;
  position: absolute;
  background: #e20000;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);

  font-family   : "Good", "Arial", Impact, sans-serif;
  font-weight: 900;
  font-size: 50px;
  text-transform: uppercase;
  color: white;
  padding: 0.1em 0.2em;
  letter-spacing: 0.1ch;
}


/* Tablet */

@media screen and (max-width:950px) {
  a {
    width: 664px;
  }

  .teaser {
    padding-top: 100%;
  }

  .teaserImg.quadrat {
    display: block;
  }

  .teaserImg.quer {
    display: none;
  }

  .teaserGradient {
    background: radial-gradient(ellipse 100% 70% at 0 70%, rgba(31, 31, 31, 0.75), rgba(31, 31, 31, 0.75) 60%, rgba(31, 31, 31, 0));
  }

  .right .teaserGradient {
    background: radial-gradient(ellipse 100% 70% at 100% 70%, rgba(31, 31, 31, 0.75), rgba(31, 31, 31, 0.75) 60%, rgba(31, 31, 31, 0));
  }

  .teaserinfo {
    width: 100%;
  }
}

/* Mobile */
@media screen and (max-width:767px) {
  a {
    width: 100%;
  }

  .teaserinfo {
    padding: 0 calc(1.5vw + 8px) 0 calc(3vw + 8px);
  }
  .right .teaserinfo {
    padding: 0 calc(3vw + 8px) 0 calc(1.5vw + 8px);
  }
  .teaserGradient {
    padding-bottom: calc(3vw + 8px)
  }

  .promo-logo {
    max-width: 24vw;
  }

  .label {
    font-size: 4.7vw;
  }

  .catchword {
    font-size: 5.3vw;
  }

  .title {
    font-size: 11.8vw;
  }

  .lang-fr .title {
    font-size: 10.3vw;
  }

  .countdown-balken {
    font-size: 5.3vw;
  }

  .countdown-balken {
    margin-top: 2vw;
    padding   : 0 calc(3vw + 8px);
  }

  .countdown-balken p,
  .countdown-balken #clock {
    letter-spacing: 0;
    font-size     : 0.7em;
    align-self    : center;
  }

  .lang-fr .countdown-balken p,
  .lang-fr .countdown-balken #clock {
    letter-spacing: 0;
    font-size     : 0.65em;
    align-self    : center;
  }

  .countdown-balken p strong,
  #clock .hours,
  #clock .minutes,
  #clock .seconds {
    font-size: 1.4em;
  }
  .lang-fr .countdown-balken p strong,
  .lang-fr #clock .hours,
  .lang-fr #clock .minutes,
  .lang-fr #clock .seconds {
    font-size: 1.2em;
  }
  #verdealt {
    font-size: 8vw;
    text-align: center;
  }
  
}