/*
 * MarkenTal responsive scale layer
 * Loaded after the individual page styles so every page shares the same
 * generous reading width, type scale and touch-friendly controls.
 */

:root {
  --max: 1440px !important;
  --responsive-reading: 1120px;
  --responsive-wide: 1360px;
}

html {
  font-size: 18px;
}

body {
  font-size: 18px !important;
  line-height: 1.68 !important;
}

.shell,
.container,
.page-shell,
.content-shell,
.hero-shell,
.reviews-shell,
.discover-shell,
.value-shell,
.final-shell {
  width: min(calc(100% - 64px), var(--max)) !important;
}

main h1,
.career-hero h1,
.references-hero h1,
.about-hero h1 {
  font-size: clamp(76px, 7.4vw, 124px) !important;
  line-height: .94 !important;
}

main h2,
.section-title,
.career-section-head h2,
.career-story h2,
.career-apply h2,
.career-faq h2,
.about-cta h2 {
  font-size: clamp(58px, 5.6vw, 94px) !important;
  line-height: .98 !important;
}

main h3 {
  font-size: clamp(32px, 3vw, 48px) !important;
  line-height: 1.06 !important;
}

main :where(p:not(.eyebrow):not([class*="label"]):not([class*="kicker"]):not([class*="index"]):not([class*="note"]):not([class*="tag"]):not([class*="meta"])),
main li,
main blockquote {
  font-size: clamp(18px, 1.35vw, 22px) !important;
  line-height: 1.72 !important;
}

.lead,
.hero-copy,
.career-lead,
.sales-subheadline,
.about-hero > * p,
.management-head p,
.references-cta p {
  max-width: 920px !important;
  font-size: clamp(20px, 1.65vw, 26px) !important;
  line-height: 1.62 !important;
}

.section-title,
.sales-reading,
.sales-prose,
.letter-section .sales-letter,
.longform-copy,
.legal-content,
.policy-content {
  max-width: var(--responsive-reading) !important;
}

.sales-reading-wide,
.hero-inner,
.career-hero-inner,
.about-hero-inner {
  max-width: var(--responsive-wide) !important;
}

.btn,
.career-button,
.sales-button,
.report-cta,
.modal-submit,
main button:not(.icon-btn):not(.menu-toggle):not(.quiz-back),
main input[type="submit"] {
  min-height: 64px !important;
  padding-inline: 32px !important;
  font-size: 16px !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 60px !important;
  padding: 16px 20px !important;
  font-size: 18px !important;
}

.career-work-card,
.benefit-grid article,
.principle,
.case-card,
.review-card,
.service-card,
.method-card,
.signal-card,
.sales-testimonial {
  padding: clamp(34px, 3.2vw, 54px) !important;
}

.metric,
.career-signal article,
.role-card,
.benefit-list article,
.sales-offer-list li {
  min-height: 180px;
}

.proof-logo {
  width: clamp(260px, 25vw, 400px) !important;
  height: 96px !important;
}

.proof-logo img {
  height: 68px !important;
}

.sales-hero-video,
.report-visual,
.ebook-mockup {
  width: min(100%, 1260px) !important;
  margin-inline: auto !important;
}

.site-footer,
.footer {
  font-size: 17px;
}

