:root {
  --bg: #0f1b2d;
  --bg2: #16263d;
  --card: #1b2d47;
  --line: #2b4164;
  --text: #eef3fb;
  --muted: #9fb0c8;
  --gold: #f2c14e;
  --red: #d9534f;
  --green: #4fc27a;
  --blue: #5aa9ff;
  --late: #f59e5b;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, #24406a 0%, var(--bg) 55%) fixed;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.2; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
code { background: var(--bg2); padding: .1em .35em; border-radius: 6px; font-size: .9em; }
code.wrap { word-break: break-all; display: inline-block; }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem;
  padding: .7rem 1rem; background: rgba(15,27,45,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; color: var(--text); font-size: 1.05rem; }
.brand .star { color: var(--gold); }
.top nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.top nav a { color: var(--muted); }
.top nav a:hover { color: var(--text); text-decoration: none; }
.who { margin-left: auto; font-size: .9rem; color: var(--muted); }
.who a { margin-left: .6rem; }

main { flex: 1; width: min(1000px, 100%); min-width: 0; margin: 0 auto; padding: 1rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.card { min-width: 0; }
.card.narrow { max-width: 620px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table.board { margin: 0; }
.card.center { text-align: center; max-width: 520px; margin: 3rem auto; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem; }

.flash { padding: .6rem .9rem; border-radius: 10px; margin-bottom: .8rem; background: #1e3a2a; border: 1px solid var(--green); }
.flash.error { background: #3b1f22; border-color: var(--red); }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.tag { font-size: .7rem; background: var(--bg2); border: 1px solid var(--line); padding: 0 .4em; border-radius: 999px; color: var(--muted); vertical-align: middle; }
.fire { margin-left: .3em; }

.row { display: flex; align-items: center; gap: .6rem; }
.row.between { justify-content: space-between; flex-wrap: wrap; }
.row.gap { gap: .8rem; } .row.wrap { flex-wrap: wrap; }
.grid2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.streak { display: flex; align-items: baseline; gap: .4rem; color: var(--muted); }
.streak .big, .stat .big { font-size: 2rem; font-weight: 800; color: var(--gold); }
.runstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .4rem 0 .7rem; }
.runstats .stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem;
  display: flex; flex-direction: column; line-height: 1.15; text-align: left; color: var(--muted); }
.runstats .stat .big { font-size: 1.6rem; }
.runstats .stat .lbl { font-size: .75rem; }
.runstats .stat .big small { font-size: .55em; font-weight: 600; color: var(--muted); }
.weeks { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.2rem 0 .7rem; }
.week { font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--bg2); }
.week.ok { border-color: var(--green); color: var(--text); background: #1f4d35; }
.week.running { border-color: var(--gold); border-style: dashed; color: var(--text); }
.week.missed { border-color: var(--red); background: #3a2226; }
.week.future { opacity: .5; }
/* Einklappbare Admin-Karten */
details.card.fold > summary { cursor: pointer; list-style: none; }
details.card.fold > summary::-webkit-details-marker { display: none; }
details.card.fold > summary h2 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
details.card.fold > summary h2::before { content: "▸"; color: var(--muted); }
details.card.fold[open] > summary h2::before { content: "▾"; }
details.card.fold[open] > summary { margin-bottom: .6rem; }
.tag.danger-tag { color: var(--red); border-color: var(--red); }

/* Teilen-Bild */
.share-preview { margin: .8rem 0 1rem; }
.share-preview canvas { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; background: var(--bg2); }
#share-status, .admin-image .status { margin: .4rem 0 0; }
.mode-switch { margin-top: .4rem; }
a.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Challenge-Info */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: .8rem 0 1rem; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; }
.info-text { border-left: 3px solid var(--gold); padding: .2rem 0 .2rem .9rem; margin: 0 0 1.2rem; }
.info-text p { margin: 0 0 .7rem; }
.top .switch { display: inline-flex; align-items: center; gap: .35rem; }
.top .chinfo { color: var(--gold); text-decoration: none; }
details.chbox label.wide { flex-basis: 100%; } details.chbox textarea { width: 100%; }

/* Rechtliches */
form.legal textarea { width: 100%; }
.legal-page h2 { margin-top: 1.6rem; color: var(--gold); }
.legal-page h3 { margin-top: 1rem; }
.legal-page table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.legal-page th, .legal-page td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-page .missing { color: var(--red); }

/* Challenges */
.top .chname { font-size: .85rem; color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .6rem; }
.top .chname:hover { text-decoration: none; border-color: var(--gold); }
.top .switch select { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: .2rem .4rem; font-size: .85rem; max-width: 12rem; }
ul.chlist { list-style: none; padding: 0; margin: 0; }
ul.chlist li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 0;
  border-bottom: 1px solid var(--line); }
ul.chlist li.current { border-left: 3px solid var(--gold); padding-left: .6rem; }
.tag.ok { color: var(--green); border-color: var(--green); }
details.chbox { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin: .5rem 0; background: var(--bg2); }
details.chbox summary { cursor: pointer; }
details.chbox form { margin-top: .6rem; }
details.chbox .members .people { margin: .3rem 0; }
@media (max-width: 600px) { .top .switch { order: 2; } .top .switch select { max-width: 9.5rem; } }
@media (max-width: 600px) {
  .runstats { gap: .3rem; } .runstats .stat { padding: .35rem .4rem; }
  .runstats .stat .big { font-size: 1.3rem; } .runstats .stat .lbl { font-size: .66rem; }
}

/* Türchen */
.doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; margin: .8rem 0; }
.door {
  position: relative; aspect-ratio: 1; border-radius: 12px; padding: .5rem .55rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  overflow: hidden; transition: transform .1s;
}
a.door:hover { transform: translateY(-2px); text-decoration: none; }
.door.static { cursor: default; }
.door .num { font-weight: 800; font-size: 1.3rem; color: var(--gold); line-height: 1; }
.door .game { font-size: .78rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.door .more { position: absolute; top: .4rem; right: .5rem; font-size: .7rem; color: var(--muted); }
.door.done { background: linear-gradient(160deg, #1f4d35, #163a28); border-color: var(--green); }
.door.covered { background: linear-gradient(160deg, #2b4a6e, #1d3450); border-color: var(--blue); }
.door.missed { background: #3a2226; border-color: var(--red); }
.door.missed .num { color: var(--red); }
.door.future { opacity: .55; }
.door.open { border-style: dashed; }
.door.today { border-color: var(--gold); }
.door.has-img { background-image: linear-gradient(180deg, rgba(15,27,45,.35), rgba(15,27,45,.92) 70%), var(--img);
  background-size: cover; background-position: center; }
.door.has-img.done { box-shadow: inset 0 0 0 2px var(--green); }
.door.has-img.covered { box-shadow: inset 0 0 0 2px var(--blue); }
.door.has-img .num { text-shadow: 0 1px 3px #000; }
.gamelabel { display: inline-flex; align-items: center; gap: .45rem; }
img.thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--bg2); flex: none; vertical-align: middle; }
a.bgg { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 .45em; white-space: nowrap; }
a.bgg:hover { color: var(--text); text-decoration: none; border-color: var(--muted); }
input.bggid { width: 9em; }
details.bggform { flex-basis: 100%; }
details.bggform summary { color: var(--blue); cursor: pointer; display: inline; }
details.bggform form { margin-top: .3rem; } details.bggform input { width: 16em; max-width: 100%; }
details.bggform p { margin: .2rem 0 0; }
ul.plays li.dayplay { flex-wrap: nowrap; align-items: flex-start; gap: .9rem; }
.dayplay img.cover { width: 120px; max-height: 140px; object-fit: contain; object-position: top; border-radius: 8px; flex: none; }
.dayplay-body { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; min-width: 0; }
.dayplay-body .gamelabel strong { font-size: 1.1rem; }
@media (max-width: 480px) { .dayplay img.cover { width: 84px; } }
/* Gesamtübersicht */
.ov-scroll { overflow-x: auto; margin: .6rem -.2rem; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
table.ov { border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
.ov th { color: var(--muted); font-weight: 600; text-align: center; padding: 0 .1rem; min-width: 34px; }
.ov th.ov-today { color: var(--gold); }
.ov .ov-name { position: sticky; left: 0; z-index: 3; background: var(--card); text-align: left; padding: 0 .6rem 0 .2rem;
  white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.ov .ov-name a { color: var(--text); }
.ov-cell { width: 34px; height: 34px; padding: 0; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line);
  position: relative; text-align: center; color: var(--muted); }
.ov-cell a, .ov-cell .ov-in { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text); text-decoration: none; }
.ov-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.ov-cell.done { background: #1f4d35; border-color: var(--green); }
.ov-cell.covered { background: #2b4a6e; border-color: var(--blue); }
.ov-cell.missed { background: #3a2226; border-color: var(--red); color: var(--red); }
.ov-cell.future { opacity: .45; }
.ov-cell.today { border-color: var(--gold); border-style: dashed; }
.ov-cell.late::after { content: ""; position: absolute; left: 3px; bottom: 3px; z-index: 1; width: 8px; height: 8px;
  border-radius: 50%; background: var(--late); box-shadow: 0 0 0 1.5px var(--bg); }
.ov-abbr { font-weight: 700; font-size: .7rem; }
.ov-more { position: absolute; top: 2px; right: 2px; z-index: 1; background: var(--gold); color: #1b1b1b; font-size: .6rem; font-weight: 800;
  border-radius: 999px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; }
.ov-more.static { position: static; display: inline-block; margin-right: .2rem; }
.ov-streak { text-align: center; color: var(--gold); padding: 0 .4rem; }
.ov .short { display: none; }

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  .top { padding: .5rem .8rem .3rem; gap: .2rem .8rem; }
  .brand { font-size: .98rem; }
  .who { font-size: .8rem; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .who a { margin-left: .4rem; }
  .top nav { order: 3; width: 100%; gap: .15rem .95rem; padding: .2rem 0 .3rem; }
  .top nav a { white-space: nowrap; font-size: .92rem; }
  main { padding: .6rem; }
  .card { padding: .9rem .8rem; border-radius: 12px; }
  h1 { font-size: 1.3rem; }
  .doors { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; }
  .door { padding: .4rem .45rem; border-radius: 10px; }
  .door .num { font-size: 1.1rem; }
  .board th, .board td { padding: .4rem .35rem; }
  .ov .full { display: none; } .ov .short { display: inline; }
  .ov .ov-name { max-width: 5.5rem; padding-right: .35rem; }
  .ov th { min-width: 30px; font-size: .7rem; }
  .ov-cell { width: 30px; height: 30px; border-radius: 6px; }
  .ov-cell img { border-radius: 5px; }
  .legend { gap: .25rem .7rem; }
}

form.merge { margin: .6rem 0 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
form.merge h2 { margin-bottom: .4rem; }
form.merge label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
form.merge .arrow { font-size: 1.4rem; color: var(--gold); align-self: flex-end; padding-bottom: .3rem; }
form.merge .row { align-items: flex-end; }
.merge-preview { margin: .6rem 0 0; }
.danger-text { color: var(--red); } .ok-text { color: var(--green); }
.door .games { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.door .games .game { font-size: .72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.door .games .game.counted { color: var(--text); font-weight: 600; }
.door .games.single .game { font-size: .78rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.door .games .game.late, .late { color: var(--late); }
.door .games .game.late::before { content: "↺ "; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: .2rem 0 .6rem; }
.legend .swatch { display: inline-block; width: .8em; height: .8em; border-radius: 3px; border: 1px solid var(--line); vertical-align: middle; margin-right: -.5rem; }
.legend .swatch.done { background: #1f4d35; border-color: var(--green); }
.legend .swatch.covered { background: #2b4a6e; border-color: var(--blue); }
.legend .swatch.missed { background: #3a2226; border-color: var(--red); }

/* Tabellen & Listen */
table.board { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.board th, .board td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.board th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.board tr.out td { color: var(--muted); }
ul.plays { list-style: none; padding: 0; margin: 0; }
ul.plays li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
ul.plays .date { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 3.2em; }
ol.cols { columns: 2; column-gap: 2rem; } @media (min-width: 760px) { ol.cols { columns: 3; } }
.records li { margin: .4rem 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }
.stat { background: var(--bg2); border-radius: 12px; padding: .8rem; text-align: center; color: var(--muted); display: flex; flex-direction: column; }
canvas#cloud { width: 100%; display: block; background: var(--bg2); border-radius: 12px; }

/* Formulare */
.form { display: flex; flex-direction: column; gap: .9rem; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]), select, textarea {
  background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; width: 100%;
}
input.plain { width: auto; padding: .3rem .5rem; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
legend { color: var(--muted); padding: 0 .3em; }
.people { display: grid; grid-template-columns: 1fr; gap: .3rem; }
@media (min-width: 560px) { .people { grid-template-columns: 1fr 1fr; } }
.person-row { display: flex; align-items: center; gap: .4rem; }
.person-row .chk { flex: 1; }
label.chk, label.win { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); cursor: pointer; }
input.score { width: 5.5em; padding: .3rem .4rem; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 1.4rem; text-align: center; cursor: pointer; }
.drop input { display: none; }
.drop.has { border-color: var(--green); }
details summary { cursor: pointer; }
.btn {
  display: inline-block; background: var(--gold); color: #1a1a1a; font-weight: 700; border: 0;
  padding: .6rem 1rem; border-radius: 10px; cursor: pointer; text-decoration: none !important;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--red); color: #fff; }
button.link { background: none; border: 0; color: var(--blue); cursor: pointer; padding: 0 .3em; font-size: .85rem; }
button.link.danger { color: var(--red); }
form.inline { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.newname { margin-top: .3rem; }

/* Heatmap (Auswertung): Kalender Mo–So, Farbe aus --an (Partien) bzw. --am (Zeit), Umschalten per Radio ohne JS */
.hm-switch { display: flex; gap: .8rem; font-size: .9rem; }
.hm-switch label { display: flex; flex-direction: row; align-items: center; gap: .3rem; margin: 0; }
.hm-switch input { width: auto; margin: 0; }
table.hm-cal { border-collapse: separate; border-spacing: 6px; width: calc(100% + 12px); margin: .4rem -6px; table-layout: fixed; }
@media (min-width: 761px) { .hm-cell { height: 68px; padding: 6px 8px; } .hm-v { font-size: 1.35rem; line-height: 1.9; } .hm-day { font-size: .75rem; } }
.hm-cal th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.hm-cell { height: 54px; padding: 4px; border-radius: 8px; position: relative; vertical-align: top;
  color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.85); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold) calc(var(--an) * 100%), var(--bg2)); }
.hm-cell.hm-today { border-color: var(--gold); border-style: dashed; }
.hm-cell.hm-future { opacity: .45; }
.hm-day { display: block; font-size: .68rem; color: var(--text); opacity: .8; line-height: 1; }
.hm-info { min-height: 1.5em; margin: .2rem 0 0; }
.hm-v { display: block; text-align: center; font-weight: 800; font-size: 1.05rem; line-height: 1.6; }
.hm-cell.hm-u::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 1px var(--bg); }
.hm-cell:focus { outline: 2px solid var(--text); }
.hm-empty { background: transparent; }
#heatmap .hm-m { display: none; }
#heatmap:has(#hm-time:checked) .hm-cell { background: color-mix(in srgb, var(--blue) calc(var(--am) * 100%), var(--bg2)); }
#heatmap:has(#hm-time:checked) .hm-n { display: none; }
#heatmap:has(#hm-time:checked) .hm-m { display: inline; }
.hm-scale { display: inline-block; width: 4em; height: .8em; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, var(--bg2), var(--gold)); }
#heatmap:has(#hm-time:checked) .hm-scale { background: linear-gradient(90deg, var(--bg2), var(--blue)); }
.hm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; }
@media (max-width: 520px) { .hm-cell { height: 46px; padding: 3px; } .hm-v { font-size: .9rem; } table.hm-cal { border-spacing: 3px; } }
.hm-cell { cursor: pointer; }
.hm-cell.sel { outline: 2px solid var(--text); outline-offset: 1px; }
.pubopts { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .8rem .6rem; margin: 0; display: flex; flex-direction: row;
  flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; justify-content: flex-start; flex: 1 1 100%; width: 100%; min-width: 0; text-align: left; }
.pubopts label.chk { flex: 0 0 auto; }
.pubopts label:not(.chk) { flex-direction: row; align-items: center; gap: .5rem; }
.pubopts select { width: auto; }
.pubopts legend { padding: 0 .3rem; }

/* Anmelde-Links und Anmeldungen */
.signup-links { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.signup-links h3 { font-size: 1rem; margin: .3rem 0 .5rem; }
.signup-link { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-bottom: .6rem; }
.signup-link input { flex: 1 1 18rem; min-width: 0; font-size: .85rem; }
.signup-row { align-items: center; border-bottom: 1px solid var(--line); padding: .5rem 0; }
.signup-row > div { flex: 1 1 14rem; }
.signup-row select { width: auto; max-width: 100%; }
.warn { color: var(--late); }
.badge { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 1em; background: var(--red); color: #fff;
  font-size: .75em; font-weight: 800; text-align: center; line-height: 1.4; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.copyline input { width: 100%; font-size: .85rem; }
form.stack { display: flex; flex-direction: column; gap: .8rem; }

/* Schwebender „Heute gespielt?“-Knopf – nur auf dem Handy */
.fab { display: none; }
@media (max-width: 600px) {
  .fab { display: flex; align-items: center; justify-content: center; gap: .5rem; position: fixed; z-index: 50;
    left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: .85rem 1rem; border-radius: 16px;
    background: var(--gold); color: #1a1a1a; font-size: 1.02rem; text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset; }
  .fab:active { transform: scale(.98); }
  .fab .fab-icon { font-size: 1.3rem; line-height: 1; }
  .fab.fab-done { background: var(--card); color: var(--text); border: 1px solid var(--green); font-size: .95rem; }
  .fab.fab-done .fab-icon { color: var(--green); }
  body:has(.fab) .foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Partie-Formular: robust auf dem Handy (iOS-Datumsfeld, Fieldset-Mindestbreite, lange Namen) */
fieldset { min-width: 0; }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem .8rem; align-items: end; }
.form-pair > * { min-width: 0; }
.form-pair input { width: 100%; min-width: 0; }
.form-pair input[type=date] { -webkit-appearance: none; appearance: none; min-height: 2.6rem; display: block; }
.form-pair .form-hint { grid-column: 1 / -1; margin-top: -.3rem; }
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.fixed-date { display: flex; align-items: center; min-height: 2.6rem; padding: 0 .7rem; border-radius: 10px;
  border: 1px dashed var(--line); color: var(--text); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-hint { margin: -.2rem 0 .4rem; }
.person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6rem; gap: .5rem; align-items: center; }
.person-row .chk { min-width: 0; }
.person-row .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.person-row input.score { width: 100%; min-width: 0; }
input.score::-webkit-outer-spin-button, input.score::-webkit-inner-spin-button,
.form-pair input[type=number]::-webkit-outer-spin-button, .form-pair input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.score, .form-pair input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.more-people { margin: .2rem 0 .4rem; } .more-people summary { cursor: pointer; color: var(--blue); padding: .3rem 0; }

/* Spielseite */
.game-head { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.game-cover { width: 160px; max-width: 40%; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.game-info { flex: 1 1 14rem; min-width: 0; }
.game-info h1 { margin-top: 0; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: .4rem; }
.seg a { padding: .35rem .8rem; font-size: .85rem; color: var(--muted); text-decoration: none; }
.seg a.on { background: var(--gold); color: #1a1a1a; font-weight: 700; }
.game-plays li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
a.gamelink { color: inherit; text-decoration: none; } a.gamelink:hover { text-decoration: underline; }
#cloud { cursor: default; }
.game-people td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
  .game-people th, .game-people td { padding-left: .3rem; padding-right: .3rem; font-size: .85rem; }
  .game-people th { font-size: .7rem; }
}
.game-people .short { display: none; }
@media (max-width: 600px) { .game-people .full { display: none; } .game-people .short { display: inline; } }

/* Quellenangabe BoardGameGeek */
.foot .source { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .7rem; margin-top: .6rem; font-size: .8rem; }
.bgg-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 6px;
  background: #3f3a60; color: #fff !important; text-decoration: none !important; line-height: 1.2; }
.bgg-badge .pb { font-size: .7rem; opacity: .85; }
.bgg-badge .bgg { font-weight: 800; color: #ff5100; letter-spacing: .02em; }
.bgg-badge img { display: block; height: 28px; width: auto; }

/* ---- Gesamtübersicht (überarbeitet) ---- */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; font-weight: 800; font-size: .8rem; color: #14213a; letter-spacing: .02em; }
.av0 { background: #f2c14e; } .av1 { background: #5aa9ff; } .av2 { background: #4fc27a; } .av3 { background: #ff8a65; }
.av4 { background: #c792ea; } .av5 { background: #f48fb1; } .av6 { background: #80deea; }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin-top: .6rem; }
.pcard { position: relative; display: flex; gap: .75rem; align-items: center; padding: .8rem .9rem; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: border-color .15s; }
.pcard:hover { border-color: var(--gold); }
.pcard.alive { background: linear-gradient(135deg, rgba(242,193,78,.10), var(--bg2) 60%); }
.pcard .avatar { width: 2.8rem; height: 2.8rem; font-size: 1rem; }
.pc-rank { position: absolute; top: .45rem; right: .6rem; font-weight: 800; color: var(--muted); font-size: .8rem; }
.pc-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
.pc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.2rem; }
.pc-stats { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .8rem; color: var(--muted); }
.pc-stats b { color: var(--text); }
.pc-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.pc-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--gold)); }
.pc-foot { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--muted); }
.pc-today { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.pc-today.ok { color: var(--green); } .pc-today.open { color: var(--gold); }

table.ov { border-spacing: 4px; }
.ov thead th.ov-day { min-width: 40px; padding: .1rem 0 .25rem; border-radius: 8px; line-height: 1.1; }
.ov .ov-wd { display: block; font-size: .62rem; font-weight: 600; opacity: .75; text-transform: uppercase; }
.ov .ov-dn { display: block; font-size: .85rem; font-weight: 700; }
.ov th.ov-we { color: #b7a6d8; }
.ov th.ov-today { background: var(--gold); color: #1a1a1a; }
.ov .ov-gap { width: 4px; min-width: 4px; padding: 0; }
.ov .ov-name { padding: 0 .7rem 0 .1rem; max-width: 11rem; }
.ov .ov-name a, .ov .ov-name > span { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.ov .ov-nm { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-fire { font-size: .7rem; color: var(--gold); font-weight: 700; }
.ov-cell { width: 40px; height: 40px; border-radius: 9px; }
.ov-cell img { border-radius: 8px; }
.ov-cell.we:not(.done):not(.covered):not(.missed) { background: #1a2a44; }
.ov-cell.future { opacity: .35; border-style: dotted; }
.ov-cell.is-today { box-shadow: 0 0 0 2px var(--gold); border-color: transparent; }
.ov-cell.late::after { left: auto; right: auto; top: 0; left: 0; bottom: auto; width: 0; height: 0; border-radius: 8px 0 0 0;
  background: none; border-style: solid; border-width: 10px 10px 0 0; border-color: var(--late) transparent transparent transparent; }
.ov-more { top: 2px; right: 2px; min-width: 15px; height: 15px; line-height: 15px; font-size: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.legend .swatch { margin-right: .35rem; }
.legend > span { display: inline-flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.legend > span > .swatch { margin-right: .05rem; }
.ov-x { color: var(--red); font-size: .75rem; opacity: .8; }
.ov-add { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--gold) !important;
  font-size: 1.3rem; font-weight: 700; text-decoration: none !important; }
.legend .swatch.late-mark { width: 0; height: 0; border-radius: 0; border-style: solid; border-width: 10px 10px 0 0;
  border-color: var(--late) transparent transparent transparent; background: none; }
@media (max-width: 600px) {
  .ov thead th.ov-day { min-width: 34px; }
  .ov-cell { width: 34px; height: 34px; border-radius: 8px; }
  .ov .avatar { width: 1.8rem; height: 1.8rem; font-size: .7rem; }
  .ov .ov-name { max-width: 7.5rem; }
  .pcards { grid-template-columns: 1fr; }
}
.ov .ov-name { box-shadow: 0 -5px 0 var(--card), 0 5px 0 var(--card), 5px 0 0 var(--card); }

/* Spielfeld mit Vorschlägen */
.game-field > label { display: block; margin-bottom: .25rem; }
.game-wrap { position: relative; }
.game-wrap input { width: 100%; }
.game-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 18rem; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: .3rem; }
.gs-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .4rem .6rem .2rem; }
.gs-item { display: flex; width: 100%; justify-content: space-between; gap: .6rem; align-items: baseline; text-align: left;
  background: none; border: 0; color: var(--text); padding: .5rem .6rem; border-radius: 8px; cursor: pointer; font: inherit; }
.gs-item small { color: var(--muted); flex: none; }
.gs-item:hover, .gs-item.on { background: var(--bg2); }
.gs-item.bgg span::before { content: "BGG"; font-size: .6rem; font-weight: 800; color: #ff5100; margin-right: .45rem; vertical-align: middle; }
.game-bgg-row { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; }
.bgg-picked { color: var(--green); }
.bgg-paste { margin-top: .5rem; }

/* Desktop: kompakte „Heute eintragen“-Pille unten rechts */
@media (min-width: 601px) {
  .fab { display: inline-flex; align-items: center; gap: .45rem; position: fixed; z-index: 50; right: 24px; bottom: 24px;
    padding: .7rem 1.1rem; border-radius: 999px; background: var(--gold); color: #1a1a1a; font-size: .95rem;
    text-decoration: none !important; box-shadow: 0 8px 24px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; }
  .fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.5); }
  .fab .fab-icon { font-size: 1.15rem; line-height: 1; }
  .fab.fab-done { background: var(--card); color: var(--text); border: 1px solid var(--green); }
  .fab.fab-done .fab-icon { color: var(--green); }
  .fab .fab-long { display: none; }
}
@media (min-width: 601px) { body:has(.fab) .foot { padding-bottom: 4.5rem; } }

/* Balkendiagramm je Spiel (Partien/Zeit per CSS umschaltbar, Sortierung über order) */
.bars { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.bar-row { order: var(--rn); display: grid; grid-template-columns: minmax(7rem, 15rem) 1fr 3.2rem; gap: .7rem; align-items: center; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; text-align: right; }
.bar-name a { color: var(--text); }
.bar-track { height: 1.25rem; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--pn); min-width: 3px; border-radius: 6px;
  background: linear-gradient(90deg, #a07f2e, var(--gold)); transition: width .35s ease; }
.bar-val { font-weight: 800; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .3rem; }
#bars .hm-m { display: none; }
#bars:has(#bar-time:checked) .bar-row { order: var(--rm); }
#bars:has(#bar-time:checked) .bar-fill { width: var(--pm); background: linear-gradient(90deg, #2d5f99, var(--blue)); }
#bars:has(#bar-time:checked) .hm-n { display: none; }
#bars:has(#bar-time:checked) .hm-m { display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 600px) {
  .bar-row { grid-template-columns: 1fr 2.6rem; grid-template-areas: "name val" "track track"; gap: .15rem .5rem; }
  .bar-name { grid-area: name; text-align: left; } .bar-val { grid-area: val; justify-content: flex-end; }
  .bar-track { grid-area: track; height: .9rem; }
}

/* Startseite ohne Login */
.hero { text-align: center; padding: 2.2rem 1rem 1.2rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); margin: .8rem 0 .4rem; letter-spacing: -.02em; }
.hero-lead { color: var(--muted); font-size: 1.1rem; max-width: 38rem; margin: 0 auto 1.6rem; }
.hero-dice { width: 64px; height: 64px; margin: 0 auto; border-radius: 16px; background: var(--gold); position: relative;
  box-shadow: 0 10px 30px rgba(242,193,78,.25); transform: rotate(-8deg); }
.hero-dice span { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #0f1b2d; }
.hero-dice span:nth-child(1) { left: 13px; top: 13px; } .hero-dice span:nth-child(2) { right: 13px; top: 13px; }
.hero-dice span:nth-child(3) { left: 26.5px; top: 26.5px; } .hero-dice span:nth-child(4) { left: 13px; bottom: 13px; }
.hero-dice span:nth-child(5) { right: 13px; bottom: 13px; }
.steps { list-style: none; padding: 0; margin: 0 auto; max-width: 52rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; display: flex;
  flex-direction: column; gap: .15rem; text-align: left; }
.steps .step-ico { font-size: 1.4rem; }
.steps li > span:last-child { color: var(--muted); font-size: .85rem; }
.section-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.6rem 0 .7rem; }
.ch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.ch-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ch-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.ch-mosaic { position: relative; height: 170px; flex: none; overflow: hidden; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--bg2); }
.ch-mosaic img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.ch-mosaic.n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ch-mosaic.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.ch-mosaic.n3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .ch-mosaic.n3 img:first-child { grid-row: span 2; }
.ch-mosaic.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-mosaic.n5 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } .ch-mosaic.n5 img:first-child { grid-row: span 2; }
.ch-mosaic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15,27,45,.85)); pointer-events: none; }
.ch-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: .5; }
.ch-state { position: absolute; z-index: 1; top: .6rem; left: .6rem; background: rgba(15,27,45,.85); }
.ch-state.live { color: var(--green); border-color: var(--green); }
.ch-body { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.ch-body h3 { margin: 0; font-size: 1.2rem; }
.ch-body p { margin: 0; }
.ch-nums { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--muted); }
.ch-nums b { color: var(--gold); font-size: 1rem; }
.ch-go { margin-top: auto; padding-top: .4rem; color: var(--blue); font-weight: 600; }
.login-box { max-width: 40rem; margin: 1.6rem auto 0; text-align: center; }
.login-box h2 { margin-top: 0; }
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .steps li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
  .steps li > span:last-child { flex-basis: 100%; padding-left: 2rem; }
  .hero { padding-top: 1.4rem; }
}
/* Namensspalte: lange (Spitz-)Namen umbrechen statt abschneiden – bevorzugt nach dem Bindestrich */
.ov .ov-name { white-space: normal; max-width: 12.5rem; }
.ov .ov-nm { white-space: normal; overflow: visible; overflow-wrap: break-word; font-size: .85rem; }
.ov .ov-nm .full, .ov .ov-nm .short { line-height: 1.2; }
@media (max-width: 600px) {
  .ov .ov-name { max-width: 9.5rem; min-width: 7.5rem; }
  .ov .ov-nm { font-size: .78rem; }
}
@media (min-width: 601px) { .ov .ov-name { max-width: 16rem; } .ov .ov-nm { white-space: nowrap; } }

/* Challenge-Karten gruppiert */
.section-title .count { display: inline-block; margin-left: .3rem; padding: 0 .45em; border-radius: 999px; background: var(--bg2);
  border: 1px solid var(--line); font-size: .75rem; letter-spacing: 0; }
div.ch-card { transition: transform .15s, border-color .15s, box-shadow .15s; }
div.ch-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.ch-card.joined { border-color: rgba(79,194,122,.55); }
.ch-card h3 a { color: var(--text); text-decoration: none; }
.ch-joined { position: absolute; z-index: 1; top: .6rem; right: .6rem; background: rgba(15,27,45,.85); }
.ch-actions { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.ch-actions .ch-go { margin: 0; padding: 0; }
.ch-actions form { margin-left: auto; }
.small-btn { padding: .35rem .8rem; font-size: .85rem; }
.ch-cards.past .ch-mosaic { filter: saturate(.55) brightness(.85); }
.ch-overview { margin-top: .4rem; }

/* Gruppen nebeneinander (Aktuell | Demnächst | Vergangen), auf dem Handy untereinander */
.ch-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 1.2rem; align-items: start; }
.ch-group .ch-cards { grid-template-columns: 1fr; }

/* Alle Challenge-Karten gleich groß */
.ch-card { height: 340px; }
.ch-card .ch-mosaic { height: 170px; }
.ch-body { overflow: hidden; }
.ch-body h3, .ch-body > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Zeitleiste: alt → aktuell → demnächst in einer Reihe, seitlich scrollbar */
.ch-timeline { display: flex; gap: 1.4rem; overflow-x: auto; padding: 0 .2rem .8rem; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; }
.ch-timeline .ch-group { flex: none; }
.ch-timeline .ch-cards { display: flex; gap: 1rem; grid-template-columns: none; }
.ch-timeline .ch-card { width: 300px; flex: none; scroll-snap-align: start; }
.ch-timeline .ch-group + .ch-group { border-left: 1px dashed var(--line); padding-left: 1.4rem; }
.ch-timeline .ch-current .section-title { color: var(--green); }
@media (max-width: 600px) { .ch-timeline .ch-card { width: 82vw; max-width: 320px; } }
.ch-hint { color: var(--muted); } .ch-hint.läuft { color: var(--green); } .ch-hint.startet-bald { color: var(--gold); }

/* Login-Formular (Passwort-Manager-tauglich) */
.login-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; text-align: left; margin: .8rem 0; }
.login-form input { width: 100%; }
.pw-save { margin-top: .6rem; text-align: left; }
.pw-save summary { cursor: pointer; color: var(--blue); text-align: center; }
@media (max-width: 600px) { .login-form { grid-template-columns: 1fr; } }

/* Zeitleiste: schmaler Scrollbalken im App-Design, Verläufe an den Rändern, Blätter-Pfeile */
.ch-scroller { position: relative; }
.ch-timeline { scrollbar-width: thin; scrollbar-color: rgba(242,193,78,.55) rgba(255,255,255,.06); scroll-behavior: smooth;
  padding-bottom: 1rem; }
.ch-timeline::-webkit-scrollbar { height: 8px; }
.ch-timeline::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; margin: 0 .4rem; }
.ch-timeline::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(242,193,78,.75), rgba(255,154,82,.75)); border-radius: 999px; }
.ch-timeline::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.ch-scroller.can-left .ch-timeline { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px); mask-image: linear-gradient(90deg, transparent 0, #000 48px); }
.ch-scroller.can-right .ch-timeline { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.ch-scroller.can-left.can-right .ch-timeline { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); }
.ch-nav { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(27,45,71,.95); color: var(--text); font-size: 1.7rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 0 0 4px; transition: border-color .15s, transform .15s; }
.ch-nav:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-50%) scale(1.06); }
.ch-nav.prev { left: -12px; } .ch-nav.next { right: -12px; }
.ch-nav[hidden] { display: none; }
@media (max-width: 600px) { .ch-nav { display: none; } .ch-timeline::-webkit-scrollbar { height: 5px; } }

/* Moderner Ersatz für den Scrollbalken: ausgeblendet, stattdessen Punkte (Farbe je Gruppe, aktiver Punkt lang) */
.ch-timeline { scrollbar-width: none; padding-bottom: .4rem; }
.ch-timeline::-webkit-scrollbar { display: none; }
.ch-dots { display: flex; justify-content: center; align-items: center; gap: .45rem; margin-top: .5rem; min-height: 14px; }
.ch-dots[hidden] { display: none; }
.ch-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; opacity: .45;
  background: var(--muted); transition: width .25s ease, opacity .25s ease; }
.ch-dot.current { background: var(--green); } .ch-dot.upcoming { background: var(--gold); } .ch-dot.past { background: #8a96a8; }
.ch-dot.on { width: 28px; opacity: 1; }
.ch-dot:hover { opacity: .85; }
.ch-dot:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---- Startseite: ein gemeinsames Raster (volle Inhaltsbreite, 3 Spalten, gleiche Abstände) ---- */
.steps { max-width: none; gap: 1rem; }
.ch-scroller { container-type: inline-size; }
.ch-timeline { gap: 1rem; padding-left: 0; padding-right: 0; }
.ch-timeline .ch-group + .ch-group { border-left: 0; padding-left: 0; }
.ch-timeline .ch-card { width: calc((100cqw - 2rem) / 3); min-width: 260px; }
.ch-group .section-title { margin-top: 1.4rem; }
.login-box { max-width: none; margin: 1.6rem 0 0; text-align: left; border-radius: 16px; }
.lb-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.lb-text { flex: 1 1 22rem; min-width: 0; }
.lb-text h2 { margin: 0 0 .3rem; }
.lb-text p { margin: 0; }
.lb-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.login-box .login-form { flex: 1 1 26rem; margin: 0; }
.login-box > p.muted { margin: .9rem 0 0; }
.pw-save summary { text-align: left; }
.steps li, .ch-card, .login-box { border-radius: 16px; }
@media (max-width: 600px) {
  .ch-timeline .ch-card { width: 82vw; min-width: 0; max-width: 320px; }
  .lb-actions .btn { flex: 1; text-align: center; }
}
.hero { padding-left: 0; padding-right: 0; }
@media (max-width: 600px) { .lb-actions { flex-direction: column; width: 100%; } .lb-actions .btn { white-space: nowrap; } }
.hero-icon { display: block; width: 96px; height: 96px; margin: 0 auto; filter: drop-shadow(0 10px 26px rgba(255,140,60,.35)); }
div.copyline { display: flex; gap: .5rem; align-items: center; } div.copyline input { flex: 1; min-width: 0; }

/* Gesamtübersicht: größere Spiele-Felder */
.ov thead th.ov-day { min-width: 54px; }
.ov-cell { width: 54px; height: 54px; border-radius: 11px; }
.ov-cell img { border-radius: 10px; }
.ov-abbr { font-size: .8rem; }
@media (max-width: 600px) {
  .ov thead th.ov-day { min-width: 44px; }
  .ov-cell { width: 44px; height: 44px; border-radius: 9px; }
  .ov-cell img { border-radius: 8px; }
}
/* Handy: kompakte Namensspalte (Avatar, darunter Vorname + Folge klein) → mehr Tage sichtbar */
@media (max-width: 600px) {
  .ov .ov-name { min-width: 0; max-width: 4.2rem; width: 4.2rem; padding: 0 .25rem 0 0; }
  .ov .ov-name a, .ov .ov-name > span { flex-direction: column; gap: .15rem; align-items: center; text-align: center; }
  .ov .ov-nm { font-size: .62rem; align-items: center; max-width: 4rem; overflow: hidden; }
  .ov .ov-nm .short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 4rem; display: block; }
  .ov-fire { font-size: .6rem; }
  .ov .avatar { width: 1.9rem; height: 1.9rem; font-size: .68rem; }
}

/* Kalender: Scrollbalken ausgeblendet, stattdessen Mini-Zeitleiste */
.ov-scroll { scrollbar-width: none; }
.ov-scroll::-webkit-scrollbar { display: none; }
.ov-mini { position: relative; margin: .5rem 0 .2rem; padding: 6px 4px; border-radius: 10px; background: rgba(255,255,255,.04);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.ov-mini:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mm-track { display: flex; gap: 2px; align-items: stretch; height: 14px; }
.mm-day { flex: 1; border-radius: 3px; background: color-mix(in srgb, var(--green) calc(var(--a) * 100%), rgba(255,255,255,.08)); }
.mm-day.future { opacity: .4; }
.mm-day.today { background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.mm-gap { width: 4px; flex: none; }
.mm-window { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 7px; pointer-events: none;
  border: 2px solid rgba(255,255,255,.85); background: rgba(255,255,255,.10); box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  transition: left .12s ease, width .12s ease; }
.ov-mini.dragging .mm-window { transition: none; }
.ov-tools { display: flex; justify-content: flex-end; min-height: 1.2rem; }
.ov-today-btn { color: var(--gold); font-weight: 700; }
button.link.ov-today-btn { color: var(--gold); font-weight: 700; font-size: .85rem; }

/* Personen: Doppelte & Freigabe-Vorschläge */
.dupes { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; margin: .8rem 0; background: var(--bg2); }
.dupes h2 { margin: .1rem 0 .3rem; font-size: 1.05rem; }
.dupe-row { align-items: center; padding: .35rem 0; border-top: 1px solid var(--line); }
.signup-merge { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; color: var(--muted); }

/* Umschalter Admin-/Nutzer-Ansicht im Kopf */
.admin-toggle { display: inline-flex; margin-right: .5rem; vertical-align: middle; }
.switch-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .8rem; }
.switch-btn .knob { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #2b4164; transition: background .2s; flex: none; }
.switch-btn .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #cfd8e6; transition: transform .2s; }
.switch-btn.on .knob { background: var(--gold); }
.switch-btn.on .knob::after { transform: translateX(14px); background: #14213a; }
.switch-btn.on .lbl { color: var(--gold); font-weight: 700; }
body:has(.switch-btn:not(.on)) .top { box-shadow: inset 0 -2px 0 rgba(90,169,255,.55); }
.who-name .short { display: none; }
@media (max-width: 600px) { .who-name .full { display: none; } .who-name .short { display: inline; } .who { white-space: nowrap; } }

/* Meldungen (Glocke) */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; margin-right: .4rem; text-decoration: none !important; font-size: 1.05rem; filter: grayscale(1) opacity(.6); vertical-align: middle; }
.bell.has { filter: none; background: rgba(242,193,78,.12); }
.bell .badge { position: absolute; top: -3px; right: -5px; font-size: .62rem; }
.notices { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-direction: column; gap: .5rem; }
.notice { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 12px; background: var(--bg2);
  border: 1px solid var(--line); border-left: 4px solid var(--blue); }
.notice.act { border-left-color: var(--gold); } .notice.warn { border-left-color: var(--red); }
.n-icon { font-size: 1.4rem; flex: none; }
.n-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notice-empty { padding: 1rem; text-align: center; color: var(--green); }
@media (max-width: 600px) {
  .switch-btn .lbl { display: none; }
  .bell { width: 28px; height: 28px; margin-right: .2rem; }
  .notice { flex-wrap: wrap; } .notice .n-body { flex-basis: calc(100% - 2.6rem); }
  .notice form, .notice > .btn { margin-left: auto; }
}

/* ---- Kopfbereich: aktuelle Seite markieren (alle Größen) ---- */
.top nav a.on { color: var(--text); }
.usermenu { display: none; }

/* ---- Kopfbereich mobil: klares Raster in drei Zeilen ---- */
@media (max-width: 600px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand who" "switch switch" "nav nav";
    align-items: center; gap: .55rem .6rem; padding: .6rem 16px .5rem; }
  .top .brand { grid-area: brand; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02rem; }
  .top .who { grid-area: who; display: flex; align-items: center; gap: .55rem; margin: 0; max-width: none; overflow: visible; }
  .top .who .who-name, .top .who .logout { display: none; }
  .top .who .bell { margin: 0; width: 34px; height: 34px; }
  .top .who .admin-toggle { margin: 0; }
  .top .switch, .top .chname { grid-area: switch; order: 0; display: flex; align-items: center; gap: .5rem; width: 100%; }
  .top .switch select { flex: 1; max-width: none; min-width: 0; height: 2.4rem; font-size: 1rem; padding: 0 .7rem; border-radius: 10px; }
  .top .chinfo { font-size: 1.25rem; flex: none; }
  .top nav.mainnav { grid-area: nav; order: 0; width: auto; display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto;
    margin: 0 -16px; padding: .1rem 16px .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .top nav.mainnav::-webkit-scrollbar { display: none; }
  .top nav.mainnav a { flex: none; scroll-snap-align: start; padding: .38rem .8rem; border-radius: 999px; font-size: .92rem;
    background: var(--bg2); border: 1px solid var(--line); color: var(--muted); }
  .top nav.mainnav a.on { background: var(--gold); border-color: var(--gold); color: #14213a; font-weight: 700; }
  .usermenu { display: block; position: relative; }
  .usermenu summary { list-style: none; cursor: pointer; width: 34px; height: 34px; font-size: .78rem; }
  .usermenu summary::-webkit-details-marker { display: none; }
  .um-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 13rem; display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .5rem; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  .um-pop strong { padding: .35rem .6rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
  .um-pop a { padding: .5rem .6rem; border-radius: 8px; color: var(--text); margin: 0; }
  .um-pop a:active, .um-pop a:hover { background: var(--bg2); text-decoration: none; }
}
/* Personen-Karten dürfen nicht über die Box hinausragen */
.pcards > .pcard { min-width: 0; }
.pc-main, .pc-foot { min-width: 0; }
.pc-foot > span:first-child { flex: none; }

/* Gleich große Knopf-Reihe (Desktop nebeneinander, Handy untereinander) */
.btn-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 .2rem; }
.btn-row .btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.9rem;
  padding: .55rem .8rem; margin: 0; line-height: 1.2; }
@media (max-width: 600px) { .btn-row { grid-template-columns: 1fr; gap: .5rem; } }

/* Eingabefeld + Knopf in einer Linie (Knopf unten bündig, gleiche Höhe) */
.field-action { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: .6rem 0; }
.field-action label { flex: 1 1 12rem; min-width: 0; }
.field-action input { width: 100%; height: 2.75rem; box-sizing: border-box; }
.field-action .btn { height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; margin: 0; }
@media (max-width: 600px) { .field-action .btn { flex: 1 1 auto; } }

/* ---- Abzeichen ---- */
.bd { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  font-size: 1.05rem; line-height: 1; background: var(--bg2); border: 2px solid var(--line); flex: none; }
.bd.lvl0 { filter: grayscale(1) opacity(.35); }
.bd.lvl1 { border-color: #cd7f32; box-shadow: 0 0 0 1px rgba(205,127,50,.35); }
.bd.lvl2 { border-color: #c0c8d4; box-shadow: 0 0 0 1px rgba(192,200,212,.35); }
.bd.lvl3 { border-color: #f2c14e; box-shadow: 0 0 8px rgba(242,193,78,.45); background: rgba(242,193,78,.1); }
.bd.single.lvl3 { border-color: #5aa9ff; box-shadow: 0 0 8px rgba(90,169,255,.4); background: rgba(90,169,255,.1); }
.bd-row { display: inline-flex; gap: .25rem; flex-wrap: wrap; vertical-align: middle; margin-left: .3rem; }
.pcard .bd-row { margin: .1rem 0 0; display: flex; }
.pcard .bd { width: 1.6rem; height: 1.6rem; font-size: .9rem; }
.bd-strip { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .6rem 0; }
.bd-strip .bd-row { margin: 0; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; }
.bd-card { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px; background: var(--bg2);
  border: 1px solid var(--line); }
.bd-card .bd { width: 3rem; height: 3rem; font-size: 1.6rem; }
.bd-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.bd-tier { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bd-card.lvl1 .bd-tier { color: #cd7f32; } .bd-card.lvl2 .bd-tier { color: #c0c8d4; } .bd-card.lvl3 .bd-tier { color: #f2c14e; }
.bd-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: .2rem 0; }
.bd-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #cd7f32, #f2c14e); }
.tier-key { display: inline-flex; align-items: center; gap: .3rem; margin-right: .7rem; }
.tier-key i { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--line); display: inline-block; }
.tier-key i.lvl1 { border-color: #cd7f32; } .tier-key i.lvl2 { border-color: #c0c8d4; } .tier-key i.lvl3 { border-color: #f2c14e; }
.profile-share { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem;
  background: var(--bg2); margin: .6rem 0; }
.profile-head { display: flex; align-items: center; gap: 1rem; }
.profile-head h1 { margin: 0; }
.avatar.big { width: 4rem; height: 4rem; font-size: 1.6rem; }
.fav-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.fav { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); aspect-ratio: .85; display: flex; align-items: flex-end; }
.fav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fav::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,27,45,.9)); }
.fav-n { position: absolute; top: 6px; right: 6px; z-index: 1; background: var(--gold); color: #1b1b1b; font-weight: 800; font-size: .72rem; padding: 0 .4rem; border-radius: 999px; }
.fav-name { position: relative; z-index: 1; padding: .4rem .5rem; font-size: .75rem; font-weight: 700; }
@media (max-width: 600px) { .bd-grid { grid-template-columns: 1fr; } }

a.who-name { color: inherit; text-decoration: none; } a.who-name:hover { color: var(--text); text-decoration: underline; }
.profile-head + h2.section-title, .profile-head ~ .runstats { margin-top: .8rem; }

.secret-field input[type=password] { letter-spacing: .12em; }
.pub-link { display: flex; flex-direction: column; gap: .35rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.pub-link:first-of-type { border-top: 0; }
.pub-link .copyline { align-items: center; } .pub-link .copyline > span.small { width: 3rem; flex: none; }

.my-public { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; padding: .8rem .9rem; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--line); }
.mp-row { display: flex; flex-direction: column; } .mp-nick { font-size: 1.25rem; }

/* ---- Kalender als Wochenansicht: immer Montag bis Sonntag ---- */
.doors.weekview { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.wd-head { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .1rem 0 .15rem; }
.wd-head.we { color: #b7a6d8; } .wd-head.now { color: var(--gold); }
.door.blank { visibility: hidden; min-height: 0; padding: 0; border: 0; }
.weekview .door { min-width: 0; }
.door .num small { margin-left: .3rem; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.door.we:not(.done):not(.covered):not(.missed):not(.has-img) { background-color: rgba(183,166,216,.06); }
@media (max-width: 600px) {
  .doors.weekview { gap: .25rem; }
  .weekview .door { padding: .3rem .3rem; border-radius: 8px; min-height: 3.4rem; }
  .weekview .door .num { font-size: .95rem; }
  .weekview .door .num small { display: block; margin: .1rem 0 0; font-size: .5rem; }
  /* Spielnamen passen bei 7 Spalten nicht: nur Bild/Farbe + Zähler, Name steht im Tooltip und in der Tagesansicht */
  .weekview .door .games { display: none; }
  .weekview .door .more { top: .2rem; right: .25rem; font-size: .6rem; }
  .weekview .door .game.muted, .weekview .door .game { font-size: .6rem; }
  .weekview .door.has-games:not(.has-img)::after { content: "●"; position: absolute; right: .3rem; bottom: .2rem; font-size: .55rem; color: var(--text); opacity: .8; }
}

.eventopts { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem .7rem; margin: 0; flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
.eventopts legend { padding: 0 .3rem; }
.eventopts label.wide { flex: 1 1 100%; }

/* Event-Seite */
.event-top { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; } .ev-tag { color: var(--gold); border-color: var(--gold); }
.event-hero h1 { margin: .2rem 0 .6rem; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.ev-facts dd { margin: 0; }
.ev-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.ev-game { position: relative; display: flex; align-items: flex-end; aspect-ratio: .85; overflow: hidden; border-radius: 12px; background: var(--bg2);
  border: 1px solid var(--line); color: var(--text); text-decoration: none !important; }
.ev-game img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,27,45,.92)); }
.ev-n { position: absolute; top: 6px; right: 6px; z-index: 1; background: var(--gold); color: #1b1b1b; font-weight: 800; font-size: .75rem; padding: 0 .45rem; border-radius: 999px; }
.ev-name { position: relative; z-index: 1; padding: .5rem; font-size: .8rem; font-weight: 700; line-height: 1.2; }
a.ev-game:hover { border-color: var(--gold); }
.ev-people { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .4rem .8rem; }
.ev-people li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.ev-people .bd { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
.eventopts { flex-direction: row; justify-content: flex-start; align-items: flex-end; text-align: left; width: 100%; min-width: 0; }
.eventopts label { flex: 1 1 14rem; min-width: 0; } .eventopts label.chk { flex: 1 1 100%; }
.eventopts input:not([type=checkbox]), .eventopts select, .eventopts textarea { width: 100%; }
.eventopts input.plain { width: 5em; }

/* Abzeichen mit Bild */
.bd.has-img { background: none; border-color: transparent; box-shadow: none; padding: 0; overflow: hidden; }
.bd.has-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.bd-card .bd.has-img { width: 3rem; height: 3rem; }
.bd.has-img.lvl0 img { filter: grayscale(1) opacity(.4); }
.badge-picker { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; flex: 0 0 auto; }
.bp-open { display: inline-flex; align-items: center; gap: .6rem; background: none; border: 1px dashed var(--line); border-radius: 999px;
  padding: .3rem .8rem .3rem .3rem; cursor: pointer; color: var(--muted); }
.bp-open:hover { border-color: var(--gold); color: var(--text); }
.bp-prev { width: 3.4rem; height: 3.4rem; font-size: 1.8rem; }
.bp-dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); max-width: min(520px, 94vw); padding: 1rem 1.2rem; }
.bp-dialog::backdrop { background: rgba(5, 10, 20, .65); }
.bp-dialog h3 { margin: 0 0 .2rem; }
.bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: .5rem 0 .9rem; }
.bp-std { display: flex; flex-direction: column; align-items: center; gap: .2rem; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; padding: .5rem .3rem; cursor: pointer; color: var(--text); font-size: .72rem; }
.bp-std img { width: 100%; max-width: 64px; height: auto; }
.bp-std:hover, .bp-std:focus-visible { border-color: var(--gold); }
.bp-actions { margin: .2rem 0 .6rem; }
@media (max-width: 480px) { .bp-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mein Profil: Challenge-Gruppen mit Links */
.mc-list { list-style: none; margin: .4rem 0; padding: 0; }
.mc-item { padding: .7rem 0; border-top: 1px solid var(--line); }
.mc-item:first-child { border-top: 0; }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.mc-links { display: flex; flex-direction: column; gap: .25rem; margin-top: .45rem; padding-left: .8rem; border-left: 2px solid var(--line); }
.linkline { display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.linkline a { word-break: break-word; }
.mc-fold { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.mc-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
.mc-fold > summary::-webkit-details-marker { display: none; }
.mc-fold > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.mc-fold[open] > summary::before { transform: rotate(90deg); }
.mc-fold > summary h3 { margin: .3rem 0; font-size: 1.05rem; }
.count { display: inline-block; margin-left: .3rem; padding: 0 .5em; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-size: .75rem; font-weight: 600; color: var(--muted); }

/* Mein Profil: kompakte Challenge-Karten mit Link-Chips */
.mc-grid { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .6rem; }
.mc-card { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .8rem; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.mc-card.joined { border-color: rgba(79,194,122,.45); }
.mc-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mc-name { font-weight: 700; color: var(--text); margin-right: auto; }
.mc-name:hover { color: var(--gold); text-decoration: none; }
.mc-act { margin: 0; }
.mc-meta { display: flex; align-items: center; gap: .3rem .7rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.mc-meta .nick { color: var(--text); background: rgba(255,255,255,.06); border-radius: 999px; padding: 0 .55rem; white-space: nowrap; }
.mc-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.lchip { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.lchip a { padding: .2rem .65rem; font-size: .85rem; color: var(--text); white-space: nowrap; }
.lchip a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.copy-ico { border: 0; border-left: 1px solid var(--line); background: none; padding: 0 .55rem; cursor: pointer; font-size: .85rem; color: var(--muted); }
.copy-ico:hover { background: rgba(255,255,255,.06); }
.mc-fold { margin-top: .6rem; }

/* Gruppen & Nachrichten */
.gchip { display: inline-flex; align-items: center; gap: .25em; padding: .05em .6em; margin: 0 .2em .2em 0; border-radius: 999px;
  background: var(--card2, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.15)); font-size: .8rem; white-space: nowrap; }
.gaccess { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2em; font-size: .8rem; }
.gaccess-line { margin: .1rem 0; color: var(--muted, #9aa9bf); }
.my-groups { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .6rem 0; }
.members-list { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .25rem; }
.members-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .3rem .6rem; border-radius: 8px; background: rgba(255,255,255,.04); }
.group-card h2 { margin-bottom: .3rem; }
.msgs .msg.unread { border-left: 3px solid var(--gold, #f2c14e); }
.msg-text { margin: .25rem 0; line-height: 1.45; }
.card form.stack { display: grid; gap: .7rem; }
.card form.stack textarea, .card form.stack input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.card form.stack .chk, .group-card .chk { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .5rem; text-align: left; }
.card form.stack input[type=radio], .card form.stack input[type=checkbox], .group-card input[type=checkbox] { width: auto; flex: none; }
.group-card .row input:not([type=checkbox]), .group-card .row select { width: auto; flex: 1 1 14rem; min-width: 0; }
.group-card .row .btn, .group-card .row .link { flex: none; }