/* Approved shape and alignment roles across all 13 pages. Comparison can opt out. */
html[data-shape-preview="soft"]{--radius-control:6px;--radius-small:8px;--radius-image:12px}
html[data-shape-preview="soft"] :is(.primary,.request,.gallery-controls button,.gallery-close,.menu-toggle){border-radius:var(--radius-control)}
html[data-shape-preview="soft"] :is(.view-photo,.image-open,.footer-social a){border-radius:var(--radius-small)}
html[data-shape-preview="soft"] :is(.photo,.project-image,.service-visual,.company-photo button,.portfolio-image){border-radius:var(--radius-image);overflow:hidden}
html[data-shape-preview="soft"] .gallery{border-radius:var(--radius-image)}
/* Natural image ratios define column widths: equal heights, no added cropping. */
@media(min-width:761px){
 html[data-align-preview="grid"] .project-grid{grid-template-columns:1.0048828125fr 1.0625fr;column-gap:var(--column-gap);row-gap:0;align-items:stretch}
 html[data-align-preview="grid"] .project-grid>.project{margin-top:0;display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0}
 html[data-align-preview="grid"] .project-grid .project-image{align-self:start}
 html[data-align-preview="grid"] .project-grid .project-copy{display:grid;grid-template-rows:subgrid;grid-row:span 3}
 html[data-align-preview="grid"] .project-grid .project-copy :is(h3,p,.text-link){align-self:start}
 html[data-align-preview="grid"] .project-grid .project-copy .text-link{justify-self:start}
 html[data-align-preview="grid"] .case-sitzfenster .portfolio-photos{grid-template-columns:1.0048828125fr 1.3333333333fr;align-items:start}
}

/* Rounded imagery needs visible space from adjacent full-width sections. */
html[data-shape-preview="soft"] .company{padding:var(--space-7) var(--gutter);gap:var(--column-gap)}
html[data-shape-preview="soft"] .company-story{padding:var(--space-5) 0}
html[data-shape-preview="soft"] .company-photo figcaption{padding:var(--space-3) 0 0}
@media(max-width:760px){
 html[data-shape-preview="soft"] .company{padding:var(--space-6) var(--gutter) var(--section-space);gap:var(--space-6)}
 html[data-shape-preview="soft"] .company-story{padding:0}
}

/* Shared corners: image containers clip zoomed images, focus remains outside. */
html[data-shape-preview="soft"] :is(.offering-image,.business-image,.workshop-image,.scope-photo button){border-radius:var(--radius-image);overflow:hidden}
html[data-shape-preview="soft"] :is(.team-portraits img,.applicant-contact img){border-radius:var(--radius-image)}
html[data-shape-preview="soft"] .contact-details{border-radius:var(--radius-image);overflow:hidden}
html[data-shape-preview="soft"] .form-feedback{border-radius:var(--radius-small)}
/* The contact photo belongs to its panel; its internal seam stays straight. */
html[data-shape-preview="soft"] :is(.submit-request,.field input,.field select,.field textarea){border-radius:var(--radius-control)}
@media(min-width:761px){
 html[data-align-preview="grid"] .service-list{row-gap:0}
 html[data-align-preview="grid"] .service-row{display:grid;grid-template-rows:subgrid;grid-row:span 5}
 html[data-align-preview="grid"] .service-row .text-link{align-self:end;justify-self:start}
 html[data-align-preview="grid"] .case-photos,
 html[data-align-preview="grid"] .case-dachschraege .portfolio-photos{grid-template-columns:1.0625fr 1fr;align-items:start}
 html[data-align-preview="grid"] .case-photos .project-image{aspect-ratio:auto}
 html[data-align-preview="grid"] .case-photos .project-image img{height:auto;object-fit:contain}
 html[data-align-preview="grid"] .business-case-images,
 html[data-align-preview="grid"] .case-buero .portfolio-photos{grid-template-columns:1.3913043478fr .6628003314fr;align-items:start}
 /* Equal semantic rows keep parallel explanations readable even when headings wrap. */
 html[data-align-preview="grid"] :is(.portfolio-story,.case-story,.history-list,.career-facts){row-gap:var(--space-6)}
 html[data-align-preview="grid"] :is(.portfolio-story,.case-story)>div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
 html[data-align-preview="grid"] :is(.portfolio-story,.case-story){row-gap:var(--space-2)}
 html[data-align-preview="grid"] :is(.portfolio-story,.case-story) .benefit-title{margin-bottom:0}
 html[data-align-preview="grid"] .career-conditions>.career-facts>div,
 html[data-align-preview="grid"] .job-conditions .career-facts>div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
 html[data-align-preview="grid"] .career-conditions>.career-facts,
 html[data-align-preview="grid"] .job-conditions .career-facts{row-gap:var(--space-3)}
 html[data-align-preview="grid"] .career-facts dt{margin-bottom:0}
}

