/* Layout only: typography, palette and spacing come from system.css. */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-5) var(--gutter);font-size:var(--font-caption);color:var(--muted)}
.breadcrumb a{text-decoration:underline;text-underline-offset:4px}.breadcrumb svg{width:16px;height:16px;align-self:center}
.detail-hero{display:grid;grid-template-columns:1fr 1fr;margin:0 var(--gutter) var(--space-8);gap:var(--space-8);align-items:center}
.detail-intro h1{font-size:var(--font-page);font-weight:var(--weight-display);line-height:1.06;letter-spacing:var(--tracking-heading);margin:0 0 var(--space-5);text-wrap:balance}
.detail-intro>p{font-size:var(--font-lead);color:var(--muted);max-width:38ch;margin:0 0 var(--space-6)}
.detail-actions{display:flex;align-items:flex-start;flex-direction:column;gap:var(--space-4)}
.detail-hero .primary,.detail-contact .primary{background:var(--ink);color:var(--paper)}
.detail-hero .primary:hover,.detail-contact .primary:hover{background:#41463b}
.detail-hero figure{margin:0}.detail-hero .photo{height:580px;box-shadow:var(--shadow-photo)}
.detail-hero .photo:after{display:none}.detail-hero .photo img{object-position:50% 62%}
.detail-hero figcaption{font-size:var(--font-caption);color:var(--muted);margin-top:var(--space-3)}
.detail-scope{background:var(--panel);display:block}
.scope-heading{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start;margin-bottom:var(--space-7)}
.detail-scope h2{max-width:none}.scope-note{margin:0;max-width:38ch;color:var(--muted);font-size:var(--font-lead);line-height:var(--leading-body)}
.scope-main{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.scope-photo{margin:0;min-width:0}.scope-photo button{position:relative;display:block;width:100%;padding:0;overflow:hidden;box-shadow:var(--shadow-photo)}
.scope-photo img{display:block;width:100%;height:auto;aspect-ratio:1.35;object-fit:cover;object-position:50% 63%;transition:transform 650ms var(--ease)}
.scope-photo figcaption{margin-top:var(--space-3);font-size:var(--font-caption);color:var(--muted)}
.scope-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-5)}
.scope-list li{padding-top:var(--space-5);border-top:1px solid var(--line)}.scope-list li:first-child{padding-top:0;border-top:0}
.scope-list p{margin-bottom:0;max-width:46ch}
.scope-decisions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);border-top:1px solid var(--line);margin-top:var(--space-7);padding-top:var(--space-6)}
.scope-decisions p{max-width:49ch;margin-bottom:0}
@media(hover:hover) and (pointer:fine){.scope-photo button:hover img{transform:scale(1.035)}}
.scope-photo button:focus-visible img{transform:scale(1.025)}
.faq-intro .benefit-copy{max-width:34ch;margin:var(--space-5) 0}.faq-intro .text-link{font-size:var(--font-label)}
.detail-case{background:var(--ink);color:var(--paper)}
.case-photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--column-gap)}.case-photos figure{margin:0;min-width:0}
.case-photos .project-image{aspect-ratio:1.05;width:100%;box-shadow:var(--shadow-photo)}.case-photos .project-image img{height:100%;width:100%;object-fit:cover}
.case-photos figcaption{padding-top:var(--space-5)}.detail-case .benefit-title{color:var(--paper)}.detail-case .benefit-copy{color:var(--muted-inverse);max-width:48ch;margin-bottom:0}
.detail-case .text-link{margin-top:var(--space-6)}.detail-case :focus-visible{outline-color:var(--paper)}
.detail-faq{background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);cursor:pointer;min-height:72px;padding:var(--space-5) 0;list-style:none;font-size:var(--font-body);font-weight:var(--weight-benefit)}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary svg{width:20px;height:20px;transition:transform 180ms var(--ease)}.faq-list details[open] summary svg{transform:rotate(180deg)}
.faq-list details p{max-width:52ch;color:var(--muted);margin:0 0 var(--space-5)}.faq-list summary:focus-visible{outline:3px solid #235ec3;outline-offset:4px}
.detail-contact .contact-close-bottom{align-items:start}.contact-person{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);color:var(--muted);font-size:var(--font-body)}
.contact-person strong{color:var(--ink);font-weight:var(--weight-benefit)}.contact-person a{text-decoration:underline;text-underline-offset:4px}.detail-contact .contact-close-bottom>div{max-width:46ch}
@media(max-width:1000px){.detail-hero{gap:var(--space-6)}.detail-hero .photo{height:520px}.detail-scope,.detail-faq{gap:var(--space-7)}}
@media(max-width:760px){
 .breadcrumb{padding-top:var(--space-4);padding-bottom:var(--space-5)}
 .detail-hero{grid-template-columns:1fr;gap:var(--space-6);margin-bottom:var(--section-space)}
 .detail-hero .photo{height:auto;aspect-ratio:1.12;margin:0}.detail-hero .photo>img{position:absolute;inset:0}
 .detail-intro>p{max-width:45ch}.detail-actions .primary{width:100%;max-width:390px}
 .detail-scope,.detail-faq{grid-template-columns:1fr;gap:var(--space-6)}
 .detail-scope h2{max-width:18ch}.case-photos{grid-template-columns:1fr;gap:var(--space-7)}
 .detail-contact .contact-close-bottom>div{margin-top:var(--space-5)}
}
@media(prefers-reduced-motion:reduce){.faq-list summary svg{transition:none}}

