/* Paper objects accompany the real form; text and actions stay in the document. */
.sc-workflow-art { position: relative; min-width: 0; }
.sc-workflow-art__picture { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; background: #fffaf0; }
.sc-workflow-art__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-workflow-art__picture video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.sc-workflow-art[data-frame-visible] video { opacity: 1; }
.sc-workflow-art__play { display: block; min-height: 44px; max-width: 100%; margin: .25rem auto 0; padding: .5rem 8px; color: var(--sc-ink, #172033); font: inherit; font-size: .875rem; font-weight: 600; white-space: normal; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; scroll-margin-top: calc(var(--sc-workflow-header-height, 72px) + 16px); }
.sc-workflow-art__play[hidden] { display: none; }
.sc-workflow-art__play:hover { color: #855000; }
.sc-workflow-art__play:focus-visible { outline: 2px solid #855000; outline-offset: 2px; border-radius: 4px; }
.sc-workflow-art__status { display: block; font-size: .875rem; line-height: 1.5; color: var(--sc-muted, #46596a); text-align: center; }
.sc-workflow-art__status:empty { display: none; }
.sc-workflow-art--compact { width: 88px; flex: 0 0 88px; }
.sc-workflow-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sc-workflow-heading :where(h1, h2) { min-width: 0; overflow-wrap: anywhere; }
.sc-workflow-step-heading { margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem 1rem; }
.sc-workflow-step-heading h2 { margin: 0; flex: 1 1 12em; }
.sc-workflow-step-heading .sc-workflow-step-art { width: 64px; flex: 0 0 64px; }
.sc-workflow-step-heading .sc-workflow-step-art { margin-inline-start: auto; }
.sc-cancellation :where(fieldset, button, select) { min-width: 0; max-width: 100%; }
.sc-cancellation :where(h1, h2, h3, p, label, legend, summary, a, dt, dd, button) { overflow-wrap: anywhere; }
.sc-site.sc-cancellation [data-wizard-step] h2,
.sc-site.sc-cancellation [x-ref="errorSummary"],
.sc-site.sc-cancellation [x-ref="serverErrors"],
.sc-site.sc-cancellation .sc-wizard-signature { scroll-margin-top: max(6rem, calc(var(--sc-workflow-header-height, 72px) + 24px)); }
.contract-story .sc-workflow-art { max-width: 204px; margin-inline: auto; }
.contract-story .sc-workflow-art__picture { border-radius: .75rem; }
.sc-home .contract-story:has(.sc-workflow-art) { background: #fffaf0; }
.sc-home .contract-story:has(.sc-workflow-art) .contract-story__stage { background: #fffaf0; border-color: transparent; }
/* Widths in rem grow with enlarged text, so the play label wraps between words instead of inside them. */
.sc-workflow-result-art { max-width: 11rem; margin: 0 auto 1rem; }
.sc-home-entry-art { display: none; }
.sc-workflow-process-art { max-width: 10rem; margin-top: 1rem; }
/* The workflow stays reachable when users enlarge text independently of viewport. */
.site-header nav > div:first-child { height: auto; min-height: 72px; flex-wrap: wrap; padding-block: .5rem; }
.site-header nav > div:first-child > div.flex-1 { min-width: 0; flex-wrap: wrap; }
.site-header .site-menu > div { max-width: calc(100vw - 2rem); }
.sc-home :where(h1, h2, h3, p, dt, dd, a) { overflow-wrap: anywhere; }
.sc-home :where(.sc-entry > *, .sc-process-step > div, .sc-transparency-layout > *, .provider-tasks__task) { min-width: 0; }
.sc-home #photo-start button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
    .sc-home .sc-entry { grid-template-columns: minmax(0, 1fr); }
    .sc-home .sc-process { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
    .sc-home .sc-transparency-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
    .sc-workflow-mobile-intro { display: flex; align-items: center; gap: 1rem; }
    .sc-workflow-mobile-intro h1 { min-width: 0; flex: 1; }
    .sc-home-entry-art { display: block; }
}
@media (max-width: 639px) {
    .sc-workflow-art--compact { width: 64px; flex-basis: 64px; }
    .sc-workflow-step-heading .sc-workflow-step-art { width: 48px; flex-basis: 48px; }
    .sc-cancellation [data-wizard-step] > .rounded-2xl { padding: 16px; }
    .sc-workflow-result-art { max-width: 8rem; }
    /* Fixed padding as on the form cards: doubled rem padding split „herunterladen“ at 200 % text.
       This file loads before the app bundle, so the selectors outrank the utility and site rules they replace. */
    div.sc-workflow-result-card { padding: 16px; }
    .sc-workflow-result-card [data-native-pdf] { padding-inline: 16px; }
    /* Four nested rem paddings left 65 px for „Vertrag fotografieren“ at 200 % text. */
    .sc-home div#photo-start { padding: 16px; }
    .sc-home div#photo-start-dropzone { padding: 12px; }
    .sc-home #photo-start button { flex-wrap: wrap; padding-inline: 12px; }
    /* Same for the page, entry, story and task gutters: at 200 % text they left 150 px for
       „Versandnachweis“ and 228 px for „Widerrufsbelehrung“. The values equal the 100 % layout.
       Content sections only: the photo start container deliberately has no gutter. */
    .sc-home div.sc-entry { padding-inline: 16px; }
    .sc-home .sc-entry aside.contract-story { padding-inline: 20px; }
    .sc-home .contract-story li.contract-story__step { gap: 12px; }
    .sc-home section:not(.sc-import-section) > div.max-w-7xl.px-4 { padding-inline: 16px; }
    .sc-home a.provider-tasks__task { padding-inline: 24px; }
}
/* Measured in their own em, these lists only get this narrow with enlarged text, never at 100 % on a phone.
   The number column then moves above the step so „Kündigungsschreiben“ gets the full width. */
.sc-home .sc-process { container-type: inline-size; }
@container (max-width: 14em) {
    .sc-home li.sc-process-step { grid-template-columns: minmax(0, 1fr); }
    .sc-home span.sc-process-number { justify-self: start; width: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .sc-workflow-art__picture video { transition: opacity 160ms ease; }
}