/* ——— Layout & Typo ——— */
:root {
  --bg: #f6f7fb;
  --card: #fff;
  --ink: #111;
  --muted: #666;
  --brand1: #ff00cc;
  --brand2: #3333ff;
  --shadow: 0 12px 30px rgba(20, 20, 60, .08);
  --radius: 14px;
}

html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; }

/* ——— Navbar ——— */
.navbar {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  padding: 12px clamp(12px, 4vw, 24px);
  display: flex; gap: 16px; overflow-x: auto;
}
.navbar a { color:#fff; text-decoration:none; font-weight:600; opacity:.9; }
.navbar a:hover, .navbar a.active { opacity:1; text-decoration:underline; }

/* ——— Container ——— */
.container { max-width: 1100px; margin: 28px auto; padding: 0 16px; }
h1 { margin: 8px 0 18px; font-size: clamp(22px, 4vw, 32px); }

/* ——— Hero (Startseite) ——— */
.hero {
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(18px, 4vw, 30px);
}
.hero h1 { margin-top: 0; }
.cta-row { display:flex; gap:12px; margin-top:14px; flex-wrap: wrap; }
.btn { border-radius: 999px; padding: 10px 16px; font-weight: 700; text-decoration:none; display:inline-block; }
.btn-primary { color:#fff; background: linear-gradient(90deg, var(--brand1), var(--brand2)); box-shadow: var(--shadow); }
.btn-ghost { color: var(--brand2); background: #eef2ff; }

/* ——— Cards & Grids ——— */
.card {
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 18px;
}
.grid-3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:16px; }
.grid-4 { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:16px; }

/* ——— Stat Cards ——— */
.stat-card { background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px 18px; }
.stat-icon { font-size: 22px; opacity: .85; }
.stat-label { color: var(--muted); font-weight: 600; margin-top: 2px; }
.stat-value { font-size: 22px; font-weight: 800; margin-top: 6px; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ——— Profile (passt zu deinem bestehenden Profil) ——— */
.profile-card { display:flex; gap:18px; align-items:center; background:var(--card); box-shadow:var(--shadow); border-radius:var(--radius); padding:18px; }
.profile-avatar { width:120px; height:120px; border-radius:50%; object-fit:cover; }
.profile-info h1 { margin:0; font-size: clamp(22px, 4vw, 28px); }
.profile-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px; }