:root {
  --pagivo-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pagivo-h1-size: clamp(2.85rem, 5.4vw, 5.35rem);
  --pagivo-h1-mobile-size: clamp(2rem, 8.5vw, 3.3rem);
  --pagivo-h1-small-mobile-size: clamp(1.72rem, 7.65vw, 2.25rem);
  --pagivo-h2-size: clamp(2.2rem, 4.2vw, 4.5rem);
  --pagivo-h2-mobile-size: clamp(1.85rem, 8vw, 2.85rem);
  --pagivo-lead-size: clamp(1.08rem, 1.65vw, 1.3rem);
  --pagivo-body-size: clamp(1rem, 1.5vw, 1.18rem);
  --pagivo-control-size: clamp(1rem, 1.45vw, 1.12rem);
  --pagivo-nav-size: .9rem;
  --pagivo-eyebrow-size: .76rem;
}

html {
  font-synthesis-weight: none;
}

html body,
html body * {
  font-family: var(--pagivo-font) !important;
}

html body {
  font-weight: 400 !important;
}

html body h1,
html body h1 *,
html body .hero h1,
html body .hero-title-sentence,
html body .fix-copy h1,
html body .pricing-hero h1,
html body .widerruf-intro h1,
html body .card-landing h1 {
  max-width: 1060px !important;
  font-size: var(--pagivo-h1-size) !important;
  line-height: .98 !important;
  letter-spacing: -.064em !important;
  font-weight: 800 !important;
}

html body h2,
html body h2 * {
  font-size: var(--pagivo-h2-size) !important;
  line-height: .95 !important;
  letter-spacing: -.065em !important;
  font-weight: 700 !important;
}

html body h3,
html body h3 *,
html body h4,
html body h4 * {
  font-weight: 700 !important;
}

html body p,
html body small,
html body li,
html body dt,
html body dd,
html body input,
html body select,
html body textarea,
html body .hero-lead,
html body .muted-text,
html body .form-note,
html body .form-next-step,
html body .card-safe-line {
  font-weight: 400 !important;
}

html body .hero-lead,
html body .fix-subline,
html body .widerruf-lead,
html body .card-landing .hero-lead,
html body .pricing-hero .hero-lead {
  max-width: 660px !important;
  font-size: var(--pagivo-lead-size) !important;
  line-height: 1.48 !important;
}

html body .muted-text,
html body .section-head p,
html body .intro-copy p,
html body .pricing-note,
html body .pricing-disclaimer,
html body .widerruf-contact-copy {
  font-size: var(--pagivo-body-size) !important;
  line-height: 1.55 !important;
}

html body button,
html body .btn,
html body .main-nav a,
html body label,
html body legend,
html body summary,
html body strong,
html body b,
html body .eyebrow,
html body .brand-copy strong,
html body .pricing-anchor-list span,
html body .recommendation-badge,
html body .model-label,
html body .package-label,
html body .footer-trust-copy strong,
html body .site-footer nav a {
  font-weight: 600 !important;
}

html body .btn,
html body button[type="submit"],
html body button[type="button"] {
  font-size: var(--pagivo-control-size) !important;
  line-height: 1.16 !important;
}

