/* quote.css — Spoed Sleepdienst · quote funnel, hero mini step, mobile action bar, desktop WhatsApp pill (Agent D)
   Reads A's tokens from site.css :root with standalone fallbacks (contract palette). Everything is prefixed .q-.
   Mobile-first; fits 360 px without horizontal scroll; big thumb targets; orange = focus + progress + primary. */

.q-mount, .q-mini, .q-bar, .q-pill {
  --q-black: var(--asphalt, #0a0a0b);
  --q-graphite: var(--graphite, #141416);
  --q-carbon: var(--carbon, #1c1c1f);
  --q-line: var(--line, rgba(255, 255, 255, .08));
  --q-line-strong: var(--line-2, rgba(255, 255, 255, .14));
  --q-ivory: var(--ivory, #f4f1ec);
  --q-smoke: var(--smoke, #a7a7ad);
  --q-orange: var(--orange, #fa5a00);
  --q-orange-hi: var(--orange-2, #ff6d1f);
  --q-amber: var(--amber, #ffb020);
  --q-wa: var(--wa, #25d366);
  --q-display: var(--f-display, var(--font-display, 'Archivo', 'Inter', system-ui, sans-serif));
  --q-ui: var(--f-body, var(--font-ui, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif));
  --q-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
  --q-radius: 18px;
  --q-radius-lg: 28px;
  --q-tap: 56px;
  font-family: var(--q-ui);
  color: var(--q-ivory);
  box-sizing: border-box;
}
.q-mount *, .q-mini *, .q-bar *, .q-pill * { box-sizing: inherit; }
.q-mount [hidden], .q-mini [hidden], .q-bar[hidden], .q-pill[hidden] { display: none !important; }
.q-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- icons (currentColor masks; no files, no requests) */
.q-ico { display: inline-block; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--q-i) center / contain no-repeat; mask: var(--q-i) center / contain no-repeat; }
.q-ico-check { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>"); }
.q-ico-phone { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/></svg>"); }
.q-ico-wa { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3.3 4.4c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.4 2.5 1 3 .8 3.5.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3l-2-1c-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.1.2-.3.2-.6.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6z'/></svg>"); }
.q-ico-pin { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z'/><circle cx='12' cy='10' r='2.5'/></svg>"); }
.q-ico-spin { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 3a9 9 0 1 1-6.4 2.6'/></svg>"); animation: q-spin 1s linear infinite; }
.q-ico-arrow-r { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 5l7 7-7 7'/></svg>"); }
.q-ico-arrow-l { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H5M11 5l-7 7 7 7'/></svg>"); }
.q-ico-copy { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3'/></svg>"); }
.q-ico-quote { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l5 5v13H7z'/><path d='M14 3v5h5M10 13h6M10 17h6'/></svg>"); }
.q-ico-flag { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4m0 0h12l-2 4 2 4H5'/></svg>"); }
.q-ico-globe { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/></svg>"); }
.q-ico-sit-pech { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l10 18H2z'/><path d='M12 10v4M12 17.5v.5'/></svg>"); }
.q-ico-sit-ongeval { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 14l2-5h14l2 5v5H3zM3 14h18M7 19v2M17 19v2'/><path d='M9 4l2 3 2-3 2 3'/></svg>"); }
.q-ico-sit-transport { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 16V7h12v9M14 10h4l4 4v2h-8z'/><circle cx='6' cy='18' r='2'/><circle cx='17' cy='18' r='2'/></svg>"); }
.q-ico-sit-anders { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/><path d='M8 9h8M8 12.5h5'/></svg>"); }
.q-ico-dest-garage { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-6 9 6v11H3z'/><path d='M7 21v-7h10v7M7 17h10'/></svg>"); }
.q-ico-dest-huis { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8M5 10v11h5v-6h4v6h5V10'/></svg>"); }
.q-ico-dest-anders { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/></svg>"); }
.q-ico-dest-weetniet { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .8-1 1.7M12 17v.5'/></svg>"); }
.q-ico-drive-rijdt { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 14l2-5h14l2 5v5H3zM3 14h18'/><circle cx='7' cy='17' r='1'/><circle cx='17' cy='17' r='1'/></svg>"); }
.q-ico-drive-rolt { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='2.5'/><path d='M12 4v5.5M12 14.5V20M4 12h5.5M14.5 12H20'/></svg>"); }
.q-ico-drive-vast { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10' width='14' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>"); }
.q-ico-when-nu { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7z'/></svg>"); }
.q-ico-when-later { --q-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>"); }
@keyframes q-spin { to { transform: rotate(360deg); } }

/* ---------- layout */
.q-mount { display: block; width: 100%; padding-inline: var(--q-gutter, 16px); }
.q-wrap { width: min(100%, 780px); margin: 0 auto; }
.q-head { text-align: center; margin: 0 auto 28px; max-width: 620px; }
.q-eyebrow { margin: 0 0 10px; font: 600 .74rem/1.2 var(--q-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--q-orange); }
.q-title { margin: 0 0 14px; font: 700 clamp(1.9rem, 2.6vw + 1.2rem, 3rem)/1.05 var(--q-display); font-stretch: 112%; letter-spacing: -.02em; color: var(--q-ivory); text-wrap: balance; }
.q-lead { margin: 0; font-size: clamp(1rem, .4vw + .9rem, 1.1rem); line-height: 1.6; color: var(--q-smoke); }

/* ---------- card (glassy dark) */
.q-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 40px) clamp(20px, 3vw, 30px);
  border: 1px solid var(--q-line); border-radius: var(--q-radius-lg);
  background: linear-gradient(165deg, rgba(34, 34, 38, .92), rgba(16, 16, 18, .96));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.q-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--q-orange), rgba(250, 90, 0, .25) 60%, transparent); pointer-events: none; }
.q-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 100% 0%, rgba(250, 90, 0, .12), transparent 70%), radial-gradient(40% 30% at 0% 100%, rgba(255, 255, 255, .03), transparent 70%); }

/* ---------- progress + step line */
.q-progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.q-progress-bar { height: 100%; width: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .6s var(--q-ease);
  background: linear-gradient(90deg, var(--q-orange), var(--q-orange-hi)); box-shadow: 0 0 14px rgba(250, 90, 0, .55); }
.q-stepline { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--q-smoke); }
.q-stepnum { color: var(--q-ivory); font-weight: 600; }
.q-stepline .q-stepname::before { content: '·'; margin-right: 10px; color: var(--q-orange); }

/* ---------- steps */
.q-step { margin-top: 22px; }
.q-step.is-in[data-dir="fwd"] { animation: q-in-fwd .5s var(--q-ease) both; }
.q-step.is-in[data-dir="back"] { animation: q-in-back .5s var(--q-ease) both; }
.q-step.is-in[data-dir="none"] { animation: none; }
@keyframes q-in-fwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes q-in-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.q-step-head { margin-bottom: 18px; }
.q-step-title { margin: 0 0 6px; font: 700 clamp(1.5rem, 1.6vw + 1rem, 2rem)/1.1 var(--q-display); font-stretch: 110%; letter-spacing: -.015em; color: var(--q-ivory); outline: none; }
.q-step-hint { margin: 0; color: var(--q-smoke); line-height: 1.55; font-size: .95rem; }

/* ---------- chips (radio cards) */
.q-group { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.q-legend { padding: 0; margin: 0 0 10px; font-weight: 600; font-size: .95rem; color: var(--q-ivory); }
.q-legend .q-hint { display: block; font-weight: 400; color: var(--q-smoke); font-size: .85rem; margin-top: 2px; }
.q-chips { display: grid; grid-template-columns: 1fr; gap: 10px; }
.q-chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-chips-3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .q-chips-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.q-chip-wrap { position: relative; min-width: 0; }
.q-chip {
  display: flex; align-items: center; gap: 12px; min-height: var(--q-tap); padding: 12px 14px; cursor: pointer; user-select: none;
  border: 1px solid var(--q-line-strong); border-radius: var(--q-radius); background: rgba(255, 255, 255, .035); color: var(--q-ivory);
  transition: border-color .2s, background-color .2s, transform .2s var(--q-ease), box-shadow .2s; -webkit-tap-highlight-color: transparent;
}
.q-chip-tall { min-height: 72px; align-items: center; }
.q-chip .q-ico { color: var(--q-smoke); transition: color .2s; }
.q-chip-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.q-chip-t { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.q-chip-h { font-size: .8rem; line-height: 1.3; color: var(--q-smoke); }
.q-chip:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
.q-chip:active { transform: scale(.985); }
.q-chip::after { content: ''; position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%) scale(0);
  background: var(--q-orange); box-shadow: 0 0 0 3px rgba(250, 90, 0, .25); transition: transform .25s var(--q-ease); }
.q-chip-wrap { position: relative; }
.q-chip { position: relative; padding-right: 34px; }
input:checked + .q-chip { border-color: var(--q-orange); background: rgba(250, 90, 0, .12); box-shadow: 0 0 0 1px var(--q-orange) inset, 0 10px 30px -18px rgba(250, 90, 0, .8); }
input:checked + .q-chip .q-ico { color: var(--q-orange); }
input:checked + .q-chip::after { transform: translateY(-50%) scale(1); }
input:focus-visible + .q-chip { outline: 2px solid var(--q-orange); outline-offset: 3px; }
.q-chips-small { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chips-small .q-chip-wrap { flex: 0 0 auto; }
.q-chips-small .q-chip { min-height: 44px; padding: 8px 14px 8px 12px; gap: 8px; border-radius: 999px; }
.q-chips-small .q-chip .q-ico { width: 16px; height: 16px; }
.q-chips-small .q-chip-t { font-size: .9rem; }
.q-chips-small .q-chip::after { display: none; }
.q-chips-small input:checked + .q-chip { background: var(--q-orange); color: var(--q-black); box-shadow: none; }
.q-chips-small input:checked + .q-chip .q-ico { color: var(--q-black); }
.q-group-countries { margin-top: 20px; }
/* country <select> (every served country; the quick chips above it cover NL BE DE FR TR + "Ander land") */
.q-group-countries .q-other { margin-top: 12px; }
.q-field-select { margin-bottom: 4px; }
.q-field select {
  display: block; width: 100%; min-height: var(--q-tap); padding: 12px 44px 12px 16px; margin: 0; cursor: pointer; color-scheme: dark;
  font: 500 1.05rem/1.4 var(--q-ui); color: var(--q-ivory); -webkit-appearance: none; appearance: none;
  border: 1px solid var(--q-line-strong); border-radius: var(--q-radius);
  background: rgba(0, 0, 0, .35) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7a7ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center / 18px 18px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.q-field select:hover { border-color: rgba(255, 255, 255, .26); }
.q-field select:focus { outline: none; border-color: var(--q-orange); box-shadow: 0 0 0 3px rgba(250, 90, 0, .28); }
.q-field select option { color: #f4f1ec; background: #141416; }
.q-group.is-invalid .q-chip { border-color: rgba(255, 176, 32, .6); }

/* ---------- text fields */
.q-field { margin: 0 0 16px; min-width: 0; }
.q-label { display: block; margin: 0 0 8px; font-weight: 600; font-size: .95rem; color: var(--q-ivory); }
.q-field input, .q-field textarea {
  display: block; width: 100%; min-height: var(--q-tap); padding: 14px 16px; margin: 0;
  font: 500 1.05rem/1.4 var(--q-ui); color: var(--q-ivory); -webkit-appearance: none; appearance: none;
  border: 1px solid var(--q-line-strong); border-radius: var(--q-radius); background: rgba(0, 0, 0, .35);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.q-field textarea { resize: vertical; min-height: 96px; }
.q-field input::placeholder, .q-field textarea::placeholder { color: rgba(167, 167, 173, .6); }
.q-field input:hover, .q-field textarea:hover { border-color: rgba(255, 255, 255, .26); }
.q-field input:focus, .q-field textarea:focus { outline: none; border-color: var(--q-orange); box-shadow: 0 0 0 3px rgba(250, 90, 0, .28); background: rgba(0, 0, 0, .5); }
.q-field input[type="date"], .q-field input[type="time"] { color-scheme: dark; }
.q-field input[type="date"]::-webkit-calendar-picker-indicator, .q-field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
.q-field.is-invalid input, .q-field.is-invalid textarea { border-color: var(--q-amber); }
.q-hint-below { margin: 8px 0 0; font-size: .82rem; line-height: 1.45; color: var(--q-smoke); }
.q-err { margin: 8px 0 0; font-size: .88rem; font-weight: 600; color: var(--q-amber); }
.q-summary { margin: 4px 0 0; font-size: .88rem; font-weight: 600; color: var(--q-amber); }
.q-other { margin-top: 4px; animation: q-fade .35s var(--q-ease) both; }
@keyframes q-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 480px) { .q-row { grid-template-columns: 1.3fr 1fr; } }

/* ---------- geolocation */
.q-geo { margin: 0 0 18px; }
.q-btn-geo { width: 100%; justify-content: center; background: rgba(250, 90, 0, .08); color: var(--q-ivory); border: 1px dashed rgba(250, 90, 0, .55); }
.q-btn-geo:hover { background: rgba(250, 90, 0, .16); border-color: var(--q-orange); }
.q-btn-geo .q-ico { color: var(--q-orange); }
.q-btn-geo.is-busy { opacity: .85; cursor: progress; }
.q-geo-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--q-smoke); }
.q-geo-msg { margin: 10px 0 0; font-size: .9rem; line-height: 1.45; color: var(--q-ivory); }
.q-geo-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 12px 14px; border-radius: var(--q-radius);
  border: 1px solid rgba(250, 90, 0, .5); background: rgba(250, 90, 0, .1); font-size: .95rem; }
.q-geo-ok .q-ico { color: var(--q-orange); width: 18px; height: 18px; }
.q-geo-ok a { color: var(--q-ivory); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- buttons */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--q-tap); padding: 12px 22px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  font: 700 1rem/1.2 var(--q-ui); letter-spacing: .005em; transition: transform .2s var(--q-ease), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.q-btn .q-ico { width: 20px; height: 20px; }
.q-btn-primary { background: var(--q-orange); color: var(--q-black); box-shadow: 0 14px 34px -14px rgba(250, 90, 0, .85); }
.q-btn-primary:hover { background: var(--q-orange-hi); transform: translateY(-1px); box-shadow: 0 18px 38px -14px rgba(250, 90, 0, .95); }
.q-btn-primary:active { transform: translateY(0) scale(.99); }
.q-btn-ghost { background: rgba(255, 255, 255, .04); color: var(--q-ivory); border-color: var(--q-line-strong); }
.q-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.q-btn.is-ok { background: var(--q-wa); color: var(--q-black); border-color: var(--q-wa); }
.q-btn:disabled { cursor: default; }
.q-btn:focus-visible, .q-link:focus-visible, .q-bar-btn:focus-visible, .q-pill:focus-visible, .q-done-pre:focus-visible, .q-done:focus-visible,
.q-callline-tel:focus-visible, .q-geo-ok a:focus-visible, .q-done-details summary:focus-visible { outline: 2px solid var(--q-orange); outline-offset: 3px; }
.q-link { background: none; border: 0; padding: 4px 2px; cursor: pointer; font: 600 .9rem/1.3 var(--q-ui); color: var(--q-ivory); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(250, 90, 0, .7); }
.q-link:hover { color: var(--q-orange); }
.q-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.q-nav .q-next { flex: 1 1 auto; min-width: 0; }
.q-nav .q-back { flex: 0 0 auto; padding-inline: 18px 20px; }
.q-nav .q-skip { flex: 1 0 100%; text-align: center; color: var(--q-smoke); }
.q-send { font-size: 1.05rem; }
.q-send .q-ico { width: 22px; height: 22px; }

/* ---------- every step: or call / 112 */
.q-callline { margin: 18px 0 0; text-align: center; font-size: .92rem; line-height: 1.7; color: var(--q-smoke); }
.q-callline-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--q-ivory); font-weight: 700; text-decoration: none; white-space: nowrap; min-height: 32px; }
.q-callline-tel .q-ico { width: 16px; height: 16px; color: var(--q-orange); }
.q-callline-tel:hover { color: var(--q-orange); }
.q-callline-112 { color: var(--q-amber); font-weight: 600; white-space: nowrap; }
.q-trust { margin: 10px 0 0; text-align: center; font-size: .78rem; line-height: 1.5; color: var(--q-smoke); }

/* ---------- review (step 6) */
.q-review { margin: 6px 0 4px; padding: 4px 0 0; border-top: 1px solid var(--q-line); }
.q-review-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'dt edit' 'dd edit'; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--q-line); }
.q-review dt { grid-area: dt; margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--q-smoke); }
.q-review dd { grid-area: dd; margin: 0; font-size: .95rem; line-height: 1.4; color: var(--q-ivory); overflow-wrap: anywhere; }
.q-review-edit { grid-area: edit; min-height: 40px; }

/* ---------- confirmation (honest) */
.q-done { text-align: center; outline: none; animation: q-fade .5s var(--q-ease) both; }
.q-done-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 6px 0 16px; border-radius: 50%;
  background: var(--q-wa); color: var(--q-black); box-shadow: 0 20px 44px -18px rgba(37, 211, 102, .8); }
.q-done-ico .q-ico { width: 34px; height: 34px; }
.q-done-title { margin: 0 0 10px; font: 700 clamp(1.35rem, 1.4vw + 1rem, 1.8rem)/1.15 var(--q-display); font-stretch: 110%; letter-spacing: -.01em; text-wrap: balance; }
.q-done-body { margin: 0 auto 6px; max-width: 520px; line-height: 1.6; color: var(--q-ivory); }
.q-done-alt { margin: 0 auto 20px; max-width: 520px; line-height: 1.55; font-size: .92rem; color: var(--q-smoke); }
.q-done-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .q-done-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; } }
.q-done-details { margin: 18px 0 0; text-align: left; border: 1px solid var(--q-line); border-radius: var(--q-radius); background: rgba(0, 0, 0, .35); }
.q-done-details summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: .92rem; color: var(--q-ivory); list-style: none; display: flex; align-items: center; gap: 10px; }
.q-done-details summary::-webkit-details-marker { display: none; }
.q-done-details summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--q-orange); border-bottom: 2px solid var(--q-orange); transform: rotate(-45deg); transition: transform .25s; }
.q-done-details[open] summary::before { transform: rotate(45deg); }
.q-done-msg { padding: 0 16px 16px; }
.q-done-pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .9rem/1.6 var(--q-ui); color: var(--q-ivory);
  background: rgba(255, 255, 255, .03); border: 1px dashed var(--q-line-strong); border-radius: 12px; }
.q-done-again { margin-top: 18px; color: var(--q-smoke); }

/* ---------- mini (hero card) */
.q-mini { display: block; width: 100%; }
.q-mini-eyebrow { margin-bottom: 6px; }
.q-mini-title { margin: 0 0 12px; font: 700 clamp(1.15rem, 1.2vw + .9rem, 1.4rem)/1.2 var(--q-display); font-stretch: 110%; letter-spacing: -.01em; color: var(--q-ivory); }.q-chips-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.q-chips-mini .q-chip { min-height: 50px; padding: 8px 30px 8px 12px; gap: 10px; border-radius: 14px; }
.q-chips-mini .q-chip .q-ico { width: 20px; height: 20px; }
.q-chips-mini .q-chip-t { font-size: .92rem; }
.q-chips-mini .q-chip::after { right: 12px; width: 8px; height: 8px; }
.q-mini-hint { margin: 0 0 10px; }
.q-mini-next { width: 100%; }
@media (min-width: 560px) { .q-mini-next { width: auto; min-width: 200px; } }

/* ---------- sticky mobile action bar */
.q-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 10, 11, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--q-line); animation: q-bar-in .55s var(--q-ease) both;
}
@keyframes q-bar-in { from { transform: translateY(100%); } to { transform: none; } }
.q-bar-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 4px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .04); color: var(--q-ivory); font: 600 .74rem/1 var(--q-ui); letter-spacing: .02em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.q-bar-btn:active { background: rgba(255, 255, 255, .1); }
.q-bar-btn .q-ico { width: 22px; height: 22px; }
.q-bar-wa .q-ico { color: var(--q-wa); }
.q-bar-quote { background: var(--q-orange); color: var(--q-black); font-weight: 700; }
.q-bar-quote:active { background: var(--q-orange-hi); }
html.q-bar-on { --d-bar-h: calc(76px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom: 90px; }
html.q-bar-on body { padding-bottom: var(--d-bar-h); }   /* footer links stay reachable above the bar */
@media (min-width: 769px) { .q-bar { display: none !important; } }

/* ---------- floating WhatsApp (desktop, after the intro) */
.q-pill {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px;
  border-radius: 999px; border: 1px solid var(--q-line-strong); background: rgba(20, 20, 22, .82); color: var(--q-ivory); text-decoration: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 600 .9rem/1 var(--q-ui); box-shadow: 0 20px 48px -22px rgba(0, 0, 0, .9);
  animation: q-pill-in .7s var(--q-ease) both; transition: background-color .25s, color .25s, transform .25s var(--q-ease), border-color .25s;
}
.q-pill .q-ico { width: 24px; height: 24px; color: var(--q-wa); transition: color .25s; }
.q-pill:hover { background: var(--q-wa); border-color: var(--q-wa); color: var(--q-black); transform: translateY(-2px); }
.q-pill:hover .q-ico { color: var(--q-black); }
@keyframes q-pill-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) { .q-pill { display: none !important; } }

/* the intro owns the screen: nothing of ours may float over B's Skip / Bel direct (bottom-right) while locked */
html.flight-lock .q-bar, html.flight-lock .q-pill { display: none !important; }

/* ---------- reduced motion (decorative only; the funnel itself never depends on motion) */
@media (prefers-reduced-motion: reduce) {
  .q-step, .q-bar, .q-pill, .q-other, .q-done { animation: none !important; }
  .q-progress-bar, .q-btn, .q-chip, .q-pill, .q-field input, .q-field textarea { transition: none !important; }
  .q-ico-spin { animation: none; }
}

/* ---------- phones: cards with a hint line go single-column (two columns wrap "Pech langs de weg" over three lines) */
@media (max-width: 520px) {
  .q-chips-2:has(.q-chip-tall) { grid-template-columns: 1fr; }
  .q-chip-tall { min-height: 64px; }
  .q-callline-sep { display: none; }
  .q-callline-112 { display: block; }
}
/* ---------- tiny screens (≤ 360) */
@media (max-width: 380px) {
  .q-chips-2 { grid-template-columns: 1fr; }
  .q-chips-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-chips-mini .q-chip-t { font-size: .85rem; }
  .q-nav .q-back { padding-inline: 14px 16px; }
}