/* Page-specific layouts for the illustrative digital construction workflows. */
#main-content .digital-v7 .d7-hero { background:var(--sp-paper); padding-block:56px 0; }
#main-content .digital-v7 .d7-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:end; gap:48px; }
#main-content .digital-v7 .d7-hero__copy { padding-block:0 64px; }
#main-content .digital-v7 .d7-hero h1 { font-size:var(--sg-size-split-display); max-width:none; }
#main-content .digital-v7 .d7-hero .sp-eyebrow .sp-text-link { font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit; padding-block:0; }
#main-content .digital-v7 .d7-hero .sp-lead { max-width:51ch; }
#main-content .digital-v7 .d7-hero__image { position:relative; align-self:stretch; min-height:480px; margin:0; }
#main-content .digital-v7 .d7-hero__image figcaption { position:absolute; inset-block-end:0; inset-inline-start:0; z-index:1; padding:6px 12px; background:#fff; color:var(--sp-muted); font-size:var(--sg-size-caption); line-height:1.5; }
#main-content .digital-v7 .d7-hero__image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; outline:1px solid oklch(0 0 0 / .1); outline-offset:-1px; }
#main-content .digital-v7 .d7-overview { background:#203e53; color:#fff; }
#main-content .digital-v7 .d7-overview__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#main-content .digital-v7 .d7-overview__item { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; padding:28px 24px 28px 0; }
#main-content .digital-v7 .d7-overview__item + .d7-overview__item { padding-inline-start:24px; border-inline-start:1px solid #6a8292; }
#main-content .digital-v7 .d7-overview__item > span { color:#ffb28c; font-size:var(--sg-size-label); font-weight:var(--sg-weight-strong); }
#main-content .digital-v7 .d7-overview__item .d7-overview__title { display:block; color:#fff; font-size:var(--sg-size-lead); font-weight:var(--sg-weight-strong); line-height:1.45; letter-spacing:0; }
#main-content .digital-v7 .d7-overview__item p { color:#e0e8ed; font-size:var(--sg-size-label); margin-block-start:5px; }
#main-content .digital-v7 .d7-section { padding-block:104px; }
#main-content .digital-v7 .d7-introduction__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 88px; }
#main-content .digital-v7 .d7-introduction h2 { max-width:19ch; }
#main-content .digital-v7 .d7-introduction__grid > div:last-child { padding-block-start:30px; }
#main-content .digital-v7 .d7-context { border-inline-start:3px solid var(--sp-orange); margin-block-start:26px; padding-inline-start:20px; font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-document { background:var(--sp-paper); }
#main-content .digital-v7 .d7-section-heading { max-width:68ch; }
#main-content .digital-v7 .d7-section-heading h2 { max-width:24ch; }
#main-content .digital-v7 .d7-section-heading > p:not(.sp-eyebrow) { margin-block-start:24px; }
#main-content .digital-v7 .d7-document-flow { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.62fr) minmax(0,1fr); margin-block-start:48px; border:1px solid var(--sp-line); background:#fff; }
#main-content .digital-v7 .d7-document-flow > div { min-width:0; padding:30px; }
#main-content .digital-v7 .d7-kicker { font-size:var(--sg-size-caption); font-weight:var(--sg-weight-strong); letter-spacing:.055em; line-height:1.5; color:var(--sp-blue); }
#main-content .digital-v7 .d7-document-flow h3 { font-size:var(--sg-size-card); margin-block-start:16px; }
#main-content .digital-v7 .d7-document-flow blockquote { margin:24px 0 0; padding:20px; border-inline-start:3px solid #a9bdcb; background:var(--sp-paper); font-size:var(--sg-size-body); line-height:1.7; }
#main-content .digital-v7 .d7-document-flow__action { background:#e7edf1; }
#main-content .digital-v7 .d7-document-flow__action > span { display:block; color:var(--sp-blue); font-size:2rem; line-height:1; margin-block-end:24px; }
#main-content .digital-v7 .d7-document-flow__action p:not(.d7-kicker) { margin-block-start:12px; }
#main-content .digital-v7 .d7-document-flow__result { background:#203e53; color:#fff; }
#main-content .digital-v7 .d7-document-flow__result .d7-kicker { color:#d0e2ec; }
#main-content .digital-v7 .d7-document-flow__result dl { margin-block-start:18px; }
#main-content .digital-v7 .d7-document-flow__result dl > div { padding-block:12px; border-block-end:1px solid #617d8f; }
#main-content .digital-v7 .d7-document-flow__result dt { color:#d0e2ec; font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-document-flow__result dd { margin:3px 0 0; color:#fff; line-height:1.5; }
#main-content .digital-v7 .d7-document-flow__review { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:12px 48px; align-items:baseline; padding-block:22px; border-block-start:1px solid var(--sp-line); background:var(--sp-paper); }
#main-content .digital-v7 .d7-document-flow__review .d7-document-flow__next { margin:0; color:var(--sp-ink); font-size:var(--sg-size-ui); font-weight:var(--sg-weight-strong); line-height:1.5; }
#main-content .digital-v7 .d7-document-flow__tasks { margin:0; padding-inline-start:20px; color:var(--sp-ink); font-size:var(--sg-size-ui); line-height:1.6; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 40px; }
#main-content .digital-v7 .d7-check { margin-block-start:22px; font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-photo__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px 88px; align-items:start; }
#main-content .digital-v7 .d7-photo__media { margin:0; }
#main-content .digital-v7 .d7-photo__media figcaption { padding:10px 0 0; color:var(--sp-muted); font-size:var(--sg-size-caption); line-height:1.5; }
#main-content .digital-v7 .d7-photo__media img { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; outline:1px solid oklch(0 0 0 / .1); outline-offset:-1px; }
#main-content .digital-v7 .d7-photo__copy h2 { max-width:21ch; }
#main-content .digital-v7 .d7-photo__copy > p:not(.sp-eyebrow) { margin-block-start:22px; }
#main-content .digital-v7 .d7-photo__steps { list-style:none; padding:0; margin-block-start:32px; }
#main-content .digital-v7 .d7-photo__steps li { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding-block:16px; border-block-start:1px solid var(--sp-line); }
#main-content .digital-v7 .d7-photo__steps strong { color:var(--sp-blue); font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-photo__steps p { font-size:var(--sg-size-ui); }
#main-content .digital-v7 .d7-photo__fields { display:grid; gap:8px; margin-block-start:16px; }
#main-content .digital-v7 .d7-photo__fields > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px; }
#main-content .digital-v7 .d7-photo__fields dt { color:var(--sp-muted); font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-photo__fields dd { margin:0; color:var(--sp-ink); font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-photo__copy .d7-photo__note { margin-block-start:20px; font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-handover { background:#eee9e0; }
#main-content .digital-v7 .d7-handover__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:56px 88px; align-items:center; }
#main-content .digital-v7 .d7-handover__intro h2 { max-width:23ch; }
#main-content .digital-v7 .d7-handover__intro > p:not(.sp-eyebrow) { margin-block-start:24px; }
#main-content .digital-v7 .d7-handover__sheet { padding:32px; border:1px solid #c8d2d9; border-block-start:4px solid var(--sp-blue); background:#fff; }
#main-content .digital-v7 .d7-handover__sheet h3 { font-size:var(--sg-size-card); margin-block:12px 24px; }
#main-content .digital-v7 .d7-handover__row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding-block:16px; border-block-start:1px solid var(--sp-line); }
#main-content .digital-v7 .d7-handover__row span { color:var(--sp-blue); font-size:var(--sg-size-label); font-weight:var(--sg-weight-strong); }
#main-content .digital-v7 .d7-handover__row p { font-size:var(--sg-size-ui); }
#main-content .digital-v7 .d7-handover__foot { padding-block-start:18px; border-block-start:1px solid var(--sp-line); color:var(--sp-muted); font-size:var(--sg-size-label); }
#main-content .digital-v7 .d7-faq .faq-ledger { margin-block-start:36px; }
#main-content .digital-v7 .d7-closing { padding-block:72px; background:var(--sp-paper); }
#main-content .digital-v7 .d7-closing__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 88px; }
#main-content .digital-v7 .d7-closing h2 { max-width:20ch; }
#main-content .digital-v7 .d7-introduction__grid > div:last-child > p + p:not(.d7-context),
#main-content .digital-v7 .d7-handover__intro > p + p:not(.sp-eyebrow),
#main-content .digital-v7 .d7-practice__grid > div:last-child > p + p { margin-block-start:20px; }
#main-content .digital-v7 .d7-practice { background:var(--sp-paper); }
#main-content .digital-v7 .d7-practice__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 88px; }
#main-content .digital-v7 .d7-practice h2 { max-width:20ch; }
#main-content .digital-v7 .d7-practice__grid > div:last-child { padding-block-start:30px; }
#main-content .digital-v7 .d7-question { margin-block-start:72px; padding:clamp(24px,4vw,48px); background:#fff; border:1px solid #c8d2d9; }
#main-content .digital-v7 .d7-question__intro { max-width:none; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 48px; }
#main-content .digital-v7 .d7-question__intro > p:not(.d7-kicker) { grid-column:2; grid-row:1 / span 2; margin-block-start:0; max-width:62ch; }
#main-content .digital-v7 .d7-question__intro h3 { font-size:var(--sg-size-subsection); margin-block-start:12px; }
#main-content .digital-v7 .d7-question__content { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); margin-block-start:28px; border:1px solid var(--sp-line); }
#main-content .digital-v7 .d7-question__content > div { min-width:0; padding:24px; }
#main-content .digital-v7 .d7-question__source { background:var(--sp-paper); }
#main-content .digital-v7 .d7-question__content p:not(.d7-kicker) { margin-block-start:10px; }
#main-content .digital-v7 .d7-question__answer .d7-kicker:not(:first-child) { margin-block-start:24px; }
#main-content .digital-v7 .d7-question__answer .d7-question__prompt { color:var(--sp-ink); font-weight:var(--sg-weight-strong); }
#main-content .digital-v7 .d7-question .d7-question__review { margin-block-start:18px; font-size:var(--sg-size-label); }
@media (max-width:900px) {
  #main-content .digital-v7 .d7-hero__grid, #main-content .digital-v7 .d7-photo__grid { grid-template-columns:1fr 1fr; gap:32px; }
  #main-content .digital-v7 .d7-document-flow { grid-template-columns:1fr 1fr; }
  #main-content .digital-v7 .d7-document-flow__result { grid-column:1 / -1; }
  #main-content .digital-v7 .d7-question__intro { grid-template-columns:1fr; gap:0; }
  #main-content .digital-v7 .d7-question__intro > p:not(.d7-kicker) { grid-column:1; grid-row:auto; margin-block-start:16px; }
  #main-content .digital-v7 .d7-document-flow__review { grid-template-columns:1fr; }
  #main-content .digital-v7 .d7-introduction__grid, #main-content .digital-v7 .d7-handover__grid, #main-content .digital-v7 .d7-closing__grid { gap:40px; }
}
@media (max-width:650px) {
  #main-content .digital-v7 .d7-hero { padding-block-start:32px; }
  #main-content .digital-v7 .d7-hero__grid, #main-content .digital-v7 .d7-introduction__grid, #main-content .digital-v7 .d7-photo__grid, #main-content .digital-v7 .d7-handover__grid, #main-content .digital-v7 .d7-closing__grid, #main-content .digital-v7 .d7-practice__grid { grid-template-columns:1fr; gap:32px; }
  #main-content .digital-v7 .d7-hero__copy { padding-block-end:0; }
  #main-content .digital-v7 .d7-hero__image { min-height:0; }
  #main-content .digital-v7 .d7-hero__image img { aspect-ratio:4 / 3; }
  #main-content .digital-v7 .d7-overview__grid { grid-template-columns:1fr; }
  #main-content .digital-v7 .d7-overview__item, #main-content .digital-v7 .d7-overview__item + .d7-overview__item { padding:17px 0; border:0; }
  #main-content .digital-v7 .d7-overview__item + .d7-overview__item { border-block-start:1px solid #6a8292; }
  #main-content .digital-v7 .d7-section { padding-block:64px; }
  #main-content .digital-v7 .d7-introduction__grid > div:last-child, #main-content .digital-v7 .d7-practice__grid > div:last-child { padding:0; }
  #main-content .digital-v7 .d7-question { margin-block-start:48px; }
  #main-content .digital-v7 .d7-question__content { grid-template-columns:1fr; }
  #main-content .digital-v7 .d7-question__content > div { padding:20px; }
  #main-content .digital-v7 .d7-document-flow { grid-template-columns:1fr; margin-block-start:32px; }
  #main-content .digital-v7 .d7-document-flow__action > span { width:fit-content; transform:rotate(90deg); }
  #main-content .digital-v7 .d7-document-flow__result { grid-column:auto; }
  #main-content .digital-v7 .d7-document-flow__tasks { grid-template-columns:1fr; }
  #main-content .digital-v7 .d7-document-flow > div, #main-content .digital-v7 .d7-handover__sheet { padding:24px; }
  #main-content .digital-v7 .d7-photo__media img { aspect-ratio:4 / 3; }
  #main-content .digital-v7 .d7-closing { padding-block:56px; }
}
@media (max-width:650px) {
  #main-content .digital-v7 .d7-handover__row, #main-content .digital-v7 .d7-photo__steps li { grid-template-columns:1fr; gap:4px; }
}
@media (max-width:380px) {
  #main-content .digital-v7 .d7-photo__steps li, #main-content .digital-v7 .d7-handover__row { grid-template-columns:1fr; gap:4px; }
}

@media (max-width:900px) {
  #main-content .digital-v7 .d7-overview__grid { grid-template-columns:1fr; }
  #main-content .digital-v7 .d7-overview__item, #main-content .digital-v7 .d7-overview__item + .d7-overview__item { padding:17px 0; border:0; }
  #main-content .digital-v7 .d7-overview__item + .d7-overview__item { border-block-start:1px solid #6a8292; }
}

/* Tablet portrait: the two-column document flow and handover blocks are too narrow for long German compounds below ~760px. */
@media (max-width:760px) {
  #main-content .digital-v7 .d7-document-flow { grid-template-columns:1fr; }
  #main-content .digital-v7 .d7-document-flow__action > span { width:fit-content; transform:rotate(90deg); }
  #main-content .digital-v7 .d7-document-flow__result { grid-column:auto; }
  #main-content .digital-v7 .d7-handover__grid, #main-content .digital-v7 .d7-photo__grid { grid-template-columns:1fr; gap:32px; }
}

#main-content .digital-v7 .d7-introduction .d7-check { margin-block-start:0; padding-block-start:4px; font-size:inherit; }