/* Preserve the whole reference photographs on phones as well. */
html[data-align-preview="grid"] .case-photos .project-image{aspect-ratio:auto}
html[data-align-preview="grid"] .case-photos .project-image img{height:auto;object-fit:contain}
/* R6 (Mia 11.10.2026): Schluss-Sektionen wie W7. Knopf auf der Spaltenkante der Sektion darüber, mittig zum Titel; ersetzt den W7-Block in neu.css. */
/* Feinschliff A1 (Vera 11.10.2026): ein Spaltenraster für alle zweispaltigen Sektionen, 1fr 1fr mit 64 px. Der Schlussknopf
   sitzt damit auf allen Seiten auf derselben Kante (bei 1280: x 672) wie die rechte Spalte der Sektionen darüber.
   Ersetzt die seitenweisen Werte (1.2fr, .75fr, .469fr) aus R6 und Vera Hebel 1. */
.cta-close{--close-right:1fr;--close-col:var(--space-8);--close-row:44px}
.workshop-close,.portfolio-contact{--close-row:var(--space-5)}
@media(min-width:761px){
 html[data-align-preview="grid"] .cta-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--close-right));grid-template-areas:"title action" "text person";column-gap:var(--close-col);row-gap:var(--close-row);align-items:start}
 html[data-align-preview="grid"] .cta-close>div,html[data-align-preview="grid"] .cta-close .contact-close-bottom>div{display:contents}
 html[data-align-preview="grid"] .cta-close h2{grid-area:title;align-self:center;max-width:none;margin:0}
 html[data-align-preview="grid"] .cta-close .contact-close-bottom>p,html[data-align-preview="grid"] .cta-close>div:first-child>p{grid-area:text;margin:0}
 html[data-align-preview="grid"] .cta-close .primary{grid-area:action;align-self:center;justify-self:start}
 html[data-align-preview="grid"] .cta-close :is(.contact-person,.career-link){grid-area:person;margin:0}
}
/* B7 (Vera 11.10.2026): zwischen 761 und 1000 px einspaltig wie am Handy, sonst bricht der Titel in drei Zeilen. */
@media(min-width:761px) and (max-width:1000px){
 html[data-align-preview="grid"] .cta-close{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "text" "action" "person";row-gap:var(--space-5)}
 html[data-align-preview="grid"] .cta-close h2{align-self:start}
}
/* Vera Hebel 7: kein einzelnes Wort in der letzten Zeile einer Bildunterschrift. */
figcaption{text-wrap:pretty}
/* Mobil-Reihenfolge (Philip 11.10.2026): In jeder Sektion mit Bild und Text erst die Überschrift, dann das Bild, dann die
   zugehörigen Texte (Vorbild /gewerbe S04, Startseite S01). Nur unter 761 px, Rechner unverändert. Markup bleibt, damit
   Screenreader weiter Überschrift und Text vor dem Vergrößern-Knopf lesen; die Wrapper werden mit display:contents
   aufgelöst und per order sortiert. Flex statt Grid-Lücke, damit die Abstände der Wrapper erhalten bleiben. */
