/* Contact composition inherits all core roles from system.css. */
.contact-intro{padding:var(--space-5) var(--gutter) var(--space-7);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end;gap:var(--space-8)}
.contact-intro h1{font-size:var(--font-page);font-weight:var(--weight-display);line-height:1.06;letter-spacing:var(--tracking-heading);margin:0;text-wrap:balance}
.contact-intro>p{font-size:var(--font-lead);color:var(--muted);max-width:38ch;margin:0 0 var(--space-1)}
.contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-8);margin:0 var(--gutter);padding-bottom:var(--section-space);align-items:start}
.contact-details{background:var(--ink);color:var(--paper);min-width:0}
.contact-details-copy{padding:var(--space-7)}
.contact-layout h2{font-size:var(--font-heading);line-height:1.2;letter-spacing:-.025em;font-weight:var(--weight-heading);margin:0 0 var(--space-5)}
.contact-phone{display:block;font-size:var(--font-section);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);line-height:1.2;min-height:44px;white-space:nowrap;margin-bottom:var(--space-2)}
.contact-email{display:flex;align-items:center;min-height:44px;font-size:var(--font-body);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
.contact-details :focus-visible{outline-color:var(--paper)}
.contact-address{margin:var(--space-6) 0}
.contact-details .benefit-title{color:var(--paper)}
.contact-details address,.contact-details p{font-style:normal;color:var(--muted-inverse);line-height:var(--leading-body);margin:0}
.contact-details .text-link{margin-top:var(--space-3);min-height:44px;font-size:var(--font-label)}
.contact-photo{margin:0;position:relative;overflow:hidden}
.contact-photo img{display:block;width:100%;height:auto;object-fit:contain;transition:transform 700ms var(--ease)}
.contact-photo figcaption{padding:var(--space-4) var(--space-7);font-size:var(--font-caption);color:var(--muted-inverse)}
.inquiry{min-width:0;padding-top:var(--space-2);scroll-margin-top:var(--space-5)}
.inquiry h2{margin-bottom:var(--space-3)}
.form-intro{color:var(--muted);max-width:52ch;margin:0 0 var(--space-5)}
.required-note,.field-hint,.privacy-note{font-size:var(--font-caption);color:var(--muted);line-height:1.5}
.required-note{margin:0 0 var(--space-5)}
.form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.field{min-width:0}.field-wide{grid-column:1/-1}
.field label{display:block;font-size:var(--font-label);font-weight:var(--weight-benefit);margin-bottom:var(--space-2)}
.field label span{font-size:var(--font-caption);font-weight:var(--weight-body);color:var(--muted)}
.field :is(input,select,textarea){display:block;width:100%;min-width:0;min-height:var(--control-height);border:1px solid var(--field-border);border-radius:var(--radius-control);background-color:var(--paper);color:var(--ink);font:inherit;caret-color:var(--ink);padding:var(--space-3) var(--space-4);transition:border-color 150ms,background-color 150ms;box-shadow:none}
.field :is(input,select,textarea):hover{border-color:var(--ink)}
.field :is(input,select,textarea):focus{outline:2px solid var(--focus);outline-offset:3px;background-color:var(--paper)}
.field textarea{resize:vertical;min-height:144px}
.field-hint{margin:var(--space-2) 0 0}.form-fields>.field-hint{margin-top:calc(-1 * var(--space-4))}
.privacy-note{margin:var(--space-5) 0}
.inquiry a:not(.text-link){text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.submit-request{background:var(--ink);color:var(--paper);min-width:220px;justify-content:space-between}
.submit-request:hover{background:#41463b}.submit-request:disabled{cursor:wait;opacity:.65}
.form-feedback{background:var(--paper);padding:var(--space-5);margin:0 0 var(--space-5);outline-offset:-2px}
.form-feedback h3{font-size:var(--font-body);font-weight:var(--weight-benefit);margin:0 0 var(--space-2)}
.form-feedback ul{padding-left:var(--space-5);margin:0}.form-feedback li{padding:var(--space-1) 0}.form-feedback p{margin:0;color:var(--muted)}
#send-error{margin:var(--space-5) 0 0}
.field-error{font-size:var(--font-caption);color:var(--error);margin:var(--space-2) 0 0}
.field [aria-invalid="true"]{border-color:var(--error)}
.form-success{padding:var(--space-7) 0;max-width:48ch}.form-success h2{font-size:var(--font-section);margin:var(--space-5) 0}.form-success p{color:var(--muted);margin:0 0 var(--space-5)}
.success-icon{width:48px;height:48px;stroke-width:2}.form-success .text-link{margin-top:var(--space-3)}
@media(max-width:1100px){.contact-layout{gap:var(--space-6)}.contact-details-copy{padding:var(--space-6)}.contact-photo figcaption{padding:var(--space-4) var(--space-6)}.contact-phone{font-size:var(--font-section)}}
/* F5 (Vera 11.10.2026): Tablet einspaltig, Kontaktkarte oben, Formular darunter mit zweispaltigem Feldraster. */
@media(max-width:900px) and (min-width:761px){.contact-layout{grid-template-columns:1fr;gap:var(--space-7)}.contact-photo{display:none}.contact-details-copy{padding:var(--space-6)}.form-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.field-wide{grid-column:1/-1}.contact-method-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.contact-intro{grid-template-columns:1fr;gap:var(--space-5);padding-top:var(--space-3);padding-bottom:var(--space-6)}.contact-layout{grid-template-columns:1fr;gap:var(--space-7)}.contact-details-copy{padding:var(--space-6) var(--space-5)}.contact-photo{display:none}.contact-address{margin:var(--space-5) 0}.contact-phone{font-size:var(--font-section)}.inquiry{padding:0}.form-fields{grid-template-columns:1fr;gap:var(--space-5)}.field-wide{grid-column:auto}.submit-request{width:100%}.form-success{padding:0}.contact-intro>p{max-width:42ch}}
@media(max-width:380px){.contact-details-copy{padding:var(--space-5) var(--space-4)}.contact-phone{font-size:var(--font-section)}.contact-email{font-size:var(--font-caption)}}
@media(prefers-reduced-motion:reduce){.contact-photo img,.field :is(input,select,textarea){transition:none}}

/* Contact surface hierarchy: navigation / working area / closing information. */
.contact-page #main{background:var(--panel);display:flow-root}
.contact-page .header{background:var(--paper)}
.contact-page .site-footer{background:var(--ink);color:var(--paper)}
.contact-page .footer-main address,.contact-page .footer-meta{color:var(--muted-inverse)}
.contact-page .footer-meta{border-color:var(--muted)}
.contact-page .site-footer :focus-visible{outline-color:var(--paper)}
.contact-method{border:0;padding:0;margin:0;min-width:0}
.contact-method legend{padding:0;font-size:var(--font-label);font-weight:var(--weight-benefit)}
.contact-method>.field-hint{margin:var(--space-2) 0 var(--space-4)}
.contact-method-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.contact-method .field label{font-weight:var(--weight-body)}
.contact-details .contact-form-jump{display:none}
@media(max-width:1100px){.contact-intro{gap:var(--space-6)}}
@media(min-width:761px) and (max-width:900px){.contact-intro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-5)}.contact-layout{grid-template-columns:1fr;gap:var(--space-7)}.contact-photo{display:none}.contact-details-copy{padding:var(--space-6)}.form-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.field-wide{grid-column:1/-1}.contact-method-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.contact-intro{grid-template-columns:1fr;gap:var(--space-5)}.contact-method-fields{grid-template-columns:1fr}.contact-details .contact-form-jump{display:inline-flex;margin-top:var(--space-4)}.contact-address{margin:var(--space-4) 0}.contact-details-copy{padding:var(--space-5)}.contact-layout{padding-bottom:var(--space-8)}}

.project-context{padding:var(--space-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--space-5)}.project-context p{margin:0;font-size:var(--font-label);color:var(--muted)}.project-context strong{display:block;color:var(--ink);font-weight:var(--weight-benefit)}.project-context button{padding:0;min-height:var(--target-min);font-size:var(--font-caption);text-decoration:underline;text-underline-offset:4px}
/* W63 (Mia 11.10.2026): Kopf ohne Einleitungssatz, Titel über beiden Spalten. */
.contact-intro{grid-template-columns:1fr}
/* Feinschliff vor Übergabe (Vera 11.10.2026, Teil B) */
/* F2: eigener Auswahlpfeil, 16 px vom rechten Rand wie der Text vom linken, Winkel wie im Menü; feste Höhe wie die Textfelder. */
.field select{appearance:none;-webkit-appearance:none;height:var(--control-height);padding-right:48px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320221e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px 20px}
/* F4: Karte und Formular enden am Rechner auf einer Unterkante. */
@media(min-width:901px){.contact-photo img{aspect-ratio:3/2;object-fit:cover;object-position:50% 60%}.contact-page .field textarea{min-height:208px}}
/* F8: Fehlen Telefon und E-Mail, steht derselbe Hinweis nur einmal (unter Telefon). Beide Felder bleiben als fehlerhaft markiert.
   Erkennung ohne Skriptänderung: beide Hinweise sichtbar und die E-Mail ist gültig (leer) heißt, es ist der gemeinsame Hinweis. */
.contact-method-fields:has(#app-phone-error:not([hidden])):has(#app-email:valid) #app-email-error{display:none}
/* F8 am Handy: Telefon und E-Mail stehen untereinander, der gemeinsame Hinweis steht dann unter der Gruppe (unter E-Mail). */
@media(max-width:760px){.contact-method-fields:has(#app-phone-error:not([hidden])):has(#app-email:valid) #app-email-error{display:block}.contact-method-fields:has(#app-phone-error:not([hidden])):has(#app-email:valid):has(#app-email-error:not([hidden])) #app-phone-error{display:none}}