/* Gemeinsame Abstaende und Komponenten der oeffentlichen Website. */
:root {
  --cream: var(--background);
  --paper: var(--surface);
  --rose: var(--brand-soft);
}
body .shell {
  width: min(var(--content), calc(100% - var(--page-gutter)));
  margin-inline: auto;
}
main.container.service-page > .section {
  width: auto;
  max-width: none;
  margin-inline: 0;
}
.digital-tools-home__copy > .kicker {
  align-items: center;
  gap: 9px;
}
.products-hero,
.services-landing-hero,
.about-hero {
  padding-block: 72px;
  text-align: left;
}
.products-hero,
.services-landing-hero,
.service-hero { align-items: start; }
.service-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: clamp(54px, 7vw, 100px);
}
.products-hero h1,
.services-landing-hero h1,
.about-hero h1,
.hero--image h1,
.hero--dyn h1 {
  max-width: 18ch;
  margin: 0 0 24px;
  font-family: var(--font);
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 740;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero--image h1,
.hero--dyn h1 { margin-inline: auto; }
#main-content > .hero h1 {
  max-width: 18ch;
  font-size: clamp(48px, 7.1vw, 96px);
  line-height: 1.02;
}
.products-hero .products-eyebrow,
.services-landing-hero .services-eyebrow,
.about-hero .kicker,
.service-hero .service-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .14em;
  line-height: 1.65;
}
.service-hero .service-eyebrow::before { content: none; }
.service-hero__media img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.products-hero-actions { margin-top: 28px; }
.product-preview-top { justify-content: flex-end; }
.products-hero .lead,
.services-landing-hero .lead,
.about-hero .lead,
.section-heading > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 400;
  line-height: 1.6;
}
.products-hero > .intro-panel { width: 100%; max-width: none; margin: 0; }
.products-page > .section,
.advisor-section { padding-block: 72px; }
.advisor-section { background: var(--background); border-top: 1px solid var(--line); }
.intro-panel,
.advisor {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 52px;
}
.section-heading > p { justify-self: end; }
.section-heading h2 {
  max-width: 820px;
  margin: 0 0 14px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-family: var(--font);
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.section-heading .eyebrow {
  display: inline-flex;
  margin: 0 0 14px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .14em;
}
.step-copy h3,
.result-head h3,
.summary-layout h3,
.hardware-result-head h3 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.panel-label,
.step-number {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .14em;
  line-height: 1.65;
}
.intro-panel small { line-height: 1.65; }
.intro-panel li > span > i { font-size: 17px; }
.button {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 680;
  box-shadow: var(--shadow-sm);
}
.button-primary:hover,
.button-primary:focus-visible { background: var(--ink); box-shadow: var(--shadow); }
@media (max-width: 1080px) {
  .products-hero > .intro-panel { max-width: 760px; }
  .service-hero { grid-template-columns: 1fr; }
  .service-hero__media { max-width: 760px; }
}
@media (max-width: 760px) {
  .products-hero,
  .services-landing-hero,
  .about-hero { padding-block: 48px; }
  .products-hero h1,
  .services-landing-hero h1,
  .about-hero h1,
  .hero--image h1,
  .hero--dyn h1 {
    font-size: clamp(36px, 10.5vw, 44px);
    line-height: 1.08;
    margin-bottom: 22px;
  }
  .service-hero { gap: 32px; }
  #main-content > .hero h1 {
    font-size: clamp(44px, 12.5vw, 60px);
    line-height: 1.04;
  }
  .advisor-section,
  .products-page > .section { padding-block: 64px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .section-heading > p { justify-self: start; }
}