/* ═══════════════════════════════════════════════════════════════
   Feature-Gate-System
   Elemente mit data-feature werden bei fehlendem Plan visuell
   gesperrt (policy=lock) oder ausgeblendet (policy=hide).
   data-feature-disable deaktiviert Buttons/Inputs sanfter.
   ═══════════════════════════════════════════════════════════════ */

/* Gesperrtes Element: leicht abgedunkelt, nicht interagierbar, Sperr-Badge rechts oben */
.feat-locked{
  position:relative;
  opacity:.55;
  pointer-events:none;
  filter:saturate(.55);
  transition:opacity .2s ease, filter .2s ease;
}
.feat-locked::before{
  content:'';position:absolute;inset:0;
  border:1px dashed color-mix(in srgb, var(--np,#c8955a) 45%, transparent);
  border-radius:inherit;
  background:repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 10px,
    color-mix(in srgb, var(--np,#c8955a) 6%, transparent) 10px,
    color-mix(in srgb, var(--np,#c8955a) 6%, transparent) 11px
  );
  pointer-events:none;
  z-index:1;
}

/* Sperr-Badge: zeigt „ab Plan X" rechts oben */
.feat-lock-badge{
  position:absolute;top:8px;right:8px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;
  background:color-mix(in srgb, var(--np,#c8955a) 18%, var(--s1,#fff));
  color:var(--np,#c8955a);
  border:1px solid color-mix(in srgb, var(--np,#c8955a) 45%, transparent);
  border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 10px color-mix(in srgb, var(--np,#c8955a) 18%, transparent);
  pointer-events:auto;
  font-family:inherit;
}
.feat-lock-badge svg{width:11px;height:11px;flex-shrink:0}
.feat-lock-badge span{white-space:nowrap}

/* Sanftes Disable für Buttons/Inputs (data-feature-disable) */
.feat-disabled{
  opacity:.5;
  cursor:not-allowed !important;
  position:relative;
}
.feat-disabled::after{
  content:'🔒';
  margin-left:6px;
  font-size:.85em;
  filter:grayscale(1);
}

/* Inline-Hinweis-Box (data-feature-hint="key"), z. B. über einer Settings-Sektion */
.feat-hint-box{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin-bottom:12px;
  background:color-mix(in srgb, var(--np,#c8955a) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--np,#c8955a) 28%, transparent);
  border-radius:10px;
  font-size:12.5px;color:var(--t2,#555);line-height:1.5;
}
.feat-hint-box strong{color:var(--np,#c8955a);font-weight:700}
.feat-hint-box .feat-hint-ico{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--np,#c8955a) 14%, transparent);
  color:var(--np,#c8955a);
}
.feat-hint-box .feat-hint-ico svg{width:14px;height:14px}
.feat-hint-box .feat-hint-cta{
  margin-left:auto;
  padding:5px 11px;
  background:var(--np,#c8955a);color:#fff;
  border:none;border-radius:7px;
  font-size:11.5px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease;
}
.feat-hint-box .feat-hint-cta:hover{transform:translateY(-1px);box-shadow:0 4px 10px color-mix(in srgb, var(--np,#c8955a) 35%, transparent)}

/* Plan-Badge für VIP im Header/Sidebar — kräftig, hebt sich ab */
.plan-badge-vip{
  background:linear-gradient(135deg, rgba(155,111,212,.18), rgba(200,149,90,.14));
  color:#c8a5ff;
  border:1px solid rgba(155,111,212,.55);
  font-weight:800;
  box-shadow:0 0 10px rgba(155,111,212,.25);
  letter-spacing:.03em;
}