/* =========================================================
   CLEVER.TV
   ========================================================= */


/* =========================================================
   KARTEN EIN-/AUSSCHALTEN

   block = AN
   none  = AUS
   ========================================================= */


/* THEMENWELTEN */
.replay{
  display:block;
}


/* PRODUKTE */
.apply{
  display:block;
}


/* LIVE */
.live{
  display:block;
}



/* =========================================================
   FARBEN
   ========================================================= */

:root{

  --red:#951820;
  --red2:#b3232e;

  --ink:#202124;
  --muted:#737373;

  --soft:#f6f6f7;
  --line:#e9e9eb;

  --shadow:0 12px 35px rgba(20,20,20,.09);

}



/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  margin:0;

  background:#fff;
  color:var(--ink);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing:antialiased;

}

.shell{

  width:min(1220px,92vw);

  margin:auto;

}



/* =========================================================
   HEADER
   ========================================================= */

header{

  min-height:100px;

  display:flex;
  align-items:center;

  border-bottom:1px solid #f2f2f2;

}


.brand{

  display:inline-flex;

  align-items:center;

  text-decoration:none;

}



/* =========================================================
   LOGO
   ========================================================= */

.brand-logo{

  display:block;

  width:auto;
  height:50px;

  max-width:100%;

  object-fit:contain;

}



/* =========================================================
   HERO
   ========================================================= */

.hero{

  padding:52px 0 30px;

  text-align:center;

}


.kicker{

  display:inline-block;

  color:var(--red);

  font-size:12px;
  font-weight:800;

  letter-spacing:.14em;

  text-transform:uppercase;

  margin-bottom:12px;

}


.hero h1{

  font-size:clamp(30px,4vw,49px);

  line-height:1.05;

  letter-spacing:-2px;

  margin:0;

}


.hero p{

  max-width:650px;

  margin:14px auto 0;

  color:var(--muted);

  font-size:16px;

  line-height:1.6;

}



/* =========================================================
   KARTEN
   ========================================================= */

.cards{

  display:flex;

  justify-content:center;

  align-items:stretch;

  flex-wrap:nowrap;

  gap:22px;

  padding:20px 0 54px;

}


.card{

  position:relative;

  flex:0 1 390px;

  width:100%;

  min-height:370px;

  border-radius:22px;

  overflow:hidden;

  border:1px solid var(--line);

  text-decoration:none;

  color:#fff;

  box-shadow:var(--shadow);

  isolation:isolate;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.card:hover{

  transform:translateY(-7px);

  box-shadow:
    0 20px 46px rgba(20,20,20,.15);

}



/* =========================================================
   VISUAL
   ========================================================= */

.visual{

  position:absolute;

  inset:0;

  transition:transform .45s ease;

}


.card:hover .visual{

  transform:scale(1.045);

}


.visual::before,
.visual::after{

  content:"";

  position:absolute;

}



/* =========================================================
   THEMENWELTEN
   ========================================================= */

.replay .visual{

  background:

    linear-gradient(
      115deg,
      transparent 0 42%,
      rgba(255,255,255,.08) 42% 44%,
      transparent 44%
    ),

    radial-gradient(
      circle at 70% 20%,
      #777 0%,
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #58595b,
      #18191b
    );

}


.replay .visual::before{

  width:190px;
  height:112px;

  border:2px solid rgba(255,255,255,.3);

  border-radius:12px;

  left:50%;
  top:63px;

  transform:translateX(-50%);

  box-shadow:
    0 16px 30px rgba(0,0,0,.25);

}


.replay .visual::after{

  border-left:34px solid #fff;

  border-top:22px solid transparent;

  border-bottom:22px solid transparent;

  top:98px;

  left:calc(50% - 10px);

  opacity:.95;

}



/* =========================================================
   PRODUKTE
   ========================================================= */

.apply .visual{

  background:

    radial-gradient(
      circle at 20% 18%,
      #f4d6c5 0 8%,
      transparent 9%
    ),

    radial-gradient(
      circle at 73% 28%,
      #ded0c4 0 12%,
      transparent 13%
    ),

    linear-gradient(
      135deg,
      #d7d1ca,
      #817d78 60%,
      #494744
    );

}


.apply .visual::before{

  width:82px;
  height:125px;

  border-radius:9px 9px 22px 22px;

  background:rgba(255,255,255,.82);

  left:36%;
  top:52px;

  transform:rotate(-8deg);

  box-shadow:
    50px 16px 0 rgba(149,24,32,.72);

}


.apply .visual::after{

  width:135px;
  height:18px;

  border-radius:50%;

  background:rgba(35,35,35,.2);

  left:38%;
  top:188px;

  filter:blur(4px);

}



/* =========================================================
   LIVE
   ========================================================= */

.live .visual{

  background:

    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.23),
      transparent 24%
    ),

    radial-gradient(
      circle at 78% 34%,
      rgba(255,126,126,.25),
      transparent 20%
    ),

    linear-gradient(
      135deg,
      #701018 0%,
      #b72632 50%,
      #26080b 100%
    );

}


