/* v5 (31.10.2026): specification first. The signal colour moves from purchasing to specification,
   purchasing becomes the quiet ink grey. Plus the band "Two ways into a project" and the switch Specifying now | Buying now. */

/* ---------- Fenster: Spezifikation = Signal, Einkauf = Grau ---------- */
.wbar i.ws,.wlg i.ws,.sf .wbar i.ws,.sf .wlg i.ws,.tc-w .ws{background:var(--signal)!important}
.wbar i.wb,.wlg i.wb,.sf .wbar i.wb,.sf .wlg i.wb,.tc-w .wb{background:#8A8E94!important}
.wst.spec{background:var(--signal-tint)!important;border-left-color:var(--signal)!important}
.wst.buy{background:var(--paper-2)!important;border-left-color:var(--ink)!important}
#rail .ri .wt.spec,#card .wt.spec{color:var(--signal)!important;font-family:var(--ui)!important;font-style:normal;font-weight:500}
#rail .ri .wt.buy,#card .wt.buy{color:var(--ink)!important}
.tc-badge i{background:#8A8E94;box-shadow:0 0 0 3px rgba(138,142,148,.22)}
.tc-badge.spec i{background:var(--signal);box-shadow:0 0 0 3px rgba(201,138,10,.22)}

/* ---------- Umschalter Specifying now | Buying now (Karten und Territory) ---------- */
.wsw{display:inline-flex;gap:2px;background:rgba(21,23,27,.06);border-radius:3px;padding:3px;margin:8px 0 10px}
.wsw button{border:0;background:transparent;color:var(--muted);font-family:var(--ui);font-size:13px;padding:6px 10px;border-radius:2px;cursor:pointer;white-space:nowrap}
.wsw button.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.wsw button em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:5px}
.wsw button.on em{color:var(--signal)}
.tc-tabs{margin:0}
.tc-tabs button{font-size:14px;padding:8px 12px}
[data-wl][hidden]{display:none!important}

/* ---------- Two ways into a project ---------- */
.moments{margin-top:48px;border-top:1px solid var(--line-strong);padding-top:22px}
.mo-h h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.15;margin:0}
.mo-h p{font-size:15.5px;color:var(--ink-2);max-width:66ch;margin:10px 0 0;line-height:1.55}
/* 01.11.2026 (v5e): timeline. Ruler, rail with both bands, phase line on one axis; below it the two windows as aligned blocks. No guide lines. */
.mo-n{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:26px}
.mo-tot{font-size:14px;color:var(--muted);line-height:1.2}
.mo-n .tsel{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);max-width:100%}
.mo-n .tsel span{white-space:nowrap}
.mo-n select{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink);min-width:0}
.mo-x{margin-top:30px}
.mo-u{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mo-ms{position:relative;height:24px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--ink-2)}
.mo-ms span{position:absolute;top:0;transform:translateX(-50%);transition:left .45s ease,opacity .25s}
.mo-ms span::after{content:"";position:absolute;left:50%;top:18px;width:1px;height:6px;background:var(--veil)}
.mo-ms span.first{transform:none}
.mo-ms span.first::after{left:0}
.mo-ms span.off{opacity:0}
.mo-rail{display:grid;gap:2px;background:var(--paper);padding:2px 0}
.mo-tr{position:relative;height:34px}
.mo-tr i{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;font-style:normal;font-size:12.5px;font-weight:500;white-space:nowrap;transition:left .45s ease,width .45s ease}
.mo-tr i span{padding:0 12px}
.mo-tr.sp i{background:var(--signal);color:var(--ink)}
.mo-tr.by i{background:var(--ink);color:var(--paper)}
/* phases as in the sample file (.sx-steps), dots on the line. A phase cut off by the axis fades in without a dot */
.mo-st{position:relative;list-style:none;margin:12px 0 0;padding:0;height:40px;font-size:13px;color:var(--muted);line-height:1.25}
.mo-st li{position:absolute;top:0;box-sizing:border-box;padding:18px 10px 0 0;min-width:0;transition:left .45s ease,width .45s ease,opacity .25s}
.mo-st li::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--line)}
.mo-st li::after{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--veil);box-sizing:border-box}
.mo-st li.cut::before{background:linear-gradient(90deg,transparent,var(--line) 56px)}
.mo-st li.cut::after{display:none}
.mo-st li.off{opacity:0}
.mo-st li.end{left:auto;right:0;width:auto;padding:18px 0 0;white-space:nowrap;color:var(--ink)}
.mo-st li.end::before{display:none}
.mo-st li.end::after{left:auto;right:0;background:var(--ink);border-color:var(--ink)}
.mo-bl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:30px}
.mo-t{display:flex;flex-direction:column;align-items:flex-start;border-top:3px solid var(--ink);padding-top:14px}
.mo-t.sp{border-top-color:var(--signal)}
.mo-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.mo-c{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:14px}
.mo-c b{font-family:var(--display);font-weight:300;font-size:52px;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.mo-l{font-size:13.5px;color:var(--muted)}
.mo-z{font-size:14.5px;font-weight:500;color:var(--ink);margin-top:14px}
.mo-t p{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin:4px 0 16px;max-width:52ch}
.mo-t .btn,.mo-t .dlink{margin-top:auto}
.mo-t .dlink{background:none;border:0;padding:0;font:inherit;font-size:14px;line-height:32px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mo-f{font-size:12.5px;color:var(--muted);margin:26px 0 0;max-width:90ch}
@media (prefers-reduced-motion:reduce){.mo-x *{transition:none!important}}
@media (max-width:820px){
  .mo-h h3{font-size:24px}
  .tc-tabs button{font-size:13px;padding:7px 9px}
}
@media (max-width:720px){
  .mo-bl{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:26px}
  .mo-c b{font-size:44px}
}
@media (max-width:600px){
  .mo-tr{height:22px}
  .mo-tr i span{display:none}
  .mo-st{font-size:11.5px;height:46px}
  .mo-st li{padding-right:6px}
  .mo-ms{font-size:11px}
}

/* ---------- 01.11.2026 (v5e): page, small and safe ---------- */
/* one section rule across the full column instead of rules as long as the heading happens to be */
.sec-head,.whead,.phead2{border-top:1px solid var(--line-strong);padding-top:20px}
.sec-head h2,.whead h2,.phead2 h2{border-top:0!important;padding-top:0!important}
.whead p,.phead2 .plead{margin-top:0}
#players .phead2{border-top-color:rgba(245,242,236,.32)}
/* heads of the small columns: same weight as the rest of the display type */
.dir h3,.alt h3,.sec h3{font-weight:400}
/* "Your trade" stays on one line */
.tsel>span,.tsel>label{white-space:nowrap}
/* three steps: equal image widths, the rule above the foot on one line */
@media (min-width:901px){
  .alt3{grid-template-columns:calc((100% - 112px)/3 + 28px) calc((100% - 112px)/3 + 56px) calc((100% - 112px)/3 + 28px)!important}
  .alt3 .alt:last-child{padding-right:0!important}
  .alt3 .alt .price{min-height:50px;box-sizing:border-box}
}
/* plans: wrapped cells no longer touch the row lines; on the phone the table scrolls instead of squeezing */
.ptable td{padding-top:8px;padding-bottom:8px}
.ptable td.n,table td.n{white-space:nowrap}
@media (max-width:720px){
  table.ptable{min-width:760px}
  .ptable tr.cta .btn{white-space:nowrap;padding-left:8px;padding-right:8px}
}

/* ---------- 01.11.2026 (v5e): One contact. Page palette on ink, teal goes; numbers as in the number band ---------- */
#players{--s-teal-l:#B8BCC2}
#players .prank li{padding:14px 0!important;gap:12px;grid-template-columns:24px minmax(0,1fr) auto!important}
#players .prank li:not([data-co]){cursor:default}
#players .prank li:not([data-co]):hover{background:none!important}
#players .prank li.on,#players .prank li[data-co]:hover{background:rgba(245,242,236,.06)!important;box-shadow:-10px 0 0 rgba(245,242,236,.06),10px 0 0 rgba(245,242,236,.06)!important}
#players .prank li.on .pn{color:var(--s-on-ink)}
#players .prank em{padding-right:0}
#players .prank em b{font-size:30px;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
#players .prank .pt small,#players .prank em small{color:rgba(245,242,236,.6)}
.pbar2{gap:2px;height:3px}
.pbar2 i.t{background:rgba(184,188,194,.55)}
.rs-h{gap:12px}
.rs-h b{font-size:64px;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.rs-h span{font-size:15px;color:rgba(245,242,236,.8)}
.rs-s{font-family:var(--ui);font-size:13.5px;margin-top:10px;color:rgba(245,242,236,.6)}
.rs-sw{border-color:rgba(245,242,236,.24)}
/* sheet: label, squares, count; no tree lines. Rows sort filled before outline, so a row reads as two calm parts */
.rs-rows{border-top:1px solid rgba(245,242,236,.32)}
.rs-r{grid-template-columns:150px minmax(0,1fr) 52px;gap:18px;padding:12px 0;border-bottom:1px solid rgba(245,242,236,.1)}
.rs-r::before,.rs-r::after,.rs-r.own .rs-l b::before{display:none}
.rs-r.own{padding-left:0}
.rs-r[data-co]:hover{background:rgba(245,242,236,.04)}
.rs-l small{color:rgba(245,242,236,.55);min-height:0}
.rs-q{max-width:none;gap:3px;padding-top:4px}
.rs-q i{width:8px;height:8px;box-shadow:inset 0 0 0 1px rgba(184,188,194,.75)}
.rs-q i.f{background:#B8BCC2;box-shadow:none}
.rs-r.own .rs-q i{box-shadow:inset 0 0 0 1px var(--s-on-ink)}
.rs-r.own .rs-q i.f{background:var(--s-on-ink);box-shadow:none}
.rs-q i[data-p]:hover{outline:1px solid var(--s-on-ink)}
.rs-q em{line-height:8px}
.rs-n{font-family:var(--display);font-weight:300;font-size:22px;line-height:1.1;text-align:right;color:var(--s-on-ink);font-variant-numeric:lining-nums tabular-nums}
.rs-t{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 0;border-top:1px solid rgba(245,242,236,.32);margin-top:-1px;font-size:13.5px;color:rgba(245,242,236,.8)}
.rs-t b{font-family:var(--display);font-weight:300;font-size:30px;line-height:1;color:var(--s-on-ink);font-variant-numeric:lining-nums tabular-nums}
.rs-lg{margin-top:12px;color:rgba(245,242,236,.6)}
.rs-lg i{box-shadow:inset 0 0 0 1px #B8BCC2}
.rs-lg i.f{background:#B8BCC2;box-shadow:none}
.rs-none{padding-left:0}
#rs-net{border-color:rgba(245,242,236,.14)}
.rs-nlg i.pp{background:#B8BCC2}
@media (max-width:600px){
  .rs-h b{font-size:52px}
  .rs-r{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .rs-r .rs-q{grid-column:1/-1;grid-row:2}
  .rs-r.pa:nth-of-type(n+7){display:grid}
  .rs-q i{width:6px;height:6px}
  .rs-q{gap:2px}
}
/* head rows after the common rule: heading and lead start on one line */
.phead2,.whead{align-items:start!important}
/* the rule of .sec-head spans the column, text keeps its measure */
.sec-head{max-width:none!important}
.sec-head>h2,.sec-head>p{max-width:640px}
@media (min-width:1300px){section.stats .wrap>div:first-child{padding-left:23px!important}}
.wcard.big b{font-weight:400!important}
.mo-ms span.off{transform:none}
.mo-st li[data-b="0"]{padding-right:64px}
.rs-r{grid-template-columns:170px minmax(0,1fr) 52px}
@media (max-width:600px){.rs-r{grid-template-columns:minmax(0,1fr) auto}}
.dtrade>span{white-space:nowrap}