/* FVD Event: Kontaktseite.
   Ergänzt style.css um die Liste der Ansprechpartner und die Fläche für das Formular. */

/* Nach dem schlichten Seitenkopf weniger Luft, damit Telefonnummern und Formular gleich im Blick sind */
.kontakt-sec { padding-top: clamp(40px, 5.5vw, 84px); }

/* Zwei Spalten: links die Zuständigen und die Adresse, rechts das Formular */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.kontakt h2 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }

/* Verweise in dieser Spalte sehen aus wie im Baustein text */
.kontakt__leute a:not(.link), .kontakt__form .haken a, .kontakt__form .hinweis a { color: var(--blau); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.kontakt__leute a:not(.link):hover, .kontakt__form .haken a:hover, .kontakt__form .hinweis a:hover { color: var(--nacht); background: var(--gelb); }

/* Ansprechpartner: Liste mit Linien, Porträt im Sechseck der Bildmarke.
   Liegt das Foto noch nicht im Ordner img, stehen dort die Initialen (site.js setzt das Foto von selbst ein). */
.ansprech { margin-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--linie); }
.ansprech__person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: center; padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--linie); }
.ansprech__bild { position: relative; display: grid; place-content: center; width: clamp(68px, 7.4vw, 96px); aspect-ratio: 1 / 1.1547; overflow: hidden; background: var(--blau); color: var(--gelb); font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; clip-path: var(--sechseck); }
.ansprech__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ansprech__text { display: grid; justify-items: start; gap: 2px; }
.ansprech__text p { margin: 0; }
.ansprech__bereich { font-size: .8125rem; font-weight: 600; color: var(--blau); }
.ansprech__text h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.ansprech__text .ansprech__was { margin-bottom: 6px; font-size: .9375rem; line-height: 1.45; color: var(--leise); }
.ansprech__text a { padding-block: 3px; font-size: .9375rem; }
.kontakt__leute a.ansprech__tel { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-decoration: none; }

.kontakt__adresse { margin-top: clamp(32px, 4.4vw, 56px); }
.kontakt__adresse address { margin: 14px 0 1em; }

/* Formular auf heller Fläche. Die Ecke unten rechts ist im Winkel der Bildmarke geschnitten, wie bei den Fotos. */
.kontakt__form { --k: clamp(26px, 3.6vw, 60px); --grund: var(--dunst); padding: clamp(22px, 3.4vw, 48px); background: var(--dunst); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k) * .5774) 100%, 0 100%); }
.kontakt__form > p { margin: 10px 0 clamp(18px, 2.2vw, 28px); color: var(--leise); }
.kontakt__form .erfolg, .kontakt__form .hinweis { background: #fff; }
.kontakt__form .nur-entwurf .entwurf { margin-right: 6px; }

@media (max-width: 900px) {
  .kontakt { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 8vw, 64px); }
}
@media (max-width: 560px) {
  /* Fläche bis an den Bildschirmrand, damit die Felder breit bleiben */
  .kontakt__form { margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
}
@media print {
  .kontakt__form { display: none; }
  .ansprech__bild { display: none; }
}