/* Responsive type sizes from Apple's German homepage, checked 2026-10-23. */
:root {
  --type-hero-size: 56px;
  --type-hero-leading: 1.0714285714;
  --type-hero-tracking: -.005em;
  --type-section-size: 48px;
  --type-section-leading: 1.0834933333;
  --type-section-tracking: -.002em;
  --type-card-size: 32px;
  --type-card-leading: 1.125;
  --type-subtitle-size: 28px;
  --type-subtitle-leading: 1.1428571429;
  --type-button-size: 17px;
  --type-button-leading: 1.1764805882;
  --type-button-tracking: -.022em;
}

#main h1 { font-size: var(--type-hero-size); line-height: var(--type-hero-leading); letter-spacing: var(--type-hero-tracking); font-weight: 600; }
#main h1 span { font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); letter-spacing: .007em; font-weight: 400; }
#main h2 { font-size: var(--type-section-size); line-height: var(--type-section-leading); letter-spacing: var(--type-section-tracking); font-weight: 600; }
#main h3 { font-size: var(--type-card-size); line-height: var(--type-card-leading); letter-spacing: .002em; font-weight: 600; }

/* Product names and configuration headings have their own compact hierarchy. */
#main :is(.home-model-info, .team-member) h3,
#main .door-model-card > strong { font-size: 24px; line-height: 1.1666666667; letter-spacing: .009em; font-weight: 600; }
#main :is(.config-step-content, .selected-door-top, .action-stage-heading, .action-source-notes) h2,
#main .action-content h3,
#modal h2 { font-size: 32px; line-height: 1.125; letter-spacing: .002em; font-weight: 600; }
#main :is(.purchase-steps, .config-step-content) h3,
#modal h3 { font-size: 21px; line-height: 1.1904761905; letter-spacing: .011em; font-weight: 600; }

#main :is(.button, .hero-pill, .text-button, .milano-link, .route-button, .showroom-button),
#modal :is(.button, .text-button) { font-size: var(--type-button-size); line-height: var(--type-button-leading); letter-spacing: var(--type-button-tracking); font-weight: 400; }
#main .model-pill,
#main .door-model-link,
#main .summary-actions .button,
#main :is(.preview-view-switch, .edition-toggle, .config-steps, .action-tabs) button { font-size: 14px; line-height: 1.2857742857; letter-spacing: -.016em; font-weight: 400; }
#main .action-tabs button { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1068px) {
  :root {
    --type-hero-size: 48px;
    --type-hero-leading: 1.0834933333;
    --type-hero-tracking: -.002em;
    --type-section-size: 40px;
    --type-section-leading: 1.1;
    --type-section-tracking: 0em;
    --type-card-size: 28px;
    --type-card-leading: 1.1428571429;
    --type-subtitle-size: 24px;
    --type-subtitle-leading: 1.1666666667;
  }
}

@media (max-width: 734px) {
  :root {
    --type-hero-size: 32px;
    --type-hero-leading: 1.125;
    --type-hero-tracking: .002em;
    --type-section-size: 32px;
    --type-section-leading: 1.125;
    --type-section-tracking: .002em;
    --type-card-size: 24px;
    --type-card-leading: 1.1666666667;
    --type-subtitle-size: 19px;
    --type-subtitle-leading: 1.2105263158;
    --type-button-size: 14px;
    --type-button-leading: 1.2857742857;
    --type-button-tracking: -.016em;
  }
}

/* Showroom shares the homepage's type family and responsive hierarchy. */
.showroom-page #main :is(p, address, label, input, textarea, button, blockquote) { font-family: var(--font); }
.showroom-page #main .showroom-intro blockquote { font-size: var(--type-card-size); line-height: var(--type-card-leading); letter-spacing: .002em; font-weight: 600; }
.showroom-page #main .showroom-hero-content > p { font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); letter-spacing: .007em; font-weight: 400; }

/* Flatter action buttons across the website, without changing their type sizes. */
#main :is(.button, .hero-pill, .showroom-button, .route-button),
#modal .button { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
#main .model-pill { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
#main .summary-actions .button { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
#main :is(.text-button, .milano-link), #modal .text-button { padding-top: 5px; padding-bottom: 5px; }
#main :is(.preview-view-switch, .edition-toggle, .segmented) button { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
#main .config-steps button { padding-top: 12px; padding-bottom: 12px; }
#main .action-tabs button { padding-top: 5px; padding-bottom: 5px; }

