/* "Mein Bereich" — Ergaenzungen zu styles.css (unangetastet). */

a.brand { color: var(--text); text-decoration: none; }
a.brand:hover { opacity: .85; }
.nav { flex-wrap: wrap; }

.me-inp {
  padding: 8px 10px; box-sizing: border-box; min-width: 180px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.form-row { margin-bottom: 10px; }
.form-row .me-inp { width: 100%; }
.me-range { display: flex; gap: 6px; flex-wrap: wrap; }

/* Stat-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.tile { background: var(--card2, var(--card)); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.tile-v { font-size: 22px; font-weight: 700; color: var(--primary); }
.tile-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.me-canvas { position: relative; height: 260px; background: var(--card2, var(--card)); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
/* SVG-Fallback-Verlauf (ohne Chart.js): braucht keine feste Hoehe. */
.me-canvas:has(.stats-svg) { height: auto; }
.stats-svg { width: 100%; height: auto; display: block; }

/* Gruppen-Mitglieder-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; color: var(--text); }
.chip-x { cursor: pointer; color: var(--muted); }
.chip-x:hover { color: var(--danger); }
.chk { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.chk input { accent-color: var(--primary); }