/* Beanlings Kickoff · Freunde, Suche, Rivalitäten (29.10.2026, kickoff/freunde.py, kickoff/rivalitaet.py).
   Beide Designs: altes Design über --card/--text/--muted/--border/--accent (layout.html, hell/dunkel),
   neues Design (body.nd) über --kreide/--tinte/--tinte-leise/--linie/--rasen (neu.css, hell/dunkel). Mobil zuerst. */
.klf{--klf-karte:var(--card,#fff);--klf-text:var(--text,#1a2e12);--klf-leise:var(--muted,#4e6b40);--klf-linie:var(--border,#c8d8bc);
  --klf-akzent:var(--accent,#27794a);--klf-gefahr:var(--danger,#c0392b);--klf-r:10px;color:var(--klf-text)}
.nd .klf{--klf-karte:var(--kreide,#f6f3e8);--klf-text:var(--tinte,#1c2a20);--klf-leise:var(--tinte-leise,#4f5b48);--klf-linie:var(--linie,#d3c9ad);
  --klf-akzent:var(--rasen,#3f7a35);--klf-gefahr:var(--rot,#c4402d);--klf-r:4px}
.klf *{box-sizing:border-box}
.klf[hidden],.klf [hidden]{display:none!important}
.klf-karte{background:var(--klf-karte);border:1px solid var(--klf-linie);border-radius:var(--klf-r);padding:14px;margin:0 0 12px}
.klf-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.klf-titel{font-weight:800;font-size:1rem;margin:0}
.klf-leise{color:var(--klf-leise);font-size:.82rem}
.klf-reiter{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:0 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.klf-reiter::-webkit-scrollbar{display:none}
.klf-reiter button{flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--klf-linie);background:var(--klf-karte);
  color:var(--klf-text);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.nd .klf-reiter button{border-radius:4px}
.klf-reiter button[aria-selected="true"]{background:var(--klf-akzent);border-color:var(--klf-akzent);color:#fff}
.klf-reiter .klf-zahl{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--klf-gefahr);color:#fff;font-size:.7rem;line-height:18px;text-align:center}
.klf-liste{list-style:none;margin:0;padding:0}
.klf-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 0;border-top:1px solid var(--klf-linie)}
.klf-liste .klf-zeile:first-child{border-top:0}
.klf-kurz{flex:0 0 40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--klf-akzent);color:#fff;font-weight:900;font-size:.78rem;letter-spacing:.02em}
.nd .klf-kurz{border-radius:2px}
.klf-wer{flex:1 1 160px;min-width:0}
.klf-wer a{color:var(--klf-text);font-weight:800;text-decoration:none}
.klf-wer a:hover,.klf-wer a:focus-visible{text-decoration:underline}
.klf-wer .klf-leise a{color:var(--klf-leise);font-weight:600}
.klf-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;background:var(--klf-linie)}
.klf-punkt.jetzt{background:#2fa84f}.klf-punkt.heute{background:#7cc36b}.klf-punkt.woche{background:#d8b24a}
.klf-knoepfe{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;justify-content:flex-start}
@media (min-width:560px){.klf-knoepfe{flex:0 0 auto;justify-content:flex-end}}
.klf-knopf{min-height:40px;padding:8px 12px;border-radius:8px;border:1px solid var(--klf-linie);background:transparent;color:var(--klf-text);
  font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.nd .klf-knopf{border-radius:2px}
.klf-knopf.haupt{background:var(--klf-akzent);border-color:var(--klf-akzent);color:#fff}
.klf-knopf.gefahr{color:var(--klf-gefahr);border-color:var(--klf-gefahr)}
.klf-knopf[disabled]{opacity:.55;cursor:default}
.klf-marke{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--klf-linie);font-size:.72rem;font-weight:700;color:var(--klf-leise)}
.klf-suche{display:flex;gap:8px;margin:0 0 10px}
.klf-suche input{flex:1 1 auto;min-width:0;min-height:44px;padding:10px 12px;border-radius:8px;border:1px solid var(--klf-linie);background:var(--klf-karte);color:var(--klf-text);font:inherit;font-size:16px}
.nd .klf-suche input{border-radius:2px}
.klf-meldung{margin:0 0 10px;padding:10px 12px;border-radius:8px;border:1px solid var(--klf-akzent);font-size:.85rem}
.klf-meldung.fehler{border-color:var(--klf-gefahr);color:var(--klf-gefahr)}
.klf-unter{margin:14px 0 4px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--klf-leise)}
.klf-bilanz{font-weight:800;font-variant-numeric:tabular-nums}
.klf-derby{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-left:4px solid var(--klf-gefahr)}
.klf-derby .klf-wimpel{display:inline-block;padding:3px 9px;background:var(--klf-gefahr);color:#fff;font-weight:900;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;border-radius:3px}
.klf-profil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}