@media (max-width: 734px) {
  #main :is(.button, .hero-pill, .showroom-button, .route-button),
  #modal .button { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  #main .model-pill, #main .summary-actions .button { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  #main .config-steps button { padding-top: 10px; padding-bottom: 10px; }

}

/* Narrower buttons: horizontal spacing only; established heights stay unchanged. */
#main :is(.button, .hero-pill, .showroom-button),
#modal .button { padding-left: 18px; padding-right: 18px; }
#main .model-pill { padding-left: 18px; padding-right: 18px; }
#main :is(.button.compact, .route-button) { padding-left: 13px; padding-right: 13px; }
#main .summary-actions .button { padding-left: 10px; padding-right: 10px; }
#main .config-navigation .button { padding-left: 16px; padding-right: 16px; }
#main :is(.preview-view-switch, .edition-toggle, .segmented) button { padding-left: 12px; padding-right: 12px; }

@media (max-width: 760px) {
  #main :is(.button, .hero-pill, .showroom-button),
  #modal .button { padding-left: 14px; padding-right: 14px; }
  #main .model-pill { padding-left: 13px; padding-right: 13px; }
  #main :is(.button.compact, .route-button),
  #main .config-navigation .button { padding-left: 11px; padding-right: 11px; }
  #main .summary-actions .button { padding-left: 10px; padding-right: 10px; }
  #main :is(.preview-view-switch, .edition-toggle, .segmented) button { padding-left: 6px; padding-right: 6px; }
}

/* Homepage mobile reading scale: system fonts require no downloads. */
@media (max-width: 760px) {
  .home-page {
    --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --title: var(--font);
    --type-hero-size: 40px;
    --type-section-size: 40px;
    --type-hero-leading: 1.1;
    --type-section-leading: 1.1;
    --type-hero-tracking: 0;
    --type-section-tracking: 0;
  }
  .home-page #main :is(h1, h2) {
    font-family: var(--font);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .home-page #main :is(section, .trust-strip) :is(p, address, dd, summary),
  .home-page #main .section-copy,
  .home-page #main .trust-strip,
  .home-page #main .showroom-hours {
    font-family: var(--font);
    font-size: 19px;
    line-height: 1.4211;
    letter-spacing: .012em;
  }
  .home-page #main .hero h1 span,
  .home-page #main #ausstellung :is(address strong, .showroom-hours-title) {
    font-size: 19px;
    line-height: 1.4211;
  }
  .home-page #main .hero {
    height: auto;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 56px 7%;
  }
  .home-page #main .hero-content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    transform: none;
  }
  .home-page #main .hero p { max-width: 38ch; }
  .home-page #main #ausstellung .showroom-location-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-page #main #ausstellung .showroom-hours > div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .home-page #main #ausstellung :is(address strong, .showroom-hours-title) {
    min-height: 0;
  }
}

/* Keep each mobile advantage on one line within its grid cell. */
@media (max-width: 760px) {
  .home-page #main .trust-strip {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
  }
  .home-page #main .trust-strip li,
  .home-page #main .trust-strip a {
    white-space: nowrap;
  }
}

/* One lightweight, fixed-height mobile benefit ticker; no script or assets. */
@media (max-width: 760px) {
  .home-page #main .trust-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 24px;
    gap: 0;
    min-height: 48px;
    padding: 12px 5%;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    border: 0;
  }
  .home-page #main .trust-strip li {
    grid-area: 1 / 1;
    min-width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    animation: mobile-benefit-fade 16s linear infinite;
    animation-delay: -.64s;
  }
  .home-page #main .trust-strip a,
  .home-page #main .trust-strip a:hover,
  .home-page #main .trust-strip a:focus-visible {
    color: #fff;
    font-size: inherit;
    line-height: 24px;
  }
  .home-page #main .trust-strip a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  .home-page #main .trust-strip li:nth-child(2) { animation-delay: 3.36s; }
  .home-page #main .trust-strip li:nth-child(3) { animation-delay: 7.36s; }
  .home-page #main .trust-strip li:nth-child(4) { animation-delay: 11.36s; }
  .home-page #main .trust-strip:focus-within li { animation-play-state: paused; }
  @keyframes mobile-benefit-fade {
    0% { opacity: 0; visibility: visible; }
    4%, 21% { opacity: 1; visibility: visible; }
    24.99% { opacity: 0; visibility: visible; }
    25%, 100% { opacity: 0; visibility: hidden; }
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .home-page #main .trust-strip li { animation: none; opacity: 0; visibility: hidden; }
  .home-page #main .trust-strip li:nth-child(2) { opacity: 1; visibility: visible; }
}