/* PB-ENTWURF: separate lokale Route, Mobil und Desktop gemeinsam. */
.branding-draft{--branding-space:clamp(2rem,1.2rem + 2.5vw,3.5rem);--branding-gap:var(--e10-gap);--branding-body:clamp(1rem,.975rem + .12vw,1.125rem);--branding-rule:color-mix(in srgb,var(--d-sage) 35%,white);background:var(--color-paper);font-size:var(--branding-body);line-height:1.5}
.branding-draft .branding-draft__space{padding-block:var(--branding-space)}
.branding-draft__divider{border-top:1px solid var(--branding-rule)}
.branding-draft p{font-size:var(--branding-body);line-height:1.5;margin:0 0 var(--d-s);max-inline-size:none;text-wrap:wrap}
.branding-draft__copy{min-width:0;align-self:center}
.branding-draft .branding-draft__copy>:last-child{margin-bottom:0}
.e10 .branding-draft :is(h1,h2,h3){white-space:normal;hyphens:none;text-wrap:wrap;max-inline-size:none}
.e10 .branding-draft h1{font:400 clamp(2.25rem,1.7rem + 2.3vw,4.5rem)/1.08 var(--font-serif);letter-spacing:-.025em;margin:0 0 var(--d-s)}
.e10 .branding-draft h2{font:600 clamp(1.75rem,1.3rem + 1.2vw,2.75rem)/1.13 var(--font-sans);margin:0 0 var(--d-s)}
.e10 .branding-draft h3{font:600 clamp(1.25rem,1.05rem + .6vw,1.625rem)/1.25 var(--font-sans);margin:0}
.branding-draft .eyebrow{font-size:var(--branding-body);letter-spacing:0;font-weight:500}
.branding-draft .d-button{font-size:var(--branding-body);max-width:100%;white-space:normal}
.branding-draft :is(figure,picture){display:block;min-width:0;margin:0}
.branding-draft picture{overflow:hidden;border-radius:var(--radius-m)}
.branding-draft img{display:block;width:100%;height:auto;object-fit:contain}
.branding-draft__intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--branding-gap)}
.branding-draft__hero,.branding-draft__personality{display:contents}
.branding-draft__hero-copy{grid-row:1}
.branding-draft__chair{grid-row:2}
.branding-draft__intro-divider{grid-row:3;border-top:1px solid var(--branding-rule);margin-block:calc(var(--branding-space) - var(--branding-gap))}
.branding-draft__facade{grid-row:4}
.branding-draft .branding-draft__singer{display:none}
.branding-draft__personality-copy{grid-row:5}
.e10 .branding-draft__personality-copy h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(2rem,1.6rem + 1.4vw,3.5rem)}
.branding-draft__hero-copy .d-button{margin-top:var(--d-xs)}
.branding-draft__row,.branding-draft__pair{display:grid;gap:var(--branding-gap);align-items:center}
.branding-draft .branding-draft__world-copy{max-inline-size:none;margin-bottom:var(--branding-gap)}
.branding-draft__light,.branding-draft__cta{background:var(--d-sage)}
.e10 .branding-draft .branding-draft__emphasis{font:400 clamp(1.75rem,1.3rem + 1.2vw,2.75rem)/1.15 var(--font-serif);margin-top:var(--d-m)}
.branding-draft .branding-draft__advice{margin-top:var(--d-s)}
.branding-draft__footnote{margin-top:var(--d-s)}
.branding-draft .branding-draft__footnote p{margin:0}
.branding-draft__project-grid{display:grid;gap:var(--branding-gap)}
.branding-draft__project{display:grid;grid-template-rows:1fr auto auto;gap:var(--d-s);min-width:0}
.branding-draft__project picture{aspect-ratio:3/2;align-self:start}
.branding-draft__project img{height:100%;object-fit:contain}
.branding-draft__project .d-button{justify-self:start;align-self:end}
.branding-draft__cta{text-align:center}
.branding-draft__cta .shell{display:grid;justify-items:center;gap:var(--d-s)}
.e10 .branding-draft__cta h2{font:650 clamp(2rem,1.1rem + 3vw,4rem)/1.12 var(--font-sans);letter-spacing:-.05em;margin:0}
.branding-draft :is(a,summary):focus-visible{outline:2px solid var(--d-ink);outline-offset:4px}
@media(max-width:63.999rem){.branding-draft .branding-draft__intro{padding-top:clamp(1rem,.6rem + 1vw,2rem)}}
@media(min-width:48rem){
 .branding-draft__pair{grid-template-columns:minmax(0,4fr) minmax(0,9fr);align-items:stretch}
 .branding-draft__pair :is(picture,img){height:100%}
 .branding-draft__project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:64rem){
 .branding-draft__intro{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 .branding-draft__hero-copy{grid-column:1;grid-row:1}
 .branding-draft__facade{grid-column:2;grid-row:1}
 .branding-draft__intro-divider{grid-column:1/-1;grid-row:2}
 .branding-draft__chair{grid-column:1;grid-row:3}
 .branding-draft__personality-copy{grid-column:2;grid-row:3}
 .branding-draft__intro> :is(header,section)>figure{position:relative;min-height:0}
 .branding-draft__intro> :is(header,section)>figure picture{position:absolute;inset:0}
 .branding-draft__intro> :is(header,section)>figure img{height:100%;object-fit:cover}
 /* PB-HERO: vollständiges 3:2-Motiv; die Bildhöhe bestimmt die Herozeile mit. */
 .branding-draft .branding-draft__facade{position:static;align-self:center}
 .branding-draft .branding-draft__facade picture{position:static;inset:auto}
 .branding-draft .branding-draft__facade img{height:auto;object-fit:contain;object-position:center top}
 .branding-draft__row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 .branding-draft__row>figure{position:relative;min-height:0}
 .branding-draft__row>figure picture{position:absolute;inset:0}
 .branding-draft__row>figure img{height:100%;object-fit:cover}
 /* Sessel, Säulengang und Lichtmotiv vollständig: natürliche Bildhöhe statt Textrahmen. */
 .branding-draft :is(.branding-draft__chair,.branding-draft__brand>figure,.branding-draft__light figure){position:static;align-self:center}
 .branding-draft :is(.branding-draft__chair,.branding-draft__brand>figure,.branding-draft__light figure) picture{position:static;inset:auto}
 .branding-draft :is(.branding-draft__chair,.branding-draft__brand>figure,.branding-draft__light figure) img{height:auto;object-fit:contain}
 .branding-draft__project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* PB-MOBIL: Sessel vor Einstiegstext, danach Sänger im Hochformat. */
@media(max-width:47.999rem){
 .branding-draft__chair{grid-row:1}
 .branding-draft__hero-copy{grid-row:2}
 .branding-draft .branding-draft__facade{display:none}
 .branding-draft .branding-draft__singer{display:block;grid-row:4}
}