/* FELDZUG – reward bonus blocks (page /boni, start page section "Gemeinsam spielen lohnt sich"). Loaded after site.css.
   Three source colours, the same as in the game: group = gold, premium = amber, premium in the team = teal.
   Bars get their width/height from CSS custom properties written by bonus.js through the CSSOM (CSP: no style attributes). */
:root {
  --b-g: #b8890f; --b-p: #c2650c; --b-t: #1d8574;           /* fills (light) */
  --b-g-ink: #6f5207; --b-p-ink: #8a4306; --b-t-ink: #135d51; /* text on light */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --b-g: #f0c94e; --b-p: #ffab52; --b-t: #6fd3c1; --b-g-ink: #f3d77a; --b-p-ink: #ffc07a; --b-t-ink: #8fe0d1; }
}
:root[data-theme="dark"] { --b-g: #f0c94e; --b-p: #ffab52; --b-t: #6fd3c1; --b-g-ink: #f3d77a; --b-p-ink: #ffc07a; --b-t-ink: #8fe0d1; }

/* ---------------------------------------------------------------- source cards */
.bonus-card { border-top: 3px solid var(--c, var(--gold)); }
.bonus-card.g { --c: var(--b-g); --ci: var(--b-g-ink); }
.bonus-card.p { --c: var(--b-p); --ci: var(--b-p-ink); }
.bonus-card.t { --c: var(--b-t); --ci: var(--b-t-ink); }
.bonus-card h3 { color: var(--ci); margin-top: .2rem; }
.bc-num { margin: 0; font: 400 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--serif); color: var(--ci); font-variant-numeric: tabular-nums; }
.bc-num .pre { font: 600 .78rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); vertical-align: middle; }
.nofight { display: flex; gap: .8rem; align-items: flex-start; margin: 1.8rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--glass); }
.nofight .icon { flex: none; color: var(--accent); margin-top: .1rem; }
.nofight b { color: var(--accent); }

/* ---------------------------------------------------------------- table */
#bonus-table td.strong { color: var(--b-p-ink); font-weight: 700; }
#bonus-table tr.solo td:nth-of-type(1) { color: var(--ink-2); }
#bonus-table th .chip.tiny, .chip.tiny { margin-left: .5rem; padding: .15rem .45rem; font-size: .62rem; vertical-align: middle; }

/* ---------------------------------------------------------------- calculator */
.calc-split { align-items: start; }
.calc-split > *, .teamplay .split > * { min-width: 0; }
.bonus-calc .btn-row, .block .btn-row { margin-top: 1.4rem; }
@media (min-width: 60rem) { .calc-split { grid-template-columns: 1fr 1.05fr; } }
.bonus-calc fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.bonus-calc legend { font: 600 .78rem/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; padding: 0; }
.seg-row { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.seg-row input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg-row label { margin: 0; display: grid; place-items: center; min-height: 2.9rem; padding: .4rem; cursor: pointer; color: var(--ink); text-align: center;
  border-left: 1px solid var(--line); transition: background var(--t-fast), color var(--t-fast); }
.seg-row label:first-of-type { border-left: 0; }
.seg-row label:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.seg-row input:checked + label { background: linear-gradient(180deg, color-mix(in srgb, var(--b-g) 38%, transparent), color-mix(in srgb, var(--b-g) 18%, transparent)); color: var(--ink); box-shadow: inset 0 -2px 0 var(--b-g); }
.seg-row input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -3px; }
.bonus-calc .check { margin: 0 0 .8rem; }
.bonus-calc .check input { margin-top: .15rem; flex: none; }
.bc-result { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.bc-label { margin: 0; font: 600 .78rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.bc-total { display: block; font: 400 clamp(3rem, 2.4rem + 2.6vw, 4.4rem)/1.05 var(--serif); color: var(--accent); }
.bc-total.zero { color: var(--ink-3); }
.bc-bar, .bx-bar { display: flex; height: .6rem; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 9%, transparent); margin: .6rem 0 .9rem; }
.bc-bar i, .bx-bar i { display: block; width: var(--w, 0%); height: 100%; transition: width .5s var(--ease); }
.bc-bar .g, .bx-bar .g { background: var(--b-g); }
.bc-bar .p, .bx-bar .p { background: var(--b-p); }
.bc-bar .t, .bx-bar .t { background: var(--b-t); }
.bc-parts { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.bc-parts li { display: flex; gap: .55rem; align-items: center; }
.bc-parts li::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink-3); flex: none; }
.bc-parts li.g::before { background: var(--b-g); } .bc-parts li.p::before { background: var(--b-p); } .bc-parts li.t::before { background: var(--b-t); }
.bc-parts li.none { color: var(--ink-2); }

/* ---------------------------------------------------------------- examples */
.bonus-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bonus-examples li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(4rem, 1fr) auto; gap: .4rem 1.2rem; align-items: center; padding: .8rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); }
.bonus-examples li.zero { opacity: .75; }
.bx-label { display: grid; gap: .1rem; min-width: 0; }
.bx-label small { font-size: .82rem; }
.bx-bar { margin: 0; }
.bx-total { font: 400 1.6rem/1 var(--serif); color: var(--accent); min-width: 4.2rem; text-align: right; }
@media (max-width: 36rem) {
  .bonus-examples li { grid-template-columns: 1fr auto; }
  .bonus-examples .bx-bar { grid-column: 1 / -1; grid-row: 2; }
}
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend span::before { content: ""; width: .7rem; height: .7rem; border-radius: 2px; }
.legend .g::before { background: var(--b-g); } .legend .p::before { background: var(--b-p); } .legend .t::before { background: var(--b-t); }

/* ---------------------------------------------------------------- start page: group ladder */
.teamplay .split { align-items: center; }
@media (min-width: 60rem) { .teamplay .split { grid-template-columns: 1.05fr 1fr; } }
.ladder { list-style: none; margin: 0; padding: 1.4rem 1.2rem 1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; align-items: end; min-height: 15rem; }
.ladder li { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: .45rem; height: 100%; }
.ladder .v { font: 400 1.35rem/1 var(--serif); color: var(--b-g-ink); font-variant-numeric: tabular-nums; }
.ladder .col { position: relative; width: min(100%, 3.4rem); height: 100%; min-height: 9rem; border-radius: var(--radius) var(--radius) 0 0; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.ladder .col::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 0%); background: linear-gradient(180deg, var(--b-g), color-mix(in srgb, var(--b-g) 55%, transparent)); transition: height 1s var(--ease); }
.js .ladder:not(.in) .col::after { height: 0; }
.ladder .who { display: flex; gap: 2px; color: var(--ink-2); }
.ladder .who i { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.ladder .n { font: 600 .72rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ladder li:last-child .v { color: var(--accent); }
.ladder li:last-child .col { box-shadow: 0 0 0 1px var(--b-g), 0 0 24px -6px var(--b-g); }
.teamplay .facts { margin-bottom: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .bc-bar i, .bx-bar i, .ladder .col::after { transition: none; }
  .js .ladder:not(.in) .col::after { height: var(--h, 0%); }
}