/* =========================================================
   CLEVER.TV
   IMPRESSUM
   impressum.css
   ========================================================= */


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

:root{
  --red:#951820;
  --ink:#202124;
  --muted:#737373;
  --soft:#f6f6f7;
  --line:#e9e9eb;
}


/* =========================================================
   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:0 auto;
}


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

header{
  width:100%;
  min-height:100px;

  border-bottom:1px solid #f2f2f2;

  background:#fff;
}


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

   LOGO LINKS
   ZUR HAUPTSEITE RECHTS
   ========================================================= */

.headerrow{
  width:min(1220px,92vw);
  min-height:100px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
}


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

.brand{
  display:flex;
  align-items:center;

  flex-shrink:0;

  text-decoration:none;
}

.brand-logo{
  display:block;

  width:auto;
  height:50px;

  max-width:100%;

  object-fit:contain;
}


/* =========================================================
   ZUR HAUPTSEITE
   ========================================================= */

.back-home{
  display:block;

  margin-left:auto;

  color:#666;

  text-decoration:none;

  font-size:13px;
  font-weight:500;

  white-space:nowrap;

  transition:
    color .2s ease,
    transform .2s ease;
}

.back-home:hover{
  color:var(--red);

  transform:translateX(-3px);
}


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

.legal{
  max-width:900px;

  margin:0 auto;

  padding:50px 0 70px;
}


/* CLEVER.TV ÜBER DEM TITEL */

.kicker{
  display:inline-block;

  color:var(--red);

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

  letter-spacing:.14em;

  text-transform:uppercase;

  margin-bottom:12px;
}


/* =========================================================
   HAUPTTITEL
   ========================================================= */

.legal h1{
  font-size:clamp(32px,4vw,48px);

  line-height:1.05;

  letter-spacing:-1.5px;

  margin:0 0 30px;
}


/* =========================================================
   UNTERTITEL
   ========================================================= */

.legal h2{
  margin-top:36px;
  margin-bottom:12px;

  font-size:22px;

  letter-spacing:-.4px;
}


/* =========================================================
   TEXTE
   ========================================================= */

.legal p{
  color:#555;

  font-size:16px;
  line-height:1.7;

  margin:0 0 16px;
}

.legal strong{
  color:var(--ink);
}


/* =========================================================
   LINKS IM IMPRESSUM
   ========================================================= */

.legal a{
  color:var(--red);

  text-decoration:none;

  font-weight:700;
}

.legal a:hover{
  text-decoration:underline;
}


/* =========================================================
   ADRESSBOX
   ========================================================= */

.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;
}


/* =========================================================
   STAND
   ========================================================= */

.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;
}


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

.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;
  }

  .headerrow{
    min-height:84px;
  }

  .brand-logo{
    height:44px;
  }

  .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;
  }

  .headerrow{
    width:min(92vw,440px);

    min-height:76px;
  }

  .brand-logo{
    height:38px;
  }

  .back-home{
    font-size:12px;
  }

  .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;
  }

}