/* Shared text roles. Load after component styles, including extra_styles.
   Keep layout, colours, SVG measurements, code fonts and icon-only controls
   in their components; only reading typography belongs here. */
:root {
  --font-ui: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-body: 1rem;
  --text-small: .875rem;
  --text-meta: .8125rem;
  --text-kicker: .75rem;
  --text-card-title: 1.125rem;
  --text-dialog-title: clamp(1.375rem, 1.25rem + .5vw, 1.625rem);
  --text-price: 1.5rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-display: 1.12;
  --leading-heading: 1.25;
  --leading-ui: 1.5;
  --leading-body: 1.65;
  --leading-prose: 1.75;
  --tracking-heading: -.02em;
  --tracking-kicker: .08em;
  --fs-display-1: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --fs-display-2: var(--fs-h2);
  --fs-h1: clamp(1.75rem, 1.375rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --fs-lead: clamp(1rem, .975rem + .2vw, 1.125rem);
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: anywhere;
  hyphens: auto;
}

body :is(strong, b) { font-weight: var(--weight-semibold); }

/* Page titles and section titles have the same hierarchy on every route. */
body :is(.page-title, .page-hero h1, .product-heading h1,
  .catalog-shop .catalog-heading h1, .guide-intro h1, .guide-heading h1,
  .customer-account__heading .page-title, .partner-pool-detail__intro h1,
  .request-flow-page__head h1, .error-page__content h1,
  .customer-request-detail .customer-account__heading .page-title) {
  font-size: var(--fs-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
}

body .home-entry__intro h1 {
  font-size: var(--fs-display-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
}

body :is(.section__title, .home-planner h2, .home-ar h2,
  .guide-group-heading .section__title, .article-section > h2,
  .prose-page__h2, .guide-block__title) {
  font-size: var(--fs-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

body #so-funktioniert-es .section__title {
  font-size: var(--fs-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

body :is(.entry-card h3, .catalog-shop .catalog-product__body h3,
  .guide-row__text h3, .guide-index h3, .guide-teaser h3,
  .flow-card h3, .step-card h3, .account-card h2, .auth-panel__aside h2,
  .contact-note h2, .customer-panel__heading h2, .customer-project__title,
  .account-note h3, .lead-item__title, .callout__title,
  .legal-section h2, .guide-sources h2, .request-step__title > strong,
  .request-step__subhead, .product-options .size-editor__head h2,
  .color-modal__head h2, .consent__title, .configurator-guide__head h2,
  .key-facts__title) {
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

body #so-funktioniert-es .process-story__copy h3 {
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

body :is(.entry-card h3, .catalog-shop .catalog-product__body h3) {
  font-size: var(--text-card-title);
}

body :is(.home-entry__paths-title, .catalog-shop .catalog-sidebar h2,
  .product-options .config-section__copy > strong,
  .config-section__copy h3) {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

/* Introductory copy is one step above normal reading text. */
body :is(.page-lead, .page-hero__lead, .section__lead,
  .home-entry__lead, .home-planner .home-planner__intro,
  .home-ar .home-ar__intro, .guide-heading__lead,
  .catalog-shop .catalog-heading p, .customer-account__heading p:not(.kicker),
  .request-flow-page__head > p:last-child) {
  font-size: var(--fs-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

/* Body copy stays legible on mobile instead of shrinking at breakpoints. */
body :is(.detail-intro, .detail-platform-note, .faq summary, .faq p,
  .faq-answer, .auth-panel__aside p, .auth-panel__list li,
  .guide-row__text p, .guide-checklist__intro p, .flow-card p, .step-card p,
  .contact-note p, .contact-lead, .consent__text, .consent__list,
  .customer-account__intro, .customer-panel__heading p,
  .account-note p, .lead-message p, .prose-page p) {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

body .faq summary { font-weight: var(--weight-medium); }

body :is(.legal-text, .article-prose > p, .article-list li) {
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  letter-spacing: 0;
}

/* Cards, help text and secondary descriptions share a readable small size. */
body :is(.entry-card p, .catalog-shop .catalog-product__description,
  .catalog-shop .catalog-heading__help, .catalog-shop .catalog-toolbar > p,
  .catalog-shop .catalog-filter-link, .catalog-shop .catalog-category > summary,
  .catalog-shop .catalog-facet legend, .catalog-shop .catalog-facet__option,
  .catalog-shop .catalog-sort label, .catalog-shop .catalog-sort select,
  .catalog-shop .catalog-product-groups > summary strong,
  .catalog-shop .variant-toggle__text strong, .product-heading__config,
  .product-choice__title, .montage-card__label, .ral-choice__text strong,
  .color-picker__text strong, .variant-toggle__text strong,
  .detail-intro__facts, .detail-usps li, .footnote, .notice, .notice-box,
  .field__hint, .field__error, .auth-form__hint, .auth-panel__hint,
  .account-card__note, .account-note__list, .lead-item__note, .lead-item__warn,
  .customer-project__progress, .customer-status-guide__intro,
  .customer-status-guide dd, .pool-cell__sub,
  .configurator-guide__head > p:last-child, .configurator-guide__note,
  .customer-access-note p, .request-flow__hint, .consent-box,
  .privacy-note, .consent__note, .callout__text, .key-facts__list li,
  .consent-box label, .request-flow .consent-box label, .form-hint,
  .request-step__title > small, .catalog-shop .catalog-help p,
  .gallery__heading > span:first-child, .gallery-viewer__controls,
  .guide-sources__intro, .guide-sources__list, .data-table,
  .site-footer__intro, .site-footer__links .site-footer__link,
  .home-planner .arband__ticks li, .home-ar .home-ar__hint) {
  font-size: var(--text-small);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body #so-funktioniert-es .process-story__copy p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body #so-funktioniert-es .process-story__action p {
  font-size: var(--text-small);
  line-height: var(--leading-ui);
}

/* Metadata, captions and fine print use a common floor of 13px. */
body :is(.breadcrumb, .guide-breadcrumb, .catalog-shop .catalog-breadcrumbs,
  .guide-heading__meta, .gallery__caption, .article-figure figcaption,
  .guide-image figcaption, .guide-section-image figcaption,
  .guide-article .guide-heading .guide-article-cover figcaption,
  .home-planner__visual figcaption, .home-ar__visual figcaption,
  .section__note, .price-note, .detail-price__note, .detail-actions__note,
  .gallery__selection, .gallery__feedback, .detail-page .gallery__counter,
  .detail-page .gallery__caption, .detail-bar__info small,
  .product-sizes__note, .product-options__selection, .product-options__roof-note,
  .product-choice__detail, .product-options .montage-card__hint,
  .color-picker__text small, .ral-choice__text > span,
  .size-editor__head > p, .config-section__copy small, .config-section__copy p,
  .guide-table-source small, .data-table__note, .data-table__caption,
  .catalog-shop .catalog-product__category, .catalog-shop .catalog-product__choices,
  .catalog-shop .catalog-product__price-label, .catalog-shop .catalog-product__price-note,
  .catalog-shop .variant-toggle__text > span, .catalog-shop .variant-range-note,
  .catalog-shop .catalog-sidebar__service p, .catalog-shop .catalog-facet__label small,
  .catalog-shop .catalog-product-groups > summary small,
  .catalog-shop .catalog-footnote, .catalog-shop .catalog-help span,
  .catalog-shop .catalog-sidebar__service strong, .catalog-shop .catalog-product__badge,
  .catalog-shop .catalog-pagination__summary, .catalog-shop .catalog-sidebar__heading > a,
  .catalog-shop .catalog-filter-link > span:last-child:not(:first-child),
  .catalog-shop .catalog-category__count, .catalog-shop .catalog-facet__count,
  .catalog-shop .catalog-selected > a, .catalog-shop .catalog-facet-reset,
  .site-footer__disclaimer, .site-footer__bottom,
  .site-footer__quick-legal a, .site-footer__quick-legal button,
  .search-preview__category, .search-preview__price-note,
  .search-preview__heading, .search-preview__heading > :last-child,
  .search-preview__status, .customer-tabs__copy small,
  .request-rail__step-text small, .choice-card__body small,
  .customer-project__reference small, .customer-project__meta,
  .lead-status, .lead-chip, .account-facts dt, .pool-cell__label,
  .site-account__menu-head, .img-ph__note,
  .gallery__thumb .img-ph__label, .stepper__head,
  .stepper__head > span:first-child small, .stepper__head span:last-child) {
  font-size: var(--text-meta);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body :is(.eyebrow, .kicker, .kicker-pill, .home-entry__eyebrow,
  .home-planner .kicker, .home-ar .kicker, .guide-heading__category,
  .product-heading__category, .site-footer__summary .site-footer__col-title,
  .callout__label, .article-toc__title, .legal-toc__title,
  .cine__live, .cine__live--sm) {
  font-size: var(--text-kicker);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-kicker);
}

/* All actions use the same weight and size, including navigation. */
body :is(.btn, .btn--sm, .btn--lg, .link-arrow, .entry-card__action,
  .site-nav__link, .site-nav__menu-link, .site-account__login,
  .site-account__chip, .site-account__menu-link, .site-cta,
  .catalog-shop .catalog-product__view, .catalog-shop .catalog-facet-submit,
  .catalog-shop .catalog-sort__submit, .search-preview__all,
  .gallery__expand, .gallery__retry, .catalog-shop .catalog-help > a,
  .catalog-shop .catalog-pagination__link:not(.catalog-pagination__arrow)) {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body .site-header .site-cta.site-cta--planning {
  font-size: var(--text-small);
  line-height: var(--leading-ui);
}

body #so-funktioniert-es .process-story__action .btn { font-size: var(--text-small); }

body :is(.site-nav__roof-link, .search-preview__title, .search-preview__price) {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
}

body .site-search input { font-size: var(--text-small); }

/* Field values stay at 16px; labels and hints follow their own roles.
   Code entry, numeric measurement inputs and mono editors keep their styling. */
body:not(.admin) :is(label.field, .field label, .field__label,
  .auth-form__label, .request-flow .field) {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body:not(.admin) :is(.field input:not([type="checkbox"]):not([type="radio"]),
  .field select, .field textarea,
  .auth-form__input:not(.auth-form__input--code),
  .request-flow .field input, .request-flow .field select, .request-flow .field textarea) {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-ui);
}

body :is(.detail-price__value, .catalog-shop .catalog-product__price,
  .catalog-row__price, .model-row__price) {
  font-size: var(--text-price);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums;
}

body .catalog-shop .catalog-product__price--request { font-size: var(--text-card-title); }

/* A compact price beside the mobile action must leave room for both texts. */
body .detail-bar__info strong {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
  body .detail-bar .btn {
    max-width: 60%;
    padding-inline: .75rem;
    white-space: normal;
    text-align: center;
  }
}

body :is(.product-choice__title, .montage-card__label,
  .ral-choice__text strong, .color-picker__text strong,
  .variant-toggle__text strong, .catalog-shop .catalog-filter-link.is-active) {
  font-weight: var(--weight-semibold);
}

body .configurator-guide__message {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* The dialog consumes the same roles, retaining its independent scrolling,
   measurement drawing and mobile icon-only edit control. */
body .inquiry-wizard {
  --iw-text: var(--text-body);
  --iw-title: var(--text-dialog-title);
  --iw-question: var(--text-card-title);
  --iw-option: var(--text-body);
  --iw-small: var(--text-small);
  --iw-meta: var(--text-meta);
  font-family: var(--font-ui);
  line-height: var(--leading-body);
}

body .inquiry-wizard :is(.inquiry-wizard__heading,
  .inquiry-wizard__entry .inquiry-wizard__heading) {
  font-size: var(--iw-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

body .inquiry-wizard :is(.inquiry-wizard__question-title,
  .inquiry-wizard__choice-title, .inquiry-wizard__entry-choices .inquiry-wizard__choice-title) {
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

body .inquiry-wizard .inquiry-wizard__entry-choices .inquiry-wizard__choice-title {
  font-size: var(--text-card-title);
}

body .inquiry-wizard .inquiry-wizard__description { line-height: var(--leading-body); }
body .inquiry-wizard .inquiry-wizard__field-label { font-weight: var(--weight-medium); }

body .inquiry-wizard .inquiry-wizard__field label {
  font-size: var(--text-small);
  line-height: var(--leading-ui);
}

body .inquiry-wizard :is(.inquiry-wizard__next, .inquiry-wizard__back,
  .inquiry-wizard__summary-edit) {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
}

body .inquiry-wizard .inquiry-wizard__summary-row dd {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

@media (max-width: 700px) {
  body .inquiry-wizard .inquiry-wizard__entry-choices .inquiry-wizard__choice-title {
    font-size: var(--text-body);
    line-height: var(--leading-heading);
  }
}

/* Administration uses the same hierarchy, with compact table text. */
body.admin {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

body.admin :is(.page-head h1, .catalog-heading h1) {
  font-size: var(--fs-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
}

body.admin :is(.page-head__lead, .table, .field__label,
  .admin-side__link, .catalog-scope-description, .catalog-help) {
  font-size: var(--text-small);
  line-height: var(--leading-ui);
}

body.admin .field__input:not(.field__input--mono) {
  font-size: var(--text-body);
  line-height: var(--leading-ui);
}

body.admin :is(.field__hint, .table th, .admin-side__group-title,
  .admin-side__section-title) {
  font-size: var(--text-meta);
  line-height: var(--leading-ui);
}

/* Printed articles use the reader's chosen print size rather than viewport units. */
@media print {
  :root {
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.125rem;
    --fs-lead: 1rem;
    --fs-display-1: 2rem;
  }
}