/* Abokalender, Direction B "Spielplan-Poster" (docs/DESIGN.md).
   Service (.s-*) and club (.c-*) colour classes are appended by the build. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/static/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/static/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback for the condensed/expanded cuts while Archivo is not loaded
   (font-display: swap, design review R1 #7): narrower Arial so numbers and months still fit. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Narrow'), local('ArialNarrow'), local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 78%;
}

:root {
  --paper: #ffffff;
  --ink: #0e0e0e;
  --mute: #5e5e5e;
  --rule: #e2e2de;
  --off: #dad9d4;
  --club: var(--ink);
  --club2: var(--ink);
  --gut: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 'Archivo', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.x { font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.n, .grid .mo, .tile .eur, .tile .sq, .k .kdt, .tg button, .sheet .when, .who.cov td, .fx tr.mh th { font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; }
.n { font-stretch: 62%; font-weight: 900; }
.pad { padding: 0 var(--gut); max-width: 1280px; margin: 0 auto; }
.pad.res, .pad.cp { max-width: 1080px; } /* T24: centred result and club column */
/* R1 shell: bars and footer full width, their content on the same centred 1200px line */
.bar, .foot { padding-left: max(var(--gut), calc((100% - 1200px) / 2)); padding-right: max(var(--gut), calc((100% - 1200px) / 2)); }

