/* Dark, calm, one accent. Tokens match the redesign canvas ("Stil & Bausteine"). */
:root {
  --bg: #0b0c0b;
  --surface: #161816;
  --raised: #1d201d;
  --fill: #232623;
  --line: #272a27;
  --text: #f2f3f1;
  --muted: #a0a5a1;
  --faint: #6e736f;
  --accent: #3fcb7e;
  --accent-tint: #15311f;
  --live: #ff8a4c;
  --danger: #ff7a6b;
  --warn-bg: #2a2412;
  --warn: #f3d98b;
  --post: #0a2e1d;
  --radius: 20px;
  --font: Geist, system-ui, -apple-system, sans-serif;
  --display: Archivo, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.45 var(--font); min-height: 100vh; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; padding: calc(var(--safe-t) + 14px) 20px calc(104px + var(--safe-b)); max-width: 640px; margin: 0 auto; }
.view { display: flex; flex-direction: column; gap: 16px; }
.ic { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* type */
h1 { font: 800 38px/1.02 var(--display); font-stretch: 112%; letter-spacing: -.02em; margin: 2px 0 4px; }
h2 { font: 600 17px/1.3 var(--font); color: var(--text); margin: 0; }
h3, .label { font: 600 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
.eyebrow { font: 600 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow.accent { color: var(--accent); }
.eyebrow.live { color: var(--live); }
.hint { color: var(--muted); font-size: 14px; margin: 0; }
.block { display: block; }
.center { text-align: center; display: flex; justify-content: center; }
.center-row { justify-content: center; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.note { background: var(--warn-bg); color: var(--warn); border-radius: 14px; padding: 12px 14px; font-size: 14px; margin: 0; }

/* page heads */
.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-head .row { min-height: 40px; justify-content: space-between; }
.back { display: inline-flex; align-items: center; gap: 2px; margin-left: -8px; min-height: 44px; padding-right: 8px; background: none; border: 0; color: var(--text); font: 500 16px var(--font); cursor: pointer; }
.round-btn { width: 40px; height: 40px; border-radius: 20px; background: var(--fill); color: var(--text); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* cards */
.card { background: var(--surface); border: 0; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card.off { opacity: .55; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.hcard { background: var(--surface); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.hcard .title { font: 700 24px/1.1 var(--display); font-stretch: 106%; letter-spacing: -.01em; margin: 0; }
.hcard .sub { color: var(--muted); font-size: 14px; }
.hcard .top { display: flex; gap: 16px; align-items: flex-start; }
.hcard .top > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hcard .actions { display: flex; gap: 10px; }
/* Heute: archive of cards marked "Gepostet" */
.archive > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 6px 2px 10px; font: 600 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.archive > summary::-webkit-details-marker { display: none; }
.archive > summary .count { font-weight: 500; letter-spacing: 0; text-transform: none; }
.archive > summary .ic { transition: transform .2s; }
.archive[open] > summary .ic { transform: rotate(90deg); }
.rrow.archived { cursor: default; }
.rrow.archived .row { flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-s { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 8px; padding: 6px 10px; }
.tag-s { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--fill); border-radius: 8px; padding: 5px 8px; white-space: nowrap; }

/* rows inside cards */
.rows { display: flex; flex-direction: column; }
.rrow { display: flex; align-items: center; gap: 14px; padding: 10px 16px; min-height: 64px; width: 100%; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rows > .rrow + .rrow, .rows > .rrow + .rrow-sep { border-top: 1px solid var(--line); }
.rrow .t { font-size: 15px; font-weight: 500; line-height: 1.3; }
.rrow .s { font-size: 13px; color: var(--muted); line-height: 1.35; }
.rrow .when { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rrow .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tile-ic.accent { background: var(--accent-tint); color: var(--accent); }
.game-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.game-row .time { width: 58px; font: 700 18px var(--display); font-variant-numeric: tabular-nums; }
.game-row .time small { display: block; font: 600 11px var(--font); color: var(--muted); letter-spacing: .04em; }
.game-row .teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game-row .teams span:first-child { font-size: 14px; color: var(--muted); }
.game-row .teams span:last-child { font-size: 15px; font-weight: 600; }
.game-row.link { cursor: pointer; }
.changed { color: var(--live); font-size: 12px; font-weight: 600; }

/* controls */
input, select {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--fill); border: 1px solid transparent; border-radius: 12px; padding: 11px 12px; min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
input[type=date], input[type=time] { min-height: 46px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.field > span { font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.score { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.score input { text-align: center; }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); white-space: nowrap; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* iOS-style switch (a checkbox with class "switch") */
input.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: #3a3e3b; position: relative; cursor: pointer; flex: 0 0 auto; transition: background .15s; margin: 0; }
input.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { left: 22px; }
input.switch:disabled { opacity: .45; }

.btn {
  font: 600 16px/1 var(--font); color: var(--text); background: var(--fill); border: 0; border-radius: 999px;
  padding: 0 20px; min-height: 48px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.primary { background: var(--text); color: var(--bg); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.big { min-height: 52px; }
.btn.block { width: 100%; }
.btn.accent { background: var(--accent-tint); color: var(--accent); }
.btn:disabled { opacity: .4; }
.btn:active:not(:disabled) { transform: scale(.98); }
.icon-btn { background: var(--fill); border: 0; color: var(--text); font-size: 16px; min-width: 40px; min-height: 40px; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

.seg { display: flex; background: var(--fill); border-radius: 11px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; color: var(--muted); font: 500 14px var(--font); padding: 6px; border-radius: 9px; min-height: 34px; cursor: pointer; }
.seg button.on { background: #3a3e3b; color: var(--text); font-weight: 600; }

.topbar {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin: 0 -20px; padding: calc(var(--safe-t) + 6px) 12px 8px; background: rgba(11, 12, 11, .92); backdrop-filter: blur(14px);
}
.topbar > div:last-child { text-align: right; }
.topbar strong { font: 600 17px var(--font); }

/* screenshots */
.shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.shot { position: relative; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: none; padding: 0; border: 0; }
.shot img { display: block; height: 120px; width: auto; }
.shot-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; }

/* lists */
.list { display: flex; flex-direction: column; gap: 6px; }
.list-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--text); font: inherit;
  background: var(--raised); border: 0; border-radius: 14px; padding: 10px 14px; min-height: 58px; cursor: pointer;
}
.list-item b { display: block; font-weight: 500; }
.list-item small { color: var(--muted); font-size: 13px; }
.chev { color: var(--faint); display: inline-flex; }
.badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 700 14px var(--display); background: var(--fill); color: var(--text); flex: 0 0 auto; }
.badge.S { background: #1f6b45; } .badge.U { background: #4a4f4b; } .badge.N { background: #8f3a31; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; text-transform: uppercase; }
.tag.new { background: #22335a; color: #dbe6ff; }

/* goals */
.goal { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--raised); border-radius: 14px; }
.goal .min { width: 70px; flex: 0 0 70px; }

/* lineup editor */
.pitch {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 6px;
  background: repeating-linear-gradient(180deg, #0d3a22 0 36px, #0f4029 36px 72px); border-radius: 16px;
}
.pitch-row { display: flex; justify-content: space-around; gap: 4px; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 2px solid transparent;
  color: var(--text); font: 600 12px var(--font); padding: 4px 2px; border-radius: 10px; min-width: 0; flex: 1; max-width: 80px; cursor: pointer;
}
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chip.sel { border-color: var(--accent); background: rgba(63, 203, 126, .15); }
.chip.gk .thumb { outline: 2px solid #f0843a; border-radius: 50%; }
.prow { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prow .num { width: 64px; flex: 0 0 64px; text-align: center; }
.small-ctl { flex-wrap: wrap; gap: 6px; }
input.is-new { box-shadow: inset 3px 0 0 #6f95ea; }
.small-ctl select { width: auto; max-width: 110px; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.small-ctl .btn.small { padding: 0 10px; }
.toggle { min-width: 36px; min-height: 36px; border-radius: 10px; border: 0; background: var(--fill); color: var(--muted); font: 700 13px var(--font); cursor: pointer; }
.toggle.on { background: var(--text); color: var(--bg); }
.toggle.card-y, .toggle.card-r { min-width: 30px; width: 30px; position: relative; }
.toggle.card-y::after, .toggle.card-r::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 17px; border-radius: 2px; transform: translate(-50%, -50%) rotate(-8deg); border: 2px solid; }
.toggle.card-y::after { border-color: #f5c518; }
.toggle.card-r::after { border-color: #e0342f; }
.toggle.card-y.on { background: #3b3310; } .toggle.card-y.on::after { background: #f5c518; }
.toggle.card-r.on { background: #3d1412; } .toggle.card-r.on::after { background: #e0342f; }
.toggle.card-yr { min-width: 34px; width: 34px; position: relative; }
.toggle.card-yr::before, .toggle.card-yr::after { content: ''; position: absolute; top: 50%; width: 11px; height: 16px; border-radius: 2px; border: 2px solid; }
.toggle.card-yr::before { left: 9px; transform: translateY(-55%) rotate(-10deg); border-color: #f5c518; }
.toggle.card-yr::after { left: 14px; transform: translateY(-45%) rotate(6deg); border-color: #e0342f; }
.toggle.card-yr.on { background: #3d2412; } .toggle.card-yr.on::before { background: #f5c518; } .toggle.card-yr.on::after { background: #e0342f; }
.thumb { flex: 0 0 auto; }

/* table editor */
.trow { display: grid; grid-template-columns: 44px 1fr 44px 64px 48px 32px; gap: 4px; align-items: center; }
.trow input { padding: 8px 5px; min-height: 38px; font-size: 14px; }
.trow.head span { font-size: 12px; color: var(--muted); font-weight: 700; }

/* post previews */
.post-wrap { background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 24px 48px -20px rgba(0,0,0,.8); }
.post { display: block; width: 100%; height: auto; }
.post-wrap.story { max-width: 400px; margin: 0 auto; width: 100%; }
/* Spieltagspost: the slides side by side, swiped like on Instagram */
.slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 86%; max-width: 420px; margin: 0; scroll-snap-align: start; }
.slide figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }
.source { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0; }
.source .ic { color: var(--accent); }

/* mini posts (decorative thumbnails) */
.mini { flex: 0 0 auto; border-radius: 6px; background: var(--post); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 7px; }
.mini.story { width: 62px; height: 110px; background: linear-gradient(180deg, #0a2e1d, #04150d); border-radius: 8px; }
.mini.story i { display: block; background: #24493a; border-radius: 3px; height: 24px; }
.mini.story i.dot { width: 18px; height: 18px; border-radius: 9px; align-self: center; }
.mini.youth i { height: 9px; }
.mini.result { width: 48px; height: 60px; align-items: center; font: 800 13px var(--display); color: #fff; }
.mini.elf { width: 62px; height: 110px; border-radius: 8px; }
.mini.elf i { display: block; flex: 1; border-radius: 4px; background: #5a8a57; }
.mini.elf b { display: block; height: 6px; border-radius: 2px; background: #fff; width: 70%; }

/* story editor */
.grid2.sides { grid-template-columns: 1fr; }
.side { display: flex; flex-direction: column; gap: 8px; background: var(--raised); border-radius: 14px; padding: 10px; min-width: 0; }
.side input { padding: 9px; min-height: 42px; }
.form-ed { display: flex; gap: 6px; }
.form-box { width: 38px; height: 38px; border-radius: 9px; border: 1px dashed #3a3e3b; background: var(--fill); color: var(--muted); font: 800 16px var(--display); cursor: pointer; }
.form-box.S { background: #1f6b45; color: #fff; border: 0; }
.form-box.U { background: #4a4f4b; color: #fff; border: 0; }
.form-box.N { background: #8f3a31; color: #fff; border: 0; }

/* create tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 0; border-radius: 20px; padding: 8px 8px 14px; display: flex; flex-direction: column; gap: 10px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tile .pv { height: 150px; border-radius: 14px; background: #1f221f; display: flex; align-items: center; justify-content: center; }
.tile .pv .mini.result { width: 88px; height: 110px; font-size: 22px; }
.tile .pv .mini.story, .tile .pv .mini.elf { width: 68px; height: 120px; }
.tile .nm { font-size: 15px; font-weight: 600; padding: 0 6px; }
.tile .ds { font-size: 13px; color: var(--muted); padding: 0 6px; margin-top: -8px; }

/* squad */
.people { display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 16px; min-height: 64px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.people > .person:first-child { border-top: 0; }
.person .thumb { border-radius: 50%; }
.pname { font-weight: 500; font-size: 15px; }
.person small { color: var(--muted); font-size: 13px; display: block; }
.search { display: flex; align-items: center; gap: 10px; background: var(--fill); border-radius: 12px; padding: 0 14px; color: var(--muted); }
.search input { background: transparent; padding-left: 0; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.logo-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; }
.logo-item small { font-size: 11px; text-align: center; line-height: 1.2; }
.assign-img { max-width: 100%; max-height: 40vh; display: block; margin: 0 auto; border-radius: 12px; }

/* tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(16, 18, 16, .94); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
  padding: 8px 8px calc(8px + var(--safe-b));
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--muted);
  font: 500 10.5px var(--font); padding: 4px 0; min-height: 50px; cursor: pointer; white-space: nowrap; letter-spacing: -.01em;
}
.tabbar button .ic { stroke-width: 1.6; }
.tabbar button.on { color: var(--text); font-weight: 600; }
.tabbar button.on .ic { stroke-width: 2; }

/* overlays */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; transition: .25s;
  background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-weight: 600; z-index: 100; max-width: calc(100% - 32px);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.busy { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; white-space: pre-line; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; background: var(--surface);
  border-radius: 24px 24px 0 0; padding-bottom: var(--safe-b);
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 4px 20px; }
.sheet-head strong { font: 700 20px var(--display); }
.sheet-body { overflow-y: auto; padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.sheet-actions { display: flex; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.sheet-actions .btn { flex: 1; }

/* cropper */
.cropper { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; padding: var(--safe-t) 0 calc(12px + var(--safe-b)); }
.cropper-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
.cropper-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.cropper-stage canvas { touch-action: none; border-radius: 4px; }
.cropper-zoom { display: flex; align-items: center; gap: 12px; padding: 8px 24px; color: var(--muted); font-size: 22px; }
.cropper-zoom input { flex: 1; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--accent); }

/* collapsible fallbacks */
details.fallback summary, details.mini-fallback summary { cursor: pointer; list-style: none; }
details.fallback summary::-webkit-details-marker, details.mini-fallback summary::-webkit-details-marker { display: none; }
details.fallback summary h2 { display: inline; color: var(--muted); }
details.fallback summary::after, details.mini-fallback summary::after { content: ' ▾'; color: var(--muted); }
details.fallback[open] > *:not(summary) { margin-top: 10px; }
details.mini-fallback { font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
details.mini-fallback[open] > .row { margin-top: 8px; }
.score-tag { font: 700 18px var(--display); font-variant-numeric: tabular-nums; }

textarea.caption {
  width: 100%; font: 15px/1.5 var(--font); color: var(--text); background: var(--fill);
  border: 0; border-radius: 14px; padding: 12px 14px; resize: vertical; min-height: 220px;
}

/* live */
.badge-live { font: 700 13px var(--font); letter-spacing: .06em; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: var(--fill); }
.badge-live.on { color: var(--live); background: rgba(255, 138, 76, .12); }
.live-board { background: #1a1d1a; box-shadow: inset 0 0 0 1px #2c302c; border-radius: 24px; }
.live-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; font: 500 14px/1.3 var(--font); color: #c9cdca; }
.live-score b { font: 800 52px var(--display); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.list-item.muted { opacity: .5; cursor: default; }
.list-item.sel { box-shadow: inset 0 0 0 2px var(--accent); }
label.list-item input[type=checkbox] { flex: 0 0 auto; }
.live-editor { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.min-mono { font-family: var(--mono); font-size: 14px; width: 48px; flex: 0 0 48px; }

/* dashboard details */
button.game-row { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; }
.game-row .teams .h { font-size: 14px; color: var(--muted); }
.game-row .teams .a { font-size: 15px; font-weight: 600; }
.rows.inset { background: var(--raised); border-radius: 14px; overflow: hidden; }
.rows.inset > .rrow + .rrow { border-top: 1px solid var(--line); }
.switch-row { cursor: pointer; min-height: 58px; }
.mini.lineup { width: 88px; height: 110px; justify-content: space-around; padding: 10px 6px; background: var(--post); }
.mini.lineup .r { display: flex; justify-content: space-around; }
.mini.lineup i { display: block; width: 10px; height: 10px; border-radius: 5px; background: #cfe9d8; box-shadow: 0 0 0 1px #3ddc6b; }
.mini.story.tor { background: var(--post); align-items: center; }
.mini.story.tor b { font: 900 14px var(--display); color: #3ddc6b; }
.mini.story.tor i.dot { width: 30px; height: 30px; border-radius: 15px; background: #cfe9d8; box-shadow: 0 0 0 2px #3ddc6b; }
.mini.story.tor i:last-child { width: 100%; height: 14px; background: #193629; }
.mini.sched { width: 88px; height: 110px; gap: 5px; padding: 9px 7px; }
.mini.sched b { display: block; height: 9px; width: 60%; border-radius: 2px; background: #fff; margin-bottom: 2px; }
.mini.sched i { display: block; height: 14px; border-radius: 3px; background: #193629; box-shadow: inset 3px 0 0 #3ddc6b; }
.tile .pv .mini.story.tor b { font-size: 16px; }

/* result ticks + where the results are entered */
.ticks { width: 58px; height: 58px; border-radius: 18px; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ticks .ic + .ic { margin-left: -15px; }
.ticks.done { background: var(--accent-tint); color: var(--accent); }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.src-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: var(--fill); color: var(--faint); }
.src-chip.ok { background: var(--accent-tint); color: var(--accent); }
.pending { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* number field with a fixed unit (minute ') */
.unit-field { position: relative; }
.unit-field input { padding-right: 28px; }
.unit-field .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.unit-field input::-webkit-inner-spin-button, .unit-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.unit-field input { -moz-appearance: textfield; }

/* youth list: checkbox + text + score, edit button at the end */
.youth-row { padding-right: 8px; }
.youth-row > label { cursor: pointer; min-width: 0; }

/* one post view: Instagram-style text, fixed action bar above the tab bar */
.ig-caption { gap: 10px; }
.ig-head { display: flex; align-items: center; gap: 10px; }
.ig-head canvas { border-radius: 50%; }
textarea.caption.ig { background: transparent; border: 0; padding: 0; font: 15px/1.5 var(--font); color: #d9dcd9; min-height: 140px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 0; border-radius: 16px; min-height: 36px; padding: 0 14px; font: 600 14px var(--font); background: var(--fill); color: var(--muted); cursor: pointer; }
.chip-btn.on { background: var(--text); color: var(--bg); }
.chip-btn.ghost { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.actionbar { position: sticky; bottom: calc(68px + var(--safe-b)); z-index: 5; display: flex; gap: 10px; padding: 12px 0; margin: 0 -20px; padding-inline: 20px; background: var(--bg); border-top: 1px solid var(--line); }
.actionbar .btn { min-height: 52px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.btn.icon-only { width: 52px; padding: 0; flex: 0 0 52px; }
.slides.story .slide { flex-basis: 70%; max-width: 300px; }

/* Heute 2.0: week strip, compact list, swipe = gepostet */
.home2 { gap: 14px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week .day { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; border-radius: 14px; }
.week .day.today { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.week .wd { font: 600 11px var(--font); color: var(--faint); }
.week .day.today .wd { color: var(--accent); font-weight: 700; }
.week .dn { font: 600 16px var(--font); font-variant-numeric: tabular-nums; }
.week .dots { display: flex; gap: 3px; min-height: 6px; }
.week .dots i { width: 6px; height: 6px; border-radius: 3px; }
.week .dots i.ready { background: var(--accent); }
.week .dots i.posted { background: var(--faint); }
.week .dots i.soon { box-shadow: inset 0 0 0 1.5px var(--muted); }
.week .dots i.game { box-shadow: inset 0 0 0 1.5px var(--live); }
.week-sum { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.hsec { display: flex; flex-direction: column; gap: 8px; }
.hsec-head { display: flex; justify-content: space-between; align-items: baseline; }
.hsec-head h3 { margin: 0; }
.hsec-head .count { font-size: 13px; font-weight: 600; color: var(--accent); }
.hlist { background: var(--surface); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.hrow-wrap { position: relative; border-bottom: 1px solid var(--line); }
.hrow-wrap:last-child { border-bottom: 0; }
.hrow-wrap.swipe { background: var(--accent); }
.hrow-done { position: absolute; right: 0; top: 0; bottom: 0; width: 110px; border: 0; background: var(--accent); color: #04150d; font: 700 12px var(--font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.hrow { position: relative; z-index: 1; width: 100%; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 0; color: inherit; font: inherit; text-align: left; touch-action: pan-y; transition: transform .18s ease; cursor: pointer; }
.hrow .chev { align-self: center; }
.hrow .ticks { width: 44px; height: 44px; border-radius: 14px; align-self: center; }
.hrow .ticks .ic { width: 20px; height: 20px; }
.hrow .ticks .ic + .ic { margin-left: -11px; }
.hthumb { flex: 0 0 44px; }
.hrow .mini { width: 44px; height: 56px; padding: 5px; gap: 3px; border-radius: 7px; box-sizing: border-box; }
.hrow .mini.story i { height: 11px; }
.hrow .mini.story i.dot { width: 10px; height: 10px; border-radius: 5px; }
.hrow .mini.story.youth i { height: 5px; }
.hrow .mini.story.tor b { font-size: 8px; }
.hrow .mini.story.tor i.dot { width: 14px; height: 14px; border-radius: 7px; }
.hrow .mini.story.tor i:last-child { height: 6px; }
.hrow .mini.result { font-size: 12px; }
.hrow .mini.elf b { height: 4px; }
.hrow .mini.sched b { height: 5px; }
.hrow .mini.sched i { height: 7px; }
.htxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ht { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ht .title { font: 600 16px/1.3 var(--font); }
.hs { font-size: 13px; color: var(--muted); line-height: 1.35; }
.hlines { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.gline { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.gmain { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.glead { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.gteams { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gline .tag-s { padding: 2px 6px; font-size: 11px; }
.gline .src-chip { padding: 2px 6px; font-size: 11px; }
.gline .pending { margin-top: 0; }
.status { font: 700 11px var(--font); letter-spacing: .06em; padding: 3px 7px; border-radius: 7px; }
.status.accent { color: var(--accent); background: var(--accent-tint); }
.status.live { color: var(--live); background: #2a1a10; }
.hrow.live .ht .title { color: var(--text); }
.swipe-hint { margin: -2px 0 0; font-size: 12px; color: var(--faint); }
.soon { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 0; }
.soon-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.soon-row .when { width: 116px; flex: 0 0 116px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.soon-row i { width: 8px; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--muted); flex: 0 0 8px; }
.empty-home h2 { margin: 0; }

/* Erstellen nach Spielablauf */
.create2 { gap: 14px; }
.frow { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 14px; min-height: 64px; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.frow:last-child { border-bottom: 0; }
.frow .mini { width: 38px; height: 48px; padding: 4px; gap: 3px; border-radius: 6px; box-sizing: border-box; }
.frow .hthumb { flex: 0 0 38px; }
.frow .mini.story i { height: 9px; }
.frow .mini.story i.dot { width: 9px; height: 9px; border-radius: 5px; }
.frow .mini.story.youth i { height: 4px; }
.frow .mini.story.tor b { font-size: 7px; }
.frow .mini.story.tor i.dot { width: 12px; height: 12px; border-radius: 6px; }
.frow .mini.story.tor i:last-child { height: 5px; }
.frow .mini.result { font-size: 10px; }
.frow .mini.elf b { height: 4px; }
.frow .mini.sched b { height: 4px; }
.frow .mini.sched i { height: 6px; }
.frow .mini.lineup { padding: 5px 3px; }
.frow .mini.lineup i { width: 5px; height: 5px; }
.frow .status { flex: 0 0 auto; }
.status.muted { color: var(--muted); background: var(--fill); }

/* Live 2.0: scoreboard with crests, timeline */
.live2 .live-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.live2 .live-score .side { background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--muted); }
.live2 .live-score .side canvas { border-radius: 50%; }
.live2 .live-score .side .ours { color: var(--text); font-weight: 600; }
.live2 .live-score b { font: 900 56px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.timeline { position: relative; display: flex; flex-direction: column; padding-left: 4px; }
.timeline::before { content: ''; position: absolute; left: 61px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.tl-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 48px; }
.tl-min { width: 46px; flex: 0 0 46px; text-align: right; font: 500 13px var(--mono); color: var(--faint); }
.tl-row.ours .tl-min { color: var(--accent); }
.tl-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 6px; background: var(--fill); position: relative; z-index: 1; }
.tl-dot.ours { background: var(--accent); }
.tl-dot.ring { background: var(--bg); box-shadow: inset 0 0 0 2px var(--muted); }
.tl-txt { display: flex; flex-direction: column; min-width: 0; }
.tl-txt b { font-size: 15px; font-weight: 600; }
.tl-row.ours .tl-txt b { font-weight: 700; }
.tl-row.theirs .tl-txt b { color: var(--muted); font-weight: 500; }
.tl-txt small { font-size: 12px; color: var(--muted); }
.tl-row.sel { background: var(--accent-tint); border-radius: 12px; }
.live2 .actionbar .btn { padding: 0 14px; }

/* ---------- Einrichtung (js/onboarding.js) ---------- */
body.ob-open { overflow: hidden; }
.ob { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ob-inner { max-width: 560px; margin: 0 auto; padding: calc(var(--safe-t) + 20px) 20px 0; display: flex; flex-direction: column; gap: 16px; min-height: 100%; box-sizing: border-box; }
.ob h1 { font: 800 32px/1.08 var(--display); font-stretch: 110%; letter-spacing: -.015em; margin: 0; }
.ob-lead { color: var(--muted); font-size: 16px; line-height: 1.45; margin: 0; }
.ob-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 12px; }
.ob-logo { width: 60px; height: 60px; border-radius: 18px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.ob-logo.done { background: var(--accent); color: var(--bg); }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--fill); }
.ob-dots i.done, .ob-dots i.on { background: var(--accent); }
.ob-dots i.on { opacity: .55; }
.ob-points { display: flex; flex-direction: column; gap: 10px; }
.ob-point { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 12px 14px; }
.ob-point > div { display: flex; flex-direction: column; gap: 3px; }
.ob-point span:not(.tile-ic) { color: var(--muted); font-size: 14px; line-height: 1.4; }
.ob-nav { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin: auto -20px 0; padding: 14px 20px calc(var(--safe-b) + 14px);
  background: linear-gradient(to bottom, transparent, var(--bg) 22%); z-index: 2; }
.ob-nav .btn { min-height: 52px; }
.ob-nav .btn.primary { flex: 1; }
.ob-nav .btn.ghost { flex: 0 0 auto; padding: 0 18px; }
.linkish.center { text-align: center; align-self: center; }
.ob-search { display: flex; gap: 8px; }
.ob-search input { flex: 1; min-width: 0; }
.ob-error { color: var(--warn); background: var(--warn-bg); border-radius: 12px; padding: 10px 12px; margin: 0; font-size: 14px; line-height: 1.4; }
.ob-found { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 12px 14px; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ob-found img { width: 44px; height: 44px; object-fit: contain; }
.ob-found > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-found span { color: var(--muted); font-size: 13px; }
.ob-found .ok { color: var(--accent); }
.linkish { background: none; border: 0; color: var(--accent); font: 600 15px var(--font); padding: 6px 0; text-align: left; cursor: pointer; }
.ob-list { display: flex; flex-direction: column; gap: 8px; }
.ob-team { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 16px; padding: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.ob-team.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ob-team input { width: 22px; height: 22px; accent-color: var(--accent); }
.ob-team .num { font: 800 20px var(--display); color: var(--accent); width: 26px; }
.ob-team > div { display: flex; flex-direction: column; gap: 2px; }
.ob-team > div span { color: var(--muted); font-size: 13px; }
.ob-design { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ob-preview, .theme-preview { width: 46%; min-width: 150px; max-width: 240px; aspect-ratio: 4 / 5; height: auto; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45); background: var(--post); }
.ob-design-side { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 14px; }
.ob-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ob-swatch { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.ob-swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.ob-colors { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ob-design-side > .btn { align-self: flex-start; }
.ob-color { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ob-color input { width: 36px; height: 36px; border: 0; padding: 0; border-radius: 10px; background: none; }
.ob-emoji { background: var(--fill); border: 0; border-radius: 10px; padding: 6px 10px; font-size: 18px; cursor: pointer; }
.ob-emoji.on { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-tint); }
.ob-sum { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ob-sum span { color: var(--muted); }
.ob-sum b { text-align: right; }

/* ---------- Tour + Hilfe (js/help.js) ---------- */
.tour { position: fixed; inset: 0; z-index: 70; }
.tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0,0,0,.72); transition: all .25s; pointer-events: none; }
.tour-bubble { position: fixed; width: 300px; max-width: calc(100vw - 24px); box-sizing: border-box; background: var(--raised); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.tour-bubble small { color: var(--accent); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tour-bubble b { font: 700 20px var(--display); }
.tour-bubble p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.tour-bubble .row { justify-content: flex-end; }
.help p { margin: 0 0 10px; line-height: 1.5; }
.help ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; font-size: 14px; }
.row.gap-s { gap: 8px; }
.ob-auth .btn.block { margin-top: 4px; }
.ob-info { color: var(--text); background: var(--accent-tint); border-radius: 12px; padding: 10px 12px; margin: 0; font-size: 14px; line-height: 1.4; }
.ob-join { display: flex; flex-direction: column; }
.licence { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.licence .badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 8px; padding: 5px 9px; background: var(--accent-tint); color: var(--accent); }
.licence .badge.off { background: var(--warn-bg); color: var(--warn); }
.lock { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lock > div { max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.lock h1 { font: 800 28px/1.1 var(--display); margin: 0; }
.lock p { color: var(--muted); line-height: 1.5; margin: 0; }
.admin-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.admin-row .row { flex-wrap: wrap; gap: 8px; }
.code { font: 700 26px var(--mono); letter-spacing: .14em; color: var(--accent); }
.ob-link { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: var(--radius); padding: 14px; }
.ob-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ob-label .req { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 6px; padding: 3px 7px; }
.ob-link .ob-search { flex-wrap: wrap; }
.ob-link .ob-search input { flex: 1 1 100%; }
.ob-link .ob-search .btn { flex: 1; }
.ob-how summary { color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; padding: 2px 0; }
.ob-how ol { margin: 8px 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.ob-how code { font: 12px var(--mono); color: var(--text); word-break: break-all; }
.ob-how .btn { align-self: flex-start; margin-top: 4px; }
.ob-how { display: flex; flex-direction: column; }
.tip { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-tint); border-radius: var(--radius); padding: 14px; }
.tip b { display: block; font-size: 15px; margin-bottom: 4px; }
.tip p { margin: 0; color: var(--text); opacity: .85; font-size: 14px; line-height: 1.45; }
.tip .icon-btn { flex: 0 0 auto; }

/* Einstellungen */
h3.sec { margin: 14px 2px -2px; font: 600 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
details.more > summary, details.more-card > summary { cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: 14px; }
details.more > summary::-webkit-details-marker, details.more-card > summary::-webkit-details-marker { display: none; }
details.more[open] { display: flex; flex-direction: column; gap: 12px; }
details.more-card > summary { display: flex; flex-direction: column; gap: 2px; color: var(--text); font-size: 16px; }
details.more-card[open] > summary { margin-bottom: 4px; }
details.more-card > section.card { background: var(--raised); }
/* drag & drop in the line-up editor (starters only) */
.chip img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.chip.dragging { opacity: .35; }
.chip.drop-over { border-color: var(--accent); background: var(--accent-tint); }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 68px; opacity: .92; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.5); }