/* KO-LAYOUT: Kontaktseite und separate mobile Entwurfsroute. */
.content-page .contact-page{background:var(--color-paper);--page-field-height:2.75rem;--page-textarea-height:7rem}
.content-page .contact-page .form-intro{max-inline-size:none;padding-block:clamp(1.5rem,1rem + 2vw,3rem) clamp(1.5rem,1rem + 1vw,2rem)}
.content-page .contact-page .eyebrow{margin-bottom:.5rem;letter-spacing:0;font-size:var(--d-label)}
.content-page .contact-page .form-intro h1{font-family:var(--font-serif);font-size:clamp(2.5rem,1.3rem + 3.5vw,4.8rem);hyphens:none;text-wrap:wrap;margin-bottom:var(--d-s)}
.contact-intro-copy{max-inline-size:none;text-align:left}
.contact-intro-copy p{max-inline-size:none;text-wrap:wrap;hyphens:none}
.contact-intro-copy p:last-child{margin-bottom:0}
.content-page .contact-page .form-layout{--contact-layout-gap:clamp(1.5rem,1rem + 1.5vw,3rem);gap:var(--contact-layout-gap);align-items:start;padding-bottom:0}
.contact-page #anfrage{min-width:0}
.contact-page .contact-status:not(:has(*)){display:none}
.contact-page .contact-status .form-message:last-child{margin-bottom:1rem}
.contact-form-body,.contact-form-actions{display:grid;gap:1rem;min-width:0}
.content-page .contact-page .contact-form,.content-page .contact-page .form-fields{gap:1rem}
.content-page .contact-page .contact-form-heading h2,.content-page .contact-page .contact-details h2,.content-page .contact-page .contact-next h2{font:600 clamp(1.75rem,1.4rem + .7vw,2.125rem)/1.2 var(--font-sans);margin:0 0 .5rem;hyphens:none}
.contact-form-heading p{font-size:var(--d-label);margin:0}
.content-page .contact-page .field{gap:.375rem}
.content-page .contact-page .field :is(input,select,textarea){background:transparent;border-radius:var(--radius-s);padding:.5rem .75rem}
.contact-page textarea::placeholder{color:var(--page-muted);opacity:1}
.content-page .contact-page .field-hint{font-size:var(--d-label);margin:0;max-inline-size:none}
.contact-page .field-hint a,.contact-page .contact-details .d-textlink{text-decoration:underline;text-underline-offset:.2em}
/* Beide Kontakt-CTAs verwenden dieselben Schriftwerte, auch im gesperrten Entwurf. */
.content-page:has(.contact-page) :is(.d-header .d-button,.contact-form .d-button){font-family:var(--font-sans);font-size:var(--d-label);font-weight:500;line-height:1.5;color:var(--d-ink)}
.content-page .contact-page .contact-form .d-button{padding:.75rem 2rem;opacity:1}
.content-page .contact-page .contact-details{background:var(--d-sage);border:0;border-radius:var(--radius-m);padding:clamp(1.25rem,1rem + .6vw,2rem);min-width:0}
.content-page .contact-page .contact-details h2{margin-bottom:1.5rem}
.contact-person{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(.75rem,.4rem + .8vw,1.5rem);align-items:start}
.contact-person-photo{display:block;overflow:hidden;border-radius:var(--radius-s);aspect-ratio:3/5}
.contact-person-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.contact-person-copy{min-width:0}
.contact-page .contact-person h3{font:600 clamp(1.25rem,1.1rem + .3vw,1.625rem)/1.25 var(--font-sans);margin:0 0 .375rem;hyphens:none}
.contact-person-copy p{margin-bottom:1rem}
.contact-direct-links{display:grid;gap:.5rem}
.contact-direct-links a{display:flex;align-items:center;gap:.625rem;min-width:0;font-size:var(--d-label)}
.contact-direct-links svg{width:1.5rem;height:1.5rem;flex-shrink:0}
.contact-direct-links span{min-width:0}
/* KO-WHATSAPP: Kontaktfarbe hat Vorrang vor der allgemeinen CTA-Farbe. */
.e10.e9.e8 .contact-page .contact-details .d-whatsapp{background:var(--d-ink);color:var(--d-paper);padding:.625rem 1rem;max-width:100%}
.e10.e9.e8 .contact-page .contact-details .d-whatsapp:hover{background:var(--d-paper);color:var(--d-ink)}
.content-page .contact-page .contact-details address{font-size:var(--d-label);margin:0 0 1.5rem}
.contact-page .contact-address{padding-inline-start:2.125rem}
.contact-page .contact-details>p:last-child{margin:1.5rem 0 0}
.contact-next{grid-column:1/-1;margin-inline:calc(-1 * var(--e10-gutter));background:var(--d-sage);padding-block:clamp(1.5rem,1rem + 1vw,2rem)}
.contact-next-inner{display:grid;gap:1.5rem;align-items:center}
.contact-steps{display:grid;gap:1.5rem;margin:0;padding:0;list-style:none}
.contact-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:1rem}
.contact-step-check{display:grid;place-items:center;width:3.25rem;height:3.25rem;background:var(--d-paper);color:var(--d-sage);border-radius:50%}
.contact-step-check svg{width:1.5rem;height:1.5rem}
.contact-page .contact-steps h3{font:600 clamp(1.0625rem,1rem + .15vw,1.1875rem)/1.4 var(--font-sans);margin:0 0 .25rem;hyphens:none}
.contact-steps p{font-size:var(--d-label);margin:0}
@media(min-width:64rem){
 .content-page .contact-page .form-intro h1{white-space:nowrap;text-wrap:nowrap}
 /* Überschrift und Felder teilen eigene Zeilen; der Kasten beginnt erst am Eingabefeld. */
 .content-page .contact-page .form-layout{--contact-label-line-height:1.65;grid-template-columns:minmax(0,2fr) minmax(18rem,1fr);grid-template-rows:auto auto auto auto auto;column-gap:var(--contact-layout-gap);row-gap:1rem}
 .contact-page #anfrage{display:grid;grid-column:1;grid-row:1/5;grid-template-rows:subgrid}
 .contact-page .contact-status{grid-row:1}
 .contact-page .contact-status .form-message:last-child{margin-bottom:0}
 .content-page .contact-page .contact-form{grid-row:2/5;grid-template-rows:subgrid}
 .contact-page .contact-form-body{grid-row:1/3;grid-template-rows:subgrid}
 .content-page .contact-page .form-fields{grid-template-rows:repeat(4,max-content) minmax(min-content,1fr)}
 .content-page .contact-page .field label{line-height:var(--contact-label-line-height)}
 .contact-page .field:has(textarea){grid-template-rows:auto minmax(var(--page-textarea-height),1fr)}
 .contact-page .field textarea{height:100%}
 .contact-page .contact-form-actions{grid-row:3}
 .contact-page .contact-result{grid-row:2/4}
 .content-page .contact-page .contact-details{grid-column:2;grid-row:3;align-self:stretch;margin-block-start:calc(var(--d-label) * var(--contact-label-line-height) + .375rem);text-align:left}
 .contact-page .contact-next{grid-row:5;margin-top:calc(var(--contact-layout-gap) - 1rem)}
 .contact-next-inner{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:2rem}
 .contact-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
 .contact-steps li{padding-inline:clamp(.75rem,.3rem + 1vw,1.5rem);gap:.75rem}
 .contact-steps li:first-child{padding-left:0}
 .contact-steps li+li{border-left:1px solid var(--color-paper)}
 .contact-steps li:last-child{padding-right:0}
}