/* club scarf (R1, A31): color/color2 in four blocks, edged so white and black show */
.scarf { display: flex; flex: none; box-shadow: 0 0 0 1px var(--ink); }
.scarf i { flex: 1; background: var(--club); }
.scarf i:nth-child(even) { background: var(--club2); }
.scarf.v { flex-direction: column; width: 12px; align-self: stretch; }
.scarf.h { width: 56px; height: 18px; box-shadow: 0 0 0 2px #fff; }

/* bars */
.band { height: 15px; background: repeating-linear-gradient(90deg, var(--club) 0 40px, var(--club2) 40px 80px); box-shadow: inset 0 1px 0 var(--ink); border-bottom: 2px solid #fff; }
.bar { background: var(--ink); color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; min-height: 52px; }
/* B17: a long club name wraps by word, and "Verein ändern" moves to its own line instead of overlapping */
.bar h2 { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.bar h2 span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; } /* not the .bar span meta style */
.bar a#change { flex: none; }
.bar b, .bar h2 { font-size: 18px; line-height: 1.1; }
.bar h2:focus { outline: none; }
.bar h2:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bar span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.bar a { color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; min-height: 44px; display: flex; align-items: center; }

/* start */
.hero { font-size: 28px; line-height: 1.1; margin: 20px 0 10px; font-stretch: 100%; text-transform: none; letter-spacing: -0.01em; }
.lede { font-size: 16px; font-weight: 400; line-height: 1.4; max-width: 36em; }
.how { display: none; border: 3px solid var(--ink); }
.how h2 { font-size: 13px; padding: 10px 14px; background: var(--ink); color: #fff; letter-spacing: 0.04em; }
.how ol { list-style: none; }
.how li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--rule); align-items: baseline; }
.how li:first-child { border-top: 0; }
.how li .n { font-size: 34px; line-height: 1; }
.how li b { display: block; font-size: 16px; }
.how li span { font-size: 14px; color: var(--mute); }
.ex { padding: 12px 14px 14px; border-top: 3px solid var(--ink); }
.ex small { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.ex p { font-size: 15px; font-weight: 700; margin-top: 4px; }
.strip { display: flex; gap: 2px; margin-top: 8px; height: 28px; }
.strip i { flex: 1; background: var(--bg); }
.strip i.s-free { box-shadow: inset 0 0 0 2px var(--ink); }
.strip i.vl { background: var(--paper); box-shadow: inset 0 0 0 2px var(--bg); }
.strip i.out { background: var(--off); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border: 3px solid var(--ink); list-style: none; }
.steps li { padding: 6px 8px; font-size: 13px; line-height: 1.25; font-weight: 600; }
.steps li + li { border-left: 1px solid var(--ink); }
.steps .n { font-size: 24px; display: block; line-height: 1; }
.stephead { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; }
.stephead .num { width: 30px; height: 30px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.stephead h2 { font-size: 17px; line-height: 1.05; }
.stephead small { margin-left: auto; font-size: 13px; color: var(--mute); text-align: right; }
.say { font-size: 17px; line-height: 1.35; margin: 12px 0 4px; font-weight: 500; }
.sec { font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.04em; text-transform: uppercase; margin: 26px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sec small { font-weight: 500; font-stretch: 100%; color: var(--mute); letter-spacing: 0; text-transform: none; font-size: 13px; }
.search { display: block; width: 100%; height: 56px; border: 3px solid var(--ink); border-radius: 0; padding: 0 14px; font-size: 16px; margin-top: 12px; background: #fff; max-width: 600px; }
.search::placeholder { color: var(--mute); }
.lg { font-size: 12px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.04em; text-transform: uppercase; margin: 18px 0 6px; }
.clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; list-style: none; }
.club { display: flex; align-items: center; gap: 10px; min-height: 48px; height: 100%; border: 3px solid var(--ink); padding: 4px 8px 4px 4px; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.club:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.none { color: var(--mute); margin-top: 10px; }
.src.about { margin-top: 22px; }


/* poster grid */
.grid { display: grid; grid-template-columns: 44px 1fr; row-gap: 4px; margin-top: 10px; list-style: none; }
.grid .mo { font-stretch: 62%; font-weight: 900; font-size: 22px; line-height: 40px; text-transform: uppercase; border-top: 1px solid var(--ink); }
.grid .ms { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--ink); padding-top: 4px; }
.cell {
  width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 3px 4px; font-size: 15px; font-weight: 800; line-height: 1; position: relative;
  background-color: var(--bg); color: var(--fg); text-align: left;
  transition: background-color 180ms ease-out, color 180ms ease-out;
  transition-delay: calc(var(--i, 0) * 15ms);
}
.cell::before { content: ''; position: absolute; inset: -2px; } /* 44px hit area */
.cell b { padding: 0 2px; margin: -1px -2px; background: var(--bg); font-weight: 800; transition: inherit; }
.cell.s-free { box-shadow: inset 0 0 0 2px var(--ink); }
.cell.est { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, 0.34) 5px 8px); }
.cell.out { --bg: var(--off); --fg: var(--mute); background-image: none; box-shadow: none; }
.cell.sel { outline: 3px solid var(--ink); outline-offset: 2px; z-index: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 10px; color: var(--mute); list-style: none; }
.legend li { display: flex; align-items: center; gap: 5px; }
.legend i { width: 14px; height: 14px; display: inline-block; background: var(--bg); }
.legend i.s-free { box-shadow: inset 0 0 0 2px var(--ink); }
.legend i.h { --bg: #1d4e9e; background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255, 255, 255, 0.5) 3px 5px); }
.legend i.o { --bg: var(--off); }

/* A26 vielleicht, A27 played + heute */
.cell.vl { background-color: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 4px var(--bg); }
.cell.vl b { background: none; } /* T24-2: the numeral never notches the frame */
.cell.vl.est { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--bg) 30%, transparent) 5px 8px); }
.cell.played { --bg: var(--paper); --fg: var(--mute); background-image: none; box-shadow: inset 0 0 0 1px var(--paper); border: 1px dotted var(--mute); }
.cell.first-up::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: -4px; width: 3px; background: var(--ink); transform: translateX(-0.5px); }
.grid .mo .hl { display: block; font-stretch: 100%; font-size: 12px; font-weight: 700; line-height: 12px; text-transform: none; }
.grid .mo:has(.hl) { line-height: 26px; padding-top: 1px; }
.legend i.v { --bg: #1d4e9e; background: var(--paper); box-shadow: inset 0 0 0 3px var(--bg); }
.legend i.p { background: var(--paper); border: 1px dotted var(--mute); }
.caveat { font-size: 14px; color: var(--mute); margin-top: 4px; }
.seg { display: inline-grid; grid-auto-flow: column; border: 3px solid var(--ink); flex: none; }
.seg button { min-height: 44px; padding: 0 10px; font-weight: 800; font-size: 13px; }
.seg button + button { border-left: 3px solid var(--ink); }
.seg button[aria-pressed='true'] { background: var(--ink); color: #fff; }
.vt { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid var(--ink); padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.tile .bd p.vlt { color: var(--ink); font-weight: 700; }

/* verlegt (COPY.md #10): old date struck through */
.cell.vg b { text-decoration: line-through; }

.sech { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 26px 0 8px; }
.sech .sec { margin: 0; }
.sech:has(.seg) { align-items: center; }
.sech span { font-size: 13px; color: var(--mute); text-align: right; }

/* loss block */
.loss { background: var(--ink); color: #fff; padding: 14px var(--gut); margin: 12px calc(-1 * var(--gut)) 0; animation: slide 160ms ease-out; }
.loss .n { font-size: 72px; line-height: 0.9; display: block; }
.loss p { font-size: 16px; font-weight: 500; margin-top: 6px; }
@keyframes slide { from { transform: translateY(-8px); opacity: 0; } }

/* question rail (CEO-4, A40): always open; competitions, then "Wie viele Spiele?" */
.rail { padding: 14px 0 16px; border-bottom: 1px solid var(--ink); }
.rail .rh { font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 8px; }
.rail .r2 { margin-top: 14px; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 3px solid var(--ink); background: #fff; padding: 0 10px 0 8px; font-weight: 800; font-size: 14px; text-align: left; }
.pick .bx { width: 18px; height: 18px; background: var(--ink); display: grid; place-items: center; flex: none; }
.pick .bx::after { content: ''; width: 9px; height: 4px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.pick .ct { font-family: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; font-stretch: 62%; font-weight: 900; font-size: 20px; line-height: 1; white-space: nowrap; }
.pick .ct small { display: none; font-stretch: 100%; font-weight: 700; font-size: 12px; margin-left: 3px; }
.pick[aria-pressed='false'] { color: var(--mute); border-color: var(--off); }
.pick[aria-pressed='false'] .bx { background: #fff; box-shadow: inset 0 0 0 2px var(--off); }
.pick[aria-pressed='false'] .bx::after { display: none; }
.pick[aria-pressed='false'] .nm { text-decoration: line-through; }
/* phone: equal columns, label above price; from 600px one row, label beside price */
.tg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.tg button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; border: 3px solid var(--ink); padding: 4px 8px; font-weight: 800; font-size: 13px; line-height: 1.1; text-align: left; }
.tg button .n { font-size: 20px; line-height: 1; white-space: nowrap; }
.tg .sp { display: none; }
.tg button[aria-pressed='true'] { background: var(--ink); color: #fff; }
.note { font-size: 12px; color: var(--mute); margin-top: 6px; }
.own-in { display: flex; gap: 8px; margin-top: 8px; align-items: center; font-size: 15px; font-weight: 700; }
.own-in span { font-weight: 500; }
.hint { font-size: 13px; font-weight: 700; margin-top: 6px; }
.own-in input[aria-invalid='true'] { border-style: dashed; }
.own-in input { width: 72px; height: 44px; border: 3px solid var(--ink); border-radius: 0; padding: 0 8px; font-size: 18px; font-weight: 700; }

/* answer block (T24, A38): "Du brauchst" + chips, price, one short line */
.ansb { padding-top: 18px; }
.needl { font-size: 26px; line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; }
.needl b { font-weight: 800; }
.needl .chip { font-size: inherit; font-weight: 800; padding: 0 8px; margin: 2px 0; line-height: 1.2; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; }
.price .n { font-size: 60px; line-height: 0.9; white-space: nowrap; }
.price small { font-size: 15px; font-weight: 700; }
.short { display: flex; flex-direction: column; font-size: 16px; font-weight: 600; margin-top: 12px; }
.short .sep { display: none; }
.vlb { position: relative; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 4px; }
.vlb::after { content: ''; position: absolute; inset: -12px 0; } /* 44px hit area, no layout shift */
.vtx { font-size: 14px; margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--bg); max-width: 44ch; }
.vtx.s-free { border-left-color: var(--ink); }
.vtx:not(.on):not(:target) { display: none; }
.ansb .btn { margin-top: 18px; text-decoration: none; }
@media (min-width: 600px) {
  .short { flex-direction: row; flex-wrap: wrap; column-gap: 6px; }
  .short .sep { display: inline; color: var(--mute); }
}

/* "Deine Saison": compact strip, keys */
.grid.cmp { grid-template-columns: 40px 1fr; margin-top: 6px; }
.grid.cmp .mo { font-size: 19px; line-height: 36px; }
.grid.cmp .mo:has(.hl) { line-height: 22px; }
.grid.cmp .cell { width: 36px; height: 36px; font-size: 14px; padding: 3px 4px; }
.grid.cmp .cell::before { inset: -4px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; list-style: none; }
.keys .chip { font-size: 12px; font-weight: 700; padding: 2px 8px; margin: 0; line-height: 1.45; }
.keys .vk { position: relative; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--bg); text-decoration: none; }
.keys .vk::after { content: ''; position: absolute; inset: -12px 0; }
.keys .ko { --bg: var(--off); --fg: var(--mute); }
.keys .kp { background: var(--paper); color: var(--mute); outline: 1px dotted var(--mute); outline-offset: -1px; }
.saison .sech { margin-top: 22px; }
.saison .sech .sec { margin: 0; }

/* "Plan teilen" text link, the six rows (details/summary) */
.sharel { margin-top: 14px; }
.tl { font-weight: 800; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.copied:empty { display: none; }
.acc { margin-top: 20px; border-top: 3px solid var(--ink); }
.xp { border-bottom: 1px solid var(--ink); }
.xp summary { display: block; position: relative; min-height: 60px; padding: 10px 26px 10px 0; cursor: pointer; list-style: none; }
.xp summary::-webkit-details-marker { display: none; }
.xp summary::after { content: ''; position: absolute; right: 4px; top: 22px; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.xp[open] summary::after { top: 28px; transform: rotate(-135deg); }
.xq { display: block; font-size: 13px; line-height: 1.25; letter-spacing: 0.03em; }
.xa { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; }
.xb { padding: 12px 0 22px; }
.xb > .btn { margin: 0 0 12px; }
.xb > p + p { margin-top: 6px; }
p.win { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.xb .grid { margin-top: 0; }
.xb .fx { margin-top: 12px; }

/* A35 "Falls … weiterkommt" */
.later ul { list-style: none; }
.later li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.later .oc { width: 28px; height: 28px; flex: none; background: #fff; border: 3px dashed var(--bg); }
.later .oc.s-free { border-color: var(--ink); }
.later .src { font-size: 12px; }
.k p strong { font-weight: 700; }
.later .src { margin-top: 6px; }

/* service tiles */
.tiles { list-style: none; }
.tile { display: grid; grid-template-columns: 56px 1fr auto; border: 3px solid var(--ink); margin-bottom: 8px; min-height: 84px; }
.tile .sq { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-stretch: 62%; font-weight: 900; font-size: 30px; background: var(--bg); color: var(--fg); }
.tile.s-free .sq { box-shadow: inset 0 0 0 2px var(--ink); }
.tile .bd { padding: 8px 10px; min-width: 0; }
.tile .bd b { font-size: 17px; font-weight: 800; display: block; hyphens: none; }
.tile .bd p { font-size: 13px; color: var(--mute); }
.tile .rt { max-width: 40%; padding: 8px 10px 0; text-align: right; }
.tile .eur { display: block; font-stretch: 62%; font-weight: 900; font-size: 26px; line-height: 1; }
.tile .rt small { display: block; font-weight: 500; font-size: 12px; color: var(--mute); line-height: 1.25; margin-top: 2px; white-space: nowrap; }
.tile .bd p a { color: var(--mute); }
.wg { display: inline-block; font-size: 12px; font-weight: 700; border: 2px solid currentColor; padding: 0 5px; margin-top: 2px; }
.tile .ft { grid-column: 1 / 4; display: flex; align-items: stretch; gap: 8px; border-top: 1px solid var(--rule); padding-left: 10px; font-size: 12px; }
.tile .ft > :first-child { margin-right: auto; }
.tile .ft .tag { align-self: center; }
.src a, .tile .bd p a { display: inline-flex; align-items: center; min-height: 32px; } /* B3: >= 32px tap area */
.tile .ft a.go { color: var(--ink); font-weight: 700; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.wo { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-left: 1px solid var(--rule); font-weight: 700; font-size: 14px; }
.wo i { width: 12px; height: 3px; background: var(--ink); }
.tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 2px 5px; }
.tile.off { border-color: var(--off); color: var(--mute); }
.tile.off .sq { --bg: var(--off); --fg: var(--mute); box-shadow: none; }
.tile.off .eur { text-decoration: line-through; }
.tile.off .wo { color: var(--ink); }

/* cost */
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.three div { padding: 10px 8px 10px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.three div + div { border-left: 1px solid var(--ink); padding-left: 8px; }
.three .n { font-size: 30px; line-height: 1; display: block; }
.three small { line-height: 1.2; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.three .win { background: var(--ink); color: #fff; }
.three .win small { color: #fff; }
.honest { font-size: 15px; margin-top: 10px; font-weight: 500; }
.src { font-size: 12px; color: var(--mute); margin-top: 6px; }
.src a { color: var(--mute); }

/* cancel rows: phone date above the title (A39), desktop date column */
.sheets { list-style: none; }
.k { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 12px; border-bottom: 1px solid var(--rule); padding: 10px 0; }
.k .km { grid-row: 1 / 3; align-self: stretch; font-size: 0; background: var(--bg); }
.k.s-free .km { box-shadow: inset 0 0 0 2px var(--ink); }
.k.hedged .km { background: repeating-linear-gradient(180deg, var(--bg) 0 6px, transparent 6px 10px); }
.k .kdt { font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: 1; white-space: nowrap; }
.k p { font-size: 13px; line-height: 1.3; margin-top: 2px; }
.k p b { display: block; font-size: 15px; }
@media (min-width: 600px) {
  .k { grid-template-columns: 8px 88px minmax(0, 1fr); }
  .k .km { grid-row: auto; }
  .k p { margin-top: 0; }
}

.notice { border-top: 3px solid var(--ink); margin-top: 22px; padding-top: 8px; font-size: 14px; }
.notice b { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 13px; display: block; }
.notice a { color: var(--ink); font-weight: 700; }
.notice.stale { margin: 12px 0 0; }
.notice ul { list-style: none; }
.notice li + li { margin-top: 4px; }

/* match sheet */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 480px; border: 0; border-top: 3px solid var(--ink); background: #fff; color: var(--ink); padding: 10px var(--gut) 20px; animation: up 200ms ease-out; }
dialog.sheet::backdrop { background: rgba(14, 14, 14, 0.45); animation: fade 150ms ease-out; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sheet .grab { width: 40px; height: 4px; background: var(--ink); margin: 0 auto 12px; }
.sheet .when { font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: 1; padding-right: 44px; }
.sheet h2 { font-size: 22px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; margin: 6px 0 2px; line-height: 1.05; }
.sheet .kv { display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--rule); margin-top: 12px; }
.sheet .kv dt, .sheet .kv dd { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.sheet .kv dt { color: var(--mute); font-size: 13px; }
.sheet .close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 26px; font-weight: 700; }
.gs { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 2px dashed var(--ink); padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.chip { display: inline-block; padding: 2px 6px; font-size: 12px; font-weight: 700; margin-right: 3px; background: var(--bg); color: var(--fg); }
.chip.s-free { box-shadow: inset 0 0 0 2px var(--ink); }

/* text pages */
.bar a.home { color: #fff; text-decoration: none; font-size: 18px; }
.doc { padding-bottom: 24px; }
.hero { hyphens: auto; overflow-wrap: break-word; }
.doc p { font-size: 16px; margin-top: 8px; max-width: 62ch; }
.doc a { font-weight: 600; }
mark.todo { background: var(--ink); color: #fff; font-weight: 700; padding: 1px 6px; }

/* share + calendar, ad slot (A14) */
.btn { display: flex; justify-content: center; align-items: center; min-height: 56px; width: 100%; border: 3px solid var(--ink); font-weight: 800; font-size: 16px; margin-top: 10px; padding: 0 12px; text-align: center; }
.btn.pri { background: var(--ink); color: #fff; }
@media (max-width: 400px) { .btn { font-size: 15px; letter-spacing: -0.01em; } }
.copied { font-size: 13px; font-weight: 700; margin-top: 6px; min-height: 18px; }
.ad { border: 3px solid var(--rule); margin-top: 22px; padding: 6px 8px 8px; min-height: 280px; }
.ad .adl { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

/* club page (T10) */
.cp { padding-bottom: 24px; }
.crumb { font-size: 12px; color: var(--mute); padding-top: 12px; }
.crumb a { color: var(--mute); display: inline-flex; min-height: 32px; align-items: center; }
/* below 1024px: body cut, sentence case (designer T16-1); the x cut from 1024px */
h1.head { font-size: 28px; line-height: 1.1; font-stretch: 100%; font-weight: 800; text-transform: none; letter-spacing: 0; margin: 10px 0 10px; overflow-wrap: break-word; }
.stand { font-size: 13px; color: var(--mute); }
.answer { font-size: 17px; line-height: 1.4; font-weight: 500; margin-top: 8px; max-width: 68ch; }
@media (max-width: 599px) { .answer { font-size: 15px; line-height: 1.45; } } /* T24-1 */
.who { width: 100%; border-collapse: collapse; font-size: 14px; }
.who td, .who th { padding: 9px 6px 9px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.who th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); border-bottom: 3px solid var(--ink); }
.who.cov td:nth-child(n + 2), .who.cov th:nth-child(n + 2) { text-align: right; white-space: nowrap; }
.who.cov td:nth-child(n + 2) { font-stretch: 62%; font-weight: 900; font-size: 16px; }
.who.cov th { letter-spacing: 0.02em; }
.who.cov tr.best td { background: var(--ink); color: #fff; }
.who.cov tr.best td:first-child { padding-left: 6px; }
.fx { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.fx td.d { width: 108px; }
.fx td.s { width: 96px; }
.fx td, .fx th { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.fx td.d { font-weight: 700; white-space: nowrap; }
/* B16 (A39: nothing clipped): opponent wraps, competition on its own line */
.fx td.o small.c { display: block; }
details.played { margin: 4px 0 8px; }
details.played summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--mute); cursor: pointer; border-bottom: 1px solid var(--rule); }
.who.cov small.vl2 { display: block; font-stretch: 100%; font-weight: 500; font-size: 11px; color: inherit; }
.fx small.c { color: var(--mute); font-size: 12px; }
.fx td { overflow-wrap: break-word; }
.fx td.s { text-align: right; width: 92px; }
.fx tr.mh th { border-bottom: 1px solid var(--ink); font-stretch: 62%; font-weight: 900; font-size: 18px; text-transform: uppercase; padding-top: 14px; }
.fx tr.pl td { color: var(--mute); }
.fx .gs, .fx .vt, .who .vt { font-size: 9px; border-width: 1px; padding: 0 3px; margin-left: 4px; }
.fx td.d .gs { display: block; width: fit-content; margin: 2px 0 0; }
.faq { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.faq h3 { font-size: 15px; font-weight: 800; }
.faq p { font-size: 14px; color: var(--mute); margin-top: 2px; }
.lnk { display: flex; flex-direction: column; }
.lnk a { color: var(--ink); font-weight: 600; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--rule); text-decoration: none; }
.lnk.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.lnk.two a { font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .lnk.two { grid-template-columns: repeat(4, 1fr); } } /* T24-6 */
.cp .btn { text-decoration: none; margin-top: 14px; }

.who.prod tr.nm th { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 0; padding-top: 14px; font-weight: 800; }
.who.prod td { border-bottom: 0; }
.who.prod tr.sr td { font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--rule); padding-top: 0; }

/* footer */
.foot { margin-top: 28px; background: var(--ink); color: #fff; padding-top: 12px; padding-bottom: 20px; display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 13px; }
.foot a { color: #fff; min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 600px) {
  .pick { gap: 8px; padding: 0 12px 0 10px; font-size: 15px; }
  .pick .ct small { display: inline; }
  .tg { display: flex; flex-wrap: wrap; }
  .tg button { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px; font-size: 15px; white-space: nowrap; }
  .tg button .n { font-size: 22px; }
  .tg .sp { display: inline; }
}

@media (min-width: 1024px) {
  :root { --gut: 40px; }
  .bar { min-height: 60px; }
  .bar h2 { font-size: 20px; }
  .hero { font-size: 56px; line-height: 0.98; font-stretch: 125%; text-transform: uppercase; }
  .hero-g .hero { margin: 0; }
  .hero-g { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; padding-top: 40px; }
  .lede { font-size: 19px; margin-top: 16px; }
  .how { display: block; }
  .steps { display: none; }
  .stephead { gap: 12px; margin-top: 40px; }
  .stephead .num { width: 36px; height: 36px; font-size: 26px; }
  .stephead h2 { font-size: 24px; }
  .stephead small { font-size: 14px; }
  .club { min-height: 52px; gap: 12px; padding-right: 12px; font-size: 15px; }
  .needl { font-size: 32px; }
  .price .n { font-size: 88px; }
  .ansb { padding-top: 28px; }
  .ansb .btn { width: auto; display: inline-flex; padding: 0 24px; }
  .xb > .btn { width: auto; display: inline-flex; padding: 0 20px; }
  .xq, .xa { font-size: 14px; }
  /* T24 result and club: answer, share, rows left; strip right, sticky */
  .rg { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; }
  .rg > .ansb { grid-column: 1; grid-row: 1; }
  .rg > .saison { grid-column: 2; grid-row: 1 / -1; position: sticky; top: 16px; padding-top: 28px; }
  .rg > .saison .sech { margin-top: 0; }
  .rg > .sharel { grid-column: 1; grid-row: 2; }
  .rg > .acc { grid-column: 1; grid-row: 3; }
  .rg > .ad { grid-column: 1; grid-row: 4; }
  .bar .scarf.h { margin-left: 0; }
  h1.head { font-size: 44px; line-height: 1.02; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
  .clubs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .loss { margin: 12px 0 0; }
  dialog.sheet { inset: 0; margin: auto; border: 3px solid var(--ink); height: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation-duration: 0ms !important; transition-duration: 0ms !important; transition-delay: 0ms !important; }
}

/* Amazon disclosure (COPY.md, verifier-2): under the Prime card footer and in the site footer */
.tile .amz { grid-column: 1 / -1; font-size: 12px; color: var(--mute); padding: 0 10px 8px; }
.foot .amz { flex-basis: 100%; font-size: 12px; color: var(--off); }

.s-sky{--bg:#1D4E9E;--fg:#FFFFFF}
.s-dazn{--bg:#D4DC1E;--fg:#0E0E0E}
.s-rtl{--bg:#E1252F;--fg:#FFFFFF}
.s-prime{--bg:#12A3CF;--fg:#0E0E0E}
.s-paramount{--bg:#0064FF;--fg:#FFFFFF}
.s-free{--bg:#FFFFFF;--fg:#0E0E0E}
.c-koeln{--club:#ED1C24;--club2:#FFFFFF}
.c-union-berlin{--club:#D4011D;--club2:#FFFFFF}
.c-mainz{--club:#C3141E;--club2:#FFFFFF}
.c-leverkusen{--club:#E32221;--club2:#0E0E0E}
.c-dortmund{--club:#FDE100;--club2:#0E0E0E}
.c-gladbach{--club:#0E0E0E;--club2:#00A651}
.c-frankfurt{--club:#E1000F;--club2:#0E0E0E}
.c-augsburg{--club:#BA3733;--club2:#46714D}
.c-bayern{--club:#DC052D;--club2:#FFFFFF}
.c-schalke{--club:#004D9D;--club2:#FFFFFF}
.c-hamburg{--club:#0A3F86;--club2:#FFFFFF}
.c-leipzig{--club:#DD0741;--club2:#FFFFFF}
.c-freiburg{--club:#C8102E;--club2:#0E0E0E}
.c-paderborn{--club:#0060A9;--club2:#0E0E0E}
.c-elversberg{--club:#0E0E0E;--club2:#FFFFFF}
.c-bremen{--club:#1D9053;--club2:#FFFFFF}
.c-hoffenheim{--club:#1C63B7;--club2:#FFFFFF}
.c-stuttgart{--club:#E32219;--club2:#FFFFFF}
.c-heidenheim{--club:#E30613;--club2:#003B79}
.c-kaiserslautern{--club:#CE2029;--club2:#FFFFFF}
.c-magdeburg{--club:#0055A4;--club2:#FFFFFF}
.c-nuernberg{--club:#9B1B30;--club2:#0E0E0E}
.c-bielefeld{--club:#004E95;--club2:#0E0E0E}
.c-dresden{--club:#FDB913;--club2:#0E0E0E}
.c-braunschweig{--club:#F7D417;--club2:#004B9D}
.c-cottbus{--club:#E2001A;--club2:#FFFFFF}
.c-st-pauli{--club:#624839;--club2:#FFFFFF}
.c-hannover{--club:#00924F;--club2:#0E0E0E}
.c-hertha{--club:#005CA9;--club2:#FFFFFF}
.c-kiel{--club:#004C9B;--club2:#E2001A}
.c-karlsruhe{--club:#00529F;--club2:#FFFFFF}
.c-fuerth{--club:#009639;--club2:#FFFFFF}
.c-darmstadt{--club:#004F9F;--club2:#FFFFFF}
.c-bochum{--club:#005BA4;--club2:#FFFFFF}
.c-osnabrueck{--club:#5A2D82;--club2:#FFFFFF}
.c-wolfsburg{--club:#65B32E;--club2:#FFFFFF}