/* Belek Golf Cup 2026
 * Layout: eine schmale Spalte (max. 560px) zwischen fixer Kopfzeile und Tab-Leiste,
 * Anzeigetafel-Typografie (Barlow Condensed) für Zahlen, Figtree für Text. */
:root {
  --bg: #EEF2EC;
  --surface: #FFFFFF;
  --surface-2: #E2E9E0;
  --ink: #10231A;
  --muted: #5A6A61;
  --line: #D2DBD0;
  --pine: #16402D;
  --pine-ink: #F2F6F1;
  --heading: #16402D;
  --fairway: #23764A;
  --fairway-ink: #FFFFFF;
  --sea: #0D7480;
  --under: #C2362B;
  --warn: #B7791F;
  --gold: #C79A2E;
  --silver: #9AA4AA;
  --bronze: #AD6E3F;
  --team-A: #D9573B;
  --team-B: #2F6BC9;
  --team-C: #C99212;
  --team-D: #7B4FC4;
  --shadow: 0 1px 2px rgb(16 35 26 / 6%), 0 4px 14px rgb(16 35 26 / 6%);
  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif-condensed, system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 12px;
  --top-h: 52px;
  --tab-h: 62px;
  color-scheme: light; /* immer hell, auch wenn das Handy im Darkmode ist */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 var(--f-body);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.under { color: var(--under); }
.over, .even { color: var(--ink); }
small { font-size: .8em; }

/* ---------- Rahmen ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 10;
  height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--pine); color: var(--pine-ink);
}
.brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; font: 700 19px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.brand-logo { height: 34px; width: auto; display: block; }
.top-right { display: flex; align-items: center; gap: 8px; }
.iconbtn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; }
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgb(255 255 255 / 12%); white-space: nowrap; }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: #B9C6BE; }
.sync.live .sdot { background: #5BD08A; box-shadow: 0 0 0 3px rgb(91 208 138 / 25%); }
.sync.sending .sdot { background: #8FD3DA; }
.sync.offline .sdot { background: #F0B54C; }
.sync.error .sdot { background: #FF7B6B; }

.view {
  max-width: 560px; margin: 0 auto;
  padding-inline: 16px;
  padding-block: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 16px) calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; gap: 14px;
}
.view > * { min-width: 0; }

.tabs {
  position: fixed; inset: auto 0 0; z-index: 10;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 120px); justify-content: space-evenly;
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabs button {
  border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .01em;
}
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-current="page"] { color: var(--fairway); }
.tabs button[aria-current="page"] svg { stroke-width: 2.4; }

/* ---------- Typografie ---------- */
h1, h2, h3, p { margin: 0; text-wrap: balance; }
.page-title { font: 700 24px/1.15 var(--f-body); letter-spacing: -.01em; }
.h3 { font: 700 12px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.h3 .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.h4 { font: 600 17px/1.2 var(--f-display); letter-spacing: .01em; }
.sec { margin-top: 6px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sub { color: var(--muted); font-size: 14px; }
.foot { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.vs { color: var(--muted); font-size: .85em; }

/* ---------- Bausteine ---------- */
.card, .block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btn {
  border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 15px;
  background: var(--surface-2); color: var(--ink); min-height: 48px; position: relative; overflow: hidden;
}
.btn.primary { background: var(--fairway); color: var(--fairway-ink); }
.btn.big { min-height: 56px; font-size: 17px; width: 100%; }
.btn.outline { background: transparent; border: 1.5px solid var(--line); }
.btn.ghost { background: var(--surface-2); }
.btn.danger { background: var(--under); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--sea); font-weight: 600; font-size: 14px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.badge.done { background: var(--fairway); color: var(--fairway-ink); }
.badge.live { background: var(--under); color: #fff; }
.badge.center { align-self: center; }
.banner { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: var(--ink); text-wrap: pretty; }
.tchip {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; flex: none;
  font: 700 14px/1 var(--f-display); color: #fff; background: var(--c); vertical-align: middle;
}
.tdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 7px; flex: none; vertical-align: middle; }
.t-A { --c: var(--team-A); } .t-B { --c: var(--team-B); } .t-C { --c: var(--team-C); } .t-D { --c: var(--team-D); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 1 0 auto; min-width: 74px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px;
  padding: 7px 10px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
}
.chip b { font: 700 18px/1 var(--f-display); }
.chip small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.chip.on { border-color: var(--fairway); background: var(--fairway); color: var(--fairway-ink); }
.chip.on small { color: inherit; opacity: .85; }
.tscroll { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }

/* ---------- Start ---------- */
.hero { padding: 6px 2px 2px; display: flex; flex-direction: column; gap: 6px; }
.hero h1 { font: 700 46px/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; color: var(--heading); }
.hero h1 span { color: var(--fairway); }
.dates { font-weight: 600; color: var(--muted); }
.next { background: var(--pine); color: var(--pine-ink); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.next-top { display: flex; flex-direction: column; gap: 2px; }
.next .eyebrow, .next .sub { color: var(--pine-ink); opacity: .8; }
.next h2 { font: 700 24px/1.15 var(--f-body); }
.next h2 small { font-size: 15px; font-weight: 500; opacity: .75; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF6B5B; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown div { background: rgb(255 255 255 / 9%); border-radius: 8px; padding: 8px 4px 6px; text-align: center; }
.countdown b { display: block; font: 700 28px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.facts dd { margin: 0; font: 700 22px/1.1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.groups { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgb(255 255 255 / 15%); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.groups li { display: flex; gap: 10px; align-items: baseline; }
.groups .time, .flight .time { font: 700 17px/1 var(--f-display); font-variant-numeric: tabular-nums; flex: none; }
.next .vs { color: inherit; opacity: .7; }
.mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mini li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.mini li:first-child { border-top: 0; }
.mini .pos { width: 16px; font: 700 18px/1 var(--f-display); color: var(--muted); }
.mini .names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini b { font-size: 24px; line-height: 1; }
.prog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.prog li { display: flex; gap: 12px; }
.prog-day { width: 44px; flex: none; text-align: center; background: var(--surface-2); border-radius: 10px; padding: 6px 0; display: flex; flex-direction: column; line-height: 1.1; }
.prog-day b { font: 700 18px/1 var(--f-display); }
.prog-day span { font-size: 12px; color: var(--muted); }
.prog-main { min-width: 0; }
.prog-title { font-weight: 700; }
.prog-title small { color: var(--muted); font-weight: 600; }
.prog-sub { font-size: 13px; color: var(--muted); }

/* ---------- Eingabe ---------- */
.flight-list { display: flex; flex-direction: column; gap: 10px; }
.flight { border: 0; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.flight-names { flex: 1 1 200px; font-weight: 600; }
.flight-prog { width: 100%; font-size: 13px; color: var(--muted); }
.entry-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.match-line { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.match-line b { font-size: 24px; line-height: 1; }
.match-line small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.hole-card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.hole-head { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; background: var(--pine); color: var(--pine-ink); padding: 10px 8px; }
.navbtn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 10%); color: inherit; font: 600 30px/1 var(--f-display); justify-self: center; }
.hole-id { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hole-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.hole-nr { font: 700 60px/.95 var(--f-display); font-variant-numeric: tabular-nums; }
.hole-info { font: 600 18px/1 var(--f-display); letter-spacing: .03em; opacity: .9; }
.strip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.hb { border: 0; height: 30px; border-radius: 7px; background: var(--surface-2); font: 600 15px/1 var(--f-display); color: var(--muted); padding: 0; }
.hb.part { background: color-mix(in srgb, var(--fairway) 30%, var(--surface-2)); color: var(--ink); }
.hb.done { background: var(--fairway); color: var(--fairway-ink); }
.hb.cur { outline: 2.5px solid var(--sea); outline-offset: 1px; color: var(--ink); }
.hb.done.cur { color: var(--fairway-ink); }
.prows { display: flex; flex-direction: column; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 14px; border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
.pinfo { display: flex; align-items: flex-start; min-width: 0; flex: 1; }
.pinfo .tdot { margin-top: 7px; }
.pname { font-weight: 700; font-size: 17px; line-height: 1.2; }
.pmeta { font-size: 12.5px; color: var(--muted); }
.pmeta b { color: var(--ink); }
.strokes { letter-spacing: 1px; color: var(--sea); font-size: 10px; vertical-align: 1px; }
.sname { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.sname.hint { background: none; padding: 0; font-weight: 500; }
.sname.n-birdie, .sname.n-eagle { background: var(--under); color: #fff; }
.sname.n-bogey { background: color-mix(in srgb, var(--sea) 20%, var(--surface)); color: var(--ink); }
.sname.n-dbogey { background: var(--sea); color: #fff; }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.step { width: 52px; height: 52px; border: 0; border-radius: 14px; background: var(--surface-2); font: 600 30px/1 var(--f-display); touch-action: manipulation; }
.step:active { background: color-mix(in srgb, var(--fairway) 25%, var(--surface-2)); }
.val { width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface); font: 700 34px/1 var(--f-display); font-variant-numeric: tabular-nums; touch-action: manipulation; }
.val.empty { border-style: dashed; border-color: var(--line); color: var(--muted); opacity: .7; }
.stepper.small .step { width: 40px; height: 40px; font-size: 24px; border-radius: 10px; }
.stepper.small .val { width: 44px; height: 40px; display: grid; place-items: center; font-size: 24px; border-width: 1.5px; border-radius: 10px; }
.hole-result { padding: 10px 14px; background: var(--surface-2); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hole-result .sep { color: var(--muted); }
.btn.auto::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgb(255 255 255 / 55%);
  transform-origin: left; animation: auto 1.8s linear forwards;
}
@keyframes auto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.finish { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 6px; }
.pin input { font: 700 28px/1 var(--f-display); letter-spacing: .3em; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.pin-form { display: flex; gap: 8px; }
.err { color: var(--under); font-weight: 600; font-size: 14px; }

/* ---------- Leaderboard ---------- */
.board { width: 100%; border-collapse: collapse; font-size: 14px; }
.board th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; text-align: left; padding: 4px 4px 6px; border-bottom: 1.5px solid var(--line); }
.board td { padding: 9px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.board tr:last-child td { border-bottom: 0; }
.board .num { text-align: right; font-size: 17px; }
.board th.num { text-align: right; font-family: var(--f-body); font-size: 11px; }
.board .pos { font: 700 17px/1 var(--f-display); color: var(--muted); width: 26px; }
.board .total { font-weight: 700; font-size: 20px; }
.board tr.lead td { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.board tr.lead .pos { color: var(--gold); }
.tname { display: flex; align-items: center; gap: 8px; white-space: normal !important; min-width: 120px; }
.tname span { font-size: 13px; line-height: 1.2; }
.board.ind td small { font-size: 11px; }
.mround { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mround + .mround { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.match { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.mteams { display: flex; flex-direction: column; gap: 4px; }
.mt { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mt .mt-names { flex: 1; min-width: 0; }
.mt b { font-size: 26px; line-height: 1; color: var(--muted); }
.mt.lead b, .mt.lead .mt-names { color: var(--ink); font-weight: 700; }
.mstatus { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mholes { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 2px; }
.mh { display: flex; flex-direction: column; align-items: center; background: var(--surface); border-radius: 4px; padding: 2px 0; font: 600 12px/1.25 var(--f-display); font-variant-numeric: tabular-nums; color: var(--muted); min-height: 46px; }
.mh .mh-nr { font-size: 9.5px; opacity: .7; }
.mh .p { color: var(--fairway); font-weight: 700; }
.mh.open { background: transparent; border: 1px dashed var(--line); }

/* ---------- Scorecards ---------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-grid; place-items: center; width: 22px; height: 22px; font: 600 14px/1 var(--f-display); color: var(--ink); }
.sc { padding: 12px; gap: 8px; }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.sc-head b { font-size: 16px; }
.sc-sum { font-size: 13px; }
.sct { width: 100%; border-collapse: collapse; font: 500 14px/1 var(--f-display); font-variant-numeric: tabular-nums; text-align: center; min-width: 320px; }
.sct th, .sct td { padding: 4px 1px; height: 28px; }
.sct th:first-child { text-align: left; font: 600 11px/1 var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; width: 50px; }
.sct td:last-child, .sct th:last-child { font-weight: 700; background: var(--surface-2); }
.sct tr.hdr th { color: var(--muted); font-weight: 600; font-family: var(--f-display); font-size: 13px; border-top: 1px solid var(--line); }
.sct tr.hdr:first-child th { border-top: 0; }
.sct tr.hdr th:first-child { font-family: var(--f-body); font-size: 11px; }
.sct tr.par td, .sct tr.si td { color: var(--muted); font-size: 13px; }
.sct tr.si td { font-size: 11.5px; }
.sct tr.strk td { color: var(--sea); font-size: 13px; font-weight: 700; letter-spacing: -.05em; }
.sct tr.strk td:last-child { letter-spacing: 0; }
.sct tr.gross td { font-size: 16px; font-weight: 600; }
.sct tr.net td { color: var(--sea); font-size: 14px; }
.n-birdie, .n-eagle, .n-bogey, .n-dbogey { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.n-birdie { border: 1.5px solid var(--under); border-radius: 50%; color: var(--under); }
.n-eagle { border: 1.5px solid var(--under); border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--under); color: var(--under); }
.n-bogey { border: 1.5px solid var(--sea); border-radius: 3px; }
.n-dbogey { border: 1.5px solid var(--sea); border-radius: 3px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--sea); }
.sname.n-birdie, .sname.n-eagle, .sname.n-bogey, .sname.n-dbogey { display: inline-block; width: auto; height: auto; border: 0; box-shadow: none; border-radius: 99px; }

/* ---------- Siegerehrung ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding-top: 8px; }
.pod { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pod-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 13px; line-height: 1.2; }
.pod-team .tchip { width: 32px; height: 32px; font-size: 20px; border-radius: 9px; }
.pod-team b { font-size: 18px; }
.pod-block { border-radius: 12px 12px 4px 4px; display: grid; place-items: start center; padding-top: 8px; font: 700 40px/1 var(--f-display); color: #fff; }
.p1 .pod-block { height: 120px; background: var(--gold); }
.p2 .pod-block { height: 88px; background: var(--silver); }
.p3 .pod-block { height: 64px; background: var(--bronze); }
.fourth { text-align: center; color: var(--muted); font-size: 14px; }
.aw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aw li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.aw li:first-child { border-top: 0; }
.aw-k { font-weight: 700; display: flex; flex-direction: column; }
.aw-k small { color: var(--muted); font-weight: 500; }
.aw-v { text-align: right; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rank { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rank li { font-size: 14px; }
.rank b { font-size: 20px; margin-left: 4px; }

/* ---------- Einstellungen ---------- */
.settings-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hcp-list, .set-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hcp-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hcp-list li:first-child, .set-list li:first-child { border-top: 0; }
.hcp-list li > div:first-child { display: flex; flex-direction: column; }
.hcp-list .linkbtn { grid-column: 1 / -1; justify-self: start; font-size: 13px; }
.set-list li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.set-round { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.set-extras { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); }
.set-extras select { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.toggle span { width: 42px; height: 26px; border-radius: 99px; background: var(--surface-2); position: relative; transition: background .15s; }
.toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform .15s; }
.toggle.on { color: var(--fairway); }
.toggle.on span { background: var(--fairway); }
.toggle.on span::after { transform: translateX(16px); }
.pargrid-wrap { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.pargrid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.pargrid button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 8px; padding: 3px 0 5px; display: flex; flex-direction: column; align-items: center; font: 700 18px/1 var(--f-display); }
.pargrid small { font: 500 10px/1.4 var(--f-body); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 600px) {
  .hero h1 { font-size: 58px; }
}

/* ---------- Übersicht ---------- */
body.no-tabs .view { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
.title { display: flex; align-items: center; gap: 14px; padding: 2px 2px 0; }
.title > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.title-logo { width: 64px; height: auto; aspect-ratio: 200 / 271; flex: none; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 15%)); }
.title h1 { font: 700 29px/1.1 var(--f-body); letter-spacing: -.015em; color: var(--heading); }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); min-height: 48px; }
.list li:first-child { border-top: 0; padding-top: 4px; }
.list .pos { width: 22px; flex: none; font: 600 17px/1 var(--f-display); color: var(--muted); }
.list .tdot { margin-right: 0; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.list .big { font-size: 26px; line-height: 1; }
.list .pts { width: 40px; text-align: right; font-size: 16px; }
.list .num { font-size: 18px; }
.mline b { font-size: 26px; line-height: 1; color: var(--muted); min-width: 18px; text-align: center; }
.mline b.lead { color: var(--ink); }
.mline .colon { color: var(--muted); margin: 0 -4px; }
.mline .grow { font-size: 13px; }
.prog li { align-items: flex-start; }
.prog-day { width: 66px; flex: none; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 1px; }
.foot.center { text-align: center; margin-top: 0; }
.modeswitch { display: inline-flex; background: rgb(255 255 255 / 12%); border-radius: 99px; padding: 2px; }
.modeswitch:empty { display: none; }
.modeswitch button { border: 0; background: none; color: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; opacity: .75; }
.modeswitch button[aria-pressed="true"] { background: var(--pine-ink); color: var(--pine); opacity: 1; }
.admin-tag { font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; background: rgb(255 255 255 / 14%); }
body.preview #sync { display: none; }

/* ---------- Seitenwahl Übersicht ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; border-radius: 8px; padding: 9px 0; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.center { text-align: center; }

/* ---------- Scorekarten-Eingabe ---------- */
.grid-card { padding: 8px 6px 12px; }
.egrid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.egrid th, .egrid td { padding: 3px 2px; text-align: center; }
.egrid thead th { font-size: 12px; font-weight: 700; color: var(--ink); padding-bottom: 6px; white-space: nowrap; }
.egrid thead th:first-child, .egrid thead th:nth-child(2) { color: var(--muted); font-weight: 600; }
.egrid thead .tdot { margin-right: 4px; }
.egrid tbody th { font: 600 15px/1 var(--f-display); color: var(--muted); width: 34px; }
.egrid td.par { font: 600 15px/1 var(--f-display); color: var(--muted); width: 40px; }
.egrid td.par small { display: block; font: 500 10px/1.3 var(--f-body); }
.egrid td { position: relative; }
.ein {
  width: 100%; max-width: 64px; height: 42px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--ink); text-align: center; font: 600 20px/1 var(--f-display); font-variant-numeric: tabular-nums; padding: 0;
}
.ein:focus { border-color: var(--sea); outline: 2px solid color-mix(in srgb, var(--sea) 30%, transparent); }
.ein.n-birdie, .ein.n-eagle { border-color: var(--under); color: var(--under); width: 100%; height: 42px; box-shadow: none; border-radius: 9px; display: inline-block; }
.ein.n-bogey, .ein.n-dbogey { border-color: var(--sea); width: 100%; height: 42px; box-shadow: none; border-radius: 9px; display: inline-block; }
.egrid .dots { position: absolute; top: 4px; right: 50%; transform: translateX(26px); font-style: normal; font-size: 9px; line-height: 1; color: var(--sea); pointer-events: none; }
.egrid tr.sum th, .egrid tr.sum td { font: 700 16px/1 var(--f-display); padding: 8px 2px; border-top: 1px solid var(--line); background: var(--surface-2); }
.egrid tr.sum th { font-family: var(--f-body); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.big-result { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; }
.big-result .colon { margin: 0; font-size: 28px; }
.big-result b { font-size: 34px; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg.three button { font-size: 13px; }
.filter { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.filter select { flex: 1; min-width: 0; font: 600 15px/1.2 var(--f-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pargrid-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.pargrid button.changed { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.pargrid-wrap + .pargrid-wrap { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.pargrid-head h3 { min-width: 0; }
.pargrid-head h3 .muted { display: block; font-size: 13px; font-family: var(--f-body); font-weight: 500; }
.pargrid-head .btn { flex: none; }
/* Handicaps */
.hcp-list li { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 4px 10px; }
.hcp-list .hname { font-size: 15px; }
.idx { display: flex; flex-direction: column; font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.idx input, .natcfg input, .pargrid.si input {
  font: 600 18px/1 var(--f-display); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 4px; width: 64px;
}
.idx input:focus, .natcfg input:focus, .pargrid.si input:focus { border-color: var(--sea); outline: none; }
input.bad { border-color: var(--under) !important; background: color-mix(in srgb, var(--under) 10%, var(--surface)) !important; }
.arrow { color: var(--muted); padding-top: 12px; }
.phcp { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.phcp small { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.phcp b { font-size: 26px; line-height: 1.1; }
.hcp-list .linkbtn, .hcp-list .capnote { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; }
.hcp-list li > div:first-child { display: block; }
/* R1-Platz */
.natcfg { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.natcfg label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.natcfg input { width: 90px; }
.pargrid.si label { display: flex; flex-direction: column; align-items: center; border: 1.5px solid transparent; border-radius: 8px; padding: 2px 0; }
.pargrid.si label small { font: 500 10px/1.4 var(--f-body); color: var(--muted); }
.pargrid.si input { width: 100%; padding: 6px 0; font-size: 16px; }
.pargrid.si label.changed input { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }

/* Spielvorgabe überschreibbar, Striche pro Spieler */
.hcp-list li { grid-template-columns: 1fr auto auto auto; }
.idx.ph input { width: 58px; }
.idx.ph.over input { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.hcp-links { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hcp-links .linkbtn, .hcp-links small { font-size: 12.5px; }
.st-edit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; }
.pargrid.st button span { font-size: 15px; color: var(--sea); letter-spacing: -.05em; min-height: 18px; }
.st-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Runden anpassen */
.set-list .linkbtn { align-self: flex-start; font-size: 13px; }
.rd-edit { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.rd-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rd-edit input, .rd-edit select { font: 500 16px/1.2 var(--f-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 10px; text-transform: none; letter-spacing: 0; min-width: 0; width: 100%; }
.rd-edit input:focus, .rd-edit select:focus { border-color: var(--sea); outline: none; }
.rd-edit input.bad { border-color: var(--warn); }
.rd-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flight-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fp { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 10px; font: 500 14px/1 var(--f-body); color: var(--ink); text-align: left; }
.fp b { margin-left: auto; font-family: var(--f-display); color: var(--sea); }
.fp.f2 { background: var(--surface-2); }
.set-list .linkbtn { text-align: left; }
.st-foot .btn { flex: none; }

.modeswitch .ms-link { color: inherit; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
@media (max-width: 430px) { .admin-tag { display: none; } }

/* Titel dezent auffälliger */
.h3 { color: var(--heading); font-size: 12.5px; align-items: center; }
.h3::before { content: ''; flex: none; width: 4px; height: 14px; border-radius: 2px; background: var(--fairway); }
.h3 .muted { color: var(--muted); font-size: 12.5px; }

/* Tabs für 2–4 Seiten */
.seg.n3 { grid-template-columns: repeat(3, 1fr); }
.seg.n4 { grid-template-columns: repeat(4, 1fr); }
.seg.n3 button, .seg.n4 button { font-size: 13px; }

/* Teamwertung: Punkte je Runde als Kästchen */
.list.standings li { flex-wrap: wrap; row-gap: 8px; }
.rpts { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-left: 0; }
.rpts span { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface-2); border-radius: 7px; padding: 4px 2px 5px; min-width: 0; }
.rpts small { font-size: 10px; letter-spacing: -.01em; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rpts b { font-size: 16px; line-height: 1; }
.rpts span.open b { color: var(--muted); font-weight: 500; }

/* Regeln */
.rules ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.rtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rtag { font-size: 12px; font-weight: 600; background: var(--surface-2); border-radius: 99px; padding: 3px 10px; }
.rules .example { margin-top: 10px; font-size: 13.5px; line-height: 1.45; background: var(--surface-2); border-radius: 9px; padding: 8px 10px; }

.sct tr.stbl td { color: var(--fairway); font-size: 13px; font-weight: 700; }
.set-round.fmt { padding: 4px 0 8px; }
.seg.small button { font-size: 12.5px; padding: 6px 10px; }

/* Einzel-Wertung */
.natcfg.pts4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.natcfg.pts4 input { width: 100%; }
.ov-list li { grid-template-columns: 1fr auto auto; }
.ov-list .calc { font-size: 12.5px; }
.manual { font-size: 11px; font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-radius: 99px; padding: 1px 7px; }

/* Teamwertung: Gesamtpunkte als grünes Feld */
.standings .tot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 5px 8px 4px; border-radius: 10px; background: color-mix(in srgb, var(--fairway) 12%, var(--surface)); color: var(--fairway); }
.standings .tot b { font-size: 28px; line-height: 1; font-weight: 700; }
.standings .tot small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.standings .tot.lead { background: var(--fairway); color: var(--fairway-ink); }

/* Fünf Reiter */
.seg.n5 { grid-template-columns: repeat(5, 1fr); }
.seg.n5 button { font-size: 12px; }


/* Teamwertung: alle Totale kräftig grün */
.standings .tot { background: var(--fairway); color: var(--fairway-ink); }
.standings .tot.lead { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fairway); }

/* Programm */
.prog-title { margin: 6px 2px -2px; }
.prog-card { gap: 12px; padding: 16px; }
.pc-head { display: flex; gap: 12px; align-items: flex-start; }
.pc-date { flex: none; width: 52px; border-radius: 10px; background: var(--fairway); color: var(--fairway-ink); display: flex; flex-direction: column; align-items: center; padding: 6px 0 5px; }
.pc-date b { font: 700 18px/1 var(--f-display); text-transform: uppercase; }
.pc-date span { font-size: 12px; font-weight: 600; opacity: .9; }
.pc-title { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-title h3 { font: 700 20px/1.15 var(--f-body); color: var(--heading); }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-mode, .pc-note { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 9px; }
.pc-mode { background: var(--surface-2); color: var(--ink); }
.pc-note { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.pc-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-facts div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.pc-facts dt { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pc-facts dd { margin: 2px 0 0; font: 700 20px/1.1 var(--f-display); }
.pc-flights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pc-flights li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.pc-time { flex: none; width: 52px; font: 700 18px/1.2 var(--f-display); color: var(--fairway); text-align: center; }
.pc-who { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.4; }
.pc-who small { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pc-names .tchip { vertical-align: -3px; }
.pc-names .vs { color: var(--muted); font-size: 13px; padding: 0 2px; }
.pc-team { display: flex; align-items: center; gap: 8px; }
.pc-vs { font-size: 12px; color: var(--muted); padding-left: 30px; }

.stbl-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.stbl-table div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; background: var(--surface-2); border-radius: 9px; padding: 7px 3px; }
.stbl-table b { font: 700 22px/1 var(--f-display); color: var(--fairway); }
.stbl-table span { font-size: 11px; line-height: 1.25; color: var(--muted); }
.stbl-table .hi { background: var(--fairway); }
.stbl-table .hi b, .stbl-table .hi span { color: var(--fairway-ink); }
.stbl-cap { margin-top: 10px; }
.stbl-table + .example { margin-top: 8px; }
.stbl-cap + .stbl-table { margin-top: 6px; }

/* Eingabe: Punkte pro Loch */
.egrid .sp { position: absolute; bottom: 1px; right: 50%; transform: translateX(30px); font-style: normal; font: 700 10px/1 var(--f-body); min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; border: 1.5px solid var(--surface); }
.egrid .sp.p0 { background: var(--surface-2); color: var(--muted); }
.egrid .sp.p1 { background: color-mix(in srgb, var(--fairway) 25%, var(--surface)); color: var(--fairway); }
.egrid .sp.p2 { background: var(--fairway); color: var(--fairway-ink); }
.egrid .sp.p3 { background: var(--pine); color: var(--pine-ink); }
.egrid .sps { display: block; font: 600 11px/1.2 var(--f-body); color: var(--fairway); }
.egrid .hp { width: 48px; white-space: nowrap; }
.egrid thead th.hp { color: var(--muted); font-weight: 600; }
.hpm { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center; font: 700 11px/1 var(--f-body); color: #fff; margin: 0 1px; }
.hpm.t-A { background: var(--team-A); } .hpm.t-B { background: var(--team-B); } .hpm.t-C { background: var(--team-C); } .hpm.t-D { background: var(--team-D); }
.hpm.tie { background: var(--surface-2); color: var(--muted); }
.egrid .sumpts { font-size: 14px; }

.egrid .nreset { display: flex; align-items: center; justify-content: center; margin: 4px auto 0; width: 26px; height: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 99px; font: 700 13px/1 var(--f-body); padding: 0; }
.egrid .nreset.armed { background: var(--under); border-color: var(--under); color: #fff; }

/* Hüllen für Kopf und Inhalt der Übersicht: ohne eigenes Layout, damit die Abstände der Seite gelten */
#pub-head, #pub-body { display: contents; }

/* Countdown in der Programm-Karte der nächsten Runde */
.prog-card.is-next { border: 2px solid var(--fairway); }
.prog-card.done { padding: 12px 16px; }
.prog-card.done .pc-title h3 { font-size: 18px; }

/* Programm: Links zum Platz */
.pc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--fairway, #1f7a4d);
  border: 1px solid var(--line, #dfe5df); border-radius: 99px; padding: 5px 11px; text-decoration: none; background: #fff; }
.pc-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-link:active { background: var(--surface-2); }

/* Reiterwechsel per Wischen */
#pub-body[data-slide="left"] > :not(.seg) { animation: slide-l .22s ease-out; }
#pub-body[data-slide="right"] > :not(.seg) { animation: slide-r .22s ease-out; }
@keyframes slide-l { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-r { from { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { #pub-body[data-slide] > * { animation: none; } }

/* Reiter: Breite nach Inhalt, damit «Ausschreibung» Platz hat */
.seg.n4, .seg.n5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
.seg.n4 button, .seg.n5 button { padding-left: 6px; padding-right: 6px; }

/* Ausschreibung */
.tender-pdf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tender-pdf .btn { flex: none; text-decoration: none; }
.tender-teams { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tender-teams li { display: flex; gap: 10px; align-items: flex-start; }
.tender-teams li > div { display: flex; flex-direction: column; gap: 3px; }
.tender-teams i { color: var(--muted); }
.tender-teams small { font-style: italic; color: var(--fairway); font-weight: 600; }
.tender-plan { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tender-plan li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.tender-plan span { display: flex; flex-direction: column; font-weight: 600; }
.tender-plan small { font-weight: 400; color: var(--muted); }
.tender-sub { margin: 4px 0 0; font-weight: 700; }

/* Titel wie in der ersten Version: schmale Grossbuchstaben, Jahr in Grün */
.title h1 { font: 700 min(49px, calc((100vw - 36px) / 10.7))/.95 var(--f-display); white-space: nowrap; text-transform: uppercase; letter-spacing: -.005em; color: var(--heading); }
.title h1 span { color: var(--fairway); }


/* Titel immer auf einer Zeile, Grösse folgt der Breite (10.7 = Textbreite in em) */
.title { container-type: inline-size; }
.title > div { width: 100%; }
@supports (font-size: 1cqi) { .title h1 { font-size: calc(100cqi / 10.7); } }

/* Titelkarte (dunkelgrün) mit Countdown */
.title.hero { background: var(--pine); color: var(--pine-ink, #fff); border-radius: 16px; padding: 18px 16px 16px; flex-direction: column; align-items: stretch; gap: 14px; position: relative; overflow: hidden; }
.title.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgb(255 255 255 / 6%); pointer-events: none; }
.title.hero h1 { color: #fff; }
.title.hero h1 span { color: #8FD6A8; }
.title.hero .sub { color: rgb(255 255 255 / 75%); }
.title > .hero-cd { display: flex; flex-direction: column; gap: 6px; }
.hero-cd small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.hero-cd .countdown { gap: 6px; }
.hero-cd .countdown div { background: rgb(255 255 255 / 10%); padding: 7px 4px 6px; }
.hero-cd .countdown b { font-size: 24px; }
.hero-cd .countdown span { font-size: 10px; }

/* Logo oben etwas grösser */
.brand-logo { height: 42px; }

/* Leaderboard (Teamwertung als Tabelle): Tageswerte in grauen Kästchen, Total als grünes Badge */
.lboard { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lboard th { font: 600 10.5px/1.1 var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 2px 2px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.lboard th.l, .lboard td.l { text-align: left; }
.lboard td { padding: 8px 2px; text-align: center; border-bottom: 1px solid var(--line); }
.lboard tr:last-child td { border-bottom: 0; }
.lboard td.pos { width: 20px; color: var(--muted); font: 600 17px/1 var(--f-display); text-align: left; }
.lboard td.l { font: 600 14px/1.25 var(--f-body); }
.lboard td.l div { display: flex; align-items: center; gap: 10px; }
.lboard td.l .tchip { flex: none; }
.lboard td.rd span { display: grid; place-items: center; min-height: 40px; background: var(--surface-2); border-radius: 8px; font: 600 17px/1 var(--f-display); }
.lboard td.rd.open span { color: #B5BFB3; font-weight: 500; }
.lboard td.tot { width: 52px; padding-left: 6px; }
.lboard td.tot span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; background: color-mix(in srgb, var(--fairway) 13%, var(--surface)); color: var(--fairway); }
.lboard td.tot b { font: 700 24px/1 var(--f-display); }
.lboard td.tot small { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.lboard tr.lead td.tot span { background: var(--fairway); color: var(--fairway-ink); }

/* Kleiner Team-Chip neben Spielernamen */
.tchip.sm { width: 18px; height: 18px; border-radius: 5px; font-size: 12px; margin-right: 7px; }
.list .tchip.sm, .flight-pick .tchip.sm { margin-right: 0; }
.egrid thead .tchip.sm { width: 16px; height: 16px; font-size: 11px; margin-right: 4px; }
.pn { white-space: nowrap; margin-right: 8px; display: inline-block; }
.pn .tchip.sm { margin-right: 5px; vertical-align: -3px; }