/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

 :root {
      --brand-color: #ebeced;
      --brand-color-dark: #084298;
      --light-bg: #f6f6f6;
      --footer-bg: #1f2937;
    }

div{
    position: relative;
}

    body {
      font-family: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #1f2937;
      background: #ffffff;
    }

    .headline, h3{
        font-family: 'Bebas Neue', Arial;
        font-size: clamp(62px, 6vw, 90px);
        display: inline-block;
        line-height: 1;
        color: #fff !important;
        z-index: 1;
        background: #75bace;
        padding: 6px 10px 0 10px;
        margin-bottom: 40px;
        transform: translate(-5px, 0);
        margin-top: -30px;
    }

    h1{
        font-family: 'Bebas Neue', Arial;
        font-size: clamp(42px, 3.5vw, 54px);
        line-height: 1;
    }

    h3{
        font-size: clamp(42px, 5vw, 70px);
        margin-top: 0;
    }

    h5{
        font-family: 'Bebas Neue', Arial;
        font-size: clamp(52px, 4.5vw, 60px);
        line-height: 0.7;
        margin-bottom: 0;
        padding-top: 7px;
    }

    p, ul{  
        font-size: 19px;
        margin-bottom: 10px;
    }

    p a{
      color:#1f2937
    }

    .hero-image {
      width: 100%;
      min-height: 70vh;
      background-image: url("../img/bike-messe-bielefeld.jpg");
      background-size: cover;
      background-position: center 50%;
    }

    @media (max-width: 767.98px) {
      .hero-image {
        min-height: 300px;
      }
    }

    .intro-section {
      position: relative;
      background: var(--brand-color);
      color: #1f2937;
      padding: 0 0 4rem 0;
    }

    .sticker {
      position: absolute;
      top: -40px;
      right: 0;
      transform: translateY(-50%) rotate(-6deg);
      align-items: center;
      justify-content: center;
      min-width: 140px;
      padding: 1rem 1.4rem;
      background: #C00E0E;
      color: #fff;
      font-size: 1.05rem;
      line-height: 1;
      letter-spacing: .04em;
      z-index: 3;
    }

    @media (max-width: 575.98px) {
      .sticker {
        right: 0;
        min-width: 110px;
        padding: .8rem 1rem;
        font-size: .9rem;
        transform: scale(.8) translateY(-50%) rotate(-6deg);
          top: -60px;
      }
    }

    .partners-section {
      background: var(--light-bg);
      padding: 4rem 0;
    }

    .logo-card {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 140px;

      background: #ffffff;

      border-radius: 5px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      text-decoration: none;
    }

    .logo-card:hover,
    .logo-card:focus {
      transform: translateY(-2px);
      box-shadow: 0 .75rem 1.5rem rgba(31, 41, 55, .12);
      border-color: rgba(13, 110, 253, .35);
    }

    .logo-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .site-footer {
      background: var(--footer-bg);
      color: rgba(255, 255, 255, .78);
      padding: 2rem 0;
    }

    .site-footer a {
      color: #ffffff;
      text-decoration: none;
    }

    .site-footer a:hover,
    .site-footer a:focus {
      text-decoration: underline;
    }

    .logo{
      width: 70%;
      margin-top: 30px;
    }

    .wittich-badge{
        position: absolute;
        right: 0;
        top:130px;
        width: 20%;
        max-width: 200px;
    }

    @media (max-width: 767.98px) {
        .wittich-badge{
            top:70px;
            right: 15px;
        }
    }