/* ==========================================================================
   contact.php — Kontakt oss
   Apple light, same palette as terms.php: grey canvas, white cards, one
   blue accent. Scoped under .ct so nothing else on the site changes.
   ========================================================================== */

.ct {
  --bg: #f5f5f7; --card: #fff; --fill: rgba(0,0,0,.045); --fill-2: rgba(0,0,0,.07);
  --ink: #1d1d1f; --ink-2: #424245; --muted: #6e6e73; --faint: #86868b;
  --line: rgba(0,0,0,.09); --field: #d2d2d7;
  --blue: #0071e3; --blue-h: #0077ed; --blue-soft: #e8f1fd;
  --green: #248a3d; --green-dot: #34c759;
  --red: #d70015; --red-soft: #fdeceb; --amber: #8a5300; --amber-soft: #fff4e0;
  --r-xl: 28px; --r: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  max-width: 1180px; margin: 0 auto; padding: 56px 20px 88px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Plus Jakarta Sans', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ct *, .ct *::before, .ct *::after { box-sizing: border-box; }
.ct h1, .ct h2, .ct p { margin: 0; }
.ct a { color: var(--blue); text-decoration: none; }
.ct :focus-visible { outline: 3px solid rgba(0,113,227,.35); outline-offset: 2px; border-radius: 10px; }
.ct [hidden] { display: none !important; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ct-hero { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.ct-eyebrow { font-size: 14px; font-weight: 600; color: var(--blue); letter-spacing: .01em; margin-bottom: 10px; }
.ct-title { font-size: clamp(34px, 5.2vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; }
.ct-lead { margin-top: 14px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--muted); letter-spacing: -0.005em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 920px) { .ct-grid { grid-template-columns: 1fr; } }
.ct-card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow); }
.ct-formcard { padding: 32px; position: relative; }
@media (max-width: 560px) { .ct { padding-top: 36px; } .ct-formcard { padding: 22px 18px; border-radius: 22px; } }

/* ── Form ───────────────────────────────────────────────────────────────── */
.ct-form { display: grid; gap: 18px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; gap: 18px; } }
.ct-field { display: grid; gap: 7px; min-width: 0; }
.ct-label { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; margin: 0; }
.ct-opt { font-weight: 500; color: var(--faint); font-size: 13px; }
.ct-input {
  width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--field); background: #fff;
  padding: 0 14px; font: inherit; font-size: 16px; /* 16px: no zoom on iPhone */ color: var(--ink);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ct-input::placeholder { color: #aeaeb2; }
.ct-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.16); }
.ct-area { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ct-field.bad .ct-input { border-color: var(--red); background: #fffafa; }
.ct-field.bad .ct-input:focus { box-shadow: 0 0 0 4px rgba(215,0,21,.14); }
.ct-err { min-height: 0; font-size: 13px; line-height: 1.35; color: var(--red); }
.ct-err:empty { display: none; }
.ct-under { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ct-count { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .15s ease; }
.ct-count.warn { color: var(--amber); }
.ct-count.over { color: var(--red); }

/* topic chips — radios that look like a segmented choice */
.ct-topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.ct-topics legend { margin-bottom: 9px; float: none; width: auto; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { position: relative; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ct-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-chip span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  background: var(--fill); color: var(--ink-2); font-size: 14px; font-weight: 600; user-select: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out);
}
.ct-chip:active span { transform: scale(.97); }
.ct-chip input:checked + span { background: var(--ink); color: #fff; }
.ct-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,113,227,.35); }
@media (hover: hover) and (pointer: fine) { .ct-chip input:not(:checked) + span:hover { background: var(--fill-2); } }

/* the ad-reference field slides open when the topic is "an ad" */
.ct-reveal { display: grid; grid-template-rows: 0fr; margin-top: -18px; transition: grid-template-rows .28s var(--ease-out), margin-top .28s var(--ease-out), opacity .2s ease; opacity: 0; }
.ct-reveal > div { overflow: hidden; min-height: 0; }
.ct-reveal.open { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
.ct-reveal .ct-field { padding: 2px; }

/* honeypot — out of sight and out of the tab order, but still "visible" to naive bots */
.ct-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ct-alert { padding: 12px 16px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 14px; font-weight: 500; line-height: 1.45; }
.ct-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ct-note i { color: var(--faint); margin-top: 1px; }
.ct-signed { background: var(--blue-soft); color: #174ea6; padding: 10px 14px; border-radius: 12px; }
.ct-signed i { color: var(--blue); }

.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.ct-foot .ct-note { flex: 1 1 260px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 26px;
  border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap;
  text-decoration: none !important; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color .15s ease, transform .16s var(--ease-out), opacity .15s ease;
}
.ct-btn:active { transform: scale(.97); }
.ct-btn-primary { background: var(--blue); color: #fff !important; min-width: 180px; }
.ct-btn-ghost { background: var(--fill); color: var(--ink) !important; }
@media (hover: hover) and (pointer: fine) {
  .ct-btn-primary:hover { background: var(--blue-h); }
  .ct-btn-ghost:hover { background: var(--fill-2); }
}
@media (max-width: 600px) { .ct-foot .ct-btn { width: 100%; } }
.ct-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: ct-spin .6s linear infinite; }
.ct-btn.busy { pointer-events: none; }
.ct-btn.busy .ct-spin { display: inline-block; }
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ── Sent ───────────────────────────────────────────────────────────────── */
.ct-done { text-align: center; padding: 36px 8px 28px; outline: none; }
.ct-done h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; }
.ct-done p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 8px auto 24px; max-width: 42ch; overflow-wrap: anywhere; }
.ct-done-icon { width: 64px; height: 64px; margin: 0 auto; }
.ct-done-icon svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct-done-icon circle { stroke: var(--green-dot); opacity: .22; }
.ct-done-icon path { stroke: var(--green-dot); stroke-dasharray: 40; stroke-dashoffset: 0; }
.ct-done.enter { animation: ct-in .32s var(--ease-out) both; }
.ct-done.enter .ct-done-icon path { animation: ct-draw .42s .12s var(--ease-out) both; }
@keyframes ct-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ct-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* ── Side cards ─────────────────────────────────────────────────────────── */
.ct-side { display: grid; gap: 22px; }
.ct-reach, .ct-tips { padding: 24px; }
.ct-h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; }
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ct-list li > a, .ct-list li > div { display: flex; align-items: center; gap: 14px; padding: 10px; margin: 0 -10px; border-radius: 14px; color: var(--ink) !important; transition: background-color .15s ease, transform .16s var(--ease-out); }
.ct-list li > a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .ct-list li > a:hover { background: var(--fill); } }
.ct-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 17px; }
.ct-list small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.ct-list b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ct-legal { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ct-tiplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-tiplist li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ct-tiplist i { color: var(--faint); font-size: 16px; margin-top: 1px; }

/* ── Accessibility preferences ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ct *, .ct *::before, .ct *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .ct-btn:active, .ct-chip:active span, .ct-list li > a:active { transform: none; }
}
@media (prefers-contrast: more) {
  .ct-card { box-shadow: 0 0 0 1px #8e8e93; }
  .ct-lead, .ct-note, .ct-opt, .ct-list small { color: #3a3a3c; }
  .ct-input { border-color: #6e6e73; }
}