.contact-main { padding: 140px 0 90px; }
.contact-head h1 { color: #141414; font-family: 'Newsreader', Georgia, serif; font-weight: 450; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.012em; margin: 16px 0 24px; }
.contact-head { max-width: 46rem; margin: 0 auto 44px; text-align: center; }
.contact-head .lead { margin: 0 auto; }
.contact-email, .contact-note a { color: var(--signup-primary); text-decoration: underline; text-underline-offset: 4px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 32px; background: #fff; border: 1px solid var(--signup-border); border-radius: 24px; }
.contact-wide { grid-column: 1 / -1; }
.contact-field { min-width: 0; }
.contact-field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: .9rem; }
.contact-field input, .contact-field textarea { box-sizing: border-box; width: 100%; border: 1px solid #9faf9f; border-radius: 8px; padding: 12px; font: inherit; line-height: 1.5; color: var(--signup-text); background: #fff; }
.contact-field textarea { resize: vertical; min-height: 220px; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; }
.contact-note, .contact-status { font-size: .85rem; color: var(--signup-muted); line-height: 1.6; }
.contact-status { margin-top: 14px; }
.contact-form button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) { .contact-main { padding-top: 110px; } }
@media (max-width: 540px) { .contact-form { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 18px; } }

.contact-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; line-height: 1.6; }
.contact-consent input { flex: 0 0 auto; margin-top: 5px; accent-color: var(--signup-primary); }
.contact-consent a { color: var(--signup-primary); text-decoration: underline; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#contact-turnstile { margin-top: 16px; min-height: 65px; }

/* Seit 2026-10-21: Kontaktseite zweispaltig, links Einleitung und Mailadresse, rechts das
   Formular. Die drei Themenkarten darüber sind entfallen. */
.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-layout .contact-head { max-width: none; margin: 0; text-align: left; }
.contact-layout .contact-head .lead { margin: 0; }
.contact-layout .contact-embed { margin-top: 0; }
.contact-layout .contact-form, .contact-layout .contact-success { max-width: none; margin: 0; }
.contact-form { max-width: 820px; margin: 0 auto; color: var(--signup-text); text-align: left; scroll-margin-top: 96px; }
.contact-embed { margin-top: 48px; }
@media (max-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
/* Seit 2026-09-24 ohne Häkchen: Anfragen brauchen keine Einwilligung, der Hinweis reicht. */
.contact-privacy-note { font-size: .85rem; line-height: 1.6; color: var(--signup-muted); }
.contact-privacy-note a { color: var(--signup-primary); text-decoration: underline; }

/* Seit 2026-09-28: Pflichtfelder markiert, Telefon optional, Erfolgsanzeige statt Formular. */
.contact-form[hidden], .contact-success[hidden] { display: none; }
.contact-req { color: var(--signup-primary); font-weight: 700; margin-left: 3px; }
.contact-legend { margin: -6px 0 -10px; font-size: .8rem; color: var(--signup-muted); text-align: right; }
.contact-legend .contact-req { margin: 0 2px 0 0; }
.contact-success { max-width: 820px; margin: 0 auto; padding: 56px 32px 44px; background: #fff; border: 1px solid var(--signup-border); border-radius: 24px; text-align: center; color: var(--signup-text); scroll-margin-top: 96px; }
.contact-success-icon { display: block; width: 88px; height: 88px; margin: 0 auto 22px; fill: none; stroke: var(--signup-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.contact-success-icon .csi-ring { stroke: #cfe6d3; stroke-dasharray: 252; stroke-dashoffset: 0; }
.contact-success-icon .csi-check { stroke-dasharray: 60; stroke-dashoffset: 0; }
.contact-success.is-shown .csi-ring { animation: csi-ring .6s ease-out both; }
.contact-success.is-shown .csi-check { animation: csi-check .4s .45s ease-out both; }
.contact-success.is-shown { animation: csi-pop .35s ease-out both; }
@keyframes csi-ring { from { stroke-dashoffset: 252; stroke: var(--signup-primary); } to { stroke-dashoffset: 0; } }
@keyframes csi-check { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes csi-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.contact-success-title { max-width: 34rem; margin: 0 auto; text-wrap: balance; font-family: 'Newsreader', Georgia, serif; font-weight: 450; font-size: var(--fs-h2-sub); line-height: 1.15; color: #141414; outline: none; }
.contact-success p { max-width: 30rem; margin: 0 auto; color: var(--signup-muted); line-height: 1.6; overflow-wrap: anywhere; }
.contact-success strong { color: var(--signup-text); font-weight: 600; }
.contact-again { margin-top: 28px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--signup-primary); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.contact-again:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .contact-success.is-shown, .contact-success.is-shown .csi-ring, .contact-success.is-shown .csi-check { animation: none; } }
@media (max-width: 540px) { .contact-success { padding: 40px 22px 32px; } .contact-legend { margin: -4px 0 -8px; } }