/* A project-led editorial page. The reference is real; the overlay is analysis. */
.design-experience { --dx-paper:#f3f0e8; --dx-ink:#191b19; --dx-accent:#b33b24; --dx-line:#c9c6bd; background:var(--dx-paper); color:var(--dx-ink); }
.design-experience :is(h1,h2,h3,p,figure,dl,dd) { margin:0; }
.design-experience :is(h1,h2,h3) { font-family:Arial,"Helvetica Neue",sans-serif; font-style:normal; font-weight:500; letter-spacing:-.055em; text-wrap:balance; }
body[data-brand=webseitenwechsel] .design-experience h1 { font-size:clamp(3rem,5.8vw,5.5rem); line-height:1; max-width:none; font-weight:500; letter-spacing:-.06em; text-wrap:initial; }
body[data-brand=webseitenwechsel] .design-experience h2 { font-size:clamp(2.25rem,4.8vw,4.75rem); line-height:1.05; max-width:none; font-weight:500; }
body[data-brand=webseitenwechsel] .design-experience h3 { font-size:clamp(1.5rem,2vw,2rem); line-height:1.15; }
.design-experience p { line-height:1.65; }
.design-experience p + p { margin-top:1rem; }
.design-experience img { display:block; width:100%; height:auto; }
.design-experience figure { min-width:0; }
.design-experience a { color:inherit; text-underline-offset:.25em; text-decoration-thickness:1px; }
.design-experience .dx-index { font-size:.75rem; letter-spacing:.065em; text-transform:uppercase; margin-bottom:1.5rem; }
.design-experience .dx-link { display:inline-flex; justify-content:space-between; align-items:center; gap:2rem; min-height:48px; font-weight:600; border-bottom:1px solid currentColor; padding-block:.65rem; text-decoration:none; }
.design-experience .dx-link > span { font-size:1.5rem; font-weight:400; }
.design-experience a:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.dx-hero { padding-block:1.5rem 3rem; }
.dx-hero-index { display:flex; justify-content:space-between; gap:1rem; padding-bottom:2rem; font-size:.75rem; letter-spacing:.02em; }
.dx-hero-index p + p { margin:0; text-align:right; }
.dx-hero-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.dx-hero-copy { min-width:0; }
.dx-hero h1 > span { color:var(--dx-accent); }
.design-experience .dx-hero-copy > p { max-width:51ch; margin-top:1.4rem; font-size:1.0625rem; }
.dx-hero-copy .sat-button { margin-top:1.5rem; }
.dx-hero-visual img { aspect-ratio:3 / 2; object-fit:cover; }
.dx-hero-visual figcaption { border-top:1px solid var(--dx-line); padding-top:.75rem; margin-top:.75rem; font-size:.75rem; line-height:1.5; }
.dx-project { padding-block:clamp(2.5rem,5vw,5rem) 2rem; background:var(--dx-ink); color:var(--dx-paper); }
.dx-project-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2.5rem; }
.dx-project-heading .dx-index { color:#c8c6bd; margin-bottom:.6rem; }
body[data-brand=webseitenwechsel] .dx-project-heading h2 { font-size:clamp(2rem,4vw,4rem); }
.dx-project-heading > p { font-size:.8rem; text-align:right; }
.dx-comparison { --split:42%; }
.dx-compare-canvas { position:relative; overflow:hidden; background:#fff; }
.dx-after { display:none; }
.dx-divider { display:none; }
.dx-comparison.is-interactive .dx-compare-canvas { touch-action:pan-y; cursor:ew-resize; user-select:none; }
.dx-comparison.is-interactive .dx-after { display:block; position:absolute; inset:0; background:#f3f0e8; clip-path:inset(0 calc(100% - var(--split)) 0 0); pointer-events:none; }
.dx-after > img { filter:grayscale(1); opacity:.3; }
.dx-analysis { position:absolute; inset:0; width:100%; height:100%; stroke:var(--dx-accent); stroke-width:2; }
.dx-analysis-guide { stroke-dasharray:6 7; stroke-width:1; }
.dx-analysis-number { fill:var(--dx-accent); stroke:none; }
.dx-analysis-text { fill:white; stroke:none; font:17px Arial,sans-serif; }
.dx-comparison.is-interactive .dx-divider { display:block; position:absolute; top:0; bottom:0; left:var(--split); width:2px; background:var(--dx-accent); transform:translateX(-50%); pointer-events:none; }
.dx-divider > span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--dx-accent); color:#fff; border:2px solid #fff; font:1.5rem Arial,sans-serif; }
.dx-compare-canvas img { pointer-events:none; }
.dx-slider-controls:not([hidden]) { display:grid; grid-template-columns:auto minmax(8rem,1fr) auto; gap:2rem; align-items:center; margin-top:1rem; }
.dx-slider-controls :is(label,output) { font-size:.8rem; }
.dx-slider-controls input { width:100%; min-width:0; height:44px; margin:0; accent-color:#df745d; cursor:ew-resize; }
.dx-slider-controls input:focus-visible { outline:2px solid var(--dx-paper); outline-offset:3px; }
.dx-comparison figcaption { display:flex; justify-content:space-between; gap:.5rem 2rem; flex-wrap:wrap; font-size:.7rem; line-height:1.6; color:#c8c6bd; padding-top:.75rem; }
.dx-project-foot { display:flex; justify-content:space-between; align-items:start; gap:2rem; border-top:1px solid #555750; margin-top:2rem; padding-top:1.5rem; font-size:.8rem; }
.dx-project-foot p span { color:#e7907e; margin-right:.3rem; }
.dx-project-foot p i { font-style:normal; color:#8a8b83; margin-inline:.65rem; }
.dx-project-foot a { flex-shrink:0; padding-block:.25rem; }
.dx-build { padding-block:clamp(4rem,8vw,8rem); }
.dx-build-heading { margin-bottom:3rem; }
.dx-build-heading > p:last-child { max-width:45ch; margin-top:1.5rem; }
.dx-build-grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:start; gap:clamp(2rem,5vw,5rem); }
.dx-build-visual { position:relative; min-width:0; }
.dx-build-frame { position:relative; aspect-ratio:1440 / 858; background:#fff; border:1px solid var(--dx-line); overflow:hidden; }
.dx-wire { position:absolute; inset:0; display:grid; grid-template-rows:55% 16% 29%; padding-inline:5%; color:#77746c; font-size:.65rem; letter-spacing:.08em; }
.dx-wire > span { display:flex; align-items:center; border-bottom:1px dashed #bbb8ae; }
.dx-piece { position:absolute; inset:0; }
.dx-piece-heading { clip-path:inset(0 0 45% 0); }
.dx-piece-facts { clip-path:inset(71% 0 0 0); }
.dx-piece-contact { clip-path:inset(55% 0 29% 0); }
.design-experience .dx-build-caption { font-size:.7rem; margin-top:1rem; color:#5c5b55; }
.dx-build-caption > span:first-child { margin-inline:.5rem; }
.dx-build-steps article { display:grid; grid-template-columns:2rem 1fr; gap:1rem; padding-block:2rem; border-top:1px solid var(--dx-line); }
.dx-step-no { color:var(--dx-accent); font-size:.75rem; padding-top:.25rem; }
.dx-build-steps h3 { margin-bottom:1rem; }
.dx-build-steps p { font-size:.95rem; }
.design-experience .dx-step-result { font-size:.8rem; padding-top:1rem; color:#68665f; }
.dx-scope { background:#e8e4da; padding-block:clamp(4rem,7vw,7rem); }
.dx-scope-heading { display:grid; grid-template-columns:1.45fr 1fr; column-gap:5rem; align-items:end; padding-bottom:3rem; }
.dx-scope-heading .dx-index { grid-column:1 / -1; }
body[data-brand=webseitenwechsel] .dx-scope-heading h2 { font-size:clamp(2rem,3.7vw,3.6rem); }
.dx-scope-heading > p:last-child { max-width:37ch; }
.dx-deliverables > div { display:grid; grid-template-columns:1fr 1fr; gap:4rem; border-top:1px solid #b8b5ac; padding-block:1.8rem; }
.dx-deliverables dt { font-size:clamp(1.15rem,1.7vw,1.6rem); letter-spacing:-.025em; }
.dx-deliverables dt span { display:inline-block; font-size:.7rem; color:var(--dx-accent); margin-right:1.5rem; vertical-align:top; padding-top:.4rem; letter-spacing:0; }
.dx-deliverables dd { font-size:.95rem; line-height:1.7; max-width:55ch; }
.dx-deliverables a { display:block; margin-top:.5rem; }
.design-experience .dx-scope-note { margin:1.5rem 0 0 auto; max-width:55ch; font-size:.8rem; color:#5c5b55; }
.dx-decision { padding-block:clamp(4rem,7vw,7rem); }
.dx-decision-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.dx-decision-grid .dx-link { margin-top:1rem; }
.dx-close { background:var(--dx-accent); color:#fff; padding-block:3rem; }
.dx-close-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,20rem); gap:clamp(2rem,6vw,6rem); align-items:center; }
.dx-close-copy { min-width:0; }
.design-experience .dx-close .dx-index { margin-bottom:1rem; }
body[data-brand=webseitenwechsel] .dx-close h2 { max-width:22ch; font-size:clamp(2.25rem,4.2vw,3.75rem); line-height:1.05; }
.dx-close-bottom { max-width:52ch; margin-top:1.25rem; }
.dx-close-bottom p { max-width:48ch; }
.dx-close-bottom .dx-link { margin-top:1rem; }
.design-experience .dx-signature { font-size:.75rem; margin-top:1.5rem; }
.dx-contact-person img { width:100%; aspect-ratio:1; object-fit:cover; }
.dx-contact-person figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem; padding-top:.75rem; font-size:.75rem; line-height:1.5; }
.dx-contact-person strong { font-size:1rem; }
@media(min-width:64rem) and (prefers-reduced-motion:no-preference) {
 .dx-build.is-scrolling .dx-build-visual { position:sticky; top:9rem; }
 .dx-build.is-scrolling .dx-build-steps article { min-height:48vh; padding-block:3rem; }
 .dx-build.is-scrolling .dx-piece { transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
 .dx-build.is-scrolling[data-stage="1"] :is(.dx-piece-facts,.dx-piece-contact), .dx-build.is-scrolling[data-stage="2"] .dx-piece-contact { opacity:0; transform:translateY(1.5rem); }
}
@media(max-width:63.999rem) {
 .dx-hero-grid { gap:2rem; }
 .dx-build-grid { grid-template-columns:1fr; }
 .dx-build-visual { max-width:50rem; }
 .dx-build-steps article { grid-template-columns:3rem 1fr; }
 .dx-build-steps article > div { max-width:55ch; }
 .dx-scope-heading { grid-template-columns:1fr; gap:1.5rem; }
 .dx-scope-heading .dx-index { margin:0; }
 .dx-scope-heading > p:last-child { max-width:55ch; }
 .dx-deliverables > div { gap:2rem; }
 .dx-decision-grid { grid-template-columns:1fr; gap:2rem; }
 .dx-decision-grid > div { max-width:58ch; }
 .dx-project-foot { display:block; }
 .dx-project-foot a { display:inline-block; margin-top:1rem; }
}
@media(min-width:42.001rem) and (max-width:63.999rem) {
 body[data-brand=webseitenwechsel] .dx-hero h1 { font-size:clamp(2.6rem,5.1vw,3.5rem); }
 .dx-hero-visual figcaption { font-size:.7rem; }
}
@media(max-width:42rem) {
 .dx-hero-index { display:block; font-size:.7rem; padding-bottom:1.5rem; }
 .dx-hero-index p + p { margin-top:.3rem; text-align:left; }
 .dx-hero-grid { grid-template-columns:1fr; gap:2rem; }
 .dx-close-grid { grid-template-columns:1fr; gap:2rem; }
 .dx-contact-person { width:min(100%,16rem); }
 .design-experience .dx-hero-copy > p { font-size:1rem; }
 .dx-project-heading { display:block; }
 .dx-project-heading > p { text-align:left; margin-top:1rem; }
 .dx-slider-controls:not([hidden]) { grid-template-columns:1fr auto; gap:.25rem 1rem; }
 .dx-slider-controls input { grid-column:1 / -1; grid-row:2; }
 .dx-slider-controls output { text-align:right; }
 .dx-project-foot p { max-width:30ch; }
 .dx-project-foot p i { margin-inline:.2rem; }
 .dx-build-steps article { grid-template-columns:1.5rem 1fr; gap:.5rem; }
 .dx-build-heading { margin-bottom:2rem; }
 .dx-deliverables > div { grid-template-columns:1fr; gap:.7rem; }
 .dx-deliverables dt span { margin-right:.75rem; }
 .dx-divider > span { width:2.25rem; height:2.25rem; font-size:1.1rem; }
}
@media(prefers-reduced-motion:reduce) {
 .design-experience *, .design-experience *::before { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}