.site-footer a,
.footer a,
.site-footer p,
.footer p {
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.quiz-stage {
  width: min(100%, 920px) !important;
}

.quiz-stage h1,
.quiz-stage h2,
.quiz-question {
  font-size: clamp(48px, 5vw, 72px) !important;
}

/*
 * Einheitlicher Langform-Lesefluss
 *
 * Der Inhaltsblock sitzt mittig in der Seite. Überschriften bleiben
 * zentriert, der eigentliche Brief- und Fließtext wird linksbündig gelesen.
 * Diese Regeln liegen bewusst in der gemeinsamen Skalierungsdatei, damit
 * Homepage, Leistungsseiten, Opt-in und Landingpage gleich funktionieren.
 */
main .longform-layout,
main .letter-layout {
  display: block !important;
  width: min(calc(100% - 64px), 1040px) !important;
  max-width: 1040px !important;
  margin-inline: auto !important;
}

main .longform-heading,
main .letter-heading {
  position: static !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto clamp(48px, 6vw, 88px) !important;
  text-align: center !important;
}

main .longform-heading .section-title,
main .letter-heading .section-title {
  margin-inline: auto !important;
  text-align: center !important;
}

main .longform-copy,
main .long-copy,
main .sales-prose,
main .letter-section .sales-letter,
main .offer-longform {
  box-sizing: border-box !important;
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin-inline: auto !important;
  text-align: left !important;
}

main .longform-copy p,
main .long-copy p,
main .sales-prose > p:not(.sales-label),
main .letter-section .sales-letter > p,
main .offer-longform p {
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto clamp(34px, 3vw, 48px) !important;
  font-size: 26px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

main .longform-copy p.opening,
main .long-copy p.opening,
  main .sales-prose > p.sales-opening,
  main .letter-section .sales-letter > p:first-of-type,
  main .offer-longform > p:first-of-type {
  max-width: 820px !important;
  font-size: 30px !important;
  line-height: 1.5 !important;
}

main .longform-copy p:last-child,
main .long-copy p:last-child,
main .sales-prose > p:last-child,
main .letter-section .sales-letter > p:last-child,
main .offer-longform p:last-child {
  margin-bottom: 0 !important;
}

/* Kurze, druckvolle Absätze im Homepage-Brief. */
main .longform-copy--staccato p,
main .long-copy--staccato p {
  margin-bottom: 20px !important;
}

main .longform-copy--staccato p.opening,
main .longform-copy--staccato p.opening-continuation,
main .long-copy--staccato p.opening,
main .long-copy--staccato p.opening-continuation {
  max-width: 820px !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
}

main .longform-copy--staccato p.opening,
main .long-copy--staccato p.opening {
  margin-bottom: 8px !important;
}

main .longform-copy--staccato p.opening-continuation,
main .long-copy--staccato p.opening-continuation {
  margin-bottom: 58px !important;
}

main .longform-copy--staccato p.spoken-line,
main .long-copy--staccato p.spoken-line {
  margin-bottom: 12px !important;
  padding-left: 24px !important;
  border-left: 2px solid var(--blue, #1796c9) !important;
  color: #4f4f52 !important;
  font-style: italic !important;
}

main .longform-copy--staccato p.statement-line,
main .long-copy--staccato p.statement-line {
  font-size: 30px !important;
  line-height: 1.45 !important;
}

main .longform-copy--staccato h3,
main .long-copy--staccato h3 {
  margin-top: clamp(72px, 8vw, 118px) !important;
  margin-bottom: 38px !important;
}

main .longform-copy--staccato .longform-callout,
main .long-copy--staccato .longform-callout {
  margin-top: clamp(62px, 7vw, 96px) !important;
  margin-bottom: clamp(62px, 7vw, 96px) !important;
}

main .longform-copy h2,
main .longform-copy h3,
main .long-copy h2,
main .long-copy h3,
main .sales-prose h2,
main .sales-prose h3,
main .letter-section .sales-letter h2,
main .letter-section .sales-letter h3,
main .offer-longform h2,
main .offer-longform h3 {
  width: 100% !important;
  max-width: 920px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

/* Die Langform-Seiten verwenden teils spezifischere Seitenselektoren. */
body.google-ads-page main .long-copy,
body.google-ads-page main .long-copy p {
  text-align: left !important;
}

body.google-ads-page main .long-copy p {
  max-width: 780px !important;
  margin: 0 auto clamp(34px, 3vw, 48px) !important;
  font-size: 26px !important;
  line-height: 1.55 !important;
}

body.google-ads-page main .long-copy p.opening {
  max-width: 820px !important;
  font-size: 30px !important;
  line-height: 1.5 !important;
}

.quiz-option,
.quiz-stage label,
.quiz-stage p {
  font-size: 19px !important;
}

@media (min-width: 1441px) {
  .shell,
  .container,
  .page-shell,
  .content-shell,
  .hero-shell,
  .reviews-shell,
  .discover-shell,
  .value-shell,
  .final-shell {
    width: min(calc(100% - 96px), 1540px) !important;
  }

  main :where(p:not(.eyebrow):not([class*="label"]):not([class*="kicker"]):not([class*="index"]):not([class*="note"]):not([class*="tag"]):not([class*="meta"])),
  main li {
    font-size: 22px !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --responsive-reading: 900px;
    --responsive-wide: 960px;
  }

  .shell,
  .container,
  .page-shell,
  .content-shell,
  .hero-shell,
  .reviews-shell,
  .discover-shell,
  .value-shell,
  .final-shell {
    width: min(calc(100% - 44px), var(--max)) !important;
  }

  main .longform-layout,
  main .letter-layout {
    width: min(calc(100% - 44px), 1040px) !important;
  }

  main .longform-copy p,
  main .long-copy p,
  main .sales-prose > p:not(.sales-label),
  main .letter-section .sales-letter > p,
  main .offer-longform p {
    font-size: 24px !important;
    line-height: 1.58 !important;
  }

  body.google-ads-page main .long-copy p {
    font-size: 24px !important;
    line-height: 1.58 !important;
  }

  body.google-ads-page main .long-copy p.opening {
    font-size: 27px !important;
  }

  main h1,
  .career-hero h1,
  .references-hero h1,
  .about-hero h1 {
    font-size: clamp(66px, 9vw, 92px) !important;
  }

  main h2,
  .section-title,
  .career-section-head h2,
  .career-story h2,
  .career-apply h2,
  .career-faq h2,
  .about-cta h2 {
    font-size: clamp(50px, 7vw, 72px) !important;
  }

  main h3 {
    font-size: clamp(30px, 4.4vw, 42px) !important;
  }

  main :where(p:not(.eyebrow):not([class*="label"]):not([class*="kicker"]):not([class*="index"]):not([class*="note"]):not([class*="tag"]):not([class*="meta"])),
  main li,
  main blockquote {
    font-size: 19px !important;
  }

  .career-work-card,
  .benefit-grid article,
  .principle,
  .case-card,
  .review-card,
  .service-card,
  .method-card,
  .signal-card,
  .sales-testimonial {
    padding: 36px !important;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 17px;
  }

  body {
    font-size: 17px !important;
  }

  .shell,
  .container,
  .page-shell,
  .content-shell,
  .hero-shell,
  .reviews-shell,
  .discover-shell,
  .value-shell,
  .final-shell {
    width: min(calc(100% - 32px), var(--max)) !important;
  }

  main .longform-layout,
  main .letter-layout {
    width: min(calc(100% - 32px), 1040px) !important;
  }

  main .longform-copy p,
  main .long-copy p,
  main .sales-prose > p:not(.sales-label),
  main .letter-section .sales-letter > p,
  main .offer-longform p {
    margin-bottom: 30px !important;
    font-size: 19px !important;
    line-height: 1.65 !important;
  }

  body.google-ads-page main .long-copy p {
    margin-bottom: 30px !important;
    font-size: 19px !important;
    line-height: 1.65 !important;
  }

  body.google-ads-page main .long-copy p.opening {
    font-size: 21px !important;
    line-height: 1.58 !important;
  }

  main .longform-copy p.opening,
  main .long-copy p.opening,
  main .sales-prose > p.sales-opening,
  main .letter-section .sales-letter > p:first-of-type,
  main .offer-longform > p:first-of-type {
    font-size: 21px !important;
    line-height: 1.58 !important;
  }

  main .longform-copy--staccato p,
  main .long-copy--staccato p {
    margin-bottom: 17px !important;
  }

  main .longform-copy--staccato p.opening,
  main .longform-copy--staccato p.opening-continuation,
  main .longform-copy--staccato p.statement-line,
  main .long-copy--staccato p.opening,
  main .long-copy--staccato p.opening-continuation,
  main .long-copy--staccato p.statement-line {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }

  main .longform-copy--staccato p.opening-continuation,
  main .long-copy--staccato p.opening-continuation {
    margin-bottom: 42px !important;
  }

  main .longform-copy--staccato p.spoken-line,
  main .long-copy--staccato p.spoken-line {
    padding-left: 16px !important;
  }

  main h1,
  .career-hero h1,
  .references-hero h1,
  .about-hero h1 {
    font-size: clamp(48px, 13.5vw, 62px) !important;
    line-height: .96 !important;
  }

  main h2,
  .section-title,
  .career-section-head h2,
  .career-story h2,
  .career-apply h2,
  .career-faq h2,
  .about-cta h2 {
    font-size: clamp(42px, 11vw, 54px) !important;
    line-height: 1 !important;
  }

  main h3 {
    font-size: clamp(29px, 8vw, 38px) !important;
  }

  main :where(p:not(.eyebrow):not([class*="label"]):not([class*="kicker"]):not([class*="index"]):not([class*="note"]):not([class*="tag"]):not([class*="meta"])),
  main li,
  main blockquote {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  .lead,
  .hero-copy,
  .career-lead,
  .sales-subheadline,
  .management-head p,
  .references-cta p {
    font-size: 18px !important;
  }

  .btn,
  .career-button,
  .sales-button,
  .report-cta,
  .modal-submit,
  main button:not(.icon-btn):not(.menu-toggle):not(.quiz-back),
  main input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 62px !important;
    padding-inline: 22px !important;
    font-size: 15px !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 58px !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
  }

  .career-work-card,
  .benefit-grid article,
  .principle,
  .case-card,
  .review-card,
  .service-card,
  .method-card,
  .signal-card,
  .sales-testimonial {
    padding: 26px 22px !important;
  }

  .metric,
  .career-signal article,
  .role-card,
  .benefit-list article,
  .sales-offer-list li {
    min-height: auto;
  }

  .proof-logo {
    width: 230px !important;
    height: 78px !important;
    padding-inline: 28px !important;
  }

  .proof-logo img {
    height: 54px !important;
  }

  .quiz-stage {
    width: 100% !important;
  }

  .quiz-stage h1,
  .quiz-stage h2,
  .quiz-question {
    font-size: clamp(38px, 10vw, 48px) !important;
  }

  .quiz-option,
  .quiz-stage label,
  .quiz-stage p {
    font-size: 17px !important;
  }
}

@media (max-width: 380px) {
  .shell,
  .container,
  .page-shell,
  .content-shell,
  .hero-shell,
  .reviews-shell,
  .discover-shell,
  .value-shell,
  .final-shell {
    width: min(calc(100% - 24px), var(--max)) !important;
  }

  main .longform-layout,
  main .letter-layout {
    width: min(calc(100% - 24px), 1040px) !important;
  }

  main h1,
  .career-hero h1,
  .references-hero h1,
  .about-hero h1 {
    font-size: 45px !important;
  }

  main h2,
  .section-title,
  .career-section-head h2,
  .career-story h2,
  .career-apply h2,
  .career-faq h2,
  .about-cta h2 {
    font-size: 39px !important;
  }
}