/* Secure Society, contact form. One component for the contact pop-up (home page, legal pages) and the Kontakt page.
   It relies on the tokens of home.css or site.css. Fields and names match the form service (/api/contact):
   topic, name, company, email, times, message, the honeypot website and the Altcha payload (altcha).
   Markup: form.cf (+ .cf-page on the Kontakt page, where the topic is a visible choice); the thank-you text is the element
   named by data-thanks, the failure note (.cf-fail) the element named by data-fail. Behaviour: form.js. */

.cf { display: grid; gap: 14px; }
.cf[hidden] { display: none; }
dialog .cf { padding: 30px; }
.cf [hidden] { display: none !important; }
.cf label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--n3); }
.cf input:not([type="radio"]), .cf textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(0,14,33,.14); background: rgba(255,255,255,.75); color: var(--navy); }
.cf input::placeholder, .cf textarea::placeholder { color: var(--meta); font-weight: 400; opacity: 1; }
.cf input:not([type="radio"]):focus, .cf textarea:focus { outline: 2px solid var(--hb-edge); outline-offset: 1px; }
.cf textarea { resize: vertical; min-height: 104px; }
.cf .btn.primary { margin-top: 6px; }
/* Art. 13 GDPR at collection: the privacy notice right under the submit button */
.cf .fnote { margin: 2px 0 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--meta); }
.cf .fnote a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(40,188,255,.55); text-underline-offset: 3px; }
.cf .fnote a:hover { color: var(--navy); }
/* honeypot: present for bots, invisible and unreachable for people */
.cf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.thanks { padding: 40px 30px; font-size: 18px; color: var(--navy); }
.thanks:focus { outline: none; }
/* a field the form service rejected (400) */
.cf input[aria-invalid="true"], .cf textarea[aria-invalid="true"] { border-color: var(--high); box-shadow: 0 0 0 1px var(--high); }
.cf .cf-err { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--high); }
/* send failed (data-fail): replaces the form when the form service cannot take the message;
   the mail button carries what the visitor typed */
.cf-fail { display: grid; gap: 14px; }
.cf-fail[hidden], .cf-fail [hidden] { display: none; }
dialog .cf-fail { padding: 30px; }
.cf-fail:focus { outline: none; }
.cf-fail p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--navy); }
.cf-fail .btn.primary { margin-top: 6px; }
.cf-fail .cf-alt { font-size: 15px; text-align: center; color: var(--n3); }
.cf-fail .cf-alt a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(40,188,255,.55); text-underline-offset: 3px; white-space: nowrap; }
.cf-fail .cf-alt a:hover { color: var(--navy); }

/* the topic as a visible choice (Kontakt page): a calm segmented control of radio buttons; it stacks when the form is narrow */
.cf-page { container-type: inline-size; }
.cf-topic { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.cf-topic legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--n3); }
.seg { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,14,33,.045); box-shadow: inset 0 0 0 1px rgba(0,14,33,.08); }
.seg label { position: relative; display: block; gap: 0; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--n4); text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
.seg span::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g2); background: transparent; transition: box-shadow .2s, background .2s; }
.seg label:hover span { color: var(--navy); }
.seg input:checked + span { background: var(--white); color: var(--navy); box-shadow: 0 1px 2px rgba(0,14,33,.06), 0 6px 16px -8px rgba(0,14,33,.28), inset 0 0 0 1px rgba(40,188,255,.45); }
.seg input:checked + span::before { box-shadow: inset 0 0 0 4px var(--hb), 0 0 6px rgba(40,188,255,.55); background: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--hb-edge); outline-offset: 2px; }
/* phones: the Wunschtermine placeholder stays on one line down to 360 px */
@media (max-width: 480px) {
  dialog .cf { padding: 26px 22px; }
  .cf input:not([type="radio"]), .cf textarea { padding: 12px; }
  .cf input::placeholder { font-size: 14px; }
}
@container (max-width: 600px) {
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg span { justify-content: flex-start; text-align: left; }
}
/* the Altcha widget runs invisibly (display="invisible"); it only holds the proof-of-work payload */
.cf altcha-widget { display: contents; }