html body input,
html body select,
html body textarea,
html body label,
html body .contact-field,
html body .fix-free-form label,
html body .widerruf-panel label,
html body .card-score-form label {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

html body .main-nav a {
  font-size: var(--pagivo-nav-size) !important;
  line-height: 1.2 !important;
}

html body .eyebrow {
  font-size: var(--pagivo-eyebrow-size) !important;
  line-height: 1.2 !important;
}

html body .footer-trust-copy span,
html body .brand-copy small {
  font-weight: 400 !important;
}

.site-footer {
  background: #02040a;
  color: rgba(255,255,255,.78);
}

.site-footer .footer-inner {
  width: min(var(--max, 1180px), calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 28px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  align-items: center !important;
  gap: clamp(14px, 2.4vw, 28px) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer .footer-brand,
.site-footer .footer-video-brand,
.site-footer .footer-static-brand {
  display: block !important;
  width: min(220px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

.site-footer .footer-video-brand .footer-logo-video-shell,
.site-footer .footer-video-brand .brand-logo-video-shell {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 520 / 150 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: url("/assets/logo/pagivo-logo-transparent.png") left center / contain no-repeat !important;
  box-shadow: none !important;
}

.site-footer .footer-video-brand .footer-logo-video-shell > *,
.site-footer .footer-video-brand .brand-logo-video-shell > * {
  display: none !important;
}

.site-footer .footer-static-logo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 520 / 150 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-footer .footer-static-logo img,
.site-footer .footer-brand > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 74px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-footer .footer-trust-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.site-footer .footer-trust-copy strong {
  color: #fff;
  font-size: clamp(1rem, 1.55vw, 1.12rem);
  line-height: 1.18;
}

.site-footer .footer-trust-copy span {
  color: rgba(255,255,255,.66);
  line-height: 1.25;
}

.site-footer nav {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px !important;
  margin-left: 0 !important;
}

.site-footer nav a,
.site-footer a {
  min-height: 32px !important;
  color: rgba(255,255,255,.7);
  line-height: 1.25;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: #fff;
}

@media (max-width: 820px) {
  html body h1,
  html body h1 *,
  html body .hero h1,
  html body .hero-title-sentence,
  html body .fix-copy h1,
  html body .pricing-hero h1,
  html body .widerruf-intro h1,
  html body .card-landing h1 {
    font-size: var(--pagivo-h1-mobile-size) !important;
    line-height: 1.02 !important;
    letter-spacing: -.052em !important;
  }

  html body h2,
  html body h2 * {
    font-size: var(--pagivo-h2-mobile-size) !important;
    line-height: 1 !important;
  }

  html body .hero-lead,
  html body .fix-subline,
  html body .widerruf-lead,
  html body .card-landing .hero-lead,
  html body .pricing-hero .hero-lead {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  html body .btn,
  html body button[type="submit"],
  html body button[type="button"] {
    font-size: 1rem !important;
    line-height: 1.16 !important;
  }

  .site-footer .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start !important;
    padding: 20px 0 24px !important;
    gap: 10px !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-video-brand,
  .site-footer .footer-static-brand {
    width: min(190px, 62vw) !important;
  }

  .site-footer .footer-trust-copy {
    gap: 2px;
  }

  .site-footer .footer-trust-copy strong {
    font-size: 1rem;
  }

  .site-footer .footer-trust-copy span {
    font-size: .95rem;
  }

  .site-footer nav {
    justify-content: flex-start !important;
    gap: 4px 18px !important;
  }

  .site-footer nav a,
  .site-footer a {
    min-height: 30px !important;
    font-size: .98rem;
  }
}

@media (max-width: 520px) {
  html body h1,
  html body h1 *,
  html body .hero h1,
  html body .hero-title-sentence,
  html body .fix-copy h1,
  html body .pricing-hero h1,
  html body .widerruf-intro h1,
  html body .card-landing h1 {
    font-size: var(--pagivo-h1-small-mobile-size) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 820px) {
  html body #hero-title {
    max-width: 100% !important;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  html body #hero-title .hero-title-sentence {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

@media (max-width: 520px) {
  html body #hero-title,
  html body #hero-title .hero-title-sentence {
    font-size: clamp(1.42rem, 6.25vw, 1.88rem) !important;
    line-height: 1.07 !important;
  }
}

@media (max-width: 820px) {
  html body .site-footer .footer-inner nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, max-content) !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 8px clamp(8px, 2.4vw, 12px) !important;
  }

  html body .site-footer .footer-inner nav a[href*="impressum"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body .site-footer .footer-inner nav a[href*="datenschutz"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body .site-footer .footer-inner nav a[href*="preise"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html body .site-footer .footer-inner nav a[href="#kontakt"],
  html body .site-footer .footer-inner nav a[href="/#kontakt"],
  html body .site-footer .footer-inner nav a[href*="#kontakt"],
  html body .site-footer .footer-inner nav a[href="#paket-anfrage"],
  html body .site-footer .footer-inner nav a[href*="#paket-anfrage"],
  html body .site-footer .footer-inner nav a[href="#score-contact"],
  html body .site-footer .footer-inner nav a[href*="#score-contact"] {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  html body .site-footer .footer-inner nav a {
    min-height: 28px !important;
    font-size: clamp(.68rem, 2.7vw, .82rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
  }
}