/* Sektion anfrage: Blau, Formular rechts, links Text, Lageplan im Fenster, Telefon und E-Mail. */
#anfrage { overflow-x: clip; --bl: calc((100vw - min(100vw - 2 * var(--gut, 24px), var(--container, 1280px))) / 2); --anf-ink: var(--on-blue); --anf-soft: var(--on-blue-soft); }
#anfrage > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); align-content: start; }
#anfrage > .wrap > h2 { color: var(--on-blue); }
#anfrage .anf__text { margin-bottom: 32px; }
#anfrage .anf__lead { font-size: 19px; line-height: 1.5; color: var(--on-blue-soft); max-width: 46ch; }
#anfrage .anf__text .ilist { margin-top: 12px; color: var(--on-blue); }
#anfrage .anf__after { margin-top: 24px; font-size: 16px; line-height: 1.5; color: var(--on-blue); max-width: 46ch; }
#anfrage a { color: var(--on-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Formular */
#anfrage .anf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
#anfrage .anf__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
#anfrage .anf__field, #anfrage .anf__row, #anfrage .anf, #anfrage :is(input, select, textarea) { min-width: 0; max-width: 100%; }
#anfrage .anf__field { display: grid; gap: 8px; align-content: start; min-width: 0; }
#anfrage .anf__field > label { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--on-blue); }
#anfrage input[type="text"], #anfrage input[type="email"], #anfrage input[type="tel"], #anfrage select, #anfrage textarea {
  width: 100%; height: 48px; padding: 0 16px; background: var(--white); color: var(--p-ink);
  border: 1px solid transparent; border-radius: 0; text-overflow: ellipsis; font: 400 16px/1.4 var(--font-text); font-stretch: 100%; appearance: none; -webkit-appearance: none;
}
#anfrage textarea { height: auto; min-height: 104px; padding-block: 12px; resize: vertical; display: block; }
#anfrage select { padding-right: 48px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--igc-blue) 50%), linear-gradient(135deg, var(--igc-blue) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
#anfrage :is(input, select, textarea):hover { border-color: var(--on-blue-soft); }
#anfrage :is(input, select, textarea):focus-visible { outline: 3px solid var(--on-blue); outline-offset: 2px; border-color: var(--igc-blue); }
#anfrage a:focus-visible, #anfrage .btn:focus-visible { outline: 3px solid var(--on-blue); outline-offset: 3px; }
#anfrage ::selection { background: var(--on-blue-soft); color: var(--p-ink); }
#anfrage ::placeholder { color: var(--p-muted); }
#anfrage :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--igc-blue); outline: 3px solid var(--on-blue); outline-offset: 3px; }
#anfrage .anf__hint, #anfrage .anf__note, #anfrage .anf__err { max-width: 100%; overflow-wrap: anywhere; }
#anfrage .anf__hint { font-size: 13.5px; line-height: 1.45; color: var(--on-blue); }
#anfrage .anf__err { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--on-blue); padding: 8px 12px; background: var(--igc-blue-deep); border-top: 2px solid var(--on-blue); }
#anfrage .anf__err[hidden], #anfrage .anf__fail[hidden], #anfrage .anf__ok[hidden] { display: none; }

/* Einwilligung: gerahmt; das Label füllt die ganze Fläche, Trefferfläche mindestens 44 px */
#anfrage .anf__check { position: relative; border: 1px solid var(--rule-on-blue); }
/* Das Kästchen selbst ist 44 x 44 px groß (Trefferfläche); gezeichnet wird ein 24-px-Quadrat darin: weiß gerahmt, gefüllt mit einem weißen Quadrat bei Häkchen */
#anfrage .anf__check input { position: absolute; left: 6px; top: 6px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-color: transparent;
  background-image: linear-gradient(var(--igc-blue), var(--igc-blue)), linear-gradient(var(--white), var(--white)); background-repeat: no-repeat; background-position: center; background-size: 20px 20px, 24px 24px; }