@media(max-width:63.999rem){
 .contact-page .form-layout>#anfrage{order:0}
 .contact-page .form-layout>.contact-details{order:1}
 .contact-page .form-layout>.contact-next{order:2}
}
@media(max-width:47.999rem){
 /* Name und Begrüßung über beiden Spalten; Foto bündig zu E-Mail und WhatsApp. */
 .contact-page .contact-person{grid-template-rows:repeat(5,auto);row-gap:0}
 .contact-page .contact-person-copy{display:contents}
 .contact-page .contact-person-copy>h3{grid-column:1/-1;grid-row:1}
 .contact-page .contact-person-copy>p:not(.contact-direct-links){grid-column:1/-1;grid-row:2}
 .contact-page .contact-person-photo{grid-column:1;grid-row:3/6;align-self:stretch;position:relative;aspect-ratio:auto;min-height:0}
 .contact-page .contact-person-photo img{position:absolute;inset:0}
 .contact-page .contact-direct-links{grid-column:2;grid-row:3}
 .contact-page .contact-address{grid-column:2;grid-row:4}
 .contact-page .contact-person-copy>.d-whatsapp{grid-column:2;grid-row:5;justify-self:start}
 .contact-page--mobile-order .form-layout>.contact-next{order:1}
 .contact-page--mobile-order .form-layout>.contact-details{order:2}
 .content-page .contact-page--mobile-order .form-layout{padding-bottom:var(--contact-layout-gap)}
}