.detail-case .demo-disclosure{color:var(--muted-inverse);max-width:85ch}
.case-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--column-gap);margin:var(--space-7) 0}
.scope-list .demo-disclosure{margin:var(--space-3) 0 0;padding:0;border:0}
@media(max-width:760px){.case-story{grid-template-columns:1fr;gap:var(--space-5);margin:var(--space-6) 0}}
.detail-contact .primary{background:var(--paper);color:var(--ink)}
.detail-contact .primary:hover{background:var(--panel)}

@media(max-width:1000px){.scope-heading,.scope-main,.scope-decisions{gap:var(--space-6)}}
@media(max-width:760px){.scope-heading,.scope-main,.scope-decisions{grid-template-columns:1fr;gap:var(--space-6)}.scope-heading{margin-bottom:var(--space-6)}.scope-photo img{aspect-ratio:1.2}.scope-decisions{margin-top:var(--space-6);padding-top:var(--space-6)}.scope-note{max-width:43ch}.faq-intro .benefit-copy{max-width:43ch}}
:root[data-motion="reduced"] .scope-photo img{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.scope-photo img{transform:none!important;transition:none!important}}
/* W31 (Philip 11.10.2026, heutiger Titel): am Handy ohne gesetzten Umbruch, sonst stand „Einbau.“ allein in der letzten Zeile. */
@media(max-width:760px){.detail-page #process-title br{display:none}}
/* Möbel nach Maß (Runde 3, Bauteile von /innenausbau): Badmöbel in S04 ganz zeigen statt auf 1,35 zu beschneiden;
   der Fall S06 hat nur ein echtes Foto: am Rechner stehen Auftrag, Planung und Ergebnis rechts daneben, oben bündig, die
   Bildunterschrift unter dem Foto (Vera Hebel 1). Handy unverändert (Titel, Foto, Text, Link aus finish.css). */
/* Runde 3c (Philip 11.10.2026): S04 zeigt den Schrank mit Leiter (Hochformat 3:4). Format 9:10: es fällt nur Boden und etwas Decke weg, Schrank und Leiter mit Fuß bleiben ganz. */
.moebel-page .scope-photo img{aspect-ratio:9/10;object-fit:cover;object-position:50% 15%}
@media(min-width:761px){
 html[data-align-preview="grid"] body.moebel-page .detail-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--space-8);align-items:start}
 html[data-align-preview="grid"] body.moebel-page .detail-case>.section-heading{grid-column:1 / -1;grid-row:1}
 html[data-align-preview="grid"] body.moebel-page .detail-case>.case-photos{grid-column:1;grid-row:2 / span 3;display:block;margin:0}
 html[data-align-preview="grid"] body.moebel-page .detail-case>.case-story{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;row-gap:var(--space-6);margin:0}
 html[data-align-preview="grid"] body.moebel-page .case-story>div{display:block;grid-row:auto}
 html[data-align-preview="grid"] body.moebel-page .case-story .benefit-title{margin-bottom:var(--space-2)}
 html[data-align-preview="grid"] body.moebel-page .detail-case>.text-link{grid-column:2;grid-row:3;justify-self:start}
}
/* Titel „Ein Fenster wird / zum Lieblingsplatz.“ bricht sonst dreizeilig („zum“ allein); wie .business-case. */
.detail-case .section-heading h2{max-width:none}
/* Runde 3b (Mia 11.10.2026): Kopfbild /moebel ist der schwebende Waschtisch (Hochformat); Ausschnitt von Spiegelunterkante bis Unterschrank. */
.moebel-page .detail-hero .photo img{object-position:50% 72%}
/* W43 (Philip 11.10.2026, Lukas’ Alternative): am Handy ohne gesetzten Umbruch, sonst stand „Einrichtung.“ allein in der letzten Zeile. */
@media(max-width:760px){.business-page #process-title br{display:none}}

/* Galerie „Weitere Einblicke“ auf den Leistungsseiten (Philip 12.10.2026): 1:1 die Regeln aus projekte.css (W66), auf
   .detail-page begrenzt, damit /projekte unberührt bleibt. Je Reihe --s (Summe der Seitenverhältnisse) und --g (Fugen). */
.detail-page .portfolio-more .section-heading h2{max-width:none}
.detail-page .portfolio-image{position:relative;display:block;width:100%;padding:0;box-shadow:var(--shadow-photo)}.detail-page .portfolio-image img{display:block;width:100%;height:auto;object-fit:contain}
.detail-page .portfolio-image .image-open{background:var(--paper);color:var(--ink);right:var(--space-4);bottom:var(--space-4)}.detail-page .portfolio-image:hover .image-open{background:var(--ink);color:var(--paper)}
.detail-page .work-gallery{container-type:inline-size;display:grid;row-gap:14px}
.detail-page .work-line{display:flex;gap:14px;height:calc((100cqw - var(--g, 42px)) / var(--s, 3.3574))}
.detail-page .work-line figure{flex:var(--r) 1 0;min-width:0;height:100%;margin:0}
.detail-page .work-tile{width:100%;height:100%;box-shadow:none;overflow:hidden;cursor:zoom-in;background:var(--panel)}
.detail-page .work-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 650ms var(--ease)}
.detail-page .work-tile .image-open{width:36px;height:36px;right:12px;bottom:12px;opacity:0;transition:opacity 160ms var(--ease),background-color var(--feedback),color var(--feedback)}.detail-page .work-tile .image-open svg{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){.detail-page .work-tile:hover img{transform:scale(1.03)}.detail-page .work-tile:hover .image-open{opacity:1}}
.detail-page .work-tile:focus-visible .image-open{opacity:1}
@media(hover:none){.detail-page .work-tile .image-open{opacity:1;width:28px;height:28px;right:8px;bottom:8px;background:rgb(255 255 255 / .85)}.detail-page .work-tile .image-open svg{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){.detail-page .work-tile img{transform:none!important;transition:none!important}.detail-page .work-tile .image-open{transition:none}}
:root[data-motion="reduced"] .detail-page .work-tile img{transform:none!important;transition:none!important}
@supports not (height:1cqw){.detail-page .work-line{height:auto}.detail-page .work-line figure{height:auto}.detail-page .work-tile img{height:auto;aspect-ratio:var(--r)}}
@media(max-width:760px){.detail-page .work-gallery{display:flex;flex-wrap:wrap;gap:10px}.detail-page .work-line{display:contents}.detail-page .work-line figure{flex:0 0 calc((100% - 10px) * var(--m));height:auto}.detail-page .work-line .work-wide{flex-basis:100%}.detail-page .work-tile,.detail-page .work-tile img{height:auto}.detail-page .work-tile img{aspect-ratio:var(--r)}}