#anfrage .anf__check input:checked { background-image: linear-gradient(var(--white), var(--white)), linear-gradient(var(--igc-blue), var(--igc-blue)), linear-gradient(var(--white), var(--white)); background-size: 12px 12px, 20px 20px, 24px 24px; }
#anfrage .anf__check label { display: block; min-height: 44px; padding: 16px 16px 16px 56px; font-size: 14px; line-height: 1.5; color: var(--on-blue); cursor: pointer; font-weight: 400; overflow-wrap: anywhere; }
#anfrage .anf__check label .nw { white-space: normal; }
#anfrage .anf__consent:has([aria-invalid="true"]) .anf__check { border: 2px solid var(--on-blue); }
#anfrage .anf__consent:has([aria-invalid="true"]) .anf__check label { padding: 15px 15px 15px 55px; }
#anfrage .anf__consent:has([aria-invalid="true"]) .anf__check input { left: 5px; top: 5px; }
#anfrage .anf__check input:focus-visible { outline: 3px solid var(--on-blue); outline-offset: 0; }
/* Fließtext-Links: Trefferfläche 44 px ohne Zeilenverschiebung */
#anfrage .anf__check label a, #anfrage .anf__fail a { padding-block: 15px; margin-block: -15px; }

/* Zustände */
#anfrage .anf__fail, #anfrage .anf__ok { overflow-wrap: anywhere; }
#anfrage .anf__fail .nw { white-space: normal; }
#anfrage .anf__fail { padding: 16px; border: 2px solid var(--on-blue); font-size: 16px; line-height: 1.5; color: var(--on-blue); }
#anfrage .anf__fail:focus-visible { outline: 3px solid var(--on-blue); outline-offset: 3px; }
#anfrage .anf__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
@media (min-width: 640px) { #anfrage .anf__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } #anfrage .anf__act .btn { justify-self: start; } }
#anfrage .anf__act .btn { min-width: 0; max-width: 100%; }
#anfrage .anf__act .anf__note { min-width: 0; flex: 1 1 14ch; }
#anfrage .anf__act .btn[disabled] { opacity: .8; cursor: progress; }
#anfrage .anf__note { font-size: 13.5px; line-height: 1.45; color: var(--on-blue); }
#anfrage .anf__ok [data-mail] { white-space: normal; overflow-wrap: anywhere; }
#anfrage .anf__ok { padding: 24px 16px; border-top: 3px solid var(--on-blue); border-bottom: 1px solid var(--rule-on-blue); display: grid; gap: 16px; max-width: 56ch; }
#anfrage .anf__ok-h { font-family: var(--font-display); font-weight: var(--d-weight); font-stretch: var(--d-stretch); letter-spacing: -0.02em; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
#anfrage .anf__ok p { font-size: 19px; line-height: 1.5; }
#anfrage .anf__ok:focus-visible { outline: 3px solid var(--on-blue); outline-offset: 3px; }

/* Lageplan im Fenster, darunter Kontakt */
#anfrage .anf__aside { display: grid; gap: 24px; margin-top: 48px; align-content: start; }
#anfrage .anf__window { margin: 0; padding: 0; background: none; overflow: hidden; }
#anfrage .anf__window img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 736; object-fit: cover; object-position: 50% 85%; transition: transform .7s var(--ease-out); }
#anfrage .anf__window:hover img { transform: scale(1.03); }
#anfrage .anf__contact { display: grid; gap: 12px; justify-items: start; font-size: 16px; line-height: 1.5; color: var(--on-blue); }
/* ein Satz; Telefon und E-Mail stehen im Satz, die Trefferfläche (44 px) kommt aus dem vertikalen Polster am Inline-Link, ohne den Zeilenfluss zu ändern */
#anfrage .anf__line { line-height: 1.5; max-width: 46ch; }
#anfrage .anf__line > a { display: inline; padding-block: 14px; margin-block: -14px; }
#anfrage .anf__line > a.nw { white-space: normal; overflow-wrap: anywhere; }
#anfrage .anf__form { margin-top: 0; }

@media (min-width: 640px) {
  #anfrage .anf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* links Text und Lageplan, rechts das Formular; der Lageplan füllt die Höhe bis zur Unterkante des Formulars (Button), Kontakt unter dem Formular */
  #anfrage > .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #anfrage > .wrap > h2 { grid-column: 1 / span 6; grid-row: 1; max-width: 18ch; margin-bottom: var(--s-6); }
  #anfrage .anf__text { grid-column: 1 / span 6; grid-row: 2; margin-bottom: 24px; }
  #anfrage .anf__lead { max-width: none; }
  #anfrage .anf__aside { display: contents; }
  #anfrage .anf__window { grid-column: 1 / span 6; grid-row: 3 / span 2; margin-left: calc(-1 * var(--bl)); width: calc(100% + var(--bl)); min-height: 340px; }
  #anfrage .anf__window { position: relative; }
  #anfrage .anf__window img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 45%; }
  #anfrage .anf__contact { grid-column: 7 / span 6; grid-row: 4; margin-top: 16px; }
  #anfrage .anf__form { grid-column: 7 / span 6; grid-row: 1 / span 3; }
  #anfrage .anf { gap: 20px; }
  #anfrage textarea { min-height: 88px; }
}
@media (max-width: 1023px) {
  #anfrage .anf__aside { display: contents; }
  #anfrage .anf__text { order: 1; }
  #anfrage .anf__window { order: 2; margin: 0 calc(-1 * var(--gut, 24px)) 32px; }
  #anfrage .anf__form { order: 3; }
  #anfrage .anf__contact { order: 4; margin-top: 32px; }
}
@media (max-width: 639px) {
  #anfrage .anf__act .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { #anfrage .anf__window img { transition: none; } }

main > section#anfrage { height: auto; min-height: calc(var(--h, 1) * 100svh); }
/* Button nie abgeschnitten: Button in voller Wortbreite, Hinweis daneben; auf schmalem Formular (1024 bis 1279) darunter */
@media (min-width: 640px) { #anfrage .anf__act { grid-template-columns: auto minmax(0, 1fr); } #anfrage .anf__act .btn { max-width: none; } }
@media (min-width: 1024px) and (max-width: 1279px) { #anfrage .anf__act { grid-template-columns: minmax(0, 1fr); } }

/* Ansprechpartner (Jacques 2026-11-12): eckiges Porträt, Haarlinie oben, weiß auf IGC-Blau */
#anfrage .anf__person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: start; margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule-on-blue); }
#anfrage .anf__person-img { display: block; width: 112px; height: 112px; object-fit: cover; object-position: 50% 35%; }
#anfrage .anf__person-txt { display: grid; gap: 2px; min-width: 0; }
#anfrage .anf__person-k { font-size: 13px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--on-blue-soft); margin: 0 0 4px; }
#anfrage .anf__person-n { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; color: var(--white); margin: 0; }
#anfrage .anf__person-r { font-size: 15px; line-height: 1.4; color: var(--on-blue-soft); margin: 0 0 6px; }
#anfrage .anf__person-c { list-style: none; margin: 0; padding: 0; display: grid; }
#anfrage .anf__person-c a { display: inline-block; line-height: 20px; padding-block: 12px; margin-block: -7px; font-size: 16px; color: var(--white); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; white-space: normal; }
#anfrage .anf__person-c a:hover { opacity: .8; }
#anfrage .anf__person-c a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 639px) {
  #anfrage .anf__person { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); }
  #anfrage .anf__person-img { width: 88px; height: 88px; }
  #anfrage .anf__person-n { font-size: 20px; }
}

/* Spamfalle, für Menschen unsichtbar */
#anfrage .anf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }