/* orcapilot.de/kontakt: the form for an appointment. Shared parts (bar, footer, fonts,
   colours) come from /styles.css; this file lays out the page itself. */

/* Deep water, like the start page's closing section: a dark card, lit from above */
.kontakt {
  position: relative;
  width: 100%;
  max-width: 1600px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 55% 42% at 50% -4%, rgba(165, 216, 230, 0.2), rgba(165, 216, 230, 0) 72%),
    linear-gradient(180deg, #072B40 0%, #04202F 45%, #021821 100%);
  color: #ffffff;
  padding: clamp(24px, 3vw, 36px) clamp(18px, 4vw, 40px) clamp(48px, 7vw, 96px);
}
.kontakt :focus-visible { outline-color: var(--accent); }

/* ---- wide: the form at the top left, whole on a small laptop screen without scrolling;
   the headline, the business card and what follows on the right. Narrow: one after the
   other, the headline first. ---- */
.kontakt-raster {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "kopf" "form" "neben";
  gap: 28px;
  align-items: start;
}
.kontakt-kopf { grid-area: kopf; }
.kontakt-karte { grid-area: form; }
.kontakt-neben { grid-area: neben; }
@media (min-width: 960px) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "form kopf" "form neben";
    column-gap: clamp(40px, 4.5vw, 64px);
    row-gap: 30px;
  }
  .kontakt-kopf { padding-top: 6px; }
}

/* ---- head: the headline, one sentence ---- */
.kontakt h1 {
  margin: 0;
  font-size: clamp(2rem, 1.15rem + 2vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.07;
  text-wrap: balance;
}
.kontakt-lead {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- the form: a light card, kept compact ---- */
.kontakt-karte {
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 24px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 8, 14, 0.45), 0 2px 6px rgba(0, 8, 14, 0.2);
}
.kontakt-karte :focus-visible { outline-color: #16688A; }
.kontakt-form { display: grid; gap: 14px; }
.kontakt-form[hidden] { display: none; }
.kontakt-reihe { display: grid; gap: 14px; }
@media (min-width: 560px) { .kontakt-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* e-mail and phone share a row only where the phone's country box still has room */
@media (min-width: 560px) and (max-width: 1179px) { .kontakt-reihe-weit { grid-template-columns: minmax(0, 1fr); } }
.kontakt-feld { display: grid; gap: 6px; align-content: start; }
.kontakt-feld label { font-size: 0.84rem; font-weight: 600; }
.kontakt-optional { font-weight: 400; color: var(--ink-muted); }

/* Filled fields: no frame until the mouse or the cursor is on them */
.kontakt-feld input, .kontakt-feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #EFF5F8;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;
}
.kontakt-feld textarea { min-height: 88px; resize: vertical; }
.kontakt-feld ::placeholder { color: #8AA0AE; opacity: 1; }
.kontakt-feld input:hover, .kontakt-feld textarea:hover { border-color: rgba(2, 29, 46, 0.14); background: #EAF2F6; }
.kontakt-feld input:focus, .kontakt-feld textarea:focus { outline: none; border-color: #16688A; background: #ffffff; box-shadow: 0 0 0 4px rgba(22, 104, 138, 0.14); }
.kontakt-feld [aria-invalid="true"] { border-color: #C2410C; background: #FFF7F3; }
.kontakt-feld [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.14); }
.kontakt-feld-fehler { margin: 0; font-size: 0.82rem; line-height: 1.4; color: #B4380A; }
.kontakt-feld-fehler:empty { display: none; }

/* Phone, as in the demo dialog: the country box in front of the number. The real list is the
   browser's own select, laid invisibly over the box, so it opens the way the device expects.
   Windows has no flag emoji, so the self-hosted flag font of the demo draws them (credit in
   assets/fonts/LICENSE-twemoji-flags.md); only the flag letters use it. */
@font-face {
  font-family: 'Flaggen';
  font-display: swap;
  src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF;
}
.kontakt-telefon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.kontakt-land { position: relative; display: grid; }
.kontakt-land select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-family: 'Flaggen', 'Inter', system-ui, sans-serif;
  font-size: 16px; /* below 16px iOS zooms in on tap */
}
.kontakt-land-anzeige {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #EFF5F8;
  color: var(--ink);
  font-family: 'Flaggen', 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;
}
.kontakt-land-flagge { font-size: 19px; line-height: 1; }
.kontakt-land-anzeige::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: -4px 0 0 3px;
  border: solid var(--ink-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.kontakt-land:hover .kontakt-land-anzeige { border-color: rgba(2, 29, 46, 0.14); background: #EAF2F6; }
.kontakt-land select:focus + .kontakt-land-anzeige { border-color: #16688A; background: #ffffff; box-shadow: 0 0 0 4px rgba(22, 104, 138, 0.14); }

.kontakt-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  cursor: pointer;
}
.kontakt-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #16688A; cursor: pointer; }

/* Turnstile renders into this box once the visitor starts typing (kontakt.js); wide, it
   shares a row with the button */
.kontakt-abschluss { display: grid; gap: 12px; align-items: center; }
@media (min-width: 1180px) { .kontakt-abschluss { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; } }
.kontakt-captcha { display: flex; align-items: center; min-height: 65px; }
.kontakt-captcha-platz { font-size: 0.82rem; color: #8AA0AE; }

.kontakt-fehler { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #B4380A; }
.kontakt-fehler:empty { display: none; }
.kontakt-fehler[data-grund="warten"] { color: var(--ink-muted); }
.kontakt-fehler a { color: inherit; text-decoration: underline; }

.kontakt-los {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #0C3B56 0%, #06283C 100%);
  color: #ffffff;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(6, 40, 60, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.2s ease, transform 0.12s ease, filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.kontakt-los:hover { filter: brightness(1.14); box-shadow: 0 16px 34px rgba(6, 40, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.kontakt-los:active { transform: translateY(0.5px); }
.kontakt-los:disabled { opacity: 0.75; cursor: progress; }
.kontakt-los:focus-visible { outline-offset: 4px; }
.kontakt-los-pfeil { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.kontakt-los:hover .kontakt-los-pfeil { transform: translateX(3px); }
.kontakt-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: kontakt-dreht 0.8s linear infinite;
}
@keyframes kontakt-dreht { to { transform: rotate(360deg); } }

.kontakt-hinweis { margin: 0; text-align: center; font-size: 0.8rem; line-height: 1.55; color: var(--ink-muted); }
.kontakt-hinweis a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(2, 29, 46, 0.3); text-underline-offset: 2px; }
.kontakt-hinweis a:hover { text-decoration-color: currentColor; }

/* After sending: the agent's dark badge with a tick, where the form was */
.kontakt-danke { display: grid; justify-items: start; gap: 10px; padding: 8px 0; outline: none; }
.kontakt-danke[hidden] { display: none; }
.kontakt-danke-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #0B2738;
  color: var(--accent);
  box-shadow: 0 0 0 5px rgba(165, 216, 230, 0.5), 0 8px 18px rgba(6, 42, 63, 0.2);
}
.kontakt-danke-zeichen svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-danke h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; }
.kontakt-danke p { margin: 0; color: var(--ink-muted); line-height: 1.6; }
.kontakt-zurueck { margin-top: 10px; font-weight: 600; color: #16688A; }
.kontakt-zurueck:hover { text-decoration: underline; }

/* ---- right: the business card, then what happens next ---- */
.kontakt-neben { display: grid; gap: 22px; }
.kontakt-person {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.kontakt-person-kopf { display: flex; align-items: center; gap: 16px; }
.kontakt-person-foto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
  filter: grayscale(1);
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kontakt-person:hover .kontakt-person-foto { filter: grayscale(0); }
.kontakt-person-rolle { margin: 0 0 2px; font-size: 0.82rem; color: var(--text-muted); }
.kontakt-person-name { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.kontakt-wege { display: grid; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kontakt-wege li { display: flex; align-items: center; gap: 12px; }
.kontakt-wege svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-wege a { /* an underline draws in on hover */
  color: #ffffff;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.25s var(--ease-out);
}
.kontakt-wege a:hover { background-size: 100% 1px; }
/* Where the column is wide enough, e-mail and phone sit right of the name, behind a hairline */
.kontakt-neben { container-type: inline-size; }
@container (min-width: 450px) {
  .kontakt-person { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .kontakt-wege { margin: 0; padding: 0 0 0 18px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); }
}
.kontakt-ablauf-titel { margin: 6px 0 0; padding: 0 4px; font-size: 1rem; font-weight: 600; }
.kontakt-ablauf { --abstand: 28px; margin: 0; padding: 0 4px; list-style: none; }
/* Each badge sits level with the middle of its text, however many lines that runs to */
.kontakt-ablauf li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.kontakt-ablauf li + li { margin-top: var(--abstand); }
/* The thread from badge to badge. Every step draws its own part: from its badge down to its
   bottom edge, and from the step above down to its badge, so it meets both badges whatever
   the number of lines on either side */
.kontakt-ablauf li:not(:last-child)::before,
.kontakt-ablauf li + li::after {
  content: '';
  position: absolute;
  left: 19.5px;
  width: 1px;
  background: rgba(165, 216, 230, 0.26);
}
.kontakt-ablauf li:not(:last-child)::before { top: calc(50% + 20px); bottom: 0; }
.kontakt-ablauf li + li::after { top: calc(-1 * var(--abstand)); bottom: calc(50% + 20px); }
.kontakt-ablauf-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(165, 216, 230, 0.08);
  border: 1px solid rgba(165, 216, 230, 0.3);
  color: var(--accent);
}
.kontakt-ablauf-zeichen svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-ablauf p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: #C8D5DD; }

/* ---- wide windows: the message box is roomy (170 px); on short ones it gives way first ---- */
@media (min-width: 1180px) {
  .kontakt-feld textarea { min-height: 0; height: 170px; }
}

/* ---- wide but short windows, i.e. laptops: everything on one screen. A 1366 × 768 laptop
   leaves the browser about 1366 × 650, a 14-inch one at 150 % scaling about 1280 × 600.
   The card gives up a little air, the message box takes the height that is left, and the
   right column sets its type a size smaller ---- */
@media (min-width: 1180px) and (max-height: 800px) {
  .kontakt { padding-top: 24px; }
  .kontakt-raster { row-gap: 22px; }
  .kontakt-karte { padding-block: 22px; }
  .kontakt-form { gap: 11px; }
  .kontakt-feld textarea { height: clamp(70px, 100vh - 537px, 170px); }
  .kontakt-kopf { padding-top: 0; }
  .kontakt h1 { font-size: 2.4rem; }
  .kontakt-lead { margin-top: 0.75rem; font-size: 1rem; line-height: 1.55; }
  .kontakt-neben { gap: 16px; }
  .kontakt-person { padding: 14px 18px; }
  .kontakt-person-foto { width: 56px; height: 56px; }
  .kontakt-ablauf-titel { margin-top: 0; }
  .kontakt-ablauf { --abstand: 20px; }
  .kontakt-ablauf p { font-size: 0.94rem; line-height: 1.5; }
}
/* ...and the very short ones, like that 14-inch laptop: the right column tightens once more */
@media (min-width: 1180px) and (max-height: 640px) {
  .kontakt-raster { row-gap: 16px; }
  .kontakt h1 { font-size: 2.15rem; }
  .kontakt-lead { margin-top: 0.6rem; line-height: 1.5; }
  .kontakt-neben { gap: 12px; }
  .kontakt-ablauf { --abstand: 14px; }
  .kontakt-ablauf p { line-height: 1.45; }
}

/* ---- motion: the two columns rise in once ---- */
@media (prefers-reduced-motion: no-preference) {
  .kontakt-karte { animation: kontakt-auf 0.7s var(--ease-out) 0.08s both; }
  .kontakt-neben { animation: kontakt-auf 0.7s var(--ease-out) 0.2s both; }
  @keyframes kontakt-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .kontakt-danke:not([hidden]) { animation: kontakt-auf 0.5s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .kontakt-feld input, .kontakt-feld textarea, .kontakt-land-anzeige, .kontakt-los, .kontakt-los-pfeil,
  .kontakt-wege a, .kontakt-person-foto { transition: none; }
  .kontakt-spinner { animation-duration: 2.4s; }
}