/**
 * Belnova — Designsystem & UI-Komponenten (Phase 2)
 */
:root {
  --bn-green: #1c3320;
  --bn-green-light: #243d29;
  --bn-orange: #ff7a2e;
  --bn-lime: #a3d25d;
  --bn-bg: #f5ede0;
  --bn-border: #e8ddd0;
  --bn-text: #2c2c2c;
  --bn-muted: #777;
  --bn-blue: #2196f3;
  --bn-red: #e53935;
  --bn-radius-sm: 8px;
  --bn-radius-md: 11px;
  --bn-radius-lg: 14px;
  --bn-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  --bn-font: 'Segoe UI', system-ui, sans-serif;
}

.bn-onboarding{background:linear-gradient(135deg,#fff8e1 0%,#fff 100%);border:1.5px solid #ffe082;border-radius:14px;padding:16px 18px;margin-bottom:14px;}
.bn-onboarding h3{font-size:15px;font-weight:800;color:#1c3320;margin:0 0 4px;}
.bn-onboarding p{font-size:12px;color:#777;line-height:1.45;margin:0 0 12px;}
.bn-steps{display:flex;flex-direction:column;gap:8px;}
.bn-step{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e8ddd0;border-radius:10px;font-size:13px;}
.bn-step.done{opacity:.65;background:#f1f8e9;border-color:#c8e6c9;}
.bn-step-num{width:26px;height:26px;border-radius:50%;background:#1c3320;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bn-step.done .bn-step-num{background:#4caf50;}
.bn-step-action{margin-left:auto;}
.bn-step-action button{padding:6px 12px;border:none;border-radius:8px;background:#ff7a2e;color:#fff;font-size:12px;font-weight:700;cursor:pointer;}
.bn-mode-toggle{display:inline-flex;background:rgba(255,255,255,.12);border-radius:10px;padding:3px;gap:2px;}
.bn-mode-btn{border:none;background:transparent;color:rgba(255,255,255,.65);font-size:11px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit;}
.bn-mode-btn.active{background:#fff;color:#1c3320;}
.bn-simple-card{background:#fff;border:2px solid #e8ddd0;border-radius:14px;padding:16px;margin-bottom:10px;}
.bn-simple-card h4{font-size:16px;font-weight:800;color:#1c3320;margin:0 0 4px;}
.bn-simple-meta{font-size:12px;color:#777;margin-bottom:12px;line-height:1.4;}
.bn-btn-pack{width:100%;padding:16px;border:none;border-radius:12px;background:#1c3320;color:#fff;font-size:16px;font-weight:800;cursor:pointer;}
.bn-btn-pack:active{opacity:.9;transform:scale(.98);}
.bn-sidebar-mehr{margin:8px 10px 4px;padding:10px 12px;border:1px dashed rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);font-size:12px;font-weight:700;cursor:pointer;width:calc(100% - 20px);text-align:left;}

/* Plan-Upgrade (Einstellungen) */
.bn-plan-section{margin-bottom:16px;}
.bn-plan-usage{font-size:12px;color:var(--bn-muted);margin:0 0 12px;}
.bn-plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.bn-plan-card{background:#fff;border:1.5px solid var(--bn-border);border-radius:var(--bn-radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;}
.bn-plan-card.active{border-color:var(--bn-orange);box-shadow:0 0 0 1px rgba(255,122,46,.25);}
.bn-plan-name{font-size:14px;font-weight:800;color:var(--bn-green);}
.bn-plan-price{font-size:22px;font-weight:800;color:var(--bn-green);line-height:1.1;}
.bn-plan-price span{font-size:11px;font-weight:600;color:var(--bn-muted);}
.bn-plan-features{margin:0;padding-left:16px;font-size:11px;color:var(--bn-text);line-height:1.5;flex:1;}
.bn-plan-limits{font-size:10px;color:var(--bn-muted);font-weight:600;}
.bn-plan-btn{width:100%;padding:10px;border:none;border-radius:var(--bn-radius-sm);background:var(--bn-orange);color:#fff;font-size:12px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;display:block;box-sizing:border-box;}
.bn-plan-btn.outline{background:#fff;border:1.5px solid var(--bn-border);color:var(--bn-green);}
.bn-plan-badge{font-size:11px;font-weight:700;text-align:center;padding:8px;border-radius:var(--bn-radius-sm);}
.bn-plan-badge.current{background:#e8f5e9;color:#2e7d32;}
.bn-plan-badge.muted{color:var(--bn-muted);}