/* Hosting-Finder */

/* hero: one photo, one line, one button, plus the describe shortcut */
.finder-hero { min-height: min(92dvh, 900px); }
.finder-hero h1 { font-size: clamp(42px, 5.6vw, 84px); max-width: 14ch; }
.finder-hero .lead { max-width: 46ch; }
/* the light trails are bright: darken the text side so the line and the input stay readable */
.finder-hero::after { background: linear-gradient(90deg, rgba(11, 31, 51, .78) 0%, rgba(11, 31, 51, .5) 45%, rgba(11, 31, 51, .05) 75%),
  linear-gradient(180deg, rgba(11, 31, 51, .5) 0%, rgba(11, 31, 51, 0) 30%, rgba(11, 31, 51, .7) 100%); }
@media (max-width: 900px) { .finder-hero::after { background: linear-gradient(180deg, rgba(11, 31, 51, .55) 0%, rgba(11, 31, 51, .6) 40%, rgba(11, 31, 51, .9) 100%); } }
@media (prefers-reduced-motion: no-preference) {
  .finder-hero img { animation: f-settle 2.4s var(--ease) both; }
  .finder-hero h1, .finder-hero .lead, .finder-hero .actions, .finder-hero .describe { animation: f-rise 1s var(--ease) both; }
  .finder-hero .lead { animation-delay: .12s; }
  .finder-hero .actions { animation-delay: .22s; }
  .finder-hero .describe { animation-delay: .32s; }
}
@keyframes f-settle { from { transform: scale(1.08); } }
@keyframes f-rise { from { opacity: 0; transform: translateY(28px); } }
.describe { margin-top: clamp(36px, 5vh, 56px); max-width: 780px; }
.describe label { font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, .86); }
.describe-row { display: flex; gap: 12px; align-items: flex-end; margin-top: 6px; }
.describe input { flex: 1; min-width: 0; height: 56px; border: 0; border-bottom: 3px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; padding: 0 2px;
  font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; font-stretch: 104%; border-radius: 0; transition: border-color .25s; }
.describe input::placeholder { color: rgba(255, 255, 255, .5); }
.describe input:focus { outline: none; border-bottom-color: var(--rot); }
.describe-note { color: rgba(255, 255, 255, .72); margin: 12px 0 0; min-height: 1.5em; }
@media (max-width: 640px) {
  .describe-row { flex-direction: column; align-items: stretch; }
  .describe input { font-size: 18px; }
}

/* finder layout: dark board (sticky) beside the four questions */
.finder { padding-top: clamp(40px, 6vw, 88px); }
.finder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }

.board { position: sticky; top: calc(var(--head-h) + 20px); z-index: 5; background: var(--nacht); color: #fff; border-radius: var(--r); padding: 28px 28px 24px; display: grid; gap: 20px; }
.board-count { display: flex; align-items: flex-end; gap: 16px; }
.board-n { font-size: clamp(112px, 11vw, 184px); line-height: .78; color: var(--rot); letter-spacing: -.045em; min-width: 1.1ch; transition: color .3s; }
.board.none .board-n { color: #fff; }
.board-of { font-weight: 800; font-stretch: 110%; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.1; letter-spacing: -.01em; max-width: 9ch; padding-bottom: 4px; }
.trail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.trail li { display: flex; align-items: center; gap: 8px; opacity: .45; transition: opacity .3s; }
.trail li.on { opacity: 1; }
.trail li > span { display: flex; flex-direction: column; line-height: 1.05; }
.trail b { font-size: 28px; }
.trail .t { font-size: 12.5px; color: var(--nebel); }
.trail .ph { font-size: 14px; color: var(--nebel); }
.board-note { color: var(--nebel); margin: 0; }
.field { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; position: relative; min-height: 38px; align-content: flex-start; }
.tile { flex: none; }
.tile .logo-tile { width: 38px; height: 38px; box-shadow: none; }
.tile .logo-tile img { width: 24px; height: 24px; }
.tile .logo-tile b { color: var(--tinte); }
.tile.gone { display: none; }
.tile.ghost { position: absolute; z-index: 2; pointer-events: none; }
.tile.ghost .logo-tile { box-shadow: 0 0 0 2px var(--rot); }
.board-actions { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.board-actions .btn .ph { font-size: 18px; }
.board-reset { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--nebel); font-weight: 600; font-size: 15px; padding: 8px 4px; border-radius: var(--r); }
.board-reset:hover { color: #fff; }

/* the questions: one per screen height */
.step { min-height: calc(100svh - var(--head-h)); display: flex; flex-direction: column; justify-content: flex-start; padding: 56px 0 80px; border-top: 1px solid var(--linie); }
.step:first-child { border-top: 0; padding-top: 0; }
.step-head { display: flex; align-items: baseline; gap: 18px; }
.step-n { font-size: clamp(60px, 6vw, 92px); line-height: .8; color: var(--linie); transition: color .4s; flex: none; }
.step.current .step-n { color: var(--rot); }
.step h2 { font-size: clamp(32px, 3.6vw, 54px); }
.step h2:focus:not(:focus-visible) { outline: none; }
.step-hint { color: var(--granit); margin: 16px 0 28px; max-width: 54ch; }
.step-next { margin-top: 28px; align-self: flex-start; }
.step-next .ph { font-size: 18px; }

.opts { display: grid; gap: 10px; }
.opts-use, .opts-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center; text-align: left; padding: 18px 20px; min-height: 88px;
  border: 0; border-radius: var(--r); background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie);
  transition: background .2s, color .2s, box-shadow .2s, opacity .3s, transform .2s var(--ease); }
.opt .ph { grid-row: span 2; font-size: 32px; transition: color .2s; }
.opt-name { font-weight: 800; font-stretch: 108%; font-size: 19px; line-height: 1.15; letter-spacing: -.005em; }
.opt-count { font-size: 14px; color: var(--granit); }
.opt-count b { font-size: 19px; color: var(--tinte); margin-right: 2px; }
.opt:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.opt:active { transform: scale(.99); }
.opt[aria-pressed="true"] { background: var(--tinte); color: #fff; box-shadow: none; }
.opt[aria-pressed="true"] .ph { color: var(--rot); }
.opt[aria-pressed="true"] .opt-count, .opt[aria-pressed="true"] .opt-sub { color: var(--nebel); }
.opt[aria-pressed="true"] .opt-count b { color: #fff; }
.opt.zero:not([aria-pressed="true"]) { opacity: .5; }
.opt.wide { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 92px; }
.opt.wide .ph { grid-row: auto; }
.opt-text { display: grid; gap: 2px; }
.opt-sub { font-size: 14.5px; color: var(--granit); line-height: 1.35; }
.opt.wide .opt-count { text-align: right; white-space: nowrap; }

/* budget: the big figure, a dot plot of prices, the slider */
.budget { margin-top: 24px; max-width: 720px; }
.budget-out { display: block; font-weight: 800; font-stretch: 110%; font-size: clamp(22px, 2vw, 28px); margin-bottom: 18px; }
.budget-out .num { font-size: clamp(64px, 7vw, 112px); line-height: .9; color: var(--rot); letter-spacing: -.03em; }
.ticks { display: flex; align-items: flex-end; gap: 2px; min-height: 40px; padding: 0 2px; }
.ticks .col { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; min-width: 0; }
.ticks i { width: 100%; max-width: 14px; aspect-ratio: 1; background: var(--tinte); border-radius: 1px; transition: background .3s; }
.ticks i.over { background: var(--linie); }
.budget input[type="range"] { margin-top: 6px; }
.budget-scale { display: flex; justify-content: space-between; color: var(--granit); margin-top: 2px; }
.budget .step-hint { margin: 14px 0 0; min-height: 3em; }

/* results */
.res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.res-head h2:focus:not(:focus-visible) { outline: none; }
.res-head .lead { margin: 16px 0 0; }
.top3 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.top3 .first { grid-row: span 2; }
.top3.n1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.top3.n1 .first, .top3.n2 .first { grid-row: auto; }
.top-card { padding: 24px 24px 20px; overflow: hidden; }
.top-card .top { position: relative; z-index: 1; padding-right: 64px; }
.top-card .rank { position: absolute; right: 20px; top: 14px; font-size: 64px; line-height: 1; color: var(--linie); }
.top-card .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-top: 6px; font-size: 14px; }
.top-card .reason { margin: 0; font-size: 17px; line-height: 1.45; }
.top-card .price { font-size: 34px; line-height: 1; }
.top-card .acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.top-card .foot { flex-wrap: wrap; }
.top-card.first { background: var(--nacht); color: #fff; box-shadow: none; padding: clamp(24px, 3vw, 40px); gap: 20px; }
.top-card.first:hover { box-shadow: var(--shadow); }
.top-card.first .top { padding-right: 120px; }
.top-card.first .rank { font-size: clamp(120px, 12vw, 200px); line-height: .8; color: var(--rot); top: 20px; right: 28px; letter-spacing: -.04em; }
.top-card.first h3 { font-size: clamp(28px, 3vw, 42px); }
.top-card.first .reason { font-size: clamp(19px, 1.7vw, 23px); max-width: 30ch; margin-top: auto; }
.top-card.first .price { font-size: clamp(52px, 5vw, 76px); }
.top-card.first .price small, .top-card.first .zone { color: var(--nebel); }
.top-card.first .cmp:hover { background: rgba(255, 255, 255, .1); }
.rest-h { margin: clamp(40px, 5vw, 64px) 0 14px; font-size: clamp(21px, 1.9vw, 26px); }
.rest { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.rest-row { display: grid; grid-template-columns: 48px minmax(0, 1.2fr) minmax(0, 1.4fr) auto auto; gap: 6px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.rest-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rest-row .who a { font-weight: 800; font-stretch: 108%; font-size: 18px; text-decoration: none; }
.rest-row .who a:hover { color: var(--rot); }
.rest-row .plan { color: var(--granit); font-size: 15px; }
.rest-row .price { font-size: 26px; text-align: right; white-space: nowrap; }
.empty { border-top: 2px solid var(--tinte); padding: 24px 0 8px; }
.empty p { font-size: 19px; }
.empty .chip b { font-weight: 700; }
.results .disclosure { margin-top: clamp(32px, 4vw, 48px); max-width: 80ch; }

/* tablet and phone: the board becomes a sticky bar under the header */
@media (max-width: 900px) {
  .finder { padding-top: 0; }
  .finder-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .board { top: var(--head-h); z-index: 30; margin: 0 calc(var(--gut) * -1); border-radius: 0; padding: 12px var(--gut) 14px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; }
  .board-count { gap: 10px; align-items: center; }
  .board-n { font-size: 56px; line-height: .85; }
  .board-of { font-size: 15px; max-width: 11ch; padding: 0; }
  .trail, .board-note, .board-reset { display: none; }
  .board-actions { grid-column: 2; grid-row: 1; }
  .board-actions .btn { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .field { grid-column: 1 / -1; flex-wrap: nowrap; overflow: hidden; gap: 4px; min-height: 30px; }
  .tile .logo-tile { width: 30px; height: 30px; }
  .tile .logo-tile img { width: 20px; height: 20px; }
  .step { min-height: calc(100svh - var(--head-h) - 130px); padding: 40px 0 56px; scroll-margin-top: 124px; }
  .step:first-child { padding-top: 40px; }
  .top3 { grid-template-columns: minmax(0, 1fr); }
  .top3 .first { grid-row: auto; }
}
@media (max-width: 640px) {
  .opts-use, .opts-needs { grid-template-columns: minmax(0, 1fr); }
  .opt { min-height: 72px; padding: 14px 16px; }
  .opt.wide { grid-template-columns: auto minmax(0, 1fr); }
  .opt.wide .ph { grid-row: span 2; }
  .opt.wide .opt-count { grid-column: 2; text-align: left; }
  .board-actions .btn span { display: none; }
  .board-actions .btn { width: 44px; padding: 0; }
  .top-card.first .top { padding-right: 70px; }
  .top-card.first .rank { font-size: 96px; right: 18px; }
  .top-card .acts { justify-content: flex-start; }
  .rest-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .rest-row .logo-tile { width: 40px; height: 40px; }
  .rest-row .plan { grid-column: 2 / -1; grid-row: 2; }
  .rest-row .price { grid-column: 3; grid-row: 1; font-size: 22px; }
  .rest-row .cmp { grid-column: 2; grid-row: 3; justify-self: start; padding-left: 0; }
}