@media(max-width:760px){
 /* Startseite S05: je Karte Titel, Bild, Text (wie S03 Leistungen) */
 .projects .project{display:flex;flex-direction:column;align-items:stretch}
 .projects .project-copy{display:contents}
 .projects .project-copy h3{order:-1;margin:0 0 18px}
 .projects .project-copy p{margin-top:var(--space-5)}
 .projects .project-copy .text-link{align-self:flex-start}
 /* Startseite S08 */
 .company,html[data-shape-preview="soft"] .company{gap:0}
 .company-story{display:contents}
 .company-story h2{order:-2}
 .company-photo{order:-1;margin-bottom:var(--space-6)}
 .company-story .text-link{align-self:flex-start}
 .company-story>p:not(.company-lead):has(+.company-details){margin-bottom:0}
 /* /leistungen S03: je Leistung Name, Bild, Text */
 .offering{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .offering-copy{display:contents}
 .offering-copy>h2{order:-2}
 .offering-figure{order:-1;margin-bottom:var(--space-5)}
 /* Kopf /innenausbau, /gewerbe, /betrieb, /karriere: Titel, Bild, Text, Knopf (wie Startseite S01) */
 :is(.detail-hero,.business-hero,.workshop-hero){display:flex;flex-direction:column;align-items:stretch;gap:0}
 :is(.detail-hero,.business-hero,.workshop-hero)>:is(.detail-intro,.workshop-intro){display:contents}
 :is(.detail-hero,.business-hero,.workshop-hero) h1{order:-2}
 :is(.detail-hero,.business-hero,.workshop-hero)>figure{order:-1;margin-bottom:var(--space-6)}
 .career-hero{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-5)}
 .career-hero>.workshop-intro{display:contents}
 .career-hero h1{order:-2}
 .career-hero>figure{order:-1;margin:0}
 .career-hero .workshop-intro .hero-location{margin:0}
 /* Fallbeispiel /innenausbau S06 (W29) und /gewerbe S06 (W38): Titel, Bilder, Text, Link (wie /projekte S06) */
 :is(.detail-case,.business-case){display:flex;flex-direction:column;align-items:stretch}
 :is(.detail-case,.business-case)>.section-heading{order:-2;margin-bottom:var(--space-6)}
 :is(.detail-case,.business-case)>:is(.case-photos,.business-case-images){order:-1;margin:0}
 :is(.detail-case,.business-case)>.case-story{margin:var(--space-7) 0 0}
 :is(.detail-case,.business-case)>.text-link{align-self:flex-start}
}
/* W67 (Philip 11.10.2026, Runde 3c): Stimmenband zwischen Fragen und Schluss auf /innenausbau, /gewerbe, /moebel als ein
   ruhiger Block, mittig, ohne Links-rechts-Aufteilung. Oben nur bei der echten Plattformbewertung (J. Kahl) fünf Sterne mit
   „5 von 5 Sternen“ klein darunter, bei Steinbach und Kramer kein Zeichen. Dann das Zitat (Zeile höchstens rund 60 Zeichen),
   Name, Rolle und Ort, darunter eine Pflichtzeile nach § 5b Abs. 3 UWG in Fließtextgröße, gedämpft (Judith: keine Fußnote),
   bei Kahl mit dem Link auf die Plattform.
   Keine Bewegung. Ersetzt die Fassung aus Runde 3b (Mia, Variante A). */
.voice-band{display:flex;flex-direction:column;align-items:center;padding:var(--space-7) var(--gutter);background:var(--panel);text-align:center}
.voice-rating{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4)}
.voice-rating svg{width:136px;height:24px;flex:none;fill:var(--ink)}
.voice-rating-text{font-size:var(--font-caption);line-height:1.4;color:var(--muted)}
.voice{margin:0;max-width:640px}
.voice blockquote{margin:0}
.voice blockquote p{margin:0;font-size:24px;font-weight:500;line-height:1.35;letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
.voice-long{max-width:590px}
.voice-long blockquote p{font-size:22px;line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}
.voice figcaption{margin-top:var(--space-3);font-size:var(--font-label);line-height:1.5;color:var(--muted)}
.voice figcaption strong{font-weight:var(--weight-benefit);color:var(--ink)}
.voice-hint{margin:var(--space-3) auto 0;text-align:center;font-size:15px;color:var(--muted)}
.voice-hint a,.voice figcaption a{color:inherit;text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:10px 0;margin:-10px 0}
.voice-note{max-width:44em;margin:0 auto;font-size:var(--font-body);line-height:var(--leading-body);color:var(--muted);text-wrap:balance}
.voice-note a{display:inline-block;padding:10px 0;margin:-10px 0;text-decoration:underline;text-underline-offset:4px}
.voice-note a:hover{text-decoration-thickness:2px}
@media(max-width:760px){.voice-band{padding:var(--space-6) var(--gutter)}.voice blockquote p{font-size:21px}.voice-long blockquote p{font-size:19px}}

/* ---- Feinschliff vor Übergabe (Vera 11.10.2026, Teil A und B) ---- */
/* A6: kein einzelnes Wort in der letzten Zeile im Fließtext, in Fragen und Listen. Die H2 haben schon balance. */
main :is(p,dd,dt,li,figcaption,summary,h3,h4),footer a{text-wrap:pretty}
/* A1: Raster der rechten Spalte bei 1280 auf x 672 (1fr 1fr, 64 px) */
@media(min-width:761px){
 html[data-shape-preview="soft"] .company{column-gap:var(--space-8)}
}