/* /de/hosting-speedtest. Race and lane styles copied from start.css (that file is not loaded here) and extended. */

.sp-hero { min-height: min(84vh, 820px); }
.sp-hero h1 { max-width: 17ch; font-size: clamp(38px, 5.4vw, 80px); }
.sp-hero .crumbs { color: rgba(255, 255, 255, .75); }
.sp-hero .crumbs a:hover { color: #fff; }
.sp-actions { align-items: center; gap: 16px 24px; }
.sp-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-hero .chip { background: rgba(11, 31, 51, .35); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-hero .chip:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.sp-hero .chip[aria-pressed="true"] { background: #fff; color: var(--tinte); }
.sp-hero .chip .n { font-stretch: 68%; font-weight: 700; opacity: .65; }
.sp-hero .chip:disabled { opacity: .5; cursor: default; }
.btn:disabled { opacity: .7; cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .sp-hero img { animation: sp-settle 2.4s var(--ease) both; }
  .sp-hero h1, .sp-hero .lead, .sp-hero .actions { animation: sp-rise 1s var(--ease) both; }
  .sp-hero .lead { animation-delay: .12s; }
  .sp-hero .actions { animation-delay: .24s; }
}
@keyframes sp-settle { from { transform: scale(1.07); } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(26px); } }

/* run band */
.sp-run { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }

/* medians per zone, computed live */
.sp-board { display: grid; grid-template-columns: 3fr 3fr 6fr; gap: 24px clamp(20px, 3vw, 48px); align-items: end; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.sp-zone { display: grid; gap: 8px; align-content: end; min-width: 0; }
.sp-zone .lab { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--nebel); }
.sp-zone .lab .cross { font-size: 18px; }
.sp-zone .lab .ph { font-size: 20px; color: #fff; }
.sp-zone b { font-size: clamp(64px, 8vw, 120px); line-height: .85; letter-spacing: -.03em; min-height: .85em; }
.sp-zone b small { font-size: .26em; font-stretch: 100%; font-weight: 600; color: var(--nebel); margin-left: 6px; letter-spacing: 0; }
.sp-zone.ch b { color: #fff; }
.sp-zone.int b { color: rgba(255, 255, 255, .62); }
.sp-zone .bar { height: 8px; width: var(--w, 0%); border-radius: 1px; transition: width .9s var(--ease); }
.sp-zone.ch .bar { background: var(--rot); }
.sp-zone.int .bar { background: rgba(255, 255, 255, .45); }
.sp-say p { margin: 0; }
.sp-say > p:first-child { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; font-weight: 600; }
.sp-say p.small { color: var(--nebel); margin-top: 10px; min-height: 1.5em; }
.sp-share { margin-top: 18px; }
.sp-share[hidden], .sp-share-text[hidden] { display: none; }
.sp-share span.small { color: var(--nebel); }
.sp-share-text { margin-top: 12px; width: 100%; background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r); padding: 10px 12px; font-size: 14px; resize: vertical; }
@media (max-width: 900px) {
  .sp-board { grid-template-columns: 1fr 1fr; }
  .sp-say { grid-column: 1 / -1; }
  .sp-zone b { font-size: clamp(48px, 13vw, 72px); }
}

.sp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--nebel); margin: 24px 0 0; }
.sp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 18px; height: 8px; border-radius: 1px; display: inline-block; }
.sw.ch { background: rgba(255, 255, 255, .9); }
.sw.int { background: rgba(255, 255, 255, .4); }
.sw.first { background: var(--rot); }

/* race (from start.css) */
.race { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 4px; }
.lane { display: grid; grid-template-columns: 34px minmax(0, 230px) 1fr 112px; gap: 14px; align-items: center; min-height: 44px; }
.lane .pos { font-stretch: 68%; font-weight: 700; color: var(--nebel); font-size: 18px; text-align: right; }
.lane .who { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.lane .who a { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane .who a:hover { color: var(--rot); }
.lane .who img { width: 22px; height: 22px; border-radius: 3px; background: #fff; padding: 2px; flex: none; }
.lane .who .ch-mark { font-size: 12px; flex: none; }
.lane .track { height: 14px; position: relative; }
.lane .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: rgba(255, 255, 255, .4); border-radius: 1px; transition: width .9s var(--ease); }
.lane.ch .fill { background: rgba(255, 255, 255, .9); }
.lane.first .fill { background: var(--rot); }
.lane.idle .track { border-left: 2px solid rgba(255, 255, 255, .5); }
.lane.idle .who { opacity: .75; }
.lane.waiting .fill { width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)) 0 0 / 200% 100%; animation: shimmer 1.1s infinite linear; }
.lane .ms { font-stretch: 68%; font-weight: 700; font-size: 24px; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.05; }
.lane .ms small { font-size: 13px; font-stretch: 100%; font-weight: 500; color: var(--nebel); margin-left: 2px; }
.lane .ms .first-t { display: block; font-size: 11.5px; font-stretch: 100%; font-weight: 500; color: var(--nebel); margin: 2px 0 0; }
.lane.fail .who { opacity: .6; }
@media (max-width: 700px) {
  .lane { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; padding: 4px 0; }
  .lane .track { grid-column: 2 / -1; grid-row: 2; }
  .lane .ms { grid-column: 3; grid-row: 1; font-size: 20px; }
}

/* honest note */
.sp-honest-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.sp-honest h2 { position: sticky; top: calc(var(--head-h) + 24px); font-size: clamp(30px, 3.4vw, 48px); }
.sp-points { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 2px solid var(--tinte); }
.sp-points li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; padding: 22px 0 24px; border-bottom: 1px solid var(--linie); }
.sp-points li::before { content: counter(s, decimal-leading-zero); font-stretch: 68%; font-weight: 700; font-size: 30px; line-height: 1; color: var(--rot); grid-row: span 2; }
.sp-points h3 { font-size: clamp(20px, 1.8vw, 24px); }
.sp-points p { margin: 8px 0 0; color: var(--granit); max-width: 60ch; }
@media (max-width: 900px) { .sp-honest-grid { grid-template-columns: 1fr; } .sp-honest h2 { position: static; } .sp-points li { grid-template-columns: 44px 1fr; } }

.sp-next-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.sp-next h2 { font-size: clamp(30px, 3.4vw, 48px); }
@media (max-width: 900px) { .sp-next-grid { grid-template-columns: 1fr; } }
.sp-zone[hidden] { display: none; }
/* the light trails are bright: darken behind the text */
.sp-hero::after { background: linear-gradient(90deg, rgba(11, 31, 51, .82) 0%, rgba(11, 31, 51, .45) 55%, rgba(11, 31, 51, .1) 100%),
  linear-gradient(180deg, rgba(11, 31, 51, .55) 0%, rgba(11, 31, 51, 0) 30%, rgba(11, 31, 51, .85) 100%); }
@media (max-width: 899px) { .sp-hero::after { background: linear-gradient(180deg, rgba(11, 31, 51, .6) 0%, rgba(11, 31, 51, .62) 40%, rgba(11, 31, 51, .9) 100%); } }