/* Fixed-price estimator. Loaded only on /preise and /en/prices, because the
   place list it needs is 110 KB and no other page has any use for it.
   Uses the tokens already declared in site.css - no new colours. */

.qform{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:14px;
  align-items:end;
  margin-top:22px;
  max-width:860px;
}
@media (max-width:760px){
  .qform{grid-template-columns:1fr}
}

.qfield{position:relative;display:flex;flex-direction:column;gap:7px}
.qfield label{
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.qfield input{
  font-family:var(--font);font-size:16.5px;color:var(--ink);
  padding:14px 16px;border:1.5px solid var(--line-strong);
  border-radius:11px;background:var(--card);width:100%;
  transition:border-color .16s;
}
.qfield input:hover{border-color:var(--chrome)}
.qfield input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
.qsubmit{white-space:nowrap}
@media (max-width:760px){.qsubmit{width:100%}}

/* The suggestion list. It has to sit above everything below it, and it has to
   stay reachable by keyboard - the mousedown handler in quote.js fires before
   blur so a click never loses the selection. */
.qlist{
  position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:6px;
  list-style:none;padding:6px;background:var(--card);
  border:1.5px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow);max-height:290px;overflow-y:auto;
}
.qlist li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;cursor:pointer;font-size:16px;
}
.qlist li:hover,.qlist li.on{background:var(--accent-soft)}
.qlist li.on{outline:2px solid var(--accent);outline-offset:-2px}
/* NOT .cc - site.css uses that for the fixed-position cookie banner, and a
   span of this class inherits its `position:fixed;bottom:16px` and leaves
   the row entirely. */
.qlist .qsub{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;flex:none;
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The answer. One number, big, with the caveat directly under it - a price
   the customer cannot find the conditions for is worse than no price. */
/* See booking.css: an author display: rule beats the UA rule behind the
   `hidden` attribute, so the empty answer box needs saying twice. */
.qout[hidden]{display:none}
.qout{
  display:flex;flex-direction:column;gap:6px;
  margin-top:22px;padding:22px 24px;border-radius:var(--r);
  background:var(--bg-warm);border:1.5px solid var(--line);max-width:860px;
}
.qout.pub{background:var(--accent-soft);border-color:var(--accent)}
.qout.far{background:var(--bg-warm);border-color:var(--chrome)}
.qroute{font-size:15px;font-weight:700;color:var(--muted)}
.qprice{
  font-size:clamp(38px,7vw,58px);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--accent-dk);
  font-variant-numeric:tabular-nums;
}
.qfar{
  font-size:clamp(28px,5vw,40px);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.qnote{font-size:15px;color:var(--muted);max-width:52ch;line-height:1.5}
#q-cta{margin-top:16px}
.qprivacy{
  margin-top:18px;font-size:13.5px;color:var(--muted);max-width:56ch;
  line-height:1.5;
}
.qbw{color:var(--muted);font-size:13.5px}

/* What the price includes. Two columns where there is room, ticks rather than
   bullets, because every line is something the customer expected to be extra. */
.inclist{
  list-style:none;margin-top:20px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:12px 30px;max-width:900px;
}
.inclist li{
  position:relative;padding-left:30px;font-size:16.5px;line-height:1.5;
}
.inclist li::before{
  content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;
  border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);
  transform:rotate(-45deg);
}

@media (prefers-reduced-motion:reduce){
  .qfield input,.btn{transition:none}
}


/* The small print Ronald asked for: pre-booked, long distance, and no online
   price below the minimum. Deliberately readable rather than hidden - the
   refusal to quote a short trip is a scope statement, not a disclaimer, and a
   customer who reads it before typing is a customer who does not feel
   refused. */
.qsmall{
  font-size:13px;line-height:1.5;color:var(--muted);
  margin:18px 0 0;max-width:62ch;
}
.qprivacy{margin-top:6px}

/* On the home page the estimator IS the pitch, so it gets air. */
.quote-lead .qform{margin-top:26px}
.quote-lead .sec-lead{max-width:60ch}


/* "No personal details needed" - the thing almost no other operator offers,
   said where the visitor is deciding whether to type. A <details>, not a
   hover tooltip: there is no hover on a phone, and most of this traffic is
   phones. Opens on tap, opens on keyboard, reads correctly aloud. */
.qnodata{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:18px 0 0;padding:11px 14px;max-width:62ch;
  border:1.5px solid var(--line);border-radius:11px;background:var(--bg-warm);
}
.qnodata-h{font-size:14.5px;font-weight:700;color:var(--ink)}
.qnodata-d{font-size:13.5px;color:var(--muted)}
.qnodata-d summary{
  cursor:pointer;font-weight:600;color:var(--accent-dk);
  text-decoration:underline;text-underline-offset:2px;
}
.qnodata-d summary::marker{content:""}
.qnodata-d summary::-webkit-details-marker{display:none}
.qnodata-d[open]{flex-basis:100%}
.qnodata-d p{margin:8px 0 0;line-height:1.5;max-width:58ch}