.live .visual::before{

  width:150px;
  height:150px;

  border:2px solid rgba(255,255,255,.22);

  border-radius:50%;

  top:56px;
  left:50%;

  transform:translateX(-50%);

  box-shadow:
    0 0 0 25px rgba(255,255,255,.04);

}


.live .visual::after{

  border-left:
    42px solid rgba(255,255,255,.92);

  border-top:
    27px solid transparent;

  border-bottom:
    27px solid transparent;

  top:105px;

  left:calc(50% - 15px);

}



/* =========================================================
   OVERLAY
   ========================================================= */

.overlay{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      to top,
      rgba(8,8,8,.86) 0%,
      rgba(8,8,8,.35) 45%,
      rgba(8,8,8,.03) 76%
    );

}



/* =========================================================
   KARTEN INHALT
   ========================================================= */

.cardbody{

  position:absolute;

  z-index:2;

  left:0;
  right:0;
  bottom:0;

  padding:26px;

}


.badge{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:7px 10px;

  border-radius:999px;

  background:rgba(255,255,255,.14);

  backdrop-filter:blur(7px);

  font-size:11px;

  font-weight:800;

  letter-spacing:.1em;

  margin-bottom:11px;

}


.card h2{

  font-size:25px;

  letter-spacing:-.7px;

  margin:0 0 7px;

}


.card p{

  font-size:14px;

  line-height:1.5;

  color:#e5e5e5;

  margin:0 0 18px;

}



/* =========================================================
   BUTTON / CTA
   ========================================================= */

.cta{

  display:flex;

  align-items:center;

  justify-content:space-between;

  font-size:13px;

  font-weight:800;

}


.circle{

  width:35px;
  height:35px;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:#fff;

  color:var(--red);

  transition:transform .2s;

}


.card:hover .circle{

  transform:translateX(3px);

}



/* =========================================================
   LIVE PUNKT
   ========================================================= */

.dot{

  width:8px;
  height:8px;

  border-radius:50%;

  background:#ff3142;

  box-shadow:
    0 0 0 0 rgba(255,49,66,.65);

  animation:pulse 1.6s infinite;

}


@keyframes pulse{

  70%{

    box-shadow:
      0 0 0 9px rgba(255,49,66,0);

  }

  100%{

    box-shadow:
      0 0 0 0 rgba(255,49,66,0);

  }

}



/* =========================================================
   IMPRESSUM
   ========================================================= */

.legal{

  max-width:900px;

  margin:0 auto;

  padding:50px 0 70px;

}


.legal h1{

  font-size:clamp(32px,4vw,48px);

  margin:0 0 30px;

  letter-spacing:-1.5px;

}


.legal h2{

  margin-top:36px;

  margin-bottom:12px;

  font-size:22px;

  letter-spacing:-.4px;

}


.legal p{

  color:#555;

  font-size:16px;

  line-height:1.7;

  margin:0 0 16px;

}


.legal strong{

  color:var(--ink);

}


.legal a{

  color:var(--red);

  text-decoration:none;

  font-weight:700;

}


.legal a:hover{

  text-decoration:underline;

}


.legal-address{

  background:var(--soft);

  border:1px solid var(--line);

  border-radius:18px;

  padding:24px;

  margin-bottom:35px;

}


.legal-address p{

  margin:0;

}


.legal-address .legal-email{

  margin-top:15px;

}


.legal-note{

  margin-top:45px !important;

  padding-top:22px;

  border-top:1px solid var(--line);

  font-size:13px !important;

  color:#888 !important;

}



/* =========================================================
   FOOTER
   ========================================================= */

footer{

  background:var(--soft);

  border-top:1px solid var(--line);

}


.footerrow{

  min-height:84px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  color:#777;

  font-size:12px;

}


.links{

  display:flex;

  gap:22px;

  flex-wrap:wrap;

}


.links a{

  color:#666;

  text-decoration:none;

}


.links a:hover{

  color:var(--red);

}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:820px){

  header{

    min-height:84px;

  }


  .brand-logo{

    height:44px;

  }


  .hero{

    padding:36px 0 20px;

  }


  .hero p{

    font-size:15px;

  }


  .cards{

    flex-direction:column;

    align-items:center;

    padding-bottom:35px;

  }


  .card{

    flex:none;

    width:100%;

    min-height:250px;

  }


  .legal{

    padding:40px 0 55px;

  }


  .footerrow{

    padding:22px 0;

    align-items:flex-start;

    flex-direction:column;

    min-height:auto;

  }

}



/* =========================================================
   SMARTPHONE
   ========================================================= */

@media(max-width:480px){

  .shell{

    width:min(92vw,440px);

  }


  header{

    min-height:76px;

  }


  .brand-logo{

    height:38px;

  }


  .hero h1{

    letter-spacing:-1.3px;

  }


  .card{

    min-height:235px;

    border-radius:18px;

  }


  .cardbody{

    padding:21px;

  }


  .card h2{

    font-size:22px;

  }


  .cards{

    gap:15px;

  }


  .legal{

    padding:32px 0 45px;

  }


  .legal h1{

    margin-bottom:24px;

  }


  .legal h2{

    font-size:20px;

    margin-top:30px;

  }


  .legal p{

    font-size:15px;

  }


  .legal-address{

    padding:20px;

  }

}